:root { color-scheme: light dark; --bg:#f5f6f8; --card:#fff; --text:#171a20; --muted:#5d6673; --line:#dfe3e8; --accent:#1f62c9; --in:#177245; --out:#b3261e; }
@media (prefers-color-scheme: dark) { :root { --bg:#14181f; --card:#1d222b; --text:#eef1f5; --muted:#9aa4b2; --line:#2e3541; --accent:#7fb4ff; --in:#5fd39b; --out:#ff9a92; } }
* { box-sizing: border-box; }
body { margin:0; font:16px/1.45 -apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif; background:var(--bg); color:var(--text); padding: env(safe-area-inset-top) 16px calc(env(safe-area-inset-bottom) + 24px); }
main { max-width: 720px; margin: 0 auto; }
h1 { font-size: 24px; margin: 20px 0 2px; } h2 { font-size: 15px; color: var(--muted); margin: 0 0 10px; font-weight: 600; }
.tag { display:inline-block; font-size:13px; color:var(--muted); margin-bottom:14px; }
section { background:var(--card); border:1px solid var(--line); border-radius:14px; padding:14px; margin:12px 0; }
.row { display:flex; flex-wrap:wrap; gap:8px; }
button, input, select { font:inherit; min-height:44px; border-radius:10px; border:1px solid var(--line); background:var(--bg); color:var(--text); padding:8px 12px; }
input { flex:1 1 160px; min-width:0; } button.primary { background:var(--accent); border-color:var(--accent); color:#fff; font-weight:600; }
@media (prefers-color-scheme: dark) { button.primary { color:#10141a; } }
ul { list-style:none; margin:0; padding:0; } li { display:flex; gap:10px; align-items:center; padding:10px 0; border-top:1px solid var(--line); } li:first-child { border-top:0; }
li .d { flex:1; min-width:0; overflow-wrap:anywhere; } li small { color:var(--muted); display:block; }
.a { font-variant-numeric: tabular-nums; font-weight:600; white-space:nowrap; } .in { color:var(--in); } .out { color:var(--out); }
.status { font-size:14px; color:var(--muted); overflow-wrap:anywhere; white-space:pre-wrap; margin:10px 0 0; }
.warn { color:var(--out); }
.gap { margin-bottom:8px; } a.btn { display:inline-flex; align-items:center; min-height:44px; padding:8px 12px; border:1px solid var(--line); border-radius:10px; color:var(--accent); text-decoration:none; font-weight:600; background:var(--bg); }
.ok { color:var(--in); font-weight:600; } .no { color:var(--out); font-weight:600; } .hint { font-size:14px; color:var(--muted); margin:0 0 10px; }
table { width:100%; border-collapse:collapse; font-size:14px; } td, th { text-align:left; padding:7px 4px; border-top:1px solid var(--line); overflow-wrap:anywhere; } th { color:var(--muted); font-weight:600; border-top:0; }
textarea { width:100%; min-height:120px; font:13px ui-monospace, Menlo, monospace; border-radius:10px; border:1px solid var(--line); background:var(--bg); color:var(--text); padding:8px; }
input[type=file] { flex:1 1 100%; }
#pass { flex:1 1 100%; }