@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

/* ── DESIGN TOKENS ─────────────────────────────────────────── */
:root {
  /* Midnight Obsidian Palette */
  --void:        #04060b;
  --obsidian:    #070c14;
  --deep:        #0a1120;
  --slate-900:   #0f1929;
  --slate-800:   #141f30;
  --slate-700:   #1a2840;
  --slate-600:   #213352;
  --slate-500:   #2c4268;
  --slate-400:   #3d5a82;
  --slate-300:   #5c7a9e;
  --slate-200:   #8ba5c4;
  --slate-100:   #c2d4e8;

  /* Accent System */
  --cyan:        #00d4ff;
  --cyan-dim:    rgba(0,212,255,0.12);
  --cyan-border: rgba(0,212,255,0.18);
  --cyan-glow:   0 0 24px rgba(0,212,255,0.12);

  --emerald:     #00f0a0;
  --emerald-dim: rgba(0,240,160,0.10);
  --emerald-border: rgba(0,240,160,0.18);
  --emerald-glow:0 0 24px rgba(0,240,160,0.10);

  --amber:       #f5a623;
  --amber-dim:   rgba(245,166,35,0.10);
  --amber-border:rgba(245,166,35,0.20);
  --amber-glow:  0 0 24px rgba(245,166,35,0.12);

  --crimson:     #ff4d6a;
  --crimson-dim: rgba(255,77,106,0.10);
  --crimson-border: rgba(255,77,106,0.20);

  --violet:      #8b5cf6;
  --violet-dim:  rgba(139,92,246,0.12);

  /* Glass System */
  --glass-bg:        rgba(13,25,41,0.6);
  --glass-bg-heavy:  rgba(10,17,32,0.75);
  --glass-bg-light:  rgba(20,31,48,0.45);
  --glass-border:    rgba(255,255,255,0.05);
  --glass-border-md: rgba(255,255,255,0.08);
  --glass-border-hi: rgba(255,255,255,0.12);
  --glass-blur:      blur(20px) saturate(160%);
  --glass-blur-sm:   blur(12px) saturate(140%);
  --glass-blur-lg:   blur(40px) saturate(180%);

  /* Typography */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'IBM Plex Mono', 'Cascadia Code', 'Fira Code', monospace;

  /* Type Scale */
  --text-2xs:  10px;
  --text-xs:   11px;
  --text-sm:   12.5px;
  --text-base: 13.5px;
  --text-md:   15px;
  --text-lg:   18px;
  --text-xl:   22px;
  --text-2xl:  28px;
  --text-3xl:  36px;
  --text-4xl:  48px;

  /* Spacing */
  --radius-sm:  6px;
  --radius-md:  10px;
  --radius-lg:  14px;
  --radius-xl:  18px;
  --radius-2xl: 24px;

  /* Transitions */
  --t-fast:   0.12s cubic-bezier(0.4,0,0.2,1);
  --t-base:   0.22s cubic-bezier(0.4,0,0.2,1);
  --t-slow:   0.38s cubic-bezier(0.4,0,0.2,1);
  --t-spring: 0.45s cubic-bezier(0.34,1.56,0.64,1);

  /* Shadows */
  --shadow-sm: 0 1px 4px rgba(0,0,0,0.3);
  --shadow-md: 0 4px 20px rgba(0,0,0,0.4);
  --shadow-lg: 0 12px 48px rgba(0,0,0,0.5);
  --shadow-xl: 0 24px 80px rgba(0,0,0,0.6);
}

/* ── RESET & BASE ───────────────────────────────────────────── */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; }

body {
  background: var(--obsidian);
  color: var(--slate-100);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: 400;
  line-height: 1.6;
  overflow-x: hidden;
}

/* Global background texture */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 60% at 20% 0%,   rgba(0,212,255,0.03) 0%, transparent 60%),
    radial-gradient(ellipse 60% 80% at 80% 100%,  rgba(0,240,160,0.025) 0%, transparent 60%),
    radial-gradient(ellipse 50% 50% at 50% 50%,   rgba(139,92,246,0.02) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}

a { text-decoration:none; color:inherit; }
button { cursor:pointer; font-family:var(--font-sans); }
input, select, textarea { font-family:var(--font-sans); }

/* ── SCROLLBAR ──────────────────────────────────────────────── */
::-webkit-scrollbar { width:3px; height:3px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:var(--slate-600); border-radius:99px; }
::-webkit-scrollbar-thumb:hover { background:var(--slate-400); }

/* ── GLASS CARD SYSTEM ─────────────────────────────────────── */
.glass {
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border-md);
  border-radius: var(--radius-lg);
  position: relative;
  overflow: hidden;
  transition: border-color var(--t-base), box-shadow var(--t-base), transform var(--t-base);
}

.glass::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.025) 0%, transparent 60%);
  pointer-events: none;
  border-radius: inherit;
}

.glass:hover {
  border-color: var(--glass-border-hi);
  box-shadow: var(--shadow-lg);
}

.glass--cyan   { border-color: var(--cyan-border);    box-shadow: var(--cyan-glow); }
.glass--emerald{ border-color: var(--emerald-border); box-shadow: var(--emerald-glow); }
.glass--amber  { border-color: var(--amber-border);   box-shadow: var(--amber-glow); }
.glass--crimson{ border-color: var(--crimson-border); }
.glass--violet { border-color: rgba(139,92,246,0.25); }

.glass--inset {
  background: rgba(4,6,11,0.5);
  backdrop-filter: var(--glass-blur-sm);
  border-color: var(--glass-border);
}

/* Glass header/body */
.glass-header {
  padding: 14px 20px 12px;
  border-bottom: 1px solid var(--glass-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.glass-header-title {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--slate-100);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 8px;
}

.glass-header-title::before {
  content: '';
  display: block;
  width: 3px;
  height: 14px;
  background: var(--cyan);
  border-radius: 99px;
}

.glass-header-title.amber::before  { background: var(--amber); }
.glass-header-title.emerald::before{ background: var(--emerald); }
.glass-header-title.crimson::before{ background: var(--crimson); }
.glass-header-title.violet::before { background: var(--violet); }

.glass-body { padding: 18px 20px; }
.glass-body--sm { padding: 12px 16px; }
.glass-body--lg { padding: 24px 28px; }

/* ── DASHBOARD LAYOUT ──────────────────────────────────────── */
.dash-layout {
  display: flex;
  height: 100vh;
  position: relative;
  z-index: 1;
}

/* ── SIDEBAR ───────────────────────────────────────────────── */
.dash-sidebar {
  width: 228px;
  min-width: 228px;
  background: var(--glass-bg-heavy);
  backdrop-filter: var(--glass-blur-lg);
  -webkit-backdrop-filter: var(--glass-blur-lg);
  border-right: 1px solid var(--glass-border-md);
  display: flex;
  flex-direction: column;
  z-index: 100;
  flex-shrink: 0;
}

.sidebar-logo {
  padding: 22px 20px 18px;
  border-bottom: 1px solid var(--glass-border);
}

.logo-wordmark {
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--slate-100);
}

.logo-wordmark .logo-accent { color: var(--cyan); }

.logo-sub {
  font-size: var(--text-2xs);
  font-weight: 500;
  color: var(--slate-400);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-top: 5px;
}

.sidebar-nav { flex: 1; padding: 14px 10px; overflow-y: auto; }

.nav-group-label {
  font-size: var(--text-2xs);
  font-weight: 600;
  color: var(--slate-500);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 10px 10px 6px;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  background: none;
  width: 100%;
  text-align: left;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--slate-300);
  cursor: pointer;
  transition: all var(--t-fast);
  margin-bottom: 1px;
  position: relative;
  letter-spacing: 0.01em;
}

.nav-item:hover {
  background: var(--glass-bg-light);
  color: var(--slate-100);
  border-color: var(--glass-border);
}

.nav-item.active {
  background: var(--cyan-dim);
  color: var(--cyan);
  border-color: var(--cyan-border);
  font-weight: 600;
}

.nav-item.active-e {
  background: var(--emerald-dim);
  color: var(--emerald);
  border-color: var(--emerald-border);
  font-weight: 600;
}

