:root {
  --bg: #090b0b;
  --surface: #101313;
  --surface-2: #151918;
  --line: #2b312f;
  --line-bright: #46504c;
  --text: #edf0e8;
  --muted: #aab3ad;
  --green: #a8ff3e;
  --green-deep: #477b18;
  --amber: #ffb547;
  --cyan: #58d7dd;
  --red: #ff5d4a;
  --font-display: "Aptos Display", "Noto Sans SC", sans-serif;
  --font-mono: "Cascadia Code", "JetBrains Mono", "Noto Sans Mono CJK SC", monospace;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; background: var(--bg); color: var(--text); font-family: var(--font-display); }
button, input { font: inherit; }
button { cursor: pointer; }
.hidden { display: none !important; }
.noise { position: fixed; inset: 0; z-index: 20; pointer-events: none; opacity: .035; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E"); }
.kicker { margin: 0 0 8px; color: var(--green); font: 700 10px/1 var(--font-mono); letter-spacing: 0; }
.live-dot { width: 8px; height: 8px; display: inline-block; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 4px rgba(168,255,62,.1), 0 0 18px rgba(168,255,62,.65); animation: pulse 2s infinite; }

.login-view { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(420px, .85fr); overflow: hidden; }
.login-stage { min-height: 100vh; position: relative; display: flex; align-items: flex-end; padding: clamp(40px, 7vw, 108px); border-right: 1px solid var(--line); overflow: hidden; background-color: #0c0f0e; background-image: linear-gradient(rgba(168,255,62,.055) 1px, transparent 1px), linear-gradient(90deg, rgba(168,255,62,.055) 1px, transparent 1px); background-size: 54px 54px; }
.login-stage::after { content: ""; position: absolute; width: 52vw; height: 52vw; max-width: 730px; max-height: 730px; right: -18vw; top: -16vw; border: 1px solid rgba(168,255,62,.2); border-radius: 50%; box-shadow: inset 0 0 0 6vw #0c0f0e, inset 0 0 0 calc(6vw + 1px) rgba(168,255,62,.13), inset 0 0 0 13vw #0c0f0e, inset 0 0 0 calc(13vw + 1px) rgba(88,215,221,.15); }
.login-signal { position: absolute; inset: 0; overflow: hidden; }
.signal-line { position: absolute; left: 0; width: 100%; height: 1px; background: rgba(168,255,62,.18); transform-origin: right; animation: scan 6s ease-in-out infinite; }
.signal-line:nth-child(1) { top: 25%; animation-delay: -1s; }.signal-line:nth-child(2) { top: 47%; animation-delay: -3s; }.signal-line:nth-child(3) { top: 69%; animation-delay: -5s; }
.signal-core { position: absolute; right: clamp(38px, 9vw, 140px); top: 50%; width: 150px; height: 150px; border: 1px solid var(--line-bright); transform: translateY(-70%) rotate(45deg); display: grid; place-content: center; text-align: center; background: #0c0f0e; box-shadow: 18px 18px 0 rgba(168,255,62,.06); }
.signal-core b,.signal-core small { transform: rotate(-45deg); }.signal-core b { font: 800 45px/1 var(--font-mono); color: var(--green); }.signal-core small { margin-top: -10px; color: var(--muted); font: 8px var(--font-mono); }
.login-copy { position: relative; z-index: 2; animation: rise .8s both; }
.login-copy h1 { margin: 0; font-size: clamp(72px, 9.5vw, 152px); line-height: .75; text-transform: uppercase; font-weight: 850; letter-spacing: 0; }
.login-copy h1 span { color: transparent; -webkit-text-stroke: 1px var(--text); }
.login-sub { margin: 34px 0 20px; color: var(--muted); font-size: 16px; }
.login-meta { display: flex; gap: 22px; color: #66706b; font: 9px var(--font-mono); }
.login-panel { align-self: center; width: min(440px, calc(100% - 64px)); justify-self: center; animation: rise .8s .12s both; }
.login-panel header { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 16px; padding-bottom: 25px; border-bottom: 1px solid var(--line); margin-bottom: 28px; }
.login-panel header small { color: var(--muted); font: 9px var(--font-mono); }.login-panel h2 { margin: 5px 0 0; font-size: 24px; }.panel-index { color: #4c5550; font: 36px var(--font-mono); }
.login-panel label { display: block; margin-bottom: 18px; }.login-panel label > span { display: block; margin-bottom: 8px; color: var(--muted); font: 10px var(--font-mono); }
.login-panel input { width: 100%; height: 52px; padding: 0 15px; border: 1px solid var(--line); border-radius: 3px; background: #0d1010; color: var(--text); outline: none; font-family: var(--font-mono); transition: border .2s, box-shadow .2s; }
.login-panel input:focus { border-color: var(--green); box-shadow: 0 0 0 3px rgba(168,255,62,.08); }
.captcha-field > div { display: grid; grid-template-columns: 145px 1fr 46px; gap: 8px; }.captcha-field strong { display: grid; place-items: center; border: 1px solid var(--line); color: var(--amber); background: repeating-linear-gradient(135deg, #111514 0 3px, #0c0f0e 3px 6px); font: 700 15px var(--font-mono); }.captcha-field button,.icon-button { border: 1px solid var(--line); border-radius: 3px; background: var(--surface); color: var(--text); font: 22px var(--font-mono); transition: .2s; }.captcha-field button:hover,.icon-button:hover { border-color: var(--green); color: var(--green); transform: rotate(18deg); }
.form-error { min-height: 20px; margin: 0 0 8px; color: var(--red); font: 11px var(--font-mono); }
.login-button { width: 100%; height: 58px; display: flex; align-items: center; justify-content: space-between; padding: 0 18px; border: 0; border-radius: 3px; background: var(--green); color: #11170c; font-weight: 800; transition: transform .15s, background .15s; }.login-button:hover { background: #bcff69; transform: translateY(-2px); }.login-button b { font: 10px var(--font-mono); }
.login-panel footer { margin-top: 21px; display: flex; align-items: center; gap: 10px; color: #555e59; font: 8px var(--font-mono); }.login-panel footer i { height: 1px; flex: 1; background: var(--line); }

.console { display: grid; grid-template-columns: 90px minmax(0, 1fr); min-height: 100vh; }
.rail { position: fixed; inset: 0 auto 0 0; z-index: 10; width: 90px; display: flex; flex-direction: column; align-items: center; border-right: 1px solid var(--line); background: #0c0f0e; }
.rail-brand { width: 100%; height: 92px; display: grid; place-content: center; color: var(--text); text-decoration: none; text-align: center; border-bottom: 1px solid var(--line); }.rail-brand b { color: var(--green); font: 800 25px var(--font-mono); }.rail-brand span { margin-top: 3px; color: var(--muted); font: 7px/1.25 var(--font-mono); }
.rail nav { width: 100%; margin-top: 30px; display: grid; }.nav-item { width: 100%; min-height: 70px; display: grid; place-content: center; gap: 4px; border: 0; border-left: 2px solid transparent; background: transparent; color: #69736d; }.nav-item b { font: 8px var(--font-mono); }.nav-item span { font-size: 11px; }.nav-item:hover,.nav-item.active { color: var(--text); background: #141817; border-left-color: var(--green); }.rail-foot { margin-top: auto; padding: 25px 0; display: grid; justify-items: center; gap: 10px; }.rail-foot small { writing-mode: vertical-rl; color: #5d6761; font: 7px var(--font-mono); }
main { grid-column: 2; min-width: 0; }
.topbar { height: 92px; position: sticky; top: 0; z-index: 8; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 0 clamp(22px, 4vw, 64px); border-bottom: 1px solid var(--line); background: rgba(9,11,11,.94); backdrop-filter: blur(16px); }.topbar h1 { margin: 0; font-size: 25px; }.top-actions { display: flex; align-items: center; gap: 10px; }.clock { text-align: right; margin-right: 8px; }.clock b { display: block; font: 18px var(--font-mono); }.clock span { color: var(--muted); font: 8px var(--font-mono); }.icon-button { width: 42px; height: 42px; }.user-button { height: 42px; padding: 0 5px 0 14px; display: flex; gap: 13px; align-items: center; border: 1px solid var(--line); border-radius: 3px; background: var(--surface); color: var(--text); font: 10px var(--font-mono); }.user-button b { padding: 8px 10px; background: #242a27; color: var(--muted); }
.icon-button.spinning { animation: spin .7s linear infinite; }
.section-anchor { scroll-margin-top: 108px; }
.status-band { min-height: 194px; display: grid; grid-template-columns: minmax(260px,.8fr) minmax(520px,2fr) 150px; align-items: center; gap: clamp(24px,4vw,70px); padding: 34px clamp(22px,4vw,64px); border-bottom: 1px solid var(--line); background: #0d100f; }
.node-identity { display: flex; align-items: center; gap: 18px; }.node-mark { width: 64px; height: 64px; display: grid; place-items: center; border: 1px solid var(--green-deep); color: var(--green); font: 22px var(--font-mono); box-shadow: inset 0 0 0 6px #121712; }.node-identity small,.health-score small { color: var(--muted); font: 8px var(--font-mono); }.node-identity h2 { margin: 5px 0 3px; font: 700 18px var(--font-mono); }.node-identity p { margin: 0; color: #66706b; font: 9px var(--font-mono); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 230px; }
.gauge-list { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: clamp(18px,3vw,45px); }.gauge-head { display: flex; justify-content: space-between; font: 10px var(--font-mono); }.gauge-head b { color: var(--green); }.meter { height: 4px; margin: 11px 0 8px; background: #252a27; overflow: hidden; }.meter i { display: block; width: 0; height: 100%; background: var(--green); box-shadow: 0 0 12px var(--green); transition: width .7s ease; }.meter.amber i { background: var(--amber); box-shadow: 0 0 12px var(--amber); }.meter.cyan i { background: var(--cyan); box-shadow: 0 0 12px var(--cyan); }.gauge small { color: #69736d; font: 8px var(--font-mono); }
.health-score { justify-self: end; width: 120px; height: 120px; display: grid; place-content: center; text-align: center; border: 1px solid var(--line); border-radius: 50%; box-shadow: inset 0 0 0 8px #111513; }.health-score strong { margin: 4px 0; font: 30px var(--font-mono); color: var(--green); }.health-score span { color: var(--green); font: 7px var(--font-mono); }
.content-section { padding: 58px clamp(22px,4vw,64px); border-bottom: 1px solid var(--line); }.section-title { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; margin-bottom: 25px; }.section-title h2 { margin: 0; font-size: 28px; }.section-title > p { margin: 0; color: var(--muted); font: 9px var(--font-mono); }.sample-rate { color: var(--muted); font: 8px var(--font-mono); }.sample-rate i { width: 6px; height: 6px; margin-right: 7px; display: inline-block; border-radius: 50%; background: var(--green); }
.service-grid { display: grid; grid-template-columns: repeat(5,minmax(160px,1fr)); gap: 10px; }.service-card { min-height: 205px; padding: 18px; position: relative; display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 4px; background: var(--surface); overflow: hidden; animation: rise .55s both; }.service-card::before { content: ""; position: absolute; inset: 0 auto auto 0; width: 42px; height: 2px; background: var(--green); }.service-card.offline::before { background: var(--red); }.service-card header { display: flex; align-items: center; justify-content: space-between; }.service-initial { color: #626d67; font: 800 29px var(--font-mono); }.status-label { display: flex; align-items: center; gap: 6px; color: var(--green); font: 8px var(--font-mono); }.status-label i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; box-shadow: 0 0 10px currentColor; }.offline .status-label { color: var(--red); }.service-card h3 { margin: 22px 0 5px; font-size: 17px; }.service-card p { margin: 0; color: var(--muted); font-size: 11px; }.service-version { margin-top: 8px; min-height: 25px; color: #626b66; font: 7px/1.5 var(--font-mono); overflow-wrap: anywhere; }.service-actions { margin-top: auto; display: flex; gap: 6px; }.action-button { flex: 1; min-height: 31px; border: 1px solid var(--line); border-radius: 2px; background: #191e1c; color: #c9cec7; font: 9px var(--font-mono); transition: .15s; }.action-button:hover { border-color: var(--amber); color: var(--amber); transform: translateY(-1px); }
.metric-layout { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; }.trend-panel { grid-column: 1 / -1; min-height: 430px; padding: 24px; border: 1px solid var(--line); border-radius: 4px; background: var(--surface); }.trend-panel > header { display: flex; justify-content: space-between; align-items: start; padding-bottom: 18px; border-bottom: 1px solid var(--line); }.trend-panel header span,.metric-panel header small { color: var(--muted); font: 8px var(--font-mono); }.trend-panel h3,.metric-panel h3 { margin: 5px 0 0; font-size: 18px; }.load-reading { text-align: right; }.load-reading small { display: block; margin-bottom: 4px; color: var(--muted); font: 8px var(--font-mono); }.load-reading b { color: var(--cyan); font: 25px var(--font-mono); }.chart-summary { display: grid; grid-template-columns: 180px 180px 1fr; align-items: center; gap: 12px; padding: 17px 0 10px; }.trend-reading,.sample-window { min-width: 0; }.trend-reading span,.sample-window span { display: block; margin-bottom: 4px; color: var(--muted); font: 9px var(--font-mono); }.trend-reading span i { width: 8px; height: 8px; display: inline-block; margin-right: 7px; border-radius: 50%; vertical-align: -1px; box-shadow: 0 0 10px currentColor; }.trend-reading.cpu span i { color: var(--green); background: var(--green); }.trend-reading.memory span i { color: var(--amber); background: var(--amber); }.trend-reading strong,.sample-window strong { font: 18px var(--font-mono); }.trend-reading.cpu strong { color: var(--green); }.trend-reading.memory strong { color: var(--amber); }.sample-window { justify-self: end; text-align: right; }.sample-window strong { color: var(--text); font-size: 12px; }.chart-stage { height: 250px; padding: 8px 0 0; background: #0d1110; border: 1px solid #242a27; }.trend-panel canvas { display: block; width: 100%; height: 240px; }.trend-panel footer { display: flex; justify-content: flex-end; gap: 28px; padding-top: 15px; color: var(--muted); font: 8px var(--font-mono); }.trend-panel footer b { margin-left: 4px; color: var(--text); }
.metric-panel { min-height: 290px; padding: 22px; border: 1px solid var(--line); border-radius: 4px; background: var(--surface); }.metric-panel > header { display: grid; grid-template-columns: 43px 1fr auto; align-items: center; gap: 13px; }.service-code { width: 43px; height: 43px; display: grid; place-items: center; border: 1px solid var(--line-bright); color: var(--cyan); font: 700 12px var(--font-mono); }.availability { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 12px var(--green); }.metric-primary { margin: 31px 0 28px; }.metric-primary strong { display: block; color: var(--green); font: 38px/1 var(--font-mono); }.mysql-panel .metric-primary strong { color: var(--amber); }.redis-panel .metric-primary strong { color: var(--red); }.metric-primary span { color: var(--muted); font: 8px var(--font-mono); }.metric-panel dl { margin: 0; display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--line); }.metric-panel dl div { padding: 13px 8px 0 0; }.metric-panel dt { color: var(--muted); font-size: 10px; }.metric-panel dd { margin: 4px 0 0; font: 13px var(--font-mono); }
.events-section { min-height: 410px; }.event-count { color: var(--muted); font: 8px var(--font-mono); }.event-table { border-top: 1px solid var(--line); }.event-head,.event-row { display: grid; grid-template-columns: 160px 100px 80px 1fr; gap: 15px; align-items: center; min-height: 44px; border-bottom: 1px solid #202523; }.event-head { color: #5d6661; font: 8px var(--font-mono); }.event-row { color: #aab2ad; font: 10px var(--font-mono); animation: fade .3s both; }.event-row .level { color: var(--cyan); }.event-row .level.success { color: var(--green); }.event-row .level.error { color: var(--red); }
.confirm-dialog { width: min(430px,calc(100% - 30px)); padding: 0; border: 1px solid var(--line-bright); border-radius: 4px; background: #111514; color: var(--text); box-shadow: 0 30px 90px #000; }.confirm-dialog::backdrop { background: rgba(0,0,0,.78); backdrop-filter: blur(5px); }.confirm-dialog form { padding: 28px; }.dialog-index { color: var(--amber); font: 8px var(--font-mono); }.confirm-dialog h2 { margin: 15px 0 10px; }.confirm-dialog p { color: var(--muted); line-height: 1.7; font-size: 13px; }.dialog-actions { margin-top: 25px; display: flex; justify-content: flex-end; gap: 8px; }.secondary-button,.danger-button { min-height: 39px; padding: 0 17px; border-radius: 3px; font-size: 12px; }.secondary-button { border: 1px solid var(--line); background: transparent; color: var(--text); }.danger-button { border: 1px solid var(--red); background: var(--red); color: #1a0805; font-weight: 800; }
.toast { position: fixed; right: 24px; bottom: 24px; z-index: 30; max-width: 360px; padding: 14px 18px; border: 1px solid var(--green-deep); border-radius: 3px; background: #151b13; color: var(--green); font: 10px var(--font-mono); transform: translateY(90px); opacity: 0; transition: .25s; }.toast.show { transform: translateY(0); opacity: 1; }.toast.error { color: var(--red); border-color: #71352d; background: #1b1110; }
.login-meta,.login-panel footer { color: #929b95; }
.panel-index { color: #929b95; }
.nav-item,.rail-foot small { color: #939d97; }
.user-button b { color: #d1d7d2; }
.node-identity p,.gauge small { color: #a1aaa4; }
.service-initial,.service-version,.event-head { color: #9da6a0; }
.action-button { color: #d7ddd8; }
.event-row { color: #c0c7c2; }
@keyframes pulse { 50% { opacity: .45; } } @keyframes scan { 0%,100% { transform: scaleX(.15); opacity: .2; } 50% { transform: scaleX(1); opacity: 1; } } @keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } } @keyframes fade { from { opacity: 0; } to { opacity: 1; } } @keyframes spin { to { transform: rotate(360deg); } }

@media (max-width: 1120px) { .service-grid { grid-template-columns: repeat(3,1fr); }.status-band { grid-template-columns: 1fr 2fr; }.health-score { display: none; }.metric-layout { grid-template-columns: 1fr 1fr; }.redis-panel { grid-column: 1 / -1; }.login-view { grid-template-columns: 1fr 440px; }.login-stage { padding: 50px; }.login-copy h1 { font-size: 86px; } }
@media (max-width: 760px) { .login-view { display: block; padding: 28px 18px; }.login-stage { min-height: 230px; padding: 25px; border: 1px solid var(--line); }.login-copy h1 { font-size: 58px; line-height: .8; }.login-sub { margin: 20px 0 10px; }.login-meta,.signal-core { display: none; }.login-panel { width: 100%; margin: 30px auto; }.console { display: block; }.rail { inset: auto 0 0; width: auto; height: 66px; flex-direction: row; border: 0; border-top: 1px solid var(--line); }.rail-brand,.rail-foot { display: none; }.rail nav { margin: 0; grid-template-columns: repeat(4,1fr); }.nav-item { min-height: 65px; border-left: 0; border-bottom: 2px solid transparent; }.nav-item.active { border-left: 0; border-bottom-color: var(--green); }.topbar { height: 78px; padding: 0 16px; }.topbar h1 { font-size: 20px; }.clock { display: none; }.user-button span { display: none; }.status-band { grid-template-columns: 1fr; gap: 26px; padding: 25px 16px; }.node-identity { display: none; }.gauge-list { gap: 15px; }.content-section { padding: 42px 16px; }.service-grid { grid-template-columns: 1fr 1fr; }.metric-layout { display: block; }.trend-panel,.metric-panel { margin-bottom: 10px; }.trend-panel { padding: 17px; min-height: 400px; }.chart-summary { grid-template-columns: 1fr 1fr; }.sample-window { display: none; }.chart-stage { height: 225px; }.trend-panel canvas { height: 215px; }.trend-panel footer { justify-content: space-between; gap: 7px; }.metric-panel { min-height: 270px; }.event-head,.event-row { grid-template-columns: 78px 64px 1fr; }.event-head span:nth-child(3),.event-row span:nth-child(3) { display: none; }.events-section { padding-bottom: 100px; } }
@media (max-width: 430px) { .captcha-field > div { grid-template-columns: 125px 1fr 44px; }.gauge-list { grid-template-columns: 1fr; }.service-grid { grid-template-columns: 1fr; }.section-title { align-items: start; }.service-card { min-height: 180px; }.trend-panel footer span:nth-child(3) { display: none; } }
@media (prefers-reduced-motion: reduce) { *,*::before,*::after { scroll-behavior: auto !important; animation: none !important; transition: none !important; } }