:root { --bg:#fafafa; --fg:#1f2328; --mute:#6b7280; --line:#e5e7eb; --card:#fff; --acc:#2b5fd9; --red:#b91c1c; --redbg:#fee2e2; --chip:#eee; }
@media (prefers-color-scheme: dark) { :root { --bg:#111418; --fg:#e6e6e6; --mute:#9aa3ad; --line:#2a2f36; --card:#181c22; --acc:#7aa2ff; --red:#f87171; --redbg:#3b1d1d; --chip:#2a2f36; } }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin:0; background:var(--bg); color:var(--fg); font: 15px/1.45 -apple-system, "Segoe UI", "Hiragino Sans", "Noto Sans JP", sans-serif; }
main, .hdr, .banner { max-width: 720px; margin: 0 auto; padding: 0 12px; }
.hdr { display:flex; align-items:center; justify-content:space-between; padding:10px 12px; border-bottom:1px solid var(--line); position:sticky; top:0; background:var(--bg); z-index:2; }
.brand { font-weight:700; }
.ctl { display:flex; gap:6px; align-items:center; }
.seg button, .ctl > button, .login button { border:1px solid var(--line); background:var(--card); color:var(--fg); border-radius:8px; padding:4px 8px; font-size:13px; }
.seg button.on { background:var(--acc); color:#fff; border-color:var(--acc); }
.banner { background:var(--redbg); color:var(--red); padding:8px 12px; margin:8px auto; border-radius:8px; }
.banner button { margin-left:8px; }
.login { padding-top:40px; }
.login form { display:flex; gap:6px; }
.login input { flex:1; padding:8px; border:1px solid var(--line); border-radius:8px; background:var(--card); color:var(--fg); }
.tabs { display:flex; gap:6px; margin:10px 0; }
.tabs a { flex:1; text-align:center; padding:8px 0; border-radius:8px; background:var(--chip); color:var(--fg); text-decoration:none; }
.tabs a.on { background:var(--acc); color:#fff; font-weight:700; }
.toolbar { display:flex; gap:14px; font-size:13px; color:var(--mute); margin:4px 0 8px; }
.sec { font-size:12px; letter-spacing:.06em; color:var(--mute); margin:14px 0 6px; text-transform:uppercase; }
.sec .n { color:var(--fg); font-weight:700; margin-left:4px; }
ul.cards, ul.rows { list-style:none; margin:0; padding:0; }
.card, .row { background:var(--card); border:1px solid var(--line); border-radius:10px; padding:8px 10px; margin-bottom:6px; cursor:pointer; }
.card:hover, .row:hover { border-color:var(--acc); }
.row.blocked { border-left:3px solid var(--red); }
.t { font-weight:600; }
.id { color:var(--mute); font-size:11px; font-weight:400; margin-left:6px; user-select:all; }
.m { color:var(--mute); font-size:12px; margin-top:2px; display:flex; flex-wrap:wrap; gap:6px; align-items:center; }
.b { display:inline-block; font-size:11px; padding:0 6px; border-radius:8px; background:var(--chip); }
.b.st-blocked { background:var(--redbg); color:var(--red); }
.b.pri { background:var(--fg); color:var(--bg); }
.b.stale { opacity:.7; }
.chip { display:inline-block; font-size:10px; padding:1px 6px; border-radius:9px; background:var(--chip); margin-right:6px; vertical-align:middle; }
.chip.cs { background:#dbeafe; color:#1e3a8a; } .chip.corp { background:#fde68a; color:#78350f; } .chip.rd { background:#d1fae5; color:#065f46; } .chip.priv { background:#ede9fe; color:#4c1d95; }
.more { margin-top:8px; padding-top:8px; border-top:1px dashed var(--line); font-size:13px; }
.more .lbl { display:block; font-size:11px; color:var(--mute); margin-bottom:2px; }
.more .body { margin-top:8px; }
.crumbs { font-size:13px; color:var(--mute); margin:6px 0 8px; display:flex; flex-wrap:wrap; gap:4px; }
.crumb { color:var(--acc); text-decoration:none; }
.chev { float:right; color:var(--mute); }
.note, .empty { color:var(--mute); font-size:12px; }
.lock { cursor:pointer; }