/* ===== Liquid Glass layer: loaded last, refines tokens and surfaces to match the reference ===== */
:root {
  --accent: #4C8EF7;
  --accent-hi: #69A2FA;
  --accent-lo: #3577E6;
  --accent-ink: #071631;           /* dark text on the light-blue primary */
  --accent-soft: rgba(76, 142, 247, 0.16);
  --bg-0: #040A15;
  --bg-1: #0B1C38;
  --muted: #8A98B2;
  --lg-fill: linear-gradient(180deg, rgba(255, 255, 255, 0.085), rgba(255, 255, 255, 0.025));
  --lg-fill-strong: linear-gradient(180deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.05));
  --lg-edge: linear-gradient(140deg, rgba(255, 255, 255, 0.42), rgba(255, 255, 255, 0.07) 30%, rgba(255, 255, 255, 0) 55%, rgba(255, 255, 255, 0.05) 75%, rgba(255, 255, 255, 0.22));
  --lg-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), inset 0 -1px 1px rgba(255, 255, 255, 0.04), inset 0 0 24px rgba(255, 255, 255, 0.025), 0 12px 32px rgba(0, 0, 0, 0.35);
  --lg-blur: blur(22px) saturate(180%) brightness(1.06);
}

/* Background: navy glow, fine grid and "+" crosshair markers */
body { background: radial-gradient(120% 70% at 50% -10%, #0E2448 0%, var(--bg-0) 62%) fixed, var(--bg-0); }
.bg-fx::before {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='192' height='192'%3E%3Cpath d='M96 90v12M90 96h12' stroke='%2391B4FF' stroke-opacity='.35' stroke-width='1'/%3E%3C/svg%3E"),
    linear-gradient(rgba(120, 160, 255, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(120, 160, 255, 0.045) 1px, transparent 1px);
  background-size: 192px 192px, 48px 48px, 48px 48px;
}

/* ---- Liquid glass surface ---- */
.glass, .btn-glass, .chip, .icon-btn, .tabbar, .fab, .tile, .date-chip, .slot, .pick, .qs, .ai-line,
.contact-block, .confirm-list, .summary-top, .rail, .rail-link.is-active, .rail-link[aria-current="page"],
.segmented, .bk-row, .svc-row, .wk, .as-form .input, .lg {
  position: relative;
  background: var(--lg-fill);
  border-color: transparent;
  box-shadow: var(--lg-shadow);
  backdrop-filter: var(--lg-blur);
  -webkit-backdrop-filter: var(--lg-blur);
}
.glass::before, .btn-glass::before, .chip::before, .icon-btn::before, .tabbar::before, .fab::before, .tile::before,
.date-chip::before, .slot::before, .pick::before, .qs::before, .ai-line::before, .contact-block::before,
.confirm-list::before, .summary-top::before, .rail::before, .segmented::before, .bk-row::before, .svc-row::before,
.sheet::before, .assistant::before, .btn-primary::before, .lg::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
  background: var(--lg-edge);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}
.btn-glass:hover, .chip:hover, .icon-btn:hover, .tile:hover, .date-chip:hover, .slot:hover:not(:disabled), .pick:hover, .qs:hover, .ai-line:hover, .bk-row:hover {
  background: var(--lg-fill-strong);
}

/* Specular sheen that follows the pointer (set by JS as --mx/--my) */
.glass::after, .btn-glass::after, .tile::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .3s;
  background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 0%), rgba(255, 255, 255, 0.07), transparent 60%);
}
.glass:hover::after, .btn-glass:hover::after, .tile:hover::after { opacity: 1; }

