@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/newsreader-0-bf061e69.ttf") format('truetype');
}
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/newsreader-1-3795ecc7.ttf") format('truetype');
}
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/barlow-0-e5d90022.ttf") format('truetype');
}
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/barlow-1-29ae1e79.ttf") format('truetype');
}
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/barlow-2-49cef207.ttf") format('truetype');
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/manrope-0-7fe97da0.ttf") format('truetype');
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/manrope-1-fa12a073.ttf") format('truetype');
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/manrope-2-c0e79af6.ttf") format('truetype');
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/manrope-3-6501e5cd.ttf") format('truetype');
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("/assets/manrope-4-8fd8c8e7.ttf") format('truetype');
}
:root {
  color-scheme: light;
  --nav-height: 72px;
  --focus: #2375ff;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; font-family: "Manrope", sans-serif; color: #18201c; background: #f4f1e9; }
button, input, textarea { font: inherit; }
button { cursor: pointer; }
button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}
[hidden] { display: none !important; }
.svg-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
svg { fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
.prototype-shell { min-height: 100vh; }
.prototype-nav {
  position: sticky; top: 0; z-index: 50; height: var(--nav-height); padding: 0 clamp(16px, 4vw, 64px);
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px;
  background: #fbfaf6; color: #18201c; border-bottom: 1px solid #d8d5cc;
}
.prototype-brand { display: flex; align-items: center; gap: 10px; color: inherit; text-decoration: none; font-weight: 800; letter-spacing: -.03em; }
.prototype-brand svg { width: 32px; height: 32px; }
.variant-tabs { display: flex; gap: 4px; padding: 4px; border-radius: 12px; background: #e9e6dd; }
.variant-tabs button { border: 0; background: transparent; color: #555b57; min-height: 42px; padding: 8px 14px; border-radius: 9px; font-size: 13px; font-weight: 800; }
.variant-tabs button span { margin-left: 5px; }
.variant-tabs button.is-active { color: #fff; background: #202521; box-shadow: 0 4px 12px rgba(20,30,24,.2); }
.prototype-flag { justify-self: end; font-size: 12px; font-weight: 700; color: #5e655f; }
.prototype-note { margin: 0 0 16px; font-size: 11px !important; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.booking-error { margin: 16px 0 0; padding: 12px 14px; background: #fff0eb; color: #8d2113; border-radius: 10px; font-weight: 700; font-size: 14px; }
.booking-stage[hidden] { display: none; }
.booking-confirmation { min-height: 430px; align-content: center; }
.text-back { border: 0; background: none; color: inherit; padding: 8px 0; margin-bottom: 18px; text-decoration: underline; text-underline-offset: 4px; }

/* A — SERVICE PASSPORT */
.variant--passport { min-height: calc(100vh - var(--nav-height)); background: #e9e2d3; color: #241f19; position: relative; overflow: hidden; }
.passport-rail { position: absolute; inset: 0 auto 0 0; width: 38px; display: flex; flex-direction: column; justify-content: space-around; align-items: center; background: #a53629; color: #fff7e9; font: 600 10px "Barlow Condensed", sans-serif; letter-spacing: .18em; }
.passport-rail span { writing-mode: vertical-rl; transform: rotate(180deg); }
.passport-wrap { width: min(1260px, calc(100% - 96px)); margin: 0 auto; padding: 72px 0 96px; }
.passport-intro { display: grid; grid-template-columns: 260px 1fr; gap: clamp(40px, 8vw, 130px); align-items: end; padding-bottom: 54px; border-bottom: 2px solid #28231d; }
.passport-mark { display: flex; align-items: center; gap: 18px; font: 700 17px/1.05 "Barlow Condensed", sans-serif; letter-spacing: .07em; }
.passport-mark svg { width: 86px; height: 62px; color: #a53629; stroke-width: 1.4; }
.passport-intro h1 { margin: 0; max-width: 780px; font: 700 clamp(60px, 8vw, 112px)/.78 "Barlow Condensed", sans-serif; letter-spacing: -.03em; text-transform: uppercase; }
.passport-intro > div:last-child > p:last-child { max-width: 650px; margin: 30px 0 0; color: #50483f; font-size: 18px; line-height: 1.65; }
.passport-booking { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: clamp(32px, 7vw, 100px); padding-top: 60px; }
.passport-progress { display: flex; align-items: center; gap: 0; margin-bottom: 52px; }
.passport-progress span { flex: 1; padding: 0 0 13px; border-bottom: 3px solid #bfb7a7; color: #777063; font: 600 14px "Barlow Condensed", sans-serif; letter-spacing: .08em; text-transform: uppercase; }
.passport-progress span.is-current, .passport-progress span.is-complete { color: #a53629; border-color: #a53629; }
.passport-stages h2 { margin: 0 0 8px; font: 600 clamp(36px, 4vw, 56px)/1 "Barlow Condensed", sans-serif; letter-spacing: -.02em; }
.stage-help { color: #665f55; line-height: 1.6; margin: 0 0 28px; }
.passport-services { border-top: 1px solid #81796c; }
.passport-service { width: 100%; min-height: 96px; display: grid; grid-template-columns: 48px 1fr auto 30px; align-items: center; gap: 18px; text-align: left; border: 0; border-bottom: 1px solid #81796c; background: transparent; color: inherit; padding: 14px 12px; transition: background .18s ease, transform .18s ease; }
.passport-service:hover { background: rgba(255,255,255,.38); transform: translateX(6px); }
.passport-service > svg:first-child { width: 36px; height: 36px; color: #a53629; }
.passport-service strong { display: block; font-size: 17px; }
.passport-service small { display: block; color: #615a51; margin-top: 4px; }
.passport-service em { font: 600 14px "Barlow Condensed", sans-serif; font-style: normal; letter-spacing: .07em; }
.select-check { width: 25px; height: 25px; border: 1px solid currentColor; border-radius: 50%; padding: 4px; opacity: 0; }
.passport-service.is-selected { background: #fffaf0; }
.passport-service.is-selected .select-check { opacity: 1; color: #a53629; }
.passport-next { margin-top: 28px; min-height: 54px; border: 0; background: #a53629; color: #fff; padding: 14px 22px; display: inline-flex; align-items: center; gap: 34px; font-weight: 800; }
.passport-next:hover { background: #7f271e; }
.passport-next svg { width: 24px; height: 24px; }
.passport-ticket { align-self: start; position: sticky; top: calc(var(--nav-height) + 28px); background: #f7f1e5; box-shadow: 8px 16px 28px rgba(70,49,25,.16); padding: 24px; transform: rotate(1deg); border-top: 7px solid #a53629; }
.ticket-head { display: flex; justify-content: space-between; font: 600 13px "Barlow Condensed", sans-serif; letter-spacing: .1em; padding-bottom: 15px; border-bottom: 1px dashed #787064; }
.ticket-bike { display: grid; place-items: center; height: 150px; }
.ticket-bike svg { width: 136px; height: 96px; color: #a53629; stroke-width: 1.2; }
.passport-ticket dl { margin: 0; }
.passport-ticket dl div { padding: 16px 0; border-top: 1px solid #d1c8b9; }
.passport-ticket dt { color: #6a6359; font: 600 11px "Barlow Condensed", sans-serif; letter-spacing: .1em; text-transform: uppercase; }
.passport-ticket dd { margin: 5px 0 0; font-weight: 800; line-height: 1.35; }
.passport-ticket > p { font-size: 12px; line-height: 1.55; color: #665e52; }
.ticket-code { display: flex; align-items: stretch; gap: 3px; height: 34px; margin-top: 22px; }
.ticket-code i { background: #29251f; width: 2px; }
.ticket-code i:nth-child(3n), .ticket-code i:nth-child(5n) { width: 6px; }
.passport-days { display: grid; gap: 14px; }
.passport-day { display: grid; grid-template-columns: 160px 1fr; gap: 20px; align-items: center; padding: 18px 0; border-bottom: 1px solid #a39a8b; }
.passport-day h3 { margin: 0; font: 600 20px "Barlow Condensed", sans-serif; text-transform: uppercase; }
.passport-day h3 small { display: block; margin-top: 4px; color: #665f55; font: 500 13px "Manrope", sans-serif; text-transform: none; }
.passport-day > div { display: flex; flex-wrap: wrap; gap: 9px; }
.passport-day button { min-height: 44px; border: 1px solid #766e62; background: transparent; padding: 9px 15px; }
.passport-day button:hover, .passport-day button.is-selected { background: #a53629; color: white; border-color: #a53629; }
.passport-form { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.passport-form label { display: grid; gap: 8px; font-weight: 700; }
.passport-form .full { grid-column: 1 / -1; }
.passport-form input, .passport-form textarea { width: 100%; border: 1px solid #797165; background: rgba(255,255,255,.42); padding: 15px; border-radius: 0; color: inherit; }
.passport-confirmation > svg { width: 70px; height: 70px; color: #a53629; border: 2px solid currentColor; border-radius: 50%; padding: 14px; margin-bottom: 24px; }
.passport-confirmation p { max-width: 58ch; line-height: 1.7; }

/* B — PITSTOP */
.variant--pitstop { min-height: calc(100vh - var(--nav-height)); background: #0b1013; color: #f0f3ed; position: relative; overflow: hidden; }
.pitstop-topline { display: flex; justify-content: space-between; padding: 14px clamp(20px, 5vw, 72px); border-bottom: 1px solid #3a4144; color: #b9ff2f; font: 600 13px "Barlow Condensed", sans-serif; letter-spacing: .14em; }
.pitstop-wrap { width: min(1320px, calc(100% - 48px)); margin: 0 auto; padding: 54px 0 100px; }
.pitstop-hero { display: grid; grid-template-columns: 1fr 340px; gap: 50px; align-items: end; margin-bottom: 54px; }
.pitstop-hero h1 { margin: 0; font: 700 clamp(72px, 11vw, 154px)/.72 "Barlow Condensed", sans-serif; letter-spacing: -.025em; text-transform: uppercase; }
.pitstop-hero h1 b { color: #b9ff2f; font-weight: inherit; }
.pitstop-hero > p { margin: 0; color: #b8c0bd; font-size: 18px; line-height: 1.65; }
.pitstop-console { display: grid; grid-template-columns: minmax(0, 1fr) 330px; border: 1px solid #3b4547; }
.pitstop-main { padding: clamp(24px, 4vw, 52px); min-height: 650px; }
.pitstop-progress { display: flex; gap: 8px; margin-bottom: 48px; }
.pitstop-progress span { flex: 1; padding: 11px 14px; background: #20272a; color: #788184; font: 600 13px "Barlow Condensed", sans-serif; letter-spacing: .12em; }
.pitstop-progress span.is-current { background: #b9ff2f; color: #0b1013; }
.pitstop-progress span.is-complete { background: #384244; color: #f0f3ed; }
.pitstop-main h2 { margin: 0 0 25px; font: 600 clamp(36px, 5vw, 62px) "Barlow Condensed", sans-serif; text-transform: uppercase; }
.fast-slots { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.fast-slots button { min-height: 118px; display: grid; grid-template-columns: 1fr auto 24px; gap: 15px; align-items: center; text-align: left; padding: 20px; border: 1px solid #4a5557; background: #141b1e; color: #f0f3ed; }
.fast-slots button:hover, .fast-slots button.is-selected { background: #b9ff2f; color: #0b1013; border-color: #b9ff2f; }
.fast-slots span { font: 600 15px "Barlow Condensed", sans-serif; letter-spacing: .08em; }
.fast-slots small { display: block; margin-top: 8px; font: 500 12px "Manrope", sans-serif; color: #9ba4a5; }
.fast-slots button.is-selected small, .fast-slots button:hover small { color: #2f3a19; }
.fast-slots strong { font: 600 46px "Barlow Condensed", sans-serif; }
.fast-slots svg { width: 24px; height: 24px; }
.pitstop-action { min-height: 58px; margin-top: 24px; padding: 15px 20px; border: 0; background: #b9ff2f; color: #0b1013; display: flex; justify-content: space-between; align-items: center; gap: 40px; font: 700 17px "Barlow Condensed", sans-serif; letter-spacing: .08em; }
.pitstop-action:hover { background: #dcff94; }
.pitstop-action svg { width: 25px; height: 25px; }
.pitstop-back { padding: 8px 0; margin: 0 0 20px; border: 0; background: none; color: #b9ff2f; font: 600 14px "Barlow Condensed", sans-serif; letter-spacing: .1em; }
.pitstop-board { position: relative; overflow: hidden; padding: 40px 30px; border-left: 1px solid #3b4547; background: #11171a; }
.pitstop-board > p { margin: 0 0 42px; color: #b9ff2f; font: 600 13px "Barlow Condensed", sans-serif; letter-spacing: .16em; }
.board-line { padding: 18px 0; border-top: 1px solid #3b4547; }
.board-line span { display: block; color: #899193; font: 600 12px "Barlow Condensed", sans-serif; letter-spacing: .14em; }
.board-line strong { display: block; margin-top: 8px; font: 600 24px/1.1 "Barlow Condensed", sans-serif; text-transform: uppercase; }
.board-status { margin-top: 32px; color: #b9ff2f; font: 600 12px "Barlow Condensed", sans-serif; letter-spacing: .1em; }
.board-status i { display: inline-block; width: 8px; height: 8px; margin-right: 7px; border-radius: 50%; background: #b9ff2f; box-shadow: 0 0 14px rgba(185,255,47,.6); }
.board-bike { position: absolute; right: -56px; bottom: -30px; width: 300px; height: 230px; color: #273235; stroke-width: .7; }
.hazard-band { position: absolute; right: -40px; top: 112px; width: 310px; height: 24px; transform: rotate(45deg); background: repeating-linear-gradient(90deg, #b9ff2f 0 22px, #0b1013 22px 44px); }
.pitstop-services { display: grid; gap: 8px; }
.pitstop-services button { min-height: 94px; display: grid; grid-template-columns: 12px 1fr auto; align-items: center; gap: 18px; text-align: left; border: 1px solid #465053; background: #141b1e; color: inherit; padding: 18px; }
.pitstop-services button > span { width: 11px; height: 48px; background: #344044; }
.pitstop-services strong { font: 600 21px "Barlow Condensed", sans-serif; letter-spacing: .04em; }
.pitstop-services small { display: block; margin-top: 5px; color: #aab2b1; font: 500 13px "Manrope", sans-serif; }
.pitstop-services em { font: 600 12px "Barlow Condensed", sans-serif; font-style: normal; color: #b9ff2f; }
.pitstop-services button:hover, .pitstop-services button.is-selected { border-color: #b9ff2f; }
.pitstop-services button.is-selected > span { background: #b9ff2f; }
.pitstop-form { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.pitstop-form label { display: grid; gap: 8px; }
.pitstop-form label > span { color: #b9ff2f; font: 600 12px "Barlow Condensed", sans-serif; letter-spacing: .12em; }
.pitstop-form input, .pitstop-form textarea { border: 1px solid #4c5659; background: #141b1e; color: #fff; padding: 16px; border-radius: 0; }
.pitstop-form .wide { grid-column: 1 / -1; }
.pitstop-form button.wide { width: 100%; }
.pitstop-confirmation { text-align: left; }
.signal-check { display: grid; place-items: center; width: 88px; height: 88px; margin-bottom: 30px; background: #b9ff2f; color: #0b1013; }
.signal-check svg { width: 48px; height: 48px; }
.pitstop-confirmation p { max-width: 54ch; color: #b8c0bd; line-height: 1.7; }

/* C — CALM */
.variant--calm { min-height: calc(100vh - var(--nav-height)); background: #f4f6ef; color: #15362f; }
.calm-header { height: 86px; padding: 0 clamp(20px, 5vw, 72px); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; border-bottom: 1px solid #cbd8cf; }
.calm-header a { display: flex; align-items: center; gap: 8px; color: inherit; text-decoration: none; font-family: "Newsreader", serif; font-weight: 700; line-height: .95; }
.header-bike-mark { position: relative; width: 64px; height: 44px; display: grid; flex: 0 0 auto; place-items: center; overflow: hidden; color: inherit; }
.header-bike-slide {
  position: absolute;
  inset: 5px 1px;
  background: currentColor;
  opacity: 0;
  transform: translateX(70px);
  -webkit-mask: var(--bike-image) center / contain no-repeat;
  mask: var(--bike-image) center / contain no-repeat;
  animation: header-bike-slide 12s cubic-bezier(.4, 0, .2, 1) infinite;
  animation-delay: calc(var(--bike-index) * 2s);
  will-change: transform, opacity;
}
@keyframes header-bike-slide {
  0% { opacity: 0; transform: translateX(64px); }
  3.33% { opacity: 1; }
  5.83%, 15% { opacity: 1; transform: translateX(0); }
  20.83%, 100% { opacity: 0; transform: translateX(-64px); }
}
.calm-header a svg { width: 42px; height: 42px; color: currentColor; }
.header-bike-static { display: none; }
.calm-header a small { font: 500 11px "Manrope", sans-serif; letter-spacing: .08em; }
.calm-header > span { color: #526a60; font-size: 13px; }
.calm-header > button { justify-self: end; min-width: 48px; min-height: 42px; border: 1px solid #9db1a6; border-radius: 12px; background: transparent; color: inherit; font-weight: 800; }
.calm-wrap { width: min(1160px, calc(100% - 40px)); margin: 0 auto; padding: 58px 0 96px; }
.calm-intro { display: grid; grid-template-columns: minmax(0, 1fr) minmax(470px, .92fr); align-items: center; gap: clamp(38px, 5vw, 70px); margin: 0 auto 64px; }
.variant--calm .prototype-note { color: #c91f68; }
.calm-intro h1 { margin: 0; font: 700 clamp(48px, 6vw, 76px)/1.03 "Newsreader", serif; letter-spacing: -.035em; text-wrap: balance; }
.calm-intro-copy > p:last-child { max-width: 650px; margin: 24px 0 0; color: #526a60; font-size: 18px; line-height: 1.7; }
.calm-brand-visuals { display: grid; grid-template-columns: .92fr 1.08fr; align-items: center; gap: clamp(14px, 2vw, 24px); }
.calm-eventijs-art, .calm-brand-art { position: relative; width: 100%; margin: 0; }
.calm-eventijs-art { overflow: hidden; }
.calm-eventijs-art img { display: block; width: 108%; height: auto; margin: -2% -4% 0; }
.calm-brand-art::after { content: ""; display: block; width: 74%; height: 5px; margin: -10px auto 0; border-radius: 999px; background: linear-gradient(90deg, #ef2878 0 33%, #05aaa3 33% 66%, #1559bd 66%); }
.calm-brand-art img { display: block; width: 100%; height: auto; mix-blend-mode: multiply; }
.calm-booking { display: grid; grid-template-columns: minmax(0, 1fr) 310px; gap: 30px; align-items: start; }
.calm-main { min-height: 620px; padding: clamp(24px, 4vw, 50px); border-radius: 16px; background: #fff; box-shadow: 0 16px 38px rgba(35,70,55,.1); }
.calm-progress { display: flex; align-items: center; gap: 6px; margin-bottom: 48px; }
.calm-progress span { flex: 1; display: flex; align-items: center; gap: 8px; color: #6c8077; font-size: 12px; font-weight: 700; }
.calm-progress span::after { content: ""; height: 2px; flex: 1; background: #d9e2dc; }
.calm-progress span:last-child::after { display: none; }
.calm-progress b { display: grid; place-items: center; flex: 0 0 30px; height: 30px; border-radius: 50%; background: #e5ece7; }
.calm-progress .is-current { color: #19362c; }
.calm-progress .is-current b, .calm-progress .is-complete b { background: #008f89; color: white; }
.calm-main h2 { margin: 0 0 24px; font: 600 clamp(30px, 4vw, 43px) "Newsreader", serif; letter-spacing: -.02em; }
.calm-intents { display: grid; gap: 12px; }
.calm-intents button { min-height: 108px; display: grid; grid-template-columns: 50px 1fr 28px; align-items: center; gap: 18px; text-align: left; border: 1px solid #c4d2c9; border-radius: 14px; background: #f8faf7; color: inherit; padding: 20px; }
.calm-intents button:hover { background: #eef5f0; border-color: #7ba08d; }
.calm-intents button.is-selected { background: #e4f0e9; border-color: #008f89; }
.calm-intents button > svg:first-child { width: 42px; height: 42px; color: #008f89; }
.calm-intents strong { display: block; font-size: 17px; }
.calm-intents small { display: block; margin-top: 6px; color: #526a60; line-height: 1.5; }
.calm-intents .select-check, .calm-slots .select-check { color: #008f89; }
.calm-intents button.is-selected .select-check, .calm-slots button.is-selected .select-check { opacity: 1; }
.calm-action { min-height: 56px; margin-top: 26px; border: 0; border-radius: 12px; background: #008f89; color: #fff; padding: 15px 20px; display: inline-flex; align-items: center; justify-content: space-between; gap: 40px; font-weight: 800; }
.calm-action:hover { background: #006d69; }
.calm-action svg { width: 24px; height: 24px; }
.mobile-booking-actions { display: contents; }
.mobile-back-action { display: none; }
.mobile-booking-actions.bike-diagnostic-action .calm-action { margin-top: 22px; }
.calm-back { padding: 7px 0; margin: 0 0 18px; border: 0; background: none; color: #008f89; font-weight: 800; text-decoration: underline; text-underline-offset: 4px; }
.calm-summary { position: sticky; top: calc(var(--nav-height) + 30px); padding: 28px; border-radius: 16px; background: #dceae1; }
.calm-summary h2 { margin: 0 0 26px; font: 600 25px "Newsreader", serif; }
.calm-summary > div { display: flex; align-items: flex-start; gap: 14px; padding: 18px 0; border-top: 1px solid #b8cbbf; }
.calm-summary svg { flex: 0 0 28px; width: 28px; height: 28px; color: #008f89; }
.calm-summary small { display: block; color: #587066; margin-bottom: 4px; }
.calm-summary strong { display: block; font-size: 14px; line-height: 1.5; }
.calm-summary > p { margin: 20px 0 0; color: #526a60; font-size: 12px; line-height: 1.6; }
.calm-slots { display: grid; gap: 20px; }
.calm-slots fieldset { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0; padding: 0; border: 0; }
.calm-slots legend { grid-column: 1 / -1; padding: 0 0 8px; font-weight: 800; }
.calm-slots button { min-height: 54px; display: grid; grid-template-columns: 24px 1fr 24px; gap: 9px; align-items: center; text-align: left; border: 1px solid #c4d2c9; border-radius: 12px; background: #f8faf7; color: inherit; padding: 12px 14px; }
.calm-slots button:hover, .calm-slots button.is-selected { border-color: #008f89; background: #e4f0e9; }
.calm-slots button > svg:first-child { width: 22px; height: 22px; color: #008f89; }
.calm-form { display: grid; gap: 18px; }
.calm-form label { display: grid; gap: 8px; font-weight: 700; }
.calm-form input, .calm-form textarea { width: 100%; border: 1px solid #a9bcb0; border-radius: 12px; background: #f8faf7; color: inherit; padding: 15px; }
.calm-form .calm-action { justify-self: start; }
.calm-confirmation { text-align: center; }
.calm-confirmation > div { display: grid; place-items: center; width: 80px; height: 80px; margin: 0 auto 28px; border-radius: 50%; background: #dceae1; color: #008f89; }
.calm-confirmation svg { width: 42px; height: 42px; }
.calm-confirmation p { max-width: 58ch; margin: 0 auto 24px; color: #526a60; line-height: 1.7; }
.calm-footer { display: grid; gap: 20px; padding: 32px max(20px, calc((100vw - 1160px) / 2)) 24px; border-top: 1px solid #ced9d0; color: #526a60; font-size: 12px; }
.calm-footer-details { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 32px; }
.calm-footer-brand { font-weight: 700; line-height: 1.4; }
.calm-footer-location { display: flex; align-items: center; gap: 12px; }
.calm-footer-pin { flex: 0 0 auto; width: 24px; height: 24px; color: #007c77; }
.calm-footer-address { font-style: normal; }
.calm-footer-address strong { color: #19362c; font-size: 15px; line-height: 1.4; }
.calm-footer-map { position: relative; height: clamp(210px, 18vw, 250px); overflow: hidden; border: 1px solid #c5d2ca; border-radius: 14px; background: #dceae1; }
.calm-footer-map iframe { position: absolute; inset: -44px; display: block; width: calc(100% + 88px); height: calc(100% + 88px); border: 0; pointer-events: none; filter: grayscale(1) sepia(.08) contrast(.9) brightness(1.04); opacity: .82; transition: filter 180ms cubic-bezier(.22, 1, .36, 1), opacity 180ms cubic-bezier(.22, 1, .36, 1); }
.calm-footer-map:hover iframe, .calm-footer-map:focus-within iframe { filter: grayscale(.55) saturate(.45) contrast(.95); opacity: 1; }
.calm-footer-map-pin { position: absolute; z-index: 1; left: 50%; top: 50%; width: 30px; height: 48px; transform: translate(-50%, -100%); fill: #d93434; stroke: #fff; stroke-width: 1.5; filter: drop-shadow(0 3px 4px rgba(25, 54, 44, .28)); pointer-events: none; }
.calm-footer-map-pin circle { fill: #fff; stroke: #d93434; stroke-width: 2; }
.calm-footer-map-link { position: absolute; z-index: 2; inset: 0; border-radius: inherit; cursor: pointer; }
.calm-footer-map-link:focus-visible { outline: 3px solid var(--focus); outline-offset: -4px; }
.calm-footer-map-attribution { position: absolute; z-index: 3; right: 6px; bottom: 5px; padding: 3px 5px; border-radius: 4px; background: rgba(248, 250, 247, .9); color: #526a60; font-size: 10px; font-weight: 700; line-height: 1.2; text-decoration: none; }
.calm-footer-map-attribution:hover { color: #19362c; text-decoration: underline; text-underline-offset: 2px; }


.upgrade-detail { max-width: 680px; }
.upgrade-comments { display: grid; gap: 10px; margin-top: 28px; font-weight: 800; }
.upgrade-comments textarea { width: 100%; border: 1px solid #a9bcb0; border-radius: 12px; background: #f8faf7; color: #15362f; padding: 16px; resize: vertical; line-height: 1.6; }

/* Bicycle issue clarification */
.bike-diagnostic > h2 { margin-bottom: 10px; }
.bike-type-picker { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 28px 0 0; }
.bike-type-picker button {
  position: relative;
  min-height: 190px;
  display: grid;
  grid-template-rows: 1fr auto;
  place-items: center;
  gap: 12px;
  padding: 18px 14px 15px;
  border: 1px solid #c2d1c8;
  border-radius: 14px;
  background: #f8faf7;
  color: #15362f;
  text-align: center;
  font-weight: 800;
}
.bike-type-picker button:hover { border-color: #008f89; background: #edf5f0; }
.bike-type-picker button.is-selected { border-color: #008f89; background: #dff0e8; box-shadow: 0 10px 24px rgba(25, 61, 50, .1); }
.bike-type-picker img { width: 100%; height: 118px; object-fit: contain; }
.bike-type-picker button > svg { position: absolute; top: 11px; right: 11px; width: 25px; height: 25px; padding: 4px; border-radius: 50%; background: #008f89; color: white; opacity: 0; }
.bike-type-picker button.is-selected > svg { opacity: 1; }
.bike-image-stage {
  position: relative;
  min-height: 390px;
  display: grid;
  place-items: center;
  margin: 28px 0 24px;
  padding: 34px 28px 72px;
  overflow: hidden;
  border-radius: 16px;
  background: #eaf1eb;
  box-shadow: 0 14px 32px rgba(25, 61, 50, .11);
}
.bike-visual { position: relative; width: min(78%, 620px); }
.bike-visual > img { display: block; width: 100%; height: 100%; object-fit: contain; }
.bike-hotspots { position: absolute; inset: 0; }
.bike-hotspot {
  position: absolute;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 2px solid #fff;
  border-radius: 50%;
  background: rgba(237, 42, 120, .86);
  color: #15362f;
  box-shadow: 0 5px 14px rgba(65, 22, 42, .24);
  transform: translate(-50%, -50%);
  transition: background .18s ease, box-shadow .18s ease;
}
.bike-hotspot::before { content: ""; position: absolute; inset: 8px; z-index: 1; border-radius: 50%; background: #fff; }
.bike-hotspot::after { content: ""; position: absolute; inset: -7px; border: 2px solid #ef2a78; border-radius: 50%; opacity: 0; pointer-events: none; }
.bike-hotspot span { position: absolute; left: 50%; bottom: calc(100% + 9px); width: max-content; max-width: 180px; padding: 7px 9px; border-radius: 8px; background: #15362f; color: #fff; font-size: 11px; font-weight: 750; opacity: 0; pointer-events: none; transform: translateX(-50%) translateY(3px); }
.bike-hotspot:hover span, .bike-hotspot:focus-visible span, .bike-hotspot.is-label-source span { opacity: 1; transform: translateX(-50%) translateY(0); }
.bike-hotspot.is-preview { background: #ef2a78; box-shadow: 0 7px 19px rgba(237, 42, 120, .34); }
.bike-hotspot.is-preview::after { animation: bike-hotspot-pulse 1.35s cubic-bezier(.2, .75, .25, 1) infinite; }
.bike-hotspot.is-selected { background: #008f89; box-shadow: 0 5px 16px rgba(0, 143, 137, .32); }
.bike-hotspot.is-selected.is-preview::after { border-color: #008f89; }
@keyframes bike-hotspot-pulse {
  0% { opacity: 0; transform: scale(.72); }
  28% { opacity: .72; }
  100% { opacity: 0; transform: scale(1.65); }
}
.bike-image-caption {
  position: absolute;
  inset: auto 16px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 11px 14px;
  border-radius: 12px;
  background: rgba(249, 251, 247, .96);
  color: #15362f;
  box-shadow: 0 8px 20px rgba(25, 61, 50, .09);
}
.bike-image-caption span { font-weight: 800; }
.bike-image-caption small { color: #526a60; text-align: right; }
.bike-area-picker { margin: 0; padding: 0; border: 0; }
.bike-area-picker legend { margin-bottom: 12px; padding: 0; color: #526a60; font-size: 14px; font-weight: 700; }
.bike-area-picker > div { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }
.bike-area-picker button {
  min-height: 52px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 11px 13px;
  border: 1px solid #b9cbc0;
  border-radius: 12px;
  background: #f8faf7;
  color: #15362f;
  text-align: left;
  font-size: 13px;
  font-weight: 750;
  transition: background .18s ease, border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.bike-area-picker button:hover, .bike-area-picker button.is-preview { border-color: #008f89; background: #eef6f1; box-shadow: 0 7px 16px rgba(25, 61, 50, .09); transform: translateY(-1px); }
.bike-area-picker button svg { width: 22px; height: 22px; flex: 0 0 22px; opacity: 0; color: #008f89; }
.bike-area-picker button.is-selected { border-color: #008f89; background: #e2f1eb; }
.bike-area-picker button.is-selected svg { opacity: 1; }
.bike-issue-panel {
  margin-top: 30px;
  padding: 28px;
  border-radius: 16px;
  background: #e8f1eb;
}
.bike-issue-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 18px; padding-bottom: 20px; border-bottom: 1px solid #bed0c5; }
.bike-issue-heading span { color: #526a60; font-size: 12px; font-weight: 700; }
.bike-issue-heading h3 { margin: 0; font: 600 27px "Newsreader", serif; letter-spacing: -.02em; text-align: right; }
.bike-issue-panel fieldset { margin: 24px 0 0; padding: 0; border: 0; }
.bike-issue-panel legend { margin-bottom: 12px; padding: 0; font-weight: 800; }
.bike-common-issues { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.bike-common-issues label {
  position: relative;
  min-height: 54px;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 12px 14px;
  border: 1px solid #b7c9be;
  border-radius: 12px;
  background: #f9fbf8;
  cursor: pointer;
  font-size: 14px;
  font-weight: 650;
}
.bike-common-issues label:has(input:checked) { border-color: #008f89; background: #d9eee6; }
.bike-common-issues input { width: 20px; height: 20px; margin: 0; accent-color: #008f89; }
.bike-comments { display: grid; gap: 9px; margin-top: 24px; font-weight: 800; }
.bike-comments small { color: #657c72; font-weight: 600; }
.bike-comments textarea { width: 100%; border: 1px solid #a9bcb0; border-radius: 12px; background: #fff; color: #15362f; padding: 15px; resize: vertical; }


@media (max-width: 900px) {
  :root { --nav-height: 108px; }
  .prototype-nav { height: auto; min-height: var(--nav-height); grid-template-columns: 1fr auto; padding-block: 12px; }
  .prototype-brand { grid-column: 1; }
  .prototype-flag { display: none; }
  .variant-tabs { grid-column: 1 / -1; grid-row: 2; width: 100%; }
  .variant-tabs button { flex: 1; }
  .passport-wrap { width: min(100% - 64px, 760px); padding-top: 50px; }
  .passport-intro { grid-template-columns: 1fr; gap: 42px; }
  .passport-mark { order: 2; }
  .passport-booking, .pitstop-console, .calm-booking { grid-template-columns: 1fr; }
  .passport-ticket, .calm-summary { position: static; order: -1; }
  .passport-ticket { transform: none; }
  .pitstop-hero { grid-template-columns: 1fr; }
  .pitstop-board { min-height: 300px; border-left: 0; border-top: 1px solid #3b4547; }
  .calm-header { grid-template-columns: 1fr auto; }
  .calm-header > span { display: none; }
  .calm-intro { grid-template-columns: 1fr; gap: 30px; }
  .calm-brand-visuals { width: min(540px, 82vw); margin-inline: auto; order: -1; }
  .bike-type-picker { grid-template-columns: 1fr 1fr; }
  .bike-area-picker > div { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 620px) {
  .variant-tabs button span { display: none; }
  .prototype-brand svg { width: 28px; height: 28px; }
  .passport-rail { width: 24px; }
  .passport-wrap { width: calc(100% - 54px); margin-left: 40px; padding: 42px 0 70px; }
  .passport-intro { padding-bottom: 38px; }
  .passport-intro h1 { font-size: clamp(54px, 18vw, 78px); }
  .passport-intro > div:last-child > p:last-child { font-size: 16px; }
  .passport-booking { padding-top: 38px; }
  .passport-progress span { font-size: 11px; }
  .passport-service { grid-template-columns: 38px 1fr 26px; gap: 11px; padding-inline: 6px; }
  .passport-service em { display: none; }
  .passport-service small { font-size: 12px; }
  .passport-ticket { padding: 20px; }
  .passport-day { grid-template-columns: 1fr; gap: 12px; }
  .passport-form, .pitstop-form { grid-template-columns: 1fr; }
  .passport-form .full, .pitstop-form .wide { grid-column: auto; }
  .passport-next { width: 100%; justify-content: space-between; }
  .pitstop-wrap { width: calc(100% - 30px); padding-top: 38px; }
  .pitstop-topline { font-size: 10px; }
  .pitstop-hero h1 { font-size: clamp(72px, 25vw, 110px); }
  .pitstop-main { padding: 22px 16px; min-height: 590px; }
  .pitstop-progress span { padding: 9px 6px; font-size: 10px; }
  .fast-slots { grid-template-columns: 1fr; }
  .fast-slots button { min-height: 92px; }
  .fast-slots strong { font-size: 38px; }
  .hazard-band { opacity: .5; }
  .calm-header { height: 76px; padding-inline: 16px; }
  .calm-wrap { width: calc(100% - 24px); padding: 46px 0 70px; }
  .calm-intro {
    grid-template-columns: minmax(0, 1fr) minmax(116px, .58fr);
    column-gap: 16px;
    row-gap: 24px;
    align-items: center;
    text-align: left;
    margin-bottom: 42px;
  }
  .calm-intro-copy, .calm-brand-visuals { display: contents; }
  .calm-brand-art {
    grid-column: 1 / -1;
    grid-row: 1;
    justify-self: center;
    width: min(210px, 58vw);
  }
  .calm-eventijs-art {
    grid-column: 2;
    grid-row: 2;
  }
  .calm-intro h1 {
    grid-column: 1;
    grid-row: 2;
    font-size: clamp(34px, 10vw, 46px);
  }
  .calm-intro-copy > p:last-child {
    grid-column: 1 / -1;
    grid-row: 3;
    margin-top: 0;
    font-size: 16px;
  }
  .calm-main { padding: 24px 16px; border-radius: 14px; }
  .calm-progress span { font-size: 0; }
  .calm-progress span b { font-size: 12px; }
  .calm-intents button { grid-template-columns: 40px 1fr 24px; padding: 16px; }
  .calm-slots fieldset { grid-template-columns: 1fr; }
  .calm-action { width: 100%; }
  /* Fixed actions stay out of the document flow so they do not leave a button-sized blank slot. */
  .mobile-booking-actions {
    position: fixed;
    z-index: 45;
    right: max(12px, env(safe-area-inset-right));
    bottom: max(12px, env(safe-area-inset-bottom));
    left: max(12px, env(safe-area-inset-left));
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr);
    gap: 8px;
  }
  .mobile-booking-actions.bike-diagnostic-action { margin: 0; }
  .mobile-booking-actions.bike-diagnostic-action .calm-action,
  .mobile-booking-actions .calm-action { width: auto; margin: 0; }
  .mobile-back-action {
    min-width: 56px;
    min-height: 56px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 1px solid #b8cbc0;
    border-radius: 12px;
    background: #f8faf7;
    color: #007c77;
    box-shadow: 0 10px 24px rgba(21, 54, 47, .2);
  }
  .mobile-back-action:hover { background: #e4f0e9; border-color: #008f89; }
  .mobile-back-action svg { width: 24px; height: 24px; }
  .mobile-forward-action { border: 1px solid rgba(255, 255, 255, .42); box-shadow: 0 12px 30px rgba(21, 54, 47, .28); }
  .mobile-forward-action svg { animation: mobile-forward-arrow 2.2s cubic-bezier(.16, 1, .3, 1) infinite; }
  .mobile-forward-action:disabled svg { animation: none; }
  @keyframes mobile-forward-arrow {
    0%, 30%, 100% { transform: translateX(0); }
    12% { transform: translateX(3px); }
  }
  .calm-footer { padding: 28px 12px 20px; }
  .calm-footer-map { height: 190px; }
  .bike-type-picker { gap: 8px; margin-top: 22px; }
  .bike-type-picker button { min-height: 148px; padding: 12px 9px; font-size: 12px; }
  .bike-type-picker img { height: 88px; }
  .bike-image-stage { min-height: 300px; padding: 24px 8px 66px; }
  .bike-visual { width: 92%; }
  .bike-hotspot { width: 32px; height: 32px; }
  .bike-hotspot::before { inset: 7px; }
  .bike-image-caption { inset: auto 10px 10px; padding: 10px 11px; }
  .bike-image-caption small { display: none; }
  .bike-area-picker button { min-height: 58px; padding: 10px; font-size: 12px; }
  .bike-issue-panel { padding: 20px 14px; }
  .bike-issue-heading { display: block; }
  .bike-issue-heading h3 { margin-top: 4px; text-align: left; }
  .bike-common-issues { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
  .header-bike-slide { display: none; }
  .header-bike-static { display: block; }
}


/* Dashboard */
.dashboard-body { min-height: 100vh; background: #f4f1e9; color: #18201c; }
.dashboard-nav { min-height: 76px; padding: 10px clamp(20px, 4vw, 64px); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px; background: #fbfaf6; border-bottom: 1px solid #d8d5cc; }
.dashboard-brand { display: flex; align-items: center; gap: 12px; width: fit-content; color: inherit; text-decoration: none; font-weight: 800; letter-spacing: -.025em; }
.dashboard-brand img { width: 46px; height: 48px; object-fit: contain; }
.dashboard-brand span { display: grid; line-height: 1.05; }
.dashboard-brand small { margin-top: 5px; color: #66706a; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.dashboard-nav nav { display: flex; align-self: stretch; gap: 28px; }
.dashboard-nav nav a { position: relative; display: grid; place-items: center; color: #59635d; text-decoration: none; font-size: 14px; font-weight: 700; }
.dashboard-nav nav a::after { content: ""; position: absolute; right: 0; bottom: -10px; left: 0; height: 3px; background: #16a6a1; transform: scaleX(0); transition: transform .25s cubic-bezier(.19,1,.22,1); }
.dashboard-nav nav a:hover, .dashboard-nav nav a.is-active { color: #18201c; }
.dashboard-nav nav a.is-active::after { transform: scaleX(1); }
.dashboard-nav form { justify-self: end; }
.dashboard-signout { min-height: 42px; padding: 8px 14px; border: 1px solid #c9cec9; border-radius: 12px; background: transparent; color: #3e4842; font-size: 13px; font-weight: 700; }
.dashboard-signout:hover { background: #e9eee9; }
.dashboard-flash { max-width: 1320px; margin: 18px auto -8px; padding: 12px 18px; border-radius: 12px; background: #dceee7; color: #1d593e; font-size: 14px; font-weight: 700; }
.dashboard-flash.is-error { background: #f8dfdf; color: #7a2525; }
.dashboard-main { max-width: 1440px; margin: 0 auto; padding: 46px clamp(20px, 4vw, 64px) 72px; }
.dashboard-heading { margin-bottom: 34px; display: flex; align-items: end; justify-content: space-between; gap: 24px; }
.dashboard-heading h1, .customer-profile h1 { margin: 0 0 6px; font: 700 clamp(38px, 4vw, 58px)/.98 "Newsreader", serif; letter-spacing: -.035em; }
.dashboard-heading p, .customer-profile p { margin: 0; color: #647068; font-size: 14px; }
.week-controls { display: flex; gap: 6px; padding: 4px; border-radius: 12px; background: #e7e5dd; }
.week-controls a { min-height: 40px; padding: 10px 13px; border-radius: 9px; color: #354039; text-decoration: none; font-size: 12px; font-weight: 800; }
.week-controls a:hover { background: #fbfaf6; }
.schedule { overflow-x: auto; border-top: 1px solid #bfc5bf; border-bottom: 1px solid #bfc5bf; background: #fbfaf6; }
.schedule-times, .schedule-row { min-width: 980px; display: grid; grid-template-columns: 138px 1fr; }
.schedule-times { min-height: 44px; align-items: end; border-bottom: 1px solid #d9ddd8; color: #5d6862; font-size: 10px; font-weight: 800; }
.schedule-times > div { display: grid; grid-template-columns: repeat(9, 1fr); }
.schedule-times span { padding: 0 6px 9px; }
.schedule-row { min-height: 116px; border-bottom: 1px solid #d9ddd8; }
.schedule-row:last-child { border-bottom: 0; }
.schedule-date { padding: 22px 18px; display: flex; flex-direction: column; border-right: 1px solid #d9ddd8; }
.schedule-date strong { font: 700 20px/1.1 "Newsreader", serif; }
.schedule-date span { margin-top: 6px; color: #6b756f; font-size: 11px; }
.schedule-row.is-today .schedule-date { background: #dceee7; }
.schedule-row.is-today .schedule-date span { color: #53675d; }
.schedule-track { position: relative; display: grid; grid-template-columns: repeat(18, minmax(42px, 1fr)); gap: 5px; padding: 10px 8px; background-image: linear-gradient(to right, transparent calc(100% - 1px), #e7e9e6 1px); background-size: calc(100% / 18) 100%; }
.schedule-empty { grid-column: 1 / -1; align-self: center; color: #929a95; font-size: 12px; }
.schedule-legend { display: flex; flex-wrap: wrap; gap: 10px 22px; margin: 0 0 14px; padding: 0; color: #59635d; list-style: none; font-size: 11px; font-weight: 700; }
.schedule-legend li { display: flex; align-items: center; gap: 7px; }
.schedule-legend li span { width: 10px; height: 10px; border-radius: 50%; background: #8f9993; }
.schedule-legend .status-registered span { background: #8f9993; }
.schedule-legend .status-accepted span { background: #4f78a3; }
.schedule-legend .status-in_progress span { background: #b17b18; }
.schedule-legend .status-done span { background: #548360; }
.bookings-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 14px; }
.bookings-toolbar .schedule-legend { margin-bottom: 0; }
.booking-view-switch { display: flex; flex: 0 0 auto; gap: 3px; padding: 3px; border-radius: 12px; background: #e7e5dd; }
.booking-view-switch a { min-height: 40px; display: flex; align-items: center; gap: 7px; padding: 9px 12px; border-radius: 9px; color: #59635d; text-decoration: none; font-size: 11px; font-weight: 800; }
.booking-view-switch a:hover { color: #26312b; }
.booking-view-switch a.is-active { background: #fbfaf6; color: #17635f; box-shadow: 0 4px 12px rgba(38,54,44,.08); }
.booking-view-switch svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.5; }
.booking-view-switch circle { fill: currentColor; stroke: none; }
.booking-list { border-top: 1px solid #bfc5bf; border-bottom: 1px solid #bfc5bf; background: #fbfaf6; }
.booking-list-day + .booking-list-day { border-top: 1px solid #bfc5bf; }
.booking-list-date { min-height: 64px; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 12px 20px; background: #f0efe9; }
.booking-list-day.is-today .booking-list-date { background: #dceee7; }
.booking-list-date > div { display: flex; align-items: baseline; gap: 9px; }
.booking-list-date strong { font: 700 21px/1.1 "Newsreader", serif; }
.booking-list-date span { color: #657068; font-size: 11px; font-weight: 700; }
.booking-list-date > span { flex: 0 0 auto; }
.booking-list-rows { margin: 0; padding: 0; list-style: none; }
.booking-list-rows li + li { border-top: 1px solid #e1e4df; }
.booking-list-item { min-height: 76px; display: grid; grid-template-columns: 72px minmax(150px, .8fr) minmax(240px, 1.5fr) minmax(130px, .65fr) 20px; align-items: center; gap: 20px; padding: 13px 20px; color: #27312b; text-decoration: none; transition: background .18s ease, color .18s ease; }
.booking-list-item:hover { background: #edf4ef; color: #115e5a; }
.booking-list-item:focus-visible { position: relative; z-index: 1; outline: 3px solid #168f8b; outline-offset: -3px; }
.booking-list-item time { font-size: 14px; font-weight: 800; }
.booking-list-item > strong { overflow: hidden; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.booking-list-service { min-width: 0; }
.booking-list-service strong, .booking-list-service small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.booking-list-service strong { font-size: 12px; }
.booking-list-service small { margin-top: 4px; color: #69736d; font-size: 10px; }
.booking-list-status { display: flex; align-items: center; gap: 8px; color: #555b56; font-size: 10px; font-weight: 800; }
.booking-list-status i { width: 9px; height: 9px; flex: 0 0 auto; border-radius: 50%; background: #8f9993; }
.booking-list-status.status-accepted { color: #21466b; }
.booking-list-status.status-accepted i { background: #4f78a3; }
.booking-list-status.status-in_progress { color: #654811; }
.booking-list-status.status-in_progress i { background: #b17b18; }
.booking-list-status.status-done { color: #244d31; }
.booking-list-status.status-done i { background: #548360; }
.booking-list-arrow { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.5; transition: transform .18s ease; }
.booking-list-item:hover .booking-list-arrow { transform: translateX(3px); }
.booking-list-empty { margin: 0; padding: 18px 20px; color: #7b847f; font-size: 12px; }
.schedule-booking { position: relative; z-index: 1; grid-column: var(--start) / span 4; min-width: 150px; padding: 10px 11px; overflow: hidden; border-radius: 12px; background: #d9efed; color: #173f3d; text-decoration: none; box-shadow: 0 7px 18px rgba(38,75,70,.08); transition: box-shadow .18s ease, transform .18s ease; }
.schedule-booking:hover { z-index: 2; box-shadow: 0 11px 25px rgba(38,75,70,.16); transform: translateY(-2px); }
.schedule-booking.status-registered { background: #e7e7e1; color: #555b56; }
.schedule-booking.status-accepted { background: #dce7f4; color: #21466b; }
.schedule-booking.status-in_progress { background: #f3e6c8; color: #654811; }
.schedule-booking.status-done { background: #dceee0; color: #244d31; }
.schedule-booking.status-cancelled { background: #e7e7e1; color: #555b56; }
.schedule-booking time { display: block; margin-bottom: 3px; font-size: 10px; font-weight: 800; }
.schedule-booking strong, .schedule-booking span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.schedule-booking strong { font-size: 13px; }
.schedule-booking span { margin-top: 2px; font-size: 10px; }
.schedule-booking small { position: absolute; top: 9px; right: 9px; padding: 3px 5px; border-radius: 6px; background: rgba(255,255,255,.65); font-size: 8px; font-weight: 800; text-transform: uppercase; }
.booking-detail-main { max-width: 1180px; }
.booking-detail-heading { display: flex; align-items: end; justify-content: space-between; gap: 28px; margin-bottom: 34px; }
.booking-detail-heading h1 { margin: 0 0 7px; font: 700 clamp(40px, 5vw, 62px)/.98 "Newsreader", serif; letter-spacing: -.035em; }
.booking-detail-heading p { margin: 0; color: #647068; font-size: 14px; }
.booking-status-badge { flex: 0 0 auto; padding: 8px 11px; border-radius: 9px; background: #d9efed; color: #173f3d; font-size: 10px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.booking-status-badge.status-accepted { background: #dce7f4; color: #21466b; }
.booking-status-badge.status-in_progress { background: #f3e6c8; color: #654811; }
.booking-status-badge.status-done { background: #dceee0; color: #244d31; }
.booking-status-badge.status-cancelled { background: #e7e7e1; color: #555b56; }
.booking-detail-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 24px; align-items: stretch; }
.booking-detail-panel, .booking-customer-panel { padding: clamp(24px, 4vw, 38px); border-radius: 16px; }
.booking-detail-panel { background: #fbfaf6; }
.booking-detail-panel h2, .booking-customer-panel h2, .booking-workflow h2 { margin: 0; font: 700 27px/1.1 "Newsreader", serif; letter-spacing: -.02em; }
.booking-facts { display: grid; grid-template-columns: 1fr 1fr; margin: 26px 0 0; }
.booking-facts div { min-width: 0; padding: 19px 20px 19px 0; border-top: 1px solid #d8dcd7; }
.booking-facts div:nth-child(even) { padding-left: 20px; }
.booking-facts div:nth-child(4) { grid-column: 1 / -1; padding-left: 0; }
.booking-facts div:nth-child(5) { grid-column: 1 / -1; }
.booking-facts dt { margin-bottom: 6px; color: #6a746e; font-size: 10px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.booking-facts dd { margin: 0; overflow-wrap: anywhere; font-size: 14px; font-weight: 700; line-height: 1.55; white-space: pre-line; }
.booking-customer-panel { display: flex; flex-direction: column; align-items: flex-start; background: #dceae1; }
.booking-customer-panel .customer-initial { margin: 28px 0 16px; }
.booking-customer-panel > strong { font-size: 17px; }
.booking-customer-panel > a { margin-top: 7px; color: #315d4d; font-size: 13px; font-weight: 700; }
.booking-customer-panel .customer-history-link { margin-top: auto; padding-top: 34px; color: #117873; text-decoration: none; }
.booking-customer-panel .customer-history-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.booking-workflow { margin-top: 26px; padding: clamp(24px, 4vw, 38px); border-radius: 16px; background: #fbfaf6; }
.booking-workflow-heading p { max-width: 66ch; margin: 9px 0 0; color: #647068; font-size: 13px; line-height: 1.55; }
.cancelled-booking-note { margin: 22px 0 0; padding: 13px 15px; border-radius: 12px; background: #eeeae4; color: #5d5650; font-size: 13px; font-weight: 700; }
.workflow-steps { margin: 28px 0 0; padding: 0; list-style: none; }
.workflow-steps li { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: 18px; min-height: 88px; padding: 15px 0; border-top: 1px solid #d8dcd7; }
.workflow-steps li.is-current { margin-inline: -14px; padding-inline: 14px; border-radius: 12px; background: #e7f1eb; }
.workflow-marker { width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid #abb5ae; border-radius: 50%; color: #66716a; font-size: 12px; font-weight: 800; }
.is-complete .workflow-marker, .is-current .workflow-marker { border-color: #117873; background: #117873; color: #fff; }
.workflow-step-copy strong { display: block; font-size: 14px; }
.workflow-step-copy p { margin: 4px 0 0; color: #68726c; font-size: 12px; line-height: 1.45; }
.workflow-current { color: #17635f; font-size: 11px; font-weight: 800; }
.workflow-action { min-height: 42px; padding: 9px 12px; border: 1px solid #b7c0ba; border-radius: 10px; background: transparent; color: #354039; font-size: 11px; font-weight: 800; }
.workflow-action:hover { border-color: #117873; background: #edf4ef; color: #0c625e; }
.booking-delete { display: flex; align-items: center; justify-content: space-between; gap: 28px; margin-top: 26px; padding: 24px clamp(24px, 4vw, 38px); border-radius: 16px; background: #f7e9e7; }
.booking-delete h2 { margin: 0; color: #6f2929; font: 700 24px/1.1 "Newsreader", serif; letter-spacing: -.02em; }
.booking-delete p { max-width: 62ch; margin: 8px 0 0; color: #704846; font-size: 13px; line-height: 1.55; }
.booking-delete form { flex: 0 0 auto; }
.booking-delete-action { min-height: 44px; padding: 11px 17px; border: 0; border-radius: 12px; background: #9d3535; color: #fff; font-size: 13px; font-weight: 800; }
.booking-delete-action:hover { background: #7d2727; }
.customer-delete-link, .customer-table .customer-delete-link { color: #963737; }
.customer-delete-link:hover { color: #6f2929; text-decoration: underline; text-underline-offset: 3px; }
.customer-delete-page { max-width: 1040px; }
.customer-delete-confirmation { padding: clamp(24px, 5vw, 52px); border-top: 1px solid #c9cbc5; border-bottom: 1px solid #c9cbc5; background: #fbfaf6; }
.customer-delete-header { display: grid; grid-template-columns: 58px minmax(0, 1fr); gap: 20px; align-items: start; }
.customer-delete-icon { width: 58px; height: 58px; display: grid; place-items: center; border-radius: 50%; background: #f2ddda; color: #873131; }
.customer-delete-icon svg { width: 28px; height: 28px; }
.customer-delete-header h1 { max-width: 16ch; margin: 0; color: #4e2323; font: 700 clamp(36px, 5vw, 54px)/1.02 "Newsreader", serif; letter-spacing: -.035em; text-wrap: balance; }
.customer-delete-header h1 span { color: #873131; }
.customer-delete-header p { max-width: 68ch; margin: 14px 0 0; color: #704f4c; font-size: 13px; line-height: 1.65; }
.customer-delete-summary { display: grid; grid-template-columns: 1.4fr .7fr .7fr; margin: 36px 0 0; border-top: 1px solid #d8d6cf; border-bottom: 1px solid #d8d6cf; }
.customer-delete-summary div { min-width: 0; padding: 20px 22px; }
.customer-delete-summary div + div { border-left: 1px solid #d8d6cf; }
.customer-delete-summary dt { color: #716b66; font-size: 10px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.customer-delete-summary dd { margin: 6px 0 0; overflow-wrap: anywhere; color: #292c29; font: 700 23px/1.15 "Newsreader", serif; }
.customer-delete-bicycles { margin-top: 38px; }
.customer-delete-section-heading { display: flex; align-items: start; justify-content: space-between; gap: 24px; margin-bottom: 14px; }
.customer-delete-section-heading h2 { margin: 0; font: 700 27px/1.1 "Newsreader", serif; }
.customer-delete-section-heading p { max-width: 68ch; margin: 7px 0 0; color: #657069; font-size: 12px; line-height: 1.6; }
.customer-delete-section-heading > span { min-width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; background: #f2ddda; color: #7d2d2d; font-size: 13px; font-weight: 800; }
.customer-delete-bicycle-list { margin: 0; padding: 0; border-top: 1px solid #d6d8d3; list-style: none; }
.customer-delete-bicycle-list li { min-height: 86px; display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; align-items: center; gap: 18px; padding: 12px 4px; border-bottom: 1px solid #d6d8d3; }
.customer-delete-bicycle-list img { width: 96px; height: 62px; padding: 7px; object-fit: contain; border-radius: 12px; background: #e7ece7; }
.customer-delete-bicycle-list div { display: grid; gap: 4px; }
.customer-delete-bicycle-list strong { font-size: 14px; }
.customer-delete-bicycle-list span, .customer-delete-bicycle-list small { color: #657069; font-size: 11px; }
.customer-delete-bicycle-list small { text-align: right; }
.customer-delete-empty { margin: 0; padding: 24px; border-top: 1px solid #d6d8d3; border-bottom: 1px solid #d6d8d3; color: #657069; font-size: 13px; text-align: center; }
.customer-delete-warning { margin: 30px 0 0; padding: 17px 18px; border-radius: 14px; background: #f7e9e7; color: #704846; font-size: 12px; line-height: 1.6; }
.customer-delete-warning strong { color: #6f2929; }
.customer-delete-actions { display: flex; align-items: stretch; gap: 10px; margin-top: 24px; }
.customer-delete-form { display: flex; }
.customer-delete-action { min-height: 48px; padding: 12px 19px; border: 0; border-radius: 12px; background: #9d3535; color: #fff; font-size: 13px; font-weight: 800; }
.customer-delete-action:hover { background: #7d2727; }
.customer-heading-actions { display: flex; align-items: center; gap: 24px; }
.customer-total { color: #667069; font-size: 13px; white-space: nowrap; }
.customer-total strong { margin-right: 5px; color: #18201c; font: 700 30px/1 "Newsreader", serif; }
.customer-table-wrap { overflow-x: auto; background: #fbfaf6; border-top: 1px solid #bfc5bf; border-bottom: 1px solid #bfc5bf; }
.customer-table { width: 100%; min-width: 760px; border-collapse: collapse; }
.customer-table th, .customer-table td { padding: 18px 20px; border-bottom: 1px solid #dde0dc; text-align: left; }
.customer-table th { color: #667069; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; }
.customer-table td { font-size: 13px; }
.customer-table tbody tr:last-child td { border-bottom: 0; }
.customer-table tbody tr:hover { background: #f0f2ec; }
.customer-table a, .dashboard-back { color: #117873; font-weight: 800; text-decoration: none; }
.customer-table-actions { display: flex; justify-content: flex-end; gap: 16px; white-space: nowrap; }
.table-empty { height: 160px; color: #7a837d; text-align: center !important; }
.dashboard-back { display: inline-block; margin-bottom: 30px; font-size: 13px; }
.customer-profile { display: flex; align-items: center; gap: 20px; margin-bottom: 44px; }
.customer-initial { width: 68px; height: 68px; display: grid; place-items: center; border-radius: 50%; background: #16a6a1; color: white; font: 700 28px/1 "Newsreader", serif; }
.customer-detail-page { max-width: 1320px; }
.customer-profile-detailed { display: grid; grid-template-columns: 76px minmax(0, 1fr) auto; gap: 22px; margin-bottom: 50px; padding-bottom: 32px; border-bottom: 1px solid #c6ccc6; }
.customer-profile-detailed .customer-initial { width: 76px; height: 76px; font-size: 31px; }
.customer-profile-copy { min-width: 0; }
.customer-profile-phone { color: #506058; font-size: 14px; font-weight: 700; text-underline-offset: 3px; }
.customer-profile-summary { display: flex; align-self: stretch; gap: 30px; margin: 0; padding: 13px 22px; border-radius: 14px; background: #dfeae2; }
.customer-profile-summary div { min-width: 72px; display: grid; align-content: center; gap: 3px; }
.customer-profile-summary dt { color: #526159; font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.customer-profile-summary dd { margin: 0; font: 700 28px/1 "Newsreader", serif; }
.customer-profile-tools { display: flex; align-items: stretch; gap: 10px; }
.customer-profile-tools .dashboard-secondary-action { align-self: stretch; }
.customer-comment { margin: -18px 0 42px; padding: 18px 20px; border-radius: 14px; background: #e7f1eb; color: #25352d; }
.customer-comment h2 { margin: 0 0 6px; font-size: 11px; font-weight: 800; }
.customer-comment p { margin: 0; white-space: pre-wrap; font-size: 13px; line-height: 1.55; }
.visit-history { margin-top: 58px; }
.customer-visits-heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 10px; }
.customer-visits-heading h2 { margin: 0 0 5px; font: 700 27px/1 "Newsreader", serif; }
.customer-visits-heading p { margin: 0; color: #68726c; font-size: 12px; }
.customer-visits-heading > span { min-width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; background: #dceee7; color: #17635f; font-weight: 800; }
.visit-history article { border-top: 1px solid #cfd3ce; }
.customer-visit-link { min-height: 102px; display: grid; grid-template-columns: 112px minmax(0, 1fr) auto 22px; align-items: start; gap: 24px; padding: 22px 8px 22px 0; color: inherit; text-decoration: none; transition: background .18s ease, transform .18s cubic-bezier(.16, 1, .3, 1); }
.customer-visit-link:hover { background: #e9eee9; transform: translateX(4px); }
.visit-history time { display: flex; flex-direction: column; font-size: 12px; }
.visit-history time span { color: #66716b; }
.visit-history h3 { margin: 0 0 4px; font-size: 15px; }
.visit-history p, .visit-history small { margin: 0; color: #5d6962; font-size: 12px; line-height: 1.5; }
.customer-visit-copy small { display: block; margin-top: 5px; }
.visit-status { align-self: start; padding: 5px 8px; border-radius: 8px; background: #d9efed; color: #17635f; font-size: 9px; font-weight: 800; text-transform: uppercase; }
.customer-visit-arrow { align-self: center; color: #147d79; font-size: 20px; }
.login-shell { min-height: 100vh; display: grid; place-items: center; padding: 28px; background: #dfe9e2; }
.login-panel { width: min(460px, 100%); padding: 44px; border-radius: 16px; background: #fbfaf6; box-shadow: 0 24px 70px rgba(38,54,44,.14); }
.login-panel > img { width: 112px; height: 118px; display: block; margin: -10px auto 18px; object-fit: contain; }
.login-panel h1 { margin: 0 0 8px; text-align: center; font: 700 40px/1 "Newsreader", serif; letter-spacing: -.03em; }
.login-panel p { margin: 0 auto 30px; color: #657068; text-align: center; font-size: 13px; line-height: 1.6; }
.login-form { display: grid; gap: 9px; }
.login-form label { margin-top: 9px; font-size: 11px; font-weight: 800; }
.login-form input { min-height: 50px; padding: 10px 13px; border: 1px solid #bfc6c0; border-radius: 12px; background: white; }
.login-form input[type="submit"] { margin-top: 14px; border: 0; background: #168f8b; color: white; font-weight: 800; }
.login-form input[type="submit"]:hover { background: #117873; }
.login-back { display: block; margin-top: 24px; color: #5d6861; text-align: center; font-size: 12px; font-weight: 700; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (max-width: 760px) {
  .dashboard-nav { grid-template-columns: 1fr auto; gap: 10px; }
  .dashboard-brand small { display: none; }
  .dashboard-nav nav { grid-column: 1 / -1; grid-row: 2; min-height: 48px; justify-content: center; order: 3; }
  .dashboard-nav nav a::after { bottom: -1px; }
  .dashboard-heading { align-items: stretch; flex-direction: column; }
  .customer-heading-actions { align-items: stretch; flex-direction: column; gap: 12px; }
  .customer-heading-actions .customer-total { align-self: flex-start; }
  .week-controls { overflow-x: auto; }
  .week-controls a { flex: 1 0 auto; text-align: center; }
  .bookings-toolbar { align-items: stretch; flex-direction: column-reverse; gap: 16px; }
  .booking-view-switch { align-self: flex-start; }
  .booking-view-switch a { min-height: 44px; }
  .booking-list-date { min-height: 58px; padding-inline: 14px; }
  .booking-list-item { min-height: 108px; grid-template-columns: 54px minmax(0, 1fr) 20px; grid-template-rows: auto auto; gap: 7px 12px; padding: 14px; }
  .booking-list-item time { grid-column: 1; grid-row: 1 / 4; align-self: start; padding-top: 2px; }
  .booking-list-item > strong { grid-column: 2; grid-row: 1; }
  .booking-list-service { grid-column: 2; grid-row: 2; }
  .booking-list-status { grid-column: 2; grid-row: 3; }
  .booking-list-arrow { grid-column: 3; grid-row: 1 / 4; align-self: center; }
  .booking-list-empty { padding-inline: 14px; }
  .dashboard-main { padding-top: 32px; }
  .customer-profile-detailed { grid-template-columns: 58px minmax(0, 1fr); gap: 16px; margin-bottom: 38px; padding-bottom: 24px; }
  .customer-profile-detailed .customer-initial { width: 58px; height: 58px; font-size: 24px; }
  .customer-profile-tools { grid-column: 1 / -1; flex-wrap: wrap; }
  .customer-profile-summary { flex: 1 1 230px; justify-content: space-around; width: 100%; }
  .customer-profile-tools .dashboard-secondary-action { flex: 1 1 100%; }
  .customer-visit-link { grid-template-columns: 78px minmax(0, 1fr) 18px; gap: 12px; padding-right: 0; }
  .customer-visit-link:hover { background: transparent; transform: none; }
  .customer-visit-link .visit-status { grid-column: 2; justify-self: start; }
  .customer-visit-arrow { grid-column: 3; grid-row: 1 / 3; }
  .booking-detail-heading { align-items: flex-start; flex-direction: column; }
  .booking-detail-grid { grid-template-columns: 1fr; }
  .booking-facts { grid-template-columns: 1fr; }
  .booking-facts div, .booking-facts div:nth-child(even), .booking-facts div:nth-child(4), .booking-facts div:nth-child(5) { grid-column: auto; padding: 17px 0; }
  .booking-customer-panel .customer-history-link { margin-top: 24px; padding-top: 0; }
  .workflow-steps li { grid-template-columns: 40px 1fr; gap: 13px; }
  .workflow-steps form, .workflow-current { grid-column: 2; }
  .workflow-action { width: 100%; }
  .booking-delete { align-items: stretch; flex-direction: column; gap: 18px; }
  .booking-delete-action { width: 100%; }
  .customer-delete-confirmation { padding-inline: 20px; }
  .customer-delete-header { grid-template-columns: 46px minmax(0, 1fr); gap: 14px; }
  .customer-delete-icon { width: 46px; height: 46px; }
  .customer-delete-icon svg { width: 23px; height: 23px; }
  .customer-delete-summary { grid-template-columns: 1fr 1fr; }
  .customer-delete-summary div:first-child { grid-column: 1 / -1; border-bottom: 1px solid #d8d6cf; }
  .customer-delete-summary div:nth-child(2) { border-left: 0; }
  .customer-delete-summary div { padding: 16px; }
  .customer-delete-bicycle-list li { grid-template-columns: 72px minmax(0, 1fr); gap: 13px; }
  .customer-delete-bicycle-list img { width: 72px; height: 54px; }
  .customer-delete-bicycle-list small { grid-column: 2; text-align: left; }
  .customer-delete-actions { flex-direction: column; }
  .customer-delete-form, .customer-delete-action, .customer-delete-actions .dashboard-secondary-action { width: 100%; }
  .login-panel { padding: 34px 24px; }
}

.dashboard-primary-action, .dashboard-secondary-action {
  min-height: 44px; display: inline-flex; align-items: center; justify-content: center; padding: 11px 17px; border-radius: 12px;
  font-size: 13px; font-weight: 800; text-decoration: none;
}
.dashboard-primary-action { border: 0; background: #117873; color: #fff; }
.dashboard-primary-action:hover { background: #0c625e; }
.dashboard-secondary-action { border: 1px solid #c5cbc6; background: transparent; color: #3e4842; }
.dashboard-secondary-action:hover { background: #e9eee9; }
.user-table { min-width: 640px; }
.current-user-label { display: inline-block; margin-left: 10px; padding: 4px 7px; border-radius: 7px; background: #dceee7; color: #1d593e; font-size: 9px; font-weight: 800; text-transform: uppercase; }
.user-actions { display: flex; align-items: center; justify-content: flex-end; gap: 16px; }
.user-actions form { display: inline; }
.user-delete { padding: 0; border: 0; background: transparent; color: #a33a3a; font-size: 13px; font-weight: 800; }
.user-delete:hover { color: #762424; text-decoration: underline; text-underline-offset: 3px; }
.disabled-action { color: #68706a; font-weight: 700; cursor: not-allowed; }
.user-actions-heading { text-align: right !important; }
.dashboard-form-main { max-width: 900px; }
.dashboard-form-main .dashboard-heading { margin-bottom: 28px; }
.user-form, .customer-form { padding: clamp(22px, 4vw, 38px); background: #fbfaf6; border-top: 1px solid #bfc5bf; border-bottom: 1px solid #bfc5bf; }
.user-form-fields, .customer-form-fields { display: grid; gap: 9px; max-width: 600px; }
.user-form-fields label, .customer-form-fields label { margin-top: 12px; font-size: 11px; font-weight: 800; }
.user-form-fields input, .customer-form-fields input, .customer-form-fields textarea { min-height: 50px; padding: 10px 13px; border: 1px solid #bfc6c0; border-radius: 12px; background: #fff; color: #18201c; font: inherit; }
.customer-form-fields textarea { min-height: 126px; resize: vertical; }
.user-form-fields small, .customer-form-fields small { color: #647068; font-size: 12px; line-height: 1.5; }
.user-form-actions, .customer-form-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.form-errors { max-width: 600px; margin-bottom: 18px; padding: 14px 16px; border-radius: 12px; background: #f8dfdf; color: #7a2525; font-size: 13px; }
.form-errors ul { margin: 8px 0 0; padding-left: 20px; }

@media (max-width: 760px) {
  .user-table { min-width: 0; }
  .user-table thead { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); }
  .user-table tbody { display: grid; }
  .user-table tbody tr { display: grid; grid-template-columns: 1fr auto; gap: 9px 18px; padding: 17px 20px; border-bottom: 1px solid #dde0dc; }
  .user-table tbody tr:last-child { border-bottom: 0; }
  .user-table td { display: block; padding: 0; border: 0; }
  .user-created-at { color: #647068; }
  .user-created-at::before { content: "Pievienots "; font-size: 10px; font-weight: 800; text-transform: uppercase; }
  .user-actions { grid-column: 1 / -1; justify-content: flex-start; min-height: 34px; padding-top: 5px !important; }
  .user-table .table-empty { grid-column: 1 / -1; }
}


/* Dashboard list search */
.dashboard-search { width: min(680px, 100%); display: grid; gap: 8px; margin: -8px 0 28px; }
.dashboard-search > label { font-size: 11px; font-weight: 800; }
.dashboard-search > small { color: #647068; font-size: 11px; }
.dashboard-search-field { position: relative; }
.dashboard-search-field input {
  width: 100%;
  min-height: 54px;
  padding: 12px 58px 12px 48px;
  border: 1px solid #b8c1ba;
  border-radius: 14px;
  appearance: none;
  background: #fff;
  color: #18201c;
}
.dashboard-search-field input::placeholder { color: #647068; }
.dashboard-search-field input:focus { border-color: #147d79; }
.dashboard-search-field input::-webkit-search-cancel-button { display: none; }
.dashboard-search-icon { position: absolute; top: 50%; left: 17px; width: 20px; height: 20px; color: #65716a; pointer-events: none; transform: translateY(-50%); }
.dashboard-search-clear { position: absolute; top: 5px; right: 6px; width: 44px; height: 44px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 12px; background: transparent; color: #4d5952; }
.dashboard-search-clear:hover { background: #e9eee9; color: #18201c; }
.dashboard-search-clear svg { width: 20px; height: 20px; }
.dashboard-search.is-searching .dashboard-search-icon { animation: dashboard-search-pulse .7s ease-in-out infinite alternate; }
@keyframes dashboard-search-pulse { to { opacity: .35; } }
.dashboard-results { display: block; }
.dashboard-search-summary { margin: 0 0 12px; color: #59655e; font-size: 12px; font-weight: 700; }

/* Bicycle records */
.schedule-booking { text-decoration: none; }
.bicycle-search-empty { min-height: 300px; }
.bicycle-search-empty svg { width: 72px; height: 72px; }
.bicycle-list { border-top: 1px solid #bfc5bf; border-bottom: 1px solid #bfc5bf; background: #fbfaf6; }
.bicycle-list-item { min-height: 118px; display: grid; grid-template-columns: 126px minmax(190px, 1.4fr) minmax(150px, 1fr) auto 24px; align-items: center; gap: 24px; padding: 16px 20px; border-bottom: 1px solid #dde0dc; color: inherit; text-decoration: none; transition: background .18s ease; }
.bicycle-list-item:last-child { border-bottom: 0; }
.bicycle-list-item:hover { background: #eef2ed; }
.bicycle-list-photo { height: 84px; overflow: hidden; display: grid; place-items: center; border-radius: 12px; background: #e0e9e1; color: #147d79; }
.bicycle-list-photo img { width: 100%; height: 100%; object-fit: cover; }
.bicycle-list-photo .bicycle-list-silhouette { padding: 10px; object-fit: contain; }
.bicycle-list-main, .bicycle-list-owner { display: grid; gap: 5px; }
.bicycle-list-main strong { font: 700 22px/1.1 "Newsreader", serif; }
.bicycle-list-main span, .bicycle-list-owner small { color: #69746d; font-size: 11px; }
.bicycle-list-owner small { font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }
.bicycle-list-owner span { font-size: 13px; font-weight: 700; }
.bicycle-list-stats { display: flex; gap: 18px; color: #68726c; font-size: 11px; }
.bicycle-list-stats span { display: grid; justify-items: center; }
.bicycle-list-stats strong { color: #18201c; font: 700 22px/1 "Newsreader", serif; }
.bicycle-list-arrow { color: #147d79; font-size: 22px; }
.bicycle-empty { min-height: 390px; display: grid; justify-items: center; align-content: center; padding: 40px 20px; border-top: 1px solid #bfc5bf; border-bottom: 1px solid #bfc5bf; background: #fbfaf6; text-align: center; }
.bicycle-empty svg { width: 100px; height: 76px; margin-bottom: 22px; color: #168f8b; }
.bicycle-empty h2 { margin: 0 0 8px; font: 700 30px/1 "Newsreader", serif; }
.bicycle-empty p { max-width: 48ch; margin: 0 0 24px; color: #647068; font-size: 13px; line-height: 1.6; }
.bicycle-form { padding: clamp(22px, 4vw, 38px); background: #fbfaf6; border-top: 1px solid #bfc5bf; border-bottom: 1px solid #bfc5bf; }
.bicycle-form > label, .bicycle-form-row label, .bicycle-form-comment label, .bicycle-form-optional > div > label, .bicycle-form-photo-label { display: block; margin: 18px 0 8px; font-size: 11px; font-weight: 800; }
.bicycle-form select, .bicycle-form input[type="text"], .bicycle-form textarea { width: 100%; min-height: 50px; padding: 10px 13px; border: 1px solid #bfc6c0; border-radius: 12px; background: #fff; color: #18201c; }
.bicycle-form textarea { min-height: 104px; resize: vertical; line-height: 1.5; }
.bicycle-type-fieldset { min-width: 0; margin: 24px 0 0; padding: 0; border: 0; }
.bicycle-type-fieldset legend { padding: 0; font-size: 11px; font-weight: 800; }
.bicycle-type-fieldset > p { margin: 5px 0 12px; color: #647068; font-size: 11px; }
.bicycle-type-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.bicycle-type-option { position: relative; min-width: 0; cursor: pointer; }
.bicycle-type-option > input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.bicycle-type-option-content { position: relative; min-height: 126px; display: grid; grid-template-rows: 68px auto; place-items: center; gap: 9px; padding: 13px 10px 11px; border: 1px solid #c2d1c8; border-radius: 14px; background: #f8faf7; color: #15362f; text-align: center; font-size: 11px; font-weight: 800; line-height: 1.3; transition: border-color .18s ease, background .18s ease, box-shadow .18s ease; }
.bicycle-type-option-content > img { width: 100%; height: 68px; object-fit: contain; }
.bicycle-type-option-content > svg { position: absolute; top: 8px; right: 8px; width: 23px; height: 23px; opacity: 0; }
.bicycle-type-option-content > svg circle { fill: #008f89; stroke: none; }
.bicycle-type-option-content > svg path { fill: none; stroke: #fff; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2.25; }
.bicycle-type-option:hover .bicycle-type-option-content { border-color: #008f89; background: #edf5f0; }
.bicycle-type-option > input:focus-visible + .bicycle-type-option-content { outline: 3px solid var(--focus); outline-offset: 3px; }
.bicycle-type-option > input:checked + .bicycle-type-option-content { border-color: #008f89; background: #dff0e8; box-shadow: 0 8px 20px rgba(25, 61, 50, .1); }
.bicycle-type-option > input:checked + .bicycle-type-option-content > svg { opacity: 1; }
.bicycle-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.bicycle-form-row small, .bicycle-form-comment small, .bicycle-form-optional > div > small { display: block; margin-top: 6px; color: #647068; font-size: 11px; line-height: 1.5; }
.bicycle-form-comment { margin-top: 4px; }
.bicycle-form-optional { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 18px; margin-top: 24px; padding-top: 6px; border-top: 1px solid #d5dad5; }
.bicycle-form-photo { min-width: 0; }
.bicycle-form-context { display: grid; gap: 5px; padding: 16px; border-radius: 12px; background: #dceee7; }
.bicycle-form-context span { color: #50655a; font-size: 12px; }
.bicycle-comment { margin: -18px 0 32px; padding: 18px 20px; border-radius: 14px; background: #e7f1eb; color: #25352d; }
.bicycle-comment h2 { margin: 0 0 6px; font-size: 11px; font-weight: 800; }
.bicycle-comment p { margin: 0; white-space: pre-wrap; font-size: 13px; line-height: 1.55; }
.bicycle-profile { display: grid; grid-template-columns: 72px 1fr auto; align-items: center; gap: 20px; margin-bottom: 40px; }
.bicycle-profile-mark { width: 72px; height: 72px; display: grid; place-items: center; border-radius: 16px; background: #dceee7; color: #117873; }
.bicycle-profile-mark img { width: 100%; height: 100%; padding: 8px; object-fit: contain; }
.bicycle-profile-title h1 { margin: 0 0 6px; font: 700 clamp(38px, 4vw, 58px)/.98 "Newsreader", serif; letter-spacing: -.035em; }
.bicycle-profile-title > p { margin: 0; color: #647068; font-size: 13px; }
.bicycle-profile-title a { color: #147d79; font-weight: 800; text-decoration: none; }
.bicycle-profile-identifiers { margin: 12px 0 0; }
.bicycle-profile-identifiers div { display: flex; align-items: baseline; gap: 8px; }
.bicycle-profile-identifiers dt { color: #647068; font-size: 10px; font-weight: 800; text-transform: uppercase; }
.bicycle-profile-identifiers dd { margin: 0; color: #25312a; font-size: 12px; font-weight: 800; letter-spacing: .025em; }
.bicycle-detail-layout { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 32px; align-items: start; }
.bicycle-photos, .bicycle-visit-panel { padding: 28px; background: #fbfaf6; border-top: 1px solid #bfc5bf; border-bottom: 1px solid #bfc5bf; }
.bicycle-section-heading { display: flex; align-items: start; justify-content: space-between; gap: 20px; margin-bottom: 22px; }
.bicycle-section-heading h2 { margin: 0 0 5px; font: 700 25px/1 "Newsreader", serif; }
.bicycle-section-heading p { margin: 0; color: #68726c; font-size: 12px; line-height: 1.5; }
.bicycle-section-heading > span { min-width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; background: #dceee7; color: #17635f; font-weight: 800; }
.bicycle-photo-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.bicycle-photo-grid figure { margin: 0; overflow: hidden; border-radius: 14px; background: #edf0eb; }
.bicycle-photo-grid img { width: 100%; aspect-ratio: 4 / 3; display: block; object-fit: cover; }
.bicycle-photo-grid figcaption { min-height: 50px; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 12px; color: #626c66; font-size: 10px; }
.photo-delete { min-height: 32px; padding: 4px 7px; border: 0; background: transparent; color: #a33a3a; font-size: 10px; font-weight: 800; }
.photo-empty { min-height: 180px; display: grid; place-items: center; border: 1px dashed #bdc7c0; border-radius: 14px; color: #6f7973; font-size: 12px; text-align: center; }
.photo-upload-form { display: grid; grid-template-columns: 1fr 1fr auto; align-items: end; gap: 14px; margin-top: 24px; padding-top: 24px; border-top: 1px solid #d5dad5; }
.photo-upload-form > div { display: grid; gap: 7px; }
.photo-upload-form label { font-size: 11px; font-weight: 800; }
.photo-upload-form select { width: 100%; min-height: 46px; padding: 8px 10px; border: 1px solid #bfc6c0; border-radius: 12px; background: #fff; color: #18201c; }
.photo-file-picker { min-height: 56px; display: flex; align-items: center; gap: 10px; padding: 5px 7px; overflow: hidden; border: 1px solid #bfc6c0; border-radius: 12px; background: #fff; }
.photo-file-picker:focus-within { outline: 3px solid var(--focus); outline-offset: 3px; }
.photo-file-picker label { flex: 0 0 auto; min-height: 44px; display: inline-flex; align-items: center; padding: 9px 10px; border-radius: 8px; background: #e5ebe6; color: #334038; cursor: pointer; }
.photo-file-picker label:hover { background: #d9e2dc; }
.photo-file-picker span { overflow: hidden; color: #59645d; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.photo-upload-form small { color: #68726c; font-size: 10px; }
.photo-upload-form .dashboard-primary-action { min-height: 46px; }
.photo-upload-form .form-errors { grid-column: 1 / -1; }
.bicycle-visit-panel { position: sticky; top: 106px; }
.bicycle-visit-link { display: grid; gap: 5px; padding: 16px 0; border-top: 1px solid #d7dbd7; color: inherit; text-decoration: none; }
.bicycle-visit-link time { color: #68726c; font-size: 10px; font-weight: 800; }
.bicycle-visit-link strong { font-size: 13px; }
.bicycle-visit-link span { width: fit-content; padding: 4px 6px; border-radius: 7px; background: #d9efed; color: #17635f; font-size: 8px; font-weight: 800; text-transform: uppercase; }
.booking-detail { padding: clamp(22px, 4vw, 38px); background: #fbfaf6; border-top: 1px solid #bfc5bf; border-bottom: 1px solid #bfc5bf; }
.booking-detail dl { margin: 0; }
.booking-detail dl div { display: grid; grid-template-columns: 160px 1fr; gap: 18px; padding: 14px 0; border-bottom: 1px solid #dde0dc; }
.booking-detail dt { color: #68726c; font-size: 11px; font-weight: 800; text-transform: uppercase; }
.booking-detail dd { margin: 0; font-size: 13px; }
.booking-bicycle-link { margin-top: 32px; }
.booking-bicycle-link h2 { margin: 0 0 5px; font: 700 25px/1 "Newsreader", serif; }
.booking-bicycle-link > p { margin: 0 0 18px; color: #68726c; font-size: 12px; }
.booking-bike-open { display: inline-block; margin-left: 14px; color: #147d79; font-size: 12px; font-weight: 800; text-decoration: none; }
.customer-bicycles { margin-bottom: 42px; }
.customer-bicycles .bicycle-section-heading { align-items: center; }
.customer-section-heading > div { max-width: 620px; }
.customer-bicycle-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.customer-bicycle-card { min-width: 0; overflow: hidden; border-radius: 16px; background: #fbfaf6; color: inherit; text-decoration: none; box-shadow: 0 8px 26px rgba(34, 54, 42, .09); transition: box-shadow .22s cubic-bezier(.16, 1, .3, 1), transform .22s cubic-bezier(.16, 1, .3, 1); }
.customer-bicycle-card:hover { box-shadow: 0 14px 34px rgba(34, 54, 42, .14); transform: translateY(-3px); }
.customer-bicycle-media { aspect-ratio: 16 / 9; overflow: hidden; display: grid; place-items: center; padding: 5%; background: #dfeae2; }
.customer-bicycle-media.has-photo { padding: 0; background: #dfe4df; }
.customer-bicycle-media img { width: 100%; height: 100%; display: block; object-fit: cover; }
.customer-bicycle-media .customer-bicycle-silhouette { object-fit: contain; }
.customer-bicycle-card-body { padding: 20px 22px 22px; }
.customer-bicycle-card-body > div { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.customer-bicycle-card-body > div strong { min-width: 0; overflow-wrap: anywhere; font: 700 25px/1.08 "Newsreader", serif; }
.customer-bicycle-card-body > div span { flex: 0 0 auto; color: #147d79; font-size: 21px; }
.customer-bicycle-card-body > p { margin: 6px 0 18px; color: #5c6961; font-size: 12px; }
.customer-bicycle-card-body dl { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 0; padding-top: 15px; border-top: 1px solid #d8ddd8; }
.customer-bicycle-card-body dl div { min-width: 0; display: grid; gap: 4px; }
.customer-bicycle-card-body dt { color: #69746d; font-size: 9px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.customer-bicycle-card-body dd { margin: 0; overflow-wrap: anywhere; font-size: 11px; font-weight: 800; }
.customer-bicycle-empty { min-height: 180px; display: grid; grid-template-columns: 180px minmax(0, 1fr); align-items: center; gap: 28px; padding: 24px 32px; border-top: 1px solid #bfc5bf; border-bottom: 1px solid #bfc5bf; background: #fbfaf6; }
.customer-bicycle-empty img { width: 100%; height: 112px; object-fit: contain; }
.customer-bicycle-empty strong { font: 700 23px/1.1 "Newsreader", serif; }
.customer-bicycle-empty p { max-width: 56ch; margin: 7px 0 0; color: #5d6962; font-size: 12px; line-height: 1.55; }

@media (max-width: 980px) {
  .bicycle-list-item { grid-template-columns: 88px minmax(150px, 1fr) minmax(120px, .7fr) auto 20px; gap: 16px; }
  .bicycle-detail-layout { grid-template-columns: 1fr; }
  .bicycle-visit-panel { position: static; }
  .photo-upload-form { grid-template-columns: 1fr 1fr; }
  .photo-upload-form .dashboard-primary-action { justify-self: start; }
}

@media (max-width: 760px) {
  .dashboard-nav nav { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; width: 100%; }
  .dashboard-nav nav a { min-width: 0; font-size: 10px; }
  .bicycle-list-item { grid-template-columns: 88px 1fr 18px; min-height: 116px; padding: 12px; }
  .bicycle-list-photo { grid-column: 1; grid-row: 1 / 4; height: 72px; }
  .bicycle-list-main { grid-column: 2; grid-row: 1; }
  .bicycle-list-owner { grid-column: 2; grid-row: 2; display: flex; gap: 5px; align-items: baseline; }
  .bicycle-list-owner small { font-size: 9px; }
  .bicycle-list-owner span { font-size: 11px; }
  .bicycle-list-stats { grid-column: 2; grid-row: 3; gap: 12px; justify-self: start; }
  .bicycle-list-stats span { display: inline; }
  .bicycle-list-stats strong { font: inherit; }
  .bicycle-list-arrow { grid-column: 3; grid-row: 1 / 4; }
  .bicycle-type-options { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bicycle-form-row, .bicycle-form-optional, .bicycle-photo-grid { grid-template-columns: 1fr; }
  .bicycle-profile { grid-template-columns: 58px 1fr; }
  .bicycle-profile-mark { width: 58px; height: 58px; }
  .bicycle-profile > .dashboard-secondary-action { grid-column: 1 / -1; justify-self: start; }
  .bicycle-photos, .bicycle-visit-panel { padding: 20px; }
  .photo-upload-form, .booking-bicycle-form { grid-template-columns: 1fr; }
  .photo-upload-form .dashboard-primary-action { width: 100%; }
  .booking-detail dl div { grid-template-columns: 1fr; gap: 5px; }
  .booking-bicycle-link > .dashboard-secondary-action { width: 100%; margin-bottom: 10px; }
  .booking-bike-open { margin: 0; }
  .customer-section-heading { align-items: stretch !important; flex-direction: column; }
  .customer-section-heading .dashboard-secondary-action { width: 100%; }
  .customer-bicycle-grid { grid-template-columns: 1fr; }
  .customer-bicycle-empty { grid-template-columns: 1fr; gap: 12px; padding: 24px; text-align: center; }
  .customer-bicycle-empty img { height: 92px; }
  .customer-bicycle-card-body { padding: 18px; }
  .customer-bicycle-card-body dl { gap: 10px; }
}


/* Booking bicycle picker */
body.is-bicycle-dialog-open { overflow: hidden; }
.booking-bicycle-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 12px; margin-bottom: 12px; }
.bicycle-picker { min-width: 0; }
.bicycle-picker-selected { display: grid; grid-template-columns: 116px minmax(0, 1fr) auto; align-items: center; gap: 18px; margin-bottom: 20px; padding: 18px 0; border-top: 1px solid #cfd8d1; border-bottom: 1px solid #cfd8d1; }
.bicycle-picker-selected-photo { width: 116px; height: 84px; overflow: hidden; display: grid; place-items: center; border-radius: 12px; background: #dfe9e1; color: #147d79; }
.bicycle-picker-selected-photo img { width: 100%; height: 100%; object-fit: cover; }
.bicycle-picker-selected-photo svg { width: 72px; height: 52px; }
.bicycle-picker-selected-copy { min-width: 0; }
.bicycle-picker-selected-copy h3 { margin: 0; overflow: hidden; font: 700 23px/1.1 "Newsreader", serif; letter-spacing: -.015em; text-overflow: ellipsis; white-space: nowrap; }
.bicycle-picker-selected-copy > p { margin: 5px 0 10px; color: #4f5d55; font-size: 11px; font-weight: 800; }
.bicycle-picker-selected-meta { display: flex; flex-wrap: wrap; gap: 6px 14px; color: #5b6860; font-size: 10px; font-weight: 700; }
.bicycle-picker-selected-meta span + span { position: relative; }
.bicycle-picker-selected-meta span + span::before { content: ""; position: absolute; top: 50%; left: -8px; width: 3px; height: 3px; border-radius: 50%; background: #8c9790; transform: translateY(-50%); }
.bicycle-picker-selected-actions { display: grid; justify-items: end; gap: 7px; }
.bicycle-picker-selected-actions button { min-height: 38px; padding: 7px 10px; border: 0; background: transparent; font-size: 11px; font-weight: 800; }
.bicycle-picker-text-action { color: #147d79; }
.bicycle-picker-text-action:hover { color: #0c625e; text-decoration: underline; text-underline-offset: 3px; }
.bicycle-picker-change { color: #4f5c54; }
.bicycle-picker-change:hover { background: #e9eee9; border-radius: 9px; color: #18201c; }
.bicycle-picker-search { position: relative; }
.bicycle-picker-search > label { display: block; margin-bottom: 7px; font-size: 11px; font-weight: 800; }
.bicycle-picker-field { position: relative; }
.bicycle-picker-field input { width: 100%; min-height: 50px; padding: 10px 54px 10px 45px; border: 1px solid #b8c1ba; border-radius: 12px; appearance: none; background: #fff; color: #18201c; }
.bicycle-picker-field input::placeholder { color: #647068; }
.bicycle-picker-field input:focus { border-color: #147d79; }
.bicycle-picker-field input::-webkit-search-cancel-button { display: none; }
.bicycle-picker-search-icon { position: absolute; top: 50%; left: 15px; width: 19px; height: 19px; color: #65716a; pointer-events: none; transform: translateY(-50%); }
.bicycle-picker-clear { position: absolute; top: 3px; right: 4px; width: 44px; height: 44px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 10px; background: transparent; color: #4d5952; }
.bicycle-picker-clear:hover { background: #e9eee9; color: #18201c; }
.bicycle-picker-clear svg { width: 19px; height: 19px; }
.bicycle-picker-menu { position: absolute; z-index: 8; top: 72px; right: 0; left: 0; overflow: hidden; border-radius: 14px; background: #fbfaf6; box-shadow: 0 18px 42px rgba(29, 45, 36, .18); }
.bicycle-picker-status { margin: 0; padding: 11px 14px; border-bottom: 1px solid #dde1dd; color: #536159; font-size: 10px; font-weight: 800; }
.bicycle-picker-options { max-height: 380px; overflow-y: auto; }
.bicycle-picker-item { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 52px; min-height: 94px; border-bottom: 1px solid #e0e3df; background: #fbfaf6; }
.bicycle-picker-item:last-child { border-bottom: 0; }
.bicycle-picker-item:hover, .bicycle-picker-item:focus-within { background: #edf2ed; }
.bicycle-picker-item.is-selected { background: #e3efe8; }
.bicycle-picker-option { width: 100%; min-width: 0; display: grid; grid-template-columns: 82px minmax(0, 1fr) 22px; align-items: center; gap: 13px; padding: 12px 8px 12px 13px; border: 0; background: transparent; color: #18201c; text-align: left; }
.bicycle-picker-photo { width: 82px; height: 64px; overflow: hidden; display: grid; place-items: center; border-radius: 10px; background: #dfe9e1; color: #147d79; }
.bicycle-picker-photo img { width: 100%; height: 100%; object-fit: cover; }
.bicycle-picker-photo svg { width: 52px; height: 39px; }
.bicycle-picker-copy { min-width: 0; display: grid; gap: 3px; }
.bicycle-picker-copy strong { overflow: hidden; font: 700 18px/1.1 "Newsreader", serif; text-overflow: ellipsis; white-space: nowrap; }
.bicycle-picker-copy small { color: #425149; font-size: 10px; font-weight: 800; }
.bicycle-picker-copy > span { overflow: hidden; color: #59665e; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.bicycle-picker-check { width: 21px; height: 21px; color: #117873; opacity: 0; }
.bicycle-picker-option[aria-pressed="true"] .bicycle-picker-check { opacity: 1; }
.bicycle-picker-expand { align-self: stretch; min-width: 52px; display: grid; place-items: center; padding: 0; border: 0; border-left: 1px solid #dce1dc; background: transparent; color: #506158; }
.bicycle-picker-expand:hover { background: #dfe9e2; color: #0c625e; }
.bicycle-picker-expand svg { width: 20px; height: 20px; }
.bicycle-picker-empty { margin: 0; padding: 28px 20px; color: #59665e; font-size: 12px; line-height: 1.55; text-align: center; }
.bicycle-picker-unlink { min-height: 38px; margin-top: 5px; padding: 5px 0; border: 0; background: transparent; color: #4e5c54; font-size: 11px; font-weight: 800; text-align: left; text-decoration: underline; text-underline-offset: 3px; }
.bicycle-picker-unlink:hover { color: #0c625e; }
.booking-bicycle-form .dashboard-primary-action:disabled { background: #9aa59f; color: #eef1ef; cursor: not-allowed; }

.bicycle-picker-dialog { width: min(820px, calc(100% - 32px)); max-width: none; max-height: min(760px, calc(100dvh - 32px)); padding: 0; overflow: hidden; border: 0; border-radius: 16px; background: #fbfaf6; color: #18201c; box-shadow: 0 28px 80px rgba(17, 31, 23, .3); }
.bicycle-picker-dialog::backdrop { background: rgba(18, 28, 22, .58); }
.bicycle-picker-dialog[open] { animation: bicycle-dialog-enter .2s cubic-bezier(.16, 1, .3, 1); }
@keyframes bicycle-dialog-enter { from { opacity: .7; transform: translateY(14px) scale(.985); } }
.bicycle-picker-dialog-shell { max-height: min(760px, calc(100dvh - 32px)); display: flex; flex-direction: column; }
.bicycle-picker-dialog-header { min-height: 66px; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 11px 14px 11px 26px; border-bottom: 1px solid #d9ded9; }
.bicycle-picker-dialog-header p { margin: 0; color: #526159; font-size: 11px; font-weight: 800; }
.bicycle-picker-dialog-close { width: 44px; height: 44px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 11px; background: transparent; color: #3e4942; }
.bicycle-picker-dialog-close:hover { background: #e9eee9; }
.bicycle-picker-dialog-close svg { width: 21px; height: 21px; }
.bicycle-picker-dialog-body { min-height: 0; display: grid; grid-template-columns: minmax(280px, .9fr) minmax(0, 1.1fr); gap: 32px; padding: 28px; overflow-y: auto; }
.bicycle-picker-dialog-photo { min-height: 300px; overflow: hidden; display: grid; place-items: center; border-radius: 14px; background: #dfe9e1; color: #147d79; }
.bicycle-picker-dialog-photo img { width: 100%; height: 100%; min-height: 300px; padding: 20px; object-fit: contain; }
.bicycle-picker-dialog-photo svg { width: min(72%, 220px); height: auto; }
.bicycle-picker-dialog-copy { min-width: 0; align-self: center; }
.bicycle-picker-dialog-copy h3 { margin: 0; font: 700 36px/1.05 "Newsreader", serif; letter-spacing: -.025em; overflow-wrap: anywhere; }
.bicycle-picker-dialog-type { display: block; width: fit-content; margin: 11px 0 0; color: #0c625e; font-size: 11px; font-weight: 800; }
.bicycle-picker-dialog-copy > p { margin: 8px 0 0; color: #536159; font-size: 13px; font-weight: 700; }
.bicycle-picker-dialog-facts { display: grid; grid-template-columns: 1fr 1fr; margin: 25px 0 0; }
.bicycle-picker-dialog-facts div { padding: 14px 14px 14px 0; border-top: 1px solid #d9ded9; }
.bicycle-picker-dialog-facts div:nth-child(2) { padding-left: 14px; }
.bicycle-picker-dialog-facts div:last-child { grid-column: 1 / -1; padding-left: 0; }
.bicycle-picker-dialog-facts dt { margin-bottom: 5px; color: #68756d; font-size: 9px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.bicycle-picker-dialog-facts dd { margin: 0; color: #26312b; font-size: 12px; font-weight: 700; line-height: 1.45; }
.bicycle-picker-dialog-link { display: inline-block; margin-top: 18px; color: #147d79; font-size: 11px; font-weight: 800; text-decoration: none; }
.bicycle-picker-dialog-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.bicycle-picker-dialog-footer { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 16px 22px; border-top: 1px solid #d9ded9; background: #f4f1e9; }
.bicycle-picker-dialog-navigation { display: flex; gap: 7px; }
.bicycle-picker-dialog-navigation button { min-height: 44px; display: inline-flex; align-items: center; gap: 7px; padding: 9px 11px; border: 1px solid #c1c9c3; border-radius: 10px; background: #fbfaf6; color: #354039; font-size: 11px; font-weight: 800; }
.bicycle-picker-dialog-navigation button:hover:not(:disabled) { border-color: #7e9185; background: #e8ede8; }
.bicycle-picker-dialog-navigation button:disabled { color: #98a19b; cursor: not-allowed; }
.bicycle-picker-dialog-navigation svg { width: 16px; height: 16px; }
.bicycle-picker-dialog-select:disabled { background: #9aa59f; color: #eef1ef; cursor: default; }

/* Customer history drawer */
body.is-drawer-open { overflow: hidden; }
.customer-history-drawer { width: min(640px, 100%); max-width: none; height: 100dvh; max-height: none; margin: 0 0 0 auto; padding: 0; border: 0; background: transparent; color: #18201c; }
.customer-history-drawer:not([open]) { display: none; }
.customer-history-drawer::backdrop { background: rgba(21, 30, 25, .48); }
.customer-history-drawer-panel { min-height: 100%; background: #f4f1e9; box-shadow: -18px 0 50px rgba(21, 36, 27, .2); animation: customer-drawer-enter .32s cubic-bezier(.16, 1, .3, 1); }
@keyframes customer-drawer-enter { from { opacity: .72; transform: translateX(36px); } }
.customer-history-drawer-header { position: sticky; z-index: 2; top: 0; min-height: 102px; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 18px clamp(20px, 5vw, 34px); border-bottom: 1px solid #d5d8d2; background: #fbfaf6; }
.customer-history-identity { min-width: 0; display: flex; align-items: center; gap: 15px; }
.customer-history-identity .customer-initial { flex: 0 0 auto; width: 54px; height: 54px; font-size: 22px; }
.customer-history-identity h2 { margin: 0 0 4px; overflow: hidden; font: 700 27px/1 "Newsreader", serif; text-overflow: ellipsis; white-space: nowrap; }
.customer-history-identity a { color: #506158; font-size: 12px; font-weight: 700; }
.customer-history-close { flex: 0 0 auto; width: 44px; height: 44px; display: grid; place-items: center; padding: 0; border: 1px solid #c8cdc8; border-radius: 12px; background: transparent; color: #3d4841; }
.customer-history-close:hover { background: #e9eee9; }
.customer-history-close svg { width: 21px; height: 21px; }
.customer-history-drawer-body { padding: 30px clamp(20px, 5vw, 34px) 48px; }
.customer-history-bicycles { padding: 21px; border-radius: 14px; background: #dfeae2; }
.customer-history-bicycles > div, .customer-history-visits-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.customer-history-bicycles h3, .customer-history-visits h3 { margin: 0; font: 700 23px/1 "Newsreader", serif; }
.customer-history-bicycles > div > span, .customer-history-visits-heading > span { min-width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; background: #fbfaf6; color: #17635f; font-size: 11px; font-weight: 800; }
.customer-history-bicycles ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 18px; margin: 16px 0 0; padding: 0; list-style: none; }
.customer-history-bicycles li { min-width: 0; display: grid; gap: 3px; padding: 11px 0; border-top: 1px solid rgba(67, 91, 75, .16); }
.customer-history-bicycles li strong, .customer-history-bicycles li span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.customer-history-bicycles li strong { font-size: 12px; }
.customer-history-bicycles li span, .customer-history-bicycles > p { margin-bottom: 0; color: #4c5f55; font-size: 10px; }
.customer-history-visits { margin-top: 32px; }
.customer-history-visits-heading { margin-bottom: 10px; }
.customer-history-entry { display: grid; grid-template-columns: 94px minmax(0, 1fr) auto; gap: 18px; padding: 19px 0; border-top: 1px solid #cfd3ce; }
.customer-history-entry.is-current { margin-inline: -10px; padding-inline: 10px; border-radius: 12px; background: #e4eee7; }
.customer-history-entry-date { display: grid; align-content: start; gap: 7px; }
.customer-history-entry time { display: grid; color: #28342d; font-size: 11px; font-weight: 800; }
.customer-history-entry time span { color: #56645c; font-weight: 600; }
.customer-history-entry-date small { color: #117873; font-size: 9px; font-weight: 800; }
.customer-history-entry h4 { margin: 0 0 4px; font-size: 13px; }
.customer-history-entry p, .customer-history-entry > div > small { margin: 0; color: #56635b; font-size: 10px; line-height: 1.45; }
.customer-history-entry .customer-history-entry-date small { color: #0c625e; }
.customer-history-entry .visit-status { white-space: nowrap; }

@media (max-width: 760px) {
  .booking-bicycle-form { grid-template-columns: 1fr; }
  .booking-bicycle-form .dashboard-primary-action { width: 100%; }
  .bicycle-picker-selected { grid-template-columns: 76px minmax(0, 1fr); gap: 12px; padding-block: 14px; }
  .bicycle-picker-selected-photo { width: 76px; height: 64px; }
  .bicycle-picker-selected-photo svg { width: 52px; height: 38px; }
  .bicycle-picker-selected-copy h3 { font-size: 20px; }
  .bicycle-picker-selected-actions { grid-column: 1 / -1; display: flex; justify-content: flex-start; gap: 5px; }
  .bicycle-picker-selected-actions button { padding-inline: 8px; }
  .bicycle-picker-menu { position: static; margin-top: 7px; }
  .bicycle-picker-options { max-height: 320px; }
  .bicycle-picker-item { grid-template-columns: minmax(0, 1fr) 48px; }
  .bicycle-picker-option { grid-template-columns: 68px minmax(0, 1fr) 18px; gap: 9px; padding: 10px 7px; }
  .bicycle-picker-photo { width: 68px; height: 56px; }
  .bicycle-picker-expand { min-width: 48px; }
  .bicycle-picker-dialog { width: calc(100% - 16px); max-height: calc(100dvh - 16px); }
  .bicycle-picker-dialog-shell { max-height: calc(100dvh - 16px); }
  .bicycle-picker-dialog-header { min-height: 60px; padding-left: 18px; }
  .bicycle-picker-dialog-body { grid-template-columns: 1fr; gap: 20px; padding: 16px 16px 22px; }
  .bicycle-picker-dialog-photo, .bicycle-picker-dialog-photo img { min-height: 190px; max-height: 230px; }
  .bicycle-picker-dialog-copy { align-self: stretch; }
  .bicycle-picker-dialog-copy h3 { font-size: 30px; }
  .bicycle-picker-dialog-facts { margin-top: 20px; }
  .bicycle-picker-dialog-footer { align-items: stretch; flex-direction: column; gap: 10px; padding: 12px; }
  .bicycle-picker-dialog-navigation { display: grid; grid-template-columns: 1fr 1fr; }
  .bicycle-picker-dialog-navigation button { justify-content: center; }
  .bicycle-picker-dialog-select { order: -1; width: 100%; }
  .customer-history-drawer { width: 100%; }
  .customer-history-drawer-header { min-height: 88px; }
  .customer-history-bicycles ul { grid-template-columns: 1fr; }
  .customer-history-entry { grid-template-columns: 78px minmax(0, 1fr); gap: 12px; }
  .customer-history-entry .visit-status { grid-column: 2; justify-self: start; }
}


/* Integration settings */
.settings-page { max-width: 1120px; }
.settings-integration { background: #fbfaf6; border-top: 1px solid #bfc5bf; border-bottom: 1px solid #bfc5bf; }
.settings-integration-intro { display: flex; align-items: flex-start; justify-content: space-between; gap: 32px; padding: clamp(24px, 4vw, 38px); border-bottom: 1px solid #d9ddd8; }
.settings-integration-intro > div { max-width: 680px; }
.settings-integration-intro h2 { margin: 0 0 8px; font: 700 29px/1 "Newsreader", serif; letter-spacing: -.02em; }
.settings-integration-intro p { margin: 0; color: #59655e; font-size: 13px; line-height: 1.65; }
.settings-status { flex: 0 0 auto; min-height: 34px; display: inline-flex; align-items: center; gap: 8px; padding: 7px 11px; border-radius: 10px; background: #eee9df; color: #695d4c; font-size: 11px; font-weight: 800; }
.settings-status > span { width: 8px; height: 8px; border-radius: 50%; background: #a78b61; }
.settings-status.is-ready { background: #dceee7; color: #1d593e; }
.settings-status.is-ready > span { background: #168f6a; }
.settings-form { padding: clamp(24px, 4vw, 38px); }
.settings-field-grid { max-width: 800px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 22px; }
.settings-field-grid label { display: grid; align-content: start; gap: 7px; }
.settings-field-grid label > span { color: #25312a; font-size: 11px; font-weight: 800; }
.settings-secret-field { display: grid; align-content: start; gap: 12px; }
.settings-field-grid .settings-remove-secret { display: flex; align-items: center; gap: 9px; color: #59655e; font-size: 11px; font-weight: 700; }
.settings-field-grid .settings-remove-secret input { width: 18px; min-height: 18px; accent-color: #117873; }
.settings-field-grid input { width: 100%; min-height: 50px; padding: 10px 13px; border: 1px solid #bfc6c0; border-radius: 12px; background: #fff; color: #18201c; font: inherit; }
.settings-field-grid input::placeholder { color: #77827b; }
.settings-field-grid input:focus { border-color: #147d79; outline: 3px solid var(--focus); outline-offset: 2px; }
.settings-field-grid small { color: #647068; font-size: 11px; line-height: 1.5; }
.settings-form-actions { display: flex; align-items: center; gap: 18px; margin-top: 32px; padding-top: 25px; border-top: 1px solid #d9ddd8; }
.settings-form-actions p { max-width: 48ch; margin: 0; color: #647068; font-size: 11px; line-height: 1.5; }

@media (max-width: 760px) {
  .settings-integration-intro { display: grid; gap: 18px; }
  .settings-status { justify-self: start; }
  .settings-field-grid { grid-template-columns: 1fr; }
  .settings-form-actions { align-items: stretch; flex-direction: column; }
  .settings-form-actions .dashboard-primary-action { width: 100%; }
}

/* Public bicycle service history */
.bicycle-history { min-height: 100vh; background: #f4f6ef; color: #15362f; }
.history-header {
  height: 86px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 clamp(20px, 5vw, 72px);
  border-bottom: 1px solid #cbd8cf;
}
.history-brand { display: flex; align-items: center; gap: 10px; color: inherit; text-decoration: none; font: 700 18px/.95 "Newsreader", serif; }
.history-brand small { display: block; margin-top: 4px; font: 600 10px "Manrope", sans-serif; letter-spacing: .08em; text-transform: uppercase; }
.history-brand-mark { width: 62px; height: 44px; display: grid; place-items: center; }
.history-brand-mark svg { width: 52px; height: 38px; }
.history-language { min-width: 48px; min-height: 42px; display: grid; place-items: center; border: 1px solid #9db1a6; border-radius: 12px; font-size: 13px; font-weight: 800; }
.history-identity {
  width: min(1100px, calc(100% - 40px));
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(300px, .8fr);
  align-items: center;
  gap: clamp(36px, 7vw, 90px);
  margin: 56px auto 0;
  padding: clamp(32px, 5vw, 64px);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 18px 42px rgba(35, 70, 55, .11);
}
.history-identity h1 { max-width: 14ch; margin: 0; font: 700 clamp(44px, 6vw, 76px)/1.02 "Newsreader", serif; letter-spacing: -.035em; text-wrap: balance; }
.history-identity-copy > p { max-width: 62ch; margin: 22px 0 0; color: #526a60; font-size: 17px; line-height: 1.7; }
.history-code { display: grid; grid-template-columns: max-content 1fr; align-items: baseline; gap: 6px 22px; margin-top: 38px; padding-top: 22px; border-top: 1px solid #cbd8cf; }
.history-code span { color: #526a60; font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.history-code strong { color: #008f89; font-size: 26px; letter-spacing: .14em; }
.history-code small { grid-column: 1 / -1; max-width: 62ch; color: #526a60; font-size: 12px; line-height: 1.6; }
.history-bicycle-visual { margin: 0; text-align: center; }
.history-bicycle-visual img { display: block; width: 100%; max-height: 270px; object-fit: contain; }
.history-bicycle-visual figcaption { margin-top: 16px; color: #526a60; font-size: 13px; font-weight: 700; }
.history-ledger { width: min(920px, calc(100% - 40px)); margin: 84px auto 0; padding-bottom: 92px; }
.history-ledger-heading { display: flex; align-items: end; justify-content: space-between; gap: 24px; padding-bottom: 22px; border-bottom: 1px solid #9fb3a7; }
.history-ledger-heading h2 { margin: 0; font: 650 clamp(34px, 5vw, 52px)/1.05 "Newsreader", serif; letter-spacing: -.025em; }
.history-ledger-heading p { margin: 0 0 5px; color: #526a60; font-size: 13px; font-weight: 700; }
.history-timeline { margin: 0; padding: 0; list-style: none; }
.history-entry { position: relative; display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 18px; }
.history-entry::before { content: ""; position: absolute; top: 0; bottom: 0; left: 11px; width: 1px; background: #b9cbc0; }
.history-entry:first-child::before { top: 43px; }
.history-entry:last-child::before { bottom: calc(100% - 44px); }
.history-entry-marker { position: relative; z-index: 1; width: 23px; height: 23px; margin-top: 33px; border: 6px solid #f4f6ef; border-radius: 50%; background: #7a8d83; box-shadow: 0 0 0 1px #9fb3a7; }
.history-entry article { padding: 30px 0 32px; border-bottom: 1px solid #cbd8cf; }
.history-entry-topline { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.history-entry time { color: #526a60; font-size: 13px; font-weight: 700; }
.history-status { display: inline-flex; align-items: center; min-height: 30px; padding: 5px 10px; border-radius: 999px; background: #e3e9e5; color: #41574e; font-size: 11px; font-weight: 800; }
.history-entry h3 { margin: 14px 0 7px; font: 650 clamp(24px, 3vw, 31px)/1.2 "Newsreader", serif; letter-spacing: -.015em; }
.history-entry article > p { max-width: 70ch; margin: 0; color: #526a60; font-size: 14px; line-height: 1.65; }
.history-entry--registered .history-status, .history-entry--registered .history-entry-marker { background: #008f89; color: #fff; }
.history-entry--accepted .history-status, .history-entry--accepted .history-entry-marker { background: #1559bd; color: #fff; }
.history-entry--in_progress .history-status, .history-entry--in_progress .history-entry-marker { background: #c91f68; color: #fff; }
.history-entry--done .history-status, .history-entry--done .history-entry-marker { background: #dceae1; color: #234c3f; }
.history-entry--cancelled .history-status { background: #e5e5df; color: #5c625f; }
.history-entry--cancelled h3, .history-entry--cancelled article > p { color: #65716b; }
.history-entry--active .history-entry-marker { animation: history-status-breathe 2.6s cubic-bezier(.22, 1, .36, 1) infinite; }
@keyframes history-status-breathe {
  0%, 100% { box-shadow: 0 0 0 1px #9fb3a7, 0 0 0 0 rgba(0, 143, 137, .22); }
  50% { box-shadow: 0 0 0 1px #9fb3a7, 0 0 0 9px rgba(0, 143, 137, 0); }
}
.history-empty { max-width: 620px; padding: 54px 0 8px; }
.history-empty svg { width: 42px; height: 42px; color: #008f89; }
.history-empty h3 { margin: 20px 0 8px; font: 650 30px "Newsreader", serif; }
.history-empty p { margin: 0; color: #526a60; line-height: 1.65; }
.history-footer { display: flex; justify-content: space-between; gap: 24px; padding: 26px clamp(20px, 5vw, 72px); border-top: 1px solid #ced9d0; color: #526a60; font-size: 12px; }

@media (max-width: 760px) {
  .history-header { height: 76px; padding-inline: 16px; }
  .history-brand-mark { width: 52px; }
  .history-brand-mark svg { width: 46px; }
  .history-identity { width: calc(100% - 24px); grid-template-columns: 1fr; gap: 34px; margin-top: 24px; padding: 28px 22px 30px; }
  .history-identity h1 { max-width: 16ch; font-size: clamp(38px, 12vw, 54px); }
  .history-identity-copy > p { font-size: 15px; }
  .history-code { grid-template-columns: 1fr; gap: 6px; margin-top: 28px; }
  .history-code small { grid-column: auto; margin-top: 5px; }
  .history-bicycle-visual { order: -1; }
  .history-bicycle-visual img { max-height: 190px; }
  .history-ledger { width: calc(100% - 32px); margin-top: 56px; padding-bottom: 64px; }
  .history-ledger-heading { align-items: baseline; }
  .history-entry { grid-template-columns: 27px minmax(0, 1fr); gap: 12px; }
  .history-entry::before { left: 9px; }
  .history-entry-marker { width: 19px; height: 19px; margin-top: 31px; border-width: 5px; }
  .history-entry article { padding-block: 28px; }
  .history-entry-topline { align-items: flex-start; flex-direction: column; gap: 10px; }
  .history-entry h3 { margin-top: 13px; }
  .history-footer { flex-direction: column; gap: 7px; }
}


/* Managed bicycle types */
.dashboard-nav nav { gap: clamp(12px, 1.8vw, 28px); }
.bicycle-types-page { max-width: 1240px; }
.bicycle-type-admin-list { border-top: 1px solid #bfc5bf; border-bottom: 1px solid #bfc5bf; background: #fbfaf6; }
.bicycle-type-admin-card { min-height: 132px; display: grid; grid-template-columns: 160px minmax(0, 1fr) auto; align-items: center; gap: 26px; padding: 18px 22px; border-bottom: 1px solid #d9ddd8; }
.bicycle-type-admin-card:last-child { border-bottom: 0; }
.bicycle-type-admin-card.is-archived { background: #eeeDE7; color: #58605b; }
.bicycle-type-admin-image { height: 94px; display: grid; place-items: center; padding: 8px 14px; border-radius: 14px; background: #dfeae2; }
.bicycle-type-admin-image img { width: 100%; height: 100%; object-fit: contain; }
.bicycle-type-admin-copy { min-width: 0; }
.bicycle-type-admin-title { display: flex; align-items: center; gap: 12px; }
.bicycle-type-admin-title h2 { margin: 0; overflow-wrap: anywhere; font: 700 27px/1.1 "Newsreader", serif; letter-spacing: -.02em; }
.bicycle-type-admin-copy p { margin: 8px 0 0; color: #647068; font-size: 12px; }
.bicycle-type-admin-status { width: fit-content; padding: 5px 8px; border-radius: 8px; background: #e0e2dc; color: #545c57; font-size: 9px; font-weight: 800; text-transform: uppercase; }
.bicycle-type-admin-status.is-active { background: #dceee7; color: #1d593e; }
.bicycle-type-admin-actions { display: flex; align-items: center; gap: 14px; }
.bicycle-type-admin-actions form { margin: 0; }
.bicycle-type-archive-action, .bicycle-type-restore-action { min-height: 44px; padding: 9px 4px; border: 0; background: transparent; font-size: 12px; font-weight: 800; }
.bicycle-type-archive-action { color: #8a3030; }
.bicycle-type-restore-action { color: #117873; }
.bicycle-type-admin-page { max-width: 1100px; }
.bicycle-type-admin-form, .predefined-issue-admin-form { padding: clamp(22px, 4vw, 38px); background: #fbfaf6; border-top: 1px solid #bfc5bf; border-bottom: 1px solid #bfc5bf; }
.bicycle-type-admin-fields { display: grid; grid-template-columns: minmax(0, 1fr) 140px; gap: 22px; }
.bicycle-type-admin-fields > div { min-width: 0; }
.bicycle-type-admin-fields label, .predefined-issue-admin-fields label { display: block; margin-bottom: 8px; font-size: 11px; font-weight: 800; }
.bicycle-type-admin-fields input:not([type="file"]), .predefined-issue-admin-fields input, .predefined-issue-admin-fields textarea { width: 100%; min-height: 50px; padding: 10px 13px; border: 1px solid #bfc6c0; border-radius: 12px; background: #fff; color: #18201c; }
.bicycle-type-admin-fields small, .predefined-issue-admin-fields small, .bicycle-type-admin-upload > small { display: block; margin-top: 6px; color: #647068; font-size: 11px; line-height: 1.5; }
.bicycle-type-admin-upload { grid-column: 1 / -1; max-width: 680px; }
.bicycle-type-admin-current-image { width: min(340px, 100%); height: 170px; display: grid; place-items: center; margin-bottom: 12px; padding: 16px; border-radius: 14px; background: #dfeae2; }
.bicycle-type-admin-current-image img { width: 100%; height: 100%; object-fit: contain; }
.predefined-issues-admin { margin-top: 44px; padding: clamp(22px, 4vw, 38px); background: #fbfaf6; border-top: 1px solid #bfc5bf; border-bottom: 1px solid #bfc5bf; }
.predefined-issue-admin-list { margin: 0; padding: 0; list-style: none; }
.predefined-issue-admin-list li { min-height: 74px; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 14px 4px; border-top: 1px solid #d9ddd8; }
.predefined-issue-admin-list li > div:first-child { display: grid; gap: 4px; }
.predefined-issue-admin-list li strong { font-size: 14px; }
.predefined-issue-admin-list li span { color: #647068; font-size: 11px; }
.predefined-issue-admin-actions { display: flex; align-items: center; gap: 18px; }
.predefined-issue-admin-actions a { color: #117873; font-size: 12px; font-weight: 800; text-decoration: none; }
.predefined-issue-admin-empty { padding: 28px 0; border-top: 1px solid #d9ddd8; text-align: center; }
.predefined-issue-admin-empty p { color: #647068; font-size: 12px; }
.predefined-issue-admin-page { max-width: 1180px; }
.predefined-issue-admin-fields { display: grid; grid-template-columns: minmax(0, 1fr) 140px; gap: 22px; }
.predefined-issue-symptoms { grid-column: 1 / -1; }
.predefined-issue-admin-fields textarea { min-height: 154px; resize: vertical; line-height: 1.6; }
.hotspot-editor { margin-top: 34px; padding-top: 28px; border-top: 1px solid #d5dad5; }
.hotspot-editor > header { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 22px; }
.hotspot-editor h2 { margin: 0 0 5px; font: 700 27px/1.05 "Newsreader", serif; letter-spacing: -.02em; }
.hotspot-editor header p { margin: 0; color: #647068; font-size: 12px; }
.hotspot-editor-layout { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(280px, .65fr); gap: 30px; align-items: start; }
.issue-hotspot-canvas { position: relative; width: 100%; display: block; border-radius: 16px; background: #e2ebe4; touch-action: none; }
.issue-hotspot-canvas > img { width: 100%; height: auto; display: block; user-select: none; -webkit-user-drag: none; }
.issue-hotspot-marker { position: absolute; z-index: 2; width: 44px; height: 44px; display: grid; place-items: center; padding: 0; border: 3px solid #fff; border-radius: 50%; background: #ed2a78; color: #fff; box-shadow: 0 7px 18px rgba(88, 21, 48, .25); font-size: 12px; font-weight: 800; transform: translate(-50%, -50%); touch-action: none; cursor: grab; }
.issue-hotspot-marker:active { cursor: grabbing; box-shadow: 0 11px 26px rgba(88, 21, 48, .34); }
.issue-hotspot-field-list { display: grid; gap: 12px; }
.issue-hotspot-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 14px; border-radius: 14px; background: #edf2ed; }
.issue-hotspot-fields > div:nth-of-type(3), .issue-hotspot-remove { grid-column: 1 / -1; }
.issue-hotspot-fields label { display: block; margin-bottom: 5px; font-size: 10px; font-weight: 800; }
.issue-hotspot-fields input[type="number"] { width: 100%; min-height: 44px; padding: 8px 10px; border: 1px solid #bfc6c0; border-radius: 10px; background: #fff; }
.issue-hotspot-remove { min-height: 44px; display: flex !important; align-items: center; gap: 9px; margin: 0 !important; color: #7a3030; cursor: pointer; }
.issue-hotspot-remove input { width: 18px; height: 18px; }
.issue-hotspot-fields.is-removed { opacity: .48; }

@media (max-width: 900px) {
  .bicycle-type-admin-card { grid-template-columns: 120px minmax(0, 1fr); gap: 18px; }
  .bicycle-type-admin-actions { grid-column: 2; }
  .hotspot-editor-layout { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .dashboard-nav nav { grid-template-columns: repeat(3, minmax(0, 1fr)); min-height: 96px; }
  .dashboard-nav nav a { min-height: 44px; }
  .bicycle-type-admin-card { grid-template-columns: 88px minmax(0, 1fr); padding: 14px; }
  .bicycle-type-admin-image { height: 74px; padding: 7px; }
  .bicycle-type-admin-title { align-items: flex-start; flex-direction: column; gap: 6px; }
  .bicycle-type-admin-title h2 { font-size: 22px; }
  .bicycle-type-admin-actions { grid-column: 1 / -1; justify-content: flex-end; }
  .bicycle-type-admin-fields, .predefined-issue-admin-fields { grid-template-columns: 1fr; }
  .bicycle-type-admin-upload, .predefined-issue-symptoms { grid-column: auto; }
  .bicycle-section-heading, .hotspot-editor > header { align-items: stretch; flex-direction: column; }
  .bicycle-section-heading .dashboard-primary-action, .hotspot-editor > header .dashboard-secondary-action { width: 100%; }
  .predefined-issue-admin-list li { align-items: flex-start; flex-direction: column; }
  .predefined-issue-admin-actions { align-self: stretch; justify-content: flex-end; }
  .issue-hotspot-canvas { min-height: 0; }
}

/* Public cookie notice */
.privacy-notice {
  position: fixed;
  z-index: 100;
  right: clamp(16px, 3vw, 36px);
  bottom: max(16px, env(safe-area-inset-bottom));
  width: min(520px, calc(100vw - 32px));
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  padding: 12px 12px 12px 16px;
  border-radius: 14px;
  background: #fbfaf6;
  color: #526a60;
  box-shadow: 0 12px 32px rgba(35, 70, 55, .18);
}
.privacy-notice p { max-width: 46ch; margin: 0; font-size: 13px; line-height: 1.55; }
.privacy-notice strong { color: #19362c; }
.privacy-notice button {
  min-width: 88px;
  min-height: 44px;
  padding: 9px 14px;
  border: 0;
  border-radius: 10px;
  background: #dceae1;
  color: #19362c;
  font-size: 13px;
  font-weight: 800;
}
.privacy-notice button:hover { background: #c8ded0; }
body.has-privacy-notice .calm-footer-map-attribution {
  bottom: calc(var(--privacy-notice-height, 76px) + 17px);
}

@media (max-width: 520px) {
  .privacy-notice {
    right: max(10px, env(safe-area-inset-right));
    bottom: max(10px, env(safe-area-inset-bottom));
    left: max(10px, env(safe-area-inset-left));
    width: auto;
    gap: 12px;
    padding-left: 14px;
  }

  body.has-privacy-notice .mobile-booking-actions {
    bottom: calc(max(12px, env(safe-area-inset-bottom)) + var(--privacy-notice-height, 76px) + 12px);
  }
}

@media print {
  .privacy-notice { display: none; }
}