:root{--navy:#102a43;--blue:#2f6bff;--cyan:#16a6a1;--orange:#f59e0b;--purple:#7c5ce5;--bg:#f4f7fb;--panel:#fff;--text:#19324a;--muted:#718096;--line:#e4eaf1;--danger:#d64545;--shadow:0 18px 50px rgba(22,50,79,.09)}
*{box-sizing:border-box}body{margin:0;font-family:Inter,"PingFang SC","Microsoft YaHei",system-ui,sans-serif;background:var(--bg);color:var(--text)}button,input,select{font:inherit}.hidden{display:none!important}
.login-shell{min-height:100vh;display:grid;grid-template-columns:1.2fr .8fr;background:linear-gradient(135deg,#102a43 0%,#174a72 52%,#f4f7fb 52%)}
.brand-panel{padding:12vh 8vw;color:white;max-width:760px}.eyebrow{font-size:11px;letter-spacing:.18em;font-weight:800;color:#77d9d5}.brand-panel h1{font-size:56px;line-height:1.12;margin:25px 0}.brand-panel p{font-size:18px;line-height:1.8;color:#d7e4ef;max-width:620px}.brand-stats{display:flex;gap:12px;margin-top:40px}.brand-stats span{padding:9px 14px;border:1px solid #ffffff33;border-radius:999px;background:#ffffff12;font-size:13px}
.login-card{align-self:center;justify-self:center;width:min(420px,86%);padding:42px;background:#fff;border-radius:24px;box-shadow:0 25px 80px #102a4326}.logo-mark{display:grid;place-items:center;width:56px;height:56px;border-radius:18px;background:linear-gradient(135deg,var(--blue),var(--cyan));color:#fff;font-weight:900;font-size:22px;box-shadow:0 12px 25px #2f6bff40}.logo-mark.small{width:42px;height:42px;border-radius:13px;font-size:17px}.login-card h2{margin:25px 0 8px;font-size:27px}.login-card>p{margin:0 0 28px;color:var(--muted)}
label{display:grid;gap:8px;font-size:13px;font-weight:700;margin-bottom:18px}input,select{width:100%;border:1px solid var(--line);background:#fff;border-radius:11px;padding:12px 14px;color:var(--text);outline:none}input:focus,select:focus{border-color:var(--blue);box-shadow:0 0 0 3px #2f6bff18}
.primary,.secondary,.icon-button{border:0;border-radius:10px;cursor:pointer;font-weight:750}.primary{background:var(--blue);color:#fff;padding:11px 17px;box-shadow:0 8px 20px #2f6bff2e}.secondary{background:#eef3f8;color:var(--text);padding:11px 17px}.wide{width:100%;margin-top:6px}.form-error{color:var(--danger);font-size:13px;min-height:18px;margin-top:12px}
.app-shell{min-height:100vh}.sidebar{position:fixed;inset:0 auto 0 0;width:238px;background:var(--navy);padding:25px 18px;color:white;display:flex;flex-direction:column}.side-brand{display:flex;gap:12px;align-items:center;padding:0 8px 30px}.side-brand strong,.side-brand span{display:block}.side-brand span{font-size:11px;color:#8ca5ba;margin-top:4px;letter-spacing:.08em}.sidebar nav{display:grid;gap:7px}.nav-item{border:0;background:transparent;color:#a9bdcf;text-align:left;padding:13px 15px;border-radius:11px;cursor:pointer;display:flex;align-items:center;gap:12px;font-weight:700}.nav-item span{font-size:20px}.nav-item:hover,.nav-item.active{background:#ffffff12;color:white}.side-footer{margin-top:auto;border-top:1px solid #ffffff18;padding:18px 8px 0;display:flex;justify-content:space-between;align-items:center;font-size:13px}.side-footer>div{display:flex;align-items:center;gap:8px}.side-footer button{background:transparent;border:0;color:#9fb3c5;cursor:pointer}.status-dot{width:8px;height:8px;border-radius:50%;background:#4ade80;box-shadow:0 0 0 4px #4ade8020}
.main-content{margin-left:238px;padding:28px 34px 60px;min-width:760px}.topbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:25px}.topbar h1{margin:5px 0 0;font-size:28px}.top-actions{display:flex;gap:10px;align-items:center}.top-actions select{width:auto}.page{display:none}.page.active{display:block}
.access-banner{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;margin:-7px 0 20px;padding:13px 16px;border-radius:13px;background:#fff4d6;border:1px solid #f1d48a;color:#6d5316;font-size:13px}.access-banner.ok{background:#e8f8ef;border-color:#bce8cf;color:#176b40}.access-banner code{background:#ffffffa0;border-radius:7px;padding:6px 8px;color:inherit}.field-help{color:var(--muted);font-weight:400;line-height:1.5}
.kpi-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-bottom:18px}.kpi{background:linear-gradient(150deg,#fff,#edf3ff);border:1px solid #e1e9fa;padding:22px;border-radius:17px;box-shadow:var(--shadow)}.kpi.cyan{background:linear-gradient(150deg,#fff,#e8f8f6)}.kpi.orange{background:linear-gradient(150deg,#fff,#fff5de)}.kpi.purple{background:linear-gradient(150deg,#fff,#f2edff)}.kpi span{display:block;color:var(--muted);font-size:13px;font-weight:700}.kpi strong{display:block;font-size:35px;margin:14px 0 7px}.kpi small{color:#92a1af}
.chart-grid{display:grid;grid-template-columns:1.65fr 1fr;gap:18px;margin-bottom:18px}.chart-grid.equal{grid-template-columns:1fr 1fr}.panel{background:var(--panel);border:1px solid var(--line);border-radius:17px;padding:20px;box-shadow:var(--shadow);min-width:0}.panel-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px;gap:18px}.panel-head.responsive{align-items:flex-end}.panel-head h3{margin:0;font-size:17px}.panel-head p{margin:6px 0 0;color:var(--muted);font-size:12px}.date-filter{display:flex;align-items:flex-end;gap:8px;flex-wrap:wrap}.date-filter label{margin:0;color:var(--muted);font-size:11px}.date-filter input{width:145px;margin-top:4px;padding:9px 10px}.date-filter>span{padding-bottom:10px;color:var(--muted)}.query-result{min-height:22px;margin:-7px 0 10px;color:var(--muted);font-size:12px}
.bar-list{display:grid;gap:15px}.bar-row{display:grid;grid-template-columns:68px 1fr 46px;gap:10px;align-items:center;font-size:13px}.bar-track{height:9px;border-radius:999px;background:#edf1f5;overflow:hidden}.bar-fill{height:100%;border-radius:999px;background:linear-gradient(90deg,var(--blue),#61a1ff)}.empty{color:#8998a7;text-align:center;padding:70px 0;font-size:13px}
.donut-wrap{min-height:220px;display:grid;grid-template-columns:180px 1fr;align-items:center;gap:18px}.donut{width:165px;height:165px;border-radius:50%;display:grid;place-items:center}.donut::after{content:"";width:105px;height:105px;background:#fff;border-radius:50%}.legend{display:grid;gap:10px}.legend-row{display:flex;justify-content:space-between;gap:15px;font-size:13px}.legend-row span:first-child::before{content:"";display:inline-block;width:8px;height:8px;background:var(--dot);border-radius:50%;margin-right:8px}
.table-wrap{overflow:auto}table{width:100%;border-collapse:collapse;font-size:13px}th{text-align:left;color:#8292a2;font-size:11px;letter-spacing:.04em;padding:10px;border-bottom:1px solid var(--line);white-space:nowrap}td{padding:13px 10px;border-bottom:1px solid #edf1f5;vertical-align:middle}td strong{display:block}td small{display:block;color:var(--muted);margin-top:4px}.badge{display:inline-flex;align-items:center;border-radius:999px;padding:5px 9px;background:#eaf1ff;color:#2861e6;font-size:11px;font-weight:750}.badge.green{background:#e8f8ef;color:#17864a}.badge.gray{background:#edf1f5;color:#6b7b8b}.action-row{display:flex;gap:7px;flex-wrap:wrap}.action{border:0;background:#eef3f8;color:#38516a;padding:7px 9px;border-radius:8px;cursor:pointer;font-size:12px}.action.danger{background:#fff0f0;color:#c0392b}.search{width:260px}.url-cell{max-width:260px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
dialog{border:0;border-radius:20px;padding:0;box-shadow:0 30px 100px #102a4350}dialog::backdrop{background:#102a4370;backdrop-filter:blur(4px)}.dialog-card{width:min(720px,90vw);padding:28px}.dialog-head{display:flex;justify-content:space-between;align-items:start}.dialog-head h2{margin:6px 0 22px}.icon-button{background:#eef3f8;width:36px;height:36px;font-size:23px}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 18px}.span-2{grid-column:span 2}.dialog-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:10px}.preview-card{width:min(420px,90vw);padding:30px;text-align:center;position:relative}.preview-card .icon-button{position:absolute;right:18px;top:18px}.preview-card img{width:260px;height:260px;margin:15px auto}.preview-card h3{margin:5px 0}.preview-card p{color:var(--muted);font-size:12px;word-break:break-all}.preview-card>div:last-child{display:flex;justify-content:center;gap:10px;margin-top:20px}.button-link{text-decoration:none;display:inline-block}.toast{position:fixed;right:25px;bottom:25px;background:var(--navy);color:#fff;padding:13px 18px;border-radius:11px;box-shadow:var(--shadow);transform:translateY(30px);opacity:0;pointer-events:none;transition:.25s}.toast.show{transform:translateY(0);opacity:1}
@media(max-width:1000px){.kpi-grid{grid-template-columns:repeat(2,1fr)}.chart-grid,.chart-grid.lower{grid-template-columns:1fr}.login-shell{grid-template-columns:1fr;background:var(--navy)}.brand-panel{display:none}}
@media(max-width:760px){.sidebar{width:76px;padding:20px 10px}.side-brand>div:last-child,.nav-item:not(.active){font-size:0}.nav-item{justify-content:center}.nav-item span{font-size:20px}.side-footer{display:none}.main-content{margin-left:76px;min-width:0;padding:20px 14px}.topbar{align-items:start;gap:16px}.top-actions{flex-wrap:wrap;justify-content:flex-end}.kpi-grid{grid-template-columns:1fr}.form-grid{grid-template-columns:1fr}.span-2{grid-column:span 1}.donut-wrap{grid-template-columns:1fr;justify-items:center}}