:root{
  --paper:#EEF1EF;
  --surface:#FFFFFF;
  --ink:#17302A;
  --muted:#647570;
  --line:#DCE3E0;
  --primary:#1F6F5C;
  --primary-dark:#175748;
  --amber:#D9913C;
  --amber-soft:#F6E7CF;
  --clay:#BC554D;
  --seat-empty:#E3E9E6;
  --seat-main:#1F6F5C;
  --seat-reserve:#D9913C;
  --radius:18px;
  --shadow:0 1px 2px rgba(23,48,42,.06),0 8px 24px rgba(23,48,42,.06);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:"Vazirmatn",system-ui,sans-serif;
  background:var(--paper);
  color:var(--ink);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
button{font-family:inherit;cursor:pointer}
a{color:inherit;text-decoration:none}

.topbar{
  position:sticky;top:0;z-index:10;
  display:flex;align-items:center;justify-content:space-between;
  gap:12px;padding:14px 18px;
  background:color-mix(in srgb,var(--paper) 82%,transparent);
  backdrop-filter:saturate(1.2) blur(10px);
  border-bottom:1px solid var(--line);
}
.brand{display:flex;align-items:center;gap:10px;font-weight:700}
.brand-mark{
  width:34px;height:34px;border-radius:11px;
  display:grid;place-items:center;
  background:var(--primary);color:#fff;font-weight:800;font-size:19px;
}
.brand-name{font-size:16px}
.topnav{display:flex;align-items:center;gap:8px}
.topnav form{margin:0}
.who{display:flex;flex-direction:column;align-items:flex-end;line-height:1.2;font-size:13px;font-weight:600}
.who-code{font-size:11px;color:var(--muted);font-weight:500;letter-spacing:.5px}

.btn-ghost{
  background:transparent;border:1px solid var(--line);
  color:var(--ink);padding:8px 14px;border-radius:11px;
  font-size:14px;font-weight:600;
}
.btn-solid{
  background:var(--primary);border:1px solid var(--primary);
  color:#fff;padding:11px 18px;border-radius:12px;
  font-size:15px;font-weight:700;display:inline-block;text-align:center;
}
.btn-solid.sm{padding:8px 14px;font-size:14px;border-radius:11px}
.btn-solid:hover{background:var(--primary-dark);border-color:var(--primary-dark)}
.btn-ghost:hover{border-color:var(--muted)}
.btn-solid:focus-visible,.btn-ghost:focus-visible,.btn-danger:focus-visible,input:focus-visible{
  outline:3px solid color-mix(in srgb,var(--primary) 40%,transparent);outline-offset:2px;
}
.btn-block{width:100%;display:block;border:none}
.btn-danger{
  background:transparent;border:1px solid color-mix(in srgb,var(--clay) 40%,var(--line));
  color:var(--clay);padding:10px 16px;border-radius:12px;font-weight:700;font-size:14px;width:100%;
}
.btn-danger:hover{background:color-mix(in srgb,var(--clay) 8%,#fff)}

.page{max-width:560px;margin:0 auto;padding:20px 16px 40px}

.flash-wrap{max-width:560px;margin:14px auto 0;padding:0 16px;display:grid;gap:8px}
.flash{padding:11px 14px;border-radius:12px;font-size:14px;font-weight:600}
.flash-ok{background:#E3F1EB;color:var(--primary-dark);border:1px solid #C4E3D6}
.flash-error{background:#F7E4E2;color:#8f3a34;border:1px solid #EBC6C2}

.hero{margin:6px 2px 18px}
.hero-eyebrow{font-size:13px;font-weight:600;color:var(--primary);letter-spacing:.4px;margin-bottom:4px}
.hero-title{font-size:24px;font-weight:800;margin:0 0 4px;letter-spacing:-.3px}
.hero-sub{margin:0;color:var(--muted);font-size:14.5px}

.cards{display:grid;gap:14px}
.card{
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius);padding:18px;box-shadow:var(--shadow);
}
.card.near{border-color:color-mix(in srgb,var(--primary) 35%,var(--line))}
.card.mine{box-shadow:0 0 0 2px var(--primary),var(--shadow)}

.card-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:14px}
.date-main{font-size:19px;font-weight:800;letter-spacing:-.2px}
.date-main .wd{color:var(--primary);margin-inline-end:6px}
.date-greg{font-size:12px;color:var(--muted);margin-top:2px}
.badge{
  font-size:12px;font-weight:700;padding:4px 10px;border-radius:999px;white-space:nowrap;
}
.badge-open{background:var(--amber-soft);color:#8a5a15}
.badge-near{background:#E3F1EB;color:var(--primary-dark)}
.badge-full{background:#F1DAD8;color:#8f3a34}

.seats{display:flex;align-items:center;gap:9px;margin-bottom:14px}
.seat{width:16px;height:16px;border-radius:50%;background:var(--seat-empty);flex:0 0 auto}
.seat.filled{background:var(--seat-main)}
.seat.reserve{background:var(--seat-reserve)}
.seat.reserve.empty{background:transparent;border:2px dashed var(--seat-reserve)}
.seat-sep{width:1px;height:18px;background:var(--line);margin:0 3px}
.seat-note{font-size:12px;color:var(--muted);margin-inline-start:auto;font-weight:600}

.members{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:16px;min-height:4px}
.chip{
  display:inline-flex;align-items:center;gap:6px;
  background:#F1F5F3;border:1px solid var(--line);
  padding:5px 11px;border-radius:999px;font-size:13.5px;font-weight:600;
}
.chip.reserve{background:var(--amber-soft);border-color:#EAD3AE}
.chip.cancelled{background:#F7E4E2;border-color:#EBC6C2;color:#a33a33;text-decoration:line-through}
.chip.cancelled .chip-tag{text-decoration:none;opacity:.9;font-weight:700}
.chip.me{background:var(--primary);color:#fff;border-color:var(--primary)}
.chip-tag{font-size:11px;font-weight:700;opacity:.75}
.chip.me .chip-tag{opacity:.9}

.empty-note{
  color:var(--muted);font-size:14px;background:#F5F8F6;border:1px dashed var(--line);
  padding:10px 12px;border-radius:12px;margin-bottom:16px;text-align:center;font-weight:600;
}
.card-action form{margin:0}
.state-full{text-align:center;color:#8f3a34;font-weight:700;padding:11px;background:#F7E9E7;border-radius:12px}
.state-login{
  display:block;text-align:center;padding:11px;border-radius:12px;
  border:1px solid var(--line);color:var(--primary-dark);font-weight:700;background:#F1F5F3;
}

.foot{text-align:center;color:var(--muted);font-size:12.5px;padding:8px 16px 30px}

/* forms / auth */
.auth{max-width:400px;margin:8px auto}
.auth-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:24px 22px;box-shadow:var(--shadow)}
.auth h1{font-size:22px;margin:0 0 4px;font-weight:800}
.auth .lead{color:var(--muted);font-size:14px;margin:0 0 18px}
.field{margin-bottom:14px}
.field label{display:block;font-size:13.5px;font-weight:600;margin-bottom:6px}
.field input{
  width:100%;padding:12px 14px;border:1px solid var(--line);border-radius:12px;
  font-size:16px;background:#fff;color:var(--ink);
}
.field .hint{font-size:12px;color:var(--muted);margin-top:6px}
.auth-alt{text-align:center;margin-top:16px;font-size:14px;color:var(--muted)}
.auth-alt a{color:var(--primary);font-weight:700}
.notice{
  background:var(--amber-soft);border:1px solid #EAD3AE;color:#7a5212;
  padding:10px 12px;border-radius:12px;font-size:13px;margin-bottom:16px;font-weight:600;
}

/* code reveal */
.code-box{text-align:center;padding:26px 18px}
.code-box .k{font-size:13px;color:var(--muted);font-weight:600;margin-bottom:8px}
.code-value{
  font-size:40px;font-weight:800;letter-spacing:4px;color:var(--primary);
  background:#F1F5F3;border:2px dashed var(--primary);border-radius:16px;
  padding:16px;margin-bottom:16px;direction:ltr;
}
.code-box .warn{color:var(--clay);font-weight:700;font-size:14px;margin-bottom:20px}

/* admin */
.admin-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}
.admin-head h1{font-size:20px;margin:0;font-weight:800}
.admin-week{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:16px;margin-bottom:12px;box-shadow:var(--shadow)}
.admin-week h3{margin:0 0 12px;font-size:16px;font-weight:700}
.admin-week h3 .wd{color:var(--primary)}
.slot{display:flex;align-items:center;gap:8px;padding:9px 0;border-top:1px solid var(--line);flex-wrap:wrap}
.slot:first-of-type{border-top:none}
.slot .role-tag{font-size:11px;font-weight:700;padding:3px 8px;border-radius:8px;background:#F1F5F3;color:var(--muted)}
.slot .role-tag.reserve{background:var(--amber-soft);color:#8a5a15}
.slot .role-tag.cancelled{background:#F7E4E2;color:#a33a33}
.slot .nm-cancelled{text-decoration:line-through;color:#a33a33}
.slot .nm{font-weight:600;font-size:14px}
.slot .cd{font-size:11px;color:var(--muted);direction:ltr}
.slot form{margin:0;display:flex;gap:6px;align-items:center;margin-inline-start:auto;flex-wrap:wrap}
.slot select{padding:6px 8px;border:1px solid var(--line);border-radius:9px;font-family:inherit;font-size:12.5px;background:#fff}
.slot .mini{padding:6px 10px;font-size:12.5px;border-radius:9px;border:1px solid var(--line);background:#fff;font-weight:700}
.slot .mini.go{background:var(--primary);color:#fff;border-color:var(--primary)}
.slot .mini.rm{color:var(--clay);border-color:color-mix(in srgb,var(--clay) 35%,var(--line))}
.slot-empty{color:var(--muted);font-size:13px;padding:9px 0;border-top:1px solid var(--line)}
.userlist{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:16px;box-shadow:var(--shadow);margin-top:20px}
.userlist h2{font-size:17px;margin:0 0 12px;font-weight:800}
.urow{display:flex;align-items:center;gap:10px;padding:9px 0;border-top:1px solid var(--line);flex-wrap:wrap}
.urow:first-of-type{border-top:none}
.urow .cd{font-size:12px;color:var(--muted);direction:ltr;background:#F1F5F3;padding:2px 8px;border-radius:7px}
.urow .cnt{font-size:12px;color:var(--muted);margin-inline-start:auto}
.urow form{margin:0}
.tabbar{display:flex;gap:8px;margin-bottom:16px}
.tabbar a{flex:1;text-align:center;padding:9px;border-radius:11px;border:1px solid var(--line);background:#fff;font-weight:700;font-size:14px}
.tabbar a.active{background:var(--ink);color:#fff;border-color:var(--ink)}

@media (prefers-reduced-motion:no-preference){
  .card,.auth-card,.admin-week{transition:box-shadow .2s ease}
}