.lg-app-shell {
  display: grid;
  gap: var(--lg-space-8);
  margin: 0 auto;
  max-width: 1220px;
  min-height: 100vh;
  padding: var(--lg-space-5);
}

.lg-phone-stage {
  background: linear-gradient(180deg, #0b0c0d 0%, #050606 100%);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 34px;
  box-shadow: var(--lg-shadow-md);
  display: grid;
  gap: var(--lg-space-4);
  margin: 0 auto;
  max-width: 390px;
  min-height: 100vh;
  overflow: hidden;
  padding: 34px var(--lg-space-4) var(--lg-space-4);
  position: relative;
  width: 100%;
}

.lg-phone-stage::before {
  background: #030405;
  border-radius: 0 0 18px 18px;
  content: "";
  height: 22px;
  left: 50%;
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  width: 116px;
  z-index: 4;
}

.lg-mobile-header,
.lg-topbar {
  align-items: center;
  display: flex;
  gap: var(--lg-space-4);
  justify-content: space-between;
  min-height: 42px;
}

.lg-action-stack,
.lg-section,
.lg-screen-stack {
  display: grid;
  gap: var(--lg-space-5);
}

.lg-quick-grid {
  display: grid;
  gap: var(--lg-space-4);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.lg-desktop-preview {
  align-self: center;
  display: none;
  gap: var(--lg-space-4);
  max-width: 620px;
}

.lg-desktop-preview h2 {
  font-size: var(--lg-text-2xl);
  max-width: 620px;
}

.lg-link-row,
.lg-button-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--lg-space-3);
}

.lg-page {
  margin: 0 auto;
  max-width: 1320px;
  padding: var(--lg-space-5);
}

.lg-page-header {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .035), rgba(255, 255, 255, .012)),
    rgba(8, 9, 9, .82);
  border: 1px solid var(--lg-color-line-soft);
  border-radius: var(--lg-radius-lg);
  box-shadow: var(--lg-shadow-sm);
  display: grid;
  gap: var(--lg-space-3);
  margin-bottom: var(--lg-space-6);
  padding: var(--lg-space-6);
}

.lg-page-header__nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--lg-space-3);
}

.lg-kit-grid {
  display: grid;
  gap: var(--lg-space-6);
}

.lg-kit-section {
  display: grid;
  gap: var(--lg-space-5);
}

.lg-component-grid {
  display: grid;
  gap: var(--lg-space-4);
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.lg-admin-layout {
  background: rgba(8, 9, 9, .94);
  border: 1px solid var(--lg-color-line-soft);
  border-radius: var(--lg-radius-lg);
  display: grid;
  overflow: hidden;
}

.lg-sidebar {
  background: #0a0b0b;
  border-bottom: 1px solid var(--lg-color-line-soft);
  display: flex;
  gap: var(--lg-space-3);
  overflow-x: auto;
  padding: var(--lg-space-4);
}

.lg-sidebar a {
  border-radius: var(--lg-radius-md);
  color: var(--lg-color-muted);
  flex: 0 0 auto;
  font-size: var(--lg-text-sm);
  font-weight: 800;
  padding: 13px var(--lg-space-3);
}

.lg-sidebar a:first-child {
  background: rgba(255, 193, 7, .16);
  box-shadow: inset 3px 0 0 var(--lg-color-primary);
  color: var(--lg-color-primary);
}

.lg-admin-main {
  display: grid;
  gap: var(--lg-space-5);
  padding: var(--lg-space-6);
}

.lg-dashboard-grid {
  display: grid;
  gap: var(--lg-space-4);
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}

.lg-table-wrap {
  overflow-x: auto;
}

.lg-table {
  border-collapse: collapse;
  min-width: 640px;
  width: 100%;
}

.lg-table th,
.lg-table td {
  border-bottom: 1px solid var(--lg-color-line-soft);
  padding: 14px var(--lg-space-4);
  text-align: left;
}

.lg-table th {
  color: var(--lg-color-muted);
  font-size: var(--lg-text-xs);
  text-transform: uppercase;
}

.lg-catalog-grid {
  display: grid;
  gap: var(--lg-space-6);
}

.lg-catalog-group {
  display: grid;
  gap: var(--lg-space-5);
}

.lg-catalog-group__title {
  border-left: 4px solid var(--lg-color-primary);
  color: var(--lg-color-text);
  padding-left: var(--lg-space-3);
}

.lg-screen-frame {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .03), rgba(255, 255, 255, .01)),
    rgba(8, 9, 9, .88);
  border: 1px solid var(--lg-color-line-soft);
  border-radius: var(--lg-radius-lg);
  box-shadow: var(--lg-shadow-sm);
  display: grid;
  gap: var(--lg-space-5);
  padding: var(--lg-space-5);
}

