/* Shared with Arcade's graphite/silver surfaces, in every section of Streamline. */
:root{
 --watch-glass:linear-gradient(145deg,rgba(38,38,38,.91),rgba(17,17,17,.87));
 --watch-control:linear-gradient(145deg,rgba(62,62,62,.58),rgba(24,24,24,.52));
 --watch-border:rgba(255,255,255,.24);
 --section-glass:var(--watch-glass);
 --section-control:linear-gradient(145deg,rgba(255,255,255,.14),rgba(255,255,255,.035));
 --section-ink:#f1f1f1;--section-muted:#bfbfbf;--section-border:rgba(255,255,255,.19);
 --section-highlight:inset 0 1px 0 rgba(255,255,255,.18),inset 1px 0 0 rgba(255,255,255,.055);
 --section-shadow:0 18px 42px rgba(0,0,0,.35);--section-opaque:#1a1a1a;
}
html[data-theme=light]{
 --section-glass:linear-gradient(145deg,rgba(255,255,255,.83),rgba(238,238,238,.70));
 --section-control:linear-gradient(145deg,rgba(255,255,255,.86),rgba(239,239,239,.55));
 --section-ink:#202020;--section-muted:#626262;--section-border:rgba(36,36,36,.18);
 --section-highlight:inset 0 1px 0 #fff,inset 1px 0 0 rgba(255,255,255,.7);
 --section-shadow:0 16px 38px rgba(48,48,48,.12);--section-opaque:#f7f7f7;
}
html:root body .topbar{
 background:var(--section-glass)!important;color:var(--section-ink)!important;border-color:var(--section-border)!important;
 box-shadow:var(--section-highlight),var(--section-shadow)!important;
 -webkit-backdrop-filter:blur(24px) saturate(0%)!important;backdrop-filter:blur(24px) saturate(0%)!important;
}
html:root body .topbar :is(.nav-link,.icon-button,.profile-button,.brand-quick-button,.searchbox,#arcadeBack,#pcOpen,.household-tools>summary){
 background:var(--section-control)!important;color:var(--section-ink)!important;border:1px solid var(--section-border)!important;
 border-radius:12px!important;box-shadow:var(--section-highlight)!important;
}
html:root body .topbar :is(.nav-link,.icon-button,.profile-button,#arcadeBack,#pcOpen,.household-tools>summary):hover{
 border-color:var(--accent)!important;
}
html:root body .topbar .nav-link.is-active{
 background:linear-gradient(145deg,rgba(var(--accent-rgb),.27),rgba(var(--accent-rgb),.10))!important;
 border-color:var(--accent)!important;
}
html:root body .topbar :is(.brand,.searchbox input,time){color:var(--section-ink)!important}
html:root body .topbar .searchbox input::placeholder{color:var(--section-muted)!important}
html:root body .topbar .section-brand-label{color:var(--accent)}
@media(min-width:801px){
 html:root body .topbar :is(.nav-link,.top-actions>.icon-button,.profile-button,#arcadeBack,#pcOpen,.household-tools>summary){
  width:44px!important;min-width:44px!important;height:44px!important;min-height:44px!important;padding:10px!important;flex:0 0 44px!important;
 }
 html:root body .topbar :is(.nav-link,.top-actions>.icon-button,.profile-button)>svg{width:22px!important;height:22px!important}
 html:root body .topbar .top-search{height:44px;min-height:44px;width:clamp(90px,12vw,220px);min-width:80px}
}
@media(max-width:800px),(max-width:1000px) and (max-height:500px){
 html:root body:is(.arcade-view,.youtube-view).streamline-mobile-companion .topbar{
  height:64px!important;min-height:64px!important;grid-template-rows:44px!important;align-items:center;
 }
 html:root body:is(.arcade-view,.youtube-view).streamline-mobile-companion .topbar .top-actions{display:flex!important;gap:5px!important}
 html:root body:is(.arcade-view,.youtube-view).streamline-mobile-companion .mobile-header-guide-info{display:none!important}
 html:root body:is(.arcade-view,.youtube-view).streamline-mobile-companion .top-actions>:not(#arcadeBack):not(#openPreferences){display:none!important}
 html:root body:is(.arcade-view,.youtube-view).streamline-mobile-companion .top-actions>#arcadeBack:not([hidden]){display:flex!important}
}
html.silk-lite body .topbar,html:root body.silk-browser .topbar{background:var(--section-opaque)!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
@media(prefers-reduced-transparency:reduce){html:root body .topbar{background:var(--section-opaque)!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}}

/* Neutral backing prevents a cool page wash from showing through the section glass. */
html:root body:is(.arcade-view,.youtube-view){
 --bg:#080808;--bg-deep:#030303;--surface:#181818;--surface-2:#222;
 --text:#f3f3f3;--muted:#b3b3b3;--line:rgba(255,255,255,.16);
 --sg-panel:rgba(13,13,13,.66);--sg-dialog:rgba(19,19,19,.94);
 --sg-wash:rgba(153,153,153,.16);--sg-glow:rgba(77,77,77,.16);--sg-opaque:#161616;
}
html:root[data-theme=light] body:is(.arcade-view,.youtube-view){
 --bg:#d0d0d0;--bg-deep:#c2c2c2;--surface:#f0f0f0;--surface-2:#e7e7e7;
 --text:#292929;--muted:#606060;--line:rgba(82,82,82,.2);
 --sg-panel:rgba(250,250,250,.61);--sg-dialog:rgba(247,247,247,.95);
 --sg-shadow:rgba(48,48,48,.1);--sg-wash:rgba(255,255,255,.68);--sg-glow:rgba(163,163,163,.2);--sg-opaque:#f0f0f0;
}
html:root body:is(.arcade-view,.youtube-view) .mobile-bottom-nav{background:var(--section-glass)!important;border-color:var(--section-border)!important;-webkit-backdrop-filter:blur(24px) saturate(0%);backdrop-filter:blur(24px) saturate(0%)}
.youtube-thumbnail{background:linear-gradient(140deg,#222,#171717)}

html:root body .topbar :is(button,a,summary):focus-visible{outline:3px solid var(--section-ink)!important;outline-offset:-3px!important;transform:none!important}