/* Compizo app (app.html). Moved out of an inline <style> block.
   Colours all come from css/tokens.css, so light and dark both work from one
   set of rules; theme-light.css is no longer needed by this page. */

/* ==================== SHELL ==================== */
body{background:var(--page);padding:0 0 80px}
.wrap{max-width:820px;margin:0 auto;padding:34px 20px 0}
.wrap:has(#resultCard:not(.hidden)){max-width:1140px}
/* The demo notice only matters where you run a scan. */
.wrap:has(#scanCard.hidden) #demoBanner{display:none}

.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-md);
      padding:22px;margin-bottom:16px}
/* Page titles: the first heading in each page card. */
.card > h2{font-size:24px;font-weight:650;letter-spacing:-.02em;color:var(--text);
           margin:0 0 6px}
#demoBanner > h2{font-size:15px}

label{display:block;font-size:12.5px;font-weight:600;color:var(--text);margin:12px 0 7px}
input{width:100%;background:var(--paper);border:1px solid var(--line-strong);color:var(--text);
      padding:12px 14px;border-radius:var(--r-sm);font-size:15px;font-family:inherit;
      transition:border-color 160ms ease,box-shadow 160ms ease}
input:focus{outline:none;border-color:var(--violet);box-shadow:0 0 0 3px var(--violet-soft)}
.row{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}

button{background:var(--violet);color:#fff;border:0;padding:12px 20px;
       border-radius:var(--r-sm);font-weight:600;font-size:14px;cursor:pointer;font-family:inherit;
       transition:transform 160ms var(--ease-out),background-color 160ms ease,
                  border-color 160ms ease,color 160ms ease}
button:active:not(:disabled){transform:scale(.97)}
button.ghost{background:transparent;color:var(--text);border:1px solid var(--line-strong)}
button.small,button.ghost.small{padding:7px 12px;font-size:12.5px}
button:disabled{opacity:.45;cursor:not-allowed}
@media (hover:hover) and (pointer:fine){
  button:not(.ghost):not(.navlink):not(.sn-row):not(.mob-menu):not(.tab):not(.linkbtn):not(.themeBtn):hover{background:var(--violet-hover)}
  button.ghost:hover{border-color:var(--violet);color:var(--violet-ink)}
}

.status{font-size:12.5px;color:var(--muted);margin-top:14px}
.dot{display:inline-block;width:7px;height:7px;border-radius:50%;
     background:var(--violet);margin-right:8px;animation:pulse 1.1s infinite}
@keyframes pulse{0%,100%{opacity:.3}50%{opacity:1}}
@media (prefers-reduced-motion: reduce){.dot{animation:none;opacity:1}}

.err{color:var(--red);font-size:13.5px;margin-top:10px}
.err:empty{display:none}

/* ==================== REPORT ==================== */
.report{--g:13px}
.report .card{padding:18px;margin-bottom:var(--g)}
.card-h{display:flex;align-items:center;gap:9px;font:700 11.5px var(--mono);
  letter-spacing:.13em;text-transform:uppercase;margin-bottom:14px}
.head-ico{width:26px;height:26px;border-radius:4px;background:var(--ink);
  display:flex;align-items:center;justify-content:center;flex:0 0 26px}
.stepn{width:23px;height:23px;border-radius:50%;display:flex;align-items:center;
  justify-content:center;font:700 11px var(--mono);flex:0 0 23px}

/* top: ring card | (intro + metric cards + strip) */
.topgrid{display:grid;grid-template-columns:250px 1fr;gap:var(--g)}
@media (max-width:880px){.topgrid{grid-template-columns:1fr}}
.ringcard{text-align:center}
.ring{width:158px;height:158px;margin:6px auto 0;display:block}
.ring-num{font:700 48px var(--mono);fill:var(--text)}
.ring-den{font:12px var(--mono);fill:var(--muted)}
.ring-label{font:700 17px var(--sans);margin-top:10px}
.ring-sub{font:12.5px var(--sans);color:var(--muted);margin-top:4px}
.topright{display:flex;flex-direction:column;gap:var(--g)}
.intro{display:flex;gap:11px;align-items:center;background:var(--surface-2);
  border:1px solid var(--line);border-radius:var(--r-md);padding:13px 15px}
.intro-ico{flex:0 0 32px;height:32px;border-radius:var(--r-md);
  background:color-mix(in srgb,var(--purple) 15%,transparent);
  display:flex;align-items:center;justify-content:center}
.intro p{margin:0;font-size:13px;line-height:1.55;color:var(--muted)}
.intro b{color:var(--text)}

.mcards{display:grid;grid-template-columns:repeat(5,1fr);gap:11px}
@media (max-width:880px){.mcards{grid-template-columns:repeat(auto-fit,minmax(120px,1fr))}}
.mcard{background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-md);padding:13px}
.mc-head{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.mc-chip{width:26px;height:26px;border-radius:4px;display:flex;
  align-items:center;justify-content:center;flex:0 0 26px}
.mc-name{font:600 12.5px var(--sans)}
.mc-val{font:700 27px var(--mono);letter-spacing:-.03em;line-height:1}
.mc-val span{font-size:11px;color:var(--muted);font-weight:400}
.mc-bar{height:5px;background:var(--track);border-radius:3px;overflow:hidden;margin:11px 0 8px}
.mc-bar i{display:block;height:100%;border-radius:3px;transition:width .7s ease}
.mc-word{font:600 11.5px var(--sans)}

.vstrip{display:flex;align-items:center;gap:12px;background:var(--surface-2);
  border:1px solid var(--line);border-radius:var(--r-md);padding:11px 14px}
.vstrip.v-great,.vstrip.v-good{border-color:color-mix(in srgb,var(--green) 38%,transparent)}
.vstrip.v-mid{border-color:color-mix(in srgb,var(--amber) 38%,transparent)}
.vstrip.v-bad,.vstrip.v-awful{border-color:color-mix(in srgb,var(--red) 38%,transparent)}
.avatar{position:relative;width:38px;height:38px;flex:0 0 38px;border-radius:50%;
  background:var(--line-strong);display:flex;align-items:center;justify-content:center;overflow:hidden}
.avatar span{font:700 16px var(--mono)}
.avatar-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.vs-txt{flex:1;min-width:0}
.vs-txt b{display:block;font-size:14px}
.vs-txt span{font:11px var(--mono);color:var(--muted)}
.vs-verdict{font:700 11px var(--mono);letter-spacing:.1em;text-transform:uppercase}
.v-great .vs-verdict,.v-good .vs-verdict{color:var(--green)}
.v-mid .vs-verdict{color:var(--amber)}
.v-bad .vs-verdict,.v-awful .vs-verdict{color:var(--red)}
.vs-mult{text-align:right;padding-left:13px;border-left:1px solid var(--line)}
.vs-mult b{display:block;font:700 20px var(--mono)}
.vs-mult span{font:9.5px var(--mono);color:var(--muted);letter-spacing:.07em;text-transform:uppercase}

.headline{font-size:18px;line-height:1.45;margin:16px 0 var(--g);font-weight:600}

.tri{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--g)}
@media (max-width:900px){.tri{grid-template-columns:1fr}}
.duo{display:grid;grid-template-columns:1fr 1fr;gap:var(--g)}
.duo-wide{grid-template-columns:1.55fr 1fr}
@media (max-width:820px){.duo,.duo-wide{grid-template-columns:1fr}}

