:root{--purple:#330c89;--pink:#e72b77;--cyan:#98e5ff;--lav:#f3edff;--white:#fff;--ink:#20153a;--muted:#766d86;--line:#e8e1f2;--green:#159b72;--amber:#d99114;--red:#d94b63;--blue:#1878c9;--bg:#f8f6fc;--shadow:0 8px 24px #330c8914}*{box-sizing:border-box}html,body{background:var(--bg);height:100%;color:var(--ink);margin:0;font-family:Albert Sans,Arial,sans-serif;font-size:14px}#root{height:100%}.app{grid-template-columns:292px 1fr;height:100vh;display:grid}.sidebar{color:#fff;background:linear-gradient(#2b0877 0%,#330c89 55%,#240766 100%);flex-direction:column;padding:22px 14px 18px;display:flex;overflow:auto;box-shadow:10px 0 30px #330c8914}.brand{border-bottom:1px solid #ffffff1f;align-items:center;gap:12px;margin-bottom:12px;padding:2px 10px 18px;display:flex}.brandmark{background:linear-gradient(135deg,var(--cyan),var(--pink));width:38px;height:38px;color:var(--purple);border-radius:12px;place-items:center;font-weight:800;display:grid;box-shadow:0 8px 20px #e72b7747}.brand h1{margin:0;font-size:18px}.brand small{color:#d9cdf7;letter-spacing:.7px;margin-top:3px;font-size:9px;display:block}.nav-label{color:#b9a8df;text-transform:uppercase;letter-spacing:1.35px;padding:8px 12px;font-size:10px;font-weight:700}.menu{border-radius:12px;margin:3px 0;overflow:hidden}.menu-head{cursor:pointer;color:#ede7ff;border-radius:10px;align-items:center;gap:10px;padding:10px 12px;transition:all .18s;display:flex}.menu-head:hover{background:#ffffff14}.menu.active>.menu-head{box-shadow:inset 3px 0 0 var(--cyan);background:linear-gradient(90deg,#98e5ff33,#e72b7729)}.ico{stroke:currentColor;fill:none;stroke-width:1.8px;stroke-linecap:round;stroke-linejoin:round;flex:0 0 19px;width:19px;height:19px}.menu-title{flex:1;font-weight:600}.chev{opacity:.7;width:14px;height:14px;transition:all .2s}.menu.open .chev{transform:rotate(90deg)}.subs{padding:3px 8px 7px 40px;display:none}.menu.open .subs{display:block}.sub{color:#d5c9f2;cursor:pointer;text-align:left;background:0 0;border:none;border-radius:8px;width:100%;margin:1px 0;padding:7px 9px;font-family:inherit;font-size:12px;text-decoration:none;display:block}.sub:hover,.sub.active{color:#fff;background:#ffffff17}.sidebar-foot{border-top:1px solid #ffffff1f;margin-top:auto;padding:14px 10px 0}.user{align-items:center;gap:10px;display:flex}.avatar{background:var(--pink);border-radius:10px;place-items:center;width:34px;height:34px;font-weight:800;display:grid}.user b{font-size:12px}.user span{color:#c9bce9;margin-top:2px;font-size:10px;display:block}.workspace{flex-direction:column;min-width:0;min-height:0;display:flex}.topbar{border-bottom:1px solid var(--line);background:#fff;flex:0 0 74px;justify-content:space-between;align-items:center;gap:20px;height:74px;padding:0 26px;display:flex}.top-left{min-width:0}.crumb{color:var(--muted);white-space:nowrap;text-overflow:ellipsis;font-size:12px;overflow:hidden}.crumb strong{color:var(--purple)}.top-right{align-items:center;gap:8px;display:flex}.control{border:1px solid var(--line);color:var(--ink);background:#fff;border-radius:10px;outline:none;padding:9px 11px;font-family:inherit;font-size:12px}.icon-btn{border:1px solid var(--line);width:38px;height:38px;color:var(--purple);cursor:pointer;background:#fff;border-radius:10px;place-items:center;display:grid;position:relative}.dot{background:var(--pink);border:2px solid #fff;border-radius:50%;width:7px;height:7px;position:absolute;top:7px;right:8px}.main{min-height:0;padding:24px 26px 36px;overflow:auto}.demo-banner{color:var(--purple);background:linear-gradient(90deg,#f3edff,#f2fbff);border:1px solid #e3d8f8;border-radius:12px;justify-content:space-between;align-items:center;gap:16px;margin-bottom:16px;padding:10px 13px;font-size:11px;display:flex}.demo-banner b{font-weight:800}.page-head{justify-content:space-between;align-items:flex-start;gap:18px;margin-bottom:18px;display:flex}.eyebrow{color:var(--pink);text-transform:uppercase;letter-spacing:1.1px;margin-bottom:4px;font-size:11px;font-weight:800}.page-head h2{color:var(--purple);letter-spacing:-.4px;margin:0;font-size:25px}.page-head p{color:var(--muted);max-width:780px;margin:6px 0 0;line-height:1.5}.actions{flex-wrap:wrap;gap:8px;display:flex}.btn{border:1px solid var(--line);cursor:pointer;color:var(--purple);background:#fff;border-radius:10px;padding:10px 14px;font-family:inherit;font-size:12px;font-weight:700}.btn.primary{background:var(--purple);color:#fff;border-color:var(--purple)}.btn.pink{background:var(--pink);color:#fff;border-color:var(--pink)}.filters{flex-wrap:wrap;gap:8px;margin-bottom:14px;display:flex}.filter-chip{border:1px solid var(--line);color:var(--muted);background:#fff;border-radius:9px;padding:7px 10px;font-size:10px}.filter-chip strong{color:var(--purple)}.kpis{grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-bottom:16px;display:grid}.card{box-shadow:var(--shadow);background:#fff;border:1px solid #eee8f6;border-radius:16px}.kpi{padding:17px}.kpi-top{justify-content:space-between;align-items:center;display:flex}.kpi-icon{background:var(--lav);width:34px;height:34px;color:var(--purple);border-radius:10px;place-items:center;display:grid}.kpi:nth-child(2) .kpi-icon{color:var(--blue);background:#e7faff}.kpi:nth-child(3) .kpi-icon{color:var(--pink);background:#fff0f6}.kpi:nth-child(4) .kpi-icon{color:var(--green);background:#eefaf5}.kpi .value{margin-top:11px;font-size:25px;font-weight:800}.kpi .label{color:var(--muted);margin-top:2px;font-size:11px;font-weight:600}.trend{color:var(--green);font-size:10px;font-weight:700}.layout{grid-template-columns:minmax(0,1.45fr) minmax(320px,.8fr);gap:16px;margin-bottom:16px;display:grid}.panel{min-width:0;padding:18px}.panel-head{justify-content:space-between;align-items:center;gap:10px;margin-bottom:14px;display:flex}.panel-head h3{color:var(--purple);margin:0;font-size:14px}.panel-head a{color:var(--pink);cursor:pointer;font-size:10px;font-weight:700}.table-wrap{overflow:auto}.table{border-collapse:collapse;width:100%;min-width:650px;font-size:10.5px}.table th{text-align:left;color:var(--muted);border-bottom:1px solid var(--line);white-space:nowrap;background:#fbfaff;padding:8px 7px;font-weight:700}.table td{vertical-align:middle;border-bottom:1px solid #f0ecf5;padding:9px 7px}.table tr:hover td{background:#fcfbfe}.tag{background:var(--lav);color:var(--purple);white-space:nowrap;border-radius:20px;padding:4px 7px;font-size:9px;font-weight:800;display:inline-block}.tag.green{color:var(--green);background:#e8f8f2}.tag.red{color:var(--red);background:#ffe9ee}.tag.amber{color:#a66b00;background:#fff3d9}.tag.blue{color:#1878c9;background:#e8f5ff}.mini-chart{border-bottom:1px solid var(--line);align-items:flex-end;gap:10px;height:182px;padding:14px 8px 24px;display:flex;position:relative}.bar{background:linear-gradient(180deg,var(--pink),var(--purple));border-radius:7px 7px 2px 2px;flex:1;min-width:18px;position:relative}.bar span{color:var(--muted);white-space:nowrap;font-size:9px;position:absolute;bottom:-20px;left:50%;transform:translate(-50%)}.bar em{color:var(--purple);font-size:9px;font-style:normal;font-weight:700;position:absolute;top:-17px;left:50%;transform:translate(-50%)}.status-list{flex-direction:column;gap:9px;display:flex}.status{background:#faf8fd;border-radius:10px;align-items:center;gap:10px;padding:10px;display:flex}.status .sev{border-radius:50%;width:9px;height:9px}.status .txt{flex:1}.status b{font-size:11px;display:block}.status small{color:var(--muted);font-size:9px}.status .pill{border-radius:20px;padding:4px 7px;font-size:9px;font-weight:800}.map-card{padding:0;overflow:hidden}.map-head{justify-content:space-between;align-items:center;padding:16px 18px 0;display:flex}.map{background:linear-gradient(135deg,#edf9fd,#f7f2ff);border-radius:0 0 16px 16px;height:255px;margin-top:10px;position:relative;overflow:hidden}.river{opacity:.75;background:#98e5ff;border-radius:50%;width:115%;height:32px;position:absolute;top:40%;left:-5%;transform:rotate(-8deg)}.road{background:#fff;position:absolute;box-shadow:0 0 0 1px #e2dcf0}.road.r1{width:110%;height:7px;top:56%;left:-5%;transform:rotate(8deg)}.road.r2{width:7px;height:120%;top:-10%;left:66%;transform:rotate(2deg)}.road.r3{width:100%;height:5px;top:27%;left:4%;transform:rotate(-3deg)}.zone{background:#f3edff85;border:2px solid #330c8940;border-radius:16px;position:absolute}.zone.z1{width:24%;height:33%;top:42%;left:32%}.zone.z2{width:24%;height:25%;top:11%;left:66%}.zone.z3{width:18%;height:26%;top:16%;left:13%}.pin{background:var(--pink);border-radius:50%;width:11px;height:11px;position:absolute;box-shadow:0 0 0 5px #e72b7724}.pin:after{content:attr(data-label);color:var(--purple);white-space:nowrap;background:#ffffffd1;border-radius:4px;padding:2px 4px;font-size:9px;font-weight:700;position:absolute;top:-5px;left:13px}.callout{background:var(--lav);color:var(--purple);border-radius:12px;margin-top:12px;padding:12px 13px;font-size:10.5px;line-height:1.45}.split3{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;display:grid}.metric-list{grid-template-columns:1fr 1fr;gap:10px;display:grid}.metric{border:1px solid var(--line);background:#fcfbfe;border-radius:12px;padding:12px}.metric b{color:var(--purple);font-size:16px;display:block}.metric span{color:var(--muted);font-size:9px}.form-grid{grid-template-columns:1fr 1fr;gap:12px;display:grid}.field{flex-direction:column;gap:5px;display:flex}.field label{color:var(--muted);text-transform:uppercase;letter-spacing:.6px;font-size:9px;font-weight:800}.field input,.field select,.field textarea{border:1px solid var(--line);color:var(--ink);background:#fff;border-radius:9px;padding:9px 10px;font-family:inherit;font-size:11px}.field textarea{resize:vertical;min-height:70px}.timeline{flex-direction:column;display:flex}.event{grid-template-columns:70px 12px 1fr;align-items:start;gap:8px;display:grid}.event .time{color:var(--muted);text-align:right;padding-top:4px;font-size:9px}.event .node{background:var(--pink);border-radius:50%;width:9px;height:9px;margin-top:4px;position:relative}.event:not(:last-child) .node:after{content:"";background:#e2d9f3;width:1px;height:42px;position:absolute;top:10px;left:4px}.event .desc{padding-bottom:18px;font-size:10.5px}.event .desc b{color:var(--purple);margin-bottom:2px;display:block}.empty{text-align:center;color:var(--muted);padding:28px}.toast{color:#fff;opacity:0;pointer-events:none;z-index:30;background:#20153a;border-radius:12px;padding:12px 16px;font-size:12px;transition:all .2s;position:fixed;bottom:24px;right:24px;transform:translateY(10px);box-shadow:0 10px 28px #0000002e}.toast.show{opacity:1;transform:translateY(0)}@media (width<=1250px){.app{grid-template-columns:255px 1fr}.kpis{grid-template-columns:repeat(2,1fr)}.split3,.layout{grid-template-columns:1fr}.top-right .control:first-child{display:none}}@media (width<=850px){body{overflow:auto}.app{height:auto;display:block}.sidebar{height:auto;max-height:48vh}.workspace{min-height:100vh}.topbar{z-index:5;position:sticky;top:0}.kpis,.form-grid{grid-template-columns:1fr}.page-head{flex-direction:column}.top-right .control:nth-child(-n+2){display:none}.main{padding:18px}.table{min-width:620px}}