:root{

  /* ---- Primitive color ramps (from quantedgecapital.com) ---- */
  --p-black:            #000000;
  --p-bg-950:           #07090F;   /* deep black background */
  --p-bg-900:           #0a0d14;   /* stats-band deep end */
  --p-bg-850:           #0c1119;   /* about-visual gradient start */
  --p-bg-800:           #0d121b;   /* course/package card end */
  --p-bg-750:           #0e131c;   /* feature card end */
  --p-bg2-900:          #10151F;   /* secondary background */
  --p-card-900:         #141B26;   /* card surface */

  --p-white:            #FFFFFF;
  --p-muted-white:      #D7D7D7;
  --p-grey-500:         #8E99A8;

  --p-gold-400:         #F5D76E;   /* premium gold highlight */
  --p-gold-500:         #D4AF37;   /* primary gold */
  --p-gold-700:         #b8912b;   /* gold gradient shade */
  --p-gold-900:         #8a6d1f;   /* deep gold (avatars) */

  --p-green-500:        #19C37D;   /* accent green */
  --p-blue-500:         #2F7CF7;   /* accent blue */
  --p-red-500:          #E74C3C;   /* danger */

  /* ---- Primitive spacing scale (4px base) ---- */
  --p-space-0:  0;
  --p-space-1:  4px;
  --p-space-2:  8px;
  --p-space-3:  12px;
  --p-space-4:  16px;
  --p-space-5:  20px;
  --p-space-6:  24px;
  --p-space-7:  32px;
  --p-space-8:  40px;
  --p-space-9:  48px;
  --p-space-10: 64px;

  /* ---- Primitive radius scale (site uses 10 / 18 / 20px) ---- */
  --p-radius-sm:  8px;
  --p-radius-md:  10px;
  --p-radius-lg:  14px;
  --p-radius-xl:  18px;
  --p-radius-2xl: 20px;
  --p-radius-full: 999px;

  /* ---- Primitive font sizes ---- */
  --p-fs-2xs: 10px;
  --p-fs-xs:  11px;
  --p-fs-sm:  13px;
  --p-fs-base:14px;
  --p-fs-md:  15px;
  --p-fs-lg:  16px;
  --p-fs-xl:  20px;
  --p-fs-2xl: 24px;
  --p-fs-3xl: 32px;

  /* ---- Primitive motion (matches site's cubic-bezier) ---- */
  --p-ease-out:      cubic-bezier(.16,1,.3,1);
  --p-duration-fast: .18s;
  --p-duration-base: .25s;
  --p-duration-slow: .4s;

  /* ---- Primitive blur ---- */
  --p-blur-sm: 10px;
  --p-blur-md: 12px;
  --p-blur-lg: 16px;
}