.nav-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--slate-600);
  flex-shrink: 0;
  transition: background var(--t-fast);
}

.nav-item.active    .nav-dot { background: var(--cyan); box-shadow: 0 0 6px var(--cyan); }
.nav-item.active-e  .nav-dot { background: var(--emerald); box-shadow: 0 0 6px var(--emerald); }
.nav-item:hover     .nav-dot { background: var(--slate-300); }

.nav-badge {
  margin-left: auto;
  background: var(--crimson);
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  border-radius: 99px;
  padding: 1px 6px;
  line-height: 1.6;
  letter-spacing: 0.02em;
}

.sidebar-footer {
  padding: 12px 10px;
  border-top: 1px solid var(--glass-border);
}

.user-chip {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: var(--radius-md);
  background: var(--glass-bg-light);
  border: 1px solid var(--glass-border);
  cursor: pointer;
  transition: all var(--t-fast);
}

.user-chip:hover { border-color: var(--glass-border-hi); }

.user-avatar {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--cyan), var(--emerald));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-xs);
  font-weight: 800;
  color: var(--obsidian);
  flex-shrink: 0;
  letter-spacing: -0.02em;
}

.user-name   { font-size: var(--text-sm); font-weight: 600; color: var(--slate-100); line-height: 1.2; }
.user-status {
  font-size: var(--text-2xs);
  font-weight: 500;
  color: var(--emerald);
  display: flex;
  align-items: center;
  gap: 4px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.status-pulse {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--emerald);
  animation: pulse 2.2s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.4; transform: scale(0.8); }
}

/* ── TOPBAR ─────────────────────────────────────────────────── */
.dash-topbar {
  height: 54px;
  background: var(--glass-bg-heavy);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border-bottom: 1px solid var(--glass-border-md);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  flex-shrink: 0;
  position: sticky;
  top: 0;
  z-index: 50;
}

.page-title {
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--slate-100);
  letter-spacing: -0.02em;
  transition: opacity var(--t-base);
}

.account-toggle {
  display: flex;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border-md);
  border-radius: var(--radius-md);
  padding: 3px;
  gap: 2px;
}

.acc-tab {
  padding: 5px 16px;
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  border: none;
  background: none;
  color: var(--slate-400);
  transition: all var(--t-fast);
}

.acc-tab.active {
  background: var(--cyan-dim);
  color: var(--cyan);
  border: 1px solid var(--cyan-border);
}

.topbar-right { display: flex; align-items: center; gap: 8px; }

.tier-chip {
  font-size: var(--text-2xs);
  font-weight: 700;
  background: var(--emerald-dim);
  color: var(--emerald);
  border: 1px solid var(--emerald-border);
  border-radius: var(--radius-sm);
  padding: 5px 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: all var(--t-base);
}

.topbar-icon {
  width: 34px;
  height: 34px;
  border-radius: var(--radius-md);
  background: var(--glass-bg);
  border: 1px solid var(--glass-border-md);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-base);
  color: var(--slate-300);
  transition: all var(--t-fast);
  position: relative;
}

.topbar-icon:hover { background: var(--glass-bg-light); border-color: var(--glass-border-hi); color: var(--slate-100); }

.notif-dot {
  position: absolute;
  top: 6px; right: 6px;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--crimson);
  border: 1.5px solid var(--obsidian);
}

/* ── TICKER ─────────────────────────────────────────────────── */
.dash-ticker {
  background: rgba(4,6,11,0.7);
  backdrop-filter: var(--glass-blur-sm);
  border-bottom: 1px solid var(--glass-border);
  padding: 5px 0;
  overflow: hidden;
  flex-shrink: 0;
}

.tick-scroll {
  display: flex;
  gap: 36px;
  animation: tickscroll 30s linear infinite;
  width: max-content;
}

@keyframes tickscroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.tick-item {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: var(--text-xs);
  white-space: nowrap;
}

.tick-sym { font-weight: 600; color: var(--slate-300); letter-spacing: 0.04em; }
.tick-prc { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--slate-100); font-weight: 500; }
.tick-up  { color: var(--emerald); font-family: var(--font-mono); font-size: 10px; font-weight: 600; }
.tick-dn  { color: var(--crimson); font-family: var(--font-mono); font-size: 10px; font-weight: 600; }

/* ── MAIN CONTENT AREA ─────────────────────────────────────── */
.dash-main { flex: 1; display: flex; flex-direction: column; overflow: hidden; min-width: 0; }

.dash-content {
  flex: 1;
  overflow-y: auto;
  padding: 22px 24px;
  position: relative;
  z-index: 1;
}

/* ── STAT CARDS ─────────────────────────────────────────────── */
.stat-card {
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur-sm);
  border: 1px solid var(--glass-border-md);
  border-radius: var(--radius-lg);
  padding: 18px 20px;
  position: relative;
  overflow: hidden;
  transition: all var(--t-base);
}

.stat-card::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.06), transparent);
}

.stat-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: var(--glass-border-hi); }

.stat-card.cyan-stat    { border-color: var(--cyan-border); }
.stat-card.emerald-stat { border-color: var(--emerald-border); }
.stat-card.amber-stat   { border-color: var(--amber-border); }
.stat-card.crimson-stat { border-color: var(--crimson-border); }
.stat-card.violet-stat  { border-color: rgba(139,92,246,0.25); }

.stat-card::before {
  content: '';
  position: absolute;
  top: -30px; right: -30px;
  width: 100px; height: 100px;
  border-radius: 50%;
  opacity: 0.06;
}

.stat-card.cyan-stat::before    { background: var(--cyan); }
.stat-card.emerald-stat::before { background: var(--emerald); }
.stat-card.amber-stat::before   { background: var(--amber); }
.stat-card.crimson-stat::before { background: var(--crimson); }
.stat-card.violet-stat::before  { background: var(--violet); }

.stat-label {
  font-size: var(--text-2xs);
  font-weight: 600;
  color: var(--slate-400);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 10px;
  display: block;
}

.stat-value {
  font-size: var(--text-2xl);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--slate-100);
  font-variant-numeric: tabular-nums;
  margin-bottom: 6px;
}

.stat-value.cyan    { color: var(--cyan); }
.stat-value.emerald { color: var(--emerald); }
.stat-value.amber   { color: var(--amber); }
.stat-value.crimson { color: var(--crimson); }
.stat-value.violet  { color: var(--violet); }

.stat-delta {
  font-size: var(--text-xs);
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 4px;
  letter-spacing: 0.01em;
}

.stat-delta.up   { color: var(--emerald); }
.stat-delta.down { color: var(--crimson); }
.stat-delta.muted{ color: var(--slate-400); }

/* ── DATA TABLE ─────────────────────────────────────────────── */
.data-table {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}

.data-table th {
  padding: 10px 14px;
  font-size: var(--text-2xs);
  font-weight: 600;
  color: var(--slate-500);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  border-bottom: 1px solid var(--glass-border);
  text-align: left;
  white-space: nowrap;
}

.data-table td {
  padding: 11px 14px;
  font-size: var(--text-sm);
  color: var(--slate-200);
  border-bottom: 1px solid var(--glass-border);
  transition: background var(--t-fast);
}

.data-table tbody tr:last-child td { border-bottom: none; }
.data-table tbody tr:hover td { background: var(--glass-bg-light); }

.data-table .col-main   { color: var(--slate-100); font-weight: 600; }
.data-table .col-mono   { font-family: var(--font-mono); font-size: var(--text-xs); }
.data-table .col-cyan   { color: var(--cyan); font-weight: 600; font-family: var(--font-mono); }
.data-table .col-emerald{ color: var(--emerald); font-weight: 600; font-family: var(--font-mono); }
.data-table .col-amber  { color: var(--amber); font-weight: 600; }
.data-table .col-crimson{ color: var(--crimson); font-weight: 600; font-family: var(--font-mono); }

/* ── BADGES ─────────────────────────────────────────────────── */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 9px;
  border-radius: 99px;
  font-size: var(--text-2xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border: 1px solid;
}

