:root{--bg:#071018;--panel:#0d1922;--panel2:#101f2a;--line:#203540;--text:#edf5f7;--mut:#8fa6b0;--cyan:#43d3dd;--green:#49cc99;--amber:#edac4d;--red:#ef6975;--blue:#61aafc}
*{box-sizing:border-box}body{margin:0;background:radial-gradient(circle at 55% -10%,#15313e,#071018 40%);color:var(--text);font:13px Inter,system-ui,sans-serif}button,select{font:inherit}
header{height:62px;display:flex;align-items:center;padding:0 18px;border-bottom:1px solid var(--line);background:#09141cf4;gap:18px}.logo{font-weight:900;font-size:18px}.logo b{color:var(--cyan)}.nav{display:flex;gap:4px}.nav button,.pill,.tool{border:1px solid transparent;background:transparent;color:var(--mut);padding:8px 10px;border-radius:8px;cursor:pointer}.nav button.on,.pill.on{background:#182b36;color:white;border-color:#28424f}.spacer{flex:1}.mut{color:var(--mut)}main{padding:15px 17px}.top{display:flex;align-items:center;gap:10px;margin-bottom:12px}.top h1{font-size:21px;margin:2px 0}.select{min-width:290px;background:#101f2a;color:white;border:1px solid var(--line);border-radius:8px;padding:7px 9px}.rev{border:1px solid #2b4855;border-radius:999px;padding:5px 8px;color:#aac2ca}
.layout{display:grid;grid-template-columns:1.15fr .85fr;gap:11px;height:calc(100vh - 126px)}.panel{background:linear-gradient(#0e1b25,#0a151e);border:1px solid var(--line);border-radius:13px;overflow:hidden;box-shadow:0 16px 42px #0004}.ph{height:44px;display:flex;align-items:center;padding:0 12px;border-bottom:1px solid var(--line);gap:8px}.stage{height:calc(100% - 44px);position:relative;background:radial-gradient(circle at 50% 42%,#17323f,#08131b 70%)}canvas{width:100%;height:100%;display:block}.tools{position:absolute;top:10px;left:10px;z-index:4;display:flex;gap:6px;flex-wrap:wrap}.tool{background:#091720e8;border-color:#2b4855;color:#bed1d8}.tool:disabled{opacity:.4;cursor:wait}.slider{display:flex;align-items:center;gap:6px;background:#091720e8;border:1px solid #2b4855;border-radius:8px;padding:5px 8px}.slider input{width:105px;accent-color:var(--cyan)}.legend{position:absolute;left:10px;bottom:10px;z-index:4;background:#091720e8;border:1px solid var(--line);padding:8px;border-radius:8px}.dot{width:7px;height:7px;border-radius:50%;display:inline-block;margin-right:4px}
.right{display:grid;grid-template-rows:46% 54%;min-width:0}.treebox{overflow:auto;border-bottom:1px solid var(--line);position:relative}.treehead{padding:9px 10px;display:flex;gap:6px;align-items:center;position:sticky;top:0;background:#0c1922;z-index:2}.uses{display:flex;gap:5px;overflow:auto}.pill{white-space:nowrap;border-color:#223a46;padding:6px 8px}.tree{padding:4px 8px 12px}.node{min-height:31px;display:flex;align-items:center;gap:7px;padding:4px 7px;border-radius:7px;cursor:pointer}.node:hover,.node.sel{background:#17313d}.chev{width:13px;color:#79929d}.nname{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.count{min-width:25px;text-align:center;padding:3px 6px;border-radius:999px;background:#18303b;font-weight:800}.count.bad{background:#4a2229;color:#ff9da5}.count.warn{background:#49371f;color:#ffd48d}.detail{overflow:auto}.tabs{display:flex;border-bottom:1px solid var(--line);padding:0 8px;overflow:auto}.tab{border:0;background:transparent;color:var(--mut);padding:10px 8px;border-bottom:2px solid transparent;cursor:pointer;white-space:nowrap}.tab.on{color:#c7fbff;border-color:var(--cyan)}.body{padding:11px}.kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}.kpi{background:#10202a;border:1px solid var(--line);border-radius:9px;padding:9px}.num{font-size:20px;font-weight:850;margin-top:4px}.red{color:var(--red)}.amber{color:var(--amber)}.green{color:var(--green)}.rows{display:grid;gap:6px;margin-top:9px}.row{display:flex;justify-content:space-between;gap:10px;border:1px solid var(--line);background:#0d1a23;padding:8px;border-radius:8px}.idgrid{display:grid;grid-template-columns:130px 1fr;gap:7px;margin-top:9px}.idgrid span:nth-child(odd){color:var(--mut)}.banner{margin-top:8px;padding:9px;border:1px solid #31505c;background:#102630;border-radius:8px}
.loading-card{position:absolute;inset:0;display:flex;justify-content:center;align-items:center;gap:14px;z-index:8;background:#07131be8;backdrop-filter:blur(3px);color:#d7e7ec}.loading-card.hidden{display:none}.spinner,.mini-spinner{border:2px solid #29414c;border-top-color:var(--cyan);border-radius:50%;animation:spin .8s linear infinite}.spinner{width:34px;height:34px}.mini-spinner{display:inline-block;width:13px;height:13px}@keyframes spin{to{transform:rotate(360deg)}}.load-copy{width:min(430px,75%)}.load-copy b{font-size:15px}.progress{height:5px;background:#132630;border-radius:10px;overflow:hidden;margin:10px 0 8px}.progress i{display:block;height:100%;background:linear-gradient(90deg,var(--cyan),var(--green));width:0;transition:width .2s}.load-steps{display:grid;gap:4px;font-size:11px;color:#78909a;max-height:120px;overflow:hidden}.load-steps .done{color:#75bda5}.load-steps .active{color:#d5e9ee}.viewer-error{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:7;background:#101c24e8;border:1px solid #633039;padding:14px 16px;border-radius:10px;color:#ffb2b8;max-width:75%}.hidden{display:none!important}.subload{padding:8px 12px;display:flex;align-items:center;gap:8px;color:var(--mut);border-bottom:1px solid var(--line)}
.global-load{display:none;align-items:center;gap:7px;color:#a9bec6;font-size:12px}.global-load.on{display:flex}
#dashboard{display:none}.dashgrid{display:grid;grid-template-columns:1.3fr .7fr;gap:11px;height:calc(100vh - 126px)}#map{height:100%;background:#0b1720}.cards{padding:10px;display:grid;gap:8px;overflow:auto}.vcard{border:1px solid var(--line);border-radius:10px;padding:11px;background:#0e1b25;cursor:pointer}.vcard:hover{border-color:#3b7484}.bar{height:5px;background:#172832;border-radius:4px;margin-top:7px;overflow:hidden}.bar i{display:block;height:100%;background:var(--green)}.chat-panel{max-width:1050px;margin:30px auto;padding:25px}.chat-title{font-size:20px;font-weight:800}.chat-example{margin-top:20px;border:1px solid var(--line);background:#0e1b25;padding:14px;border-radius:10px;color:#bcd0d7}
@media(max-width:950px){.layout,.dashgrid{grid-template-columns:1fr;height:auto}.panel{min-height:580px}.select{min-width:180px}}

.asset-warning{position:absolute;right:10px;bottom:10px;z-index:6;max-width:420px;border:1px solid #6b4e28;background:#241b10e8;color:#ffd59b;padding:9px 11px;border-radius:8px;font-size:12px}
.asset-warning b{display:block;color:#ffe6bd;margin-bottom:3px}
.friendly-note{margin-top:9px;padding:9px 10px;border:1px solid var(--line);background:#0d1a23;border-radius:8px;color:#a9bec6}
.specgrid{display:grid;grid-template-columns:135px 1fr;gap:8px;margin-top:11px}.specgrid span:nth-child(odd){color:var(--mut)}.specgrid b{font-weight:700}


/* ===================== v8.8 dashboard shell ===================== */
.dashboard-subnav{display:flex;gap:5px;margin:0 0 12px;padding:4px;background:#091720;border:1px solid var(--line);border-radius:10px;width:max-content}
.dash-tab,.fleet-mode button{border:1px solid transparent;background:transparent;color:var(--mut);padding:8px 12px;border-radius:8px;cursor:pointer}
.dash-tab.on,.fleet-mode button.on{background:#17303b;color:#fff;border-color:#294653}
.fleet-top{margin-bottom:12px}.fleet-note{margin-top:3px}.fleet-note code{color:#a9c7d0}
.fleet-mode{display:flex;gap:5px;background:#091720;border:1px solid var(--line);border-radius:10px;padding:4px}
.fleet-mode-panel{height:calc(100vh - 176px);min-height:560px}
.fleet-map-panel{height:100%}
#map{height:calc(100% - 44px)!important;width:100%!important;min-height:510px;background:#0b1720}
.leaflet-container{background:#0b1720!important}
.fleet-card-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(310px,1fr));gap:12px;align-content:start}
.fleet-card{position:relative;min-height:245px;border:1px solid var(--line);border-radius:14px;background:linear-gradient(145deg,#10202a,#0a151d);padding:15px;overflow:hidden;cursor:pointer;transition:.16s ease}
.fleet-card:hover{transform:translateY(-2px);border-color:#3b7484}
.fleet-card:before{content:"";position:absolute;width:210px;height:210px;border:1px solid #284651;border-radius:50%;right:-50px;top:24px;opacity:.3}
.fleet-card-head{display:flex;align-items:flex-start;gap:10px}.fleet-card-head h2{margin:3px 0 1px;font-size:18px}.fleet-card-status{margin-left:auto;color:var(--green);font-weight:800}
.fleet-ship-graphic{height:82px;position:relative;margin:14px 0}.fleet-ship-graphic:after{content:"";position:absolute;left:5%;right:5%;bottom:16px;height:30px;background:linear-gradient(90deg,#1f5669,#46a3b8);clip-path:polygon(0 15%,83% 15%,100% 55%,89% 100%,10% 100%);opacity:.82}.fleet-ship-graphic:before{content:"";position:absolute;left:18%;bottom:45px;width:58px;height:24px;background:#75adba;clip-path:polygon(0 100%,0 25%,78% 25%,100% 100%);opacity:.72}
.fleet-facts{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}.fleet-fact{background:#091720;border:1px solid #1d3440;border-radius:9px;padding:8px}.fleet-fact span{display:block;color:var(--mut);font-size:11px}.fleet-fact b{display:block;margin-top:4px;font-size:13px}
.fleet-open{margin-top:11px;width:100%;border:1px solid #2e6170;background:#12303a;color:#d6faff;padding:9px;border-radius:8px;cursor:pointer}

/* ===================== v8.8 AI-native chat ===================== */
.chat-header{display:flex;align-items:center;gap:15px;margin-bottom:12px}.chat-header h1{margin:2px 0;font-size:22px}
.chat-twin-badge{border:1px solid #2c4b58;background:#10232d;padding:7px 10px;border-radius:999px;color:#bdd2da}
.chat-layout{display:grid;grid-template-columns:.92fr 1.08fr;gap:11px;height:calc(100vh - 132px);min-height:630px}
.conversation-panel,.chat-visual-panel{height:100%}.conversation-panel{display:grid;grid-template-rows:44px 1fr auto}
.conversation{padding:16px;overflow:auto;display:flex;flex-direction:column;gap:12px;background:radial-gradient(circle at 10% 0%,#102731,#09151d 48%)}
.msg{max-width:86%;border-radius:14px;padding:11px 13px;line-height:1.45;border:1px solid var(--line);box-shadow:0 8px 20px #0002}
.msg.user{align-self:flex-end;background:#173946;border-color:#285667}
.msg.ai{align-self:flex-start;background:#0e1d27}.msg .speaker{display:block;font-size:10px;letter-spacing:.7px;text-transform:uppercase;color:var(--mut);margin-bottom:5px;font-weight:800}
.msg .ai-highlight{color:#83e7ee;font-weight:800}.msg .metric-highlight{color:#ffcf82;font-weight:800}
.chat-placeholder{margin:auto;color:var(--mut);text-align:center;max-width:350px}
.chat-compose{margin:10px;border:1px solid #284652;background:#0a1820;color:#78919b;border-radius:11px;padding:12px 13px}.chat-compose button{float:right;border:0;background:#225764;color:#e9fbff;padding:6px 12px;border-radius:7px}
.chat-visual-panel{display:grid;grid-template-rows:44px 1fr auto}
.chat-3d{position:relative;min-height:0;background:radial-gradient(circle at 50% 42%,#17323f,#07121a 70%);overflow:hidden}
.chat-3d canvas{width:100%;height:100%;display:block}
.chat-3d-empty{position:absolute;inset:0;display:grid;place-items:center;text-align:center;padding:30px;color:var(--mut);z-index:2}
.chat-response-meta{padding:10px 12px;border-top:1px solid var(--line);color:var(--mut);font-size:12px;background:#0a171f}

/* Keep the published Twin slightly larger in the viewport. */
.stage canvas{display:block}

@media(max-width:1050px){
  .chat-layout{grid-template-columns:1fr;height:auto}.conversation-panel,.chat-visual-panel{min-height:560px}
  .fleet-mode-panel{height:auto}.fleet-map-panel{height:620px}
}


/* ================= v8.9 use-case hierarchy state ================= */
.node.risk-red{background:linear-gradient(90deg,#4c2028cc,#1a1e24 75%);border-left:3px solid var(--red)}
.node.risk-red .nname{color:#ffc0c5;font-weight:800}
.node.risk-red .count{background:#6b2731;color:#ffd2d6}
.node.risk-amber{background:linear-gradient(90deg,#46341dcc,#172028 75%);border-left:3px solid var(--amber)}
.node.risk-amber .nname{color:#ffd99d;font-weight:750}
.node.risk-amber .count{background:#5c421f;color:#ffe0a8}
.hull-slider{min-width:260px}.hull-slider input{width:105px}

/* v8.10 */
.global-load{position:fixed!important;top:72px;left:18px;z-index:10000;display:none!important;align-items:center;gap:10px;min-width:210px;max-width:420px;padding:11px 14px;border-radius:10px;border:1px solid #ffe39a;background:linear-gradient(135deg,#ffd86a,#ffbd45);color:#07131a!important;font-size:12px;font-weight:850;box-shadow:0 14px 38px #0009,0 0 0 1px #fff3 inset;pointer-events:none}.global-load.on{display:flex!important}.global-load .mini-spinner{border-color:#142a35!important;border-top-color:#fff!important;width:16px;height:16px;flex:none}#globalLoadText{color:#07131a!important}
.nav button{color:#b8cbd2!important;font-weight:800!important;border:1px solid #29434f!important;background:#0d1c25!important;padding:9px 15px!important}.nav button:hover{background:#16303b!important;color:white!important;border-color:#3a6977!important}.nav button.on{color:#07131a!important;background:linear-gradient(135deg,#66e0e8,#39bac6)!important;border-color:#79edf3!important;box-shadow:0 0 0 1px #ffffff33 inset,0 6px 18px #1fb7c333!important}.dash-tab,.fleet-mode button{color:#afc5cd!important;font-weight:800!important;border:1px solid #29434f!important;background:#0c1a23!important}.dash-tab.on,.fleet-mode button.on{color:#07131a!important;background:linear-gradient(135deg,#70dce3,#3fb9c5)!important;border-color:#7fe9ef!important}.pill{color:#a9c0c8!important;border-color:#29434f!important;background:#0c1a23!important;font-weight:750!important}.pill.on{color:#07131a!important;background:#67d7df!important;border-color:#83e9ef!important}.tab{color:#9fb6be!important;font-weight:750!important}.tab.on{color:#76e4eb!important;border-color:#76e4eb!important}.high-risk-button.active{background:#9d2d39!important;color:#fff!important;border-color:#e45c69!important}
.layout{--model-pane:58%;display:grid!important;grid-template-columns:minmax(390px,var(--model-pane)) 9px minmax(390px,1fr)!important;gap:0!important}.splitter{position:relative;cursor:col-resize;background:transparent;z-index:20;display:flex;justify-content:center;align-items:center;user-select:none;touch-action:none}.splitter span{display:block;width:3px;height:64px;border-radius:5px;background:#294752;box-shadow:0 0 0 1px #0a141b;transition:.15s}.splitter:hover span,.splitter.dragging span{width:5px;background:#5bd4dc;box-shadow:0 0 14px #38bfca77}#modelPanel,.right{min-width:0}
.model-tooltip{position:absolute;z-index:40;width:235px;pointer-events:none;border:1px solid #416574;border-radius:10px;padding:10px 11px;background:#07131af2;color:#eaf6f8;box-shadow:0 12px 28px #0009;backdrop-filter:blur(4px)}.model-tooltip b{display:block;margin-bottom:6px;font-size:13px;color:#8eeaf0}.model-tooltip .tip-row{display:flex;justify-content:space-between;gap:12px;padding:3px 0;border-top:1px solid #203640}.model-tooltip .tip-row span{color:#9fb5bd}.model-tooltip .tip-row strong{font-weight:850;color:#fff}.model-tooltip .tip-risk{color:#ff7e88!important}.high-risk-empty{position:absolute;z-index:35;left:50%;top:50%;transform:translate(-50%,-50%);padding:12px 16px;border:1px solid #5b3840;border-radius:10px;background:#21151ae8;color:#ffb0b6}
.node.risk-red,.node.risk-amber{background:transparent!important;border-left:0!important}.node.risk-red .nname,.node.risk-amber .nname{color:inherit!important;font-weight:inherit!important}.count.risk-red{background:#7a2631!important;color:#ffd4d8!important;box-shadow:0 0 0 1px #d45460 inset}.count.risk-amber{background:#62461d!important;color:#ffe1aa!important;box-shadow:0 0 0 1px #b98435 inset}.high-risk-flat-row{margin:5px 2px;border:1px solid #273d47;background:#0d1b24;min-height:38px}.high-risk-flat-row:hover,.high-risk-flat-row.sel{background:#142b35}.high-risk-path{display:block;color:#6f8993;font-size:10px;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#modelPanel:fullscreen{width:100vw!important;height:100vh!important;max-width:none!important;border-radius:0!important;background:#071018!important}#modelPanel:fullscreen .stage{height:calc(100vh - 44px)!important}#modelPanel:fullscreen .tools{max-width:calc(100vw - 30px)}
.fleet-mini3d{position:relative;height:112px;margin:10px 0 11px;border:1px solid #1d3742;border-radius:10px;overflow:hidden;background:radial-gradient(circle at 50% 45%,#16313c,#08131b 72%)}.fleet-mini3d canvas{width:100%;height:100%;display:block}.fleet-mini-loading{position:absolute;inset:0;display:grid;place-items:center;color:#8fa9b2;font-size:11px}.fleet-ship-graphic{display:none!important}
.chat-3d canvas{position:absolute;inset:0;z-index:1}.chat-3d-empty{z-index:2}.chat-3d.has-model .chat-3d-empty{display:none!important}
@media(max-width:1050px){.layout{grid-template-columns:1fr!important;gap:11px!important}.splitter{display:none!important}}


/* ===================== v8.10.2 loading card ===================== */
.global-load{
  top:72px!important;
  left:auto!important;
  right:20px!important;
  min-width:230px!important;
  max-width:420px!important;
  padding:11px 14px!important;
  border:1px solid #43d3dd88!important;
  background:
    linear-gradient(135deg,#0b2430f5,#0b1a24f5 58%,#102b35f5)!important;
  color:#e8fbfd!important;
  border-radius:11px!important;
  box-shadow:
    0 16px 42px #0009,
    0 0 0 1px #66e7ee18 inset,
    0 0 24px #32c8d52e!important;
  backdrop-filter:blur(10px);
}
.global-load:before{
  content:"";
  width:4px;
  align-self:stretch;
  border-radius:5px;
  background:linear-gradient(#6beaf1,#2eb7c6);
  box-shadow:0 0 12px #45d9e6;
}
.global-load .mini-spinner{
  border-color:#24505d!important;
  border-top-color:#69ebf2!important;
  box-shadow:0 0 10px #43d3dd33;
}
#globalLoadText{
  color:#dffbfe!important;
  text-shadow:0 0 12px #55dce644;
}

/* Give the real Fleet vessel preview enough height to read as a vessel card. */
.fleet-mini3d{
  height:138px!important;
}


/* ===================== v8.11 condition / life forecast ===================== */
.condition-summary{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin-top:10px}
.condition-card{background:#10202a;border:1px solid var(--line);border-radius:9px;padding:9px}
.condition-card span{display:block;color:var(--mut);font-size:11px}
.condition-card b{display:block;font-size:18px;margin-top:4px}
.condition-alert{margin-top:10px;border:1px solid #6f333c;background:#26161be8;border-radius:9px;padding:10px;color:#ffc0c6}
.condition-alert b{color:#ff8d98}
.life-chart-card{margin-top:10px;border:1px solid var(--line);border-radius:11px;background:#0a171f;padding:10px}
.life-chart-title{display:flex;align-items:center;gap:10px;margin-bottom:7px}
.life-chart-title b{font-size:13px}.life-chart-title span{margin-left:auto;color:var(--mut);font-size:11px}
.life-chart-svg{width:100%;height:245px;display:block;background:#0c1b24;border:1px solid #1e3540;border-radius:9px}
.life-chart-legend{display:flex;gap:16px;margin:7px 3px 0;color:#9bb3bc;font-size:11px}
.life-chart-legend i{display:inline-block;width:19px;height:3px;border-radius:3px;margin-right:5px;vertical-align:middle}
.symptom-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;margin-top:9px}
.symptom{border:1px solid #29414b;background:#0d1c25;border-radius:8px;padding:8px}
.symptom span{display:block;color:#8fa7b0;font-size:10px;text-transform:uppercase;letter-spacing:.45px}
.symptom b{display:block;margin-top:3px}.symptom.bad b{color:#ff818c}
.root-cause-list{display:grid;gap:6px;margin-top:9px}
.root-cause{display:grid;grid-template-columns:22px 1fr;gap:7px;border:1px solid #253d47;background:#0c1a23;border-radius:8px;padding:8px}
.root-cause strong{color:#6ee1e8}.root-cause p{margin:0;color:#bfd0d6;line-height:1.35}
.chat-condition-list{margin:8px 0 0;padding-left:18px;color:#c5d6dc}.chat-condition-list li{margin:5px 0}
.chat-diagnosis{margin-top:8px;padding:9px;border-radius:8px;border:1px solid #59333a;background:#21161ae0}
.chat-diagnosis b{color:#ff919a}

/* ===================== v8.11 water layer ===================== */
.water-status{
  position:absolute;
  right:10px;
  bottom:10px;
  z-index:4;
  color:#72cad2;
  font-size:10px;
  opacity:.75;
  pointer-events:none;
}


/* ===================== Vessel360 branding ===================== */
.brand{
  display:flex;
  align-items:center;
  gap:10px;
  flex:none;
}
.brand-mark{
  width:34px;
  height:34px;
  display:grid;
  place-items:center;
  border-radius:10px;
  border:1px solid #3fd2dd66;
  background:linear-gradient(145deg,#102c36,#0a1b24);
  box-shadow:
    0 0 0 1px #7af3f51b inset,
    0 0 20px #36c8d338;
}
.brand-mark svg{width:27px;height:27px;display:block}
.logo{
  font-size:23px!important;
  letter-spacing:.4px;
  font-weight:950!important;
  line-height:1;
}
.logo b{font-weight:950}

/* ===================== hierarchy/details vertical resize ===================== */
.right{
  --tree-pane:46%;
  display:grid!important;
  grid-template-rows:
    minmax(130px,var(--tree-pane))
    9px
    minmax(150px,1fr)!important;
  min-height:0;
}
.treebox{
  min-height:0;
  overflow:auto;
}
.detail-splitter{
  cursor:row-resize;
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
  z-index:14;
  background:#09151d;
  border-top:1px solid #203641;
  border-bottom:1px solid #172b35;
  touch-action:none;
  user-select:none;
}
.detail-splitter span{
  width:54px;
  height:3px;
  border-radius:6px;
  background:#355562;
  transition:.15s ease;
}
.detail-splitter:hover span,
.detail-splitter.dragging span{
  width:76px;
  height:4px;
  background:#58d9e2;
  box-shadow:0 0 14px #39c7d399;
}
.detail{
  min-height:0!important;
  overflow:auto!important;
  position:relative;
  overscroll-behavior:contain;
}
.tabs{
  position:sticky!important;
  top:0;
  z-index:20!important;
  background:#0b1821f8!important;
  backdrop-filter:blur(10px);
  box-shadow:0 1px 0 var(--line),0 7px 18px #0003;
}
.body{min-height:100%}

/* ===================== interactive RUL chart ===================== */
.life-chart-card{
  position:relative;
  overflow:visible;
}
.life-chart-title{
  flex-wrap:wrap;
}
.life-chart-controls{
  margin-left:auto;
  display:flex;
  align-items:center;
  gap:5px;
}
.chart-tool{
  border:1px solid #294754;
  background:#0c1b24;
  color:#b8d0d7;
  min-width:31px;
  height:29px;
  padding:0 8px;
  border-radius:7px;
  cursor:pointer;
  font-size:11px;
  font-weight:800;
}
.chart-tool:hover{
  color:#07131a;
  background:#61dce4;
  border-color:#77e9ef;
}
.life-chart-wrap{
  position:relative;
  min-height:245px;
}
.life-chart-svg{
  cursor:crosshair;
  user-select:none;
  touch-action:none;
}
.life-chart-hover{
  position:absolute;
  z-index:8;
  pointer-events:none;
  min-width:185px;
  padding:8px 9px;
  border:1px solid #4a7582;
  background:#07131af2;
  border-radius:8px;
  color:#e9f7f9;
  box-shadow:0 10px 26px #0009;
  font-size:11px;
  line-height:1.42;
}
.life-chart-hover b{
  color:#75e1e8;
  display:block;
  margin-bottom:3px;
}
.life-chart-card.chart-expanded{
  position:fixed!important;
  z-index:12000!important;
  inset:28px!important;
  margin:0!important;
  padding:16px!important;
  background:#09161ff8!important;
  border:1px solid #3f6b78!important;
  box-shadow:0 26px 80px #000c,0 0 30px #36cbd535!important;
  border-radius:14px!important;
}
.life-chart-card.chart-expanded .life-chart-wrap{
  height:calc(100vh - 145px);
}
.life-chart-card.chart-expanded .life-chart-svg{
  height:100%!important;
}
.chart-backdrop{
  position:fixed;
  inset:0;
  z-index:11999;
  background:#02070bbd;
  backdrop-filter:blur(5px);
}

/* Keep the details tabs readable while content scrolls. */
.detail::-webkit-scrollbar{width:8px}
.detail::-webkit-scrollbar-thumb{background:#294550;border-radius:8px}

/* On small screens the vertical details splitter remains usable. */
@media(max-width:1050px){
  .right{
    --tree-pane:44%;
    min-height:720px;
  }
}

/* ===================== v8.13.3 Predictive Maintenance add-on ===================== */
.predictive-range-bar{
  display:flex;
  align-items:flex-end;
  gap:7px;
  flex-wrap:wrap;
  padding:8px 10px;
  border-bottom:1px solid var(--line);
  background:#0b1821f5;
  position:sticky;
  top:39px;
  z-index:18;
}
.predictive-range-bar.hidden{display:none!important}
.predictive-range-bar label{display:grid;gap:3px;color:var(--mut);font-size:10px;text-transform:uppercase;letter-spacing:.35px}
.predictive-range-bar input{min-width:164px;background:#0a1720;color:#eaf5f7;border:1px solid #294653;border-radius:7px;padding:6px 7px;color-scheme:dark}
.range-action{height:31px;border:1px solid #294653;background:#0c1b24;color:#b9cfd6;border-radius:7px;padding:0 9px;cursor:pointer;font-weight:700}
.range-action:hover{border-color:#48c7d1;color:#eaffff}.range-action.primary{background:#16424b;border-color:#39818a;color:#dffcff}
.predictive-range-note{color:#809aa4;font-size:10px;min-width:180px;flex:1;padding:0 2px 5px}
.predictive-info{margin-top:8px;padding:9px;border:1px solid #31505c;background:#102630;border-radius:8px;color:#bfd2d8}
.predictive-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:9px}
.predictive-card{border:1px solid var(--line);background:#0d1a23;border-radius:9px;padding:10px;min-width:0}
.predictive-card h3{margin:0 0 8px;font-size:12px;color:#d8eaee}
.predictive-table{width:100%;border-collapse:collapse;font-size:11px}.predictive-table th,.predictive-table td{padding:7px 6px;border-bottom:1px solid #1e333d;text-align:left;vertical-align:top}.predictive-table th{color:#8fa7b0;font-size:10px;text-transform:uppercase;letter-spacing:.35px}.predictive-table td:last-child,.predictive-table th:last-child{text-align:right}
.predictive-chart{height:190px;border:1px solid #1f3641;border-radius:8px;background:#09171f;overflow:hidden}.predictive-chart svg{width:100%;height:100%;display:block}
.predictive-empty{padding:16px;color:#8fa7b0;text-align:center;border:1px dashed #28434e;border-radius:8px;background:#0a171f}
.predictive-error{padding:10px;border:1px solid #6a333b;background:#27161b;border-radius:8px;color:#ffadb5}
.predictive-loading{display:flex;align-items:center;gap:8px;padding:14px;color:#9fb7bf}.predictive-loading .mini-spinner{display:inline-block}
.scenario-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:10px}.scenario-grid label{display:grid;gap:4px;color:#8fa7b0;font-size:10px;text-transform:uppercase;letter-spacing:.3px}.scenario-grid input{background:#091821;color:#e8f4f6;border:1px solid #294653;border-radius:7px;padding:7px}.scenario-grid label:has(input[type="checkbox"]){display:flex;align-items:center;gap:8px;padding-top:19px}.scenario-grid input[type="checkbox"]{width:auto;accent-color:var(--cyan)}
.predictive-action{border:1px solid #3c7a84;background:#16515a;color:#e7feff;padding:7px 10px;border-radius:7px;cursor:pointer;font-weight:800}.predictive-action:hover{background:#1b6570}
@media(max-width:1050px){.predictive-grid,.scenario-grid{grid-template-columns:1fr}.predictive-range-bar{top:39px}.predictive-range-bar input{min-width:145px}}


/* ===================== v8.13.5 predictive interactive charts ===================== */
.pm-chart-stack{display:grid;gap:10px;margin-top:10px}
.pm-chart-card{margin-top:8px;border:1px solid #213b46;border-radius:10px;background:#09171f;overflow:hidden;min-width:0}
.pm-chart-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;padding:9px 10px 6px}
.pm-chart-head>div:first-child{min-width:0}.pm-chart-head b{display:block;color:#d8edf1;font-size:12px;white-space:normal;overflow-wrap:anywhere}.pm-chart-head small{display:block;margin-top:3px;color:#7f9aa4;font-size:9px;line-height:1.4}
.pm-chart-tools{display:flex;gap:4px;flex:0 0 auto}.pm-chart-tools button{height:28px;min-width:28px;padding:0 7px;border:1px solid #2a4a57;border-radius:6px;background:#0c1c25;color:#b9d0d7;cursor:pointer;font-size:10px;font-weight:800}.pm-chart-tools button:hover{background:#16444d;color:#ecffff;border-color:#48b9c3}
.pm-chart-host,.pm-chart-modal-host{height:245px;position:relative;min-width:0;background:#09171f;overflow:hidden;touch-action:none}.pm-chart-host canvas,.pm-chart-modal-host canvas{width:100%;height:100%;display:block;cursor:crosshair;touch-action:none}
.pm-chart-brush{position:absolute;top:18px;bottom:34px;border:1px solid #4ed6df;background:#42cdd522;pointer-events:none}.pm-chart-tooltip{position:absolute;z-index:5;min-width:180px;max-width:280px;padding:8px 9px;border:1px solid #416976;border-radius:7px;background:#061219f5;color:#e9f8fa;box-shadow:0 9px 28px #000b;pointer-events:none;font-size:10px;line-height:1.45}.pm-chart-tooltip b{display:block;color:#7de4ea;margin-bottom:4px}.pm-chart-tooltip span{display:flex;align-items:center;gap:5px;margin-top:2px}.pm-chart-tooltip span i{width:8px;height:8px;border-radius:50%;flex:0 0 auto}.pm-chart-tooltip small{display:block;margin-top:5px;color:#9eb7bf}
.pm-chart-footer{display:flex;justify-content:space-between;gap:8px;align-items:center;flex-wrap:wrap;padding:6px 10px 8px;border-top:1px solid #18313b;color:#718d97;font-size:9px}.pm-chart-legend{display:flex;gap:10px;flex-wrap:wrap}.pm-chart-legend span{display:inline-flex;align-items:center;gap:5px}.pm-chart-legend i{display:inline-block;width:16px;height:3px;border-radius:3px}
.predictive-grid-charts{grid-template-columns:1fr}.predictive-grid-charts>.predictive-card{overflow:hidden}
.pm-chart-modal-backdrop{position:fixed;inset:0;z-index:15000;background:#02070bd6;backdrop-filter:blur(5px)}.pm-chart-modal{position:fixed;z-index:15001;inset:4vh 3vw;background:#08151dfb;border:1px solid #3e6976;border-radius:14px;box-shadow:0 30px 90px #000d;display:grid;grid-template-rows:auto minmax(0,1fr) auto;overflow:hidden}.pm-chart-modal-head{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 14px;border-bottom:1px solid #203a45}.pm-chart-modal-head span{display:block;text-transform:uppercase;letter-spacing:.8px;color:#6e929c;font-size:9px}.pm-chart-modal-head b{display:block;margin-top:3px;font-size:15px;color:#e9f8fa}.pm-chart-modal-host{height:auto;min-height:0}.pm-chart-modal-note{padding:9px 14px;border-top:1px solid #203a45;color:#819ba4;font-size:10px}
@media(max-width:1050px){.pm-chart-host{height:220px}.pm-chart-modal{inset:2vh 2vw}}

/* ===================== v8.13.6 predictive selectors ===================== */
.predictive-selector{margin-top:8px;padding:9px 10px;border:1px solid #294653;border-radius:9px;background:#0b1b24;display:grid;grid-template-columns:minmax(90px,auto) minmax(0,1fr);gap:6px 10px;align-items:center}
.predictive-selector label{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.45px;color:#87a3ad}
.predictive-select{width:100%;min-width:0;background:#081720;color:#e9f7f9;border:1px solid #355865;border-radius:7px;padding:7px 9px;font:inherit;outline:none}
.predictive-select:focus{border-color:#49cdd6;box-shadow:0 0 0 2px #43d3dd22}
.predictive-selector-help{grid-column:2;color:#718e98;font-size:9px;line-height:1.4;overflow-wrap:anywhere}
@media(max-width:700px){.predictive-selector{grid-template-columns:1fr}.predictive-selector-help{grid-column:1}}