/* ═══════════════════════════════════════════════════════════════
   Aurora — Design System  |  assets/lux.css
   ═══════════════════════════════════════════════════════════════ */

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

/* ── CSS Variables ─────────────────────────────────────────────── */
:root {
  --primary:       #c62828;
  --primary-dark:  #b71c1c;
  --primary-light: #ff5252;
  --primary-glow:  rgba(198,40,40,0.35);

  --bg:            #080808;
  --bg-elevated:   #0f0f0f;
  --surface-1:     #141414;
  --surface-2:     #1a1a1a;
  --surface-3:     #222222;
  --surface-4:     #2a2a2a;

  --text-1:        #ffffff;
  --text-2:        #e0e0e0;
  --text-3:        #999999;
  --text-4:        #555555;

  --border:        rgba(255,255,255,0.06);
  --border-strong: rgba(255,255,255,0.12);

  --green:         #00c853;
  --green-dim:     rgba(0,200,83,0.12);
  --amber:         #ffab00;
  --amber-dim:     rgba(255,171,0,0.12);
  --blue:          #2979ff;
  --blue-dim:      rgba(41,121,255,0.12);
  --purple:        #aa00ff;
  --purple-dim:    rgba(170,0,255,0.12);
  --red-dim:       rgba(198,40,40,0.12);

  --r-sm:   8px;
  --r-md:   14px;
  --r-lg:   20px;
  --r-xl:   28px;
  --r-full: 9999px;

  --font: 'Inter', 'SF Pro Display', system-ui, sans-serif;
  --nav-h: 60px;
  --tab-h: 64px;
  --transition: 150ms ease;
}

/* ── Reset ─────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text-2);
  line-height: 1.6;
  min-height: 100vh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button, input, select, textarea { font-family: inherit; }
ul { list-style: none; }

/* ── Animations ────────────────────────────────────────────────── */
@keyframes fadeUp {
  from { opacity:0; transform:translateY(20px) scale(0.98); }
  to   { opacity:1; transform:translateY(0) scale(1); }
}
@keyframes countUp {
  from { opacity:0; transform:scale(0.5) translateY(10px); }
  to   { opacity:1; transform:scale(1) translateY(0); }
}
@keyframes pulseGlow {
  0%   { box-shadow: 0 0 0 0   var(--primary-glow); }
  70%  { box-shadow: 0 0 0 14px rgba(198,40,40,0); }
  100% { box-shadow: 0 0 0 0   rgba(198,40,40,0); }
}
@keyframes shimmer {
  from { background-position: -200% 0; }
  to   { background-position:  200% 0; }
}
@keyframes float {
  0%,100% { transform: translateY(0); }
  50%      { transform: translateY(-5px); }
}
@keyframes slideUp {
  from { transform:translateY(100%); opacity:0; }
  to   { transform:translateY(0);    opacity:1; }
}
@keyframes spin {
  to { transform: rotate(360deg); }
}
@keyframes ripple {
  from { transform:scale(0); opacity:0.4; }
  to   { transform:scale(4); opacity:0; }
}
@keyframes drawCheck {
  from { stroke-dashoffset: 100; }
  to   { stroke-dashoffset: 0; }
}
@keyframes toastIn {
  from { transform:translateX(110%); opacity:0; }
  to   { transform:translateX(0);    opacity:1; }
}
@keyframes toastOut {
  from { transform:translateX(0);    opacity:1; }
  to   { transform:translateX(110%); opacity:0; }
}

/* ── Typography ────────────────────────────────────────────────── */
h1,h2,h3,h4 { color:var(--text-1); font-weight:800; line-height:1.2; letter-spacing:-0.5px; }
h1 { font-size:clamp(28px,6vw,48px); }
h2 { font-size:clamp(22px,4vw,32px); }
h3 { font-size:clamp(18px,3vw,24px); }
h4 { font-size:16px; }
.label { font-size:11px; font-weight:700; letter-spacing:1px; text-transform:uppercase; color:var(--text-3); }
.amount { font-variant-numeric: tabular-nums; }

