/* Premium Driver App surfaces. Reflections are CSS, not raster assets; workflow and status
   colours remain independent of the wine accent. Fixed bars keep blur on their pseudo-element. */
:root {
  --driver-nav-height: 76px;
  --bg: #12090f;
  --bg-raised: #24131c;
  --bg-sunken: #14090f;
  --line: #63364a;
  --text: #ffffff;
  --text-muted: #eee5eb;
  --text-label: #fff5fa;
  --accent: #efa4c9;
  --brand: #751d38;
  --brand-deep: #471024;
  --brand-ink: #ffffff;
  --brand-soft: #321223;
  --brand-soft-ink: #ffc1dc;
  --surface-hover: #3c192c;
  --focus: #ffb4d4;
  --grad-a: #842746;
  --grad-b: #54152e;
  --card-plate: rgba(255, 231, 243, .08);
  --card-rule: rgba(248, 169, 204, .25);
  --surface-shadow: inset 0 1px 1px rgba(255, 219, 237, .26), inset 0 -1px 0 rgba(70, 19, 41, .45), 0 7px 22px rgba(0, 0, 0, .30);
  --premium-rim: rgba(208, 128, 166, .52);
  --premium-glass: radial-gradient(ellipse at 103% -10%, rgba(185, 102, 143, .24), transparent 52%), linear-gradient(115deg, rgba(49, 25, 38, .94), rgba(23, 11, 19, .97) 48%, rgba(44, 20, 33, .95));
  --premium-glass-quiet: radial-gradient(ellipse 55% 85% at -8% -32%, rgba(255, 187, 224, .32), transparent 67%), radial-gradient(ellipse at 110% 12%, rgba(178, 99, 137, .20), transparent 55%), linear-gradient(110deg, #321b27, #180c14 50%, #2d1422);
  --premium-field: rgba(17, 9, 15, .62);
  --premium-icon: linear-gradient(135deg, rgba(255, 233, 245, .08), transparent 46%), linear-gradient(140deg, #462337, #291620 80%);
  --premium-gleam: rgba(255, 201, 229, .80);
  --premium-bar: rgba(18, 10, 17, .90);
  --premium-reflection: rgba(234, 65, 125, .16);
  --premium-reflection-edge: rgba(255, 122, 174, .70);
  --premium-glow: rgba(166, 42, 89, .22);
}

:root[data-theme="light"] {
  --bg: #f8f0f3;
  --bg-raised: #fffafd;
  --bg-sunken: #f2e5ec;
  --line: #d9bdca;
  --text: #291520;
  --text-muted: #725465;
  --text-label: #543345;
  --accent: #7e3152;
  --brand: #8c3859;
  --brand-deep: #66223f;
  --brand-ink: #ffffff;
  --brand-soft: #f0dce6;
  --brand-soft-ink: #78304e;
  --surface-hover: #f5e3eb;
  --focus: #883558;
  --grad-a: #a24467;
  --grad-b: #752b48;
  --card-plate: rgba(255, 255, 255, .45);
  --card-rule: rgba(128, 57, 87, .20);
  --surface-shadow: inset 0 1px 0 rgba(255, 255, 255, .94), 0 8px 24px rgba(85, 28, 54, .07);
  --premium-rim: rgba(149, 77, 109, .25);
  --premium-glass: linear-gradient(135deg, rgba(255, 255, 255, .90), rgba(253, 239, 246, .85) 58%, rgba(245, 224, 234, .77));
  --premium-glass-quiet: linear-gradient(125deg, rgba(255, 251, 253, .90), rgba(248, 234, 241, .90));
  --premium-field: rgba(255, 251, 253, .76);
  --premium-icon: linear-gradient(145deg, rgba(214, 152, 178, .24), rgba(251, 229, 239, .82));
  --premium-gleam: rgba(255, 255, 255, .95);
  --premium-bar: rgba(253, 244, 249, .89);
  --premium-reflection: rgba(209, 120, 159, .09);
  --premium-reflection-edge: rgba(255, 255, 255, .70);
  --premium-glow: rgba(203, 116, 152, .16);
}

html { background: var(--bg); }
body {
  background-color: var(--bg);
  background-image: radial-gradient(ellipse 70% 42% at 112% 3%, var(--premium-glow), transparent 77%),
    radial-gradient(ellipse 90% 25% at 100% 108%, var(--premium-glow), transparent 70%);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
}
/* Inline native vector reflections share the stylesheet cache version and remain available offline. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20430%20932%22%20preserveAspectRatio%3D%22none%22%3E%0A%20%20%3Cdefs%3E%0A%20%20%20%20%3ClinearGradient%20id%3D%22rose%22%20x1%3D%220%22%20y1%3D%220%22%20x2%3D%221%22%20y2%3D%220%22%3E%0A%20%20%20%20%20%20%3Cstop%20stop-color%3D%22%239e234f%22%20stop-opacity%3D%220%22%2F%3E%0A%20%20%20%20%20%20%3Cstop%20offset%3D%22.25%22%20stop-color%3D%22%23b62e61%22%20stop-opacity%3D%22.12%22%2F%3E%0A%20%20%20%20%20%20%3Cstop%20offset%3D%22.6%22%20stop-color%3D%22%23ee699e%22%20stop-opacity%3D%22.65%22%2F%3E%0A%20%20%20%20%20%20%3Cstop%20offset%3D%22.88%22%20stop-color%3D%22%23ff9ac3%22%20stop-opacity%3D%22.95%22%2F%3E%0A%20%20%20%20%20%20%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23e95d96%22%20stop-opacity%3D%22.7%22%2F%3E%0A%20%20%20%20%3C%2FlinearGradient%3E%0A%20%20%20%20%3ClinearGradient%20id%3D%22satin%22%20x1%3D%220%22%20y1%3D%220%22%20x2%3D%221%22%20y2%3D%220%22%3E%0A%20%20%20%20%20%20%3Cstop%20offset%3D%22.15%22%20stop-color%3D%22%235f152e%22%20stop-opacity%3D%220%22%2F%3E%0A%20%20%20%20%20%20%3Cstop%20offset%3D%22.6%22%20stop-color%3D%22%238c254c%22%20stop-opacity%3D%22.2%22%2F%3E%0A%20%20%20%20%20%20%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23e779a7%22%20stop-opacity%3D%22.32%22%2F%3E%0A%20%20%20%20%3C%2FlinearGradient%3E%0A%20%20%20%20%3Cfilter%20id%3D%22bloom%22%20x%3D%22-30%25%22%20y%3D%22-60%25%22%20width%3D%22160%25%22%20height%3D%22220%25%22%3E%3CfeGaussianBlur%20stdDeviation%3D%229%22%2F%3E%3C%2Ffilter%3E%0A%20%20%20%20%3Cfilter%20id%3D%22soft%22%20x%3D%22-20%25%22%20y%3D%22-30%25%22%20width%3D%22140%25%22%20height%3D%22160%25%22%3E%3CfeGaussianBlur%20stdDeviation%3D%222.3%22%2F%3E%3C%2Ffilter%3E%0A%20%20%3C%2Fdefs%3E%0A%20%20%3C!--%20Two%20edges%20of%20a%20curved%20satin%20ribbon%2C%20brightest%20where%20they%20meet%20the%20top-right%20light.%20--%3E%0A%20%20%3Cpath%20d%3D%22M-80%20360C80%20150%20185%2065%20470%2061L470%2078C225%2084%2055%20177-100%20395Z%22%20fill%3D%22url(%23satin)%22%2F%3E%0A%20%20%3Cg%20fill%3D%22none%22%20stroke%3D%22url(%23rose)%22%3E%0A%20%20%20%20%3Cpath%20d%3D%22M-80%20360C80%20150%20185%2065%20470%2061%22%20stroke-width%3D%2222%22%20filter%3D%22url(%23bloom)%22%20opacity%3D%22.85%22%2F%3E%0A%20%20%20%20%3Cpath%20d%3D%22M-80%20360C80%20150%20185%2065%20470%2061%22%20stroke-width%3D%225%22%20filter%3D%22url(%23soft)%22%2F%3E%0A%20%20%20%20%3Cpath%20d%3D%22M-80%20360C80%20150%20185%2065%20470%2061%22%20stroke-width%3D%221.3%22%20opacity%3D%22.85%22%2F%3E%0A%20%20%20%20%3Cpath%20d%3D%22M-100%20395C55%20177%20225%2084%20470%2078%22%20stroke-width%3D%2213%22%20filter%3D%22url(%23bloom)%22%20opacity%3D%22.65%22%2F%3E%0A%20%20%20%20%3Cpath%20d%3D%22M-100%20395C55%20177%20225%2084%20470%2078%22%20stroke-width%3D%223%22%20filter%3D%22url(%23soft)%22%20opacity%3D%22.8%22%2F%3E%0A%20%20%20%20%3Cpath%20d%3D%22M-100%20395C55%20177%20225%2084%20470%2078%22%20stroke-width%3D%22.9%22%20opacity%3D%22.48%22%2F%3E%0A%20%20%3C%2Fg%3E%0A%20%20%3C!--%20A%20quieter%20pair%20of%20reflections%20at%20the%20foot%20of%20the%20screen.%20--%3E%0A%20%20%3Cpath%20d%3D%22M-70%201030C95%20940%20280%20855%20490%20840L490%20862C290%20885%20115%20960-70%201054Z%22%20fill%3D%22url(%23satin)%22%20opacity%3D%22.65%22%2F%3E%0A%20%20%3Cg%20fill%3D%22none%22%20stroke%3D%22url(%23rose)%22%20opacity%3D%22.65%22%3E%0A%20%20%20%20%3Cpath%20d%3D%22M-70%201030C95%20940%20280%20855%20490%20840%22%20stroke-width%3D%2222%22%20filter%3D%22url(%23bloom)%22%2F%3E%0A%20%20%20%20%3Cpath%20d%3D%22M-70%201030C95%20940%20280%20855%20490%20840%22%20stroke-width%3D%223.3%22%20filter%3D%22url(%23soft)%22%2F%3E%0A%20%20%20%20%3Cpath%20d%3D%22M-70%201054C115%20960%20290%20885%20490%20862%22%20stroke-width%3D%2217%22%20filter%3D%22url(%23bloom)%22%20opacity%3D%22.7%22%2F%3E%0A%20%20%20%20%3Cpath%20d%3D%22M-70%201054C115%20960%20290%20885%20490%20862%22%20stroke-width%3D%222.2%22%20filter%3D%22url(%23soft)%22%20opacity%3D%22.7%22%2F%3E%0A%20%20%3C%2Fg%3E%0A%3C%2Fsvg%3E") center / 100% 100% no-repeat;
  z-index: 0;
}
:root[data-theme="light"] body::before { opacity: .25; }
#app { position: relative; z-index: 1; }
.shell { min-width: 0; background: transparent; }
.content { gap: 22px; padding: 10px calc(16px + var(--safe-right)) 132px calc(16px + var(--safe-left)); min-width: 0; }
.content > * { min-width: 0; }
.content:has(> .home-page-head) {
  gap: 14px;
  padding-top: 20px;
  padding-bottom: calc(var(--driver-nav-height) + var(--safe-bottom) + 20px);
}
/* Share spare height around Home; auto margins collapse when content needs to scroll.
   Urgent panels preceding the greeting keep their normal position at the top. */
.content > .home-page-head:first-child { margin-top: auto; }
.content:has(> .home-page-head:first-child) > :last-child { margin-bottom: auto; }
.page-head { gap: 9px; }
.page-head h1 { font-size: 2rem; font-weight: 700; line-height: 1.13; letter-spacing: -.045em; }
.eyebrow { font-size: .62rem; font-weight: 650; letter-spacing: .14em; color: var(--accent); }
.page-head .muted { font-size: .9rem; line-height: 1.55; }
.section-label, .panel h2 { color: var(--text-label); }

/* App chrome: genuine controls, with no imitation of phone hardware or system UI. */
.topbar {
  gap: 10px;
  padding: calc(13px + var(--safe-top)) calc(15px + var(--safe-right)) 13px calc(15px + var(--safe-left));
  margin-bottom: 14px;
}
.topbar::before {
  background: var(--premium-bar);
  border-bottom-color: color-mix(in srgb, var(--premium-rim) 65%, transparent);
  backdrop-filter: blur(18px) saturate(125%);
  -webkit-backdrop-filter: blur(18px) saturate(125%);
}
:root:not([data-theme="light"]) .topbar::before {
  background: radial-gradient(ellipse at 108% 0, rgba(164, 74, 114, .32), transparent 65%), linear-gradient(115deg, rgba(15, 8, 14, .94), rgba(43, 18, 34, .92));
}
.brand { gap: 10px; }
.brand-mark { width: 31px; height: 34px; flex: none; }
.brand-product-name { color: var(--text-label); font-size: .59rem; letter-spacing: .14em; }
.brand-name { color: var(--text-muted); font-size: .8rem; font-weight: 500; letter-spacing: -.01em; }
.topbar-menu, .topbar-bell { color: var(--text-label); border-radius: 13px; flex: none; }
.topbar-menu-bars { width: 20px; gap: 5px; }
.topbar-menu-bars span { height: 1.5px; }
.bottom-nav { border-radius: 28px 28px 0 0; border-color: var(--premium-rim); box-shadow: 0 -10px 35px rgba(6, 1, 5, .20); }
.bottom-nav::before {
  background: var(--premium-bar);
  border-radius: inherit;
  box-shadow: inset 0 1px 0 var(--premium-gleam), inset 1px 0 0 var(--premium-rim), inset -1px 0 0 var(--premium-rim);
}
:root:not([data-theme="light"]) .bottom-nav::before {
  background: radial-gradient(ellipse at 0 0, rgba(178, 90, 126, .23), transparent 60%), linear-gradient(110deg, rgba(38, 18, 29, .97), rgba(21, 10, 17, .96) 58%, rgba(42, 20, 33, .97));
}
.bottom-nav a { justify-content: center; min-width: 0; min-height: var(--driver-nav-height); padding: 13px 3px 12px; color: var(--text-muted); gap: 7px; }
.bottom-nav .icon { width: 25px; height: 25px; stroke-width: 1.7; }
.bottom-nav small { max-width: 100%; font-size: .69rem; line-height: 1.15; text-align: center; overflow-wrap: anywhere; }
.bottom-nav a.active { color: var(--accent); }
.bottom-nav a.active::before { inset: 1px 4px 2px; background: var(--premium-icon); border: 1px solid var(--premium-rim); border-radius: 23px; box-shadow: inset 0 1px 0 var(--premium-gleam); }
:root:not([data-theme="light"]) .bottom-nav a.active::before {
  background: radial-gradient(ellipse at 10% -6%, rgba(255, 155, 198, .30), transparent 62%), linear-gradient(155deg, #782e4c, #471a30 53%, #28121f);
  border-color: #af6688;
  box-shadow: inset 0 1px 1px rgba(255, 191, 221, .80), inset 1px 0 0 rgba(240, 150, 193, .25), 0 0 16px rgba(178, 66, 103, .20);
}
:root:not([data-theme="light"]) .bottom-nav a.active { color: #ffb4d6; }
.bottom-nav a.active::after { top: 1px; height: 1px; width: 28px; opacity: .35; }
.send-bar { bottom: calc(var(--driver-nav-height) + var(--safe-bottom) + 1px); border-color: var(--premium-rim); }
.send-bar::before { background: var(--premium-bar); }

/* Home: the greeting and readiness are a single compact row. */
.home-page-head { padding: 2px 2px 1px; }
.home-page-head .page-head-row { align-items: center; gap: 12px; }
.home-greeting { min-width: 0; }
.home-greeting .eyebrow { display: block; margin-bottom: 9px; }
.home-greeting h1 { font-size: clamp(1.65rem, 7.7vw, 2rem); }
.home-next { margin-top: 9px; color: var(--text-muted); font-size: .85rem; line-height: 1.5; max-width: 245px; }
.home-readiness {
  display: flex; align-items: flex-start; gap: 8px; width: 124px; padding: 13px 11px;
  border-radius: 15px; border: 1px solid var(--premium-rim); background: var(--premium-glass);
  box-shadow: var(--surface-shadow); text-align: left;
}
.home-readiness-icon { display: grid; place-items: center; flex: none; width: 30px; height: 35px; border-radius: 9px; color: var(--accent); background: var(--premium-icon); box-shadow: inset 0 1px 0 rgba(255, 209, 231, .14); }
.home-readiness-icon .icon { width: 20px; height: 23px; stroke-width: 1.7; }
.home-readiness-copy { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.home-readiness-copy strong { font-size: 1.5rem; line-height: 1.1; letter-spacing: -.045em; }
:root:not([data-theme="light"]) .home-readiness-copy strong { color: #fa79b0; }
.home-readiness-copy small { font-size: .63rem; line-height: 1.4; color: var(--text-muted); }
.quick-actions { margin-top: 0; gap: 10px; }
.quick-primary, .quick-secondary, .quick-action {
  position: relative; min-width: 0; color: var(--text); border: 1px solid var(--premium-rim);
  border-radius: 16px; background: var(--premium-glass); box-shadow: var(--surface-shadow);
}
.quick-primary {
  /* The fine rim sits inside the original 82px action height. */
  min-height: 82px; padding: 17px 18px; gap: 14px;
  background: radial-gradient(ellipse 72% 100% at 105% -6%, rgba(231, 143, 181, .36), transparent 65%),
    radial-gradient(ellipse 65% 70% at 1% -4%, rgba(255, 98, 152, .32), transparent 70%),
    linear-gradient(110deg, #5f1934, #390d22 49%, #5b1e38);
  border-color: #f28bb3;
  box-shadow: inset 0 1px 1px rgba(255, 214, 233, .85), inset 1px 0 1px rgba(255, 169, 206, .45), inset 0 7px 22px rgba(239, 97, 151, .16), 0 0 18px rgba(234, 71, 131, .24), 0 10px 25px rgba(0, 0, 0, .30);
}
.quick-primary::before, .vehicle-due::before {
  content: ""; position: absolute; inset: -1px 24% auto 12px; height: 1px;
  pointer-events: none; background: linear-gradient(90deg, transparent, var(--premium-gleam), transparent);
}
.quick-copy { min-width: 0; flex: 1; display: flex; align-items: center; }
.quick-copy strong { line-height: 1.25; letter-spacing: -.01em; }
.quick-primary .quick-copy strong { font-size: 1.02rem; font-weight: 650; }
.quick-secondary .quick-copy strong { font-size: 1rem; font-weight: 650; }
.quick-primary-glyph, .quick-secondary-glyph, .quick-action-glyph,
.vehicle-registration-icon, .vehicle-details-icon {
  display: grid; place-items: center; flex: none; border: 1px solid var(--premium-rim);
  background: var(--premium-icon); color: var(--accent); box-shadow: inset 0 1px 0 rgba(255, 207, 231, .10);
}
.quick-primary-glyph { width: 46px; height: 46px; border-radius: 14px; }
:root:not([data-theme="light"]) .quick-primary-glyph { background: linear-gradient(140deg, #812d4d, #541b33 70%, #61233d); color: #ffe7f2; border-color: #c06990; box-shadow: inset 0 1px 0 #f18ab14d; }
.quick-primary-glyph .icon { width: 26px; height: 26px; stroke-width: 1.6; }
.quick-primary-arrow { display: flex; flex: none; color: var(--text-muted); opacity: 1; }
.quick-primary .quick-primary-arrow .icon, .quick-primary-arrow .icon { width: 17px; height: 17px; stroke-width: 1.6; }
.quick-secondary { min-height: 70px; padding: 14px 16px; gap: 12px; background: var(--premium-glass-quiet); }
.quick-secondary-glyph { width: 40px; height: 40px; border-radius: 12px; }
.quick-secondary-glyph .icon { width: 23px; height: 23px; stroke-width: 1.6; }
.quick-pair { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.quick-action { display: flex; gap: 12px; padding: 16px 14px; min-height: 72px; }
.quick-action-glyph { width: 38px; height: 38px; border-radius: 12px; }
.quick-action-glyph .icon { width: 22px; height: 22px; stroke-width: 1.6; }
.quick-action .quick-copy strong { font-size: .82rem; font-weight: 600; line-height: 1.2; }
:root:not([data-theme="light"]) .quick-secondary,
:root:not([data-theme="light"]) .quick-action,
:root:not([data-theme="light"]) .home-readiness {
  background: var(--premium-glass-quiet);
  border-color: #8d566f;
  box-shadow: inset 0 1px 1px rgba(255, 219, 237, .48), inset 1px 0 1px rgba(225, 150, 190, .22), 0 0 9px rgba(182, 64, 117, .12), 0 7px 18px rgba(0, 0, 0, .24);
}
.home-attention { position: relative; gap: 7px; padding-left: 12px; border-left: 0; }
.home-attention::before {
  content: ""; position: absolute; top: 6px; bottom: 0; left: 0; width: 3px; border-radius: 2px;
  background: linear-gradient(90deg, var(--warn), color-mix(in srgb, var(--warn) 65%, #fff), var(--warn));
  box-shadow: 0 0 5px color-mix(in srgb, var(--warn) 70%, transparent), 0 0 12px color-mix(in srgb, var(--warn) 24%, transparent);
  pointer-events: none;
}
.attention-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 38px; }
.attention-head h2 { padding: 0 2px; border-left: 0; color: var(--text); font-size: .95rem; }
.attention-see-all { display: inline-flex; align-items: center; gap: 2px; min-height: 44px; color: var(--text-muted); font-size: .71rem; flex: none; }
.attention-see-all .icon { width: 15px; height: 15px; }
.home-attention .row { padding: 14px 13px; }
.home-attention .rows { gap: 8px; }
.home-attention .notif-row {
  min-height: 82px; padding: 12px 13px; gap: 13px; border-radius: 17px;
  background: var(--premium-glass-quiet);
  box-shadow: inset 0 1px 1px var(--premium-gleam), inset 1px 0 0 var(--premium-rim), 0 5px 14px rgba(0, 0, 0, .18);
}
:root:not([data-theme="light"]) .home-attention .notif-row {
  background: radial-gradient(ellipse 75% 90% at -5% -12%, rgba(215, 132, 174, .20), transparent 67%), radial-gradient(ellipse 65% 120% at 110% 0, rgba(162, 94, 129, .15), transparent 70%), linear-gradient(112deg, #2e1823, #1c0e17 55%, #291420);
  border-color: rgba(177, 110, 145, .48);
  box-shadow: inset 0 1px 1px rgba(255, 211, 235, .46), inset 1px 0 0 rgba(207, 142, 178, .22), 0 5px 14px rgba(0, 0, 0, .22);
}
.home-attention .notif-body { gap: 3px; }
.home-attention .notif-body strong { font-size: .88rem; line-height: 1.3; font-weight: 600; }
.home-attention .notif-body small { font-size: .76rem; line-height: 1.4; }
.home-attention .notif-when { font-size: .70rem; line-height: 1.3; margin-top: 1px; }
.home-attention .notif-dot { width: 10px; height: 10px; margin-top: 5px; }
.home-attention .notif-unread .notif-dot { box-shadow: inset 0 1px 1px rgba(255, 255, 255, .45), 0 0 5px rgba(0, 0, 0, .15); }
.home-attention .row-chevron { align-self: center; font-size: 1.5rem; font-weight: 300; }

/* Shared surfaces preserve each workflow's layout, status border and interactive controls. */
.row, .stat-card, .money-card, .paper-card, .check-item, .offer, .doc-form,
.notif-row, .invite-card, .onb-step, .hours-hero, .hours-allow, .ask-app, .quiz-question {
  background: var(--premium-glass); box-shadow: var(--surface-shadow);
}
.row:not(.row-warn):not(.row-danger), .stat-card, .money-card, .paper-card,
.check-item:not(.check-item-defect), .doc-form:not(.doc-form-checking), .notif-row, .invite-card, .onb-step { border-color: var(--premium-rim); }
.row-quiet { background: transparent; box-shadow: none; }
.row-body strong { font-weight: 600; }
.row-body small { line-height: 1.45; }
.notif-row:not(.notif-unread) { background: var(--premium-glass-quiet); }
.notif-row { padding: 15px 12px; border-radius: 16px; }
.notif-body strong { font-size: .9rem; font-weight: 600; }
.notif-body small { font-size: .8rem; line-height: 1.5; }
.notif-when { font-size: .69rem; }
.empty, .wallet-empty { background: var(--premium-glass-quiet); border-color: var(--premium-rim); }
.doc-card { background: linear-gradient(130deg, rgba(255, 218, 236, .05), transparent 45%), linear-gradient(145deg, var(--a), var(--b)); border-color: var(--card-rule); box-shadow: var(--surface-shadow); }
.card-badge, .card-drop-icon, .card-current-icon, .chip { box-shadow: inset 0 1px 0 rgba(255, 235, 245, .06); }
.content > form, .auth-content > form, .content > .panel:has(> form),
.content > .sign-panel, .content > .declaration-panel {
  padding: 18px; background: var(--premium-glass); border-color: var(--premium-rim); border-radius: 22px;
}
.content > .declaration-panel { border-color: color-mix(in srgb, var(--ok) 50%, var(--line)); }
input:not([type="button"]):not([type="submit"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]),
textarea, select { background: var(--premium-field); border-color: var(--premium-rim); border-radius: 12px; box-shadow: inset 0 1px 4px rgba(4, 0, 3, .10); }
input:not([type="button"]):not([type="submit"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]):focus,
textarea:focus, select:focus { border-color: var(--focus); }
label { line-height: 1.45; }
.switch-row { min-height: 44px; }
.button { border-radius: 13px; }
.button-primary, .button-gradient { border-color: rgba(255, 181, 214, .20); box-shadow: inset 0 1px 0 rgba(255, 209, 232, .18), 0 6px 18px rgba(98, 24, 56, .19); }
.button-secondary, .password-toggle, .theme-choice button { background: var(--premium-glass-quiet); border-color: var(--premium-rim); }
.button-danger { background: transparent; border-color: var(--danger); color: var(--danger); box-shadow: none; }
.theme-choice button.active { background: var(--brand-soft); border-color: var(--accent); }
.theme-swatch-dark { background: linear-gradient(135deg, #12090f 50%, #85233f 50%); }
.theme-swatch-light { background: linear-gradient(135deg, #f8f0f3 50%, #8c3859 50%); }
.sheet { background: linear-gradient(145deg, var(--bg-raised), var(--bg-sunken)); border: 1px solid var(--premium-rim); border-bottom: 0; box-shadow: inset 0 1px 0 var(--premium-gleam), 0 -16px 60px rgba(8, 1, 6, .36); }
.sheet-backdrop { background: rgba(8, 2, 7, .68); }
.slot { background: var(--premium-glass-quiet); }
.slot-icon { color: var(--accent); background: var(--premium-icon); }
.toast { background: var(--bg-raised); border: 1px solid var(--premium-rim); box-shadow: var(--surface-shadow); }
.drawer {
  --bg: #22131f; --bg-raised: #362031; --line: #63374f;
  --text: #ffffff; --text-muted: #eee5eb; --text-label: #fff5fa; --accent: #f2abc9;
  background: radial-gradient(ellipse at 100% 0, rgba(174, 74, 119, .27), transparent 55%), linear-gradient(155deg, #3d2032, #20121d 68%);
  border-color: #65384e; box-shadow: inset -1px 0 0 rgba(245, 173, 206, .12), 20px 0 60px rgba(5, 1, 4, .30);
}
.drawer-group-label { color: #d8b5c9; }
.lang-toggle button, .drawer .lang-toggle button { min-width: 44px; min-height: 44px; }
.drawer-link.active { background: linear-gradient(120deg, rgba(193, 100, 142, .23), rgba(121, 60, 88, .19)); border-color: rgba(235, 157, 195, .30); box-shadow: inset 0 1px 0 rgba(255, 199, 225, .10); }
.drawer-link.active .icon { color: #fac0d8; }

/* Vehicle check: nested glass panels match the reference while every real field stays available. */
.content > form.premium-walkaround { padding: 17px 13px; gap: 18px; }
:root:not([data-theme="light"]) .content > form.premium-walkaround { background: linear-gradient(135deg, rgba(37, 23, 33, .85), rgba(18, 10, 16, .93) 56%, rgba(38, 18, 31, .82)); }
.walkaround-page-head { padding: 4px 2px 2px; }
.walkaround-page-head h1 { font-size: 1.9rem; }
.walkaround-page-head .muted { font-size: .9rem; line-height: 1.55; }
.vehicle-registration {
  flex-direction: row; align-items: center; gap: 12px; padding: 15px 12px;
  border: 1px solid var(--premium-rim); background: var(--premium-glass-quiet); border-radius: 17px; box-shadow: var(--surface-shadow);
}
.vehicle-registration-icon { width: 45px; height: 49px; border-radius: 13px; }
.vehicle-registration-icon .icon { width: 27px; height: 27px; stroke-width: 1.5; }
.vehicle-registration-field { flex: 1; min-width: 0; gap: 7px; font-size: .78rem; }
.vehicle-registration-field input { padding: 11px 12px; letter-spacing: .025em; font-weight: 600; }
.vehicle-due, .vehicle-unknown { position: relative; padding: 16px 12px 12px; border-radius: 17px; background: var(--premium-glass); box-shadow: var(--surface-shadow); }
:root:not([data-theme="light"]) .vehicle-due { background: radial-gradient(ellipse 55% 24% at 104% -2%, rgba(213, 108, 151, .35), transparent 80%), radial-gradient(ellipse 70% 24% at -4% -4%, rgba(161, 65, 103, .34), transparent 80%), linear-gradient(112deg, #321d28, #1b1017 52%, #321b28); box-shadow: inset 0 1px 1px rgba(255, 184, 217, .38), 0 0 13px rgba(177, 48, 102, .12); }
.vehicle-due:not(.vehicle-due-blocked), .vehicle-unknown { border-color: var(--premium-rim); }
.vehicle-details-head { display: flex; align-items: center; gap: 11px; margin-bottom: 13px; }
.vehicle-details-icon { width: 44px; height: 47px; border-radius: 13px; }
.vehicle-details-icon .icon { width: 27px; height: 27px; stroke-width: 1.5; }
.vehicle-details-copy { flex: 1; min-width: 0; }
.vehicle-details-label { display: block; margin-bottom: 5px; font-size: .74rem; color: var(--text-muted); }
.vehicle-details-copy h2 { font-size: 1.03rem; letter-spacing: -.025em; color: var(--text); line-height: 1.35; overflow-wrap: anywhere; }
.vehicle-item { align-items: center; gap: 8px; padding: 12px 0; border-color: var(--premium-rim); font-size: .79rem; }
.vehicle-item-icon { display: grid; place-items: center; flex: none; width: 22px; color: var(--accent); }
.vehicle-item-icon .icon { width: 20px; height: 20px; stroke-width: 1.5; }
.vehicle-item-name { min-width: 0; line-height: 1.45; }
.vehicle-item-when { font-size: .79rem; line-height: 1.45; }
.vehicle-item-when small { font-size: .68rem; margin-top: 2px; }
.vehicle-overdue .vehicle-item-icon { color: var(--danger); }
.vehicle-urgent .vehicle-item-icon { color: var(--warn); }
.vehicle-confirm { padding: 12px 10px; border: 1px solid var(--premium-rim); background: var(--premium-field); border-radius: 12px; margin-top: 9px; }
.vehicle-confirm input { width: 19px; height: 19px; }
.vehicle-confirm strong { font-size: .8rem; font-weight: 500; line-height: 1.5; }
.vehicle-unknown { display: flex; align-items: flex-start; gap: 11px; }
.vehicle-unknown-icon { color: var(--accent); flex: none; padding-top: 1px; }
.vehicle-unknown-icon .icon { width: 24px; height: 24px; }
.premium-walkaround > .panel:not(.vehicle-registration) { padding: 2px; gap: 14px; }
.check-item { background: var(--premium-glass-quiet); }
.result-btn { background: var(--premium-field); }
.hours-hero.hours-bad, .hours-allow.hours-bad { background: color-mix(in srgb, var(--danger) 12%, var(--bg-raised)); }

/* Hours retains its data hierarchy and semantic indicators, using the same surface material. */
@media screen {
.hours-page { background: transparent; font-family: inherit; padding: 4px 0 0; }
.hours-page .dh-eyebrow { color: var(--accent); letter-spacing: .14em; }
.hours-page h1 { font-size: 30px; }
.hours-page .dh-section { background: var(--premium-glass); border-radius: 17px; }
.hours-page .dh-section-head h2 svg { color: var(--accent); }
.hours-page .dh-snapshot-values > .dh-section { background: transparent; border-radius: 0; }
.hours-page .dh-daily-rest { background: var(--premium-glass); }
.hours-page .dh-refresh { background: var(--premium-glass-quiet); }
.hours-page .dh-rest-symbol { background: var(--premium-icon); }
.hours-page .dh-capability-note { background: var(--premium-glass-quiet); border: 1px solid var(--premium-rim); }
}

:root[data-theme="light"] .quick-primary {
  background: linear-gradient(126deg, #f6dbe8, #f5e5ee 58%, #fbf3f7);
  border-color: #c591aa;
  box-shadow: inset 0 1px 0 #fff9fc, 0 0 25px rgba(175, 82, 121, .09), 0 8px 22px rgba(112, 43, 73, .08);
}
:root[data-theme="light"] .bottom-nav { box-shadow: 0 -10px 35px rgba(86, 28, 54, .08); }
:root[data-theme="light"] .sheet-backdrop { background: rgba(43, 16, 33, .45); }

@media (hover: hover) {
  .quick-primary:hover, .quick-secondary:hover, .quick-action:hover { border-color: var(--accent); box-shadow: inset 0 1px 0 var(--premium-gleam), 0 8px 25px var(--premium-glow); }
  .attention-see-all:hover { color: var(--accent); }
}
@media (min-width: 740px) {
  .shell { border-inline: 1px solid var(--premium-rim); }
  .content { padding-inline: 28px; }
  .topbar { padding-inline: 26px; }
  .home-page-head { padding-top: 10px; }
  .home-readiness { width: 145px; padding: 16px; }
  .home-readiness-copy strong { font-size: 1.7rem; }
  .content > form.premium-walkaround { padding: 24px; }
  .vehicle-registration, .vehicle-due, .vehicle-unknown { padding: 18px; }
  .vehicle-item, .vehicle-item-when { font-size: .9rem; }
}
@media (max-width: 360px) {
  :root { --driver-nav-height: 74px; }
  .content { padding-inline: calc(12px + var(--safe-left)) calc(12px + var(--safe-right)); gap: 18px; }
  .topbar { padding-inline: calc(10px + var(--safe-left)) calc(10px + var(--safe-right)); gap: 7px; }
  .brand { gap: 7px; }
  .brand-mark { width: 27px; }
  .brand-product-name { font-size: .54rem; }
  .brand-name { font-size: .72rem; }
  .home-page-head .page-head-row { gap: 8px; }
  .home-readiness { width: 104px; padding: 12px 8px; gap: 5px; }
  .home-readiness-icon { width: 26px; height: 31px; }
  .home-readiness-icon .icon { width: 20px; }
  .home-readiness-copy strong { font-size: 1.3rem; }
  .home-readiness-copy small { font-size: .6rem; }
  .home-next { font-size: .79rem; }
  .quick-action { padding-inline: 10px; gap: 8px; }
  .quick-action .quick-copy strong { font-size: .78rem; }
  .content > form.premium-walkaround { padding: 14px 10px; }
  .walkaround-page-head h1 { font-size: 1.75rem; }
  .walkaround-page-head .muted { font-size: .85rem; }
  .vehicle-registration { gap: 9px; padding: 12px 10px; }
  .vehicle-registration-icon { width: 36px; height: 43px; }
  .vehicle-due, .vehicle-unknown { padding-inline: 10px; }
  .vehicle-item { gap: 6px; font-size: .75rem; }
  .vehicle-item-when { font-size: .74rem; }
  .vehicle-item-icon { width: 19px; }
  .vehicle-item-icon .icon { width: 18px; }
  .vehicle-details-copy h2 { font-size: .94rem; }
  .home-attention { padding-left: 10px; }
  .home-attention .notif-row { padding-inline: 10px; gap: 10px; }
  .home-attention .notif-body strong { font-size: .82rem; }
  .home-attention .notif-body small { font-size: .73rem; }
  .bottom-nav a { min-height: 74px; }
  .bottom-nav small { font-size: .63rem; }
  .bottom-nav a.active::before { inset-inline: 3px; border-radius: 21px; }
}
@media (prefers-reduced-transparency: reduce) {
  body::before { display: none; }
  :root, :root[data-theme="light"] { --premium-glass: var(--bg-raised); --premium-glass-quiet: var(--bg-raised); --premium-bar: var(--bg-raised); }
  .topbar::before, .bottom-nav::before, .send-bar::before { backdrop-filter: none; -webkit-backdrop-filter: none; }
}
@media (forced-colors: active) {
  body::before { display: none; }
  .quick-primary, .quick-secondary, .quick-action, .home-readiness, .vehicle-due,
  .vehicle-registration, .vehicle-confirm, .sheet, .drawer { background: Canvas; color: CanvasText; border-color: ButtonText; box-shadow: none; }
  .bottom-nav a.active::before { background: Highlight; border-color: Highlight; }
  .bottom-nav a.active { color: HighlightText; }
}
@media print {
  body::before { display: none; }
}
/* Induction chapters keep the existing driver theme and touch target sizes. */
.driver-induction progress{display:block;width:100%;height:9px;accent-color:#cf648e;margin:12px 0 18px}
.driver-induction summary{cursor:pointer;padding:16px 0;font-weight:600}
.driver-induction form{margin-top:20px}
.driver-induction .rows{margin-top:12px}
@media(max-width:480px){
  .training-history .row,.driver-induction .row:has([data-read-training]){display:grid;grid-template-columns:minmax(0,1fr) auto}
  .training-history .row-body,.driver-induction .row:has([data-read-training]) .row-body{grid-column:1/-1}
  .training-history .chip,.driver-induction .row:has([data-read-training]) .chip{justify-self:start}
}