/* =====================================================================
   DELTA SUPPORT DESIGN SYSTEM
   Light, editorial forex/education theme — teal brand over a white
   canvas, with a small "dark panel" utility for hero-style features
   (matches the dark card treatment seen on deltasupport.io).
===================================================================== */

/* =====================================================================
   1. PRIMITIVE TOKENS
===================================================================== */
:root{

  /* ---- Primitive neutrals (light canvas) ---- */
  --p-white:            #FFFFFF;
  --p-bg-app:           #FFFFFF;   /* page background */
  --p-bg-canvas:        #F3F9F8;   /* secondary / sidebar background, soft mint */
  --p-bg-subtle:        #EAF5F3;   /* tinted section background */
  --p-card:             #FFFFFF;   /* card surface */
  --p-card-alt:         #F7FBFA;   /* card gradient end / disabled surface */

  /* ---- Ink ramp (text on light surfaces) ---- */
  --p-ink-900:          #0B1B22;   /* headings, primary text */
  --p-ink-700:          #33474E;   /* body / faint text */
  --p-ink-500:          #5B6E75;   /* muted text — 4.6:1 on white, passes AA */
  --p-ink-300:          #94A3A8;   /* disabled text */

  /* ---- Brand teal ramp (from deltasupport.io) ---- */
  --p-teal-300:         #B7EAE2;   /* light chip / tint background */
  --p-teal-400:         #22C6B5;   /* hi accent, gradient highlight */
  --p-teal-500:         #12A99C;   /* primary brand teal */
  --p-teal-600:         #0E8579;   /* deep teal — hover / pressed, AA-safe with white text */
  --p-teal-700:         #0A6459;   /* deepest teal — dark panels */

  /* ---- Dark panel primitives (for hero-style dark teal cards) ---- */
  --p-panel-900:        #071A1C;
  --p-panel-800:        #0B2426;

  /* ---- Status primitives ---- */
  --p-green-500:        #19A974;   /* success */
  --p-blue-500:         #2F7CF7;   /* info */
  --p-red-500:          #E5473A;   /* 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 ---- */
  --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 fixed font sizes (fallback / non-fluid contexts) ---- */
  --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 ---- */
  --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
   Component code below reads only from these — swap a mapping here
   and the whole app re-themes at once. Variable NAMES are kept
   identical to the previous gold/dark system (e.g. --color-accent-gold)
   so every existing component still works; only the VALUES changed.
===================================================================== */
:root{

  /* ---------- Surfaces ---------- */
  --color-bg-app:            var(--p-bg-app);
  --color-bg-canvas:         var(--p-bg-canvas);
  --color-surface-1:         var(--p-card);
  --color-surface-2:         var(--p-bg-subtle);
  --color-surface-solid:     var(--p-card);
  --color-surface-raised:    var(--p-card-alt);
  --color-surface-input:     rgba(11,27,34,.03);
  --color-surface-disabled:  #EEF3F2;

  /* ---------- Borders ---------- */
  --color-border-subtle:     rgba(11,27,34,.10);    /* hairline on white cards */
  --color-border-default:    rgba(18,169,156,.25);
  --color-border-strong:     rgba(18,169,156,.45);
  --color-border-dashed:     rgba(18,169,156,.30);
  --color-border-hairline:   rgba(11,27,34,.06);
  --color-border-sheen:      rgba(11,27,34,.05);

  /* ---------- Text ---------- */
  --color-text-primary:      var(--p-ink-900);
  --color-text-inverse:      #FFFFFF;                /* text placed on filled teal/dark surfaces */
  --color-text-muted:        var(--p-ink-500);
  --color-text-faint:        var(--p-ink-700);
  --color-text-disabled:     var(--p-ink-300);

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

  /* ---------- Status / feedback ---------- */
  --color-success:           var(--p-green-500);
  --color-warning:           var(--p-teal-600);       /* brand-coupled accent, mirrors original design */
  --color-danger:            var(--p-red-500);
  --color-info:              var(--p-blue-500);

  --color-success-bg:        rgba(25,169,116,.10);
  --color-success-border:    rgba(25,169,116,.25);
  --color-success-glow:      rgba(25,169,116,.30);

  --color-warning-bg:        rgba(18,169,156,.10);
  --color-warning-border:    rgba(18,169,156,.25);
  --color-warning-glow:      rgba(18,169,156,.30);

  --color-danger-bg:         rgba(229,71,58,.10);
  --color-danger-border:     rgba(229,71,58,.22);
  --color-danger-glow:       rgba(229,71,58,.30);

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

  /* ---------- Gradients ---------- */
  /* button/solid fills: kept in the darker half of the ramp so white
     text clears AA contrast at every point along the gradient */
  --gradient-brand:          linear-gradient(135deg, var(--color-accent-gold) 0%, var(--color-accent-gold-deep) 100%);
  /* clipped-text gradient: reads fine on the white page background */
  --gradient-brand-text:     linear-gradient(120deg, var(--color-accent-gold), var(--color-accent-gold-deep));
  --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) 0%, var(--p-card-alt) 100%);
  --gradient-surface-glass:  linear-gradient(160deg, var(--p-card), var(--p-card-alt));
  --gradient-surface-package:linear-gradient(160deg, var(--p-card), var(--p-card-alt));
  --gradient-sheen-top:      linear-gradient(to bottom, rgba(11,27,34,.05), rgba(11,27,34,.015) 40%, transparent 70%);

  /* Dark panel gradient — optional utility for hero-style dark teal
     feature cards (e.g. a "Smarter decisions" style block) */
  --gradient-surface-dark-panel: linear-gradient(160deg, var(--p-panel-900) 0%, var(--p-panel-800) 100%);

  /* ---------- Elevation / shadow (softened for a light canvas) ---------- */
  --shadow-resting:          0 8px 24px -10px rgba(11,27,34,.14);
  --shadow-resting-strong:   0 12px 28px -10px rgba(11,27,34,.16);
  --shadow-hover-info:       0 24px 50px -24px rgba(18,169,156,.35);
  --shadow-hover-danger:     0 15px 35px rgba(229,71,58,.18);
  --shadow-hover-gold:       0 14px 34px -10px rgba(18,169,156,.45);
  --shadow-hover-success:    0 10px 28px -10px rgba(25,169,116,.22);
  --shadow-focus-ring:       0 0 0 3px rgba(18,169,156,.25);
  --shadow-inset-edge:       inset 0 1px 0 rgba(255,255,255,.6), inset 0 -2px 4px rgba(11,27,34,.06);
  --shadow-glow-gold:        0 0 10px rgba(18,169,156,.45);
  --shadow-glow-success:     0 0 12px rgba(25,169,116,.5);
  --shadow-glow-danger:      0 0 12px rgba(229,71,58,.45);

  /* ---------- Radius ---------- */
  --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 ---------- */
  --font-family-display: 'Sora', 'Manrope', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-family-body:    'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-family-button:  'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-family-number:  'Space Grotesk', 'Inter', sans-serif;
  --font-family-base:    var(--font-family-body);

  /* Fixed sizes — used for compact UI chrome (badges, labels, controls)
     that shouldn't reflow with the viewport. */
  --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);

  /* Fluid sizes — used for headings/display copy so type scales
     smoothly between a 360px phone and a 1440px desktop instead of
     jumping at breakpoints. clamp(min, viewport-relative, max). */
  --fs-heading-sm: clamp(16px, 0.9rem + 0.4vw, 18px);
  --fs-heading-md: clamp(19px, 1rem + 1vw, 24px);
  --fs-heading-lg: clamp(22px, 1.1rem + 1.8vw, 32px);
  --fs-display:    clamp(30px, 1.4rem + 3.2vw, 56px);

  /* ---------- 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;
}

/* =====================================================================
   2b. RESPONSIVE TYPE SCALE FALLBACK
   Belt-and-braces for the handful of very old WebViews that don't
   support clamp(): a mobile-first override kicks fluid sizes back
   to the fixed primitive scale under 380px, and up to the display
   max above 1440px, so nothing ever collapses or overflows.
===================================================================== */
@media (max-width: 380px){
  :root{
    --fs-heading-sm: 16px;
    --fs-heading-md: 19px;
    --fs-heading-lg: 22px;
    --fs-display:    30px;
  }
}
@media (min-width: 1440px){
  :root{
    --fs-display: 56px;
  }
}

