/* Live hero: the real Anssay owner app (Today, Chats, Calendar — from the product screenshots),
   rebuilt in HTML and driven by one scripted story so every movement is a real product event.
   Tokens, the base and ds/bundle.css (.an-btn, ripple/ring keyframes) are linked in the page head. */
.num { font-variant-numeric: tabular-nums; }
.ico { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.ico.s { width: 16px; height: 16px; } .ico.xs { width: 13px; height: 13px; }

/* ---------- Hero copy ---------- */
.hero { max-width: 1240px; margin: 0 auto; padding: 72px 24px 0; text-align: center; }
.hx { margin: 0; font-weight: 800; font-size: clamp(40px, 6.2vw, 76px); line-height: 1.04; letter-spacing: -0.045em; }
.keep { white-space: nowrap; }
.word { display: inline-block; padding: 0.02em 0.36em 0.1em 0.3em; margin: 0 0.04em; border-radius: 999px; line-height: 1.08;
  clip-path: inset(0 round 999px); white-space: nowrap; background: var(--w-soft);
  transition: width 520ms var(--ease-out-soft), background-color 520ms var(--ease-out-soft); }
.word i { display: inline-block; width: 0.3em; height: 0.3em; margin-right: 0.18em; border-radius: 999px; background: var(--w-dot);
  vertical-align: 0.12em; transition: background-color 520ms var(--ease-out-soft); }
.word .wt { display: inline-block; font-weight: 600; letter-spacing: -0.03em; transition: transform 420ms var(--ease-out-soft), opacity 300ms var(--ease-out-soft); }
.word .wt.out { transform: translateY(-70%); opacity: 0; }
.word .wt.in { transform: translateY(70%); opacity: 0; transition: none; }
.sub { max-width: 640px; margin: 22px auto 0; font-size: 19px; line-height: 1.5; color: var(--slate); }
.ctas { display: flex; gap: 12px; justify-content: center; margin-top: 28px; flex-wrap: wrap; }
.fine { margin-top: 14px; font-size: 14px; color: var(--slate); }

/* ---------- Stage ---------- */
/* The app window sits in a textured sky frame a little wider than itself, resting on the frame's bottom edge (rectraa.com). */
/* margin-bottom 0 + square bottom corners: the frame sits flush on the navy section below. */
.stage { position: relative; max-width: 1388px; margin: 56px auto 0; padding: 88px 104px 0; }
.stage::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 28px 28px 0 0;
  background: var(--grain), var(--weave), radial-gradient(60% 70% at 15% 20%, var(--canvas-sky), transparent 70%),
    radial-gradient(50% 60% at 90% 10%, var(--canvas-lilac), transparent 70%), radial-gradient(60% 70% at 85% 95%, var(--canvas-aqua), transparent 70%), #E3ECFF;
  background-blend-mode: multiply, multiply, normal, normal, normal, normal; }
@media (max-width: 1100px) { .stage { margin: 40px 24px 0; padding: 56px 56px 0; } }
@media (max-width: 767px) { .stage { margin: 32px 12px 0; padding: 28px 16px 0; } .stage::before { border-radius: 20px 20px 0 0; } }
.fit { position: relative; transform-origin: top left; }
.scene { position: relative; width: 1180px; height: 780px; }

/* Window */
.win { position: absolute; left: 0; top: 0; width: 1180px; height: 780px; border-radius: 26px; overflow: hidden;
  background: rgba(255,255,255,0.5); border: 1px solid rgba(15,27,61,0.08);
  box-shadow: 0 50px 120px rgba(31,91,232,0.18), 0 10px 30px rgba(15,27,61,0.06);
  -webkit-backdrop-filter: blur(24px) saturate(140%); backdrop-filter: blur(24px) saturate(140%); }
