/* EXITE — premium live view (24.09.2026). Scoped to #exiteView; nothing here
   touches other venues. Only transform/opacity animate; video is the only motion. */
body.exite-on .hero,body.exite-on .stats,body.exite-on .main{display:none!important}
body.exite-on #exiteView{display:flex}
body:not(.exite-on) #xvHdrStrat,body:not(.exite-on) #xvHdrSet,body:not(.exite-on) #xvHdrBal{display:none!important}
#exiteView[hidden]{display:none!important}
#exiteView{flex-direction:column;gap:20px;margin-bottom:28px;
  --e:#3df0b0;--ex:#86ffd6;--g:#e3c489;--ink:#eef7f3;--soft:#9fb6ad;--mono:"JetBrains Mono",monospace}
#exiteView .xv-mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
#exiteView .xv-soft{color:var(--soft)}#exiteView .xv-emer{color:var(--ex)}
#exiteView .xv-lab{font:500 10.5px/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--soft)}
#exiteView .xv-between{display:flex;justify-content:space-between;align-items:center}

/* hero: rendered scene in a titanium bezel */
#exiteView .xv-hero{position:relative;height:430px;border-radius:28px;overflow:hidden;flex-shrink:0;
  border:1px solid transparent;
  background:linear-gradient(#000,#000) padding-box,
    linear-gradient(160deg,rgba(220,255,240,.5),rgba(110,180,155,.10) 30%,rgba(40,60,56,.2) 60%,rgba(236,206,150,.4)) border-box;
  box-shadow:0 0 0 6px rgba(150,200,180,.025),0 0 0 7px rgba(150,200,180,.05),0 60px 120px -60px rgba(61,240,176,.4)}
#exiteView .xv-hero::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  box-shadow:inset 0 0 120px rgba(0,0,0,.75),inset 0 1px 0 rgba(255,255,255,.08)}
#exiteView .xv-still,#exiteView .xv-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity .6s ease}
#exiteView .xv-video{opacity:0}
#exiteView.xv-live .xv-video.xv-ready{opacity:1}
#exiteView .xv-shade{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .6s;
  background:linear-gradient(90deg,rgba(2,4,5,.92),rgba(2,4,5,.25) 26%,transparent 38%,transparent 62%,rgba(2,4,5,.25) 74%,rgba(2,4,5,.92))}
#exiteView.xv-live .xv-shade{opacity:1}
#exiteView .xv-cm{position:absolute;width:14px;height:14px;border:0 solid rgba(200,255,235,.45);z-index:3;pointer-events:none}
#exiteView .xv-cm.tl{left:16px;top:16px;border-top-width:1px;border-left-width:1px}
#exiteView .xv-cm.tr{right:16px;top:16px;border-top-width:1px;border-right-width:1px}
#exiteView .xv-cm.bl{left:16px;bottom:16px;border-bottom-width:1px;border-left-width:1px}
#exiteView .xv-cm.br{right:16px;bottom:16px;border-bottom-width:1px;border-right-width:1px}
#exiteView .xv-top{position:absolute;left:34px;right:34px;top:28px;display:flex;justify-content:space-between;align-items:center;z-index:2}
#exiteView .xv-state{display:inline-flex;align-items:center;gap:9px;height:34px;padding:0 14px;border-radius:999px;
  background:rgba(2,6,7,.72);border:1px solid rgba(110,180,155,.25);font:600 12.5px/1 var(--mono);color:var(--soft)}
