/* MyVE concept 02 — horizontal automotive shell.
   Append after the member/nav theme. Requires myveAutomotiveShell without
   iCockpitShell/sidebar markup. No changes to vehicle cards or telemetry. */

body.myveMemberPage :is(.myveAutomotiveShell, .publicDemo) {
  --myve-shell-width: 1360px;
  --myve-shell-gutter: clamp(20px, 5vw, 88px);
  display: block;
  min-height: 100vh;
  background: #070e15;
  color: #f4f7fb;
}

body.myveMemberPage :is(.myveAutomotiveShell, .publicDemo) :is(.appTopbar, .appPrimaryNav, .premiumMain) {
  width: min(var(--myve-shell-width), calc(100% - var(--myve-shell-gutter) * 2)) !important;
  max-width: none !important;
  margin-inline: auto;
  box-sizing: border-box;
}

body.myveMemberPage :is(.myveAutomotiveShell, .publicDemo) .appTopbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px 28px;
  min-height: 100px;
  padding: 20px 0;
  border-bottom: 1px solid #253745;
  background: transparent;
}

body.myveMemberPage :is(.myveAutomotiveShell, .publicDemo) .appIdentity {
  flex: 1 1 440px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  min-width: 0;
  gap: 14px 22px;
}

body.myveMemberPage :is(.myveAutomotiveShell, .publicDemo) .appIdentity > .brandLogo {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 9px;
  line-height: 1;
}

body.myveMemberPage :is(.myveAutomotiveShell, .publicDemo) .appIdentity .brandLogo img.myveBrandSymbol {
  width: 38px;
  height: 38px;
  max-width: none;
  flex: 0 0 auto;
  object-fit: contain;
  filter: none;
}

body.myveMemberPage :is(.myveAutomotiveShell, .publicDemo) .appIdentity .myveBrandText,
body.myveMemberPage :is(.myveAutomotiveShell, .publicDemo) .appIdentity .myveBrandText > span {
  color: #f4f7fb;
  font-size: 30px;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -1px;
}

body.myveMemberPage :is(.myveAutomotiveShell, .publicDemo) .appIdentityBadges {
  flex: 0 1 auto;
  min-width: 0;
}

body.myveMemberPage :is(.myveAutomotiveShell, .publicDemo) .vehicleSwitcher {
  display: flex;
  align-items: center;
  flex: 0 1 auto;
  flex-wrap: wrap;
  gap: 8px;
  width: auto;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
}

body.myveMemberPage :is(.myveAutomotiveShell, .publicDemo) .vehicleSwitcher select {
  flex: 1 1 180px;
  min-width: 0;
  max-width: 320px;
  min-height: 44px;
  border: 1px solid #253745;
  border-radius: 9px;
  background: #101d29;
  color: #f4f7fb;
}

body.myveMemberPage :is(.myveAutomotiveShell, .publicDemo) .appUserTools {
  display: flex;
  flex: 0 1 auto;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  min-width: 0;
  gap: 8px;
}

body.myveMemberPage :is(.myveAutomotiveShell, .publicDemo) .appUserEmail {
  display: block;
  max-width: 28ch;
  overflow: visible;
  white-space: normal;
  overflow-wrap: anywhere;
  color: #a7b9c7;
  font-size: 12px;
  line-height: 1.5;
}

body.myveMemberPage :is(.myveAutomotiveShell, .publicDemo) .appPrimaryNav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  position: relative;
  inset: auto;
  height: auto;
  min-height: 58px;
  margin-top: 0;
  margin-bottom: 28px;
  padding: 0;
  gap: 0 24px;
  border: 0;
  border-bottom: 1px solid #253745;
  background: transparent;
  box-shadow: none;
  overflow: visible;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

