@font-face {
  font-family: "Fusion Pixel";
  src: url("/admin/fonts/fusion-pixel-12px-monospaced-zh_hans.otf.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
:root {
  color-scheme: dark;
  --bg: #07110b;
  --panel: #0c1a10;
  --raised: #14291a;
  --line: #31543a;
  --muted: #82aa88;
  --text: #c0dfb5;
  --green: #a0ef80;
  --bright: #dbffc8;
  --red: #ff5a4f;
  --font-small: 14px;
  --font-medium: 20px;
  --font-large: 32px;
  --led-grid: radial-gradient(circle at 1px 1px, color-mix(in srgb, var(--green) 9%, transparent) .6px, transparent .85px);
}
* { box-sizing: border-box; }
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb {
  background: var(--line);
  border: 3px solid var(--bg);
  border-radius: 0;
}
::-webkit-scrollbar-thumb:hover { background: var(--green); }
::-webkit-scrollbar-thumb:active { background: var(--bright); }
::-webkit-scrollbar-corner { background: var(--bg); }
@supports not selector(::-webkit-scrollbar) {
  * { scrollbar-width: thin; scrollbar-color: var(--line) var(--bg); }
}
html { height: 100%; background: var(--bg); }
body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: var(--bg);
  color: var(--text);
  font: var(--font-small)/1.75 "Fusion Pixel", "Cascadia Mono", Consolas, "Microsoft YaHei", monospace;
  font-synthesis: none;
  font-variant-numeric: tabular-nums;
}
.crt-filter { position: absolute; width: 0; height: 0; overflow: hidden; pointer-events: none; }
.crt-screen {
  position: fixed;
  inset: 12px;
  overflow: clip;
  border: 1px solid color-mix(in srgb, var(--line) 60%, transparent);
  border-radius: 28px / 20px;
  background: var(--bg);
  box-shadow: 0 0 18px color-mix(in srgb, var(--green) 6%, transparent);
}
.crt-scroll { height: 100%; overflow: auto; scroll-behavior: smooth; scroll-padding-top: 24px; }
/* Clip without scrolling on anchor navigation; keep bloom bounded to the viewport. */
.crt-viewport { height: 100%; overflow: clip; }
.crt-viewport, dialog { filter: url(#crt-bloom); }
.crt-content { min-height: 100%; display: grid; }
.crt-screen::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 9;
  pointer-events: none;
  background: radial-gradient(ellipse at 36% 8%, color-mix(in srgb, var(--bright) 5%, transparent), transparent 55%);
  box-shadow: inset 0 0 70px color-mix(in srgb, var(--bg) 55%, transparent);
  border-radius: inherit;
  animation: crt-breathe 7s ease-in-out infinite;
}
.crt-screen::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 10;
  pointer-events: none;
  border-radius: inherit;
  background: repeating-linear-gradient(0deg, transparent 0 3px, color-mix(in srgb, var(--bg) 16%, transparent) 3px 4px),
    repeating-linear-gradient(90deg, color-mix(in srgb, var(--green) 2%, transparent) 0 1px, transparent 1px 3px);
}
.crt-sweep {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 24%;
  z-index: 11;
  pointer-events: none;
  background: linear-gradient(transparent, color-mix(in srgb, var(--green) 5%, transparent), transparent);
  animation: crt-sweep 12s linear infinite;
}
@keyframes crt-sweep {
  from { transform: translateY(-100%); }
  to { transform: translateY(420%); }
}
@keyframes crt-breathe {
  0%, 100% { opacity: .78; }
  50% { opacity: 1; }
}
::selection { background: var(--green); color: var(--bg); }
button, input, select { font: inherit; }
button, a, input, select, summary { outline-offset: 4px; }
:focus-visible { outline: 2px solid var(--green); }
button {
  cursor: pointer;
  border: 1px solid var(--line);
  border-radius: 0;
  padding: 8px 15px;
  font-weight: 600;
  transition: background .15s, color .15s;
}
button:disabled { opacity: .45; cursor: not-allowed; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p { margin: 0; }
h1 { color: var(--green); font-size: var(--font-large); font-weight: 400; letter-spacing: 0; }
h1::after { content: ""; display: inline-block; width: 12px; height: 24px; margin-left: 12px; background: repeating-linear-gradient(0deg, var(--green) 0 2px, transparent 2px 3px); vertical-align: 0; }
h2 { font-size: var(--font-medium); font-weight: 400; }
input, select { min-width: 0; background: var(--bg); border: 1px solid var(--line); border-radius: 0; padding: 10px 12px; color: var(--green); width: 100%; caret-color: var(--green); }
input::placeholder { color: var(--muted); opacity: 1; }
input:focus, select:focus { border-color: var(--green); outline: 1px solid var(--green); outline-offset: 0; }
.primary { background: var(--green); border-color: var(--green); color: var(--bg); }
.primary:hover:not(:disabled) { background: var(--bright); }
.quiet { background: transparent; color: var(--text); border-color: var(--line); }
.quiet:hover:not(:disabled) { background: var(--raised); border-color: var(--green); color: var(--green); }
.quiet.danger:hover:not(:disabled) { background: var(--raised); border-color: var(--red); color: var(--red); }
.muted { color: var(--muted); font-size: var(--font-small); }
.dot { width: 6px; height: 6px; background: var(--green); display: inline-block; flex: none; }
.shell { display: grid; grid-template-columns: 216px 1fr; min-width: 0; min-height: 100%; }
.sidebar { background: var(--panel); color: var(--muted); border-right: 1px solid var(--line); padding: 28px 20px; display: flex; flex-direction: column; position: sticky; top: 0; height: calc(100dvh - 28px); }
.brand { display: flex; align-items: center; gap: 10px; font-size: var(--font-medium); color: var(--green); margin-bottom: 60px; }
.small-mark { font-size: var(--font-medium); line-height: 1; letter-spacing: -3px; width: 36px; }
.small-mark span, .mark span { color: var(--green); }
nav { display: grid; gap: 5px; }
nav a { padding: 11px 10px; border: 1px solid transparent; font-size: var(--font-small); display: flex; gap: 12px; align-items: center; }
nav a.active, nav a:hover { background: var(--raised); border-color: var(--line); color: var(--green); }
.workspace { min-width: 0; }
.topbar { height: 68px; border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; padding: 0 36px; background: var(--panel); font-size: var(--font-small); }
.topbar p { color: var(--muted); }
.topbar p::before { content: "> "; color: var(--green); }
.topbar > div { display: flex; gap: 8px; }
.topbar button { padding: 5px 12px; font-size: var(--font-small); }
.content { max-width: 1420px; margin: auto; padding: 32px 36px 24px; }
.page-heading { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 25px; }
.update { display: flex; align-items: center; gap: 8px; font-size: var(--font-small); color: var(--muted); padding-bottom: 4px; }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--line); background: var(--panel); margin-bottom: 20px; }
.stat { border-right: 1px solid var(--line); padding: 18px 23px; display: grid; grid-template-columns: 1fr auto; gap: 5px; }
.stat:last-child { border-right: 0; }
.stat > span { font-size: var(--font-small); }
.stat strong { grid-column: 2; color: var(--green); font-size: var(--font-large); font-weight: 400; align-self: center; }
.service { padding: 22px 24px; background: var(--panel); border: 1px solid var(--line); border-left: 3px solid var(--green); display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.service-leading { display: flex; gap: 17px; align-items: center; }
.service-icon { width: 44px; height: 44px; border: 1px solid var(--line); color: var(--green); display: grid; place-content: center; font-size: var(--font-medium); }
.service-title { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.service-title h2 { font-size: var(--font-medium); }
.service-meta { font-size: var(--font-small); margin-top: 7px; color: var(--muted); }
.service-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.service-resource { font-size: var(--font-small); color: var(--muted); text-align: right; margin-right: 8px; }
.service-actions button { color: var(--green); border-color: var(--line); white-space: nowrap; }
.badge { display: inline-flex; align-items: center; gap: 6px; padding: 2px 8px; border: 1px solid var(--line); font-size: var(--font-small); background: var(--panel); color: var(--muted); white-space: nowrap; }
.badge::before { content: ""; width: 4px; height: 4px; background: currentColor; }
.badge.good { color: var(--green); border-color: var(--line); background: var(--raised); }
.badge.bad { color: var(--red); border-color: var(--red); background: var(--raised); }
.badge.wait { color: var(--bright); border-color: var(--line); background: var(--raised); }
.badge.bad::before { content: "×"; width: auto; height: auto; background: none; line-height: 1; }
.badge.wait { border-style: dashed; }
.section-heading { display: flex; justify-content: space-between; align-items: center; margin: 28px 0 14px; gap: 15px; }
.project-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.project-card { border: 1px solid var(--line); background: var(--panel); padding: 20px 22px; }
.project-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 21px; }
.project-name { font-size: var(--font-medium); font-weight: 400; }
.project-data { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 0 0 19px; }
.project-data dt { font-size: var(--font-small); color: var(--muted); margin-bottom: 4px; }
.project-data dd { margin: 0; font-size: var(--font-small); color: var(--text); }
.project-footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding-top: 14px; border-top: 1px dashed var(--line); }
.project-footer span { font-size: var(--font-small); color: var(--muted); }
.project-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.project-footer button { font-size: var(--font-small); padding: 5px 12px; }
.project-detail { font-size: var(--font-small); color: var(--muted); margin-top: 9px; overflow-wrap: anywhere; }
.project-detail summary { cursor: pointer; }
.proxy-heading-actions { display: flex; align-items: center; gap: 10px; }
.proxy-card { border: 1px solid var(--line); border-left: 3px solid var(--green); background: var(--panel); padding: 22px 24px; background-image: var(--led-grid); background-size: 4px 4px; }
.proxy-form { display: grid; gap: 20px; }
.proxy-top-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-bottom: 18px; border-bottom: 1px dashed var(--line); }
.proxy-switch-info { display: grid; gap: 6px; min-width: 0; }
.proxy-switch-title { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.proxy-switch-title strong { font-size: var(--font-medium); font-weight: 400; color: var(--bright); }
.proxy-toggle { display: inline-flex; align-items: center; gap: 10px; padding: 8px 16px; background: var(--bg); border: 1px solid var(--line); color: var(--muted); white-space: nowrap; }
.proxy-toggle-dot { width: 10px; height: 10px; border: 1px solid var(--line); background: transparent; display: inline-block; }
.proxy-toggle.active { background: var(--raised); border-color: var(--green); color: var(--green); }
.proxy-toggle.active .proxy-toggle-dot { background: var(--green); border-color: var(--green); box-shadow: 0 0 8px var(--green); }
.proxy-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.proxy-inline-row { display: flex; gap: 8px; align-items: stretch; }
.proxy-inline-row input, .proxy-inline-row select { flex: 1; min-width: 0; }
.proxy-inline-row button { white-space: nowrap; padding: 8px 14px; }
@media (max-width: 900px) { .proxy-grid { grid-template-columns: 1fr; } .proxy-top-row { flex-direction: column; align-items: flex-start; } }
.search { display: flex; gap: 8px; max-width: 380px; }
.search input { font-size: var(--font-small); padding: 7px 11px; width: 250px; }
.search button { font-size: var(--font-small); padding: 6px 12px; white-space: nowrap; }
.table-wrap { background: var(--panel); border: 1px solid var(--line); overflow: auto; }
table { width: 100%; border-collapse: collapse; white-space: nowrap; font-size: var(--font-small); text-align: left; }
th { font-size: var(--font-small); color: var(--muted); font-weight: 400; background: var(--raised); padding: 12px 18px; border-bottom: 1px solid var(--line); }
td { padding: 14px 18px; border-bottom: 1px solid var(--line); }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: var(--raised); }
.user-label { display: block; color: var(--green); }
.user-id { display: block; color: var(--muted); font-size: var(--font-small); margin-top: 4px; }
.user-admin { display: flex; align-items: center; gap: 10px; }
.pagination { display: flex; justify-content: space-between; align-items: center; margin-top: 12px; font-size: var(--font-small); }
.pagination > div { display: flex; gap: 12px; align-items: center; }
.pagination button { padding: 4px 10px; font-size: var(--font-small); }
.empty { padding: 28px; text-align: center; color: var(--muted); font-size: var(--font-small); grid-column: 1/-1; }
.job-list { background: var(--panel); border: 1px solid var(--line); overflow: hidden; }
.job { display: flex; justify-content: space-between; align-items: center; padding: 13px 18px; gap: 14px; font-size: var(--font-small); border-bottom: 1px dashed var(--line); }
.job:last-child { border: 0; }
.job > div { display: flex; flex-wrap: wrap; min-width: 0; align-items: center; gap: 14px; }
.job-message { flex-basis: 100%; color: var(--red); overflow-wrap: anywhere; }
.job time { font-size: var(--font-small); color: var(--muted); }
.notice { padding: 12px 16px; background: var(--raised); border: 1px solid var(--line); color: var(--bright); font-size: var(--font-small); margin-bottom: 20px; overflow-wrap: anywhere; }
.notice.error { background: var(--raised); border-color: var(--red); color: var(--red); }
.login-layout { min-height: 100%; max-width: 1040px; margin: auto; display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 88px; padding: 60px 40px; }
.mark { font-size: var(--font-large); letter-spacing: 0; line-height: 1; margin-bottom: 35px; color: var(--green); }
.login-brand h1 { font-size: var(--font-large); line-height: 1.5; letter-spacing: 0; }
.brand-line { height: 1px; background: var(--line); width: 110px; margin-top: 27px; }
.login-card { background: var(--panel); border: 1px solid var(--line); border-top: 3px solid var(--green); padding: 32px; }
.login-card h2 { color: var(--green); font-size: var(--font-medium); margin-bottom: 28px; }
.login-card label { display: block; font-size: var(--font-small); margin-bottom: 9px; }
.login-card button { width: 100%; margin-top: 18px; display: flex; justify-content: space-between; }
.error { font-size: var(--font-small); color: var(--red); margin-top: 12px; }
.login-card details { font-size: var(--font-small); color: var(--muted); margin-top: 22px; }
.login-card summary { cursor: pointer; }
.login-card details p { margin-top: 12px; overflow-wrap: anywhere; }
code { font: inherit; color: var(--text); }
dialog { background: var(--panel); border: 1px solid var(--bright); border-top-width: 3px; border-radius: 0; padding: 28px; width: 440px; max-width: calc(100% - 32px); color: var(--text); box-shadow: 8px 8px 0 color-mix(in srgb, var(--bg) 53%, transparent); }
dialog::backdrop { background: color-mix(in srgb, var(--bg) 80%, transparent); }
.dialog-symbol { color: var(--bright); border: 1px solid var(--line); padding: 0 10px; font-size: var(--font-medium); display: inline-block; margin-bottom: 18px; }
dialog h2 { font-size: var(--font-medium); color: var(--bright); }
dialog p { font-size: var(--font-small); margin-top: 12px; }
.dialog-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 26px; }
.dialog-actions .primary { background: var(--bright); border-color: var(--bright); }
.dialog-actions .primary:hover { background: var(--green); }
.config-dialog { width: 780px; max-height: calc(100dvh - 48px); overflow: hidden; }
.config-dialog form { display: flex; flex-direction: column; max-height: calc(100dvh - 104px); }
.config-groups { overflow: auto; margin-top: 18px; padding-right: 6px; display: grid; gap: 16px; }
.config-group { border: 1px solid var(--line); background: var(--bg); padding: 16px; margin: 0; }
.config-group legend { color: var(--green); padding: 0 8px; font-size: var(--font-small); }
.config-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; }
.config-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.config-label { display: block; font-size: var(--font-small); color: var(--text); }
.config-label-title { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.config-key { color: var(--muted); font-size: var(--font-small); }
.field-hint { color: var(--muted); font-size: var(--font-small); line-height: 1.45; }
@media (max-width: 760px) { .config-fields { grid-template-columns: 1fr; } }
.initial-loading { text-align: center; margin: 25vh 20px; color: var(--green); }
.stats, .service, .login-card, .service-icon, .primary {
  background-image: var(--led-grid);
  background-size: 4px 4px;
}
.primary { --led-grid: radial-gradient(circle at 1px 1px, color-mix(in srgb, var(--bg) 27%, transparent) .7px, transparent 1px); }
h1, .stat strong, .mark {
  --pitch: 3px;
  background-image: radial-gradient(circle, var(--green) 0 55%, var(--muted) 66%, var(--line) 76%);
  background-size: var(--pitch) var(--pitch);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}
.stat strong { --pitch: 4px; }
.mark { --pitch: 6px; }
.mark span { color: inherit; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.service { display: block; }
.service-header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; }
.monitor { margin: 18px 0; min-width: 0; }
.monitor-label { display: flex; justify-content: space-between; gap: 12px; font-size: var(--font-small); color: var(--muted); }
.health-strip { display: grid; grid-template-columns: repeat(60, minmax(0, 1fr)); gap: 3px; margin: 9px 0 16px; }
.health-cell { height: 18px; background: var(--raised); border: 1px solid var(--line); }
.health-cell.healthy { background: var(--green); border-color: var(--green); }
.health-cell.unhealthy { background: var(--red); border-color: var(--red); }
.health-cell.unconfigured { background: repeating-linear-gradient(135deg, var(--raised) 0 3px, var(--line) 3px 4px); }
.health-cell:hover { outline: 1px solid var(--text); outline-offset: 2px; opacity: 1; }
.latency-chart { display: block; width: 100%; height: 76px; margin: 8px 0 4px; overflow: visible; background: repeating-linear-gradient(to top, var(--line) 0 1px, transparent 1px 25px); }
.latency-chart path { fill: none; stroke: var(--green); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.latency-chart circle { fill: var(--green); }
@media (max-width: 760px) { .health-strip { gap: 2px; } .health-cell { height: 15px; } }
[hidden] { display: none !important; }
@media (max-width: 1050px) {
  .shell { grid-template-columns: 188px 1fr; }
  .sidebar { padding: 26px 13px; }
  .content { padding: 26px; }
  .topbar { padding: 0 26px; }
  .service-resource { display: none; }
  .stat { padding: 16px; }
  .stat strong { font-size: var(--font-large); --pitch: 3px; }
  .project-card { padding: 18px; }
  .login-layout { gap: 40px; }
}
@media (max-width: 760px) {
  .crt-screen { inset: 6px; border-radius: 18px / 14px; }
  .shell { display: block; }
  .sidebar { position: static; height: auto; padding: 16px; border-right: 0; border-bottom: 1px solid var(--line); flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
  .brand { margin: 0; font-size: var(--font-small); gap: 7px; }
  .small-mark { font-size: var(--font-medium); width: 27px; }
  nav { display: flex; gap: 2px; }
  nav a { font-size: var(--font-small); padding: 6px; }
  .topbar { height: 58px; padding: 0 16px; }
  .topbar button { padding: 5px 9px; }
  .content { padding: 24px 16px; }
  .page-heading { align-items: center; margin-bottom: 19px; gap: 10px; }
  h1 { font-size: var(--font-medium); --pitch: 2px; }
  h1::after { width: 8px; height: 16px; margin-left: 8px; }
  .update { font-size: var(--font-small); }
  .stats { margin-bottom: 16px; }
  .stat { padding: 12px; display: flex; flex-direction: column; gap: 3px; }
  .stat > span { font-size: var(--font-small); }
  .stat strong { align-self: start; font-size: var(--font-large); --pitch: 3px; }
  .service { padding: 17px; gap: 12px; }
  .service-leading { gap: 12px; min-width: 0; }
  .service-icon { display: none; }
  .service-title { gap: 7px; }
  .service-title h2 { font-size: var(--font-medium); }
  .service-meta { font-size: var(--font-small); }
  .service-actions button { font-size: var(--font-small); padding: 7px 10px; }
  .project-grid { grid-template-columns: 1fr; }
  .section-heading { flex-wrap: wrap; }
  .section-heading h2 { font-size: var(--font-medium); }
  .search { max-width: none; width: 100%; }
  .search input { width: 100%; }
  .job time { display: none; }
  .job > div { min-width: 0; overflow-wrap: anywhere; }
  .login-layout { display: flex; flex-direction: column; justify-content: center; gap: 26px; padding: 32px 22px; }
  .login-brand { width: 100%; max-width: 370px; }
  .login-brand .mark { font-size: var(--font-large); --pitch: 4px; letter-spacing: 0; margin-bottom: 14px; }
  .login-brand h1 { font-size: var(--font-medium); }
  .login-brand h1 br { display: none; }
  .brand-line { display: none; }
  .login-card { width: 100%; max-width: 370px; padding: 26px; }
  .project-data { gap: 10px; }
  .project-footer span { font-size: var(--font-small); }
  .pagination > div { gap: 8px; }
  .pagination button { padding: 4px 8px; }
}
@media (max-width: 370px) {
  .sidebar { flex-wrap: wrap; }
  nav { width: 100%; }
  nav a { flex: 1; justify-content: center; }
  .page-heading { flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) {
  .crt-scroll { scroll-behavior: auto; }
  button { transition: none; }
  .crt-screen::before, .crt-sweep { animation: none; }
  .crt-sweep { display: none; }
}