/* =====================================================================
   2. SEMANTIC TOKENS
   Read from these everywhere. Swap a mapping here and the whole app
   (and its alignment with the marketing site) updates at once.
===================================================================== */
:root{

  /* ---------- Surfaces ---------- */
  --color-bg-app:            var(--p-bg-950);
  --color-bg-canvas:         var(--p-bg2-900);
  --color-surface-1:         var(--p-card-900);
  --color-surface-2:         var(--p-bg-850);
  --color-surface-solid:     var(--p-card-900);
  --color-surface-raised:    var(--p-bg-750);
  --color-surface-input:     rgba(255,255,255,.02);
  --color-surface-disabled:  #111111;

  /* ---------- Borders ---------- */
  --color-border-subtle:     rgba(255,255,255,.08);   /* site's --border */
  --color-border-default:    rgba(212,175,55,.20);
  --color-border-strong:     rgba(212,175,55,.35);     /* site's gold-border */
  --color-border-dashed:     rgba(212,175,55,.25);
  --color-border-hairline:   rgba(255,255,255,.05);
  --color-border-sheen:      rgba(255,255,255,.06);

  /* ---------- Text ---------- */
  --color-text-primary:      var(--p-white);
  --color-text-inverse:      var(--p-bg-950);
  --color-text-muted:        var(--p-grey-500);
  --color-text-faint:        var(--p-muted-white);
  --color-text-disabled:     #666666;

  /* ---------- Brand / accent ramp ---------- */
  --color-accent-gold:        var(--p-gold-500);
  --color-accent-gold-hi:     var(--p-gold-400);
  --color-accent-gold-deep:   var(--p-gold-700);
  --color-accent-blue:        var(--p-blue-500);
  --color-accent-green:       var(--p-green-500);

  /* ---------- Status / feedback (mapped to site's accent colors) ---------- */
  --color-success:           var(--p-green-500);
  --color-warning:           var(--p-gold-500);
  --color-danger:            var(--p-red-500);
  --color-info:              var(--p-blue-500);

  --color-success-bg:        rgba(25,195,125,.10);
  --color-success-border:    rgba(25,195,125,.22);
  --color-success-glow:      rgba(25,195,125,.35);

  --color-warning-bg:        rgba(212,175,55,.10);
  --color-warning-border:    rgba(212,175,55,.25);
  --color-warning-glow:      rgba(212,175,55,.35);

  --color-danger-bg:         rgba(231,76,60,.10);
  --color-danger-border:     rgba(231,76,60,.22);
  --color-danger-glow:       rgba(231,76,60,.35);

  --color-info-bg:           rgba(47,124,247,.08);
  --color-info-border:       rgba(47,124,247,.18);

  /* ---------- Gradients (semantic, named by intent) ---------- */
  --gradient-brand:          linear-gradient(135deg, var(--color-accent-gold-hi), var(--color-accent-gold) 60%, var(--color-accent-gold-deep));
  --gradient-brand-text:     linear-gradient(120deg, var(--color-accent-gold-hi), var(--color-accent-gold));
  --gradient-data:           linear-gradient(90deg, var(--color-accent-blue), var(--color-accent-gold));
  --gradient-danger-action:  linear-gradient(135deg, var(--color-danger), #2a0d0a, var(--color-accent-gold));
  --gradient-surface-card:   linear-gradient(160deg, var(--p-card-900) 0%, #0e131c 100%);
  --gradient-surface-glass:  linear-gradient(160deg, var(--p-card-900), var(--p-bg-800));
  --gradient-surface-package:linear-gradient(160deg, var(--p-card-900), var(--p-bg-800));
  --gradient-sheen-top:      linear-gradient(to bottom, rgba(255,255,255,.08), rgba(255,255,255,.02) 40%, transparent 70%);

  /* ---------- Elevation / shadow ---------- */
  --shadow-resting:          0 8px 24px -8px rgba(0,0,0,.5);
  --shadow-resting-strong:   0 8px 24px rgba(0,0,0,.4);
  --shadow-hover-info:       0 24px 50px -20px rgba(212,175,55,.25);
  --shadow-hover-danger:     0 15px 35px rgba(231,76,60,.22);
  --shadow-hover-gold:       0 14px 40px -8px rgba(212,175,55,.55);
  --shadow-hover-success:    0 10px 28px -8px rgba(25,195,125,.18);
  --shadow-focus-ring:       0 0 0 3px rgba(212,175,55,.25);
  --shadow-inset-edge:       inset 0 1px 0 rgba(255,255,255,.06), inset 0 -2px 4px rgba(0,0,0,.7);
  --shadow-glow-gold:        0 0 10px rgba(212,175,55,.6);
  --shadow-glow-success:     0 0 12px rgba(25,195,125,.7);
  --shadow-glow-danger:      0 0 12px rgba(231,76,60,.6);

  /* ---------- Radius (semantic by component role) ---------- */
  --radius-control:          var(--p-radius-md);
  --radius-card:             var(--p-radius-lg);
  --radius-card-lg:          var(--p-radius-xl);
  --radius-pill:             var(--p-radius-full);

  /* ---------- Spacing ---------- */
  --space-xs:  var(--p-space-2);
  --space-sm:  var(--p-space-3);
  --space-md:  var(--p-space-4);
  --space-lg:  var(--p-space-6);
  --space-xl:  var(--p-space-7);

  /* ---------- Typography (matches the website exactly) ---------- */
  --font-family-display: 'Playfair Display', serif;
  --font-family-body:    'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-family-button:  'Poppins', sans-serif;
  --font-family-number:  'Space Grotesk', sans-serif;
  --font-family-base:    var(--font-family-body);

  --fs-label:    var(--p-fs-2xs);
  --fs-caption:  var(--p-fs-xs);
  --fs-small:    var(--p-fs-sm);
  --fs-body:     var(--p-fs-base);
  --fs-body-lg:  var(--p-fs-md);
  --fs-heading-sm: var(--p-fs-lg);
  --fs-heading-md: var(--p-fs-xl);
  --fs-heading-lg: var(--p-fs-2xl);
  --fs-display:    var(--p-fs-3xl);

  /* ---------- Motion ---------- */
  --transition-fast:  all var(--p-duration-fast) ease;
  --transition-base:  all var(--p-duration-base) ease-in-out;
  --transition-slow:  all var(--p-duration-slow) ease;
  --transition-hover-lift: transform var(--p-duration-base) var(--p-ease-out), box-shadow var(--p-duration-base) var(--p-ease-out), border-color var(--p-duration-base) var(--p-ease-out);

  /* ---------- Blur ---------- */
  --blur-glass-sm: blur(var(--p-blur-sm));
  --blur-glass-md: blur(var(--p-blur-md));
  --blur-glass-lg: blur(var(--p-blur-lg));

  /* ---------- Z-index scale ---------- */
  --z-base: 1;
  --z-raised: 10;
  --z-sticky: 100;
  --z-overlay: 500;
  --z-modal: 1000;
  --z-toast: 1100;
}

/* =====================================================================
   3. RESET & BASE
===================================================================== */
*,*::before,*::after{ box-sizing:border-box; }
body{
  background: var(--color-bg-app);
  color: var(--color-text-faint);
  font-family: var(--font-family-body);
  font-size: var(--fs-body);
  -webkit-font-smoothing: antialiased;
}
a{ color: inherit; text-decoration:none; }
::selection{ background: var(--color-accent-gold); color: var(--color-text-inverse); }
h1,h2,h3,h4,h5{ font-family: var(--font-family-display); color: var(--color-text-primary); font-weight:600!important; }

/* =====================================================================
   4. TYPOGRAPHY
===================================================================== */
.text-display   {  font-size: var(--fs-display); font-weight:700; }
.text-heading-lg{  font-size: var(--fs-heading-lg); font-weight:600; }
.text-heading-md{  font-size: var(--fs-heading-md); font-weight:600; }
.text-heading-sm{  font-size: var(--fs-heading-sm); font-weight:600; }
.text-body-lg   { font-size: var(--fs-body-lg)!important; }
.text-body      { font-size: var(--fs-body); color: var(--color-text-faint)!important; }
.text-small     { font-size: var(--fs-small)!important; }
.text-caption   { font-size: var(--fs-caption)!important; }
.text-label     { font-family: var(--font-family-button); font-size: var(--fs-label); text-transform:uppercase; letter-spacing:1.5px; font-weight:600; }
.text-number    { font-family: var(--font-family-number); font-weight:600; }

.text-primary   { color: var(--color-text-primary) !important; }
.text-muted     { color: var(--color-text-muted) !important; }
.text-faint     { color: var(--color-text-faint) !important; }
.text-disabled  { color: var(--color-text-disabled) !important; }
.text-success   { color: var(--color-success) !important; }
.text-warning   { color: var(--color-warning) !important; }
.text-danger    { color: var(--color-danger) !important; }
.text-info      { color: var(--color-info) !important; }
.text-gold      { color: var(--color-accent-gold) !important; }

.text-gradient-brand{
  background: var(--gradient-brand-text);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.text-gradient-data{
  background: var(--gradient-data);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.eyebrow{
  font-family: var(--font-family-button);
  font-size: var(--fs-caption);
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--color-accent-gold);
  font-weight:600;
  display:inline-flex;
  align-items:center;
  gap: var(--space-sm);
}
.eyebrow::before{ content:""; width:24px; height:1px; background: var(--color-accent-gold); display:inline-block; }

/* =====================================================================
   5. LAYOUT UTILITIES
===================================================================== */
.container-app{ max-width: 480px; margin: 0 auto; padding: 0 var(--space-md); }
.stack{ display:flex; flex-direction:column; }
.row-between{ display:flex; align-items:center; justify-content:space-between; }
.row-start{ display:flex; align-items:center; gap: var(--space-sm); }
.divider{ border-bottom: 1px solid var(--color-border-subtle) !important; }
.divider-hairline{ border-bottom: 1px solid var(--color-border-hairline); }

.gap-xs{ gap: var(--space-xs); } .gap-sm{ gap: var(--space-sm); } .gap-md{ gap: var(--space-md); } .gap-lg{ gap: var(--space-lg); }
.mt-xs{margin-top:var(--space-xs);} .mt-sm{margin-top:var(--space-sm);} .mt-md{margin-top:var(--space-md);} .mt-lg{margin-top:var(--space-lg);}
.mb-xs{margin-bottom:var(--space-xs);} .mb-sm{margin-bottom:var(--space-sm);} .mb-md{margin-bottom:var(--space-md);} .mb-lg{margin-bottom:var(--space-lg);}
.p-xs{padding:var(--space-xs);} .p-sm{padding:var(--space-sm);} .p-md{padding:var(--space-md);} .p-lg{padding:var(--space-lg);}

/* =====================================================================
   6. BUTTONS
   Mirrors the site's .btn-primary (gold gradient + lift) and
   .btn-ghost (glass outline) exactly.
===================================================================== */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap: var(--space-xs);
  font-family: var(--font-family-button);
  font-weight:600;
  font-size: var(--fs-small);
  letter-spacing:.4px;
  padding: var(--space-sm) var(--space-lg);
  border-radius: var(--radius-control);
  border:none;
  cursor:pointer;
  text-decoration:none;
  transition: var(--transition-hover-lift);
}
.btn-brand{
  color: var(--color-text-inverse);
  background: var(--gradient-brand);
  box-shadow: var(--shadow-hover-gold);
}
.btn-brand:hover{ transform: translateY(-3px); box-shadow: 0 18px 45px -10px rgba(212,175,55,.7); }
.btn-block{ display:flex; width:100%; text-align:center; margin-top: var(--space-md); }
.btn-ghost{
  color: var(--color-text-primary);
  background: rgba(255,255,255,.03);
  border: 1px solid var(--color-border-subtle);
  
}
.btn-ghost:hover{ transform: translateY(-3px); border-color: var(--color-border-strong); background: rgba(212,175,55,.06); }
.btn-danger{
  color:#fff;
  background: var(--gradient-danger-action);
}
.btn-danger:hover{ box-shadow: var(--shadow-hover-danger); transform: translateY(-2px); }
.btn:disabled{ opacity:.5; cursor:not-allowed; transform:none !important; box-shadow:none !important; }

/* legacy alias kept for existing markup */
.buy-btn{
  display:block; width:100%; text-align:center; margin-top: var(--space-md);
  padding: var(--space-sm) 0;
  font-family: var(--font-family-button);
  font-weight:600; font-size: var(--fs-small);
  border-radius: var(--radius-control);
  border:none; color: var(--color-text-inverse);
  background: var(--gradient-brand);
  box-shadow: var(--shadow-hover-gold);
  transition: var(--transition-hover-lift);
}
.buy-btn:hover{ transform: translateY(-3px); box-shadow: 0 18px 45px -10px rgba(212,175,55,.7); }

/* =====================================================================
   7. BADGES / STATUS CHIPS
===================================================================== */
.badge{
  font-family: var(--font-family-button);
  font-size: var(--fs-label);
  font-weight:700;
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-pill);
  text-transform:uppercase;
  letter-spacing:.7px;
  border:1px solid transparent;
  white-space:nowrap;
  display:inline-block;
}
.badge-success{ color: var(--color-success); background: var(--color-success-bg); border-color: var(--color-success-border); box-shadow: 0 0 10px var(--color-success-glow); }
.badge-warning{ color: var(--color-warning); background: var(--color-warning-bg); border-color: var(--color-warning-border); box-shadow: 0 0 10px var(--color-warning-glow); }
.badge-danger { color: var(--color-danger);  background: var(--color-danger-bg);  border-color: var(--color-danger-border);  box-shadow: 0 0 10px var(--color-danger-glow); }
.badge-gold{
  background: linear-gradient(135deg, var(--color-accent-gold-hi), var(--color-accent-gold));
  color: var(--color-text-inverse);
  font-weight:700;
}

/* legacy aliases */
.ta-status{
  font-family: var(--font-family-button);
  font-size: var(--fs-label); font-weight:700;
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-pill);
  text-transform:uppercase; letter-spacing:.7px;
  border:1px solid transparent; white-space:nowrap;
}
.ta-approved{ color: var(--color-success); background: var(--color-success-bg); border-color: var(--color-success-border); box-shadow: 0 0 10px var(--color-success-glow); }
.ta-pending { color: var(--color-warning); background: var(--color-warning-bg); border-color: var(--color-warning-border); box-shadow: 0 0 10px var(--color-warning-glow); }
.ta-rejected{ color: var(--color-danger);  background: var(--color-danger-bg);  border-color: var(--color-danger-border);  box-shadow: 0 0 10px var(--color-danger-glow); }
.badge-active{ color: var(--color-success); background: var(--color-success-bg); }
.badge-done  { color: var(--color-warning); background: var(--color-warning-bg); }
.badge-locked{ color: var(--color-danger);  background: var(--color-danger-bg); }