/* ── Layout ────────────────────────────────────────────────────── */
.container      { max-width:480px; margin:0 auto; padding:0 16px; }
.container-auth { max-width:390px; margin:0 auto; padding:0 20px; }
.container-wide { max-width:1100px; margin:0 auto; padding:0 20px; }

.page-wrap {
  padding-top: calc(var(--nav-h) + 16px);
  padding-bottom: calc(var(--tab-h) + 24px + env(safe-area-inset-bottom, 0px));
  min-height: 100vh;
}

/* ── Cards ─────────────────────────────────────────────────────── */
.card {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 20px;
}
.card-glass {
  background: rgba(20,20,20,0.7);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-lg);
  padding: 20px;
}
.card-glow {
  border-color: rgba(198,40,40,0.3);
  box-shadow: 0 0 20px rgba(198,40,40,0.08);
}
.card-gradient {
  background: linear-gradient(135deg, #1a0505 0%, #2d0808 40%, #1a0505 100%);
  border: 1px solid rgba(198,40,40,0.25);
  border-radius: var(--r-xl);
  padding: 24px;
}

/* ── Buttons ───────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 24px;
  border-radius: var(--r-md);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.3px;
  border: none;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: transform var(--transition), opacity var(--transition);
  -webkit-tap-highlight-color: transparent;
}
.btn:active { transform: scale(0.97); }
.btn-primary {
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  color: #fff;
  animation: pulseGlow 2.5s infinite;
}
.btn-primary:hover { background: linear-gradient(135deg, var(--primary-light), var(--primary)); }
.btn-secondary { background: var(--surface-3); color: var(--text-1); }
.btn-ghost { background: transparent; color: var(--text-1); border: 1px solid var(--border-strong); }
.btn-success { background: var(--green); color: #000; }
.btn-danger  { background: var(--primary); color: #fff; }
.btn-icon {
  width: 44px; height: 44px;
  padding: 0;
  border-radius: 50%;
  background: var(--surface-3);
  color: var(--text-1);
  font-size: 18px;
}
.btn-full { width: 100%; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; animation: none; }
.btn .spinner { width:18px; height:18px; border:2px solid rgba(255,255,255,0.3); border-top-color:#fff; border-radius:50%; animation:spin 0.7s linear infinite; }

/* Ripple */
.ripple-effect {
  position: absolute;
  border-radius: 50%;
  background: rgba(255,255,255,0.25);
  pointer-events: none;
  animation: ripple 0.6s ease-out forwards;
}

/* ── Inputs ────────────────────────────────────────────────────── */
.input-group { position: relative; margin-bottom: 16px; }
.input-group label {
  position: absolute;
  top: 50%; left: 16px;
  transform: translateY(-50%);
  font-size: 14px;
  color: var(--text-3);
  pointer-events: none;
  transition: all 0.2s ease;
  background: transparent;
}
.input-group input:focus ~ label,
.input-group input:not(:placeholder-shown) ~ label,
.input-group select:focus ~ label,
.input-group textarea:focus ~ label,
.input-group textarea:not(:placeholder-shown) ~ label {
  top: 8px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: var(--primary-light);
  text-transform: uppercase;
}
.input-group input,
.input-group select,
.input-group textarea {
  width: 100%;
  background: var(--surface-1);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  padding: 22px 16px 10px;
  color: var(--text-1);
  font-size: 15px;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
  appearance: none;
}
.input-group input:focus,
.input-group select:focus,
.input-group textarea:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(198,40,40,0.2);
}
.input-group.error input { border-color: var(--primary); animation: shake 0.3s ease; }
.input-group .input-icon { position:absolute; right:14px; top:50%; transform:translateY(-50%); color:var(--text-3); font-size:18px; }
@keyframes shake {
  0%,100% { transform:translateX(0); }
  25%      { transform:translateX(-6px); }
  75%      { transform:translateX(6px); }
}

