/* ════════════════════════════════════════════════════════════════════ */
/* Platfound Design System — Single Source of Truth (2026-05-12)         */
/* Loaded BEFORE all other CSS. Covers PC (desktop) + H5 (mobile).        */
/* ════════════════════════════════════════════════════════════════════ */

:root {
  /* ──── Spacing (8px grid — ONLY these values allowed) ──── */
  --ds-s-1: 4px;
  --ds-s-2: 8px;
  --ds-s-3: 16px;
  --ds-s-4: 24px;
  --ds-s-5: 32px;
  --ds-s-6: 48px;
  --ds-s-7: 64px;

  /* ──── Radius ──── */
  --ds-r-sm:   8px;  /* small components: buttons, chips, inputs */
  --ds-r-md:  12px;  /* mid components */
  --ds-r-lg:  16px;  /* large cards, modals */
  --ds-r-xl:  20px;  /* hero panels */
  --ds-r-pill: 999px;

  /* ──── Color Palette ──── */
  /* Backgrounds — deep neutral grey, no blue tint */
  --ds-bg:           #0F0F12;
  --ds-bg-elevated:  #15151A;
  --ds-surface:      #1C1C21;
  --ds-surface-2:    #24242B;
  --ds-overlay:      rgba(255,255,255,0.04);
  --ds-overlay-2:    rgba(255,255,255,0.08);

  /* Borders */
  --ds-border:        rgba(255,255,255,0.06);
  --ds-border-strong: rgba(255,255,255,0.12);
  --ds-border-gold:   rgba(250,204,21,0.25);

  /* Text */
  --ds-text:        #F5F5F7;
  --ds-text-2:      #A1A1AA;
  --ds-text-3:      #71717A;
  --ds-text-4:      #52525B;

  /* Brand — Quality Gold (yellow-400 → yellow-600) */
  --ds-gold-300:    #fde047;
  --ds-gold-400:    #facc15;  /* primary highlight */
  --ds-gold-500:    #eab308;
  --ds-gold-600:    #ca8a04;  /* gradient end */
  --ds-gold-700:    #a16207;

  /* Gold gradient (the brand) */
  --ds-gradient-gold: linear-gradient(135deg, #facc15 0%, #ca8a04 100%);
  --ds-gradient-gold-soft: linear-gradient(135deg, rgba(250,204,21,0.08) 0%, rgba(202,138,4,0.02) 100%);

  --ds-gold-soft:   rgba(250,204,21,0.08);
  --ds-gold-glow:   rgba(250,204,21,0.28);

  /* Semantic */
  --ds-success:     #10b981;
  --ds-success-bg:  rgba(16,185,129,0.10);
  --ds-error:       #ef4444;
  --ds-error-bg:    rgba(239,68,68,0.10);
  --ds-warning:     #f59e0b;
  --ds-warning-bg:  rgba(245,158,11,0.10);
  --ds-info:        #3b82f6;
  --ds-info-bg:     rgba(59,130,246,0.10);

  /* ──── Typography Scale ──── */
  --ds-font-sans: "Inter", "SF Pro Text", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --ds-font-mono: "JetBrains Mono", "SF Mono", "Roboto Mono", ui-monospace, monospace;

  /* Type scale — strictly enforced */
  --ds-text-xs:   12px;  /* labels, meta, hints */
  --ds-text-sm:   14px;  /* body, secondary */
  --ds-text-md:   18px;  /* card titles, primary body */
  --ds-text-lg:   24px;  /* section headers, large amounts */
  --ds-text-xl:   32px;  /* hero numbers */
  --ds-text-2xl:  40px;  /* display */

  --ds-leading-tight:  1.2;
  --ds-leading-normal: 1.5;

  --ds-weight-regular:  400;
  --ds-weight-medium:   500;
  --ds-weight-semibold: 600;
  --ds-weight-bold:     700;
  --ds-weight-black:    800;

  /* ──── Elevation ──── */
  --ds-shadow-sm:  0 1px 2px rgba(0,0,0,0.3);
  --ds-shadow-md:  0 4px 12px -2px rgba(0,0,0,0.5);
  --ds-shadow-lg:  0 12px 32px -8px rgba(0,0,0,0.6);
  --ds-shadow-gold: 0 8px 24px -8px var(--ds-gold-glow);

  /* ──── Motion ──── */
  --ds-ease:   cubic-bezier(0.2, 0.8, 0.2, 1);
  --ds-dur-1:  120ms;
  --ds-dur-2:  220ms;
  --ds-dur-3:  340ms;
}

/* ──── Utility classes — use these instead of inline styles ──── */
.ds-amount {
  font-family: var(--ds-font-mono);
  font-weight: var(--ds-weight-bold);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

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

.ds-btn-primary {
  background: var(--ds-gradient-gold);
  color: #1a1a1a;
  font-weight: var(--ds-weight-bold);
  border: none;
  border-radius: var(--ds-r-md);
  padding: var(--ds-s-3);
  font-family: var(--ds-font-sans);
  font-size: var(--ds-text-sm);
  cursor: pointer;
  box-shadow: var(--ds-shadow-gold);
  transition: transform var(--ds-dur-1) var(--ds-ease);
}
.ds-btn-primary:active { transform: scale(0.98); }
.ds-btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }

.ds-card {
  background: var(--ds-surface);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-r-lg);
  padding: var(--ds-s-4);
}

