/* VioletRoom V2.5.3 — guided money UX */

:root { --vr-focus: color-mix(in srgb, var(--green) 68%, white); }
.button:disabled, .input:disabled { opacity:.48; cursor:not-allowed; transform:none !important; }

/* Finance / payouts */
.vr-payout-page { max-width:1240px; }
.vr-finance-hero { display:flex; justify-content:space-between; align-items:center; gap:24px; padding:30px; border:1px solid var(--line); border-radius:28px; background:radial-gradient(circle at 8% 20%,var(--green-soft),transparent 34%),radial-gradient(circle at 90% 20%,var(--purple-soft),transparent 32%),var(--surface); box-shadow:var(--shadow-soft); }
.vr-finance-hero h1 { margin:4px 0 8px; font-size:clamp(30px,4vw,48px); letter-spacing:-.045em; line-height:1.03; }
.vr-finance-hero p { margin:0; max-width:700px; color:var(--muted); }
.vr-finance-hero-badge { min-width:190px; display:grid; gap:2px; padding:18px 20px; border:1px solid color-mix(in srgb,var(--green) 28%,var(--line)); border-radius:20px; background:var(--green-soft); }
.vr-finance-hero-badge span { color:var(--green); font-size:11px; font-weight:900; letter-spacing:.14em; }
.vr-finance-hero-badge strong { font-size:24px; }
.vr-finance-hero-badge small { color:var(--muted); }
.vr-money-summary { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }
.vr-money-summary article { min-height:124px; display:flex; flex-direction:column; justify-content:center; padding:20px; border:1px solid var(--line); border-radius:20px; background:var(--surface); box-shadow:var(--shadow-soft); }
.vr-money-summary article.is-available { border-color:color-mix(in srgb,var(--green) 38%,var(--line)); background:linear-gradient(145deg,var(--surface),var(--green-soft)); }
.vr-money-summary span,.vr-money-summary small { color:var(--muted); font-size:12px; }
.vr-money-summary strong { margin:3px 0; font-size:28px; letter-spacing:-.035em; }
.vr-payout-onboarding .panel-heading { align-items:flex-start; }
.vr-stepper { margin-top:20px; display:grid; gap:8px; }
.vr-step { display:grid; grid-template-columns:38px 1fr 28px; gap:12px; align-items:center; padding:14px; border:1px solid var(--line); border-radius:15px; background:var(--surface-2); }
.vr-step > span { width:34px; height:34px; display:grid; place-items:center; border-radius:50%; background:var(--surface-3); font-weight:900; }
.vr-step div { display:grid; gap:2px; }
.vr-step small { color:var(--muted); }
.vr-step > b { color:var(--muted); font-size:20px; text-align:center; }
.vr-step.is-done { border-color:color-mix(in srgb,var(--green) 26%,var(--line)); }
.vr-step.is-done > span,.vr-step.is-done > b { color:#07140d; background:var(--green); }
.vr-step.is-current { border-color:color-mix(in srgb,var(--purple) 35%,var(--line)); }
.vr-step.is-current > span { color:#fff; background:var(--purple); }
.vr-inline-guidance { display:flex; align-items:center; gap:12px; margin-top:16px; padding:13px 14px; border:1px solid color-mix(in srgb,var(--green) 24%,var(--line)); border-radius:14px; background:var(--green-soft); }
.vr-inline-guidance.warning { border-color:color-mix(in srgb,var(--warning) 45%,var(--line)); background:color-mix(in srgb,var(--warning) 10%,var(--surface)); }
.vr-inline-guidance > div { display:grid; flex:1; }
.vr-inline-guidance span { color:var(--muted); font-size:12px; }
.vr-payout-grid { display:grid; grid-template-columns:minmax(0,1.35fr) minmax(300px,.65fr); gap:12px; align-items:start; }
.vr-network-badge { padding:7px 10px; border-radius:999px; color:var(--green); background:var(--green-soft); border:1px solid color-mix(in srgb,var(--green) 28%,var(--line)); font-size:11px; font-weight:900; letter-spacing:.08em; }
.vr-wallet-current { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:12px; margin:18px 0; padding:15px; border:1px solid color-mix(in srgb,var(--green) 34%,var(--line)); border-radius:16px; background:var(--green-soft); }
.vr-wallet-current > div { min-width:0; display:grid; gap:2px; }
.vr-wallet-current code { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.vr-wallet-current small,.vr-wallet-current span { color:var(--muted); font-size:11px; }
.vr-state-icon { width:34px; height:34px; display:grid; place-items:center; border-radius:50%; font-weight:900; background:var(--purple); color:#fff; }
.vr-state-icon.success { background:var(--green); color:#07140d; }
.vr-wallet-pending { margin-top:18px; padding:18px; border:1px solid color-mix(in srgb,var(--warning) 42%,var(--line)); border-radius:18px; background:color-mix(in srgb,var(--warning) 7%,var(--surface)); }
.vr-wallet-pending-top { display:flex; align-items:start; justify-content:space-between; gap:12px; }
.vr-wallet-pending h3 { margin:3px 0 12px; }
.vr-wallet-pending > code { display:block; padding:12px; border-radius:11px; background:var(--surface-2); overflow-wrap:anywhere; }
.vr-wallet-pending p { color:var(--muted); font-size:12px; }
.vr-countdown { display:flex; justify-content:space-between; align-items:end; gap:14px; margin:18px 0 8px; }
.vr-countdown span { color:var(--muted); font-size:12px; }
.vr-countdown strong { font-size:20px; }
.vr-progress-track { height:8px; overflow:hidden; border-radius:999px; background:var(--surface-3); }
.vr-progress-track i { display:block; width:0; height:100%; border-radius:inherit; background:linear-gradient(90deg,var(--green),var(--purple)); transition:width .5s ease; }
.vr-guided-form { margin-top:18px; border:1px solid var(--line); border-radius:16px; overflow:hidden; }
.vr-guided-form > summary { list-style:none; display:flex; justify-content:space-between; gap:12px; padding:15px 16px; cursor:pointer; font-weight:850; background:var(--surface-2); }
.vr-guided-form > summary::-webkit-details-marker { display:none; }
.vr-guided-form > summary span { color:var(--green); font-size:12px; }
.vr-guide-steps { display:grid; gap:8px; padding:16px 16px 0; }
.vr-guide-steps > div { display:grid; grid-template-columns:30px 1fr; gap:10px; align-items:start; }
.vr-guide-steps b { width:28px; height:28px; display:grid; place-items:center; border-radius:9px; background:var(--purple-soft); color:var(--purple); }
.vr-guide-steps span { display:grid; }
.vr-guide-steps small { color:var(--muted); }
.vr-wallet-form { padding:16px; }
.vr-field-help { margin-top:-4px; color:var(--muted); font-size:11px; }
.vr-security-note { display:flex; gap:10px; padding:13px; border-radius:13px; border:1px solid var(--line); background:var(--surface-2); }
.vr-security-note .icon { flex:0 0 auto; color:var(--green); }
.vr-security-note > div { display:grid; }
.vr-security-note span { color:var(--muted); font-size:11px; }
.vr-withdraw-card { position:sticky; top:92px; }
.vr-withdraw-balance { display:grid; gap:2px; margin:16px 0; padding:18px; border-radius:18px; background:linear-gradient(145deg,var(--green-soft),var(--surface-2)); }
.vr-withdraw-balance span { color:var(--muted); font-size:12px; }
.vr-withdraw-balance strong { font-size:34px; letter-spacing:-.04em; }
.vr-withdraw-balance small { font-size:12px; color:var(--muted); }
.vr-minimum-progress { display:grid; gap:8px; margin-bottom:16px; }
.vr-minimum-progress > div:first-child { display:flex; justify-content:space-between; gap:10px; font-size:12px; color:var(--muted); }
.vr-minimum-progress strong { color:var(--text); }
.vr-blocker { display:grid; gap:2px; margin:14px 0; padding:13px; border-radius:13px; border:1px solid color-mix(in srgb,var(--warning) 35%,var(--line)); background:color-mix(in srgb,var(--warning) 7%,var(--surface)); }
.vr-blocker span { color:var(--muted); font-size:11px; }
.vr-money-input { position:relative; }
.vr-money-input > span { position:absolute; left:13px; top:50%; z-index:1; transform:translateY(-50%); color:var(--muted); font-weight:800; }
.vr-money-input .input { padding-left:58px; }
.vr-payout-destination { display:flex; justify-content:space-between; gap:12px; padding:11px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); font-size:12px; }
.vr-payout-destination span { color:var(--muted); }
.vr-payout-destination strong { max-width:190px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.vr-card-footnote { margin:12px 0 0; color:var(--muted); font-size:11px; }

/* Buy TK */
.vr-buy-card { overflow:hidden; background:radial-gradient(circle at 100% 0,var(--purple-soft),transparent 36%),var(--surface) !important; }
.vr-buy-head { display:flex; justify-content:space-between; align-items:start; gap:15px; }
.vr-buy-head h2 { margin:3px 0; }
.vr-buy-head p { margin:0 0 15px; color:var(--muted); font-size:12px; }
.vr-token-orb { width:74px; height:74px; flex:0 0 auto; display:grid; place-items:center; align-content:center; border-radius:24px; background:linear-gradient(145deg,var(--purple),var(--green)); color:white; box-shadow:0 16px 30px rgba(112,63,235,.22); }
.vr-token-orb span { font-size:10px; font-weight:900; letter-spacing:.12em; }
.vr-token-orb strong { font-size:15px; }
.vr-token-packages { display:grid; grid-template-columns:repeat(2,1fr); gap:8px; }
.vr-token-package { text-align:left; display:grid; gap:2px; padding:12px; border:1px solid var(--line); border-radius:14px; background:var(--surface-2); color:var(--text); transition:.18s ease; }
.vr-token-package:hover { border-color:color-mix(in srgb,var(--purple) 42%,var(--line)); transform:translateY(-1px); }
.vr-token-package.is-selected { border-color:var(--green); box-shadow:0 0 0 3px var(--green-soft); background:linear-gradient(145deg,var(--green-soft),var(--surface-2)); }
.vr-token-package span { font-size:12px; font-weight:900; }
.vr-token-package strong { font-size:20px; }
.vr-token-package small { color:var(--muted); }
.vr-custom-amount { margin-top:5px; }
.vr-custom-amount .vr-money-input .input { padding-left:32px; }
.vr-buy-summary { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.vr-buy-summary > div { padding:11px; border-radius:12px; background:var(--surface-2); display:grid; }
.vr-buy-summary span { color:var(--muted); font-size:10px; }
.vr-buy-summary strong { font-size:13px; }

/* Checkout */
.vr-checkout-page { padding-top:38px; }
.vr-checkout-shell { max-width:1050px; margin:0 auto; display:grid; gap:14px; }
.vr-checkout-head { display:flex; justify-content:space-between; gap:20px; align-items:end; padding:8px 2px; }
.vr-checkout-head h1 { margin:3px 0; font-size:clamp(34px,5vw,54px); letter-spacing:-.05em; }
.vr-checkout-head p { margin:0; color:var(--muted); }
.vr-checkout-order { min-width:150px; display:grid; text-align:right; }
.vr-checkout-order span,.vr-checkout-order small { color:var(--muted); font-size:11px; }
.vr-checkout-order strong { font-size:26px; }
.vr-payment-status { display:grid; grid-template-columns:auto 1fr auto; gap:12px; align-items:center; padding:15px 18px; border:1px solid var(--line); border-radius:17px; background:var(--surface); }
.vr-payment-status-dot { width:12px; height:12px; border-radius:50%; background:var(--muted); box-shadow:0 0 0 6px color-mix(in srgb,var(--muted) 12%,transparent); }
.vr-payment-status div { display:grid; }
.vr-payment-status p { margin:1px 0 0; color:var(--muted); font-size:12px; }
.vr-payment-status.is-success { border-color:color-mix(in srgb,var(--green) 40%,var(--line)); background:var(--green-soft); }
.vr-payment-status.is-success .vr-payment-status-dot { background:var(--green); box-shadow:0 0 0 6px var(--green-soft); }
.vr-payment-status.is-confirming .vr-payment-status-dot,.vr-payment-status.is-waiting .vr-payment-status-dot { background:var(--purple); box-shadow:0 0 0 6px var(--purple-soft); animation:vrPulse 1.7s infinite; }
.vr-payment-status.is-warning { border-color:color-mix(in srgb,var(--warning) 46%,var(--line)); }
.vr-payment-status.is-warning .vr-payment-status-dot { background:var(--warning); }
.vr-payment-status.is-danger { border-color:color-mix(in srgb,var(--danger) 46%,var(--line)); }
.vr-payment-status.is-danger .vr-payment-status-dot { background:var(--danger); }
.vr-auto-refresh { color:var(--muted); font-size:10px; }
@keyframes vrPulse { 50% { transform:scale(.7); opacity:.5; } }
.vr-checkout-grid { display:grid; grid-template-columns:minmax(0,1.4fr) minmax(280px,.6fr); gap:12px; align-items:start; }
.vr-pay-instructions { display:grid; gap:0; padding:0 !important; overflow:hidden; }
.vr-checkout-step { display:grid; grid-template-columns:44px 1fr; gap:14px; padding:20px; border-bottom:1px solid var(--line); }
.vr-checkout-step > span { width:38px; height:38px; display:grid; place-items:center; border-radius:13px; background:var(--purple-soft); color:var(--purple); font-weight:950; }
.vr-checkout-step > div { min-width:0; display:grid; justify-items:start; gap:7px; }
.vr-checkout-step small { color:var(--muted); }
.vr-pay-amount { font-size:clamp(24px,4vw,38px); letter-spacing:-.04em; }
.vr-pay-amount em { font-style:normal; font-size:14px; color:var(--green); }
.vr-base-network { display:inline-flex; padding:7px 12px; border-radius:999px; background:var(--green-soft); color:var(--green); font-size:22px; }
.vr-checkout-step p { margin:0; color:var(--muted); font-size:12px; }
.vr-payment-address { display:block; max-width:100%; padding:12px; border-radius:11px; background:var(--surface-2); overflow-wrap:anywhere; }
.vr-payment-warning { display:flex; gap:11px; margin:16px; padding:14px; border-radius:14px; border:1px solid color-mix(in srgb,var(--warning) 40%,var(--line)); background:color-mix(in srgb,var(--warning) 8%,var(--surface)); }
.vr-payment-warning .icon { flex:0 0 auto; color:var(--warning); }
.vr-payment-warning > div { display:grid; }
.vr-payment-warning span { color:var(--muted); font-size:11px; }
.vr-checkout-side h2 { margin:3px 0 16px; }
.vr-check-list { display:grid; gap:8px; }
.vr-check-list > div { display:grid; grid-template-columns:28px 1fr; gap:9px; align-items:center; padding:10px; border-radius:12px; background:var(--surface-2); }
.vr-check-list b { width:26px; height:26px; display:grid; place-items:center; border-radius:50%; background:var(--green); color:#07140d; }
.vr-check-list span { display:grid; }
.vr-check-list small { color:var(--muted); }
.vr-binance-help { margin-top:14px; border:1px solid var(--line); border-radius:13px; }
.vr-binance-help summary { cursor:pointer; padding:12px; font-weight:800; }
.vr-binance-help ol { margin:0; padding:0 28px 14px 34px; color:var(--muted); font-size:12px; }
.vr-order-id { margin-top:14px; display:grid; gap:5px; color:var(--muted); font-size:10px; }
.vr-order-id code { overflow-wrap:anywhere; }
.vr-partial-payment { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; padding:15px; border:1px solid color-mix(in srgb,var(--warning) 42%,var(--line)); border-radius:16px; background:color-mix(in srgb,var(--warning) 8%,var(--surface)); }
.vr-partial-payment > div { display:grid; padding:10px; border-radius:10px; background:var(--surface); }
.vr-partial-payment span { color:var(--muted); font-size:10px; }
.vr-partial-payment p { grid-column:1/-1; margin:4px 0 0; color:var(--muted); font-size:11px; }
.vr-checkout-success { display:grid; grid-template-columns:auto 1fr auto; gap:14px; align-items:center; padding:18px; border-radius:18px; background:var(--green-soft); border:1px solid color-mix(in srgb,var(--green) 42%,var(--line)); }
.vr-checkout-success > span { width:42px; height:42px; display:grid; place-items:center; border-radius:50%; background:var(--green); color:#07140d; font-size:22px; font-weight:950; }
.vr-checkout-success p { margin:2px 0 0; color:var(--muted); }

/* 2FA */
.vr-2fa-intro { display:grid; grid-template-columns:auto 1fr auto 1fr auto; gap:10px; align-items:center; margin-bottom:16px; padding:13px; border:1px solid var(--line); border-radius:16px; background:var(--surface); }
.vr-2fa-intro > div { display:flex; align-items:center; gap:8px; font-size:12px; font-weight:800; }
.vr-2fa-intro b { width:28px; height:28px; display:grid; place-items:center; border-radius:50%; background:var(--purple); color:#fff; }
.vr-2fa-intro i { height:2px; background:linear-gradient(90deg,var(--purple),var(--green)); }
.vr-2fa-card h2 { margin:4px 0 8px; }
.vr-2fa-card .secret-box { display:grid; grid-template-columns:1fr auto; gap:8px; align-items:center; margin-top:16px; }
.vr-2fa-card .secret-box > span { grid-column:1/-1; }
.vr-2fa-card .secret-box code { overflow-wrap:anywhere; }
.vr-technical-details { margin-top:16px; color:var(--muted); font-size:12px; }
.vr-technical-details summary { cursor:pointer; font-weight:800; color:var(--text); }
.vr-otp-input { text-align:center; font-size:30px; font-weight:900; letter-spacing:.28em; }

/* Contextual help */
.vr-help { position:fixed; z-index:80; right:22px; bottom:22px; }
.vr-help-trigger { display:flex; align-items:center; gap:8px; min-height:46px; padding:8px 14px 8px 8px; border:1px solid color-mix(in srgb,var(--green) 30%,var(--line)); border-radius:999px; color:var(--text); background:color-mix(in srgb,var(--surface) 94%,transparent); backdrop-filter:blur(16px); box-shadow:0 14px 40px rgba(0,0,0,.22); font-weight:850; }
.vr-help-trigger-icon { width:30px; height:30px; display:grid; place-items:center; border-radius:50%; background:linear-gradient(145deg,var(--green),var(--purple)); color:#fff; font-weight:950; }
.vr-help-panel { position:absolute; right:0; bottom:58px; width:min(390px,calc(100vw - 28px)); max-height:min(680px,calc(100vh - 120px)); overflow:auto; padding:18px; border:1px solid var(--line); border-radius:22px; background:color-mix(in srgb,var(--surface) 97%,transparent); backdrop-filter:blur(20px); box-shadow:0 26px 70px rgba(0,0,0,.35); opacity:0; visibility:hidden; transform:translateY(10px) scale(.98); transform-origin:bottom right; transition:.18s ease; }
.vr-help.is-open .vr-help-panel { opacity:1; visibility:visible; transform:none; }
.vr-help-head { display:flex; justify-content:space-between; gap:14px; align-items:start; padding-bottom:12px; border-bottom:1px solid var(--line); }
.vr-help-head h3 { margin:2px 0; font-size:22px; }
.vr-help-head p { margin:0; color:var(--muted); font-size:11px; }
.vr-help-context { display:grid; gap:2px; margin:14px 0 8px; padding:12px; border-radius:13px; background:var(--green-soft); }
.vr-help-context span { color:var(--muted); font-size:11px; }
.vr-help-panel details { border-bottom:1px solid var(--line); }
.vr-help-panel details summary { cursor:pointer; list-style:none; padding:13px 2px; font-weight:800; font-size:13px; }
.vr-help-panel details summary::-webkit-details-marker { display:none; }
.vr-help-panel details summary::after { content:'+'; float:right; color:var(--green); font-size:18px; }
.vr-help-panel details[open] summary::after { content:'−'; }
.vr-help-panel details p { margin:0 0 13px; color:var(--muted); font-size:12px; }
.vr-help-footer { display:flex; justify-content:space-between; gap:12px; align-items:center; margin-top:16px; padding:13px; border-radius:13px; background:var(--surface-2); }
.vr-help-footer > div { display:grid; }
.vr-help-footer span { color:var(--muted); font-size:10px; }

@media (max-width:900px) {
    .vr-money-summary { grid-template-columns:repeat(2,1fr); }
    .vr-payout-grid,.vr-checkout-grid { grid-template-columns:1fr; }
    .vr-withdraw-card { position:static; }
    .vr-finance-hero { align-items:flex-start; }
}
@media (max-width:640px) {
    .vr-finance-hero,.vr-checkout-head { flex-direction:column; align-items:stretch; }
    .vr-finance-hero-badge { min-width:0; }
    .vr-money-summary { grid-template-columns:1fr 1fr; }
    .vr-money-summary article { min-height:105px; padding:15px; }
    .vr-money-summary strong { font-size:22px; }
    .vr-wallet-current { grid-template-columns:auto 1fr; }
    .vr-wallet-current .button { grid-column:1/-1; }
    .vr-wallet-pending-top,.vr-countdown { align-items:flex-start; flex-direction:column; }
    .vr-checkout-order { text-align:left; }
    .vr-payment-status { grid-template-columns:auto 1fr; }
    .vr-auto-refresh { grid-column:2; }
    .vr-partial-payment { grid-template-columns:1fr; }
    .vr-partial-payment p { grid-column:auto; }
    .vr-checkout-success { grid-template-columns:auto 1fr; }
    .vr-checkout-success .button { grid-column:1/-1; }
    .vr-2fa-intro { grid-template-columns:1fr; }
    .vr-2fa-intro i { width:2px; height:12px; margin-left:13px; }
    .vr-token-packages { grid-template-columns:1fr 1fr; }
    .vr-help { right:12px; bottom:76px; }
    .vr-help-trigger > span:last-child { display:none; }
    .vr-help-trigger { padding:7px; }
}

/* Friendly HTTP errors */
.vr-friendly-error { display:grid; gap:18px; padding:32px; text-align:left; }
.vr-friendly-error-code { width:max-content; padding:7px 11px; border-radius:999px; background:var(--purple-soft); color:var(--purple); font-size:11px; font-weight:950; letter-spacing:.12em; }
.vr-friendly-error h1 { margin:4px 0 8px; font-size:clamp(30px,5vw,48px); letter-spacing:-.045em; }
.vr-friendly-error p { margin:0; color:var(--muted); }