:root { --bg:#f7f7f5; --fg:#1d1d1b; --muted:#6b6b66; --card:#fff; --line:#e3e2dc; --accent:#1f4e8c; --danger:#a52a2a; --ok:#2e6b30; }
@media (prefers-color-scheme: dark) { :root { --bg:#161615; --fg:#ecebe6; --muted:#a3a29b; --card:#1f1f1d; --line:#34332f; --accent:#7aa7e6; --danger:#e57373; --ok:#81c784; } }
* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--fg); font:16px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }
main { max-width: 860px; margin: 0 auto; padding: 24px 16px 64px; }
h1 { font-size: 1.6rem; margin: 0 0 12px; } h2 { font-size: 1.15rem; margin: 28px 0 10px; }
label { display:block; margin: 10px 0; font-size: .92rem; color: var(--muted); }
label.check { display:flex; gap:8px; align-items:center; color: var(--fg); }
input, select { display:block; width:100%; margin-top:4px; padding:9px 10px; font:inherit; color:var(--fg); background:var(--card); border:1px solid var(--line); border-radius:8px; }
input[type=checkbox] { width:auto; display:inline; margin:0; }
button, a.button { display:inline-block; padding:9px 16px; border:0; border-radius:8px; background:var(--accent); color:#fff; font:inherit; cursor:pointer; text-decoration:none; }
button.secondary { background:transparent; color:var(--fg); border:1px solid var(--line); }
button.danger { background:transparent; color:var(--danger); border:1px solid var(--danger); }
.row { display:flex; gap:10px; align-items:center; flex-wrap:wrap; } .spread { justify-content:space-between; }
.grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); column-gap:16px; }
.card { background:var(--card); border:1px solid var(--line); border-radius:10px; padding:14px; margin:10px 0; }
.muted { color:var(--muted); } .small { font-size:.85rem; } .error { color:var(--danger); } .ok { color:var(--ok); }
.notice { background:var(--card); border-left:4px solid var(--accent); padding:10px 14px; border-radius:6px; }
.pill { font-size:.75rem; padding:2px 8px; border-radius:20px; border:1px solid var(--line); margin-left:6px; }
.pill.send { border-color:var(--danger); color:var(--danger); }
.pill.organize { border-color:var(--accent); color:var(--accent); }
code { font-family: ui-monospace, Menlo, monospace; font-size:.9em; word-break: break-all; } code.big { font-size:1rem; }
.qr svg { width: 220px; height: 220px; background:#fff; padding:8px; border-radius:8px; }
table { width:100%; border-collapse:collapse; font-size:.85rem; display:block; overflow-x:auto; }
th, td { text-align:left; padding:6px 8px; border-bottom:1px solid var(--line); vertical-align:top; }
fieldset { border:1px solid var(--line); border-radius:8px; margin:14px 0; }
a { color: var(--accent); }
.pill.off { color:var(--muted); }
.pill.on { border-color:var(--ok); color:var(--ok); }
td form { display:inline; }