:root { --bg:#f4f5f7; --card:#fff; --fg:#14161a; --muted:#6b7280; --line:#e6e8eb; --up:#0f8a4a; --down:#d32f2f; color-scheme: light; }
body { margin:0; background:var(--bg); color:var(--fg); font:17px/1.45 system-ui, -apple-system, "Segoe UI", sans-serif; }
main { max-width:1200px; margin:0 auto; padding:40px 24px; }
header { display:flex; justify-content:space-between; align-items:center; margin-bottom:28px; }
h1 { font-size:28px; margin:0; letter-spacing:-0.01em; }
h2 { font-size:19px; font-weight:600; margin:0 0 16px; }
.mode { font-size:15px; font-weight:600; padding:6px 14px; border-radius:6px; background:#e8edf5; color:#3b4a63; text-transform:uppercase; letter-spacing:0.04em; }
.mode.mainnet { background:#fde8e8; color:var(--down); }
.card { background:var(--card); border:1px solid var(--line); border-radius:10px; padding:24px 28px; }
.stats { display:grid; grid-template-columns:repeat(auto-fit, minmax(170px, 1fr)); gap:16px; }
.stats > div > span { display:block; font-size:15px; color:var(--muted); margin-bottom:8px; }
.stats b { font-size:38px; font-weight:650; letter-spacing:-0.02em; }
section.card { margin-top:20px; }
.num, b { font-variant-numeric:tabular-nums; }
table { width:100%; border-collapse:collapse; font-size:17px; }
th, td { text-align:left; padding:14px 16px 14px 0; border-bottom:1px solid var(--line); white-space:nowrap; }
tr:last-child td { border-bottom:0; }
th { font-weight:500; font-size:14px; color:var(--muted); text-transform:uppercase; letter-spacing:0.03em; }
td:first-child { font-weight:600; }
.wrap { overflow-x:auto; }
.up { color:var(--up); } .down { color:var(--down); }
.empty { color:var(--muted); font-weight:400 !important; }
#status { color:var(--muted); font-size:14px; margin-top:20px; }
#status.err { color:var(--down); }
.head { display:flex; justify-content:space-between; align-items:center; margin-bottom:16px; }
.head h2 { margin:0; }
.btn { font:inherit; font-size:15px; font-weight:600; padding:8px 16px; border-radius:6px; cursor:pointer; background:#fff; color:var(--down); border:1px solid #f1b5b5; }
.btn:hover { background:#fdecec; }
.btn:disabled { opacity:.5; cursor:default; }
td .btn { padding:5px 12px; font-size:14px; }
nav { display:flex; gap:4px; border-bottom:1px solid var(--line); margin-bottom:24px; overflow-x:auto; }
nav button { white-space:nowrap; }
nav button { font:inherit; font-size:17px; font-weight:600; color:var(--muted); background:none; border:0; border-bottom:2px solid transparent; padding:10px 16px; margin-bottom:-1px; cursor:pointer; }
nav button.on { color:var(--fg); border-bottom-color:var(--fg); }
.btn.plain { color:var(--fg); border-color:var(--line); }
.btn.plain:hover { background:#f0f1f3; }
.btn.go { color:#fff; background:var(--fg); border-color:var(--fg); }
.btn.go:hover { background:#333; }
.tools { display:flex; gap:12px; flex-wrap:wrap; align-items:center; margin-bottom:16px; }
.tools input[type=text] { font:inherit; font-size:15px; padding:8px 12px; border:1px solid var(--line); border-radius:6px; width:360px; max-width:100%; }
.tools label { font-size:15px; color:var(--muted); display:flex; gap:6px; align-items:center; cursor:pointer; }
.hint { color:var(--muted); font-size:14px; margin:0 0 16px; }
th[data-k] { cursor:pointer; user-select:none; }
th[data-k]:hover, th.sorted { color:var(--fg); }
tr.chosen td { background:#f1f7f3; }
.star { font-size:20px; line-height:1; background:none; border:0; cursor:pointer; color:#c4c8cf; padding:0 4px; }
.star.on { color:#e0a100; }
.star:hover { color:#e0a100; }
td.star-cell { width:28px; padding-right:4px; }
td a { color:inherit; }
@media (max-width:600px) { main { padding:24px 16px; } .stats b { font-size:30px; } .card { padding:18px; } }
.state { display:flex; align-items:center; gap:10px; }
.state b { font-size:26px; }
.dot { width:12px; height:12px; border-radius:50%; background:#c4c8cf; flex:none; }
.dot.paper { background:#2f6fde; } .dot.live { background:var(--up); } .dot.err { background:var(--down); }
.modes { display:inline-flex; border:1px solid var(--line); border-radius:8px; overflow:hidden; flex-wrap:wrap; }
.modes button { font:inherit; font-size:16px; font-weight:600; padding:10px 18px; border:0; background:#fff; color:var(--muted); cursor:pointer; }
.modes button + button { border-left:1px solid var(--line); }
.modes button.on { background:var(--fg); color:#fff; }
.modes button:hover:not(.on) { background:#f0f1f3; color:var(--fg); }
.field { font:inherit; font-size:15px; padding:6px 10px; border:1px solid var(--line); border-radius:6px; width:100px; }
.tag { font-size:13px; font-weight:600; padding:2px 8px; border-radius:4px; background:#eef0f3; color:#3b4a63; }
.tag.order { background:#e6f4ec; color:var(--up); } .tag.error { background:#fde8e8; color:var(--down); }
.tag.paper { background:#e8effb; color:#2f6fde; } .tag.skip { color:var(--muted); }
#sLog td { white-space:normal; vertical-align:top; }
#sLog td:first-child, #sLog td:nth-child(2), #sLog td:last-child { white-space:nowrap; }
.coins { display:flex; gap:8px; flex-wrap:wrap; }
.coins span { border:1px solid var(--line); border-radius:6px; padding:4px 10px; font-size:15px; }
.periods { display:flex; gap:4px; flex-wrap:wrap; }
.periods button { font:inherit; font-size:14px; padding:6px 12px; border:1px solid var(--line); background:#fff; border-radius:6px; cursor:pointer; color:var(--muted); }
.periods button.on { color:var(--fg); border-color:var(--fg); }
.now { display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:12px 14px; background:#f7f8fa; border-radius:8px; margin-bottom:20px; font-size:16px; }
.pulse { width:10px; height:10px; border-radius:50%; background:#c4c8cf; flex:none; }
.pulse.ok { background:var(--up); animation:pulse 2s infinite; } .pulse.bad { background:var(--down); }
@keyframes pulse { 50% { opacity:.35; } }
@media (prefers-reduced-motion: reduce) { .pulse.ok { animation:none; } }
.tcards { display:grid; grid-template-columns:repeat(auto-fill, minmax(min(360px, 100%), 1fr)); gap:16px; }
.tcard { border:1px solid var(--line); border-radius:8px; padding:16px; min-width:0; }
.thead { display:flex; justify-content:space-between; align-items:baseline; gap:8px; flex-wrap:wrap; }
table.mini { font-size:15px; } table.mini td { padding:6px 12px 6px 0; } table.mini td:first-child { font-weight:600; }
.btn.small { padding:3px 10px; font-size:13px; }
.tip { position:absolute; pointer-events:none; background:#fff; border:1px solid var(--line); border-radius:6px; padding:6px 10px; font-size:14px; box-shadow:0 2px 6px rgba(0,0,0,.06); white-space:nowrap; }
.sw { display:inline-block; width:10px; height:10px; border-radius:2px; margin-right:6px; vertical-align:-1px; }
.legend { display:flex; gap:16px; flex-wrap:wrap; font-size:14px; color:var(--muted); margin-bottom:8px; }
dialog { border:1px solid var(--line); border-radius:12px; padding:24px; width:min(420px, calc(100vw - 32px)); box-shadow:0 10px 40px rgba(0,0,0,.15); }
dialog::backdrop { background:rgba(20,22,26,.35); }
.jlabel { display:block; font-size:15px; color:var(--muted); margin-bottom:6px; }
.jcalc { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:14px; }
.jcalc > div { background:#f7f8fa; border-radius:8px; padding:10px 12px; }
.jcalc span { display:block; font-size:13px; color:var(--muted); }
.jcalc b { font-size:18px; }
.jcalc p { grid-column:1 / -1; }
.ltitle { font-weight:600; }
#sLog td, #log td { padding-top:12px; padding-bottom:12px; }
.live { font-size:13px; color:var(--muted); font-variant-numeric:tabular-nums; white-space:nowrap; }
.live::before { content:''; display:inline-block; width:8px; height:8px; border-radius:50%; background:#c4c8cf; margin-right:6px; vertical-align:1px; }
.live.on::before { background:var(--up); } .live.off::before { background:var(--down); }
@media (max-width:600px) { .live { display:none; } }