:root{
  --ink-900:#0E1B30; --ink-800:#14274A; --ink-700:#1C3459;
  --paper:#EEF2F2; --paper-raise:#FFFFFF; --line:#D7DEDC;
  --signal-500:#2FA79C; --signal-600:#1F8A81; --signal-100:#DCEFEC;
  --amber-500:#E2A63A; --amber-100:#FBEDD3;
  --crest-600:#A5384A; --crest-100:#F5DEE1;
  --ink-text:#14213A; --slate-500:#5B6472; --slate-300:#8B93A0;
  --font-display:'Fraunces', Georgia, serif;
  --font-body:'IBM Plex Sans', Arial, sans-serif;
  --font-mono:'IBM Plex Mono', monospace;
}
*{box-sizing:border-box;}
body{margin:0; font-family:var(--font-body); color:var(--ink-text); background:var(--paper);}
a{color:inherit;}
input,select,button{font-family:inherit;}

/* ---------- public pages ---------- */
.public-wrap{min-height:100vh; display:flex; align-items:center; justify-content:center; padding:30px;
  background:radial-gradient(circle at 20% 20%, rgba(47,167,156,0.10), transparent 55%), var(--ink-900);}
.card{background:var(--paper-raise); border-radius:16px; padding:34px; width:100%; max-width:420px; box-shadow:0 20px 50px rgba(9,17,30,0.35);}
.brand-row{display:flex; align-items:center; gap:10px; justify-content:center; margin-bottom:18px;}
.brand-row .word{font-family:var(--font-display); font-weight:600; font-size:19px;}
.brand-row .word b{color:var(--signal-500);}
.card h1{font-family:var(--font-display); font-size:22px; text-align:center; margin:0 0 22px;}
.field{margin-bottom:14px;}
.field label{display:block; font-size:12.5px; font-weight:600; margin-bottom:5px;}
.field input, .field select{width:100%; padding:11px 12px; border:1.5px solid var(--line); border-radius:8px; font-size:14px;}
.field input:focus, .field select:focus{outline:none; border-color:var(--signal-500); box-shadow:0 0 0 3px var(--signal-100);}
.role-switch{display:flex; gap:8px; margin-bottom:20px;}
.role-switch a{flex:1; text-align:center; padding:9px; border-radius:8px; border:1.5px solid var(--line); font-size:13px; font-weight:600; color:var(--slate-500); text-decoration:none;}
.role-switch a.active{background:var(--ink-900); color:#fff; border-color:var(--ink-900);}
.btn{width:100%; padding:12px; border:none; border-radius:8px; font-size:14.5px; font-weight:700; cursor:pointer;}
.btn-primary{background:var(--signal-500); color:#062421;}
.btn-primary:hover{background:var(--signal-600);}
.btn-dark{background:var(--ink-900); color:#EAF0EE;}
.btn-dark:hover{background:var(--ink-700);}
.alert{background:var(--crest-100); color:var(--crest-600); padding:10px 14px; border-radius:8px; font-size:13px; margin-bottom:16px;}
.center-link{display:block; text-align:center; margin-top:16px; font-size:12.5px; color:var(--slate-500);}
.gender-row{display:flex; gap:16px; align-items:center; margin-bottom:16px; font-size:13px;}
.gender-row label{display:flex; align-items:center; gap:5px; font-weight:500;}

/* ---------- admin layout ---------- */
.admin-shell{display:grid; grid-template-columns:230px 1fr; min-height:100vh;}
.admin-sidebar{background:var(--ink-900); color:#C7D2CE; padding:20px 14px; position:sticky; top:0; height:100vh;}
.admin-sidebar .brand-row{justify-content:flex-start; margin-bottom:24px; padding:0 6px;}
.admin-sidebar .word{color:#F1F4F2;}
.admin-nav a{display:flex; align-items:center; gap:10px; padding:10px; border-radius:8px; color:#B7C3C0; text-decoration:none; font-size:13.5px; font-weight:500; margin-bottom:2px; position:relative; transition:background .18s ease, color .18s ease, padding-left .18s ease;}
.admin-nav a svg{width:16px; height:16px; opacity:.8; flex-shrink:0; transition:opacity .18s ease;}
.admin-nav a:hover{background:var(--ink-800); color:#F1F4F2; padding-left:14px;}
.admin-nav a.active{background:var(--ink-700); color:#F1F4F2; padding-left:14px;}
.admin-nav a.active::before{content:""; position:absolute; left:0; top:50%; transform:translateY(-50%); width:3px; height:60%; background:var(--signal-500); border-radius:0 3px 3px 0;}
.admin-nav a.active svg{opacity:1; color:var(--signal-500);}
.admin-nav .group{font-family:var(--font-mono); font-size:10px; text-transform:uppercase; letter-spacing:.08em; color:#5C6C7B; padding:14px 10px 6px;}
.admin-main{padding:26px 32px 60px;}
.admin-topbar{display:flex; justify-content:space-between; align-items:center; margin-bottom:22px;}
.admin-topbar h1{font-family:var(--font-display); font-size:22px; margin:0;}
.admin-topbar .who{font-size:12.5px; color:var(--slate-500);}
.stat-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:24px;}
.stat-card{background:var(--paper-raise); border:1px solid var(--line); border-radius:14px; padding:16px 18px; border-top:3px solid var(--signal-500); transition:transform .18s ease, box-shadow .18s ease;}
.stat-card:hover{transform:translateY(-3px); box-shadow:0 10px 24px rgba(14,27,48,0.10);}
.stat-card.c-amber{border-top-color:var(--amber-500);}
.stat-card.c-ink{border-top-color:var(--ink-700);}
.stat-card.c-crest{border-top-color:var(--crest-600);}
.stat-card .label{font-family:var(--font-mono); font-size:10.5px; text-transform:uppercase; color:var(--slate-500); margin-bottom:6px;}
.stat-card .value{font-family:var(--font-display); font-size:26px; font-weight:600;}
.panel{background:var(--paper-raise); border:1px solid var(--line); border-radius:14px; margin-bottom:22px; overflow:hidden; transition:box-shadow .18s ease;}
.panel:hover{box-shadow:0 6px 20px rgba(14,27,48,0.06);}
.panel-head{display:flex; justify-content:space-between; align-items:center; padding:16px 20px; border-bottom:1px solid var(--line);}
.panel-head h3{font-family:var(--font-display); font-size:16px; margin:0;}
.panel-body{padding:16px 20px;}
table{width:100%; border-collapse:collapse; font-size:13px;}
th{text-align:left; font-size:10.5px; text-transform:uppercase; color:var(--slate-500); font-family:var(--font-mono); padding:9px 12px; border-bottom:1px solid var(--line);}
td{padding:10px 12px; border-bottom:1px solid #EEF1F0;}
.chip{display:inline-block; font-size:11px; font-weight:600; padding:3px 10px; border-radius:12px;}
.chip.ok{background:var(--signal-100); color:var(--signal-600);}
.chip.warn{background:var(--amber-100); color:#9C6B0C;}
.chip.bad{background:var(--crest-100); color:var(--crest-600);}
.form-inline{display:flex; gap:8px; flex-wrap:wrap; align-items:end; margin-bottom:16px;}
.form-inline .field{margin-bottom:0; min-width:150px;}
.btn-sm{padding:8px 14px; font-size:12.5px; border-radius:7px; border:1.5px solid var(--line); background:#fff; cursor:pointer; font-weight:600;}
.btn-sm.danger{border-color:var(--crest-600); color:var(--crest-600);}
.btn-sm.primary{background:var(--ink-900); color:#fff; border-color:var(--ink-900);}
.tabs{display:flex; gap:6px; margin-bottom:18px;}
.tabs a{padding:8px 16px; border-radius:20px; font-size:12.5px; font-weight:600; text-decoration:none; color:var(--slate-500); border:1.5px solid var(--line);}
.tabs a.active{background:var(--ink-900); color:#fff; border-color:var(--ink-900);}
.qr-box{text-align:center; padding:16px; background:#FAFCFB; border:1.5px dashed var(--line); border-radius:12px; margin-bottom:16px;}
.qr-box img{border-radius:8px;}
.qr-box .code{font-family:var(--font-mono); font-size:18px; font-weight:700; margin-top:10px;}
.bar-row{display:flex; align-items:flex-end; gap:10px; height:120px; padding:6px 0;}
.bar-col{flex:1; display:flex; flex-direction:column; align-items:center; gap:6px; height:100%; justify-content:flex-end;}
.bar{width:100%; max-width:28px; border-radius:4px 4px 2px 2px; background:linear-gradient(180deg, var(--signal-500), var(--signal-600));}
.bar-label{font-size:10px; color:var(--slate-500); font-family:var(--font-mono);}
@media (max-width:900px){ .admin-shell{grid-template-columns:1fr;} .admin-sidebar{display:none;} .stat-grid{grid-template-columns:repeat(2,1fr);} }