/* ==========================================================================
   /en-vivo — page-specific design system.
   Loaded ONLY by en-vivo.html, after discovery.css. Every rule is scoped under
   body.ev, so search.html (which shares discovery.css / discovery.js) and every
   other route render exactly as before. The Ozzie banner (#ozzieBanner) is not
   restyled here on purpose.

   TOKENS
     color    bg #090B10 · surface #11151D · elevated #181D27 · line #272D38
              text #F5F7FA / #9BA5B4 / #667085 · brand #229FE8 · live #F43F5E
     radius   4 labels · 6 buttons/inputs/nav · 8 cards/panels · 12 media · 999 avatars
     space    4 / 8 / 12 / 16 / 24 / 32 / 48 / 64
     type     22/650 section · 16/600 card · 14/400 body · 13/400 support · 12/500 meta
     motion   150ms, no transforms except the button press
   ========================================================================== */

.ev{
  --ev-bg:#090B10;--ev-s1:#11151D;--ev-s2:#181D27;--ev-line:#272D38;--ev-line-2:#343B49;
  --ev-t1:#F5F7FA;--ev-t2:#9BA5B4;--ev-t3:#667085;
  --ev-blue:#229FE8;--ev-blue-ink:#06121E;--ev-live:#F43F5E;
  --r-xs:4px;--r-sm:6px;--r-md:8px;--r-lg:12px;--r-pill:999px;
  --s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:24px;--s6:32px;--s7:48px;--s8:64px;
  --ev-ease:150ms ease;
  --side-w:240px;--gap:24px;--pad:clamp(16px,2vw,24px);--head-h:56px;
  background:var(--ev-bg);color:var(--ev-t1);
  font-family:Inter,Geist,-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:14px;line-height:20px;font-feature-settings:"cv11","ss01";
}
.ev :focus-visible{outline:2px solid var(--ev-blue);outline-offset:2px;}
.ev .sr-only{position:absolute;}

/* ------------------------------ icons ------------------------------ */
.ev .ico{display:block;width:20px;height:20px;flex:0 0 auto;fill:none;stroke:currentColor;
  stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;}
.ev .ico.sm{width:16px;height:16px;}
.ev .ico.xs{width:14px;height:14px;}
.ev .vfy{display:inline-block;width:16px;height:16px;flex:0 0 auto;color:var(--ev-blue);}

/* ------------------------------ buttons ------------------------------ */
.ev .btn{min-height:40px;padding:0 var(--s4);border-radius:var(--r-sm);font-size:14px;font-weight:600;
  line-height:20px;gap:var(--s2);box-shadow:none;transition:background var(--ev-ease),border-color var(--ev-ease),transform 80ms;}