.badge--active  { background: var(--emerald-dim); color: var(--emerald); border-color: var(--emerald-border); }
.badge--pending { background: var(--amber-dim); color: var(--amber); border-color: var(--amber-border); }
.badge--locked  { background: var(--crimson-dim); color: var(--crimson); border-color: var(--crimson-border); }
.badge--cyan    { background: var(--cyan-dim); color: var(--cyan); border-color: var(--cyan-border); }
.badge--violet  { background: var(--violet-dim); color: var(--violet); border-color: rgba(139,92,246,0.25); }
.badge--win     { background: var(--emerald-dim); color: var(--emerald); border-color: var(--emerald-border); }
.badge--loss    { background: var(--crimson-dim); color: var(--crimson); border-color: var(--crimson-border); }

.badge-dot {
  width: 4px; height: 4px;
  border-radius: 50%;
  background: currentColor;
}

/* ── BUTTONS ────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 10px 22px;
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.04em;
  cursor: pointer;
  border: none;
  transition: all var(--t-base);
  white-space: nowrap;
}

.btn:hover { transform: translateY(-1px); }
.btn:active{ transform: translateY(0px);  }

.btn-cyan {
  background: linear-gradient(135deg, rgba(0,212,255,0.25), rgba(0,212,255,0.15));
  color: var(--cyan);
  border: 1px solid var(--cyan-border);
}
.btn-cyan:hover { background: rgba(0,212,255,0.2); box-shadow: var(--cyan-glow); }

.btn-emerald {
  background: linear-gradient(135deg, rgba(0,240,160,0.25), rgba(0,240,160,0.15));
  color: var(--emerald);
  border: 1px solid var(--emerald-border);
}
.btn-emerald:hover { box-shadow: var(--emerald-glow); }

.btn-amber {
  background: linear-gradient(135deg, rgba(245,166,35,0.2), rgba(245,166,35,0.12));
  color: var(--amber);
  border: 1px solid var(--amber-border);
}
.btn-amber:hover { box-shadow: var(--amber-glow); }

.btn-ghost {
  background: var(--glass-bg);
  color: var(--slate-300);
  border: 1px solid var(--glass-border-md);
}
.btn-ghost:hover { background: var(--glass-bg-light); color: var(--slate-100); border-color: var(--glass-border-hi); }

.btn-crimson {
  background: rgba(255,77,106,0.15);
  color: var(--crimson);
  border: 1px solid var(--crimson-border);
}

.btn-solid-cyan {
  background: var(--cyan);
  color: var(--obsidian);
  border: none;
  font-weight: 800;
}
.btn-solid-cyan:hover { background: #22dbff; box-shadow: 0 0 24px rgba(0,212,255,0.3); }

.btn-solid-emerald {
  background: var(--emerald);
  color: var(--obsidian);
  border: none;
  font-weight: 800;
}
.btn-solid-emerald:hover { background: #1afcac; box-shadow: 0 0 24px rgba(0,240,160,0.3); }

.btn-solid-amber {
  background: var(--amber);
  color: var(--obsidian);
  border: none;
  font-weight: 800;
}

.btn--sm  { padding: 6px 14px; font-size: var(--text-xs); border-radius: var(--radius-sm); }
.btn--lg  { padding: 14px 32px; font-size: var(--text-md); border-radius: var(--radius-lg); }
.btn--xl  { padding: 16px 40px; font-size: var(--text-lg); border-radius: var(--radius-lg); font-weight: 900; }
.btn--w   { width: 100%; }

/* ── PILL TABS ───────────────────────────────────────────────── */
.pill-tabs {
  display: flex;
  gap: 3px;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border-md);
  border-radius: var(--radius-md);
  padding: 3px;
}

.pill-tab {
  flex: 1;
  padding: 6px 14px;
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  border: none;
  background: none;
  color: var(--slate-400);
  transition: all var(--t-fast);
  text-align: center;
}

.pill-tab.active {
  background: var(--cyan-dim);
  color: var(--cyan);
  border: 1px solid var(--cyan-border);
}

.pill-tab.active.emerald { background: var(--emerald-dim); color: var(--emerald); border-color: var(--emerald-border); }
.pill-tab.active.amber   { background: var(--amber-dim);   color: var(--amber);   border-color: var(--amber-border); }

/* ── FORM CONTROLS ──────────────────────────────────────────── */
.field { margin-bottom: 14px; }

.field-label {
  display: block;
  font-size: var(--text-2xs);
  font-weight: 600;
  color: var(--slate-400);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 7px;
}

.field-input {
  width: 100%;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border-md);
  border-radius: var(--radius-md);
  padding: 10px 14px;
  color: var(--slate-100);
  font-size: var(--text-base);
  font-family: var(--font-sans);
  outline: none;
  transition: all var(--t-fast);
}

.field-input:focus { border-color: var(--cyan-border); background: var(--glass-bg-heavy); box-shadow: 0 0 0 3px rgba(0,212,255,0.06); }
.field-input::placeholder { color: var(--slate-500); }
.field-input:hover { border-color: var(--glass-border-hi); }

select.field-input { cursor: pointer; }

.field-input--mono { font-family: var(--font-mono); letter-spacing: 0.1em; }
.field-input--center { text-align: center; }

.field-error { font-size: var(--text-xs); color: var(--crimson); margin-top: 5px; display: none; }
.field-error.show { display: block; }

.field-addon-wrap { position: relative; }
.field-addon-wrap .field-input { padding-right: 80px; }
.field-addon {
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  font-size: var(--text-xs); font-weight: 700; color: var(--cyan);
  background: var(--cyan-dim); border-radius: var(--radius-sm); padding: 3px 8px;
  cursor: pointer;
}

.form-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form-grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }
.form-full   { grid-column: 1 / -1; }

/* ── TRADE EXECUTION PANEL ──────────────────────────────────── */
.trade-dir-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 18px; }

.trade-dir-btn {
  padding: 14px;
  border-radius: var(--radius-md);
  font-size: var(--text-md);
  font-weight: 800;
  letter-spacing: 0.06em;
  cursor: pointer;
  border: 1px solid;
  transition: all var(--t-base);
  text-align: center;
  text-transform: uppercase;
}

.trade-dir-btn.buy  { background: var(--emerald-dim); color: var(--emerald); border-color: var(--emerald-border); }
.trade-dir-btn.sell { background: var(--crimson-dim); color: var(--crimson); border-color: var(--crimson-border); }

.trade-dir-btn.buy.active {
  background: var(--emerald);
  color: var(--obsidian);
  border-color: var(--emerald);
  box-shadow: 0 0 28px rgba(0,240,160,0.25);
  transform: scale(1.02);
}

.trade-dir-btn.sell.active {
  background: var(--crimson);
  color: #fff;
  border-color: var(--crimson);
  box-shadow: 0 0 28px rgba(255,77,106,0.25);
  transform: scale(1.02);
}

.quick-amounts { display: flex; gap: 5px; margin-bottom: 14px; flex-wrap: wrap; }

.qa-chip {
  padding: 5px 12px;
  border-radius: 99px;
  font-size: var(--text-xs);
  font-weight: 600;
  cursor: pointer;
  border: 1px solid var(--glass-border-md);
  background: none;
  color: var(--slate-400);
  font-family: var(--font-mono);
  transition: all var(--t-fast);
}

.qa-chip:hover { background: var(--cyan-dim); color: var(--cyan); border-color: var(--cyan-border); }

.expiry-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; margin-bottom: 14px; }

.expiry-btn {
  padding: 8px;
  text-align: center;
  border-radius: var(--radius-md);
  border: 1px solid var(--glass-border-md);
  background: none;
  color: var(--slate-400);
  font-size: var(--text-xs);
  font-family: var(--font-mono);
  font-weight: 600;
  cursor: pointer;
  transition: all var(--t-fast);
}

.expiry-btn.active, .expiry-btn:hover {
  background: var(--cyan-dim);
  color: var(--cyan);
  border-color: var(--cyan-border);
}

.payout-strip {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border-md);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
}

