/* ═══════════════════════════════════════════════════════════════
   AlfaLime — iOS-style design system
   Soft pastel cards on light gray (or near-black in dark mode),
   SF Pro typography, multi-accent system colors, frosted glass.
   Auto light/dark via `prefers-color-scheme`.
   ═══════════════════════════════════════════════════════════════ */

/* ── iOS system tokens ─────────────────────────────────────────── */
:root {
  /* Apple system colors — Light Mode (HIG defaults) */
  --ios-blue:    #007AFF;
  --ios-green:   #09d1bc;
  --ios-light-green: #076b49;
  --ios-indigo:  #5856D6;
  --ios-orange:  #FF9500;
  --ios-pink:    #FF2D55;
  --ios-purple:  #AF52DE;
  --ios-red:     #FF3B30;
  --ios-teal:    #5AC8FA;
  --ios-yellow:  #FFCC00;

  /* Backgrounds */
  --bg-primary:    #F2F2F7;   /* iOS grouped table bg */
  --bg-secondary:  #FFFFFF;   /* cell bg */
  --bg-tertiary:   #F9F9FB;   /* nested cell */
  --bg-glass:      rgba(255,255,255,0.72);   /* nav bar / sheet */
  --bg-elevated:   #FFFFFF;

  /* Text */
  --text-primary:    #000000;
  --text-secondary:  rgba(60,60,67,0.60);   /* secondaryLabel */
  --text-tertiary:   rgba(60,60,67,0.30);
  --text-quaternary: rgba(60,60,67,0.18);
  --text-on-color:   #FFFFFF;

  /* Separators (iOS uses thin rgba lines) */
  --separator:      rgba(60,60,67,0.12);
  --separator-opaque: #C6C6C8;

  /* Fills (for tinted controls) */
  --fill-primary:   rgba(120,120,128,0.20);
  --fill-secondary: rgba(120,120,128,0.16);
  --fill-tertiary:  rgba(118,118,128,0.12);

  /* Layout */
  --radius-card:     14px;
  --radius-hero:     22px;
  --radius-button:   12px;
  --radius-chip:     999px;
  --pad-card:        16px;
  --gap-section:     20px;

  /* Shadows — iOS keeps them gentle */
  --shadow-card:   0 1px 2px rgba(0,0,0,0.04), 0 2px 8px rgba(0,0,0,0.04);
  --shadow-hero:   0 4px 20px rgba(0,0,0,0.06);
  --shadow-floating: 0 8px 24px rgba(0,0,0,0.12);
}

/* ── Dark mode — match `prefers-color-scheme` ──────────────────── */
@media (prefers-color-scheme: dark) {
  :root {
    --ios-blue:    #0A84FF;
    --ios-green:   #023a35;
    --ios-light-green: #055e40;
    --ios-indigo:  #5E5CE6;
    --ios-orange:  #FF9F0A;
    --ios-pink:    #FF375F;
    --ios-purple:  #BF5AF2;
    --ios-red:     #FF453A;
    --ios-teal:    #64D2FF;
    --ios-yellow:  #FFD60A;

    --bg-primary:    #031927;
    --bg-secondary:  #042133;
    --bg-tertiary:   #2C2C2E;
    --bg-glass:      rgba(28,28,30,0.72);
    --bg-elevated:   #1C1C1E;

    --text-primary:    #FFFFFF;
    --text-secondary:  rgba(235,235,245,0.60);
    --text-tertiary:   rgba(235,235,245,0.30);
    --text-quaternary: rgba(235,235,245,0.18);

    --separator:        rgba(84,84,88,0.65);
    --separator-opaque: #38383A;

    --fill-primary:   rgba(120,120,128,0.36);
    --fill-secondary: rgba(120,120,128,0.32);
    --fill-tertiary:  rgba(118,118,128,0.24);

    --shadow-card:   0 1px 2px rgba(0,0,0,0.20), 0 2px 8px rgba(0,0,0,0.30);
    --shadow-hero:   0 4px 20px rgba(0,0,0,0.40);
  }
}

