:root{
  --bg:#F3EEE1; --bg-alt:#E9E1CC; --bg-raised:#FBF8EF;
  --ink:#16231C; --ink-dim:#51604F; --ink-faint:#7C8A78;
  --accent:#B87F1E; --accent-ink:#3A2A0C; --accent-2:#2E6B4C;
  --line:rgba(22,35,28,.14); --line-strong:rgba(22,35,28,.28);
  --shadow:0 20px 60px -25px rgba(22,35,28,.35);
  --good:#2E6B4C; --bad:#A34324;
  color-scheme: light;
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#12201B; --bg-alt:#1A2B23; --bg-raised:#1F332A;
    --ink:#F1E9D8; --ink-dim:#B7C4B4; --ink-faint:#7E9186;
    --accent:#E7AE3B; --accent-ink:#241A05; --accent-2:#5FA37C;
    --line:rgba(241,233,216,.14); --line-strong:rgba(241,233,216,.26);
    --shadow:0 24px 70px -20px rgba(0,0,0,.55);
    --good:#5FA37C; --bad:#E08862;
    color-scheme: dark;
  }
}
:root[data-theme="dark"]{
  --bg:#12201B; --bg-alt:#1A2B23; --bg-raised:#1F332A;
  --ink:#F1E9D8; --ink-dim:#B7C4B4; --ink-faint:#7E9186;
  --accent:#E7AE3B; --accent-ink:#241A05; --accent-2:#5FA37C;
  --line:rgba(241,233,216,.14); --line-strong:rgba(241,233,216,.26);
  --shadow:0 24px 70px -20px rgba(0,0,0,.55);
  --good:#5FA37C; --bad:#E08862;
  color-scheme: dark;
}
:root[data-theme="light"]{
  --bg:#F3EEE1; --bg-alt:#E9E1CC; --bg-raised:#FBF8EF;
  --ink:#16231C; --ink-dim:#51604F; --ink-faint:#7C8A78;
  --accent:#B87F1E; --accent-ink:#3A2A0C; --accent-2:#2E6B4C;
  --line:rgba(22,35,28,.14); --line-strong:rgba(22,35,28,.28);
  --shadow:0 20px 60px -25px rgba(22,35,28,.35);
  --good:#2E6B4C; --bad:#A34324;
  color-scheme: light;
}

*,*::before,*::after{box-sizing:border-box;}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:'Work Sans Var','Work Sans',system-ui,sans-serif;
  font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased;
}
h1,h2,h3{font-family:'Fraunces Var','Fraunces',serif; font-weight:600; text-wrap:balance; margin:0 0 .4em;}
.mono{font-family:'Plex Mono',monospace;}
a{color:inherit;}
.container{max-width:1100px;margin-inline:auto;padding-inline:clamp(20px,5vw,48px);}

.btn{
  display:inline-flex; align-items:center; gap:8px; font-family:'Plex Mono',monospace;
  font-size:.86rem; font-weight:500; text-decoration:none;
  padding:.8em 1.3em; border-radius:3px; border:1px solid transparent;
  transition:transform .2s, background .2s, border-color .2s;
  cursor:pointer; background:none; color:var(--ink);
}
.btn:focus-visible{outline:2px solid var(--accent); outline-offset:2px;}
.btn-solid{ background:var(--accent); color:var(--accent-ink); }
.btn-solid:hover{ transform:translateY(-2px); }
.btn-ghost{ border-color:var(--line-strong); }
.btn-ghost:hover{ border-color:var(--accent); color:var(--accent); }

.card{
  background:var(--bg-raised); border:1px solid var(--line-strong); border-radius:10px;
  padding:clamp(20px,4vw,32px);
}
.field{ display:flex; flex-direction:column; gap:6px; margin-bottom:16px; }
.field label{ font-family:'Plex Mono',monospace; font-size:.76rem; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-faint); }
.field input, .field textarea{
  font-family:'Work Sans Var',sans-serif; font-size:.95rem; padding:.7em .9em;
  border:1px solid var(--line-strong); border-radius:6px; background:var(--bg); color:var(--ink);
}
.field input:focus, .field textarea:focus{ outline:2px solid var(--accent); outline-offset:1px; }

.badge{
  display:inline-flex; align-items:center; gap:6px; font-family:'Plex Mono',monospace;
  font-size:.72rem; padding:3px 9px; border-radius:20px; text-transform:uppercase; letter-spacing:.05em;
}
.badge-good{ background:color-mix(in srgb, var(--good) 18%, transparent); color:var(--good); }
.badge-bad{ background:color-mix(in srgb, var(--bad) 18%, transparent); color:var(--bad); }
.badge-neutral{ background:var(--bg-alt); color:var(--ink-faint); }

table{ width:100%; border-collapse:collapse; }
th,td{ text-align:left; padding:10px 14px; border-bottom:1px solid var(--line); font-size:.9rem; }
th{ font-family:'Plex Mono',monospace; font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-faint); }

.topbar{
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  padding:16px clamp(20px,5vw,48px); border-bottom:1px solid var(--line);
}
.topbar .brand{ display:flex; align-items:center; gap:8px; text-decoration:none; font-family:'Fraunces Var',serif; font-weight:600; color:var(--ink); }
.topbar .brand em{ font-style:normal; color:var(--accent); }
.topbar nav{ display:flex; gap:18px; font-size:.88rem; }
.topbar nav a{ text-decoration:none; color:var(--ink-dim); }
.topbar nav a:hover{ color:var(--accent); }

.flash{ padding:10px 16px; border-radius:6px; font-size:.88rem; margin-bottom:16px; }
.flash-error{ background:color-mix(in srgb, var(--bad) 14%, transparent); color:var(--bad); }
.flash-ok{ background:color-mix(in srgb, var(--good) 14%, transparent); color:var(--good); }

/* ---------- push toggle ---------- */
.push-toggle{
  display:flex; align-items:center; gap:8px; cursor:pointer; border:none; background:none;
  padding:6px 10px; border-radius:20px; font-family:'Plex Mono',monospace; font-size:.76rem;
  color:var(--ink-dim);
}
.push-toggle-switch{
  width:34px; height:18px; border-radius:20px; background:var(--line-strong); position:relative;
  flex:none; transition:background .2s;
}
.push-toggle-switch::after{
  content:""; position:absolute; top:2px; left:2px; width:14px; height:14px; border-radius:50%;
  background:var(--bg-raised); transition:transform .2s;
}
.push-toggle.on .push-toggle-switch{ background:var(--good); }
.push-toggle.on .push-toggle-switch::after{ transform:translateX(16px); }

/* ---------- push modal ---------- */
.push-modal-overlay{
  position:fixed; inset:0; z-index:1000; background:rgba(22,35,28,.5);
  display:flex; align-items:center; justify-content:center; padding:20px;
}
.push-modal-overlay[hidden]{ display:none !important; }
.push-modal{
  max-width:380px; width:100%; background:var(--bg-raised); border:1px solid var(--line-strong);
  border-radius:10px; padding:28px; box-shadow:var(--shadow);
}
.push-modal h3{ margin:0 0 10px; font-family:'Fraunces Var',serif; font-size:1.15rem; }
.push-modal p{ color:var(--ink-dim); font-size:.9rem; margin-bottom:20px; }
.push-modal-actions{ display:flex; gap:10px; justify-content:flex-end; }