.chrome { height: 44px; display: flex; align-items: center; gap: 8px; padding: 0 18px; background: rgba(255,255,255,0.72); border-bottom: 1px solid var(--line); }
.chrome .dots i { display: inline-block; width: 11px; height: 11px; margin-right: 7px; border-radius: 999px; background: #D8DFEE; }
.chrome .tab { display: flex; align-items: center; gap: 8px; margin-left: 18px; height: 30px; padding: 0 14px; border-radius: 10px; background: var(--glass-strong);
  font: 500 13px/1 var(--font-sans); color: var(--ink); box-shadow: var(--shadow-lift); }
.chrome .tab img { width: 16px; height: 16px; border-radius: 4px; }
.chrome .url { margin-left: auto; font: 500 12px/1 var(--font-sans); color: var(--slate); }
.app { position: absolute; top: 44px; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: 92px 1fr; gap: 0;
  background: linear-gradient(135deg, #EDF2FF 0%, #E6EDFF 45%, #E2F3FB 100%); }

/* Rail (screens 01–21) */
.rail { margin: 14px 0 14px 14px; padding: 14px 0; border-radius: 22px; display: flex; flex-direction: column; align-items: center; gap: 10px;
  background: rgba(255,255,255,0.55); border: 1px solid rgba(255,255,255,0.9); box-shadow: var(--shadow-glass); }
.rail .logo { width: 44px; height: 44px; border-radius: 12px; background: #0A0A0A; display: grid; place-items: center; margin-bottom: 8px; }
.rail .logo img { width: 26px; }
.rail .it { position: relative; display: flex; flex-direction: column; align-items: center; gap: 5px; font: 500 12px/1 var(--font-sans); color: var(--slate); }
.rail .tile { width: 46px; height: 42px; border-radius: 16px; display: grid; place-items: center; color: var(--ink);
  background: rgba(255,255,255,0.85); border: 1px solid rgba(255,255,255,0.95); box-shadow: var(--shadow-lift);
  transition: background-color 260ms var(--ease-out-soft), color 260ms var(--ease-out-soft), box-shadow 260ms var(--ease-out-soft); }
.rail .it.on .tile { background: var(--blue); color: #fff; box-shadow: var(--shadow-glow); }
.rail .it.on { color: var(--blue); font-weight: 600; }
.badge { position: absolute; top: -6px; right: 4px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px; background: var(--blue); color: #fff;
  font: 700 11px/20px var(--font-sans); text-align: center; border: 2px solid #fff; }
.badge.bump { animation: bump 420ms var(--ease-spring); }
@keyframes bump { 40% { transform: scale(1.3); } }

/* Main column */
.main { position: relative; padding: 18px 24px 0 22px; min-width: 0; }
.head { display: flex; align-items: flex-start; gap: 14px; height: 74px; }
.head .eb { font: 500 15px/20px var(--font-sans); color: var(--slate); }
.head h2 { margin: 2px 0 0; font: 800 32px/38px var(--font-sans); letter-spacing: -0.8px; }
.head .right { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.pill-status { display: flex; align-items: center; gap: 10px; height: 46px; padding: 0 6px 0 18px; border-radius: 999px;
  background: rgba(255,255,255,0.85); border: 1px solid rgba(255,255,255,0.95); box-shadow: var(--shadow-lift); font: 600 14px/1 var(--font-sans); }
.pill-status .d { position: relative; width: 11px; height: 11px; border-radius: 999px; background: var(--online); animation: an-breathe 2.4s var(--ease-in-out) infinite; }
.pill-status .an-ripple { border-width: 2px; }
.pill-status .pause { height: 36px; padding: 0 18px; border-radius: 999px; background: var(--blue-soft); color: var(--blue-ink); display: grid; place-items: center; font-weight: 600; }
.btn-new { display: none; height: 46px; padding: 0 20px; border-radius: 999px; background: var(--blue); color: #fff; font: 600 15px/46px var(--font-sans); box-shadow: var(--shadow-glow); }
.view-calendar-on .btn-new { display: inline-flex; gap: 8px; align-items: center; }
.me { display: flex; align-items: center; gap: 8px; height: 46px; padding: 0 14px 0 5px; border-radius: 999px; background: rgba(255,255,255,0.85);
  border: 1px solid rgba(255,255,255,0.95); box-shadow: var(--shadow-lift); font: 600 14px/1 var(--font-sans); }
.av { position: relative; width: 36px; height: 36px; border-radius: 999px; display: grid; place-items: center; color: #fff; font: 700 13px/1 var(--font-sans); flex: none; }
.av.navy { background: var(--avatar-2); } .av.blue { background: var(--avatar-1); } .av.violet { background: var(--avatar-3); } .av.teal { background: var(--avatar-4); }
.av .on { position: absolute; top: -1px; right: -1px; width: 11px; height: 11px; border-radius: 999px; background: var(--online); border: 2px solid #fff; }
.av .ch { position: absolute; right: -4px; bottom: -4px; width: 18px; height: 18px; border-radius: 999px; background: #fff; display: grid; place-items: center; color: var(--ink); box-shadow: var(--shadow-lift); }

.views { position: relative; height: calc(100% - 74px); }
.view { position: absolute; inset: 0; opacity: 0; transform: translateY(10px); pointer-events: none;
  transition: opacity 340ms var(--ease-out-soft), transform 420ms var(--ease-out-soft); }
.view.on { opacity: 1; transform: none; }
.glass { background: rgba(255,255,255,0.55); border: 1px solid rgba(255,255,255,0.92); border-radius: 26px; box-shadow: var(--shadow-glass); }
.white { background: rgba(255,255,255,0.88); border: 1px solid rgba(255,255,255,0.95); box-shadow: var(--shadow-lift); }
.lbl { font: 500 14px/20px var(--font-sans); color: var(--slate); }
.chip { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 12px; border-radius: 999px; font: 500 13px/1 var(--font-sans); white-space: nowrap; }
.chip.done { background: var(--done-soft); color: var(--done-ink); } .chip.miss { background: var(--missed-soft); color: var(--missed); }
.chip.needs { background: var(--needs-you-soft); color: var(--ink); } .chip.blue { background: var(--blue-soft); color: var(--blue-ink); }
.chip.violet { background: var(--violet-soft); color: var(--violet-ink); }
.bluebtn { display: inline-grid; place-items: center; height: 36px; padding: 0 18px; border-radius: 999px; background: var(--blue); color: #fff; font: 600 14px/1 var(--font-sans);
  box-shadow: 0 6px 16px rgba(31,91,232,0.28); transition: transform 90ms var(--ease-out-soft), background-color 160ms; }
.ghostbtn { display: inline-grid; place-items: center; height: 36px; padding: 0 16px; border-radius: 999px; background: #fff; color: var(--ink); font: 600 14px/1 var(--font-sans);
  border: 1px solid rgba(15,27,61,0.08); box-shadow: var(--shadow-lift); transition: transform 90ms var(--ease-out-soft); }
.pressed { transform: scale(0.95) !important; }
.flash { animation: an-flash 900ms var(--ease-out-soft); }
.rise { animation: an-rise 320ms var(--ease-out-soft) both; }

/* ---- Today (screen 01) ---- */
.kpis { display: grid; grid-template-columns: 1.05fr 1fr 1fr 1fr; gap: 16px; }
.kpi { position: relative; overflow: hidden; padding: 20px 22px; min-height: 196px; }
.kpi .val { font: 700 44px/50px var(--font-sans); letter-spacing: -1.2px; margin-top: 4px; }
.kpi .sm { font: 400 14px/20px var(--font-sans); color: var(--slate); margin-top: 4px; }
.kpi .chip { margin-top: 10px; }
.kpi .ring { position: absolute; right: -70px; top: -70px; width: 220px; height: 220px; border-radius: 999px; border: 2px solid var(--blue); opacity: 0; }
.kpi .ring.go { animation: an-ring 1200ms var(--ease-out-soft) forwards; }
.kpi .reddot { display: inline-block; width: 8px; height: 8px; border-radius: 999px; background: var(--missed); margin-right: 6px; }
.meters { margin-top: 8px; display: grid; gap: 7px; }
.meter { display: grid; grid-template-columns: 76px 1fr; align-items: center; gap: 8px; font: 400 12px/1 var(--font-sans); color: var(--slate); }
.meter b { position: relative; height: 6px; border-radius: 999px; background: var(--mist); overflow: hidden; }
.meter b i { position: absolute; inset: 0 auto 0 0; border-radius: 999px; background: var(--blue); transition: width 420ms var(--ease-out-soft); }
.lower { display: grid; grid-template-columns: 1.15fr 1fr; gap: 16px; margin-top: 16px; }
.panel { padding: 20px 20px 18px; min-height: 330px; overflow: hidden; }
.panel .ph { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.panel .ph b { font: 700 19px/24px var(--font-sans); }
.panel .ph .cnt { min-width: 24px; height: 24px; padding: 0 7px; border-radius: 999px; background: var(--blue); color: #fff; font: 700 12px/24px var(--font-sans); text-align: center; }
.panel .ph a { margin-left: auto; font: 600 14px/1 var(--font-sans); color: var(--blue); }
.list { display: flex; flex-direction: column; gap: 10px; }
.nrow { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 18px; }
.nrow .t { min-width: 0; flex: 1; }
.nrow .t b { display: flex; align-items: center; gap: 6px; font: 600 16px/20px var(--font-sans); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nrow .t span { display: block; font: 400 14px/19px var(--font-sans); color: var(--slate); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nrow .wa { color: #1FAF5A; }
.urow { display: grid; grid-template-columns: 78px 1fr auto; align-items: center; gap: 12px; padding: 13px 14px; border-radius: 18px; }
.urow .tm { font: 600 15px/1 var(--font-sans); }
.urow b { display: block; font: 600 16px/20px var(--font-sans); } .urow span { font: 400 13px/18px var(--font-sans); color: var(--slate); }
.urow.next { background: rgba(220,231,255,0.7); border: 1.5px solid rgba(31,91,232,0.55); }
.urow .ok { display: inline-flex; gap: 6px; align-items: center; height: 36px; padding: 0 14px; border-radius: 999px; background: var(--done-soft); color: var(--done-ink); font: 600 14px/1 var(--font-sans); }

/* ---- Chats (screen 02) ---- */
.chats { display: grid; grid-template-columns: 330px 1fr; height: calc(100% - 14px); overflow: hidden; }
.clist { border-right: 1px solid var(--line); padding: 16px; display: flex; flex-direction: column; gap: 12px; min-height: 0; }
.search { display: flex; align-items: center; gap: 10px; height: 44px; padding: 0 16px; border-radius: 999px; font: 400 15px/1 var(--font-sans); color: var(--slate); }
.ctabs { display: flex; gap: 16px; padding: 0 4px; border-bottom: 1px solid var(--line); font: 500 14px/1 var(--font-sans); color: var(--slate); }
.ctabs span { padding: 8px 0 10px; display: inline-flex; gap: 6px; align-items: center; }
.ctabs span.on { color: var(--blue); border-bottom: 2px solid var(--blue); margin-bottom: -1px; }
.ctabs .n { min-width: 18px; height: 18px; border-radius: 999px; background: var(--needs-you); color: #fff; font: 700 11px/18px var(--font-sans); text-align: center; }
.filters { display: flex; gap: 8px; }
.filters span { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: 999px; font: 500 13px/1 var(--font-sans); }
.crow { display: grid; grid-template-columns: 42px 1fr auto; gap: 12px; padding: 12px; border-radius: 16px; transition: background-color 200ms; }
.crow.sel { background: rgba(220,231,255,0.85); }
.crow b { font: 600 15px/19px var(--font-sans); } .crow .d { font: 400 13px/18px var(--font-sans); color: var(--slate); margin-top: 2px; }
.crow .tm { font: 400 12px/18px var(--font-sans); color: var(--slate); text-align: right; }
.crow .dot { display: block; width: 8px; height: 8px; border-radius: 999px; background: var(--blue); margin: 10px 0 0 auto; }
.crow .chip { height: 22px; font-size: 12px; padding: 0 9px; margin-top: 6px; }
.thread { display: grid; grid-template-rows: auto auto auto 1fr auto; min-width: 0; min-height: 0; }
.thead { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--line); }
.thead b { font: 700 17px/20px var(--font-sans); } .thead .m { font: 400 13px/18px var(--font-sans); color: var(--slate); display: flex; gap: 6px; align-items: center; }
.thead .act { margin-left: auto; display: flex; gap: 10px; align-items: center; font: 600 14px/1 var(--font-sans); }
.banner { display: flex; align-items: center; gap: 10px; padding: 12px 18px; font: 600 14px/1 var(--font-sans); transition: background-color 320ms; }
.banner.wait { background: var(--needs-you-soft); } .banner.taken { background: var(--blue-soft); color: var(--blue-ink); }
.banner .bd { width: 8px; height: 8px; border-radius: 999px; background: var(--needs-you); }
.banner.taken .bd { background: var(--blue); }
.banner .bluebtn { margin-left: auto; height: 32px; }
.legend { display: flex; align-items: center; gap: 14px; margin: 10px 18px 0; padding: 8px 14px; border-radius: 999px; font: 400 12px/1 var(--font-sans); color: var(--slate); }
.legend i { display: inline-block; width: 11px; height: 11px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.msgs { display: flex; flex-direction: column; gap: 10px; padding: 14px 18px; overflow: hidden; justify-content: flex-end; min-height: 0; }
.day { align-self: center; padding: 5px 12px; border-radius: 999px; font: 500 12px/1 var(--font-sans); color: var(--slate); }
.bub { max-width: 64%; padding: 11px 14px; border-radius: 18px; font: 400 15px/21px var(--font-sans); animation: an-rise 260ms var(--ease-out-soft) both; }
.bub small { display: block; margin-bottom: 3px; font: 600 12px/16px var(--font-sans); color: var(--slate); }
.bub time { display: block; margin-top: 3px; font: 400 11px/14px var(--font-sans); color: var(--slate); text-align: right; }
.bub.cust { align-self: flex-start; background: #fff; border-bottom-left-radius: 6px; box-shadow: var(--shadow-lift); }
.bub.ans { align-self: flex-end; background: var(--blue-soft); border-bottom-right-radius: 6px; }
.bub.staff { align-self: flex-end; background: var(--blue); color: #fff; border-bottom-right-radius: 6px; box-shadow: 0 6px 16px rgba(31,91,232,0.28); }
.bub.staff small, .bub.staff time { color: rgba(255,255,255,0.85); }
.voice { display: flex; align-items: center; gap: 12px; padding: 4px 0 6px; }
.voice .play { width: 34px; height: 34px; border-radius: 999px; background: var(--blue); color: #fff; display: grid; place-items: center; box-shadow: var(--shadow-glow); }
.voice .bars { display: flex; align-items: center; gap: 3px; height: 26px; }
.voice .bars b { width: 3px; border-radius: 999px; background: rgba(31,91,232,0.35); transition: background-color 120ms; }
.voice .bars b.p { background: var(--blue); }
.voice .tm { font: 500 13px/1 var(--font-sans); color: var(--slate); min-width: 30px; }
.tr { padding-top: 8px; border-top: 1px solid var(--line); font: 400 14px/20px var(--font-sans); }
.tr em { display: block; font-style: normal; font-size: 12px; color: var(--slate); margin-top: 2px; }
.typing { align-self: flex-end; display: inline-flex; gap: 5px; padding: 12px 14px; border-radius: 18px; background: var(--blue-soft); }
.typing.left { align-self: flex-start; background: #fff; box-shadow: var(--shadow-lift); }
.typing i { width: 7px; height: 7px; border-radius: 999px; background: var(--blue); animation: an-typing 0.9s var(--ease-in-out) infinite; }
.typing.left i { background: var(--slate); }
.typing i:nth-child(2) { animation-delay: 150ms; } .typing i:nth-child(3) { animation-delay: 300ms; }
.sugs { display: flex; gap: 8px; padding: 0 18px 10px; }
.sugs span { max-width: 300px; height: 34px; padding: 0 14px; border-radius: 999px; background: var(--blue-soft); color: var(--blue-ink); font: 500 13px/34px var(--font-sans);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: transform 90ms, opacity 240ms; }
.composer { display: flex; align-items: center; gap: 12px; margin: 0 18px 16px; height: 52px; padding: 0 8px 0 18px; border-radius: 999px; background: #fff;
  border: 1.5px solid rgba(15,27,61,0.14); font: 400 15px/1 var(--font-sans); transition: border-color 200ms, box-shadow 200ms; }
.composer.focus { border-color: var(--blue); box-shadow: 0 0 0 4px rgba(31,91,232,0.12); }
.composer .txt { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; color: var(--ink); }
.composer .txt.ph { color: var(--slate); }
.caret { display: inline-block; width: 2px; height: 18px; background: var(--blue); vertical-align: -3px; margin-left: 1px; animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.send { width: 38px; height: 38px; border-radius: 999px; display: grid; place-items: center; background: var(--mist); color: var(--slate); transition: background-color 200ms, color 200ms, transform 90ms; }
.send.ready { background: var(--blue); color: #fff; box-shadow: var(--shadow-glow); }
.learn { position: absolute; right: 22px; bottom: 86px; width: 340px; padding: 16px 18px; border-radius: 20px; opacity: 0; transform: translateY(12px) scale(0.98);
  transition: opacity 320ms var(--ease-out-soft), transform 420ms var(--ease-spring); }
.learn.on { opacity: 1; transform: none; }
.learn .q { font: 600 15px/20px var(--font-sans); margin: 4px 0 4px; }
.learn p { margin: 0 0 12px; font: 400 13px/18px var(--font-sans); color: var(--slate); }
.learn .row { display: flex; gap: 8px; align-items: center; }
.learn .saved { display: inline-flex; gap: 6px; align-items: center; height: 36px; padding: 0 14px; border-radius: 999px; background: var(--done-soft); color: var(--done-ink); font: 600 14px/1 var(--font-sans); }

/* ---- Calendar (screen 05) ---- */
.calbar { display: flex; align-items: center; gap: 12px; }
.seg { display: inline-flex; padding: 4px; border-radius: 999px; }
.seg span { height: 36px; padding: 0 18px; border-radius: 999px; font: 600 14px/36px var(--font-sans); }
.seg span.on { background: var(--blue); color: #fff; box-shadow: var(--shadow-glow); }
.circ { width: 40px; height: 40px; border-radius: 999px; display: grid; place-items: center; }
.calbar .date { font: 700 18px/1 var(--font-sans); margin-left: 6px; }
.calbar .docs { margin-left: auto; display: flex; gap: 8px; }
.calbar .docs span { display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 14px; border-radius: 999px; font: 600 13px/1 var(--font-sans); }
.calbar .docs span.on { background: var(--blue); color: #fff; }
.calbar .docs i { width: 8px; height: 8px; border-radius: 999px; }
.leg { display: flex; gap: 18px; margin: 12px 4px; font: 400 13px/1 var(--font-sans); color: var(--slate); }
.leg i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 6px; vertical-align: -2px; }
.calgrid { position: relative; padding: 14px 16px; height: 520px; overflow: hidden; }
.cols3 { display: grid; grid-template-columns: 58px repeat(3, 1fr); gap: 0 14px; }
.colh { display: flex; justify-content: center; align-items: center; gap: 8px; height: 38px; border-radius: 999px; font: 600 14px/1 var(--font-sans); }
.colh i { width: 8px; height: 8px; border-radius: 999px; } .colh em { font-style: normal; color: var(--slate); font-weight: 500; }
.hrs { position: relative; margin-top: 14px; }
.hrow { height: 64px; border-top: 1px solid var(--line); font: 500 12px/1 var(--font-sans); color: var(--slate); padding-top: 6px; }
.lane { position: absolute; top: 0; bottom: 0; border-radius: 16px; background: rgba(255,255,255,0.45); border: 1px solid rgba(255,255,255,0.8); }
.ev { position: absolute; left: 6px; right: 6px; height: 40px; padding: 0 12px; border-radius: 12px; display: flex; align-items: center; gap: 6px;
  font: 400 12px/1 var(--font-sans); color: var(--slate); white-space: nowrap; overflow: hidden; }
.ev b { color: var(--ink); font-weight: 600; font-size: 13px; } .ev strong { font: 700 12px/1 var(--font-sans); color: var(--ink); }
.ev .ic { margin-left: auto; display: flex; gap: 5px; align-items: center; }
.ev.chk { background: #DDF6EC; border: 1px solid #A9E5CD; } .ev.nos { background: #FFE4EA; border: 1px solid #F7B3C2; }
.ev.book { background: var(--blue-soft); border: 1px solid #B9CCFA; }
.ev.hold { background: rgba(255,255,255,0.9); border: 2px dashed var(--blue); color: var(--blue-ink); }
.ev.fill { background: #fff; border: 1px solid #B9CCFA; }
.ev.fill::before { content: ""; position: absolute; inset: 0; background: var(--blue-soft); transform-origin: left; animation: an-fill 420ms var(--ease-out-soft) both; z-index: 0; }
.ev > * { position: relative; z-index: 1; }
.tickc { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 999px; background: var(--done); color: #fff; }
.tickc.pop { animation: an-pop 260ms var(--ease-spring) both; }
.nos-tag { height: 18px; padding: 0 7px; border-radius: 999px; background: var(--missed); color: #fff; font: 700 10px/18px var(--font-sans); }
.holdring { width: 18px; height: 18px; }
.holdring circle { fill: none; stroke-width: 3; }
.nowline { position: absolute; left: 58px; right: 0; height: 2px; background: var(--missed); transition: top 1s linear; }
.nowline::before { content: ""; position: absolute; left: -5px; top: -4px; width: 10px; height: 10px; border-radius: 999px; background: var(--missed); }

/* ---- Toast (screen 03) ---- */
.toast { position: absolute; top: 58px; right: 18px; z-index: 6; width: 360px; display: flex; gap: 14px; padding: 16px 18px; border-radius: 20px; background: #fff;
  box-shadow: 0 18px 50px rgba(15,27,61,0.16); opacity: 0; transform: translateY(-16px) scale(0.98);
  transition: opacity 320ms var(--ease-out-soft), transform 460ms var(--ease-spring); }
.toast.on { opacity: 1; transform: none; }
.toast .lg { width: 42px; height: 42px; border-radius: 11px; background: #0A0A0A; display: grid; place-items: center; flex: none; }
.toast .lg img { width: 24px; }
.toast b { display: block; font: 700 16px/20px var(--font-sans); } .toast span { display: block; font: 400 14px/20px var(--font-sans); color: var(--slate); }
.toast a { display: inline-block; margin-top: 6px; font: 600 14px/1 var(--font-sans); color: var(--blue); }

/* ---- Cursor ---- */
.cursor { position: absolute; left: 0; top: 0; z-index: 9; pointer-events: none; opacity: 0;
  transition: transform 900ms cubic-bezier(0.45, 0.05, 0.25, 1), opacity 260ms; will-change: transform; }
.cursor.on { opacity: 1; }
.cursor svg { display: block; filter: drop-shadow(0 3px 6px rgba(15,27,61,0.3)); }
.cursor .who { position: absolute; left: 18px; top: 20px; padding: 5px 10px; border-radius: 999px; background: var(--avatar-2); color: #fff; font: 600 12px/1 var(--font-sans); white-space: nowrap; }
.cursor .clk { position: absolute; left: -14px; top: -14px; width: 30px; height: 30px; border-radius: 999px; border: 2px solid var(--blue); opacity: 0; }
.cursor .clk.go { animation: clk 520ms var(--ease-out-soft); }
@keyframes clk { 0% { transform: scale(0.3); opacity: 0.9; } 100% { transform: scale(1.4); opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .pill-status .d { animation: none; }
  .cursor { display: none; }
}