/* ── Forced light/dark via [data-theme] — overrides prefers-color-scheme ── */
[data-theme="light"] {
  color-scheme: light;
  /* Reset every token back to the light-mode defaults */
  --ios-blue:#007AFF; --ios-green:#095e55; --ios-indigo:#5856D6;
  --ios-light-green:#046947;  
  --ios-orange:#FF9500; --ios-pink:#FF2D55; --ios-purple:#AF52DE;
  --ios-red:#FF3B30; --ios-teal:#5AC8FA; --ios-yellow:#FFCC00;
  --bg-primary:#F2F2F7; --bg-secondary:#FFFFFF; --bg-tertiary:#F9F9FB;
  --bg-glass:rgba(255,255,255,0.72); --bg-elevated:#FFFFFF;
  --text-primary:#000000; --text-secondary:rgba(60,60,67,0.60);
  --text-tertiary:rgba(60,60,67,0.30); --text-quaternary:rgba(60,60,67,0.18);
  --text-on-color:#FFFFFF;
  --separator:rgba(60,60,67,0.12); --separator-opaque:#C6C6C8;
  --fill-primary:rgba(120,120,128,0.20); --fill-secondary:rgba(120,120,128,0.16);
  --fill-tertiary:rgba(118,118,128,0.12);
  --shadow-card:0 1px 2px rgba(0,0,0,0.04),0 2px 8px rgba(0,0,0,0.04);
  --shadow-hero:0 4px 20px rgba(0,0,0,0.06);
  --shadow-floating:0 8px 24px rgba(0,0,0,0.12);
}
[data-theme="dark"] {
  color-scheme: dark;
  --ios-blue:#0A84FF; --ios-green:#095e55; --ios-indigo:#5E5CE6; 
  --ios-light-green:#06ce8b;
  --ios-orange:#FF9F0A; --ios-pink:#FF375F; --ios-purple:#BF5AF2;
  --ios-red:#FF453A; --ios-teal:#64D2FF; --ios-yellow:#FFD60A;
  --bg-primary:#031927; --bg-secondary:#042133; --bg-tertiary:#2C2C2E;
  --bg-glass:rgba(28,28,30,0.72); --bg-elevated:#1C1C1E;
  --text-primary:#FFFFFF; --text-secondary:rgba(235,235,245,0.60);
  --text-tertiary:rgba(235,235,245,0.30); --text-quaternary:rgba(235,235,245,0.18);
  --separator:rgba(84,84,88,0.65); --separator-opaque:#38383A;
  --fill-primary:rgba(4,4,51,0.36); --fill-secondary:rgba(120,120,128,0.32);
  --fill-tertiary:rgba(118,118,128,0.24);
  --shadow-card:0 1px 2px rgba(0,0,0,0.20),0 2px 8px rgba(0,0,0,0.30);
  --shadow-hero:0 4px 20px rgba(0,0,0,0.40);
}

/* ════════════════════════════════════════════════════════════════ */
/*  Base                                                            */
/* ════════════════════════════════════════════════════════════════ */
* { box-sizing: border-box; }

html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

body {
  background: var(--bg-primary);
  color: var(--text-primary);
  font-family: -apple-system, BlinkMacSystemFont,
               "SF Pro Display", "SF Pro Text",
               "Segoe UI", system-ui, sans-serif;
  font-size: 17px;            /* iOS body default */
  line-height: 1.4;
  min-height: 100vh;
  letter-spacing: -0.01em;    /* iOS tightens slightly */
  -webkit-tap-highlight-color: transparent;
}

/* Reserve room for the bottom mobile tab bar */
@media (max-width: 991.98px) {
  body { padding-bottom: calc(62px + env(safe-area-inset-bottom)); }
}

h1, h2, h3, h4, h5 {
  font-weight: 700;
  letter-spacing: -0.022em;
  color: var(--text-primary);
}
h1 { font-size: 34px; letter-spacing: -0.032em; }    /* iOS Large Title */
h2 { font-size: 28px; letter-spacing: -0.026em; }    /* iOS Title 1 */
h3 { font-size: 22px; letter-spacing: -0.022em; }    /* iOS Title 2 */
h4 { font-size: 20px; }
h5 { font-size: 17px; }

a { color: var(--ios-blue); text-decoration: none; }
a:hover { opacity: 0.8; }

code, .mono { font-family: ui-monospace, "SF Mono", Menlo, monospace; }