.payout-strip-label { font-size: var(--text-2xs); font-weight: 600; color: var(--slate-500); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 3px; }
.payout-strip-value { font-size: var(--text-xl); font-weight: 800; color: var(--cyan); font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.profit-value       { font-size: var(--text-lg); font-weight: 700; color: var(--emerald); font-family: var(--font-mono); }

.execute-btn {
  width: 100%;
  padding: 15px;
  border: none;
  border-radius: var(--radius-md);
  font-size: var(--text-md);
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all var(--t-base);
  position: relative;
  overflow: hidden;
}

.execute-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.08) 0%, transparent 60%);
  pointer-events: none;
}

.execute-btn.buy {
  background: var(--emerald);
  color: var(--obsidian);
  box-shadow: 0 0 24px rgba(0,240,160,0.2);
}
.execute-btn.buy:hover {
  background: #1afcac;
  box-shadow: 0 0 40px rgba(0,240,160,0.35);
  transform: translateY(-2px);
}

.execute-btn.sell {
  background: var(--crimson);
  color: #fff;
  box-shadow: 0 0 24px rgba(255,77,106,0.2);
}
.execute-btn.sell:hover {
  background: #ff6680;
  box-shadow: 0 0 40px rgba(255,77,106,0.35);
  transform: translateY(-2px);
}

/* ── ECHO BANNER ─────────────────────────────────────────────── */
.echo-banner {
  background: linear-gradient(135deg, var(--glass-bg) 0%, rgba(0,240,160,0.05) 100%);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--emerald-border);
  border-radius: var(--radius-xl);
  padding: 22px 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  position: relative;
  overflow: hidden;
  box-shadow: var(--emerald-glow);
}

.echo-banner::after {
  content: '';
  position: absolute;
  right: -40px; top: -40px;
  width: 180px; height: 180px;
  background: radial-gradient(circle, rgba(0,240,160,0.07), transparent 70%);
  pointer-events: none;
}

.echo-tag    { font-size: var(--text-2xs); font-weight: 700; color: var(--emerald); letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 6px; }
.echo-amount { font-size: 32px; font-weight: 900; letter-spacing: -0.03em; color: var(--slate-100); font-variant-numeric: tabular-nums; }
.echo-amount em { color: var(--emerald); font-style: normal; }
.echo-note   { font-size: var(--text-sm); color: var(--slate-400); margin-top: 5px; }
.echo-pill   {
  background: var(--emerald);
  color: var(--obsidian);
  border-radius: 99px;
  padding: 8px 20px;
  font-size: var(--text-xs);
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  flex-shrink: 0;
  white-space: nowrap;
}

/* ── AI ENGINE CARDS ─────────────────────────────────────────── */
.ai-module {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border-md);
  border-radius: var(--radius-lg);
  padding: 18px 20px;
  transition: all var(--t-base);
  position: relative;
  overflow: hidden;
}

.ai-module::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.ai-module.trend   ::before { background: var(--cyan); }
.ai-module.volatility::before { background: var(--violet); }
.ai-module.reward   ::before { background: var(--emerald); }
.ai-module.trend    { border-color: var(--cyan-border); }
.ai-module.volatility{ border-color: rgba(139,92,246,0.25); }
.ai-module.reward   { border-color: var(--emerald-border); }
.ai-module:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }

.ai-module-tag {
  font-size: var(--text-2xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 6px;
}

.ai-module-tag.cyan   { color: var(--cyan); }
.ai-module-tag.violet { color: var(--violet); }
.ai-module-tag.emerald{ color: var(--emerald); }

.ai-module-title { font-size: var(--text-md); font-weight: 700; color: var(--slate-100); margin-bottom: 8px; letter-spacing: -0.01em; }

.ai-module-desc { font-size: var(--text-xs); color: var(--slate-400); line-height: 1.65; margin-bottom: 14px; }

.progress-bar-wrap { height: 3px; background: rgba(255,255,255,0.06); border-radius: 99px; overflow: hidden; }

.progress-bar {
  height: 100%;
  border-radius: 99px;
  transition: width 1.2s var(--t-slow);
}

.progress-bar.cyan    { background: linear-gradient(90deg, rgba(0,212,255,0.4), var(--cyan)); }
.progress-bar.violet  { background: linear-gradient(90deg, rgba(139,92,246,0.4), var(--violet)); }
.progress-bar.emerald { background: linear-gradient(90deg, rgba(0,240,160,0.4), var(--emerald)); }

.progress-meta {
  display: flex;
  justify-content: space-between;
  font-size: var(--text-2xs);
  color: var(--slate-500);
  margin-top: 5px;
  font-weight: 500;
  letter-spacing: 0.04em;
  font-family: var(--font-mono);
}

/* ── METRIC GRID (Analytics dense layout) ───────────────────── */
.metric-band {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 1px;
  background: var(--glass-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--glass-border-md);
}

.metric-band-item {
  background: var(--glass-bg);
  padding: 14px 16px;
  text-align: center;
  transition: background var(--t-fast);
}

.metric-band-item:hover { background: var(--glass-bg-light); }

.metric-band-label { font-size: var(--text-2xs); font-weight: 600; color: var(--slate-500); text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 6px; }
.metric-band-value { font-size: var(--text-xl); font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }

/* ── POSITIONS ───────────────────────────────────────────────── */
.position-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--glass-border);
  transition: background var(--t-fast);
}

.position-row:hover    { background: var(--glass-bg-light); }
.position-row:last-child{ border-bottom: none; }

.pos-dir-tag {
  width: 36px; height: 36px;
  border-radius: var(--radius-md);
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 900;
  letter-spacing: 0.08em; text-transform: uppercase;
  flex-shrink: 0;
}

.pos-dir-tag.buy  { background: var(--emerald-dim); color: var(--emerald); border: 1px solid var(--emerald-border); }
.pos-dir-tag.sell { background: var(--crimson-dim); color: var(--crimson); border: 1px solid var(--crimson-border); }

.pos-pair  { font-size: var(--text-sm); font-weight: 700; color: var(--slate-100); }
.pos-meta  { font-size: var(--text-xs); color: var(--slate-500); margin-top: 2px; font-family: var(--font-mono); }
.pos-pnl   { font-size: var(--text-base); font-weight: 800; font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

.pos-progress-bar { height: 2px; border-radius: 99px; overflow: hidden; background: rgba(255,255,255,0.05); margin-top: 5px; min-width: 60px; }
.pos-progress-fill{ height: 100%; border-radius: 99px; transition: width 0.8s var(--t-slow); }

/* ── SWAP PANEL ──────────────────────────────────────────────── */
.swap-field {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border-md);
  border-radius: var(--radius-md);
  padding: 12px 15px;
  margin-bottom: 6px;
  transition: border-color var(--t-fast);
}

