:root{--bg:#f4f6f3;--surface:#fff;--ink:#17201a;--muted:#66706a;--line:#d8ded9;--black:#111713;--green:#087f5b;--green-soft:#dff5eb;--red:#c92a2a;--red-soft:#fff0f0;--amber:#b26a00;--blue:#1769aa;--shadow:0 8px 26px rgba(20,34,24,.08)}
*{box-sizing:border-box;letter-spacing:0}
html{color-scheme:light}
body{margin:0;background:var(--bg);color:var(--ink);font:14px/1.5 Inter,"Segoe UI","Microsoft YaHei",sans-serif}
button,input{font:inherit;letter-spacing:0}
button{cursor:pointer}
.topbar{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:66px;padding:10px clamp(16px,3vw,38px);background:var(--black);color:#fff;border-bottom:3px solid #42b883}
.brand,.top-actions{display:flex;align-items:center;gap:12px}.brand>div{display:grid;gap:1px}.brand b{font-size:15px}.brand small{color:#aab7af;font-size:11px}
.brand-mark{display:grid;place-items:center;width:48px;height:48px;border-radius:6px;background:#42b883;color:#0b2419;font-weight:900}.brand-mark.small{width:34px;height:34px;font-size:11px}
.connection{display:inline-flex;align-items:center;gap:7px;font-size:12px;color:#c4cec8}.connection i{width:8px;height:8px;border-radius:50%;background:#8c9991}.connection.online i{background:#52d89d;box-shadow:0 0 0 4px rgba(82,216,157,.13)}.connection.offline i{background:#ff7373}
.icon-button,.quiet-button{height:36px;border:1px solid #3b4640;border-radius:6px;background:#202822;color:#fff}.icon-button{width:36px;font-size:21px;line-height:1}.quiet-button{padding:0 13px}.icon-button:hover,.quiet-button:hover{background:#2c3730}
.dashboard{display:grid;gap:28px;width:min(1440px,100%);margin:0 auto;padding:24px clamp(14px,3vw,38px) 50px}
.metrics{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}
.metric{min-height:108px;padding:15px 16px;background:var(--surface);border:1px solid var(--line);border-radius:6px;box-shadow:var(--shadow)}.metric span{display:block;color:var(--muted);font-size:12px}.metric b{display:block;margin:8px 0 13px;font-size:23px}.meter{height:5px;overflow:hidden;background:#e8ece9;border-radius:3px}.meter i{display:block;height:100%;background:var(--green)}.metric.danger .meter i{background:var(--red)}.metric.plain .meter{visibility:hidden}
.section-heading{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:10px}.section-heading h1{margin:0;font-size:16px}.section-heading>span{color:var(--muted);font-size:12px}
.service-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}.service-item{min-height:150px;padding:15px;background:var(--surface);border:1px solid var(--line);border-radius:6px}.service-item>div{display:flex;align-items:center;gap:8px}.service-item>strong{display:block;margin:10px 0 12px;font-size:12px}.service-dot{width:9px;height:9px;border-radius:50%}.service-dot.ok{background:var(--green)}.service-dot.bad{background:var(--red)}.ok-text{color:var(--green)}.bad-text{color:var(--red)}.warn-text{color:var(--amber)}.redirect-text{color:var(--blue)}
dl{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;margin:0;font-size:11px}dt{color:var(--muted)}dd{margin:0;text-align:right;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.activity-section{min-width:0}.request-summary{display:flex;flex-wrap:wrap;gap:12px;font-size:12px}.tabs{display:flex;gap:3px;border-bottom:1px solid var(--line)}.tab{height:38px;padding:0 15px;border:0;border-bottom:2px solid transparent;background:transparent;color:var(--muted)}.tab.active{border-bottom-color:var(--green);color:var(--ink);font-weight:700}.tab-view{display:none;min-height:300px;background:var(--surface);border:1px solid var(--line);border-top:0}.tab-view.active{display:block}
.table-scroll{max-height:520px;overflow:auto}table{width:100%;border-collapse:collapse;table-layout:fixed}th,td{padding:9px 11px;border-bottom:1px solid #edf0ed;text-align:left;font-size:11px}th{position:sticky;top:0;background:#f8faf8;color:var(--muted);font-weight:700}th:nth-child(1){width:156px}th:nth-child(2){width:100px}th:nth-child(3){width:68px}th:nth-child(5){width:72px}th:nth-child(6){width:210px}.path-cell,.agent-cell{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.status-code{display:inline-grid;place-items:center;min-width:43px;height:23px;border-radius:4px;font:700 11px ui-monospace,monospace}.status-code.ok{background:var(--green-soft);color:var(--green)}.status-code.redirect{background:#e8f2fb;color:var(--blue)}.status-code.warn{background:#fff4db;color:var(--amber)}.status-code.bad{background:var(--red-soft);color:var(--red)}
.log-list{max-height:520px;overflow:auto}.log-row{display:grid;grid-template-columns:42px minmax(0,1fr);gap:9px;padding:8px 11px;border-bottom:1px solid #edf0ed}.log-row>span{color:var(--green);font:800 10px ui-monospace,monospace}.log-row.error{background:#fffafa}.log-row.error>span{color:var(--red)}.log-row code{white-space:pre-wrap;overflow-wrap:anywhere;color:#37423b;font:11px/1.5 ui-monospace,"Cascadia Mono",monospace}.empty{padding:34px!important;text-align:center!important;color:var(--muted)}
.login-body{min-height:100vh;background:#eef2ee}.login-shell{display:grid;place-items:center;min-height:100vh;padding:20px}.login-panel{width:min(390px,100%);padding:28px;background:#fff;border:1px solid var(--line);border-radius:6px;box-shadow:var(--shadow)}.login-panel h1{margin:16px 0 22px;font-size:21px}.login-panel form{display:grid;gap:9px}.login-panel label{font-size:12px;color:var(--muted)}.login-panel input{width:100%;height:44px;padding:0 12px;border:1px solid #bbc5be;border-radius:5px;outline:none}.login-panel input:focus{border-color:var(--green);box-shadow:0 0 0 3px rgba(8,127,91,.1)}.login-panel button{height:44px;margin-top:7px;border:0;border-radius:5px;background:var(--black);color:#fff;font-weight:700}.login-error{margin:0;color:var(--red);font-size:12px}
@media(max-width:1000px){.metrics{grid-template-columns:repeat(3,minmax(0,1fr))}.service-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:680px){.topbar{align-items:flex-start}.top-actions{gap:7px}.connection{display:none}.dashboard{padding-top:16px}.metrics{grid-template-columns:repeat(2,minmax(0,1fr))}.metric{min-height:96px}.metric b{font-size:19px}.service-grid{grid-template-columns:1fr}.section-heading{align-items:flex-start;flex-direction:column}.request-summary{gap:8px}.tabs{overflow-x:auto}.table-scroll{max-height:500px}table{min-width:900px}.login-panel{padding:22px}}