body.myveMemberPage :is(.myveAutomotiveShell, .publicDemo) .appPrimaryNav .appNavItem {
  display: inline-flex;
  flex: 0 1 auto;
  align-items: center;
  justify-content: center;
  flex-direction: row;
  gap: 9px;
  width: auto;
  min-width: 0;
  min-height: 58px;
  padding: 12px 4px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: #a7b9c7;
  font-size: 14px;
  font-weight: 650;
  letter-spacing: 0;
  line-height: 1.35;
  text-decoration: none;
  transform: none;
}

body.myveMemberPage :is(.myveAutomotiveShell, .publicDemo) .appPrimaryNav .appNavItem svg {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  color: inherit;
  filter: none;
}

body.myveMemberPage :is(.myveAutomotiveShell, .publicDemo) .appPrimaryNav .appNavItem span {
  white-space: normal;
  overflow-wrap: anywhere;
  text-align: center;
  line-height: 1.35;
}

body.myveMemberPage :is(.myveAutomotiveShell, .publicDemo) .appPrimaryNav .appNavItem:hover:not(:disabled) {
  background: transparent;
  color: #f4f7fb;
  transform: none;
}

body.myveMemberPage :is(.myveAutomotiveShell, .publicDemo) .appPrimaryNav .appNavItem:is(.active, [aria-current="page"]) {
  border: 0;
  background: transparent;
  box-shadow: inset 0 -2px #58e1ed;
  color: #f4f7fb;
}

body.myveMemberPage :is(.myveAutomotiveShell, .publicDemo) .appPrimaryNav .appNavItem:is(.active, [aria-current="page"]) svg {
  color: #58e1ed;
  filter: none;
}

body.myveMemberPage :is(.myveAutomotiveShell, .publicDemo) .appPrimaryNav .appNavItem.active::after {
  display: none;
}

body.myveMemberPage :is(.myveAutomotiveShell, .publicDemo) .appPrimaryNav .appNavItem:focus-visible {
  outline: 2px solid #58e1ed;
  outline-offset: -4px;
  border-radius: 8px;
}

body.myveMemberPage :is(.myveAutomotiveShell, .publicDemo) .premiumMain {
  min-width: 0;
  padding: 0 0 max(48px, env(safe-area-inset-bottom));
}

@media (max-width: 760px) {
  body.myveMemberPage :is(.myveAutomotiveShell, .publicDemo) {
    --myve-shell-gutter: 20px;
  }

  body.myveMemberPage :is(.myveAutomotiveShell, .publicDemo) .appTopbar {
    min-height: 84px;
    padding: 18px 0;
    gap: 16px;
  }

  body.myveMemberPage :is(.myveAutomotiveShell, .publicDemo) .appIdentity {
    flex: 1 1 auto;
    gap: 12px;
  }

  body.myveMemberPage :is(.myveAutomotiveShell, .publicDemo) .vehicleSwitcher {
    order: 3;
    flex: 1 1 100%;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    width: 100%;
  }

  body.myveMemberPage :is(.myveAutomotiveShell, .publicDemo) .vehicleSwitcher select {
    width: 100%;
    max-width: none;
  }

  body.myveMemberPage :is(.myveAutomotiveShell, .publicDemo) .vehicleAddTop {
    width: auto;
  }

  body.myveMemberPage :is(.myveAutomotiveShell, .publicDemo) .appUserTools {
    width: 100%;
    justify-content: flex-end;
  }

  body.myveMemberPage :is(.myveAutomotiveShell, .publicDemo) .appUserEmail {
    flex: 1 1 16ch;
    max-width: none;
    text-align: left;
  }

  body.myveMemberPage :is(.myveAutomotiveShell, .publicDemo) .appPrimaryNav {
    position: fixed;
    z-index: 2500;
    inset: auto 0 0;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    min-height: 78px;
    height: auto;
    margin: 0;
    padding: 7px max(8px, env(safe-area-inset-right)) calc(7px + env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left)) !important;
    gap: 4px;
    border: 0;
    border-top: 1px solid #253745;
    background: #070e15f5;
    box-shadow: 0 -8px 24px #00000038;
    overflow: visible;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
  }

  body.myveMemberPage :is(.myveAutomotiveShell, .publicDemo) .appPrimaryNav .appNavItem {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    width: 100%;
    min-width: 0;
    min-height: 64px;
    padding: 7px 3px;
    border-radius: 9px;
    font-size: 11px;
  }

  body.myveMemberPage :is(.myveAutomotiveShell, .publicDemo) .appPrimaryNav .appNavItem svg {
    width: 22px;
    height: 22px;
  }

  body.myveMemberPage :is(.myveAutomotiveShell, .publicDemo) .appPrimaryNav .appNavItem:is(.active, [aria-current="page"]) {
    background: #15303a;
    box-shadow: inset 0 -2px #58e1ed;
  }

  body.myveMemberPage :is(.myveAutomotiveShell, .publicDemo) .premiumMain {
    padding-bottom: calc(124px + env(safe-area-inset-bottom));
  }
}

