/* SnapSleep PC app (alpha) — self-contained, no build step, no external deps */
*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; height:100%; }
:root{
  --bg:#080D1C; --bg-soft:#0E1730; --card:#141F3C; --card-2:#1B2A50;
  --text:#EEF2FB; --text-dim:#98A6C8; --border:rgba(255,255,255,.09);
  --accent:#6FE6D4; --accent-deep:#2FBFAC; --on-accent:#052620;
  --warm:#F5EFE1; --good:#6FE6D4; --warn:#F5C86B; --bad:#F58B8B;
  --shadow:0 26px 60px -28px rgba(0,0,0,.65);
  --shadow-sm:0 12px 30px -16px rgba(0,0,0,.5);
  --sample:#8AB4FF;
}
body{
  font-family:'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  background:var(--bg); color:var(--text);
  -webkit-font-smoothing:antialiased;
}
a{ color:var(--accent-deep); text-decoration:none; }
button{ font-family:inherit; cursor:pointer; }
.hidden{ display:none !important; }

/* ---------- Login gate ---------- */
#gate{
  position:fixed; inset:0; z-index:100;
  display:grid; place-items:center; padding:24px;
  background:radial-gradient(120% 120% at 50% -10%, var(--bg-soft), var(--bg));
}
.gate-card{
  width:100%; max-width:400px; background:var(--card); border:1px solid var(--border);
  border-radius:22px; padding:34px 30px; box-shadow:var(--shadow); text-align:center;
}
.gate-logo{ display:flex; align-items:center; justify-content:center; gap:10px; margin-bottom:6px; }
.gate-logo span{ font-weight:800; font-size:20px; letter-spacing:-.02em; }
.badge-alpha{
  display:inline-block; font-size:11px; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
  color:var(--accent-deep); background:color-mix(in srgb, var(--accent) 16%, transparent);
  padding:4px 10px; border-radius:999px; margin-bottom:18px;
}
.gate-card h1{ font-size:20px; margin:0 0 6px; letter-spacing:-.02em; }
.gate-card p{ color:var(--text-dim); font-size:14px; margin:0 0 22px; }
#gate input{
  width:100%; padding:14px 16px; border-radius:12px; border:1px solid var(--border);
  background:var(--bg-soft); color:var(--text); font-size:16px; outline:none; text-align:center; letter-spacing:.05em;
}
#gate input:focus{ border-color:var(--accent-deep); }
#gate button{
  width:100%; margin-top:12px; padding:14px; border:none; border-radius:12px;
  background:var(--accent); color:var(--on-accent); font-weight:800; font-size:16px;
  box-shadow:0 14px 30px -12px var(--accent-deep);
}
#gateError{ color:var(--bad); font-size:13px; font-weight:600; margin-top:12px; min-height:16px; }

/* ---------- App shell ---------- */
#app{ min-height:100%; display:flex; flex-direction:column; }
.topbar{
  position:sticky; top:0; z-index:20; backdrop-filter:blur(14px);
  background:color-mix(in srgb, var(--bg) 82%, transparent);
  border-bottom:1px solid var(--border);
}
.topbar-inner{ max-width:1100px; margin:0 auto; padding:12px 22px; display:flex; align-items:center; gap:14px; }
.brand{ display:flex; align-items:center; gap:9px; font-weight:800; letter-spacing:-.02em; }
.brand .logo{ display:grid; place-items:center; width:34px; height:34px; border-radius:11px;
  background:linear-gradient(150deg,var(--card-2),var(--card)); border:1px solid var(--border); }
.topbar .spacer{ margin-left:auto; }
.pill{ font-size:11px; font-weight:800; letter-spacing:.05em; text-transform:uppercase;
  color:var(--accent-deep); background:color-mix(in srgb,var(--accent) 15%,transparent); padding:5px 10px; border-radius:999px; }
.linkbtn{ background:none; border:1px solid var(--border); color:var(--text-dim); border-radius:10px; padding:7px 12px; font-size:13px; font-weight:600; }
.linkbtn:hover{ color:var(--text); }

.main{ flex:1; max-width:1100px; width:100%; margin:0 auto; padding:34px 22px 60px; }

