/* =========================================================
   DFS Hero · Video stage    
   ========================================================= */
.dfs-canvas-shell.dfsv{
  --dfsv-glass:rgba(255,255,255,.14);
  --dfsv-stroke:rgba(255,255,255,.38);
  --dfsv-ease:cubic-bezier(.22,.61,.36,1);
  position:relative;width:100%;aspect-ratio:16/10.5;min-height:360px;
  border-radius:26px;overflow:hidden;isolation:isolate;
  background:#05080f;
  border:1px solid rgba(255,255,255,.9);
  box-shadow:
    0 1px 2px rgba(15,23,42,.05),
    0 18px 40px -18px rgba(30,64,175,.35),
    0 50px 90px -40px rgba(14,116,144,.45),
    inset 0 0 0 1px rgba(255,255,255,.08);
}
/* outer glass rim */
.dfs-canvas-shell.dfsv::before{
  content:"";position:absolute;inset:0;z-index:6;border-radius:inherit;pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.18),inset 0 1px 0 rgba(255,255,255,.35),inset 0 -40px 60px -40px rgba(56,189,248,.25);
}
/* cursor light */
.dfs-canvas-shell.dfsv::after{
  content:"";position:absolute;inset:0;z-index:2;pointer-events:none;opacity:0;transition:opacity .5s;
  background:radial-gradient(420px circle at var(--lx,50%) var(--ly,50%),rgba(125,211,252,.16),transparent 60%);
  mix-blend-mode:screen;
}
.dfs-canvas-shell.dfsv:hover::after{opacity:1}

.dfsv-video{
  position:absolute;inset:-12px;width:calc(100% + 24px);height:calc(100% + 24px);z-index:0;
  object-fit:cover;display:block;
  transform:translate3d(var(--px,0px),var(--py,0px),0) scale(1.02);
  transition:transform .8s var(--dfsv-ease),filter .6s;
  filter:saturate(1.08) contrast(1.04);
}
.dfs-canvas-shell.dfsv.is-jump .dfsv-video{animation:dfsv-jump .7s var(--dfsv-ease)}
@keyframes dfsv-jump{0%{filter:saturate(1.08) brightness(1.6) blur(2px)}100%{filter:saturate(1.08) contrast(1.04)}}

.dfs-canvas-shell.dfsv #vidawareCanvas{
  position:absolute !important;inset:0 !important;width:100% !important;height:100% !important;z-index:3;display:block;
  background:transparent !important;
}
/* soft vignette to merge into white page */
.dfsv-hud{position:absolute;inset:0;z-index:2;pointer-events:none;
  background:
    radial-gradient(120% 90% at 50% 45%,transparent 55%,rgba(2,6,23,.55) 100%),
    linear-gradient(180deg,rgba(2,6,23,.25),transparent 22%,transparent 70%,rgba(2,6,23,.55));
}
.dfsv-hud i{position:absolute;width:18px;height:18px;border:1.5px solid rgba(186,230,253,.7)}
.dfsv-hud i.tl{left:14px;top:14px;border-right:0;border-bottom:0;border-radius:6px 0 0 0}
.dfsv-hud i.tr{right:14px;top:14px;border-left:0;border-bottom:0;border-radius:0 6px 0 0}
.dfsv-hud i.bl{left:14px;bottom:108px;border-right:0;border-top:0;border-radius:0 0 0 6px}
.dfsv-hud i.br{right:14px;bottom:108px;border-left:0;border-top:0;border-radius:0 0 6px 0}
.dfsv-scan{position:absolute;left:0;right:0;height:26%;top:-26%;
  background:linear-gradient(180deg,transparent,rgba(125,211,252,.06) 70%,rgba(186,230,253,.22) 98%,transparent);
  animation:dfsv-scan 6s linear infinite}
@keyframes dfsv-scan{to{top:100%}}
.dfsv-hud-phase{
  position:absolute;right:22px;top:22px;font:600 10px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.14em;
  color:rgba(186,230,253,.85);text-shadow:0 0 8px rgba(56,189,248,.6)}