#exiteView .xv-state.on{border-color:rgba(61,240,176,.4);color:var(--ex)}
#exiteView .xv-state.aside{border-color:rgba(227,196,137,.4);color:#f1ddae}
#exiteView .xv-dot{width:7px;height:7px;border-radius:50%;background:currentColor;box-shadow:0 0 10px currentColor}
#exiteView .xv-state.on .xv-dot{animation:xvBlink 1.8s ease-in-out infinite}
@keyframes xvBlink{50%{opacity:.35}}
#exiteView .xv-standby{position:absolute;left:0;right:0;bottom:48px;display:flex;flex-direction:column;align-items:center;gap:16px;z-index:2;text-align:center;padding:0 24px}
#exiteView .xv-headline{font:600 38px/1.15 var(--disp,"Clash Display",sans-serif);color:var(--ink)}
#exiteView.xv-live .xv-standby{display:none}
#exiteView .xv-metric{position:absolute;bottom:34px;display:none;flex-direction:column;gap:14px;z-index:2}
#exiteView.xv-live .xv-metric{display:flex}
#exiteView .xv-left{left:38px;max-width:46%}#exiteView .xv-right{right:38px;align-items:flex-end;max-width:40%}
#exiteView .xv-big{white-space:nowrap}
#exiteView .xv-gatelist{display:none}
#exiteView .xv-big{font:300 84px/.95 var(--mono);letter-spacing:-.045em;font-variant-numeric:tabular-nums;
  background:linear-gradient(180deg,#fff 30%,#b9e6d6);-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 6px 26px rgba(61,240,176,.22))}
#exiteView .xv-big small{font-size:38px;-webkit-text-fill-color:#8fb3a7;letter-spacing:-.02em}

/* premium cards: toned glass, gradient hairline, bevel light, grain */
#exiteView .xv-card,#exiteView .xv-gate{position:relative;border-radius:22px;padding:20px 22px;border:1px solid transparent;overflow:hidden;
  background:url(../exite/grain.png),url(../exite/brushed.png),
    linear-gradient(170deg,rgba(24,36,33,.96),rgba(7,11,11,.98) 58%,rgba(9,13,12,.98)) padding-box,
    linear-gradient(140deg,rgba(160,255,222,.46),rgba(110,180,155,.08) 34%,rgba(110,180,155,.04) 66%,rgba(236,206,150,.38)) border-box;
  background-size:128px 128px,512px 128px,auto,auto;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.09),inset 0 -1px 0 rgba(0,0,0,.6),0 30px 60px -38px rgba(0,0,0,.95),0 60px 90px -70px rgba(61,240,176,.22)}
#exiteView .xv-card::before,#exiteView .xv-gate::before{content:"";position:absolute;left:18px;right:18px;top:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(210,255,238,.55),transparent)}
#exiteView .xv-val{font:300 32px/1 var(--mono);letter-spacing:-.035em;margin-top:14px;font-variant-numeric:tabular-nums;
  background:linear-gradient(180deg,#fff 20%,#bfe7d9);-webkit-background-clip:text;background-clip:text;color:transparent}
#exiteView .xv-val.neg{background-image:linear-gradient(180deg,#ffd9d3 20%,#ff8d7e)}
#exiteView .xv-sub{font:500 11.5px/1.35 var(--mono);color:#8aa39a;margin-top:8px}
#exiteView .xv-spark{display:block;width:100%;height:34px;margin-top:12px}
#exiteView .xv-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr)) minmax(0,1.9fr);gap:16px}
#exiteView .xv-gatehead{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:-6px}
#exiteView .xv-gates{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px}
#exiteView .xv-gate{padding:16px 16px 14px;display:flex;flex-direction:column;align-items:center;gap:6px}
#exiteView .xv-gate .xv-lab{align-self:stretch;display:flex;justify-content:space-between;align-items:center}
#exiteView .xv-ok{width:18px;height:18px;border-radius:50%;display:grid;place-items:center;font:700 11px/1 var(--mono)}
#exiteView .xv-ok.pass{background:rgba(61,240,176,.14);color:var(--ex);box-shadow:0 0 12px rgba(61,240,176,.35)}
#exiteView .xv-ok.fail{background:rgba(227,196,137,.14);color:#f1ddae}
#exiteView .xv-ok.none{background:rgba(110,180,155,.08);color:var(--soft)}
#exiteView .xv-gate svg{filter:drop-shadow(0 0 10px rgba(61,240,176,.18))}
#exiteView .xv-gv{font:400 21px/1 var(--mono);color:var(--ink);margin-top:-30px;font-variant-numeric:tabular-nums}
#exiteView .xv-gt{font:500 10.5px/1 var(--mono);color:#8aa39a}
#exiteView .xv-fill{display:grid;grid-template-columns:4px 62px 40px minmax(0,1fr) 62px;gap:10px;align-items:center;padding:8px 0;
  font:500 12.5px/1 var(--mono);color:#dcebe5;white-space:nowrap}
#exiteView .xv-fill i{display:block;width:4px;height:18px;border-radius:3px}
#exiteView .xv-fill .b{color:var(--e)}#exiteView .xv-fill .a{color:var(--g)}
#exiteView .xv-control{display:flex;align-items:center;gap:16px;padding:14px 16px}
#exiteView .xv-grow{flex-grow:1;padding-left:6px}
#exiteView .xv-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:50px;border-radius:14px;
  font:600 14px/1 Manrope,var(--sans,sans-serif);letter-spacing:.02em;text-decoration:none;cursor:pointer;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),inset 0 -1px 0 rgba(0,0,0,.5)}
