/* ══════════════════════════════════════════════════════════════
   VAREDUX v12 — DESIGN SYSTEM
   Tokens CSS + Componentes Globais
   Importar em TODAS as telas
══════════════════════════════════════════════════════════════ */

/* ── TOKENS ── */
:root, [data-theme="dark"] {
  --bg:   #07101C;
  --bg2:  #0C1926;
  --bg3:  #111F2E;
  --bg4:  #172638;
  --bd:   #1C3044;
  --bd2:  #243D58;
  --t1:   #ECF4FF;
  --t2:   #8BAFC8;
  --t3:   #3E5A72;
  --g:    #00E96B;
  --gd:   #00C45A;
  --gs:   rgba(0,233,107,.08);
  --blue: #4AADFF;
  --bluedim: rgba(74,173,255,.10);
  --red:  #FF4F5A;
  --reddim: rgba(255,79,90,.10);
  --amb:  #FFB020;
  --ambdim: rgba(255,176,32,.10);
  --pur:  #B39DFF;
  --purdim: rgba(179,157,255,.12);
  --shadow: 0 8px 32px rgba(0,0,0,.5);
  --r:    12px;
  --r2:   9px;
  --r3:   6px;
  --tr:   all .15s cubic-bezier(.4,0,.2,1);
}
[data-theme="light"] {
  --bg:   #F0F4FA;
  --bg2:  #FFFFFF;
  --bg3:  #F5F8FC;
  --bg4:  #E8EFF8;
  --bd:   #D0DFEE;
  --bd2:  #B8CFDF;
  --t1:   #09192A;
  --t2:   #3D5A73;
  --t3:   #8AA5BC;
  --g:    #007A3A;
  --gd:   #006030;
  --gs:   rgba(0,122,58,.08);
  --blue: #1872CC;
  --bluedim: rgba(24,114,204,.10);
  --red:  #C82030;
  --reddim: rgba(200,32,48,.10);
  --amb:  #A06800;
  --ambdim: rgba(160,104,0,.10);
  --pur:  #5030B0;
  --purdim: rgba(80,48,176,.10);
  --shadow: 0 4px 20px rgba(0,20,50,.12);
}

