:root { --bg:#f6f7f9; --surface:#fff; --fg:#1b1f24; --muted:#5d6672; --line:#d9dde3; --accent:#1f5fae; --warn:#b3261e; --ok:#1a7f45; }
@media (prefers-color-scheme: dark) { :root { --bg:#14171b; --surface:#1d2127; --fg:#e8ebef; --muted:#9aa4b0; --line:#2e353d; --accent:#6aa7f0; --warn:#f2877f; --ok:#58c98a; } }
* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--fg); font:16px/1.5 system-ui,-apple-system,Segoe UI,Roboto,sans-serif; }
header.bar { display:flex; gap:12px; align-items:center; justify-content:space-between; padding:10px 16px; background:var(--surface); border-bottom:1px solid var(--line); }
header.bar b { font-size:17px; }
main { max-width:560px; margin:0 auto; padding:20px 16px 48px; }
main.wide { max-width:1000px; }
.card { background:var(--surface); border:1px solid var(--line); border-radius:10px; padding:16px; margin:14px 0; }
h1 { font-size:22px; margin:8px 0 12px; } h2 { font-size:18px; margin:0 0 8px; }
label { display:block; font-weight:600; margin:10px 0 4px; }
input[type=email], input[type=text] { width:100%; padding:10px 12px; font-size:17px; border:1px solid var(--line); border-radius:8px; background:var(--bg); color:var(--fg); }
input.code { font-size:28px; letter-spacing:.35em; text-align:center; }
button { padding:10px 16px; font-size:16px; border:0; border-radius:8px; background:var(--accent); color:#fff; cursor:pointer; margin-top:12px; }
button.ghost { background:transparent; color:var(--accent); border:1px solid var(--line); margin-top:0; }
.muted { color:var(--muted); } .err { color:var(--warn); }
@media print { header.bar, button { display:none; } }
#drop { border:2px dashed var(--line); border-radius:10px; padding:18px; text-align:center; color:var(--muted); }
#drop.over { border-color:var(--accent); color:var(--fg); }
.warnbox { border:1px solid var(--warn); border-radius:10px; padding:10px 14px; color:var(--warn); margin:10px 0; }
table.files { width:100%; border-collapse:collapse; font-size:14px; } table.files td, table.files th { text-align:left; padding:5px 6px; border-top:1px solid var(--line); }
.btns { display:flex; gap:10px; flex-wrap:wrap; margin:14px 0; } .btns a { flex:1 1 150px; text-decoration:none; }
.btns a { display:flex; } .btns a button { width:100%; min-height:84px; padding:18px 10px; font-size:18px; margin:0; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.scrollbox { max-height:560px; overflow-y:auto; border:1px solid var(--line); border-radius:10px; background:var(--surface); }
.scrollbox table { width:100%; border-collapse:collapse; font-size:15px; } .scrollbox th { position:sticky; top:0; background:var(--surface); text-align:left; padding:8px; border-bottom:1px solid var(--line); }
.scrollbox td { padding:6px 8px; border-top:1px solid var(--line); } td.acts { white-space:nowrap; text-align:right; }
button.small { padding:5px 10px; font-size:14px; margin:0; } button:disabled { opacity:.5; cursor:not-allowed; }
textarea { width:100%; min-height:160px; padding:10px 12px; font-size:16px; border:1px solid var(--line); border-radius:8px; background:var(--bg); color:var(--fg); font-family:inherit; }
details.upload { margin:12px 0; } details.upload summary { display:inline-block; cursor:pointer; list-style:none; padding:8px 16px; border:1px solid var(--line); border-radius:8px; font-weight:600; background:var(--surface); }
details.upload summary::-webkit-details-marker { display:none; } details.upload[open] summary { margin-bottom:8px; }

.helpbtn { display:inline-block; padding:5px 12px; margin-right:10px; border:1px solid var(--line); border-radius:8px; text-decoration:none; font-weight:600; }