/* =====================================================================
   8. CARDS
   Mirrors the site's .feature-card / .course-card treatment:
   subtle gradient, hairline border, gold border + lift on hover.
===================================================================== */
.card-glass{
  border-radius: var(--radius-card-lg);
  background: rgba(255,255,255,.03);
  
  border: 1px solid var(--color-border-subtle);
  
  color: var(--color-text-primary);
}
.card-gradient{
  background: var(--gradient-surface-card);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-card-lg);
  position: relative;
  transition: var(--transition-hover-lift);
}
.card-gradient::before{
  content:"";
  position:absolute; inset:0; border-radius:inherit; padding:1px;
  background: linear-gradient(140deg, var(--color-border-strong), transparent 40%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity:0; transition: opacity var(--p-duration-slow);
  pointer-events:none;
}
.card-gradient:hover::before{ opacity:1; }
.card-gradient-action{
  background: var(--gradient-danger-action);
  color: var(--color-text-primary);
}
.card-surface{
  background: var(--gradient-surface-glass);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-card-lg);
  
  
  transition: var(--transition-base);
}
.card-surface:hover{
  border-color: var(--color-border-default);
  
  transform: translateY(-2px);
}
.card-empty{
  background: var(--gradient-surface-glass);
  border: 1px dashed var(--color-border-dashed);
  border-radius: var(--radius-card-lg);
  padding: var(--space-lg) var(--space-md);
  text-align:center;
  color: var(--color-text-muted);
  font-weight:600;
  
}
/* =====================================================================
   9. FORMS / INPUTS
===================================================================== */

/* -------------------------------------------------
   BASE INPUT + SELECT
------------------------------------------------- */

.input-dark,
.package-card input,
.package-card select {
    width: 100%;
    min-height: 44px;

    padding: var(--space-sm);

    border-radius: var(--radius-control);
    border: 1px solid var(--color-border-subtle);

    background-color: var(--color-surface-input);

    color: var(--color-text-primary);

    outline: none;

    font-family: var(--font-family-body);
    font-size: var(--fs-small);

    transition: var(--transition-base);
}


/* -------------------------------------------------
   NORMAL INPUT
------------------------------------------------- */

input.input-dark,
textarea.input-dark,
.package-card input {
    background-image: none;
}


/* -------------------------------------------------
   SELECT
------------------------------------------------- */

select.input-dark,
.package-card select {
    padding-right: 42px;

    cursor: pointer;

    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;

    background-image:
        linear-gradient(
            45deg,
            transparent 50%,
            var(--color-accent-gold) 50%
        ),
        linear-gradient(
            135deg,
            var(--color-accent-gold) 50%,
            transparent 50%
        );

    background-position:
        calc(100% - 18px) 50%,
        calc(100% - 13px) 50%;

    background-size:
        5px 5px,
        5px 5px;

    background-repeat: no-repeat;
}


/* -------------------------------------------------
   FOCUS
------------------------------------------------- */

.input-dark:focus,
.package-card input:focus,
.package-card select:focus {
    border-color: var(--color-accent-gold);
    box-shadow: var(--shadow-focus-ring);
}


/* -------------------------------------------------
   PLACEHOLDERS
------------------------------------------------- */

.input-dark::placeholder,
.package-card input::placeholder {
    color: var(--color-text-muted);
    opacity: 1;
}


/* -------------------------------------------------
   SELECT OPTIONS
------------------------------------------------- */

select.input-dark option,
.package-card select option {
    background-color: var(--color-surface-1);
    color: var(--color-text-primary);
}


/* Empty/default option */

select.input-dark option[value=""],
.package-card select option[value=""] {
    color: var(--color-text-muted);
}


/* -------------------------------------------------
   READONLY
------------------------------------------------- */

.input-dark[readonly] {
    opacity: .85;
    cursor: default;
}


/* -------------------------------------------------
   DISABLED
------------------------------------------------- */

.input-dark:disabled,
.package-card input:disabled,
.package-card select:disabled {
    background-color: var(--color-surface-disabled);
    color: var(--color-text-disabled);

    opacity: .7;
    cursor: not-allowed;
}


/* -------------------------------------------------
   REMOVE OLD MICROSOFT SELECT ARROW
------------------------------------------------- */

select::-ms-expand {
    display: none;
}


/* -------------------------------------------------
   INPUT WRAPPER / ICON
------------------------------------------------- */

.input-wrap {
    position: relative;
}

.input-wrap i {
    position: absolute;

    right: var(--space-md);
    top: 50%;

    transform: translateY(-50%);

    color: var(--color-accent-gold);

    cursor: pointer;

    transition: var(--transition-fast);
}

.input-wrap i:hover {
    color: var(--color-accent-gold-hi);
}


/* -------------------------------------------------
   SEARCH INPUT ICON
------------------------------------------------- */

.searchbox .input-icon-right {
    position: absolute;

    right: 0;
    top: 0;

    width: 36px;
    height: 36px;

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: var(--fs-heading-md);

    color: var(--color-accent-gold);
}

/* =====================================================================
   10. PROGRESS / GAUGES
   Mirrors the site's .gauge-bar / .gauge-fill risk meters.
===================================================================== */
.bar{
  height:6px;
  border-radius: var(--radius-pill);
  background: rgba(255,255,255,.06);
  overflow:hidden;
  margin-top: var(--space-xs);
}
.fill{ height:100%; background: var(--gradient-brand-text); }

.gauge-container{ width:200px; height:200px; margin:auto; }
.gauge-value{
  position:absolute; top:65%; left:50%;
  transform:translate(-50%,-50%);
  font-family: var(--font-family-number);
  font-size: var(--fs-heading-md); font-weight:700;
  color: var(--color-text-primary);
}

/* =====================================================================
   11. RANK LADDER
===================================================================== */
.rank-ladder{
  position:relative;
  display:flex; flex-direction:column;
  gap: var(--space-6, 26px);
  padding-left:64px;
}
.rank-ladder::before{
  content:""; position:absolute; left:30px; top:0; bottom:0; width:2px;
  background: linear-gradient(to bottom, transparent, var(--color-accent-gold), transparent);
  opacity:.7;
}
.rank-node{ position:relative; }
.rank-node::after{
  content:""; position:absolute; left:-36px; top:46px;
  width:2px; height:calc(100% + 12px);
  background: var(--color-border-subtle);
}
.rank-node:last-child::after{ display:none; }

.rank-dot{
  position:absolute; left:-64px; top:10px;
  width:42px; height:42px;
  border-radius: var(--radius-pill);
  display:flex; align-items:center; justify-content:center;
  background: radial-gradient(circle at center, #1a1408, #000);
  border: 1px solid var(--color-border-subtle);
  z-index: var(--z-raised);
}
.dot-core{
  width:12px; height:12px;
  border-radius: var(--radius-pill);
  background: var(--color-accent-gold);
  box-shadow: var(--shadow-glow-gold);
}
.rank-node.active .dot-core{ background: var(--color-success); box-shadow: var(--shadow-glow-success); }
.rank-node.done   .dot-core{ background: var(--color-accent-gold-hi); box-shadow: var(--shadow-glow-gold); }
.rank-node.locked .dot-core{ background: var(--color-danger);  box-shadow:none; }

.rank-body{
  width:100%;
  background: var(--gradient-surface-glass);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-card-lg);
  padding: var(--space-md);
  
  transition: var(--transition-base);
}
.rank-node.active .rank-body{
  border-color: var(--color-success);
  box-shadow: 0 0 18px var(--color-success-glow);
}

.rank-head{ display:flex; justify-content:space-between; align-items:flex-start; }
.rank-info{ display:flex; flex-direction:column; }
.rank-title{ font-family: var(--font-family-button); font-size: var(--fs-caption); color: var(--color-text-muted); letter-spacing:.5px; }
.rank-amount{
  font-family: var(--font-family-number);
  font-size: var(--fs-heading-lg); font-weight:700; margin-top:2px;
  background: var(--gradient-brand-text);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip:text;
}
.rank-sub{ font-size: var(--fs-caption); color: var(--color-text-muted); margin-top:2px; }
.rank-monthly{ font-family: var(--font-family-number); font-size: var(--fs-small); color: var(--color-text-primary); margin-top:2px; }
.rank-duration{ font-size: var(--fs-caption); color: var(--color-text-muted); }