.ds-card-sm {
  background: var(--ds-surface);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-r-sm);
  padding: var(--ds-s-3);
}

/* ════════════════════════════════════════════════════════════════════ */
/* Design System — Layout + State + Tooltip + Ticker (2026-05-12)        */
/* Adds containers, unified button states, i-tooltip, fixed ticker bar    */
/* ════════════════════════════════════════════════════════════════════ */

/* ──── Container — vertical alignment + responsive gutters ──── */
.ds-container {
  width: 100%;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--ds-s-3);   /* 16px H5 gutter */
  padding-right: var(--ds-s-3);
  box-sizing: border-box;
}
@media (min-width: 1024px) {
  .ds-container { padding-left: var(--ds-s-4); padding-right: var(--ds-s-4); }  /* 24px desktop */
}

.ds-container-narrow { max-width: 720px; }
.ds-container-wide   { max-width: 1440px; }

/* Section spacing — vertical rhythm */
.ds-section + .ds-section { margin-top: var(--ds-s-5); }  /* 32px between sections */
.ds-row { display: flex; gap: var(--ds-s-3); align-items: center; }
.ds-stack { display: flex; flex-direction: column; gap: var(--ds-s-3); }
.ds-stack-tight { display: flex; flex-direction: column; gap: var(--ds-s-2); }

/* ──── Unified button states — PC & H5 identical ──── */
.ds-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ds-s-2);
  padding: 12px var(--ds-s-3);
  border: none;
  border-radius: var(--ds-r-md);
  font-family: var(--ds-font-sans);
  font-size: var(--ds-text-sm);
  font-weight: var(--ds-weight-semibold);
  line-height: 1;
  cursor: pointer;
  transition: transform var(--ds-dur-1) var(--ds-ease),
              opacity var(--ds-dur-1) var(--ds-ease),
              box-shadow var(--ds-dur-2) var(--ds-ease),
              background-color var(--ds-dur-2) var(--ds-ease);
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  white-space: nowrap;
}
.ds-btn:focus-visible {
  outline: 2px solid var(--ds-gold-400);
  outline-offset: 2px;
}

/* Primary — gold gradient */
.ds-btn-primary {
  background: var(--ds-gradient-gold);
  color: #1a1a1a;
  font-weight: var(--ds-weight-bold);
  box-shadow: var(--ds-shadow-gold);
}
.ds-btn-primary:hover:not(:disabled) {
  box-shadow: 0 12px 32px -8px var(--ds-gold-glow);
  filter: brightness(1.05);
}
.ds-btn-primary:active:not(:disabled) {
  transform: scale(0.97);
  filter: brightness(0.95);
}
.ds-btn-primary:disabled {
  background: var(--ds-surface-2);
  color: var(--ds-text-4);
  box-shadow: none;
  cursor: not-allowed;
}