/* PIN Input */
.pin-row { display:flex; gap:10px; justify-content:center; }
.pin-box {
  width:52px; height:60px;
  background: var(--surface-2);
  border: 2px solid var(--border-strong);
  border-radius: var(--r-md);
  text-align: center;
  font-size: 24px;
  font-weight: 800;
  color: var(--text-1);
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.pin-box:focus { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-glow); }

/* ── Badges ────────────────────────────────────────────────────── */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: var(--r-full);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.3px;
}
.badge-green  { background: var(--green-dim);  color: var(--green); }
.badge-amber  { background: var(--amber-dim);  color: var(--amber); }
.badge-blue   { background: var(--blue-dim);   color: var(--blue); }
.badge-purple { background: var(--purple-dim); color: var(--purple); }
.badge-red    { background: var(--red-dim);    color: var(--primary-light); }
.badge-muted  { background: var(--surface-3);  color: var(--text-3); }

/* ── Skeleton Loading ──────────────────────────────────────────── */
.skeleton {
  background: linear-gradient(90deg, var(--surface-2) 25%, var(--surface-3) 50%, var(--surface-2) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: var(--r-sm);
}

/* ── Toast Notifications ───────────────────────────────────────── */
#toast-container {
  position: fixed;
  top: 20px; right: 16px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
}
.toast {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  background: var(--surface-2);
  border-radius: var(--r-md);
  border-left: 4px solid var(--primary);
  box-shadow: 0 8px 32px rgba(0,0,0,0.6);
  font-size: 14px;
  font-weight: 500;
  color: var(--text-1);
  min-width: 260px;
  max-width: 340px;
  pointer-events: all;
  animation: toastIn 0.3s ease forwards;
}
.toast.hide { animation: toastOut 0.3s ease forwards; }
.toast-success { border-color: var(--green); }
.toast-error   { border-color: var(--primary); }
.toast-info    { border-color: var(--blue); }
.toast-warning { border-color: var(--amber); }

/* ── Bottom Sheet ──────────────────────────────────────────────── */
.sheet-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.7);
  backdrop-filter: blur(4px);
  z-index: 800;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s;
}
.sheet-overlay.open { opacity: 1; pointer-events: all; }
.sheet {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  background: var(--surface-1);
  border-radius: 22px 22px 0 0;
  padding: 12px 20px 32px;
  z-index: 801;
  transform: translateY(100%);
  transition: transform 0.35s cubic-bezier(0.32,0.72,0,1);
  max-height: 90vh;
  overflow-y: auto;
}
.sheet.open { transform: translateY(0); }
.sheet-handle {
  width: 40px; height: 4px;
  background: var(--surface-4);
  border-radius: var(--r-full);
  margin: 0 auto 20px;
}

/* ══════════════════════════════════════════════════════════════════
   LIQUID GLASS NAVIGATION  —  iOS 26 / Aeternal NOX
   ══════════════════════════════════════════════════════════════════

   Technique:
   • backdrop-filter: blur + saturate mimics the frosted glass base
   • border-top: rgba(255,255,255,0.18) = specular highlight (light rim)
   • border-bottom: rgba(0,0,0,0.25) = shadow rim (depth)
   • SVG feGaussianBlur + feDisplacementMap on ::before = edge refraction
   • Spring transitions on the pill = physics-like feel
   ══════════════════════════════════════════════════════════════════ */

/* ── CSS additions for liquid glass ───────────────────────────── */
:root {
  --lg-blur:        blur(32px) saturate(180%) brightness(110%);
  --lg-bg:          rgba(255,255,255,0.055);
  --lg-bg-hover:    rgba(255,255,255,0.09);
  --lg-border-top:  rgba(255,255,255,0.18);
  --lg-border-bot:  rgba(0,0,0,0.22);
  --lg-border-side: rgba(255,255,255,0.07);
  --lg-shadow:      0 8px 32px rgba(0,0,0,0.55), 0 2px 8px rgba(0,0,0,0.3);
  --lg-shadow-deep: 0 20px 60px rgba(0,0,0,0.7), 0 4px 16px rgba(0,0,0,0.4);
  --lg-inset:       inset 0 1px 0 rgba(255,255,255,0.12), inset 0 -1px 0 rgba(0,0,0,0.15);
  --tab-h: 80px;   /* taller to give pill room to float */
  --nav-h: 60px;
}