.scoreline{display:flex;justify-content:space-between;align-items:center;
  font:12.5px var(--sans);color:var(--muted);margin-bottom:14px}
.sbadge{font:700 15px var(--mono);padding:4px 10px;border-radius:4px}
.sbadge i{font-size:10px;font-style:normal;opacity:.7}

/* filled circular status badge */
.cbadge{flex:0 0 20px;width:20px;height:20px;border-radius:50%;display:inline-flex;
  align-items:center;justify-content:center}
.citem{display:flex;gap:10px;margin-bottom:13px}
.citem b{font-size:13.5px;display:block}
.citem p{margin:2px 0 0;font-size:12.5px;line-height:1.5;color:var(--muted)}
.cbox{display:flex;gap:10px;background:var(--ink);border:1px solid var(--line);
  border-radius:var(--r-md);padding:11px 12px;margin-bottom:10px}
.cbox b{font-size:13.5px;display:block}
.cbox p{margin:3px 0 0;font-size:12.5px;line-height:1.5;color:var(--muted)}

.rail-title{font:12.5px var(--sans);color:var(--muted);margin-bottom:14px}
.rail{margin-bottom:14px}
.rl-track{display:flex;align-items:center}
.rl-dot{width:12px;height:12px;border-radius:50%;flex:0 0 12px}
.rl-line{flex:1;height:3px;border-radius:2px}
.rl-labels{display:flex;margin-top:9px}
.rl-col{flex:1;text-align:center;display:flex;flex-direction:column}
.rl-col:first-child{text-align:left;align-items:flex-start}
.rl-col:last-child{text-align:right;align-items:flex-end}
.rl-t{font:600 10.5px var(--mono)}
.rl-n{font:10px var(--sans);color:var(--muted);margin-top:2px;line-height:1.3}

.fact{display:flex;gap:10px;background:var(--ink);border:1px solid var(--line);
  border-radius:var(--r-md);padding:11px 12px;margin-top:10px}
.fact-ico{flex:0 0 25px;height:25px;border-radius:4px;display:flex;
  align-items:center;justify-content:center}
.fact b{font-size:12.5px;display:block}
.fact p{margin:3px 0 0;font-size:12px;line-height:1.5;color:var(--muted)}

.numgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(100px,1fr));gap:10px}
.tile{background:var(--ink);border:1px solid var(--line);border-radius:var(--r-md);padding:12px}
.tile span{display:block;font:9.5px var(--mono);color:var(--muted);
  letter-spacing:.09em;text-transform:uppercase;margin-bottom:4px}
.tile b{font:600 18px var(--mono)}
.chart{width:100%;height:118px;display:block;margin-top:14px}
.chart-lbl{font:9px var(--mono);fill:var(--muted);letter-spacing:.1em}

.wgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
@media (max-width:560px){.wgrid{grid-template-columns:repeat(2,1fr)}}
.wcard{background:var(--ink);border:1px solid var(--line);border-radius:var(--r-md);
  padding:14px 10px;text-align:center}
.w-ico{display:inline-flex;width:42px;height:42px;border-radius:50%;
  background:color-mix(in srgb,var(--green) 14%,transparent);
  align-items:center;justify-content:center;margin-bottom:10px}
.wcard b{display:block;font-size:12.5px;margin-bottom:5px}
.wcard p{margin:0;font-size:11.5px;line-height:1.45;color:var(--muted)}

.hgrid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media (max-width:560px){.hgrid{grid-template-columns:1fr}}
.hcard{background:var(--ink);border:1px solid color-mix(in srgb,var(--red) 20%,transparent);border-radius:var(--r-md);padding:13px}
.hc-top{display:flex;gap:10px;align-items:flex-start;margin-bottom:9px}
.hc-ico{flex:0 0 32px;height:32px;border-radius:var(--r-md);
  background:color-mix(in srgb,var(--red) 14%,transparent);
  display:flex;align-items:center;justify-content:center}
.hc-top b{display:block;font-size:13.5px;margin-bottom:5px}
.hcard p{margin:0;font-size:12px;line-height:1.5;color:var(--muted)}
.hc-lift{margin-top:10px;border:1px solid color-mix(in srgb,var(--amber) 28%,transparent);border-radius:4px;
  padding:8px 10px;font:11px var(--mono)}
.hc-lift span{display:block;color:var(--muted);margin-bottom:2px}
.hc-lift b{color:var(--amber);font-size:12.5px}

.chip{display:inline-block;font:700 9.5px var(--mono);letter-spacing:.05em;
  padding:3px 8px;border-radius:5px}
.chip-red{background:color-mix(in srgb,var(--red) 15%,transparent);color:var(--red)}
.chip-green{background:color-mix(in srgb,var(--green) 15%,transparent);color:var(--green)}
.chip-purple{background:color-mix(in srgb,var(--violet) 16%,transparent);color:var(--purple)}
.chip-amber{background:color-mix(in srgb,var(--amber) 15%,transparent);color:var(--amber)}
.chip-muted{background:color-mix(in srgb,var(--muted) 18%,transparent);color:var(--muted)}

.fixrow{display:flex;align-items:stretch;gap:11px;margin-bottom:8px}
.fix-ico{flex:0 0 30px;border-radius:4px;background:var(--ink);
  display:flex;align-items:center;justify-content:center}
.fix-txt{flex:1;font-size:13px;line-height:1.45;background:var(--ink);
  border-radius:4px;padding:10px 12px;display:flex;align-items:center}
.prio{flex:0 0 72px;border-radius:4px;display:flex;align-items:center;
  justify-content:center;font:700 11.5px var(--sans)}
.prio-red{background:color-mix(in srgb,var(--red) 16%,transparent);color:var(--red)}
.prio-amber{background:color-mix(in srgb,var(--amber) 16%,transparent);color:var(--amber)}
.prio-green{background:color-mix(in srgb,var(--green) 16%,transparent);color:var(--green)}
.estbar{display:flex;align-items:center;gap:10px;margin-top:12px;padding:11px 12px;
  background:var(--ink);border:1px solid var(--line);border-radius:var(--r-md);font-size:12.5px}
