/* ===== TOKENS ===== */
:root {
  --bg:       #07101f;
  --bg2:      #0d1b2e;
  --bg3:      #162035;
  --bg4:      #1e2d45;
  --card:     #0f1e30;
  --card-hover: rgba(100,112,255,.04);
  --border:   rgba(100,116,255,.18);
  --border-h: rgba(100,116,255,.4);
  --text:     #dde6f0;
  --muted:    #7a8fa8;
  --primary:  #6470ff;
  --primary2: #8b96ff;
  --accent:   #00d4ff;
  --purple:   #a855f7;
  --green:    #22c55e;
  --yellow:   #f59e0b;
  --red:      #f04444;
  --radius:   13px;
  --radius-s: 8px;
  --shadow:   0 8px 40px rgba(0,0,0,.55);
  --glow:     0 0 0 1px rgba(100,116,255,.15), 0 8px 32px rgba(100,116,255,.08);
  --gradient-primary: linear-gradient(135deg, #6470ff, #a855f7);
  --gradient-accent:  linear-gradient(135deg, #00d4ff, #6470ff);
  --gradient-full:    linear-gradient(135deg, #6470ff, #00d4ff, #a855f7);
}

[data-theme="light"] {
  --bg:       #f5f7ff;
  --bg2:      #ffffff;
  --bg3:      #eaedfa;
  --bg4:      #dde2f5;
  --card:     #ffffff;
  --card-hover: rgba(80,96,238,.03);
  --border:   rgba(80,96,238,.16);
  --border-h: rgba(80,96,238,.38);
  --text:     #0f172a;
  --muted:    #4e5d78;
  --primary:  #5060ee;
  --primary2: #5060ee;
  --accent:   #0099cc;
  --purple:   #7c3aed;
  --green:    #16a34a;
  --yellow:   #d97706;
  --red:      #dc2626;
  --shadow:   0 4px 24px rgba(80,96,238,.12);
  --glow:     0 0 0 1px rgba(80,96,238,.12), 0 4px 20px rgba(80,96,238,.08);
  --gradient-primary: linear-gradient(135deg, #5060ee, #7c3aed);
  --gradient-accent:  linear-gradient(135deg, #0099cc, #5060ee);
  --gradient-full:    linear-gradient(135deg, #5060ee, #0099cc, #7c3aed);
}

/* ===== RESET ===== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'Inter',system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;background:var(--bg);color:var(--text);min-height:100vh;line-height:1.6;transition:background .25s,color .25s}
a{color:inherit;text-decoration:none}
button{cursor:pointer;font-family:inherit;border:none;background:none}
img{display:block;max-width:100%}
.hidden{display:none!important}
.wrap{max-width:1120px;margin:0 auto;padding:0 1.5rem}

/* ===== SCROLLBAR ===== */
::-webkit-scrollbar{width:6px;height:6px}
::-webkit-scrollbar-track{background:var(--bg2)}
::-webkit-scrollbar-thumb{background:var(--bg4);border-radius:6px}
::-webkit-scrollbar-thumb:hover{background:var(--primary)}

/* ===== NAV ===== */
.topnav{position:sticky;top:0;z-index:200;background:rgba(7,16,31,.92);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-bottom:1px solid var(--border);transition:background .25s,box-shadow .25s}
[data-theme="light"] .topnav{background:rgba(255,255,255,.96);border-bottom:1px solid rgba(80,96,238,.1);box-shadow:0 1px 12px rgba(80,96,238,.08)}
.topnav.scrolled{box-shadow:0 4px 24px rgba(0,0,0,.35)}
[data-theme="light"] .topnav.scrolled{box-shadow:0 4px 24px rgba(80,96,238,.15)}
.nav-row{display:flex;align-items:center;justify-content:space-between;padding:.85rem 1.5rem}
.logo{font-family:'Space Grotesk',sans-serif;font-size:1.3rem;font-weight:800;letter-spacing:-.02em;background:linear-gradient(135deg,var(--primary2),var(--accent));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;display:flex;align-items:center;gap:.4rem}
.icon-btn{width:36px;height:36px;border-radius:var(--radius-s);background:var(--bg3);border:1px solid var(--border);color:var(--muted);display:flex;align-items:center;justify-content:center;font-size:1rem;transition:all .2s}
.icon-btn:hover{color:var(--primary2);border-color:var(--border-h);background:var(--bg4)}

/* ===== HERO ===== */
.hero{padding:5rem 0 4rem;text-align:center;position:relative;overflow:hidden}
.hero::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 70% 55% at 50% 0%,rgba(100,112,255,.18) 0%,transparent 70%);pointer-events:none}
.hero-inner{position:relative;display:flex;flex-direction:column;align-items:center;gap:1.1rem}
.pill{display:inline-flex;align-items:center;gap:.5rem;background:rgba(100,112,255,.1);border:1px solid rgba(100,112,255,.28);color:var(--primary2);border-radius:30px;padding:.28rem 1rem;font-size:.78rem;font-weight:600;letter-spacing:.04em}
.pill-dot{width:6px;height:6px;border-radius:50%;background:var(--accent);box-shadow:0 0 6px var(--accent)}
.hero h1{font-family:'Space Grotesk',sans-serif;font-size:clamp(2.2rem,5.5vw,3.8rem);font-weight:900;line-height:1.08;letter-spacing:-.04em;color:var(--text)}
.grad{background:linear-gradient(135deg,var(--primary2),var(--accent));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.hero-sub{color:var(--muted);font-size:1.05rem;max-width:480px;line-height:1.7}

/* ===== SCAN BOX ===== */
.scan-box{width:100%;max-width:680px}
.url-row{display:flex;align-items:center;background:var(--bg2);border:2px solid var(--border);border-radius:var(--radius);overflow:hidden;transition:border-color .2s,box-shadow .2s;margin-bottom:.875rem}
.url-row:focus-within{border-color:var(--primary);box-shadow:0 0 0 4px rgba(100,112,255,.12)}
[data-theme="light"] .url-row{background:#fff;border-color:rgba(80,96,238,.2)}
[data-theme="light"] .url-row:focus-within{box-shadow:0 0 0 4px rgba(80,96,238,.1)}
.url-icon{padding:0 1rem;color:var(--muted);font-size:1.15rem;flex-shrink:0}
.url-row input{flex:1;background:transparent;border:none;outline:none;color:var(--text);font-size:1.05rem;padding:.9rem .25rem}
.url-row input::placeholder{color:var(--muted)}
.scan-btn{background:linear-gradient(135deg,var(--primary),var(--purple));color:#fff;padding:0 1.75rem;min-height:52px;font-weight:700;font-size:.95rem;display:flex;align-items:center;gap:.5rem;flex-shrink:0;transition:opacity .2s,box-shadow .2s,transform .2s;position:relative;overflow:hidden}
.scan-btn::after{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,255,255,.15),transparent);opacity:0;transition:opacity .2s}
.scan-btn:hover{opacity:.92;transform:translateY(-1px);box-shadow:0 8px 28px rgba(100,112,255,.5)}
.scan-btn:hover::after{opacity:1}
.scan-btn:not(:disabled){animation:btnPulse 3s ease-in-out infinite}
.scan-btn:disabled{opacity:.45;cursor:not-allowed;animation:none}
@keyframes btnPulse{0%,100%{box-shadow:0 0 0 0 rgba(100,112,255,.4)}50%{box-shadow:0 0 0 8px rgba(100,112,255,0)}}
.try-row{display:flex;align-items:center;gap:.4rem;flex-wrap:wrap;justify-content:center}
.try-label{color:var(--muted);font-size:.8rem}
.try-btn{background:var(--bg3);border:1px solid var(--border);color:var(--muted);border-radius:20px;padding:.22rem .8rem;font-size:.8rem;transition:all .2s}
.try-btn:hover{border-color:var(--primary2);color:var(--primary2);background:var(--bg4)}

/* ===== PROGRESS ===== */
.progress-box{width:100%;max-width:680px;margin-top:1.5rem}
.prog-track{height:4px;background:var(--bg4);border-radius:10px;overflow:hidden;margin-bottom:.6rem}
.prog-fill{height:100%;width:0%;background:linear-gradient(90deg,var(--primary),var(--accent));border-radius:10px;transition:width .35s ease;box-shadow:0 0 10px rgba(100,112,255,.5)}
.prog-label{color:var(--muted);font-size:.82rem;text-align:center}

/* ===== RESULTS ===== */
main{padding:2.5rem 0 5rem}

/* ===== SITE BANNER ===== */
.site-banner{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:1.75rem 2rem;margin-bottom:1.5rem;position:relative;overflow:hidden}
.site-banner::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--primary),var(--accent),var(--purple))}
.sb-title{font-size:1.35rem;font-weight:800;letter-spacing:-.02em;margin-bottom:.35rem}
.sb-desc{color:var(--muted);font-size:.9rem;line-height:1.6;max-width:600px;margin-bottom:.875rem}
.sb-tags{display:flex;gap:.5rem;flex-wrap:wrap}
.sb-tag{background:rgba(100,112,255,.1);border:1px solid rgba(100,112,255,.22);color:var(--primary2);border-radius:8px;padding:.26rem .75rem;font-size:.78rem;font-weight:600;display:inline-flex;align-items:center;gap:.35rem}

/* ===== STATS ROW ===== */
.stats-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(118px,1fr));gap:.875rem;margin-bottom:1.75rem}
.stat-card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:1.3rem 1rem;text-align:center;transition:transform .25s,box-shadow .25s,border-color .25s;cursor:default;position:relative;overflow:hidden}
.stat-card::after{content:'';position:absolute;bottom:0;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--primary),var(--accent));transform:scaleX(0);transition:transform .3s;transform-origin:left}
.stat-card:hover{transform:translateY(-6px);box-shadow:0 16px 48px rgba(0,0,0,.5),0 0 0 1px rgba(100,112,255,.2);border-color:var(--border-h)}
.stat-card:hover::after{transform:scaleX(1)}
.stat-icon{font-size:1.5rem;margin-bottom:.4rem}
.stat-val{font-family:'Space Grotesk',sans-serif;font-size:1.55rem;font-weight:800;color:var(--primary2);line-height:1}
.stat-lbl{font-size:.7rem;color:var(--muted);margin-top:.3rem;text-transform:uppercase;letter-spacing:.06em}

