/* Customer portal (path /c/<code> and /demo). Variables live on body.portal; everything else is scoped under #portalApp so the quote page is untouched.
   Art style: flat shapes, rounded corners, soft gradients, no outlines. The whole page is ONE continuous sky that fades from night into dusk, teal and blue
   as you scroll; each section is a "zone" of that sky with its own illustration. See docs/ART_STYLE.md. */
@font-face { font-family: 'Jakarta'; src: url('/fonts/plus-jakarta-sans.woff2') format('woff2'); font-weight: 200 800; font-style: normal; font-display: swap; }

body.portal {
  --ink: #0b1b2e; --muted: #4d5e75; --line: rgba(15, 40, 80, .1);
  --glass: rgba(255, 255, 255, .62); --glass-line: rgba(255, 255, 255, .85); --glass-shadow: 0 1px 1px rgba(20, 50, 100, .05), 0 16px 34px -16px rgba(30, 60, 130, .35);
  --solid: #ffffff; --soft: rgba(20, 60, 120, .07);
  --a1: #22c3e6; --a2: #3b82f6; --a3: #6366f1; --accent: linear-gradient(135deg, #14b8d9 0%, #2f6fe4 58%, #5b5bd6 100%);
  --ok: #15803d; --ok-bg: rgba(22, 163, 74, .14); --warn: #b45309; --warn-bg: rgba(245, 158, 11, .18); --bad: #c62828; --bad-bg: rgba(229, 72, 77, .14);
  --h-ph: #7c5cfc; --h-cl: #0aa5c4; --h-alk: #12b886;
  /* the sky, top to bottom of the page: each zone fades from one of these colors to the next */
  --zc0: #b4e5f8; --zc1: #cde0fa; --zc2: #e1dcfb; --zc3: #ffd7ba; --zc4: #c3efe9; --zc5: #d3e3fb; --zc6: #e9defa;
  --ink-s: #0b1b2e; --muted-s: rgba(11, 27, 46, .64); --chip-s: rgba(255, 255, 255, .66);
  --cloud: rgba(255, 255, 255, .55); --orb-bg: rgba(40, 80, 150, .3); --star: rgba(255, 255, 255, .95); --moon: #fff4c9; --moon-glow: rgba(255, 233, 160, .75);
  --hill1: rgba(150, 170, 235, .55); --hill2: rgba(125, 150, 225, .6); --gshadow: rgba(20, 40, 100, .28);
  --tubL: #ffffff; --tubM: #dbe8fa; --tubD: #9db9e6; --rm1: #ffffff; --rm2: #d5e3f8; --inner1: #8fa9d8; --inner2: #b4c8ea; --steam: rgba(255, 255, 255, .95); --step1: #e8f0fc; --step2: #bdd0ef;
  background: var(--zc6); color: var(--ink);
  font-family: 'Jakarta', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; font-size: 18px; line-height: 1.5; -webkit-font-smoothing: antialiased;
}
@media (prefers-color-scheme: dark) {
  body.portal {
    --ink: #eaf1f8; --muted: #a3b2c8; --line: rgba(255, 255, 255, .1);
    --glass: rgba(255, 255, 255, .08); --glass-line: rgba(255, 255, 255, .12); --glass-shadow: 0 1px 1px rgba(0, 0, 0, .3), 0 18px 40px -16px rgba(0, 0, 0, .55);
    --solid: #0f1824; --soft: rgba(255, 255, 255, .08);
    --a1: #4fd8f2; --a2: #5b9bff; --a3: #8b8bff; --accent: linear-gradient(135deg, #0fa4c4 0%, #2c63d6 58%, #5251c9 100%);
    --ok: #6ee7a8; --ok-bg: rgba(52, 211, 153, .18); --warn: #fcd34d; --warn-bg: rgba(251, 191, 36, .18); --bad: #ff9a9a; --bad-bg: rgba(248, 113, 113, .18);
    --h-ph: #a592ff; --h-cl: #4fd8f2; --h-alk: #4ade9e;
    --zc0: #0a1a42; --zc1: #1a2a6c; --zc2: #2d2b74; --zc3: #6a2f68; --zc4: #17415f; --zc5: #1b3b7a; --zc6: #34306f;
    --ink-s: #f3f7ff; --muted-s: rgba(240, 246, 255, .74); --chip-s: rgba(255, 255, 255, .16);
    --cloud: rgba(255, 255, 255, .1); --orb-bg: rgba(255, 255, 255, .1); --star: rgba(255, 255, 255, .92); --moon: #f4f1ff; --moon-glow: rgba(190, 180, 255, .6);
    --hill1: rgba(20, 35, 100, .6); --hill2: rgba(14, 26, 78, .75); --gshadow: rgba(0, 0, 0, .45);
    --tubL: #6f93d1; --tubM: #3f5f95; --tubD: #1c2f55; --rm1: #8aaae0; --rm2: #4a6aa5; --inner1: #16264a; --inner2: #223a68; --steam: rgba(255, 255, 255, .5); --step1: #3b5a90; --step2: #223a66;
  }
}
body.portal .top, body.portal footer { display: none; }

