:root {
  color-scheme: dark;
  font: 15px/1.55 system-ui, "Microsoft YaHei", sans-serif;
  color: #edf4f5;
  background: #10171b;
  --panel: #182227;
  --border: #314149;
  --quiet: #aebdc1;
  --accent: #8fe6ca;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; }
.top, .brand, .heading, .actions { display: flex; align-items: center; gap: 1rem; }
.top { justify-content: space-between; padding: 1rem max(1.2rem, calc((100vw - 1040px) / 2)); border-bottom: 1px solid var(--border); }
.brand { gap: .65rem; }
.brand div { display: grid; line-height: 1.35; }
.brand div span { color: var(--quiet); font-size: .83rem; }
.mark { background: var(--accent); color: #112721; padding: .25rem .7rem; border-radius: .45rem; font-size: 1.25rem; font-weight: 750; }
main { width: min(1040px, calc(100% - 2rem)); margin: 1.5rem auto 3rem; }
.panel { margin-bottom: 1.25rem; padding: 1.3rem; background: var(--panel); border: 1px solid var(--border); border-radius: .7rem; }
.login { width: min(100%, 440px); margin: 7vh auto; }
.heading { justify-content: space-between; flex-wrap: wrap; margin-bottom: .5rem; }
.badge { border: 1px solid #46675c; border-radius: 1.25rem; padding: .35rem .85rem; color: var(--accent); }
.eyebrow { font-size: .85rem; letter-spacing: .12em; color: var(--accent); margin: 0 0 .2rem; }
h1, h2 { margin: 0 0 .25rem; line-height: 1.25; }
h1 { font-size: clamp(1.6rem, 4vw, 2.3rem); }
h2 { font-size: 1.3rem; }
p { margin: .35rem 0 .85rem; color: var(--quiet); }
nav { display: flex; flex-wrap: wrap; gap: 1rem; margin: .75rem 0 1rem; }
nav a { color: var(--accent); text-underline-offset: .2em; }
label { display: grid; gap: .35rem; margin-bottom: .8rem; font-weight: 600; }
input, select, button { font: inherit; border-radius: .4rem; min-height: 2.55rem; padding: .45rem .65rem; }
input, select { min-width: 0; width: 100%; color: inherit; background: #10171b; border: 1px solid #50616a; }
input[readonly] { color: var(--quiet); }
button { border: 1px solid transparent; font-weight: 650; background: var(--accent); color: #112721; cursor: pointer; }
button.plain { background: #222f36; border-color: #52636a; color: #edf4f5; }
button:disabled { opacity: .6; cursor: progress; }
:focus-visible { outline: 2px solid #d6ffc7; outline-offset: 3px; }
.fields { display: grid; grid-template-columns: 2fr 1fr; gap: 1rem; }
.actions { flex-wrap: wrap; gap: .55rem; }
.separated { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--border); }
.small { font-size: .88rem; overflow-wrap: anywhere; }
#notice, pre { padding: .75rem; margin: 1rem 0; background: #10171b; border: 1px solid #52636a; border-radius: .4rem; color: inherit; white-space: pre-wrap; overflow-wrap: anywhere; }
#notice.error { border-color: #e9a098; color: #ffc3b8; }
.table-wrap { overflow-x: auto; margin-top: 1rem; }
table { width: 100%; border-collapse: collapse; text-align: left; }
th, td { padding: .65rem .5rem; border-bottom: 1px solid var(--border); }
td input { width: 5.5rem; }
td button { margin-right: .4rem; }
@media (max-width: 620px) { .fields { grid-template-columns: 1fr; gap: 0; } .panel { padding: 1rem; } .login { margin-top: 4vh; } }