.rank-badge{ font-family: var(--font-family-button); font-size: var(--fs-label); padding: var(--space-xs) var(--space-sm); border-radius: var(--radius-pill); font-weight:600; }

.rank-progress{ margin-top: var(--space-4, 14px); display:flex; flex-direction:column; gap: var(--space-sm); }
.rank-metric{ font-size: var(--fs-caption); }
.metric-top{ display:flex; justify-content:space-between; color: var(--color-text-muted); }

.rank-target-box{
  margin-top: var(--space-4, 14px);
  padding: var(--space-sm) var(--space-3, 12px);
  border-radius: var(--radius-control);
  background: var(--color-info-bg);
  border: 1px solid var(--color-info-border);
  display:flex; justify-content:space-between; align-items:center;
}
.rank-target-label{ font-size: var(--fs-caption); color: var(--color-text-muted); }
.rank-target-value{ font-family: var(--font-family-number); font-size: var(--fs-small); font-weight:600; color: var(--color-text-primary); }

.rank-foot{
  margin-top: var(--space-sm);
  display:flex; justify-content:space-between;
  font-size: var(--fs-caption); color: var(--color-text-muted);
}

/* =====================================================================
   12. COUNTDOWN CARD
===================================================================== */
.countdown-card{
  border-radius: var(--radius-card);
  background: rgba(255,255,255,.03);
  
  border: 1px solid var(--color-border-subtle);
  box-shadow: var(--shadow-resting);
  max-width:420px;
  margin: var(--space-xl) auto;
  color: var(--color-text-primary);
}
.countdown-card h4{
  font-family: var(--font-family-display);
  font-size: var(--fs-heading-md);
  background: var(--gradient-brand-text);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip:text;
}
.countdown-card small{ font-size: var(--fs-caption); color: var(--color-text-muted); }

/* =====================================================================
   13. TRADING ACCOUNT CARD
===================================================================== */
.ta-card{
  background: var(--gradient-surface-glass);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-card-lg);
  padding: var(--space-4, 14px);
  margin-bottom: var(--space-3, 12px);
  
  box-shadow: var(--shadow-resting-strong);
  transition: var(--transition-base);
}
.ta-card:hover{
  border-color: var(--color-border-default);
  box-shadow: var(--shadow-hover-success);
  transform: translateY(-2px);
}
.ta-top{ display:flex; justify-content:space-between; align-items:flex-start; margin-bottom: var(--space-3, 12px); gap: var(--space-sm); }
.ta-broker{ font-family: var(--font-family-display); font-size: var(--fs-lg, 16px); font-weight:600; line-height:1.2; color: var(--color-text-primary); }
.ta-server{ font-size: var(--fs-caption); color: var(--color-text-muted); margin-top:3px; letter-spacing:.3px; }
.ta-row{
  display:flex; align-items:center; justify-content:space-between;
  padding: var(--space-3, 12px) 0;
  border-top: 1px solid var(--color-border-hairline);
  gap: var(--space-3, 12px);
}
.ta-label{ font-family: var(--font-family-button); font-size: var(--fs-label); font-weight:600; color: var(--color-text-muted); text-transform:uppercase; letter-spacing:.7px; flex-shrink:0; }
.ta-value{ font-family: var(--font-family-number); font-size: var(--fs-body); font-weight:600; color: var(--color-text-primary); text-align:right; max-width:65%; word-break:break-word; line-height:1.35; }
.ta-empty{
  background: var(--gradient-surface-glass);
  border: 1px dashed var(--color-border-dashed);
  border-radius: var(--radius-card-lg);
  padding: var(--space-6, 22px) var(--space-4, 16px);
  text-align:center;
  color: var(--color-text-muted);
  font-weight:600;
  
}

/* =====================================================================
   14. PACKAGE CARD
   Mirrors the site's .course-card, including a gold "Popular" badge.
===================================================================== */
.package-card{
  background: var(--gradient-surface-package);
  color: var(--color-text-faint);
  border-radius: var(--radius-card-lg);
  padding: var(--space-5, 20px);
  margin-bottom: var(--space-5, 20px);
  transition: var(--transition-base);
  border: 1px solid var(--color-border-subtle);
  
  cursor:pointer;
  position:relative;
  overflow:hidden;
}
.package-card:hover{
  transform: translateY(-8px);
  border-color: var(--color-border-strong);
  box-shadow: var(--shadow-hover-info);
}
.package-card.popular{
  border-color: var(--color-border-strong);
  box-shadow: 0 0 0 1px rgba(212,175,55,.2), 0 30px 60px -30px rgba(212,175,55,.3);
}
.package-badge{
  position:absolute; top:-12px; right: var(--space-lg);
  background: var(--gradient-brand);
  color: var(--color-text-inverse);
  font-family: var(--font-family-button);
  font-size: var(--fs-caption); font-weight:700;
  padding: var(--space-xs) var(--space-md);
  border-radius: var(--radius-pill);
  letter-spacing:.5px;
}
.package-title{
  font-family: var(--font-family-display);
  font-size: var(--fs-heading-sm);
  font-weight:600;
  margin-bottom: var(--space-4, 15px);
  display:flex; align-items:center; gap: var(--space-xs);
  background: var(--gradient-brand-text);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip:text;
}
.package-detail{
  display:flex; justify-content:space-between;
  padding: var(--space-xs) 0;
  border-bottom: 1px solid var(--color-border-subtle);
  font-size: var(--fs-small);
}
.package-detail span{ font-family: var(--font-family-number); font-weight:700; color: var(--color-accent-gold); }
.package-icon{ color: var(--color-accent-gold); font-size: var(--fs-body-lg); }
.package-card p{ margin-bottom: var(--space-5, 20px); font-size: var(--fs-small); color: var(--color-text-muted); }

/* =====================================================================
   15. ACTION BOX
===================================================================== */
.action-box{
  border-radius: var(--radius-card);
  background: rgba(255,255,255,.03);
  border: 1px solid var(--color-border-subtle);
  transition: var(--transition-base);
  cursor:pointer;
}
.action-box:hover{
  transform: translateY(-5px) scale(1.05);
  border-color: var(--color-border-strong);
  box-shadow: var(--shadow-hover-gold);
}
.action-box i{ transition: var(--transition-base); color: var(--color-accent-gold); }
.action-box:hover i{
  color: var(--color-accent-gold-hi);
  text-shadow: 0 0 12px rgba(212,175,55,.8);
  transform: scale(1.2);
}

/* =====================================================================
   16. UTILITY CLASSES
===================================================================== */
.surface-1{ background: var(--color-surface-1); }
.surface-2{ background: var(--color-surface-2); }
.rounded-control{ border-radius: var(--radius-control); }
.rounded-card{ border-radius: var(--radius-card); }
.rounded-card-lg{ border-radius: var(--radius-card-lg); }
.rounded-pill{ border-radius: var(--radius-pill); }
.shadow-resting{ box-shadow: var(--shadow-resting); }
.shadow-hover-info{ box-shadow: var(--shadow-hover-info); }
.custom-divider{ border-bottom: 1px solid var(--color-border-subtle) !important; }

/* =====================================================================
   17. RESPONSIVE — MOBILE COMPACTION
===================================================================== */
@media (max-width:576px){

  .action-box{ padding: var(--space-sm) 6px !important; border-radius: var(--radius-control); min-height:70px; }
  .action-box i{ font-size:18px !important; margin-bottom: var(--space-1, 4px) !important; }
  .action-box div{ font-size: var(--fs-caption); line-height:1.1; }
  .action-box:hover{ transform:none; box-shadow: 0 4px 12px rgba(212,175,55,.15); }
  .action-box:hover i{ transform:none; text-shadow:none; }

  .row{ margin-left:-4px; margin-right:-4px; }
  .col-4{ padding-left:4px; padding-right:4px; }

  .ta-card{ padding: var(--space-3, 12px); border-radius: var(--radius-card); }
  .ta-broker{ font-size: var(--fs-md, 15px); }
  .ta-value{ font-size: var(--fs-small); max-width:58%; }
  .ta-status{ font-size: var(--fs-2xs, 9px); padding: var(--space-1, 5px) var(--space-3, 10px); }
}

