.state-aura{
  position:fixed;inset:-18%;z-index:0;pointer-events:none;opacity:.18;
  background:
    radial-gradient(circle at 62% 18%,rgba(127,169,255,.12),transparent 31%),
    radial-gradient(circle at 22% 70%,rgba(249,64,6,.09),transparent 34%);
  filter:blur(28px);transition:background 700ms var(--ease),opacity 700ms var(--ease),transform 900ms var(--ease)
}
body[data-op-state="critical"] .state-aura{
  opacity:.34;transform:scale(1.035);
  background:
    radial-gradient(circle at 75% 18%,rgba(255,120,111,.27),transparent 29%),
    radial-gradient(circle at 28% 74%,rgba(249,64,6,.22),transparent 37%)
}
body[data-op-state="attention"] .state-aura{
  opacity:.28;background:
    radial-gradient(circle at 70% 20%,rgba(249,64,6,.2),transparent 31%),
    radial-gradient(circle at 25% 72%,rgba(127,169,255,.13),transparent 38%)
}
body[data-op-state="success"] .state-aura{
  opacity:.26;background:
    radial-gradient(circle at 70% 18%,rgba(102,221,162,.2),transparent 31%),
    radial-gradient(circle at 23% 72%,rgba(127,169,255,.12),transparent 38%)
}
body[data-op-state="live"] .state-aura{
  opacity:.25;background:
    radial-gradient(circle at 69% 20%,rgba(127,169,255,.2),transparent 31%),
    radial-gradient(circle at 24% 72%,rgba(249,64,6,.12),transparent 38%)
}
.state-beacon{
  display:flex;align-items:center;gap:7px;height:31px;padding:0 10px;border-radius:999px;
  border:1px solid var(--line);background:var(--panel-soft);color:var(--text-soft);
  font-size:8px;font-weight:900;letter-spacing:.04em;white-space:nowrap;transition:var(--normal) var(--ease)
}
.state-beacon-dot{width:7px;height:7px;border-radius:50%;background:var(--success);box-shadow:0 0 12px rgba(102,221,162,.65);transition:var(--normal)}
body[data-op-state="critical"] .state-beacon{border-color:rgba(255,120,111,.3);color:var(--danger);background:rgba(255,120,111,.08)}
body[data-op-state="critical"] .state-beacon-dot{background:var(--danger);box-shadow:0 0 15px rgba(255,120,111,.72)}
body[data-op-state="attention"] .state-beacon{border-color:rgba(249,64,6,.3);color:var(--accent-2);background:rgba(249,64,6,.08)}
body[data-op-state="attention"] .state-beacon-dot{background:var(--accent);box-shadow:0 0 15px var(--glow)}
body[data-op-state="success"] .state-beacon{border-color:rgba(102,221,162,.27);color:var(--success);background:rgba(102,221,162,.08)}
body[data-op-state="live"] .state-beacon{border-color:rgba(127,169,255,.27);color:var(--info);background:rgba(127,169,255,.08)}
body[data-op-state="live"] .state-beacon-dot{background:var(--info);box-shadow:0 0 15px rgba(127,169,255,.65)}

.morph-ghost{
  position:fixed;z-index:120;pointer-events:none;overflow:hidden;
  border:1px solid var(--line-strong);background:color-mix(in srgb,var(--panel-strong) 94%,transparent);
  backdrop-filter:blur(22px);box-shadow:0 28px 90px rgba(0,0,0,.42);
  color:var(--text);padding:14px 16px;display:flex;align-items:center;gap:12px
}
.morph-ghost-mark{width:34px;height:34px;border-radius:11px;display:grid;place-items:center;background:rgba(249,64,6,.12);color:var(--accent-2);font-size:9px;font-weight:900;flex:0 0 34px}
.morph-ghost strong{font-size:10px}.morph-ghost span{display:block;font-size:8px;color:var(--text-faint);margin-top:4px}
::view-transition-group(request-number),::view-transition-group(request-context){animation-duration:460ms;animation-timing-function:var(--spring)}
::view-transition-old(request-number),::view-transition-old(request-context){animation:spatialOld 460ms var(--ease) both}
::view-transition-new(request-number),::view-transition-new(request-context){animation:spatialNew 460ms var(--spring) both}
@keyframes spatialOld{to{opacity:0;filter:blur(6px);transform:scale(.92)}}
@keyframes spatialNew{from{opacity:0;filter:blur(6px);transform:translateY(12px) scale(.96)}}