#portalApp { max-width: 600px; margin: 0 auto; width: 100%; padding: 0 0 130px; }
#portalApp * { box-sizing: border-box; }
:where(#portalApp button) { font: inherit; cursor: pointer; border: 0; color: inherit; background: none; -webkit-tap-highlight-color: transparent; }
:where(#portalApp h1, #portalApp h2, #portalApp h3, #portalApp p) { margin: 0; }
#portalApp :where(button, a, textarea, input):focus-visible { outline: 3px solid var(--a2); outline-offset: 3px; border-radius: 14px; }

/* the page background is the sky itself, so it fills the whole screen (also behind the notch and when you pull past the ends) */
body.portal { background: linear-gradient(180deg, var(--zc0) 0, var(--zc0) 30vh, var(--zc6) 100%) fixed; }

/* entrance */
.p-rise { opacity: 0; transform: translateY(16px); animation: p-rise .7s cubic-bezier(.2, .7, .2, 1) forwards; animation-delay: calc(var(--i, 0) * 70ms); }
@keyframes p-rise { to { opacity: 1; transform: none; } }

/* ---------- zones: one sky, fading from color to color ---------- */
.p-sec { position: relative; overflow: hidden; padding: 0 20px; color: var(--ink-s); }
/* the sections are transparent: portal.js paints ONE smooth gradient behind all of them (no seams between zones) */
#portalApp { position: relative; }
.p-ztext .eb { font-size: 12.5px; font-weight: 800; letter-spacing: 1.3px; text-transform: uppercase; color: var(--muted-s); }
.p-ztext .big { font-size: 34px; line-height: 1.05; font-weight: 800; letter-spacing: -1.4px; margin-top: 6px; }
.p-ztext .sm { font-size: 16px; font-weight: 600; color: var(--muted-s); margin-top: 4px; }
.p-zhead h2 { font-size: 27px; letter-spacing: -.9px; line-height: 1.1; }
.p-zhead span { display: block; font-size: 15.5px; font-weight: 600; color: var(--muted-s); margin-top: 3px; }

.lv-ok { --o1: #34d399; --o2: #06b6d4; } .lv-caution { --o1: #fbbf24; --o2: #f97316; } .lv-action { --o1: #fb7185; --o2: #e5484d; } .lv-none { --o1: #7dd3fc; --o2: #818cf8; }
/* ---------- zone 0: the night scene ---------- */
.p-hero { --o1: #34d399; --o2: #06b6d4; }
.p-hero.caution { --o1: #fbbf24; --o2: #f97316; } .p-hero.action { --o1: #fb7185; --o2: #e5484d; } .p-hero.none { --o1: #7dd3fc; --o2: #818cf8; }
.p-hero .hero-svg { display: block; width: calc(100% + 40px); margin: 0 -20px; height: auto; transform: translateY(calc(var(--py, 0) * 1px)); will-change: transform; }
.p-hello { position: absolute; z-index: 2; left: 24px; top: max(54px, calc(env(safe-area-inset-top) + 28px)); color: var(--ink-s); }
.p-hello span { display: block; color: var(--muted-s); font-size: 24px; font-weight: 600; letter-spacing: -.5px; }
.p-hello h1 { font-size: 68px; line-height: 1; letter-spacing: -3px; font-weight: 800; margin-top: 4px; }
.hero-svg .star { fill: var(--star); } .hero-svg .tw { animation: p-twinkle2 3.8s ease-in-out infinite; } .hero-svg .tw.b { animation-delay: 1.3s; } .hero-svg .tw.c { animation-delay: 2.4s; }
.hero-svg .moon { fill: var(--moon); } .hero-svg .moon-glow { fill: var(--moon-glow); opacity: .3; } .hero-svg .moon-glow.g2 { opacity: .13; }
.hero-svg .hill1 { fill: var(--hill1); } .hero-svg .hill2 { fill: var(--hill2); }
.hero-svg .gshadow { fill: var(--gshadow); filter: blur(7px); }
.hero-svg .bg1 { stop-color: var(--tubL); } .hero-svg .bg2 { stop-color: var(--tubM); } .hero-svg .bg3 { stop-color: var(--tubD); }
.hero-svg .rm1 { stop-color: var(--rm1); } .hero-svg .rm2 { stop-color: var(--rm2); }
.hero-svg .in1 { stop-color: var(--inner1); } .hero-svg .in2 { stop-color: var(--inner2); }
.hero-svg .hw1 { stop-color: var(--o1); } .hero-svg .hw2 { stop-color: var(--o2); }
.hero-svg .fade1 { stop-color: var(--zc1); stop-opacity: 0; } .hero-svg .fade2 { stop-color: var(--zc1); stop-opacity: 1; }
.hero-svg .shine { fill: none; stroke: rgba(255, 255, 255, .55); stroke-width: 5; stroke-linecap: round; }
.hero-svg .rib { fill: none; stroke: rgba(255, 255, 255, .1); stroke-width: 5; stroke-linecap: round; }
.hero-svg .stepT { fill: var(--step1); } .hero-svg .stepF { fill: var(--step2); } .hero-svg .stepS { fill: var(--tubD); }
.hero-svg .steam { fill: none; stroke: var(--steam); stroke-width: 7; stroke-linecap: round; opacity: 0; stroke-dasharray: 1; stroke-dashoffset: 1; animation: p-steam 6.4s ease-in-out infinite; }
.hero-svg .steam.s2 { animation-delay: 2s; } .hero-svg .steam.s3 { animation-delay: 4s; }
@keyframes p-twinkle2 { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }
@keyframes p-steam { 0% { stroke-dashoffset: 1; opacity: 0; transform: translateY(10px); } 25% { opacity: 1; } 70% { stroke-dashoffset: 0; opacity: .9; } 100% { stroke-dashoffset: 0; opacity: 0; transform: translateY(-12px); } }
/* the water status: one calm glass pill with a glowing dot in the water color */
.p-status { position: relative; z-index: 2; padding: 0 0 34px; }
.p-pill { display: inline-flex; align-items: center; gap: 12px; padding: 12px 22px 12px 16px; border-radius: 99px; background: var(--chip-s); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.p-pdot { --o1: #34d399; --o2: #06b6d4; width: 14px; height: 14px; flex: none; border-radius: 50%; background: linear-gradient(150deg, var(--o1), var(--o2)); box-shadow: 0 0 0 5px rgba(255, 255, 255, .16), 0 0 16px var(--o2); }
.p-pdot.caution { --o1: #fbbf24; --o2: #f97316; } .p-pdot.action { --o1: #fb7185; --o2: #e5484d; } .p-pdot.none { --o1: #7dd3fc; --o2: #818cf8; }
.p-pill h2 { font-size: 19px; font-weight: 700; letter-spacing: -.4px; line-height: 1.2; }
.p-status > p { color: var(--muted-s); font-weight: 500; font-size: 15px; margin: 10px 0 0 6px; }

/* ---------- zone 1: the van drives in from the left edge ---------- */
.z1 { min-height: 300px; padding-top: 80px; }
.z1 .p-ztext { position: relative; z-index: 2; margin-left: 61%; }
.z1 .sm { font-size: 15px; white-space: nowrap; }
.p-van { position: absolute; left: -24px; top: 44px; width: 270px; transform: translateX(-130%); transition: transform 1.3s cubic-bezier(.16, .9, .25, 1); }
.p-van.in { transform: none; }
.p-van .ill { width: 100%; height: auto; }

/* ---------- zone 2: what you owe (card and coin slide in from the right) ---------- */
.z2 { min-height: 300px; padding-top: 56px; padding-bottom: 28px; }
.z2 .p-ztext { position: relative; z-index: 2; max-width: 46%; }
.go { display: inline-block; margin-top: 12px; padding: 8px 16px; border-radius: 99px; background: var(--chip-s); font-size: 15.5px; font-weight: 800; color: var(--ink-s); text-decoration: none; position: relative; z-index: 2; }
.p-pay { position: absolute; right: -64px; top: 6px; width: 330px; transform: translateX(120%); transition: transform 1.2s cubic-bezier(.16, .9, .25, 1) .1s; }
.p-pay.in { transform: none; }
.p-pay .ill { width: 100%; height: auto; }
.z2 .p-card { margin-top: 44px; }

/* shared illustration colors (small flat illustrations) */
.ill { display: block; overflow: visible; filter: drop-shadow(0 10px 14px rgba(10, 20, 70, .28)); }
.ill .tb1 { stop-color: #ffffff; } .ill .tb2 { stop-color: #aac6ec; }
.ill .l1 { stop-color: var(--o1, #34d399); } .ill .l2 { stop-color: var(--o2, #06b6d4); }
.ill .c1 { stop-color: #7a74f5; } .ill .c2 { stop-color: #3b82f6; }
.ill .g1 { stop-color: #ffe08a; } .ill .g2 { stop-color: #f5a524; }
.ill .win { fill: #6aa8ea; } .ill .stripe { fill: #14b8d9; } .ill .drop { fill: #fff; } .ill .wheel { fill: #2a3a58; } .ill .hub { fill: #dbe7fa; }
.ill .mot { fill: none; stroke: rgba(255, 255, 255, .85); stroke-width: 4; stroke-linecap: round; }
.ill .chip { fill: rgba(255, 255, 255, .55); } .ill .band { fill: rgba(255, 255, 255, .22); } .ill .coin-in { fill: rgba(255, 255, 255, .28); } .ill .coin-t { fill: #b45f06; font: 800 20px 'Jakarta', system-ui, sans-serif; } .ill .coin-t.sm { font-size: 16px; }
.ill .tick-bg { fill: #22c58a; } .ill .tick { fill: none; stroke: #fff; stroke-width: 4.5; stroke-linecap: round; stroke-linejoin: round; }
.ill .glass { fill: var(--glass-fill, rgba(255, 255, 255, .28)); stroke: var(--glass-stroke, rgba(255, 255, 255, .8)); stroke-width: 2.6; stroke-linejoin: round; }
.ill .bubl { fill: rgba(255, 255, 255, .7); } .ill .sparkle { fill: #fff; }
.ill .cal { fill: #ffffff; } .ill .calbar { fill: #6f6af0; } .ill .calring { fill: #3d3aa8; } .ill .cell { fill: #dde6f7; } .ill .cell.on { fill: #14b8d9; }
.ill .paper { fill: #ffffff; } .ill .pline { fill: #d6e0f2; } .ill .pline.hi { fill: #14b8d9; }
.ill .pencil { fill: #ffb454; } .ill .ptip { fill: #ffe3b3; } .ill .pcap { fill: #f2647a; }
body.portal { --glass-fill: rgba(255, 255, 255, .6); --glass-stroke: rgba(70, 110, 190, .5); }
@media (prefers-color-scheme: dark) { body.portal { --glass-fill: rgba(255, 255, 255, .2); --glass-stroke: rgba(255, 255, 255, .75); } }

/* ---------- glass cards ---------- */
.p-card { background: var(--glass); border: 1px solid var(--glass-line); border-radius: 28px; padding: 16px 18px; box-shadow: var(--glass-shadow); backdrop-filter: blur(16px) saturate(150%); -webkit-backdrop-filter: blur(16px) saturate(150%); }
.p-need { display: flex; align-items: center; gap: 14px; }
.p-need .ill { width: 58px; height: 58px; flex: none; }
.p-need h3 { font-size: 19px; letter-spacing: -.4px; line-height: 1.25; white-space: nowrap; }
.p-need .trunc { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--muted); font-size: 15px; font-weight: 500; }
.p-grow { flex: 1; min-width: 0; }
.p-btn { min-height: 48px; padding: 0 20px; border-radius: 18px; background: var(--accent); color: #fff !important; font-weight: 800; letter-spacing: -.2px; box-shadow: 0 12px 24px -10px rgba(47, 111, 228, .75); display: inline-flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none; transition: transform .15s ease, filter .15s ease; }
.p-btn:active { transform: scale(.97); filter: brightness(.95); }
.p-btn.block { width: 100%; min-height: 52px; }
.p-btn.soft { background: var(--soft); color: var(--ink) !important; box-shadow: none; }
.p-btn:disabled { opacity: .55; }

/* ---------- zone 3: the water, three tiny tiles ---------- */
.z3 { padding-top: 36px; padding-bottom: 34px; }
.p-zhead { position: relative; z-index: 2; padding-right: 110px; min-height: 86px; }
@keyframes p-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }
.p-rtiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; margin-top: 22px; position: relative; z-index: 2; }
.p-rt { text-align: center; }
/* water orbs: a glass ball with a rolling wave; the water level shows where the reading sits in its healthy range */
.p-orb { position: relative; width: 106px; height: 106px; margin: 0 auto; animation: p-bob 5.5s ease-in-out infinite; filter: drop-shadow(0 14px 14px rgba(10, 20, 70, .3)); }
.p-orb .orb-svg { display: block; width: 100%; height: 100%; overflow: visible; }
.p-orb .rn { position: absolute; inset: 0; display: grid; place-items: center; font-size: 28px; font-weight: 800; letter-spacing: -1.2px; font-variant-numeric: tabular-nums; color: #fff; text-shadow: 0 2px 10px rgba(0, 30, 70, .5); }
.o-glass { fill: var(--orb-bg); } .o-ring { fill: none; stroke: rgba(255, 255, 255, .5); stroke-width: 2; }
.ow1 { stop-color: var(--c); stop-color: color-mix(in srgb, var(--c) 82%, #fff); } .ow2 { stop-color: var(--c); }
.o-back { fill: var(--c); opacity: .55; }
.o-wave { animation: p-wave 4.6s linear infinite; } .o-wave.w2 { animation-duration: 7.4s; animation-direction: reverse; }
.o-b { fill: rgba(255, 255, 255, .75); animation: p-bubup 4.4s ease-in infinite; } .o-b.b2 { animation-delay: 1.4s; } .o-b.b3 { animation-delay: 2.5s; }
.o-hi { fill: none; stroke: rgba(255, 255, 255, .8); stroke-width: 4; stroke-linecap: round; } .o-sp { fill: #fff; }
@keyframes p-wave { from { transform: translateX(0); } to { transform: translateX(-50px); } }
@keyframes p-bubup { 0% { transform: translateY(0); opacity: 0; } 15% { opacity: 1; } 100% { transform: translateY(-34px); opacity: 0; } }
@keyframes p-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
.p-rt .nm { font-size: 15px; font-weight: 700; color: var(--muted-s); margin-top: 14px; }
.p-rt .st { margin-top: 2px; font-weight: 800; font-size: 15px; }
.p-rt .st.ok { color: var(--ok); } .p-rt .st.caution { color: var(--warn); } .p-rt .st.action { color: var(--bad); }

/* readings (sheet rows) */
.p-read { padding: 16px 0 6px; }
.p-read + .p-read { border-top: 1px solid var(--line); margin-top: 12px; }
.p-read-top { display: flex; align-items: center; gap: 12px; }
.p-ico { width: 42px; height: 42px; flex: none; border-radius: 15px; display: grid; place-items: center; color: #fff; background: linear-gradient(150deg, #9aa8ff, var(--c)); background: linear-gradient(150deg, color-mix(in srgb, var(--c) 70%, #fff), var(--c)); box-shadow: 0 8px 16px -8px var(--c); }
.p-ico .p-gl { width: 24px; height: 24px; display: block; }
.p-read-name { font-weight: 800; font-size: 18px; letter-spacing: -.3px; line-height: 1.2; }
.p-read-help { color: var(--muted); font-size: 14.5px; font-weight: 500; line-height: 1.3; }
.p-read-val { display: flex; flex-direction: column; align-items: flex-end; }
.p-read-val .num { font-size: 36px; font-weight: 800; letter-spacing: -1.5px; line-height: 1; font-variant-numeric: tabular-nums; }
.p-read-val .num small { display: inline; font-size: 14px; font-weight: 700; color: var(--muted); letter-spacing: 0; margin-left: 4px; }
.p-read-val .wd { font-size: 14px; font-weight: 800; margin-top: 5px; }
.p-read-val .wd.ok { color: var(--ok); } .p-read-val .wd.caution { color: var(--warn); } .p-read-val .wd.action { color: var(--bad); }
.p-meter { position: relative; height: 12px; border-radius: 99px; background: rgba(120, 130, 170, .2); background: color-mix(in srgb, var(--c) 18%, transparent); margin-top: 16px; }
.p-zone { position: absolute; top: 0; bottom: 0; border-radius: 99px; background: rgba(120, 130, 220, .34); background: color-mix(in srgb, var(--c) 38%, transparent); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--c) 75%, transparent); }
.p-dot { position: absolute; top: 50%; width: 24px; height: 24px; margin: -12px 0 0 -12px; border-radius: 50%; background: #fff; border: 6px solid #16a34a; box-shadow: 0 4px 12px rgba(0, 0, 0, .28); left: var(--from, 0%); animation: p-slide 1.2s cubic-bezier(.2, .8, .2, 1) .5s forwards; }
.p-dot.caution { border-color: #f59e0b; } .p-dot.action { border-color: #e5484d; }
@keyframes p-slide { to { left: var(--at); } }
.p-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.p-chip { background: var(--soft); border-radius: 99px; padding: 8px 14px; font-weight: 700; font-size: 15.5px; }
.p-eyebrow { color: var(--muted); font-size: 12.5px; font-weight: 800; letter-spacing: 1.3px; text-transform: uppercase; }

/* ---------- zones 4 and 5: visits and invoices ---------- */
.z4, .z5 { padding-top: 34px; padding-bottom: 34px; }
.p-lcard { position: relative; z-index: 2; margin-top: 12px; background: var(--glass); border: 1px solid var(--glass-line); border-radius: 28px; padding: 2px 18px 4px; box-shadow: var(--glass-shadow); backdrop-filter: blur(16px) saturate(150%); -webkit-backdrop-filter: blur(16px) saturate(150%); }
.z4 .p-zhead, .z5 .p-zhead { min-height: 80px; }
.p-cal, .p-rec { position: absolute; top: 4px; z-index: 1; transition: transform 1.2s cubic-bezier(.16, .9, .25, 1); }
.p-cal { left: -50px; width: 210px; transform: translateX(-130%); } .p-rec { right: -46px; width: 210px; transform: translateX(130%); }
.p-cal.in, .p-rec.in { transform: none; }
.p-cal .ill, .p-rec .ill { width: 100%; height: auto; }
.z4 .p-zhead, .z5 .p-zhead { min-height: 150px; padding-top: 24px; }
.p-zl { margin-left: 46%; padding-right: 0; }
.dc { position: absolute; pointer-events: none; z-index: 0; }
.dc.star { border-radius: 50%; background: var(--star); animation: p-twinkle2 3.8s ease-in-out infinite; }
.dc.spark { background: #fff; opacity: .85; clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%); animation: p-twinkle2 3s ease-in-out infinite; }
.dc.cloud { border-radius: 99px; background: var(--cloud); animation: p-drift 16s ease-in-out infinite alternate; }
.dc.bub { border-radius: 50%; background: rgba(255, 255, 255, .16); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .35); animation: p-float 7s ease-in-out infinite; }
.dc.cloud::before { content: ''; position: absolute; left: 20%; top: -60%; width: 40%; height: 160%; border-radius: 50%; background: inherit; }
@keyframes p-drift { from { transform: translateX(-10px); } to { transform: translateX(14px); } }
.z2 .p-card { position: relative; z-index: 2; }
.hero-svg { filter: none; }
.ill .vs1 { stop-color: #ffffff; } .ill .vs2 { stop-color: #b9cff2; } .ill .vtop { fill: #f4f8ff; } .ill .vfront { fill: #9fb9e6; } .ill .vgrille { fill: #6f8fcf; }
.ill .cedge { fill: #4350c4; } .ill .gedge { fill: #c98512; } .ill .tickedge { fill: #11805a; } .ill .cshade { fill: #7a83d8; } .ill .rshade { fill: #8fa4d4; } .ill .sparkle.sm { opacity: .8; }
.ill .vsh { fill: rgba(10, 20, 70, .3); } .ill .arch { fill: #16233f; } .ill .vline { fill: none; stroke: rgba(20, 40, 90, .12); stroke-width: 2; stroke-linecap: round; } .ill .lamp { fill: #ffe9a0; } .ill .glow { fill: rgba(255, 244, 190, .55); }
.ill .rack { fill: #8aa6d6; }
.p-item { width: 100%; display: flex; align-items: center; gap: 14px; text-align: left; padding: 14px 0; min-height: 70px; }
.p-item + .p-item { border-top: 1px solid var(--line); }
button.p-item:active { background: var(--soft); }
.p-dayblock { width: 46px; flex: none; text-align: center; line-height: 1.05; }
.p-dayblock b { display: block; font-size: 11.5px; letter-spacing: 1.1px; text-transform: uppercase; color: var(--muted); }
.p-dayblock span { display: block; font-size: 24px; font-weight: 800; letter-spacing: -1px; }
.p-item h3 { font-size: 17.5px; letter-spacing: -.25px; line-height: 1.25; }
.p-item p { color: var(--muted); font-size: 14.5px; font-weight: 500; }
.p-dots { display: flex; gap: 5px; flex: none; }
.p-dots i { width: 10px; height: 10px; border-radius: 50%; background: #16a34a; } .p-dots i.caution { background: #f59e0b; } .p-dots i.action { background: #e5484d; }
.p-chev { color: var(--muted); font-size: 24px; flex: none; line-height: 1; }
.p-amt { font-weight: 800; font-size: 18px; letter-spacing: -.4px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.p-tag { display: inline-block; padding: 3px 10px; border-radius: 99px; font-size: 13.5px; font-weight: 800; }
.p-tag.paid { background: var(--ok-bg); color: var(--ok); } .p-tag.due { background: var(--warn-bg); color: var(--warn); } .p-tag.late { background: var(--bad-bg); color: var(--bad); }
.p-more { display: block; width: 100%; padding: 14px 0 12px; color: var(--a2); font-weight: 800; font-size: 16px; text-align: center; border-top: 1px solid var(--line); }
.p-foot { text-align: center; color: var(--muted-s); font-size: 14px; padding: 6px 0 4px; font-weight: 600; position: relative; z-index: 2; }

/* floating message button */
.p-fab { position: fixed; z-index: 15; left: 50%; bottom: max(18px, calc(env(safe-area-inset-bottom) + 10px)); transform: translateX(-50%); min-height: 58px; padding: 0 26px 0 20px; border-radius: 99px; display: inline-flex; align-items: center; gap: 10px;
  background: var(--accent); color: #fff; font-weight: 800; font-size: 17px; letter-spacing: -.2px; box-shadow: 0 18px 36px -10px rgba(47, 111, 228, .8), inset 0 1px 0 rgba(255, 255, 255, .35); animation: p-fab .7s .9s cubic-bezier(.2, 1, .3, 1) both; }
.p-fab svg { width: 22px; height: 22px; fill: none; stroke: #fff; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.p-fab:active { transform: translateX(-50%) scale(.96); }
@keyframes p-fab { from { opacity: 0; transform: translateX(-50%) translateY(30px); } }

/* sheets */
.p-scrim { position: fixed; inset: 0; background: rgba(6, 14, 28, .5); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); display: flex; align-items: flex-end; justify-content: center; z-index: 30; animation: p-fade .25s ease; }
.p-sheet { width: 100%; max-width: 600px; max-height: 92vh; overflow: auto; background: var(--solid); color: var(--ink); border-radius: 34px 34px 0 0; padding: 14px 22px 32px; animation: p-up .4s cubic-bezier(.2, .9, .25, 1); }
.p-grab { width: 44px; height: 5px; border-radius: 3px; background: var(--line); margin: 0 auto 18px; }
.p-sheet h2 { font-size: 27px; letter-spacing: -.9px; line-height: 1.15; }
.p-sheet .p-sub { color: var(--muted); margin-top: 4px; font-weight: 500; }
.p-sheet textarea, .p-sheet input[type=text] { width: 100%; font: inherit; font-size: 18px; padding: 15px 16px; margin-top: 16px; border-radius: 18px; border: 1.5px solid var(--line); background: var(--soft); color: var(--ink); }
.p-sheet textarea { min-height: 130px; resize: vertical; }
.p-err { color: var(--bad); font-weight: 700; margin-top: 10px; }
.p-lines { margin-top: 18px; } .p-lines .p-l { display: flex; justify-content: space-between; gap: 12px; padding: 11px 0; border-top: 1px solid var(--line); }
.p-lines .p-l small { display: block; color: var(--muted); font-size: 14px; }
.p-total { display: flex; justify-content: space-between; align-items: baseline; border-top: 2px solid var(--ink); padding-top: 12px; margin-top: 4px; font-weight: 800; }
.p-total strong { font-size: 32px; letter-spacing: -1.2px; }
.p-tasks { margin: 14px 0 0; padding: 0; list-style: none; } .p-tasks li { padding: 7px 0 7px 32px; position: relative; font-weight: 500; } .p-tasks li::before { content: "\2713"; position: absolute; left: 4px; color: var(--ok); font-weight: 800; }
.p-ghost { display: block; margin: 14px auto 0; color: var(--muted); text-decoration: underline; padding: 10px; font-weight: 600; }
.p-done { text-align: center; padding: 22px 0 4px; } .p-done .p-tick { width: 76px; height: 76px; margin: 0 auto 14px; border-radius: 50%; display: grid; place-items: center; font-size: 40px; background: var(--ok-bg); color: var(--ok); animation: p-pop .55s cubic-bezier(.2, 1.4, .4, 1); }
@keyframes p-fade { from { opacity: 0; } } @keyframes p-up { from { transform: translateY(46px); opacity: 0; } } @keyframes p-pop { from { transform: scale(.4); opacity: 0; } }
.p-banner { border-radius: 18px; padding: 13px 16px; margin-top: 14px; font-weight: 700; background: var(--ok-bg); color: var(--ok); }
.p-loading, .p-problem { text-align: center; padding: 110px 20px; color: var(--ink-s); }
.p-problem h1 { font-size: 28px; letter-spacing: -.8px; margin-bottom: 8px; }

@media (prefers-reduced-motion: reduce) {
  .p-rise { animation: none; opacity: 1; transform: none; }
  .p-scrim, .p-sheet, .p-done .p-tick, .p-fab { animation: none; } .p-dot { animation: none; left: var(--at); }
  .hero-svg .tw { animation: none; opacity: .8; } .hero-svg .steam { animation: none; opacity: .6; stroke-dashoffset: 0; } .p-hero .hero-svg { transform: none; }
  .p-van, .p-pay, .p-cal, .p-rec { transition: none; transform: none; } .p-orb, .o-wave, .o-b, .dc { animation: none; }
}