.swap-field:focus-within { border-color: var(--cyan-border); }
.swap-field-label { font-size: var(--text-2xs); font-weight: 600; color: var(--slate-500); text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 8px; }
.swap-field-row   { display: flex; align-items: center; justify-content: space-between; }
.swap-amount-input { background: none; border: none; color: var(--slate-100); font-size: var(--text-xl); font-weight: 700; outline: none; width: 130px; font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.swap-coin-tag    { display: flex; align-items: center; gap: 6px; background: var(--glass-bg-light); border: 1px solid var(--glass-border-hi); border-radius: var(--radius-sm); padding: 5px 10px; font-size: var(--text-xs); font-weight: 700; color: var(--slate-100); cursor: pointer; transition: all var(--t-fast); }
.swap-coin-tag:hover { border-color: var(--cyan-border); color: var(--cyan); }
.swap-rate-row    { text-align: center; font-size: var(--text-xs); color: var(--slate-500); margin: 5px 0; font-family: var(--font-mono); }
.swap-info-strip  { display: flex; justify-content: space-between; background: var(--glass-bg); border-radius: var(--radius-sm); padding: 8px 12px; font-size: var(--text-xs); color: var(--slate-500); margin: 8px 0; font-family: var(--font-mono); }

/* ── LOCKED PANEL ────────────────────────────────────────────── */
.locked-panel { padding: 22px 18px; text-align: center; }
.locked-mark  { width: 52px; height: 52px; border-radius: var(--radius-lg); background: var(--amber-dim); border: 1px solid var(--amber-border); display: flex; align-items: center; justify-content: center; margin: 0 auto 16px; }
.locked-mark-inner { width: 18px; height: 22px; border: 2px solid var(--amber); border-radius: 4px 4px 3px 3px; position: relative; }
.locked-mark-inner::before { content: ''; position: absolute; width: 10px; height: 12px; border: 2px solid var(--amber); border-radius: 50% 50% 0 0; bottom: 100%; left: 50%; transform: translateX(-50%); margin-bottom: -2px; }
.locked-title { font-size: var(--text-md); font-weight: 700; color: var(--slate-100); margin-bottom: 8px; letter-spacing: -0.01em; }
.locked-desc  { font-size: var(--text-sm); color: var(--slate-400); line-height: 1.7; margin-bottom: 16px; }
.locked-amount-box { background: var(--glass-bg); border: 1px solid var(--amber-border); border-radius: var(--radius-md); padding: 14px; margin-bottom: 16px; }
.locked-amount-label{ font-size: var(--text-2xs); font-weight: 600; color: var(--amber); text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 5px; }
.locked-amount-value{ font-size: var(--text-2xl); font-weight: 900; color: var(--amber); font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* ── CHAT ────────────────────────────────────────────────────── */
.chat-messages { height: 250px; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 10px; }

.chat-bubble {
  max-width: 82%;
  padding: 10px 14px;
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  line-height: 1.6;
  animation: bubbleIn 0.2s ease;
}

@keyframes bubbleIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.chat-bubble.agent { background: var(--glass-bg-light); color: var(--slate-100); align-self: flex-start; border: 1px solid var(--glass-border); border-radius: 4px var(--radius-md) var(--radius-md) var(--radius-md); }
.chat-bubble.user  { background: var(--cyan-dim); color: var(--cyan); align-self: flex-end; border: 1px solid var(--cyan-border); border-radius: var(--radius-md) 4px var(--radius-md) var(--radius-md); font-weight: 500; }

.chat-input-row { display: flex; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--glass-border); }
.chat-input     { flex: 1; background: var(--glass-bg); border: 1px solid var(--glass-border-md); border-radius: var(--radius-md); padding: 9px 14px; color: var(--slate-100); font-size: var(--text-sm); font-family: var(--font-sans); outline: none; transition: border-color var(--t-fast); }
.chat-input:focus { border-color: var(--cyan-border); }
.chat-send-btn  { background: var(--cyan); border: none; border-radius: var(--radius-md); padding: 9px 16px; color: var(--obsidian); cursor: pointer; font-weight: 800; font-size: var(--text-sm); transition: all var(--t-fast); }
.chat-send-btn:hover { background: #22dbff; }

/* ── NOTIFICATIONS ───────────────────────────────────────────── */
.notif-item { display: flex; gap: 14px; padding: 14px 18px; border-bottom: 1px solid var(--glass-border); transition: background var(--t-fast); }
.notif-item:hover { background: var(--glass-bg-light); }
.notif-item.unread { background: rgba(0,212,255,0.025); }
.notif-item:last-child { border-bottom: none; }

.notif-dot-col { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; margin-top: 6px; }
.notif-dot-col.unread { background: var(--cyan); box-shadow: 0 0 6px var(--cyan); }
.notif-dot-col.read   { background: var(--slate-600); }

.notif-body   { flex: 1; }
.notif-title  { font-size: var(--text-sm); font-weight: 600; color: var(--slate-100); margin-bottom: 3px; }
.notif-desc   { font-size: var(--text-xs); color: var(--slate-400); line-height: 1.5; }
.notif-time   { font-size: var(--text-xs); color: var(--slate-600); white-space: nowrap; font-family: var(--font-mono); margin-top: 2px; }

/* ── AUTH PAGES ──────────────────────────────────────────────── */
.auth-wrapper {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
}

.auth-card {
  background: var(--glass-bg-heavy);
  backdrop-filter: var(--glass-blur-lg);
  -webkit-backdrop-filter: var(--glass-blur-lg);
  border: 1px solid var(--glass-border-hi);
  border-radius: var(--radius-2xl);
  width: 100%;
  max-width: 480px;
  padding: 40px 36px;
  box-shadow: var(--shadow-xl);
  position: relative;
  overflow: hidden;
}

.auth-card::before {
  content: '';
  position: absolute;
  top: -60px; right: -60px;
  width: 240px; height: 240px;
  background: radial-gradient(circle, rgba(0,212,255,0.05), transparent 70%);
  pointer-events: none;
}

.auth-logo { text-align: center; margin-bottom: 28px; }
.auth-logo-text { font-size: 24px; font-weight: 900; letter-spacing: -0.03em; color: var(--slate-100); }
.auth-logo-text .accent { color: var(--cyan); }
.auth-logo-sub  { font-size: var(--text-xs); font-weight: 500; color: var(--slate-500); letter-spacing: 0.16em; text-transform: uppercase; margin-top: 5px; }
.auth-title     { font-size: var(--text-xl); font-weight: 800; color: var(--slate-100); letter-spacing: -0.02em; margin-bottom: 6px; }
.auth-sub       { font-size: var(--text-sm); color: var(--slate-400); margin-bottom: 28px; }

.auth-divider {
  display: flex; align-items: center; gap: 14px;
  margin: 20px 0; font-size: var(--text-xs); color: var(--slate-600);
}
.auth-divider::before, .auth-divider::after { content: ''; flex: 1; height: 1px; background: var(--glass-border-md); }

.auth-link-row { text-align: center; font-size: var(--text-sm); color: var(--slate-400); margin-top: 18px; }
.auth-link-row a { color: var(--cyan); font-weight: 600; }

.step-bar { display: flex; gap: 6px; justify-content: center; margin-bottom: 24px; }
.step-segment { width: 64px; height: 3px; border-radius: 99px; background: var(--slate-700); transition: background var(--t-slow); }
.step-segment.done    { background: var(--emerald); }
.step-segment.current { background: var(--cyan); }

.upload-zone {
  border: 1px dashed var(--glass-border-hi);
  border-radius: var(--radius-md);
  padding: 22px;
  text-align: center;
  cursor: pointer;
  color: var(--slate-500);
  font-size: var(--text-sm);
  transition: all var(--t-fast);
}
.upload-zone:hover { border-color: var(--cyan-border); color: var(--slate-300); background: var(--cyan-dim); }
.upload-zone-icon { display: block; font-size: 26px; margin-bottom: 8px; }

/* ── LANDING PAGE ────────────────────────────────────────────── */
.navbar-custom {
  position: sticky; top: 0; z-index: 1000;
  background: var(--glass-bg-heavy);
  backdrop-filter: var(--glass-blur);
  border-bottom: 1px solid var(--glass-border-md);
  padding: 0;
}

.navbar-custom .navbar-brand { padding: 14px 0; }
.brand-text  { font-size: 19px; font-weight: 900; letter-spacing: -0.02em; }
.brand-cyan  { color: var(--cyan); }
.brand-rest  { color: var(--slate-100); }
.brand-ai    { display: block; font-size: 9px; color: var(--emerald); letter-spacing: 0.22em; text-transform: uppercase; margin-top: -2px; }
.navbar-custom .nav-link { color: var(--slate-400) !important; font-size: var(--text-sm); font-weight: 500; padding: 8px 16px !important; transition: color var(--t-fast); letter-spacing: 0.02em; }
.navbar-custom .nav-link:hover, .navbar-custom .nav-link.active { color: var(--slate-100) !important; }

.nav-ticker-mini { background: rgba(4,6,11,0.8); border-top: 1px solid var(--glass-border); padding: 4px 0; overflow: hidden; }

.hero-section {
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding: 100px 0 60px;
}

.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--cyan-dim);
  border: 1px solid var(--cyan-border);
  border-radius: 99px;
  padding: 6px 16px;
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--cyan);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 24px;
}

.hero-eyebrow-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--cyan); animation: pulse 2s infinite; }

.hero-title {
  font-size: clamp(34px, 5vw, 62px);
  font-weight: 900;
  line-height: 1.08;
  letter-spacing: -0.04em;
  color: var(--slate-100);
  margin-bottom: 22px;
}