.map-scrubber{
  position:relative;left:auto;right:auto;bottom:auto;z-index:2;
  margin-top:12px;padding:12px 14px 10px;border-radius:18px;border:1px solid var(--line);
  background:linear-gradient(145deg,color-mix(in srgb,var(--panel-strong) 84%,transparent),var(--panel-soft));
  backdrop-filter:blur(18px);box-shadow:0 14px 34px rgba(0,0,0,.14);
  overflow:hidden
}
.map-scrubber::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,rgba(249,64,6,.06),transparent 35%,rgba(127,169,255,.055));
}
.map-scrubber>*{position:relative;z-index:1}
.scrubber-head{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.scrubber-head::before{
  content:"";width:7px;height:7px;border-radius:50%;background:var(--accent);
  box-shadow:0 0 14px var(--glow)
}
.scrubber-time{font-size:11px;font-weight:900;color:var(--text);min-width:38px}
.scrubber-mode{font-size:8px;color:var(--text-faint);letter-spacing:.02em}
.scrubber-live{
  margin-left:auto;border:1px solid var(--line);background:var(--panel-soft);color:var(--text-soft);
  padding:6px 9px;border-radius:999px;font-size:8px;font-weight:900
}
.scrubber-live.is-live{color:var(--accent-2);border-color:rgba(249,64,6,.25);background:rgba(249,64,6,.08)}
.time-range{width:100%;height:15px;appearance:none;background:transparent;cursor:pointer}
.time-range::-webkit-slider-runnable-track{height:3px;border-radius:999px;background:linear-gradient(90deg,rgba(249,64,6,.78),rgba(127,169,255,.45))}
.time-range::-webkit-slider-thumb{appearance:none;width:15px;height:15px;border-radius:50%;margin-top:-6px;background:var(--accent);border:3px solid var(--panel-strong);box-shadow:0 0 0 1px rgba(255,255,255,.18),0 0 18px var(--glow)}
.time-range::-moz-range-track{height:3px;border-radius:999px;background:linear-gradient(90deg,rgba(249,64,6,.78),rgba(127,169,255,.45))}
.time-range::-moz-range-thumb{width:12px;height:12px;border-radius:50%;background:var(--accent);border:3px solid var(--panel-strong)}
.scrubber-scale{display:flex;justify-content:space-between;font-size:7px;color:var(--text-faint);margin-top:2px}
.vehicle{transition:left 620ms var(--spring),top 620ms var(--spring),transform 300ms var(--spring),opacity 300ms var(--ease)}
.map-node{transition:opacity 350ms var(--ease),filter 350ms var(--ease)}
.map-node.time-muted{opacity:.28;filter:saturate(.35)}
.route-path{transition:opacity 400ms var(--ease),stroke-width 400ms var(--ease)}
.map-time-chip{
  position:absolute;left:17px;top:35px;z-index:5;padding:6px 8px;border-radius:999px;
  border:1px solid var(--line);background:color-mix(in srgb,var(--panel-strong) 78%,transparent);
  color:var(--text-faint);font-size:8px;font-weight:850;backdrop-filter:blur(12px)
}

.motion-profile{min-width:190px}
html[data-motion="standard"]{--spring:cubic-bezier(.22,.8,.24,1);--slow:360ms}
html[data-motion="standard"] .ambient::before,html[data-motion="standard"] .ambient::after{animation-duration:28s}
html[data-motion="minimal"]{--fast:90ms;--normal:120ms;--slow:150ms}
html[data-motion="minimal"] .ambient::before,html[data-motion="minimal"] .ambient::after,
html[data-motion="minimal"] .route-path,html[data-motion="minimal"] .vehicle,
html[data-motion="minimal"] .map::after,html[data-motion="minimal"] .wave span,
html[data-motion="minimal"] .orbit::before,html[data-motion="minimal"] .attention-frame::before{animation:none!important}
html[data-motion="minimal"] #flowField{opacity:.08}
html[data-motion="minimal"] .surface:hover,html[data-motion="minimal"] .resource-card:hover,
html[data-motion="minimal"] .quote-card:hover,html[data-motion="minimal"] .inspection-card:hover{transform:none}

@media(max-width:980px){
  .state-beacon{display:none}
  .map-legend{bottom:10px}
}
@media(max-width:700px){
  .scrubber-scale span:nth-child(2),.scrubber-scale span:nth-child(4){display:none}
}
@media(prefers-reduced-motion:reduce){
  #flowField{opacity:.08}
  .state-aura{transition:none}
}