/* =====================================================================
   REDUCED MOTION
===================================================================== */
@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001s !important; transition-duration:.001s !important; }
}
/* =====================================================================
   SIDEBAR & MENU COMPONENTS
   Premium compact terminal drawer
===================================================================== */

/* ---------------------------------------------------------------------
   PANEL
--------------------------------------------------------------------- */

.sidebar-panel {
    position: relative;
    min-height: 100%;

    background:
        linear-gradient(
            180deg,
            rgba(212,175,55,.035) 0,
            transparent 160px
        ),
        var(--color-bg-canvas);

    border-right: 1px solid var(--color-border-subtle);

    color: var(--color-text-primary);
}


/* subtle premium top accent */

.sidebar-panel::before {
    content: "";

    position: absolute;
    top: 0;
    left: 0;
    right: 0;

    height: 2px;

    background: var(--gradient-brand);

    opacity: .9;
}


/* ---------------------------------------------------------------------
   PROFILE HEADER
--------------------------------------------------------------------- */

.sidebar-profile-box {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: var(--space-sm);

    padding:
        var(--space-md)
        var(--space-md)
        var(--space-sm);

    background:
        linear-gradient(
            135deg,
            rgba(212,175,55,.06),
            transparent 65%
        );

    border-bottom: 1px solid var(--color-border-subtle);
}


.sidebar-profile-info {
    display: flex;
    align-items: center;

    gap: var(--space-sm);

    min-width: 0;
}


/* ---------------------------------------------------------------------
   AVATAR
--------------------------------------------------------------------- */

.sidebar-avatar {
    width: 42px;
    height: 42px;

    flex: 0 0 42px;

    object-fit: cover;

    border-radius: var(--radius-control);

    background: var(--color-surface-1);

    border: 1px solid var(--color-border-strong);

    box-shadow:
        0 0 0 3px rgba(212,175,55,.05),
        var(--shadow-resting);
}


/* ---------------------------------------------------------------------
   PROFILE TEXT
   Works if profile header contains name / ID / email etc.
--------------------------------------------------------------------- */

.sidebar-profile-info > div {
    min-width: 0;
}

.sidebar-profile-info strong {
    display: block;

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

    font-family: var(--font-family-button);
    font-size: var(--fs-small);
    font-weight: 600;

    color: var(--color-text-primary);
}

.sidebar-profile-info small {
    display: block;

    margin-top: 2px;

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

    font-size: var(--fs-caption);

    color: var(--color-text-muted);
}


/* ---------------------------------------------------------------------
   CLOSE BUTTON
--------------------------------------------------------------------- */

.sidebar-close {
    width: 34px;
    height: 34px;

    flex: 0 0 34px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 0;

    border-radius: var(--radius-control);

    border: 1px solid var(--color-border-subtle);

    background: rgba(255,255,255,.025);

    color: var(--color-text-muted);

    font-size: var(--fs-heading-sm);

    cursor: pointer;

    transition: var(--transition-fast);
}

.sidebar-close:hover {
    color: var(--color-accent-gold);

    border-color: var(--color-border-strong);

    background: var(--color-warning-bg);
}


/* ---------------------------------------------------------------------
   SECTION TITLE
--------------------------------------------------------------------- */

.sidebar-title {
    display: flex;
    align-items: center;

    gap: var(--space-xs);

    margin:
        var(--space-md)
        var(--space-md)
        var(--space-xs);

    padding: 0;

    font-family: var(--font-family-button);
    font-size: var(--fs-label);
    font-weight: 600;

    text-transform: uppercase;
    letter-spacing: 1.2px;

    color: var(--color-text-muted);
}


/* small gold marker */

.sidebar-title::before {
    content: "";

    width: 3px;
    height: 10px;

    flex: 0 0 3px;

    border-radius: var(--radius-pill);

    background: var(--color-accent-gold);
}


/* ---------------------------------------------------------------------
   MENU LIST
--------------------------------------------------------------------- */

.sidebar-list {
    display: flex;
    flex-direction: column;

    gap: 3px;

    list-style: none;

    margin: 0;

    padding:
        0
        var(--space-sm);
}


/* ---------------------------------------------------------------------
   MENU ITEM
--------------------------------------------------------------------- */

.sidebar-item {
    position: relative;

    display: flex;
    align-items: center;

    gap: var(--space-sm);

    min-height: 46px;

    padding:
        5px
        var(--space-sm);

    border-radius: var(--radius-control);

    border: 1px solid transparent;

    background: transparent;

    color: var(--color-text-faint);

    text-decoration: none;

    transition: var(--transition-fast);
}


/* hover */

.sidebar-item:hover {
    color: var(--color-text-primary);

    background: rgba(212,175,55,.045);

    border-color: var(--color-border-default);
}


/* ---------------------------------------------------------------------
   ICON BOX
--------------------------------------------------------------------- */

.sidebar-icon-box {
    width: 34px;
    height: 34px;

    flex: 0 0 34px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: var(--radius-control);

    background: rgba(255,255,255,.025);

    color: var(--color-accent-gold);

    border: 1px solid var(--color-border-subtle);

    font-size: var(--fs-heading-sm);

    transition: var(--transition-fast);
}


/* ionicons / font awesome */

.sidebar-icon-box ion-icon,
.sidebar-icon-box i {
    font-size: 18px;
}


/* icon reacts with row */

.sidebar-item:hover .sidebar-icon-box {
    color: var(--color-accent-gold-hi);

    background: var(--color-warning-bg);

    border-color: var(--color-warning-border);

    box-shadow: 0 0 12px rgba(212,175,55,.08);
}


/* ---------------------------------------------------------------------
   MENU LABEL
--------------------------------------------------------------------- */

.sidebar-item .sidebar-label {
    min-width: 0;

    flex: 1;

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

    font-family: var(--font-family-button);
    font-size: var(--fs-small);
    font-weight: 500;

    color: inherit;
}


/* Support existing markup without sidebar-label */

.sidebar-item > span:not(.sidebar-icon-box),
.sidebar-item > div:not(.sidebar-icon-box) {
    min-width: 0;
}


/* ---------------------------------------------------------------------
   OPTIONAL RIGHT CHEVRON
--------------------------------------------------------------------- */

.sidebar-item .sidebar-arrow {
    flex-shrink: 0;

    margin-left: auto;

    color: var(--color-text-disabled);

    font-size: var(--fs-small);

    transition: var(--transition-fast);
}

.sidebar-item:hover .sidebar-arrow {
    color: var(--color-accent-gold);

    transform: translateX(2px);
}


/* ---------------------------------------------------------------------
   ACTIVE MENU ITEM

   Supports:
   class="sidebar-item active"
   or
   class="sidebar-item sidebar-active"
--------------------------------------------------------------------- */

.sidebar-item.active,
.sidebar-item.sidebar-active {
    color: var(--color-text-primary);

    background:
        linear-gradient(
            90deg,
            rgba(212,175,55,.12),
            rgba(212,175,55,.025)
        );

    border-color: var(--color-border-default);
}


/* gold indicator */

.sidebar-item.active::before,
.sidebar-item.sidebar-active::before {
    content: "";

    position: absolute;

    left: -1px;
    top: 9px;
    bottom: 9px;

    width: 3px;

    border-radius: 0 var(--radius-pill) var(--radius-pill) 0;

    background: var(--color-accent-gold);

    box-shadow: var(--shadow-glow-gold);
}


.sidebar-item.active .sidebar-icon-box,
.sidebar-item.sidebar-active .sidebar-icon-box {
    color: var(--color-text-inverse);

    background: var(--gradient-brand);

    border-color: transparent;

    box-shadow: 0 4px 14px rgba(212,175,55,.18);
}


/* ---------------------------------------------------------------------
   OPTIONAL MENU BADGE

   Example:
   <span class="sidebar-badge">3</span>
--------------------------------------------------------------------- */

.sidebar-badge {
    min-width: 20px;
    height: 20px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    flex-shrink: 0;

    padding: 0 6px;

    border-radius: var(--radius-pill);

    background: var(--color-warning-bg);

    border: 1px solid var(--color-warning-border);

    color: var(--color-accent-gold);

    font-family: var(--font-family-number);
    font-size: var(--fs-label);
    font-weight: 700;
}


/* ---------------------------------------------------------------------
   DIVIDER BETWEEN MENU GROUPS
--------------------------------------------------------------------- */

.sidebar-divider {
    height: 1px;

    margin:
        var(--space-sm)
        var(--space-md);

    background: var(--color-border-hairline);
}


