/* Quantum Lab v2.1 — dark, editorial, offline. Single stylesheet, no CDN. */

:root{
  --bg:#070a14; --panel:#11172c; --panel2:#171f3b; --line:#293354;
  --ink:#f1f4fb; --muted:#aab4d4; --dim:#7f8ab0;
  --cyan:#56eadb; --violet:#8d82ff; --pink:#ff5a96;
  --good:#51dfa0; --warn:#ffd166; --bad:#ff5a96;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,monospace;
  --maxw:1120px; --radius:18px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; min-height:100vh; color:var(--ink);
  font-family:var(--sans); font-size:16px; line-height:1.5;
  background:radial-gradient(900px 520px at 80% -10%,rgba(141,130,255,.13),transparent 60%),var(--bg);
  overflow-x:hidden;
}

/* ---------- accessibility ---------- */
.skip-link{
  position:absolute; left:-999px; top:0; z-index:20;
  background:var(--ink); color:var(--bg); padding:10px 16px; border-radius:0 0 10px 0; font-weight:700;
}
.skip-link:focus{left:0}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
:focus-visible{outline:3px solid var(--cyan); outline-offset:2px; border-radius:6px}
button, a, input, select, textarea{font-family:inherit}

/* ---------- layout ---------- */
.topbar,footer{max-width:var(--maxw); margin:auto; padding:18px 20px; display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap}
main{max-width:var(--maxw); margin:auto; padding:28px 20px 72px}
.view{display:none}
.view.active{display:block; animation:in .25s ease}
@keyframes in{from{opacity:0; transform:translateY(6px)}}

/* ---------- top bar ---------- */
.brand{background:none; border:0; color:var(--ink); font-weight:800; font-size:18px; display:flex; gap:10px; align-items:center; cursor:pointer; min-height:44px; padding:0 4px}
.orb{width:18px; height:18px; border-radius:50%; background:linear-gradient(135deg,var(--cyan),var(--violet),var(--pink)); box-shadow:0 0 22px rgba(86,234,219,.5)}
.top-actions{display:flex; gap:10px; align-items:center; flex-wrap:wrap}
.lang{border:1px solid var(--line); border-radius:999px; padding:3px; display:flex}
.lang button{border:0; background:transparent; color:var(--muted); padding:8px 12px; min-height:38px; border-radius:999px; cursor:pointer; font-weight:700}
.lang button.active{background:var(--ink); color:var(--bg)}

/* ---------- typography ---------- */
.eyebrow{font-family:var(--mono); letter-spacing:.22em; font-size:11px; color:var(--cyan); margin:0}
h1{font-size:clamp(34px,7vw,66px); line-height:1.02; letter-spacing:-.04em; margin:12px 0 16px}
.lead{color:var(--muted); font-size:clamp(16px,2.5vw,18px); max-width:62ch; margin:0}
.hero{max-width:820px; padding:24px 0 30px}
.section-head{padding:8px 0 22px}
.section-head h1{font-size:clamp(30px,6vw,54px)}
.field-label{display:block; color:var(--muted); font-size:13px; font-family:var(--mono); margin:16px 0 6px}

/* ---------- home ---------- */
.home-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:16px}
.feature{position:relative; text-align:left; min-height:200px; padding:24px; border:1px solid var(--line); border-radius:22px; background:linear-gradient(160deg,var(--panel),var(--panel2)); color:var(--ink); cursor:pointer; transition:transform .15s ease,border-color .15s ease}
.feature.primary{background:linear-gradient(145deg,rgba(86,234,219,.16),rgba(141,130,255,.2)),var(--panel); border-color:rgba(141,130,255,.5); box-shadow:0 0 0 1px rgba(141,130,255,.12)}
.feature:hover{transform:translateY(-2px); border-color:var(--violet)}
.feature h2{font-size:clamp(22px,4vw,27px); margin:28px 0 8px}
.feature p{color:var(--muted); max-width:34ch; margin:0}
.num{font-family:var(--mono); color:var(--dim)}
.arrow{position:absolute; right:20px; bottom:18px; color:var(--muted); display:inline-flex}
.feature:hover .arrow{color:var(--cyan)}