/* Primary button: light electric blue with dark ink, like the reference */
.btn-primary {
  position: relative;
  background: linear-gradient(180deg, var(--accent-hi) 0%, var(--accent) 55%, var(--accent-lo) 100%);
  color: var(--accent-ink); font-weight: 800;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), inset 0 -2px 6px rgba(10, 40, 110, 0.25), 0 10px 30px rgba(var(--accent-rgb), 0.35);
}
.btn-primary::before { background: linear-gradient(180deg, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0) 45%); }
.btn-primary:hover { background: linear-gradient(180deg, var(--accent-hi) 0%, var(--accent-lo) 55%, var(--accent-lo) 100%); }
.btn-primary svg { color: var(--accent-ink); }
.chip[aria-pressed="true"], .chip.is-active, .date-chip[aria-pressed="true"], .slot[aria-pressed="true"],
.segmented button[aria-pressed="true"] {
  background: linear-gradient(180deg, var(--accent-hi), var(--accent)); color: var(--accent-ink);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 8px 22px rgba(var(--accent-rgb), 0.35);
}
.date-chip[aria-pressed="true"] small { color: rgba(7, 22, 49, 0.75); }
.progress i::after { background: var(--accent); }
.pick[aria-checked="true"] { background: linear-gradient(180deg, rgba(var(--accent-rgb), 0.22), rgba(var(--accent-rgb), 0.08)); }
.check input:checked { background: var(--accent); border-color: var(--accent); }
.check input:checked::after { border-color: var(--accent-ink); }

/* Inputs: glass wells */
.input, .select, .textarea {
  background: rgba(255, 255, 255, 0.045); border: 1px solid rgba(255, 255, 255, 0.09);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25); border-radius: 16px;
}