/* =====================================================================
   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
===================================================================== */
.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(18,169,156,.7); }
.btn-block{ display:flex; width:100%; text-align:center; margin-top: var(--space-md); }
.btn-ghost{
  color: var(--color-text-primary);
  background: rgba(11,27,34,.04);
  border: 1px solid var(--color-border-subtle);
}
.btn-ghost:hover{ transform: translateY(-3px); border-color: var(--color-border-strong); background: rgba(18,169,156,.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; }

.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(18,169,156,.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;
}

.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
===================================================================== */
.card-glass{
  border-radius: var(--radius-card-lg);
  background: rgba(11,27,34,.04);
  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-inverse);
}
.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
===================================================================== */
.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);
}
input.input-dark,
textarea.input-dark,
.package-card input {
    background-image: none;
}
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;
}
.input-dark:focus,
.package-card input:focus,
.package-card select:focus {
    border-color: var(--color-accent-gold);
    box-shadow: var(--shadow-focus-ring);
}
.input-dark::placeholder,
.package-card input::placeholder {
    color: var(--color-text-muted);
    opacity: 1;
}
select.input-dark option,
.package-card select option {
    background-color: var(--color-surface-1);
    color: var(--color-text-primary);
}
select.input-dark option[value=""],
.package-card select option[value=""] {
    color: var(--color-text-muted);
}
.input-dark[readonly] {
    opacity: .85;
    cursor: default;
}
.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;
}
select::-ms-expand { display: none; }
.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); }
.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
===================================================================== */
.bar{
  height:6px;
  border-radius: var(--radius-pill);
  background: rgba(11,27,34,.07);
  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(11,27,34,.04);
  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
===================================================================== */
.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(18,169,156,.2), 0 30px 60px -30px rgba(18,169,156,.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(11,27,34,.04);
  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(18,169,156,.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(18,169,156,.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); }
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001s !important; transition-duration:.001s !important; }
}