/* Secondary — neutral surface */
.ds-btn-secondary {
  background: var(--ds-surface);
  color: var(--ds-text);
  border: 1px solid var(--ds-border-strong);
}
.ds-btn-secondary:hover:not(:disabled) { background: var(--ds-surface-2); border-color: var(--ds-border-gold); }
.ds-btn-secondary:active:not(:disabled) { transform: scale(0.97); background: var(--ds-bg-elevated); }
.ds-btn-secondary:disabled { opacity: 0.4; cursor: not-allowed; }

/* Ghost — text-only */
.ds-btn-ghost {
  background: transparent;
  color: var(--ds-text-2);
  border: none;
}
.ds-btn-ghost:hover:not(:disabled) { color: var(--ds-text); background: var(--ds-overlay); }
.ds-btn-ghost:active:not(:disabled) { transform: scale(0.97); }
.ds-btn-ghost:disabled { opacity: 0.4; cursor: not-allowed; }

/* Size variants */
.ds-btn-sm { padding: 8px var(--ds-s-3); font-size: var(--ds-text-xs); }
.ds-btn-lg { padding: var(--ds-s-3) var(--ds-s-4); font-size: var(--ds-text-md); }
.ds-btn-block { width: 100%; }

/* ──── Tooltip — i icon hover/tap reveal ──── */
.ds-tooltip {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--ds-surface-2);
  color: var(--ds-text-3);
  font-family: var(--ds-font-sans);
  font-size: 10px;
  font-weight: var(--ds-weight-bold);
  cursor: help;
  vertical-align: middle;
  margin-left: 4px;
  user-select: none;
}
.ds-tooltip::before {
  content: 'i';
  font-style: italic;
  line-height: 1;
}
.ds-tooltip::after {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  background: var(--ds-bg-elevated);
  color: var(--ds-text);
  font-size: var(--ds-text-xs);
  font-weight: var(--ds-weight-regular);
  padding: var(--ds-s-2) var(--ds-s-3);
  border-radius: var(--ds-r-sm);
  border: 1px solid var(--ds-border-strong);
  white-space: pre-line;
  width: max-content;
  max-width: 240px;
  z-index: 1000;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--ds-dur-2) var(--ds-ease),
              transform var(--ds-dur-2) var(--ds-ease);
  box-shadow: var(--ds-shadow-lg);
}
.ds-tooltip:hover::after,
.ds-tooltip:focus-visible::after {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.ds-tooltip:hover, .ds-tooltip:focus-visible {
  background: var(--ds-gold-soft);
  color: var(--ds-gold-400);
  outline: none;
}

/* ──── Ticker bar — fixed narrow strip, no main-visual interference ──── */
.ds-ticker-bar {
  height: 32px;
  background: var(--ds-surface);
  border-top: 1px solid var(--ds-border);
  border-bottom: 1px solid var(--ds-border);
  display: flex;
  align-items: center;
  overflow: hidden;
  position: relative;
  z-index: 5;
}
.ds-ticker-label {
  flex-shrink: 0;
  background: var(--ds-gradient-gold);
  color: #1a1a1a;
  font-family: var(--ds-font-sans);
  font-size: var(--ds-text-xs);
  font-weight: var(--ds-weight-bold);
  padding: 0 var(--ds-s-3);
  height: 100%;
  display: flex;
  align-items: center;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.ds-ticker-track {
  flex: 1;
  overflow: hidden;
  white-space: nowrap;
  position: relative;
  padding-left: var(--ds-s-3);
}
.ds-ticker-content {
  display: inline-block;
  font-size: var(--ds-text-xs);
  color: var(--ds-text-2);
  animation: ds-marquee 40s linear infinite;
  padding-left: 100%;
}
.ds-ticker-content > span { margin-right: var(--ds-s-5); }
.ds-ticker-content > span .ds-amount { color: var(--ds-gold-400); }
@keyframes ds-marquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-100%); }
}

