html[data-theme="light"]{
  color-scheme: light;
  --bg:#f6f8fc;
  --panel:#ffffff;
  --card:#f2f5fb;
  --text:#0b1220;
  --muted:#42526e;
  --line:#d6deee;
  --shadow: 0 18px 60px rgba(15,20,40,.12);

  /* component surfaces */
  --topbar-bg: rgba(246,248,252,.86);
  --topbar-border: rgba(214,222,238,.90);
  /* minimalistic: avoid heavy “glass” gradients in light mode */
  --panel-glass: rgba(255,255,255,.92);
  --border-strong: rgba(214,222,238,.95);
  --input-bg: rgba(255,255,255,.92);
  --chip-bg: rgba(15,20,40,.06);

  /* generic surfaces */
  --surface-1: rgba(255,255,255,.96);
  --surface-2: rgba(255,255,255,.88);
  --surface-3: rgba(15,20,40,.03);
  --border: rgba(214,222,238,.95);
  --border-soft: rgba(214,222,238,.85);
  --btn-bg: rgba(255,255,255,.90);
  --btn-border: rgba(214,222,238,.95);
  --btn-ghost-border: rgba(15,20,40,.16);
}

/* Light mode: keep background very subtle (less “marketing gradient”, more SaaS) */
html[data-theme="light"] body{
  background:
    radial-gradient(900px 600px at 18% 12%, rgba(12,113,195,.08), transparent 60%),
    radial-gradient(800px 560px at 82% 18%, rgba(25,195,125,.06), transparent 55%),
    var(--bg);
}

:root{
  color-scheme: dark;

  --bg:#070b12;
  --panel:#0b1220;
  --card:#0f1a2e;
  --text:#e8eefc;
  --muted:#a8b3cc;
  --line:#1f2b45;
  --brand:#0c71c3;
  --brand2:#2b8fff;
  --danger:#ff3b4e;
  --ok:#19c37d;
  --warn:#f5c542;
  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --shadow: 0 18px 60px rgba(0,0,0,.35);

  /* component surfaces */
  --topbar-bg: rgba(7,11,18,.65);
  --topbar-border: rgba(31,43,69,.65);
  --panel-glass: linear-gradient(180deg, rgba(15,26,46,.9), rgba(11,18,32,.9));
  --border-strong: rgba(31,43,69,.9);
  --input-bg: rgba(7,11,18,.6);
  --chip-bg: rgba(255,255,255,.06);

  /* generic surfaces */
  --surface-1: rgba(15,26,46,.55);
  --surface-2: rgba(7,11,18,.55);
  --surface-3: rgba(255,255,255,.04);
  --border: rgba(31,43,69,.9);
  --border-soft: rgba(255,255,255,.12);
  --btn-bg: rgba(15,26,46,.7);
  --btn-border: rgba(31,43,69,.9);
  --btn-ghost-border: rgba(255,255,255,.18);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji","Segoe UI Emoji";
  background: radial-gradient(1200px 800px at 20% 10%, rgba(12,113,195,.25), transparent 60%),
              radial-gradient(900px 700px at 80% 20%, rgba(25,195,125,.15), transparent 55%),
              var(--bg);
  color:var(--text);
  line-height:1.5;
}
a{color:var(--brand2); text-decoration:none}
a:hover{text-decoration:underline}
.wrap{max-width:1120px; margin:0 auto; padding:24px}
.topbar{
  position:sticky; top:0; z-index:20;
  backdrop-filter: blur(10px);
  background: var(--topbar-bg);
  border-bottom:1px solid var(--topbar-border);
}
.topbar__inner{display:flex; align-items:center; justify-content:space-between; gap:16px; padding:14px 24px}
.topbar__controls{display:flex; align-items:center; gap:10px}
.brand{display:flex; align-items:center; gap:10px; font-weight:700; color:var(--text)}
.topnav{display:flex; gap:14px; font-size:14px}
.topnav a{color:var(--muted)}
.topnav a:hover{color:var(--text); text-decoration:none}