/* =====================================================================
   SIDEBAR & MENU COMPONENTS
===================================================================== */
.sidebar-panel {
    position: relative;
    min-height: 100%;
    background:
        linear-gradient(180deg, rgba(18,169,156,.035) 0, transparent 160px),
        var(--color-bg-canvas);
    border-right: 1px solid var(--color-border-subtle);
    color: var(--color-text-primary);
}
.sidebar-panel::before {
    content: "";
    position: absolute; top: 0; left: 0; right: 0;
    height: 2px;
    background: var(--gradient-brand);
    opacity: .9;
}
.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(18,169,156,.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; }
.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(18,169,156,.05), var(--shadow-resting);
}
.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);
}
.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(11,27,34,.035);
    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); }
.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);
}
.sidebar-title::before {
    content: ""; width: 3px; height: 10px; flex: 0 0 3px;
    border-radius: var(--radius-pill);
    background: var(--color-accent-gold);
}
.sidebar-list { display: flex; flex-direction: column; gap: 3px; list-style: none; margin: 0; padding: 0 var(--space-sm); }
.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);
}
.sidebar-item:hover { color: var(--color-text-primary); background: rgba(18,169,156,.045); border-color: var(--color-border-default); }
.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(11,27,34,.035);
    color: var(--color-accent-gold);
    border: 1px solid var(--color-border-subtle);
    font-size: var(--fs-heading-sm);
    transition: var(--transition-fast);
}
.sidebar-icon-box ion-icon, .sidebar-icon-box i { font-size: 18px; }
.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(18,169,156,.08);
}
.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;
}
.sidebar-item > span:not(.sidebar-icon-box), .sidebar-item > div:not(.sidebar-icon-box) { min-width: 0; }
.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); }
.sidebar-item.active, .sidebar-item.sidebar-active {
    color: var(--color-text-primary);
    background: linear-gradient(90deg, rgba(18,169,156,.12), rgba(18,169,156,.025));
    border-color: var(--color-border-default);
}
.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(18,169,156,.18);
}
.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;
}
.sidebar-divider { height: 1px; margin: var(--space-sm) var(--space-md); background: var(--color-border-hairline); }
.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); }
.sidebar-footer { margin-top: var(--space-md); padding: var(--space-sm); border-top: 1px solid var(--color-border-subtle); }

@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
============================================================ */
.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); }
.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; }
.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(18,169,156,.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; }
.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); }
.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(18,169,156,.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(11,27,34,.045);
    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); }
.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); }
.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(18,169,156,.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); }
.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(11,27,34,.02); 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; }
.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(18,169,156,.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); }
.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; }
.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(11,27,34,.04); 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); }

@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); }
}
@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; }
}
@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(18,169,156,.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); }
.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); }
.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); }
.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); }
.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-deep); color: var(--color-text-inverse); 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; }
.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; }
.support-admin-avatar { width: 30px; height: 30px; font-size: var(--fs-body); }
.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); }
.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); }

@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; }
}