/* ---------------------------------------------------------------------
   DANGER / LOGOUT
--------------------------------------------------------------------- */

.sidebar-item.sidebar-danger {
    color: var(--color-danger);
}

.sidebar-icon-danger {
    width: 34px;
    height: 34px;

    flex: 0 0 34px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: var(--radius-control);

    background: var(--color-danger-bg);

    color: var(--color-danger);

    border: 1px solid var(--color-danger-border);

    font-size: var(--fs-heading-sm);

    transition: var(--transition-fast);
}

.sidebar-icon-danger ion-icon,
.sidebar-icon-danger i {
    font-size: 18px;
}

.sidebar-text-danger {
    color: var(--color-danger) !important;

    font-family: var(--font-family-button);

    font-size: var(--fs-small);

    font-weight: 600;
}


.sidebar-item:hover .sidebar-icon-danger {
    background: rgba(231,76,60,.15);

    box-shadow: 0 0 12px rgba(231,76,60,.10);
}


/* ---------------------------------------------------------------------
   FOOTER / LOGOUT AREA
--------------------------------------------------------------------- */

.sidebar-footer {
    margin-top: var(--space-md);

    padding:
        var(--space-sm);

    border-top: 1px solid var(--color-border-subtle);
}


/* ---------------------------------------------------------------------
   MOBILE
--------------------------------------------------------------------- */

@media (max-width: 576px) {

    .sidebar-profile-box {
        padding:
            var(--space-sm)
            var(--space-md);
    }

    .sidebar-avatar {
        width: 40px;
        height: 40px;

        flex-basis: 40px;
    }

    .sidebar-list {
        padding:
            0
            var(--space-xs);
    }

    .sidebar-item {
        min-height: 44px;

        padding:
            5px
            var(--space-sm);
    }

    .sidebar-icon-box,
    .sidebar-icon-danger {
        width: 32px;
        height: 32px;

        flex-basis: 32px;
    }

    .sidebar-icon-box ion-icon,
    .sidebar-icon-box i,
    .sidebar-icon-danger ion-icon,
    .sidebar-icon-danger i {
        font-size: 17px;
    }

    .sidebar-title {
        margin-left: var(--space-sm);
        margin-right: var(--space-sm);
    }
}
/* ============================================================
   AFX / QUANTEDGE TOKENIZED WITHDRAWAL UI
   Requires existing global :root token system.
============================================================ */

.withdraw-page,
.withdraw-hero,
.withdraw-balance-section {
    width: 100%;
}

.withdraw-page {
    padding-bottom: var(--space-xl);
}

.withdraw-container {
    width: 100%;
    max-width: 680px;
    margin: 0 auto;
    padding-left: var(--space-md);
    padding-right: var(--space-md);
}


/* ============================================================
   BANNER
============================================================ */

.withdraw-hero {
    margin-top: -40px;
}

.withdraw-banner {
    overflow: hidden;
    border-radius: var(--radius-card-lg);
    border: 1px solid var(--color-border-subtle);
    background: var(--gradient-surface-card);
    box-shadow: var(--shadow-resting);
}

.withdraw-banner-img {
    display: block;
    width: 100%;
    height: auto;
}


/* ============================================================
   BALANCE
============================================================ */

.withdraw-balance-section {
    margin-top: var(--space-sm);
    margin-bottom: var(--space-md);
}

.withdraw-balance-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);

    padding: var(--space-md);

    border-radius: var(--radius-card);
    border: 1px solid var(--color-border-subtle);

    background:
        linear-gradient(
            135deg,
            rgba(212, 175, 55, .07),
            transparent 45%
        ),
        var(--gradient-surface-glass);

    box-shadow: var(--shadow-resting);
}

.withdraw-balance-left {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    min-width: 0;
}

.withdraw-balance-icon {
    width: 40px;
    height: 40px;
    flex: 0 0 40px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: var(--radius-control);

    color: var(--color-accent-gold);

    background: var(--color-warning-bg);
    border: 1px solid var(--color-warning-border);
}

.withdraw-balance-copy {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.withdraw-balance-label {
    font-family: var(--font-family-button);
    font-size: var(--fs-caption);
    font-weight: 600;
    color: var(--color-text-primary);
}

.withdraw-balance-subtitle {
    margin-top: 2px;

    font-size: var(--fs-label);
    color: var(--color-text-muted);

    text-transform: uppercase;
    letter-spacing: .8px;
}

.withdraw-balance-value {
    display: flex;
    align-items: baseline;
    justify-content: flex-end;
    gap: 4px;

    white-space: nowrap;

    font-family: var(--font-family-number);
    color: var(--color-text-primary);
}

.withdraw-balance-currency {
    font-size: var(--fs-small);
    color: var(--color-accent-gold);
}

.withdraw-balance-amount {
    font-size: var(--fs-heading-md);
    font-weight: 700;
}


/* ============================================================
   MAIN CARD
============================================================ */

.withdraw-card {
    overflow: hidden;

    padding: 0;

    background: var(--gradient-surface-card);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-card-lg);

    box-shadow: var(--shadow-resting-strong);
}


/* ============================================================
   HEADER
============================================================ */

.withdraw-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-md);

    padding: var(--space-md);

    border-bottom: 1px solid var(--color-border-subtle);

    background:
        linear-gradient(
            135deg,
            rgba(212,175,55,.07),
            transparent 55%
        );
}

.withdraw-card-title-wrap {
    display: flex;
    align-items: center;
    gap: var(--space-sm);

    min-width: 0;
}

.withdraw-token-icon {
    width: 46px;
    height: 46px;
    flex: 0 0 46px;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 8px;

    border-radius: var(--radius-control);

    background: rgba(255,255,255,.035);
    border: 1px solid var(--color-border-subtle);
}

.withdraw-token-icon img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.withdraw-eyebrow,
.withdraw-modal-eyebrow {
    margin-bottom: 3px;

    font-family: var(--font-family-button);
    font-size: var(--fs-label);
    font-weight: 600;

    text-transform: uppercase;
    letter-spacing: 1.3px;

    color: var(--color-accent-gold);
}

.withdraw-title {
    margin: 0;

    font-family: var(--font-family-display);
    font-size: var(--fs-heading-md);
    line-height: 1.15;

    color: var(--color-text-primary);
}

.withdraw-title-meta {
    display: flex;
    align-items: center;
    gap: 6px;

    margin-top: 4px;

    font-size: var(--fs-caption);
    color: var(--color-text-muted);
}

.withdraw-meta-dot {
    width: 3px;
    height: 3px;

    border-radius: var(--radius-pill);

    background: var(--color-text-muted);
}

.withdraw-network-badge,
.withdraw-network-inline {
    display: inline-flex;
    align-items: center;
    gap: 6px;

    font-family: var(--font-family-button);
    font-size: var(--fs-label);
    font-weight: 600;

    color: var(--color-success);
}

.withdraw-network-badge {
    flex-shrink: 0;

    padding: 7px 10px;

    border-radius: var(--radius-pill);

    background: var(--color-success-bg);
    border: 1px solid var(--color-success-border);
}

.withdraw-network-dot {
    width: 6px;
    height: 6px;

    flex: 0 0 6px;

    border-radius: var(--radius-pill);

    background: var(--color-success);

    box-shadow: var(--shadow-glow-success);
}


/* ============================================================
   FORM
============================================================ */

.withdraw-form {
    padding: var(--space-md);
}

.withdraw-field + .withdraw-field {
    margin-top: var(--space-md);
}

.withdraw-label-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-sm);

    margin-bottom: 7px;
}

.withdraw-label {
    display: block;

    margin-bottom: 7px;

    font-family: var(--font-family-button);
    font-size: var(--fs-caption);
    font-weight: 600;

    color: var(--color-text-faint);
}

.withdraw-label-row .withdraw-label {
    margin-bottom: 0;
}

.withdraw-minimum {
    font-size: var(--fs-label);
    color: var(--color-text-muted);
}

.withdraw-minimum strong {
    font-family: var(--font-family-number);
    color: var(--color-accent-gold);
}

.withdraw-input-group {
    position: relative;

    display: flex;
    align-items: stretch;

    width: 100%;

    border-radius: var(--radius-control);
    border: 1px solid var(--color-border-subtle);

    background: var(--color-surface-input);

    transition: var(--transition-base);
}

.withdraw-input-group:focus-within {
    border-color: var(--color-accent-gold);
    box-shadow: var(--shadow-focus-ring);
}

.withdraw-input-icon {
    width: 44px;
    flex: 0 0 44px;

    display: flex;
    align-items: center;
    justify-content: center;

    color: var(--color-accent-gold);

    border-right: 1px solid var(--color-border-hairline);
}

