/* Native app content inside the presentation's common phone bezel. */
.sales-planner-screen { position:absolute; inset:0; z-index:4; display:block; padding:0; overflow:hidden; background:#000; opacity:0; visibility:hidden; pointer-events:none; transform:none; transition:opacity 180ms cubic-bezier(.22,1,.36,1),visibility 0s 180ms; }
body.staffi-redesign .phone-frame .sales-planner-screen { display:block; padding:0; background:#000; transform:none; }
.phone-frame.show-planner .sales-planner-screen { opacity:1; visibility:visible; pointer-events:auto; transition-delay:0s; }
body.staffi-redesign .phone-panel:has(.phone-frame.show-planner)::after { content:""; display:block; width:100%; height:54px; flex:0 0 54px; }
body.staffi-redesign.staffi-viewport .phone-panel:has(.phone-frame.show-planner) { --phone-gallery-space:54px; }
.sp-app { --sp-card:#15181d; --sp-line:#35404d; --sp-muted:#92a4b5; --sp-blue:#9ab8ff; --sp-positive:#50edb9; --sp-negative:#ff9896; position:absolute; width:1080px; height:2400px; transform-origin:0 0; background:#000; color:#f5f5f5; font:34px/1.2 Arial,sans-serif; font-variant-numeric:tabular-nums; text-align:left; }
.sp-app *, .sp-app *::before, .sp-app *::after { box-sizing:border-box; }
.sp-app button { color:inherit; font:inherit; text-align:left; touch-action:manipulation; cursor:pointer; }
.sp-app button:focus-visible { outline:4px solid #9ab8ff; outline-offset:5px; }
.sp-app svg { display:block; flex:0 0 auto; }
.sp-status { position:absolute; left:52px; right:52px; top:25px; height:50px; display:flex; align-items:center; justify-content:space-between; font-size:36px; font-weight:700; }
.sp-status-left,.sp-status-right { display:flex; align-items:center; gap:13px; }
.sp-status-left svg { width:27px; height:30px; }
.sp-status-right svg { width:32px; height:32px; }
.sp-vpn { padding:1px 5px; border-radius:5px; background:#f5f5f5; color:#000; font-size:23px; }
.sp-battery { position:relative; padding:0 7px; border-radius:5px; background:#f5f5f5; color:#000; font-size:24px; }
.sp-battery::after { content:""; position:absolute; right:-5px; top:7px; width:4px; height:12px; border-radius:2px; background:#f5f5f5; }
.sp-header { position:absolute; left:32px; right:32px; top:104px; height:86px; display:flex; align-items:center; justify-content:space-between; }
.sp-header h2 { margin:0; font-size:44px; font-weight:700; line-height:1.15; }
.sp-header-icon { display:grid; place-items:center; width:76px; height:76px; border:2px solid #30343b; border-radius:22px; background:var(--sp-card); }
.sp-header-icon svg { width:40px; height:40px; }
.sp-datebar { position:absolute; left:28px; right:28px; top:225px; height:156px; display:flex; align-items:center; justify-content:space-between; border:2px solid #3c3c3c; border-radius:38px; background:#1e1e1e; }
.sp-week-button { display:grid; place-items:center; flex:0 0 max(104px,var(--sp-hit,104px)); width:max(104px,var(--sp-hit,104px)); height:max(150px,var(--sp-hit,150px)); padding:0; border:0; border-radius:26px; background:transparent; transition:transform 140ms cubic-bezier(.22,1,.36,1); }
.sp-week-button:active { transform:scale(.97); transition-duration:0s; }
.sp-week-button svg { width:43px; height:43px; stroke-width:5; }
.sp-date-copy { min-width:0; text-align:center; }
.sp-current-date { display:flex; justify-content:center; align-items:center; gap:20px; font-size:43px; font-weight:700; white-space:nowrap; }
.sp-current-date svg { width:43px; height:43px; }
.sp-week-range { display:block; margin-top:12px; color:#aaa; font-size:28px; font-weight:400; }
.sp-days { position:absolute; left:28px; right:28px; top:416px; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px; }
.sp-day { position:relative; height:421px; min-width:0; margin:0; padding:0; border:2px solid var(--sp-line); border-radius:24px; background:var(--sp-card); overflow:hidden; }
button.sp-day { appearance:none; }
.sp-day[data-weekend="true"] { background:#2b1113; border-color:#663137; }
.sp-day[data-open="true"] { border-color:#9ab8ff; }
.sp-day-heading { position:absolute; left:20px; right:20px; top:22px; display:flex; align-items:center; gap:23px; min-width:0; }
.sp-date-badge { display:grid; place-items:center; flex:0 0 78px; width:78px; height:78px; border-radius:18px; background:#676f80; color:#fff; font-size:40px; font-weight:700; }
.sp-day[data-weekend="true"] .sp-date-badge { background:#b24a4f; }
.sp-day-name { min-width:0; flex:1; }
.sp-day-name strong { display:block; overflow:hidden; color:#f5f5f5; font-size:36px; font-weight:700; white-space:nowrap; text-overflow:ellipsis; }
.sp-day-name span { display:block; margin-top:12px; color:var(--sp-muted); font-size:31px; white-space:nowrap; }
.sp-lock { width:33px; height:43px; color:var(--sp-muted); }
.sp-fact-label { position:absolute; left:22px; top:136px; color:var(--sp-muted); font-size:29px; font-weight:700; }
.sp-value-row { position:absolute; left:22px; right:22px; display:flex; align-items:baseline; justify-content:space-between; gap:12px; font-size:37px; white-space:nowrap; }
.sp-value-row[data-positive="true"] { color:var(--sp-positive); }
.sp-value-row[data-positive="false"] { color:var(--sp-negative); }
.sp-value-row strong { font-weight:700; }
.sp-revenue { top:192px; }
.sp-average { top:251px; }
.sp-day-bottom { position:absolute; left:22px; right:22px; top:330px; display:flex; align-items:center; justify-content:space-between; padding-top:29px; border-top:2px solid var(--sp-line); color:var(--sp-blue); font-size:36px; }
.sp-period-link { display:flex; align-items:center; gap:18px; }
.sp-period-link svg { width:26px; height:26px; }
.sp-periods { position:absolute; z-index:5; left:48px; top:976px; width:718px; padding:26px 26px 28px; border:3px solid #5187ea; border-radius:24px; background:#1d2939; opacity:0; visibility:hidden; pointer-events:none; transform:translateY(-8px) scale(.94); transform-origin:28% -22%; transition:opacity 140ms cubic-bezier(.22,1,.36,1),transform 140ms cubic-bezier(.22,1,.36,1),visibility 0s 140ms; }
.sp-periods[data-open="true"] { opacity:1; visibility:visible; pointer-events:auto; transform:none; transition-duration:200ms,200ms,0s; transition-delay:0s; }
.sp-periods-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:24px; color:var(--sp-blue); font-size:35px; font-weight:700; }
.sp-periods-count { display:flex; align-items:center; gap:15px; color:var(--sp-muted); font-size:31px; }
.sp-periods-count svg { width:38px; height:38px; }
.sp-period { margin-top:20px; padding-left:21px; border-left:3px solid #e8eef6; }
.sp-period strong { font-weight:700; }
.sp-period-time { display:block; margin-bottom:18px; color:#f5f5f5; font-size:36px; }
.sp-period-metrics { display:grid; grid-template-columns:minmax(0,1fr) 232px; gap:16px; font-size:32px; color:var(--sp-blue); white-space:nowrap; }
.sp-period-fact { display:flex; align-items:baseline; gap:12px; }
.sp-period-check { display:grid; grid-template-columns:60px 1fr; align-items:baseline; column-gap:13px; }
.sp-period-metrics b { color:#f5f5f5; font-weight:700; }
.sp-bottom-nav { position:absolute; left:0; right:0; bottom:0; height:176px; display:grid; grid-template-columns:repeat(5,1fr); align-items:center; justify-items:center; border-radius:60px 60px 0 0; background:#1e1e1e; color:#929292; }
.sp-bottom-nav > span { display:grid; place-items:center; width:128px; height:128px; }
.sp-bottom-nav svg { width:65px; height:65px; }
.sp-bottom-nav .sp-nav-current { border-radius:50%; background:#303033; }
.sp-demo-pointer { position:absolute; z-index:8; left:0; top:0; width:52px; height:66px; opacity:0; pointer-events:none; }
.sp-demo-ripple { position:absolute; z-index:7; left:224px; top:926px; width:75px; height:75px; margin:-37.5px; border:5px solid #bed2ff; border-radius:50%; opacity:0; pointer-events:none; }
@media(prefers-reduced-motion:reduce) { .sales-planner-screen,.sp-periods,.sp-week-button { transition:none; } .sp-periods { transform:none; } }