/* The Buy page: the site's night background, one card per step, big clear numbers, copy buttons everywhere. */
@font-face { font-family: "Geist"; src: url("../assets/fonts/geist-variable.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url("../assets/fonts/geist-mono-variable.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Instrument Serif"; src: url("../assets/fonts/instrument-serif-italic.woff2") format("woff2"); font-style: italic; font-display: swap; }
:root {
  --bg: #0A0716; --card: #120D27; --card-2: #181134; --line: rgba(255, 255, 255, .09); --line-2: rgba(255, 255, 255, .16);
  --text: #F4F2FF; --muted: #A39CC4; --faint: #6E6795; --violet: #7B5CFF; --electric: #5B2EFF; --lilac: #B9A6FF; --coral: #FF7A5C;
  --ok: #5EE6A0; --bad: #FF8F85; --grad: linear-gradient(140deg, #8E72FF 0%, #5B2EFF 55%, #3504D6 100%); color-scheme: dark;
}
* { box-sizing: border-box; } [hidden] { display: none !important; }
html, body { margin: 0; min-height: 100%; }
body { color: var(--text); font: 400 15px/1.55 "Geist", "Segoe UI", system-ui, sans-serif; -webkit-font-smoothing: antialiased;
  background: radial-gradient(60% 45% at 100% 0%, rgba(91, 46, 255, .3), transparent 70%), radial-gradient(50% 40% at 0% 100%, rgba(255, 122, 92, .1), transparent 70%), var(--bg); background-attachment: fixed; }
button, input { font: inherit; color: inherit; } button { cursor: pointer; }
svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.top { display: flex; align-items: center; justify-content: space-between; max-width: 1180px; margin: 0 auto; padding: 18px 20px; }
.top .help { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 99px; border: 1px solid var(--line-2); color: var(--muted); text-decoration: none; font-size: 13.5px; }
.top .help:hover { color: var(--text); border-color: var(--violet); }
.wrap { display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: 36px; max-width: 1180px; margin: 0 auto; padding: 6px 20px 60px; align-items: start; }
.steps { grid-column: 1 / -1; display: flex; gap: 8px; list-style: none; padding: 0; margin: 0 0 4px; flex-wrap: wrap; }
.steps li { display: flex; align-items: center; gap: 8px; padding: 6px 14px 6px 6px; border-radius: 99px; background: rgba(255, 255, 255, .04); border: 1px solid var(--line); color: var(--faint); font-size: 13px; }
.steps b { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .07); font-size: 12px; }
.steps li.on { color: #fff; border-color: rgba(123, 92, 255, .5); background: rgba(123, 92, 255, .16); } .steps li.on b { background: var(--electric); }
.steps li.done { color: var(--muted); } .steps li.done b { background: rgba(94, 230, 160, .18); color: var(--ok); }
.panel { padding: 28px; border-radius: 24px; background: linear-gradient(180deg, var(--card-2), var(--card)); border: 1px solid var(--line); box-shadow: 0 30px 60px -40px #000; animation: rise .45s cubic-bezier(.22, 1, .36, 1); }
@keyframes rise { from { opacity: 0; transform: translateY(10px); } }
h1 { margin: 0; font-size: 32px; line-height: 1.1; letter-spacing: -.02em; } h1 em { font-family: "Instrument Serif", serif; font-weight: 400; color: var(--lilac); }
.lead { margin: 8px 0 22px; color: var(--muted); }
.sub { display: block; color: var(--muted); font-size: 13px; font-weight: 400; }
.block { padding: 18px 0; border-top: 1px solid var(--line); } .block > b { display: block; margin-bottom: 12px; }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.stepper { display: flex; align-items: center; gap: 4px; padding: 4px; border-radius: 14px; background: rgba(0, 0, 0, .3); border: 1px solid var(--line-2); }
.stepper button { width: 38px; height: 38px; border-radius: 10px; border: 0; background: rgba(255, 255, 255, .06); font-size: 20px; } .stepper button:hover { background: rgba(123, 92, 255, .3); }
.stepper output { min-width: 34px; text-align: center; font-size: 18px; font-weight: 600; }
.ways { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.way { display: grid; gap: 6px; justify-items: start; padding: 14px; border-radius: 16px; border: 1px solid var(--line-2); background: rgba(0, 0, 0, .2); text-align: start; transition: border-color .2s, background .2s, transform .15s; }
.way:hover { border-color: rgba(123, 92, 255, .6); transform: translateY(-1px); }
.way[aria-checked="true"] { border-color: var(--violet); background: rgba(123, 92, 255, .16); box-shadow: 0 0 0 3px rgba(123, 92, 255, .18); }
.way img { height: 26px; width: auto; max-width: 100%; border-radius: 6px; } .way b { font-size: 14.5px; } .way .sub { font-size: 12.5px; }
.form { display: grid; gap: 12px; }
.form label { display: grid; gap: 6px; font-size: 14px; font-weight: 500; } .form label .sub { display: inline; margin-inline-start: 6px; }
input { height: 46px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--line-2); background: rgba(0, 0, 0, .3); outline: none; transition: border-color .2s, box-shadow .2s; }
input:focus { border-color: var(--violet); box-shadow: 0 0 0 3px rgba(123, 92, 255, .2); }
.total { display: flex; justify-content: space-between; align-items: baseline; padding: 18px 20px; margin-top: 4px; border-radius: 16px; background: rgba(123, 92, 255, .14); border: 1px solid rgba(123, 92, 255, .3); }
.total b { font-size: 26px; letter-spacing: -.01em; }
.cta { width: 100%; height: 54px; margin-top: 16px; border: 0; border-radius: 16px; background: var(--grad); color: #fff; font-size: 16px; font-weight: 600; box-shadow: 0 14px 30px -14px rgba(91, 46, 255, .9); transition: transform .15s, opacity .2s; }
.cta:hover { transform: translateY(-1px); } .cta:disabled { opacity: .6; cursor: default; transform: none; }
.link { display: block; margin: 12px auto 0; border: 0; background: none; color: var(--muted); font-size: 14px; } .link:hover { color: var(--text); }
.fine { margin: 12px 0 0; text-align: center; color: var(--faint); font-size: 12.5px; }
.err { min-height: 1.2em; margin: 10px 0 0; color: var(--bad); font-size: 14px; }
/* Pay details */
.pay { display: grid; gap: 10px; }
.pay-head { display: flex; align-items: center; gap: 12px; padding-bottom: 6px; } .pay-head img { height: 34px; border-radius: 8px; }
.copy-row { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 14px; background: rgba(0, 0, 0, .28); border: 1px solid var(--line); }
.copy-row .k { display: block; color: var(--muted); font-size: 12.5px; } .copy-row .v { display: block; font-family: "Geist Mono", monospace; font-size: 16px; word-break: break-all; }
.copy-row .v.big { font-size: 22px; font-family: inherit; font-weight: 700; }
.copy-row > div { flex: 1; min-width: 0; }
.copy { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--line-2); background: rgba(255, 255, 255, .06); font-size: 13px; font-weight: 500; }
.copy:hover { border-color: var(--violet); } .copy.ok { color: var(--ok); border-color: rgba(94, 230, 160, .4); }
.open-app { display: flex; align-items: center; justify-content: center; gap: 8px; height: 50px; border-radius: 14px; background: #fff; color: #160E38; text-decoration: none; font-weight: 600; }
.qr { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 16px; align-items: center; padding: 14px; border-radius: 14px; background: rgba(0, 0, 0, .2); border: 1px solid var(--line); }
.qr img { width: 150px; height: 150px; border-radius: 12px; background: #fff; padding: 6px; }
.warn { padding: 12px 14px; border-radius: 12px; background: rgba(255, 194, 122, .12); color: #FFC27A; font-size: 13.5px; border: 1px solid rgba(255, 194, 122, .25); }
/* Confirm */
.drop { display: grid; place-items: center; gap: 8px; min-height: 170px; padding: 20px; border-radius: 18px; border: 2px dashed var(--line-2); background: rgba(0, 0, 0, .2); text-align: center; color: var(--muted); cursor: pointer; transition: border-color .2s, background .2s; }
.drop:hover, .drop.over { border-color: var(--violet); background: rgba(123, 92, 255, .1); } .drop b { color: var(--text); }
.drop img { max-width: 100%; max-height: 220px; border-radius: 12px; }
.or { display: flex; align-items: center; gap: 10px; margin: 16px 0; color: var(--faint); font-size: 13px; } .or::before, .or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
/* Done */
.done-ic { width: 64px; height: 64px; border-radius: 20px; display: grid; place-items: center; margin-bottom: 16px; background: rgba(94, 230, 160, .15); color: var(--ok); }
.done-ic svg { width: 30px; height: 30px; } .done-ic.wait { background: rgba(123, 92, 255, .16); color: var(--lilac); } .done-ic.wait svg { animation: spin 1.4s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.keybox { padding: 18px; border-radius: 16px; background: rgba(123, 92, 255, .14); border: 1px dashed rgba(185, 166, 255, .5); text-align: center; }
.keybox .v { font-family: "Geist Mono", monospace; font-size: 22px; letter-spacing: .06em; color: var(--lilac); word-break: break-all; }
.next { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 14px; }
.next a { display: grid; gap: 2px; padding: 14px 16px; border-radius: 14px; border: 1px solid var(--line-2); background: rgba(0, 0, 0, .2); color: var(--text); text-decoration: none; }
.next a:hover { border-color: var(--violet); } .next a span { color: var(--muted); font-size: 13px; }
@media (max-width: 1100px) { .wrap { grid-template-columns: minmax(0, 1fr) 360px; gap: 26px; } }
@media (max-width: 860px) { .wrap { grid-template-columns: minmax(0, 1fr); } .steps { order: -2; } .summary { position: static; order: -1; } #cardBox { width: 100%; max-width: 440px; justify-self: center; } }
@media (max-width: 560px) { .panel { padding: 20px 16px; border-radius: 20px; } h1 { font-size: 26px; } .ways { grid-template-columns: minmax(0, 1fr); } .qr { grid-template-columns: minmax(0, 1fr); justify-items: center; } .next { grid-template-columns: minmax(0, 1fr); } .steps li { font-size: 12px; } }

/* ---------- Header: help and the account ---------- */
.top-right { display: flex; align-items: center; gap: 10px; }
.acct { position: relative; }
.acct-in { height: 38px; padding: 0 18px; border-radius: 99px; border: 0; background: #fff; color: #160E38; font-weight: 600; font-size: 14px; }
.acct-me { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px 0 4px; border-radius: 99px; border: 1px solid var(--line-2); background: rgba(255, 255, 255, .05); font-size: 14px; font-weight: 500; }
.acct-me img, .acct-me i { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; }
.acct-me i { display: grid; place-items: center; background: var(--grad); font-style: normal; font-weight: 700; font-size: 13px; }
.acct-menu { position: absolute; z-index: 30; top: calc(100% + 8px); right: 0; width: 260px; padding: 6px; border-radius: 18px; border: 1px solid var(--line-2); background: #150F2E; box-shadow: 0 30px 60px -20px #000; animation: rise .25s cubic-bezier(.22, 1, .36, 1); }
.acct-head { display: grid; gap: 2px; padding: 10px 12px 12px; border-bottom: 1px solid var(--line); margin-bottom: 4px; } .acct-head span { color: var(--muted); font-size: 12.5px; overflow-wrap: anywhere; }
.acct-menu button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; border: 0; border-radius: 12px; background: none; font-size: 14px; text-align: start; }
.acct-menu button:hover { background: rgba(255, 255, 255, .06); } .acct-menu svg { color: var(--lilac); }
.acct-line { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; background: rgba(123, 92, 255, .1); border: 1px solid rgba(123, 92, 255, .28); }
.acct-line > div { flex: 1; min-width: 0; } .acct-line b { display: block; font-size: 14px; overflow-wrap: anywhere; } .acct-line .link { margin: 0; font-size: 13px; }
.acct-dot { width: 36px; height: 36px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--grad); font-weight: 700; } .acct-dot.ghost { background: rgba(255, 255, 255, .08); color: var(--lilac); }
.way { position: relative; } .way-tick { position: absolute; top: 12px; right: 12px; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--electric); opacity: 0; transform: scale(.6); transition: opacity .2s, transform .25s cubic-bezier(.34, 1.56, .64, 1); }
.way-tick svg { width: 13px; height: 13px; stroke-width: 3; } .way[aria-checked="true"] .way-tick { opacity: 1; transform: none; }

/* ---------- The order card (like a card in a wallet) and the invoice ---------- */
.summary { position: sticky; top: 20px; display: grid; gap: 14px; }
/* The licence card (Detalia's card, Motion Studio's colours). Sizes are in cqw, a share of the card's own width. */
#cardBox { display: grid; justify-items: center; gap: 8px; }
.dc { position: relative; display: block; width: 100%; aspect-ratio: 1.68; padding: 0; margin: 0; border: 0; background: none; color: #fff; text-align: left; perspective: 1600px; container-type: inline-size; cursor: pointer; -webkit-tap-highlight-color: transparent; animation: card-in .8s cubic-bezier(.22, 1, .36, 1) both; }
@keyframes card-in { from { opacity: 0; transform: translateY(18px) rotateX(16deg) scale(.95); } }
.dc:focus-visible { outline: 2px solid var(--violet); outline-offset: 4px; border-radius: 7cqw; }
.dc-in { position: relative; display: block; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform .9s cubic-bezier(.45, .05, .2, 1); }
.dc.is-back .dc-in { transform: rotateY(180deg); }
.dc:hover .dc-in { transform: rotateX(4deg) rotateY(-6deg); } .dc.is-back:hover .dc-in { transform: rotateY(180deg) rotateX(4deg) rotateY(-6deg); }
.dc-face { position: absolute; inset: 0; display: flex; flex-direction: column; overflow: hidden; border-radius: 7cqw; backface-visibility: hidden; -webkit-backface-visibility: hidden; isolation: isolate; background: #120B2E;
  box-shadow: 0 24px 60px -18px rgba(91, 46, 255, .75), inset 0 0 0 1px rgba(255, 255, 255, .14); }
.dc-front { transform: translateZ(1px); padding: 5.4cqw 6.5cqw 5.4cqw; justify-content: space-between; gap: 2.5cqw; }
.dc-back { transform: rotateY(180deg) translateZ(1px); }
/* the swirl: Motion Studio's violets with a coral glow, slowly turning */
.dc-face::before { content: ""; position: absolute; inset: -30%; z-index: -2; background:
  radial-gradient(50% 45% at 20% 18%, #B9A6FF 0%, transparent 62%), radial-gradient(48% 45% at 88% 26%, #7B5CFF 0%, transparent 64%), radial-gradient(55% 50% at 78% 92%, #FF7A5C 0%, transparent 60%), radial-gradient(50% 45% at 18% 90%, #FF6B8A 0%, transparent 58%),
  conic-gradient(from 210deg at 50% 56%, #3504D6, #8E72FF, #5B2EFF, #2A0399, #3504D6); filter: saturate(1.15) blur(4px); animation: swirl 18s ease-in-out infinite alternate; }
.dc-face::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(10, 7, 22, .05), rgba(10, 7, 22, .5)); }
@keyframes swirl { to { transform: rotate(14deg) scale(1.08); } }
.dc-shine { position: absolute; inset: 0; z-index: 0; pointer-events: none; background: linear-gradient(115deg, transparent 32%, rgba(255, 255, 255, .18) 48%, transparent 62%); transform: translateX(-70%); animation: dc-sweep 5.5s 1.5s ease-in-out infinite; }
@keyframes dc-sweep { 0%, 55% { transform: translateX(-70%); } 100% { transform: translateX(70%); } }
.dc-face > * { position: relative; z-index: 1; }
.dc-face > .dc-mark { position: absolute; z-index: 0; right: -6cqw; bottom: -5cqw; width: 70cqw; height: auto; opacity: .1; transform: rotate(-8deg); filter: brightness(0) invert(1); pointer-events: none; }
.dc-top { display: flex; justify-content: space-between; align-items: center; }
.dc-logo { width: 26cqw; height: auto; display: block; filter: brightness(0) invert(1); }
.dc-nfc { width: 6cqw; height: 6cqw; fill: none; stroke: #fff; stroke-width: 2; opacity: .9; }
.dc-mid { display: grid; gap: .8cqw; margin-top: auto; }
.dc-chip { display: block; width: 10.5cqw; height: 7.6cqw; margin-bottom: 1.6cqw; border-radius: 2cqw; background: linear-gradient(135deg, #FBE6AE, #DDAD52 55%, #F4D88F); position: relative; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .18); }
.dc-chip::before { content: ""; position: absolute; left: 33%; right: 33%; top: 0; bottom: 0; border: 0 solid rgba(120, 80, 10, .45); border-left-width: 1px; border-right-width: 1px; }
.dc-chip::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: rgba(120, 80, 10, .45); }
.dc-lbl { display: block; color: rgba(255, 255, 255, .74); font: 500 2.7cqw/1.2 "Geist Mono", ui-monospace, monospace; letter-spacing: .12em; text-transform: uppercase; }
.dc-holder { display: block; font-size: 6cqw; font-weight: 700; letter-spacing: -.01em; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dc-foot { display: flex; justify-content: space-between; align-items: flex-end; gap: 3cqw; }
.dc-foot > span { display: grid; gap: .8cqw; min-width: 0; }
.dc-v { display: block; font-size: 3.6cqw; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dc-r { text-align: right; } .dc-r .dc-v { font-size: 6cqw; font-weight: 700; letter-spacing: -.02em; line-height: 1.1; }
.dc-stripe { display: block; height: 17%; margin-top: 9%; background: #07050F; }
.dc-sign { display: flex; align-items: center; gap: 3cqw; margin: 6cqw 6.5cqw 0; }
.dc-band { flex: 1; display: flex; align-items: center; height: 10cqw; padding: 0 3cqw; border-radius: 1.6cqw; background: repeating-linear-gradient(45deg, #F3F0FB 0 6px, #E4DEF4 6px 12px); color: #2A0399; font: 600 3.6cqw/1 "Geist Mono", ui-monospace, monospace; letter-spacing: .06em; overflow: hidden; white-space: nowrap; }
.dc-bk { display: flex; justify-content: space-between; align-items: flex-end; gap: 4cqw; margin: auto 6.5cqw 6cqw; }
.dc-p { display: block; max-width: 62%; font-size: 2.8cqw; line-height: 1.45; color: rgba(255, 255, 255, .78); }
.dc-bk img { width: 20cqw; height: auto; filter: brightness(0) invert(1); opacity: .9; }
.dc-hint { color: var(--faint); font-size: 12px; }
.inv { padding: 18px 20px; border-radius: 20px; background: rgba(255, 255, 255, .035); border: 1px solid var(--line); }
.inv h3 { margin: 0 0 8px; font-size: 14px; color: var(--muted); font-weight: 500; }
.inv-row { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px dashed var(--line); font-size: 14px; } .inv-row b { white-space: nowrap; } .inv-row.muted { color: var(--muted); }
.inv-now { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-top: 12px; padding: 14px 16px; border-radius: 14px; background: rgba(123, 92, 255, .16); border: 1px solid rgba(123, 92, 255, .32); }
.inv-now span { color: var(--muted); font-size: 13.5px; } .inv-now strong { font-size: 22px; letter-spacing: -.01em; }
.perks { margin: 0; padding: 4px 6px; list-style: none; display: grid; gap: 8px; color: var(--muted); font-size: 13.5px; } .perks li::before { content: "✓"; color: var(--ok); margin-inline-end: 8px; }

/* ---------- The loader: the Motion Studio mark inside a turning ring ---------- */
.ms-loader { position: relative; width: 64px; height: 64px; flex: none; }
.ms-loader svg { width: 64px; height: 64px; animation: spin 1.4s linear infinite; } .ms-loader circle { fill: none; stroke-width: 5; }
.ms-loader .t { stroke: rgba(255, 255, 255, .08); } .ms-loader .a { stroke: url(#msl); stroke-linecap: round; stroke-dasharray: 60 110; animation: dash 1.4s ease-in-out infinite; }
.ms-loader img { position: absolute; inset: 15px; width: 34px; height: 34px; border-radius: 10px; animation: breathe 1.4s ease-in-out infinite; }
@keyframes dash { 0% { stroke-dasharray: 10 160; stroke-dashoffset: 0; } 50% { stroke-dasharray: 90 80; stroke-dashoffset: -30; } 100% { stroke-dasharray: 10 160; stroke-dashoffset: -170; } }
@keyframes breathe { 50% { transform: scale(.88); opacity: .75; } }
.waiting { display: flex; align-items: center; gap: 16px; padding: 16px 18px; border-radius: 18px; background: rgba(123, 92, 255, .1); border: 1px solid rgba(123, 92, 255, .25); } .waiting b { display: block; }
.spin-sm { display: inline-block; width: 16px; height: 16px; margin-inline-end: 10px; vertical-align: -3px; border-radius: 50%; border: 2.5px solid rgba(255, 255, 255, .3); border-top-color: #fff; animation: spin .8s linear infinite; }

/* ---------- The result: the seal, the burst, the receipt ---------- */
.done-ic.sx { width: 96px; height: 96px; background: none; border-radius: 0; margin: 0 0 18px; }
.done-ic.sx svg { width: 96px; height: 96px; overflow: visible; } .sx-seal { transform-origin: 60px 60px; animation: seal-spin 2.4s cubic-bezier(.3, 1.3, .5, 1) both; filter: drop-shadow(0 12px 22px rgba(91, 46, 255, .6)); }
.sx-tick { stroke-dasharray: 70; stroke-dashoffset: 70; animation: tick .5s .9s ease forwards; }
@keyframes seal-spin { from { transform: rotate(-200deg) scale(.4); opacity: 0; } 40% { opacity: 1; } }
@keyframes tick { to { stroke-dashoffset: 0; } }
.done-ic.warn-ic { background: rgba(255, 194, 122, .14); color: #FFC27A; }
h1 em, #doneTitle em { font-family: "Instrument Serif", serif; font-weight: 400; color: var(--lilac); }
.burst { position: fixed; z-index: 50; left: 50%; top: 50%; width: 0; height: 0; pointer-events: none; } .burst i { position: absolute; left: 0; top: 0; display: block; }
.ticket { position: relative; margin-top: 18px; padding: 20px 22px 16px; border-radius: 20px; background: #FBFAFF; color: #160E38; box-shadow: 0 30px 50px -30px #000; animation: ticket-in .8s 1.2s cubic-bezier(.22, 1, .36, 1) both; }
.ticket::before, .ticket::after { content: ""; position: absolute; top: 74px; width: 22px; height: 22px; border-radius: 50%; background: var(--card); } .ticket::before { left: -11px; } .ticket::after { right: -11px; }
@keyframes ticket-in { from { opacity: 0; transform: translateY(-24px) scaleY(.6); transform-origin: top; } }
.tk-head { display: flex; justify-content: space-between; align-items: center; padding-bottom: 16px; margin-bottom: 8px; border-bottom: 2px dashed #E4DFF3; }
.tk-head small, .tk-row span { color: #6B6488; font-size: 12.5px; } .tk-head b { display: block; font-size: 18px; letter-spacing: .02em; }
.tk-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 99px; background: #EFE9FF; color: #5B2EFF; font-size: 12.5px; font-weight: 600; } .tk-chip i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.tk-chip.ok { background: #E3F7EE; color: #0E9F6E; }
.tk-row { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; padding: 8px 0; font-size: 14px; } .tk-row b { text-align: end; } .tk-row small { color: #6B6488; font-weight: 400; }
.tk-total { display: flex; justify-content: space-between; align-items: baseline; margin-top: 8px; padding-top: 12px; border-top: 1px solid #E4DFF3; } .tk-total strong { font-size: 22px; }
.tk-barcode { height: 38px; margin-top: 14px; border-radius: 4px; background: repeating-linear-gradient(90deg, #160E38 0 2px, transparent 2px 4px, #160E38 4px 5px, transparent 5px 8px, #160E38 8px 11px, transparent 11px 13px); opacity: .85; }
.tk-print { display: none; }
.link.print { display: inline-flex; align-items: center; gap: 8px; margin-top: 14px; }

/* ---------- Your orders ---------- */
.orders { display: grid; gap: 12px; }
.ord { padding: 16px 18px; border-radius: 18px; background: rgba(0, 0, 0, .22); border: 1px solid var(--line); } .ord .link { margin: 10px 0 0; padding: 0; }
.ord-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; } .ord-mid { display: grid; gap: 10px; margin-top: 10px; } .ord-mid strong { font-size: 20px; }
.ord-key { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; background: rgba(123, 92, 255, .12); border: 1px dashed rgba(185, 166, 255, .45); }
.ord-key code { flex: 1; min-width: 0; font: 600 15px "Geist Mono", monospace; letter-spacing: .05em; color: var(--lilac); overflow-wrap: anywhere; }
.chip { flex: none; padding: 4px 11px; border-radius: 99px; background: rgba(255, 255, 255, .08); color: var(--muted); font-size: 12.5px; font-weight: 600; }
.chip.ok { background: rgba(94, 230, 160, .14); color: var(--ok); } .chip.wait { background: rgba(123, 92, 255, .18); color: var(--lilac); } .chip.bad { background: rgba(255, 143, 133, .14); color: var(--bad); }
.empty { color: var(--muted); } .empty a { color: var(--lilac); }

/* ---------- The sign-in window (like Detalia's: the brand on one half, the form on the other) ---------- */
.au-dialog { width: min(900px, calc(100% - 24px)); max-height: calc(100% - 24px); padding: 0; border: 1px solid var(--line-2); border-radius: 28px; background: #0E0A20; color: var(--text); box-shadow: 0 40px 80px -30px #000; overflow: auto; }
.au-dialog::backdrop { background: rgba(5, 3, 14, .72); backdrop-filter: blur(6px); }
.au-dialog[open] { animation: au-pop .4s cubic-bezier(.22, 1, .36, 1); } @keyframes au-pop { from { opacity: 0; transform: translateY(16px) scale(.97); } }
.au-close { position: absolute; z-index: 2; top: 14px; right: 14px; width: 36px; height: 36px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .08); color: var(--text); font-size: 22px; line-height: 1; }
.au-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: 560px; } .au-enter .au-main { animation: rise .35s cubic-bezier(.22, 1, .36, 1); }
.au-side { position: relative; overflow: hidden; margin: 10px; padding: 26px; border-radius: 22px; display: flex; flex-direction: column; color: #fff;
  background: radial-gradient(80% 60% at 100% 0%, rgba(255, 122, 92, .55), transparent 60%), radial-gradient(90% 70% at 0% 100%, rgba(53, 4, 214, .95), transparent 65%), linear-gradient(150deg, #8E72FF, #5B2EFF 55%, #2A0399); }
.au-side__logo { position: relative; z-index: 1; height: 40px; width: auto; filter: brightness(0) invert(1); align-self: flex-start; }
.au-orb { position: absolute; inset: 0; pointer-events: none; } .au-orb i { position: absolute; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .18); left: 50%; top: 42%; transform: translate(-50%, -50%); animation: orb 6s ease-in-out infinite; }
.au-orb i:nth-child(1) { width: 180px; height: 180px; } .au-orb i:nth-child(2) { width: 290px; height: 290px; animation-delay: -2s; } .au-orb i:nth-child(3) { width: 400px; height: 400px; animation-delay: -4s; }
@keyframes orb { 50% { transform: translate(-50%, -50%) scale(1.08); opacity: .55; } }
.au-side__title { position: relative; z-index: 1; margin: auto 0 18px; font-size: 38px; line-height: 1.05; letter-spacing: -.02em; } .au-side__title em { font-family: "Instrument Serif", serif; font-weight: 400; }
.au-side__points { position: relative; z-index: 1; margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; font-size: 14px; } .au-side__points li { display: flex; align-items: center; gap: 10px; } .au-side__points svg { width: 18px; height: 18px; }
.au-main { display: flex; flex-direction: column; justify-content: center; gap: 12px; padding: 40px 38px; }
.au-title { margin: 0; font-size: 26px; letter-spacing: -.02em; } .au-sub { margin: -4px 0 6px; color: var(--muted); }
.au-google { display: flex; align-items: center; justify-content: center; gap: 10px; height: 48px; border: 0; border-radius: 14px; background: #fff; color: #1f1f1f; font-weight: 600; font-size: 15px; transition: transform .15s; } .au-google:hover { transform: translateY(-1px); }
.au-or { display: flex; align-items: center; gap: 10px; margin: 2px 0; color: var(--faint); font-size: 13px; } .au-or::before, .au-or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.au-field { display: grid; gap: 6px; font-size: 13.5px; color: var(--muted); } .au-field input { width: 100%; }
.au-code { font: 600 24px "Geist Mono", monospace !important; letter-spacing: .3em; text-align: center; height: 56px !important; }
.au-strength { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: -4px; } .au-strength span { height: 4px; border-radius: 4px; background: rgba(255, 255, 255, .1); transition: background .25s; } .au-strength span.on { background: var(--ok); }
.au-msg { min-height: 1.2em; margin: 0; color: var(--bad); font-size: 13.5px; }
.au-primary { height: 50px; border: 0; border-radius: 14px; background: var(--grad); color: #fff; font-weight: 600; font-size: 15.5px; box-shadow: 0 14px 30px -14px rgba(91, 46, 255, .9); } .au-primary:disabled { opacity: .65; }
.au-primary.busy::before { content: ""; display: inline-block; width: 15px; height: 15px; margin-inline-end: 10px; vertical-align: -2px; border-radius: 50%; border: 2.5px solid rgba(255, 255, 255, .3); border-top-color: #fff; animation: spin .8s linear infinite; }
.au-switch { margin: 2px 0 0; text-align: center; color: var(--muted); font-size: 14px; } .au-link { border: 0; background: none; color: var(--lilac); font-weight: 600; padding: 0; } .au-main > .au-link { align-self: center; }
.au-terms { margin: 4px 0 0; color: var(--faint); font-size: 12px; text-align: center; line-height: 1.5; }
@media (max-width: 760px) {
  .au-body { grid-template-columns: minmax(0, 1fr); min-height: 0; } .au-side { min-height: 150px; padding: 20px; } .au-side__title { font-size: 26px; margin: 18px 0 0; } .au-side__points, .au-orb { display: none; }
  .au-main { padding: 22px 20px 26px; } .top .help span { display: none; } .top .help { padding: 9px; }
}
@media (prefers-reduced-motion: reduce) { .dc, .dc-face::before, .dc-shine, .sx-seal, .ticket, .au-orb i, .ms-loader svg, .ms-loader .a, .ms-loader img { animation: none !important; } .sx-tick { stroke-dashoffset: 0; } }

/* ---------- Print: just the invoice ---------- */
@media print {
  body { background: #fff !important; color: #160E38; } .top, .steps, .summary, [data-view] > *:not(#doneBox), #doneBox > *:not(.ticket), .burst, .link.print { display: none !important; }
  .wrap { display: block; padding: 0; } .panel { background: none; border: 0; box-shadow: none; padding: 0; animation: none; }
  .ticket { box-shadow: none; border: 1px solid #E4DFF3; animation: none; margin: 0; } .ticket::before, .ticket::after { display: none; }
  .tk-print { display: flex; align-items: center; gap: 16px; padding-bottom: 16px; margin-bottom: 12px; border-bottom: 1px solid #E4DFF3; } .tk-print img { filter: none; } .tk-print b { display: block; font-size: 18px; } .tk-print span { color: #6B6488; font-size: 12.5px; }
}

/* The sign-in side: a 6-second loop of what the tool does (a request → Claude adds keyframes → the logo bounces in) */
.au-demo { --loop: 6s; position: relative; z-index: 1; display: grid; gap: 10px; margin: 22px 0 0; }
.au-chat { display: grid; gap: 6px; }
.au-you, .au-ai { justify-self: start; max-width: 90%; padding: 8px 12px; border-radius: 14px; font-size: 12.5px; line-height: 1.35; }
.au-you { justify-self: end; background: #fff; color: #2A0399; font-weight: 600; border-bottom-right-radius: 4px; animation: d-you var(--loop) infinite; }
.au-ai { position: relative; min-height: 32px; background: rgba(10, 7, 22, .45); border: 1px solid rgba(255, 255, 255, .16); border-bottom-left-radius: 4px; animation: d-ai var(--loop) infinite; }
.au-dots { position: absolute; left: 12px; top: 50%; display: flex; gap: 4px; transform: translateY(-50%); animation: d-dots var(--loop) infinite; }
.au-dots i { width: 5px; height: 5px; border-radius: 50%; background: #fff; opacity: .5; animation: d-blink .9s infinite; } .au-dots i:nth-child(2) { animation-delay: .15s; } .au-dots i:nth-child(3) { animation-delay: .3s; }
.au-ai-t { animation: d-ait var(--loop) infinite; }
.au-comp { border-radius: 14px; overflow: hidden; background: rgba(10, 7, 22, .55); border: 1px solid rgba(255, 255, 255, .14); }
.au-comp-bar { display: flex; align-items: center; gap: 5px; padding: 6px 10px; font-size: 10.5px; color: rgba(255, 255, 255, .6); border-bottom: 1px solid rgba(255, 255, 255, .08); }
.au-comp-bar i { width: 7px; height: 7px; border-radius: 50%; background: rgba(255, 255, 255, .25); } .au-comp-bar i:first-child { background: #FF7A5C; } .au-comp-bar span { margin-left: 6px; }
.au-stage { position: relative; height: 92px; background: radial-gradient(60% 80% at 50% 100%, rgba(142, 114, 255, .35), transparent 70%); }
.au-logo { position: absolute; left: 50%; bottom: 14px; width: 44px; height: 44px; margin-left: -22px; border-radius: 12px; box-shadow: 0 10px 20px -8px rgba(0, 0, 0, .6); transform-origin: 50% 100%; animation: d-bounce var(--loop) infinite; }
.au-shadow { position: absolute; left: 50%; bottom: 10px; width: 46px; height: 8px; margin-left: -23px; border-radius: 50%; background: rgba(0, 0, 0, .45); filter: blur(3px); animation: d-shadow var(--loop) infinite; }
.au-tl { position: relative; padding: 6px 10px 8px; border-top: 1px solid rgba(255, 255, 255, .08); background: rgba(0, 0, 0, .2); }
.au-row { position: relative; height: 20px; display: flex; align-items: center; font-size: 10px; color: rgba(255, 255, 255, .55); }
.au-row::after { content: ""; position: absolute; left: 88px; right: 0; top: 50%; height: 1px; background: rgba(255, 255, 255, .1); }
.kf { position: absolute; z-index: 1; top: 50%; width: 8px; height: 8px; margin: -4px 0 0 -4px; background: #FFC27A; transform: rotate(45deg) scale(0); animation: d-kf var(--loop) calc(var(--d, 0) * 1s) infinite; }
.k1 { left: calc(88px + 8%); animation-delay: 0s; } .k2 { left: calc(88px + 40%); } .k3 { left: calc(88px + 64%); } .k4 { left: calc(88px + 8%); } .k5 { left: calc(88px + 52%); }
.k2 { --d: .12; } .k3 { --d: .24; } .k4 { --d: .06; } .k5 { --d: .18; }
.au-head { position: absolute; top: 4px; bottom: 4px; left: 98px; width: 2px; border-radius: 2px; background: #FF7A5C; box-shadow: 0 0 8px #FF7A5C; animation: d-head var(--loop) infinite; }
@keyframes d-you { 0%, 4% { opacity: 0; transform: translateY(6px); } 10%, 92% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes d-ai { 0%, 14% { opacity: 0; transform: translateY(6px); } 20%, 92% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes d-dots { 0%, 30% { opacity: 1; } 34%, 100% { opacity: 0; } }
@keyframes d-ait { 0%, 32% { opacity: 0; } 38%, 100% { opacity: 1; } }
@keyframes d-blink { 50% { opacity: 1; } }
@keyframes d-kf { 0%, 36% { transform: rotate(45deg) scale(0); } 41%, 94% { transform: rotate(45deg) scale(1); } 100% { transform: rotate(45deg) scale(0); } }
@keyframes d-head { 0%, 40% { left: 98px; opacity: 0; } 42% { left: 98px; opacity: 1; } 88%, 96% { left: calc(100% - 12px); opacity: 1; } 100% { left: calc(100% - 12px); opacity: 0; } }
@keyframes d-bounce {
  0%, 42% { transform: translateY(-70px) scale(.6); opacity: 0; }
  44% { opacity: 1; }
  54% { transform: translateY(0) scaleX(1.18) scaleY(.82); }
  61% { transform: translateY(-18px) scale(1.02); }
  67% { transform: translateY(0) scaleX(1.06) scaleY(.94); }
  72%, 94% { transform: none; opacity: 1; }
  100% { transform: none; opacity: 0; } }
@keyframes d-shadow { 0%, 42% { transform: scale(.3); opacity: 0; } 54%, 67%, 72%, 94% { transform: scale(1); opacity: 1; } 61% { transform: scale(.7); opacity: .6; } 100% { opacity: 0; } }
@media (max-width: 760px) { .au-demo { display: none; } }
@media (prefers-reduced-motion: reduce) { .au-demo *, .au-demo { animation: none !important; } .kf { transform: rotate(45deg); } }

/* ---------- Sizes that follow the screen: the sign-in window always fits without scrolling on a laptop ---------- */
.au-dialog { width: min(880px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); }
.au-body { min-height: 0; }
.au-main { padding: clamp(22px, 4vh, 40px) clamp(22px, 3vw, 38px); gap: clamp(7px, 1.25vh, 12px); }
.au-field input { height: clamp(40px, 5.4vh, 46px); }
.au-google, .au-primary { height: clamp(42px, 5.8vh, 50px); }
.au-title { font-size: clamp(22px, 3.1vh, 26px); } .au-sub { margin-bottom: clamp(0px, .6vh, 6px); }
.au-side { padding: clamp(18px, 3vh, 26px); }
.au-side__title { font-size: clamp(28px, 4.4vh, 38px); margin: auto 0 clamp(12px, 1.8vh, 18px); padding-top: clamp(14px, 2.2vh, 22px); }
.au-side__points { gap: clamp(6px, 1.1vh, 10px); font-size: clamp(12.5px, 1.7vh, 14px); }
.au-demo { margin-top: clamp(12px, 2.2vh, 22px); gap: clamp(6px, 1.1vh, 10px); }
.au-stage { height: clamp(62px, 10vh, 92px); }
.au-terms { font-size: 11.5px; }
@media (max-height: 760px) and (min-width: 761px) { .au-terms { display: none; } .au-side__points li:nth-child(3) { display: none; } .au-comp-bar { display: none; } }
@media (max-height: 620px) and (min-width: 761px) { .au-demo { display: none; } }
/* The card: no glow around it, no warm patches on it, just our violets */
.dc-face { box-shadow: 0 18px 36px -22px rgba(0, 0, 0, .8), inset 0 0 0 1px rgba(255, 255, 255, .14); }
.dc-face::before { background: radial-gradient(50% 45% at 20% 18%, #B9A6FF 0%, transparent 62%), radial-gradient(48% 45% at 88% 26%, #7B5CFF 0%, transparent 64%),
  conic-gradient(from 210deg at 50% 56%, #3504D6, #8E72FF, #5B2EFF, #2A0399, #3504D6); }
/* Phones: the sign-in window is a full-screen sheet with a slim brand header */
@media (max-width: 760px) {
  .au-dialog { width: 100%; max-width: 100%; height: 100dvh; max-height: 100dvh; margin: 0; border-radius: 0; border: 0; }
  .au-dialog[open] { animation: au-sheet .35s cubic-bezier(.22, 1, .36, 1); } @keyframes au-sheet { from { transform: translateY(24px); opacity: 0; } }
  .au-body { min-height: 100%; grid-template-rows: auto 1fr; }
  .au-side { min-height: 0; margin: calc(8px + env(safe-area-inset-top)) 8px 0; padding: 14px 16px; border-radius: 18px; flex-direction: row; align-items: center; justify-content: space-between; gap: 12px; }
  .au-side { padding-right: 58px; } .au-side__logo { height: 30px; } .au-side__title { margin: 0; font-size: 19px; text-align: right; }
  .au-main { justify-content: flex-start; gap: 9px; padding: 18px 18px calc(18px + env(safe-area-inset-bottom)); }
  .au-title { font-size: 22px; } .au-sub { font-size: 14px; margin: -4px 0 2px; }
  .au-field { gap: 4px; } .au-field input { height: 44px; } .au-google, .au-primary { height: 46px; }
  .au-terms { font-size: 11px; margin: 0; }
  .au-close { top: calc(16px + env(safe-area-inset-top)); right: 16px; z-index: 3; background: rgba(10, 7, 22, .35); }
}
@media (max-width: 760px) and (max-height: 700px) { .au-terms, .au-sub { display: none; } .au-main { gap: 7px; } }
@media (min-width: 1280px) { .wrap { grid-template-columns: minmax(0, 1fr) 440px; } }

.fine a, .au-terms a { color: var(--lilac); }