/* ── BrChecker 2.0 — Dark Theme ── */
:root {
  --bg: #0d0f14;
  --surface: #141720;
  --surface2: #1a1e2a;
  --border: #252a38;
  --text: #e0e3ed;
  --muted: #7a8099;
  --accent: #6c8cff;
  --green: #34d399;
  --orange: #fbbf24;
  --red: #f87171;
  --cyan: #22d3ee;
  --pass-bg: rgba(52,211,153,.08);
  --warn-bg: rgba(251,191,36,.08);
  --fail-bg: rgba(248,113,113,.08);
  --pass-border: rgba(52,211,153,.25);
  --warn-border: rgba(251,191,36,.25);
  --fail-border: rgba(248,113,113,.25);
}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;background:var(--bg);color:var(--text);line-height:1.6;min-height:100vh}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}

/* ── No-JS ── */
.noscript{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100vh;text-align:center;padding:24px;gap:16px}
.noscript h1{font-size:2rem}
.noscript p{color:var(--muted);max-width:400px}

/* ── Header ── */
header{position:sticky;top:0;z-index:100;background:rgba(13,15,20,.95);backdrop-filter:blur(12px);border-bottom:1px solid var(--border)}
.header-inner{max-width:1100px;margin:0 auto;padding:0 24px;display:flex;align-items:center;justify-content:space-between;height:52px}
.logo{font-weight:700;font-size:1.1rem;color:var(--accent)}
.tabs{display:flex;gap:4px}
.tab{background:none;border:none;color:var(--muted);padding:6px 16px;border-radius:8px;cursor:pointer;font-size:.85rem;transition:.15s}
.tab:hover{color:var(--text);background:var(--surface)}
.tab.active{color:var(--text);background:var(--surface2);font-weight:600}
.badge{display:inline-block;background:var(--red);color:#fff;font-size:.65rem;padding:1px 6px;border-radius:10px;margin-left:4px;font-weight:700;vertical-align:middle}
.tab-actions{display:flex;gap:4px;margin-left:auto}
.btn-sm{background:var(--surface2);border:1px solid var(--border);color:var(--muted);padding:4px 10px;border-radius:6px;cursor:pointer;font-size:.72rem;transition:.15s;white-space:nowrap}
.btn-sm:hover{color:var(--text);background:var(--border)}

/* ── Score Bar ── */
#score-bar{background:var(--surface);border-bottom:1px solid var(--border);padding:20px 0}
.score-inner{max-width:1100px;margin:0 auto;padding:0 24px;display:flex;align-items:center;gap:24px}
.score-circle{width:80px;height:80px;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;border:3px solid var(--muted);flex-shrink:0;transition:.3s}
.score-circle span{font-size:1.4rem;font-weight:800}
.score-circle small{font-size:.55rem;color:var(--muted);letter-spacing:.5px}
.score-info{flex:1}
#score-status{font-size:1.1rem;font-weight:600;margin-bottom:6px}
#score-sub{font-size:.8rem;color:var(--muted);margin-top:6px}
.progress-bar{height:6px;background:var(--surface2);border-radius:3px;overflow:hidden}
.progress-fill{height:100%;width:0;background:var(--accent);border-radius:3px;transition:.3s;width:0%}
.btn-rerun{background:var(--surface2);border:1px solid var(--border);color:var(--text);width:36px;height:36px;border-radius:8px;cursor:pointer;font-size:1.1rem;flex-shrink:0;transition:.15s}
.btn-rerun:hover{background:var(--border)}

/* ── Tabs ── */
.tab-content{display:none}
.tab-content.active{display:block}

/* ── Container ── */
.container{max-width:1100px;margin:0 auto;padding:0 24px}

/* ── Check Sections ── */
.check-section{margin:24px 0;background:var(--surface);border:1px solid var(--border);border-radius:12px;overflow:hidden}
.section-header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--border);cursor:pointer;user-select:none}
.section-header:hover{background:var(--surface2)}
.section-header h2{font-size:1rem;font-weight:600}
.section-status{font-size:1.2rem}
.section-count{font-size:.75rem;color:var(--muted);font-weight:400;margin-left:6px}
.section-body{padding:16px 20px}
.section-body.collapsed{display:none}

/* ── Check Rows ── */
.check-row{display:flex;align-items:flex-start;gap:12px;padding:10px 0;border-bottom:1px solid rgba(37,42,56,.5)}
.check-row:last-child{border-bottom:none}
.check-icon{width:24px;height:24px;border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:.75rem;flex-shrink:0;margin-top:2px}
.check-icon.pass{background:var(--pass-bg);color:var(--green)}
.check-icon.warn{background:var(--warn-bg);color:var(--orange)}
.check-icon.fail{background:var(--fail-bg);color:var(--red)}
.check-icon.pending{background:var(--surface2);color:var(--muted)}
.check-content{flex:1}
.check-label{font-size:.85rem;font-weight:500;margin-bottom:2px}
.check-value{font-size:.78rem;color:var(--muted);word-break:break-all}
.check-value .highlight{color:var(--orange);font-weight:600}
.check-value .error{color:var(--red);font-weight:600}
.check-value .ok{color:var(--green);font-weight:600}