.estbar span:nth-of-type(2){color:var(--muted);white-space:nowrap}
.estbar b{margin-left:auto;text-align:right;color:var(--cyan);font-size:12.5px}

.ibar{display:flex;align-items:center;gap:11px;margin-bottom:11px}
.ib-lbl{flex:0 0 76px;font:12.5px var(--sans);color:var(--muted)}
.ib-track{flex:1;height:11px;background:var(--track);border-radius:6px;overflow:hidden}
.ib-track i{display:block;height:100%;border-radius:6px;
  background:var(--green);transition:width .7s ease}
.ib-val{flex:0 0 44px;text-align:right;font:600 12.5px var(--mono);color:var(--green)}
.est-note{display:flex;gap:7px;align-items:flex-start;font:10.5px/1.5 var(--mono);
  color:var(--muted);margin-top:13px;padding-top:12px;border-top:1px solid var(--line)}
.banner{display:flex;gap:11px;align-items:center;margin-top:12px;padding:13px;
  border-radius:var(--r-md);background:linear-gradient(100deg,color-mix(in srgb,var(--violet) 20%,transparent),color-mix(in srgb,var(--cyan) 10%,transparent));
  border:1px solid color-mix(in srgb,var(--violet) 28%,transparent)}
.banner p{margin:0;font-size:12.5px;line-height:1.55;color:var(--muted)}
.banner b{color:var(--purple)}

.opengrid{display:grid;grid-template-columns:1.35fr 1fr;gap:16px}
@media (max-width:700px){.opengrid{grid-template-columns:1fr}}
.quote{margin:0 0 12px;padding:14px;background:var(--ink);border-radius:var(--r-md);
  font-size:14.5px;line-height:1.6;border:1px solid color-mix(in srgb,var(--violet) 22%,transparent)}
.qbtns{display:flex;gap:9px;flex-wrap:wrap}
.pbtn,.obtn{display:inline-flex;align-items:center;gap:7px;border-radius:var(--r-md);
  padding:9px 14px;font:600 12.5px var(--sans);cursor:pointer}
.pbtn{background:var(--violet);color:#fff;border:0}
.pbtn:hover{background:var(--violet-hover)}
.obtn{background:transparent;color:var(--text);border:1px solid var(--line-strong)}
.obtn:hover{border-color:var(--purple)}
.why b{font-size:13px;display:block;margin-bottom:10px}
.why-row{display:flex;gap:9px;align-items:center;font-size:12.5px;margin-bottom:9px}

.conf{display:flex;gap:14px;align-items:center}
.mini-ring{width:92px;height:92px;flex:0 0 92px}
.mini-num{font:700 18px var(--mono);fill:var(--text)}
.conf p{margin:5px 0 0;font-size:12px;line-height:1.55;color:var(--muted)}

.rpt-foot{display:flex;align-items:center;gap:9px;padding:13px 16px;
  background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-md);
  font:11.5px var(--mono);color:var(--muted)}
.rpt-foot span{flex:1}
.linkbtn{background:none;border:0;color:var(--cyan);font:600 12px var(--sans);
  cursor:pointer;display:inline-flex;align-items:center;gap:6px;padding:0}
.buyBtn{white-space:nowrap}
.plan div i{display:block;font-style:normal;color:var(--muted);
  font-family:var(--mono);font-size:11.5px;margin-top:2px}


.acurve{width:100%;height:190px;display:block}
.ac-ax{font:9px var(--mono);fill:var(--muted)}
.ac-ev{font:9.5px var(--mono);fill:var(--purple);letter-spacing:.04em}
.ac-legend{display:flex;flex-direction:column;gap:8px;margin-top:12px}
.ac-drop{display:flex;align-items:center;gap:9px;font-size:12.5px}
.ac-drop b{font:600 11.5px var(--mono);flex:0 0 34px}
.ac-drop span:last-child{color:var(--muted)}
.ac-pin{width:9px;height:9px;border-radius:50%;flex:0 0 9px}

.needc{background:color-mix(in srgb,var(--amber) 10%,transparent);border:1px solid color-mix(in srgb,var(--amber) 30%,transparent);
  color:var(--amber);border-radius:var(--r-md);padding:11px 13px;font-size:13.5px;margin-top:12px}

/* ==================== SIDEBAR ====================
   A navy rail on the left. Collapsed it shows icons only; the toggle at the
   top widens it to show names. The choice is remembered (js/sidenav.js).
   On phones it becomes a drawer that slides over the page. */
:root{--rail:68px;--rail-open:236px}
html.nav-open{--rail:var(--rail-open)}

body{padding-left:var(--rail);transition:padding-left 220ms var(--ease-out)}

.sidenav{position:fixed;inset:0 auto 0 0;z-index:50;width:var(--rail);
  display:flex;flex-direction:column;background:var(--navy);color:var(--on-navy);
  overflow-x:hidden;overflow-y:auto;transition:width 220ms var(--ease-out)}
/* A slim scrollbar, only as visible as it needs to be, for short screens. */
.sidenav{scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.22) transparent}
.sidenav::-webkit-scrollbar{width:5px}
.sidenav::-webkit-scrollbar-track{background:transparent}
.sidenav::-webkit-scrollbar-button{display:none;width:0;height:0}
.sidenav::-webkit-scrollbar-thumb{background:rgba(255,255,255,.18);border-radius:4px}
.sidenav:hover::-webkit-scrollbar-thumb{background:rgba(255,255,255,.34)}

/* every row is: a 68px icon column, then the label */
.sn-row{position:relative;display:grid;grid-template-columns:var(--rail-closed,68px) 1fr;
  align-items:center;width:100%;min-height:44px;padding:0;background:none;border:0;
  border-radius:0;color:var(--on-navy-muted);font:550 13.5px var(--sans);text-align:left;
  text-decoration:none;cursor:pointer;white-space:nowrap;
  transition:color 160ms ease,background-color 160ms ease}
