/* Liquid glass mobile navigation: a translucent, blurred bar with a bright edge and a glass lens that slides to the active tab. Loaded last.
   The unused ID in :is() lifts these rules above the opaque themed-surface rules. */
:is(html,#liquid-glass) body .app .bottomnav{
 --glass-accent:#4b3fd6;--glass-label:#283247;
 isolation:isolate;overflow:hidden;padding:6px!important;gap:2px!important;border-radius:28px!important;
 background:linear-gradient(180deg,rgba(255,255,255,.36),rgba(255,255,255,.16))!important;
 border:1px solid rgba(255,255,255,.7)!important;
 box-shadow:0 12px 32px rgba(17,24,39,.16),0 2px 8px rgba(17,24,39,.08),inset 0 1px 0 rgba(255,255,255,.95),inset 0 -1px 0 rgba(255,255,255,.4)!important;
 -webkit-backdrop-filter:blur(9px) saturate(190%) brightness(1.08)!important;backdrop-filter:blur(9px) saturate(190%) brightness(1.08)!important;
 transition:transform .3s ease,opacity .3s ease
}
/* Specular sheen across the top half of the glass. */
:is(html,#liquid-glass) body .app .bottomnav::after{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;background:linear-gradient(180deg,rgba(255,255,255,.2),rgba(255,255,255,0) 40%),radial-gradient(120% 90% at 50% -30%,rgba(255,255,255,.14),transparent 60%)}
:is(html,#liquid-glass) body[data-theme=dark] .app .bottomnav{
 --glass-accent:#f1ecff;--glass-label:#e6ebf5;
 background:linear-gradient(180deg,rgba(40,46,66,.22),rgba(12,15,24,.12))!important;
 border-color:rgba(255,255,255,.16)!important;
 box-shadow:0 14px 34px rgba(0,0,0,.45),0 2px 8px rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,.22),inset 0 -1px 0 rgba(255,255,255,.06)!important
}
:is(html,#liquid-glass) body[data-theme=dark] .app .bottomnav::after{background:linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,0) 50%),radial-gradient(120% 90% at 50% -30%,rgba(255,255,255,.12),transparent 60%)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
 :is(html,#liquid-glass) body .app .bottomnav{background:rgba(255,255,255,.94)!important}
 :is(html,#liquid-glass) body[data-theme=dark] .app .bottomnav{background:rgba(22,25,36,.95)!important}
}

/* Tabs sit on the glass: no tiles or borders, just the icon and label. */
:is(html,#liquid-glass) body .app .bottomnav button{position:relative;z-index:1;text-shadow:0 1px 2px rgba(255,255,255,.65);background:transparent!important;border:0!important;box-shadow:none!important;color:var(--glass-label)!important;border-radius:22px!important;transition:color .25s ease}
:is(html,#liquid-glass) body .app .bottomnav button .ico{background:none!important;border:0!important;box-shadow:none!important;color:inherit!important;transition:transform .25s cubic-bezier(.3,1.4,.5,1)}
:is(html,#liquid-glass) body .app .bottomnav button .ico svg{color:inherit!important;stroke:currentColor!important}
:is(html,#liquid-glass) body .app .bottomnav button.active{color:var(--glass-accent)!important;font-weight:700}
:is(html,#liquid-glass) body .app .bottomnav button:active .ico{transform:scale(.88)}
:is(html,#liquid-glass) body .app .bottomnav button.active .ico{transform:translateY(-1px)}

/* The lens: a brighter piece of glass behind the active tab that glides between tabs. */
:is(html,#liquid-glass) body .app .bottomnav .nav-lens{position:absolute;z-index:0;left:0;top:0;width:var(--lens-w,0);height:var(--lens-h,0);transform:translate(var(--lens-x,0),var(--lens-y,0));border-radius:22px;pointer-events:none;opacity:0;
 background:linear-gradient(180deg,rgba(255,255,255,.9),rgba(255,255,255,.45)),linear-gradient(135deg,rgba(58,187,215,.16),rgba(151,104,238,.2));
 box-shadow:inset 0 1px 0 #fff,inset 0 -1px 1px rgba(255,255,255,.5),inset 0 0 0 .5px rgba(151,104,238,.25),0 4px 14px rgba(91,63,208,.18);
 transition:transform .5s cubic-bezier(.3,1.3,.45,1),width .35s ease,height .35s ease,opacity .2s ease}
:is(html,#liquid-glass) body .app .bottomnav.has-lens .nav-lens{opacity:1}
:is(html,#liquid-glass) body[data-theme=dark] .app .bottomnav .nav-lens{background:linear-gradient(180deg,rgba(255,255,255,.2),rgba(255,255,255,.06)),linear-gradient(135deg,rgba(58,187,215,.22),rgba(151,104,238,.3));box-shadow:inset 0 1px 0 rgba(255,255,255,.35),inset 0 -1px 1px rgba(255,255,255,.08),inset 0 0 0 .5px rgba(196,181,255,.3),0 4px 16px rgba(0,0,0,.35)}
@media (prefers-reduced-motion:reduce){:is(html,#liquid-glass) body .app .bottomnav .nav-lens,:is(html,#liquid-glass) body .app .bottomnav button .ico{transition:none}}
:is(html,#liquid-glass) body[data-theme=dark] .app .bottomnav button{text-shadow:0 1px 3px rgba(0,0,0,.7)}
:is(html,#liquid-glass) body .app .bottomnav button .ico svg{filter:drop-shadow(0 1px 1.5px rgba(255,255,255,.6))}
:is(html,#liquid-glass) body[data-theme=dark] .app .bottomnav button .ico svg{filter:drop-shadow(0 1px 2px rgba(0,0,0,.6))}

/* ---- Liquid glass trial on other surfaces. Each block can be removed on its own. ---- */
:root{--lg-modal:#fff;--lg-fill:rgba(255,255,255,.58);--lg-fill-strong:rgba(255,255,255,.74);--lg-edge:rgba(15,23,42,.13);--lg-line:rgba(15,23,42,.10);--lg-hi:rgba(255,255,255,.9);--lg-shadow:0 10px 30px rgba(17,24,39,.14),0 2px 6px rgba(17,24,39,.06)}
body[data-theme=dark]{--lg-modal:#161a26;--lg-fill:rgba(34,39,56,.5);--lg-fill-strong:rgba(22,26,38,.7);--lg-edge:rgba(255,255,255,.14);--lg-line:rgba(255,255,255,.08);--lg-hi:rgba(255,255,255,.18);--lg-shadow:0 14px 34px rgba(0,0,0,.45),0 2px 8px rgba(0,0,0,.3)}
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
 /* Popups sit over a dark dimmed page, so they stay nearly solid to read white (or dark) rather than grey. */
 :is(html,#liquid-glass) body :is(#socialDialog:not(.composer-inline):not(.avatar-customiser-dialog),#accountModal) .card.modal-card{background:var(--lg-modal)!important;border:1px solid var(--lg-edge)!important;box-shadow:var(--lg-shadow),inset 0 1px 0 var(--lg-hi)!important;-webkit-backdrop-filter:blur(26px) saturate(180%)!important;backdrop-filter:blur(26px) saturate(180%)!important}
 /* Floating menus and the notification prompt. */
 :is(html,#liquid-glass) body :is(.growth-manage>.growth-actions,.feed-sort-menu,#userSearchResults,.push-offer){background:var(--lg-fill-strong)!important;border:1px solid var(--lg-edge)!important;box-shadow:var(--lg-shadow),inset 0 1px 0 var(--lg-hi)!important;-webkit-backdrop-filter:blur(22px) saturate(180%);backdrop-filter:blur(22px) saturate(180%)}
 /* Round icon buttons and secondary pill buttons: light glass with a bright top edge. */
 :is(html,#liquid-glass) body :is(.round-control,.chip:not(.active):not(.primary):not([aria-pressed=true]):not([aria-selected=true]):not(:disabled):not(.profile-menu-item):not(.profile-setting-row):not(#profileAccountMenu *):not(.profile-account-sheet *)){background:var(--lg-fill)!important;border-color:var(--lg-edge)!important;box-shadow:inset 0 1px 0 var(--lg-hi),0 1px 3px var(--lg-line)!important;-webkit-backdrop-filter:blur(12px) saturate(170%);backdrop-filter:blur(12px) saturate(170%)}
}

/* ---- Liquid glass, wider: translucent panels and glossy controls on the plain page background. ---- */
/* Panels and cards: translucent glass with a bright top edge. No live blur here, so long pages scroll smoothly on phones. */
:root{--lg-panel:rgba(255,255,255,.66);--lg-panel-edge:rgba(255,255,255,.8);--lg-panel-line:rgba(120,135,170,.22)}
body[data-theme=dark]{--lg-panel:rgba(20,24,36,.58);--lg-panel-edge:rgba(255,255,255,.1);--lg-panel-line:rgba(255,255,255,.08)}
:is(html,#liquid-glass) body[data-theme] :is(.card:not(.post):not(.sponsored-feed-card):not(.network-feed-card):not(.modal-card),.desktop-panel,.composer,.market-card,.watched-market-card,.growth-hub,.growth-coin,.launch-card,.launch-trending-card,.launch-discovery-card,.trend-topic,.trend-post,.official-discovery-card,.community-discovery-card,.your-space-tile,.inbox-workspace,.profile-stats-grid .stat){background-color:var(--lg-panel)!important;border-color:var(--lg-panel-line)!important;box-shadow:inset 0 1px 0 var(--lg-panel-edge),0 6px 22px rgba(17,24,39,.06)!important}
:is(html,#liquid-glass) body[data-theme=dark] :is(.card:not(.post):not(.sponsored-feed-card):not(.network-feed-card):not(.modal-card),.desktop-panel,.composer,.market-card,.watched-market-card,.growth-hub,.growth-coin,.launch-card,.launch-trending-card,.launch-discovery-card,.trend-topic,.trend-post,.official-discovery-card,.community-discovery-card,.your-space-tile,.inbox-workspace,.profile-stats-grid .stat){box-shadow:inset 0 1px 0 var(--lg-panel-edge),0 8px 26px rgba(0,0,0,.28)!important}
/* Search and text boxes: clear glass. */
:is(html,#liquid-glass) body[data-theme] :is(.search input,#globalSearch,.composer .input,.inbox-search,.social-reply-form input){background-color:var(--lg-fill)!important;border-color:var(--lg-panel-line)!important;box-shadow:inset 0 1px 0 var(--lg-panel-edge)!important}
/* Main buttons and selected tabs keep their colour and gain a liquid gloss. */
:is(html,#liquid-glass) body :is(.btn.primary,.chip.active,.chip[aria-pressed=true],.chip[aria-selected=true],[role=tab][aria-selected=true].chip){box-shadow:inset 0 1px 0 rgba(255,255,255,.55),inset 0 12px 14px -10px rgba(255,255,255,.4),inset 0 -2px 6px rgba(0,0,0,.12),0 6px 16px rgba(91,63,208,.22)!important}
/* Header strip: the same clear glass so the backdrop runs to the top of the page. */
:is(html,#liquid-glass) body[data-theme] .topbar{background-color:var(--lg-panel)!important;border-color:var(--lg-panel-line)!important}
/* Inside popups the outer glow gets cut into a square by the frosted layer, so buttons keep only the inner gloss there. */
:is(html,#liquid-glass) body .modal-card :is(.btn.primary,.chip.active,.chip[aria-pressed=true],.chip[aria-selected=true]){box-shadow:inset 0 1px 0 rgba(255,255,255,.55),inset 0 12px 14px -10px rgba(255,255,255,.4),inset 0 -2px 6px rgba(0,0,0,.12)!important}