/* ──── Surface utility — replaces border-only dividers ──── */
.ds-surface-elevated { background: var(--ds-surface); border-radius: var(--ds-r-lg); padding: var(--ds-s-4); }
.ds-surface-flat     { background: var(--ds-bg-elevated); border-radius: var(--ds-r-lg); padding: var(--ds-s-4); }
.ds-surface-inset    { background: var(--ds-bg); border-radius: var(--ds-r-md); padding: var(--ds-s-3); }

/* ──── Border-noise reduction — single helper to remove old thin borders ──── */
.ds-no-border, .ds-no-border * { border-color: transparent !important; }

/* ──── Hint text — small, dim, but accessible ──── */
.ds-hint {
  font-size: var(--ds-text-xs);
  color: var(--ds-text-3);
  line-height: var(--ds-leading-normal);
}

/* ──── State badges ──── */
.ds-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px var(--ds-s-2);
  border-radius: var(--ds-r-pill);
  font-size: 11px;
  font-weight: var(--ds-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  line-height: 1;
}
.ds-badge-success { background: var(--ds-success-bg); color: var(--ds-success); }
.ds-badge-error   { background: var(--ds-error-bg);   color: var(--ds-error); }
.ds-badge-warning { background: var(--ds-warning-bg); color: var(--ds-warning); }
.ds-badge-info    { background: var(--ds-info-bg);    color: var(--ds-info); }
.ds-badge-gold    { background: var(--ds-gold-soft);  color: var(--ds-gold-400); }

/* ──── Module alignment — vertical stack with consistent gutter ──── */
.ds-module + .ds-module { margin-top: var(--ds-s-4); }   /* 24px between modules */
.ds-module-tight + .ds-module-tight { margin-top: var(--ds-s-3); }  /* 16px tighter */

/* ════════════════════════════════════════════════════════════════════ */
/* Binance-style Integrity Refactor (2026-05-12)                         */
/* Core color alias · Container 1440 + Gap-8 · Responsive H5 · Utility   */
/* ════════════════════════════════════════════════════════════════════ */

/* ──── 1) Core 3-color alias (Mz mandate) ──── */
:root {
  --primary-gold:   #fcd535;   /* Binance signature gold */
  --primary-gold-2: #f0b90b;   /* gradient end */
  --card-bg:        #1C1C21;   /* card surface (= --ds-surface) */
  --surface-black:  #0F0F12;   /* page background (= --ds-bg) */

  /* Keep design-system tokens in sync */
  --ds-gold-400:  var(--primary-gold);
  --ds-gold-600:  var(--primary-gold-2);
  --ds-bg:        var(--surface-black);
  --ds-surface:   var(--card-bg);

  /* Refined gold gradient — closer to Binance */
  --ds-gradient-gold: linear-gradient(135deg, var(--primary-gold) 0%, var(--primary-gold-2) 100%);
  --ds-gold-glow:     rgba(252, 213, 53, 0.28);
  --ds-gold-soft:     rgba(252, 213, 53, 0.08);
}

/* ──── 2) PC layout — 1440 container + main/rail grid + Gap 32 ──── */
@media (min-width: 1280px) {
  body.ui-v3 #bs-container {
    max-width: 1440px !important;     /* was 1200 → too tight with rail */
    padding-right: var(--ds-s-4) !important;  /* drop the 358px rail-padding */
    padding-left: var(--ds-s-4) !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 340px !important;
    column-gap: var(--ds-s-5) !important;     /* 32px between main & rail */
    align-items: start;
  }

  /* Main column gets the entire first grid track */
  body.ui-v3 #bs-container > *:not(#v3-rightrail):not(#v3-sidebar):not(.bottom-nav) {
    grid-column: 1 !important;
  }

  /* Right-rail now lives in grid track 2, not fixed overlay */
  body.ui-v3 .v3-rightrail {
    position: sticky !important;
    top: 84px !important;
    right: auto !important;
    width: 100% !important;
    grid-column: 2 !important;
    height: fit-content !important;
    max-height: calc(100vh - 100px);
    overflow-y: auto;
    background: transparent !important;
    border-left: none !important;
    padding: 0 !important;
  }
  body.ui-v3 .v3-rr-card {
    padding: var(--ds-s-4) !important;
    margin-bottom: var(--ds-s-4) !important;
    border-radius: var(--ds-r-lg) !important;
    background: var(--card-bg) !important;
    border: 1px solid var(--ds-border) !important;
  }
}

