/* Production vNext design shared by admin, contractor and performer apps. */
.design-preview-toggle {
  position: relative;
  min-width: 42px;
  min-height: 28px;
  display: none !important;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 0 9px;
  border: 1px solid color-mix(in srgb, var(--ops-line, #718096) 72%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--ops-surface, #111923) 72%, transparent);
  color: var(--ops-muted, #8793a0);
  font: inherit;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .045em;
  cursor: pointer;
  opacity: .62;
  transition: opacity .16s ease, border-color .16s ease, color .16s ease, background .16s ease;
}

/* Native performer detail surface: deliberately isolated from classic mode. */
.performer-bike-detail-screen[hidden] { display: none !important; }
html[data-design="next"] body.performer-surface .performer-bike-detail-screen {
  position: fixed; z-index: 240; inset: 0; display: grid; place-items: center; overflow: hidden; overscroll-behavior: none; background: rgba(19,24,29,.42); color: #17191c;
}
html[data-design="next"] body.performer-surface.bike-detail-screen-open { overflow: hidden; }
html[data-design="next"] body.performer-surface .bike-detail-screen-shell {
  width: min(620px,100%); height: min(100dvh,980px); display: grid; grid-template-rows: auto minmax(0,1fr) auto; overflow: hidden; background: #faf9f6; box-shadow: 0 30px 90px rgba(16,22,28,.28);
}
html[data-design="next"] body.performer-surface .bike-detail-screen-head {
  min-height: 78px; display: grid; grid-template-columns: 48px minmax(0,1fr) 48px; align-items: center; gap: 12px; padding: max(14px,env(safe-area-inset-top)) 22px 10px; background: rgba(250,249,246,.96);
}
html[data-design="next"] body.performer-surface .bike-detail-screen-head h1 { margin: 0; color: #17191c; font-size: 24px; font-weight: 850; letter-spacing: .02em; text-align: center; }
html[data-design="next"] body.performer-surface .bike-detail-round { width: 46px; height: 46px; display: grid; place-items: center; padding: 0; border: 1px solid #d9d9d7; border-radius: 15px; background: rgba(255,255,255,.72); color: #14171a; }
html[data-design="next"] body.performer-surface .bike-detail-round .ops-icon { width: 25px; height: 25px; stroke-width: 2.1; }
html[data-design="next"] body.performer-surface .bike-detail-screen-body { min-height: 0; display: grid; align-content: start; gap: 12px; padding: 8px 22px 18px; overflow: auto; overscroll-behavior: contain; scrollbar-width: none; }
html[data-design="next"] body.performer-surface .bike-detail-screen-body::-webkit-scrollbar { display: none; }
html[data-design="next"] body.performer-surface .bike-detail-hero { min-height: 232px; display: grid; grid-template-columns: 1.15fr .85fr; align-items: center; gap: 8px; padding: 15px 18px; border-radius: 22px; background: linear-gradient(135deg,#fbfaf7,#f2f0ec); box-shadow: inset 0 0 0 1px rgba(34,38,41,.025); }
html[data-design="next"] body.performer-surface .bike-detail-visual { min-width: 0; }
html[data-design="next"] body.performer-surface .bike-product-visual { width: 115%; max-width: 330px; height: auto; margin-left: -10%; overflow: visible; }
html[data-design="next"] body.performer-surface .bike-product-image { display: block; object-fit: contain; filter: drop-shadow(0 12px 12px rgba(20,24,28,.16)); }
html[data-design="next"] body.performer-surface .bike-detail-charge { display: grid; justify-items: start; gap: 9px; }
html[data-design="next"] body.performer-surface .bike-detail-charge > strong { color: #191b1d; font-size: clamp(58px,15vw,82px); font-weight: 750; line-height: .9; letter-spacing: -.065em; }
html[data-design="next"] body.performer-surface .bike-detail-charge > strong small { font-size: .68em; font-weight: 700; }
html[data-design="next"] body.performer-surface .bike-detail-pill { min-height: 33px; display: inline-flex; align-items: center; gap: 9px; padding: 0 13px; border: 1px solid #badf9f; border-radius: 10px; background: #f4faef; color: #1c8c20; font-size: 13px; font-weight: 700; white-space: nowrap; }
html[data-design="next"] body.performer-surface .bike-detail-pill i { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
html[data-design="next"] body.performer-surface .bike-detail-pill.offline { border-color: #ffc4c7; background: #fff3f3; color: #e13c44; }
html[data-design="next"] body.performer-surface .bike-detail-pill.rental { border-color: #adcdfb; background: #edf4ff; color: #1764d7; }
html[data-design="next"] body.performer-surface .bike-detail-screen-loading { min-height: 38px; display: grid; place-items: center; border-radius: 12px; background: linear-gradient(100deg,#f1f1ef,#fafafa,#f1f1ef); background-size: 220% 100%; color: #777; font-size: 11px; animation: performer-bike-shimmer 1.4s linear infinite; }
html[data-design="next"] body.performer-surface .bike-detail-accordion { border: 1px solid #e2e1de; border-radius: 20px; background: rgba(255,255,255,.84); overflow: clip; }
html[data-design="next"] body.performer-surface .bike-detail-accordion summary { min-height: 66px; display: grid; grid-template-columns: 42px minmax(0,1fr) 24px; align-items: center; gap: 12px; padding: 10px 16px; color: #151719; cursor: pointer; list-style: none; }
html[data-design="next"] body.performer-surface .bike-detail-accordion summary::-webkit-details-marker { display: none; }
html[data-design="next"] body.performer-surface .bike-detail-accordion summary > b { font-size: 17px; }
html[data-design="next"] body.performer-surface .bike-detail-accordion summary > .ops-icon { width: 23px; height: 23px; transform: rotate(90deg); transition: transform .16s ease; }
html[data-design="next"] body.performer-surface .bike-detail-accordion:not([open]) summary > .ops-icon { transform: rotate(0); }
html[data-design="next"] body.performer-surface .bike-detail-section-icon,
html[data-design="next"] body.performer-surface .profile-next-icon { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 14px; background: #fff5cc; color: #9f8100; }
html[data-design="next"] body.performer-surface .bike-detail-section-icon .ops-icon,
html[data-design="next"] body.performer-surface .profile-next-icon .ops-icon { width: 23px; height: 23px; }
html[data-design="next"] body.performer-surface .bike-detail-accordion.battery .bike-detail-section-icon { background: #e8f6de; color: #1a1f1a; }
html[data-design="next"] body.performer-surface .bike-detail-accordion.geo .bike-detail-section-icon { background: #e8f1ff; color: #1262d6; }
html[data-design="next"] body.performer-surface .bike-detail-accordion.rental .bike-detail-section-icon { background: #efe7ff; color: #7033cb; }
html[data-design="next"] body.performer-surface .bike-detail-section-body { padding: 0 16px 12px; }
html[data-design="next"] body.performer-surface .bike-detail-tags { display: flex; flex-wrap: wrap; gap: 8px; padding: 3px 0 13px; }
html[data-design="next"] body.performer-surface .bike-detail-tags span { min-height: 34px; display: inline-flex; align-items: center; gap: 7px; padding: 0 10px; border: 1px solid; border-radius: 10px; font-size: 12px; font-weight: 650; }
html[data-design="next"] body.performer-surface .bike-detail-tags .ops-icon { width: 17px; height: 17px; }
html[data-design="next"] body.performer-surface .bike-detail-tags span.warning { border-color: #ffc89a; background: #fff8ef; color: #e36313; }
html[data-design="next"] body.performer-surface .bike-detail-tags span.danger { border-color: #ffb7ba; background: #fff4f4; color: #e33c43; }
html[data-design="next"] body.performer-surface .bike-detail-tags span.good { border-color: #bde6c0; background: #f0faf1; color: #218d31; }
html[data-design="next"] body.performer-surface .bike-detail-row { min-height: 43px; display: grid; grid-template-columns: minmax(110px,.75fr) minmax(0,1.25fr); align-items: center; gap: 14px; border-top: 1px solid #ecebe8; color: #797773; font-size: 13px; }
html[data-design="next"] body.performer-surface .bike-detail-row b { color: #17191b; font-size: 13px; font-weight: 600; text-align: right; overflow-wrap: anywhere; }
html[data-design="next"] body.performer-surface .bike-detail-row b.good { color: #178d25; }
html[data-design="next"] body.performer-surface .bike-detail-row b.warning { color: #cb7913; }
html[data-design="next"] body.performer-surface .bike-detail-row b.danger { color: #e2373f; }
html[data-design="next"] body.performer-surface .bike-detail-row b.muted { color: #777; }
html[data-design="next"] body.performer-surface .bike-detail-coordinates { padding: 2px 0 0; color: #92908b; font-size: 11px; text-align: right; }
html[data-design="next"] body.performer-surface .rental-chip { padding: 5px 9px; border-radius: 8px; background: #e9f2ff; color: #1764d7; font-style: normal; }
html[data-design="next"] body.performer-surface .bike-detail-empty { padding: 4px 0 12px; color: #7b7975; font-size: 12px; }
html[data-design="next"] body.performer-surface .bike-detail-screen-actions { display: grid; grid-template-columns: 1.15fr 1.05fr .75fr; gap: 8px; padding: 12px 22px max(14px,env(safe-area-inset-bottom)); border-top: 1px solid #e3e1dd; background: rgba(250,249,246,.98); }
html[data-design="next"] body.performer-surface .bike-detail-screen-actions .ops-btn { min-width: 0; min-height: 48px; padding: 0 10px; border: 1px solid #e4bc00; border-radius: 11px; background: #fff; color: #1a1b1d; font-size: 11px; }
html[data-design="next"] body.performer-surface .bike-detail-screen-actions .ops-btn.primary { background: #ffd400; color: #181400; font-size: 13px; }
html[data-design="next"] body.performer-surface .bike-detail-screen-actions .ops-icon { width: 18px; height: 18px; }
html[data-design="next"] body.performer-surface .bike-detail-screen-actions > small { grid-column: 1/-1; display: flex; align-items: center; justify-content: center; gap: 6px; color: #a19f9a; font-size: 9px; }
html[data-design="next"] body.performer-surface .bike-detail-screen-actions > small .ops-icon { width: 13px; height: 13px; }

@media (max-width: 900px) {
  html[data-design="next"] body.performer-surface[data-performer-route="profile"] .performer-topbar { display: none; }
  html[data-design="next"] body.performer-surface[data-performer-route="profile"] .performer-route[data-route-panel="profile"] { padding-top: max(10px,env(safe-area-inset-top)); background: #faf9f6; }
  html[data-design="next"] body.performer-surface .bike-detail-screen-shell { width: 100%; height: 100dvh; }
  html[data-design="next"] body.performer-surface .bike-detail-screen-head { min-height: 70px; padding-inline: 15px; }
  html[data-design="next"] body.performer-surface .bike-detail-screen-body { padding-inline: 14px; }
  html[data-design="next"] body.performer-surface .bike-detail-hero { min-height: 205px; padding-inline: 10px; }
  html[data-design="next"] body.performer-surface .bike-product-visual { width: 122%; margin-left: -16%; }
  html[data-design="next"] body.performer-surface .bike-detail-screen-actions { padding-inline: 14px; }

  html[data-design="next"] body.performer-surface .performer-route[data-route-panel="profile"] .performer-page-head { width: calc(100% - 32px); padding: 20px 0 8px; }
  html[data-design="next"] body.performer-surface .performer-route[data-route-panel="profile"] .performer-page-head h1 { font-size: 36px; }
  html[data-design="next"] body.performer-surface .profile-layout { width: calc(100% - 24px); max-width: 620px; gap: 11px; padding-bottom: calc(92px + env(safe-area-inset-bottom)); }
  html[data-design="next"] body.performer-surface .profile-hero,
  html[data-design="next"] body.performer-surface .profile-data { padding: 0; border: 0; background: transparent; box-shadow: none; }
  html[data-design="next"] body.performer-surface .performer-route[data-route-panel="profile"] { position: relative; }
  html[data-design="next"] body.performer-surface .profile-next-hero { position: static; display: grid; justify-items: center; padding: 12px 10px 18px; text-align: center; }
  html[data-design="next"] body.performer-surface .profile-bell { position: absolute; top: max(18px, env(safe-area-inset-top)); right: max(18px, env(safe-area-inset-right)); z-index: 8; width: 44px; height: 44px; display: grid; place-items: center; border: 0; background: transparent; color: #16181a; }
  html[data-design="next"] body.performer-surface .profile-bell .ops-icon { width: 29px; height: 29px; }
  html[data-design="next"] body.performer-surface .profile-next-avatar { width: 112px; height: 112px; display: grid; place-items: center; border-radius: 50%; background: #ffd400; color: #181400; font-size: 40px; font-weight: 800; letter-spacing: -.04em; }
  html[data-design="next"] body.performer-surface .profile-next-hero h2 { margin: 17px 0 0; color: #1b1d20; font-size: 25px; letter-spacing: -.025em; }
  html[data-design="next"] body.performer-surface .profile-next-hero > p { margin: 5px 0 0; color: #7c7b78; font-size: 16px; }
  html[data-design="next"] body.performer-surface .profile-next-meta { display: flex; align-items: center; gap: 10px; margin-top: 10px; color: #202225; font-size: 13px; }
  html[data-design="next"] body.performer-surface .profile-next-meta > i { width: 1px; height: 21px; background: #d8d6d2; }
  html[data-design="next"] body.performer-surface .profile-next-meta b { padding: 6px 10px; border-radius: 999px; background: #f0f0ed; color: #75736f; font-size: 12px; }
  html[data-design="next"] body.performer-surface .profile-next-meta b.active { background: #eaf6e6; color: #1f9a31; }
  html[data-design="next"] body.performer-surface .profile-next-slot,
  html[data-design="next"] body.performer-surface .profile-next-stats,
  html[data-design="next"] body.performer-surface .profile-settings,
  html[data-design="next"] body.performer-surface .profile-actions { border: 1px solid rgba(35,37,40,.035); border-radius: 20px; background: rgba(255,255,255,.9); box-shadow: 0 8px 22px rgba(34,36,39,.075); }
  html[data-design="next"] body.performer-surface .profile-next-slot { width: 100%; padding: 15px; color: inherit; font: inherit; text-align: left; cursor: pointer; }
  html[data-design="next"] body.performer-surface .profile-next-slot-main { display: grid; grid-template-columns: 46px minmax(0,1fr) 20px; align-items: center; gap: 12px; }
  html[data-design="next"] body.performer-surface .profile-next-slot-main > div { min-width: 0; display: grid; gap: 3px; }
  html[data-design="next"] body.performer-surface .profile-next-slot-main small { color: #242629; font-size: 12px; }
  html[data-design="next"] body.performer-surface .profile-next-slot-main b { overflow: hidden; color: #16191c; font-size: 19px; text-overflow: ellipsis; white-space: nowrap; }
  html[data-design="next"] body.performer-surface .profile-next-slot-main em { display: inline-flex; align-items: center; gap: 7px; color: #7a7874; font-size: 12px; font-style: normal; }
  html[data-design="next"] body.performer-surface .profile-next-slot-main em i { width: 8px; height: 8px; border-radius: 50%; background: #a09e99; }
  html[data-design="next"] body.performer-surface .profile-next-slot-main em.active { color: #1da33a; }
  html[data-design="next"] body.performer-surface .profile-next-slot-main em.active i { background: #18b43c; }
  html[data-design="next"] body.performer-surface .profile-next-slot-main > .ops-icon { width: 20px; height: 20px; }
  html[data-design="next"] body.performer-surface .profile-next-photo { min-height: 55px; display: grid; grid-template-columns: 42px minmax(0,1fr) 24px; align-items: center; gap: 12px; margin-top: 13px; padding-top: 13px; border-top: 1px solid #e7e5e1; }
  html[data-design="next"] body.performer-surface .profile-next-photo b { font-size: 14px; }
  html[data-design="next"] body.performer-surface .profile-next-photo > i { width: 27px; height: 27px; display: grid; place-items: center; border-radius: 50%; background: #19ad3a; color: #fff; }
  html[data-design="next"] body.performer-surface .profile-next-photo > i .ops-icon { width: 17px; height: 17px; }
  html[data-design="next"] body.performer-surface .profile-next-stats { margin-top: 11px; padding: 14px 15px 17px; }
  html[data-design="next"] body.performer-surface .profile-next-stats > small { color: #777570; font-size: 13px; }
  html[data-design="next"] body.performer-surface .profile-next-stats > div { display: grid; grid-template-columns: repeat(3,1fr); margin-top: 12px; }
  html[data-design="next"] body.performer-surface .profile-next-stats span { min-width: 0; display: grid; justify-items: center; gap: 2px; padding: 0 8px; border-left: 1px solid #e1dfdb; text-align: center; }
  html[data-design="next"] body.performer-surface .profile-next-stats span:first-child { border-left: 0; }
  html[data-design="next"] body.performer-surface .profile-next-stats b { color: #111c2d; font-size: 29px; line-height: 1; }
  html[data-design="next"] body.performer-surface .profile-next-stats b.blue { color: #136bd6; }
  html[data-design="next"] body.performer-surface .profile-next-stats em { color: #303236; font-size: 12px; font-style: normal; }
  html[data-design="next"] body.performer-surface .profile-settings { display: grid; padding: 0 15px; }
  html[data-design="next"] body.performer-surface .profile-setting-row { min-height: 66px; display: grid; grid-template-columns: 42px minmax(0,1fr) 22px; align-items: center; gap: 12px; padding: 8px 0; border: 0; border-top: 1px solid #e7e5e1; background: transparent; color: #181a1d; text-align: left; }
  html[data-design="next"] body.performer-surface .profile-setting-row:first-child { border-top: 0; }
  html[data-design="next"] body.performer-surface .profile-setting-row > b { overflow: hidden; font-size: 15px; text-overflow: ellipsis; white-space: nowrap; }
  html[data-design="next"] body.performer-surface .profile-setting-row small { color: #7c7a76; font-size: 11px; font-weight: 500; }
  html[data-design="next"] body.performer-surface .profile-setting-row > .ops-icon { width: 19px; height: 19px; }
  html[data-design="next"] body.performer-surface .profile-next-icon.green { background: #e5f7e4; color: #1b9f37; }
  html[data-design="next"] body.performer-surface .profile-next-icon.yellow { background: #fff4c8; color: #b18b00; }
  html[data-design="next"] body.performer-surface .profile-next-icon.blue { background: #e8f2ff; color: #1766d7; }
  html[data-design="next"] body.performer-surface .profile-actions { padding: 0; }
  html[data-design="next"] body.performer-surface .profile-next-logout { width: 100%; min-height: 62px; border: 0; border-radius: 20px; background: transparent; color: #ff493d; font: inherit; font-size: 17px; font-weight: 700; }
}

.profile-info-flow { display: grid; justify-items: start; gap: 16px; }
.profile-info-flow > div h3 { margin: 0 0 7px; font-size: 18px; }
.profile-info-flow > div p { margin: 0; color: var(--ops-muted); line-height: 1.55; }
.profile-info-facts { width: 100%; display: grid; border: 1px solid var(--ops-line-soft); border-radius: 14px; overflow: hidden; }
.profile-info-facts p { min-height: 48px; display: grid; grid-template-columns: minmax(100px,.7fr) minmax(0,1.3fr); align-items: center; gap: 12px; margin: 0; padding: 8px 12px; border-top: 1px solid var(--ops-line-soft); }
.profile-info-facts p:first-child { border-top: 0; }
.profile-info-facts span { color: var(--ops-muted); font-size: 12px; }
.profile-info-facts b { overflow-wrap: anywhere; text-align: right; }
.profile-info-flow > .ops-btn { width: 100%; }

@media (max-width: 900px) {
  html[data-design="next"][data-theme="dark"] body.performer-surface[data-performer-route="profile"] .performer-app,
  html[data-design="next"][data-theme="dark"] body.performer-surface[data-performer-route="profile"] .performer-route[data-route-panel="profile"] { background: #0b1219; color: #f4f6f8; }
  html[data-design="next"][data-theme="dark"] body.performer-surface[data-performer-route="profile"] .performer-page-head h1,
  html[data-design="next"][data-theme="dark"] body.performer-surface .profile-next-hero h2,
  html[data-design="next"][data-theme="dark"] body.performer-surface .profile-next-meta,
  html[data-design="next"][data-theme="dark"] body.performer-surface .profile-next-slot-main small,
  html[data-design="next"][data-theme="dark"] body.performer-surface .profile-next-slot-main b,
  html[data-design="next"][data-theme="dark"] body.performer-surface .profile-next-stats b,
  html[data-design="next"][data-theme="dark"] body.performer-surface .profile-next-stats em,
  html[data-design="next"][data-theme="dark"] body.performer-surface .profile-setting-row,
  html[data-design="next"][data-theme="dark"] body.performer-surface .profile-bell { color: #f4f6f8; }
  html[data-design="next"][data-theme="dark"] body.performer-surface .profile-next-hero > p,
  html[data-design="next"][data-theme="dark"] body.performer-surface .profile-next-slot-main em,
  html[data-design="next"][data-theme="dark"] body.performer-surface .profile-next-stats > small,
  html[data-design="next"][data-theme="dark"] body.performer-surface .profile-setting-row small { color: #9da9b5; }
  html[data-design="next"][data-theme="dark"] body.performer-surface .profile-next-slot,
  html[data-design="next"][data-theme="dark"] body.performer-surface .profile-next-stats,
  html[data-design="next"][data-theme="dark"] body.performer-surface .profile-settings,
  html[data-design="next"][data-theme="dark"] body.performer-surface .profile-actions { border-color: #263341; background: #131d27; box-shadow: 0 8px 22px rgba(0,0,0,.22); }
  html[data-design="next"][data-theme="dark"] body.performer-surface .profile-setting-row,
  html[data-design="next"][data-theme="dark"] body.performer-surface .profile-next-photo,
  html[data-design="next"][data-theme="dark"] body.performer-surface .profile-next-stats span { border-color: #2a3744; }
  html[data-design="next"][data-theme="dark"] body.performer-surface[data-performer-route="profile"] .performer-nav { border-top-color: #263341; background: rgba(10,17,24,.98); }
  html[data-design="next"][data-theme="dark"] body.performer-surface[data-performer-route="profile"] .performer-nav button { color: #9aa6b2; }
  html[data-design="next"][data-theme="dark"] body.performer-surface[data-performer-route="profile"] .performer-nav button.active { color: #ffd400; }
  html[data-design="next"][data-theme="dark"] body.performer-surface .profile-next-meta b { background: #202b36; color: #aab5c0; }
  html[data-design="next"][data-theme="dark"] body.performer-surface .profile-next-meta > i { background: #394654; }
}

html[data-design="next"][data-theme="dark"] body.performer-surface .bike-detail-screen-shell,
html[data-design="next"][data-theme="dark"] body.performer-surface .bike-detail-screen-head,
html[data-design="next"][data-theme="dark"] body.performer-surface .bike-detail-screen-actions { background: #0e1720; color: #f4f6f8; }
html[data-design="next"][data-theme="dark"] body.performer-surface .bike-detail-screen-head h1,
html[data-design="next"][data-theme="dark"] body.performer-surface .bike-detail-charge > strong,
html[data-design="next"][data-theme="dark"] body.performer-surface .bike-detail-accordion summary,
html[data-design="next"][data-theme="dark"] body.performer-surface .bike-detail-row b { color: #f4f6f8; }
html[data-design="next"][data-theme="dark"] body.performer-surface .bike-detail-round,
html[data-design="next"][data-theme="dark"] body.performer-surface .bike-detail-accordion,
html[data-design="next"][data-theme="dark"] body.performer-surface .bike-detail-screen-actions .ops-btn { border-color: #334250; background: #151f29; color: #f4f6f8; }
html[data-design="next"][data-theme="dark"] body.performer-surface .bike-detail-hero { background: linear-gradient(135deg,#1a242e,#111a23); }
html[data-design="next"][data-theme="dark"] body.performer-surface .bike-detail-accordion { border-color: #2a3744; background: #131d27; }
html[data-design="next"][data-theme="dark"] body.performer-surface .bike-detail-row,
html[data-design="next"][data-theme="dark"] body.performer-surface .bike-detail-screen-actions { border-color: #293643; }

/* Final mobile alignment safeguards. These intentionally live after all
   shared layout rules so the installed app cannot inherit desktop flex
   sizing from the classic profile. */
html[data-design="next"] body.performer-surface .bike-detail-visual {
  min-width: 0; min-height: 178px; display: flex; align-items: center; justify-content: center; overflow: hidden;
}
html[data-design="next"] body.performer-surface .bike-product-visual.bike-product-image {
  width: 100%; max-width: 100%; max-height: 205px; margin: 0; object-fit: contain; object-position: center center;
}
html[data-design="next"] body.performer-surface .bike-detail-statuses { display: flex; flex-wrap: wrap; gap: 7px; }
html[data-design="next"] body.performer-surface .bike-detail-pill.kind,
html[data-design="next"] body.performer-surface .bike-detail-pill.rental-state.free { border-color: #badf9f; background: #f0f8ec; color: #18852b; }
html[data-design="next"] body.performer-surface .bike-detail-pill.rental-state.danger { border-color: #ffb7ba; background: #fff1f2; color: #dc3540; }
html[data-design="next"] body.performer-surface .bike-quick-chip.kind,
html[data-design="next"] body.performer-surface .bike-quick-chip.rental-state.free { background: #eef8ef; color: #198b3f; }
html[data-design="next"] body.performer-surface .bike-quick-chip.rental-state.danger { background: #fff0f1; color: #d63f49; }

@media (max-width: 900px) {
  html[data-design="next"] body.performer-surface[data-performer-route="profile"] .profile-layout,
  html[data-design="next"] body.performer-surface[data-performer-route="profile"] .profile-data,
  html[data-design="next"] body.performer-surface[data-performer-route="profile"] .profile-settings,
  html[data-design="next"] body.performer-surface[data-performer-route="profile"] .profile-actions { width: 100%; min-width: 0; }
  html[data-design="next"] body.performer-surface[data-performer-route="profile"] .profile-settings { display: grid !important; align-items: stretch; justify-content: stretch; gap: 0; padding: 0 15px; }
  html[data-design="next"] body.performer-surface[data-performer-route="profile"] .profile-setting-row { width: 100%; min-width: 0; max-width: none; justify-self: stretch; }
  html[data-design="next"] body.performer-surface .bike-detail-visual { min-height: 158px; }
  html[data-design="next"] body.performer-surface .bike-product-visual.bike-product-image { width: 98%; max-height: 178px; margin: 0; }
}

/* Production duty-control composition: compact, non-stretching empty states. */
html[data-design="next"] body.admin-surface .duty-exchange-panel .ops-section-head {
  display: grid;
  grid-template-columns: minmax(260px,1fr) auto;
  align-items: start;
  gap: 14px;
}
html[data-design="next"] body.admin-surface .duty-exchange-controls {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}
html[data-design="next"] body.admin-surface .duty-exchange-controls > div {
  flex-wrap: nowrap;
  margin: 0;
}
html[data-design="next"] body.admin-surface .duty-exchange-layout {
  align-items: start;
  margin-top: 12px;
}
html[data-design="next"] body.admin-surface .duty-exchange-list {
  width: 100%;
  min-height: 176px;
  max-height: 430px;
  align-content: start;
}
html[data-design="next"] body.admin-surface .duty-exchange-list > .ops-empty {
  min-height: 176px;
  border: 1px dashed var(--ops-line-soft);
  border-radius: 10px;
  background: var(--ops-surface-2);
}
html[data-design="next"] body.admin-surface .duty-exchange-layout > aside {
  align-self: start;
  grid-auto-rows: auto;
}
html[data-design="next"] body.admin-surface .duty-ranking-list .ops-empty {
  min-height: 74px;
  padding: 14px;
}
html[data-design="next"] body.admin-surface .duty-exchange-layout > aside > section {
  min-height: 122px;
}

@media (max-width: 1380px) {
  html[data-design="next"] body.admin-surface .duty-exchange-panel .ops-section-head { grid-template-columns: 1fr; }
  html[data-design="next"] body.admin-surface .duty-exchange-controls { justify-content: flex-start; flex-wrap: wrap; }
}

@media (max-width: 760px) {
  html[data-design="next"] body.admin-surface .duty-exchange-controls { display: grid; justify-content: stretch; }
  html[data-design="next"] body.admin-surface .duty-exchange-controls > div { overflow-x: auto; }
  html[data-design="next"] body.admin-surface .duty-exchange-list > .ops-empty { min-height: 128px; }
}

/* Android overrides must win over every shared mobile rule above. */
html.android-native body.performer-surface .design-preview-toggle,
html.android-native body.performer-surface .install-help-link,
html.android-native body.performer-surface #ios-pwa-gate { display: none !important; }
html.android-native body.performer-surface .performer-app { min-height: 100%; height: 100%; }
html.android-native body.performer-surface .performer-nav { border-radius: 0; box-shadow: 0 -5px 22px rgba(31,42,51,.08); }

/* Dedicated installed Android runtime. It keeps the shared data layer while
   removing browser/preview affordances and using native app interaction. */
html.android-native,
html.android-native body {
  width: 100%; height: 100%; overflow: hidden; overscroll-behavior: none;
  -webkit-tap-highlight-color: transparent;
}
html.android-native body.performer-surface { font-family: Roboto, "Helvetica Neue", Arial, sans-serif; }
html.android-native body.performer-surface .design-preview-toggle,
html.android-native body.performer-surface .install-help-link,
html.android-native body.performer-surface #ios-pwa-gate { display: none !important; }
html.android-native body.performer-surface button,
html.android-native body.performer-surface a { touch-action: manipulation; }
html.android-native body.performer-surface img {
  -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; -webkit-user-drag: none;
}
html.android-native body.performer-surface .performer-app { min-height: 100%; height: 100%; }
html.android-native body.performer-surface .performer-nav {
  border-radius: 0; box-shadow: 0 -5px 22px rgba(31,42,51,.08);
}
html.android-native body.performer-surface .ops-btn:active,
html.android-native body.performer-surface .ops-icon-btn:active,
html.android-native body.performer-surface .performer-nav button:active { transform: scale(.97); }

@media (max-width: 390px) {
  html[data-design="next"] body.performer-surface .bike-detail-screen-actions { grid-template-columns: 1fr 1fr; }
  html[data-design="next"] body.performer-surface .bike-detail-screen-actions .ops-btn:first-child { grid-column: 1/-1; }
  html[data-design="next"] body.performer-surface .bike-detail-hero { grid-template-columns: 1.08fr .92fr; }
  html[data-design="next"] body.performer-surface .bike-detail-charge > strong { font-size: 56px; }
}
.design-preview-toggle::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 12%, transparent);
}
.design-preview-toggle:hover,
.design-preview-toggle:focus-visible { opacity: 1; }
.design-preview-toggle.active {
  border-color: rgba(255, 212, 0, .48);
  background: rgba(255, 212, 0, .08);
  color: var(--ops-yellow, #ffd400);
  opacity: 1;
}

html[data-design="next"] {
  --ops-bg: #090d12;
  --ops-bg-2: #0e141b;
  --ops-surface: #111820;
  --ops-surface-2: #151d26;
  --ops-surface-3: #1b2530;
  --ops-line: rgba(197, 211, 224, .15);
  --ops-line-soft: rgba(197, 211, 224, .085);
  --ops-text: #f5f7f9;
  --ops-muted: #8f9ba8;
  --ops-yellow: #ffd400;
  --ops-yellow-ink: #161300;
  --preview-panel-shadow: 0 18px 48px rgba(0, 0, 0, .25);
  --preview-soft-shadow: 0 10px 30px rgba(0, 0, 0, .16);
}
html[data-design="next"][data-theme="light"] {
  --ops-bg: #eef1f3;
  --ops-bg-2: #f4f6f7;
  --ops-surface: #ffffff;
  --ops-surface-2: #f7f8f9;
  --ops-surface-3: #edf0f2;
  --ops-line: rgba(32, 42, 51, .14);
  --ops-line-soft: rgba(32, 42, 51, .075);
  --ops-text: #17212a;
  --ops-muted: #6d7984;
  --preview-panel-shadow: 0 18px 48px rgba(33, 43, 52, .09);
  --preview-soft-shadow: 0 10px 30px rgba(33, 43, 52, .07);
}

/* Shared premium surfaces */
html[data-design="next"] body {
  background: var(--ops-bg);
  color: var(--ops-text);
}
html[data-design="next"] .ops-panel,
html[data-design="next"] .panel,
html[data-design="next"] .metric,
html[data-design="next"] .ops-auth-card {
  border-color: var(--ops-line-soft);
  border-radius: 20px;
  background: color-mix(in srgb, var(--ops-surface) 96%, transparent);
  box-shadow: var(--preview-soft-shadow);
}
html[data-design="next"] .ops-btn,
html[data-design="next"] .ops-input,
html[data-design="next"] input,
html[data-design="next"] select,
html[data-design="next"] textarea { border-radius: 12px; }
html[data-design="next"] .ops-btn.primary { box-shadow: 0 9px 24px rgba(255, 212, 0, .14); }

/* Admin shell */
html[data-design="next"] .admin-app { grid-template-columns: 238px minmax(0, 1fr); background: var(--ops-bg); }
html[data-design="next"] .admin-sidebar {
  margin: 10px 0 10px 10px;
  height: calc(100dvh - 20px);
  border: 1px solid var(--ops-line-soft);
  border-radius: 22px;
  background: color-mix(in srgb, var(--ops-surface) 97%, transparent);
  box-shadow: var(--preview-soft-shadow);
  overflow: hidden;
}
html[data-design="next"] .admin-brand { min-height: 78px; padding: 14px 16px; border-bottom-color: var(--ops-line-soft); }
html[data-design="next"] .admin-mark { border-radius: 14px; box-shadow: 0 9px 24px rgba(255, 212, 0, .17); }
html[data-design="next"] .admin-nav { padding: 8px; }
html[data-design="next"] .admin-nav-group { gap: 3px; }
html[data-design="next"] .admin-nav-group > span { padding: 13px 10px 6px; font-size: 9px; letter-spacing: .13em; }
html[data-design="next"] .admin-nav-group > button,
html[data-design="next"] .admin-map-subnav button { border-radius: 11px; }
html[data-design="next"] .admin-nav-group > button.active {
  border-color: rgba(255, 212, 0, .55);
  background: var(--ops-yellow);
  color: var(--ops-yellow-ink);
  box-shadow: 0 8px 22px rgba(255, 212, 0, .13);
}
html[data-design="next"] .admin-shell { min-width: 0; }
html[data-design="next"] .admin-topbar {
  min-height: 80px;
  margin: 10px 10px 0 12px;
  padding: 0 18px;
  border: 1px solid var(--ops-line-soft);
  border-radius: 20px;
  background: color-mix(in srgb, var(--ops-surface) 94%, transparent);
  box-shadow: var(--preview-soft-shadow);
  backdrop-filter: blur(20px);
}
html[data-design="next"] .admin-content { padding: 12px 10px 10px 12px; }
html[data-design="next"] .city-switch { border-radius: 12px; overflow: hidden; }
html[data-design="next"] .city-switch button { border-radius: 9px; }
html[data-design="next"] .admin-user { border-radius: 13px; }

/* Admin maps: same data and interactions, new visual hierarchy. */
html[data-design="next"] .command-map,
html[data-design="next"] .map-canvas {
  border: 1px solid var(--ops-line-soft);
  border-radius: 22px;
  background: #10161c;
  box-shadow: var(--preview-panel-shadow);
}
html[data-design="next"] .map-workspace { border-radius: 22px; background: var(--ops-surface); }
html[data-design="next"] .map-list-pane { border-right-color: var(--ops-line-soft); background: color-mix(in srgb, var(--ops-surface) 97%, transparent); }
html[data-design="next"] .map-list-controls { padding: 14px; }
html[data-design="next"] .map-list { padding: 8px; }
html[data-design="next"] .map-entity {
  min-height: 62px;
  margin-bottom: 4px;
  padding: 10px;
  border: 1px solid transparent;
  border-radius: 13px;
}
html[data-design="next"] .map-entity:hover { background: var(--ops-surface-2); }
html[data-design="next"] .map-entity.selected {
  border-color: rgba(255, 212, 0, .48);
  border-radius: 13px;
  background: rgba(255, 212, 0, .08);
}
html[data-design="next"] .map-inspector { padding: 18px; background: color-mix(in srgb, var(--ops-surface) 97%, transparent); }
html[data-design="next"] .map-overlay-bar {
  top: 14px;
  left: 14px;
  right: 14px;
  min-height: 56px;
  padding: 8px;
  border: 1px solid color-mix(in srgb, var(--ops-line) 90%, transparent);
  border-radius: 16px;
  background: color-mix(in srgb, var(--ops-surface) 88%, transparent);
  box-shadow: 0 12px 32px rgba(0, 0, 0, .18);
  backdrop-filter: blur(20px);
}
html[data-design="next"] .map-overlay-controls { gap: 5px; }
html[data-design="next"] .map-overlay-controls button {
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 0 12px;
  border-radius: 10px;
}
html[data-design="next"] .map-overlay-controls button b {
  min-width: 17px;
  padding: 2px 5px;
  border-radius: 999px;
  background: color-mix(in srgb, currentColor 9%, transparent);
  font-size: 9px;
  line-height: 1.25;
}
html[data-design="next"] .map-overlay-controls button.active {
  border-color: var(--ops-yellow);
  background: var(--ops-yellow);
  color: var(--ops-yellow-ink);
}
html[data-design="next"] .map-overlay-search .ops-input { min-height: 38px; background: color-mix(in srgb, var(--ops-bg-2) 90%, transparent); }
html[data-design="next"] .map-selection-popover { z-index: 45; }
html[data-design="next"] .map-selection-card {
  border-radius: 18px;
  background: color-mix(in srgb, var(--ops-surface) 94%, transparent);
  box-shadow: 0 20px 58px rgba(0, 0, 0, .31);
  backdrop-filter: blur(24px);
}
html[data-design="next"] .map-selection-badge.parking {
  border: 0;
  border-radius: 11px;
  background: var(--ops-yellow);
  color: var(--ops-yellow-ink);
}

/* MapLibre controls, common to admin and performer maps. */
html[data-design="next"] .ops-vector-map .maplibregl-ctrl-group {
  border: 1px solid rgba(151, 166, 181, .22);
  border-radius: 15px;
  background: color-mix(in srgb, var(--ops-surface) 90%, transparent);
  box-shadow: 0 12px 30px rgba(0, 0, 0, .22);
  overflow: hidden;
  backdrop-filter: blur(16px);
}
html[data-design="next"] .ops-vector-map .maplibregl-ctrl-group button { width: 40px; height: 40px; }
html[data-design="next"] .ops-vector-map .maplibregl-ctrl-attrib { border-radius: 9px; opacity: .72; }

/* Performer app / installed PWA */
html[data-design="next"] .performer-app { grid-template-rows: 78px minmax(0, 1fr) 70px; background: var(--ops-bg); }
html[data-design="next"] .performer-topbar {
  margin: 8px 10px 0;
  padding: 0 14px;
  border: 1px solid var(--ops-line-soft);
  border-radius: 19px;
  background: color-mix(in srgb, var(--ops-surface) 94%, transparent);
  box-shadow: var(--preview-soft-shadow);
  backdrop-filter: blur(18px);
}
html[data-design="next"] .worker-avatar { border-radius: 14px; box-shadow: 0 8px 22px rgba(255, 212, 0, .14); }
html[data-design="next"] .work-layout { gap: 10px; padding: 10px; }
html[data-design="next"] .task-rail,
html[data-design="next"] .bike-inspector { border-radius: 20px; overflow: hidden; }
html[data-design="next"] .work-map-shell {
  border: 1px solid var(--ops-line-soft);
  border-radius: 22px;
  box-shadow: var(--preview-panel-shadow);
  overflow: hidden;
}
html[data-design="next"] .map-status-strip {
  top: 13px;
  left: 13px;
  right: 13px;
  border: 1px solid var(--ops-line-soft);
  border-radius: 14px;
  background: color-mix(in srgb, var(--ops-surface) 88%, transparent);
  box-shadow: 0 10px 28px rgba(0, 0, 0, .18);
  backdrop-filter: blur(18px);
}
html[data-design="next"] .performer-bike-popover,
html[data-design="next"] .map-layer-panel { border-radius: 20px; box-shadow: 0 22px 60px rgba(0, 0, 0, .34); }
html[data-design="next"] .performer-nav {
  margin: 0 10px 8px;
  border: 1px solid var(--ops-line-soft);
  border-radius: 19px;
  background: color-mix(in srgb, var(--ops-surface) 95%, transparent);
  box-shadow: 0 12px 34px rgba(0, 0, 0, .21);
  overflow: hidden;
}
html[data-design="next"] .performer-nav button { margin: 5px; border-radius: 13px; }
html[data-design="next"] .performer-nav button.active { background: rgba(255, 212, 0, .1); }

/* Contractor cabinet */
html[data-design="next"] .layout { min-height: 100dvh; grid-template-columns: 238px minmax(0, 1fr); gap: 0; padding: 0; background: var(--ops-bg); }
html[data-design="next"] .nav {
  position: sticky;
  top: 10px;
  align-self: start;
  width: auto;
  height: calc(100dvh - 20px);
  margin: 10px 0 10px 10px;
  padding: 16px 12px;
  border: 1px solid var(--ops-line-soft);
  border-radius: 22px;
  background: var(--ops-surface);
  box-shadow: var(--preview-soft-shadow);
}
html[data-design="next"] .brand-stack { padding: 2px 4px 18px; }
html[data-design="next"] .brand-badge { border-radius: 14px; box-shadow: 0 9px 24px rgba(255, 212, 0, .16); }
html[data-design="next"] .nav-links a { border-radius: 12px; }
html[data-design="next"] .nav-links a.active { border-color: rgba(255, 212, 0, .52); background: var(--ops-yellow); color: var(--ops-yellow-ink); }
html[data-design="next"] .main { min-width: 0; width: auto; max-width: none; margin: 0; padding: 10px 10px 22px 12px; }
html[data-design="next"] .topbar {
  position: sticky;
  top: 10px;
  z-index: 30;
  min-height: 80px;
  margin: 0 0 12px;
  padding: 13px 18px;
  border: 1px solid var(--ops-line-soft);
  border-radius: 20px;
  background: color-mix(in srgb, var(--ops-surface) 93%, transparent);
  box-shadow: var(--preview-soft-shadow);
  backdrop-filter: blur(20px);
}
html[data-design="next"] .topbar-actions { display: flex; grid-template-columns: none; align-items: center; gap: 8px; width: auto; }
html[data-design="next"] .topbar-actions button { width: auto; border-radius: 12px; }
html[data-design="next"] .topbar-actions .design-preview-toggle { min-height: 28px; border-radius: 999px; }
html[data-design="next"] .tabs { border-radius: 16px; background: var(--ops-surface); box-shadow: var(--preview-soft-shadow); }
html[data-design="next"] .tabs button { border-radius: 11px; }
html[data-design="next"] .tabs button.active { background: var(--ops-yellow); color: var(--ops-yellow-ink); }
html[data-design="next"] .panel { padding: 20px; }
html[data-design="next"] table { border-radius: 14px; overflow: hidden; }

@media (max-width: 1100px) {
  html[data-design="next"] .admin-app { grid-template-columns: 210px minmax(0, 1fr); }
  html[data-design="next"] .map-workspace { grid-template-columns: 250px minmax(360px, 1fr); }
  html[data-design="next"] .layout { grid-template-columns: 210px minmax(0, 1fr); }
}

@media (max-width: 900px) {
  .design-preview-toggle { min-width: 30px; width: 30px; padding: 0; }
  .design-preview-toggle [data-design-preview-label] { display: none; }
  html[data-design="next"] .admin-app {
    grid-template-columns: 1fr;
    grid-template-rows: 68px minmax(0, 1fr) calc(70px + env(safe-area-inset-bottom));
  }
  html[data-design="next"] .admin-sidebar { margin: 0; height: 100dvh; border-radius: 0 22px 22px 0; }
  html[data-design="next"] .admin-topbar { min-height: 66px; margin: 6px 6px 0; padding: 0 10px; border-radius: 16px; }
  html[data-design="next"] .admin-content { padding: 6px; }
  html[data-design="next"] .command-map,
  html[data-design="next"] .map-canvas,
  html[data-design="next"] .map-workspace {
    grid-template-columns: 1fr;
    grid-template-rows: minmax(0, 1fr);
    border-radius: 17px;
  }
  html[data-design="next"] .map-overlay-bar { top: 8px; left: 8px; right: 8px; border-radius: 13px; }
  html[data-design="next"] .workspace-toolbar { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 8px; }
  html[data-design="next"] .workspace-toolbar-copy h2 { font-size: 16px; }
  html[data-design="next"] .toolbar-actions { flex-wrap: nowrap; gap: 5px; }
  html[data-design="next"] .toolbar-actions .ops-btn { min-height: 38px; padding: 0 9px; font-size: 9px; }

  html[data-design="next"] .performer-app { grid-template-rows: 70px minmax(0, 1fr) 72px; }
  html[data-design="next"] .performer-topbar { margin: 5px 6px 0; padding: 0 9px; border-radius: 15px; }
  html[data-design="next"] .work-layout { padding: 6px; gap: 0; }
  html[data-design="next"] .work-map-shell { border-radius: 17px; }
  html[data-design="next"] .performer-nav { margin: 0 6px 6px; border-radius: 16px; }
  html[data-design="next"] .performer-nav button { margin: 4px 2px; }

  html[data-design="next"] .layout { display: block; padding: 0; }
  html[data-design="next"] .nav { position: relative; top: auto; width: auto; height: auto; margin: 6px; border-radius: 17px; }
  html[data-design="next"] .main { padding: 0 6px 18px; }
  html[data-design="next"] .topbar { top: 6px; min-height: 68px; padding: 10px 12px; border-radius: 16px; }
}

@media (max-width: 560px) {
  html[data-design="next"] .worker-gps { display: none; }
  html[data-design="next"] .admin-command-bar { gap: 5px; }
  html[data-design="next"] .admin-command-bar .design-preview-toggle { order: 8; }
  html[data-design="next"] .map-selection-card { border-radius: 15px; }
  html[data-design="next"] .topbar-actions { gap: 5px; }
}

/* Atlas alignment: vNext follows the approved flat product mockups. */
html[data-design="next"] {
  --preview-panel-shadow: none;
  --preview-soft-shadow: none;
}
html[data-design="next"] .ops-panel,
html[data-design="next"] .panel,
html[data-design="next"] .metric,
html[data-design="next"] .ops-auth-card {
  border-color: var(--ops-line-soft);
  border-radius: 10px;
  box-shadow: none;
}
html[data-design="next"] .ops-btn,
html[data-design="next"] .ops-input,
html[data-design="next"] input,
html[data-design="next"] select,
html[data-design="next"] textarea { border-radius: 8px; }
html[data-design="next"] .ops-btn.primary { box-shadow: none; }
html[data-design="next"] .design-preview-toggle.active {
  border-color: var(--ops-line);
  background: transparent;
  color: var(--ops-muted);
  opacity: .5;
}

/* Compact route switch from the map mockup. */
html[data-design="next"] .map-workspace-toolbar {
  display: grid;
  grid-template-columns: minmax(170px,1fr) auto auto;
  align-items: center;
}
html[data-design="next"] .map-mode-switch {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--ops-line-soft);
  border-radius: 9px;
  background: var(--ops-surface);
}
html[data-design="next"] .map-mode-switch button {
  min-height: 34px;
  padding: 0 14px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--ops-muted);
  font: inherit;
  font-size: 10px;
  font-weight: 850;
  cursor: pointer;
}
html[data-design="next"] .map-mode-switch button.active {
  background: var(--ops-yellow);
  color: var(--ops-yellow-ink);
}

/* Performer map summary exists only in the experimental composition. */
.map-fleet-summary { display: none; }
html[data-design="next"] .map-fleet-summary {
  position: absolute;
  z-index: 24;
  top: 64px;
  left: 14px;
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 0 11px;
  border: 1px solid var(--ops-line-soft);
  border-radius: 9px;
  background: color-mix(in srgb,var(--ops-surface) 94%,transparent);
  color: var(--ops-muted);
  box-shadow: none;
  backdrop-filter: blur(14px);
  font-size: 9px;
}
html[data-design="next"] .map-fleet-summary b { color: var(--ops-text); font-size: 10px; }
html[data-design="next"] .map-fleet-summary i { width: 3px; height: 3px; border-radius: 50%; background: var(--ops-yellow); }

@media (min-width: 901px) {
  /* Admin: narrow flat navigation and one dominant operational canvas. */
  html[data-design="next"] .admin-app { grid-template-columns: 176px minmax(0,1fr); }
  html[data-design="next"] .admin-sidebar {
    margin: 0;
    height: 100dvh;
    border-width: 0 1px 0 0;
    border-radius: 0;
    box-shadow: none;
    background: var(--ops-surface);
  }
  html[data-design="next"] .admin-brand { min-height: 66px; padding: 11px 12px; }
  html[data-design="next"] .admin-mark { width: 38px; height: 38px; border-radius: 10px; box-shadow: none; }
  html[data-design="next"] .admin-brand b { font-size: 12px; }
  html[data-design="next"] .admin-brand small { font-size: 8px; }
  html[data-design="next"] .admin-nav { padding: 7px; }
  html[data-design="next"] .admin-nav-group > span { padding: 9px 8px 4px; font-size: 8px; }
  html[data-design="next"] .admin-nav-group > button,
  html[data-design="next"] .admin-map-subnav button {
    min-height: 34px;
    border-radius: 7px;
    font-size: 10px;
  }
  html[data-design="next"] .admin-nav-group > button.active {
    border-color: transparent;
    background: rgba(255,212,0,.14);
    color: var(--ops-text);
    box-shadow: inset 3px 0 var(--ops-yellow);
  }
  html[data-design="next"] .admin-topbar {
    min-height: 66px;
    margin: 0;
    padding: 0 16px;
    border-width: 0 0 1px;
    border-radius: 0;
    box-shadow: none;
    background: var(--ops-surface);
    backdrop-filter: none;
  }
  html[data-design="next"] .admin-title-block h1 { font-size: 20px; }
  html[data-design="next"] .admin-title-block p { margin-top: 2px; font-size: 9px; }
  html[data-design="next"] .admin-content { padding: 12px 16px 16px; }
  html[data-design="next"] .admin-user { border-radius: 8px; }

  html[data-design="next"] .map-workspace {
    position: relative;
    height: calc(100dvh - 226px);
    min-height: 540px;
    display: block;
    overflow: hidden;
    border-radius: 10px;
    background: var(--ops-surface);
  }
  html[data-design="next"] .map-workspace .map-canvas {
    width: 100%;
    height: 100%;
    min-height: 0;
    border: 0;
    border-radius: 10px;
    box-shadow: none;
  }
  html[data-design="next"] .map-list-pane {
    position: absolute;
    z-index: 42;
    top: 70px;
    bottom: 12px;
    left: 12px;
    width: min(292px,calc(100% - 24px));
    display: none;
    overflow: hidden;
    border: 1px solid var(--ops-line);
    border-radius: 9px;
    background: var(--ops-surface);
    box-shadow: 0 12px 30px rgba(0,0,0,.16);
  }
  html[data-design="next"] .map-list-pane.mobile-open { display: grid; }
  html[data-design="next"] .map-list-controls { padding: 9px; }
  html[data-design="next"] .map-entity { min-height: 52px; border-radius: 7px; }
  html[data-design="next"] .map-inspector {
    position: absolute;
    z-index: 41;
    top: 70px;
    right: 12px;
    bottom: 12px;
    width: 296px;
    padding: 14px;
    overflow: auto;
    border: 1px solid var(--ops-line);
    border-radius: 9px;
    background: var(--ops-surface);
    box-shadow: 0 12px 30px rgba(0,0,0,.16);
  }
  html[data-design="next"] .map-inspector:empty { display: none; }
  html[data-design="next"] .map-overlay-bar {
    top: 12px;
    left: 12px;
    right: 12px;
    min-height: 46px;
    padding: 5px;
    border-radius: 9px;
    box-shadow: none;
  }
  html[data-design="next"] .map-overlay-controls button { min-height: 32px; border-radius: 6px; padding: 0 9px; }
  html[data-design="next"] .map-selection-card { border-radius: 9px; box-shadow: 0 10px 26px rgba(0,0,0,.14); }
  html[data-design="next"] .parking-analytics-strip { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 7px; }
  html[data-design="next"] .parking-analytics-strip button,
  html[data-design="next"] .parking-analytics-strip > div { min-height: 60px; padding: 9px 11px; border-radius: 8px; }

  /* Contractor: same flat atlas proportions as the approved page set. */
  html[data-design="next"] .layout { grid-template-columns: 164px minmax(0,1fr); }
  html[data-design="next"] .nav {
    top: 0;
    height: 100dvh;
    margin: 0;
    padding: 14px 10px;
    border-width: 0 1px 0 0;
    border-radius: 0;
    box-shadow: none;
  }
  html[data-design="next"] .brand-stack { padding: 0 2px 16px; }
  html[data-design="next"] .brand-stack { min-height: 52px; border-radius: 0; background: transparent; box-shadow: none; }
  html[data-design="next"] .brand-badge { width: 38px; height: 38px; border-radius: 10px; box-shadow: none; }
  html[data-design="next"] .brand-title { font-size: 14px; }
  html[data-design="next"] .nav-links a { min-height: 38px; height: 38px; padding: 0 9px; border-radius: 7px; font-size: 11px; }
  html[data-design="next"] .nav-links .nav-icon { width: 18px; height: 18px; border-radius: 0; background: transparent; color: var(--ops-muted); }
  html[data-design="next"] .nav-links .nav-icon::before { content: attr(data-symbol); display: block; color: currentColor; font-size: 14px; font-weight: 700; }
  html[data-design="next"] .nav-links a.active {
    border-color: transparent;
    background: rgba(255,212,0,.14);
    color: var(--ops-text);
    box-shadow: inset 3px 0 var(--ops-yellow);
  }
  html[data-design="next"] .nav-links a.active .nav-icon { color: var(--ops-text); background: transparent; }
  html[data-design="next"] .main { padding: 0 16px 24px; gap: 10px; }
  html[data-design="next"] .topbar {
    position: relative;
    top: 0;
    min-height: 66px;
    margin: 0 -16px 0;
    padding: 0 16px;
    border-width: 0 0 1px;
    border-radius: 0;
    box-shadow: none;
    backdrop-filter: none;
  }
  html[data-design="next"] .topbar h1 { font-size: 22px; }
  html[data-design="next"] .topbar h1::before { display: none; }
  html[data-design="next"] .topbar .status { min-height: 32px; padding: 0 10px; font-size: 10px; }
  html[data-design="next"] .workspace-tabs {
    gap: 2px;
    padding: 0;
    border-bottom: 1px solid var(--ops-line-soft);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }
  html[data-design="next"] .workspace-tabs .tab-chip {
    min-height: 42px;
    padding: 0 15px;
    border-radius: 0;
    background: transparent;
    color: var(--ops-muted);
  }
  html[data-design="next"] .workspace-tabs .tab-chip.active {
    color: var(--ops-text);
    background: transparent;
    box-shadow: inset 0 -3px var(--ops-yellow);
  }
  html[data-design="next"] .panel { padding: 15px; }
  html[data-design="next"] .metric { min-height: 84px; padding: 14px; }
  html[data-design="next"] table { border-radius: 7px; }
}

@media (max-width: 900px) {
  /* Installed-app silhouette: no floating web cards around the viewport. */
  html[data-design="next"] .performer-app { grid-template-rows: 74px minmax(0,1fr) calc(68px + env(safe-area-inset-bottom)); }
  html[data-design="next"] .performer-topbar {
    margin: 0;
    padding: env(safe-area-inset-top) 12px 0;
    border-width: 0 0 1px;
    border-radius: 0;
    box-shadow: none;
    backdrop-filter: none;
  }
  html[data-design="next"] .work-layout { padding: 0; }
  html[data-design="next"] .work-map-shell { border: 0; border-radius: 0; box-shadow: none; }
  html[data-design="next"] .map-status-strip {
    top: 10px;
    left: 10px;
    right: auto;
    width: auto;
    max-width: calc(100% - 20px);
    min-height: 36px;
    padding: 5px 9px;
    border-radius: 9px;
    box-shadow: none;
  }
  html[data-design="next"] .map-status-strip > :last-child { display: none; }
  html[data-design="next"] .map-fleet-summary { top: 54px; left: 10px; }
  html[data-design="next"] .performer-nav {
    margin: 0;
    padding-bottom: env(safe-area-inset-bottom);
    border-width: 1px 0 0;
    border-radius: 0;
    box-shadow: none;
  }
  html[data-design="next"] .performer-nav button { margin: 0; border-radius: 0; }
  html[data-design="next"] .performer-bike-popover {
    width: min(340px,calc(100% - 24px));
    max-height: min(43dvh,420px);
  }
  html[data-design="next"] .performer-bike-card { border-radius: 10px; box-shadow: 0 10px 28px rgba(0,0,0,.18); }
  html[data-design="next"] .performer-bike-card header h2 { color: var(--ops-text); font-size: 20px; }
  html[data-design="next"] .performer-parking-popover-card { gap: 9px; padding: 12px; }
  html[data-design="next"] .performer-parking-title { min-width: 0; display: flex; align-items: center; gap: 9px; }
  html[data-design="next"] .performer-parking-title > div { min-width: 0; }
  html[data-design="next"] .performer-parking-title h2 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  html[data-design="next"] .performer-parking-mark { width: 36px; height: 36px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 9px; background: var(--ops-yellow); color: var(--ops-yellow-ink); font-size: 17px; font-weight: 950; }
  html[data-design="next"] .performer-parking-quick { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); overflow: hidden; border: 1px solid var(--ops-line-soft); border-radius: 8px; }
  html[data-design="next"] .performer-parking-quick > div { min-width: 0; padding: 8px; border-right: 1px solid var(--ops-line-soft); }
  html[data-design="next"] .performer-parking-quick > div:last-child { border-right: 0; }
  html[data-design="next"] .performer-parking-quick span,
  html[data-design="next"] .performer-parking-quick b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  html[data-design="next"] .performer-parking-quick span { color: var(--ops-muted); font-size: 8px; }
  html[data-design="next"] .performer-parking-quick b { margin-top: 4px; font-size: 14px; }
  html[data-design="next"] .performer-parking-quick b.low { color: var(--ops-red); }
  html[data-design="next"] .performer-parking-sla { padding: 8px 10px; border-left: 3px solid var(--ops-yellow); border-radius: 6px; background: rgba(255,212,0,.08); color: var(--ops-muted); font-size: 9px; }
  html[data-design="next"] .map-layer-panel { border-radius: 14px 14px 0 0; }

  html[data-design="next"] .layout { display: block; }
  html[data-design="next"] .nav { display: none; }
  html[data-design="next"] .main { padding: 0 8px 18px; }
  html[data-design="next"] .topbar { margin: 0 -8px; border-radius: 0; }
}

/* v4 scope: the admin shell stays exactly on the current production layout.
   Only its map canvas, markers and anchored cards participate in vNext. */
html[data-design="next"] body.admin-surface {
  --ops-bg: #080d14;
  --ops-bg-2: #0b121c;
  --ops-surface: #111a26;
  --ops-surface-2: #162130;
  --ops-surface-3: #1c2939;
  --ops-line: #273447;
  --ops-line-soft: rgba(153,174,201,.14);
  --ops-text: #f5f8fc;
  --ops-muted: #91a0b5;
  --ops-subtle: #6f7e92;
  --ops-radius-sm: 9px;
  --ops-radius: 14px;
  --ops-radius-lg: 18px;
  --ops-shadow: 0 20px 60px rgba(0,0,0,.28);
}
html[data-design="next"][data-theme="light"] body.admin-surface {
  --ops-bg: #eef1f4;
  --ops-bg-2: #f7f8f9;
  --ops-surface: #ffffff;
  --ops-surface-2: #f1f3f5;
  --ops-surface-3: #e6eaed;
  --ops-line: #cbd2d8;
  --ops-line-soft: rgba(45,58,70,.14);
  --ops-text: #1d252c;
  --ops-muted: #66727d;
  --ops-subtle: #89939c;
  --ops-shadow: 0 18px 48px rgba(27,38,48,.14);
}
html[data-design="next"] body.admin-surface .ops-panel,
html[data-design="next"] body.admin-surface .metric,
html[data-design="next"] body.admin-surface .ops-auth-card { border-radius: var(--ops-radius); box-shadow: none; }
html[data-design="next"] body.admin-surface .ops-btn,
html[data-design="next"] body.admin-surface .ops-input,
html[data-design="next"] body.admin-surface input,
html[data-design="next"] body.admin-surface select,
html[data-design="next"] body.admin-surface textarea { border-radius: var(--ops-radius-sm); }
html[data-design="next"] body.admin-surface .admin-app { grid-template-columns: 214px minmax(0,1fr); }
html[data-design="next"] body.admin-surface .admin-sidebar {
  margin: 0; height: auto; border-width: 0 1px 0 0; border-radius: 0; box-shadow: none; background: #0a111a;
}
html[data-design="next"][data-theme="light"] body.admin-surface .admin-sidebar { background: #f7f8f9; }
html[data-design="next"] body.admin-surface .admin-brand { min-height: 74px; padding: 0 15px; }
html[data-design="next"] body.admin-surface .admin-mark { width: 40px; height: 40px; border-radius: 10px; box-shadow: none; }
html[data-design="next"] body.admin-surface .admin-brand b { font-size: 14px; }
html[data-design="next"] body.admin-surface .admin-brand small { font-size: 10px; }
html[data-design="next"] body.admin-surface .admin-nav { padding: 13px 9px; }
html[data-design="next"] body.admin-surface .admin-nav-group > span { padding: 0 10px 6px; font-size: 9px; }
html[data-design="next"] body.admin-surface .admin-nav-group > button { min-height: 38px; border-radius: 8px; font-size: 12px; }
html[data-design="next"] body.admin-surface .admin-map-subnav button { min-height: 30px; border-radius: 7px; font-size: 10px; }
html[data-design="next"] body.admin-surface .admin-nav-group > button.active {
  border-color: rgba(255,212,0,.7); background: rgba(255,212,0,.07); color: var(--ops-yellow); box-shadow: none;
}
html[data-design="next"] body.admin-surface .admin-topbar {
  min-height: 74px; margin: 0; padding: 0 18px; border-width: 0 0 1px; border-radius: 0; box-shadow: none; background: rgba(8,13,20,.95); backdrop-filter: none;
}
html[data-design="next"][data-theme="light"] body.admin-surface .admin-topbar { background: rgba(238,241,244,.96); }
html[data-design="next"] body.admin-surface .admin-title-block h1 { font-size: 21px; }
html[data-design="next"] body.admin-surface .admin-title-block p { margin-top: 4px; font-size: 10px; }
html[data-design="next"] body.admin-surface .admin-content { padding: 12px; }
html[data-design="next"] body.admin-surface .admin-user { border-radius: 9px; }

/* Atlas map cards shared by the existing admin map. */
html[data-design="next"] body.admin-surface .map-selection-popover { width: min(430px,calc(100% - 28px)); }
html[data-design="next"] body.admin-surface .map-selection-card {
  display: grid; grid-template-columns: 1fr; align-items: stretch; gap: 12px; padding: 17px; border: 1px solid rgba(30,39,47,.13); border-radius: 16px; background: rgba(255,255,255,.97); color: #171b20; box-shadow: 0 18px 42px rgba(22,31,39,.18); backdrop-filter: blur(18px);
}
html[data-design="next"] body.admin-surface .map-selection-card::after {
  content: ''; position: absolute; left: 50%; bottom: -10px; width: 20px; height: 20px; transform: translateX(-50%) rotate(45deg); border-right: 1px solid rgba(30,39,47,.13); border-bottom: 1px solid rgba(30,39,47,.13); background: #fff;
}
html[data-design="next"] body.admin-surface .map-selection-close { top: 12px; right: 12px; z-index: 2; width: 30px; height: 30px; background: transparent; color: #242a30; font-size: 24px; }
html[data-design="next"] body.admin-surface .map-selection-title { padding-right: 34px; }
html[data-design="next"] body.admin-surface .map-selection-title strong { font-size: 18px; }
html[data-design="next"] body.admin-surface .map-selection-title small { margin-top: 4px; color: #747d85; font-size: 10px; }
html[data-design="next"] body.admin-surface .map-selection-badge.parking { width: 44px; height: 44px; border: 2px solid #ffd400; border-radius: 10px; background: #ffd400; color: #161300; font-size: 22px; }
html[data-design="next"] body.admin-surface .atlas-parking-line { margin: 0; color: #5e666e; font-size: 12px; }
html[data-design="next"] body.admin-surface .atlas-parking-line b { color: #171b20; }
html[data-design="next"] body.admin-surface .atlas-parking-line strong { color: #e0434c; }
html[data-design="next"] body.admin-surface .atlas-parking-line i { display: inline-block; width: 3px; height: 3px; margin: 0 6px 3px; border-radius: 50%; background: #a7adb2; }
html[data-design="next"] body.admin-surface .atlas-parking-sla { padding: 9px 11px; border-radius: 8px; background: #f2f5f7; color: #5f6972; font-size: 11px; }
html[data-design="next"] body.admin-surface .atlas-parking-card > .ops-btn { min-height: 42px; background: #ffd400; color: #171300; }
html[data-design="next"] body.admin-surface .atlas-bike-head { padding-right: 34px; }
html[data-design="next"] body.admin-surface .atlas-bike-card { overflow: visible; }
html[data-design="next"] body.admin-surface .atlas-bike-head strong { font-size: 26px; letter-spacing: -.03em; }
html[data-design="next"] body.admin-surface .atlas-bike-chips { display: flex; flex-wrap: wrap; gap: 7px; }
html[data-design="next"] body.admin-surface .atlas-bike-chips span { min-height: 29px; display: inline-flex; align-items: center; gap: 6px; padding: 0 10px; border-radius: 999px; background: #eef7ef; color: #198b3f; font-size: 11px; }
html[data-design="next"] body.admin-surface .atlas-bike-chips span.rental { background: #edf3ff; color: #2366ca; }
html[data-design="next"] body.admin-surface .atlas-bike-chips span.offline { background: #fff0f1; color: #d63f49; }
html[data-design="next"] body.admin-surface .atlas-bike-chips i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
html[data-design="next"] body.admin-surface .atlas-bike-facts { display: grid; gap: 9px; }
html[data-design="next"] body.admin-surface .atlas-bike-facts p { margin: 0; display: grid; grid-template-columns: 118px minmax(0,1fr); gap: 10px; font-size: 11px; }
html[data-design="next"] body.admin-surface .atlas-bike-facts span { color: #6f7880; }
html[data-design="next"] body.admin-surface .atlas-bike-facts b { overflow: hidden; text-overflow: ellipsis; color: #252b31; white-space: nowrap; }
html[data-design="next"] body.admin-surface .atlas-bike-actions { display: grid; grid-template-columns: 1.15fr .8fr 1fr; gap: 8px; }
html[data-design="next"] body.admin-surface .atlas-bike-actions .ops-btn { min-height: 40px; border-color: #313940; background: #fff; color: #1a2025; text-decoration: none; font-size: 11px; }
html[data-design="next"] body.admin-surface .atlas-bike-actions .ops-btn.primary { border-color: #ffd400; background: #ffd400; color: #171300; }

/* Mobile atlas: installed-app silhouette and exact compact map language. */
@media (max-width: 900px) {
  html[data-design="next"] body.performer-surface { background: var(--ops-surface); }
  html[data-design="next"] body.performer-surface .performer-app { grid-template-rows: calc(74px + env(safe-area-inset-top)) minmax(0,1fr) calc(76px + env(safe-area-inset-bottom)); }
  html[data-design="next"] body.performer-surface .performer-topbar {
    min-height: 74px; padding: env(safe-area-inset-top) 16px 0; border: 0; border-bottom: 1px solid var(--ops-line-soft); background: color-mix(in srgb,var(--ops-surface) 98%,transparent);
  }
  html[data-design="next"] body.performer-surface .worker-avatar,
  html[data-design="next"] body.performer-surface #worker-refresh,
  html[data-design="next"] body.performer-surface .worker-gps { display: none; }
  html[data-design="next"] body.performer-surface .worker-identity { gap: 0; }
  html[data-design="next"] body.performer-surface .worker-copy { gap: 3px; }
  html[data-design="next"] body.performer-surface .worker-copy b { max-width: 185px; color: var(--ops-text); font-size: 18px; line-height: 1.1; }
  html[data-design="next"] body.performer-surface .worker-copy small { max-width: 185px; font-size: 12px; }
  html[data-design="next"] body.performer-surface .worker-live-cluster { gap: 6px; }
  html[data-design="next"] body.performer-surface .worker-live-cluster .ops-status { max-width: 170px; min-height: 31px; padding: 0 10px; border: 0; background: color-mix(in srgb,var(--ops-green) 10%,transparent); color: var(--ops-green); font-size: 10px; white-space: nowrap; }
  html[data-design="next"] body.performer-surface .design-preview-toggle {
    position: fixed; z-index: 120; top: max(5px,env(safe-area-inset-top)); right: 5px; width: 9px; min-width: 9px; height: 9px; min-height: 9px; padding: 0; border: 0; background: var(--ops-yellow); opacity: .18;
  }
  html[data-design="next"] body.performer-surface .design-preview-toggle::before { width: 4px; height: 4px; box-shadow: none; }
  html[data-design="next"] body.performer-surface .map-status-strip { display: none; }
  html[data-design="next"] body.performer-surface .map-fleet-summary {
    top: 16px; left: 16px; min-height: 44px; gap: 7px; padding: 0 13px; border: 1px solid rgba(30,40,48,.1); border-radius: 12px; background: rgba(255,255,255,.96); color: #4c545b; box-shadow: 0 8px 22px rgba(31,42,51,.15); backdrop-filter: blur(14px); font-size: 11px;
  }
  html[data-design="next"] body.performer-surface .map-fleet-summary .map-summary-bike { width: 22px; height: 22px; fill: none; stroke: #171b20; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
  html[data-design="next"] body.performer-surface .map-fleet-summary b { color: #171b20; font-size: 15px; }
  html[data-design="next"] body.performer-surface .map-fleet-summary b.low { width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; background: #ef4d55; color: #fff; font-size: 12px; }
  html[data-design="next"] body.performer-surface .map-fleet-summary i { background: #a8afb5; }
  html[data-design="next"] body.performer-surface .map-fleet-summary small { display: none; }
  html[data-design="next"] body.performer-surface .map-controls { right: 15px; bottom: 18px; gap: 8px; }
  html[data-design="next"] body.performer-surface .map-controls .ops-icon-btn { width: 46px; min-height: 46px; border-color: rgba(30,40,48,.1); border-radius: 50%; background: rgba(255,255,255,.96); color: #171b20; box-shadow: 0 8px 22px rgba(31,42,51,.16); }
  html[data-design="next"] body.performer-surface #map-settings { width: 62px; min-height: 62px; }
  html[data-design="next"] body.performer-surface #map-settings .ops-icon { width: 26px; height: 26px; }
  html[data-design="next"] body.performer-surface #map-fit { display: none; }
  html[data-design="next"] body.performer-surface .performer-nav {
    min-height: 76px; margin: 0; padding: 0 2px env(safe-area-inset-bottom); border-width: 1px 0 0; border-radius: 0; background: color-mix(in srgb,var(--ops-surface) 98%,transparent); box-shadow: 0 -5px 20px rgba(31,42,51,.07);
  }
  html[data-design="next"] body.performer-surface .performer-nav button { min-height: 72px; margin: 0; gap: 5px; border-radius: 0; background: transparent; color: var(--ops-muted); font-size: 10px; font-weight: 600; }
  html[data-design="next"] body.performer-surface .performer-nav button.active { position: relative; color: var(--ops-yellow); background: transparent; }
  html[data-design="next"] body.performer-surface .performer-nav button.active::after { content: ''; position: absolute; left: 31%; right: 31%; bottom: 5px; height: 3px; border-radius: 999px; background: var(--ops-yellow); }
  html[data-design="next"] body.performer-surface .performer-nav .ops-icon { width: 25px; height: 25px; stroke-width: 1.7; }
  html[data-design="next"] body.performer-surface .performer-bike-popover { width: min(360px,calc(100% - 28px)); max-height: min(62dvh,520px); overflow: visible; }
  html[data-design="next"] body.performer-surface .performer-charger-popover-card { width: 100%; max-width: 100%; overflow: hidden; }
  html[data-design="next"] body.performer-surface .performer-charger-popover-card header h2 { max-width: 100%; font-size: 18px; line-height: 1.12; overflow-wrap: anywhere; white-space: normal; }
  html[data-design="next"] body.performer-surface .performer-charger-popover-card .performer-parking-title small { white-space: nowrap; }
  html[data-design="next"] body.performer-surface .performer-bike-card {
    position: relative; gap: 12px; padding: 16px; border: 1px solid rgba(30,40,48,.12); border-radius: 16px; background: rgba(255,255,255,.97); color: #171b20; box-shadow: 0 16px 38px rgba(31,42,51,.2); backdrop-filter: blur(18px);
  }
  html[data-design="next"] body.performer-surface .performer-bike-card::after { content: ''; position: absolute; left: 50%; bottom: -9px; width: 18px; height: 18px; transform: translateX(-50%) rotate(45deg); border-right: 1px solid rgba(30,40,48,.12); border-bottom: 1px solid rgba(30,40,48,.12); background: #fff; }
  html[data-design="next"] body.performer-surface .performer-bike-card header { position: relative; z-index: 1; padding-right: 4px; }
  html[data-design="next"] body.performer-surface .performer-bike-card header h2 { margin: 0; color: #171b20; font-size: 25px; letter-spacing: -.025em; }
  html[data-design="next"] body.performer-surface .performer-bike-card .ops-icon-btn { width: 34px; min-height: 34px; border: 0; background: transparent; color: #252b31; }
  html[data-design="next"] body.performer-surface .performer-bike-quick-loading { min-height: 56px; display: grid; place-items: center; color: #7b838a; font-size: 10px; }
  html[data-design="next"] body.performer-surface .performer-bike-quick-chips { display: flex; flex-wrap: wrap; gap: 7px; }
  html[data-design="next"] body.performer-surface .bike-quick-chip { min-height: 29px; display: inline-flex; align-items: center; gap: 6px; padding: 0 10px; border-radius: 999px; background: #eef8ef; color: #198b3f; font-size: 11px; }
  html[data-design="next"] body.performer-surface .bike-quick-chip .ops-icon { width: 16px; height: 16px; }
  html[data-design="next"] body.performer-surface .bike-quick-chip i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
  html[data-design="next"] body.performer-surface .bike-quick-chip.offline { background: #fff0f1; color: #d63f49; }
  html[data-design="next"] body.performer-surface .bike-quick-chip.rental { background: #edf3ff; color: #2366ca; }
  html[data-design="next"] body.performer-surface .performer-bike-quick-facts { display: grid; gap: 9px; }
  html[data-design="next"] body.performer-surface .performer-bike-quick-facts p { margin: 0; display: grid; grid-template-columns: 20px auto minmax(0,1fr); align-items: center; gap: 7px; color: #252b31; font-size: 11px; }
  html[data-design="next"] body.performer-surface .performer-bike-quick-facts .ops-icon { width: 18px; height: 18px; }
  html[data-design="next"] body.performer-surface .performer-bike-quick-facts span { color: #6f7880; }
  html[data-design="next"] body.performer-surface .performer-bike-quick-facts b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  html[data-design="next"] body.performer-surface .performer-bike-quick-facts p.tags { grid-template-columns: 20px minmax(0,1fr); }
  html[data-design="next"] body.performer-surface .performer-bike-quick-facts p.tags span { display: flex; gap: 5px; flex-wrap: wrap; }
  html[data-design="next"] body.performer-surface .performer-bike-quick-facts p.tags i { padding: 4px 7px; border-radius: 999px; background: #fff0f1; color: #c83943; font-style: normal; }
  html[data-design="next"] body.performer-surface .performer-bike-card footer { position: relative; z-index: 1; display: grid; grid-template-columns: 1.05fr .8fr 1fr; gap: 7px; }
  html[data-design="next"] body.performer-surface .performer-bike-card footer .ops-btn { min-height: 40px; min-width: 0; padding: 0 7px; border-color: #333b42; border-radius: 9px; background: #fff; color: #1b2126; font-size: 10px; }
  html[data-design="next"] body.performer-surface .performer-bike-card footer .ops-btn.primary { border-color: #ffd400; background: #ffd400; color: #171300; }
  html[data-design="next"] body.performer-surface .performer-bike-card footer .ops-icon { width: 15px; height: 15px; }
  html[data-design="next"] body.performer-surface .performer-bike-card.expanded { overflow: auto; max-height: 58dvh; }
  html[data-design="next"] body.performer-surface .performer-bike-card.expanded footer { position: sticky; bottom: 0; padding-top: 8px; background: #fff; }
  html[data-design="next"] body.performer-surface .performer-parking-popover-card { width: min(306px,100%); margin-inline: auto; padding: 14px; }
  html[data-design="next"] body.performer-surface .performer-parking-title { gap: 10px; }
  html[data-design="next"] body.performer-surface .performer-parking-title h2 { margin: 0; font-size: 17px; }
  html[data-design="next"] body.performer-surface .performer-parking-title small { display: block; margin-top: 3px; overflow: hidden; color: #747d85; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
  html[data-design="next"] body.performer-surface .performer-parking-mark { width: 42px; height: 42px; border: 2px solid #ffd400; border-radius: 10px; background: #ffd400; color: #171300; font-size: 21px; }
  html[data-design="next"] body.performer-surface .performer-parking-line { margin: 0; color: #626b73; font-size: 11px; }
  html[data-design="next"] body.performer-surface .performer-parking-line b { color: #171b20; }
  html[data-design="next"] body.performer-surface .performer-parking-line strong { color: #e1434d; }
  html[data-design="next"] body.performer-surface .performer-parking-line i { display: inline-block; width: 3px; height: 3px; margin: 0 5px 3px; border-radius: 50%; background: #a9afb4; }
  html[data-design="next"] body.performer-surface .performer-parking-sla { display: flex; align-items: center; gap: 7px; padding: 0; border: 0; background: transparent; color: #5f6972; font-size: 10px; }
  html[data-design="next"] body.performer-surface .performer-parking-sla .ops-icon { width: 18px; height: 18px; }
  html[data-design="next"] body.performer-surface .performer-parking-popover-card footer { grid-template-columns: 1fr; }
  html[data-design="next"] body.performer-surface .performer-parking-popover-card footer .ops-btn { min-height: 42px; }

  html[data-design="next"] body.performer-surface .performer-route:not([data-route-panel="work"]) { background: var(--ops-bg-2); }
  html[data-design="next"] body.performer-surface .performer-page-head { width: min(100% - 32px,620px); padding: 24px 0 16px; }
  html[data-design="next"] body.performer-surface .performer-page-head .ops-kicker,
  html[data-design="next"] body.performer-surface .performer-page-head p { display: none; }
  html[data-design="next"] body.performer-surface .performer-page-head h1 { margin: 0; font-size: 38px; letter-spacing: -.045em; }
  html[data-design="next"] body.performer-surface .inwork-layout,
  html[data-design="next"] body.performer-surface .shift-layout,
  html[data-design="next"] body.performer-surface .results-grid,
  html[data-design="next"] body.performer-surface .profile-layout { width: min(100% - 24px,620px); gap: 12px; }
  html[data-design="next"] body.performer-surface .inwork-card,
  html[data-design="next"] body.performer-surface .shift-card,
  html[data-design="next"] body.performer-surface .schedule-panel,
  html[data-design="next"] body.performer-surface .result-focus,
  html[data-design="next"] body.performer-surface .result-history,
  html[data-design="next"] body.performer-surface .profile-hero,
  html[data-design="next"] body.performer-surface .profile-data,
  html[data-design="next"] body.performer-surface .profile-settings { border-radius: 16px; background: var(--ops-surface); box-shadow: 0 7px 20px rgba(31,42,51,.08); }
}

/* Keep the mockup profile cards ahead of the generic vNext page rules above. */
@media (max-width: 900px) {
  html[data-design="next"] body.performer-surface[data-performer-route="profile"] .performer-app { grid-template-rows: minmax(0,1fr) calc(76px + env(safe-area-inset-bottom)); background: #faf9f6; }
  html[data-design="next"] body.performer-surface[data-performer-route="profile"] .performer-route[data-route-panel="profile"] { grid-row: 1; min-height: 0; color: #181a1d; }
  html[data-design="next"] body.performer-surface[data-performer-route="profile"] .performer-nav { grid-row: 2; border-top-color: #e6e4df; background: rgba(255,255,255,.98); color: #5e5d5a; }
  html[data-design="next"] body.performer-surface[data-performer-route="profile"] .performer-nav button { color: #575b5e; }
  html[data-design="next"] body.performer-surface[data-performer-route="profile"] .performer-nav button.active { color: #e6bc00; }
  html[data-design="next"] body.performer-surface .profile-layout { width: calc(100% - 24px); max-width: 620px; gap: 11px; }
  html[data-design="next"] body.performer-surface .profile-hero,
  html[data-design="next"] body.performer-surface .profile-data { padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
  html[data-design="next"] body.performer-surface .profile-settings,
  html[data-design="next"] body.performer-surface .profile-actions { border-radius: 20px; background: rgba(255,255,255,.9); box-shadow: 0 8px 22px rgba(34,36,39,.075); }
}

/* Must remain last: prevents older mobile atlas rules from re-applying the
   oversized negative image margin and desktop profile flex widths. */
html[data-design="next"] body.performer-surface .bike-detail-visual { min-width: 0; min-height: 178px; display: flex; align-items: center; justify-content: center; overflow: hidden; }
html[data-design="next"] body.performer-surface .bike-product-visual.bike-product-image { width: 100%; max-width: 100%; max-height: 205px; margin: 0; object-fit: contain; object-position: center center; }
html[data-design="next"] body.performer-surface .bike-detail-visual,
html[data-design="next"] body.performer-surface .bike-product-image { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
html[data-design="next"] body.performer-surface .bike-product-image { pointer-events: none; -webkit-user-drag: none; }
html[data-design="next"] body.performer-surface .bike-detail-statuses { display: flex; flex-wrap: wrap; gap: 7px; }
html[data-design="next"] body.performer-surface .bike-detail-pill.kind,
html[data-design="next"] body.performer-surface .bike-detail-pill.rental-state.free { border-color: #badf9f; background: #f0f8ec; color: #18852b; }
html[data-design="next"] body.performer-surface .bike-detail-pill.rental-state.danger { border-color: #ffb7ba; background: #fff1f2; color: #dc3540; }
html[data-design="next"] body.performer-surface .bike-quick-chip.kind,
html[data-design="next"] body.performer-surface .bike-quick-chip.rental-state.free { background: #eef8ef; color: #198b3f; }
html[data-design="next"] body.performer-surface .bike-quick-chip.rental-state.danger { background: #fff0f1; color: #d63f49; }

@media (max-width: 900px) {
  html[data-design="next"] body.performer-surface[data-performer-route="profile"] .profile-layout { width: calc(100% - 24px); min-width: 0; }
  html[data-design="next"] body.performer-surface[data-performer-route="profile"] .profile-data,
  html[data-design="next"] body.performer-surface[data-performer-route="profile"] .profile-settings,
  html[data-design="next"] body.performer-surface[data-performer-route="profile"] .profile-actions { width: 100%; min-width: 0; }
  html[data-design="next"] body.performer-surface[data-performer-route="profile"] .profile-settings { display: grid !important; align-items: stretch; justify-content: stretch; gap: 0; padding: 0 15px; }
  html[data-design="next"] body.performer-surface[data-performer-route="profile"] .profile-setting-row { width: 100%; min-width: 0; max-width: none; justify-self: stretch; }
  html[data-design="next"] body.performer-surface .bike-detail-visual { min-height: 158px; }
  html[data-design="next"] body.performer-surface .bike-product-visual.bike-product-image { width: 98%; max-height: 178px; margin: 0; }
}