/* ---------- Upload / dropzone ---------- */
.hero-load{ text-align:center; max-width:640px; margin:0 auto; }
.hero-load h1{ font-size:clamp(26px,4vw,36px); letter-spacing:-.02em; margin:0 0 10px; }
.hero-load p{ color:var(--text-dim); font-size:16px; line-height:1.55; margin:0 auto 26px; }
.dropzone{
  border:1.6px dashed var(--border); border-radius:22px; background:var(--card);
  padding:44px 28px; transition:border-color .15s, background .15s; cursor:pointer;
}
.dropzone.drag{ border-color:var(--accent-deep); background:var(--card-2); }
.dropzone .dz-icon{ margin:0 auto 14px; width:60px; height:60px; border-radius:16px;
  background:var(--card-2); display:grid; place-items:center; }
.dropzone h3{ margin:0 0 6px; font-size:19px; }
.dropzone .muted{ color:var(--text-dim); font-size:14px; }
.dz-actions{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-top:18px; }
.btn{ padding:13px 22px; border-radius:12px; border:none; font-weight:800; font-size:15px; }
.btn-primary{ background:var(--accent); color:var(--on-accent); box-shadow:0 14px 30px -12px var(--accent-deep); }
.btn-ghost{ background:var(--card-2); color:var(--text); border:1px solid var(--border); }
.demo-link{ display:block; margin-top:18px; color:var(--text-dim); font-size:13px; }
.demo-link a{ font-weight:700; }

/* ---------- Analyzing ---------- */
.analyzing{ text-align:center; padding:60px 0; }
.analyzing .remy{ width:150px; margin:0 auto 18px; }
.spinner{ width:34px; height:34px; border-radius:50%; border:3px solid var(--border); border-top-color:var(--accent); margin:18px auto 0; animation:spin 1s linear infinite; }
@keyframes spin{ to{ transform:rotate(360deg); } }

/* ---------- Report ---------- */
.report-head{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin-bottom:6px; }
.machine-chip{ display:flex; align-items:center; gap:10px; background:var(--card); border:1px solid var(--border); border-radius:14px; padding:10px 14px; }
.machine-chip .dot{ width:9px; height:9px; border-radius:50%; background:var(--good); box-shadow:0 0 8px var(--good); }
.machine-chip small{ display:block; color:var(--text-dim); font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; }
.machine-chip strong{ font-size:15px; }
.source-note{ color:var(--text-dim); font-size:13px; }

.grid-cards{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:16px; margin:22px 0; }
.stat{ background:var(--card); border:1px solid var(--border); border-radius:18px; padding:22px; box-shadow:var(--shadow-sm); }
.stat .row{ display:flex; justify-content:space-between; align-items:center; margin-bottom:12px; }
.stat .lbl{ font-size:14px; color:var(--text-dim); font-weight:600; }
.tag{ font-size:11px; font-weight:800; padding:4px 10px; border-radius:999px; }
.tag.good{ color:var(--accent-deep); background:color-mix(in srgb,var(--accent) 20%,transparent); }
.tag.warn{ color:var(--warn); background:color-mix(in srgb,var(--warn) 18%,transparent); }
.tag.sample{ color:var(--sample); background:color-mix(in srgb,var(--sample) 16%,transparent); }
.tag.bad{ color:var(--bad); background:color-mix(in srgb,var(--bad) 16%,transparent); }
.stat .big{ font-size:40px; font-weight:800; letter-spacing:-.03em; }
.stat .unit{ font-size:16px; color:var(--text-dim); font-weight:600; }
.stat .sub{ color:var(--text-dim); font-size:13px; line-height:1.5; margin:6px 0 0; }

