:root{--bg:#0f1115;--card:#151822;--muted:#98a2b3;--txt:#e5e7eb;--accent:#6ea8fe;--danger:#ff6b6b;--ok:#22c55e;}
*{box-sizing:border-box}html,body{height:100%}body{margin:0;background:var(--bg);color:var(--txt);font:14px/1.45 system-ui,Segoe UI,Roboto,Arial}
.app-header{display:flex;justify-content:space-between;align-items:center;padding:10px 14px;border-bottom:1px solid #232635;background:#0d0f16;position:sticky;top:0;z-index:10}
.brand{display:flex;align-items:center;gap:8px}.brand-icon{width:28px;height:28px;border-radius:6px}.brand-name{font-weight:700}
.tabs{display:flex;gap:8px}.tabs button{background:#1c2030;border:1px solid #2a2e42;color:#cfd6e6;border-radius:8px;padding:8px 10px;cursor:pointer}
.tabs button.active{background:#24304a;border-color:#3a4a74}
main{padding:18px}
.view{display:none}.view.active{display:block}
.card{background:var(--card);border:1px solid #232635;border-radius:12px;padding:14px;margin-bottom:16px}
.grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.row{display:flex;gap:10px;align-items:center}.wrap{flex-wrap:wrap}
label{display:flex;flex-direction:column;gap:6px}
input,textarea,select,button{border-radius:8px;border:1px solid #2a2e42;background:#121624;color:#e7ebf6;padding:8px 10px}
input:required:invalid{outline:1px solid #853d3d}
button{cursor:pointer}
button .btnspin{display:inline-block;width:14px;height:14px;border:2px solid #7c86a7;border-top-color:transparent;border-radius:50%;margin-right:6px;vertical-align:-2px;opacity:.0;transition:opacity .15s}
button.loading .btnspin{opacity:1;animation:spin .8s linear infinite}
.status{color:var(--muted)}.muted{color:var(--muted)}
.table{width:100%;border-collapse:collapse}
.table th,.table td{border-top:1px solid #262a3d;padding:8px 6px;text-align:left}
.hint{color:#9aa3b2;margin:.25rem 0}
.metric{display:flex;gap:10px;align-items:baseline}
.metric-num{font-size:28px;font-weight:800}
.global-loading{position:fixed;inset:0;background:#0f1115cc;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:10px}
.global-loading.hidden{display:none}.spinner-lg{width:36px;height:36px;border:3px solid #8b95b5;border-top-color:transparent;border-radius:50%;animation:spin .9s linear infinite}
.progress{flex:1;height:8px;background:#1b2030;border-radius:999px;overflow:hidden;min-width:120px;border:1px solid #2a2e42}
.progress .bar{height:100%;background:linear-gradient(90deg,#3b82f6,#22c55e)}
.danger{border-color:#5a1d1d;background:#2a1515;color:#ffc9c9}
.costwrap{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.legend{display:flex;align-items:center;gap:10px;margin:8px 0}.legend .sep{width:1px;height:16px;background:#2a2e42;display:inline-block}
.dot{width:10px;height:10px;border-radius:50%;display:inline-block}
.dot-a{background:#16a34a}.dot-b{background:#f59e0b}.dot-c{background:#ef4444}.dot-d{background:#6b7280}
.map{width:100%;height:520px;border:1px solid #232635;border-radius:12px;background:#0a0c12}
.drawer{position:fixed;right:12px;bottom:12px;width:420px;max-width:95vw;max-height:70vh;background:#101522;border:1px solid #2a2e42;border-radius:12px;box-shadow:0 16px 50px rgba(0,0,0,.5);display:flex;flex-direction:column}
.drawer.hidden{display:none}.drawer-head{display:flex;justify-content:space-between;align-items:center;padding:10px;border-bottom:1px solid #232635}
.drawer-body{padding:10px;overflow:auto}
.app-footer{padding:12px;border-top:1px solid #232635;color:#93a1b7}
@keyframes spin{to{transform:rotate(360deg)}}
@media (max-width:960px){.grid-3{grid-template-columns:1fr}.grid-2{grid-template-columns:1fr}}