/* SLOP CENTER — the phone (Phone UI). A dark mobile OS of our own: ink glass, soft
   aurora wallpaper, one accent per app (Paper Plane sky, Lakeview green, Z ink+lime,
   Calendar coral). Sizes are em of --pf (set by phone.js from the phone height). */

.ph {
  position: absolute; inset: 0; pointer-events: none;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased; font-synthesis: none; text-rendering: optimizeLegibility;
  --pp: #3fb6f5; --pp2: #1f8fe8; --ppg: linear-gradient(180deg, #55c3ff, #2591ea);
  --ink: #0b0d13; --bub: #1e2331; --bub2: #252b3b;
  --t1: #f3f6fb; --t2: rgba(226, 232, 244, .68); --t3: rgba(226, 232, 244, .44);
  --line: rgba(255, 255, 255, .075); --s1: rgba(255, 255, 255, .045); --s2: rgba(255, 255, 255, .08); --s3: rgba(255, 255, 255, .13);
  --red: #ff5d6c; --amber: #ffb547; --green: #39d98a; --coral: #ff6b57; --lime: #d9ff3d;
  --ease-out: cubic-bezier(.2, .85, .25, 1);
}
:where(.ph) button { font: inherit; color: inherit; border: 0; background: none; padding: 0; margin: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
:where(.ph) svg { display: block; width: 100%; height: 100%; }

/* ------------------------------------------------------------------ scrim + hold */
.ph-scrim {
  position: absolute; inset: 0; opacity: 0; pointer-events: none;
  background: radial-gradient(70% 90% at 64% 50%, rgba(4, 5, 10, .12), rgba(4, 5, 10, .52));
  transition: opacity .3s ease;
}
.ph.open .ph-scrim { opacity: 1; pointer-events: auto; }

.ph-hold {
  position: absolute; left: var(--px); top: var(--py); width: var(--pw); height: var(--ph);
  pointer-events: none; visibility: hidden; will-change: transform;
  transform: translate3d(6%, calc(100vh - var(--py) + 24px), 0) rotate(-9deg);
  transition: transform .3s cubic-bezier(.55, 0, .8, .2), visibility 0s linear .3s;
  touch-action: none;
}
.ph.open .ph-hold {
  visibility: visible; pointer-events: auto; transform: none;
  transition: transform .52s cubic-bezier(.16, 1, .3, 1.04), visibility 0s;
}
.ph-hold.drag { transition: none !important; }
.ph.ph-rm .ph-hold { transform: none; opacity: 0; transition: opacity .2s, visibility 0s linear .2s; }
.ph.ph-rm.open .ph-hold { opacity: 1; transition: opacity .2s, visibility 0s; }

/* ------------------------------------------------------------------ hardware */
.ph-dev {
  position: absolute; inset: 0; padding: var(--bz); font-size: var(--pf); line-height: 1.3; color: var(--t1);
  border-radius: calc(var(--pw) * .155);
  background: linear-gradient(150deg, #3a3e48 0%, #16181d 22%, #0f1115 60%, #262931 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .09), inset 0 1.5px 0 rgba(255, 255, 255, .16),
    0 0 0 1px rgba(0, 0, 0, .6), 0 34px 70px -14px rgba(0, 0, 0, .7), 0 14px 26px rgba(0, 0, 0, .45);
  letter-spacing: -.005em;
}
.ph-dev > i { position: absolute; width: 3px; background: linear-gradient(90deg, #2b2e36, #4a4e59); border-radius: 2px; }
.ph-btn-a { left: -2px; top: 19%; height: 5%; }
.ph-btn-b { left: -2px; top: 27%; height: 9%; }
.ph-btn-c { right: -2px; top: 24%; height: 12%; }
.ph-scr {
  position: relative; width: 100%; height: 100%; overflow: hidden; isolation: isolate;
  border-radius: calc(var(--pw) * .155 - var(--bz)); background: var(--ink);
  display: flex; flex-direction: column; box-shadow: 0 0 0 1px rgba(0, 0, 0, .8);
}
.ph-island {
  position: absolute; z-index: 6; left: 50%; top: calc(var(--bz) + var(--pw) * .028);
  width: calc(var(--pw) * .27); height: calc(var(--pw) * .074); transform: translateX(-50%);
  background: #000; border-radius: 999px; pointer-events: none;
}
.ph-island::after { content: ""; position: absolute; right: 18%; top: 28%; width: 22%; aspect-ratio: 1; height: auto; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #2c3a5a, #0a0d16 60%); }
.ph-wall {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(120% 70% at 12% 8%, rgba(98, 104, 255, .55), transparent 62%),
    radial-gradient(95% 60% at 100% 74%, rgba(18, 190, 172, .42), transparent 62%),
    radial-gradient(85% 50% at 40% 106%, rgba(63, 182, 245, .40), transparent 70%),
    linear-gradient(180deg, #171b42 0%, #0b0f20 55%, #06131b 100%);
}
.ph-wall::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 4%; height: 22%; opacity: .5;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 60' preserveAspectRatio='none'%3E%3Cg fill='none' stroke='%23fff' stroke-opacity='.12' stroke-width='.8'%3E%3Cpath d='M0 12q25-6 50 0t50 0 50 0 50 0'/%3E%3Cpath d='M0 26q25-6 50 0t50 0 50 0 50 0'/%3E%3Cpath d='M0 40q25-6 50 0t50 0 50 0 50 0'/%3E%3Cpath d='M0 54q25-6 50 0t50 0 50 0 50 0'/%3E%3C/g%3E%3C/svg%3E") center / 100% 100% no-repeat;
}

/* ------------------------------------------------------------------ status bar */
.ph-status {
  position: relative; z-index: 4; flex: none; height: max(22px, calc(var(--pw) * .118));
  display: flex; align-items: center; justify-content: space-between;
  padding: calc(var(--pw) * .012) calc(var(--pw) * .085) 0;
  font-weight: 650; font-size: max(11px, .86em); font-variant-numeric: tabular-nums; letter-spacing: 0;
  touch-action: none;
}
.sb-r { display: flex; align-items: center; gap: .3em; }
.sb-sig { display: flex; align-items: flex-end; gap: 1.5px; height: .75em; }
.sb-sig i { width: 2.5px; border-radius: 1px; background: currentColor; }
.sb-sig i:nth-child(1) { height: 35%; } .sb-sig i:nth-child(2) { height: 55%; } .sb-sig i:nth-child(3) { height: 78%; } .sb-sig i:nth-child(4) { height: 100%; opacity: .35; }
.sb-wifi { width: 1.05em; height: 1.05em; }
.sb-pct { font-size: max(11px, .82em); font-weight: 600; opacity: .9; }
.sb-batt {
  position: relative; width: 1.75em; height: .86em; border-radius: .26em; border: 1.2px solid rgba(255, 255, 255, .55); padding: 1.5px;
}
.sb-batt::after { content: ""; position: absolute; right: -3.5px; top: 30%; width: 2px; height: 40%; border-radius: 0 2px 2px 0; background: rgba(255, 255, 255, .55); }
.sb-batt-fill { display: block; width: 100%; height: 100%; border-radius: .14em; background: #fff; transform-origin: left center; transition: transform .6s; }
.sb-batt.low .sb-batt-fill { background: var(--red); }

/* ------------------------------------------------------------------ views */
.ph-views { position: relative; z-index: 2; flex: 1; min-height: 0; }
.ph-view { position: absolute; inset: 0; display: none; flex-direction: column; min-height: 0; }
.ph-view.on { display: flex; }
.ph-view:not(.v-home) { background: var(--ink); }
.ph-scroll {
  flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch; touch-action: pan-y; scrollbar-width: none;
}
.ph-scroll::-webkit-scrollbar { display: none; }
.ph-homebar { position: relative; z-index: 5; flex: none; height: max(16px, 1.45em); width: 100%; display: grid; place-items: center; }
.ph-homebar i { display: block; width: 36%; height: 4px; border-radius: 3px; background: rgba(255, 255, 255, .78); }
.ph-scr:not([data-view="home"]) .ph-homebar { background: var(--ink); }
.ph-scr:not([data-view="home"]) .ph-status { background: rgba(14, 16, 24, .92); }
.ph-scr[data-view="z"] .ph-status { background: #000; }
.ph-scr[data-view="bank"] .ph-status { background: #0c2e28; }
.ph-scr[data-view="chat"] .ph-homebar { background: rgba(14, 16, 24, .96); }
.ph-scr[data-view="z"] .ph-homebar { background: #000; }

/* app header (shared) */
.ap-head {
  flex: none; position: relative; display: flex; align-items: center; gap: .35em;
  min-height: max(44px, 3.5em); padding: 0 .75em 0 .15em; border-bottom: 1px solid var(--line);
  background: rgba(14, 16, 24, .92); touch-action: none;
}
.ap-back { flex: none; width: 44px; height: 44px; display: grid; place-items: center; color: var(--pp); border-radius: 12px; }
.ap-back svg { width: 1.45em; height: 1.45em; }
.ap-back:active { background: var(--s2); }
.ap-title { margin: 0; font-size: 1.24em; font-weight: 750; letter-spacing: -.02em; flex: 1; }
.ap-head-ic { width: 1.9em; height: 1.9em; border-radius: 28%; padding: .32em; display: grid; }
.ap-head-ic.pp { background: var(--ppg); box-shadow: 0 4px 12px -4px rgba(63, 182, 245, .6); }

.ph-empty { display: flex; flex-direction: column; align-items: center; gap: .35em; padding: 3.4em 1.4em; text-align: center; color: var(--t2); font-size: .95em; }
.ph-empty b { color: var(--t1); font-size: 1.05em; }
.ph-empty-ic { width: 3em; height: 3em; border-radius: 26%; padding: .6em; margin-bottom: .4em; opacity: .9; }
.ph-empty-ic.pp { background: var(--ppg); }
.ph-empty-ic.z { background: #000; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); }

/* ------------------------------------------------------------------ HOME */
.v-home { padding: .3em .75em 0; justify-content: flex-start; touch-action: none; }
.hm-widget { padding: .55em .35em 0; text-align: center; }
.hm-date { font-size: .74em; font-weight: 650; letter-spacing: .1em; color: rgba(255, 255, 255, .8); }
.hm-time {
  font-size: 3.6em; font-weight: 250; line-height: 1.02; letter-spacing: -.03em; font-variant-numeric: tabular-nums;
  text-shadow: 0 6px 24px rgba(10, 12, 40, .4);
}
.hm-time small { font-size: .26em; font-weight: 600; letter-spacing: .04em; margin-left: .2em; opacity: .75; vertical-align: .9em; }
.hm-chips { display: flex; justify-content: center; flex-wrap: wrap; gap: .35em; margin-top: .45em; }
.hm-chip {
  display: inline-flex; align-items: center; gap: .32em; padding: .32em .65em .32em .5em; border-radius: 99px;
  font-size: .78em; font-weight: 650; background: rgba(255, 255, 255, .12); color: rgba(255, 255, 255, .92);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08);
}
.hm-chip-ic { width: 1.05em; height: 1.05em; flex: none; }
.hm-chip.rent.due { background: rgba(255, 93, 108, .22); color: #ffd3d8; box-shadow: inset 0 0 0 1px rgba(255, 93, 108, .4); }
.hm-chip.pip { background: rgba(63, 182, 245, .22); color: #d6f0ff; box-shadow: inset 0 0 0 1px rgba(63, 182, 245, .45); }
.hm-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .35em 0; padding: 0 .2em; margin-top: clamp(.5em, 4%, 2.2em); }
.hm-dock-wrap { margin-top: auto; padding: .5em 0 .35em; }
.hm-dock {
  display: flex; justify-content: space-around; padding: .42em .3em; border-radius: 1.55em;
  background: rgba(255, 255, 255, .13); -webkit-backdrop-filter: blur(16px) saturate(1.3); backdrop-filter: blur(16px) saturate(1.3);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1);
}
.ap-btn { display: flex; flex-direction: column; align-items: center; gap: .3em; min-width: 44px; min-height: 44px; padding: .1em 0; }
.ap-ic-wrap { position: relative; display: block; }
.ap-ic {
  display: grid; place-items: center; width: 3.15em; height: 3.15em; border-radius: 27%; padding: .62em;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), inset 0 -1px 0 rgba(0, 0, 0, .18), 0 6px 14px -6px rgba(0, 0, 0, .6);
  transition: transform .14s var(--ease-out), filter .14s;
}
.ap-btn.dock .ap-ic { width: 3.25em; height: 3.25em; }
.ap-btn:active .ap-ic { transform: scale(.9); filter: brightness(.85); }
.ap-lbl { font-size: .8em; font-weight: 550; color: rgba(255, 255, 255, .9); text-shadow: 0 1px 3px rgba(0, 0, 0, .5); white-space: nowrap; }
.ap-ic.pp { background: linear-gradient(160deg, #6fd0ff, #1f8fe8 70%); }
.ap-ic.bank { background: linear-gradient(160deg, #3fe0aa, #0b7c62 75%); }
.ap-ic.z { background: linear-gradient(160deg, #262626, #000); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16), 0 6px 14px -6px rgba(0, 0, 0, .6); padding: .66em; }
.ap-ic.cal { background: #fbfbfd; padding: 0; overflow: hidden; }
.ap-ic.photos { background: linear-gradient(160deg, #ffc58a, #f2668b 80%); }
.ap-ic.notes { background: linear-gradient(160deg, #ffe680, #f5b919 80%); }
.ap-ic.lake { background: linear-gradient(170deg, #78d7ff, #3c6fe0 85%); }
.ap-ic.loudr { background: linear-gradient(160deg, #ff8a4c, #e5262f 80%); }
.ap-ic.infi { background: linear-gradient(160deg, #c79bff, #7046f0 80%); padding: .7em; }
.ap-ic.settings { background: linear-gradient(160deg, #8b93a7, #4a5165 85%); padding: .66em; }
.ci { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; height: 100%; line-height: 1; }
.ci-wd { font-size: .62em; font-weight: 750; color: var(--coral); letter-spacing: .06em; margin-top: .1em; }
.ci-n { font-size: 1.42em; font-weight: 400; color: #15161a; letter-spacing: -.03em; margin-top: .05em; }
.ap-badge {
  position: absolute; top: -.38em; right: -.45em; min-width: 1.5em; height: 1.5em; padding: 0 .38em; border-radius: 99px;
  background: var(--red); color: #fff; font-size: .74em; font-weight: 750; line-height: 1.5em; text-align: center;
  box-shadow: 0 0 0 2px rgba(11, 13, 19, .55); transform: scale(0); transition: transform .22s cubic-bezier(.2, .9, .3, 1.4);
}
.ap-badge.on { transform: scale(1); }

/* ------------------------------------------------------------------ PAPER PLANE list */
.pp-scroll { padding: .25em .55em 1em; }
.pp-sec { font-size: .72em; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--t3); padding: .95em .35em .45em; }
.ph-av { display: block; flex: none; width: 2.75em; height: 2.75em; border-radius: 50%; object-fit: cover; background: #222736; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06); }
.ph-av.lg { width: 3.3em; height: 3.3em; }
.ph-av.sm { width: 2.2em; height: 2.2em; }
.pp-pin {
  position: relative; width: 100%; display: flex; align-items: center; gap: .7em; text-align: left; min-height: 44px;
  padding: .7em .75em; border-radius: 1.15em;
  background: linear-gradient(135deg, rgba(63, 182, 245, .2), rgba(122, 104, 255, .12));
  box-shadow: inset 0 0 0 1px rgba(63, 182, 245, .32), 0 10px 24px -14px rgba(63, 182, 245, .55);
}
.pp-pin:active { filter: brightness(1.15); }
.pp-pin-av { position: relative; flex: none; }
.pp-pin-av .ph-av { box-shadow: 0 0 0 2px rgba(63, 182, 245, .7), 0 0 14px rgba(63, 182, 245, .45); }
.pp-pin-av .pp-count { position: absolute; top: -.25em; right: -.35em; }
.pp-pin-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .12em; }
.pp-pin-name { font-weight: 750; font-size: 1.04em; display: flex; align-items: center; gap: .4em; }
.pp-pin-tag { font-size: .6em; font-weight: 800; letter-spacing: .08em; padding: .2em .45em; border-radius: 99px; background: rgba(63, 182, 245, .25); color: #bfe8ff; }
.pp-pin .pp-row-time { align-self: flex-start; }
.pp-row {
  width: 100%; display: flex; align-items: center; gap: .65em; text-align: left; min-height: max(44px, 3.9em);
  padding: .45em .4em; border-radius: .9em;
}
.pp-row:active { background: var(--s2); }
.pp-row + .pp-row { box-shadow: 0 -1px 0 var(--line); }
.pp-row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .12em; }
.pp-row-top { display: flex; align-items: baseline; gap: .5em; }
.pp-row-name { flex: 1; min-width: 0; font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pp-row-time { flex: none; font-size: .76em; color: var(--t3); font-variant-numeric: tabular-nums; }
.pp-row-prev { font-size: .88em; color: var(--t2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.28; }
.pp-row.unread .pp-row-name { font-weight: 800; }
.pp-row.unread .pp-row-prev { color: var(--t1); }
.pp-row-prev.typing { color: var(--pp); font-style: italic; }
.pp-count {
  flex: none; min-width: 1.55em; height: 1.55em; padding: 0 .42em; border-radius: 99px; background: var(--pp); color: #04121d;
  font-size: .76em; font-weight: 800; line-height: 1.55em; text-align: center; box-shadow: 0 0 0 2px var(--ink);
}

/* ------------------------------------------------------------------ PAPER PLANE chat */
.chat-head { gap: .5em; }
.chat-av { width: 2.25em; height: 2.25em; }
.chat-title { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.2; }
.chat-name { font-weight: 750; font-size: 1em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-sub { font-size: .74em; color: var(--t3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-sub.typing { color: var(--pp); }
.chat-body {
  display: flex; flex-direction: column; align-items: flex-start; padding: .35em .65em .8em;
  background: radial-gradient(120% 50% at 50% 0%, rgba(63, 182, 245, .06), transparent 70%), var(--ink);
}
.pp-b {
  max-width: 84%; width: fit-content; margin-top: .55em; padding: .5em .78em .52em;
  font-size: calc(1em * var(--ts, 1)); line-height: 1.32; border-radius: 1.2em; overflow-wrap: anywhere;
  -webkit-user-select: text; user-select: text;
}
.pp-b.cont { margin-top: .2em; }
.pp-b.in { background: var(--bub); color: var(--t1); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .04); }
.pp-b.in.cont { border-top-left-radius: .45em; }
.pp-b.in.tail { border-bottom-left-radius: .35em; }
.pp-b.out { align-self: flex-end; background: var(--ppg); color: #fff; font-weight: 550; box-shadow: 0 4px 14px -6px rgba(31, 143, 232, .7); }
.pp-b.out.cont { border-top-right-radius: .45em; }
.pp-b.out.tail { border-bottom-right-radius: .35em; }
.pp-sep { align-self: center; margin: 1em 0 .2em; font-size: .72em; color: var(--t3); font-variant-numeric: tabular-nums; }
.pp-sep b { color: var(--t2); font-weight: 650; }
.pp-note { align-self: center; margin: .6em 0 .1em; font-size: .76em; color: var(--t3); }
.pp-notice {
  align-self: stretch; margin: .45em 0 .2em; min-height: 44px; padding: .5em .7em; border-radius: .8em; text-align: center;
  font-size: .78em; color: var(--t2); background: rgba(255, 181, 71, .08); box-shadow: inset 0 0 0 1px rgba(255, 181, 71, .2);
}
.pp-notice b { color: var(--amber); }
.pp-rc {
  align-self: center; display: inline-flex; align-items: center; gap: .45em; max-width: 92%; margin: .6em 0 .1em;
  padding: .36em .75em .36em .55em; border-radius: 99px; font-size: .78em; color: var(--t2);
  background: rgba(255, 255, 255, .055); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07);
}
.pp-rc-ic { flex: none; width: 1.15em; height: 1.15em; opacity: .8; }
.pp-rc-l { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pp-rc b { flex: none; color: #ffc2c8; font-variant-numeric: tabular-nums; font-weight: 700; }
.pp-rc.plus b { color: #9ff2c4; }

.pp-typing { display: none; align-items: center; gap: .5em; margin-top: .55em; }
.pp-typing.on { display: flex; }
.pp-b.dots { display: flex; gap: .26em; align-items: center; padding: .62em .8em; margin: 0; border-bottom-left-radius: .35em; }
.pp-b.dots i { width: .42em; height: .42em; border-radius: 50%; background: var(--t2); animation: ppDot 1.1s ease-in-out infinite; }
.pp-b.dots i:nth-child(2) { animation-delay: .16s; } .pp-b.dots i:nth-child(3) { animation-delay: .32s; }
@keyframes ppDot { 0%, 60%, 100% { transform: translateY(0); opacity: .45; } 30% { transform: translateY(-.28em); opacity: 1; } }
.pp-typing-l { font-size: .74em; color: var(--t3); font-style: italic; }

/* action cards */
.pp-card {
  width: 88%; max-width: 21em; margin-top: .45em; border-radius: 1.1em; padding: .65em .65em .65em;
  background: linear-gradient(180deg, rgba(63, 182, 245, .1), rgba(63, 182, 245, .04));
  box-shadow: inset 0 0 0 1px rgba(63, 182, 245, .28);
  --bar: var(--pp);
}
.pp-card[data-urg="mid"] { --bar: var(--amber); }
.pp-card[data-urg="hi"] { --bar: var(--red); }
.pp-card.k-undo { background: linear-gradient(180deg, rgba(255, 93, 108, .08), rgba(255, 93, 108, .03)); box-shadow: inset 0 0 0 1px rgba(255, 93, 108, .22); }
.pp-card.done { background: none; box-shadow: none; padding: 0; width: auto; }
.pp-card.done .pp-card-body { display: none; }
.pp-card-lbl { display: flex; align-items: center; gap: .4em; font-size: .82em; font-weight: 700; color: #cdeeff; margin: .05em .1em .55em; }
.pp-card-ic { flex: none; width: 1.1em; height: 1.1em; color: var(--bar); }
.pp-timer { margin: 0 .1em .6em; }
.pp-t-row { display: flex; align-items: center; gap: .32em; font-size: .8em; color: var(--t2); margin-bottom: .42em; }
.pp-t-num { color: var(--t1); font-variant-numeric: tabular-nums; font-weight: 750; }
.pp-card[data-urg="hi"] .pp-t-num { color: #ffb1b9; }
.pp-bar { height: .32em; border-radius: 99px; background: rgba(255, 255, 255, .1); overflow: hidden; }
.pp-bar i { display: block; height: 100%; border-radius: inherit; background: var(--bar); transform-origin: left center; box-shadow: 0 0 10px var(--bar); transition: background .4s; }
.pp-card[data-urg="hi"] .pp-bar i { animation: ppUrg .8s ease-in-out infinite; }
@keyframes ppUrg { 50% { opacity: .55; } }
.pp-acts { display: grid; grid-template-columns: 1fr 1fr; gap: .45em; }
.pp-btn {
  min-height: 44px; display: flex; align-items: center; justify-content: center; gap: .4em; border-radius: .85em;
  font-weight: 800; letter-spacing: .04em; font-size: .95em; transition: transform .12s var(--ease-out), filter .12s;
}
.pp-btn:active { transform: scale(.95); filter: brightness(.9); }
.pp-btn.yes { background: var(--ppg); color: #fff; box-shadow: 0 6px 16px -8px rgba(31, 143, 232, .9), inset 0 1px 0 rgba(255, 255, 255, .3); }
.pp-btn.no { background: rgba(255, 255, 255, .09); color: var(--t1); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); }
.pp-btn.undo { width: 100%; background: rgba(255, 93, 108, .16); color: #ffc9ce; letter-spacing: .01em; box-shadow: inset 0 0 0 1px rgba(255, 93, 108, .4); }
.pp-btn-ic { width: 1.15em; height: 1.15em; }
.pp-btn.save { flex: none; padding: 0 1em; background: var(--ppg); color: #fff; letter-spacing: .01em; }
.pp-namerow { display: flex; gap: .4em; }
.pp-input {
  flex: 1; min-width: 0; min-height: 44px; padding: 0 .75em; border-radius: .85em; border: 0; outline: none;
  font: 600 16px/1 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, sans-serif; color: var(--t1);
  background: rgba(0, 0, 0, .35); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); caret-color: var(--pp);
  -webkit-user-select: text; user-select: text; touch-action: manipulation;
}
.pp-input:focus { box-shadow: inset 0 0 0 1.5px var(--pp), 0 0 0 3px rgba(63, 182, 245, .2); }
.pp-res { display: none; }
/* pinned "name your agent" card: lives above the compose bar while it's pending */
.pp-dock { flex: none; display: none; padding: .4em .55em .45em; border-top: 1px solid var(--line); background: rgba(14, 16, 24, .97); }
.pp-dock.on { display: block; }
.pp-dock .pp-card { width: 100%; max-width: none; margin: 0; padding: .5em .55em .55em; }
.pp-dock .pp-card-lbl { margin: 0 .1em .4em; }
.v-chat.naming .pp-compose { display: none; }
.pp-card.done .pp-res {
  display: inline-flex; align-items: center; gap: .4em; padding: .38em .75em .38em .55em; border-radius: 99px;
  font-size: .78em; font-weight: 700; background: rgba(255, 255, 255, .06); color: var(--t2);
}
.pp-res-ic { width: 1.1em; height: 1.1em; flex: none; }
.pp-res.yes { color: #a8e1ff; background: rgba(63, 182, 245, .12); }
.pp-res.no { color: var(--t2); }
.pp-res.auto { color: #ffd59a; background: rgba(255, 181, 71, .12); }
.pp-res.undone { color: #ffc9ce; background: rgba(255, 93, 108, .12); }
.pp-res.wait { color: var(--t3); }

.pp-compose {
  flex: none; display: flex; align-items: center; gap: .45em; min-height: 44px; padding: .3em .55em .3em .6em;
  border-top: 1px solid var(--line); background: rgba(14, 16, 24, .96);
}
.pp-field {
  flex: 1; min-width: 0; min-height: 2.5em; padding: 0 .9em; border-radius: 99px; text-align: left;
  font-size: .84em; color: var(--t3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12);
}
.pp-send { flex: none; width: 2.1em; height: 2.1em; border-radius: 50%; padding: .38em; background: rgba(63, 182, 245, .25); color: rgba(255, 255, 255, .55); }

/* ------------------------------------------------------------------ BANK */
.bk-head { background: linear-gradient(180deg, #0c2e28, #0a1a1a); border-bottom-color: rgba(63, 224, 170, .12); }
.bk-logo { width: 2em; height: 2em; border-radius: 30%; padding: .34em; background: linear-gradient(160deg, #3fe0aa, #0b7c62); flex: none; }
.bk-brand { display: flex; flex-direction: column; line-height: 1.08; }
.bk-brand b { font-size: 1.02em; font-weight: 800; letter-spacing: -.01em; }
.bk-brand span { font-size: .72em; color: #93e6c8; font-weight: 600; letter-spacing: .04em; }
.bk-scroll { padding: .7em .7em 1.2em; background: linear-gradient(180deg, #0a1616 0%, var(--ink) 40%); }
.bk-card {
  position: relative; overflow: hidden; border-radius: 1.2em; padding: .85em .95em 1em;
  background: linear-gradient(140deg, #1aa37c 0%, #0c6b57 55%, #08443b 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 14px 28px -16px rgba(26, 163, 124, .8);
}
.bk-card.neg { background: linear-gradient(140deg, #d8404f 0%, #8f1f33 60%, #5a1022 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 14px 28px -16px rgba(216, 64, 79, .9); }
.bk-card-top { display: flex; justify-content: space-between; font-size: .74em; font-weight: 650; color: rgba(255, 255, 255, .78); }
.bk-acct { font-variant-numeric: tabular-nums; letter-spacing: .08em; }
.bk-bal { position: relative; z-index: 1; margin-top: .35em; font-size: 2.15em; font-weight: 750; letter-spacing: -.035em; font-variant-numeric: tabular-nums; }
.bk-sub { position: relative; z-index: 1; font-size: .74em; color: rgba(255, 255, 255, .78); font-weight: 600; letter-spacing: .02em; }
.bk-card.neg .bk-sub { letter-spacing: .08em; font-weight: 800; color: #fff; }
.bk-wave {
  position: absolute; right: -10%; bottom: -18%; width: 75%; height: 75%; opacity: .22; pointer-events: none;
  background: repeating-radial-gradient(circle at 100% 100%, transparent 0 .55em, rgba(255, 255, 255, .7) .55em .62em);
}
.bk-rent, .cal-card {
  display: flex; align-items: center; gap: .65em; margin-top: .6em; padding: .65em .75em; border-radius: 1em;
  background: var(--s1); box-shadow: inset 0 0 0 1px var(--line);
}
.bk-rent > span:last-child, .cal-card > span:last-child { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.bk-rent b, .cal-card b { font-size: .92em; font-weight: 750; }
.bk-rent small, .cal-card small { font-size: .76em; color: var(--t2); }
.bk-rent-ic, .cal-ev-ic { flex: none; width: 2.1em; height: 2.1em; border-radius: 30%; padding: .45em; background: var(--s2); color: var(--t2); }
.bk-rent.due { background: rgba(255, 181, 71, .12); box-shadow: inset 0 0 0 1px rgba(255, 181, 71, .4); }
.bk-rent.due .bk-rent-ic { background: var(--amber); color: #2a1a00; }
.bk-rent.due.short, .bk-rent.late { background: rgba(255, 93, 108, .14); box-shadow: inset 0 0 0 1px rgba(255, 93, 108, .5); }
.bk-rent.due.short .bk-rent-ic, .bk-rent.late .bk-rent-ic { background: var(--red); color: #fff; }
.bk-rent.due.short small, .bk-rent.late small { color: #ffc2c8; }
.bk-rent.paid .bk-rent-ic { background: var(--green); color: #052a17; }
.bk-warn {
  display: flex; align-items: center; gap: .55em; margin-top: .6em; padding: .55em .7em; border-radius: 1em; font-size: .8em; color: #cdeeff;
  background: rgba(63, 182, 245, .1); box-shadow: inset 0 0 0 1px rgba(63, 182, 245, .3);
}
.ph-av.avtx { width: 2.1em; height: 2.1em; }
.bk-warn .ph-av.avtx { width: 2.2em; height: 2.2em; }
.bk-sec { font-size: .72em; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--t3); padding: 1.15em .2em .4em; }
.bk-list { border-radius: 1em; background: var(--s1); box-shadow: inset 0 0 0 1px var(--line); overflow: hidden; }
.tx { display: flex; align-items: center; gap: .6em; min-height: 3.4em; padding: .5em .7em; }
.tx + .tx { box-shadow: 0 -1px 0 var(--line); }
.tx-ic { flex: none; width: 2.1em; height: 2.1em; border-radius: 50%; padding: .5em; display: grid; place-items: center; background: var(--s2); color: var(--t2); }
.tx-ic.pip { padding: 0; background: none; }
.tx-ic.rent { background: rgba(255, 181, 71, .2); color: var(--amber); }
.tx-ic.pay, .tx-ic.in { background: rgba(57, 217, 138, .16); color: var(--green); }
.tx-ic.fee { background: rgba(255, 93, 108, .16); color: var(--red); }
.tx-ic.buy { background: rgba(63, 182, 245, .14); color: var(--pp); }
.tx-main { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.22; }
.tx-l { font-size: .9em; font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tx-s { font-size: .74em; color: var(--t3); font-variant-numeric: tabular-nums; }
.tx-amt { flex: none; font-size: .92em; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--t1); }
.tx-amt.plus { color: var(--green); }
.bk-none { padding: .9em .3em; font-size: .82em; color: var(--t3); }
.bk-foot { margin-top: 1.4em; text-align: center; font-size: .68em; color: var(--t3); }

/* ------------------------------------------------------------------ Z */
.v-z { background: #000 !important; }
.z-head { justify-content: space-between; background: rgba(0, 0, 0, .94); }
.z-logo { width: 1.75em; height: 1.75em; position: absolute; left: 50%; transform: translateX(-50%); }
.z-head-sp { width: 44px; }
.z-scroll { background: #000; }
.z-tabs { display: flex; border-bottom: 1px solid rgba(255, 255, 255, .1); font-size: .86em; font-weight: 650; color: var(--t3); }
.z-tabs span { flex: 1; text-align: center; padding: .7em 0 .6em; }
.z-tabs span.on { color: var(--t1); box-shadow: inset 0 -3px 0 -0px var(--lime); }
.z-post { display: flex; gap: .6em; padding: .75em .7em .3em; border-bottom: 1px solid rgba(255, 255, 255, .09); }
.ph-av.z { width: 2.45em; height: 2.45em; }
.z-main { flex: 1; min-width: 0; }
.z-top { display: flex; align-items: center; gap: .28em; font-size: .9em; white-space: nowrap; min-width: 0; }
.z-name { font-weight: 800; overflow: hidden; text-overflow: ellipsis; flex: 0 1 auto; min-width: 0; }
.z-badge { flex: none; width: 1.08em; height: 1.08em; }
.z-handle { color: var(--t3); overflow: hidden; text-overflow: ellipsis; flex: 0 1 auto; min-width: 0; }
.z-dot, .z-time { color: var(--t3); flex: none; }
.z-text { margin-top: .18em; font-size: calc(.95em * var(--ts, 1)); line-height: 1.34; overflow-wrap: anywhere; -webkit-user-select: text; user-select: text; }
.z-text.loud { font-weight: 800; letter-spacing: .01em; }
.z-img { margin-top: .55em; border-radius: .9em; overflow: hidden; aspect-ratio: 4 / 3; background: #111; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); }
.z-img svg { width: 100%; height: 100%; display: block; }
.z-img-ph {
  width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .2em; padding: 1em; text-align: center;
  font-size: .78em; color: var(--t2);
  background: linear-gradient(120deg, #1d1b36, #2b1a3b 50%, #102a35); background-size: 200% 100%; animation: zGen 2.4s ease-in-out infinite;
}
.z-img-ph.fail { animation: none; background: repeating-linear-gradient(45deg, #15151c 0 10px, #1b1b24 10px 20px); }
.z-img-ph b { color: var(--t1); font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: .95em; }
@keyframes zGen { 50% { background-position: 100% 0; } }
.z-acts { display: flex; justify-content: space-between; max-width: 15em; margin: .1em -.3em 0; color: var(--t3); }
.z-act { display: inline-flex; align-items: center; gap: .3em; min-height: 44px; padding: 0 .3em; font-size: .8em; font-variant-numeric: tabular-nums; }
.z-ic { width: 1.35em; height: 1.35em; display: block; }
.z-act.like.on { color: #ff4d7a; }
.z-reps { margin: 0 0 .55em; padding-left: .6em; border-left: 2px solid rgba(255, 255, 255, .1); display: flex; flex-direction: column; gap: .3em; }
.z-rep { font-size: .8em; color: var(--t2); line-height: 1.3; overflow-wrap: anywhere; }
.z-rep b { color: var(--t1); font-weight: 650; }
.z-more { align-self: flex-start; min-height: 44px; margin: -.6em 0 -.8em; font-size: .78em; font-weight: 650; color: var(--lime); }

/* ------------------------------------------------------------------ CALENDAR */
.cal-scroll { padding: .6em .7em 1.2em; background: radial-gradient(110% 40% at 50% 0%, rgba(255, 107, 87, .1), transparent 70%), var(--ink); }
.cal-hero { display: flex; align-items: center; justify-content: space-between; gap: .6em; padding: .2em .15em .3em; }
.cal-hero-l { display: flex; flex-direction: column; min-width: 0; }
.cal-wd { font-size: .78em; font-weight: 800; letter-spacing: .12em; color: var(--coral); }
.cal-day { font-size: 2.25em; font-weight: 750; letter-spacing: -.035em; line-height: 1.05; }
.cal-wk { font-size: .76em; color: var(--t2); font-weight: 600; }
.cal-clock { flex: none; width: 4.4em; height: 4.4em; }
.cal-clock .cf { fill: #f6f6f8; }
.cal-clock .tk { stroke: #9aa0ad; stroke-width: 1.6; stroke-linecap: round; }
.cal-clock .tk.big { stroke: #15161a; stroke-width: 2.6; }
.cal-clock .hh { stroke: #15161a; stroke-width: 4.4; stroke-linecap: round; }
.cal-clock .mh { stroke: #15161a; stroke-width: 2.8; stroke-linecap: round; }
.cal-clock .cd { fill: var(--coral); }
.cal-week { display: grid; grid-template-columns: repeat(7, 1fr); gap: .15em; margin: .5em 0 .2em; padding: .45em .25em; border-radius: 1em; background: var(--s1); box-shadow: inset 0 0 0 1px var(--line); }
.cal-d { position: relative; display: flex; flex-direction: column; align-items: center; gap: .18em; padding: .25em 0 .4em; border-radius: .7em; }
.cal-d small { font-size: .68em; font-weight: 700; color: var(--t3); }
.cal-d b { font-size: .92em; font-weight: 650; font-variant-numeric: tabular-nums; }
.cal-d.past b { color: var(--t3); }
.cal-d.wknd { opacity: .45; }
.cal-d.today { background: var(--coral); }
.cal-d.today small, .cal-d.today b { color: #fff; }
.cal-rent-dot { position: absolute; bottom: .12em; width: .36em; height: .36em; border-radius: 50%; background: var(--red); }
.cal-d.today .cal-rent-dot { background: #fff; }
.cal-card.shift { display: block; }
.cal-card-top { display: flex; justify-content: space-between; align-items: baseline; font-size: .78em; font-weight: 700; color: var(--t2); letter-spacing: .02em; }
.cal-now { font-size: 1.05em; color: var(--t1); font-variant-numeric: tabular-nums; }
.cal-shift { display: flex; align-items: center; gap: .5em; margin: .5em 0 .3em; font-size: .68em; color: var(--t3); font-variant-numeric: tabular-nums; white-space: nowrap; }
.cal-bar { flex: 1; height: .5em; border-radius: 99px; background: rgba(255, 255, 255, .1); overflow: hidden; }
.cal-bar i { display: block; height: 100%; background: linear-gradient(90deg, #ff9a6b, var(--coral)); transform-origin: left center; border-radius: inherit; }
.cal-shift-l { display: block; font-size: .8em; color: var(--t2); font-weight: 600; }
.cal-card.rent .cal-ev-ic { background: rgba(255, 181, 71, .18); color: var(--amber); }
.cal-card.rent.due { background: rgba(255, 93, 108, .12); box-shadow: inset 0 0 0 1px rgba(255, 93, 108, .45); }
.cal-card.rent.due .cal-ev-ic { background: var(--red); color: #fff; }
.cal-card.rent.paid .cal-ev-ic { background: var(--green); color: #052a17; }
.cal-ev-ic.init { background: rgba(167, 139, 250, .2); color: #c4b5fd; }
.cal-ev-ic.mtg { background: rgba(63, 182, 245, .16); color: var(--pp); }

/* ------------------------------------------------------------------ in-phone banner + toast */
.ph-inban {
  position: absolute; z-index: 8; left: .45em; right: .45em; top: var(--ibt, calc(max(22px, var(--pw) * .118) + .2em));
  display: flex; align-items: center; gap: .55em; min-height: 44px; padding: .5em .65em; text-align: left; border-radius: 1.05em;
  background: rgba(38, 43, 58, .9); -webkit-backdrop-filter: blur(18px) saturate(1.4); backdrop-filter: blur(18px) saturate(1.4);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1), 0 12px 28px -10px rgba(0, 0, 0, .7);
  transform: translateY(-.7em) scale(.97); opacity: 0; pointer-events: none;
  transition: transform .3s var(--ease-out), opacity .18s;
}
.ph-inban.on { transform: none; opacity: 1; pointer-events: auto; }
.ph-inban-main { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.ph-inban-main b { font-size: .86em; }
.ph-inban-main span { font-size: .82em; color: var(--t2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ph-toast {
  position: absolute; z-index: 9; left: .8em; right: .8em; bottom: max(22px, 2.2em); padding: .65em .85em; border-radius: 1em;
  font-size: .82em; line-height: 1.3; text-align: center; color: var(--t1);
  background: rgba(30, 34, 46, .94); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1), 0 10px 24px -8px rgba(0, 0, 0, .7);
  opacity: 0; transform: translateY(12px) scale(.97); pointer-events: none; transition: opacity .2s, transform .28s var(--ease-out);
}
.ph-toast.on { opacity: 1; transform: none; }

/* ------------------------------------------------------------------ put-down affordance */
.ph-putdown {
  position: absolute; right: calc(100% + 12px); bottom: 6%; display: flex; flex-direction: column; align-items: center; gap: .3em;
  min-width: 52px; min-height: 52px; padding: .55em .5em .5em; border-radius: 18px;
  font: 650 11px/1 -apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif; letter-spacing: .02em; color: rgba(255, 255, 255, .86);
  background: rgba(16, 18, 26, .62); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12), 0 8px 20px -8px rgba(0, 0, 0, .6);
  transition: transform .14s var(--ease-out), background .2s; white-space: nowrap;
}
.ph-putdown:active { transform: scale(.92); background: rgba(16, 18, 26, .82); }
.ph-pd-ic { width: 20px; height: 20px; display: block; }
.ph[data-pd="r"] .ph-putdown { right: auto; left: calc(100% + 10px); }
.ph[data-pd="b"] .ph-putdown { right: auto; left: 50%; bottom: auto; top: calc(100% + 10px); transform: translateX(-50%); flex-direction: row; min-height: 44px; padding: 0 14px; }
.ph[data-pd="b"] .ph-putdown:active { transform: translateX(-50%) scale(.94); }

/* ------------------------------------------------------------------ outer banners (phone face-down) */
.ph-banners {
  position: absolute; top: max(10px, env(safe-area-inset-top)); right: max(12px, calc(env(safe-area-inset-right) + 8px));
  width: min(290px, 34vw); height: 0; pointer-events: none;
}
.ph-ban {
  --bx: 0px; --i: 0;
  position: absolute; top: 0; right: 0; width: 100%; display: flex; align-items: center; gap: 10px; min-height: 56px;
  padding: 9px 12px 9px 9px; border-radius: 18px; text-align: left; pointer-events: auto; touch-action: none;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, sans-serif; color: #f3f6fb;
  background: rgba(26, 30, 42, .86); -webkit-backdrop-filter: blur(20px) saturate(1.5); backdrop-filter: blur(20px) saturate(1.5);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .11), 0 14px 32px -10px rgba(0, 0, 0, .75);
  transform: translate3d(calc(100% + 30px), calc(var(--i) * (100% + 8px)), 0);
  opacity: 0;
  transition: transform .46s cubic-bezier(.18, 1, .3, 1.05), opacity .25s;
}
.ph-ban.in { transform: translate3d(var(--bx), calc(var(--i) * (100% + 8px)), 0); opacity: 1; }
.ph-ban.out { transform: translate3d(calc(100% + 30px), calc(var(--i) * (100% + 8px)), 0); opacity: 0; transition: transform .3s cubic-bezier(.5, 0, .8, .3), opacity .3s; }
.ph-ban.drag { transition: none; }
.ph-ban:active:not(.drag) { filter: brightness(1.12); }
.ph-ban-av { position: relative; flex: none; width: 38px; height: 38px; }
.ph-ban-av .ph-av { width: 38px; height: 38px; }
.ph-ban-app {
  position: absolute; right: -4px; bottom: -3px; width: 18px; height: 18px; padding: 3px; border-radius: 6px;
  background: linear-gradient(160deg, #6fd0ff, #1f8fe8); box-shadow: 0 0 0 2px rgba(26, 30, 42, .95);
}
.ph-ban-app.z { background: #000; padding: 3.5px; }
.ph-ban-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.ph-ban-top { display: flex; align-items: center; gap: 6px; font-size: 13px; line-height: 1.2; }
.ph-ban-top b { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 700; }
.ph-ban-when { flex: none; font-size: 11px; color: rgba(226, 232, 244, .5); }
.ph-ban-tag { flex: none; font-size: 10px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; padding: 3px 6px; border-radius: 99px; background: rgba(255, 181, 71, .2); color: #ffd59a; }
.ph-ban-text { font-size: 12.5px; line-height: 1.3; color: rgba(236, 240, 248, .82); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* reduced motion: no slides, no bounces */
.ph.ph-rm .ph-ban, .ph.ph-rm .ph-ban.in, .ph.ph-rm .ph-ban.out { transform: translate3d(0, calc(var(--i) * (100% + 8px)), 0); }
.ph.ph-rm .pp-b.dots i, .ph.ph-rm .pp-card[data-urg="hi"] .pp-bar i, .ph.ph-rm .z-img-ph { animation: none; }
.ph.ph-rm .ph-inban { transform: none; }
@media (prefers-reduced-motion: reduce) {
  .pp-b.dots i, .pp-card[data-urg="hi"] .pp-bar i { animation: none; }
}

/* per-app accents on the back chevron; Z keeps names over handles */
.v-z .ap-back { color: var(--t1); }
.v-bank .ap-back { color: #5fe8b8; }
.v-cal .ap-back { color: var(--coral); }
.z-name { flex: 0 1 auto; }
.z-handle { flex: 0 1000 auto; }
.ph-sm .z-handle, .ph-sm .z-handle + .z-dot { display: none; }

/* home widgets: only when the phone is tall enough to breathe (desktop / iPad) */
.v-home { container-type: size; container-name: phhome; }
.hm-widgets { display: none; grid-template-columns: 1fr 1fr; gap: .6em; margin: 1.1em .25em 0; }
@container phhome (min-height: 31em) { .hm-widgets { display: grid; } }
.wg {
  display: flex; flex-direction: column; align-items: flex-start; gap: .18em; min-height: 44px; padding: .75em .8em .8em; border-radius: 1.3em; text-align: left;
  background: rgba(255, 255, 255, .11); -webkit-backdrop-filter: blur(16px) saturate(1.3); backdrop-filter: blur(16px) saturate(1.3);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .09);
}
.wg:active { filter: brightness(1.15); }
.wg-top { display: flex; align-items: center; gap: .35em; font-size: .74em; font-weight: 700; color: rgba(255, 255, 255, .75); letter-spacing: .02em; }
.wg-ic { width: 1.25em; height: 1.25em; border-radius: 30%; padding: .2em; flex: none; }
.wg.lake .wg-ic { background: linear-gradient(170deg, #78d7ff, #3c6fe0); }
.wg.pip .wg-ic { background: linear-gradient(160deg, #6fd0ff, #7a68ff); }
.wg-big { font-size: 1.7em; font-weight: 700; letter-spacing: -.03em; font-variant-numeric: tabular-nums; line-height: 1.1; }
.wg-bar { width: 100%; height: .36em; border-radius: 99px; background: rgba(255, 255, 255, .14); overflow: hidden; margin: .15em 0 .1em; }
.wg-bar i { display: block; height: 100%; background: linear-gradient(90deg, #3c6fe0, #78d7ff); transform-origin: left center; border-radius: inherit; }
.wg-s { font-size: .72em; color: rgba(255, 255, 255, .68); line-height: 1.25; }