/* ════════════════════════════════════════════════════════════════ */
/*  Glass nav bar (iOS top bar)                                     */
/* ════════════════════════════════════════════════════════════════ */
.ios-navbar {
  background: var(--bg-glass);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 0.5px solid var(--separator);
}
.ios-navbar-inner {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 16px;
  max-width: 1400px;
  margin: 0 auto;
  gap: 12px;
}
.ios-brand {
  display: flex; align-items: center; gap: 10px;
  text-decoration: none;
  color: var(--text-primary);
}
.ios-brand-icon {
  width: 32px; height: 32px;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--ios-green), var(--ios-blue));
  display: flex; align-items: center; justify-content: center;
  color: #FFFFFF; font-weight: 700; font-size: 16px;
  box-shadow: 0 2px 6px rgba(0,122,255,0.25);
}
.ios-brand-text {
  font-weight: 700; font-size: 17px; letter-spacing: -0.02em;
}

/* Desktop horizontal nav links */
.ios-nav-links {
  display: none;            /* hidden on mobile; shown via media query */
  gap: 4px;
  align-items: center;
}
@media (min-width: 992px) {
  .ios-nav-links { display: flex; }
}
.ios-nav-link {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 8px;
  font-size: 15px; font-weight: 500;
  color: var(--text-secondary);
  border-radius: 8px;
  text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease;
}
.ios-nav-link:hover { color: var(--text-primary); background: var(--fill-tertiary); }
.ios-nav-link.active { color: var(--ios-blue); background: rgba(0,122,255,0.10); }
@media (prefers-color-scheme: dark) {
  .ios-nav-link.active { background: rgba(10,132,255,0.18); }
}
[data-theme="dark"]  .ios-nav-link.active { background: rgba(10,132,255,0.18); }
[data-theme="light"] .ios-nav-link.active { background: rgba(0,122,255,0.10); }

/* Desktop dropdown */
.ios-nav-dropdown { position: relative; }
.ios-nav-dropbtn  { background: none; border: none; cursor: pointer; font-family: inherit; }
.ios-nav-dropdown-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  min-width: 210px;
  background: var(--bg-card);
  border: 0.5px solid var(--separator);
  border-radius: 14px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.18);
  padding: 6px;
  z-index: 2000;
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
}
/* Keep menu open while hovering either the trigger or the menu itself */
.ios-nav-dropdown:hover .ios-nav-dropdown-menu { display: block; }

/* Mobile address bar — never show on desktop, even if JS sets display:flex */
@media (min-width: 992px) {
  #mobileAddrBar { display: none !important; }
}
.ios-nav-dropdown-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-primary);
  text-decoration: none;
  transition: background 0.15s;
}
.ios-nav-dropdown-item i { font-size: 15px; color: var(--text-secondary); width: 18px; text-align: center; }
.ios-nav-dropdown-item:hover { background: var(--fill-tertiary); }
.ios-nav-dropdown-item.active { color: var(--ios-blue); background: rgba(0,122,255,0.10); }
.ios-nav-dropdown-item.active i { color: var(--ios-blue); }

/* Theme toggle in nav */
.ios-theme-toggle {
  background: var(--fill-tertiary);
  border: none;
  color: var(--text-primary);
  width: 36px; height: 36px;
  border-radius: 50%;
  font-size: 16px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.15s ease;
}
.ios-theme-toggle:hover { background: var(--fill-secondary); }

/* ── Testing-mode strip ─────────────────────────────────── */
.test-strip {
  background: rgba(255,149,0,0.10);
  color: var(--ios-orange);
  border-bottom: 0.5px solid rgba(255,149,0,0.2);
  padding: 6px 16px;
  text-align: center;
  font-size: 13px;
  font-weight: 600;
}