.ni{fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
.sn-row .ni{justify-self:center;width:18px;height:18px}
.sn-row:active:not(:disabled){transform:none}
@media (hover:hover) and (pointer:fine){
  .sn-row:hover{color:var(--on-navy);background:rgba(255,255,255,.05)}
}
.sn-row.nav-on{color:var(--on-navy);background:rgba(255,255,255,.07)}
.sn-row.nav-on::before{content:'';position:absolute;left:0;top:8px;bottom:8px;width:3px;
  border-radius:0 2px 2px 0;background:var(--violet)}
.sn-row:focus-visible{outline:2px solid var(--violet);outline-offset:-2px}

/* Labels: fade in a beat after the rail starts opening, vanish at once when it closes. */
.sn-label{opacity:0;transition:opacity 100ms ease}
html.nav-open .sn-label{opacity:1;transition:opacity 180ms ease 70ms}

/* Collapsed: the label becomes a tooltip to the right of the icon. */
/* position:fixed so a scrolling rail doesn't clip it; sidenav.js sets its top. */
html:not(.nav-open) .sn-row .sn-label{position:fixed;left:calc(var(--rail) + 10px);top:50%;
  translate:0 -50%;padding:6px 10px;border-radius:4px;background:var(--card);color:var(--text);
  border:1px solid var(--line);font-size:12.5px;box-shadow:0 10px 24px -8px rgba(15,15,35,.35);
  pointer-events:none;z-index:60}
@media (hover:hover) and (pointer:fine){
  html:not(.nav-open) .sn-row:hover .sn-label{opacity:1;transition:opacity 140ms ease 300ms}
}

.sn-brand{display:grid;grid-template-columns:68px 1fr;align-items:center;height:64px;
  flex:0 0 auto;color:var(--on-navy);text-decoration:none;font-weight:750;font-size:16px;letter-spacing:-.01em}
.sn-brand .brand-mark{justify-self:center}
.brand-mark{width:26px;height:26px;flex:0 0 26px;border-radius:50%;background:var(--violet);
  color:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:13px;font-weight:800}
.sn-toggle{margin-bottom:10px}
.sn-row .themeBtn{justify-self:center;width:18px;height:18px;flex:none;border:0;opacity:1;pointer-events:none}
.sn-row .themeBtn svg{width:18px;height:18px}
.sn-toggle .ni{transition:transform 220ms var(--ease-out)}
html.nav-open .sn-toggle .ni{transform:scaleX(-1)}
.sn-rule{height:1px;margin:0 16px 10px;background:var(--on-navy-line);flex:0 0 auto}
.appnav{display:flex;flex-direction:column;gap:2px}
.sn-foot{margin-top:auto;padding:10px 0 14px;border-top:1px solid var(--on-navy-line)}
.sn-row .navdot{position:absolute;left:40px;top:11px;width:7px;height:7px;margin:0;
  border-radius:50%;background:var(--red);box-shadow:0 0 0 2px var(--navy)}

/* ==================== TOP BAR ==================== */
.appbar{position:sticky;top:0;z-index:40;display:flex;align-items:center;gap:14px;
  height:60px;padding:0 28px;background:color-mix(in srgb,var(--page) 88%,transparent);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.appbar .mob{display:none}
.appbal{margin-left:auto;display:flex;align-items:center;gap:10px;font-size:12.5px;color:var(--muted)}
.appbal b{color:var(--violet-ink);font-size:20px;font-weight:700}
.appbal .bal-buy{margin-left:6px;padding:7px 12px;font-size:12.5px}

/* phone: drawer + scrim */
.scrim{position:fixed;inset:0;z-index:45;background:rgba(10,10,25,.5);
  opacity:0;visibility:hidden;transition:opacity 160ms ease,visibility 0s linear 160ms}

@media (max-width:760px){
  body,html.nav-open body{padding-left:0}
  .sidenav,html.nav-open .sidenav{width:260px;transform:translateX(-100%);
    transition:transform 180ms ease;overflow-y:auto}
  html.drawer-open .sidenav{transform:none;transition:transform 260ms var(--ease-drawer);
    box-shadow:20px 0 50px -20px rgba(0,0,0,.6)}
  html.drawer-open .scrim{opacity:1;visibility:visible;transition:opacity 220ms ease}
  .sn-label,html:not(.nav-open) .sn-row .sn-label{position:static;opacity:1;translate:none;padding:0;
    background:none;border:0;box-shadow:none;color:inherit;font-size:14px}
  .sn-toggle{display:none}
  .appbar{background:var(--navy);color:var(--on-navy);border:0;padding:0 14px 0 4px;gap:4px}
  .appbar .mob{display:inline-flex}
  .appbal b{color:#C3B2F2}
  .appbal span,.appbal .bal-buy{display:none}
  .mob-menu{width:44px;height:44px;align-items:center;justify-content:center;background:none;
    border:0;color:var(--on-navy);padding:0}
  .mob-menu .ni{width:20px;height:20px}
  .mob-brand{align-items:center;gap:9px;color:var(--on-navy);text-decoration:none;font-weight:750;font-size:16px}
}
@media print{.sidenav,.scrim{display:none!important}body{padding-left:0!important}}

/* Hooks page reuses .navlink for its two tabs. */
.hk-tabs .navlink{background:none;border:0;color:var(--muted);padding:7px 12px;
  font:600 13px var(--sans);border-radius:3px;cursor:pointer}
.hk-tabs .navlink.tab-on{background:var(--well);color:var(--text)}

/* Page intro line — the same explanation the tooltip gives, for people who
   arrived by tapping rather than hovering. */
.page-why{color:var(--muted);font-size:13.5px;line-height:1.6;margin:0 0 16px}
/* Locked panes: show the feature exists and say plainly why it's off, rather
   than hiding it (confusing) or letting it fail at submit (worse). */
.locked{position:relative;border:1px dashed var(--line);border-radius:var(--r-md);
  padding:22px 18px;background:var(--surface-2);text-align:center}
.locked-msg b{display:block;font-size:14.5px;margin-bottom:7px}
.locked-msg p{color:var(--muted);font-size:13px;line-height:1.6;max-width:430px;
  margin:0 auto 14px}
.blurred{filter:blur(3px);opacity:.4;pointer-events:none;user-select:none}
#draftCaption{width:100%;resize:vertical;min-height:70px;font:inherit;
  background:var(--ink);border:1px solid var(--line);border-radius:var(--r-md);
  color:var(--text);padding:11px 12px}
#draftCaption:focus{outline:none;border-color:var(--purple)}
/* pattern chips on the free report */
.pat{display:flex;gap:9px;align-items:flex-start;padding:10px 12px;border-radius:var(--r-md);
  background:var(--surface-2);border:1px solid var(--line);margin-bottom:7px}
.pat b{display:block;font-size:13.5px;margin-bottom:2px}
.pat span{color:var(--muted);font-size:12.5px;line-height:1.5}
.pat-ico{flex-shrink:0;margin-top:1px}
.pat.warn{border-color:color-mix(in srgb,var(--amber) 30%,transparent)}
.cta-chips{display:flex;gap:7px;flex-wrap:wrap;margin-top:4px}
.cta-chip{font:600 11.5px var(--mono);padding:5px 10px;border-radius:99px;
  background:color-mix(in srgb,var(--cyan) 14%,transparent);color:var(--cyan)}
.aitoggle{background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-md);
  padding:12px 14px;margin-top:12px}
.aitoggle label{display:flex;align-items:flex-start;gap:9px;cursor:pointer;margin:0}
.aitoggle input{margin-top:2px;width:16px;height:16px;accent-color:var(--purple)}
.aitoggle span b{display:block;font-size:14px}
.aitoggle em{font:11px var(--mono);color:var(--muted);font-style:normal}
/* The nav used to be display:none below 640px with nothing in its place,
   which left every feature unreachable on a phone. Now it scrolls
   horizontally on tablets and is replaced by a bottom tab bar on phones. */
@media (max-width:640px){
  .wrap{padding:22px 14px 0}
  .card{padding:18px 16px}
}

.resulthead{display:flex;align-items:center;justify-content:space-between;
  gap:12px;margin-bottom:14px;flex-wrap:wrap}
.resulthead h2{margin:0}
.ractions{display:flex;gap:8px}

/* ---- packs ---- */
/* #plansList is the panel wrapper, NOT the card grid — the nested .plans
   div (below) is. It was accidentally given the card grid's own column
   rule, which squeezed the Draft/Live tabs, the intro text, and the coupon
   box sideways into narrow ~190px columns on any screen wide enough to fit
   more than one. A plain vertical stack is what this container was always
   meant to be. */
#plansList{display:flex;flex-direction:column;gap:12px}
/* Coupon box. Sits full width above the plan cards, since it changes the
   price on all of them at once. */
.cpn{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;gap:8px;
     padding:10px 12px;border:1px dashed var(--line,#d8d8e0);border-radius:var(--r-md)}
.cpn-on{border-style:solid;border-color:var(--green);background:color-mix(in srgb,var(--green) 7%,transparent)}
.cpn-input{flex:1 1 160px;min-width:0;padding:8px 10px;border-radius:4px;
           border:1px solid var(--line,#d8d8e0);background:transparent;
           color:inherit;text-transform:uppercase;font:inherit}
.cpn-apply,.cpn-clear{padding:8px 14px;border:0;border-radius:4px;cursor:pointer;font:inherit}
.cpn-apply{background:var(--violet);color:#fff}
.cpn-apply:disabled{opacity:.6;cursor:default}
.cpn-clear{background:transparent;color:var(--green);text-decoration:underline}
.cpn-msg{flex:1 1 auto}
.cpn-err{flex-basis:100%;color:var(--red);font-size:13px}
.cpn-err:empty{display:none}
.pk-cpn{color:var(--green);font-size:13px;font-weight:600;margin-top:-4px}
.pkcard{position:relative;background:var(--surface-2);border:1px solid var(--line);
  border-radius:var(--r-md);padding:18px;display:flex;flex-direction:column}
.pk-featured{border-color:color-mix(in srgb,var(--violet) 50%,transparent);
  background:linear-gradient(180deg,color-mix(in srgb,var(--violet) 10%,transparent),var(--surface-2))}
.pk-tag{position:absolute;top:-9px;left:16px;font:700 9.5px var(--mono);
  letter-spacing:.08em;background:var(--line-strong);color:var(--text);
  padding:4px 9px;border-radius:99px}
.pk-tag-hot{background:var(--violet);color:#fff}
.pk-name{font:600 12px var(--mono);letter-spacing:.09em;text-transform:uppercase;
  color:var(--muted)}
.pk-price{font:700 28px var(--mono);letter-spacing:-.03em;margin:9px 0 4px}
.pk-price s{font-size:16px;color:var(--muted);font-weight:400}
.pk-price i{font:400 13px var(--mono);color:var(--muted);font-style:normal;margin-left:2px}
.pk-list{margin:11px 0 14px;padding-left:16px}
.pk-list li{color:var(--muted);font-size:12.5px;line-height:1.65}
.pk-meta{font:12px var(--mono);color:var(--muted)}
.pk-tags{display:flex;flex-wrap:wrap;gap:6px;margin:12px 0 16px}
.pk-per,.pk-save{font:600 10.5px var(--mono);padding:4px 8px;border-radius:5px}
.pk-per{background:var(--ink);color:var(--muted)}
.pk-save{background:color-mix(in srgb,var(--green) 14%,transparent);color:var(--green)}
.buyBtn{margin-top:auto;width:100%;background:var(--violet);color:#fff;border:0;
  padding:11px;border-radius:var(--r-md);font:650 14px var(--sans);cursor:pointer}
.buyBtn:hover{background:var(--violet-hover)}

/* ---- history ---- */
.hrow{display:flex;align-items:center;gap:12px;padding:12px 13px;background:var(--ink);
  border:1px solid var(--line);border-radius:var(--r-md);margin-bottom:8px;font-size:13.5px}
.hrow[data-scan]{cursor:pointer}
.hrow[data-scan]:hover{border-color:var(--purple)}
.hstatus{font:700 9.5px var(--mono);letter-spacing:.06em;padding:4px 8px;border-radius:5px}
.hs-done{background:color-mix(in srgb,var(--green) 14%,transparent);color:var(--green)}
.hs-failed{background:color-mix(in srgb,var(--red) 14%,transparent);color:var(--red)}
.hs-queued,.hs-fetching,.hs-processing,.hs-analyzing{background:color-mix(in srgb,var(--amber) 14%,transparent);color:var(--amber)}
.hcode{font-family:var(--mono);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis}
.hdate{color:var(--muted);font:11.5px var(--mono)}
.hscore{font:700 13px var(--mono);min-width:26px;text-align:right}
/* ---- plans ---- */
.seg{display:flex;gap:5px;background:var(--surface-2);border:1px solid var(--line);
  border-radius:var(--r-md);padding:5px;margin-bottom:12px}
.seg button{flex:1;background:none;border:0;border-radius:4px;cursor:pointer;
  color:var(--muted);font:600 14px var(--sans);padding:9px 10px;line-height:1.25}
.seg button em{display:block;font:400 11.5px var(--sans);font-style:normal;
  opacity:.7;margin-top:2px}
.seg button.seg-on{background:var(--ink);color:var(--text);
  box-shadow:0 1px 3px rgba(0,0,0,.3)}
.seg-why{color:var(--muted);font-size:13px;line-height:1.55;margin:0 0 16px}
.plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(228px,1fr));gap:11px}
.pkcard{display:flex;flex-direction:column}
.pk-list{margin:10px 0 14px;padding-left:16px;flex:1}
.pk-list li{color:var(--muted);font-size:12.5px;line-height:1.6}
.pkcard .buyBtn{width:100%;margin-top:auto}
.pk-current{border-color:var(--green)!important}
.pk-cur-tag{position:absolute;top:-9px;right:14px;font:700 9.5px var(--mono);
  letter-spacing:.06em;background:var(--green);color:#fff;padding:3px 8px;
  border-radius:99px}
.hopen{color:var(--cyan);font-size:12.5px;white-space:nowrap}
.muted{color:var(--muted);font-size:13.5px}
.err{color:var(--red);font-size:13.5px}

@media print{
  .appbar,#scanCard,#plansCard,#historyCard,.ractions,#demoBanner{display:none!important}
  body{background:#fff;color:#111;padding:0}
  .card,.panel,.mcard{border-color:#ddd!important;background:#fff!important;
    break-inside:avoid;page-break-inside:avoid}
  .wrap{max-width:100%!important}
}


/* ---- dashboard ---- */
.dash-grid{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:22px}
.dash-bal{flex:0 0 200px;background:var(--surface-2);border:1px solid var(--line);
  border-radius:var(--r-md);padding:16px;display:flex;flex-direction:column;gap:6px}
.db-label{font:11px var(--mono);color:var(--muted);letter-spacing:.09em;text-transform:uppercase}
.db-num{font:700 34px var(--mono);color:var(--green);letter-spacing:-.03em}
.db-num.c-cyan{color:var(--cyan)}
.db-exp{font:11px var(--mono);color:var(--muted)}
.db-habit{font:11px var(--mono);color:var(--purple)}
.dash-bal .ghost.small{margin-top:6px}
.dash-actions{flex:1;min-width:200px;display:flex;flex-direction:column;gap:9px;justify-content:center}
.dash-sub{font:600 12px var(--mono);letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);margin:0 0 12px}
.plan-section-title{font:600 12px var(--mono);letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);margin:22px 0 6px}
.plan-section-title:first-child{margin-top:0}

/* ---- free checklist result ---- */
.qc-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(104px,1fr));
  gap:9px;margin-bottom:12px}
.qc-tile{background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-md);
  padding:12px 13px;text-align:center}
