/* Reference-inspired editorial colour, glass and sculptural forms. */
:root { --sea: #6650c9; --sea-dark: #513ba9; }
body { background: radial-gradient(ellipse 700px 600px at 100% 35%, #ece8fb88, transparent), #fafbfe; }
.theme-toggle { background: #fff; border-color: #e9e7f1; }
.parking-hero { position: relative; overflow: hidden; isolation: isolate; margin: 16px 0 28px; padding: 38px 32px; border-radius: 26px; background: linear-gradient(115deg, #eae7fc, #dfeafb 60%, #caeaf0); box-shadow: 0 14px 40px #716bc013; }
.hero-copy { position: relative; z-index: 2; }
.hero-eyebrow { margin: 0 0 15px; color: #625596; font-size: 11px; font-weight: 800; letter-spacing: 2.4px; }
.parking-hero h1 { margin: 0 0 14px; font-size: 36px; letter-spacing: -1.8px; color: #252340; }
.parking-hero h1::before { content: none; }
.parking-hero .subtitle { margin: 0 0 20px; font-size: 18px; color: #555b7b; letter-spacing: -.6px; line-height: 1.65; }
.hero-caption { color: #626e87; font-size: 11px; letter-spacing: .2px; }
.hero-sculpture { position: absolute; right: 5%; top: 12%; width: 250px; height: 230px; z-index: 1; }
.sculpture-tile { position: absolute; display: grid; place-items: center; width: 145px; height: 155px; left: 42px; top: 20px; border-radius: 36px; transform: rotate(-19deg); background: linear-gradient(140deg, #b9aaff, #6843f7 55%, #4931c7); box-shadow: inset 3px 4px 7px #ffffff80, inset -4px -5px 8px #29179355, 10px 20px 30px #5742b13b; color: #ffffffed; font-size: 92px; font-weight: 800; font-family: system-ui, sans-serif; }
.sculpture-orb { position: absolute; width: 125px; height: 125px; left: 0; bottom: 0; border-radius: 50%; background: radial-gradient(circle at 30% 25%, #c6f9f7, #61c2e1 50%, #4d79ce); box-shadow: inset -5px -7px 18px #4e5bba30, 8px 12px 22px #4656b11a; }
.sculpture-glass { position: absolute; width: 145px; height: 155px; right: 0; bottom: 0; border-radius: 34px; transform: rotate(32deg); background: linear-gradient(130deg, #ffffff38, #a7c5ff0a); border: 2px solid #ffffff9c; box-shadow: inset 0 0 0 3px #a698f044, 0 9px 15px #655bb41f; backdrop-filter: blur(2px); }
.sculpture-pearl { position: absolute; width: 33px; height: 33px; right: 6px; top: 4px; border-radius: 50%; background: radial-gradient(circle at 25% 22%, #fff, #e0daf4 45%, #a5a7d2); box-shadow: 3px 6px 9px #7569b22b; }
.search-box input, .ai-box .ai-input-row input { border-radius: 14px; }
.search-box #searchButton { background: #302d42; }
.search-box #searchButton:hover { background: #48425e; }
body .location-button { background: #6b57c8 !important; }
body .location-button:hover { background: #5542af !important; }
.install-box { border: 1px solid #eeedf4; background: #fff; box-shadow: none; }
.ai-box { border-radius: 24px; border-color: #e2dcf4; background: radial-gradient(ellipse at 100% 0%, #e4def9, transparent 70%), #f2f0fa; box-shadow: none; }
.ai-box h2 { color: #38304f; }
.ai-box h2::before { color: #8061d4; }
.ai-box .ai-help { color: #716b85; }
.ai-status { color: #706a81; background: #ffffff80; }
.ai-input-row #aiSendButton { background: #6a50c3; color: #fff; }
.ai-input-row #aiSendButton:hover { background: #533caa; }
.ai-box .voice-button { background: #e1d9f4 !important; color: #6348b6; box-shadow: none; }
.ai-box .voice-button:hover { background: #d3c6f0 !important; }
.ai-box .voice-button.listening { color: #fff; background: #c74747 !important; }
.sort-button.active { background: #39304f; border-color: #39304f; }
.refresh-button { color: #67519d; }
.parking-card { background: #fff; border-radius: 22px; box-shadow: 0 8px 25px #3e305704, 0 0 0 1px #eae8f0; }
.parking-card h2 { color: #353044; }
.available { background: #f0ecfa; color: #674eb1; }
.map-button { background: #f5e8ac; }
.address-notice { background: #f8f7f4; }
html[data-theme="dark"] body { background: radial-gradient(ellipse at 100% 0%, #2c2549, transparent 65%), #171822; }
html[data-theme="dark"] .parking-hero { background: linear-gradient(115deg, #363052, #2a3b54); box-shadow: none; }
html[data-theme="dark"] .parking-hero h1 { color: #f6f3ff; }
html[data-theme="dark"] .hero-eyebrow { color: #c7b9f4; }
html[data-theme="dark"] .parking-hero .subtitle, html[data-theme="dark"] .hero-caption { color: #c3c5dd; }
html[data-theme="dark"] .ai-box { background: radial-gradient(ellipse at 100% 0%, #443663, transparent 75%), #292638; border-color: #4b405f; }
html[data-theme="dark"] .ai-box h2 { color: #f0eafb; }
html[data-theme="dark"] .ai-box .ai-help, html[data-theme="dark"] .ai-status { color: #c1b9d2; }
html[data-theme="dark"] .ai-status { background: #1b192930; }
html[data-theme="dark"] .search-box input, html[data-theme="dark"] .ai-box .ai-input-row input { background: #242433; border-color: #494258; }
html[data-theme="dark"] .parking-card { background: #252431; box-shadow: 0 0 0 1px #3c374b; }
html[data-theme="dark"] .available { background: #3a2f50; color: #cfb7ff; }
html[data-theme="dark"] .sort-button.active { background: #cbb8f8; color: #322246; border-color: #cbb8f8; }
@media (max-width: 700px) {
  .parking-hero { padding: 28px 22px; }
  .parking-hero h1 { font-size: 28px; }
  .parking-hero .subtitle { font-size: 16px; }
  .hero-sculpture { right: -35px; top: 42px; transform: scale(.7); transform-origin: right center; opacity: .65; }
  .hero-copy { max-width: 75%; }
  .hero-caption { font-size: 10px; }
}
@media (max-width: 420px) {
  .parking-hero h1 { font-size: 25px; }
  .hero-sculpture { right: -65px; opacity: .35; }
  .hero-copy { max-width: 100%; }
}

.theme-toolbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 20;
  align-items: center;
  gap: 10px;
  width: 100%;
  margin: 0;
  padding: calc(10px + env(safe-area-inset-top)) max(20px, calc((100vw - 860px) / 2)) 10px;
  border-radius: 0;
  border-bottom: 1px solid #e8e4f1;
  background: #fafbfee6;
  box-shadow: 0 4px 18px #3020460a;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
html[data-theme="dark"] .theme-toolbar { background: #171822e6; border-bottom-color: #393249; box-shadow: 0 4px 18px #00000020; }
.container { padding-top: calc(88px + env(safe-area-inset-top)); }
.qr-button { display: inline-flex; align-items: center; gap: 7px; min-height: 46px; padding: 8px 13px; border: 1px solid #e9e7f1; border-radius: 999px; background: #fff; color: #63518c; font-size: 12px; font-weight: 700; cursor: pointer; }
.qr-button:hover { background: #f1edf9; }
.qr-button svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.qr-dialog { position: fixed; width: min(460px, calc(100% - 28px)); max-height: calc(100dvh - 40px); margin: auto; padding: 30px 26px 24px; border: 1px solid #e5dff2; border-radius: 25px; background: #fcfbff; color: #353044; box-shadow: 0 25px 100px #1c133c40; text-align: center; overflow-y: auto; }
.qr-dialog::backdrop { background: #18122d80; backdrop-filter: blur(5px); }
.qr-close { position: absolute; top: 12px; right: 13px; width: 32px; height: 32px; border: 0; border-radius: 50%; background: #eeeaf6; color: #65547d; font-size: 25px; line-height: 1; cursor: pointer; }
.qr-eyebrow { margin: 3px 0 9px; color: #8573a8; font-size: 10px; letter-spacing: 1.6px; font-weight: 700; }
.qr-dialog h2 { margin: 0; font-size: 25px; letter-spacing: -1px; }
.qr-description { color: #716b85; font-size: 13px; line-height: 1.7; }
.qr-code-frame { width: fit-content; margin: 18px auto 10px; padding: 6px; background: #fff; border: 1px solid #ece7f4; border-radius: 17px; box-shadow: 0 4px 20px #54418308; }
.qr-code-frame img { display: block; width: 204px; max-width: 100%; height: auto; }
.qr-site-link { color: #6a50b0; font-size: 12px; text-underline-offset: 4px; }
.qr-install-guide { margin-top: 24px; padding-top: 20px; border-top: 1px solid #e8e1f1; text-align: left; }
.qr-install-guide h3 { margin: 0 0 15px; font-size: 16px; letter-spacing: -.5px; }
.qr-platform { margin: 12px 0; padding: 12px 14px; border-radius: 13px; background: #f1edf8; }
.qr-platform h4 { margin: 0 0 5px; font-size: 13px; color: #65508d; }
.qr-platform p { margin: 0; color: #736a81; font-size: 12px; line-height: 1.8; }
.qr-install-note { color: #82778f; font-size: 11px; text-align: center; line-height: 1.8; }
.qr-install-guide .install-button { width: 100%; background: #6a50c3; }
html[data-theme="dark"] .qr-button { background: #282438; border-color: #48405c; color: #d2c2ed; }
html[data-theme="dark"] .qr-dialog { background: #242131; border-color: #514363; color: #f1ebfa; }
html[data-theme="dark"] .qr-description, html[data-theme="dark"] .qr-platform p, html[data-theme="dark"] .qr-install-note { color: #bdb2ce; }
html[data-theme="dark"] .qr-close, html[data-theme="dark"] .qr-platform { background: #363047; color: #dfd2f2; }
html[data-theme="dark"] .qr-platform h4, html[data-theme="dark"] .qr-site-link { color: #c6a8f4; }
html[data-theme="dark"] .qr-install-guide { border-top-color: #4b405e; }

.toolbar-brand { display: inline-flex; align-items: center; gap: 9px; margin-right: auto; min-width: 0; color: #353044; text-decoration: none; font-size: 16px; font-weight: 800; letter-spacing: -.6px; white-space: nowrap; }
.toolbar-brand-icon { display: grid; place-items: center; width: 33px; height: 33px; flex: 0 0 33px; border-radius: 10px; background: linear-gradient(140deg, #a08aef, #6746cf); color: #fff; font: 800 23px/1 system-ui, sans-serif; box-shadow: inset 0 1px 2px #ffffff60, 0 3px 8px #6b50aa20; }
html[data-theme="dark"] .toolbar-brand { color: #f0eafa; }
@media (max-width: 600px) { .toolbar-brand { font-size: 13px; gap: 6px; } .toolbar-brand-icon { width: 28px; height: 28px; flex-basis: 28px; font-size: 20px; border-radius: 8px; } .theme-toolbar { gap: 6px; padding-left: 15px; padding-right: 15px; } .qr-button { padding: 8px 10px; } }
@media (max-width: 380px) { .qr-button span { display: none; } .qr-button { padding: 10px; } }