/* ════════════════════════════════════════════════════════════════ */
/*  Bottom Tab Bar (mobile only) — iOS app convention              */
/* ════════════════════════════════════════════════════════════════ */
.ios-tabbar {
  display: flex;
  position: fixed;
  bottom: 0; left: 0; right: 0;
  background: var(--bg-glass);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-top: 0.5px solid var(--separator);
  padding: 4px 6px calc(4px + env(safe-area-inset-bottom));
  z-index: 100;
  height: 63px;
}
@media (min-width: 992px) {
  .ios-tabbar { display: none; }
}
.ios-tab {
  flex: 1;
  display: flex; flex-direction: column; align-items: center;
  padding: 6px 4px;
  text-decoration: none;
  color: var(--text-secondary);
  font-size: 10px;
  font-weight: 500;
  gap: 2px;
  border-radius: 8px;
  transition: color 0.15s ease;
}
.ios-tab i { font-size: 22px; line-height: 1; }
.ios-tab.active { color: var(--ios-blue); }
.ios-tab:hover { color: var(--text-primary); }
.ios-tab.active:hover { color: var(--ios-blue); }

/* ── Featured (Royalty) tab — raised circle above the bar ── */
.ios-tab-featured {
  position: relative;
  transform: translateY(-25px);
  gap: 0;
  height: 78px;
}
.ios-tab-featured-bubble {
  width: 52px; height: 52px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--ios-yellow) 0%, var(--ios-orange) 100%);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 14px rgba(255,149,0,0.45);
  margin-bottom: 4px;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.ios-tab-featured .ios-tab-featured-bubble i {
  font-size: 22px; color: #fff; line-height: 1;
}
.ios-tab-featured span {
  font-size: 10px; font-weight: 600;
  color: var(--ios-orange);
}
.ios-tab-featured.active .ios-tab-featured-bubble {
  background: linear-gradient(135deg, #FFD700 0%, var(--ios-orange) 100%);
  box-shadow: 0 6px 18px rgba(255,149,0,0.60);
  transform: scale(1.07);
}
.ios-tab-featured.active span { color: var(--ios-orange); }
.ios-tab-featured:hover .ios-tab-featured-bubble { transform: scale(1.05); }

/* ════════════════════════════════════════════════════════════════ */
/*  Cards                                                            */
/* ════════════════════════════════════════════════════════════════ */
.ios-card {
  background: var(--bg-secondary);
  border-radius: var(--radius-card);
  padding: var(--pad-card);
  box-shadow: var(--shadow-card);
  border: 0;
}
.ios-card.lg { padding: 20px; border-radius: 18px; }

/* Hero card — Apple Wallet style (gradient, large radius) */
.ios-hero-card {
  border-radius: var(--radius-hero);
  padding: 24px;
  color: var(--text-on-color);
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(at 100% 0%, rgba(255,255,255,0.15) 0%, transparent 50%),
    linear-gradient(135deg, #0e1a36 0%, #1a2952 50%, #390154 100%);
   
  box-shadow: 0 12px 32px rgba(88,86,214,0.30);
}
.ios-hero-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(at 80% 100%, rgba(255,255,255,0.12) 0%, transparent 40%);
  pointer-events: none;
}
.ios-hero-card * { position: relative; z-index: 1; }

/* Hero card — neutral variant (light glass card) */
.ios-hero-card.neutral {
  background: var(--bg-secondary);
  color: var(--text-primary);
  box-shadow: var(--shadow-hero);
}

/* ── Grouped list — iOS Settings style ──────────────────────────── */
.ios-list {
  background: var(--bg-secondary);
  border-radius: var(--radius-card);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}
.ios-list-row {
  display: flex; align-items: center;
  padding: 12px 16px;
  border-bottom: 0.5px solid var(--separator);
  gap: 12px;
}
.ios-list-row:last-child { border-bottom: none; }
.ios-list-icon {
  width: 30px; height: 30px;
  border-radius: 7px;
  display: flex; align-items: center; justify-content: center;
  color: #FFFFFF;
  font-size: 16px;
  flex-shrink: 0;
}
.ios-list-content { flex: 1; min-width: 0; }
.ios-list-title { font-size: 17px; font-weight: 500; color: var(--text-primary); }
.ios-list-subtitle { font-size: 13px; color: var(--text-secondary); margin-top: 1px; }
.ios-list-value { font-size: 17px; color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.ios-list-chevron { color: var(--text-tertiary); font-size: 14px; }

/* ── Section header (iOS table section) ─────────────────────────── */
.ios-section-header {
  font-size: 13px;
  font-weight: 400;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 8px 16px 6px;
}

/* ════════════════════════════════════════════════════════════════ */
/*  Buttons                                                          */
/* ════════════════════════════════════════════════════════════════ */
.ios-btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 6px;
  background: var(--ios-blue);
  color: #FFFFFF;
  border: none;
  font-family: inherit;
  font-size: 16px;
  font-weight: 600;
  padding: 10px 20px;
  border-radius: var(--radius-button);
  cursor: pointer;
  transition: opacity 0.15s ease, transform 0.05s ease;
  text-decoration: none;
  letter-spacing: -0.01em;
}
.ios-btn:hover:not(:disabled) { opacity: 0.88; color: #FFFFFF; }
.ios-btn:active:not(:disabled) { transform: scale(0.98); }
.ios-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.ios-btn.sm { font-size: 15px; padding: 8px 14px; border-radius: 10px; }
.ios-btn.lg { font-size: 17px; padding: 14px 22px; border-radius: 14px; }
.ios-btn.block { width: 100%; }

.ios-btn.green  { background: var(--ios-green); }
.ios-btn.orange { background: var(--ios-orange); }
.ios-btn.red    { background: var(--ios-red); }
.ios-btn.purple { background: var(--ios-purple); }

/* Tinted button — Apple's "lighter" style */
.ios-btn-tinted {
  background: rgba(0,122,255,0.10);
  color: var(--ios-blue);
}
@media (prefers-color-scheme: dark) {
  .ios-btn-tinted { background: rgba(10,132,255,0.18); }
}
[data-theme="dark"]  .ios-btn-tinted { background: rgba(10,132,255,0.18); }
[data-theme="light"] .ios-btn-tinted { background: rgba(0,122,255,0.10); }
.ios-btn-tinted:hover:not(:disabled) { background: rgba(0,122,255,0.18); color: var(--ios-blue); }
.ios-btn-tinted.green { color: var(--ios-green); background: rgba(52,199,89,0.10); }
.ios-btn-tinted.green:hover:not(:disabled) { background: rgba(52,199,89,0.18); color: var(--ios-green); }

/* Plain text button */
.ios-btn-plain {
  background: transparent;
  border: none;
  color: var(--ios-blue);
  font-family: inherit;
  font-size: 17px;
  font-weight: 500;
  padding: 8px 12px;
  cursor: pointer;
  border-radius: 8px;
}
.ios-btn-plain:hover { background: var(--fill-tertiary); color: var(--ios-blue); }

/* Gray fill (like 'Cancel' on iOS) */
.ios-btn-gray {
  background: var(--fill-secondary);
  color: var(--text-primary);
  border: none;
  font-family: inherit;
  font-size: 15px;
  font-weight: 500;
  padding: 8px 14px;
  border-radius: 10px;
  cursor: pointer;
}
.ios-btn-gray:hover { background: var(--fill-primary); }

/* Chip buttons (quick amounts) */
.ios-chip {
  display: inline-flex; align-items: center;
  background: var(--fill-tertiary);
  color: var(--text-primary);
  border: none;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  padding: 6px 12px;
  border-radius: var(--radius-chip);
  cursor: pointer;
  transition: background 0.12s ease;
}
.ios-chip:hover { background: var(--fill-secondary); }
.ios-chip.active {
  background: var(--ios-blue); color: #FFFFFF;
}

/* ════════════════════════════════════════════════════════════════ */
/*  Forms                                                            */
/* ════════════════════════════════════════════════════════════════ */
.ios-input {
  display: block; width: 100%;
  background: var(--bg-tertiary);
  border: none;
  color: var(--text-primary);
  font-family: inherit;
  font-size: 17px;
  font-weight: 500;
  padding: 14px 16px;
  border-radius: var(--radius-button);
  font-variant-numeric: tabular-nums;
  outline: none;
  transition: background 0.15s ease;
}
.ios-input:focus { background: var(--bg-secondary); box-shadow: 0 0 0 2px var(--ios-blue); }
.ios-input::placeholder { color: var(--text-tertiary); }
@media (prefers-color-scheme: dark) {
  .ios-input { background: var(--bg-tertiary); }
}
[data-theme="dark"]  .ios-input { background: var(--bg-tertiary); }
[data-theme="light"] .ios-input { background: var(--fill-tertiary); }

.ios-input-group {
  display: flex;
  background: var(--bg-tertiary);
  border-radius: var(--radius-button);
  overflow: hidden;
}
.ios-input-group .ios-input {
  background: transparent;
  border-radius: 0;
}
.ios-input-group .ios-input:focus { background: transparent; box-shadow: none; }
.ios-input-group:focus-within { box-shadow: 0 0 0 2px var(--ios-blue); }
.ios-input-group-suffix {
  display: flex; align-items: center;
  padding: 0 16px;
  color: var(--text-secondary);
  font-size: 17px;
  font-weight: 500;
  background: transparent;
  border-left: 0.5px solid var(--separator);
}

.ios-select {
  display: inline-flex;
  background: var(--fill-tertiary);
  border: none;
  color: var(--text-primary);
  font-family: inherit;
  font-size: 15px;
  font-weight: 500;
  padding: 7px 30px 7px 12px;
  border-radius: 10px;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%238E8E93' d='M8 11L3 6h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  background-size: 14px;
}

.ios-label {
  display: block;
  font-size: 13px;
  color: var(--text-secondary);
  font-weight: 500;
  margin-bottom: 6px;
  padding-left: 4px;
}

/* ════════════════════════════════════════════════════════════════ */
/*  Status badges / pills                                            */
/* ════════════════════════════════════════════════════════════════ */
.ios-badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 8px;
  border-radius: var(--radius-chip);
  font-size: 12px;
  font-weight: 600;
  background: var(--fill-tertiary);
  color: var(--text-primary);
}
.ios-badge.blue   { background: rgba(0,122,255,0.14);  color: var(--ios-blue); }
.ios-badge.green  { background: rgba(52,199,89,0.16);  color: var(--ios-green); }
.ios-badge.orange { background: rgba(255,149,0,0.16);  color: var(--ios-orange); }
.ios-badge.red    { background: rgba(255,59,48,0.14);  color: var(--ios-red); }
.ios-badge.purple { background: rgba(175,82,222,0.14); color: var(--ios-purple); }

.ios-badge.dot::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
}