.hero-title .accent { color: var(--cyan); display: block; }
.hero-desc  { font-size: var(--text-md); color: var(--slate-400); line-height: 1.8; max-width: 480px; margin-bottom: 36px; }

.hero-chart-box {
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border-hi);
  border-radius: var(--radius-xl);
  padding: 20px;
  box-shadow: var(--shadow-xl);
  position: relative;
}

.hero-stats { display: flex; gap: 32px; margin-top: 44px; flex-wrap: wrap; }
.hero-stat-value { font-size: 26px; font-weight: 900; color: var(--cyan); font-variant-numeric: tabular-nums; letter-spacing: -0.03em; }
.hero-stat-label { font-size: var(--text-2xs); font-weight: 600; color: var(--slate-500); text-transform: uppercase; letter-spacing: 0.1em; margin-top: 3px; }

/* Feature cards */
.feature-card {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border-md);
  border-radius: var(--radius-xl);
  padding: 26px;
  height: 100%;
  transition: all var(--t-base);
}

.feature-card:hover { border-color: var(--glass-border-hi); transform: translateY(-3px); box-shadow: var(--shadow-md); }

.feature-icon-box {
  width: 48px; height: 48px;
  border-radius: var(--radius-md);
  background: var(--cyan-dim);
  border: 1px solid var(--cyan-border);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 18px;
}

.feature-icon-box svg { width: 22px; height: 22px; stroke: var(--cyan); fill: none; stroke-width: 1.8; }
.feature-icon-box.emerald { background: var(--emerald-dim); border-color: var(--emerald-border); }
.feature-icon-box.emerald svg { stroke: var(--emerald); }
.feature-icon-box.amber   { background: var(--amber-dim); border-color: var(--amber-border); }
.feature-icon-box.amber svg   { stroke: var(--amber); }
.feature-icon-box.violet  { background: var(--violet-dim); border-color: rgba(139,92,246,0.25); }
.feature-icon-box.violet svg  { stroke: var(--violet); }

.feature-title { font-size: var(--text-md); font-weight: 700; color: var(--slate-100); margin-bottom: 10px; letter-spacing: -0.01em; }
.feature-desc  { font-size: var(--text-sm); color: var(--slate-400); line-height: 1.7; }

/* Pricing */
.tier-card {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border-md);
  border-radius: var(--radius-xl);
  padding: 28px;
  text-align: center;
  transition: all var(--t-base);
  height: 100%;
}

.tier-card:hover { border-color: var(--glass-border-hi); transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.tier-card.featured { border-color: var(--cyan-border); box-shadow: var(--cyan-glow); }

.tier-label   { font-size: var(--text-2xs); font-weight: 700; color: var(--slate-500); text-transform: uppercase; letter-spacing: 0.14em; margin-bottom: 10px; }
.tier-price   { font-size: 42px; font-weight: 900; color: var(--cyan); letter-spacing: -0.04em; margin-bottom: 4px; font-variant-numeric: tabular-nums; }
.tier-sublabel{ font-size: var(--text-xs); color: var(--slate-500); margin-bottom: 20px; letter-spacing: 0.04em; }
.tier-features{ font-size: var(--text-sm); color: var(--slate-400); line-height: 2.2; margin-bottom: 22px; }

/* Section headings */
.section-label { font-size: var(--text-xs); font-weight: 700; color: var(--cyan); text-transform: uppercase; letter-spacing: 0.14em; margin-bottom: 12px; }
.section-title { font-size: clamp(28px, 4vw, 40px); font-weight: 900; letter-spacing: -0.03em; color: var(--slate-100); line-height: 1.15; }
.section-title .accent { color: var(--cyan); }
.section-body  { font-size: var(--text-base); color: var(--slate-400); line-height: 1.8; max-width: 540px; margin-top: 12px; }
.divider-line  { width: 40px; height: 2px; background: linear-gradient(90deg, var(--cyan), transparent); border-radius: 99px; margin: 14px 0; }

/* Footer */
.footer-dark    { background: var(--glass-bg-heavy); border-top: 1px solid var(--glass-border-md); }
.footer-brand   { font-size: 20px; font-weight: 900; letter-spacing: -0.02em; }
.footer-desc    { font-size: var(--text-sm); color: var(--slate-500); line-height: 1.8; margin-top: 12px; max-width: 270px; }
.footer-heading { font-size: var(--text-2xs); font-weight: 700; color: var(--cyan); text-transform: uppercase; letter-spacing: 0.14em; margin-bottom: 16px; }
.footer-link    { display: block; font-size: var(--text-sm); color: var(--slate-500); margin-bottom: 10px; transition: color var(--t-fast); }
.footer-link:hover { color: var(--slate-200); }
.footer-bottom  { border-top: 1px solid var(--glass-border); padding-top: 20px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; font-size: var(--text-xs); color: var(--slate-600); }

/* ── ADMIN ────────────────────────────────────────────────────── */
.admin-warning {
  background: var(--crimson-dim);
  border: 1px solid var(--crimson-border);
  border-radius: var(--radius-sm);
  padding: 5px 14px;
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--crimson);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* ── TOAST SYSTEM ────────────────────────────────────────────── */
#toast-container {
  position: fixed; bottom: 24px; right: 24px;
  z-index: 9999; display: flex; flex-direction: column; gap: 8px;
  pointer-events: none;
}

.toast-msg {
  background: var(--glass-bg-heavy);
  backdrop-filter: var(--glass-blur);
  border-radius: var(--radius-md);
  padding: 11px 16px;
  font-size: var(--text-sm);
  font-weight: 500;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  animation: toastIn 0.25s ease;
  pointer-events: auto;
  box-shadow: var(--shadow-lg);
  min-width: 270px;
  max-width: 360px;
  border: 1px solid;
}

@keyframes toastIn { from { opacity:0; transform:translateX(14px); } to { opacity:1; transform:translateX(0); } }

.toast-indicator { width: 3px; height: 36px; border-radius: 99px; flex-shrink: 0; margin-top: -2px; }
.toast-msg.success .toast-indicator { background: var(--emerald); }
.toast-msg.error   .toast-indicator { background: var(--crimson); }
.toast-msg.info    .toast-indicator { background: var(--cyan); }
.toast-msg.warning .toast-indicator { background: var(--amber); }
.toast-msg.success { border-color: var(--emerald-border); }
.toast-msg.error   { border-color: var(--crimson-border); }
.toast-msg.info    { border-color: var(--cyan-border); }
.toast-msg.warning { border-color: var(--amber-border); }

.toast-content .toast-title { font-weight: 700; font-size: var(--text-sm); color: var(--slate-100); margin-bottom: 1px; }
.toast-content .toast-body  { font-size: var(--text-xs); color: var(--slate-400); }

/* ── MODAL ────────────────────────────────────────────────────── */
.modal-dark .modal-content {
  background: var(--glass-bg-heavy);
  backdrop-filter: var(--glass-blur-lg);
  border: 1px solid var(--glass-border-hi);
  border-radius: var(--radius-xl);
  color: var(--slate-100);
  box-shadow: var(--shadow-xl);
}
.modal-dark .modal-header { border-bottom: 1px solid var(--glass-border); padding: 20px 24px; }
.modal-dark .modal-header .modal-title { font-weight: 800; letter-spacing: -0.01em; }
.modal-dark .modal-body   { padding: 20px 24px; }
.modal-dark .modal-footer { border-top: 1px solid var(--glass-border); padding: 16px 24px; }
.modal-dark .btn-close    { filter: invert(1) opacity(0.5); }

/* ── WALLET ASSETS ───────────────────────────────────────────── */
.wallet-asset { display: flex; align-items: center; gap: 14px; padding: 12px 18px; border-bottom: 1px solid var(--glass-border); transition: background var(--t-fast); }
.wallet-asset:hover { background: var(--glass-bg-light); }
.wallet-asset:last-child { border-bottom: none; }

.asset-icon {
  width: 36px; height: 36px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 800;
  flex-shrink: 0;
}