/* ---- Top bar ---- */
.topbar { padding-bottom: 14px; margin-bottom: 8px; position: relative; }
.topbar::after { content: ''; position: absolute; left: 16px; right: 16px; bottom: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.12), transparent); }
.brand { font-size: 15px; gap: 10px; letter-spacing: 0.02em; }
.brand-mark { width: 34px; height: 26px; border: 0; background: none; border-radius: 0; box-shadow: none; }
.brand-mark svg { width: 34px; height: 22px; }
.brand-mark img { border-radius: 8px; object-fit: contain; }
.topbar .icon-btn { background: none; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
.topbar .icon-btn::before { background: rgba(255, 255, 255, 0.5); padding: 1.5px; inset: 9px; }
.topbar .icon-btn svg { width: 18px; height: 18px; }

/* ---- Hero ---- */
.hero { aspect-ratio: 1.42; min-height: 0; border: 0; border-radius: 26px; background: radial-gradient(90% 80% at 50% 30%, #12274A, #070F1E 75%); box-shadow: var(--lg-shadow); }
.hero::before { content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: var(--lg-edge); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; z-index: 3; pointer-events: none; }
.hero-grid { opacity: .6; }
.hero-ring { left: 50%; top: 6%; width: 92%; aspect-ratio: 2.6; transform: translateX(-50%); }
@keyframes ring-in { from { opacity: 0; transform: translateX(-50%) scaleX(.85); } to { opacity: 1; transform: translateX(-50%); } }
.hero-car { bottom: 15%; width: 76%; }
@keyframes car-in { from { opacity: 0; transform: translate(-50%, 14px) scale(.96); } to { opacity: 1; transform: translate(-50%, 0); } }
.hero-cta { left: 12px; right: 12px; bottom: 12px; }
.hero-cta .btn { width: 100%; justify-content: space-between; min-height: 46px; padding: 0 18px; font-size: 15px; font-weight: 700; }
.hero-cta .arrow { width: auto; height: auto; background: none; }
.hero-cta .arrow svg { width: 18px; height: 18px; }

/* ---- Studio info ---- */
.studio-title { font-size: clamp(28px, 7.4vw, 46px); letter-spacing: -0.025em; }
.studio-tagline { font-size: 14px; margin-top: 6px; line-height: 1.45; }
.stats { gap: 10px; }
.stat { padding: 16px 18px; border-radius: 22px; }
.stat .stat-top { display: flex; align-items: center; gap: 10px; }
.stat .stat-top svg { width: 20px; height: 20px; color: #fff; }
.stat b { font-size: 24px; }
.stat > span { margin-top: 6px; font-size: 13px; }
.stat.wide { display: flex; align-items: center; justify-content: space-between; }
.stat.wide .stat-top b { font-size: 22px; }
.stat.wide > span { font-size: 13px; }

/* ---- Booking card ---- */
.section-title { font-size: 26px; letter-spacing: -0.02em; }
.book-card { gap: 6px; padding: 22px 20px 20px; border: 0; background: var(--lg-fill); box-shadow: var(--lg-shadow); position: relative; }
.book-card::before { content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: var(--lg-edge); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; }
.book-card::after { /* halftone glow, top-right */
  content: ''; position: absolute; right: -10%; top: -30%; width: 70%; height: 120%; pointer-events: none; opacity: .55;
  background: radial-gradient(rgba(120, 170, 255, 0.55) 1px, transparent 1.6px) 0 0 / 7px 7px;
  -webkit-mask: radial-gradient(closest-side, #000, transparent); mask: radial-gradient(closest-side, #000, transparent);
}
.book-card h3 { font-size: 20px; }
.book-card p { font-size: 14px; }
.book-card .cta { margin-top: 14px; width: 100%; justify-content: center; min-height: 52px; position: relative; z-index: 1; }
.book-card .cta svg { width: 18px; height: 18px; }

/* ---- Floating controls ---- */
.tabbar { height: 64px; padding: 5px; border: 0; background: linear-gradient(180deg, rgba(40, 56, 84, 0.55), rgba(18, 28, 48, 0.55)); }
.tab { font-size: 11px; gap: 3px; color: rgba(255, 255, 255, 0.82); }
.tab svg { width: 20px; height: 20px; }
.tab::before { background: linear-gradient(180deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.07)); border: 0; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3); }
.tab[aria-current="page"] { color: #fff; }
.fab { width: 52px; height: 52px; right: 16px; bottom: calc(22px + env(safe-area-inset-bottom)); border: 0; color: #fff; background: var(--lg-fill-strong); }
.fab::after { display: none; }
.fab svg { width: 22px; height: 22px; }
:root { --tabbar-h: 64px; }
.tabbar { right: calc(16px + 52px + 12px); }

/* ---- Sheet ---- */
.sheet { background: linear-gradient(180deg, rgba(30, 44, 70, 0.78), rgba(10, 18, 34, 0.9)); border: 0; backdrop-filter: blur(30px) saturate(170%); -webkit-backdrop-filter: blur(30px) saturate(170%); }
.sheet-head h2 { font-size: 24px; }
.sheet-head .icon-btn { background: none; box-shadow: none; backdrop-filter: none; }
.sheet-head .icon-btn::before { display: none; }
.progress { gap: 8px; margin-top: 12px; }
.progress i { height: 3px; }
.step-label { margin-bottom: 4px; }

/* Step 4 review */
.review { border-radius: 22px; padding: 18px; display: grid; gap: 2px; }
.review h3 { font-size: 20px; margin-bottom: 8px; }
.review .r { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; font-size: 15px; }
.review .r span { color: var(--muted); }
.review .r b { text-align: right; }
.review .plain { padding: 9px 0; font-size: 15px; color: var(--text); overflow-wrap: anywhere; }
.review .plain.muted { color: var(--muted); }
.review-note { color: var(--muted); font-size: 13px; margin: 14px 0; }

/* ---- My booking ---- */
.contact-block .call { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(180deg, var(--accent-hi), var(--accent)); color: var(--accent-ink); flex: none; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45); }
.contact-block .call svg { width: 20px; height: 20px; }
.contact-block { justify-content: flex-start; }
.contact-block small { font-size: 15px; color: var(--text); font-weight: 700; }
.contact-block a.num { font-size: 13px; color: var(--muted); font-weight: 600; }
.tile { color: var(--muted); }
.tile svg { color: var(--muted); }
.cancel-link { color: var(--muted); }
.cancel-link:hover { color: var(--danger); }

/* ---- Assistant ---- */
.assistant { background: linear-gradient(180deg, rgba(30, 44, 70, 0.8), rgba(9, 16, 30, 0.92)); border: 0; backdrop-filter: blur(30px) saturate(170%); -webkit-backdrop-filter: blur(30px) saturate(170%); }
.msg.user { background: linear-gradient(180deg, var(--accent-hi), var(--accent)); color: var(--accent-ink); font-weight: 600; }
.as-form .send { background: linear-gradient(180deg, var(--accent-hi), var(--accent)); color: var(--accent-ink); }

/* ---- Desktop rail ---- */
@media (min-width: 1101px) {
  .rail { border: 0; }
  .rail .brand { font-size: 17px; }
  .rail-link[aria-current="page"], .rail-link.is-active { color: #fff; }
  .hero { aspect-ratio: 1.6; }
}

/* ---- Chromium-only refraction for floating glass (progressive enhancement) ---- */
.lg-refract .tabbar, .lg-refract .fab { backdrop-filter: url(#lg-refract) blur(14px) saturate(180%); -webkit-backdrop-filter: blur(14px) saturate(180%); }

.home-extras { display: grid; gap: var(--s3); margin-top: var(--s3); }
@media (min-width: 1101px) { .home-extras { grid-template-columns: 1.35fr 1fr; align-items: start; } .home-extras .features, .home-extras > section[aria-labelledby=g-title] { grid-column: 1 / -1; } }


/* Floating elements keep fixed positioning */
.tabbar, .fab, .rail { position: fixed; }
.hero-ring { top: 3%; width: 86%; }
.hero-car { bottom: 19%; width: 82%; }

.hero-ring { top: 4%; width: 92%; }
.hero-car { bottom: 17%; width: 70%; }

.hero-ring { top: -6%; width: 96%; }
.hero-car { bottom: 15%; width: 68%; }


/* ===== Admin (reference: "Расписание" screen) ===== */
.adm-top { display: flex; align-items: center; justify-content: space-between; padding-bottom: 14px; margin-bottom: 20px; position: relative; }
.adm-top::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.12), transparent); }
.adm-top .icon-btn, .icon-btn.plain { background: none; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
.adm-top .icon-btn::before { background: rgba(255, 255, 255, 0.5); padding: 1.5px; inset: 9px; }
.icon-btn.plain::before { display: none; }
.adm-head { align-items: flex-start; margin-bottom: 20px; }
.adm-head h1 { font-size: clamp(30px, 8vw, 40px); }
.adm-date { display: grid; gap: 10px; margin-bottom: 18px; }
.adm-date .field-label { padding-left: 4px; }
.date-nav { display: grid; grid-template-columns: 48px 1fr 48px; gap: 8px; align-items: center; }
.date-nav .icon-btn { width: 48px; height: 48px; }
.date-pill { position: relative; min-height: 52px; border-radius: 20px; display: grid; place-items: center; font-weight: 600; font-size: 15px; cursor: pointer; }
.date-pill input { position: absolute; inset: 0; opacity: 0; width: 100%; cursor: pointer; }
.mode-pills { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.mode-pills .btn { min-height: 50px; }
.mode-pills .btn[aria-pressed="true"] { background: linear-gradient(180deg, var(--accent-hi), var(--accent)); color: var(--accent-ink); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 8px 22px rgba(var(--accent-rgb), .35); }
.adm-date .link-btn { justify-self: center; min-height: 32px; padding: 0; }
.adm-stats { gap: 10px; }
.adm-stats .stat { padding: 16px; min-height: 96px; display: flex; flex-direction: column; justify-content: space-between; }
.adm-stats .stat > span { margin: 0; font-size: 13px; }
.adm-stats .stat b { font-size: clamp(20px, 6vw, 28px); }
.adm-actions { gap: 10px; }
.adm-actions .btn { justify-content: center; border-radius: 22px; min-height: 56px; font-weight: 700; }
@media (min-width: 768px) {
  .adm-date { grid-template-columns: minmax(320px, 1.4fr) 1fr auto; align-items: end; column-gap: 16px; }
  .adm-date .field-label { grid-column: 1 / -1; }
}
.adm-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.adm-actions .btn { white-space: normal; padding: 0 12px; font-size: 14px; line-height: 1.2; text-align: center; }
@media (min-width: 768px) { .adm-actions { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.bk-row { grid-template-columns: 64px minmax(0, 1fr) auto; text-align: left; }
.bk-row .meta { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.adm-actions .btn { gap: 8px; } .adm-actions .btn svg { width: 18px; height: 18px; } @media (max-width: 400px) { .adm-actions .btn { font-size: 13px; padding: 0 8px; } }


/* ===== iOS 26 Liquid Glass tuning ===== */
:root {
  /* clear glass: almost no fog, light tint, the lens does the work */
  --lg-fill: linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.015) 60%, rgba(255, 255, 255, 0.04));
  --lg-fill-strong: linear-gradient(180deg, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0.04) 60%, rgba(255, 255, 255, 0.07));
  /* two-sided specular rim: bright top-left and bottom-right, dim on the sides */
  --lg-edge: conic-gradient(from 225deg, rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0.08) 18%, rgba(255, 255, 255, 0.04) 32%, rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0.08) 68%, rgba(255, 255, 255, 0.04) 82%, rgba(255, 255, 255, 0.75));
  --lg-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.35),
    inset 0 -1px 1px rgba(255, 255, 255, 0.12),
    inset 1px 0 1px rgba(255, 255, 255, 0.06),
    inset 0 0 18px rgba(255, 255, 255, 0.05),
    inset 0 -14px 24px -18px rgba(255, 255, 255, 0.18),
    0 8px 24px rgba(0, 0, 0, 0.28), 0 1px 2px rgba(0, 0, 0, 0.3);
  --lg-blur: blur(10px) saturate(175%) brightness(1.04);
  --spring: cubic-bezier(.34, 1.56, .64, 1);
}

/* Inner refraction sheen on top half, like light passing through a thick bezel */
.tabbar::after, .fab::after, .stat::after, .hero-cta .btn::after, .mode-pills .btn::after, .adm-actions .btn-glass::after, .icon-btn::after {
  content: ''; position: absolute; inset: 1px; border-radius: inherit; pointer-events: none; opacity: 1;
  background: radial-gradient(120% 70% at 30% 0%, rgba(255, 255, 255, 0.14), transparent 55%),
              radial-gradient(90% 60% at 80% 110%, rgba(255, 255, 255, 0.07), transparent 60%);
}
.fab::after { display: block; animation: none; inset: 1px; border: 0; }

/* Springy, slightly magnifying press, as on iPhone */
.btn, .chip, .icon-btn, .tile, .date-chip, .slot, .tab, .fab, .qs, .pick, .bk-row {
  transition: transform .45s var(--spring), background-color .2s, box-shadow .25s, color .2s;
}
.btn:active, .chip:active, .icon-btn:active, .tile:active, .date-chip:active, .slot:active:not(:disabled), .qs:active, .pick:active, .bk-row:active { transform: scale(1.04); transition-duration: .18s; }
.fab:active { transform: scale(1.12); }
.tab:active::before { transform: scale(1.08); }
.tab::before { transition: opacity .3s, transform .5s var(--spring); }

/* Tab bar: thicker, clearer glass with a lifted selection pill */
.tabbar { background: linear-gradient(180deg, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0.03)); }
.tab::before {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.08));
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.45), inset 0 -1px 1px rgba(255, 255, 255, 0.12), 0 4px 12px rgba(0, 0, 0, 0.25);
}