.hero{display:grid; grid-template-columns: 1.05fr .95fr; gap:20px; padding-top:24px}
.hero__copy h1{font-size:42px; line-height:1.1; margin:0 0 10px}
.lede{color:var(--muted); margin:0 0 14px}
.bullets{margin:0; padding-left:18px; color:var(--muted)}
.bullets li{margin:6px 0}
.hero__card{
  background: var(--panel-glass);
  border:1px solid var(--border-strong);
  border-radius:18px;
  padding:18px;
  box-shadow: var(--shadow);
}
.label{display:block; font-size:13px; color:var(--muted); margin-bottom:8px; letter-spacing:.02em}
.row{display:flex; gap:10px}
.row--tight{gap:8px; flex-wrap:wrap}
.input{
  flex:1;
  padding:12px 12px;
  border-radius:12px;
  border:1px solid var(--border-strong);
  background: var(--input-bg);
  color: var(--text);
  font-size:16px;
}
.input:focus{outline:none; border-color: rgba(43,143,255,.9); box-shadow: 0 0 0 3px rgba(43,143,255,.15)}
.btn{
  border:1px solid var(--btn-border);
  background: var(--btn-bg);
  color:var(--text);
  padding:12px 14px;
  border-radius:12px;
  cursor:pointer;
  font-weight:600;
  font-size:14px;
}
.btn:hover{filter:brightness(1.03)}
.btn:disabled{opacity:.55; cursor:not-allowed}
.btn--primary{
  background: linear-gradient(180deg, rgba(43,143,255,.95), rgba(12,113,195,.95));
  border-color: rgba(43,143,255,.65);
}
.btn--primary:hover{filter:brightness(1.05)}
.hint{margin-top:10px; font-size:13px; color:var(--muted)}

.status{
  margin-top:12px;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid var(--border);
  background: var(--surface-2);
  color:var(--muted);
  font-size:13px;
}

.section{padding:38px 0 0}
.section h2{margin:0 0 12px; font-size:22px}
.muted{color:var(--muted)}
.grid3{display:grid; grid-template-columns: repeat(3, 1fr); gap:14px}
.card{
  background: var(--surface-1);
  border:1px solid var(--border);
  border-radius:16px;
  padding:14px;
}
.card h3{margin:0 0 8px; font-size:16px}
.card p{margin:0; color:var(--muted)}

.results{margin-top:14px; display:block}

/* Tabs */
.tabs{display:block}
.tabs__bar{display:flex; gap:8px; padding:8px; border:1px solid var(--border); background:var(--surface-2); border-radius:14px}
.tab{appearance:none; border:1px solid transparent; background:transparent; color:var(--text); padding:10px 12px; border-radius:12px; font-weight:700; font-size:13px; cursor:pointer; flex:1; text-align:center}
.tab:hover{background:var(--surface-3)}
.tab.is-active{background:var(--surface-1); border-color:var(--border); box-shadow:0 10px 30px rgba(0,0,0,.08)}
.tabpanes{margin-top:10px}
.tabpane{animation:fadeIn .18s ease-out}

/* Advanced accordion */
.adv{margin-top:12px; border:1px solid var(--border); background:var(--surface-2); border-radius:14px; overflow:hidden}
.adv>summary{list-style:none; cursor:pointer; padding:12px 14px; font-weight:700; color:var(--text)}
.adv>summary::-webkit-details-marker{display:none}
.adv>summary:after{content:"▾"; float:right; opacity:.7}
.adv[open]>summary:after{content:"▴"}
.adv__body{padding:12px 14px; border-top:1px solid var(--border); color:var(--text); font-size:13px}
.kv{display:grid; grid-template-columns:140px 1fr; gap:8px 12px}
.kv .k{opacity:.75}
.kv .v{font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-size:12.5px; overflow-wrap:anywhere}

