:root{--ink:#10233f;--muted:#6c7b91;--line:#dfe7f1;--bg:#f4f7fb;--white:#fff}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font-family:Inter,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif}
.shell{max-width:1380px;margin:auto;padding:42px 28px 30px}.hero{display:flex;justify-content:space-between;gap:30px;align-items:flex-end;margin-bottom:34px}.eyebrow{font-size:12px;font-weight:800;letter-spacing:.18em;color:#67809f;margin:0 0 12px}.hero h1{font-size:40px;line-height:1.08;margin:0 0 10px}.lead{margin:0;color:var(--muted);font-size:17px}.summary{min-width:180px;background:#eaf2fa;border:1px solid #d8e5f2;border-radius:18px;padding:16px 20px;display:grid;text-align:right}.summary strong{font-size:28px}.summary span{font-weight:700}.summary small{color:var(--muted);margin-top:4px}.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}.card{--accent:#2878d0;position:relative;background:var(--white);border:1px solid var(--line);border-radius:24px;padding:25px;min-height:300px;box-shadow:0 12px 35px rgba(30,60,96,.06);overflow:hidden}.card:before{content:"";position:absolute;inset:0 auto 0 0;width:5px;background:var(--accent)}.card.green{--accent:#169c68}.card.orange{--accent:#ec8b23}.card.purple{--accent:#7654cf}.card.cyan{--accent:#0b99b7}.card.navy{--accent:#173e6d}.card-top{display:flex;justify-content:space-between;align-items:center}.icon{display:grid;place-items:center;width:48px;height:48px;border-radius:14px;background:color-mix(in srgb,var(--accent) 12%,white);color:var(--accent);font-weight:900}.status{display:flex;gap:7px;align-items:center;padding:7px 11px;border-radius:99px;font-size:13px;font-weight:800;background:#edf1f5;color:#607086}.status i{width:7px;height:7px;border-radius:50%;background:currentColor}.status.online{background:#e5f8ef;color:#07864f}.status.offline{background:#fff0f0;color:#c34343}.status.warning{background:#fff5dc;color:#a76b00}.title-block{margin:24px 0 20px}.title-block h2{font-size:23px;margin:0 0 7px}.title-block p{margin:0;color:var(--muted)}.metric{padding:18px;border-radius:16px;background:#f6f8fb;display:flex;justify-content:space-between;align-items:end;margin-bottom:20px}.metric strong{font-size:31px;color:var(--accent)}.metric span{font-size:13px;color:var(--muted)}.enter{display:flex;justify-content:space-between;align-items:center;text-decoration:none;color:var(--ink);font-weight:800;border-top:1px solid var(--line);padding-top:18px}.enter span{color:var(--accent);font-size:21px}.enter.disabled{color:#94a0af}.enter.disabled span{color:#aeb8c4}footer{display:flex;justify-content:space-between;color:#8290a3;font-size:12px;padding:28px 4px 0}
.logout{font-size:12px;color:#526b89;margin-top:8px;text-decoration:none}.login-body{min-height:100vh;background:linear-gradient(135deg,#09264a 0%,#164f79 46%,#eef4fa 46%);display:grid;place-items:center}.login-layout{width:min(1080px,92vw);min-height:620px;display:grid;grid-template-columns:1.15fr .85fr;background:rgba(255,255,255,.97);border-radius:30px;overflow:hidden;box-shadow:0 30px 90px rgba(3,20,43,.28)}.login-brand{padding:76px 64px;color:white;background:linear-gradient(145deg,#0b2a52,#0b7890);display:flex;flex-direction:column;justify-content:center}.login-brand .eyebrow{color:#91d7e0}.login-brand h1{font-size:52px;line-height:1.15;margin:12px 0 24px}.login-brand>p:not(.eyebrow){font-size:17px;line-height:1.8;color:#d6e9f0}.login-points{display:flex;gap:10px;margin-top:35px;flex-wrap:wrap}.login-points span{border:1px solid rgba(255,255,255,.25);padding:8px 13px;border-radius:99px;font-size:12px}.login-card{padding:62px 54px;display:flex;flex-direction:column;justify-content:center}.login-mark{width:52px;height:52px;border-radius:16px;background:#e6f2f6;color:#087b91;display:grid;place-items:center;font-size:23px;font-weight:900;margin-bottom:24px}.login-card h2{font-size:28px;margin:0 0 8px}.login-note{color:var(--muted);margin:0 0 26px}.login-error{background:#fff0f0;color:#b53939;padding:12px 14px;border-radius:10px;margin-bottom:14px}.login-card form{display:grid;gap:17px}.login-card label{display:grid;gap:8px;font-size:13px;font-weight:700}.login-card input{width:100%;border:1px solid #ced9e6;border-radius:12px;padding:14px 15px;font:inherit;outline:none}.login-card input:focus{border-color:#0b8ba3;box-shadow:0 0 0 3px rgba(11,139,163,.12)}.login-card button{margin-top:6px;border:0;border-radius:12px;padding:15px 18px;background:#087d94;color:white;font-weight:800;font-size:15px;display:flex;justify-content:space-between;cursor:pointer}.login-card small{color:#94a0af;margin-top:28px}
@media(max-width:980px){.grid{grid-template-columns:repeat(2,1fr)}.login-layout{grid-template-columns:1fr}.login-brand{display:none}}@media(max-width:650px){.shell{padding:28px 16px}.hero{align-items:flex-start;flex-direction:column}.summary{text-align:left}.grid{grid-template-columns:1fr}.hero h1{font-size:34px}footer{gap:12px;flex-direction:column}.login-card{padding:42px 28px}.login-layout{min-height:520px}}
.card{min-height:365px}.metrics-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-bottom:10px}.mini-metric{min-height:76px;padding:12px 13px;border-radius:13px;background:#f6f8fb;display:flex;flex-direction:column;justify-content:space-between;gap:7px}.mini-metric span{font-size:11px;color:var(--muted)}.mini-metric strong{font-size:18px;line-height:1.1;color:var(--accent);overflow-wrap:anywhere}.data-note{min-height:18px;margin:0 0 13px;color:var(--muted);font-size:11px}