/* ---------- buttons ---------- */
.btn,.ghost,.filebtn{border-radius:12px; padding:13px 18px; min-height:44px; font-weight:700; cursor:pointer; text-decoration:none; display:inline-flex; align-items:center; gap:8px; justify-content:center}
.btn{border:1px solid var(--ink); background:var(--ink); color:var(--bg)}
.ghost,.filebtn{border:1px solid var(--line); background:transparent; color:var(--ink)}
.ghost:hover,.filebtn:hover{border-color:var(--violet)}
.btn.small,.ghost.small{padding:9px 14px; min-height:40px; font-size:14px}
.back{border:0; background:none; color:var(--muted); padding:6px 4px; min-height:44px; display:inline-flex; align-items:center; gap:6px; cursor:pointer; font-size:15px}
.back:hover{color:var(--ink)}
.row{display:flex; gap:10px; align-items:center; flex-wrap:wrap}
.row.wrap{flex-wrap:wrap}
.actionrow{margin-top:16px}

/* ---------- forms ---------- */
pre,textarea,input,select{width:100%; background:#09101f; color:var(--ink); border:1px solid var(--line); border-radius:12px; padding:13px; font-family:var(--mono); font-size:15px}
pre{color:var(--cyan); overflow-x:auto; white-space:pre; margin:0}
textarea{min-height:130px; resize:vertical; margin:6px 0}
.filebtn input,.drop input{position:absolute; width:1px; height:1px; opacity:0; overflow:hidden}
.controls{display:grid; gap:14px}
.controls.two{grid-template-columns:1fr 1fr}
.controls label span{display:block; color:var(--muted); font-size:13px; margin-bottom:6px}

/* ---------- step cards ---------- */
.step-card{background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:20px; margin-bottom:16px}
.step-head{display:flex; align-items:center; gap:12px; margin-bottom:6px}
.step-head h2{font-size:clamp(19px,3.5vw,23px); margin:0}
.step-badge{flex:0 0 auto; width:32px; height:32px; border-radius:50%; display:grid; place-items:center; background:rgba(141,130,255,.18); color:var(--violet); font-family:var(--mono); font-weight:700}
.step-card p{color:var(--muted); margin:6px 0}

/* ---------- status / messages ---------- */
.status{color:var(--dim); font-size:14px; margin:10px 0 0}
.status.good{color:var(--good)}
.status.warn{color:var(--warn)}
.status.subtle{color:var(--dim); font-size:13px}
.message{margin-top:14px; border:1px solid var(--line); background:var(--panel); border-radius:14px; padding:14px 16px; color:var(--muted)}
.message.good{border-color:rgba(81,223,160,.5); background:rgba(81,223,160,.08); color:#c9f6e2}
.message.warn{border-color:rgba(255,209,102,.5); background:rgba(255,209,102,.07); color:#f6e6bd}
.message.bad{border-color:rgba(255,90,150,.5); background:rgba(255,90,150,.07); color:#ffc1d6}

/* ---------- password result ---------- */
.pw-card{margin-top:16px; border:1px solid var(--line); background:#09101f; border-radius:16px; padding:18px}
.pw-code{font-family:var(--mono); font-size:clamp(20px,5vw,32px); color:var(--cyan); word-break:break-all; margin-bottom:14px}
.pw-meta{display:grid; grid-template-columns:1fr; gap:8px; margin:0 0 14px}
.pw-meta div{display:flex; justify-content:space-between; gap:16px; border-top:1px solid var(--line); padding-top:8px}
.pw-meta dt{color:var(--dim); font-size:13px; margin:0}
.pw-meta dd{color:var(--ink); font-family:var(--mono); font-size:13px; margin:0; text-align:right}

/* ---------- experiments ---------- */
.exp-cards{display:grid; grid-template-columns:repeat(2,1fr); gap:14px; margin-bottom:22px}
.exp-card{border:1px solid var(--line); border-radius:16px; background:var(--panel); padding:18px; display:flex; flex-direction:column; gap:6px}
.exp-card.active{border-color:var(--violet); background:linear-gradient(160deg,var(--panel),var(--panel2))}
.exp-card h2{font-size:19px; margin:0; display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.exp-card p{color:var(--muted); margin:0; font-size:14px}
.exp-card .data-req{color:var(--dim); font-family:var(--mono); font-size:12px}
.exp-card button{margin-top:8px; align-self:flex-start}
.badge{font-family:var(--mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--cyan); border:1px solid rgba(86,234,219,.4); border-radius:999px; padding:2px 8px}
.exp{display:none; background:linear-gradient(180deg,var(--panel),var(--panel2)); border:1px solid var(--line); border-radius:20px; padding:20px}
.exp.active{display:block}
.panel-title{font-size:22px; margin:0 0 6px; display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.grid4{display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin:12px 0 16px}
.grid4 label{font-family:var(--mono); font-size:12px; color:var(--muted); display:block}
.note{color:var(--warn); font-size:14px}
.result-title{font-size:18px; margin:16px 0 0}
.bound{color:var(--dim); font-family:var(--mono); font-size:13px; margin:12px 0 0}
.statgrid{display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-top:14px}
.stat{border:1px solid var(--line); border-radius:14px; padding:13px; background:#09101f; min-width:0}
.stat small{display:block; color:var(--dim); font-family:var(--mono); font-size:11px; margin-bottom:4px; overflow-wrap:anywhere}
.stat strong{font-family:var(--mono); font-size:clamp(18px,4vw,24px); overflow-wrap:anywhere}

/* ---------- analyze ---------- */
.drop{display:grid; place-items:center; gap:4px; min-height:140px; border:1px dashed var(--dim); border-radius:18px; cursor:pointer; text-align:center; padding:16px}
.drop:hover{border-color:var(--violet)}
.drop strong{font-size:17px}
.drop span{color:var(--muted)}
.detect-card{margin-top:16px; border:1px solid var(--line); background:var(--panel); border-radius:16px; padding:18px}
.preview{max-height:180px; overflow:auto; color:var(--muted); font-size:13px; margin:6px 0 4px}

/* ---------- learn ---------- */
.learn-steps{list-style:none; padding:0; margin:0; display:grid; grid-template-columns:repeat(2,1fr); gap:16px}
.learn-steps li{border:1px solid var(--line); border-radius:18px; background:var(--panel); padding:20px}
.learn-steps h2{font-size:19px; margin:0 0 8px; color:var(--cyan)}
.learn-steps p{color:var(--muted); margin:0}
.notes{margin-top:22px; border-top:1px solid var(--line); padding-top:20px}
.notes h2{font-size:20px; margin:0 0 10px}
.notes ul{margin:0; padding-left:20px; color:var(--muted)}
.notes li{margin:6px 0}

/* ---------- footer ---------- */
footer{border-top:1px solid var(--line); color:var(--dim); font-family:var(--mono); font-size:12px; margin-top:20px}

/* ---------- update bar & toast ---------- */
.update-bar{position:fixed; left:50%; transform:translateX(-50%); bottom:16px; z-index:30; display:flex; gap:12px; align-items:center; background:var(--panel2); border:1px solid var(--violet); border-radius:14px; padding:10px 14px; max-width:calc(100vw - 24px); box-shadow:0 8px 30px rgba(0,0,0,.45)}
.update-bar span{color:var(--ink); font-size:14px}
.toast{position:fixed; left:50%; transform:translateX(-50%); bottom:16px; z-index:40; background:var(--ink); color:var(--bg); padding:12px 18px; border-radius:12px; font-weight:600; font-size:14px; max-width:calc(100vw - 24px); text-align:center; box-shadow:0 8px 30px rgba(0,0,0,.45)}

/* ---------- responsive ---------- */
@media(max-width:820px){
  .home-grid,.learn-steps,.exp-cards,.controls.two{grid-template-columns:1fr}
  .grid4,.statgrid{grid-template-columns:1fr 1fr}
  .feature{min-height:170px}
}
@media(max-width:480px){
  main{padding:20px 16px 64px}
  .topbar,footer{padding:14px 16px}
  .grid4,.statgrid{grid-template-columns:1fr 1fr}
  .brand-name{display:none}
}
@media(max-width:360px){
  .statgrid{grid-template-columns:1fr}
}

/* ---------- reduced motion ---------- */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .view.active{animation:none}
  .feature{transition:none}
  *{scroll-behavior:auto !important}
}