/* Surge owner app, drawn in HTML at real iPhone size (390 x 844 pt) and scaled with --s.
   Colours, type sizes and spacing are the app's own (mobile/src/ui/theme.ts). */
.phone{--s:.62;width:calc(433px * var(--s));height:calc(896px * var(--s));position:relative;flex:none;contain:layout}
.phone>.ph{position:absolute;top:0;left:0;width:433px;height:896px;max-width:none;transform:scale(var(--s));transform-origin:0 0;
  z-index:1}
/* shadow as its own layer: a CSS filter on the scaled phone makes iPhone Safari drop the phone entirely */
.phone::before{content:"";position:absolute;left:6%;right:6%;top:3%;bottom:2%;border-radius:calc(70px * var(--s));z-index:0;
  box-shadow:0 calc(50px * var(--s)) calc(80px * var(--s)) rgba(3,6,26,.45),0 0 calc(90px * var(--s)) rgba(31,91,255,.28)}
/* photoreal titanium frame (Higgsfield render, screen cut out) drawn over the live screen */
.phone>.ph::after{content:"";position:absolute;inset:0;background:url(img/iphone-frame.webp) center/100% 100% no-repeat;pointer-events:none;z-index:10}
.ph-scr{width:390px;height:844px;border-radius:56px;overflow:hidden;background:#f4f6fb;position:absolute;left:21.6px;top:22.4px;display:flex;flex-direction:column;
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Inter",system-ui,sans-serif;color:#12152e;text-align:left;letter-spacing:0;-webkit-font-smoothing:antialiased;line-height:1.25}
.ph-scr *{box-sizing:border-box}
.ph-island{position:absolute;top:11px;left:50%;transform:translateX(-50%);width:124px;height:36px;border-radius:20px;background:#000;z-index:5}
.ph-status{height:54px;flex:none;display:flex;justify-content:space-between;align-items:center;padding:16px 30px 0 46px;font:600 17px/1 -apple-system,BlinkMacSystemFont,system-ui,sans-serif;background:#fff;color:#12152e}
.ph-status svg{display:block}
.ph-status .ic{display:flex;gap:6px;align-items:center}
.ph-nav{height:44px;flex:none;background:#fff;display:flex;align-items:center;justify-content:center;position:relative;box-shadow:0 .5px 0 #c8d0e4;font-size:17px;font-weight:600;z-index:1}
.ph-acct{position:absolute;right:12px;top:5px;width:34px;height:34px;border-radius:50%;background:#eef1f8;color:#2455c4;font-size:13px;font-weight:700;display:grid;place-items:center}
.ph-back{position:absolute;left:8px;top:0;height:44px;display:flex;align-items:center;gap:4px;color:#2c6bf0;font-size:17px;font-weight:400}
.ph-back::before{content:"";width:11px;height:11px;border-left:3px solid #2c6bf0;border-bottom:3px solid #2c6bf0;transform:rotate(45deg);margin-left:8px;border-radius:1px}
.ph-body{flex:1;min-height:0;overflow:hidden;padding:16px;display:flex;flex-direction:column;gap:12px}
.ph-body.flush{padding:0;gap:0}
.ph-tabs{height:83px;flex:none;background:#fff;box-shadow:0 -.5px 0 #c8d0e4;display:flex;padding:7px 6px 0;position:relative}
.ph-tab{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;font-size:11px;font-weight:500;color:#6b7290}
.ph-tab svg{width:27px;height:27px;display:block}
.ph-tab.on{color:#2c6bf0}
.ph-tab.on svg{stroke-width:2.1}
.ph-tab.on svg rect,.ph-tab.on svg circle{fill:rgba(44,107,240,.14)}
.ph-home{position:absolute;bottom:8px;left:50%;transform:translateX(-50%);width:134px;height:5px;border-radius:3px;background:#12152e;z-index:6}

.ph-t2{font-size:22px;font-weight:700;margin:0}
.ph-t1{font-size:28px;font-weight:700;margin:0}
.ph-t3{font-size:20px;font-weight:700;margin:0}
.ph-muted{color:#6b7290;font-size:13px}
.ph-muted.c{font-size:16px}
.ph-good{color:#1f7a4d}
.ph-seg{display:flex;background:#eef1f8;border-radius:12px;padding:3px;gap:3px;flex:none}
.ph-seg span{flex:1;height:38px;display:grid;place-items:center;border-radius:9px;font-size:15px;font-weight:500;color:#6b7290}
.ph-seg span.on{background:#fff;color:#12152e;font-weight:600;box-shadow:0 1px 3px rgba(18,21,46,.08)}
.ph-stats{display:grid;grid-template-columns:1fr 1fr;gap:12px;flex:none}
.ph-stat{background:#fff;border-radius:12px;box-shadow:inset 0 0 0 .5px #c8d0e4;padding:12px}
.ph-stat small{display:block;font-size:13px;font-weight:500;color:#6b7290}
.ph-stat b{display:block;font-size:22px;font-weight:700;margin-top:2px;font-variant-numeric:tabular-nums}
.ph-stat em{display:block;font-style:normal;font-size:13px;margin-top:2px;color:#6b7290}
.ph-stat em.up{color:#1f7a4d;font-weight:500}
.ph-card{background:#fff;border-radius:12px;box-shadow:inset 0 0 0 .5px #c8d0e4;padding:16px;display:flex;flex-direction:column;gap:8px;flex:none}
.ph-card h5{font-size:17px;font-weight:600;margin:0}
.ph-kv{display:flex;justify-content:space-between;gap:12px;font-size:16px;padding:6px 0}
.ph-kv span:first-child{color:#6b7290}
.ph-kv span:last-child{font-variant-numeric:tabular-nums;text-align:right}
.ph-kv.strong span{font-weight:600;color:#12152e}
.ph-btn2{min-height:44px;border-radius:12px;box-shadow:inset 0 0 0 1px #c8d0e4;background:#fff;color:#2455c4;font-size:17px;font-weight:600;display:grid;place-items:center}
.ph-btn{min-height:44px;border-radius:12px;background:#2c6bf0;color:#fff;font-size:17px;font-weight:600;display:grid;place-items:center}
.ph-search{margin:12px 16px 0;height:44px;border-radius:12px;box-shadow:inset 0 0 0 1px #c8d0e4;background:#fff;padding:0 12px;display:flex;align-items:center;color:#6b7290;font-size:17px;flex:none}
.ph-list{margin-top:12px;background:#fff;flex:none}
.ph-row{min-height:56px;display:flex;align-items:center;padding:8px 16px;position:relative;background:#fff}
.ph-row+.ph-row::before{content:"";position:absolute;top:0;left:16px;right:0;height:.5px;background:#c8d0e4}
.ph-row .m{flex:1;min-width:0}
.ph-row .t{font-size:17px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:flex;align-items:center;gap:8px}
.ph-row .s{font-size:13px;color:#6b7290;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ph-row .r{margin-left:12px;text-align:right;font-size:17px;font-weight:600;font-variant-numeric:tabular-nums}
.ph-row .chev{margin-left:8px;width:9px;height:9px;border-right:2.5px solid #a7b1cd;border-top:2.5px solid #a7b1cd;transform:rotate(45deg);flex:none}
.ph-badge{background:#eef1f8;border-radius:999px;padding:2px 8px;font-size:12px;font-weight:600;color:#2455c4}
.ph-inset{margin:0 -16px}
.ph-toggle{display:flex;justify-content:space-between;align-items:center;font-size:16px;padding:4px 0}
.ph-switch{width:51px;height:31px;border-radius:16px;background:#34C759;position:relative;flex:none}
.ph-switch::after{content:"";position:absolute;top:2px;right:2px;width:27px;height:27px;border-radius:50%;background:#fff;box-shadow:0 2px 4px rgba(0,0,0,.2)}
.ph-switch.off{background:#e3e6ee}
.ph-switch.off::after{right:auto;left:2px}
.ph-done{background:#e7f4ec;color:#1f7a4d;border-radius:12px;padding:10px 12px;font-size:15px;font-weight:500}
.ph-sheet{position:absolute;left:0;right:0;bottom:0;background:#fff;border-radius:14px 14px 0 0;padding:10px 16px 40px;display:flex;flex-direction:column;gap:14px;box-shadow:0 -10px 40px rgba(18,21,46,.25);z-index:4}
.ph-sheet::before{content:"";width:36px;height:5px;border-radius:3px;background:#c8d0e4;align-self:center}
.ph-dim{position:absolute;inset:0;background:rgba(18,21,46,.35);z-index:3}
.ph-field{display:flex;flex-direction:column;gap:4px}
.ph-field label{font-size:13px;font-weight:500;color:#6b7290}
.ph-field div{height:44px;border-radius:12px;box-shadow:inset 0 0 0 1px #c8d0e4;padding:0 12px;display:flex;align-items:center;font-size:17px}
.ph-field div.focus{box-shadow:inset 0 0 0 2px #2c6bf0}

/* Lock screen with the morning summary */
.ph-lock{flex:1;background:radial-gradient(420px 380px at 20% 10%,#3A74FF 0%,transparent 70%),radial-gradient(420px 420px at 90% 80%,#3A2A8F 0%,transparent 70%),linear-gradient(180deg,#0C1F7A,#0B0E2E);color:#fff;display:flex;flex-direction:column;align-items:center;padding-top:78px;position:relative}
.ph-lock .date{font-size:21px;font-weight:600;opacity:.92}
.ph-lock .time{font-size:96px;font-weight:700;letter-spacing:-2px;line-height:1;margin-top:4px}
.ph-note{position:absolute;left:12px;right:12px;top:318px;border-radius:22px;background:rgba(245,247,255,.78);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);color:#12152e;padding:14px 16px;display:flex;gap:12px;box-shadow:0 10px 30px rgba(0,0,0,.25)}
.ph-note img{width:38px;height:38px;border-radius:9px;flex:none}
.ph-note .hd{display:flex;justify-content:space-between;font-size:15px;font-weight:600}
.ph-note .hd span{font-weight:400;color:#4b5270;font-size:14px}
.ph-note p{margin:2px 0 0;font-size:15px;line-height:1.3}
.ph-lock .foot{position:absolute;bottom:40px;left:0;right:0;display:flex;justify-content:space-between;padding:0 48px}
.ph-lock .foot i{width:50px;height:50px;border-radius:50%;background:rgba(255,255,255,.18)}
.ph-lock+.ph-home{background:#fff}

/* glass: a faint sheen across the display */
.ph-scr::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:8;
  background:linear-gradient(118deg,rgba(255,255,255,.16) 0%,rgba(255,255,255,.05) 22%,rgba(255,255,255,0) 38%)}