/* ===== TABS ===== */
.tabs-bar{overflow-x:auto;scrollbar-width:none;border-bottom:1px solid var(--border);margin-bottom:1.5rem}
.tabs-bar::-webkit-scrollbar{display:none}
.tabs{display:flex;gap:.1rem;min-width:max-content}
.tab{display:flex;align-items:center;gap:.38rem;background:transparent;border:none;border-bottom:2px solid transparent;color:var(--muted);padding:.68rem 1.05rem;font-size:.82rem;font-weight:500;white-space:nowrap;transition:all .2s;margin-bottom:-1px}
.tab i{font-size:.9rem}
.tab:hover{color:var(--primary2)}
.tab.active{color:var(--primary2);border-bottom-color:var(--primary)}

/* ===== CARDS ===== */
.tab-content{min-height:200px}
.card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:1.5rem;margin-bottom:1.25rem;transition:border-color .2s}
.card:hover{border-color:var(--border-h)}
.card-head{font-size:.93rem;font-weight:700;margin-bottom:1.1rem;display:flex;align-items:center;gap:.45rem;color:var(--text)}
.card-head i{color:var(--primary2)}
.badge-cnt{background:rgba(100,112,255,.14);color:var(--primary2);border-radius:20px;padding:.08rem .55rem;font-size:.7rem;font-weight:700;margin-left:.2rem}
.g2{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:1.25rem}
.g3{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:1.25rem}

/* ===== INFO ROWS ===== */
.irow{display:flex;gap:.75rem;padding:.58rem 0;border-bottom:1px solid var(--border);font-size:.875rem;align-items:flex-start}
.irow:last-child{border-bottom:none}
.ilbl{color:var(--muted);min-width:135px;flex-shrink:0;font-size:.8rem;padding-top:.05rem}
.ival{word-break:break-word;line-height:1.5;flex:1}
.crow{display:flex;align-items:center;gap:.75rem;padding:.52rem 0;border-bottom:1px solid var(--border);font-size:.875rem}
.crow:last-child{border-bottom:none}
.clbl{flex:1;color:var(--muted);font-size:.82rem}
.pass{color:var(--green);font-weight:600;display:flex;align-items:center;gap:.3rem}
.fail{color:var(--red);font-weight:600;display:flex;align-items:center;gap:.3rem}

/* ===== COLORS ===== */
.color-grid{display:flex;flex-wrap:wrap;gap:.875rem;margin-top:.25rem}
.color-item{display:flex;flex-direction:column;align-items:center;gap:.32rem;cursor:pointer}
.swatch{width:56px;height:56px;border-radius:11px;border:2px solid rgba(255,255,255,.07);box-shadow:0 4px 14px rgba(0,0,0,.35);transition:transform .2s,box-shadow .2s}
.swatch:hover{transform:scale(1.14);box-shadow:0 8px 22px rgba(0,0,0,.45)}
.chex{font-size:.67rem;color:var(--muted);font-family:monospace;letter-spacing:.02em}
.crgb{font-size:.6rem;color:var(--muted);opacity:.65;font-family:monospace}
pre{color:var(--muted);font-size:.8rem;overflow-x:auto;line-height:1.8;background:var(--bg3);border-radius:var(--radius-s);padding:1rem;margin-top:.875rem;border:1px solid var(--border)}

/* ===== FONTS ===== */
.font-row{display:flex;align-items:center;justify-content:space-between;gap:1rem;background:var(--bg3);border:1px solid var(--border);border-radius:var(--radius-s);padding:.95rem 1.25rem;margin-bottom:.75rem;transition:border-color .2s}
.font-row:hover{border-color:var(--border-h)}
.font-name{font-size:1.45rem;font-weight:700;line-height:1.2}
.font-meta{font-size:.74rem;color:var(--muted);margin-top:.22rem}
.font-meta a{color:var(--primary2)}

/* ===== TREE ===== */
.tree-row{display:flex;align-items:center;gap:.55rem;padding:.48rem .55rem;border-radius:var(--radius-s);font-size:.875rem;transition:background .15s;cursor:default}
.tree-row:hover{background:var(--bg3)}
.tree-row i{color:var(--primary2);width:18px;flex-shrink:0}
.tree-cnt{margin-left:auto;background:var(--bg4);border-radius:20px;padding:.08rem .52rem;font-size:.7rem;color:var(--muted);font-weight:600}

/* ===== TAGS ===== */
.tags{display:flex;flex-wrap:wrap;gap:.42rem}
.tag{background:rgba(100,112,255,.1);border:1px solid rgba(100,112,255,.2);color:var(--primary2);border-radius:20px;padding:.22rem .72rem;font-size:.78rem;font-weight:500;transition:all .2s}
.tag:hover{background:rgba(100,112,255,.2);border-color:var(--border-h)}

/* ===== LIST ITEMS ===== */
.litem{display:flex;align-items:center;gap:.62rem;padding:.52rem .72rem;background:var(--bg3);border:1px solid var(--border);border-radius:var(--radius-s);margin-bottom:.42rem;font-size:.875rem;transition:border-color .2s}
.litem:hover{border-color:var(--border-h)}
.litem i{color:var(--primary2);width:18px;flex-shrink:0}
.litem a{color:var(--text);word-break:break-all}
.litem a:hover{color:var(--primary2)}

