:root{
  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --sans: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Arial, "Apple Color Emoji", "Segoe UI Emoji";

  --shadow: 0 18px 50px rgba(0,0,0,.55);
  --r: 16px;
  --r2: 22px;

  --bg:#07090d;
  --panel:rgba(255,255,255,.04);
  --panel2:rgba(255,255,255,.03);
  --line:rgba(255,255,255,.08);
  --text:#e7eaf2;
  --muted:#9aa3b2;
  --accent:rgba(90,120,255,1);
  --accent2:rgba(255,90,180,1);
  --ok: rgba(46,204,113,.18);
  --warn: rgba(241,196,15,.18);
  --bad: rgba(231,76,60,.18);
  --neu: rgba(155,89,182,.16);
}

html[data-theme="midnight"]{
  --bg:#07090d; --panel:rgba(255,255,255,.04); --panel2:rgba(255,255,255,.03); --line:rgba(255,255,255,.08);
  --text:#e7eaf2; --muted:#9aa3b2; --accent:rgba(90,120,255,1); --accent2:rgba(255,90,180,1);
}
html[data-theme="cold_glass"]{
  --bg:#05070b; --panel:rgba(125,211,252,.06); --panel2:rgba(167,139,250,.06); --line:rgba(125,211,252,.16);
  --text:rgba(255,255,255,.92); --muted:rgba(255,255,255,.62); --accent:#7dd3fc; --accent2:#a78bfa;
}
html[data-theme="deep_forest"]{
  --bg:#070b09; --panel:rgba(34,197,94,.07); --panel2:rgba(16,185,129,.06); --line:rgba(34,197,94,.18);
  --text:rgba(236,253,245,.92); --muted:rgba(236,253,245,.62); --accent:#22c55e; --accent2:#10b981;
}
html[data-theme="aurora_purple"]{
  --bg:#070615; --panel:rgba(167,139,250,.07); --panel2:rgba(45,212,191,.06); --line:rgba(167,139,250,.18);
  --text:rgba(245,243,255,.92); --muted:rgba(245,243,255,.62); --accent:#a78bfa; --accent2:#2dd4bf;
}
html[data-theme="neon_fjord"]{
  --bg:#050a0b; --panel:rgba(34,211,238,.07); --panel2:rgba(34,197,94,.06); --line:rgba(34,211,238,.18);
  --text:rgba(236,254,255,.92); --muted:rgba(236,254,255,.62); --accent:#22d3ee; --accent2:#22c55e;
}
html[data-theme="ember"]{
  --bg:#120a08; --panel:rgba(251,146,60,.07); --panel2:rgba(244,63,94,.06); --line:rgba(251,146,60,.18);
  --text:rgba(255,247,237,.92); --muted:rgba(255,247,237,.62); --accent:#fb923c; --accent2:#f43f5e;
}
html[data-theme="clean_light"]{
  --bg:#f6f7fb; --panel:rgba(0,0,0,.04); --panel2:rgba(0,0,0,.06); --line:rgba(0,0,0,.10);
  --text:rgba(0,0,0,.88); --muted:rgba(0,0,0,.58); --accent:#2563eb; --accent2:#7c3aed; --shadow:0 10px 30px rgba(0,0,0,.10);
}
html[data-theme="forest_light"]{
  --bg:#f2fbf5; --panel:rgba(16,185,129,.08); --panel2:rgba(34,197,94,.08); --line:rgba(16,185,129,.16);
  --text:rgba(2,44,34,.88); --muted:rgba(2,44,34,.58); --accent:#059669; --accent2:#22c55e; --shadow:0 10px 30px rgba(0,0,0,.10);
}
html[data-theme="lavender_light"]{
  --bg:#fbf8ff; --panel:rgba(167,139,250,.10); --panel2:rgba(99,102,241,.08); --line:rgba(167,139,250,.18);
  --text:rgba(30,27,75,.88); --muted:rgba(30,27,75,.58); --accent:#7c3aed; --accent2:#6366f1; --shadow:0 10px 30px rgba(0,0,0,.10);
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font: 13px/1.35 var(--sans);
  background:
    radial-gradient(900px 600px at 30% -10%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 60%),
    radial-gradient(900px 600px at 85% 0%, color-mix(in srgb, var(--accent2) 10%, transparent), transparent 60%),
    var(--bg);
  color: var(--text);
}

.muted{ color:var(--muted); }
.small{ font-size:12px; }
.tiny{ font-size:11px; }
.mono{ font-family:var(--mono); }

.topbar{
  position: sticky; top:0; z-index: 10;
  display:flex; align-items:center; justify-content:space-between; gap: 14px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: blur(10px);
}
.brand{
  display:flex; align-items:center; gap:10px;
  padding:6px 10px;
  border:1px solid var(--line);
  border-radius:999px;
  background:var(--panel2);
}
.dot{
  width:10px; height:10px; border-radius:50%;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  box-shadow: 0 0 0 6px rgba(255,255,255,.04);
}
.brandTitle{ font-weight:900; letter-spacing:.2px; }
.brandSub{ font-size:12px; color:var(--muted); margin-top:2px; }
.topbarRight{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; justify-content:flex-end; }

.pill{
  border:1px solid var(--line);
  border-radius:999px;
  padding:6px 10px;
  font-size:12px;
  background:var(--panel2);
  color:var(--muted);
}
.pill b{ color:var(--text); }
.pill.mini{ padding:6px 10px; }

.themeBox{ display:flex; align-items:center; gap:8px; padding:6px 10px; border:1px solid var(--line); border-radius:999px; background:var(--panel2); }
.label{ color: var(--muted); font-size:12px; white-space:nowrap; }

.btn{
  border:1px solid var(--line);
  border-radius:999px;
  padding:9px 12px;
  background: rgba(255,255,255,.04);
  color: var(--text);
  cursor:pointer;
}
.btn:hover{ background: rgba(255,255,255,.07); }
.btnGhost{ background: transparent; }
.btnPrimary{ border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); background: color-mix(in srgb, var(--accent) 16%, transparent); }
.btnDanger{ border-color: color-mix(in srgb, var(--accent2) 45%, var(--line)); background: color-mix(in srgb, var(--accent2) 12%, transparent); }

.select, .input, .textarea{
  border:1px solid var(--line);
  border-radius: 12px;
  padding:10px 12px;
  background: rgba(255,255,255,.03);
  color: var(--text);
  outline:none;
}
.select:focus, .input:focus, .textarea:focus{
  border-color: color-mix(in srgb, var(--accent) 65%, var(--line));
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 18%, transparent);
}
.textarea{ resize:vertical; min-height: 180px; line-height:1.5; }
.textarea.small{ min-height: 110px; }

.layout{
  display:grid;
  grid-template-columns: 340px 1fr 420px;
  gap: 12px;
  padding: 12px;
  height: calc(100vh - 62px);
  min-height: 560px;
}
@media (max-width: 1100px){
  .layout{ grid-template-columns: 1fr; height:auto; }
}

.panel{
  border:1px solid var(--line);
  border-radius: var(--r2);
  background: var(--panel);
  box-shadow: var(--shadow);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  min-height:0;
}
.panelHeader{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding: 10px 12px;
  border-bottom:1px solid var(--line);
  background: rgba(0,0,0,.14);
}
.panelHeader.compact{ padding: 10px 12px 8px 12px; }
.panelTitle{ font-weight: 1000; }
.panelHint{ font-size:12px; color: var(--muted); margin-top:2px; }
.footerNote{ padding: 10px 12px; color: var(--muted); font-size: 12px; border-top: 1px solid var(--line); background: rgba(0,0,0,.10); }

.toolbarStack{ padding: 10px 12px; border-bottom: 1px solid var(--line); display:flex; flex-direction:column; gap:10px; }
.row{ display:flex; align-items:center; gap:8px; }
.grow{ flex:1; min-width:0; }
.seg{ display:flex; flex-wrap:wrap; gap:8px; }
.segBtn{
  cursor:pointer;
  border:1px solid var(--line);
  border-radius:999px;
  padding:7px 10px;
  background: rgba(255,255,255,.03);
  color: var(--text);
  font-weight: 800;
  font-size: 12px;
}
.segBtn.active{
  border-color: color-mix(in srgb, var(--accent) 60%, var(--line));
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 16%, transparent);
}

.list{ padding: 10px; overflow:auto; min-height:0; }
.item{
  border:1px solid transparent;
  border-radius: 14px;
  padding: 10px;
  cursor:pointer;
  display:flex;
  gap:10px;
  align-items:flex-start;
}
.item:hover{ background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.10); }
.itemActive{ border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); background: color-mix(in srgb, var(--accent) 10%, transparent); }
.badge{ font-family: var(--mono); font-size: 11px; padding: 3px 8px; border-radius:999px; border:1px solid var(--line); background: rgba(0,0,0,.10); }
.itemMain{ flex:1; min-width:0; }
.itemTitle{ font-weight: 900; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.itemSub{ font-size: 12px; color: var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; margin-top:2px; }

.workspaceTop{ padding: 10px 12px; border-bottom: 1px solid var(--line); display:flex; align-items:center; gap:10px; }
.editorToolbar{ display:flex; gap:8px; align-items:center; padding: 10px 12px; border-bottom: 1px solid var(--line); flex-wrap:wrap; }
.editorToolbar .input{ flex:1; min-width: 220px; }
.editorToolbar .select{ width: 180px; }

.assist{ margin-top: 10px; border-top: 1px solid var(--line); display:flex; flex-direction:column; min-height:0; }
.assistHeader{ padding: 10px 12px; border-bottom: 1px solid var(--line); background: rgba(0,0,0,.10); display:flex; align-items:center; justify-content:space-between; gap:10px; }
.assistButtons{ padding: 10px 12px; display:flex; flex-wrap:wrap; gap: 8px; border-bottom: 1px solid var(--line); }
.assistOutput{ padding: 10px 12px; min-height: 60px; max-height: 200px; overflow:auto; color: var(--muted); font-size: 13px; white-space: pre-wrap; }

.divider{ height: 1px; background: var(--line); }
.toggleRow{ display:flex; align-items:center; gap:10px; }
.toggle{
  position: relative;
  width: 46px;
  height: 26px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.04);
  cursor:pointer;
}
.toggle[aria-pressed="true"]{
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  border-color: color-mix(in srgb, var(--accent) 45%, var(--line));
}
.toggleKnob{
  position:absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  background: rgba(255,255,255,.85);
  transition: left .12s ease;
}
.toggle[aria-pressed="true"] .toggleKnob{ left: 23px; }

.canonBlock{ padding: 10px 12px; display:flex; flex-direction:column; gap:10px; }
.facts{ padding: 10px 12px; overflow:auto; min-height: 120px; max-height: 240px; }
.factRow{ border:1px solid var(--line); border-radius: 14px; padding: 10px; margin-bottom: 8px; background: rgba(0,0,0,.10); display:flex; gap:10px; }
.factNum{ font-family: var(--mono); font-size: 11px; color: var(--muted); width: 28px; text-align:right; padding-top: 6px; }
.factActions{ display:flex; flex-direction:column; gap:8px; }
.smallBtn{ border:1px solid var(--line); background: rgba(255,255,255,.04); border-radius: 12px; padding: 7px 10px; font-weight: 800; cursor:pointer; font-size:12px; }
.smallBtn:hover{ background: rgba(255,255,255,.07); }

.beats{ padding: 10px 12px; display:flex; flex-direction:column; gap:10px; }
.beatsList{ overflow:auto; max-height: 200px; border:1px solid var(--line); border-radius: 14px; background: rgba(0,0,0,.10); padding: 8px; }
.beatItem{ border:1px solid rgba(255,255,255,.10); border-radius: 14px; padding: 10px; margin-bottom: 8px; background: rgba(255,255,255,.03); }
.beatTop{ display:flex; justify-content:space-between; gap:10px; }
.beatWhen{ font-family: var(--mono); font-size: 11px; color: var(--muted); }
.beatText{ margin-top: 6px; color: var(--muted); white-space: pre-wrap; }

.history{ padding: 10px 12px; overflow:auto; min-height: 120px; max-height: 220px; }
.histItem{ border:1px solid var(--line); border-radius: 14px; padding: 10px; margin-bottom: 8px; background: rgba(0,0,0,.10); }
.histTop{ display:flex; justify-content:space-between; gap:10px; }
.histId{ font-family: var(--mono); font-size: 11px; color: var(--muted); }
.histWhen{ font-family: var(--mono); font-size: 11px; color: var(--muted); }
.histTitle{ font-weight: 900; margin-top: 6px; }
.histActions{ display:flex; gap:8px; margin-top:8px; flex-wrap:wrap; }

.actions{ padding: 10px 12px 14px 12px; display:flex; flex-direction:column; gap: 8px; }