@media (max-width: 380px) {
  body.myveMemberPage :is(.myveAutomotiveShell, .publicDemo) .vehicleSwitcher {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  body.myveMemberPage :is(.myveAutomotiveShell, .publicDemo) .vehicleSwitcher label {
    grid-column: 1 / -1;
  }
}

/* Concept 02 translated into a full-width member layout. */
body.myveMemberPage .myveAutomotiveShell{position:relative;isolation:isolate}
body.myveMemberPage .myveAutomotiveShell:has(.legacyDashboard[data-view="home"]):before,
body.myveMemberPage .publicDemo:before{
  content:"";position:absolute;inset:0 0 auto;height:830px;z-index:-1;pointer-events:none;
  background:linear-gradient(90deg,#030910dd 0,#030910a8 34%,#0309101a 65%),linear-gradient(180deg,#03091030,transparent 48%,#070e15 100%),url('/assets/myve-member-driveway.png') center 45%/cover no-repeat;
}
body.myveMemberPage :is(.myveAutomotiveShell,.publicDemo){background:transparent}
body.myveMemberPage .myveAutomotiveDashboard{width:100%;max-width:none;margin:0;padding-bottom:24px}
body.myveMemberPage .connectedHome{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;min-width:0}
body.myveMemberPage .connectedHome>:is(.myveVehicleStage,.connectedSetupCard,.connectedChargeNow,.connectedShortcuts,.connectedCommunityCard,.iCockpitQuickActions,.iCockpitCommandMsg){grid-column:1/-1}
body.myveMemberPage .myveVehicleStage{min-width:0;margin:0;position:relative}
body.myveMemberPage .myveStageScene{position:relative;display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:18px;min-height:460px;padding:36px 0 18px;align-items:center}
body.myveMemberPage .myveStageIntro{min-width:0;z-index:3;padding:0 0 20px}
body.myveMemberPage .myveStageEyebrow{display:flex;align-items:center;gap:12px;color:#adbfcd;font-size:10px;font-weight:650;letter-spacing:.16em;line-height:1.7;text-transform:uppercase}
body.myveMemberPage .myveStageEyebrow:before{content:"";width:36px;height:2px;background:#58e1ed;flex:0 0 auto}
body.myveMemberPage .myveStageIntro h1{font-size:clamp(44px,4.7vw,72px);line-height:1.04;letter-spacing:-.045em;margin:22px 0 13px;font-weight:780;overflow-wrap:anywhere}
body.myveMemberPage .myveStageLead{font-size:clamp(25px,2.6vw,41px);line-height:1.22;letter-spacing:-.025em;font-weight:650;margin:0 0 23px;color:#f4f7fb}
body.myveMemberPage .myveStageLead span{color:#58e1ed}
body.myveMemberPage .myveVehicleStage .connectedStatusInCard{display:flex;gap:9px;align-items:center;width:max-content;max-width:100%;padding:8px 11px;border-radius:8px;background:#091822bf;border:1px solid #4664716b;box-shadow:none;color:#dceaf2}
body.myveMemberPage .myveVehicleStage .connectedStatusInCard>div{display:grid;gap:2px;min-width:0}
body.myveMemberPage .myveVehicleStage .connectedStatusInCard strong{font-size:12px}
body.myveMemberPage .myveVehicleStage .connectedStatusInCard small{color:#b3c7d5;font-size:10px}
body.myveMemberPage .myveStageActions{display:flex;flex-wrap:wrap;gap:11px;margin-top:22px;align-items:center}
body.myveMemberPage .myveStageActions .btn{display:inline-flex;align-items:center;justify-content:center;gap:16px;min-height:50px;padding:14px 22px;border-radius:8px;font-size:13px}
body.myveMemberPage .myveStageActions svg{width:19px;height:19px}
body.myveMemberPage .myveStageFreshness{display:flex;align-items:center;gap:7px;flex-wrap:wrap;width:auto;padding:0;margin:17px 0 0;background:none;border:0;font-size:11px;color:#b0c4d1;box-shadow:none}
body.myveMemberPage .myveStageFreshness b{font-size:11px;color:#f1c778}
body.myveMemberPage .myveStageVisual{width:calc(100% + 35px);height:350px;max-height:none;margin:70px -35px 0 0;position:relative;display:flex;align-items:flex-end;justify-content:center;isolation:isolate;min-width:0}
body.myveMemberPage .myveStageVisual:after{content:"";position:absolute;left:10%;right:4%;bottom:13px;height:24px;border-radius:50%;background:#0009;filter:blur(12px);z-index:-1}
body.myveMemberPage .myveStageVisual>img{display:block;width:116%;max-width:none;height:100%;object-fit:contain;object-position:center bottom;filter:brightness(.87) drop-shadow(0 23px 17px #0008);z-index:2}
body.myveMemberPage .myveStageVisual .vehicleModelPlaceholder{height:100%;min-height:200px;color:#d1eaf1}
body.myveMemberPage .myveStageVisual .connectedModelTag{right:15px;bottom:0;padding:5px 9px;font-size:10px;color:#c7dce6;background:#07131bc2;border-color:#526d7977;z-index:4}
body.myveMemberPage .myveStageWeather{position:absolute;right:0;top:32px;max-width:240px;z-index:3}
body.myveMemberPage .myveStageWeather .iCockpitWeatherCard{width:auto;margin:0;padding:10px 13px;border-radius:9px;background:#0a1721a8;border-color:#a5c0cc33;box-shadow:none}
body.myveMemberPage .myveStageTelemetry{position:relative;z-index:5;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));padding:23px 10px;border:1px solid #68808e4d;border-radius:12px;background:#09141de8;box-shadow:0 18px 46px #0004;backdrop-filter:blur(12px)}
body.myveMemberPage .myveStageMetric{display:grid;grid-template-columns:32px minmax(0,1fr);gap:14px;align-items:center;min-width:0;padding:0 18px;border-right:1px solid #7b95a54d}
body.myveMemberPage .myveStageMetric:last-child{border-right:0}
body.myveMemberPage .myveStageMetric>svg{width:29px;height:34px;color:#58e1ed;fill:none;stroke:currentColor;stroke-width:2.35px;stroke-linecap:round;stroke-linejoin:round}
body.myveMemberPage .myveStageMetric>svg .fill{fill:currentColor;stroke:none}
body.myveMemberPage .myveStageMetric>svg .soft{opacity:.48}
body.myveMemberPage .myveStageMetric>div{min-width:0}
body.myveMemberPage .myveStageMetric small{display:block;color:#b0c2cf;font-size:10px;line-height:1.7;margin-bottom:4px}
body.myveMemberPage .myveStageMetric strong{display:block;color:#f4f7fb;font-size:clamp(19px,1.8vw,26px);letter-spacing:-.025em;line-height:1.3;overflow-wrap:anywhere}
body.myveMemberPage .myveStageMetric strong em{font-size:.6em;font-style:normal;font-weight:500;color:#b0c2cf}
body.myveMemberPage .myveStageMetric:nth-child(3) strong{font-size:18px}
body.myveMemberPage .myveStageBatteryTrack{display:block;height:5px;background:#3b505f;border-radius:999px;overflow:hidden;margin-top:8px}
body.myveMemberPage .myveStageBatteryTrack i{display:block;height:100%;background:#58e1ed;border-radius:inherit}
body.myveMemberPage .connectedHome>.iCockpitQuickActions{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:0}
body.myveMemberPage .connectedHome>.iCockpitCommandMsg{margin:0}
body.myveMemberPage .connectedHome>.connectedShortcuts{margin:8px 0}
body.myveMemberPage .connectedHome>.connectedShortcuts>h2{font-size:27px;letter-spacing:-.025em;margin:0 0 18px}
body.myveMemberPage .connectedHome .connectedShortcut{display:grid;grid-template-columns:40px minmax(0,1fr);align-items:center;text-align:left;justify-content:start;padding:24px 20px;gap:13px;min-height:90px;border-radius:12px}
body.myveMemberPage .connectedHome .connectedShortcut>span{width:38px;height:38px;background:#14303c;display:grid;place-items:center;border-radius:9px}
body.myveMemberPage .connectedHome .connectedShortcut svg{width:23px;height:23px}
body.myveMemberPage .myveAutomotiveDashboard[data-view="vehicle"] .premiumVehicleHero{background:linear-gradient(90deg,#061019dc,#06101940),url('/assets/myve-member-driveway.png') center/cover;border-radius:12px;padding:30px}
body.myveMemberPage .myveAutomotiveDashboard[data-view="vehicle"] .premiumHeroShowcase{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);min-height:320px}
body.myveMemberPage .myveAutomotiveDashboard[data-view="vehicle"] .premiumHeroIntro h1{font-size:clamp(42px,4vw,64px)}
body.myveMemberPage .myveAutomotiveDashboard[data-view="vehicle"] .legacyCarVisual{height:310px}
body.myveMemberPage .myveAutomotiveDashboard :is(.rechargeUxPage,.sectionGrid,.tripsHead){max-width:none}
@media(max-width:1100px){
  body.myveMemberPage .myveStageMetric{grid-template-columns:25px minmax(0,1fr);gap:10px;padding-inline:13px}
  body.myveMemberPage .myveStageMetric>svg{width:24px}
  body.myveMemberPage .myveStageMetric:nth-child(3) strong{font-size:16px}
  body.myveMemberPage .myveStageScene{min-height:440px}
  body.myveMemberPage .myveStageVisual{height:290px}
}
@media(max-width:900px){
  body.myveMemberPage .myveStageTelemetry{grid-template-columns:repeat(3,minmax(0,1fr));gap:21px 0;padding:22px 7px}
  body.myveMemberPage .myveStageMetric:nth-child(3){border-right:0}
  body.myveMemberPage .myveStageMetric:nth-child(n+4){border-top:1px solid #7b95a533;padding-top:19px}
  body.myveMemberPage .myveStageMetric:nth-child(5){border-right:0}
  body.myveMemberPage .myveStageWeather{max-width:210px}
}
@media(max-width:760px){
  body.myveMemberPage .myveAutomotiveShell:has(.legacyDashboard[data-view="home"]):before,
  body.myveMemberPage .publicDemo:before{height:1050px;background-position:65% top;background-image:linear-gradient(180deg,#0309109e,#03091024 55%,#070e15 94%),url('/assets/myve-member-driveway.png')}
  body.myveMemberPage .connectedHome{grid-template-columns:1fr;gap:19px}
  body.myveMemberPage .myveStageScene{display:flex;flex-direction:column;align-items:stretch;gap:0;padding-top:27px;min-height:0}
  body.myveMemberPage .myveStageIntro{padding:0}
  body.myveMemberPage .myveStageIntro h1{font-size:44px;margin-top:18px}
  body.myveMemberPage .myveStageLead{font-size:29px;margin-bottom:17px}
  body.myveMemberPage .myveStageVisual{height:235px;width:100%;margin:0 0 22px}
  body.myveMemberPage .myveStageVisual>img{width:108%}
  body.myveMemberPage .myveStageWeather{position:static;align-self:flex-end;max-width:none;margin:0 0 13px;order:3}
  body.myveMemberPage .myveStageWeather .iCockpitWeatherCard{max-width:100%;padding:8px 11px}
  body.myveMemberPage .myveStageTelemetry{grid-template-columns:repeat(2,minmax(0,1fr));gap:0;padding:4px 0}
  body.myveMemberPage .myveStageMetric{min-height:92px;padding:16px 14px;border-bottom:1px solid #7b95a533}
  body.myveMemberPage .myveStageMetric:nth-child(2n){border-right:0}
  body.myveMemberPage .myveStageMetric:nth-child(3){border-right:1px solid #7b95a54d}
  body.myveMemberPage .myveStageMetric:nth-child(n+4){border-top:0;padding-top:16px}
  body.myveMemberPage .myveStageMetric:last-child{grid-column:1/-1;border:0;min-height:76px}
  body.myveMemberPage .myveStageMetric strong{font-size:23px}
  body.myveMemberPage .myveStageMetric:nth-child(3) strong{font-size:19px}
  body.myveMemberPage .connectedHome>.connectedShortcuts{min-width:0;width:100%}
  body.myveMemberPage .connectedHome .connectedShortcutGrid{grid-template-columns:repeat(2,minmax(0,1fr));min-width:0;width:100%;gap:10px}
  body.myveMemberPage .connectedHome .connectedShortcut{padding:18px 14px;grid-template-columns:32px minmax(0,1fr);gap:9px;min-height:78px}
  body.myveMemberPage .connectedHome .connectedShortcut strong{min-width:0;white-space:normal;overflow-wrap:anywhere;font-size:13px;line-height:1.35}
  body.myveMemberPage .connectedHome .connectedShortcut>span{width:32px;height:32px}
  body.myveMemberPage .connectedHome>.iCockpitQuickActions{grid-template-columns:repeat(2,minmax(0,1fr))}
  body.myveMemberPage .myveAutomotiveDashboard[data-view="vehicle"] .premiumHeroShowcase{grid-template-columns:1fr}
  body.myveMemberPage .myveAutomotiveDashboard[data-view="vehicle"] .legacyCarVisual{height:220px}
}
@media(max-width:370px){
  body.myveMemberPage .connectedHome .connectedShortcut{padding-inline:12px;grid-template-columns:28px minmax(0,1fr);gap:8px}
  body.myveMemberPage .connectedHome .connectedShortcut>span{width:28px;height:28px}
}

/* Mobile member content reaches the viewport edges; spacing stays inside cards. */
@media (max-width: 760px) {
  body.myveMemberPage .myveAutomotiveShell:not(.publicDemo) .premiumMain {
    width: 100% !important;
    max-width: none !important;
    margin-inline: 0;
    padding-left: env(safe-area-inset-left, 0px) !important;
    padding-right: env(safe-area-inset-right, 0px) !important;
  }
  body.myveMemberPage .myveAutomotiveShell:not(.publicDemo) .premiumMain :is(
    #view > .headrow,
    .rechargeUxHeader,
    .legacySection > .legacySectionTitle,
    .connectedShortcuts > h2,
    .myveSiteFooter
  ) {
    padding-inline: 16px;
  }
}