:root{
  --burgundy:#8B2331; --burgundy-dk:#6E1A26; --burgundy-lt:#A6404E;
  --cream:#F8F2E8; --cream-dk:#EFE4D2; --line:#E2D6C2;
  --ink:#2B2B2B; --muted:#7A6E5F;
  --green:#1F7A4C; --amber:#B4791B; --red:#B3261E; --grey:#9A9186;
  --radius:12px; --shadow:0 2px 10px rgba(80,40,30,.08);
}
*{box-sizing:border-box;margin:0;padding:0}
body{
  font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;
  background:var(--cream); color:var(--ink);
  font-size:16px; line-height:1.5; -webkit-text-size-adjust:100%;
}
h1,h2,h3,.display{font-family:"Cormorant Garamond",Georgia,serif; font-weight:600; color:var(--burgundy)}
h1{font-size:1.9rem;line-height:1.15}
h2{font-size:1.4rem;margin-bottom:.4rem}
h3{font-size:1.15rem}
a{color:var(--burgundy)}

/* ---------- header ---------- */
header{
  background:var(--burgundy); color:#fff; padding:.7rem 1rem;
  display:flex; align-items:center; gap:.75rem; position:sticky; top:0; z-index:50;
  box-shadow:0 2px 8px rgba(0,0,0,.15);
}
header .brand{font-family:"Cormorant Garamond",Georgia,serif; font-size:1.35rem; color:#fff; font-weight:600; line-height:1.1}
header .brand small{display:block; font-family:Inter,sans-serif; font-size:.62rem; letter-spacing:.09em; text-transform:uppercase; opacity:.8}
header .spacer{flex:1}
header .who{text-align:right; font-size:.75rem; line-height:1.3}
header .who b{display:block; font-size:.85rem}
header .role{opacity:.85; text-transform:uppercase; letter-spacing:.05em; font-size:.62rem}
header button{
  background:rgba(255,255,255,.15); color:#fff; border:1px solid rgba(255,255,255,.35);
  padding:.4rem .7rem; border-radius:8px; font-size:.78rem; cursor:pointer;
}
header button:hover{background:rgba(255,255,255,.28)}

/* ---------- nav ---------- */
nav{
  display:flex; gap:.25rem; overflow-x:auto; background:#fff; padding:.4rem .5rem;
  border-bottom:1px solid var(--line); position:sticky; top:56px; z-index:40;
  scrollbar-width:none;
}
nav::-webkit-scrollbar{display:none}
nav button{
  flex:0 0 auto; background:transparent; border:none; padding:.5rem .8rem; border-radius:8px;
  font-size:.85rem; color:var(--muted); cursor:pointer; white-space:nowrap; font-weight:500;
}
nav button.on{background:var(--cream-dk); color:var(--burgundy); font-weight:600}
nav button .dot{
  display:inline-block; min-width:1.15rem; padding:0 .25rem; margin-left:.3rem;
  background:var(--red); color:#fff; border-radius:9px; font-size:.66rem; line-height:1.15rem;
  text-align:center; font-weight:700;
}

main{padding:1rem; max-width:1100px; margin:0 auto; padding-bottom:4rem}

/* ---------- cards ---------- */
.card{background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:1rem; margin-bottom:.85rem; box-shadow:var(--shadow)}
.card.tight{padding:.75rem}
.muted{color:var(--muted); font-size:.85rem}
.tiny{font-size:.75rem}
.row{display:flex; align-items:center; gap:.6rem}
.row.wrap{flex-wrap:wrap}
.grow{flex:1}

/* ---------- KPI ---------- */
.kpis{display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:.6rem; margin-bottom:1rem}
.kpi{background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:.8rem; text-align:center; box-shadow:var(--shadow)}
.kpi b{display:block; font-size:1.75rem; color:var(--burgundy); font-family:"Cormorant Garamond",serif}
.kpi span{font-size:.68rem; text-transform:uppercase; letter-spacing:.05em; color:var(--muted)}
.kpi.warn{border-color:var(--red); background:#fff5f4}
.kpi.warn b{color:var(--red)}

/* ---------- buttons ---------- */
button.btn{
  background:var(--burgundy); color:#fff; border:none; padding:.7rem 1.1rem;
  border-radius:10px; font-size:.92rem; font-weight:600; cursor:pointer; font-family:inherit;
}
button.btn:hover{background:var(--burgundy-dk)}
button.btn:disabled{background:var(--grey); cursor:not-allowed}
button.btn.ghost{background:transparent; color:var(--burgundy); border:1.5px solid var(--burgundy)}
button.btn.ghost:hover{background:var(--cream-dk)}
button.btn.wide{width:100%; margin-top:.4rem}
button.btn.sm{padding:.4rem .7rem; font-size:.8rem; border-radius:8px}
button.btn.danger{background:var(--red)}
button.btn.ok{background:var(--green)}
button.btn.big{padding:1.1rem; font-size:1.05rem; width:100%}

input,select,textarea{
  width:100%; padding:.65rem .75rem; border:1.5px solid var(--line); border-radius:9px;
  font-size:1rem; font-family:inherit; background:#fff; color:var(--ink);
}
input:focus,select:focus,textarea:focus{outline:none; border-color:var(--burgundy)}
label{display:block; font-size:.78rem; font-weight:600; color:var(--muted); margin:.6rem 0 .25rem; text-transform:uppercase; letter-spacing:.04em}
textarea{min-height:75px; resize:vertical}

/* ---------- badges / bands ---------- */
.badge{display:inline-block; padding:.15rem .5rem; border-radius:20px; font-size:.68rem; font-weight:700; letter-spacing:.03em; text-transform:uppercase}
.badge.green{background:#e3f3ea; color:var(--green)}
.badge.amber{background:#fdf1dc; color:var(--amber)}
.badge.red{background:#fbe6e5; color:var(--red)}
.badge.grey{background:#eee9e1; color:var(--grey)}
.badge.crit{background:var(--red); color:#fff}
.badge.repeat{background:#4a2a6b; color:#fff}
.badge.burg{background:var(--cream-dk); color:var(--burgundy)}

/* ---------- tables ---------- */
.tablewrap{overflow-x:auto; -webkit-overflow-scrolling:touch}
table{width:100%; border-collapse:collapse; font-size:.84rem; min-width:520px}
th{background:var(--cream-dk); color:var(--burgundy); text-align:left; padding:.55rem .6rem; font-weight:600; font-size:.74rem; text-transform:uppercase; letter-spacing:.04em; white-space:nowrap}
td{border-bottom:1px solid var(--line); padding:.55rem .6rem; vertical-align:middle}
tr.pinned td{background:#fff5f4}
.num{text-align:right; font-variant-numeric:tabular-nums}

/* ---------- task rows ---------- */
.task{display:flex; align-items:center; gap:.7rem; padding:.7rem; border:1px solid var(--line); border-radius:10px; background:#fff; margin-bottom:.5rem}
.task .meta{flex:1; min-width:0}
.task .meta b{display:block; font-size:.92rem; font-weight:600}
.task.done{border-left:4px solid var(--green)}
.task.invalid{border-left:4px solid var(--red); background:#fff5f4}
.task.missed{border-left:4px solid var(--red)}
.task.missed_annotated{border-left:4px solid var(--grey); opacity:.72}
.task.pending{border-left:4px solid var(--amber)}
.cam-hint{font-size:.7rem; color:var(--burgundy); font-weight:600}

/* ---------- questionnaire ---------- */
.q{border:1px solid var(--line); border-radius:10px; padding:.85rem; margin-bottom:.7rem; background:#fff}
.q.answered{background:#f7f7f5; opacity:.75}
.q .qtext{font-size:.95rem; margin-bottom:.55rem}
.answers{display:grid; grid-template-columns:repeat(4,1fr); gap:.35rem}
.answers button{
  padding:.6rem .2rem; border:1.5px solid var(--line); background:#fff; border-radius:9px;
  font-size:.78rem; font-weight:600; cursor:pointer; font-family:inherit; color:var(--muted);
}
.answers button.sel{color:#fff}
.answers button[data-a=C].sel{background:var(--green); border-color:var(--green)}
.answers button[data-a=PC].sel{background:var(--amber); border-color:var(--amber)}
.answers button[data-a=NC].sel{background:var(--red); border-color:var(--red)}
.answers button[data-a=NA].sel{background:var(--grey); border-color:var(--grey)}

/* ---------- sparkline / heat ---------- */
.spark{display:inline-flex; align-items:flex-end; gap:1.5px; height:22px}
.spark i{width:4px; background:var(--burgundy-lt); border-radius:1px; display:block; min-height:2px}
.heat{display:grid; grid-template-columns:repeat(auto-fit,minmax(78px,1fr)); gap:.35rem}
.heat div{padding:.5rem .3rem; border-radius:8px; text-align:center; color:#fff}
.heat b{display:block; font-size:1rem}
.heat span{font-size:.63rem; letter-spacing:.05em}

/* ---------- modal ---------- */
.modal{position:fixed; inset:0; background:rgba(43,32,28,.65); display:flex; align-items:center; justify-content:center; z-index:100; padding:1rem}
.modal .box{background:#fff; border-radius:16px; padding:1.25rem; max-width:440px; width:100%; max-height:92vh; overflow:auto}
.modal.wide .box{max-width:760px}
.pinpad{font-size:1.9rem; text-align:center; letter-spacing:.6rem; padding:.7rem; font-variant-numeric:tabular-nums}
video,canvas.preview{width:100%; border-radius:10px; background:#000; display:block}
.shot{width:100%; border-radius:10px; display:block; border:2px solid var(--green)}

.err{background:#fbe6e5; color:var(--red); padding:.6rem .8rem; border-radius:9px; font-size:.85rem; margin:.5rem 0; font-weight:500}
.ok{background:#e3f3ea; color:var(--green); padding:.6rem .8rem; border-radius:9px; font-size:.85rem; margin:.5rem 0; font-weight:500}
.warnbar{background:#fdf1dc; color:var(--amber); border:1px solid #f0d9a8; padding:.6rem .8rem; border-radius:9px; font-size:.85rem; margin-bottom:.7rem; font-weight:500}

.empty{text-align:center; padding:2.5rem 1rem; color:var(--muted)}
.empty .big{font-size:2.2rem; margin-bottom:.4rem; opacity:.4}
.sect{margin:1.2rem 0 .5rem; font-size:.75rem; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); font-weight:700}
hr{border:none; border-top:1px solid var(--line); margin:.9rem 0}