/* ─────────────────────────────────────────────────────────────────────────
   RU top-up 样式：购买页 (/topup/ru) 与两个静态回跳结果页共用。

   购买页的状态显隐全部由 body[data-state] 驱动，JS 只改 data-state 与
   textContent；结果页是纯静态 HTML，不带状态机。
   ───────────────────────────────────────────────────────────────────────── */

:root {
    --tp-tint: #FBF1EA;
    --tp-ok: #3E7A4C;
    --tp-ok-bg: #EBF3EC;
    --tp-warn: #9A3412;
    --tp-warn-bg: #FDF0E9;
    --tp-dim: #CFC7BC;
}

* { box-sizing: border-box; }
body { margin: 0; line-height: 1.6; }
h1, h2, p { margin: 0; }

/* ─── SHELL ─── */
.tp-shell {
    max-width: 420px;
    margin: 0 auto;
    padding: 36px 20px 48px;
}
.tp-shell-center {
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.tp-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 26px;
}
.tp-brand-center { justify-content: center; }
.tp-brand-mark {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: block;
}
.tp-brand-name {
    font-family: 'Instrument Serif', Georgia, serif;
    font-size: 1.35rem;
    line-height: 1;
}

.tp-title {
    font-size: 1.7rem;
    font-weight: 400;
    line-height: 1.2;
    margin-bottom: 22px;
}

.tp-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 18px 20px;
}
.tp-card-center {
    text-align: center;
    padding: 36px 24px;
}

.tp-label {
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--text-muted);
    line-height: 1.4;
}

/* ─── ACCOUNT ─── */
.tp-account { margin-bottom: 24px; }
/* 账号两行同构：muted label + 深色值，用户一眼知道每个值是什么 */
.tp-account-row {
    margin-top: 6px;
    color: var(--text-muted);
    font-size: 0.95rem;
    line-height: 1.5;
}
.tp-account-row span {
    color: var(--text);
    font-weight: 600;
    overflow-wrap: anywhere;
}
#tp-lulu-id { letter-spacing: 0.08em; }

/* 付款前的不可逆提示：确认账号、到账方式与求助路径，逐条列出便于扫读 */
.tp-warn {
    list-style: none;
    margin: 12px 0 0;
    padding: 12px 0 0;
    border-top: 1px solid var(--border);
    color: var(--text-muted);
    font-size: 0.82rem;
    line-height: 1.5;
}
.tp-warn li {
    position: relative;
    margin-top: 7px;
    padding-left: 16px;
}
.tp-warn li:first-child { margin-top: 0; }
/* 标准圆点，只把颜色压到最浅，保持条目感又不抢视线 */
.tp-warn li::before {
    content: '•';
    position: absolute;
    left: 2px;
    color: var(--tp-dim);
}
.tp-warn strong {
    color: var(--text);
    font-weight: 600;
}

