/* WindTree WindWatch Original Production Turbine Inspection Polish
   Additive only. No API changes. No telemetry/status changes. */

.ti-root {
  --prod-bg:#020611;
  --prod-panel:linear-gradient(154deg, rgba(17,33,56,.78), rgba(5,12,25,.88) 58%, rgba(2,7,17,.94));
  --prod-border:rgba(142,198,255,.17);
  --prod-border-strong:rgba(75,216,255,.42);
  --prod-text:#edf7ff;
  --prod-muted:rgba(213,234,255,.68);
  --prod-faint:rgba(172,199,226,.42);
  --prod-cyan:#4bd8ff;
  --prod-mint:#62f2be;
  --prod-amber:#ffc24b;
  --prod-red:#ff527f;
  --prod-shadow:0 28px 82px rgba(0,8,24,.62), 0 8px 24px rgba(0,0,0,.40), inset 0 1px 0 rgba(255,255,255,.14);

  background:
    radial-gradient(1200px 680px at 78% -10%, rgba(41,118,255,.20), transparent 62%),
    radial-gradient(920px 520px at 5% 105%, rgba(41,220,177,.10), transparent 58%),
    linear-gradient(180deg, #020611 0%, #06101d 56%, #020611 100%) !important;
}

/* Header */
.ti-header {
  min-height: 66px !important;
  padding: 9px 14px !important;
  background: linear-gradient(145deg, rgba(255,255,255,.085), rgba(255,255,255,.026)), rgba(5,14,28,.86) !important;
  border-bottom: 1px solid rgba(142,198,255,.15) !important;
  box-shadow: 0 16px 48px rgba(0,8,24,.50), inset 0 1px 0 rgba(255,255,255,.10) !important;
}

.ti-back,
.ti-switcher,
.ti-seg {
  background: rgba(9,21,40,.74) !important;
  border-color: rgba(142,198,255,.16) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08) !important;
}

.ti-back:hover,
.ti-sw-btn:hover,
.ti-seg button:hover {
  border-color: var(--prod-border-strong) !important;
  color: var(--prod-text) !important;
}

.ti-sw-btn.on,
.ti-seg button.on {
  color: #fff !important;
  background: linear-gradient(180deg, rgba(75,216,255,.19), rgba(98,242,190,.055)) !important;
  box-shadow: 0 0 20px rgba(75,216,255,.12), inset 0 1px 0 rgba(255,255,255,.13) !important;
}

.ti-h-title h1 {
  letter-spacing: -.035em !important;
  font-size: clamp(20px, 2vw, 29px) !important;
}

.ti-eyebrow,
.ti-clock-label {
  color: var(--prod-faint) !important;
  letter-spacing: .16em !important;
}

/* Stage and model area */
.ti-stage {
  background:
    radial-gradient(760px 520px at 52% 38%, rgba(75,216,255,.10), transparent 66%),
    linear-gradient(180deg, rgba(4,13,28,.88), rgba(1,6,15,.96)) !important;
}