/* With the lens active (Chromium), reduce fog further so refraction is visible */
.lg-lens .tabbar, .lg-lens .fab { background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.015)); }
.lg-lens .stat, .lg-lens .tile, .lg-lens .btn-glass, .lg-lens .chip, .lg-lens .icon-btn { background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.012)); }

@media (prefers-reduced-transparency: reduce) {
  .glass, .btn-glass, .chip, .icon-btn, .tabbar, .fab, .tile, .stat { background: rgba(28, 40, 62, 0.96) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
}

/* ===== Calm pass: black base, quiet glass, blue only for key accents (matches reference) ===== */
:root {
  --bg-0: #030406;
  --lg-fill: linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.03));
  --lg-fill-strong: linear-gradient(180deg, rgba(255, 255, 255, 0.085), rgba(255, 255, 255, 0.05));
  --lg-edge: linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.06) 40%, rgba(255, 255, 255, 0.05));
  --lg-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  --lg-blur: blur(18px) saturate(140%);
  --muted: #8B93A3;
}
/* Pure black page; faint navy only at the very top, like the reference */
body { background: radial-gradient(80% 38% at 50% 0%, rgba(30, 58, 110, 0.35), transparent 70%) fixed, #030406; }
.bg-fx::after { display: none; }
.bg-fx::before {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cpath d='M120 114v12M114 120h12' stroke='%23ffffff' stroke-opacity='.14' stroke-width='1'/%3E%3C/svg%3E"),
    linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px);
  background-size: 240px 240px, 60px 60px, 60px 60px;
  mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, .5) 45%, transparent 85%);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, .5) 45%, transparent 85%);
}