/* ── Top Navbar — Liquid Glass ─────────────────────────────────── */
.navbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--nav-h);
  z-index: 700;
  display: flex;
  align-items: center;
  padding: 0 20px;
  gap: 16px;

  /* Liquid Glass material */
  background: var(--lg-bg);
  backdrop-filter: var(--lg-blur);
  -webkit-backdrop-filter: var(--lg-blur);

  /* Specular top highlight + depth bottom */
  border-top:    1px solid var(--lg-border-top);
  border-bottom: 1px solid var(--lg-border-bot);
  border-left:   none;
  border-right:  none;

  /* Depth shadow */
  box-shadow: var(--lg-inset), 0 1px 0 rgba(0,0,0,0.3);

  transition: background 0.3s ease, box-shadow 0.3s ease;
}

/* Scrolled state — slightly more opaque */
.navbar.scrolled {
  background: rgba(255,255,255,0.075);
  box-shadow: var(--lg-inset), 0 4px 24px rgba(0,0,0,0.5);
}

/* Refraction edge — subtle distortion line along bottom */
.navbar::after {
  content: '';
  position: absolute;
  bottom: -1px; left: 10%; right: 10%;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255,255,255,0.08) 20%,
    rgba(255,255,255,0.18) 50%,
    rgba(255,255,255,0.08) 80%,
    transparent 100%
  );
  pointer-events: none;
}

.navbar-logo {
  font-size: 20px;
  font-weight: 900;
  color: var(--text-1);
  letter-spacing: -0.5px;
  text-shadow: 0 0 20px rgba(255,255,255,0.15);
  flex-shrink: 0;
}

/* Balance pill — liquid glass chip */
.navbar-balance {
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  border-radius: var(--r-full);
  font-size: 13px;
  font-weight: 800;
  color: var(--text-1);
  letter-spacing: 0.2px;

  background: var(--lg-bg-hover);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-top:    1px solid var(--lg-border-top);
  border-bottom: 1px solid var(--lg-border-bot);
  border-left:   1px solid var(--lg-border-side);
  border-right:  1px solid var(--lg-border-side);
  box-shadow: var(--lg-inset);

  transition: background 0.2s;
}
.navbar-balance:hover { background: rgba(255,255,255,0.12); }

