/* Scene: invoice editor behind the sheets (dimmed) */
.editor { position: absolute; inset: 0; padding: 15cqw 5cqw 0; transition: filter .8s var(--ease), opacity .8s; opacity: .0; }
.screen[data-scene="created"] .editor, .screen[data-scene="paid"] .editor { opacity: .42; filter: blur(.3cqw); }
.ed-top { display: flex; align-items: center; justify-content: space-between; }
.ed-btn { width: 9cqw; height: 9cqw; border-radius: 50%; background: rgba(255,255,255,.08); display: grid; place-items: center; color: var(--mint); font-size: 4cqw; }
.ed-title { text-align: center; font: 600 4.2cqw/1.2 var(--sans); }
.ed-title small { display: block; font: 400 2.8cqw/1.3 var(--sans); color: var(--ink-3); }
.ed-row { display: flex; align-items: center; justify-content: space-between; margin-top: 4.5cqw; padding: 3.2cqw 4cqw; border-radius: 3.6cqw; background: var(--card); font-size: 3.8cqw; }
.ed-tgl { width: 11cqw; height: 6.4cqw; border-radius: 99px; background: rgba(255,255,255,.18); position: relative; }
.ed-tgl::after { content: ""; position: absolute; top: .6cqw; left: .6cqw; width: 5.2cqw; height: 5.2cqw; border-radius: 50%; background: #ddd; }
.ed-lab { margin-top: 6cqw; font: 600 3.9cqw/1 var(--sans); color: var(--ink-3); }

/* shared sheet */
.sheet {
  position: absolute; left: 1.6cqw; right: 1.6cqw; bottom: 1.6cqw; z-index: 10;
  border-radius: 9.2cqw; background: #08110C;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06), 0 -2cqw 8cqw rgba(0,0,0,.5);
  display: flex; flex-direction: column;
  transition: transform .9s var(--ease), opacity .6s var(--ease);
}
.grabber { width: 9.5cqw; height: 1.3cqw; border-radius: 99px; background: rgba(255,255,255,.28); margin: 2.4cqw auto 0; }
/* RecordingEdgeGlow / StatusEdgeGlow — blurred halo + hairline core, 36pt continuous corners */
.edge { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: var(--o, .52); transition: opacity 1.4s ease-out; }
.edge::before { content: ""; position: absolute; inset: 0; border-radius: inherit; border: 1.15cqw solid var(--edge, var(--money)); filter: blur(1.3cqw); }
.edge::after { content: ""; position: absolute; inset: 0; border-radius: inherit; border: 1px solid color-mix(in srgb, var(--edge, var(--money)) 50%, transparent); }
.edge.breathe { animation: breathe 2.4s ease-in-out infinite; }
@keyframes breathe { 0%,100% { opacity: .38; } 50% { opacity: .7; } }
.edge.flare { animation: flare 2s ease-out forwards; }
@keyframes flare { 0% { opacity: 0; } 30% { opacity: .62; } 100% { opacity: .26; } }

/* Scene A — Quick Record */
.qr { top: 11.5cqw; padding: 0 6cqw 6cqw; }
.screen[data-scene="created"] .qr, .screen[data-scene="paid"] .qr { transform: translateY(8%) scale(.94); opacity: 0; }
.rec { display: flex; align-items: center; gap: 1.6cqw; margin-top: 4.6cqw; font: 700 3.3cqw/1 var(--sans); letter-spacing: .06em; color: var(--ink-3); }
.rec i { width: 2.2cqw; height: 2.2cqw; border-radius: 50%; background: var(--sys-red); animation: recblink 1.2s steps(1) infinite; }
.rec b { color: #fff; letter-spacing: .02em; font-variant-numeric: tabular-nums; }
@keyframes recblink { 50% { opacity: .25; } }
.transcript { margin-top: 5cqw; font: 700 5.7cqw/1.32 var(--sans); letter-spacing: -.01em; color: var(--mint); min-height: 38cqw; }
.transcript .w { display: none; }
.transcript .w.on { display: inline; animation: wIn .45s ease-out both; }
@keyframes wIn { from { opacity: 0; filter: blur(1cqw); } }
.transcript .caret { display: inline-block; width: .5cqw; height: 5.4cqw; margin-left: .6cqw; vertical-align: -1cqw; background: var(--mint); animation: recblink 1s steps(1) infinite; }
.wave { margin-top: auto; height: 13cqw; display: flex; align-items: center; gap: 1cqw; }
.wave i { flex: 1; height: 100%; border-radius: 99px; background: var(--money); transform: scaleY(.1); transition: transform .12s linear; }
.transport { display: flex; gap: 3cqw; margin-top: 7cqw; }
.gl {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 1.8cqw; padding: 3.6cqw 0; border-radius: 99px;
  font: 600 4cqw/1 var(--sans); background: rgba(255,255,255,.14); box-shadow: inset 0 0 0 .5px rgba(255,255,255,.22);
}
.gl.red { color: var(--sys-red); background: rgba(255,69,58,.12); box-shadow: inset 0 0 0 .5px rgba(255,69,58,.3); }
.gl svg { width: 3.8cqw; height: 3.8cqw; }
.solid { display: flex; align-items: center; justify-content: center; gap: 2cqw; margin-top: 3cqw; padding: 4.1cqw 0; border-radius: 3.6cqw; background: var(--money); color: var(--canvas); font: 600 4.1cqw/1 var(--sans); transition: opacity .2s, transform .2s; }
.solid.press { opacity: .85; transform: scale(.98); }
.solid svg { width: 4cqw; height: 4cqw; }

/* Scene B — Invoice created */
.cr { top: 44%; padding: 0 5.4cqw 5.4cqw; transform: translateY(110%); }
.screen[data-scene="created"] .cr, .screen[data-scene="paid"] .cr { transform: none; }
.cr-top { display: flex; justify-content: space-between; align-items: center; margin-top: 5cqw; font: 700 2.9cqw/1 var(--sans); letter-spacing: .08em; }
.cr-top .ok { display: flex; align-items: center; gap: 1.6cqw; color: var(--mint); }
.cr-top .ok i { width: 4.2cqw; height: 4.2cqw; border-radius: 50%; background: var(--mint); color: var(--canvas); display: grid; place-items: center; font-style: normal; font-size: 2.6cqw; }
.cr-top .inv { color: var(--ink-3); }
.amt { margin-top: 4.4cqw; font: 800 12.4cqw/1 var(--rounded); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.cust { margin-top: 1.8cqw; font-size: 3.7cqw; color: var(--ink-3); }
.linkbox { margin-top: 5cqw; padding: 3.6cqw 4cqw; border-radius: 3.6cqw; background: rgba(255,255,255,.04); box-shadow: inset 0 0 0 1px rgba(255,255,255,.1); }
.linkbox .caps { font-size: 2.6cqw; color: var(--ink-3); }
.linkrow { display: flex; align-items: center; gap: 2cqw; margin-top: 2.2cqw; font: 600 3.4cqw/1.2 var(--sans); }
.linkrow svg { width: 3.8cqw; height: 3.8cqw; flex-shrink: 0; color: var(--ink-3); }
.linkrow .copy { margin-left: auto; color: var(--mint); }
.linkbox p { margin-top: 2cqw; font-size: 2.9cqw; color: var(--ink-3); line-height: 1.35; }
.cr .solid { margin-top: 5cqw; background: var(--mint); }
.done { margin-top: 3.6cqw; text-align: center; font: 600 3.8cqw/1 var(--sans); color: var(--ink-3); }

/* Scene C — the payment lands */
.notif {
  position: absolute; z-index: 35; left: 3cqw; right: 3cqw; top: 3cqw;
  display: flex; gap: 3cqw; align-items: center; padding: 3.4cqw; border-radius: 6.4cqw;
  background: rgba(40,48,44,.72); -webkit-backdrop-filter: blur(16px) saturate(180%); backdrop-filter: blur(16px) saturate(180%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.1), 0 3cqw 8cqw rgba(0,0,0,.5);
  transform: translateY(-130%); transition: transform .8s var(--ease);
}
.screen[data-scene="paid"] .notif { transform: none; }
.appicon { flex-shrink: 0; width: 10.6cqw; height: 10.6cqw; border-radius: 2.6cqw; background: linear-gradient(180deg, var(--icon-bg-a), var(--icon-bg-b)); display: grid; place-items: center; box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); }
.appicon .bars { font-size: 6cqw; }
.appicon .bars i { animation: none; }
.notif-t { flex: 1; min-width: 0; font-size: 3.3cqw; line-height: 1.3; }
.notif-t b { display: flex; justify-content: space-between; font-weight: 600; }
.notif-t b small { font-weight: 400; color: var(--ink-3); }
.notif-t span { color: var(--ink-2); }
.screen[data-scene="paid"] .cr .edge { --edge: var(--mint-hi); }
@media (prefers-reduced-motion: reduce) {
  .rec i, .transcript .caret, .edge.breathe { animation: none !important; }
}