:root { color-scheme: dark light; --bg:#14161a; --card:#1d2026; --fg:#e8eaed; --mute:#9aa0a6; --acc:#f0b429; --line:#2c3038; --err:#ff6b6b; }
@media (prefers-color-scheme: light) { :root { --bg:#f6f7f9; --card:#fff; --fg:#1b1d21; --mute:#5f6670; --acc:#b7791f; --line:#dfe2e7; --err:#c53030; } }
* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--fg); font:16px/1.4 system-ui,sans-serif; padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }
header { display:flex; align-items:baseline; justify-content:space-between; padding:14px 16px 4px; }
h1 { margin:0; font-size:1.3rem; } h2 { font-size:1rem; margin:16px 0 4px; }
.status { color:var(--mute); font-size:.85rem; }
main { padding:8px 16px 32px; max-width:640px; margin:0 auto; }
textarea, input, select { width:100%; background:var(--card); color:var(--fg); border:1px solid var(--line); border-radius:10px; padding:10px; font:inherit; }
textarea { resize:vertical; }
label { display:block; margin-top:10px; color:var(--mute); font-size:.85rem; } label > * { margin-top:4px; color:var(--fg); }
button { font:inherit; padding:10px 14px; min-height:44px; border-radius:10px; border:1px solid var(--line); background:var(--card); color:var(--fg); }
button.primary { background:var(--acc); color:#1b1d21; border-color:var(--acc); font-weight:600; }
button.danger { color:var(--err); } button:disabled { opacity:.5; }
button[aria-pressed="true"] { border-color:var(--err); color:var(--err); }
.row { display:flex; gap:8px; flex-wrap:wrap; margin-top:10px; } .row > button { flex:1; }
.hint { color:var(--mute); font-size:.85rem; min-height:1.2em; margin:6px 0 0; } .err { color:var(--err); }
#library { margin-top:20px; } #list { list-style:none; padding:0; margin:12px 0 0; display:grid; gap:8px; }
#list button { width:100%; text-align:left; display:grid; gap:2px; } #list small { color:var(--mute); }
#list .empty { color:var(--mute); text-align:center; padding:20px; }
#loginForm { display:grid; gap:10px; margin-top:20vh; }
dialog { width:min(640px,100%); max-height:100dvh; height:100dvh; margin:0 auto; border:0; background:var(--bg); color:var(--fg); padding:16px; overflow:auto; }
dialog::backdrop { background:rgba(0,0,0,.6); }