/* ============================================================
   SMM4DZ — Premium-dark design system
   One source of truth for tokens + components across all pages.
   ============================================================ */

:root{
    /* Surfaces */
    --bg:            #05070E;
    --bg-soft:       #090F1E;
    --surface:       #0A0F1D;
    --card:          #0E1524;
    --card-hover:    #131C31;
    --border:        #1A2440;
    --border-strong: #26304D;
    --hair:          rgba(255,255,255,.07);

    /* Brand + semantic */
    --primary:        #3B82F6;
    --primary-hover:  #2563EB;
    --primary-soft:   rgba(59,130,246,.12);
    --primary-border: rgba(56,189,248,.28);
    --accent:         #22D3EE;
    --glow:           rgba(56,132,255,.45);
    --grad:           linear-gradient(110deg,#60A5FA,#22D3EE 55%,#38BDF8);
    --grad-btn:       linear-gradient(120deg,#2563EB,#3B82F6 40%,#22D3EE);

    --success:       #10B981;
    --success-soft:  rgba(16,185,129,.12);
    --success-border:rgba(16,185,129,.28);
    --warning:       #F5B84A;
    --warning-soft:  rgba(245,184,74,.12);
    --warning-border:rgba(245,184,74,.28);
    --danger:        #ef4444;
    --danger-soft:   rgba(239,68,68,.1);
    --danger-border: rgba(239,68,68,.24);
    --gold:          #F5B84A;
    --purple:        #a78bfa;

    /* Text */
    --text:        #EEF3FF;
    --text-2:      #C3CDE4;
    --text-muted:  #8B98B6;
    --text-faint:  #5B6987;

    /* Type */
    --font-sans:    'Cairo', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-display: 'Syne', 'Cairo', sans-serif;
    --font-mono:    'Fira Code', ui-monospace, monospace;

    /* Radii */
    --r-xs:.4rem; --r-sm:.55rem; --r:.75rem; --r-md:.9rem; --r-lg:1.1rem; --r-xl:1.4rem; --r-full:999px;

    /* Elevation */
    --shadow-sm:      0 1px 2px rgba(0,0,0,.4);
    --shadow:         0 20px 50px -24px rgba(0,0,0,.75);
    --shadow-lg:      0 30px 80px -30px rgba(0,0,0,.9);
    --shadow-primary: 0 12px 34px -10px var(--glow);
    --ring:           0 0 0 3px rgba(56,189,248,.3);

    /* Glass */
    --glass-bg:   linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.015));
    --glass-line: inset 0 1px 0 rgba(255,255,255,.07);

    --t:      .2s cubic-bezier(.4,0,.2,1);
    --t-slow: .35s cubic-bezier(.16,1,.3,1);
}

/* ---- Reset ---- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
    font-family:var(--font-sans);
    background-color:var(--bg);
    color:var(--text);
    line-height:1.6;
    overflow-x:hidden;                 /* no sideways scroll on any page/phone */
    -webkit-tap-highlight-color:transparent;
    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
    /* ambient glow comes from the fixed .fx aurora layer (see base.html) */
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font-family:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}

