:root{--bg:#0f0f0f;--panel:#181818;--panel2:#222;--text:#fff;--muted:#aaa;--line:#333;--yellow:#ffd400;--blue:#3ea6ff;--radius:16px;--shadow:0 14px 38px rgba(0,0,0,.28)}
*{box-sizing:border-box}html,body{height:100%;margin:0;background:var(--bg);color:var(--text);font-family:Arial,Helvetica,sans-serif;overflow:hidden}button,input{font:inherit}.topbar{height:84px;display:grid;grid-template-columns:280px minmax(360px,720px) 280px;align-items:center;gap:20px;padding:0 24px;border-bottom:1px solid rgba(255,255,255,.06);position:relative}.brand-cluster{display:flex;align-items:center;gap:18px}.icon-btn,.control-btn{border:0;background:transparent;color:var(--text);display:grid;place-items:center;cursor:pointer}.icon-btn svg{width:28px;height:28px}.brand{display:flex;align-items:center;color:var(--text);text-decoration:none;gap:10px}.brand b{font-size:28px}.brand small{font-size:12px;align-self:flex-start;margin-top:2px}.brand-mark{width:40px;height:29px;border-radius:8px;background:var(--yellow);display:flex;justify-content:center;gap:5px;align-items:center}.brand-mark span{display:block;width:4px;height:13px;background:#fff;border-radius:2px}.search{height:48px;display:grid;grid-template-columns:1fr 64px;position:relative;border:1px solid var(--line);border-radius:999px;overflow:visible;background:#121212}.search input{border:0;background:transparent;color:var(--text);outline:none;padding:0 22px;font-size:20px}.search>button{border:0;border-left:1px solid var(--line);background:#222;color:#fff;border-radius:0 999px 999px 0;display:grid;place-items:center;cursor:pointer}.search-dropdown{position:absolute;top:56px;left:0;right:0;background:#202020;border:1px solid #393939;border-radius:14px;box-shadow:var(--shadow);z-index:50;max-height:460px;overflow:auto;padding:8px}.search-result{display:grid;grid-template-columns:150px 1fr;gap:12px;padding:10px;border-radius:11px;cursor:pointer}.search-result:hover{background:#303030}.search-result img{width:150px;aspect-ratio:16/9;object-fit:cover;border-radius:8px}.search-result h3{font-size:15px;margin:0 0 6px;line-height:1.25}.search-result p,.search-result small{margin:0;color:#aaa}.search-state{padding:18px;color:#bbb}.page-grid{height:calc(100vh - 84px);display:grid;grid-template-columns:minmax(0,1fr) 390px;gap:26px;padding:22px 24px 0}.watch{min-width:0;overflow:hidden}.player-shell{position:relative;width:100%;aspect-ratio:16/9;max-height:calc(100vh - 220px);background:#000;border-radius:16px;overflow:hidden;box-shadow:var(--shadow);isolation:isolate}.youtube-layer,.player-shell video{position:absolute;inset:0;width:100%;height:100%;border:0;object-fit:cover}.youtube-layer{z-index:1}.player-shell video{z-index:0}.vignette{position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(to bottom,transparent 55%,rgba(0,0,0,.55) 100%)}
.ad-motion-group{position:absolute;left:24px;bottom:88px;z-index:5;display:flex;flex-direction:column;gap:6px;transition:transform .15s ease}.player-shell.controls-visible .ad-motion-group,.player-shell.is-paused .ad-motion-group,.player-shell.is-scrubbing .ad-motion-group{transform:translateY(-44px)}.ad-card{display:flex;align-items:center;gap:16px;min-width:420px;max-width:min(650px,calc(100vw - 520px));height:96px;padding:12px 16px;border-radius:20px;background:rgba(20,20,20,.74);backdrop-filter:blur(18px);box-shadow:0 8px 24px rgba(0,0,0,.25)}.avatar{width:64px;height:64px;border-radius:50%;overflow:hidden;border:0;background:#eee;display:grid;place-items:center;flex:0 0 auto;cursor:pointer}.avatar img,.advertiser-icon img{width:100%;height:100%;object-fit:cover}.ad-copy{min-width:0;display:flex;flex-direction:column;gap:6px;flex:1}.ad-copy strong{font-size:21px;line-height:1.15;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ad-copy span{font-size:17px;color:#d7d7d7}.cta{height:52px;display:flex;align-items:center;justify-content:center;padding:0 30px;border-radius:999px;background:#fff;color:#111;text-decoration:none;font-weight:700;white-space:nowrap;box-shadow:0 3px 10px rgba(0,0,0,.16);transition:transform .15s ease,box-shadow .15s ease}.cta:hover{transform:scale(1.04);box-shadow:0 6px 18px rgba(0,0,0,.24)}.sponsor-row{display:flex;align-items:center;gap:9px;color:#fff;font-size:16px;line-height:1;min-height:22px;text-shadow:0 1px 3px #000}.info-dot{width:20px;height:20px;border:2px solid currentColor;border-radius:50%;display:inline-grid;place-items:center;font-size:13px;line-height:1;transform:none}.skip-pill{position:absolute;right:24px;bottom:92px;z-index:6;height:58px;padding:0 24px;border-radius:999px;border:1px solid rgba(255,255,255,.6);background:rgba(20,20,20,.76);backdrop-filter:blur(18px);color:#fff;font-weight:700;font-size:19px;display:flex;align-items:center;gap:13px;transition:transform .15s ease,background .15s ease}.player-shell.controls-visible .skip-pill,.player-shell.is-paused .skip-pill,.player-shell.is-scrubbing .skip-pill{transform:translateY(-44px)}.skip-pill:hover{background:rgba(35,35,35,.9);transform:scale(1.04)}.skip-pill[hidden]{display:none}
.controls-layer{position:absolute;left:0;right:0;bottom:0;z-index:4;padding:0 18px 12px;background:linear-gradient(transparent,rgba(0,0,0,.86));transform:translateY(48px);transition:transform .15s ease}.player-shell.controls-visible .controls-layer,.player-shell.is-paused .controls-layer,.player-shell.is-scrubbing .controls-layer{transform:translateY(0)}.timeline-hitbox{height:20px;position:relative;display:flex;align-items:flex-end}.timeline-track{position:absolute;left:0;right:0;bottom:8px;height:3px;background:#3a3a3a;border-radius:99px;overflow:hidden}.timeline-buffer,.timeline-progress{position:absolute;left:0;top:0;bottom:0;width:0}.timeline-buffer{background:#666}.timeline-progress{background:var(--yellow)}.timeline-hitbox:hover .timeline-track,.player-shell.is-scrubbing .timeline-track{height:7px}.timeline-hitbox input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}.control-bar{height:44px;display:flex;align-items:center;justify-content:space-between}.control-group{display:flex;align-items:center;gap:8px}.control-btn{width:40px;height:40px;border-radius:50%;transition:transform .15s ease,background .15s ease}.control-btn:hover{transform:scale(1.08);background:rgba(255,255,255,.12)}.control-btn svg{width:25px;height:25px}.volume-wrap{width:0;overflow:hidden;transition:width .18s ease}.control-group:hover .volume-wrap{width:90px}.volume-wrap input{width:82px;accent-color:#fff}.time{font-size:15px}.settings-menu{position:absolute;right:18px;bottom:66px;z-index:20;background:#202020;border-radius:12px;padding:8px;box-shadow:var(--shadow)}.settings-menu button{display:block;width:100%;padding:10px 18px;border:0;background:transparent;color:#fff;text-align:left;border-radius:8px}.settings-menu button:hover,.settings-menu button.active{background:#353535}
.meta{padding:16px 2px 0}.title-line{display:flex;align-items:flex-start;gap:8px;flex-wrap:wrap}.title-line h1{font-size:24px;margin:0;line-height:1.25}.title-tags{display:flex;gap:7px;flex-wrap:wrap;max-width:100%}.title-tag,.tags-more{border:0;background:transparent;color:var(--blue);padding:0;font-weight:700;font-size:21px;cursor:pointer}.tags-more{letter-spacing:1px}.meta-row{display:flex;align-items:center;justify-content:space-between;margin-top:14px}.advertiser{display:flex;align-items:center;gap:14px;border:0;background:transparent;color:var(--text);cursor:pointer;text-align:left}.advertiser-icon{width:48px;height:48px;border-radius:50%;overflow:hidden;background:#ddd;display:block}.advertiser span:last-child{display:flex;flex-direction:column;gap:4px}.advertiser b{font-size:18px}.advertiser small{color:var(--muted);font-size:14px}.meta-actions{display:flex;gap:10px}.meta-pill{height:44px;padding:0 18px;border:0;border-radius:999px;background:#272727;color:#fff;display:flex;align-items:center;gap:10px;font-weight:700;cursor:pointer}.meta-pill:hover{background:#343434}.sidebar{height:100%;overflow:hidden}.sidebar-head{display:flex;align-items:center;justify-content:space-between;padding:3px 0 12px}.sidebar-head h2{font-size:22px;margin:0}.sidebar-head span{color:#aaa}.video-list{height:calc(100% - 44px);overflow-y:auto;padding-right:8px}.video-card{display:grid;grid-template-columns:168px 1fr;gap:11px;padding:8px;border-radius:13px;margin-bottom:6px;cursor:pointer;opacity:0;transform:translateY(10px);animation:cardIn .22s ease forwards}.video-card:hover{background:#252525;transform:translateY(0) scale(1.01)}.video-card.active{background:#2a2a2a;box-shadow:inset 3px 0 0 var(--yellow)}.video-card img{width:168px;aspect-ratio:16/9;object-fit:cover;border-radius:9px}.video-card h3{font-size:15px;line-height:1.25;margin:1px 0 7px}.video-card p,.video-card small{margin:0;color:#aaa;font-size:13px}.video-card small{display:block;margin-top:4px}.toast{position:fixed;left:50%;bottom:22px;transform:translateX(-50%) translateY(20px);background:#292929;color:#fff;padding:11px 17px;border-radius:999px;opacity:0;pointer-events:none;transition:.2s;z-index:100}.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}@keyframes cardIn{to{opacity:1;transform:translateY(0)}}
body.theater .page-grid{grid-template-columns:1fr}body.theater .sidebar{display:none}body.theater .player-shell{max-height:none}.player-shell:fullscreen{border-radius:0}.player-shell:fullscreen .ad-card{max-width:min(700px,70vw)}
@media(max-width:1050px){.topbar{grid-template-columns:230px 1fr 30px}.page-grid{grid-template-columns:1fr}.sidebar{display:none}.ad-card{max-width:calc(100vw - 190px);min-width:0}.meta-actions{display:none}}@media(max-width:700px){.topbar{grid-template-columns:auto 1fr;height:70px;padding:0 12px}.topbar-spacer{display:none}.brand b{font-size:22px}.search{height:42px}.page-grid{height:calc(100vh - 70px);padding:12px}.ad-card{height:78px;padding:9px}.avatar{width:52px;height:52px}.ad-copy strong{font-size:15px}.ad-copy span{font-size:13px}.cta{height:44px;padding:0 18px}.sponsor-row{font-size:13px}.title-line h1{font-size:19px}.title-tag,.tags-more{font-size:17px}}

/* V25 refined player behaviour */
html,body{font-family:Roboto,Arial,Helvetica,sans-serif}
.player-shell{border:0;outline:0}
.ad-motion-group{left:28px;bottom:18px;gap:3px;transition:transform .15s cubic-bezier(.2,0,0,1)}
.player-shell.controls-visible .ad-motion-group,
.player-shell.is-paused .ad-motion-group,
.player-shell.is-scrubbing .ad-motion-group{transform:translateY(-54px)}
.ad-card{height:84px;min-width:390px;max-width:min(620px,calc(100vw - 500px));padding:10px 14px;border-radius:18px;gap:14px;background:rgba(22,22,22,.66);backdrop-filter:blur(20px) saturate(120%);-webkit-backdrop-filter:blur(20px) saturate(120%);box-shadow:0 8px 22px rgba(0,0,0,.23)}
.avatar{width:48px;height:48px}
.ad-copy{gap:3px}
.ad-copy strong{font-size:20px;font-weight:500;line-height:1.18;color:#fff}
.ad-copy span{font-size:15px;color:rgba(255,255,255,.78)}
.cta{height:50px;padding:0 28px;border:0;outline:0;border-radius:999px;background:#fff;color:#111;font-size:17px;font-weight:500;box-shadow:0 1px 2px rgba(0,0,0,.16),0 6px 16px rgba(0,0,0,.12)}
.cta:focus-visible{outline:2px solid var(--yellow);outline-offset:2px}
.sponsor-row{gap:7px;min-height:20px;font-size:15px;font-weight:400;line-height:20px}
.sponsor-row b{font-weight:700}
.info-dot{width:18px;height:18px;border-width:2px;font-size:12px;line-height:14px;transform:translateY(0)}
.skip-pill{right:28px;bottom:20px;height:52px;padding:0 22px;border-radius:999px;border:1px solid rgba(255,255,255,.42);background:rgba(22,22,22,.66);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);font-size:18px;font-weight:500;transition:transform .15s cubic-bezier(.2,0,0,1),background .15s ease}
.player-shell.controls-visible .skip-pill,
.player-shell.is-paused .skip-pill,
.player-shell.is-scrubbing .skip-pill{transform:translateY(-54px)}
.skip-pill:hover{transform:scale(1.04);background:rgba(36,36,36,.82)}
.player-shell.controls-visible .skip-pill:hover,
.player-shell.is-paused .skip-pill:hover,
.player-shell.is-scrubbing .skip-pill:hover{transform:translateY(-54px) scale(1.04)}
.controls-layer{padding:0 18px 8px;transform:translateY(58px);transition:transform .15s cubic-bezier(.2,0,0,1)}
.player-shell.controls-visible .controls-layer,
.player-shell.is-paused .controls-layer,
.player-shell.is-scrubbing .controls-layer{transform:translateY(0)}
.edge-timeline{position:absolute;left:8px;right:8px;bottom:0;height:14px;z-index:7;transition:bottom .15s cubic-bezier(.2,0,0,1)}
.player-shell.controls-visible .edge-timeline,
.player-shell.is-paused .edge-timeline,
.player-shell.is-scrubbing .edge-timeline{bottom:48px}
.edge-timeline .timeline-track{left:0;right:0;bottom:2px;height:3px;background:rgba(60,60,60,.9)}
.edge-timeline:hover .timeline-track,
.player-shell.is-scrubbing .edge-timeline .timeline-track{height:6px}
.timeline-buffer{background:rgba(120,120,120,.72)}
.timeline-progress{background:var(--yellow)}
.control-bar{height:46px}
.control-btn{width:40px;height:40px}
.control-btn svg{width:24px;height:24px}
.vignette{background:linear-gradient(to bottom,transparent 60%,rgba(0,0,0,.48) 100%)}
@media(max-width:700px){.ad-motion-group{left:14px}.skip-pill{right:14px}.ad-card{height:74px;min-width:0;max-width:calc(100vw - 150px)}.avatar{width:44px;height:44px}.ad-copy strong{font-size:15px}.cta{height:42px;padding:0 17px;font-size:14px}.player-shell.controls-visible .ad-motion-group,.player-shell.is-paused .ad-motion-group,.player-shell.is-scrubbing .ad-motion-group,.player-shell.controls-visible .skip-pill,.player-shell.is-paused .skip-pill,.player-shell.is-scrubbing .skip-pill{transform:translateY(-48px)}.player-shell.controls-visible .edge-timeline,.player-shell.is-paused .edge-timeline,.player-shell.is-scrubbing .edge-timeline{bottom:43px}}


/* V26 — theater, icon, overlay and motion refinement */
:root{--player-controls-rise:58px;--ad-expanded-rise:72px;--timeline-expanded-bottom:54px}
.icon-btn svg,.control-btn svg,.skip-pill svg,.meta-pill svg,.search>button svg{display:block;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.avatar,.advertiser-icon{position:relative}
.avatar img,.advertiser-icon img{position:relative;z-index:2}
.avatar-fallback{position:absolute;inset:0;z-index:1;display:grid;place-items:center;background:linear-gradient(145deg,#ffd400,#e9b900);color:#111;font-weight:700;font-size:18px;text-transform:uppercase}
.avatar.is-fallback img,.advertiser-icon.is-fallback img{display:none}

/* Smaller ad card */
.ad-motion-group{bottom:8px;gap:2px}
.ad-card{height:76px;min-width:360px;max-width:min(580px,calc(100vw - 470px));padding:8px 12px;border-radius:16px;gap:12px}
.avatar{width:46px;height:46px}
.ad-copy strong{font-size:18px;line-height:1.16}
.ad-copy span{font-size:14px}
.cta{height:46px;padding:0 24px;font-size:16px}
.sponsor-row{font-size:14px;min-height:18px;line-height:18px;gap:6px}
.info-dot{width:17px;height:17px;font-size:11px}
.skip-pill{bottom:10px;height:48px;padding:0 20px;font-size:17px}

/* Collapsed elements lower; expanded elements higher */
.player-shell.controls-visible .ad-motion-group,
.player-shell.is-paused .ad-motion-group,
.player-shell.is-scrubbing .ad-motion-group{transform:translateY(calc(-1 * var(--ad-expanded-rise)))}
.player-shell.controls-visible .skip-pill,
.player-shell.is-paused .skip-pill,
.player-shell.is-scrubbing .skip-pill{transform:translateY(calc(-1 * var(--ad-expanded-rise)))}
.player-shell.controls-visible .skip-pill:hover,
.player-shell.is-paused .skip-pill:hover,
.player-shell.is-scrubbing .skip-pill:hover{transform:translateY(calc(-1 * var(--ad-expanded-rise))) scale(1.04)}
.controls-layer{transform:translateY(var(--player-controls-rise))}
.edge-timeline{bottom:-2px}
.player-shell.controls-visible .edge-timeline,
.player-shell.is-paused .edge-timeline,
.player-shell.is-scrubbing .edge-timeline{bottom:var(--timeline-expanded-bottom)}
.edge-timeline .timeline-track{bottom:1px}

/* Real theater mode: full viewport player, no squeezed layout */
body.theater{overflow:hidden}
body.theater .topbar{display:none}
body.theater .page-grid{display:block;height:100vh;padding:0}
body.theater .watch{width:100%;height:100vh;overflow:hidden}
body.theater .player-shell{width:100%;height:100vh;max-height:none;aspect-ratio:auto;border-radius:0;box-shadow:none}
body.theater .meta,body.theater .sidebar{display:none!important}
body.theater .youtube-layer,body.theater .player-shell video{object-fit:contain;background:#000}
body.theater .ad-card{max-width:min(600px,60vw)}
body.theater .player-shell.controls-visible .edge-timeline,
body.theater .player-shell.is-paused .edge-timeline,
body.theater .player-shell.is-scrubbing .edge-timeline{bottom:56px}

@media(max-width:700px){
  :root{--ad-expanded-rise:58px;--timeline-expanded-bottom:45px}
  .ad-motion-group{bottom:6px}
  .skip-pill{bottom:8px}
  .ad-card{height:68px;max-width:calc(100vw - 138px);padding:7px 9px}
  .avatar{width:42px;height:42px}
  .cta{height:40px;padding:0 15px}
}

/* V27 — compact translucent ad treatment from current YouTube ad references */
:root{
  --ad-expanded-rise:82px;
  --timeline-expanded-bottom:58px;
}

/* The card may be this large at most; the moving image remains visible through it. */
.ad-motion-group{
  left:32px;
  bottom:2px;
  gap:2px;
}
.ad-card{
  width:min(610px,calc(100vw - 520px));
  min-width:0;
  max-width:610px;
  height:88px;
  padding:9px 14px;
  gap:12px;
  border:0;
  border-radius:18px;
  background:rgba(13,13,13,.56);
  -webkit-backdrop-filter:blur(12px) saturate(112%);
  backdrop-filter:blur(12px) saturate(112%);
  box-shadow:0 5px 18px rgba(0,0,0,.18);
}
.avatar{width:48px;height:48px}
.ad-copy{gap:2px}
.ad-copy strong{font-size:18px;font-weight:600;line-height:1.18;color:#fff}
.ad-copy span{font-size:14px;color:rgba(255,255,255,.76)}
.cta{
  height:46px;
  padding:0 25px;
  border:0;
  border-radius:999px;
  font-size:16px;
  font-weight:600;
  box-shadow:0 1px 2px rgba(0,0,0,.14),0 5px 14px rgba(0,0,0,.10);
}
.sponsor-row{
  min-height:18px;
  font-size:14px;
  line-height:18px;
  gap:6px;
}

/* Collapsed card a few pixels lower; expanded card rises farther above controls. */
.player-shell.controls-visible .ad-motion-group,
.player-shell.is-paused .ad-motion-group,
.player-shell.is-scrubbing .ad-motion-group{
  transform:translateY(calc(-1 * var(--ad-expanded-rise)));
}

/* Skip remains anchored in one place in every player state. */
.skip-pill{
  right:30px;
  bottom:96px;
  height:44px;
  padding:0 17px;
  gap:9px;
  border:0;
  border-radius:999px;
  background:rgba(18,18,18,.62);
  -webkit-backdrop-filter:blur(12px);
  backdrop-filter:blur(12px);
  font-size:15px;
  font-weight:500;
  transition:background .15s ease,transform .15s ease;
}
.skip-pill svg{width:21px;height:21px}
.player-shell.controls-visible .skip-pill,
.player-shell.is-paused .skip-pill,
.player-shell.is-scrubbing .skip-pill,
.player-shell.controls-visible .skip-pill:hover,
.player-shell.is-paused .skip-pill:hover,
.player-shell.is-scrubbing .skip-pill:hover{
  transform:none;
}
.skip-pill:hover{transform:scale(1.035);background:rgba(30,30,30,.78)}

/* Edge progress line: almost flush when collapsed, slightly higher when controls open. */
.edge-timeline{bottom:-3px}
.player-shell.controls-visible .edge-timeline,
.player-shell.is-paused .edge-timeline,
.player-shell.is-scrubbing .edge-timeline{bottom:var(--timeline-expanded-bottom)}
.edge-timeline .timeline-track{bottom:1px;height:3px}

body.theater .ad-card{width:min(610px,60vw);max-width:610px}
body.theater .skip-pill{bottom:96px}

@media(max-width:900px){
  .ad-card{width:min(560px,calc(100vw - 210px))}
}
@media(max-width:700px){
  :root{--ad-expanded-rise:66px;--timeline-expanded-bottom:47px}
  .ad-motion-group{left:14px;bottom:1px}
  .ad-card{width:calc(100vw - 150px);height:70px;padding:7px 9px;border-radius:15px}
  .avatar{width:42px;height:42px}
  .ad-copy strong{font-size:15px}
  .ad-copy span{font-size:12px}
  .cta{height:40px;padding:0 15px;font-size:14px}
  .skip-pill{right:14px;bottom:76px;height:40px;padding:0 14px;font-size:14px}
  .skip-pill svg{width:19px;height:19px}
}

/* V28 — central tuning, visible actions, compact overlay, quieter skip hover */
.ad-motion-group{
  bottom:var(--ui-banner-bottom,-4px);
}
.ad-card{
  width:min(var(--ui-banner-max-percent,50%),var(--ui-banner-max-px,500px));
  max-width:min(var(--ui-banner-max-percent,50%),var(--ui-banner-max-px,500px));
  height:var(--ui-banner-height,74px);
  padding:8px 12px;
  border-radius:16px;
}
.ad-copy strong{font-size:16px}
.ad-copy span{font-size:13px}
.avatar{width:44px;height:44px}
.cta{height:42px;padding:0 20px;font-size:15px}
.sponsor-row{font-size:13px;min-height:17px}
.skip-pill{
  right:var(--ui-skip-right,28px);
  bottom:var(--ui-skip-bottom,92px);
  height:var(--ui-skip-height,42px);
  font-size:14px;
  background:rgba(18,18,18,.68);
}
.skip-pill:hover{background:rgba(18,18,18,.46);transform:scale(1.035)}
.edge-timeline{bottom:var(--ui-timeline-collapsed,-4px)}
.meta-actions{display:flex!important;flex-wrap:wrap}
.meta-pill svg{width:22px;height:22px;display:block;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
@media(max-width:1050px){
  .meta-row{align-items:flex-start;gap:14px;flex-wrap:wrap}
  .meta-actions{margin-left:auto}
}
body.theater .ad-card{
  width:min(var(--ui-banner-max-percent,50%),var(--ui-banner-max-px,500px));
  max-width:min(var(--ui-banner-max-percent,50%),var(--ui-banner-max-px,500px));
}
@media(max-width:700px){
  .ad-card{width:min(68%,420px);max-width:min(68%,420px);height:66px}
  .meta-actions{display:flex!important}
  .meta-pill{height:40px;padding:0 14px}
}


/* V29 — header/search repair and stable responsive geometry */
.topbar{
  height:76px;
  grid-template-columns:minmax(210px,280px) minmax(300px,640px) minmax(210px,280px);
  justify-content:center;
  gap:18px;
  padding:0 22px;
  overflow:visible;
}
.brand-cluster{min-width:0;overflow:visible;white-space:nowrap}
.brand{min-width:max-content}
.search{width:100%;max-width:640px;justify-self:center;height:46px;min-width:0}
.search input{min-width:0;width:100%;font-size:17px;padding:0 20px}
.search>button{width:58px}
.search>button svg{width:25px;height:25px}
.topbar-spacer{min-width:0}
.search-dropdown{top:54px;max-height:min(520px,calc(100vh - 100px))}
.search-result{grid-template-columns:132px minmax(0,1fr) auto;align-items:center}
.search-result img{width:132px}
.search-result .search-copy{min-width:0}
.search-result .search-copy h3,.search-result .search-copy p,.search-result .search-copy small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.search-add{border:0;border-radius:999px;background:var(--yellow);color:#111;font-weight:700;padding:9px 14px;cursor:pointer;white-space:nowrap}
.search-add.saved{background:#333;color:#ddd}
.search-state strong{color:var(--text)}

@media(max-width:1120px){
  .topbar{grid-template-columns:minmax(190px,230px) minmax(260px,1fr) 24px;padding:0 16px;gap:14px}
  .brand b{font-size:25px}
  .brand-mark{width:36px;height:27px}
  .search{max-width:560px}
}
@media(max-width:760px){
  html,body{overflow:auto}
  .topbar{height:auto;min-height:116px;grid-template-columns:1fr auto;padding:12px;gap:10px}
  .brand-cluster{grid-column:1/2}
  .topbar-spacer{display:none}
  .search{grid-column:1/-1;grid-row:2;max-width:none;height:44px}
  .search input{font-size:16px}
  .page-grid{height:auto;min-height:calc(100vh - 116px);padding:12px;display:block}
  .watch{overflow:visible}
  .sidebar{display:block;margin-top:18px;height:auto;max-height:none;overflow:visible}
  .video-list{max-height:none;overflow:visible}
  .search-result{grid-template-columns:104px minmax(0,1fr)}
  .search-result img{width:104px}
  .search-add{grid-column:2;justify-self:start;margin-top:6px}
}


/* V30 — compact, normal YouTube-like search geometry */
.topbar{
  height:72px;
  display:grid;
  grid-template-columns:minmax(220px,1fr) minmax(360px,620px) minmax(220px,1fr);
  align-items:center;
  gap:18px;
  padding:0 24px;
  overflow:visible;
}
.brand-cluster{justify-self:start;min-width:0}
.topbar-spacer{display:block;justify-self:end;width:1px;height:1px}
.search{
  justify-self:center;
  width:min(100%,620px);
  max-width:620px;
  height:44px;
  grid-template-columns:minmax(0,1fr) 58px;
  border:1px solid #3a3a3a;
  border-radius:999px;
  background:#121212;
  overflow:visible;
}
.search input{font-size:17px;padding:0 20px}
.search>button{width:58px;border-radius:0 999px 999px 0;background:#222}
.search>button svg{width:23px;height:23px}
.search-dropdown{top:52px}
@media(max-width:1050px){
  .topbar{grid-template-columns:minmax(205px,1fr) minmax(320px,560px) minmax(40px,1fr);padding:0 16px;gap:12px}
  .search{max-width:560px}
}
@media(max-width:760px){
  .topbar{height:auto;min-height:112px;grid-template-columns:1fr;padding:10px 12px;gap:8px}
  .brand-cluster{grid-row:1;grid-column:1}
  .search{grid-row:2;grid-column:1;width:100%;max-width:none;height:44px}
  .topbar-spacer{display:none}
}
/* V31: robuste, einheitliche Werbetreibenden-Darstellung */
.brand-cluster .icon-btn{display:grid;text-decoration:none;color:inherit}
.ad-card{width:min(var(--ui-banner-max-percent,50%),var(--ui-banner-max-px,1000px));max-width:calc(100% - 160px);min-width:0;height:var(--ui-banner-height,74px);padding:10px 14px;gap:12px;border-radius:16px;background:rgba(20,20,20,.72)}
.avatar{width:48px;height:48px;min-width:48px;border-radius:50%}.ad-copy strong{font-size:17px;font-weight:600}.ad-copy span{font-size:14px}.cta{height:44px;padding:0 22px;font-size:15px}
.avatar img,.advertiser-icon img{display:block;width:100%;height:100%;border-radius:50%;object-fit:cover;background:#ffd400}
.avatar-fallback{position:absolute;inset:0;display:grid;place-items:center;border-radius:50%;background:#ffd400;color:#111;font-weight:700}

/* V32: fast personal deletion mode */
.video-card{position:relative;transition:opacity .15s ease,transform .15s ease,background-color .15s ease}
.video-card.is-deleting{opacity:0;transform:scale(.97);pointer-events:none}
.ad-delete{position:absolute;top:5px;right:5px;width:25px;height:25px;border:0;border-radius:50%;display:grid;place-items:center;padding:0;background:rgba(16,16,16,.88);color:#fff;font:500 20px/1 Arial,sans-serif;cursor:pointer;opacity:0;visibility:hidden;transform:scale(.82);transition:opacity .12s ease,transform .12s ease,background-color .12s ease;z-index:4;box-shadow:0 1px 5px rgba(0,0,0,.38)}
.edit-mode .ad-delete{opacity:1;visibility:visible;transform:scale(1)}
.ad-delete:hover{background:#fff;color:#111}
.edit-mode .video-card{outline:1px solid rgba(255,212,0,.22)}
.edit-mode-badge{position:fixed;left:50%;top:12px;transform:translateX(-50%);z-index:1000;background:var(--yellow);color:#111;padding:8px 14px;border-radius:999px;font-weight:750;font-size:13px;box-shadow:0 5px 18px rgba(0,0,0,.35);pointer-events:none}
.edit-mode-badge[hidden]{display:none}

/* V33 — unified compact ad banner and quieter skip button */
.ad-motion-group{
  left:24px;
  bottom:var(--ui-banner-bottom,14px);
  gap:4px;
}
.ad-card,
body.theater .ad-card{
  width:min(var(--ui-banner-max-percent,48%),var(--ui-banner-max-px,520px));
  max-width:min(var(--ui-banner-max-percent,48%),var(--ui-banner-max-px,520px));
  min-width:0;
  height:52px;
  padding:6px 8px;
  gap:9px;
  border-radius:12px;
  background:rgba(24,24,24,.62);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  box-shadow:0 2px 8px rgba(0,0,0,.22);
}
.ad-card .avatar{width:32px;height:32px;border-radius:50%;flex:0 0 32px}
.ad-card .avatar img,.advertiser-icon img{border-radius:50%;object-fit:cover;display:block}
.ad-copy{gap:1px}
.ad-copy strong{font-size:13px;line-height:1.15;font-weight:650}
.ad-copy span{font-size:11px;line-height:1.15;color:rgba(255,255,255,.76)}
.cta{height:34px;padding:0 14px;font-size:12px;border-radius:17px;box-shadow:none}
.sponsor-row{font-size:11px;min-height:13px;gap:5px;color:rgba(255,255,255,.88)}
.sponsor-row .info-dot{width:14px;height:14px;border-width:1px;font-size:9px}
.skip-pill{
  opacity:.42;
  background:rgba(18,18,18,.42);
  border-color:rgba(255,255,255,.34);
  transition:opacity .15s ease,background .15s ease,transform .15s ease;
}
.skip-pill:hover,
.player-shell.controls-visible .skip-pill:hover,
.player-shell.is-paused .skip-pill:hover,
.player-shell.is-scrubbing .skip-pill:hover{
  opacity:1;
  background:rgba(18,18,18,.82);
}
@media(max-width:700px){
  .ad-card,body.theater .ad-card{width:min(68%,420px);max-width:min(68%,420px);height:50px;padding:5px 7px}
  .ad-card .avatar{width:30px;height:30px;flex-basis:30px}
  .cta{height:32px;padding:0 11px}
}

/* V35 — exact circular identity and unified CTA */
.ad-card{align-items:center;overflow:hidden}
.ad-card .avatar{
  width:38px!important;height:38px!important;min-width:38px!important;max-width:38px!important;
  flex:0 0 38px!important;aspect-ratio:1/1!important;padding:0!important;border-radius:50%!important;
  overflow:hidden;background:#fff;display:grid;place-items:center;
}
.ad-card .avatar img{
  width:100%!important;height:100%!important;min-width:100%!important;max-width:100%!important;
  aspect-ratio:1/1!important;border-radius:50%!important;object-fit:cover!important;object-position:center!important;
}
.ad-card .cta{height:38px;border-radius:19px;padding:0 18px;font-size:13px;font-weight:750;flex:0 0 auto}
.ad-card .ad-copy{min-width:0;overflow:hidden}
.ad-card .ad-copy strong,.ad-card .ad-copy span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Step 24: side list is never horizontally scrollable or clipped */
.page-grid,.sidebar,.video-list,.video-card,.video-card>div{min-width:0}
.sidebar{padding-left:0;overflow:hidden}
.video-list{width:100%;max-width:100%;overflow-y:auto!important;overflow-x:hidden!important;padding-left:3px;padding-right:8px;scrollbar-gutter:stable}
.video-card{width:100%;max-width:100%;grid-template-columns:minmax(118px,168px) minmax(0,1fr);margin-left:0}
.video-card h3,.video-card p,.video-card small{max-width:100%;overflow:hidden;text-overflow:ellipsis}

/* V38.2 — Quellen-Badges (YouTube vs. Ads Transparency Center) */
.src-badge{display:inline-block;font-size:10px;line-height:1;font-weight:700;letter-spacing:.02em;padding:2px 5px;border-radius:4px;vertical-align:middle;margin-left:4px}
.src-badge.src-yt{background:#ffd400;color:#111}
.src-badge.src-tc{background:#1a73e8;color:#fff}

/* V38.2.2 — current YouTube-style in-player advertiser lockup
   This deliberately replaces the old image-banner geometry. The lockup is
   assembled from avatar + two text rows + CTA, so no channel banner is cropped. */
.ad-motion-group{
  left:16px;
  bottom:18px;
  width:auto;
  max-width:calc(100% - 32px);
  gap:5px;
  align-items:flex-start;
  pointer-events:none;
}
.player-shell.controls-visible .ad-motion-group,
.player-shell.is-paused .ad-motion-group,
.player-shell.is-scrubbing .ad-motion-group{
  transform:translateY(-48px);
}
.ad-card,
body.theater .ad-card{
  width:auto;
  min-width:304px;
  max-width:min(381px,calc(100vw - 48px));
  height:48px;
  padding:4px 8px;
  gap:8px;
  border-radius:8px;
  overflow:visible;
  background:rgba(18,18,18,.78);
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
  box-shadow:0 2px 8px rgba(0,0,0,.3);
  pointer-events:auto;
}
.ad-card .avatar{
  width:36px!important;
  height:36px!important;
  min-width:36px!important;
  max-width:36px!important;
  flex:0 0 36px!important;
  padding:0!important;
  border-radius:50%!important;
  overflow:hidden;
  background:#f1f1f1;
}
.ad-card .avatar img{
  display:block;
  width:100%!important;
  height:100%!important;
  min-width:100%!important;
  max-width:100%!important;
  border-radius:50%!important;
  object-fit:cover!important;
  object-position:center!important;
}
.ad-card .ad-copy{
  min-width:0;
  flex:1 1 auto;
  gap:1px;
  overflow:hidden;
}
.ad-card .ad-copy strong{
  display:block;
  min-width:0;
  font-size:12px;
  font-weight:500;
  line-height:15px;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
}
.ad-card .ad-copy span{
  display:block;
  min-width:0;
  color:rgba(255,255,255,.72);
  font-size:10px;
  font-weight:400;
  line-height:13px;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
}
.ad-card .cta{
  flex:0 0 auto;
  width:auto;
  min-width:112px;
  max-width:129px;
  height:36px;
  padding:0 14px;
  border-radius:18px;
  overflow:hidden;
  background:#f2f2f2;
  color:#111;
  box-shadow:none;
  font-size:12px;
  font-weight:500;
  line-height:36px;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.ad-card .cta:hover{
  transform:none;
  background:#fff;
  box-shadow:none;
}
.sponsor-row{
  min-height:14px;
  max-width:381px;
  padding-left:0;
  gap:5px;
  overflow:hidden;
  color:rgba(255,255,255,.88);
  font-size:10px;
  line-height:14px;
  text-shadow:0 1px 3px rgba(0,0,0,.9);
  pointer-events:auto;
}
.sponsor-row > span:last-child{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.sponsor-row .info-dot{
  width:12px;
  height:12px;
  border-width:1px;
  font-size:8px;
  flex:0 0 12px;
}
@media(max-width:700px){
  .ad-motion-group{
    left:12px;
    right:12px;
    bottom:14px;
    max-width:none;
  }
  .ad-card,
  body.theater .ad-card{
    width:min(100%,381px);
    min-width:0;
    max-width:100%;
    height:48px;
    padding:4px 7px;
  }
  .ad-card .cta{
    min-width:96px;
    max-width:112px;
    padding:0 11px;
  }
}
@media(max-width:430px){
  .ad-card .cta{min-width:86px;max-width:96px;padding:0 9px;font-size:11px}
  .ad-card .ad-copy strong{font-size:11px}
  .ad-card .ad-copy span{font-size:9px}
}