:root { --bg:#000; --surface:#0b0c0a; --ink:#f5f7f4; --muted:#98a09a; --line:#2b302c; --signal:#00e676; --field:#111511; --button:#f5f7f4; --button-ink:#000; }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; background:var(--bg); color:var(--ink); font-family:"JetBrains Mono","IBM Plex Mono",Consolas,monospace; transition:background .25s ease,color .25s ease; }
body[data-theme="light"] { --bg:#f7f7f8; --surface:#fff; --ink:#111311; --muted:#59605a; --line:#c9ceca; --signal:#008a49; --field:#f1f4f1; --button:#111311; --button-ink:#fff; }
.page { width:min(100%, 960px); min-height:100vh; margin:0 auto; background:var(--surface); border-inline:1px solid var(--line); }
.masthead, .masthead-actions { display:flex; align-items:center; }
.masthead { justify-content:space-between; gap:20px; padding:16px 22px; border-bottom:1px solid var(--line); font-size:11px; font-weight:700; letter-spacing:.06em; }
.masthead-actions { gap:18px; }
.powered-by,.powered-by-verishop { display:inline-flex; align-items:center; }
.powered-by { gap:5px; color:var(--muted); text-decoration:none; }
.powered-by-verishop { gap:0; color:var(--ink); }
.powered-by-verishop img { display:block; width:1.36em; height:1.36em; margin-right:-.16em; object-fit:contain; transform:translateY(-1px); }
.powered-by:hover .powered-by-verishop>span { color:transparent; background:linear-gradient(100deg,#00e676,#00c8ff,#8b5cff,#ff4fb8,#00e676); background-size:250% 100%; background-clip:text; -webkit-background-clip:text; animation:verishop-spectrum 1.8s linear infinite; }
.powered-by:hover .powered-by-verishop img { animation:verishop-logo-spectrum 1.8s linear infinite; }
.language-switcher { display:flex; border:1px solid var(--line); }
.language-switcher a { padding:6px 7px; color:var(--muted); font-size:10px; line-height:1; text-decoration:none; }
.language-switcher a + a { border-left:1px solid var(--line); }
.language-switcher a:hover,.language-switcher a.active { color:var(--ink); background:var(--field); }
.theme-toggle { padding:7px 9px; border:1px solid var(--line); color:var(--ink); background:transparent; font:inherit; cursor:pointer; }
.theme-toggle:hover { border-color:var(--signal); color:var(--signal); }
.receipt-window { margin:22px; border:1px solid var(--line); background:var(--field); }
.thank-you-clip { position:relative; height:clamp(220px, 36vw, 350px); padding:24px 22px 16px; overflow:hidden; border-bottom:1px solid var(--line); display:flex; align-items:flex-end; }
.thank-you { margin:0; color:var(--ink); font-family:Arial,"Helvetica Neue",Helvetica,sans-serif; font-size:clamp(46px, 10.3vw, 101px); font-weight:800; line-height:.94; letter-spacing:-.065em; transform:translateY(116%); animation:rise-from-receipt 1.85s cubic-bezier(.16,1,.3,1) .3s forwards; }
.review-clip { position:absolute; top:24px; right:22px; overflow:hidden; text-align:right; transform:translateY(-150%); animation:drop-review 1.1s cubic-bezier(.16,1,.3,1) .55s forwards; }
.review-message { margin:0; color:var(--muted); font:700 13px/1.38 Arial,"Helvetica Neue",Helvetica,sans-serif; letter-spacing:-.01em; }
.receipt-meta { display:flex; justify-content:space-between; gap:20px; padding:14px 22px; color:var(--muted); font-size:12px; line-height:1.5; }
.receipt-meta p { margin:0; }
.receipt-meta p:first-child { color:var(--signal); font-variant-numeric:tabular-nums; }
.content-card { margin:0 22px; padding:24px 0 46px; border-bottom:1px solid var(--line); }
.kicker { margin:0 0 12px; color:var(--signal); font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; }
pre { margin:0 0 16px; padding:18px; overflow:auto; white-space:pre-wrap; border:1px solid var(--line); background:var(--field); color:var(--ink); font:14px/1.55 "JetBrains Mono","IBM Plex Mono",Consolas,monospace; }
button:not(.theme-toggle) { appearance:none; border:1px solid var(--button); border-radius:0; background:var(--button); color:var(--button-ink); padding:12px 17px; font:700 12px "JetBrains Mono","IBM Plex Mono",Consolas,monospace; cursor:pointer; }
button:not(.theme-toggle):hover { background:var(--signal); border-color:var(--signal); color:#000; }
.delivery-note { max-width:650px; margin:20px 0 0; color:var(--muted); font-size:12px; line-height:1.55; }
.instruction { margin-top:34px; }
.verify-options { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin-top:24px; }
.verification-method { position:relative; display:flex; min-height:196px; flex-direction:column; align-items:flex-start; gap:11px; padding:18px; border:1px solid var(--line); background:var(--surface); }
.verification-method strong { color:var(--ink); font-size:16px; line-height:1.2; }
.verification-method>span:not(.verification-method-index) { max-width:260px; color:var(--muted); font-size:12px; line-height:1.55; }
.verification-method b { color:var(--ink); font-weight:700; }
.verification-method-index { color:var(--signal); font-size:11px; font-weight:700; letter-spacing:.08em; }
.verification-method button { width:100%; margin-top:auto; }
.verification-method-active { border-color:color-mix(in srgb,var(--signal) 42%,var(--line)); }
.verification-method-active:hover { border-color:var(--signal); }
.verification-method-disabled { opacity:.58; background:var(--field); }
.verification-method-disabled em { margin-top:auto; color:var(--muted); font-size:11px; font-style:normal; letter-spacing:.08em; text-transform:uppercase; }
.code-form { display:flex; gap:12px; margin-top:24px; flex-wrap:wrap; }
.code-form > input:not([type="hidden"]) { width:180px; padding:12px; border:1px solid var(--line); background:var(--field); color:var(--ink); font:18px "JetBrains Mono",monospace; }
.otp-inputs { display:flex; gap:8px; }
.code-form .otp-digit { width:44px; height:48px; padding:0; border:1px solid var(--line); background:var(--field); color:var(--ink); font:700 21px "JetBrains Mono",monospace; text-align:center; }
.code-form .otp-digit:focus { outline:none; border-color:var(--signal); box-shadow:0 0 0 3px color-mix(in srgb,var(--signal) 20%,transparent); }
.code-help { max-width:430px; margin:14px 0 0; color:var(--muted); font-size:12px; line-height:1.55; }
.code-error { margin:12px 0 0; color:var(--signal); font:700 13px "JetBrains Mono",monospace; }
.resend-form { margin-top:12px; }
.resend-form button { min-width:180px; }
.resend-form button:disabled { cursor:not-allowed; opacity:.55; }
.copied { background:var(--signal)!important; border-color:var(--signal)!important; }
body.language-pending { overflow:hidden; }
.language-pending .page { opacity:.32; filter:blur(18px); pointer-events:none; user-select:none; }
.language-pending .thank-you { animation:none; transform:translateY(116%); }
.language-modal { position:fixed; inset:0; z-index:5; display:grid; place-items:center; background:rgb(0 0 0 / .58); backdrop-filter:blur(18px) saturate(.3); }
.language-modal>div { width:min(420px,calc(100% - 32px)); padding:28px; border:1px solid var(--line); background:var(--surface); box-shadow:0 0 0 1px rgb(255 255 255 / .03); }
.language-modal h2 { margin:0 0 24px; font:700 28px Arial,sans-serif; }
.language-modal a { display:block; padding:14px; margin-top:8px; border:1px solid var(--line); color:var(--ink); text-decoration:none; }
.language-modal a:hover { border-color:var(--signal); color:var(--signal); }
.language-cycle { display:grid; }
.language-cycle>span { grid-area:1 / 1; animation-duration:4s; animation-iteration-count:infinite; animation-timing-function:ease-in-out; }
.language-cycle-ru { animation-name:not-found-copy-ru; }
.language-cycle-en { opacity:0; animation-name:not-found-copy-en; }
.not-found-body { display:grid; place-items:center; padding:24px; }
.not-found { position:relative; width:min(100%,760px); min-height:560px; padding:clamp(28px,7vw,72px); border:1px solid var(--line); background:var(--surface); display:flex; flex-direction:column; align-items:flex-start; justify-content:flex-start; overflow:hidden; }
.not-found-code { margin:0 0 22px; color:var(--signal); font-size:12px; letter-spacing:.12em; }
.not-found h1 { margin:0; font-family:Arial,"Helvetica Neue",sans-serif; font-size:clamp(48px,9vw,92px); line-height:.9; letter-spacing:-.07em; }
.not-found-title { display:grid; min-height:1.8em; }
.not-found-title>span { grid-area:1 / 1; animation-duration:6s; animation-iteration-count:infinite; animation-timing-function:ease-in-out; }
.not-found-title-ru { animation-name:not-found-copy-ru; }
.not-found-title-en { opacity:0; animation-name:not-found-copy-en; }
.verishop-link { position:relative; display:inline-flex; align-items:center; gap:0; margin-top:26px; color:var(--ink); font:700 clamp(28px,5vw,48px) Arial,sans-serif; text-decoration:none; }
.verishop-link img { display:block; width:1.16em; height:1.16em; margin-right:-.12em; object-fit:contain; transform:translateY(-3px); }
.verishop-link:hover>span { color:transparent; background:linear-gradient(100deg,#00e676,#00c8ff,#8b5cff,#ff4fb8,#00e676); background-size:250% 100%; background-clip:text; -webkit-background-clip:text; animation:verishop-spectrum 1.8s linear infinite; }
.verishop-link:hover img { animation:verishop-logo-spectrum 1.8s linear infinite; }
.not-found-guide { position:absolute; top:374px; left:clamp(270px,39vw,300px); width:260px; color:var(--muted); pointer-events:none; }
.not-found-guide img { display:block; width:100%; height:auto; transform:rotate(20deg); transform-origin:left center; }
.promo { display:block; padding:20px 22px; color:var(--signal); font-size:12px; text-underline-offset:4px; }
.lead { margin:22px; padding:48px 22px; border:1px solid var(--line); background:var(--field); }
.lead .kicker { margin-bottom:18px; font-family:Arial,"Helvetica Neue",Helvetica,sans-serif; font-size:12px; letter-spacing:.05em; }
.lead h1 { max-width:700px; margin:0; font-family:Arial,"Helvetica Neue",Helvetica,sans-serif; font-size:clamp(38px, 7.3vw, 72px); font-weight:800; line-height:.94; letter-spacing:-.06em; transform:translateX(-4px); }
.lead p:last-child { max-width:490px; margin:24px 0 0; color:var(--muted); font-size:13px; line-height:1.6; }
.error h1 { color:var(--signal); }
@keyframes rise-from-receipt { to { transform:translateY(0); } }
@keyframes drop-review { to { transform:translateY(0); } }
@keyframes verishop-spectrum { to { background-position:250% 0; } }
@keyframes verishop-logo-spectrum { to { filter:hue-rotate(360deg) saturate(1.25); } }
@keyframes not-found-copy-ru { 0%,42% { opacity:1; transform:translateY(0); } 50%,92% { opacity:0; transform:translateY(-.08em); } 100% { opacity:1; transform:translateY(0); } }
@keyframes not-found-copy-en { 0%,42% { opacity:0; transform:translateY(.08em); } 50%,92% { opacity:1; transform:translateY(0); } 100% { opacity:0; transform:translateY(.08em); } }
@media (prefers-reduced-motion: reduce) { .thank-you,.review-clip { animation:none; transform:none; } .not-found-title>span,.language-cycle>span { animation:none; } .not-found-title-en,.language-cycle-en { display:none; } body { transition:none; } }
@media (max-width:620px) { .masthead { padding:14px; } .masthead-actions { gap:10px; } .masthead-actions > span { display:none; } .receipt-window, .lead { margin:14px; } .content-card { margin:0 14px; } .thank-you-clip { height:230px; padding:18px 15px 14px; } .review-clip { top:18px; right:15px; } .review-message { font-size:11px; } .receipt-meta { display:block; padding:12px 15px; } .receipt-meta p + p { margin-top:6px; } .verify-options { grid-template-columns:1fr; } .verification-method { min-height:172px; } .code-form .otp-digit { width:min(44px,calc((100vw - 76px) / 6)); } .not-found { min-height:540px; } .not-found-guide { top:213px; left:163px; width:150px; } }