:root { color-scheme: light; --navy:#142033; --blue:#1d63d8; --green:#13865a; --red:#c33b3b; --amber:#a76608; --bg:#f3f5f8; --surface:#fff; --text:#162033; --muted:#677386; --line:#dfe4eb; --shadow:0 14px 34px rgba(17,32,54,.08); }
* { box-sizing:border-box; }
[hidden] { display:none !important; }
body { margin:0; min-width:320px; background:var(--bg); color:var(--text); font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif; line-height:1.5; }
button,input { font:inherit; }
.login-view { min-height:100vh; display:grid; place-items:center; padding:28px; background:linear-gradient(135deg,#13223a 0%,#1b355e 55%,#17304f 100%); }
.login-panel { width:min(440px,100%); padding:34px; background:#fff; border-radius:14px; box-shadow:0 28px 70px rgba(0,0,0,.26); }
.login-brand { display:flex; align-items:center; gap:12px; }
.login-brand>span,.brand-mark { width:40px; height:40px; display:grid; place-items:center; border-radius:8px; background:var(--blue); color:#fff; font-weight:800; font-size:13px; }
.login-brand div { display:grid; }.login-brand small { color:var(--muted); }
.login-copy { margin:36px 0 26px; }.login-copy p,.eyebrow,.control-copy>p { margin:0 0 6px; color:var(--blue); font-size:12px; font-weight:750; letter-spacing:.08em; text-transform:uppercase; }
.login-copy h1 { margin:0; font-size:27px; }.login-copy span { display:block; margin-top:10px; color:var(--muted); font-size:14px; }
form { display:grid; gap:18px; }label { display:grid; gap:7px; font-size:13px; font-weight:650; }input { width:100%; height:44px; padding:0 12px; border:1px solid #cbd3df; border-radius:7px; outline:none; }input:focus { border-color:var(--blue); box-shadow:0 0 0 3px rgba(29,99,216,.12); }
.form-error { min-height:20px; margin:-5px 0 0; color:var(--red); font-size:13px; }.login-foot { margin:22px 0 0; color:#8993a3; font-size:12px; text-align:center; }
.topbar { height:68px; padding:0 max(24px,calc((100vw - 1180px)/2)); display:flex; align-items:center; justify-content:space-between; background:var(--navy); color:#fff; }
.brand { display:flex; align-items:center; gap:11px; }.brand div { display:grid; }.brand strong { font-size:15px; }.brand div span { color:#aeb8c8; font-size:12px; }
.admin-area { display:flex; align-items:center; gap:9px; font-size:13px; }.secure-dot { width:8px; height:8px; border-radius:50%; background:#46d39b; }.admin-area button { margin-left:7px; padding:5px 10px; border:1px solid #526078; border-radius:5px; background:transparent; color:#dce2ea; cursor:pointer; }
main { width:min(1180px,calc(100% - 48px)); margin:auto; padding:42px 0 70px; }
.page-heading { display:flex; justify-content:space-between; align-items:flex-end; gap:30px; }.page-heading h1 { margin:0; font-size:32px; }.page-heading>div>p:last-child { margin:10px 0 0; color:var(--muted); }
.overall-state { min-width:190px; display:flex; gap:12px; align-items:center; padding:15px 17px; background:#fff; border:1px solid var(--line); border-radius:8px; }.overall-state>span,.service-status>span { width:10px; height:10px; border-radius:50%; background:#98a2b3; }.overall-state div { display:grid; }.overall-state small { color:var(--muted); }.overall-state[data-state="active"]>span,.service-status[data-state="active"]>span { background:var(--green); box-shadow:0 0 0 4px #e4f6ee; }.overall-state[data-state="partial"]>span { background:var(--amber); }
.metrics { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-top:28px; }.metrics article { min-height:132px; padding:20px; background:#fff; border:1px solid var(--line); border-radius:9px; }.metrics small,.metrics span { color:var(--muted); }.metrics strong { display:block; margin:10px 0 5px; font-size:30px; line-height:1.1; }.metrics strong.danger { color:var(--red); }.metrics strong.time { font-size:21px; }.metrics span { font-size:12px; }
.control-panel { display:flex; align-items:center; justify-content:space-between; gap:25px; margin-top:18px; padding:24px; background:#fff; border:1px solid var(--line); border-radius:9px; box-shadow:var(--shadow); }.control-copy h2 { margin:0; font-size:19px; }.control-copy span,.section-heading span { display:block; margin-top:5px; color:var(--muted); font-size:13px; }.actions { display:flex; gap:10px; flex-wrap:wrap; }
.button { min-height:40px; padding:0 17px; border:1px solid transparent; border-radius:6px; font-weight:700; cursor:pointer; }.button:disabled { opacity:.5; cursor:not-allowed; }.button.primary { background:var(--blue); color:#fff; }.button.danger { background:#fff0f0; border-color:#efc6c6; color:var(--red); }.button.secondary { background:#fff; border-color:#cbd3df; color:#344054; }.button.full { width:100%; }
.services { margin-top:18px; background:#fff; border:1px solid var(--line); border-radius:9px; overflow:hidden; }.services article { display:flex; align-items:center; justify-content:space-between; gap:24px; padding:22px 24px; }.services article+article { border-top:1px solid var(--line); }.service-title { display:flex; align-items:center; gap:16px; }.service-icon { width:44px; height:44px; display:grid; place-items:center; border-radius:8px; font-weight:800; }.service-icon.blue { background:#edf4ff; color:var(--blue); }.service-icon.green { background:#eaf7f1; color:var(--green); }.service-title h2 { margin:0; font-size:16px; }.service-title p { margin:4px 0 0; color:var(--muted); font-size:13px; }.service-status { min-width:135px; display:grid; grid-template-columns:10px auto; align-items:center; justify-content:end; gap:7px; }.service-status small { grid-column:2; color:var(--muted); font-size:11px; }
.logs-section { margin-top:34px; }.section-heading { display:flex; align-items:end; justify-content:space-between; gap:20px; }.section-heading h2 { margin:0; font-size:21px; }.log-tabs { display:flex; gap:24px; margin-top:18px; border-bottom:1px solid var(--line); }.log-tabs button { padding:0 2px 10px; border:0; border-bottom:2px solid transparent; background:transparent; color:var(--muted); cursor:pointer; }.log-tabs button.active { border-bottom-color:var(--blue); color:var(--blue); font-weight:750; }
pre { min-height:280px; max-height:470px; margin:0; padding:20px; overflow:auto; background:#111b2b; color:#d9e2ef; font:12px/1.65 ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace; white-space:pre-wrap; overflow-wrap:anywhere; border-radius:0 0 8px 8px; }
.toast { position:fixed; right:22px; bottom:22px; max-width:min(420px,calc(100vw - 44px)); padding:13px 16px; border-radius:7px; background:#111b2b; color:#fff; box-shadow:var(--shadow); opacity:0; transform:translateY(10px); pointer-events:none; transition:.18s; }.toast.visible { opacity:1; transform:none; }.toast.error { background:#8f2929; }
@media(max-width:820px){.topbar{padding:0 16px}main{width:calc(100% - 28px);padding-top:28px}.page-heading,.control-panel,.section-heading{align-items:stretch;flex-direction:column}.metrics{grid-template-columns:1fr 1fr}.actions{display:grid;grid-template-columns:1fr 1fr}.actions .secondary{grid-column:1/-1}.services article{align-items:flex-start;flex-direction:column}.service-status{justify-content:start}.page-heading h1{font-size:26px}}
@media(max-width:500px){.metrics{grid-template-columns:1fr}.login-panel{padding:25px}.admin-area>span:not(.secure-dot){display:none}}