/* ── BASE ── */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { font-size:14px; scroll-behavior:smooth; }
body {
  font-family: 'DM Sans', sans-serif;
  background: var(--bg);
  color: var(--t1);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
::-webkit-scrollbar { width:5px; height:5px; }
::-webkit-scrollbar-track { background:var(--bg2); }
::-webkit-scrollbar-thumb { background:var(--g); border-radius:5px; }
a { color:var(--g); text-decoration:none; }
a:hover { text-decoration:underline; }
code { font-family:'DM Mono',monospace; font-size:.85em; background:var(--bg3); border:1px solid var(--bd); padding:1px 6px; border-radius:4px; color:var(--g); }

/* ── TYPOGRAPHY UTILITIES ── */
.text-xs   { font-size:.65rem; }
.text-sm   { font-size:.79rem; }
.text-dim  { color:var(--t2); }
.text-muted{ color:var(--t3); }
.text-g    { color:var(--g); }
.text-r    { color:var(--red); }
.text-a    { color:var(--amb); }
.text-b    { color:var(--blue); }
.font-mono { font-family:'DM Mono',monospace; }
.font-700  { font-weight:700; }
.font-800  { font-weight:800; }
.text-center { text-align:center; }
.link      { color:var(--g); cursor:pointer; }
.link:hover{ text-decoration:underline; }

/* ── SPACING ── */
.mt05 { margin-top:.4rem; }
.mt1  { margin-top:.75rem; }
.mt2  { margin-top:1.25rem; }
.mb05 { margin-bottom:.4rem; }
.mb1  { margin-bottom:.75rem; }
.mb2  { margin-bottom:1.25rem; }
.p1   { padding:.75rem; }

/* ── FLEX UTILITIES ── */
.flex     { display:flex; align-items:center; }
.flex-b   { display:flex; align-items:center; justify-content:space-between; }
.flex-w   { display:flex; flex-wrap:wrap; align-items:center; }
.flex-col { display:flex; flex-direction:column; }
.gap05    { gap:.4rem; }
.gap1     { gap:.75rem; }
.gap2     { gap:1.25rem; }

/* ── GRID ── */
.g2 { display:grid; grid-template-columns:1fr 1fr; gap:.9rem; }
.g3 { display:grid; grid-template-columns:1fr 1fr 1fr; gap:.85rem; }
.g4 { display:grid; grid-template-columns:repeat(4,1fr); gap:.8rem; }
@media(max-width:900px){ .g4 { grid-template-columns:1fr 1fr; } }
@media(max-width:600px){ .g2,.g3,.g4 { grid-template-columns:1fr; } }

/* ── BUTTONS ── */
.btn {
  display:inline-flex; align-items:center; justify-content:center;
  gap:.3rem; padding:.43rem .85rem; border-radius:var(--r2);
  font-size:.79rem; font-weight:600; cursor:pointer;
  transition:var(--tr); border:1px solid transparent;
  font-family:'DM Sans',sans-serif; white-space:nowrap; line-height:1;
}
.btn:active { transform:scale(.97); }
.btn-p   { background:var(--g); color:#040E18; border-color:var(--g); }
.btn-p:hover { background:var(--gd); }
.btn-o   { background:transparent; color:var(--g); border-color:rgba(0,233,107,.3); }
.btn-o:hover { background:var(--gs); }
.btn-gh  { background:transparent; color:var(--t2); border-color:var(--bd); }
.btn-gh:hover { background:var(--bg3); color:var(--t1); }
.btn-blue{ background:var(--bluedim); color:var(--blue); border-color:rgba(74,173,255,.22); }
.btn-red { background:var(--reddim); color:var(--red); border-color:rgba(255,79,90,.22); }
.btn-amb { background:var(--ambdim); color:var(--amb); border-color:rgba(255,176,32,.22); }
.btn-sm  { padding:.3rem .68rem; font-size:.74rem; border-radius:7px; }
.btn-xs  { padding:.2rem .52rem; font-size:.67rem; border-radius:6px; }
.btn-full{ width:100%; justify-content:center; }
.btn-icon{ padding:.43rem; aspect-ratio:1; }
.ico-btn {
  width:30px; height:30px; background:var(--bg3); border:1px solid var(--bd);
  border-radius:6px; display:flex; align-items:center; justify-content:center;
  cursor:pointer; color:var(--t2); font-size:.8rem; transition:var(--tr);
}
.ico-btn:hover { color:var(--t1); border-color:var(--bd2); }

/* ── FORM ELEMENTS ── */
.fi {
  width:100%; padding:.48rem .75rem; background:var(--bg3);
  border:1px solid var(--bd); border-radius:var(--r2);
  color:var(--t1); font-size:.82rem; outline:none; transition:var(--tr);
  font-family:'DM Sans',sans-serif;
}
.fi:focus { border-color:var(--g); box-shadow:0 0 0 3px rgba(0,233,107,.09); }
.fi::placeholder { color:var(--t3); }
select.fi { cursor:pointer; appearance:none; }
textarea.fi { resize:vertical; min-height:70px; line-height:1.5; }
.fg       { display:flex; flex-direction:column; gap:.22rem; margin-bottom:.7rem; }
.fg label { font-size:.7rem; font-weight:600; color:var(--t2); }
.fr       { display:grid; grid-template-columns:1fr 1fr; gap:.6rem; }
.fhint    { font-size:.67rem; color:var(--t3); margin-top:.12rem; }
.ferr     { font-size:.67rem; color:var(--red); margin-top:.12rem; }
.fi.error { border-color:var(--red); }
.cb       { display:flex; align-items:center; gap:.38rem; cursor:pointer; font-size:.8rem; color:var(--t2); padding:.16rem 0; }
.cb input { accent-color:var(--g); width:14px; height:14px; cursor:pointer; flex-shrink:0; }
.toggle-wrap { display:flex; align-items:center; justify-content:space-between; padding:.3rem 0; }
.toggle   { position:relative; display:inline-block; width:32px; height:17px; }
.toggle input { opacity:0; width:0; height:0; }
.slider   { position:absolute; cursor:pointer; inset:0; background:var(--bd2); border-radius:17px; transition:var(--tr); }
.slider:before { content:''; position:absolute; height:11px; width:11px; left:3px; bottom:3px; background:white; border-radius:50%; transition:var(--tr); }
.toggle input:checked + .slider { background:var(--g); }
.toggle input:checked + .slider:before { transform:translateX(15px); }

/* ── CARDS ── */
.card {
  background:var(--bg2); border:1px solid var(--bd);
  border-radius:var(--r); padding:1.1rem; margin-bottom:.9rem;
  transition:border-color .15s;
}
.card:hover { border-color:var(--bd2); }
.card-hd {
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:.8rem; flex-wrap:wrap; gap:.45rem;
}
.card-title { font-size:.87rem; font-weight:700; display:flex; align-items:center; gap:.38rem; color:var(--t1); }

/* ── METRIC CARDS ── */
.mc {
  background:var(--bg2); border:1px solid var(--bd);
  border-radius:var(--r); padding:.9rem; transition:var(--tr);
}
.mc:hover { border-color:var(--bd2); transform:translateY(-1px); }
.mc-l { font-size:.63rem; font-weight:700; color:var(--t3); text-transform:uppercase; letter-spacing:.5px; margin-bottom:.2rem; }
.mc-v { font-size:1.75rem; font-weight:800; font-family:'DM Mono',monospace; letter-spacing:-.04em; line-height:1; color:var(--t1); }
.mc-s { font-size:.68rem; color:var(--t3); margin-top:.18rem; }

/* ── STAT BOXES ── */
.stat-b { background:var(--bg2); border:1px solid var(--bd); border-radius:var(--r2); padding:.75rem; text-align:center; }
.stat-v { font-size:1.3rem; font-weight:800; font-family:'DM Mono',monospace; color:var(--t1); }
.stat-l { font-size:.65rem; color:var(--t3); text-transform:uppercase; letter-spacing:.5px; margin-top:.15rem; }

/* ── TABLES ── */
.tbl { overflow-x:auto; border-radius:var(--r2); border:1px solid var(--bd); margin-bottom:.7rem; }
table  { width:100%; border-collapse:collapse; font-size:.79rem; }
thead th {
  background:var(--bg3); color:var(--t2); font-size:.68rem; font-weight:700;
  padding:8px 10px; text-align:left; white-space:nowrap; cursor:pointer; user-select:none;
}
thead th:hover { color:var(--t1); }
tbody td { padding:7px 10px; border-top:1px solid var(--bd); color:var(--t2); vertical-align:middle; }
tbody tr:hover td { background:var(--bg4); }
tbody td strong { color:var(--t1); }
td.center { text-align:center; }
td.right  { text-align:right; }
td.mono   { font-family:'DM Mono',monospace; }

/* ── PROGRESS ── */
.prog { background:var(--bg4); border-radius:20px; overflow:hidden; height:6px; }
.pb   { height:100%; border-radius:20px; transition:width .6s ease; }
.pb-g { background:var(--g); }
.pb-b { background:var(--blue); }
.pb-a { background:var(--amb); }
.pb-r { background:var(--red); }

/* ── CHIPS ── */
.chip { display:inline-flex; align-items:center; gap:3px; padding:2px 7px; border-radius:20px; font-size:.65rem; font-weight:700; white-space:nowrap; }
.chip-g { background:var(--gs);      color:var(--g);    border:1px solid rgba(0,233,107,.18); }
.chip-b { background:var(--bluedim); color:var(--blue); border:1px solid rgba(74,173,255,.18); }
.chip-r { background:var(--reddim);  color:var(--red);  border:1px solid rgba(255,79,90,.18); }
.chip-a { background:var(--ambdim);  color:var(--amb);  border:1px solid rgba(255,176,32,.18); }
.chip-p { background:var(--purdim);  color:var(--pur);  border:1px solid rgba(179,157,255,.18); }

/* ── ALERTS ── */
.alert { padding:.68rem .9rem; border-radius:var(--r2); border-left:3px solid; font-size:.79rem; margin-bottom:.7rem; line-height:1.5; color:var(--t1); }
.al-g  { background:var(--gs);      border-color:var(--g); }
.al-b  { background:var(--bluedim); border-color:var(--blue); }
.al-a  { background:var(--ambdim);  border-color:var(--amb); }
.al-r  { background:var(--reddim);  border-color:var(--red); }
.alert strong { font-weight:700; color:var(--t1); }

/* ── TABS ── */
.tabs { display:flex; gap:.25rem; border-bottom:1px solid var(--bd); margin-bottom:.9rem; flex-wrap:wrap; }
.tab  {
  padding:.48rem .9rem; border-radius:var(--r3) var(--r3) 0 0;
  font-size:.79rem; font-weight:600; cursor:pointer; color:var(--t2);
  transition:var(--tr); border:1px solid transparent; border-bottom:none;
  position:relative; top:1px; user-select:none;
}
.tab:hover { color:var(--t1); background:var(--bg3); }
.tab.on    { background:var(--bg2); color:var(--g); border-color:var(--bd); border-bottom-color:var(--bg2); }
.tp        { display:none; }
.tp.on     { display:block; }

/* ── MODALS ── */
.modal {
  position:fixed; inset:0; background:rgba(0,0,0,.72);
  z-index:1000; display:none; align-items:center;
  justify-content:center; padding:1rem; backdrop-filter:blur(3px);
}
.modal.open { display:flex; }
.modal-box  {
  background:var(--bg2); border:1px solid var(--bd);
  border-radius:var(--r); padding:1.4rem; width:100%;
  max-width:500px; max-height:90vh; overflow-y:auto;
  position:relative; box-shadow:var(--shadow);
  animation:mIn .2s ease;
}
.modal-sm   { max-width:400px; }
.modal-wide { max-width:780px; }
@keyframes mIn { from{opacity:0;transform:translateY(8px) scale(.97)} to{opacity:1;transform:none} }
.modal-title { font-size:1.03rem; font-weight:800; color:var(--t1); margin-bottom:1rem; display:flex; align-items:center; gap:.45rem; }
.modal-close {
  position:absolute; top:.8rem; right:.8rem;
  width:24px; height:24px; background:var(--bg3); border:1px solid var(--bd);
  border-radius:5px; cursor:pointer; display:flex; align-items:center;
  justify-content:center; color:var(--t2); font-size:.73rem; transition:var(--tr);
}
.modal-close:hover { color:var(--red); border-color:rgba(255,79,90,.3); }
.modal-foot { display:flex; gap:.5rem; justify-content:flex-end; margin-top:.9rem; padding-top:.8rem; border-top:1px solid var(--bd); }

/* ── TOAST ── */
#toastContainer {
  position:fixed; bottom:1rem; right:1rem; z-index:2000;
  display:flex; flex-direction:column; gap:.32rem; pointer-events:none;
}
.toast-item {
  padding:.55rem .85rem; border-radius:var(--r2); font-size:.78rem;
  font-weight:500; display:flex; align-items:center; gap:.38rem;
  box-shadow:var(--shadow); pointer-events:auto; max-width:285px;
  animation:tIn .22s ease;
}
.toast-item.tg { background:rgba(0,233,107,.12); border:1px solid rgba(0,233,107,.25); color:var(--g); }
.toast-item.tr { background:var(--reddim);  border:1px solid rgba(255,79,90,.25);  color:var(--red); }
.toast-item.ta { background:var(--ambdim);  border:1px solid rgba(255,176,32,.25); color:var(--amb); }
.toast-item.tb { background:var(--bluedim); border:1px solid rgba(74,173,255,.25); color:var(--blue); }
@keyframes tIn { from{opacity:0;transform:translateX(8px)} to{opacity:1;transform:none} }

/* ── DROPZONE ── */
.dz {
  border:2px dashed var(--bd2); border-radius:var(--r2);
  padding:1.6rem 1.1rem; text-align:center; cursor:pointer;
  background:var(--bg3); transition:var(--tr); color:var(--t2);
}
.dz:hover { border-color:var(--g); background:var(--gs); color:var(--t1); }
.dz-icon  { font-size:1.8rem; margin-bottom:.35rem; }

/* ── KEY GRID ── */
.key-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(66px,1fr)); gap:.35rem; margin:.65rem 0; }
.kc       { background:var(--bg3); border:1px solid var(--bd); border-radius:6px; padding:.45rem; text-align:center; cursor:pointer; transition:var(--tr); }
.kc:hover { border-color:var(--bd2); }
.kc.kset  { border-color:var(--g); background:var(--gs); }
.kq       { font-size:.6rem; color:var(--t3); font-family:'DM Mono',monospace; margin-bottom:.12rem; }
.ka       { font-size:.9rem; font-weight:800; font-family:'DM Mono',monospace; color:var(--t1); }
.ka.set   { color:var(--g); }
.kw       { font-size:.58rem; color:var(--t3); margin-top:.1rem; }

