:root {
  font-family: system-ui, -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
  color: #21354b; background: #f3f6fa; font-size: 15px; line-height: 1.55;
  --teal: #087f8c; --border: #d9e3ee;
}
* { box-sizing: border-box; }
body { margin: 0; }
button, input, select, textarea { font: inherit; }
button { min-height: 42px; padding: .55rem 1rem; border: 1px solid var(--border); border-radius: 8px; background: white; color: #21354b; cursor: pointer; }
button:hover { background: #eaf5f6; border-color: var(--teal); }
button:disabled { opacity: .48; cursor: not-allowed; }
button.primary { background: var(--teal); color: white; border-color: var(--teal); }
a { color: var(--teal); }
:focus-visible { outline: 3px solid #0f94ac; outline-offset: 3px; }
.topbar { min-height: 72px; background: #fff; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 20px; padding: 14px 28px; flex-wrap: wrap; }
.brand { text-decoration: none; font-size: 21px; color: #21354b; font-weight: 750; display: flex; align-items: center; gap: 10px; }
.brand-icon { color: white; background: var(--teal); border-radius: 10px; width: 36px; text-align: center; font-size: 24px; }
.fake-badge { background: #fff2d7; color: #714a03; border: 1px solid #e9cb8d; border-radius: 50px; padding: 4px 12px; font-size: 12px; font-weight: 750; }
#identity { margin-left: auto; font-size: 13px; }
.safety { padding: 10px 28px; background: #fff7e8; font-size: 12px; color: #725015; border-bottom: 1px solid #eddabc; }
.shell { display: grid; grid-template-columns: 210px minmax(0, 1fr); max-width: 1600px; margin: auto; min-height: calc(100vh - 116px); }
.shell:has(nav[hidden]) { grid-template-columns: 1fr; }
nav { padding: 28px 14px; border-right: 1px solid var(--border); display: flex; flex-direction: column; gap: 8px; background: #f8fafc; }
nav button { text-align: left; border-color: transparent; background: transparent; }
nav button[aria-current="page"] { background: #e0f0f1; color: #006673; font-weight: 700; }
.nav-note { margin: 18px 10px; color: #627184; }
main { padding: 28px 34px; min-width: 0; outline: none; }
h1 { margin: 0 0 20px; font-size: 27px; line-height: 1.3; letter-spacing: -.5px; }
h2 { font-size: 18px; margin: 0 0 16px; line-height: 1.4; }
p { margin: 10px 0 16px; }
.card { background: white; border: 1px solid var(--border); box-shadow: 0 2px 8px #21354b04; border-radius: 12px; padding: 22px; margin-bottom: 20px; min-width: 0; }
.page-heading p { color: #647589; margin-top: -8px; }
.columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; }
.tiles button { min-height: 100px; font-weight: 600; text-align: left; background: #f5fbfb; border-color: #c9e4e6; }
.toolbar, .actions, .pager { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 10px 0 20px; }
.pager { justify-content: flex-end; margin: 18px 0 0; }
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 15px; min-width: 0; }
.field span { font-size: 13px; color: #4a5d73; font-weight: 600; }
input, select, textarea { width: 100%; border: 1px solid #bfccd9; border-radius: 7px; padding: 10px 12px; background: white; color: #21354b; min-height: 44px; }
textarea { resize: vertical; }
.toolbar .field { margin: 0; min-width: 150px; }
small { font-size: 12px; color: #627184; display: block; overflow-wrap: anywhere; }
.checkbox { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 18px; }
.checkbox input { width: 20px; min-height: 20px; flex: 0 0 20px; }
form { max-width: 680px; }
.sms { border-left: 3px solid #c8e4e6; padding: 12px; margin: 12px 0 20px; background: #f7fbfb; }
.sms .field { margin-top: 10px; }
.auth-card { max-width: 520px; margin: 24px auto; background: white; border: 1px solid var(--border); border-radius: 16px; padding: 30px; }
.auth-card .primary { width: 100%; }
.auth-card .actions { justify-content: center; margin-top: 24px; }
.table-scroll { width: 100%; overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font-size: 13px; text-align: left; }
th { color: #566c82; font-weight: 650; background: #f7f9fc; white-space: nowrap; }
th, td { padding: 12px; border-bottom: 1px solid #e7edf3; vertical-align: top; }
td { overflow-wrap: anywhere; max-width: 340px; min-width: 90px; }
td button { font-size: 13px; padding: 5px 10px; text-align: left; }
td .actions { margin: 0; }
.stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.stat { padding: 16px; background: #f6f9fc; border-radius: 10px; display: flex; flex-direction: column; gap: 7px; }
.stat span { font-size: 12px; color: #647589; }
.stat strong { font-size: 23px; font-weight: 650; }
.stats-note { grid-column: 1 / -1; }
.roster-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: 22px; }
.latest { display: flex; align-items: baseline; gap: 20px; flex-wrap: wrap; }
.latest strong { font-size: 34px; color: var(--teal); }
.chart svg { width: 100%; height: auto; min-height: 160px; }
.chart small { text-align: center; }
details { margin-top: 18px; }
summary { cursor: pointer; color: #087f8c; min-height: 40px; }
.empty { padding: 28px 12px; text-align: center; color: #647589; }
.subtle { color: #647589; font-size: 13px; }
.notice { padding: 12px 28px; background: #e9f4fa; border-bottom: 1px solid #c8dfe9; overflow-wrap: anywhere; }
.error, .warning-text { color: #ab331d; }
.warning { padding: 12px; border-radius: 7px; color: #805413; background: #fff6e4; font-size: 13px; }
.alarm-strip { padding: 12px 28px; background: #fff0ee; border: 2px solid #ca4a37; color: #992c1d; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.alarm-strip button { color: #992c1d; }
.flashing { animation: alarm-pulse 1.8s ease-in-out infinite; }
@keyframes alarm-pulse { 50% { background: #fbd6d1; } }
@media (prefers-reduced-motion: reduce) { .flashing { animation: none; border-width: 3px; } }
dialog { border: 1px solid var(--border); border-radius: 14px; max-width: min(680px, calc(100vw - 24px)); width: 680px; max-height: calc(100dvh - 40px); padding: 25px; color: #21354b; }
dialog::backdrop { background: #1024358f; }
.modal-heading { display: flex; justify-content: space-between; gap: 20px; align-items: baseline; }
.modal-heading h2 { min-width: 0; overflow-wrap: anywhere; }
.modal-heading button { flex-shrink: 0; white-space: nowrap; }
.secret { margin: 16px 0; padding: 16px; background: #f3f7fb; border-radius: 7px; }
code { font-family: ui-monospace, monospace; overflow-wrap: anywhere; white-space: pre-wrap; }
.secret code { display: block; margin: 12px 0; user-select: all; }
.qr-code { display: block; width: min(100%, 360px); height: auto; margin: 16px auto; image-rendering: pixelated; }
.qr-video { display: block; width: 100%; max-height: 340px; background: #102435; }
[hidden] { display: none !important; }
@media (max-width: 900px) {
  .topbar { padding: 12px 16px; gap: 12px; }
  .shell { display: flex; flex-direction: column; }
  nav { flex-direction: row; flex-wrap: nowrap; overflow-x: auto; padding: 10px 12px; border-right: none; border-bottom: 1px solid var(--border); }
  nav button { flex: 0 0 auto; font-size: 13px; }
  .nav-note { display: none; }
  main { padding: 22px 16px; }
  .safety { padding: 10px 16px; }
  .columns { grid-template-columns: 1fr; gap: 0; }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .card { padding: 18px; }
}
@media (max-width: 520px) {
  .topbar { gap: 8px; }
  .brand { font-size: 17px; }
  .fake-badge { font-size: 10px; padding: 3px 7px; }
  #identity { font-size: 11px; margin-left: 0; flex: 1 1 auto; }
  h1 { font-size: 23px; }
  .auth-card { padding: 22px 18px; margin: 6px auto; }
  .stat { padding: 12px; }
  .stat strong { font-size: 19px; }
  .toolbar { align-items: stretch; }
  .toolbar .field { flex: 1 1 130px; }
  .toolbar button { flex: 1 1 auto; }
  .alarm-strip, .notice { padding: 12px 16px; font-size: 13px; }
  .latest strong { font-size: 28px; }
  .pager { justify-content: space-between; }
  dialog { padding: 20px 16px; }
}