/* Even wider (≥1600px) keep at 1440 + bigger gap */
@media (min-width: 1600px) {
  body.ui-v3 #bs-container { column-gap: var(--ds-s-6) !important; }  /* 48px */
}

/* ──── 3) H5 hero — more breathing room ──── */
@media (max-width: 768px) {
  body.ui-v3 .v3-topbar {
    padding: var(--ds-s-3) 0 !important;     /* 16px vertical */
    gap: var(--ds-s-3) !important;
  }
  body.ui-v3 .v3-avatar {
    width: 40px !important;
    height: 40px !important;
    font-size: 16px !important;
  }
  body.ui-v3 .v3-icon-btn {
    width: 40px !important;
    height: 40px !important;
  }
  body.ui-v3 .v3-hero {
    padding: var(--ds-s-4) !important;       /* 24px all around */
  }
  body.ui-v3 .v3-balance .num {
    /* Responsive — scales with viewport */
    font-size: clamp(28px, 9vw, 40px) !important;
  }
  body.ui-v3 .v3-balance .cur {
    font-size: clamp(14px, 4vw, 18px) !important;
  }
  body.ui-v3 .v3-hero-row,
  body.ui-v3 .v3-hero-sub {
    font-size: clamp(11px, 3vw, 13px) !important;
  }
  body.ui-v3 .v3-hero-actions {
    gap: var(--ds-s-2) !important;
    margin-top: var(--ds-s-3) !important;
  }
  body.ui-v3 .v3-hero-actions .v3-btn {
    padding: 14px var(--ds-s-3) !important;
    font-size: clamp(13px, 3.5vw, 15px) !important;
  }
}

/* ──── 4) H5 bottom nav — bigger touch targets, vertical centered ──── */
body.ui-v3 nav.bottom-nav,
body.ui-v3 .bottom-nav {
  height: auto !important;
}
body.ui-v3 .bnav-inner {
  padding: 10px var(--ds-s-3) !important;
  padding-bottom: calc(10px + env(safe-area-inset-bottom)) !important;
  gap: 4px !important;
}
body.ui-v3 .bnav-item {
  min-height: 56px !important;
  padding: 8px 4px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
}
body.ui-v3 .bnav-item .bnav-icon,
body.ui-v3 .bnav-item .bnav-emoji,
body.ui-v3 .bnav-item svg {
  font-size: clamp(20px, 5.5vw, 24px) !important;
  line-height: 1 !important;
  display: flex;
  align-items: center;
  justify-content: center;
}
body.ui-v3 .bnav-item .bnav-label {
  font-size: clamp(10px, 2.8vw, 11px) !important;
  font-weight: var(--ds-weight-semibold) !important;
  line-height: 1.2 !important;
  margin-top: 2px;
}