@keyframes fadeIn{from{opacity:.5; transform:translateY(2px)}to{opacity:1; transform:translateY(0)}}
.panel{
  border:1px solid var(--border);
  border-radius:16px;
  overflow:hidden;
}
.panel__head{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:12px 14px;
  border-bottom:1px solid var(--border);
}
.panel__title{font-weight:700}
.panel__body{padding:14px}
.panel--fail{background: rgba(255,59,78,.07); border-color: rgba(255,59,78,.35)}
.panel--ok{background: rgba(25,195,125,.07); border-color: rgba(25,195,125,.35)}

.pills{display:flex; flex-wrap:wrap; gap:8px}
.pill{
  display:inline-flex; align-items:center; gap:8px;
  padding:6px 10px;
  border-radius:999px;
  font-size:12px;
  border:1px solid var(--border-strong);
  background: var(--chip-bg);
  color:var(--muted);
}
.pill i{display:inline-block; width:8px; height:8px; border-radius:999px; background: rgba(168,179,204,.6)}
.pill--ok{border-color: rgba(25,195,125,.5); color: rgba(205,255,232,.95)}
.pill--ok i{background: var(--ok)}
.pill--bad{border-color: rgba(255,59,78,.5); color: rgba(255,210,215,.95)}
.pill--bad i{background: var(--danger)}
.pill--warn{border-color: rgba(245,197,66,.5); color: rgba(255,242,204,.95)}
.pill--warn i{background: var(--warn)}

