/* Adam Čada · light on glass. Shared controls; photography keeps its own surface. */
:root {
    --g-surface: rgba(28, 26, 31, .78);
    --g-line: rgba(255, 255, 255, .16);
    --g-shadow: inset 0 1px 0 rgba(255, 255, 255, .17), 0 12px 40px rgba(0, 0, 0, .24);
    --g-blur: blur(24px) saturate(155%);
    --g-fast: 120ms;
    --g-time: 200ms;
    --g-slow: 320ms;
    --g-ease: cubic-bezier(.2, .8, .2, 1);
}
body[data-surface="marketing"], body.al-body, body.vyv-body { isolation: isolate; }
body[data-surface="marketing"]::before, body.al-body::before {
    background: radial-gradient(ellipse at 80% 4%, rgba(200, 16, 46, .15), transparent 48%), radial-gradient(ellipse at 0% 38%, rgba(130, 145, 170, .055), transparent 42%);
}
body[data-surface="marketing"] .nav {
    top: max(12px, env(safe-area-inset-top, 0px));
    margin: 12px auto 0;
    width: min(1240px, calc(100% - 40px));
    height: 68px;
    padding-inline: 22px;
    border: 1px solid var(--g-line);
    border-radius: 24px;
    background: var(--g-surface);
    -webkit-backdrop-filter: var(--g-blur);
    backdrop-filter: var(--g-blur);
    box-shadow: var(--g-shadow);
}
.nav--marketing .nav-links { gap: 24px; }
.nav--marketing .nav-link { display: inline-flex; gap: 7px; align-items: center; }
.nav--marketing .nav-link .icon { opacity: .75; }
body[data-surface="marketing"] .btn--primary,
.al-body .btn--primary {
    background: linear-gradient(175deg, #eb2444, #bb102d);
    border: 1px solid rgba(255, 255, 255, .19);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 5px 22px -8px rgba(220, 20, 50, .75);
}
body[data-surface="marketing"] .btn--ghost,
.glass-control {
    background: linear-gradient(150deg, rgba(255,255,255,.09), rgba(255,255,255,.035));
    border: 1px solid var(--g-line);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.1);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
}
.btn, .gl-switch, .al-quick, .al-icon-btn { touch-action: manipulation; }
.btn:active, .al-quick:active, .al-icon-btn:active { transform: scale(.97); }
.gl-switch {
    position: relative;
    flex: 0 0 52px;
    width: 52px;
    height: 32px;
    min-height: 32px;
    padding: 3px;
    border: 1px solid rgba(255,255,255,.25);
    border-radius: 99px;
    background: #49444f;
    box-shadow: inset 0 2px 5px rgba(0,0,0,.18);
    transition: background-color var(--g-time) var(--g-ease), opacity var(--g-fast);
}
.gl-switch::after {
    content: '';
    display: block;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: linear-gradient(#fff, #e9e5eb);
    box-shadow: 0 2px 5px rgba(0,0,0,.3), inset 0 1px 1px #fff;
    transform: translateX(0);
    transition: transform var(--g-time) var(--g-ease);
}
.gl-switch[aria-checked="true"] { background: #248544; border-color: #54c87b; }
.gl-switch[aria-checked="true"]::after { transform: translateX(20px); }
.gl-switch::before { content: ''; position: absolute; inset: -8px -4px; }
.gl-switch:disabled { cursor: not-allowed; opacity: .45; }
.gl-switch.is-busy::after { opacity: .7; }
.gl-preference { display: flex; align-items: center; gap: 14px; min-height: 84px; padding: 18px 0; border-bottom: 1px solid var(--border); }
.gl-preference > .icon { width: 44px; height: 44px; padding: 11px; background: var(--glass-2); border: 1px solid var(--border-strong); border-radius: 14px; }
.gl-preference-copy { flex: 1; min-width: 0; }
.gl-preference-copy strong { display: block; font-size: 15px; font-weight: 600; }
.gl-preference-copy small { display: block; color: var(--text-2); font-size: 13px; line-height: 1.5; margin-top: 3px; }
.gl-preference .gl-switch { margin: 8px 4px 8px 8px; }
.gl-preference-note { color: var(--text-2); font-size: 13px; margin: 18px 0; }
body.al-body .sheet, body.vyv-body .sheet, body:has(#liveBar) .sheet {
    background: rgba(27, 25, 30, .96);
    border-color: var(--g-line);
    box-shadow: var(--g-shadow);
    -webkit-backdrop-filter: var(--g-blur);
    backdrop-filter: var(--g-blur);
}
body.al-body .sheet::backdrop { background: rgba(0,0,0,.55); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); }
body.al-body .sheet-row { min-height: 58px; border-radius: 14px; }
body.al-body .sheet-row > .icon:first-child { opacity: .9; }
body:has(#liveBar) #liveBar::before,
body:has(#liveBar) .lb-bar,
body:has(#liveBar) .lb-top,
body:has(#liveBar) .pick-bar-inner {
    background: rgba(24,22,28,.85);
    border-color: var(--g-line);
    -webkit-backdrop-filter: var(--g-blur);
    backdrop-filter: var(--g-blur);
    box-shadow: var(--g-shadow);
}
body:has(#liveBar) .lb-bar { border: 1px solid var(--g-line); border-radius: 24px; }
body:has(#liveBar) .ph-like { background: rgba(23,20,27,.65); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border: 1px solid rgba(255,255,255,.25); }
.vyv-body .vyv-main { padding-top: max(70px, 12dvh); }
.vyv-body .code-field { padding: 22px 12px; border-radius: 24px; background: rgba(255,255,255,.04); border: 1px solid var(--g-line); box-shadow: var(--g-shadow); }
.vyv-body .code-slot { border-radius: 10px; background: rgba(255,255,255,.055); }
.vyv-body .vyv-brand { padding: 12px 18px; border: 1px solid var(--g-line); border-radius: 99px; background: var(--g-surface); box-shadow: var(--g-shadow); }
html[data-motion="reduced"] *, html[data-motion="reduced"] *::before, html[data-motion="reduced"] *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
html[data-motion="reduced"] .reveal { opacity: 1; transform: none; }
html[data-glass="solid"] { --g-surface: #201d24; --g-blur: none; }
html[data-glass="solid"] #liveBar::before, html[data-glass="solid"] .lb-bar, html[data-glass="solid"] .nav, html[data-glass="solid"] .al-bar, html[data-glass="solid"] .live-actions, html[data-glass="solid"] .sheet, html[data-glass="solid"] .glass-control, html[data-glass="solid"] .hero-live-card { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; background: #201d24 !important; }
@media (prefers-reduced-transparency: reduce) {
    :root { --g-surface: #201d24; --g-blur: none; }
    .glass-control, .hero-live-card, body.al-body .sheet { background: #201d24; -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-iteration-count: 1 !important; }
    .reveal { opacity: 1 !important; transform: none !important; }
}
@media (max-width: 760px) {
    body[data-surface="marketing"] .nav { width: calc(100% - 24px); height: 60px; margin-top: 8px; top: 8px; border-radius: 20px; padding-inline: 16px; }
    .nav--marketing .nav-links { position: absolute; top: calc(100% + 10px); left: 0; right: 0; padding: 18px; border: 1px solid var(--g-line); border-radius: 20px; background: #211d25; box-shadow: var(--g-shadow); gap: 8px; }
    .nav--marketing .nav-links .nav-link { min-height: 48px; }
}

/* Code slots fit the padded glass field even on a 320px phone. */
.vyv-body .code-field .code-slots { gap: clamp(2px, 1vw, 5px); }
.vyv-body .code-field .code-slot { flex: 1 1 0; width: auto; min-width: 0; font-size: clamp(18px, 5vw, 24px); }
.vyv-body .code-field .code-sep { width: 10px; }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    :root { --g-surface: #201d24; }
    .glass-control, .hero-live-card, .al-body .live-actions { background: #201d24; }
}