/* ──── 5) Universal Utility Classes (Mz: avoid two-version patches) ──── */
.bs-card {
  background: var(--card-bg);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-r-lg);
  padding: var(--ds-s-4);
}
.bs-card-sm {
  background: var(--card-bg);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-r-md);
  padding: var(--ds-s-3);
}
.bs-stack-1 { display: flex; flex-direction: column; gap: var(--ds-s-1); }
.bs-stack-2 { display: flex; flex-direction: column; gap: var(--ds-s-2); }
.bs-stack-3 { display: flex; flex-direction: column; gap: var(--ds-s-3); }
.bs-stack-4 { display: flex; flex-direction: column; gap: var(--ds-s-4); }
.bs-stack-5 { display: flex; flex-direction: column; gap: var(--ds-s-5); }
.bs-row-1 { display: flex; align-items: center; gap: var(--ds-s-1); }
.bs-row-2 { display: flex; align-items: center; gap: var(--ds-s-2); }
.bs-row-3 { display: flex; align-items: center; gap: var(--ds-s-3); }
.bs-row-4 { display: flex; align-items: center; gap: var(--ds-s-4); }
.bs-vcenter { display: flex; align-items: center; }
.bs-hcenter { display: flex; justify-content: center; }
.bs-center  { display: flex; align-items: center; justify-content: center; }
.bs-grow    { flex: 1; min-width: 0; }
.bs-shrink-0 { flex-shrink: 0; }

.bs-amount {
  font-family: var(--ds-font-mono);
  font-variant-numeric: tabular-nums;
  font-weight: var(--ds-weight-bold);
  letter-spacing: -0.01em;
}
.bs-amount-lg  { font-size: var(--ds-text-lg); }
.bs-amount-xl  { font-size: var(--ds-text-xl); }
.bs-amount-2xl { font-size: var(--ds-text-2xl); }

.bs-label {
  font-size: var(--ds-text-xs);
  color: var(--ds-text-2);
  font-weight: var(--ds-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.bs-hint-2 {  /* renamed to avoid clash with existing .bs-hint */
  font-size: var(--ds-text-xs);
  color: var(--ds-text-3);
  line-height: var(--ds-leading-normal);
}

/* ──── 6) Section rhythm (8px grid, 8 = 32px between blocks) ──── */
body.ui-v3 .section,
body.ui-v3 section,
body.ui-v3 [data-section] {
  margin-bottom: var(--ds-s-5) !important;  /* 32px */
}
body.ui-v3 .section-title,
body.ui-v3 .sec-title,
body.ui-v3 h2 {
  font-size: var(--ds-text-md) !important;
  font-weight: var(--ds-weight-bold) !important;
  color: var(--ds-text) !important;
  margin-bottom: var(--ds-s-3) !important;
  letter-spacing: -0.2px;
}

/* ──── 7) Anti-clutter: hide noisy inline gradient pills that didn't get caught ──── */
body.ui-v3 .dc-badge[style*="gradient"] { background: var(--card-bg) !important; }

/* ──── 8) Binance-style scroll bar (PC) ──── */
@media (min-width: 1024px) {
  body.ui-v3 ::-webkit-scrollbar { width: 6px; height: 6px; }
  body.ui-v3 ::-webkit-scrollbar-thumb { background: var(--ds-border-strong); border-radius: 3px; }
  body.ui-v3 ::-webkit-scrollbar-thumb:hover { background: var(--ds-text-4); }
  body.ui-v3 ::-webkit-scrollbar-track { background: transparent; }
}

/* ──── 9) Focus visible — Binance style outline ──── */
body.ui-v3 :focus-visible {
  outline: 2px solid var(--primary-gold) !important;
  outline-offset: 2px !important;
}

/* ──── 10) Sidebar (PC left) — slim icon rail, Binance vibe ──── */
@media (min-width: 1024px) {
  body.ui-v3 .v3-sidebar {
    background: var(--surface-black) !important;
    border-right: 1px solid var(--ds-border) !important;
  }
  body.ui-v3 .v3-sb-item {
    transition: background var(--ds-dur-2) var(--ds-ease),
                color var(--ds-dur-2) var(--ds-ease) !important;
  }
  body.ui-v3 .v3-sb-item:hover {
    background: var(--card-bg) !important;
    color: var(--primary-gold) !important;
  }
  body.ui-v3 .v3-sb-item.active {
    background: var(--ds-gold-soft) !important;
    color: var(--primary-gold) !important;
    border-left: 3px solid var(--primary-gold) !important;
  }
}