.lg-screen-frame--wide {
  grid-column: 1 / -1;
}

.lg-screen-title {
  align-items: center;
  border-bottom: 1px solid var(--lg-color-line-soft);
  display: flex;
  gap: var(--lg-space-3);
  justify-content: space-between;
  padding-bottom: var(--lg-space-3);
}

.lg-route-demo {
  display: grid;
  gap: var(--lg-space-8);
  margin: 0 auto;
  max-width: 1440px;
  min-height: 100vh;
  padding: var(--lg-space-5);
}

.lg-route-demo__phone {
  min-height: min(920px, calc(100svh - 24px));
}

.lg-route-demo__side {
  align-self: center;
  display: none;
  gap: var(--lg-space-5);
}

.lg-route-demo__sidebar {
  display: none;
}

.lg-map-app {
  display: block;
  max-width: 430px;
  overflow: hidden;
  padding: 0;
}

.lg-map-app__header {
  background: linear-gradient(180deg, rgba(3, 4, 5, .86), rgba(3, 4, 5, .28));
  left: 0;
  min-height: 88px;
  padding: 34px var(--lg-space-4) var(--lg-space-3);
  position: absolute;
  right: 0;
  top: 0;
  z-index: 6;
}

.lg-map-app__map {
  border: 0;
  border-radius: 0;
  height: 100%;
  min-height: max(60svh, min(920px, calc(100svh - 24px)));
}

.lg-route-form {
  gap: var(--lg-space-3);
}

.lg-route-form__grid {
  display: grid;
  gap: var(--lg-space-3);
  grid-template-columns: 1fr 1fr;
}

.lg-sheet-heading {
  align-items: center;
  display: flex;
  gap: var(--lg-space-3);
  justify-content: space-between;
}

.lg-route-summary-line {
  background: rgba(255, 255, 255, .035);
  border: 1px solid var(--lg-color-line-soft);
  border-radius: var(--lg-radius-md);
  display: grid;
  gap: var(--lg-space-2);
  padding: var(--lg-space-4);
}

.lg-route-summary-line span {
  color: var(--lg-color-muted);
  font-size: var(--lg-text-xs);
}

/* ====== App shell padrao Uber real (v012) ======
   Mapa e a camada estrutural de fundo; header e sheet flutuam sobre ele.
   Camadas: mapa 0 | header/controles 10 | bottom sheet 20 | modal 30. */

body.lg-app-page {
  height: 100dvh;
  overflow: hidden;
}

.lg-app-shell {
  height: 100dvh;
  min-height: 100vh;
  overflow: hidden;
  position: relative;
  width: 100%;
}

.lg-app-shell .lg-map-layer {
  border: 0;
  border-radius: 0;
  box-shadow: none;
  height: 100%;
  inset: 0;
  min-height: 0;
  position: absolute;
  width: 100%;
  z-index: 0;
}

.lg-map-header {
  align-items: center;
  display: flex;
  gap: var(--lg-space-3);
  justify-content: space-between;
  left: 0;
  padding: max(var(--lg-space-4), env(safe-area-inset-top)) var(--lg-space-4) 0;
  pointer-events: none;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 10;
}

.lg-map-header > * {
  pointer-events: auto;
}

.lg-map-header .lg-map-chip {
  left: auto;
  max-width: 62%;
  overflow: hidden;
  position: static;
  text-overflow: ellipsis;
  top: auto;
  white-space: nowrap;
}

.lg-app-shell .lg-fab--menu {
  left: auto;
  position: static;
  top: auto;
}

.lg-app-shell .lg-bottom-sheet {
  border-bottom: 0;
  border-left: 0;
  border-radius: 24px 24px 0 0;
  border-right: 0;
  bottom: 0;
  left: 0;
  max-height: 45dvh;
  overflow: auto;
  overscroll-behavior: contain;
  position: absolute;
  right: 0;
  z-index: 20;
}

.lg-app-shell .lg-bottom-sheet--collapsed {
  max-height: 320px;
}

.lg-app-shell .lg-bottom-sheet--half {
  max-height: 54dvh;
}