/* ─── PACKAGES ─── */
.tp-pkgs {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 10px;
}
.tp-pkg {
    position: relative;
    display: block;
    cursor: pointer;
}
.tp-pkg-input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    margin: 0;
}
.tp-pkg-body {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--surface);
    border: 1.5px solid var(--border);
    border-radius: 14px;
    padding: 15px 18px;
    transition: border-color 0.15s, background 0.15s;
}
.tp-pkg-dot {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    border: 1.5px solid var(--tp-dim);
    border-radius: 50%;
    transition: border 0.15s;
}
.tp-pkg-text {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 1px;
    font-size: 1.02rem;
    font-weight: 500;
    line-height: 1.35;
}
/* 赠送说明：bonus 已含在 clovers 总数里，这里只解释「其中 N 个是赠送」 */
.tp-pkg-bonus {
    color: var(--accent);
    font-size: 0.8rem;
    font-weight: 600;
}
.tp-pkg-price {
    font-size: 1.02rem;
    font-weight: 600;
    line-height: 1.35;
    white-space: nowrap;
}
.tp-pkg-input:checked + .tp-pkg-body {
    border-color: var(--accent);
    background: var(--tp-tint);
}
.tp-pkg-input:checked + .tp-pkg-body .tp-pkg-dot { border: 6px solid var(--accent); }
.tp-pkg-input:focus-visible + .tp-pkg-body {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* ─── PAY CTA ─── */
.tp-pay {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    min-height: 54px;
    margin-top: 22px;
    padding: 0 20px;
    background: var(--accent);
    color: #fff;
    border: none;
    border-radius: 14px;
    font-family: inherit;
    font-size: 1.05rem;
    font-weight: 600;
    line-height: 1.3;
    cursor: pointer;
    transition: background 0.2s;
}
.tp-pay:hover:not(:disabled) { background: var(--accent-hover); }
.tp-pay:disabled { opacity: 0.55; cursor: default; }

.tp-error {
    display: none;
    margin-top: 14px;
    padding: 10px 14px;
    background: var(--tp-warn-bg);
    border-radius: 10px;
    color: var(--tp-warn);
    font-size: 0.92rem;
    line-height: 1.5;
}

/* ─── SKELETON ─── */
.tp-sk {
    display: block;
    border-radius: 8px;
    background: linear-gradient(90deg, #EFE9E1, #F7F3ED, #EFE9E1);
    background-size: 200% 100%;
    animation: tp-shimmer 1.2s ease-in-out infinite;
}
.tp-sk-name { width: 55%; height: 18px; margin-top: 10px; }
.tp-sk-id { width: 38%; height: 14px; margin-top: 10px; }
.tp-sk-pkg { height: 56px; border-radius: 14px; margin-top: 10px; }

.tp-spin {
    display: none;
    width: 18px;
    height: 18px;
    border: 2px solid rgba(255, 255, 255, 0.4);
    border-top-color: #fff;
    border-radius: 50%;
    animation: tp-rotate 0.8s linear infinite;
}
body[data-state="creating"] .tp-spin { display: block; }

@keyframes tp-shimmer {
    from { background-position: 200% 0; }
    to { background-position: -200% 0; }
}
@keyframes tp-rotate {
    to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
    .tp-sk { animation: none; }
    .tp-spin { animation-duration: 2.4s; }
}

/* ─── PURCHASE PAGE STATES ─── */
.tp-tool, .tp-blocked { display: none; }
body[data-state="resolving"] .tp-tool,
body[data-state="ready"] .tp-tool,
body[data-state="creating"] .tp-tool,
body[data-state="provider_error"] .tp-tool { display: block; }
body[data-state="missing_id"] .tp-blocked,
body[data-state="account_error"] .tp-blocked,
body[data-state="load_error"] .tp-blocked { display: block; }

/* resolving 显示 skeleton，其余状态显示真实数据 */
body[data-state="resolving"] .tp-live { display: none; }
body:not([data-state="resolving"]) .tp-skeleton { display: none; }

body[data-state="provider_error"] .tp-error { display: block; }

.tp-only { display: none; }
.tp-only h2 {
    font-size: 1.35rem;
    font-weight: 400;
    line-height: 1.3;
    margin-bottom: 10px;
}
body[data-state="missing_id"] .tp-only-missing_id,
body[data-state="account_error"] .tp-only-account_error,
body[data-state="load_error"] .tp-only-load_error { display: block; }

/* ─── STATUS ICON + 结果文案（购买页 blocked 与静态结果页共用）─── */
.tp-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    margin: 0 auto 20px;
    border-radius: 50%;
}
.tp-icon-ok { background: var(--tp-ok-bg); color: var(--tp-ok); }
.tp-icon-fail { background: var(--bg-alt); color: var(--accent); }
.tp-icon-info { background: var(--bg-alt); color: var(--text-muted); }

.tp-card-center h1 {
    font-size: 1.55rem;
    font-weight: 400;
    line-height: 1.25;
    margin-bottom: 12px;
}
.tp-card-center p { margin-bottom: 10px; }
.tp-card-center strong { font-weight: 600; }
.tp-card-center p:last-child { margin-bottom: 0; }
.tp-note {
    color: var(--text-muted);
    font-size: 0.88rem;
}