/* Solid fallback first; glass enhancement never trades away legibility. */
/* Shared by the consumer app and its embedded preview; no extra image requests. */
:root{--app-background:radial-gradient(ellipse at 8% 0%,#d83b4f16,transparent 52%),radial-gradient(ellipse at 100% 85%,#64162b12,transparent 55%),linear-gradient(145deg,#fff8fa 0%,#fceff3 55%,#f5e9ef 100%)}
body.app-host{
 background-color:#fff8fa;
 background-image:var(--app-background);
 background-attachment:fixed;
}
.sandbox-demo.mobile-preview .sandbox-device:has(.sandbox-client-frame){background-color:#fff8fa;background-image:var(--app-background)}
html.virtual-phone-client,html.virtual-phone-client body.app-host{background:transparent}
/* The embedded phone keeps native scrolling without desktop scrollbar chrome. */
html.virtual-phone-client,html.virtual-phone-client *{scrollbar-width:none!important}
html.virtual-phone-client::-webkit-scrollbar,html.virtual-phone-client *::-webkit-scrollbar{display:none;width:0;height:0}
.chrome-desktop-top{position:fixed;top:24px;right:28px;z-index:51}
.app-chrome .chrome-desktop-top .chrome-bell{background:#fff8fad9;border:1px solid #fff;border-radius:50%;backdrop-filter:blur(24px)}
.chrome-desktop-top .chrome-link>span{left:auto;right:60px}
@media(min-width:1000px){.app-chrome .chrome-notifications{inset:86px 28px auto auto}.app-host:has(.app-chrome) #app{padding-top:72px}}
@media(max-width:999px){.chrome-desktop-top{display:none}.app-chrome .chrome-dock .chrome-link{flex:1;min-width:0}}
.editor-switch-shell{padding-bottom:0!important}
.editor-switch{display:flex;gap:6px;padding:6px;width:fit-content;max-width:100%;border:1px solid var(--line);border-radius:24px;background:#fff8facf;box-shadow:inset 0 1px #fff}
@media(min-width:1000px){.editor-switch{margin-inline:auto}}
.editor-switch a{display:flex;align-items:center;justify-content:center;gap:9px;min-height:44px;padding:10px 18px;border-radius:18px;color:var(--burgundy);font-weight:700;transition:background .2s,color .2s}
.editor-switch a[aria-current]{background:var(--burgundy);color:#fff}
.editor-switch svg{width:22px;height:22px;flex:none}
.editor-switch a:focus-visible{outline:3px solid var(--red);outline-offset:2px}
@media(max-width:450px){.editor-switch{width:100%}.editor-switch a{flex:1;padding:10px 8px;font-size:14px}}
@media(prefers-reduced-motion:reduce){.editor-switch a{transition:none}}
.app-host:has(.app-chrome)>.nav{display:none}
.app-chrome.unified-navigation{display:block;position:static;inset:auto;width:auto;padding:0;border:0;background:none}
.app-chrome svg{width:24px;height:24px;flex:none}
.app-chrome .chrome-messages{display:none}
@media(min-width:1000px){
 .app-chrome .chrome-messages{position:fixed;right:28px;bottom:24px;z-index:49;display:flex;align-items:center;justify-content:center;gap:12px;min-height:58px;min-width:190px;padding:14px 22px;background:#fff8fa;color:var(--burgundy);border:1px solid #fff;border-radius:999px;box-shadow:0 8px 32px #64162b24,inset 0 1px 0 #fff;font-size:15px;font-weight:750;transition:box-shadow .18s,background .18s}
 .app-chrome .chrome-messages:hover{background:#fff;box-shadow:0 10px 36px #64162b30}
 .app-host:has(.chrome-messages) #app{padding-bottom:110px}
}
.chrome-message-badge{display:grid;place-items:center;min-width:24px;height:24px;padding:0 6px;border-radius:999px;background:var(--red-ink);color:#fff;font-size:12px;line-height:1;font-variant-numeric:tabular-nums}
.chrome-message-badge[hidden]{display:none}
@supports(backdrop-filter:blur(20px)){.app-chrome .chrome-messages{background:#fff8fac7;backdrop-filter:blur(24px) saturate(160%);-webkit-backdrop-filter:blur(24px) saturate(160%)}}
@media(prefers-reduced-transparency:reduce){.app-chrome .chrome-messages{background:#fff8fa;backdrop-filter:none;-webkit-backdrop-filter:none}}
@media(prefers-reduced-motion:reduce){.app-chrome .chrome-messages{transition:none}}
.app-chrome .chrome-link{position:relative;display:flex;align-items:center;justify-content:center;width:var(--chrome-bell-size,50px);height:var(--chrome-bell-size,50px);min-height:var(--chrome-bell-size,50px);padding:12px;border:1px solid transparent;border-radius:18px;background:transparent;color:var(--burgundy);box-shadow:none;transition:background .18s,transform .18s}
.app-chrome .chrome-link:hover{background:#f8e8eb;transform:translateY(-1px)}
.app-chrome .chrome-link[aria-current]{background:#fbe4ea;color:var(--red-ink);border-color:#eec2cd;box-shadow:inset 0 1px #fff}
.chrome-link>span{position:absolute;left:64px;padding:8px 12px;border-radius:10px;background:#64162b;color:#fff;white-space:nowrap;font-size:12px;pointer-events:none;opacity:0}
.chrome-link:hover>span,.chrome-link:focus-visible>span{opacity:1}
.chrome-brand{position:fixed;top:24px;left:26px;z-index:51;display:grid;place-items:center;width:48px;height:48px}.chrome-brand img{border-radius:14px}
.chrome-rail{position:fixed;z-index:50;left:20px;top:50%;transform:translateY(-50%);display:grid;gap:8px;padding:10px;border:1px solid #fff;border-radius:28px;background:#fff5f8;box-shadow:0 12px 40px #64162b14,inset 0 1px 1px #fff}
.chrome-tools{position:fixed;bottom:24px;left:30px;z-index:50}.chrome-mobile-top,.chrome-dock{display:none}
.app-host:has(.app-chrome) #app{margin-left:112px;padding-bottom:32px}
.app-host:has(.app-chrome) #app>:is(.shell,.section){padding-top:24px}
.app-host:has(.app-chrome) .discovery-layout{grid-template-columns:minmax(0,480px) minmax(240px,360px);justify-content:center}
.chrome-sheet{position:fixed;inset:16px auto 16px 108px;margin:0;width:min(400px,calc(100vw - 140px));max-height:calc(100dvh - 32px);padding:24px;border:1px solid #fff;border-radius:28px;background:#fff8fa;color:var(--ink);box-shadow:0 24px 90px #310c1933;overflow:auto;overscroll-behavior:contain}
.chrome-sheet::backdrop{background:#2b17202b;backdrop-filter:blur(3px)}
.chrome-sheet header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:20px}.chrome-sheet h2{font-size:25px;margin:0;letter-spacing:-.04em}
.chrome-close{display:grid;place-items:center;width:44px;height:44px;flex:none;border-radius:50%;background:#fff;color:var(--burgundy);border:1px solid var(--line)}
.chrome-sheet nav{display:grid;gap:5px}.app-chrome .chrome-sheet .chrome-link{justify-content:flex-start;width:100%;gap:16px;border-radius:15px}
.chrome-sheet .chrome-link>span{position:static;opacity:1;background:none;color:inherit;padding:0;font-size:15px;white-space:normal;pointer-events:auto;text-align:left}
.chrome-signout{display:flex;align-items:center;gap:16px;margin-top:20px;padding:14px;width:100%;border-top:1px solid var(--line);background:transparent;color:var(--burgundy);text-align:left}
.chrome-all{display:block;padding:18px 0 0;color:var(--red-ink);font-weight:700}.chrome-sheet .panel{padding:18px;border-radius:18px}.chrome-sheet .notification-item{gap:10px}.chrome-sheet .notification-item>div{min-width:0;overflow-wrap:anywhere}.chrome-sheet .notification-item p{font-size:14px}
.app-chrome :focus-visible{outline:3px solid var(--red);outline-offset:3px}
.app-chrome .chrome-sheet .panel{margin:0;width:100%}
.app-chrome .chrome-sheet .notification-item{justify-content:flex-start;align-items:flex-start;text-align:left;font-size:14px;font-weight:400;line-height:1.5}
.chrome-sheet .notification-item b{font-size:15px}.chrome-sheet .notification-item>span{flex:none}
.app-chrome .chrome-all{font-size:14px;justify-content:flex-start;text-align:left}
@supports(backdrop-filter:blur(20px)){.chrome-rail,.chrome-dock,.chrome-mobile-top .chrome-link,.chrome-sheet{background:#fff8fad9;backdrop-filter:blur(24px) saturate(160%);-webkit-backdrop-filter:blur(24px) saturate(160%)}}
@media(max-width:999px){
 .app-chrome .chrome-brand,.chrome-rail,.chrome-tools{display:none}
 .app-host:has(.app-chrome) #app{margin-left:0;padding-top:calc(72px + var(--app-safe-top,env(safe-area-inset-top)));padding-bottom:calc(102px + var(--app-safe-bottom,env(safe-area-inset-bottom)))}
 .chrome-mobile-top{position:fixed;z-index:50;top:calc(12px + var(--app-safe-top,env(safe-area-inset-top)));left:16px;right:16px;display:flex;justify-content:space-between;pointer-events:none}
 .chrome-mobile-top .chrome-link{pointer-events:auto;background:#fff8fad9;border:1px solid #fff;box-shadow:0 8px 24px #64162b13;border-radius:50%}
 .chrome-mobile-top .chrome-link>span{display:none}
 .chrome-dock{position:fixed;z-index:50;bottom:calc(12px + var(--app-safe-bottom,env(safe-area-inset-bottom)));left:50%;transform:translateX(-50%);display:flex;justify-content:space-around;gap:8px;width:min(350px,calc(100% - 32px));padding:8px 12px;border:1px solid #fff;border-radius:30px;background:#fff8fa;box-shadow:0 12px 40px #64162b23,inset 0 1px #fff}
 .app-chrome .chrome-dock .chrome-link{width:88px;height:58px;flex-direction:column;gap:4px;padding:6px;border-radius:22px}
 .chrome-dock .chrome-link>span{position:static;opacity:1;padding:0;background:none;color:inherit;font-size:10px;white-space:nowrap}
 .chrome-sheet{inset:calc(12px + var(--app-safe-top,env(safe-area-inset-top))) 12px auto;width:auto;max-height:calc(100dvh - 32px - var(--app-safe-top,env(safe-area-inset-top)) - var(--app-safe-bottom,env(safe-area-inset-bottom)));padding:20px}
 .app-host:has(.app-chrome) #app>:is(.shell,.section){padding-top:12px;padding-inline:16px}
 .app-host:has(.app-chrome) .discovery-layout{grid-template-columns:minmax(0,1fr)}
 .app-host:has(.app-chrome) .app-head h1{font-size:clamp(26px,7vw,36px)}
 .app-host:has(.app-chrome) .real-discovery .fc-profile{height:min(calc(100dvh - 370px - var(--app-safe-top,env(safe-area-inset-top)) - var(--app-safe-bottom,env(safe-area-inset-bottom))),550px);min-height:240px}
}
@media(min-width:1000px) and (max-height:700px){.chrome-rail{gap:2px;padding:5px}.app-chrome .chrome-rail .chrome-link{height:44px;min-height:44px}}
@media(prefers-reduced-motion:reduce){.app-chrome .chrome-link{transition:none}}
@supports(backdrop-filter:blur(20px)){.chrome-dock{background:#fff8faa6}}
@media(prefers-reduced-transparency:reduce){.chrome-rail,.chrome-dock,.chrome-mobile-top .chrome-link,.chrome-sheet{background:#fff8fa;backdrop-filter:none;-webkit-backdrop-filter:none}}
.chrome-event-context{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-width:0;max-width:100%;height:50px;text-align:center;color:var(--burgundy);pointer-events:auto}
.chrome-event-context[hidden]{display:none}
.chrome-event-context strong{display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px;line-height:1.3;font-weight:750;letter-spacing:-.015em}
.chrome-event-context small{font-size:10px;line-height:1.2;color:#8b5365;letter-spacing:.04em}
.chrome-event-context[data-context-kind="page"] small{order:-1;text-transform:uppercase;font-size:9px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chrome-event-context[data-context-kind="page"] strong{font-size:17px}
.chrome-event-context small:empty{display:none}
.app-host:has(.app-chrome) .chrome-relocated-heading{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.app-host:has(.app-chrome) .chrome-relocated-head:not(:has(button,a,input,select)){position:absolute;width:1px;height:1px;min-height:0;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;pointer-events:none}
.chrome-desktop-context{position:fixed;z-index:49;top:24px;left:112px;right:100px;display:flex;justify-content:center;pointer-events:none}
.chrome-desktop-context .chrome-event-context{max-width:360px;padding:0 16px}
@media(max-width:999px){.chrome-desktop-context{display:none}.app-chrome .chrome-mobile-top{gap:10px;align-items:center}.chrome-mobile-top>.chrome-link{flex:none}.chrome-mobile-top>.chrome-event-context{flex:1}}

.chrome-event-context strong,.chrome-event-context[data-context-kind="page"] strong{font-size:17px;line-height:1.3;font-weight:750}
.chrome-event-context small,.chrome-event-context[data-context-kind="page"] small{order:0;font-size:11px;font-weight:400;line-height:1.3;text-transform:none;letter-spacing:0;color:#8b5365}
.app-chrome .chrome-event-context{opacity:var(--chrome-context-opacity,1);transition:opacity .16s ease;pointer-events:none}
@media(prefers-reduced-motion:reduce){.app-chrome .chrome-event-context{transition:none}}

/* The full notification center and bell panel share the same cards and controls. */
.notifications-page{max-width:760px;margin-inline:auto}.notification-center{min-width:0}.notification-center-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:16px;font-size:13px;color:var(--muted)}.notification-center-toolbar .ghost{min-height:40px;padding:9px 12px;font-size:12px}.notification-center-toolbar button:disabled{opacity:.5;cursor:default}
:is(.notifications-page,.chrome-notifications) .notification-list{display:grid;gap:10px}
:is(.notifications-page,.app-chrome .chrome-notifications) .notification-item{display:flex;justify-content:flex-start;align-items:flex-start;gap:12px;margin:0;width:100%;padding:16px;border:1px solid #efdce3;border-radius:18px;background:#ffffffa8;box-shadow:0 5px 18px #64162b08;text-align:left;font-size:14px;font-weight:400;line-height:1.5;color:var(--ink);text-decoration:none}
:is(.notifications-page,.app-chrome .chrome-notifications) .notification-item.unread{background:#fff0f5d9;border-color:#efbdcd}
:is(.notifications-page,.chrome-notifications) .notification-item>span{flex:none;width:38px;height:38px;font-size:19px}:is(.notifications-page,.chrome-notifications) .notification-item>div{min-width:0;flex:1;overflow-wrap:anywhere}:is(.notifications-page,.chrome-notifications) .notification-item b{font-size:15px}:is(.notifications-page,.chrome-notifications) .notification-item p{font-size:14px;margin:4px 0 8px}:is(.notifications-page,.chrome-notifications) .notification-item small{font-size:12px;color:var(--muted)}
.notification-unread-indicator{flex:none;width:7px;height:7px;border-radius:50%;background:var(--red);margin-top:8px}.notification-empty{text-align:center;padding:32px 20px;border:1px solid #efdce3;border-radius:20px;background:#ffffffa8}.notification-empty>span{display:inline-grid;place-items:center;width:48px;height:48px;border-radius:50%;background:var(--rose);color:var(--burgundy);margin-bottom:12px}.notification-empty h2{font-size:20px;margin:0 0 8px}.notification-empty p{font-size:14px;color:var(--muted);margin:0}

.notification-center-toolbar{display:grid;grid-template-columns:minmax(0,1fr);gap:10px}.notification-center-toolbar .ghost{display:flex;width:100%;max-width:none;justify-content:center;align-items:center;text-align:center;line-height:1.25;min-height:46px}

.notification-source{display:flex;align-items:center;flex-wrap:wrap;gap:7px;margin:0 0 8px!important;font-size:10px;font-weight:750;letter-spacing:.02em}.notification-source>span{display:inline-flex;padding:4px 8px;border-radius:7px;background:#f0edf6;color:#635182}.notification-source.is-organizer>span{background:#fde5cb;color:#8d561f}.notification-source small{font-size:10px!important;font-weight:500;color:var(--muted);margin:0!important}

@media(min-width:1000px){.app-chrome .chrome-sheet[data-chrome-dialog="menu"]{inset:auto auto 92px 24px;width:min(420px,calc(100vw - 48px));height:auto;max-height:calc(100dvh - 120px);transform-origin:bottom left}.app-chrome .chrome-sheet[data-chrome-dialog="menu"][open]{animation:chromeMenuRise .28s cubic-bezier(.2,.8,.2,1)}}
@keyframes chromeMenuRise{from{opacity:0;transform:translateY(18px) scale(.97)}to{opacity:1;transform:none}}@media(prefers-reduced-motion:reduce){.app-chrome .chrome-sheet[data-chrome-dialog="menu"][open]{animation:none}}
@media(max-width:999px){.app-chrome .chrome-sheet[data-chrome-dialog="menu"],.app-chrome .chrome-sheet[data-chrome-dialog="notifications"]{left:12px!important;right:12px!important;width:calc(100% - 24px)!important;max-width:none!important;box-sizing:border-box;margin-left:0!important;margin-right:0!important}}

/* Notification contents scroll within the same height budget as desktop messages. */
.app-chrome .chrome-notifications{box-sizing:border-box;height:auto;max-height:min(700px,calc(100dvh - 126px));overflow:hidden}.app-chrome .chrome-notifications[open]{display:flex;flex-direction:column}.chrome-notifications>header{flex:none}.chrome-notifications>[data-chrome-notifications]{min-height:0;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin}.chrome-notifications .notification-center{min-width:0}@media(max-width:999px){.app-chrome .chrome-notifications{max-height:min(700px,calc(100dvh - 126px - var(--app-safe-top,env(safe-area-inset-top,0px)) - env(safe-area-inset-bottom,0px)))}}

:root{--app-glass-surface:#fff8fa;--app-glass-filter:none}@supports(backdrop-filter:blur(20px)){:root{--app-glass-surface:#fff8faa6;--app-glass-filter:blur(24px) saturate(160%)}}
.app-chrome :is(.chrome-dock,.chrome-rail,.chrome-sheet,.chrome-messages),.app-chrome :is(.chrome-mobile-top,.chrome-desktop-top,.chrome-tools)>.chrome-link{background:var(--app-glass-surface);backdrop-filter:var(--app-glass-filter);-webkit-backdrop-filter:var(--app-glass-filter)}
@media(prefers-reduced-transparency:reduce){:root{--app-glass-surface:#fff8fa;--app-glass-filter:none}}

@media(min-width:1000px){.app-chrome .chrome-rail [data-chat-badge]{display:none!important}}
/* v474/v475: demo phone status-bar backdrop identical to the iOS app: the preview frame runs under the status bar (--app-safe-top), content scrolls underneath a Liquid Glass blur that fades out below it (one layer, no band). */
html.virtual-phone-client body::before{content:"";position:fixed;left:0;right:0;top:0;height:calc(var(--app-safe-top,0px) + 10px);z-index:49;pointer-events:none;background:linear-gradient(#fff8fadd,#fff8fa99 70%,#fff8fa00);-webkit-backdrop-filter:blur(10px) saturate(160%);backdrop-filter:blur(10px) saturate(160%);-webkit-mask-image:linear-gradient(#000 65%,transparent);mask-image:linear-gradient(#000 65%,transparent)}
.sandbox-demo.mobile-preview .sandbox-device:has(.sandbox-client-frame)>.sandbox-status-bar{z-index:4}
/* v477 Liquid Glass (iOS 26 HIG) for floating chrome: lighter translucent fill, blur + saturation, specular edge, content visible
   through. Shapes, sizes and positions unchanged. Applies to app, mobile web and the demo phone (same client). */
:root{--lg-fill:linear-gradient(180deg,#ffffff70,#fff4f854);--lg-filter:blur(18px) saturate(190%) brightness(1.04);
 --lg-edge:inset 0 1px 0 #ffffffe6,inset 0 -1px 0 #ffffff59,inset 1px 0 0 #ffffff4d,inset -1px 0 0 #ffffff4d,0 10px 30px #45182d1f,0 1px 2px #45182d14}
@supports((backdrop-filter:blur(2px)) or (-webkit-backdrop-filter:blur(2px))){
 .app-chrome .chrome-dock,.app-chrome .chrome-mobile-top>.chrome-link,.app-chrome .chrome-desktop-top>.chrome-link,.fc-mobile-dock,.hero-mobile-top>button,.sandbox-demo .sandbox-header>button,#app .chat-back,.chrome-message-panel .chat-back,.business-portal-back{
  background:var(--lg-fill)!important;backdrop-filter:var(--lg-filter)!important;-webkit-backdrop-filter:var(--lg-filter)!important;border:1px solid #ffffff8c!important;box-shadow:var(--lg-edge)!important}
}
@media(prefers-reduced-transparency:reduce){.app-chrome .chrome-dock,.app-chrome .chrome-mobile-top>.chrome-link,.fc-mobile-dock,#app .chat-back{background:#fff8fa!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important}}
/* Chat/back buttons: round floating glass like burger/bell, neutral icon colour, no accent tint, no focus ring. */
#app .chat-back,.chrome-message-panel .chat-back{color:var(--burgundy,#64162b)!important;border-radius:50%!important}
#app .chat-back:is(:focus,:focus-visible,:active),.chat-delete:focus-visible{outline:none!important}
/* Shared segmented lens (FestlGlassSegment in app-chrome.js). */
.glass-segment{isolation:isolate;touch-action:pan-y}
.glass-segment>.glass-lens{position:absolute;left:0;top:0;z-index:0;pointer-events:none;border-radius:999px;will-change:transform,width;transform-origin:center;
 background:linear-gradient(180deg,#ffffffb8,#ffe9f08c);box-shadow:inset 0 1px 0 #fff,inset 0 -1px 1px #ffffff80,0 4px 14px #64162b1f;backdrop-filter:blur(6px) saturate(180%);-webkit-backdrop-filter:blur(6px) saturate(180%);transition:opacity .2s}
.glass-segment.glass-segment-dragging>.glass-lens{background:radial-gradient(120% 90% at 50% 20%,#ffffffe0,#ffffff70 60%,#ffd9e566);box-shadow:inset 0 1px 0 #fff,0 0 0 1px #ffffffb3,0 10px 28px #64162b2e;backdrop-filter:blur(2px) saturate(220%) brightness(1.08);-webkit-backdrop-filter:blur(2px) saturate(220%) brightness(1.08)}
.glass-segment>:not(.glass-lens){position:relative;z-index:1}
.glass-segment.glass-segment-has-active>:is(a,button,[role=tab],label):is([aria-current],[aria-selected="true"],[aria-pressed="true"],.active,.selected,:has(input:checked)){background:transparent!important;box-shadow:none!important;border-color:transparent!important;color:var(--red-ink,#bd2940)!important}
.app-chrome .chrome-dock.glass-segment>.glass-lens{border-radius:22px}
.editor-switch.glass-segment>.glass-lens,.dating-mode-tabs.glass-segment>.glass-lens{border-radius:999px}
@media(prefers-reduced-motion:reduce){.glass-segment>.glass-lens{transition:none}}
/* Burger <-> back morph */
.app-chrome .chrome-menu{position:relative}
.app-chrome .chrome-menu>svg{transition:opacity .25s ease,transform .25s cubic-bezier(.2,.8,.2,1),filter .25s ease}
.app-chrome .chrome-menu>.chrome-back-icon{position:absolute;left:50%;top:50%;width:24px;height:24px;margin:-12px 0 0 -12px;opacity:0;transform:scale(.6);filter:blur(3px)}
.app-chrome .chrome-menu.chrome-menu-back>svg:not(.chrome-back-icon){opacity:0;transform:scale(.6);filter:blur(3px)}
.app-chrome .chrome-menu.chrome-menu-back>.chrome-back-icon{opacity:1;transform:none;filter:none}
@media(prefers-reduced-motion:reduce){.app-chrome .chrome-menu>svg{transition:opacity .1s}}
/* v480 iOS 26 Liquid Glass, stronger: very low white fill (~10-16%), heavy blur + saturation, specular gradient rim
   (top light, faint bottom caustic), soft shadow. Same shapes/positions. Works in WKWebView (-webkit-backdrop-filter, no
   opacity/filter/mask on ancestors). The lens cannot sample the backdrop through its blurred parent (a backdrop root),
   so its refraction is drawn: bright top rim + caustic + inner glow, magnifying the segment underneath while dragged. */
:root{--lg2-fill:linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,.06));--lg2-filter:blur(7px) saturate(220%) brightness(1.08) contrast(1.04);
 --lg2-shadow:inset 0 1px .5px rgba(255,255,255,.85),inset 0 -1px .5px rgba(255,255,255,.28),inset 0 0 0 .5px rgba(255,255,255,.32),inset 0 10px 18px -12px rgba(255,255,255,.55),0 8px 28px rgba(52,12,30,.16),0 1px 3px rgba(52,12,30,.10);
 --lg2-rim:linear-gradient(140deg,rgba(255,255,255,.95),rgba(255,255,255,.18) 32%,rgba(255,255,255,.04) 55%,rgba(255,255,255,.55) 100%)}
.app-chrome .chrome-dock,.app-chrome .chrome-mobile-top>.chrome-link,.app-chrome .chrome-desktop-top>.chrome-link,.fc-mobile-dock,.hero-mobile-top>button,.sandbox-demo .sandbox-header>button,#app .chat-back,.chrome-message-panel .chat-back,.business-portal-back,
:is(.editor-switch,.dating-mode-tabs,.ow-tabs,.as-tabs,.ai-tabs).glass-segment{
 background:var(--lg2-fill)!important;-webkit-backdrop-filter:var(--lg2-filter)!important;backdrop-filter:var(--lg2-filter)!important;border:0!important;box-shadow:var(--lg2-shadow)!important}
.app-chrome .chrome-mobile-top>.chrome-link,#app .chat-back,.chrome-message-panel .chat-back{position:relative}
:is(.app-chrome .chrome-dock,.app-chrome .chrome-mobile-top>.chrome-link,.app-chrome .chrome-desktop-top>.chrome-link,.fc-mobile-dock,#app .chat-back,.chrome-message-panel .chat-back,:is(.editor-switch,.dating-mode-tabs,.ow-tabs,.as-tabs,.ai-tabs).glass-segment)::after{
 content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;z-index:3;background:var(--lg2-rim);
 -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
/* legibility over bright/dark content */
.app-chrome :is(.chrome-dock,.chrome-mobile-top,.chrome-desktop-top) .chrome-link svg,#app .chat-back svg{filter:drop-shadow(0 0 4px rgba(255,255,255,.7)) drop-shadow(0 .5px .5px rgba(255,255,255,.9))}
.app-chrome .chrome-dock .chrome-link>span{text-shadow:0 0 6px rgba(255,255,255,.85)}
/* the lens */
.glass-segment>.glass-lens{border-radius:999px!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;transition:opacity .2s;
 background:radial-gradient(110% 70% at 50% -20%,rgba(255,255,255,.7),rgba(255,255,255,0) 55%),radial-gradient(90% 50% at 50% 120%,rgba(255,255,255,.4),rgba(255,255,255,0) 60%),linear-gradient(180deg,rgba(255,255,255,.1),rgba(255,255,255,.03))!important;
 box-shadow:inset 0 1px .5px rgba(255,255,255,1),inset 0 -1px 1px rgba(255,255,255,.55),inset 0 0 0 .6px rgba(255,255,255,.7),inset 0 0 14px rgba(255,255,255,.3),0 6px 18px rgba(60,10,30,.18),0 1px 3px rgba(60,10,30,.12)!important}
.app-chrome .chrome-dock.glass-segment>.glass-lens{border-radius:24px!important}
.glass-segment>.glass-lens::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.2px;background:linear-gradient(120deg,#fff,rgba(255,255,255,.15) 35%,rgba(255,255,255,0) 55%,rgba(255,255,255,.7));
 -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
.glass-segment>.glass-lens::after{content:"";position:absolute;left:14%;right:14%;top:8%;height:28%;border-radius:999px;background:linear-gradient(180deg,rgba(255,255,255,.75),rgba(255,255,255,0));filter:blur(.5px)}
.glass-segment.glass-segment-dragging>.glass-lens{box-shadow:inset 0 1px .5px #fff,inset 0 -2px 2px rgba(255,255,255,.7),inset 0 0 0 .8px rgba(255,255,255,.85),inset 0 0 22px rgba(255,255,255,.45),0 14px 32px rgba(60,10,30,.24)!important}
.glass-segment>:is(a,button,[role=tab],label){transition:transform .28s cubic-bezier(.2,1.4,.4,1)}
.glass-segment>.glass-under{transform:scale(1.14)}
@media(prefers-reduced-motion:reduce){.glass-segment>:is(a,button,[role=tab],label){transition:none}.glass-segment>.glass-under{transform:none}}
@media(prefers-reduced-transparency:reduce){.app-chrome .chrome-dock,.app-chrome .chrome-mobile-top>.chrome-link,:is(.editor-switch,.dating-mode-tabs).glass-segment{background:#fff8fa!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}}
/* v482 real lens: the blurred glass of a segmented bar moves from the bar itself onto its ::before layer, so the bar is
   no longer a backdrop root and the lens (a sibling of that layer) samples the real page behind it with its own
   backdrop-filter (live blur + saturation + brightness = real WebKit/iOS refraction-like tint). Chromium additionally
   gets true SVG displacement refraction (feDisplacementMap) on the lens; WebKit ignores url() in backdrop-filter.
   The specular rim/highlights stay drawn on top. */
.glass-segment:is(.chrome-dock,.fc-mobile-dock,.editor-switch,.dating-mode-tabs,.ow-tabs,.as-tabs,.ai-tabs){background:transparent!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
.glass-segment:is(.chrome-dock,.fc-mobile-dock,.editor-switch,.dating-mode-tabs,.ow-tabs,.as-tabs,.ai-tabs)::before{content:"";position:absolute;inset:0;border-radius:inherit;z-index:0;pointer-events:none;background:var(--lg2-fill);-webkit-backdrop-filter:var(--lg2-filter);backdrop-filter:var(--lg2-filter)}
.glass-segment>.glass-lens{-webkit-backdrop-filter:blur(1.5px) saturate(260%) brightness(1.14) contrast(1.08)!important;backdrop-filter:blur(1.5px) saturate(260%) brightness(1.14) contrast(1.08)!important}
html.fc-svg-backdrop .glass-segment>.glass-lens{backdrop-filter:url(#fc-lens-refract) blur(1px) saturate(260%) brightness(1.14)!important}
@media(prefers-reduced-transparency:reduce){.glass-segment::before{background:#fff8fa!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}.glass-segment>.glass-lens{-webkit-backdrop-filter:none!important;backdrop-filter:none!important}}
/* v484 iOS app with the native Liquid Glass tab bar: the web dock keeps its layout (visibility rules) but is invisible and not hit-testable. */
html.native-app.native-tabbar .app-chrome .chrome-dock{opacity:0!important;pointer-events:none!important}
html.native-app.native-tabbar .app-chrome .chrome-dock *{pointer-events:none!important}
/* v487: inside a chat the global round burger→back button and the bell are the only top controls (same position, size,
   glass and colors as on every other screen); the chat's own back button is dropped on phones and the chat header row
   sits between them. */
@media(max-width:999px){
 .app-host:has(.app-chrome) #app>.product-chat>header>.chat-back{display:none!important}
 .app-host:has(.app-chrome) #app>.product-chat>header{box-sizing:border-box;min-height:62px;padding:6px 74px!important;background:transparent!important;border-bottom:0!important}
}
/* v488 demo phone = iOS app tab bar: light clear glass (#fff8fa tint ~42 %), lens lifts (x1.25) on touch-down and magnifies the icon beneath */
html.virtual-phone-client .glass-segment:is(.chrome-dock,.fc-mobile-dock)::before{background:linear-gradient(180deg,rgba(255,255,255,.5),rgba(255,248,250,.42))}
.glass-segment.glass-segment-lifted>.glass-lens{box-shadow:inset 0 1px .5px #fff,inset 0 -2px 2px rgba(255,255,255,.7),inset 0 0 0 .8px rgba(255,255,255,.9),inset 0 0 22px rgba(255,255,255,.5),0 16px 34px rgba(60,10,30,.2)!important}
.glass-segment.glass-segment-lifted>.glass-under{transform:scale(1.22)}
/* v488 one shared content offset below the top bar (burger/title/bell: safe area + 6 + 50 pt): every screen starts
   its first panel exactly --app-content-gap (12 pt) below the bar. */
:root{--app-content-gap:36px;--app-content-top:calc(var(--app-safe-top,env(safe-area-inset-top,0px)) + 56px + var(--app-content-gap))}
@media(max-width:999px){
 .app-host:has(.app-chrome) #app{padding-top:var(--app-content-top)!important}
 .app-host:has(.app-chrome) #app>:is(.shell,.section,.business-space):not(.product-chat,.real-discovery):first-child{margin-top:0!important;padding-top:0!important}
 .app-host:has(.app-chrome) #app>:is(.shell,.section,.business-space):not(.product-chat,.real-discovery):first-child>:first-child{margin-top:0!important}
}

/* v492 no native link drag inside glass segments */
.glass-segment a,.glass-segment img,.glass-segment svg{-webkit-user-drag:none;user-drag:none}

/* v494: the shared top gap is the event-list search field spacing (36 pt below the bar); the search row itself
   no longer adds its own 1.5rem on top, so it stays exactly there and every other first panel matches it. */
@media(max-width:999px){.app-host:has(.app-chrome) #app>.product-events .event-search-row:not(.event-search-row-tools){margin-top:0}}

/* v494 native glass burger/back + bell (build 1020+): the web buttons stay for layout and as tap targets of record */
html.native-chrome-buttons .app-chrome .chrome-mobile-top>.chrome-link{opacity:0!important}
/* v502 (matches native build 1021): the lens rests on the active tab as the indicator and magnifies its icon. */
.app-chrome .chrome-dock.glass-segment:not(.glass-segment-dragging)>:is([aria-current=page],.active,.is-active) svg{transform:scale(1.14);transition:transform .28s cubic-bezier(.2,1.4,.4,1)}
/* v508 HIG segmented control + Liquid Glass, app-wide: light glass track, white glass lens, lens lifts as a magnifier while held */
.glass-segment:not(.chrome-dock):not(.fc-mobile-dock){display:flex!important;align-items:stretch;gap:0!important;padding:3px!important;border-radius:999px!important;background:rgba(118,118,128,.12)!important;-webkit-backdrop-filter:blur(18px) saturate(180%)!important;backdrop-filter:blur(18px) saturate(180%)!important;border:0!important;box-shadow:inset 0 0 0 .5px rgba(255,255,255,.55),inset 0 1px 1px rgba(0,0,0,.04)!important;overflow:visible!important;-webkit-user-select:none;user-select:none}
.glass-segment:not(.chrome-dock):not(.fc-mobile-dock)>:is(a,button,[role=tab],label){flex:1 1 0;min-width:0;min-height:32px;display:flex;align-items:center;justify-content:center;gap:6px;margin:0!important;padding:6px 12px!important;border:0!important;border-radius:999px!important;background:transparent!important;box-shadow:none!important;font-size:14px;font-weight:600;color:#3a1a26!important;text-decoration:none;white-space:nowrap;transition:transform .22s cubic-bezier(.3,1.4,.5,1),color .2s}
.glass-segment:not(.chrome-dock):not(.fc-mobile-dock)>.glass-lens{background:linear-gradient(180deg,rgba(255,255,255,.98),rgba(255,255,255,.86))!important;box-shadow:0 3px 8px rgba(0,0,0,.12),0 0 0 .5px rgba(0,0,0,.04),inset 0 1px .5px #fff!important}
.glass-segment:not(.chrome-dock):not(.fc-mobile-dock).glass-segment-lifted>.glass-lens{background:rgba(255,255,255,.34)!important;-webkit-backdrop-filter:blur(1.5px) saturate(210%) brightness(1.06)!important;backdrop-filter:blur(1.5px) saturate(210%) brightness(1.06)!important;box-shadow:inset 0 1px .5px #fff,inset 0 -2px 2px rgba(255,255,255,.7),inset 0 0 0 .8px rgba(255,255,255,.95),inset 0 0 18px rgba(255,255,255,.45),0 12px 28px rgba(60,10,30,.18)!important}
.glass-segment:not(.chrome-dock):not(.fc-mobile-dock).glass-segment-lifted>.glass-under{transform:scale(1.12)}
.glass-segment:not(.chrome-dock):not(.fc-mobile-dock).glass-segment-has-active>:is(a,button,[role=tab],label):is([aria-current],[aria-selected="true"],[aria-pressed="true"],.active,.selected,:has(input:checked)){color:#1c1c1e!important}
.glass-segment:not(.chrome-dock):not(.fc-mobile-dock)::after{content:none!important}
/* v508 HIG stepper (− | +) next to number fields, light glass */
.fc-stepper-wrap{display:flex;align-items:center;gap:10px}.fc-stepper-wrap>input{flex:1;min-width:0}
.fc-stepper{flex:none;display:inline-flex;align-items:stretch;height:34px;padding:0;border-radius:999px;background:rgba(118,118,128,.12);-webkit-backdrop-filter:blur(18px) saturate(180%);backdrop-filter:blur(18px) saturate(180%);box-shadow:inset 0 0 0 .5px rgba(255,255,255,.55);overflow:hidden}
.fc-stepper button{all:unset;box-sizing:border-box;display:grid;place-items:center;width:46px;font-size:22px;font-weight:400;line-height:1;color:#1c1c1e;cursor:pointer;position:relative;transition:background .15s,transform .2s cubic-bezier(.3,1.4,.5,1)}
.fc-stepper button+button::before{content:"";position:absolute;left:0;top:8px;bottom:8px;border-left:1px solid rgba(60,60,67,.22)}
.fc-stepper button:active{background:rgba(255,255,255,.7);transform:scale(1.08)}
.fc-stepper button:disabled{color:rgba(60,60,67,.3);cursor:default}
.fc-stepper button:focus-visible{outline:2px solid #0a84ff;outline-offset:-2px;border-radius:999px}
/* v513 bell → close morph for fullscreen views */
.fc-bell-x{position:fixed;top:calc(var(--app-safe-top,env(safe-area-inset-top,0px)) + 6px);right:16px;z-index:2147483000;display:grid;place-items:center;width:50px;height:50px;padding:0;margin:0;border:1px solid #fff;border-radius:50%;color:var(--burgundy,#64162b);background:#fff8fad9;-webkit-backdrop-filter:blur(18px) saturate(180%);backdrop-filter:blur(18px) saturate(180%);box-shadow:0 8px 24px #64162b13,inset 0 1px .5px #fff;cursor:pointer}
.fc-bell-x svg{grid-area:1/1;width:22px;height:22px;transition:opacity .25s ease,transform .25s cubic-bezier(.2,.8,.2,1),filter .25s ease}
.fc-bell-x .bx-x{opacity:0;transform:scale(.6);filter:blur(3px)}
.fc-bell-x.is-x .bx-bell{opacity:0;transform:scale(.6);filter:blur(3px)}
.fc-bell-x.is-x .bx-x{opacity:1;transform:none;filter:none}
.fc-bell-x:active{transform:scale(.94)}
@media(prefers-reduced-motion:reduce){.fc-bell-x svg{transition:opacity .1s linear}}
/* no duplicate X in those views */
.has-bell-x>.dialog-close,.has-bell-x.chat-profile-full>header button,.has-bell-x .chat-profile-close,.has-bell-x .live-photo-close,.has-bell-x .match-close{display:none!important}
/* iOS app with native buttons: the native bell (above the web view) shows the X; the web twin stays hidden */
html.native-chrome-buttons .fc-bell-x,html.fc-native-bell-x .fc-bell-x:not(.fc-back-x),html.fc-native-back-x .fc-back-x{opacity:0!important;pointer-events:none!important}
/* v519 nested screens (legal pages, support, settings …): once content scrolls under the floating back/bell buttons a
   soft glass fade covers the button row and the inline title stays visible, like other iOS nested screens. */
@media(max-width:999px){
 html.fc-scrolled body:has(.app-chrome):not(:has(header.nav .public-navigation))::after{content:"";position:fixed;left:0;right:0;top:0;height:calc(var(--app-safe-top,env(safe-area-inset-top,0px)) + 92px);z-index:48;pointer-events:none;background:linear-gradient(#fff8fa 0%,#fff8faeb 50%,#fff8fa00 100%);-webkit-backdrop-filter:blur(14px) saturate(160%);backdrop-filter:blur(14px) saturate(160%);-webkit-mask-image:linear-gradient(#000 62%,transparent);mask-image:linear-gradient(#000 62%,transparent);animation:fc-fade-in .18s ease-out}
 html.fc-scrolled .app-chrome .chrome-event-context{opacity:1!important}
}
@keyframes fc-fade-in{from{opacity:0}to{opacity:1}}
/* v519 the unread dot/badge fades out while the bell is morphed into the X and comes back with the bell */
.chrome-bell :is(.chrome-unread-dot,.chrome-badge,[data-unread]){transition:opacity .2s ease,transform .2s ease}
html.fc-bell-close .chrome-bell :is(.chrome-unread-dot,.chrome-badge,[data-unread]){opacity:0!important;transform:scale(.4)}
.fc-bell-x :is(.chrome-unread-dot,.chrome-badge){display:none!important}
/* v521 adaptive glass (see glass-adapt.js): smoky glass + white icons over dark content; red only for the active tab */
html body :is(.chrome-mobile-top .chrome-link,dialog>.fc-bell-x){transition:background-image .3s,color .3s,box-shadow .3s}
html body :is(.chrome-mobile-top .chrome-link,dialog>.fc-bell-x).fc-glass-dark{background-image:linear-gradient(rgba(40,12,22,.36),rgba(40,12,22,.24))!important;background-color:transparent!important;color:#fff!important;box-shadow:inset 0 1px .5px rgba(255,255,255,.38),0 0 0 .5px rgba(255,255,255,.18),0 6px 18px rgba(0,0,0,.18)!important}
html body :is(.chrome-mobile-top .chrome-link,dialog>.fc-bell-x).fc-glass-dark::after{opacity:.3}
html body .chrome-dock::before{transition:background-image .3s}
html body .chrome-dock.fc-glass-dark::before{background-image:linear-gradient(rgba(36,10,20,.44),rgba(36,10,20,.34))!important}
html body .chrome-dock.fc-glass-dark::after{opacity:.35}
html body .chrome-dock.fc-glass-dark{box-shadow:inset 0 1px .5px rgba(255,255,255,.32),0 0 0 .5px rgba(255,255,255,.16),0 10px 28px rgba(0,0,0,.22)!important}
html body .chrome-dock.fc-glass-dark>a.chrome-link:not([aria-current]){color:#fff!important}
html body .chrome-dock.fc-glass-dark>a.chrome-link[aria-current]{color:#ff6376!important}
html body .chrome-dock.fc-glass-dark .glass-lens{opacity:.5}
/* v524 phones: Mitteilungen + burger menu panels start at the floating buttons (panel inset 12 = buttons 16 - 4, so the
   28pt corner stays concentric to the 50pt circles); the header row is the buttons' row. Their own X is gone: the floating
   bell morphs into the X (bell-close.js), the title sits on that row left of it without overlapping. */
@media(max-width:999px){
 html body .app-chrome dialog.chrome-sheet:is([data-chrome-dialog="menu"],[data-chrome-dialog="notifications"])[open]{top:calc(var(--app-safe-top,env(safe-area-inset-top,0px)) + 2px)!important;padding-top:3px!important;border-radius:29px!important;max-height:calc(100dvh - 24px - var(--app-safe-top,env(safe-area-inset-top,0px)) - var(--app-safe-bottom,env(safe-area-inset-bottom,0px)))!important}
 html body .app-chrome dialog.chrome-sheet:is([data-chrome-dialog="menu"],[data-chrome-dialog="notifications"])[open]>header{box-sizing:border-box;min-height:50px;margin:0 0 14px!important;padding:0 58px 0 0!important}
 html body .app-chrome dialog.chrome-sheet:is([data-chrome-dialog="menu"],[data-chrome-dialog="notifications"])[open]>header h2{line-height:1.15}
 html body .app-chrome dialog.chrome-sheet.has-bell-x>header>.chrome-close{display:none!important}
}

/* v544: one symbol-replace motion for both floating buttons (SF Symbols .replace: blur + scale crossfade, 0.25 s). State lives in one
   class per button (chrome-menu-back / is-x), so CSS transitions retarget from the current frame on interruption and never stack. */
/* v554: the bell's unread dot is always a fixed 10px circle at the same spot; nothing (loading ring, symbol morph, label rules) reshapes or animates it */
html body .app-chrome .chrome-bell>.chrome-unread-dot:not([hidden]){position:absolute!important;top:6px!important;right:7px!important;left:auto!important;bottom:auto!important;display:block!important;box-sizing:border-box!important;width:10px!important;height:10px!important;min-width:0!important;max-width:none!important;padding:0!important;margin:0!important;border:0!important;border-radius:50%!important;aspect-ratio:1!important;font-size:0!important;line-height:0!important;color:transparent!important;background:#e73553!important;transform:none!important;filter:none!important;animation:none!important;transition:opacity .2s ease!important;box-shadow:0 0 0 2px var(--app-glass-surface,#fff8fa)!important;z-index:3}
@media (prefers-color-scheme:dark){html body .app-chrome .chrome-bell>.chrome-unread-dot:not([hidden]){background:#ff6376!important;box-shadow:0 0 0 2px #1f181c!important}}
html.fc-bell-close body .app-chrome .chrome-bell>.chrome-unread-dot{opacity:0!important}
/* v555: pre-pass desktop layout restored (side rail, bell top right); only the burger moves to the top left like on the phone, and its menu opens below it. The side rail never shrinks (idle/scroll shrink is bottom-dock only). */
@media(min-width:1000px){.app-chrome .chrome-brand{display:none!important}.app-chrome .chrome-tools{top:24px!important;bottom:auto!important;left:28px!important}.app-chrome .chrome-sheet[data-chrome-dialog="menu"]{inset:86px auto auto 24px!important;transform-origin:top left!important}.app-chrome .chrome-rail{transform:none!important;opacity:1!important}}