/* No decorative sheens or inner glows */
.glass::after, .btn-glass::after, .tile::after,
.tabbar::after, .stat::after, .hero-cta .btn::after, .mode-pills .btn::after, .adm-actions .btn-glass::after, .icon-btn::after { display: none !important; }
.fab::after { display: none; }

/* Primary: flat light blue, dark ink, no halo */
.btn-primary, .btn-primary:hover { background: var(--accent); box-shadow: none; }
.btn-primary:hover { background: var(--accent-hi); }
.btn-primary::before { display: none; }
.chip[aria-pressed="true"], .chip.is-active, .date-chip[aria-pressed="true"], .slot[aria-pressed="true"],
.segmented button[aria-pressed="true"], .mode-pills .btn[aria-pressed="true"], .msg.user, .as-form .send, .contact-block .call {
  background: var(--accent); box-shadow: none;
}

/* Hero: dark card, the ring is the only glow on the page */
.hero { background: radial-gradient(70% 60% at 50% 35%, #0D1626, #06080C 75%); box-shadow: none; }
.hero-grid { opacity: .25; }
.hero::before { background: var(--lg-edge); }

/* Booking card: quiet, small halftone accent only */
.book-card { box-shadow: none; background: var(--lg-fill); }
.book-card::after { opacity: .28; }

/* Floating bar & AI button: dark glass */
.tabbar { background: rgba(22, 25, 32, 0.72); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); }
.lg-lens .tabbar, .lg-lens .fab { background: rgba(22, 25, 32, 0.6); }
.fab { background: rgba(22, 25, 32, 0.72); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); }
.tab::before { background: rgba(255, 255, 255, 0.12); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12); }
.lg-lens .stat, .lg-lens .tile, .lg-lens .btn-glass, .lg-lens .chip, .lg-lens .icon-btn { background: var(--lg-fill); }