.dfs-canvas-shell.dfsv.is-focus .dfsv-hud-phase::after{content:" · FOCUS";color:#fde68a}

/* title & live badge */
.dfs-canvas-shell.dfsv .canvas-title{
  position:absolute;left:18px;top:18px;right:auto;bottom:auto;z-index:5;max-width:min(60%,360px);margin:0;
  padding:12px 16px 12px 14px;border-radius:16px;color:#fff;
  background:linear-gradient(135deg,rgba(255,255,255,.2),rgba(255,255,255,.07));
  border:1px solid var(--dfsv-stroke);
  box-shadow:0 12px 30px -14px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.35);
  backdrop-filter:blur(16px) saturate(1.4);-webkit-backdrop-filter:blur(16px) saturate(1.4);
  opacity:0;transform:translateY(-6px);transition:opacity .45s var(--dfsv-ease),transform .55s var(--dfsv-ease);
}
.dfs-canvas-shell.dfsv .canvas-title.show{opacity:1;transform:none}
.dfs-canvas-shell.dfsv .canvas-title h4{display:flex;align-items:center;gap:9px;margin:0;font-size:16px;font-weight:700;color:#fff;letter-spacing:.02em}
.dfs-canvas-shell.dfsv .canvas-title h4 i{
  width:28px;height:28px;display:grid;place-items:center;border-radius:9px;font-size:12px;color:#fff;
  background:linear-gradient(135deg,#2563eb,#22d3ee);box-shadow:0 6px 14px -6px rgba(34,211,238,.8)}
.dfs-canvas-shell.dfsv .canvas-title p{margin:6px 0 0;font-size:12.5px;line-height:1.55;color:rgba(226,232,240,.92)}

.dfs-canvas-shell.dfsv .dfs-live-badge{
  position:absolute;right:14px;bottom:62px;left:auto;top:auto;z-index:5;display:flex;flex-direction:row;gap:6px;margin:0;padding:0;
  background:none;border:0;box-shadow:none;
}
.dfs-canvas-shell.dfsv .dfs-live-badge .badge-item{
  display:flex;align-items:center;gap:8px;min-width:0;padding:6px 11px 6px 7px;border-radius:13px;color:#fff;
  background:linear-gradient(135deg,rgba(255,255,255,.18),rgba(255,255,255,.06));
  border:1px solid var(--dfsv-stroke);box-shadow:0 10px 24px -14px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.3);
  backdrop-filter:blur(14px) saturate(1.4);-webkit-backdrop-filter:blur(14px) saturate(1.4);
}
.dfs-canvas-shell.dfsv .dfs-live-badge .badge-item > i{width:26px;height:26px;display:grid;place-items:center;border-radius:8px;font-size:11px;color:#7dd3fc;background:rgba(56,189,248,.16)}
.dfs-canvas-shell.dfsv .dfs-live-badge .label{display:block;font-size:10.5px;color:rgba(203,213,225,.9);letter-spacing:.04em}
.dfs-canvas-shell.dfsv .dfs-live-badge .value{font-size:15px;font-weight:700;color:#fff;font-variant-numeric:tabular-nums}
.dfs-canvas-shell.dfsv .dfs-live-badge .unit{font-size:10.5px;color:rgba(186,230,253,.85);margin-left:3px;font-weight:500}

/* tooltip */
.dfsv-tip{
  position:absolute;left:0;top:0;z-index:7;width:240px;padding:10px 12px;border-radius:13px;pointer-events:none;
  background:rgba(255,255,255,.9);color:#0f172a;border:1px solid rgba(255,255,255,.95);
  box-shadow:0 18px 36px -14px rgba(2,6,23,.6);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  opacity:0;transition:opacity .25s;
}
.dfsv-tip.is-show{opacity:1}
.dfsv-tip b{display:block;font-size:12.5px;color:#1d4ed8;margin-bottom:2px}
.dfsv-tip span{display:block;font-size:12px;line-height:1.55;color:#334155}

/* control bar */
.dfsv-bar{
  position:absolute;left:14px;right:14px;bottom:12px;z-index:5;display:flex;align-items:center;gap:10px;
  padding:7px 10px;border-radius:16px;
  background:linear-gradient(135deg,rgba(255,255,255,.18),rgba(255,255,255,.07));
  border:1px solid var(--dfsv-stroke);box-shadow:0 12px 30px -14px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.3);
  backdrop-filter:blur(16px) saturate(1.4);-webkit-backdrop-filter:blur(16px) saturate(1.4);
}
.dfsv-bar button{font:inherit;border:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
.dfsv-play,.dfsv-speed{
  flex:none;height:30px;min-width:30px;padding:0 9px;border-radius:10px;color:#fff;font-size:12px;font-weight:700;
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.3) !important;transition:background .3s,transform .3s var(--dfsv-ease);
}
.dfsv-play:hover,.dfsv-speed:hover{background:rgba(255,255,255,.26);transform:translateY(-1px)}
.dfsv-speed.is-on{background:linear-gradient(135deg,#2563eb,#22d3ee);border-color:transparent !important}
.dfsv-track{position:relative;flex:1;height:30px;display:flex;border-radius:10px;overflow:hidden;cursor:pointer;touch-action:none;
  background:rgba(2,6,23,.35);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}
.dfsv-track:focus-visible{outline:2px solid #7dd3fc;outline-offset:2px}
.dfsv-fill{position:absolute;left:0;top:0;bottom:0;width:0;pointer-events:none;
  background:linear-gradient(90deg,rgba(37,99,235,.55),rgba(34,211,238,.55));box-shadow:4px 0 14px rgba(34,211,238,.6)}
.dfsv-fill::after{content:"";position:absolute;right:-1px;top:3px;bottom:3px;width:2px;border-radius:2px;background:#fff;box-shadow:0 0 8px #7dd3fc}
.dfsv-seg{
  position:relative;flex:1;display:flex;align-items:center;justify-content:center;gap:5px;min-width:0;padding:0 4px;
  background:transparent;color:rgba(226,232,240,.75);font-size:11px;font-weight:600;white-space:nowrap;
  border-right:1px solid rgba(255,255,255,.12) !important;transition:color .3s,background .3s;
}
.dfsv-seg:last-child{border-right:0 !important}
.dfsv-seg em{font-style:normal;font:700 9.5px ui-monospace,Menlo,monospace;color:rgba(125,211,252,.8)}
.dfsv-seg span{overflow:hidden;text-overflow:ellipsis}
.dfsv-seg:hover{background:rgba(255,255,255,.08);color:#fff}
.dfsv-seg.is-on{color:#fff;text-shadow:0 0 10px rgba(125,211,252,.8)}
.dfsv-seg.is-on em{color:#fde68a}
.dfsv-time{flex:none;min-width:52px;text-align:right;font:600 11px ui-monospace,SFMono-Regular,Menlo,monospace;color:rgba(186,230,253,.9)}

/* hero-tag sync (left buttons) */
.hero-tag{transition:transform .35s cubic-bezier(.22,.61,.36,1),box-shadow .35s,background .35s,color .3s}
.hero-tag.active{box-shadow:0 10px 22px -12px rgba(37,99,235,.6),0 0 0 3px rgba(147,197,253,.25)}

@media (max-width:900px){
  .dfs-canvas-shell.dfsv{aspect-ratio:16/12;border-radius:20px}
  .dfs-canvas-shell.dfsv .dfs-live-badge{left:12px;right:12px;justify-content:space-between}
  .dfs-canvas-shell.dfsv .dfs-live-badge .badge-item{min-width:0;flex:1;padding:6px 8px;gap:6px}
  .dfs-canvas-shell.dfsv .dfs-live-badge .badge-item > i{display:none}
  .dfsv-hud-phase,.dfsv-hud i.bl,.dfsv-hud i.br{display:none}
}
@media (max-width:560px){
  .dfs-canvas-shell.dfsv{aspect-ratio:auto;height:440px;min-height:0}
  .dfs-canvas-shell.dfsv .canvas-title{left:12px;top:12px;max-width:calc(100% - 24px);padding:10px 12px}
  .dfs-canvas-shell.dfsv .canvas-title h4{font-size:14px}
  .dfsv-seg span{display:none}
  .dfsv-time{display:none}
  .dfs-canvas-shell.dfsv .dfs-live-badge .value{font-size:13px}
  .dfs-canvas-shell.dfsv .dfs-live-badge .unit{display:none}
}
@media (prefers-reduced-motion:reduce){
  .dfsv-scan{display:none}
  .dfsv-video{transition:none}
}