.navbar-links { display: flex; gap: 4px; margin-left: auto; }
.navbar-links a {
  padding: 7px 13px;
  border-radius: var(--r-full);
  font-size: 13px;
  font-weight: 600;
  color: rgba(255,255,255,0.55);
  transition: all 0.2s ease;
  letter-spacing: 0.1px;
}
.navbar-links a:hover {
  color: var(--text-1);
  background: rgba(255,255,255,0.08);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.navbar-links a.active {
  color: var(--text-1);
  background: rgba(255,255,255,0.1);
  border-top:    1px solid rgba(255,255,255,0.15);
  border-bottom: 1px solid rgba(0,0,0,0.15);
  border-left:   1px solid rgba(255,255,255,0.06);
  border-right:  1px solid rgba(255,255,255,0.06);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
}

.navbar-right { display: flex; align-items: center; gap: 10px; margin-left: auto; }

/* ── Liquid Glass Icon Button (logout etc) ─────────────────────── */
.navbar .btn-ghost {
  background: rgba(255,255,255,0.06);
  border-top:    1px solid rgba(255,255,255,0.14);
  border-bottom: 1px solid rgba(0,0,0,0.18);
  border-left:   1px solid rgba(255,255,255,0.06);
  border-right:  1px solid rgba(255,255,255,0.06);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: rgba(255,255,255,0.7);
  border-radius: var(--r-full);
  padding: 6px 14px;
  font-size: 12px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
  transition: all 0.2s;
}
.navbar .btn-ghost:hover {
  background: rgba(255,255,255,0.1);
  color: var(--text-1);
  transform: scale(1.03);
}
.navbar .btn-ghost:active { transform: scale(0.96); }

/* ══════════════════════════════════════════════════════════════════
   FLOATING LIQUID GLASS PILL — Bottom Tab Bar  (iOS 26 style)
   ══════════════════════════════════════════════════════════════════
   • Floats above the screen — not anchored edge-to-edge
   • Pill shape: border-radius: 9999px
   • Shrinks to icon-only when user scrolls down
   • Springs back with labels when scrolling stops
   • Each active item gets a liquid glass highlight capsule
   ══════════════════════════════════════════════════════════════════ */

.tab-bar {
  position: fixed;
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  left: 50%;
  transform: translateX(-50%);
  width: auto;
  max-width: calc(100vw - 32px);
  min-width: 280px;
  height: 64px;
  z-index: 700;

  display: flex;
  align-items: center;
  padding: 6px 10px;
  gap: 2px;

  /* Liquid Glass pill */
  background: rgba(18,18,18,0.55);
  backdrop-filter: blur(40px) saturate(200%) brightness(115%);
  -webkit-backdrop-filter: blur(40px) saturate(200%) brightness(115%);
  border-radius: var(--r-full);

  /* Specular rim — top highlight, bottom shadow */
  border-top:    1px solid rgba(255,255,255,0.20);
  border-bottom: 1px solid rgba(0,0,0,0.35);
  border-left:   1px solid rgba(255,255,255,0.10);
  border-right:  1px solid rgba(255,255,255,0.10);

  /* Depth + glow */
  box-shadow:
    var(--lg-shadow-deep),
    inset 0 1px 0 rgba(255,255,255,0.14),
    inset 0 -1px 0 rgba(0,0,0,0.2);

  /* Spring transition */
  transition:
    height        0.45s cubic-bezier(0.34,1.56,0.64,1),
    padding       0.45s cubic-bezier(0.34,1.56,0.64,1),
    bottom        0.45s cubic-bezier(0.34,1.56,0.64,1),
    box-shadow    0.3s  ease,
    background    0.3s  ease;

  /* No text overflow while shrinking */
  overflow: hidden;
  white-space: nowrap;
}

/* Scrolled-down state — pill shrinks to icon-only */
.tab-bar.compact {
  height: 52px;
  padding: 4px 8px;
  bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  background: rgba(12,12,12,0.7);
  box-shadow:
    0 12px 40px rgba(0,0,0,0.6),
    0 2px 8px rgba(0,0,0,0.35),
    inset 0 1px 0 rgba(255,255,255,0.12),
    inset 0 -1px 0 rgba(0,0,0,0.2);
}

/* Tab items */
.tab-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 6px 14px;
  border-radius: var(--r-full);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  text-decoration: none;
  position: relative;
  flex-shrink: 0;
  min-width: 48px;

  transition:
    padding       0.35s cubic-bezier(0.34,1.56,0.64,1),
    background    0.2s  ease,
    transform     0.15s ease;
}

.tab-item:active { transform: scale(0.88); }

/* Active item — liquid glass capsule highlight */
.tab-item.active {
  background: rgba(255,255,255,0.10);
  border-top:    1px solid rgba(255,255,255,0.18);
  border-bottom: 1px solid rgba(0,0,0,0.2);
  border-left:   1px solid rgba(255,255,255,0.08);
  border-right:  1px solid rgba(255,255,255,0.08);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.15),
    inset 0 -1px 0 rgba(0,0,0,0.12),
    0 2px 12px rgba(0,0,0,0.3);
}

