:root{
    --bg:#F4F5F7; --card:#FFFFFF; --line:#E7E8EC; --line2:#F0F1F4;
    --ink:#15171C; --muted:#6B7280; --faint:#9CA3AF;
    --gold:#9A6B00; --gold-bright:#C8901A; --gold-bg:#FBF6EA; --gold-line:#EAD9AE;
    --real:#0E9F6E; --real-bg:#E7F7F0; --real-line:#B7E4CF;
    --fake:#E02D2D; --fake-bg:#FDEBEB; --fake-line:#F5C2C2;
    --warn:#D97706; --warn-bg:#FEF3E2;
    --info:#2563EB; --info-bg:#EBF1FE;
    --purple:#7C3AED; --purple-bg:#F3EEFD;
    --calm:#6B7280; --calm-bg:#F1F2F4;
    --shadow:0 1px 2px rgba(16,24,40,.05),0 4px 16px rgba(16,24,40,.06);
    --shadow-lg:0 4px 8px rgba(16,24,40,.04),0 12px 32px rgba(16,24,40,.10);
    --serif:'Fraunces',Georgia,serif;
    --sans:'Hanken Grotesk',-apple-system,'Segoe UI',sans-serif;
  }
  *{margin:0;padding:0;box-sizing:border-box}
  body{background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased}
  ::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-thumb{background:#D5D7DC;border-radius:4px}
  .app{display:grid;grid-template-columns:232px 1fr;min-height:100vh}

  /* SIDEBAR */
  .side{background:#fff;border-right:1px solid var(--line);position:sticky;top:0;height:100vh;overflow-y:auto;display:flex;flex-direction:column}
  .logo{padding:22px 22px 18px;border-bottom:1px solid var(--line2)}
  .logo .word{font-family:var(--serif);font-size:22px;font-weight:600;color:var(--ink)}
  .logo .word em{font-style:normal;color:var(--gold-bright)}
  .logo .tag{font-size:9px;color:var(--faint);letter-spacing:3px;margin-top:4px;font-weight:700}
  .grp{padding:16px 0 4px}
  .grp .gh{display:flex;align-items:baseline;gap:8px;padding:0 22px 7px}
  .grp h4{font-size:11px;letter-spacing:2px;font-weight:800}
  .grp .sub{font-size:10px;color:var(--faint);font-weight:500}
  .nav-item{display:flex;align-items:center;gap:11px;padding:8px 22px;color:var(--muted);cursor:pointer;font-size:13.5px;font-weight:600;border-left:3px solid transparent;transition:.15s}
  .nav-item:hover{color:var(--ink);background:#FAFAFB}
  .nav-item.on{color:var(--gold);border-left-color:var(--gold-bright);background:linear-gradient(90deg,var(--gold-bg),transparent)}
  .nav-item .ic{width:18px;text-align:center;font-size:12px;opacity:.85}
  .nav-item .pill{margin-left:auto;background:var(--fake);color:#fff;font-size:10px;font-weight:800;padding:1px 8px;border-radius:9px}
  .report-link{margin:auto 16px 18px;padding:14px 16px;background:linear-gradient(135deg,#1A1304,#3A2D08);border-radius:12px;cursor:pointer;transition:.2s;box-shadow:var(--shadow)}
  .report-link:hover{transform:translateY(-1px);box-shadow:var(--shadow-lg)}
  .report-link .t{font-family:var(--serif);color:#F2D98A;font-size:14px;font-weight:600}
  .report-link .s{font-size:10.5px;color:#B79A55;margin-top:2px}

  /* TOPBAR */
  .main{display:flex;flex-direction:column;min-width:0}
  .top{display:flex;align-items:center;gap:14px;padding:13px 28px;border-bottom:1px solid var(--line);background:rgba(255,255,255,.88);position:sticky;top:0;z-index:50;backdrop-filter:blur(10px)}
  .brandsw{display:flex;background:#F0F1F4;border-radius:10px;padding:3px;gap:2px}
  .brandsw button{background:none;border:none;color:var(--muted);padding:7px 18px;font-size:12px;font-weight:800;letter-spacing:.6px;cursor:pointer;border-radius:8px;font-family:var(--sans)}
  .brandsw button.on{background:#fff;color:var(--ink);box-shadow:0 1px 3px rgba(16,24,40,.12)}
  .scorechip{display:flex;align-items:center;gap:9px;padding:5px 14px;background:var(--gold-bg);border:1px solid var(--gold-line);border-radius:10px}
  .scorechip .lbl{font-size:10px;color:var(--gold);font-weight:800;letter-spacing:.5px}
  .scorechip .n{font-family:var(--serif);font-size:20px;font-weight:600}
  .scorechip .d{font-size:11px;font-weight:800}
  .lens{display:flex;align-items:center;gap:10px}
  .lens .lab{font-size:10px;color:var(--faint);letter-spacing:1.5px;font-weight:700}
  .lens .seg{display:flex;background:#F0F1F4;border-radius:20px;padding:3px;gap:2px}
  .lens .seg button{background:none;border:none;color:var(--muted);padding:6px 15px;font-size:11.5px;cursor:pointer;font-weight:700;border-radius:16px;font-family:var(--sans)}
  .lens .seg button.on-all{background:#fff;color:var(--ink);box-shadow:0 1px 3px rgba(16,24,40,.12)}
  .lens .seg button.on-real{background:var(--real);color:#fff}
  .lens .seg button.on-fake{background:var(--fake);color:#fff}

  .content{padding:24px 28px 70px;max-width:1280px;width:100%}
  .page{display:none}.page.on{display:block;animation:fade .3s ease}
  @keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
  .ph{margin-bottom:18px}
  .ph .crumb{font-size:10px;letter-spacing:2.5px;color:var(--gold);margin-bottom:4px;font-weight:800}
  .ph h1{font-family:var(--serif);font-size:26px;font-weight:600;letter-spacing:-.3px}
  .ph p{color:var(--muted);font-size:13px;margin-top:3px}

  .card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:18px;box-shadow:var(--shadow)}
  .card h3{font-size:10.5px;letter-spacing:1.5px;color:var(--muted);font-weight:800;margin-bottom:13px}
  .card h3 b{color:var(--ink)}
  .grid{display:grid;gap:14px}
  .g4{grid-template-columns:repeat(4,1fr)}.g3{grid-template-columns:repeat(3,1fr)}.g2{grid-template-columns:1fr 1fr}.g21{grid-template-columns:2.1fr 1fr}.g12{grid-template-columns:1fr 2.1fr}.g111{grid-template-columns:1fr 1fr 1fr}
  .mt{margin-top:14px}
  .kpi{position:relative;overflow:hidden}
  .kpi .klabel{font-size:10.5px;letter-spacing:1.2px;color:var(--muted);font-weight:700}
  .kpi .kval{font-family:var(--serif);font-size:33px;font-weight:600;letter-spacing:-1px;margin:4px 0 2px;line-height:1}
  .kpi .ksub{font-size:11px;color:var(--faint);display:flex;align-items:center;gap:6px;flex-wrap:wrap}
  .kpi .kdelta{font-size:10.5px;font-weight:800;padding:2px 7px;border-radius:6px}
  .kpi .kspark{position:absolute;right:12px;bottom:12px;width:80px;height:30px;opacity:.9}
  .up{color:var(--real);background:var(--real-bg)}
  .down{color:var(--fake);background:var(--fake-bg)}
  .tag{display:inline-block;padding:3px 10px;border-radius:6px;font-size:10.5px;font-weight:800;letter-spacing:.3px;white-space:nowrap}
  .t-real{background:var(--real-bg);color:var(--real)}
  .t-fake{background:var(--fake-bg);color:var(--fake)}
  .t-warn{background:var(--warn-bg);color:var(--warn)}
  .t-info{background:var(--info-bg);color:var(--info)}
  .t-calm{background:var(--calm-bg);color:var(--calm)}
  .t-gold{background:var(--gold-bg);color:var(--gold)}
  table{width:100%;border-collapse:collapse;font-size:13px}
  th{text-align:left;font-size:10px;letter-spacing:1.2px;color:var(--faint);padding:9px 11px;border-bottom:1px solid var(--line);font-weight:800}
  td{padding:11px;border-bottom:1px solid var(--line2);vertical-align:middle}
  tr:last-child td{border-bottom:none}
  tr:hover td{background:#FAFAFB}
  .bar{height:8px;border-radius:5px;background:var(--line2);overflow:hidden;display:flex}
  .bar i{display:block;height:100%}
  .note{border-radius:10px;padding:12px 16px;font-size:12.5px;line-height:1.6;margin-top:13px}
  .note.real{background:var(--real-bg);border:1px solid var(--real-line)}
  .note.fake{background:var(--fake-bg);border:1px solid var(--fake-line)}
  .note.warn{background:var(--warn-bg);border:1px solid #F3DCB8}
  .note.gold{background:var(--gold-bg);border:1px solid var(--gold-line)}
  .btn{background:var(--ink);color:#fff;border:none;border-radius:9px;padding:10px 20px;font-weight:700;font-size:12.5px;cursor:pointer;font-family:var(--sans)}
  .btn.gold{background:linear-gradient(135deg,#B8860B,#9A6B00)}
  .legend{display:flex;gap:16px;font-size:11px;color:var(--muted);font-weight:600;flex-wrap:wrap}
  .legend i{display:inline-block;width:11px;height:11px;border-radius:3px;vertical-align:-2px;margin-right:5px}

  .hero{background:linear-gradient(180deg,#fff,#FDFCF8);border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow-lg);padding:24px 26px;margin-bottom:14px}
  .hero-grid{display:grid;grid-template-columns:auto 1fr 1fr 1fr;gap:28px;align-items:center}
  .pillarhead{display:flex;align-items:baseline;gap:8px;margin-bottom:9px}
  .pillarhead b{font-family:var(--serif);font-size:15.5px;font-weight:600}
  .pillarhead span{font-size:10px;color:var(--faint);font-weight:600}
  .pillar-div{border-left:1px solid var(--line);padding-left:24px}
  .bignum{font-family:var(--serif);font-weight:600;letter-spacing:-1px;line-height:1}
  .strike{color:var(--faint);text-decoration:line-through;text-decoration-color:rgba(224,45,45,.45);text-decoration-thickness:2px}

  .mention{background:#fff;border:1px solid var(--line);border-left-width:4px;border-left-color:var(--real);border-radius:10px;padding:12px 15px;margin-bottom:9px}
  .mention.suspect{border-left-color:var(--fake);background:linear-gradient(90deg,#FFF8F8,#fff 30%)}
  .mention.mid{border-left-color:var(--warn)}
  .mention .mh{display:flex;justify-content:space-between;align-items:center;margin-bottom:5px;gap:8px;flex-wrap:wrap}
  .mention .tx{font-size:13px}
  .mention .meta{font-size:10.5px;color:var(--faint);font-weight:600}

  .nar{background:#fff;border:1px solid var(--line);border-left:4px solid var(--real);border-radius:12px;padding:16px 19px;margin-bottom:11px;box-shadow:var(--shadow)}
  .nar .nh{display:flex;justify-content:space-between;align-items:flex-start;gap:14px}
  .nar h4{font-size:15px;font-weight:700}
  .nar .facts{display:flex;gap:13px;font-size:11.5px;color:var(--muted);margin-top:6px;flex-wrap:wrap;align-items:center;font-weight:600}
  .nar .origin{font-size:11.5px;color:var(--faint);margin-top:6px}
  .nar .phasebar{display:flex;gap:3px;margin-top:10px}
  .nar .phasebar i{height:5px;flex:1;border-radius:3px;background:var(--line2)}

  .infl{background:#fff;border:1px solid var(--line);border-radius:14px;padding:16px;box-shadow:var(--shadow);border-top:4px solid var(--real)}
  .infl .ih{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:12px}
  .infl .av{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:14px;color:#fff;margin-bottom:7px}
  .infl .nm{font-weight:800;font-size:14px}
  .infl .fl{font-size:11px;color:var(--faint);font-weight:600}
  .infl .met{display:grid;grid-template-columns:1fr 1fr;gap:10px}
  .infl .met .l{font-size:10px;color:var(--faint);font-weight:700;letter-spacing:.4px}
  .infl .met .v{font-family:var(--serif);font-size:19px;font-weight:600;margin-top:1px}

  .feeditem{display:flex;gap:10px;padding:9px 0;border-bottom:1px solid var(--line2);font-size:12px;align-items:flex-start}
  .feeditem:last-child{border:none}
  .feeditem .dot{width:8px;height:8px;border-radius:50%;margin-top:5px;flex-shrink:0}
  .feeditem .tm{margin-left:auto;font-size:10px;color:var(--faint);white-space:nowrap;font-weight:600}

  .email{background:#fff;border:1px solid var(--gold-line);border-radius:18px;max-width:640px;margin:0 auto;padding:32px 36px;box-shadow:var(--shadow-lg)}
  .email .eh{text-align:center;border-bottom:1px solid var(--gold-line);padding-bottom:18px;margin-bottom:18px}
  .email .eh .small{font-size:9.5px;letter-spacing:3.5px;color:var(--gold);font-weight:800}
  .email .eh h2{font-family:var(--serif);font-size:22px;font-weight:600;margin:8px 0 2px}
  .email .sec{font-size:10.5px;letter-spacing:2.2px;color:var(--gold);font-weight:800;margin:16px 0 8px}
  .email .li{padding:8px 0 8px 14px;border-left:3px solid var(--line);margin-bottom:6px;font-size:12.5px;line-height:1.6}

  .donutwrap{display:flex;align-items:center;gap:18px}
  /* word cloud */
  .cloud{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:baseline;padding:4px 0}
  .cloud span{font-weight:700;cursor:default;transition:.15s}
  .cloud span:hover{color:var(--gold)!important}
  /* heatmap */
  .hm{display:grid;grid-template-columns:34px repeat(12,1fr);gap:3px;font-size:9px}
  .hm .lab{color:var(--faint);font-weight:700;display:flex;align-items:center}
  .hm .cell{aspect-ratio:1.4;border-radius:3px}
  .hm .hlab{color:var(--faint);font-weight:700;text-align:center}
  /* voices */
  .voice{display:flex;align-items:center;gap:11px;padding:9px 0;border-bottom:1px solid var(--line2)}
  .voice:last-child{border:none}
  .voice .va{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;color:#fff;font-weight:800;font-size:12px;flex-shrink:0}
  .voice .vn{font-weight:700;font-size:12.5px}
  .voice .vf{font-size:10.5px;color:var(--faint);font-weight:600}
  .voice .vr{margin-left:auto;text-align:right}
  /* geo */
  .geo{display:flex;align-items:center;gap:10px;margin-bottom:10px}
  .geo .gf{font-size:17px}
  .geo .gn{font-size:12px;font-weight:700;width:88px}
  /* emotion */
  .emo{display:flex;align-items:center;gap:9px;margin-bottom:9px}
  .emo .en{font-size:11.5px;font-weight:700;width:74px;display:flex;align-items:center;gap:6px}
  .emo .ev{font-size:11px;font-weight:800;width:34px;text-align:right}
  /* funnel */
  .funnel-step{margin-bottom:8px}
  .funnel-step .fb{height:34px;border-radius:7px;display:flex;align-items:center;padding:0 14px;color:#fff;font-weight:700;font-size:12px;justify-content:space-between}

  /* ===== SaaS chrome ===== */
  .topbar{display:flex;align-items:center;gap:12px;padding:10px 28px;border-bottom:1px solid var(--line);background:#fff;position:sticky;top:0;z-index:60}
  .searchbox{flex:1;max-width:430px;display:flex;align-items:center;gap:9px;background:#F0F1F4;border:1px solid transparent;border-radius:9px;padding:8px 13px;color:var(--faint);font-size:13px;cursor:text}
  .searchbox:hover{border-color:var(--line)}
  .searchbox input{border:none;background:none;outline:none;flex:1;font-family:var(--sans);font-size:13px;color:var(--ink)}
  .searchbox kbd{font-size:10px;background:#fff;border:1px solid var(--line);border-radius:5px;padding:2px 6px;color:var(--faint);font-family:var(--sans);font-weight:700}
  .iconbtn{position:relative;width:36px;height:36px;border-radius:9px;border:1px solid var(--line);background:#fff;display:grid;place-items:center;cursor:pointer;font-size:15px;color:var(--muted)}
  .iconbtn:hover{background:#FAFAFB}
  .iconbtn .nbadge{position:absolute;top:-5px;right:-5px;background:var(--fake);color:#fff;font-size:9px;font-weight:800;min-width:16px;height:16px;border-radius:8px;display:grid;place-items:center;border:2px solid #fff}
  .pillbtn{display:flex;align-items:center;gap:7px;border:1px solid var(--line);background:#fff;border-radius:9px;padding:8px 13px;font-size:12px;font-weight:700;color:var(--ink);cursor:pointer;font-family:var(--sans)}
  .pillbtn:hover{background:#FAFAFB}
  .avatarbtn{display:flex;align-items:center;gap:9px;cursor:pointer;padding:4px 6px 4px 4px;border-radius:10px}
  .avatarbtn:hover{background:#F0F1F4}
  .avatarbtn .av{width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,#9A6B00,#C8901A);color:#fff;font-size:12px;font-weight:800;display:grid;place-items:center}
  .avatarbtn .who{line-height:1.15}
  .avatarbtn .who b{font-size:12px;display:block}
  .avatarbtn .who span{font-size:10px;color:var(--faint);font-weight:600}
  .ctxbar{display:flex;align-items:center;gap:14px;padding:10px 28px;border-bottom:1px solid var(--line);background:rgba(255,255,255,.88);position:sticky;top:57px;z-index:50;backdrop-filter:blur(10px)}
  .livedot{display:flex;align-items:center;gap:7px;margin-left:auto;font-size:11px;color:var(--muted);font-weight:600}
  .livedot i{width:8px;height:8px;border-radius:50%;background:var(--real);box-shadow:0 0 0 3px var(--real-bg);display:inline-block}
  .dd{position:absolute;top:46px;right:0;width:330px;background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow-lg);padding:8px;display:none;z-index:100}
  .dd.open{display:block}
  .dd .ddh{display:flex;justify-content:space-between;align-items:center;padding:8px 12px;font-size:11px;letter-spacing:1.2px;color:var(--muted);font-weight:800}
  .dd .ddh a{font-size:11px;color:var(--gold);font-weight:700;letter-spacing:0;cursor:pointer}
  .nitem{display:flex;gap:10px;padding:10px 12px;border-radius:9px;font-size:12.5px;line-height:1.45;cursor:pointer}
  .nitem:hover{background:#FAFAFB}
  .nitem .nd{width:8px;height:8px;border-radius:50%;margin-top:5px;flex-shrink:0}
  .nitem .nt{font-size:10px;color:var(--faint);font-weight:600;margin-top:2px}
  .uitem{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:9px;font-size:13px;font-weight:600;color:var(--ink);cursor:pointer}
  .uitem:hover{background:#FAFAFB}
  .uitem.danger{color:var(--fake)}
  .ddsep{height:1px;background:var(--line2);margin:6px 4px}
  .usercard{margin:10px 16px 16px;display:flex;align-items:center;gap:10px;padding:11px 12px;border:1px solid var(--line);border-radius:12px;background:#FAFAFB}
  .usercard .av{width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,#9A6B00,#C8901A);color:#fff;font-size:12px;font-weight:800;display:grid;place-items:center;flex-shrink:0}
  .usercard b{font-size:12px;display:block}
  .usercard span{font-size:10px;color:var(--faint);font-weight:600}
  .planbadge{margin-left:auto;font-size:9px;font-weight:800;letter-spacing:.5px;background:var(--gold-bg);color:var(--gold);border:1px solid var(--gold-line);padding:3px 8px;border-radius:6px}
  .stabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin-bottom:18px}
  .stabs button{background:none;border:none;border-bottom:2px solid transparent;padding:10px 16px;font-size:13px;font-weight:700;color:var(--muted);cursor:pointer;font-family:var(--sans)}
  .stabs button.on{color:var(--gold);border-bottom-color:var(--gold-bright)}
  .stab{display:none}.stab.on{display:block;animation:fade .25s ease}
  .chip{display:inline-flex;align-items:center;gap:6px;background:#F0F1F4;border:1px solid var(--line);border-radius:16px;padding:5px 12px;font-size:12px;font-weight:600;margin:0 6px 8px 0}
  .chip i{cursor:pointer;color:var(--faint);font-style:normal}
  .intcard{display:flex;align-items:center;gap:14px;border:1px solid var(--line);border-radius:12px;padding:15px 16px;margin-bottom:11px;background:#fff}
  .intcard .ii{width:38px;height:38px;border-radius:10px;display:grid;place-items:center;font-size:17px;flex-shrink:0}
  .tfoot{display:flex;justify-content:space-between;align-items:center;padding:13px 4px 2px;font-size:11.5px;color:var(--faint);font-weight:600}
  .tfoot button{border:1px solid var(--line);background:#fff;border-radius:8px;padding:7px 16px;font-size:12px;font-weight:700;cursor:pointer;font-family:var(--sans);color:var(--ink)}
  .tfoot button:hover{background:#FAFAFB}
  /* media & news */
  .article{display:flex;gap:14px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:15px 17px;margin-bottom:11px;box-shadow:var(--shadow);align-items:flex-start}
  .article.flagged{border-color:var(--fake-line);background:linear-gradient(90deg,#FFF8F8,#fff 26%)}
  .article .ologo{width:42px;height:42px;border-radius:10px;display:grid;place-items:center;color:#fff;font-weight:800;font-size:13px;flex-shrink:0}
  .article h4{font-size:14.5px;font-weight:700;line-height:1.35}
  .article h4 a{color:var(--ink);text-decoration:none}
  .article h4 a:hover{color:var(--gold);text-decoration:underline}
  .article .ameta{font-size:11px;color:var(--faint);font-weight:600;margin-top:4px;display:flex;gap:10px;flex-wrap:wrap;align-items:center}
  .article .averdict{font-size:11.5px;color:var(--muted);margin-top:7px;line-height:1.55}
  .article .acts{display:flex;flex-direction:column;gap:7px;align-items:flex-end;flex-shrink:0;min-width:150px}
  .qbtn{background:linear-gradient(135deg,#B8860B,#9A6B00);color:#fff;border:none;border-radius:8px;padding:8px 14px;font-weight:700;font-size:11.5px;cursor:pointer;font-family:var(--sans);white-space:nowrap}
  .qbtn:hover{filter:brightness(1.08)}
  .qbtn.done{background:var(--real-bg);color:var(--real);border:1px solid var(--real-line);cursor:default}
  .rbtn{background:#fff;color:var(--ink);border:1px solid var(--line);border-radius:8px;padding:8px 14px;font-weight:700;font-size:11.5px;cursor:pointer;font-family:var(--sans);white-space:nowrap}
  .rbtn:hover{background:#FAFAFB}
  .toast{position:fixed;bottom:24px;right:24px;background:#15171C;color:#fff;border-radius:12px;padding:14px 18px;font-size:13px;box-shadow:var(--shadow-lg);display:flex;gap:11px;align-items:center;z-index:200;opacity:0;transform:translateY(12px);transition:.3s;pointer-events:none;max-width:380px}
  .toast.show{opacity:1;transform:none}
  .toast .tic{width:26px;height:26px;border-radius:50%;background:var(--real);display:grid;place-items:center;font-size:13px;flex-shrink:0}

/* ===== Typography upgrade (CLAUDE.md design tokens) ===== */
:root{
  --mono:'Spline Sans Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
}
.kval,.bignum,table th,table td,.kpi,.scorechip .n,.scorechip,.chip,.tag,.tfoot,.kdelta{font-variant-numeric:tabular-nums}
.ph h1{letter-spacing:-0.02em}

/* ========================================================== */
/* ==========       SCAN ENTRY PAGE (index.html)     ========== */
/* ========================================================== */
body.scan-page{
  background:radial-gradient(circle at 30% 0%, #FFFDF5 0%, var(--bg) 60%);
  min-height:100vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  font-family:var(--sans);
  padding:48px 24px;
}
.scan-shell{
  width:100%;
  max-width:780px;
  text-align:center;
}
@media (min-height: 900px){
  body.scan-page{padding:64px 24px}
}
/* Scale display up on wider screens so the hero owns the canvas */
@media (min-width: 1280px){
  .scan-shell{max-width:880px}
  .scan-entry .logo-lg{margin-bottom:44px}
  .scan-entry .logo-lg .word{font-size:64px}
  .scan-entry .tagline{font-size:56px;line-height:1.05;margin-bottom:18px}
  .scan-entry .lede{font-size:17px;margin-bottom:46px}
  .scan-entry .entry-row{padding:8px 8px 8px 20px;border-radius:16px}
  .scan-entry .entry-row input{font-size:19px;padding:18px 8px}
  .scan-entry #scanBtn{padding:16px 30px;font-size:15px;border-radius:12px}
  .scan-entry .hint{font-size:13px;margin-top:22px}
}
@media (min-width: 1600px){
  .scan-shell{max-width:960px}
  .scan-entry .logo-lg .word{font-size:72px}
  .scan-entry .tagline{font-size:64px}
  .scan-entry .lede{font-size:18px}
}
.scan-shell .hidden{display:none!important}

/* Entry */
.scan-entry .logo-lg{margin-bottom:36px}
.scan-entry .logo-lg .word{
  font-family:var(--serif);
  font-size:54px;
  font-weight:600;
  color:var(--ink);
  letter-spacing:-0.02em;
  line-height:1;
}
.scan-entry .logo-lg .word em{font-style:normal;color:var(--gold-bright)}
.scan-entry .logo-lg .tag{
  font-size:10.5px;
  color:var(--faint);
  letter-spacing:4.5px;
  margin-top:8px;
  font-weight:800;
}
.scan-entry .tagline{
  font-family:var(--serif);
  font-size:42px;
  font-weight:600;
  letter-spacing:-0.025em;
  color:var(--ink);
  margin-bottom:14px;
  line-height:1.1;
}
.scan-entry .lede{
  font-size:15.5px;
  color:var(--muted);
  margin-bottom:38px;
  line-height:1.5;
}
.scan-entry .entry-row{
  display:flex;
  align-items:center;
  gap:6px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:14px;
  padding:6px 6px 6px 18px;
  box-shadow:var(--shadow-lg);
  transition:box-shadow .2s, border-color .2s;
}
.scan-entry .entry-row:focus-within{
  border-color:var(--gold-line);
  box-shadow:0 0 0 4px var(--gold-bg), var(--shadow-lg);
}
.scan-entry .entry-icon{
  color:var(--faint);
  font-size:18px;
  margin-right:4px;
}
.scan-entry .entry-row input{
  flex:1;
  border:none;
  background:none;
  outline:none;
  font-family:var(--sans);
  font-size:17px;
  font-weight:500;
  color:var(--ink);
  padding:14px 6px;
}
.scan-entry .entry-row input::placeholder{
  color:var(--faint);
  font-weight:400;
}
.scan-entry #scanBtn{
  background:linear-gradient(135deg,#C8901A,#9A6B00);
  color:#fff;
  border:none;
  border-radius:10px;
  padding:13px 26px;
  font-family:var(--sans);
  font-weight:700;
  font-size:14px;
  cursor:pointer;
  letter-spacing:0.4px;
  transition:filter .15s, transform .15s;
}
.scan-entry #scanBtn:hover{filter:brightness(1.08)}
.scan-entry #scanBtn:active{transform:translateY(1px)}
.scan-entry .hint{
  font-size:12px;
  color:var(--faint);
  margin-top:18px;
  font-weight:500;
}
.scan-entry .hint kbd{
  font-family:var(--mono);
  font-size:11px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:5px;
  padding:2px 8px;
  color:var(--muted);
  font-weight:600;
  margin:0 3px;
  font-variant-numeric:tabular-nums;
}

/* Running */
.scan-running .brand-banner{
  font-family:var(--serif);
  font-size:24px;
  font-weight:600;
  color:var(--ink);
  margin-bottom:24px;
  letter-spacing:-0.01em;
  opacity:0;
  animation:fadeUp .4s ease-out forwards;
}
.scan-running .brand-banner .brand-icon{
  color:var(--gold-bright);
  margin-right:6px;
}
.scan-running .stage{
  text-align:left;
  background:#fff;
  border:1px solid var(--line);
  border-radius:14px;
  padding:18px 22px;
  margin-bottom:12px;
  box-shadow:var(--shadow);
  opacity:0.32;
  transform:translateY(4px);
  transition:opacity .35s ease, transform .35s ease;
}
.scan-running .stage.on{opacity:1; transform:none}
.scan-running .stage.done{opacity:0.62}
.scan-running .stage-head{display:flex;align-items:center;gap:11px;margin-bottom:6px}
.scan-running .step-num{
  display:inline-grid;
  place-items:center;
  width:26px;
  height:26px;
  border-radius:50%;
  background:var(--gold-bg);
  color:var(--gold);
  font-size:11.5px;
  font-weight:800;
  font-variant-numeric:tabular-nums;
}
.scan-running .stage.done .step-num{background:var(--real-bg);color:var(--real)}
.scan-running .stage.done .step-num::after{content:""}
.scan-running .step-text{
  font-family:var(--serif);
  font-size:16px;
  font-weight:600;
  letter-spacing:-0.01em;
}

/* Stage 1: chips */
.scan-running .chips{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:12px;
}
.scan-chip{
  display:inline-flex;
  align-items:center;
  gap:7px;
  background:var(--real-bg);
  border:1px solid var(--real-line);
  border-radius:16px;
  padding:6px 12px;
  font-size:12.5px;
  font-weight:600;
  color:var(--ink);
  opacity:0;
  transform:translateY(6px);
  animation:chipIn .35s ease-out forwards;
}
.scan-chip .check{color:var(--real);font-weight:800}
@keyframes chipIn{to{opacity:1;transform:none}}
@keyframes fadeUp{to{opacity:1;transform:none}}

/* Stage 2: counter + platform bars */
.scan-running .counter{
  display:flex;
  align-items:baseline;
  gap:10px;
  margin-top:14px;
  font-family:var(--serif);
}
.scan-running #mentionsCounter{
  font-size:44px;
  font-weight:600;
  color:var(--ink);
  letter-spacing:-0.02em;
  font-variant-numeric:tabular-nums;
  line-height:1;
}
.scan-running .counter-unit{
  font-size:14px;
  color:var(--muted);
  font-weight:500;
  font-family:var(--sans);
}
.scan-running .platform-bars{
  display:grid;
  grid-template-columns:60px 1fr 36px;
  gap:8px 11px;
  margin-top:14px;
  font-size:11.5px;
  align-items:center;
}
.scan-running .platform-bars .pl-lab{
  font-weight:700;
  color:var(--muted);
}
.scan-running .platform-bars .pl-bar{
  height:10px;
  background:var(--line2);
  border-radius:5px;
  overflow:hidden;
}
.scan-running .platform-bars .pl-bar i{
  display:block;
  height:100%;
  width:0;
  transition:width 1.6s ease-out;
}
.scan-running .platform-bars .pl-pct{
  font-weight:800;
  color:var(--ink);
  text-align:right;
  font-variant-numeric:tabular-nums;
}

/* Stage 3: dual bar */
.scan-running .dual-bar{
  display:flex;
  height:36px;
  border-radius:9px;
  margin-top:14px;
  overflow:hidden;
  background:var(--line2);
  position:relative;
}
.scan-running .dual-bar .real-fill{
  height:100%;
  background:linear-gradient(90deg,#0E9F6E,#34C28C);
  width:0;
  transition:width 1.8s ease-out;
}
.scan-running .dual-bar .fake-fill{
  height:100%;
  background:linear-gradient(90deg,#E02D2D,#F2A6A0);
  width:0;
  transition:width 1.8s ease-out 0.25s;
}
.scan-running .dual-bar-labels{
  display:flex;
  justify-content:space-between;
  margin-top:8px;
  font-size:13px;
  font-weight:700;
  font-variant-numeric:tabular-nums;
}
.scan-running .dual-bar-labels .lbl-real{color:var(--real)}
.scan-running .dual-bar-labels .lbl-fake{color:var(--fake)}

/* Stage 4: checks */
.scan-running .checks{margin-top:12px}
.scan-running .check-row{
  display:flex;
  align-items:center;
  gap:12px;
  padding:9px 0;
  font-size:13px;
  border-bottom:1px solid var(--line2);
  opacity:0;
  transform:translateY(4px);
  animation:chipIn .4s ease-out forwards;
}
.scan-running .check-row:last-child{border-bottom:none}
.scan-running .check-row .check-icon{
  width:22px;
  height:22px;
  border-radius:50%;
  display:grid;
  place-items:center;
  color:#fff;
  font-size:11px;
  font-weight:800;
  flex-shrink:0;
}
.scan-running .check-row .check-icon.ok{background:var(--real)}
.scan-running .check-row .check-icon.warn{background:var(--warn)}
.scan-running .check-row .check-text{flex:1;color:var(--ink);font-weight:600}
.scan-running .check-row .check-detail{
  font-size:11.5px;
  color:var(--faint);
  font-weight:600;
  font-variant-numeric:tabular-nums;
}

/* Stage 5: gauge + headline + CTA */
.scan-running .stage-final{
  background:linear-gradient(135deg,#FFFDF5,#fff 70%);
  border-color:var(--gold-line);
  text-align:center;
}
.scan-running .stage-final .stage-head{justify-content:center}
.scan-running .gauge-wrap{
  margin:18px auto 8px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:4px;
}
.scan-running .gauge-svg{
  position:relative;
  width:160px;
  height:160px;
}
.scan-running .gauge-num{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
}
.scan-running .gauge-num #gaugeScore{
  font-family:var(--serif);
  font-size:56px;
  font-weight:600;
  color:var(--ink);
  letter-spacing:-0.025em;
  font-variant-numeric:tabular-nums;
  line-height:1;
}
.scan-running .gauge-num .gauge-of{
  font-size:11px;
  color:var(--faint);
  font-weight:700;
  margin-top:3px;
  letter-spacing:0.5px;
}
.scan-running .score-delta{
  font-family:var(--sans);
  font-size:13px;
  font-weight:800;
  margin-top:4px;
  font-variant-numeric:tabular-nums;
}
.scan-running .score-delta .delta-vs{color:var(--faint);font-weight:600;margin-left:4px}

.scan-running .headline{
  font-family:var(--serif);
  font-size:17px;
  line-height:1.55;
  color:var(--ink);
  margin:20px auto 12px;
  max-width:620px;
  text-align:center;
  opacity:0;
  transform:translateY(4px);
  transition:opacity .8s ease, transform .8s ease;
}
.scan-running .headline.show{opacity:1;transform:none}
.scan-running .cta-wrap{margin-top:8px}
.cta-btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  background:linear-gradient(135deg,#C8901A,#9A6B00);
  color:#fff;
  border:none;
  border-radius:12px;
  padding:14px 28px;
  font-family:var(--sans);
  font-weight:700;
  font-size:14.5px;
  cursor:pointer;
  letter-spacing:0.4px;
  opacity:0;
  transform:translateY(6px);
  transition:opacity .55s ease, transform .55s ease, filter .15s;
  box-shadow:0 6px 16px rgba(154,107,0,.22);
}
.cta-btn.show{opacity:1;transform:none}
.cta-btn:hover{filter:brightness(1.08)}
.cta-btn:active{transform:translateY(1px)}

.scan-running .skip{
  margin-top:24px;
  font-size:11px;
  color:var(--faint);
  font-weight:600;
  letter-spacing:0.5px;
}
.scan-running .skip kbd{
  font-family:var(--mono);
  font-size:10px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:4px;
  padding:2px 7px;
  color:var(--muted);
  font-weight:600;
  margin:0 3px;
}
.scan-running .skip a{
  color:var(--gold);
  cursor:pointer;
  font-weight:700;
  text-decoration:underline;
  text-decoration-color:var(--gold-line);
  text-underline-offset:2px;
}
.scan-running .skip a:hover{color:var(--gold-bright)}

/* Input shake on invalid brand */
@keyframes shakeX{
  0%,100%{transform:translateX(0)}
  20%,60%{transform:translateX(-6px)}
  40%,80%{transform:translateX(6px)}
}
.scan-entry .entry-row.shake{animation:shakeX .35s ease}

/* ========================================================== */
/* ====        W5: PRESENTER MODE — STEP INDICATOR       ===== */
/* ========================================================== */
.step-indicator{
  position:fixed;
  bottom:22px;
  left:22px;
  z-index:1000;
  background:rgba(21,23,28,0.92);
  color:#fff;
  padding:8px 14px;
  border-radius:10px;
  font-family:var(--mono);
  font-size:11.5px;
  font-weight:600;
  letter-spacing:0.4px;
  font-variant-numeric:tabular-nums;
  backdrop-filter:blur(8px);
  pointer-events:none;
  box-shadow:0 6px 20px rgba(16,24,40,.22);
  display:flex;
  align-items:center;
  gap:6px;
}
.step-indicator b{
  font-weight:800;
  color:var(--gold-bright);
  font-size:12.5px;
}
.step-indicator .step-brand{
  margin-left:6px;
  color:rgba(255,255,255,.62);
  font-weight:700;
  letter-spacing:.5px;
  text-transform:uppercase;
  font-size:10px;
}

/* ========================================================== */
/* ====   W5: RESPONSIVE FALLBACKS — 1366x768 PROJECTOR   ==== */
/* ========================================================== */
@media (max-width: 1366px){
  .content{padding:20px 22px 60px}
}
@media (max-width: 1280px){
  .g4{grid-template-columns:repeat(2,1fr)}
  .hero-grid{grid-template-columns:1fr 1fr;gap:18px}
  .hero-grid > div:first-child{grid-column:span 2;border-bottom:1px solid var(--line);padding-bottom:14px;margin-bottom:4px}
  .pillar-div{border-left:none;padding-left:0;padding-top:12px;border-top:1px solid var(--line2)}
  .pillar-div:nth-child(2){border-top:none;padding-top:0}
  .g111{grid-template-columns:repeat(2,1fr)}
  .g111 > .card:nth-child(3){grid-column:span 2}
  .g21{grid-template-columns:1fr}
  .g12{grid-template-columns:1fr}
  .content{padding:18px 18px 60px;max-width:100%}
}
@media (max-width: 1024px){
  .g4{grid-template-columns:repeat(2,1fr)}
  .g3{grid-template-columns:1fr 1fr}
  .g2{grid-template-columns:1fr}
  .hero-grid{grid-template-columns:1fr}
  .hero-grid > div:first-child{grid-column:auto}
  .side{position:fixed;left:-232px;transition:left .2s ease}
  .side.open{left:0;z-index:200;box-shadow:0 0 40px rgba(0,0,0,.25)}
  .app{grid-template-columns:1fr}
}

/* Subtle hover lift on cards per CLAUDE.md "card hover = shadow deepens + translateY(-1px) over 160ms" */
.card{transition:box-shadow 160ms ease, transform 160ms ease}
.card:hover{box-shadow:var(--shadow-lg);transform:translateY(-1px)}
/* But not for cards inside scan or hero (they have their own treatment) */
.scan-shell .stage, .hero{transition:none}
.scan-shell .stage:hover, .hero:hover{transform:none;box-shadow:var(--shadow-lg)}

/* Focus rings (CLAUDE.md "focus rings gold") */
button:focus-visible, input:focus-visible, .nav-item:focus-visible, .dd .uitem:focus-visible{
  outline:2px solid var(--gold-bright);
  outline-offset:2px;
  border-radius:6px;
}
::selection{background:var(--gold-bg);color:var(--ink)}

/* ==========================================================
   ====   WIDE-SCREEN POLISH (1920×1080 demo + beyond)   ====
   ========================================================== */

/* app.html: let .content breathe on wider displays */
@media (min-width: 1600px){
  .content{max-width:1480px}
}
@media (min-width: 1900px){
  .content{max-width:1640px;padding:28px 36px 80px}
}

/* Scan running stages: scale typography up so the staged sequence fills the canvas */
@media (min-width: 1280px){
  .scan-running .brand-banner{font-size:26px;margin-bottom:28px}
  .scan-running .stage{padding:20px 24px}
  .scan-running .step-text{font-size:17px}
  .scan-running #mentionsCounter{font-size:50px}
  .scan-running .counter-unit{font-size:15px}
  .scan-running .gauge-num #gaugeScore{font-size:60px}
  .scan-running .headline{font-size:18px;line-height:1.55;max-width:680px}
  .cta-btn{padding:15px 30px;font-size:15px}
}
@media (min-width: 1600px){
  .scan-running #mentionsCounter{font-size:56px}
  .scan-running .gauge-num #gaugeScore{font-size:66px}
  .scan-running .headline{font-size:19px;max-width:720px}
}

/* ==========================================================
   ====    TOPBAR ALIGNMENT — push right cluster to edge   ====
   ========================================================== */
/* The first element after the searchbox gets margin-left:auto,
   which consumes the empty space and pushes it + every sibling
   after it to the right edge of the topbar. */
.topbar > *:nth-child(2){margin-left:auto}

/* Clickable KPI tiles on Conversations page */
.clickable-kpi{border:1px solid var(--line)}
.clickable-kpi:hover{border-color:var(--gold-line);box-shadow:0 6px 24px rgba(154,107,0,.12);transform:translateY(-1px)}
.kpi-cta{position:absolute;bottom:8px;right:12px;font-size:9px;letter-spacing:.5px;color:var(--gold);font-weight:800;opacity:.7;text-transform:uppercase}
.clickable-kpi:hover .kpi-cta{opacity:1}
#convDrillPanel{animation:fade .25s ease}
.drill-table{width:100%;font-size:12.5px;margin-top:8px}
.drill-table th{font-size:9.5px;letter-spacing:.6px;padding:9px 11px;color:var(--faint);font-weight:800;text-align:left;border-bottom:1px solid var(--line)}
.drill-table td{padding:9px 11px;border-bottom:1px solid var(--line2);vertical-align:top}
.drill-source-row{display:grid;grid-template-columns:180px 80px 1fr 100px;gap:14px;align-items:center;padding:11px 14px;background:#FAFAFB;border:1px solid var(--line);border-radius:10px;margin-bottom:8px;font-size:12.5px}
.drill-source-row .ds-name{font-weight:800;color:var(--ink)}
.drill-source-row .ds-count{font-family:var(--serif);font-size:19px;font-weight:600}
.drill-source-row .ds-note{font-size:11.5px;color:var(--muted);line-height:1.45}
.drill-source-row .ds-meta{font-family:var(--mono);font-size:10.5px;color:var(--faint);font-weight:700;text-align:right}

/* Brand-view pills in ctxbar — switch between corporate and brand sites */
.brand-views .bv:hover{background:rgba(255,255,255,.6);color:var(--ink)}
.brand-views .bv.on:hover{background:#fff}

/* SEARCH & AI tabs (Google Search Console-style) */
.saitabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin-bottom:18px;margin-top:6px}
.saitabs button{background:none;border:none;border-bottom:2px solid transparent;padding:11px 16px;font-size:13px;font-weight:700;color:var(--muted);cursor:pointer;font-family:var(--sans);display:flex;align-items:center;gap:7px;transition:.15s}
.saitabs button:hover{color:var(--ink)}
.saitabs button.on{color:var(--gold);border-bottom-color:var(--gold-bright)}
.saitabs .saitab-ic{font-size:14px;opacity:.85}
.saitab{display:none}
.saitab.on{display:block;animation:fade .25s ease}

/* ctxbar: livedot gets slightly stronger presence at the right edge */
.ctxbar .livedot{padding-left:14px;font-weight:700}
.ctxbar .livedot i{box-shadow:0 0 0 4px var(--real-bg),0 0 0 5px rgba(14,159,110,.18)}

/* Hide the SHOW ME lens toggle (Everything / Only Real / Only Fake) */
.ctxbar .lens{display:none}

/* ============== GLOBAL FOOTPRINT — Leaflet map panel ============== */
.map-panel-wrap{display:grid;grid-template-columns:200px 1fr;min-height:540px}
.region-tabs{background:#FAFAFB;border-right:1px solid var(--gold-line);padding:14px 10px;display:flex;flex-direction:column;gap:4px}
.region-tabs .rt-head{font-size:10px;letter-spacing:2px;font-weight:800;color:var(--gold);padding:4px 8px 10px;border-bottom:1px solid var(--line);margin-bottom:6px}
.region-tabs .rt{background:transparent;border:1px solid transparent;border-radius:8px;padding:8px 10px;text-align:left;font-family:var(--sans);font-size:12px;color:var(--ink);cursor:pointer;font-weight:600;transition:all .15s}
.region-tabs .rt:hover{background:#fff;border-color:var(--line);transform:translateX(2px)}
.region-tabs .rt.on{background:var(--gold-bg);border-color:var(--gold-line);color:var(--gold);font-weight:800}
.map-stage{position:relative;min-height:540px}
#worldMap{position:absolute;inset:0;width:100%;height:100%;background:#EEF1F4;z-index:1}
.leaflet-container{font-family:var(--sans);background:#F0F2F4}
.leaflet-popup-content-wrapper{border-radius:10px;box-shadow:0 6px 24px rgba(16,24,40,.18)}
.leaflet-popup-content{margin:12px 14px}
.leaflet-control-zoom a{background:#fff;color:var(--ink);border-color:var(--line)}
.leaflet-control-attribution{font-size:9.5px;background:rgba(255,255,255,.85)}

/* Floating summary card */
.world-summary{position:absolute;top:16px;left:16px;background:#fff;border:1px solid var(--gold-line);border-radius:14px;padding:14px 16px;width:262px;z-index:1000;box-shadow:0 6px 22px rgba(16,24,40,.12)}
.world-summary .ws-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;gap:10px}
.world-summary .ws-title{font-family:var(--serif);font-size:16px;font-weight:600;color:var(--ink);line-height:1.2}
.world-summary .ws-tag{background:var(--gold-bg);color:var(--gold);font-family:var(--mono);font-size:9.5px;letter-spacing:.6px;font-weight:800;padding:3px 8px;border-radius:5px;border:1px solid var(--gold-line);white-space:nowrap}
.world-summary .ws-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:10px}
.world-summary .ws-stats > div{text-align:center}
.world-summary .ws-v{font-family:var(--serif);font-size:22px;font-weight:700;line-height:1.05}
.world-summary .ws-l{font-size:9px;letter-spacing:1.2px;color:var(--muted);font-weight:700;margin-top:2px}
.world-summary .ws-anchor{font-size:11px;line-height:1.45;color:var(--muted);padding-top:9px;border-top:1px dashed var(--line)}
.world-summary .ws-anchor i{color:var(--gold);font-style:italic}

/* Tier filter pills */
.tier-pills{display:flex;gap:6px;flex-wrap:wrap}
.tier-pills .tp{background:#fff;border:1px solid var(--line);border-radius:18px;padding:6px 11px;font-family:var(--sans);font-size:11.5px;font-weight:700;color:var(--muted);cursor:pointer;display:inline-flex;align-items:center;gap:6px;transition:all .15s}
.tier-pills .tp i{width:7px;height:7px;border-radius:50%;display:inline-block}
.tier-pills .tp:hover{border-color:var(--gold-line);color:var(--ink)}
.tier-pills .tp.on{background:var(--ink);border-color:var(--ink);color:#fff}

@media (max-width:1100px){
  .map-panel-wrap{grid-template-columns:1fr}
  .region-tabs{flex-direction:row;flex-wrap:wrap;border-right:0;border-bottom:1px solid var(--gold-line)}
  .region-tabs .rt-head{width:100%;border-bottom:0;padding:0 8px 4px;margin-bottom:0}
  .world-summary{position:relative;top:0;left:0;width:auto;margin:12px;box-shadow:none}
}

/* ============== BRAND IMAGERY — real product photos / logos ============== */
.watching-mark{display:inline-flex;align-items:center;gap:9px;padding:5px 12px 5px 8px;background:#fff;border:1px solid var(--line);border-radius:10px;margin-right:10px}
.watching-mark .wm-label{font-size:9.5px;letter-spacing:1.6px;color:var(--muted);font-weight:800}
.watching-mark img{height:22px;width:auto;display:block}

/* Brand portfolio strip (Pulse page) */
.brand-strip{display:grid;grid-template-columns:1.1fr 1fr 1fr 1fr;gap:12px;margin-bottom:14px}
.brand-card{background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden;display:flex;flex-direction:column;transition:transform .15s,box-shadow .15s}
.brand-card:hover{transform:translateY(-1px);box-shadow:var(--shadow-lg)}
.brand-card.hero{background:linear-gradient(135deg,#15171C 0%,#1f2229 100%);color:#fff;border-color:#15171C}
.brand-card .bc-img{height:108px;background:#FAFAFB;display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative}
.brand-card .bc-img img{max-height:84px;max-width:84%;width:auto;object-fit:contain}
.brand-card.full-bleed .bc-img{height:140px}
.brand-card.full-bleed .bc-img img{max-height:none;max-width:none;width:100%;height:100%;object-fit:cover}
.brand-card .bc-body{padding:11px 14px;border-top:1px solid var(--line2)}
.brand-card.hero .bc-body{border-top-color:#2a2d35}
.brand-card .bc-label{font-size:9.5px;letter-spacing:1.6px;color:var(--gold);font-weight:800;margin-bottom:4px}
.brand-card.hero .bc-label{color:var(--gold-bright)}
.brand-card .bc-title{font-family:var(--serif);font-size:15px;font-weight:600;line-height:1.2}
.brand-card .bc-meta{font-size:11px;color:var(--muted);margin-top:3px;line-height:1.4}
.brand-card.hero .bc-meta{color:#A4A8B0}
.brand-card.hero .bc-img{background:#0F1115}
.brand-card.hero .bc-img img.lg{max-height:62px}

/* Kopiko page hero — compact horizontal banner */
.kopiko-hero{display:grid;grid-template-columns:1fr 230px;gap:0;background:linear-gradient(135deg,#15171C 0%,#1f2229 60%,#2a2030 100%);border:1px solid #15171C;border-radius:12px;overflow:hidden;margin-bottom:16px;color:#fff;height:118px}
.kopiko-hero .kh-body{padding:14px 20px;display:flex;flex-direction:column;justify-content:center;overflow:hidden;min-width:0}
.kopiko-hero .kh-eyebrow{font-family:var(--mono);font-size:9.5px;letter-spacing:1.8px;color:var(--gold-bright);font-weight:800;margin-bottom:6px;display:flex;align-items:center;gap:7px}
.kopiko-hero .kh-eyebrow .pulse-d{width:6px;height:6px;border-radius:50%;background:var(--gold-bright);box-shadow:0 0 0 3px rgba(200,144,26,.2);animation:pulse 2s infinite;flex-shrink:0}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.5}}
.kopiko-hero .kh-logo{display:none}
.kopiko-hero h2{font-family:var(--serif);font-size:17px;font-weight:600;line-height:1.25;margin-bottom:4px;color:#fff;letter-spacing:-.1px}
.kopiko-hero h2 b{color:var(--gold-bright);font-weight:600}
.kopiko-hero .kh-meta{font-size:10.5px;color:#A4A8B0;line-height:1.45;margin:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.kopiko-hero .kh-meta i{color:#E5C786;font-style:italic;font-weight:600}
.kopiko-hero .kh-img{position:relative;overflow:hidden;height:118px;background:#0F1115}
.kopiko-hero .kh-img img{width:100%;height:100%;object-fit:cover;object-position:center 30%;display:block}
.kopiko-hero .kh-img::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(31,34,41,.7) 0%,rgba(31,34,41,0) 40%)}
.kopiko-hero .kh-badge{position:absolute;top:8px;right:8px;background:rgba(15,17,21,.85);backdrop-filter:blur(4px);color:#fff;font-family:var(--mono);font-size:8.5px;letter-spacing:1.2px;font-weight:800;padding:4px 8px;border-radius:5px;border:1px solid rgba(255,255,255,.12);z-index:2}

@media (max-width:1100px){
  .brand-strip{grid-template-columns:1fr 1fr}
  .kopiko-hero{grid-template-columns:1fr 150px}
  .kopiko-hero h2{font-size:15px}
}

/* ===== Threat detail modal ===== */
.tmodal-overlay{position:fixed;inset:0;background:rgba(16,24,40,.55);z-index:9999;display:flex;align-items:center;justify-content:center;padding:32px;animation:tmFade .15s ease}
@keyframes tmFade{from{opacity:0}to{opacity:1}}
.tmodal{background:#fff;border-radius:14px;max-width:780px;width:100%;max-height:88vh;overflow-y:auto;padding:26px 30px 30px;box-shadow:0 24px 70px rgba(0,0,0,.32);position:relative}
.tmodal-x{position:absolute;top:15px;right:17px;background:#F1F2F4;border:none;width:30px;height:30px;border-radius:8px;cursor:pointer;font-size:13px;color:var(--muted);font-weight:700}
.tmodal-x:hover{background:#E6E8EB;color:var(--ink)}
.threat-row-click{cursor:pointer;transition:background .12s}
.threat-row-click:hover{background:#FAFAFB}