/* ---- Ambient background (aurora + grid), rendered once by base.html ---- */
.fx{position:fixed;inset:0;z-index:-2;pointer-events:none;overflow:hidden}
.fx span{position:absolute;border-radius:50%;filter:blur(90px);opacity:.45;mix-blend-mode:screen}
.fx .a1{width:60vw;height:60vw;top:-25vw;right:-10vw;background:radial-gradient(circle,#2563EB,transparent 65%);animation:fxd1 24s ease-in-out infinite}
.fx .a2{width:45vw;height:45vw;top:25vh;left:-15vw;background:radial-gradient(circle,#22D3EE,transparent 65%);opacity:.28;animation:fxd2 28s ease-in-out infinite}
.fx .a3{width:38vw;height:38vw;bottom:-14vw;right:22vw;background:radial-gradient(circle,#8B5CF6,transparent 65%);opacity:.2;animation:fxd1 32s ease-in-out infinite reverse}
@keyframes fxd1{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-4vw,5vh) scale(1.12)}}
@keyframes fxd2{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(5vw,-4vh) scale(1.08)}}
.fx-grid{position:fixed;inset:0;z-index:-1;pointer-events:none;
    background-image:linear-gradient(rgba(120,160,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(120,160,255,.045) 1px,transparent 1px);
    background-size:64px 64px;
    -webkit-mask-image:radial-gradient(ellipse 90% 55% at 50% 0%,#000,transparent 78%);
    mask-image:radial-gradient(ellipse 90% 55% at 50% 0%,#000,transparent 78%);}

/* ---- Layout helpers ---- */
.container{max-width:1200px;margin:0 auto;padding-inline:1.25rem}
.container-sm{max-width:720px;margin:0 auto;padding-inline:1.25rem}
.text-center{text-align:center}
.muted{color:var(--text-muted)}
.faint{color:var(--text-faint)}
.mono{font-family:var(--font-mono)}
.display{font-family:var(--font-display)}
.grad-text{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}

/* Centered single-card screen (auth, deposit, withdraw) */
.screen{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:1.5rem;position:relative}

/* ---- Glass ---- */
.glass{
    background:var(--glass-bg);
    border:1px solid var(--hair);
    border-radius:var(--r-lg);
    box-shadow:var(--glass-line), var(--shadow);
    backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
}

/* ---- Card ---- */
.card{
    background:var(--glass-bg);
    border:1px solid var(--hair);
    border-radius:var(--r-lg);
    box-shadow:var(--glass-line);
    backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
    transition:border-color var(--t),transform var(--t);
    position:relative;
}
.card--pad{padding:1.75rem}
@media(min-width:768px){.card--hover:hover{border-color:var(--primary-border);transform:translateY(-2px)}}

/* Elevated action panel (auth / deposit / withdraw) */
.panel{
    position:relative;z-index:1;width:100%;
    background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.015));
    border:1px solid var(--hair);
    border-radius:var(--r-xl);
    box-shadow:var(--glass-line), var(--shadow-lg);
    backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
    padding:2.25rem 2rem;overflow:hidden;
}
.panel::before{content:'';position:absolute;inset:0 0 auto 0;height:3px;background:var(--grad-btn)}
.panel--success::before{background:linear-gradient(90deg,var(--success),#34d399,transparent)}

/* ---- Brand mark ---- */
.brand-fallback{font-family:var(--font-display);font-size:1.4rem;font-weight:800;color:var(--primary)}
.brand-fallback b{color:#fff;font-weight:800}

/* ---- Buttons ---- */
.btn{
    display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
    font-family:inherit;font-weight:800;font-size:.9rem;line-height:1;
    padding:.85rem 1.4rem;border-radius:var(--r);border:1px solid transparent;
    cursor:pointer;text-decoration:none;white-space:nowrap;
    transition:background var(--t),border-color var(--t),color var(--t),transform var(--t),box-shadow var(--t);
    user-select:none;
}
.btn:active{transform:translateY(0) scale(.99)}
.btn:disabled,.btn[disabled]{opacity:.55;cursor:not-allowed}

.btn-primary{color:#04122e;background:var(--grad-btn);box-shadow:0 10px 30px -8px var(--glow), inset 0 1px 0 rgba(255,255,255,.4)}
.btn-primary:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 18px 44px -10px var(--glow), inset 0 1px 0 rgba(255,255,255,.5)}

.btn-success{color:#04170f;background:linear-gradient(120deg,#0d9c6e,#10B981);box-shadow:0 10px 30px -10px rgba(16,185,129,.5)}
.btn-success:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 16px 40px -12px rgba(16,185,129,.6)}

.btn-ghost{background:rgba(255,255,255,.04);color:var(--text-2);border-color:var(--hair);backdrop-filter:blur(10px)}
.btn-ghost:hover:not(:disabled){color:#fff;border-color:var(--primary-border);background:rgba(56,189,248,.08)}

.btn-light{background:#fff;color:#0b1120;box-shadow:0 0 30px rgba(255,255,255,.12)}
.btn-light:hover:not(:disabled){transform:translateY(-2px)}

.btn-warning{background:var(--warning-soft);color:var(--gold);border-color:var(--warning-border)}
.btn-warning:hover:not(:disabled){background:var(--warning);color:#1a1300}

.btn-block{width:100%}
.btn-lg{padding:1rem 1.6rem;font-size:1rem}
.btn-sm{padding:.55rem 1rem;font-size:.8rem}

/* ---- Forms ---- */
.field{margin-bottom:1.1rem}
.label{display:block;font-size:.72rem;font-weight:800;color:var(--text-muted);margin-bottom:.5rem;text-transform:uppercase;letter-spacing:.04em}
.input,.select,.textarea{
    width:100%;background:rgba(255,255,255,.03);border:1px solid var(--border-strong);border-radius:var(--r);
    padding:.9rem 1.1rem;font-family:inherit;font-size:.92rem;font-weight:600;color:var(--text);outline:none;
    transition:border-color var(--t),box-shadow var(--t),background var(--t);
}
.input::placeholder,.textarea::placeholder{color:var(--text-faint)}
.input:focus,.select:focus,.textarea:focus{border-color:var(--accent);box-shadow:var(--ring);background:rgba(255,255,255,.05)}
.textarea{resize:none;line-height:1.6}
.field-hint{font-size:.68rem;color:var(--text-muted);font-weight:600;margin-top:.45rem;display:flex;align-items:center;gap:.35rem}

.input-group{position:relative}
.input-group .affix{position:absolute;left:1rem;top:50%;transform:translateY(-50%);color:var(--text-muted);font-weight:800;font-size:.85rem;pointer-events:none}
.input-group .input{padding-left:2.75rem}

.select{
    background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%238B98B6' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
    background-position:left 1rem center;background-repeat:no-repeat;background-size:1.1em 1.1em;
    padding-left:2.6rem;-webkit-appearance:none;appearance:none;cursor:pointer;
}
.select option{background:var(--card);color:var(--text)}

.input-otp{text-align:center;font-family:var(--font-display);font-size:1.9rem;font-weight:800;letter-spacing:.3em;color:#fff;padding:1rem}
.input-otp::placeholder{color:var(--border-strong);letter-spacing:.2em}

.filedrop{display:flex;align-items:center;gap:.75rem;background:rgba(255,255,255,.03);border:1px dashed var(--border-strong);border-radius:var(--r);padding:.9rem 1.1rem;cursor:pointer;font-size:.82rem;font-weight:700;color:var(--text-muted);transition:border-color var(--t),background var(--t),color var(--t)}
.filedrop:hover{border-color:var(--primary-border);background:var(--primary-soft);color:var(--accent)}
.filedrop input[type=file]{display:none}

input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none}
input[type=number]{-moz-appearance:textfield;appearance:textfield}

/* ---- Alerts ---- */
.alert{border-radius:var(--r);padding:.8rem 1rem;font-size:.8rem;font-weight:700;margin-bottom:1.25rem;display:flex;align-items:center;gap:.55rem}
.alert-error{background:var(--danger-soft);border:1px solid var(--danger-border);color:#f87171}
.alert-success{background:var(--success-soft);border:1px solid var(--success-border);color:#34d399}
.alert-info{background:var(--primary-soft);border:1px solid var(--primary-border);color:#7dd3fc}

/* ---- Badges & pills ---- */
.badge{display:inline-flex;align-items:center;gap:.35rem;padding:.22rem .6rem;border-radius:var(--r-xs);font-size:.65rem;font-weight:800}
.badge-blue{background:var(--primary-soft);color:#7dd3fc;border:1px solid var(--primary-border)}
.badge-green{background:var(--success-soft);color:#6ee7b7;border:1px solid var(--success-border)}
.badge-gold{background:var(--warning-soft);color:var(--gold);border:1px solid var(--warning-border)}

.pill{display:inline-flex;align-items:center;gap:.4rem;background:rgba(255,255,255,.03);border:1px solid var(--hair);border-radius:var(--r-sm);padding:.4rem .8rem;font-size:.72rem;font-weight:700;color:var(--text-muted)}

/* ---- Progress ---- */
.progress{height:7px;background:rgba(255,255,255,.08);border-radius:var(--r-full);overflow:hidden}
.progress__fill{height:100%;border-radius:var(--r-full);transition:width var(--t-slow);background:var(--grad-btn)}

/* ---- Divider & links ---- */
.divider{border-top:1px solid var(--hair);margin:1.5rem 0}
.link{color:var(--accent);font-weight:800;transition:color var(--t)}
.link:hover{color:#a5f3fc}
.back-link{display:inline-flex;align-items:center;justify-content:center;gap:.4rem;font-size:.78rem;font-weight:700;color:var(--text-muted);transition:color var(--t)}
.back-link:hover{color:var(--text)}

/* ---- App top navigation ---- */
.topbar{position:sticky;top:0;z-index:50;background:rgba(5,7,14,.72);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-bottom:1px solid var(--hair)}
.topbar__inner{max-width:1200px;margin:0 auto;padding:.85rem 1.25rem;display:flex;justify-content:space-between;align-items:center;gap:1rem}

/* ---- Support button (name avoids Font Awesome's .fab brand-icon class) ---- */
.help-fab{position:fixed;bottom:1.5rem;left:1.5rem;z-index:99;display:flex;align-items:center;gap:.5rem;color:#04122e;background:var(--grad-btn);border-radius:var(--r-full);padding:.75rem 1.2rem;font-weight:800;font-size:.82rem;box-shadow:0 14px 36px -12px var(--glow);transition:transform var(--t),box-shadow var(--t)}
.help-fab:hover{transform:translateY(-2px)}
@media(max-width:480px){.help-fab__label{display:none}.help-fab{padding:.85rem}}

/* ---- Scrollbars ---- */
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--border-strong);border-radius:10px}
::-webkit-scrollbar-thumb:hover{background:#34456b}

/* ---- SweetAlert2 dark theming ---- */
.swal2-popup{border-radius:var(--r-lg)!important;border:1px solid var(--border-strong)!important}

/* ---- Motion preference ---- */
@media(prefers-reduced-motion:reduce){
    *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
    .fx span{animation:none!important}
}