/* Flash VDO: the account pages and the dashboard (login.html, signup.html, dashboard.html).
   Built on the web kit (site.css): its variables, buttons, cards, forms, modal, table, ring, stat tiles and motion.
   What is here is only what those three pages add: their layout, the stepper, the checkout's stage. The few
   fallbacks after each var() keep a page readable if the kit is late or missing. */

/* ------------------------------------------------ the account pages */
.auth { position: relative; isolation: isolate; overflow: hidden; }
.auth-h { font-size: clamp(var(--s-31, 1.953rem), 6vw, var(--s-49, 3.052rem)); }
.auth-card { position: relative; }
.auth-card .notice { margin: 0; }
/* a night sky behind the card: three streaks of light leaning ten degrees, drifting like a slow shutter */
.auth-sky { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.auth-sky::before { content: ""; position: absolute; inset: -20% -10%; background:
    radial-gradient(60% 50% at 20% 10%, rgba(74, 63, 154, .45), transparent 70%),
    radial-gradient(50% 45% at 85% 90%, rgba(255, 210, 63, .10), transparent 70%); }
.auth-sky i { position: absolute; top: -30%; bottom: -30%; width: clamp(40px, 9vw, 120px); background: linear-gradient(180deg, transparent, rgba(255, 210, 63, .09) 40%, rgba(255, 243, 184, .16) 50%, rgba(255, 210, 63, .07) 60%, transparent); transform: skewX(var(--skew, -10deg)); animation: dash-streak 9s var(--ease-glide, ease-in-out) infinite alternate; }
.auth-sky i:nth-child(1) { left: 8%; }
.auth-sky i:nth-child(2) { left: 62%; width: clamp(20px, 4vw, 54px); animation-duration: 13s; animation-delay: -4s; }
.auth-sky i:nth-child(3) { left: 84%; animation-duration: 11s; animation-delay: -7s; opacity: .7; }
@keyframes dash-streak { from { transform: translateX(-6vw) skewX(-10deg); opacity: .55; } to { transform: translateX(6vw) skewX(-10deg); opacity: 1; } }

/* ------------------------------------------------ the dashboard's page */
.dash { display: grid; gap: clamp(20px, 3vw, 36px); padding-block: clamp(20px, 4vw, 44px) clamp(48px, 8vw, 96px); min-height: 70vh; }
.dash > * { min-width: 0; }
.dash-sec { display: grid; gap: var(--sp-4, 16px); scroll-margin-top: calc(var(--bar-h, 64px) + 16px); }
.dash .card { scroll-margin-top: calc(var(--bar-h, 64px) + 16px); }
.dash-sec-h { gap: 12px 20px; }
.dash-h { font-size: clamp(var(--s-25, 1.5625rem), 3.4vw, var(--s-31, 1.953rem)); }
.dash-notice { align-items: center; }
.dash-notice .grow b { display: inline; margin-right: 6px; }

/* the plan: words on the left, the two rings on the right; one column on a phone */
.dash-plan { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: clamp(20px, 4vw, 48px); align-items: center; overflow: hidden; }
.dash-plan::after { content: ""; position: absolute; top: -40%; bottom: -40%; right: 34%; width: 2px; background: linear-gradient(180deg, transparent, var(--line-flash, rgba(255, 210, 63, .45)), transparent); transform: skewX(var(--skew, -10deg)); pointer-events: none; }
.dash-plan-name { font-size: clamp(var(--s-39, 2.441rem), 7vw, var(--s-76, 4.768rem)); overflow-wrap: anywhere; }
.dash-plan-name .skeleton { font-size: .6em; }
.dash-plan.is-off .dash-plan-name { color: var(--fg-2, #B6B0E0); }
.dash-credits { display: inline-flex; align-items: baseline; gap: 6px; margin: 0; color: var(--fg-2, #B6B0E0); font-size: var(--s-14, .875rem); }
.dash-credits b { font-size: var(--s-20, 1.25rem); color: var(--fg, #F4F4F8); font-weight: 500; }
.dash-credits a { margin-left: 6px; }
.dash-rings { display: flex; gap: clamp(16px, 3vw, 36px); align-items: flex-start; }
.dash-ring { display: grid; justify-items: center; gap: 10px; margin: 0; text-align: center; }
.dash-ring figcaption { display: grid; gap: 2px; }
.dash-ring figcaption b { font: 600 var(--s-14, .875rem)/1.3 var(--f-text, system-ui); }
.dash-ring figcaption span { font-size: var(--s-12, .75rem); color: var(--fg-3, #8F86CC); min-height: 1.5em; }
.dash-plan.is-off .ring { opacity: .45; }

.stat-turns { --c: var(--a-colorist, #43D9FF); }
.stat-errors { --c: var(--a-story, #FF7AB6); }

/* a plan's card */
.dash-tier { height: 100%; grid-template-rows: auto auto 1fr auto; }
.dash-tier .price .amt { transition: opacity var(--f8, 133ms); }
.dash-tier.is-cut .price { animation: dash-cut var(--f18, 300ms) var(--ease-flash, ease-out); }
@keyframes dash-cut { from { opacity: 0; transform: translateX(14px) skewX(-10deg); } }
.dash-tier .note { min-height: 1.5em; }

/* credits: the words, then the stepper and the button */
.dash-credit { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: clamp(16px, 4vw, 48px); align-items: center; }
.dash-credit-buy { display: grid; grid-template-columns: auto auto; gap: 12px 20px; align-items: end; justify-content: end; }
.dash-credit-get { grid-column: 1 / -1; margin: 0; font-size: var(--s-14, .875rem); color: var(--fg-2, #B6B0E0); }
.dash-credit-get b { font-size: var(--s-20, 1.25rem); color: var(--flash, #FFD23F); font-weight: 500; }
.dash-credit-buy .btn { grid-column: 1 / -1; }
.stepper { display: inline-grid; grid-template-columns: 44px 84px 44px; border: 1px solid var(--line-2, rgba(220, 217, 240, .18)); border-radius: var(--r-m, 8px); background: var(--night-2, #100C33); overflow: hidden; }
.stepper button { border: 0; background: transparent; color: var(--fg, #F4F4F8); font: 500 var(--s-20, 1.25rem)/1 var(--f-mono, monospace); min-height: 44px; transition: background var(--f8, 133ms), transform var(--f12, 200ms) var(--ease-snap, ease-out); }
.stepper button:hover { background: var(--panel-3, #261D66); }
.stepper button:active { transform: scale(.9); }
.stepper button:disabled { opacity: .35; cursor: default; }
.stepper .input { border: 0; border-inline: 1px solid var(--line, rgba(220, 217, 240, .1)); border-radius: 0; text-align: center; padding-inline: 6px; background: transparent; -moz-appearance: textfield; appearance: textfield; }
.stepper .input::-webkit-outer-spin-button, .stepper .input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* refer a friend, the account */
.dash-refer, .dash-account { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: clamp(16px, 4vw, 48px); align-items: start; }
.dash-code { font-size: clamp(var(--s-25, 1.5625rem), 4vw, var(--s-39, 2.441rem)); letter-spacing: .08em; color: var(--flash, #FFD23F); line-height: 1.1; overflow-wrap: anywhere; }
.dash-link code::before { content: ""; }
.dash-who { display: grid; gap: 10px; margin: 0; }
.dash-who div { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 12px; align-items: baseline; }
.dash-who dt { font-size: var(--s-12, .75rem); letter-spacing: .08em; text-transform: uppercase; color: var(--fg-3, #8F86CC); }
.dash-who dd { margin: 0; overflow-wrap: anywhere; }

/* payments */
.table td.actions .btn + .btn { margin-left: 6px; }
.dash .table td:first-child { font-family: var(--f-mono, monospace); font-stretch: 87.5%; white-space: nowrap; }
.dash .table tr.is-new { animation: dash-row var(--f30, 500ms) var(--ease-flash, ease-out); }
@keyframes dash-row { from { background: rgba(255, 210, 63, .22); } }

/* ------------------------------------------------ the checkout */
.pay-lines { display: grid; gap: 8px; margin: 0; font-size: var(--s-14, .875rem); }
.pay-lines div { display: flex; justify-content: space-between; gap: 16px; color: var(--fg-2, #B6B0E0); }
.pay-lines dd { margin: 0; font-family: var(--f-mono, monospace); font-stretch: 87.5%; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pay-lines .is-total { padding-top: 10px; border-top: 1px solid var(--line-2, rgba(220, 217, 240, .18)); color: var(--fg, #F4F4F8); font-weight: 600; font-size: var(--s-16, 1rem); }
.pay-lines .is-total dd { color: var(--flash, #FFD23F); font-size: var(--s-20, 1.25rem); }
.pay-stage { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 20px; align-items: center; min-height: 120px; }
.pay-stage > :only-child, .pay-stage.is-plain { grid-column: 1 / -1; }
.pay-qr { position: relative; padding: 10px; border-radius: var(--r-l, 14px); background: #fff; width: min(240px, 60vw); aspect-ratio: 1; box-shadow: var(--glow, 0 0 0 1px rgba(255, 210, 63, .35)); animation: dash-snap var(--f30, 500ms) var(--ease-snap, ease-out); }
.pay-qr img { width: 100%; height: 100%; image-rendering: pixelated; }
/* a line of light that scans the QR while its payment is followed live */
.pay-qr.is-live::after { content: ""; position: absolute; left: 6px; right: 6px; top: 8%; height: 3px; border-radius: 2px; background: var(--flash, #FFD23F); box-shadow: 0 0 14px 2px rgba(255, 210, 63, .8); animation: dash-scan 2.4s var(--ease-glide, ease-in-out) infinite alternate; }
@keyframes dash-scan { to { top: 90%; } }
@keyframes dash-snap { from { opacity: 0; transform: scale(.8) rotate(-4deg); } }
.pay-words { justify-items: start; }
.pay-clock { font-size: var(--s-25, 1.5625rem); color: var(--fg, #F4F4F8); margin: 0; }
.pay-clock.is-late { color: var(--cut, #FF4F3D); }
.pay-done { position: relative; display: grid; place-items: center; width: 120px; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(255, 210, 63, .22), transparent 70%); }
.pay-done img { animation: dash-land var(--f48, 800ms) var(--ease-snap, ease-out) both; }
@keyframes dash-land { from { opacity: 0; transform: scale(.3) rotate(-24deg); } 40% { opacity: 1; } }
/* the mark's shards, thrown out of it once when an order is paid (dash.js gives each its way: --dx, --dy, --turn) */
.pay-shard { position: absolute; left: 50%; top: 50%; width: 12px; height: 16px; margin: -8px 0 0 -6px; background: var(--flash, #FFD23F); clip-path: polygon(50% 0, 100% 38%, 62% 100%, 0 70%); pointer-events: none; opacity: 0; animation: dash-shard var(--f48, 800ms) var(--ease-flash, ease-out) both; animation-delay: calc(var(--f8, 133ms) + var(--i, 0) * var(--f4, 67ms) / 2); }
.pay-shard-1 { background: var(--flash-light, #FFF3B8); }
.pay-shard-2 { background: var(--magnesium, #F4F4F8); width: 9px; height: 12px; }
.pay-shard-3 { background: var(--cut, #FF4F3D); width: 8px; height: 11px; }
@keyframes dash-shard { from { opacity: 1; transform: translate(0, 0) skewX(-10deg) rotate(0deg) scale(.4); } 70% { opacity: 1; } to { opacity: 0; transform: translate(var(--dx, 0), var(--dy, 0)) skewX(-10deg) rotate(var(--turn, 90deg)) scale(1); } }
#checkout .modal-f { flex-wrap: wrap; }
#checkout .modal-f .btn.danger { margin-right: auto; }

/* ------------------------------------------------ a phone */
@media (max-width: 760px) {
  .dash-plan, .dash-credit { grid-template-columns: minmax(0, 1fr); }
  .dash-plan::after { display: none; }
  .dash-rings { justify-content: space-around; }
  .dash-credit-buy { justify-content: start; }
  .pay-stage { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; }
  .pay-words { justify-items: center; }
  #checkout .modal-f .btn { flex: 1 1 auto; }
  #checkout .modal-f .btn.danger { margin-right: 0; }
}
@media (max-width: 420px) {
  .dash-rings .ring { --ring-size: 112px; }
  .topbar-actions .btn { padding-inline: 12px; }
}

/* ------------------------------------------------ reduced motion: everything is its end state */
@media (prefers-reduced-motion: reduce) {
  .auth-sky i, .pay-qr, .pay-qr.is-live::after, .pay-done img, .pay-shard, .dash-tier.is-cut .price, .dash .table tr.is-new { animation: none !important; }
  .pay-shard { display: none; }
  .stepper button, .dash-tier .price .amt { transition: none !important; }
}