*{box-sizing:border-box;margin:0;padding:0}
:root{
  /* Jaguars teal + gold */
  --pr:#006272;--prd:#004a57;--pm:#00899b;--pl:#dff2f5;--px:#f0fafb;
  --go:#c9a84c;--gl:#fdf6e3;--gd:#7a5a0a;--gm:#d4a843;
  --green:#2d6e2d;--greenl:#e8f5e8;--greenb:#a8d8a8;
  --red:#a32d2d;--redl:#fce8e8;--redb:#f5b8b8;
  --blue:#185fa5;--bluel:#e6f1fb;
  --amber:#7a5a0a;--amberl:#fdf0c8;
  --coral:#993c1d;--corall:#faece7;
  --bg:#f0fafb;--su:#ffffff;--s2:#e4f4f7;--s3:#cce8ed;
  --tx:#0d2a2f;--t2:#3a5f68;--t3:#7aaab2;--t4:#b0d4da;
  --bo:#b8dde3;--bo2:#d6eef2;
  --ra:10px;--rl:14px;--rp:999px;
  --fn:'Segoe UI',system-ui,sans-serif;
  --mo:'Cascadia Code','Fira Code','Courier New',Consolas,monospace;
  --shadow:0 2px 12px rgba(0,98,114,.10);
  --shadow-lg:0 4px 24px rgba(0,98,114,.14);
}
html{scroll-behavior:smooth}
body{font-family:var(--fn);background:var(--bg);color:var(--tx);font-size:15px;min-height:100vh}
code{font-family:var(--mo);background:rgba(0,98,114,.08);color:var(--prd);padding:2px 6px;border-radius:5px;font-size:.88em;word-break:break-all}

/* ═══════════════════════════════════════════════
   HEADER
═══════════════════════════════════════════════ */
.site-header{
  background:#ffffff;
  padding:0 28px;
  display:flex;align-items:center;justify-content:space-between;
  gap:0;
  border-bottom:1px solid #e4ecef;
  position:sticky;top:0;z-index:200;
  box-shadow:0 2px 14px rgba(0,40,50,.08);
}
.header-brand{display:flex;align-items:center;gap:16px;padding:18px 0}
.header-icon{width:54px;height:54px;display:flex;align-items:center;justify-content:center;flex-shrink:0;overflow:hidden}
.header-icon img{width:100%;height:100%;display:block;object-fit:contain}
.header-title{font-size:22px;font-weight:800;color:var(--prd);letter-spacing:-.022em;line-height:1.1}