/* Remy insight panel */
.remy-panel{ display:grid; grid-template-columns:120px 1fr; gap:18px; align-items:start;
  background:linear-gradient(160deg,#F6F2E9,#EFEADD); border:1px solid var(--border);
  border-radius:20px; padding:22px; margin:22px 0; box-shadow:var(--shadow-sm); }
.remy-panel .avatar{ width:120px; }
.remy-panel .says{ color:#1B2942; }
.remy-panel .says .name{ font-size:12px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; color:#0B8474; margin-bottom:4px; }
.remy-panel .says h3{ margin:0 0 8px; font-size:19px; letter-spacing:-.01em; color:#131F3B; }
.remy-panel .says p{ margin:0 0 8px; font-size:15px; line-height:1.55; color:#3A465F; }
.remy-panel .says .doc{ font-size:13px; color:#5B6885; font-style:italic; }

/* files + week */
.panel{ background:var(--card); border:1px solid var(--border); border-radius:18px; padding:20px 22px; box-shadow:var(--shadow-sm); }
.panel h3{ margin:0 0 14px; font-size:16px; }
.weekbars{ display:flex; align-items:flex-end; gap:10px; height:120px; }
.weekbars .col{ flex:1; display:flex; flex-direction:column; align-items:center; gap:8px; height:100%; justify-content:flex-end; }
.weekbars .bar{ width:100%; border-radius:6px 6px 4px 4px; background:var(--accent); }
.weekbars .d{ font-size:11px; color:var(--text-dim); font-weight:700; }
.filelist{ display:flex; flex-direction:column; gap:8px; max-height:260px; overflow:auto; }
.filerow{ display:flex; justify-content:space-between; gap:12px; font-size:13px; padding:9px 12px; background:var(--bg-soft); border-radius:9px; }
.filerow .fn{ font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.filerow .meta{ color:var(--text-dim); flex:none; }
.two-col{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
@media(max-width:720px){ .two-col{ grid-template-columns:1fr; } .remy-panel{ grid-template-columns:1fr; } .remy-panel .avatar{ width:96px; } }

.footer-note{ text-align:center; color:var(--text-dim); font-size:12px; margin-top:34px; }
.reset-row{ margin-top:26px; text-align:center; }

/* ---------- Top nav tabs ---------- */
.tabs{ display:flex; gap:6px; }
.tab{ background:none; border:1px solid transparent; color:var(--text-dim); border-radius:10px; padding:8px 14px; font-size:14px; font-weight:700; }
.tab:hover{ color:var(--text); }
.tab.active{ color:var(--text); background:var(--card); border-color:var(--border); }

/* ---------- Setup screen ---------- */
.setup{ max-width:1040px; margin:0 auto; }
.primer{ background:linear-gradient(160deg,var(--card-2),var(--card)); border:1px solid var(--border);
  border-radius:18px; padding:18px 22px; margin-bottom:22px; box-shadow:var(--shadow-sm); }
.primer-head{ display:flex; justify-content:space-between; align-items:center; font-weight:800; font-size:15px; }
.primer-x{ background:none; border:1px solid var(--border); color:var(--text-dim); border-radius:9px; padding:5px 12px; font-size:12px; font-weight:700; }
.primer p{ color:var(--text-dim); font-size:14px; line-height:1.6; margin:12px 0 0; }
.primer.collapsed p{ display:none; }

.setup-grid{ display:grid; grid-template-columns:1fr 320px; gap:22px; align-items:start; }
@media(max-width:820px){ .setup-grid{ grid-template-columns:1fr; } }

.mode-block{ background:var(--card); border:1px solid var(--border); border-radius:16px; padding:18px; margin-bottom:16px; box-shadow:var(--shadow-sm); }
.mode-row{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:10px; margin-top:14px; }
@media(max-width:520px){ .mode-row{ grid-template-columns:1fr; } }
.mode-btn{ text-align:left; background:var(--bg-soft); border:1.5px solid var(--border); border-radius:12px; padding:12px 14px; color:var(--text); display:flex; flex-direction:column; gap:3px; }
.mode-btn strong{ font-size:15px; }
.mode-btn span{ font-size:12px; color:var(--text-dim); }
.mode-btn.active{ border-color:var(--accent-deep); background:var(--card-2); box-shadow:0 0 0 1px var(--accent-deep) inset; }

.setting{ background:var(--card); border:1px solid var(--border); border-radius:16px; padding:16px 18px; margin-bottom:12px; box-shadow:var(--shadow-sm); }
.setting-head{ display:flex; align-items:center; gap:10px; }
.setting-label{ font-weight:700; font-size:15px; }
.setting-val{ margin-left:auto; font-weight:800; color:var(--accent-deep); font-size:15px; }
.setting-sub{ color:var(--text-dim); font-size:13px; margin:4px 0 12px; }
.help-toggle{ flex:none; width:22px; height:22px; border-radius:50%; border:1px solid var(--border); background:var(--card-2);
  color:var(--text-dim); font-weight:800; font-size:12px; line-height:1; }
.setting-val + .help-toggle{ margin-left:0; }
.help-toggle:hover{ color:var(--text); border-color:var(--accent-deep); }
.help-body{ display:none; background:var(--bg-soft); border:1px solid var(--border); border-radius:10px;
  padding:12px 14px; margin:0 0 12px; color:var(--text-dim); font-size:13px; line-height:1.6; }
.help-body.open{ display:block; }
#help-mode{ margin-top:12px; }

.slider-row{ display:flex; align-items:center; gap:12px; }
.slider{ flex:1; -webkit-appearance:none; appearance:none; height:6px; border-radius:999px; background:var(--card-2); outline:none; }
.slider::-webkit-slider-thumb{ -webkit-appearance:none; width:20px; height:20px; border-radius:50%; background:var(--accent);
  border:3px solid var(--bg-soft); box-shadow:0 2px 8px -2px var(--accent-deep); cursor:pointer; }
.slider::-moz-range-thumb{ width:20px; height:20px; border-radius:50%; background:var(--accent); border:3px solid var(--bg-soft); cursor:pointer; }
.num{ width:82px; padding:9px 10px; border-radius:10px; border:1px solid var(--border); background:var(--bg-soft); color:var(--text); font-size:15px; font-weight:700; text-align:center; }
.num-unit{ font-size:12px; color:var(--text-dim); font-weight:600; }
.select{ width:100%; padding:11px 12px; border-radius:11px; border:1px solid var(--border); background:var(--bg-soft); color:var(--text); font-size:15px; font-weight:600; }

.switch{ display:flex; align-items:center; gap:12px; cursor:pointer; }
.switch input{ display:none; }
.switch-track{ width:46px; height:26px; border-radius:999px; background:var(--card-2); border:1px solid var(--border); position:relative; transition:background .15s; flex:none; }
.switch-track::after{ content:''; position:absolute; top:2px; left:2px; width:20px; height:20px; border-radius:50%; background:var(--text-dim); transition:transform .15s, background .15s; }
.switch input:checked + .switch-track{ background:color-mix(in srgb,var(--accent) 30%,transparent); border-color:var(--accent-deep); }
.switch input:checked + .switch-track::after{ transform:translateX(20px); background:var(--accent); }
.switch-label{ font-size:14px; font-weight:700; color:var(--text-dim); }

/* summary card */
.setup-side{ position:sticky; top:80px; }
.sum-card{ background:var(--card); border:1px solid var(--border); border-radius:18px; padding:20px; box-shadow:var(--shadow); }
.sum-code{ display:flex; flex-direction:column; gap:4px; margin-bottom:14px; }
.sum-code span{ font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--text-dim); }
.sum-code code{ font-size:22px; font-weight:800; letter-spacing:.06em; color:var(--accent); font-family:ui-monospace,SFMono-Regular,Menlo,monospace; }
.sum-list{ display:flex; flex-direction:column; gap:2px; }
.sum-row{ display:flex; justify-content:space-between; gap:12px; font-size:13px; padding:7px 0; border-bottom:1px solid var(--border); }
.sum-row:last-child{ border-bottom:none; }
.sum-row span{ color:var(--text-dim); }
.sum-note{ color:var(--text-dim); font-size:11px; line-height:1.5; margin-top:12px; }
.warn{ background:color-mix(in srgb,var(--warn) 12%,transparent); border:1px solid color-mix(in srgb,var(--warn) 40%,transparent);
  color:var(--warn); border-radius:10px; padding:10px 12px; font-size:12px; line-height:1.5; margin-bottom:14px; }

.safety-strip{ display:flex; gap:10px; align-items:flex-start; background:var(--card); border:1px solid var(--border);
  border-radius:14px; padding:14px 18px; margin-top:22px; color:var(--text-dim); font-size:13px; line-height:1.55; box-shadow:var(--shadow-sm); }

/* ---------- Acronyms toggle (topbar) ---------- */
.acr-toggle{ display:inline-flex; align-items:center; gap:7px; background:var(--card); border:1px solid var(--border);
  color:var(--text-dim); border-radius:10px; padding:7px 12px; font-size:13px; font-weight:600; }
.acr-toggle .aa{ font-weight:800; color:var(--text-dim); letter-spacing:-.02em; }
.acr-toggle b{ color:var(--text-dim); font-weight:800; }
.acr-toggle.on{ border-color:var(--accent-deep); color:var(--text); }
.acr-toggle.on .aa, .acr-toggle.on b{ color:var(--accent-deep); }
.acr-toggle:hover{ color:var(--text); }
@media(max-width:720px){ .acr-toggle{ display:none; } }

/* ---------- Starter preset card ---------- */
.preset-card{ display:flex; gap:16px; align-items:center; flex-wrap:wrap; justify-content:space-between;
  background:linear-gradient(160deg,#F6F2E9,#EFEADD); border:1px solid var(--border);
  border-radius:16px; padding:16px 18px; margin-bottom:16px; box-shadow:var(--shadow-sm); }
.preset-text{ color:#3A465F; font-size:14px; line-height:1.55; flex:1; min-width:240px; }
.preset-text strong{ color:#131F3B; }
.preset-text em{ color:#0B8474; font-style:normal; font-weight:800; }
.preset-btns{ display:flex; gap:10px; flex-wrap:wrap; }
.preset-btns .btn{ padding:11px 16px; font-size:14px; }

/* ---------- Guided wizard ---------- */
.wiz{ max-width:600px; margin:0 auto; }
.wiz-card{ background:var(--card); border:1px solid var(--border); border-radius:22px; padding:30px; box-shadow:var(--shadow); }
.wiz-top{ display:flex; align-items:center; justify-content:space-between; margin-bottom:20px; }
.wiz-step{ font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--text-dim); }
.wiz-dots{ display:flex; gap:6px; }
.wiz-dot{ width:8px; height:8px; border-radius:50%; background:var(--card-2); }
.wiz-dot.on{ background:var(--accent); }
.wiz-q{ font-size:clamp(20px,3vw,26px); font-weight:800; letter-spacing:-.02em; margin:0 0 8px; }
.wiz-help{ color:var(--text-dim); font-size:14px; line-height:1.55; margin:0 0 22px; }
.wiz-opts{ display:flex; flex-direction:column; gap:10px; }
.wiz-opt{ text-align:left; background:var(--bg-soft); border:1.5px solid var(--border); border-radius:13px;
  padding:15px 18px; color:var(--text); font-size:15px; font-weight:600; transition:border-color .12s, background .12s; }
.wiz-opt:hover{ border-color:var(--accent-deep); background:var(--card-2); }
.wiz-opt.ghost{ background:none; color:var(--text-dim); font-weight:600; border-style:dashed; }
#wizApply{ background:var(--accent); color:var(--on-accent); border-color:transparent; font-weight:800; text-align:center; box-shadow:0 14px 30px -12px var(--accent-deep); }
.wiz-number{ display:flex; align-items:center; gap:12px; margin-bottom:18px; }
.wiz-number input{ width:120px; padding:14px 16px; border-radius:12px; border:1px solid var(--border); background:var(--bg-soft); color:var(--text); font-size:22px; font-weight:800; text-align:center; }
.wiz-nav{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:22px; }
.wiz-back{ background:none; border:none; color:var(--text-dim); font-size:14px; font-weight:700; }
.wiz-back:hover{ color:var(--text); }
.wiz-safety{ color:var(--text-dim); font-size:12px; font-style:italic; }
.wiz-remy{ width:120px; margin:0 auto 6px; }
.wiz-sum{ background:var(--bg-soft); border:1px solid var(--border); border-radius:14px; padding:8px 16px; margin:18px 0 22px; }
.wiz-sum .sum-row{ display:flex; justify-content:space-between; gap:12px; font-size:14px; padding:9px 0; border-bottom:1px solid var(--border); }
.wiz-sum .sum-row:last-child{ border-bottom:none; }
.wiz-sum .sum-row span{ color:var(--text-dim); }

/* Consent / share-card (opt-in upload) */
.consent-card{ background:var(--bg-soft); border:1px solid var(--border); border-radius:16px; padding:18px 20px; margin:22px 0 4px; }
.consent-card .cc-head{ display:flex; gap:14px; align-items:flex-start; }
.consent-card .cc-icon{ font-size:22px; line-height:1.2; }
.consent-card strong{ font-size:15px; }
.consent-card p{ color:var(--text-dim); font-size:13px; margin:6px 0 0; line-height:1.5; }
.consent-card .cc-actions{ display:flex; gap:10px; margin-top:16px; }
.consent-card .cc-status{ color:var(--accent); font-size:13px; margin-top:10px; min-height:16px; }

/* Beta-machine banner on the report */
.beta-banner{ background:rgba(245,200,107,.12); border:1px solid rgba(245,200,107,.35); color:var(--warn);
  border-radius:12px; padding:12px 16px; margin:0 0 18px; font-size:13px; line-height:1.5; }
.beta-banner b{ color:#F7D48A; }