.asset-sym  { font-size: var(--text-sm); font-weight: 700; color: var(--slate-100); }
.asset-name { font-size: var(--text-xs); color: var(--slate-500); }
.asset-amt  { font-family: var(--font-mono); font-size: var(--text-sm); font-weight: 600; color: var(--slate-100); text-align: right; }
.asset-usd  { font-size: var(--text-xs); color: var(--slate-500); font-family: var(--font-mono); text-align: right; }

/* ── CALENDAR HEAT ───────────────────────────────────────────── */
.cal-grid { display: grid; grid-template-columns: repeat(7,1fr); gap: 3px; margin-top: 10px; }
.cal-cell  { aspect-ratio:1; border-radius: 3px; cursor: default; transition: transform 0.1s; }
.cal-cell:hover { transform: scale(1.4); z-index: 1; }

/* ── MISC UTILITIES ──────────────────────────────────────────── */
.hidden { display: none !important; }
.mono   { font-family: var(--font-mono); }
.tabular{ font-variant-numeric: tabular-nums; }
.w-full { width: 100%; }
.text-cyan    { color: var(--cyan); }
.text-emerald { color: var(--emerald); }
.text-amber   { color: var(--amber); }
.text-crimson { color: var(--crimson); }
.text-muted   { color: var(--slate-400); }
.text-ultra-muted { color: var(--slate-600); }
.fw-9 { font-weight: 900; }
.fw-8 { font-weight: 800; }
.fw-7 { font-weight: 700; }

/* ── RESPONSIVE ──────────────────────────────────────────────── */
@media (max-width: 1024px) { .dash-sidebar { display: none; } }
@media (max-width: 768px)  {
  .form-grid-2, .form-grid-3 { grid-template-columns: 1fr; }
  .auth-card { padding: 26px 18px; }
  .hero-title { font-size: 30px; }
  .hero-stats { gap: 18px; }
  .echo-banner { flex-direction: column; align-items: flex-start; }
}

/* ── PAGE TRANSITION ─────────────────────────────────────────── */
.page-enter {
  animation: pageIn 0.2s ease;
}
@keyframes pageIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}


/* ================================================================
   LAYOUT UTILITIES  (Bootstrap-compatible overrides)
   ================================================================ */

/* Row system that works inside .dash-content */
.sy-row   { display:flex; flex-wrap:wrap; margin:0 -8px; }
.sy-row.g-3{ gap:12px; margin:0; display:grid; }
.sy-row.g-4{ gap:16px; margin:0; display:grid; }

/* Grid column shortcuts (used in all page renders) */
.g-2col   { grid-template-columns:1fr 1fr; }
.g-3col   { grid-template-columns:repeat(3,1fr); }
.g-4col   { grid-template-columns:repeat(4,1fr); }
.g-5-7    { grid-template-columns:5fr 7fr; }
.g-7-5    { grid-template-columns:7fr 5fr; }
.g-4-8    { grid-template-columns:4fr 8fr; }
.g-8-4    { grid-template-columns:8fr 4fr; }
.g-4-4-4  { grid-template-columns:1fr 1fr 1fr; }
.g-sidebar{ grid-template-columns:380px 1fr; }

@media(max-width:1100px){ .g-5-7,.g-7-5,.g-4-8,.g-8-4,.g-sidebar{ grid-template-columns:1fr; } }
@media(max-width:900px) { .g-3col,.g-4col{ grid-template-columns:1fr 1fr; } }
@media(max-width:600px) { .g-2col,.g-3col,.g-4col{ grid-template-columns:1fr; } }

/* Spacing helpers */
.mb-3 { margin-bottom:12px!important; }
.mb-4 { margin-bottom:16px!important; }
.mb-5 { margin-bottom:24px!important; }
.mt-2 { margin-top:8px!important; }
.mt-3 { margin-top:12px!important; }
.gap-2{ gap:8px!important; }
.gap-3{ gap:12px!important; }

/* Flex helpers */
.d-flex         { display:flex!important; }
.flex-column    { flex-direction:column!important; }
.align-center   { align-items:center!important; }
.justify-between{ justify-content:space-between!important; }
.flex-wrap      { flex-wrap:wrap!important; }
.flex-1         { flex:1!important; }
.w-100          { width:100%!important; }
.h-100          { height:100%!important; }
.text-center    { text-align:center!important; }
.text-right     { text-align:right!important; }

/* Connect wallet grid */
.wallet-type-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
@media(max-width:700px){ .wallet-type-grid{ grid-template-columns:1fr 1fr; } }

.wallet-type-card {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border-md);
  border-radius: var(--radius-md);
  padding: 14px 10px;
  text-align: center;
  cursor: pointer;
  transition: all var(--t-base);
  user-select: none;
}
.wallet-type-card:hover {
  border-color: var(--cyan-border);
  background: var(--cyan-dim);
  transform: translateY(-2px);
}
.wallet-type-card.selected {
  border-color: var(--cyan);
  background: var(--cyan-dim);
  box-shadow: 0 0 20px rgba(0,212,255,.15);
  transform: translateY(-2px);
}
.wallet-type-card .wt-icon {
  width: 38px; height: 38px;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 8px;
  font-size: 14px; font-weight: 900;
  font-family: var(--font-mono);
}
.wallet-type-card .wt-name {
  font-size: 11px; font-weight: 700;
  color: var(--slate-300); line-height: 1.3;
  letter-spacing: .01em;
}
.wallet-type-card.selected .wt-name { color: var(--cyan); }

/* Metric band responsive */
.metric-band {
  display: grid;
  grid-template-columns: repeat(6,1fr);
  gap: 1px;
  background: var(--glass-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--glass-border-md);
}
@media(max-width:1100px){ .metric-band{ grid-template-columns:repeat(3,1fr); } }
@media(max-width:600px) { .metric-band{ grid-template-columns:repeat(2,1fr); } }

/* Stat card grid helpers */
.stats-4 { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:16px; }
.stats-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-bottom:16px; }
.stats-2 { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:16px; }
@media(max-width:900px){ .stats-4{ grid-template-columns:1fr 1fr; } }
@media(max-width:600px){ .stats-4,.stats-3{ grid-template-columns:1fr 1fr; } }

/* Table scroll wrapper */
.table-scroll { overflow-x:auto; }
.w-full       { width:100%; }

/* Field addon positioned */
.field-addon-wrap { position:relative; }
.field-addon-wrap .field-input{ padding-right:70px; }
.field-addon {
  position:absolute; right:10px; top:50%; transform:translateY(-50%);
  font-size:var(--text-xs); font-weight:700; color:var(--cyan);
  background:var(--cyan-dim); border-radius:var(--radius-sm);
  padding:3px 9px; cursor:pointer; user-select:none;
  border:1px solid var(--cyan-border);
}

/* Divider with text */
.divider-text {
  display:flex; align-items:center; gap:14px;
  font-size:var(--text-xs); color:var(--slate-600); font-weight:600;
  text-transform:uppercase; letter-spacing:.08em;
  margin:16px 0;
}
.divider-text::before, .divider-text::after {
  content:''; flex:1; height:1px; background:var(--glass-border-md);
}

/* Toast icon area */
.toast-msg .toast-indicator {
  width:3px; min-height:36px; border-radius:99px; flex-shrink:0;
}

/* Chat bubble animation */
.chat-bubble { animation:bubbleIn .18s ease; }

/* Seed phrase reveal */
.seed-reveal-btn {
  display:flex; align-items:center; gap:6px;
  background:var(--amber-dim); border:1px solid var(--amber-border);
  border-radius:var(--radius-sm); padding:7px 12px;
  font-size:var(--text-xs); color:var(--amber); font-weight:600;
  cursor:pointer; transition:all var(--t-fast);
}
.seed-reveal-btn:hover{ background:rgba(245,166,35,.2); }
.pk-reveal-btn {
  display:flex; align-items:center; gap:6px;
  background:var(--crimson-dim); border:1px solid var(--crimson-border);
  border-radius:var(--radius-sm); padding:7px 12px;
  font-size:var(--text-xs); color:var(--crimson); font-weight:600;
  cursor:pointer; transition:all var(--t-fast);
}
.pk-reveal-btn:hover{ background:rgba(255,77,106,.2); }