/* Icon */
.tab-item .tab-icon {
  font-size: 22px;
  line-height: 1;
  transition: transform 0.35s cubic-bezier(0.34,1.56,0.64,1), filter 0.2s ease;
  display: block;
}
.tab-item.active .tab-icon {
  transform: scale(1.12) translateY(-1px);
  filter: drop-shadow(0 0 8px var(--primary)) drop-shadow(0 0 3px rgba(255,255,255,0.3));
}

/* Label */
.tab-item .tab-label {
  font-size: 10px;
  font-weight: 700;
  color: rgba(255,255,255,0.35);
  letter-spacing: 0.2px;
  line-height: 1;
  transition:
    opacity    0.3s ease,
    max-height 0.35s cubic-bezier(0.34,1.56,0.64,1),
    transform  0.35s cubic-bezier(0.34,1.56,0.64,1),
    color      0.2s ease;
  max-height: 14px;
  overflow: hidden;
  display: block;
}
.tab-item.active .tab-label {
  color: rgba(255,255,255,0.9);
}

/* Compact mode — hide labels, shrink padding */
.tab-bar.compact .tab-item {
  padding: 6px 12px;
  gap: 0;
}
.tab-bar.compact .tab-item .tab-label {
  opacity: 0;
  max-height: 0;
  transform: translateY(4px);
}
.tab-bar.compact .tab-item.active .tab-icon {
  transform: scale(1.08);
}

/* Hover on non-touch devices */
@media (hover: hover) {
  .tab-item:not(.active):hover {
    background: rgba(255,255,255,0.05);
  }
}

/* Remove the old tab-dot — not needed with the capsule highlight */
.tab-item .tab-dot { display: none; }

/* ── Page wrap updated for floating pill ───────────────────────── */
.page-wrap {
  padding-top:    calc(var(--nav-h) + 16px);
  padding-bottom: calc(var(--tab-h) + 32px + env(safe-area-inset-bottom, 0px));
  min-height: 100vh;
}

/* ── Announcement Banner ───────────────────────────────────────── */
.announcement {
  background: var(--surface-2);
  border-left: 4px solid var(--primary);
  padding: 12px 16px;
  font-size: 13px;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 10px;
  position: relative;
}
.announcement .close-btn {
  margin-left: auto;
  background: none;
  border: none;
  color: var(--text-3);
  cursor: pointer;
  font-size: 18px;
  padding: 0 4px;
}

/* ── Stat Chips ────────────────────────────────────────────────── */
.stats-row { display:flex; gap:10px; overflow-x:auto; padding-bottom:4px; scrollbar-width:none; }
.stats-row::-webkit-scrollbar { display:none; }
.stat-chip {
  flex: 1;
  min-width: 80px;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 14px 12px;
  text-align: center;
  animation: fadeUp 0.5s ease both;
}
.stat-chip .chip-icon { font-size: 20px; margin-bottom: 6px; }
.stat-chip .chip-num  { font-size: 22px; font-weight: 900; color: var(--text-1); font-variant-numeric: tabular-nums; }
.stat-chip .chip-lbl  { font-size: 10px; font-weight: 600; color: var(--text-3); letter-spacing: 0.3px; margin-top: 2px; }

/* ── Earnings Chart ────────────────────────────────────────────── */
.chart-wrap { display:flex; align-items:flex-end; gap:6px; height:80px; padding:0 4px; }
.chart-bar-wrap { flex:1; display:flex; flex-direction:column; align-items:center; gap:4px; height:100%; justify-content:flex-end; }
.chart-bar {
  width: 100%;
  background: linear-gradient(to top, var(--primary), var(--primary-light));
  border-radius: 4px 4px 0 0;
  min-height: 4px;
  transition: height 0.8s cubic-bezier(0.34,1.56,0.64,1);
  cursor: pointer;
  position: relative;
}
.chart-bar:hover { opacity: 0.85; }
.chart-bar .bar-tip {
  position: absolute;
  bottom: calc(100% + 4px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--surface-3);
  color: var(--text-1);
  font-size: 10px;
  font-weight: 700;
  padding: 3px 6px;
  border-radius: 4px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
}
.chart-bar:hover .bar-tip { opacity: 1; }
.chart-day { font-size: 9px; color: var(--text-4); font-weight: 600; }