/* ===== CTA ===== */
.cta-row{display:flex;align-items:center;gap:.62rem;padding:.58rem .82rem;background:var(--bg3);border:1px solid var(--border);border-radius:var(--radius-s);margin-bottom:.45rem;font-size:.875rem;transition:border-color .2s}
.cta-row:hover{border-color:var(--border-h)}
.cta-badge{background:linear-gradient(135deg,var(--primary),var(--purple));color:#fff;border-radius:6px;padding:.12rem .52rem;font-size:.68rem;font-weight:700;white-space:nowrap;flex-shrink:0}
.cta-badge.sec{background:var(--bg4);color:var(--muted)}

/* ===== SEO ===== */
.score-box{text-align:center;padding:1.25rem 0}
.score-ring{width:96px;height:96px;border-radius:50%;border:7px solid;display:flex;align-items:center;justify-content:center;font-size:1.7rem;font-weight:900;margin:0 auto .75rem}
.sg{border-color:var(--green);color:var(--green);box-shadow:0 0 20px rgba(34,197,94,.2)}
.so{border-color:var(--yellow);color:var(--yellow);box-shadow:0 0 20px rgba(245,158,11,.2)}
.sb{border-color:var(--red);color:var(--red);box-shadow:0 0 20px rgba(240,68,68,.2)}
.score-grade{font-size:.9rem;font-weight:700;margin-bottom:.2rem}
.score-sub{font-size:.77rem;color:var(--muted)}

/* ===== MEDIA ===== */
.media-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(108px,1fr));gap:.875rem}
.media-card{background:var(--bg3);border:1px solid var(--border);border-radius:var(--radius-s);overflow:hidden;transition:transform .2s,border-color .2s}
.media-card:hover{transform:scale(1.04);border-color:var(--border-h)}
.media-card img{width:100%;height:76px;object-fit:cover}
.media-lbl{padding:.32rem .48rem;font-size:.64rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ===== TECH ===== */
.tech-wrap{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.25rem}
.tech-chip{display:inline-flex;align-items:center;gap:.42rem;background:var(--bg3);border:1px solid var(--border);border-radius:var(--radius-s);padding:.4rem .95rem;font-size:.83rem;font-weight:500;transition:all .2s}
.tech-chip:hover{border-color:var(--border-h);color:var(--primary2);background:var(--bg4)}
.tdot{width:7px;height:7px;border-radius:50%;background:var(--green);flex-shrink:0}

/* ===== PERF ===== */
.prow{display:flex;align-items:center;justify-content:space-between;padding:.62rem 0;border-bottom:1px solid var(--border);font-size:.875rem}
.prow:last-child{border-bottom:none}
.plbl{color:var(--muted)}
.pval{font-weight:700}
.a11y-row{display:flex;align-items:center;gap:.62rem;padding:.58rem .82rem;border-radius:var(--radius-s);margin-bottom:.45rem;font-size:.875rem}
.a11y-warn{background:rgba(245,158,11,.08);border:1px solid rgba(245,158,11,.22);color:var(--yellow)}
.a11y-ok{background:rgba(34,197,94,.08);border:1px solid rgba(34,197,94,.22);color:var(--green)}

/* ===== EXPORT ===== */
.export-row{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;padding:1.1rem 1.5rem;background:var(--card);border:1px solid var(--border);border-radius:var(--radius);margin-top:1.75rem}
.export-lbl{color:var(--muted);font-size:.82rem;margin-right:.2rem}
.exp-btn{background:var(--bg3);border:1px solid var(--border);color:var(--text);border-radius:var(--radius-s);padding:.38rem .95rem;font-size:.8rem;font-weight:500;transition:all .2s;display:inline-flex;align-items:center;gap:.35rem}
.exp-btn:hover{border-color:var(--primary2);color:var(--primary2);background:var(--bg4)}

/* ===== FOOTER ===== */
.foot{border-top:1px solid var(--border);padding:1.75rem 0;color:var(--muted);font-size:.875rem}
.foot-row{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:.75rem;padding:0 1.5rem}
.foot-brand{font-weight:800;font-size:1.05rem;background:linear-gradient(135deg,var(--primary2),var(--accent));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;display:flex;align-items:center;gap:.4rem}
.foot-ver{background:rgba(100,112,255,.14);border:1px solid rgba(100,112,255,.24);color:var(--primary2);border-radius:20px;padding:.06rem .48rem;font-size:.68rem;font-weight:600;-webkit-text-fill-color:var(--primary2)}
.foot a{color:var(--primary2);font-weight:600;transition:color .2s}
.foot a:hover{color:var(--accent)}

/* ===== TOAST ===== */
.toast-msg{position:fixed;bottom:2rem;left:50%;transform:translateX(-50%);background:linear-gradient(135deg,var(--primary),var(--purple));color:#fff;padding:.58rem 1.6rem;border-radius:30px;font-size:.875rem;font-weight:600;z-index:9999;opacity:0;pointer-events:none;transition:opacity .3s;white-space:nowrap;box-shadow:0 8px 24px rgba(100,112,255,.4)}
.toast-msg.show{opacity:1}

/* ===== EMPTY ===== */
.empty{text-align:center;padding:3rem;color:var(--muted)}
.empty i{font-size:2.5rem;opacity:.22;display:block;margin-bottom:.875rem}
.empty p{font-size:.9rem}

/* ===== ANIMATIONS ===== */
@keyframes fadeUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
.fu{animation:fadeUp .38s ease forwards}
@keyframes spin{to{transform:rotate(360deg)}}
.spin{animation:spin .8s linear infinite;display:inline-block}

/* ===== SCROLL REVEAL ===== */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .55s cubic-bezier(.4,0,.2,1),transform .55s cubic-bezier(.4,0,.2,1)}
.reveal.visible{opacity:1;transform:translateY(0)}
.reveal-delay-1{transition-delay:.1s}
.reveal-delay-2{transition-delay:.2s}
.reveal-delay-3{transition-delay:.3s}
.reveal-delay-4{transition-delay:.4s}

/* ===== RESPONSIVE ===== */
@media(max-width:768px){
  .hero{padding:3rem 0 2.5rem}
  .hero h1{font-size:2.1rem}
  .stats-row{grid-template-columns:repeat(4,1fr)}
  .site-banner{padding:1.25rem 1.25rem}
  .foot-row{flex-direction:column;text-align:center}
}
@media(max-width:480px){
  .stats-row{grid-template-columns:repeat(2,1fr)}
  .g2,.g3{grid-template-columns:1fr}
}

/* ===== COPY BUTTONS ===== */
.copy-btn {
  background: var(--bg4); border: 1px solid var(--border);
  color: var(--muted); border-radius: 6px;
  padding: .18rem .55rem; font-size: .72rem; font-weight: 500;
  display: inline-flex; align-items: center; gap: .25rem;
  transition: all .2s; white-space: nowrap; flex-shrink: 0;
}
.copy-btn:hover { border-color: var(--primary2); color: var(--primary2); background: var(--bg3) }
.copy-btn i { font-size: .7rem }

.copy-btn-sm {
  background: transparent; border: 1px solid var(--border);
  color: var(--muted); border-radius: 5px;
  padding: .15rem .35rem; font-size: .68rem;
  display: inline-flex; align-items: center;
  transition: all .2s; flex-shrink: 0;
}
.copy-btn-sm:hover { border-color: var(--primary2); color: var(--primary2) }

/* ===== COMPONENTS GRID ===== */
.comp-grid {
  display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .25rem;
}
.comp-item {
  display: inline-flex; align-items: center; gap: .4rem;
  border-radius: 8px; padding: .32rem .8rem;
  font-size: .82rem; font-weight: 500; border: 1px solid;
}
.comp-found {
  background: rgba(34,197,94,.08); border-color: rgba(34,197,94,.25); color: var(--green);
}
.comp-missing {
  background: rgba(122,143,168,.06); border-color: rgba(122,143,168,.15); color: var(--muted);
}

/* ===== MEDIA LABEL ROW ===== */
.media-lbl-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: .28rem .45rem; gap: .25rem;
}
.media-lbl { font-size: .63rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1 }

/* ===== SCREENSHOT BUTTON ===== */
.sb-screenshot {
  display: inline-flex; align-items: center; gap: .35rem;
  color: var(--primary2) !important; transition: all .2s;
}
.sb-screenshot:hover { background: rgba(100,112,255,.28) !important }

