:root { color-scheme: dark; font: 16px/1.6 system-ui, sans-serif; background: #101722; color: #e4eaf2; }
* { box-sizing: border-box; } body { margin: 0; } main { max-width: 1240px; padding: 2rem; margin: auto; }
h1, h2, h3, h4 { line-height: 1.35; color: #d4e7ff; } h1 { font-size: 2.2rem; margin: .3rem 0 1rem; } h2 { font-size: 1.35rem; margin: .3rem 0; } h3 { font-size: 1.1rem; } h4 { font-size: 1rem; margin: 1.2rem 0 .4rem; }
header { margin-bottom: 1rem; } .eyebrow { color: #86bdf2; letter-spacing: .14em; font-size: .8rem; font-weight: 700; } .muted { color: #a9bad0; font-size: .92rem; }
.panel { background: #182332; border: 1px solid #33465e; border-radius: .75rem; padding: 1.5rem; margin: 1rem 0; } .inset { background: #202f42; border: 1px solid #6a86a5; border-radius: .5rem; padding: 1rem; margin: 1rem 0; }
.toolbar { display: flex; justify-content: space-between; align-items: center; gap: .8rem; flex-wrap: wrap; } .toolbar p { margin: .3rem 0; }
#tabs { display: flex; gap: .4rem; overflow-x: auto; padding-bottom: .2rem; margin: 1rem 0 0; scrollbar-width: thin; }
#tabs button { flex: 0 0 auto; background: #182332; border-color: #33465e; font-weight: 600; border-radius: .5rem .5rem 0 0; }
#tabs button[aria-selected="true"] { background: #275d93; border-color: #5b92c7; }
.metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .8rem; margin: 1rem 0 1.4rem; } .metrics > div { padding: .9rem; border: 1px solid #3a5470; border-radius: .5rem; background: #112133; overflow-wrap: anywhere; } .metrics span { display: block; font-size: .85rem; color: #a9bad0; } .metrics strong { display: block; margin-top: .3rem; font-size: 1.15rem; }
.metrics.small { grid-template-columns: repeat(3, minmax(0, 1fr)); } .metrics.small strong { font-size: 1rem; }
label { display: inline-flex; flex-direction: column; margin: .4rem .8rem .7rem 0; max-width: 100%; gap: .3rem; } label.inline { flex-direction: row; align-items: center; margin: 0; }
.check { flex-direction: row; align-items: center; gap: .5rem; } .check input { width: 1.15rem; height: 1.15rem; flex: none; }
input, select, button { font: inherit; padding: .55rem .8rem; border: 1px solid #6b7c94; border-radius: .4rem; background: #101e2e; color: inherit; max-width: 100%; }
button { cursor: pointer; background: #275d93; border-color: #5b92c7; font-weight: 600; } button.secondary { background: #23354b; border-color: #56718f; } button.danger { background: #8a2f2f; border-color: #c46a6a; } button:hover { filter: brightness(1.15); } button:disabled { opacity: .45; cursor: default; } td button { margin: 0 .4rem .4rem 0; font-size: .9rem; padding: .4rem .7rem; }
:focus-visible { outline: 3px solid #9cc9ff; outline-offset: 3px; } [aria-busy="true"] { opacity: .65; cursor: wait; }
#status { min-height: 1.5rem; color: #ffda93; white-space: pre-wrap; padding: .4rem 0; margin: 0; } #status.ok { color: #9fe3a8; }
.scroll { overflow-x: auto; } table { border-collapse: collapse; width: 100%; margin: .6rem 0; } th, td { text-align: left; padding: .6rem .6rem; border-bottom: 1px solid #344960; vertical-align: top; overflow-wrap: anywhere; } th { color: #b8d1ed; font-size: .88rem; background: #142031; } td { font-size: .94rem; } [hidden] { display: none !important; }
.form-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: 0 .8rem; align-items: end; } .form-grid .wide { grid-column: 1 / -1; } .form-grid label { margin-right: 0; } .form-grid h4 { margin-top: 0; }
.stack { display: flex; flex-direction: column; } .stack label { margin-right: 0; } .stack button { align-self: flex-start; }
.columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.chart { width: 100%; height: 190px; background: #112133; border: 1px solid #3a5470; border-radius: .5rem; } .chart svg { width: 100%; height: 100%; display: block; }
.chart .line { fill: none; stroke: #7cc4ff; stroke-width: 2; vector-effect: non-scaling-stroke; } .chart .area { fill: rgba(124, 196, 255, .14); } .chart .grid { stroke: #2b3f57; stroke-width: 1; vector-effect: non-scaling-stroke; } .chart text { fill: #a9bad0; font-size: 11px; }
.bars { display: grid; gap: .35rem; margin: .6rem 0; } .bar { display: grid; grid-template-columns: 6.5rem 1fr 2.5rem; gap: .5rem; align-items: center; font-size: .9rem; } .bar-track { background: #112133; border: 1px solid #2f4560; border-radius: .3rem; height: 1rem; overflow: hidden; } .bar-fill { background: #3d7fbf; height: 100%; width: 0; }
.banner { background: #4d3510; border: 1px solid #c79a45; color: #ffe2a8; border-radius: .5rem; padding: .7rem 1rem; margin: .8rem 0; font-weight: 600; }
.secret { background: #173322; border: 1px solid #4f9a6b; border-radius: .5rem; padding: .8rem 1rem; margin: .8rem 0; } .secret code { font-size: 1.35rem; letter-spacing: .08em; background: #0d1d14; padding: .2rem .6rem; border-radius: .3rem; user-select: all; }
.result { white-space: pre-wrap; } .log { margin: .4rem 0 1rem; padding-left: 1.4rem; font-size: .92rem; color: #c9d7e8; }
.badge { display: inline-block; padding: 0 .45rem; border-radius: .3rem; font-size: .8rem; font-weight: 700; margin-left: .3rem; background: #2c4a6b; } .badge.owner { background: #6b4f1c; } .badge.on { background: #1f5a37; } .badge.bot { background: #4b3b6b; } .badge.ban { background: #7a2525; }
@media (max-width: 760px) { main { padding: .8rem; } .panel { padding: 1rem; } .metrics, .metrics.small { grid-template-columns: repeat(2, minmax(0, 1fr)); } h1 { font-size: 1.6rem; } .columns { grid-template-columns: 1fr; } .scroll table { min-width: 520px; } .form-grid { grid-template-columns: 1fr; } label { width: 100%; margin-right: 0; } .check { width: 100%; } .bar { grid-template-columns: 5.5rem 1fr 2rem; } }