:root {
  --ink: #10253b;
  --muted: #627487;
  --cream: #eff8ff;
  --paper: #fff;
  --forest: #075985;
  --green: #0284c7;
  --accent: #0ea5e9;
  --gradient: linear-gradient(135deg, #0ea5e9 0%, #0284c7 45%, #2563eb 100%);
  --gradient-dark: linear-gradient(135deg, #0c4a6e 0%, #0369a1 52%, #1d4ed8 100%);
  --line: #d7e7f2;
  --shadow: 0 20px 50px rgba(3, 105, 161, .12);
}

* { box-sizing: border-box; }
body { margin: 0; color: var(--ink); background: #f8fbfe; font: 15px/1.55 "DM Sans", sans-serif; }
h1, h2, h3 { margin: 0 0 .6rem; font-family: "Manrope", sans-serif; line-height: 1.12; }
h1 { font-size: clamp(2.2rem, 5vw, 4.6rem); letter-spacing: -.05em; }
h2 { font-size: clamp(1.5rem, 3vw, 2.5rem); letter-spacing: -.035em; }
h3 { font-size: 1.15rem; }
p { color: var(--muted); }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
input, select, textarea { width: 100%; min-height: 46px; padding: .7rem .85rem; color: var(--ink); background: white; border: 1px solid var(--line); border-radius: 10px; }
textarea { resize: vertical; }
input:focus, select:focus, textarea:focus { outline: 2px solid rgba(14,165,233,.22); border-color: var(--green); }
label { display: grid; gap: .38rem; color: #40566c; font-size: .86rem; font-weight: 600; }
small { display: block; color: var(--muted); }
.required-mark { display: inline; color: var(--muted); font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }

.site-header { height: 74px; padding: 0 max(5vw, 24px); display: flex; align-items: center; justify-content: space-between; background: rgba(255,255,255,.94); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 20; backdrop-filter: blur(12px); }
.brand { display: flex; align-items: center; font: 800 1.12rem "Manrope"; letter-spacing: -.02em; white-space: nowrap; }
nav { display: flex; align-items: center; gap: 1rem; font-weight: 600; font-size: .9rem; }
nav a:hover, .link-button:hover { color: var(--accent); }
.nav-menu { position: relative; }
.nav-menu summary { list-style: none; cursor: pointer; }
.nav-menu summary::-webkit-details-marker { display: none; }
.nav-menu summary::after { content: "▾"; margin-left: .35rem; color: var(--muted); font-size: .68rem; }
.nav-menu-panel { min-width: 210px; padding: .45rem; position: absolute; top: calc(100% + 16px); right: 0; display: grid; gap: .15rem; background: white; border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 20px 60px rgba(3,105,161,.18); z-index: 35; }
.nav-menu-panel a { padding: .7rem .8rem; border-radius: 8px; white-space: nowrap; }
.nav-menu-panel a:hover { background: var(--cream); }
.mobile-nav-menu { display: none; position: relative; }
.mobile-nav-menu summary { min-height: 38px; padding: .45rem .7rem; display: flex; align-items: center; gap: .35rem; list-style: none; color: var(--ink); background: white; border: 1px solid var(--line); border-radius: 8px; cursor: pointer; font-size: .78rem; font-weight: 800; }
.mobile-nav-menu summary::-webkit-details-marker { display: none; }
.mobile-nav-menu summary::after { content: "▾"; color: var(--muted); font-size: .68rem; }
.mobile-nav-panel { width: min(280px, calc(100vw - 28px)); max-height: calc(100vh - 96px); padding: .45rem; position: absolute; top: calc(100% + 12px); right: 0; display: grid; gap: .12rem; overflow-y: auto; background: white; border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 20px 60px rgba(3,105,161,.18); z-index: 45; }
.mobile-nav-panel a, .mobile-nav-panel .link-button { width: 100%; padding: .72rem .8rem; display: block; color: var(--ink); border-radius: 8px; text-align: left; font-weight: 800; }
.mobile-nav-panel a:hover, .mobile-nav-panel .link-button:hover { color: var(--accent); background: var(--cream); }
.mobile-nav-logout { border-top: 1px solid var(--line); padding-top: .15rem; }
.language-picker select { width: auto; min-width: 62px; min-height: 38px; padding: .4rem 1.7rem .4rem .6rem; border-radius: 8px; font-size: .75rem; font-weight: 800; cursor: pointer; }
.inline-form { display: inline; }
.link-button { padding: 0; border: 0; color: var(--ink); background: transparent; cursor: pointer; font-weight: 600; }
.link-button-danger { color: #b64836; }
.muted-action { color: var(--muted); }
.site-footer { padding: 2rem 5vw; display: grid; justify-items: center; gap: .75rem; color: var(--muted); border-top: 1px solid var(--line); text-align: center; }
.site-footer strong { color: var(--ink); font: 800 1.05rem "Manrope"; letter-spacing: -.01em; }
.site-footer nav { display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem 1rem; font-size: .82rem; }
.footer-contact-links { gap: .55rem; color: var(--ink); }
.footer-contact-links a { width: 38px; height: 38px; display: inline-grid; place-items: center; color: var(--forest); background: white; border: 1px solid var(--line); border-radius: 50%; text-decoration: none; transition: .2s ease; }
.footer-contact-links a:hover { color: white; background: var(--green); border-color: var(--green); transform: translateY(-1px); }
.footer-contact-links svg { width: 18px; height: 18px; display: block; fill: currentColor; }
.footer-contact-links .footer-icon-whatsapp { width: 19px; height: 19px; }
.footer-icon-whatsapp path:first-child { fill: currentColor; }
.footer-icon-whatsapp path + path { fill: white; }
.footer-contact-links a:hover .footer-icon-whatsapp path + path { fill: var(--green); }
.site-footer a { text-decoration: underline; text-underline-offset: 3px; }
.site-footer .footer-contact-links a { text-decoration: none; }

.hero { min-height: 680px; padding: 7vw max(7vw, 28px); display: grid; grid-template-columns: 1.2fr minmax(330px, 470px); gap: 8vw; align-items: center; color: white; background: var(--gradient-dark); }
.hero-copy { max-width: 760px; }
.hero h1 { max-width: 760px; }
.hero p { max-width: 610px; color: #dff4ff; font-size: 1.16rem; }
.eyebrow { display: inline-block; margin-bottom: 1rem; color: var(--green); font-weight: 800; font-size: .73rem; letter-spacing: .15em; text-transform: uppercase; }
.eyebrow-light, .hero .eyebrow { color: #bae6fd; }
.hero-route-actions { margin-top: 1.7rem; display: flex; flex-wrap: wrap; gap: .8rem; }
.hero-route-button { min-width: 220px; color: white; background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.32); backdrop-filter: blur(8px); }
.hero-route-button:hover { color: var(--forest); background: white; border-color: white; }
.trust-row { margin-top: 2rem; display: flex; flex-wrap: wrap; gap: 1.4rem; color: #dff4ff; font-size: .88rem; }
.booking-search { padding: 2rem; display: grid; gap: 1.15rem; color: var(--ink); background: var(--cream); border-radius: 20px; box-shadow: 0 28px 80px rgba(0,0,0,.25); }
.booking-search h2 { font-size: 1.65rem; }
.booking-search .opening-note { margin: -.35rem 0 0; color: var(--muted); font-size: .76rem; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
.button { min-height: 46px; padding: .72rem 1.2rem; display: inline-flex; justify-content: center; align-items: center; border: 1px solid transparent; border-radius: 10px; cursor: pointer; font-weight: 700; transition: .2s ease; }
.button:hover { transform: translateY(-1px); }
.button-primary { color: white; background: var(--gradient); box-shadow: 0 8px 22px rgba(2,132,199,.25); }
.button-secondary { color: var(--forest); background: white; border-color: var(--line); }
.button-wide { width: 100%; }

.section, .page-shell, .dashboard-shell { width: min(1200px, 90vw); margin: 0 auto; padding: 5rem 0; }
.premium-band { width: min(1200px, 90vw); margin: 0 auto 5rem; padding: 1.6rem; display: flex; justify-content: space-between; align-items: center; gap: 2rem; background: white; border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow); }
.premium-band p { max-width: 720px; margin: 0; }
.premium-band .eyebrow { margin-bottom: .45rem; }
.section-heading { margin-bottom: 2.2rem; }
.fleet-caption { max-width: 720px; margin: .2rem 0 0; font-size: 1rem; }
.card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.3rem; }
.bike-card { padding: 1.35rem; overflow: hidden; background: white; border: 1px solid var(--line); border-radius: 16px; }
.bike-card p { min-height: 48px; }
.bike-image { height: 210px; margin: -.35rem -.35rem 1.2rem; display: grid; place-items: center; overflow: hidden; background: #f4f5f2; border-radius: 12px; }
.bike-image img { width: 100%; height: 100%; display: block; object-fit: contain; mix-blend-mode: multiply; }
.bike-model { margin: -.25rem 0 .45rem; display: block; color: var(--green); font-size: .78rem; }
.pill { display: inline-block; margin-bottom: .8rem; padding: .25rem .55rem; color: var(--green); background: #e0f2fe; border-radius: 99px; font-size: .7rem; font-weight: 700; text-transform: uppercase; }
.about-section { width: min(1200px, 90vw); margin: 0 auto; padding: 0 0 5rem; display: grid; grid-template-columns: minmax(260px, .75fr) minmax(0, 1.25fr); gap: 3rem; align-items: start; }
.about-heading { position: sticky; top: 104px; }
.about-copy { padding: 1.6rem; background: white; border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow); }
.about-copy p { margin: 0 0 1rem; }
.about-copy p:last-child { margin-bottom: 0; }
.about-copy a { color: var(--forest); font-weight: 800; text-decoration: underline; text-underline-offset: 3px; }
.about-closing { color: var(--ink); font-weight: 800; }
.reviews-section { padding: 5rem max(7vw, 28px); background: var(--cream); }
.reviews-heading { width: min(1200px, 100%); margin: 0 auto 2rem; display: flex; justify-content: space-between; align-items: end; gap: 2rem; }
.reviews-rating { display: grid; justify-items: end; }
.reviews-rating span, .review-stars { color: var(--accent); letter-spacing: .12em; }
.reviews-rating strong { color: var(--muted); font-size: .8rem; }
.reviews-carousel { width: min(1200px, 100%); margin: 0 auto; }
.reviews-track { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 1rem) / 2); gap: 1rem; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; overscroll-behavior-inline: contain; }
.reviews-track::-webkit-scrollbar { display: none; }
.review-card { min-height: 310px; padding: 1.5rem; display: flex; flex-direction: column; background: white; border: 1px solid var(--line); border-radius: 14px; scroll-snap-align: start; }
.review-card blockquote { margin: .9rem 0 1.2rem; color: #40566c; font-size: .93rem; line-height: 1.7; }
.review-card footer { margin-top: auto; padding: 0; color: var(--ink); border: 0; text-align: left; font-weight: 800; }
.carousel-controls { margin-top: 1rem; display: flex; justify-content: center; align-items: center; gap: 1rem; }
.carousel-button { width: 42px; height: 42px; padding: 0; display: grid; place-items: center; color: var(--forest); background: white; border: 1px solid var(--line); border-radius: 50%; cursor: pointer; font-size: 1.1rem; }
.carousel-dots { display: flex; gap: .4rem; }
.carousel-dots span { width: 7px; height: 7px; background: #c6cec8; border-radius: 99px; transition: .2s ease; }
.carousel-dots span.is-active { width: 22px; background: var(--green); }
.locations-band { padding: 5rem max(7vw,28px); display: grid; grid-template-columns: 1fr 1fr; gap: 5vw; color: white; background: var(--gradient-dark); }
.location-list { display: grid; gap: 1rem; }
.location-card { padding: 1.35rem; border: 1px solid rgba(255,255,255,.16); border-radius: 14px; background: rgba(255,255,255,.05); }
.location-card-heading { display: flex; justify-content: space-between; align-items: start; gap: 1.5rem; }
.location-card h3 { margin: 0 0 .35rem; font-size: 1.25rem; }
.location-card p { margin: 0; color: #d2efff; font-size: .9rem; }
.location-card a { flex: 0 0 auto; color: white; font-size: .78rem; font-weight: 800; text-decoration: none; }
.location-card a:hover { color: var(--accent); }
.location-card a span { color: inherit; }
.opening-hours { margin-top: 1.2rem; padding-top: 1rem; border-top: 1px solid rgba(255,255,255,.13); }
.opening-hours > strong { display: block; margin-bottom: .55rem; font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; }
.opening-hours dl { margin: 0; display: grid; grid-template-columns: 1fr 1fr; column-gap: 1.5rem; }
.opening-hours dl div { padding: .3rem 0; display: flex; justify-content: space-between; gap: 1rem; color: #e0f2fe; font-size: .8rem; }
.opening-hours dt, .opening-hours dd { margin: 0; }
.opening-hours dd { font-weight: 700; }
.opening-hours .is-closed { color: #a8d7ef; }

.page-heading { margin-bottom: 2rem; display: flex; justify-content: space-between; align-items: end; gap: 2rem; }
.page-heading h1, .dashboard-shell h1 { font-size: clamp(2rem, 4vw, 3.2rem); }
.page-heading p { margin: .2rem 0; }
.availability-list { display: grid; gap: 1rem; }
.availability-card { padding: 1.7rem; display: grid; grid-template-columns: 1fr minmax(280px, 360px); gap: 2.5rem; align-items: center; background: white; border: 1px solid var(--line); border-radius: 16px; }
.customer-form { display: grid; grid-template-columns: 1fr 1fr; gap: .65rem; }
.stock-ok { grid-column: 1 / -1; }
.quantity-field, .rider-heights, .customer-form > .button { grid-column: 1 / -1; }
.rider-heights { margin: .25rem 0; padding: 1rem; border: 1px solid var(--line); border-radius: 12px; }
.rider-heights legend { padding: 0 .35rem; font-weight: 800; }
.rider-heights p { margin: 0 0 .8rem; font-size: .78rem; }
.height-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .65rem; }
.stock-ok { color: var(--green); font-size: .8rem; font-weight: 800; text-transform: uppercase; }
.availability-summary { margin-bottom: 1.2rem; display: grid; grid-template-columns: repeat(5, 1fr); gap: .65rem; }
.availability-chip { padding: .9rem; display: grid; gap: .2rem; background: #e0f2fe; border: 1px solid #bae6fd; border-radius: 10px; }
.availability-chip span { color: var(--green); font-size: .75rem; }
.availability-chip.is-unavailable { opacity: .55; background: #f2f2f0; border-color: var(--line); }
.booking-request-form { display: grid; gap: 1rem; }
.form-section { padding: 1.6rem; background: white; border: 1px solid var(--line); border-radius: 16px; }
.form-section-heading { margin-bottom: 1.2rem; display: flex; gap: .9rem; align-items: start; }
.form-section-heading > span { width: 30px; height: 30px; flex: 0 0 auto; display: grid; place-items: center; color: white; background: var(--gradient); border-radius: 50%; font-weight: 800; }
.form-section-heading h2 { margin-bottom: .2rem; font-size: 1.25rem; }
.form-section-heading p { margin: 0; }
.customer-details-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; }
.phone-fields { display: grid; grid-template-columns: minmax(92px, .32fr) minmax(0, 1fr); gap: .5rem; }
.customer-profile-note { margin: .75rem 0 0; font-size: .82rem; }
.booking-request-form .quantity-field { max-width: 230px; margin-bottom: 1rem; }
.bike-request-rows { display: grid; gap: .7rem; }
.bike-request-row { padding: .9rem; display: grid; grid-template-columns: 80px 1fr 1fr; gap: .8rem; align-items: end; background: #fafbf9; border: 1px solid var(--line); border-radius: 11px; }
.bike-request-row > strong { align-self: center; }
.rider-extras { grid-column: 2 / -1; display: flex; flex-wrap: wrap; gap: .7rem; }
.extra-check { padding: .55rem .7rem; display: flex; align-items: center; gap: .45rem; background: white; border: 1px solid var(--line); border-radius: 9px; font-weight: 600; }
.extra-check.is-disabled { opacity: .55; cursor: not-allowed; }
.extra-check input[type="checkbox"] { width: 17px; min-height: 17px; }
.booking-consents { display: grid; gap: .8rem; }
.consent-label { display: flex; align-items: flex-start; gap: .7rem; font-weight: 500; }
.consent-label input { width: 18px; min-height: 18px; margin-top: .15rem; flex: 0 0 auto; }
.optional-consent { padding: .9rem 1rem; display: flex; flex-wrap: wrap; gap: .55rem 1rem; border: 1px solid var(--line); border-radius: 10px; }
.optional-consent legend { width: 100%; padding: 0; font-size: .82rem; font-weight: 600; line-height: 1.35; }
.optional-consent label { display: flex; align-items: center; gap: .35rem; font-size: .82rem; }
.optional-consent input { width: 17px; min-height: 17px; }
.legal-dialog-link { padding: 0; color: var(--green); background: transparent; border: 0; cursor: pointer; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.legal-dialog { width: min(720px, calc(100vw - 32px)); max-height: min(760px, calc(100vh - 32px)); padding: 0; border: 0; border-radius: 16px; box-shadow: 0 30px 90px rgba(0,0,0,.25); }
.legal-dialog::backdrop { background: rgba(12,30,20,.58); backdrop-filter: blur(3px); }
.legal-dialog-card { padding: 1.6rem; display: grid; gap: 1.2rem; }
.legal-dialog-heading { display: flex; justify-content: space-between; align-items: start; gap: 1rem; }
.legal-dialog-heading h2 { margin: 0; font-size: 1.45rem; }
.legal-dialog-close { padding: 0; color: var(--muted); background: transparent; border: 0; cursor: pointer; font-size: 1.8rem; line-height: 1; }
.legal-dialog-content { max-height: 55vh; padding-right: .5rem; overflow-y: auto; }
.legal-dialog-content section + section, .legal-document section + section { margin-top: 1.6rem; }
.legal-dialog-content h2, .legal-document h2 { font-size: 1.15rem; }
.legal-dialog-content p, .legal-document p { margin-bottom: 0; }
.legal-page { max-width: 900px; }
.legal-page h1 { font-size: clamp(2rem, 4vw, 3.2rem); }
.legal-placeholder-note { padding: 1rem; color: #75540f; background: #fff1c9; border-radius: 10px; }
.legal-document { margin-top: 2rem; padding: clamp(1.4rem, 4vw, 2.5rem); background: white; border: 1px solid var(--line); border-radius: 16px; }
.rental-terms > h2 { display: none; }
.rental-terms ol { margin: 0; padding-left: 1.25rem; display: grid; gap: .65rem; }
.rental-terms li { padding-left: .2rem; }
.premium-page-bg { color: white; background: radial-gradient(circle at 75% 12%, rgba(14,165,233,.32), transparent 30%), linear-gradient(135deg, #082f49 0%, #0c4a6e 46%, #111827 100%); }
.premium-hero { min-height: 620px; padding: 6rem max(7vw, 28px); display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 6vw; align-items: end; color: white; background: transparent; }
.premium-hero-copy { max-width: 850px; }
.premium-hero h1 { max-width: 760px; font-size: clamp(2.6rem, 6vw, 5.4rem); }
.premium-hero p { max-width: 650px; color: #dff4ff; font-size: 1.15rem; }
.premium-hero-actions { margin-top: 1.6rem; display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; }
.premium-hero-actions span { color: #bae6fd; font-size: .82rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.premium-hero-button { color: var(--forest); background: white; border-color: white; }
.premium-hero-panel { padding: 1.4rem; display: grid; gap: 1rem; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2); border-radius: 16px; backdrop-filter: blur(12px); }
.premium-hero-panel strong { font: 800 1.35rem "Manrope"; }
.premium-hero-panel span { color: #dff4ff; }
.premium-hero-panel div { padding-top: 1rem; border-top: 1px solid rgba(255,255,255,.16); }
.premium-hero-panel small { color: #bae6fd; text-transform: uppercase; letter-spacing: .08em; }
.premium-hero-panel b { display: block; margin-top: .2rem; }
.premium-request-form { display: block; background: transparent; }
.premium-showcase { width: min(1280px, 90vw); margin: 0 auto; padding: 5rem 0 7rem; color: white; }
.premium-showcase .section-heading p { color: #b7d4e8; }
.premium-bike-grid { display: grid; gap: .85rem; }
.premium-bike-option { min-height: 0; padding: .75rem; position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .8rem; overflow: hidden; background: rgba(255,255,255,.07); border: 1px solid rgba(186,230,253,.14); border-radius: 16px; transition: .2s ease; }
.premium-bike-option::before { display: none; }
.premium-bike-option:hover { border-color: rgba(186,230,253,.38); background: rgba(255,255,255,.1); }
.premium-bike-choice { position: relative; display: grid; grid-template-columns: minmax(230px, 320px) minmax(0, 1fr) 118px; gap: 1rem; align-items: center; cursor: pointer; z-index: 1; }
.premium-bike-option input { position: absolute; width: 1px; min-height: 1px; opacity: 0; pointer-events: none; }
.premium-bike-option:has(input:checked) { border-color: rgba(56,189,248,.9); box-shadow: 0 0 0 2px rgba(14,165,233,.22); background: rgba(14,165,233,.16); }
.premium-bike-media { height: 160px; display: grid; place-items: center; overflow: hidden; background: #fff; border-radius: 12px; }
.premium-bike-media img { width: 100%; height: 100%; display: block; object-fit: contain; }
.premium-bike-content { display: grid; align-content: center; gap: .35rem; padding: 0 .15rem; }
.premium-bike-kicker { color: #7dd3fc; font-size: .72rem; font-weight: 900; text-transform: uppercase; letter-spacing: .12em; }
.premium-bike-content strong { color: white; font: 800 clamp(1.15rem, 2vw, 1.65rem) "Manrope"; line-height: 1.04; }
.premium-bike-category { color: #bae6fd; font-size: .75rem; font-weight: 900; text-transform: uppercase; letter-spacing: .06em; }
.premium-bike-select { margin: 0; padding: .58rem .72rem; color: #e0f2fe; background: rgba(255,255,255,.08); border: 1px solid rgba(186,230,253,.2); border-radius: 8px; text-align: center; font-size: .74rem; font-weight: 900; text-transform: uppercase; letter-spacing: .06em; }
.premium-bike-option:has(input:checked) .premium-bike-select { color: white; background: var(--gradient); }
.premium-bike-actions { width: 112px; position: relative; z-index: 1; display: grid; justify-items: end; gap: .35rem; align-self: center; padding-left: .55rem; border-left: 1px solid rgba(186,230,253,.12); }
.premium-bike-action { min-height: 0; padding: .15rem 0; color: #bae6fd; background: transparent; border: 0; cursor: pointer; font-size: .74rem; font-weight: 900; text-align: right; text-transform: uppercase; letter-spacing: .08em; }
.premium-bike-action::after { content: "›"; margin-left: .32rem; color: #7dd3fc; }
.premium-bike-action:hover { color: white; text-decoration: underline; text-underline-offset: 4px; }
.premium-bike-dialog { width: min(900px, calc(100vw - 32px)); padding: 0; color: white; background: transparent; border: 0; }
.premium-bike-dialog::backdrop { background: rgba(2,8,23,.78); backdrop-filter: blur(6px); }
.premium-bike-dialog-card { padding: clamp(1.2rem, 3vw, 2rem); display: grid; gap: 1.1rem; background: linear-gradient(145deg, #0f2740, #081522); border: 1px solid rgba(186,230,253,.18); border-radius: 18px; box-shadow: 0 30px 100px rgba(0,0,0,.55); }
.premium-bike-dialog-heading { display: flex; justify-content: space-between; gap: 1rem; align-items: start; }
.premium-bike-dialog-heading h2 { margin: .25rem 0; font-size: clamp(1.7rem, 4vw, 3rem); }
.premium-bike-dialog-heading p { margin: 0; color: #bae6fd; font-weight: 900; text-transform: uppercase; letter-spacing: .06em; }
.premium-bike-dialog-media { height: 260px; display: grid; place-items: center; background: #fff; border-radius: 14px; overflow: hidden; }
.premium-bike-dialog-media img { width: 100%; height: 100%; object-fit: contain; }
.premium-bike-dialog-description { margin: 0; color: #dff4ff; font-size: 1rem; }
.premium-bike-details-body { display: grid; gap: .75rem; }
.premium-bike-details-body p { margin: 0; color: #cfe8f7; font-size: .92rem; line-height: 1.65; }
.premium-spec-table { display: grid; gap: .35rem; }
.premium-spec-table div { padding: .6rem .7rem; display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: .7rem; background: rgba(255,255,255,.07); border: 1px solid rgba(186,230,253,.13); border-radius: 8px; }
.premium-spec-table span { color: #7dd3fc; font-size: .68rem; font-weight: 900; text-transform: uppercase; letter-spacing: .08em; }
.premium-spec-table strong { color: white; font-size: .82rem; }
.premium-bike-dialog-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .7rem; }
.size-guide-link { width: fit-content; min-height: 0; padding: 0; color: var(--green); background: transparent; border: 0; cursor: pointer; font-size: .78rem; font-weight: 800; text-align: left; text-decoration: underline; text-underline-offset: 3px; }
.size-guide-dialog { width: min(620px, calc(100vw - 32px)); padding: 0; color: white; background: transparent; border: 0; }
.size-guide-dialog::backdrop { background: rgba(2,8,23,.78); backdrop-filter: blur(6px); }
.size-guide-card { padding: clamp(1.2rem, 3vw, 1.8rem); display: grid; gap: 1.1rem; background: linear-gradient(145deg, #0f2740, #081522); border: 1px solid rgba(186,230,253,.18); border-radius: 18px; box-shadow: 0 30px 100px rgba(0,0,0,.55); }
.size-guide-card .premium-bike-dialog-heading h2 { font-size: clamp(1.5rem, 4vw, 2.25rem); }
.size-guide-list { display: grid; gap: .55rem; }
.size-guide-row { padding: .8rem; display: grid; grid-template-columns: 76px 96px 1fr; gap: .85rem; align-items: center; background: rgba(255,255,255,.06); border: 1px solid rgba(186,230,253,.12); border-radius: 12px; }
.size-guide-row strong { color: white; font: 800 .96rem "Manrope"; }
.size-guide-row span { color: #bae6fd; font-size: .86rem; font-weight: 800; }
.size-guide-range { height: 7px; position: relative; background: rgba(186,230,253,.16); border-radius: 999px; overflow: hidden; }
.size-guide-range::before { content: ""; position: absolute; inset: 0 calc(100% - var(--range-end)) 0 var(--range-start); background: linear-gradient(90deg, #0ea5e9, #bae6fd); border-radius: inherit; }
.premium-request-drawer { padding: 5rem max(5vw, 24px); color: white; background: transparent; border-top: 1px solid rgba(186,230,253,.12); }
.premium-request-intro { width: min(920px, 90vw); margin: 0 auto 1.4rem; }
.premium-request-intro p { max-width: 680px; margin-top: 0; color: #b7d4e8; }
.premium-form-card { width: min(980px, 90vw); margin: 0 auto; padding: 1.6rem; display: grid; gap: 1.2rem; background: white; border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow); }
.premium-form-footer { display: grid; gap: 1rem; }
.premium-request-bar { width: min(980px, calc(100vw - 32px)); padding: .85rem; position: sticky; right: 16px; bottom: 16px; left: 16px; z-index: 18; margin: 0 auto 16px; display: flex; justify-content: space-between; align-items: center; gap: 1rem; color: white; background: rgba(8,21,34,.94); border: 1px solid rgba(186,230,253,.22); border-radius: 14px; box-shadow: 0 20px 60px rgba(0,0,0,.34); backdrop-filter: blur(12px); }
.premium-request-bar strong { display: block; color: white; }
.premium-request-bar span { color: #cfe8f7; font-size: .82rem; }
.premium-request-bar .button:disabled { color: #dff4ff; background: rgba(148,163,184,.34); box-shadow: none; opacity: 1; cursor: not-allowed; transform: none; }
.premium-request-bar[hidden] { display: none; }
.premium-custom-location[hidden] { display: none; }
.form-wide { grid-column: 1 / -1; }
.premium-filter-bar { grid-template-columns: minmax(240px, 1fr) 220px auto; }
.premium-manual-create { margin-bottom: 1rem; }
.premium-manual-create summary { cursor: pointer; color: var(--ink); font: 800 1rem "Manrope"; }
.premium-manual-form { margin-top: 1rem; display: grid; gap: 1rem; }
.premium-bike-select-list { margin: 0; padding: 1rem; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: .65rem; border: 1px solid var(--line); border-radius: 10px; }
.premium-bike-select-list legend { padding: 0 .35rem; color: var(--muted); font-size: .78rem; font-weight: 800; text-transform: uppercase; }
.premium-bike-select-list label { min-height: 0; padding: .7rem .75rem; display: flex; align-items: center; gap: .55rem; color: var(--ink); background: #f8fbfe; border: 1px solid var(--line); border-radius: 8px; font-weight: 800; text-transform: none; letter-spacing: 0; }
.premium-bike-select-list input { width: auto; min-height: 0; }
.premium-request-sections { display: grid; gap: 1.2rem; }
.premium-request-section { display: block; }
.premium-request-section[open] { display: grid; gap: .8rem; }
.premium-section-heading { padding: .9rem 1rem; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .85rem; background: #f8fbfe; border: 1px solid var(--line); border-radius: 10px; cursor: pointer; list-style: none; text-align: left; }
.premium-section-heading::-webkit-details-marker { display: none; }
.premium-section-heading::before { content: "▾"; color: #0369a1; font-size: .8rem; line-height: 1; transition: transform .18s ease; }
.premium-request-section:not([open]) .premium-section-heading::before { transform: rotate(-90deg); }
.premium-section-heading h2 { margin: 0; font-size: 1.15rem; }
.premium-section-heading p { margin: .2rem 0 0; color: var(--muted); }
.premium-section-heading strong { min-width: 34px; min-height: 34px; justify-self: end; display: grid; place-items: center; color: #0369a1; background: white; border: 1px solid var(--line); border-radius: 999px; }
.premium-section-empty { padding: .9rem 1rem; color: var(--muted); background: #fafbf9; border: 1px dashed var(--line); border-radius: 10px; }
.premium-request-list { display: grid; gap: 1rem; }
.premium-request-card { padding: 1.15rem; }
.premium-request-heading { margin-bottom: 1.1rem; display: grid; grid-template-columns: minmax(0, 1fr) 168px; align-items: start; gap: 1rem; }
.premium-request-main { min-width: 0; display: grid; gap: .25rem; }
.premium-request-heading h2 { margin: 0; font-size: 1.35rem; line-height: 1.15; }
.premium-request-heading p { margin: 0; }
.premium-request-contact { color: var(--muted); overflow-wrap: anywhere; }
.premium-request-edit-link { width: fit-content; margin-top: .25rem; font-weight: 800; }
.premium-status-form { min-width: 0; padding: .65rem; display: grid; gap: .35rem; background: #f8fbfe; border: 1px solid var(--line); border-radius: 10px; }
.premium-status-form label { color: var(--muted); font-size: .68rem; font-weight: 900; line-height: 1; text-transform: uppercase; letter-spacing: .06em; }
.premium-status-form select { width: 100%; min-height: 38px; padding: .45rem 2rem .45rem .65rem; border-radius: 8px; font-size: .88rem; font-weight: 800; }
.premium-status-field { min-width: 168px; padding: .65rem; display: grid; gap: .35rem; background: #f8fbfe; border: 1px solid var(--line); border-radius: 10px; color: var(--muted); font-size: .68rem; font-weight: 900; line-height: 1; text-transform: uppercase; letter-spacing: .06em; }
.premium-status-field select { min-height: 38px; padding: .45rem 2rem .45rem .65rem; border-radius: 8px; color: var(--ink); font-size: .88rem; font-weight: 800; text-transform: none; letter-spacing: 0; }
.premium-request-details { margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: .75rem; }
.premium-request-details div { padding: .85rem; background: #f8fbfe; border: 1px solid var(--line); border-radius: 10px; }
.premium-request-details dt { color: var(--muted); font-size: .72rem; font-weight: 800; text-transform: uppercase; }
.premium-request-details dd { margin: .2rem 0 0; font-weight: 700; }
.premium-request-comments { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.premium-request-comments p { margin: .3rem 0 0; }
.premium-edit-form { display: grid; gap: 1.25rem; }
.premium-quote-editor { display: grid; gap: 1rem; padding-top: 1.2rem; border-top: 1px solid var(--line); }
.quote-line-list { display: grid; gap: .65rem; }
.quote-line-grid { display: grid; grid-template-columns: minmax(220px, 1fr) 130px 160px; gap: .65rem; align-items: center; }
.quote-line-head { color: var(--muted); font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; }
.quote-summary-box { padding: 1rem; display: grid; gap: .7rem; background: #f8fbfe; border: 1px solid var(--line); border-radius: 10px; }
.quote-summary-box textarea { min-height: 190px; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace; }
.rental-delay-rule { padding: .9rem 1rem; font-weight: 700; background: var(--cream); border-radius: 10px; }
.cycle-route-hero { padding: 4.5rem max(7vw,28px); display: flex; justify-content: space-between; align-items: end; gap: 2rem; color: white; background: var(--gradient-dark); }
.cycle-route-hero > div { max-width: 760px; }
.cycle-route-hero h1 { font-size: clamp(2.3rem, 5vw, 4.3rem); }
.cycle-route-hero p { max-width: 620px; color: #dff4ff; font-size: 1.08rem; }
.cycle-route-shell { width: min(1200px, 90vw); margin: 0 auto; padding: 4rem 0 1.3rem; display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 1.3rem; align-items: start; }
.cycle-map-board { overflow: hidden; background: white; border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow); }
.cycle-map-heading { padding: 1.2rem 1.3rem; display: flex; justify-content: space-between; align-items: end; gap: 1rem; border-bottom: 1px solid var(--line); }
.cycle-map-heading .eyebrow { margin-bottom: .35rem; }
.cycle-map-heading h2 { margin: 0; font-size: 1.45rem; }
.cycle-map-heading a { color: var(--green); font-size: .78rem; font-weight: 800; }
.cycle-route-map { min-height: 560px; position: relative; background: #e8f5fb; }
.route-overview { padding: 1rem; display: grid; place-items: center; overflow: hidden; }
.route-overview svg { width: 100%; height: min(620px, 62vw); min-height: 520px; display: block; }
.route-overview-bg { fill: #eef8f1; }
.route-water-fill { fill: #9edcf1; opacity: .66; filter: drop-shadow(0 18px 36px rgba(46,154,195,.18)); }
.route-line { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.route-line-shadow { stroke: #0f3f31; stroke-width: 18; opacity: .12; filter: drop-shadow(0 14px 18px rgba(16,37,59,.25)); }
.route-line-highlight { stroke: #f97316; stroke-width: 12; opacity: .82; }
.route-line-main { stroke: #0f8a55; stroke-width: 6; stroke-dasharray: 1 15; }
.route-connection-line { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.route-connection-shadow { stroke: #0f3f31; stroke-width: 12; opacity: .1; }
.route-connection-main { stroke: #2563eb; stroke-width: 5; stroke-dasharray: 13 10; opacity: .9; }
.route-connection-label { pointer-events: none; }
.route-connection-label rect { fill: rgba(255,255,255,.93); stroke: #bfdbfe; stroke-width: 1.5; filter: drop-shadow(0 8px 14px rgba(16,37,59,.16)); }
.route-connection-label text { fill: #1d4ed8; font: 900 17px "Manrope"; text-anchor: middle; dominant-baseline: middle; }
.route-marker circle, .map-legend i, .point-category { --marker-color: var(--accent); }
.route-marker-hit { cursor: pointer; outline: none; }
.route-marker circle { fill: #0284c7; stroke: white; stroke-width: 5; filter: drop-shadow(0 8px 10px rgba(16,37,59,.3)); }
.route-marker text { fill: white; font: italic 900 17px "Manrope"; text-anchor: middle; pointer-events: none; }
.route-marker-hit:hover .route-marker circle, .route-marker-hit:focus .route-marker circle { fill: #0369a1; stroke-width: 6; }
.route-town-label { fill: #244a37; paint-order: stroke; stroke: rgba(255,255,255,.88); stroke-width: 6; stroke-linejoin: round; font: 800 17px "Manrope"; text-anchor: middle; opacity: .78; pointer-events: none; }
.route-info-card { width: min(280px, calc(100% - 32px)); padding: 1rem; position: absolute; z-index: 3; display: grid; gap: .55rem; background: rgba(255,255,255,.96); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 18px 45px rgba(16,37,59,.22); }
.route-info-card::after { content: ""; width: 14px; height: 14px; position: absolute; left: var(--arrow-left, 50%); bottom: -8px; transform: translateX(-50%) rotate(45deg); background: rgba(255,255,255,.96); border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.route-info-card.is-below::after { top: -8px; bottom: auto; border: 0; border-left: 1px solid var(--line); border-top: 1px solid var(--line); }
.route-info-card[hidden] { display: none; }
.route-info-eyebrow { color: var(--green); font-size: .68rem; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.route-info-card h3 { margin: 0; font-size: 1.1rem; }
.route-info-card p { margin: 0; font-size: .84rem; }
.route-info-card a { color: var(--green); font-size: .78rem; font-weight: 900; }
.route-info-amenities { display: flex; flex-wrap: wrap; gap: .35rem; }
.route-overview-loading { position: absolute; inset: auto 1rem 1rem; margin: 0; padding: .65rem .8rem; color: #40566c; background: rgba(255,255,255,.88); border-radius: 9px; font-size: .78rem; text-align: center; }
.route-overview.is-loaded .route-overview-loading { display: none; }
.route-overview.has-error svg { opacity: .35; }
.marker-rental circle, .marker-rental { --marker-color: #d94d2f; }
.marker-park circle, .marker-park { --marker-color: #17844b; }
.marker-repair circle, .marker-repair { --marker-color: #31528d; }
.marker-food circle, .marker-food { --marker-color: #9f6b1b; }
.marker-interest circle, .marker-interest { --marker-color: #7c3aed; }
.marker-parking circle, .marker-parking { --marker-color: #475569; }
.marker-water circle, .marker-water { --marker-color: #0284c7; }
.marker-camping circle, .marker-camping { --marker-color: #15803d; }
.marker-reserve circle, .marker-reserve { --marker-color: #4d7c0f; }
.cycle-route-panel { padding: 1.4rem; display: grid; gap: .8rem; background: white; border: 1px solid var(--line); border-radius: 16px; }
.cycle-route-panel h2 { font-size: 1.35rem; }
.cycle-route-panel p { margin-top: 0; }
.route-stats { margin: 0; display: grid; gap: .65rem; }
.route-stats div { padding-bottom: .65rem; display: flex; justify-content: space-between; gap: 1rem; border-bottom: 1px solid var(--line); }
.route-stats dt, .route-stats dd { margin: 0; }
.route-stats dt { color: var(--muted); font-size: .78rem; }
.route-stats dd { color: var(--ink); font-weight: 800; text-align: right; }
.route-download-button { width: 100%; margin-top: .35rem; }
.map-legend { display: grid; gap: .45rem; }
.map-legend span { display: flex; align-items: center; gap: .5rem; color: #40566c; font-size: .82rem; font-weight: 700; }
.map-legend i { width: 12px; height: 12px; display: inline-block; flex: 0 0 auto; background: var(--marker-color); border-radius: 50%; box-shadow: inset 0 0 0 2px rgba(255,255,255,.7); }
.route-connection-note { margin: .35rem 0 0; padding: .8rem .9rem; color: #244a37; background: #e7f6ee; border: 1px solid #c7e8d4; border-radius: 10px; cursor: pointer; font: 800 .82rem/1.4 "DM Sans"; text-align: left; }
.route-connection-note:hover { border-color: #8ccaa7; background: #ddf2e6; }
.route-network-dialog { width: min(920px, calc(100vw - 32px)); padding: 0; border: 0; border-radius: 16px; box-shadow: 0 30px 90px rgba(16,37,59,.28); }
.route-network-dialog::backdrop { background: rgba(12,30,20,.58); backdrop-filter: blur(3px); }
.route-network-card { padding: 1.4rem; display: grid; gap: 1rem; background: white; }
.route-network-heading { display: flex; justify-content: space-between; align-items: start; gap: 1rem; }
.route-network-heading .eyebrow { margin-bottom: .35rem; }
.route-network-heading h2 { margin: 0; font-size: 1.55rem; }
.route-network-card > p { margin: 0; }
.route-network-description { color: var(--muted); font-size: .98rem; }
.route-network-summary { margin: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .75rem; }
.route-network-summary div { padding: .85rem .9rem; background: #f7fbfd; border: 1px solid var(--line); border-radius: 10px; }
.route-network-summary dt { margin: 0 0 .25rem; color: var(--muted); font-size: .78rem; font-weight: 800; }
.route-network-summary dd { margin: 0; color: var(--ink); font-size: 1.05rem; font-weight: 900; }
.route-network-map { padding: .8rem; background: #eef8f1; border: 1px solid var(--line); border-radius: 12px; }
.route-network-map svg { width: 100%; height: min(560px, 60vw); min-height: 360px; display: block; }
.network-loop { fill: none; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 10px 16px rgba(16,37,59,.14)); }
.network-loop-varese { stroke: #0f8a55; stroke-width: 8; }
.network-loop-comabbio { stroke: #f97316; stroke-width: 8; }
.network-loop-label { pointer-events: none; }
.network-loop-label rect { fill: rgba(255,255,255,.92); stroke: rgba(15,138,85,.22); stroke-width: 1.5; filter: drop-shadow(0 8px 14px rgba(16,37,59,.14)); }
.network-loop-label text { fill: #143827; font: 900 16px "Manrope"; text-anchor: middle; dominant-baseline: middle; }
.network-loop-label-comabbio rect { stroke: rgba(249,115,22,.28); }
.cycle-points-section { width: min(1200px, 90vw); margin: 0 auto; padding: 1.4rem 0 4rem; }
.route-index-section { width: min(1200px, 90vw); margin: 0 auto; padding: 4rem 0 5rem; }
.route-index-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.route-index-card { padding: 1.4rem; display: grid; gap: 1rem; background: white; border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow); }
.route-index-card h2 { font-size: clamp(1.45rem, 3vw, 2.2rem); }
.route-index-card p { margin: 0; }
.route-index-card dl { margin: 0; display: grid; gap: .55rem; }
.route-index-card dl div { padding-bottom: .55rem; display: flex; justify-content: space-between; gap: 1rem; border-bottom: 1px solid var(--line); }
.route-index-card dt, .route-index-card dd { margin: 0; }
.route-index-card dt { color: var(--muted); font-size: .78rem; }
.route-index-card dd { font-weight: 800; text-align: right; }
.route-index-actions { display: flex; flex-wrap: wrap; gap: .65rem; }
.cycle-points-section .section-heading { margin-bottom: 1.4rem; }
.cycle-points-section .section-heading h2 { font-size: clamp(1.7rem, 3vw, 2.6rem); }
.cycle-point-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: .75rem; }
.cycle-point-card { min-height: 210px; padding: 1rem; display: flex; flex-direction: column; gap: .65rem; background: white; border: 1px solid var(--line); border-radius: 12px; }
.point-amenities { min-height: 48px; display: flex; flex-wrap: wrap; align-content: flex-start; gap: .3rem; }
.cycle-point-card h3 { margin: 0; font-size: 1.08rem; line-height: 1.2; }
.cycle-point-card p { margin: 0; color: #607186; font-size: .88rem; line-height: 1.45; }
.cycle-point-card a { margin-top: auto; color: var(--green); font-size: .78rem; font-weight: 800; }
.point-category { width: fit-content; padding: .22rem .48rem; color: white; background: var(--marker-color); border-radius: 99px; font-size: .66rem; line-height: 1.15; font-weight: 800; }
.stock-none { padding: 1rem; color: #9a4c35; background: #fff1ec; border-radius: 10px; text-align: center; }
.empty-state, .empty-cell { padding: 3rem; color: var(--muted); text-align: center; }

.confirmation { max-width: 760px; text-align: center; }
.confirmation-mark { width: 72px; height: 72px; margin: 0 auto 1.5rem; display: grid; place-items: center; color: white; background: var(--gradient); border-radius: 50%; font-size: 2rem; }
.confirmation-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem; }
.summary-card { margin: 2rem 0; padding: 1.5rem; display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem; background: white; border: 1px solid var(--line); border-radius: 16px; text-align: left; }
.summary-card div { display: grid; gap: .25rem; }
.summary-card span { color: var(--muted); font-size: .8rem; }
.auth-shell { min-height: calc(100vh - 140px); display: grid; place-items: center; padding: 3rem 1rem; background: var(--cream); }
.auth-card { width: min(430px, 100%); padding: 2.4rem; display: grid; gap: 1rem; background: white; border-radius: 18px; box-shadow: var(--shadow); }
.auth-card h1 { font-size: 2.1rem; }
.auth-switch { margin: 0; text-align: center; font-size: .86rem; }
.auth-switch a { color: var(--green); font-weight: 800; text-decoration: underline; text-underline-offset: 3px; }
.form-help { display: block; margin: 0; color: var(--muted); font-size: .9rem; line-height: 1.45; }
.check-label { display: flex; align-items: center; grid-template-columns: auto 1fr; }
.check-label input { width: 18px; min-height: auto; }

.dashboard-shell { width: min(1380px, 94vw); }
.dashboard-location-filter { margin: -1rem 0 1rem; padding: 1rem; display: grid; grid-template-columns: minmax(220px, 320px) auto; gap: .7rem; align-items: end; background: white; border: 1px solid var(--line); border-radius: 14px; }
.dashboard-location-filter label { display: grid; gap: .3rem; color: var(--muted); font-size: .72rem; font-weight: 700; }
.dashboard-location-filter .button { min-height: 46px; }
.time-clock-panel { margin-bottom: 1rem; }
.time-clock-status { display: flex; justify-content: space-between; gap: 1rem; align-items: end; }
.time-clock-status h2 { margin: .2rem 0; font-size: 1.15rem; }
.time-clock-status p { margin: 0; color: var(--muted); }
.time-clock-form { display: grid; grid-template-columns: minmax(160px, 220px) minmax(180px, 260px) auto; gap: .7rem; align-items: end; }
.time-clock-form .button { min-height: 46px; }
.kpi-grid { margin-bottom: 1.4rem; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.kpi-grid-five { grid-template-columns: repeat(5, 1fr); }
.kpi-card { padding: 1.35rem; display: grid; gap: .35rem; background: white; border: 1px solid var(--line); border-radius: 14px; }
.kpi-card span { color: var(--muted); font-size: .82rem; }
.kpi-card strong { font: 800 2rem "Manrope"; }
.kpi-accent { color: white; background: var(--gradient); border-color: transparent; }
.kpi-accent span { color: #e0f2fe; }
.analytics-filter-bar { margin-bottom: .6rem; padding: 1rem; display: grid; grid-template-columns: repeat(4, minmax(150px, 1fr)) auto; gap: .7rem; align-items: end; background: white; border: 1px solid var(--line); border-radius: 14px; }
.analytics-filter-bar label { display: grid; gap: .3rem; color: var(--muted); font-size: .72rem; font-weight: 700; }
.analytics-filter-bar input, .analytics-filter-bar select { min-width: 0; }
.analytics-filter-bar .button { min-height: 46px; }
.analytics-period-summary { margin: 0 0 1rem; color: var(--muted); font-size: .8rem; text-align: right; }
.settings-shell .page-heading p { margin: .5rem 0 0; color: var(--muted); }
.settings-layout { display: grid; grid-template-columns: minmax(220px, .65fr) minmax(0, 2.35fr); gap: 1rem; align-items: start; }
.settings-navigation { padding: .65rem; display: grid; gap: .35rem; position: sticky; top: 90px; }
.settings-navigation-item { padding: .9rem; display: grid; gap: .2rem; border-radius: 10px; }
.settings-navigation-item span { color: var(--muted); font-size: .75rem; }
.settings-navigation-item.is-active { color: white; background: var(--gradient); }
.settings-navigation-item.is-active span { color: #e0f2fe; }
.settings-navigation-item.is-disabled { opacity: .55; }
.settings-content { display: grid; gap: 1rem; min-width: 0; }
.pricing-panel { min-width: 0; }
.settings-section-heading { align-items: start; }
.settings-section-heading .eyebrow { margin-bottom: .35rem; }
.settings-section-heading p { margin: .35rem 0 0; color: var(--muted); font-size: .82rem; }
.pricing-table td:first-child { display: grid; gap: .15rem; }
.pricing-table td:first-child small { color: var(--muted); }
.pricing-extra-row { background: #faf7ef; }
.price-input { min-width: 120px; display: flex; align-items: center; gap: .45rem; }
.price-input span { color: var(--muted); font-weight: 700; }
.price-input input { min-height: 40px; }
.pricing-actions { margin-top: 1rem; display: flex; justify-content: flex-end; }
.settings-card-form { display: grid; gap: 1rem; }
.opening-hours-editor { display: grid; gap: 1rem; }
.location-hours-details { overflow: hidden; background: white; border: 1px solid var(--line); border-radius: 12px; }
.location-hours-heading { padding: 1rem 1.15rem; display: flex; justify-content: space-between; align-items: center; gap: 1rem; color: white; background: var(--gradient); cursor: pointer; list-style: none; user-select: none; }
.location-hours-heading::-webkit-details-marker { display: none; }
.location-hours-heading:hover { background: var(--gradient-dark); }
.location-hours-heading h3 { margin: 0; font-size: 1.05rem; }
.location-hours-heading span { color: #e0f2fe; font-size: .72rem; font-weight: 800; text-transform: uppercase; }
.location-hours-grid { padding: .8rem; display: grid; gap: .45rem; }
.location-hours-row { padding: .7rem; display: grid; grid-template-columns: minmax(100px, .8fr) minmax(96px, .65fr) minmax(132px, 1fr) minmax(132px, 1fr); gap: .7rem; align-items: center; background: #fbfcfb; border: 1px solid var(--line); border-radius: 8px; }
.location-hours-details[open] .inventory-location-toggle::before { content: "−"; }
.location-hours-row strong { font-size: .86rem; }
.location-hours-row label:not(.check-label) { display: grid; gap: .25rem; color: var(--muted); font-size: .7rem; font-weight: 800; }
.location-hours-row input[type="time"] { min-height: 40px; }
.location-hours-row.is-closed { background: #f6f3ed; }
.location-hours-row.is-closed input[type="time"] { opacity: .55; }
.location-closed-toggle { justify-content: start; }
.loyalty-toggle { width: fit-content; padding: .75rem .9rem; background: var(--cream); border: 1px solid var(--line); border-radius: 10px; }
.bike-prices { margin-top: 1rem; padding-top: .8rem; display: grid; grid-template-columns: 1fr 1fr; gap: .35rem .8rem; border-top: 1px solid var(--line); }
.bike-prices span { display: flex; justify-content: space-between; color: var(--muted); font-size: .76rem; }
.request-only-badge { width: fit-content; margin-top: .7rem; padding: .3rem .55rem; color: #75540f; background: #fff1c9; border-radius: 99px; font-size: .7rem; font-weight: 800; }
.approval-note { margin: 0; padding: .9rem 1rem; color: #75540f; background: #fff1c9; border-radius: 10px; font-size: .82rem; }
.bike-prices strong { color: var(--ink); }
.dashboard-grid, .analytics-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr); gap: 1rem; }
.booking-calendar { min-width: 0; }
.calendar-heading { margin-bottom: 1.2rem; display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.calendar-heading .eyebrow { margin-bottom: .35rem; }
.calendar-heading h2 { margin: 0; font-size: 1.35rem; }
.calendar-heading-actions { display: flex; align-items: center; gap: .6rem; }
.calendar-block-button { min-height: 38px; padding: .5rem .8rem; font-size: .75rem; }
.calendar-navigation { display: flex; align-items: center; gap: .4rem; }
.calendar-navigation a { min-width: 38px; height: 38px; padding: 0 .65rem; display: grid; place-items: center; color: var(--forest); background: var(--cream); border-radius: 9px; font-weight: 800; }
.calendar-navigation .calendar-today { min-width: auto; font-size: .78rem; }
.calendar-days { display: grid; grid-template-columns: repeat(7, minmax(88px, 1fr)); gap: .5rem; overflow-x: auto; scrollbar-width: thin; }
.calendar-day { min-width: 88px; padding: .8rem; display: grid; gap: .15rem; color: var(--muted); background: #fafbf9; border: 1px solid var(--line); border-radius: 11px; transition: .18s ease; }
.calendar-day:hover { border-color: #a8b9ae; transform: translateY(-1px); }
.calendar-day > span:first-child { font-size: .7rem; font-weight: 800; text-transform: uppercase; }
.calendar-day > strong { color: var(--ink); font: 800 1.45rem "Manrope"; }
.calendar-day small { min-height: 2.4em; overflow: hidden; font-size: .66rem; line-height: 1.2; }
.calendar-day.is-today { box-shadow: inset 0 0 0 1px var(--green); }
.calendar-day.is-selected { color: white; background: var(--gradient); border-color: transparent; box-shadow: 0 10px 24px rgba(2,132,199,.22); }
.calendar-day.is-selected > strong, .calendar-day.is-selected small { color: white; }
.calendar-day-movements { margin-top: .35rem; display: flex; gap: .45rem; font-size: .66rem; }
.calendar-day-movements b { font-weight: 800; }
.calendar-block-count { color: #b64836; }
.calendar-day.is-selected .calendar-block-count { color: #ffc5b8; }
.calendar-detail { margin-top: 1.2rem; }
.calendar-day-panel { display: none; }
.calendar-day-panel.is-active { display: block; }
.calendar-detail-heading { margin-bottom: .8rem; display: flex; justify-content: space-between; align-items: end; gap: 1rem; }
.calendar-detail-heading span { color: var(--muted); font-size: .72rem; }
.calendar-detail-heading h3 { margin: .1rem 0 0; font-size: 1.05rem; }
.calendar-detail-heading > strong { color: var(--green); font-size: .78rem; }
.booking-agenda { display: grid; gap: .6rem; }
.availability-block-card { padding: .85rem; display: flex; justify-content: space-between; align-items: center; gap: 1rem; color: #71382e; background: #fff1ec; border: 1px solid #f2cfc5; border-radius: 11px; }
.availability-block-card > div { display: grid; }
.availability-block-card span { font-size: .65rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.availability-block-card strong { color: #71382e; }
.availability-block-card small { color: #936055; }
.availability-block-card form { flex: 0 0 auto; }
.block-delete-button { padding: .4rem .65rem; color: #8c3b32; background: white; border: 1px solid #e5bdb5; border-radius: 8px; cursor: pointer; font: 700 .72rem "DM Sans"; }
.booking-agenda-card { padding: .85rem; display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: .9rem; background: #fafbf9; border: 1px solid #edf0ed; border-radius: 11px; }
.booking-agenda-card-request { background: #fff8e6; border-color: #f1d18c; }
.booking-agenda-card-premium-request { background: #eff6ff; border-color: #bfdbfe; }
.booking-agenda-card-request .booking-time { border-color: #f1d18c; }
.booking-agenda-card-premium-request .booking-time { border-color: #bfdbfe; }
.booking-time { padding-right: .8rem; display: flex; flex-direction: column; border-right: 1px solid var(--line); }
.booking-time strong { font: 800 .95rem "Manrope"; }
.booking-time span { color: var(--muted); font-size: .7rem; }
.booking-agenda-main { min-width: 0; }
.booking-agenda-title { display: flex; justify-content: space-between; align-items: start; gap: .8rem; }
.booking-agenda-title h3 { margin: 0; font-size: .95rem; }
.booking-agenda-title > div span { color: var(--muted); font-size: .7rem; }
.booking-agenda-main p { margin: .45rem 0; font-size: .76rem; }
.booking-agenda-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; color: var(--muted); font-size: .68rem; }
.booking-agenda-edit { margin-left: auto; color: var(--green); font-weight: 800; }
.movement { padding: .2rem .45rem; color: #35516c; background: #e5eef6; border-radius: 99px; font-weight: 800; }
.movement-pickup { color: #20603e; background: #e2f2e8; }
.movement-return { color: #75540f; background: #fff1c9; }
.calendar-empty { padding: 2.2rem 1rem; display: grid; gap: .25rem; color: var(--muted); background: #fafbf9; border: 1px dashed #cbd5ce; border-radius: 11px; text-align: center; }
.calendar-empty strong { color: var(--ink); }
.calendar-empty span { font-size: .78rem; }
.monthly-booking-calendar { margin-top: 1.5rem; }
.monthly-calendar-weekdays, .monthly-calendar-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.monthly-calendar-weekdays { color: var(--muted); font-size: .68rem; font-weight: 800; text-align: center; text-transform: uppercase; }
.monthly-calendar-weekdays span { padding: .45rem; }
.monthly-calendar-grid { overflow: hidden; border: 1px solid var(--line); border-radius: 12px; }
.monthly-calendar-day { min-height: 100px; padding: .65rem; display: flex; flex-direction: column; gap: .22rem; color: var(--ink); background: white; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.monthly-calendar-day:nth-child(7n) { border-right: 0; }
.monthly-calendar-day > span { font: 800 .9rem "Manrope"; }
.monthly-calendar-day strong { margin-top: auto; color: var(--green); font-size: .75rem; }
.monthly-calendar-day small { color: var(--muted); font-size: .68rem; }
.monthly-calendar-day.is-outside-month { color: #9aa39d; background: #f7f8f6; }
.monthly-calendar-day.is-today { box-shadow: inset 0 0 0 2px var(--green); }
.analytics-grid { grid-template-columns: minmax(0, 2.3fr) minmax(300px, 1fr); }
.panel { padding: 1.3rem; background: white; border: 1px solid var(--line); border-radius: 14px; }
.panel-heading { margin-bottom: 1rem; display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.panel-heading h2 { margin: 0; font-size: 1.1rem; }
.panel-heading span, .panel-heading a { color: var(--muted); font-size: .78rem; }
.account-profile-form { display: grid; gap: .9rem; max-width: 760px; }
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th, td { padding: .85rem .65rem; border-bottom: 1px solid #edf0ed; text-align: left; white-space: nowrap; }
th { color: var(--muted); font-size: .7rem; text-transform: uppercase; letter-spacing: .07em; }
td { font-size: .85rem; }
td select { min-height: 36px; padding: .35rem .5rem; }
.booking-edit-link { min-height: 36px; padding: .35rem .7rem; font-size: .75rem; }
.booking-actions { display: flex; gap: .4rem; }
.status { padding: .28rem .55rem; border-radius: 99px; font-size: .68rem; font-weight: 800; text-transform: uppercase; }
.status-pending { color: #7b5312; background: #fff1c9; }
.status-premium-request { color: #1d4ed8; background: #dbeafe; }
.status-confirmed { color: #20603e; background: #e2f2e8; }
.status-picked_up { color: #75540f; background: #fff1c9; }
.status-completed { color: #35516c; background: #e5eef6; }
.status-cancelled { color: #8c3b32; background: #f8e5e2; }
.customer-badge { width: fit-content; margin-left: .35rem; padding: .18rem .45rem; color: var(--green); background: #e0f2fe; border-radius: 99px; font-size: .65rem; font-weight: 800; text-transform: uppercase; white-space: nowrap; }
.stock-group { margin-top: 1.2rem; }
.stock-row { padding: .7rem 0; display: flex; justify-content: space-between; border-bottom: 1px solid #edf0ed; }
.stock-row span { color: var(--muted); }
.filter-bar { margin-bottom: 1rem; display: grid; grid-template-columns: minmax(240px, 1fr) 220px 220px auto; gap: .7rem; }
.booking-sections, .booking-day-list { display: grid; gap: 1rem; }
.booking-sections { gap: 1.5rem; }
.booking-period { display: grid; gap: .75rem; }
.booking-period-heading, .booking-day-heading { display: flex; justify-content: space-between; align-items: end; gap: 1rem; }
.booking-period-heading h2, .booking-day-heading h3 { margin: 0; }
.booking-period-heading h2 { font-size: 1.35rem; }
.booking-period-heading > span, .booking-day-heading span { color: var(--muted); font-size: .76rem; }
.booking-day { padding: 0; overflow: hidden; }
.booking-day-today { border-color: rgba(32,96,62,.35); box-shadow: 0 12px 34px rgba(32,96,62,.08); }
.booking-day-heading { padding: .9rem 1.3rem; background: #fafbf9; border-bottom: 1px solid var(--line); }
.booking-day-heading h3 { font-size: 1rem; }
.booking-day .table-wrap { padding: 0 .65rem; }
.booking-history { overflow: hidden; background: #f4f6f3; border: 1px solid var(--line); border-radius: 14px; }
.booking-history > summary { padding: 1rem 1.25rem; display: flex; justify-content: space-between; align-items: center; gap: 1rem; cursor: pointer; list-style: none; }
.booking-history > summary::-webkit-details-marker { display: none; }
.booking-history > summary > span:first-child { display: grid; }
.booking-history > summary strong { font-size: 1.15rem; }
.booking-history-toggle { color: var(--green); font-size: .76rem; font-weight: 800; }
.booking-history[open] .booking-history-toggle { font-size: 0; }
.booking-history[open] .booking-history-toggle::after { content: "−"; font-size: 1.25rem; }
.booking-history > .booking-day-list { padding: 0 1rem 1rem; }
.inventory-location { margin-bottom: 1.5rem; overflow: hidden; background: white; border: 1px solid var(--line); border-radius: 16px; }
.inventory-location-heading { padding: 1.2rem 1.4rem; display: flex; justify-content: space-between; align-items: center; gap: 1rem; color: white; background: var(--gradient); cursor: pointer; list-style: none; user-select: none; }
.inventory-location-heading::-webkit-details-marker { display: none; }
.inventory-location-heading:hover { background: var(--gradient-dark); }
.inventory-location-heading:focus-visible { outline: 3px solid rgba(125,211,252,.9); outline-offset: -3px; }
.inventory-location-heading h2 { margin: 0; font-size: 1.35rem; }
.inventory-location-heading span { color: #e0f2fe; font-size: .8rem; }
.inventory-location-toggle { width: 34px; height: 34px; flex: 0 0 auto; display: grid; place-items: center; background: rgba(255,255,255,.1); border-radius: 50%; }
.inventory-location-toggle::before { content: "+"; color: white; font: 700 1.35rem/1 "Manrope"; transition: transform .2s ease; }
.inventory-location[open] .inventory-location-toggle::before { content: "−"; }
.inventory-list { display: grid; }
.inventory-model { padding: 1.25rem 1.4rem; display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 1.5rem; border-bottom: 1px solid var(--line); }
.inventory-model:last-child { border-bottom: 0; }
.inventory-model-header h3 { margin-bottom: 1rem; font-size: 1.25rem; }
.inventory-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; }
.inventory-metrics div { padding: .65rem; display: grid; gap: .1rem; background: var(--cream); border-radius: 8px; }
.inventory-metrics span { color: var(--muted); font-size: .62rem; text-transform: uppercase; }
.inventory-metrics strong { font: 800 1.2rem "Manrope"; }
.size-table { min-width: 0; }
.size-table-head, .size-table-row { display: grid; grid-template-columns: 90px 100px minmax(180px, 1fr) 150px; gap: .8rem; align-items: center; }
.size-table-head.staff-size-table, .size-table-row.staff-size-table { grid-template-columns: 90px 1fr 150px; }
.size-table-head { padding: 0 .6rem .55rem; color: var(--muted); font-size: .68rem; font-weight: 700; text-transform: uppercase; }
.size-table-row { min-height: 58px; padding: .55rem .6rem; border-top: 1px solid #edf0ed; }
.size-edit-form { display: grid; grid-template-columns: 90px auto; gap: .5rem; }
.size-edit-form input { min-height: 38px; padding: .35rem .5rem; }
.size-edit-form .button, .size-table-row .button { min-height: 38px; padding: .38rem .7rem; }
.read-only-value, .unavailable-label { color: var(--muted); font-size: .78rem; }
.maintenance-dialog { width: min(480px, calc(100vw - 32px)); padding: 0; border: 0; border-radius: 16px; box-shadow: 0 30px 90px rgba(0,0,0,.25); }
.availability-block-dialog { width: min(500px, calc(100vw - 32px)); padding: 0; border: 0; border-radius: 16px; box-shadow: 0 30px 90px rgba(0,0,0,.25); }
.status-confirm-dialog { width: min(460px, calc(100vw - 32px)); padding: 0; border: 0; border-radius: 18px; box-shadow: 0 30px 90px rgba(0,0,0,.28); }
.status-confirm-dialog::backdrop { background: rgba(12,30,20,.62); backdrop-filter: blur(4px); }
.status-confirm-card { padding: 1.7rem; display: grid; gap: 1.15rem; }
.status-confirm-card .eyebrow { margin-bottom: .3rem; }
.status-confirm-card h2 { margin-bottom: .35rem; font-size: 1.45rem; }
.status-confirm-card p { margin: 0; }
.status-confirm-icon { width: 42px; height: 42px; display: grid; place-items: center; color: white; background: var(--gradient); border-radius: 12px; font-size: 1.25rem; }
.status-change-preview { padding: .9rem 1rem; display: grid; grid-template-columns: 1fr auto 1fr; gap: .8rem; align-items: center; background: var(--cream); border-radius: 11px; text-align: center; }
.status-change-preview span { color: var(--muted); font-weight: 700; }
.status-change-preview b { color: var(--accent); }
.status-change-preview strong { color: var(--forest); }
.availability-block-dialog::backdrop { background: rgba(12, 30, 20, .58); backdrop-filter: blur(3px); }
.availability-block-dialog form { padding: 1.6rem; display: grid; gap: 1rem; }
.availability-block-dialog .eyebrow { margin-bottom: .35rem; }
.availability-block-dialog h2 { font-size: 1.45rem; }
.block-date-grid, .block-time-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; }
.maintenance-dialog::backdrop { background: rgba(12, 30, 20, .58); backdrop-filter: blur(3px); }
.maintenance-dialog form { padding: 1.6rem; display: grid; gap: 1.2rem; }
.maintenance-dialog textarea { width: 100%; padding: .8rem; resize: vertical; border: 1px solid var(--line); border-radius: 10px; font: inherit; }
.dialog-heading p { margin: 0; }
.dialog-actions { display: flex; justify-content: flex-end; gap: .65rem; }
.onsite-shell { max-width: 1050px; }
.onsite-rental-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: .7rem; }
.return-shell { max-width: 1000px; }
.booking-edit-shell { max-width: 1100px; }
.booking-edit-form { display: grid; gap: 1rem; }
.booking-edit-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
.booking-notes { margin-top: .8rem; }
.booking-notes textarea { width: 100%; padding: .8rem; border: 1px solid var(--line); border-radius: 10px; resize: vertical; font: inherit; }
.booking-edit-riders { display: grid; gap: .7rem; }
.booking-edit-rider { padding: .9rem; display: grid; grid-template-columns: 70px minmax(180px, 1fr) minmax(140px, .7fr) minmax(130px, .55fr); gap: .75rem; align-items: end; background: #fafbf9; border: 1px solid var(--line); border-radius: 11px; }
.booking-edit-rider > strong { align-self: center; }
.booking-edit-rider .rider-extras { grid-column: 2 / -1; }
.assigned-size-info { min-height: 58px; padding: .55rem .7rem; display: grid; align-content: center; gap: .1rem; background: var(--cream); border-radius: 9px; }
.assigned-size-info span { color: var(--muted); font-size: .68rem; font-weight: 700; text-transform: uppercase; }
.assigned-size-info strong { color: var(--green); }
.substitution-reminder { margin-top: .25rem; display: block; color: #9a4f0b; font-size: .7rem; font-weight: 800; }
.return-timing { padding: 1rem; display: flex; justify-content: space-between; align-items: center; gap: 1rem; background: #f4f6f3; border: 1px solid var(--line); border-radius: 11px; }
.return-timing div { display: grid; gap: .2rem; }
.return-timing span, .return-timing p { color: var(--muted); font-size: .76rem; }
.return-timing p { margin: 0; }
.return-form { display: grid; gap: 1rem; }
.return-charge-edit { padding: 1rem; display: grid; gap: .35rem; background: #fff7e9; border: 1px solid #efd5a2; border-radius: 11px; }
.return-charge-edit label { display: grid; gap: .35rem; margin: 0; }
.return-charge-edit label span { color: var(--muted); font-size: .76rem; font-weight: 700; }
.return-charge-edit input { max-width: 220px; font-size: 1.15rem; font-weight: 800; color: var(--accent); }
.return-charge-edit small { color: var(--muted); font-size: .76rem; }
.return-list { display: grid; gap: .8rem; }
.return-row { padding: 1rem; display: grid; grid-template-columns: 1.2fr auto 1.4fr; gap: 1rem; align-items: end; background: #fafbf9; border: 1px solid var(--line); border-radius: 12px; }
.return-row > div { display: grid; }
.return-row > div span { color: var(--muted); font-size: .8rem; }
.return-summary-shell { max-width: 900px; }
.return-summary-card { display: grid; gap: 1.4rem; }
.return-summary-heading { display: flex; align-items: center; gap: 1rem; }
.return-summary-heading .confirmation-mark { width: 52px; height: 52px; margin: 0; flex: 0 0 auto; font-size: 1.35rem; }
.return-summary-heading h2, .return-summary-heading p { margin: 0; }
.return-summary-heading p { color: var(--muted); }
.return-summary-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
.return-summary-grid > div { padding: 1rem; display: grid; gap: .25rem; background: #fafbf9; border: 1px solid var(--line); border-radius: 11px; }
.return-summary-grid span, .return-summary-grid small { color: var(--muted); font-size: .76rem; }
.return-summary-grid strong { font-size: 1.1rem; }
.return-summary-grid .return-charge { background: #fff7e9; border-color: #efd5a2; }
.return-summary-grid .return-charge strong { color: var(--accent); font-size: 1.6rem; }
.provisional-rate-note { padding: 1rem; background: #f4f6f3; border-radius: 11px; }
.provisional-rate-note p { margin: .25rem 0 0; color: var(--muted); font-size: .82rem; }
.return-summary-actions { display: flex; justify-content: flex-end; }
.maintenance-check { display: flex; align-items: center; gap: .5rem; padding-bottom: .75rem; }
.maintenance-check input { width: 18px; min-height: auto; }
.maintenance-summary { margin-bottom: 1rem; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .8rem; }
.chart-panel { min-height: 410px; }
.chart-panel canvas { max-height: 330px; }
.location-performance { padding: 1rem 0; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--line); }
.location-performance div { display: grid; }
.location-performance span { color: var(--muted); font-size: .8rem; }
.admin-users { margin-top: 1.5rem; padding: 1rem; display: flex; justify-content: space-between; background: var(--cream); border-radius: 10px; }
.staff-users-table { margin-top: 1rem; }
.log-panel { display: grid; gap: 1rem; }
.log-filter { display: grid; grid-template-columns: 150px minmax(220px, 320px) auto; gap: .7rem; align-items: end; }
.log-filter label { display: grid; gap: .3rem; color: var(--muted); font-size: .72rem; font-weight: 700; }
.log-filter .button { min-height: 46px; }
.log-table td:nth-child(2) { display: grid; gap: .15rem; }
.log-table small { color: var(--muted); }
.log-area { padding: .25rem .5rem; color: var(--green); background: #e2f2e8; border-radius: 99px; font-size: .68rem; font-weight: 800; text-transform: uppercase; }
.presence-grid { margin-bottom: 1rem; display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.presence-export-actions { display: flex; gap: .7rem; }
.presence-active-row, .presence-summary-row { padding: .85rem 0; display: flex; justify-content: space-between; gap: 1rem; border-bottom: 1px solid var(--line); }
.presence-active-row div, .presence-summary-row div { display: grid; gap: .15rem; }
.presence-active-row span, .presence-summary-row span, .presence-table small { color: var(--muted); font-size: .76rem; }
.presence-adjustment-panel { margin-bottom: 1rem; }
.presence-adjustment-form { display: grid; grid-template-columns: repeat(5, minmax(130px, 1fr)) auto; gap: .7rem; align-items: end; }
.presence-adjustment-form label { display: grid; gap: .3rem; color: var(--muted); font-size: .72rem; font-weight: 700; }
.presence-adjustment-form .button { min-height: 46px; }
.presence-table td:nth-child(2) { display: grid; gap: .12rem; }
.consent-analytics { margin-top: 1rem; padding: 1.3rem; background: white; border: 1px solid var(--line); border-radius: 14px; }
.consent-analytics .panel-heading { align-items: end; }
.consent-analytics .panel-heading h2 { margin-top: .25rem; }
.consent-heading-actions { display: flex; align-items: end; gap: .7rem; }
.consent-heading-actions > .button { min-height: 46px; }
.consent-export-dialog { width: min(520px, calc(100vw - 32px)); padding: 0; border: 0; border-radius: 16px; box-shadow: 0 30px 90px rgba(0,0,0,.28); }
.consent-export-dialog::backdrop { background: rgba(12,30,20,.62); backdrop-filter: blur(4px); }
.consent-export-dialog form { padding: 1.6rem; display: grid; gap: 1.2rem; }
.consent-export-dialog h2 { margin: .3rem 0; font-size: 1.4rem; }
.consent-export-dialog label { display: grid; gap: .4rem; font-weight: 700; }
.consent-export-options { padding: 1rem; display: grid; gap: .75rem; border: 1px solid var(--line); border-radius: 10px; }
.consent-export-options legend { padding: 0 .35rem; font-weight: 700; }
.consent-export-options label { display: flex; align-items: center; gap: .55rem; }
.consent-export-options input { width: 18px; min-height: 18px; }
.consent-filter label { display: grid; gap: .3rem; color: var(--muted); font-size: .72rem; font-weight: 700; }
.consent-filter select { min-width: 240px; }
.registered-filter { display: grid; grid-template-columns: minmax(220px, 320px) auto; gap: .7rem; align-items: end; }
.registered-filter label { display: grid; gap: .3rem; color: var(--muted); font-size: .72rem; font-weight: 700; }
.registered-filter .button { min-height: 46px; }
.consent-kpis { margin-bottom: 1rem; display: grid; grid-template-columns: repeat(3, 1fr); gap: .7rem; }
.consent-kpis > div { padding: 1rem; display: grid; gap: .25rem; background: var(--cream); border-radius: 10px; }
.consent-kpis span { color: var(--muted); font-size: .75rem; }
.consent-kpis strong { font: 800 1.5rem "Manrope"; }
.consent-table td:first-child { display: grid; gap: .15rem; }
.consent-table td:first-child small { color: var(--muted); }
.consent-table a { color: var(--green); text-decoration: underline; text-underline-offset: 2px; }
.consent-status { padding: .28rem .5rem; border-radius: 99px; font-size: .67rem; font-weight: 800; text-transform: uppercase; }
.consent-yes { color: #20603e; background: #e2f2e8; }
.consent-no { color: #8c3b32; background: #f8e5e2; }
.consent-unknown { color: #666; background: #ecefec; }
.consent-pagination { margin-top: 1rem; display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.consent-pagination > span { color: var(--muted); font-size: .78rem; }
.consent-pagination > div { display: flex; gap: .5rem; }
.consent-pagination .button { min-height: 36px; padding: .4rem .7rem; font-size: .74rem; }
.flash-stack { width: min(700px, 90vw); position: fixed; top: 86px; left: 50%; z-index: 30; transform: translateX(-50%); }
.flash { margin-bottom: .5rem; padding: .9rem 1rem; background: white; border-left: 4px solid var(--green); border-radius: 8px; box-shadow: var(--shadow); opacity: 1; transform: translateY(0); transition: opacity .25s ease, transform .25s ease; }
.flash.is-hiding { opacity: 0; transform: translateY(-8px); pointer-events: none; }
.flash-danger { border-color: #b64836; }
.flash-warning { border-color: #d59a20; }
.flash-booking-unavailable { display: grid; gap: .55rem; }
.flash-booking-unavailable span { color: var(--muted); font-size: .82rem; }
.flash-booking-unavailable .button { width: fit-content; min-height: 36px; padding: .45rem .75rem; font-size: .76rem; }
.button-whatsapp { color: white; background: #1f9d55; border-color: #1f9d55; }
.agreement-toolbar { width: min(210mm, calc(100vw - 32px)); margin: 1.5rem auto; display: flex; justify-content: flex-end; gap: .7rem; }
.rental-agreement { width: 210mm; min-height: 297mm; margin: 0 auto 2rem; padding: 13mm 14mm; color: #111; background: white; box-shadow: 0 12px 45px rgba(15,47,31,.14); }
.agreement-header { padding-bottom: 4mm; display: flex; justify-content: space-between; align-items: start; border-bottom: 2px solid #1f593c; }
.agreement-header > div { display: grid; gap: 1mm; }
.agreement-header > div:first-child strong { color: #1f593c; font: 800 17pt "Manrope"; }
.agreement-header span { font-size: 8.5pt; }
.agreement-reference { text-align: right; }
.agreement-reference strong { font-size: 12pt; }
.rental-agreement h1 { margin: 5mm 0 4mm; font-size: 15pt; text-align: center; text-transform: uppercase; }
.agreement-terms { font-size: 8.1pt; line-height: 1.28; }
.agreement-terms .rental-terms ol { gap: 1.2mm; padding-left: 5mm; }
.agreement-terms .rental-delay-rule { margin: 3mm 0 0; padding: 2.5mm; text-align: center; border: 1px solid #999; border-radius: 0; }
.agreement-details { margin-top: 4mm; }
.agreement-details h2 { margin: 0 0 2.5mm; font-size: 11pt; }
.agreement-fields { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid #888; border-left: 1px solid #888; }
.agreement-fields > div { min-height: 12mm; padding: 2mm 2.5mm; display: grid; align-content: center; gap: 1mm; border-right: 1px solid #888; border-bottom: 1px solid #888; }
.agreement-fields span, .agreement-signatures span { color: #444; font-size: 7.5pt; text-transform: uppercase; }
.agreement-fields strong { font-size: 9pt; }
.agreement-wide { grid-column: 1 / -1; }
.agreement-notes { min-height: 15mm !important; }
.agreement-acceptance { margin-top: 4mm; font-size: 8.5pt; }
.agreement-acceptance p { margin: 0 0 5mm; }
.agreement-signatures { display: grid; grid-template-columns: .65fr 1.35fr; gap: 10mm; }
.agreement-signatures > div { min-height: 12mm; padding-top: 2mm; }
.agreement-signatures strong { display: block; margin-top: 2mm; }
.signature-line { display: flex; align-items: flex-end; border-bottom: 1px solid #222; }
.agreement-handover { margin-top: 9mm; grid-template-columns: 1fr 1fr; }
.agreement-consents { margin-top: 4mm; display: grid; gap: 1.5mm; font-size: 7.2pt; line-height: 1.22; }
.agreement-consents p { margin: 0; }
.agreement-consents p > strong { width: 3mm; height: 3mm; display: inline-grid; place-items: center; border: 1px solid #222; font-size: 6.5pt; line-height: 1; }
.consent-signature { width: 60%; min-height: 8mm; margin-left: auto; }

@media print {
  @page { size: A4; margin: 0; }
  body { background: white; }
  .site-header, .site-footer, .agreement-toolbar, .flash-stack { display: none !important; }
  main { padding: 0; }
  .rental-agreement { width: 210mm; height: 297mm; min-height: 0; margin: 0; padding: 7mm 10mm; overflow: hidden; box-shadow: none; }
  .agreement-header { padding-bottom: 2mm; }
  .agreement-header > div:first-child strong { font-size: 13pt; }
  .rental-agreement h1 { margin: 2.5mm 0 2mm; font-size: 12pt; }
  .agreement-terms { font-size: 6.6pt; line-height: 1.12; }
  .agreement-terms .rental-terms ol { gap: .45mm; padding-left: 4mm; }
  .agreement-terms .rental-delay-rule { margin-top: 1.5mm; padding: 1.5mm; }
  .agreement-details { margin-top: 2mm; }
  .agreement-details h2 { margin-bottom: 1.2mm; font-size: 9pt; }
  .agreement-fields > div { min-height: 8mm; padding: 1mm 2mm; }
  .agreement-fields span, .agreement-signatures span { font-size: 6.2pt; }
  .agreement-fields strong { font-size: 7.5pt; }
  .agreement-notes { min-height: 9mm !important; }
  .agreement-acceptance { margin-top: 2mm; font-size: 7pt; }
  .agreement-acceptance > p { margin-bottom: 2mm; }
  .agreement-signatures > div { min-height: 7mm; padding-top: 1mm; }
  .agreement-consents { margin-top: 2mm; gap: .8mm; font-size: 6.1pt; line-height: 1.12; }
  .agreement-consents p > strong { width: 2.6mm; height: 2.6mm; font-size: 5.5pt; }
  .consent-signature { min-height: 6mm; }
  .agreement-handover { margin-top: 3mm; }
}

@media (prefers-reduced-motion: reduce) {
  .flash { transition: none; }
}

@media screen and (max-width: 850px) {
  .agreement-toolbar { width: calc(100vw - 24px); }
  .rental-agreement { width: calc(100vw - 24px); padding: 8mm; }
}

@media (max-width: 900px) {
  .site-header { gap: .8rem; }
  .site-header nav { gap: .6rem; }
  .desktop-nav-item, .desktop-nav-form { display: none; }
  .mobile-nav-menu { display: block; }
  .hero, .about-section, .locations-band, .availability-card, .dashboard-grid, .analytics-grid, .settings-layout, .cycle-route-shell, .premium-hero { grid-template-columns: 1fr; }
  .about-heading { position: static; }
  .settings-navigation { position: static; grid-template-columns: repeat(3, 1fr); }
  .time-clock-status { align-items: start; flex-direction: column; }
  .time-clock-form { width: 100%; grid-template-columns: 1fr; }
  .presence-grid { grid-template-columns: 1fr; }
  .presence-adjustment-form { grid-template-columns: 1fr 1fr; }
  .hero { padding-top: 4rem; }
  .card-grid { grid-template-columns: 1fr 1fr; }
  .premium-band { align-items: stretch; flex-direction: column; }
  .premium-bike-choice { grid-template-columns: 250px minmax(0, 1fr) 112px; }
  .premium-bike-actions { width: 104px; }
  .premium-request-heading { grid-template-columns: 1fr; }
  .premium-status-form, .premium-status-field { width: 100%; }
  .premium-request-details { grid-template-columns: 1fr 1fr; }
  .reviews-track { grid-auto-columns: 78%; }
  .inventory-model { grid-template-columns: 1fr; }
  .kpi-grid { grid-template-columns: 1fr 1fr; }
  .maintenance-summary { grid-template-columns: 1fr 1fr; }
  .return-row { grid-template-columns: 1fr; align-items: start; }
  .return-summary-grid { grid-template-columns: 1fr; }
  .consent-analytics .panel-heading { align-items: start; flex-direction: column; }
  .consent-heading-actions { width: 100%; align-items: stretch; flex-direction: column-reverse; }
  .consent-heading-actions > .button { width: fit-content; }
  .analytics-filter-bar { grid-template-columns: 1fr 1fr; }
  .cycle-route-hero { align-items: start; flex-direction: column; }
  .cycle-route-hero .button { width: fit-content; }
  .route-network-summary, .route-index-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 600px) {
  .form-grid, .card-grid, .summary-card, .customer-form, .filter-bar, .dashboard-location-filter, .premium-bike-grid, .premium-request-details, .quote-line-grid { grid-template-columns: 1fr; }
  .premium-hero { min-height: auto; padding: 3.5rem 22px; }
  .premium-showcase { width: 88vw; padding: 3.5rem 0 7rem; }
  .premium-bike-option { grid-template-columns: 1fr; }
  .premium-bike-choice { grid-template-columns: 1fr; grid-template-rows: auto; }
  .premium-bike-media { height: 180px; }
  .premium-bike-actions { width: auto; grid-template-columns: 1fr 1fr; justify-items: start; padding-left: 0; border-left: 0; border-top: 1px solid rgba(186,230,253,.12); padding-top: .6rem; }
  .premium-bike-action { text-align: left; }
  .size-guide-row { grid-template-columns: 1fr; gap: .45rem; }
  .premium-request-bar { align-items: stretch; flex-direction: column; }
  .premium-request-bar .button { width: 100%; }
  .reviews-heading { align-items: start; flex-direction: column; }
  .reviews-rating { justify-items: start; }
  .reviews-track { grid-auto-columns: 92%; }
  .review-card { min-height: 360px; }
  .location-card-heading { display: grid; gap: .8rem; }
  .location-card a { width: fit-content; }
  .opening-hours dl { grid-template-columns: 1fr; }
  .site-header { padding: 0 18px; }
  .availability-summary { grid-template-columns: 1fr 1fr; }
  .customer-details-grid, .phone-fields, .bike-request-row { grid-template-columns: 1fr; }
  .rider-extras { grid-column: 1; }
  .size-table-head { display: none; }
  .size-table-row { grid-template-columns: 50px 1fr; gap: .55rem; }
  .size-edit-form, .size-table-row > div { grid-column: 1 / -1; }
  .onsite-rental-grid { grid-template-columns: 1fr 1fr; }
  .height-fields { grid-template-columns: 1fr; }
  .booking-edit-grid, .booking-edit-rider { grid-template-columns: 1fr; }
  .booking-edit-rider .rider-extras { grid-column: 1; }
  .monthly-calendar-grid { overflow-x: auto; grid-template-columns: repeat(7, minmax(92px, 1fr)); }
  .monthly-calendar-weekdays { grid-template-columns: repeat(7, minmax(92px, 1fr)); overflow: hidden; }
  .hero { min-height: auto; padding: 3.5rem 22px; }
  .hero-route-actions { display: grid; }
  .hero-route-button { width: 100%; min-width: 0; }
  .hero-route-more { width: fit-content; }
  .section, .page-shell { width: 88vw; padding: 3.5rem 0; }
  .about-section { width: 88vw; padding-bottom: 3.5rem; gap: 1.5rem; }
  .cycle-route-hero { padding: 3.5rem 22px; }
  .cycle-route-shell { width: 88vw; padding: 3rem 0; }
  .cycle-route-map { min-height: 430px; }
  .route-overview { padding: .6rem; }
  .route-overview svg { height: 430px; min-height: 430px; }
  .route-network-summary { grid-template-columns: 1fr; }
  .route-marker-caption { font-size: 20px; }
  .cycle-map-heading { align-items: start; flex-direction: column; }
  .cycle-points-section, .route-index-section { width: 88vw; padding-bottom: 3rem; }
  .route-index-grid { grid-template-columns: 1fr; }
  .cycle-point-grid { grid-template-columns: 1fr; }
  .page-heading { align-items: start; flex-direction: column; }
  .calendar-heading { align-items: start; }
  .calendar-heading-actions { align-items: flex-end; flex-direction: column; }
  .calendar-days { margin-right: -1.3rem; padding-right: 1.3rem; }
  .calendar-day { min-width: 108px; }
  .calendar-detail-heading { align-items: start; flex-direction: column; gap: .25rem; }
  .booking-agenda-card { grid-template-columns: 52px minmax(0, 1fr); gap: .65rem; }
  .booking-agenda-title { align-items: start; flex-direction: column; gap: .35rem; }
  .booking-period-heading, .booking-day-heading { align-items: start; flex-direction: column; gap: .25rem; }
  .booking-history > summary { align-items: start; }
  .availability-block-card { align-items: start; flex-direction: column; }
  .block-date-grid, .block-time-grid { grid-template-columns: 1fr; }
  .kpi-grid { gap: .6rem; }
  .kpi-card strong { font-size: 1.5rem; }
  .availability-card { gap: 1.5rem; }
  .site-footer { flex-direction: column; gap: .8rem; }
  .site-footer nav { display: flex; }
  .settings-navigation { grid-template-columns: 1fr; }
  .location-hours-heading { align-items: start; flex-direction: column; gap: .15rem; }
  .location-hours-row { grid-template-columns: 1fr; }
  .log-filter { grid-template-columns: 1fr; }
  .consent-kpis { grid-template-columns: 1fr; }
  .consent-filter, .consent-filter select, .registered-filter { width: 100%; }
  .registered-filter { grid-template-columns: 1fr; }
  .consent-pagination { align-items: start; flex-direction: column; }
  .analytics-filter-bar { grid-template-columns: 1fr; }
  .presence-adjustment-form { grid-template-columns: 1fr; }
  .analytics-period-summary { text-align: left; }
}