:root { color-scheme: light; font-family: system-ui, "Microsoft YaHei", sans-serif; color: #16283e; background: #f3f6fa; line-height: 1.5; }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; }
a { color: #214fc5; text-underline-offset: 3px; }
h1, h2, p { margin: 0 0 .8em; }
h1 { line-height: 1.14; font-size: clamp(1.7rem, 4vw, 2.5rem); }
h2 { font-size: 1.13rem; }
small { display: block; font-size: .8rem; color: #526579; overflow-wrap: anywhere; }
.muted { color: #526579; }
.wrap { width: min(1160px, calc(100% - 2rem)); margin: auto; }
.masthead { background: #10243e; color: white; }
.bar, .intro, .panel-head, .hosts li { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.bar { min-height: 62px; }
.bar a { color: #fff; }
.brand { font-weight: 700; text-decoration: none; }
.mark { display: inline-grid; place-items: center; background: #28496f; border-radius: 8px; width: 2rem; height: 2rem; margin-right: .35rem; }
nav { display: flex; align-items: center; gap: .65rem; }
main { padding: 2.25rem 0; }
.eyebrow { color: #345dbb; font-size: .73rem; letter-spacing: .1em; font-weight: 750; }
.card, dialog { background: #fff; border: 1px solid #dce5f0; border-radius: 14px; }
.login { max-width: 420px; margin: 2rem auto; padding: 1.6rem; }
.login form { margin-bottom: 1rem; }
.stats { display: grid; grid-template-columns: repeat(3,1fr); gap: .8rem; }
.stats .card, .panel { padding: 1rem 1.2rem; }
.stats span { color: #526579; }
.stats strong { display: block; font-size: 1.7rem; }
.panel { margin-top: 1rem; }
.panel-head { margin-bottom: .6rem; }
.panel-head h2 { margin: 0; }
.table-scroll { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; min-width: 690px; font-size: .91rem; }
th { background: #edf3fa; color: #445d77; text-align: left; }
th, td { padding: .7rem; vertical-align: top; border-bottom: 1px solid #e2ebf3; }
label { display: grid; gap: .3rem; margin: .6rem 0; font-weight: 600; }
.search { grid-template-columns: auto minmax(110px, 250px); align-items: center; }
input, select, textarea, button { font: inherit; border: 1px solid #b6c7d8; border-radius: 7px; padding: .45rem .65rem; background: #fff; color: inherit; }
textarea { width: 100%; overflow-wrap: anywhere; }
button { cursor: pointer; white-space: nowrap; }
button:disabled { opacity: .65; cursor: default; }
button:hover:not(:disabled) { border-color: #245bd9; }
.primary { background: #245bd9; border-color: #245bd9; color: #fff; font-weight: 650; }
.compact { font-size: .77rem; padding: .15rem .35rem; margin: .15rem 0 .3rem; }
.actions { display: flex; flex-wrap: wrap; gap: .35rem; }
.hosts, .audit { padding: 0; margin: 0; list-style: none; }
.hosts li, .audit li { border-top: 1px solid #e2ebf3; padding: .6rem 0; }
#message { padding: .7rem 1rem; background: #edf3ff; border: 1px solid #c4d5f8; border-radius: 8px; }
dialog { width: min(760px, calc(100% - 2rem)); padding: 1.1rem; color: inherit; }
dialog::backdrop { background: #1128449c; }
canvas { max-width: 100%; height: auto; }
.doc { max-width: 880px; }
.doc section { margin-bottom: 1rem; padding: 1.2rem; }
.doc pre { background: #10243e; color: #f0f6ff; padding: .85rem; border-radius: 7px; overflow-x: auto; }
.doc li + li { margin-top: .45rem; }
@media (max-width: 540px) { .bar, .panel-head, .hosts li { flex-wrap: wrap; } .stats .card { padding: .65rem; } }

.bar button { color: #16283e; }
.bar { flex-wrap: wrap; padding-block: .45rem; }
.section-nav { gap: .25rem; flex-wrap: wrap; }
.section-nav a { text-decoration: none; padding: .42rem .55rem; border-radius: 6px; white-space: nowrap; }
.section-nav a:hover, .section-nav a[aria-current="page"] { background: #28496f; color: #fff; }
.account-nav { flex-wrap: wrap; }
.page { margin-top: 0; }
.page .panel-head { flex-wrap: wrap; }
.page h1 { font-size: clamp(1.45rem, 3vw, 2rem); margin: 0; }
@media (max-width: 900px) { .section-nav { order: 3; flex-basis: 100%; } }
.monitor { padding: clamp(1rem,3vw,2rem); border: 1px solid #254564; border-radius: 16px; color: #e7f5ff; background: radial-gradient(ellipse at top right,#154764 0,transparent 52%), linear-gradient(135deg,#071526,#0a2339); }
.monitor h1 { margin-bottom: .25rem; }
.monitor .eyebrow { color: #65d8f6; }
.monitor .intro { margin-bottom: 1.1rem; }
#account-badge, .monitor-note, .monitor small { color: #a9c4d9; }
#account-badge, .monitor-note { margin: .45rem 0 0; font-size: .85rem; }
.monitor .card, .monitor-panel { background: #0c2339; border: 1px solid #27455f; border-radius: 10px; }
.monitor .stats span { color: #acc8dd; }
.monitor .stats strong { color: #e7fbff; font-variant-numeric: tabular-nums; }
.monitor-panel { margin-top: .85rem; padding: .9rem 1rem; }
.monitor button:not(.primary), .monitor select { background: #102e48; color: #e7f5ff; border-color: #446984; }
.legend, .rank-control { display: flex; flex-wrap: wrap; gap: .65rem; align-items: center; margin: 0; font-size: .82rem; }
.down { color: #4ce6e0; }
.up { color: #9aafff; }
.host-chart { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,270px),1fr)); gap: .65rem; }
.host-plot, .rank-grid > div { background: #091b2e; padding: .7rem; border: 1px solid #203b54; border-radius: 8px; min-width: 0; }
.host-plot strong, .rank-label { overflow-wrap: anywhere; }
.traffic-bar { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: .6rem; margin-top: .2rem; font-size: .8rem; font-variant-numeric: tabular-nums; }
.traffic-bar progress { width: 100%; height: .45rem; border: 0; border-radius: 20px; background: #213c53; overflow: hidden; appearance: none; }
.traffic-bar progress::-webkit-progress-bar { background: #213c53; }
.traffic-bar progress.down::-webkit-progress-value { background: #4ce6e0; }
.traffic-bar progress.up::-webkit-progress-value { background: #9aafff; }
.traffic-bar progress.down::-moz-progress-bar { background: #4ce6e0; }
.traffic-bar progress.up::-moz-progress-bar { background: #9aafff; }
.rank-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .65rem; }
.rank-grid h3 { margin: 0 0 .3rem; font-size: .9rem; }
.rank-list { padding-left: 1.6rem; margin: 0; max-height: 27rem; overflow: auto; }
.rank-list li { padding: .36rem .25rem; border-bottom: 1px solid #21384e; }
.rank-list li::marker { color: #8fa9bf; font-variant-numeric: tabular-nums; }
.rank-label { font-size: .83rem; }
.rank-label small { display: inline; margin-left: .4rem; }
.account-hosts { max-height: 13rem; overflow: auto; }
.account-hosts label { display: flex; align-items: center; }
@media (max-width: 660px) { .rank-grid { grid-template-columns: 1fr; } .monitor .intro { align-items: flex-start; flex-wrap: wrap; } }