.shell { display: block; }
.side { display: none; }
.work { width: 100%; }

.work > header {
  height: 72px;
  display: grid;
  grid-template-columns: 168px minmax(0,1fr) auto;
  grid-template-rows: 72px;
  column-gap: 14px;
  padding: 0 22px;
  background: linear-gradient(135deg, #071f30 0%, #0d3449 58%, #13485c 100%);
  border-bottom: 0;
  box-shadow: 0 8px 28px rgba(3, 25, 39, .2);
}

.data-kpis article{border:0;box-shadow:0 10px 26px rgba(15,42,57,.13),inset 0 1px rgba(255,255,255,.65)}.data-kpis article:before{content:"";position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,255,255,.9),rgba(255,255,255,.55));z-index:0}.data-kpis article>*{position:relative;z-index:1}.data-kpis .metric-0{background:#dceee8}.data-kpis .metric-1{background:#fff0cf}.data-kpis .metric-2{background:#dcebf2}.data-kpis .metric-3{background:#f3dedb}.data-kpis article strong{color:#12384d;text-shadow:0 1px #fff}.visual-grid{display:grid;grid-template-columns:1.2fr .8fr 1fr;gap:15px;margin:0 0 15px}.visual-card{padding:16px;min-height:190px}.trend-chart{height:126px}.trend-chart svg{display:block;width:100%;height:98px;overflow:visible}.trend-chart>div{display:flex;justify-content:space-between;color:#7b8d95;font-size:9px}.donut-row{display:flex;align-items:center;gap:20px;height:125px}.donut{--score:80;--accent:#2e7d61;position:relative;width:112px;height:112px;flex:0 0 auto;border-radius:50%;background:conic-gradient(var(--accent) calc(var(--score)*1%),#e8eef0 0);display:grid;place-content:center;text-align:center}.donut:before{content:"";position:absolute;inset:13px;border-radius:50%;background:#fff;box-shadow:inset 0 0 0 1px #e2e9eb}.donut strong,.donut small{position:relative;z-index:1}.donut strong{font-size:23px;color:#15394b}.donut small{font-size:9px;color:#71848d}.legend{display:grid;gap:10px;min-width:0}.legend span{display:grid;grid-template-columns:8px 1fr auto;gap:7px;align-items:center;font-size:10px;color:#667b84}.legend i{width:8px;height:8px;border-radius:50%}.legend .amber-dot{background:#d39a2f}.legend .red-dot{background:#bd4a42}.legend b{color:#173548}.mini-bars{display:grid;gap:9px}.mini-bars>div{display:grid;grid-template-columns:68px 1fr 32px;gap:8px;align-items:center}.mini-bars span,.mini-bars strong{font-size:9px;color:#687d86}.mini-bars strong{text-align:right;color:#173548}.mini-bars i{height:8px;border-radius:999px;background:#edf1f2;overflow:hidden}.mini-bars i b{display:block;height:100%;border-radius:inherit}.gis-live-panel{padding:16px;margin-bottom:15px}.gis-live-panel .panel-title>div{display:grid;gap:4px}.gis-live-panel .panel-title small{font-size:10px;color:#758992}.map-layout{display:grid;grid-template-columns:minmax(0,1fr) 250px;gap:15px}.map-layout #vsipMap{height:520px;border-radius:9px;border:1px solid #d7e1e4;background:#e6eeea;z-index:1}.asset-layers{border:1px solid #e0e7e9;border-radius:9px;padding:13px;background:#f8faf9;display:flex;flex-direction:column}.asset-layers>b{font-size:12px;margin-bottom:9px}.asset-layers label{display:grid;grid-template-columns:16px 10px 1fr auto;gap:7px;align-items:center;padding:9px 0;border-bottom:1px solid #e7ecee;cursor:pointer}.asset-layers input{margin:0}.asset-layers span,.asset-layers strong{font-size:10px}.asset-layers strong{color:#1f5267}.asset-dot{width:9px;height:9px;border-radius:50%;background:#34495e}.asset-dot.power{background:#df8b1f}.asset-dot.light{background:#f3c64f}.asset-dot.camera{background:#7857a8}.asset-dot.traffic{background:#d84b43}.asset-dot.tree{background:#3d9566}.asset-dot.water{background:#2e87ad}.asset-dot.fire{background:#c43d36}.asset-dot.telecom{background:#527a99}.asset-layers footer{margin-top:auto;padding:13px;border-radius:8px;background:#0b2537;color:#fff;display:grid}.asset-layers footer b{font-size:21px;color:#f0bd4f}.asset-layers footer span{font-size:9px;color:#b7cbd3}.asset-marker{background:transparent;border:0}.asset-marker span{display:block;width:17px;height:17px;border:3px solid #fff;border-radius:50%;box-shadow:0 2px 8px rgba(0,0,0,.45)}
@media(max-width:1100px){.visual-grid{grid-template-columns:1fr 1fr}.visual-grid .visual-card:first-child{grid-column:1/-1}.map-layout{grid-template-columns:1fr}.asset-layers{display:grid;grid-template-columns:repeat(3,1fr);gap:0 12px}.asset-layers>b,.asset-layers footer{grid-column:1/-1}.asset-layers footer{margin-top:10px}.map-layout #vsipMap{height:430px}}
@media(max-width:650px){.visual-grid{grid-template-columns:1fr}.visual-grid .visual-card:first-child{grid-column:auto}.asset-layers{grid-template-columns:1fr 1fr}.map-layout #vsipMap{height:360px}}

.menu { display: none !important; }
.top-brand { display: flex !important; align-items: center; gap: 10px; }
.top-brand > i {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border: 2px solid var(--gold);
  color: var(--gold);
  font-style: normal;
  font-size: 20px;
  font-weight: 900;
}
.top-brand > span { display: grid; gap: 1px; }
.top-brand b { color: #fff; font-size: 15px !important; letter-spacing: .03em !important; }
.top-brand small { color: #9fbdc9; font-size: 10px; }

.module-switcher {
  grid-column: 2;
  grid-row: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: 0;
  overflow: visible;
  padding: 6px;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 11px;
  background: rgba(255,255,255,.08);
  box-shadow: inset 0 1px rgba(255,255,255,.08), 0 -4px 18px rgba(0,0,0,.08);
  scrollbar-width: none;
}
.module-switcher::-webkit-scrollbar { display: none; }
.module-switcher button {
  position: relative;
  flex: 0 0 auto;
  min-width: max-content;
  height: 40px;
  padding: 0 14px;
  border: 0;
  border-radius: 7px;
  border: 1px solid rgba(255,255,255,.12) !important;
  background: rgba(255,255,255,.075) !important;
  color: #d5e3e8 !important;
  cursor: pointer;
  font: inherit;
}
.module-switcher button i {
  display: block;
  width: auto !important;
  height: auto !important;
  border-radius: 0 !important;
  font-style: normal;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0;
  white-space: nowrap;
  overflow: visible;
  text-overflow: clip;
  color: inherit !important;
  background: transparent !important;
}
.module-switcher button.active { color: #102c3d !important; background: linear-gradient(180deg,#f4c765,#d9a333) !important; border-color:#f3cd77 !important; box-shadow:0 6px 15px rgba(0,0,0,.25),inset 0 1px rgba(255,255,255,.65); }
.module-switcher button:hover:not(.active) { color: #fff !important; background: rgba(255,255,255,.15) !important; border-color:rgba(255,255,255,.2) !important; box-shadow:0 5px 13px rgba(0,0,0,.15); transform:translateY(-1px) }
.module-switcher button span {
  position: fixed;
  top: 62px;
  transform: translateX(-50%) translateY(-4px);
  width: max-content;
  max-width: 230px;
  padding: 8px 10px;
  border-radius: 6px;
  background: #071a27;
  color: #fff;
  box-shadow: 0 10px 25px rgba(0, 0, 0, .22);
  font-size: 12px;
  font-weight: 650;
  line-height: 1.25;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: .15s;
  z-index: 100;
}
.module-switcher button:hover span,
.module-switcher button:focus-visible span {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

.top-actions { display: flex !important; align-items: center; gap: 7px !important; }
.top-actions button { width: 34px; height: 34px; padding: 0 !important; color:#fff!important; border-color:rgba(255,255,255,.22)!important; background:rgba(255,255,255,.08)!important; }
.top-actions > i { width: 34px !important; height: 34px !important; background:#d7a434!important;color:#102c3d!important;box-shadow:0 4px 12px rgba(0,0,0,.2) }

.native-app { display:grid; grid-template-columns:250px minmax(0,1fr); min-height:calc(100vh - 72px); }
.module-sidebar { position:sticky; top:72px; align-self:start; height:calc(100vh - 72px); display:flex; flex-direction:column; background:#0b2537; color:#fff; box-shadow:8px 0 24px rgba(10,37,55,.1); z-index:5; }
.module-sidebar header { display:flex;align-items:center;gap:11px;padding:19px 17px;border-bottom:1px solid rgba(255,255,255,.1);background:linear-gradient(135deg,rgba(255,255,255,.07),transparent) }
.module-sidebar header>i{width:42px;height:42px;border-radius:9px;display:grid;place-items:center;background:var(--module-color);font-style:normal;font-size:11px;font-weight:850;box-shadow:0 6px 14px rgba(0,0,0,.2)}
.module-sidebar header span{display:grid;gap:3px;min-width:0}.module-sidebar header small{font-size:9px;letter-spacing:.14em;color:#8faab6}.module-sidebar header b{font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.module-sidebar nav{padding:10px 8px;display:grid;gap:3px;overflow:auto}.module-sidebar nav button{display:grid;grid-template-columns:34px 1fr 12px;align-items:center;gap:9px;width:100%;min-height:43px;padding:6px 8px;border:0;border-radius:7px;background:transparent;color:#b9ccd4;text-align:left;cursor:pointer;font:inherit}.module-sidebar nav button>i{width:31px;height:27px;display:grid;place-items:center;border-radius:6px;background:rgba(255,255,255,.07);font-style:normal;font-size:9px;font-weight:800;color:#86a6b4}.module-sidebar nav button span{font-size:12px;font-weight:600}.module-sidebar nav button em{font-style:normal;opacity:.35}.module-sidebar nav button:hover{background:rgba(255,255,255,.07);color:#fff}.module-sidebar nav button.active{background:linear-gradient(90deg,rgba(216,164,52,.27),rgba(216,164,52,.08));color:#fff;box-shadow:inset 3px 0 #d8a434}.module-sidebar nav button.active>i{background:#d8a434;color:#102c3d}.module-sidebar footer{margin-top:auto;padding:14px 17px;border-top:1px solid rgba(255,255,255,.1);display:grid;gap:4px}.module-sidebar footer span{font-size:11px;color:#81c5a7}.module-sidebar footer small{font-size:10px;color:#76929e}
.module-surface{min-width:0}.module-surface .content{max-width:none;padding:24px 28px 50px}
.function-hero{display:flex;justify-content:space-between;gap:24px;align-items:center;padding:22px 24px;margin-bottom:16px;border-radius:12px;background:linear-gradient(130deg,#fff,#f0f5f5);border:1px solid var(--line);box-shadow:var(--shadow)}.function-hero small{font-size:10px;font-weight:800;letter-spacing:.12em;color:var(--gold)}.function-hero h2{margin:5px 0 7px;font-size:24px}.function-hero p{max-width:760px;margin:0;color:var(--muted);font-size:13px;line-height:1.5}.function-hero button{flex:0 0 auto;border:0;border-radius:8px;background:var(--navy);color:#fff;padding:11px 15px;font-weight:700;cursor:pointer}.compact-kpis article strong{font-size:21px}.workflow{list-style:none;margin:0;padding:0;display:grid}.workflow li{display:grid;grid-template-columns:37px 1fr;gap:11px;padding:12px 0;border-bottom:1px solid #edf0f1}.workflow li>i{width:31px;height:31px;display:grid;place-items:center;border-radius:50%;background:#eef3f4;color:var(--navy);font-style:normal;font-size:10px;font-weight:800}.workflow li span{display:grid;gap:4px}.workflow li b{font-size:13px}.workflow li small{font-size:11px;color:var(--muted)}
.data-lower{align-items:start}.workflow-panel,.related-alert-panel{min-width:0}.detailed-workflow li{grid-template-columns:42px minmax(0,1fr);padding:14px 0}.detailed-workflow li>i{width:34px;height:34px;background:linear-gradient(145deg,#eaf1f2,#dce8ea);box-shadow:inset 0 0 0 1px #d1dfe2}.detailed-workflow li span{gap:5px}.detailed-workflow li b{font-size:13px;color:#173548}.detailed-workflow li small{font-size:11px;line-height:1.45}.detailed-workflow li em,.alert-meta{display:flex;flex-wrap:wrap;gap:5px;margin-top:3px;font-style:normal}.detailed-workflow mark,.alert-meta mark{padding:3px 6px;border:1px solid #dce6e8;border-radius:4px;background:#f5f8f8;color:#58707a;font-size:9px;font-weight:700}.detailed-workflow mark.workflow-state{border-color:#d7e5dc;background:#edf6f0;color:#28704f}.detailed-alerts{padding-bottom:5px}.detailed-alerts button{align-items:flex-start;padding:13px 0}.detailed-alerts button>i{margin-top:4px}.detailed-alerts button>span{display:grid;gap:5px;min-width:0}.detailed-alerts button>span>b{font-size:12px;line-height:1.35}.detailed-alerts button>span>small{font-size:10px;line-height:1.35;color:#71848d}.detailed-alerts button>strong{color:#93a3aa;font-size:18px}.detailed-alerts .alert-meta mark:first-child{border-color:#ead7d4;background:#faf0ee;color:#9e433b}.detailed-alerts .alert-meta mark:last-child{border-color:#d5e5dc;background:#edf6f1;color:#276b4e}

.embedded-mode .native-app { display: none; }
.embed-pool {
  position: fixed;
  top: 72px;
  left: -200vw;
  width: 100vw;
  height: calc(100vh - 72px);
  overflow: hidden;
  visibility: hidden;
  background: #fff;
}
.embed-pool.active { left: 0; visibility: visible; }
.module-frame {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  background: #fff;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.module-frame.active { opacity: 1; visibility: visible; pointer-events: auto; }
.module-frame-fallback {
  position: absolute;
  top: 18px;
  right: 24px;
  z-index: 2;
  padding: 8px 11px;
  border-radius: 7px;
  background: var(--navy);
  color: #fff;
  text-decoration: none;
  font-size: 11px;
  box-shadow: var(--shadow);
}

@media (max-width: 900px) {
  .work > header {
    height: 72px;
    grid-template-columns: 54px minmax(0, 1fr) auto;
    grid-template-rows: 72px;
    column-gap: 8px;
    padding: 0 10px;
  }
  .top-brand > span { display: none; }
  .module-switcher { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; }
  .module-switcher button { flex: 0 0 auto; min-width: max-content; max-width: none; padding: 0 10px; }
  .module-switcher button i { font-size: 11px; }
  .top-actions #lang { display: none; }
  .embed-pool { top: 72px; height: calc(100vh - 72px); }
  .native-app{grid-template-columns:205px minmax(0,1fr);min-height:calc(100vh - 72px)}.module-sidebar{top:72px;height:calc(100vh - 72px)}.module-sidebar nav button{grid-template-columns:31px 1fr}.module-sidebar nav button em{display:none}.module-surface .content{padding:20px 16px}
}

@media (max-width: 600px) {
  .work > header { height: 72px; grid-template-rows:72px; }
  .embed-pool { top: 72px; height: calc(100vh - 72px); }
  .native-app{display:block}.module-sidebar{position:relative;top:auto;width:100%;height:auto}.module-sidebar header,.module-sidebar footer{display:none}.module-sidebar nav{display:flex;overflow-x:auto;padding:8px}.module-sidebar nav button{flex:0 0 auto;width:auto;grid-template-columns:31px auto;padding-right:12px}.module-surface .module-head{padding-left:16px}
}
.factory-label{border:0!important;border-radius:4px!important;background:#0b2537!important;color:#fff!important;box-shadow:0 3px 10px rgba(0,0,0,.22)!important;font-size:10px!important;font-weight:700!important;padding:4px 7px!important}.factory-label:before{border-right-color:#0b2537!important}