/* ═══════════════════════════════════════════════
   TOP NAVIGATION BAR
═══════════════════════════════════════════════ */
.top-nav{
  background:linear-gradient(180deg,var(--prd) 0%,#003e49 100%);
  display:flex;align-items:stretch;
  gap:0;
  border-top:3px solid var(--go);
  border-bottom:1px solid rgba(0,0,0,.25);
  overflow-x:auto;scrollbar-width:none;
  box-shadow:0 3px 10px rgba(0,0,0,.12);
}
.top-nav::-webkit-scrollbar{display:none}
.tnav-btn{
  padding:15px 22px;
  font-size:12px;font-weight:700;
  color:rgba(255,255,255,.72);
  background:transparent;border:none;cursor:pointer;
  border-bottom:3px solid transparent;
  white-space:nowrap;transition:all .18s;
  display:flex;align-items:center;gap:8px;
  letter-spacing:.03em;text-transform:uppercase;font-size:11px;
  position:relative;
}
.tnav-btn:hover{color:#fff;background:rgba(255,255,255,.08)}
.tnav-btn.active{color:#fff;background:rgba(201,168,76,.14);border-bottom:3px solid var(--go);box-shadow:inset 0 -3px 0 var(--go),0 0 14px rgba(201,168,76,.25)}
.tnav-btn.active .nav-icon{filter:drop-shadow(0 0 4px rgba(201,168,76,.6))}
.tnav-btn .nav-icon{font-size:16px}
.tnav-sep{width:1px;background:rgba(255,255,255,.18);margin:12px 0;flex-shrink:0}




.chk-correct-card{margin-top:12px;background:linear-gradient(135deg,#fff 0%,var(--pl) 100%);border:2px solid var(--pr);border-radius:var(--rl);padding:18px 20px;box-shadow:0 4px 18px rgba(0,98,114,.18)}
.chk-correct-card.suggested{border-color:var(--gm);background:linear-gradient(135deg,#fff 0%,var(--gl) 100%);box-shadow:0 4px 18px rgba(201,168,76,.22)}
.chk-correct-hd{font-size:15px;font-weight:800;color:var(--prd);letter-spacing:-.01em;margin-bottom:4px}
.chk-correct-card.suggested .chk-correct-hd{color:var(--gd)}
.chk-correct-sub{font-size:12px;color:var(--t2);margin-bottom:12px;line-height:1.5}
.chk-correct-list{list-style:none;margin:0 0 14px;padding:0}
.chk-correct-list li{font-size:12px;color:var(--tx);padding:6px 0;border-bottom:1px dashed var(--bo2);display:flex;gap:10px;align-items:flex-start;line-height:1.5}
.chk-correct-list li:last-child{border-bottom:none}
.chk-c-icon{font-size:14px;flex-shrink:0}
.chk-correct-label{font-size:10px;font-weight:800;text-transform:uppercase;color:var(--t2);letter-spacing:.04em;margin-bottom:6px}
.chk-correct-box{background:#071e22;color:#9fe8d0;font-family:var(--mo);font-size:13px;padding:14px 16px;border-radius:var(--ra);margin-bottom:12px;word-break:break-all;line-height:1.6;border-left:4px solid var(--go)}
.chk-correct-copy{padding:10px 18px;border-radius:var(--ra);border:none;background:var(--pr);color:#fff;font-size:12px;font-weight:700;cursor:pointer;transition:all .15s;letter-spacing:.02em}
.chk-correct-copy:hover{background:var(--prd);transform:translateY(-1px);box-shadow:0 3px 10px rgba(0,98,114,.3)}

/* ═══════════════════════════════════════════════
   OUTBOUND SETUP (Dialer Training)
═══════════════════════════════════════════════ */
.dialer-tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:24px}
@media(max-width:760px){.dialer-tabs{grid-template-columns:1fr}}
.dialer-tab{
  background:var(--su);border:1.5px solid var(--bo);border-radius:var(--rl);
  padding:16px 18px;cursor:pointer;text-align:left;
  display:flex;align-items:center;gap:14px;
  transition:all .18s;box-shadow:var(--shadow);
  font-family:var(--fn);
}
.dialer-tab:hover{border-color:var(--pr);transform:translateY(-2px);box-shadow:var(--shadow-lg)}
.dialer-tab.active{border-color:var(--go);background:linear-gradient(135deg,#fff 0%,var(--gl) 100%);box-shadow:0 4px 16px rgba(201,168,76,.25)}
.dialer-tab .dt-ic{font-size:28px;flex-shrink:0}
.dialer-tab .dt-t{font-size:16px;font-weight:800;color:var(--prd);letter-spacing:-.01em}
.dialer-tab .dt-d{font-size:11px;color:var(--t2);margin-top:2px;font-weight:500}

.dialer-page{display:none;animation:fadeIn .3s ease}
.dialer-page.active{display:block}
.dp-hd{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:18px;padding-bottom:14px;border-bottom:2px solid var(--bo2)}
.dp-badge{display:inline-block;padding:5px 14px;border-radius:var(--rp);font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;border:1.5px solid}
.dp-tag{font-size:12px;color:var(--t2);font-weight:600}
.dp-h2{font-size:15px;font-weight:800;color:var(--prd);margin-top:22px;margin-bottom:10px;padding-left:14px;border-left:4px solid var(--go);line-height:1.3}
.dp-p{font-size:13px;color:var(--tx);line-height:1.65;margin-bottom:12px}
.dp-ul{margin:8px 0 14px 22px;padding:0}
.dp-ul li{font-size:13px;color:var(--tx);line-height:1.65;margin-bottom:8px}
.dp-ul li strong{color:var(--prd)}
.dp-tbl{width:100%;border-collapse:collapse;font-size:12px;margin:8px 0 14px;background:var(--su);border:1px solid var(--bo);border-radius:var(--ra);overflow:hidden}
.dp-tbl th{background:var(--prd);color:#fff;padding:10px 13px;text-align:left;font-size:10px;text-transform:uppercase;letter-spacing:.04em;font-weight:700}
.dp-tbl td{padding:10px 13px;border-top:1px solid var(--bo2);vertical-align:top;line-height:1.55;color:var(--tx)}
.dp-tbl td strong{color:var(--prd)}
.dp-tbl tr:nth-child(even) td{background:var(--px)}

.dp-quiz{margin-top:30px;padding-top:22px;border-top:2px solid var(--bo2)}
.dp-quiz-hd{font-size:14px;font-weight:800;color:var(--prd);margin-bottom:14px;display:flex;align-items:center;gap:8px}
.dp-q{background:var(--su);border:1px solid var(--bo);border-radius:var(--ra);padding:16px 18px;margin-bottom:12px;box-shadow:var(--shadow)}
.dp-q-t{font-size:13px;font-weight:700;color:var(--tx);margin-bottom:12px;line-height:1.55}
.dp-q-opts{display:flex;flex-direction:column;gap:7px}
.dp-q-opt{padding:10px 14px;border:1.5px solid var(--bo);border-radius:var(--ra);background:#fff;cursor:pointer;font-size:12px;color:var(--tx);transition:all .15s;display:flex;align-items:flex-start;gap:10px;line-height:1.5;text-align:left;font-family:var(--fn)}
.dp-q-opt:hover{border-color:var(--pr);background:var(--pl)}
.dp-q-opt.correct{background:var(--greenl);border-color:var(--green);color:var(--green);font-weight:600}
.dp-q-opt.wrong{background:var(--redl);border-color:var(--red);color:var(--red)}
.dp-q-opt.disabled{pointer-events:none;opacity:.75}
.dp-q-fb{margin-top:10px;padding:10px 14px;border-radius:var(--ra);font-size:12px;line-height:1.55;display:none}
.dp-q-fb.vis{display:block}
.dp-q-fb.ok{background:var(--greenl);color:var(--green);border:1px solid var(--greenb)}
.dp-q-fb.no{background:var(--redl);color:var(--red);border:1px solid var(--redb)}

/* ═══════════════════════════════════════════════
   SECONDARY SUB-NAV (Training / Tools sub-tabs)
═══════════════════════════════════════════════ */
.sub-nav{
  background:#f3f9fa;
  border-bottom:1px solid var(--bo2);
  padding:0 28px;
  display:flex;align-items:stretch;
  overflow-x:auto;scrollbar-width:none;
  box-shadow:inset 0 -1px 0 rgba(0,98,114,.05);
}
.sub-nav::-webkit-scrollbar{display:none}
.sub-nav-group{display:flex;align-items:stretch;gap:0}
.sub-btn{
  padding:11px 18px;
  font-size:11px;font-weight:700;
  color:var(--t2);
  background:transparent;border:none;cursor:pointer;
  border-bottom:2px solid transparent;
  white-space:nowrap;transition:all .15s;
  display:flex;align-items:center;gap:7px;
  letter-spacing:.02em;text-transform:uppercase;
}
.sub-btn span{font-size:14px}
.sub-btn:hover{color:var(--prd);background:rgba(0,98,114,.05)}
.sub-btn.active{color:var(--prd);border-bottom-color:var(--go);background:#fff;box-shadow:0 -1px 0 var(--go) inset,0 2px 6px rgba(0,98,114,.08)}

/* ═══════════════════════════════════════════════
   SECTIONS / PANELS
═══════════════════════════════════════════════ */
.section{display:none;animation:fadeIn .22s ease}
.section.active{display:block}
@keyframes fadeIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}
.main{max-width:980px;margin:0 auto;padding:28px 20px 80px}

/* ═══════════════════════════════════════════════
   SHARED COMPONENTS
═══════════════════════════════════════════════ */
.sh{font-size:15px;font-weight:700;color:var(--tx);margin-bottom:14px;display:flex;align-items:center;gap:8px}
.sh::after{content:"";flex:1;height:1px;background:var(--bo)}
.card{background:var(--su);border:1px solid var(--bo);border-radius:var(--rl);padding:20px 24px;margin-bottom:16px;box-shadow:var(--shadow)}
.toast{position:fixed;bottom:22px;right:22px;background:var(--prd);color:#fff;padding:11px 22px;border-radius:var(--rl);font-size:13px;font-weight:600;opacity:0;transition:opacity .25s,transform .25s;pointer-events:none;z-index:9999;transform:translateY(8px);border-left:4px solid var(--go);box-shadow:var(--shadow-lg)}
.toast.show{opacity:1;transform:translateY(0)}

/* ═══════════════════════════════════════════════
   TRAINING MISSIONS
═══════════════════════════════════════════════ */
.hud{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:16px}
.hc{background:var(--su);border:1px solid var(--bo);border-radius:var(--rl);padding:16px;text-align:center;box-shadow:var(--shadow)}
.hv{font-size:26px;font-weight:800;color:var(--pr);line-height:1;font-variant-numeric:tabular-nums}
.hl{font-size:10px;color:var(--t3);margin-top:5px;text-transform:uppercase;letter-spacing:.09em;font-weight:600}
.xpw{background:var(--su);border:1px solid var(--bo);border-radius:var(--rl);padding:12px 18px;margin-bottom:18px;display:flex;align-items:center;gap:12px;box-shadow:var(--shadow)}
.xpl{font-size:12px;font-weight:600;color:var(--t2);white-space:nowrap}
.xpt{flex:1;height:10px;background:var(--s2);border-radius:999px;overflow:hidden}
.xpf{height:100%;background:linear-gradient(90deg,var(--pr),var(--go));border-radius:999px;transition:width .7s cubic-bezier(.4,0,.2,1)}
.xpp{font-size:12px;font-weight:700;color:var(--gd);white-space:nowrap}
.tier-nav{display:flex;gap:8px;margin-bottom:18px;flex-wrap:wrap}
.tb{padding:8px 18px;border-radius:var(--rp);border:1.5px solid var(--bo);background:var(--su);font-size:12px;font-weight:600;cursor:pointer;color:var(--t2);transition:all .15s}
.tb.unlocked{color:var(--pr);border-color:var(--pm);background:var(--pl)}
.tb.act{background:var(--pr);color:#fff;border-color:var(--pr);box-shadow:0 2px 8px rgba(0,98,114,.25)}
.tb.locked{opacity:.4;cursor:not-allowed}
.pstrip{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:20px}
.pd{width:30px;height:30px;border-radius:50%;border:2px solid var(--bo);background:var(--su);display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;color:var(--t3);transition:all .3s;cursor:default}
.pd.done{background:var(--green);border-color:var(--green);color:#fff;box-shadow:0 1px 4px rgba(45,110,45,.4)}
.cc{background:var(--su);border:1px solid var(--bo);border-radius:var(--rl);padding:20px 24px;margin-bottom:14px;box-shadow:var(--shadow);transition:border-color .2s}
.cc.done{border-color:var(--green);border-left:4px solid var(--green)}
.brow{display:flex;align-items:center;gap:6px;margin-bottom:10px;flex-wrap:wrap}
.badge{font-size:11px;padding:3px 11px;border-radius:var(--rp);font-weight:600}
.b1{background:var(--bluel);color:var(--blue)}.b2{background:var(--greenl);color:var(--green)}
.b3{background:var(--amberl);color:var(--amber)}.b4{background:var(--corall);color:var(--coral)}
.b5{background:var(--gl);color:var(--gd)}.bxp{background:var(--pl);color:var(--pr)}
.bdone{background:var(--greenl);color:var(--green)}
.qt{font-size:15px;font-weight:600;margin-bottom:8px;line-height:1.6;color:var(--tx)}
.hbox{font-size:13px;color:var(--t2);padding:11px 16px;background:var(--gl);border-radius:var(--ra);border-left:3px solid var(--go);display:none;margin-bottom:10px;line-height:1.55}
.hbox.vis{display:block}
.arow{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:12px}
.ainp{flex:1;min-width:220px;padding:11px 15px;border-radius:var(--ra);border:1.5px solid var(--bo);background:#f7fdfe;font-family:var(--mo);font-size:13px;color:var(--tx);transition:border-color .15s}
.ainp:focus{outline:none;border-color:var(--pr);background:#fff;box-shadow:0 0 0 3px rgba(0,98,114,.1)}
.bchk{padding:11px 22px;border-radius:var(--ra);border:none;background:var(--pr);color:#fff;font-size:13px;font-weight:700;cursor:pointer;transition:all .15s;white-space:nowrap;letter-spacing:.01em}
.bchk:hover{background:var(--prd);transform:translateY(-1px);box-shadow:0 3px 10px rgba(0,98,114,.3)}
.bhint{padding:11px 16px;border-radius:var(--ra);border:1.5px solid var(--bo);background:transparent;font-size:13px;color:var(--t2);cursor:pointer;transition:all .15s;white-space:nowrap}
.bhint:hover{border-color:var(--go);color:var(--gd);background:var(--gl)}
.fb{margin-top:10px;padding:11px 16px;border-radius:var(--ra);font-size:13px;line-height:1.6}
.fbok{background:var(--greenl);color:var(--green);border:1px solid var(--greenb)}
.fbrev{background:var(--amberl);color:var(--amber);border:1px solid var(--gm)}
.fberr{background:var(--redl);color:var(--red);border:1px solid var(--redb)}
.bshow{padding:11px 14px;border-radius:var(--ra);border:1.5px solid var(--bo);background:transparent;font-size:12px;color:var(--t2);cursor:pointer;transition:all .15s;white-space:nowrap;font-weight:600}
.bshow:hover{border-color:var(--coral);color:var(--coral);background:var(--corall)}
.arow2{margin-top:14px}
.brev{background:var(--amberl);color:var(--amber);border:1px solid var(--gm)}
.btype{background:rgba(0,98,114,.08);color:var(--pr);border:1px solid rgba(0,98,114,.18);font-weight:700}
.btype.mc{background:#e6f1fb;color:var(--blue);border-color:#b8d5ef}
.btype.fill{background:#faece7;color:var(--coral);border-color:#f0c0a8}
.btype.bug{background:var(--redl);color:var(--red);border-color:var(--redb)}
.btype.out{background:var(--gl);color:var(--gd);border-color:var(--gm)}
.cc.revealed{border-left:4px solid var(--gm);background:#fffdf5}
.ansbox{margin-top:12px;padding:12px 16px;background:var(--s2);border:1px dashed var(--bo);border-radius:var(--ra)}
.ansl{font-size:11px;font-weight:800;color:var(--prd);letter-spacing:.04em;text-transform:uppercase;margin-bottom:6px}
.ansv{font-family:var(--mo);font-size:13px;color:var(--prd);word-break:break-all;line-height:1.5}
.ansv code{background:#fff;padding:4px 8px;border:1px solid var(--bo);border-radius:5px;display:inline-block;max-width:100%}
.mcopts{display:flex;flex-direction:column;gap:8px;margin-top:12px}
.mco{display:flex;align-items:flex-start;gap:10px;padding:11px 14px;border:1.5px solid var(--bo);background:#f7fdfe;border-radius:var(--ra);cursor:pointer;transition:all .15s;font-size:13px;line-height:1.5}
.mco:hover{border-color:var(--pm);background:var(--pl)}
.mco input[type=radio]{flex-shrink:0;margin-top:2px;accent-color:var(--pr);width:16px;height:16px;cursor:pointer}
.mco input[type=radio]:checked + span{font-weight:600;color:var(--prd)}
.mco:has(input:checked){border-color:var(--pr);background:var(--pl);box-shadow:0 0 0 2px rgba(0,98,114,.12)}
.mco span{flex:1}
.mco code{font-size:12px}
.codeblk{margin-top:12px;padding:14px 18px;background:var(--prd);color:#e8f5f7;border-radius:var(--ra);font-family:var(--mo);font-size:13px;overflow-x:auto;border-left:4px solid var(--go)}
.codeblk code{background:transparent;color:#e8f5f7;padding:0;font-size:13px}
.fillbox{margin-top:12px;padding:14px 16px;background:#f7fdfe;border:1.5px solid var(--bo);border-radius:var(--ra);font-family:var(--mo);font-size:14px;line-height:2.1;color:var(--tx);word-break:break-word}
.fillt{white-space:pre-wrap}
.filli{display:inline-block;padding:4px 10px;margin:0 2px;border:1.5px solid var(--pm);border-radius:6px;background:#fff;font-family:var(--mo);font-size:13px;color:var(--prd);font-weight:600;min-width:80px}
.filli:focus{outline:none;border-color:var(--pr);box-shadow:0 0 0 3px rgba(0,98,114,.12)}
.chk-result{margin-top:6px;padding:14px 18px;border-radius:var(--ra);font-size:13px;line-height:1.6}
.chk-ok{background:var(--greenl);color:var(--green);border:1px solid var(--greenb)}
.chk-warn{background:var(--amberl);color:var(--amber);border:1px solid var(--gm)}
.chk-err{background:var(--redl);color:var(--red);border:1px solid var(--redb)}
.chk-info{background:var(--s2);color:var(--prd);border:1px solid var(--bo)}
.chk-list{margin:8px 0 0 0;padding-left:20px}
.chk-list li{margin:4px 0}
.chk-head{font-weight:800;font-size:14px;margin-bottom:6px;display:flex;align-items:center;gap:8px}

/* ═══════════════════════════════════════════════
   BUILDER — SHARED
═══════════════════════════════════════════════ */
.vt-tabs{display:flex;gap:0;background:var(--su);border:1px solid var(--bo);border-radius:var(--rl);padding:4px;margin-bottom:18px;box-shadow:var(--shadow)}
.vt-tab{flex:1;padding:10px 14px;font-size:12px;font-weight:700;cursor:pointer;border:none;background:transparent;color:var(--t2);border-radius:var(--ra);transition:all .15s;text-align:center;line-height:1.3}
.vt-tab.active{background:var(--pr);color:#fff;box-shadow:0 2px 10px rgba(0,98,114,.25)}
.vt-tab:hover:not(.active){background:var(--pl);color:var(--pr)}
.vt-info{border-radius:var(--rl);padding:14px 18px;margin-bottom:18px;font-size:13px;line-height:1.65;border:1px solid;box-shadow:var(--shadow)}
.vt-info.str,.vt-info.dyn{background:#e8f7fa;border-color:#9fd7e2;color:#004a57}
.vt-info.lst{background:#fdf0e8;border-color:#f0b89a;color:#6b2a0f}
.vt-info.num{background:#e8f7fa;border-color:#9fd7e2;color:#004a57}
.vt-info.bool{background:#eaf5ea;border-color:#9fd8a0;color:#1a461a}
.vt-info strong{display:block;font-size:14px;margin-bottom:4px;font-weight:800}

/* Scenario wizard */
.wizard-card{background:var(--su);border:2px solid var(--go);border-radius:var(--rl);padding:20px 22px;margin-bottom:18px;box-shadow:0 2px 16px rgba(201,168,76,.15)}
.wizard-title{font-size:14px;font-weight:800;color:var(--gd);margin-bottom:3px;display:flex;align-items:center;gap:8px}
.wizard-sub{font-size:12px;color:var(--t3);margin-bottom:14px}
.scn-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:8px}
.scn{padding:12px 14px;border-radius:var(--ra);border:1.5px solid var(--bo);background:var(--su);cursor:pointer;text-align:left;transition:all .15s;box-shadow:var(--shadow)}
.scn:hover{border-color:var(--go);background:var(--gl);transform:translateY(-1px);box-shadow:0 3px 10px rgba(201,168,76,.2)}
.scn.sel{border-color:var(--go);background:var(--gl);border-width:2px;box-shadow:0 3px 12px rgba(201,168,76,.25)}
.scn .si{font-size:18px;margin-bottom:4px;display:block}
.scn .sn{font-size:12px;font-weight:700;color:var(--tx);display:block;margin-bottom:2px}
.scn .sd{font-size:11px;color:var(--t3);line-height:1.35}

/* Templates */
.tg{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:7px;margin-bottom:20px}
.tbn{padding:11px 14px;border-radius:var(--ra);border:1.5px solid var(--bo);background:var(--su);font-size:12px;cursor:pointer;text-align:left;transition:all .14s;box-shadow:var(--shadow)}
.tbn:hover{border-color:var(--go);background:var(--gl);transform:translateY(-1px)}
.tbn strong{display:block;font-size:12px;font-weight:700;margin-bottom:2px;color:var(--pr)}
.tbn span{font-size:11px;color:var(--t3)}

/* Expression type grid */
.type-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:8px}
.tyc{padding:12px 14px;border-radius:var(--ra);border:1.5px solid var(--bo);background:var(--su);cursor:pointer;text-align:left;transition:all .14s;position:relative;box-shadow:var(--shadow)}
.tyc:hover{border-color:var(--pm);background:var(--px);transform:translateY(-1px);box-shadow:0 3px 10px rgba(0,98,114,.12)}
.tyc.sel{border-color:var(--pr);background:var(--pl);border-width:2px;box-shadow:0 3px 12px rgba(0,98,114,.18)}
.tyc.rec{border-color:var(--go);background:var(--gl);box-shadow:0 2px 10px rgba(201,168,76,.18)}
.tyc.rec::before{content:"★ Best match";position:absolute;top:-1px;right:8px;font-size:9px;font-weight:700;color:var(--gd);background:var(--gl);padding:0 5px;border-radius:0 0 4px 4px}
.tyc .ti{font-size:18px;margin-bottom:4px;display:block}
.tyc .tn{font-size:12px;font-weight:700;color:var(--tx);display:block;margin-bottom:2px}
.tyc .td{font-size:11px;color:var(--t3);line-height:1.35}
.tyc.sel .tn{color:var(--pr)}
.tyc.sel::after{content:"✓";position:absolute;top:8px;right:10px;font-size:12px;font-weight:700;color:var(--pr)}

/* Step card */
.bcard{background:var(--su);border:1px solid var(--bo);border-radius:var(--rl);padding:20px 24px;margin-bottom:16px;box-shadow:var(--shadow)}
.sth{display:flex;align-items:center;gap:9px;margin-bottom:14px}
.stn{width:24px;height:24px;border-radius:50%;background:var(--pr);color:#fff;font-size:11px;font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0;box-shadow:0 1px 4px rgba(0,98,114,.3)}
.stitle{font-size:14px;font-weight:700;color:var(--tx)}
.ssub{font-size:11px;color:var(--t3);margin-top:1px}

/* Form fields */
.fgroup{margin-bottom:15px}
.flabel{font-size:13px;font-weight:700;color:var(--t2);margin-bottom:4px;display:block}
.fhint{font-size:12px;color:var(--t3);margin-bottom:7px;line-height:1.45;display:block;background:var(--gl);border-left:3px solid var(--gm);padding:7px 12px;border-radius:0 var(--ra) var(--ra) 0}
.fwhy{font-size:12px;color:#004a57;margin-bottom:7px;line-height:1.45;display:block;background:#dff2f5;border-left:3px solid var(--pm);padding:7px 12px;border-radius:0 var(--ra) var(--ra) 0}
.ftip{font-size:12px;color:#1a5225;background:#e6f4e8;border:1px solid #a8d8b0;border-radius:var(--ra);padding:9px 13px;margin-bottom:12px;line-height:1.55}
.finp{width:100%;padding:10px 14px;border-radius:var(--ra);border:1.5px solid var(--bo);background:#fff;font-size:13px;color:var(--tx);font-family:var(--fn);transition:border-color .15s}
.finp:focus{outline:none;border-color:var(--pr);box-shadow:0 0 0 3px rgba(0,98,114,.1)}
.fsel{width:100%;padding:10px 14px;border-radius:var(--ra);border:1.5px solid var(--bo);background:#fff;font-size:13px;color:var(--tx);font-family:var(--fn);cursor:pointer}
.fsel:focus{outline:none;border-color:var(--pr)}

/* Output */
.exr{background:var(--su);border:1px solid var(--bo);border-radius:var(--rl);padding:20px 24px;margin-bottom:16px;box-shadow:var(--shadow)}
.exrl{font-size:11px;font-weight:700;color:var(--t3);text-transform:uppercase;letter-spacing:.08em;margin-bottom:10px}
.exbox{background:#071e22;border-radius:var(--ra);padding:16px 20px;font-family:var(--mo);font-size:13px;min-height:54px;word-break:break-all;color:#9fe8d0;line-height:1.9;margin-bottom:12px;border:1px solid #0f3540}
.exph{color:#3a7070;font-style:italic;font-size:12px}
.btn-row{display:flex;gap:8px;flex-wrap:wrap}
.cpbtn{padding:9px 22px;border-radius:var(--ra);border:1.5px solid var(--bo);background:var(--su);font-size:13px;font-weight:600;cursor:pointer;color:var(--t2);transition:all .15s}
.cpbtn:hover{border-color:var(--pr);color:var(--pr);background:var(--pl)}
.resetbtn{padding:9px 16px;border-radius:var(--ra);border:1.5px solid var(--bo);background:transparent;font-size:13px;cursor:pointer;color:var(--t3);transition:all .15s}
.resetbtn:hover{border-color:var(--red);color:var(--red)}

/* Breakdown table */
.bdwrap{background:var(--su);border:1px solid var(--bo);border-radius:var(--rl);padding:20px 24px;margin-bottom:16px;box-shadow:var(--shadow)}
.bdlbl{font-size:11px;font-weight:700;color:var(--t3);text-transform:uppercase;letter-spacing:.08em;margin-bottom:12px}
.bdempty{font-size:13px;color:var(--t3);font-style:italic}
.bdt{width:100%;border-collapse:collapse;font-size:13px}
.bdt th{text-align:left;font-size:10px;font-weight:700;color:var(--t3);text-transform:uppercase;letter-spacing:.07em;padding:7px 12px;background:var(--s2);border-bottom:1px solid var(--bo)}
.bdt td{padding:9px 12px;border-bottom:.5px solid var(--bo2);vertical-align:top;line-height:1.55}
.bdt tr:last-child td{border-bottom:none}
.bdt tr:hover td{background:var(--s2)}
.bdt td:first-child{font-family:var(--mo);font-size:12px;font-weight:700;white-space:pre-wrap;min-width:160px;max-width:250px;word-break:break-all}
.cf{color:#00899b}.cv{color:#c9a84c}.cs{color:#3aaa6a}.co{color:#e07a5f}.cn{color:#9b72cf}.cp{color:#777}

/* ═══════════════════════════════════════════════
   REFERENCE GUIDE
═══════════════════════════════════════════════ */
.rb{background:var(--su);border:1px solid var(--bo);border-radius:var(--rl);margin-bottom:18px;overflow:hidden;box-shadow:var(--shadow)}
.rh{padding:13px 20px;font-size:13px;font-weight:700;background:var(--s2);border-bottom:1px solid var(--bo);color:var(--tx)}
.rt{width:100%;border-collapse:collapse;font-size:13px}
.rt th{text-align:left;font-size:10px;font-weight:700;color:var(--t3);text-transform:uppercase;letter-spacing:.08em;padding:9px 18px;background:var(--su)}
.rt td{padding:10px 18px;border-top:.5px solid var(--bo2);vertical-align:top;line-height:1.6}
.rt tr:hover td{background:var(--s2)}
.rt td:first-child{font-family:var(--mo);font-size:12px;color:var(--pr);white-space:nowrap;width:1%;font-weight:700}
.tip-box{background:var(--gl);border:1px solid var(--gm);border-radius:var(--rl);padding:14px 20px;margin-bottom:18px;font-size:13px;color:var(--gd);line-height:1.65;box-shadow:var(--shadow)}
.tip-box strong{color:var(--gd)}
.pattern-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:12px;margin-bottom:18px}
.pat-card{background:var(--su);border:1px solid var(--bo);border-radius:var(--ra);padding:15px 18px;box-shadow:var(--shadow);transition:transform .14s,box-shadow .14s}
.pat-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg)}
.pat-name{font-size:13px;font-weight:700;color:var(--tx);margin-bottom:6px}
.pat-expr{font-family:var(--mo);font-size:12px;color:var(--pr);background:var(--s2);padding:8px 12px;border-radius:7px;margin-bottom:8px;word-break:break-all;line-height:1.7;border:1px solid var(--bo2)}
.pat-desc{font-size:12px;color:var(--t2);line-height:1.55}

/* ═══════════════════════════════════════════════
   NEW QUESTION TYPES + SHOW ANSWER + CHECKER
═══════════════════════════════════════════════ */
.cc.revealed{border-color:var(--amber);border-left:4px solid var(--amber);background:#fffdf5}
.btype{background:#e6f1fb;color:var(--blue);border:1px solid #b8d4ec}
.btype.mc{background:#f0e6fb;color:#6a3aa5;border-color:#d4bce8}
.btype.fill{background:#e8f5e8;color:var(--green);border-color:var(--greenb)}
.btype.bug{background:var(--redl);color:var(--red);border-color:var(--redb)}
.btype.out{background:var(--amberl);color:var(--amber);border-color:#e8d080}
.brev{background:var(--amberl);color:var(--amber);border:1px solid #e8d080}
.bshow{padding:11px 16px;border-radius:var(--ra);border:1.5px solid var(--bo);background:transparent;font-size:13px;color:var(--t2);cursor:pointer;transition:all .15s;white-space:nowrap}
.bshow:hover{border-color:var(--amber);color:var(--amber);background:var(--amberl)}
.arow2{margin-top:12px}
.fbrev{background:var(--amberl);color:var(--amber);border:1px solid #e8d080;padding:10px 14px;border-radius:var(--ra);font-size:13px;line-height:1.55;margin-top:10px}
.ansbox{margin-top:10px;background:var(--su);border:1px solid var(--bo);border-radius:var(--ra);padding:12px 16px}
.ansl{font-size:10px;font-weight:700;color:var(--t3);text-transform:uppercase;letter-spacing:.08em;margin-bottom:6px}
.ansv{font-family:var(--mo);font-size:13px;color:var(--prd);line-height:1.6;word-break:break-all}
.ansv code{background:#071e22;color:#9fe8d0;padding:4px 8px;border-radius:5px;display:inline-block;max-width:100%}

/* Multiple choice */
.mcopts{display:flex;flex-direction:column;gap:8px;margin:10px 0 4px}
.mco{display:flex;align-items:flex-start;gap:10px;padding:11px 14px;border:1.5px solid var(--bo);border-radius:var(--ra);background:var(--su);cursor:pointer;transition:all .15s;font-size:13px;line-height:1.5}
.mco:hover{border-color:var(--pm);background:var(--pl)}
.mco input[type=radio]{margin-top:3px;flex-shrink:0;accent-color:var(--pr)}
.mco span{flex:1;color:var(--tx)}
.mco input[type=radio]:checked + span{font-weight:600}
.mco:has(input[type=radio]:checked){border-color:var(--pr);background:var(--pl);box-shadow:0 0 0 2px rgba(0,98,114,.1)}

/* Code block for bug / output questions */
.codeblk{background:#071e22;border:1px solid #0f3540;border-radius:var(--ra);padding:14px 18px;margin:10px 0;font-family:var(--mo);font-size:13px;color:#9fe8d0;line-height:1.7;word-break:break-all;overflow-x:auto}
.codeblk code{background:transparent;color:#9fe8d0;padding:0;font-size:13px}

/* Fill in the blank */
.fillbox{margin:12px 0 4px;padding:14px 16px;background:#071e22;border:1px solid #0f3540;border-radius:var(--ra);font-family:var(--mo);font-size:13px;color:#9fe8d0;line-height:2;word-break:break-word}
.fillt{white-space:pre-wrap}
.filli{display:inline-block;padding:3px 8px;margin:0 2px;border-radius:5px;border:1.5px solid var(--go);background:#fdf6e3;color:var(--prd);font-family:var(--mo);font-size:13px;font-weight:600;min-width:70px}
.filli:focus{outline:none;border-color:var(--gm);box-shadow:0 0 0 2px rgba(201,168,76,.3)}

/* Expression Checker results */
.chk-result{margin-bottom:12px;padding:12px 16px;border-radius:var(--ra);border-left:4px solid;font-size:13px;line-height:1.55}
.chk-ok{background:var(--greenl);border-color:var(--green);color:#1a4d1a}
.chk-warn{background:var(--amberl);border-color:var(--amber);color:var(--amber)}
.chk-err{background:var(--redl);border-color:var(--red);color:var(--red)}
.chk-info{background:var(--bluel);border-color:var(--blue);color:var(--blue)}
.chk-result strong{font-weight:700}
.chk-result code{background:rgba(0,0,0,.08);padding:2px 6px;border-radius:4px}

@media(max-width:680px){
  .hud{grid-template-columns:repeat(2,1fr)}
  .type-grid,.scn-grid{grid-template-columns:repeat(2,1fr)}
  .main{padding:16px 12px 70px}
  .site-header{padding:0 14px}
  .tnav-btn{padding:11px 12px;font-size:10px}
  .header-title{font-size:15px}
  .vt-tab{font-size:11px;padding:9px 8px}
}

/* ═══════════════════════════════════════════════
   AUTH OVERLAY + USER CHIP + ADMIN DASHBOARD
═══════════════════════════════════════════════ */
.auth-veil{position:fixed;inset:0;background:linear-gradient(135deg,#004a57 0%,#006272 60%,#00899b 100%);z-index:9999;display:flex;align-items:center;justify-content:center;padding:20px;overflow-y:auto}
.auth-card{background:#fff;border-radius:14px;box-shadow:0 20px 60px rgba(0,0,0,.35);width:100%;max-width:440px;padding:36px 36px 32px;border-top:4px solid var(--go)}
.auth-logo{display:flex;align-items:center;gap:12px;margin-bottom:6px}
.auth-logo-icon{width:44px;height:44px;border-radius:10px;display:flex;align-items:center;justify-content:center;overflow:hidden}
.auth-logo-icon img{width:100%;height:100%;display:block;object-fit:contain}
.auth-title{font-size:19px;font-weight:800;color:var(--prd);letter-spacing:-.01em}
.auth-sub{font-size:12px;color:var(--t2);margin-top:2px}
.auth-tabs{display:flex;margin:22px 0 20px;border-bottom:2px solid var(--s2)}
.auth-tab{flex:1;padding:11px 10px;border:none;background:transparent;font-size:13px;font-weight:700;color:var(--t2);cursor:pointer;border-bottom:3px solid transparent;margin-bottom:-2px;transition:all .15s;letter-spacing:.02em;text-transform:uppercase}
.auth-tab:hover{color:var(--pr)}
.auth-tab.active{color:var(--prd);border-bottom-color:var(--go)}
.auth-field{margin-bottom:14px}
.auth-label{display:block;font-size:12px;font-weight:700;color:var(--prd);margin-bottom:5px;letter-spacing:.01em}
.auth-input{width:100%;padding:11px 14px;border-radius:var(--ra);border:1.5px solid var(--bo);background:#f7fdfe;font-family:var(--fn);font-size:14px;color:var(--tx);transition:border-color .15s}
.auth-input:focus{outline:none;border-color:var(--pr);background:#fff;box-shadow:0 0 0 3px rgba(0,98,114,.1)}
.auth-submit{width:100%;padding:13px;border-radius:var(--ra);border:none;background:var(--pr);color:#fff;font-size:14px;font-weight:700;cursor:pointer;margin-top:6px;letter-spacing:.02em;transition:all .15s}
.auth-submit:hover{background:var(--prd);box-shadow:0 4px 12px rgba(0,98,114,.35)}
.auth-submit:disabled{opacity:.55;cursor:not-allowed}
.auth-err{background:var(--redl);color:var(--red);border:1px solid var(--redb);border-radius:var(--ra);padding:10px 13px;font-size:12px;margin-bottom:14px;line-height:1.5;display:none}
.auth-err.vis{display:block}
.auth-help{font-size:11px;color:var(--t3);margin-top:10px;line-height:1.5;text-align:center}
.auth-pane{display:none}
.auth-pane.active{display:block}

.user-chip{display:flex;align-items:center;gap:12px;padding:7px 16px;background:var(--px);border:1.5px solid var(--bo);border-radius:var(--rp);margin-left:auto;align-self:center;box-shadow:0 1px 4px rgba(0,40,50,.06)}
.user-chip-name{font-size:13px;color:var(--prd);font-weight:700;white-space:nowrap;line-height:1.15}
.user-chip-role{font-size:10px;color:var(--pr);font-weight:700;text-transform:uppercase;letter-spacing:.05em;line-height:1.15;margin-top:1px}
.user-chip-logout{background:transparent;border:1.5px solid var(--bo);color:var(--t2);font-size:11px;font-weight:700;padding:5px 12px;border-radius:var(--rp);cursor:pointer;transition:all .15s;letter-spacing:.02em}
.user-chip-logout:hover{background:var(--redl);border-color:var(--red);color:var(--red)}
.tnav-btn.admin-only{display:none}
body.role-admin .tnav-btn.admin-only{display:flex}

/* Admin dashboard */
.adm-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:20px}
.adm-stat{background:var(--su);border:1px solid var(--bo);border-left:4px solid var(--pr);border-radius:var(--ra);padding:14px 16px}
.adm-stat-v{font-size:24px;font-weight:800;color:var(--prd);line-height:1.1}
.adm-stat-l{font-size:11px;color:var(--t2);text-transform:uppercase;font-weight:700;letter-spacing:.03em;margin-top:3px}
.adm-toolbar{display:flex;gap:10px;align-items:center;margin-bottom:14px;flex-wrap:wrap}
.adm-search{flex:1;min-width:220px;padding:10px 14px;border-radius:var(--ra);border:1.5px solid var(--bo);background:#f7fdfe;font-family:var(--fn);font-size:13px;color:var(--tx)}
.adm-search:focus{outline:none;border-color:var(--pr);background:#fff;box-shadow:0 0 0 3px rgba(0,98,114,.1)}
.adm-refresh{padding:10px 18px;border-radius:var(--ra);border:none;background:var(--pr);color:#fff;font-size:13px;font-weight:700;cursor:pointer;transition:all .15s}
.adm-refresh:hover{background:var(--prd)}
.adm-tbl{width:100%;border-collapse:collapse;background:var(--su);border:1px solid var(--bo);border-radius:var(--ra);overflow:hidden;font-size:13px}
.adm-tbl thead th{background:var(--prd);color:#fff;padding:11px 13px;font-size:11px;text-transform:uppercase;letter-spacing:.04em;text-align:left;font-weight:700}
.adm-tbl tbody td{padding:12px 13px;border-top:1px solid var(--bo2);vertical-align:middle}
.adm-tbl tbody tr:hover{background:var(--px);cursor:pointer}
.adm-tbl tbody tr.sel{background:var(--pl)}
.adm-role-badge{display:inline-block;font-size:10px;font-weight:700;text-transform:uppercase;padding:3px 10px;border-radius:var(--rp);letter-spacing:.04em}
.adm-role-trainee{background:var(--bluel);color:var(--blue)}
.adm-role-admin{background:var(--gl);color:var(--gd);border:1px solid var(--gm)}
.adm-detail{background:var(--su);border:1px solid var(--bo);border-radius:var(--rl);padding:22px 26px;margin-top:18px;box-shadow:var(--shadow)}
.adm-detail-hd{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;margin-bottom:16px;padding-bottom:12px;border-bottom:1px solid var(--bo2)}
.adm-detail-name{font-size:18px;font-weight:800;color:var(--prd)}
.adm-detail-email{font-size:12px;color:var(--t2);font-family:var(--mo)}
.adm-actions{display:flex;gap:8px;flex-wrap:wrap}
.adm-act{padding:8px 14px;border-radius:var(--ra);border:1.5px solid var(--bo);background:#fff;font-size:12px;font-weight:600;color:var(--t2);cursor:pointer;transition:all .15s}
.adm-act:hover{border-color:var(--pr);color:var(--pr)}
.adm-act.danger{border-color:var(--redb);color:var(--red)}
.adm-act.danger:hover{background:var(--redl);border-color:var(--red)}
.adm-act.warn{border-color:var(--gm);color:var(--gd)}
.adm-act.warn:hover{background:var(--gl)}
.adm-prog-tbl{width:100%;border-collapse:collapse;font-size:12px;margin-top:8px}
.adm-prog-tbl th{background:var(--s2);color:var(--prd);padding:8px 11px;text-align:left;font-size:10px;text-transform:uppercase;letter-spacing:.04em;font-weight:700;border-bottom:2px solid var(--bo)}
.adm-prog-tbl td{padding:8px 11px;border-bottom:1px solid var(--bo2);vertical-align:middle}
.adm-prog-tbl td.st-c{color:var(--green);font-weight:700}
.adm-prog-tbl td.st-r{color:var(--gd);font-weight:700}
.adm-empty{padding:30px 18px;text-align:center;font-size:13px;color:var(--t3);font-style:italic}
@media(max-width:700px){.adm-stats{grid-template-columns:repeat(2,1fr)}}


/* ═══════════════════════════════════════════════
   FLOW VISUALIZER
═══════════════════════════════════════════════ */
.fv-wrap{display:flex;flex-direction:column;gap:14px}
.fv-toolbar{background:var(--su);border:1px solid var(--bo);border-radius:var(--rl);padding:14px 18px;display:flex;flex-wrap:wrap;gap:10px;align-items:center;box-shadow:var(--shadow)}
.fv-toolbar-group{display:flex;gap:6px;align-items:center}
.fv-toolbar-sep{width:1px;height:24px;background:var(--bo)}
.fv-btn{padding:9px 14px;border-radius:var(--ra);border:1.5px solid var(--bo);background:#fff;font-size:12px;font-weight:700;color:var(--prd);cursor:pointer;transition:all .15s;white-space:nowrap;display:inline-flex;align-items:center;gap:6px}
.fv-btn:hover{border-color:var(--pr);background:var(--pl)}
.fv-btn.primary{background:var(--pr);color:#fff;border-color:var(--pr)}
.fv-btn.primary:hover{background:var(--prd);border-color:var(--prd)}
.fv-btn.icon-only{padding:9px 11px}
.fv-select{padding:9px 12px;border-radius:var(--ra);border:1.5px solid var(--bo);background:#fff;font-size:12px;font-weight:600;color:var(--prd);cursor:pointer;font-family:var(--fn)}
.fv-select:focus{outline:none;border-color:var(--pr)}
.fv-file-hidden{display:none}
.fv-paste-area{background:var(--su);border:1px solid var(--bo);border-radius:var(--rl);padding:14px;display:none}
.fv-paste-area.vis{display:block}
.fv-paste-area textarea{width:100%;min-height:180px;padding:12px;border:1.5px solid var(--bo);border-radius:var(--ra);font-family:var(--mo);font-size:12px;color:var(--tx);resize:vertical;background:#f7fdfe}
.fv-paste-area textarea:focus{outline:none;border-color:var(--pr);background:#fff}
.fv-paste-buttons{display:flex;gap:8px;margin-top:10px}
.fv-flowinfo{display:flex;align-items:center;gap:14px;flex-wrap:wrap;background:var(--pl);border:1px solid var(--bo);border-radius:var(--ra);padding:10px 14px;font-size:12px;color:var(--prd)}
.fv-flowinfo strong{color:var(--prd)}
.fv-flowtype-badge{display:inline-block;padding:3px 10px;background:var(--prd);color:#fff;border-radius:var(--rp);font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.04em}
.fv-stats{display:flex;gap:14px;margin-left:auto;font-size:11px;color:var(--t2)}
.fv-stats span strong{color:var(--prd);font-size:13px}

.fv-canvas-wrap{display:grid;grid-template-columns:1fr 320px;gap:14px;min-height:560px}
@media(max-width:900px){.fv-canvas-wrap{grid-template-columns:1fr}}
.fv-canvas-box{background:var(--su);border:1px solid var(--bo);border-radius:var(--rl);overflow:hidden;position:relative;box-shadow:var(--shadow);min-height:560px}
.fv-canvas-empty{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--t3);font-size:14px;text-align:center;padding:30px}
.fv-canvas-empty .fv-empty-icon{font-size:48px;margin-bottom:14px;opacity:.4}
.fv-canvas-loading{position:absolute;inset:0;background:rgba(255,255,255,.85);display:none;align-items:center;justify-content:center;font-size:14px;color:var(--prd);font-weight:600;z-index:5}
.fv-canvas-loading.vis{display:flex}
.fv-canvas{width:100%;height:100%;min-height:560px;cursor:grab;background:repeating-linear-gradient(0deg,transparent,transparent 19px,rgba(0,98,114,.04) 19px,rgba(0,98,114,.04) 20px),repeating-linear-gradient(90deg,transparent,transparent 19px,rgba(0,98,114,.04) 19px,rgba(0,98,114,.04) 20px),#f7fdfe}
.fv-canvas.dragging{cursor:grabbing}
.fv-canvas svg{display:block}
.fv-canvas-error{padding:24px;color:var(--red);background:var(--redl);border:1px solid var(--redb);border-radius:var(--ra);margin:20px;font-family:var(--mo);font-size:12px;white-space:pre-wrap;word-break:break-word}

.fv-detail{background:var(--su);border:1px solid var(--bo);border-radius:var(--rl);padding:18px 20px;box-shadow:var(--shadow);overflow-y:auto;max-height:720px}
.fv-detail-empty{color:var(--t3);font-size:13px;text-align:center;padding:40px 10px;font-style:italic}
.fv-detail-hd{padding-bottom:12px;margin-bottom:12px;border-bottom:2px solid var(--bo)}
.fv-detail-type{display:inline-block;padding:3px 11px;border-radius:var(--rp);font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;margin-bottom:6px}
.fv-detail-name{font-size:16px;font-weight:800;color:var(--prd);line-height:1.3}
.fv-detail-path{font-size:10px;color:var(--t3);font-family:var(--mo);margin-top:4px;word-break:break-all}
.fv-detail-tbl{width:100%;border-collapse:collapse;font-size:12px;margin-top:6px}
.fv-detail-tbl tr{border-bottom:1px solid var(--bo2)}
.fv-detail-tbl th{text-align:left;padding:7px 8px;font-size:10px;text-transform:uppercase;color:var(--t2);font-weight:700;letter-spacing:.03em;width:38%;vertical-align:top}
.fv-detail-tbl td{padding:7px 8px;font-family:var(--mo);font-size:11px;color:var(--prd);word-break:break-word;vertical-align:top}
.fv-detail-tbl td.nested{padding-left:14px}
.fv-detail-tbl .fv-key-section{background:var(--s2);font-weight:700;color:var(--prd);font-size:10px;text-transform:uppercase;letter-spacing:.03em;padding:6px 8px}
.fv-val-tts{color:var(--coral)}
.fv-val-exp{color:var(--blue);font-weight:600}
.fv-val-var{color:var(--gd);font-weight:600}
.fv-val-lit{color:var(--green)}
.fv-val-novalue{color:var(--t3);font-style:italic}

/* SVG node colors per category */
.fv-node{cursor:pointer;transition:filter .15s}
.fv-node:hover{filter:brightness(1.08) drop-shadow(0 4px 8px rgba(0,98,114,.3))}
.fv-node.selected rect{stroke-width:3px}
.fv-edge-label{font-family:var(--fn);font-size:10px;font-weight:600;fill:var(--t2)}
.fv-edge-label-bg{fill:#fff;stroke:var(--bo);stroke-width:1px}
.fv-node-label{font-family:var(--fn);font-size:11px;font-weight:600;fill:#fff;pointer-events:none}
.fv-node-type{font-family:var(--fn);font-size:9px;font-weight:700;fill:rgba(255,255,255,.78);text-transform:uppercase;letter-spacing:.03em;pointer-events:none}

/* Zoom controls */
.fv-zoom{position:absolute;top:12px;right:12px;display:flex;flex-direction:column;gap:4px;z-index:3}
.fv-zoom button{width:32px;height:32px;border-radius:var(--ra);border:1px solid var(--bo);background:rgba(255,255,255,.95);font-size:16px;font-weight:700;color:var(--prd);cursor:pointer;display:flex;align-items:center;justify-content:center;backdrop-filter:blur(4px);transition:all .15s}
.fv-zoom button:hover{background:#fff;border-color:var(--pr);color:var(--pr)}
.fv-zoom-pct{position:absolute;bottom:12px;left:12px;background:rgba(255,255,255,.95);border:1px solid var(--bo);border-radius:var(--ra);padding:5px 12px;font-size:11px;font-weight:700;color:var(--prd);font-family:var(--mo);z-index:3}

/* Export menu */
.fv-export-wrap{position:relative;display:inline-block}
.fv-export-menu{position:absolute;top:100%;right:0;margin-top:4px;background:var(--su);border:1px solid var(--bo);border-radius:var(--ra);box-shadow:0 8px 24px rgba(0,98,114,.18);padding:6px;min-width:200px;z-index:30;display:none}
.fv-export-menu.vis{display:block}
.fv-export-menu button{display:block;width:100%;text-align:left;padding:9px 14px;border:none;background:transparent;font-size:12px;font-weight:600;color:var(--prd);cursor:pointer;border-radius:6px;transition:all .12s}
.fv-export-menu button:hover{background:var(--pl)}
.fv-export-menu .fv-exp-desc{font-size:10px;color:var(--t3);font-weight:400;margin-top:2px}