:root{
  color-scheme: light dark;
  --bg:#f7f7fb; --bg2:#ffffff; --fg:#111827; --muted:#6b7280; --chip:#e5e7eb; --pri:#2563eb;
  --card:#ffffff; --border:#e5e7eb; --shadow:0 10px 30px rgba(0,0,0,.06);
}
:root[data-theme='dark']{
  --bg:#0a0c10; --bg2:#0d1117; --fg:#e6edf3; --muted:#8b949e; --chip:#161b22; --pri:#3b82f6;
  --card:#0b1220; --border:#22272e; --shadow:0 10px 30px rgba(0,0,0,.35);
}
:root[data-theme='midnight']{
  --bg:#070a12; --bg2:#0b1220; --fg:#e9eeff; --muted:#9aa3b2; --chip:#0e1730; --pri:#6366f1;
  --card:#0b1220; --border:#1f2630; --shadow:0 10px 30px rgba(0,0,0,.4);
}
:root[data-theme='ocean']{
  --bg:#061015; --bg2:#071920; --fg:#e6fbff; --muted:#8fb2bd; --chip:#0a2a36; --pri:#00a3c4;
  --card:#082029; --border:#0f3642; --shadow:0 10px 30px rgba(0,0,0,.4);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--fg);font:15.5px/1.6 ui-sans-serif,system-ui,Segoe UI,Roboto,Apple Color Emoji,Segoe UI Emoji}
header,footer{padding:12px 16px;background:var(--bg2);border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:5}
h1{font-size:18px;margin:0;font-weight:700;letter-spacing:.2px}
main{max-width:1200px;margin:0 auto;padding:18px;display:grid;grid-template-columns:260px 1fr;gap:16px}
aside.side{position:sticky;top:58px;height:calc(100dvh - 70px)}
.side .panel{border:1px solid var(--border);border-radius:14px;padding:12px;background:var(--card);box-shadow:var(--shadow)}
.side .title{font-weight:700;margin-bottom:8px}
.chat{display:flex;flex-direction:column;min-height:calc(100dvh - 140px)}
#messages{flex:1;overflow:auto;border:1px solid var(--border);border-radius:14px;padding:14px;background:var(--card);box-shadow:var(--shadow) inset}
.msg{margin:12px 0;padding:12px 14px;border-radius:14px;max-width:86%;box-shadow:0 8px 24px rgba(0,0,0,.08)}
:root[data-theme='dark'] .msg{box-shadow:0 8px 24px rgba(0,0,0,.18)}
.msg.user{background:linear-gradient(180deg,rgba(37,99,235,.08),transparent);border:1px solid var(--border);margin-left:auto}
.msg.assistant{background:linear-gradient(180deg,rgba(2,6,23,.02),transparent);border:1px solid var(--border)}
.controls{margin-top:10px;background:var(--card);border:1px solid var(--border);border-radius:14px;padding:12px;box-shadow:var(--shadow)}
textarea{width:100%;min-height:90px;border-radius:12px;border:1px solid var(--border);background:var(--bg2);color:var(--fg);padding:10px;outline:none}
textarea:focus{border-color:#334155;box-shadow:0 0 0 2px rgba(59,130,246,.15)}
.row{display:flex;gap:10px;align-items:center;margin-top:10px;flex-wrap:wrap}
button{background:linear-gradient(180deg,var(--pri),color-mix(in oklab,var(--pri),#000 12%));color:white;border:none;border-radius:12px;padding:10px 16px;cursor:pointer;box-shadow:0 6px 18px color-mix(in oklab,var(--pri),#000 70%)}
button:hover{filter:brightness(1.06)}
button:active{transform:translateY(1px)}
.chips{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:8px}
.chip{background:var(--chip);border:1px solid var(--border);color:var(--fg);padding:6px 12px;border-radius:999px;cursor:pointer;transition:all .15s ease}
.chip:hover{border-color:color-mix(in oklab,var(--pri),#000 30%)}
.chip.active{outline:2px solid color-mix(in oklab,var(--pri),#000 20%); background:color-mix(in oklab,var(--chip),var(--pri) 20%)}
.freq{display:flex;align-items:center;gap:6px}
select,input{background:var(--bg2);color:var(--fg);border:1px solid var(--border);border-radius:10px;padding:6px 8px}
.card{border:1px solid var(--border);border-radius:14px;padding:14px;margin:12px 0;background:var(--card);box-shadow:var(--shadow)}
.card h3{margin:0 0 6px 0;font-size:16px}
.card ul{margin:6px 0 0 18px}
nav.nav a{color:var(--pri);text-decoration:none}
nav.nav a:hover{text-decoration:underline}
.kpi{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;margin:12px 0}
.kpi .tile{padding:14px;border:1px solid var(--border);border-radius:14px;background:var(--card)}
.kpi .num{font-size:22px;font-weight:700}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:8px}
.hm{display:grid;grid-template-columns:repeat(10, minmax(10px, 1fr));gap:4px}
.hm .cell{height:16px;border-radius:4px}
.legend{display:flex;align-items:center;gap:8px;margin-top:6px}
.legend span{display:inline-block;width:16px;height:16px;border-radius:4px}
.badge{display:inline-block;border:1px solid var(--border);border-radius:10px;padding:2px 8px;font-size:12px;color:var(--muted)}
.themeSel{margin-left:8px}
.list{display:flex;flex-direction:column;gap:8px}
.list .item{padding:8px;border:1px solid var(--border);border-radius:10px;background:var(--bg2);cursor:pointer}
.list .item:hover{border-color:var(--pri)}