@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@500;600;700&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@500&display=swap');
:root{
  --night:#0E1626;--panel:#182338;--panel-2:#20304c;--hi:#F5B301;
  --go:#22C55E;--stop:#EF4444;--ink:#E8EDF5;--muted:#8A97AD;--line:rgba(255,255,255,.09);--radius:14px;
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
body{font-family:'Inter',system-ui,sans-serif;background:
  radial-gradient(1200px 600px at 50% -10%,#17233c 0%,transparent 60%),var(--night);
  color:var(--ink);min-height:100dvh}
.mono{font-family:'JetBrains Mono',monospace}
button{font-family:inherit;cursor:pointer;border:none}
.app{max-width:520px;margin:0 auto;min-height:100dvh;display:flex;flex-direction:column}

/* login */
.login{min-height:100dvh;display:grid;place-items:center;padding:22px}
.login .card{background:var(--panel);border:1px solid var(--line);border-radius:20px;padding:32px;width:100%;max-width:340px;text-align:center}
.login .logo{width:52px;height:52px;border-radius:13px;margin:0 auto 14px;background:linear-gradient(160deg,var(--hi),#c98f00);display:grid;place-items:center;font-size:1.5rem}
.login h1{font-family:'Oswald',sans-serif;letter-spacing:.05em;text-transform:uppercase;font-size:1.2rem}
.login p{color:var(--muted);font-size:.82rem;margin:6px 0 18px}
.login input{width:100%;text-align:center;font-family:'JetBrains Mono',monospace;font-size:1.6rem;letter-spacing:.4em;padding:14px;border-radius:12px;background:var(--night);border:1px solid var(--line);color:var(--ink);margin-bottom:12px}
.login button{width:100%;padding:14px;border-radius:12px;background:var(--hi);color:#1a1204;font-family:'Oswald',sans-serif;letter-spacing:.06em;text-transform:uppercase;font-size:1rem}
.login a{display:block;margin-top:14px;color:var(--muted);font-size:.82rem;text-decoration:none}

/* topbar */
.top{display:flex;align-items:center;gap:12px;padding:14px 16px;border-bottom:1px solid var(--line);
  position:sticky;top:0;z-index:10;background:rgba(14,22,38,.92);backdrop-filter:blur(8px)}
.top .logo{width:38px;height:38px;border-radius:10px;background:linear-gradient(160deg,var(--hi),#c98f00);display:grid;place-items:center;font-size:1.1rem}
.top .who b{font-family:'Oswald',sans-serif;letter-spacing:.04em;font-size:1rem;display:block;line-height:1.1}
.top .who small{color:var(--muted);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase}
.top .bell{margin-left:auto;position:relative;font-size:1.4rem;background:none}
.top .bell .badge{position:absolute;top:-6px;right:-8px;background:var(--stop);color:#fff;font-size:.62rem;
  min-width:18px;height:18px;border-radius:10px;display:grid;place-items:center;padding:0 5px;font-weight:700}
.top .bell .badge.hide{display:none}

/* aksi bar */
.bar{display:flex;gap:8px;padding:12px 16px;flex-wrap:wrap;align-items:center}
.bar .push-btn{background:var(--panel);border:1px solid var(--line);color:var(--ink);padding:9px 13px;border-radius:10px;font-size:.8rem}
.bar .push-btn.on{border-color:var(--go);color:var(--go)}
.bar .read-all{margin-left:auto;background:none;color:var(--muted);font-size:.8rem;text-decoration:underline}
.bar .out{background:none;color:var(--muted);font-size:.8rem;text-decoration:underline}

.hint{margin:0 16px 8px;font-size:.72rem;color:var(--muted);background:rgba(245,179,1,.07);
  border:1px solid rgba(245,179,1,.25);border-radius:10px;padding:9px 12px;display:none}
.hint.show{display:block}

/* feed */
.feed{flex:1;padding:6px 16px 26px;display:flex;flex-direction:column;gap:10px}
.card{display:flex;gap:12px;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  padding:12px;align-items:flex-start;animation:pop .3s ease}
.card.unread{border-color:var(--hi);box-shadow:0 0 0 1px rgba(245,179,1,.2)}
.card.baru{animation:flash 1.4s ease}
@keyframes pop{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
@keyframes flash{0%{background:rgba(245,179,1,.18)}100%{background:var(--panel)}}
.card .ic{width:40px;height:40px;flex:0 0 auto;border-radius:10px;display:grid;place-items:center;font-size:1.2rem}
.card.datang .ic{background:rgba(245,179,1,.16)} .card.keliling .ic{background:rgba(34,197,94,.16)} .card.pulang .ic{background:rgba(239,68,68,.16)}
.card .body{flex:1;min-width:0}
.card .body .j{font-family:'Oswald',sans-serif;letter-spacing:.03em;font-size:.98rem}
.card .body .m{color:var(--muted);font-size:.82rem;margin-top:2px}
.card .body .meta{display:flex;gap:12px;margin-top:8px;font-size:.74rem}
.card .body .meta a{color:var(--hi);text-decoration:none}
.card .body .t{color:var(--muted)}
.card .thumb{width:52px;height:52px;flex:0 0 auto;object-fit:cover;border-radius:9px;border:1px solid var(--line);cursor:pointer}
.empty{text-align:center;color:var(--muted);padding:50px 20px;font-size:.9rem}

/* modal */
.modal{position:fixed;inset:0;background:rgba(0,0,0,.86);display:none;place-items:center;padding:20px;z-index:100}
.modal.show{display:grid}
.modal img{max-width:92vw;max-height:88vh;border-radius:12px}
.modal .x{position:absolute;top:16px;right:20px;font-size:2rem;color:#fff;background:none}

.dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--go);margin-right:5px}