.withdraw-input {
    min-width: 0;
    width: 100%;

    padding: 12px;

    border: 0;
    outline: 0;

    background: transparent;

    color: var(--color-text-primary);

    font-family: var(--font-family-body);
    font-size: var(--fs-small);
}

.withdraw-input::placeholder {
    color: var(--color-text-disabled);
}

.withdraw-input:-webkit-autofill,
.withdraw-input:-webkit-autofill:hover,
.withdraw-input:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--color-text-primary);
    transition: background-color 9999s ease-in-out 0s;
}

.withdraw-scan-btn {
    width: 46px;
    flex: 0 0 46px;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 0;

    border: 0;
    border-left: 1px solid var(--color-border-hairline);

    background: transparent;

    color: var(--color-accent-gold);

    font-size: 18px;

    cursor: pointer;

    transition: var(--transition-fast);
}

.withdraw-scan-btn:hover {
    color: var(--color-accent-gold-hi);
    background: var(--color-warning-bg);
}

.withdraw-input-suffix {
    display: flex;
    align-items: center;
    justify-content: center;

    padding: 0 var(--space-sm);

    border-left: 1px solid var(--color-border-hairline);

    font-family: var(--font-family-number);
    font-size: var(--fs-caption);
    font-weight: 700;

    color: var(--color-accent-gold);
}

.withdraw-field-hint {
    display: flex;
    align-items: flex-start;
    gap: 6px;

    margin-top: 7px;

    font-size: var(--fs-label);
    line-height: 1.5;

    color: var(--color-text-muted);
}

.withdraw-field-hint i {
    margin-top: 2px;

    color: var(--color-success);
}

.withdraw-field-hint strong {
    color: var(--color-text-faint);
}

.withdraw-submit {
    min-height: 44px;

    margin-top: var(--space-lg);

    font-size: var(--fs-small);
}

.withdraw-submit i {
    transition: transform var(--p-duration-fast) ease;
}

.withdraw-submit:hover i {
    transform: translateX(3px);
}


/* ============================================================
   AVAILABILITY
============================================================ */

.withdraw-availability {
    display: flex;
    align-items: center;
    gap: var(--space-sm);

    margin-top: var(--space-lg);
    padding: var(--space-sm);

    border-radius: var(--radius-control);

    background: var(--color-warning-bg);
    border: 1px solid var(--color-warning-border);
}

.withdraw-availability-icon {
    width: 36px;
    height: 36px;
    flex: 0 0 36px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: var(--radius-control);

    color: var(--color-warning);

    background: rgba(212,175,55,.08);
}

.withdraw-availability-copy {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.withdraw-availability-copy strong {
    font-family: var(--font-family-button);
    font-size: var(--fs-caption);

    color: var(--color-warning);
}

.withdraw-availability-copy span {
    font-size: var(--fs-label);
    line-height: 1.45;

    color: var(--color-text-muted);
}


/* ============================================================
   DETAILS
============================================================ */

.withdraw-details {
    padding: var(--space-md);

    border-top: 1px solid var(--color-border-subtle);
}

.withdraw-section-heading {
    display: flex;
    align-items: center;
    gap: 8px;

    margin-bottom: var(--space-sm);

    font-family: var(--font-family-button);
    font-size: var(--fs-caption);
    font-weight: 600;

    color: var(--color-text-primary);
}

.withdraw-section-heading-icon {
    color: var(--color-accent-gold);
}

.withdraw-detail-list {
    border-radius: var(--radius-control);

    border: 1px solid var(--color-border-hairline);

    background: rgba(255,255,255,.015);

    overflow: hidden;
}

.withdraw-detail-row {
    display: grid;
    grid-template-columns: minmax(110px, .75fr) minmax(0, 1.25fr);
    align-items: center;
    gap: var(--space-sm);

    padding: 11px var(--space-sm);

    border-bottom: 1px solid var(--color-border-hairline);
}

.withdraw-detail-row:last-child {
    border-bottom: 0;
}

.withdraw-detail-label {
    font-family: var(--font-family-button);
    font-size: var(--fs-label);
    font-weight: 600;

    text-transform: uppercase;
    letter-spacing: .5px;

    color: var(--color-text-muted);
}

.withdraw-detail-value {
    min-width: 0;

    text-align: right;

    font-family: var(--font-family-number);
    font-size: var(--fs-caption);
    font-weight: 600;

    color: var(--color-text-faint);
}

.withdraw-currency-inline {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 7px;
}

.withdraw-currency-inline img {
    width: 20px;
    height: 20px;

    object-fit: contain;
}

.withdraw-contract-link {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 7px;

    max-width: 100%;

    color: var(--color-accent-gold);

    transition: var(--transition-fast);
}

.withdraw-contract-link:hover {
    color: var(--color-accent-gold-hi);
}

.withdraw-contract-address {
    display: block;

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}


/* ============================================================
   WARNING
============================================================ */

.withdraw-warning {
    margin: 0 var(--space-md) var(--space-md);
    padding: var(--space-sm);

    border-radius: var(--radius-control);

    background: var(--color-warning-bg);
    border: 1px solid var(--color-warning-border);
}

.withdraw-warning-head {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.withdraw-warning-icon {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: var(--radius-control);

    color: var(--color-warning);

    background: rgba(212,175,55,.08);
}

.withdraw-warning-head > div:last-child {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.withdraw-warning-head strong {
    font-family: var(--font-family-button);
    font-size: var(--fs-caption);

    color: var(--color-warning);
}

.withdraw-warning-head span {
    font-size: var(--fs-label);
    line-height: 1.45;

    color: var(--color-text-muted);
}

.withdraw-warning-list {
    list-style: none;

    margin: var(--space-sm) 0 0;
    padding: var(--space-sm) 0 0;

    border-top: 1px solid var(--color-warning-border);
}

.withdraw-warning-list li {
    display: flex;
    align-items: flex-start;
    gap: 8px;

    font-size: var(--fs-label);
    line-height: 1.5;

    color: var(--color-text-muted);
}

.withdraw-warning-list li + li {
    margin-top: 7px;
}

.withdraw-warning-list strong {
    color: var(--color-text-faint);
}

.withdraw-warning-check {
    width: 16px;
    height: 16px;
    flex: 0 0 16px;

    display: flex;
    align-items: center;
    justify-content: center;

    margin-top: 2px;

    border-radius: var(--radius-pill);

    font-size: 7px;

    color: var(--color-success);

    background: var(--color-success-bg);
    border: 1px solid var(--color-success-border);
}


/* ============================================================
   SECURITY
============================================================ */

.withdraw-security-note {
    display: flex;
    align-items: flex-start;
    gap: 8px;

    padding: 0 var(--space-md) var(--space-md);

    color: var(--color-text-muted);
}

.withdraw-security-note > i {
    flex-shrink: 0;

    margin-top: 2px;

    color: var(--color-success);
}

.withdraw-security-note p {
    margin: 0;

    font-size: var(--fs-label);
    line-height: 1.55;
}


/* ============================================================
   QR MODAL
============================================================ */

.withdraw-modal-content {
    overflow: hidden;

    background: var(--gradient-surface-card);

    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-card-lg);

    box-shadow: var(--shadow-resting-strong);

    color: var(--color-text-primary);
}

.withdraw-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);

    padding: var(--space-md);

    border-bottom: 1px solid var(--color-border-subtle);
}

.withdraw-modal-header h4 {
    margin: 0;

    font-size: var(--fs-heading-sm);
}

.withdraw-modal-close {
    width: 36px;
    height: 36px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: var(--radius-control);

    border: 1px solid var(--color-border-subtle);

    background: rgba(255,255,255,.03);

    color: var(--color-text-primary);

    font-size: 22px;
    line-height: 1;

    cursor: pointer;
}

.withdraw-modal-body {
    padding: var(--space-md);
}

.withdraw-scanner-frame {
    position: relative;

    overflow: hidden;

    width: min(100%, 360px);
    aspect-ratio: 1 / 1;

    margin: 0 auto;

    border-radius: var(--radius-card);

    background: #000;
    border: 1px solid var(--color-border-subtle);
}

#withdrawQrPreview {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
}

.scanner-corner {
    position: absolute;

    width: 30px;
    height: 30px;

    border-color: var(--color-accent-gold);
    border-style: solid;

    pointer-events: none;
}

.scanner-corner-tl {
    top: 14px;
    left: 14px;

    border-width: 2px 0 0 2px;
}

