/* Flash EMDR Studio — clean modern UI, mobile-first. Themes: light / dark / warm */
:root{
  --radius:20px; --radius-s:14px;
  --shadow:0 10px 30px rgba(60,45,20,.10);
  --font: "Inter","Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif;
}
[data-theme="light"]{
  --bg:#f2efe9; --card:#fffdf8; --card2:#f7f2e9; --ink:#221d15; --muted:#8a8172;
  --line:#e7ddcc; --accent:#c26a12; --accent-ink:#fff; --green:#2f6b3a; --green-bg:#e3f0e3;
  --danger:#b3261e; --nav:#2e3d2c; --nav-ink:#f2efe9; --track:#e9e0cf; --input:#fff;
  --color-scheme:light;
}
[data-theme="dark"]{
  --bg:#131110; --card:#1d1a17; --card2:#26211c; --ink:#f0ebe2; --muted:#a89d8c;
  --line:#35302a; --accent:#f59e0b; --accent-ink:#1a1206; --green:#4ade80; --green-bg:#16281b;
  --danger:#f87171; --nav:#1d1a17; --nav-ink:#f0ebe2; --track:#35302a; --input:#26211c;
  --color-scheme:dark;
}
[data-theme="warm"]{
  --bg:#12100e; --card:#1c1917; --card2:#292524; --ink:#e7e5e4; --muted:#a8a29e;
  --line:#44403c; --accent:#d97706; --accent-ink:#fff; --green:#22c55e; --green-bg:#14261a;
  --danger:#ef4444; --nav:#292524; --nav-ink:#e7e5e4; --track:#292524; --input:#292524;
  --color-scheme:dark;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; font-family:var(--font); background:var(--bg); color:var(--ink);
  color-scheme:var(--color-scheme); min-height:100dvh; padding-bottom:96px;
}
h1{font-size:19px;margin:0;letter-spacing:.2px}
h2{font-size:22px;margin:10px 0 4px}
h3{font-size:15px;margin:0}
.muted{color:var(--muted)} .small{font-size:12px}
.hidden{display:none!important}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