/* ── Sub-grid for key-value pairs ── */
.kv-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:8px;margin-top:8px}
.kv-item{background:var(--surface2);border-radius:6px;padding:8px 10px}
.kv-key{font-size:.65rem;color:var(--muted);text-transform:uppercase;letter-spacing:.5px;margin-bottom:2px}
.kv-val{font-size:.82rem;word-break:break-all}

/* ── Details Tab ── */
.details-placeholder{text-align:center;padding:80px 24px;color:var(--muted)}
.details-placeholder h2{font-size:1.4rem;margin-bottom:8px}
.details-header{display:flex;align-items:center;gap:12px;padding:24px 0 16px}
.details-header h2{font-size:1.2rem}
.details-content{padding-bottom:48px}
#details-table{width:100%;border-collapse:collapse;font-size:.82rem}
#details-table th{background:var(--surface);color:var(--accent);padding:10px 14px;text-align:left;border:1px solid var(--border);font-weight:600;position:sticky;top:52px}
#details-table td{padding:10px 14px;border:1px solid var(--border);vertical-align:top}
#details-table tr:nth-child(even) td{background:rgba(20,22,32,.5)}
.param-name{font-weight:600;color:var(--orange);white-space:nowrap}
.param-why{color:var(--red);font-size:.78rem}
.param-source{font-size:.72rem;color:var(--muted)}

/* ── Score colors ── */
.score-green{border-color:var(--green)!important}
.score-green span{color:var(--green)}
.score-orange{border-color:var(--orange)!important}
.score-orange span{color:var(--orange)}
.score-red{border-color:var(--red)!important}
.score-red span{color:var(--red)}

/* ── Score pop animation ── */
@keyframes score-pop{0%{transform:scale(.5);opacity:0}60%{transform:scale(1.15)}100%{transform:scale(1);opacity:1}}
.score-pop{animation:score-pop .5s ease-out}

/* ── Verdict ── */
.verdict{margin-top:10px;padding:10px 16px;border-radius:8px;font-size:.85rem;font-weight:600;line-height:1.4}
.verdict-green{background:rgba(52,211,153,.1);border:1px solid rgba(52,211,153,.3);color:var(--green)}
.verdict-orange{background:rgba(251,191,36,.1);border:1px solid rgba(251,191,36,.3);color:var(--orange)}
.verdict-red{background:rgba(248,113,113,.1);border:1px solid rgba(248,113,113,.3);color:var(--red)}

/* ── Behavior Prompt ── */
.behavior-prompt{position:sticky;top:52px;z-index:90;background:linear-gradient(135deg,rgba(108,140,255,.12),rgba(34,211,238,.12));border-bottom:1px solid var(--border);padding:12px 0}
.bp-inner{max-width:1100px;margin:0 auto;padding:0 24px;display:flex;align-items:center;gap:10px;font-size:.85rem}
.bp-icon{font-size:1.3rem;animation:bp-bounce 1.5s ease-in-out infinite}
.bp-text{flex:1;color:var(--text)}
.bp-timer{background:var(--accent);color:#fff;font-weight:700;font-size:.9rem;width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;animation:bp-pulse 1s ease-in-out infinite}
@keyframes bp-bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
@keyframes bp-pulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.1);opacity:.8}}

/* ── Section scanning effect ── */
.section-scanning{position:relative}
.section-scanning::after{content:'';position:absolute;left:0;right:0;top:0;height:2px;background:linear-gradient(90deg,transparent,var(--accent),transparent);animation:scan-line 1.5s ease-in-out infinite;pointer-events:none;border-radius:12px 12px 0 0}
@keyframes scan-line{0%{top:0;opacity:0}10%{opacity:1}90%{opacity:1}100%{top:100%;opacity:0}}

/* ── Section status colors ── */
.section-pass{border-left:3px solid var(--green)}
.section-warn{border-left:3px solid var(--orange)}
.section-fail{border-left:3px solid var(--red)}

/* ── Check row appear animation ── */
@keyframes check-appear{0%{opacity:0;transform:translateY(-8px)}100%{opacity:1;transform:translateY(0)}}
.check-row{animation:check-appear .3s ease-out}

/* ── Progress bar shimmer ── */
.progress-fill{position:relative;overflow:hidden}
.progress-fill::after{content:'';position:absolute;top:0;left:-100%;width:50%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.15),transparent);animation:progress-shimmer 2s ease-in-out infinite}
@keyframes progress-shimmer{0%{left:-100%}100%{left:200%}}

/* ── Footer ── */
footer{padding:32px 24px;text-align:center;color:var(--muted);font-size:.78rem;border-top:1px solid var(--border)}