/* ===== SEO WARNING ROWS ===== */
.a11y-row { display:flex; align-items:center; gap:.62rem; padding:.58rem .82rem; border-radius:var(--radius-s); margin-bottom:.45rem; font-size:.875rem }

/* ===== COMPARE MODE ===== */
.compare-hero{padding:3.5rem 0 2.5rem;text-align:center;background:radial-gradient(ellipse 60% 40% at 50% 0%,rgba(100,112,255,.14) 0%,transparent 70%)}
.compare-header{margin-bottom:2rem}
.compare-header h2{font-size:1.8rem;font-weight:800;margin-bottom:.5rem}
.compare-inputs{display:flex;align-items:center;gap:1.25rem;flex-wrap:wrap;justify-content:center;max-width:860px;margin:0 auto}
.compare-input-wrap{flex:1;min-width:260px}
.compare-label{display:block;font-size:.8rem;font-weight:700;color:var(--primary2);margin-bottom:.5rem;text-transform:uppercase;letter-spacing:.06em}
.compare-vs{font-size:1.1rem;font-weight:900;color:var(--muted);flex-shrink:0;padding:.5rem}

/* Compare results */
.compare-title-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.75rem;flex-wrap:wrap;gap:1rem}
.compare-site-label{display:flex;align-items:center;gap:.5rem;font-size:1rem;font-weight:700;color:var(--primary2)}
.compare-site-label a{color:var(--primary2)}
.compare-vs-badge{background:linear-gradient(135deg,var(--primary),var(--purple));color:#fff;border-radius:30px;padding:.3rem 1rem;font-size:.85rem;font-weight:800}
.cmp-section{margin-bottom:1.5rem}
.cmp-section-title{font-size:1rem;font-weight:700;margin-bottom:.875rem;color:var(--text)}
.cmp-row{display:grid;grid-template-columns:1fr 1fr;gap:1.25rem}
.cmp-col{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:1.25rem}
.cmp-score-wrap{text-align:center}

/* ===== KEYWORD TABLE ===== */
.kw-table{width:100%}
.kw-header{display:grid;grid-template-columns:1fr 60px 120px;gap:.5rem;padding:.4rem .5rem;font-size:.72rem;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;border-bottom:1px solid var(--border);margin-bottom:.25rem}
.kw-row{display:grid;grid-template-columns:1fr 60px 120px;gap:.5rem;padding:.42rem .5rem;border-radius:6px;font-size:.83rem;transition:background .15s;align-items:center}
.kw-row:hover{background:var(--bg3)}
.kw-word{cursor:pointer;color:var(--text);font-weight:500}
.kw-word:hover{color:var(--primary2)}
.kw-count{color:var(--muted);text-align:center}
.kw-density{display:flex;align-items:center;gap:.5rem;color:var(--muted);font-size:.78rem}
.kw-bar{height:4px;background:linear-gradient(90deg,var(--primary),var(--accent));border-radius:4px;display:inline-block;min-width:2px;flex-shrink:0}

/* ===== MEDIA LABEL WARN ===== */
.media-lbl-warn{color:var(--yellow)!important}

@media(max-width:640px){
  .cmp-row{grid-template-columns:1fr}
  .compare-inputs{flex-direction:column}
  .kw-header,.kw-row{grid-template-columns:1fr 50px 90px}
}

/* ===== AUTHORITY CARDS ===== */
.authority-grid {
  display: grid; grid-template-columns: repeat(2,1fr); gap: .875rem; margin-bottom: 1rem;
}
.auth-card {
  background: var(--bg3); border: 1px solid var(--border);
  border-radius: var(--radius-s); padding: 1.1rem; text-align: center;
  transition: border-color .2s;
}
.auth-card:hover { border-color: var(--border-h) }
.auth-val { font-size: 2rem; font-weight: 900; line-height: 1; margin-bottom: .3rem }
.auth-lbl { font-size: .78rem; font-weight: 700; color: var(--text); text-transform: uppercase; letter-spacing: .05em }
.auth-note { font-size: .68rem; color: var(--muted); margin-top: .2rem }
.auth-note-box {
  background: rgba(100,112,255,.07); border: 1px solid rgba(100,112,255,.18);
  border-radius: var(--radius-s); padding: .75rem 1rem;
  font-size: .8rem; color: var(--muted);
  display: flex; align-items: flex-start; gap: .5rem;
}
.auth-note-box i { color: var(--primary2); flex-shrink: 0; margin-top: .1rem }

/* ===== META TABLE ===== */
.meta-table {
  width: 100%; border-collapse: collapse; font-size: .82rem;
}
.meta-table th {
  text-align: left; padding: .5rem .75rem;
  color: var(--muted); font-size: .72rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .05em;
  border-bottom: 1px solid var(--border);
}
.meta-table td {
  padding: .5rem .75rem; border-bottom: 1px solid var(--border);
  vertical-align: top;
}
.meta-table tr:last-child td { border-bottom: none }
.meta-table tr:hover td { background: var(--bg3) }
.meta-table code {
  background: var(--bg3); border-radius: 4px;
  padding: .1rem .4rem; font-size: .75rem; color: var(--primary2);
}

/* ===== SOCIAL PLATFORM LABEL ===== */
.social-platform {
  background: var(--bg4); border: 1px solid var(--border);
  border-radius: 6px; padding: .1rem .5rem;
  font-size: .72rem; font-weight: 700; color: var(--muted);
  white-space: nowrap; flex-shrink: 0;
}

/* ===== ACTIVE COMPARE BUTTON ===== */
.icon-btn.active-btn {
  color: var(--primary2);
  border-color: var(--primary2);
  background: rgba(100,112,255,.12);
}

/* ===== COMPARE SECTION inside scanner-app ===== */
#compareSection {
  padding: 2.5rem 0;
  background: var(--bg2);
  border-bottom: 1px solid var(--border);
}

/* ===== COMPARE COLUMN HEADERS ===== */
.cmp-col-headers {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 1.25rem; margin-bottom: .5rem;
}
.cmp-col-hdr {
  text-align: center; font-size: .82rem; font-weight: 700;
  color: var(--primary2); padding: .4rem;
  background: rgba(100,112,255,.08);
  border: 1px solid rgba(100,112,255,.2);
  border-radius: var(--radius-s);
}

/* ===== FAVICON BANNER ===== */
.sb-favicon-wrap {
  display: flex; align-items: flex-start; gap: 1.25rem;
}
.sb-favicon {
  width: 52px; height: 52px; border-radius: 10px;
  border: 1px solid var(--border); flex-shrink: 0;
  background: var(--bg3); object-fit: contain;
}
.sb-info { flex: 1; min-width: 0 }
.sb-title { font-size: 1.3rem; font-weight: 800; letter-spacing: -.02em; margin-bottom: .25rem }
.sb-url {
  display: flex; align-items: center; gap: 1rem;
  flex-wrap: wrap; margin-bottom: .4rem;
}
.sb-url a {
  color: var(--primary2); font-size: .875rem; font-weight: 600;
  text-decoration: none; display: flex; align-items: center; gap: .3rem;
  transition: color .2s;
}
.sb-url a:hover { color: var(--accent) }
.sb-scan-time {
  font-size: .75rem; color: var(--muted);
  display: flex; align-items: center; gap: .3rem;
}
.sb-desc { color: var(--muted); font-size: .875rem; line-height: 1.6; margin-bottom: .75rem; max-width: 640px }

/* ===== GROUPED TABS ===== */
.tab-nav-wrap {
  display: flex; align-items: center; gap: .25rem;
  margin-bottom: 1.5rem; position: relative;
}
.tab-scroll-btn {
  width: 30px; height: 30px; border-radius: 8px; flex-shrink: 0;
  background: var(--bg3); border: 1px solid var(--border);
  color: var(--muted); display: flex; align-items: center; justify-content: center;
  font-size: .85rem; transition: all .2s; cursor: pointer;
}
.tab-scroll-btn:hover { color: var(--primary2); border-color: var(--primary2) }

.tabs-bar {
  flex: 1; overflow-x: auto; scrollbar-width: none;
  border-bottom: 1px solid var(--border);
}
.tabs-bar::-webkit-scrollbar { display: none }