/* ── WIZARD ── */
.wz       { display:flex; align-items:center; margin-bottom:1.4rem; }
.wz-s     { display:flex; align-items:center; gap:.38rem; flex:1; }
.wz-n     { width:26px; height:26px; border-radius:50%; border:2px solid var(--bd); display:flex; align-items:center; justify-content:center; font-size:.72rem; font-weight:700; background:var(--bg2); flex-shrink:0; transition:var(--tr); color:var(--t2); }
.wz-n.active { border-color:var(--g); background:var(--g); color:#040E18; }
.wz-n.done   { border-color:var(--g); background:var(--gs); color:var(--g); }
.wz-lbl      { font-size:.72rem; font-weight:600; color:var(--t3); transition:var(--tr); }
.wz-lbl.active { color:var(--g); }
.wz-lbl.done   { color:var(--t2); }
.wz-line { flex:1; height:2px; background:var(--bd); margin:0 .3rem; transition:var(--tr); max-width:55px; }
.wz-line.done { background:var(--g); }
.sp    { display:none; }
.sp.on { display:block; }

/* ── METHOD TABS (Corrigir OCR) ── */
.method-tabs   { display:flex; gap:.5rem; margin-bottom:1rem; flex-wrap:wrap; }
.method-tab    { flex:1; background:var(--bg3); border:1px solid var(--bd); border-radius:var(--r2); padding:.75rem; text-align:center; cursor:pointer; transition:var(--tr); min-width:80px; }
.method-tab.on { border-color:var(--g); background:var(--gs); }
.method-tab-icon  { font-size:1.5rem; margin-bottom:.2rem; }
.method-tab-title { font-size:.82rem; font-weight:700; color:var(--t1); }
.method-tab-sub   { font-size:.65rem; color:var(--t3); margin-top:.1rem; }

/* ── HEATMAP ── */
.heat-bar { height:24px; border-radius:5px; display:flex; align-items:center; justify-content:center; font-size:.67rem; font-weight:700; cursor:pointer; margin-bottom:.25rem; min-width:60px; }
.hc0 { background:rgba(0,233,107,.18); color:var(--g); }
.hc1 { background:rgba(74,173,255,.18); color:var(--blue); }
.hc2 { background:rgba(255,176,32,.18); color:var(--amb); }
.hc3 { background:rgba(255,140,66,.22); color:#FF8C42; }
.hc4 { background:rgba(255,79,90,.32);  color:var(--red); }

/* ── MATRIX ── */
.matrix-wrap  { overflow:auto; max-height:420px; border:1px solid var(--bd); border-radius:var(--r2); }
.matrix-table { border-collapse:collapse; font-size:.68rem; font-family:'DM Mono',monospace; min-width:400px; }
.matrix-table th { background:var(--bg3); padding:4px 6px; border:1px solid var(--bd); white-space:nowrap; font-size:.61rem; position:sticky; top:0; z-index:2; }
.matrix-table td { padding:3px 4px; border:1px solid var(--bd); text-align:center; cursor:pointer; }
.matrix-table .tn { background:var(--bg3); text-align:left; padding:3px 7px; position:sticky; left:0; font-family:'DM Sans',sans-serif; font-size:.71rem; font-weight:600; color:var(--t1); white-space:nowrap; min-width:100px; z-index:1; }
.c-ok  { background:rgba(0,233,107,.18); color:var(--g); }
.c-no  { background:rgba(255,79,90,.18); color:var(--red); }
.c-vo  { background:rgba(255,176,32,.14); color:var(--amb); }
.c-sel { outline:2px solid var(--g); outline-offset:-1px; }

/* ── EXAM CARDS ── */
.ec       { background:var(--bg2); border:1px solid var(--bd); border-radius:var(--r); padding:.9rem 1rem; margin-bottom:.6rem; transition:var(--tr); }
.ec:hover { border-color:var(--bd2); }
.ec-title { font-size:.9rem; font-weight:800; color:var(--g); cursor:pointer; }
.ec-title:hover { text-decoration:underline; opacity:.85; }
.ec-code  { font-size:.7rem; font-family:'DM Mono',monospace; color:var(--t3); cursor:pointer; margin-left:.4rem; }
.ec-meta  { display:flex; flex-wrap:wrap; gap:.4rem; margin:.35rem 0; font-size:.74rem; color:var(--t2); }
.ec-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:.35rem; margin-bottom:.5rem; }
.ec-stat  { background:var(--bg3); border-radius:6px; padding:.3rem .5rem; text-align:center; }
.ec-sv    { font-size:.83rem; font-weight:700; font-family:'DM Mono',monospace; color:var(--t1); }
.ec-sl    { font-size:.58rem; color:var(--t3); text-transform:uppercase; letter-spacing:.3px; }
.ec-acts  { display:flex; gap:.3rem; flex-wrap:wrap; margin-top:.45rem; }

/* ── CLASS CARDS ── */
.cls-card       { background:var(--bg2); border:1px solid var(--bd); border-radius:var(--r); padding:.9rem; transition:var(--tr); cursor:pointer; }
.cls-card:hover { border-color:var(--bd2); transform:translateY(-1px); }
.cls-stat       { background:var(--bg3); border:1px solid var(--bd); border-radius:7px; padding:.7rem .8rem; text-align:center; }
.cls-sv         { font-size:1.45rem; font-weight:800; font-family:'DM Mono',monospace; line-height:1; color:var(--t1); }
.cls-sl         { font-size:.62rem; color:var(--t3); text-transform:uppercase; letter-spacing:.4px; margin-top:.15rem; }

/* ── PLAN CARDS ── */
.plan-card       { background:var(--bg2); border:1.5px solid var(--bd); border-radius:var(--r); padding:1.2rem; transition:var(--tr); cursor:pointer; }
.plan-card:hover { border-color:var(--bd2); transform:translateY(-2px); }
.plan-card.feat  { border-color:var(--g); box-shadow:0 0 20px rgba(0,233,107,.13); }
.plan-price      { font-size:1.9rem; font-weight:900; font-family:'DM Mono',monospace; color:var(--g); }
.plan-period     { font-size:.72rem; color:var(--t3); margin-bottom:.8rem; }
.plan-feat       { display:flex; align-items:center; gap:.38rem; font-size:.77rem; color:var(--t2); padding:.18rem 0; }
.pf-ok           { color:var(--g); flex-shrink:0; }
.pf-no           { color:var(--t3); flex-shrink:0; }

/* ── REPORT TYPES ── */
.rtype      { background:var(--bg3); border:2px solid var(--bd); border-radius:var(--r2); padding:.85rem; cursor:pointer; transition:var(--tr); text-align:center; }
.rtype:hover{ border-color:var(--bd2); }
.rtype.sel  { border-color:var(--g); background:var(--gs); }
.rtype-icon { font-size:1.7rem; margin-bottom:.28rem; }
.rtype-name { font-size:.8rem; font-weight:700; color:var(--t1); }
.rtype-sub  { font-size:.65rem; color:var(--t3); margin-top:.1rem; }

/* ── SHARE CODE ── */
.share-code { background:var(--bg3); border:1.5px solid var(--bd); border-radius:var(--r2); padding:.75rem; text-align:center; font-size:1.4rem; font-weight:900; font-family:'DM Mono',monospace; color:var(--g); letter-spacing:.14em; cursor:pointer; transition:var(--tr); margin-bottom:.6rem; }
.share-code:hover { border-color:var(--g); background:var(--gs); }

/* ── DEVICE CARDS ── */
.device-card { display:flex; align-items:center; gap:.7rem; padding:.6rem .8rem; background:var(--bg3); border:1px solid var(--bd); border-radius:var(--r2); margin-bottom:.4rem; }

/* ── QUICK BUTTONS ── */
.qb { background:var(--bg3); border:1px solid var(--bd); border-radius:var(--r2); padding:.62rem .85rem; cursor:pointer; display:flex; align-items:center; gap:.42rem; font-size:.79rem; font-weight:600; color:var(--t1); transition:var(--tr); text-decoration:none; }
.qb:hover { border-color:var(--g); color:var(--g); background:var(--gs); transform:translateY(-1px); }

/* ── TODO ── */
.todo-item  { display:flex; align-items:center; gap:.5rem; padding:.5rem; border-bottom:1px solid var(--bd); transition:background .13s; }
.todo-item:last-child { border-bottom:none; }
.todo-item:hover { background:var(--bg3); border-radius:7px; }
.todo-ck    { width:18px; height:18px; border:2px solid var(--bd2); border-radius:50%; flex-shrink:0; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:var(--tr); }
.todo-ck.done { background:var(--g); border-color:var(--g); color:#040E18; font-size:.7rem; }
.todo-text  { flex:1; font-size:.8rem; color:var(--t1); }
.todo-count { font-size:.65rem; color:var(--t3); }

/* ── PORTAL ── */
.portal-card  { background:var(--bg2); border:1px solid var(--bd); border-radius:var(--r); padding:1.5rem; margin-bottom:1rem; }
.portal-score { font-size:2.8rem; font-weight:900; font-family:'DM Mono',monospace; text-align:center; line-height:1; }

/* ── CAMERA AREA ── */
.camera-area { background:var(--bg3); border-radius:var(--r2); min-height:240px; display:flex; align-items:center; justify-content:center; overflow:hidden; border:2px dashed var(--bd2); }

/* ── DIVIDER ── */
.divider { display:flex; align-items:center; gap:.55rem; color:var(--t3); font-size:.73rem; margin:.6rem 0; }
.divider::before, .divider::after { content:''; flex:1; height:1px; background:var(--bd); }

/* ── FILTER BAR ── */
.filter-bar { display:flex; gap:.5rem; margin-bottom:1rem; flex-wrap:wrap; align-items:center; }

/* ── GROUP HEADER ── */
.grp-hd { display:flex; align-items:center; gap:.5rem; padding:.45rem .65rem; background:var(--bg3); border:1px solid var(--bd); border-radius:var(--r2); cursor:pointer; font-size:.8rem; font-weight:700; color:var(--t1); margin-bottom:.5rem; transition:var(--tr); user-select:none; }
.grp-hd:hover { background:var(--bg4); }
.grp-count { margin-left:auto; background:var(--bg4); padding:1px 8px; border-radius:10px; font-size:.7rem; color:var(--t2); }

/* ── HR ── */
hr { border:none; border-top:1px solid var(--bd); margin:.75rem 0; }

/* ── ANSWER CARD PREVIEW (print) ── */
.answer-card-preview { background:#fff; color:#1a1a1a; border:2px solid #333; border-radius:6px; padding:.9rem; font-family:Arial,sans-serif; font-size:.75rem; }

/* ── RESPONSIVE ── */
@media(max-width:900px) {
  .sidebar      { transform:translateX(-100%); position:fixed; z-index:100; height:100vh; top:0; }
  .sidebar.open { transform:none; }
  .main-wrap    { margin-left:0 !important; }
  .topbar       { flex-wrap:wrap; }
  .page-content { padding:.85rem; }
  .ham          { display:flex !important; }
}
.ham { display:none; background:none; border:1px solid var(--bd); border-radius:var(--r3); padding:6px 9px; color:var(--t2); cursor:pointer; font-size:1rem; align-items:center; justify-content:center; }