.qc-tile span{display:block;font:600 10px var(--mono);letter-spacing:.07em;
  text-transform:uppercase;color:var(--muted);margin-bottom:5px}
.qc-tile b{font:700 20px var(--mono);letter-spacing:-.02em;display:block}
.qc-tile i{display:block;font:11px var(--mono);color:var(--muted);font-style:normal;
  margin-top:3px}
/* Re-check: this version against the last one. */
.qc-ba{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px;
  background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-md);
  padding:16px 14px}
.qc-ba-side{text-align:center}
.qc-ba-side span{display:block;font:600 10px var(--mono);letter-spacing:.08em;
  text-transform:uppercase;color:var(--muted);margin-bottom:5px}
.qc-ba-side b{font:700 30px var(--mono);letter-spacing:-.03em;line-height:1}
.qc-ba-side i{display:block;font:11px var(--mono);color:var(--muted);
  font-style:normal;margin-top:5px}
.qc-ba-arrow{display:flex;flex-direction:column;align-items:center;gap:3px}
.qc-ba-arrow em{font:700 14px var(--mono);font-style:normal}
.qc-moved{display:flex;gap:7px;flex-wrap:wrap;margin-top:13px}
.qc-move{font:600 11.5px var(--mono);padding:5px 9px;border-radius:4px;
  background:color-mix(in srgb,var(--muted) 15%,transparent);color:var(--muted)}
