/* ==========================================================================
   The app, rebuilt in HTML for the interactive demo.
   Matches docs/design/mockups 01–15: tokens, Inter, Phosphor, iOS forms.
   Everything is scoped under .ra so several phones can live on one page.
   ========================================================================== */

.ra {
  --bg: #F2F2F7; --surface: #FFFFFF; --surface-2: #FFFFFF; --text: #000; --text2: rgba(60, 60, 67, .6); --text3: rgba(60, 60, 67, .3);
  --sep: rgba(60, 60, 67, .18); --fill: rgba(118, 118, 128, .12); --fill2: rgba(118, 118, 128, .08); --seg-on: #FFFFFF;
  --accent: #007AFF; --danger: #FF3B30; --success: #34C759; --warning: #FF9500;
  --task: #007AFF; --meeting: #5856D6; --event: #FF9500; --occasion: #FF2D55; --bill: #34C759;
  --teal: #30B0C7; --grey: #8E8E93; --purple: #AF52DE;
  --tint-a: .12; --chip-bg: #FFFFFF; --shadow: 0 2px 10px rgba(0, 0, 0, .10);
  --spring: cubic-bezier(.34, 1.56, .64, 1); --spring-soft: cubic-bezier(.22, 1.2, .36, 1); --ease: cubic-bezier(.16, 1, .3, 1);
  position: absolute; inset: 0; overflow: hidden; background: var(--bg); color: var(--text);
  font-family: Inter, system-ui, sans-serif; letter-spacing: -0.2px; font-size: 17px; line-height: 1.3;
  -webkit-font-smoothing: antialiased; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent;
  transition: background-color .5s, color .5s;
}
.ra.dark {
  --bg: #000; --surface: #1C1C1E; --surface-2: #2C2C2E; --text: #FFF; --text2: rgba(235, 235, 245, .6); --text3: rgba(235, 235, 245, .3);
  --sep: rgba(84, 84, 88, .55); --fill: rgba(118, 118, 128, .24); --fill2: rgba(118, 118, 128, .16); --seg-on: #636366;
  --accent: #0A84FF; --danger: #FF453A; --success: #30D158; --warning: #FF9F0A;
  --task: #0A84FF; --meeting: #5E5CE6; --event: #FF9F0A; --occasion: #FF375F; --bill: #30D158; --teal: #40C8E0;
  --tint-a: .24; --chip-bg: #1C1C1E; --shadow: 0 2px 10px rgba(0, 0, 0, .5);
}
.ra * { box-sizing: border-box; }
.ra button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; letter-spacing: inherit; }
.ra .i { font-family: Ph; font-style: normal; line-height: 1; display: inline-block; }
.ra .f { font-family: PhF; font-style: normal; line-height: 1; display: inline-block; }
.ra .ell { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ra .grow { flex: 1; min-width: 0; }

/* press feedback (DS14: shrink + dim) */
.ra .pr { transition: transform .35s var(--spring), opacity .2s, background-color .2s; }
.ra .pr:active { transform: scale(.97); opacity: .85; }
.ra .pr-row:active { background-color: var(--fill2); }

/* status bar */
.ra .sb { position: absolute; left: 0; right: 0; top: 0; height: 50px; z-index: 80; display: flex; align-items: center; justify-content: space-between; padding: 6px 34px 0 40px; font: 600 16px Inter; pointer-events: none; transition: color .4s; }
.ra .sb .icons { display: flex; gap: 6px; align-items: center; font-size: 15px; }
.ra .sb .batt { width: 25px; height: 12px; border-radius: 4px; border: 1.5px solid currentColor; opacity: .9; position: relative; padding: 1.5px; }
.ra .sb .batt i { display: block; height: 100%; width: 72%; background: currentColor; border-radius: 1.5px; }
.ra .sb.light { color: #fff; }

/* screens & stack navigation (iOS slide + parallax) */
.ra .scr { position: absolute; inset: 0; background: var(--bg); overflow: hidden; transition: transform .5s cubic-bezier(.32, .72, 0, 1), opacity .4s, filter .5s; will-change: transform; }
.ra .scr.under { transform: translateX(-28%); filter: brightness(.92); }
.ra .scr.enter { transform: translateX(100%); }
.ra .scroll { position: absolute; inset: 0; overflow-y: auto; overflow-x: hidden; scrollbar-width: none; overscroll-behavior: contain; }
.ra .scroll::-webkit-scrollbar { display: none; }

/* top bar */
.ra .topbar { display: flex; align-items: center; gap: 8px; padding: 54px 14px 0 18px; height: 98px; }
.ra .menu-btn { width: 40px; height: 40px; display: grid; place-items: center; }
.ra .menu-btn span { display: block; width: 22px; height: 2.2px; border-radius: 2px; background: var(--text); box-shadow: 0 7px 0 var(--text), 0 -7px 0 var(--text); }
.ra .menu-btn span { width: 22px; }
.ra .view-pill { margin: 0 auto; height: 44px; border-radius: 22px; background: var(--surface); display: flex; align-items: center; gap: 8px; padding: 0 16px 0 14px; font: 600 17px Inter; box-shadow: 0 1px 3px rgba(0, 0, 0, .04); position: relative; left: 18px; }
.ra .view-pill .i { font-size: 20px; }
.ra .view-pill .car { font-size: 14px; opacity: .7; transition: transform .3s var(--spring); }
.ra .view-pill.open .car { transform: rotate(180deg); }
.ra .icon-btn { width: 40px; height: 40px; display: grid; place-items: center; font-size: 24px; }
.ra .today-btn { height: 34px; padding: 0 14px; border-radius: 10px; background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent); font: 600 16px Inter; }

/* view menu */
.ra .vmenu { position: absolute; top: 100px; left: 50%; width: 230px; margin-left: -115px; background: var(--surface-2); border-radius: 14px; box-shadow: 0 12px 40px rgba(0, 0, 0, .2); z-index: 60; overflow: hidden; transform-origin: 50% 0; transform: scale(.6); opacity: 0; pointer-events: none; transition: transform .4s var(--spring), opacity .2s; }
.ra .vmenu.open { transform: none; opacity: 1; pointer-events: auto; }
.ra .vmenu button { display: flex; align-items: center; gap: 12px; width: 100%; height: 48px; padding: 0 16px; font: 400 17px Inter; text-align: left; }
.ra .vmenu button + button { border-top: .5px solid var(--sep); }
.ra .vmenu button .i { font-size: 20px; width: 22px; }
.ra .vmenu button .ck { margin-left: auto; color: var(--accent); font-size: 18px; opacity: 0; }
.ra .vmenu button.on .ck { opacity: 1; }
.ra .vmenu button:active { background: var(--fill2); }
.ra .scrim { position: absolute; inset: 0; z-index: 55; display: none; }
.ra .scrim.on { display: block; }

/* header (Schedule) */
.ra .hdr { display: flex; align-items: flex-end; justify-content: space-between; padding: 6px 20px 0; }
.ra .hdr .eyb { font: 600 15px Inter; color: var(--accent); text-transform: uppercase; letter-spacing: .2px; }
.ra .hdr h1 { font: 700 34px/41px Inter; letter-spacing: -1.1px; margin-top: 2px; }
.ra .ring { width: 56px; height: 56px; position: relative; flex: none; margin-bottom: 2px; }
.ra .ring svg { width: 56px; height: 56px; transform: rotate(-90deg); }
.ra .ring .bgc { stroke: var(--fill); }
.ra .ring .fg { stroke: var(--success); transition: stroke-dashoffset .9s var(--spring-soft); }
.ra .ring .lab { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; line-height: 1; }
.ra .ring .lab b { font: 700 15px Inter; letter-spacing: -.3px; }
.ra .ring .lab small { font: 500 9px Inter; color: var(--text2); margin-top: 1px; }

/* week strip with sliding highlight */
.ra .wstrip { position: relative; display: grid; grid-template-columns: repeat(7, 1fr); padding: 12px 12px 0; }
.ra .wstrip .d { height: 54px; display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative; z-index: 1; transition: color .3s; }
.ra .wstrip .d small { font: 600 11px Inter; color: var(--text2); transition: color .3s; }
.ra .wstrip .d b { font: 600 18px Inter; margin-top: 1px; }
.ra .wstrip .d .dots { display: flex; gap: 3px; height: 5px; margin-top: 3px; }
.ra .wstrip .d .dots i { width: 4px; height: 4px; border-radius: 50%; }
.ra .wstrip .d.on { color: #fff; }
.ra .wstrip .d.on small { color: rgba(255, 255, 255, .85); }
.ra .wstrip .hi { position: absolute; top: 12px; height: 54px; border-radius: 14px; background: var(--accent); transition: left .5s var(--spring), width .5s var(--spring); }

/* filter chips with sliding highlight */
.ra .chips { position: relative; display: flex; gap: 8px; padding: 12px 16px 2px; overflow-x: auto; scrollbar-width: none; }
.ra .chips::-webkit-scrollbar { display: none; }
.ra .chip { position: relative; z-index: 1; height: 34px; padding: 0 14px; border-radius: 17px; background: var(--chip-bg); display: inline-flex; align-items: center; gap: 7px; font: 600 15px Inter; white-space: nowrap; flex: none; transition: color .3s; }
.ra .chip .dt { width: 8px; height: 8px; border-radius: 50%; }
.ra .chip.on { color: var(--bg); background: transparent; }
.ra .chips .hi { position: absolute; top: 12px; height: 34px; border-radius: 17px; background: var(--text); transition: left .45s var(--spring), width .45s var(--spring); z-index: 0; }

/* home cards */
.ra .cards { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 14px 16px 4px; }
.ra .hcard { position: relative; height: 160px; border-radius: 20px; padding: 14px; overflow: hidden; text-align: left; display: flex; flex-direction: column; }
.ra .hcard.meet { background: color-mix(in srgb, var(--meeting) calc(var(--tint-a) * 100%), var(--surface)); }
.ra .hcard.occ { background: color-mix(in srgb, var(--occasion) calc(var(--tint-a) * 100%), var(--surface)); }
.ra.dark .hcard.meet { background: #1F1D45; } .ra.dark .hcard.occ { background: #3A1520; }
.ra .hcard .ic { width: 34px; height: 34px; border-radius: 9px; background: var(--meeting); color: #fff; display: grid; place-items: center; font-size: 19px; }
.ra .hcard .badge { position: absolute; right: 12px; top: 14px; height: 22px; padding: 0 8px; border-radius: 11px; background: var(--surface); font: 700 11.5px/22px Inter; color: var(--meeting); }
.ra.dark .hcard .badge { background: rgba(0, 0, 0, .35); color: #A5A3FF; }
.ra .hcard .k { font: 700 11px Inter; letter-spacing: .3px; text-transform: uppercase; margin-top: 10px; }
.ra .hcard.meet .k { color: var(--meeting); } .ra.dark .hcard.meet .k { color: #A5A3FF; }
.ra .hcard.occ .k { color: var(--occasion); margin-top: auto; }
.ra .hcard .t { font: 700 16px/20px Inter; letter-spacing: -.3px; margin-top: 2px; }
.ra .hcard .s { font: 400 13px Inter; color: var(--text2); margin-top: 1px; }
.ra .avs { display: flex; margin-top: auto; }
.ra .avs i { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font: 700 9.5px Inter; font-style: normal; color: #000; border: 2px solid transparent; margin-right: -6px; }
.ra .hcard .gift { position: absolute; right: 6px; top: 6px; width: 56px; height: 56px; animation: giftFloat 4s ease-in-out infinite; }
@keyframes giftFloat { 50% { transform: translateY(-4px) rotate(-3deg); } }
.ra .prog3 { display: flex; gap: 4px; margin: 8px 0 8px; }
.ra .prog3 i { flex: 1; height: 4px; border-radius: 2px; background: color-mix(in srgb, var(--text) 10%, transparent); transition: background .4s; }
.ra .prog3 i.on { background: var(--occasion); }
.ra .prep { align-self: flex-start; height: 30px; padding: 0 12px; border-radius: 15px; background: var(--occasion); color: #fff; font: 700 13px Inter; display: inline-flex; align-items: center; gap: 5px; transition: all .4s var(--spring); }
.ra .prep.on { background: color-mix(in srgb, var(--occasion) 16%, transparent); color: var(--occasion); }

/* groups & rows */
.ra .ghead { display: flex; align-items: center; gap: 8px; padding: 20px 20px 8px; }
.ra .ghead h2 { font: 700 20px/25px Inter; letter-spacing: -.45px; }
.ra .ghead .n { min-width: 22px; height: 22px; border-radius: 11px; background: var(--fill); font: 600 13px/22px Inter; text-align: center; padding: 0 7px; }
.ra .ghead.over h2 { color: var(--danger); }
.ra .ghead.over .n { background: color-mix(in srgb, var(--danger) 14%, transparent); color: var(--danger); }
.ra .ghead .meta { margin-left: auto; font: 400 15px Inter; color: var(--text2); }
.ra .group { margin: 0 16px; background: var(--surface); border-radius: 16px; overflow: hidden; }
.ra .row { position: relative; display: flex; align-items: center; gap: 12px; height: 64px; padding: 0 14px 0 14px; transition: height .32s cubic-bezier(.4, 0, .2, 1), opacity .25s, background-color .2s; }
.ra .row + .row::before { content: ''; position: absolute; top: 0; left: 52px; right: 0; border-top: .5px solid var(--sep); }
.ra .row.gone { height: 0 !important; opacity: 0; }
.ra .row.gone::before { opacity: 0; }
.ra .row .tx { flex: 1; min-width: 0; }
.ra .row .tt { position: relative; display: inline-block; max-width: 100%; font: 400 17px/22px Inter; letter-spacing: -.4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; vertical-align: top; transition: color .25s; }
.ra .row .tt::after { content: ''; position: absolute; left: 0; top: 52%; height: 1.5px; width: 0; background: currentColor; transition: width .25s cubic-bezier(.4, 0, .2, 1) .12s; }
.ra .row .sub { display: flex; align-items: center; gap: 5px; font: 400 14px Inter; color: var(--text2); margin-top: 2px; white-space: nowrap; overflow: hidden; }
.ra .row .sub .i { font-size: 14px; }
.ra .row .sub.red { color: var(--danger); }
.ra .row .pill { height: 20px; padding: 0 7px; border-radius: 6px; font: 600 12.5px/20px Inter; background: var(--fill); color: var(--text2); }
.ra .row .pill.red { background: color-mix(in srgb, var(--danger) 12%, transparent); color: var(--danger); }
.ra .row .rt { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; font-size: 20px; flex: none; }
.ra .row.done .tt { color: var(--text2); }
.ra .row.done .tt::after { width: 100%; }
.ra .row.flash { animation: rowFlash 1.6s ease-out; }
@keyframes rowFlash { 0%, 30% { background-color: color-mix(in srgb, var(--accent) 14%, var(--surface)); } }
.ra .row.enter { animation: rowIn .6s var(--spring-soft) both; }
@keyframes rowIn { from { height: 0; opacity: 0; transform: translateY(-10px) scale(.96); } }

/* checkbox (design-direction §6) */
.ra .cb { position: relative; width: 26px; height: 26px; flex: none; border-radius: 50%; }
.ra .cb::before { content: ''; position: absolute; inset: -9px; }
.ra .cb svg { position: absolute; inset: 0; overflow: visible; }
.ra .cb .o { fill: transparent; stroke: var(--c); stroke-width: 2; transition: fill .18s; }
.ra .cb .ck { fill: none; stroke: #fff; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 20; stroke-dashoffset: 20; transition: stroke-dashoffset .28s cubic-bezier(.4, 0, .2, 1) .08s; }
.ra .row.done .cb .o { fill: var(--c); }
.ra .row.done .cb .ck { stroke-dashoffset: 0; }
.ra .row.done .cb { animation: cbPop .42s var(--spring); }
@keyframes cbPop { 40% { transform: scale(1.18); } }
.ra .burst { position: absolute; left: 27px; top: 50%; width: 0; height: 0; pointer-events: none; z-index: 3; }
.ra .burst i { position: absolute; width: 5px; height: 5px; border-radius: 50%; background: var(--c); left: -2.5px; top: -2.5px; animation: burst .55s cubic-bezier(.2, .8, .3, 1) forwards; }
@keyframes burst { 0% { transform: rotate(var(--a)) translateY(0) scale(1); opacity: 1; } 100% { transform: rotate(var(--a)) translateY(-26px) scale(.3); opacity: 0; } }

/* FAB */
.ra .fab { position: absolute; right: 22px; bottom: 34px; width: 60px; height: 60px; border-radius: 30px; background: var(--accent); color: #fff; display: grid; place-items: center; font-size: 30px; box-shadow: 0 8px 22px color-mix(in srgb, var(--accent) 40%, transparent); z-index: 20; transition: transform .4s var(--spring); }
.ra .fab:active { transform: scale(.9); }
.ra .fab .i { transition: transform .45s var(--spring); }
.ra .fab.pulse { animation: fabPulse 2.4s infinite; }
@keyframes fabPulse { 0% { box-shadow: 0 8px 22px color-mix(in srgb, var(--accent) 40%, transparent), 0 0 0 0 color-mix(in srgb, var(--accent) 40%, transparent); } 70% { box-shadow: 0 8px 22px color-mix(in srgb, var(--accent) 40%, transparent), 0 0 0 16px transparent; } }

/* views cross-fade (SwapFade) */
.ra .view { position: absolute; inset: 98px 0 0 0; transition: opacity .32s, transform .45s var(--ease); }
.ra .view.hide { opacity: 0; transform: translateY(14px); pointer-events: none; }

/* fade-slide-in on first paint */
.ra .fsi { animation: fsi .7s var(--ease) both; animation-delay: calc(var(--k, 0) * 45ms); }
@keyframes fsi { from { opacity: 0; transform: translateY(14px); } }

/* ---------- capture sheet (mockup 03) ---------- */
.ra .dim { position: absolute; inset: 0; background: rgba(0, 0, 0, .4); opacity: 0; pointer-events: none; transition: opacity .4s; z-index: 40; }
.ra .dim.on { opacity: 1; pointer-events: auto; }
.ra .sheet { position: absolute; left: 0; right: 0; bottom: 0; top: 56px; z-index: 45; background: var(--bg); border-radius: 24px 24px 0 0; transform: translateY(105%); transition: transform .55s cubic-bezier(.32, .72, 0, 1); box-shadow: 0 -6px 30px rgba(0, 0, 0, .15); display: flex; flex-direction: column; }
.ra .sheet.on { transform: none; }
.ra .grab { width: 36px; height: 5px; border-radius: 3px; background: color-mix(in srgb, var(--text) 22%, transparent); margin: 7px auto 0; flex: none; }
.ra .sbar { display: flex; align-items: center; justify-content: space-between; padding: 10px 16px 0; flex: none; }
.ra .sbar .cx { color: var(--accent); font: 400 17px Inter; width: 84px; text-align: left; }
.ra .sbar h3 { font: 600 17px Inter; }
.ra .sbar .sv { width: 84px; height: 34px; border-radius: 17px; background: var(--accent); color: #fff; font: 600 17px Inter; transition: opacity .2s, transform .35s var(--spring); }
.ra .sbar .sv:disabled { opacity: .4; }
.ra .sbody { flex: 1; overflow-y: auto; scrollbar-width: none; padding-bottom: 30px; }
.ra .sbody::-webkit-scrollbar { display: none; }
.ra .inbox { margin: 14px 16px 0; background: var(--surface); border-radius: 16px; padding: 14px 12px 12px 16px; }
.ra .inrow { display: flex; align-items: center; gap: 10px; }
.ra .infield { position: relative; flex: 1; min-width: 0; height: 30px; }
.ra .infield .hl, .ra .infield input { position: absolute; inset: 0; font: 500 20px/30px Inter; letter-spacing: -.45px; white-space: pre; overflow: hidden; padding: 0; }
.ra .infield .hl { color: transparent; pointer-events: none; }
.ra .infield .hl mark { color: transparent; border-radius: 5px; background: var(--mk); box-shadow: 0 0 0 2px var(--mk); }
.ra .infield .hl mark.date { --mk: color-mix(in srgb, var(--task) 16%, transparent); }
.ra .infield .hl mark.time { --mk: color-mix(in srgb, var(--meeting) 18%, transparent); }
.ra .infield .hl mark.repeat { --mk: color-mix(in srgb, var(--success) 20%, transparent); }
.ra .infield input { width: 100%; border: 0; outline: 0; background: transparent; color: var(--text); caret-color: var(--accent); user-select: text; -webkit-user-select: text; }
.ra .infield input::placeholder { color: var(--text3); font-weight: 400; }
.ra .mic { width: 40px; height: 40px; border-radius: 20px; background: var(--fill); color: var(--accent); display: grid; place-items: center; font-size: 20px; flex: none; }
.ra .mic.listening { background: var(--danger); color: #fff; animation: micPulse 1.2s infinite; }
.ra .tpl { display: flex; align-items: center; gap: 8px; margin-top: 10px; min-height: 30px; flex-wrap: wrap; }
.ra .tpl .tg { height: 28px; padding: 0 6px 0 10px; border-radius: 8px; background: color-mix(in srgb, var(--warning) 15%, transparent); color: #B25E00; font: 600 13.5px Inter; display: inline-flex; align-items: center; gap: 6px; animation: chipIn .45s var(--spring) both; }
.ra.dark .tpl .tg { color: var(--warning); }
.ra .tpl .tg .x { width: 18px; height: 18px; border-radius: 9px; background: rgba(0, 0, 0, .08); display: grid; place-items: center; font-size: 10px; }
.ra .tpl .hint { font: 400 13.5px Inter; color: var(--text2); }
.ra .pchips { display: flex; flex-wrap: wrap; gap: 6px; }
.ra .pc { height: 28px; padding: 0 9px; border-radius: 8px; background: var(--fill2); font: 500 13.5px Inter; display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; animation: chipIn .45s var(--spring) both; animation-delay: calc(var(--k) * 60ms); }
.ra .pc .i { font-size: 14px; }
@keyframes chipIn { from { opacity: 0; transform: scale(.5); } }
.ra .sugg { display: flex; gap: 6px; overflow-x: auto; padding: 10px 16px 0; scrollbar-width: none; }
.ra .sugg::-webkit-scrollbar { display: none; }
.ra .sugg button { flex: none; height: 30px; padding: 0 11px; border-radius: 15px; background: var(--surface); font: 500 13px Inter; color: var(--text2); white-space: nowrap; }
.ra .sugg button:active { background: var(--fill); }
.ra .cap { font: 600 13px Inter; color: var(--text2); text-transform: uppercase; letter-spacing: .2px; padding: 0 32px; margin: 22px 0 7px; }
.ra .form { margin: 0 16px; background: var(--surface); border-radius: 12px; overflow: hidden; }
.ra .frow { position: relative; display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 0 14px; }
.ra .frow + .frow::before { content: ''; position: absolute; top: 0; left: 58px; right: 0; border-top: .5px solid var(--sep); }
.ra .ftile { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; color: #fff; font-size: 18px; flex: none; }
.ra .frow .lb { font: 400 17px Inter; }
.ra .frow .lb small { display: block; font: 400 13px Inter; color: var(--text2); }
.ra .frow .vl { margin-left: auto; font: 400 16px Inter; color: var(--text2); display: flex; align-items: center; gap: 4px; white-space: nowrap; max-width: 62%; overflow: hidden; }
.ra .frow .vl span { overflow: hidden; text-overflow: ellipsis; }
.ra .frow .vl .i { font-size: 14px; opacity: .55; }
.ra .frow .vl.ch { animation: valIn .5s var(--ease); }
@keyframes valIn { from { opacity: 0; transform: translateX(10px); } }
.ra .switch { margin-left: auto; width: 51px; height: 31px; border-radius: 16px; background: color-mix(in srgb, var(--text) 10%, transparent); position: relative; flex: none; transition: background .25s; }
.ra .switch::after { content: ''; position: absolute; top: 2px; left: 2px; width: 27px; height: 27px; border-radius: 50%; background: #fff; box-shadow: 0 2px 4px rgba(0, 0, 0, .2); transition: transform .4s var(--spring); }
.ra .switch.on { background: var(--success); }
.ra .switch.on::after { transform: translateX(20px); }
.ra .falert { display: flex; align-items: center; gap: 6px; font: 400 13.5px Inter; color: var(--text2); padding: 8px 32px 0; }
.ra .seg { position: relative; display: flex; margin: 0 16px; padding: 2px; border-radius: 10px; background: var(--fill); height: 36px; }
.ra .seg button { flex: 1; position: relative; z-index: 1; font: 500 14.5px Inter; display: inline-flex; align-items: center; justify-content: center; gap: 6px; white-space: nowrap; }
.ra .seg button.on { font-weight: 600; }
.ra .seg button .dt { width: 8px; height: 8px; border-radius: 50%; }
.ra .seg .hi { position: absolute; top: 2px; bottom: 2px; border-radius: 8px; background: var(--seg-on); box-shadow: 0 2px 6px rgba(0, 0, 0, .12); transition: left .45s var(--spring), width .45s var(--spring); }
.ra .seg + .seg { margin-top: 10px; }

/* ---------- detail (mockup 04) ---------- */
.ra .banner { position: relative; height: 330px; overflow: hidden; }
.ra .banner.occ { background: color-mix(in srgb, var(--occasion) 13%, var(--bg)); }
.ra.dark .banner.occ { background: #3A1520; }
.ra .banner .circ { position: absolute; right: -60px; top: -40px; width: 240px; height: 240px; border-radius: 50%; background: color-mix(in srgb, var(--occasion) 12%, transparent); }
.ra .back { position: absolute; left: 14px; top: 54px; display: flex; align-items: center; gap: 4px; font: 400 17px Inter; color: var(--occasion); z-index: 2; }
.ra .back .i { font-size: 22px; }
.ra .edit { position: absolute; right: 20px; top: 56px; font: 400 17px Inter; color: var(--occasion); z-index: 2; }
.ra .tags { position: absolute; left: 20px; top: 104px; display: flex; gap: 8px; }
.ra .tags span { height: 26px; padding: 0 10px; border-radius: 13px; background: var(--surface); font: 700 12px/26px Inter; letter-spacing: .3px; text-transform: uppercase; }
.ra .tags span:first-child { color: var(--occasion); }
.ra .dtitle { position: absolute; left: 20px; top: 142px; font: 700 31px/36px Inter; letter-spacing: -1px; max-width: 250px; }
.ra .dsub { position: absolute; left: 20px; top: 186px; font: 400 15.5px Inter; color: color-mix(in srgb, var(--occasion) 70%, var(--text)); }
.ra .bigift { position: absolute; right: 22px; top: 92px; width: 100px; height: 100px; animation: giftFloat 4.5s ease-in-out infinite; }
.ra .stats { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 0 16px; margin-top: -106px; z-index: 2; }
.ra .stat { background: var(--surface); border-radius: 16px; padding: 12px 12px 10px; box-shadow: 0 1px 2px rgba(0,0,0,.03); }
.ra .stat b { display: block; font: 700 26px/30px Inter; letter-spacing: -.8px; }
.ra .stat b small { font-size: 15px; color: var(--text2); font-weight: 600; }
.ra .stat span { font: 400 12.5px Inter; color: var(--text2); }
.ra .card { margin: 12px 16px 0; background: var(--surface); border-radius: 16px; padding: 14px 16px; }
.ra .card .ch { display: flex; justify-content: space-between; align-items: center; font: 600 12.5px Inter; color: var(--text2); text-transform: uppercase; letter-spacing: .3px; margin-bottom: 8px; }
.ra .card .ch a { color: var(--accent); text-transform: none; font: 500 15px Inter; letter-spacing: -.2px; }
.ra .nud { display: flex; gap: 12px; position: relative; padding-bottom: 10px; }
.ra .nud .node { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--occasion); flex: none; display: grid; place-items: center; color: #fff; font-size: 12px; position: relative; z-index: 1; background: var(--surface); transition: all .4s var(--spring); }
.ra .nud.sent .node { background: var(--occasion); }
.ra .nud.later .node { border-color: var(--text3); }
.ra .nud.cancel .node { border-color: var(--text3); border-style: dashed; }
.ra .nud:not(:last-child)::after { content: ''; position: absolute; left: 10px; top: 22px; bottom: 0; width: 2px; background: var(--fill); }
.ra .nud.sent::after { background: var(--occasion) !important; }
.ra .nud .nt { flex: 1; min-width: 0; }
.ra .nud .nt b { display: block; font: 600 15.5px Inter; transition: color .3s; }
.ra .nud .nt span { font: 400 13px Inter; color: var(--text2); }
.ra .nud.cancel .nt b { color: var(--text2); text-decoration: line-through; }
.ra .nud .st { height: 22px; padding: 0 8px; border-radius: 11px; font: 600 11.5px/22px Inter; flex: none; transition: all .3s; }
.ra .st.sent { background: color-mix(in srgb, var(--success) 14%, transparent); color: var(--success); }
.ra .st.next { background: color-mix(in srgb, var(--occasion) 12%, transparent); color: var(--occasion); }
.ra .st.dayof { background: var(--fill); color: var(--text2); }
.ra .st.cancel { background: var(--fill); color: var(--text2); }
.ra .note { display: flex; gap: 12px; font: 400 15.5px/21px Inter; }
.ra .note .i { font-size: 20px; color: var(--text2); flex: none; margin-top: 1px; }
.ra .contact { display: flex; gap: 12px; align-items: center; }
.ra .contact .av { width: 36px; height: 36px; border-radius: 50%; background: #FFE08A; color: #6B4B00; display: grid; place-items: center; font: 700 15px Inter; }
.ra .contact b { display: block; font: 600 15px Inter; }
.ra .contact .grow > span { font: 400 13px Inter; color: var(--text2); }
.ra .dact { position: absolute; left: 16px; right: 16px; bottom: 26px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ra .dact .big { grid-column: span 2; height: 54px; border-radius: 16px; background: var(--occasion); color: #fff; font: 600 18px Inter; display: inline-flex; align-items: center; justify-content: center; gap: 8px; transition: background .4s, color .4s, transform .35s var(--spring); }
.ra .dact .big.on { background: color-mix(in srgb, var(--occasion) 14%, var(--surface)); color: var(--occasion); }
.ra .dact .sm { height: 48px; border-radius: 14px; background: var(--surface); font: 600 16px Inter; color: var(--accent); }
.ra .dact .sm.k { color: var(--text); }

/* ---------- day view (mockup 06) ---------- */
.ra .dhead { display: flex; align-items: center; gap: 12px; padding: 4px 20px 0; }
.ra .dhead .num { font: 700 48px/1 Inter; letter-spacing: -2px; }
.ra .dhead .wd b { display: block; font: 700 19px Inter; letter-spacing: -.4px; }
.ra .dhead .wd span { font: 400 15px Inter; color: var(--text2); }
.ra .dhead .st2 { margin-left: auto; display: flex; gap: 6px; }
.ra .dhead .st2 div { width: 52px; height: 50px; border-radius: 12px; background: var(--fill2); display: grid; place-content: center; text-align: center; line-height: 1.05; }
.ra .dhead .st2 b { font: 700 17px Inter; }
.ra .dhead .st2 small { font: 400 11px Inter; color: var(--text2); }
.ra .dstrip { position: relative; display: grid; grid-template-columns: repeat(7, 1fr); padding: 8px 10px 8px; border-bottom: .5px solid var(--sep); }
.ra .dstrip .d { display: flex; flex-direction: column; align-items: center; gap: 4px; height: 66px; position: relative; z-index: 1; }
.ra .dstrip .d small { font: 600 12px Inter; color: var(--text2); }
.ra .dstrip .d b { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font: 500 18px Inter; transition: color .3s; }
.ra .dstrip .d.on b { color: #fff; font-weight: 700; }
.ra .dstrip .d .dots { display: flex; gap: 2px; height: 4px; }
.ra .dstrip .d .dots i { width: 4px; height: 4px; border-radius: 50%; }
.ra .dstrip .hi { position: absolute; top: 28px; width: 36px; height: 36px; border-radius: 50%; background: var(--accent); transition: left .5s var(--spring); }
.ra .allday { display: flex; gap: 6px; align-items: center; padding: 6px 12px; border-bottom: .5px solid var(--sep); min-height: 44px; }
.ra .allday .lbl { font: 600 10px/1.1 Inter; color: var(--text2); width: 34px; text-align: right; text-transform: uppercase; flex: none; }
.ra .allday .ad { height: 28px; padding: 0 10px; border-radius: 8px; font: 600 13.5px Inter; display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.ra .grid { position: relative; }
.ra .grid .hr { position: relative; height: 56px; }
.ra .grid .hr span { position: absolute; left: 6px; top: -8px; width: 44px; text-align: right; font: 500 11.5px Inter; color: var(--text2); }
.ra .grid .hr::after { content: ''; position: absolute; left: 56px; right: 0; top: 0; border-top: .5px solid var(--sep); opacity: .7; }
.ra .blk { position: absolute; left: 60px; right: 10px; border-radius: 8px; padding: 5px 10px 5px 12px; overflow: hidden; background: color-mix(in srgb, var(--c) calc(var(--tint-a) * 100%), var(--bg)); border-left: 3px solid var(--c); animation: blkIn .55s var(--spring-soft) both; animation-delay: calc(var(--k) * 50ms); transition: opacity .3s; }
.ra .blk b { display: flex; align-items: center; gap: 6px; font: 600 14px Inter; letter-spacing: -.2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ra .blk b .i { color: var(--c); font-size: 15px; }
.ra .blk > span { display: block; font: 400 12.5px Inter; color: var(--text2); white-space: nowrap; }
.ra .blk.done { opacity: .55; }
.ra .blk.done b { text-decoration: line-through; color: var(--text2); }
@keyframes blkIn { from { opacity: 0; transform: translateX(16px); } }
.ra .nowl { position: absolute; left: 50px; right: 0; height: 1.5px; background: var(--danger); z-index: 3; }
.ra .nowl::before { content: attr(data-t); position: absolute; left: -46px; top: -9px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--danger); color: #fff; font: 700 11px/18px Inter; }

/* ---------- month view (mockup 08) ---------- */
.ra .mhead { display: flex; align-items: center; padding: 2px 20px 0; }
.ra .mhead h1 { font: 700 34px Inter; letter-spacing: -1.1px; }
.ra .mhead h1 small { font-weight: 600; color: var(--text2); font-size: 26px; margin-left: 6px; letter-spacing: -.6px; }
.ra .mhead .nav2 { margin-left: auto; display: flex; gap: 8px; }
.ra .mhead .nav2 button { width: 36px; height: 36px; border-radius: 50%; background: var(--fill2); display: grid; place-items: center; font-size: 16px; }
.ra .msum { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 12px 16px 6px; }
.ra .msum div { height: 40px; border-radius: 12px; display: flex; align-items: center; gap: 6px; padding: 0 10px; font: 600 13px Inter; white-space: nowrap; }
.ra .msum b { font-size: 19px; }
.ra .mgrid { display: grid; grid-template-columns: repeat(7, 1fr); padding: 0 6px; position: relative; }
.ra .mgrid .wdn { text-align: center; font: 600 11px Inter; color: var(--text2); padding: 6px 0 4px; }
.ra .mc { height: 54px; border-top: .5px solid var(--sep); display: flex; flex-direction: column; align-items: center; padding-top: 4px; position: relative; z-index: 1; }
.ra .mc b { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font: 500 15px Inter; transition: color .3s; }
.ra .mc.out b { color: var(--text3); }
.ra .mc.today b { background: var(--accent); color: #fff; font-weight: 700; }
.ra .mc.sel:not(.today) b { color: var(--occasion); font-weight: 700; }
.ra .mc .dots { display: flex; gap: 2px; height: 4px; margin-top: 2px; }
.ra .mc .dots i { width: 4px; height: 4px; border-radius: 50%; }
.ra .mc .lab { font: 600 9.5px Inter; padding: 0 4px; border-radius: 4px; margin-top: 2px; white-space: nowrap; max-width: 50px; overflow: hidden; text-overflow: ellipsis; }
.ra .mring { position: absolute; width: 30px; height: 30px; border-radius: 50%; border: 2px solid var(--occasion); z-index: 0; transition: left .45s var(--spring), top .45s var(--spring); pointer-events: none; }
.ra .mpanel { margin-top: 8px; background: color-mix(in srgb, var(--fill) 60%, var(--bg)); border-radius: 22px 22px 0 0; padding: 14px 0 120px; min-height: 300px; }
.ra.dark .mpanel { background: #111; }
.ra .mpanel .ph { display: flex; justify-content: space-between; align-items: baseline; padding: 0 20px 8px; }
.ra .mpanel .ph b { font: 700 20px Inter; letter-spacing: -.4px; }
.ra .mpanel .ph span { font: 400 14px Inter; color: var(--text2); }
.ra .mitem { display: flex; align-items: center; gap: 12px; margin: 0 16px 8px; background: var(--surface); border-radius: 14px; padding: 10px 12px; animation: fsi .45s var(--ease) both; animation-delay: calc(var(--k) * 50ms); }
.ra .mitem .rt { width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; font-size: 21px; flex: none; }
.ra .mitem b { display: block; font: 600 15.5px Inter; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ra .mitem div > span { font: 400 13px Inter; color: var(--text2); white-space: nowrap; }
.ra .mitem .tp { margin-left: auto; height: 22px; padding: 0 8px; border-radius: 11px; font: 600 12px/22px Inter; flex: none; }
.ra .mempty { text-align: center; color: var(--text2); font: 400 15px Inter; padding: 26px 0; }

/* ---------- places (mockup 11) ---------- */
.ra .pmap { position: absolute; left: 0; right: 0; top: 0; height: 430px; overflow: hidden; background: #EEF0F3; }
.ra.dark .pmap { background: #1A1A1C; }
.ra .pmap svg.base { position: absolute; left: 0; top: 0; }
.ra .pring { position: absolute; border-radius: 50%; transform: translate(-50%, -50%); background: color-mix(in srgb, var(--c) 13%, transparent); border: 1.5px solid color-mix(in srgb, var(--c) 60%, transparent); transition: transform .5s var(--spring); }
.ra .ppin { position: absolute; width: 38px; height: 38px; border-radius: 50%; transform: translate(-50%, -50%); background: var(--c); border: 2.5px solid #fff; box-shadow: 0 3px 8px rgba(0, 0, 0, .25); display: grid; place-items: center; color: #fff; font-size: 19px; z-index: 2; animation: pinDrop .7s var(--spring) both; animation-delay: calc(var(--k) * 90ms + .1s); }
.ra .ppin:active { transform: translate(-50%, -50%) scale(.9); }
.ra .ppin.hop { animation: pinHop .6s var(--spring); }
@keyframes pinDrop { from { opacity: 0; transform: translate(-50%, -160%) scale(.6); } }
@keyframes pinHop { 40% { transform: translate(-50%, -80%) scale(1.1); } }
.ra .ppin .cnt { position: absolute; top: -8px; right: -9px; min-width: 18px; height: 18px; border-radius: 9px; background: #fff; color: var(--c); font: 700 11px/18px Inter; text-align: center; padding: 0 4px; }
.ra .ppin .live { position: absolute; bottom: -3px; right: -3px; width: 12px; height: 12px; border-radius: 50%; background: #34C759; border: 2px solid #fff; }
.ra .me { position: absolute; width: 18px; height: 18px; border-radius: 50%; background: #0A84FF; border: 3px solid #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, .3); transform: translate(-50%, -50%); z-index: 3; }
.ra .halo { position: absolute; width: 44px; height: 44px; border-radius: 50%; background: rgba(10, 132, 255, .22); transform: translate(-50%, -50%); z-index: 2; animation: halo 2.4s ease-out infinite; }
@keyframes halo { 0% { transform: translate(-50%, -50%) scale(.6); opacity: 1; } 100% { transform: translate(-50%, -50%) scale(1.6); opacity: 0; } }
.ra .ptop { position: absolute; left: 16px; right: 16px; top: 54px; display: flex; align-items: center; z-index: 5; }
.ra .cbtn { width: 44px; height: 44px; border-radius: 22px; background: var(--surface); box-shadow: var(--shadow); display: grid; place-items: center; font-size: 21px; }
.ra .tpill { height: 44px; border-radius: 22px; background: var(--surface); box-shadow: var(--shadow); padding: 0 20px; display: flex; align-items: center; gap: 8px; font: 600 17px Inter; margin: 0 auto; }
.ra .pchipsr { position: absolute; left: 16px; top: 110px; display: flex; gap: 8px; z-index: 5; }
.ra .pchipsr .chip { box-shadow: 0 1px 4px rgba(0, 0, 0, .08); }
.ra .pchipsr .chip.on { background: var(--text); color: var(--bg); }
.ra .psheet { position: absolute; left: 0; right: 0; top: 392px; bottom: 0; background: var(--bg); border-radius: 24px 24px 0 0; box-shadow: 0 -4px 20px rgba(0, 0, 0, .1); z-index: 6; overflow-y: auto; scrollbar-width: none; transition: transform .5s cubic-bezier(.32, .72, 0, 1); }
.ra .psheet::-webkit-scrollbar { display: none; }
.ra .phd { display: flex; align-items: center; gap: 10px; padding: 16px 20px 8px; }
.ra .phd .tl { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; color: #fff; font-size: 16px; background: var(--c); }
.ra .phd b { font: 700 20px Inter; letter-spacing: -.4px; }
.ra .phd .n { min-width: 24px; height: 24px; border-radius: 12px; background: var(--fill); font: 600 14px/24px Inter; text-align: center; padding: 0 8px; }
.ra .phd .ds { margin-left: auto; font: 400 15px Inter; color: var(--text2); }
.ra .prow { position: relative; display: flex; align-items: center; gap: 14px; min-height: 62px; padding: 0 14px; }
.ra .prow + .prow::before { content: ''; position: absolute; top: 0; left: 58px; right: 0; border-top: .5px solid var(--sep); }
.ra .prow .pk { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-size: 17px; flex: none; background: color-mix(in srgb, var(--c) 15%, transparent); color: var(--c); }
.ra .prow .sub { font: 400 14px Inter; color: var(--text2); display: flex; gap: 5px; align-items: center; }
.ra .live-pill { display: inline-flex; align-items: center; gap: 5px; font: 600 13px Inter; color: var(--success); background: color-mix(in srgb, var(--success) 14%, transparent); height: 24px; padding: 0 9px; border-radius: 12px; white-space: nowrap; flex: none; }
.ra .live-pill i { width: 7px; height: 7px; border-radius: 50%; background: var(--success); }
.ra .walk-trail { position: absolute; z-index: 1; pointer-events: none; }

/* ---------- all clear (mockup 10) ---------- */
.ra .acbanner { position: relative; height: 376px; background: color-mix(in srgb, var(--success) 18%, var(--bg)); overflow: hidden; }
.ra.dark .acbanner { background: #0E2A17; }
.ra .rays { position: absolute; left: 50%; top: 150px; width: 900px; height: 900px; margin: -450px 0 0 -450px; animation: spin 40s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.ra .acbell { position: absolute; left: 50%; top: 66px; width: 180px; height: 180px; margin-left: -90px; border-radius: 50%; background: var(--surface); box-shadow: 0 0 0 26px color-mix(in srgb, var(--success) 14%, transparent); display: grid; place-items: center; animation: acPop .8s var(--spring) both .1s; }
@keyframes acPop { from { transform: scale(.3); opacity: 0; } }
.ra .acbell svg { width: 140px; height: 140px; margin-top: 8px; }
.ra .acbell .ok { position: absolute; right: 2px; bottom: 16px; width: 46px; height: 46px; border-radius: 14px; background: var(--success); color: #fff; display: grid; place-items: center; font-size: 26px; border: 3px solid var(--surface); animation: acPop .6s var(--spring) both .55s; }
.ra .actitle { position: absolute; left: 0; right: 0; top: 262px; text-align: center; font: 700 38px Inter; letter-spacing: -1.4px; color: color-mix(in srgb, var(--success) 40%, #0B3D1A); animation: fsi .7s var(--ease) both .35s; }
.ra.dark .actitle { color: #fff; }
.ra .acsub { position: absolute; left: 0; right: 0; top: 308px; text-align: center; font: 400 16px Inter; color: color-mix(in srgb, var(--success) 50%, var(--text)); animation: fsi .7s var(--ease) both .45s; }
.ra .acstats { margin-top: -26px; }
.ra .rv-row { display: flex; align-items: center; gap: 12px; height: 46px; }
.ra .rv-row + .rv-row { border-top: .5px solid var(--sep); }
.ra .rv-row .ck { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-size: 13px; flex: none; }
.ra .rv-row s { flex: 1; font: 400 16px Inter; color: var(--text2); text-decoration-thickness: 1.5px; }
.ra .rv-row > span:not(.ck) { font: 400 14px Inter; color: var(--text2); }
.ra .acbtn { position: absolute; left: 16px; right: 16px; bottom: 26px; height: 54px; border-radius: 16px; background: var(--accent); color: #fff; font: 600 18px Inter; box-shadow: 0 10px 24px color-mix(in srgb, var(--accent) 35%, transparent); }

/* ---------- drawer ---------- */
.ra .drawer { position: absolute; top: 0; bottom: 0; left: 0; width: 300px; z-index: 50; background: var(--bg); transform: translateX(-102%); transition: transform .5s cubic-bezier(.32, .72, 0, 1); padding: 60px 12px 20px; box-shadow: 10px 0 40px rgba(0, 0, 0, .15); }
.ra .drawer.on { transform: none; }
.ra .drawer h2 { font: 700 28px Inter; letter-spacing: -.8px; padding: 0 10px 16px; display: flex; align-items: center; gap: 10px; }
.ra .drawer h2 svg { width: 34px; height: 34px; }
.ra .drawer .dsec { font: 600 12.5px Inter; color: var(--text2); text-transform: uppercase; letter-spacing: .3px; padding: 16px 10px 6px; }
.ra .drawer button.di { display: flex; align-items: center; gap: 12px; width: 100%; height: 46px; padding: 0 10px; border-radius: 12px; font: 500 16px Inter; text-align: left; }
.ra .drawer button.di .i { font-size: 21px; width: 24px; }
.ra .drawer button.di.on { background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent); font-weight: 600; }
.ra .drawer button.di .ct { margin-left: auto; font: 400 14px Inter; color: var(--text2); }

/* ---------- notification banner (mockup 05) ---------- */
.ra .nb { position: absolute; left: 8px; right: 8px; top: 8px; z-index: 85; border-radius: 26px; background: rgba(36, 36, 40, .88); backdrop-filter: blur(24px) saturate(160%); -webkit-backdrop-filter: blur(24px) saturate(160%); color: #fff; padding: 46px 14px 14px; box-shadow: 0 16px 40px rgba(0, 0, 0, .35); transform: translateY(-120%); transition: transform .6s var(--spring-soft); }
.ra .nb.on { transform: none; }
.ra .nb .nh { display: flex; align-items: center; gap: 8px; font: 400 13.5px Inter; color: rgba(235, 235, 245, .6); }
.ra .nb .nh .ap { width: 20px; height: 20px; border-radius: 6px; background: #F5A300; color: #000; display: grid; place-items: center; font-size: 12px; }
.ra .nb .nh .tm { margin-left: auto; }
.ra .nb .nbd { display: flex; gap: 12px; align-items: center; margin-top: 9px; }
.ra .nb .nbd .tile { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; font-size: 22px; flex: none; }
.ra .nb .nbd b { display: block; font: 600 17px Inter; }
.ra .nb .nbd div > span { font: 400 14px Inter; color: rgba(235, 235, 245, .65); }
.ra .nb .nbt { display: flex; gap: 7px; margin-top: 12px; }
.ra .nb .nbt button { flex: 1; height: 38px; border-radius: 13px; background: rgba(120, 120, 128, .32); color: #fff; font: 600 14.5px Inter; white-space: nowrap; transition: transform .25s var(--spring), filter .2s; }
.ra .nb .nbt button:active { transform: scale(.94); }
.ra .nb .nbt button.hot { background: #FF375F; }
.ra .nb .nbt button.blue { background: #0A84FF; }
.ra .nb.ringing .tile { animation: ringIc .8s ease-in-out 2; }
@keyframes ringIc { 15%, 45%, 75% { transform: rotate(12deg); } 30%, 60%, 90% { transform: rotate(-12deg); } }

/* ---------- toast / snackbar ---------- */
.ra .toast { position: absolute; left: 16px; right: 16px; bottom: 108px; z-index: 70; height: 50px; border-radius: 14px; background: rgba(30, 30, 32, .94); color: #fff; display: flex; align-items: center; gap: 10px; padding: 0 8px 0 14px; font: 500 15px Inter; transform: translateY(20px) scale(.96); opacity: 0; transition: transform .45s var(--spring), opacity .25s; pointer-events: none; }
.ra.dark .toast { background: #3A3A3C; }
.ra .toast.on { transform: none; opacity: 1; pointer-events: auto; }
.ra .toast .ok { width: 24px; height: 24px; border-radius: 50%; background: #30D158; display: grid; place-items: center; font-size: 13px; flex: none; }
.ra .toast .tx { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ra .toast button { height: 36px; padding: 0 12px; border-radius: 10px; color: #0A84FF; font: 600 15px Inter; }

/* ---------- autoplay finger ---------- */
.ra .finger { position: absolute; left: 0; top: 0; width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 50%; z-index: 95; pointer-events: none;
  background: rgba(60, 60, 72, .26); border: 2.5px solid rgba(255, 255, 255, .95); box-shadow: 0 6px 18px rgba(0, 0, 0, .3), inset 0 0 12px rgba(255, 255, 255, .35);
  opacity: 0; transition: left .65s cubic-bezier(.45, 0, .2, 1), top .65s cubic-bezier(.45, 0, .2, 1), opacity .3s, transform .15s; }
.ra .finger.on { opacity: 1; }
.ra .finger.tap { transform: scale(.8); }
.ra .finger-rip { position: absolute; width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 50%; border: 2px solid rgba(255,255,255,.9); z-index: 94; pointer-events: none; animation: rip .5s ease-out forwards; }
@keyframes rip { from { transform: scale(.6); opacity: 1; } to { transform: scale(1.8); opacity: 0; } }

/* confetti canvas inside phone */
.ra canvas.cf { position: absolute; inset: 0; pointer-events: none; z-index: 88; }

@media (prefers-reduced-motion: reduce) {
  .ra *, .ra *::before, .ra *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}