/*
================================================================================
| ROOBUX — WELCOME EVENT v1.0 | welcome-event.css
================================================================================
| Mobile-first, pixel-perfect, 2026-grade UI.
| Standalone stylesheet — no dependency on main.css.
================================================================================
*/

/* ===== IMPORTS & FONTS ===== */
@import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@400;500;600;700&family=JetBrains+Mono:wght@400;600;700&display=swap');

/* ===== CSS VARIABLES ===== */
:root {
    --c-bg:         #04040A;
    --c-bg1:        #0A0A14;
    --c-bg2:        #111120;
    --c-bg3:        #1A1A2E;
    --c-border:     rgba(255,255,255,0.08);
    --c-border-hov: rgba(0,191,255,0.4);

    --c-primary:    #00BFFF;
    --c-primary-g:  rgba(0,191,255,0.18);
    --c-primary-gd: rgba(0,191,255,0.05);
    --c-accent:     #39FF14;
    --c-accent-g:   rgba(57,255,20,0.15);
    --c-gold:       #FFD700;
    --c-error:      #FF495C;
    --c-error-g:    rgba(255,73,92,0.15);
    --c-warning:    #FFB020;

    --c-txt1:       #F0F2F5;
    --c-txt2:       #A0AEC0;
    --c-txt3:       #5A6A7E;

    --font:         'Rajdhani', system-ui, sans-serif;
    --mono:         'JetBrains Mono', monospace;

    --r-sm:  6px;
    --r-md:  12px;
    --r-lg:  18px;
    --r-xl:  24px;
    --r-2xl: 32px;

    --sp-xs:  4px;
    --sp-sm:  8px;
    --sp-md: 16px;
    --sp-lg: 24px;
    --sp-xl: 32px;
    --sp-2xl:48px;

    --trans-fast:   150ms cubic-bezier(0.4,0,0.2,1);
    --trans-mid:    280ms cubic-bezier(0.4,0,0.2,1);
    --trans-slow:   500ms cubic-bezier(0.23,1,0.32,1);
    --trans-spring: 600ms cubic-bezier(0.34,1.56,0.64,1);

    --nav-bottom-h: 72px;
    --nav-top-h:    64px;
}

/* ===== RESET ===== */
*, *::before, *::after { box-sizing: border-box; margin:0; padding:0; }
html { font-size: 16px; scroll-behavior: smooth; -webkit-font-smoothing: antialiased; }
body {
    font-family: var(--font);
    background: var(--c-bg);
    color: var(--c-txt2);
    min-height: 100vh;
    overflow-x: hidden;
    padding-bottom: calc(var(--nav-bottom-h) + var(--sp-lg));
    opacity: 0;
    transition: opacity 0.5s ease;
}
body.loaded { opacity: 1; }
img, svg { max-width:100%; display:block; }
a { color: var(--c-primary); text-decoration:none; }
strong { color: var(--c-txt1); font-weight:600; }
input, button { font-family: inherit; }

/* ===== PAGE LOADER ===== */
.evt-loader {
    position: fixed; inset:0; z-index:9999;
    background: var(--c-bg);
    display:flex; align-items:center; justify-content:center;
    transition: opacity 0.6s ease, visibility 0.6s ease;
}
.evt-loader.hidden { opacity:0; visibility:hidden; pointer-events:none; }
.evt-loader-inner { position:relative; display:flex; align-items:center; gap: 12px; }
.evt-loader-ring {
    width:48px; height:48px;
    border: 3px solid rgba(0,191,255,0.15);
    border-top-color: var(--c-primary);
    border-radius:50%;
    animation: spin 0.9s linear infinite;
}
.evt-loader-text {
    font-size:2rem; font-weight:700; color: var(--c-txt1); letter-spacing: -0.03em;
}
.evt-loader-text span { color: var(--c-primary); }

/* ===== TOAST ===== */
#evt-toast-container {
    position:fixed; bottom: calc(var(--nav-bottom-h) + 12px); right:16px;
    z-index:9998; display:flex; flex-direction:column; gap:8px;
}
.evt-toast {
    background: var(--c-bg2);
    border: 1px solid var(--c-border);
    border-left: 4px solid var(--c-primary);
    border-radius: var(--r-md);
    padding: 12px 18px;
    color: var(--c-txt1);
    font-size:0.875rem; font-weight:500;
    box-shadow: 0 8px 30px rgba(0,0,0,0.4);
    animation: toastIn 0.35s var(--trans-spring) forwards;
    max-width: 320px;
}
.evt-toast.success { border-left-color: var(--c-accent); }
.evt-toast.error   { border-left-color: var(--c-error); }
.evt-toast.warning { border-left-color: var(--c-warning); }
.evt-toast.out { animation: toastOut 0.3s ease forwards; }
@keyframes toastIn  { from { opacity:0; transform:translateX(100%); } to { opacity:1; transform:translateX(0); } }
@keyframes toastOut { from { opacity:1; transform:translateX(0); } to { opacity:0; transform:translateX(100%); } }

/* ===== TOP NAV (Desktop) ===== */
.evt-topnav {
    display: none;
    position: sticky; top:0; z-index: 100;
    height: var(--nav-top-h);
    background: rgba(4,4,10,0.85);
    backdrop-filter: blur(20px) saturate(1.5);
    border-bottom: 1px solid var(--c-border);
    padding: 0 var(--sp-lg);
}
.evt-topnav-inner {
    max-width:1200px; margin:0 auto;
    display:flex; align-items:center; justify-content:space-between;
    height:100%;
}
.evt-logo {
    font-size:1.5rem; font-weight:700; color: var(--c-txt1); letter-spacing:-0.04em;
}
.evt-logo-r { color: var(--c-primary); }
.evt-nav-badge {
    display:flex; align-items:center; gap:8px;
    background: var(--c-primary-g);
    border: 1px solid var(--c-border-hov);
    border-radius:999px;
    padding: 6px 16px;
    font-size:0.8rem; font-weight:600; color: var(--c-primary);
    letter-spacing:0.05em; text-transform:uppercase;
}
.badge-dot {
    width:7px; height:7px; border-radius:50%;
    background: var(--c-accent);
    animation: glowPulse 2s ease infinite;
    box-shadow: 0 0 8px var(--c-accent);
}
.evt-topnav-right { display:flex; align-items:center; gap:16px; }
.evt-user-name { font-size:0.9rem; font-weight:600; color: var(--c-txt1); }
.btn-ghost-sm {
    padding: 6px 16px;
    border: 1px solid var(--c-border);
    border-radius: var(--r-md);
    font-size:0.8rem; font-weight:600;
    color: var(--c-txt2);
    transition: var(--trans-fast);
    background: transparent;
}
.btn-ghost-sm:hover { border-color: var(--c-primary); color: var(--c-primary); }