.scanner-corner-tr {
    top: 14px;
    right: 14px;

    border-width: 2px 2px 0 0;
}

.scanner-corner-bl {
    bottom: 14px;
    left: 14px;

    border-width: 0 0 2px 2px;
}

.scanner-corner-br {
    right: 14px;
    bottom: 14px;

    border-width: 0 2px 2px 0;
}

.withdraw-scanner-help {
    margin: var(--space-sm) 0 0;

    text-align: center;

    font-size: var(--fs-caption);

    color: var(--color-text-muted);
}


/* ============================================================
   DESKTOP
============================================================ */

@media (min-width: 768px) {

    .withdraw-container {
        max-width: 760px;
    }

    .withdraw-card-header,
    .withdraw-form,
    .withdraw-details {
        padding: var(--space-lg);
    }

    .withdraw-warning {
        margin-left: var(--space-lg);
        margin-right: var(--space-lg);
        margin-bottom: var(--space-lg);
    }

    .withdraw-security-note {
        padding-left: var(--space-lg);
        padding-right: var(--space-lg);
        padding-bottom: var(--space-lg);
    }
}


/* ============================================================
   MOBILE
============================================================ */

@media (max-width: 576px) {

    .withdraw-container {
        padding-left: var(--space-sm);
        padding-right: var(--space-sm);
    }

    .withdraw-hero {
        margin-top: -30px;
    }

    .withdraw-banner,
    .withdraw-card {
        border-radius: var(--radius-card);
    }

    .withdraw-balance-card {
        padding: var(--space-sm);
    }

    .withdraw-balance-icon {
        width: 36px;
        height: 36px;
        flex-basis: 36px;
    }

    .withdraw-balance-amount {
        font-size: var(--fs-heading-sm);
    }

    .withdraw-card-header {
        padding: var(--space-sm);
    }

    .withdraw-token-icon {
        width: 40px;
        height: 40px;
        flex-basis: 40px;

        padding: 7px;
    }

    .withdraw-title {
        font-size: var(--fs-heading-sm);
    }

    .withdraw-network-badge {
        padding: 6px 8px;

        font-size: var(--fs-label);
    }

    .withdraw-form,
    .withdraw-details {
        padding: var(--space-sm);
    }

    .withdraw-detail-row {
        grid-template-columns: 100px minmax(0, 1fr);

        padding-left: 10px;
        padding-right: 10px;
    }

    .withdraw-warning {
        margin:
            0
            var(--space-sm)
            var(--space-sm);

        padding: 10px;
    }

    .withdraw-security-note {
        padding:
            0
            var(--space-sm)
            var(--space-sm);
    }

    .withdraw-input {
        font-size: 16px;
    }

    .withdraw-scan-btn {
        width: 44px;
        flex-basis: 44px;
    }

}


/* ============================================================
   VERY SMALL DEVICES
============================================================ */

@media (max-width: 380px) {

    .withdraw-card-header {
        align-items: center;
    }

    .withdraw-network-badge {
        font-size: 9px;
    }

    .withdraw-title-meta {
        font-size: 10px;
    }

    .withdraw-detail-row {
        grid-template-columns: 86px minmax(0, 1fr);
        gap: 8px;
    }

    .withdraw-detail-label {
        font-size: 9px;
    }

    .withdraw-detail-value {
        font-size: 10px;
    }

}
/* =====================================================================
   PROFILE COMPONENTS
===================================================================== */

.profile-avatar {
    width: 72px;
    height: 72px;

    display: block;
    object-fit: cover;

    border-radius: var(--radius-control);

    background: var(--color-surface-1);

    border: 1px solid var(--color-border-strong);

    box-shadow:
        0 0 0 3px rgba(212,175,55,.05),
        var(--shadow-resting);
}


.profile-avatar-action {
    position: absolute;

    right: -5px;
    bottom: -5px;

    width: 30px;
    height: 30px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: var(--radius-pill);

    background: var(--gradient-brand);

    color: var(--color-text-inverse);

    border: 2px solid var(--color-bg-canvas);

    box-shadow: var(--shadow-resting);

    font-size: 16px;

    text-decoration: none;

    transition: var(--transition-fast);
}

.profile-avatar-action:hover {
    transform: translateY(-1px);

    color: var(--color-text-inverse);

    box-shadow: var(--shadow-glow-gold);
}


.profile-detail-row {
    padding: var(--space-sm) var(--space-md);
}
/* =====================================================================
   PROFILE IMAGE UPLOAD
===================================================================== */

.profile-upload-preview {
    display: flex;
    align-items: center;
    justify-content: center;
}

.profile-avatar-lg {
    width: 120px;
    height: 120px;
}

.profile-upload-preview .profile-avatar-action {
    width: 34px;
    height: 34px;

    right: -4px;
    bottom: -4px;

    cursor: pointer;
}
/* =====================================================================
   SUPPORT CHAT
===================================================================== */

.support-chat-card {
    overflow: hidden;
    background: var(--color-bg-canvas);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-resting);
}


/* Header */

.support-chat-header {
    padding: var(--space-md);
    background: var(--color-bg-app);
    border-bottom: 1px solid var(--color-border-subtle);
}

.support-agent-icon,
.support-admin-avatar,
.support-empty-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;

    width: 36px;
    height: 36px;

    border-radius: var(--radius-control);

    background: var(--color-surface-input);
    border: 1px solid var(--color-border-subtle);

    color: var(--color-accent-gold);
    font-size: var(--fs-heading-sm);
}

.support-status {
    display: flex;
    align-items: center;
    gap: var(--space-xs);

    margin-top: 2px;

    color: var(--color-text-muted);
    font-size: var(--fs-caption);
}

.support-status-dot {
    width: 6px;
    height: 6px;
    flex-shrink: 0;

    border-radius: var(--radius-pill);
    background: var(--color-success);
}


/* Chat Area */

.support-chat-body {
    height: min(52vh, 420px);
    min-height: 300px;

    padding: var(--space-md);

    overflow-y: auto;
    overflow-x: hidden;

    background: var(--color-bg-app);
}


/* Message Rows */

.support-message {
    display: flex;
    align-items: flex-end;
    width: 100%;

    margin-bottom: var(--space-md);
}

.support-message-user {
    justify-content: flex-end;
}

.support-message-admin {
    justify-content: flex-start;
    gap: var(--space-sm);
}


/* Bubbles */

.chat-bubble {
    width: fit-content;
    max-width: min(78%, 420px);

    padding: var(--space-sm) var(--space-md);

    border-radius: var(--radius-control);

    word-wrap: break-word;
    overflow-wrap: anywhere;
}

.user-bubble {
    background: var(--color-accent-gold);
    color: var(--color-bg-app);

    border-bottom-right-radius: var(--radius-sm);
}

.admin-bubble {
    background: var(--color-surface-input);
    color: var(--color-text-primary);

    border: 1px solid var(--color-border-subtle);

    border-bottom-left-radius: var(--radius-sm);
}

.chat-message-text {
    font-size: var(--fs-body);
    line-height: 1.45;
}


/* Time + Status */

.chat-time {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 3px;

    margin-top: var(--space-xs);

    font-size: var(--fs-caption);
    opacity: 0.7;
}

.chat-status {
    font-size: var(--fs-caption);
    letter-spacing: -3px;
}

.chat-status-read {
    opacity: 1;
}


/* Admin Avatar */

.support-admin-avatar {
    width: 30px;
    height: 30px;

    font-size: var(--fs-body);
}


/* Empty State */

.support-empty {
    min-height: 220px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    gap: var(--space-xs);

    text-align: center;
}

.support-empty-icon {
    width: 44px;
    height: 44px;

    margin-bottom: var(--space-xs);

    font-size: var(--fs-heading-lg);
}


/* Composer */

.support-chat-footer {
    padding: var(--space-sm);

    background: var(--color-bg-canvas);
    border-top: 1px solid var(--color-border-subtle);
}

.support-chat-form {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.support-message-input {
    flex: 1;
    min-width: 0;
}

.support-message-input .input-dark {
    width: 100%;
    margin: 0;
}

.support-send-btn {
    width: 44px;
    min-width: 44px;
    height: 44px;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 0;
}

.support-send-btn ion-icon {
    font-size: var(--fs-heading-sm);
}


/* Mobile */

@media (max-width: 576px) {

    .support-chat-body {
        height: 52vh;
        min-height: 320px;

        padding: var(--space-sm);
    }

    .chat-bubble {
        max-width: 84%;
    }

    .support-admin-avatar {
        width: 28px;
        height: 28px;
    }
}