.ios-chip-addr {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--fill-tertiary);
  border-radius: var(--radius-chip);
  padding: 3px 10px;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 13px;
  color: var(--text-primary);
  cursor: pointer;
}
.ios-chip-addr:hover { background: var(--fill-secondary); }

/* ════════════════════════════════════════════════════════════════ */
/*  Hero ring (cashback countdown)                                   */
/* ════════════════════════════════════════════════════════════════ */
.ring-wrap {
  position: relative;
  width: 180px; height: 180px;
  margin: 0 auto;
}
.ring-wrap svg { transform: rotate(-90deg); }
.ring-wrap circle { fill: transparent; }
.ring-wrap .track { stroke: rgba(255,255,255,0.20); stroke-width: 10; }
.ring-wrap .fill  { stroke: #FFFFFF; stroke-width: 10; stroke-linecap: round; transition: stroke-dashoffset 0.5s ease; }
.ios-hero-card.neutral .ring-wrap .track { stroke: var(--fill-tertiary); }
.ios-hero-card.neutral .ring-wrap .fill  { stroke: var(--ios-blue); }
.ring-center {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center;
}
.ring-big { font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.ring-lbl { font-size: 11px; opacity: 0.7; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600; }

/* Cashback dots — Apple Fitness "rings" feel */
.dots-row { display: flex; gap: 6px; flex-wrap: wrap; }
.dot-step {
  width: 24px; height: 24px;
  border-radius: 7px;
  background: rgba(255,255,255,0.18);
  background: rgb(196 150 69 / 52%);
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700;
  color: rgba(255, 255, 255, 0.998);
}
.dot-step.done {
  background: rgba(255,255,255,0.95);
  color: var(--ios-blue);
}
.dot-step.next {
  background: var(--ios-green);
  color: #FFFFFF;
  box-shadow: 0 0 0 3px rgba(52,199,89,0.30);
}
/* Neutral hero variant adjusts dot colors */
.ios-hero-card.neutral .dot-step { background: var(--fill-tertiary); color: var(--text-tertiary); }
.ios-hero-card.neutral .dot-step.done { background: var(--ios-blue); color: #FFFFFF; }
.ios-hero-card.neutral .dot-step.next { background: var(--ios-green); }

/* ════════════════════════════════════════════════════════════════ */
/*  Tables                                                           */
/* ════════════════════════════════════════════════════════════════ */
.ios-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}
.ios-table thead th {
  font-size: 13px;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 600;
  padding: 12px 12px;
  text-align: left;
  border-bottom: 0.5px solid var(--separator);
}
.ios-table tbody td {
  padding: 12px;
  border-bottom: 0.5px solid var(--separator);
  font-size: 15px;
  font-variant-numeric: tabular-nums;
}
.ios-table tbody tr:last-child td { border-bottom: none; }

/* ════════════════════════════════════════════════════════════════ */
/*  Banners                                                          */
/* ════════════════════════════════════════════════════════════════ */
.ios-banner {
  border-radius: var(--radius-card);
  padding: 14px 16px;
  display: flex; align-items: center; gap: 12px;
  background: var(--bg-secondary);
  box-shadow: var(--shadow-card);
}
.ios-banner-icon {
  width: 36px; height: 36px;
  border-radius: 9px;
  background: var(--fill-tertiary);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  font-size: 18px;
}
.ios-banner.blue   .ios-banner-icon { background: rgba(0,122,255,0.14);  color: var(--ios-blue); }
.ios-banner.green  .ios-banner-icon { background: rgba(52,199,89,0.16);  color: var(--ios-green); }
.ios-banner.orange .ios-banner-icon { background: rgba(255,149,0,0.16);  color: var(--ios-orange); }
.ios-banner.red    .ios-banner-icon { background: rgba(255,59,48,0.14);  color: var(--ios-red); }
.ios-banner-title { font-weight: 600; font-size: 15px; color: var(--text-primary); }
.ios-banner-sub   { font-size: 13px; color: var(--text-secondary); margin-top: 1px; }

/* ════════════════════════════════════════════════════════════════ */
/*  Receive box (swap/buy preview)                                   */
/* ════════════════════════════════════════════════════════════════ */
.ios-receive {
  background: var(--bg-tertiary);
  border-radius: var(--radius-button);
  padding: 14px 16px;
}
.ios-receive-amount {
  font-size: 28px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  color: var(--ios-light-green);
}
.ios-receive.blue   .ios-receive-amount { color: var(--ios-blue); }
.ios-receive.orange .ios-receive-amount { color: var(--ios-orange); }
.ios-receive-sub { font-size: 13px; color: var(--text-secondary); margin-top: 2px; }

/* ════════════════════════════════════════════════════════════════ */
/*  Stat cards (Apple Health / Fitness style)                        */
/* ════════════════════════════════════════════════════════════════ */
.ios-stat-card {
  background: var(--bg-secondary);
  border-radius: var(--radius-card);
  padding: 14px;
  box-shadow: var(--shadow-card);
}
.ios-stat-icon {
  width: 28px; height: 28px;
  border-radius: 7px;
  display: flex; align-items: center; justify-content: center;
  color: #FFFFFF;
  font-size: 14px;
  margin-bottom: 8px;
}
.ios-stat-lbl {
  font-size: 13px;
  color: var(--text-secondary);
  font-weight: 500;
}
.ios-stat-val {
  font-size: 22px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.022em;
  color: var(--text-primary);
}
.ios-stat-val.sm { font-size: 17px; }
.ios-stat-unit {
  font-size: 0.65em;
  opacity: 0.8;
  font-weight: 500;
}

/* ════════════════════════════════════════════════════════════════ */
/*  Toasts                                                           */
/* ════════════════════════════════════════════════════════════════ */
.toast-stack {
  position: fixed;
  bottom: 100px; right: 16px;
  z-index: 1080;
  display: flex; flex-direction: column;
  gap: 8px;
  max-width: 360px;
}
@media (min-width: 992px) {
  .toast-stack { bottom: 20px; right: 20px; }
}
.ios-toast {
  background: var(--bg-glass);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border: 0.5px solid var(--separator);
  border-radius: 14px;
  padding: 12px 16px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-primary);
  box-shadow: var(--shadow-floating);
  display: flex; align-items: center; gap: 8px;
  animation: ios-toast-in 0.3s cubic-bezier(0.2,0.8,0.2,1);
}
.ios-toast i { font-size: 18px; }
.ios-toast.success i { color: var(--ios-green); }
.ios-toast.error   i { color: var(--ios-red); }
.ios-toast.warning i { color: var(--ios-orange); }
.ios-toast.info    i { color: var(--ios-blue); }
@keyframes ios-toast-in {
  from { transform: translateY(20px) scale(0.95); opacity: 0; }
  to   { transform: translateY(0)    scale(1);    opacity: 1; }
}

/* ════════════════════════════════════════════════════════════════ */
/*  Skeleton loader                                                  */
/* ════════════════════════════════════════════════════════════════ */
.skel {
  display: inline-block;
  background: linear-gradient(90deg,
    var(--fill-tertiary) 0%,
    var(--fill-secondary) 50%,
    var(--fill-tertiary) 100%);
  background-size: 200% 100%;
  animation: shim 1.4s infinite;
  border-radius: 6px;
  min-width: 60px;
  height: 1em;
}
@keyframes shim { 0%{background-position:200% 0} 100%{background-position:-200% 0} }

/* ════════════════════════════════════════════════════════════════ */
/*  Status pills (table cells)                                       */
/* ════════════════════════════════════════════════════════════════ */
.st-pill {
  display: inline-block;
  padding: 2px 8px;
  border-radius: var(--radius-chip);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.st-pill.ready   { background: rgba(52,199,89,0.16);  color: var(--ios-green); }
.st-pill.pending { background: rgba(255,149,0,0.16);  color: var(--ios-orange); }
.st-pill.claimed { background: var(--fill-tertiary);  color: var(--text-secondary); }

/* ════════════════════════════════════════════════════════════════ */
/*  Container                                                        */
/* ════════════════════════════════════════════════════════════════ */
.ios-container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 20px 16px;
}
@media (min-width: 768px) {
  .ios-container { padding: 28px 24px; }
}

/* Page title */
.ios-page-title {
  font-size: 34px;
  font-weight: 700;
  letter-spacing: -0.032em;
  margin: 8px 0 4px;
}
.ios-page-subtitle {
  font-size: 15px;
  color: var(--text-secondary);
  margin-bottom: 20px;
}

/* Helpers */
.text-secondary-ios { color: var(--text-secondary); }
.text-tertiary-ios  { color: var(--text-tertiary); }
.mono { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-variant-numeric: tabular-nums; }

/* Vertical rhythm */
.mt-section { margin-top: var(--gap-section); }
.mb-section { margin-bottom: var(--gap-section); }
.gap-section { gap: var(--gap-section); }

/* Footer */
.ios-footer {
  text-align: center;
  padding: 24px 16px;
  color: var(--text-tertiary);
  font-size: 13px;
  border-top: 1px solid var(--separator);
  margin-top: 24px;
}
.ios-footer a {
  color: var(--text-secondary);
  text-decoration: none;
}
.ios-footer-contract {
  color: #8D0BB1;
  font-size: 13px;
}

/* Misc Bootstrap overrides for the dropdown / collapse used elsewhere */
.dropdown-menu {
  background: var(--bg-secondary);
  border: 0.5px solid var(--separator);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-hero);
}
.dropdown-item { color: var(--text-primary); }
.dropdown-item:hover { background: var(--fill-tertiary); color: var(--text-primary); }

/* Big number display (pending income hero) */
.ios-bignum {
  font-size: 64px;
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
@media (max-width: 767px) {
  .HeroNumber {
    grid-template-columns: 1fr 1fr;
}
.HeroNumber > div {
    border: 1px solid #3d4359;
    text-align: center;
    padding: 5px 5px 10px;
    border-radius: 10px;
}
}
@media (max-width: 575.98px) {
  .ios-bignum { font-size: 48px; }
  .HeroBtn a {
    font-size: 14px !important;
    padding: 12px !important;
    border-radius: 10px !important;
}
  .HeroBtn {
    grid-template-columns: 1fr 1fr;
}
}

/* ── Mobile nav drawer link hover ─────────────────────────── */
.alfa-mobile-nav-link:hover {
  background: var(--fill-tertiary) !important;
  color: var(--text-primary) !important;
}

#mobileMenuBtn{
    border: 2px solid #12766b;
  }