:root { color-scheme: dark; --bg:#111315; --surface:#1b1e21; --border:#3a4046; --text:#f1f3f5; --muted:#b2bac2; --accent:#f4ca64; }
* { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:var(--text); font:14px/1.6 system-ui,-apple-system,"Segoe UI",sans-serif; }
header { display:flex; align-items:center; gap:20px; padding:16px 24px; border-bottom:1px solid var(--border); }
header button { margin-left:auto; }
.brand { font-size:18px; font-weight:700; }
main { max-width:960px; margin:36px auto; padding:0 24px 48px; }
h1 { font-size:28px; margin:0 0 8px; text-wrap:balance; }
h2 { font-size:18px; margin:0 0 16px; }
h3 { font-size:16px; }
p { overflow-wrap:anywhere; }
.muted { color:var(--muted); }
a { color:var(--accent); text-underline-offset:3px; }
section { margin-top:24px; background:var(--surface); border:1px solid var(--border); border-radius:10px; padding:24px; }
label { display:block; font-weight:600; margin-bottom:8px; }
input,select,button { font:inherit; min-height:40px; border-radius:6px; }
input,select { width:100%; color:var(--text); background:var(--bg); border:1px solid var(--border); padding:8px 12px; min-width:0; }
button { border:1px solid transparent; background:var(--accent); color:#191611; padding:8px 16px; cursor:pointer; font-weight:600; touch-action:manipulation; }
button:hover { filter:brightness(1.1); }
button:disabled { opacity:.55; cursor:not-allowed; }
.secondary { background:transparent; color:var(--text); border-color:var(--border); }
:focus-visible { outline:3px solid var(--accent); outline-offset:3px; }
.fields { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.fields>div { min-width:0; }
.actions,.login-row { display:flex; align-items:center; flex-wrap:wrap; gap:12px; }
.login-row input { flex:1; min-width:180px; }
#confirmation { margin-top:24px; border-top:1px solid var(--border); padding-top:8px; }
#message { min-height:24px; white-space:pre-wrap; }
#message.error { color:#ffb4ab; }
.history-row { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:12px; border-top:1px solid var(--border); padding:14px 0; }
.history-row p { margin:0; min-width:0; }
.history-row small { color:var(--muted); display:block; }
.skip { position:absolute; top:-100px; color:var(--bg); background:var(--accent); padding:8px; z-index:1; }
.skip:focus { top:0; }
[hidden] { display:none !important; }
@media(max-width:640px) { main { margin-top:24px; padding:0 16px 32px; } section { padding:18px; } .fields { grid-template-columns:1fr; } button,input,select { min-height:44px; } header { padding:12px 16px; gap:12px; } }