/* MyVE — automobile premium, shared member interface and demonstration. */
body.myveMemberPage{
  --myve-surface:#101d29;
  --myve-surface-raised:#152531;
  --myve-border:#253745;
  --panel:var(--myve-surface);
  --line:var(--myve-border);
  --muted:#a7b9c7;
  --accent:#58e1ed;
  --green:#71dcb7;
  --warn:#f1c778;
  color:#f4f7fb;
  color-scheme:dark;
  background:#070e15;
}
html:has(body.myveMemberPage){background:#070e15}
.myveMemberPage .myve-ambient-background{display:none}
.myveMemberPage :is(.premiumShell,.premiumApp){background:transparent}
.myveMemberPage :is(h1,h2,h3){color:#f4f7fb;letter-spacing:-.035em}
.myveMemberPage :is(.small,.empty){color:var(--muted)}
.myveMemberPage :is(.card,.carCard){
  background:linear-gradient(145deg,#101d29,#0b151e);
  border-color:var(--myve-border);
  border-radius:16px;
  box-shadow:0 12px 32px #0002;
}
.myveMemberPage :is(.notice,.demoReadOnly){background:#10232d;border-color:#294452;color:#c4d8e3;border-radius:12px}
.myveMemberPage :is(.notice.ok,.connectedChargeNow){background:#10271f;border-color:#315848;color:#c0efdb}
.myveMemberPage :is(.notice.warn,.chargeLimitLockNotice){background:#292315;border-color:#64512e;color:#f1d29b}
.myveMemberPage :is(.tag,.pill,.roleBadge,.accountRoleBadge){background:#13232e;border-color:#304654;color:#c8dce7}
.myveMemberPage :is(.goodTag,.fresh,.ok){color:var(--green)}
.myveMemberPage :is(.stale,.warn){color:var(--warn)}
.myveMemberPage .divider{background:var(--myve-border)}
.myveMemberPage .btn{
  min-height:44px;
  border:1px solid var(--accent);
  border-radius:10px;
  background:var(--accent);
  color:#05202b;
  box-shadow:none;
  line-height:1.35;
  transition:background .15s,border-color .15s;
}
.myveMemberPage .btn:hover:not(:disabled){background:#7feaf2;border-color:#7feaf2}
.myveMemberPage .btn.secondary{background:#101d29;border-color:#36505e;color:#e5eef4}
.myveMemberPage .btn.secondary:hover:not(:disabled){background:#192e3b;border-color:#58e1ed}
.myveMemberPage .btn.good{background:#71dcb7;border-color:#71dcb7;color:#08251a}
.myveMemberPage :is(.btn.danger,.dangerZone .btn){background:#301a23;border-color:#76404e;color:#ffbac8}
.myveMemberPage :is(.btn.danger,.dangerZone .btn):hover:not(:disabled){background:#462330;border-color:#c56b81}
.myveMemberPage .btn.off{background:#19252e;border-color:#3c505e;color:#c0cfdb}
.myveMemberPage .dangerZone .btn{background:#301a23;border-color:#76404e;color:#ffbac8}
.myveMemberPage button:disabled{cursor:default}
.myveMemberPage :is(.textButton,.backLink){color:#79dfe7}
.myveMemberPage :is(input:not([type=checkbox]):not([type=radio]):not([type=range]),select,textarea){
  border-color:#36505e;
  border-radius:9px;
  background:#08141e;
  color:#edf4f8;
  accent-color:var(--accent);
}
.myveMemberPage :is(input,textarea)::placeholder{color:#8fa4b4;opacity:1}
.myveMemberPage :is(input[type=checkbox],input[type=radio],input[type=range]){accent-color:var(--accent)}
.myveMemberPage :is(input,select,textarea):disabled{color:#adbecb;opacity:.72}
.myveMemberPage :where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.myveMemberPage :is(.stateRow,.settingsRow,.deviceSessionRow){border-color:var(--myve-border)}
.myveMemberPage :is(.colorChoice,.deviceSessionRow,.legacyStatus,.homeMetric,.miniStat,.rechargePeriodKpisV2>div,.connectedPilotRows>div){background:#101e29;border-color:#2b414f;border-radius:12px}
.myveMemberPage :is(.colorChoice.active,.vehicleTabs button.active,.periodTabs button.active,.rechargePeriodButton.active){background:#15303b;border-color:#58e1ed;color:#b0f4f9;box-shadow:inset 0 0 0 1px #58e1ed22}
.myveMemberPage :is(.legacyQuick,.connectedShortcut,.menuGrid button,.menuGrid a,.iCockpitQuickAction){
  background:#101e29;
  border-color:#2b414f;
  border-radius:12px;
  box-shadow:none;
  color:#e5eef4;
}
.myveMemberPage :is(.legacyQuick,.connectedShortcut,.menuGrid button,.menuGrid a,.iCockpitQuickAction):hover:not(:disabled){background:#182e3b;border-color:#58e1ed}
.myveMemberPage :is(.connectedShortcut>span,.legacyQuick>span,.homeStatIcon,.iCockpitQuickAction svg){color:var(--accent)}
.myveMemberPage :is(.premiumVehicleHero,.connectedVehicleCard,.premiumVehicleHero.iCockpitV2,.connectedVehicleCard.iCockpitV2){
  background:radial-gradient(ellipse at 75% 30%,#26485366,transparent 60%),linear-gradient(145deg,#142330,#08121c 78%);
  border-color:#304b59;
  border-radius:18px;
  box-shadow:0 20px 55px #0004,inset 0 1px #ffffff08;
}
.myveMemberPage :is(.premiumVehicleHero,.connectedVehicleCard)::after{opacity:.12}
.myveMemberPage :is(.premiumHeroTitle h1,.connectedVehicleHead h1){letter-spacing:-.045em;font-weight:780}
.myveMemberPage :is(.premiumHeroIntro .small,.connectedVehicleHead .small){color:#adbfcd;letter-spacing:.14em;font-size:11px}
.myveMemberPage :is(.connectedVehicleCard.iCockpitV2 .connectedVehicleMetrics>.homeMetric,.iCockpitDashboard .homeMetric){
  background:#0b1923eb!important;
  border-color:#2b424f!important;
  border-radius:12px!important;
  box-shadow:none!important;
}
.myveMemberPage :is(.homeMetric small,.legacyStatus small,.connectedMonthStats small,.connectedMonthHint,.connectedFreshness){color:#a7b9c7}
.myveMemberPage :is(.legacyBatteryTrack,.homeBatteryTrack){background:#243844}
.myveMemberPage .legacyBatteryTrack>span{background:linear-gradient(90deg,#309fae,#58e1ed);box-shadow:none}
.myveMemberPage .homeBatteryTrack i{background:#58e1ed;box-shadow:none}
.myveMemberPage .connectedVehicleCard.iCockpitV2 .homeBatteryTrack i{background:linear-gradient(90deg,#309fae,#58e1ed)!important;box-shadow:none!important}
.myveMemberPage .homeMetric.battery strong{color:#85e9f1}
.myveMemberPage .connectedVehicleCard.iCockpitV2 .connectedFreshness{background:#0b1923;border-color:#29414e;box-shadow:none}
.myveMemberPage :is(.heroRefreshBtn,.homeRefreshBtn){background:#11242f;border-color:#35505e;color:#a8e9ee;box-shadow:none;border-radius:10px}
.myveMemberPage :is(.heroRefreshBtn,.homeRefreshBtn):hover:not(:disabled){background:#1b3440;border-color:#58e1ed}
.myveMemberPage :is(.iCockpitWeatherCard,.vehicleOdometer,.connectedModelTag){background:#0c1924e8;border-color:#304b59;border-radius:12px;box-shadow:none}
.myveMemberPage :is(.vehicleSmartHeadline,.iCockpitWeatherMeta){color:#bdd0dd}
.myveMemberPage .iCockpitWeatherIcon{color:#58e1ed}
.myveMemberPage :is(.connectedMonthCard,.connectedPilotCard,.connectedCommunityCard,.connectedSetupCard){background:linear-gradient(145deg,#101e29,#0b1822);border-color:#2b414f;border-radius:16px}
.myveMemberPage :is(.rechargeTariffBreakdownV2>div,.rechargeMethodV2,.rechargeQualityNoteV2 span,.chargeTargetPanel,.energyTimeline,.rechargeSessionCard,.tripRow,.tripCard){background:#0c1b26;border-color:#2b414f;border-radius:12px}
.myveMemberPage :is(.vehicleManagerItem.active,.chargeProfileMode.selected,.tripFilters button.active){background:#15303b;border-color:#58e1ed;color:#b0f4f9;box-shadow:inset 0 0 0 1px #58e1ed22}
.myveMemberPage .vehicleManagerRemove{background:#301a23;border-color:#76404e;color:#ffbac8}
.myveMemberPage .rechargeLiveHero.idle{background:linear-gradient(145deg,#152633,#0c1b25);border-color:#304b59}
.myveMemberPage .rechargeLiveHero.active{background:linear-gradient(145deg,#15352a,#0c221c);border-color:#407761}
.myveMemberPage .rechargeLiveHero.recent{background:linear-gradient(145deg,#322b19,#1d201c);border-color:#796139}
.myveMemberPage :is(.rechargeHeaderBattery,.tripMetrics>span,.tripGeoPlace){background:#101e29;border-color:#2b414f;color:#c8dce7}
.myveMemberPage :is(.rechargeProgressTrack>i,.rechargeHeaderBatteryFill){background:linear-gradient(90deg,#309fae,#58e1ed)}
.myveMemberPage .rechargeLiveHero.active .rechargeProgressTrack>i{background:linear-gradient(90deg,#3fa981,#71dcb7)}
.myveMemberPage .rechargeSetupDialog .modalActions{background:#0d1b26!important}
.myveMemberPage .nativePeugeotWizard .modalActions{background:#0d1b26!important}
.myveMemberPage :is(.deviceSessionIcon,.bugReportHeroIcon,.bugScreenshotDrop,.bugReportContext){background:#102530;border-color:#35505e;color:#9deaf2}
.myveMemberPage .dangerZone{border-color:#75404c;background:linear-gradient(145deg,#261820,#141820)}
.myveMemberPage .modal{background:#01060ccc;backdrop-filter:blur(6px)}
.myveMemberPage .modal .box{background:#0d1b26;border-color:#304b5c;border-radius:18px;box-shadow:0 25px 90px #0009}
.myveMemberPage .modalActions{background:#0d1b26;border-color:#29404e}
.myveMemberPage .modal .headrow h2{letter-spacing:-.025em}
.myveMemberPage :is(.appLegalFooter,.appLegalFooter a){color:#a2b6c5}
.myveMemberPage .appLegalFooter a:hover{color:#79dfe7}
@media(max-width:700px){
  .myveMemberPage :is(.premiumVehicleHero,.connectedVehicleCard){border-radius:15px}
  .myveMemberPage :is(.card,.carCard){border-radius:14px}
  .myveMemberPage #view>.headrow h1{font-size:clamp(24px,6vw,34px);overflow-wrap:anywhere}
  .myveMemberPage .controlPanel .actions{gap:9px}
  .myveMemberPage .controlPanel .actions .btn{white-space:normal}
}
/* Legacy mobile recharge rules use !important; override their palette only. */
@media(max-width:720px){
  .myveMemberPage .rechargePeriodOverviewV2.card{background:linear-gradient(145deg,#101d29,#0b151e)!important;border-color:#253745!important;border-radius:14px!important;box-shadow:0 12px 32px #0002!important}
  .myveMemberPage .rechargePeriodOverviewV2 .rechargePeriodKpisV2>div,
  .myveMemberPage .myveAnalysisMetricV3{background:#101e29!important;border-color:#2b414f!important;border-radius:12px!important}
  .myveMemberPage .rechargePeriodTabsV2 .rechargePeriodButton.active{background:#15303b!important;border-color:#58e1ed!important;color:#b0f4f9!important;box-shadow:none!important}
}
@media(prefers-reduced-motion:reduce){.myveMemberPage .btn{transition:none}}

/* MyVE member theme — header, navigation and Plus menu only.
   Append after styles.css and branding CSS. Existing layout/breakpoints remain
   responsible for sidebar placement, mobile docking and page bottom padding. */

body.myveMemberPage .appTopbar {
  border-bottom: 1px solid #253745;
  background: transparent;
  color: #f4f7fb;
  gap: 16px;
}

body.myveMemberPage .appIdentity,
body.myveMemberPage .appIdentityBadges,
body.myveMemberPage .appUserTools {
  min-width: 0;
}

body.myveMemberPage .appIdentity {
  gap: 12px;
}

body.myveMemberPage .appIdentity .brandLogo,
body.myveMemberPage .iCockpitSidebarBrand .brandLogo {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  line-height: 1;
}

body.myveMemberPage :is(.appTopbar, .iCockpitSidebarBrand) .brandLogo img.myveBrandSymbol {
  width: 36px;
  height: 36px;
  flex: 0 0 auto;
  object-fit: contain;
  filter: none;
}

body.myveMemberPage :is(.appTopbar, .iCockpitSidebarBrand) .myveBrandText {
  color: #f4f7fb;
  font-size: 27px;
  font-weight: 800;
  letter-spacing: -1px;
  line-height: 1.1;
}

body.myveMemberPage :is(.appTopbar, .iCockpitSidebarBrand) .myveBrandText > span {
  color: #f4f7fb;
}

body.myveMemberPage .appIdentityBadges .roleBadge {
  margin: 0;
  border-color: #253745;
  background: #101d29;
  color: #a7b9c7;
  box-shadow: none;
  line-height: 1.4;
  white-space: normal;
}

body.myveMemberPage .appUserTools {
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

body.myveMemberPage .appUserEmail {
  display: block;
  min-width: 0;
  max-width: none;
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
  overflow-wrap: anywhere;
  color: #a7b9c7;
  line-height: 1.5;
}

body.myveMemberPage .appToolBtn {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  border: 1px solid #253745;
  border-radius: 12px;
  background: #101d29;
  color: #a7b9c7;
  box-shadow: none;
  transition: background-color .16s ease, border-color .16s ease, color .16s ease;
}

body.myveMemberPage .appToolBtn:hover {
  border-color: #58e1ed;
  background: #142a35;
  color: #f4f7fb;
}

body.myveMemberPage .vehicleSwitcher {
  min-width: 0;
  border-color: #253745;
  background: #101d29;
  border-radius: 12px;
}

body.myveMemberPage .vehicleSwitcher label {
  color: #a7b9c7;
}

body.myveMemberPage .vehicleSwitcher select {
  min-width: 0;
  min-height: 44px;
  border-color: #253745;
  background: #070e15;
  color: #f4f7fb;
  border-radius: 9px;
}

body.myveMemberPage .vehicleSwitcher option {
  background: #101d29;
  color: #f4f7fb;
}

body.myveMemberPage .vehicleAddTop {
  min-height: 44px;
  border-color: #253745;
  border-radius: 9px;
  background: #142a35;
  color: #58e1ed;
  white-space: normal;
  line-height: 1.35;
}

body.myveMemberPage .vehicleAddTop:hover {
  border-color: #58e1ed;
  background: #1a3741;
}

body.myveMemberPage .appPrimaryNav {
  border-color: #253745;
  color: #f4f7fb;
}

body.myveMemberPage .appPrimaryNav .appNavItem {
  min-width: 0;
  min-height: 44px;
  border: 1px solid #253745;
  border-radius: 12px;
  background: #101d29;
  color: #a7b9c7;
  box-shadow: none;
  text-decoration: none;
  line-height: 1.35;
  transform: none;
  transition: background-color .16s ease, border-color .16s ease, color .16s ease;
}

body.myveMemberPage .appPrimaryNav .appNavItem span {
  white-space: normal;
  overflow-wrap: anywhere;
  line-height: 1.35;
}

body.myveMemberPage .appPrimaryNav .appNavItem svg {
  flex: 0 0 auto;
  color: inherit;
  filter: none;
}

body.myveMemberPage .appPrimaryNav .appNavItem:hover {
  border-color: #426170;
  background: #142a35;
  color: #f4f7fb;
  transform: none;
}

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

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

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

/* The inset accent stays inside the hit target and cannot cover nearby labels. */
body.myveMemberPage .appPrimaryNav .appNavItem.active::after {
  display: none;
}

body.myveMemberPage .iCockpitSidebarBrand {
  border-color: #253745;
  color: #a7b9c7;
}

body.myveMemberPage .iCockpitSidebarBrand > span {
  overflow-wrap: anywhere;
  line-height: 1.5;
}

body.myveMemberPage .iCockpitSidebarStatus {
  border-color: #253745;
  border-radius: 12px;
  background: #101d29;
  color: #f4f7fb;
}

body.myveMemberPage .iCockpitSidebarStatus span,
body.myveMemberPage .iCockpitSidebarSignature span {
  color: #a7b9c7;
}

body.myveMemberPage .iCockpitSidebarSignature {
  color: #f4f7fb;
}

/* Preserve the existing status indicator's semantic success/warning colors. */
body.myveMemberPage .moreMenuButton {
  min-width: 0;
  border: 1px solid #253745;
  border-radius: 14px;
  background: #101d29;
  color: #f4f7fb;
  box-shadow: none;
  text-decoration: none;
  line-height: 1.45;
  transform: none;
  transition: background-color .16s ease, border-color .16s ease;
}

body.myveMemberPage .moreMenuButton > span {
  border-radius: 11px;
  background: #142a35;
  color: #58e1ed;
}

body.myveMemberPage .moreMenuButton > div {
  min-width: 0;
  overflow-wrap: anywhere;
}

body.myveMemberPage .moreMenuButton small,
body.myveMemberPage .moreMenuButton > b {
  color: #a7b9c7;
}

body.myveMemberPage .moreMenuButton:hover {
  border-color: #58e1ed;
  background: #142a35;
  transform: none;
}

body.myveMemberPage :is(.appNavItem, .appToolBtn, .vehicleAddTop, .moreMenuButton, .vehicleSwitcher select):focus-visible {
  outline: 2px solid #58e1ed;
  outline-offset: 3px;
}

@media (min-width: 960px) {
  body.myveMemberPage .iCockpitShell .appPrimaryNav {
    background: linear-gradient(180deg, #101d29, #070e15 68%);
    border-right-color: #253745;
    box-shadow: 12px 0 32px #00000024;
  }

  body.myveMemberPage .iCockpitShell .iCockpitNavScroll {
    padding: 3px;
    scrollbar-color: #426170 transparent;
  }

  body.myveMemberPage .iCockpitShell .appPrimaryNav .appNavItem {
    min-height: 46px;
    border-color: transparent;
    background: transparent;
    color: #a7b9c7;
    border-radius: 10px;
    box-shadow: none;
  }

  body.myveMemberPage .iCockpitShell .appPrimaryNav .appNavItem:hover {
    border-color: #253745;
    background: #142a35;
    color: #f4f7fb;
  }

  body.myveMemberPage .iCockpitShell .appPrimaryNav .appNavItem:is(.active, [aria-current="page"]) {
    border-color: #426170;
    background: #15303a;
    color: #f4f7fb;
    box-shadow: inset 3px 0 #58e1ed;
  }
}

@media (max-width: 760px) {
  body.myveMemberPage .appPrimaryNav {
    background: #070e15f5;
    border-top-color: #253745;
    box-shadow: 0 -8px 24px #00000038;
  }

  body.myveMemberPage .appPrimaryNav .appNavItem {
    min-height: 60px;
    border-color: transparent;
    border-radius: 10px;
    background: transparent;
    color: #a7b9c7;
    font-size: 11px;
    letter-spacing: 0;
    padding: 7px 3px;
    gap: 4px;
  }

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

  body.myveMemberPage .appPrimaryNav .appNavItem:focus-visible {
    outline-offset: -3px;
  }
}

@media (max-width: 520px) {
  body.myveMemberPage .appUserEmail {
    flex: 1 1 auto;
    text-align: left;
  }

  body.myveMemberPage .moreMenuButton {
    padding: 15px;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.myveMemberPage :is(.appNavItem, .appToolBtn, .vehicleAddTop, .moreMenuButton) {
    transition: none;
  }
}