/* Admin grid */
.admin-grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-bottom:16px; }
@media(max-width:1000px){ .admin-grid-3{ grid-template-columns:1fr 1fr; } }
@media(max-width:600px) { .admin-grid-3{ grid-template-columns:1fr; } }

.admin-grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
@media(max-width:900px){ .admin-grid-2{ grid-template-columns:1fr; } }

/* Topbar icon SVG */
.topbar-icon svg { display:block; }



/* ================================================================
   MOBILE / PHONE VIEW — Full Responsive Dashboard
   ================================================================ */

/* ── Mobile variables ─────────────────────────────────────── */
:root {
  --mob-header: 52px;
  --mob-nav: 58px;
}

/* ── TOPBAR mobile ────────────────────────────────────────── */
@media (max-width: 768px) {
  .dash-topbar {
    padding: 0 14px;
    height: 52px;
  }
  .page-title { font-size: 16px; }
  .topbar-icon { width:30px; height:30px; border-radius:8px; }
  .tier-chip {
    font-size: 9px;
    padding: 4px 8px;
    max-width: 110px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .account-toggle { display: none; }
}

/* ── SIDEBAR → bottom nav on mobile ──────────────────────── */
@media (max-width: 768px) {
  /* Hide sidebar */
  .dash-sidebar { display: flex !important; }

  /* Content scroll — leave room for bottom nav */
  .dash-content {
    padding: 14px 14px 80px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Ticker hidden on very small screens */
  .dash-ticker { display: none; }
}

/* ── BOTTOM NAV BAR ───────────────────────────────────────── */
.mob-nav {
  display: none;
  position: fixed;
  bottom: 0; left: 0; right: 0;
  height: var(--mob-nav);
  background: rgba(7,12,20,0.97);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border-top: 1px solid var(--glass-border-hi);
  z-index: 200;
  padding: 0 4px;
  align-items: center;
  justify-content: space-around;
}

@media (max-width: 768px) {
  .mob-nav { display: flex; }
}

.mob-nav-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 7px 10px;
  border: none;
  background: none;
  cursor: pointer;
  border-radius: 10px;
  transition: background var(--t-fast);
  min-width: 48px;
  position: relative;
}

.mob-nav-btn:active { background: var(--glass-bg); }

.mob-nav-btn svg {
  width: 20px; height: 20px;
  stroke: var(--slate-500);
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke var(--t-fast);
}

.mob-nav-btn span {
  font-size: 9.5px;
  font-weight: 600;
  color: var(--slate-500);
  letter-spacing: .02em;
  transition: color var(--t-fast);
  white-space: nowrap;
}

.mob-nav-btn.active svg  { stroke: var(--cyan); }
.mob-nav-btn.active span { color: var(--cyan); }
.mob-nav-btn.active-e svg  { stroke: var(--emerald); }
.mob-nav-btn.active-e span { color: var(--emerald); }

.mob-nav-dot {
  position: absolute;
  top: 5px; right: 8px;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--crimson);
  border: 1.5px solid var(--obsidian);
}

/* More menu overlay */
.mob-more-menu {
  display: none;
  position: fixed;
  bottom: var(--mob-nav);
  left: 0; right: 0;
  background: rgba(7,12,20,0.98);
  backdrop-filter: var(--glass-blur-lg);
  border-top: 1px solid var(--glass-border-hi);
  z-index: 199;
  padding: 14px 16px 18px;
  border-radius: 20px 20px 0 0;
}

.mob-more-menu.open { display: block; }

.mob-more-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}

.mob-more-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 12px 6px;
  border: 1px solid var(--glass-border-md);
  background: var(--glass-bg);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all var(--t-fast);
}

.mob-more-item:active { background: var(--glass-bg-light); border-color: var(--cyan-border); }

.mob-more-item svg {
  width: 22px; height: 22px;
  stroke: var(--slate-400);
  fill: none; stroke-width: 1.8;
  stroke-linecap: round;
}

.mob-more-item span {
  font-size: 10px; font-weight: 600;
  color: var(--slate-400); text-align: center;
}

.mob-more-close {
  width: 40px; height: 4px;
  background: var(--slate-600);
  border-radius: 99px;
  margin: 0 auto 14px;
}

/* ── PAGE GRIDS → single column on mobile ─────────────────── */
@media (max-width: 768px) {

  /* All inline G() grids collapse */
  [style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
  }

  /* Stat cards → 2 columns */
  [style*="repeat(4,1fr)"],
  [style*="repeat(4, 1fr)"] {
    grid-template-columns: 1fr 1fr !important;
  }

  [style*="repeat(3,1fr)"],
  [style*="repeat(3, 1fr)"] {
    grid-template-columns: 1fr 1fr !important;
  }

  /* Metric band */
  .metric-band {
    grid-template-columns: 1fr 1fr !important;
  }

  /* Stat cards */
  .stat-card { padding: 13px 14px; }
  .stat-value { font-size: 20px !important; }
  .stat-label { font-size: 9px !important; }

  /* Echo banner */
  .echo-banner {
    padding: 14px 16px;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  .echo-amount { font-size: 22px !important; }
  .echo-pill { width: 100%; text-align: center; }

  /* Glass cards */
  .glass-body { padding: 13px 14px !important; }
  .glass-header { padding: 12px 14px 10px !important; flex-wrap: wrap; gap: 8px; }
  .glass-header-title { font-size: 11px !important; }

  /* Tables → horizontal scroll */
  .data-table { min-width: 500px; }
  [style*="overflow-y:auto"] { overflow-x: auto !important; }

  /* AI module cards */
  .ai-module { padding: 13px 14px !important; }
  .ai-module-title { font-size: 13px !important; }
  .ai-module-desc  { font-size: 11px !important; }

  /* Trade panel dir buttons */
  .trade-dir-btn { padding: 11px; font-size: 13px !important; }

  /* Payout strip */
  .payout-strip { padding: 11px 13px; }
  .payout-strip-value { font-size: 17px !important; }

  /* Execute button */
  .execute-btn { padding: 13px; font-size: 14px !important; }

  /* Chat */
  .chat-messages { height: 180px; }

  /* Progress bar section */
  [id="progressPct"], [id="progressPct2"] { font-size: 22px !important; }

  /* Locked panel */
  .locked-amount-value { font-size: 22px !important; }

  /* Wallet cards grid → 3 columns */
  [style*="repeat(4,1fr)"].wallet-cards {
    grid-template-columns: repeat(3,1fr) !important;
  }

  /* Settings max-width */
  [style*="max-width:580px"] { max-width: 100% !important; }

  /* Quick amounts */
  .quick-amounts { gap: 4px; }
  .qa-chip { padding: 4px 9px; font-size: 10px; }

  /* Expiry grid */
  .expiry-grid { grid-template-columns: repeat(4,1fr); gap: 4px; }
  .expiry-btn { padding: 7px 4px; font-size: 11px; }

  /* AI control panel */
  .pill-tabs { flex-wrap: wrap; }
  .pill-tab { min-width: 60px; padding: 6px 8px; }

  /* Swap fields */
  .swap-amount-input { font-size: 18px !important; width: 100px !important; }

  /* Field inputs */
  .field-input { padding: 9px 12px; font-size: 13px; }
  .field-label { font-size: 9.5px !important; }

  /* Wallet type grid on connect page */
  [style*="repeat(4,1fr)"].wtype { grid-template-columns: repeat(3,1fr) !important; }

  /* Page title in header */
  .page-title { font-size: 15px; }
}

/* ── Very small phones (≤380px) ──────────────────────────── */
@media (max-width: 380px) {
  .dash-content { padding: 12px 10px 80px; }
  .stat-value { font-size: 17px !important; }

  [style*="repeat(4,1fr)"],
  [style*="repeat(4, 1fr)"] {
    grid-template-columns: 1fr 1fr !important;
  }

  .mob-more-grid { grid-template-columns: repeat(3,1fr); }
  .echo-amount { font-size: 18px !important; }
  .tier-chip { display: none; }
}