html[data-theme="light"] .pill--ok{color:#0b3b24}
html[data-theme="light"] .pill--bad{color:#5b0f16}
html[data-theme="light"] .pill--warn{color:#5b430a}

/* Replay overlay */
.overlay{position:fixed; inset:0; background: rgba(0,0,0,.45); backdrop-filter: blur(10px); z-index:100}
html[data-theme="light"] .overlay{background: rgba(15,20,40,.28)}
.overlay__card{max-width:720px; margin:6vh auto; background: var(--panel-glass); border:1px solid var(--border-strong); border-radius:18px; box-shadow: var(--shadow); padding:16px}
.overlay__top{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:10px}
.overlay__progress{height:10px; background: rgba(255,255,255,.08); border-radius:999px; overflow:hidden; border:1px solid var(--border-strong)}
html[data-theme="light"] .overlay__progress{background: rgba(15,20,40,.06)}
.overlay__bar{height:100%; width:0%; background: linear-gradient(90deg, var(--brand), var(--brand2));}
.overlay__body{margin-top:12px; padding:14px; border-radius:14px; border:1px solid var(--border-strong); background: var(--chip-bg); min-height:210px}
.overlay__foot{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:10px}

.kpi{display:flex; gap:12px; align-items:flex-end; flex-wrap:wrap}
.kpi__score{font-size:34px; font-weight:800}
.kpi__meta{color:var(--muted); font-size:13px}

.pre{
  margin:12px 0 0;
  padding:12px;
  border-radius:14px;
  border:1px solid var(--border);
  background: var(--surface-2);
  color: color-mix(in srgb, var(--text) 92%, transparent);
  font-family: var(--mono);
  font-size:12px;
  overflow:auto;
  max-height: 320px;
}

.section--cta{padding-bottom:24px}
.cta{
  display:flex; gap:18px; align-items:center; justify-content:space-between;
  background: linear-gradient(180deg, rgba(12,113,195,.12), var(--surface-1));
  border:1px solid var(--border);
  border-radius:18px;
  padding:18px;
}
.cta__actions{display:flex; gap:10px; flex-wrap:wrap}

.footer{margin-top:28px; padding:22px 0 10px; border-top:1px solid var(--border)}
.footer__grid{display:grid; grid-template-columns: 1.3fr 1fr 1fr; gap:18px}
.footer__grid ul{margin:10px 0 0; padding-left:18px; color:var(--muted)}
.footer__grid li{margin:6px 0}
.footer__brand{display:flex; align-items:center; gap:10px; margin-bottom:8px}
.footer__bottom{margin-top:14px; display:flex; gap:10px; align-items:center; color:var(--muted); font-size:13px}
.dot{opacity:.5}

@media (max-width: 920px){
  .hero{grid-template-columns: 1fr; }
  .hero__copy h1{font-size:34px}
  .grid3{grid-template-columns:1fr}
  .footer__grid{grid-template-columns:1fr}
  .topnav{display:none}
}


/* Ghost button variant */
.btn--ghost{background:transparent;border:1px solid var(--btn-ghost-border)}
.btn--ghost:hover{filter:brightness(1.06)}



/* AnswerCite path explainer */
.path{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:stretch;
  margin:18px 0 14px;
  padding:14px;
  border:1px solid var(--border-soft);
  background: var(--surface-3);
  border-radius:16px;
}
.pathStep{
  flex: 1 1 180px;
  display:flex;
  gap:12px;
  align-items:flex-start;
  padding:12px;
  border-radius:14px;
  border:1px solid var(--border-soft);
  background: var(--surface-2);
  min-width:180px;
}
.pathArrow{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0 4px;
  opacity:.6;
  font-weight:700;
}
.pathIcon{
  width:34px;
  height:34px;
  border-radius:10px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:800;
  background: rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.12);
}
.pathIcon.ok{
  background: rgba(46, 204, 113, .18);
  border-color: rgba(46, 204, 113, .28);
}
.pathTitle{font-weight:800;margin-bottom:2px}
.pathDesc{opacity:.86; line-height:1.35}
.noteRow{
  display:grid;
  grid-template-columns: 1fr;
  gap:10px;
  margin: 10px 0 0;
}
@media (min-width: 760px){
  .noteRow{ grid-template-columns: 1fr 1fr; }
}
.note{
  border:1px solid var(--border-soft);
  background: var(--surface-3);
  border-radius:14px;
  padding:12px 14px;
  line-height:1.45;
  opacity:.92;
}


/* Toggles */
.toggles{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
  margin-top:12px;
}
.toggle{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:8px 10px;
  border:1px solid var(--border);
  border-radius:999px;
  background: var(--surface-3);
}
.toggle--sm{padding:6px 8px; gap:8px}
.toggle--sm .toggle__track{width:40px; height:22px}
.toggle--sm .toggle__track::after{width:16px; height:16px}
.toggle--sm .toggle__label{font-size:12px}
.toggle input{
  position:absolute;
  opacity:0;
  pointer-events:none;
}
.toggle__track{
  width:44px;
  height:24px;
  border-radius:999px;
  background: rgba(255,255,255,.10);
  border:1px solid var(--border);
  position:relative;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.05);
}
.toggle__track::after{
  content:"";
  width:18px;
  height:18px;
  border-radius:50%;
  background: var(--text);
  position:absolute;
  top:2px;
  left:2px;
  transition: transform .18s ease, background .18s ease;
}
.toggle input:checked + .toggle__track::after{
  transform: translateX(20px);
  background: var(--brand2);
}
/* smaller travel for compact toggle */
.toggle--sm input:checked + .toggle__track::after{ transform: translateX(18px); }
.toggle__label{
  font-size: 13px;
  color: var(--muted);
  user-select:none;
}
.btn--sm{ padding:8px 10px; font-size:13px; }


/* v1.2.1 overflow/wrapping hardening for Fixes+Evidence tab */
.hero__card, .tabpanes, .tabpane, .panel, .card { min-width: 0; }
.row { min-width: 0; flex-wrap: wrap; }
.row > * { min-width: 0; }
.pre { max-width: 100%; }
.pre { overflow-x: auto; }
.pre { -webkit-overflow-scrolling: touch; }
/* Prevent long strings/URLs from forcing layout wider than the card */
.pre, .adv__body, .muted, .kv, .kv .v { overflow-wrap: anywhere; word-break: break-word; }


/* v1.2.3 polish */
.note--tight{padding:10px 12px}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace}