:root{
  /* LOCKED tokens */
  --r1: 14px;         /* inputs/buttons */
  --r2: 22px;         /* panels */
  --shadow-soft: 0 18px 50px rgba(0,0,0,.55);
  --h-input: 40px;
  --focus: 0 0 0 3px rgba(255,255,255,.12);

  --bg:#07090d;
  --panel:rgba(255,255,255,.04);
  --panel2:rgba(255,255,255,.03);
  --line:rgba(255,255,255,.10);
  --text:#e7eaf2;
  --muted:#9aa3b2;
  --accent:rgba(90,120,255,1);
  --accent2:rgba(255,90,180,1);
}

/* Theme pack set v1 */
html[data-theme="midnight"]{ --bg:#07090d; --panel:rgba(255,255,255,.04); --panel2:rgba(255,255,255,.03); --line:rgba(255,255,255,.10); --text:#e7eaf2; --muted:#9aa3b2; --accent:rgba(90,120,255,1); --accent2:rgba(255,90,180,1); }
html[data-theme="cold_glass"]{ --bg:#070b12; --panel:rgba(210,235,255,.06); --panel2:rgba(210,235,255,.045); --line:rgba(210,235,255,.14); --text:#edf6ff; --muted:#a8b7c8; --accent:rgba(120,200,255,1); --accent2:rgba(160,255,240,1); }
html[data-theme="deep_forest"]{ --bg:#060a08; --panel:rgba(200,255,220,.055); --panel2:rgba(200,255,220,.04); --line:rgba(200,255,220,.12); --text:#eafff1; --muted:#a6c2b2; --accent:rgba(90,220,160,1); --accent2:rgba(60,170,120,1); }
html[data-theme="aurora_purple"]{ --bg:#090716; --panel:rgba(230,210,255,.06); --panel2:rgba(230,210,255,.04); --line:rgba(230,210,255,.14); --text:#f4edff; --muted:#c2b6d6; --accent:rgba(170,120,255,1); --accent2:rgba(120,220,255,1); }
html[data-theme="neon_fjord"]{ --bg:#05070a; --panel:rgba(210,240,255,.055); --panel2:rgba(210,240,255,.04); --line:rgba(210,240,255,.14); --text:#ecf7ff; --muted:#a7b9c8; --accent:rgba(80,255,210,1); --accent2:rgba(100,140,255,1); }
html[data-theme="ember"]{ --bg:#0c0707; --panel:rgba(255,210,190,.06); --panel2:rgba(255,210,190,.04); --line:rgba(255,210,190,.14); --text:#fff1ec; --muted:#c9b0a8; --accent:rgba(255,140,80,1); --accent2:rgba(255,90,140,1); }
html[data-theme="clean_light"]{ --bg:#f6f7fb; --panel:rgba(0,0,0,.04); --panel2:rgba(0,0,0,.03); --line:rgba(0,0,0,.12); --text:#151822; --muted:#5d6677; --accent:rgba(90,120,255,1); --accent2:rgba(255,90,180,1); --shadow-soft: 0 18px 50px rgba(0,0,0,.18); --focus: 0 0 0 3px rgba(0,0,0,.12); }
html[data-theme="forest_light"]{ --bg:#f2f6f3; --panel:rgba(0,0,0,.04); --panel2:rgba(0,0,0,.03); --line:rgba(0,0,0,.12); --text:#101a14; --muted:#566a60; --accent:rgba(60,170,120,1); --accent2:rgba(90,220,160,1); --shadow-soft: 0 18px 50px rgba(0,0,0,.18); --focus: 0 0 0 3px rgba(0,0,0,.12); }
html[data-theme="lavender_light"]{ --bg:#f6f3fb; --panel:rgba(0,0,0,.04); --panel2:rgba(0,0,0,.03); --line:rgba(0,0,0,.12); --text:#19122a; --muted:#675b83; --accent:rgba(170,120,255,1); --accent2:rgba(120,220,255,1); --shadow-soft: 0 18px 50px rgba(0,0,0,.18); --focus: 0 0 0 3px rgba(0,0,0,.12); }

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font: 13px/1.35 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background:
    radial-gradient(900px 600px at 30% -10%, rgba(90,120,255,.10), transparent 60%),
    radial-gradient(900px 600px at 85% 0%, rgba(255,90,180,.07), transparent 60%),
    var(--bg);
  color: var(--text);
}
.muted{ color: var(--muted); }
.small{ font-size: 12px; }
.tiny{ font-size: 11px; }

.topbar{
  position: sticky; top:0; z-index:10;
  display:flex; align-items:center; gap:14px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
  background: rgba(0,0,0,.22);
  backdrop-filter: blur(10px);
}
.brand{ display:flex; align-items:center; gap:10px; }
.brandDot{
  width:10px; height:10px; border-radius:999px;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  box-shadow: 0 0 0 6px rgba(255,255,255,.04);
}
.brandTitle{ font-weight: 1000; }
.brandSub{ color: var(--muted); font-size: 12px; margin-top: 2px; }

.navLinks{
  display:flex; gap:8px;
  flex:1;
  overflow:auto;
  padding: 4px 0;
}
.navBtn{
  height: var(--h-input);
  border:1px solid var(--line);
  border-radius: var(--r1);
  padding: 0 12px;
  background: rgba(255,255,255,.02);
  color: var(--muted);
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  white-space:nowrap;
}
.navBtn:hover{ color: var(--text); background: rgba(255,255,255,.06); }
.navBtn[aria-disabled="true"]{ opacity:.55; cursor:not-allowed; }

.topControls{ display:flex; align-items:center; gap:10px; }
.ctlGroup{ display:flex; align-items:center; gap:8px; }
.ctlLabel{ color: var(--muted); font-size: 12px; }
.ctlSelect{
  height: var(--h-input);
  border:1px solid var(--line);
  background: rgba(255,255,255,.03);
  color: var(--text);
  border-radius: var(--r1);
  padding: 0 10px;
}
.ctlSelect:focus{ outline:none; box-shadow: var(--focus); }

.statusStrip{ display:flex; gap:8px; flex-wrap:wrap; }
.pill{
  border:1px solid var(--line);
  border-radius: 999px;
  padding:8px 10px;
  background: rgba(255,255,255,.03);
  color: var(--muted);
  font-size: 12px;
}

.shell{
  display:grid;
  grid-template-columns: 320px 1fr 360px;
  gap: 12px;
  padding: 12px;
  height: calc(100vh - 62px);
  min-height: 560px;
}
@media (max-width: 1100px){
  .shell{ grid-template-columns: 320px 1fr; }
  .pane--right{ display:none; }
}
@media (max-width: 860px){
  .shell{ grid-template-columns: 1fr; height:auto; }
}

.pane{
  border:1px solid var(--line);
  border-radius: var(--r2);
  background: var(--panel);
  box-shadow: var(--shadow-soft);
  overflow:hidden;
  display:flex;
  flex-direction:column;
}
.paneHead{
  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,.10);
}
.paneHead--center{ align-items:flex-start; }
.paneTitle{ font-weight: 1000; }
.paneActions{ display:flex; gap: 8px; }

.iconBtn{
  width: var(--h-input);
  height: var(--h-input);
  border-radius: var(--r1);
  border:1px solid var(--line);
  background: rgba(255,255,255,.03);
  color: var(--text);
  cursor:pointer;
  font-size: 16px;
}
.iconBtn:focus{ outline:none; box-shadow: var(--focus); }

.btn{
  height: var(--h-input);
  border:1px solid var(--line);
  background: rgba(255,255,255,.03);
  color: var(--text);
  padding: 0 12px;
  border-radius: var(--r1);
  cursor:pointer;
}
.btn:focus{ outline:none; box-shadow: var(--focus); }
.btn:hover{ background: rgba(255,255,255,.06); }
.btn--ghost{ background: transparent; }

.input{
  height: var(--h-input);
  border:1px solid var(--line);
  background: rgba(255,255,255,.03);
  color: var(--text);
  border-radius: var(--r1);
  padding: 0 12px;
  width: 100%;
}
.input:focus{ outline:none; box-shadow: var(--focus); }
.input--rail{ max-width: 160px; }
.input--composer{ flex: 1; }

.railSection{ padding: 10px; padding-bottom: 0; }
.railHead{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom: 8px; }
.railTitle{ font-weight: 1000; }
.railList{ display:flex; flex-direction:column; gap: 8px; padding-bottom: 10px; }

.chatItem{
  border:1px solid var(--line);
  border-radius: var(--r1);
  background: rgba(0,0,0,.10);
  padding: 10px;
  cursor:pointer;
}
.chatItem:hover{ background: rgba(255,255,255,.05); }
.chatItem--active{ outline: 2px solid rgba(255,255,255,.12); }
.chatItemTop{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.chatTitle{ font-weight: 900; }
.chatSub{ margin-top: 4px; color: var(--muted); font-size: 12px; display:flex; gap:8px; flex-wrap:wrap; }
.pinDot{ width:8px; height:8px; border-radius: 999px; background: rgba(255,255,255,.20); }

.railFooter{
  margin-top:auto;
  padding: 10px;
  border-top: 1px solid var(--line);
  display:flex;
  flex-direction:column;
  gap: 8px;
}
.fileBtn input{ display:none; }

.centerTitle{ display:flex; flex-direction:column; gap: 2px; }
.centerTools{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content:flex-end;
}
.modeToggle{
  display:inline-flex;
  border:1px solid var(--line);
  border-radius: 999px;
  overflow:hidden;
  background: rgba(0,0,0,.10);
}
.segBtn{
  height: var(--h-input);
  border:0;
  padding: 0 12px;
  background: transparent;
  color: var(--text);
  cursor:pointer;
}
.segBtn--active{ background: rgba(255,255,255,.06); }

.chipRow{ display:flex; gap: 8px; flex-wrap:wrap; }
.chipBtn{
  border:1px solid var(--line);
  background: rgba(255,255,255,.03);
  color: var(--text);
  border-radius: 999px;
  padding: 8px 10px;
  cursor:pointer;
}
.chipBtn:hover{ background: rgba(255,255,255,.06); }
.chipBtn--on{ outline: 2px solid rgba(255,255,255,.12); }

.thread{
  flex: 1;
  padding: 14px;
  overflow:auto;
}
.msg{ display:flex; margin: 10px 0; }
.msg--left{ justify-content:flex-start; }
.msg--right{ justify-content:flex-end; }
.bubble{
  max-width: 72%;
  border:1px solid var(--line);
  border-radius: var(--r1);
  background: rgba(0,0,0,.12);
  padding: 10px 12px;
}
.bubble--user{ background: rgba(255,255,255,.05); }
.msgMeta{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom: 6px;
  color: var(--muted);
  font-size: 12px;
}
.badge{ display:flex; align-items:center; gap: 8px; }
.avatar{
  width:18px; height:18px;
  border-radius: 6px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.08);
}
.badgeName{ font-weight: 900; color: var(--text); }
.msgText{ white-space: pre-wrap; }

.composer{
  border-top: 1px solid var(--line);
  padding: 10px;
  display:flex;
  gap: 10px;
  align-items:center;
  background: rgba(0,0,0,.10);
}

.card{
  margin: 10px;
  border:1px solid var(--line);
  border-radius: var(--r1);
  background: var(--panel2);
  padding: 10px;
}
.cardHead{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin-bottom: 10px; }
.cardTitle{ font-weight: 1000; }

.todoAdd{ display:flex; gap: 10px; align-items:center; }
.todoList{ display:flex; flex-direction:column; gap: 8px; }
.todoItem{
  display:flex; align-items:center; justify-content:space-between; gap: 10px;
  border:1px solid var(--line);
  border-radius: var(--r1);
  background: rgba(0,0,0,.10);
  padding: 8px 10px;
}
.todoLeft{ display:flex; gap: 10px; align-items:center; }
.todoDone{ text-decoration: line-through; color: var(--muted); }

.calendarGrid{
  display:grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 8px;
}
.dayCard{
  border:1px solid var(--line);
  border-radius: var(--r1);
  background: rgba(0,0,0,.10);
  padding: 10px;
  min-height: 64px;
}
.dayDate{ font-weight: 1000; margin-bottom: 6px; }
.dayMeta{ color: var(--muted); font-size: 12px; }

.modalOverlay{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.55);
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 14px;
}
.modal{
  width: min(720px, 100%);
  border:1px solid var(--line);
  border-radius: var(--r2);
  background: rgba(20,24,35,.92);
  backdrop-filter: blur(10px);
  box-shadow: var(--shadow-soft);
  overflow:hidden;
}
.modalHead{
  display:flex; align-items:center; justify-content:space-between;
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
}
.modalTitle{ font-weight: 1000; }
.modalBody{ padding: 12px; }
.modalFoot{
  padding: 12px;
  border-top: 1px solid var(--line);
  display:flex; gap: 10px;
  justify-content:flex-end;
  flex-wrap: wrap;
}