:root {
  font-family: "Segoe UI Variable", "Segoe UI", system-ui, sans-serif;
  color: #e6e9ef; background: #0d1119; color-scheme: dark; font-size: 14px;
  --panel: #171e29; --panel-raised: #1c2532; --input: #101721; --border: #2b3546;
  --muted: #9ba8ba; --accent: #91e5cb; --secondary: #b8acf5; --heading: #f4f0e8; --sidebar-width: 190px;
}
* { box-sizing: border-box; }
body { margin: 0; display: flex; min-height: 100vh; }
aside { width: var(--sidebar-width); flex-shrink: 0; background: #111721; border-right: 1px solid #242d3c; padding: 26px 14px 18px; display: flex; flex-direction: column; position: fixed; inset: 0 auto 0 0; }
.brand { display: flex; gap: 10px; align-items: center; font-weight: 700; font-size: 16px; letter-spacing: -.4px; color: var(--heading); }
.brand small { display: block; font-size: 10px; font-weight: 400; color: var(--muted); margin-top: 5px; letter-spacing: 0; line-height: 1.5; }
.emblem { display: grid; place-items: center; width: 35px; height: 39px; flex-shrink: 0; background: #24473f; border: 1px solid #3a6d60; color: #b7f4de; border-radius: 11px; font-size: 15px; letter-spacing: -1px; }
nav { display: grid; gap: 5px; margin-top: 35px; }
button { font: inherit; font-size: 13px; line-height: 1.4; border: 1px solid var(--border); background: var(--panel-raised); color: inherit; border-radius: 8px; padding: 9px 13px; cursor: pointer; transition: background-color .12s, border-color .12s, color .12s; }
button:hover { background: #243244; border-color: #536779; }
button:disabled { opacity: .45; cursor: default; }
button:disabled:hover { background: var(--panel-raised); border-color: var(--border); }
button:focus-visible, summary:focus-visible, a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
nav button { display: flex; gap: 9px; align-items: center; text-align: left; border: 1px solid transparent; background: transparent; padding: 11px 10px; font-size: 12px; font-weight: 550; color: #a9b6c9; }
nav button:hover { background: #1c2532; color: var(--heading); border-color: #2a3746; }
nav .selected { background: #213a35; color: #b2f0db; border-color: #35544b; }
nav .selected:hover { background: #29463e; border-color: #4d7768; }
.sz-icon { width: 18px; height: 18px; flex-shrink: 0; display: inline-block; vertical-align: middle; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.sr-only:focus { position: static; width: auto; height: auto; padding: 6px 8px; margin: 0; overflow: visible; clip-path: none; white-space: normal; border: 1px solid var(--accent); }
.primary { background: #8fe0c5; color: #132c26; font-weight: 700; border-color: #8fe0c5; }
.primary:hover { background: #b0f0da; color: #102b24; border-color: #b0f0da; }
.session { margin-top: auto; display: grid; gap: 10px; border-top: 1px solid var(--border); padding-top: 19px; font-size: 12px; color: var(--heading); }
.session button { background: #182630; border-color: #324452; }
.session small, footer, .hint { color: var(--muted); font-size: 11px; line-height: 1.65; }
footer { margin-top: 23px; font-size: 9px; letter-spacing: 1.2px; color: #687c91; }
main { margin-left: var(--sidebar-width); padding: 34px; width: calc(100% - var(--sidebar-width)); max-width: 1600px; min-width: 0; }
main > header, .toolbar { display: flex; align-items: center; justify-content: space-between; gap: 22px; }
.eyebrow { color: var(--accent); font-size: 9px; font-weight: 650; letter-spacing: 1.9px; margin: 0; }
h1, h2, h3, h4 { color: var(--heading); letter-spacing: -.45px; }
h1 { font-size: 30px; font-weight: 650; margin: 8px 0 26px; }
h2 { font-weight: 650; }
#save-state { color: var(--muted); font-size: 11px; text-align: right; line-height: 1.5; }
.toolbar { margin: 0 0 22px; }
.toolbar p { color: var(--muted); line-height: 1.6; }
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr)); gap: 15px; }
.card, .panel, form { background: var(--panel); border: 1px solid var(--border); border-radius: 12px; padding: 23px; }
.card { border-top-color: #3b4b5b; box-shadow: 0 7px 20px #00000012; }
.card h2 { margin: 0 0 8px; font-size: 19px; }
.card p { color: var(--muted); white-space: pre-wrap; overflow-wrap: anywhere; max-height: 140px; overflow: hidden; line-height: 1.7; }
.card button { margin-top: 10px; }
.empty { padding: 40px; border: 1px dashed #425369; border-radius: 12px; color: var(--muted); grid-column: 1/-1; }
form { margin-top: 24px; }
label { display: grid; gap: 7px; margin: 17px 0; color: var(--muted); font-size: 12px; }
input, textarea, select { font: inherit; width: 100%; min-width: 0; border: 1px solid #344254; border-radius: 7px; background: var(--input); color: #e6e9ef; padding: 10px 12px; }
textarea { resize: vertical; line-height: 1.6; }
input::placeholder, textarea::placeholder { color: #6f7f93; }
input:focus, textarea:focus, select:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
input[type=checkbox], input[type=radio], input[type=range] { accent-color: var(--accent); }
.actions { display: flex; gap: 8px; flex-wrap: wrap; }
.panel { margin-bottom: 18px; }
.panel h2 { margin-top: 0; font-size: 21px; }
.panel p { line-height: 1.7; overflow-wrap: anywhere; }
code { display: block; overflow-wrap: anywhere; color: var(--muted); margin: 12px 0; }
pre { white-space: pre-wrap; overflow-wrap: anywhere; font: inherit; color: var(--muted); font-size: 12px; line-height: 1.7; }
progress { width: 100%; accent-color: var(--accent); }
.notice { padding: 15px 18px; background: #332825; border: 1px solid #6c5045; border-radius: 9px; line-height: 1.6; color: #f0d1bb; }
[hidden] { display: none !important; }
body.light { --panel: #fff; --panel-raised: #f2f5f6; --input: #f6f8fa; --border: #d4dce4; --muted: #5e6d7e; --accent: #207e67; --secondary: #7265ae; --heading: #1a2b3b; background: #edf1f5; color: #233546; color-scheme: light; }
body.light aside { background: #e4eaf0; border-color: #d0d9e2; }
body.light nav button { color: #546579; }
body.light nav button:hover { background: #dae5e7; border-color: #bfd0d4; color: #243b48; }
body.light nav .selected, body.light nav .selected:hover { background: #cce9df; color: #185344; border-color: #a5cec0; }
body.light button:hover { background: #e6edf2; border-color: #8b9cab; }
body.light .primary:hover { background: #b0f0da; color: #102b24; border-color: #7dbea8; }
body.light input, body.light textarea, body.light select { color: #233546; border-color: #bdcad7; }
body.light .session button { background: #edf3f5; border-color: #bdcad7; }
body.light .notice { background: #fff3e8; border-color: #d8b698; color: #6d4b2f; }
@media(max-width: 1100px) {
  main { padding: 26px 22px; }
  aside { padding: 22px 12px 16px; }
}
@media(max-width: 650px) {
  body { display: block; }
  aside { position: static; width: 100%; padding: 18px; border-right: 0; border-bottom: 1px solid var(--border); }
  .brand { font-size: 18px; }
  nav { margin-top: 18px; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; }
  nav button { padding: 10px 8px; min-width: 0; font-size: 12px; }
  .session, footer { display: none; }
  main { margin-left: 0; width: 100%; padding: 22px 18px; }
  main > header { gap: 12px; }
  h1 { font-size: 27px; }
  #save-state { max-width: 110px; }
  .toolbar { align-items: flex-start; flex-wrap: wrap; gap: 10px; }
  .card, .panel, form { padding: 18px; }
}
@media(prefers-reduced-motion: reduce) { button { transition: none; } }