.tabs {
  display: flex; align-items: flex-end;
  gap: 0; min-width: max-content; padding-bottom: 0;
}

.tab-group {
  display: flex; align-items: flex-end; gap: .1rem;
  position: relative; padding-top: 1.4rem;
}
.tab-group-label {
  position: absolute; top: 0; left: .5rem;
  font-size: .62rem; font-weight: 700; color: var(--muted);
  text-transform: uppercase; letter-spacing: .08em;
  white-space: nowrap;
}
.tab-group-divider {
  width: 1px; background: var(--border);
  margin: 0 .5rem; height: 32px; align-self: flex-end; flex-shrink: 0;
}

/* ===== NEW SCAN STICKY BAR ===== */
.new-scan-bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding: .6rem 1rem;
  background: var(--bg2); border: 1px solid var(--border);
  border-radius: var(--radius); margin-bottom: 1.25rem;
  position: sticky; top: 58px; z-index: 89;
  backdrop-filter: blur(12px);
  box-shadow: 0 2px 12px rgba(0,0,0,.2);
}
.new-scan-url {
  font-size: .82rem; color: var(--muted); font-weight: 600;
  display: flex; align-items: center; gap: .4rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.new-scan-url::before {
  content: '\F52F';
  font-family: 'Bootstrap-Icons';
  color: var(--primary2);
}
[data-theme="light"] .new-scan-bar { background: rgba(238,242,255,.95) }
@media(max-width:480px) { .new-scan-url { display: none } }

/* ===== KEYBOARD SHORTCUT HINT ===== */
.kbd-hint {
  display: flex; align-items: center;
}
kbd {
  background: var(--bg3); border: 1px solid var(--border);
  border-radius: 5px; padding: .1rem .45rem;
  font-size: .72rem; font-weight: 700; color: var(--muted);
  font-family: monospace; line-height: 1.6;
  box-shadow: 0 1px 0 var(--border);
  transition: color .2s, border-color .2s;
}
kbd:hover { color: var(--primary2); border-color: var(--primary2) }
@media(max-width:640px) { .kbd-hint { display: none } }

/* ===== SCAN AGAIN BUTTON ===== */
.scan-again-btn {
  background: rgba(100,112,255,.12) !important;
  border-color: rgba(100,112,255,.3) !important;
  color: var(--primary2) !important;
  font-weight: 600 !important;
}
.scan-again-btn:hover {
  background: rgba(100,112,255,.22) !important;
  border-color: var(--primary2) !important;
}

/* ===== LOADING SKELETON ===== */
.skeleton {
  background: linear-gradient(90deg, var(--bg3) 25%, var(--bg4) 50%, var(--bg3) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.4s infinite;
  border-radius: 8px;
}
@keyframes shimmer {
  0%   { background-position: 200% 0 }
  100% { background-position: -200% 0 }
}

/* ===== MOBILE RESPONSIVE TABS ===== */
@media (max-width: 640px) {
  .tab-group-label { display: none }
  .tab-group { padding-top: 0 }
  .tab { padding: .6rem .75rem; font-size: .78rem }
  .tab i { display: none }
  .sb-favicon { width: 40px; height: 40px }
  .sb-title { font-size: 1.1rem }
  .tab-scroll-btn { display: flex }
}
@media (min-width: 641px) {
  .tab-scroll-btn { display: none }
}

/* ===== STICKY TAB BAR ===== */
.results-section .tab-nav-wrap {
  position: sticky;
  top: 56px;
  z-index: 90;
  background: var(--bg);
  padding: .5rem 0;
}

/* ===== SMOOTH SLIDING UNDERLINE FOR ACTIVE TAB ===== */
.tabs-bar {
  position: relative;
}
.tab {
  position: relative;
  transition: color .2s, background .2s;
}
.tab::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--primary);
  border-radius: 2px 2px 0 0;
  transform: scaleX(0);
  transition: transform .22s cubic-bezier(.4,0,.2,1);
}
.tab.active::after {
  transform: scaleX(1);
}

/* ===== TAB HOVER BACKGROUND FILL ANIMATION ===== */
.tab:not(.active):hover {
  background: rgba(100,116,255,.08);
  color: var(--primary2);
  border-radius: var(--radius-s) var(--radius-s) 0 0;
}

