* { box-sizing: border-box; }
html, body { margin: 0; font: 14px system-ui, sans-serif; background: #f6f7f9; color: #1c2030; }
header { position: sticky; top: 0; background: #ffffff; border-bottom: 1px solid #e2e5ec; padding: 10px 14px; z-index: 10; }
header .title-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 8px; flex-wrap: wrap; }
header h1 { margin: 0; font-size: 18px; font-weight: 600; display: inline-flex; align-items: center; gap: 10px; }
.title-icon { border-radius: 6px; box-shadow: 0 1px 2px rgba(0,0,0,0.2); flex-shrink: 0; }
header h1 small { color: #7a8294; font-weight: 400; margin-left: 6px; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: #1c2030; padding: 6px 12px 6px 6px; border: 1px solid #d6dae3; border-radius: 999px; background: linear-gradient(180deg, #ffffff, #f3f5f9); transition: border-color 120ms, transform 120ms, box-shadow 120ms; }
.brand:hover { border-color: #355bb5; box-shadow: 0 2px 8px rgba(53,91,181,0.12); }
.brand-mark { display: block; width: 26px; height: 26px; border-radius: 6px; box-shadow: 0 1px 2px rgba(0,0,0,0.2); flex-shrink: 0; }
.brand-text { font-size: 13px; font-weight: 600; letter-spacing: 0.01em; }
.brand-llc { color: #7a8294; font-weight: 500; font-size: 11px; margin-left: 3px; }
.bar { display: flex; gap: 10px; align-items: center; margin-top: 6px; flex-wrap: wrap; }
.bar label { display: flex; align-items: center; gap: 4px; color: #4b5263; }
button, select, input { background: #ffffff; color: #1c2030; border: 1px solid #cfd4df; padding: 5px 10px; border-radius: 4px; font: inherit; }
button { cursor: pointer; }
button:hover:not(:disabled) { background: #eef1f6; border-color: #b6bdcc; }
button:disabled { opacity: 0.45; cursor: not-allowed; }
.status { padding: 3px 8px; border-radius: 3px; font-size: 12px; border: 1px solid transparent; }
.status.idle { background: #eef0f4; color: #5b6275; border-color: #dde1e9; }
.status.ok { background: #e3f5e7; color: #1f6b32; border-color: #c2e6c9; }
.status.err { background: #fdecec; color: #a32020; border-color: #f4c4c4; }
main { padding: 10px 14px 60px; max-width: 1400px; margin: 0 auto; }
details.group { background: #ffffff; border: 1px solid #e2e5ec; border-radius: 6px; margin-bottom: 8px; }
details.group > summary { padding: 8px 12px; cursor: pointer; font-weight: 600; user-select: none; display: flex; justify-content: space-between; }
details.group > summary .count { color: #7a8294; font-weight: 400; font-size: 12px; }
table { width: 100%; border-collapse: collapse; }
th, td { padding: 4px 8px; border-top: 1px solid #eceff4; text-align: left; font-size: 13px; }
th { color: #6b7384; font-weight: 500; background: #f3f5f9; position: sticky; top: 110px; }
tbody tr:hover { background: #f7f9fc; }
tr.row-ro td .val-in { background: transparent; border-color: transparent; color: #4b5263; }
.val-in { width: 8em; }
td.num { text-align: right; font-variant-numeric: tabular-nums; }
td.act button { padding: 2px 8px; font-size: 12px; }
tr.dirty { background: #fff7dd; }
tr.dirty .val-in { background: #fff7dd; border-color: #e8d27a; }
tr.error td { background: #fdecec; }
tr.error .val-in { border-color: #e0a0a0; }
.addr { color: #7a8294; font-family: ui-monospace, monospace; font-size: 12px; }
.unit { color: #7a8294; font-size: 12px; margin-left: 4px; }
footer { position: fixed; bottom: 0; left: 0; right: 0; background: #ffffff; border-top: 1px solid #e2e5ec; padding: 6px 14px; font-size: 12px; color: #4b5263; display: flex; justify-content: space-between; align-items: center; gap: 12px; }
footer .credit { color: #7a8294; white-space: nowrap; }
footer .credit a { color: #355bb5; text-decoration: none; }
footer .credit a:hover { text-decoration: underline; }
tr.hidden { display: none; }
details.hidden { display: none; }