:root {
  --color-bg-canvas: #FBF7F0;
  --color-bg-surface: #FFFFFF;
  --color-bg-elevated: #FFFFFF;
  --color-bg-sunken: #F2ECE1;
  --color-bg-inverse: #0F1226;
  --color-bg-night: #0F1226;
  --color-bg-night-elevated: rgba(255, 255, 255, 0.08);
  --color-text-primary: #1B1A2E;
  --color-text-secondary: #5E5D7A;
  --color-text-muted: #8C8BA5;
  --color-text-inverse: #FBF7F0;
  --color-text-on-action: #FFFFFF;
  --color-text-on-accent: #3D2705;
  --color-text-on-night: #F2F2F8;
  --color-text-on-night-muted: rgba(242, 242, 248, 0.7);
  --color-action-primary: #7A56F0;
  --color-action-primary-pressed: #5C3FC4;
  --color-action-primary-shadow: #5C3FC4;
  --color-action-secondary: #FFFFFF;
  --color-action-secondary-shadow: #E4DCCC;
  --color-action-ghost: transparent;
  --color-action-disabled: #E4DCCC;
  --color-action-disabled-text: #8C8BA5;
  --color-accent-xp: #E0961A;
  --color-accent-xp-soft: #FFF1D6;
  --color-accent-life: #FF5C7A;
  --color-accent-life-soft: #FFE6EB;
  --color-accent-streak: #FF7A1A;
  --color-accent-success: #26B372;
  --color-accent-success-soft: #E1F8EC;
  --color-accent-error: #E0405E;
  --color-accent-error-soft: #FFE6EB;
  --color-accent-info: #2CB1BC;
  --color-accent-info-soft: #E3F4F6;
  --color-accent-mascot: #3DD68C;
  --color-border-subtle: #E4DCCC;
  --color-border-strong: #CFC4AE;
  --color-border-focus: #7A56F0;
  --color-code-bg: #0F1226;
  --color-code-text: #FBF7F0;
  --color-code-keyword: #C792EA;
  --color-code-string: #C3E88D;
  --color-code-number: #F78C6C;
  --color-code-comment: #7F8C93;
  --color-code-punctuation: #B6C0C4;
  --color-pair-a: #7A56F0;
  --color-pair-b: #E0961A;
  --color-pair-c: #26B372;
  --color-pair-d: #2CB1BC;
  --color-pair-e: #E0405E;
  --color-pair-f: #2F7FD9;
  --color-pair-g: #CF4FA8;
  --color-pair-h: #FF7A1A;
  --color-overlay: rgba(15, 18, 38, 0.6);
  --color-skeleton: #F2ECE1;
  --space-0: 0px;
  --space-xxs: 4px;
  --space-xs: 8px;
  --space-s: 12px;
  --space-m: 16px;
  --space-l: 24px;
  --space-xl: 32px;
  --space-2xl: 40px;
  --space-3xl: 48px;
  --space-4xl: 64px;
  --radius-xs: 6px;
  --radius-s: 10px;
  --radius-m: 14px;
  --radius-l: 20px;
  --radius-xl: 28px;
  --radius-full: 999px;
  --control-md: 48px;
  --edge-button: 4px;
  --edge-card: 2px;
  --hairline: 1px;
  --content-max: 520px;
  --page-max: 1040px;
  --tracking-label: 0.3px;
  --font-sans: Inter, system-ui, sans-serif;
  --font-mono: JetBrains Mono, ui-monospace, monospace;
  --text-body: 16px / 23px;
  --text-small: 14px / 20px;
  --text-title: 24px / 30px;
  --text-label: 14px / 18px;
  --text-code: 13px / 20px;
}
@media (prefers-color-scheme: dark) {
  :root {
    --color-bg-canvas: #0F1226;
  --color-bg-surface: #151936;
  --color-bg-elevated: #1D2244;
  --color-bg-sunken: #0A0C1C;
  --color-bg-inverse: #FBF7F0;
  --color-bg-night: #0F1226;
  --color-bg-night-elevated: rgba(255, 255, 255, 0.08);
  --color-text-primary: #F2F5F4;
  --color-text-secondary: #A8B8BB;
  --color-text-muted: #6E8286;
  --color-text-inverse: #1B1A2E;
  --color-text-on-action: #FFFFFF;
  --color-text-on-accent: #3D2705;
  --color-text-on-night: #F2F2F8;
  --color-text-on-night-muted: rgba(242, 242, 248, 0.7);
  --color-action-primary: #8F6CFF;
  --color-action-primary-pressed: #7A56F0;
  --color-action-primary-shadow: #5C3FC4;
  --color-action-secondary: #1D2244;
  --color-action-secondary-shadow: #0A0C1C;
  --color-action-ghost: transparent;
  --color-action-disabled: #1D2244;
  --color-action-disabled-text: #6E8286;
  --color-accent-xp: #FFB020;
  --color-accent-xp-soft: rgba(245, 181, 68, 0.18);
  --color-accent-life: #FF5C7A;
  --color-accent-life-soft: rgba(255, 107, 94, 0.18);
  --color-accent-streak: #FF7A1A;
  --color-accent-success: #3DD68C;
  --color-accent-success-soft: rgba(61, 214, 140, 0.18);
  --color-accent-error: #FF5C7A;
  --color-accent-error-soft: rgba(255, 107, 94, 0.18);
  --color-accent-info: #6FC3CF;
  --color-accent-info-soft: rgba(111, 195, 207, 0.18);
  --color-accent-mascot: #3DD68C;
  --color-border-subtle: #1D2244;
  --color-border-strong: #2A3060;
  --color-border-focus: #B49CFF;
  --color-code-bg: #0A0C1C;
  --color-code-text: #F2F5F4;
  --color-code-keyword: #C792EA;
  --color-code-string: #C3E88D;
  --color-code-number: #F78C6C;
  --color-code-comment: #7F8C93;
  --color-code-punctuation: #B6C0C4;
  --color-pair-a: #8F6CFF;
  --color-pair-b: #FFB020;
  --color-pair-c: #3DD68C;
  --color-pair-d: #6FC3CF;
  --color-pair-e: #FF5C7A;
  --color-pair-f: #4FA3FF;
  --color-pair-g: #F06FC8;
  --color-pair-h: #FF7A1A;
  --color-overlay: rgba(0, 0, 0, 0.6);
  --color-skeleton: #1D2244;
  }
}