.lg-app-shell .lg-bottom-sheet--searching {
  max-height: 48dvh;
}

.lg-app-shell .lg-bottom-sheet--accepted {
  max-height: 62dvh;
}

.lg-app-shell .lg-bottom-sheet--expanded {
  max-height: calc(100dvh - 96px);
}

/* Desktop: sem telefone no centro. Mapa ocupa tudo; painel flutuante lateral. */
@media (min-width: 900px) {
  .lg-app-shell .lg-bottom-sheet {
    border: 1px solid var(--lg-color-line-soft);
    border-radius: 24px;
    bottom: 24px;
    left: 24px;
    max-height: calc(100dvh - 48px);
    right: auto;
    top: auto;
    width: 420px;
  }

  .lg-app-shell .lg-bottom-sheet--collapsed,
  .lg-app-shell .lg-bottom-sheet--half,
  .lg-app-shell .lg-bottom-sheet--searching,
  .lg-app-shell .lg-bottom-sheet--accepted {
    max-height: calc(100dvh - 48px);
  }

  .lg-app-shell .lg-bottom-sheet--expanded {
    max-height: calc(100dvh - 48px);
  }

  .lg-app-shell .lg-bottom-sheet__handle {
    display: none;
  }

  .lg-map-header {
    padding: 24px 24px 0;
  }

  .lg-map-header .lg-map-chip {
    max-width: 420px;
  }
}

/* ====== Refinamento padrao Uber/99 (v013) ======
   Alturas por estado + sheet com titulo/CTA fixos e corpo rolavel. */

.lg-app-shell .lg-bottom-sheet {
  display: flex;
  flex-direction: column;
  gap: var(--lg-space-3);
  overflow: hidden;
  padding-bottom: max(var(--lg-space-4), env(safe-area-inset-bottom));
}

.lg-sheet-title:empty,
.lg-sheet-footer:empty {
  display: none;
}

.lg-sheet-title,
.lg-sheet-footer {
  flex: none;
}

.lg-sheet-title__row {
  align-items: center;
  display: flex;
  gap: var(--lg-space-3);
}

.lg-sheet-title__row h2 {
  flex: 1;
  font-size: var(--lg-text-lg);
}

.lg-sheet-body {
  align-content: start;
  display: grid;
  flex: 1 1 auto;
  gap: var(--lg-space-3);
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
}

/* Alturas por estado (mobile) */
.lg-app-shell .lg-bottom-sheet--collapsed { max-height: 30dvh; }   /* home: 25-32% */
.lg-app-shell .lg-bottom-sheet--expanded  { max-height: 90dvh; }   /* destination: 85-95% */
.lg-app-shell .lg-bottom-sheet--half      { max-height: 54dvh; }   /* review: 48-58% */
.lg-app-shell .lg-bottom-sheet--tall      { max-height: 62dvh; }   /* estimate: 55-68% */
.lg-app-shell .lg-bottom-sheet--searching { max-height: 28dvh; }   /* searching: 22-30% */
.lg-app-shell .lg-bottom-sheet--accepted  { max-height: 44dvh; }   /* accepted: 35-48% */

/* Header limpo: status curto sem pill */
.lg-map-status {
  color: var(--lg-color-text);
  font-size: var(--lg-text-xs);
  font-weight: 800;
  max-width: 60%;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: 0 1px 8px rgba(0, 0, 0, .85);
  white-space: nowrap;
}

/* Card de rota (origem + destino juntos, padrao Uber) */
.lg-route-card {
  align-items: stretch;
  background: rgba(255, 255, 255, .04);
  border: 1px solid var(--lg-color-line-soft);
  border-radius: var(--lg-radius-md);
  color: var(--lg-color-text);
  cursor: pointer;
  display: flex;
  gap: var(--lg-space-3);
  padding: var(--lg-space-3) var(--lg-space-4);
  text-align: left;
  width: 100%;
}

.lg-route-pins {
  align-items: center;
  display: flex;
  flex: none;
  flex-direction: column;
  padding: 7px 0;
  width: 12px;
}

.lg-pin {
  border-radius: 50%;
  flex: none;
  height: 9px;
  width: 9px;
}

.lg-pin--origin {
  background: var(--lg-color-secondary);
  box-shadow: 0 0 0 3px rgba(45, 140, 255, .2);
}

