/* Motion & feedback layer. Loaded last. Reclorio palette only, phone first:
   press feedback on touch, hover only for fine pointers, transform/opacity animations. */
:root {
  --ease-out-expo: cubic-bezier(.22, 1, .36, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  --accent-glow: rgba(42, 140, 255, .55);
  --motion-press: .965;
}

/* ---------- Buttons: spring press, ripple, glow ---------- */
.primary, .secondary, .danger {
  position: relative; isolation: isolate; overflow: hidden;
  transition: transform .36s var(--ease-spring), background-color .18s, border-color .18s, color .18s, box-shadow .25s, opacity .18s;
}
.primary { box-shadow: 0 8px 22px -12px var(--accent-glow), inset 0 1px 0 rgba(255, 255, 255, .14); }
.primary:active:not(:disabled), .secondary:active:not(:disabled), .danger:active:not(:disabled) {
  transform: scale(var(--motion-press)); transition-duration: .1s; transition-timing-function: ease-out;
}
.primary:active:not(:disabled) { box-shadow: 0 4px 12px -8px var(--accent-glow), inset 0 1px 0 rgba(255, 255, 255, .1); }
/* One soft light sweep when a main button appears. */
.primary::before {
  content: ''; position: absolute; inset: -1px; z-index: -1; pointer-events: none;
  background: linear-gradient(110deg, transparent 35%, rgba(255, 255, 255, .22) 50%, transparent 65%);
  background-size: 250% 100%; background-position: 130% 0; opacity: 0;
  animation: motion-sheen 1.1s .35s var(--ease-out-expo) 1 backwards;
}
.motion-ripple {
  position: absolute; z-index: 0; border-radius: 50%; pointer-events: none;
  background: currentColor; opacity: 0; transform: scale(0);
  animation: motion-ripple .62s var(--ease-out-expo) forwards;
}
.primary .motion-ripple { background: #fff; }
.motion-ripple.is-cancelled { animation: motion-ripple-out .2s ease-out forwards; }
.offer-card, .creator-card, .empty-state-action, .payment-history-item, .support-ticket-link { overflow: hidden; }
.creator-card, .empty-state-action, .payment-history-item { position: relative; }
.offer-card, .creator-card, .empty-state-action, .surface-card.payment-history-item {
  transition: transform .38s var(--ease-spring), background-color .18s, border-color .18s;
}
.offer-card:active, .creator-card:active, .empty-state-action:active, .surface-card.payment-history-item:active {
  transform: scale(.982); transition-duration: .1s; transition-timing-function: ease-out;
}
.offer-chevron { transition: transform .3s var(--ease-spring); }
.offer-card:active .offer-chevron { transform: translateX(3px); }
.icon-button, .text-button, .back, .composer-send { transition: transform .32s var(--ease-spring), background-color .18s, color .18s; }
.icon-button:active:not(:disabled), .composer-send:active:not(:disabled) { transform: scale(.9); transition-duration: .08s; }
.back:active .icon { transform: translateX(-3px); }
.back .icon { transition: transform .3s var(--ease-spring); }
@media (hover: hover) and (pointer: fine) {
  .primary:hover:not(:disabled) { box-shadow: 0 10px 26px -12px var(--accent-glow), inset 0 1px 0 rgba(255, 255, 255, .16); }
  .offer-card:hover .offer-chevron { transform: translateX(2px); }
}

/* ---------- Button loading: no width jump, comet spinner in the centre ---------- */
button.is-loading { opacity: 1 !important; cursor: progress; }
:is(.primary, .secondary, .danger, .text-button, .composer-send, .icon-button, .snackbar-action).is-loading {
  color: transparent !important;
}
:is(.primary, .secondary, .danger, .text-button, .composer-send, .icon-button, .snackbar-action):is(.is-loading, .is-success) > :not(.motion-ripple):not(.motion-check) {
  opacity: 0; transform: scale(.85); transition: opacity .15s, transform .2s var(--ease-out-expo);
}
:is(.primary, .secondary, .danger, .text-button, .composer-send, .icon-button, .snackbar-action) > * { transition: opacity .2s, transform .3s var(--ease-spring); }
:is(.primary, .secondary, .danger, .text-button, .composer-send, .icon-button, .snackbar-action).is-loading::after {
  content: ''; position: absolute; inset: 0; z-index: 1; display: block; width: 20px; height: 20px; margin: auto !important;
  border: 0 !important; border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 0 12%, var(--loader-color, var(--accent, #2a8cff)) 100%);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2.6px), #000 calc(100% - 2.2px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 2.6px), #000 calc(100% - 2.2px));
  animation: motion-spin .72s linear infinite, motion-fade-in .18s ease-out;
}
.primary, .composer-send { --loader-color: #fff; }
.secondary, .text-button, .icon-button, .snackbar-action { --loader-color: var(--accent, #2a8cff); }
.danger { --loader-color: #ff9299; }
.primary.is-loading {
  background-image: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .16) 50%, transparent 70%);
  background-size: 220% 100%; animation: motion-sheen-loop 1.5s linear infinite;
}
.primary.is-loading::before { display: none; }

/* Success: drawn check mark + accent pulse. Error: short shake. */
.motion-check { position: absolute; inset: 0; z-index: 2; width: 22px; height: 22px; margin: auto; pointer-events: none; color: var(--loader-color, var(--accent, #2a8cff)); }
.motion-check path { stroke-dasharray: 24; stroke-dashoffset: 24; animation: motion-draw .42s .05s var(--ease-out-expo) forwards; }
.motion-check { animation: motion-pop .45s var(--ease-spring); }
.secondary.is-success { border-color: #2a8cff80; }
.primary.is-success { box-shadow: 0 0 0 0 var(--accent-glow); animation: motion-glow .8s ease-out; }
.is-shaking { animation: motion-shake .42s cubic-bezier(.36, .07, .19, .97); }

/* ---------- Spinners ---------- */
.inline-spinner {
  border: 0 !important; border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 0 12%, currentColor 100%);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2.6px), #000 calc(100% - 2.2px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 2.6px), #000 calc(100% - 2.2px));
  animation: motion-spin .72s linear infinite;
}
.motion-orbit { position: relative; display: grid; place-items: center; width: 64px; height: 64px; color: var(--accent, #2a8cff); }
.motion-orbit::before, .motion-orbit::after { content: ''; position: absolute; border-radius: 50%; pointer-events: none; }
.motion-orbit::before { inset: 6px; border: 1px solid rgba(42, 140, 255, .35); animation: motion-halo 1.8s var(--ease-out-expo) infinite; }
.motion-orbit::after {
  top: 2px; left: calc(50% - 3px); width: 6px; height: 6px; background: #7cb9ff;
  box-shadow: 0 0 10px 2px var(--accent-glow); transform-origin: 3px 30px; animation: motion-spin 1.6s linear infinite;
}
.motion-orbit > .inline-spinner { width: 34px !important; height: 34px !important; }
.submit-overlay[open] { animation: motion-dialog-in .42s var(--ease-spring); }
.submit-overlay[open]::backdrop { animation: motion-fade-in .25s ease-out; }
.submit-overlay-content p { transition: opacity .2s; }

/* ---------- Skeletons: content-shaped, shimmer travels down the page ---------- */
.skeleton { background: #131c26; }
.skeleton::after {
  background: linear-gradient(100deg, transparent 20%, rgba(124, 185, 255, .06) 38%, rgba(255, 255, 255, .085) 50%, rgba(124, 185, 255, .06) 62%, transparent 80%);
  animation: skeleton-slide 1.5s cubic-bezier(.4, 0, .2, 1) infinite; animation-delay: calc(var(--i, 0) * 110ms);
}
.skeleton-row {
  display: grid; grid-template-columns: 46px minmax(0, 1fr) 64px; align-items: center; gap: 12px;
  min-height: 90px; padding: 12px; border: 1px solid var(--border-soft, #1c2731); border-radius: var(--radius-md, 14px);
  background: var(--surface-raised, #111820); animation: motion-rise .45s var(--ease-out-expo) backwards;
  animation-delay: calc(var(--i, 0) * 60ms);
}
.skeleton-row .skeleton { border-radius: 8px; }
.sk-avatar { width: 46px; height: 46px; border-radius: 13px !important; }
.sk-lines { display: grid; gap: 9px; min-width: 0; }
.sk-line { height: 12px; width: 78%; }
.sk-line.short { width: 46%; height: 10px; }
.sk-chip { height: 22px; border-radius: 12px !important; }
/* Fast requests should not flash a skeleton or the progress bar. */
.page-skeleton { animation: motion-fade-in .25s .14s ease-out backwards; }

/* ---------- Top progress: glowing comet ---------- */
.background-progress { height: 2px !important; background: transparent !important; overflow: visible !important; }
.background-progress:not([hidden]) { animation: motion-fade-in .2s .15s ease-out backwards; }
.background-progress > span {
  width: 45% !important; border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--accent, #2a8cff) 65%, #a9d3ff) !important;
  box-shadow: 0 0 10px 1px var(--accent-glow);
  animation: motion-comet 1.2s cubic-bezier(.65, .05, .36, 1) infinite !important;
}
.indeterminate-progress:not(.background-progress) > span { background: linear-gradient(90deg, transparent, var(--accent, #2a8cff) 60%, #8fc6ff); border-radius: inherit; }

/* ---------- AI waiting ---------- */
.ai-loading-mark { position: relative; display: grid; place-items: center; width: 56px !important; height: 56px !important; animation: none !important; }
.ai-loading-mark > svg { width: 30px !important; height: 30px !important; animation: ai-breathe 1.6s ease-in-out infinite; filter: drop-shadow(0 0 8px var(--accent-glow)); }
.ai-orbit { position: absolute; inset: 0; animation: motion-spin 2.6s linear infinite; }
.ai-orbit i { position: absolute; top: calc(50% - 3px); left: calc(50% - 3px); width: 6px; height: 6px; border-radius: 50%; background: var(--accent, #2a8cff); }
.ai-orbit i:nth-child(1) { transform: rotate(0deg) translateY(-26px); }
.ai-orbit i:nth-child(2) { transform: rotate(120deg) translateY(-26px); opacity: .65; }
.ai-orbit i:nth-child(3) { transform: rotate(240deg) translateY(-26px); opacity: .35; }
.ai-loading-hint { transition: opacity .22s, transform .22s var(--ease-out-expo); }
.ai-loading-hint.is-swapping { opacity: 0; transform: translateY(-4px); }

/* ---------- Screens, lists, sheets ---------- */
main > .hero, main > .detail-card, main > .list { animation: motion-rise .34s var(--ease-out-expo); }
:is(.list, .support-list, .support-thread, .card-grid, .payment-history-list, .subscription-queue) > :not(.loading-state):not(.skeleton-row) {
  animation: motion-rise .42s var(--ease-out-expo) backwards;
}
:is(.list, .support-list, .support-thread, .card-grid, .payment-history-list, .subscription-queue) > :nth-child(2) { animation-delay: 35ms; }
:is(.list, .support-list, .support-thread, .card-grid, .payment-history-list, .subscription-queue) > :nth-child(3) { animation-delay: 70ms; }
:is(.list, .support-list, .support-thread, .card-grid, .payment-history-list, .subscription-queue) > :nth-child(4) { animation-delay: 105ms; }
:is(.list, .support-list, .support-thread, .card-grid, .payment-history-list, .subscription-queue) > :nth-child(5) { animation-delay: 140ms; }
:is(.list, .support-list, .support-thread, .card-grid, .payment-history-list, .subscription-queue) > :nth-child(6) { animation-delay: 175ms; }
:is(.list, .support-list, .support-thread, .card-grid, .payment-history-list, .subscription-queue) > :nth-child(7) { animation-delay: 210ms; }
:is(.list, .support-list, .support-thread, .card-grid, .payment-history-list, .subscription-queue) > :nth-child(n+8) { animation-delay: 245ms; }
.discovery-results > * { animation: none !important; }
.bottom-sheet[open] { animation: motion-sheet-in .42s var(--ease-out-expo); }
.bottom-sheet[open]::backdrop, .admin-dialog[open]::backdrop { animation: motion-fade-in .28s ease-out; }
.bottom-sheet.picker-sheet--closing[open] { animation: picker-out .18s ease-in forwards; }
.empty-state .empty-icon { animation: motion-float 3.2s ease-in-out infinite; }

/* ---------- Switch & segmented control ---------- */
.app-switch-thumb { transition: transform .42s var(--ease-spring), width .2s var(--ease-out-expo), background-color .2s; }
.app-switch-track { transition: background-color .25s, border-color .25s, box-shadow .3s; }
.app-switch-row.is-on .app-switch-track { box-shadow: 0 0 14px -4px var(--accent-glow); }
.app-switch-row:not(.is-on):active:not(:disabled) .app-switch-thumb { width: 25px; }
.app-segments { position: relative; grid-template-columns: repeat(var(--count, 3), minmax(0, 1fr)); }
.app-segment { position: relative; z-index: 1; transition: color .25s; }
.app-segments.has-indicator .app-segment.is-active { background: transparent; box-shadow: none; }
.app-segment-indicator {
  position: absolute; z-index: 0; top: 4px; bottom: 4px; left: 4px; pointer-events: none;
  width: calc((100% - 8px - (var(--count, 3) - 1) * 3px) / var(--count, 3));
  border-radius: 9px; background: var(--accent-soft, #102b48); box-shadow: inset 0 0 0 1px #2765a6, 0 4px 14px -8px var(--accent-glow);
  transform: translateX(calc(var(--index, 0) * (100% + 3px)));
  transition: transform .46s var(--ease-spring);
}
.app-segment:active:not(:disabled) { transform: scale(.96); transition: transform .1s; }

/* ---------- Stats ---------- */
.stat-number { font-variant-numeric: tabular-nums; }
.stat-number.is-counted { animation: motion-pop .4s var(--ease-spring); }

/* ---------- Toasts ---------- */
.toast { position: relative; overflow: hidden; padding-block: 8px; animation: motion-toast-in .46s var(--ease-spring) !important; }
.toast[data-timed] { padding-bottom: 11px; }
.toast .snackbar-copy { align-self: center; padding-block: 3px; line-height: 1.4; }
.toast > .snackbar-icon, .toast > .snackbar-mark { align-self: center; }
.toast-region--top .toast { animation-name: motion-toast-in-top !important; }
.toast--leaving { opacity: 0; transform: translateY(10px) scale(.97); transition: opacity .2s, transform .22s var(--ease-out-expo); }
.toast[data-timed]::after {
  content: ''; position: absolute; left: 14px; right: 14px; bottom: 4px; height: 2px; border-radius: 2px; pointer-events: none;
  background: currentColor; opacity: .22; transform-origin: left;
  animation: motion-timer var(--toast-duration, 3s) linear forwards;
}
.snackbar-mark { display: inline-block; animation: motion-pop .5s .08s var(--ease-spring) backwards; }

/* ---------- Main tabs: sliding indicator + directional content ---------- */
.switcher.has-indicator { position: relative; isolation: isolate; }
.switcher.has-indicator > button { position: relative; z-index: 1; background: transparent !important; box-shadow: none !important; transition: color .25s ease, transform .14s var(--ease-spring); }
.switcher.has-indicator > button:active { transform: scale(.95); }
.switcher.has-indicator:not(.is-ready) > button.active { background: var(--surface-hover, #151e28) !important; box-shadow: inset 0 -2px var(--accent, #2a8cff) !important; }
.switcher-indicator {
  position: absolute; z-index: 0; top: 4px; bottom: 4px; left: 0; width: var(--w, 0); border-radius: 10px;
  background: var(--surface-hover, #151e28); box-shadow: inset 0 -2px var(--accent, #2a8cff);
  transform: translateX(var(--x, 0)); opacity: 0; pointer-events: none;
}
.switcher.is-ready .switcher-indicator { opacity: 1; }
.switcher-indicator.is-moving { transition: transform .42s var(--ease-out-expo), width .42s var(--ease-out-expo); }
main[data-tab-motion="next"] > .switcher ~ * { animation: motion-tab-next .38s var(--ease-out-expo) both !important; }
main[data-tab-motion="prev"] > .switcher ~ * { animation: motion-tab-prev .38s var(--ease-out-expo) both !important; }
main[data-tab-motion] > .switcher ~ :nth-child(n+5) { animation-delay: 40ms !important; }
main[data-tab-motion] > .switcher ~ :nth-child(n+7) { animation-delay: 80ms !important; }
@keyframes motion-tab-next { from { opacity: 0; transform: translateX(28px); } }
@keyframes motion-tab-prev { from { opacity: 0; transform: translateX(-28px); } }

/* ---------- Live offer chat ---------- */
.history > .message.is-fresh { animation: motion-bubble-in .36s var(--ease-spring) both; }
.history > .message.mine.is-fresh { transform-origin: right bottom; }
.history > .message.theirs.is-fresh { transform-origin: left bottom; }
.history > .message.is-pending { opacity: .62; }
.history > .message.is-pending small::after { content: " · отправляем…"; }
.typing-indicator {
  display: inline-flex; align-items: center; gap: 9px; justify-self: start; max-width: 100%;
  padding: 0 12px; max-height: 0; overflow: hidden; opacity: 0; transform: translateY(6px);
  border: 1px solid transparent; border-radius: 14px; color: var(--muted, #9ba7b5); font-size: 13px;
  transition: max-height .28s var(--ease-out-expo), padding .28s var(--ease-out-expo), opacity .2s, transform .28s var(--ease-out-expo), border-color .2s;
}
.typing-indicator.is-visible { max-height: 30px; padding: 4px 10px; opacity: 1; transform: none; border-color: var(--border-soft, #1c2731); background: var(--surface-raised, #111820); }
.typing-indicator { gap: 6px; border-radius: 999px; font-size: 11.5px; line-height: 1.3; }
.history > .typing-indicator:not(.is-visible) { margin-top: calc(-1 * var(--space-sm, 8px)); }
.typing-dots { display: inline-flex; gap: 3px; padding: 0; }
.typing-dots i { width: 4px; height: 4px; border-radius: 50%; background: var(--accent, #2a8cff); animation: motion-typing 1.1s ease-in-out infinite; }
.typing-dots i:nth-child(2) { animation-delay: .16s; }
.typing-dots i:nth-child(3) { animation-delay: .32s; }
.typing-indicator:not(.is-visible) .typing-dots i { animation: none; }
@keyframes motion-bubble-in { from { opacity: 0; transform: translateY(10px) scale(.94); } }
@keyframes motion-typing { 0%, 70%, 100% { transform: translateY(0); opacity: .35; } 35% { transform: translateY(-4px); opacity: 1; } }

/* ---------- AI writer: copy answer ---------- */
.writer-bubble-actions { display: flex; justify-content: flex-end; margin: 10px -6px -6px 0; }
.writer-copy { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 6px 12px; border: 1px solid var(--border-soft, #1c2731); border-radius: 999px; background: transparent; color: var(--muted, #9ba7b5); font-size: 13px; font-weight: 600; transition: color .2s, border-color .2s, background .2s, transform .14s var(--ease-spring); }
.writer-copy .icon { width: 16px; height: 16px; }
.writer-copy:active { transform: scale(.95); }
.writer-copy.is-copied { color: var(--success, #20c997); border-color: color-mix(in srgb, var(--success, #20c997) 45%, transparent); background: color-mix(in srgb, var(--success, #20c997) 10%, transparent); }
.writer-copy.is-copied .icon { animation: motion-pop .45s var(--ease-spring); }
@media (hover: hover) and (pointer: fine) { .writer-copy:hover { color: var(--text, #f3f6fa); border-color: var(--border, #26313d); } }

/* ---------- Keyframes ---------- */
@keyframes motion-spin { to { transform: rotate(360deg); } }
@keyframes motion-fade-in { from { opacity: 0; } }
@keyframes motion-rise { from { opacity: 0; transform: translateY(10px); } }
@keyframes motion-sheet-in { from { transform: translateY(100%); } }
@keyframes motion-dialog-in { from { opacity: 0; transform: scale(.92); } }
@keyframes motion-ripple { 0% { opacity: .22; transform: scale(0); } 100% { opacity: 0; transform: scale(1); } }
@keyframes motion-ripple-out { to { opacity: 0; } }
@keyframes motion-sheen { 0% { opacity: 1; background-position: 130% 0; } 100% { opacity: 1; background-position: -30% 0; } }
@keyframes motion-sheen-loop { from { background-position: 160% 0; } to { background-position: -60% 0; } }
@keyframes motion-draw { to { stroke-dashoffset: 0; } }
@keyframes motion-pop { 0% { transform: scale(.4); opacity: 0; } 60% { transform: scale(1.12); opacity: 1; } 100% { transform: scale(1); } }
@keyframes motion-glow { 0% { box-shadow: 0 0 0 0 var(--accent-glow); } 100% { box-shadow: 0 0 0 12px rgba(42, 140, 255, 0); } }
@keyframes motion-shake { 10%, 90% { transform: translateX(-1px); } 20%, 80% { transform: translateX(3px); } 30%, 50%, 70% { transform: translateX(-5px); } 40%, 60% { transform: translateX(5px); } }
@keyframes motion-halo { 0% { transform: scale(.7); opacity: .9; } 100% { transform: scale(1.35); opacity: 0; } }
@keyframes motion-comet { from { transform: translateX(-110%); } to { transform: translateX(240%); } }
@keyframes motion-float { 50% { transform: translateY(-4px); } }
@keyframes motion-toast-in { from { opacity: 0; transform: translateY(22px) scale(.94); } }
@keyframes motion-toast-in-top { from { opacity: 0; transform: translateY(-22px) scale(.94); } }
@keyframes motion-timer { from { transform: scaleX(1); } to { transform: scaleX(0); } }

@media (prefers-reduced-motion: reduce) {
  .primary::before, .motion-ripple, .motion-orbit::before, .motion-orbit::after, .ai-orbit { display: none !important; }
  .skeleton-row, .page-skeleton, .toast, .snackbar-mark, .stat-number.is-counted, .empty-state .empty-icon,
  :is(.list, .support-list, .support-thread, .card-grid, .payment-history-list, .subscription-queue) > *,
  main > .hero, main > .detail-card, main > .list, .bottom-sheet[open], .submit-overlay[open], .is-shaking, .motion-check { animation: none !important; }
  .motion-check path { stroke-dashoffset: 0; animation: none; }
  :is(.primary, .secondary, .danger, .text-button, .composer-send, .icon-button, .snackbar-action).is-loading::after,
  .inline-spinner { animation: none !important; opacity: .7; }
  .toast[data-timed]::after { display: none; }
  .switcher-indicator.is-moving { transition: none; }
  .history > .message.is-fresh { animation: none; }
  .typing-dots i { animation: none; opacity: .8; }
  .typing-indicator { transition: none; }
  main[data-tab-motion] > .switcher ~ * { animation: none !important; }
}

/* --- Sending an offer: staged card (docs/design/web-brief.md, 5.1) -------------------- */
.stage-overlay { width: min(440px, calc(100vw - 24px)); max-width: none; padding: 0; border: 0; background: none; color: var(--text, #f2f5fb); overflow: visible; }
.stage-overlay:focus, .stage-overlay:focus-visible { outline: none; }
.stage-overlay::backdrop { background: rgb(4 7 10 / .62); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.stage-card {
  display: grid; gap: 18px; padding: 22px 22px 20px; border: 1px solid var(--border-soft, #1d2a37); border-radius: 24px;
  background: linear-gradient(180deg, rgb(47 140 255 / .07), transparent 120px), var(--surface, #0f1620);
  box-shadow: 0 24px 64px rgb(0 0 0 / .45);
}
.stage-head { display: flex; gap: 14px; align-items: center; }
.stage-titles { display: grid; gap: 2px; min-width: 0; }
.stage-titles strong { font-size: 17px; line-height: 1.3; }
.stage-status { margin: 0; color: var(--muted, #acbacb); font-size: 13px; line-height: 1.4; transition: opacity .2s; }
.stage-beacon { position: relative; width: 40px; height: 40px; flex: none; border-radius: 14px; background: rgb(47 140 255 / .14); }
.stage-beacon::before { content: ""; position: absolute; inset: 12px; border-radius: 50%; background: var(--accent, #2f8cff); box-shadow: 0 0 0 0 rgb(47 140 255 / .5); animation: stage-ping 1.6s cubic-bezier(.16,1,.3,1) infinite; }
.is-finished .stage-beacon { background: rgb(34 197 94 / .14); }
.is-finished .stage-beacon::before { background: #22c55e; animation: none; transform: scale(1.1); transition: background .2s, transform .3s cubic-bezier(.16,1,.3,1); }
@keyframes stage-ping { 0% { box-shadow: 0 0 0 0 rgb(47 140 255 / .55); } 100% { box-shadow: 0 0 0 14px rgb(47 140 255 / 0); } }

.stage-list { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.stage-step { position: relative; display: flex; gap: 12px; align-items: center; min-height: 36px; color: var(--subtle, #6f8195); font-size: 14px; transition: color .2s; }
.stage-step:not(:last-child)::after { content: ""; position: absolute; left: 11px; top: 30px; bottom: -8px; width: 2px; border-radius: 1px; background: var(--border-soft, #1d2a37); }
.stage-step.is-done:not(:last-child)::after { background: rgb(34 197 94 / .45); transition: background .3s; }
.stage-mark { position: relative; display: grid; place-items: center; width: 24px; height: 24px; flex: none; border-radius: 50%; border: 2px solid var(--border-soft, #263445); background: var(--bg, #080c11); transition: border-color .2s, background .2s; }
.stage-mark svg { width: 14px; height: 14px; fill: none; stroke: #fff; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 20; stroke-dashoffset: 20; }
.stage-step.is-active { color: var(--text, #f2f5fb); font-weight: 550; }
.stage-step.is-active .stage-mark { border-color: rgb(47 140 255 / .25); }
.stage-step.is-active .stage-mark::before { content: ""; position: absolute; inset: -2px; border-radius: 50%; border: 2px solid transparent; border-top-color: var(--accent, #2f8cff); border-right-color: var(--accent, #2f8cff); animation: stage-spin .8s linear infinite; }
.stage-step.is-done { color: var(--muted, #acbacb); }
.stage-step.is-done .stage-mark { border-color: #22c55e; background: #22c55e; }
.stage-step.is-done .stage-mark svg { animation: stage-draw .24s cubic-bezier(.16,1,.3,1) forwards; }
@keyframes stage-spin { to { transform: rotate(1turn); } }
@keyframes stage-draw { to { stroke-dashoffset: 0; } }

.stage-preview { display: flex; gap: 12px; align-items: center; max-height: 80px; padding: 14px; border: 1px dashed var(--border-soft, #263445); border-radius: 16px; overflow: hidden; transition: opacity .25s, transform .3s cubic-bezier(.16,1,.3,1), max-height .3s cubic-bezier(.16,1,.3,1), padding .3s, margin .3s; }
.stage-sk-lines { display: grid; flex: 1; gap: 8px; }
.stage-sk { display: block; border-radius: 8px; background: linear-gradient(90deg, #141d29 0%, #1c2938 50%, #141d29 100%); background-size: 200% 100%; animation: stage-shimmer 1.4s ease-in-out infinite; }
.stage-sk-avatar { width: 40px; height: 40px; flex: none; border-radius: 12px; }
.stage-sk-line { height: 10px; } .stage-sk-line.short { width: 58%; }
.stage-sk-chip { width: 64px; height: 22px; flex: none; border-radius: 11px; }
@keyframes stage-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
.is-finished .stage-preview { opacity: 0; transform: translateY(-6px) scale(.98); max-height: 0; padding-block: 0; margin-top: -18px; border-color: transparent; }
.stage-overlay[open] { animation: stage-in .32s cubic-bezier(.16,1,.3,1); }
@keyframes stage-in { from { opacity: 0; transform: translateY(12px) scale(.98); } }
@media (max-width: 599px) {
  .stage-overlay { margin: auto auto max(12px, env(safe-area-inset-bottom)); }
}
@media (prefers-reduced-motion: reduce) {
  .stage-beacon::before, .stage-step.is-active .stage-mark::before, .stage-sk, .stage-overlay[open] { animation: none !important; }
  .stage-step.is-done .stage-mark svg { animation: none; stroke-dashoffset: 0; }
}