:root { --bg:#f6f7f9; --card:#fff; --ink:#1b1f24; --muted:#5b6570; --line:#d9dee4; --accent:#0b57d0; --warn:#8a5a00; --warnbg:#fff4d6; --demo:#b3261e; --demobg:#fde7e4; }
@media (prefers-color-scheme: dark) { :root { --bg:#14171a; --card:#1d2227; --ink:#eceff2; --muted:#a3adb8; --line:#333b44; --accent:#8ab4f8; --warn:#ffd27a; --warnbg:#3a2f12; --demo:#ffb4ab; --demobg:#3d1f1c; } }
* { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:var(--ink); font:16px/1.6 system-ui,"Malgun Gothic",sans-serif; }
header, main, footer { max-width:980px; margin:0 auto; padding:12px 16px; }
header { display:flex; flex-wrap:wrap; gap:8px 16px; align-items:center; justify-content:space-between; }
nav a { margin-right:12px; color:var(--accent); }
h1 { font-size:1.4rem; margin:0; } h2 { font-size:1.15rem; margin:0 0 8px; } h3,h4 { margin:12px 0 4px; }
.card { background:var(--card); border:1px solid var(--line); border-radius:10px; padding:14px 16px; margin:12px 0; }
.banner { padding:8px 12px; border-radius:8px; margin:8px 0; font-weight:600; }
.banner.demo { background:var(--demobg); color:var(--demo); }
.banner.info { background:var(--warnbg); color:var(--warn); }
.grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:8px; }
.stat { border:1px solid var(--line); border-radius:8px; padding:8px 10px; } .stat b { display:block; font-size:1.3rem; } .stat small { color:var(--muted); }
button, input, select, textarea { font:inherit; color:inherit; background:var(--card); border:1px solid var(--line); border-radius:8px; padding:8px 12px; }
button { cursor:pointer; background:var(--accent); color:#fff; border-color:var(--accent); } button.secondary { background:var(--card); color:var(--ink); border-color:var(--line); }
button:disabled { opacity:.5; cursor:not-allowed; }
.row { display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin:8px 0; }
.table-wrap { overflow-x:auto; } table { border-collapse:collapse; width:100%; font-size:.92rem; } th,td { border-bottom:1px solid var(--line); padding:6px 8px; text-align:left; vertical-align:top; }
.kv th { width:11em; color:var(--muted); font-weight:500; }
.tag { display:inline-block; padding:1px 8px; border-radius:99px; border:1px solid var(--line); font-size:.82rem; }
.muted { color:var(--muted); } em { color:var(--warn); display:block; font-style:normal; font-size:.88rem; }
textarea { width:100%; min-height:140px; font:12px/1.4 ui-monospace,monospace; }
footer { color:var(--muted); font-size:.85rem; }
@media print { nav, button, .noprint { display:none !important; } body { background:#fff; color:#000; } }