:root { color-scheme: light; --bg:#eef1f4; --fg:#12161c; --muted:#5c6773; --card:#fff; --line:#d8dee6; --accent:#1d4e89; }
body { margin:0; font:15px/1.5 "IBM Plex Sans", ui-sans-serif, system-ui, sans-serif; background:var(--bg); color:var(--fg); }
.shell { display:grid; grid-template-columns:200px 1fr; min-height:100vh; }
aside { background:var(--card); border-right:1px solid var(--line); padding:16px; }
.brand { font-weight:700; color:var(--accent); margin:0 0 12px; }
nav { display:flex; flex-direction:column; gap:6px; }
nav a, button, .btn { color:var(--fg); text-decoration:none; background:transparent; border:1px solid var(--line); border-radius:8px; padding:8px 10px; min-height:40px; }
button, .btn { background:var(--accent); color:#f7fafc; border:0; cursor:pointer; }
main { padding:24px; }
.narrow { max-width:440px; margin:48px auto; }
label { display:block; margin:10px 0; font-size:14px; color:var(--muted); }
input, select, textarea { width:100%; box-sizing:border-box; margin-top:4px; padding:8px; border:1px solid var(--line); border-radius:8px; background:#fff; color:var(--fg); }
table { width:100%; border-collapse:collapse; background:var(--card); }
th, td { text-align:left; padding:8px; border-bottom:1px solid var(--line); vertical-align:top; }
.grid { display:grid; gap:12px; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); }
.card { display:block; background:var(--card); border:1px solid var(--line); border-radius:8px; padding:12px; }
.muted { color:var(--muted); }
.bad { color:#9b2c2c; }
@media (max-width:800px) { .shell { grid-template-columns:1fr; } }