/* ============================================================
   OpenRouter Topup — premium dark SaaS UI (v2).
   Без внешних шрифтов/скриптов/картинок (CSP: default-src 'self').
   ============================================================ */
:root {
    --bg:        #07080c;
    --bg-2:      #0c0e14;
    --card:      #11131b;
    --card-2:    #161924;
    --line:      #20242f;
    --line-2:    #2b3040;
    --text:      #f2f4f9;
    --text-2:    #c4cad6;
    --muted:     #808999;
    --violet:    #8b5cf6;
    --indigo:    #6366f1;
    --accent:    #5b8cff;
    --accent-2:  #87a6ff;
    --ok:        #34d399;
    --ok-2:      #10b981;
    --ok-bg:     rgba(52,211,153,.12);
    --err:       #ff6b6b;
    --err-bg:    rgba(255,107,107,.10);
    --warn:      #ffc24b;
    --warn-bg:   rgba(255,194,75,.12);
    --grad:      linear-gradient(135deg, #8b5cf6 0%, #6366f1 48%, #5b8cff 100%);
    --grad-soft: linear-gradient(135deg, rgba(139,92,246,.18), rgba(91,140,255,.14));
    --grad-ok:   linear-gradient(135deg, #34d399, #059669);
    --radius:    18px;
    --radius-sm: 12px;
    --shadow:    0 1px 2px rgba(0,0,0,.5), 0 18px 40px -18px rgba(0,0,0,.7);
    --glow:      0 20px 60px -18px rgba(99,102,241,.5);
    --maxw:      1080px;
    --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
    margin: 0; font-family: var(--font); background: var(--bg); color: var(--text);
    line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
    overflow-x: hidden;
}
body::before {
    content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
    background:
        radial-gradient(1000px 560px at 78% -6%, rgba(139,92,246,.22), transparent 60%),
        radial-gradient(820px 460px at 12% 4%, rgba(91,140,255,.16), transparent 58%),
        radial-gradient(600px 400px at 60% 100%, rgba(52,211,153,.06), transparent 60%);
}
a { color: var(--accent-2); }
.gradtext { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ---------- Хедер / футер ---------- */
.topbar {
    display: flex; align-items: center; justify-content: space-between; gap: 14px;
    padding: 15px clamp(16px, 4vw, 30px); border-bottom: 1px solid var(--line);
    background: rgba(7,8,12,.72); backdrop-filter: blur(12px); position: sticky; top: 0; z-index: 30;
}
.logo { color: var(--text); text-decoration: none; font-weight: 700; letter-spacing: -.01em; display: inline-flex; align-items: center; gap: 10px; }
.logo .dot { width: 24px; height: 24px; border-radius: 8px; background: var(--grad); box-shadow: 0 0 16px rgba(99,102,241,.6), 0 0 0 1px rgba(255,255,255,.08) inset; }
.mainnav { display: flex; align-items: center; gap: 22px; }
.mainnav a { color: var(--muted); text-decoration: none; font-size: 14px; transition: color .15s; }
.mainnav a:hover { color: var(--text); }
.adminnav a { color: var(--muted); text-decoration: none; margin-left: 18px; font-size: 14px; }
.adminnav a:hover { color: var(--accent-2); }
.container { max-width: var(--maxw); margin: 0 auto; padding: clamp(22px, 4vw, 44px) clamp(16px, 4vw, 26px); }
.footer { text-align: center; color: var(--muted); font-size: 13px; padding: 30px 18px 44px; border-top: 1px solid var(--line); margin-top: 46px; }

/* ---------- Типографика ---------- */
h1 { font-size: clamp(26px, 5vw, 42px); line-height: 1.1; margin: 0 0 .35em; letter-spacing: -.025em; font-weight: 750; }
h2 { font-size: clamp(19px, 3vw, 26px); margin: 0 0 .5em; letter-spacing: -.02em; font-weight: 700; }
h3 { font-size: 16px; margin: 0 0 .3em; font-weight: 650; }
p { margin: 0 0 1em; color: var(--text-2); }
.lead { font-size: clamp(15px, 2.2vw, 18px); color: var(--text-2); }
.muted { color: var(--muted); font-size: 14px; }
.small { font-size: 13px; }
.center { text-align: center; }
.section-title { text-align: center; margin: 6px 0 22px; }

/* ---------- Карточки ---------- */
.card {
    background: linear-gradient(180deg, var(--card-2), var(--card));
    border: 1px solid var(--line); border-radius: var(--radius);
    padding: clamp(22px, 4vw, 34px); box-shadow: var(--shadow);
    max-width: 760px; margin: 0 auto 22px; position: relative;
}
.card.narrow { max-width: 440px; }
.card.wide   { max-width: 100%; }

/* ---------- Кнопки ---------- */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 9px;
    position: relative; overflow: hidden;
    background: var(--grad); color: #fff; border: none; border-radius: 13px;
    padding: 14px 22px; font-size: 15px; font-weight: 650; cursor: pointer; text-decoration: none;
    line-height: 1.1; box-shadow: 0 1px 0 rgba(255,255,255,.16) inset, 0 12px 28px -12px rgba(99,102,241,.8);
    transition: transform .12s ease, filter .12s ease;
}
.btn:hover { filter: brightness(1.07); transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn.block { width: 100%; }
.btn.lg { padding: 16px 26px; font-size: 16px; }
.btn.secondary { background: var(--card-2); color: var(--text); border: 1px solid var(--line-2); box-shadow: none; }
.btn.secondary:hover { border-color: var(--accent); filter: none; }
.btn.ghost { background: transparent; border: 1px solid var(--line-2); color: var(--text-2); box-shadow: none; }
.btn.small { padding: 8px 13px; font-size: 13px; }
.btn:disabled { opacity: .6; cursor: default; transform: none; filter: none; }

/* ---------- HERO ---------- */
.hero { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(20px, 4vw, 48px); align-items: center; padding: clamp(10px, 3vw, 30px) 0 10px; }
.hero .eyebrow {
    display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: #d7c8ff;
    background: var(--grad-soft); border: 1px solid rgba(139,92,246,.3); padding: 7px 14px; border-radius: 999px; margin-bottom: 20px;
}
.hero .eyebrow .pulse { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); animation: pulse 2s infinite; }
@keyframes pulse { 0%{box-shadow:0 0 0 0 rgba(52,211,153,.5);} 70%{box-shadow:0 0 0 7px rgba(52,211,153,0);} 100%{box-shadow:0 0 0 0 rgba(52,211,153,0);} }
.hero h1 { margin-bottom: .4em; }
.hero p.lead { max-width: 520px; margin: 0 0 24px; }
.hero-feats { display: flex; flex-wrap: wrap; gap: 18px 24px; margin-top: 22px; }
.hero-feat { display: flex; align-items: center; gap: 11px; }
.hero-feat .fic { width: 40px; height: 40px; border-radius: 12px; flex: none; display: grid; place-items: center; background: var(--grad-soft); border: 1px solid rgba(139,92,246,.25); font-size: 17px; }
.hero-feat .ft { font-size: 14px; font-weight: 600; }
.hero-feat .fs { font-size: 12px; color: var(--muted); }
.hero-cta { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 26px; }

/* HERO иллюстрация (inline SVG/CSS) */
.hero-art { position: relative; display: grid; place-items: center; min-height: 300px; }
.hero-art .glow { position: absolute; width: 70%; height: 70%; border-radius: 50%; background: radial-gradient(circle, rgba(99,102,241,.5), transparent 65%); filter: blur(36px); }
.hero-art svg { position: relative; width: 100%; max-width: 380px; height: auto; filter: drop-shadow(0 30px 50px rgba(0,0,0,.55)); }

/* ---------- Форма ---------- */
.form { margin-top: 6px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.field > label { font-size: 13.5px; color: var(--text-2); font-weight: 600; }
input, select, textarea {
    background: var(--bg-2); border: 1px solid var(--line-2); color: var(--text);
    border-radius: 12px; padding: 14px 15px; font-size: 15px; width: 100%; font-family: inherit;
    transition: border-color .12s ease, box-shadow .12s ease;
}
input::placeholder { color: #565d70; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(91,140,255,.2); }
input[readonly] { background: #0a0c11; color: var(--text-2); }
input.invalid { border-color: var(--err); box-shadow: 0 0 0 3px var(--err-bg); }
.hint { font-size: 12.5px; color: var(--muted); margin: 0; }
.hint.ok { color: var(--ok); } .hint.warn { color: var(--warn); }
.field-msg { font-size: 12.5px; color: var(--err); min-height: 1px; margin: 0; }
.form .btn { margin-top: 20px; }
.terms { text-align: center; font-size: 12.5px; color: var(--muted); margin: 12px 0 0; }

/* ---------- Как это работает ---------- */
.how { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.how-step { position: relative; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 20px 18px; }
.how-step .n { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; font-weight: 700; font-size: 16px; color: #fff; background: var(--grad); box-shadow: 0 10px 22px -10px rgba(99,102,241,.8); margin-bottom: 14px; }
.how-step h3 { font-size: 15px; margin-bottom: 5px; }
.how-step p { font-size: 13px; margin: 0; color: var(--muted); }
.how-step:not(:last-child)::after { content: "→"; position: absolute; right: -13px; top: 36px; color: var(--line-2); font-size: 20px; z-index: 2; }

/* ---------- Trust strip ---------- */
.trust-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.trust-item { display: flex; align-items: center; gap: 12px; padding: 6px 4px; }
.trust-item .ic { width: 42px; height: 42px; border-radius: 12px; flex: none; display: grid; place-items: center; background: var(--grad-soft); border: 1px solid rgba(139,92,246,.22); font-size: 18px; }
.trust-item .tt { font-size: 14px; font-weight: 650; }
.trust-item .ts { font-size: 12px; color: var(--muted); }

/* ---------- FAQ ---------- */
.faq details { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 0 18px; margin-bottom: 11px; background: var(--card); }
.faq summary { list-style: none; cursor: pointer; padding: 16px 0; font-weight: 600; font-size: 15px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--accent-2); font-size: 22px; line-height: 1; transition: transform .2s ease; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { margin: 0 0 16px; color: var(--muted); font-size: 14px; }

/* ---------- Страница заказа ---------- */
.order-meta { color: var(--muted); font-size: 13px; margin: -2px 0 18px; }
.status-card { display: flex; align-items: center; justify-content: space-between; gap: 14px; background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 16px 18px; margin-bottom: 20px; }
.status-card .sl { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.status-card .sv { font-weight: 650; font-size: 16px; }
.status-card .ss { font-size: 13px; color: var(--muted); }

.progress { display: flex; flex-direction: column; }
.pstep { display: flex; align-items: flex-start; gap: 14px; position: relative; padding-bottom: 24px; }
.pstep:last-child { padding-bottom: 0; }
.pstep::before { content: ""; position: absolute; left: 14px; top: 30px; bottom: 0; width: 2px; background: var(--line-2); }
.pstep:last-child::before { display: none; }
.pstep .mark { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; border: 2px solid var(--line-2); background: var(--card); color: var(--muted); font-size: 13px; z-index: 1; transition: all .25s ease; }
.pstep .body { flex: 1; }
.pstep .body .t { font-weight: 600; font-size: 15px; }
.pstep .body .s { font-size: 13px; color: var(--muted); }
.pstep .ts { font-size: 12px; color: var(--muted); font-family: var(--mono); white-space: nowrap; }
.pstep.done .mark { background: var(--grad-ok); border-color: transparent; color: #04140d; }
.pstep.done::before { background: var(--ok-2); }
.pstep.active .mark { border-color: var(--accent); }
.pstep.active .body .t { color: var(--text); }
.pstep.active .mark .spin { width: 14px; height: 14px; border: 2px solid rgba(91,140,255,.35); border-top-color: var(--accent); border-radius: 50%; animation: spin .8s linear infinite; }
.pstep.todo .body .t { color: var(--muted); }
.info-note { display: flex; gap: 10px; align-items: flex-start; background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 13px 15px; color: var(--muted); font-size: 13px; margin-top: 18px; }
.info-note .i { color: var(--accent-2); }

/* ---------- Успех ---------- */
.success-hero {
    position: relative; overflow: hidden; text-align: center; border-radius: var(--radius);
    padding: 34px 24px 30px; margin-bottom: 18px;
    background: radial-gradient(120% 120% at 50% -10%, rgba(52,211,153,.22), transparent 55%), linear-gradient(180deg, rgba(16,185,129,.10), rgba(16,185,129,.02));
    border: 1px solid rgba(52,211,153,.32);
}
.success-hero .spark { position: absolute; width: 4px; height: 4px; border-radius: 50%; background: #b8f5dd; opacity: .7; }
.check {
    width: 88px; height: 88px; border-radius: 50%; margin: 6px auto 18px; position: relative;
    background: var(--grad-ok); display: grid; place-items: center;
    box-shadow: 0 0 0 8px rgba(52,211,153,.12), 0 18px 40px -10px rgba(16,185,129,.7);
    animation: pop .45s cubic-bezier(.18,.9,.32,1.4);
}
.check svg { width: 44px; height: 44px; stroke: #04140d; }
@keyframes pop { 0%{transform:scale(.3);opacity:0;} 100%{transform:scale(1);opacity:1;} }
.success-hero h1 { margin: 0 0 .2em; }
.amount-big { font-size: clamp(26px, 6vw, 36px); font-weight: 750; letter-spacing: -.02em; margin-top: 8px; }
.amount-big .cur { color: var(--ok); }
.tx-box { display: flex; align-items: center; justify-content: space-between; gap: 12px; background: rgba(0,0,0,.35); border: 1px solid rgba(52,211,153,.25); border-radius: 12px; padding: 12px 14px; margin: 18px auto 0; max-width: 480px; text-align: left; }
.tx-box .txk { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.tx-box .txv { font-family: var(--mono); font-size: 12.5px; word-break: break-all; }
.copy-btn { flex: none; background: transparent; border: 1px solid var(--line-2); color: var(--text-2); border-radius: 9px; padding: 8px 10px; cursor: pointer; font-size: 13px; }
.copy-btn:hover { border-color: var(--ok); color: var(--ok); }

.checklist { margin: 6px 0 4px; }
.cl-row { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--line); }
.cl-row:last-child { border-bottom: none; }
.cl-row .cm { width: 24px; height: 24px; border-radius: 50%; flex: none; display: grid; place-items: center; background: var(--grad-ok); color: #04140d; }
.cl-row .ct { flex: 1; font-size: 14.5px; font-weight: 550; }
.cl-row .ctime { font-size: 12px; color: var(--muted); font-family: var(--mono); }

.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 18px; }
.actions .btn { flex: 1 1 200px; }

/* Карточка-призыв оставить отзыв */
.review-card { display: flex; align-items: center; gap: 16px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 16px 18px; margin-top: 16px; }
.review-card .rico { width: 44px; height: 44px; border-radius: 12px; flex: none; display: grid; place-items: center; background: var(--grad-soft); border: 1px solid rgba(139,92,246,.25); font-size: 20px; }
.review-card h3 { margin: 0 0 2px; font-size: 14.5px; }
.review-card p { margin: 0; font-size: 12.5px; color: var(--muted); }
.stars { margin-left: auto; color: #ffc24b; font-size: 18px; letter-spacing: 2px; white-space: nowrap; }

/* ---------- Статусные коробки ---------- */
.error { color: var(--err); }
.error-box { background: var(--err-bg); border: 1px solid rgba(255,107,107,.35); border-radius: var(--radius-sm); padding: 14px; color: #ffc9c9; }
.notice { background: var(--warn-bg); border: 1px solid rgba(255,194,75,.35); border-radius: var(--radius-sm); padding: 14px; color: #ffe2ad; }
.success-box { background: var(--ok-bg); border: 1px solid rgba(52,211,153,.35); border-radius: var(--radius-sm); padding: 16px; margin: 16px 0; }
.key { display: block; word-break: break-all; background: var(--bg-2); border: 1px solid var(--line); border-radius: 8px; padding: 12px; font-family: var(--mono); font-size: 13px; margin: 8px 0; }
.spinner { width: 26px; height: 26px; border: 3px solid var(--line-2); border-top-color: var(--accent); border-radius: 50%; animation: spin .9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Появление ---------- */
.reveal { opacity: 0; transform: translateY(12px); animation: rise .55s ease forwards; }
.reveal:nth-child(2){animation-delay:.06s;} .reveal:nth-child(3){animation-delay:.12s;}
.reveal:nth-child(4){animation-delay:.18s;} .reveal:nth-child(5){animation-delay:.24s;}
@keyframes rise { to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce){ .reveal{animation:none;opacity:1;transform:none;} }

/* ============================================================
   Админка (сохранённые классы)
   ============================================================ */
.grid { width: 100%; border-collapse: collapse; margin-top: 14px; font-size: 14px; }
.grid th, .grid td { text-align: left; padding: 10px 11px; border-bottom: 1px solid var(--line); }
.grid th { color: var(--muted); font-weight: 600; }
.grid a { color: var(--accent-2); text-decoration: none; }
.kv { width: 100%; border-collapse: collapse; font-size: 14px; }
.kv td { padding: 9px 10px; border-bottom: 1px solid var(--line); }
.kv td:first-child { color: var(--muted); width: 220px; }
.filterbar { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-top: 8px; }
.filterbar input { width: auto; flex: 1; min-width: 200px; }
.filterbar select { width: auto; }
.badge { padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; display: inline-block; }
.st-COMPLETED { background: var(--ok-bg); color: var(--ok); }
.st-FAILED, .st-CANCELLED { background: var(--err-bg); color: var(--err); }
.st-PROCESSING, .st-SENDING, .st-BLOCKCHAIN_PENDING { background: rgba(91,140,255,.16); color: var(--accent-2); }
.st-WAITING_PAYMENT { background: var(--warn-bg); color: var(--warn); }
.badge.st-MANUAL_REVIEW { background: var(--warn-bg); color: var(--warn); }
.warn { color: var(--warn); }
.inline { display: inline-flex; gap: 10px; align-items: center; margin: 14px 0; flex-wrap: wrap; }
.chk { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); }
.chk input { width: auto; }
.lvl-error td { color: #ffc9c9; }
.lvl-warning td { color: #ffe2b0; }
.manual { margin: 1.2rem 0; padding: 1rem; border: 1px solid rgba(255,194,75,.3); border-radius: var(--radius-sm); background: var(--warn-bg); }
.manual input[type=text] { min-width: 280px; }
.break { word-break: break-all; }
.steps { margin: 0 0 1rem 1.2rem; color: var(--muted); line-height: 1.6; }

/* ---------- Адаптив ---------- */
@media (max-width: 920px) {
    .hero { grid-template-columns: 1fr; text-align: center; }
    .hero p.lead { margin-left: auto; margin-right: auto; }
    .hero-feats { justify-content: center; }
    .hero-cta { justify-content: center; }
    .hero-art { min-height: 200px; margin-top: 8px; }
    .hero-art svg { max-width: 300px; }
}
@media (max-width: 760px) {
    .how { grid-template-columns: repeat(2, 1fr); }
    .how-step:not(:last-child)::after { display: none; }
    .trust-strip { grid-template-columns: 1fr 1fr; }
    .form-row { grid-template-columns: 1fr; }
    .mainnav { display: none; }
}
@media (max-width: 460px) {
    .how { grid-template-columns: 1fr; }
    .trust-strip { grid-template-columns: 1fr; }
    .actions .btn { flex: 1 1 100%; }
    .hero-feats { flex-direction: column; align-items: flex-start; gap: 14px; width: fit-content; margin-left: auto; margin-right: auto; text-align: left; }
    .review-card { flex-wrap: wrap; }
    .stars { margin-left: 0; }
}

/* ---------- Блог / статьи ---------- */
.footnav { display: flex; gap: 18px; justify-content: center; flex-wrap: wrap; margin-bottom: 12px; }
.footnav a { color: var(--muted); text-decoration: none; }
.footnav a:hover { color: var(--accent-2); }
.blog-list { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.post-card { display: block; text-decoration: none; color: inherit; background: linear-gradient(180deg,var(--card-2),var(--card)); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; box-shadow: var(--shadow); transition: border-color .15s, transform .15s; }
.post-card:hover { border-color: var(--accent); transform: translateY(-2px); }
.post-card h2, .post-card h3 { font-size: 18px; margin: 4px 0 6px; }
.post-card p { color: var(--text-2); font-size: 14px; }
.post-card .read { color: var(--accent-2); font-weight: 600; font-size: 14px; }
.article { max-width: 760px; }
.article-body { color: var(--text-2); font-size: 15.5px; line-height: 1.78; }
.article-body h2 { margin: 1.5em 0 .4em; font-size: 21px; }
.article-body h3 { margin: 1.25em 0 .3em; font-size: 16.5px; color: var(--text); }
.article-body p { margin: 0 0 1em; }
.article-body code { background: var(--bg-2); border: 1px solid var(--line); border-radius: 6px; padding: 1px 6px; font-family: var(--mono); font-size: 13px; }
.article-body pre { background: var(--bg-2); border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px; overflow-x: auto; font-family: var(--mono); font-size: 13px; line-height: 1.55; color: var(--text-2); margin: 0 0 1.2em; }
.article-body pre code { background: none; border: none; padding: 0; }
.hr { border: none; border-top: 1px solid var(--line); margin: 24px 0; }
@media (max-width: 760px) { .blog-list { grid-template-columns: 1fr; } }

/* ---------- Гайд «где взять ссылку Coinbase» ---------- */
.guide { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; align-items: center; margin-top: 8px; }
.num { width: 24px; height: 24px; border-radius: 50%; background: var(--grad); color: #fff; font-size: 12px; font-weight: 700; display: inline-grid; place-items: center; flex: none; }
.num.light { background: rgba(255,255,255,.25); }
/* мокап окна OpenRouter (светлый, как настоящий) */
.orcard { background: #f4f5f7; border: 1px solid #e2e4e9; border-radius: 14px; overflow: hidden; color: #1c1f26; box-shadow: var(--shadow); }
.orcard-bar { display: flex; align-items: center; gap: 6px; padding: 9px 12px; background: #e9eaee; border-bottom: 1px solid #e0e2e7; }
.orcard-bar .d { width: 10px; height: 10px; border-radius: 50%; }
.orcard-bar .dr { background: #ff5f57; } .orcard-bar .dy { background: #febc2e; } .orcard-bar .dg { background: #28c840; }
.orurl { margin-left: 8px; font-size: 11px; color: #6b7280; background: #fff; border: 1px solid #e2e4e9; border-radius: 6px; padding: 3px 9px; }
.orcard-body { padding: 16px; }
.orline { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.orh { font-weight: 700; font-size: 15px; }
.orcrypto { margin-left: auto; display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: #374151; }
.orswitch { width: 38px; height: 22px; border-radius: 999px; background: #6d5cff; position: relative; display: inline-block; }
.orswitch i { position: absolute; top: 2px; right: 2px; width: 18px; height: 18px; border-radius: 50%; background: #fff; }
.oramount { display: flex; align-items: center; gap: 10px; background: #fff; border: 1px solid #e2e4e9; border-radius: 10px; padding: 11px 12px; margin-bottom: 10px; }
.oramount-label { background: #eef0f3; border-radius: 8px; padding: 4px 11px; font-size: 13px; font-weight: 600; }
.oramount-val { margin-left: auto; font-weight: 600; color: #6b7280; }
.ortotal { display: flex; justify-content: space-between; font-size: 13px; color: #6b7280; margin-bottom: 14px; }
.ortotal b { color: #1c1f26; }
.orbtn { background: #6d5cff; color: #fff; border-radius: 10px; padding: 12px; text-align: center; font-weight: 600; display: flex; align-items: center; justify-content: center; gap: 8px; }
.orafter { margin-top: 12px; font-size: 12.5px; color: #1e3a5f; display: flex; align-items: center; gap: 8px; background: #eaf2ff; border: 1px solid #cfe0fb; border-radius: 10px; padding: 10px 12px; }
.guide-steps { list-style: none; margin: 0; padding: 0; }
.guide-steps li { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 14px; font-size: 14.5px; color: var(--text-2); }
.guide-steps b { color: var(--text); }
.guide-steps code { background: var(--bg-2); border: 1px solid var(--line); border-radius: 6px; padding: 1px 6px; font-family: var(--mono); font-size: 12px; word-break: break-all; }
@media (max-width: 760px) { .guide { grid-template-columns: 1fr; gap: 20px; } }

/* ---------- Подсказка «где взять ссылку» у поля + стрелка к форме ---------- */
.hint-details { margin-top: 4px; }
.hint-details summary { list-style: none; cursor: pointer; font-size: 13px; color: var(--accent-2); font-weight: 600; display: inline-flex; align-items: center; gap: 6px; }
.hint-details summary::-webkit-details-marker { display: none; }
.hint-details summary::before { content: "?"; width: 16px; height: 16px; border-radius: 50%; background: var(--grad-soft); border: 1px solid rgba(139,92,246,.4); display: inline-grid; place-items: center; font-size: 11px; }
.hint-details[open] summary { margin-bottom: 8px; }
.mini-steps { margin: 0 0 8px; padding-left: 20px; color: var(--muted); font-size: 13px; line-height: 1.7; }
.mini-steps b { color: var(--text-2); }
.hint-link { font-size: 13px; font-weight: 600; }
.jump-arrow { animation: nudge 1.5s ease-in-out infinite; }
@keyframes nudge { 0%,100% { transform: translateY(0); } 50% { transform: translateY(6px); } }

/* Блик-«стекло» по основным кнопкам */
.btn:not(.secondary):not(.ghost)::after {
    content: ""; position: absolute; top: 0; left: -60%; width: 45%; height: 100%;
    background: linear-gradient(100deg, transparent, rgba(255,255,255,.45), transparent);
    transform: skewX(-20deg); animation: sheen 3.4s ease-in-out infinite; pointer-events: none;
}
@keyframes sheen { 0% { left: -60%; } 55%,100% { left: 130%; } }

/* Парящая hero-карта + дышащее свечение + мерцающие искры */
.hero-art svg { animation: float 5.5s ease-in-out infinite; }
@keyframes float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
.hero-art .glow { animation: breathe 4.5s ease-in-out infinite; }
@keyframes breathe { 0%,100% { opacity: .7; transform: scale(1); } 50% { opacity: 1; transform: scale(1.08); } }
.spk { animation: twinkle 2.2s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes twinkle { 0%,100% { opacity: .25; transform: scale(.7); } 50% { opacity: 1; transform: scale(1.15); } }

@media (prefers-reduced-motion: reduce) {
    .jump-arrow, .btn::after, .hero-art svg, .hero-art .glow, .spk, .pulse,
    .gradtext, .cardbadge, #coinbase_link, .how-step .n { animation: none !important; }
}

/* Переливание градиента в слове OpenRouter */
.gradtext { background-size: 220% auto; animation: flow 5s linear infinite; }
@keyframes flow { 0% { background-position: 0% center; } 100% { background-position: 220% center; } }

/* Пульс бейджа +1.05 USD на карте */
.cardbadge { animation: badgepulse 1.9s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes badgepulse { 0%,100% { opacity: .8; } 50% { opacity: 1; transform: scale(1.07); } }

/* Мягкое свечение поля ссылки */
#coinbase_link { animation: inputglow 2.6s ease-in-out infinite; }
#coinbase_link:focus { animation: none; }
@keyframes inputglow { 0%,100% { box-shadow: 0 0 0 0 rgba(139,92,246,0); } 50% { box-shadow: 0 0 0 3px rgba(139,92,246,.16); } }

/* Всплывающие номера в «Как это работает» */
.how-step .n { animation: popn 2.4s ease-in-out infinite; }
.how-step:nth-child(2) .n { animation-delay: .3s; }
.how-step:nth-child(3) .n { animation-delay: .6s; }
.how-step:nth-child(4) .n { animation-delay: .9s; }
@keyframes popn { 0%,100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-3px) scale(1.08); } }

/* ---------- Единый ритм секций на контентных страницах ---------- */
.hero.reveal { margin-bottom: 30px; }
section.reveal:not(.card) { margin-bottom: 28px; }
.section-title { margin-top: 4px; }

/* ---------- Единая ширина блоков на главной (выравнивание краёв) ---------- */
.home .card { max-width: 100%; }            /* все карточки = ширина колонки (980px) */
.home #about p { max-width: 820px; }        /* читабельная длина строки в SEO-тексте */
.home .hero { padding-top: 8px; }

/* ---------- Единые линейные иконки (вместо эмодзи) ---------- */
.hero-feat .fic, .trust-item .ic { color: var(--accent-2); }
.hero-feat .fic svg, .trust-item .ic svg { width: 21px; height: 21px; display: block; }

/* ---------- Иконки в строке формы / на экране успеха ---------- */
.terms .ti { width: 14px; height: 14px; vertical-align: -2px; opacity: .7; margin-right: 4px; }
.btn .star-ic { width: 16px; height: 16px; vertical-align: -3px; margin-right: 5px; }
.review-card .rico { color: var(--violet); }
.review-card .rico svg { width: 22px; height: 22px; display: block; }

/* ---------- Бегущая строка реальных пополнений ---------- */
.ticker { overflow: hidden; border: 1px solid var(--line); border-radius: 999px; background: var(--card-2); padding: 11px 0; margin-bottom: 28px;
    -webkit-mask: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
.ticker-track { display: inline-flex; gap: 36px; white-space: nowrap; will-change: transform; animation: tickermove 34s linear infinite; padding-left: 36px; }
.tick { display: inline-flex; align-items: center; gap: 9px; color: var(--text-2); font-size: 13.5px; font-weight: 500; }
.tdot { width: 7px; height: 7px; border-radius: 50%; background: #34d399; box-shadow: 0 0 0 3px rgba(52,211,153,.18); flex: none; }
@keyframes tickermove { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.ticker:hover .ticker-track { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .ticker-track { animation: none; } }

/* ---------- Форма ввода суммы (прямой выкуп Digiseller) ---------- */
.buy-card { text-align: center; }
.buyform { max-width: 420px; margin: 18px auto 0; }
.amount-field { display: flex; align-items: center; justify-content: center; gap: 6px;
    background: var(--bg-2); border: 1px solid var(--line); border-radius: 16px; padding: 14px 20px; transition: border-color .15s, box-shadow .15s; }
.amount-field:focus-within { border-color: var(--accent); box-shadow: 0 0 0 4px rgba(99,102,241,.18); }
.amount-field .cur { font-size: 34px; font-weight: 800; color: var(--muted); }
.amount-field input { width: 150px; border: none; background: none; outline: none; color: var(--text);
    font-size: 44px; font-weight: 800; text-align: center; -moz-appearance: textfield; }
.amount-field input::-webkit-outer-spin-button, .amount-field input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 9px; margin: 16px 0 18px; }
.chip { background: var(--card-2); border: 1px solid var(--line); color: var(--text-2); border-radius: 999px;
    padding: 9px 18px; font-size: 14px; font-weight: 600; cursor: pointer; transition: all .14s; }
.chip:hover { border-color: var(--accent); color: var(--text); }
.chip.on { background: var(--grad-soft); border-color: var(--accent); color: #fff; }
.btn.block { width: 100%; }

/* ---------- Форма настроек в админке ---------- */
.setform label { display: block; margin: 12px 0; font-size: 13.5px; color: var(--text-2); font-weight: 600; }
.setform label input { display: block; width: 100%; margin-top: 6px; padding: 10px 12px; border-radius: 10px;
    border: 1px solid var(--line); background: var(--bg-2); color: var(--text); font-size: 14px; font-weight: 400; }
.setform label input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(99,102,241,.15); }
.setform h2 { font-size: 16px; margin: 22px 0 6px; }
.setform .ok { color: #34d399; }
.setform button { margin-top: 18px; }

/* ---------- Поле ссылки Coinbase в форме выкупа ---------- */
.buy-link { max-width: 420px; margin: 4px auto 0; text-align: left; }
.buy-link label { display: block; font-size: 13px; font-weight: 600; color: var(--text-2); margin-bottom: 6px; }
.buy-link input { width: 100%; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line);
    background: var(--bg-2); color: var(--text); font-size: 14px; }
.buy-link input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(99,102,241,.15); }
.buy-link .hint { font-size: 12px; margin-top: 7px; color: var(--muted); }
.buy-link .hint a { color: var(--accent-2); }
.buyform .btn.block { margin-top: 16px; }

/* ---------- Предупреждение о несовпадении суммы в форме выкупа ---------- */
.buy-warn { max-width: 420px; margin: 14px auto 0; padding: 11px 14px; border-radius: 12px;
    background: rgba(245,158,11,.10); border: 1px solid rgba(245,158,11,.35); color: #fcd9a6;
    font-size: 13.5px; line-height: 1.45; text-align: left; }
.buy-warn b { color: #fff; }