:root { --bg: #F6F8FC; --ink: #1F2328; --mute: #5B6478; --line: #E3E8EF; --surface: #fff; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: #0E141F; --ink: #E6EDF5; --mute: #93A0B2; --line: #273244; --surface: #151D2B; } }
:root[data-theme="dark"] { --bg: #0E141F; --ink: #E6EDF5; --mute: #93A0B2; --line: #273244; --surface: #151D2B; }
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 16px/1.6 "MAI Jakarta", system-ui, sans-serif; }
.dev { max-width: 640px; margin: 0 auto; padding: 48px 16px; }
.dev h1 { font-size: 26px; margin: 0 0 8px; }
.dev p { color: var(--mute); margin: 0 0 20px; }
.dev label { display: block; font-weight: 600; margin-bottom: 6px; }
.dev input { width: 100%; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--ink); font: inherit; }