:root{--bg:#061a2c;--bg2:#08233b;--card:#0b2540cc;--line:#1d4d74;--text:#f5f8ff;--muted:#8fb0c9;--blue:#1677ff;--green:#23d160;--orange:#f59e0b;--red:#ef4444;--violet:#6366f1}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Inter,Segoe UI,Arial,sans-serif;background:#061a2c;color:var(--text);min-height:100vh;overflow-x:hidden}.bg{position:fixed;inset:0;z-index:-1;background:radial-gradient(circle at 20% 10%,#123e66 0,#061a2c 35%,#020b13 100%)}.bg:before{content:"";position:absolute;inset:0;background-image:linear-gradient(#ffffff08 1px,transparent 1px),linear-gradient(90deg,#ffffff08 1px,transparent 1px);background-size:64px 64px;animation:grid 18s linear infinite}.bg:after{content:"";position:absolute;width:480px;height:480px;border-radius:50%;right:10%;top:12%;background:#1677ff25;filter:blur(80px);animation:float 8s ease-in-out infinite}@keyframes grid{to{background-position:64px 64px}}@keyframes float{50%{transform:translateY(25px)}}a{color:inherit;text-decoration:none}.app{display:flex;min-height:100vh}.side{width:270px;background:#061827e8;border-right:1px solid #1d4d74;position:fixed;inset:0 auto 0 0;padding:18px 14px;overflow:auto;backdrop-filter:blur(12px);transition:.25s}.brand{display:flex;gap:12px;align-items:center;padding:8px 8px 22px}.logo{width:42px;height:42px;border-radius:12px;background:linear-gradient(135deg,var(--blue),#79b7ff);display:grid;place-items:center;font-weight:900}.brand h2{font-size:20px;line-height:1;margin:0}.brand span{font-size:11px;letter-spacing:5px;color:#c8e4ff}.nav a{display:flex;align-items:center;gap:12px;padding:13px 14px;border-radius:12px;color:#cbd9e7;margin:5px 0;font-size:15px}.nav a:hover,.nav a.active{background:linear-gradient(90deg,#0866e9,#0a57c6);color:white;box-shadow:0 10px 25px #006aff35}.status{margin-top:40px;border:1px solid var(--line);border-radius:16px;padding:15px;background:#08233b}.pulse{width:10px;height:10px;border-radius:50%;display:inline-block;background:var(--green);box-shadow:0 0 0 8px #23d16022}.main{margin-left:270px;width:calc(100% - 270px)}.top{height:74px;display:flex;align-items:center;gap:16px;padding:0 24px;border-bottom:1px solid #1d4d74;background:#071e33c8;backdrop-filter:blur(10px);position:sticky;top:0;z-index:5}.hamb{border:0;background:#0d2d4a;color:white;border-radius:10px;padding:10px 13px;font-size:22px}.search{max-width:520px;flex:1;background:#061a2c;border:1px solid #24547a;border-radius:14px;padding:13px 16px;color:white}.top-actions{margin-left:auto;display:flex;gap:12px;align-items:center}.btn{border:1px solid #2a5578;background:#0b2944;color:white;border-radius:12px;padding:11px 15px;font-weight:700;cursor:pointer}.btn.primary{background:linear-gradient(135deg,#0d6efd,#075ad0);border:0}.btn.green{background:linear-gradient(135deg,#16a34a,#15803d);border:0}.btn.danger{background:linear-gradient(135deg,#ef4444,#b91c1c);border:0}.content{padding:28px}.title{display:flex;justify-content:space-between;gap:15px;align-items:center;margin-bottom:22px}.title h1{font-size:34px;margin:0}.crumb{color:var(--muted);margin-top:7px}.grid{display:grid;gap:18px}.kpis{grid-template-columns:repeat(5,minmax(160px,1fr))}.card{background:linear-gradient(180deg,#0d2a46cc,#071e33d9);border:1px solid var(--line);border-radius:18px;padding:18px;box-shadow:0 16px 50px #0004;position:relative;overflow:hidden}.card:before{content:"";position:absolute;inset:-1px;background:linear-gradient(110deg,transparent 15%,#ffffff12 35%,transparent 55%);transform:translateX(-100%);transition:.8s}.card:hover:before{transform:translateX(100%)}.kpi b{display:block;font-size:14px}.kpi strong{font-size:34px;margin:14px 0 8px;display:block}.up{color:#27e36c}.warn{color:#ffbd2e}.bad{color:#ff5b5b}.cols-3{grid-template-columns:1fr 1.2fr 1fr}.cols-2{grid-template-columns:1fr 1fr}.cols-4{grid-template-columns:repeat(4,1fr)}h3{margin:0 0 18px}.donut{width:210px;height:210px;margin:auto;border-radius:50%;background:conic-gradient(var(--green) 0 84%,var(--red) 84% 100%);display:grid;place-items:center}.donut div{width:118px;height:118px;border-radius:50%;background:#092137;display:grid;place-items:center;text-align:center;font-weight:800;font-size:30px}.bars{height:240px;display:flex;gap:42px;align-items:end;justify-content:center;border-left:1px solid #315878;border-bottom:1px solid #315878;padding-top:20px}.bar{width:80px;background:linear-gradient(#2b8cff,#0866e9);border-radius:8px 8px 0 0;position:relative;animation:rise .8s ease}.bar:after{content:attr(data-v);position:absolute;top:-28px;left:0;right:0;text-align:center}@keyframes rise{from{height:0}}.gauge{width:260px;height:150px;margin:20px auto 0;position:relative;overflow:hidden}.gauge .arc{width:260px;height:260px;border-radius:50%;background:conic-gradient(from 270deg,var(--green) 0 40%,var(--orange) 40% 72%,var(--red) 72% 100%);position:absolute;top:0}.gauge .mask{position:absolute;left:28px;top:28px;width:204px;height:204px;border-radius:50%;background:#092137}.gauge .needle{position:absolute;width:4px;height:100px;background:white;left:128px;top:28px;transform-origin:bottom;transform:rotate(38deg);border-radius:4px}.gauge .num{position:absolute;left:0;right:0;text-align:center;top:88px;font-size:34px;font-weight:900}.map{height:260px;border-radius:14px;background:radial-gradient(circle at 50% 55%,#1d75a550,#0c263e 45%,#061827);position:relative;overflow:hidden}.pin{position:absolute;width:18px;height:18px;background:var(--green);border-radius:50% 50% 50% 0;transform:rotate(-45deg);box-shadow:0 0 25px currentColor}.pin.red{background:var(--red)}.pin.orange{background:var(--orange)}.alert-row,.tree-row{display:flex;gap:12px;align-items:center;padding:11px 0;border-bottom:1px solid #ffffff12}.ico{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;background:#123b61}.table{width:100%;border-collapse:collapse;overflow:hidden}.table th,.table td{padding:13px;border-bottom:1px solid #ffffff12;text-align:left}.table th{color:#b8cbe0;background:#0b2944}.badge{padding:6px 10px;border-radius:999px;background:#123b61;font-size:12px}.badge.green{background:#0d5d35;color:#6aff9e}.badge.red{background:#642028;color:#ff918f}.badge.orange{background:#5d410d;color:#ffd166}.form{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}.field label{font-size:13px;color:#b7cee6;display:block;margin-bottom:8px}.field input,.field select,.field textarea{width:100%;padding:13px 14px;border:1px solid #28597e;background:#061a2c;color:white;border-radius:12px}.full{grid-column:1/-1}.login-wrap{min-height:100vh;display:grid;place-items:center;padding:20px}.login{width:min(1050px,100%);display:grid;grid-template-columns:1.1fr .9fr;gap:24px;align-items:center}.hero h1{font-size:54px;margin:0 0 12px}.hero p{color:#bfd6ee;font-size:18px}.motion-grid{grid-template-columns:repeat(6,1fr)}.leds{display:grid;grid-template-columns:repeat(8,1fr);gap:10px}.led{padding:10px;text-align:center;border-radius:10px;background:#092137;border:1px solid #244b6b}.led.on{box-shadow:0 0 18px #23d16066;border-color:#23d160;color:#23d160}.toast{position:fixed;right:24px;bottom:24px;background:#0d2d4a;border:1px solid #2a5578;padding:14px 18px;border-radius:12px;display:none;z-index:20}.toast.show{display:block;animation:pop .3s ease}@keyframes pop{from{transform:translateY(20px);opacity:0}}@media(max-width:1200px){.kpis{grid-template-columns:repeat(2,1fr)}.cols-3,.cols-4{grid-template-columns:1fr 1fr}.motion-grid{grid-template-columns:repeat(3,1fr)}}@media(max-width:850px){.side{transform:translateX(-100%);z-index:10}.side.open{transform:translateX(0)}.main{margin-left:0;width:100%}.content{padding:18px}.top{padding:0 12px}.top-actions .btn:not(.primary){display:none}.kpis,.cols-2,.cols-3,.cols-4,.login,.form,.motion-grid{grid-template-columns:1fr}.hero h1{font-size:38px}.title{display:block}.bars{gap:18px}.bar{width:55px}}
/* Professional v2 additions */
.glass{background:linear-gradient(160deg,#0e3154dd,#061a2cef);border-color:#3a7bb0}.role-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:24px}.role-card{display:block;padding:18px;border:1px solid #2f6389;border-radius:18px;background:linear-gradient(135deg,#0d2a46,#0a2037);box-shadow:0 12px 35px #0003}.role-card b{display:block;font-size:20px;margin-bottom:8px}.role-card span,.mail-preview small{display:block;color:#bad0e7;line-height:1.45}.mail-preview{margin-top:18px;padding:16px;border:1px dashed #3a7bb0;border-radius:16px;background:#08233b}.wide-card{grid-column:span 1}.hour-chart{height:240px;display:flex;align-items:end;gap:10px;padding:18px 10px 34px;border-left:1px solid #335e80;border-bottom:1px solid #335e80;overflow-x:auto}.mini-bar{min-width:42px;background:linear-gradient(180deg,#69b7ff,#0d6efd 70%,#064aa8);border-radius:12px 12px 0 0;position:relative;box-shadow:0 -12px 35px #1677ff33;animation:rise .8s ease}.mini-bar span{position:absolute;bottom:-26px;left:0;right:0;text-align:center;color:#b8cbe0;font-size:12px}.mini-bar b{position:absolute;top:-26px;left:0;right:0;text-align:center;font-size:12px}.chips{display:flex;flex-wrap:wrap;gap:10px}.chips span{padding:9px 12px;border:1px solid #2f6389;border-radius:999px;background:#0a2a47;color:#d9edff}.nav a.active{background:linear-gradient(90deg,#00a2ff,#0a57c6);color:white}.table{display:table}.content .card{backdrop-filter:blur(10px)}@media(max-width:850px){.role-cards{grid-template-columns:1fr}.hour-chart{gap:8px}.mini-bar{min-width:38px}.table{display:block;overflow-x:auto}}

/* Full separate panels v3 */
.panel-switch{display:flex;gap:10px;flex-wrap:wrap}.panel-switch a{padding:10px 14px;border:1px solid #315878;border-radius:999px;background:#08233b;color:#d9edff}.split{display:grid;grid-template-columns:1.2fr .8fr;gap:18px}.stat-line{display:grid;grid-template-columns:140px 1fr 60px;gap:12px;align-items:center;margin:12px 0}.track{height:10px;border-radius:999px;background:#092137;overflow:hidden;border:1px solid #224b6a}.fill{height:100%;border-radius:999px;background:linear-gradient(90deg,#0d6efd,#23d160)}.crane-card{display:grid;grid-template-columns:54px 1fr auto;gap:14px;align-items:center;padding:14px;border:1px solid #254f72;border-radius:16px;background:#08233b;margin:10px 0}.crane-icon{width:54px;height:54px;border-radius:16px;display:grid;place-items:center;background:linear-gradient(135deg,#0d6efd,#123b61);font-size:24px}.quick{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.module-card{display:block;padding:18px;border:1px solid #315878;border-radius:18px;background:linear-gradient(145deg,#0b2944,#071e33);min-height:138px}.module-card strong{font-size:20px;display:block;margin-bottom:8px}.module-card small{color:#b8cbe0;line-height:1.5}.mini-chart{height:180px;display:flex;align-items:end;gap:8px;border-left:1px solid #335e80;border-bottom:1px solid #335e80;padding:12px 8px 28px;overflow:auto}.mini-chart i{display:block;min-width:28px;border-radius:10px 10px 0 0;background:linear-gradient(180deg,#6ec6ff,#0d6efd);position:relative}.mini-chart i:after{content:attr(data-x);position:absolute;bottom:-22px;left:0;right:0;text-align:center;font-style:normal;color:#a9c2dc;font-size:11px}.ring-row{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.ring{border:1px solid #315878;border-radius:18px;padding:16px;text-align:center;background:#08233b}.ring .circle{width:110px;height:110px;border-radius:50%;margin:0 auto 12px;display:grid;place-items:center;background:conic-gradient(#23d160 var(--p),#173a56 0)}.ring .circle b{width:72px;height:72px;border-radius:50%;background:#071e33;display:grid;place-items:center}.timeline{border-left:2px solid #315878;margin-left:12px;padding-left:18px}.timeline div{position:relative;margin:0 0 18px}.timeline div:before{content:"";position:absolute;left:-26px;top:3px;width:12px;height:12px;border-radius:50%;background:#23d160;box-shadow:0 0 0 6px #23d16022}.profile-card{display:flex;align-items:center;gap:16px}.avatar{width:58px;height:58px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,#1677ff,#23d160);font-size:24px;font-weight:900}.login-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:25px}.login-card{padding:22px;border:1px solid #315878;border-radius:20px;background:#08233bd9;box-shadow:0 18px 50px #0004}.login-card h2{margin:8px 0}.login-card p{color:#b8cbe0;min-height:44px}.login-card .btn{display:inline-block}.notice{padding:12px 14px;border-radius:14px;background:#0f3b60;border:1px solid #3a7bb0;color:#d9edff}.layout-preview{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.layout-preview div{padding:12px;border-radius:14px;background:#092137;border:1px dashed #315878}.customer-theme .logo{background:linear-gradient(135deg,#23d160,#0d6efd)}.user-theme .logo{background:linear-gradient(135deg,#f59e0b,#0d6efd)}@media(max-width:1100px){.quick,.ring-row,.login-grid,.layout-preview{grid-template-columns:1fr 1fr}.split{grid-template-columns:1fr}}@media(max-width:700px){.quick,.ring-row,.login-grid,.layout-preview{grid-template-columns:1fr}.stat-line{grid-template-columns:90px 1fr 45px}}


/* Responsive + link fix patch v4 */
img,svg,canvas{max-width:100%;height:auto}.top{min-width:0}.search{min-width:0}.top-actions{flex-wrap:wrap}.card,.module-card,.login-card{min-width:0}.table-wrap{width:100%;overflow-x:auto;border-radius:14px}.table{min-width:720px}.content{max-width:1600px;margin:0 auto}.side .nav a{white-space:nowrap}.mobile-overlay{display:none}.chart-scroll,.hour-chart,.mini-chart{scrollbar-width:thin}.btn{white-space:nowrap}.title .btn{margin-top:8px}
@media(max-width:1100px){.top{height:auto;min-height:74px;padding:12px;flex-wrap:wrap}.search{order:3;flex-basis:100%;max-width:none}.top-actions{margin-left:0}.content{padding:20px}.title h1{font-size:30px}.bars{overflow-x:auto;justify-content:flex-start;padding-left:15px}.bar{min-width:58px}.gauge{transform:scale(.9);transform-origin:top center;margin-bottom:-12px}}
@media(max-width:850px){body.nav-open{overflow:hidden}.side{width:min(86vw,310px);box-shadow:30px 0 80px #0008}.side.open + .mobile-overlay,.mobile-overlay.show{display:block;position:fixed;inset:0;background:#0008;z-index:9}.main{min-width:0}.content{padding:16px}.card{padding:15px;border-radius:16px}.top-actions{width:100%;display:grid;grid-template-columns:1fr 1fr;gap:8px}.top-actions .btn{display:inline-flex!important;align-items:center;justify-content:center;padding:10px 12px}.top-actions .btn:not(.primary){display:inline-flex!important}.kpi strong{font-size:28px}.cols-3,.cols-2,.cols-4,.kpis{gap:14px}.donut{width:180px;height:180px}.donut div{width:102px;height:102px;font-size:24px}.hour-chart{height:210px}.mini-bar{min-width:36px}.crane-card{grid-template-columns:48px 1fr}.crane-card .badge{grid-column:2}.profile-card{align-items:flex-start}.login-wrap{align-items:start}.hero h1{font-size:34px}.hero p{font-size:16px}.stat-line{grid-template-columns:90px 1fr 45px}.table{min-width:680px}}
@media(max-width:520px){.brand h2{font-size:18px}.brand span{letter-spacing:3px}.title h1{font-size:26px}.content{padding:12px}.top-actions{grid-template-columns:1fr}.btn{width:100%;text-align:center}.form{gap:12px}.card{padding:13px}.login{display:block}.role-cards,.quick,.ring-row,.login-grid,.layout-preview{grid-template-columns:1fr!important}.module-card{min-height:auto}.crane-card{grid-template-columns:44px 1fr;gap:10px}.crane-icon{width:44px;height:44px}.hour-chart,.mini-chart{padding-left:8px}.table{font-size:13px;min-width:620px}.table th,.table td{padding:10px}.search{padding:11px 13px}.hamb{padding:8px 11px}.side{padding:14px 10px}.nav a{padding:11px 12px;font-size:14px}.status{margin-top:18px}.gauge{transform:scale(.78);margin-left:auto;margin-right:auto;margin-bottom:-30px}}