/* ===== OG PREVIEW CARDS ===== */
.og-previews {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1rem;
  margin-top: .75rem;
}
.og-preview-wrap {}
.og-preview-label {
  font-size: .72rem;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .07em;
  margin-bottom: .4rem;
  display: flex;
  align-items: center;
  gap: .35rem;
}
.og-card {
  border: 1px solid var(--border);
  border-radius: var(--radius-s);
  overflow: hidden;
  background: var(--bg3);
  font-size: .82rem;
}
.og-img-wrap {
  width: 100%;
  max-height: 140px;
  overflow: hidden;
  background: var(--bg4);
}
.og-img-wrap img {
  width: 100%;
  height: 140px;
  object-fit: cover;
}
.og-img-placeholder {
  width: 100%;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg4);
  color: var(--muted);
  font-size: 1.5rem;
}
.og-card-body {
  padding: .6rem .75rem;
}
.og-card-site {
  font-size: .7rem;
  color: var(--muted);
  margin-bottom: .2rem;
  text-transform: uppercase;
  letter-spacing: .05em;
}
.og-card-title {
  font-weight: 700;
  color: var(--text);
  margin-bottom: .2rem;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.og-card-desc {
  color: var(--muted);
  font-size: .78rem;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.og-card-large .og-img-wrap {
  max-height: 180px;
}
.og-card-large .og-img-wrap img {
  height: 180px;
}
/* Google snippet style */
.og-card-google {
  background: var(--bg2);
  border-color: var(--border);
  padding: .75rem;
}
.og-google-title {
  color: #8ab4f8;
  font-size: .95rem;
  font-weight: 600;
  margin-bottom: .15rem;
}
.og-google-url {
  color: #bdc1c6;
  font-size: .72rem;
  margin-bottom: .3rem;
  word-break: break-all;
}
.og-google-desc {
  color: var(--muted);
  font-size: .82rem;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ===== BETTER MOBILE TABS ΓÇö text only on very small screens ===== */
@media (max-width: 420px) {
  .tab i { display: none }
  .tab { padding: .55rem .6rem; font-size: .75rem }
  .tab-group-label { display: none }
  .tab-group { padding-top: 0 }
}


/* ═══ v1.7 ADDITIONS ═══ */

/* Palette strip */
.palette-strip{height:48px;border-radius:var(--radius-s);overflow:hidden;margin-bottom:1.25rem;display:flex;cursor:pointer;box-shadow:0 4px 16px rgba(0,0,0,.3)}
.palette-strip-seg{flex:1;transition:flex .3s}
.palette-strip-seg:hover{flex:3}

/* Site health gauge */
.health-gauge{display:flex;align-items:center;gap:1.5rem;padding:1.25rem 1.5rem;background:var(--bg3);border-radius:var(--radius);margin-bottom:1.25rem;border:1px solid var(--border)}
.health-ring{width:80px;height:80px;border-radius:50%;border:6px solid;display:flex;align-items:center;justify-content:center;font-size:1.4rem;font-weight:900;flex-shrink:0}
.health-info h4{font-size:1rem;font-weight:700;margin-bottom:.25rem}
.health-info p{font-size:.82rem;color:var(--muted);line-height:1.5}

/* Tech categories */
.tech-category{margin-bottom:1.25rem}
.tech-cat-label{font-size:.72rem;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.08em;margin-bottom:.5rem;display:flex;align-items:center;gap:.4rem}
.tech-cat-label::after{content:'';flex:1;height:1px;background:var(--border)}

/* Contact summary */
.contact-summary{display:grid;grid-template-columns:repeat(auto-fit,minmax(100px,1fr));gap:.75rem;margin-bottom:1.25rem}
.cs-card{background:var(--bg3);border:1px solid var(--border);border-radius:var(--radius-s);padding:.875rem;text-align:center;transition:border-color .2s}
.cs-card:hover{border-color:var(--border-h)}
.cs-val{font-size:1.5rem;font-weight:800;color:var(--primary2)}
.cs-lbl{font-size:.7rem;color:var(--muted);margin-top:.2rem}

/* Performance bars */
.perf-bar-row{display:flex;align-items:center;gap:.75rem;padding:.6rem 0;border-bottom:1px solid var(--border);font-size:.875rem}
.perf-bar-row:last-child{border-bottom:none}
.perf-bar-lbl{color:var(--muted);min-width:130px;flex-shrink:0;font-size:.82rem}
.perf-bar-wrap{flex:1;height:6px;background:var(--bg4);border-radius:10px;overflow:hidden}
.perf-bar-fill{height:100%;border-radius:10px;transition:width .6s ease}
.perf-bar-val{font-weight:700;min-width:60px;text-align:right;font-size:.82rem}

/* Loading overlay */
.scan-overlay{position:fixed;inset:0;z-index:9000;background:rgba(7,16,31,.97);backdrop-filter:blur(16px);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.5rem;opacity:0;pointer-events:none;transition:opacity .35s}
.scan-overlay.active{opacity:1;pointer-events:all}
.scan-overlay-icon{font-size:3.5rem;color:var(--primary2);animation:spin 1.5s linear infinite;filter:drop-shadow(0 0 16px rgba(100,112,255,.7))}
.scan-overlay-url{font-size:.9rem;color:var(--muted);max-width:400px;text-align:center;word-break:break-all}
.scan-overlay-msg{font-family:'Space Grotesk',sans-serif;font-size:1.15rem;font-weight:700;color:var(--text)}
.scan-overlay-prog{width:300px;height:4px;background:var(--bg4);border-radius:10px;overflow:hidden;position:relative}
.scan-overlay-fill{height:100%;background:linear-gradient(90deg,var(--primary),var(--accent),var(--purple));background-size:200% 100%;border-radius:10px;transition:width .35s ease;box-shadow:0 0 14px rgba(100,112,255,.6);animation:progShimmer 2s linear infinite}
@keyframes progShimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
/* Radar ring behind overlay icon */
.scan-overlay::before{content:'';position:absolute;width:180px;height:180px;border-radius:50%;border:1px solid rgba(100,112,255,.2);animation:radarRing 2s ease-out infinite}
.scan-overlay::after{content:'';position:absolute;width:280px;height:280px;border-radius:50%;border:1px solid rgba(100,112,255,.1);animation:radarRing 2s .5s ease-out infinite}
@keyframes radarRing{0%{transform:scale(.6);opacity:.8}100%{transform:scale(1.4);opacity:0}}

/* Back to top */
.back-to-top{position:fixed;bottom:2rem;right:2rem;z-index:500;width:42px;height:42px;border-radius:50%;background:linear-gradient(135deg,var(--primary),var(--purple));color:#fff;display:flex;align-items:center;justify-content:center;font-size:1.1rem;box-shadow:0 4px 16px rgba(100,112,255,.4);opacity:0;pointer-events:none;transition:opacity .3s,transform .3s;transform:translateY(10px)}
.back-to-top.visible{opacity:1;pointer-events:all;transform:translateY(0)}
.back-to-top:hover{transform:translateY(-3px)!important}

/* Card left border accent */
.card{border-left:3px solid transparent}
.card:hover{border-left-color:var(--primary)}

/* Better empty states */
.empty{text-align:center;padding:3.5rem 2rem;color:var(--muted)}
.empty i{font-size:3rem;opacity:.2;display:block;margin-bottom:1rem;color:var(--primary2)}
.empty p{font-size:.9rem;margin-bottom:.5rem}

/* Responsive v1.7 */
@media(max-width:768px){
  .health-gauge{flex-direction:column;text-align:center}
  .contact-summary{grid-template-columns:repeat(3,1fr)}
  .scan-overlay-prog{width:240px}
  .back-to-top{bottom:1.25rem;right:1.25rem}
}

/* ═══ Compare Tab Inline ═══ */
.compare-tab-wrap { max-width: 900px; margin: 0 auto }
.compare-tab-inputs {
  display: grid; grid-template-columns: 1fr auto 1fr;
  gap: 1rem; align-items: end; margin-top: 1.25rem;
}
.compare-tab-col { display: flex; flex-direction: column; gap: .5rem }
.compare-tab-vs {
  font-size: 1rem; font-weight: 900; color: var(--muted);
  padding: .5rem; align-self: center; text-align: center;
}
.tab-divider {
  width: 1px; background: var(--border);
  margin: 0 .5rem; height: 28px; align-self: flex-end; flex-shrink: 0;
}
.tab-compare {
  color: var(--purple) !important;
  font-weight: 700 !important;
}
.tab-compare.active { border-bottom-color: var(--purple) !important }
.tab-compare i { color: var(--purple) }
@media(max-width:640px) {
  .compare-tab-inputs { grid-template-columns: 1fr; }
  .compare-tab-vs { display: none }
}

/* ═══ MISSING VARIABLES FIX ═══ */
:root {
  --gradient-primary: linear-gradient(135deg, #6470ff, #a855f7);
  --gradient-accent:  linear-gradient(135deg, #00d4ff, #22c55e);
  --card-hover: rgba(100,116,255,.03);
}
[data-theme="light"] {
  --gradient-primary: linear-gradient(135deg, #5060ee, #7c3aed);
  --gradient-accent:  linear-gradient(135deg, #0099cc, #16a34a);
  --card-hover: rgba(80,96,238,.03);
}

/* ═══ RESPONSIVE FIXES ═══ */

/* Stats row — 4 cols on tablet, 2 on mobile */
@media(max-width:900px) {
  .stats-row { grid-template-columns: repeat(4,1fr) }
}
@media(max-width:560px) {
  .stats-row { grid-template-columns: repeat(2,1fr) }
  .stat-val  { font-size: 1.35rem }
}

/* Tab bar mobile — show scroll hint */
.tabs-bar::after {
  content: '';
  position: absolute; right: 0; top: 0; bottom: 0;
  width: 40px;
  background: linear-gradient(to right, transparent, var(--bg));
  pointer-events: none;
}
[data-theme="light"] .tabs-bar::after {
  background: linear-gradient(to right, transparent, var(--bg));
}

/* Site banner responsive */
@media(max-width:560px) {
  .sb-favicon-wrap { flex-direction: column; gap: .75rem }
  .sb-favicon { width: 44px; height: 44px }
  .sb-title { font-size: 1.1rem }
  .sb-url { flex-direction: column; gap: .35rem; align-items: flex-start }
}

/* Cards responsive */
@media(max-width:560px) {
  .card { padding: 1.1rem }
  .g2, .g3 { grid-template-columns: 1fr }
  .authority-grid { grid-template-columns: repeat(2,1fr) }
}

/* Compare tab inputs mobile */
@media(max-width:640px) {
  .compare-tab-inputs { grid-template-columns: 1fr }
  .compare-tab-vs { display: none }
}

/* Export row mobile */
@media(max-width:560px) {
  .export-row { gap: .35rem; padding: .875rem 1rem }
  .exp-btn { padding: .32rem .65rem; font-size: .75rem }
  .scan-again-btn { width: 100%; justify-content: center; margin-bottom: .25rem }
}

/* Health gauge mobile */
@media(max-width:560px) {
  .health-gauge { flex-direction: column; text-align: center; padding: 1rem }
  .health-ring { width: 70px; height: 70px; font-size: 1.2rem }
}

/* Keyword table mobile */
@media(max-width:480px) {
  .kw-header, .kw-row { grid-template-columns: 1fr 45px }
  .kw-density { display: none }
}

/* OG previews mobile */
@media(max-width:640px) {
  .og-previews { grid-template-columns: 1fr }
}

/* ═══ LIGHT MODE FIXES ═══ */
[data-theme="light"] .hero h1 {
  background: linear-gradient(135deg, #0f172a 0%, #5060ee 55%, #0099cc 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
/* Cards */
[data-theme="light"] .card { background: #fff; border-color: rgba(80,96,238,.14); box-shadow: 0 2px 12px rgba(80,96,238,.06) }
[data-theme="light"] .card:hover { box-shadow: 0 6px 24px rgba(80,96,238,.12) }
[data-theme="light"] .stat-card { background: #fff; border-color: rgba(80,96,238,.14) }
[data-theme="light"] .site-banner { background: #fff; border-color: rgba(80,96,238,.14) }
[data-theme="light"] .health-gauge { background: #f0f3ff; border-color: rgba(80,96,238,.14) }

/* List items */
[data-theme="light"] .litem { background: #f0f3ff; border-color: rgba(80,96,238,.14) }
[data-theme="light"] .cta-row { background: #f0f3ff; border-color: rgba(80,96,238,.14) }
[data-theme="light"] .font-row { background: #f0f3ff; border-color: rgba(80,96,238,.14) }
[data-theme="light"] .tech-chip { background: #f0f3ff; border-color: rgba(80,96,238,.14) }
[data-theme="light"] .auth-card { background: #f0f3ff; border-color: rgba(80,96,238,.14) }
[data-theme="light"] .cs-card   { background: #f0f3ff; border-color: rgba(80,96,238,.14) }
[data-theme="light"] pre { background: #f0f3ff; border-color: rgba(80,96,238,.14); color: #2d3a5a }
[data-theme="light"] .kw-row:hover { background: #f0f3ff }
[data-theme="light"] .a11y-ok { background: rgba(22,163,74,.07); border-color: rgba(22,163,74,.2) }
[data-theme="light"] .a11y-warn { background: rgba(217,119,6,.07); border-color: rgba(217,119,6,.2) }

/* Scan overlay */
[data-theme="light"] .scan-overlay { background: rgba(245,247,255,.97) }
[data-theme="light"] .scan-overlay-msg { color: #0f172a }

/* Tabs */
[data-theme="light"] .tab:hover { background: rgba(80,96,238,.07) }
[data-theme="light"] .tab.active { color: var(--primary2) }
[data-theme="light"] .tabs-bar::after { background: linear-gradient(to right, transparent, var(--bg)) }
[data-theme="light"] .tab-nav-wrap { background: var(--bg) }

/* New scan bar */
[data-theme="light"] .new-scan-bar { background: rgba(255,255,255,.95); border-color: rgba(80,96,238,.15) }

/* Export row */
[data-theme="light"] .export-row { background: #fff; border-color: rgba(80,96,238,.14) }
[data-theme="light"] .exp-btn { background: #f0f3ff; border-color: rgba(80,96,238,.18); color: #2d3a5a }
[data-theme="light"] .exp-btn:hover { background: #e4e9ff; border-color: var(--primary2); color: var(--primary2) }

/* Score rings */
[data-theme="light"] .score-ring.sg { box-shadow: 0 0 20px rgba(22,163,74,.15) }
[data-theme="light"] .score-ring.so { box-shadow: 0 0 20px rgba(217,119,6,.15) }
[data-theme="light"] .score-ring.sb { box-shadow: 0 0 20px rgba(220,38,38,.15) }

/* Landing sections */
[data-theme="light"] .lp-section-alt { background: #f0f3ff }
[data-theme="light"] .lp-metrics-bar { background: #f0f3ff }
[data-theme="light"] .lp-cta-section {
  background: radial-gradient(ellipse 100% 100% at 50% 0%, rgba(80,96,238,.15) 0%, rgba(124,58,237,.1) 40%, #f5f7ff 100%);
}
[data-theme="light"] .feat-card { background: #fff; border-color: rgba(80,96,238,.14) }
[data-theme="light"] .feat-card:hover { box-shadow: 0 24px 64px rgba(80,96,238,.15) }
[data-theme="light"] .step-card { background: #fff; border-color: rgba(80,96,238,.14) }
[data-theme="light"] .who-card { background: #fff; border-color: rgba(80,96,238,.14) }
[data-theme="light"] .compare-mock { background: #fff; border-color: rgba(80,96,238,.14) }
[data-theme="light"] .lp-dashboard-mock { background: #fff; border-color: rgba(80,96,238,.2) }
[data-theme="light"] .mock-topbar { background: #f0f3ff }
[data-theme="light"] .stats-ticker-wrap { background: rgba(80,96,238,.05); border-color: rgba(80,96,238,.12) }
[data-theme="light"] .stats-ticker-wrap::before { background: linear-gradient(90deg, #f5f7ff 0%, transparent 100%) }
[data-theme="light"] .stats-ticker-wrap::after  { background: linear-gradient(270deg, #f5f7ff 0%, transparent 100%) }

/* Tool cards */
[data-theme="light"] .tool-card { background: #fff; border-color: rgba(80,96,238,.14) }
[data-theme="light"] .tool-card:hover { box-shadow: 0 20px 50px rgba(80,96,238,.15) }

/* Compare */
[data-theme="light"] .cmp-col { background: #fff; border-color: rgba(80,96,238,.14) }
[data-theme="light"] .compare-mock-header { background: #f0f3ff }

/* Palette strip */
[data-theme="light"] .palette-strip { box-shadow: 0 2px 12px rgba(80,96,238,.12) }

/* Swatch */
[data-theme="light"] .swatch { border-color: rgba(0,0,0,.08) }

/* Footer */
[data-theme="light"] .lp-footer { background: #f0f3ff }
[data-theme="light"] .lp-footer-bottom { border-color: rgba(80,96,238,.12) }
[data-theme="light"] .foot { border-color: rgba(80,96,238,.12) }

/* ═══ GENERAL POLISH ═══ */

/* Smoother card transitions */
.card { transition: border-color .2s, border-left-color .2s, box-shadow .2s }

/* Better focus states */
button:focus-visible, input:focus-visible {
  outline: 2px solid var(--primary2);
  outline-offset: 2px;
}

/* Scan button pulse when idle */
@keyframes btnPulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(100,112,255,.4) }
  50%      { box-shadow: 0 0 0 8px rgba(100,112,255,0) }
}
.scan-btn:not(:disabled) { animation: btnPulse 3s ease-in-out infinite }
.scan-btn:hover, .scan-btn:disabled { animation: none }

/* Smooth tab content transitions */
.fu { animation: fadeUp .3s ease forwards }

/* Better scrollbar on tabs */
.tabs-bar { position: relative }

/* ═══ TAB BAR RESPONSIVE FIX ═══ */

/* Make tab nav wrap sticky and full width */
.tab-nav-wrap {
  position: sticky;
  top: 56px;
  z-index: 90;
  background: var(--bg);
  padding: .5rem 0 0;
  margin-left: -1.5rem;
  margin-right: -1.5rem;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  border-bottom: 1px solid var(--border);
}

/* Tabs bar takes full width */
.tabs-bar {
  flex: 1;
  overflow-x: auto;
  scrollbar-width: none;
  border-bottom: none;
  margin-bottom: 0;
}
.tabs-bar::-webkit-scrollbar { display: none }

/* Tabs row */
.tabs {
  display: flex;
  align-items: flex-end;
  gap: 0;
  min-width: max-content;
  padding-bottom: 0;
}

/* Individual tab */
.tab {
  display: flex;
  align-items: center;
  gap: .35rem;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--muted);
  padding: .65rem .9rem;
  font-size: .8rem;
  font-weight: 500;
  white-space: nowrap;
  transition: color .2s, background .2s;
  margin-bottom: -1px;
  cursor: pointer;
  position: relative;
}
.tab i { font-size: .85rem }
.tab:hover { color: var(--primary2); background: rgba(100,116,255,.06); border-radius: 6px 6px 0 0 }
.tab.active { color: var(--primary2); border-bottom-color: var(--primary) }
.tab-compare { color: var(--purple) !important }
.tab-compare.active { border-bottom-color: var(--purple) !important }
.tab-divider { width: 1px; background: var(--border); margin: 0 .4rem; height: 24px; align-self: center; flex-shrink: 0 }

/* Scroll buttons always visible on mobile */
.tab-scroll-btn {
  width: 28px; height: 28px; border-radius: 6px; flex-shrink: 0;
  background: var(--bg3); border: 1px solid var(--border);
  color: var(--muted); display: flex; align-items: center; justify-content: center;
  font-size: .8rem; transition: all .2s; cursor: pointer; align-self: center;
}
.tab-scroll-btn:hover { color: var(--primary2); border-color: var(--primary2) }

@media (max-width: 900px) {
  .tab-scroll-btn { display: flex !important }
  .tab { padding: .6rem .7rem; font-size: .78rem }
}
@media (max-width: 560px) {
  .tab { padding: .55rem .6rem; font-size: .75rem }
  .tab i { display: none }
  .tab-group-label { display: none }
}

/* ═══ FEATURE CARD TRY BUTTON ═══ */
.feat-try {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  margin-top: 1rem;
  font-size: .8rem;
  font-weight: 600;
  color: var(--primary2);
  opacity: 0;
  transform: translateY(4px);
  transition: opacity .2s, transform .2s;
}
.feat-card:hover .feat-try {
  opacity: 1;
  transform: translateY(0);
}
.feat-card { cursor: pointer }

/* ===== SCAN HISTORY ===== */
.history-bar {
  display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
  margin-top: .75rem; padding: .5rem .75rem;
  background: var(--bg3); border: 1px solid var(--border);
  border-radius: var(--radius-s); animation: fadeUp .3s ease;
}
.history-label {
  font-size: .72rem; font-weight: 700; color: var(--muted);
  text-transform: uppercase; letter-spacing: .06em; flex-shrink: 0;
  display: flex; align-items: center; gap: .3rem;
}
.history-item {
  display: inline-flex; align-items: center; gap: .35rem;
  background: var(--bg4); border: 1px solid var(--border);
  color: var(--muted); border-radius: 20px;
  padding: .2rem .7rem; font-size: .78rem; font-weight: 500;
  transition: all .2s; cursor: pointer;
}
.history-item:hover { border-color: var(--primary2); color: var(--primary2); background: var(--bg3) }
.history-clear {
  margin-left: auto; color: var(--muted); font-size: .75rem;
  padding: .2rem .4rem; border-radius: 6px; transition: color .2s;
  flex-shrink: 0;
}
.history-clear:hover { color: var(--red) }

/* ===== SITE BANNER ACTIONS ===== */
.sb-actions {
  display: flex; gap: .5rem; flex-wrap: wrap; margin-top: .75rem;
}
.sb-readability {
  font-size: .78rem; font-weight: 600;
  display: flex; align-items: center; gap: .3rem;
}

/* ===== OG SOCIAL PREVIEW ===== */
.og-preview {
  display: flex; gap: 1rem; align-items: flex-start;
  margin-top: 1.25rem; padding: 1rem;
  background: var(--bg3); border: 1px solid var(--border);
  border-radius: var(--radius-s); overflow: hidden;
}
.og-img {
  width: 120px; height: 72px; object-fit: cover;
  border-radius: 8px; flex-shrink: 0; border: 1px solid var(--border);
}
.og-text { flex: 1; min-width: 0 }
.og-label {
  font-size: .65rem; font-weight: 700; color: var(--muted);
  text-transform: uppercase; letter-spacing: .08em; margin-bottom: .3rem;
}
.og-title {
  font-size: .9rem; font-weight: 700; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  margin-bottom: .25rem;
}
.og-desc {
  font-size: .78rem; color: var(--muted); line-height: 1.5;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.og-domain {
  font-size: .72rem; color: var(--primary2); margin-top: .35rem;
  font-weight: 600;
}
@media(max-width:480px) {
  .og-preview { flex-direction: column }
  .og-img { width: 100%; height: 140px }
}

/* ===== TOOLS PAGE ===== */
.tools-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1.25rem;margin-bottom:2rem}
.tool-card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:1.75rem;cursor:pointer;transition:transform .3s,box-shadow .3s,border-color .3s;position:relative;overflow:hidden;border-left:3px solid var(--tc,var(--primary))}
.tool-card::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:var(--tc,var(--primary));transform:scaleX(0);transition:transform .3s;transform-origin:left}
.tool-card:hover{transform:translateY(-6px);box-shadow:0 20px 50px rgba(0,0,0,.4);border-color:var(--border-h)}
.tool-card:hover::before{transform:scaleX(1)}
.tool-card.active{border-color:var(--tc,var(--primary));box-shadow:0 0 0 2px var(--tc,var(--primary))40}
.tool-icon{width:52px;height:52px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:1.4rem;margin-bottom:1rem;transition:transform .3s}
.tool-card:hover .tool-icon{transform:scale(1.1) rotate(-5deg)}
.tool-card h3{font-family:'Space Grotesk',sans-serif;font-size:1rem;font-weight:700;margin-bottom:.4rem;color:var(--text)}
.tool-card p{font-size:.82rem;color:var(--muted);line-height:1.55}
.tool-open{display:inline-flex;align-items:center;gap:.3rem;margin-top:.875rem;font-size:.8rem;font-weight:700;color:var(--tc,var(--primary2));opacity:0;transform:translateX(-4px);transition:opacity .2s,transform .2s}
.tool-card:hover .tool-open{opacity:1;transform:translateX(0)}

/* ===== SCAN SKELETON LOADER ===== */
.skeleton-banner {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 1.75rem 2rem;
  margin-bottom: 1.5rem;
}
.skeleton-line {
  height: 14px; border-radius: 6px; margin-bottom: .75rem;
  background: linear-gradient(90deg, var(--bg3) 25%, var(--bg4) 50%, var(--bg3) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.4s infinite;
}
.skeleton-line.lg { height: 22px; width: 55% }
.skeleton-line.md { height: 14px; width: 80% }
.skeleton-line.sm { height: 10px; width: 40% }
.skeleton-stats {
  display: grid; grid-template-columns: repeat(auto-fit,minmax(118px,1fr));
  gap: .875rem; margin-bottom: 1.75rem;
}
.skeleton-stat {
  height: 100px; border-radius: var(--radius);
  background: linear-gradient(90deg, var(--bg3) 25%, var(--bg4) 50%, var(--bg3) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.4s infinite;
}
.skeleton-stat:nth-child(2) { animation-delay: .1s }
.skeleton-stat:nth-child(3) { animation-delay: .2s }
.skeleton-stat:nth-child(4) { animation-delay: .3s }

/* ===== FEAT TOGGLE BUTTON ===== */
.feat-toggle-btn {
  display: inline-flex; align-items: center; gap: .5rem;
  background: var(--bg3); border: 1px solid var(--border);
  color: var(--primary2); border-radius: 30px;
  padding: .6rem 1.5rem; font-size: .875rem; font-weight: 700;
  cursor: pointer; transition: all .25s;
  font-family: inherit;
}
.feat-toggle-btn:hover {
  background: var(--bg4); border-color: var(--primary2);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(100,112,255,.2);
}
[data-theme="light"] .feat-toggle-btn { background: #fff; border-color: rgba(80,96,238,.2) }
[data-theme="light"] .feat-toggle-btn:hover { background: #f0f3ff }

/* ===== LOADING SKELETON ===== */
.skeleton-wrap {
  padding: 2rem 0;
}
.skeleton-banner {
  height: 120px; border-radius: var(--radius); margin-bottom: 1.25rem;
}
.skeleton-stats {
  display: grid; grid-template-columns: repeat(auto-fit,minmax(118px,1fr));
  gap: .875rem; margin-bottom: 1.75rem;
}
.skeleton-stat { height: 90px; border-radius: var(--radius) }
.skeleton-tabs { height: 44px; border-radius: var(--radius-s); margin-bottom: 1.5rem }
.skeleton-card { height: 200px; border-radius: var(--radius); margin-bottom: 1.25rem }
.skeleton-card-sm { height: 120px; border-radius: var(--radius) }
.skeleton-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem;
}

/* ===== HIDE ON SMALL SCREENS ===== */
@media(max-width:480px) { .hide-xs { display: none } }