* { box-sizing: border-box; }
html { color-scheme: light dark; }
body { margin: 0; background: var(--color-bg-canvas); color: var(--color-text-primary); font: var(--text-body) var(--font-sans); }
a { color: var(--color-action-primary); }
code, .mono { font: var(--text-code) var(--font-mono); }
header.top { display: flex; align-items: center; gap: var(--space-l); padding: var(--space-s) var(--space-l); background: var(--color-bg-surface); border-bottom: var(--edge-card) solid var(--color-border-subtle); }
header.top .brand { font-weight: 700; margin-right: auto; }
header.top nav a { margin-right: var(--space-m); text-decoration: none; font: var(--text-label) var(--font-sans); }
header.top .me { color: var(--color-text-secondary); font: var(--text-small) var(--font-sans); }
main { max-width: var(--page-max); margin: 0 auto; padding: var(--space-l); }
h1 { font: var(--text-title) var(--font-sans); font-weight: 700; margin: 0 0 var(--space-m); }
h2 { font: var(--text-label) var(--font-sans); text-transform: uppercase; letter-spacing: var(--tracking-label); color: var(--color-text-secondary); margin: var(--space-xl) 0 var(--space-s); }
.card { background: var(--color-bg-surface); border: var(--hairline) solid var(--color-border-subtle); border-bottom-width: var(--edge-card); border-radius: var(--radius-m); padding: var(--space-m); margin-bottom: var(--space-m); }
.card.narrow { max-width: var(--content-max); margin: var(--space-3xl) auto; }
table { width: 100%; border-collapse: collapse; background: var(--color-bg-surface); border: var(--hairline) solid var(--color-border-subtle); border-radius: var(--radius-m); overflow: hidden; }
th, td { text-align: left; padding: var(--space-s) var(--space-m); border-bottom: var(--hairline) solid var(--color-border-subtle); vertical-align: top; }
th { font: var(--text-label) var(--font-sans); color: var(--color-text-secondary); background: var(--color-bg-sunken); }
tr:last-child td { border-bottom: 0; }
dl { display: grid; grid-template-columns: max-content 1fr; gap: var(--space-xs) var(--space-l); margin: 0; }
dt { color: var(--color-text-secondary); }
dd { margin: 0; }
form.inline { display: flex; flex-wrap: wrap; gap: var(--space-s); align-items: flex-end; }
label { display: flex; flex-direction: column; gap: var(--space-xxs); font: var(--text-label) var(--font-sans); color: var(--color-text-secondary); }
label.check { flex-direction: row; align-items: center; }
input[type="text"], input[type="email"], input[type="number"], select { height: var(--control-md); padding: 0 var(--space-s); border: var(--hairline) solid var(--color-border-strong); border-radius: var(--radius-s); background: var(--color-bg-surface); color: var(--color-text-primary); font: var(--text-body) var(--font-sans); min-width: var(--control-md); }
input:focus, select:focus { outline: var(--edge-card) solid var(--color-border-focus); outline-offset: var(--hairline); }
.hint { color: var(--color-text-muted); font: var(--text-small) var(--font-sans); margin: var(--space-xs) 0 0; }
button, .button { display: inline-flex; align-items: center; justify-content: center; height: var(--control-md); padding: 0 var(--space-l); border: 0; border-bottom: var(--edge-button) solid var(--color-action-primary-shadow); border-radius: var(--radius-s); background: var(--color-action-primary); color: var(--color-text-on-action); font: var(--text-label) var(--font-sans); cursor: pointer; text-decoration: none; }
button:active { border-bottom-width: 0; transform: translateY(var(--edge-button)); }
button.secondary, .button.secondary { background: var(--color-action-secondary); border-bottom-color: var(--color-action-secondary-shadow); color: var(--color-text-primary); }
button.danger { background: var(--color-accent-error); border-bottom-color: var(--color-accent-error); }
.badge { display: inline-block; padding: 0 var(--space-xs); border-radius: var(--radius-full); font: var(--text-small) var(--font-sans); font-weight: 600; background: var(--color-bg-sunken); color: var(--color-text-secondary); }
.badge.ok { background: var(--color-accent-success-soft); color: var(--color-accent-success); }
.badge.warn { background: var(--color-accent-xp-soft); color: var(--color-accent-xp); }
.badge.off { background: var(--color-accent-error-soft); color: var(--color-accent-error); }
.notice { padding: var(--space-s) var(--space-m); border-radius: var(--radius-s); background: var(--color-accent-info-soft); color: var(--color-text-primary); margin-bottom: var(--space-m); }
.notice.error { background: var(--color-accent-error-soft); }
.pager { display: flex; justify-content: flex-end; margin-top: var(--space-m); }
.muted { color: var(--color-text-muted); }
.actions { display: flex; gap: var(--space-s); flex-wrap: wrap; align-items: center; }