:root {
  color-scheme: light;
  --bg: #f5f5f7;
  --ink: #1d1d1f;
  --muted: #6e6e73;
  --blue: #0071e3;
  --gold: #d4af37;
  --panel: rgba(255, 255, 255, .78);
  --line: rgba(29, 29, 31, .1);
  --shadow: 0 14px 38px rgba(29, 29, 31, .13);
  --plate-bg: #f9fafc;
  --plate-ink: #111827;
  --marker-place: #ffffff;
  --marker-place-ink: #243042;
}

body[data-skin="night-drive"] {
  color-scheme: dark;
  --bg: #07111e;
  --ink: #f4f8ff;
  --muted: #aab6c7;
  --blue: #4aa3ff;
  --gold: #ffd46b;
  --panel: rgba(10, 18, 31, .78);
  --line: rgba(255, 255, 255, .12);
  --shadow: 0 16px 44px rgba(0, 0, 0, .34);
  --plate-bg: #e9f1ff;
  --plate-ink: #06101e;
  --marker-place: #162235;
  --marker-place-ink: #dbeafe;
}

body[data-skin="moto-neon"] {
  color-scheme: dark;
  --bg: #0d0d11;
  --ink: #fffaf0;
  --muted: #cfc6aa;
  --blue: #00a8ff;
  --gold: #ffd23f;
  --panel: rgba(20, 20, 25, .78);
  --line: rgba(255, 210, 63, .18);
  --shadow: 0 16px 44px rgba(0, 0, 0, .36);
  --plate-bg: #fff8d7;
  --plate-ink: #17140a;
  --marker-place: #1b1820;
  --marker-place-ink: #ffd23f;
}

* { box-sizing: border-box; }

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
}

body {
  overflow: hidden;
  background: var(--bg);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

body.modal-open {
  overscroll-behavior: contain;
}

button,
input,
a {
  font: inherit;
}

button {
  cursor: pointer;
}

.app-shell,
.home-view {
  position: relative;
  width: 100%;
  min-height: 100dvh;
  overflow: hidden;
}

.home-view::after {
  content: "";
  position: fixed;
  top: calc(env(safe-area-inset-top) + 154px);
  left: 0;
  right: 0;
  z-index: 12;
  height: 38px;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(255,255,255,.11), transparent);
}

.view[hidden],
[hidden] {
  display: none !important;
}

.auth-view {
  height: 100dvh;
  display: grid;
  place-items: center;
  padding: calc(env(safe-area-inset-top) + 14px) 16px calc(env(safe-area-inset-bottom) + 14px);
  overflow: hidden;
  background:
    radial-gradient(circle at 16% 8%, color-mix(in srgb, var(--blue) 18%, transparent), transparent 30%),
    radial-gradient(circle at 82% 20%, color-mix(in srgb, var(--gold) 18%, transparent), transparent 28%),
    var(--bg);
}

.auth-card {
  width: min(420px, 100%);
  max-height: calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 28px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  display: grid;
  gap: 13px;
  padding: 20px 20px calc(env(safe-area-inset-bottom) + 96px);
  border: 1px solid var(--line);
  border-radius: 30px;
  background: var(--panel);
  box-shadow: 0 16px 44px rgba(29, 29, 31, .12);
  backdrop-filter: blur(12px);
}

.auth-brand {
  display: flex;
  align-items: center;
  gap: 12px;
}

.auth-brand > span {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 18px;
  color: #fff;
  background: linear-gradient(135deg, var(--ink), var(--blue));
  font-weight: 950;
}

.auth-brand h1 {
  margin: 2px 0 0;
  font-size: 28px;
  line-height: 1;
}

.auth-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  padding: 5px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: color-mix(in srgb, var(--panel) 68%, transparent);
}

.auth-tabs button {
  min-height: 38px;
  border: 0;
  border-radius: 14px;
  color: var(--muted);
  background: transparent;
  font-weight: 900;
}

.auth-tabs button.active {
  color: #fff;
  background: var(--blue);
}

.auth-stepper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}

.auth-stepper[hidden] {
  display: none;
}

.auth-stepper span {
  min-height: 34px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  background: rgba(255, 255, 255, .42);
  font-size: 12px;
  font-weight: 950;
}

.auth-stepper span.active {
  color: #fff;
  border-color: transparent;
  background: var(--blue);
}

.auth-form {
  display: grid;
  gap: 11px;
}

.auth-step-panel {
  display: grid;
  gap: 11px;
}

.auth-step-panel[hidden] {
  display: none;
}

.auth-form label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}

.auth-form input,
.auth-form select {
  width: 100%;
  min-height: 52px;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 0 13px;
  color: var(--ink);
  background: rgba(255, 255, 255, .64);
  font: inherit;
  font-size: 15px;
  font-weight: 850;
  outline: none;
}

.auth-form input:focus,
.auth-form select:focus {
  border-color: color-mix(in srgb, var(--blue) 60%, var(--line));
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--blue) 16%, transparent);
}

.register-vehicle-fields {
  display: grid;
  gap: 10px;
  margin: 2px 0 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(255, 255, 255, .44);
}

.register-vehicle-fields[hidden] {
  display: none;
}

.register-vehicle-fields legend {
  padding: 0 6px;
  color: var(--ink);
  font-size: 13px;
  font-weight: 950;
}

.vehicle-register-note {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 760;
  line-height: 1.35;
}

.fp-id-preview {
  margin: -2px 0 0;
  color: var(--blue);
  font-size: 12px;
  font-weight: 950;
}

.identifier-toggle {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}

.identifier-toggle label {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(255, 255, 255, .58);
  font-size: 12px;
  font-weight: 850;
  color: var(--ink);
}

.identifier-toggle input {
  width: auto;
  margin: 0;
  box-shadow: none;
}

.register-consents {
  display: grid;
  gap: 9px;
  margin: 0;
  padding: 0;
  border: 0;
}

.register-consents[hidden] {
  display: none;
}

.register-consents label {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 9px;
  align-items: start;
  min-height: 44px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: rgba(255, 255, 255, .42);
}

.register-consents input {
  width: 18px;
  height: 18px;
  margin-top: 1px;
  accent-color: var(--blue);
}

.register-consents span {
  color: var(--ink);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.35;
}

.register-photo-step {
  display: grid;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: 14px;
  background:
    radial-gradient(circle at 15% 10%, color-mix(in srgb, var(--blue) 12%, transparent), transparent 36%),
    rgba(255, 255, 255, .46);
}

.register-photo-step[hidden] {
  display: none;
}

.register-photo-step h2 {
  margin: 2px 0 4px;
  color: var(--ink);
  font-size: clamp(24px, 7vw, 31px);
  letter-spacing: 0;
}

.register-photo-step p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 760;
  line-height: 1.35;
}

.register-photo-step small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 760;
}

.register-success-step {
  display: grid;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: 16px;
  background:
    radial-gradient(circle at 85% 8%, color-mix(in srgb, #34c759 18%, transparent), transparent 34%),
    rgba(255, 255, 255, .52);
}

.register-success-step[hidden] {
  display: none;
}

.register-success-step h2 {
  margin: 0;
  color: var(--ink);
  font-size: clamp(24px, 7vw, 32px);
  letter-spacing: 0;
}

.register-success-step p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 780;
  line-height: 1.35;
}

.register-success-meta {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 12px;
  background: rgba(255, 255, 255, .46);
}

.register-success-meta span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
}

.register-success-meta b {
  color: var(--ink);
  font-size: 13px;
  font-weight: 950;
  text-align: right;
}

.register-success-photo {
  min-height: 156px;
  border: 1px solid rgba(255, 255, 255, .72);
  border-radius: 20px;
  background-size: cover;
  background-position: center;
  box-shadow: 0 18px 36px rgba(29, 29, 31, .12);
}

.register-success-photo[hidden] {
  display: none;
}

.vehicle-photo-preview {
  display: grid;
  place-items: center;
  min-height: 176px;
  border: 1px dashed color-mix(in srgb, var(--blue) 36%, var(--line));
  border-radius: 20px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.88), rgba(255,255,255,.42)),
    radial-gradient(circle at 22% 18%, color-mix(in srgb, var(--blue) 18%, transparent), transparent 32%);
  color: var(--blue);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.45);
  font-size: 38px;
  overflow: hidden;
}

.vehicle-photo-preview.has-photo {
  background-size: cover;
  background-position: center;
  border-style: solid;
}

.photo-step-actions {
  display: grid;
  gap: 8px;
}

.photo-step-actions button {
  min-height: 52px;
  border: 0;
  border-radius: 16px;
  color: #fff;
  background: var(--blue);
  font-weight: 950;
}

#skip-photo-step {
  color: var(--ink);
  background: rgba(255, 255, 255, .62);
  border: 1px solid var(--line);
}

.auth-form-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.auth-form-actions button:only-child,
.auth-form-actions #auth-submit:not([hidden]) {
  grid-column: auto;
}

#auth-submit:not([hidden]) {
  grid-column: 1 / -1;
}

.auth-form button,
.logout-button {
  min-height: 52px;
  border: 0;
  border-radius: 16px;
  color: #fff;
  background: var(--blue);
  font-weight: 950;
}

#auth-back {
  color: var(--ink);
  background: rgba(255, 255, 255, .58);
  border: 1px solid var(--line);
}

.auth-form button:disabled {
  opacity: .64;
  cursor: default;
}

.auth-message {
  min-height: 18px;
  margin: 0;
  color: #c2410c;
  font-size: 13px;
  font-weight: 850;
}

.auth-inline-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  margin-top: 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0 12px;
  color: var(--blue);
  background: rgba(255, 255, 255, .62);
  font: inherit;
  font-size: 12px;
  font-weight: 950;
}

.auth-view {
  display: grid;
  place-items: stretch center;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 0;
  background:
    radial-gradient(circle at 50% -8%, rgba(0, 113, 227, .24), transparent 28%),
    radial-gradient(circle at 90% 5%, rgba(69, 157, 255, .16), transparent 30%),
    linear-gradient(180deg, #eaf5ff 0%, #f7fbff 45%, #f4f7fb 100%);
}

.auth-view .auth-card {
  width: min(100%, 396px);
  min-height: 100dvh;
  max-height: none;
  gap: 7px;
  padding: calc(env(safe-area-inset-top) + 8px) 12px calc(env(safe-area-inset-bottom) + 12px);
  border: 0;
  border-radius: 0;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .40), rgba(255, 255, 255, .94)),
    radial-gradient(circle at 24% 10%, rgba(0, 113, 227, .12), transparent 32%);
  box-shadow: none;
  backdrop-filter: none;
  overflow: visible;
}

.auth-view .auth-brand {
  justify-content: center;
  gap: 10px;
  margin-top: 0;
}

.auth-logo-mark,
.auth-view .auth-brand > span {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 15px;
  color: #fff;
  background: linear-gradient(145deg, #0b87ff, #0054d8);
  box-shadow: 0 10px 24px rgba(0, 113, 227, .24);
  font-size: 22px;
  font-weight: 950;
}

.auth-view .auth-brand b {
  color: #0f172a;
  font-size: 28px;
  line-height: 1;
  letter-spacing: 0;
}

.auth-hero {
  position: relative;
  height: 142px;
  min-height: 0;
  max-height: 150px;
  margin: 0;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .82);
  border-radius: 24px;
  background:
    linear-gradient(145deg, rgba(255,255,255,.80), rgba(220,239,255,.50)),
    radial-gradient(circle at 66% 24%, rgba(0, 113, 227, .24), transparent 21%),
    radial-gradient(circle at 18% 72%, rgba(0, 113, 227, .15), transparent 25%),
    repeating-linear-gradient(24deg, transparent 0 24px, rgba(20, 95, 170, .075) 25px 27px),
    repeating-linear-gradient(112deg, transparent 0 32px, rgba(20, 95, 170, .065) 33px 35px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.88), 0 10px 22px rgba(31, 64, 106, .07);
}

.auth-hero-brand {
  position: absolute;
  top: 8px;
  left: 50%;
  z-index: 6;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  transform: translateX(-50%);
}

.auth-hero-brand .auth-logo-mark {
  width: 30px;
  height: 30px;
  border-radius: 9px;
  box-shadow: 0 7px 16px rgba(0, 113, 227, .22);
  font-size: 14px;
}

.auth-hero-brand b {
  color: #0f172a;
  font-size: 18px;
  line-height: 1;
  letter-spacing: 0;
}

.auth-hero::before {
  content: "";
  position: absolute;
  left: -18%;
  right: -18%;
  bottom: 13px;
  height: 34px;
  border-radius: 999px;
  background:
    linear-gradient(90deg, transparent 0 10%, rgba(255,255,255,.86) 10% 90%, transparent 90%),
    repeating-linear-gradient(90deg, transparent 0 34px, rgba(0, 113, 227, .18) 35px 52px, transparent 53px 78px);
  opacity: .72;
  transform: rotate(-12deg);
}

.auth-hero::after {
  content: "";
  position: absolute;
  top: 24px;
  right: 22%;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(0, 113, 227, .18) 0 11%, transparent 12%),
    repeating-radial-gradient(circle, rgba(0, 113, 227, .18) 0 1px, transparent 2px 17px);
  opacity: .64;
}

.auth-map-grid {
  position: absolute;
  inset: 8px -28px -12px;
  z-index: 0;
  transform: rotate(-5deg);
  background:
    linear-gradient(90deg, transparent 0 48%, rgba(33, 122, 210, .14) 49% 51%, transparent 52%),
    linear-gradient(0deg, transparent 0 48%, rgba(33, 122, 210, .12) 49% 51%, transparent 52%);
  background-size: 50px 38px;
  opacity: .70;
}

.auth-pin {
  position: absolute;
  top: 38px;
  left: 61%;
  z-index: 2;
  width: 19px;
  height: 19px;
  border-radius: 50% 50% 50% 0;
  background: linear-gradient(145deg, #1395ff, #005ce6);
  transform: rotate(-45deg);
  box-shadow: 0 8px 16px rgba(0, 113, 227, .22);
}

.auth-pin::after {
  content: "";
  position: absolute;
  inset: 5px;
  border-radius: 50%;
  background: #fff;
}

.auth-orbit {
  position: absolute;
  display: grid;
  place-items: center;
  z-index: 3;
  width: 34px;
  height: 34px;
  border: 2px solid #fff;
  border-radius: 50%;
  background: rgba(255,255,255,.82);
  box-shadow: 0 8px 16px rgba(39, 76, 126, .10);
}

.auth-orbit b {
  font-size: 14px;
}

.auth-orbit i {
  position: absolute;
  right: -1px;
  bottom: 2px;
  width: 9px;
  height: 9px;
  border: 2px solid #fff;
  border-radius: 50%;
  background: #19c763;
}

.auth-orbit-a { top: 40px; left: 18px; }
.auth-orbit-b { right: 19px; bottom: 17px; }
.auth-orbit-c {
  left: 22px;
  bottom: 22px;
  width: 29px;
  height: 29px;
}

.auth-orbit-c i {
  background: #1395ff;
}

.auth-plate-card {
  position: absolute;
  left: 50%;
  bottom: 30px;
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  align-items: center;
  z-index: 4;
  width: min(70%, 214px);
  min-height: 42px;
  border: 2px solid #1f65b8;
  border-radius: 9px;
  overflow: hidden;
  transform: translateX(-50%) rotate(-3deg);
  background: #f8fbff;
  box-shadow: 0 9px 18px rgba(31, 101, 184, .18);
}

.auth-plate-card span {
  display: grid;
  place-items: end center;
  height: 100%;
  padding: 0 0 6px;
  color: #fff;
  background: #0057cf;
  font-size: 12px;
  font-weight: 950;
}

.auth-plate-card b {
  color: #14233d;
  text-align: center;
  font-size: 24px;
  letter-spacing: 1px;
}

.auth-headline {
  display: grid;
  gap: 2px;
  text-align: center;
}

.auth-headline h1 {
  margin: 0;
  color: #0f172a;
  font-size: 34px;
  line-height: 1;
  letter-spacing: 0;
}

.auth-headline p {
  margin: 0;
  color: #7d8796;
  font-size: 14px;
  font-weight: 760;
}

.auth-view .auth-tabs {
  min-height: 52px;
  gap: 0;
  padding: 4px;
  border: 1px solid rgba(148, 163, 184, .2);
  border-radius: 19px;
  background: rgba(255, 255, 255, .64);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.7), 0 10px 22px rgba(31, 64, 106, .07);
}

.auth-view .auth-tabs button {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 15px;
  color: #172033;
  font-size: 14px;
  font-weight: 900;
}

.auth-view .auth-tabs button.active {
  color: #fff;
  background: linear-gradient(145deg, #078aff, #005ee8);
  box-shadow: 0 10px 20px rgba(0, 113, 227, .22);
}

.auth-view .auth-form {
  gap: 7px;
}

.auth-view .auth-step-panel,
.auth-identity-context,
.auth-view .register-vehicle-fields,
.auth-view .register-consents,
.auth-view .register-photo-step,
.auth-view .register-success-step {
  border: 1px solid rgba(148, 163, 184, .18);
  border-radius: 18px;
  padding: 9px;
  background: rgba(255, 255, 255, .66);
  box-shadow: 0 12px 26px rgba(31, 64, 106, .07);
}

.auth-view .auth-step-panel {
  gap: 0;
  padding: 1px 10px 9px;
}

.auth-view .auth-step-panel label,
.auth-context-input {
  position: relative;
  display: grid;
  min-height: 48px;
  gap: 0;
  color: #8b95a6;
  font-size: 0;
}

.auth-view .auth-step-panel label + label {
  border-top: 1px solid rgba(148, 163, 184, .22);
}

.auth-input-icon {
  position: absolute;
  left: 2px;
  top: 50%;
  z-index: 1;
  transform: translateY(-50%);
  color: #7a8496;
  font-size: 17px;
}

.auth-view .auth-form input,
.auth-view .auth-form select {
  min-height: 48px;
  border: 0;
  border-radius: 14px;
  padding: 0 8px 0 31px;
  color: #182235;
  background: transparent;
  font-size: 15px;
  font-weight: 780;
}

.auth-view .auth-form input::placeholder {
  color: #a4acba;
  font-weight: 720;
}

.auth-view .auth-form input:focus,
.auth-view .auth-form select:focus {
  box-shadow: none;
}

.auth-view .identifier-toggle input,
.auth-view .register-consents input {
  width: 18px;
  min-height: 18px;
  height: 18px;
  padding: 0;
  accent-color: var(--blue);
}

.auth-identity-context {
  display: grid;
  gap: 6px;
  margin: 8px -1px 0;
}

.auth-identity-context[hidden] {
  display: none !important;
}

.auth-identity-context > b {
  color: #667085;
  font-size: 12px;
}

.auth-context-toggle,
.auth-view .identifier-toggle {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}

.auth-context-toggle button,
.auth-view .identifier-toggle label {
  min-height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 8px;
  border: 1px solid rgba(148, 163, 184, .28);
  border-radius: 12px;
  color: #667085;
  background: rgba(255,255,255,.58);
  font-size: 13px;
  font-weight: 900;
}

.auth-context-toggle button.active,
.auth-view .identifier-toggle label:has(input:checked) {
  border-color: rgba(0, 113, 227, .78);
  color: var(--blue);
  box-shadow: inset 0 0 0 1px rgba(0, 113, 227, .18);
}

.auth-context-input {
  min-height: 44px;
  border: 1px solid rgba(148, 163, 184, .22);
  border-radius: 12px;
  background: rgba(255,255,255,.58);
}

.auth-context-input input {
  padding-right: 42px;
}

.auth-context-input button {
  position: absolute;
  right: 7px;
  top: 50%;
  width: 32px;
  min-height: 32px;
  border-radius: 10px;
  transform: translateY(-50%);
  color: var(--blue);
  background: transparent;
  font-size: 18px;
}

.auth-view .register-vehicle-fields {
  gap: 7px;
}

.auth-view .register-vehicle-fields label {
  gap: 5px;
  color: #667085;
  font-size: 12px;
}

.auth-view .register-vehicle-fields input,
.auth-view .register-vehicle-fields select {
  border: 1px solid rgba(148, 163, 184, .22);
  padding: 0 12px;
  background: rgba(255,255,255,.58);
}

.auth-view .register-vehicle-fields legend {
  color: #0f172a;
  font-size: 14px;
}

.auth-view .register-consents label {
  grid-template-columns: 24px minmax(0, 1fr);
  min-height: 42px;
  border-radius: 14px;
}

.auth-view .auth-form-actions {
  gap: 7px;
}

.auth-view #auth-submit:not([hidden]),
.auth-view #auth-next:not([hidden]),
.auth-view #enter-findplate {
  min-height: 56px;
  border-radius: 18px;
  background: linear-gradient(145deg, #078aff, #005ee8);
  box-shadow: 0 13px 26px rgba(0, 113, 227, .22);
  font-size: 16px;
  white-space: nowrap;
}

.auth-view #auth-back {
  min-height: 46px;
  border-radius: 15px;
}

.auth-secondary-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  align-items: center;
  padding: 2px 0 0;
}

.auth-secondary-actions button {
  min-height: 31px;
  border: 0;
  border-radius: 0;
  color: var(--blue);
  background: transparent;
  font-size: 12px;
  font-weight: 900;
}

.auth-secondary-actions button + button {
  border-left: 1px solid rgba(148, 163, 184, .28);
}

.auth-view .auth-message {
  text-align: center;
  font-size: 12px;
}

.auth-feature-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 5px;
  max-height: 92px;
  padding: 7px;
  border: 1px solid rgba(148, 163, 184, .16);
  border-radius: 17px;
  background: rgba(255,255,255,.68);
  box-shadow: 0 10px 22px rgba(31, 64, 106, .06);
}

.auth-feature-strip article {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 5px;
  align-items: center;
}

.auth-feature-strip span {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--blue);
  background: rgba(0, 113, 227, .13);
  font-size: 16px;
}

.auth-feature-strip b,
.auth-feature-strip small {
  display: block;
  grid-column: 2;
  min-width: 0;
}

.auth-feature-strip b {
  color: #172033;
  font-size: 11px;
}

.auth-feature-strip small {
  color: #667085;
  font-size: 9px;
  font-weight: 720;
  line-height: 1.1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.auth-permission-note {
  margin: -2px 0 0;
  color: #7d8796;
  text-align: center;
  font-size: 11px;
  font-weight: 760;
}

.auth-view .auth-card.auth-shell {
  justify-content: center;
  gap: 12px;
  padding: calc(env(safe-area-inset-top) + 24px) 18px calc(env(safe-area-inset-bottom) + 24px);
}

.auth-view .auth-card.auth-shell .auth-hero {
  height: 112px;
  max-height: 112px;
  border-radius: 22px;
  background:
    linear-gradient(145deg, rgba(255,255,255,.92), rgba(226,241,255,.62)),
    radial-gradient(circle at 28% 26%, rgba(0, 113, 227, .18), transparent 22%),
    radial-gradient(circle at 74% 62%, rgba(69, 157, 255, .14), transparent 24%),
    repeating-linear-gradient(28deg, transparent 0 26px, rgba(20, 95, 170, .06) 27px 29px),
    repeating-linear-gradient(118deg, transparent 0 38px, rgba(20, 95, 170, .045) 39px 41px);
}

.auth-view .auth-card.auth-shell .auth-hero::before {
  bottom: 18px;
  height: 24px;
  opacity: .36;
}

.auth-view .auth-card.auth-shell .auth-hero::after {
  display: none;
}

.auth-view .auth-card.auth-shell .auth-map-grid {
  opacity: .32;
}

.auth-abstract-dot {
  position: absolute;
  z-index: 2;
  display: block;
  border-radius: 999px;
  background: rgba(0, 113, 227, .14);
  box-shadow: 0 12px 24px rgba(0, 113, 227, .08);
}

.auth-abstract-dot-a {
  width: 34px;
  height: 34px;
  left: 34px;
  bottom: 22px;
}

.auth-abstract-dot-b {
  width: 22px;
  height: 22px;
  right: 42px;
  top: 24px;
}

.auth-abstract-line {
  position: absolute;
  left: 18%;
  right: 16%;
  bottom: 34px;
  z-index: 1;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(0, 113, 227, .28), transparent);
}

.auth-closed-status {
  display: grid;
  place-items: center;
  min-height: 44px;
  border: 1px solid rgba(148, 163, 184, .20);
  border-radius: 16px;
  color: #172033;
  background: rgba(255, 255, 255, .72);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.7), 0 10px 22px rgba(31, 64, 106, .06);
  font-size: 14px;
  font-weight: 920;
}

.auth-view .auth-card.auth-shell .auth-headline h1 {
  font-size: 32px;
}

.auth-view .auth-card.auth-shell .auth-headline p {
  color: #64748b;
  font-size: 13px;
}

.auth-view .auth-card.auth-shell .auth-step-panel {
  padding: 3px 12px;
}

.auth-view .auth-card.auth-shell .auth-step-panel label {
  min-height: 52px;
}

.auth-view .auth-card.auth-shell #auth-submit:not([hidden]) {
  min-height: 54px;
}

.auth-view .auth-card.auth-shell .auth-permission-note {
  margin-top: 2px;
  color: #64748b;
  font-size: 12px;
}

.auth-view .auth-card.auth-shell .auth-feature-strip,
.auth-view .auth-card.auth-shell .auth-tabs,
.auth-view .auth-card.auth-shell .auth-secondary-actions,
.auth-view .auth-card.auth-shell .auth-identity-context {
  display: none !important;
}

.auth-view .vehicle-photo-preview {
  min-height: 142px;
  font-size: 32px;
}

@media (max-height: 760px) {
  .auth-view .auth-card {
    gap: 5px;
    padding: calc(env(safe-area-inset-top) + 6px) 10px calc(env(safe-area-inset-bottom) + 10px);
  }

  .auth-hero {
    height: 126px;
    max-height: 132px;
    border-radius: 21px;
  }

  .auth-hero-brand {
    top: 7px;
  }

  .auth-hero-brand .auth-logo-mark {
    width: 27px;
    height: 27px;
    border-radius: 8px;
    font-size: 13px;
  }

  .auth-hero-brand b {
    font-size: 16px;
  }

  .auth-plate-card {
    bottom: 26px;
    width: min(68%, 198px);
    min-height: 38px;
    grid-template-columns: 29px minmax(0, 1fr);
  }

  .auth-plate-card b {
    font-size: 22px;
  }

  .auth-orbit {
    width: 30px;
    height: 30px;
  }

  .auth-orbit b {
    font-size: 13px;
  }

  .auth-orbit-a { top: 36px; left: 16px; }
  .auth-orbit-b { right: 16px; bottom: 15px; }
  .auth-orbit-c {
    left: 19px;
    bottom: 20px;
    width: 26px;
    height: 26px;
  }

  .auth-headline h1 {
    font-size: 30px;
  }

  .auth-headline p {
    font-size: 12px;
  }

  .auth-view .auth-tabs {
    min-height: 46px;
    border-radius: 17px;
  }

  .auth-view .auth-tabs button {
    min-height: 38px;
    font-size: 13px;
  }

  .auth-view .auth-step-panel label,
  .auth-context-input,
  .auth-view .auth-form input,
  .auth-view .auth-form select {
    min-height: 44px;
  }

  .auth-context-toggle button,
  .auth-view .identifier-toggle label {
    min-height: 34px;
  }

  .auth-view #auth-submit:not([hidden]),
  .auth-view #auth-next:not([hidden]),
  .auth-view #enter-findplate {
    min-height: 52px;
  }

  .auth-secondary-actions button {
    min-height: 28px;
  }

  .auth-feature-strip {
    padding: 6px;
  }

  .auth-feature-strip span {
    width: 28px;
    height: 28px;
  }

  .auth-feature-strip small,
  .auth-permission-note {
    display: none;
  }
}

@media (min-width: 500px) {
  .auth-view {
    padding: 18px;
    place-items: center;
  }

  .auth-view .auth-card {
    min-height: auto;
    max-height: calc(100dvh - 36px);
    overflow-y: auto;
    border: 1px solid rgba(148, 163, 184, .22);
    border-radius: 38px;
    box-shadow: 0 28px 70px rgba(31, 64, 106, .14);
  }
}


.map-area {
  position: fixed;
  inset: calc(env(safe-area-inset-top) + 166px) 0 0;
  z-index: 0;
  background: #dfe8f0;
  min-height: 280px;
  overflow: hidden;
  contain: layout size paint;
}

.map {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  min-height: 100%;
  overflow: hidden;
  background: transparent;
}

.map-area > .map,
.map > div,
.map .gm-style {
  width: 100% !important;
  height: 100% !important;
}

.map > .gm-style {
  position: absolute !important;
  inset: 0 !important;
}

.map > div {
  min-height: 100% !important;
}

.gm-style {
  display: block !important;
  min-height: 100% !important;
  opacity: 1 !important;
  visibility: visible !important;
  font-family: inherit;
}

body.map-debug-mode .map-area {
  outline: 2px solid rgba(239, 68, 68, .9);
  outline-offset: -2px;
}

body.map-debug-mode #map {
  outline: 2px solid rgba(245, 158, 11, .95);
  outline-offset: -6px;
}

body.map-debug-mode #map .gm-style {
  outline: 2px solid rgba(37, 99, 235, .95);
  outline-offset: -4px;
}

.gm-style-cc,
.gmnoprint {
  opacity: .68;
}

.map-provider-debug-chip {
  position: fixed;
  right: 12px;
  bottom: calc(env(safe-area-inset-bottom) + 92px);
  z-index: 90;
  display: grid;
  gap: 2px;
  max-width: calc(100vw - 24px);
  border: 1px solid rgba(15, 23, 42, .12);
  border-radius: 999px;
  padding: 7px 10px;
  color: #0f172a;
  background: rgba(255, 255, 255, .94);
  box-shadow: 0 10px 24px rgba(15, 23, 42, .12);
  font-size: 11px;
  font-weight: 900;
  pointer-events: none;
}

.map-provider-debug-chip small {
  color: rgba(15, 23, 42, .62);
  font-size: 9px;
  font-weight: 800;
}

.map-provider-error-panel {
  position: absolute;
  left: 50%;
  top: 42%;
  z-index: 8;
  display: grid;
  gap: 7px;
  width: min(340px, calc(100vw - 32px));
  transform: translate(-50%, -50%);
  border: 1px solid rgba(239, 68, 68, .22);
  border-radius: 20px;
  padding: 18px;
  color: #7f1d1d;
  background: rgba(255, 255, 255, .96);
  box-shadow: 0 18px 44px rgba(127, 29, 29, .14);
  text-align: center;
}

.map-provider-error-panel b {
  color: #991b1b;
  font-size: 18px;
}

.map-provider-error-panel span,
.map-provider-error-panel small {
  font-size: 12px;
  font-weight: 850;
}

.map-provider-error-panel small {
  color: rgba(127, 29, 29, .68);
}

.map-provider-error-panel code {
  display: block;
  overflow-wrap: anywhere;
  border-radius: 10px;
  padding: 6px 8px;
  color: rgba(127, 29, 29, .78);
  background: rgba(254, 226, 226, .62);
  font-size: 10px;
  font-weight: 800;
}

.leaflet-tile-pane {
  filter: saturate(.9) contrast(.98) brightness(1.02);
}

body[data-skin="night-drive"] .leaflet-tile-pane,
body[data-skin="moto-neon"] .leaflet-tile-pane {
  filter: grayscale(.35) invert(.9) hue-rotate(180deg) brightness(.68) contrast(1.1);
}

.topbar,
.shortcut-strip,
.roadtalk-live,
.add-studio-fab,
.plate-cta,
.fp-bottom-nav,
.nav-dock,
.sheet {
  position: fixed;
}

.topbar {
  top: calc(env(safe-area-inset-top) + 8px);
  left: 16px;
  right: 16px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  z-index: 42;
}

.mini-brand {
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  justify-self: start;
}

.mini-brand button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 38px;
  border: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
  border-radius: 999px;
  padding: 0 10px 0 12px;
  color: var(--ink);
  background: color-mix(in srgb, var(--panel) 58%, transparent);
  box-shadow: 0 8px 18px rgba(29, 29, 31, .075);
  backdrop-filter: blur(8px);
  font-size: 14px;
  font-weight: 900;
  letter-spacing: -.01em;
}

.mini-brand #feed-filter-toggle {
  flex: 0 1 auto;
  min-width: 0;
}

.mini-brand button span {
  font-weight: 950;
}

.mini-brand button b {
  min-height: 23px;
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 0 8px;
  color: #fff;
  background: var(--blue);
  font-size: 11px;
  font-weight: 900;
}

.mini-brand .map-layers-top-toggle {
  flex: 0 0 auto;
  gap: 5px;
  min-height: 36px;
  padding: 0 10px;
  color: color-mix(in srgb, var(--ink) 72%, var(--blue));
  background: color-mix(in srgb, var(--panel) 50%, transparent);
  font-size: 12px;
}

.map-layers-top-toggle i {
  display: grid;
  place-items: center;
  width: 19px;
  height: 19px;
  border-radius: 7px;
  color: #fff;
  background: linear-gradient(135deg, var(--blue), #075ec5);
  font-style: normal;
  font-size: 12px;
  line-height: 1;
}

.map-layers-top-toggle.active,
.map-layers-top-toggle:active {
  color: var(--blue);
  border-color: color-mix(in srgb, var(--blue) 26%, var(--line));
  background: color-mix(in srgb, var(--blue) 8%, white 92%);
}

.vehicle-avatar,
.top-actions button,
.fp-marker span {
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: linear-gradient(135deg, var(--ink), var(--blue));
  font-weight: 900;
}

.vehicle-avatar {
  width: 58px;
  height: 58px;
  border: 2px solid rgba(255, 255, 255, .88);
  font-size: 18px;
  box-shadow:
    0 16px 38px rgba(0, 71, 145, .22),
    0 0 0 3px color-mix(in srgb, var(--blue) 18%, transparent);
  cursor: pointer;
}

.vehicle-avatar::before {
  content: "🏍";
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 34% 24%, rgba(255,255,255,.94), transparent 24%),
    linear-gradient(135deg, #f8fafc, #dbeafe 42%, #0071e3);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .62);
  font-size: 22px;
}

.top-actions {
  grid-column: 2;
  display: flex;
  gap: 8px;
}

.top-actions button {
  width: 38px;
  height: 38px;
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--ink);
  box-shadow: 0 6px 14px rgba(29, 29, 31, .07);
  backdrop-filter: blur(8px);
}

.mic-ai-button {
  position: relative;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--ink);
  background: color-mix(in srgb, var(--panel) 88%, #fff 12%);
  box-shadow: 0 8px 18px rgba(29, 29, 31, .09);
  backdrop-filter: blur(8px);
}

.mic-ai-button .mic-icon {
  font-size: 18px;
  line-height: 1;
}

.mic-ai-button .ai-badge {
  position: absolute;
  right: -5px;
  bottom: -4px;
  display: grid;
  place-items: center;
  min-width: 18px;
  height: 16px;
  border: 1px solid rgba(255, 255, 255, .78);
  border-radius: 999px;
  color: #fff;
  background: linear-gradient(135deg, var(--blue), var(--gold));
  box-shadow: 0 6px 14px rgba(0, 113, 227, .28);
  font-size: 9px;
  font-weight: 950;
  letter-spacing: .02em;
}

.shortcut-strip {
  top: calc(env(safe-area-inset-top) + 50px);
  left: 8px;
  right: 8px;
  z-index: 36;
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  grid-template-rows: 88px;
  gap: 0 6px;
  min-height: 100px;
  border: 1px solid color-mix(in srgb, var(--line) 32%, transparent);
  border-radius: 18px;
  padding: 5px 0 6px 5px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--panel) 34%, transparent), color-mix(in srgb, var(--panel) 18%, transparent));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.42),
    0 4px 12px rgba(29, 29, 31, .03);
  backdrop-filter: blur(8px) saturate(1.02);
  pointer-events: none;
}

.social-shelf-head {
  display: contents;
}

.active-profile-head {
  position: relative;
  grid-column: 1;
  grid-row: 1;
  align-self: start;
  display: grid;
  justify-items: center;
  grid-template-rows: 64px 18px;
  align-content: start;
  gap: 2px;
  border: 0;
  border-radius: 15px;
  padding: 2px 3px 0;
  color: var(--ink);
  background:
    linear-gradient(180deg, color-mix(in srgb, #fff 30%, transparent), color-mix(in srgb, var(--panel) 18%, transparent));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.2);
  pointer-events: auto;
}

.active-profile-head::after {
  content: "+";
  position: absolute;
  right: 7px;
  top: 42px;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border: 2px solid rgba(255, 255, 255, .96);
  border-radius: 999px;
  color: #fff;
  background: linear-gradient(135deg, var(--blue), #0b58d8);
  box-shadow: 0 7px 14px rgba(0, 81, 201, .24);
  font-size: 17px;
  font-weight: 950;
  line-height: 1;
}

.active-profile-photo {
  display: grid;
  place-items: center;
  width: 62px;
  height: 62px;
  border: 3px solid rgba(255, 255, 255, .9);
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 23%, rgba(255,255,255,.94), transparent 23%),
    radial-gradient(circle at 57% 57%, #243042 0 9%, transparent 10%),
    linear-gradient(135deg, #f8fafc, #dbeafe 42%, var(--blue));
  box-shadow:
    0 8px 18px rgba(0, 113, 227, .11),
    0 0 0 3px color-mix(in srgb, var(--blue) 22%, transparent);
  font-size: 23px;
}

.active-profile-photo.has-photo {
  background-size: cover;
  background-position: center;
}

.active-profile-head b {
  max-width: 78px;
  overflow: hidden;
  font-size: 11px;
  line-height: 1.05;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.active-profile-head i {
  position: absolute;
  left: 4px;
  top: 52px;
  z-index: 3;
  border-radius: 999px;
  padding: 2px 5px;
  color: #fff;
  background: #34c759;
  font-size: 7px;
  font-style: normal;
  font-weight: 950;
  letter-spacing: .04em;
}

.alert-count-badge {
  position: absolute;
  right: 4px;
  top: 4px;
  display: grid;
  place-items: center;
  min-width: 22px;
  height: 22px;
  border: 2px solid rgba(255, 255, 255, .95);
  border-radius: 999px;
  color: #fff;
  background: #ff3b30;
  box-shadow: 0 8px 18px rgba(255, 59, 48, .22);
  font-size: 11px;
  font-weight: 950;
  line-height: 1;
}

.stories b {
  overflow: hidden;
  max-width: 82px;
  height: 18px;
  font-size: 12px;
  line-height: 18px;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.stories small {
  display: none;
  color: var(--blue);
  font-size: 11px;
  font-weight: 950;
  line-height: 1;
}

.stories {
  display: flex;
  grid-column: 2;
  grid-row: 1;
  align-self: start;
  gap: 8px;
  overflow-x: auto;
  padding: 2px 24px 1px 0;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  pointer-events: auto;
}

.stories::-webkit-scrollbar { display: none; }

.stories button {
  flex: 0 0 auto;
  position: relative;
  display: grid;
  grid-template-rows: 64px 18px;
  justify-items: center;
  align-items: start;
  gap: 0;
  width: 82px;
  min-height: 82px;
  border: 0;
  padding: 0;
  color: var(--ink);
  background: transparent;
  scroll-snap-align: start;
}

.shortcut-avatar {
  position: relative;
  display: grid;
  place-items: center;
  width: 62px;
  height: 62px;
  overflow: hidden;
  border: 3px solid rgba(255, 255, 255, .9);
  border-radius: 50%;
  color: #fff;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.35),
    0 8px 16px rgba(29, 29, 31, .085),
    0 0 0 2px color-mix(in srgb, var(--blue) 14%, transparent);
  font-size: 18px;
  font-weight: 950;
}

.stories button.active .shortcut-avatar {
  box-shadow:
    0 9px 18px rgba(29, 29, 31, .11),
    0 0 0 4px color-mix(in srgb, var(--blue) 24%, transparent);
}

.stories i {
  position: absolute;
  right: 4px;
  top: 48px;
  max-width: 42px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .82);
  border-radius: 999px;
  padding: 2px 4px;
  color: #fff;
  background: linear-gradient(135deg, var(--blue), #179fff);
  box-shadow: 0 5px 10px rgba(0, 113, 227, .16);
  font-size: 8px;
  font-style: normal;
  font-weight: 950;
  line-height: 1;
  text-overflow: ellipsis;
  text-transform: uppercase;
}

.story-moto { background: linear-gradient(135deg, #1d1d1f, #0071e3); }
.photo-wisla { background: radial-gradient(circle at 46% 42%, rgba(255,255,255,.68) 0 6%, transparent 7%), linear-gradient(135deg, #0b6b59, #98e7ff 46%, #0b5fbe); }
.photo-silesia { background: radial-gradient(circle at 50% 38%, #f2f8ff 0 15%, transparent 16%), radial-gradient(circle at 62% 42%, rgba(255,255,255,.42), transparent 18%), linear-gradient(135deg, #0071e3, #09203b 72%); }
.photo-spot { background: radial-gradient(circle at 62% 38%, rgba(255,255,255,.62) 0 9%, transparent 10%), linear-gradient(135deg, #210f34, #a855f7 48%, #ff9f0a); }
.photo-roadtalk { background: radial-gradient(circle at 50% 42%, #f8fafc 0 10%, transparent 11%), linear-gradient(135deg, #07111e, #00a8ff 55%, #34c759); }
.photo-places { background: radial-gradient(circle at 35% 30%, rgba(255,255,255,.76), transparent 18%), linear-gradient(135deg, #dff8e8, #1f9d61 52%, #0f5132); }
.photo-reels { background: radial-gradient(circle at 64% 42%, #fff 0 10%, transparent 11%), conic-gradient(from 210deg, #1d1d1f, #d4af37, #0071e3, #1d1d1f); }
.photo-trip { background: radial-gradient(circle at 58% 40%, rgba(255,255,255,.58), transparent 16%), linear-gradient(135deg, #e7f0ff, #0071e3 52%, #08345f); }
.friend-kamil { background: radial-gradient(circle at 50% 34%, #f7c59f 0 18%, transparent 19%), radial-gradient(circle at 50% 62%, #111827 0 18%, transparent 19%), linear-gradient(135deg, #111827, #22c55e); }
.friend-anka { background: radial-gradient(circle at 50% 34%, #f3c4d9 0 18%, transparent 19%), radial-gradient(circle at 50% 62%, #111827 0 18%, transparent 19%), linear-gradient(135deg, #111827, #34d399); }
.friend-bmw { background: radial-gradient(circle at 50% 50%, #fff 0 20%, transparent 21%), conic-gradient(#111827, #0071e3 25%, #f8fafc 0 50%, #111827 0 75%, #0071e3 0); }

.roadtalk-live {
  position: fixed;
  display: none;
  top: calc(env(safe-area-inset-top) + 166px);
  right: 14px;
  left: auto;
  z-index: 58;
  align-items: center;
  gap: 6px;
  width: auto;
  max-width: min(188px, calc(100vw - 28px));
  min-height: 34px;
  border: 1px solid rgba(0, 113, 227, .16);
  border-radius: 999px;
  padding: 0 12px;
  color: #0f172a;
  background: rgba(255, 255, 255, .94);
  box-shadow: 0 12px 28px rgba(15, 23, 42, .14);
  backdrop-filter: blur(14px);
  font-size: 11px;
  font-weight: 900;
  text-align: left;
  white-space: nowrap;
}

.roadtalk-live.is-visible {
  display: inline-flex !important;
}

.roadtalk-live.is-speaking {
  border-color: rgba(16, 185, 129, .24);
  color: #047857;
  box-shadow: 0 10px 24px rgba(16, 185, 129, .16);
}

.roadtalk-live.needs-resume {
  border-color: rgba(245, 158, 11, .2);
  color: #92400e;
}

.roadtalk-live span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 0 4px rgba(34, 197, 94, .16);
}

.roadtalk-live.is-speaking span {
  animation: fpRoadTalkNavPulse 1.25s ease-in-out infinite;
}

.plate-cta {
  --hold-progress: 0%;
  left: 50%;
  bottom: calc(env(safe-area-inset-bottom) + 14px);
  display: grid;
  grid-template-columns: 72px 48px minmax(0, 1fr);
  gap: 4px;
  align-items: center;
  width: min(430px, calc(100vw - 32px));
  min-height: 58px;
  overflow: hidden;
  border: 2px solid color-mix(in srgb, #12213a 30%, var(--blue) 10%);
  border-radius: 18px;
  padding: 5px;
  color: var(--plate-ink);
  background:
    linear-gradient(180deg, rgba(255,255,255,.88), rgba(255,255,255,.24)),
    var(--plate-bg);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.85),
    inset 0 -10px 18px rgba(15,23,42,.035),
    0 10px 24px rgba(29, 29, 31, .16);
  transform: translateX(-50%);
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  z-index: 40;
}

.plate-cta::after {
  content: "";
  position: absolute;
  left: 6px;
  right: auto;
  bottom: 5px;
  width: var(--hold-progress);
  max-width: calc(100% - 12px);
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--blue), #34c759);
  opacity: 0;
  transition: width 120ms linear, opacity 120ms ease;
  pointer-events: none;
}

.plate-cta:active {
  transform: translateX(-50%) scale(.985);
}

.plate-cta.holding,
.plate-cta.voice-ready {
  border-color: color-mix(in srgb, var(--blue) 46%, #12213a 20%);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--blue) 14%, #fff 86%), rgba(255,255,255,.24)),
    var(--plate-bg);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.9),
    inset 0 -10px 18px rgba(15,23,42,.045),
    0 12px 26px rgba(0, 122, 255, .2);
}

.plate-cta.holding::after,
.plate-cta.voice-ready::after {
  opacity: 1;
}

.plate-cta .plate-country-chip {
  display: grid;
  place-items: center;
  height: 100%;
  min-height: 46px;
  border-radius: 13px;
  align-self: stretch;
  color: #fff;
  background: #1f5fbd;
  font-size: 12px;
  font-weight: 950;
  letter-spacing: .04em;
}

.plate-cta[data-country]:not([data-country="PL"]) .plate-country-chip {
  color: var(--ink);
  background: color-mix(in srgb, var(--panel) 86%, #fff 14%);
  border-right: 1px solid var(--line);
}

.plate-cta b {
  justify-self: center;
  padding: 0 10px;
  overflow: hidden;
  color: var(--plate-ink);
  font-size: clamp(12px, 3vw, 14px);
  font-weight: 950;
  letter-spacing: .018em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.plate-mic-ai {
  position: relative;
  display: grid;
  place-items: center;
  justify-self: center;
  width: 44px;
  height: 46px;
  border: 1px solid color-mix(in srgb, var(--blue) 20%, transparent);
  border-radius: 13px;
  color: var(--blue);
  background: color-mix(in srgb, #fff 72%, var(--blue) 8%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.64);
  font-style: normal;
  font-size: 19px;
}

.plate-mic-ai .mic-icon {
  transform: translateY(1px);
}

.plate-mic-ai .ai-badge {
  right: -4px;
  bottom: -4px;
  min-width: 17px;
  height: 15px;
  font-size: 8px;
}

.plate-cta.holding .plate-mic-ai,
.plate-cta.voice-ready .plate-mic-ai {
  color: #fff;
  border-color: transparent;
  background: linear-gradient(180deg, var(--blue), #0057d9);
  box-shadow: 0 0 0 4px rgba(0, 122, 255, .12);
}

.plate-cta {
  display: none !important;
}

.map-chips {
  position: fixed;
  top: calc(env(safe-area-inset-top) + 174px);
  left: 12px;
  right: 12px;
  z-index: 34;
  display: flex;
  gap: 6px;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 0 46px 4px 4px;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  pointer-events: auto;
  touch-action: pan-x;
  opacity: .86;
}

.map-chips::-webkit-scrollbar { display: none; }

.map-chips::after {
  content: "";
  flex: 0 0 32px;
}

.map-chips button {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  border: 1px solid color-mix(in srgb, var(--line) 58%, transparent);
  border-radius: 999px;
  padding: 0 10px;
  color: var(--ink);
  background: color-mix(in srgb, var(--panel) 34%, transparent);
  box-shadow: 0 6px 14px rgba(29, 29, 31, .055);
  backdrop-filter: blur(8px) saturate(1.02);
  font-size: 11px;
  font-weight: 950;
  pointer-events: auto;
  scroll-snap-align: start;
  touch-action: manipulation;
}

.map-chips button.active {
  border-color: color-mix(in srgb, var(--blue) 36%, rgba(255, 255, 255, .8));
  color: #fff;
  background: linear-gradient(180deg, var(--blue), #075ec5);
  box-shadow: 0 10px 22px rgba(0, 113, 227, .18);
}

.trip-recorder-chip {
  gap: 7px;
  max-width: none;
}

.trip-recorder-chip b {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.trip-recorder-chip span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--muted) 42%, transparent);
}

.trip-recorder-chip.recording {
  color: #12351e;
  border-color: color-mix(in srgb, #34c759 44%, transparent);
  background: color-mix(in srgb, #ecfff3 70%, transparent);
}

.trip-recorder-chip.recording span {
  background: #34c759;
  box-shadow: 0 0 0 4px rgba(52, 199, 89, .16);
}

.trip-recorder-chip.paused {
  color: #5b3d00;
  border-color: color-mix(in srgb, #ff9f0a 46%, transparent);
  background: color-mix(in srgb, #fff7e5 70%, transparent);
}

.trip-recorder-chip.paused span {
  background: #ff9f0a;
}

.trip-recorder-chip.saved {
  color: var(--blue);
  border-color: color-mix(in srgb, var(--blue) 42%, transparent);
}

.trip-recorder-chip.saved span {
  background: var(--blue);
}

.gps-status {
  position: fixed;
  right: 12px;
  top: calc(env(safe-area-inset-top) + 216px);
  z-index: 23;
  max-width: min(230px, calc(100vw - 24px));
  min-height: 28px;
  border: 1px solid color-mix(in srgb, #34c759 32%, var(--line));
  border-radius: 999px;
  padding: 0 9px;
  color: #12351e;
  overflow: hidden;
  background: color-mix(in srgb, #ecfff3 46%, transparent);
  box-shadow: 0 6px 14px rgba(29, 29, 31, .055);
  backdrop-filter: blur(8px) saturate(1.02);
  font-size: 10px;
  font-weight: 950;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.roadtalk-live,
.map-chips,
.gps-status {
  display: none !important;
}

.show-my-vehicle {
  position: fixed;
  right: 12px;
  top: calc(env(safe-area-inset-top) + 250px);
  z-index: 24;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  max-width: 220px;
  height: auto;
  min-height: 44px;
  border: 1px solid color-mix(in srgb, var(--blue) 34%, var(--line));
  border-radius: 999px;
  padding: 0 11px;
  color: var(--ink);
  background: color-mix(in srgb, var(--panel) 74%, transparent);
  box-shadow: 0 7px 16px rgba(29, 29, 31, .08);
  backdrop-filter: blur(8px) saturate(1.02);
  font-size: 11px;
  font-weight: 950;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
}

.social-drawer {
  position: fixed;
  left: 10px;
  right: 10px;
  bottom: calc(env(safe-area-inset-bottom) + 92px);
  z-index: 43;
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity .16s ease, transform .16s ease, visibility .16s ease;
}

.social-drawer[data-state="half"],
.social-drawer[data-state="full"] {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.social-drawer-handle {
  display: none;
  pointer-events: none;
  align-items: center;
  gap: 8px;
  min-height: 46px;
  border: 1px solid color-mix(in srgb, var(--line) 58%, transparent);
  border-radius: 999px;
  padding: 0 16px;
  color: var(--ink);
  background: color-mix(in srgb, var(--panel) 68%, transparent);
  box-shadow: 0 8px 18px rgba(29, 29, 31, .09);
  backdrop-filter: blur(10px) saturate(1.03);
  font-size: 14px;
  font-weight: 950;
}

.social-drawer-handle span {
  width: 28px;
  height: 4px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--muted) 42%, transparent);
}

.social-drawer-handle i {
  font-style: normal;
}

.social-drawer-panel {
  pointer-events: auto;
  display: none;
  margin-top: 0;
  border: 1px solid color-mix(in srgb, var(--line) 62%, transparent);
  border-radius: 24px;
  padding: 12px;
  background:
    radial-gradient(circle at 12% 0, color-mix(in srgb, var(--blue) 7%, transparent), transparent 26%),
    color-mix(in srgb, var(--panel) 86%, transparent);
  box-shadow: 0 14px 36px rgba(29, 29, 31, .13);
  backdrop-filter: blur(10px) saturate(1.03);
}

.social-drawer[data-state="half"] .social-drawer-panel,
.social-drawer[data-state="full"] .social-drawer-panel {
  display: block;
}

.social-drawer[data-state="full"] {
  bottom: calc(env(safe-area-inset-bottom) + 104px);
}

.social-drawer[data-state="full"] .social-drawer-panel {
  max-height: min(58dvh, 520px);
  overflow-y: auto;
  padding-bottom: calc(env(safe-area-inset-bottom) + 20px);
}

.social-drawer-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.social-drawer-header h2 {
  margin: 0;
  font-size: 22px;
}

.social-drawer-actions {
  display: flex;
  gap: 6px;
}

.social-drawer-actions button {
  min-height: 30px;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0 10px;
  color: var(--ink);
  background: color-mix(in srgb, var(--panel) 74%, transparent);
  font-size: 11px;
  font-weight: 900;
}

.feed-filter-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 14px;
}

.feed-filter-grid button {
  display: grid;
  align-content: center;
  gap: 3px;
  min-height: 58px;
  border: 1px solid color-mix(in srgb, var(--line) 68%, transparent);
  border-radius: 18px;
  padding: 10px 12px;
  color: var(--ink);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--panel) 88%, transparent), color-mix(in srgb, var(--panel) 68%, transparent));
  box-shadow: 0 10px 22px rgba(29, 29, 31, .08);
  text-align: left;
}

.feed-filter-grid button b {
  font-size: 15px;
  font-weight: 950;
}

.feed-filter-grid button span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  line-height: 1.2;
}

.feed-filter-grid button.active {
  color: #fff;
  border-color: color-mix(in srgb, var(--blue) 70%, transparent);
  background: linear-gradient(135deg, var(--blue), #179fff);
}

.feed-filter-grid button.active span {
  color: rgba(255, 255, 255, .82);
}

.social-tabs {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  margin: 10px 0;
  scrollbar-width: none;
}

.social-tabs::-webkit-scrollbar,
.social-feed::-webkit-scrollbar { display: none; }

.social-tabs button {
  flex: 0 0 auto;
  min-height: 30px;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0 11px;
  color: var(--ink);
  background: color-mix(in srgb, var(--panel) 72%, transparent);
  font-size: 12px;
  font-weight: 900;
}

.social-tabs button.active {
  color: #fff;
  border-color: var(--blue);
  background: var(--blue);
}

.social-feed {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  scrollbar-width: none;
}

.social-feed.full {
  display: grid;
  overflow: visible;
}

.social-card {
  flex: 0 0 190px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--line) 66%, transparent);
  border-radius: 20px;
  background: color-mix(in srgb, var(--panel) 76%, transparent);
  box-shadow: 0 12px 30px rgba(29, 29, 31, .09);
}

.social-feed.full .social-card {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  min-height: 118px;
}

.social-thumb {
  display: grid;
  align-items: end;
  min-height: 106px;
  padding: 9px;
  background: linear-gradient(135deg, #0071e3, #1d1d1f);
}

.social-thumb span {
  justify-self: start;
  border-radius: 999px;
  padding: 4px 7px;
  color: #fff;
  background: rgba(0, 0, 0, .34);
  font-size: 10px;
  font-weight: 950;
}

.social-card-body {
  display: grid;
  gap: 3px;
  padding: 10px;
}

.social-card-body small {
  color: var(--blue);
  font-size: 11px;
  font-weight: 950;
}

.social-card-body b {
  color: var(--ink);
  font-size: 15px;
}

.social-card-body p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.25;
}

.social-card-body button {
  justify-self: start;
  min-height: 28px;
  border: 0;
  border-radius: 999px;
  padding: 0 10px;
  color: #fff;
  background: var(--blue);
  font-size: 11px;
  font-weight: 900;
}

.feed-reel .social-thumb { background: linear-gradient(135deg, #111827, #0071e3 52%, #d4af37); }
.feed-ride .social-thumb { background: linear-gradient(135deg, #0b6b59, #98e7ff 48%, #0b5fbe); }
.feed-photo .social-thumb { background: linear-gradient(135deg, #1d1d1f, #34c759); }
.feed-place .social-thumb { background: linear-gradient(135deg, #dff8e8, #1f9d61 58%, #0f5132); }
.feed-roadtalk .social-thumb { background: linear-gradient(135deg, #07111e, #00a8ff 55%, #34c759); }

.plate-mic-ai .ai-badge {
  position: absolute;
  right: -7px;
  bottom: -2px;
  min-width: 14px;
  border-radius: 999px;
  padding: 1px 3px;
  color: #fff;
  background: linear-gradient(135deg, var(--blue), var(--gold));
  font-size: 7px;
  font-weight: 950;
}

.nav-dock {
  display: none;
  left: 50%;
  bottom: calc(env(safe-area-inset-bottom) + 8px);
  z-index: 56;
  width: min(360px, calc(100vw - 20px));
  transform: translateX(-50%);
  pointer-events: none;
}

.add-studio-fab {
  right: 16px;
  bottom: calc(env(safe-area-inset-bottom) + 86px);
  z-index: 45;
  display: inline-grid;
  grid-template-columns: 30px auto;
  align-items: center;
  gap: 7px;
  min-height: 44px;
  border: 1px solid color-mix(in srgb, var(--blue) 22%, rgba(255, 255, 255, .72));
  border-radius: 999px;
  padding: 6px 13px 6px 7px;
  color: #fff;
  background:
    radial-gradient(circle at 24% 16%, rgba(255, 255, 255, .34), transparent 34%),
    linear-gradient(135deg, var(--blue), #064dd8 62%, #143b8f);
  box-shadow: 0 16px 34px rgba(0, 81, 201, .22);
  font: inherit;
  font-weight: 950;
  backdrop-filter: blur(14px);
}

.add-studio-fab span {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  color: var(--blue);
  background: rgba(255, 255, 255, .94);
  font-size: 22px;
  line-height: 1;
}

.add-studio-fab b {
  overflow: hidden;
  font-size: 13px;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.home-version {
  position: fixed;
  right: 10px;
  bottom: calc(env(safe-area-inset-bottom) + 12px);
  z-index: 18;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 4px 7px;
  color: var(--muted);
  background: color-mix(in srgb, var(--panel) 72%, transparent);
  box-shadow: 0 6px 14px rgba(29, 29, 31, .06);
  backdrop-filter: blur(10px);
  font-size: 10px;
  font-weight: 900;
}

.app-env-badge {
  position: fixed;
  top: calc(env(safe-area-inset-top) + 10px);
  right: 12px;
  z-index: 58;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 26px;
  border: 1px solid rgba(0, 113, 227, .24);
  border-radius: 999px;
  padding: 0 10px;
  color: #064e9f;
  background: rgba(236, 247, 255, .94);
  box-shadow: 0 10px 26px rgba(0, 53, 102, .14);
  font-size: 11px;
  font-weight: 950;
  letter-spacing: .08em;
  pointer-events: none;
}

.alert-toast {
  position: fixed;
  left: max(16px, env(safe-area-inset-left));
  right: max(16px, env(safe-area-inset-right));
  bottom: calc(env(safe-area-inset-bottom) + 150px);
  z-index: 95;
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 10px;
  max-width: 420px;
  margin: 0 auto;
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--blue) 18%, var(--line));
  border-radius: 20px;
  background: color-mix(in srgb, var(--panel) 86%, white 14%);
  box-shadow: 0 12px 28px rgba(29, 29, 31, .14);
  backdrop-filter: blur(10px) saturate(1.03);
}

.alert-toast div {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.alert-toast b {
  color: var(--ink);
  font-size: 14px;
}

.alert-toast span {
  overflow: hidden;
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.alert-toast button {
  min-height: 38px;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0 12px;
  color: var(--ink);
  background: rgba(255, 255, 255, .74);
  font-weight: 950;
}

.alert-toast [data-alert-toast-open] {
  color: #fff;
  border-color: transparent;
  background: var(--blue);
}

.alert-toast [data-alert-toast-close] {
  width: 38px;
  padding: 0;
}

.menu-nav {
  display: grid;
  gap: 8px;
  margin: 8px 0 16px;
}

.menu-nav button {
  min-height: 46px;
  border: 1px solid var(--line);
  border-radius: 16px;
  color: var(--ink);
  background: color-mix(in srgb, var(--panel) 88%, #fff 12%);
  font-weight: 950;
}

.menu-nav button.active {
  color: #fff;
  border-color: var(--blue);
  background: var(--blue);
}

.menu-section {
  display: grid;
  gap: 7px;
  margin: 13px 0;
}

.menu-section h3 {
  margin: 0 0 1px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 950;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.menu-row-list {
  display: grid;
  gap: 7px;
}

.menu-row {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 18px;
  gap: 9px;
  align-items: center;
  min-height: 48px;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 6px 10px 6px 8px;
  color: var(--ink);
  background: color-mix(in srgb, var(--panel) 90%, #fff 10%);
  text-align: left;
  font: inherit;
  font-weight: 950;
}

.menu-row.active {
  color: #fff;
  border-color: var(--blue);
  background: var(--blue);
  box-shadow: 0 10px 22px rgba(0, 113, 227, .14);
}

.menu-row-icon {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  color: var(--blue);
  background: color-mix(in srgb, var(--blue) 10%, transparent);
  font-size: 14px;
  font-weight: 950;
}

.menu-row.active .menu-row-icon {
  color: #fff;
  background: rgba(255, 255, 255, .18);
}

.menu-row-text {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.menu-row-text b,
.menu-row-text small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.menu-row-text b {
  font-size: 14px;
  line-height: 1.1;
}

.menu-row-text small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}

.menu-row.active .menu-row-text small {
  color: rgba(255, 255, 255, .78);
}

.menu-chevron {
  color: var(--muted);
  font-size: 20px;
  line-height: 1;
  text-align: right;
}

.menu-row.active .menu-chevron {
  color: rgba(255, 255, 255, .9);
}

.dock-handle {
  pointer-events: auto;
  display: grid;
  place-items: center;
  width: 78px;
  min-height: 24px;
  margin: 0 auto;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0;
  color: var(--ink);
  background: color-mix(in srgb, var(--panel) 88%, transparent);
  box-shadow: 0 10px 22px rgba(29, 29, 31, .12);
  backdrop-filter: blur(10px);
}

.dock-handle span {
  display: block;
  width: 34px;
  height: 5px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--muted) 48%, transparent);
}

.dock-handle b {
  display: none;
  font-size: 12px;
  font-weight: 950;
}

.nav-dock.open .dock-handle {
  grid-template-columns: 34px auto;
  width: auto;
  min-height: 34px;
  padding: 0 14px;
}

.nav-dock.open .dock-handle b {
  display: block;
}

.tabbar {
  pointer-events: auto;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 4px;
  margin-top: 8px;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: var(--panel);
  box-shadow: 0 14px 34px rgba(29, 29, 31, .12);
  backdrop-filter: blur(10px);
  opacity: 0;
  transform: translateY(calc(100% + 18px));
  transition: transform 150ms ease, opacity 150ms ease;
}

.nav-dock.open .tabbar {
  opacity: 1;
  transform: translateY(0);
}

.tabbar button {
  min-height: 38px;
  border: 0;
  border-radius: 15px;
  color: var(--muted);
  background: transparent;
  font-size: 10px;
  font-weight: 900;
}

.tabbar button.active {
  color: #fff;
  background: var(--blue);
}

.tabbar button.tabbar-add {
  color: #fff;
  background: linear-gradient(135deg, var(--blue), #0b58d8);
}

.fp-bottom-nav {
  left: max(10px, env(safe-area-inset-left));
  right: max(10px, env(safe-area-inset-right));
  bottom: calc(env(safe-area-inset-bottom) + 6px);
  z-index: 56;
  display: block;
  width: min(620px, calc(100vw - 20px));
  min-height: 58px;
  margin: 0 auto;
  border: 1px solid color-mix(in srgb, #0b2347 14%, rgba(255, 255, 255, .74));
  border-radius: 22px;
  padding: 0;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .84), rgba(242, 247, 253, .72)),
    radial-gradient(circle at 50% -42%, color-mix(in srgb, var(--blue) 14%, transparent), transparent 46%);
  box-shadow:
    0 15px 34px rgba(15, 23, 42, .16),
    0 1px 0 rgba(255, 255, 255, .72) inset,
    0 -1px 0 rgba(15, 23, 42, .04) inset;
  backdrop-filter: blur(18px) saturate(1.12);
  pointer-events: auto;
}

.fp-bottom-nav[data-bottom-nav-tone="premium"] {
  color: #172338;
  background:
    linear-gradient(180deg, rgba(250, 253, 255, .88), rgba(231, 239, 250, .76)),
    radial-gradient(circle at 52% -38%, rgba(10, 132, 255, .16), transparent 48%);
}

.fp-bottom-nav-dual {
  overflow: visible;
}

.fp-bottom-nav-rails {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 80px minmax(0, 1fr);
  align-items: center;
  min-height: 56px;
  padding: 0 5px;
}

.fp-bottom-nav-center-slot {
  display: block;
  width: 80px;
  height: 56px;
}

.fp-bottom-nav-rail {
  display: flex;
  gap: 3px;
  min-height: 54px;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 4px 0 calc(4px + env(safe-area-inset-bottom));
  scroll-padding: 8px;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x;
}

.fp-bottom-nav-rail::-webkit-scrollbar {
  display: none;
}

.fp-bottom-nav-rail::after {
  content: "";
  flex: 0 0 8px;
}

.fp-bottom-nav-rail-left {
  justify-content: flex-start;
}

.fp-bottom-nav-rail-right {
  justify-content: flex-start;
}

.fp-bottom-nav-item,
.fp-bottom-nav-center {
  position: relative;
  display: grid;
  place-items: center;
  align-content: center;
  min-width: 0;
  min-height: 44px;
  border: 0;
  border-radius: 15px;
  padding: 3px 2px;
  color: #44536a;
  background: transparent;
  font: inherit;
  font-weight: 950;
  line-height: 1;
  text-align: center;
  touch-action: manipulation;
}

.fp-bottom-nav-item {
  flex: 0 0 60px;
  scroll-snap-align: center;
}

.fp-bottom-nav-item b,
.fp-bottom-nav-center b,
.fp-bottom-nav-item small {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fp-bottom-nav-item b,
.fp-bottom-nav-center b {
  margin-top: 3px;
  color: currentColor;
  font-size: 10px;
}

.fp-bottom-nav-item small {
  margin-top: 1px;
  color: var(--muted);
  font-size: 8px;
  font-weight: 850;
}

.fp-bottom-nav-icon,
.fp-bottom-nav-avatar {
  display: grid;
  place-items: center;
  width: 31px;
  height: 31px;
  border-radius: 999px;
  color: currentColor;
  background: rgba(15, 35, 66, .055);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .72) inset;
  font-size: 17px;
  font-style: normal;
  line-height: 1;
}

.fp-bottom-nav-avatar {
  border: 1px solid color-mix(in srgb, var(--blue) 20%, rgba(255, 255, 255, .72));
  background-size: cover;
  background-position: center;
  font-size: 14px;
}

.fp-bottom-nav-avatar.has-photo {
  border-color: color-mix(in srgb, var(--blue) 42%, white 34%);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue) 12%, transparent);
}

.fp-bottom-nav-item-active {
  color: #075ec5;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .74), rgba(216, 232, 255, .55)),
    color-mix(in srgb, var(--blue) 10%, transparent);
  box-shadow:
    0 7px 16px rgba(0, 81, 201, .1),
    inset 0 0 0 1px rgba(10, 132, 255, .13);
}

.fp-bottom-nav-item-active .fp-bottom-nav-icon,
.fp-bottom-nav-item-active .fp-bottom-nav-avatar {
  color: #fff;
  background:
    radial-gradient(circle at 32% 18%, rgba(255, 255, 255, .28), transparent 34%),
    linear-gradient(180deg, #168cff, #075ec5);
  box-shadow:
    0 9px 18px rgba(0, 113, 227, .2),
    inset 0 0 0 1px rgba(255, 255, 255, .18);
}

.fp-bottom-nav-center {
  position: absolute;
  left: 50%;
  bottom: calc(4px + env(safe-area-inset-bottom));
  z-index: 2;
  min-width: 80px;
  min-height: 66px;
  padding: 0 4px;
  color: #fff;
  transform: translate(-50%, -14px);
  filter: drop-shadow(0 13px 25px rgba(0, 81, 201, .2));
}

.fp-plate-action-button {
  position: relative;
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border: 2px solid rgba(255, 255, 255, .92);
  border-radius: 21px;
  color: #fff;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, .26), transparent 32%),
    radial-gradient(circle at 30% 20%, rgba(144, 214, 255, .52), transparent 32%),
    linear-gradient(150deg, #1392ff, #0057d9 55%, #0d2d73);
  box-shadow:
    0 17px 32px rgba(0, 81, 201, .3),
    0 0 0 5px rgba(10, 132, 255, .09),
    inset 0 1px 0 rgba(255, 255, 255, .34),
    inset 0 -10px 18px rgba(3, 29, 88, .18);
  font-size: 16px;
  font-weight: 1000;
}

.fp-bottom-nav[data-center-fp-theme="gold"] .fp-plate-action-button {
  color: #281a06;
  border-color: rgba(255, 247, 222, .96);
  background:
    linear-gradient(140deg, rgba(255, 255, 255, .48), transparent 31%),
    radial-gradient(circle at 34% 18%, rgba(255, 255, 255, .62), transparent 30%),
    linear-gradient(150deg, #fff0b8 0%, #d9a947 38%, #9f6b17 72%, #5d3b0c 100%);
  box-shadow:
    0 17px 34px rgba(137, 89, 12, .3),
    0 0 0 5px rgba(217, 169, 71, .13),
    inset 0 1px 0 rgba(255, 255, 255, .62),
    inset 0 -12px 18px rgba(84, 48, 0, .2);
}

.fp-bottom-nav[data-center-fp-theme="gold"] .fp-plate-action-button::after {
  content: "";
  position: absolute;
  inset: 7px 10px auto 10px;
  height: 9px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .54), transparent);
  opacity: .78;
  pointer-events: none;
}

.fp-bottom-nav-center b {
  margin-top: 5px;
  color: #22314a;
  font-size: 10px;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .72);
}

.fp-bottom-nav[data-center-fp-theme="gold"] .fp-bottom-nav-center b {
  color: #6e4a10;
}

.fp-bottom-nav-item [data-bottom-badge],
.fp-bottom-nav-item [data-bottom-unread] {
  position: absolute;
  top: 3px;
  right: 12px;
  display: grid;
  place-items: center;
  min-width: 17px;
  height: 17px;
  border: 2px solid rgba(250, 253, 255, .92);
  border-radius: 999px;
  padding: 0 3px;
  color: #fff;
  background: linear-gradient(135deg, #087bff, #14b8a6);
  box-shadow:
    0 0 0 3px rgba(10, 132, 255, .1),
    0 5px 12px rgba(8, 123, 255, .2);
  font-size: 8px;
  font-style: normal;
  font-weight: 950;
  line-height: 1;
}

.fp-bottom-nav[data-badge-style="messenger"] .fp-bottom-nav-item [data-bottom-badge],
.fp-bottom-nav[data-badge-style="messenger"] .fp-bottom-nav-item [data-bottom-unread] {
  background:
    radial-gradient(circle at 30% 22%, rgba(255, 255, 255, .4), transparent 34%),
    linear-gradient(135deg, #0a84ff, #18c6a3);
}

.fp-bottom-nav-item [data-bottom-badge][hidden],
.fp-bottom-nav-item [data-bottom-unread][hidden] {
  display: none;
}

.fp-nav-icon-messages {
  position: relative;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}

.fp-nav-message-unread .fp-nav-icon-messages {
  color: #075ec5;
  background: color-mix(in srgb, var(--blue) 12%, white 88%);
}

.fp-nav-message-has-new .fp-nav-icon-messages {
  animation: fpMessagePulse 2.4s ease-in-out infinite;
}

.fp-nav-message-has-new [data-bottom-unread] {
  animation: fpMessageBadgePulse 2.4s ease-in-out infinite;
}

@keyframes fpMessagePulse {
  0%, 100% {
    transform: translateY(0) scale(1);
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--blue) 0%, transparent);
  }

  42% {
    transform: translateY(-1px) scale(1.06);
    box-shadow: 0 0 0 6px color-mix(in srgb, var(--blue) 10%, transparent);
  }

  58% {
    transform: translateY(0) scale(1.01);
    box-shadow: 0 0 0 2px color-mix(in srgb, #21c7a8 9%, transparent);
  }
}

@keyframes fpMessageBadgePulse {
  0%, 100% {
    transform: scale(1);
    filter: saturate(1);
  }

  50% {
    transform: scale(1.12);
    filter: saturate(1.18);
  }
}

.fp-nav-icon-cb {
  position: relative;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}

.fp-nav-cb-live .fp-nav-icon-cb {
  color: #047857;
  background: rgba(16, 185, 129, .12);
  animation: fpRoadTalkNavPulse 2.2s ease-in-out infinite;
}

.fp-nav-cb-live [data-bottom-cb-live] {
  min-width: 22px;
  padding: 0 4px;
  text-transform: uppercase;
  background:
    radial-gradient(circle at 28% 22%, rgba(255, 255, 255, .42), transparent 34%),
    linear-gradient(135deg, #059669, #0a84ff);
  animation: fpMessageBadgePulse 2.4s ease-in-out infinite;
}

@keyframes fpRoadTalkNavPulse {
  0%, 100% {
    transform: translateY(0) scale(1);
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0);
  }

  48% {
    transform: translateY(-1px) scale(1.045);
    box-shadow: 0 0 0 6px rgba(16, 185, 129, .11);
  }
}

@media (max-width: 390px) {
  .fp-bottom-nav {
    width: calc(100vw - 16px);
    border-radius: 22px;
  }

  .fp-bottom-nav-rail {
    scroll-padding: 6px;
  }

  .fp-bottom-nav-item {
    flex-basis: 60px;
  }

  .fp-bottom-nav-icon,
  .fp-bottom-nav-avatar {
    width: 29px;
    height: 29px;
  }

  .fp-plate-action-button {
    width: 54px;
    height: 54px;
  }
}

body.garage-view-active .fp-bottom-nav,
body.operator-view-active .fp-bottom-nav,
body.drive-mode-active .fp-bottom-nav,
body.fp-comms-detail-open .fp-bottom-nav {
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
}

body.is-roadtalk-open .fp-bottom-nav {
  opacity: 0;
  pointer-events: none;
  transform: translateY(18px);
  visibility: hidden;
}

body.is-roadtalk-open .topbar,
body.is-roadtalk-open .shortcut-strip,
body.is-roadtalk-open .map-chips,
body.is-roadtalk-open .map-layers,
body.is-roadtalk-open .gps-status,
body.is-roadtalk-open .plate-cta,
body.is-roadtalk-open .social-drawer,
body.is-roadtalk-open .add-studio-fab,
body.is-roadtalk-open .roadtalk-live {
  opacity: .14;
  pointer-events: none;
}

body.is-roadtalk-open.roadtalk-sheet-half .topbar,
body.is-roadtalk-open.roadtalk-sheet-half .shortcut-strip,
body.is-roadtalk-open.roadtalk-sheet-half .map-chips,
body.is-roadtalk-open.roadtalk-sheet-half .map-layers,
body.is-roadtalk-open.roadtalk-sheet-half .gps-status,
body.is-roadtalk-open.roadtalk-sheet-half .plate-cta,
body.is-roadtalk-open.roadtalk-sheet-half .social-drawer,
body.is-roadtalk-open.roadtalk-sheet-half .add-studio-fab,
body.is-roadtalk-open.roadtalk-sheet-half .roadtalk-live,
body.is-roadtalk-open.roadtalk-sheet-mini .topbar,
body.is-roadtalk-open.roadtalk-sheet-mini .shortcut-strip,
body.is-roadtalk-open.roadtalk-sheet-mini .map-chips,
body.is-roadtalk-open.roadtalk-sheet-mini .map-layers,
body.is-roadtalk-open.roadtalk-sheet-mini .gps-status,
body.is-roadtalk-open.roadtalk-sheet-mini .plate-cta,
body.is-roadtalk-open.roadtalk-sheet-mini .social-drawer,
body.is-roadtalk-open.roadtalk-sheet-mini .add-studio-fab,
body.is-roadtalk-open.roadtalk-sheet-mini .roadtalk-live {
  opacity: 1;
  pointer-events: auto;
}

.findplate-live-view {
  gap: 10px;
  padding-bottom: calc(env(safe-area-inset-bottom) + 86px);
  background:
    radial-gradient(circle at 82% 4%, rgba(0, 113, 227, .12), transparent 32%),
    linear-gradient(180deg, #f8fbff 0%, #ffffff 54%, #f5f8fc 100%);
}

.findplate-live-content {
  display: grid;
  gap: 12px;
}

.findplate-live-header {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 14px;
  border: 1px solid rgba(15, 23, 42, .07);
  border-radius: 22px;
  padding: 14px;
  background:
    radial-gradient(circle at 12% 0%, rgba(239, 68, 68, .13), transparent 34%),
    radial-gradient(circle at 88% 18%, rgba(0, 113, 227, .14), transparent 36%),
    rgba(255, 255, 255, .86);
  box-shadow: 0 14px 34px rgba(15, 23, 42, .07);
}

.findplate-live-header h1 {
  margin: 1px 0;
  color: #111827;
  font-size: 30px;
  letter-spacing: 0;
}

.findplate-live-header span,
.findplate-live-privacy-note {
  color: rgba(15, 23, 42, .62);
  font-size: 12px;
  font-weight: 760;
  line-height: 1.35;
}

.findplate-live-header button,
.findplate-live-detail-actions button,
.findplate-live-create-sheet header button {
  min-height: 38px;
  border: 1px solid rgba(0, 113, 227, .14);
  border-radius: 999px;
  padding: 0 13px;
  color: var(--blue);
  background: rgba(0, 113, 227, .08);
  font-weight: 920;
}

.findplate-live-filters {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding-bottom: 1px;
  scrollbar-width: none;
}

.findplate-live-filters::-webkit-scrollbar {
  display: none;
}

.findplate-live-filters button {
  flex: 0 0 auto;
  min-height: 34px;
  border: 1px solid rgba(15, 23, 42, .07);
  border-radius: 999px;
  padding: 0 11px;
  color: #475467;
  background: rgba(255, 255, 255, .82);
  font-size: 11px;
  font-weight: 900;
}

.findplate-live-filters button.active {
  border-color: rgba(0, 113, 227, .2);
  color: #fff;
  background: linear-gradient(135deg, #0071e3, #0b63ce);
  box-shadow: 0 8px 18px rgba(0, 113, 227, .18);
}

.findplate-live-grid {
  display: grid;
  gap: 12px;
}

.findplate-live-card {
  display: grid;
  grid-template-columns: minmax(116px, 38%) minmax(0, 1fr);
  min-height: 154px;
  overflow: hidden;
  border: 1px solid rgba(15, 23, 42, .07);
  border-radius: 22px;
  background: rgba(255, 255, 255, .9);
  box-shadow: 0 14px 32px rgba(15, 23, 42, .06);
}

.findplate-live-cover {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 154px;
  color: #fff;
  background:
    radial-gradient(circle at 70% 18%, rgba(255, 255, 255, .28), transparent 30%),
    linear-gradient(135deg, #0f172a, #0071e3);
}

.findplate-live-cover-garage,
.findplate-live-cover-detailing {
  background:
    radial-gradient(circle at 74% 20%, rgba(239, 68, 68, .25), transparent 30%),
    linear-gradient(135deg, #111827, #374151);
}

.findplate-live-cover-mechanic,
.findplate-live-cover-repair {
  background:
    radial-gradient(circle at 18% 12%, rgba(250, 204, 21, .22), transparent 28%),
    linear-gradient(135deg, #1f2937, #475569);
}

.findplate-live-cover-meet,
.findplate-live-cover-ride {
  background:
    radial-gradient(circle at 18% 16%, rgba(16, 185, 129, .24), transparent 30%),
    linear-gradient(135deg, #0b63ce, #0f172a);
}

.findplate-live-cover-breakdown {
  background:
    radial-gradient(circle at 18% 16%, rgba(251, 191, 36, .30), transparent 30%),
    linear-gradient(135deg, #7f1d1d, #111827);
}

.findplate-live-cover span {
  display: grid;
  width: 64px;
  height: 64px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 22px;
  background: rgba(255, 255, 255, .16);
  box-shadow: 0 16px 34px rgba(0, 0, 0, .18);
  font-size: 24px;
  font-weight: 950;
}

.findplate-live-cover i,
.findplate-live-card-meta b {
  border-radius: 999px;
  padding: 4px 7px;
  color: #fff;
  background: #ef4444;
  font-size: 9px;
  font-style: normal;
  font-weight: 950;
  letter-spacing: .04em;
}

.findplate-live-cover i {
  position: absolute;
  top: 9px;
  left: 9px;
}

.findplate-live-card-body {
  display: grid;
  align-content: center;
  min-width: 0;
  gap: 7px;
  padding: 12px;
}

.findplate-live-card-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.findplate-live-card-meta span {
  overflow: hidden;
  color: #667085;
  font-size: 10px;
  font-weight: 900;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.findplate-live-card h3,
.findplate-live-detail h2 {
  margin: 0;
  color: #101828;
  font-size: 18px;
  line-height: 1.1;
  letter-spacing: 0;
}

.findplate-live-card p,
.findplate-live-detail p {
  margin: 0;
  color: #475467;
  font-size: 12px;
  font-weight: 760;
  line-height: 1.35;
}

.findplate-live-card small,
.findplate-live-detail small {
  color: #667085;
  font-size: 10px;
  font-weight: 820;
}

.findplate-live-actions {
  display: flex;
  gap: 5px;
  overflow-x: auto;
  padding-top: 1px;
}

.findplate-live-actions button {
  flex: 0 0 auto;
  min-height: 30px;
  border: 1px solid rgba(15, 23, 42, .07);
  border-radius: 999px;
  padding: 0 9px;
  color: #344054;
  background: rgba(248, 251, 255, .9);
  font-size: 10px;
  font-weight: 900;
}

.findplate-live-detail {
  position: relative;
  display: grid;
  gap: 12px;
}

.findplate-live-detail-close {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(255, 255, 255, .24);
  border-radius: 999px;
  color: #fff;
  background: rgba(15, 23, 42, .42);
  font-size: 24px;
  font-weight: 800;
}

.findplate-live-video-placeholder {
  display: grid;
  min-height: 260px;
  place-items: center;
  gap: 5px;
  border-radius: 26px;
  padding: 22px;
  color: #fff;
  text-align: center;
  background:
    radial-gradient(circle at 72% 12%, rgba(239, 68, 68, .22), transparent 30%),
    radial-gradient(circle at 18% 18%, rgba(0, 113, 227, .30), transparent 36%),
    linear-gradient(135deg, #0f172a, #111827);
  box-shadow: 0 18px 42px rgba(15, 23, 42, .18);
}

.findplate-live-video-placeholder span {
  display: grid;
  width: 72px;
  height: 72px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 26px;
  background: rgba(255, 255, 255, .12);
  font-size: 26px;
  font-weight: 950;
}

.findplate-live-video-placeholder b {
  font-size: 20px;
  font-weight: 950;
}

.findplate-live-video-placeholder small {
  color: rgba(255, 255, 255, .72);
}

.findplate-live-detail-body,
.findplate-live-create-sheet {
  display: grid;
  gap: 10px;
}

.findplate-live-detail-body {
  border: 1px solid rgba(15, 23, 42, .07);
  border-radius: 22px;
  padding: 13px;
  background: rgba(255, 255, 255, .9);
}

.findplate-live-detail-body em {
  color: #667085;
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
}

.findplate-live-context-card,
.findplate-live-chat-mock {
  display: grid;
  gap: 5px;
  border: 1px solid rgba(15, 23, 42, .07);
  border-radius: 16px;
  padding: 10px;
  background: rgba(248, 251, 255, .85);
}

.findplate-live-context-card b,
.findplate-live-chat-mock b {
  color: #101828;
  font-size: 13px;
  font-weight: 950;
}

.findplate-live-context-card span,
.findplate-live-chat-mock span {
  color: #667085;
  font-size: 11px;
  font-weight: 780;
}

.findplate-live-context-card button {
  justify-self: start;
  min-height: 32px;
  border: 1px solid rgba(0, 113, 227, .14);
  border-radius: 999px;
  padding: 0 10px;
  color: var(--blue);
  background: rgba(0, 113, 227, .07);
  font-weight: 900;
}

.findplate-live-detail-actions {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
}

.findplate-live-create-sheet header {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 12px;
}

.findplate-live-create-sheet header h2 {
  margin: 0;
  color: #101828;
  font-size: 22px;
  letter-spacing: 0;
}

.findplate-live-create-sheet header span {
  display: block;
  margin-top: 4px;
  color: #667085;
  font-size: 12px;
  font-weight: 780;
  line-height: 1.35;
}

.findplate-live-create-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.findplate-live-create-options button {
  display: grid;
  min-height: 96px;
  align-content: start;
  gap: 5px;
  border: 1px solid rgba(15, 23, 42, .07);
  border-radius: 18px;
  padding: 11px;
  color: #101828;
  text-align: left;
  background: rgba(248, 251, 255, .88);
}

.findplate-live-create-options button span {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 13px;
  color: #fff;
  background: linear-gradient(135deg, #0071e3, #0f172a);
  font-size: 14px;
  font-weight: 950;
}

.findplate-live-create-options button b {
  font-size: 13px;
  font-weight: 950;
}

.findplate-live-create-options button small {
  color: #667085;
  font-size: 10px;
  font-weight: 780;
  line-height: 1.25;
}

@media (max-width: 430px) {
  .findplate-live-card {
    grid-template-columns: 112px minmax(0, 1fr);
  }

  .findplate-live-card h3 {
    font-size: 16px;
  }

  .findplate-live-detail-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .findplate-live-create-options {
    grid-template-columns: 1fr;
  }
}

.sheet {
  left: 10px;
  right: 10px;
  bottom: calc(env(safe-area-inset-bottom) + 8px);
  z-index: 60;
  max-height: calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 24px);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 12px 14px calc(env(safe-area-inset-bottom) + 90px);
  border: 1px solid color-mix(in srgb, var(--line) 76%, transparent);
  border-radius: 26px 26px 22px 22px;
  background:
    radial-gradient(circle at 12% 0, color-mix(in srgb, var(--blue) 8%, transparent), transparent 26%),
    color-mix(in srgb, var(--panel) 96%, transparent);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.72),
    0 16px 42px rgba(29,29,31,.15);
  backdrop-filter: blur(12px) saturate(1.03);
  opacity: 0;
  pointer-events: none;
  transform: translateY(calc(100% + 40px));
  transition: transform 150ms ease, opacity 150ms ease;
}

.sheet-backdrop {
  position: fixed;
  inset: 0;
  z-index: 59;
  border: 0;
  background: rgba(29, 29, 31, .12);
  opacity: 0;
  pointer-events: none;
  transition: opacity 120ms ease;
}

.sheet-backdrop.open {
  opacity: 1;
  pointer-events: auto;
}

.sheet-backdrop[data-sheet-type="group-form"].open {
  background: rgba(15, 23, 42, .28);
}

.sheet-backdrop[data-sheet-type="roadtalk"].open,
.sheet-backdrop[data-sheet-type="roadtalk-broadcast"].open {
  z-index: 164;
  background: rgba(15, 23, 42, .38);
  backdrop-filter: blur(10px);
}

.sheet-backdrop[data-roadtalk-sheet-mode="half"].open {
  background: rgba(15, 23, 42, .055);
  backdrop-filter: blur(1px);
  pointer-events: none;
}

.sheet-backdrop[data-roadtalk-sheet-mode="mini"].open {
  pointer-events: none;
  background: transparent;
  backdrop-filter: none;
}

.sheet.open {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.sheet[data-sheet-type="search"] {
  max-height: min(78dvh, calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 28px));
  padding-bottom: calc(env(safe-area-inset-bottom) + 28px);
}

.sheet[data-sheet-type="active-vehicle"] {
  max-height: min(70dvh, calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 28px));
  padding-bottom: calc(env(safe-area-inset-bottom) + 30px);
}

.sheet[data-sheet-type="roadtalk"],
.sheet[data-sheet-type="roadtalk-broadcast"] {
  top: auto;
  bottom: calc(env(safe-area-inset-bottom) + 8px);
  z-index: 165;
  display: grid;
  align-content: start;
  height: min(86dvh, calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 18px));
  max-height: none;
  overflow: hidden;
  padding: 8px 12px calc(env(safe-area-inset-bottom) + 14px);
  border-color: rgba(15, 23, 42, .10);
  border-radius: 28px;
  background:
    radial-gradient(circle at 12% 0%, rgba(0, 113, 227, .08), transparent 34%),
    rgba(255, 255, 255, .96);
  box-shadow: 0 24px 62px rgba(15, 23, 42, .24);
  backdrop-filter: blur(18px) saturate(1.05);
  transform: translateY(calc(26px + var(--roadtalk-drag-y, 0px)));
  touch-action: auto;
  will-change: transform;
}

.sheet[data-sheet-type="roadtalk"].open,
.sheet[data-sheet-type="roadtalk-broadcast"].open {
  transform: translateY(var(--roadtalk-drag-y, 0px));
}

.sheet[data-roadtalk-sheet-mode="full"][data-sheet-type="roadtalk"] {
  height: calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 16px);
}

.sheet[data-roadtalk-sheet-mode="half"][data-sheet-type="roadtalk"] {
  height: min(48dvh, 470px);
}

.sheet[data-roadtalk-sheet-mode="mini"][data-sheet-type="roadtalk"] {
  height: 92px;
  border-radius: 24px;
  padding-bottom: 10px;
}

.sheet[data-roadtalk-sheet-mode="full"][data-sheet-type="roadtalk-broadcast"] {
  height: min(64dvh, calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 18px));
}

.sheet[data-roadtalk-sheet-mode="half"][data-sheet-type="roadtalk-broadcast"],
.sheet[data-roadtalk-sheet-mode="mini"][data-sheet-type="roadtalk-broadcast"] {
  height: min(48dvh, 440px);
}

.sheet.is-roadtalk-dragging {
  transition: none !important;
}

.sheet[data-sheet-type="roadtalk"] #sheet-content,
.sheet[data-sheet-type="roadtalk-broadcast"] #sheet-content {
  display: flex;
  flex-direction: column;
  min-height: 0;
  height: 100%;
  gap: 8px;
}

.sheet[data-sheet-type="add-studio"] {
  top: max(12px, env(safe-area-inset-top));
  bottom: max(8px, env(safe-area-inset-bottom));
  display: grid;
  align-content: start;
  max-height: none;
  padding: 18px 16px calc(env(safe-area-inset-bottom) + 22px);
  border-radius: 30px;
}

.sheet[data-sheet-type="add-studio"] #sheet-content {
  display: grid;
  align-content: start;
  gap: 8px;
  min-height: 100%;
}

.sheet[data-sheet-type="group-form"] {
  max-height: min(85dvh, calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 22px));
  padding: 10px 10px calc(env(safe-area-inset-bottom) + 14px);
  border-color: rgba(15, 23, 42, .12);
  background: #fff;
  box-shadow: 0 20px 54px rgba(15, 23, 42, .24);
  backdrop-filter: none;
}

.sheet[data-sheet-type="drive-report"],
.sheet[data-sheet-type="drive-report-place"] {
  min-height: min(55dvh, 520px);
  max-height: min(56dvh, calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 18px));
  padding: 12px 14px calc(env(safe-area-inset-bottom) + 16px);
  border-color: rgba(15, 23, 42, .12);
  background: rgba(255, 255, 255, .96);
  box-shadow: 0 20px 48px rgba(15, 23, 42, .18);
  backdrop-filter: blur(10px) saturate(1.02);
}

.sheet-backdrop[data-sheet-type="drive-report"].open,
.sheet-backdrop[data-sheet-type="drive-report-place"].open {
  background: rgba(15, 23, 42, .14);
  backdrop-filter: blur(2px);
}

.subview-bar,
.subsheet-bar {
  display: grid;
  grid-template-columns: minmax(82px, auto) 1fr minmax(82px, auto);
  align-items: center;
  gap: 8px;
  min-height: 48px;
  margin-bottom: 12px;
}

.subview-bar strong,
.subsheet-bar strong {
  overflow: hidden;
  font-size: 15px;
  font-weight: 950;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.subview-bar button,
.subsheet-bar button {
  min-height: 44px;
  border: 1px solid color-mix(in srgb, var(--line) 68%, transparent);
  border-radius: 999px;
  padding: 0 12px;
  color: var(--ink);
  background: color-mix(in srgb, var(--panel) 78%, transparent);
  box-shadow: 0 8px 18px rgba(29, 29, 31, .08);
  font-size: 13px;
  font-weight: 950;
}

.ride-search-form {
  display: grid;
  gap: 10px;
  margin-top: 14px;
}

.ride-search-form label {
  display: grid;
  gap: 5px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}

.ride-search-form input {
  min-height: 46px;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 0 13px;
  color: var(--ink);
  background: color-mix(in srgb, var(--panel) 82%, #fff 18%);
  font-size: 15px;
  font-weight: 850;
}

.ride-search-form button {
  min-height: 48px;
  border: 0;
  border-radius: 16px;
  color: #fff;
  background: var(--blue);
  font-size: 15px;
  font-weight: 950;
}

.vehicle-onboarding-form {
  display: grid;
  gap: 12px;
  margin-top: 14px;
}

.vehicle-onboarding-form label {
  display: grid;
  gap: 7px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 900;
}

.vehicle-onboarding-form input,
.vehicle-onboarding-form select {
  width: 100%;
  min-height: 48px;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 0 14px;
  color: var(--ink);
  background: color-mix(in srgb, var(--panel) 82%, #fff 18%);
  font: inherit;
  font-weight: 850;
  outline: none;
}

.vehicle-onboarding-form input:focus,
.vehicle-onboarding-form select:focus {
  border-color: color-mix(in srgb, var(--blue) 55%, var(--line));
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--blue) 14%, transparent);
}

.vehicle-onboarding-form button {
  min-height: 50px;
  border: 0;
  border-radius: 16px;
  color: #fff;
  background: var(--blue);
  font: inherit;
  font-weight: 950;
}

.vehicle-onboarding-form button:disabled {
  opacity: .68;
}

.vehicle-switch-list {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}

.vehicle-switch-option {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-height: 64px;
  border: 1px solid color-mix(in srgb, var(--line) 78%, transparent);
  border-radius: 16px;
  padding: 8px;
  color: var(--ink);
  background: color-mix(in srgb, var(--panel) 82%, #fff 18%);
  text-align: left;
}

.vehicle-switch-option.active {
  border-color: color-mix(in srgb, var(--blue) 44%, var(--line));
  background: color-mix(in srgb, var(--blue) 8%, #fff 92%);
}

.vehicle-switch-option.add {
  border-style: dashed;
  color: var(--blue);
}

.vehicle-switch-thumb {
  overflow: hidden;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 15px;
  color: var(--blue);
  background: linear-gradient(135deg, #f7fbff, #e4efff);
  font-size: 22px;
  font-weight: 950;
}

.vehicle-switch-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.vehicle-switch-option b,
.vehicle-switch-option small {
  overflow: hidden;
  display: block;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.vehicle-switch-option b {
  font-size: 14px;
  font-weight: 950;
}

.vehicle-switch-option small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
}

.sheet-handle {
  display: block;
  width: 40px;
  height: 4px;
  margin: 0 auto 10px;
  border: 0;
  border-radius: 999px;
  background: color-mix(in srgb, var(--muted) 38%, transparent);
}

.sheet-x {
  position: sticky;
  top: 0;
  float: right;
  z-index: 2;
  min-height: 28px;
  border: 0;
  border-radius: 999px;
  padding: 0 10px;
  color: var(--muted);
  background: rgba(255, 255, 255, .66);
  font-size: 11px;
  font-weight: 900;
}

.sheet.has-custom-close .sheet-x {
  display: none;
}

.eyebrow {
  margin: 0 0 6px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.sheet h2,
.page-header h1 {
  margin: 0 0 12px;
  font-size: 26px;
  letter-spacing: 0;
}

.sheet p {
  margin: 4px 0;
  color: var(--muted);
  font-size: 13px;
}

.sheet-search {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 40px auto;
  gap: 6px;
  margin: 8px 0;
  padding: 6px;
  border: 2px solid color-mix(in srgb, #12213a 18%, var(--line));
  border-radius: 16px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.54)),
    var(--plate-bg);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.72),
    0 12px 30px rgba(29,29,31,.1);
}

.country-row {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  margin: 5px 0 8px;
  padding-bottom: 2px;
  scrollbar-width: none;
}

.country-row::-webkit-scrollbar { display: none; }

.country-row button {
  flex: 0 0 auto;
  min-height: 30px;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0 10px;
  color: var(--ink);
  background: color-mix(in srgb, var(--panel) 84%, #fff 16%);
  font-size: 11px;
  font-weight: 950;
}

.country-row button span {
  margin-right: 3px;
}

.country-row button.active {
  color: #fff;
  border-color: var(--blue);
  background: var(--blue);
}

.command-sheet-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: start;
  margin-bottom: 10px;
}

.command-sheet-head h2 {
  margin: 0 0 4px;
  font-size: 22px;
}

.command-sheet-head span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 850;
}

.command-sheet-head button {
  min-height: 36px;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0 12px;
  color: var(--ink);
  background: color-mix(in srgb, var(--panel) 88%, #fff 12%);
  font-size: 12px;
  font-weight: 950;
}

.fp-id-command-note {
  display: grid;
  gap: 7px;
  margin: 0 0 12px;
  padding: 10px;
  border: 1px solid color-mix(in srgb, var(--blue) 24%, var(--line));
  border-radius: 16px;
  background: color-mix(in srgb, var(--blue) 8%, var(--panel));
}

.fp-id-command-note b {
  color: var(--ink);
  font-size: 16px;
  font-weight: 950;
}

.fp-id-command-note span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 820;
}

.fp-id-command-note button {
  justify-self: start;
  min-height: 36px;
  border: 0;
  border-radius: 999px;
  padding: 0 12px;
  color: #fff;
  background: var(--blue);
  font-size: 12px;
  font-weight: 950;
}

.command-plate-form {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 7px;
  align-items: center;
  margin: 8px 0;
  padding: 6px;
  border: 2px solid color-mix(in srgb, #12213a 18%, var(--line));
  border-radius: 16px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.94), rgba(255,255,255,.58)),
    var(--plate-bg);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.72),
    0 10px 22px rgba(29,29,31,.08);
}

.command-country-chip {
  display: grid;
  place-items: center;
  min-height: 42px;
  border-radius: 12px;
  padding: 0 10px;
  color: #fff;
  background: #1f5fbd;
  font-size: 12px;
  font-weight: 950;
  white-space: nowrap;
}

.command-plate-form input {
  min-width: 0;
  min-height: 42px;
  border: 0;
  outline: 0;
  padding: 0 6px;
  color: var(--plate-ink);
  background: transparent;
  font-size: 17px;
  font-weight: 950;
  letter-spacing: .02em;
  text-transform: uppercase;
}

.command-plate-form input::placeholder {
  color: rgba(17, 24, 39, .44);
  font-size: 14px;
  font-weight: 850;
  letter-spacing: 0;
  text-transform: none;
}

.command-plate-form button {
  min-height: 42px;
  border: 0;
  border-radius: 12px;
  padding: 0 13px;
  color: #fff;
  background: var(--blue);
  font-size: 13px;
  font-weight: 950;
}

.command-voice-card {
  display: grid;
  gap: 8px;
  margin: 10px 0;
  border: 1px solid color-mix(in srgb, var(--blue) 14%, var(--line));
  border-radius: 18px;
  padding: 10px;
  background: color-mix(in srgb, var(--panel) 88%, #fff 12%);
}

.command-voice-card.listening {
  border-color: color-mix(in srgb, var(--blue) 58%, var(--line));
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--blue) 10%, transparent);
}

.command-voice-card > button {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  min-height: 48px;
  border: 0;
  border-radius: 15px;
  padding: 0 10px;
  color: #fff;
  background: linear-gradient(135deg, var(--blue), var(--ink));
  font: inherit;
  font-weight: 950;
  text-align: left;
}

.command-voice-card > button .mic-icon {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  background: rgba(255,255,255,.16);
}

.command-voice-card > button i {
  border-radius: 999px;
  padding: 3px 6px;
  background: rgba(255,255,255,.18);
  font-size: 10px;
  font-style: normal;
  font-weight: 950;
}

.plate-ai-panel,
.ai-message-panel {
  display: grid;
  gap: 8px;
  margin: 8px 0 12px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: color-mix(in srgb, var(--panel) 86%, transparent);
}

.plate-ai-panel b {
  font-size: 15px;
}

.sheet-title-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.sheet-title-row h2 {
  margin-bottom: 0;
}

.sparkle-help {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--blue);
  background:
    radial-gradient(circle at 62% 28%, color-mix(in srgb, var(--gold) 30%, transparent), transparent 28%),
    color-mix(in srgb, var(--panel) 82%, #fff 18%);
  box-shadow: 0 10px 22px rgba(29, 29, 31, .1);
  font-size: 17px;
  font-weight: 950;
}

.ai-examples,
.ai-intents,
.urgent-examples,
.voice-help {
  display: flex;
  gap: 7px;
  overflow-x: auto;
  padding-bottom: 2px;
  scrollbar-width: none;
}

.ai-examples::-webkit-scrollbar,
.ai-intents::-webkit-scrollbar,
.urgent-examples::-webkit-scrollbar,
.voice-help::-webkit-scrollbar { display: none; }

.ai-examples button,
.ai-intents button,
.urgent-examples button,
.voice-help button,
.ai-message-button {
  flex: 0 0 auto;
  min-height: 32px;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0 11px;
  color: var(--ink);
  background: color-mix(in srgb, var(--panel) 84%, #fff 16%);
  font-size: 12px;
  font-weight: 900;
}

.ai-message-button {
  width: 100%;
  margin-top: 10px;
  color: #fff;
  background: linear-gradient(135deg, var(--blue), var(--ink));
}

.sheet-search input {
  min-width: 0;
  border: 0;
  outline: 0;
  min-height: 40px;
  padding: 0 10px;
  color: var(--plate-ink);
  background: transparent;
  font-size: 17px;
  font-weight: 950;
  letter-spacing: .02em;
  text-transform: uppercase;
}

.sheet-search input::placeholder {
  color: rgba(17, 24, 39, .44);
  font-size: 14px;
  font-weight: 850;
  letter-spacing: 0;
  text-transform: none;
}

.sheet-search button,
.sheet-actions button,
.wide-button,
.ride-card button {
  min-height: 36px;
  border: 0;
  border-radius: 14px;
  padding: 0 12px;
  color: #fff;
  background: var(--blue);
  font-weight: 900;
}

.sheet-search .inline-mic-ai {
  width: 36px;
  height: 36px;
  min-height: 36px;
  padding: 0;
  color: var(--blue);
  background: color-mix(in srgb, var(--panel) 82%, var(--blue) 10%);
}

.voice-search-form {
  grid-template-columns: minmax(0, 1fr) minmax(76px, auto);
}

.voice-search-form button {
  padding: 0 12px;
}

.voice-command-button {
  position: relative;
  display: grid;
  place-items: center;
  gap: 5px;
  width: min(176px, 58vw);
  min-height: 92px;
  margin: 8px auto;
  border: 0;
  border-radius: 999px;
  color: #fff;
  background:
    radial-gradient(circle at 50% 24%, rgba(255,255,255,.3), transparent 28%),
    linear-gradient(135deg, var(--blue), var(--ink));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.3),
    0 22px 58px color-mix(in srgb, var(--blue) 30%, transparent);
  font-size: 20px;
  font-weight: 950;
  letter-spacing: .08em;
}

.voice-command-button span {
  font-size: 24px;
}

.voice-search-talk .ai-badge {
  position: absolute;
  right: calc(50% - 38px);
  top: 25px;
  min-width: 20px;
  border-radius: 999px;
  padding: 3px 5px;
  color: #fff;
  background: linear-gradient(135deg, var(--blue), var(--gold));
  font-size: 9px;
  font-weight: 950;
}

.voice-result-card {
  display: grid;
  gap: 7px;
  margin-top: 12px;
  padding: 14px;
  border: 1px solid color-mix(in srgb, var(--blue) 18%, var(--line));
  border-radius: 22px;
  background:
    radial-gradient(circle at 100% 0, color-mix(in srgb, var(--blue) 12%, transparent), transparent 30%),
    color-mix(in srgb, var(--panel) 92%, transparent);
  box-shadow: 0 18px 48px rgba(29, 29, 31, .1);
}

.plate-sheet-tools {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
  margin: 7px 0 2px;
}

.plate-sheet-tools button {
  min-height: 36px;
  border: 1px solid var(--line);
  border-radius: 15px;
  color: var(--ink);
  background: color-mix(in srgb, var(--panel) 88%, #fff 12%);
  font-size: 12px;
  font-weight: 950;
}

.voice-result-card .sheet-actions {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.voice-result-card .sheet-actions button {
  min-height: 38px;
  font-size: 12px;
}

.camera-mock {
  display: grid;
  place-items: center;
  gap: 6px;
  min-height: 170px;
  margin: 14px 0;
  border: 1px dashed color-mix(in srgb, var(--blue) 42%, var(--line));
  border-radius: 28px;
  background:
    linear-gradient(90deg, transparent 48%, color-mix(in srgb, var(--blue) 18%, transparent) 49% 51%, transparent 52%),
    linear-gradient(0deg, transparent 48%, color-mix(in srgb, var(--blue) 18%, transparent) 49% 51%, transparent 52%),
    color-mix(in srgb, var(--panel) 86%, #fff 14%);
  text-align: center;
}

.camera-mock span {
  display: grid;
  place-items: center;
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--blue) 14%, white 86%);
  box-shadow: 0 14px 34px rgba(0, 113, 227, .16);
  font-size: 30px;
}

.camera-mock b {
  font-size: 18px;
}

.camera-mock small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
}

.voice-result-card h3 {
  margin: 0;
  font-size: 23px;
}

.voice-result-card small {
  color: var(--muted);
  font-weight: 850;
}

.voice-command-button.listening {
  background: linear-gradient(135deg, #ff4d4d, var(--gold));
  animation: micai-pulse 1s ease-in-out infinite;
}

.voice-command-button.processing {
  background: linear-gradient(135deg, var(--gold), var(--blue));
}

.voice-command-button.sent {
  background: linear-gradient(135deg, #22a06b, var(--blue));
}

.voice-note {
  text-align: center;
  font-size: 12px;
}

.micai-state {
  display: grid;
  gap: 3px;
  margin: 6px 0 8px;
  border: 1px solid color-mix(in srgb, #ff9f0a 26%, var(--line));
  border-radius: 15px;
  padding: 9px 10px;
  color: var(--ink);
  background:
    radial-gradient(circle at 12% 8%, color-mix(in srgb, #ff9f0a 10%, transparent), transparent 34%),
    color-mix(in srgb, var(--panel) 74%, transparent);
}

.micai-state b {
  font-size: 13px;
}

.micai-state span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
}

.micai-state button {
  justify-self: start;
  min-height: 28px;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0 12px;
  color: var(--ink);
  background: color-mix(in srgb, var(--panel) 88%, #fff 12%);
  font-size: 11px;
  font-weight: 900;
}

.micai-state.listening {
  border-color: color-mix(in srgb, #ff9f0a 34%, var(--line));
}

.micai-state.error {
  border-color: color-mix(in srgb, #ff9f0a 30%, var(--line));
}

.plate-normalized-preview {
  display: inline-flex;
  width: fit-content;
  max-width: 100%;
  border: 1px solid color-mix(in srgb, var(--line) 62%, transparent);
  border-radius: 999px;
  padding: 5px 10px;
  color: var(--ink) !important;
  background: color-mix(in srgb, var(--panel) 72%, transparent);
  font-size: 12px !important;
  font-weight: 950;
}

.micai-confirm-card small {
  color: var(--blue);
}

.gps-card {
  display: grid;
  gap: 7px;
  margin: 10px 0;
  border: 1px solid color-mix(in srgb, var(--blue) 16%, var(--line));
  border-radius: 18px;
  padding: 12px;
  background:
    radial-gradient(circle at 12% 8%, color-mix(in srgb, #34c759 12%, transparent), transparent 34%),
    color-mix(in srgb, var(--panel) 78%, transparent);
}

.gps-card b {
  color: var(--ink);
  font-size: 16px;
}

.gps-card span,
.gps-card small,
.gps-card em {
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
  font-weight: 850;
  line-height: 1.3;
}

.gps-card strong {
  color: var(--blue);
  font-size: 13px;
}

.active-vehicle-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.active-gps-dot {
  display: inline-flex;
  align-items: center;
  color: var(--muted);
  font-size: 11px;
  font-weight: 950;
  white-space: nowrap;
}

.active-gps-dot.online {
  color: #0f7a35;
}

.active-vehicle-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin: 8px 0;
}

.active-vehicle-summary small {
  flex-basis: 100%;
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
}

.quick-chip {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  border: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
  border-radius: 999px;
  padding: 0 10px;
  color: var(--ink);
  background: rgba(255, 255, 255, .7);
  font-size: 12px;
  font-weight: 950;
}

.quick-chip.online {
  color: #0f7a35;
  border-color: color-mix(in srgb, #34c759 34%, var(--line));
  background: color-mix(in srgb, #34c759 10%, #fff 90%);
}

.quick-chip.warning {
  color: #8a4b00;
  border-color: color-mix(in srgb, #ff9f0a 42%, var(--line));
  background: color-mix(in srgb, #ff9f0a 12%, #fff 88%);
}

.quick-chip.subtle {
  color: var(--muted);
}

.active-vehicle-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 12px 0 8px;
}

.active-vehicle-actions button {
  min-height: 44px;
  border: 1px solid color-mix(in srgb, var(--line) 72%, transparent);
  border-radius: 15px;
  padding: 0 10px;
  color: var(--ink);
  background: color-mix(in srgb, var(--panel) 88%, #fff 12%);
  font-size: 12px;
  font-weight: 950;
}

.active-vehicle-actions button.primary {
  color: #fff;
  border-color: transparent;
  background: var(--blue);
}

.active-vehicle-actions .verify-action {
  display: grid;
  gap: 2px;
  align-content: center;
  grid-column: span 1;
  color: #7a3f00;
  border-color: color-mix(in srgb, #ff9f0a 44%, var(--line));
  background:
    linear-gradient(180deg, color-mix(in srgb, #fff7e6 86%, #fff 14%), #fff);
  box-shadow: 0 8px 18px rgba(255, 159, 10, .12);
}

.active-vehicle-actions .verify-action b,
.active-vehicle-actions .verify-action small {
  display: block;
  line-height: 1.05;
}

.active-vehicle-actions .verify-action small {
  color: color-mix(in srgb, #7a3f00 74%, var(--muted));
  font-size: 10px;
  font-weight: 950;
}

.active-vehicle-secondary {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin: 7px 0 2px;
}

.active-vehicle-secondary button {
  min-height: 32px;
  border: 0;
  padding: 0;
  color: var(--blue);
  background: transparent;
  font-size: 12px;
  font-weight: 950;
}

.road-mode-card {
  display: grid;
  gap: 9px;
  margin: 10px 0;
  border: 1px solid color-mix(in srgb, #ff9f0a 28%, var(--line));
  border-radius: 16px;
  padding: 12px;
  background: color-mix(in srgb, #ff9f0a 8%, #fff 92%);
}

.road-mode-card b {
  display: block;
  color: var(--ink);
  font-size: 13px;
  font-weight: 950;
}

.road-mode-card span,
.road-mode-card small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
  line-height: 1.35;
}

.road-mode-presets {
  display: flex;
  gap: 7px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.road-mode-presets::-webkit-scrollbar { display: none; }

.road-mode-presets button {
  flex: 0 0 auto;
  min-height: 38px;
  border: 0;
  border-radius: 999px;
  padding: 0 12px;
  color: #fff;
  background: #d97706;
  font-size: 12px;
  font-weight: 950;
}

.road-mode-presets button:disabled {
  opacity: .54;
}

.road-alert-active-card,
.road-alert-confirm-card,
.road-alert-form,
.road-alert-card {
  display: grid;
  gap: 8px;
  border: 1px solid color-mix(in srgb, #ff9f0a 30%, var(--line));
  border-radius: 16px;
  padding: 12px;
  background: color-mix(in srgb, #fff8eb 78%, #fff 22%);
}

.road-alert-active-card {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
}

.road-alert-active-card strong {
  color: var(--ink);
  font-size: 15px;
  font-weight: 950;
}

.road-alert-active-actions {
  display: grid;
  gap: 7px;
  justify-items: end;
}

.road-alert-active-card button,
.road-alert-add-button {
  min-height: 38px;
  border: 0;
  border-radius: 999px;
  padding: 0 12px;
  color: #fff;
  background: #d97706;
  font-size: 12px;
  font-weight: 950;
}

.road-alert-confirm-card span,
.road-alert-confirm-card small,
.road-alert-confirm-card em,
.road-alert-card span,
.road-alert-card small,
.road-alert-card p {
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
  font-weight: 850;
  line-height: 1.35;
}

.road-alert-confirm-card b,
.road-alert-card b {
  color: var(--ink);
  font-size: 15px;
  font-weight: 950;
}

.road-alert-form label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}

.road-alert-form select,
.road-alert-form textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 10px 12px;
  color: var(--ink);
  background: rgba(255, 255, 255, .86);
  font: inherit;
  font-weight: 850;
}

.road-alert-form button[type="submit"] {
  min-height: 44px;
  border: 0;
  border-radius: 14px;
  color: #fff;
  background: var(--blue);
  font-weight: 950;
}

.road-alerts-section {
  display: grid;
  gap: 10px;
}

.road-alert-card {
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center;
}

.road-alert-card button {
  min-height: 34px;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0 10px;
  color: var(--muted);
  background: rgba(255, 255, 255, .72);
  font-size: 12px;
  font-weight: 950;
}

.road-alert-icon {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  color: #7a3f00;
  background: color-mix(in srgb, #ff9f0a 18%, #fff 82%);
  font-weight: 950;
}

.road-alert-map-chip {
  position: fixed;
  left: 50%;
  bottom: calc(env(safe-area-inset-bottom) + 92px);
  z-index: 45;
  transform: translateX(-50%);
  min-height: 34px;
  max-width: min(360px, calc(100vw - 32px));
  border: 1px solid color-mix(in srgb, #ff9f0a 36%, var(--line));
  border-radius: 999px;
  padding: 0 14px;
  color: #7a3f00;
  background: color-mix(in srgb, #fff7e6 88%, #fff 12%);
  box-shadow: 0 12px 28px rgba(29, 29, 31, .12);
  font-size: 12px;
  font-weight: 950;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.gps-debug-toggle {
  min-height: 34px;
  border: 0;
  padding: 0;
  color: var(--blue);
  background: transparent;
  font-size: 12px;
  font-weight: 950;
}

.gps-setting,
.gps-toggle {
  display: grid;
  gap: 6px;
  border: 1px solid color-mix(in srgb, var(--line) 64%, transparent);
  border-radius: 14px;
  padding: 10px;
  color: var(--muted);
  background: rgba(255, 255, 255, .58);
  font-size: 12px;
  font-weight: 900;
}

.gps-setting select {
  min-height: 44px;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 0 10px;
  color: var(--ink);
  background: rgba(255, 255, 255, .82);
  font: inherit;
  font-weight: 900;
}

.gps-toggle {
  grid-template-columns: 24px minmax(0, 1fr);
  align-items: center;
}

.gps-toggle.gps-action {
  grid-template-columns: minmax(0, 1fr) auto;
}

.gps-toggle.gps-action button {
  min-height: 32px;
  border: 0;
  border-radius: 999px;
  padding: 0 12px;
  color: #fff;
  background: var(--blue);
  font-size: 12px;
  font-weight: 950;
}

.gps-toggle input {
  width: 20px;
  height: 20px;
}

@keyframes micai-pulse {
  0%, 100% {
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.3),
      0 18px 46px color-mix(in srgb, var(--blue) 22%, transparent),
      0 0 0 0 rgba(255, 159, 10, .18);
  }
  50% {
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.3),
      0 24px 62px color-mix(in srgb, var(--blue) 28%, transparent),
      0 0 0 10px rgba(255, 159, 10, 0);
  }
}

.recent-plates,
.place-filters {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  margin: 8px 0 14px;
  padding-bottom: 2px;
}

.recent-plates button,
.place-filters button {
  flex: 0 0 auto;
  min-height: 30px;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0 12px;
  color: var(--ink);
  background: rgba(255, 255, 255, .58);
  font-size: 12px;
  font-weight: 900;
}

.place-filters button.active {
  border-color: color-mix(in srgb, var(--blue) 48%, var(--line));
  color: var(--blue);
  background: color-mix(in srgb, var(--blue) 10%, #fff 90%);
  box-shadow: 0 6px 14px color-mix(in srgb, var(--blue) 12%, transparent);
}

.vehicle-result {
  display: grid;
  gap: 4px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

.vehicle-result h3 {
  margin: 0;
  font-size: 34px;
}

.vehicle-result span,
.vehicle-result small,
.card-list small,
.card-list em,
.card-list span,
.profile-card span,
.mini-list span {
  color: var(--muted);
  font-size: 13px;
}

.plate-search-state,
.plate-search-empty,
.plate-result-card,
.plate-conflict-warning {
  display: grid;
  gap: 8px;
  margin-top: 12px;
  padding: 14px;
  border: 1px solid color-mix(in srgb, var(--line) 72%, transparent);
  border-radius: 22px;
  background: color-mix(in srgb, var(--panel) 90%, white 10%);
  box-shadow: 0 14px 36px rgba(29, 29, 31, .08);
}

.plate-search-state.warning,
.plate-conflict-warning {
  border-color: color-mix(in srgb, var(--gold) 42%, var(--line));
  background: color-mix(in srgb, var(--gold) 10%, var(--panel));
}

.plate-result-card {
  grid-template-columns: 58px 1fr;
  align-items: start;
}

.plate-result-photo {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border: 1px solid color-mix(in srgb, var(--blue) 22%, var(--line));
  border-radius: 18px;
  background:
    radial-gradient(circle at 30% 20%, rgba(255,255,255,.95), transparent 42%),
    color-mix(in srgb, var(--blue) 12%, white 88%);
  background-size: cover;
  background-position: center;
  font-size: 28px;
}

.plate-result-photo.has-photo {
  border-color: rgba(255, 255, 255, .82);
}

.plate-result-main {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.plate-result-main b {
  color: var(--ink);
  font-size: 17px;
}

.plate-result-main em {
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
  font-weight: 850;
}

.primary-profile-label {
  display: inline-flex;
  align-self: start;
  width: fit-content;
  border: 1px solid color-mix(in srgb, var(--blue) 24%, var(--line));
  border-radius: 999px;
  padding: 3px 8px;
  color: var(--blue);
  background: color-mix(in srgb, var(--blue) 8%, transparent);
  font-size: 11px;
  font-weight: 950;
}

.plate-result-identity,
.mini-profile-identity,
.mini-profile-gallery,
.vehicle-identity-card {
  display: grid;
  gap: 4px;
  border: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
  border-radius: 16px;
  padding: 10px;
  background: color-mix(in srgb, var(--panel) 72%, transparent);
}

.plate-result-identity span,
.mini-profile-identity span,
.mini-profile-gallery span,
.vehicle-identity-card span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.plate-result-identity b,
.mini-profile-identity b,
.mini-profile-gallery b,
.vehicle-identity-card b {
  color: var(--ink);
  font-size: 14px;
  font-weight: 950;
}

.plate-result-identity small,
.mini-profile-identity small,
.mini-profile-identity em,
.mini-profile-gallery small,
.vehicle-identity-card small {
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
  font-weight: 850;
}

.vehicle-identity-card button {
  justify-self: start;
  min-height: 36px;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0 12px;
  color: var(--ink);
  background: color-mix(in srgb, var(--panel) 88%, #fff 12%);
  font-size: 12px;
  font-weight: 950;
}

.fp-id-qr-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 88px;
  gap: 12px;
  align-items: center;
  border: 1px solid color-mix(in srgb, var(--blue) 20%, var(--line));
  border-radius: 16px;
  padding: 12px;
  background: color-mix(in srgb, var(--panel) 78%, var(--blue) 6%);
}

.fp-id-qr-card div:first-child {
  display: grid;
  gap: 4px;
}

.fp-id-qr-card span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.fp-id-qr-card b {
  color: var(--ink);
  font-size: 18px;
  font-weight: 950;
}

.fp-id-qr-card small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 820;
  line-height: 1.35;
}

.fp-id-qr-mock {
  width: 72px;
  aspect-ratio: 1;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px;
  justify-self: end;
  padding: 8px;
  border-radius: 14px;
  background: #fff;
  box-shadow: inset 0 0 0 1px var(--line);
}

.fp-id-qr-mock i {
  border-radius: 4px;
  background: repeating-linear-gradient(45deg, var(--ink) 0 5px, transparent 5px 9px);
}

.plate-badge {
  width: fit-content;
  padding: 5px 9px;
  border: 1px solid color-mix(in srgb, var(--blue) 22%, var(--line));
  border-radius: 10px;
  color: var(--ink);
  background: white;
  font-size: 13px;
  font-weight: 950;
}

.plate-result-actions {
  grid-column: 1 / -1;
}

.alert-presets {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 12px 0;
}

.alert-presets button,
.plate-alert-item button {
  min-height: 42px;
  border: 1px solid var(--line);
  border-radius: 14px;
  color: var(--ink);
  background: color-mix(in srgb, var(--panel) 88%, #fff 12%);
  font-weight: 900;
}

.alert-presets button.active {
  border-color: color-mix(in srgb, var(--blue) 62%, var(--line));
  color: #fff;
  background: var(--blue);
}

.contact-alert-sheet {
  display: grid;
  gap: 12px;
}

.contact-alert-mode {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  padding: 4px;
  border-radius: 16px;
  background: rgba(241, 245, 249, .82);
}

.contact-alert-mode button {
  min-height: 42px;
  border: 0;
  border-radius: 13px;
  color: #475569;
  background: transparent;
  font-size: 13px;
  font-weight: 900;
}

.contact-alert-mode button.active {
  color: #fff;
  background: linear-gradient(135deg, var(--blue), #0b5db8);
  box-shadow: 0 8px 18px rgba(0, 113, 227, .18);
}

.contact-alert-reasons {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  margin: 0;
}

.contact-alert-reasons button {
  min-height: 38px;
  padding: 7px 8px;
  font-size: 11px;
}

.contact-alert-helper {
  display: block;
  color: #64748b;
  font-size: 12px;
  font-weight: 750;
  line-height: 1.35;
}

.operator-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.alert-message-field,
.garage-alerts-panel,
.garage-contact-panel {
  display: grid;
  gap: 8px;
}

.alert-message-field textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 12px;
  color: var(--ink);
  background: rgba(255, 255, 255, .74);
  font: inherit;
  font-weight: 800;
  resize: vertical;
}

.conversation-list {
  display: grid;
  gap: 5px;
  padding-bottom: calc(env(safe-area-inset-bottom) + 110px);
}

.message-notification-sheet {
  display: grid;
  gap: 12px;
}

.message-notification-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 12px;
}

.message-notification-head h2 {
  margin: 1px 0 3px;
  color: var(--ink);
  font-size: 25px;
}

.message-notification-head span,
.message-notification-summary span {
  color: rgba(15, 23, 42, .62);
  font-size: 13px;
  font-weight: 760;
}

.message-notification-head button,
.message-notification-actions button,
.message-notification-dev button {
  min-height: 42px;
  border: 1px solid color-mix(in srgb, var(--blue) 14%, var(--line));
  border-radius: 14px;
  padding: 0 14px;
  color: var(--blue);
  background: color-mix(in srgb, var(--blue) 6%, white 94%);
  font: inherit;
  font-weight: 900;
}

.message-notification-summary {
  display: grid;
  gap: 3px;
  border: 1px solid color-mix(in srgb, var(--blue) 13%, var(--line));
  border-radius: 18px;
  padding: 13px;
  background:
    radial-gradient(circle at 86% 0, color-mix(in srgb, #21c7a8 12%, transparent), transparent 36%),
    color-mix(in srgb, var(--blue) 5%, white 95%);
}

.message-notification-summary b {
  color: color-mix(in srgb, var(--ink) 78%, var(--blue));
  font-size: 17px;
}

.message-notification-summary.has-new b {
  color: var(--blue);
}

.message-notification-list {
  display: grid;
  gap: 8px;
}

.message-notification-row {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-height: 62px;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 9px;
  background: rgba(255, 255, 255, .76);
}

.message-notification-row.new {
  border-color: color-mix(in srgb, var(--blue) 28%, var(--line));
  background: color-mix(in srgb, var(--blue) 6%, #fff 94%);
}

.message-notification-row.system {
  background: color-mix(in srgb, #21c7a8 5%, #fff 95%);
}

.message-notification-avatar {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 15px;
  color: #fff;
  background: linear-gradient(135deg, var(--blue), #102f77);
  font-size: 12px;
  font-weight: 950;
}

.message-notification-row div {
  min-width: 0;
}

.message-notification-row b,
.message-notification-row small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.message-notification-row b {
  color: var(--ink);
  font-size: 14px;
}

.message-notification-row small {
  color: rgba(15, 23, 42, .62);
  font-size: 12px;
  font-weight: 760;
}

.message-notification-row i {
  border-radius: 999px;
  padding: 5px 8px;
  color: color-mix(in srgb, var(--ink) 62%, var(--blue));
  background: color-mix(in srgb, var(--blue) 7%, white 93%);
  font-size: 10px;
  font-style: normal;
  font-weight: 920;
  white-space: nowrap;
}

.message-notification-row.new i {
  color: #fff;
  background: linear-gradient(135deg, #0a84ff, #21c7a8);
}

.message-notification-actions,
.message-notification-dev {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
  gap: 8px;
}

.message-notification-actions button:first-child {
  color: #fff;
  background: linear-gradient(135deg, var(--blue), #075ec5);
  box-shadow: 0 10px 20px rgba(0, 113, 227, .16);
}

.message-notification-actions button:disabled {
  opacity: .55;
  box-shadow: none;
}

.message-notification-dev {
  border-top: 1px solid var(--line);
  padding-top: 10px;
}

.message-notification-dev button {
  min-height: 36px;
  color: rgba(15, 23, 42, .72);
  background: rgba(255, 255, 255, .64);
  font-size: 12px;
}

.messages-comms-hero {
  display: grid;
  gap: 6px;
  padding: 7px 9px;
  border: 1px solid color-mix(in srgb, var(--blue) 10%, var(--line));
  border-radius: 15px;
  background:
    radial-gradient(circle at 82% 0, color-mix(in srgb, #34c759 8%, transparent), transparent 33%),
    rgba(255, 255, 255, .72);
  box-shadow: none;
}

.messages-comms-subtitle {
  margin: 0;
  color: rgba(15, 23, 42, .66);
  font-size: 12px;
  font-weight: 850;
}

.messages-comms-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
}

.messages-comms-top .eyebrow {
  margin: 0 0 1px;
  color: var(--blue);
  font-size: 10px;
  font-weight: 950;
  letter-spacing: 0;
  text-transform: uppercase;
}

.messages-comms-top span,
.messages-comms-hero > small {
  color: rgba(15, 23, 42, .62);
  font-size: 11px;
  font-weight: 830;
}

.messages-comms-top > small {
  min-height: 25px;
  display: inline-flex;
  align-items: center;
  border: 1px solid color-mix(in srgb, var(--blue) 18%, var(--line));
  border-radius: 999px;
  padding: 0 8px;
  color: var(--blue);
  background: color-mix(in srgb, var(--blue) 7%, #fff 93%);
  font-size: 10px;
  font-weight: 950;
  white-space: nowrap;
}

.messages-command-hint {
  color: rgba(15, 23, 42, .48);
  font-size: 10px;
  font-weight: 850;
}

.messages-command {
  display: grid;
  gap: 6px;
  padding: 8px;
  border: 1px solid color-mix(in srgb, var(--blue) 10%, var(--line));
  border-radius: 16px;
  background: rgba(255, 255, 255, .72);
}

.messages-command-copy {
  display: flex;
  justify-content: space-between;
  gap: 8px;
}

.messages-command-copy b {
  color: var(--ink);
  font-size: 12px;
  font-weight: 950;
}

.messages-command-copy span {
  overflow: hidden;
  color: rgba(15, 23, 42, .50);
  font-size: 11px;
  font-weight: 820;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.messages-command-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 36px;
  gap: 6px;
  align-items: center;
}

.messages-command label,
.messages-comms-hero .messages-command-row label {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 7px;
  min-height: 36px;
  border: 1px solid color-mix(in srgb, var(--blue) 16%, var(--line));
  border-radius: 13px;
  padding: 0 10px;
  background: #fff;
}

.messages-command label span,
.messages-comms-hero .messages-command-row label span {
  color: var(--muted);
  font-weight: 950;
}

.messages-command input,
.messages-comms-hero .messages-command-row input {
  min-width: 0;
  border: 0;
  outline: 0;
  color: var(--ink);
  background: transparent;
  font: inherit;
  font-size: 12px;
  font-weight: 850;
}

.messages-command button,
.messages-comms-hero .messages-command-row > button {
  min-height: 36px;
  width: 36px;
  border: 1px solid color-mix(in srgb, var(--blue) 24%, var(--line));
  border-radius: 999px;
  padding: 0;
  color: #fff;
  background: var(--blue);
  font-size: 15px;
  font-weight: 950;
  white-space: nowrap;
}

.messages-mark-all-read {
  justify-self: start;
  min-height: 30px;
  border: 1px solid color-mix(in srgb, var(--blue) 15%, var(--line));
  border-radius: 999px;
  padding: 0 10px;
  color: var(--blue);
  background: color-mix(in srgb, var(--blue) 6%, #fff 94%);
  font: inherit;
  font-size: 10px;
  font-weight: 950;
}

.messages-mark-all-read:disabled {
  opacity: .48;
}

.messages-heads {
  display: flex;
  gap: 9px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding: 0 10px 3px 0;
  scrollbar-width: none;
  touch-action: pan-x;
}

.messages-heads::-webkit-scrollbar {
  display: none;
}

.messages-heads button {
  width: 62px;
  min-width: 62px;
  display: grid;
  justify-items: center;
  gap: 4px;
  border: 0;
  padding: 0;
  color: rgba(15, 23, 42, .72);
  background: transparent;
  font: inherit;
  position: relative;
}

.messages-heads button > span {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border: 2px solid #fff;
  border-radius: 999px;
  color: var(--ink);
  background:
    radial-gradient(circle at 30% 15%, rgba(255, 255, 255, .94), transparent 34%),
    color-mix(in srgb, var(--blue) 11%, #eef6ff 89%);
  box-shadow: 0 5px 12px rgba(15, 23, 42, .07);
  font-size: 12px;
  font-weight: 950;
}

.messages-heads button > span.has-photo,
.conversation-avatar.has-photo {
  overflow: hidden;
  padding: 0;
  color: transparent;
  background: #fff;
}

.messages-heads button > span.has-photo img,
.conversation-avatar.has-photo img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.messages-heads button.group > span,
.messages-heads button.group_create > span {
  background: color-mix(in srgb, #10b981 12%, #fff 88%);
}

.messages-heads button.group > span.has-photo {
  background: #fff;
}

.messages-heads button.roadtalk > span {
  background: color-mix(in srgb, #34c759 16%, #fff 84%);
}

.messages-heads button.activity > span {
  background: color-mix(in srgb, #ff9f0a 15%, #fff 85%);
}

.messages-heads b {
  overflow: hidden;
  width: 100%;
  font-size: 9px;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.messages-heads i {
  min-width: 17px;
  height: 17px;
  display: grid;
  place-items: center;
  border: 2px solid #fff;
  border-radius: 999px;
  color: #fff;
  background: var(--blue);
  font-size: 9px;
  font-style: normal;
  font-weight: 950;
  position: absolute;
  top: 0;
  right: 5px;
}

.messages-group-tools {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border: 1px solid color-mix(in srgb, #10b981 20%, var(--line));
  border-radius: 15px;
  padding: 8px 9px;
  background: color-mix(in srgb, #10b981 7%, #fff 93%);
}

.messages-group-tools div {
  display: grid;
  gap: 1px;
  min-width: 0;
}

.messages-group-tools b {
  color: var(--ink);
  font-size: 12px;
  font-weight: 950;
}

.messages-group-tools span {
  color: rgba(15, 23, 42, .56);
  font-size: 11px;
  font-weight: 830;
}

.messages-group-tools button,
.messages-empty-state button {
  min-height: 32px;
  border: 1px solid color-mix(in srgb, #10b981 30%, var(--line));
  border-radius: 999px;
  padding: 0 10px;
  color: #065f46;
  background: #fff;
  font-size: 11px;
  font-weight: 950;
  white-space: nowrap;
}

.fp-comms-groups-summary-compact {
  gap: 8px;
  border-radius: 13px;
  padding: 6px 8px;
}

.fp-comms-groups-summary-compact b {
  font-size: 11px;
}

.fp-comms-groups-summary-compact span {
  font-size: 10px;
}

.fp-comms-groups-summary-compact button {
  min-height: 28px;
  padding: 0 8px;
  font-size: 10px;
}

.messages-channel-shell {
  display: grid;
  gap: 3px;
}

.messages-channel-shell > span {
  display: none;
}

.messages-tabs {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding: 0 14px 3px 0;
  scrollbar-width: none;
}

.messages-tabs::-webkit-scrollbar {
  display: none;
}

.messages-tabs button,
.messages-micai button,
.conversation-presets button,
.conversation-head-actions button {
  min-height: 34px;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0 7px;
  color: var(--ink);
  background: rgba(255, 255, 255, .78);
  font-size: 10px;
  font-weight: 950;
  white-space: nowrap;
}

.messages-tabs button.active {
  border-color: color-mix(in srgb, var(--blue) 60%, var(--line));
  color: #fff;
  background: var(--blue);
  box-shadow: none;
}

.messages-micai {
  display: grid;
  gap: 4px;
  margin: 4px 0 10px;
}

.messages-micai small {
  color: rgba(15, 23, 42, .58);
  font-weight: 800;
}

.messages-center-list {
  gap: 5px;
}

.messages-empty-state {
  min-height: 92px;
  display: grid;
  align-content: center;
  border-style: dashed;
  color: rgba(15, 23, 42, .62);
  background: color-mix(in srgb, var(--blue) 4%, #fff 96%);
  font-weight: 850;
}

.message-center-item {
  width: 100%;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  gap: 4px 9px;
  align-items: center;
  min-height: 64px;
  border: 1px solid transparent;
  border-radius: 13px;
  padding: 7px 8px;
  color: var(--ink);
  background: rgba(255, 255, 255, .62);
  box-shadow: none;
  position: relative;
}

.message-center-item::before {
  display: none;
}

.message-center-item.unread {
  border-color: color-mix(in srgb, var(--blue) 34%, var(--line));
  background: color-mix(in srgb, var(--blue) 5%, #fff 95%);
}

.message-center-item.alert {
  background: color-mix(in srgb, #ff9f0a 5%, #fff 95%);
}

.message-center-item.alert::before {
  background: #ff9f0a;
}

.message-center-item.contact {
  background: color-mix(in srgb, #7c3aed 4%, #fff 96%);
}

.message-center-item.contact::before {
  background: #7c3aed;
}

.message-center-item.request {
  background: color-mix(in srgb, #7c3aed 4%, #fff 96%);
}

.message-center-item.request::before {
  background: #7c3aed;
}

.message-center-item.group {
  background: color-mix(in srgb, #10b981 5%, #fff 95%);
}

.message-center-item.group::before,
.message-center-item.group_create::before {
  background: #10b981;
}

.message-center-item.roadtalk {
  background: color-mix(in srgb, #34c759 5%, #fff 95%);
}

.message-center-item.roadtalk::before {
  background: #34c759;
}

.message-center-item.system {
  background: color-mix(in srgb, #21c7a8 5%, #fff 95%);
}

.message-center-item.system::before {
  background: #21c7a8;
}

.message-center-item.urgent {
  border-color: color-mix(in srgb, #ff3b30 26%, var(--line));
}

.message-center-item.important {
  border-color: color-mix(in srgb, #7c3aed 24%, var(--line));
}

.message-center-copy {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.message-center-copy span,
.message-center-copy small,
.message-center-copy em {
  overflow: hidden;
  color: rgba(15, 23, 42, .58);
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.message-center-copy b {
  overflow: hidden;
  color: var(--ink);
  font-size: 14px;
  font-weight: 950;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.message-center-item.group .message-center-copy b {
  letter-spacing: 0;
}

.message-center-copy small {
  color: rgba(15, 23, 42, .72);
  font-size: 12px;
}

.message-center-item > i {
  min-width: 19px;
  height: 19px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  color: #fff;
  background: var(--blue);
  font-size: 9px;
  font-style: normal;
  font-weight: 950;
  position: absolute;
  top: 7px;
  right: 8px;
}

.message-mini-stack {
  grid-column: 3;
  grid-row: 1;
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  min-width: 38px;
  padding-right: 2px;
}

.message-mini-stack span {
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  margin-left: -8px;
  border: 2px solid #fff;
  border-radius: 999px;
  background: #eef6ff;
  font-size: 10px;
}

.message-mini-stack em {
  min-width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  margin-left: -6px;
  border: 2px solid #fff;
  border-radius: 999px;
  color: #fff;
  background: #10b981;
  font-size: 9px;
  font-style: normal;
  font-weight: 950;
}

.message-center-actions {
  grid-column: 2 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.message-center-actions button {
  min-height: 25px;
  border: 1px solid color-mix(in srgb, var(--line) 78%, transparent);
  border-radius: 999px;
  padding: 0 7px;
  color: var(--ink);
  background: rgba(255, 255, 255, .82);
  font-size: 9px;
  font-weight: 950;
}

.message-center-actions button:first-child {
  color: #fff;
  border-color: var(--blue);
  background: var(--blue);
}

.fp-comms-screen,
.fp-comms-detail {
  display: grid;
  gap: 10px;
  min-height: calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 44px);
  color: #101828;
}

.fp-comms-screen {
  align-content: start;
}

.fp-comms-inbox-compact {
  gap: 6px;
}

.fp-comms-header,
.fp-comms-detail-header {
  position: sticky;
  top: calc(env(safe-area-inset-top) * -1);
  z-index: 9;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 8px;
  min-height: 58px;
  margin: -4px -2px 0;
  padding: 4px 0 8px;
  background:
    linear-gradient(180deg, rgba(245, 248, 252, .96), rgba(245, 248, 252, .82));
  backdrop-filter: blur(14px) saturate(1.08);
}

.fp-comms-detail-header {
  grid-template-columns: 44px 42px minmax(0, 1fr) auto;
}

.fp-comms-topbar-compact {
  grid-template-columns: 36px minmax(0, 1fr) auto 36px;
  gap: 6px;
  position: relative;
  top: auto;
  min-height: 38px;
  margin: -8px -2px 0;
  padding: 0 0 2px;
  background: transparent;
  backdrop-filter: none;
}

.fp-comms-topbar-compact .fp-comms-icon-button,
.fp-comms-topbar-compact .fp-comms-close {
  width: 34px;
  min-height: 34px;
  height: 34px;
  border-radius: 13px;
}

.fp-comms-topbar-compact .fp-comms-icon-button {
  font-size: 23px;
}

.fp-comms-topbar-compact .fp-comms-close-icon {
  padding: 0;
  color: #475467;
  font-size: 20px;
  line-height: 1;
}

.fp-comms-topbar-compact .fp-comms-menu-button {
  padding: 0;
  color: #667085;
  background: transparent;
  border-color: transparent;
  font-size: 18px;
  letter-spacing: .5px;
  line-height: 1;
}

.fp-comms-topbar-compact em {
  padding: 2px 6px;
  font-size: 8px;
}

.fp-comms-topbar-compact h1 {
  margin: 0;
  overflow: hidden;
  color: #101828;
  font-size: 20px;
  line-height: 1.05;
  font-weight: 950;
  letter-spacing: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fp-comms-topbar-compact span {
  display: none;
}

.fp-comms-header b,
.fp-comms-detail-header b {
  display: block;
  overflow: hidden;
  color: #101828;
  font-size: 21px;
  font-weight: 950;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fp-comms-header span,
.fp-comms-detail-header span {
  display: block;
  overflow: hidden;
  color: #667085;
  font-size: 12px;
  font-weight: 760;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fp-comms-header em {
  border: 1px solid rgba(0, 113, 227, .16);
  border-radius: 999px;
  padding: 3px 7px;
  color: var(--blue);
  background: rgba(0, 113, 227, .07);
  font-size: 9px;
  font-style: normal;
  font-weight: 950;
}

.fp-comms-icon-button,
.fp-comms-close,
.fp-comms-detail-header > button {
  min-height: 42px;
  border: 1px solid rgba(15, 23, 42, .08);
  border-radius: 999px;
  color: #344054;
  background: rgba(255, 255, 255, .86);
  font: inherit;
  font-size: 12px;
  font-weight: 920;
}

.fp-comms-icon-button,
.fp-comms-detail-header > button:first-child {
  width: 42px;
  padding: 0;
  font-size: 27px;
  line-height: 1;
}

.fp-comms-close,
.fp-comms-detail-header > button:last-child {
  padding: 0 11px;
}

.fp-comms-search {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 44px;
  gap: 8px;
  align-items: center;
}

.fp-comms-search-compact {
  grid-template-columns: minmax(0, 1fr) 38px;
  gap: 6px;
}

.fp-comms-search label {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  min-height: 44px;
  border: 1px solid rgba(15, 23, 42, .08);
  border-radius: 16px;
  padding: 0 12px;
  color: #667085;
  background: #fff;
}

.fp-comms-search-compact label {
  min-height: 38px;
  border-radius: 14px;
  padding: 0 10px;
}

.fp-comms-search input {
  min-width: 0;
  border: 0;
  outline: 0;
  color: #101828;
  background: transparent;
  font: inherit;
  font-size: 13px;
  font-weight: 800;
}

.fp-comms-search-compact input {
  font-size: 12px;
}

.fp-comms-search button {
  width: 44px;
  height: 44px;
  min-height: 44px;
  border: 0;
  border-radius: 16px;
  color: #fff;
  background: var(--blue);
  font: inherit;
  font-size: 22px;
  font-weight: 900;
  box-shadow: 0 10px 20px rgba(0, 113, 227, .16);
}

.fp-comms-search-compact button {
  width: 38px;
  height: 38px;
  min-height: 38px;
  border-radius: 14px;
  font-size: 19px;
  box-shadow: 0 7px 16px rgba(0, 113, 227, .13);
}

.fp-comms-filter-row {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding: 1px 14px 5px 0;
  scrollbar-width: none;
}

.fp-comms-filters-compact {
  gap: 5px;
  padding: 0 12px 2px 0;
}

.fp-comms-filter-row::-webkit-scrollbar {
  display: none;
}

.fp-comms-filter-row button {
  min-height: 34px;
  border: 1px solid rgba(15, 23, 42, .08);
  border-radius: 999px;
  padding: 0 11px;
  color: #344054;
  background: #fff;
  font: inherit;
  font-size: 11px;
  font-weight: 920;
  white-space: nowrap;
}

.fp-comms-filters-compact button {
  min-height: 28px;
  padding: 0 9px;
  font-size: 10px;
  font-weight: 900;
}

.fp-comms-filter-row button.active {
  border-color: var(--blue);
  color: #fff;
  background: var(--blue);
}

.fp-comms-inbox-compact .fp-comms-meta-row {
  margin-top: -1px;
  font-size: 10px;
}

.fp-comms-inbox-compact .fp-comms-meta-row button {
  min-height: 27px;
  padding: 0 8px;
  font-size: 9px;
}

.fp-comms-inbox-compact .fp-comms-status {
  padding: 6px 8px;
  font-size: 11px;
}

.fp-comms-meta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: #667085;
  font-size: 11px;
  font-weight: 820;
}

.fp-comms-meta-row button {
  min-height: 30px;
  border: 0;
  border-radius: 999px;
  padding: 0 10px;
  color: var(--blue);
  background: rgba(0, 113, 227, .07);
  font: inherit;
  font-size: 10px;
  font-weight: 950;
}

.fp-comms-meta-row button:disabled {
  opacity: .46;
}

.fp-comms-status {
  margin: 0;
  border-radius: 14px;
  padding: 8px 10px;
  color: #344054;
  background: rgba(255, 255, 255, .72);
  font-size: 12px;
  font-weight: 800;
}

.fp-comms-list {
  display: grid;
  gap: 6px;
  padding-bottom: calc(env(safe-area-inset-bottom) + 112px);
}

.fp-comms-inbox-compact .fp-comms-list {
  gap: 5px;
  padding-bottom: calc(env(safe-area-inset-bottom) + 94px);
}

.fp-comms-item {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  min-height: 72px;
  border: 1px solid rgba(15, 23, 42, .06);
  border-radius: 18px;
  padding: 10px;
  color: #101828;
  background: rgba(255, 255, 255, .92);
  box-shadow: 0 6px 18px rgba(15, 23, 42, .045);
  position: relative;
}

.fp-comms-inbox-compact .fp-comms-item {
  grid-template-columns: 40px minmax(0, 1fr) auto;
  gap: 8px;
  min-height: 62px;
  border-radius: 15px;
  padding: 8px;
  box-shadow: 0 4px 13px rgba(15, 23, 42, .035);
}

.fp-comms-item-unread {
  border-color: rgba(0, 113, 227, .24);
  background: linear-gradient(90deg, rgba(0, 113, 227, .07), rgba(255, 255, 255, .96) 42%);
}

.fp-comms-avatar {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 17px;
  color: #075ec5;
  background: rgba(0, 113, 227, .09);
  font-size: 13px;
  font-weight: 950;
  overflow: hidden;
}

.fp-comms-inbox-compact .fp-comms-avatar {
  width: 40px;
  height: 40px;
  border-radius: 14px;
  font-size: 12px;
}

.fp-comms-avatar.has-photo {
  background: #dbe7f5;
}

.fp-comms-avatar img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.fp-comms-tone-violet .fp-comms-avatar,
.fp-comms-tone-violet.fp-comms-avatar {
  color: #5b21b6;
  background: rgba(124, 58, 237, .10);
}

.fp-comms-tone-orange .fp-comms-avatar,
.fp-comms-tone-orange.fp-comms-avatar {
  color: #b54708;
  background: rgba(245, 158, 11, .14);
}

.fp-comms-tone-green .fp-comms-avatar,
.fp-comms-tone-green.fp-comms-avatar {
  color: #047857;
  background: rgba(16, 185, 129, .12);
}

.fp-comms-tone-cyan .fp-comms-avatar,
.fp-comms-tone-cyan.fp-comms-avatar {
  color: #036672;
  background: rgba(6, 182, 212, .12);
}

.fp-comms-tone-gray .fp-comms-avatar,
.fp-comms-tone-gray.fp-comms-avatar {
  color: #475467;
  background: rgba(102, 112, 133, .11);
}

.fp-comms-copy {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.fp-comms-inbox-compact .fp-comms-copy {
  gap: 2px;
}

.fp-comms-line,
.fp-comms-item-meta {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
}

.fp-comms-line b,
.fp-comms-copy small,
.fp-comms-item-meta em {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fp-comms-line b {
  min-width: 0;
  color: #101828;
  font-size: 14px;
  font-weight: 950;
}

.fp-comms-inbox-compact .fp-comms-line b {
  font-size: 13px;
}

.fp-comms-line time {
  flex: 0 0 auto;
  color: #98a2b3;
  font-size: 10px;
  font-weight: 800;
}

.fp-comms-inbox-compact .fp-comms-line time {
  font-size: 9px;
}

.fp-comms-copy small {
  color: #475467;
  font-size: 12px;
  font-weight: 790;
}

.fp-comms-inbox-compact .fp-comms-copy small {
  font-size: 11px;
}

.fp-comms-type-badge {
  flex: 0 0 auto;
  border-radius: 999px;
  padding: 3px 7px;
  color: #075ec5;
  background: rgba(0, 113, 227, .08);
  font-size: 9px;
  font-weight: 950;
}

.fp-comms-inbox-compact .fp-comms-type-badge {
  padding: 2px 6px;
  font-size: 8px;
}

.fp-comms-item-meta em {
  min-width: 0;
  color: #98a2b3;
  font-size: 10px;
  font-style: normal;
  font-weight: 820;
}

.fp-comms-item > i {
  position: absolute;
  top: 9px;
  right: 9px;
  min-width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  border: 2px solid #fff;
  border-radius: 999px;
  color: #fff;
  background: var(--blue);
  font-size: 8px;
  font-style: normal;
  font-weight: 950;
}

.fp-comms-action {
  align-self: end;
  min-height: 30px;
  border: 1px solid rgba(0, 113, 227, .12);
  border-radius: 999px;
  padding: 0 10px;
  color: var(--blue);
  background: rgba(0, 113, 227, .06);
  font: inherit;
  font-size: 10px;
  font-weight: 950;
  white-space: nowrap;
}

.fp-comms-inbox-compact .fp-comms-action {
  min-height: 27px;
  padding: 0 8px;
  font-size: 9px;
}

.fp-comms-action-stack {
  display: grid;
  gap: 5px;
  justify-items: end;
}

.fp-comms-inbox-compact .fp-comms-action-stack {
  gap: 4px;
}

.fp-comms-action.secondary {
  color: #475467;
  border-color: rgba(15, 23, 42, .08);
  background: rgba(248, 250, 252, .9);
}

.fp-comms-empty {
  display: grid;
  align-content: center;
  min-height: 112px;
  border: 1px dashed rgba(0, 113, 227, .18);
  border-radius: 18px;
  padding: 18px;
  color: #667085;
  background: rgba(255, 255, 255, .72);
  font-size: 13px;
  font-weight: 820;
}

.fp-comms-detail {
  grid-template-rows: auto auto auto minmax(0, 1fr) auto;
  padding-bottom: calc(env(safe-area-inset-bottom) + 12px);
}

.fp-comms-detail-card {
  display: grid;
  gap: 4px;
  border: 1px solid rgba(15, 23, 42, .06);
  border-radius: 18px;
  padding: 12px;
  background: #fff;
  box-shadow: 0 6px 18px rgba(15, 23, 42, .04);
}

.fp-comms-detail-card b {
  color: #101828;
  font-size: 14px;
  font-weight: 950;
}

.fp-comms-detail-card small {
  color: #667085;
  font-size: 11px;
  font-weight: 790;
}

.fp-comms-vehicle-context {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  border: 1px solid rgba(0, 113, 227, .10);
  border-radius: 18px;
  padding: 10px;
  background: linear-gradient(135deg, rgba(255, 255, 255, .96), rgba(235, 246, 255, .84));
  box-shadow: 0 8px 22px rgba(0, 113, 227, .055);
}

.fp-comms-vehicle-avatar {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 17px;
  color: #075ec5;
  background: rgba(0, 113, 227, .09);
  font-size: 12px;
  font-weight: 950;
}

.fp-comms-vehicle-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.fp-comms-vehicle-context div {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.fp-comms-vehicle-context b,
.fp-comms-vehicle-context small,
.fp-comms-vehicle-context em {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fp-comms-vehicle-context b {
  color: #101828;
  font-size: 14px;
  font-weight: 950;
}

.fp-comms-vehicle-context small {
  color: #475467;
  font-size: 12px;
  font-weight: 840;
}

.fp-comms-vehicle-context em {
  color: #667085;
  font-size: 10px;
  font-style: normal;
  font-weight: 850;
}

.fp-comms-vehicle-context nav {
  grid-column: 1 / -1;
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding-top: 2px;
  scrollbar-width: none;
}

.fp-comms-vehicle-context nav::-webkit-scrollbar {
  display: none;
}

.fp-comms-vehicle-context nav button {
  min-height: 32px;
  border: 1px solid rgba(0, 113, 227, .13);
  border-radius: 999px;
  padding: 0 11px;
  color: var(--blue);
  background: rgba(255, 255, 255, .88);
  font: inherit;
  font-size: 10px;
  font-weight: 950;
  white-space: nowrap;
}

.fp-comms-detail-actions {
  display: flex;
  gap: 7px;
  overflow-x: auto;
  padding: 0 8px 2px 0;
}

.fp-comms-detail-actions button {
  min-height: 34px;
  border: 1px solid rgba(0, 113, 227, .14);
  border-radius: 999px;
  padding: 0 12px;
  color: var(--blue);
  background: #fff;
  font: inherit;
  font-size: 11px;
  font-weight: 950;
  white-space: nowrap;
}

.fp-comms-thread {
  display: grid;
  align-content: end;
  gap: 8px;
  min-height: 260px;
  padding: 8px 0;
}

.fp-comms-message {
  max-width: 82%;
  display: grid;
  gap: 3px;
  justify-self: start;
  border-radius: 18px 18px 18px 6px;
  padding: 9px 11px;
  color: #101828;
  background: #fff;
  box-shadow: 0 4px 14px rgba(15, 23, 42, .045);
}

.fp-comms-message.has-attachment {
  max-width: min(88%, 360px);
  padding: 7px;
}

.fp-comms-message.mine {
  justify-self: end;
  border-radius: 18px 18px 6px 18px;
  color: #fff;
  background: var(--blue);
}

.fp-comms-message small,
.fp-comms-message time {
  color: rgba(102, 112, 133, .82);
  font-size: 10px;
  font-weight: 830;
}

.fp-comms-message.mine small,
.fp-comms-message.mine time {
  color: rgba(255, 255, 255, .72);
}

.fp-comms-message p {
  margin: 0;
  font-size: 13px;
  line-height: 1.35;
  font-weight: 790;
}

.fp-comms-attachment {
  display: grid;
  gap: 6px;
  min-width: 210px;
  border-radius: 15px;
  padding: 9px;
  color: #101828;
  background: rgba(255, 255, 255, .96);
}

.fp-comms-message.mine .fp-comms-attachment {
  color: #101828;
}

.fp-comms-attachment b {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
  font-weight: 950;
}

.fp-comms-attachment span,
.fp-comms-attachment small {
  color: #667085;
  font-size: 11px;
  font-weight: 830;
}

.fp-comms-attachment button {
  min-height: 32px;
  border: 1px solid rgba(0, 113, 227, .12);
  border-radius: 999px;
  padding: 0 10px;
  color: var(--blue);
  background: rgba(0, 113, 227, .06);
  font: inherit;
  font-size: 10px;
  font-weight: 950;
}

.fp-comms-vehicle-card div {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.fp-comms-media-preview {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  aspect-ratio: 4 / 3;
  background: #eef3f8;
}

.fp-comms-media-preview img,
.fp-comms-media-preview video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.fp-comms-attachment-placeholder {
  height: 100%;
  display: grid;
  place-items: center;
  gap: 4px;
  color: #667085;
  font-size: 24px;
  font-weight: 950;
  text-align: center;
}

.fp-comms-attachment-placeholder small {
  max-width: 88%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #667085;
  font-size: 10px;
}

.fp-comms-compose {
  position: sticky;
  bottom: calc(env(safe-area-inset-bottom) + 4px);
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) 40px 40px;
  gap: 6px;
  align-items: center;
  border: 1px solid rgba(15, 23, 42, .08);
  border-radius: 20px;
  padding: 6px;
  background: rgba(255, 255, 255, .94);
  box-shadow: 0 10px 30px rgba(15, 23, 42, .10);
  backdrop-filter: blur(16px);
}

.fp-comms-compose input {
  min-width: 0;
  height: 40px;
  border: 0;
  outline: 0;
  border-radius: 999px;
  padding: 0 12px;
  color: #101828;
  background: #f2f6fb;
  font: inherit;
  font-size: 13px;
  font-weight: 800;
}

.fp-comms-compose button {
  width: 40px;
  height: 40px;
  min-height: 40px;
  border: 0;
  border-radius: 999px;
  color: #344054;
  background: #f2f6fb;
  font: inherit;
  font-size: 15px;
  font-weight: 950;
}

.comms-attach-sheet,
.comms-garage-picker-sheet {
  display: grid;
  gap: 12px;
}

.comms-attach-grid {
  display: grid;
  gap: 8px;
}

.comms-attach-grid button {
  min-height: 58px;
  display: grid;
  gap: 3px;
  justify-items: start;
  border: 1px solid rgba(15, 23, 42, .08);
  border-radius: 18px;
  padding: 11px 12px;
  color: #101828;
  background: #fff;
  font: inherit;
  text-align: left;
  box-shadow: 0 6px 18px rgba(15, 23, 42, .04);
}

.comms-attach-grid button b {
  font-size: 14px;
  font-weight: 950;
}

.comms-attach-grid button span {
  color: #667085;
  font-size: 11px;
  font-weight: 790;
}

.comms-garage-picker-tabs {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding-bottom: 2px;
  scrollbar-width: none;
}

.comms-garage-picker-tabs::-webkit-scrollbar {
  display: none;
}

.comms-garage-picker-tabs button {
  min-height: 34px;
  border: 1px solid rgba(15, 23, 42, .08);
  border-radius: 999px;
  padding: 0 11px;
  color: #344054;
  background: #fff;
  font: inherit;
  font-size: 11px;
  font-weight: 920;
  white-space: nowrap;
}

.comms-garage-picker-tabs button.active {
  border-color: var(--blue);
  color: #fff;
  background: var(--blue);
}

.comms-garage-picker-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
}

.comms-garage-picker-item {
  min-width: 0;
  display: grid;
  gap: 4px;
  border: 0;
  border-radius: 9px;
  padding: 0;
  color: #101828;
  background: transparent;
  font: inherit;
  text-align: left;
}

.comms-garage-picker-preview {
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  aspect-ratio: 1 / 1;
  background: #eef3f8;
}

.comms-garage-picker-preview img,
.comms-garage-picker-preview video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.comms-garage-picker-preview i {
  position: absolute;
  inset: auto 6px 6px auto;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  color: #fff;
  background: rgba(15, 23, 42, .58);
  font-size: 10px;
  font-style: normal;
  font-weight: 950;
}

.comms-garage-picker-placeholder {
  height: 100%;
  display: grid;
  place-items: center;
  gap: 4px;
  padding: 8px;
  color: #667085;
  text-align: center;
}

.comms-garage-picker-placeholder b {
  font-size: 20px;
  line-height: 1;
}

.comms-garage-picker-placeholder small,
.comms-garage-picker-item > b,
.comms-garage-picker-item > small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.comms-garage-picker-item > b {
  padding: 0 2px;
  color: #101828;
  font-size: 10px;
  font-weight: 900;
}

.comms-garage-picker-item > small {
  padding: 0 2px 2px;
  color: #667085;
  font-size: 9px;
  font-weight: 800;
}

.conversation-card {
  width: 100%;
  display: grid;
  grid-template-columns: 48px 1fr auto;
  grid-template-areas:
    "avatar plate unread"
    "avatar title unread"
    "avatar text unread"
    "avatar meta unread";
  gap: 3px 10px;
  align-items: center;
  min-height: 84px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 18px;
  color: var(--ink);
  background: color-mix(in srgb, var(--panel) 88%, #fff 12%);
  box-shadow: 0 10px 28px rgba(15, 23, 42, .08);
  text-align: left;
}

.conversation-card .conversation-avatar {
  grid-area: avatar;
}

.conversation-card .plate-badge {
  grid-area: plate;
  width: fit-content;
}

.conversation-card b {
  grid-area: title;
}

.conversation-card small {
  grid-area: text;
}

.conversation-card em {
  grid-area: meta;
}

.conversation-card i {
  grid-area: unread;
  min-width: 26px;
  height: 26px;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  color: #fff;
  background: var(--blue);
  font-style: normal;
  font-size: 12px;
  font-weight: 900;
}

.conversation-card.mock {
  opacity: .72;
}

.conversation-card.unread {
  border-color: color-mix(in srgb, var(--blue) 34%, var(--line));
  background: color-mix(in srgb, var(--blue) 5%, white);
}

.conversation-card.unread small {
  color: var(--ink);
  font-weight: 900;
}

.conversation-card.closed,
.conversation-card.blocked,
.conversation-card.archived {
  opacity: .7;
}

.conversation-avatar {
  width: 40px;
  height: 40px;
  display: inline-grid;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--blue) 18%, var(--line));
  border-radius: 999px;
  background: color-mix(in srgb, var(--blue) 8%, white);
  font-size: 16px;
  font-weight: 900;
}

.message-center-item.alert .conversation-avatar {
  color: #9a4f00;
  border-color: color-mix(in srgb, #ff9f0a 28%, var(--line));
  background: color-mix(in srgb, #ff9f0a 13%, #fff 87%);
}

.message-center-item.contact .conversation-avatar {
  color: #5b21b6;
  border-color: color-mix(in srgb, #7c3aed 24%, var(--line));
  background: color-mix(in srgb, #7c3aed 10%, #fff 90%);
}

.message-center-item.request .conversation-avatar {
  color: #5b21b6;
  border-color: color-mix(in srgb, #7c3aed 24%, var(--line));
  background: color-mix(in srgb, #7c3aed 10%, #fff 90%);
}

.message-center-item.group .conversation-avatar,
.message-center-item.group_create .conversation-avatar {
  color: #047857;
  border-color: color-mix(in srgb, #10b981 26%, var(--line));
  background: color-mix(in srgb, #10b981 10%, #fff 90%);
  font-size: 12px;
}

.message-center-item.group .conversation-avatar.has-photo,
.group-conversation-view .conversation-head .conversation-avatar.has-photo {
  color: transparent;
  border-color: #fff;
  background: #fff;
  font-size: 0;
  box-shadow: 0 7px 18px rgba(15, 23, 42, .11);
}

.message-center-item.roadtalk .conversation-avatar {
  color: #047857;
  border-color: color-mix(in srgb, #34c759 30%, var(--line));
  background: color-mix(in srgb, #34c759 13%, #fff 87%);
  font-size: 14px;
}

.message-center-item.system .conversation-avatar {
  color: #036672;
  border-color: color-mix(in srgb, #21c7a8 30%, var(--line));
  background: color-mix(in srgb, #21c7a8 12%, #fff 88%);
  font-size: 13px;
}

.comms-detail-sheet {
  display: grid;
  gap: 12px;
}

.comms-detail-card {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  border: 1px solid color-mix(in srgb, var(--blue) 14%, var(--line));
  border-radius: 18px;
  padding: 11px;
  background: color-mix(in srgb, var(--blue) 5%, #fff 95%);
}

.comms-detail-card > span {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  color: #fff;
  background: linear-gradient(135deg, var(--blue), #21c7a8);
  font-weight: 950;
}

.comms-detail-card div {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.comms-detail-card b,
.comms-detail-card small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.comms-detail-card b {
  color: var(--ink);
  font-size: 15px;
  font-weight: 950;
}

.comms-detail-card small {
  color: rgba(15, 23, 42, .62);
  font-size: 12px;
  font-weight: 820;
}

.conversation-card small,
.conversation-card em {
  color: rgba(15, 23, 42, .62);
  font-size: 12px;
  font-style: normal;
}

.conversation-view {
  display: grid;
  gap: 12px;
  min-height: calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 90px);
  padding-bottom: calc(env(safe-area-inset-bottom) + 98px);
}

.conversation-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 6px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background:
    radial-gradient(circle at 90% 0, color-mix(in srgb, var(--blue) 8%, transparent), transparent 34%),
    rgba(255, 255, 255, .84);
}

.conversation-head-copy {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.conversation-head-copy b {
  overflow: hidden;
  color: var(--ink);
  font-size: 18px;
  font-weight: 950;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.conversation-head-actions,
.conversation-presets {
  grid-column: 1 / -1;
  display: flex;
  gap: 8px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.conversation-head-actions::-webkit-scrollbar,
.conversation-presets::-webkit-scrollbar {
  display: none;
}

.conversation-head-actions button:disabled {
  opacity: .48;
}

.conversation-head small {
  color: rgba(15, 23, 42, .58);
}

.group-conversation-view .conversation-head {
  border-color: color-mix(in srgb, #10b981 18%, var(--line));
  background:
    radial-gradient(circle at 88% 0, color-mix(in srgb, #10b981 12%, transparent), transparent 36%),
    rgba(255, 255, 255, .86);
}

.group-conversation-view .conversation-head .conversation-avatar {
  color: #047857;
  border-color: color-mix(in srgb, #10b981 28%, var(--line));
  background: color-mix(in srgb, #10b981 10%, #fff 90%);
  font-size: 13px;
}

.private-conversation-view .conversation-head {
  border-color: color-mix(in srgb, var(--blue) 18%, var(--line));
}

.group-meta-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.group-meta-grid article {
  display: grid;
  gap: 2px;
  min-width: 0;
  padding: 10px;
  border: 1px solid rgba(15, 23, 42, .07);
  border-radius: 14px;
  background: rgba(255, 255, 255, .68);
}

.group-meta-grid b {
  overflow: hidden;
  color: var(--ink);
  font-size: 13px;
  font-weight: 950;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.group-meta-grid span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
}

.group-members-strip {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.group-members-strip::-webkit-scrollbar {
  display: none;
}

.group-members-strip span {
  min-width: 112px;
  display: grid;
  gap: 2px;
  padding: 9px 10px;
  border: 1px solid color-mix(in srgb, var(--blue) 12%, var(--line));
  border-radius: 999px;
  background: color-mix(in srgb, var(--blue) 6%, #fff 94%);
}

.group-members-strip b,
.group-members-strip small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.group-members-strip b {
  color: var(--ink);
  font-size: 12px;
  font-weight: 950;
}

.group-members-strip small {
  color: var(--muted);
  font-size: 10px;
  font-weight: 850;
}

.conversation-message.system {
  align-self: center;
  max-width: 92%;
  color: rgba(15, 23, 42, .62);
  background: rgba(15, 23, 42, .045);
  border-style: dashed;
  text-align: center;
}

.conversation-messages {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: min(56dvh, 520px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 4px 2px;
}

.conversation-message {
  max-width: 82%;
  display: grid;
  gap: 4px;
  padding: 10px 12px;
  border: 1px solid rgba(15, 23, 42, .08);
  border-radius: 16px;
  background: rgba(255, 255, 255, .9);
}

.conversation-message.mine {
  align-self: flex-end;
  border-color: color-mix(in srgb, var(--blue) 42%, white);
  color: #fff;
  background: var(--blue);
}

.conversation-message.theirs {
  align-self: flex-start;
}

.conversation-message span {
  font-size: 11px;
  opacity: .72;
}

.message-ai-draft {
  display: grid;
  gap: 6px;
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--blue) 20%, var(--line));
  border-radius: 18px;
  background: color-mix(in srgb, var(--blue) 7%, white);
}

.message-ai-draft span {
  color: rgba(15, 23, 42, .72);
  font-weight: 800;
}

.conversation-composer {
  display: grid;
  grid-template-columns: auto auto 1fr auto;
  gap: 8px;
  position: sticky;
  bottom: calc(env(safe-area-inset-bottom) + 10px);
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(255, 255, 255, .92);
}

.conversation-composer input,
.conversation-composer button {
  min-height: 44px;
  border-radius: 14px;
}

.conversation-composer input {
  min-width: 0;
  border: 1px solid var(--line);
  padding: 0 12px;
  font: inherit;
  font-weight: 800;
}

.conversation-composer button {
  border: 0;
  padding: 0 14px;
  color: #fff;
  background: var(--blue);
  font-weight: 900;
}

.conversation-composer button[data-conversation-micai] {
  width: 44px;
  padding: 0;
  color: var(--ink);
  background: rgba(255, 255, 255, .82);
  border: 1px solid var(--line);
}

.conversation-composer button[data-share-gallery] {
  width: 44px;
  padding: 0;
  color: var(--blue);
  background: color-mix(in srgb, var(--blue) 8%, #fff 92%);
  border: 1px solid color-mix(in srgb, var(--blue) 24%, var(--line));
}

.group-chat-view {
  grid-template-rows: auto auto auto minmax(0, 1fr) auto;
  gap: 8px;
  min-height: calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 44px);
  padding-bottom: calc(env(safe-area-inset-bottom) + 14px);
}

.group-chat-header {
  grid-template-columns: 44px 42px minmax(0, 1fr) auto;
}

.group-context-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
  border: 1px solid rgba(16, 185, 129, .14);
  border-radius: 18px;
  padding: 11px;
  background:
    radial-gradient(circle at 92% 0, rgba(16, 185, 129, .13), transparent 35%),
    rgba(255, 255, 255, .88);
  box-shadow: 0 8px 20px rgba(15, 23, 42, .045);
}

.group-context-card div {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.group-context-card span {
  width: fit-content;
  border-radius: 999px;
  padding: 3px 8px;
  color: #047857;
  background: rgba(16, 185, 129, .10);
  font-size: 10px;
  font-weight: 950;
}

.group-context-card b,
.group-context-card small {
  overflow: hidden;
  text-overflow: ellipsis;
}

.group-context-card b {
  color: #101828;
  font-size: 13px;
  line-height: 1.22;
  font-weight: 900;
}

.group-context-card small {
  color: #667085;
  font-size: 11px;
  font-weight: 790;
}

.group-context-card nav {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.group-context-card nav::-webkit-scrollbar {
  display: none;
}

.group-context-card button {
  min-height: 32px;
  border: 1px solid rgba(16, 185, 129, .16);
  border-radius: 999px;
  padding: 0 10px;
  color: #047857;
  background: rgba(255, 255, 255, .88);
  font: inherit;
  font-size: 10px;
  font-weight: 950;
  white-space: nowrap;
}

.group-chat-messages {
  max-height: none;
  min-height: 220px;
  padding: 5px 2px 8px;
}

.conversation-message.group-message {
  max-width: min(84%, 360px);
}

.conversation-message.group-message.has-attachment {
  max-width: min(90%, 390px);
  padding: 7px;
}

.conversation-message.group-message p {
  margin: 0;
  font-size: 13px;
  line-height: 1.35;
  font-weight: 790;
}

.conversation-message.group-message small,
.conversation-message.group-message time {
  color: rgba(102, 112, 133, .86);
  font-size: 10px;
  font-weight: 830;
}

.conversation-message.group-message.mine small,
.conversation-message.group-message.mine time {
  color: rgba(255, 255, 255, .72);
}

.conversation-message.group-message.system {
  justify-self: center;
  align-self: center;
  max-width: 92%;
  color: #667085;
  background: rgba(15, 23, 42, .045);
  border-style: dashed;
  text-align: center;
}

.group-reactions {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}

.group-reactions span {
  border-radius: 999px;
  padding: 2px 7px;
  color: #344054;
  background: rgba(255, 255, 255, .78);
  font-size: 10px;
  font-weight: 850;
}

.group-composer {
  grid-template-columns: 40px minmax(0, 1fr) 40px 40px 40px 40px;
  gap: 5px;
  bottom: calc(env(safe-area-inset-bottom) + 7px);
  border-radius: 20px;
  padding: 6px;
  backdrop-filter: blur(16px);
}

.group-composer input,
.group-composer button {
  min-height: 40px;
  height: 40px;
  border-radius: 14px;
}

.group-composer button {
  width: 40px;
  padding: 0;
}

.group-composer button:not([type="submit"]) {
  color: #344054;
  background: #f2f6fb;
  border: 1px solid rgba(15, 23, 42, .06);
}

body.fp-comms-detail-open #messages-view {
  padding: calc(env(safe-area-inset-top) + 6px) 10px 0;
  overflow: hidden;
}

body.fp-comms-detail-open .fp-comms-thread-view {
  display: grid;
  height: calc(100dvh - env(safe-area-inset-top) - 6px);
  min-height: 0;
  overflow: hidden;
  padding-bottom: 0;
}

body.fp-comms-detail-open .private-conversation-view,
body.fp-comms-detail-open .group-chat-view {
  gap: 7px;
}

body.fp-comms-detail-open .private-conversation-view {
  grid-template-rows: auto minmax(0, 1fr) auto auto auto;
}

body.fp-comms-detail-open .group-chat-view {
  grid-template-rows: auto auto auto minmax(0, 1fr) auto auto;
}

body.fp-comms-detail-open .fp-comms-detail.fp-comms-thread-view:not(.group-chat-view) {
  grid-template-rows: auto auto auto minmax(0, 1fr) auto;
}

body.fp-comms-detail-open .fp-comms-thread-header {
  margin-top: 0;
}

body.fp-comms-detail-open .group-chat-header {
  position: relative;
  top: auto;
  min-height: 50px;
  margin: 0;
  border: 0;
  border-bottom: 1px solid rgba(15, 23, 42, .06);
  border-radius: 0;
  padding: 0 0 6px;
  background: rgba(245, 248, 252, .84);
  box-shadow: none;
}

body.fp-comms-detail-open .group-chat-header > button,
body.fp-comms-detail-open .group-chat-header .fp-comms-avatar {
  min-height: 38px;
  width: 38px;
  height: 38px;
  border-radius: 14px;
}

body.fp-comms-detail-open .group-chat-header > button:first-child {
  font-size: 24px;
}

body.fp-comms-detail-open .group-chat-header b {
  font-size: 16px;
}

body.fp-comms-detail-open .group-chat-header span {
  font-size: 11px;
}

body.fp-comms-detail-open .group-context-card {
  gap: 6px;
  border-radius: 15px;
  padding: 8px 9px;
  box-shadow: none;
}

body.fp-comms-detail-open .group-context-card span {
  padding: 2px 7px;
  font-size: 9px;
}

body.fp-comms-detail-open .group-context-card b {
  font-size: 12px;
  white-space: nowrap;
}

body.fp-comms-detail-open .group-context-card small {
  font-size: 10px;
  white-space: nowrap;
}

body.fp-comms-detail-open .group-context-card button {
  min-height: 30px;
  padding: 0 9px;
}

body.fp-comms-detail-open .group-members-strip span {
  min-width: 102px;
  padding: 7px 9px;
}

body.fp-comms-detail-open .fp-comms-thread-body,
body.fp-comms-detail-open .conversation-messages {
  min-height: 0;
  max-height: none;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding-bottom: calc(env(safe-area-inset-bottom) + 12px);
}

body.fp-comms-detail-open .conversation-composer,
body.fp-comms-detail-open .fp-comms-compose {
  position: relative;
  bottom: auto;
  margin: 0 0 calc(env(safe-area-inset-bottom) + 8px);
  flex: 0 0 auto;
  box-shadow: 0 10px 28px rgba(15, 23, 42, .10);
}

body.fp-comms-detail-open .fp-comms-composer {
  z-index: 8;
}

body.fp-comms-detail-open .group-composer {
  grid-template-columns: 40px minmax(0, 1fr) 40px 40px 40px 40px;
}

body.fp-comms-detail-open .conversation-presets {
  min-height: 36px;
  padding-bottom: 2px;
}

body.fp-comms-detail-open .message-ai-draft {
  padding: 9px;
}

body.fp-comms-detail-open .group-chat-header {
  grid-template-columns: 38px 38px minmax(0, 1fr) auto;
  min-height: 46px;
  margin: -3px -1px 0;
  padding: 2px 2px 5px;
  background: linear-gradient(180deg, rgba(245, 248, 252, .94), rgba(245, 248, 252, .64) 72%, rgba(245, 248, 252, 0));
  backdrop-filter: blur(14px);
}

body.fp-comms-detail-open .group-chat-header > button,
body.fp-comms-detail-open .group-chat-header .fp-comms-avatar {
  min-height: 36px;
  width: 36px;
  height: 36px;
  border-radius: 13px;
}

body.fp-comms-detail-open .group-chat-header > button:last-child {
  width: auto;
  min-width: 42px;
  padding: 0 10px;
  color: #344054;
  background: rgba(255, 255, 255, .72);
  border: 1px solid rgba(15, 23, 42, .08);
  font-size: 11px;
  font-weight: 900;
}

body.fp-comms-detail-open .group-chat-header b {
  font-size: 15px;
  line-height: 1.05;
}

body.fp-comms-detail-open .group-chat-header span {
  display: block;
  overflow: hidden;
  max-width: 100%;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 10.5px;
  line-height: 1.2;
}

body.fp-comms-detail-open .group-context-card {
  grid-template-columns: minmax(0, 1fr);
  gap: 5px;
  border-color: rgba(16, 185, 129, .10);
  border-radius: 14px;
  padding: 7px 8px;
  background:
    radial-gradient(circle at 96% -20%, rgba(16, 185, 129, .10), transparent 30%),
    rgba(255, 255, 255, .72);
}

body.fp-comms-detail-open .group-context-card span {
  padding: 2px 6px;
  font-size: 8.5px;
}

body.fp-comms-detail-open .group-context-card b {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  white-space: normal;
  font-size: 11.5px;
  line-height: 1.18;
}

body.fp-comms-detail-open .group-context-card small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 9.5px;
}

body.fp-comms-detail-open .group-context-card nav {
  gap: 4px;
}

body.fp-comms-detail-open .group-context-card button {
  min-height: 28px;
  padding: 0 8px;
  font-size: 9.5px;
}

body.fp-comms-detail-open .group-members-strip {
  gap: 5px;
}

body.fp-comms-detail-open .group-members-strip span {
  min-width: 88px;
  padding: 6px 8px;
  border-radius: 13px;
}

body.fp-comms-detail-open .conversation-message.group-message.has-attachment {
  max-width: min(88%, 340px);
}

body.fp-comms-detail-open .conversation-message.group-message .fp-comms-attachment {
  min-width: min(220px, 72vw);
  padding: 7px;
  border-radius: 13px;
}

body.fp-comms-detail-open .conversation-message.group-message .fp-comms-media-preview {
  min-height: 86px;
  max-height: 128px;
  aspect-ratio: 16 / 9;
  border-radius: 10px;
}

body.fp-comms-detail-open .conversation-message.group-message .fp-comms-attachment-placeholder {
  min-height: 86px;
  padding: 8px;
  font-size: 19px;
}

.fp-comms-attachment-placeholder em {
  max-width: 92%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #98a2b3;
  font-style: normal;
  font-size: 9px;
  font-weight: 850;
}

body.fp-comms-detail-open .group-composer {
  grid-template-columns: 38px minmax(0, 1fr) 38px 38px 38px 38px;
  gap: 4px;
  border-radius: 18px;
  padding: 5px;
}

body.fp-comms-detail-open .group-composer input,
body.fp-comms-detail-open .group-composer button {
  min-height: 38px;
  height: 38px;
  border-radius: 13px;
}

body.fp-comms-detail-open .group-composer button {
  width: 38px;
}

@media (max-width: 820px) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
  textarea,
  select {
    font-size: 16px !important;
  }

  input::placeholder,
  textarea::placeholder {
    font-size: 1em;
    transform: none;
  }

  .fp-comms-search-compact {
    grid-template-columns: minmax(0, 1fr) 40px;
    gap: 6px;
  }

  .fp-comms-search-compact label {
    min-height: 42px;
  }

  .fp-comms-search-compact button {
    width: 40px;
    height: 40px;
    min-height: 40px;
  }

  .conversation-composer input,
  .group-composer input,
  .fp-comms-compose input,
  .roadtalk-form input,
  .roadtalk-broadcast-form textarea,
  .command-plate-form input,
  .route-planner-form input,
  .route-sheet-field input,
  .add-studio-photo-form textarea,
  .garage-media-upload-form input,
  .garage-media-upload-form textarea {
    font-size: 16px !important;
  }
}

.group-info-sheet,
.group-attach-sheet {
  display: grid;
  gap: 12px;
}

.group-info-card {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  border: 1px solid rgba(16, 185, 129, .14);
  border-radius: 18px;
  padding: 11px;
  background: rgba(255, 255, 255, .9);
}

.group-info-card div,
.group-info-members {
  display: grid;
  min-width: 0;
  gap: 4px;
}

.group-info-card b,
.group-info-card span,
.group-info-members span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.group-info-card b {
  color: #101828;
  font-size: 14px;
  font-weight: 950;
}

.group-info-card span,
.group-info-members span {
  color: #667085;
  font-size: 12px;
  font-weight: 790;
}

.group-info-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.group-info-stats span {
  display: grid;
  gap: 2px;
  border: 1px solid rgba(15, 23, 42, .07);
  border-radius: 14px;
  padding: 10px;
  background: rgba(255, 255, 255, .82);
}

.group-info-stats b {
  color: #101828;
  font-size: 15px;
  font-weight: 950;
}

.group-info-stats small {
  color: #667085;
  font-size: 10px;
  font-weight: 850;
}

.group-profile-sheet {
  display: grid;
  gap: 12px;
  color: #101828;
}

.group-profile-hero {
  position: relative;
  display: grid;
  gap: 11px;
  min-height: 190px;
  overflow: hidden;
  border: 1px solid rgba(15, 23, 42, .06);
  border-radius: 24px;
  padding: 18px;
  background:
    radial-gradient(circle at 16% 18%, rgba(0, 113, 227, .22), transparent 34%),
    linear-gradient(135deg, #07111f, #123a6f 52%, #0b7fb6);
  color: #fff;
  box-shadow: 0 20px 40px rgba(15, 23, 42, .18);
}

.group-profile-cover {
  position: absolute;
  inset: auto -20% -44% 30%;
  height: 170px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .12);
  filter: blur(4px);
  pointer-events: none;
}

.group-profile-close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 999px;
  color: #fff;
  background: rgba(255, 255, 255, .12);
  font-size: 22px;
  line-height: 1;
}

.group-profile-identity {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr);
  gap: 13px;
  align-items: center;
  padding-right: 42px;
}

.group-profile-avatar {
  width: 74px;
  height: 74px;
  display: grid;
  place-items: center;
  border: 3px solid rgba(255, 255, 255, .72);
  border-radius: 26px;
  color: #fff;
  background: rgba(255, 255, 255, .14);
  box-shadow: 0 12px 30px rgba(0, 0, 0, .18);
  font-size: 20px;
  font-weight: 950;
}

.group-profile-identity div {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.group-profile-identity h2 {
  margin: 0;
  overflow: hidden;
  color: #fff;
  font-size: 28px;
  font-weight: 950;
  line-height: 1.02;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.group-profile-identity span,
.group-profile-hero p {
  color: rgba(255, 255, 255, .82);
  font-size: 12px;
  font-weight: 820;
}

.group-profile-hero p {
  position: relative;
  z-index: 1;
  max-width: 36rem;
  margin: 0;
  line-height: 1.45;
}

.group-profile-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
}

.group-profile-stats span,
.group-profile-game,
.group-profile-media article,
.group-profile-activity article {
  border: 1px solid rgba(15, 23, 42, .06);
  background: rgba(255, 255, 255, .9);
  box-shadow: 0 8px 22px rgba(15, 23, 42, .045);
}

.group-profile-stats span {
  display: grid;
  gap: 2px;
  border-radius: 16px;
  padding: 10px 8px;
  text-align: center;
}

.group-profile-stats b {
  color: #101828;
  font-size: 16px;
  font-weight: 950;
}

.group-profile-stats small {
  overflow: hidden;
  color: #667085;
  font-size: 10px;
  font-weight: 850;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.group-profile-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.group-profile-actions button {
  min-height: 42px;
  border: 1px solid rgba(0, 113, 227, .12);
  border-radius: 999px;
  padding: 0 12px;
  color: var(--blue);
  background: rgba(0, 113, 227, .07);
  font-size: 12px;
  font-weight: 900;
}

.group-profile-actions button:disabled {
  color: #667085;
  background: #f2f4f7;
}

.group-profile-game {
  display: grid;
  gap: 10px;
  border-radius: 18px;
  padding: 12px;
}

.group-profile-game div:first-child {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.group-profile-game span,
.group-profile-section-head span {
  color: #667085;
  font-size: 11px;
  font-weight: 820;
}

.group-profile-game b {
  color: #101828;
  font-size: 15px;
  font-weight: 950;
}

.group-profile-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.group-profile-badges em {
  border-radius: 999px;
  padding: 5px 8px;
  color: #9f1239;
  background: rgba(244, 63, 94, .09);
  font-size: 10px;
  font-style: normal;
  font-weight: 900;
}

.group-profile-media,
.group-profile-activity {
  display: grid;
  gap: 9px;
}

.group-profile-section-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 12px;
}

.group-profile-section-head div {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.group-profile-section-head b {
  color: #101828;
  font-size: 14px;
  font-weight: 950;
}

.group-profile-section-head button {
  flex: 0 0 auto;
  min-height: 34px;
  border: 1px solid rgba(15, 23, 42, .08);
  border-radius: 999px;
  padding: 0 10px;
  color: #344054;
  background: #fff;
  font-size: 11px;
  font-weight: 900;
}

.group-profile-media-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.group-profile-media article {
  display: grid;
  gap: 8px;
  border-radius: 18px;
  padding: 10px;
}

.group-profile-media article > div:first-child {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.group-profile-media article b,
.group-profile-media article strong {
  color: #101828;
  font-size: 13px;
  font-weight: 950;
}

.group-profile-media article small {
  color: #667085;
  font-size: 10px;
  font-weight: 790;
  line-height: 1.35;
}

.group-profile-media-preview {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 3px;
}

.group-profile-media-preview span,
.group-profile-media-empty {
  display: grid;
  align-content: center;
  min-height: 54px;
  border-radius: 12px;
  padding: 7px;
  color: #075ec5;
  background: linear-gradient(135deg, rgba(0, 113, 227, .12), rgba(16, 185, 129, .08));
  font-size: 10px;
  font-weight: 900;
}

.group-profile-media-preview small {
  color: rgba(7, 94, 197, .72);
  font-size: 8px;
  font-weight: 900;
}

.group-profile-media-empty {
  color: #667085;
  background: #f2f4f7;
  font-size: 10px;
}

.group-profile-activity article {
  display: grid;
  grid-template-columns: minmax(0, 112px) minmax(0, 1fr) auto;
  gap: 9px;
  align-items: center;
  border-radius: 16px;
  padding: 9px 10px;
}

.group-profile-activity article b,
.group-profile-activity article span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.group-profile-activity article b {
  color: #101828;
  font-size: 12px;
  font-weight: 950;
}

.group-profile-activity article span,
.group-profile-activity article small {
  color: #667085;
  font-size: 11px;
  font-weight: 790;
}

.group-profile-activity article small {
  justify-self: end;
  white-space: nowrap;
}

.conversation-composer.mock {
  grid-template-columns: auto 1fr auto;
}

.share-gallery-sheet {
  display: grid;
  gap: 12px;
}

.group-form-shell {
  display: grid;
  gap: 14px;
  padding: 6px 4px 0;
  color: var(--ink);
}

.group-form-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 12px;
  padding: 6px 4px 2px;
}

.group-form-head .eyebrow {
  margin: 0 0 3px;
  color: var(--blue);
  font-size: 11px;
  font-weight: 950;
  letter-spacing: 0;
  text-transform: uppercase;
}

.group-form-head h2 {
  margin: 0;
  color: var(--ink);
  font-size: 24px;
  line-height: 1.05;
  font-weight: 950;
}

.group-form-head span {
  display: block;
  margin-top: 5px;
  color: rgba(15, 23, 42, .62);
  font-size: 13px;
  line-height: 1.3;
  font-weight: 760;
}

.group-form-head button {
  min-height: 38px;
  border: 1px solid rgba(15, 23, 42, .10);
  border-radius: 999px;
  padding: 0 12px;
  color: var(--ink);
  background: #f7f9fd;
  font-size: 13px;
  font-weight: 900;
}

.group-form {
  display: grid;
  gap: 12px;
}

.group-form label,
.group-choice {
  display: grid;
  gap: 7px;
  margin: 0;
  border: 0;
  padding: 0;
  color: rgba(15, 23, 42, .72);
  font-size: 12px;
  font-weight: 920;
}

.group-form label > span,
.group-choice legend {
  padding: 0 2px;
  color: rgba(15, 23, 42, .68);
  font-size: 12px;
  font-weight: 950;
}

.group-form input,
.group-form textarea {
  min-height: 50px;
  width: 100%;
  border: 1px solid rgba(15, 23, 42, .12);
  border-radius: 15px;
  padding: 0 13px;
  color: var(--ink);
  background: #f8fbff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .88);
  font: inherit;
  font-size: 15px;
  font-weight: 850;
}

.group-form textarea {
  min-height: 78px;
  padding-top: 12px;
  resize: vertical;
}

.group-form input:focus,
.group-form textarea:focus {
  outline: 2px solid color-mix(in srgb, var(--blue) 24%, transparent);
  border-color: color-mix(in srgb, var(--blue) 52%, rgba(15, 23, 42, .12));
  background: #fff;
}

.group-form label.has-error input {
  border-color: rgba(255, 59, 48, .62);
  background: #fff8f7;
}

.group-form label small {
  color: #c8271f;
  font-size: 12px;
  font-weight: 850;
}

.group-choice-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.group-choice-row button {
  min-height: 40px;
  border: 1px solid rgba(15, 23, 42, .10);
  border-radius: 999px;
  padding: 0 13px;
  color: rgba(15, 23, 42, .72);
  background: #f7f9fd;
  font-size: 13px;
  font-weight: 900;
}

.group-choice-row button.active {
  color: #fff;
  border-color: color-mix(in srgb, var(--blue) 72%, #fff);
  background: var(--blue);
  box-shadow: 0 8px 18px color-mix(in srgb, var(--blue) 20%, transparent);
}

.group-form .group-form-actions {
  position: sticky;
  bottom: 0;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 9px;
  margin-top: 2px;
  padding: 10px 0 calc(env(safe-area-inset-bottom) + 2px);
  background: linear-gradient(180deg, rgba(255,255,255,.82), #fff 34%);
}

.group-form .group-form-actions button {
  min-height: 50px;
}

.group-form .group-form-actions button[type="submit"] {
  border: 0;
  color: #fff;
  background: var(--blue);
  box-shadow: 0 12px 24px color-mix(in srgb, var(--blue) 24%, transparent);
}

.group-form .group-form-actions button[data-close-sheet] {
  min-width: 92px;
  color: var(--ink);
  background: #f3f6fb;
}

.group-settings-shell {
  gap: 10px;
}

.group-settings-section {
  display: grid;
  gap: 9px;
  border: 1px solid color-mix(in srgb, var(--blue) 10%, var(--line));
  border-radius: 15px;
  padding: 10px;
  background: rgba(255, 255, 255, .72);
}

.group-settings-section > b {
  color: var(--ink);
  font-size: 13px;
  font-weight: 950;
}

.group-settings-section > button {
  min-height: 38px;
  justify-self: start;
  border: 1px solid color-mix(in srgb, var(--blue) 24%, var(--line));
  border-radius: 999px;
  padding: 0 12px;
  color: var(--blue);
  background: color-mix(in srgb, var(--blue) 7%, #fff 93%);
  font-size: 12px;
  font-weight: 950;
}

.group-location-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.public-group-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 11px;
  align-items: center;
  border: 1px solid color-mix(in srgb, #10b981 18%, var(--line));
  border-radius: 17px;
  padding: 12px;
  background:
    radial-gradient(circle at 90% 0, color-mix(in srgb, #10b981 12%, transparent), transparent 36%),
    rgba(255, 255, 255, .86);
}

.public-group-card div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.public-group-card b,
.public-group-card span,
.public-group-card small {
  overflow: hidden;
  text-overflow: ellipsis;
}

.public-group-card b {
  color: var(--ink);
  font-size: 16px;
  font-weight: 950;
  white-space: nowrap;
}

.public-group-card span,
.public-group-card small {
  color: rgba(15, 23, 42, .62);
  font-size: 12px;
  font-weight: 820;
}

.public-group-message {
  display: grid;
  gap: 7px;
  margin-top: 10px;
  color: rgba(15, 23, 42, .68);
  font-size: 12px;
  font-weight: 950;
}

.public-group-message textarea {
  min-height: 82px;
  border: 1px solid var(--line);
  border-radius: 15px;
  padding: 12px;
  color: var(--ink);
  background: #f8fbff;
  font: inherit;
  font-size: 14px;
  font-weight: 820;
  resize: vertical;
}

.share-gallery-preview {
  display: grid;
  grid-template-columns: 82px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  border: 1px solid color-mix(in srgb, var(--line) 76%, transparent);
  border-radius: 18px;
  padding: 10px;
  background: rgba(255, 255, 255, .70);
}

.share-gallery-preview > span {
  overflow: hidden;
  display: grid;
  place-items: center;
  width: 82px;
  height: 82px;
  border-radius: 16px;
  color: var(--blue);
  background: linear-gradient(145deg, #f8fbff, #e5f0ff);
  font-size: 30px;
  font-weight: 950;
}

.share-gallery-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.share-gallery-preview div {
  display: grid;
  min-width: 0;
  gap: 4px;
}

.share-gallery-preview b,
.share-gallery-preview small,
.share-gallery-preview em {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.share-gallery-preview b {
  color: var(--ink);
  font-size: 16px;
  font-weight: 950;
}

.share-gallery-preview small,
.share-gallery-preview em {
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
  font-weight: 850;
}

.conversation-composer input:disabled,
.conversation-composer button:disabled {
  opacity: .55;
  cursor: not-allowed;
}

#menu-top {
  position: relative;
}

#menu-top.has-unread::after {
  content: attr(data-unread);
  position: absolute;
  right: -5px;
  top: -5px;
  min-width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  border: 2px solid #fff;
  border-radius: 999px;
  color: #fff;
  background: var(--blue);
  font-size: 10px;
  font-weight: 900;
}

.garage-alerts-panel,
.garage-contact-panel {
  margin-top: 0;
  padding: 8px;
  border: 1px solid color-mix(in srgb, var(--blue) 10%, var(--line));
  border-radius: 15px;
  background: color-mix(in srgb, var(--panel) 64%, transparent);
  box-shadow: none;
}

.garage-alert-settings {
  display: grid;
  gap: 12px;
  margin-top: 12px;
  padding: 14px;
  border: 1px solid color-mix(in srgb, var(--blue) 12%, var(--line));
  border-radius: 22px;
  background: color-mix(in srgb, var(--panel) 82%, white 18%);
}

.alert-setting-select,
.alert-setting-row {
  min-height: 48px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: rgba(255, 255, 255, .6);
}

.alert-setting-select {
  display: grid;
  gap: 6px;
  padding: 10px 12px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}

.alert-setting-select select {
  width: 100%;
  min-height: 44px;
  border: 0;
  color: var(--ink);
  background: transparent;
  font: inherit;
  font-size: 15px;
  font-weight: 950;
}

.alert-setting-grid {
  display: grid;
  gap: 8px;
}

.alert-setting-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
}

.alert-setting-row span {
  display: grid;
  gap: 3px;
}

.alert-setting-row b {
  font-size: 14px;
}

.alert-setting-row small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.alert-setting-row input[type="checkbox"] {
  width: 24px;
  height: 24px;
  accent-color: var(--blue);
  flex: 0 0 auto;
}

.alert-setting-row.disabled {
  opacity: .58;
}

.alert-quiet-hours {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.alert-quiet-hours label {
  display: grid;
  gap: 6px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: rgba(255, 255, 255, .56);
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}

.alert-quiet-hours input {
  min-height: 42px;
  border: 0;
  color: var(--ink);
  background: transparent;
  font: inherit;
  font-weight: 950;
}

.plate-alert-list {
  display: grid;
  gap: 6px;
}

.plate-alert-item {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  align-items: center;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: rgba(255, 255, 255, .48);
}

.plate-alert-item div {
  display: grid;
  gap: 3px;
}

.plate-alert-item div:last-child {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 4px;
}

.plate-alert-item button {
  min-height: 30px;
  border-radius: 999px;
  padding: 0 9px;
  font-size: 10px;
}

.plate-alert-item span,
.plate-alert-item small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
}

.verification-badge {
  width: fit-content;
  padding: 5px 9px;
  border: 1px solid color-mix(in srgb, var(--blue) 24%, var(--line));
  border-radius: 999px;
  background: color-mix(in srgb, var(--blue) 8%, transparent);
  color: var(--ink) !important;
  font-weight: 950;
}

.sheet-actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
  gap: 8px;
  margin-top: 12px;
}

.sheet-actions button:nth-child(n+2) {
  color: var(--ink);
  background: color-mix(in srgb, var(--panel) 86%, #fff 14%);
}

.mini-list {
  display: grid;
  gap: 8px;
  margin: 12px 0;
}

.place-list {
  display: grid;
  gap: 10px;
  margin: 12px 0;
}

.mini-list article,
.vehicle-card,
.ride-card,
.place-card,
.empty-card,
.profile-card {
  display: grid;
  gap: 6px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(255, 255, 255, .58);
}

.wide-button {
  width: 100%;
}

.wide-button.compact {
  min-height: 38px;
  margin: 8px 0 4px;
  border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--line));
  border-radius: 14px;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, rgba(255, 255, 255, .78));
  font-size: 12px;
  font-weight: 900;
}

.fp-marker {
  background: transparent;
  --marker-offset: translate(0, 0);
}

.fp-google-marker {
  position: absolute;
  z-index: 5;
  display: grid;
  place-items: center;
  width: auto;
  height: auto;
  padding: 0;
  border: 0;
  background: transparent;
  transform: translate(-50%, -50%);
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}

.fp-marker span {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 2px solid rgba(255, 255, 255, .92);
  border-radius: 999px;
  box-shadow: 0 8px 18px rgba(29, 29, 31, .16);
  cursor: pointer;
  font-size: 10px;
}

.fp-marker-ym span {
  width: 38px;
  min-width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding: 0;
  border: 0;
  border-radius: 999px;
  color: inherit;
  background: transparent;
  box-shadow: none;
  font-size: 18px;
}

.fp-marker .marker-dot {
  position: relative;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border: 2px solid rgba(255, 255, 255, .94);
  border-radius: 999px;
  color: #fff;
  background: linear-gradient(135deg, #0f766e, #14b8a6);
  box-shadow: 0 7px 14px rgba(29, 29, 31, .16);
  font-size: 14px;
  line-height: 1;
}

.vehicle-marker--default .marker-dot {
  border-color: rgba(255, 255, 255, .94);
}

.vehicle-marker--premium-gold .marker-dot {
  border-color: #f3c86a;
  box-shadow: 0 7px 14px rgba(184, 134, 11, .18);
}

.fp-marker-ym .marker-dot {
  width: 38px;
  height: 38px;
  border: 3px solid #fff;
  background: linear-gradient(135deg, var(--blue), #0b1b31);
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--blue) 14%, transparent),
    0 8px 16px rgba(0, 113, 227, .2);
  font-size: 19px;
  transition: transform .22s ease;
  transform: rotate(var(--vehicle-heading, 0deg));
}

.fp-marker-ym.has-heading .marker-dot {
  will-change: transform;
}

.fp-marker-ym.vehicle-marker--premium-gold .marker-dot {
  border-color: #f8db8a;
  box-shadow:
    0 0 0 3px rgba(243, 200, 106, .28),
    0 8px 16px rgba(184, 134, 11, .22);
}

.fp-marker-virtual-garage > span {
  width: auto;
  min-width: 54px;
  height: 28px;
  border-color: color-mix(in srgb, #f4c766 62%, white);
  border-radius: 999px;
  padding: 0 8px;
  color: #063b78;
  background:
    radial-gradient(circle at 12% 20%, rgba(244, 199, 102, .5), transparent 30%),
    linear-gradient(135deg, rgba(255, 255, 255, .94), rgba(225, 241, 255, .92));
  box-shadow: 0 8px 18px rgba(0, 69, 153, .14);
  font-size: 9px;
  font-weight: 1000;
}

.fp-marker-virtual-garage .virtual-garage-marker-dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  min-width: 0;
  height: auto;
  border: 0;
  border-radius: 0;
  padding: 0;
  color: inherit;
  background: transparent;
  box-shadow: none;
}

.fp-marker-virtual-garage .virtual-garage-marker-dot b {
  font: inherit;
  white-space: nowrap;
}

.fp-marker .marker-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  border: 1px solid rgba(255, 255, 255, .8);
  border-radius: 999px;
  background: rgba(255, 255, 255, .92);
  color: #111827;
  box-shadow: 0 6px 14px rgba(15, 23, 42, .12);
  font-size: 8.5px;
  font-weight: 900;
  letter-spacing: 0;
  line-height: 1;
}

.vehicle-marker-label--premium-gold {
  border-color: rgba(217, 164, 65, .42);
  background: linear-gradient(180deg, rgba(255, 255, 255, .96), rgba(255, 250, 232, .94));
  box-shadow:
    inset 0 0 0 1px rgba(255, 239, 184, .34),
    0 7px 16px rgba(122, 86, 9, .12);
}

.fp-marker-ym .marker-tag {
  position: absolute;
  left: 28px;
  top: 23px;
  display: grid;
  gap: 1px;
  min-width: 58px;
  max-width: 82px;
  padding: 4px 7px 4px;
  border-color: rgba(0, 113, 227, .22);
  background: rgba(255, 255, 255, .95);
  text-align: left;
}

.group-chat-view[data-chat-theme] .conversation-messages,
.private-conversation-view[data-chat-theme] .conversation-messages {
  border: 1px solid rgba(15, 23, 42, .055);
  border-radius: 20px;
  padding: 12px 8px;
  background: linear-gradient(180deg, rgba(248, 250, 252, .95), rgba(255, 255, 255, .86));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .72), 0 10px 28px rgba(15, 23, 42, .045);
}

.group-chat-view[data-chat-theme="findplate_blue"] .conversation-messages,
.private-conversation-view[data-chat-theme="findplate_blue"] .conversation-messages {
  background:
    radial-gradient(circle at 12% 10%, rgba(11, 132, 255, .14), transparent 32%),
    linear-gradient(145deg, rgba(236, 247, 255, .96), rgba(255, 255, 255, .9));
}

.group-chat-view[data-chat-theme="soft_pink"] .conversation-messages,
.private-conversation-view[data-chat-theme="soft_pink"] .conversation-messages {
  background:
    radial-gradient(circle at 18% 0, rgba(244, 114, 182, .18), transparent 34%),
    radial-gradient(circle at 90% 16%, rgba(168, 85, 247, .10), transparent 30%),
    linear-gradient(145deg, rgba(255, 247, 251, .98), rgba(255, 255, 255, .88));
}

.group-chat-view[data-chat-theme="dark_night"] .conversation-messages,
.private-conversation-view[data-chat-theme="dark_night"] .conversation-messages,
.group-chat-view[data-chat-theme="roadtalk_night"] .conversation-messages,
.private-conversation-view[data-chat-theme="roadtalk_night"] .conversation-messages {
  border-color: rgba(148, 163, 184, .18);
  background:
    radial-gradient(circle at 20% 0, rgba(59, 130, 246, .20), transparent 34%),
    linear-gradient(145deg, rgba(15, 23, 42, .98), rgba(30, 41, 59, .92));
}

.group-chat-view[data-chat-theme="roadtalk_night"] .conversation-messages {
  background:
    radial-gradient(circle at 16% 0, rgba(34, 197, 94, .17), transparent 36%),
    linear-gradient(145deg, rgba(10, 24, 32, .98), rgba(19, 31, 44, .93));
}

.group-chat-view[data-chat-theme="garage_photo_blur"] .conversation-messages,
.private-conversation-view[data-chat-theme="garage_photo_blur"] .conversation-messages {
  background:
    linear-gradient(145deg, rgba(255, 255, 255, .74), rgba(226, 236, 249, .80)),
    radial-gradient(circle at 15% 18%, rgba(15, 23, 42, .10), transparent 38%);
  backdrop-filter: blur(10px) saturate(1.08);
}

.group-chat-view[data-chat-accent="pink"] .conversation-message.mine,
.private-conversation-view[data-chat-accent="pink"] .conversation-message.mine {
  border-color: rgba(219, 77, 134, .22);
  background: linear-gradient(135deg, #db4d86, #a855f7);
}

.group-chat-view[data-chat-accent="dark"] .conversation-message.mine,
.private-conversation-view[data-chat-accent="dark"] .conversation-message.mine {
  border-color: rgba(148, 163, 184, .22);
  background: linear-gradient(135deg, #111827, #334155);
}

.chat-theme-sheet,
.profile-style-sheet {
  display: grid;
  gap: 12px;
}

.chat-theme-list {
  display: grid;
  gap: 8px;
}

.chat-theme-list button {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-height: 72px;
  border: 1px solid rgba(15, 23, 42, .08);
  border-radius: 18px;
  padding: 9px;
  color: #101828;
  background: rgba(255, 255, 255, .88);
  font: inherit;
  text-align: left;
}

.chat-theme-list button.active {
  border-color: rgba(11, 132, 255, .34);
  box-shadow: 0 8px 24px rgba(11, 132, 255, .10);
}

.chat-theme-list b,
.chat-theme-list small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chat-theme-list b {
  font-size: 13px;
  font-weight: 950;
}

.chat-theme-list small {
  color: #667085;
  font-size: 10px;
  font-weight: 820;
}

.chat-theme-list em {
  border-radius: 999px;
  padding: 5px 8px;
  color: var(--blue);
  background: rgba(11, 132, 255, .08);
  font-size: 9px;
  font-style: normal;
  font-weight: 950;
  white-space: nowrap;
}

.chat-theme-preview,
.profile-style-preview {
  width: 52px;
  height: 52px;
  display: block;
  border-radius: 17px;
  border: 1px solid rgba(15, 23, 42, .08);
  background: linear-gradient(145deg, #f8fafc, #fff);
}

.chat-theme-preview[data-chat-theme="findplate_blue"] {
  background: linear-gradient(145deg, #dff1ff, #fff);
}

.chat-theme-preview[data-chat-theme="soft_pink"],
.profile-style-preview[data-profile-style-preview="soft-pink"],
.profile-style-preview[data-profile-style-preview="feminine"] {
  background:
    radial-gradient(circle at 25% 20%, rgba(244, 114, 182, .46), transparent 40%),
    linear-gradient(145deg, #fff7fb, #f7e8ff);
}

.chat-theme-preview[data-chat-theme="dark_night"] {
  background: linear-gradient(145deg, #0f172a, #334155);
}

.chat-theme-preview[data-chat-theme="roadtalk_night"] {
  background: linear-gradient(145deg, #081820, #14532d);
}

.chat-theme-preview[data-chat-theme="garage_photo_blur"] {
  background:
    radial-gradient(circle at 28% 22%, #94a3b8, transparent 38%),
    linear-gradient(145deg, #eff6ff, #fff);
}

body[data-profile-style="soft-pink"] .fp-comms-filter-row button.active,
body[data-profile-style="feminine"] .fp-comms-filter-row button.active,
body[data-profile-style="soft-pink"] .message-center-actions button:first-child,
body[data-profile-style="feminine"] .message-center-actions button:first-child,
body[data-profile-style="soft-pink"] .conversation-composer button[type="submit"],
body[data-profile-style="feminine"] .conversation-composer button[type="submit"],
body[data-profile-style="soft-pink"] .conversation-message.mine,
body[data-profile-style="feminine"] .conversation-message.mine {
  border-color: rgba(219, 77, 134, .24);
  background: linear-gradient(135deg, #db4d86, #a855f7);
}

body[data-profile-style="soft-pink"] .fp-comms-type-badge,
body[data-profile-style="feminine"] .fp-comms-type-badge,
body[data-profile-style="soft-pink"] .fp-comms-action,
body[data-profile-style="feminine"] .fp-comms-action,
body[data-profile-style="soft-pink"] .conversation-composer button[data-share-gallery],
body[data-profile-style="feminine"] .conversation-composer button[data-share-gallery] {
  color: #be2f70;
  border-color: rgba(219, 77, 134, .18);
  background: rgba(255, 228, 240, .72);
}

body[data-profile-style="soft-pink"] .fp-bottom-nav-item-active,
body[data-profile-style="feminine"] .fp-bottom-nav-item-active,
body[data-profile-style="soft-pink"] .map-layer-chip.active,
body[data-profile-style="feminine"] .map-layer-chip.active,
body[data-profile-style="soft-pink"] .home-filter-chip.active,
body[data-profile-style="feminine"] .home-filter-chip.active {
  border-color: rgba(219, 77, 134, .26);
  color: #be2f70;
  background: rgba(255, 228, 240, .78);
}

.fp-marker-ym .vehicle-marker-label--premium-gold {
  border-color: rgba(217, 164, 65, .42);
  background: linear-gradient(180deg, rgba(255, 255, 255, .97), rgba(255, 248, 222, .95));
}

.fp-marker-ym .marker-tag strong,
.fp-marker-ym .marker-tag small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
}

.fp-marker-ym .marker-tag strong {
  color: #0f172a;
  font-size: 8.5px;
  font-weight: 950;
}

.fp-marker-ym .marker-tag small {
  color: #64748b;
  font-size: 7.5px;
  font-weight: 850;
}

.fp-marker-ym span::after {
  content: "";
  position: absolute;
  width: 48px;
  height: 48px;
  border: 1px solid color-mix(in srgb, var(--blue) 28%, transparent);
  border-radius: 50%;
  animation: marker-pulse 1.9s ease-out infinite;
  pointer-events: none;
}

.fp-marker-ym.vehicle-marker--premium-gold span::after {
  border-color: rgba(243, 200, 106, .45);
}

.fp-marker-leader span {
  width: 38px;
  height: 38px;
  color: #fff;
  background: linear-gradient(135deg, #101827, #243042);
  font-size: 18px;
}

.fp-marker-found span {
  color: #fff;
  background: linear-gradient(135deg, #168a55, #22c55e);
}

.fp-marker-live span {
  width: auto;
  min-width: 0;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 0;
  border-radius: 999px;
  border: 0;
  color: inherit;
  background: transparent;
  box-shadow: none;
  font-size: 14px;
}

.fp-marker-live span b,
.fp-marker-live span small {
  display: block;
  line-height: 1;
}

.fp-marker-live span b {
  font-size: 13px;
}

.fp-marker-live span small {
  max-width: 96px;
  min-height: 20px;
  padding: 0 6px;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #0f172a;
  font-size: 8.5px;
  font-weight: 900;
}

.fp-marker-live-stale {
  opacity: .58;
  filter: saturate(.65) grayscale(.18);
}

.fp-marker-live-stale span {
  transform: var(--marker-offset) scale(.96);
}

.fp-marker-live-stale .marker-dot {
  background: linear-gradient(135deg, #64748b, #94a3b8);
  box-shadow: 0 5px 12px rgba(15, 23, 42, .12);
}

.fp-marker-live .vehicle-marker-stale-note {
  min-height: 16px;
  padding: 2px 6px;
  color: #475569;
  background: rgba(255, 255, 255, .88);
  font-size: 7.5px;
  font-weight: 900;
}

.fp-marker-live.is-focused span,
.fp-marker-ym.is-focused span {
  transform: var(--marker-offset) scale(1.06);
  transition: transform 140ms ease;
}

.fp-marker-offset-1 { --marker-offset: translate(5px, -4px); }
.fp-marker-offset-2 { --marker-offset: translate(-5px, 4px); }
.fp-marker-offset-3 { --marker-offset: translate(4px, 5px); }

.fp-marker-offset-1 span,
.fp-marker-offset-2 span,
.fp-marker-offset-3 span {
  transform: var(--marker-offset);
}

.fp-marker-road span {
  width: 30px;
  height: 30px;
  border: 2px solid rgba(255, 255, 255, .95);
  color: #fff;
  background: linear-gradient(135deg, #ff9f0a, #d97706);
  box-shadow:
    0 0 0 2px rgba(255, 159, 10, .16),
    0 7px 14px rgba(29, 29, 31, .16);
  font-size: 15px;
  font-weight: 950;
}

.fp-marker-route span {
  width: 27px;
  height: 27px;
  border: 2px solid rgba(255, 255, 255, .96);
  color: #fff;
  background: linear-gradient(135deg, var(--blue), #0b1b31);
  box-shadow:
    0 0 0 2px rgba(0, 113, 227, .16),
    0 8px 16px rgba(15, 23, 42, .18);
  font-size: 10px;
  font-weight: 950;
}

.fp-marker-route.is-focused span {
  transform: scale(1.08);
  transition: transform 140ms ease;
}

.fp-marker-route-city {
  pointer-events: none;
}

.fp-google-marker.fp-marker-route-city {
  z-index: 3;
}

.fp-marker-route-city > span {
  width: auto;
  min-width: 0;
  height: auto;
  border: 0;
  border-radius: 0;
  color: inherit;
  background: transparent;
  box-shadow: none;
  pointer-events: none;
}

.fp-marker-route-city .route-city-label {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  border: 1px solid rgba(15, 23, 42, .1);
  border-radius: 999px;
  padding: 3px 8px;
  color: #24364b;
  background: rgba(255, 255, 255, .9);
  box-shadow: 0 6px 14px rgba(15, 23, 42, .1);
  font-size: 10px;
  font-weight: 950;
  white-space: nowrap;
  backdrop-filter: blur(6px);
}

.fp-marker-route-leader span {
  width: auto;
  min-width: 43px;
  height: 28px;
  padding: 0 8px;
  color: #4b3200;
  background: linear-gradient(135deg, #fff2b8, #d9a441);
  box-shadow:
    0 0 0 2px rgba(217, 164, 65, .22),
    0 8px 18px rgba(122, 86, 9, .18);
}

.fp-marker-group span {
  overflow: hidden;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border: 2px solid rgba(255, 255, 255, .96);
  color: #064e3b;
  background:
    radial-gradient(circle at 25% 15%, rgba(255, 255, 255, .95), transparent 34%),
    linear-gradient(135deg, color-mix(in srgb, #10b981 24%, #fff 76%), color-mix(in srgb, var(--blue) 12%, #fff 88%));
  box-shadow:
    0 0 0 2px rgba(16, 185, 129, .13),
    0 8px 16px rgba(15, 23, 42, .16);
  font-size: 10px;
  font-weight: 950;
}

.fp-marker-group span img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.gps-debug {
  display: grid;
  gap: 3px;
  margin-top: 10px;
  border: 1px solid color-mix(in srgb, var(--line) 60%, transparent);
  border-radius: 14px;
  padding: 9px;
  background: color-mix(in srgb, var(--panel) 66%, transparent);
}

.gps-debug b {
  font-size: 12px;
}

.gps-debug span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}

.fp-marker-place span {
  width: 30px;
  height: 30px;
  border: 1px solid color-mix(in srgb, var(--blue) 20%, var(--line));
  color: var(--marker-place-ink);
  background: color-mix(in srgb, var(--marker-place) 92%, transparent);
  box-shadow: 0 7px 16px rgba(29, 29, 31, .14);
  font-size: 9px;
}

.fp-marker-place-approved span,
.fp-marker-place-confirmed span,
.fp-marker-place-active_public span {
  border-color: rgba(0, 170, 102, .42);
  color: #0c5b35;
  background: color-mix(in srgb, #e9fff5 82%, #fff 18%);
}

.fp-marker-place-pending span {
  border-color: rgba(255, 180, 0, .45);
  color: #7a4a00;
  background: color-mix(in srgb, #fff7db 84%, #fff 16%);
}

.fp-marker-place-private span {
  border-color: rgba(101, 116, 139, .32);
  color: #2f3b4a;
  background: color-mix(in srgb, #eef3f8 78%, #fff 22%);
}

.fp-marker-place-group span {
  border-color: rgba(36, 83, 143, .36);
  color: #24538f;
  background: color-mix(in srgb, #eaf3ff 82%, #fff 18%);
}

.fp-marker-place-shared_findplate_spedai span {
  border-color: rgba(0, 170, 170, .36);
  color: #075e67;
  background: color-mix(in srgb, #e7fbff 82%, #fff 18%);
}

.fp-marker-local span {
  width: auto;
  min-width: 0;
  height: 32px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.fp-marker-local .local-poi-dot {
  position: relative;
  width: 23px;
  height: 23px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border: 2px solid rgba(255, 255, 255, .95);
  border-radius: 999px;
  color: #0f3765;
  background:
    radial-gradient(circle at 28% 22%, rgba(255, 255, 255, .96), transparent 34%),
    linear-gradient(135deg, #eaf5ff, #f3c86a);
  box-shadow:
    0 0 0 2px rgba(0, 113, 227, .13),
    0 7px 14px rgba(15, 23, 42, .14);
  font-size: 11px;
  line-height: 1;
}

.fp-marker-local .local-poi-dot--private,
.local-poi-list-icon.local-poi-dot--private {
  border-color: rgba(255, 255, 255, .96);
  box-shadow:
    0 0 0 2px rgba(0, 113, 227, .12),
    0 7px 14px rgba(15, 23, 42, .14);
}

.fp-marker-local .local-poi-dot--public,
.local-poi-list-icon.local-poi-dot--public {
  border-color: rgba(255, 255, 255, .98);
  box-shadow:
    0 0 0 2px rgba(217, 164, 65, .18),
    0 8px 18px rgba(15, 23, 42, .16);
}

.fp-marker-local .local-poi-dot--findplate-public,
.local-poi-list-icon.local-poi-dot--findplate-public {
  color: #073f73;
  background:
    radial-gradient(circle at 28% 22%, rgba(255, 255, 255, .96), transparent 34%),
    linear-gradient(135deg, #dff1ff, #f3c86a);
}

.fp-marker-local .local-poi-dot--shared,
.local-poi-list-icon.local-poi-dot--shared {
  color: #fff;
  background:
    radial-gradient(circle at 26% 20%, rgba(255, 255, 255, .28), transparent 34%),
    linear-gradient(135deg, #0071e3, #d9a441);
}

.fp-marker-local .local-poi-dot--shared::before,
.local-poi-list-icon.local-poi-dot--shared::before {
  content: "↝";
  position: absolute;
  left: -5px;
  top: -4px;
  width: 12px;
  height: 12px;
  display: grid;
  place-items: center;
  border: 1.5px solid #fff;
  border-radius: 999px;
  color: #fff;
  background: #0b1b31;
  box-shadow: 0 3px 8px rgba(11, 27, 49, .22);
  font-size: 7px;
  font-weight: 950;
  line-height: 1;
}

.fp-marker-local .local-poi-dot--verified::after,
.local-poi-list-icon.local-poi-dot--verified::after {
  content: "✓";
  position: absolute;
  right: -5px;
  bottom: -4px;
  width: 12px;
  height: 12px;
  display: grid;
  place-items: center;
  border: 1.5px solid #fff;
  border-radius: 999px;
  color: #fff;
  background: #0a9f58;
  box-shadow: 0 3px 8px rgba(10, 159, 88, .24);
  font-size: 7px;
  font-weight: 950;
  line-height: 1;
}

.fp-marker-local .local-poi-dot--pending::after,
.local-poi-list-icon.local-poi-dot--pending::after {
  content: "";
  position: absolute;
  right: -3px;
  bottom: -2px;
  width: 8px;
  height: 8px;
  border: 1.5px solid #fff;
  border-radius: 999px;
  background: #f3c86a;
  box-shadow: 0 2px 7px rgba(217, 164, 65, .30);
}

.fp-marker-local .local-poi-dot--spot,
.local-poi-list-icon.local-poi-dot--spot {
  color: #5c3900;
  background:
    radial-gradient(circle at 28% 22%, rgba(255, 255, 255, .96), transparent 34%),
    linear-gradient(135deg, #fff2b8, #d9a441);
  box-shadow:
    0 0 0 2px rgba(217, 164, 65, .18),
    0 7px 14px rgba(122, 86, 9, .16);
}

.fp-marker-local .local-poi-dot--parking,
.local-poi-list-icon.local-poi-dot--parking {
  color: #063f73;
  background:
    radial-gradient(circle at 28% 22%, rgba(255, 255, 255, .96), transparent 34%),
    linear-gradient(135deg, #eaf5ff, #6bbcff);
}

.fp-marker-local .local-poi-dot--meetup,
.local-poi-list-icon.local-poi-dot--meetup {
  color: #fff;
  background: linear-gradient(135deg, var(--blue), #0b1b31);
}

.fp-marker-local .local-poi-dot--meetup_spot,
.local-poi-list-icon.local-poi-dot--meetup_spot {
  color: #5c3900;
  background:
    radial-gradient(circle at 28% 22%, rgba(255, 255, 255, .96), transparent 34%),
    linear-gradient(135deg, #fff2b8, #d9a441);
}

.fp-marker-local .local-poi-dot--viewpoint,
.local-poi-list-icon.local-poi-dot--viewpoint {
  color: #063f73;
  background: linear-gradient(135deg, #edf8ff, #82c8f4);
}

.fp-marker-local .local-poi-dot--fuel,
.local-poi-list-icon.local-poi-dot--fuel {
  color: #0b1b31;
  background: linear-gradient(135deg, #eff6ff, #9fb9d4);
}

.fp-marker-local .local-poi-dot--wash,
.local-poi-list-icon.local-poi-dot--wash {
  color: #064b72;
  background: linear-gradient(135deg, #e1f7ff, #7dd3fc);
}

.fp-marker-local .local-poi-dot--service,
.local-poi-list-icon.local-poi-dot--service {
  color: #243042;
  background: linear-gradient(135deg, #f6f8fb, #cbd5e1);
}

.fp-marker-local .local-poi-dot--food,
.local-poi-list-icon.local-poi-dot--food {
  color: #5b2b00;
  background: linear-gradient(135deg, #fff2db, #ffb35c);
}

.fp-marker-local .local-poi-dot--road_warning,
.local-poi-list-icon.local-poi-dot--road_warning {
  color: #fff;
  background: linear-gradient(135deg, #ff9f0a, #d84b16);
}

.fp-marker-local .local-poi-dot--truck_parking,
.local-poi-list-icon.local-poi-dot--truck_parking,
.fp-marker-local .local-poi-dot--mop,
.local-poi-list-icon.local-poi-dot--mop {
  color: #fff;
  background: linear-gradient(135deg, #0b1b31, #0071e3);
  font-size: 8px;
}

.fp-marker-local small {
  max-width: 94px;
  min-height: 22px;
  display: inline-flex;
  align-items: center;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--blue) 18%, rgba(217, 164, 65, .30));
  border-radius: 999px;
  padding: 0 7px;
  color: #18324f;
  background: rgba(255, 255, 255, .94);
  box-shadow: 0 6px 14px rgba(15, 23, 42, .10);
  font-size: 8.5px;
  font-weight: 920;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fp-marker-local .local-poi-label--public {
  border-color: rgba(217, 164, 65, .38);
  background: rgba(255, 252, 242, .95);
}

.fp-marker-local .local-poi-label--shared {
  border-color: rgba(217, 164, 65, .42);
  background: linear-gradient(135deg, rgba(255, 252, 242, .96), rgba(235, 246, 255, .94));
}

.fp-marker-local .local-poi-label--private {
  border-color: rgba(0, 113, 227, .18);
}

.fp-marker-local.is-focused span {
  transform: scale(1.05);
  transition: transform 140ms ease;
}

.fp-marker-place,
.fp-google-marker.fp-marker-place {
  z-index: 520 !important;
}

.fp-marker-local,
.fp-google-marker.fp-marker-local {
  z-index: 530 !important;
}

.fp-marker-ym,
.fp-google-marker.fp-marker-ym {
  z-index: 610 !important;
}

.fp-marker-live,
.fp-google-marker.fp-marker-live {
  z-index: 650 !important;
}

.fp-marker.is-focused,
.fp-google-marker.is-focused {
  z-index: 900 !important;
}

.fp-marker-ym span {
  width: 36px;
  min-width: 36px;
  height: 36px;
}

.fp-marker-ym .marker-dot {
  width: 34px;
  height: 34px;
  border-width: 2px;
  box-shadow:
    0 0 0 2px color-mix(in srgb, var(--blue) 12%, transparent),
    0 7px 14px rgba(0, 113, 227, .16);
  font-size: 17px;
}

.fp-marker-ym .marker-tag {
  left: 25px;
  top: 21px;
  min-width: 52px;
  max-width: 76px;
  padding: 3px 6px;
}

.fp-marker-ym .marker-tag strong {
  font-size: 8px;
}

.fp-marker-ym .marker-tag small {
  font-size: 7px;
}

.fp-marker-ym span::after {
  width: 40px;
  height: 40px;
  opacity: .72;
}

.fp-marker-live span {
  min-height: 44px;
  gap: 5px;
  transform: var(--marker-offset);
}

.fp-marker-live .marker-dot {
  width: 44px;
  height: 44px;
  border-width: 3px;
  background: linear-gradient(135deg, #0f766e, #17c9a8);
  box-shadow:
    0 0 0 3px rgba(20, 184, 166, .20),
    0 10px 22px rgba(15, 118, 110, .22);
  font-size: 22px;
}

.fp-marker-live-fresh .marker-dot {
  border-color: rgba(255, 255, 255, .98);
}

.fp-marker-live span small {
  max-width: 118px;
  min-height: 24px;
  padding: 0 8px;
  border: 1px solid rgba(20, 184, 166, .26);
  border-radius: 999px;
  background: rgba(255, 255, 255, .96);
  box-shadow: 0 7px 16px rgba(15, 23, 42, .12);
  font-size: 10px;
  font-weight: 950;
}

.fp-marker-live-stale span {
  transform: var(--marker-offset) scale(.94);
}

.fp-marker-live-stale .marker-dot {
  width: 42px;
  height: 42px;
  font-size: 20px;
}

.fp-marker-live.is-focused span {
  transform: var(--marker-offset) scale(1.08);
}

.fp-marker-place span {
  width: 34px;
  height: 34px;
  border-width: 2px;
  font-size: 11px;
  font-weight: 1000;
}

.fp-marker-place-approved span,
.fp-marker-place-confirmed span,
.fp-marker-place-active_public span {
  box-shadow:
    0 0 0 2px rgba(0, 170, 102, .14),
    0 8px 17px rgba(15, 23, 42, .13);
}

.fp-marker-place-approved span::after,
.fp-marker-place-confirmed span::after,
.fp-marker-place-active_public span::after {
  content: "";
  position: absolute;
  right: -3px;
  bottom: -3px;
  width: 10px;
  height: 10px;
  border: 2px solid #fff;
  border-radius: 999px;
  background: #0a9f58;
  box-shadow: 0 3px 8px rgba(10, 159, 88, .24);
}

.fp-marker-place-cat-food span { font-size: 14px; }
.fp-marker-place-cat-fuel span { font-size: 15px; }
.fp-marker-place-cat-service span { font-size: 14px; }
.fp-marker-place-cat-road_warning span {
  color: #fff;
  background: linear-gradient(135deg, #ff9f0a, #d84b16);
}
.fp-marker-place-cat-wash span {
  color: #064b72;
  background: linear-gradient(135deg, #e1f7ff, #7dd3fc);
}
.fp-marker-place-cat-truck_parking span,
.fp-marker-place-cat-mop span {
  color: #fff;
  background: linear-gradient(135deg, #0b1b31, #0071e3);
  font-size: 8px;
}
.fp-marker-place-cat-custom span {
  color: #18324f;
  background: linear-gradient(135deg, #f8fbff, #eaf3ff);
  font-size: 16px;
}

.fp-marker-local .local-poi-dot {
  width: 28px;
  height: 28px;
  font-size: 12px;
}

.local-poi-sheet-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 10px 0 4px;
}

.local-poi-form {
  display: grid;
  gap: 10px;
}

.local-poi-form textarea {
  width: 100%;
  resize: vertical;
}

.local-poi-type-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.local-poi-visibility-row {
  display: grid;
  grid-template-columns: 1fr;
}

.local-poi-type-row button,
.local-poi-visibility-row button {
  gap: 6px;
}

.local-poi-type-row button span {
  font-size: 13px;
}

.local-poi-form .local-poi-sheet-actions {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.local-poi-sheet-actions button {
  min-height: 40px;
  border: 1px solid var(--line);
  border-radius: 14px;
  color: var(--ink);
  background: rgba(255, 255, 255, .72);
  font-size: 12px;
  font-weight: 950;
}

.local-poi-list {
  display: grid;
  gap: 8px;
  margin-top: 10px;
}

.local-poi-list-item {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 9px;
  border: 1px solid color-mix(in srgb, var(--line) 74%, transparent);
  border-radius: 16px;
  padding: 10px;
  background: rgba(255, 255, 255, .68);
  box-shadow: 0 6px 16px rgba(15, 23, 42, .055);
}

.local-poi-list-item--public {
  border-color: rgba(217, 164, 65, .22);
  background: linear-gradient(180deg, rgba(255, 253, 247, .82), rgba(255, 255, 255, .68));
}

.local-poi-list-item--shared {
  border-color: rgba(0, 113, 227, .18);
  background: linear-gradient(135deg, rgba(239, 248, 255, .78), rgba(255, 251, 239, .72));
}

.local-poi-list-item--private {
  background: rgba(255, 255, 255, .68);
}

.local-poi-list-icon {
  position: relative;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 2px solid rgba(255, 255, 255, .95);
  border-radius: 999px;
  color: #0f3765;
  background: linear-gradient(135deg, #eaf5ff, #f3c86a);
  font-size: 12px;
  font-weight: 950;
}

.local-poi-badge {
  display: inline-flex;
  align-items: center;
  min-height: 18px;
  margin-right: 4px;
  border: 1px solid rgba(0, 113, 227, .14);
  border-radius: 999px;
  padding: 1px 6px;
  color: #0b4d86;
  background: rgba(234, 245, 255, .82);
  font-size: 10px;
  font-weight: 950;
  vertical-align: middle;
  white-space: nowrap;
}

.local-poi-badge--private {
  color: #31506d;
  border-color: rgba(49, 80, 109, .14);
  background: rgba(246, 248, 251, .92);
}

.local-poi-badge--pending {
  color: #7b5200;
  border-color: rgba(217, 164, 65, .26);
  background: rgba(255, 244, 207, .90);
}

.local-poi-badge--added {
  color: #7b5200;
  border-color: rgba(217, 164, 65, .26);
  background: rgba(255, 244, 207, .90);
}

.local-poi-badge--group {
  color: #24538f;
  border-color: rgba(36, 83, 143, .18);
  background: rgba(230, 240, 255, .92);
}

.local-poi-badge--transport {
  color: #0d5f54;
  border-color: rgba(13, 95, 84, .18);
  background: rgba(228, 248, 244, .92);
}

.local-poi-badge--verified {
  color: #087442;
  border-color: rgba(10, 159, 88, .22);
  background: rgba(232, 250, 240, .92);
}

.local-poi-badge--rejected {
  color: #8a2d2d;
  border-color: rgba(220, 38, 38, .18);
  background: rgba(255, 235, 235, .90);
}

.local-poi-list-item div {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.local-poi-list-item b,
.local-poi-list-item small,
.local-poi-list-item em {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.local-poi-list-item b {
  color: var(--ink);
  font-size: 14px;
  font-weight: 950;
  white-space: nowrap;
}

.local-poi-list-item small,
.local-poi-list-item em {
  color: var(--muted);
  font-size: 11px;
  font-style: normal;
  font-weight: 820;
  line-height: 1.35;
}

.local-poi-list-item nav {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.route-planner-form {
  display: grid;
  gap: 11px;
}

.route-planner-form label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}

.route-planner-form input {
  width: 100%;
  min-height: 44px;
  border: 1px solid color-mix(in srgb, var(--line) 74%, transparent);
  border-radius: 14px;
  padding: 0 12px;
  color: var(--ink);
  background: rgba(255, 255, 255, .82);
  font-size: 14px;
  font-weight: 850;
}

.route-destination-control {
  position: relative;
}

.route-destination-suggestions {
  display: grid;
  gap: 6px;
  margin-top: 2px;
  border: 1px solid color-mix(in srgb, var(--blue) 14%, var(--line));
  border-radius: 14px;
  padding: 6px;
  background: rgba(255, 255, 255, .96);
  box-shadow: 0 12px 28px rgba(15, 23, 42, .10);
}

.route-destination-suggestions p {
  margin: 0;
  padding: 8px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 780;
  line-height: 1.35;
}

.route-destination-suggestions button {
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border: 0;
  border-radius: 11px;
  padding: 8px 9px;
  color: var(--ink);
  background: color-mix(in srgb, var(--blue) 5%, #fff);
  text-align: left;
  box-shadow: none;
}

.route-destination-suggestions button:active {
  transform: translateY(1px);
}

.route-destination-suggestions span {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.route-destination-suggestions b {
  overflow: hidden;
  color: var(--ink);
  font-size: 13px;
  font-weight: 920;
  line-height: 1.18;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.route-destination-suggestions small {
  overflow: hidden;
  color: var(--muted);
  font-size: 11px;
  font-weight: 760;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.route-destination-suggestions em {
  flex: 0 0 auto;
  border-radius: 999px;
  padding: 4px 7px;
  color: color-mix(in srgb, var(--blue) 82%, #0f172a);
  background: color-mix(in srgb, var(--blue) 9%, #fff);
  font-size: 10px;
  font-style: normal;
  font-weight: 900;
}

.route-pick-map-button {
  min-height: 40px;
  border: 1px solid color-mix(in srgb, var(--blue) 24%, var(--line));
  border-radius: 14px;
  color: var(--blue);
  background: color-mix(in srgb, var(--blue) 7%, #fff);
  font-size: 13px;
  font-weight: 920;
}

.route-mode-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.route-mode-row button {
  padding-inline: 8px;
}

.route-mode-row button:disabled {
  color: rgba(15, 23, 42, .42);
  border-color: rgba(15, 23, 42, .08);
  background: rgba(248, 250, 252, .68);
  box-shadow: none;
}

.route-mode-note {
  color: var(--muted);
  font-size: 11px;
  font-weight: 780;
  line-height: 1.35;
}

.route-summary-card,
.leader-follow-card {
  display: grid;
  gap: 6px;
  border: 1px solid color-mix(in srgb, var(--blue) 16%, var(--line));
  border-radius: 18px;
  padding: 12px;
  background: linear-gradient(180deg, rgba(245, 250, 255, .94), rgba(255, 255, 255, .76));
  box-shadow: 0 8px 20px rgba(15, 23, 42, .06);
}

.route-summary-card div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.route-summary-card b {
  color: var(--ink);
  font-size: 24px;
  font-weight: 950;
}

.route-summary-card span,
.route-summary-card small,
.leader-follow-card span,
.leader-follow-card small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 820;
  line-height: 1.35;
}

.leader-follow-card {
  border-color: rgba(217, 164, 65, .25);
  background: linear-gradient(135deg, rgba(255, 249, 226, .94), rgba(239, 248, 255, .84));
}

.leader-follow-card b {
  color: var(--ink);
  font-size: 15px;
  font-weight: 950;
}

.route-usage-card {
  display: grid;
  gap: 8px;
  border: 1px solid color-mix(in srgb, var(--blue) 14%, var(--line));
  border-radius: 16px;
  padding: 11px;
  background: linear-gradient(135deg, rgba(247, 251, 255, .94), rgba(255, 255, 255, .72));
  box-shadow: 0 8px 18px rgba(15, 23, 42, .045);
}

.route-usage-card > div:first-child {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.route-usage-card b {
  color: var(--ink);
  font-size: 13px;
  font-weight: 950;
}

.route-usage-card button {
  min-height: 28px;
  border: 1px solid color-mix(in srgb, var(--blue) 22%, var(--line));
  border-radius: 999px;
  padding: 0 10px;
  color: var(--blue);
  background: color-mix(in srgb, var(--blue) 8%, #fff);
  font-size: 11px;
  font-weight: 940;
}

.route-usage-counters,
.route-usage-operator-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

.route-usage-counters span,
.route-usage-operator-grid span {
  display: grid;
  gap: 2px;
  min-width: 0;
  border: 1px solid rgba(15, 23, 42, .06);
  border-radius: 12px;
  padding: 8px;
  background: rgba(255, 255, 255, .72);
}

.route-usage-counters span.warning,
.route-usage-operator-grid span.warning {
  border-color: rgba(217, 164, 65, .32);
  background: rgba(255, 248, 225, .78);
}

.route-usage-counters em,
.route-usage-operator-grid em {
  color: var(--muted);
  font-size: 11px;
  font-style: normal;
  font-weight: 880;
}

.route-usage-limit-card {
  margin: 10px 0;
}

.route-usage-operator-card {
  margin-top: 10px;
}

.route-cost-card {
  display: grid;
  gap: 10px;
  border: 1px solid color-mix(in srgb, var(--blue) 12%, var(--line));
  border-radius: 16px;
  padding: 12px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .86), rgba(244, 249, 255, .70));
}

.route-entitlement-card {
  display: grid;
  gap: 10px;
  border: 1px solid color-mix(in srgb, var(--gold) 22%, var(--line));
  border-radius: 16px;
  padding: 12px;
  background:
    radial-gradient(circle at 0 0, color-mix(in srgb, var(--gold) 13%, transparent), transparent 48%),
    rgba(255, 255, 255, .86);
}

.route-entitlement-card > div:first-child {
  display: grid;
  gap: 3px;
}

.route-entitlement-card span,
.route-entitlement-card small,
.route-entitlement-card p {
  margin: 0;
  color: var(--muted);
  font-size: 11px;
  font-weight: 780;
  line-height: 1.35;
}

.route-entitlement-card b {
  color: var(--ink);
  font-size: 14px;
  font-weight: 950;
}

.route-entitlement-card dl {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  margin: 0;
}

.route-entitlement-card dl div {
  display: grid;
  gap: 2px;
  border: 1px solid rgba(15, 23, 42, .06);
  border-radius: 12px;
  padding: 8px;
  background: rgba(255, 255, 255, .68);
}

.route-entitlement-card dt,
.route-entitlement-card dd {
  margin: 0;
}

.route-entitlement-card dt {
  color: var(--muted);
  font-size: 9px;
  font-weight: 900;
}

.route-entitlement-card dd {
  overflow: hidden;
  color: var(--ink);
  font-size: 11px;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.route-entitlement-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.route-entitlement-actions button {
  min-height: 34px;
  border: 1px solid color-mix(in srgb, var(--blue) 14%, var(--line));
  border-radius: 999px;
  padding: 0 10px;
  color: var(--ink);
  background: rgba(255, 255, 255, .8);
  font-size: 10px;
  font-weight: 900;
}

.route-cost-form {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.route-cost-form label {
  display: grid;
  gap: 5px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
}

.route-cost-form input {
  min-height: 38px;
  border: 1px solid color-mix(in srgb, var(--line) 80%, transparent);
  border-radius: 12px;
  padding: 0 9px;
  color: var(--ink);
  background: rgba(255, 255, 255, .88);
  font-size: 13px;
  font-weight: 850;
}

.route-cost-note,
.route-cost-session small {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 760;
  line-height: 1.35;
}

.route-billing-explainer {
  display: grid;
  gap: 7px;
}

.route-billing-explainer article {
  display: grid;
  gap: 3px;
  border: 1px solid rgba(15, 23, 42, .07);
  border-radius: 13px;
  padding: 9px;
  background: rgba(255, 255, 255, .68);
}

.route-billing-explainer article.warning {
  border-color: rgba(217, 164, 65, .28);
  background: rgba(255, 248, 225, .68);
}

.route-billing-explainer b {
  color: var(--ink);
  font-size: 12px;
  font-weight: 950;
}

.route-billing-explainer p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 780;
  line-height: 1.35;
}

.route-cost-session {
  display: grid;
  gap: 4px;
  border-top: 1px solid rgba(15, 23, 42, .06);
  padding-top: 9px;
}

.route-cost-session b {
  color: var(--ink);
  font-size: 13px;
  font-weight: 920;
}

.route-usage-events {
  display: grid;
  gap: 4px;
  max-height: 160px;
  overflow: auto;
}

.route-usage-events small {
  border-top: 1px solid rgba(15, 23, 42, .06);
  padding-top: 4px;
}

.follow-leader-pro-card {
  display: grid;
  gap: 6px;
  border: 1px solid rgba(217, 164, 65, .22);
  border-radius: 16px;
  padding: 12px;
  background: linear-gradient(135deg, rgba(255, 250, 232, .96), rgba(242, 249, 255, .86));
}

.follow-leader-pro-card b {
  color: var(--ink);
  font-size: 15px;
  font-weight: 950;
}

.follow-leader-pro-card span,
.follow-leader-benefits span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 820;
  line-height: 1.35;
}

.follow-leader-benefits {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

.follow-leader-benefits span {
  border: 1px solid color-mix(in srgb, var(--line) 76%, transparent);
  border-radius: 13px;
  padding: 9px 10px;
  background: rgba(255, 255, 255, .78);
}

.route-actions {
  grid-template-columns: 1.15fr 1fr .8fr;
}

.route-safety-note {
  margin: 0;
  color: var(--muted);
  font-size: 11px;
  font-weight: 820;
  line-height: 1.35;
}

.local-poi-list-item nav button {
  min-height: 34px;
  border: 1px solid var(--line);
  border-radius: 12px;
  color: var(--ink);
  background: rgba(255, 255, 255, .72);
  font-size: 11px;
  font-weight: 950;
}

.live-vehicle-card {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 12px 0;
}

.live-vehicle-card div {
  display: grid;
  gap: 5px;
  border: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
  border-radius: 16px;
  padding: 12px;
  background: rgba(255, 255, 255, .62);
}

.live-vehicle-card span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
}

.live-vehicle-card b {
  color: var(--ink);
  font-size: 14px;
}

.mini-profile-sheet {
  display: grid;
  gap: 14px;
}

.mini-vehicle-hero {
  display: grid;
  gap: 12px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--blue) 16%, var(--line));
  border-radius: 26px;
  padding: 12px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.82), rgba(255,255,255,.58)),
    radial-gradient(circle at 18% 8%, color-mix(in srgb, var(--blue) 16%, transparent), transparent 34%);
  box-shadow: 0 18px 44px rgba(29, 29, 31, .1);
}

.mini-vehicle-photo {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 176px;
  overflow: hidden;
  border-radius: 20px;
  background:
    radial-gradient(circle at 28% 20%, rgba(255,255,255,.9), transparent 24%),
    linear-gradient(135deg, #eaf4ff, #c7dcff 48%, #0071e3);
}

.mini-vehicle-photo img {
  width: 100%;
  height: 100%;
  min-height: 176px;
  object-fit: cover;
  display: block;
}

.mini-vehicle-photo > span {
  font-size: 54px;
  filter: drop-shadow(0 12px 20px rgba(29, 29, 31, .18));
}

.mini-vehicle-photo .garage-plate-badge {
  position: absolute;
  left: 12px;
  bottom: 12px;
  box-shadow: 0 10px 24px rgba(29, 29, 31, .16);
}

.mini-vehicle-main {
  display: grid;
  gap: 6px;
}

.mini-vehicle-main > span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 950;
  text-transform: uppercase;
}

.mini-vehicle-main h3 {
  margin: 0;
  color: var(--ink);
  font-size: 24px;
  line-height: 1.08;
}

.mini-profile-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.mini-profile-badges em {
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 5px 8px;
  color: var(--ink);
  background: rgba(255,255,255,.64);
  font-size: 11px;
  font-style: normal;
  font-weight: 900;
}

.mini-profile-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.mini-profile-grid article {
  display: grid;
  gap: 5px;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 12px;
  background: rgba(255,255,255,.62);
}

.mini-profile-grid span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
}

.mini-profile-grid b {
  color: var(--ink);
  font-size: 13px;
  line-height: 1.2;
}

.mini-profile-actions {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.nearby-vehicle-sheet {
  display: grid;
  gap: 10px;
  padding-bottom: calc(env(safe-area-inset-bottom) + 8px);
}

.nearby-vehicle-title {
  align-items: start;
}

.nearby-vehicle-title h2 {
  margin: 2px 0 0;
  font-size: 22px;
  line-height: 1.05;
}

.nearby-vehicle-title-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.nearby-vehicle-title-actions button {
  min-height: 36px;
  border: 1px solid rgba(15, 23, 42, .08);
  border-radius: 999px;
  padding: 0 10px;
  color: #334155;
  background: rgba(255,255,255,.86);
  font-size: 11px;
  font-weight: 900;
}

.nearby-vehicle-icon {
  width: 40px;
  height: 40px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  background: rgba(20, 93, 180, 0.1);
  color: #145db4;
  font-weight: 800;
  border: 1px solid rgba(20, 93, 180, 0.14);
}

.nearby-vehicle-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px;
  border-radius: 18px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.96), rgba(239, 247, 255, .94));
  border: 1px solid rgba(0, 113, 227, 0.12);
  box-shadow: 0 12px 28px rgba(15, 23, 42, .08);
}

.nearby-vehicle-hero.is-stale {
  background: rgba(248, 250, 252, .96);
  border-color: rgba(100, 116, 139, .16);
}

.nearby-vehicle-hero.is-stale em {
  color: #475569;
  background: rgba(100, 116, 139, .1);
  border-color: rgba(100, 116, 139, .14);
}

.nearby-vehicle-hero.is-expired {
  background: rgba(255, 251, 235, .86);
  border-color: rgba(245, 158, 11, .18);
}

.nearby-vehicle-hero.is-expired em {
  color: #92400e;
  background: rgba(245, 158, 11, .12);
  border-color: rgba(245, 158, 11, .18);
}

.nearby-vehicle-hero div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.nearby-vehicle-hero b {
  color: #0f172a;
  font-size: 16px;
}

.nearby-vehicle-hero span,
.nearby-vehicle-privacy {
  color: #64748b;
  font-size: 12px;
  line-height: 1.35;
}

.nearby-vehicle-hero em {
  font-style: normal;
  font-size: 11px;
  font-weight: 800;
  color: #145db4;
  background: rgba(20, 93, 180, 0.09);
  border: 1px solid rgba(20, 93, 180, 0.12);
  border-radius: 999px;
  padding: 5px 8px;
  white-space: nowrap;
}

.nearby-vehicle-actions {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.nearby-vehicle-actions button {
  min-height: 42px;
  border-radius: 15px;
  font-size: 12px;
  font-weight: 950;
}

.nearby-vehicle-actions button.primary {
  border-color: rgba(0, 113, 227, .24);
  color: #fff;
  background: linear-gradient(135deg, var(--blue), #075bb5);
  box-shadow: 0 12px 22px rgba(0, 113, 227, .20);
}

.nearby-vehicle-actions button.secondary {
  border-color: rgba(0, 113, 227, .14);
  color: #0f4f97;
  background: rgba(235, 245, 255, .92);
}

.nearby-vehicle-actions button.tertiary {
  color: #475569;
  background: rgba(255,255,255,.74);
}

.nearby-vehicle-privacy-card {
  display: grid;
  gap: 3px;
  border: 1px solid rgba(15, 23, 42, .07);
  border-radius: 16px;
  padding: 10px 11px;
  background: rgba(255,255,255,.86);
}

.nearby-vehicle-privacy-card p {
  margin: 0;
  color: #475569;
  font-size: 12px;
  font-weight: 760;
  line-height: 1.35;
}

.nearby-reaction-sheet {
  display: grid;
  gap: 12px;
}

.nearby-reaction-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.nearby-reaction-grid button {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  min-height: 54px;
  border: 1px solid rgba(15, 23, 42, .08);
  border-radius: 17px;
  padding: 10px;
  color: #0f172a;
  background: rgba(255,255,255,.9);
  text-align: left;
  font-weight: 900;
}

.nearby-reaction-grid button span {
  font-size: 22px;
}

.nearby-reaction-grid button b {
  min-width: 0;
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fp-marker-spot span {
  color: #1d1d1f;
  background: linear-gradient(135deg, #fff7cc, var(--gold));
}

@keyframes marker-pulse {
  from {
    opacity: .6;
    transform: scale(.76);
  }
  to {
    opacity: 0;
    transform: scale(1.08);
  }
}

.section-block {
  display: grid;
  gap: 10px;
  margin-bottom: 12px;
}

.sheet-nav {
  position: sticky;
  top: 0;
  z-index: 2;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  margin: -2px 0 10px;
  padding: 4px 0 8px;
  background: color-mix(in srgb, var(--panel) 94%, transparent);
}

.sheet-nav h2,
.sheet-nav p {
  margin: 0;
}

.sheet-nav button {
  min-height: 38px;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0 11px;
  color: var(--ink);
  background: rgba(255, 255, 255, .78);
  font-size: 12px;
  font-weight: 950;
}

.channel-row,
.quick-alerts {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  margin: 10px 0;
  padding-bottom: 2px;
}

.channel-row button,
.quick-alerts button {
  flex: 0 0 auto;
  min-height: 32px;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0 12px;
  color: var(--ink);
  background: rgba(255, 255, 255, .58);
  font-size: 12px;
  font-weight: 900;
}

.sheet-status {
  min-height: 18px;
  color: var(--blue);
  font-size: 13px;
  font-weight: 900;
}

.helmet-card {
  display: grid;
  gap: 8px;
  margin: 10px 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background:
    radial-gradient(circle at 92% 8%, color-mix(in srgb, var(--gold) 34%, transparent), transparent 34%),
    color-mix(in srgb, var(--panel) 90%, transparent);
}

.helmet-card span,
.helmet-card small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.helmet-card b {
  display: block;
  margin-top: 2px;
  font-size: 15px;
}

.roadtalk-panel,
.roadtalk-messages,
.roadtalk-composer,
.roadtalk-conditions {
  display: grid;
  gap: 10px;
  margin: 10px 0;
}

.roadtalk-channel-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: start;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 12px;
  background:
    radial-gradient(circle at 96% 8%, color-mix(in srgb, var(--blue) 18%, transparent), transparent 30%),
    color-mix(in srgb, var(--panel) 92%, #fff 8%);
}

.roadtalk-channel-head b {
  display: block;
  font-size: 17px;
}

.roadtalk-channel-head span,
.roadtalk-note,
.roadtalk-message-card small,
.roadtalk-empty {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.35;
}

.roadtalk-channel-head i {
  border-radius: 999px;
  padding: 6px 9px;
  color: var(--muted);
  background: rgba(142, 142, 147, .12);
  font-size: 11px;
  font-style: normal;
  font-weight: 950;
  white-space: nowrap;
}

.roadtalk-channel-head i.online {
  color: #0b6b35;
  background: rgba(52, 199, 89, .16);
}

.roadtalk-gps-button,
.roadtalk-form button,
.roadtalk-confirm button,
.roadtalk-message-card button,
.roadtalk-type-row button {
  min-height: 42px;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 0 12px;
  color: var(--ink);
  background: rgba(255, 255, 255, .76);
  font-weight: 950;
}

.roadtalk-type-row {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 2px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.roadtalk-view-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  margin: 10px 0;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 4px;
  background: rgba(255, 255, 255, .58);
}

.roadtalk-view-tabs button {
  min-height: 40px;
  border: 0;
  border-radius: 12px;
  color: var(--muted);
  background: transparent;
  font-size: 13px;
  font-weight: 950;
}

.roadtalk-view-tabs button.active {
  color: #fff;
  background: var(--blue);
  box-shadow: 0 8px 18px rgba(0, 113, 227, .16);
}

.roadtalk-type-row::-webkit-scrollbar { display: none; }

.roadtalk-type-row button {
  flex: 0 0 auto;
}

.roadtalk-type-row button.active,
.roadtalk-form button[type="submit"],
.roadtalk-confirm button:first-child {
  border-color: color-mix(in srgb, var(--blue) 42%, var(--line));
  color: #fff;
  background: var(--blue);
}

.roadtalk-message-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 11px;
  background: rgba(255, 255, 255, .72);
}

.road-condition-card {
  border: 1px solid var(--line);
  border-left: 4px solid var(--blue);
  border-radius: 16px;
  padding: 12px;
  background: rgba(255, 255, 255, .74);
}

.road-condition-card.severity-high,
.road-condition-card.severity-critical {
  border-left-color: #ff3b30;
}

.road-condition-card.severity-medium {
  border-left-color: #ff9f0a;
}

.road-condition-card span {
  display: inline-flex;
  width: fit-content;
  border-radius: 999px;
  padding: 3px 7px;
  color: var(--blue);
  background: color-mix(in srgb, var(--blue) 10%, transparent);
  font-size: 10px;
  font-weight: 950;
  text-transform: uppercase;
}

.road-condition-card b {
  display: block;
  margin: 6px 0 3px;
  font-size: 15px;
  line-height: 1.24;
}

.road-condition-card small,
.road-condition-card em,
.road-condition-card p,
.road-condition-attribution,
.road-condition-disclaimer {
  display: block;
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
  line-height: 1.35;
}

.road-condition-card p {
  color: var(--ink);
  font-weight: 760;
}

.road-condition-disclaimer {
  color: color-mix(in srgb, var(--ink) 72%, var(--muted));
}

.roadtalk-message-card span {
  display: inline-flex;
  width: fit-content;
  border-radius: 999px;
  padding: 3px 7px;
  color: var(--blue);
  background: color-mix(in srgb, var(--blue) 10%, transparent);
  font-size: 10px;
  font-weight: 950;
  text-transform: uppercase;
}

.roadtalk-message-card b {
  display: block;
  margin: 5px 0 3px;
  font-size: 15px;
  line-height: 1.25;
}

.roadtalk-message-card button {
  min-height: 34px;
  border-radius: 999px;
  color: var(--muted);
  font-size: 12px;
}

.roadtalk-empty,
.roadtalk-confirm {
  border: 1px dashed var(--line);
  border-radius: 16px;
  padding: 12px;
  background: rgba(255, 255, 255, .58);
}

.roadtalk-confirm {
  display: grid;
  gap: 8px;
}

.roadtalk-confirm p {
  margin: 0;
  color: var(--ink);
  font-size: 14px;
  font-weight: 850;
}

.roadtalk-confirm div {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.roadtalk-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 42px auto;
  gap: 7px;
  align-items: center;
}

.roadtalk-form input {
  width: 100%;
  min-height: 44px;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 0 12px;
  color: var(--ink);
  background: rgba(255, 255, 255, .82);
  font: inherit;
  font-weight: 850;
}

.roadtalk-form .inline-mic-ai {
  width: 42px;
  height: 42px;
  min-height: 42px;
  padding: 0;
}

.roadtalk-form button:disabled,
.roadtalk-gps-button:disabled {
  opacity: .55;
}

.roadtalk-radio-nav {
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 6px;
  padding: 2px 2px 6px;
}

.roadtalk-radio-nav button {
  min-height: 34px;
  border-radius: 999px;
  padding: 0 10px;
  font-size: 11px;
}

.roadtalk-radio-nav span {
  display: block;
  margin-top: 1px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 820;
  line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.roadtalk-radio-nav h2 {
  margin: 0;
  font-size: 19px;
  line-height: 1.08;
}

.roadtalk-status-pill {
  border-radius: 999px;
  max-width: 118px;
  padding: 4px 7px;
  color: #667085;
  background: rgba(142, 142, 147, .12);
  font-size: 9.5px;
  font-style: normal;
  font-weight: 950;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.roadtalk-status-pill.ready {
  color: var(--blue);
  background: rgba(0, 113, 227, .10);
}

.roadtalk-status-pill.listening {
  color: #047857;
  background: rgba(16, 185, 129, .14);
}

.roadtalk-status-pill.gps {
  color: #b54708;
  background: rgba(245, 158, 11, .14);
}

.roadtalk-radio-shell {
  display: grid;
  gap: 8px;
  min-height: 0;
  overflow-y: auto;
  padding-bottom: calc(env(safe-area-inset-bottom) + 10px);
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
}

.roadtalk-sheet-grabber {
  display: grid;
  place-items: center;
  width: 100%;
  min-height: 22px;
  border: 0;
  padding: 0;
  background: transparent;
  cursor: grab;
  touch-action: none;
}

.roadtalk-sheet-grabber span {
  width: 42px;
  height: 5px;
  border-radius: 999px;
  background: rgba(15, 23, 42, .18);
}

.roadtalk-radio-nav,
.roadtalk-broadcast-head {
  cursor: grab;
  touch-action: none;
  user-select: none;
}

.roadtalk-radio-nav button,
.roadtalk-broadcast-head button {
  touch-action: manipulation;
}

input[data-roadtalk-static-volume] {
  touch-action: pan-x;
}

.roadtalk-mini-summary {
  display: none;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-height: 58px;
  border: 1px solid rgba(15, 23, 42, .08);
  border-radius: 19px;
  padding: 9px 10px;
  color: var(--ink);
  background: rgba(255, 255, 255, .88);
  font: inherit;
  text-align: left;
}

.roadtalk-mini-summary b,
.roadtalk-mini-summary small {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.roadtalk-mini-summary b {
  font-size: 14px;
  font-weight: 950;
}

.roadtalk-mini-summary small {
  margin-top: 2px;
  color: #667085;
  font-size: 11px;
  font-weight: 850;
}

.roadtalk-mini-summary i {
  border-radius: 999px;
  padding: 7px 9px;
  color: var(--blue);
  background: rgba(0, 113, 227, .10);
  font-size: 10px;
  font-style: normal;
  font-weight: 950;
}

.roadtalk-radio-card {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  border: 1px solid rgba(15, 23, 42, .08);
  border-radius: 18px;
  padding: 10px;
  background:
    radial-gradient(circle at 16% 18%, rgba(0, 113, 227, .13), transparent 36%),
    linear-gradient(135deg, rgba(255, 255, 255, .96), rgba(239, 247, 255, .88));
  box-shadow: 0 8px 22px rgba(15, 23, 42, .06);
}

.roadtalk-radio-card.listening {
  border-color: rgba(16, 185, 129, .20);
  background:
    radial-gradient(circle at 16% 18%, rgba(16, 185, 129, .18), transparent 38%),
    linear-gradient(135deg, rgba(255, 255, 255, .97), rgba(237, 252, 246, .9));
}

.roadtalk-radio-card.needs-gps {
  border-color: rgba(245, 158, 11, .16);
  background:
    radial-gradient(circle at 16% 18%, rgba(245, 158, 11, .14), transparent 38%),
    rgba(255, 255, 255, .94);
}

.fp-roadtalk-radio-card.private {
  border-color: rgba(99, 102, 241, .18);
  background:
    radial-gradient(circle at 18% 16%, rgba(99, 102, 241, .16), transparent 38%),
    linear-gradient(135deg, rgba(255, 255, 255, .97), rgba(241, 245, 255, .92));
}

.fp-roadtalk-radio-card.fp-roadtalk-speaking {
  border-color: rgba(0, 113, 227, .28);
  box-shadow: 0 18px 42px rgba(0, 113, 227, .14);
}

.roadtalk-channel-status-strip {
  grid-template-columns: auto minmax(0, 1fr);
  gap: 9px;
  border-color: rgba(15, 23, 42, .06);
  border-radius: 15px;
  padding: 8px 9px;
  background: rgba(255, 255, 255, .70);
  box-shadow: none;
}

.roadtalk-channel-pill {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  color: #fff;
  background: linear-gradient(135deg, #07111e, var(--blue));
  box-shadow: 0 8px 18px rgba(0, 113, 227, .18);
  font-size: 11px;
  font-weight: 1000;
}

.roadtalk-channel-status-strip .roadtalk-radio-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.roadtalk-channel-status-strip .roadtalk-radio-title-row em {
  flex: 0 0 auto;
  border-radius: 999px;
  padding: 4px 7px;
  color: var(--blue);
  background: rgba(0, 113, 227, .08);
  font-size: 10px;
  font-style: normal;
  font-weight: 950;
}

.roadtalk-channel-status-strip b {
  font-size: 15px;
}

.roadtalk-channel-status-strip .roadtalk-channel-context {
  margin-top: 1px;
  font-size: 12px;
}

.roadtalk-channel-status-strip small {
  margin-top: 2px;
  font-size: 11px;
}

.roadtalk-channel-status-strip .roadtalk-channel-state {
  margin-top: 4px;
}

.roadtalk-channel-status-strip .fp-roadtalk-eq {
  display: none;
}

.roadtalk-radio-orb {
  position: relative;
  width: 60px;
  height: 60px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  color: #fff;
  background: linear-gradient(135deg, #07111e, var(--blue) 56%, #34c759);
  box-shadow: 0 12px 26px rgba(0, 113, 227, .22);
}

.roadtalk-radio-orb span {
  position: relative;
  z-index: 2;
  font-size: 17px;
  font-weight: 950;
  letter-spacing: 0;
}

.roadtalk-radio-orb i {
  position: absolute;
  inset: -8px;
  border: 1px solid rgba(0, 113, 227, .18);
  border-radius: 999px;
  animation: roadTalkRipple 2.8s ease-out infinite;
}

.roadtalk-radio-orb i + i {
  animation-delay: 1.35s;
}

@keyframes roadTalkRipple {
  0% {
    opacity: .58;
    transform: scale(.82);
  }
  75% {
    opacity: 0;
    transform: scale(1.22);
  }
  100% {
    opacity: 0;
    transform: scale(1.22);
  }
}

.roadtalk-radio-card b {
  display: block;
  color: var(--ink);
  font-size: 17px;
  line-height: 1.08;
  font-weight: 950;
}

.roadtalk-channel-context {
  display: block;
  margin-top: 3px;
  color: var(--ink);
  font-size: 14px;
  line-height: 1.12;
  font-weight: 950;
}

.roadtalk-channel-state {
  display: inline-flex;
  width: fit-content;
  margin-top: 5px;
  border-radius: 999px;
  padding: 3px 7px;
  color: #475467;
  background: rgba(15, 23, 42, .06);
  font-size: 10px;
  font-style: normal;
  font-weight: 950;
}

.roadtalk-radio-card small {
  display: block;
  margin-top: 5px;
  color: #667085;
  font-size: 12px;
  line-height: 1.32;
  font-weight: 800;
}

.roadtalk-channel-id {
  display: inline-flex;
  width: fit-content;
  max-width: 100%;
  margin-top: 5px;
  border-radius: 999px;
  padding: 2px 7px;
  color: var(--blue);
  background: rgba(0, 113, 227, .09);
  font-size: 10px;
  font-style: normal;
  font-weight: 950;
  white-space: nowrap;
}

.fp-roadtalk-eq {
  display: flex;
  align-items: end;
  gap: 4px;
  height: 18px;
  margin-top: 7px;
}

.fp-roadtalk-eq i {
  width: 4px;
  height: 7px;
  border-radius: 999px;
  background: rgba(0, 113, 227, .22);
  transform-origin: bottom;
}

.fp-roadtalk-eq-active i {
  animation: fpRoadTalkEq 1.45s ease-in-out infinite;
}

.fp-roadtalk-eq-active i:nth-child(2) { animation-delay: .12s; }
.fp-roadtalk-eq-active i:nth-child(3) { animation-delay: .24s; }
.fp-roadtalk-eq-active i:nth-child(4) { animation-delay: .36s; }
.fp-roadtalk-eq-active i:nth-child(5) { animation-delay: .48s; }
.fp-roadtalk-eq-active i:nth-child(6) { animation-delay: .6s; }

.fp-roadtalk-eq.fp-roadtalk-speaking i {
  background: rgba(52, 199, 89, .58);
  animation-duration: .62s;
}

@keyframes fpRoadTalkEq {
  0%, 100% { transform: scaleY(.55); opacity: .55; }
  45% { transform: scaleY(2.55); opacity: 1; }
}

.fp-roadtalk-channel-toggle,
.roadtalk-radius-row {
  display: grid;
  gap: 6px;
}

.fp-roadtalk-channel-toggle {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.roadtalk-control-group {
  display: grid;
  gap: 7px;
  border: 1px solid rgba(15, 23, 42, .06);
  border-radius: 16px;
  padding: 8px;
  background: rgba(255, 255, 255, .58);
}

.roadtalk-control-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.roadtalk-control-head b {
  color: var(--ink);
  font-size: 12px;
  font-weight: 950;
}

.roadtalk-control-head small {
  color: #667085;
  font-size: 10.5px;
  font-weight: 820;
  text-align: right;
}

.roadtalk-channel-mode-toggle button {
  display: grid;
  place-items: center;
  gap: 1px;
  min-height: 38px;
}

.roadtalk-channel-mode-toggle button b,
.roadtalk-channel-mode-toggle button small {
  line-height: 1.05;
}

.roadtalk-channel-mode-toggle button b {
  font-size: 11px;
  font-weight: 950;
}

.roadtalk-channel-mode-toggle button small {
  color: inherit;
  opacity: .68;
  font-size: 9.5px;
  font-weight: 850;
}

.roadtalk-channel-mode-toggle button:disabled {
  cursor: default;
  opacity: .62;
}

.roadtalk-radius-row {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.fp-roadtalk-channel-toggle::-webkit-scrollbar,
.roadtalk-radius-row::-webkit-scrollbar {
  display: none;
}

.fp-roadtalk-channel-toggle button,
.roadtalk-radius-row button,
.roadtalk-private-placeholder button {
  min-height: 34px;
  border: 1px solid rgba(15, 23, 42, .08);
  border-radius: 999px;
  padding: 0 10px;
  color: #475467;
  background: rgba(255, 255, 255, .82);
  font: inherit;
  font-size: 11px;
  font-weight: 950;
  white-space: nowrap;
}

.fp-roadtalk-channel-toggle button.active,
.roadtalk-radius-row button.active {
  border-color: rgba(0, 113, 227, .22);
  color: var(--blue);
  background: rgba(0, 113, 227, .10);
}

.fp-roadtalk-volume {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  gap: 9px;
  align-items: center;
  min-height: 46px;
  border: 1px solid rgba(15, 23, 42, .07);
  border-radius: 18px;
  padding: 8px 10px;
  background: rgba(255, 255, 255, .76);
}

.fp-roadtalk-volume span,
.fp-roadtalk-volume b {
  color: #475467;
  font-size: 11px;
  font-weight: 950;
  white-space: nowrap;
}

.roadtalk-dev-info {
  border: 1px dashed rgba(0, 113, 227, .18);
  border-radius: 16px;
  padding: 9px 10px;
  color: #667085;
  background: rgba(255, 255, 255, .62);
}

.roadtalk-dev-info summary {
  cursor: pointer;
  color: #475467;
  font-size: 11px;
  font-weight: 950;
}

.roadtalk-dev-info dl {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  margin: 9px 0;
}

.roadtalk-dev-info div {
  min-width: 0;
}

.roadtalk-dev-info dt,
.roadtalk-dev-info dd {
  margin: 0;
  font-size: 10px;
  line-height: 1.25;
}

.roadtalk-dev-info dt {
  color: #667085;
  font-weight: 800;
}

.roadtalk-dev-info dd {
  color: var(--ink);
  font-weight: 950;
}

.roadtalk-dev-info button {
  min-height: 32px;
  border: 1px solid rgba(15, 23, 42, .08);
  border-radius: 999px;
  padding: 0 10px;
  background: rgba(255, 255, 255, .9);
  color: #475467;
  font: inherit;
  font-size: 11px;
  font-weight: 950;
}

.roadtalk-sound-settings {
  display: grid;
  gap: 10px;
  border: 1px solid rgba(0, 113, 227, .12);
  border-radius: 18px;
  padding: 11px;
  background:
    radial-gradient(circle at 12% 0%, rgba(0, 113, 227, .08), transparent 30%),
    rgba(255, 255, 255, .72);
}

.roadtalk-sound-settings legend {
  padding: 0 5px;
  color: var(--ink);
  font-size: 12px;
  font-weight: 950;
}

.roadtalk-sound-volume {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  min-height: 40px;
  color: #475467;
  font-size: 11px;
  font-weight: 950;
}

.roadtalk-sound-volume input {
  width: 100%;
  accent-color: var(--blue);
}

.roadtalk-sound-tests {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

.roadtalk-sound-tests button {
  min-height: 36px;
  border: 1px solid rgba(15, 23, 42, .08);
  border-radius: 999px;
  padding: 0 10px;
  color: var(--ink);
  background: rgba(255, 255, 255, .9);
  font: inherit;
  font-size: 11px;
  font-weight: 950;
}

.roadtalk-sound-settings small {
  color: #667085;
  font-size: 10.5px;
  font-weight: 850;
}

.fp-roadtalk-volume input {
  width: 100%;
  accent-color: var(--blue);
}

.fp-roadtalk-volume button {
  min-height: 32px;
  border: 1px solid rgba(15, 23, 42, .08);
  border-radius: 999px;
  padding: 0 10px;
  color: var(--ink);
  background: rgba(255, 255, 255, .9);
  font: inherit;
  font-size: 11px;
  font-weight: 950;
}

.roadtalk-private-placeholder,
.roadtalk-product-note {
  border: 1px solid rgba(15, 23, 42, .07);
  border-radius: 16px;
  padding: 10px;
  background: rgba(255, 255, 255, .82);
}

.roadtalk-private-placeholder {
  display: grid;
  gap: 7px;
}

.roadtalk-private-placeholder b {
  color: var(--ink);
  font-size: 14px;
  font-weight: 950;
}

.roadtalk-private-placeholder span,
.roadtalk-product-note {
  color: #667085;
  font-size: 12px;
  line-height: 1.35;
  font-weight: 800;
}

.roadtalk-background-note {
  margin: -2px 0 0;
  color: #667085;
  font-size: 11px;
  line-height: 1.35;
  font-weight: 800;
}

.roadtalk-event-banner {
  position: fixed;
  top: calc(env(safe-area-inset-top) + 84px);
  left: 50%;
  z-index: 180;
  display: grid;
  grid-template-columns: 9px auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  width: min(420px, calc(100vw - 24px));
  min-height: 44px;
  border: 1px solid rgba(16, 185, 129, .18);
  border-radius: 999px;
  padding: 7px 10px;
  color: var(--ink);
  background: color-mix(in srgb, var(--panel) 92%, transparent);
  box-shadow: 0 14px 34px rgba(15, 23, 42, .16);
  backdrop-filter: blur(14px);
  transform: translateX(-50%);
  font: inherit;
  text-align: left;
}

.roadtalk-event-banner span {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #10b981;
  box-shadow: 0 0 0 5px rgba(16, 185, 129, .14);
  animation: fpRoadTalkNavPulse 1.25s ease-in-out infinite;
}

.roadtalk-event-banner b,
.roadtalk-event-banner small,
.roadtalk-event-banner em {
  min-width: 0;
  white-space: nowrap;
}

.roadtalk-event-banner b {
  font-size: 12px;
  font-weight: 950;
}

.roadtalk-event-banner small {
  overflow: hidden;
  color: #475467;
  font-size: 11px;
  font-weight: 820;
  text-overflow: ellipsis;
}

.roadtalk-event-banner em {
  border-radius: 999px;
  padding: 5px 8px;
  color: var(--blue);
  background: rgba(0, 113, 227, .09);
  font-size: 10px;
  font-style: normal;
  font-weight: 950;
}

body.drive-mode-active .roadtalk-event-banner {
  top: calc(env(safe-area-inset-top) + 54px);
  width: min(320px, calc(100vw - 24px));
  min-height: 38px;
  padding: 5px 9px;
}

.roadtalk-radio-controls {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.roadtalk-live-audio-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  border: 1px solid rgba(0, 113, 227, .12);
  border-radius: 22px;
  padding: 12px;
  background:
    radial-gradient(circle at 100% 0%, rgba(0, 113, 227, .13), transparent 38%),
    rgba(255, 255, 255, .62);
  box-shadow: 0 14px 34px rgba(15, 23, 42, .08);
}

.roadtalk-live-audio-panel div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.roadtalk-live-audio-panel span,
.roadtalk-live-audio-panel small,
.roadtalk-live-audio-panel em {
  color: #64748b;
  font-size: 11px;
  font-style: normal;
  font-weight: 850;
  line-height: 1.25;
}

.roadtalk-live-audio-panel b {
  color: #0f172a;
  font-size: 18px;
  line-height: 1.15;
}

.roadtalk-live-audio-panel > button {
  display: grid;
  place-items: center;
  gap: 4px;
  width: 108px;
  height: 108px;
  border: 0;
  border-radius: 999px;
  color: #fff;
  background:
    radial-gradient(circle at 35% 22%, rgba(255, 255, 255, .28), transparent 34%),
    linear-gradient(135deg, #061526, #0071e3 58%, #10b981);
  box-shadow: 0 20px 44px rgba(0, 113, 227, .28);
  touch-action: none;
}

.roadtalk-live-audio-panel > button span,
.roadtalk-live-audio-panel > button b {
  color: #fff;
}

.roadtalk-live-audio-panel > button span {
  font-size: 18px;
  font-weight: 1000;
}

.roadtalk-live-audio-panel > button b {
  max-width: 82px;
  font-size: 12px;
  line-height: 1.05;
  text-align: center;
}

.roadtalk-live-audio-panel > em {
  grid-column: 1 / -1;
  margin-top: -3px;
  font-size: 10.5px;
}

.roadtalk-live-audio-panel .roadtalk-audio-unlock-cta {
  grid-column: 1 / -1;
  width: 100%;
  height: auto;
  min-height: 40px;
  border: 1px solid rgba(0, 113, 227, .18);
  border-radius: 14px;
  padding: 0 12px;
  color: #064e9b;
  background: rgba(255, 255, 255, .86);
  box-shadow: none;
  font-size: 12px;
  font-weight: 950;
  touch-action: manipulation;
}

.roadtalk-resume-cta {
  display: grid;
  gap: 3px;
  width: 100%;
  border: 1px solid rgba(0, 113, 227, .22);
  border-radius: 16px;
  padding: 12px 14px;
  color: #063d78;
  background:
    radial-gradient(circle at 12% 20%, rgba(0, 113, 227, .14), transparent 42%),
    rgba(255, 255, 255, .92);
  box-shadow: 0 12px 28px rgba(0, 113, 227, .12);
  text-align: left;
  touch-action: manipulation;
}

.roadtalk-resume-cta b {
  font-size: 15px;
  font-weight: 1000;
}

.roadtalk-resume-cta small {
  color: #475467;
  font-size: 12px;
  font-weight: 850;
}

.roadtalk-live-dev-note {
  grid-column: 1 / -1;
  border: 1px solid rgba(15, 23, 42, .08);
  border-radius: 14px;
  padding: 8px 10px;
  background: rgba(255, 255, 255, .72);
}

.roadtalk-live-dev-note summary {
  color: #475467;
  cursor: pointer;
  font-size: 11px;
  font-weight: 950;
}

.roadtalk-live-dev-note small {
  display: block;
  margin-top: 4px;
}

.roadtalk-live-audio-panel.speaking > button {
  background: linear-gradient(135deg, #ef4444, #dc2626);
  box-shadow: 0 18px 42px rgba(239, 68, 68, .28);
  animation: fpRoadTalkLivePulse 1s ease-in-out infinite;
}

.roadtalk-live-audio-panel.cooldown > button,
.roadtalk-live-audio-panel.receiving > button,
.roadtalk-live-audio-panel > button:disabled {
  opacity: .72;
  box-shadow: 0 10px 22px rgba(15, 23, 42, .12);
}

@keyframes fpRoadTalkLivePulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.045); }
}

.roadtalk-radio-controls button,
.roadtalk-quick-categories button,
.roadtalk-gps-empty button,
.roadtalk-broadcast-form button,
.roadtalk-broadcast-categories button {
  min-height: 40px;
  border: 1px solid rgba(15, 23, 42, .08);
  border-radius: 16px;
  padding: 0 12px;
  color: var(--ink);
  background: rgba(255, 255, 255, .86);
  font: inherit;
  font-size: 12px;
  font-weight: 950;
}

.roadtalk-radio-controls button:first-child,
.roadtalk-radio-controls button.active,
.roadtalk-broadcast-form button[type="submit"] {
  border-color: var(--blue);
  color: #fff;
  background: var(--blue);
  box-shadow: 0 10px 24px rgba(0, 113, 227, .16);
}

.roadtalk-radio-controls button:last-child:not(:first-child) {
  color: #667085;
  border-radius: 999px;
  background: rgba(255, 255, 255, .68);
}

.roadtalk-quick-categories,
.roadtalk-broadcast-categories {
  display: flex;
  gap: 7px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding: 1px 4px 3px 0;
  scrollbar-width: none;
}

.roadtalk-quick-categories::-webkit-scrollbar,
.roadtalk-broadcast-categories::-webkit-scrollbar {
  display: none;
}

.roadtalk-quick-categories button,
.roadtalk-broadcast-categories button {
  flex: 0 0 auto;
  min-height: 38px;
  border-radius: 999px;
  font-size: 11px;
}

.roadtalk-broadcast-categories button.active {
  border-color: var(--blue);
  color: #fff;
  background: var(--blue);
}

.roadtalk-gps-empty {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  border-style: solid;
  background: rgba(255, 255, 255, .9);
}

.roadtalk-gps-empty b {
  color: var(--ink);
  font-size: 13px;
  line-height: 1.3;
}

.roadtalk-messages {
  margin: 0;
}

.roadtalk-filter-row,
.roadtalk-sort-row {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding: 1px 2px 5px 0;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.roadtalk-filter-row::-webkit-scrollbar,
.roadtalk-sort-row::-webkit-scrollbar {
  display: none;
}

.roadtalk-filter-row button,
.roadtalk-sort-row button,
.roadtalk-half-activity button {
  flex: 0 0 auto;
  min-height: 30px;
  border: 1px solid rgba(15, 23, 42, .08);
  border-radius: 999px;
  padding: 0 9px;
  color: #475467;
  background: rgba(255, 255, 255, .76);
  font: inherit;
  font-size: 10.5px;
  font-weight: 950;
  white-space: nowrap;
}

.roadtalk-filter-row button.active {
  border-color: rgba(0, 113, 227, .22);
  color: var(--blue);
  background: rgba(0, 113, 227, .10);
}

.roadtalk-sort-row {
  align-items: center;
  justify-content: space-between;
  overflow: visible;
  padding-bottom: 3px;
}

.roadtalk-sort-row span {
  color: #667085;
  font-size: 11px;
  font-weight: 900;
}

.roadtalk-half-activity {
  display: none;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  border: 1px solid rgba(15, 23, 42, .07);
  border-radius: 16px;
  padding: 9px 10px;
  background: rgba(255, 255, 255, .82);
}

.roadtalk-half-activity b,
.roadtalk-half-activity span {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.roadtalk-half-activity b {
  color: var(--ink);
  font-size: 13px;
  font-weight: 950;
}

.roadtalk-half-activity span {
  margin-top: 2px;
  color: #667085;
  font-size: 11px;
  font-weight: 820;
}

.roadtalk-message-card {
  border-color: rgba(15, 23, 42, .07);
  background: rgba(255, 255, 255, .9);
  box-shadow: none;
  padding: 9px 10px;
  border-radius: 14px;
}

.roadtalk-activity-card {
  align-items: start;
  border-left: 3px solid rgba(0, 113, 227, .28);
}

.roadtalk-activity-card.important,
.roadtalk-activity-card.help,
.roadtalk-activity-card.general {
  border-left-color: rgba(255, 59, 48, .42);
}

.roadtalk-activity-card.traffic {
  border-left-color: rgba(255, 159, 10, .46);
}

.roadtalk-activity-card.spot {
  border-left-color: rgba(52, 199, 89, .42);
}

.roadtalk-transcript-meta {
  display: block;
}

.roadtalk-transcript-ttl {
  display: inline-flex;
  width: fit-content;
  margin-top: 6px;
  border-radius: 999px;
  padding: 4px 8px;
  color: #0f766e;
  background: rgba(20, 184, 166, .12);
  font-size: 10px;
  font-style: normal;
  font-weight: 950;
  white-space: nowrap;
}

.roadtalk-message-card nav {
  display: flex;
  gap: 5px;
  justify-items: end;
  justify-content: flex-end;
}

.roadtalk-message-card nav button {
  min-width: 32px;
  min-height: 30px;
  border-radius: 999px;
  padding: 0 8px;
  font-size: 10px;
  white-space: nowrap;
}

.roadtalk-message-card nav button:first-child {
  color: #047857;
  background: rgba(16, 185, 129, .10);
}

.roadtalk-message-card nav button:last-child {
  color: #667085;
  background: rgba(142, 142, 147, .10);
}

.roadtalk-broadcast-sheet {
  display: grid;
  gap: 10px;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
}

.roadtalk-broadcast-form {
  display: grid;
  gap: 9px;
  border-radius: 18px;
  padding: 2px;
  background: rgba(255, 255, 255, .96);
}

.roadtalk-broadcast-form label {
  display: grid;
  gap: 5px;
  color: var(--ink);
  font-size: 12px;
  font-weight: 900;
}

.roadtalk-broadcast-form textarea {
  width: 100%;
  min-height: 68px;
  border: 1px solid rgba(15, 23, 42, .10);
  border-radius: 14px;
  padding: 10px 11px;
  color: var(--ink);
  background: rgba(255, 255, 255, .92);
  font: inherit;
  font-size: 14px;
  font-weight: 820;
  resize: vertical;
}

.roadtalk-broadcast-head {
  align-items: center;
  min-height: auto;
}

.roadtalk-broadcast-head h2 {
  margin: 1px 0 2px;
}

.roadtalk-broadcast-head span {
  font-size: 12px;
  line-height: 1.25;
}

.roadtalk-broadcast-head button {
  min-height: 36px;
  border-radius: 999px;
  padding: 0 11px;
  font-size: 12px;
}

.roadtalk-broadcast-form .group-choice {
  display: grid;
  gap: 6px;
  margin: 0;
  border: 0;
  padding: 0;
  min-inline-size: 0;
}

.roadtalk-broadcast-form .group-choice legend {
  padding: 0;
  color: var(--ink);
  font-size: 12px;
  font-weight: 950;
}

.roadtalk-broadcast-form .fp-roadtalk-channel-toggle {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

.roadtalk-broadcast-form .fp-roadtalk-channel-toggle button {
  min-height: 44px;
  border-radius: 15px;
  padding: 6px 9px;
  text-align: left;
  white-space: normal;
}

.roadtalk-broadcast-form .fp-roadtalk-channel-toggle button b,
.roadtalk-broadcast-form .fp-roadtalk-channel-toggle button small {
  display: block;
  line-height: 1.12;
}

.roadtalk-broadcast-form .fp-roadtalk-channel-toggle button b {
  font-size: 12px;
}

.roadtalk-broadcast-form .fp-roadtalk-channel-toggle button small {
  margin-top: 2px;
  color: color-mix(in srgb, var(--ink) 62%, var(--muted));
  font-size: 10px;
  font-weight: 850;
}

.roadtalk-broadcast-form .fp-roadtalk-channel-toggle button.active small {
  color: rgba(255, 255, 255, .82);
}

.roadtalk-broadcast-form .roadtalk-broadcast-categories {
  gap: 6px;
  padding-bottom: 1px;
  flex-wrap: nowrap;
}

.roadtalk-broadcast-form .roadtalk-broadcast-categories button {
  min-height: 30px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 11px;
}

.roadtalk-broadcast-help,
.roadtalk-broadcast-statusline {
  margin: -1px 0 0;
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
  line-height: 1.3;
}

.roadtalk-broadcast-statusline {
  justify-self: center;
  border-radius: 999px;
  padding: 4px 9px;
  background: rgba(142, 142, 147, .10);
}

.roadtalk-range-dev-info {
  margin-top: 0;
  padding: 8px 9px;
  border-radius: 14px;
}

.roadtalk-range-dev-info p {
  margin: 6px 0 0;
  color: #667085;
  font-size: 10.5px;
  line-height: 1.35;
  font-weight: 820;
}

.roadtalk-voice-mock-panel {
  display: none;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  border: 1px solid rgba(0, 113, 227, .14);
  border-radius: 14px;
  padding: 8px 9px;
  background: rgba(0, 113, 227, .06);
}

.roadtalk-voice-mock-panel b,
.roadtalk-voice-mock-panel span {
  display: block;
}

.roadtalk-voice-mock-panel b {
  font-size: 12px;
}

.roadtalk-voice-mock-panel span {
  margin-top: 2px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 820;
}

.roadtalk-voice-mock-panel span:empty {
  display: none;
}

.roadtalk-voice-mock-panel button {
  min-height: 34px;
  border-radius: 999px;
  padding: 0 10px;
  color: var(--blue);
  background: rgba(255, 255, 255, .82);
  box-shadow: none;
}

.roadtalk-broadcast-form.is-voice-mode .roadtalk-broadcast-text-field {
  display: none;
}

.roadtalk-broadcast-form.is-voice-mode .roadtalk-voice-mock-panel {
  display: grid;
}

.roadtalk-broadcast-form .sheet-actions {
  gap: 8px;
}

.roadtalk-broadcast-form .sheet-actions button {
  min-height: 42px;
  border-radius: 14px;
}

.roadtalk-settings-head {
  margin-bottom: 8px;
}

.roadtalk-settings-form {
  display: grid;
  gap: 10px;
}

.roadtalk-settings-channel,
.roadtalk-settings-city,
.roadtalk-settings-section,
.roadtalk-moderation-settings {
  border: 1px solid rgba(15, 23, 42, .08) !important;
  border-radius: 16px;
  padding: 10px !important;
  background: rgba(255, 255, 255, .82);
}

.roadtalk-settings-account,
.roadtalk-account-card {
  display: grid;
  gap: 8px;
  border: 1px solid rgba(15, 23, 42, .10);
  border-radius: 16px;
  padding: 10px;
  background: linear-gradient(135deg, rgba(255, 255, 255, .96), rgba(239, 248, 255, .92));
  box-shadow: 0 10px 26px rgba(15, 23, 42, .08);
}

.roadtalk-settings-account {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
}

.roadtalk-settings-account span,
.roadtalk-account-card span,
.roadtalk-auth-note,
.roadtalk-dev-code {
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
}

.roadtalk-settings-account b,
.roadtalk-account-card b {
  display: block;
  margin-top: 2px;
  color: var(--ink);
  font-size: 14px;
  font-weight: 950;
}

.roadtalk-settings-account small {
  display: block;
  margin-top: 2px;
  color: #667085;
  font-size: 11px;
  font-weight: 780;
  line-height: 1.25;
}

.roadtalk-settings-account button,
.roadtalk-auth-return {
  min-height: 36px;
  border-radius: 999px;
  padding: 0 13px;
  color: #fff;
  background: var(--blue);
  box-shadow: 0 8px 18px rgba(0, 113, 227, .20);
}

.roadtalk-auth-sheet {
  display: grid;
  gap: 12px;
}

.roadtalk-auth-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.roadtalk-auth-head h2 {
  margin: 2px 0 3px;
  color: var(--ink);
  font-size: 22px;
  line-height: 1.05;
}

.roadtalk-auth-head span {
  display: block;
  color: #667085;
  font-size: 12px;
  font-weight: 780;
  line-height: 1.32;
}

.roadtalk-auth-head button {
  min-height: 36px;
  border-radius: 999px;
  padding: 0 12px;
  color: var(--ink);
  background: rgba(142, 142, 147, .12);
  box-shadow: none;
}

.roadtalk-account-card {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.roadtalk-auth-form {
  display: grid;
  gap: 10px;
}

.roadtalk-auth-form label,
.roadtalk-auth-form fieldset {
  display: grid;
  gap: 6px;
  margin: 0;
  border: 0;
  padding: 0;
  min-inline-size: 0;
  color: var(--ink);
  font-size: 12px;
  font-weight: 900;
}

.roadtalk-auth-form input {
  width: 100%;
  min-height: 42px;
  border: 1px solid rgba(15, 23, 42, .10);
  border-radius: 14px;
  padding: 0 11px;
  color: var(--ink);
  background: rgba(255, 255, 255, .94);
  font: inherit;
  font-size: 14px;
  font-weight: 820;
}

.roadtalk-auth-form legend {
  padding: 0;
  color: var(--ink);
  font-size: 12px;
  font-weight: 950;
}

.roadtalk-auth-inline {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 8px;
}

.roadtalk-auth-inline button,
.roadtalk-auth-form .sheet-actions button {
  min-height: 40px;
  border-radius: 14px;
}

.roadtalk-dev-code,
.roadtalk-auth-note {
  margin: -2px 0 0;
}

.roadtalk-dev-account {
  border: 1px dashed rgba(15, 23, 42, .14);
  border-radius: 14px;
  padding: 8px 9px;
  background: rgba(248, 250, 252, .82);
}

.roadtalk-dev-account summary {
  cursor: pointer;
  color: #667085;
  font-size: 11px;
  font-weight: 900;
}

.roadtalk-dev-account label {
  margin-top: 8px;
}

.roadtalk-settings-form label,
.roadtalk-settings-form fieldset {
  display: grid;
  gap: 6px;
  margin: 0;
  border: 0;
  padding: 0;
  min-inline-size: 0;
  color: var(--ink);
  font-size: 12px;
  font-weight: 900;
}

.roadtalk-settings-form input,
.roadtalk-settings-form select {
  width: 100%;
  min-height: 42px;
  border: 1px solid rgba(15, 23, 42, .10);
  border-radius: 14px;
  padding: 0 11px;
  color: var(--ink);
  background: rgba(255, 255, 255, .92);
  font: inherit;
  font-size: 14px;
  font-weight: 820;
}

.roadtalk-settings-form legend {
  padding: 0;
  color: var(--ink);
  font-size: 12px;
  font-weight: 950;
}

.roadtalk-settings-form .sheet-actions button {
  min-height: 42px;
  border-radius: 14px;
}

.roadtalk-settings-form .fp-roadtalk-channel-toggle button,
.roadtalk-settings-form .roadtalk-radius-row button,
.roadtalk-settings-form .roadtalk-city-row button,
.roadtalk-settings-form .roadtalk-sound-tests button,
.roadtalk-settings-form .roadtalk-moderation-settings button {
  min-height: 44px;
}

.roadtalk-settings-form > .sheet-actions {
  position: sticky;
  bottom: calc(env(safe-area-inset-bottom) + 4px);
  z-index: 2;
  border: 1px solid rgba(15, 23, 42, .08);
  border-radius: 18px;
  padding: 7px;
  background: rgba(255, 255, 255, .92);
  backdrop-filter: blur(10px);
}

.roadtalk-settings-section small,
.roadtalk-settings-channel small,
.roadtalk-settings-city small {
  color: #667085;
  font-size: 11px;
  font-weight: 780;
  line-height: 1.28;
}

.roadtalk-channel-test-dev ol {
  display: grid;
  gap: 5px;
  margin: 8px 0;
  padding-left: 18px;
}

.roadtalk-channel-test-dev li {
  color: #475467;
  font-size: 11px;
  font-weight: 780;
  line-height: 1.28;
}

.roadtalk-background-note {
  display: none;
}

.sheet[data-roadtalk-sheet-mode="mini"] .roadtalk-mini-summary {
  display: grid;
}

.sheet[data-roadtalk-sheet-mode="mini"] .roadtalk-radio-nav,
.sheet[data-roadtalk-sheet-mode="mini"] .roadtalk-radio-shell {
  display: none;
}

.sheet[data-roadtalk-sheet-mode="half"] .roadtalk-radio-card {
  grid-template-columns: 54px minmax(0, 1fr);
  padding: 8px 9px;
}

.sheet[data-roadtalk-sheet-mode="half"] .roadtalk-radio-orb {
  width: 50px;
  height: 50px;
}

.sheet[data-roadtalk-sheet-mode="half"] .fp-roadtalk-eq,
.sheet[data-roadtalk-sheet-mode="half"] .roadtalk-dev-info,
.sheet[data-roadtalk-sheet-mode="mini"] .roadtalk-dev-info,
.sheet[data-roadtalk-sheet-mode="half"] .roadtalk-filter-row,
.sheet[data-roadtalk-sheet-mode="half"] .roadtalk-sort-row {
  display: none;
}

.sheet[data-roadtalk-sheet-mode="half"] .roadtalk-messages {
  display: none;
}

.sheet[data-roadtalk-sheet-mode="half"] .roadtalk-half-activity {
  display: grid;
}

.sheet[data-roadtalk-sheet-mode="half"] .roadtalk-message-card:nth-of-type(n+3) {
  display: none;
}

.sheet[data-roadtalk-sheet-mode="half"] .fp-roadtalk-volume {
  min-height: 38px;
  padding: 6px 8px;
}

.sheet[data-roadtalk-sheet-mode="half"][data-sheet-type="roadtalk-broadcast"] .roadtalk-range-dev-info {
  display: none;
}

.roadtalk-radio-nav {
  padding-bottom: 3px;
}

.roadtalk-radio-nav h2 {
  font-size: 17px;
}

.roadtalk-radio-shell {
  gap: 6px;
}

.roadtalk-radio-card-compact {
  grid-template-columns: 46px minmax(0, 1fr);
  gap: 9px;
  min-height: 72px;
  padding: 7px 9px;
  border-radius: 16px;
  box-shadow: 0 4px 14px rgba(15, 23, 42, .045);
}

.roadtalk-radio-card-compact .roadtalk-radio-orb {
  width: 42px;
  height: 42px;
  box-shadow: 0 8px 18px rgba(0, 113, 227, .16);
}

.roadtalk-radio-card-compact .roadtalk-radio-orb span {
  font-size: 13px;
}

.roadtalk-radio-card-compact .roadtalk-radio-orb i {
  display: none;
}

.roadtalk-radio-card-compact b {
  font-size: 15px;
  line-height: 1.05;
}

.roadtalk-radio-card-compact small {
  margin-top: 3px;
  font-size: 11px;
  line-height: 1.2;
}

.roadtalk-radio-card-compact .fp-roadtalk-eq {
  height: 11px;
  margin-top: 5px;
  gap: 3px;
}

.roadtalk-radio-card-compact .fp-roadtalk-eq i {
  width: 3px;
  height: 5px;
}

.fp-roadtalk-channel-toggle,
.roadtalk-radius-row {
  gap: 5px;
}

.fp-roadtalk-channel-toggle button,
.roadtalk-radius-row button,
.roadtalk-private-placeholder button {
  min-height: 31px;
  padding: 0 9px;
  font-size: 10.5px;
}

.roadtalk-radio-controls {
  gap: 6px;
}

.roadtalk-radio-controls button,
.roadtalk-gps-empty button {
  min-height: 36px;
  border-radius: 13px;
  font-size: 11px;
}

.fp-roadtalk-volume {
  min-height: 34px;
  border-radius: 14px;
  padding: 5px 8px;
  background: rgba(255, 255, 255, .56);
}

.fp-roadtalk-volume span,
.fp-roadtalk-volume b {
  font-size: 10.5px;
}

.fp-roadtalk-volume button {
  min-height: 28px;
  padding: 0 8px;
  font-size: 10px;
}

.roadtalk-main-dev-info,
.roadtalk-range-dev-info {
  justify-self: start;
  width: fit-content;
  border: 0;
  border-radius: 999px;
  padding: 0;
  background: transparent;
}

.roadtalk-main-dev-info summary,
.roadtalk-range-dev-info summary {
  width: fit-content;
  border-radius: 999px;
  padding: 4px 8px;
  color: #667085;
  background: rgba(142, 142, 147, .10);
  font-size: 10px;
}

.roadtalk-main-dev-info[open],
.roadtalk-range-dev-info[open] {
  width: 100%;
  border: 1px dashed rgba(0, 113, 227, .14);
  border-radius: 14px;
  padding: 7px 8px;
  background: rgba(255, 255, 255, .58);
}

.roadtalk-main-dev-info[open] summary,
.roadtalk-range-dev-info[open] summary {
  padding: 0;
  background: transparent;
}

.roadtalk-activity-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 2px;
}

.roadtalk-activity-head h3 {
  margin: 0;
  color: var(--ink);
  font-size: 14px;
  line-height: 1.08;
}

.roadtalk-activity-head span {
  display: block;
  margin-top: 1px;
  color: #667085;
  font-size: 10.5px;
  font-weight: 850;
}

.roadtalk-activity-head button {
  flex: 0 0 auto;
  min-height: 28px;
  border: 1px solid rgba(15, 23, 42, .08);
  border-radius: 999px;
  padding: 0 9px;
  color: #475467;
  background: rgba(255, 255, 255, .72);
  font: inherit;
  font-size: 10px;
  font-weight: 950;
}

.roadtalk-filter-row {
  gap: 5px;
  padding-bottom: 2px;
}

.roadtalk-filter-row button {
  min-height: 27px;
  padding: 0 8px;
  font-size: 10px;
}

.roadtalk-empty {
  min-height: 38px;
  border-style: solid;
  border-color: rgba(15, 23, 42, .06);
  border-radius: 13px;
  padding: 9px;
  background: rgba(255, 255, 255, .58);
  font-size: 12px;
}

.roadtalk-message-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 7px;
  padding: 7px 8px;
  border-radius: 13px;
}

.roadtalk-message-card span {
  font-size: 9.5px;
}

.roadtalk-message-card b {
  display: -webkit-box;
  margin-top: 2px;
  overflow: hidden;
  color: var(--ink);
  font-size: 12.5px;
  line-height: 1.18;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.roadtalk-voice-chip {
  display: inline-flex;
  width: fit-content;
  margin-top: 4px;
  border-radius: 999px;
  padding: 2px 6px;
  color: #047857;
  background: rgba(16, 185, 129, .12);
  font-size: 9px;
  font-weight: 950;
  line-height: 1.2;
}

.roadtalk-message-card small {
  margin-top: 3px;
  font-size: 10px;
  line-height: 1.2;
}

.roadtalk-transcript-ttl {
  margin-top: 4px;
  padding: 3px 6px;
  font-size: 9px;
}

.roadtalk-message-card nav {
  align-content: start;
  align-items: start;
  gap: 3px;
}

.roadtalk-message-card nav button {
  min-width: 26px;
  min-height: 26px;
  padding: 0 6px;
  font-size: 9.5px;
}

.roadtalk-broadcast-compact-v2 {
  gap: 7px;
}

.roadtalk-broadcast-form-compact {
  gap: 7px;
  padding: 0;
  background: transparent;
}

.roadtalk-broadcast-form-compact .group-choice {
  gap: 4px;
}

.roadtalk-broadcast-form-compact .group-choice legend {
  font-size: 11px;
}

.roadtalk-broadcast-form-compact .fp-roadtalk-channel-toggle button {
  min-height: 34px;
  border-radius: 999px;
  padding: 4px 9px;
  text-align: center;
}

.roadtalk-broadcast-form-compact .fp-roadtalk-channel-toggle button b {
  font-size: 11px;
}

.roadtalk-broadcast-form-compact .fp-roadtalk-channel-toggle button small {
  margin-top: 0;
  font-size: 9.5px;
}

.roadtalk-broadcast-form-compact .roadtalk-broadcast-categories button {
  min-height: 28px;
  padding: 0 9px;
  font-size: 10px;
}

.roadtalk-broadcast-form-compact textarea {
  min-height: 56px;
  border-radius: 13px;
  padding: 8px 10px;
  font-size: 13px;
}

.roadtalk-broadcast-form-compact .sheet-actions button {
  min-height: 38px;
  border-radius: 13px;
}

.roadtalk-broadcast-form-compact .roadtalk-voice-mock-panel {
  padding: 7px 8px;
}

.roadtalk-broadcast-form-compact .roadtalk-voice-mock-panel button {
  min-height: 30px;
}

.roadtalk-voice-ptt-panel {
  display: grid;
  gap: 7px;
  border: 1px solid rgba(0, 113, 227, .12);
  border-radius: 16px;
  padding: 10px;
  background: linear-gradient(135deg, rgba(255, 255, 255, .92), rgba(239, 248, 255, .78));
}

.roadtalk-ptt-button {
  display: grid;
  place-items: center;
  gap: 2px;
  min-height: 74px;
  border: 1px solid rgba(0, 113, 227, .18);
  border-radius: 999px;
  color: #fff;
  background: linear-gradient(135deg, #07111e, #0b84ff);
  box-shadow: 0 12px 28px rgba(0, 113, 227, .18);
  touch-action: manipulation;
}

.roadtalk-ptt-button b {
  font-size: 14px;
  font-weight: 950;
}

.roadtalk-ptt-button span {
  color: rgba(255, 255, 255, .78);
  font-size: 11px;
  font-weight: 900;
}

.roadtalk-voice-ptt-panel.is-recording .roadtalk-ptt-button {
  background: linear-gradient(135deg, #7f1d1d, #ff3b30);
  box-shadow: 0 14px 32px rgba(255, 59, 48, .22);
}

.roadtalk-voice-ptt-panel.is-ready .roadtalk-ptt-button {
  background: linear-gradient(135deg, #064e3b, #10b981);
}

.roadtalk-voice-ptt-panel.is-uploading .roadtalk-ptt-button {
  background: linear-gradient(135deg, #12305c, #0b84ff);
  box-shadow: 0 14px 32px rgba(0, 113, 227, .24);
}

.roadtalk-voice-ptt-panel.is-sent .roadtalk-ptt-button {
  background: linear-gradient(135deg, #065f46, #22c55e);
  box-shadow: 0 14px 32px rgba(34, 197, 94, .2);
}

.roadtalk-voice-ptt-panel.is-error .roadtalk-ptt-button {
  background: linear-gradient(135deg, #7f1d1d, #c2410c);
  box-shadow: 0 14px 32px rgba(194, 65, 12, .18);
}

.roadtalk-voice-ptt-panel.is-cancelled .roadtalk-ptt-button {
  color: #17202c;
  background: linear-gradient(135deg, #f8fafc, #e5edf7);
  box-shadow: 0 8px 18px rgba(15, 23, 42, .08);
}

.roadtalk-voice-ptt-panel.is-cancelled .roadtalk-ptt-button span {
  color: rgba(23, 32, 44, .58);
}

.roadtalk-voice-wave {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-height: 18px;
}

.roadtalk-voice-wave i {
  display: block;
  width: 3px;
  height: 7px;
  border-radius: 999px;
  background: rgba(0, 113, 227, .38);
}

.roadtalk-voice-wave.active i {
  animation: roadTalkVoiceWave 760ms ease-in-out infinite;
}

.roadtalk-voice-wave.active i:nth-child(2) { animation-delay: 80ms; }
.roadtalk-voice-wave.active i:nth-child(3) { animation-delay: 160ms; }
.roadtalk-voice-wave.active i:nth-child(4) { animation-delay: 240ms; }
.roadtalk-voice-wave.active i:nth-child(5) { animation-delay: 320ms; }
.roadtalk-voice-wave.active i:nth-child(6) { animation-delay: 400ms; }
.roadtalk-voice-wave.active i:nth-child(7) { animation-delay: 480ms; }

@keyframes roadTalkVoiceWave {
  0%, 100% { height: 6px; opacity: .45; }
  50% { height: 18px; opacity: 1; }
}

.roadtalk-voice-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.roadtalk-voice-actions button {
  min-height: 32px;
  border-radius: 999px;
  padding-inline: 8px;
  font-size: 11px;
}

.roadtalk-live-broadcast-panel {
  display: grid;
  gap: 8px;
  border: 1px solid rgba(16, 185, 129, .18);
  border-radius: 18px;
  padding: 10px;
  background:
    radial-gradient(circle at 50% 0%, rgba(16, 185, 129, .16), transparent 46%),
    linear-gradient(135deg, rgba(255, 255, 255, .94), rgba(236, 253, 245, .86));
  box-shadow: 0 12px 30px rgba(16, 185, 129, .12);
}

.roadtalk-live-broadcast-copy {
  display: grid;
  gap: 2px;
  text-align: center;
}

.roadtalk-live-broadcast-copy span {
  color: #047857;
  font-size: 10px;
  font-weight: 950;
  text-transform: uppercase;
}

.roadtalk-live-broadcast-copy b {
  color: #07111e;
  font-size: 18px;
  font-weight: 950;
}

.roadtalk-live-broadcast-copy small,
.roadtalk-live-broadcast-panel em {
  color: #475467;
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
}

.roadtalk-live-talk-button {
  display: grid;
  place-items: center;
  gap: 3px;
  min-height: 82px;
  border: 1px solid rgba(16, 185, 129, .28);
  border-radius: 999px;
  color: #fff;
  background: linear-gradient(135deg, #052e2b, #10b981);
  box-shadow: 0 16px 36px rgba(16, 185, 129, .24);
  touch-action: manipulation;
}

.roadtalk-live-talk-button span {
  color: rgba(255, 255, 255, .78);
  font-size: 11px;
  font-weight: 950;
}

.roadtalk-live-talk-button b {
  color: #fff;
  font-size: 17px;
  font-weight: 950;
}

.roadtalk-live-broadcast-panel.is-speaking .roadtalk-live-talk-button {
  background: linear-gradient(135deg, #064e3b, #22c55e);
  animation: roadTalkLivePulse 1.2s ease-in-out infinite;
}

.roadtalk-live-broadcast-panel.is-busy .roadtalk-live-talk-button,
.roadtalk-live-talk-button:disabled {
  color: #667085;
  background: linear-gradient(135deg, #eef4f2, #dce8e3);
  box-shadow: 0 8px 18px rgba(15, 23, 42, .08);
}

.roadtalk-live-broadcast-panel.is-transcribing {
  border-color: rgba(11, 132, 255, .18);
  background: linear-gradient(135deg, rgba(255, 255, 255, .95), rgba(239, 248, 255, .88));
}

.roadtalk-live-broadcast-panel.is-error {
  border-color: rgba(194, 65, 12, .18);
  background: linear-gradient(135deg, rgba(255, 255, 255, .95), rgba(255, 247, 237, .88));
}

.roadtalk-live-broadcast-panel .roadtalk-voice-wave i {
  background: rgba(16, 185, 129, .55);
}

.roadtalk-voice-message-fallback {
  border: 1px dashed rgba(0, 113, 227, .22);
  border-radius: 14px;
  padding: 7px;
  background: rgba(0, 113, 227, .04);
}

.roadtalk-voice-message-fallback summary {
  color: #475467;
  font-size: 11px;
  font-weight: 900;
}

@keyframes roadTalkLivePulse {
  0%, 100% { transform: scale(1); box-shadow: 0 16px 36px rgba(16, 185, 129, .22); }
  50% { transform: scale(1.015); box-shadow: 0 20px 42px rgba(16, 185, 129, .32); }
}

.roadtalk-voice-card-controls {
  display: grid;
  grid-template-columns: auto auto minmax(36px, 1fr);
  align-items: center;
  gap: 6px;
  width: fit-content;
  max-width: 100%;
  margin-top: 5px;
  border: 1px solid rgba(0, 113, 227, .10);
  border-radius: 999px;
  padding: 3px 7px;
  background: rgba(0, 113, 227, .06);
}

.roadtalk-voice-card-controls button {
  min-height: 26px;
  border: 0;
  padding: 0 7px;
  color: #064e9b;
  background: rgba(255, 255, 255, .8);
  font-size: 10px;
  font-weight: 950;
}

.roadtalk-voice-card-controls span {
  color: #0f172a;
  background: transparent;
  padding: 0;
  font-size: 10px;
}

.roadtalk-voice-card-controls small {
  grid-column: 1 / -1;
  margin: 0;
  color: #475467;
  font-size: 9.5px;
  font-weight: 850;
}

.roadtalk-voice-card-controls .roadtalk-voice-wave {
  min-height: 14px;
  justify-content: flex-start;
}

.roadtalk-voice-card-controls.is-live-summary {
  grid-template-columns: auto minmax(34px, 1fr);
  border-color: rgba(16, 185, 129, .13);
  background: rgba(16, 185, 129, .07);
}

.sheet[data-roadtalk-sheet-mode="half"] .roadtalk-radio-card-compact {
  grid-template-columns: 40px minmax(0, 1fr);
  min-height: 62px;
  padding: 6px 8px;
}

.sheet[data-roadtalk-sheet-mode="half"] .roadtalk-radio-card-compact .roadtalk-radio-orb {
  width: 38px;
  height: 38px;
}

.sheet[data-roadtalk-sheet-mode="half"] .roadtalk-radio-card-compact b {
  font-size: 14px;
}

.sheet[data-roadtalk-sheet-mode="half"] .roadtalk-radio-card-compact small {
  font-size: 10.5px;
}

/* RoadTalk ergonomic v3: radio-first hierarchy, lighter cards, map-friendly half/mini. */
.roadtalk-radio-shell {
  gap: 6px;
  padding-bottom: calc(env(safe-area-inset-bottom) + 8px);
}

.roadtalk-radio-card-compact {
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 8px;
  min-height: 62px;
  padding: 6px 8px;
  border-radius: 15px;
  background: rgba(255, 255, 255, .88);
  box-shadow: 0 3px 12px rgba(15, 23, 42, .04);
}

.roadtalk-radio-card-compact.listening {
  background: linear-gradient(135deg, rgba(255, 255, 255, .92), rgba(238, 253, 247, .86));
}

.roadtalk-radio-card-compact .roadtalk-radio-orb {
  width: 36px;
  height: 36px;
  background: linear-gradient(135deg, #07111e, #0b84ff);
  box-shadow: 0 7px 16px rgba(0, 113, 227, .14);
}

.roadtalk-radio-card-compact .roadtalk-radio-orb span {
  font-size: 12px;
}

.roadtalk-radio-title-row {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
}

.roadtalk-radio-title-row b {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.roadtalk-radio-title-row em {
  flex: 0 0 auto;
  border-radius: 999px;
  padding: 3px 7px;
  color: #047857;
  background: rgba(16, 185, 129, .12);
  font-size: 10px;
  font-style: normal;
  font-weight: 950;
  line-height: 1;
}

.roadtalk-radio-card-compact b {
  font-size: 14px;
}

.roadtalk-radio-card-compact small {
  margin-top: 2px;
  font-size: 10.5px;
}

.roadtalk-radio-card-compact .fp-roadtalk-eq {
  height: 8px;
  margin-top: 4px;
  opacity: .58;
}

.roadtalk-radio-card-compact .fp-roadtalk-eq i {
  width: 2px;
  height: 4px;
}

.fp-roadtalk-channel-toggle,
.roadtalk-radius-row,
.roadtalk-city-row {
  gap: 4px;
}

.fp-roadtalk-channel-toggle button,
.roadtalk-radius-row button,
.roadtalk-city-row button {
  min-height: 29px;
  border-radius: 999px;
  padding: 0 8px;
  font-size: 10px;
}

.roadtalk-city-row {
  display: flex;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: 1px;
}

.roadtalk-city-row::-webkit-scrollbar {
  display: none;
}

.roadtalk-city-row button.active {
  border-color: rgba(0, 113, 227, .36);
  color: #064e9b;
  background: rgba(0, 113, 227, .1);
}

.roadtalk-city-custom {
  display: grid;
  gap: 4px;
  color: #667085;
  font-size: 10px;
  font-weight: 850;
}

.roadtalk-city-custom input {
  min-height: 34px;
  border: 1px solid rgba(15, 23, 42, .1);
  border-radius: 12px;
  padding: 0 10px;
  background: rgba(255, 255, 255, .82);
}

.roadtalk-radio-controls {
  gap: 6px;
}

.roadtalk-radio-controls button {
  min-height: 38px;
  border-radius: 13px;
  font-size: 11.5px;
}

.roadtalk-radio-controls button.primary {
  border-color: var(--blue);
  color: #fff;
  background: var(--blue);
  box-shadow: 0 8px 18px rgba(0, 113, 227, .15);
}

.roadtalk-radio-controls button.secondary {
  border-color: rgba(15, 23, 42, .08);
  color: #475467;
  background: rgba(255, 255, 255, .72);
  box-shadow: none;
}

.fp-roadtalk-volume {
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  min-height: 31px;
  border-radius: 13px;
  padding: 4px 7px;
  gap: 7px;
}

.fp-roadtalk-volume input {
  min-width: 0;
}

.fp-roadtalk-volume button {
  min-height: 26px;
  padding: 0 7px;
}

.roadtalk-main-dev-info,
.roadtalk-range-dev-info {
  display: none !important;
}

.roadtalk-activity-head {
  margin-top: 1px;
}

.roadtalk-activity-head h3 {
  font-size: 13px;
}

.roadtalk-activity-head span {
  font-size: 10px;
}

.roadtalk-activity-head button {
  min-height: 26px;
  padding: 0 8px;
}

.roadtalk-filter-row {
  gap: 4px;
  padding-bottom: 1px;
}

.roadtalk-filter-row button {
  min-height: 26px;
  padding: 0 8px;
}

.roadtalk-message-card {
  gap: 6px;
  min-height: 54px;
  padding: 7px 8px;
  border-radius: 12px;
}

.roadtalk-message-card span {
  display: inline-flex;
  width: fit-content;
  max-width: 100%;
  border-radius: 999px;
  padding: 2px 6px;
  color: var(--blue);
  background: rgba(0, 113, 227, .08);
  font-size: 9px;
  line-height: 1.1;
}

.roadtalk-message-card b {
  margin-top: 4px;
  font-size: 12px;
  line-height: 1.15;
}

.roadtalk-message-card small {
  margin-top: 3px;
  font-size: 9.5px;
}

.roadtalk-transcript-ttl {
  margin-top: 3px;
  padding: 2px 6px;
  font-size: 8.5px;
}

.roadtalk-message-card nav {
  display: grid;
  grid-template-columns: repeat(2, 26px);
  gap: 3px;
}

.roadtalk-message-card nav button {
  width: 26px;
  min-width: 26px;
  min-height: 26px;
  padding: 0;
  overflow: hidden;
  font-size: 9px;
}

.roadtalk-broadcast-ergonomic-v3 {
  gap: 6px;
}

.roadtalk-broadcast-ergonomic-v3 .roadtalk-broadcast-head {
  padding-bottom: 0;
}

.roadtalk-broadcast-ergonomic-v3 .roadtalk-broadcast-head h2 {
  font-size: 18px;
}

.roadtalk-broadcast-ergonomic-v3 .roadtalk-broadcast-head span {
  font-size: 11px;
}

.roadtalk-broadcast-ergonomic-v3 .roadtalk-broadcast-form-compact {
  gap: 6px;
}

.roadtalk-broadcast-ergonomic-v3 .group-choice legend {
  font-size: 10.5px;
}

.roadtalk-broadcast-ergonomic-v3 .fp-roadtalk-channel-toggle {
  gap: 5px;
}

.roadtalk-broadcast-ergonomic-v3 .fp-roadtalk-channel-toggle button {
  min-height: 32px;
  padding: 3px 8px;
}

.roadtalk-broadcast-ergonomic-v3 .fp-roadtalk-channel-toggle button small {
  display: none;
}

.roadtalk-broadcast-ergonomic-v3 .roadtalk-broadcast-categories {
  gap: 5px;
}

.roadtalk-broadcast-ergonomic-v3 .roadtalk-broadcast-categories button {
  min-height: 27px;
  padding: 0 8px;
}

.roadtalk-broadcast-ergonomic-v3 textarea {
  min-height: 50px;
  padding: 8px 9px;
}

.roadtalk-broadcast-ergonomic-v3 .sheet-actions {
  gap: 7px;
}

.roadtalk-broadcast-ergonomic-v3 .sheet-actions button {
  min-height: 38px;
}

.sheet[data-roadtalk-sheet-mode="half"][data-sheet-type="roadtalk"] .fp-roadtalk-channel-toggle,
.sheet[data-roadtalk-sheet-mode="half"][data-sheet-type="roadtalk"] .roadtalk-radius-row,
.sheet[data-roadtalk-sheet-mode="half"][data-sheet-type="roadtalk"] .fp-roadtalk-volume,
.sheet[data-roadtalk-sheet-mode="half"][data-sheet-type="roadtalk"] .roadtalk-live-audio-panel {
  display: none;
}

.sheet[data-roadtalk-sheet-mode="half"][data-sheet-type="roadtalk"] .roadtalk-radio-shell {
  gap: 6px;
}

.sheet[data-roadtalk-sheet-mode="half"][data-sheet-type="roadtalk"] .roadtalk-radio-card-compact {
  grid-template-columns: 36px minmax(0, 1fr);
  min-height: 54px;
  padding: 5px 7px;
}

.sheet[data-roadtalk-sheet-mode="half"][data-sheet-type="roadtalk"] .roadtalk-radio-card-compact .roadtalk-radio-orb {
  width: 34px;
  height: 34px;
}

.sheet[data-roadtalk-sheet-mode="half"][data-sheet-type="roadtalk"] .roadtalk-radio-controls button {
  min-height: 36px;
}

.sheet[data-roadtalk-sheet-mode="half"][data-sheet-type="roadtalk"] .roadtalk-half-activity {
  display: grid;
  min-height: 42px;
  padding: 7px 8px;
}

.sheet[data-roadtalk-sheet-mode="mini"][data-sheet-type="roadtalk"] .roadtalk-mini-summary {
  min-height: 48px;
  border-radius: 16px;
  padding: 7px 9px;
}

.sheet[data-roadtalk-sheet-mode="mini"][data-sheet-type="roadtalk"] .roadtalk-mini-summary b {
  font-size: 13px;
}

.sheet[data-roadtalk-sheet-mode="mini"][data-sheet-type="roadtalk"] .roadtalk-mini-summary small {
  font-size: 10.5px;
}

.sheet[data-roadtalk-sheet-mode="mini"][data-sheet-type="roadtalk"] .roadtalk-mini-summary i {
  padding: 6px 8px;
}

.roadtalk-standalone-active {
  min-height: 100dvh;
  overflow: hidden;
  background: #07111e;
}

.roadtalk-standalone-view {
  position: fixed;
  inset: 0;
  z-index: 300;
  min-height: 100dvh;
  overflow: hidden;
  color: #f8fbff;
  background:
    radial-gradient(circle at 18% 12%, rgba(0, 113, 227, .34), transparent 34%),
    radial-gradient(circle at 88% 18%, rgba(52, 199, 89, .20), transparent 34%),
    linear-gradient(180deg, #07111e 0%, #0f172a 58%, #111827 100%);
}

.roadtalk-standalone-root {
  min-height: 100dvh;
}

.rt-standalone-shell {
  position: relative;
  display: grid;
  gap: 12px;
  min-height: 100dvh;
  padding: calc(env(safe-area-inset-top) + 18px) 14px calc(env(safe-area-inset-bottom) + 18px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.rt-standalone-map {
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .5;
  background:
    linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px),
    linear-gradient(0deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(circle at 50% 42%, #000 0 55%, transparent 86%);
}

.rt-standalone-map span {
  position: absolute;
  display: block;
  border-radius: 999px;
  background: rgba(0, 113, 227, .38);
  box-shadow: 0 0 36px rgba(0, 113, 227, .32);
}

.rt-standalone-map span:nth-child(1) {
  left: 8%;
  top: 36%;
  width: 82%;
  height: 4px;
  transform: rotate(-18deg);
}

.rt-standalone-map span:nth-child(2) {
  left: 14%;
  top: 58%;
  width: 72%;
  height: 3px;
  transform: rotate(22deg);
  background: rgba(52, 199, 89, .30);
}

.rt-standalone-map span:nth-child(3) {
  left: 50%;
  top: 15%;
  width: 3px;
  height: 72%;
  transform: rotate(8deg);
  background: rgba(255, 255, 255, .16);
}

.rt-standalone-head,
.rt-standalone-panel,
.rt-standalone-activity,
.rt-standalone-todo {
  position: relative;
  z-index: 1;
}

.rt-standalone-head {
  display: grid;
  gap: 4px;
  padding: 4px 2px 0;
}

.rt-standalone-head p,
.rt-standalone-head small {
  margin: 0;
  color: rgba(248, 251, 255, .68);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .02em;
}

.rt-standalone-head h1 {
  margin: 0;
  font-size: clamp(38px, 12vw, 62px);
  line-height: .92;
  letter-spacing: 0;
}

.rt-standalone-panel,
.rt-standalone-activity,
.rt-standalone-auth,
.rt-standalone-identity,
.rt-standalone-todo {
  border: 1px solid rgba(255, 255, 255, .13);
  border-radius: 24px;
  padding: 12px;
  background: rgba(8, 16, 30, .58);
  box-shadow: 0 22px 58px rgba(0, 0, 0, .28);
  backdrop-filter: blur(18px) saturate(1.1);
}

.rt-standalone-panel {
  display: grid;
  gap: 10px;
}

.rt-standalone-auth,
.rt-standalone-identity {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 10px;
}

.rt-standalone-auth div,
.rt-standalone-identity div:first-child {
  display: grid;
  gap: 3px;
}

.rt-standalone-auth span,
.rt-standalone-identity span {
  color: rgba(248, 251, 255, .62);
  font-size: 11px;
  font-weight: 950;
  text-transform: uppercase;
}

.rt-standalone-auth b,
.rt-standalone-identity b {
  color: #fff;
  font-size: 18px;
}

.rt-standalone-auth small,
.rt-standalone-identity small,
.rt-standalone-auth p,
.rt-standalone-identity p {
  margin: 0;
  color: rgba(248, 251, 255, .68);
  font-size: 12px;
  font-weight: 820;
  line-height: 1.35;
}

.rt-standalone-auth label,
.rt-standalone-identity label {
  display: grid;
  gap: 6px;
  color: rgba(248, 251, 255, .72);
  font-size: 12px;
  font-weight: 900;
}

.rt-standalone-auth input,
.rt-standalone-identity input {
  width: 100%;
  min-height: 44px;
  border: 1px solid rgba(255, 255, 255, .13);
  border-radius: 16px;
  padding: 0 12px;
  color: #f8fbff;
  background: rgba(255, 255, 255, .08);
  font: inherit;
  font-size: 15px;
  font-weight: 820;
}

.rt-standalone-auth button,
.rt-standalone-identity button,
.rt-standalone-message nav button {
  min-height: 38px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 999px;
  padding: 0 12px;
  color: rgba(248, 251, 255, .86);
  background: rgba(255, 255, 255, .08);
  font: inherit;
  font-size: 12px;
  font-weight: 950;
}

.rt-standalone-auth button:first-of-type,
.rt-standalone-identity button:first-of-type,
.rt-standalone-identity-mode button.active {
  border-color: rgba(0, 113, 227, .72);
  color: #fff;
  background: linear-gradient(135deg, #0071e3, #0356d8);
}

.rt-standalone-dev-code {
  justify-self: start;
  border: 1px solid rgba(52, 199, 89, .34);
  border-radius: 999px;
  padding: 5px 9px;
  color: #dfffe9 !important;
  background: rgba(52, 199, 89, .12);
}

.rt-standalone-identity-mode,
.rt-standalone-identity > div:last-of-type,
.rt-standalone-message nav {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.rt-standalone-mode,
.rt-standalone-radius,
.rt-standalone-actions {
  display: grid;
  gap: 8px;
}

.rt-standalone-mode,
.rt-standalone-actions {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.rt-standalone-radius {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.rt-standalone-mode button,
.rt-standalone-radius button,
.rt-standalone-actions button,
.rt-standalone-gps,
.rt-standalone-form button,
.rt-standalone-examples button {
  min-height: 42px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 999px;
  padding: 0 12px;
  color: rgba(248, 251, 255, .86);
  background: rgba(255, 255, 255, .08);
  font: inherit;
  font-size: 12px;
  font-weight: 950;
}

.rt-standalone-mode button.active,
.rt-standalone-radius button.active,
.rt-standalone-actions button.active,
.rt-standalone-form button[type="submit"] {
  border-color: rgba(0, 113, 227, .72);
  color: #fff;
  background: linear-gradient(135deg, #0071e3, #0356d8);
  box-shadow: 0 14px 32px rgba(0, 113, 227, .24);
}

.rt-standalone-city {
  display: grid;
  gap: 6px;
  color: rgba(248, 251, 255, .72);
  font-size: 12px;
  font-weight: 900;
}

.rt-standalone-city select,
.rt-standalone-form textarea {
  width: 100%;
  border: 1px solid rgba(255, 255, 255, .13);
  border-radius: 16px;
  color: #f8fbff;
  background: rgba(255, 255, 255, .08);
  font: inherit;
  font-size: 15px;
  font-weight: 820;
}

.rt-standalone-city select {
  min-height: 44px;
  padding: 0 12px;
}

.rt-standalone-cb {
  display: grid;
  place-items: center;
  padding: 10px 0 4px;
}

.rt-standalone-cb button {
  display: grid;
  place-items: center;
  width: min(220px, 58vw);
  aspect-ratio: 1 / 1;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 999px;
  color: #fff;
  background:
    radial-gradient(circle at 36% 28%, rgba(255, 255, 255, .28), transparent 30%),
    linear-gradient(135deg, #07111e, #0071e3 58%, #34c759);
  box-shadow: 0 24px 72px rgba(0, 113, 227, .34);
  font: inherit;
}

.rt-standalone-cb span {
  font-size: 44px;
  font-weight: 1000;
}

.rt-standalone-cb b,
.rt-standalone-cb small {
  display: block;
}

.rt-standalone-cb b {
  font-size: 18px;
}

.rt-standalone-cb small {
  color: rgba(255, 255, 255, .72);
  font-size: 11px;
  font-weight: 850;
}

.rt-standalone-form {
  display: grid;
  gap: 8px;
}

.rt-standalone-form label {
  display: grid;
  gap: 6px;
  color: rgba(248, 251, 255, .72);
  font-size: 12px;
  font-weight: 900;
}

.rt-standalone-form textarea {
  min-height: 64px;
  padding: 10px 12px;
  resize: vertical;
}

.rt-standalone-examples {
  display: flex;
  gap: 7px;
  overflow-x: auto;
  padding-bottom: 2px;
  scrollbar-width: none;
}

.rt-standalone-examples::-webkit-scrollbar {
  display: none;
}

.rt-standalone-examples button {
  flex: 0 0 auto;
  min-height: 34px;
  font-size: 11px;
}

.rt-standalone-status {
  color: rgba(248, 251, 255, .64);
  font-size: 11px;
  font-weight: 850;
  line-height: 1.35;
  text-align: center;
}

.rt-standalone-activity {
  display: grid;
  gap: 8px;
}

.rt-standalone-activity h2 {
  margin: 0;
  font-size: 18px;
}

.rt-standalone-activity span,
.rt-standalone-activity small,
.rt-standalone-empty,
.rt-standalone-todo {
  color: rgba(248, 251, 255, .66);
  font-size: 12px;
  font-weight: 820;
  line-height: 1.35;
}

.rt-standalone-message {
  display: grid;
  gap: 3px;
  border: 1px solid rgba(255, 255, 255, .10);
  border-radius: 16px;
  padding: 10px;
  background: rgba(255, 255, 255, .08);
}

.rt-standalone-message b {
  color: #fff;
  font-size: 14px;
}

.rt-standalone-todo {
  margin-bottom: 0;
}

.rt-standalone-todo summary {
  cursor: pointer;
  color: rgba(248, 251, 255, .84);
  font-weight: 950;
}

.roadtalk-ab-test-panel {
  display: grid;
  gap: 10px;
}

.roadtalk-ab-test-panel[open] {
  display: grid;
}

.roadtalk-ab-warning {
  margin: 0;
  border: 1px solid rgba(255, 204, 0, .34);
  border-radius: 14px;
  padding: 8px 10px;
  color: #fff2b7;
  background: rgba(255, 204, 0, .13);
  font-size: 12px;
  font-weight: 850;
}

.roadtalk-ab-row {
  display: grid;
  gap: 3px;
}

.roadtalk-ab-row span,
.roadtalk-ab-grid dt {
  color: rgba(248, 251, 255, .58);
  font-size: 10px;
  font-weight: 950;
  text-transform: uppercase;
}

.roadtalk-ab-row b {
  color: #fff;
  font-size: 18px;
}

.roadtalk-ab-row small {
  color: rgba(248, 251, 255, .62);
}

.roadtalk-ab-actions {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.roadtalk-ab-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  margin: 0;
}

.roadtalk-ab-grid div {
  min-width: 0;
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: 12px;
  padding: 7px 8px;
  background: rgba(255, 255, 255, .06);
}

.roadtalk-ab-grid dt,
.roadtalk-ab-grid dd {
  margin: 0;
}

.roadtalk-ab-grid dd {
  overflow-wrap: anywhere;
  color: #f8fbff;
  font-size: 11px;
  font-weight: 900;
}

.roadtalk-ab-checklist {
  display: grid;
  gap: 4px;
  margin: 0;
  padding-left: 18px;
  color: rgba(248, 251, 255, .74);
}

@media (max-width: 380px) {
  .roadtalk-radio-card {
    grid-template-columns: 68px minmax(0, 1fr);
    gap: 9px;
    padding: 10px;
  }

  .roadtalk-radio-orb {
    width: 64px;
    height: 64px;
  }

  .roadtalk-radio-card b {
    font-size: 17px;
  }

  .roadtalk-radio-controls {
    grid-template-columns: 1fr 1fr;
  }

  .roadtalk-radio-controls button:last-child:not(:first-child) {
    grid-column: 1 / -1;
  }
}

.place-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  margin-top: 4px;
}

.place-actions button {
  min-height: 30px;
  border: 0;
  border-radius: 12px;
  color: var(--ink);
  background: rgba(255, 255, 255, .62);
  font-size: 11px;
  font-weight: 900;
}

.place-actions button.active,
.place-actions button[data-place-fp].active {
  color: #fff;
  background: var(--accent);
}

.place-form-shell,
.place-duplicate-sheet {
  display: grid;
  gap: 12px;
}

.place-location-note {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid color-mix(in srgb, var(--line) 72%, transparent);
  border-radius: 14px;
  color: var(--muted);
  background: rgba(255, 255, 255, .7);
  font-size: 12px;
}

.place-location-note b {
  color: var(--ink);
}

.trip-recorder-panel {
  display: grid;
  gap: 12px;
}

.trip-meter {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  border: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
  border-radius: 20px;
  padding: 14px;
  background:
    radial-gradient(circle at 18% 12%, color-mix(in srgb, #ff9f0a 24%, transparent), transparent 34%),
    color-mix(in srgb, var(--panel) 74%, transparent);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.58);
}

.trip-meter strong {
  color: var(--ink);
  font-size: clamp(34px, 10vw, 48px);
  line-height: .9;
  letter-spacing: -.02em;
}

.trip-meter span {
  color: var(--muted);
  font-size: 20px;
  font-weight: 950;
}

.trip-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.trip-stats article {
  display: grid;
  gap: 2px;
  min-height: 62px;
  border: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
  border-radius: 16px;
  padding: 10px;
  background: color-mix(in srgb, var(--panel) 68%, transparent);
}

.trip-stats b {
  color: var(--ink);
  font-size: 17px;
}

.trip-stats span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 850;
  line-height: 1.15;
}

.visibility-row {
  display: flex;
  gap: 7px;
  overflow-x: auto;
  scrollbar-width: none;
}

.visibility-row::-webkit-scrollbar { display: none; }

.visibility-row button {
  flex: 0 0 auto;
  min-height: 32px;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0 11px;
  color: var(--ink);
  background: color-mix(in srgb, var(--panel) 80%, transparent);
  font-size: 12px;
  font-weight: 900;
}

.visibility-row button.active {
  color: #fff;
  border-color: var(--blue);
  background: var(--blue);
}

.privacy-toggle {
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--ink);
  font-size: 13px;
  font-weight: 850;
}

.privacy-toggle input {
  width: 18px;
  height: 18px;
  accent-color: var(--blue);
}

.trip-actions {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.trip-actions button:disabled {
  color: #0b6b35;
  background: rgba(52, 199, 89, .14);
  opacity: 1;
}

.trip-recorder-panel.saved .trip-meter {
  background:
    radial-gradient(circle at 20% 12%, color-mix(in srgb, #34c759 24%, transparent), transparent 34%),
    color-mix(in srgb, var(--panel) 74%, transparent);
}

.talk-button {
  width: 100%;
  min-height: 64px;
  margin: 10px 0;
  border: 0;
  border-radius: 24px;
  color: #fff;
  background:
    radial-gradient(circle at 50% 20%, rgba(255,255,255,.28), transparent 28%),
    linear-gradient(135deg, var(--blue), var(--ink));
  box-shadow: 0 18px 42px rgba(0, 113, 227, .28);
  font-size: 22px;
  font-weight: 950;
  letter-spacing: .08em;
}

.talk-button.listening {
  background: linear-gradient(135deg, #ff4d4d, var(--gold));
}

.talk-button.processing {
  background: linear-gradient(135deg, var(--gold), var(--blue));
}

.talk-button.sent {
  background: linear-gradient(135deg, #22a06b, var(--blue));
}

.voice-push-form {
  display: grid;
  gap: 8px;
  margin: 8px 0 12px;
}

.voice-push-form label {
  display: grid;
  gap: 5px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}

.voice-push-form input,
.voice-push-form select {
  width: 100%;
  min-height: 40px;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 0 12px;
  color: var(--ink);
  background: color-mix(in srgb, var(--panel) 88%, white 12%);
  outline: none;
}

.voice-push-form button {
  min-height: 42px;
  border: 0;
  border-radius: 14px;
  color: #fff;
  background: var(--blue);
  font-weight: 950;
}

.plate-alert-form {
  display: grid;
  grid-template-columns: .8fr 1fr auto;
  gap: 6px;
  margin: 8px 0;
}

.plate-alert-form input {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 0 10px;
  color: var(--ink);
  background: rgba(255, 255, 255, .58);
}

.plate-alert-form button {
  min-height: 36px;
  border: 0;
  border-radius: 12px;
  color: #fff;
  background: var(--blue);
  font-weight: 900;
}

.page-view {
  position: fixed;
  inset: 0;
  z-index: 48;
  height: 100dvh;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: calc(env(safe-area-inset-top) + 22px) 16px calc(env(safe-area-inset-bottom) + 132px);
  background:
    radial-gradient(circle at 20% 0, rgba(0, 113, 227, .12), transparent 32%),
    var(--bg);
}

.page-view .subview-bar {
  position: sticky;
  top: 0;
  z-index: 6;
  padding: 6px 0;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--bg) 96%, transparent) 0%, color-mix(in srgb, var(--bg) 86%, transparent) 100%);
  backdrop-filter: blur(8px) saturate(1.02);
}

.map-layers {
  position: fixed;
  top: calc(env(safe-area-inset-top) + 216px);
  left: 12px;
  z-index: 35;
  display: grid;
  gap: 4px;
  justify-items: start;
  max-width: calc(100vw - 24px);
  pointer-events: auto;
}

.map-layers[hidden] {
  display: none !important;
}

.map-layers-title {
  padding: 0 2px;
  color: color-mix(in srgb, var(--ink) 64%, var(--muted));
  font-size: 10px;
  font-weight: 950;
  letter-spacing: .035em;
  text-transform: uppercase;
  white-space: nowrap;
  text-shadow: 0 1px 7px rgba(255, 255, 255, .82);
}

.map-layer-toggles {
  display: flex;
  align-items: center;
  gap: 4px;
  border: 1px solid color-mix(in srgb, var(--line) 62%, transparent);
  border-radius: 999px;
  padding: 4px;
  background: color-mix(in srgb, var(--panel) 60%, transparent);
  box-shadow: 0 8px 18px rgba(29, 29, 31, .07);
  backdrop-filter: blur(10px) saturate(1.04);
}

.map-layers button {
  min-height: 28px;
  border: 0;
  border-radius: 999px;
  padding: 0 8px;
  color: color-mix(in srgb, var(--ink) 78%, var(--muted));
  background: transparent;
  font-size: 10px;
  font-weight: 950;
  white-space: nowrap;
}

.map-layers button.active {
  color: #fff;
  background: var(--blue);
  box-shadow: 0 5px 12px rgba(0, 113, 227, .18);
}

.map-layers-sheet {
  display: grid;
  gap: 12px;
}

.map-layers-sheet-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 12px;
}

.map-layers-sheet-head h2 {
  margin: 1px 0 3px;
  color: var(--ink);
  font-size: 24px;
}

.map-layers-sheet-head span {
  color: rgba(15, 23, 42, .62);
  font-size: 13px;
  font-weight: 760;
}

.map-layers-sheet-head button {
  min-height: 40px;
  border: 1px solid color-mix(in srgb, var(--blue) 14%, var(--line));
  border-radius: 14px;
  padding: 0 14px;
  color: var(--blue);
  background: color-mix(in srgb, var(--blue) 6%, white 94%);
  font: inherit;
  font-weight: 900;
}

.map-layers-sheet-list {
  display: grid;
  gap: 8px;
}

.map-layers-sheet-list button {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 3px 10px;
  min-height: 66px;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 11px 12px;
  color: var(--ink);
  background: rgba(255, 255, 255, .72);
  font: inherit;
  text-align: left;
}

.map-layers-sheet-list button b {
  font-size: 15px;
  font-weight: 950;
}

.map-layers-sheet-list button span {
  grid-column: 1 / -1;
  color: rgba(15, 23, 42, .62);
  font-size: 12px;
  font-weight: 760;
  line-height: 1.35;
}

.map-layers-sheet-list button i {
  grid-column: 2;
  grid-row: 1;
  justify-self: end;
  min-width: 42px;
  border-radius: 999px;
  padding: 5px 8px;
  color: rgba(15, 23, 42, .56);
  background: rgba(15, 23, 42, .06);
  font-size: 10px;
  font-style: normal;
  font-weight: 950;
  text-align: center;
}

.map-layers-sheet-list button.active {
  border-color: color-mix(in srgb, var(--blue) 26%, var(--line));
  background: color-mix(in srgb, var(--blue) 6%, #fff 94%);
}

.map-layers-sheet-list button.active i {
  color: #fff;
  background: var(--blue);
}

.map-layers-nearby-settings {
  display: grid;
  gap: 10px;
  border: 1px solid color-mix(in srgb, var(--blue) 12%, var(--line));
  border-radius: 18px;
  padding: 12px;
  background: color-mix(in srgb, var(--blue) 4%, white 96%);
}

.map-layers-nearby-settings b {
  display: block;
  color: var(--ink);
  font-size: 15px;
  font-weight: 950;
}

.map-layers-nearby-settings span,
.map-layers-nearby-settings small {
  display: block;
  margin-top: 3px;
  color: rgba(15, 23, 42, .62);
  font-size: 12px;
  font-weight: 760;
  line-height: 1.35;
}

.nearby-radius-options {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
}

.nearby-visibility-toggle {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.nearby-visibility-toggle button,
.nearby-radius-options button {
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 2px;
  min-height: 44px;
  border: 1px solid var(--line);
  border-radius: 14px;
  color: rgba(15, 23, 42, .74);
  background: rgba(255, 255, 255, .82);
  font: inherit;
  font-size: 11px;
  font-weight: 900;
  white-space: nowrap;
}

.nearby-visibility-toggle button {
  min-height: 52px;
  padding: 7px 8px;
  text-align: center;
}

.nearby-visibility-toggle button b,
.nearby-radius-options button b {
  display: block;
  color: inherit;
  font-size: 12px;
  font-weight: 950;
  line-height: 1.05;
}

.nearby-visibility-toggle button span,
.nearby-radius-options button span {
  display: block;
  margin: 0;
  color: rgba(15, 23, 42, .55);
  font-size: 10px;
  font-weight: 800;
  line-height: 1.12;
  white-space: normal;
}

.nearby-visibility-toggle button.active,
.nearby-radius-options button.active {
  border-color: color-mix(in srgb, var(--blue) 44%, var(--line));
  color: #fff;
  background: var(--blue);
  box-shadow: 0 8px 16px rgba(0, 113, 227, .16);
}

.nearby-visibility-toggle button.active span,
.nearby-radius-options button.active span {
  color: rgba(255, 255, 255, .78);
}

.nearby-visibility-toggle button.danger.active {
  border-color: rgba(148, 163, 184, .45);
  color: #334155;
  background: rgba(241, 245, 249, .94);
  box-shadow: none;
}

.nearby-visibility-toggle button.danger.active span {
  color: rgba(51, 65, 85, .62);
}

.findplate-route-sheet {
  position: fixed;
  left: 10px;
  right: 10px;
  bottom: calc(env(safe-area-inset-bottom) + 86px);
  z-index: 37;
  display: grid;
  gap: 9px;
  max-width: 480px;
  margin: 0 auto;
  border: 1px solid rgba(15, 23, 42, .08);
  border-radius: 24px;
  padding: 9px 10px 10px;
  color: var(--ink);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .96), rgba(246, 250, 255, .9));
  box-shadow: 0 18px 42px rgba(15, 23, 42, .15);
  backdrop-filter: blur(18px) saturate(1.08);
  pointer-events: auto;
}

.findplate-route-sheet[hidden] {
  display: none;
}

.findplate-route-sheet[data-state="collapsed"] {
  padding: 7px 9px 9px;
  border-radius: 22px;
}

.findplate-route-sheet[data-state="half"] {
  max-height: min(44dvh, 360px);
}

.findplate-route-sheet[data-state="expanded"] {
  max-height: min(72dvh, 620px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-bottom: calc(env(safe-area-inset-bottom) + 12px);
}

.route-sheet-handle {
  justify-self: center;
  width: 48px;
  height: 16px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  padding: 0;
}

.route-sheet-handle span {
  display: block;
  width: 38px;
  height: 4px;
  margin: 6px auto;
  border-radius: 999px;
  background: rgba(15, 23, 42, .18);
}

.route-sheet-collapsed {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  min-height: 58px;
  border: 0;
  border-radius: 18px;
  padding: 7px 10px 9px;
  color: var(--ink);
  background: rgba(255, 255, 255, .72);
  text-align: left;
}

.route-sheet-collapsed span,
.route-sheet-head div,
.route-sheet-form {
  min-width: 0;
}

.route-sheet-collapsed b {
  display: block;
  overflow: hidden;
  color: var(--ink);
  font-size: 15px;
  font-weight: 950;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.route-sheet-collapsed small,
.route-sheet-line,
.route-sheet-foot small {
  overflow: hidden;
  color: var(--muted);
  font-size: 11px;
  font-weight: 820;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.route-sheet-collapsed i {
  display: grid;
  place-items: center;
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  color: var(--blue);
  background: color-mix(in srgb, var(--blue) 8%, #fff);
  font-style: normal;
  font-weight: 950;
}

.route-sheet-head,
.route-sheet-foot,
.route-sheet-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.route-sheet-head strong {
  display: block;
  color: var(--ink);
  font-size: 28px;
  font-weight: 950;
  line-height: 1;
}

.route-sheet-head b {
  color: color-mix(in srgb, var(--ink) 76%, var(--blue));
  font-size: 15px;
  font-weight: 950;
}

.route-sheet-head small {
  display: block;
  color: var(--muted);
  font-size: 11px;
  font-weight: 840;
}

.route-sheet-head button,
.route-sheet-title-row > button,
.route-sheet-foot button {
  min-height: 31px;
  border: 1px solid rgba(15, 23, 42, .08);
  border-radius: 999px;
  padding: 0 11px;
  color: var(--muted);
  background: rgba(255, 255, 255, .72);
  font-size: 12px;
  font-weight: 930;
}

.route-sheet-actions {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, .85fr);
  gap: 7px;
}

.route-sheet-form .route-sheet-actions {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.route-sheet-actions button {
  min-height: 42px;
  border: 1px solid color-mix(in srgb, var(--blue) 17%, var(--line));
  border-radius: 15px;
  padding: 0 9px;
  color: var(--blue);
  background: rgba(255, 255, 255, .72);
  font-size: 12px;
  font-weight: 940;
  white-space: nowrap;
}

.route-sheet-actions button.primary {
  color: #fff;
  border-color: transparent;
  background: linear-gradient(180deg, var(--blue), #075ec5);
  box-shadow: 0 8px 18px rgba(0, 113, 227, .18);
}

.route-sheet-actions button.secondary,
.drive-panel-actions button.secondary {
  color: color-mix(in srgb, var(--blue) 72%, var(--muted));
  border-color: color-mix(in srgb, var(--blue) 10%, var(--line));
  background: rgba(255, 255, 255, .58);
  box-shadow: none;
}

.route-sheet-actions button:disabled {
  color: rgba(15, 23, 42, .36);
  border-color: rgba(15, 23, 42, .06);
  background: rgba(248, 250, 252, .68);
  box-shadow: none;
}

.route-sheet-form {
  display: grid;
  gap: 10px;
}

.route-sheet-title-row h2 {
  margin: 0;
  color: var(--ink);
  font-size: 21px;
  font-weight: 950;
  line-height: 1.1;
}

.route-sheet-field {
  display: grid;
  gap: 5px;
  border: 1px solid rgba(15, 23, 42, .07);
  border-radius: 15px;
  padding: 10px 11px;
  background: rgba(255, 255, 255, .68);
}

.route-sheet-field span,
.route-sheet-mode-field legend {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
}

.route-sheet-field b,
.route-sheet-field input {
  color: var(--ink);
  font-size: 14px;
  font-weight: 900;
}

.route-sheet-field input {
  width: 100%;
  border: 0;
  padding: 0;
  background: transparent;
  outline: none;
}

.route-pick-map-button.compact {
  min-height: 37px;
  border-radius: 13px;
  font-size: 12px;
}

.route-sheet-field .route-destination-suggestions span,
.route-sheet-field .route-destination-suggestions b,
.route-sheet-field .route-destination-suggestions small {
  font-size: revert;
}

.route-sheet-field .route-destination-suggestions span {
  color: inherit;
}

.route-sheet-field .route-destination-suggestions b {
  color: var(--ink);
  font-size: 13px;
  font-weight: 920;
}

.route-sheet-field .route-destination-suggestions small {
  color: var(--muted);
  font-size: 11px;
}

.route-sheet-mode-field {
  margin: 0;
}

.route-engine-status {
  margin: -2px 0 0;
  color: color-mix(in srgb, var(--muted) 82%, var(--blue));
  font-size: 11px;
  font-weight: 860;
}

.route-source-badge {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  margin: 6px 0;
  padding: 8px 10px;
  border: 1px solid rgba(96, 116, 140, 0.16);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.88);
  box-shadow: 0 8px 22px rgba(20, 32, 48, 0.08);
  color: var(--ink);
}

.route-source-badge strong {
  font-size: 12px;
  font-weight: 920;
}

.route-source-badge small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 820;
  white-space: nowrap;
}

.route-source-badge--success {
  border-color: rgba(20, 151, 90, 0.24);
  background: linear-gradient(135deg, rgba(238, 255, 245, 0.96), rgba(255, 255, 255, 0.9));
  color: #087744;
}

.route-source-badge--warning {
  border-color: rgba(217, 164, 65, 0.28);
  background: linear-gradient(135deg, rgba(255, 248, 227, 0.96), rgba(255, 255, 255, 0.9));
  color: #8a620c;
}

.route-source-badge--error {
  border-color: rgba(220, 70, 70, 0.26);
  background: linear-gradient(135deg, rgba(255, 238, 235, 0.96), rgba(255, 255, 255, 0.9));
  color: #a83024;
}

.route-fallback-map-badge {
  position: absolute;
  left: 14px;
  top: calc(env(safe-area-inset-top, 0px) + 138px);
  z-index: 72;
  display: inline-flex;
  flex-direction: column;
  gap: 2px;
  max-width: min(280px, calc(100vw - 28px));
  padding: 9px 12px;
  border: 1px solid rgba(245, 158, 11, 0.34);
  border-radius: 14px;
  background: rgba(255, 247, 225, 0.94);
  box-shadow: 0 16px 38px rgba(36, 24, 8, 0.16);
  color: #8a5300;
  pointer-events: none;
}

.route-fallback-map-badge[hidden] {
  display: none;
}

.route-fallback-map-badge strong {
  font-size: 11px;
  font-weight: 940;
  letter-spacing: 0;
}

.route-fallback-map-badge small {
  overflow: hidden;
  color: #9a6708;
  font-size: 10px;
  font-weight: 820;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.drive-mode-active .home-view::after,
body.drive-mode-active .topbar,
body.drive-mode-active .shortcut-strip,
body.drive-mode-active .roadtalk-live,
body.drive-mode-active .add-studio-fab,
body.drive-mode-active .map-chips,
body.drive-mode-active .map-layers,
body.drive-mode-active .gps-status,
body.drive-mode-active .plate-cta,
body.drive-mode-active .social-drawer,
body.drive-mode-active .follow-leader-panel,
body.drive-mode-active .findplate-route-sheet {
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
}

body.drive-mode-active .map-area {
  inset: 0;
  min-height: 100dvh;
}

body.drive-mode-active .roadtalk-live.is-visible {
  top: calc(env(safe-area-inset-top) + 62px);
  left: auto;
  right: 12px;
  max-width: 132px;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  z-index: 96;
}

.drive-top-bar,
.drive-side-actions,
.drive-bottom-panel {
  position: fixed;
  left: 10px;
  right: 10px;
  z-index: 51;
  max-width: 520px;
  margin: 0 auto;
  pointer-events: auto;
}

.drive-top-bar[hidden],
.drive-side-actions[hidden],
.drive-bottom-panel[hidden] {
  display: none;
}

.drive-top-bar {
  top: calc(env(safe-area-inset-top) + 10px);
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) 42px;
  align-items: center;
  gap: 7px;
  min-height: 50px;
  border: 1px solid rgba(15, 23, 42, .07);
  border-radius: 19px;
  padding: 4px 5px;
  color: var(--ink);
  background: rgba(255, 255, 255, .92);
  box-shadow: 0 12px 30px rgba(15, 23, 42, .13);
  backdrop-filter: blur(18px) saturate(1.08);
}

.drive-top-bar button {
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 15px;
  color: var(--ink);
  background: rgba(246, 249, 253, .92);
  font-size: 18px;
  font-weight: 950;
}

.drive-top-bar .drive-top-menu {
  color: #36506c;
  font-size: 15px;
  letter-spacing: .02em;
}

.drive-top-bar div {
  min-width: 0;
}

.drive-top-bar b,
.drive-top-bar small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.drive-top-bar b {
  color: var(--ink);
  font-size: 14px;
  font-weight: 950;
}

.drive-top-bar small {
  color: var(--muted);
  font-size: 10.5px;
  font-weight: 850;
}

.drive-side-actions {
  top: calc(env(safe-area-inset-top) + 82px);
  left: auto;
  right: 13px;
  z-index: 52;
  display: grid;
  gap: 8px;
  width: auto;
  max-width: none;
}

.drive-side-actions button {
  display: grid;
  place-items: center;
  gap: 2px;
  width: 52px;
  min-height: 52px;
  border: 1px solid rgba(15, 23, 42, .09);
  border-radius: 18px;
  color: var(--ink);
  background: rgba(255, 255, 255, .9);
  box-shadow: 0 10px 24px rgba(15, 23, 42, .12);
  backdrop-filter: blur(14px) saturate(1.08);
}

.drive-side-actions span {
  display: grid;
  place-items: center;
  width: 23px;
  height: 23px;
  border-radius: 999px;
  color: #fff;
  background: #ff3b30;
  font-size: 14px;
  font-weight: 950;
}

.drive-side-actions b {
  font-size: 9.5px;
  font-weight: 950;
}

.drive-bottom-panel {
  bottom: calc(env(safe-area-inset-bottom) + 12px);
  display: grid;
  gap: 9px;
  border: 1px solid rgba(15, 23, 42, .07);
  border-radius: 26px;
  padding: 6px 12px 12px;
  color: var(--ink);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .97), rgba(245, 250, 255, .92));
  box-shadow: 0 20px 46px rgba(15, 23, 42, .16);
  backdrop-filter: blur(18px) saturate(1.08);
}

.drive-bottom-panel[data-state="mini"] {
  gap: 8px;
  border-radius: 24px;
  padding: 5px 48px 11px 13px;
}

.drive-bottom-panel[data-state="half"] {
  max-height: min(44dvh, 360px);
}

.drive-bottom-panel[data-state="expanded"] {
  max-height: min(72dvh, 620px);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.drive-panel-handle {
  justify-self: center;
  width: 76px;
  height: 18px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  padding: 0;
  cursor: grab;
  touch-action: none;
}

.drive-panel-handle span {
  display: block;
  width: 40px;
  height: 4px;
  margin: 6px auto;
  border-radius: 999px;
  background: rgba(15, 23, 42, .18);
}

.drive-panel-summary {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.drive-bottom-panel[data-state="mini"] .drive-panel-summary-product {
  grid-template-columns: minmax(116px, max-content) minmax(0, 1fr);
  align-items: center;
  column-gap: 14px;
  row-gap: 5px;
}

.drive-panel-summary div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.drive-bottom-panel[data-state="mini"] .drive-panel-metrics {
  display: grid;
  gap: 1px;
  justify-content: start;
  min-width: 0;
}

.drive-panel-summary strong {
  color: var(--ink);
  font-size: 28px;
  font-weight: 950;
  line-height: 1;
}

.drive-bottom-panel[data-state="mini"] .drive-panel-summary strong {
  font-size: clamp(24px, 7vw, 30px);
  white-space: nowrap;
}

.drive-panel-summary.large strong {
  font-size: 34px;
}

.drive-panel-summary b {
  color: color-mix(in srgb, var(--ink) 76%, var(--blue));
  font-size: 15px;
  font-weight: 950;
}

.drive-bottom-panel[data-state="mini"] .drive-panel-summary b {
  font-size: 15px;
  text-align: left;
  white-space: nowrap;
}

.drive-panel-destination {
  display: grid;
  justify-items: end;
  gap: 2px;
  min-width: 0;
  text-align: right;
}

.drive-bottom-panel[data-state="mini"] .drive-panel-destination strong {
  max-width: min(44vw, 190px);
  overflow: hidden;
  color: #102039;
  font-size: 16px;
  font-weight: 950;
  line-height: 1.05;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.drive-bottom-panel[data-state="mini"] .drive-panel-destination b {
  color: #37506b;
  font-size: 12px;
  font-weight: 920;
  white-space: nowrap;
}

.drive-bottom-panel[data-state="mini"] .drive-panel-source {
  grid-column: 1 / -1;
  display: block;
  max-width: 100%;
  overflow: hidden;
  color: #6b7c90;
  font-size: 10px;
  font-weight: 850;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.drive-panel-summary small,
.drive-panel-summary em,
.drive-panel-note {
  overflow: hidden;
  color: var(--muted);
  font-size: 11px;
  font-style: normal;
  font-weight: 820;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.drive-bottom-panel[data-state="mini"] .drive-panel-summary > small {
  align-self: center;
  color: color-mix(in srgb, var(--ink) 72%, var(--muted));
  font-size: 12px;
  font-weight: 900;
  text-align: right;
}

.drive-panel-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.drive-panel-actions-main {
  grid-template-columns: minmax(0, 1.25fr) minmax(0, .9fr);
}

.drive-bottom-panel[data-state="half"] .drive-panel-actions,
.drive-bottom-panel[data-state="expanded"] .drive-panel-actions {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.drive-bottom-panel[data-state="expanded"] .drive-panel-actions {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.drive-panel-actions button {
  min-height: 52px;
  border: 1px solid color-mix(in srgb, var(--blue) 16%, var(--line));
  border-radius: 18px;
  padding: 0 12px;
  color: var(--blue);
  background: rgba(255, 255, 255, .82);
  font-size: 13px;
  font-weight: 950;
  white-space: nowrap;
}

.drive-panel-actions button.primary {
  color: #fff;
  border-color: transparent;
  background: linear-gradient(180deg, var(--blue), #075ec5);
  box-shadow: 0 10px 20px rgba(0, 113, 227, .18);
}

.drive-panel-actions button.secondary {
  color: #244361;
  border-color: rgba(36, 67, 97, .18);
  background: rgba(255, 255, 255, .84);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .56);
}

.drive-panel-actions button.danger {
  color: #fff;
  border-color: transparent;
  background: linear-gradient(180deg, #ef4444, #dc2626);
  box-shadow: 0 10px 20px rgba(220, 38, 38, .18);
}

.drive-panel-actions button.danger-soft {
  color: #b42318;
  border-color: rgba(180, 35, 24, .18);
  background: rgba(255, 255, 255, .88);
  box-shadow: inset 0 -1px 0 rgba(180, 35, 24, .05);
}

.drive-panel-close {
  position: absolute;
  top: 8px;
  right: 10px;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(15, 23, 42, .08);
  border-radius: 999px;
  color: #475569;
  background: rgba(255, 255, 255, .8);
  box-shadow: 0 8px 18px rgba(15, 23, 42, .08);
  font-size: 23px;
  font-weight: 900;
  line-height: 1;
}

.drive-panel-close:active {
  color: #b42318;
  border-color: rgba(180, 35, 24, .16);
  transform: scale(.96);
}

.drive-panel-close-mini {
  top: 11px;
  right: 14px;
  width: 44px;
  height: 44px;
  color: #64748b;
  border-color: rgba(100, 116, 139, .14);
  background: rgba(255, 255, 255, .78);
  font-size: 22px;
}

@media (max-width: 380px) {
  .drive-bottom-panel[data-state="mini"] {
    padding-right: 44px;
  }

  .drive-bottom-panel[data-state="mini"] .drive-panel-summary-product {
    grid-template-columns: minmax(102px, max-content) minmax(0, 1fr);
    column-gap: 10px;
  }

  .drive-bottom-panel[data-state="mini"] .drive-panel-destination strong {
    max-width: 38vw;
    font-size: 15px;
  }
}

.drive-panel-actions button:disabled {
  color: rgba(15, 23, 42, .34);
  border-color: rgba(15, 23, 42, .06);
  background: rgba(248, 250, 252, .68);
  box-shadow: none;
}

.drive-panel-expanded-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.drive-panel-expanded-head h2 {
  margin: 0;
  color: var(--ink);
  font-size: 21px;
  font-weight: 950;
  line-height: 1.1;
}

.drive-panel-expanded-head button {
  min-height: 34px;
  border: 1px solid rgba(15, 23, 42, .08);
  border-radius: 999px;
  padding: 0 12px;
  color: var(--muted);
  background: rgba(255, 255, 255, .72);
  font-size: 12px;
  font-weight: 930;
}

.drive-panel-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

.drive-panel-fields-compact {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  padding-right: 36px;
}

.drive-panel-fields span {
  display: grid;
  gap: 3px;
  min-width: 0;
  border: 1px solid rgba(15, 23, 42, .06);
  border-radius: 14px;
  padding: 9px 10px;
  background: rgba(255, 255, 255, .68);
}

.drive-panel-fields small,
.drive-panel-fields b {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.drive-panel-fields small {
  color: var(--muted);
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
}

.drive-panel-fields b {
  color: var(--ink);
  font-size: 12px;
  font-weight: 930;
}

.drive-menu-actions {
  display: grid;
  gap: 8px;
}

.drive-menu-actions button {
  justify-content: start;
  min-height: 48px;
  border-radius: 16px;
  padding: 0 14px;
  text-align: left;
}

.drive-route-layers {
  display: grid;
  gap: 8px;
  border: 1px solid rgba(15, 23, 42, .06);
  border-radius: 16px;
  padding: 10px;
  background: rgba(255, 255, 255, .62);
}

.drive-route-layers > div {
  display: grid;
  gap: 2px;
}

.drive-route-layers b {
  color: var(--ink);
  font-size: 13px;
  font-weight: 950;
}

.drive-route-layers small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 820;
  line-height: 1.35;
}

.drive-route-layers nav {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.drive-route-layers button {
  min-height: 34px;
  border: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
  border-radius: 999px;
  padding: 0 10px;
  color: color-mix(in srgb, var(--ink) 76%, var(--muted));
  background: rgba(255, 255, 255, .7);
  font-size: 11px;
  font-weight: 920;
}

.drive-route-layers button.active {
  color: #fff;
  border-color: transparent;
  background: var(--blue);
  box-shadow: 0 8px 18px rgba(0, 113, 227, .16);
}

.drive-dev-info {
  border: 1px solid rgba(15, 23, 42, .07);
  border-radius: 14px;
  padding: 0;
  background: rgba(255, 255, 255, .58);
  color: var(--muted);
  font-size: 10px;
  font-weight: 830;
}

.drive-dev-info summary {
  min-height: 34px;
  padding: 9px 10px;
  cursor: pointer;
  list-style: none;
  color: var(--muted);
  font-size: 11px;
  font-weight: 930;
}

.drive-dev-info summary::-webkit-details-marker {
  display: none;
}

.drive-dev-info[open] {
  display: grid;
  gap: 7px;
  padding-bottom: 9px;
}

.drive-dev-info > *:not(summary) {
  margin-right: 10px;
  margin-left: 10px;
}

.drive-dev-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.drive-dev-actions button {
  min-height: 30px;
  border: 1px solid rgba(15, 23, 42, .08);
  border-radius: 999px;
  padding: 0 8px;
  color: #344054;
  background: rgba(255, 255, 255, .78);
  font: inherit;
  font-size: 9.5px;
  font-weight: 900;
}

body.drive-mode-active .show-my-vehicle {
  right: 18px;
  bottom: calc(env(safe-area-inset-bottom) + 130px);
  top: auto;
  width: auto;
  max-width: min(220px, calc(100vw - 36px));
  height: auto;
  max-height: 48px;
  min-height: 42px;
  border-radius: 999px;
  padding: 0 12px;
  align-self: auto;
  justify-self: auto;
  font-size: 11px;
  box-shadow: 0 10px 22px rgba(15, 23, 42, .12);
}

.drive-report-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.drive-report-grid button {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  min-height: 64px;
  border: 1px solid color-mix(in srgb, #13223a 14%, var(--line));
  border-radius: 18px;
  padding: 9px 10px;
  color: var(--ink);
  background: rgba(255, 255, 255, .9);
  box-shadow: 0 8px 20px rgba(15, 23, 42, .08);
  font-size: 14px;
  font-weight: 950;
  text-align: left;
  touch-action: manipulation;
  transition: transform 120ms ease, border-color 120ms ease, background 120ms ease;
}

.drive-report-grid button small {
  grid-column: 2;
  margin-top: -5px;
  color: #64748b;
  font-size: 11px;
  font-weight: 800;
}

.drive-report-grid button:active {
  transform: scale(.98);
  border-color: color-mix(in srgb, var(--blue) 34%, var(--line));
  background: #f5f9ff;
}

.drive-report-head {
  display: grid;
  gap: 2px;
  margin: 2px 38px 14px 0;
}

.drive-report-head h2 {
  margin: 0;
  color: #0f172a;
  font-size: 22px;
  font-weight: 950;
}

.drive-report-head p {
  margin: 0;
  color: #506277;
  font-size: 13px;
  font-weight: 850;
}

.drive-report-handle {
  display: block;
  width: 42px;
  height: 4px;
  margin: 0 auto 12px;
  border-radius: 999px;
  background: rgba(82, 96, 112, .28);
}

.drive-report-close {
  position: absolute;
  top: 12px;
  right: 12px;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(15, 23, 42, .1);
  border-radius: 999px;
  color: #24364b;
  background: rgba(255, 255, 255, .9);
  font-size: 20px;
  font-weight: 850;
}

.drive-report-icon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 13px;
  color: #0b315f;
  background: #edf5ff;
  font-size: 16px;
  font-weight: 950;
}

.drive-report-icon--police {
  color: #123d80;
  background: linear-gradient(135deg, #e8f1ff, #ffecec);
}

.drive-report-icon--accident {
  color: #9f1239;
  background: #fff1f2;
}

.drive-report-icon--traffic {
  color: #9a3412;
  background: #fff7ed;
}

.drive-report-icon--hazard {
  color: #854d0e;
  background: #fef9c3;
}

.drive-report-icon--roadworks {
  color: #7c2d12;
  background: #ffedd5;
}

.drive-report-icon--poi {
  color: #075985;
  background: #e0f2fe;
}

.drive-place-form {
  display: grid;
  gap: 12px;
}

.drive-place-form label,
.drive-place-form fieldset {
  display: grid;
  gap: 7px;
  min-width: 0;
  margin: 0;
  border: 0;
  padding: 0;
}

.drive-place-form label span,
.drive-place-form legend {
  color: #52647a;
  font-size: 11px;
  font-weight: 950;
  text-transform: uppercase;
}

.drive-place-form input,
.drive-place-form textarea {
  width: 100%;
  border: 1px solid rgba(15, 23, 42, .12);
  border-radius: 16px;
  padding: 12px 13px;
  color: #0f172a;
  background: rgba(255, 255, 255, .94);
  font: inherit;
  font-size: 14px;
  font-weight: 850;
}

.drive-place-form textarea {
  resize: vertical;
}

.drive-place-choice-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.drive-place-choice-row button {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 7px;
  min-height: 44px;
  border: 1px solid rgba(15, 23, 42, .11);
  border-radius: 15px;
  padding: 0 10px;
  color: #14243a;
  background: rgba(255, 255, 255, .82);
  font-size: 12px;
  font-weight: 950;
}

.drive-place-choice-row button.active {
  border-color: color-mix(in srgb, var(--blue) 40%, rgba(15, 23, 42, .12));
  color: var(--blue);
  background: #edf5ff;
  box-shadow: inset 0 0 0 1px rgba(0, 113, 227, .12);
}

.drive-place-choice-row button span {
  display: inline-grid;
  place-items: center;
  min-width: 24px;
  height: 24px;
  border-radius: 10px;
  background: rgba(0, 113, 227, .08);
  font-size: 11px;
}

.drive-place-location {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  border: 1px solid rgba(15, 23, 42, .09);
  border-radius: 18px;
  padding: 11px;
  background: rgba(248, 251, 255, .92);
}

.drive-place-location b {
  display: block;
  color: #13223a;
  font-size: 13px;
  font-weight: 950;
}

.drive-place-location small {
  display: block;
  margin-top: 2px;
  color: #64748b;
  font-size: 11px;
  font-weight: 830;
}

.drive-place-location.missing {
  border-color: rgba(217, 119, 6, .24);
  background: #fffbeb;
}

.drive-place-location button {
  min-height: 38px;
  border: 1px solid color-mix(in srgb, var(--blue) 24%, var(--line));
  border-radius: 999px;
  padding: 0 11px;
  color: var(--blue);
  background: #fff;
  font-size: 11px;
  font-weight: 950;
  white-space: nowrap;
}

.drive-place-actions {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr);
  gap: 9px;
}

.drive-place-actions button {
  min-height: 48px;
  border: 1px solid rgba(15, 23, 42, .1);
  border-radius: 17px;
  color: #14243a;
  background: rgba(255, 255, 255, .88);
  font-size: 13px;
  font-weight: 950;
}

.drive-place-actions button.primary {
  border: 0;
  color: #fff;
  background: linear-gradient(135deg, var(--blue), #0a58ca);
  box-shadow: 0 12px 26px rgba(0, 113, 227, .22);
}

.road-report-map-dot {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 2px solid #fff;
  border-radius: 999px;
  color: #fff;
  box-shadow: 0 8px 18px rgba(15, 23, 42, .22);
  font-size: 14px;
  font-weight: 950;
}

.road-report-map-dot--police {
  background: linear-gradient(135deg, #0b64d8 0 48%, #dc2626 52% 100%);
}

.road-report-map-dot--accident {
  background: #dc2626;
}

.road-report-map-dot--traffic {
  background: #f97316;
}

.road-report-map-dot--hazard {
  color: #2b1d04;
  background: #facc15;
}

.road-report-map-dot--roadworks {
  background: #ea580c;
}

.road-report-map-dot--poi {
  background: #0284c7;
}

.road-report-map-dot--other {
  background: #475569;
}

.fp-marker-road small {
  position: absolute;
  left: 50%;
  top: 29px;
  transform: translateX(-50%);
  display: none;
  border: 1px solid rgba(15, 23, 42, .12);
  border-radius: 999px;
  padding: 3px 7px;
  color: #172033;
  background: rgba(255,255,255,.92);
  box-shadow: 0 7px 16px rgba(15, 23, 42, .12);
  font-size: 10px;
  font-weight: 950;
  white-space: nowrap;
}

.fp-marker-road.is-focused small,
.fp-marker-road:hover small {
  display: block;
}

.road-report-toast,
.road-report-confirm {
  position: fixed;
  left: 12px;
  right: 12px;
  z-index: 72;
  display: grid;
  align-items: center;
  border: 1px solid rgba(15, 23, 42, .12);
  border-radius: 18px;
  color: #0f172a;
  background: rgba(255, 255, 255, .96);
  box-shadow: 0 14px 34px rgba(15, 23, 42, .18);
  backdrop-filter: blur(10px);
}

.road-report-toast {
  bottom: calc(env(safe-area-inset-bottom) + 96px);
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  min-height: 52px;
  padding: 10px 12px;
}

.road-report-toast b,
.road-report-confirm b {
  font-size: 14px;
  font-weight: 950;
}

.road-report-toast button,
.road-report-confirm button {
  min-height: 36px;
  border: 1px solid color-mix(in srgb, var(--blue) 24%, var(--line));
  border-radius: 999px;
  padding: 0 12px;
  color: var(--blue);
  background: #fff;
  font-size: 12px;
  font-weight: 950;
}

.road-report-confirm {
  bottom: calc(env(safe-area-inset-bottom) + 150px);
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 8px;
  padding: 11px;
}

.road-report-confirm small {
  display: block;
  margin-top: 2px;
  color: #64748b;
  font-size: 11px;
  font-weight: 820;
}

.follow-leader-panel {
  position: fixed;
  top: calc(env(safe-area-inset-top) + 276px);
  left: 12px;
  right: 12px;
  z-index: 36;
  display: grid;
  gap: 8px;
  max-width: 380px;
  border: 1px solid rgba(217, 164, 65, .28);
  border-radius: 20px;
  padding: 11px;
  color: var(--ink);
  background:
    linear-gradient(135deg, rgba(255, 252, 239, .94), rgba(245, 250, 255, .9));
  box-shadow: 0 16px 38px rgba(15, 23, 42, .12);
  backdrop-filter: blur(14px) saturate(1.08);
  pointer-events: auto;
}

.follow-leader-panel[hidden] {
  display: none;
}

.follow-leader-panel-head,
.follow-leader-panel-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.follow-leader-panel-head b {
  display: block;
  color: var(--ink);
  font-size: 15px;
  font-weight: 950;
  line-height: 1.1;
}

.follow-leader-panel-head button {
  width: 30px;
  height: 30px;
  border: 1px solid rgba(15, 23, 42, .08);
  border-radius: 999px;
  color: var(--muted);
  background: rgba(255, 255, 255, .72);
  font-size: 17px;
  font-weight: 900;
}

.follow-leader-panel-body {
  display: grid;
  gap: 3px;
}

.follow-leader-panel-body span,
.follow-leader-panel-body small,
.follow-leader-panel-body em {
  color: var(--muted);
  font-size: 11px;
  font-style: normal;
  font-weight: 820;
  line-height: 1.3;
}

.follow-leader-panel-body strong {
  color: var(--ink);
  font-size: 22px;
  font-weight: 950;
  line-height: 1;
}

.follow-leader-panel-body em {
  color: #9a6700;
}

.follow-leader-panel-pro {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px;
  margin-top: 3px;
}

.follow-leader-panel-pro span {
  border: 1px solid rgba(217, 164, 65, .22);
  border-radius: 12px;
  padding: 6px 7px;
  background: rgba(255, 255, 255, .62);
}

.follow-leader-panel-pro small {
  grid-column: 1 / -1;
}

.follow-leader-panel-actions {
  justify-content: flex-start;
  flex-wrap: wrap;
}

.follow-leader-panel-actions button {
  min-height: 31px;
  border: 1px solid color-mix(in srgb, var(--blue) 18%, var(--line));
  border-radius: 999px;
  padding: 0 10px;
  color: var(--blue);
  background: rgba(255, 255, 255, .78);
  font-size: 11px;
  font-weight: 940;
}

.follow-leader-panel-actions button:first-child {
  color: #fff;
  border-color: transparent;
  background: linear-gradient(180deg, var(--blue), #075ec5);
}

#garage-view {
  padding: 0 0 calc(env(safe-area-inset-bottom) + 148px);
}

#garage-view .subview-bar {
  position: sticky;
  top: 0;
  z-index: 8;
  margin: 0;
  min-height: 44px;
  padding: calc(env(safe-area-inset-top) + 7px) 14px 8px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--bg) 98%, #fff 2%) 0%, color-mix(in srgb, var(--bg) 94%, #fff 6%) 100%);
  border-bottom: 1px solid color-mix(in srgb, var(--line) 72%, transparent);
  backdrop-filter: blur(6px) saturate(1.01);
}

#garage-view .subview-bar strong {
  font-size: 14px;
}

#garage-view .subview-bar button {
  min-height: 34px;
  padding: 0 10px;
  font-size: 12px;
  box-shadow: 0 5px 12px rgba(29, 29, 31, .055);
}

#garage-close {
  min-width: 38px;
  padding: 0 8px !important;
  font-size: 16px !important;
  letter-spacing: .08em;
}

#garage-list {
  padding: 7px 14px calc(env(safe-area-inset-bottom) + 168px);
}

.page-header {
  margin-bottom: 16px;
}

.card-list {
  display: grid;
  gap: 10px;
}

.vehicle-card strong {
  font-size: 24px;
}

.vehicle-card-photo {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border: 1px solid rgba(255, 255, 255, .7);
  border-radius: 14px;
}

.vehicle-card em {
  font-style: normal;
  font-weight: 900;
}

.vehicle-card button {
  min-height: 42px;
  border: 1px solid var(--line);
  border-radius: 14px;
  color: var(--ink);
  background: color-mix(in srgb, var(--panel) 82%, #fff 18%);
  font-weight: 950;
}

.garage-passport {
  display: grid;
  gap: 7px;
  padding-bottom: 0;
}

.garage-vehicle-carousel-block {
  display: grid;
  gap: 4px;
}

.garage-carousel-label {
  color: var(--muted);
  font-size: 10px;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: .05em;
}

.garage-vehicle-carousel {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  overflow-y: hidden;
  margin: 0 -14px;
  padding: 0 14px 2px;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.garage-vehicle-carousel::-webkit-scrollbar {
  display: none;
}

.garage-vehicle-showcase-block {
  display: grid;
  gap: 5px;
}

.garage-vehicle-showcase {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  min-height: 132px;
  border: 1px solid color-mix(in srgb, var(--blue) 12%, var(--line));
  border-radius: 24px;
  padding: 12px;
  color: var(--ink);
  background:
    radial-gradient(circle at 92% 0, color-mix(in srgb, var(--blue) 11%, transparent), transparent 34%),
    linear-gradient(145deg, rgba(255, 255, 255, .92), color-mix(in srgb, var(--panel) 84%, #fff 16%));
  box-shadow: 0 12px 28px rgba(29, 29, 31, .065);
  text-align: left;
}

.garage-vehicle-showcase.empty {
  min-height: 150px;
  grid-template-columns: 62px minmax(0, 1fr);
  align-items: center;
  align-content: center;
  gap: 12px;
  color: var(--ink);
}

.garage-showcase-placeholder {
  position: relative;
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border: 1px solid rgba(255, 255, 255, .78);
  border-radius: 20px;
  color: var(--blue);
  background: rgba(255, 255, 255, .72);
  box-shadow: 0 14px 34px rgba(0, 113, 227, .12);
  font-size: 31px;
  font-weight: 950;
}

.garage-showcase-thumb {
  position: relative;
  overflow: hidden;
  display: grid;
  place-items: center;
  width: 92px;
  height: 96px;
  border: 1px solid rgba(255, 255, 255, .82);
  border-radius: 22px;
  color: var(--blue);
  background:
    radial-gradient(circle at 18% 14%, color-mix(in srgb, var(--blue) 16%, transparent), transparent 38%),
    linear-gradient(145deg, #f8fbff, #e2efff);
  box-shadow: 0 9px 22px rgba(0, 113, 227, .10);
  font-size: 38px;
  font-weight: 950;
}

.garage-showcase-thumb img,
.garage-showcase-thumb video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.garage-showcase-thumb[data-garage-media-viewer] {
  cursor: pointer;
}

.garage-showcase-media-badge {
  position: absolute;
  top: 7px;
  left: 7px;
  z-index: 2;
  border: 1px solid rgba(255, 255, 255, .72);
  border-radius: 999px;
  padding: 3px 6px;
  color: #102033;
  background: rgba(255, 255, 255, .78);
  box-shadow: 0 5px 12px rgba(29, 29, 31, .10);
  backdrop-filter: blur(8px);
  font-size: 8px;
  font-style: normal;
  font-weight: 950;
  line-height: 1;
}

.garage-showcase-thumb i {
  position: absolute;
  right: 8px;
  bottom: 8px;
  width: 11px;
  height: 11px;
  border: 2px solid rgba(255, 255, 255, .92);
  border-radius: 999px;
  background: #9aa8b6;
  box-shadow: 0 4px 10px rgba(29, 29, 31, .16);
}

.garage-showcase-thumb i.online {
  background: #34c759;
}

.garage-showcase-copy {
  display: grid;
  gap: 5px;
  min-width: 0;
  max-width: 100%;
}

.garage-vehicle-showcase.empty .garage-showcase-copy {
  color: var(--ink);
  text-shadow: none;
}

.garage-showcase-copy b,
.garage-showcase-copy small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.garage-showcase-copy b {
  color: var(--ink);
  font-size: 21px;
  font-weight: 950;
  letter-spacing: 0;
  line-height: 1.05;
}

.garage-showcase-copy small {
  color: color-mix(in srgb, var(--ink) 56%, var(--muted));
  font-size: 12px;
  font-weight: 900;
}

.garage-showcase-kicker {
  color: var(--blue);
  font-size: 10px;
  font-weight: 950;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.garage-showcase-badges {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
  margin-top: 2px;
}

.garage-showcase-badges span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
  border-radius: 999px;
  min-height: 24px;
  padding: 0 8px;
  color: var(--ink);
  background: rgba(255, 255, 255, .72);
  font-size: 9px;
  font-weight: 950;
  line-height: 1;
  text-shadow: none;
}

.garage-showcase-badges span.online {
  color: #0b7d3b;
  background: rgba(237, 255, 246, .88);
}

.garage-showcase-badges span i {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: currentColor;
}

.garage-vehicle-card {
  flex: 0 0 130px;
  scroll-snap-align: start;
  display: grid;
  grid-template-rows: 46px minmax(0, 1fr);
  gap: 5px;
  min-height: 116px;
  border: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
  border-radius: 15px;
  padding: 7px;
  color: var(--ink);
  background: color-mix(in srgb, #fff 60%, transparent);
  box-shadow: 0 7px 18px rgba(29, 29, 31, .05);
  text-align: left;
}

.garage-vehicle-card.active {
  flex-basis: min(246px, calc(100vw - 60px));
  grid-template-columns: 72px minmax(0, 1fr);
  grid-template-rows: 1fr;
  align-items: center;
  min-height: 122px;
  border-color: color-mix(in srgb, var(--blue) 42%, var(--line));
  background:
    linear-gradient(145deg, color-mix(in srgb, #fff 74%, transparent), color-mix(in srgb, var(--panel) 62%, transparent)),
    radial-gradient(circle at 10% 8%, color-mix(in srgb, var(--blue) 16%, transparent), transparent 36%);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--blue) 10%, transparent), 0 10px 24px rgba(29, 29, 31, .07);
}

.garage-vehicle-card.add {
  flex-basis: 96px;
  min-height: 106px;
  place-items: center;
  align-content: center;
  justify-items: center;
  text-align: center;
  color: var(--blue);
  border-style: dashed;
  background: color-mix(in srgb, var(--blue) 7%, #fff 93%);
}

.garage-vehicle-card.add.only {
  width: 100%;
  min-height: 132px;
}

.garage-vehicle-card-media {
  overflow: hidden;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 12px;
  color: var(--blue);
  background: linear-gradient(135deg, #f7fbff, #e4efff);
  font-size: 20px;
  font-weight: 950;
}

.garage-vehicle-card.active .garage-vehicle-card-media {
  width: 72px;
  height: 80px;
  border: 1px solid rgba(255, 255, 255, .82);
  border-radius: 15px;
  font-size: 28px;
}

.garage-vehicle-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.garage-vehicle-card-body {
  display: grid;
  min-width: 0;
  gap: 4px;
}

.garage-vehicle-card b,
.garage-vehicle-card small,
.garage-vehicle-card em {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.garage-vehicle-card b {
  color: var(--ink);
  font-size: 13px;
  font-weight: 950;
}

.garage-vehicle-card.active b {
  font-size: 16px;
  line-height: 1.05;
}

.garage-vehicle-card small {
  color: var(--muted);
  font-size: 10px;
  font-weight: 850;
}

.garage-vehicle-card.active small {
  font-size: 12px;
}

.garage-vehicle-card em {
  width: fit-content;
  border-radius: 999px;
  padding: 3px 6px;
  color: var(--blue);
  background: color-mix(in srgb, var(--blue) 9%, transparent);
  font-size: 9px;
  font-style: normal;
  font-weight: 950;
}

.garage-active-card {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  gap: 11px;
  align-items: center;
  border: 1px solid color-mix(in srgb, var(--line) 76%, transparent);
  border-radius: 18px;
  min-height: 138px;
  padding: 10px;
  background:
    linear-gradient(145deg, color-mix(in srgb, #fff 74%, transparent), color-mix(in srgb, var(--panel) 62%, transparent)),
    radial-gradient(circle at 8% 10%, color-mix(in srgb, var(--blue) 15%, transparent), transparent 36%),
    radial-gradient(circle at 96% 0, rgba(255,255,255,.7), transparent 34%);
  box-shadow: 0 8px 22px rgba(29, 29, 31, .065);
}

.garage-active-card.empty {
  grid-template-columns: 1fr auto;
}

.garage-active-card.empty button {
  min-height: 42px;
  border: 0;
  border-radius: 14px;
  color: #fff;
  background: var(--blue);
  font-weight: 950;
  padding: 0 14px;
}

.garage-active-thumb {
  overflow: hidden;
  display: grid;
  place-items: center;
  width: 88px;
  height: 88px;
  border: 1px solid rgba(255,255,255,.82);
  border-radius: 18px;
  color: var(--blue);
  background: linear-gradient(135deg, #f7fbff, #e3efff);
  font-size: 30px;
  font-weight: 950;
}

.garage-active-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.garage-active-body {
  display: grid;
  min-width: 0;
  gap: 6px;
}

.garage-active-body h2 {
  margin: 0;
  color: var(--ink);
  font-size: 20px;
  line-height: 1.05;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.garage-active-body p,
.garage-active-body small {
  margin: 0;
  color: var(--muted);
  font-size: 11px;
  font-weight: 820;
  line-height: 1.35;
}

.garage-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
}

.garage-chip-row span {
  border: 1px solid color-mix(in srgb, var(--line) 76%, transparent);
  border-radius: 999px;
  padding: 3px 5px;
  color: var(--muted);
  background: rgba(255,255,255,.62);
  font-size: 9px;
  font-weight: 950;
}

.garage-chip-row span.online {
  color: #176534;
  border-color: color-mix(in srgb, #34c759 32%, var(--line));
  background: color-mix(in srgb, #ecfff3 72%, transparent);
}

.garage-quick-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 5px;
}

.garage-quick-actions button,
.garage-settings-compact button,
.garage-activity-grid button,
.garage-inline-action {
  min-height: 48px;
  border: 1px solid color-mix(in srgb, var(--line) 76%, transparent);
  border-radius: 16px;
  color: var(--ink);
  background: color-mix(in srgb, #fff 70%, transparent);
  box-shadow: 0 10px 24px rgba(29, 29, 31, .055);
  font-weight: 930;
  text-align: left;
  padding: 8px 10px;
}

.garage-quick-actions button {
  position: relative;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 3px;
  min-height: 60px;
  border-radius: 13px;
  padding: 6px 5px;
  text-align: center;
}

.garage-quick-actions button > span {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 8px;
  color: var(--blue);
  background: color-mix(in srgb, var(--blue) 10%, #fff 90%);
  font-size: 12px;
  font-weight: 950;
}

.garage-quick-actions button.highlight {
  color: #08366f;
  border-color: color-mix(in srgb, var(--blue) 38%, var(--line));
  background: linear-gradient(145deg, color-mix(in srgb, var(--blue) 12%, #fff), #fff);
}

.garage-quick-actions button.highlight > span {
  color: #fff;
  background: var(--blue);
}

.garage-quick-actions b,
.garage-activity-grid b {
  font-size: 11px;
}

.garage-quick-actions small,
.garage-activity-grid span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
  line-height: 1.25;
}

.garage-quick-actions i {
  position: absolute;
  top: 6px;
  right: 7px;
  min-width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  color: #fff;
  background: #ff3b30;
  font-size: 9px;
  font-style: normal;
  font-weight: 950;
}

.garage-hero {
  display: grid;
  gap: 12px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--line) 72%, transparent);
  border-radius: 26px;
  padding: 12px;
  background:
    linear-gradient(145deg, color-mix(in srgb, #fff 78%, transparent), color-mix(in srgb, var(--panel) 72%, transparent)),
    radial-gradient(circle at 14% 12%, color-mix(in srgb, var(--blue) 16%, transparent), transparent 34%);
  box-shadow: 0 18px 52px rgba(29, 29, 31, .11);
}

.garage-hero.empty {
  padding: 18px;
}

.garage-hero-media {
  position: relative;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 10px;
  min-height: 168px;
  border: 1px solid rgba(255, 255, 255, .72);
  border-radius: 22px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--blue) 18%, transparent), transparent),
    linear-gradient(145deg, #f7fbff, #e8edf4);
  background-position: center;
  background-size: cover;
  color: var(--blue);
  font-size: 42px;
  font-weight: 950;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.76);
}

.garage-hero-media img,
.garage-vehicle-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.garage-hero-media img {
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

.garage-hero-media > span {
  display: grid;
  place-items: center;
  width: 78px;
  height: 78px;
  border: 1px solid rgba(255, 255, 255, .78);
  border-radius: 26px;
  background: rgba(255, 255, 255, .52);
  box-shadow: 0 14px 32px rgba(0, 113, 227, .12);
}

.garage-photo-action {
  min-height: 38px;
  border: 1px solid color-mix(in srgb, var(--blue) 28%, var(--line));
  border-radius: 999px;
  padding: 0 14px;
  color: var(--ink);
  background: rgba(255, 255, 255, .72);
  box-shadow: 0 10px 24px rgba(29, 29, 31, .08);
  font-size: 12px;
  font-weight: 950;
}

.garage-hero-body {
  display: grid;
  gap: 8px;
}

.garage-hero-kicker,
.garage-stamps {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  align-items: center;
}

.garage-hero-kicker span,
.garage-hero-kicker em,
.garage-stamps span {
  border: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
  border-radius: 999px;
  padding: 6px 10px;
  color: var(--muted);
  background: rgba(255, 255, 255, .58);
  font-size: 11px;
  font-style: normal;
  font-weight: 950;
}

.garage-hero-kicker em {
  color: #12351e;
  border-color: color-mix(in srgb, #34c759 32%, var(--line));
  background: color-mix(in srgb, #ecfff3 72%, transparent);
}

.garage-hero h1 {
  margin: 0;
  color: var(--ink);
  font-size: clamp(28px, 8vw, 38px);
  letter-spacing: -.02em;
  line-height: .96;
}

.garage-hero p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.42;
}

.garage-plate-badge {
  justify-self: start;
  border: 2px solid color-mix(in srgb, #12213a 28%, var(--blue) 12%);
  border-radius: 12px;
  padding: 9px 16px;
  color: #111827;
  background:
    linear-gradient(90deg, var(--blue) 0 42px, transparent 42px),
    linear-gradient(180deg, #fff, #f6f8fb);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.8), 0 9px 22px rgba(29,29,31,.1);
  font-size: 21px;
  font-weight: 950;
  letter-spacing: .04em;
  text-indent: 32px;
}

.garage-stat-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.garage-stat-card {
  display: grid;
  gap: 5px;
  min-height: 72px;
  border: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
  border-radius: 18px;
  padding: 12px;
  background: color-mix(in srgb, #fff 68%, transparent);
}

.garage-stat-card span,
.garage-section-title span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.garage-stat-card b {
  color: var(--ink);
  font-size: 15px;
  line-height: 1.15;
}

.garage-shelf-block {
  display: grid;
  gap: 7px;
}

.garage-section-title {
  display: grid;
  gap: 2px;
}

.garage-section-title b {
  color: var(--ink);
  font-size: 16px;
}

.garage-vehicle-shelf {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  margin: 0 -14px;
  padding: 0 14px 3px;
  scrollbar-width: none;
}

.garage-vehicle-shelf::-webkit-scrollbar { display: none; }

.garage-vehicle-tile {
  flex: 0 0 112px;
  display: grid;
  gap: 4px;
  justify-items: start;
  min-height: 124px;
  border: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
  border-radius: 15px;
  padding: 8px;
  color: var(--ink);
  background: color-mix(in srgb, #fff 62%, transparent);
  box-shadow: 0 7px 18px rgba(29, 29, 31, .05);
  text-align: left;
}

.garage-vehicle-tile.active {
  border-color: color-mix(in srgb, var(--blue) 42%, var(--line));
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--blue) 12%, transparent), 0 8px 18px rgba(29,29,31,.055);
}

.garage-vehicle-thumb {
  overflow: hidden;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 13px;
  color: var(--blue);
  background: linear-gradient(135deg, #f7fbff, #e4efff);
  background-position: center;
  background-size: cover;
  font-weight: 950;
}

.garage-vehicle-tile b,
.garage-vehicle-tile small,
.garage-vehicle-tile em {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.garage-vehicle-tile b {
  font-size: 12px;
}

.garage-vehicle-tile small {
  color: var(--muted);
  font-size: 10px;
  font-weight: 850;
}

.garage-vehicle-tile em {
  border-radius: 999px;
  padding: 3px 6px;
  color: var(--blue);
  background: color-mix(in srgb, var(--blue) 9%, transparent);
  font-size: 9px;
  font-style: normal;
  font-weight: 950;
}

.garage-tabs {
  display: flex;
  gap: 5px;
  overflow-x: auto;
  margin: 0 -14px;
  padding: 0 14px 4px;
  background: transparent;
  scrollbar-width: none;
}

.garage-tabs::-webkit-scrollbar { display: none; }

.garage-tabs button {
  flex: 0 0 auto;
  min-height: 34px;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0 11px;
  color: var(--ink);
  background: rgba(255, 255, 255, .58);
  font-size: 10px;
  font-weight: 950;
}

.garage-tabs button.active {
  color: #fff;
  border-color: var(--blue);
  background: var(--blue);
}

.garage-panel {
  display: grid;
  gap: 8px;
  padding-bottom: 0;
}

.garage-panel-head,
.garage-event-card,
.garage-local-card,
.garage-next-card,
.garage-cost-summary,
.garage-profile-summary,
.garage-profile-grid article,
.garage-warning {
  border: 1px solid var(--line);
  border-radius: 15px;
  background: rgba(255, 255, 255, .50);
  box-shadow: 0 6px 18px rgba(29, 29, 31, .045);
}

.garage-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px;
  background: transparent;
  box-shadow: none;
}

.garage-panel-head > div {
  min-width: 0;
}

.garage-panel-head div,
.garage-event-card div,
.garage-local-card div {
  display: grid;
  gap: 4px;
}

.garage-panel-head b,
.garage-event-card b,
.garage-local-card b {
  color: var(--ink);
  font-size: 14px;
}

.garage-panel-head span,
.garage-event-card span,
.garage-event-card small,
.garage-local-card span,
.garage-local-card small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  line-height: 1.35;
}

.garage-panel-head button,
.garage-event-card button,
.garage-local-card button,
.garage-event-form button {
  min-height: 34px;
  border: 1px solid var(--line);
  border-radius: 12px;
  color: var(--ink);
  background: rgba(255, 255, 255, .72);
  font-weight: 950;
  padding: 0 10px;
  white-space: nowrap;
}

.garage-event-card {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 9px;
}

.garage-local-card {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 9px;
}

.garage-local-card > div {
  min-width: 0;
}

.garage-local-card b,
.garage-local-card span,
.garage-local-card small {
  overflow: hidden;
  text-overflow: ellipsis;
}

.garage-local-card b,
.garage-local-card span {
  white-space: nowrap;
}

.garage-local-actions {
  justify-items: end;
  min-width: 82px;
}

.garage-local-actions strong {
  color: var(--ink);
  font-size: 13px;
  font-weight: 950;
  text-align: right;
}

.garage-local-actions em {
  width: fit-content;
  border-radius: 999px;
  padding: 5px 8px;
  color: #fff;
  background: var(--blue);
  font-size: 10px;
  font-style: normal;
  font-weight: 950;
}

.garage-local-actions em.overdue { background: #d84b16; }
.garage-local-actions em.soon { background: #ff9f0a; }
.garage-local-actions em.done { background: #34c759; }

.garage-local-actions button {
  min-height: 27px;
  border-radius: 10px;
  padding: 0 8px;
  font-size: 10px;
}

.garage-logbook {
  position: relative;
  display: grid;
  gap: 9px;
}

.garage-event-icon {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 12px;
  color: var(--blue);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--blue) 12%, transparent), transparent),
    rgba(255, 255, 255, .72);
  font-size: 12px;
  font-weight: 950;
}

.garage-event-card em {
  width: fit-content;
  border-radius: 999px;
  padding: 5px 9px;
  color: #fff;
  background: var(--blue);
  font-size: 11px;
  font-style: normal;
  font-weight: 950;
}

.garage-event-card em.overdue { background: #d84b16; }
.garage-event-card em.soon { background: #ff9f0a; }
.garage-event-card em.done { background: #34c759; }

.garage-event-card strong {
  color: var(--ink);
  font-size: 13px;
  text-align: right;
}

.garage-next-card {
  display: grid;
  gap: 5px;
  padding: 10px;
  background:
    radial-gradient(circle at 90% 0, color-mix(in srgb, var(--blue) 14%, transparent), transparent 34%),
    rgba(255, 255, 255, .66);
}

.garage-next-card span,
.garage-cost-summary span,
.garage-profile-grid span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
}

.garage-next-card b,
.garage-cost-summary b,
.garage-profile-grid b {
  color: var(--ink);
  font-size: 15px;
}

.garage-next-card strong {
  color: var(--blue);
  font-size: 18px;
}

.garage-next-card em,
.garage-cost-summary em {
  width: fit-content;
  border-radius: 999px;
  padding: 5px 9px;
  color: #fff;
  background: var(--blue);
  font-size: 11px;
  font-style: normal;
  font-weight: 950;
}

.garage-next-card em.overdue { background: #d84b16; }
.garage-next-card em.soon { background: #ff9f0a; }
.garage-next-card em.done { background: #34c759; }

.garage-profile-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

.garage-profile-summary {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  padding: 9px;
}

.garage-profile-summary > span {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 14px;
  color: var(--blue);
  background: color-mix(in srgb, var(--blue) 9%, #fff 91%);
  font-size: 23px;
}

.garage-profile-summary div {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.garage-profile-summary b,
.garage-profile-summary small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.garage-profile-summary b {
  color: var(--ink);
  font-size: 15px;
  font-weight: 950;
}

.garage-profile-summary small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 830;
}

.garage-profile-grid article {
  display: grid;
  gap: 4px;
  min-height: 56px;
  padding: 9px;
}

.garage-profile-management {
  display: grid;
  gap: 8px;
  border: 1px solid color-mix(in srgb, var(--blue) 16%, var(--line));
  border-radius: 16px;
  padding: 10px;
  background:
    radial-gradient(circle at 92% 0, color-mix(in srgb, var(--blue) 12%, transparent), transparent 38%),
    rgba(255, 255, 255, .62);
  box-shadow: 0 8px 20px rgba(29, 29, 31, .045);
}

.garage-profile-management > div:first-child {
  display: grid;
  gap: 3px;
}

.garage-profile-management > div:first-child b {
  color: var(--ink);
  font-size: 13px;
  font-weight: 950;
}

.garage-profile-management > div:first-child span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 820;
  line-height: 1.35;
}

.garage-profile-settings-main,
.garage-profile-management-grid button {
  border: 1px solid color-mix(in srgb, var(--line) 76%, transparent);
  border-radius: 14px;
  color: var(--ink);
  background: rgba(255, 255, 255, .76);
  text-align: left;
}

.garage-profile-settings-main {
  display: grid;
  gap: 4px;
  min-height: 58px;
  padding: 10px 12px;
  border-color: color-mix(in srgb, var(--blue) 28%, var(--line));
  background: linear-gradient(135deg, color-mix(in srgb, var(--blue) 9%, #fff), rgba(255, 255, 255, .88));
  box-shadow: 0 7px 18px rgba(0, 113, 227, .08);
}

.garage-profile-settings-main b,
.garage-profile-management-grid b {
  color: var(--ink);
  font-size: 12px;
  font-weight: 950;
}

.garage-profile-settings-main span,
.garage-profile-management-grid span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 820;
  line-height: 1.25;
}

.garage-profile-management-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

.garage-profile-management-grid button {
  display: grid;
  gap: 3px;
  min-height: 46px;
  padding: 8px 9px;
}

.garage-settings-compact,
.garage-activity-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.garage-settings-compact button {
  display: grid;
  gap: 3px;
  min-height: 46px;
  font-size: 11px;
}

.garage-settings-compact button b {
  color: var(--ink);
  font-size: 12px;
}

.garage-settings-compact button span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 820;
  line-height: 1.25;
}

.garage-activity-grid button {
  display: grid;
  gap: 3px;
}

.garage-inline-action {
  width: 100%;
  min-height: 42px;
  text-align: center;
}

.garage-gallery-panel {
  position: relative;
  gap: 7px;
}

.garage-gallery-panel-photo-first {
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.garage-gallery-label {
  display: none;
}

.garage-gallery-intro {
  display: grid;
  gap: 1px;
}

.garage-gallery-intro h3 {
  margin: 0;
  color: var(--ink);
  font-size: 15px;
  font-weight: 950;
  letter-spacing: 0;
  line-height: 1.08;
}

.garage-gallery-intro p {
  margin: 0;
  color: var(--muted);
  font-size: 9.5px;
  font-weight: 830;
  line-height: 1.35;
}

.garage-gallery-cover {
  position: relative;
  overflow: hidden;
  display: grid;
  align-items: end;
  height: 224px;
  min-height: 0;
  border: 1px solid color-mix(in srgb, var(--line) 72%, transparent);
  border-radius: 19px;
  padding: 10px;
  color: var(--ink);
  background:
    radial-gradient(circle at 16% 10%, color-mix(in srgb, var(--blue) 22%, transparent), transparent 34%),
    linear-gradient(145deg, #f8fbff, #e5f0ff);
  box-shadow: 0 9px 24px rgba(29, 29, 31, .065);
}

.garage-gallery-cover::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 68%;
  background: linear-gradient(180deg, transparent 0%, rgba(9, 22, 43, .30) 38%, rgba(9, 22, 43, .72) 100%);
  pointer-events: none;
}

.garage-gallery-cover img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.garage-gallery-cover-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -52%);
  display: grid;
  place-items: center;
  width: 68px;
  height: 68px;
  border: 1px solid rgba(255, 255, 255, .78);
  border-radius: 22px;
  color: var(--blue);
  background: rgba(255, 255, 255, .66);
  box-shadow: 0 14px 34px rgba(0, 113, 227, .12);
  font-size: 33px;
}

.garage-gallery-cover-change {
  position: absolute;
  top: 9px;
  right: 9px;
  z-index: 2;
  min-height: 28px;
  border: 1px solid rgba(255, 255, 255, .72);
  border-radius: 999px;
  padding: 0 10px;
  color: var(--ink);
  background: rgba(255, 255, 255, .74);
  box-shadow: 0 6px 14px rgba(29, 29, 31, .07);
  font-size: 10px;
  font-weight: 950;
}

.garage-gallery-public-badge {
  position: absolute;
  top: 9px;
  left: 9px;
  z-index: 2;
  min-height: 28px;
  border: 1px solid rgba(255, 255, 255, .72);
  border-radius: 999px;
  padding: 7px 10px;
  color: #153a65;
  background: rgba(255, 255, 255, .78);
  box-shadow: 0 6px 14px rgba(29, 29, 31, .07);
  font-size: 9px;
  font-weight: 950;
  line-height: 1;
}

.garage-gallery-cover-copy {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 2px;
  min-width: 0;
  max-width: 82%;
  color: #fff;
  text-shadow: 0 1px 9px rgba(0, 0, 0, .22);
}

.garage-gallery-cover-copy em {
  width: fit-content;
  border-radius: 999px;
  padding: 3px 7px;
  color: var(--ink);
  background: rgba(255, 255, 255, .84);
  font-size: 9px;
  font-style: normal;
  font-weight: 950;
  text-shadow: none;
}

.garage-gallery-cover-copy b {
  overflow: hidden;
  font-size: 20px;
  font-weight: 950;
  line-height: 1.05;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.garage-gallery-cover-copy small {
  overflow: hidden;
  font-size: 11px;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.garage-gallery-actions {
  display: flex;
  align-items: center;
  gap: 5px;
  overflow-x: auto;
  padding: 1px 0 2px;
  scrollbar-width: none;
}

.garage-gallery-add-button {
  position: sticky;
  top: 8px;
  z-index: 4;
  justify-self: end;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  margin: 0 4px -42px auto;
  border: 1px solid rgba(255, 255, 255, .74);
  border-radius: 50%;
  color: #fff;
  background: linear-gradient(145deg, #0a84ff, #0066d6);
  box-shadow: 0 10px 24px rgba(0, 113, 227, .25);
  font-size: 22px;
  font-weight: 820;
  line-height: 1;
}

.garage-gallery-actions::-webkit-scrollbar {
  display: none;
}

.garage-gallery-actions button {
  flex: 1 0 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: 84px;
  min-height: 32px;
  border: 1px solid color-mix(in srgb, var(--blue) 12%, var(--line));
  border-radius: 999px;
  padding: 0 9px;
  color: var(--ink);
  background: rgba(255, 255, 255, .62);
  box-shadow: 0 5px 13px rgba(29, 29, 31, .035);
  text-align: center;
  white-space: nowrap;
}

.garage-gallery-actions button span {
  display: none;
}

.garage-gallery-actions b {
  color: var(--ink);
  font-size: 10px;
  line-height: 1;
}

.garage-gallery-actions small,
.garage-gallery-lead,
.garage-gallery-counter,
.garage-gallery-note,
.garage-gallery-empty-note {
  color: var(--muted);
  font-size: 8.8px;
  font-weight: 820;
  line-height: 1.35;
}

.garage-gallery-lead,
.garage-gallery-counter,
.garage-gallery-note,
.garage-gallery-empty-note {
  margin: 0;
  padding: 0 2px;
}

.garage-gallery-lead {
  color: color-mix(in srgb, var(--ink) 62%, var(--muted));
  font-size: 10px;
  font-weight: 900;
}

.garage-gallery-profile-copy {
  margin: 0;
  padding: 0 2px;
  color: color-mix(in srgb, var(--ink) 58%, var(--muted));
  font-size: 9.5px;
  font-weight: 850;
  line-height: 1.3;
}

.garage-gallery-counter {
  flex: 1 1 auto;
  border: 1px solid color-mix(in srgb, var(--blue) 13%, var(--line));
  border-radius: 999px;
  padding: 5px 8px;
  color: color-mix(in srgb, var(--blue) 62%, var(--ink));
  background: rgba(255, 255, 255, .55);
  font-size: 9px;
  font-weight: 950;
}

.garage-gallery-plan-row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.garage-gallery-compact-meta {
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  border: 1px solid color-mix(in srgb, var(--blue) 11%, var(--line));
  border-radius: 999px;
  padding: 4px 5px 4px 8px;
  color: color-mix(in srgb, var(--ink) 66%, var(--muted));
  background: rgba(255, 255, 255, .56);
  box-shadow: 0 4px 12px rgba(29, 29, 31, .025);
  font-size: 8.5px;
  font-weight: 880;
  line-height: 1.15;
}

.garage-gallery-compact-meta span {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.garage-gallery-compact-meta button {
  flex: 0 0 auto;
  min-height: 22px;
  border: 1px solid color-mix(in srgb, var(--gold) 30%, var(--line));
  border-radius: 999px;
  padding: 0 7px;
  color: color-mix(in srgb, #805800 82%, var(--ink));
  background: color-mix(in srgb, var(--gold) 14%, rgba(255, 255, 255, .72));
  font-size: 8px;
  font-weight: 950;
  line-height: 1;
}

.garage-gallery-compact-meta .garage-gallery-dev-link {
  color: var(--muted);
  border-color: color-mix(in srgb, var(--line) 78%, transparent);
  background: rgba(255, 255, 255, .48);
}

.garage-plan-badge,
.garage-gallery-plan-row button {
  min-height: 25px;
  border: 1px solid color-mix(in srgb, var(--gold) 28%, var(--line));
  border-radius: 999px;
  padding: 5px 8px;
  color: color-mix(in srgb, #7a5300 82%, var(--ink));
  background: color-mix(in srgb, var(--gold) 12%, rgba(255, 255, 255, .72));
  font-size: 9px;
  font-weight: 950;
  line-height: 1;
}

.garage-gallery-plan-row button {
  color: var(--blue);
  border-color: color-mix(in srgb, var(--blue) 16%, var(--line));
  background: rgba(255, 255, 255, .70);
}

.garage-gallery-note {
  color: color-mix(in srgb, var(--gold, #d9a441) 34%, var(--muted));
  font-size: 9px;
}

.garage-gallery-demo-note {
  margin: 0;
  padding: 0 2px;
  color: color-mix(in srgb, var(--muted) 86%, var(--ink));
  font-size: 8.5px;
  font-weight: 800;
  line-height: 1.35;
}

.garage-demo-controls {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.garage-demo-controls button {
  min-height: 28px;
  border: 1px solid color-mix(in srgb, var(--blue) 14%, var(--line));
  border-radius: 999px;
  padding: 0 10px;
  color: var(--ink);
  background: rgba(255, 255, 255, .66);
  font-size: 10px;
  font-weight: 950;
}

.garage-gallery-empty-note {
  display: grid;
  gap: 6px;
  border: 1px dashed color-mix(in srgb, var(--blue) 18%, var(--line));
  border-radius: 16px;
  padding: 18px 14px;
  background:
    radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--blue) 10%, transparent), transparent 42%),
    color-mix(in srgb, var(--blue) 4%, #fff 96%);
  text-align: center;
}

.garage-gallery-empty-note b {
  color: var(--ink);
  font-size: 13px;
  font-weight: 950;
  line-height: 1.18;
}

.garage-gallery-empty-note small {
  color: var(--muted);
  font-size: 9.5px;
  font-weight: 820;
  line-height: 1.35;
}

.garage-gallery-empty-note button {
  justify-self: center;
  min-height: 34px;
  border: 1px solid color-mix(in srgb, var(--blue) 18%, var(--line));
  border-radius: 999px;
  padding: 0 14px;
  color: #fff;
  background: linear-gradient(145deg, #0a84ff, #0066d6);
  box-shadow: 0 8px 18px rgba(0, 113, 227, .17);
  font-size: 11px;
  font-weight: 950;
}

.garage-private-note {
  margin: 0;
  border: 1px solid color-mix(in srgb, var(--blue) 12%, var(--line));
  border-radius: 14px;
  padding: 9px 10px;
  color: var(--muted);
  background: rgba(255, 255, 255, .46);
  font-size: 11px;
  font-weight: 820;
  line-height: 1.35;
}

.garage-media-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
}

.garage-media-tile {
  position: relative;
  overflow: hidden;
  display: grid;
  align-items: end;
  aspect-ratio: 1;
  min-height: 0;
  border: 1px solid color-mix(in srgb, var(--line) 74%, transparent);
  border-radius: 13px;
  color: var(--ink);
  background:
    radial-gradient(circle at 18% 14%, color-mix(in srgb, var(--blue) 13%, transparent), transparent 38%),
    linear-gradient(145deg, color-mix(in srgb, var(--blue) 5%, #fff), rgba(255, 255, 255, .62));
  box-shadow: 0 5px 14px rgba(29, 29, 31, .035);
}

.garage-media-tile.has-preview {
  border-color: rgba(255, 255, 255, .68);
  background: #eef5ff;
}

.garage-media-tile.has-preview::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 38%;
  background: linear-gradient(180deg, transparent, rgba(8, 20, 38, .42));
  pointer-events: none;
}

.garage-media-tile img,
.garage-media-tile video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.garage-media-placeholder {
  position: absolute;
  inset: 0;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 5px;
  place-items: center;
  padding: 16px 10px 34px;
  text-align: center;
  color: color-mix(in srgb, var(--blue) 72%, #0b1b31);
}

.garage-media-placeholder b {
  font-size: 9px;
  font-weight: 950;
  line-height: 1.12;
}

.garage-media-placeholder small {
  color: var(--muted);
  font-size: 8px;
  font-weight: 850;
  line-height: 1.2;
}

.garage-media-play {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  transform: translate(-50%, -50%);
  border: 1px solid rgba(255, 255, 255, .76);
  border-radius: 999px;
  color: #fff;
  background: rgba(0, 113, 227, .74);
  box-shadow: 0 8px 18px rgba(0, 0, 0, .18);
  font-size: 10px;
  font-weight: 950;
}

.garage-media-caption {
  position: absolute;
  inset: auto 6px 6px 6px;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-width: 0;
  gap: 5px;
  border: 1px solid rgba(255, 255, 255, .58);
  border-radius: 10px;
  padding: 5px 6px;
  color: #fff;
  background: rgba(7, 20, 38, .36);
  backdrop-filter: blur(8px);
  text-shadow: 0 1px 7px rgba(0, 0, 0, .24);
}

.garage-media-tile:not(.has-preview) .garage-media-caption {
  color: color-mix(in srgb, var(--ink) 74%, var(--muted));
  border-color: color-mix(in srgb, var(--blue) 10%, var(--line));
  background: rgba(255, 255, 255, .70);
  text-shadow: none;
}

.garage-media-caption span,
.garage-media-caption small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.garage-media-caption span {
  flex: 0 0 auto;
  border-radius: 999px;
  padding: 2px 5px;
  color: var(--blue);
  background: rgba(255, 255, 255, .88);
  font-size: 10px;
  font-weight: 950;
}

.garage-media-caption small {
  min-width: 0;
  opacity: .9;
  font-size: 8px;
  font-weight: 850;
  text-align: right;
}

.garage-media-badge,
.garage-media-main-badge,
.garage-media-visibility {
  position: absolute;
  z-index: 3;
  min-height: 17px;
  border: 1px solid rgba(255, 255, 255, .72);
  border-radius: 999px;
  padding: 2px 6px;
  font-size: 8px;
  font-weight: 950;
  line-height: 1;
}

.garage-media-badge {
  top: 6px;
  left: 6px;
  color: var(--ink);
  background: rgba(255, 255, 255, .82);
}

.garage-media-main-badge {
  top: 29px;
  left: 6px;
  color: #6a4400;
  background: rgba(255, 239, 184, .90);
}

.garage-media-options {
  position: absolute;
  top: 6px;
  right: 6px;
  z-index: 4;
  display: grid;
  place-items: center;
  width: 26px;
  height: 22px;
  border: 1px solid rgba(255, 255, 255, .70);
  border-radius: 999px;
  padding: 0;
  color: var(--ink);
  background: rgba(255, 255, 255, .86);
  box-shadow: 0 5px 12px rgba(12, 22, 38, .12);
  font-size: 12px;
  font-weight: 950;
  line-height: 1;
}

.garage-media-options:active {
  transform: translateY(1px);
}

.gallery-media-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.gallery-media-card {
  overflow: visible;
  display: grid;
  align-items: stretch;
  gap: 6px;
  aspect-ratio: auto;
  min-height: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  cursor: pointer;
}

.gallery-media-card-main {
  grid-column: 1 / -1;
}

.gallery-media-card.has-preview::after {
  display: none;
}

.gallery-media-card-video .garage-media-play {
  opacity: .95;
}

.gallery-media-thumb {
  position: relative;
  overflow: hidden;
  aspect-ratio: 1 / 1.06;
  min-height: 168px;
  border: 1px solid rgba(255, 255, 255, .72);
  border-radius: 20px;
  background:
    radial-gradient(circle at 18% 14%, color-mix(in srgb, var(--blue) 13%, transparent), transparent 38%),
    linear-gradient(145deg, color-mix(in srgb, var(--blue) 5%, #fff), rgba(255, 255, 255, .74));
  box-shadow: 0 10px 26px rgba(15, 23, 42, .09);
}

.gallery-media-card-main .gallery-media-thumb {
  aspect-ratio: 1.55 / 1;
  min-height: 228px;
  border-radius: 24px;
  box-shadow: 0 18px 42px rgba(15, 23, 42, .13);
}

.gallery-media-thumb::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 46%;
  background: linear-gradient(180deg, transparent 0%, rgba(8, 20, 38, .17) 42%, rgba(8, 20, 38, .44) 100%);
  pointer-events: none;
}

.gallery-media-thumb img,
.gallery-media-thumb video {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.gallery-media-thumb video {
  background: #0d1b2a;
}

.gallery-media-badges {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
  max-width: calc(100% - 54px);
}

.gallery-media-badges:empty {
  display: none;
}

.gallery-media-badges .garage-media-badge,
.gallery-media-badges .garage-media-main-badge {
  position: static;
  min-height: 18px;
  border-color: rgba(255, 255, 255, .68);
  padding: 3px 7px;
  color: rgba(12, 22, 38, .82);
  background: rgba(255, 255, 255, .78);
  box-shadow: 0 6px 14px rgba(15, 23, 42, .08);
  backdrop-filter: blur(9px);
  font-size: 8px;
}

.gallery-media-badges .garage-media-main-badge {
  color: #6a4400;
  background: rgba(255, 239, 184, .84);
}

.gallery-media-thumb .garage-media-visibility {
  position: absolute;
  right: 8px;
  bottom: 8px;
  z-index: 3;
  min-height: 18px;
  border: 1px solid rgba(255, 255, 255, .62);
  border-radius: 999px;
  padding: 3px 7px;
  color: #fff;
  background: rgba(8, 20, 38, .34);
  box-shadow: 0 6px 14px rgba(15, 23, 42, .08);
  backdrop-filter: blur(8px);
  font-size: 8px;
  font-weight: 930;
  line-height: 1;
}

.gallery-media-card .garage-media-options {
  top: 8px;
  right: 8px;
  width: 28px;
  height: 24px;
  background: rgba(255, 255, 255, .82);
  backdrop-filter: blur(8px);
}

.gallery-media-meta.garage-media-caption {
  position: static;
  inset: auto;
  display: grid;
  gap: 2px;
  border: 0;
  border-radius: 0;
  padding: 0 2px;
  color: var(--ink);
  background: transparent;
  backdrop-filter: none;
  text-shadow: none;
}

.gallery-media-meta.garage-media-caption span {
  display: block;
  min-width: 0;
  padding: 0;
  color: color-mix(in srgb, var(--ink) 72%, var(--muted));
  background: transparent;
  font-size: 10px;
  font-weight: 900;
}

.gallery-media-meta.garage-media-caption small {
  color: var(--muted);
  opacity: 1;
  font-size: 8.5px;
  font-weight: 820;
  text-align: left;
}

.gallery-media-card-main .gallery-media-meta.garage-media-caption span {
  font-size: 11px;
}

.gallery-media-card-main .gallery-media-meta.garage-media-caption small {
  font-size: 9px;
}

.gallery-media-card .garage-media-placeholder {
  padding: 18px 12px 24px;
  color: color-mix(in srgb, var(--blue) 70%, #0b1b31);
}

.gallery-media-card .garage-media-placeholder i {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid color-mix(in srgb, var(--blue) 18%, rgba(255,255,255,.8));
  border-radius: 16px;
  color: var(--blue);
  background: rgba(255, 255, 255, .68);
  box-shadow: 0 10px 24px rgba(0, 113, 227, .08);
  font-style: normal;
  font-size: 20px;
}

.gallery-media-card .garage-media-placeholder b {
  color: color-mix(in srgb, var(--ink) 70%, var(--muted));
  font-size: 10px;
}

.gallery-media-card .garage-media-placeholder small {
  font-size: 8.5px;
}

.gallery-media-card-main .garage-media-placeholder b {
  font-size: 12px;
}

.gallery-media-card-main .garage-media-placeholder small {
  font-size: 9px;
}

@media (min-width: 780px) {
  .gallery-media-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .gallery-media-card-main {
    grid-column: span 2;
  }
}

.garage-media-add-sheet,
.garage-media-options-sheet,
.garage-vehicle-menu-sheet {
  display: grid;
  gap: 8px;
}

.add-studio-active-vehicle {
  display: grid;
  gap: 2px;
  margin: 8px 0 10px;
  border: 1px solid color-mix(in srgb, var(--blue) 14%, var(--line));
  border-radius: 18px;
  padding: 11px 12px;
  color: var(--ink);
  background:
    radial-gradient(circle at 0 0, color-mix(in srgb, var(--blue) 10%, transparent), transparent 46%),
    rgba(255, 255, 255, .82);
}

.add-studio-active-vehicle span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
}

.add-studio-active-vehicle b {
  overflow: hidden;
  font-size: 14px;
  font-weight: 950;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.add-studio-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}

.add-studio-grid button {
  display: grid;
  align-content: start;
  gap: 5px;
  min-height: 116px;
  border: 1px solid color-mix(in srgb, var(--blue) 12%, var(--line));
  border-radius: 20px;
  padding: 12px;
  color: var(--ink);
  background: rgba(255, 255, 255, .84);
  text-align: left;
  box-shadow: 0 10px 24px rgba(29, 29, 31, .06);
}

.add-studio-grid button.primary {
  color: #fff;
  border-color: transparent;
  background:
    radial-gradient(circle at 10% 0, rgba(255, 255, 255, .26), transparent 42%),
    linear-gradient(135deg, var(--blue), #0b58d8 64%, #12357f);
}

.add-studio-grid button:disabled {
  opacity: .55;
}

.add-studio-grid button span {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 13px;
  color: var(--blue);
  background: color-mix(in srgb, var(--blue) 10%, #fff);
  font-size: 16px;
  font-weight: 950;
}

.add-studio-grid button.primary span {
  color: var(--blue);
  background: rgba(255, 255, 255, .94);
}

.add-studio-grid button b {
  font-size: 15px;
  font-weight: 950;
}

.add-studio-grid button small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 780;
  line-height: 1.25;
}

.add-studio-grid button.primary small {
  color: rgba(255, 255, 255, .78);
}

.add-studio-viewer {
  position: fixed;
  inset: 0;
  z-index: 82;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  color: #f8fbff;
  background:
    radial-gradient(circle at 18% 0, rgba(0, 113, 227, .34), transparent 32%),
    radial-gradient(circle at 82% 12%, rgba(52, 199, 89, .13), transparent 30%),
    linear-gradient(180deg, #071322 0%, #0d1726 48%, #111827 100%);
}

.add-studio-viewer[hidden] {
  display: none;
}

.add-studio-shell {
  display: grid;
  gap: 16px;
  width: min(560px, 100%);
  min-height: 100dvh;
  margin: 0 auto;
  padding: calc(env(safe-area-inset-top) + 10px) 16px calc(env(safe-area-inset-bottom) + 28px);
}

.add-studio-header {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 44px;
  align-items: center;
  gap: 10px;
}

.add-studio-header button {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 999px;
  color: #f8fbff;
  background: rgba(255, 255, 255, .08);
  font: inherit;
  font-size: 22px;
  font-weight: 900;
  backdrop-filter: blur(10px);
}

.add-studio-header h2,
.add-studio-header p {
  margin: 0;
  text-align: center;
}

.add-studio-header h2 {
  font-size: 22px;
  font-weight: 1000;
}

.add-studio-header p {
  color: rgba(248, 251, 255, .66);
  font-size: 12px;
  font-weight: 850;
}

.add-studio-vehicle {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 20px;
  padding: 10px;
  background: rgba(255, 255, 255, .07);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .035);
}

.add-studio-vehicle-avatar {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 2px solid rgba(0, 132, 255, .62);
  border-radius: 16px;
  background: rgba(255, 255, 255, .1);
  background-position: center;
  background-size: cover;
  font-size: 19px;
}

.add-studio-vehicle-avatar.has-photo {
  box-shadow: 0 0 0 4px rgba(0, 132, 255, .16);
}

.add-studio-vehicle b,
.add-studio-vehicle small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.add-studio-vehicle b {
  font-size: 14px;
  font-weight: 950;
}

.add-studio-vehicle small {
  color: rgba(248, 251, 255, .62);
  font-size: 11px;
  font-weight: 850;
}

.add-studio-hero-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.add-studio-hero-actions button,
.add-studio-placeholder-actions button,
.add-studio-form-actions button {
  min-width: 0;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 22px;
  color: #f8fbff;
  background: rgba(255, 255, 255, .09);
  font: inherit;
  text-align: left;
}

.add-studio-hero-actions button {
  display: grid;
  align-content: start;
  gap: 8px;
  min-height: 132px;
  padding: 14px;
}

.add-studio-hero-actions button.primary {
  border-color: rgba(255, 255, 255, .18);
  background:
    radial-gradient(circle at 16% 0, rgba(255, 255, 255, .28), transparent 38%),
    linear-gradient(145deg, #0a84ff, #0057d9 66%, #163b92);
  box-shadow: 0 18px 34px rgba(0, 81, 201, .26);
}

.add-studio-hero-actions button:disabled {
  opacity: .45;
}

.add-studio-hero-actions span,
.add-studio-placeholder-card span,
.add-studio-library-cell span {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 15px;
  color: #0a84ff;
  background: rgba(255, 255, 255, .9);
  font-size: 20px;
  font-weight: 1000;
}

.add-studio-hero-actions b {
  font-size: 16px;
  font-weight: 1000;
}

.add-studio-hero-actions small {
  color: rgba(248, 251, 255, .68);
  font-size: 11px;
  font-weight: 800;
  line-height: 1.28;
}

.add-studio-section-title {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 9px;
}

.add-studio-section-title b {
  font-size: 14px;
  font-weight: 1000;
}

.add-studio-section-title small {
  color: rgba(248, 251, 255, .55);
  font-size: 11px;
  font-weight: 850;
}

.add-studio-media-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 3px;
}

.add-studio-library-cell {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border: 0;
  border-radius: 9px;
  padding: 0;
  color: #f8fbff;
  background: rgba(255, 255, 255, .1);
}

.add-studio-library-cell img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.add-studio-library-cell i {
  position: absolute;
  left: 6px;
  bottom: 6px;
  border-radius: 999px;
  padding: 3px 6px;
  color: #fff;
  background: rgba(7, 19, 34, .58);
  font-size: 9px;
  font-style: normal;
  font-weight: 950;
}

.add-studio-camera-cell {
  background:
    radial-gradient(circle at 50% 20%, rgba(255, 255, 255, .22), transparent 38%),
    rgba(10, 132, 255, .22);
}

.add-studio-empty-cell {
  grid-column: span 2;
  display: grid;
  align-content: center;
  gap: 4px;
  min-height: 100%;
  border: 1px dashed rgba(255, 255, 255, .18);
  border-radius: 10px;
  padding: 10px;
  color: rgba(248, 251, 255, .72);
  background: rgba(255, 255, 255, .055);
}

.add-studio-empty-cell b {
  color: #fff;
  font-size: 13px;
}

.add-studio-empty-cell small {
  font-size: 11px;
  line-height: 1.25;
}

.add-studio-photo-form {
  display: grid;
  gap: 13px;
}

.add-studio-photo-preview {
  display: grid;
  place-items: center;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 28px;
  background: rgba(255, 255, 255, .08);
}

.add-studio-photo-preview img,
.add-studio-photo-preview video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.add-studio-video-preview {
  aspect-ratio: 9 / 16;
  max-height: 58dvh;
}

.add-studio-photo-preview span {
  color: rgba(248, 251, 255, .46);
  font-size: 44px;
}

.add-studio-photo-form label,
.add-studio-photo-form fieldset {
  display: grid;
  gap: 7px;
  margin: 0;
  border: 0;
  padding: 0;
  color: rgba(248, 251, 255, .7);
  font-size: 11px;
  font-weight: 900;
}

.add-studio-photo-form textarea {
  width: 100%;
  border: 1px solid rgba(255, 255, 255, .13);
  border-radius: 18px;
  padding: 12px;
  color: #f8fbff;
  background: rgba(255, 255, 255, .08);
  font: inherit;
  resize: vertical;
}

.add-studio-choice-row > div {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.add-studio-choice-row button {
  min-height: 36px;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 999px;
  padding: 0 12px;
  color: rgba(248, 251, 255, .78);
  background: rgba(255, 255, 255, .075);
  font: inherit;
  font-size: 10px;
  font-weight: 930;
}

.add-studio-choice-row button.active {
  color: #fff;
  border-color: rgba(10, 132, 255, .56);
  background: rgba(10, 132, 255, .22);
}

.add-studio-check {
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
}

.add-studio-check input {
  width: 18px;
  height: 18px;
}

.add-studio-form-actions,
.add-studio-placeholder-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}

.add-studio-form-actions button,
.add-studio-placeholder-actions button {
  display: grid;
  place-items: center;
  min-height: 46px;
  padding: 0 12px;
  text-align: center;
  font-weight: 950;
}

.add-studio-form-actions button.primary {
  border-color: transparent;
  background: var(--blue);
}

.add-studio-form-actions button:disabled {
  opacity: .5;
}

.add-studio-placeholder-card {
  display: grid;
  place-items: center;
  gap: 10px;
  min-height: 320px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 30px;
  padding: 22px;
  text-align: center;
  background: rgba(255, 255, 255, .075);
}

.add-studio-placeholder-card h3,
.add-studio-placeholder-card p {
  margin: 0;
}

.add-studio-placeholder-card h3 {
  font-size: 24px;
  font-weight: 1000;
}

.add-studio-placeholder-card p {
  color: rgba(248, 251, 255, .66);
  font-size: 13px;
  line-height: 1.4;
}

.add-studio-empty-state {
  border: 1px dashed rgba(255, 255, 255, .18);
  border-radius: 22px;
  padding: 16px;
  color: rgba(248, 251, 255, .72);
  background: rgba(255, 255, 255, .06);
}

body.studio-viewer-open .fp-bottom-nav {
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
}

.garage-media-add-sheet button,
.garage-media-options-sheet button,
.garage-vehicle-menu-sheet button {
  display: grid;
  gap: 2px;
  min-height: 58px;
  border: 1px solid color-mix(in srgb, var(--blue) 12%, var(--line));
  border-radius: 14px;
  padding: 10px 12px;
  color: var(--ink);
  background: rgba(255, 255, 255, .82);
  text-align: left;
}

.garage-media-add-sheet button:disabled,
.garage-media-options-sheet button:disabled,
.garage-vehicle-menu-sheet button:disabled {
  opacity: .55;
}

.garage-media-add-sheet button b,
.garage-media-options-sheet button b,
.garage-vehicle-menu-sheet button b {
  font-size: 13px;
  font-weight: 950;
}

.garage-media-add-sheet button span,
.garage-media-options-sheet button span,
.garage-vehicle-menu-sheet button span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 820;
}

.garage-media-options-sheet button.danger {
  border-color: rgba(255, 59, 48, .18);
  color: #b42318;
  background: rgba(255, 245, 244, .9);
}

.garage-media-upload-form {
  display: grid;
  gap: 12px;
}

.garage-media-upload-preview {
  display: grid;
  place-items: center;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  border: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
  border-radius: 16px;
  background: #071322;
}

.garage-media-upload-preview img,
.garage-media-upload-preview video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.garage-media-upload-form label,
.garage-media-upload-form fieldset {
  display: grid;
  gap: 7px;
  margin: 0;
  border: 0;
  padding: 0;
  color: var(--ink);
  font-size: 11px;
  font-weight: 900;
}

.garage-media-upload-form input,
.garage-media-upload-form textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 11px 12px;
  color: var(--ink);
  background: rgba(255, 255, 255, .92);
  font: inherit;
  font-weight: 760;
}

.garage-media-upload-form input[type="checkbox"] {
  width: 18px;
  height: 18px;
  padding: 0;
}

.garage-media-upload-form textarea {
  resize: vertical;
}

.garage-upload-choice-row legend {
  margin-bottom: 7px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 950;
}

.garage-upload-choice-row > div {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.garage-upload-choice-row button {
  min-height: 36px;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0 12px;
  color: var(--ink);
  background: rgba(255, 255, 255, .82);
  font-size: 10px;
  font-weight: 900;
}

.garage-upload-choice-row button.active {
  border-color: color-mix(in srgb, var(--garage-theme-accent, var(--blue)) 48%, var(--line));
  color: var(--garage-theme-accent, var(--blue));
  background: color-mix(in srgb, var(--garage-theme-accent, var(--blue)) 10%, #fff);
}

.garage-upload-check {
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  min-height: 34px;
}

.garage-media-upload-form > button[type="submit"] {
  min-height: 46px;
  border: 0;
  border-radius: 16px;
  color: #fff;
  background: var(--blue);
  font-size: 13px;
  font-weight: 950;
}

.garage-media-add-limits {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid color-mix(in srgb, var(--gold) 18%, var(--line));
  border-radius: 15px;
  padding: 9px 10px;
  color: color-mix(in srgb, var(--ink) 66%, var(--muted));
  background: color-mix(in srgb, var(--gold) 7%, rgba(255, 255, 255, .86));
  font-size: 10px;
  font-weight: 850;
  line-height: 1.25;
}

.garage-media-add-limits span {
  flex: 1 1 auto;
}

.garage-media-add-limits button {
  flex: 0 0 auto;
  min-height: 28px;
  border: 1px solid color-mix(in srgb, var(--gold) 34%, var(--line));
  border-radius: 999px;
  padding: 0 10px;
  color: color-mix(in srgb, #805800 82%, var(--ink));
  background: color-mix(in srgb, var(--gold) 14%, #fff 86%);
  font-size: 9px;
  font-weight: 950;
}

.garage-media-viewer {
  overflow: hidden;
  display: grid;
  place-items: center;
  min-height: 280px;
  border: 1px solid color-mix(in srgb, var(--line) 72%, transparent);
  border-radius: 20px;
  background:
    radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--blue) 12%, transparent), transparent 42%),
    #f7fbff;
}

.garage-media-viewer-image,
.garage-media-viewer-video {
  display: block;
  width: 100%;
  max-height: 68dvh;
  object-fit: contain;
  background: #071322;
}

.garage-media-viewer-video {
  min-height: 260px;
}

.garage-media-viewer-placeholder {
  display: grid;
  gap: 6px;
  place-items: center;
  padding: 24px;
  color: var(--muted);
  text-align: center;
}

.garage-media-viewer-placeholder i {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: 18px;
  color: var(--blue);
  background: color-mix(in srgb, var(--blue) 10%, #fff 90%);
  font-style: normal;
  font-size: 24px;
  font-weight: 950;
}

.garage-media-viewer-placeholder b {
  color: var(--ink);
  font-size: 14px;
  font-weight: 950;
}

.garage-media-viewer-placeholder span {
  font-size: 10px;
  font-weight: 820;
}

.garage-vehicle-menu-dev {
  display: grid;
  gap: 6px;
  border: 1px dashed color-mix(in srgb, var(--blue) 18%, var(--line));
  border-radius: 14px;
  padding: 9px 10px;
  background: rgba(255, 255, 255, .52);
}

.garage-vehicle-menu-dev small {
  color: var(--muted);
  font-size: 9px;
  font-weight: 950;
  text-transform: uppercase;
}

.garage-pro-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.garage-pro-list article {
  display: grid;
  gap: 3px;
  border: 1px solid color-mix(in srgb, var(--gold) 22%, var(--line));
  border-radius: 14px;
  padding: 10px;
  background:
    radial-gradient(circle at 90% 0, color-mix(in srgb, var(--gold) 18%, transparent), transparent 42%),
    rgba(255, 255, 255, .78);
}

.garage-pro-list b {
  color: var(--ink);
  font-size: 18px;
  font-weight: 950;
}

.garage-pro-list span,
.garage-pro-features span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 850;
  line-height: 1.25;
}

.garage-pro-features {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.garage-pro-features span {
  border: 1px solid color-mix(in srgb, var(--blue) 12%, var(--line));
  border-radius: 999px;
  padding: 6px 8px;
  color: var(--blue);
  background: rgba(255, 255, 255, .70);
  font-weight: 930;
}

.garage-media-tile.add {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 4px;
  text-align: center;
}

.garage-media-tile.add span {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 9px;
  color: var(--blue);
  background: color-mix(in srgb, var(--blue) 10%, #fff 90%);
  font-size: 12px;
  font-weight: 950;
}

.garage-media-tile.add small {
  color: var(--muted);
  font-size: 9px;
  font-weight: 900;
}

@media (max-height: 760px) {
  .garage-gallery-cover {
    height: 208px;
  }
}

.garage-warning {
  padding: 10px;
  color: #5b3d00;
  background: color-mix(in srgb, #fff7e5 78%, transparent);
  font-size: 13px;
  font-weight: 850;
  line-height: 1.4;
}

.garage-cost-summary {
  display: grid;
  gap: 7px;
  padding: 10px;
}

.garage-cost-summary b {
  font-size: 22px;
  letter-spacing: -.02em;
}

.garage-cost-summary div {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.garage-cost-summary em {
  color: var(--ink);
  background: rgba(255,255,255,.7);
}

.garage-history-preview {
  display: grid;
  gap: 10px;
}

.garage-event-form {
  display: grid;
  gap: 10px;
}

.garage-event-form label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}

.garage-event-form input,
.garage-event-form select,
.garage-event-form textarea {
  width: 100%;
  min-height: 48px;
  border: 1px solid var(--line);
  border-radius: 14px;
  color: var(--ink);
  background: rgba(255, 255, 255, .82);
  font: inherit;
  font-weight: 850;
  padding: 0 12px;
}

.garage-event-form textarea {
  min-height: 86px;
  padding: 12px;
  resize: vertical;
}

.app-toast {
  position: fixed;
  left: 50%;
  bottom: calc(env(safe-area-inset-bottom) + 118px);
  z-index: 70;
  transform: translateX(-50%);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 11px 16px;
  color: var(--ink);
  background: rgba(255, 255, 255, .86);
  box-shadow: 0 10px 24px rgba(29, 29, 31, .14);
  font-size: 13px;
  font-weight: 950;
  backdrop-filter: blur(10px);
}

.operator-view .page-header p:not(.eyebrow) {
  color: var(--muted);
  font-size: 13px;
  font-weight: 760;
  line-height: 1.35;
}

.operator-auth-screen .auth-card {
  max-width: 430px;
}

.operator-dev-note {
  margin: 0;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 16px;
  color: var(--muted);
  background: rgba(255, 255, 255, .54);
  font-size: 13px;
  font-weight: 760;
  line-height: 1.35;
}

.operator-logout {
  min-height: 42px;
  width: fit-content;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0 16px;
  color: var(--ink);
  background: rgba(255, 255, 255, .62);
  font-weight: 900;
}

.operator-tabs {
  display: flex;
  gap: 8px;
  margin: 0 0 12px;
  overflow-x: auto;
  padding-bottom: 4px;
  scrollbar-width: none;
}

.operator-tabs::-webkit-scrollbar { display: none; }

.operator-tabs button {
  flex: 0 0 auto;
  min-height: 42px;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0 14px;
  color: var(--ink);
  background: rgba(255, 255, 255, .58);
  font-weight: 950;
}

.operator-tabs button.active {
  color: #fff;
  border-color: var(--blue);
  background: var(--blue);
}

.operator-content {
  display: grid;
  gap: 10px;
}

.operator-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.operator-metric,
.operator-card,
.operator-row {
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(255, 255, 255, .58);
  box-shadow: 0 14px 34px rgba(29, 29, 31, .08);
}

.operator-metric {
  display: grid;
  gap: 4px;
  min-height: 86px;
  padding: 14px;
}

.operator-metric span,
.operator-card span,
.operator-card small,
.operator-card em,
.operator-row small,
.operator-row em {
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
  line-height: 1.3;
}

.operator-metric b {
  color: var(--ink);
  font-size: 28px;
  line-height: 1;
}

.operator-card {
  display: grid;
  gap: 6px;
  padding: 14px;
}

.operator-poi-card {
  gap: 12px;
}

.operator-poi-edit-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.operator-poi-edit-grid input,
.operator-poi-edit-grid select {
  width: 100%;
}

.operator-poi-position-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}

.operator-poi-position-actions span {
  color: var(--ink);
}

.operator-poi-position-actions a,
.operator-poi-position-actions button {
  min-height: 34px;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0 10px;
  color: var(--ink);
  background: rgba(255,255,255,.72);
  font: inherit;
  font-size: 12px;
  font-weight: 900;
  text-decoration: none;
}

.poi-badge {
  display: inline-flex;
  align-items: center;
  min-height: 20px;
  border-radius: 999px;
  padding: 2px 7px;
  margin-left: 4px;
  font-size: 11px;
  font-weight: 950;
  vertical-align: middle;
  color: #17324d;
  background: rgba(18, 113, 255, .1);
  border: 1px solid rgba(18, 113, 255, .18);
}

.poi-badge.private {
  color: #2f3b4a;
  background: rgba(101, 116, 139, .12);
  border-color: rgba(101, 116, 139, .2);
}

.poi-badge.pending {
  color: #7a4a00;
  background: rgba(255, 180, 0, .16);
  border-color: rgba(255, 180, 0, .28);
}

.poi-badge.approved,
.poi-badge.shared {
  color: #0c5b35;
  background: rgba(0, 170, 102, .13);
  border-color: rgba(0, 170, 102, .25);
}

.poi-badge.group {
  color: #24538f;
  background: rgba(36, 83, 143, .11);
  border-color: rgba(36, 83, 143, .22);
}

.poi-badge.rejected {
  color: #8a1f22;
  background: rgba(230, 57, 70, .12);
  border-color: rgba(230, 57, 70, .24);
}

.operator-card b,
.operator-row b {
  color: var(--ink);
  font-size: 15px;
}

.operator-card button {
  min-height: 38px;
  border: 1px solid var(--line);
  border-radius: 14px;
  color: var(--ink);
  background: rgba(255,255,255,.62);
  font-weight: 900;
}

.operator-row {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 10px;
}

.operator-row img,
.operator-thumb {
  width: 58px;
  height: 58px;
  border-radius: 16px;
}

.operator-row img {
  object-fit: cover;
}

.operator-thumb {
  display: grid;
  place-items: center;
  color: #fff;
  background: linear-gradient(135deg, var(--blue), #0b1b31);
  font-size: 12px;
  font-weight: 950;
}

.operator-users,
.operator-user-detail {
  display: grid;
  gap: 10px;
}

.operator-filter-grid {
  display: grid;
  grid-template-columns: minmax(180px, 1.4fr) minmax(120px, .8fr) minmax(120px, .8fr) auto;
  gap: 8px;
  align-items: end;
}

.operator-filter-grid label {
  display: grid;
  gap: 5px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}

.operator-filter-grid input,
.operator-filter-grid select {
  min-height: 38px;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 0 10px;
  color: var(--ink);
  background: rgba(255,255,255,.72);
  font: inherit;
  font-size: 13px;
  font-weight: 850;
}

.operator-filter-grid button,
.operator-user-row button,
.operator-detail-head button {
  min-height: 38px;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 0 12px;
  color: var(--ink);
  background: rgba(255,255,255,.66);
  font-weight: 900;
}

.operator-user-row {
  grid-template-columns: 58px minmax(0, 1fr) auto;
}

.operator-detail-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: start;
}

.operator-grid-compact {
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
}

.operator-mini-row {
  display: grid;
  gap: 3px;
  padding: 8px 0;
  border-top: 1px solid var(--line);
}

.operator-mini-row:first-of-type {
  border-top: 0;
}

.operator-mini-row span {
  color: var(--ink);
  font-weight: 950;
}

@media (max-width: 720px) {
  .operator-filter-grid,
  .operator-user-row,
  .operator-detail-head {
    grid-template-columns: 1fr;
  }
}

.vehicle-permission-card,
.vehicle-conflict-card,
.verification-options {
  display: grid;
  gap: 8px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: color-mix(in srgb, var(--panel) 78%, transparent);
}

.permission-grid,
.permission-settings {
  display: grid;
  gap: 10px;
  margin: 12px 0;
}

.settings-group {
  display: grid;
  gap: 8px;
  margin: 14px 0;
}

.settings-group h3 {
  margin: 0;
  color: var(--muted);
  font-size: 11px;
  font-weight: 950;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.settings-links button {
  min-height: 42px;
  border: 1px solid var(--line);
  border-radius: 14px;
  color: var(--ink);
  background: color-mix(in srgb, var(--panel) 88%, #fff 12%);
  font-weight: 900;
  text-align: left;
  padding: 0 12px;
}

.vehicle-settings-hub {
  display: grid;
  gap: 10px;
  margin: 12px 0;
}

.vehicle-settings-section {
  display: grid;
  gap: 7px;
  padding: 10px;
  border: 1px solid color-mix(in srgb, var(--line) 82%, transparent);
  border-radius: 15px;
  background: rgba(255, 255, 255, .7);
}

.vehicle-settings-section h3 {
  margin: 0 2px 2px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 950;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.vehicle-settings-hub button {
  display: grid;
  gap: 4px;
  min-height: 50px;
  border: 1px solid color-mix(in srgb, var(--line) 76%, transparent);
  border-radius: 13px;
  padding: 9px 11px;
  color: var(--ink);
  background: color-mix(in srgb, var(--panel) 84%, #fff 16%);
  text-align: left;
  box-shadow: 0 5px 12px rgba(29, 29, 31, .04);
}

.vehicle-settings-section.danger button {
  border-color: rgba(255, 59, 48, .18);
  background: rgba(255, 245, 244, .72);
}

.vehicle-settings-hub b {
  color: var(--ink);
  font-size: 13px;
  font-weight: 950;
}

.vehicle-settings-hub span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 820;
  line-height: 1.35;
}

.vehicle-privacy-sheet {
  display: grid;
  gap: 12px;
}

.vehicle-privacy-sheet > p {
  margin: 0;
  color: var(--muted);
}

.vehicle-privacy-current {
  display: grid;
  gap: 2px;
  padding: 12px 14px;
  border: 1px solid rgba(0, 113, 227, .14);
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(0, 113, 227, .08), rgba(255, 255, 255, .94));
}

.vehicle-privacy-current span,
.vehicle-privacy-current em {
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
}

.vehicle-privacy-current b {
  color: var(--ink);
  font-size: 16px;
}

.vehicle-privacy-section {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid rgba(15, 23, 42, .08);
  border-radius: 14px;
  background: rgba(255, 255, 255, .96);
  box-shadow: 0 10px 22px rgba(15, 23, 42, .05);
}

.vehicle-privacy-section b {
  display: block;
  color: var(--ink);
  font-size: 14px;
}

.vehicle-privacy-section span {
  color: var(--muted);
  font-size: 12px;
}

.vehicle-privacy-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.vehicle-privacy-chips button,
.vehicle-privacy-groups button {
  border: 1px solid rgba(15, 23, 42, .1);
  border-radius: 999px;
  background: rgba(248, 250, 252, .92);
  color: #475569;
  font-size: 12px;
  font-weight: 850;
}

.vehicle-privacy-chips button {
  min-height: 34px;
  padding: 0 11px;
}

.vehicle-privacy-chips button.active {
  border-color: rgba(0, 113, 227, .5);
  background: rgba(0, 113, 227, .1);
  color: var(--blue);
}

.vehicle-privacy-groups {
  display: grid;
  gap: 7px;
  padding-top: 2px;
}

.vehicle-privacy-groups[hidden] {
  display: none;
}

.vehicle-privacy-groups p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
}

.vehicle-privacy-groups button {
  display: grid;
  gap: 2px;
  min-height: 42px;
  padding: 8px 11px;
  border-radius: 12px;
  text-align: left;
}

.vehicle-privacy-groups button.active {
  border-color: rgba(0, 113, 227, .45);
  background: rgba(0, 113, 227, .08);
}

.vehicle-privacy-groups button b {
  font-size: 13px;
}

.vehicle-privacy-groups button span {
  font-size: 11px;
}

.settings-links small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.35;
}

.permission-card {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--blue) 14%, var(--line));
  border-radius: 18px;
  background: color-mix(in srgb, var(--panel) 88%, #fff 12%);
}

.permission-card > span {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--blue) 10%, #fff 90%);
  font-size: 20px;
}

.permission-card b,
.permission-card small,
.permission-card em {
  display: block;
}

.permission-card small,
.permission-card em {
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
  font-weight: 850;
  line-height: 1.35;
}

.permission-card button {
  grid-column: 1 / -1;
  min-height: 44px;
  border: 0;
  border-radius: 14px;
  color: #fff;
  background: var(--blue);
  font-weight: 950;
}

.permission-card button:disabled {
  opacity: .7;
}

.permission-card.granted {
  border-color: color-mix(in srgb, #34c759 34%, var(--line));
  background: color-mix(in srgb, #34c759 8%, var(--panel));
}

.sheet.is-permission-onboarding {
  overflow: hidden;
  max-height: min(64dvh, 560px);
  padding: 10px 12px calc(env(safe-area-inset-bottom) + 16px);
  border: 1px solid rgba(255, 255, 255, .72);
  border-radius: 32px;
  background:
    radial-gradient(circle at 18% -8%, rgba(0, 113, 227, .18), transparent 34%),
    linear-gradient(150deg, rgba(255, 255, 255, .94), rgba(246, 250, 255, .82) 48%, rgba(232, 241, 255, .88));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .92),
    0 22px 58px rgba(15, 23, 42, .2);
  backdrop-filter: blur(20px) saturate(1.08);
}

.sheet.is-permission-onboarding #sheet-content {
  display: grid;
  gap: 10px;
}

.sheet.is-permission-onboarding .sheet-handle {
  margin-bottom: 6px;
  background: rgba(51, 65, 85, .22);
}

.sheet.is-permission-onboarding .sheet-x {
  display: none;
}

.permission-onboarding {
  display: grid;
  gap: 12px;
}

.permission-onboarding-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.permission-onboarding-head p {
  margin: 0;
  color: #0f172a;
  font-size: 12px;
  font-weight: 950;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.permission-onboarding-head button {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(15, 23, 42, .08);
  border-radius: 999px;
  color: #475569;
  background: rgba(255, 255, 255, .68);
  box-shadow: 0 8px 18px rgba(15, 23, 42, .06);
  font-size: 22px;
  line-height: 1;
}

.permission-hero-card {
  display: grid;
  gap: 14px;
  padding: 14px;
  border: 1px solid rgba(15, 23, 42, .08);
  border-radius: 26px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .78), rgba(255, 255, 255, .52)),
    radial-gradient(circle at 94% 8%, rgba(52, 199, 89, .13), transparent 30%);
  box-shadow: 0 16px 34px rgba(15, 23, 42, .09);
}

.permission-car-card {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
  min-height: 72px;
  padding: 10px;
  border: 1px solid rgba(0, 113, 227, .12);
  border-radius: 22px;
  background: rgba(255, 255, 255, .72);
}

.permission-car-icon {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 18px;
  color: #fff;
  background:
    radial-gradient(circle at 30% 20%, rgba(255, 255, 255, .42), transparent 28%),
    linear-gradient(135deg, #0071e3, #0f62fe);
  box-shadow: 0 12px 22px rgba(0, 113, 227, .24);
}

.permission-car-shape {
  position: relative;
  display: block;
  width: 29px;
  height: 17px;
  border-radius: 9px 9px 5px 5px;
  background: #fff;
  box-shadow: inset 0 -5px 0 rgba(15, 23, 42, .08);
}

.permission-car-shape::before {
  content: "";
  position: absolute;
  left: 7px;
  top: -6px;
  width: 15px;
  height: 10px;
  border-radius: 8px 8px 3px 3px;
  background: rgba(255, 255, 255, .9);
}

.permission-car-shape::after {
  content: "";
  position: absolute;
  left: 4px;
  right: 4px;
  bottom: -4px;
  height: 8px;
  border-radius: 999px;
  background:
    radial-gradient(circle at 10%, #0f172a 0 3px, transparent 3.5px),
    radial-gradient(circle at 90%, #0f172a 0 3px, transparent 3.5px);
}

.permission-car-card b,
.permission-car-card small {
  overflow: hidden;
  display: block;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.permission-car-card b {
  color: #0f172a;
  font-size: 16px;
  font-weight: 950;
}

.permission-car-card small {
  margin-top: 2px;
  color: #64748b;
  font-size: 12px;
  font-weight: 900;
}

.permission-car-card i {
  align-self: start;
  border: 1px solid rgba(100, 116, 139, .16);
  border-radius: 999px;
  padding: 5px 8px;
  color: #64748b;
  background: rgba(248, 250, 252, .82);
  font-size: 10px;
  font-style: normal;
  font-weight: 950;
  white-space: nowrap;
}

.permission-car-card i.is-on {
  border-color: rgba(52, 199, 89, .28);
  color: #0f7a34;
  background: rgba(52, 199, 89, .11);
}

.permission-hero-copy {
  display: grid;
  gap: 6px;
  padding: 0 2px 2px;
}

.permission-hero-copy h2 {
  margin: 0;
  color: #0f172a;
  font-size: 27px;
  line-height: 1.05;
  letter-spacing: 0;
}

.permission-hero-copy p {
  margin: 0;
  color: #475569;
  font-size: 14px;
  font-weight: 850;
  line-height: 1.42;
}

.permission-gps-note {
  margin: 0;
  border-radius: 14px;
  padding: 9px 11px;
  color: #2563eb;
  background: rgba(0, 113, 227, .08);
  font-size: 12px;
  font-weight: 900;
}

.permission-primary-cta button {
  width: 100%;
  min-height: 54px;
  border: 0;
  border-radius: 18px;
  color: #fff;
  background: linear-gradient(135deg, #0071e3, #0b63ce);
  box-shadow: 0 16px 28px rgba(0, 113, 227, .28);
  font-size: 16px;
  font-weight: 950;
}

.permission-primary-cta button:disabled {
  opacity: .72;
}

.permission-secondary-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px 14px;
}

.permission-secondary-actions button {
  min-height: 34px;
  border: 0;
  border-radius: 999px;
  padding: 0 4px;
  color: #475569;
  background: transparent;
  font-size: 13px;
  font-weight: 900;
}

.permission-secondary-actions button:last-child {
  color: #0066cc;
}

.vehicle-permission-card span,
.vehicle-conflict-card span,
.vehicle-permission-card small {
  color: var(--muted);
  font-size: 13px;
}

.vehicle-conflict-card {
  border-color: color-mix(in srgb, #ff9f0a 34%, var(--line));
  background: color-mix(in srgb, #ff9f0a 10%, var(--panel));
}

.verification-options button {
  min-height: 48px;
  border: 1px solid var(--line);
  border-radius: 14px;
  color: var(--ink);
  background: color-mix(in srgb, var(--panel) 86%, #fff 14%);
  font-weight: 900;
  text-align: left;
  padding: 0 14px;
}

.filters,
.skin-switcher,
.shortcut-preferences,
.account-links {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  margin-bottom: 14px;
}

.filters button,
.skin-switcher button,
.shortcut-preferences button,
.account-links button {
  flex: 0 0 auto;
  min-height: 34px;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0 12px;
  color: var(--ink);
  background: var(--panel);
  font-size: 12px;
  font-weight: 900;
}

.filters .active,
.skin-switcher .active,
.shortcut-preferences .active,
.account-links .active {
  color: #fff;
  background: var(--blue);
}

.preference-card {
  display: grid;
  gap: 8px;
  margin: 12px 0;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--panel);
  box-shadow: 0 16px 38px rgba(29, 29, 31, .08);
}

.preference-card b {
  font-size: 16px;
}

.logout-button {
  width: 100%;
  margin-top: 14px;
  background: var(--ink);
}

.desktop-gate {
  position: relative;
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: calc(env(safe-area-inset-top) + 32px) 20px calc(env(safe-area-inset-bottom) + 32px);
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(ellipse at 50% 12%, rgba(11, 140, 255, .18), transparent 52%),
    linear-gradient(180deg, #f8fbff 0%, #eef6ff 54%, #f7fbff 100%);
}

.desktop-gate::before {
  content: "";
  position: absolute;
  inset: -18%;
  z-index: -2;
  opacity: .58;
  background:
    conic-gradient(from 120deg at 50% 48%, rgba(11, 140, 255, .14), rgba(255, 255, 255, 0), rgba(72, 166, 255, .12), rgba(255, 255, 255, 0), rgba(11, 140, 255, .14));
  animation: launch-bg-drift 18s ease-in-out infinite alternate;
}

.desktop-gate::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(90deg, rgba(255,255,255,.58) 1px, transparent 1px),
    linear-gradient(180deg, rgba(255,255,255,.48) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: radial-gradient(ellipse at center, rgba(0,0,0,.42), transparent 68%);
}

.launch-countdown-stage {
  width: min(100%, 620px);
  display: grid;
  justify-items: center;
  gap: 24px;
  text-align: center;
  color: #101828;
  animation: launch-stage-in .82s cubic-bezier(.2, .8, .2, 1) both;
}

.launch-logo {
  position: relative;
  display: grid;
  place-items: center;
  width: 156px;
  height: 156px;
}

.launch-logo-mark {
  position: relative;
  z-index: 2;
  width: 104px;
  height: 104px;
  filter: drop-shadow(0 22px 42px rgba(3, 86, 216, .22));
  animation: launch-logo-pulse 3.4s ease-in-out infinite;
}

.launch-logo-ripple {
  position: absolute;
  inset: 16px;
  border: 1px solid rgba(11, 140, 255, .20);
  border-radius: 999px;
  box-shadow: 0 0 44px rgba(11, 140, 255, .12);
  animation: launch-ripple 3.8s ease-out infinite;
}

.launch-logo-ripple-b {
  inset: 4px;
  animation-delay: 1.25s;
}

.launch-countdown-stage h1 {
  margin: -8px 0 0;
  color: #111827;
  font-size: 76px;
  font-weight: 950;
  line-height: .95;
  letter-spacing: 0;
}

.launch-countdown-timer {
  display: grid;
  grid-template-columns: repeat(4, minmax(88px, 1fr));
  gap: 10px;
  width: min(100%, 470px);
}

.launch-countdown-timer span {
  min-width: 0;
  display: grid;
  gap: 4px;
  justify-items: center;
  padding: 14px 10px 12px;
  border: 1px solid rgba(15, 23, 42, .08);
  border-radius: 24px;
  background: rgba(255, 255, 255, .62);
  box-shadow: 0 18px 50px rgba(31, 64, 106, .10);
  backdrop-filter: blur(18px);
  animation: launch-counter-in .58s cubic-bezier(.2, .8, .2, 1) both;
}

.launch-countdown-timer span:nth-child(2) { animation-delay: .06s; }
.launch-countdown-timer span:nth-child(3) { animation-delay: .12s; }
.launch-countdown-timer span:nth-child(4) { animation-delay: .18s; }

.launch-countdown-timer b {
  color: #0b3b75;
  font-size: 44px;
  font-weight: 950;
  line-height: 1;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}

.launch-countdown-timer small {
  color: #667085;
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
  text-transform: uppercase;
}

.launch-countdown-copy {
  margin: -6px 0 0;
  color: #475467;
  font-size: 22px;
  font-weight: 850;
}

@keyframes launch-stage-in {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes launch-bg-drift {
  from {
    transform: translate3d(-1.5%, -1%, 0) scale(1);
  }
  to {
    transform: translate3d(1.5%, 1%, 0) scale(1.03);
  }
}

@keyframes launch-logo-pulse {
  0%, 100% {
    transform: translateY(0) scale(1);
  }
  50% {
    transform: translateY(-3px) scale(1.025);
  }
}

@keyframes launch-ripple {
  0% {
    opacity: .84;
    transform: scale(.72);
  }
  74% {
    opacity: .05;
    transform: scale(1.25);
  }
  100% {
    opacity: 0;
    transform: scale(1.25);
  }
}

@keyframes launch-counter-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 620px) {
  .launch-countdown-stage {
    gap: 20px;
  }

  .launch-logo {
    width: 132px;
    height: 132px;
  }

  .launch-logo-mark {
    width: 92px;
    height: 92px;
  }

  .launch-countdown-stage h1 {
    font-size: 56px;
  }

  .launch-countdown-timer {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 380px) {
  .launch-countdown-stage h1 {
    font-size: 44px;
  }

  .launch-countdown-timer b {
    font-size: 36px;
  }
}

@media (max-width: 430px) {
  .home-view::after {
    top: calc(env(safe-area-inset-top) + 154px);
    height: 38px;
  }

  .map-area {
    inset: calc(env(safe-area-inset-top) + 166px) 0 0;
  }

  .topbar {
    left: 10px;
    right: 10px;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 7px;
  }

  .mini-brand button {
    min-height: 38px;
    padding: 0 10px 0 12px;
  }

  .mini-brand .map-layers-top-toggle {
    min-height: 36px;
    padding: 0 9px;
    font-size: 11px;
  }

  .map-layers-top-toggle i {
    width: 18px;
    height: 18px;
  }

  .vehicle-avatar {
    width: 52px;
    height: 52px;
    font-size: 16px;
  }

  .vehicle-avatar::before {
    width: 38px;
    height: 38px;
    font-size: 20px;
  }

  .top-actions button {
    width: 38px;
    height: 38px;
  }

  .shortcut-strip {
    top: calc(env(safe-area-inset-top) + 50px);
    left: 8px;
    right: 8px;
    grid-template-columns: 88px minmax(0, 1fr);
    grid-template-rows: 88px;
    min-height: 100px;
    padding: 5px 0 6px 5px;
  }

  .active-profile-photo {
    width: 62px;
    height: 62px;
    font-size: 23px;
  }

  .roadtalk-live {
    top: calc(env(safe-area-inset-top) + 164px);
    right: 10px;
    left: auto;
    min-height: 30px;
    max-width: min(178px, calc(100vw - 20px));
    font-size: 11px;
  }

  .shortcut-avatar {
    width: 62px;
    height: 62px;
  }

  .map-chips {
    top: calc(env(safe-area-inset-top) + 174px);
  }

  .map-layers {
    top: calc(env(safe-area-inset-top) + 214px);
    left: 10px;
  }

  .map-layers button {
    min-height: 27px;
    padding: 0 7px;
    font-size: 9px;
  }

  .map-layers-title {
    padding: 0 6px;
    font-size: 9px;
  }

  .gps-status {
    top: calc(env(safe-area-inset-top) + 216px);
    right: 10px;
  }

  .show-my-vehicle {
    top: calc(env(safe-area-inset-top) + 250px);
    right: 10px;
  }

  .social-drawer {
    left: 8px;
    right: 8px;
    bottom: calc(env(safe-area-inset-bottom) + 92px);
  }

  .social-drawer-panel {
    padding: 10px;
  }

  .social-card {
    flex-basis: 176px;
  }
}

@media (max-width: 430px) and (max-height: 760px) {
  .home-view::after {
    top: calc(env(safe-area-inset-top) + 148px);
    height: 36px;
  }

  .map-area {
    inset: calc(env(safe-area-inset-top) + 160px) 0 0;
  }

  .shortcut-strip {
    top: calc(env(safe-area-inset-top) + 48px);
    grid-template-columns: 84px minmax(0, 1fr);
    grid-template-rows: 84px;
    min-height: 96px;
    padding-left: 5px;
  }

  .active-profile-photo {
    width: 60px;
    height: 60px;
    font-size: 22px;
  }

  .stories button {
    width: 80px;
    min-height: 80px;
  }

  .shortcut-avatar {
    width: 60px;
    height: 60px;
  }

  .stories b {
    font-size: 12px;
  }

  .stories small {
    font-size: 9px;
  }

  .stories i {
    top: 46px;
    right: 4px;
  }

  .roadtalk-live {
    display: none;
    top: calc(env(safe-area-inset-top) + 162px);
    right: 10px;
    left: auto;
    max-width: 156px;
  }

.add-studio-fab {
  right: 16px;
  bottom: calc(env(safe-area-inset-bottom) + 86px);
  z-index: 45;
  display: inline-grid;
  grid-template-columns: 30px auto;
  align-items: center;
  gap: 7px;
  min-height: 44px;
  border: 1px solid color-mix(in srgb, var(--blue) 22%, rgba(255, 255, 255, .72));
  border-radius: 999px;
  padding: 6px 13px 6px 7px;
  color: #fff;
  background:
    radial-gradient(circle at 24% 16%, rgba(255, 255, 255, .34), transparent 34%),
    linear-gradient(135deg, var(--blue), #064dd8 62%, #143b8f);
  box-shadow: 0 16px 34px rgba(0, 81, 201, .22);
  font: inherit;
  font-weight: 950;
  backdrop-filter: blur(14px);
}

.add-studio-fab span {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  color: var(--blue);
  background: rgba(255, 255, 255, .94);
  font-size: 22px;
  line-height: 1;
}

.add-studio-fab b {
  overflow: hidden;
  font-size: 13px;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

  .plate-cta {
    grid-template-columns: 62px 38px 1fr;
    min-height: 50px;
    bottom: calc(env(safe-area-inset-bottom) + 16px);
    width: min(420px, calc(100vw - 32px));
    padding: 4px;
  }

  .plate-cta .plate-country-chip,
  .plate-mic-ai {
    height: 40px;
    min-height: 40px;
  }

  .plate-cta b {
    font-size: 12px;
    letter-spacing: .025em;
  }

  .map-chips {
    top: calc(env(safe-area-inset-top) + 168px);
  }

  .map-layers {
    top: calc(env(safe-area-inset-top) + 208px);
  }

  .gps-status {
    top: calc(env(safe-area-inset-top) + 210px);
    max-width: calc(100vw - 24px);
  }

  .show-my-vehicle {
    top: calc(env(safe-area-inset-top) + 244px);
    max-width: calc(100vw - 24px);
  }

  .social-drawer-handle {
    min-height: 34px;
    font-size: 11px;
  }

  .social-drawer[data-state="half"] .social-drawer-panel {
    max-height: 236px;
    overflow-y: auto;
  }

  .sheet {
    max-height: calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 20px);
    padding-bottom: calc(env(safe-area-inset-bottom) + 92px);
  }

  .sheet h2 {
    font-size: 24px;
  }

  .voice-command-button {
    width: min(168px, 56vw);
    min-height: 88px;
    font-size: 18px;
  }

  .sheet-search {
    grid-template-columns: minmax(0, 1fr) 76px;
  }

  .plate-sheet-tools {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 430px) {
  .sheet,
  .tabbar,
  .dock-handle,
  .fp-bottom-nav,
  .social-drawer-panel,
  .social-drawer-handle,
  .alert-toast,
  .app-toast,
  .page-view .subview-bar,
  #garage-view .subview-bar {
    backdrop-filter: none;
  }

  .sheet {
    box-shadow: 0 10px 28px rgba(29, 29, 31, .13);
  }
}

@media (prefers-reduced-motion: reduce) {
  .sheet,
  .sheet-backdrop,
  .tabbar,
  .nav-dock,
  .fp-bottom-nav,
  .social-drawer-panel,
  .social-drawer-handle,
  .app-toast,
  .alert-toast,
  .fp-marker.me,
  .voice-command-button.listening {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* Garage v2: vehicle showcase + local theme packs. */
.garage-passport-v2 {
  --garage-theme-accent: var(--blue);
  --garage-theme-ink: #f8fbff;
  --garage-theme-deep: #071322;
  gap: 7px;
}

.garage-passport-v2[data-garage-theme="findplate_dark"],
.garage-passport-v2[data-garage-theme="audi_rs"],
.garage-passport-v2[data-garage-theme="bmw_m"],
.garage-passport-v2[data-garage-theme="mercedes_amg"],
.garage-passport-v2[data-garage-theme="truck_black"],
.garage-passport-v2[data-garage-theme="night_drive"] {
  --garage-theme-ink: #ffffff;
  --garage-theme-deep: #05070c;
}

.garage-passport-v2[data-garage-theme="audi_rs"] { --garage-theme-accent: #d71920; }
.garage-passport-v2[data-garage-theme="bmw_m"] { --garage-theme-accent: #1c69d4; }
.garage-passport-v2[data-garage-theme="mercedes_amg"] { --garage-theme-accent: #c0c7d0; }
.garage-passport-v2[data-garage-theme="truck_black"] { --garage-theme-accent: #f59e0b; }
.garage-passport-v2[data-garage-theme="night_drive"] { --garage-theme-accent: #7c3aed; }

.garage-v2-marker {
  justify-self: start;
  border: 1px solid color-mix(in srgb, var(--garage-theme-accent) 24%, var(--line));
  border-radius: 999px;
  padding: 4px 8px;
  color: color-mix(in srgb, var(--garage-theme-accent) 82%, #0b1b31);
  background: color-mix(in srgb, var(--garage-theme-accent) 8%, #fff 92%);
  font-size: 9px;
  font-weight: 950;
}

.garage-passport-v2 .garage-vehicle-showcase-block {
  display: block;
}

.garage-passport-v2 .garage-vehicle-showcase {
  display: block;
  height: clamp(220px, 28dvh, 260px);
  min-height: 0;
  border: 1px solid color-mix(in srgb, var(--garage-theme-accent) 28%, rgba(255, 255, 255, .56));
  border-radius: 26px;
  padding: 0;
  color: var(--garage-theme-ink);
  background:
    radial-gradient(circle at 12% 8%, color-mix(in srgb, var(--garage-theme-accent) 28%, transparent), transparent 34%),
    linear-gradient(145deg, color-mix(in srgb, var(--garage-theme-accent) 15%, #f7fbff), #eaf2fb);
  box-shadow: 0 14px 34px rgba(15, 23, 42, .12);
}

.garage-passport-v2 .garage-vehicle-showcase.empty {
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr);
  min-height: 160px;
  padding: 14px;
  color: var(--ink);
}

.garage-showcase-visual,
.garage-showcase-scrim {
  position: absolute;
  inset: 0;
}

.garage-showcase-visual {
  display: grid;
  place-items: center;
  color: color-mix(in srgb, var(--garage-theme-accent) 78%, #fff);
  font-size: 58px;
  font-weight: 950;
}

.garage-showcase-visual img,
.garage-showcase-visual video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.garage-showcase-scrim {
  background:
    linear-gradient(180deg, rgba(3, 8, 18, .04) 0%, rgba(3, 8, 18, .08) 36%, rgba(3, 8, 18, .74) 100%),
    radial-gradient(circle at 18% 76%, color-mix(in srgb, var(--garage-theme-accent) 34%, transparent), transparent 40%);
  pointer-events: none;
}

.garage-passport-v2 .garage-showcase-copy {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 14px;
  z-index: 2;
  gap: 5px;
  color: #fff;
  text-shadow: 0 8px 24px rgba(0, 0, 0, .38);
}

.garage-passport-v2 .garage-showcase-copy b {
  color: #fff;
  font-size: clamp(24px, 7.4vw, 34px);
  line-height: .96;
  letter-spacing: 0;
  white-space: normal;
}

.garage-passport-v2 .garage-showcase-copy small {
  color: rgba(255, 255, 255, .88);
  font-size: 11px;
  white-space: normal;
}

.garage-passport-v2 .garage-showcase-kicker {
  width: fit-content;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 999px;
  padding: 4px 7px;
  color: #fff;
  background: rgba(255, 255, 255, .13);
  backdrop-filter: blur(12px);
  text-shadow: none;
}

.garage-passport-v2 .garage-showcase-badges span {
  min-height: 21px;
  border-color: rgba(255, 255, 255, .22);
  color: #fff;
  background: rgba(255, 255, 255, .14);
  backdrop-filter: blur(12px);
  padding: 0 7px;
  font-size: 8.5px;
  text-shadow: none;
}

.garage-passport-v2 .garage-showcase-badges span.online {
  color: #e8fff1;
  background: rgba(12, 126, 60, .34);
}

.garage-showcase-theme-badge {
  border-color: color-mix(in srgb, var(--garage-theme-accent) 52%, rgba(255, 255, 255, .28)) !important;
  background: color-mix(in srgb, var(--garage-theme-accent) 44%, rgba(255, 255, 255, .14)) !important;
}

.garage-showcase-menu {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 38px;
  height: 34px;
  border: 1px solid rgba(255, 255, 255, .26);
  border-radius: 999px;
  color: #fff;
  background: rgba(7, 20, 38, .24);
  box-shadow: 0 10px 28px rgba(0, 0, 0, .18);
  backdrop-filter: blur(12px);
  font-size: 16px;
  font-weight: 950;
}

.garage-showcase-actions {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 12px;
  z-index: 3;
  display: grid;
  grid-template-columns: 1.3fr 1fr .75fr;
  gap: 7px;
}

.garage-showcase-actions button {
  min-height: 43px;
  border: 1px solid rgba(255, 255, 255, .24);
  border-radius: 999px;
  padding: 0 10px;
  color: #fff;
  background: rgba(255, 255, 255, .15);
  box-shadow: 0 10px 26px rgba(0, 0, 0, .16);
  backdrop-filter: blur(12px);
  font-size: 11px;
  font-weight: 950;
}

.garage-showcase-actions button:first-child {
  color: #071322;
  background: rgba(255, 255, 255, .86);
}

.garage-category-strip {
  position: sticky;
  top: calc(env(safe-area-inset-top) + 43px);
  z-index: 6;
  display: flex;
  gap: 6px;
  overflow-x: auto;
  margin: 0 -14px;
  padding: 2px 14px 5px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--bg) 92%, transparent), color-mix(in srgb, var(--bg) 78%, transparent));
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.garage-category-strip::-webkit-scrollbar {
  display: none;
}

.garage-category-strip button {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  border: 1px solid color-mix(in srgb, var(--line) 74%, transparent);
  border-radius: 999px;
  padding: 0 10px;
  color: color-mix(in srgb, var(--ink) 76%, var(--muted));
  background: rgba(255, 255, 255, .70);
  box-shadow: 0 8px 18px rgba(15, 23, 42, .05);
  font-size: 11px;
  font-weight: 950;
  white-space: nowrap;
}

.garage-category-strip button span {
  display: grid;
  place-items: center;
  width: 19px;
  height: 19px;
  border-radius: 999px;
  color: var(--garage-theme-accent);
  background: color-mix(in srgb, var(--garage-theme-accent) 10%, #fff 90%);
  font-size: 9px;
  font-weight: 950;
}

.garage-category-strip button.active {
  color: #fff;
  border-color: transparent;
  background: linear-gradient(145deg, var(--garage-theme-accent), color-mix(in srgb, var(--garage-theme-accent) 68%, #071322));
}

.garage-category-strip button.active span {
  color: var(--garage-theme-accent);
  background: rgba(255, 255, 255, .9);
}

.garage-gallery-section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 10px;
  min-height: 27px;
  padding-right: 48px;
}

.garage-gallery-section-head b {
  color: var(--ink);
  font-size: 17px;
  font-weight: 950;
}

.garage-gallery-section-head small {
  color: var(--muted);
  font-size: 9px;
  font-weight: 850;
  text-align: right;
}

.gallery-media-grid--reels,
.gallery-media-grid--routes {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  margin: 0 -14px;
  padding: 0 14px 4px;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.gallery-media-grid--reels::-webkit-scrollbar,
.gallery-media-grid--routes::-webkit-scrollbar {
  display: none;
}

.gallery-media-grid--reels .gallery-media-card,
.gallery-media-grid--routes .gallery-media-card {
  flex: 0 0 min(76vw, 310px);
  scroll-snap-align: start;
}

.gallery-media-grid--reels .gallery-media-card-main,
.gallery-media-grid--routes .gallery-media-card-main {
  grid-column: auto;
}

.gallery-media-grid--reels .gallery-media-thumb,
.gallery-media-grid--routes .gallery-media-thumb {
  aspect-ratio: 4 / 5;
  min-height: 258px;
}

.garage-theme-card {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  border: 1px solid color-mix(in srgb, var(--garage-theme-accent) 20%, var(--line));
  border-radius: 18px;
  padding: 10px;
  background:
    radial-gradient(circle at 0 0, color-mix(in srgb, var(--garage-theme-accent) 16%, transparent), transparent 42%),
    rgba(255, 255, 255, .74);
}

.garage-theme-card .garage-theme-swatch,
.garage-theme-picker-preview {
  display: block;
  width: 38px;
  height: 38px;
  border: 1px solid color-mix(in srgb, var(--garage-theme-accent) 38%, rgba(255, 255, 255, .8));
  border-radius: 14px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--garage-theme-accent) 92%, #fff), color-mix(in srgb, var(--garage-theme-accent) 28%, #071322)),
    var(--garage-theme-accent);
  box-shadow: 0 10px 22px color-mix(in srgb, var(--garage-theme-accent) 18%, transparent);
}

.garage-theme-card b {
  color: var(--ink);
  font-size: 13px;
  font-weight: 950;
}

.garage-theme-card small {
  display: block;
  color: var(--muted);
  font-size: 9.5px;
  font-weight: 820;
  line-height: 1.3;
}

.garage-theme-card button,
.garage-theme-picker-card button {
  min-height: 32px;
  border: 1px solid color-mix(in srgb, var(--garage-theme-accent) 28%, var(--line));
  border-radius: 999px;
  padding: 0 11px;
  color: color-mix(in srgb, var(--garage-theme-accent) 72%, var(--ink));
  background: rgba(255, 255, 255, .74);
  font-size: 10px;
  font-weight: 950;
}

.garage-theme-picker-list {
  display: grid;
  gap: 8px;
}

.garage-theme-picker-card {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  border: 1px solid color-mix(in srgb, var(--garage-theme-accent) 18%, var(--line));
  border-radius: 18px;
  padding: 10px;
  background:
    radial-gradient(circle at 0 0, color-mix(in srgb, var(--garage-theme-accent) 13%, transparent), transparent 42%),
    rgba(255, 255, 255, .82);
}

.garage-theme-picker-card.active {
  border-color: color-mix(in srgb, var(--garage-theme-accent) 52%, var(--line));
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--garage-theme-accent) 12%, transparent);
}

.garage-theme-picker-card b {
  color: var(--ink);
  font-size: 13px;
  font-weight: 950;
}

.garage-theme-picker-card small {
  display: block;
  color: var(--muted);
  font-size: 9.5px;
  font-weight: 820;
  line-height: 1.3;
}

.garage-theme-picker-card.premium button {
  color: #7a5200;
  border-color: color-mix(in srgb, var(--gold) 34%, var(--line));
  background: color-mix(in srgb, var(--gold) 12%, #fff 88%);
}

/* Legacy compact garage card overrides kept neutral; current Garage uses InstaPlate social layout below. */
#garage-list {
  padding-top: 6px;
}

.garage-passport-v2 {
  gap: 10px;
}

.garage-passport-v2 .garage-vehicle-account-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 108px;
  align-items: stretch;
  gap: 12px;
  height: clamp(160px, 21dvh, 180px);
  min-height: 0;
  border-radius: 26px;
  padding: 14px;
  color: var(--ink);
  background:
    radial-gradient(circle at 100% 0, color-mix(in srgb, var(--garage-theme-accent) 16%, transparent), transparent 42%),
    linear-gradient(145deg, #fff, color-mix(in srgb, var(--garage-theme-accent) 6%, #f7f9fc));
  box-shadow: 0 10px 28px rgba(15, 23, 42, .075);
}

.garage-passport-v2[data-garage-theme="findplate_dark"] .garage-vehicle-account-card,
.garage-passport-v2[data-garage-theme="audi_rs"] .garage-vehicle-account-card,
.garage-passport-v2[data-garage-theme="bmw_m"] .garage-vehicle-account-card,
.garage-passport-v2[data-garage-theme="mercedes_amg"] .garage-vehicle-account-card,
.garage-passport-v2[data-garage-theme="truck_black"] .garage-vehicle-account-card,
.garage-passport-v2[data-garage-theme="night_drive"] .garage-vehicle-account-card {
  color: #fff;
  background:
    radial-gradient(circle at 100% 0, color-mix(in srgb, var(--garage-theme-accent) 26%, transparent), transparent 42%),
    linear-gradient(145deg, #111827, #05070c);
}

.garage-passport-v2 .garage-vehicle-account-card .garage-showcase-copy {
  position: static;
  display: grid;
  align-content: space-between;
  gap: 6px;
  min-width: 0;
  color: inherit;
  text-shadow: none;
}

.garage-passport-v2 .garage-vehicle-account-card .garage-showcase-copy b {
  color: currentColor;
  font-size: clamp(21px, 5.8vw, 28px);
  line-height: 1.02;
  white-space: nowrap;
}

.garage-passport-v2 .garage-vehicle-account-card .garage-showcase-kicker {
  width: fit-content;
  border: 0;
  border-radius: 8px;
  padding: 4px 8px;
  color: color-mix(in srgb, var(--garage-theme-accent) 78%, var(--ink));
  background: color-mix(in srgb, var(--garage-theme-accent) 10%, #fff 90%);
  font-size: 10px;
  line-height: 1;
  backdrop-filter: none;
}

.garage-passport-v2[data-garage-theme="findplate_dark"] .garage-vehicle-account-card .garage-showcase-kicker,
.garage-passport-v2[data-garage-theme="audi_rs"] .garage-vehicle-account-card .garage-showcase-kicker,
.garage-passport-v2[data-garage-theme="bmw_m"] .garage-vehicle-account-card .garage-showcase-kicker,
.garage-passport-v2[data-garage-theme="mercedes_amg"] .garage-vehicle-account-card .garage-showcase-kicker,
.garage-passport-v2[data-garage-theme="truck_black"] .garage-vehicle-account-card .garage-showcase-kicker,
.garage-passport-v2[data-garage-theme="night_drive"] .garage-vehicle-account-card .garage-showcase-kicker {
  color: #fff;
  background: color-mix(in srgb, var(--garage-theme-accent) 34%, rgba(255, 255, 255, .12));
}

.garage-account-plate {
  display: block;
  color: color-mix(in srgb, currentColor 66%, var(--muted));
  font-size: 14px;
  font-weight: 900;
  letter-spacing: .03em;
  line-height: 1;
}

.garage-passport-v2 .garage-vehicle-account-card .garage-showcase-badges {
  gap: 5px;
}

.garage-passport-v2 .garage-vehicle-account-card .garage-showcase-badges span {
  min-height: 22px;
  border: 1px solid color-mix(in srgb, var(--garage-theme-accent) 12%, var(--line));
  padding: 0 7px;
  color: color-mix(in srgb, currentColor 78%, var(--muted));
  background: rgba(255, 255, 255, .62);
  backdrop-filter: none;
  font-size: 8.5px;
}

.garage-passport-v2[data-garage-theme="findplate_dark"] .garage-vehicle-account-card .garage-showcase-badges span,
.garage-passport-v2[data-garage-theme="audi_rs"] .garage-vehicle-account-card .garage-showcase-badges span,
.garage-passport-v2[data-garage-theme="bmw_m"] .garage-vehicle-account-card .garage-showcase-badges span,
.garage-passport-v2[data-garage-theme="mercedes_amg"] .garage-vehicle-account-card .garage-showcase-badges span,
.garage-passport-v2[data-garage-theme="truck_black"] .garage-vehicle-account-card .garage-showcase-badges span,
.garage-passport-v2[data-garage-theme="night_drive"] .garage-vehicle-account-card .garage-showcase-badges span {
  color: #fff;
  border-color: rgba(255, 255, 255, .14);
  background: rgba(255, 255, 255, .12);
}

.garage-account-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 2px;
}

.garage-account-actions button {
  min-height: 36px;
  border: 1px solid color-mix(in srgb, var(--garage-theme-accent) 18%, var(--line));
  border-radius: 12px;
  padding: 0 10px;
  color: var(--ink);
  background: rgba(255, 255, 255, .82);
  font-size: 12px;
  font-weight: 950;
}

.garage-account-actions button:last-child {
  color: #fff;
  border-color: transparent;
  background: color-mix(in srgb, var(--garage-theme-accent) 78%, #071322);
}

.garage-account-thumb {
  position: relative;
  overflow: hidden;
  display: grid;
  place-items: center;
  align-self: stretch;
  border: 1px solid rgba(255, 255, 255, .72);
  border-radius: 20px;
  color: var(--garage-theme-accent);
  background:
    radial-gradient(circle at 16% 12%, color-mix(in srgb, var(--garage-theme-accent) 18%, transparent), transparent 42%),
    color-mix(in srgb, var(--garage-theme-accent) 7%, #f4f8ff);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .76);
  font-size: 38px;
  font-weight: 950;
}

.garage-account-thumb img,
.garage-account-thumb video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.garage-account-thumb .garage-showcase-media-badge {
  top: 7px;
  left: 7px;
}

.garage-passport-v2 .garage-vehicle-account-card .garage-showcase-menu {
  top: 10px;
  right: 10px;
  width: 34px;
  height: 32px;
  color: color-mix(in srgb, var(--garage-theme-accent) 78%, var(--ink));
  background: rgba(255, 255, 255, .76);
  box-shadow: 0 8px 18px rgba(15, 23, 42, .08);
  backdrop-filter: blur(8px);
}

.garage-passport-v2[data-garage-theme="findplate_dark"] .garage-vehicle-account-card .garage-showcase-menu,
.garage-passport-v2[data-garage-theme="audi_rs"] .garage-vehicle-account-card .garage-showcase-menu,
.garage-passport-v2[data-garage-theme="bmw_m"] .garage-vehicle-account-card .garage-showcase-menu,
.garage-passport-v2[data-garage-theme="mercedes_amg"] .garage-vehicle-account-card .garage-showcase-menu,
.garage-passport-v2[data-garage-theme="truck_black"] .garage-vehicle-account-card .garage-showcase-menu,
.garage-passport-v2[data-garage-theme="night_drive"] .garage-vehicle-account-card .garage-showcase-menu {
  color: #fff;
  background: rgba(255, 255, 255, .12);
}

.garage-category-strip {
  position: static;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 9px 10px;
  overflow: visible;
  margin: 0;
  padding: 0 0 3px;
  background: transparent;
  scroll-snap-type: none;
}

.garage-category-strip button {
  display: grid;
  justify-items: center;
  align-content: start;
  gap: 6px;
  min-height: 74px;
  border: 0;
  border-radius: 18px;
  padding: 0;
  color: var(--ink);
  background: transparent;
  box-shadow: none;
  font-size: 10px;
  line-height: 1.15;
  white-space: normal;
  text-align: center;
}

.garage-category-strip button span {
  width: 48px;
  height: 48px;
  border: 1px solid color-mix(in srgb, var(--garage-theme-accent) 10%, var(--line));
  border-radius: 16px;
  color: color-mix(in srgb, var(--garage-theme-accent) 76%, #0b1b31);
  background: #fff;
  box-shadow: 0 8px 18px rgba(15, 23, 42, .045);
  font-size: 11px;
}

.garage-category-strip button.active {
  color: color-mix(in srgb, var(--garage-theme-accent) 78%, var(--ink));
  background: transparent;
}

.garage-category-strip button.active span {
  color: #fff;
  border-color: transparent;
  background: linear-gradient(145deg, var(--garage-theme-accent), color-mix(in srgb, var(--garage-theme-accent) 68%, #071322));
  box-shadow: 0 10px 22px color-mix(in srgb, var(--garage-theme-accent) 16%, transparent);
}

.garage-gallery-panel-photo-first,
.garage-local-section,
.garage-dossier {
  border: 1px solid color-mix(in srgb, var(--line) 76%, transparent);
  border-radius: 22px;
  padding: 12px;
  background: rgba(255, 255, 255, .72);
  box-shadow: 0 8px 22px rgba(15, 23, 42, .045);
}

/* InstaPlate / Garage Social */
.garage-social-profile {
  display: grid;
  gap: 10px;
  border-bottom: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
  padding: 2px 0 10px;
}

.garage-social-empty {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  min-height: 118px;
  border: 1px dashed color-mix(in srgb, var(--garage-theme-accent) 22%, var(--line));
  border-radius: 24px;
  padding: 14px;
  color: var(--ink);
  background: rgba(255, 255, 255, .72);
  text-align: left;
}

.garage-social-header {
  display: grid;
  grid-template-columns: 94px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  min-height: 126px;
  color: var(--ink);
}

.garage-social-avatar {
  position: relative;
  display: grid;
  place-items: center;
  width: 92px;
  height: 92px;
  border: 0;
  border-radius: 999px;
  padding: 0;
  background: transparent;
  cursor: pointer;
}

.garage-social-avatar-ring {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    conic-gradient(from 145deg, var(--garage-theme-accent), color-mix(in srgb, var(--garage-theme-accent) 24%, #fff), var(--garage-theme-accent), #f3c86a, var(--garage-theme-accent));
  box-shadow: 0 10px 26px color-mix(in srgb, var(--garage-theme-accent) 18%, transparent);
}

.garage-social-avatar-media {
  position: relative;
  z-index: 1;
  overflow: hidden;
  display: grid;
  place-items: center;
  width: 82px;
  height: 82px;
  border: 3px solid #fff;
  border-radius: inherit;
  color: var(--garage-theme-accent);
  background:
    radial-gradient(circle at 20% 0, color-mix(in srgb, var(--garage-theme-accent) 20%, transparent), transparent 38%),
    #f7fbff;
  font-size: 32px;
  font-weight: 950;
}

.garage-social-avatar-media img,
.garage-social-avatar-media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.garage-social-avatar .garage-showcase-media-badge {
  top: auto;
  right: -2px;
  bottom: 4px;
  left: auto;
  z-index: 2;
  border-color: #fff;
  color: #fff;
  background: var(--garage-theme-accent);
}

.garage-social-main {
  display: grid;
  gap: 7px;
  min-width: 0;
}

.garage-social-title-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 36px;
  align-items: start;
  gap: 8px;
}

.garage-social-title-row b {
  display: block;
  overflow: hidden;
  color: var(--ink);
  font-size: 21px;
  font-weight: 950;
  letter-spacing: .01em;
  line-height: 1.05;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.garage-social-title-row small {
  display: block;
  overflow: hidden;
  margin-top: 3px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.garage-social-menu {
  display: grid;
  place-items: center;
  width: 34px;
  height: 32px;
  border: 1px solid color-mix(in srgb, var(--line) 72%, transparent);
  border-radius: 999px;
  color: var(--ink);
  background: rgba(255, 255, 255, .72);
  font-size: 14px;
  font-weight: 950;
}

.garage-social-status {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.garage-social-status span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 22px;
  border: 1px solid color-mix(in srgb, var(--garage-theme-accent) 12%, var(--line));
  border-radius: 999px;
  padding: 0 7px;
  color: color-mix(in srgb, var(--ink) 72%, var(--muted));
  background: rgba(255, 255, 255, .66);
  font-size: 8.5px;
  font-weight: 950;
}

.garage-social-status span.online {
  color: #14733a;
  background: rgba(236, 255, 244, .82);
}

.garage-social-status span i {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: currentColor;
}

.garage-social-stats {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 4px;
  width: 100%;
  max-width: 320px;
}

.garage-social-stats button {
  display: grid;
  gap: 1px;
  min-height: 38px;
  min-width: 0;
  border: 0;
  border-radius: 12px;
  padding: 3px 2px;
  color: var(--ink);
  background: transparent;
  text-align: center;
}

.garage-social-stats b {
  overflow: hidden;
  font-size: clamp(12px, 3.4vw, 17px);
  font-weight: 950;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.garage-social-stats span {
  color: var(--muted);
  font-size: 8.5px;
  font-weight: 860;
  line-height: 1.08;
}

.garage-social-identity-row {
  display: grid;
  gap: 2px;
  width: fit-content;
  max-width: 100%;
  border: 1px solid color-mix(in srgb, var(--garage-theme-accent) 14%, var(--line));
  border-radius: 13px;
  padding: 5px 8px;
  background: color-mix(in srgb, var(--garage-theme-accent) 6%, rgba(255, 255, 255, .72));
}

.garage-social-identity-row span,
.garage-social-identity-row small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.garage-social-identity-row span {
  color: var(--ink);
  font-size: 11px;
  font-weight: 950;
}

.garage-social-identity-row small {
  color: var(--muted);
  font-size: 9px;
  font-weight: 820;
}

.garage-social-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.garage-social-actions > button,
.garage-social-own-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  border: 1px solid color-mix(in srgb, var(--garage-theme-accent) 18%, var(--line));
  border-radius: 999px;
  padding: 0 12px;
  color: color-mix(in srgb, var(--ink) 84%, var(--garage-theme-accent));
  background: rgba(255, 255, 255, .72);
  font: inherit;
  font-size: 11px;
  font-weight: 950;
  white-space: nowrap;
}

.garage-social-follow {
  color: #fff !important;
  border-color: transparent !important;
  background: var(--garage-theme-accent) !important;
}

.garage-social-follow.active {
  color: color-mix(in srgb, var(--garage-theme-accent) 82%, var(--ink)) !important;
  border-color: color-mix(in srgb, var(--garage-theme-accent) 22%, var(--line)) !important;
  background: color-mix(in srgb, var(--garage-theme-accent) 10%, rgba(255, 255, 255, .84)) !important;
}

.garage-social-identity-menu > summary {
  min-width: 34px;
  min-height: 32px;
  font-size: 14px;
}

.garage-identity-card {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 76px;
  border: 1px solid color-mix(in srgb, var(--garage-theme-accent) 18%, var(--line));
  border-radius: 16px;
  padding: 9px 10px;
  color: var(--ink);
  background:
    radial-gradient(circle at 96% 0, color-mix(in srgb, #f4c766 12%, transparent), transparent 30%),
    color-mix(in srgb, var(--panel) 88%, rgba(255, 255, 255, .7));
  box-shadow: 0 8px 18px rgba(15, 23, 42, .045);
}

.garage-identity-main {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
}

.garage-identity-icon {
  flex: 0 0 34px;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid color-mix(in srgb, var(--garage-theme-accent) 22%, var(--line));
  border-radius: 12px;
  color: color-mix(in srgb, var(--garage-theme-accent) 78%, var(--ink));
  background: color-mix(in srgb, var(--garage-theme-accent) 9%, rgba(255, 255, 255, .78));
  font-size: 10px;
  font-weight: 1000;
  letter-spacing: 0;
}

.garage-identity-copy {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.garage-identity-kicker {
  color: color-mix(in srgb, var(--garage-theme-accent) 76%, var(--muted));
  font-size: 8px;
  font-weight: 950;
  text-transform: uppercase;
}

.garage-identity-line {
  display: flex;
  align-items: baseline;
  gap: 6px;
  min-width: 0;
}

.garage-identity-card b {
  color: var(--ink);
  font-size: 17px;
  font-weight: 1000;
  line-height: 1;
  white-space: nowrap;
}

.garage-identity-card small,
.garage-identity-card p {
  margin: 0;
  color: var(--muted);
  font-size: 10px;
  font-weight: 780;
  line-height: 1.2;
}

.garage-identity-card small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.garage-identity-card p {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.garage-identity-card em {
  flex: 0 0 auto;
  border: 1px solid color-mix(in srgb, #f4c766 34%, var(--line));
  border-radius: 999px;
  padding: 2px 6px;
  color: #6d4a00;
  background: rgba(255, 248, 225, .78);
  font-size: 8px;
  font-style: normal;
  font-weight: 950;
}

.garage-identity-actions {
  display: flex;
  align-items: center;
  gap: 5px;
  flex: 0 0 auto;
}

.garage-identity-actions > button,
.garage-identity-menu > summary {
  display: grid;
  place-items: center;
  min-width: 38px;
  min-height: 34px;
  border: 1px solid color-mix(in srgb, var(--garage-theme-accent) 18%, var(--line));
  border-radius: 999px;
  padding: 0 9px;
  color: color-mix(in srgb, var(--ink) 76%, var(--garage-theme-accent));
  background: rgba(255, 255, 255, .66);
  font: inherit;
  font-size: 10px;
  font-weight: 920;
}

.garage-identity-menu {
  position: relative;
}

.garage-identity-menu > summary {
  list-style: none;
  cursor: pointer;
}

.garage-identity-menu > summary::-webkit-details-marker {
  display: none;
}

.garage-identity-menu > div {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 30;
  display: grid;
  gap: 4px;
  width: max-content;
  min-width: 178px;
  border: 1px solid color-mix(in srgb, var(--garage-theme-accent) 18%, var(--line));
  border-radius: 14px;
  padding: 6px;
  background: rgba(255, 255, 255, .96);
  box-shadow: 0 16px 34px rgba(15, 23, 42, .14);
}

.garage-identity-menu button {
  min-height: 36px;
  border: 0;
  border-radius: 10px;
  padding: 0 10px;
  color: var(--ink);
  background: transparent;
  font: inherit;
  font-size: 11px;
  font-weight: 850;
  text-align: left;
}

.garage-identity-menu button:active,
.garage-identity-menu button:hover {
  background: color-mix(in srgb, var(--garage-theme-accent) 9%, transparent);
}

.garage-social-actions .garage-social-identity-menu > summary {
  min-width: 34px;
  min-height: 32px;
  font-size: 14px;
}

.garage-identity-profile-card {
  border-color: color-mix(in srgb, var(--garage-theme-accent) 18%, var(--line));
}

.garage-social-highlights {
  display: flex;
  gap: 13px;
  overflow-x: auto;
  margin: 0 -14px;
  padding: 1px 34px 10px 14px;
  border-bottom: 1px solid color-mix(in srgb, var(--line) 66%, transparent);
  -webkit-overflow-scrolling: touch;
  scroll-padding-right: 34px;
  scrollbar-width: none;
}

.garage-social-highlights::-webkit-scrollbar {
  display: none;
}

.garage-social-highlights button {
  flex: 0 0 58px;
  display: grid;
  justify-items: center;
  gap: 5px;
  border: 0;
  padding: 0;
  color: var(--ink);
  background: transparent;
  font-size: 9.5px;
  font-weight: 900;
  text-align: center;
}

.garage-social-highlights button span {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border: 2px solid color-mix(in srgb, var(--garage-theme-accent) 44%, #f3c86a);
  border-radius: 999px;
  color: var(--garage-theme-accent);
  background:
    radial-gradient(circle at 30% 18%, color-mix(in srgb, var(--garage-theme-accent) 13%, transparent), transparent 46%),
    #fff;
  box-shadow: 0 8px 20px rgba(15, 23, 42, .05);
  font-size: 12px;
  font-weight: 950;
}

.garage-social-highlights button .garage-highlight-cover {
  position: relative;
  overflow: hidden;
}

.garage-social-highlights button .garage-highlight-cover img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.garage-social-highlights button .garage-highlight-cover.has-photo {
  color: #fff;
  background: #111827;
}

.garage-social-highlights button .garage-highlight-cover.has-photo i {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(15, 23, 42, .02), rgba(15, 23, 42, .26)),
    radial-gradient(circle at 35% 20%, rgba(255, 255, 255, .18), transparent 34%);
  pointer-events: none;
}

.garage-social-highlights button .garage-highlight-cover.has-placeholder {
  gap: 1px;
  padding: 7px;
  font-size: 11px;
  line-height: 1;
}

.garage-social-highlights button .garage-highlight-cover.has-placeholder small {
  max-width: 44px;
  min-height: 0;
  overflow: hidden;
  color: currentColor;
  font-size: 6px;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
  opacity: .72;
}

body[data-profile-style="soft-pink"] .garage-social-highlights button span,
body[data-profile-style="feminine"] .garage-social-highlights button span {
  border-color: rgba(219, 77, 134, .46);
  color: #be2f70;
  background:
    radial-gradient(circle at 30% 18%, rgba(244, 114, 182, .22), transparent 48%),
    #fff8fc;
}

body[data-profile-style="soft-pink"] .garage-social-highlights button.active span,
body[data-profile-style="feminine"] .garage-social-highlights button.active span,
body[data-profile-style="soft-pink"] .garage-tabs button.active,
body[data-profile-style="feminine"] .garage-tabs button.active {
  color: #fff;
  background: linear-gradient(145deg, #db4d86, #a855f7);
}

.garage-social-highlights button small {
  display: block;
  min-height: 12px;
  color: var(--muted);
  font-size: 8px;
  font-weight: 900;
  line-height: 1;
}

.garage-social-highlights button .garage-highlight-cover.has-placeholder small {
  min-height: 0;
  max-width: 44px;
  color: currentColor;
  font-size: 6px;
  opacity: .72;
}

.garage-social-highlights button.active span {
  color: #fff;
  background: linear-gradient(145deg, var(--garage-theme-accent), color-mix(in srgb, var(--garage-theme-accent) 62%, #071322));
}

.garage-social-highlights .garage-highlight-add span {
  border-style: dashed;
  color: var(--muted);
  background: rgba(255, 255, 255, .72);
}

body[data-profile-style="soft-pink"] .garage-social-highlights .garage-highlight-add span,
body[data-profile-style="feminine"] .garage-social-highlights .garage-highlight-add span {
  border-color: rgba(219, 77, 134, .28);
  border-style: dashed;
  color: #be2f70;
  background: rgba(255, 248, 252, .78);
}

.garage-social-tabs {
  position: relative;
  z-index: 5;
  display: flex;
  overflow-x: auto;
  gap: 0;
  margin: 0 -14px;
  padding: 0 14px;
  border-bottom: 1px solid color-mix(in srgb, var(--line) 68%, transparent);
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.garage-social-tabs::-webkit-scrollbar {
  display: none;
}

.garage-social-tabs button {
  position: relative;
  flex: 0 0 68px;
  display: grid;
  justify-items: center;
  gap: 3px;
  min-height: 52px;
  border: 0;
  border-radius: 0;
  padding: 7px 0 8px;
  color: var(--muted);
  background: transparent;
  box-shadow: none;
  cursor: pointer;
  font-size: 9px;
  font-weight: 950;
  touch-action: manipulation;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.garage-social-tabs button span {
  pointer-events: none;
  width: auto;
  height: auto;
  border: 0;
  border-radius: 0;
  color: currentColor;
  background: transparent;
  box-shadow: none;
  font-size: 13px;
}

.garage-social-tabs button b {
  pointer-events: none;
}

.garage-social-tabs button.active {
  color: var(--ink);
  background: transparent;
}

.garage-social-tabs button.active::after {
  content: "";
  position: absolute;
  right: 18px;
  bottom: 0;
  left: 18px;
  height: 2px;
  border-radius: 999px 999px 0 0;
  background: var(--garage-theme-accent);
}

.garage-social-tabs button.active span {
  color: var(--garage-theme-accent);
  background: transparent;
}

.garage-passport-v2 .garage-gallery-panel-photo-first {
  border: 0;
  border-radius: 0;
  padding: 0;
  background: transparent;
  box-shadow: none;
}

.garage-passport-v2 .garage-gallery-section-head {
  min-height: 30px;
  padding: 0 46px 0 0;
}

.garage-passport-v2 .garage-highlight-collection {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) 26px;
  align-items: center;
  gap: 8px;
  margin: 0 0 8px;
  border: 1px solid color-mix(in srgb, var(--garage-theme-accent) 18%, var(--line));
  border-radius: 14px;
  padding: 7px 8px;
  color: var(--ink);
  background:
    radial-gradient(circle at 0 0, color-mix(in srgb, var(--garage-theme-accent) 12%, transparent), transparent 40%),
    rgba(255, 255, 255, .72);
}

.garage-passport-v2 .garage-highlight-collection > span {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  color: var(--garage-theme-accent);
  background: color-mix(in srgb, var(--garage-theme-accent) 10%, #fff);
  font-size: 10px;
  font-weight: 950;
}

.garage-passport-v2 .garage-highlight-collection b,
.garage-passport-v2 .garage-highlight-collection small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.garage-passport-v2 .garage-highlight-collection b {
  font-size: 11px;
  font-weight: 950;
}

.garage-passport-v2 .garage-highlight-collection small {
  margin-top: 1px;
  color: var(--muted);
  font-size: 8.5px;
  font-weight: 820;
}

.garage-passport-v2 .garage-highlight-collection button {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  min-height: 24px;
  border: 0;
  border-radius: 999px;
  padding: 0;
  color: var(--muted);
  background: rgba(255, 255, 255, .64);
  font-size: 16px;
  line-height: 1;
}

.garage-passport-v2 .garage-photo-filters {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  margin: 0 -14px 8px;
  padding: 0 14px 2px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.garage-passport-v2 .garage-photo-filters::-webkit-scrollbar {
  display: none;
}

.garage-passport-v2 .garage-photo-filters button {
  flex: 0 0 auto;
  min-height: 30px;
  border: 1px solid color-mix(in srgb, var(--line) 86%, transparent);
  border-radius: 999px;
  padding: 0 10px;
  color: var(--muted);
  background: rgba(255, 255, 255, .76);
  font-size: 10px;
  font-weight: 900;
  white-space: nowrap;
  touch-action: manipulation;
}

.garage-passport-v2 .garage-photo-filters button.active {
  border-color: color-mix(in srgb, var(--garage-theme-accent) 40%, transparent);
  color: #fff;
  background: var(--garage-theme-accent);
}

.garage-passport-v2 .garage-photos-debug {
  display: none;
  margin: 0 0 8px;
  border: 1px solid rgba(245, 158, 11, .42);
  border-radius: 999px;
  padding: 0;
  color: #684200;
  background: rgba(255, 251, 235, .92);
  font-size: 9px;
  font-weight: 850;
  line-height: 1.25;
}

.garage-passport-v2 .garage-photos-debug summary {
  min-height: 24px;
  padding: 6px 9px;
  cursor: pointer;
  list-style: none;
  color: #7a4b00;
  font-size: 10px;
  font-weight: 950;
}

.garage-passport-v2 .garage-photos-debug summary::-webkit-details-marker {
  display: none;
}

.garage-passport-v2 .garage-photos-debug[open] {
  display: grid;
  gap: 3px;
  border-radius: 12px;
  padding: 0 8px 8px;
}

.garage-passport-v2 .garage-photos-debug code {
  overflow: auto;
  display: block;
  max-height: 74px;
  border-radius: 8px;
  padding: 5px;
  color: #1f2937;
  background: rgba(255, 255, 255, .72);
  font-size: 8px;
  white-space: pre-wrap;
}

.garage-passport-v2 .gallery-media-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2px;
  min-height: 0;
}

.garage-passport-v2 .gallery-media-grid--photos {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 2px;
  width: 100%;
  min-height: 0;
  padding: 0 0 24px;
  opacity: 1;
}

.garage-passport-v2 .gallery-media-grid--photos > .gallery-media-card {
  position: relative;
  overflow: hidden !important;
  display: block !important;
  width: 100%;
  aspect-ratio: 1 / 1 !important;
  min-width: 0;
  min-height: 0;
  border-radius: 0;
  background: #eef3f8;
  opacity: 1;
}

.garage-passport-v2 .gallery-media-grid--photos > .gallery-media-card .gallery-media-thumb {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: #eef3f8;
}

.garage-passport-v2 .gallery-media-grid--photos > .gallery-media-card .gallery-media-thumb img,
.garage-passport-v2 .gallery-media-grid--photos > .gallery-media-card .gallery-media-thumb video {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.garage-passport-v2 .gallery-media-grid--photos > .gallery-media-card .garage-media-placeholder {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  align-content: center;
  width: 100%;
  height: 100%;
  padding: 8px;
  text-align: center;
}

.garage-passport-v2 .gallery-media-grid--photos > .gallery-media-card .garage-media-placeholder i {
  width: 26px;
  height: 26px;
  border-radius: 9px;
  font-size: 13px;
}

.garage-passport-v2 .gallery-media-grid--photos > .gallery-media-card .garage-media-placeholder b {
  max-width: 100%;
  font-size: 8px;
}

.garage-passport-v2 .gallery-media-grid--photos > .gallery-media-card .garage-media-placeholder small {
  max-width: 100%;
  font-size: 7px;
}

.garage-passport-v2 .gallery-media-card,
.garage-passport-v2 .gallery-media-card-main {
  position: relative;
  display: grid !important;
  grid-column: auto;
  gap: 0;
  min-width: 0;
  opacity: 1;
}

.garage-passport-v2 .gallery-media-thumb,
.garage-passport-v2 .gallery-media-card-main .gallery-media-thumb {
  aspect-ratio: 1;
  min-height: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.garage-passport-v2 .gallery-media-meta.garage-media-caption {
  display: none;
}

.garage-passport-v2 .gallery-media-badges {
  top: 5px;
  left: 5px;
  gap: 3px;
}

.garage-passport-v2 .gallery-media-badges .garage-media-badge,
.garage-passport-v2 .gallery-media-badges .garage-media-main-badge,
.garage-passport-v2 .gallery-media-thumb .garage-media-visibility {
  min-height: 16px;
  padding: 2px 5px;
  font-size: 7px;
}

.garage-passport-v2 .garage-gallery-empty-note {
  gap: 5px;
  margin-top: 4px;
  border-radius: 14px;
  padding: 18px 12px;
}

.garage-passport-v2 .gallery-media-card .garage-media-options {
  top: 5px;
  right: 5px;
  width: 24px;
  height: 21px;
  font-size: 10px;
}

.garage-passport-v2 .gallery-media-grid--photos > .gallery-media-card .garage-media-options {
  position: absolute;
  top: 5px;
  right: 5px;
  z-index: 5;
  width: 28px;
  height: 28px;
  border-radius: 999px;
}

.garage-passport-v2 .garage-media-play {
  width: 26px;
  height: 26px;
  background: color-mix(in srgb, var(--garage-theme-accent) 74%, rgba(7, 20, 38, .64));
}

.garage-highlight-viewer {
  display: grid;
  gap: 10px;
}

.garage-highlight-viewer-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2px;
}

.garage-highlight-viewer-grid .garage-media-tile {
  position: relative;
  overflow: hidden;
  aspect-ratio: 1 / 1;
  border-radius: 6px;
  background: #eef3f8;
}

.garage-highlight-viewer-grid .gallery-media-thumb {
  position: absolute;
  inset: 0;
  border: 0;
  border-radius: 0;
}

.garage-highlight-viewer-grid .gallery-media-meta {
  display: none;
}

.garage-highlight-assign-list {
  display: grid;
  gap: 8px;
}

.garage-highlight-assign-list button {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-height: 56px;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 8px 10px;
  color: var(--ink);
  background: rgba(255, 255, 255, .82);
  text-align: left;
}

.garage-highlight-assign-list button span {
  grid-row: span 2;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  color: var(--garage-theme-accent, var(--blue));
  background: color-mix(in srgb, var(--garage-theme-accent, var(--blue)) 10%, #fff);
  font-size: 12px;
  font-weight: 950;
}

.garage-highlight-assign-list button b,
.garage-highlight-assign-list button small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.garage-highlight-assign-list button b {
  font-size: 13px;
  font-weight: 950;
}

.garage-highlight-assign-list button small {
  color: var(--muted);
  font-size: 10px;
  font-weight: 820;
}

.garage-highlight-assign-list button:disabled {
  opacity: .62;
}

.garage-passport-v2 .garage-gallery-add-button {
  right: 0;
  bottom: auto;
  top: 0;
  width: 34px;
  height: 30px;
  min-height: 30px;
  z-index: 8;
  border-radius: 10px;
  background: var(--garage-theme-accent);
  box-shadow: 0 8px 18px color-mix(in srgb, var(--garage-theme-accent) 18%, transparent);
  cursor: pointer;
  touch-action: manipulation;
}

.garage-passport-v2[data-garage-theme="audi_rs"] .garage-social-avatar-ring,
.garage-passport-v2[data-garage-theme="audi_rs"] .garage-social-highlights button span {
  border-color: #d71920;
  background:
    radial-gradient(circle at 30% 18%, rgba(215, 25, 32, .18), transparent 46%),
    linear-gradient(145deg, #111827, #05070c);
  color: #fff;
}

.fp-marker-local .local-poi-dot--group,
.local-poi-list-icon.local-poi-dot--group {
  color: #0c3c70;
  background:
    radial-gradient(circle at 28% 22%, rgba(255, 255, 255, .96), transparent 34%),
    linear-gradient(135deg, #e6f0ff, #b9d4ff);
  box-shadow:
    0 0 0 2px rgba(36, 83, 143, .18),
    0 8px 18px rgba(15, 23, 42, .14);
}

.garage-viewer {
  position: fixed;
  inset: 0;
  z-index: 1400;
  overflow: hidden;
  color: #fff;
  background: #04070d;
}

.garage-viewer[hidden] {
  display: none !important;
}

.garage-viewer button {
  touch-action: manipulation;
}

.garage-viewer-shell {
  position: relative;
  width: 100%;
  min-height: 100%;
  height: 100%;
  overflow: hidden;
}

.garage-viewer-top {
  position: absolute;
  top: max(12px, env(safe-area-inset-top));
  right: 12px;
  left: 12px;
  z-index: 8;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 44px;
  align-items: center;
  gap: 10px;
  color: #fff;
  text-shadow: 0 1px 12px rgba(0, 0, 0, .55);
}

.garage-viewer-top.light {
  position: sticky;
  top: 0;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  min-height: calc(56px + env(safe-area-inset-top));
  padding: env(safe-area-inset-top) 12px 0;
  color: #101828;
  background: rgba(255, 255, 255, .94);
  text-shadow: none;
  backdrop-filter: blur(16px);
}

.garage-viewer-top b,
.garage-viewer-top small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.garage-viewer-top b {
  font-size: 14px;
  font-weight: 950;
}

.garage-viewer-top small,
.garage-viewer-top span {
  color: rgba(255, 255, 255, .74);
  font-size: 11px;
  font-weight: 760;
}

.garage-viewer-top.light small,
.garage-viewer-top.light span {
  color: #667085;
}

.garage-viewer-top button,
.garage-viewer-close {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  min-height: 44px;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 999px;
  padding: 0;
  color: inherit;
  background: rgba(11, 18, 32, .38);
  box-shadow: 0 14px 34px rgba(0, 0, 0, .22);
  font-size: 26px;
  line-height: 1;
  backdrop-filter: blur(16px);
}

.garage-viewer-top.light button {
  border-color: rgba(15, 23, 42, .08);
  color: #101828;
  background: rgba(244, 247, 251, .94);
  box-shadow: none;
}

.garage-viewer-shell > .garage-viewer-close {
  position: absolute;
  top: max(12px, env(safe-area-inset-top));
  right: 12px;
  z-index: 12;
}

.garage-story-progress {
  position: absolute;
  top: max(8px, env(safe-area-inset-top));
  right: 12px;
  left: 12px;
  z-index: 9;
  display: grid;
  grid-auto-flow: column;
  gap: 4px;
}

.garage-story-progress span {
  height: 3px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .28);
}

.garage-story-progress span.active {
  background: rgba(255, 255, 255, .92);
}

.garage-story-media,
.garage-reel-media {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 50% 20%, rgba(59, 130, 246, .18), transparent 42%),
    #04070d;
}

.garage-story-media::after,
.garage-reel-media::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(4, 7, 13, .52), transparent 24%, transparent 62%, rgba(4, 7, 13, .78)),
    linear-gradient(90deg, rgba(4, 7, 13, .22), transparent 24%, transparent 76%, rgba(4, 7, 13, .22));
}

.garage-viewer-image,
.garage-viewer-video {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.garage-viewer[data-mode="story"] .garage-viewer-image,
.garage-viewer[data-mode="story"] .garage-viewer-video,
.garage-viewer[data-mode="reel"] .garage-viewer-image,
.garage-viewer[data-mode="reel"] .garage-viewer-video {
  object-fit: cover;
}

.garage-viewer-placeholder,
.garage-viewer-empty {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  gap: 8px;
  width: min(82vw, 360px);
  margin: auto;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 24px;
  padding: 24px;
  color: rgba(255, 255, 255, .86);
  background: rgba(255, 255, 255, .08);
  text-align: center;
  backdrop-filter: blur(18px);
}

.garage-viewer-placeholder span,
.garage-viewer-empty span {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border-radius: 20px;
  color: #fff;
  background: rgba(255, 255, 255, .12);
  font-size: 22px;
  font-weight: 950;
}

.garage-viewer-placeholder b,
.garage-viewer-empty h2 {
  margin: 0;
  font-size: 18px;
  font-weight: 950;
}

.garage-viewer-placeholder small,
.garage-viewer-empty p,
.garage-viewer-empty small {
  margin: 0;
  color: rgba(255, 255, 255, .66);
  font-size: 12px;
  font-weight: 760;
}

.garage-viewer-empty button {
  min-height: 44px;
  border: 0;
  border-radius: 999px;
  padding: 0 18px;
  color: #071426;
  background: #fff;
  font-weight: 920;
}

.garage-viewer-tap-zone {
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 5;
  width: 34%;
  border: 0;
  padding: 0;
  background: transparent;
}

.garage-viewer-tap-zone.left {
  left: 0;
}

.garage-viewer-tap-zone.right {
  right: 0;
}

.garage-story-caption {
  position: absolute;
  right: 14px;
  bottom: max(18px, env(safe-area-inset-bottom));
  left: 14px;
  z-index: 8;
  display: grid;
  gap: 4px;
  color: #fff;
  text-shadow: 0 1px 14px rgba(0, 0, 0, .65);
}

.garage-story-caption b,
.garage-story-caption small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.garage-story-caption b {
  font-size: 16px;
  font-weight: 950;
}

.garage-story-caption small {
  color: rgba(255, 255, 255, .78);
  font-size: 12px;
  font-weight: 760;
}

.garage-viewer-shell-post {
  overflow-y: auto;
  color: #101828;
  background: #f7f9fc;
}

.garage-post-media {
  position: relative;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 44px;
  align-items: center;
  min-height: min(70vh, 680px);
  background: #fff;
}

.garage-post-media > button {
  z-index: 4;
  display: grid;
  place-items: center;
  width: 38px;
  height: 56px;
  min-height: 44px;
  border: 0;
  border-radius: 999px;
  color: #475467;
  background: transparent;
  font-size: 32px;
}

.garage-viewer-image--post,
.garage-post-media .garage-viewer-video,
.garage-post-media .garage-viewer-placeholder {
  grid-column: 2;
  width: 100%;
  height: min(62vh, 620px);
  min-height: 280px;
  border-radius: 0;
  color: #101828;
  background: #eef3f8;
}

.garage-post-media .garage-viewer-placeholder {
  border: 1px solid rgba(15, 23, 42, .08);
  color: #101828;
}

.garage-post-media .garage-viewer-placeholder span {
  color: var(--blue);
  background: rgba(0, 91, 255, .08);
}

.garage-post-media .garage-viewer-placeholder small {
  color: #667085;
}

.garage-viewer-social {
  display: grid;
  gap: 8px;
  padding: 14px 16px max(22px, env(safe-area-inset-bottom));
  background: #fff;
}

.garage-viewer-actions {
  display: grid;
  grid-auto-flow: column;
  justify-content: start;
  gap: 8px;
}

.garage-viewer-actions button,
.garage-reel-actions button {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  min-height: 42px;
  border: 0;
  border-radius: 999px;
  color: inherit;
  background: transparent;
  font-size: 23px;
}

.garage-viewer-actions button.active,
.garage-reel-actions button.active {
  color: #f04438;
}

.garage-viewer-social b {
  font-size: 13px;
  font-weight: 950;
}

.garage-viewer-social p {
  margin: 0;
  color: #1d2939;
  font-size: 14px;
  line-height: 1.35;
}

.garage-viewer-social small {
  color: #667085;
  font-size: 11px;
  font-weight: 720;
}

.garage-viewer-shell-reel {
  color: #fff;
  background: #04070d;
}

.garage-viewer-shell-reel > .garage-viewer-close {
  color: #fff;
}

.garage-reel-actions {
  position: absolute;
  right: 10px;
  bottom: max(112px, calc(env(safe-area-inset-bottom) + 96px));
  z-index: 10;
  display: grid;
  gap: 10px;
}

.garage-reel-actions button {
  width: 48px;
  height: 54px;
  color: #fff;
  background: rgba(0, 0, 0, .22);
  text-shadow: 0 1px 12px rgba(0, 0, 0, .5);
  backdrop-filter: blur(14px);
}

.garage-reel-actions small {
  display: block;
  margin-top: -2px;
  font-size: 10px;
  font-weight: 900;
}

.garage-reel-caption {
  position: absolute;
  right: 76px;
  bottom: max(24px, env(safe-area-inset-bottom));
  left: 16px;
  z-index: 10;
  display: grid;
  gap: 5px;
  text-shadow: 0 1px 16px rgba(0, 0, 0, .72);
}

.garage-reel-caption b {
  font-size: 15px;
  font-weight: 950;
}

.garage-reel-caption p {
  margin: 0;
  font-size: 13px;
  line-height: 1.32;
}

.garage-reel-caption small {
  color: rgba(255, 255, 255, .68);
  font-size: 11px;
  font-weight: 780;
}

.garage-viewer-reel-nav {
  position: absolute;
  top: 50%;
  z-index: 9;
  display: grid;
  place-items: center;
  width: 42px;
  height: 58px;
  min-height: 44px;
  border: 0;
  border-radius: 999px;
  color: rgba(255, 255, 255, .82);
  background: rgba(0, 0, 0, .16);
  font-size: 34px;
  transform: translateY(-50%);
}

.garage-viewer-reel-nav.prev {
  left: 8px;
}

.garage-viewer-reel-nav.next {
  right: 8px;
}

@media (max-width: 479px) {
  .garage-passport-v2 .gallery-media-grid--photos {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 2px;
  }

  .garage-post-media {
    grid-template-columns: 34px minmax(0, 1fr) 34px;
    min-height: 60vh;
  }

  .garage-post-media > button {
    width: 32px;
    font-size: 26px;
  }
}

.fp-comms-topbar-compact h1 {
  font-size: 19px;
}

.fp-comms-topbar-compact em {
  align-self: center;
  padding: 1px 5px;
  font-size: 7.5px;
  opacity: .72;
}

.fp-comms-search-compact {
  margin-top: 0;
}

.fp-comms-search-compact label {
  box-shadow: none;
}

.fp-comms-search-compact button {
  align-self: stretch;
}

body.fp-comms-detail-open .group-chat-header {
  grid-template-columns: 38px 40px minmax(0, 1fr) auto;
  align-items: center;
  min-height: 44px;
  margin: -4px -2px 0;
  padding: 1px 2px 5px;
}

body.fp-comms-detail-open .group-chat-header .fp-comms-avatar {
  overflow: hidden;
  width: 38px;
  height: 38px;
  min-height: 38px;
  border-radius: 14px;
  font-size: 13px;
}

body.fp-comms-detail-open .group-chat-header > button:first-child {
  color: #1d2939;
  background: rgba(255, 255, 255, .68);
}

body.fp-comms-detail-open .group-chat-header > button:last-child {
  min-height: 34px;
  min-width: 44px;
  border-radius: 999px;
}

body.fp-comms-detail-open .group-chat-header b {
  font-size: 15px;
}

body.fp-comms-detail-open .group-chat-header span {
  font-size: 10px;
}

body.fp-comms-detail-open .group-context-card {
  gap: 5px;
  padding: 7px 8px;
}

body.fp-comms-detail-open .group-context-card button {
  min-height: 27px;
}

body.fp-comms-detail-open .group-members-strip {
  margin: -1px 0 0;
  padding-bottom: 1px;
}

body.fp-comms-detail-open .group-members-strip span {
  min-width: 84px;
  padding: 5px 7px;
}

body.fp-comms-detail-open .conversation-message.group-message .fp-comms-attachment {
  min-width: min(206px, 70vw);
}

body.fp-comms-detail-open .conversation-message.group-message .fp-comms-media-preview {
  min-height: 72px;
  max-height: 108px;
}

body.fp-comms-detail-open .conversation-message.group-message .fp-comms-attachment-placeholder {
  min-height: 72px;
  gap: 2px;
  font-size: 17px;
}

body.fp-comms-detail-open .conversation-message.group-message .fp-comms-attachment b {
  font-size: 12px;
}

body.fp-comms-detail-open .conversation-message.group-message .fp-comms-attachment small {
  font-size: 9.5px;
}

body.fp-comms-detail-open .fp-comms-thread-body,
body.fp-comms-detail-open .conversation-messages {
  padding-bottom: calc(env(safe-area-inset-bottom) + 18px);
}

body.fp-comms-detail-open .group-composer input {
  overflow: hidden;
  text-overflow: ellipsis;
}

.group-detail-tabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 4px;
  border: 1px solid rgba(15, 23, 42, .07);
  border-radius: 999px;
  padding: 3px;
  background: rgba(255, 255, 255, .72);
  box-shadow: 0 8px 20px rgba(15, 23, 42, .045);
}

.group-detail-tabs button {
  min-height: 34px;
  border: 0;
  border-radius: 999px;
  color: #667085;
  background: transparent;
  font-size: 11px;
  font-weight: 900;
}

.group-detail-tabs button.active {
  color: #fff;
  background: #111827;
  box-shadow: 0 7px 16px rgba(15, 23, 42, .16);
}

.group-detail-content {
  display: grid;
  min-height: 0;
  gap: 8px;
}

.group-tab-profile .group-detail-content,
.group-tab-media .group-detail-content,
.group-tab-trips .group-detail-content {
  overflow: auto;
  padding-bottom: calc(env(safe-area-inset-bottom) + 18px);
}

.group-chat-title {
  display: grid;
  min-width: 0;
  gap: 1px;
}

.group-chat-title small {
  overflow: hidden;
  color: #98a2b3;
  font-size: 9px;
  font-weight: 850;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.group-profile-inline,
.group-media-tab,
.group-trips-tab {
  display: grid;
  gap: 9px;
}

.group-profile-mini-hero {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  border: 1px solid rgba(15, 23, 42, .07);
  border-radius: 18px;
  padding: 10px;
  background:
    radial-gradient(circle at 14% 10%, rgba(0, 113, 227, .14), transparent 38%),
    rgba(255, 255, 255, .86);
  box-shadow: 0 10px 24px rgba(15, 23, 42, .05);
}

.group-profile-mini-hero .group-profile-avatar {
  width: 56px;
  height: 56px;
  border-color: rgba(0, 113, 227, .22);
  border-radius: 19px;
  color: #075ec5;
  background: rgba(0, 113, 227, .08);
  font-size: 16px;
  box-shadow: none;
}

.group-profile-mini-hero div {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.group-profile-mini-hero b {
  overflow: hidden;
  color: #101828;
  font-size: 18px;
  font-weight: 950;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.group-profile-mini-hero small {
  overflow: hidden;
  color: #667085;
  font-size: 11px;
  font-weight: 820;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.group-profile-inline-stats {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 4px;
}

.group-profile-inline-stats span {
  border-radius: 12px;
  padding: 7px 4px;
}

.group-profile-inline-actions {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 5px;
}

.group-profile-inline-actions button {
  min-height: 34px;
  padding: 0 8px;
  font-size: 10.5px;
}

.group-profile-inline-game {
  gap: 7px;
  border-radius: 15px;
  padding: 9px;
}

.group-theme-row {
  display: grid;
  gap: 7px;
  border: 1px solid rgba(15, 23, 42, .07);
  border-radius: 16px;
  padding: 9px;
  background: rgba(255, 255, 255, .84);
}

.group-theme-row > div:first-child {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.group-theme-row b {
  color: #101828;
  font-size: 13px;
  font-weight: 950;
}

.group-theme-row span {
  overflow: hidden;
  color: #667085;
  font-size: 10px;
  font-weight: 820;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.group-theme-row > div:last-child {
  display: flex;
  gap: 5px;
  overflow-x: auto;
  padding-bottom: 1px;
}

.group-theme-row button {
  flex: 0 0 auto;
  min-height: 30px;
  border: 1px solid rgba(15, 23, 42, .08);
  border-radius: 999px;
  padding: 0 9px;
  color: #344054;
  background: #fff;
  font-size: 10px;
  font-weight: 900;
}

.group-theme-row button.active {
  color: #fff;
  border-color: #111827;
  background: #111827;
}

.group-tab-section-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 10px;
}

.group-tab-section-head div {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.group-tab-section-head b {
  color: #101828;
  font-size: 15px;
  font-weight: 950;
}

.group-tab-section-head span {
  overflow: hidden;
  color: #667085;
  font-size: 10px;
  font-weight: 820;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.group-tab-section-head button {
  flex: 0 0 auto;
  min-height: 34px;
  border: 1px solid rgba(0, 113, 227, .12);
  border-radius: 999px;
  padding: 0 10px;
  color: var(--blue);
  background: rgba(0, 113, 227, .07);
  font-size: 11px;
  font-weight: 900;
}

.group-media-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2px;
  width: 100%;
}

.group-media-tile {
  position: relative;
  display: block;
  min-width: 0;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border: 0;
  border-radius: 5px;
  background: #eef3f8;
}

.group-media-tile img,
.group-media-tile video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.group-media-tile > span {
  display: grid;
  width: 100%;
  height: 100%;
  place-items: center;
  gap: 3px;
  padding: 6px;
  color: #667085;
  text-align: center;
  background: linear-gradient(135deg, #eef3f8, #f8fbff);
}

.group-media-tile > span b {
  font-size: 18px;
}

.group-media-tile > span small {
  overflow: hidden;
  max-width: 100%;
  font-size: 9px;
  font-weight: 850;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.group-media-tile em {
  position: absolute;
  right: 5px;
  bottom: 5px;
  border-radius: 999px;
  padding: 3px 5px;
  color: #fff;
  background: rgba(15, 23, 42, .58);
  font-size: 8px;
  font-style: normal;
  font-weight: 900;
  line-height: 1;
}

.group-media-empty {
  min-height: 96px;
}

.group-trip-list {
  display: grid;
  gap: 7px;
}

.group-trip-list article {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 7px;
  align-items: start;
  border: 1px solid rgba(15, 23, 42, .07);
  border-radius: 16px;
  padding: 10px;
  background: rgba(255, 255, 255, .86);
  box-shadow: 0 8px 20px rgba(15, 23, 42, .045);
}

.group-trip-list article div {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.group-trip-list article b {
  overflow: hidden;
  color: #101828;
  font-size: 14px;
  font-weight: 950;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.group-trip-list article span,
.group-trip-list article small {
  color: #667085;
  font-size: 10px;
  font-weight: 820;
}

.group-trip-list article small {
  justify-self: end;
  border-radius: 999px;
  padding: 4px 7px;
  color: #075ec5;
  background: rgba(0, 113, 227, .08);
}

.group-trip-list nav {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 5px;
}

.group-trip-list nav button {
  min-height: 32px;
  border: 1px solid rgba(15, 23, 42, .08);
  border-radius: 999px;
  color: #344054;
  background: #fff;
  font-size: 10px;
  font-weight: 900;
}

[data-active-group-theme="road_night"] {
  background:
    radial-gradient(circle at 80% 0%, rgba(56, 189, 248, .18), transparent 30%),
    linear-gradient(180deg, #0f172a, #111827);
}

[data-active-group-theme="soft_pink"] {
  background:
    radial-gradient(circle at 18% 0%, rgba(244, 114, 182, .18), transparent 32%),
    linear-gradient(180deg, #fff7fb, #fff);
}

[data-active-group-theme="garage_blur"] {
  background:
    radial-gradient(circle at 12% 0%, rgba(0, 113, 227, .12), transparent 34%),
    linear-gradient(180deg, #f8fbff, #fff);
}

[data-active-group-theme="dark_club"] {
  background:
    radial-gradient(circle at 20% 0%, rgba(244, 63, 94, .22), transparent 32%),
    linear-gradient(180deg, #09090b, #18181b);
}

[data-active-group-theme="road_night"] .group-detail-tabs,
[data-active-group-theme="dark_club"] .group-detail-tabs,
[data-active-group-theme="road_night"] .group-context-card,
[data-active-group-theme="dark_club"] .group-context-card,
[data-active-group-theme="road_night"] .group-profile-mini-hero,
[data-active-group-theme="dark_club"] .group-profile-mini-hero,
[data-active-group-theme="road_night"] .group-theme-row,
[data-active-group-theme="dark_club"] .group-theme-row,
[data-active-group-theme="road_night"] .group-trip-list article,
[data-active-group-theme="dark_club"] .group-trip-list article {
  border-color: rgba(255, 255, 255, .09);
  background: rgba(255, 255, 255, .08);
}

.group-profile-sheet {
  gap: 10px;
}

.group-profile-hero {
  min-height: 156px;
  border-radius: 20px;
  padding: 14px;
}

.group-profile-close {
  width: 36px;
  height: 36px;
  font-size: 20px;
}

.group-profile-identity {
  grid-template-columns: 58px minmax(0, 1fr);
  gap: 10px;
  padding-right: 38px;
}

.group-profile-avatar {
  width: 58px;
  height: 58px;
  border-radius: 20px;
  font-size: 17px;
}

.group-profile-identity h2 {
  font-size: 24px;
}

.group-profile-hero p {
  line-height: 1.32;
}

.group-profile-stats {
  gap: 5px;
}

.group-profile-stats span {
  border-radius: 14px;
  padding: 8px 6px;
}

.group-profile-actions {
  gap: 6px;
}

.group-profile-actions button {
  min-height: 38px;
}

.group-profile-game {
  gap: 7px;
  border-radius: 15px;
  padding: 9px;
}

.group-profile-media-grid {
  gap: 6px;
}

.group-profile-media article {
  gap: 6px;
  border-radius: 15px;
  padding: 8px;
}

.group-profile-activity article {
  grid-template-columns: minmax(0, 94px) minmax(0, 1fr) auto;
  padding: 8px;
}

body.fp-comms-detail-open .group-chat-view {
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  gap: 5px;
  padding-bottom: 0;
}

body.fp-comms-detail-open .group-tab-chat .group-detail-content {
  grid-template-rows: auto auto minmax(0, 1fr) auto auto;
  overflow: hidden;
}

body.fp-comms-detail-open .group-tab-profile .group-detail-content,
body.fp-comms-detail-open .group-tab-media .group-detail-content,
body.fp-comms-detail-open .group-tab-trips .group-detail-content {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

body.fp-comms-detail-open .group-chat-header {
  grid-template-columns: 34px 36px minmax(0, 1fr) auto;
  min-height: 42px;
  margin: -4px -1px 0;
  padding: 0 1px 4px;
  border-bottom: 0;
  background: linear-gradient(180deg, rgba(248, 251, 255, .92), rgba(248, 251, 255, .56) 72%, rgba(248, 251, 255, 0));
  box-shadow: none;
}

body.fp-comms-detail-open .group-chat-header > button,
body.fp-comms-detail-open .group-chat-header .fp-comms-avatar {
  min-height: 34px;
  width: 34px;
  height: 34px;
  border-radius: 12px;
}

body.fp-comms-detail-open .group-chat-header .fp-comms-avatar {
  display: grid;
  place-items: center;
  overflow: visible;
  border: 1px solid rgba(16, 185, 129, .24);
  font-size: 12px;
  line-height: 1;
}

body.fp-comms-detail-open .group-chat-header > button:first-child {
  color: #1d2939;
  background: rgba(255, 255, 255, .58);
  font-size: 22px;
}

body.fp-comms-detail-open .group-chat-header > button:last-child {
  min-height: 30px;
  min-width: 38px;
  padding: 0 8px;
  color: #475467;
  background: rgba(255, 255, 255, .54);
  font-size: 10px;
}

body.fp-comms-detail-open .group-chat-header b {
  color: #101828;
  font-size: 15.5px;
  letter-spacing: 0;
}

body.fp-comms-detail-open .group-chat-header span {
  color: #475467;
  font-size: 10px;
}

body.fp-comms-detail-open .group-chat-title small {
  color: #7a8699;
  font-size: 9px;
}

.group-detail-tabs {
  gap: 2px;
  border-radius: 14px;
  padding: 2px;
  background: rgba(255, 255, 255, .58);
  box-shadow: none;
}

.group-detail-tabs button {
  min-height: 28px;
  font-size: 10px;
}

.group-detail-tabs button.active {
  color: #fff;
  background: linear-gradient(135deg, #0b63ce, #0f172a);
  box-shadow: 0 4px 10px rgba(11, 99, 206, .18);
}

body.fp-comms-detail-open .group-context-card {
  gap: 4px;
  border-color: rgba(15, 23, 42, .055);
  border-radius: 12px;
  padding: 6px 7px;
  background:
    radial-gradient(circle at 96% -30%, rgba(16, 185, 129, .08), transparent 30%),
    rgba(255, 255, 255, .58);
  box-shadow: none;
}

body.fp-comms-detail-open .group-context-card span {
  padding: 1px 6px;
  font-size: 8px;
}

body.fp-comms-detail-open .group-context-card b {
  font-size: 11px;
  line-height: 1.16;
}

body.fp-comms-detail-open .group-context-card small {
  font-size: 9px;
}

body.fp-comms-detail-open .group-context-card button {
  min-height: 25px;
  padding: 0 7px;
  border-color: rgba(15, 23, 42, .08);
  color: #344054;
  background: rgba(255, 255, 255, .72);
  font-size: 9px;
}

body.fp-comms-detail-open .group-members-strip {
  gap: 4px;
  margin: -2px 0 0;
}

body.fp-comms-detail-open .group-members-strip span {
  min-width: 76px;
  max-width: 112px;
  border-radius: 12px;
  padding: 5px 7px;
  background: rgba(255, 255, 255, .66);
}

body.fp-comms-detail-open .group-members-strip b {
  overflow: hidden;
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.fp-comms-detail-open .group-members-strip small {
  font-size: 8.5px;
}

.group-chat-view[data-chat-theme] .conversation-messages,
.private-conversation-view[data-chat-theme] .conversation-messages {
  border-color: rgba(15, 23, 42, .045);
  border-radius: 18px;
  padding: 9px 7px;
  background:
    radial-gradient(circle at 16% 0%, rgba(0, 113, 227, .07), transparent 34%),
    linear-gradient(180deg, rgba(248, 251, 255, .92), rgba(255, 255, 255, .82));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .56), 0 8px 20px rgba(15, 23, 42, .035);
}

.group-chat-view[data-chat-theme="dark_night"] .conversation-messages,
.private-conversation-view[data-chat-theme="dark_night"] .conversation-messages,
.group-chat-view[data-chat-theme="roadtalk_night"] .conversation-messages,
.private-conversation-view[data-chat-theme="roadtalk_night"] .conversation-messages {
  border-color: rgba(148, 163, 184, .14);
  background:
    radial-gradient(circle at 18% 0, rgba(59, 130, 246, .14), transparent 32%),
    linear-gradient(145deg, rgba(20, 30, 46, .94), rgba(34, 45, 62, .88));
}

body.fp-comms-detail-open .conversation-message.group-message {
  gap: 3px;
  max-width: min(84%, 330px);
  border-color: rgba(15, 23, 42, .055);
  border-radius: 15px;
  padding: 8px 10px;
  box-shadow: 0 5px 14px rgba(15, 23, 42, .035);
}

body.fp-comms-detail-open .conversation-message.group-message.theirs {
  color: #1d2939;
  background: rgba(255, 255, 255, .88);
}

body.fp-comms-detail-open .conversation-message.group-message.mine {
  border-color: rgba(0, 113, 227, .20);
  background: linear-gradient(135deg, #0b63ce, #0751a8);
}

body.fp-comms-detail-open .conversation-message.group-message.has-attachment {
  max-width: min(86%, 330px);
  padding: 6px;
}

body.fp-comms-detail-open .conversation-message.group-message .fp-comms-attachment {
  min-width: min(190px, 64vw);
  max-width: min(300px, 74vw);
  gap: 4px;
  border-radius: 12px;
  padding: 6px;
  box-shadow: none;
}

body.fp-comms-detail-open .conversation-message.group-message .fp-comms-media-preview {
  min-height: 58px;
  max-height: 154px;
  aspect-ratio: 16 / 9;
  border-radius: 9px;
}

body.fp-comms-detail-open .conversation-message.group-message .fp-comms-attachment-placeholder {
  min-height: 58px;
  padding: 7px;
  gap: 1px;
  font-size: 15px;
}

body.fp-comms-detail-open .conversation-message.group-message .fp-comms-attachment-placeholder small {
  font-size: 9px;
}

body.fp-comms-detail-open .conversation-message.group-message .fp-comms-attachment-placeholder em {
  font-size: 8px;
}

body.fp-comms-detail-open .conversation-message.group-message .fp-comms-attachment small {
  font-size: 8.5px;
}

body.fp-comms-detail-open .group-composer {
  grid-template-columns: 32px minmax(120px, 1fr) 32px 32px 32px 34px;
  gap: 3px;
  border-radius: 16px;
  padding: 4px;
  background: rgba(255, 255, 255, .90);
}

body.fp-comms-detail-open .group-composer input,
body.fp-comms-detail-open .group-composer button {
  min-height: 36px;
  height: 36px;
  border-radius: 12px;
}

body.fp-comms-detail-open .group-composer input {
  padding: 0 10px;
  font-size: 16px;
}

body.fp-comms-detail-open .group-composer button {
  width: 32px;
  font-size: 13px;
}

body.fp-comms-detail-open .group-composer button[type="submit"] {
  width: 34px;
}

.group-profile-inline {
  gap: 7px;
}

.group-profile-mini-hero {
  grid-template-columns: 48px minmax(0, 1fr);
  border-radius: 15px;
  padding: 8px;
  box-shadow: none;
}

.group-profile-mini-hero .group-profile-avatar {
  width: 48px;
  height: 48px;
  border-radius: 16px;
}

.group-profile-mini-hero b {
  font-size: 16px;
}

.group-profile-inline-stats {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.group-profile-inline-stats span {
  padding: 6px 3px;
  box-shadow: none;
}

.group-profile-inline-actions button,
.group-theme-row button,
.group-trip-list nav button {
  min-height: 30px;
}

.group-profile-inline-game,
.group-theme-row {
  border-radius: 14px;
  padding: 8px;
  box-shadow: none;
}

.group-media-grid {
  gap: 3px;
}

.group-media-tile {
  border-radius: 4px;
}

.group-media-tile em {
  right: 4px;
  bottom: 4px;
  background: rgba(15, 23, 42, .50);
}

.group-tab-section-head {
  align-items: center;
}

.group-tab-section-head button {
  min-height: 30px;
  padding: 0 9px;
}

.group-trip-list {
  gap: 6px;
}

.group-trip-list article {
  border-radius: 14px;
  padding: 8px;
  box-shadow: none;
}

.group-trip-list article em {
  color: #98a2b3;
  font-size: 9px;
  font-style: normal;
  font-weight: 850;
}

@media (max-width: 820px) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
  textarea,
  select {
    font-size: 16px !important;
  }

  input::placeholder,
  textarea::placeholder {
    font-size: 1em;
    transform: none;
  }
}

/* RoadTalk single-state reset: one visual hierarchy, one CTA, LIVE circle as indicator. */
.roadtalk-radio-shell {
  gap: 8px;
}

.roadtalk-channel-strip {
  display: grid;
  gap: 8px;
  border: 0;
  border-radius: 0;
  padding: 0;
  background: transparent;
  box-shadow: none;
}

.roadtalk-channel-strip-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 10px;
}

.roadtalk-channel-strip-head b {
  display: block;
  color: var(--ink);
  font-size: 18px;
  line-height: 1.12;
  font-weight: 1000;
}

.roadtalk-channel-strip-head small {
  display: block;
  margin-top: 2px;
  color: #64748b;
  font-size: 12px;
  line-height: 1.2;
  font-weight: 850;
}

.roadtalk-live-audio-panel {
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  border: 0;
  border-top: 1px solid rgba(15, 23, 42, .06);
  border-radius: 0;
  padding: 9px 0 6px;
  background: transparent;
  box-shadow: none;
}

.roadtalk-live-audio-panel > .roadtalk-live-status-orb {
  display: grid;
  place-items: center;
  gap: 3px;
  width: 82px;
  height: 82px;
  border-radius: 999px;
  color: #fff;
  background:
    radial-gradient(circle at 35% 22%, rgba(255, 255, 255, .24), transparent 34%),
    linear-gradient(135deg, #061526, #0071e3 58%, #10b981);
  box-shadow: 0 12px 28px rgba(0, 113, 227, .22);
  pointer-events: none;
  user-select: none;
}

.roadtalk-live-audio-panel > .roadtalk-live-status-orb span,
.roadtalk-live-audio-panel > .roadtalk-live-status-orb b {
  color: #fff;
}

.roadtalk-live-audio-panel > .roadtalk-live-status-orb span {
  font-size: 15px;
  font-weight: 1000;
}

.roadtalk-live-audio-panel > .roadtalk-live-status-orb b {
  max-width: 68px;
  font-size: 11px;
  line-height: 1.05;
  text-align: center;
}

.roadtalk-live-audio-panel.ui-off > .roadtalk-live-status-orb {
  background: linear-gradient(135deg, #334155, #64748b);
  box-shadow: 0 8px 18px rgba(15, 23, 42, .14);
}

.roadtalk-live-audio-panel.ui-transmitting > .roadtalk-live-status-orb {
  background: linear-gradient(135deg, #ef4444, #dc2626);
  box-shadow: 0 14px 32px rgba(239, 68, 68, .24);
  animation: fpRoadTalkLivePulse 1s ease-in-out infinite;
}

.roadtalk-live-audio-panel.ui-receiving > .roadtalk-live-status-orb,
.roadtalk-live-audio-panel.ui-connecting > .roadtalk-live-status-orb {
  background: linear-gradient(135deg, #07111e, #0b84ff);
}

.roadtalk-radio-controls button:only-child {
  grid-column: 1 / -1;
}

.rt-standalone-cb {
  grid-template-columns: auto minmax(0, 1fr);
  place-items: center stretch;
  gap: 14px;
  border: 1px solid rgba(255, 255, 255, .10);
  border-radius: 24px;
  padding: 14px;
  background: rgba(255, 255, 255, .06);
}

.rt-standalone-live-indicator {
  display: grid;
  place-items: center;
  width: 92px;
  height: 92px;
  border-radius: 999px;
  color: #fff;
  background:
    radial-gradient(circle at 34% 24%, rgba(255, 255, 255, .24), transparent 34%),
    linear-gradient(135deg, #07111e, #0071e3 58%, #34c759);
  box-shadow: 0 18px 42px rgba(0, 113, 227, .28);
  pointer-events: none;
}

.rt-standalone-live-indicator span,
.rt-standalone-live-indicator b {
  display: block;
  color: #fff;
  text-align: center;
}

.rt-standalone-live-indicator span {
  font-size: 18px;
  font-weight: 1000;
}

.rt-standalone-live-indicator b {
  max-width: 74px;
  font-size: 12px;
  line-height: 1.05;
}

.rt-standalone-cb > div:last-child {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.rt-standalone-cb > div:last-child b {
  color: #f8fbff;
  font-size: 19px;
  line-height: 1.08;
  font-weight: 1000;
}

.rt-standalone-cb > div:last-child small {
  color: rgba(248, 251, 255, .70);
  font-size: 12px;
  font-weight: 850;
}

.rt-standalone-actions button:only-child,
.rt-standalone-actions button.primary:first-child:nth-last-child(2) {
  grid-column: auto;
}

/* RoadTalk v2 lab: isolated radio diagnostics without the FindPlate map shell. */
html.roadtalk-v2-active-root {
  height: auto;
  min-height: 100%;
  overflow: auto;
  overscroll-behavior-y: contain;
  -webkit-overflow-scrolling: touch;
}

body.roadtalk-v2-active {
  min-height: 100dvh;
  height: auto;
  overflow: auto;
  overscroll-behavior-y: contain;
  background: #070a0f;
  color: #eef7f3;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
}

.roadtalk-v2-view {
  min-height: 100dvh;
  height: auto;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
  touch-action: pan-y;
  background:
    radial-gradient(circle at 12% 0%, rgba(45, 212, 191, .18), transparent 30%),
    radial-gradient(circle at 100% 12%, rgba(251, 191, 36, .12), transparent 28%),
    linear-gradient(180deg, #070a0f 0%, #0b1117 52%, #080b10 100%);
  color: #eef7f3;
  padding: calc(env(safe-area-inset-top, 0px) + 10px) 14px calc(120px + env(safe-area-inset-bottom, 0px));
}

.roadtalk-v2-root {
  display: grid;
  gap: 10px;
  width: min(760px, 100%);
  margin: 0 auto;
  padding-top: 116px;
}

.roadtalk-v2-active #app,
.roadtalk-v2-active #roadtalk-standalone-view,
.roadtalk-v2-active .bottom-nav,
.roadtalk-v2-active .fp-bottom-nav {
  pointer-events: none;
}

.roadtalk-v2-sticky {
  position: fixed;
  top: max(6px, env(safe-area-inset-top, 0px));
  left: max(10px, calc((100vw - 760px) / 2));
  right: max(10px, calc((100vw - 760px) / 2));
  z-index: 20;
  display: grid;
  gap: 8px;
  border: 1px solid rgba(94, 234, 212, .24);
  border-radius: 8px;
  padding: 10px;
  background: rgba(6, 10, 15, .92);
  box-shadow: 0 12px 28px rgba(0, 0, 0, .30);
  backdrop-filter: blur(18px);
}

.roadtalk-v2-sticky > div:first-child {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
}

.roadtalk-v2-sticky b {
  color: #ffffff;
  font-size: 13px;
  line-height: 1.1;
  font-weight: 1000;
}

.roadtalk-v2-sticky span {
  color: rgba(238, 247, 243, .72);
  font-size: 12px;
  font-weight: 850;
}

.roadtalk-v2-sticky dl {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 5px;
  margin: 0;
}

.roadtalk-v2-sticky dl > div {
  min-width: 0;
  border: 1px solid rgba(238, 247, 243, .10);
  border-radius: 6px;
  padding: 5px;
  background: rgba(238, 247, 243, .06);
}

.roadtalk-v2-sticky dl > div.is-ok {
  border-color: rgba(52, 211, 153, .32);
  background: rgba(20, 184, 166, .12);
}

.roadtalk-v2-sticky dl > div.is-error {
  border-color: rgba(248, 113, 113, .38);
  background: rgba(127, 29, 29, .24);
}

.roadtalk-v2-sticky dt,
.roadtalk-v2-sticky dd {
  margin: 0;
}

.roadtalk-v2-sticky dt {
  color: rgba(238, 247, 243, .58);
  font-size: 9px;
  font-weight: 950;
  text-transform: uppercase;
}

.roadtalk-v2-sticky dd {
  overflow: hidden;
  color: #f8fafc;
  font-size: 10px;
  line-height: 1.15;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.roadtalk-v2-header {
  display: grid;
  gap: 4px;
  padding: 4px 2px 8px;
}

.roadtalk-v2-header p {
  margin: 0;
  color: #5eead4;
  font-size: 11px;
  font-weight: 950;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.roadtalk-v2-header h1 {
  margin: 0;
  color: #ffffff;
  font-size: 28px;
  line-height: 1;
  font-weight: 1000;
}

.roadtalk-v2-header small {
  color: rgba(238, 247, 243, .72);
  font-size: 13px;
  line-height: 1.35;
  font-weight: 720;
}

.roadtalk-v2-auth-alert {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  border: 1px solid rgba(248, 113, 113, .42);
  border-radius: 8px;
  padding: 12px;
  background: linear-gradient(135deg, rgba(127, 29, 29, .42), rgba(17, 24, 39, .86));
  box-shadow: 0 14px 34px rgba(127, 29, 29, .22);
}

.roadtalk-v2-auth-alert b {
  display: block;
  color: #ffffff;
  font-size: 16px;
  line-height: 1.12;
  font-weight: 1000;
}

.roadtalk-v2-auth-alert span {
  display: block;
  margin-top: 3px;
  color: rgba(254, 226, 226, .86);
  font-size: 12px;
  line-height: 1.3;
  font-weight: 800;
}

.roadtalk-v2-auth-alert button {
  min-height: 38px;
  border: 0;
  border-radius: 8px;
  padding: 0 12px;
  background: #ef4444;
  color: #fff;
  font-size: 12px;
  font-weight: 950;
}

.roadtalk-v2-auth-alert.roadtalk-v2-warning-alert {
  border-color: rgba(245, 158, 11, .5);
  background: linear-gradient(135deg, rgba(120, 53, 15, .46), rgba(17, 24, 39, .86));
  box-shadow: 0 14px 34px rgba(120, 53, 15, .18);
}

.roadtalk-v2-auth-alert.roadtalk-v2-warning-alert span {
  color: rgba(254, 243, 199, .88);
}

.roadtalk-v2-panel {
  display: grid;
  gap: 9px;
  border: 1px solid rgba(238, 247, 243, .12);
  border-radius: 8px;
  padding: 12px;
  background: rgba(8, 13, 19, .78);
  box-shadow: 0 14px 34px rgba(0, 0, 0, .24);
  backdrop-filter: blur(14px);
}

.roadtalk-v2-steps > div {
  display: grid;
  gap: 6px;
}

.roadtalk-v2-step {
  display: grid;
  grid-template-columns: 70px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  border: 1px solid rgba(238, 247, 243, .10);
  border-radius: 8px;
  padding: 7px 8px;
  background: rgba(238, 247, 243, .055);
}

.roadtalk-v2-step span {
  display: inline-flex;
  min-height: 22px;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  padding: 0 6px;
  color: #cbd5e1;
  background: rgba(148, 163, 184, .14);
  font-size: 10px;
  font-weight: 950;
}

.roadtalk-v2-step b {
  min-width: 0;
  color: #f8fafc;
  font-size: 12px;
  line-height: 1.2;
  font-weight: 900;
}

.roadtalk-v2-step.is-ok span {
  color: #a7f3d0;
  background: rgba(16, 185, 129, .18);
}

.roadtalk-v2-step.is-error span {
  color: #fecaca;
  background: rgba(239, 68, 68, .22);
}

.roadtalk-v2-audio-doctor {
  border-color: rgba(248, 113, 113, .24);
}

.roadtalk-v2-audio-doctor.is-ready {
  border-color: rgba(52, 211, 153, .36);
  background: rgba(8, 28, 24, .78);
}

.roadtalk-v2-audio-doctor-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.roadtalk-v2-audio-doctor-head h2 {
  min-width: 0;
}

.roadtalk-v2-audio-doctor-head strong {
  display: inline-flex;
  min-height: 28px;
  align-items: center;
  border: 1px solid rgba(248, 113, 113, .35);
  border-radius: 7px;
  padding: 0 9px;
  color: #fecaca;
  background: rgba(127, 29, 29, .26);
  font-size: 11px;
  font-weight: 1000;
  white-space: nowrap;
}

.roadtalk-v2-audio-doctor.is-ready .roadtalk-v2-audio-doctor-head strong {
  border-color: rgba(52, 211, 153, .42);
  color: #a7f3d0;
  background: rgba(16, 185, 129, .16);
}

.roadtalk-v2-audio-events {
  display: grid;
  gap: 5px;
  max-height: 210px;
  margin: 0;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  padding: 0;
  list-style: none;
}

.roadtalk-v2-audio-events li {
  display: grid;
  gap: 2px;
  border: 1px solid rgba(238, 247, 243, .10);
  border-radius: 7px;
  padding: 7px 8px;
  background: rgba(238, 247, 243, .055);
}

.roadtalk-v2-audio-events b {
  color: #f8fafc;
  font-size: 12px;
  line-height: 1.12;
  font-weight: 950;
}

.roadtalk-v2-audio-events span,
.roadtalk-v2-audio-events small {
  overflow-wrap: anywhere;
  color: rgba(238, 247, 243, .68);
  font-size: 10px;
  line-height: 1.25;
  font-weight: 780;
}

.roadtalk-v2-audio-events small {
  color: #fecaca;
}

.roadtalk-v2-panel h2 {
  margin: 0;
  color: #ffffff;
  font-size: 14px;
  line-height: 1.15;
  font-weight: 950;
}

.roadtalk-v2-panel dl {
  display: grid;
  gap: 6px;
  margin: 0;
}

.roadtalk-v2-panel dl > div {
  display: grid;
  grid-template-columns: minmax(92px, .68fr) minmax(0, 1fr);
  align-items: center;
  gap: 8px;
}

.roadtalk-v2-panel dt {
  color: rgba(238, 247, 243, .62);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.roadtalk-v2-panel dd {
  min-width: 0;
  margin: 0;
}

.roadtalk-v2-badge {
  display: inline-flex;
  max-width: 100%;
  min-height: 26px;
  align-items: center;
  border: 1px solid rgba(248, 250, 252, .12);
  border-radius: 6px;
  padding: 4px 7px;
  overflow-wrap: anywhere;
  background: rgba(248, 250, 252, .07);
  color: #f8fafc;
  font-size: 12px;
  line-height: 1.2;
  font-weight: 850;
}

.roadtalk-v2-badge.is-ok {
  border-color: rgba(52, 211, 153, .36);
  background: rgba(20, 184, 166, .14);
  color: #a7f3d0;
}

.roadtalk-v2-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.roadtalk-v2-actions button {
  min-height: 34px;
  border: 1px solid rgba(238, 247, 243, .14);
  border-radius: 8px;
  padding: 0 11px;
  background: rgba(238, 247, 243, .08);
  color: #f8fafc;
  font-size: 12px;
  font-weight: 900;
}

.roadtalk-v2-actions .roadtalk-v2-link-button {
  display: inline-flex;
  min-height: 34px;
  align-items: center;
  border: 1px solid rgba(238, 247, 243, .14);
  border-radius: 8px;
  padding: 0 11px;
  background: rgba(238, 247, 243, .08);
  color: #f8fafc;
  font-size: 12px;
  font-weight: 900;
  text-decoration: none;
}

.roadtalk-v2-actions .roadtalk-v2-link-button:hover {
  border-color: rgba(94, 234, 212, .52);
  background: rgba(20, 184, 166, .18);
  color: #ccfbf1;
}

.roadtalk-v2-actions button.active,
.roadtalk-v2-actions button:not(:disabled):hover {
  border-color: rgba(94, 234, 212, .52);
  background: rgba(20, 184, 166, .18);
  color: #ccfbf1;
}

.roadtalk-v2-actions button:disabled {
  opacity: .45;
}

.roadtalk-v2-actions span {
  display: block;
  flex-basis: 100%;
  color: rgba(238, 247, 243, .64);
  font-size: 12px;
  line-height: 1.35;
  font-weight: 750;
}

.roadtalk-v2-snapshot pre {
  max-height: 260px;
  margin: 0;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: 8px;
  padding: 10px;
  background: rgba(0, 0, 0, .34);
  color: #d9fff7;
  font-size: 10px;
  line-height: 1.45;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.roadtalk-v2-snapshot-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.roadtalk-v2-snapshot-head h2 {
  min-width: max-content;
}

.roadtalk-v2-snapshot-head div {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}

.roadtalk-v2-snapshot-head button {
  min-height: 30px;
  border: 1px solid rgba(238, 247, 243, .14);
  border-radius: 8px;
  padding: 0 9px;
  background: rgba(238, 247, 243, .08);
  color: #f8fafc;
  font-size: 11px;
  font-weight: 900;
}

/* FindPlate Debug Center: plain scrollable DEV diagnostics route. */
html.debug-center-active-root,
body.debug-center-active {
  height: auto;
  min-height: 100%;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

body.debug-center-active {
  min-height: 100dvh;
  background: #090b10;
  color: #eef2ff;
}

.debug-center-view {
  min-height: 100dvh;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  padding: calc(env(safe-area-inset-top, 0px) + 12px) 12px calc(120px + env(safe-area-inset-bottom, 0px));
  background:
    radial-gradient(circle at 8% 0%, rgba(45, 212, 191, .16), transparent 32%),
    radial-gradient(circle at 100% 10%, rgba(251, 191, 36, .12), transparent 30%),
    linear-gradient(180deg, #090b10 0%, #111827 56%, #070a0f 100%);
}

.debug-center-root {
  width: min(980px, 100%);
  margin: 0 auto;
}

.debug-center-shell {
  display: grid;
  gap: 10px;
}

.debug-center-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  border: 1px solid rgba(148, 163, 184, .18);
  border-radius: 8px;
  padding: 14px;
  background: rgba(10, 15, 24, .82);
  box-shadow: 0 16px 34px rgba(0, 0, 0, .26);
}

.debug-center-header p,
.debug-center-header h1,
.debug-center-header span {
  margin: 0;
}

.debug-center-header p {
  color: #5eead4;
  font-size: 11px;
  font-weight: 950;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.debug-center-header h1 {
  color: #fff;
  font-size: 26px;
  line-height: 1;
  font-weight: 1000;
}

.debug-center-header span {
  display: block;
  margin-top: 5px;
  color: rgba(226, 232, 240, .7);
  font-size: 12px;
  font-weight: 800;
}

.debug-center-header-actions,
.debug-tabs,
.debug-filters,
.debug-export-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.debug-center-header-actions a,
.debug-center-header-actions button,
.debug-tabs button,
.debug-export-actions button {
  min-height: 34px;
  border: 1px solid rgba(226, 232, 240, .14);
  border-radius: 8px;
  padding: 0 11px;
  background: rgba(226, 232, 240, .08);
  color: #f8fafc;
  font-size: 12px;
  font-weight: 900;
  text-decoration: none;
}

.debug-tabs button.active,
.debug-center-header-actions a:hover,
.debug-center-header-actions button:hover,
.debug-export-actions button:hover {
  border-color: rgba(94, 234, 212, .48);
  background: rgba(20, 184, 166, .18);
  color: #ccfbf1;
}

.debug-filters {
  border: 1px solid rgba(148, 163, 184, .14);
  border-radius: 8px;
  padding: 10px;
  background: rgba(15, 23, 42, .72);
}

.debug-filters label {
  display: grid;
  gap: 4px;
  min-width: 150px;
  color: rgba(226, 232, 240, .65);
  font-size: 10px;
  font-weight: 950;
  text-transform: uppercase;
}

.debug-filters select,
.debug-filters input {
  min-height: 36px;
  border: 1px solid rgba(226, 232, 240, .14);
  border-radius: 8px;
  padding: 0 10px;
  background: rgba(2, 6, 23, .84);
  color: #f8fafc;
  font-size: 13px;
  font-weight: 800;
}

.debug-panel {
  display: grid;
  gap: 9px;
}

.debug-remote-layout {
  display: grid;
  grid-template-columns: minmax(220px, .78fr) minmax(0, 1.22fr);
  gap: 10px;
}

.debug-remote-sessions,
.debug-remote-events {
  display: grid;
  gap: 9px;
  min-width: 0;
}

.debug-remote-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.debug-remote-head h2,
.debug-remote-events h2 {
  margin: 0;
  color: #fff;
  font-size: 15px;
  font-weight: 950;
}

.debug-remote-head button {
  min-height: 32px;
  border: 1px solid rgba(226, 232, 240, .14);
  border-radius: 8px;
  padding: 0 9px;
  background: rgba(226, 232, 240, .08);
  color: #f8fafc;
  font-size: 11px;
  font-weight: 900;
}

.debug-warning {
  margin: 0;
  border: 1px solid rgba(251, 191, 36, .32);
  border-radius: 8px;
  padding: 8px;
  background: rgba(120, 53, 15, .18);
  color: #fde68a;
  font-size: 12px;
  line-height: 1.35;
  font-weight: 800;
}

.debug-error-text {
  color: #fecaca;
}

.debug-session-list {
  display: grid;
  gap: 7px;
}

.debug-session-list button {
  display: grid;
  gap: 3px;
  border: 1px solid rgba(148, 163, 184, .14);
  border-radius: 8px;
  padding: 9px;
  background: rgba(15, 23, 42, .76);
  color: #f8fafc;
  text-align: left;
}

.debug-session-list button.active,
.debug-session-list button:hover {
  border-color: rgba(94, 234, 212, .5);
  background: rgba(20, 184, 166, .18);
}

.debug-session-list strong,
.debug-session-list span,
.debug-session-list small {
  overflow-wrap: anywhere;
}

.debug-session-list strong {
  font-size: 13px;
  font-weight: 950;
}

.debug-session-list span,
.debug-session-list small {
  color: rgba(226, 232, 240, .66);
  font-size: 11px;
  line-height: 1.25;
  font-weight: 790;
}

.debug-event,
.debug-error-group,
.debug-json {
  border: 1px solid rgba(148, 163, 184, .14);
  border-radius: 8px;
  background: rgba(15, 23, 42, .76);
}

.debug-event {
  display: grid;
  gap: 6px;
  padding: 10px;
}

.debug-event > div,
.debug-error-group > div {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}

.debug-event strong,
.debug-error-group strong {
  min-width: 0;
  color: #f8fafc;
  font-size: 13px;
  line-height: 1.2;
  font-weight: 950;
  overflow-wrap: anywhere;
}

.debug-event span,
.debug-event small,
.debug-error-group span,
.debug-error-group small,
.debug-event summary {
  color: rgba(226, 232, 240, .64);
  font-size: 11px;
  font-weight: 800;
}

.debug-event p,
.debug-error-group p,
.debug-empty {
  margin: 0;
  color: rgba(248, 250, 252, .88);
  font-size: 13px;
  line-height: 1.35;
  font-weight: 760;
  overflow-wrap: anywhere;
}

.debug-event pre,
.debug-json {
  max-height: 280px;
  margin: 0;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: 8px;
  padding: 10px;
  background: rgba(0, 0, 0, .34);
  color: #dbeafe;
  font-size: 10px;
  line-height: 1.45;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.debug-event-error {
  border-color: rgba(248, 113, 113, .42);
  background: rgba(127, 29, 29, .20);
}

.debug-event-warn {
  border-color: rgba(251, 191, 36, .36);
  background: rgba(120, 53, 15, .18);
}

.debug-error-group {
  display: grid;
  gap: 8px;
  padding: 10px;
}

.debug-roadtalk-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}

.debug-kpi {
  display: grid;
  gap: 4px;
  border: 1px solid rgba(148, 163, 184, .14);
  border-radius: 8px;
  padding: 9px;
  background: rgba(15, 23, 42, .76);
}

.debug-kpi b {
  color: rgba(226, 232, 240, .62);
  font-size: 9px;
  font-weight: 950;
}

.debug-kpi span {
  color: #f8fafc;
  font-size: 12px;
  font-weight: 950;
  overflow-wrap: anywhere;
}

.debug-kpi.is-ok {
  border-color: rgba(52, 211, 153, .34);
  background: rgba(20, 184, 166, .14);
}

.debug-kpi.is-warn {
  border-color: rgba(251, 191, 36, .36);
  background: rgba(120, 53, 15, .18);
}

.debug-kpi.is-error {
  border-color: rgba(248, 113, 113, .4);
  background: rgba(127, 29, 29, .20);
}

@media (max-width: 620px) {
  .debug-center-header {
    align-items: flex-start;
    flex-direction: column;
  }

  .debug-roadtalk-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .debug-remote-layout {
    grid-template-columns: 1fr;
  }

  .debug-filters label {
    min-width: 100%;
  }
}

@media (max-width: 520px) {
  .roadtalk-v2-view {
    padding-inline: 10px;
  }

  .roadtalk-v2-root {
    padding-top: 132px;
  }

  .roadtalk-v2-header h1 {
    font-size: 24px;
  }

  .roadtalk-v2-panel {
    padding: 10px;
  }

  .roadtalk-v2-sticky dl {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .roadtalk-v2-auth-alert {
    grid-template-columns: 1fr;
  }

  .roadtalk-v2-audio-doctor-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .roadtalk-v2-panel dl > div {
    grid-template-columns: minmax(84px, .62fr) minmax(0, 1fr);
  }

  .roadtalk-v2-snapshot-head {
    align-items: flex-start;
    flex-direction: column;
  }
}