/* Sheets and assistant: neutral charcoal, not blue */
.sheet, .assistant { background: rgba(14, 16, 21, 0.92); }
.sheet-backdrop, .assistant-scrim { background: rgba(0, 0, 0, 0.6); }
.input, .select, .textarea { background: rgba(255, 255, 255, 0.04); border-color: rgba(255, 255, 255, 0.08); box-shadow: none; }
.rail { background: rgba(14, 16, 21, 0.7); }
.ai-line .ai-ico { background: rgba(255, 255, 255, 0.06); color: #fff; }
.feature .num { background: rgba(255, 255, 255, 0.06); color: #fff; }
.stat .accent { color: inherit; }
.link-btn { color: var(--accent-hi); }

/* ===== Performance pass: keep scrolling at display refresh rate (120 Hz) ===== */
/* Background lives on its own fixed, composited layer instead of background-attachment: fixed. */
body { background: #030406; }
.bg-fx { background: radial-gradient(80% 38% at 50% 0%, rgba(30, 58, 110, 0.35), transparent 70%); transform: translateZ(0); }

/* In-flow surfaces: no backdrop filter (nothing to blur on a black page), plain translucent fill. */
.glass, .btn-glass, .chip, .icon-btn, .tile, .date-chip, .slot, .pick, .qs, .ai-line, .contact-block,
.confirm-list, .summary-top, .segmented, .bk-row, .svc-row, .wk, .as-form .input, .lg, .stat, .book-card,
.review, .date-pill, .mode-pills .btn, .adm-actions .btn, .hero, .rail-link, .input, .select, .textarea {
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
}
.lg-lens .stat, .lg-lens .tile, .lg-lens .btn-glass, .lg-lens .chip, .lg-lens .icon-btn { background: var(--lg-fill); }

/* Floating chrome keeps real glass, on its own GPU layer. */
.tabbar, .fab, .rail { will-change: transform; transform: translateZ(0); }
.tabbar, .fab { backdrop-filter: blur(16px) saturate(160%); -webkit-backdrop-filter: blur(16px) saturate(160%); }
.sheet, .assistant { backdrop-filter: blur(20px) saturate(150%); -webkit-backdrop-filter: blur(20px) saturate(150%); }
.rail { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(14, 16, 21, 0.92); }

/* Cheaper transitions: transform/opacity only, no box-shadow or background animation. */
.btn, .chip, .icon-btn, .tile, .date-chip, .slot, .tab, .fab, .qs, .pick, .bk-row { transition: transform .4s var(--spring), opacity .2s; }

/* Off-screen sections skip rendering work. */
.home-extras, .site-footer, .service-grid > .service { content-visibility: auto; contain-intrinsic-size: auto 320px; }
.hero-cta .btn { backdrop-filter: blur(14px) saturate(150%) !important; -webkit-backdrop-filter: blur(14px) saturate(150%) !important; background: rgba(20, 24, 32, 0.45); }


/* Admin notification bell */
.bell { position: relative; }
.bell-badge { position: absolute; top: 4px; right: 2px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: #FF5A5F; color: #fff; font-size: 11px; font-weight: 800; line-height: 18px; text-align: center; pointer-events: none; }


/* ===== Accent themes (set by data-accent on <html>, chosen in admin) ===== */
:root {
  --accent: #4F8EF7; --accent-hi: #7DB0FA; --accent-lo: #3577E6; --accent-rgb: 79, 142, 247;
  --accent-ink: #071631;
  --accent-soft: rgba(var(--accent-rgb), 0.16); --accent-glow: rgba(var(--accent-rgb), 0.45);
  --top-glow: rgba(30, 58, 110, 0.35);
}
:root[data-accent="yellow"] {
  --accent: #FFC400; --accent-hi: #FFD84A; --accent-lo: #E0A800; --accent-rgb: 255, 196, 0;
  --accent-ink: #1A1300;
  --top-glow: rgba(120, 88, 0, 0.30);
}
.bg-fx { background: radial-gradient(80% 38% at 50% 0%, var(--top-glow), transparent 70%); }
.btn-primary, .btn-primary:hover, .chip[aria-pressed="true"], .chip.is-active, .date-chip[aria-pressed="true"], .slot[aria-pressed="true"],
.segmented button[aria-pressed="true"], .mode-pills .btn[aria-pressed="true"], .msg.user, .as-form .send, .contact-block .call, .check input:checked {
  background: var(--accent); border-color: var(--accent); color: var(--accent-ink);
}
.btn-primary:hover { background: var(--accent-hi); }
.btn-primary svg, .contact-block .call svg { color: var(--accent-ink); }
.check input:checked::after { border-color: var(--accent-ink); }
.date-chip[aria-pressed="true"] small { color: var(--accent-ink); opacity: .7; }
.link-btn { color: var(--accent-hi); }
.progress i::after { background: var(--accent); }
.badge-confirmed { background: rgba(var(--accent-rgb), 0.16); color: var(--accent-hi); }
:focus-visible { outline-color: var(--accent-hi); }
::selection { background: var(--accent); color: var(--accent-ink); }

/* ===== Smoothness pass ===== */
/* Colour changes fade instead of snapping (only run on interaction, so they are cheap). */
.btn, .chip, .icon-btn, .tile, .date-chip, .slot, .qs, .pick, .bk-row, .rail-link, .tab, .segmented button, .mode-pills .btn, .link-btn, .ai-line, .book-card {
  transition: transform .45s var(--spring), background-color .28s var(--ease), color .28s var(--ease), border-color .28s var(--ease), opacity .25s var(--ease);
}
.date-chip small, .pick .radio, .pick .radio::after, .check input, .check input::after, .switch input, .switch input::after {
  transition: transform .3s var(--spring), background-color .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease);
}
/* Locking scroll must not remove the scrollbar and reflow the whole page. */
html { scrollbar-gutter: stable; }
/* Sheets animate on their own compositor layers from the first frame. */
.sheet, .sheet-backdrop, .assistant, .assistant-scrim, .toast { will-change: transform, opacity; }
.sheet { contain: layout paint; }
/* Natural iOS-like easing for sheets. */
.sheet { transition: transform .5s cubic-bezier(.32, .72, 0, 1), opacity .3s var(--ease); }
.sheet-backdrop { transition: opacity .35s var(--ease); }
.view { animation-duration: .38s; }

/* Sheets animated by the Web Animations API (see ui.js openSheet): CSS transitions off. */
.sheet-layer.waapi .sheet, .sheet-layer.waapi .sheet-backdrop { transition: none !important; }
.sheet-layer.waapi .sheet { will-change: auto; contain: none; }


/* ===== Firefox: its backdrop-filter is CPU-heavy during animations, use dense fills instead ===== */
@supports (-moz-appearance: none) {
  .sheet, .assistant { backdrop-filter: none !important; background: rgba(16, 18, 24, 0.97) !important; }
  .sheet-backdrop, .assistant-scrim { backdrop-filter: none !important; background: rgba(0, 0, 0, 0.66) !important; }
  .sheet::before, .assistant::before { display: none; } /* masked rim re-rasterizes while moving */
  .sheet { border: 1px solid rgba(255, 255, 255, 0.08); border-bottom: 0; }
}