:root {
  color-scheme: dark;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: #08111f;
  color: #eef4ff;
}
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: radial-gradient(circle at 20% 0%, #172a48 0, #08111f 42%); }
button, input { font: inherit; }
button { border: 0; border-radius: 12px; padding: .75rem 1rem; background: #70e1b2; color: #07140f; font-weight: 750; cursor: pointer; }
button:disabled { opacity: .5; cursor: wait; }
button.quiet { background: #18263b; color: #c9d7eb; }
main { width: min(720px, 100%); margin: 0 auto; padding: max(1rem, env(safe-area-inset-top)) 1rem max(2rem, env(safe-area-inset-bottom)); }
header, .section-title, .push-card { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
header { margin: .5rem 0 1.5rem; }
h1, h2, p { margin: 0; }
h1 { font-size: clamp(1.7rem, 6vw, 2.35rem); }
h2 { font-size: 1rem; }
.eyebrow { color: #70e1b2; font-size: .75rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.card, .notification { background: rgb(17 29 47 / 92%); border: 1px solid #253855; border-radius: 18px; box-shadow: 0 12px 36px rgb(0 0 0 / 18%); }
.push-card { padding: 1rem; margin-bottom: 1.5rem; }
.push-card p, .auth p, .meta { color: #94a8c4; font-size: .88rem; }
.section-title { margin: 0 0 .75rem; }
.feed { display: grid; gap: .8rem; }
.notification { padding: 1rem; }
.notification .top { display: flex; justify-content: space-between; gap: 1rem; margin-bottom: .5rem; }
.notification h3 { margin: 0; font-size: 1rem; }
.notification .body { color: #c9d7eb; line-height: 1.45; white-space: pre-wrap; }
.badge { border-radius: 999px; padding: .24rem .55rem; color: #70e1b2; background: #153b35; font-size: .72rem; font-weight: 800; white-space: nowrap; }
.actions { display: flex; flex-wrap: wrap; gap: .55rem; margin-top: .9rem; }
.actions button { padding: .58rem .75rem; font-size: .83rem; }
.actions .open { background: #263750; color: #dce8f8; }
.auth { margin: 12vh auto 0; max-width: 420px; padding: 1.25rem; }
.auth .mark { display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: 1rem; border-radius: 14px; background: #70e1b2; color: #07140f; font-weight: 900; }
.auth form { display: grid; gap: .85rem; margin-top: 1.2rem; }
label { display: grid; gap: .4rem; color: #b9c8dc; font-size: .86rem; }
input { width: 100%; border: 1px solid #324865; border-radius: 12px; padding: .8rem; background: #0c1727; color: #fff; }
.error { min-height: 1.25rem; margin-top: .8rem !important; color: #ff9e9e !important; }
.empty { padding: 2rem; text-align: center; color: #94a8c4; }
@media (max-width: 480px) { .push-card { align-items: flex-start; } .notification .top { flex-direction: column; gap: .35rem; } }