.ti-stage::before {
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:1;
  opacity:.18;
  background:
    linear-gradient(rgba(75,216,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(75,216,255,.03) 1px, transparent 1px);
  background-size:52px 52px;
  mask-image:radial-gradient(circle at 52% 46%, black 0%, transparent 82%);
}

.ti-scene-host,
.ti-canvas {
  filter:saturate(1.04) contrast(1.04) brightness(.98);
}

/* Left telemetry */
.ti-rail {
  width: 268px !important;
  gap: 12px !important;
}

.ti-card,
.ti-panel,
.ti-driveline,
.ti-inspector {
  background: var(--prod-panel) !important;
  border-color: var(--prod-border) !important;
  box-shadow: var(--prod-shadow) !important;
  backdrop-filter: blur(24px) saturate(170%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(170%) !important;
}

.ti-card {
  border-radius: 21px !important;
  padding: 13px !important;
}

.ti-card-h strong {
  color: var(--prod-text) !important;
  font-weight: 850 !important;
}

.ti-card-h em,
.ti-kv span,
.ti-sensor-l,
.ti-sgroup h3 {
  color: var(--prod-faint) !important;
  letter-spacing: .12em !important;
}

.ti-card-ic,
.ti-kv,
.ti-sensor,
.ti-part,
.ti-event,
.ti-health {
  background: linear-gradient(145deg, rgba(255,255,255,.065), rgba(255,255,255,.018)) !important;
  border-color: rgba(142,198,255,.12) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07);
}

.ti-card-ic {
  color: var(--prod-cyan) !important;
  border-color: rgba(75,216,255,.26) !important;
}

.ti-dial {
  width: 154px !important;
  filter: drop-shadow(0 0 20px rgba(75,216,255,.11));
}

.ti-dial-center strong,
.ti-power-val strong,
.ti-kv strong,
.ti-sensor-v,
.ti-clock-val {
  font-variant-numeric: tabular-nums;
}

.ti-power-val strong {
  color: var(--prod-amber) !important;
}

.ti-meter-fill {
  background: linear-gradient(90deg, var(--prod-mint), var(--prod-cyan), var(--prod-amber)) !important;
}

/* Right SCADA panel */
.ti-panel {
  width: min(360px, 26vw) !important;
  min-width: 320px !important;
  border-radius: 22px !important;
}

.ti-panel-h {
  padding: 14px 14px 10px !important;
}

.ti-panel-h strong {
  font-size: 16px !important;
  font-weight: 900 !important;
}

.ti-tabs {
  border-radius: 14px !important;
  padding: 4px !important;
  background: rgba(255,255,255,.045) !important;
}

.ti-tabs button {
  border-radius: 11px !important;
  font-weight: 800 !important;
}

.ti-tabs button.on {
  background: linear-gradient(180deg, rgba(75,216,255,.19), rgba(75,216,255,.055)) !important;
}

.ti-sgrid {
  gap: 8px !important;
}

.ti-sensor {
  min-height: 56px;
  border-radius: 14px !important;
}

.ti-sensor:hover,
.ti-part:hover,
.ti-event.linked:hover {
  background: linear-gradient(145deg, rgba(75,216,255,.12), rgba(255,255,255,.025)) !important;
  border-color: rgba(75,216,255,.35) !important;
}

.ti-sensor.sev-warn {
  border-color: rgba(255,194,75,.42) !important;
}

.ti-sensor.sev-fault {
  border-color: rgba(255,82,127,.48) !important;
  background: linear-gradient(145deg, rgba(255,82,127,.14), rgba(255,255,255,.018)) !important;
}

/* Bottom driveline */
.ti-driveline {
  border-radius: 999px !important;
  padding: 8px 16px !important;
  gap: 13px !important;
}

.ti-dl-node,
.ti-dl-grid {
  min-height: 34px;
  border-radius: 999px !important;
  background: rgba(7,17,33,.90) !important;
}

.ti-dl-node.sel {
  color: #fff !important;
  border-color: rgba(75,216,255,.55) !important;
  box-shadow: 0 0 24px rgba(75,216,255,.17), inset 0 1px 0 rgba(255,255,255,.12) !important;
}

/* Reduce heavy bounding-box feel */
.ti-stage line,
.ti-stage path {
  opacity: .92;
}

/* Responsive */
@media (max-width: 1024px) {
  .ti-rail {
    width: auto !important;
    left: 12px !important;
    right: 12px !important;
    top: auto !important;
    bottom: 78px !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr;
  }

  .ti-panel {
    width: min(360px, calc(100vw - 24px)) !important;
    min-width: 0 !important;
  }
}

@media (max-width: 640px) {
  .ti-header {
    min-height: 62px !important;
  }

  .ti-clock {
    display: none !important;
  }

  .ti-rail {
    grid-template-columns: 1fr !important;
    max-height: 40vh;
    overflow-y: auto;
  }

  .ti-panel {
    left: 10px !important;
    right: 10px !important;
    width: auto !important;
    height: 48vh !important;
    top: auto !important;
    bottom: 68px !important;
  }

  .ti-driveline {
    max-width: calc(100% - 20px) !important;
  }
}

/* Production Turbine Inspection v2 final layout polish */
.ti-card-h strong {
  white-space: nowrap !important;
  font-size: 12.5px !important;
}

.ti-card-h em {
  white-space: nowrap !important;
}

.ti-card-h {
  gap: 9px !important;
}

.ti-live {
  padding: 3px 8px !important;
}

.ti-rail {
  width: 282px !important;
}

.ti-panel {
  width: min(370px, 27vw) !important;
}

.ti-stage {
  background:
    radial-gradient(780px 520px at 52% 42%, rgba(75,216,255,.11), transparent 66%),
    linear-gradient(180deg, rgba(4,13,28,.90), rgba(1,6,15,.97)) !important;
}

.ti-driveline {
  bottom: 15px !important;
}

.ti-dl-node.sel,
.ti-sw-btn.on {
  box-shadow:
    0 0 22px rgba(75,216,255,.18),
    inset 0 1px 0 rgba(255,255,255,.14) !important;
}