/* ── Score meta (confidence, resistance) ── */
.score-meta{display:flex;gap:16px;margin-top:6px;font-size:.75rem;color:var(--muted)}
.score-meta strong{color:var(--text);font-weight:600}

/* ── Section description ── */
.section-desc{font-size:.82rem;color:var(--muted);margin:8px 0 16px;line-height:1.5}

/* ── Lies table ── */
#lies-table{width:100%;border-collapse:collapse;font-size:.82rem;margin-bottom:32px}
#lies-table th{background:var(--surface);color:var(--accent);padding:10px 14px;text-align:left;border:1px solid var(--border);font-weight:600}
#lies-table td{padding:10px 14px;border:1px solid var(--border);vertical-align:top}
#lies-table tr:nth-child(even) td{background:rgba(20,22,32,.5)}

/* ── Resistance table ── */
#resistance-table{width:100%;border-collapse:collapse;font-size:.82rem;max-width:600px}
#resistance-table th{background:var(--surface);color:var(--accent);padding:10px 14px;text-align:left;border:1px solid var(--border);font-weight:600}
#resistance-table td{padding:10px 14px;border:1px solid var(--border);vertical-align:top}
#resistance-table tr:nth-child(even) td{background:rgba(20,22,32,.5)}

/* ── Severity classes for details table ── */
.severity-fail{color:var(--red)!important;font-weight:700}
.severity-warn{color:var(--orange)!important;font-weight:600}

/* ── Prediction Module ── */
.prediction-box{margin:20px 0;padding:20px 24px;border-radius:12px;border:2px solid var(--border);transition:.3s}
.prediction-green{background:rgba(52,211,153,.08);border-color:rgba(52,211,153,.35)}
.prediction-orange{background:rgba(251,191,36,.08);border-color:rgba(251,191,36,.35)}
.prediction-red{background:rgba(248,113,113,.08);border-color:rgba(248,113,113,.35)}
.prediction-blue{background:rgba(108,140,255,.08);border-color:rgba(108,140,255,.35)}
.prediction-purple{background:rgba(168,85,247,.08);border-color:rgba(168,85,247,.35)}
.prediction-main-row{display:flex;align-items:center;gap:16px}
.prediction-icon{font-size:2.2rem;flex-shrink:0}
.prediction-main-info{flex:1}
.prediction-main-info .prediction-label,.prediction-conf-wrap .prediction-label{display:block;font-size:.7rem;color:var(--muted);text-transform:uppercase;letter-spacing:.5px;margin-bottom:2px}
.prediction-value{font-size:1.3rem;font-weight:700}
.prediction-conf-wrap{text-align:right}
.prediction-conf{font-size:1.3rem;font-weight:700;color:var(--accent)}
.prediction-reasons-wrap{margin-top:20px}
.prediction-reasons-wrap h3,.prediction-alternatives-wrap h3{font-size:.9rem;font-weight:600;margin-bottom:10px;color:var(--text)}
.prediction-reasons{list-style:none;padding:0;margin:0}
.prediction-reasons li{position:relative;padding:6px 0 6px 20px;font-size:.82rem;color:var(--muted);border-bottom:1px solid rgba(37,42,56,.4)}
.prediction-reasons li:last-child{border-bottom:none}
.prediction-reasons li::before{content:'→';position:absolute;left:0;color:var(--accent);font-weight:700}
.prediction-alternatives-wrap{margin-top:20px}
.prediction-alternatives{display:flex;flex-direction:column;gap:8px}
.prediction-alt-row{display:flex;align-items:center;gap:12px}
.prediction-alt-label{font-size:.8rem;color:var(--muted);min-width:240px;flex-shrink:0}
.prediction-bar-wrap{flex:1;height:8px;background:var(--surface2);border-radius:4px;overflow:hidden}
.prediction-bar{height:100%;border-radius:4px;transition:.5s}
.prediction-bar-high{background:var(--green)}
.prediction-bar-mid{background:var(--orange)}
.prediction-bar-low{background:var(--muted)}
.prediction-alt-score{font-size:.78rem;font-weight:600;color:var(--text);min-width:36px;text-align:right}

/* ── Responsive ── */
@media(max-width:768px){
  .header-inner{flex-wrap:wrap;height:auto;padding:12px 16px;gap:8px}
  .tabs{width:100%;justify-content:flex-end}
  .score-inner{padding:0 16px;gap:16px}
  .score-circle{width:64px;height:64px}
  .score-circle span{font-size:1.1rem}
  .container{padding:0 16px}
  .kv-grid{grid-template-columns:1fr}
  #details-table{font-size:.72rem}
  #details-table th,#details-table td{padding:6px 8px}
  .bp-inner{padding:0 16px;font-size:.78rem}
  .verdict{font-size:.78rem;padding:8px 12px}
  .prediction-main-row{flex-wrap:wrap;gap:10px}
  .prediction-alt-label{min-width:auto;font-size:.72rem}
  .prediction-value,.prediction-conf{font-size:1rem}
}