:root { --bg:#f4f2ec; --card:#fff; --ink:#1b1e23; --muted:#565c66; --line:#e2ded4; --accent:#0e5a5e; --good:#1f6b3a; --good-soft:#e4f2e8; --bad:#9b1c1c; --bad-soft:#fbe9e9; --amber:#8a4206; --amber-soft:#fcefd9; }
@media (prefers-color-scheme: dark) { :root { --bg:#14171a; --card:#1c2024; --ink:#eceae4; --muted:#a5abb3; --line:#2d3238; --accent:#4fb3b0; --good:#6ccf8b; --good-soft:#1b3324; --bad:#f08c8c; --bad-soft:#3a1d1d; --amber:#f0b25e; --amber-soft:#3a2c17; } }
* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--ink); font:16px/1.55 system-ui, -apple-system, "Segoe UI", sans-serif; }
.top { display:flex; align-items:center; gap:10px; padding:14px 16px; border-bottom:1px solid var(--line); background:var(--card); }
.label { font-size:12px; font-weight:700; color:var(--amber); background:var(--amber-soft); padding:2px 8px; border-radius:999px; }
main { max-width:560px; margin:0 auto; padding:16px; display:flex; flex-direction:column; gap:14px; }
h1 { font-size:24px; margin:4px 0; } h2 { font-size:17px; margin:0; }
p { margin:0; }
.muted { color:var(--muted); } .small { font-size:13px; }
.flash { background:var(--amber-soft); color:var(--amber); padding:12px 14px; border-radius:10px; font-weight:500; }
.howto { margin:0; padding:14px 14px 14px 34px; background:var(--card); border:1px solid var(--line); border-radius:12px; display:flex; flex-direction:column; gap:6px; }
.demo { font-size:14px; color:var(--muted); }
.doc { background:var(--card); border:1px solid var(--line); border-radius:12px; padding:16px; display:flex; flex-direction:column; gap:12px; }
.doc.accepted { border-color:var(--good); }
.doc.rejected { border-color:var(--bad); }
.doc-head { display:flex; justify-content:space-between; align-items:flex-start; gap:10px; }
.chip { font-size:12px; font-weight:600; padding:3px 9px; border-radius:999px; background:var(--line); color:var(--muted); white-space:nowrap; }
.chip.ok { background:var(--good-soft); color:var(--good); } .chip.bad { background:var(--bad-soft); color:var(--bad); } .chip.wait { background:var(--amber-soft); color:var(--amber); }
.reason { color:var(--bad); font-size:14px; }
form { display:flex; flex-direction:column; gap:10px; }
.btn { display:flex; align-items:center; justify-content:center; height:48px; border-radius:10px; border:0; background:var(--accent); color:#fff; font-size:16px; font-weight:600; text-decoration:none; cursor:pointer; }
@media (prefers-color-scheme: dark) { .btn { color:#0b1415; } }
.btn.ghost { background:transparent; color:var(--accent); border:1.5px solid var(--accent); }
.file { display:flex; flex-direction:column; gap:6px; font-size:14px; color:var(--muted); }
.file input { font-size:15px; padding:10px; border:1px dashed var(--line); border-radius:10px; background:var(--bg); color:var(--ink); }
.done, .closed { background:var(--card); border:1px solid var(--line); border-radius:12px; padding:18px; display:flex; flex-direction:column; gap:6px; }
.done { border-color:var(--good); } .done h2 { color:var(--good); }
footer { max-width:560px; margin:8px auto 24px; padding:0 16px; font-size:12px; color:var(--muted); }
a { color:var(--accent); }