/* DreamSync Voice Studio — dark galactic theme: blue / green / orange only */
:root{
  --bg:#04121f;
  --bg2:#071c2e;
  --panel:#0a2438;
  --panel-edge:#14506e;
  --ink:#eaf6ff;
  --muted:#9fc6d8;
  --blue:#1e90d6;
  --blue-deep:#0b5e8f;
  --green:#2fd08c;
  --green-deep:#0f7a52;
  --orange:#ff9a2e;
  --orange-deep:#cc6a00;
  --focus:#ffd28a;
  --radius:14px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:radial-gradient(1200px 700px at 15% -10%, #0b3d5c 0%, var(--bg) 55%),
             radial-gradient(900px 600px at 110% 10%, #083d2a 0%, var(--bg) 50%),
             var(--bg);
  color:var(--ink);
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  line-height:1.45;
  padding-bottom:env(safe-area-inset-bottom);
}
.topbar{
  display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;
  padding:16px 20px calc(16px + env(safe-area-inset-top));
  border-bottom:2px solid var(--panel-edge);
  background:linear-gradient(90deg, rgba(30,144,214,.18), rgba(47,208,140,.12), rgba(255,154,46,.14));
}
.brand{display:flex;gap:14px;align-items:center;min-width:0}
.brand-mark{
  width:52px;height:52px;flex:0 0 52px;border-radius:50%;
  display:grid;place-items:center;font-weight:800;letter-spacing:.5px;color:#04121f;
  background:conic-gradient(from 40deg, var(--blue), var(--green), var(--orange), var(--blue));
  border:2px solid #eaf6ff33;
}
h1{font-size:1.35rem;margin:0}
.tagline{margin:2px 0 0;color:var(--muted);font-size:.92rem}
.disclosure{
  color:var(--orange);font-weight:700;font-size:.9rem;
  border:1px solid var(--orange-deep);border-radius:999px;padding:6px 12px;background:#2a1a05;
}
.disclosure-top{margin:0}
.layout{
  display:grid;gap:16px;padding:16px;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));
  max-width:1440px;margin:0 auto;align-items:start;
}
.panel{
  background:linear-gradient(180deg, var(--panel), var(--bg2));
  border:1px solid var(--panel-edge);border-radius:var(--radius);padding:16px;
}
.panel h2{margin:0 0 10px;font-size:1.05rem;color:#bfe8ff}
.panel h2.sub-h{margin-top:20px}
.field-label{display:block;margin:12px 0 6px;color:var(--muted);font-size:.9rem;font-weight:600}
input[type="text"],textarea,select{
  width:100%;background:#051826;color:var(--ink);
  border:1px solid var(--panel-edge);border-radius:10px;padding:10px;font:inherit;
}
textarea{resize:vertical;min-height:120px}
input[type="range"]{width:100%;accent-color:var(--green)}
input[type="file"]{width:100%;color:var(--muted)}
:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.row{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.btn{
  appearance:none;border:1px solid var(--panel-edge);background:#0d3049;color:var(--ink);
  border-radius:999px;padding:9px 16px;font:inherit;font-weight:600;cursor:pointer;
}
.btn:hover:not(:disabled){border-color:var(--green)}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn-primary{background:linear-gradient(90deg, var(--blue-deep), var(--green-deep));border-color:var(--green)}
.btn-accent{background:linear-gradient(90deg, var(--orange-deep), var(--orange));color:#1c0f00;border-color:var(--orange)}
.btn-ghost{background:transparent}
.mode-box{margin-top:16px;border:1px solid var(--panel-edge);border-radius:10px;padding:10px 12px}
.mode-box legend{color:var(--muted);font-weight:700;padding:0 6px}
.mode-box label{display:block;margin:8px 0;cursor:pointer}
.note{color:var(--muted);font-size:.88rem;margin-top:12px}
.status{color:#bfe8ff;font-size:.9rem;min-height:1.2em}
.status.warn{color:var(--orange)}
.chapter-list{display:grid;gap:12px;margin-top:8px}
.chapter{border:1px solid var(--panel-edge);border-radius:10px;padding:10px;background:#071c2e}
.chapter-head{display:flex;gap:8px;align-items:center}
.chapter-head .num{
  flex:0 0 auto;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;
  background:var(--blue-deep);color:#fff;font-weight:800;font-size:.85rem;
}
.chapter-title{flex:1 1 auto;font-weight:700}
.segment{margin-top:10px}
.segment label{display:block;color:var(--muted);font-size:.8rem;margin-bottom:4px}
.segment textarea{min-height:64px}
.segment.active textarea{border-color:var(--orange);box-shadow:0 0 0 2px rgba(255,154,46,.45)}
.segment.done textarea{border-color:var(--green-deep)}
.stage-wrap{display:flex;justify-content:center}
#stage{
  width:min(100%,300px);aspect-ratio:9/16;height:auto;
  border-radius:12px;border:2px solid var(--panel-edge);background:#04121f;
}
.footer{
  text-align:center;padding:20px 16px calc(24px + env(safe-area-inset-bottom));
  border-top:2px solid var(--panel-edge);color:var(--ink);font-weight:700;
}
.footer-sub{color:var(--muted);font-weight:400;font-size:.85rem}
@media (max-width:520px){
  h1{font-size:1.15rem}
  .topbar{padding-left:14px;padding-right:14px}
  .layout{padding:12px}
}