:root { color-scheme: dark; font-family: Inter, ui-sans-serif, system-ui, sans-serif; background: #080a11; color: #f7fafc; }
* { box-sizing: border-box; }
body { min-height: 100svh; margin: 0; background: radial-gradient(ellipse 70% 38% at 50% 47%, #26364a 0%, #131b27 35%, transparent 73%), linear-gradient(125deg, #080910, #141925 54%, #090a11); }
.route-choice { display: none; min-height: 100svh; padding: 34px; flex-direction: column; justify-content: center; gap: 15px; text-align: center; }.route-choice p { margin: 0 0 14px; color: #a6b9c8; font-size: .75rem; font-weight: 800; letter-spacing: .16em; }.route-button { display: block; width: min(100%, 420px); margin: 0 auto; padding: 23px; border: 1px solid #ffffff16; border-radius: 22px; color: #f4f7fa; background: #1b202aa8; box-shadow: inset 0 1px #ffffff0a, 0 12px 30px #0004; font-size: 1.3rem; font-weight: 750; text-decoration: none; }.route-button:active { transform: scale(.98); }.choose-route .route-choice { display: flex; }.choose-route .app-shell { display: none; }
button, input, select { font: inherit; }
button { cursor: pointer; }
.app-shell { width: min(100%, 520px); min-height: 100svh; margin: auto; padding: 36px 34px 34px; display: flex; flex-direction: column; align-items: center; }
.topbar { width: 100%; display: flex; align-items: center; justify-content: space-between; }
.eyebrow { margin: 0 0 6px; font-size: .7rem; letter-spacing: .16em; font-weight: 750; color: #9ab2c5; }
h1, h2, p { margin-top: 0; } h1 { margin-bottom: 0; font-size: clamp(1.6rem, 4vw, 2.35rem); letter-spacing: -.045em; } h2 { margin-bottom: 0; }.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.calendar-button, .menu-button { width: 66px; height: 66px; border: 1px solid #ffffff16; border-radius: 21px; color: #d5d8df; background: #181a22a8; box-shadow: inset 0 1px #ffffff0a, 0 12px 30px #0003; }.calendar-button svg { width: 30px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }.menu-button { width: 45px; height: 45px; border: 0; background: transparent; box-shadow: none; display: grid; align-content: center; gap: 9px; padding: 0; }.menu-button span { width: 32px; height: 3px; border-radius: 9px; background: #d5d8df; }.save-button { border: 0; border-radius: 999px; color: #10202b; background: #d2f1ff; padding: 12px 17px; font-weight: 800; }
.car-card { width: 100%; display: flex; flex: 1; flex-direction: column; align-items: center; justify-content: center; transform: translateY(-32px); }.car-art { width: calc(100% + 20px); height: min(47vw, 380px); margin-top: clamp(60px, 12vh, 145px); display: grid; place-items: center; }.car-art img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 22px 22px #0008); }
.car-details { width: 100%; padding: 26px 0 18px; text-align: center; }.car-type { margin-bottom: 16px; color: #c3c3cd; font-weight: 350; font-size: clamp(1rem, 3vw, 1.35rem); }.car-details h2 { margin: 0; font-size: clamp(3rem, 12vw, 5.2rem); line-height: 1; letter-spacing: .035em; text-shadow: 0 4px 20px #0008; }.driver-row { margin-top: 34px; display: flex; justify-content: center; gap: 8px; color: #c1c1ca; font-size: 1.05rem; }.driver-row strong { color: #fff; }
.location-status { margin: 19px 0 0; color: #9ccde3; font-size: .88rem; }
dialog { width: min(100% - 24px, 520px); border: 1px solid #ffffff21; border-radius: 22px; padding: 22px; color: #eef6fa; background: #18242eeF; box-shadow: 0 25px 80px #000a; } dialog::backdrop { background: #071016a8; backdrop-filter: blur(4px); }.dialog-head, .month-nav { display: flex; align-items: center; justify-content: space-between; gap: 16px; }.dialog-head h2 { font-size: 1.45rem; }.icon-button { width: 38px; height: 38px; border: 0; border-radius: 50%; color: #e8f5fa; background: #ffffff12; font-size: 1.8rem; line-height: 1; }.menu-dialog p:not(.eyebrow) { color: #c8d5dd; }.month-nav { margin: 25px 0 17px; }.month-nav strong { text-transform: capitalize; }.weekdays, .calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }.weekdays { margin-bottom: 6px; color: #8ea7b8; text-align: center; font-size: .7rem; }.day { aspect-ratio: 1; border: 0; border-radius: 11px; color: #d8e7ef; background: transparent; font-weight: 700; }.day:hover { background: #ffffff16; }.day.today { outline: 1px solid #a9e5ff; }.day.exception { background: #5ea6c61f; color: #b8edff; box-shadow: inset 0 0 0 1px #85d7f155; }.day.empty { pointer-events: none; }.calendar-help { margin: 18px 0 0; color: #9ab2c5; font-size: .82rem; text-align: center; }
.edit-dialog form { display: grid; gap: 15px; }.selected-date { margin-bottom: 4px; color: #a6c6d6; } label { display: grid; gap: 7px; color: #c3d6e1; font-size: .85rem; font-weight: 700; } input, select { width: 100%; border: 1px solid #ffffff24; border-radius: 11px; padding: 11px 12px; color: #f5fbff; background: #0d161e; }.form-actions { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 8px; }.delete-button { border: 0; background: transparent; color: #f2a4a4; padding: 10px 2px; }.save-button { padding: 11px 17px; }
@media (max-width: 500px) { .app-shell { padding: 36px 34px 34px; }.car-art { height: 54vw; margin-top: 10vh; }.car-details h2 { font-size: clamp(3rem, 13vw, 4.5rem); } }