.qc-move.up{background:color-mix(in srgb,var(--green) 15%,transparent);color:var(--green)}
.qc-move.down{background:color-mix(in srgb,var(--amber) 15%,transparent);color:var(--amber)}

/* Filmstrip of sampled frames. */
.qc-strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(88px,1fr));gap:9px}
.qc-strip figure{margin:0}
.qc-strip img{width:100%;aspect-ratio:9/16;object-fit:cover;border-radius:var(--r-md);
  border:1px solid var(--line);display:block;background:var(--surface-2)}
.qc-strip figcaption{font:11px var(--mono);color:var(--muted);text-align:center;
  margin-top:5px}

/* This draft vs their own recent drafts. */
.qc-vs-head{font-size:15px;line-height:1.5;margin:0 0 14px}
.qc-vs-head span{display:block;font:11.5px var(--mono);color:var(--muted);margin-top:4px}
.qc-vs-bar{position:relative;height:10px;border-radius:6px;background:var(--surface-2);
  border:1px solid var(--line);margin-bottom:12px}
.qc-vs-bar i{position:absolute;top:-4px;width:3px;height:16px;border-radius:2px;
  transform:translateX(-1px)}
.qc-vs-avg{background:var(--muted)}
.qc-vs-best{background:var(--cyan)}
.qc-vs-now{width:5px!important;height:20px!important;top:-6px!important;border-radius:3px}
.qc-vs-key{display:flex;gap:16px;flex-wrap:wrap;font:11.5px var(--mono);color:var(--muted)}
.qc-vs-key em{display:inline-block;width:9px;height:9px;border-radius:2px;
  margin-right:5px;vertical-align:middle}
.k-avg{background:var(--muted)}
.k-best{background:var(--cyan)}

/* Pacing timeline — real cut positions on a real time axis. */
.qc-tl{padding:4px 2px 0}
.qc-tl-bar{position:relative;height:34px;border-radius:4px;
  background:linear-gradient(90deg,color-mix(in srgb,var(--cyan) 16%,transparent),color-mix(in srgb,var(--violet) 16%,transparent));
  border:1px solid var(--line)}
.qc-tl-bar i{position:absolute;top:5px;bottom:5px;width:2px;border-radius:2px;
  background:var(--cyan);transform:translateX(-1px)}
.qc-tl-axis{position:relative;height:16px;margin-top:5px}
.qc-tl-axis span{position:absolute;transform:translateX(-50%);
  font:10.5px var(--mono);color:var(--muted)}
.qc-tl-axis span:first-child{transform:none}
.qc-tl-axis span:last-child{transform:translateX(-100%)}

/* ---- insights / pattern report ---- */
.ins-lock{text-align:center;padding:26px 18px}
.ins-lock b{display:block;font:700 20px var(--mono);margin-bottom:12px}
.ins-lock p{color:var(--muted);font-size:13.5px;line-height:1.6;max-width:420px;
  margin:0 auto 18px}
.ins-prog{height:6px;border-radius:4px;background:var(--surface-2);overflow:hidden;
  max-width:280px;margin:0 auto 16px}
.ins-prog i{display:block;height:100%;background:var(--purple);border-radius:4px}
.ins-head{display:flex;justify-content:space-between;align-items:center;
  gap:10px;flex-wrap:wrap;margin-bottom:10px}
.ins-meta{font:11px var(--mono);color:var(--muted)}
.ins-find{background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-md);
  padding:15px 16px;margin-bottom:10px}