/* ── Transaction List ──────────────────────────────────────────── */
.tx-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 0;
  border-bottom: 1px solid var(--border);
  animation: fadeUp 0.4s ease both;
}
.tx-item:last-child { border-bottom: none; }
.tx-icon {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--surface-3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}
.tx-info { flex: 1; min-width: 0; }
.tx-desc { font-size: 13px; font-weight: 600; color: var(--text-1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tx-date { font-size: 11px; color: var(--text-3); margin-top: 2px; }
.tx-amount { font-size: 15px; font-weight: 800; font-variant-numeric: tabular-nums; }
.tx-amount.credit { color: var(--green); }
.tx-amount.debit  { color: var(--primary-light); }

/* ── Job Cards ─────────────────────────────────────────────────── */
.job-card {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  animation: fadeUp 0.4s ease both;
  transition: border-color var(--transition), transform var(--transition);
}
.job-card:hover { border-color: var(--border-strong); transform: translateY(-2px); }
.job-card-top { display:flex; align-items:flex-start; gap:12px; }
.job-type-icon {
  width: 44px; height: 44px;
  border-radius: var(--r-md);
  background: var(--red-dim);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
}
.job-title { font-size: 15px; font-weight: 700; color: var(--text-1); line-height: 1.3; }
.job-meta  { font-size: 12px; color: var(--text-3); margin-top: 3px; }
.job-pay   { font-size: 20px; font-weight: 900; color: var(--green); font-variant-numeric: tabular-nums; margin-left: auto; white-space: nowrap; }
.job-footer { display:flex; align-items:center; justify-content:space-between; }
.job-slots  { font-size: 11px; color: var(--text-3); }
.hot-badge  { background: linear-gradient(135deg, #ff6f00, #ff8f00); color: #000; font-size: 10px; font-weight: 800; padding: 2px 8px; border-radius: var(--r-full); }

/* ── Divider ───────────────────────────────────────────────────── */
.divider { height:1px; background:var(--border); margin:16px 0; }
.section-title { font-size:13px; font-weight:700; color:var(--text-3); letter-spacing:0.5px; text-transform:uppercase; margin-bottom:12px; display:flex; align-items:center; justify-content:space-between; }
.section-title a { font-size:12px; color:var(--primary-light); text-transform:none; letter-spacing:0; }

/* ── Empty State ───────────────────────────────────────────────── */
.empty-state { text-align:center; padding:48px 20px; }
.empty-state .empty-icon { font-size:48px; margin-bottom:12px; opacity:0.4; }
.empty-state p { color:var(--text-3); font-size:14px; }

/* ── Avatar ────────────────────────────────────────────────────── */
.avatar {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 800;
  color: #fff;
  flex-shrink: 0;
}

/* ── Toggle Switch ─────────────────────────────────────────────── */
.toggle { position:relative; display:inline-block; width:48px; height:26px; }
.toggle input { opacity:0; width:0; height:0; }
.toggle-slider {
  position:absolute; inset:0;
  background: var(--surface-4);
  border-radius: var(--r-full);
  cursor: pointer;
  transition: background 0.3s;
}
.toggle-slider::before {
  content:'';
  position:absolute;
  width:20px; height:20px;
  left:3px; top:3px;
  background:#fff;
  border-radius:50%;
  transition: transform 0.3s;
}
.toggle input:checked + .toggle-slider { background: var(--primary); }
.toggle input:checked + .toggle-slider::before { transform: translateX(22px); }

/* ── Responsive ────────────────────────────────────────────────── */
@media (min-width: 768px) {
  .tab-bar { display: none; }
  .page-wrap { padding-bottom: 40px; }
  .navbar-links { display: flex; }
  .stats-row { flex-wrap: wrap; }
  .stat-chip { min-width: 120px; }
}
@media (max-width: 767px) {
  .navbar-links { display: none; }
  .navbar-balance { display: none; }
}