.topbar{
  display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding:16px 18px 8px;max-width:1060px;margin:0 auto;
}
.brand{display:flex;gap:12px;align-items:center}
.brand-dot{width:38px;height:38px;border-radius:50%;
  background:radial-gradient(circle at 35% 50%,#fff 0 12%,var(--accent) 13% 45%,#7c4a12 100%);
  box-shadow:var(--shadow);flex:none}
.brand-sub{color:var(--muted);font-weight:500}
.tagline{margin:2px 0 0;font-size:12px;color:var(--muted)}
.top-actions{display:flex;gap:8px}
.seg{display:flex;background:var(--card);border:1px solid var(--line);border-radius:999px;padding:3px;box-shadow:var(--shadow)}
.seg-btn{border:0;background:transparent;color:var(--muted);border-radius:999px;padding:7px 12px;font-weight:700;cursor:pointer;font-size:13px}
.seg-btn.active{background:var(--ink);color:var(--bg)}

.tabs{display:none}
.layout{max-width:1060px;margin:0 auto;padding:10px 16px 20px;display:grid;gap:14px}
.view{display:none;flex-direction:column;gap:14px}
.view.active{display:flex}
.card{
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:18px;box-shadow:var(--shadow);
}
.stage-top{display:flex;gap:8px;align-items:center;justify-content:space-between}
.pill{background:var(--card2);border:1px solid var(--line);border-radius:999px;padding:5px 12px;font-size:12px;font-weight:700}
.pill-green{background:var(--green-bg);color:var(--green);border-color:transparent}
#stageTitle{text-transform:uppercase;letter-spacing:.3px}
#stageDesc{margin:0 0 10px;line-height:1.5}
.field-label{display:block;font-size:12px;font-weight:700;margin:12px 0 6px;color:var(--muted);text-transform:uppercase;letter-spacing:.4px}
input[type="text"]{
  width:100%;background:var(--input);border:1px solid var(--line);border-radius:12px;
  padding:12px;color:var(--ink);font-size:15px;
}
input[type="text"]:focus{outline:2px solid var(--accent);border-color:var(--accent)}
.media-wrap{margin:10px 0}
.media{width:100%;max-height:300px;object-fit:cover;border-radius:14px;border:1px solid var(--line);background:#000}
.progress-row{display:flex;justify-content:space-between;margin-top:12px}
.time-label{font-weight:700;font-size:13px;color:var(--accent)}
.progress{height:10px;background:var(--track);border-radius:99px;overflow:hidden;margin-top:8px}
.progress-fill{height:100%;width:0%;border-radius:99px;background:linear-gradient(90deg,var(--accent),#f5b04c);transition:width .2s}
.controls{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
.btn{
  border:1px solid var(--line);background:var(--card2);color:var(--ink);
  border-radius:14px;padding:13px 16px;font-weight:700;font-size:14px;cursor:pointer;flex:1;min-width:130px;
}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn-primary{background:var(--green);border-color:var(--green);color:#fff}
[data-theme="light"] .btn-primary{background:#2f6b3a}
.btn-danger{background:var(--danger);border-color:var(--danger);color:#fff}
.btn-danger-soft{background:transparent;color:var(--danger);border-color:var(--danger)}
.btn-soft{background:var(--card2)}
.btn.small{flex:none;min-width:0;padding:8px 12px;font-size:12px}
.file-label{display:inline-flex;align-items:center;justify-content:center;cursor:pointer}
.hint{font-size:12px;color:var(--muted)}
.row-2col{display:grid;gap:14px}
@media(min-width:720px){.row-2col{grid-template-columns:1fr 1fr;align-items:center}}
.quick-row{display:grid;grid-template-columns:1fr;gap:6px;margin:10px 0;font-size:13px}
input[type="range"]{width:100%;accent-color:var(--accent);height:28px}
.wave-row{display:flex;gap:8px}
.wave-btn{flex:1;border:1px solid var(--line);background:var(--card2);color:var(--muted);border-radius:12px;padding:12px 6px;font-weight:700;cursor:pointer}
.wave-btn.active{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}

.acc-head{
  width:100%;display:flex;justify-content:space-between;align-items:center;
  background:transparent;border:0;color:var(--ink);font-size:15px;font-weight:800;cursor:pointer;padding:2px 0;
}
.acc-body{display:grid;gap:12px;margin-top:12px}
.acc-body:not(.open){display:none}
.chev{color:var(--muted)}
.check{display:flex;gap:10px;align-items:center;font-size:14px;font-weight:600}
.check input{width:20px;height:20px;accent-color:var(--accent)}
.slider-block{background:var(--card2);border:1px solid var(--line);border-radius:var(--radius-s);padding:10px 12px}
.slider-top{display:flex;justify-content:space-between;font-size:13px}
.slider-top b{color:var(--accent)}
.slider-grid{display:grid;gap:10px}
@media(min-width:720px){.slider-grid{grid-template-columns:1fr 1fr}}
.file-row{margin:4px 0}
.row-end{display:flex;gap:8px;flex-wrap:wrap}
.card-head{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:10px}
.log-list{list-style:none;margin:0;padding:0;display:grid;gap:8px;max-height:320px;overflow:auto}
.log-list li{background:var(--card2);border:1px solid var(--line);border-radius:12px;padding:10px 12px;font-size:13px}
.log-list li.selected{outline:2px solid var(--accent)}
.log-meta{color:var(--muted);font-size:11px;margin-top:4px}
.sud-score{font-size:16px;font-weight:800;color:var(--accent)}

.modal-back{position:fixed;inset:0;background:rgba(0,0,0,.45);display:flex;align-items:flex-end;justify-content:center;z-index:60;padding:16px}
@media(min-width:720px){.modal-back{align-items:center}}
.modal{background:var(--card);border:1px solid var(--line);border-radius:22px;padding:20px;width:min(480px,100%);box-shadow:var(--shadow)}
.sud-big{font-size:40px;font-weight:800;text-align:center;margin:6px 0}
.sud-scale{display:flex;justify-content:space-between;color:var(--muted);font-size:12px;margin:2px 0 6px}
.toast{
  position:fixed;left:50%;transform:translateX(-50%);bottom:96px;z-index:70;
  background:var(--ink);color:var(--bg);border-radius:999px;padding:12px 18px;font-size:13px;font-weight:700;
  box-shadow:var(--shadow);max-width:min(92vw,480px);text-align:center;
}

.bottomnav{
  position:fixed;left:12px;right:12px;bottom:calc(10px + env(safe-area-inset-bottom));z-index:50;
  background:var(--nav);color:var(--nav-ink);border-radius:22px;display:flex;padding:8px;gap:4px;
  box-shadow:0 12px 30px rgba(0,0,0,.25);max-width:560px;margin:0 auto;
}
.bnav{flex:1;background:transparent;border:0;color:inherit;opacity:.65;border-radius:14px;padding:8px;display:grid;gap:2px;font-size:17px;cursor:pointer}
.bnav small{font-size:11px;font-weight:700}
.bnav.active{opacity:1;background:rgba(255,255,255,.14)}
#flashOverlay{position:fixed;inset:0;background:#fff;opacity:0;pointer-events:none;z-index:80;transition:opacity .05s}
#flashOverlay.on{opacity:1}