.ev .btn:active{transform:scale(.98);}
.ev .btn-grad{background:var(--ev-blue);color:var(--ev-blue-ink);}
.ev .btn-grad:hover{background:#3DAEF0;transform:none;box-shadow:none;}
.ev .btn-ghost{background:transparent;color:var(--ev-t1);border:1px solid var(--ev-line);}
.ev .btn-ghost:hover{background:var(--ev-s2);border-color:var(--ev-line-2);}
.ev .ic{width:40px;height:40px;border-radius:var(--r-sm);border:1px solid var(--ev-line);
  background:transparent;color:var(--ev-t1);transition:background var(--ev-ease);}
.ev .ic:hover{background:var(--ev-s2);}
.ev .ic svg{width:20px;height:20px;stroke-width:1.75;}
.ev .ic-user{background:var(--ev-blue);border-color:transparent;color:var(--ev-blue-ink);}
.ev .ic-user:hover{background:#3DAEF0;}

/* ------------------------------ header ------------------------------ */
.ev .top{position:sticky;top:0;z-index:80;height:var(--head-h);min-height:0;
  padding:0 max(var(--pad),calc((100% - 1600px)/2 + var(--pad)));
  background:var(--ev-bg);border-bottom:0;   /* no rule under the header (owner, 10-20) */
  display:grid;grid-template-columns:calc(var(--side-w) + var(--gap)) minmax(0,1fr) auto auto;
  align-items:center;gap:0;}
.ev .top>*{grid-row:1;}
.ev .top .sp{display:none;}
.ev .brand{grid-column:1;justify-self:start;padding-left:var(--s3);gap:var(--s2);}
.ev .brand img{width:28px;height:32px;}
.ev .wordmark .r1{font-size:14px;font-weight:700;letter-spacing:.02em;}
.ev .wordmark .r1 small{font-size:8px;font-weight:600;color:var(--ev-t2);letter-spacing:.1em;}
.ev .wordmark .r2{font-size:12px;font-weight:300;letter-spacing:.17em;}
.ev .beta{margin-left:var(--s1);align-self:center;background:var(--ev-s2);color:var(--ev-t2);
  border:0;border-radius:var(--r-xs);padding:2px 6px;font-size:10px;font-weight:600;letter-spacing:.08em;line-height:16px;}
.ev .search-launch{grid-column:2;justify-self:center;width:100%;max-width:520px;flex:none;min-height:40px;
  padding:0 var(--s3);gap:var(--s2);background:var(--ev-s1);border:1px solid var(--ev-line);border-radius:var(--r-sm);
  color:var(--ev-t2);font-size:14px;transition:border-color var(--ev-ease),background var(--ev-ease);}
.ev .search-launch:hover{border-color:var(--ev-line-2);background:var(--ev-s2);}
.ev .search-launch svg{width:16px;height:16px;stroke-width:1.75;}
.ev #loginBtn{grid-column:3;margin-left:var(--s4);}
.ev #joinBtn{grid-column:4;margin-left:var(--s2);}
.ev .acct{grid-column:3 / span 2;justify-self:end;}
.ev .acct-btn{background:var(--ev-blue);border-color:transparent;color:var(--ev-blue-ink);border-radius:var(--r-pill);}
.ev .acct-ini{font-size:13px;font-weight:700;}
.ev .acct-menu{background:var(--ev-s1);border:1px solid var(--ev-line);border-radius:var(--r-md);
  padding:var(--s3);box-shadow:0 16px 40px rgba(0,0,0,.5);}
.ev .acct-av{background:var(--ev-blue);color:var(--ev-blue-ink);}
.ev .acct-rule{background:var(--ev-line);}
.ev .acct-h{font-size:12px;font-weight:500;letter-spacing:.04em;color:var(--ev-t3);}
.ev .acct-row{border-radius:var(--r-sm);font-size:14px;}
.ev .acct-row:hover{background:var(--ev-s2);}
.ev .acct-row.danger{color:var(--ev-live);}

/* ------------------------------ shell + sidebar ------------------------------ */
.ev .shell{gap:var(--gap);padding:var(--s5) var(--pad) var(--s8);}
.ev .side{top:calc(var(--head-h) + var(--s5));padding:0;max-height:calc(100dvh - var(--head-h) - var(--s5) - var(--s4));
  overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--ev-line) transparent;}
.ev .side nav{gap:var(--s1);}
.ev .snav{height:40px;padding:0 var(--s3);gap:var(--s3);border-radius:var(--r-sm);font-size:14px;font-weight:500;
  color:var(--ev-t2);transition:background var(--ev-ease),color var(--ev-ease);}
.ev .snav .i{width:20px;height:20px;display:grid;place-items:center;font-size:0;}
.ev .snav .i svg{width:20px;height:20px;stroke-width:1.75;}
.ev .snav:hover{background:var(--ev-s1);color:var(--ev-t1);}
.ev .snav.on{background:var(--ev-s2);color:var(--ev-t1);box-shadow:none;}
.ev .snav.on .i{color:var(--ev-blue);}
.ev .snav.business-link{background:transparent;color:var(--ev-t2);margin-bottom:var(--s1);}
.ev .snav.business-link:hover{background:var(--ev-s1);color:var(--ev-t1);}
.ev .side .rule{height:1px;background:var(--ev-line);margin:var(--s3) 0;}
.ev .side h3{font-size:12px;font-weight:500;letter-spacing:.04em;text-transform:none;color:var(--ev-t3);
  padding:var(--s2) var(--s3) var(--s2);}
.ev .chan{height:48px;padding:0 var(--s3);gap:var(--s3);border-radius:var(--r-sm);transition:background var(--ev-ease);}
.ev .chan:hover{background:var(--ev-s1);}
.ev .chan img{width:32px;height:32px;border:0;background:var(--ev-s2);border-radius:var(--r-pill);}
.ev .chan .n,.ev .chan .s{display:block;}
.ev .chan .n{font-size:14px;font-weight:500;line-height:20px;color:var(--ev-t1);}
.ev .chan .s{font-size:12px;font-weight:500;line-height:16px;color:var(--ev-t3);}
.ev .chan .st{font-size:12px;font-weight:600;gap:6px;}
.ev .chan .st.live{color:var(--ev-t2);font-weight:500;gap:var(--s2);}
.ev .chan .st.soon{color:var(--ev-t3);}
.ev .chan .st.soon .dot{background:var(--ev-t3);animation:none;opacity:.6;}
.ev .chan .st .dot{width:6px;height:6px;background:var(--ev-live);}
.ev button.chan{width:100%;border:0;background:none;color:inherit;font:inherit;text-align:left;cursor:pointer;}
.ev .soon-cat img{filter:saturate(.85);}
.ev .soon-cat:hover img{filter:none;}
.ev .side-cta{margin:var(--s4) 0 0;}
.ev .side-cta .btn{width:100%;}
.ev .channel-skeleton{height:48px;margin:0 0 var(--s1);}

/* ------------------------------ sections ------------------------------ */
.ev .sec{margin:0 0 var(--s6);}
.ev #bizSec{scroll-margin-top:calc(var(--head-h) + var(--s4));}
.ev .sec-head{align-items:baseline;gap:var(--s3);margin:0 0 var(--s4);padding-inline:0;}
.ev .sec-head h2{font-size:22px;line-height:28px;font-weight:650;letter-spacing:-.015em;color:var(--ev-t1);}
.ev .sec-head h2 .accent{color:inherit;}
.ev .sec-head .count{font-size:12px;font-weight:500;color:var(--ev-t3);}
.ev .sec-head .link{font-size:13px;font-weight:500;color:var(--ev-t2);transition:color var(--ev-ease);}
.ev .sec-head .link:hover{color:var(--ev-blue);}
.ev .skeleton{background:var(--ev-s2);border-radius:var(--r-md);}

/* ------------------------------ featured stage ------------------------------ */
.ev .feature{gap:var(--s4);}
.ev .fmain{gap:var(--s4);}
.ev .hero,.ev .feature .hero{border:0;border-radius:var(--r-lg);background:#000;aspect-ratio:16/9;height:auto;}
.ev .hero .scrim,.ev .hero .where{display:none;}
.ev .hero .live-pill{top:var(--s3);left:var(--s3);}
.ev .live-pill,.ev .badge{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 var(--s2);
  border-radius:var(--r-xs);background:var(--ev-live);color:#fff;font-size:12px;font-weight:600;letter-spacing:.04em;line-height:24px;}
.ev .live-pill .dot,.ev .badge .dot{width:6px;height:6px;background:#fff;}
.ev .hero .live-pill.setup,.ev .badge.setup{background:rgba(9,11,16,.78);color:var(--ev-t2);border:0;
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);letter-spacing:.02em;}

.ev .feature .fmeta{padding:0;gap:var(--s4);align-items:center;}
.ev .fmeta .av{width:48px;height:48px;border:0;background:var(--ev-s2);}
.ev .fmeta .n{gap:var(--s2);font-size:22px;line-height:28px;font-weight:650;letter-spacing:-.015em;}
.ev .fmeta .d{font-size:14px;line-height:20px;color:var(--ev-t2);margin-top:var(--s1);-webkit-line-clamp:1;}
.ev .fmeta .tags{padding:0;}
.ev .fmeta .btn{align-self:center;}

/* shared metadata line: location + categories as plain text, not pills */
/* category pills: ONE row, always. The row is one pill tall with overflow
   hidden and wrap on, so a pill that doesn't fit drops out WHOLE instead of
   being cut in half — every card's row ends on a clean pill edge. */
.ev .tags{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2) 6px;height:24px;overflow:hidden;padding:0;margin-top:var(--s2);}
.ev .tag{display:inline-flex;align-items:center;gap:var(--s1);height:24px;padding:0 var(--s2);flex:0 0 auto;
  background:var(--ev-s2);border:1px solid var(--ev-line);border-radius:var(--r-sm);
  font-size:12px;line-height:16px;font-weight:500;color:var(--ev-t2);white-space:nowrap;}
.ev .tag.loc .ico{display:block;width:12px;height:12px;color:var(--ev-t3);}

/* ------------------------------ chat ------------------------------ */
.ev .fchat-slot{display:none;}
@media(min-width:1180px){
  .ev .feature{grid-template-columns:minmax(0,1fr) 340px;}
  .ev .fchat-slot{display:block;}
}
/* Glass chat: a frosted pane over two soft brand lights. The lights sit
   BEHIND the pane inside the slot, so backdrop-filter has colour to blur —
   glass over a flat background just reads as grey. */
.ev .fchat-slot{isolation:isolate;}
.ev .fchat-glow{position:absolute;inset:0;z-index:-1;pointer-events:none;}
.ev .fchat-glow i{position:absolute;border-radius:50%;filter:blur(48px);}
.ev .fchat-glow i:first-child{width:240px;height:240px;top:16px;right:-8px;background:rgba(22,64,170,.62);}
.ev .fchat-glow i:last-child{width:200px;height:200px;bottom:64px;left:-8px;background:rgba(14,42,110,.7);}
.ev .fchat,.ev .fchat.glass{
  background:linear-gradient(160deg,rgba(255,255,255,.09),rgba(255,255,255,.025));
  border:1px solid rgba(255,255,255,.13);border-radius:var(--r-md);
  box-shadow:0 16px 40px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.16);
  backdrop-filter:blur(24px) saturate(170%);-webkit-backdrop-filter:blur(24px) saturate(170%);}
.ev .fchat-head{height:48px;padding:0 var(--s4);gap:var(--s2);border-bottom:1px solid rgba(255,255,255,.1);
  font-size:14px;font-weight:600;color:var(--ev-t1);}
.ev .fchat-head .ico{color:var(--ev-t2);}
.ev .fchat-head .demo-tag{margin-left:auto;font-size:11px;font-weight:600;letter-spacing:.06em;line-height:16px;
  padding:2px 6px;border-radius:var(--r-xs);color:var(--ev-t2);background:rgba(255,255,255,.08);border:0;}

/* the green "on air" light — chat header and live channels in the sidebar */
.ev .live-light{position:relative;width:8px;height:8px;flex:0 0 auto;border-radius:50%;background:#2EE6A8;
  box-shadow:0 0 8px #2EE6A8;animation:evLive 1.9s ease-in-out infinite;}
.ev .live-light.off{background:var(--ev-t3);box-shadow:none;animation:none;}
@keyframes evLive{50%{opacity:.35;box-shadow:0 0 2px #2EE6A8;}}
.ev .chat-scroll{padding:var(--s3) var(--s4);gap:var(--s2);
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 16px);mask-image:linear-gradient(180deg,transparent 0,#000 16px);}
.ev .msg{font-size:13px;line-height:18px;color:var(--ev-t1);animation:evMsg 150ms ease both;}
@keyframes evMsg{from{opacity:0;}to{opacity:1;}}
.ev .msg .uname{font-weight:600;margin-right:var(--s2);}
.ev .msg .badge-em{display:none;}
.ev .msg.self .uname{color:var(--ev-blue)!important;}
.ev .msg.event{display:flex;align-items:center;gap:var(--s2);background:none;border:0;border-radius:0;padding:0;
  font-size:12px;line-height:16px;font-weight:500;color:var(--ev-t3);}
.ev .msg.event .ico{width:14px;height:14px;color:var(--ev-t3);}
.ev .msg.donation{background:rgba(34,159,232,.1);border:1px solid rgba(34,159,232,.32);border-radius:var(--r-md);
  padding:var(--s2) var(--s3);box-shadow:none;color:var(--ev-t1);font-weight:400;}
.ev .msg.donation .don-head{display:flex;align-items:center;gap:6px;margin-bottom:var(--s1);
  font-size:12px;line-height:16px;font-weight:600;letter-spacing:0;color:var(--ev-blue);}
.ev .msg.donation .don-head .ico{width:14px;height:14px;fill:currentColor;}
.ev .chat-off{gap:var(--s2);padding:var(--s5);color:var(--ev-t2);justify-items:center;}
.ev .chat-off .e{display:grid;place-items:center;width:40px;height:40px;border-radius:var(--r-md);background:rgba(255,255,255,.08);color:var(--ev-t2);}
.ev .chat-off b{font-size:14px;font-weight:600;color:var(--ev-t1);}
.ev .chat-off p{font-size:13px;line-height:18px;color:var(--ev-t2);}
.ev .chat-input-row{padding:var(--s3);gap:var(--s2);border-top:1px solid rgba(255,255,255,.1);}
.ev .chat-input{height:40px;border-radius:var(--r-sm);background:rgba(9,11,16,.55);border:1px solid rgba(255,255,255,.12);
  padding:0 var(--s3);font-size:14px;color:var(--ev-t1);transition:border-color var(--ev-ease);}
.ev .chat-input:hover{border-color:var(--ev-line-2);}
.ev .chat-input:focus{border-color:var(--ev-blue);background:rgba(9,11,16,.7);}
.ev .chat-input::placeholder{color:var(--ev-t3);}
.ev .chat-send{width:40px;height:40px;border-radius:var(--r-sm);background:var(--ev-blue);color:var(--ev-blue-ink);
  transition:background var(--ev-ease),transform 80ms;}
.ev .chat-send:hover{background:#3DAEF0;box-shadow:none;}
.ev .chat-send:active{transform:scale(.96);}

/* ------------------------------ discovery cards ------------------------------ */
.ev .grid{gap:var(--s5) var(--s4);grid-template-columns:repeat(auto-fill,minmax(min(100%,280px),1fr));}
.ev .card{border-radius:0;transition:none;}
.ev .card:hover{transform:none;}
.ev .card:focus-visible{outline:2px solid var(--ev-blue);outline-offset:4px;border-radius:var(--r-lg);}
.ev .thumb{border:0;border-radius:var(--r-lg);box-shadow:none;background:var(--ev-s1);}
.ev .thumb::after{content:"";position:absolute;inset:0;z-index:4;border-radius:inherit;pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.07);transition:box-shadow var(--ev-ease);}
.ev .card:hover .thumb{border:0;box-shadow:none;}
.ev .card:hover .thumb::after{box-shadow:inset 0 0 0 2px rgba(255,255,255,.28);}
.ev .thumb .badge{top:var(--s2);left:var(--s2);z-index:5;}
.ev .thumb .where{display:none;}
.ev .meta{gap:var(--s3);padding:var(--s3) 0 0;}
.ev .meta .av{width:36px;height:36px;border:0;background:var(--ev-s2);margin-top:2px;}
.ev .meta .name{gap:6px;font-size:16px;line-height:20px;font-weight:600;color:var(--ev-t1);transition:color var(--ev-ease);}
.ev .card:hover .meta .name{color:#fff;}
.ev .meta .title{margin-top:var(--s1);font-size:13px;line-height:18px;color:var(--ev-t2);}
.ev .meta .tags{padding:0;}
.ev .skeleton-meta{padding:var(--s3) 0;gap:var(--s3);}
.ev .skeleton.circle{width:36px;height:36px;}
.ev .thumb.skeleton{border-radius:var(--r-lg);}

/* ------------------------------ categories ------------------------------ */
.ev .rail{gap:var(--s3);}
.ev .cats .ctile{flex:0 0 160px;}
.ev .cats.all{gap:var(--s3);grid-template-columns:repeat(auto-fill,minmax(160px,1fr));}
.ev .ctile{display:flex;flex-direction:column;justify-content:space-between;gap:var(--s5);height:128px;padding:var(--s4);
  border:1px solid var(--ev-line);border-radius:var(--r-md);background:var(--ev-s1);
  transition:background var(--ev-ease),border-color var(--ev-ease);}
.ev .ctile:hover{transform:none;box-shadow:none;background:var(--ev-s2);border-color:var(--ev-line-2);}
.ev .ctile[aria-pressed="true"]{border-color:var(--ev-blue);box-shadow:none;background:var(--ev-s2);}
.ev .ctile .plate{display:contents;}
.ev .ctile .plate::before,.ev .ctile .plate::after{display:none;}
/* the real photo, faded into the tile: dimmed and darkened toward the label */
.ev .ctile .cimg{position:absolute;inset:0;z-index:0;width:100%;height:100%;object-fit:cover;opacity:0;
  transition:opacity 400ms ease,filter var(--ev-ease);filter:saturate(.9);}
.ev .ctile .cimg.in{opacity:.5;}
.ev .ctile:hover .cimg.in,.ev .ctile[aria-pressed="true"] .cimg.in{opacity:.72;filter:none;}
.ev .ctile::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(to top,rgba(9,11,16,.92) 0,rgba(9,11,16,.45) 55%,rgba(9,11,16,.15) 100%);}
.ev .ctile .e,.ev .ctile .lbl{position:relative;z-index:2;}
.ev .ctile .soon{z-index:3;}
.ev .ctile .e{display:block;width:24px;height:24px;font-size:0;filter:drop-shadow(0 1px 4px rgba(0,0,0,.6));color:var(--ev-t1);transition:color var(--ev-ease);}
.ev .ctile .e .ico{width:24px;height:24px;}
.ev .ctile:hover .e,.ev .ctile[aria-pressed="true"] .e{color:var(--ev-blue);}
.ev .ctile .lbl{padding:0;background:none;}
.ev .ctile .lbl b{font-size:14px;line-height:20px;font-weight:600;letter-spacing:0;color:var(--ev-t1);}
.ev .ctile .lbl span{font-size:12px;line-height:16px;font-weight:500;color:var(--ev-t3);margin-top:0;}
.ev .ctile .soon{top:var(--s3);right:var(--s3);font-size:11px;font-weight:600;letter-spacing:.06em;line-height:16px;
  padding:0 6px;border-radius:var(--r-xs);background:rgba(9,11,16,.72);color:var(--ev-t1);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);}
.ev .category-skeleton{height:128px;width:160px;}
.ev .filter-note{background:var(--ev-s1);border:1px solid var(--ev-line);border-radius:var(--r-md);box-shadow:none;
  backdrop-filter:none;-webkit-backdrop-filter:none;padding:var(--s2) var(--s3);margin-bottom:var(--s4);font-size:13px;color:var(--ev-t2);}
.ev .filter-note b{color:var(--ev-t1);font-weight:600;}
.ev .filter-note button{display:inline-flex;align-items:center;gap:6px;min-height:32px;border-radius:var(--r-sm);
  border:1px solid var(--ev-line);background:transparent;padding:0 var(--s3);font-size:13px;font-weight:500;color:var(--ev-t1);
  transition:background var(--ev-ease);}
.ev .filter-note button:hover{background:var(--ev-s2);}

/* ------------------------------ how it works ------------------------------ */
.ev .strip{gap:var(--s4);}
.ev .step{background:var(--ev-s1);border:1px solid var(--ev-line);border-radius:var(--r-md);padding:var(--s5);}
.ev .step .e{display:grid;place-items:center;width:40px;height:40px;margin-bottom:var(--s4);border-radius:var(--r-md);
  background:var(--ev-s2);color:var(--ev-blue);font-size:0;}
.ev .step b{font-size:16px;line-height:20px;font-weight:600;letter-spacing:0;margin-bottom:var(--s2);}
.ev .step p{font-size:13px;line-height:20px;color:var(--ev-t2);}

/* ------------------------------ empty + footer ------------------------------ */
.ev .empty{border:1px dashed var(--ev-line-2);border-radius:var(--r-md);background:var(--ev-s1);padding:var(--s7) var(--s5);}
.ev .empty .e{display:grid;place-items:center;width:48px;height:48px;margin:0 auto var(--s4);border-radius:var(--r-md);
  background:var(--ev-s2);color:var(--ev-t2);font-size:0;}
.ev .empty .e .ico{width:24px;height:24px;}
.ev .empty b{font-size:16px;line-height:20px;font-weight:600;margin-bottom:var(--s2);}
.ev .empty p{font-size:13px;line-height:20px;color:var(--ev-t2);margin-bottom:var(--s5);}
.ev .foot{margin-top:var(--s5);padding-top:var(--s5);border-top:1px solid var(--ev-line);font-size:12px;line-height:20px;color:var(--ev-t3);}
.ev .foot a{color:var(--ev-t2);transition:color var(--ev-ease);}
.ev .foot a:hover{color:var(--ev-blue);}

/* ------------------------------ search dialog ------------------------------ */
.ev .search-dialog{background:var(--ev-s1);border:1px solid var(--ev-line);border-radius:var(--r-lg);padding:var(--s5);
  box-shadow:0 24px 64px rgba(0,0,0,.6);}
.ev .search-dialog h2{font-size:16px;font-weight:600;letter-spacing:0;}
.ev .search-dialog-head .ic{border:0;}
.ev .search-form input{min-height:44px;border-radius:var(--r-sm);background:var(--ev-bg);border:1px solid var(--ev-line);}
.ev .search-form input:focus{outline:none;border-color:var(--ev-blue);}
.ev .search-suggestion{border-radius:var(--r-sm);}
.ev .search-suggestion:hover,.ev .search-suggestion:focus-visible,.ev .search-all:hover{background:var(--ev-s2);}
.ev .search-all{color:var(--ev-blue);}

/* ============================== responsive ============================== */
@media(max-width:1179px){
  .ev .grid{grid-template-columns:repeat(auto-fill,minmax(min(100%,280px),1fr));}
}
@media(max-width:1080px){
  .ev .side{background:var(--ev-s1);border-right:1px solid var(--ev-line);border-radius:0;padding:var(--s4) var(--s3);max-height:none;}
}
/* tablet / phone header: one row, brand left, actions right */
@media(max-width:880px){
  .ev{--gap:16px;}
  .ev .top{display:flex;gap:var(--s1);padding:0 var(--pad);}
  .ev .brand{margin-right:auto;padding-left:0;}
  .ev .beta{display:none;}
  .ev .only-mob{display:grid;}
  .ev .top .ic,.ev .top .ic:hover{border:0;background:transparent;border-radius:var(--r-sm);color:var(--ev-t1);}
  .ev .top .ic:hover{background:var(--ev-s2);}
  .ev .top .ic-user,.ev .top .ic-user:hover{background:var(--ev-blue);color:var(--ev-blue-ink);margin-left:var(--s1);}
  .ev .top .ic-user:hover{background:#3DAEF0;}
  .ev .top .acct-btn,.ev .top .acct-btn:hover{background:var(--ev-blue);color:var(--ev-blue-ink);border-radius:var(--r-pill);}
  .ev .brand img{width:26px;height:30px;}
  .ev .wordmark .r1{font-size:13px;}
  .ev .wordmark .r2{font-size:11px;}
  .ev .shell{padding-top:var(--s4);}
}
/* phone: the first card is the hero — one full-width column, video first */
@media(max-width:700px){
  .ev .shell{padding-bottom:var(--s7);}
  .ev .sec{margin-bottom:var(--s6);}
  .ev .sec-head h2{font-size:20px;line-height:24px;}
  /* the live cards are one swipeable row (owner's call, 10-08): the next card
     peeks in and the Ozzie banner stays above the fold */
  .ev .grid{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:min(78vw,310px);gap:var(--s3);
    overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scroll-padding-inline:0;padding:0 0 var(--s1);
    scrollbar-width:none;}
  .ev .grid::-webkit-scrollbar{display:none;}
  .ev .grid .card{scroll-snap-align:start;}
  .ev .thumb{border-radius:var(--r-lg);}
  .ev .grid .meta{gap:var(--s3);padding-top:var(--s3);}
  .ev .grid .tags{padding:0;}
  .ev .cats .ctile{flex-basis:144px;}
  .ev .ctile{height:112px;padding:var(--s3);}
  .ev .step{padding:var(--s4);}
  .ev .btn,.ev .filter-note button{min-height:44px;}
  .ev .search-dialog{padding:var(--s4);border-radius:var(--r-lg);}
}
.ev .thumb .preview-idle{padding:var(--s7) var(--s2) var(--s4);}

/* ------------------------------ collapsible sidebar (10-08) ------------------------------
   Desktop only (≥1081px — below that the sidebar is already a drawer). Collapsed it keeps
   the icons, the channel avatars (live ones still blink green) and the category photos. */
.ev .side-collapse{display:none;}
@media(min-width:1081px){
  /* the sidebar scrolls (sticky + max-height), so the toggle is pinned to its
     bottom edge — always on screen, never only after scrolling the list */
  .ev .side{display:flex;flex-direction:column;}
  .ev .side-collapse{position:sticky;bottom:0;z-index:2;flex:0 0 auto;display:grid;place-items:center;width:100%;height:40px;
    margin:auto 0 0;padding:0;border:0;border-top:1px solid var(--ev-line);border-radius:0;
    background:var(--ev-bg);color:var(--ev-t3);cursor:pointer;transition:color var(--ev-ease);}
  .ev .side-collapse:hover{color:var(--ev-t1);background:var(--ev-bg);}
  .ev .side-cta{margin-bottom:var(--s3);}
  .ev .side-collapse .ico{width:18px;height:18px;transition:transform var(--ev-ease);}
  .ev .top{grid-template-columns:calc(240px + var(--gap)) minmax(0,1fr) auto auto;}
  .ev.side-min{--side-w:64px;}
  .ev.side-min .brand{padding-left:18px;}
  .ev.side-min .side-collapse .ico{transform:rotate(180deg);}
  .ev.side-min .snav{justify-content:center;padding:0;}
  .ev.side-min .snav > span:not(.i),
  .ev.side-min .side h3,
  .ev.side-min .chan .t,
  .ev.side-min .chan .st.soon{display:none;}
  .ev.side-min .chan{position:relative;justify-content:center;padding:0;}
  .ev.side-min .chan .st.live{position:absolute;top:8px;right:12px;font-size:0;gap:0;}
  .ev.side-min .side-cta .btn{font-size:0;gap:0;padding:0;}
  .ev.side-min .side-cta .btn .ico{width:18px;height:18px;}
}

/* ------------------------------------------- offline card thumbnail (10-20) */
.ev .idle2{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;
  overflow:hidden;isolation:isolate;background:#070a12;}
/* the business's own logo, blurred, as the card's colour */
.ev .idle2-bg{position:absolute;left:-20%;top:-20%;width:140%;height:140%;object-fit:cover;z-index:-2;
  filter:blur(36px) saturate(1.6);opacity:.6;animation:idleDrift 18s ease-in-out infinite alternate;}
.ev .idle2::after{content:"";position:absolute;inset:0;z-index:-1;
  background:radial-gradient(70% 80% at 50% 42%,rgba(7,10,18,.05),rgba(7,10,18,.78) 100%);}
.ev .idle2-orb{position:relative;width:clamp(56px,22%,96px);aspect-ratio:1;animation:idleFloat 4.6s ease-in-out infinite;}
.ev .idle2-orb img{position:relative;display:block;width:100%;height:100%;border-radius:50%;object-fit:cover;background:#0b0f18;
  box-shadow:0 0 0 2px rgba(255,255,255,.18),0 14px 34px rgba(0,0,0,.55);}
.ev .idle2-orb .ring{position:absolute;inset:0;border-radius:50%;border:1.5px solid rgba(255,255,255,.4);
  animation:idleRing 3s cubic-bezier(.2,.6,.3,1) infinite;}
.ev .idle2-orb .r2{animation-delay:1.5s;}
.ev .idle2.paused .idle2-orb .ring{border-color:rgba(251,191,36,.55);}
.ev .idle2-cta{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 13px;border-radius:999px;
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  color:#F5F7FA;font-size:12.5px;font-weight:600;letter-spacing:.01em;transition:background var(--ev-ease,150ms ease),transform var(--ev-ease,150ms ease);}
.ev .idle2-cta svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;transition:transform 150ms ease;}
.ev .card:hover .idle2-cta,.ev .card:focus-visible .idle2-cta{background:rgba(255,255,255,.2);transform:translateY(-1px);}
.ev .card:hover .idle2-cta svg{transform:translateX(3px);}
@keyframes idleRing{0%{transform:scale(1);opacity:.7}100%{transform:scale(1.85);opacity:0}}
@keyframes idleFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes idleDrift{0%{transform:scale(1) translate(-3%,-2%)}100%{transform:scale(1.15) translate(3%,2%)}}
@media (prefers-reduced-motion:reduce){.ev .idle2 *,.ev .idle2-bg{animation:none!important}}
/* the orb is sized by its width alone — a non-square logo must not stretch it */
.ev .idle2{padding-top:26px;}
.ev .idle2-orb{height:auto;min-height:0;flex:0 0 auto;}
.ev .idle2-orb img{position:absolute;inset:0;width:100%;height:100%;}
/* ONLY the Pollos logo (owner, 10-20): its black lettering disappears on the
   dark page, so it sits on white wherever it appears here (not the blurred backdrop) */
.ev img[src*="pollos-logo"]:not(.idle2-bg){background:#fff;object-fit:contain;padding:3px;}
.ev .idle2-orb img[src*="pollos-logo"]{padding:5px;}