.lg-pin--dest {
  background: var(--lg-color-primary);
  border-radius: 2px;
  box-shadow: 0 0 0 3px rgba(255, 193, 7, .16);
}

.lg-pin-line {
  background: var(--lg-color-line);
  flex: 1;
  margin: 3px 0;
  min-height: 12px;
  width: 2px;
}

.lg-route-card__stops {
  display: grid;
  flex: 1;
  gap: var(--lg-space-3);
  min-width: 0;
}

.lg-route-card__stop small {
  color: var(--lg-color-muted);
  display: block;
  font-size: var(--lg-text-xs);
}

.lg-route-card__stop strong {
  display: block;
  font-size: var(--lg-text-sm);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lg-route-card__edit {
  align-self: center;
  color: var(--lg-color-primary);
  flex: none;
  font-size: var(--lg-text-xs);
  font-weight: 900;
}

/* Busca compacta */
.lg-search-row {
  align-items: center;
  display: flex;
  gap: var(--lg-space-4);
}

.lg-search-row p {
  color: var(--lg-color-muted);
  font-size: var(--lg-text-xs);
}

.lg-loading-ring--sm {
  box-shadow: 0 0 0 10px rgba(255, 193, 7, .04), 0 0 22px rgba(255, 193, 7, .14);
  flex: none;
  height: 38px;
  width: 38px;
}

/* Mapa fallback: mais contraste de ruas */
.lg-app-shell .lg-map-layer {
  background:
    radial-gradient(circle at 52% 52%, rgba(45, 140, 255, .18), transparent 2%, transparent 100%),
    linear-gradient(35deg, transparent 0 41%, rgba(122, 136, 150, .38) 41.4%, transparent 42.6%),
    linear-gradient(138deg, transparent 0 28%, rgba(122, 136, 150, .32) 28.4%, transparent 29.6%),
    linear-gradient(92deg, transparent 0 58%, rgba(122, 136, 150, .3) 58.3%, transparent 59.2%),
    linear-gradient(4deg, transparent 0 72%, rgba(122, 136, 150, .26) 72.3%, transparent 73.1%),
    linear-gradient(118deg, transparent 0 64%, rgba(122, 136, 150, .22) 64.3%, transparent 65%),
    linear-gradient(rgba(255, 255, 255, .07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .055) 1px, transparent 1px),
    #0d1113;
  background-size: auto, auto, auto, auto, auto, auto, 42px 42px, 42px 42px, auto;
}

/* Mapa fallback: SVG de rota e marcadores */
.lg-demo-map {
  height: 100%;
  inset: 0;
  pointer-events: none;
  position: absolute;
  width: 100%;
  z-index: 1;
}

.lg-demo-map__route-casing {
  fill: none;
  stroke: rgba(0, 0, 0, .55);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2.6;
}

.lg-demo-map__route {
  fill: none;
  stroke: rgba(255, 193, 7, .95);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.4;
}

.lg-demo-map--accepted .lg-demo-map__route {
  stroke: rgba(45, 140, 255, .92);
}

.lg-demo-map__origin {
  fill: var(--lg-color-secondary);
  stroke: #fff;
  stroke-width: .7;
}

.lg-demo-map__origin-halo {
  fill: rgba(45, 140, 255, .18);
}

.lg-demo-map__dest {
  fill: var(--lg-color-primary);
  stroke: rgba(0, 0, 0, .6);
  stroke-width: .5;
}

.lg-demo-map__driver {
  fill: var(--lg-color-primary);
  stroke: rgba(0, 0, 0, .6);
  stroke-width: .5;
}

.lg-demo-map__driver--active {
  stroke: #fff;
  stroke-width: .6;
}

.lg-demo-map__radar {
  animation: lg-radar-pulse 1.8s ease-out infinite;
  fill: rgba(45, 140, 255, .16);
  stroke: rgba(45, 140, 255, .4);
  stroke-width: .4;
  transform-box: fill-box;
  transform-origin: center;
}

/* Desktop: painel flutuante mantem altura por conteudo */
@media (min-width: 900px) {
  .lg-app-shell .lg-bottom-sheet--collapsed,
  .lg-app-shell .lg-bottom-sheet--half,
  .lg-app-shell .lg-bottom-sheet--tall,
  .lg-app-shell .lg-bottom-sheet--searching,
  .lg-app-shell .lg-bottom-sheet--accepted,
  .lg-app-shell .lg-bottom-sheet--expanded {
    max-height: calc(100dvh - 48px);
  }
}