/* ===== BOTTOM NAV (Mobile) ===== */
.evt-bottomnav {
    position: fixed; bottom:0; left:0; right:0; z-index:100;
    height: var(--nav-bottom-h);
    background: rgba(10,10,20,0.95);
    backdrop-filter: blur(20px) saturate(1.5);
    border-top: 1px solid var(--c-border);
    display:flex; align-items:center; justify-content:space-around;
    padding: 0 4px;
}
.bnav-item {
    flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:3px; background:none; border:none; cursor:pointer;
    padding: 8px 4px; color: var(--c-txt3);
    transition: var(--trans-mid); border-radius: var(--r-md);
    font-size:1rem;
}
.bnav-item.active, .bnav-item:hover { color: var(--c-primary); }
.bnav-label { font-size:0.65rem; font-weight:600; letter-spacing:0.03em; }
.bnav-center {
    flex: 0 0 56px; width:56px; height:56px; border-radius:50%;
    background: linear-gradient(135deg, var(--c-primary), #0088cc);
    display:flex; align-items:center; justify-content:center;
    font-size:1.3rem;
    box-shadow: 0 0 20px rgba(0,191,255,0.4);
    margin-top:-16px;
    transition: var(--trans-spring);
}
.bnav-center:hover { transform: scale(1.08); }
.bnav-center-inner { display:flex; }

/* ===== CONTAINER ===== */
.evt-container {
    width:100%;
    max-width:1200px;
    margin:0 auto;
    padding: 0 var(--sp-md);
}

/* ===== HERO ===== */
.evt-hero {
    position:relative; overflow:hidden;
    padding: 48px var(--sp-md) 56px;
    text-align:center;
}
.evt-hero-bg {
    position:absolute; inset:0; pointer-events:none; overflow:hidden;
}
.hero-orb {
    position:absolute; border-radius:50%; filter:blur(80px);
    animation: orbFloat 8s ease-in-out infinite;
}
.hero-orb-1 {
    width:300px; height:300px;
    background: radial-gradient(circle, rgba(0,191,255,0.12), transparent 70%);
    top:-100px; left:-60px; animation-delay:0s;
}
.hero-orb-2 {
    width:250px; height:250px;
    background: radial-gradient(circle, rgba(57,255,20,0.08), transparent 70%);
    top:20px; right:-40px; animation-delay:-3s;
}
.hero-orb-3 {
    width:200px; height:200px;
    background: radial-gradient(circle, rgba(255,73,92,0.06), transparent 70%);
    bottom:0; left:30%; animation-delay:-6s;
}
.hero-grid-lines {
    position:absolute; inset:0;
    background-image:
        linear-gradient(rgba(0,191,255,0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0,191,255,0.03) 1px, transparent 1px);
    background-size: 40px 40px;
    mask-image: radial-gradient(ellipse at center, black 20%, transparent 80%);
    animation: panGrid 20s linear infinite;
}
.evt-hero-content { position:relative; z-index:1; }
.evt-hero-badge {
    display:inline-flex; align-items:center; gap:8px;
    background: rgba(255,215,0,0.08);
    border: 1px solid rgba(255,215,0,0.25);
    border-radius:999px; padding: 6px 16px;
    font-size:0.78rem; font-weight:700; color: var(--c-gold);
    letter-spacing:0.05em; text-transform:uppercase; margin-bottom:20px;
    animation: fadeInDown 0.6s var(--trans-slow);
}
.badge-fire { font-size:1rem; }
.badge-live {
    display:flex; align-items:center; gap:5px;
    background: rgba(255,73,92,0.15);
    border-radius:999px; padding: 2px 8px;
    font-size:0.7rem; color: var(--c-error);
}
.live-dot {
    width:6px; height:6px; border-radius:50%;
    background: var(--c-error);
    animation: glowPulse 1s ease infinite;
}
.evt-hero-title {
    font-size: clamp(2rem, 8vw, 4.5rem);
    font-weight:700; color: var(--c-txt1);
    line-height:1.1; letter-spacing:-0.03em;
    margin-bottom:16px;
    animation: fadeInUp 0.7s var(--trans-slow) 0.1s backwards;
}
.gradient-text {
    background: linear-gradient(135deg, var(--c-primary) 0%, var(--c-accent) 60%, var(--c-gold) 100%);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    background-clip: text;
    filter: drop-shadow(0 0 20px rgba(0,191,255,0.4));
}
.evt-hero-subtitle {
    font-size:clamp(0.9rem, 3vw, 1.1rem); color: var(--c-txt2);
    max-width:560px; margin:0 auto 32px; line-height:1.7;
    animation: fadeInUp 0.7s var(--trans-slow) 0.2s backwards;
}
/* Calculator Strip */
.evt-calc-strip {
    display:flex; align-items:center; justify-content:center;
    flex-wrap:wrap; gap:12px;
    background: var(--c-bg2);
    border: 1px solid var(--c-border);
    border-radius: var(--r-xl);
    padding: 16px 24px; margin-bottom: 20px;
    animation: fadeInUp 0.7s var(--trans-slow) 0.3s backwards;
    max-width:520px; margin-left:auto; margin-right:auto;
}
.calc-item { text-align:center; }
.calc-label { display:block; font-size:0.7rem; font-weight:600; color: var(--c-txt3); text-transform:uppercase; letter-spacing:0.05em; margin-bottom:4px; }
.calc-value { display:block; font-size:1.2rem; font-weight:700; color: var(--c-txt1); font-family: var(--mono); }
.calc-value.accent { color: var(--c-accent); text-shadow: 0 0 15px rgba(57,255,20,0.4); }
.calc-value.primary { color: var(--c-primary); text-shadow: 0 0 15px rgba(0,191,255,0.4); }
.calc-arrow { font-size:1.2rem; color: var(--c-txt3); }
/* Range Slider */
.evt-range {
    width:100%; max-width:400px;
    -webkit-appearance:none; appearance:none;
    height:6px; border-radius:999px;
    background: linear-gradient(to right, var(--c-primary) 0%, var(--c-primary) 0%, var(--c-bg3) 0%);
    outline:none; margin: 0 auto; display:block;
    cursor:pointer; margin-bottom:8px;
    animation: fadeInUp 0.7s var(--trans-slow) 0.4s backwards;
}
.evt-range::-webkit-slider-thumb {
    -webkit-appearance:none; appearance:none;
    width:22px; height:22px; border-radius:50%;
    background: var(--c-primary);
    box-shadow: 0 0 12px rgba(0,191,255,0.6);
    border: 3px solid var(--c-bg);
    cursor:pointer;
    transition: var(--trans-spring);
}
.evt-range::-webkit-slider-thumb:hover { transform: scale(1.2); }

/* ===== WALLET STRIP ===== */
.evt-wallet-strip {
    background: var(--c-bg1);
    border-top: 1px solid var(--c-border);
    border-bottom: 1px solid var(--c-border);
    padding: var(--sp-lg) 0;
}
.wallet-strip-grid {
    display:grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}
.wstrip-card {
    display:flex; align-items:center; gap:12px;
    background: var(--c-bg2);
    border: 1px solid var(--c-border);
    border-radius: var(--r-lg);
    padding: 14px 16px;
    transition: var(--trans-mid);
}
.wstrip-card:hover { border-color: var(--c-border-hov); transform:translateY(-2px); }
.wstrip-card.accent-card { border-color: rgba(57,255,20,0.2); background: rgba(57,255,20,0.03); }
.wstrip-icon { font-size:1.4rem; flex-shrink:0; }
.wstrip-label { display:block; font-size:0.7rem; font-weight:600; color: var(--c-txt3); text-transform:uppercase; letter-spacing:0.05em; }
.wstrip-value { display:block; font-size:1rem; font-weight:700; color: var(--c-txt1); font-family: var(--mono); }
.wstrip-value.accent { color: var(--c-accent); }

/* ===== CONTENT GRID ===== */
.evt-content-grid {
    display:grid;
    grid-template-columns: 1fr;
    gap: var(--sp-lg);
    padding-top: var(--sp-lg);
    padding-bottom: var(--sp-lg);
}
.evt-col-left, .evt-col-right { display:flex; flex-direction:column; gap: var(--sp-lg); }

/* ===== CARDS ===== */
.evt-card {
    background: var(--c-bg1);
    border: 1px solid var(--c-border);
    border-radius: var(--r-xl);
    padding: var(--sp-lg);
    position:relative; overflow:hidden;
    transition: var(--trans-mid);
    min-width: 0; /* prevent flex/grid blowout */
}
.evt-card::before {
    content:'';
    position:absolute; inset:0; border-radius: var(--r-xl);
    background: radial-gradient(circle at top left, rgba(0,191,255,0.04), transparent 60%);
    pointer-events:none;
}
.evt-card:hover { border-color: rgba(0,191,255,0.2); }
.evt-card-header {
    display:flex; align-items:center; justify-content:space-between;
    margin-bottom: var(--sp-lg); gap: 8px; flex-wrap:wrap;
}
.evt-card-title { display:flex; align-items:center; gap:10px; }
.evt-card-title h2 {
    font-size:1.1rem; font-weight:700; color: var(--c-txt1); margin:0; letter-spacing:-0.02em;
}
.card-icon { font-size:1.3rem; }
.evt-card-badges { display:flex; gap:6px; flex-wrap:wrap; }
.badge-tag {
    font-size:0.7rem; font-weight:700; letter-spacing:0.05em; text-transform:uppercase;
    padding: 4px 10px; border-radius:999px;
    background: var(--c-primary-g); color: var(--c-primary);
    border: 1px solid rgba(0,191,255,0.3);
}
.badge-tag.accent { background: var(--c-accent-g); color: var(--c-accent); border-color: rgba(57,255,20,0.3); }

/* ===== ELIGIBILITY BOX ===== */
.evt-eligibility-box {
    display:flex; align-items:flex-start; gap:12px;
    background: rgba(255,176,32,0.07);
    border: 1px solid rgba(255,176,32,0.25);
    border-radius: var(--r-md); padding:14px;
    margin-bottom: var(--sp-lg); font-size:0.85rem;
}
.eligibility-icon { font-size:1.2rem; flex-shrink:0; margin-top:2px; }
.evt-eligibility-box strong { color: var(--c-warning); font-size:0.9rem; }
.evt-eligibility-box p { margin:4px 0 0; font-size:0.82rem; color: var(--c-txt2); }
.evt-warning-box {
    display:flex; align-items:center; gap:10px;
    background: var(--c-error-g); border: 1px solid rgba(255,73,92,0.3);
    border-radius: var(--r-md); padding:12px; margin-bottom:var(--sp-lg);
    font-size:0.85rem; color: var(--c-error);
}

/* ===== DEPOSIT STEPS ===== */
.deposit-step { margin-bottom: var(--sp-lg); }
.step-header {
    display:flex; align-items:center; gap:10px; margin-bottom:12px;
}
.step-num {
    width:28px; height:28px; border-radius: var(--r-sm);
    background: var(--c-primary-g); border: 1px solid rgba(0,191,255,0.3);
    color: var(--c-primary); font-family: var(--mono);
    font-size:0.75rem; font-weight:700; letter-spacing:0.05em;
    display:flex; align-items:center; justify-content:center;
    flex-shrink:0;
}
.step-title { font-size:0.9rem; font-weight:600; color: var(--c-txt1); }

/* Amount Presets */
.amount-presets {
    display:grid; grid-template-columns: repeat(4,1fr); gap:8px;
    margin-bottom:12px;
}
.preset-btn {
    padding: 10px 4px; border-radius: var(--r-md);
    border: 1px solid var(--c-border);
    background: var(--c-bg2); color: var(--c-txt2);
    font-size:0.85rem; font-weight:600; cursor:pointer;
    transition: var(--trans-mid);
}
.preset-btn:hover, .preset-btn.selected {
    border-color: var(--c-primary); color: var(--c-primary);
    background: var(--c-primary-gd);
    box-shadow: 0 0 12px rgba(0,191,255,0.15);
    transform: translateY(-2px);
}

/* Amount Input */
.amt-input-wrap {
    display:flex; align-items:center;
    background: var(--c-bg2); border: 1px solid var(--c-border);
    border-radius: var(--r-md); overflow:hidden;
    transition: var(--trans-fast);
    position:relative;
}
.amt-input-wrap:focus-within { border-color: var(--c-primary); box-shadow: 0 0 0 3px rgba(0,191,255,0.1); }
.amt-prefix {
    padding: 0 12px; font-size:1rem; font-weight:700;
    color: var(--c-txt3); background: var(--c-bg3);
    border-right: 1px solid var(--c-border);
    height:100%; display:flex; align-items:center;
    min-height:48px;
}
.amt-input, .evt-input {
    flex:1; width:100%; padding:12px 14px;
    background:transparent; border:none; outline:none;
    color: var(--c-txt1); font-family: var(--mono);
    font-size:1rem; font-weight:600;
}
.evt-input {
    background: var(--c-bg2); border: 1px solid var(--c-border);
    border-radius: var(--r-md); transition: var(--trans-fast);
    color: var(--c-txt1);
}
.evt-input:focus { border-color: var(--c-primary); outline:none; box-shadow: 0 0 0 3px rgba(0,191,255,0.1); }
input[type=number]::-webkit-inner-spin-button { -webkit-appearance:none; }
.btn-max {
    padding: 0 14px; background: var(--c-primary-g);
    border: none; border-left: 1px solid var(--c-border);
    color: var(--c-primary); font-size:0.75rem; font-weight:700;
    letter-spacing:0.05em; cursor:pointer; min-height:48px;
    transition: var(--trans-fast);
}
.btn-max:hover { background: var(--c-primary); color: #000; }

/* Bonus Preview */
.bonus-preview {
    background: linear-gradient(135deg, var(--c-bg2), var(--c-bg3));
    border: 1px solid var(--c-border);
    border-radius: var(--r-md); overflow:hidden;
    margin-top:12px;
    opacity:0; transform:translateY(8px);
    transition: var(--trans-mid);
}
.bonus-preview.visible { opacity:1; transform:translateY(0); }
.bp-row {
    display:flex; justify-content:space-between; align-items:center;
    padding:10px 16px; border-bottom: 1px solid var(--c-border);
    font-size:0.875rem;
}
.bp-row:last-child { border-bottom:none; }
.bp-row.accent-row { background: rgba(57,255,20,0.03); }
.bp-row.total-row { background: rgba(0,191,255,0.04); font-size:0.95rem; }
.text-accent { color: var(--c-accent) !important; }
.text-primary { color: var(--c-primary) !important; }

/* Crypto Selector */
.crypto-selector {
    display:grid; grid-template-columns: repeat(3,1fr); gap:8px;
}
.crypto-opt {
    display:flex; flex-direction:column; align-items:center; gap:5px;
    padding:10px 6px; border-radius: var(--r-md);
    border: 1px solid var(--c-border);
    background: var(--c-bg2); cursor:pointer;
    transition: var(--trans-mid);
    position:relative;
}
.crypto-opt:hover { border-color: var(--c-primary); background: var(--c-primary-gd); }
.crypto-opt.selected {
    border-color: var(--c-primary); background: var(--c-primary-gd);
    box-shadow: 0 0 14px rgba(0,191,255,0.15);
}
.crypto-opt.selected::after {
    content:'✓'; position:absolute; top:4px; right:6px;
    font-size:0.6rem; font-weight:700; color: var(--c-primary);
}
.crypto-opt-icon { font-size:1.4rem; }
.crypto-opt-img {
    width:32px; height:32px; object-fit:contain;
    flex-shrink:0; display:block;
    filter: drop-shadow(0 2px 6px rgba(0,0,0,0.4));
    transition: var(--trans-mid);
}
.crypto-opt:hover .crypto-opt-img,
.crypto-opt.selected .crypto-opt-img {
    transform: scale(1.1);
    filter: drop-shadow(0 2px 10px rgba(0,191,255,0.4));
}
.crypto-opt-icon-fallback { font-size:1.4rem; flex-shrink:0; }
.crypto-opt-sym { font-size:0.7rem; font-weight:700; color: var(--c-txt1); letter-spacing:0.05em; }
.crypto-opt-name { font-size:0.6rem; color: var(--c-txt3); }

/* Crypto Amount Display */
.crypto-amount-display {
    background: var(--c-bg2); border: 1px solid var(--c-border);
    border-radius: var(--r-md); padding:12px 14px; margin-top:10px;
}
.cad-row { display:flex; justify-content:space-between; align-items:center; padding:4px 0; }
.cad-label { font-size:0.78rem; color: var(--c-txt3); font-weight:500; }
.cad-price { font-size:0.85rem; font-weight:600; color: var(--c-txt2); font-family: var(--mono); }
.cad-crypto { font-size:1rem; font-weight:700; color: var(--c-primary); font-family: var(--mono); }

/* Wallet Display */
.wallet-display { margin-top: var(--sp-sm); }
.wallet-addr-box {
    background: var(--c-bg3);
    border: 1px solid rgba(0,191,255,0.25);
    border-radius: var(--r-lg);
    padding: 20px;
    transition: var(--trans-mid);
}
.wallet-addr-box:hover {
    border-color: rgba(0,191,255,0.45);
    box-shadow: 0 0 18px rgba(0,191,255,0.08);
}
.wab-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
    gap: 8px;
}
.wab-label {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--c-primary);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}
.wab-addr {
    display: block;
    font-family: var(--mono);
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--c-txt1);
    word-break: break-all;
    line-height: 1.6;
    background: rgba(0,0,0,0.25);
    border: 1px solid var(--c-border);
    border-radius: var(--r-sm);
    padding: 12px 14px;
    letter-spacing: 0.02em;
}
.btn-copy {
    display:inline-flex; align-items:center; gap:5px;
    padding: 6px 14px; border-radius: var(--r-sm);
    background: var(--c-primary-g); border: 1px solid rgba(0,191,255,0.3);
    color: var(--c-primary); font-size:0.78rem; font-weight:600;
    cursor:pointer; transition: var(--trans-fast);
}
.btn-copy:hover { background: var(--c-primary); color:#000; }
.wallet-warning {
    display:flex; align-items:flex-start; gap:8px;
    background: var(--c-error-g); border: 1px solid rgba(255,73,92,0.2);
    border-radius: var(--r-sm); padding:10px 12px; margin-top:10px;
    font-size:0.8rem; color: var(--c-error);
}

/* TxID input */
.txid-input-wrap { }
.txid-input { width:100%; padding:12px 14px; font-size:0.85rem; }
.txid-hint { font-size:0.75rem; color: var(--c-txt3); margin-top:6px; }
.wd-balance-hint { font-size:0.8rem; color: var(--c-txt3); margin-top:6px; }

/* ===== BUTTONS ===== */
.evt-btn-primary {
    display:inline-flex; align-items:center; justify-content:center; gap:8px;
    padding: 14px 24px; border-radius: var(--r-md);
    background: linear-gradient(135deg, var(--c-primary), #0088cc);
    border:none; color: #000; font-family: var(--font);
    font-size:0.95rem; font-weight:700; cursor:pointer;
    transition: var(--trans-spring);
    box-shadow: 0 4px 20px rgba(0,191,255,0.3);
    position:relative; overflow:hidden; letter-spacing:0.01em;
}
.evt-btn-primary::after {
    content:''; position:absolute; inset:0;
    background: linear-gradient(135deg, transparent 30%, rgba(255,255,255,0.15));
    opacity:0; transition: var(--trans-fast);
}
.evt-btn-primary:hover { transform:translateY(-2px); box-shadow: 0 8px 30px rgba(0,191,255,0.4); }
.evt-btn-primary:hover::after { opacity:1; }
.evt-btn-primary:active { transform:translateY(0); }
.evt-btn-primary:disabled { opacity:0.4; cursor:not-allowed; transform:none; }
.evt-btn-accent {
    display:inline-flex; align-items:center; justify-content:center; gap:8px;
    padding: 14px 24px; border-radius: var(--r-md);
    background: linear-gradient(135deg, var(--c-accent), #22cc00);
    border:none; color: #000; font-family: var(--font);
    font-size:0.95rem; font-weight:700; cursor:pointer;
    transition: var(--trans-spring);
    box-shadow: 0 4px 20px rgba(57,255,20,0.25);
    position:relative; overflow:hidden;
}
.evt-btn-accent:hover { transform:translateY(-2px); box-shadow: 0 8px 30px rgba(57,255,20,0.35); }
.evt-btn-accent:active { transform:translateY(0); }
.evt-btn-accent:disabled { opacity:0.4; cursor:not-allowed; transform:none; }
.full-width { width:100%; }
.btn-icon { font-size:1rem; }

/* ===== HISTORY LIST ===== */
.history-list { display:flex; flex-direction:column; gap:8px; }
.history-empty {
    display:flex; flex-direction:column; align-items:center; gap:8px;
    padding: var(--sp-xl) var(--sp-md); color: var(--c-txt3); text-align:center;
}
.empty-icon { font-size:2.5rem; opacity:0.5; }
.history-empty p { font-size:0.875rem; }

/* History Card */
.hist-card {
    display:flex; align-items:center; gap:12px;
    background: var(--c-bg2); border: 1px solid var(--c-border);
    border-radius: var(--r-md); padding: 12px 14px;
    transition: var(--trans-mid);
    animation: fadeInUp 0.4s var(--trans-slow) backwards;
}
.hist-card:hover { border-color: var(--c-border-hov); transform: translateX(3px); }
.hist-icon { font-size:1.4rem; flex-shrink:0; }
.hist-info { flex:1; min-width:0; }
.hist-title { font-size:0.85rem; font-weight:700; color: var(--c-txt1); margin-bottom:2px; }
.hist-sub {
    font-size:0.72rem; color: var(--c-txt3); font-family: var(--mono);
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
    max-width: 160px;
}
.hist-right { text-align:right; flex-shrink:0; }
.hist-amount { display:block; font-size:0.95rem; font-weight:700; color: var(--c-txt1); font-family: var(--mono); }
.hist-status {
    display:inline-block; padding:2px 8px;
    border-radius:999px; font-size:0.65rem; font-weight:700; letter-spacing:0.05em;
    margin-top:3px;
}
.hist-status.pending  { background: rgba(255,176,32,0.15); color: var(--c-warning); border: 1px solid rgba(255,176,32,0.3); }
.hist-status.approved { background: var(--c-accent-g); color: var(--c-accent); border: 1px solid rgba(57,255,20,0.3); }
.hist-status.rejected { background: var(--c-error-g); color: var(--c-error); border: 1px solid rgba(255,73,92,0.3); }
.hist-status.processing { background: var(--c-primary-g); color: var(--c-primary); border: 1px solid rgba(0,191,255,0.3); }

/* ===== RULES CARD ===== */
.rules-card { background: linear-gradient(135deg, var(--c-bg1), var(--c-bg2)); }
.rules-list { list-style:none; display:flex; flex-direction:column; gap:10px; }
.rules-list li {
    display:flex; align-items:flex-start; gap:10px;
    font-size:0.875rem; color: var(--c-txt2); line-height:1.5;
    padding:10px 12px;
    background: rgba(255,255,255,0.02); border-radius: var(--r-sm);
    border: 1px solid var(--c-border);
    transition: var(--trans-fast);
}
.rules-list li:hover { border-color: var(--c-border-hov); background: rgba(0,191,255,0.03); }
.rule-icon { font-size:1rem; flex-shrink:0; }

/* ===== DISABLED EVENT OVERLAY ===== */
.evt-disabled-overlay {
    position:fixed; inset:0; z-index:9990;
    background: rgba(4,4,10,0.95);
    backdrop-filter: blur(10px);
    display:flex; align-items:center; justify-content:center;
    padding: var(--sp-md);
}
.disabled-card {
    background: var(--c-bg1); border: 1px solid var(--c-border);
    border-radius: var(--r-2xl); padding: var(--sp-2xl) var(--sp-xl);
    text-align:center; max-width:400px;
    animation: popIn 0.5s var(--trans-spring);
}
.disabled-icon { font-size:3rem; display:block; margin-bottom:16px; }
.disabled-card h2 { color: var(--c-txt1); margin-bottom:12px; }
.disabled-card p { color: var(--c-txt2); font-size:0.9rem; margin-bottom:24px; }

/* ===== ANIMATIONS ===== */
@keyframes spin { from { transform:rotate(0deg); } to { transform:rotate(360deg); } }
@keyframes fadeInUp { from { opacity:0; transform:translateY(20px); } to { opacity:1; transform:translateY(0); } }
@keyframes fadeInDown { from { opacity:0; transform:translateY(-20px); } to { opacity:1; transform:translateY(0); } }
@keyframes popIn { from { opacity:0; transform:scale(0.85); } to { opacity:1; transform:scale(1); } }
@keyframes orbFloat {
    0%,100% { transform: translate(0,0) scale(1); }
    33% { transform: translate(20px,-15px) scale(1.05); }
    66% { transform: translate(-10px,10px) scale(0.97); }
}
@keyframes glowPulse {
    0%,100% { opacity:1; box-shadow: 0 0 6px currentColor; }
    50% { opacity:0.6; box-shadow: 0 0 14px currentColor; }
}
@keyframes panGrid {
    from { background-position: 0 0; }
    to { background-position: -40px -40px; }
}
@keyframes shimmerLoad {
    0% { background-position: -1000px 0; }
    100% { background-position: 1000px 0; }
}
.skeleton {
    animation: shimmerLoad 2s infinite linear;
    background: linear-gradient(90deg, var(--c-bg2) 25%, var(--c-bg3) 50%, var(--c-bg2) 75%);
    background-size: 2000px 100%; border-radius: var(--r-sm);
    color:transparent;
}

/* ===== DESKTOP RESPONSIVE ===== */
@media (min-width: 600px) {
    .wallet-strip-grid { grid-template-columns: repeat(4,1fr); }
    .crypto-selector { grid-template-columns: repeat(6,1fr); }
    .amount-presets { grid-template-columns: repeat(4,1fr); }
}

@media (min-width: 900px) {
    body { padding-bottom: var(--sp-2xl); }

    /* Show top nav, hide bottom nav */
    .evt-topnav { display:flex; }
    .evt-bottomnav { display:none; }

    /* Top nav padding */
    .evt-hero { padding-top: calc(var(--nav-top-h) + 56px); padding-bottom: 64px; }

    /* Toast position — not above mobile nav on desktop */
    #evt-toast-container { bottom: var(--sp-lg); }

    /* ── HERO ── */
    .evt-hero-title { font-size: 4.5rem; }
    .evt-calc-strip { gap: 28px; padding: 22px 36px; max-width: 600px; }
    .evt-range { max-width: 480px; }

    /* ── WALLET STRIP ── */
    .wallet-strip-grid { grid-template-columns: repeat(4,1fr); gap: 16px; }
    .wstrip-card { padding: 18px 20px; }
    .wstrip-value { font-size: 1.1rem; }

    /* ── CONTENT GRID: 55/45 split, left col is wider (deposit form) ── */
    .evt-content-grid {
        grid-template-columns: 1.15fr 1fr;
        gap: 28px;
        align-items: start;
        padding-top: var(--sp-xl);
        padding-bottom: var(--sp-xl);
    }
    .evt-col-left, .evt-col-right { gap: var(--sp-xl); }

    /* ── CARDS ── */
    .evt-card { padding: var(--sp-xl) 28px; }
    .evt-card-title h2 { font-size: 1.2rem; }

    /* ── DEPOSIT FORM ── */
    .amount-presets { grid-template-columns: repeat(4,1fr); gap: 10px; }
    .preset-btn { padding: 12px 8px; font-size: 0.9rem; }

    /* Crypto selector: 6 across on desktop */
    .crypto-selector { grid-template-columns: repeat(6,1fr); gap: 10px; }
    .crypto-opt { padding: 12px 8px; gap: 7px; border-radius: var(--r-lg); }
    .crypto-opt-img { width: 36px; height: 36px; }
    .crypto-opt-sym { font-size: 0.75rem; }
    .crypto-opt-name { font-size: 0.65rem; }

    /* ── WALLET DISPLAY ── */
    .wallet-addr-box { padding: 22px; }
    .wab-addr { font-size: 0.85rem; }

    /* ── BONUS PREVIEW ── */
    .bp-row { padding: 12px 18px; font-size: 0.9rem; }

    /* ── HISTORY CARDS ── */
    .hist-card { padding: 14px 18px; }
    .hist-title { font-size: 0.9rem; }
    .hist-amount { font-size: 1rem; }

    /* ── BUTTONS ── */
    .evt-btn-primary, .evt-btn-accent { padding: 15px 28px; font-size: 1rem; }

    /* ── RULES CARD ── */
    .rules-list li { padding: 12px 14px; font-size: 0.9rem; }
}

@media (min-width: 1200px) {
    .evt-container { padding: 0 var(--sp-2xl); }

    /* Wider layout — give deposit form more breathing room */
    .evt-content-grid { grid-template-columns: 1.2fr 1fr; gap: 36px; }
    .evt-card { padding: 32px; }

    /* Bigger crypto tiles */
    .crypto-opt { padding: 14px 10px; gap: 8px; }
    .crypto-opt-img { width: 38px; height: 38px; }
    .crypto-opt-sym { font-size: 0.8rem; }

    /* Hero */
    .evt-hero-title { font-size: 5rem; }
    .evt-hero-subtitle { font-size: 1.15rem; }
    .evt-calc-strip { max-width: 680px; }
}

/* ===== ACCESSIBILITY ===== */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ===== EVENT URGENCY BAR (Timer / Message) ===== */
.evt-urgency-bar {
    background: linear-gradient(90deg,
        rgba(255,73,92,0.07) 0%,
        rgba(255,176,32,0.10) 50%,
        rgba(255,73,92,0.07) 100%);
    border-top: 1px solid rgba(255,176,32,0.2);
    border-bottom: 1px solid rgba(255,176,32,0.2);
    padding: 14px var(--sp-md);
    position: relative;
    overflow: hidden;
    animation: fadeInDown 0.6s var(--trans-slow);
}

/* Animated shimmer sweep */
.evt-urgency-bar::before {
    content:'';
    position:absolute; inset:0;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(255,215,0,0.06) 50%,
        transparent 100%);
    background-size: 200% 100%;
    animation: urgencyShimmer 3s ease-in-out infinite;
    pointer-events:none;
}
@keyframes urgencyShimmer {
    0%   { background-position: -200% 0; }
    100% { background-position:  200% 0; }
}

.urgency-inner {
    max-width: 1200px; margin: 0 auto;
    display: flex; align-items: center;
    gap: 16px; flex-wrap: wrap;
    justify-content: center;
}

/* Icon */
.urgency-icon-wrap {
    flex-shrink: 0;
    font-size: 1.6rem;
    animation: urgencyRock 1.8s ease-in-out infinite;
}
@keyframes urgencyRock {
    0%,100% { transform: rotate(-8deg) scale(1); }
    50%      { transform: rotate( 8deg) scale(1.08); }
}

/* Timer Mode */
.urgency-text-col {
    display: flex; flex-direction: column; align-items: center; gap: 4px;
}
.urgency-label {
    font-size: 0.68rem; font-weight: 800; letter-spacing: 0.1em;
    text-transform: uppercase; color: var(--c-warning);
}
.urgency-countdown {
    display: flex; align-items: center; gap: 6px;
}
.countdown-unit {
    display: flex; flex-direction: column; align-items: center;
    background: rgba(255,176,32,0.1);
    border: 1px solid rgba(255,176,32,0.25);
    border-radius: var(--r-md);
    padding: 6px 10px; min-width: 52px;
    transition: var(--trans-fast);
}
.countdown-unit.tick {
    transform: scale(1.06);
    border-color: rgba(255,176,32,0.6);
    box-shadow: 0 0 12px rgba(255,176,32,0.25);
}
.countdown-num {
    font-family: var(--mono); font-size: 1.3rem; font-weight: 700;
    color: var(--c-txt1); line-height: 1;
    transition: all 0.15s ease;
}
.countdown-lbl {
    font-size: 0.55rem; font-weight: 700; letter-spacing: 0.08em;
    text-transform: uppercase; color: var(--c-txt3); margin-top: 2px;
}
.countdown-sep {
    font-size: 1.4rem; font-weight: 700; color: var(--c-warning);
    line-height: 1; margin-bottom: 10px;
    animation: sepBlink 1s step-end infinite;
}
@keyframes sepBlink { 0%,100% { opacity:1; } 50% { opacity:0.2; } }

/* Urgency badge */
.urgency-cta-col { flex-shrink:0; }
.urgency-hurry-badge {
    display: inline-flex; align-items: center; gap: 5px;
    background: rgba(255,73,92,0.15);
    border: 1px solid rgba(255,73,92,0.4);
    border-radius: 999px; padding: 6px 14px;
    font-size: 0.75rem; font-weight: 800; color: var(--c-error);
    letter-spacing: 0.06em; text-transform: uppercase;
    animation: glowPulseRed 2s ease-in-out infinite;
}
@keyframes glowPulseRed {
    0%,100% { box-shadow: 0 0 8px rgba(255,73,92,0.3); }
    50%      { box-shadow: 0 0 18px rgba(255,73,92,0.6); }
}

/* Message Mode */
.urgency-msg-icon { animation: urgencyRock 2.5s ease-in-out infinite; display:block; }
.urgency-msg-text {
    font-size: 0.95rem; font-weight: 600; color: var(--c-txt1);
    text-align: center; line-height: 1.5; max-width: 700px;
    padding: 4px 8px;
}
.urgency-msg-text strong { color: var(--c-warning); }
.urgency-msg-text em { color: var(--c-primary); font-style: normal; font-weight: 700; }

/* Expired state */
.evt-urgency-bar.expired {
    background: linear-gradient(90deg,
        rgba(255,73,92,0.1) 0%,
        rgba(255,73,92,0.05) 100%);
    border-color: rgba(255,73,92,0.2);
}
.countdown-unit.expired-unit { border-color: rgba(255,73,92,0.3); background: rgba(255,73,92,0.08); }
.countdown-num.expired-num   { color: var(--c-error); }

/* Responsive — urgency bar mobile */
@media (max-width: 899px) {
    /* ── BAR CONTAINER ── */
    .evt-urgency-bar {
        padding: 16px var(--sp-md);
    }

    /* ── INNER LAYOUT: stack vertically, centred ── */
    .urgency-inner {
        flex-direction: column;
        align-items: center;
        gap: 10px;
        flex-wrap: nowrap;
        text-align: center;
    }

    /* ── ICON: smaller, less motion on mobile ── */
    .urgency-icon-wrap {
        font-size: 1.4rem;
    }

    /* ── TIMER MODE ── */
    .urgency-text-col {
        align-items: center;
        gap: 6px;
    }
    .urgency-label {
        font-size: 0.65rem;
        letter-spacing: 0.12em;
    }
    .urgency-countdown {
        gap: 6px;
    }
    .countdown-unit {
        min-width: 52px;
        padding: 7px 10px;
        border-radius: var(--r-md);
    }
    .countdown-num {
        font-size: 1.25rem;
    }
    .countdown-lbl {
        font-size: 0.52rem;
        margin-top: 3px;
    }
    .countdown-sep {
        font-size: 1.2rem;
        margin-bottom: 12px;
    }

    /* Hide the "Limited Time!" badge — not enough room */
    .urgency-hurry-badge { display: none; }
    .urgency-cta-col     { display: none; }

    /* ── MESSAGE MODE ── */
    .urgency-msg-icon {
        font-size: 1.4rem;
    }
    .urgency-msg-text {
        font-size: 0.88rem;
        line-height: 1.55;
        padding: 0 4px;
        max-width: 100%;
    }
}

/* Extra tight phones */
@media (max-width: 400px) {
    .countdown-unit  { min-width: 44px; padding: 6px 7px; }
    .countdown-num   { font-size: 1.1rem; }
    .countdown-sep   { font-size: 1rem; margin-bottom: 10px; }
    .urgency-label   { font-size: 0.6rem; }
}

/* ===== MOBILE FIXES (max-width: 899px) ===== */
@media (max-width: 899px) {

    /* Container — tighter horizontal padding on small phones */
    .evt-container { padding: 0 12px; }

    /* Cards — reduce padding, ensure no overflow */
    .evt-card { padding: 16px 14px; overflow: hidden; min-width: 0; }

    /* Card header — allow wrap so badges don't push out */
    .evt-card-header { flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }

    /* Crypto selector — force 3 columns always on mobile */
    .crypto-selector {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 6px;
    }
    .crypto-opt { padding: 8px 4px; gap: 4px; }
    .crypto-opt-img { width: 26px; height: 26px; }
    .crypto-opt-sym { font-size: 0.65rem; }
    .crypto-opt-name { font-size: 0.55rem; }

    /* Amount presets — 4 across always */
    .amount-presets {
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 6px;
    }
    .preset-btn { padding: 9px 2px; font-size: 0.78rem; }

    /* Wallet address box — prevent overflow */
    .wallet-addr-box { padding: 14px; }
    .wab-addr {
        font-size: 0.72rem;
        padding: 10px 10px;
        overflow-wrap: break-word;
        word-break: break-all;
    }
    .wab-header { flex-wrap: wrap; gap: 6px; }
    .btn-copy { padding: 5px 10px; font-size: 0.72rem; }

    /* History cards — keep sub text from overflowing */
    .hist-card { padding: 10px 12px; gap: 8px; }
    .hist-info { min-width: 0; overflow: hidden; }
    .hist-sub { max-width: 120px; }
    .hist-title { font-size: 0.82rem; }
    .hist-amount { font-size: 0.88rem; }

    /* Wallet strip — 2 columns on small screens */
    .wallet-strip-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .wstrip-card { padding: 12px 14px; }
    .wstrip-value { font-size: 0.95rem; }

    /* Hero — reduce padding */
    .evt-hero { padding: 32px 12px 40px; }
    .evt-hero-title { font-size: clamp(1.8rem, 7vw, 2.8rem); }
    .evt-hero-subtitle { font-size: 0.9rem; }

    /* Calc strip — tighter on mobile */
    .evt-calc-strip { padding: 14px 16px; gap: 10px; }
    .calc-value { font-size: 1rem; }
    .calc-arrow { font-size: 0.9rem; }

    /* Inputs — full width, no overflow */
    .evt-input, .txid-input { font-size: 0.85rem; }
    .amt-input { font-size: 0.95rem; }

    /* Buttons */
    .evt-btn-primary, .evt-btn-accent { padding: 13px 16px; font-size: 0.9rem; }

    /* Step header */
    .step-title { font-size: 0.85rem; }

    /* Rules list */
    .rules-list li { font-size: 0.82rem; padding: 9px 10px; }
}

/* Extra small phones */
@media (max-width: 380px) {
    .evt-container { padding: 0 8px; }
    .evt-card { padding: 14px 10px; }
    .crypto-opt { padding: 7px 2px; }
    .crypto-opt-img { width: 22px; height: 22px; }
    .amount-presets { grid-template-columns: repeat(4, 1fr) !important; gap: 4px; }
    .preset-btn { font-size: 0.7rem; padding: 8px 1px; }
    .hist-sub { max-width: 90px; }
    .wab-addr { font-size: 0.65rem; }
}
/* END MOBILE FIXES */

/* ===== DEPOSIT CLAIMED STATE ===== */
.evt-claimed-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: var(--sp-xl) var(--sp-md);
    gap: 12px;
}
.evt-claimed-icon {
    font-size: 3rem;
    line-height: 1;
    filter: drop-shadow(0 0 12px rgba(57,255,20,0.5));
}
.evt-claimed-title {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--c-txt1);
    margin: 0;
    letter-spacing: -0.02em;
}
.evt-claimed-desc {
    font-size: 0.9rem;
    color: var(--c-txt2);
    line-height: 1.6;
    margin: 0;
    max-width: 380px;
}
.evt-claimed-desc strong { color: var(--c-accent); }
/* END DEPOSIT CLAIMED STATE */