/* Vyvoláno / customer app. Photographs stay clear; controls sit on frosted glass. */
.guest-glass, .guest-entry {
    --frost: linear-gradient(145deg, rgba(255,255,255,.14), rgba(255,255,255,.045) 65%), rgba(29,28,33,.72);
    --frost-edge: rgba(255,255,255,.24);
    --frost-depth: inset 0 1px 0 rgba(255,255,255,.23), inset 0 -1px 0 rgba(255,255,255,.035), 0 8px 0 -6px rgba(7,6,10,.8), 0 16px 36px -14px rgba(0,0,0,.75);
    --frost-filter: blur(28px) saturate(155%);
    --frost-text: #f9f7fa;
    --frost-muted: #c2bec7;
    isolation: isolate;
    background: #111015;
    color: var(--frost-text);
}
body.guest-glass::before, body.guest-entry::before {
    background: radial-gradient(ellipse 85% 60% at 0% 0%, rgba(123,140,161,.27), transparent 75%), radial-gradient(ellipse 90% 60% at 100% 15%, rgba(170,39,65,.24), transparent 80%), linear-gradient(160deg, #17171c, #111015 70%);
}
body.guest-glass::after, body.guest-entry::after { opacity: .035; }
body.guest-glass { --live-float-top: calc(env(safe-area-inset-top, 0px) + 100px); --bar-h: 64px; }
body.guest-glass > .container { padding-inline: 16px; }
body.guest-glass #liveBar {
    top: max(12px, env(safe-area-inset-top, 0px));
    width: min(1168px, calc(100% - 24px));
    height: 76px;
    padding: 12px 16px;
    margin: 12px auto 0;
    gap: 14px;
    border-radius: 26px;
}
body.guest-glass #liveBar::before {
    border: 1px solid var(--frost-edge);
    border-radius: inherit;
    background: var(--frost);
    box-shadow: var(--frost-depth);
    -webkit-backdrop-filter: var(--frost-filter);
    backdrop-filter: var(--frost-filter);
}
.guest-heading { flex: 1 1 auto; min-width: 0; }
.guest-brand { display: flex; align-items: center; gap: 8px; font: 9px/1.4 var(--font-mono); letter-spacing: .17em; color: var(--frost-muted); }
.guest-brand span { letter-spacing: 0; opacity: .75; }
body.guest-glass .live-title { margin-top: 3px; min-width: 0; font-size: 19px; }
body.guest-glass .live-count { font-size: 11px; color: var(--frost-muted); max-width: 100px; }
body.guest-glass .live-badge {
    align-self: center;
    gap: 5px;
    font-size: 10px;
    padding: 8px;
    border: 1px solid rgba(255,149,169,.2);
    border-radius: 12px;
    background: linear-gradient(150deg, rgba(255,151,168,.12), rgba(143,22,45,.16));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.12);
}
body.guest-glass .live-share { flex: 0 0 44px; margin: 0; }
body.guest-glass .live-sub { display: flex; align-items: center; margin: 18px 4px 14px; color: var(--frost-muted); font-size: 12px; }
body.guest-glass .live-sub::before { content: ''; width: 5px; height: 5px; margin-right: 8px; border-radius: 50%; background: #c7c1ce; box-shadow: 0 0 8px #c7c1ce66; }
.guest-tools { display: flex; align-items: stretch; gap: 10px; margin-bottom: 18px; }
.guest-filter {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    padding: 12px;
    border: 1px solid var(--frost-edge);
    border-radius: 22px;
    background: var(--frost);
    box-shadow: var(--frost-depth);
    -webkit-backdrop-filter: var(--frost-filter);
    backdrop-filter: var(--frost-filter);
}
.guest-tool-icon, .guest-sheet-icon { display: grid; place-items: center; flex: 0 0 40px; width: 40px; height: 40px; border: 1px solid #ffffff26; border-radius: 14px; color: #ffd4dc; background: linear-gradient(135deg, #ffffff17, #ffffff03); box-shadow: inset 0 1px 1px #ffffff21, 0 3px 8px #00000022; }
.guest-filter-copy { flex: 1; min-width: 0; }
.guest-filter-copy strong { display: block; font-size: 13px; font-weight: 600; line-height: 1.3; }
.guest-filter-copy small { display: block; font-size: 10px; color: var(--frost-muted); line-height: 1.4; margin-top: 3px; }
.guest-filter .gl-switch { margin-inline: 0 2px; flex-basis: 48px; width: 48px; }
.guest-filter .gl-switch::after { width: 24px; }
.guest-filter .gl-switch[aria-checked="true"]::after { transform: translateX(16px); }
.guest-settings { display: grid; place-items: center; width: 62px; flex: 0 0 62px; border: 1px solid var(--frost-edge); border-radius: 22px; color: #f5f0f8; background: var(--frost); box-shadow: var(--frost-depth); -webkit-backdrop-filter: var(--frost-filter); backdrop-filter: var(--frost-filter); }
body.guest-glass .gl-switch, body.guest-entry .gl-switch { background: linear-gradient(180deg, #45414b, #343039); border-color: #ffffff38; box-shadow: inset 0 2px 5px #0006, 0 1px 0 #ffffff16; }
body.guest-glass .gl-switch[aria-checked="true"] { background: linear-gradient(180deg, #f44566, #b91c3a); border-color: #ff718a; box-shadow: inset 0 1px 1px #ffffff42, 0 0 14px #e72c4d30; }
body.guest-glass .gl-switch::after { background: linear-gradient(145deg, #fff, #ddd7e2); box-shadow: 0 2px 5px #0005, inset 0 1px 1px #fff; }
body.guest-glass .gl-switch:disabled { opacity: .4; }
body.guest-glass .gallery-hint { padding: 16px; gap: 12px; border-radius: 22px; margin-bottom: 18px; background: linear-gradient(125deg, #ffffff0e, #ffffff03); border: 1px solid #ffffff1f; box-shadow: inset 0 1px 0 #ffffff13; color: var(--frost-muted); font-size: 12px; }
.guest-hint-title { display: block; font-size: 15px; color: var(--frost-text); line-height: 1.4; margin-bottom: 4px; }
body.guest-glass .gallery-hint > .icon { display: none; }
body.guest-glass .gallery-hint .btn { padding-inline: 12px; min-height: 44px; font-size: 11px; }
body.guest-glass .gphoto-cell { border-radius: 16px; box-shadow: inset 0 0 0 1px #ffffff2b, 0 7px 16px -10px #000; }
body.guest-glass .gphoto-cell::before { content: ''; position: absolute; inset: 0; z-index: 1; border: 1px solid #ffffff2b; border-radius: inherit; pointer-events: none; box-shadow: inset 0 1px 0 #ffffff3b; }
body.guest-glass #galleryGrid .ph-like { right: 6px; bottom: 6px; width: 40px; height: 40px; border-radius: 15px; border: 1px solid #ffffff66; background: linear-gradient(150deg,#ffffff38,#ffffff0a),#19171b80; box-shadow: inset 0 1px 0 #ffffff45, 0 4px 8px #0003; -webkit-backdrop-filter: blur(18px) saturate(170%); backdrop-filter: blur(18px) saturate(170%); }
body.guest-glass #galleryGrid .ph-like::before { content: ''; position: absolute; inset: -4px; }
body.guest-glass #galleryGrid .ph-like.is-active { color: #fff; background: linear-gradient(145deg,#f94c6ac9,#b30f30b8); border-color: #ffb6c4aa; }
body.guest-glass .live-share, body.guest-glass .lb-btn, body.guest-glass .lightbox-nav {
    background: linear-gradient(145deg,#ffffff23,#ffffff08), rgba(24,21,29,.64);
    border: 1px solid #ffffff33;
    box-shadow: inset 0 1px 0 #ffffff24, 0 3px 8px #0002;
    border-radius: 16px;
}
.guest-settings, body.guest-glass .live-share, body.guest-glass .lb-btn { transition: transform 120ms var(--g-ease), background-color 120ms var(--g-ease); touch-action: manipulation; }
.guest-settings:active, body.guest-glass .live-share:active { transform: translateY(2px) scale(.96); }
body.guest-glass :is(.guest-settings,.gl-switch,.live-share):focus-visible { outline: 2px solid #ffd2dc; outline-offset: 4px; }
body.guest-glass .pick-bar { bottom: max(12px, env(safe-area-inset-bottom, 0px)); padding: 0 12px; }
body.guest-glass .pick-bar::before { display: none; }
body.guest-glass .pick-bar-inner { max-width: 760px; padding: 10px 12px; min-height: 68px; border-radius: 24px; border: 1px solid var(--frost-edge); background: var(--frost); -webkit-backdrop-filter: var(--frost-filter); backdrop-filter: var(--frost-filter); box-shadow: var(--frost-depth); }
body.guest-glass .pick-count { font-size: 12px; }
body.guest-glass .pick-save { min-height: 44px; border-radius: 16px; font-size: 12px; }
body.guest-glass .pick-mine { padding-inline: 10px; }
body.guest-glass .btn--primary { background: linear-gradient(165deg,#f23e5f,#bc1234); border: 1px solid #ffffff40; box-shadow: inset 0 1px 0 #ffffff3d, 0 3px 0 #690a2044, 0 6px 16px -8px #e92d50; }
body.guest-glass #lightbox { background: #111015f7; }
body.guest-glass #lightbox .lb-top { top: max(10px, env(safe-area-inset-top, 0px)); left: 10px; right: 10px; min-height: 56px; padding: 5px; border-radius: 22px; border: 1px solid var(--frost-edge); background: var(--frost); -webkit-backdrop-filter: var(--frost-filter); backdrop-filter: var(--frost-filter); box-shadow: var(--frost-depth); }
body.guest-glass #lightbox .lb-bar { left: 10px; right: 10px; bottom: max(10px, env(safe-area-inset-bottom, 0px)); height: 72px; padding: 6px; border-radius: 25px; border: 1px solid var(--frost-edge); background: var(--frost); -webkit-backdrop-filter: var(--frost-filter); backdrop-filter: var(--frost-filter); box-shadow: var(--frost-depth); }
body.guest-glass #lightbox .lb-bar-btn { min-height: 56px; border-radius: 18px; font-size: 10px; color: #d0cad7; }
body.guest-glass #lightbox .lb-bar-btn[aria-pressed="true"] { background: #ffffff0e; color: #ff758f; }
body.guest-glass #lightbox .lb-slide { padding-top: calc(82px + env(safe-area-inset-top, 0px)); padding-bottom: calc(98px + env(safe-area-inset-bottom, 0px)); }
body.guest-glass #lightbox .lb-slide img { border-radius: 12px; }
body.guest-glass:has(#liveBar) .sheet { background: var(--frost); border: 1px solid var(--frost-edge); border-radius: 30px 30px 0 0; box-shadow: var(--frost-depth); -webkit-backdrop-filter: var(--frost-filter); backdrop-filter: var(--frost-filter); }
body.guest-glass .sheet::backdrop { background: #08070c80; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
body.guest-glass .sheet-grip { background: transparent; }
.guest-sheet-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.guest-sheet-icon { width: 52px; height: 52px; border-radius: 18px; color: #f0e9f4; }
#guestPreferences { padding-inline: 22px; padding-bottom: max(24px, env(safe-area-inset-bottom, 0px)); }
#guestPreferences .sheet-title { padding: 0; font-size: 29px; letter-spacing: -.04em; }
#guestPreferences .sheet-text { padding: 0; font-size: 13px; color: var(--frost-muted); margin-bottom: 14px; }
#guestPreferences .gl-preference { min-height: 86px; padding-block: 16px; border-color: #ffffff17; gap: 12px; }
#guestPreferences .gl-preference > .icon { background: linear-gradient(145deg,#ffffff1c,#ffffff06); border-color: #ffffff29; color: #e3dbe8; box-shadow: inset 0 1px 0 #ffffff24; }
#guestPreferences .gl-preference-copy strong { font-size: 14px; }
#guestPreferences .gl-preference-copy small { font-size: 12px; color: var(--frost-muted); }
#guestPreferences .gl-preference-note { color: var(--frost-muted); font-size: 11px; margin: 20px 0 0; line-height: 1.65; }
#guestPreferences .gl-preference-note .icon { vertical-align: -2px; margin-right: 4px; }

/* Entry: an abstract stack of glass photo frames, all code-native. */
body.guest-entry .vyv-main { padding-top: max(30px, 6dvh); padding-bottom: max(28px, env(safe-area-inset-bottom, 0px)); }
body.guest-entry .vyv-brand { background: var(--frost); box-shadow: var(--frost-depth); border-color: var(--frost-edge); -webkit-backdrop-filter: var(--frost-filter); backdrop-filter: var(--frost-filter); }
.guest-emblem { position: relative; width: 104px; height: 112px; margin: 38px 0 24px 8px; perspective: 700px; flex-shrink: 0; }
.guest-emblem > span { position: absolute; left: 5px; top: 10px; width: 88px; height: 88px; border: 1px solid #ffffff55; border-radius: 26px; background: linear-gradient(135deg,#ffffff30,#ffffff06), #24212b66; box-shadow: inset 0 1px 1px #ffffff66, 0 12px 28px -10px #0008; -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
.guest-emblem > span:first-child { transform: translate(-10px,8px) rotate(-17deg); background-color: #c4284830; }
.guest-emblem > span:nth-child(2) { transform: translate(13px,-5px) rotate(15deg); }
.guest-emblem > span:last-child { display: grid; place-items: center; transform: rotate(-5deg); color: #fff4f6; }
body.guest-entry .vyv-title { font-size: 36px; letter-spacing: -.04em; line-height: 1.12; }
body.guest-entry .vyv-lead { color: var(--frost-muted); font-size: 14px; max-width: 300px; }
body.guest-entry .code-field { padding: 22px 12px; background: var(--frost); border: 1px solid var(--frost-edge); border-radius: 26px; box-shadow: var(--frost-depth); -webkit-backdrop-filter: var(--frost-filter); backdrop-filter: var(--frost-filter); }
body.guest-entry .code-slot { background: linear-gradient(160deg,#00000030,#ffffff04); box-shadow: inset 0 2px 5px #0004, 0 1px 0 #ffffff18; border: 1px solid #ffffff1c; border-radius: 11px; }
body.guest-entry .vyv-form .btn--primary { gap: 12px; min-height: 60px; border-radius: 20px; background: linear-gradient(165deg,#f23e5f,#b80f30); border: 1px solid #ffffff45; box-shadow: inset 0 1px 0 #ffffff52, 0 4px 0 #690a2070, 0 12px 24px -10px #d41e44aa; }
body.guest-entry .vyv-form .btn--primary .icon:last-child { margin-left: auto; }
body.guest-entry .vyv-form .btn--primary .icon:first-child { margin-right: auto; }
body.guest-entry .vyv-foot { color: var(--frost-muted); font-size: 11px; }

@media (min-width: 760px) {
    .guest-tools { max-width: 560px; }
    body.guest-glass .gallery-hint { max-width: 680px; }
    #guestPreferences { margin-bottom: 24px; border-radius: 30px; }
}
@media (max-width: 440px) {
    body.guest-glass #liveBar { padding-inline: 12px; gap: 9px; height: 74px; }
    body.guest-glass .live-title { font-size: 17px; }
    .guest-brand { font-size: 8px; gap: 5px; }
    .guest-brand span { display: none; }
    body.guest-glass .live-badge { font-size: 9px; padding-inline: 6px; }
    body.guest-glass .live-count { max-width: 64px; font-size: 10px; }
    body.guest-glass .guest-filter { gap: 9px; padding: 10px; }
    .guest-tool-icon { display: none; }
    .guest-settings { width: 54px; flex-basis: 54px; }
    .guest-filter-copy small { font-size: 10px; }
    body.guest-glass .gphoto-cell { border-radius: 12px; }
    body.guest-glass #galleryGrid .ph-like { right: 4px; bottom: 4px; width: 36px; height: 36px; border-radius: 13px; }
    body.guest-glass #galleryGrid .ph-like::before { inset: -4px; }
}
@media (max-height: 740px) {
    .guest-emblem { width: 80px; height: 80px; margin-top: 22px; margin-bottom: 16px; transform: scale(.8); transform-origin: left bottom; }
    body.guest-entry .vyv-main { padding-top: 22px; }
}
@media (hover:hover) and (prefers-reduced-motion:no-preference) {
    html:not([data-motion="reduced"]) body.guest-glass .guest-settings:hover { transform: perspective(450px) rotateX(5deg) rotateY(-5deg) translateY(-2px); }
    html:not([data-motion="reduced"]) body.guest-glass .live-share:hover { transform: translateY(-2px); }
}
/* Stronger opaque surfaces when the user or OS reduces transparency. */
html[data-glass="solid"] :is(.guest-glass,.guest-entry) { --frost: #26232c; --frost-filter: none; --frost-depth: 0 5px 18px #0004; }
html[data-glass="solid"] :is(.guest-glass,.guest-entry) :is(.guest-filter,.guest-settings,.ph-like,.lb-top,.lb-bar,.pick-bar-inner,.sheet,.vyv-brand,.code-field,.guest-emblem > span) { background: #26232c !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
@media (prefers-reduced-transparency: reduce) {
    :is(.guest-glass,.guest-entry) { --frost: #26232c; --frost-filter: none; }
    :is(.guest-glass,.guest-entry) :is(.ph-like,.guest-emblem > span) { background: #26232c !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    :is(.guest-glass,.guest-entry) { --frost: #26232c; }
    body.guest-glass #galleryGrid .ph-like { background: #26232c; }
}
/* The owner's client navigation also remains reachable when this is a live album. */
body.guest-glass:has(> .nav) #liveBar { top: 84px; }
body.guest-glass:has(> .nav) { --live-float-top: 174px; }
@media (max-width: 440px) {
    body.guest-glass .pick-mine { display: inline-flex; align-items: center; padding-inline: 8px; font-size: 10px; }
    body.guest-glass .pick-save { padding-inline: 12px; font-size: 11px; }
}
@media (max-width: 359px) {
    body.guest-glass .pick-count { font-size: 11px; gap: 4px; }
    body.guest-glass .pick-count > .icon { display: none; }
    body.guest-glass .pick-bar-inner { padding-inline: 10px; gap: 6px; }
    body.guest-glass .pick-save { padding-inline: 10px; }
}

body.guest-glass #galleryGrid .ph-like.is-active .heart-ico { color: #fff; background: transparent; }