/* ── TOKENS ── */
    :root {
      --gold:        #C9A84C;
      --gold-light:  #F0D080;
      --gold-dark:   #8B6914;
      --silver:      #C0C0C0;
      --silver-light:#E8E8E8;
      --black:       #0A0A0A;
      --surface:     #111111;
      --surface-2:   #1A1A1A;
      --surface-3:   #222222;
      --border:      rgba(201,168,76,0.25);
      --text:        #E8E8E8;
      --text-muted:  #888888;
      --blue-glow:   rgba(0,120,255,0.15);
      --font-display: 'Cinzel', serif;
      --font-body:    'Inter', sans-serif;
      --nav-h:        64px;
      --sidebar-w:    240px;
      --radius:       10px;
    }

    /* ── RESET ── */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    html { scroll-behavior: smooth; }
    body {
      font-family: var(--font-body);
      background: var(--black);
      color: var(--text);
      min-height: 100vh;
      overflow-x: hidden;
    }

    /* ── SCROLLBAR ── */
    ::-webkit-scrollbar { width: 4px; }
    ::-webkit-scrollbar-track { background: var(--surface); }
    ::-webkit-scrollbar-thumb { background: var(--gold-dark); border-radius: 2px; }

    /* ── GOLD GRADIENT UTILITY ── */
    .gold-text {
      background: linear-gradient(135deg, var(--gold-light) 0%, var(--gold) 50%, var(--gold-dark) 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }
    .silver-text {
      background: linear-gradient(135deg, #fff 0%, var(--silver-light) 40%, var(--silver) 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }

    /* ══════════════════════════════════════
       TOP BAR
    ══════════════════════════════════════ */
    .topbar {
      position: fixed; top: 0; left: 0; right: 0; z-index: 100;
      height: 44px;
      background: var(--surface);
      border-bottom: 1px solid var(--border);
      display: flex; align-items: center; justify-content: space-between;
      padding: 0 16px;
    }
    .topbar-logo {
      font-family: var(--font-display);
      font-size: 14px;
      font-weight: 700;
      letter-spacing: 1px;
    }
    /* Language flags */
    .lang-switcher { display: flex; gap: 8px; }
    .lang-btn {
      width: 28px; height: 28px;
      border-radius: 50%;
      border: 2px solid transparent;
      cursor: pointer;
      overflow: hidden;
      transition: border-color 0.2s;
      background: none;
      padding: 0;
    }
    .lang-btn img { width: 100%; height: 100%; object-fit: cover; }
    .lang-btn.active { border-color: var(--gold); }
    .lang-btn:hover { border-color: var(--gold-light); }

    /* Flag emoji fallback */
    .flag { font-size: 20px; line-height: 1; }

    /* ══════════════════════════════════════
       LAYOUT SHELL
    ══════════════════════════════════════ */
    .shell {
      padding-top: 44px; /* topbar */
      padding-bottom: var(--nav-h); /* bottom nav */
      min-height: 100vh;
    }

    /* ══════════════════════════════════════
       SIDEBAR (tablet+)
    ══════════════════════════════════════ */
    .sidebar {
      display: none; /* hidden on mobile */
      position: fixed;
      top: 44px; left: 0; bottom: var(--nav-h);
      width: var(--sidebar-w);
      background: var(--surface);
      border-right: 1px solid var(--border);
      flex-direction: column;
      padding: 24px 0;
      z-index: 90;
      overflow-y: auto;
    }
    .sidebar-item {
      display: flex; align-items: center; gap: 12px;
      padding: 14px 24px;
      cursor: pointer;
      transition: background 0.2s, color 0.2s;
      border-left: 3px solid transparent;
      font-size: 14px;
      color: var(--text-muted);
    }
    .sidebar-item:hover, .sidebar-item.active {
      background: rgba(201,168,76,0.07);
      color: var(--gold-light);
      border-left-color: var(--gold);
    }
    .sidebar-item .icon {
      width: 32px; height: 32px;
      border-radius: 8px;
      background: var(--surface-3);
      display: flex; align-items: center; justify-content: center;
      font-size: 14px;
      color: var(--gold);
      flex-shrink: 0;
    }
    .sidebar-item.active .icon { background: var(--gold); color: var(--black); }
    .sidebar-label { font-weight: 500; }

    @media (min-width: 768px) {
      .sidebar { display: flex; }
      .main-content { margin-left: var(--sidebar-w); }
    }

    /* ══════════════════════════════════════
       BOTTOM NAV (mobile)
    ══════════════════════════════════════ */
    .bottom-nav {
      position: fixed; bottom: 0; left: 0; right: 0;
      height: var(--nav-h);
      background: var(--surface);
      border-top: 1px solid var(--border);
      display: flex; align-items: center; justify-content: space-around;
      z-index: 100;
    }
    .nav-item {
      display: flex; flex-direction: column; align-items: center; gap: 4px;
      cursor: pointer;
      flex: 1;
      padding: 8px 4px;
      transition: color 0.2s;
      color: var(--text-muted);
      font-size: 10px;
      font-weight: 500;
      letter-spacing: 0.5px;
    }
    .nav-item .nav-icon {
      width: 36px; height: 36px;
      border-radius: 10px;
      background: var(--surface-3);
      display: flex; align-items: center; justify-content: center;
      font-size: 16px;
      transition: background 0.2s, color 0.2s;
    }
    .nav-item.active { color: var(--gold); }
    .nav-item.active .nav-icon {
      background: var(--gold);
      color: var(--black);
    }
    .nav-item:hover .nav-icon { background: rgba(201,168,76,0.2); color: var(--gold-light); }

    /* ══════════════════════════════════════
       PAGES
    ══════════════════════════════════════ */
    .page { display: none; padding: 20px 16px 0; }
    .page.active { display: block; }

    /* ── Page Header ── */
    .page-header {
      margin-bottom: 24px;
    }
    .page-header h1 {
      font-family: var(--font-display);
      font-size: 22px;
      font-weight: 700;
      letter-spacing: 0.5px;
    }
    .page-header p {
      color: var(--text-muted);
      font-size: 13px;
      margin-top: 4px;
    }

    /* ── Cards ── */
    .card {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      padding: 18px;
      margin-bottom: 14px;
    }
    .card-gold {
      background: linear-gradient(135deg, #1A1500 0%, #2A1F00 100%);
      border: 1px solid var(--gold-dark);
    }
    .card-title {
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: 1.5px;
      color: var(--text-muted);
      margin-bottom: 8px;
    }
    .card-value {
      font-family: var(--font-display);
      font-size: 26px;
      font-weight: 700;
    }
    .card-sub {
      font-size: 12px;
      color: var(--text-muted);
      margin-top: 4px;
    }
    .card-row {
      display: flex; gap: 12px;
    }
    .card-row .card { flex: 1; }

    /* ── Divider ── */
    .divider {
      height: 1px;
      background: linear-gradient(90deg, transparent, var(--gold-dark), transparent);
      margin: 20px 0;
    }

    /* ── Button ── */
    .btn {
      display: inline-flex; align-items: center; justify-content: center; gap: 8px;
      padding: 12px 24px;
      border-radius: var(--radius);
      font-family: var(--font-body);
      font-size: 14px;
      font-weight: 600;
      cursor: pointer;
      border: none;
      transition: filter 0.2s, transform 0.1s;
      text-transform: uppercase;
      letter-spacing: 1px;
      width: 100%;
    }
    .btn:active { transform: scale(0.98); }
    .btn-gold {
      background: linear-gradient(135deg, var(--gold-light), var(--gold), var(--gold-dark));
      color: var(--black);
    }
    .btn-gold:hover { filter: brightness(1.1); }
    .btn-outline {
      background: transparent;
      border: 1px solid var(--gold);
      color: var(--gold);
    }
    .btn-outline:hover { background: rgba(201,168,76,0.1); }

    /* ── Table ── */
    .table-wrap { overflow-x: auto; border-radius: var(--radius); }
    table {
      width: 100%; border-collapse: collapse;
      font-size: 13px;
    }
    thead th {
      background: var(--surface-3);
      padding: 10px 14px;
      text-align: left;
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: 1px;
      color: var(--gold);
      white-space: nowrap;
    }
    tbody td {
      padding: 12px 14px;
      border-bottom: 1px solid rgba(255,255,255,0.04);
      color: var(--text);
    }
    tbody tr:last-child td { border-bottom: none; }
    tbody tr:hover td { background: rgba(201,168,76,0.04); }

    /* ── Badge ── */
    .badge {
      display: inline-block;
      padding: 3px 8px;
      border-radius: 100px;
      font-size: 10px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }
    .badge-green  { background: rgba(52,211,153,0.15); color: #34D399; }
    .badge-gold   { background: rgba(201,168,76,0.15);  color: var(--gold); }
    .badge-red    { background: rgba(239,68,68,0.15);   color: #EF4444; }
    .badge-gray   { background: rgba(136,136,136,0.15); color: var(--text-muted); }

    /* ── Stat Row ── */
    .stat-row {
      display: flex; justify-content: space-between; align-items: center;
      padding: 12px 0;
      border-bottom: 1px solid rgba(255,255,255,0.05);
    }
    .stat-row:last-child { border-bottom: none; }
    .stat-label { font-size: 13px; color: var(--text-muted); }
    .stat-val   { font-size: 14px; font-weight: 600; }

    /* ── Form ── */
    .form-group { margin-bottom: 16px; }
    .form-label {
      display: block;
      font-size: 12px;
      font-weight: 500;
      color: var(--text-muted);
      margin-bottom: 6px;
      text-transform: uppercase;
      letter-spacing: 0.8px;
    }
    .form-input {
      width: 100%;
      background: var(--surface-3);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      padding: 12px 14px;
      color: var(--text);
      font-family: var(--font-body);
      font-size: 14px;
      outline: none;
      transition: border-color 0.2s;
    }
    .form-input:focus { border-color: var(--gold); }
    .form-input::placeholder { color: var(--text-muted); }
    select.form-input { appearance: none; }

    /* ── Avatar ── */
    .avatar {
      width: 52px; height: 52px;
      border-radius: 50%;
      background: linear-gradient(135deg, var(--gold-dark), var(--gold));
      display: flex; align-items: center; justify-content: center;
      font-family: var(--font-display);
      font-size: 20px;
      font-weight: 700;
      color: var(--black);
      flex-shrink: 0;
    }

    /* ── Progress bar ── */
    .progress-bar {
      height: 6px;
      background: var(--surface-3);
      border-radius: 3px;
      overflow: hidden;
      margin-top: 8px;
    }
    .progress-fill {
      height: 100%;
      background: linear-gradient(90deg, var(--gold-dark), var(--gold-light));
      border-radius: 3px;
      transition: width 0.5s ease;
    }

    /* ── Glowing diamond divider ── */
    .diamond-divider {
      display: flex; align-items: center; gap: 12px;
      margin: 24px 0;
    }
    .diamond-divider::before, .diamond-divider::after {
      content: ''; flex: 1;
      height: 1px;
      background: linear-gradient(90deg, transparent, var(--gold-dark));
    }
    .diamond-divider::after {
      background: linear-gradient(90deg, var(--gold-dark), transparent);
    }
    .diamond-icon { color: var(--gold); font-size: 10px; }

    /* ── Investment Plan Cards ── */
    .plan-card {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 14px;
      padding: 20px;
      margin-bottom: 14px;
      position: relative;
      overflow: hidden;
    }
    .plan-card.featured {
      border-color: var(--gold);
      background: linear-gradient(160deg, #1C1500 0%, #261B00 100%);
    }
    .plan-card.featured::before {
      content: '';
      position: absolute; top: 0; right: 0;
      width: 120px; height: 120px;
      background: radial-gradient(circle, rgba(201,168,76,0.15) 0%, transparent 70%);
      pointer-events: none;
    }
    .plan-badge {
      position: absolute; top: 14px; right: 14px;
      background: var(--gold);
      color: var(--black);
      font-size: 9px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 1px;
      padding: 3px 8px;
      border-radius: 100px;
    }
    .plan-name {
      font-family: var(--font-display);
      font-size: 16px;
      font-weight: 600;
      margin-bottom: 4px;
    }
    .plan-roi {
      font-size: 28px;
      font-weight: 700;
      margin: 8px 0;
    }
    .plan-period {
      font-size: 11px;
      color: var(--text-muted);
      text-transform: uppercase;
      letter-spacing: 1px;
    }
    .plan-features {
      list-style: none;
      margin: 14px 0;
    }
    .plan-features li {
      font-size: 13px;
      color: var(--text-muted);
      padding: 4px 0;
      display: flex; align-items: center; gap: 8px;
    }
    .plan-features li::before {
      content: '◆';
      font-size: 7px;
      color: var(--gold);
    }

    /* ── Network Tree ── */
    .network-card {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      padding: 16px;
      display: flex; align-items: center; gap: 14px;
      margin-bottom: 10px;
    }
    .network-info { flex: 1; }
    .network-name { font-size: 14px; font-weight: 500; }
    .network-level { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
    .network-gain { text-align: right; }
    .network-gain-val { font-size: 14px; font-weight: 600; color: #34D399; }
    .network-gain-label { font-size: 10px; color: var(--text-muted); }

    /* ── Config Toggle ── */
    .toggle-row {
      display: flex; align-items: center; justify-content: space-between;
      padding: 14px 0;
      border-bottom: 1px solid rgba(255,255,255,0.05);
    }
    .toggle-info { flex: 1; }
    .toggle-label { font-size: 14px; font-weight: 500; }
    .toggle-desc { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
    .toggle {
      width: 44px; height: 24px;
      background: var(--surface-3);
      border-radius: 12px;
      position: relative;
      cursor: pointer;
      border: 1px solid var(--border);
      transition: background 0.2s;
      flex-shrink: 0;
    }
    .toggle.on { background: var(--gold); border-color: var(--gold); }
    .toggle::after {
      content: '';
      position: absolute;
      top: 2px; left: 2px;
      width: 18px; height: 18px;
      background: white;
      border-radius: 50%;
      transition: left 0.2s;
    }
    .toggle.on::after { left: 22px; }

    /* ── Withdrawal ── */
    .withdrawal-info {
      display: flex; align-items: center; gap: 12px;
      background: rgba(52,211,153,0.06);
      border: 1px solid rgba(52,211,153,0.2);
      border-radius: var(--radius);
      padding: 14px;
      margin-bottom: 16px;
    }
    .withdrawal-info i { color: #34D399; font-size: 20px; }

    /* ── Shimmer skeleton ── */
    @keyframes shimmer {
      0%   { background-position: -200% center; }
      100% { background-position:  200% center; }
    }
    .skeleton {
      background: linear-gradient(90deg, var(--surface-3) 25%, var(--surface-2) 50%, var(--surface-3) 75%);
      background-size: 200% auto;
      animation: shimmer 1.5s infinite;
      border-radius: 6px;
    }

    /* ══════════════════════════════════════
       PAGE: INÍCIO
    ══════════════════════════════════════ */
    .hero-bar {
      display: flex; align-items: center; justify-content: space-between;
      margin-bottom: 20px;
    }
    .hero-greeting { font-size: 13px; color: var(--text-muted); }
    .hero-name {
      font-family: var(--font-display);
      font-size: 18px;
      font-weight: 700;
      margin-top: 2px;
    }
    .notification-btn {
      width: 40px; height: 40px;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 10px;
      display: flex; align-items: center; justify-content: center;
      cursor: pointer;
      color: var(--gold);
      position: relative;
    }
    .notif-dot {
      width: 8px; height: 8px;
      background: var(--gold);
      border-radius: 50%;
      position: absolute; top: 8px; right: 8px;
      border: 1.5px solid var(--surface);
    }

    .balance-card {
      background: linear-gradient(145deg, #131000 0%, #1E1800 60%, #0F0D00 100%);
      border: 1px solid rgba(201,168,76,0.4);
      border-radius: 16px;
      padding: 24px 20px;
      margin-bottom: 16px;
      position: relative;
      overflow: hidden;
    }
    .balance-card::before {
      content: '';
      position: absolute; top: -40px; right: -40px;
      width: 160px; height: 160px;
      background: radial-gradient(circle, rgba(201,168,76,0.12) 0%, transparent 70%);
      pointer-events: none;
    }
    .balance-label { font-size: 11px; text-transform: uppercase; letter-spacing: 1.5px; color: var(--text-muted); }
    .balance-amount {
      font-family: var(--font-display);
      font-size: 34px;
      font-weight: 700;
      margin: 8px 0 4px;
      letter-spacing: -0.5px;
    }
    .balance-change {
      font-size: 12px;
      display: flex; align-items: center; gap: 5px;
    }
    .balance-change.up { color: #34D399; }
    .balance-change.down { color: #EF4444; }
    .quick-stats {
      display: flex;
      border-top: 1px solid rgba(201,168,76,0.15);
      margin-top: 20px;
      padding-top: 16px;
    }
    .quick-stat {
      flex: 1;
      text-align: center;
    }
    .quick-stat + .quick-stat {
      border-left: 1px solid rgba(201,168,76,0.15);
    }
    .quick-stat-label { font-size: 10px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 1px; }
    .quick-stat-val { font-size: 15px; font-weight: 600; margin-top: 4px; }

    .section-title {
      font-size: 12px;
      text-transform: uppercase;
      letter-spacing: 1.5px;
      color: var(--text-muted);
      margin-bottom: 12px;
      display: flex; align-items: center; gap: 8px;
    }
    .section-title::after {
      content: ''; flex: 1;
      height: 1px;
      background: var(--border);
    }

    /* ══════════════════════════════════════
       RESPONSIVE
    ══════════════════════════════════════ */
    @media (min-width: 768px) {
      .bottom-nav { display: none; }
      .page { padding: 28px 32px; }
      .card-row { gap: 20px; }
      .page-header h1 { font-size: 28px; }
    }

    @media (max-width: 380px) {
      .balance-amount { font-size: 28px; }
      .nav-item { font-size: 9px; }
      .nav-item .nav-icon { width: 32px; height: 32px; }
    }

    /* ── fade-in pages ── */
    @keyframes fadeIn {
      from { opacity: 0; transform: translateY(6px); }
      to   { opacity: 1; transform: translateY(0); }
    }
    .page.active { animation: fadeIn 0.25s ease; }