/* UI based on the supplied second screenshot. All data and forms remain server-rendered. */
:root{--bg:#f2f6fc;--card:#fff;--text:#132747;--muted:#637694;--border:#d9e4f1;--blue:#176ee6;--soft:#eaf1fa;--input:#f8fbff;--accent:#129bd9;--line:#dce8f4;--shadow:0 7px 21px rgba(9,48,100,.07)}
html[data-theme=dark]{--bg:#031329;--card:#061a33;--text:#edf5ff;--muted:#9bb1cc;--border:#17416b;--blue:#39afff;--soft:#0b2b4c;--input:#09223f;--accent:#32bdff;--line:#113452;--shadow:none}
body{background:var(--bg);font:14px/1.45 Inter,"Segoe UI",Arial,sans-serif;color:var(--text)}
.sidebar{width:201px;padding:11px 6px;background:linear-gradient(180deg,#041633,#03112b);border-right:1px solid #163f65}.main{margin-left:201px}.brand{font-size:12px;letter-spacing:.06em;gap:8px;padding:7px 4px 13px;margin:0 3px 13px;border-bottom:1px solid #173d64}.brand small{font-size:8px}.wheel{width:41px;height:41px;min-width:41px;border-color:#2589ef;color:#83d9ff;font-size:23px}.nav a{font-size:12px;padding:10px 8px;margin:2px 0;border:1px solid transparent;border-radius:5px;color:#c4d7ef;gap:10px}.nav a.active{background:linear-gradient(90deg,#084489,#092b61);border-color:#176ee7;box-shadow:inset 3px 0 #25c9ff}.nav-icon{width:17px;font-size:16px;color:#5bbdf9}.system-status{margin:12px 7px;border-top:1px solid #214260;padding:14px 4px;font-size:11px}
.header{min-height:69px;padding:11px 18px;gap:14px;background:var(--card);border-color:var(--border);box-shadow:none}.header h1{font-size:22px;letter-spacing:-.02em}.header .muted{font-size:11px}.header-search-form{margin-left:auto}.header-search-form .header-search{width:min(300px,22vw);min-height:36px;padding:7px 10px;background:var(--input)}.header .btn{min-height:34px}.profile{font-size:11px;color:var(--blue)}.profile i{width:29px;height:29px}.theme-toggle{min-width:72px}.content{max-width:none;padding:13px 14px 28px}.card{background:var(--card);border:1px solid var(--border);border-radius:8px;box-shadow:var(--shadow)}.card:hover{border-color:var(--border)}.card-head{margin-bottom:10px}.card-head h2{font-size:14px;margin:0}.card-head a{font-size:11px;color:var(--blue)}.btn{border-radius:6px;box-shadow:none}.btn:hover{box-shadow:0 0 0 1px var(--accent)}
.command-top{display:grid;grid-template-columns:44% minmax(0,1fr);gap:9px;margin-bottom:9px;height:235px}.network-panel{min-width:0;position:relative;overflow:hidden;border:1px solid #1461a3;border-radius:8px;padding:13px;background:radial-gradient(circle at 74% 28%,rgba(11,99,178,.3),transparent 32%),repeating-linear-gradient(0deg,transparent 0 37px,rgba(18,93,170,.08) 38px),linear-gradient(145deg,#071c40,#06172f);color:#e9f5ff}.network-head{position:relative;z-index:1;display:flex;align-items:center;gap:12px;flex-wrap:wrap}.network-head h2{font-size:13px;margin:0}.network-head small{margin-left:auto;font-size:10px;color:#5be5be}.live-state{font-size:10px;color:#6ee8ca}.network-path{position:absolute;left:9%;right:8%;top:79px;height:55px;border-bottom:2px solid rgba(41,162,255,.74);border-radius:43%;filter:drop-shadow(0 0 7px #009eff)}.network-path:before{content:"";position:absolute;left:15%;right:17%;top:15px;border-bottom:1px solid #50a9fb;transform:rotate(-3deg)}.network-depots{position:absolute;inset:auto 12px 13px;display:flex;justify-content:space-around;gap:8px;z-index:1}.network-depot{width:30%;min-width:0;color:#eaf6ff}.network-node{display:grid;place-items:center;width:31px;height:31px;margin-bottom:4px;border:2px solid #15cfea;border-radius:50%;background:#0d5487;box-shadow:0 0 17px #20c5ed;color:#9af7ee}.network-depot:nth-child(2) .network-node{border-color:#348eff;background:#1453ba}.network-depot strong,.network-depot small{display:block}.network-depot strong{font-size:12px}.network-depot small{font-size:10px;color:#96badc;margin-bottom:6px}.depot-metric{display:flex;justify-content:space-between;max-width:116px;font-size:10px;color:#a9c7e4}.depot-metric b{color:#e9f5ff;font-weight:500}
.command-kpis{min-width:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}.command-kpi{position:relative;overflow:hidden;padding:12px 10px;border:1px solid #1a497b;border-radius:8px;background:linear-gradient(155deg,#092246,#05152e);color:#edf6ff}.command-kpi-icon{font-size:23px;line-height:30px;display:block;color:#2e9fff}.command-kpi-label{display:block;min-height:30px;margin-top:6px;font-size:11px}.command-kpi strong{display:block;margin-top:5px;font-size:20px;white-space:nowrap;letter-spacing:-.03em}.command-kpi .kpi-signal{display:block;position:absolute;bottom:13px;left:9px;right:9px;height:27px;opacity:.75;background:linear-gradient(130deg,transparent 0 20%,currentColor 21% 23%,transparent 24% 43%,currentColor 44% 46%,transparent 47% 63%,currentColor 64% 67%,transparent 68%);clip-path:polygon(0 85%,18% 44%,30% 66%,44% 20%,58% 53%,73% 10%,100% 44%,100% 100%,0 100%)}.command-kpi.blue{color:#3997ff}.command-kpi.teal{color:#21d7c2}.command-kpi.amber{color:#f5bc48}.command-kpi.coral{color:#f66a7a}.command-kpi.violet{color:#a17bfa}.command-kpi .command-kpi-label,.command-kpi strong{color:#edf6ff}
.analytics-grid{display:grid;grid-template-columns:44% 27% minmax(0,1fr);gap:9px;margin-bottom:9px}.operations-grid{display:grid;grid-template-columns:30% 19% 30% minmax(0,1fr);gap:9px}.command-card{min-width:0;padding:12px;background:var(--card)}.command-card .card-head{min-height:21px}.heading-icon{color:#238fff;font-size:17px;vertical-align:-1px}.heading-icon.warning{color:#efb743}.heading-icon.danger,.negative-value{color:#f26474}.chart-legend{margin:4px 0 0;font-size:10px}.twelve-chart{height:185px;display:flex;gap:4px;padding:13px 3px 0;border-bottom:1px solid var(--border);background:repeating-linear-gradient(to top,transparent 0 38px,var(--line) 39px 40px)}.twelve-chart .trend-month{flex:1;min-width:0}.twelve-chart .trend-bars{gap:2px}.twelve-chart .trend-bars span{width:30%;max-width:19px}.twelve-chart .trend-month small{font-size:9px}.distribution-body{display:flex;gap:9px;align-items:center;justify-content:center;min-height:212px}.stock-ring{width:min(53%,160px);aspect-ratio:1;flex-shrink:0;border-radius:50%;background:var(--soft);padding:25px;display:grid;place-items:center}.stock-ring>div{width:100%;height:100%;border-radius:50%;background:var(--card);display:grid;place-content:center;text-align:center}.stock-ring strong{font-size:16px}.stock-ring small{font-size:10px;color:var(--muted)}.distribution-legend{flex:1;min-width:0}.distribution-legend>div{display:flex;align-items:center;gap:5px;margin:12px 0;font-size:11px}.distribution-legend i,.category-row i{width:9px;height:9px;flex-shrink:0;border-radius:50%}.distribution-legend strong{margin-left:auto;font-size:11px}.category-list{padding-top:4px}.category-row{display:grid;grid-template-columns:9px minmax(65px,1fr) 26px minmax(40px,1fr) 29px;align-items:center;gap:6px;margin:13px 0;font-size:10px}.category-row>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.category-row b{text-align:right;font-size:10px}.category-row small{text-align:right;color:var(--muted)}.category-track{height:8px;background:var(--soft);border-radius:10px;overflow:hidden}.category-track span{display:block;height:100%;border-radius:10px}
.operations-grid .command-card{min-height:255px}.operations-grid .table-wrap{border:0;border-radius:0}.operations-grid table{font-size:10px}.operations-grid td,.operations-grid th{padding:7px 5px}.operations-grid th{font-size:9px;letter-spacing:0}.operations-grid .badge{font-size:9px;padding:2px 5px}.operations-grid .empty{padding:40px 5px}.activity-list{border-left:1px solid var(--border);margin:14px 0 0 5px}.activity-entry{display:flex;gap:7px;position:relative;padding:0 0 16px 12px;font-size:10px}.activity-entry>i{position:absolute;left:-4px;top:4px;width:8px;height:8px;border-radius:50%;background:#16caca}.activity-entry:nth-child(2n)>i{background:#edb14d}.activity-entry>div{flex:1;min-width:0}.activity-entry strong{display:block;font-size:10px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.activity-entry small{display:block;color:var(--muted);font-size:9px}.activity-entry>span{text-align:right;color:var(--blue);white-space:nowrap}
html[data-theme=light] .network-panel,html[data-theme=light] .command-kpi{box-shadow:0 9px 24px rgba(8,44,87,.12)}html[data-theme=light] .sidebar{background:linear-gradient(180deg,#082344,#0a1e39)}
@media(max-width:1440px){.command-top{grid-template-columns:42% 1fr}.analytics-grid{grid-template-columns:42% 29% 1fr}.operations-grid{grid-template-columns:1fr 1fr}.command-kpi strong{font-size:18px}}
@media(max-width:1080px){.command-top{height:auto;grid-template-columns:1fr}.network-panel{height:220px}.command-kpis{min-height:135px}.analytics-grid{grid-template-columns:1fr 1fr}.analytics-grid>:first-child{grid-column:1/-1}.operations-grid{grid-template-columns:1fr 1fr}}
@media(max-width:850px){.sidebar{width:220px}.main{margin-left:0}.header-search-form{order:5;width:100%}.header-search-form .header-search{width:100%}}
@media(max-width:610px){.analytics-grid,.operations-grid{grid-template-columns:1fr}.analytics-grid>:first-child{grid-column:auto}.command-kpis{grid-template-columns:repeat(2,1fr)}.command-top{gap:8px}.network-panel{height:240px}.network-head small{display:none}.distribution-body{min-height:180px}.command-kpi{min-height:120px}.command-kpi:last-child{grid-column:1/-1}.operations-grid .command-card{min-height:0}}
@media print{.network-panel,.command-kpi{color:#111;background:#fff;border:1px solid #ccc}.command-kpi .command-kpi-label,.command-kpi strong{color:#111}.command-kpi .kpi-signal{display:none}}