/* ============================================================
   The in-phone app. Every value is the shipped app's (Sky v2,
   tokens.ts, Pane.tsx, ui.tsx). Frame 402 × 874 CSS px.
   ============================================================ */

.app {
  --app-w: 402px; --app-h: 874px; --sat: 59px;
  position: relative; width: var(--app-w); height: var(--app-h);
  border-radius: 54px; overflow: hidden; isolation: isolate;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Albert Sans", system-ui, sans-serif;
  font-size: 14px; font-weight: 500; line-height: normal; color: var(--ink);
  background: #04060f; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent;
  transform-style: preserve-3d;
}
.app.is-flat { transform-style: flat; }
.app *, .app *::before, .app *::after { box-sizing: border-box; }
:where(.app) button { font: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0; cursor: pointer; text-align: inherit; }
:where(.app) img { display: block; max-width: none; }
.app .ic { display: block; flex: none; }

/* ---------- sky inside the phone (tokens.ts §2) ---------- */
.app-sky { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.app-sky > i { position: absolute; inset: 0; opacity: 0; transition: opacity 1.2s ease; }
html[data-phase="day"] .app-sky > .k-day, html[data-phase="dawn"] .app-sky > .k-dawn,
html[data-phase="dusk"] .app-sky > .k-dusk, html[data-phase="night"] .app-sky > .k-night { opacity: 1; }
.app-sky > .k-day { background: linear-gradient(180deg, rgba(90,140,220,.14) 0%, transparent 40%, transparent 60%, rgba(255,255,255,.7) 100%), linear-gradient(180deg, #e9f0f8 0%, #f4f6f9 55%, #fbfbfc 100%); }
.app-sky > .k-dawn { background: linear-gradient(180deg, rgba(10,10,40,.5) 0%, transparent 40%, transparent 60%, rgba(12,8,30,.85) 100%), linear-gradient(180deg, #1b1d40 0%, #3a2a58 45%, #6a3f66 100%); }
.app-sky > .k-dusk { background: linear-gradient(180deg, rgba(6,4,24,.55) 0%, transparent 40%, transparent 60%, rgba(8,4,20,.9) 100%), linear-gradient(180deg, #120e2c 0%, #2a1638 45%, #4a1e3c 100%); }
.app-sky > .k-night { background: linear-gradient(180deg, rgba(0,0,0,.35) 0%, transparent 40%, transparent 60%, rgba(2,3,10,.92) 100%), linear-gradient(180deg, #04060f 0%, #0a0f26 50%, #0c1230 100%); }
.app-sky > .o { opacity: 1; border-radius: 50%; inset: auto; aspect-ratio: 1; background: radial-gradient(circle, currentColor 0, transparent 62%); transition: color 1.2s ease; }
.app-sky > .oa { left: -30%; top: -14%; width: 120%; filter: blur(40px); animation: appOrbA 26s ease-in-out infinite; }
.app-sky > .ob { right: -40%; top: 18%; width: 130%; filter: blur(46px); animation: appOrbB 32s ease-in-out infinite; }
.app-sky > .oc { left: -20%; bottom: -30%; width: 120%; filter: blur(46px); animation: appOrbC 38s ease-in-out infinite; }
html[data-phase="day"] .app-sky .oa { color: rgba(116,164,232,.55); } html[data-phase="day"] .app-sky .ob { color: rgba(255,208,150,.55); } html[data-phase="day"] .app-sky .oc { color: rgba(170,222,205,.5); }
html[data-phase="dawn"] .app-sky .oa { color: rgba(120,110,220,.5); } html[data-phase="dawn"] .app-sky .ob { color: rgba(255,170,130,.55); } html[data-phase="dawn"] .app-sky .oc { color: rgba(255,205,150,.45); }
html[data-phase="dusk"] .app-sky .oa { color: rgba(150,80,170,.5); } html[data-phase="dusk"] .app-sky .ob { color: rgba(255,150,80,.6); } html[data-phase="dusk"] .app-sky .oc { color: rgba(255,110,120,.4); }
html[data-phase="night"] .app-sky .oa { color: rgba(60,80,200,.45); } html[data-phase="night"] .app-sky .ob { color: rgba(255,190,110,.28); } html[data-phase="night"] .app-sky .oc { color: rgba(40,120,160,.35); }
.app-sky > .band { opacity: 1; inset: auto; left: 50%; top: var(--hz, 30%); width: 200%; height: 300px; transform: translate(-50%, -50%); background: radial-gradient(50% 50% at 50% 50%, currentColor 0, transparent 70%); filter: blur(24px); transition: top 1s cubic-bezier(.4,0,.2,1), color 1.2s ease; animation: appBand 9s ease-in-out infinite; }
html[data-phase="day"] .app-sky .band { color: rgba(255,255,255,.9); } html[data-phase="dawn"] .app-sky .band { color: rgba(255,190,140,.6); }
html[data-phase="dusk"] .app-sky .band { color: rgba(255,170,100,.6); } html[data-phase="night"] .app-sky .band { color: rgba(255,205,140,.5); }
.app-sky > .grain { opacity: .09; background-image: url(../img/grain.png); background-size: 160px; mix-blend-mode: overlay; }
html[data-phase="day"] .app-sky > .grain { opacity: .06; mix-blend-mode: multiply; }
@keyframes appOrbA { 0%,100% { transform: translate(0,0) scale(1) } 50% { transform: translate(40px,30px) scale(1.12) } }
@keyframes appOrbB { 0%,100% { transform: translate(0,0) scale(1) } 50% { transform: translate(-50px,20px) scale(.94) } }
@keyframes appOrbC { 0%,100% { transform: translate(0,0) scale(1) } 50% { transform: translate(20px,-40px) scale(1.08) } }
@keyframes appBand { 0%,100% { opacity: .75; transform: translate(-50%,-50%) scaleX(1) } 50% { opacity: 1; transform: translate(-50%,-50%) scaleX(1.06) } }

/* ---------- chrome: status bar, island, home indicator ---------- */
.app-status { position: absolute; left: 0; right: 0; top: 0; height: 54px; z-index: 30; display: flex; align-items: center; justify-content: space-between; padding: 6px 34px 0 46px; font-size: 16.5px; font-weight: 600; letter-spacing: -.2px; color: var(--ink); pointer-events: none; }
.app-status .bars { display: flex; align-items: center; gap: 6px; }
.app-island { position: absolute; top: 11px; left: 50%; width: 124px; height: 36px; margin-left: -62px; border-radius: 20px; background: #000; z-index: 31; }
.app-homeind { position: absolute; bottom: 8px; left: 50%; width: 139px; height: 5px; margin-left: -69.5px; border-radius: 3px; background: var(--ink); opacity: .55; z-index: 31; pointer-events: none; }

/* ---------- screens ---------- */
.app-view { position: absolute; inset: 0; z-index: 2; transform-style: preserve-3d; }
.scr { position: absolute; inset: 0; transform-style: preserve-3d; backface-visibility: hidden; }
.scr-body { position: absolute; inset: 0; overflow-y: auto; overflow-x: hidden; scrollbar-width: none; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; padding: calc(var(--sat) + 8px) 18px 120px; }
.scr-body::-webkit-scrollbar { display: none; }
.scr.pushed .scr-body { padding-bottom: 40px; }
.scr.g22 .scr-body { padding-left: 22px; padding-right: 22px; }
.app.assembling .scr-body { overflow: visible; }

/* screen transitions (3D push / pop / tab) */
.scr { transition: transform .62s cubic-bezier(.2,.8,.2,1), opacity .4s ease, filter .4s ease; }
.scr.st-enter-push { transform: translate3d(100%,0,0) rotateY(-22deg); opacity: .4; }
.scr.st-under { transform: translate3d(-28%,0,-120px) rotateY(10deg); opacity: .0; filter: brightness(.6); }
.scr.st-enter-tab { transform: translate3d(0,24px,-160px) rotateX(16deg); opacity: 0; }
.scr.st-leave-tab { transform: translate3d(0,-18px,-90px) rotateX(-10deg); opacity: 0; }
.scr.st-leave-pop { transform: translate3d(100%,0,0) rotateY(-22deg); opacity: .2; }
.scr.st-hidden { visibility: hidden; opacity: 0; transition: none; }

/* ---------- type ---------- */
.t-title40 { font-size: 40px; line-height: 40.8px; font-weight: 200; letter-spacing: -1.2px; color: var(--ink); }
.t-title54 { font-size: 54px; line-height: 52px; font-weight: 200; letter-spacing: -1.2px; text-shadow: var(--headline-shadow); }
.t-greet { font-size: 44px; line-height: 46px; font-weight: 200; letter-spacing: -1.2px; text-shadow: var(--headline-shadow); white-space: nowrap; }
.t-greet .nm { font-weight: 300; color: var(--ink-accent); }
.t-sub { font-size: 14px; line-height: 20px; color: var(--ink-muted); }
.t-sec { font-size: 12.5px; line-height: 17.5px; color: var(--ink-muted); }
.t-faint { color: var(--ink-faint); }
.eyebrow { font-size: 11px; line-height: 11px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; color: var(--ink-muted); }
.slabel { font-size: 11.5px; font-weight: 600; letter-spacing: 1.6px; text-transform: uppercase; color: var(--ink-muted); margin: 16px 0 2px 2px; }
.kicker { font-size: 12.5px; line-height: 17px; font-weight: 500; letter-spacing: 1.1px; text-transform: uppercase; color: var(--ink-faint); }
.one { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.two { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* ---------- Pane (spec §3) ---------- */
.pane { --pane-r: 22px; position: relative; isolation: isolate; border-radius: var(--pane-r);
  border: 1px solid var(--pane-edge, rgba(255,255,255,.06)); border-top-color: var(--pane-rim);
  background: linear-gradient(180deg, var(--pane-top), var(--pane-bot)) padding-box; box-shadow: var(--pane-out); }
.pane::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; border-radius: calc(var(--pane-r) - 1px); border: 1px solid transparent; border-top-color: var(--pane-in-top); border-bottom-color: var(--pane-in-bot); }
.pane.hero { --pane-r: 24px; }
.pane.r16 { --pane-r: 16px; } .pane.r22 { --pane-r: 22px; } .pane.r24 { --pane-r: 24px; }
.tap { cursor: pointer; }
.tap:active { transform: scale(.98); }
.pane.tap:active { border-top-color: var(--pane-rim-press); }
/* dark ink (dawn / dusk / night) */
.p0 { --pane-top: rgba(24,30,58,.82); --pane-rim: rgba(255,205,140,.75); --pane-rim-press: rgba(255,205,140,.9); --pane-in-top: rgba(255,220,170,.75); --pane-out: 0 28px 56px -18px rgba(0,0,0,.9), 0 0 60px -10px rgba(255,190,110,.35); }
.p1 { --pane-top: rgba(24,30,58,.78); --pane-rim: rgba(255,205,140,.5); --pane-rim-press: rgba(255,205,140,.65); --pane-in-top: rgba(255,220,170,.5); --pane-out: 0 25px 51px -19px rgba(0,0,0,.9); }
.p2 { --pane-top: rgba(24,30,58,.74); --pane-rim: rgba(255,205,140,.34); --pane-rim-press: rgba(255,205,140,.49); --pane-in-top: rgba(255,220,170,.34); --pane-out: 0 22px 46px -20px rgba(0,0,0,.9); }
.p3 { --pane-top: rgba(24,30,58,.7); --pane-rim: rgba(255,205,140,.24); --pane-rim-press: rgba(255,205,140,.39); --pane-in-top: rgba(255,220,170,.24); --pane-out: 0 19px 41px -21px rgba(0,0,0,.9); }
.p4 { --pane-top: rgba(24,30,58,.66); --pane-rim: rgba(255,205,140,.18); --pane-rim-press: rgba(255,205,140,.33); --pane-in-top: rgba(255,220,170,.18); --pane-out: 0 16px 36px -22px rgba(0,0,0,.9); }
.p5 { --pane-top: rgba(24,30,58,.62); --pane-rim: rgba(255,205,140,.14); --pane-rim-press: rgba(255,205,140,.29); --pane-in-top: rgba(255,220,170,.14); --pane-out: 0 13px 31px -23px rgba(0,0,0,.9); }
.p6 { --pane-top: rgba(24,30,58,.58); --pane-rim: rgba(255,205,140,.12); --pane-rim-press: rgba(255,205,140,.27); --pane-in-top: rgba(255,220,170,.12); --pane-out: 0 10px 26px -24px rgba(0,0,0,.9); }
.p7 { --pane-top: rgba(24,30,58,.54); --pane-rim: rgba(255,205,140,.1); --pane-rim-press: rgba(255,205,140,.25); --pane-in-top: rgba(255,220,170,.1); --pane-out: 0 7px 21px -25px rgba(0,0,0,.9); }
.pane { --pane-bot: rgba(10,14,30,.9); --pane-in-bot: rgba(0,0,0,.5); }
.pane.hero { --pane-top: rgba(255,205,140,.22); --pane-bot: rgba(24,30,58,.86); --pane-rim: rgba(255,205,140,.95); --pane-rim-press: rgba(255,205,140,1); --pane-in-top: rgba(255,220,170,.95); --pane-out: 0 28px 56px -18px rgba(0,0,0,.9), 0 0 60px -10px rgba(255,190,110,.4); }
/* light ink (day) */
html[data-ink="light"] .pane { --pane-bot: rgba(244,242,236,.66); --pane-in-top: rgba(255,255,255,.95); --pane-in-bot: transparent; }
html[data-ink="light"] .p0 { --pane-top: rgba(255,255,255,.84); --pane-rim: rgba(230,166,60,.75); --pane-rim-press: rgba(230,166,60,.9); --pane-out: 0 24px 50px -20px rgba(20,30,60,.4), 0 0 50px -10px rgba(255,190,110,.6); }
html[data-ink="light"] .p1 { --pane-top: rgba(255,255,255,.81); --pane-rim: rgba(230,166,60,.5); --pane-rim-press: rgba(230,166,60,.65); --pane-out: 0 21px 45px -21px rgba(20,30,60,.4); }
html[data-ink="light"] .p2 { --pane-top: rgba(255,255,255,.78); --pane-rim: rgba(230,166,60,.34); --pane-rim-press: rgba(230,166,60,.49); --pane-out: 0 18px 40px -22px rgba(20,30,60,.4); }
html[data-ink="light"] .p3 { --pane-top: rgba(255,255,255,.75); --pane-rim: rgba(230,166,60,.24); --pane-rim-press: rgba(230,166,60,.39); --pane-out: 0 15px 35px -23px rgba(20,30,60,.4); }
html[data-ink="light"] .p4 { --pane-top: rgba(255,255,255,.72); --pane-rim: rgba(230,166,60,.18); --pane-rim-press: rgba(230,166,60,.33); --pane-out: 0 12px 30px -24px rgba(20,30,60,.4); }
html[data-ink="light"] .p5 { --pane-top: rgba(255,255,255,.69); --pane-rim: rgba(230,166,60,.14); --pane-rim-press: rgba(230,166,60,.29); --pane-out: 0 9px 25px -25px rgba(20,30,60,.4); }
html[data-ink="light"] .p6 { --pane-top: rgba(255,255,255,.66); --pane-rim: rgba(230,166,60,.12); --pane-rim-press: rgba(230,166,60,.27); --pane-out: 0 6px 20px -26px rgba(20,30,60,.4); }
html[data-ink="light"] .p7 { --pane-top: rgba(255,255,255,.63); --pane-rim: rgba(230,166,60,.1); --pane-rim-press: rgba(230,166,60,.25); --pane-out: 0 3px 15px -27px rgba(20,30,60,.4); }
html[data-ink="light"] .pane.hero { --pane-top: rgba(255,232,190,.9); --pane-bot: rgba(255,255,255,.72); --pane-rim: rgba(230,166,60,.95); --pane-rim-press: rgba(230,166,60,1); --pane-out: 0 24px 50px -20px rgba(20,30,60,.4), 0 0 60px -10px rgba(255,190,110,.4); }
.pane.tone-accent { --pane-edge: var(--accent-line); }
.pane.tone-good { --pane-edge: var(--good-line); }

/* ---------- gold, pills, buttons (ui.tsx) ---------- */
.goldfill { position: relative; background: linear-gradient(180deg, #ffdca0, #e6a63c); color: #2a1a00; }
.goldfill::after { content: ""; position: absolute; inset: 0; border-radius: inherit; border: 1px solid transparent; border-top-color: rgba(255,255,255,.7); pointer-events: none; }
.gp { display: inline-flex; align-items: center; justify-content: center; gap: 5px; height: 34px; padding: 0 14px; border-radius: 999px; font-size: 13px; font-weight: 600; white-space: nowrap; flex: none; }
.gp.sm { height: 26px; padding: 0 10px; gap: 4px; font-size: 11.5px; }
.gp.lg { display: flex; width: 100%; height: 54px; padding: 0 20px; gap: 8px; font-size: 16.5px; }
.gp.neutral { background: var(--chip); border: 1px solid var(--hair); color: var(--ink-muted); }
.gp.gold { background: var(--accent-fill); border: 1px solid var(--accent-line); color: var(--ink-accent); }
.gp.goldSolid { box-shadow: 0 10px 24px rgba(255,190,90,.4); }
.gp.goldSolid.lg { box-shadow: 0 14px 36px rgba(255,190,90,.45); }
.gp.green { background: var(--good-fill); border: 1px solid var(--good-line); color: var(--good); }
.gp.greenSolid { background: var(--good-solid); color: var(--good-ink); }
.gp:active { transform: scale(.98); }
.pbtn { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 50px; border-radius: 999px; font-size: 16px; font-weight: 600; }
.pbtn.gold { box-shadow: 0 14px 36px rgba(255,190,90,.45); }
.pbtn.green { background: var(--good-solid); color: var(--good-ink); }
.circ { display: inline-flex; align-items: center; justify-content: center; flex: none; border-radius: 50%; background: var(--chip); border: 1px solid var(--hair); color: var(--ink); }
.circ.c38 { width: 38px; height: 38px; } .circ.c34 { width: 34px; height: 34px; } .circ.c32 { width: 32px; height: 32px; } .circ.c42 { width: 42px; height: 42px; }
.circ.goldc { background: var(--accent-fill); border-color: var(--accent-line); color: var(--ink-accent); }
.circ:active { transform: scale(.93); }
.schip { display: inline-flex; align-items: center; gap: 6px; padding: 7px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap; flex: none; }
.schip::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.schip.big { padding: 7px 14px; gap: 7px; font-size: 12.5px; }
.schip.s-open { background: var(--good-fill); color: var(--good); }
.schip.s-conn { background: var(--accent-fill); color: var(--ink-accent); }
.schip.s-req { background: var(--chip); color: var(--ink-muted); }
.schip.s-none { background: var(--chip); color: var(--ink-muted); }
.schip.s-none::before { background: var(--ink-faint); }
.live { width: 7px; height: 7px; border-radius: 50%; background: var(--good); flex: none; animation: live 2s ease-in-out infinite; }
.glow-dot { width: 8px; height: 8px; border-radius: 4px; background: var(--good); box-shadow: 0 0 8px var(--good); flex: none; }
@keyframes live { 0%,100% { opacity: 1 } 50% { opacity: .35 } }

/* segment control */
.seg { display: flex; gap: 4px; padding: 4px; border-radius: 16px; background: var(--chip); border: 1px solid var(--hair); position: relative; }
.seg.heroseg { background: transparent; border-color: transparent; }
.seg.heroseg::before { content: ""; position: absolute; inset: -1px; border-radius: 16px; z-index: -1;
  background: linear-gradient(180deg, rgba(255,205,140,.22), rgba(24,30,58,.86)); border: 1px solid rgba(255,255,255,.06); border-top-color: rgba(255,205,140,.95);
  box-shadow: 0 28px 56px -18px rgba(0,0,0,.9), 0 0 60px -10px rgba(255,190,110,.4); }
html[data-ink="light"] .seg.heroseg::before { background: linear-gradient(180deg, rgba(255,232,190,.9), rgba(255,255,255,.72)); border-top-color: rgba(230,166,60,.95); box-shadow: 0 24px 50px -20px rgba(20,30,60,.4), 0 0 60px -10px rgba(255,190,110,.4); }
.seg.round, .seg.round::before { border-radius: 999px; }
.seg button { flex: 1; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 600; color: var(--ink-muted); text-align: center; }
.seg.round button { border-radius: 999px; font-size: 16px; }
.seg button.on { background: #e6a63c; color: #2a1a00; }

/* avatars: 3D faces on a person's colour */
.av { position: relative; flex: none; border-radius: 50%; overflow: hidden; background: linear-gradient(140deg, var(--a1, #5B8DB8) 14.7%, var(--a2, #33607F) 85.3%); }
.av img { width: 118%; height: 118%; margin: 2% 0 0 -9%; object-fit: contain; }
.av.ring::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: var(--rw, 2px) solid var(--rc, var(--accent-line)); pointer-events: none; }
.facepile { display: flex; align-items: center; padding-left: 7px; }
.facepile .av { width: 26px; height: 26px; margin-left: -7px; box-shadow: 0 0 0 2px var(--punch); }

/* toast + sheet */
.toast { position: absolute; top: 58px; left: 50%; z-index: 40; transform: translateX(-50%); display: flex; align-items: center; gap: 8px; max-width: 92%; padding: 10px 16px; border-radius: 999px; background: var(--toast); border: 1px solid var(--accent-line); box-shadow: var(--dock-shadow); font-size: 13px; font-weight: 600; white-space: nowrap; color: var(--ink); animation: toastIn .3s ease-out both; pointer-events: none; }
.toast .ic { color: var(--good); }
@keyframes toastIn { from { opacity: 0; transform: translate(-50%, -14px) } to { opacity: 1; transform: translate(-50%, 0) } }

/* ---------- dock (TabBar.tsx) ---------- */
.app-dock { position: absolute; left: 14px; right: 14px; bottom: 30px; height: 66px; z-index: 20; border-radius: 33px; display: flex; align-items: center; justify-content: space-between; padding: 0 6px;
  background: var(--dock-bg); border: 1px solid var(--dock-border); box-shadow: var(--dock-shadow); -webkit-backdrop-filter: blur(22px); backdrop-filter: blur(22px); }
.app.assembling .app-dock, .app.no-blur .app-dock { -webkit-backdrop-filter: none; backdrop-filter: none; }
.app-dock button { width: 68px; height: 54px; border-radius: 27px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; color: var(--dock-inactive); font-size: 10.5px; font-weight: 600; letter-spacing: .1px; transition: color .25s ease, background-color .25s ease; }
.app-dock button.on { color: var(--dock-active); background: var(--dock-active-bg); }

/* photo tiles + art */
.art { position: relative; overflow: hidden; }
.art .wash { position: absolute; inset: 0; background: linear-gradient(135deg, var(--w1), var(--w2)); }
.art .sheen { position: absolute; inset: 0; background: radial-gradient(60% 42.5% at 18% 0%, rgba(255,255,255,.18) 0%, rgba(255,255,255,0) 55%); pointer-events: none; }
.art img.obj { position: absolute; left: 50%; top: 52%; width: 74%; transform: translate(-50%, -50%); filter: drop-shadow(0 14px 18px rgba(0,0,0,.35)); }
.float { animation: float 6s ease-in-out infinite; }
@keyframes float { 0%,100% { transform: translate(-50%, -50%) translateY(0) rotate(0deg) } 50% { transform: translate(-50%, -50%) translateY(-5px) rotate(-2deg) } }

/* ============================================================
   SCREENS
   ============================================================ */

/* --- Connect home --- */
.c-head { display: flex; align-items: center; gap: 10px; padding-top: 10px; }
.brandpill { display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 13px; border-radius: 999px; background: var(--chip); border: 1px solid var(--hair); color: var(--ink-muted); font-size: 13px; font-weight: 600; }
.brandpill .ic { color: var(--ink-accent); }
.c-me { position: relative; width: 42px; height: 42px; }
.c-me .av { width: 42px; height: 42px; --a1: #C99B4E; --a2: #8A6430; }
.c-me .pres { position: absolute; right: -1px; bottom: -1px; width: 13px; height: 13px; border-radius: 50%; background: var(--good); border: 2.5px solid var(--punch); }
.c-greet { margin-top: 26px; }
.c-date { margin-top: 10px; font-size: 15px; color: var(--ink-muted); }
.c-secrow { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 26px 0 2px 2px; }
.c-secrow .slabel { margin: 0; flex-shrink: 1; }
.ccard { display: flex; flex-direction: column; gap: 13px; padding: 16px; margin-top: 12px; }
.ccard .top { display: flex; align-items: center; gap: 14px; }
.ccard .tt { flex: 1; min-width: 0; }
.ccard .ti { font-size: 17.5px; font-weight: 300; }
.ccard .su { font-size: 13px; color: var(--ink-muted); margin-top: 2px; }
.chev32 { width: 32px; height: 32px; border-radius: 16px; display: flex; align-items: center; justify-content: center; background: var(--accent-fill); border: 1px solid var(--accent-line); color: var(--ink-accent); flex: none; }
.ccard .ppl { display: flex; align-items: center; gap: 9px; }
.ccard .here { font-size: 13.5px; font-weight: 600; color: var(--ink-accent); }
.ccard .solo { font-size: 13px; color: var(--ink-faint); }
.invite { display: flex; align-items: center; gap: 14px; padding: 20px; margin-top: 14px; border: 1.5px dashed var(--dashed); border-radius: 22px; }
.invite .itile { width: 44px; height: 44px; border-radius: 16px; background: var(--accent-fill); display: flex; align-items: center; justify-content: center; color: var(--ink-accent); flex: none; }
.invite .ti { font-size: 15.5px; font-weight: 300; }
.invite .su { font-size: 12.5px; color: var(--ink-muted); margin-top: 1px; }

/* --- headers --- */
.subhead { display: flex; align-items: center; gap: 11px; padding-top: 10px; }
.subhead .ti { font-size: 22px; line-height: 28px; font-weight: 200; letter-spacing: -.3px; }
.pagehead { display: flex; align-items: center; gap: 9px; padding-top: 10px; }
.pagehead .ti { font-size: 19px; font-weight: 300; }
.backlink { display: flex; align-items: center; gap: 6px; min-height: 44px; color: var(--ink-muted); font-size: 14px; }

/* --- Add a class --- */
.ac-intro { margin-top: 8px; font-size: 12.5px; line-height: 19px; color: var(--ink-muted); }
.scanpanel { margin-top: 14px; padding: 26px 16px; border-radius: 16px; border: 1.5px dashed var(--accent-line); background: var(--accent-fill); display: flex; flex-direction: column; align-items: center; text-align: center; }
.scanpanel .badge { width: 56px; height: 56px; border-radius: 18px; background: var(--accent-fill); border: 1px solid var(--accent-line); display: flex; align-items: center; justify-content: center; color: var(--ink-accent); }
.scanpanel .ti { margin-top: 12px; font-size: 17px; font-weight: 300; }
.scanpanel .su { margin-top: 5px; font-size: 12px; color: var(--ink-muted); }
.ghost { display: flex; align-items: center; gap: 10px; align-self: stretch; margin-top: 16px; padding: 10px; border-radius: 14px; background: var(--chip); border: 1px solid var(--hair); opacity: .4; text-align: left; }
.ghost .gav { width: 34px; height: 34px; border-radius: 50%; background: var(--chip-strong); display: flex; align-items: center; justify-content: center; color: var(--ink-muted); font-size: 13px; font-weight: 600; }
.spinner { width: 22px; height: 22px; border-radius: 50%; border: 2.4px solid currentColor; border-right-color: transparent; animation: spin .8s linear infinite; flex: none; }
.spinner.sm { width: 16px; height: 16px; border-width: 2px; }
@keyframes spin { to { transform: rotate(360deg) } }
.field { margin-top: 10px; }
.field label { display: block; font-size: 13px; font-weight: 600; color: var(--ink-muted); margin: 0 0 8px 3px; }
.field .box { min-height: 54px; display: flex; align-items: center; padding: 0 18px; border-radius: 18px; background: var(--chip); border: 1px solid var(--hair); font-size: 16.5px; color: var(--ink-faint); }
.scanstate .stagetxt { min-height: 21px; }

/* --- camera (the schedule photo) --- */
.cam { position: absolute; inset: 0; background: #050608; overflow: hidden; perspective: 900px; }
.cam .paper { position: absolute; left: 50%; top: 47%; width: 300px; padding: 18px 16px 20px; background: #f6f3ec; color: #222; border-radius: 4px; transform: translate(-50%, -50%) rotateX(18deg) rotateZ(-3deg); box-shadow: 0 40px 80px rgba(0,0,0,.6); font-family: ui-monospace, "SF Mono", Menlo, monospace; }
.cam .paper h6 { margin: 0 0 4px; font: 700 11px/1.3 -apple-system, system-ui, sans-serif; letter-spacing: .4px; color: #333; }
.cam .paper .meta { font-size: 8.5px; color: #777; margin-bottom: 10px; font-family: -apple-system, system-ui, sans-serif; }
.cam .paper .row { display: grid; grid-template-columns: 56px 1fr; gap: 2px 8px; padding: 6px 4px; border-top: 1px solid #ddd8cc; font-size: 9.5px; line-height: 1.3; position: relative; transition: background .25s ease; }
.cam .paper .row b { font-weight: 700; }
.cam .paper .row .m { grid-column: 2; color: #666; font-size: 8.5px; }
.cam .paper .row.hit { background: rgba(230,166,60,.28); }
.cam .scanline { position: absolute; left: 6%; right: 6%; height: 2px; background: linear-gradient(90deg, transparent, #ffdca0, transparent); box-shadow: 0 0 18px 4px rgba(255,205,140,.6); top: var(--scan, 20%); opacity: var(--scan-o, 0); }
.cam .corners { position: absolute; inset: 120px 34px 190px; pointer-events: none; }
.cam .corners i { position: absolute; width: 34px; height: 34px; border: 3px solid #ffd9a3; }
.cam .corners i:nth-child(1) { left: 0; top: 0; border-right: 0; border-bottom: 0; border-top-left-radius: 12px; }
.cam .corners i:nth-child(2) { right: 0; top: 0; border-left: 0; border-bottom: 0; border-top-right-radius: 12px; }
.cam .corners i:nth-child(3) { left: 0; bottom: 0; border-right: 0; border-top: 0; border-bottom-left-radius: 12px; }
.cam .corners i:nth-child(4) { right: 0; bottom: 0; border-left: 0; border-top: 0; border-bottom-right-radius: 12px; }
.cam .camtop { position: absolute; top: 62px; left: 0; right: 0; text-align: center; color: #fff; font-size: 13px; font-weight: 600; letter-spacing: .3px; }
.cam .camtop span { display: inline-block; padding: 6px 12px; border-radius: 999px; background: rgba(255,255,255,.12); }
.cam .shutter { position: absolute; bottom: 64px; left: 50%; width: 74px; height: 74px; margin-left: -37px; border-radius: 50%; border: 4px solid #fff; display: flex; align-items: center; justify-content: center; }
.cam .shutter::after { content: ""; width: 58px; height: 58px; border-radius: 50%; background: #fff; }
.cam .flash { position: absolute; inset: 0; background: #fff; opacity: var(--flash, 0); pointer-events: none; }

/* --- Confirm your classes --- */
.cf-row { display: flex; align-items: center; padding: 12px 14px; margin-top: 10px; }
.tick { width: 22px; height: 22px; border-radius: 7px; border: 1.5px solid var(--hair); display: flex; align-items: center; justify-content: center; margin-right: 12px; flex: none; color: var(--good-ink); }
.tick.on { background: var(--good-solid); border-color: var(--good); }
.cf-main { flex: 1; min-width: 0; }
.cf-code { font-size: 14.5px; font-weight: 300; }
.cf-code span { font-size: 12px; color: var(--ink-muted); }
.cf-title { font-size: 11.5px; color: var(--ink-muted); margin-top: 3px; }
.cf-ins { font-size: 11.5px; color: var(--ink-faint); margin-top: 2px; }
.badge-s { display: inline-flex; align-items: center; gap: 5px; margin-top: 7px; padding: 3px 9px; border-radius: 999px; border: 1px solid; font-size: 9.5px; font-weight: 600; letter-spacing: .3px; }
.badge-s.join { background: var(--good-fill); border-color: var(--good-line); color: var(--good); }
.badge-s.new { background: var(--accent-fill); border-color: var(--accent-line); color: var(--ink-accent); }
.termchip { display: inline-block; margin-top: 6px; padding: 3px 9px; border-radius: 999px; border: 1px solid var(--hair); background: var(--chip); font-size: 9.5px; letter-spacing: .3px; color: var(--ink-faint); }
.cf-edit { width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--hair); background: var(--chip); display: flex; align-items: center; justify-content: center; color: var(--ink-muted); margin-left: 10px; flex: none; }
.cf-row { transition: opacity .35s ease, transform .5s cubic-bezier(.2,.9,.3,1.2); }
.cf-row.pre { opacity: 0; transform: translateY(18px) rotateX(-30deg); }
.success { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 30px 24px 0; }
.success .disc { width: 84px; height: 84px; border-radius: 42px; background: var(--good-fill); border: 1px solid var(--good); display: flex; align-items: center; justify-content: center; color: var(--good); margin-bottom: 20px; }
.success .ti { font-size: 22px; font-weight: 200; letter-spacing: -.3px; }
.success .bd { margin-top: 8px; font-size: 13px; line-height: 20px; color: var(--ink-muted); }

/* --- Class roster --- */
.rh { display: flex; align-items: center; gap: 12px; padding-top: 10px; }
.rh .tx { flex: 1; min-width: 0; }
.rh .ti { font-size: 27px; line-height: 28px; font-weight: 200; letter-spacing: -.6px; }
.rh .su { font-size: 12.5px; color: var(--ink-muted); margin-top: 2px; }
.rh .su b { font-weight: 600; color: var(--ink-accent); }
.yourcard { display: flex; align-items: center; gap: 10px; padding: 13px; margin-top: 16px; --pane-r: 22px; }
.yourcard .av { width: 46px; height: 46px; --a1: #C99B4E; --a2: #8A6430; }
.yourcard .tx { flex: 1; min-width: 0; }
.yourcard .ti { font-size: 15.5px; font-weight: 300; }
.yourcard .su { font-size: 12px; color: var(--ink-muted); margin-top: 1px; }
.pen36 { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--accent-line); display: flex; align-items: center; justify-content: center; color: var(--ink-accent); flex: none; }
.rrow { display: flex; align-items: center; gap: 13px; padding: 13px 14px; margin-bottom: 10px; }
.rrow .av { width: 50px; height: 50px; --rw: 2.5px; }
.rrow .nm { flex: 1; min-width: 0; font-size: 16px; font-weight: 300; }
.rrow .chev { color: var(--ink); opacity: .35; }
.rrow .gp { min-width: 92px; }
.leave { display: block; margin: 18px auto 0; padding: 12px 20px; font-size: 12px; color: var(--ink-faint); text-align: center; }

/* --- Classmate card --- */
.mh { display: flex; align-items: center; gap: 12px; padding-top: 10px; }
.mh .nm { font-size: 16px; font-weight: 300; color: var(--ink-muted); flex-shrink: 1; }
.mhero { margin-top: 16px; padding: 26px 20px 22px; display: flex; flex-direction: column; align-items: center; text-align: center; }
.mhero .av { width: 96px; height: 96px; --rw: 3px; box-shadow: 0 8px 30px rgba(0,0,0,.35); }
.mhero .nm { margin-top: 14px; font-size: 31px; line-height: 33px; font-weight: 200; letter-spacing: -.6px; }
.mhero .meta { margin-top: 7px; font-size: 13.5px; color: var(--ink-muted); }
.mhero .schip { margin-top: 13px; }
.flipbox { margin-top: 14px; perspective: 1200px; }
.flipper { position: relative; transform-style: preserve-3d; transition: transform 1s cubic-bezier(.3,.9,.3,1); }
.flipper.flipped { transform: rotateY(180deg); }
.flipper > .face { backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.flipper > .back { position: absolute; left: 0; right: 0; top: 0; transform: rotateY(180deg); }
.lockcard { padding: 24px 20px; display: flex; flex-direction: column; align-items: center; text-align: center; }
.lockcard .lb { width: 46px; height: 46px; border-radius: 50%; background: var(--accent-fill); display: flex; align-items: center; justify-content: center; color: var(--ink-accent); }
.lockcard .ti { margin-top: 12px; font-size: 15px; font-weight: 300; }
.lockcard .bd { margin-top: 5px; font-size: 12.5px; line-height: 18px; color: var(--ink-muted); }
.lockcta { margin-top: 16px; width: 100%; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 13px 0; border-radius: 999px; font-size: 15px; font-weight: 600; border: 1px solid transparent; }
.lockcta.req { box-shadow: 0 14px 36px rgba(255,190,90,.45); }
.lockcta.sent { background: var(--chip); border-color: var(--hair); color: var(--ink-muted); }
.reach { display: flex; gap: 10px; margin-top: 10px; }
.reach .tile { flex: 1; display: flex; flex-direction: column; align-items: center; padding: 14px 8px 12px; border-radius: 20px; border: 1px solid; }
.reach .tile.txt { background: var(--imessage-fill); border-color: var(--imessage-line); }
.reach .tile.txt .lb { margin-top: 4px; font-size: 12px; font-weight: 600; color: var(--imessage-text); }
.reach .tile .vl { margin-top: 1px; font-size: 10.5px; color: var(--ink-faint); }
.findrows { margin-top: 10px; padding: 4px 0; overflow: hidden; }
.findrow { display: flex; align-items: center; gap: 12px; padding: 12px 16px; }
.findrow + .findrow { border-top: 1px solid var(--hair-2); }
.findrow .tx { flex: 1; min-width: 0; }
.findrow .b { font-size: 14.5px; font-weight: 300; }
.findrow .h { font-size: 12px; color: var(--ink-muted); }
.findrow .ao { color: var(--ink); opacity: .4; }
.ctchips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.ctchips span { padding: 8px 13px; border-radius: 999px; background: var(--chip); border: 1px solid var(--hair); font-size: 12.5px; font-weight: 600; color: var(--ink-muted); }

/* --- Groups home --- */
.gh-title { padding-top: 34px; }
.yg { margin-top: 34px; padding: 8px 18px; }
.yg .eyebrow { margin: 8px 0 2px; }
.ygrow { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px; padding: 6px 0; }
.ygrow + .ygrow { border-top: 1px solid var(--hair-2); }
.ygrow .l { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; }
.ygrow .th { width: 40px; height: 40px; border-radius: 12px; flex: none; }
.ygrow .nm { font-size: 22px; line-height: 24px; font-weight: 200; }
.ygrow .r { font-size: 13px; color: var(--ink-muted); white-space: nowrap; }
.tiles { display: flex; flex-direction: column; gap: 14px; margin-top: 28px; }
.gtile { height: 300px; overflow: hidden; padding: 0; perspective: 600px; }
.gtile .wash { border-radius: 21px; }
.gtile .scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 30%, rgba(0,0,0,.6) 62%, rgba(0,0,0,.82) 100%); border-radius: 21px; }
.gtile .tb { position: absolute; left: 0; right: 0; bottom: 0; padding: 0 22px 22px; color: #f5efe4; }
.gtile .tb .t { font-size: 40px; line-height: 40px; font-weight: 200; letter-spacing: -.6px; text-shadow: 0 6px 30px rgba(0,0,0,.7); }
.gtile .tb .s { margin-top: 8px; font-size: 14px; line-height: 20px; color: #e6e2d8; }
.gtile .liveln { display: flex; align-items: center; gap: 8px; margin-top: 10px; color: #8ff0b4; font-size: 12.5px; letter-spacing: .2px; }
.gtile .liveln i { width: 8px; height: 8px; border-radius: 4px; background: #8ff0b4; box-shadow: 0 0 8px #8ff0b4; }
.gtile .a1 { position: absolute; width: 150px; left: 64%; top: 34%; transform: translate(-50%,-50%); filter: drop-shadow(0 20px 22px rgba(0,0,0,.45)); animation: bob 7s ease-in-out infinite; }
.gtile .a2 { position: absolute; width: 74px; left: 24%; top: 20%; transform: translate(-50%,-50%) rotate(-12deg); filter: drop-shadow(0 12px 16px rgba(0,0,0,.4)); animation: bob 6s ease-in-out -2s infinite; }
.gtile .a3 { position: absolute; width: 46px; left: 84%; top: 13%; transform: translate(-50%,-50%); animation: bob 5s ease-in-out -1s infinite; opacity: .9; }
@keyframes bob { 0%,100% { translate: 0 0 } 50% { translate: 0 -7px } }

/* --- Faith list --- */
.fl-title { margin-top: 8px; font-size: 46px; line-height: 46px; font-weight: 200; letter-spacing: -1.2px; text-shadow: var(--headline-shadow); }
.flist { display: flex; flex-direction: column; gap: 12px; margin-top: 30px; }
.frow { display: flex; align-items: center; gap: 14px; padding: 14px 16px 14px 14px; }
.frow .th { width: 72px; height: 72px; border-radius: 26px; flex: none; }
.frow .th img.obj { width: 70%; }
.frow .tx { flex: 1; min-width: 0; }
.frow .eyebrow { color: var(--ink-faint); margin-bottom: 6px; }
.frow .nm { font-size: 22px; line-height: 24px; font-weight: 200; }
.frow .nx { margin-top: 5px; font-size: 12.5px; line-height: 17.5px; color: var(--ink-faint); }
.frow .gp { align-self: flex-start; padding: 0 16px; }
.joined { display: inline-flex; align-items: center; height: 34px; padding: 0 16px; border-radius: 999px; background: var(--chip); font-size: 13px; font-weight: 600; color: var(--ink-muted); }

/* --- Sport page --- */
.sp-hero { margin-top: 8px; height: 172px; border-radius: 26px; perspective: 520px; }
.court3d { position: absolute; left: 50%; top: 58%; width: 300px; height: 190px; margin: -95px 0 0 -150px; transform: rotateX(58deg) rotateZ(-14deg); border-radius: 6px; background: linear-gradient(135deg, #3f8f6e, #2a6e55); box-shadow: 0 30px 40px rgba(0,0,0,.35); }
.court3d::before { content: ""; position: absolute; inset: 14px; border: 2px solid rgba(255,255,255,.85); }
.court3d::after { content: ""; position: absolute; left: 50%; top: 14px; bottom: 14px; width: 3px; margin-left: -1.5px; background: rgba(255,255,255,.95); box-shadow: 0 0 0 1px rgba(0,0,0,.15); }
.court3d .kit { position: absolute; left: 14px; right: 14px; top: 50%; height: 2px; background: rgba(255,255,255,.7); }
.sp-eye { margin: 18px 0 8px; color: var(--ink-faint); }
.sp-name { font-size: 34px; line-height: 36px; font-weight: 200; letter-spacing: -.6px; text-shadow: var(--headline-shadow); }
.sp-sub { margin-top: 6px; font-size: 14px; line-height: 20px; color: var(--ink-muted); }
.sections { display: flex; flex-direction: column; gap: 30px; margin-top: 22px; }
.sec-label { margin-bottom: 12px; color: var(--ink-faint); display: flex; align-items: center; gap: 8px; }
.lookpane { padding: 16px 18px; --pane-r: 24px; }
.lookrow { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.lookrow .ti { font-size: 22px; line-height: 25px; font-weight: 200; }
.lookrow .su { margin-top: 6px; font-size: 12.5px; line-height: 17.5px; color: var(--ink-muted); }
.sw { width: 52px; height: 32px; border-radius: 999px; padding: 3px; flex: none; position: relative; background: var(--chip); border: 1px solid var(--hair); transition: background .2s; }
.sw i { position: absolute; top: 2px; left: 3px; width: 26px; height: 26px; border-radius: 13px; background: var(--ink-muted); box-shadow: 0 2px 6px rgba(0,0,0,.3); transition: transform .2s ease-out, background .2s; }
.sw.on { border-color: transparent; background: linear-gradient(180deg, #ffdca0, #e6a63c); }
.sw.on i { transform: translateX(19px); background: #fff; }
.onln { display: flex; align-items: center; gap: 8px; margin-top: 12px; font-size: 12.5px; line-height: 13px; color: var(--good); }
.where { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--hair-2); }
.where .l { font-size: 14px; color: var(--ink-muted); }
.wchip { display: flex; align-items: center; gap: 6px; max-width: 220px; min-height: 34px; padding: 7px 12px; border-radius: 999px; border: 1px solid var(--hair); background: var(--chip); font-size: 12.5px; font-weight: 600; }
.wchip .ic { color: var(--ink-muted); }
.lcards { display: flex; flex-direction: column; gap: 12px; }
.lcard { display: flex; align-items: center; gap: 12px; padding: 12px 14px; }
.lcard .avw { position: relative; flex: none; }
.lcard .av { width: 48px; height: 48px; }
.lcard .lb { position: absolute; right: -1px; bottom: -1px; width: 14px; height: 14px; border-radius: 50%; background: var(--good); border: 2px solid var(--punch); }
.lcard .tx { flex: 1; min-width: 0; }
.lcard .nm { font-size: 16px; line-height: 20px; }
.lcard .nm em { font-style: normal; font-size: 10.5px; letter-spacing: 1.2px; color: var(--ink-accent); margin-left: 6px; }
.lcard .mt { margin-top: 2px; font-size: 12.5px; line-height: 17.5px; color: var(--ink-muted); }
.lcard .gp { align-self: flex-start; padding: 0 16px; }
.foot { margin-top: 12px; font-size: 12.5px; line-height: 17.5px; color: var(--ink-faint); }
.courts { display: flex; flex-direction: column; gap: 12px; }
.court { display: flex; align-items: center; gap: 12px; padding: 12px 16px 12px 12px; }
.court .th { width: 56px; height: 56px; border-radius: 16px; flex: none; }
.court .th img.obj { width: 72%; }
.court .tx { flex: 1; min-width: 0; }
.court .nm { font-size: 16px; line-height: 20px; }
.court .io { display: inline-block; margin-left: 8px; padding: 5px 9px; border-radius: 999px; border: 1px solid var(--hair); background: var(--chip); font-size: 10.5px; line-height: 11px; font-weight: 600; letter-spacing: .6px; text-transform: uppercase; color: var(--ink-muted); vertical-align: 2px; }
.court .dt { margin-top: 4px; font-size: 12.5px; color: var(--ink-muted); }
.court .dir { font-size: 13px; font-weight: 600; color: var(--ink-accent); padding-left: 8px; }
.mgrid { display: flex; flex-wrap: wrap; justify-content: space-between; row-gap: 12px; }
.mcard { width: 48%; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 16px 12px 14px; }
.mcard .av { width: 56px; height: 56px; }
.mcard .nm { margin-top: 10px; font-size: 16px; line-height: 19px; }
.mcard .mt { margin-top: 2px; font-size: 12.5px; line-height: 17.5px; color: var(--ink-muted); }

/* --- Market --- */
.mk-head { display: flex; align-items: center; gap: 11px; padding-top: 10px; }
.mk-head .tx { flex: 1; }
.mk-head .su { margin-top: 4px; font-size: 13.5px; color: var(--ink-muted); }
.search { position: relative; margin-top: 12px; height: 50px; border-radius: 999px; background: var(--chip); border: 1px solid var(--hair); display: flex; align-items: center; padding-left: 47px; font-size: 15.5px; color: var(--ink-faint); }
.search .ic { position: absolute; left: 18px; top: 50%; margin-top: -8px; color: var(--ink-faint); }
.search .typed { color: var(--ink); }
.search .caret { display: inline-block; width: 1.5px; height: 19px; background: #e6a63c; margin-left: 1px; vertical-align: -3px; animation: caret 1s steps(1) infinite; }
@keyframes caret { 50% { opacity: 0 } }
.fchips { display: flex; gap: 7px; margin-top: 12px; overflow-x: auto; scrollbar-width: none; padding: 0 14px 0 2px; margin-left: -2px; margin-right: -2px; }
.fchips::-webkit-scrollbar { display: none; }
.fchips button { flex: none; padding: 9px 15px; border-radius: 999px; background: var(--chip); border: 1px solid var(--hair); font-size: 13px; font-weight: 600; color: var(--ink-muted); transition: background-color .2s ease, color .2s ease; }
.fchips button.on { background: #e6a63c; border-color: #e6a63c; color: #2a1a00; }
.mgrid2 { display: flex; flex-wrap: wrap; justify-content: space-between; row-gap: 12px; margin-top: 14px; }
.mtile { width: 48.5%; padding: 0; overflow: hidden; transition: opacity .35s ease, transform .5s cubic-bezier(.2,.9,.3,1); }
.mtile.out { display: none; }
.mtile .ph { position: relative; aspect-ratio: 1; border-radius: 21px 21px 0 0; overflow: hidden; }
.mtile .ph img.obj { width: 70%; }
.mtile .size { position: absolute; left: 9px; bottom: 9px; padding: 4px 10px; border-radius: 999px; background: rgba(15,9,4,.72); color: #f5efe4; font-size: 10.5px; font-weight: 600; }
.mtile .inf { height: 74px; padding: 9px 11px 11px; }
.mtile .ti { font-size: 13.5px; line-height: 17px; font-weight: 600; }
.mtile .pr { margin-top: 3px; font-size: 13.5px; line-height: 17px; font-weight: 300; color: var(--good); }
.mtile .pr small { font-size: 10.5px; font-weight: 600; color: var(--ink-faint); }
.fab { position: absolute; right: 16px; bottom: 110px; z-index: 19; padding: 13px 20px; border-radius: 999px; font-size: 14px; font-weight: 600; box-shadow: 0 14px 36px rgba(255,190,90,.45); }
.housing { margin-top: 18px; padding: 22px; display: flex; flex-direction: column; align-items: center; text-align: center; --pane-r: 24px; }
.housing .ht { width: 52px; height: 52px; border-radius: 18px; background: var(--chip-strong); border: 1px solid var(--hair); display: flex; align-items: center; justify-content: center; color: var(--ink-muted); }
.housing .ti { margin-top: 16px; font-size: 19px; font-weight: 300; }
.housing .bd { margin-top: 8px; font-size: 13px; line-height: 19px; color: var(--ink-muted); }

/* --- Rides --- */
.rd-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 10px; }
.drv { display: flex; align-items: center; gap: 9px; height: 40px; padding: 0 11px 0 14px; border-radius: 999px; background: var(--chip); border: 1px solid var(--hair); font-size: 12.5px; color: var(--ink-muted); }
.drv .trk { position: relative; width: 34px; height: 20px; border-radius: 999px; background: var(--track-off); border: 1px solid var(--hair); }
.drv .trk i { position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: var(--ink-faint); }
.trust { margin-top: 3px; font-size: 12.5px; color: var(--ink-muted); }
.door { margin-top: 12px; height: 60px; display: flex; align-items: center; justify-content: center; border-radius: 999px; font-size: 16.5px; font-weight: 600; box-shadow: 0 14px 36px rgba(255,190,90,.45); }
.countrow { display: flex; align-items: baseline; justify-content: space-between; margin: 22px 0 2px; }
.countrow .note { font-size: 12.5px; line-height: 17px; color: var(--ink-faint); }
.feed { position: relative; }
.frow2 { display: flex; align-items: center; gap: 8px; height: 56px; border-bottom: 1px solid var(--hair); overflow: hidden; }
.frow2 .nm { font-size: 15px; line-height: 20px; font-weight: 300; }
.frow2 .ago { margin-left: auto; font-size: 11px; line-height: 14px; color: var(--ink-faint); }
.frow2 .ago.fresh { color: var(--good); }
.frow2.new { animation: feedIn .7s cubic-bezier(.2,.9,.3,1.1) both; }
@keyframes feedIn { from { height: 0; opacity: 0; transform: translateY(-14px) rotateX(-60deg) } to { height: 56px; opacity: 1; transform: none } }
.fcap { margin-top: 14px; text-align: center; font-size: 12.5px; line-height: 17px; color: var(--ink-faint); }
.tcards { display: flex; flex-direction: column; gap: 10px; }
.tcard { padding: 16px; --pane-r: 16px; }
.tcard .ds { font-size: 22px; line-height: 26px; font-weight: 200; letter-spacing: -.3px; }
.tcard .wh { margin-top: 3px; font-size: 15px; line-height: 20px; font-weight: 600; color: var(--ink-muted); }
.tcard .ft { display: flex; align-items: center; gap: 6px; margin-top: 10px; font-size: 12.5px; color: var(--ink-muted); }
.tcard .ft .ago { margin-left: auto; color: var(--ink-faint); }
.tcard .ft .ago.fresh { color: var(--good); }

/* --- Deals --- */
.dl-sub { margin-top: 3px; font-size: 12.5px; color: var(--ink-muted); }
.dsec { margin-top: 22px; }
.dsec .slabel { margin: 0; }
.dfeat { padding: 15px; margin-top: 10px; display: flex; gap: 14px; align-items: center; }
.dfeat .tx { flex: 1; min-width: 0; }
.dfeat .biz { font-size: 11px; font-weight: 600; letter-spacing: .6px; text-transform: uppercase; color: var(--ink-muted); }
.dfeat .of { margin-top: 5px; font-size: 22px; font-weight: 200; letter-spacing: -.3px; }
.dfeat .st { display: flex; align-items: center; gap: 7px; margin-top: 9px; font-size: 12px; color: var(--good); }
.dfeat .st.later { color: var(--ink-muted); }
.dfeat .art { width: 64px; height: 64px; border-radius: 18px; flex: none; }
.dfeat .art img.obj { width: 78%; }
.dlive { padding: 15px; margin-top: 10px; }
.dlive .hd { display: flex; align-items: baseline; gap: 10px; }
.dlive .of { flex: 1; font-size: 20px; font-weight: 300; letter-spacing: -.3px; }
.dlive .cd { font-size: 12.5px; font-weight: 600; color: var(--good); white-space: nowrap; font-variant-numeric: tabular-nums; }
.dlive .mt { margin-top: 7px; font-size: 11.5px; color: var(--ink-faint); }
.drow { display: flex; align-items: center; gap: 11px; padding: 12px; margin-top: 9px; }
.drow .day { min-width: 34px; text-align: center; font-size: 11px; font-weight: 600; color: var(--ink-muted); }
.drow .tx { flex: 1; min-width: 0; }
.drow .of { font-size: 14px; font-weight: 300; }
.drow .mt { margin-top: 2px; font-size: 11.5px; color: var(--ink-faint); }
.drow .hr { font-size: 11.5px; color: var(--ink-faint); white-space: nowrap; }
.redeem { position: absolute; inset: 0; z-index: 25; background: #e6a63c; color: #2a1a00; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 0 28px; text-align: center; }
.redeem .x { position: absolute; left: 22px; top: 69px; padding: 6px; }
.redeem .bn { font-size: 11px; font-weight: 600; letter-spacing: 1.4px; opacity: .72; }
.redeem .bz { margin-top: 26px; font-size: 15px; font-weight: 300; opacity: .8; }
.redeem .of { margin-top: 6px; font-size: 36px; line-height: 40px; font-weight: 200; letter-spacing: -.6px; }
.redeem .clk { margin-top: 40px; display: flex; align-items: baseline; font-variant-numeric: tabular-nums; }
.redeem .clk b { font-size: 62px; font-weight: 200; letter-spacing: -1.2px; }
.redeem .clk span { margin-left: 6px; font-size: 34px; font-weight: 200; letter-spacing: -.6px; opacity: .62; }
.redeem .dt { margin-top: 6px; font-size: 13.5px; font-weight: 600; opacity: .72; }
.redeem .in { margin-top: 40px; font-size: 17px; font-weight: 300; }
.redeem .fn { margin-top: 8px; font-size: 12.5px; opacity: .7; }

/* ---------- assembly helpers ---------- */
.app .pc { will-change: transform, opacity; }
.app.assembling .pc { transition: none; }
.lockflash { position: absolute; inset: -2px; border-radius: inherit; pointer-events: none; box-shadow: 0 0 0 1.5px rgba(255,220,160, var(--lf, 0)), 0 0 40px 6px rgba(255,190,110, calc(var(--lf, 0) * .7)); }

/* ============================================================
   Demo controller additions
   ============================================================ */
.app .bw { width: 100%; }
.app-sky { border-radius: inherit; }
.app-view { perspective: 1400px; }
.app.notrans, .app.notrans * { transition: none !important; }
.app .scr-body { overflow-y: hidden; }
.app.free .scr-body { overflow-y: auto; }
.app .fchips { overflow-x: hidden; }
.app.free .fchips { overflow-x: auto; }
.scr { z-index: 1; }
.scr.is-top { z-index: 2; }
.scr.st-leave-pop { z-index: 3; }
.app-dock { transition: transform .5s cubic-bezier(.2,.8,.2,1), opacity .35s ease; }
.app-dock.away { transform: translateY(150%); opacity: 0; pointer-events: none; }
.app-dock span { line-height: 12.5px; }
.app.on-dark .app-status { color: #fff; }
.app.on-dark .app-homeind { background: #fff; }
.app.on-gold .app-status { color: #2a1a00; }
.app.on-gold .app-homeind { background: #2a1a00; opacity: .4; }
.app.on-gold .app-sky, .app.on-dark .app-sky { opacity: 0; transition: opacity .3s ease; }
.app-sky { transition: opacity .3s ease; }

/* assembling: the screen opens up so pieces can fly in through real 3D space */
.app.assembling { overflow: visible; isolation: auto; }
.app.assembling .app-view, .app.assembling .scr, .app.assembling .scr-body, .app.assembling .pcg { transform-style: preserve-3d; }
.app.assembling .app-view { perspective: none; }
.app.assembling .scr-body { overflow: visible; }
.app.assembling .scr { transition: none; }
.app .lockflash { z-index: 5; border-radius: inherit; }
.app-dock .lockflash { border-radius: 33px; }

/* power-on */
.app-power { position: absolute; inset: 0; z-index: 60; border-radius: inherit; background: #000; display: flex; align-items: center; justify-content: center; pointer-events: none; overflow: hidden; }
.app-power .pw-glow { position: absolute; left: 50%; top: 50%; width: 420px; height: 420px; margin: -210px 0 0 -210px; border-radius: 50%; background: radial-gradient(circle, rgba(255,205,140,.55) 0, rgba(255,170,80,.16) 38%, transparent 68%); opacity: var(--pm, 0); transform: scale(calc(.5 + var(--pm, 0) * .5 + var(--pb, 0) * 2.2)); }
.app-power .pw-mark { position: relative; opacity: calc(var(--pm, 0) * (1 - var(--pb, 0))); transform: scale(calc(.72 + var(--pm, 0) * .28 + var(--pb, 0) * .8)); filter: drop-shadow(0 0 22px rgba(255,190,110,.85)); }

/* pressed looks the tour uses to show a tap */
.app .pressed { transform: scale(.975); transition: transform .18s ease; }
.app .pane.pressed { border-top-color: var(--pane-rim-press); box-shadow: var(--pane-out), 0 0 0 2px var(--accent-line); }
.app .ccard, .app .rrow, .app .dfeat, .app .scanpanel, .app .pbtn, .app .mtile, .app .tcard { transition: transform .25s ease, box-shadow .25s ease; }

/* iOS alert (the scan source chooser) */
.ios-alert { position: absolute; inset: 0; z-index: 30; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.32); opacity: 0; pointer-events: none; transition: opacity .25s ease; }
.ios-alert.on { opacity: 1; }
.ios-alert .ab { width: 270px; border-radius: 14px; overflow: hidden; background: rgba(36,36,40,.92); color: #fff; text-align: center; transform: scale(1.14); transition: transform .32s cubic-bezier(.2,.9,.3,1.25); -webkit-backdrop-filter: blur(30px); backdrop-filter: blur(30px); }
html[data-ink="light"] .ios-alert .ab { background: rgba(242,242,247,.94); color: #000; }
.ios-alert.on .ab { transform: scale(1); }
.ios-alert .at { padding: 19px 16px 2px; font-size: 17px; font-weight: 600; }
.ios-alert .am { padding: 2px 16px 19px; font-size: 13px; line-height: 1.35; font-weight: 400; }
.ios-alert .abt { height: 44px; display: flex; align-items: center; justify-content: center; border-top: .5px solid rgba(128,128,140,.45); font-size: 17px; font-weight: 400; color: #0a84ff; transition: background-color .2s; }
html[data-ink="light"] .ios-alert .abt { color: #007aff; }
.ios-alert .abt.c { font-weight: 600; }
.ios-alert .abt.hl { background: rgba(128,128,140,.25); }

/* confirm + success */
.cf-matching { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-top: 30px; font-size: 11.5px; color: var(--ink-faint); text-align: center; }
.cf-back { margin-top: 14px; text-align: center; font-size: 11.5px; color: var(--ink-faint); }
.cf-rows { perspective: 900px; }
.success.pop { animation: successIn .7s cubic-bezier(.2,.9,.3,1.2) both; }
.success.pop .disc { animation: discIn .8s cubic-bezier(.2,.9,.3,1.4) .05s both; }
@keyframes successIn { from { opacity: 0; transform: translateY(30px) rotateX(-25deg) } to { opacity: 1; transform: none } }
@keyframes discIn { from { transform: scale(.3) rotateY(-180deg) } to { transform: none } }

/* card */
.flipper { transition: transform .9s cubic-bezier(.5,0,.2,1), height .6s cubic-bezier(.3,.9,.3,1); }
.lockcta.green-cta { background: var(--good-solid); border-color: var(--good); color: var(--good-ink); }
.lockcta .spinner { color: currentColor; }
.flipper > .back { padding-top: 2px; visibility: hidden; }
.flipper.showback > .back { visibility: visible; }
.flipper.showback > .front { visibility: hidden; }
.reach .tile { text-decoration: none; }

/* small pops */
.jpop { animation: jpop .5s cubic-bezier(.2,.9,.3,1.5) both; }
@keyframes jpop { from { transform: scale(.6); opacity: 0 } to { transform: none; opacity: 1 } }
.feedin { animation: feedin .7s cubic-bezier(.2,.9,.3,1.15) both; }
@keyframes feedin { from { opacity: 0; transform: translateY(-16px) rotateX(-50deg) } to { opacity: 1; transform: none } }
.mtile.in { animation: tileIn .6s cubic-bezier(.2,.9,.3,1.1) var(--d, 0ms) both; }
@keyframes tileIn { from { opacity: 0; transform: translateY(18px) rotateX(-38deg) scale(.95) } to { opacity: 1; transform: none } }
.lanein { animation: laneIn .55s cubic-bezier(.2,.9,.3,1) both; }
@keyframes laneIn { from { opacity: 0; transform: translateY(14px) } to { opacity: 1; transform: none } }
.mgrid2 { perspective: 900px; }
.gp.busy { opacity: .45; }

/* featured deal art tile */
.dfeat .art { border-radius: 18px; }
.yg .ygrow .th { overflow: hidden; }

/* reduced motion: no 3D travel inside the phone */
@media (prefers-reduced-motion: reduce) {
  .app .scr { transition: opacity .2s ease !important; transform: none !important; }
  .app .float, .app .gtile img, .mtile.in, .feedin, .lanein, .jpop, .success.pop, .success.pop .disc { animation: none !important; }
  .flipper { transition: none; }
}