.pm-stage { min-height: 100dvh; display: grid; place-items: center; position: relative; overflow: hidden; padding: 28px 30px; isolation: isolate; background: radial-gradient(circle at 45% 20%, #fff 0, #f1f3f7 35%, #dde2ea 100%); }
.pm-stage::before, .pm-stage::after { content: ""; position: absolute; border-radius: 999px; filter: blur(2px); opacity: .8; z-index: -2; }
.pm-stage::before { width: 36vw; height: 36vw; min-width: 430px; min-height: 430px; left: -10vw; bottom: -19vw; border: 1px solid rgba(23,70,176,.14); box-shadow: inset 0 0 90px rgba(23,70,176,.08); }
.pm-stage::after { width: 22vw; height: 22vw; min-width: 300px; min-height: 300px; right: -8vw; top: -8vw; background: radial-gradient(circle, rgba(243,58,53,.12), rgba(243,58,53,0) 68%); }
.pm-stage__ambient { position: absolute; width: 620px; height: 620px; background: url('/src/assets/mobile-generated/padel-motion-orbit-v1.png') center/contain no-repeat; opacity: .055; transform: rotate(-22deg); z-index: -1; }
.pm-device { width: 414px; height: min(868px, calc(100dvh - 56px)); position: relative; padding: 12px; border-radius: 61px; background: linear-gradient(135deg,#565961 0,#111216 18%,#050609 50%,#2f3238 82%,#777a81 100%); box-shadow: 0 52px 120px rgba(6,14,31,.3), 0 9px 24px rgba(6,14,31,.2), inset 0 0 0 1px rgba(255,255,255,.24), inset 0 0 0 3px rgba(0,0,0,.7); }
.pm-device::before { content:""; position:absolute; inset:5px; border:1px solid rgba(255,255,255,.12); border-radius:56px; pointer-events:none; }
.pm-device__action,.pm-device__volume { position:absolute; left:-4px; z-index:-1; width:5px; border-radius:4px 0 0 4px; background:linear-gradient(90deg,#15161a,#5d6067); box-shadow:inset 0 1px rgba(255,255,255,.25); }
.pm-device__action { top:108px; height:31px; }
.pm-device__volume { height:54px; }.pm-device__volume--up{top:165px}.pm-device__volume--down{top:231px}
.pm-phone { --pm-bottom-clearance: 112px; width: 100%; height: 100%; max-height: none; position: relative; overflow: hidden; border: 1px solid rgba(255,255,255,.3); border-radius: 49px; background: var(--pm-canvas); box-shadow: inset 0 0 0 1px rgba(6,17,38,.16), inset 0 0 18px rgba(6,17,38,.05); }
.pm-phone--focused { --pm-bottom-clearance: 104px; }
.pm-phone--immersive { --pm-bottom-clearance: 34px; }
.pm-status { position: absolute; inset: 0 0 auto 0; z-index: 40; height: 46px; padding: 13px 22px 0; display: grid; grid-template-columns: 1fr auto 1fr; align-items: start; color: var(--pm-ink); font-size: 12px; font-weight: 750; letter-spacing: -.2px; pointer-events: none; }
.pm-dynamic-island { width: 106px; height: 28px; margin-top: -7px; border-radius: 20px; background: #02050a; box-shadow: inset 0 -1px 1px rgba(255,255,255,.16); }
.pm-status__system { justify-self: end; display: flex; align-items: center; gap: 4px; }
.pm-stage--sport .pm-status { color: white; }
.pm-screen { position: absolute; inset: 0; background: var(--pm-canvas); overflow: hidden; }
.pm-screen--sport { background: var(--pm-dark); color: white; }
.pm-scroll { position: absolute; inset: 46px 0 0; overflow-x: hidden; overflow-y: auto; overscroll-behavior-y: contain; scrollbar-width: none; scroll-padding-bottom: calc(var(--pm-bottom-clearance) + var(--safe-bottom)); padding: 0 18px calc(var(--pm-bottom-clearance) + var(--safe-bottom)); touch-action: pan-y; -webkit-overflow-scrolling: touch; }
.pm-scroll::-webkit-scrollbar { display: none; }
.pm-tabbar { position: absolute; z-index: 35; left: 9px; right: 9px; bottom: 8px; height: 68px; padding: 6px 5px 10px; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); background: rgba(255,255,255,.84); backdrop-filter: blur(24px) saturate(1.4); -webkit-backdrop-filter: blur(24px) saturate(1.4); border: 1px solid rgba(255,255,255,.76); border-radius: 23px 23px 31px 31px; box-shadow: 0 12px 32px rgba(6,17,38,.14), inset 0 1px rgba(255,255,255,.8); }
.pm-screen--sport + .pm-tabbar { color: white; background: rgba(9,25,52,.85); border-color: rgba(255,255,255,.1); }
.pm-tab { min-width: 0; min-height: 50px; display: grid; place-content: center; justify-items: center; gap: 3px; padding: 2px; background: transparent; color: #858c99; border-radius: 16px; transition: color var(--pm-fast), transform var(--pm-fast), background var(--pm-fast); }
.pm-tab small { max-width: 100%; overflow: hidden; text-overflow: ellipsis; font-size: 9.5px; font-weight: 650; white-space: nowrap; }
.pm-tab__icon { position: relative; padding: 3px 10px; border-radius: 12px; }
.pm-tab.is-active { color: var(--pm-blue); }
.pm-tab.is-active .pm-tab__icon { background: var(--pm-blue-soft); }
.pm-screen--sport + .pm-tabbar .pm-tab.is-active { color: #fff; }
.pm-screen--sport + .pm-tabbar .pm-tab.is-active .pm-tab__icon { background: rgba(255,255,255,.13); }
.pm-tab:active { transform: scale(.92); }
.pm-home-indicator { position: absolute; z-index: 50; width: 122px; height: 4px; bottom: 3px; left: 50%; transform: translateX(-50%); border-radius: 8px; background: rgba(6,17,38,.78); pointer-events: none; }
.pm-screen--sport ~ .pm-home-indicator { background: rgba(255,255,255,.8); }
.pm-lens { position: absolute; left: calc(50% + 240px); top: 50%; transform: translateY(-50%); width: 285px; padding: 20px; border: 1px solid rgba(255,255,255,.62); border-radius: 24px; background: rgba(255,255,255,.64); backdrop-filter: blur(28px); box-shadow: var(--pm-shadow-card); }
.pm-lens__head { display: flex; align-items: center; gap: 10px; padding-bottom: 16px; border-bottom: 1px solid var(--pm-line); }
.pm-lens__head > span { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 12px; color: var(--pm-blue); background: var(--pm-blue-soft); }
.pm-lens__head div { min-width: 0; display: grid; gap: 3px; }
.pm-lens__head small, .pm-demo-signature small { font-size: 9px; font-weight: 800; letter-spacing: 1.2px; color: var(--pm-blue); }
.pm-lens__head strong { overflow: hidden; text-overflow: ellipsis; font-size: 13px; white-space: nowrap; }
.pm-lens ol { list-style: none; counter-reset: none; display: grid; gap: 9px; margin: 16px 0; padding: 0; }
.pm-lens li { display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--pm-ink-2); }
.pm-lens li b { display: grid; place-items: center; width: 23px; height: 23px; border-radius: 50%; color: white; background: var(--pm-ink); font-size: 10px; }
.pm-lens__contract { display: grid; gap: 8px; padding-top: 14px; border-top: 1px solid var(--pm-line); }
.pm-lens__contract p { display: grid; grid-template-columns: 87px 1fr; gap: 6px; align-items: start; font-size: 10px; }
.pm-lens__contract span { display: flex; align-items: center; gap: 5px; color: var(--pm-muted); }
.pm-lens__contract strong { font-size: 10px; line-height: 1.35; }
.pm-route-rail { position: absolute; right: calc(50% + 240px); top: 50%; width: 285px; max-height: min(790px,calc(100dvh - 62px)); display: grid; grid-template-rows: auto auto auto minmax(0,1fr) auto; gap: 14px; overflow: hidden; transform: translateY(-50%); padding: 20px; border: 1px solid rgba(255,255,255,.68); border-radius: 25px; background: rgba(255,255,255,.68); backdrop-filter: blur(28px) saturate(1.18); box-shadow: var(--pm-shadow-card); }
.pm-route-rail__head { display: grid; gap: 4px; padding-bottom: 14px; border-bottom: 1px solid var(--pm-line); }
.pm-route-rail__head small { color: var(--pm-blue); font-size: 8px; font-weight: 850; letter-spacing: 1.35px; }
.pm-route-rail__head strong { overflow: hidden; font-size: 19px; letter-spacing: -.55px; text-overflow: ellipsis; white-space: nowrap; }
.pm-route-rail__head p { color: var(--pm-muted); font-size: 10px; }
.pm-breadcrumbs { display: grid; grid-template-columns: 18px minmax(0,1fr); align-items: center; gap: 4px 7px; }
.pm-breadcrumbs > i { display: grid; place-items: center; color: #a6acb7; }
.pm-breadcrumbs button { grid-column: 1 / -1; min-height: 32px; display: grid; grid-template-columns: 18px minmax(0,1fr) auto; align-items: center; gap: 7px; padding: 5px 8px; border-radius: 10px; background: transparent; color: var(--pm-muted); text-align: left; }
.pm-breadcrumbs > i + button { grid-column: 2; grid-template-columns: minmax(0,1fr) auto; }
.pm-breadcrumbs button span { overflow: hidden; font-size: 10px; font-weight: 680; text-overflow: ellipsis; white-space: nowrap; }
.pm-breadcrumbs button small { color: #a5abb5; font-size: 7px; font-variant-numeric: tabular-nums; letter-spacing: .6px; }
.pm-breadcrumbs button.is-current { color: white; background: var(--pm-ink); box-shadow: 0 9px 18px rgba(7,19,39,.16); }
.pm-breadcrumbs button.is-current small { color: rgba(255,255,255,.55); }
.pm-route-rail__label { display: flex; align-items: center; justify-content: space-between; color: var(--pm-muted); font-size: 8px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; }
.pm-route-rail__label b { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; color: var(--pm-blue); background: var(--pm-blue-soft); font-size: 8px; }
.pm-role-rail { min-height: 0; display: grid; gap: 3px; overflow: auto; scrollbar-width: none; }
.pm-role-rail button { min-height: 38px; display: grid; grid-template-columns: 30px minmax(0,1fr) 16px; align-items: center; gap: 8px; padding: 4px 7px; border-radius: 12px; background: transparent; color: var(--pm-ink-2); text-align: left; }
.pm-role-rail button > span { width: 29px; height: 29px; display: grid; place-items: center; border-radius: 9px; color: var(--pm-muted); background: rgba(7,19,39,.045); }
.pm-role-rail strong { overflow: hidden; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.pm-role-rail button.is-active { color: var(--pm-blue); background: white; box-shadow: 0 7px 18px rgba(17,36,77,.07); }
.pm-role-rail button.is-active > span { color: white; background: var(--pm-blue); }
.pm-route-rail footer { display: grid; gap: 4px; padding-top: 12px; border-top: 1px solid var(--pm-line); }
.pm-route-rail footer span { display: flex; align-items: center; gap: 5px; color: var(--pm-muted); font-size: 8px; }
.pm-route-rail footer strong { overflow: hidden; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.pm-demo-signature { position: absolute; left: 34px; bottom: 30px; display: flex; align-items: center; gap: 10px; }
.pm-demo-signature > svg { width: 30px; height: 30px; }
.pm-demo-signature p { display: grid; gap: 2px; }
.pm-demo-signature strong { font-size: 11px; color: var(--pm-ink-2); }