.ins-find-top{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.ins-find-top b{font-size:14.5px;line-height:1.4}
.ins-find p{color:var(--muted);font-size:13.5px;line-height:1.6;margin:9px 0 0}
.ins-eq{font-family:var(--mono);font-size:12px!important;opacity:.85}
.ins-act{color:var(--cyan)!important;font-size:13px!important}
.ins-two{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:18px 0}
@media (max-width:620px){.ins-two{grid-template-columns:1fr}}
.ins-bul{margin:0;padding-left:18px}
.ins-bul li{color:var(--muted);font-size:13.5px;line-height:1.7}
.ins-bul.good li::marker{color:var(--green)}
.ins-bul.bad li::marker{color:var(--red)}
.ins-hook{background:var(--surface-2);border-left:3px solid var(--purple);
  border-radius:0 8px 8px 0;padding:11px 14px;margin-bottom:8px}
.ins-hook b{display:block;font-size:14px;margin-bottom:3px}
.ins-hook span{color:var(--muted);font-size:12.5px;line-height:1.55}
.ins-sweet{display:flex;gap:26px;flex-wrap:wrap;margin-bottom:8px}
.ins-sweet span{display:block;font:600 11px var(--mono);letter-spacing:.08em;
  text-transform:uppercase;color:var(--muted);margin-bottom:3px}
.ins-sweet b{font:700 19px var(--mono);color:var(--cyan)}

/* ---- niche research ---- */
.nq-tags{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:16px}
.nq-tag{display:inline-flex;align-items:center;gap:7px;background:var(--surface-2);
  border:1px solid var(--line);border-radius:99px;padding:6px 8px 6px 13px;
  font:600 13px var(--mono);cursor:pointer;color:var(--muted)}
.nq-tag.on{border-color:var(--purple);color:var(--text)}
.nq-tag b{background:none;border:0;color:var(--muted);cursor:pointer;font-size:15px;
  line-height:1;padding:0 3px}
.nq-tag b:hover{color:var(--red)}
.nq-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));
  gap:10px;margin-bottom:16px}
.nq-stat{background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-md);
  padding:12px 13px}
.nq-stat span{display:block;font:600 10px var(--mono);letter-spacing:.08em;
  text-transform:uppercase;color:var(--muted);margin-bottom:5px}
.nq-stat b{font:700 19px var(--mono);color:var(--cyan)}
.nq-post{display:flex;gap:11px;padding:11px;background:var(--surface-2);
  border:1px solid var(--line);border-radius:var(--r-md);margin-bottom:7px}
.nq-rank{font:700 13px var(--mono);color:var(--muted);min-width:20px}
.nq-body{flex:1;min-width:0}
.nq-top{display:flex;justify-content:space-between;gap:8px;align-items:baseline}
.nq-top b{font-size:13.5px}
.nq-views{font:700 13px var(--mono);color:var(--green)}
.nq-cap{color:var(--muted);font-size:12.5px;line-height:1.5;margin:4px 0 0;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.nq-meta{font:11px var(--mono);color:var(--muted);margin-top:5px;
  display:flex;gap:9px;flex-wrap:wrap;align-items:center}
.nq-meta a{color:var(--cyan);text-decoration:none}
.nq-acct{display:inline-flex;align-items:center;gap:8px;background:var(--surface-2);
  border:1px solid var(--line);border-radius:var(--r-md);padding:8px 11px;margin:0 7px 7px 0;
  font-size:13px}
.nq-acct button{background:none;border:1px solid var(--line);border-radius:6px;
  color:var(--cyan);cursor:pointer;font-size:11px;padding:3px 8px}
.nq-caveat{background:color-mix(in srgb,var(--amber) 8%,transparent);border:1px solid color-mix(in srgb,var(--amber) 25%,transparent);
  border-radius:var(--r-md);padding:11px 13px;font-size:12.5px;line-height:1.55;
  color:var(--muted);margin-bottom:16px}

/* ---- watchlist ---- */
/* ---- dashboard ---- */
.dh{margin:0 0 6px;font:650 30px var(--sans);letter-spacing:-.02em}
.dh-sub{color:var(--muted);font-size:14px;margin:0 0 20px}
.dcards{display:grid;grid-template-columns:repeat(auto-fit,minmax(158px,1fr));
  gap:11px;margin-bottom:22px}
.dcard{background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-md);
  padding:15px 16px}
.dcard span{display:block;font:600 10.5px var(--mono);letter-spacing:.09em;
  text-transform:uppercase;color:var(--muted);margin-bottom:7px}
.dcard b{font:700 26px var(--mono);letter-spacing:-.03em;display:block;line-height:1.1}
.dcard i{font:11px var(--mono);color:var(--muted);font-style:normal;
  display:block;margin-top:4px}
.dcard.c-green b{color:var(--green)}
.dcard.c-cyan b{color:var(--cyan)}
.dcard.c-purple b{color:var(--purple)}
.dcta{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:24px}
@media (max-width:520px){.dcta{grid-template-columns:1fr}}
.dbig{display:flex;flex-direction:column;align-items:flex-start;gap:4px;
  padding:16px 18px;text-align:left;border-radius:var(--r-md);cursor:pointer;
  border:1px solid var(--line);background:var(--surface-2);color:var(--text);
  font:600 15px var(--sans)}
.dbig:hover{border-color:var(--purple)}
.dbig.primary{background:var(--navy);border-color:var(--navy);color:var(--on-navy)}
.dbig.primary em{color:var(--on-navy-muted);opacity:1}
[data-theme="dark"] .dbig.primary{background:var(--violet);border-color:var(--violet);color:#fff}
[data-theme="dark"] .dbig.primary em{color:rgba(255,255,255,.8)}
.dbig em{font:400 12.5px var(--sans);font-style:normal;opacity:.75}
.dsec{display:flex;align-items:center;justify-content:space-between;
  margin:0 0 11px;gap:10px}
.dsec h3{margin:0;font:600 12px var(--mono);letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted)}
.dsec button{background:none;border:0;color:var(--cyan);font-size:12.5px;
  cursor:pointer;padding:0}
.dfeed{display:flex;flex-direction:column;gap:7px;margin-bottom:22px}
.navdot{display:inline-block;width:6px;height:6px;border-radius:50%;
  background:var(--red);margin-left:5px;vertical-align:top}
.wl-add{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}
.wl-add input{flex:1;min-width:180px}
.wl-slots{font:11px var(--mono);color:var(--muted);margin:0 0 14px}
.wl-row{display:flex;align-items:center;gap:10px;padding:11px 13px;
  background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-md);
  margin-bottom:7px}
.wl-name{flex:1;font-weight:600;font-size:14px}
.wl-name span{display:block;font:11px var(--mono);color:var(--muted);font-weight:400;
  margin-top:2px}
.wl-del{background:none;border:0;color:var(--muted);cursor:pointer;font-size:18px;
  line-height:1;padding:2px 6px}
.wl-del:hover{color:var(--red)}
.wl-alert{display:flex;gap:12px;padding:13px;background:var(--surface-2);
  border:1px solid var(--line);border-radius:var(--r-md);margin-bottom:8px;
  text-decoration:none;color:inherit}
.wl-alert.unseen{border-color:color-mix(in srgb,var(--violet) 50%,transparent)}
.wl-thumb{width:52px;height:68px;border-radius:4px;object-fit:cover;flex-shrink:0;
  background:var(--surface)}
