:root { color-scheme: dark; --bg:#111315; --fg:#eef2f3; --line:#4a5559; --field:#1d2427; --muted:#b8c3c7; --accent:#157d90; --alert:#f0c16e; }
:root[data-theme="light"] { color-scheme:light; --bg:#fff; --fg:#152126; --line:#a4b2b8; --field:#f4f7f8; --muted:#43565f; --accent:#096477; --alert:#815600; }
* { box-sizing:border-box; letter-spacing:0; }
[hidden] { display:none !important; }
body { margin:0; background:var(--bg); color:var(--fg); font-family:system-ui,sans-serif; font-size:16px; }
header { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; padding:16px 24px; border-bottom:1px solid var(--line); }
.brand { display:flex; gap:12px; align-items:center; color:var(--fg); text-decoration:none; font-weight:700; }
main { max-width:1120px; margin:auto; padding:20px 24px 60px; }
h1 { font-size:24px; margin:12px 0; overflow-wrap:anywhere; } h2 { font-size:19px; margin:24px 0 12px; } h3 { font-size:17px; }
p { line-height:1.7; overflow-wrap:anywhere; } #status { min-height:28px; color:var(--muted); } #status[data-error="true"] { color:var(--alert); }
a { color:var(--fg); text-underline-offset:4px; }
button,.action,nav a { min-height:44px; padding:10px 16px; color:var(--fg); border:1px solid var(--line); background:var(--field); border-radius:6px; font:inherit; cursor:pointer; text-decoration:none; display:inline-flex; align-items:center; justify-content:center; gap:8px; overflow-wrap:anywhere; }
button.primary { background:var(--accent); color:white; border-color:var(--accent); } button:disabled { opacity:.6; cursor:wait; }
button:hover,nav a:hover { border-color:var(--accent); } :focus-visible { outline:3px solid var(--accent); outline-offset:3px; }
nav,.actions { display:flex; flex-wrap:wrap; gap:12px; margin:16px 0; }
.restriction { color:var(--alert); border-left:3px solid var(--alert); padding-left:12px; }
form { display:grid; gap:16px; margin:16px 0 24px; } .login-form { max-width:420px; }
label { display:grid; gap:8px; font-size:15px; } input,textarea,select { width:100%; min-height:44px; padding:10px; font:inherit; color:var(--fg); background:var(--field); border:1px solid var(--line); border-radius:4px; }
textarea { resize:vertical; line-height:1.6; } form > button { justify-self:start; } .form-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.heading { display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; } .columns { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; }
.columns > section { min-width:0; } .list > div,.list > button { width:100%; text-align:left; padding:12px 0; border:0; border-bottom:1px solid var(--line); border-radius:0; background:transparent; display:flex; gap:12px; justify-content:space-between; align-items:center; }
.list small { color:var(--muted); } pre { white-space:pre-wrap; overflow-wrap:anywhere; line-height:1.7; font-family:inherit; }
fieldset { border:1px solid var(--line); padding:12px; } fieldset label { display:flex; align-items:center; margin:8px 0; } input[type="checkbox"] { width:20px; min-height:20px; }
@media(max-width:680px) { header { padding:12px 16px; } main { padding:12px 16px 40px; } .columns,.form-grid { grid-template-columns:minmax(0,1fr); } h1 { font-size:21px; } .list > div { align-items:flex-start; } }