/* Reference coordinates share one containing block. Viewport height never moves the car. */
html { background:#07090b; -webkit-text-size-adjust:100%; scroll-padding-top:16px; }
body { background:#07090b; overflow-x:clip; }
[hidden] { display:none !important; }
.sr-only { position:absolute!important; width:1px!important; height:1px!important; padding:0!important; margin:-1px!important; overflow:hidden!important; clip:rect(0,0,0,0)!important; white-space:nowrap!important; border:0!important; }
.app-shell {
  --scene-width:min(100vw, 430px);
  --scene-height:calc(var(--scene-width) * 1.776833);
  position:relative; width:min(100%,430px); min-height:100svh;
  margin:0 auto; padding:0 6.3% 28px; isolation:isolate;
  background:#07090b; overflow:clip; container-type:inline-size;
}
@media(min-width:430px) { .app-shell {padding-inline:27px;} }
.scene-layer {
  position:absolute; top:0; left:0; width:100%; height:var(--scene-height);
  z-index:0; pointer-events:none; overflow:hidden;
}
.scene-car { position:absolute; inset:0; background-image:url('garage-scene.png'); background-size:100% 100%; background-repeat:no-repeat; }
.scene-shade { position:absolute; inset:0; background:linear-gradient(180deg,transparent 90%,#07090b); }
/* Smoke lives along the sides and below the bonnet, leaving copy unobscured. */
.smoke { position:absolute; width:118%; height:36%; left:-18%; top:33%;
 background:url('smoke-overlay.png') center / 100% 100% no-repeat;
 pointer-events:none; opacity:.46; will-change:transform,opacity; mix-blend-mode:screen;
 /* Multiply vertical and horizontal fades: every texture edge reaches zero alpha. */
 --smoke-fade-y:linear-gradient(transparent, #000 18%, #000 78%, transparent);
 --smoke-fade-x:linear-gradient(to right, transparent 3%, #0004 10%, #000 24%, #000 76%, #0004 90%, transparent 97%);
 -webkit-mask-image:var(--smoke-fade-y),var(--smoke-fade-x);
 -webkit-mask-composite:source-in,source-over;
 mask-image:var(--smoke-fade-y),var(--smoke-fade-x);
 mask-composite:intersect,add;
}
.smoke-a { animation:smokeLeft 7s -2s ease-in-out infinite alternate; }
.smoke-b { top:39%; left:18%; width:108%; height:31%; animation:smokeRight 9s -5s ease-in-out infinite alternate; }
.smoke-c { top:50%; left:-22%; width:128%; height:23%; animation:smokeGround 8s -3s ease-in-out infinite alternate; }
@keyframes smokeLeft {
 from {transform:translate3d(-9%,5%,0) scale(.94);opacity:.32;}
 to {transform:translate3d(9%,-12%,0) scale(1.12);opacity:.60;}
}
@keyframes smokeRight {
 from {transform:translate3d(8%,6%,0) scale(1);opacity:.28;}
 to {transform:translate3d(-12%,-13%,0) scale(1.16);opacity:.52;}
}
@keyframes smokeGround {
 from {transform:translate3d(-7%,8%,0) scale(.94);opacity:.24;}
 to {transform:translate3d(12%,-7%,0) scale(1.12);opacity:.46;}
}
.headlight-flash { position:absolute; width:20%; height:10%; top:42.1%; left:44%; opacity:0; background:radial-gradient(ellipse,rgba(255,255,255,1),rgba(216,234,255,.9) 8%,rgba(220,239,255,.45) 20%,transparent 65%); mix-blend-mode:screen; transform:rotate(-24deg); }
.headlight-left { left:-5%; top:45.5%; width:17%; height:8%; }
.headlight-burst .headlight-flash { animation:headlightBurst .82s ease-out both; }
@keyframes headlightBurst { 0%,29%,70%,100% {opacity:0;} 8%,18%,48%,58% {opacity:1;} }
.topbar, .topbar-centered { position:relative; top:auto; height:118px; min-height:118px; margin:0; padding:0; justify-content:flex-end; align-items:flex-start; z-index:2; }
.topbar-centered .brand-logo { position:absolute; top:25px; left:50%; width:110px; padding:0; transform:translateX(-50%); }
.brand-logo img { width:100%; height:auto; filter:none; }
.icon-button { margin-top:49px; width:41px; height:41px; border:1px solid #ffffff24; background:#161b1e90; box-shadow:none; }
.icon { width:19px; height:19px; }
.content-shell { position:relative; z-index:1; animation:none; }
body[data-page="landing"] .hero-reference { min-height:374px; margin:0; }
.hero-reference::before { display:none; }
.hero-rule { display:block; width:35px; height:3px; border-radius:3px; background:#ffd000; margin-bottom:13px; }
.hero-reference .eyebrow { font-size:12px; font-weight:600; letter-spacing:.045em; margin:0 0 4px; line-height:14px; }
.hero-reference .display-title { font-family:-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif; font-size:36px; font-weight:400; line-height:1.01; letter-spacing:-.035em; margin:0; }
.hero-reference .subhead { max-width:305px; font-size:14px; line-height:1.35; letter-spacing:-.022em; color:#bfc1c5; margin:12px 0 0; }
.booking-section { margin:0; }
.section-head-reference { align-items:center; gap:8px; margin:0 0 3px; min-height:28px; }
body[data-page="landing"] .section-title { font-size:17px; font-weight:600; line-height:1.2; letter-spacing:-.02em; }
.today-chip { display:flex; align-items:center; justify-content:center; gap:9px; min-height:32px; padding:5px 12px; border:1px solid #ffffff29; border-radius:24px; background:#ffffff15; color:#f5f5f7; font-size:13px; font-weight:500; backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); }
.today-chip svg { width:16px; height:16px; fill:currentColor; }
.date-strip,.time-strip { display:flex; gap:8px; width:100%; margin:0; padding:0 0 2px; overflow-x:auto; scrollbar-width:none; overscroll-behavior-x:contain; scroll-snap-type:x proximity; }
.date-strip::-webkit-scrollbar,.time-strip::-webkit-scrollbar {display:none;}
.date-strip .date-card,.time-option { flex:0 0 calc((100% - 32px)/5); min-width:0; border:1px solid #ffffff21; border-radius:10px; background:linear-gradient(135deg,#242a2d90,#14191b9c); box-shadow:inset 0 0 0 1px #ffffff05; color:#e8e9eb; backdrop-filter:blur(9px); -webkit-backdrop-filter:blur(9px); scroll-snap-align:start; }
.date-strip .date-card { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; height:87px; min-height:87px; padding:8px 2px; cursor:pointer; }
.date-card__dow { font-size:12px; line-height:1; font-weight:400; color:#a7abb0; }
.date-card__day { font-size:21px; line-height:1; font-weight:600; letter-spacing:-.04em; }
.date-card__month { font-size:12px; line-height:1; color:#a7abb0; }
.date-strip .date-card__dot { position:static; width:7px; height:7px; margin-top:2px; border-radius:50%; background:#747980; opacity:.65; transform:none; }
.date-strip .is-selected,.time-option.is-selected { border-color:#ffce00; background:linear-gradient(135deg,#4c400077,#28220a88); color:#ffd000; box-shadow:inset 0 0 0 .3px #ffce00; }
.date-strip .is-selected .date-card__dow,.date-strip .is-selected .date-card__month {color:#ffd000;}
.date-strip .is-selected .date-card__day { color:#fff; }
.date-strip .is-selected .date-card__dot { background:#ffd000; opacity:1; }
.time-section {margin-top:13px;}
.time-section .section-head {margin-bottom:8px;min-height:20px;}
body[data-page="landing"] .meta-text { font-size:11px; color:#92979c; white-space:nowrap; }
.time-option { min-height:40px; padding:4px 1px; font-size:14px; font-weight:400; cursor:pointer; }
.time-empty {font-size:14px;color:#bfc1c5;margin:10px 0;}
.booking-cta { display:flex; align-items:center; justify-content:center; width:100%; min-height:40px; padding:10px; margin-top:11px; border:1px solid #ffe03b; border-radius:10px; background:linear-gradient(110deg,#ffd500,#f3c600); color:#080a0b; font-size:16px; font-weight:650; line-height:1; text-decoration:none; }
.booking-cta[aria-disabled="true"] { opacity:.45; pointer-events:none; }
.pressable { will-change:auto; }
.pressable:hover,.pressable:active,.pressable.is-pressed {transform:none;filter:brightness(1.08);}
.topbar-centered .brand-logo:hover,.topbar-centered .brand-logo:active,.topbar-centered .brand-logo.is-pressed {transform:translateX(-50%);}
.button { color:#111;box-shadow:none; }
.button-secondary,.button-danger {color:#fff;}
body:not([data-page="landing"]) .scene-layer {opacity:.24;}
body:not([data-page="landing"]) .hero {margin-bottom:24px;}
body:not([data-page="landing"]) .topbar {margin-bottom:12px;}
body:not([data-page="landing"]) .content-shell {padding-bottom:20px;}
.form-card {padding:20px;}
.booking-error {color:#ffb4ac;font-size:14px;line-height:1.4;}
.admin-slot__head {flex-wrap:wrap;}
.admin-slot__client,.summary-capsule {overflow-wrap:anywhere;}
body.booking-confirmed > .scene-layer {position:fixed;top:50%;left:50%;width:min(100vw,430px);height:auto;transform:translate(-50%,-50%);opacity:1;z-index:50;background:#07090b;}
body.booking-confirmed .content-shell,body.booking-confirmed .topbar {visibility:hidden;}
@media(max-width:400px) {
 .topbar,.topbar-centered {height:108px;min-height:108px;}
 .topbar-centered .brand-logo {top:17px;width:104px;}
 .icon-button {margin-top:34px;}
 body[data-page="landing"] .hero-reference {min-height:calc(var(--scene-width) * 1.145 - 108px);}
 .hero-reference .display-title {font-size:clamp(28px,8.38vw,34px);}
 .hero-reference .subhead {font-size:13px;max-width:285px;}
 .date-strip .date-card {height:82px;min-height:82px;}
 .time-option {font-size:13px;min-height:44px;}
 .booking-cta {min-height:44px;}
}
@media(prefers-reduced-motion:reduce) { .smoke,.headlight-flash {animation:none!important;} .smoke {opacity:.12;} }

.admin-logout {display:flex;justify-content:flex-end;margin:0 0 20px;}
.flash-messages {display:grid;gap:12px;margin:0 0 24px;min-width:0;}
.flash-messages .notice {margin:0;min-width:0;overflow-wrap:anywhere;}
/* Container units follow the actual available width, including desktop scrollbars. */
.app-shell {padding:0 0 max(24px,env(safe-area-inset-bottom));}
.content-shell,.topbar {margin-inline:6.3%;}
.scene-layer {height:auto;aspect-ratio:941/1672;}
.topbar,.topbar-centered {height:27.44cqw;min-height:27.44cqw;}
.topbar-centered .brand-logo {top:5.8cqw;width:25.58cqw;}
.icon-button {margin-top:11.4cqw;}
body[data-page="landing"] .hero-reference {min-height:87cqw;}
.hero-reference .display-title {font-size:8.37cqw;}
.hero-reference .subhead {font-size:max(12px,3.25cqw);max-width:71cqw;}
.scene-shade {background:linear-gradient(180deg,transparent 63%,#07090b55 77%,#07090b 100%);}

.date-strip .date-card {gap:5px;padding:6px 2px;}
.date-strip .date-card__dot {flex:none;}
@media(max-width:400px) {.date-strip .date-card {gap:4px;}}
.confirm-dialog {width:min(90vw,360px);border:1px solid #ffffff29;border-radius:22px;padding:24px;background:#171b1e;color:#f5f5f7;box-shadow:0 20px 80px #0009;}
.confirm-dialog::backdrop {background:#000b;backdrop-filter:blur(5px);}
.confirm-dialog h2 {font-size:22px;line-height:1.25;margin:0 0 24px;}
.confirm-dialog button+button {margin-top:12px;}
.app-shell {padding-top:env(safe-area-inset-top,0px);}
.scene-layer {top:env(safe-area-inset-top,0px);}
body.booking-confirmed > .scene-layer {top:50%;}
body.booking-confirmed {overflow:hidden;}
body.booking-confirmed .app-shell {visibility:hidden;}
.brand-logo img {height:16.28cqw;object-fit:fill;}
@media(max-width:350px) {
 .scene-layer {top:calc(env(safe-area-inset-top,0px) + 16px);}
 body[data-page="landing"] .hero-reference {min-height:calc(87cqw + 16px);}
 body.booking-confirmed > .scene-layer {top:50%;}
}

.mechanic-card {min-width:0;overflow-wrap:anywhere;}
.mechanic-card h3 {margin:0;font-size:20px;}
.mechanic-card .admin-slot__head {gap:12px;}
.mechanic-card input,.mechanic-editor select {width:100%;min-width:0;}
.mechanic-status-form {margin-top:12px;}
.mechanic-editor {border-top:1px solid #ffffff20;padding:14px 0;margin-top:14px;}
.mechanic-editor summary {cursor:pointer;color:#ffd000;min-height:36px;padding:6px 0;}
.mechanic-editor form {margin-top:12px;}
.confirm-dialog h2 {font-size:20px;}

/* Telegram exposes additional insets for its native controls. */
.telegram-mini-app .app-shell {padding-top:max(env(safe-area-inset-top,0px),var(--tg-content-safe-area-inset-top,0px));padding-bottom:max(24px,env(safe-area-inset-bottom,0px),var(--tg-content-safe-area-inset-bottom,0px));}
.telegram-mini-app .scene-layer {top:max(env(safe-area-inset-top,0px),var(--tg-content-safe-area-inset-top,0px));}
.telegram-mini-app body.booking-confirmed > .scene-layer {top:50%;}

/* Native date/time controls must fit narrow iPhone form cards. */
.field {min-width:0;}
.field input,.field select,.field textarea {min-width:0;max-width:100%;box-sizing:border-box;}
body[data-page="admin-index"] .hero > .button + .button {margin-top:12px;}
body[data-page="admin-book"] .page-title {font-size:clamp(28px,8vw,38px);}
body[data-page="admin-book"] .notice {overflow-wrap:anywhere;}

/* Admin summaries and booking records share the same compact surface language. */
.optional-label {color:var(--color-label-tertiary);font-size:.9em;font-weight:400;}
.admin-actions {align-items:stretch;flex-wrap:wrap;margin-top:var(--space-4);}
.admin-actions .button {width:auto;flex:1 1 180px;}
.calendar-toolbar {align-items:flex-end;flex-wrap:wrap;}
.admin-date-form {display:flex;align-items:flex-end;gap:8px;min-width:0;}
.admin-date-form input {width:auto;min-width:0;flex:1 1 150px;}
.admin-date-form .button {width:auto;flex:0 0 auto;}
.calendar-nav {display:flex;justify-content:space-between;align-items:center;gap:var(--space-3);margin:-4px 0 var(--space-4);}
.calendar-nav .back-link {margin:0;}
.admin-date-grid .date-card {min-width:0;gap:6px;padding:12px;}
.admin-date-grid .date-card.is-selected {border-color:var(--color-accent);background:var(--color-accent-soft);}
.admin-date-grid .date-card.is-selected .date-card__dot {opacity:1;transform:scale(1);}
.date-card__counts {display:grid;gap:2px;margin-top:auto;color:var(--color-label-tertiary);font-size:11px;line-height:1.2;overflow-wrap:anywhere;}
.admin-date-grid .date-card.is-selected .date-card__counts {color:var(--color-label-secondary);}
.summary-grid {display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-3);margin-bottom:var(--space-4);}
.summary-stat {display:grid;gap:4px;min-width:0;padding:14px;border:1px solid var(--color-separator);border-radius:var(--radius-sm);background:var(--color-surface);}
.summary-stat__value {font-size:24px;line-height:1;font-weight:700;letter-spacing:-.04em;}
.summary-stat__label {color:var(--color-label-secondary);font-size:12px;line-height:1.2;}
.summary-stat--free .summary-stat__value {color:var(--color-success);}
.summary-stat--booked .summary-stat__value {color:var(--color-danger);}
.summary-stat--unavailable .summary-stat__value {color:var(--color-warning);}
.actions-row {flex-wrap:wrap;}
.actions-row > .button,.actions-row > form {min-width:0;flex:1 1 160px;}
.actions-row > form {display:flex;margin:0;}
.actions-row > form .button {flex:1 1 auto;}
.booking-link {display:inline-block;color:var(--color-accent);font-weight:700;text-decoration:none;overflow-wrap:anywhere;}
.booking-link:hover,.booking-link:focus-visible {text-decoration:underline;}
.resource-list {display:grid;gap:3px;margin-top:8px;color:var(--color-label-secondary);font-size:13px;line-height:1.35;overflow-wrap:anywhere;}
.admin-slot__comment {margin-top:8px;}
.booking-card__head {align-items:flex-start;margin-bottom:var(--space-4);}
.booking-data-grid {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-3);margin:0;}
.booking-data-grid > div {min-width:0;padding:12px;border:1px solid var(--color-separator);border-radius:var(--radius-sm);background:rgba(255,255,255,.025);}
.booking-data-grid dt {margin:0 0 5px;color:var(--color-label-tertiary);font-size:12px;line-height:1.2;}
.booking-data-grid dd {margin:0;color:var(--color-label);font-size:15px;line-height:1.4;overflow-wrap:anywhere;}
.booking-visit {margin-top:var(--space-5);padding-top:var(--space-4);border-top:1px solid var(--color-separator);}
.booking-visit__value {font-size:20px;line-height:1.15;font-weight:700;letter-spacing:-.025em;overflow-wrap:anywhere;}
.confirmation-card__status {margin-top:-4px;}
.confirmation-card__details {width:100%;}
.confirmation-card__actions {display:grid;gap:var(--space-2);margin-top:var(--space-4);}
.confirmation-card__actions .button {width:100%;}
.delivery-card {display:grid;gap:var(--space-2);}
.delivery-card__label {margin:0;color:var(--color-label);font-size:16px;line-height:1.35;font-weight:700;overflow-wrap:anywhere;}
.delivery-card--received {border-color:rgba(48,209,88,.28);}
.delivery-card--pending {border-color:rgba(255,159,10,.28);}
.delivery-card--unknown {border-color:var(--color-separator-strong);}
.history-list {display:grid;gap:var(--space-3);margin:0;padding:0;list-style:none;}
.history-list--page {margin-top:var(--space-4);}
.history-item {display:grid;gap:var(--space-3);}
.history-item__head {display:flex;align-items:flex-start;justify-content:space-between;gap:var(--space-3);flex-wrap:wrap;min-width:0;}
.history-item__head > div {display:flex;align-items:center;gap:var(--space-2);min-width:0;flex-wrap:wrap;}
.history-item__details {display:grid;gap:4px;color:var(--color-label-secondary);font-size:14px;line-height:1.4;overflow-wrap:anywhere;}
.history-item--cancelled {border-color:rgba(255,69,58,.28);}
.danger-zone {border-color:rgba(255,69,58,.3);}
.danger-zone .field:last-of-type {margin-bottom:var(--space-4);}
.status-pending {color:var(--color-warning);background:var(--color-warning-soft);}
.status-received {color:var(--color-success);background:var(--color-success-soft);}
.status-unknown,.status-unavailable,.status-past,.status-conflict {color:var(--color-label-secondary);background:var(--color-surface-2);}
.status-cancelled {color:var(--color-danger);background:var(--color-danger-soft);}
.booking-card--cancelled {border-color:rgba(255,69,58,.28);}

@media(max-width:520px) {
  .summary-grid {grid-template-columns:repeat(2,minmax(0,1fr));}
  .admin-date-grid .date-card {padding:11px 9px;}
}
@media(max-width:400px) {
  .booking-data-grid {grid-template-columns:1fr;}
  .admin-date-form {width:100%;}
  .admin-date-form input {flex-basis:0;}
}
@media(max-width:360px) {
  .admin-actions .button {flex-basis:100%;}
  .calendar-nav .back-link,.calendar-nav .meta-text {font-size:13px;}
}