.wl-a-body{flex:1;min-width:0}
.wl-a-top{display:flex;justify-content:space-between;gap:8px;align-items:baseline}
.wl-a-top b{font-size:14px}
.wl-mult{font:700 14px var(--mono);color:var(--green)}
.wl-a-cap{color:var(--muted);font-size:12.5px;line-height:1.5;margin:5px 0 0;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.wl-a-meta{font:11px var(--mono);color:var(--muted);margin-top:5px}
.wl-drift{border-left:3px solid var(--amber)}
.wl-drift.wl-up{border-left-color:var(--green)}
.wl-d-head{font-size:14px;font-weight:600;line-height:1.45}
.wl-d-nums{font:11px var(--mono);color:var(--muted);margin-top:6px}

/* ---- hook library ---- */
.hk-search{width:100%;margin-bottom:14px}
.hk-item{display:flex;gap:11px;align-items:flex-start;padding:12px 13px;
  background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-md);
  margin-bottom:7px}
.hk-score{font:700 14px var(--mono);color:var(--green);flex-shrink:0;min-width:30px}
.hk-score.mid{color:var(--amber)}
.hk-body{flex:1;min-width:0}
.hk-text{font-size:14px;line-height:1.5}
.hk-meta{font:11px var(--mono);color:var(--muted);margin-top:4px}
.hk-copy{background:none;border:1px solid var(--line);border-radius:6px;
  color:var(--muted);cursor:pointer;font-size:11px;padding:4px 9px;flex-shrink:0}
.hk-copy:hover{color:var(--fg);border-color:var(--muted)}
.hk-tabs{display:flex;gap:6px;margin-bottom:14px}
.dash-empty{background:var(--ink);border:1px dashed var(--line-strong);border-radius:var(--r-md);
  padding:26px;text-align:center}
.dash-empty p{color:var(--muted);margin:0 0 14px;font-size:14px}
.dash-last{background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-md);
  padding:18px;cursor:pointer;transition:border-color .15s}
.dash-last:hover{border-color:var(--purple)}
.dash-last.v-great,.dash-last.v-good{border-left:3px solid var(--green)}
.dash-last.v-mid{border-left:3px solid var(--amber)}
.dash-last.v-bad,.dash-last.v-awful{border-left:3px solid var(--red)}
.dl-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:9px}
.dl-verdict{font:700 11px var(--mono);letter-spacing:.09em;text-transform:uppercase;color:var(--text)}
.dl-date{font:11px var(--mono);color:var(--muted)}
.dl-headline{font-size:15px;line-height:1.5;margin:0 0 12px;font-weight:600}
.dl-stats{display:flex;gap:16px;font:12.5px var(--mono);color:var(--muted);margin-bottom:10px}
.dl-open{color:var(--cyan);font-size:12.5px;font-weight:600}


.tabs{display:flex;gap:6px;margin-bottom:14px;background:var(--ink);
  padding:4px;border-radius:var(--r-md);width:fit-content}
.tab{background:none;border:0;color:var(--muted);font:600 13px var(--sans);
  padding:8px 14px;border-radius:4px;cursor:pointer}
.tab-on{background:var(--surface-2);color:var(--text)}
.hint{font-size:12.5px;color:var(--muted);margin:8px 0 0;line-height:1.55}
.drop{border:1px dashed var(--line-strong);border-radius:var(--r-md);padding:26px 18px;
  text-align:center;cursor:pointer;transition:border-color .15s,background .15s}
.drop:hover,.drop.over{border-color:var(--purple);background:color-mix(in srgb,var(--violet) 6%,transparent)}
.drop b{display:block;font-size:14.5px;margin-bottom:5px}
.drop span{font:11.5px var(--mono);color:var(--muted)}

code{font-family:var(--mono);font-size:12px;background:var(--well);padding:1px 5px;border-radius:3px}

/* ==================== THEME DETAILS ==================== */
/* Status glyphs sit on a filled colour badge; white reads on all of them. */
.cbadge svg{stroke:#fff}
/* Featured plan: violet edge rather than a gradient wash. */
.pk-featured{background:var(--card);border-color:var(--violet);box-shadow:0 0 0 1px var(--violet)}
.pk-tag{border-radius:2px}
.pk-current{box-shadow:0 0 0 1px var(--green)}
/* the big dashboard action button presses like every other button */
.dbig{transition:transform 160ms var(--ease-out),border-color 160ms ease}
.dbig:active{transform:scale(.98)}
.hrow,.dash-last,.wl-alert{transition:border-color 160ms ease}
.tabs{border-radius:4px}
.tab{border-radius:3px}
.seg{border-radius:4px}
.seg button{border-radius:3px}
.seg button.seg-on{background:var(--navy);color:var(--on-navy);box-shadow:none}
.seg button.seg-on em{opacity:.8}
.needc{color:var(--text);border-left:3px solid var(--amber)}
.ring-num{font-weight:700}
.quote{font-weight:550}

/* A finished report arrives once per scan: let its cards settle in, in order. */
.report > *{animation:rpt-in 420ms var(--ease-out) both}
.report > *:nth-child(2){animation-delay:40ms}
.report > *:nth-child(3){animation-delay:80ms}
.report > *:nth-child(4){animation-delay:120ms}
.report > *:nth-child(5){animation-delay:160ms}
.report > *:nth-child(n+6){animation-delay:200ms}
@keyframes rpt-in{from{opacity:0;transform:translateY(10px)}}

/* ==================== PRINT ==================== */
@media print {

  /* Print / PDF. Everything that isn't the report goes; the report is forced
     onto white so a saved PDF is readable and doesn't dump a page of ink. */
  @page { margin: 14mm; }
  .appbar, .sidenav, .scrim, .needc, .status, #scanCard, #dashCard, #historyCard,
  #plansCard, #insightsCard, #hooksCard, #watchCard, #nicheCard,
  .rpt-actions, .row, .rpt-foot button, .linkbtn, .pbtn, .obtn { display: none !important; }
  html, body { background: #fff !important; color: #111 !important; }
  .wrap { max-width: none !important; padding: 0 !important; }
  #resultCard { display: block !important; border: 0 !important; box-shadow: none !important;
    background: #fff !important; padding: 0 !important; }
  #resultCard * { color: #111 !important; }
  .card, .ins-find, .hk-item, .qc-report .card, .rpt-card {
    background: #fff !important; border-color: #ddd !important; box-shadow: none !important; }
  .muted, .hint, .ins-eq { color: #555 !important; }
  /* Keep a section and its heading together rather than splitting mid-card. */
  .ins-find, .rpt-card, .qc-report .card, .fact { break-inside: avoid; page-break-inside: avoid; }
  h1, h2, h3 { break-after: avoid; page-break-after: avoid; }
  a[href]:after { content: "" !important; }
}