#exiteView .xv-btn svg{width:17px;height:17px}
#exiteView .xv-set{width:300px;border:1px solid rgba(227,196,137,.42);background:linear-gradient(180deg,rgba(227,196,137,.13),rgba(227,196,137,.03));color:#f1ddae}
#exiteView .xv-go{width:240px;border:0;background:linear-gradient(180deg,#5cf6c0,#20c992);color:#03130d;box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 18px 40px -16px rgba(61,240,176,.7)}
#exiteView .xv-go .xv-glyph{width:0;height:0;border-left:9px solid currentColor;border-top:6px solid transparent;border-bottom:6px solid transparent}
#exiteView .xv-go.stop{border:1px solid rgba(255,125,109,.38);background:linear-gradient(180deg,rgba(255,125,109,.10),rgba(255,125,109,.03));color:#ffc2b8;box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 16px 30px -20px rgba(255,125,109,.45)}
#exiteView .xv-go.stop .xv-glyph{width:10px;height:10px;border:0;border-radius:2px;background:#ff8d7e;box-shadow:0 0 10px rgba(255,125,109,.6)}
#exiteView .xv-go[disabled]{opacity:.55;cursor:default}

@media (max-width:760px){
  #exiteView,#exiteView *{min-width:0;box-sizing:border-box}
  #exiteView{max-width:100%;overflow:hidden}
  #exiteView .xv-state{height:28px;padding:0 10px;font-size:10.5px;gap:7px}
  #exiteView #xvTimer{display:none}
  #exiteView .xv-poscard{grid-column:1/-1}
  #exiteView .xv-gatehead{flex-direction:column;align-items:flex-start;gap:6px;margin-bottom:0}
  #exiteView .xv-gatehead .xv-lab{font-size:9px;letter-spacing:.12em}
  #exiteView #xvGateSum{font-size:11px}
  #exiteView .xv-gates{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:8px!important}
  #exiteView .xv-gate .xv-lab{white-space:nowrap;overflow:hidden}
  #exiteView .xv-fill{grid-template-columns:4px 56px 34px minmax(0,1fr);gap:8px;font-size:11px}
  #exiteView .xv-fill span:last-child{display:none}
  #exiteView .xv-val{font-size:24px}
  #exiteView .xv-grow .xv-sub{font-size:10.5px}

  #exiteView{gap:14px}
  #exiteView .xv-hero{height:250px;border-radius:22px}
  #exiteView .xv-top{left:14px;right:14px;top:14px}
  #exiteView .xv-headline{font-size:22px}
  #exiteView .xv-standby{bottom:22px;gap:10px}
  #exiteView .xv-metric{position:static;display:none}
  #exiteView.xv-live .xv-metric{display:none}
  #exiteView .xv-gates{grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}
  #exiteView .xv-gate{padding:10px 4px 8px;border-radius:14px}
  #exiteView .xv-gate svg{width:64px;height:34px}
  #exiteView .xv-gate .xv-lab{font-size:8px;letter-spacing:.08em;justify-content:center}
  #exiteView .xv-gate .xv-ok{display:none}
  #exiteView .xv-gv{font-size:13px;margin-top:-16px}
  #exiteView .xv-gt{font-size:9px}
  #exiteView .xv-row{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  #exiteView .xv-fills{grid-column:1/-1}
  #exiteView .xv-card{padding:16px}
  #exiteView .xv-control{flex-direction:column;align-items:stretch}
  #exiteView .xv-set,#exiteView .xv-go{width:100%;height:52px}
  #exiteView .xv-mobile-metrics{display:grid!important}
}
#exiteView .xv-mobile-metrics{display:none;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
#exiteView .xv-mobile-metrics .xv-val{font-size:clamp(20px,7vw,30px);white-space:nowrap}
@media (prefers-reduced-motion:reduce){#exiteView .xv-state.on .xv-dot{animation:none}}

/* ── phone: its own composition, numbers always fit ── */
@media (max-width:760px){
  #exiteView .xv-hero{height:272px}
  #exiteView .xv-gates{display:none!important}
  #exiteView .xv-gatelist{display:block;padding:6px 16px}
  #exiteView .xv-grow .xv-lab{display:none}
  #exiteView .xv-mobile-metrics{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px}
  #exiteView .xv-mvol{grid-column:1/-1;padding:18px 18px 16px}
  #exiteView .xv-mvol .xv-val{font-size:46px;letter-spacing:-.045em;margin-top:12px}
  #exiteView .xv-mobile-metrics .xv-card:not(.xv-mvol) .xv-val{font-size:28px}
  #exiteView .xv-mobile-metrics .xv-card:not(.xv-mvol){padding:14px 16px}
  #exiteView .xv-row{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:10px}
  #exiteView .xv-row>.xv-card:not(.xv-fills){padding:14px 12px}
  #exiteView .xv-row>.xv-card:not(.xv-fills) .xv-lab{font-size:9px;letter-spacing:.12em}
  #exiteView .xv-row>.xv-card:not(.xv-fills) .xv-val{font-size:20px;margin-top:10px}
  #exiteView .xv-row>.xv-card:not(.xv-fills) .xv-sub{font-size:9.5px}
  #exiteView .xv-poscard{grid-column:auto!important}
  #exiteView .xv-spark{height:24px;margin-top:8px}
  #exiteView .xv-fills{grid-column:1/-1}
  #exiteView .xv-gl{display:grid;grid-template-columns:18px minmax(0,1fr) auto;gap:10px;align-items:center;padding:11px 0;border-top:1px solid rgba(110,180,155,.08)}
  #exiteView .xv-gl:first-child{border-top:0}
  #exiteView .xv-gl .xv-ok{width:18px;height:18px}
  #exiteView .xv-gl b{display:block;font:500 11px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:#cfe3db}
  #exiteView .xv-gl .xv-bar{position:relative;height:4px;border-radius:4px;background:rgba(110,180,155,.14);margin-top:8px}
  #exiteView .xv-gl .xv-bar i{position:absolute;left:0;top:0;bottom:0;border-radius:4px;background:linear-gradient(90deg,#3df0b0,#b8ffe6)}
  #exiteView .xv-gl .xv-bar u{position:absolute;top:-3px;width:2px;height:10px;border-radius:2px;background:#e3c489}
  #exiteView .xv-gl .xv-gnum{font:400 17px/1 var(--mono);color:#f4fbf8;text-align:right;white-space:nowrap}
  #exiteView .xv-gl .xv-gnum small{display:block;font-size:9.5px;color:#8aa39a;margin-top:5px}
}
body.exite-on #xvHdrSet{display:none}
@media (min-width:761px){body.exite-on #xvHdrSet{display:inline-flex}}
