:root {
    --bg-primary: #060d18;
    --bg-secondary: #081120;
    --bg-card: #0d1626;
    --bg-card2: #1a1f2e;
    --border: rgba(255,255,255,0.06);
    --border-hover: rgba(255,255,255,0.12);
    --accent: #6366f1;
    --accent2: #8b5cf6;
    --green: #10b981;
    --red: #f43f5e;
    --yellow: #f59e0b;
    --blue: #3b82f6;
    --text-primary: #f1f5f9;
    --text-secondary: #94a3b8;
    --text-muted: #475569;
    --glass: rgba(255,255,255,0.03);
    --glass-border: rgba(255,255,255,0.08);
    --topbar-bg: rgba(6,13,24,0.85);
    --sidebar-w: 260px;
    --radius: 14px;
    --radius-sm: 8px;
    --shadow: 0 4px 32px rgba(0,0,0,0.4);
    --shadow-card: 0 2px 16px rgba(0,0,0,0.3);
  }
  * { margin:0; padding:0; box-sizing:border-box; }
  html,body { width:100%; height:100%; background:var(--bg-primary); color:var(--text-primary); font-family:'Plus Jakarta Sans','Inter',system-ui,-apple-system,sans-serif; overflow-x:hidden; transition:background 0.25s ease, color 0.25s ease; }
  body, .sidebar, .topbar, .main, .chart-card, .kpi-card, .form-card, .transactions-card, .ranking-card, .recharge-card, .stat-chip, .icon-btn, .btn-ghost, .nav-item, .form-input, .form-select, .period-tab, .tx-method-pill, .tag {
    transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
  }
  @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');

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

  /* ── AUTH SCREEN ── */
  .auth-screen {
    display:flex; align-items:center; justify-content:center;
    min-height:100vh; background:var(--bg-primary);
    background-image: radial-gradient(ellipse 80% 50% at 50% -20%, rgba(99,102,241,0.15) 0%, transparent 60%);
  }
  .auth-card {
    background:var(--bg-card); border:1px solid var(--glass-border);
    border-radius:20px; padding:40px; width:420px; max-width:95vw;
    box-shadow: 0 0 60px rgba(99,102,241,0.1), var(--shadow);
  }
  .auth-logo { display:flex; align-items:center; gap:10px; margin-bottom:32px; justify-content:center; }
  .auth-logo-icon {
    width:40px; height:40px; background:linear-gradient(135deg,var(--accent),var(--accent2));
    border-radius:10px; display:flex; align-items:center; justify-content:center;
    font-size:18px; font-weight:800; color:#fff;
  }
  .auth-logo-text { font-size:22px; font-weight:800; letter-spacing:-0.5px; }
  .auth-logo-text span { color:var(--accent); }
  .auth-title { font-size:24px; font-weight:700; margin-bottom:8px; text-align:center; }
  .auth-sub { color:var(--text-secondary); font-size:14px; text-align:center; margin-bottom:28px; }
  .form-group { margin-bottom:16px; }
  .form-label { font-size:13px; font-weight:500; color:var(--text-secondary); margin-bottom:6px; display:block; }
  .form-input {
    width:100%; background:var(--bg-secondary); border:1px solid var(--glass-border);
    border-radius:var(--radius-sm); padding:11px 14px; color:var(--text-primary);
    font-size:14px; outline:none; transition:border 0.2s;
  }
  .form-input:focus { border-color:var(--accent); box-shadow:0 0 0 3px rgba(99,102,241,0.15); }
  .form-input::placeholder { color:var(--text-muted); }
  .pw-wrap { position:relative; }
  .pw-wrap .form-input { padding-right:44px; }
  .pw-toggle { position:absolute; right:8px; top:50%; transform:translateY(-50%); background:none; border:none; cursor:pointer; font-size:16px; line-height:1; padding:6px; opacity:.65; }
  .pw-toggle:hover { opacity:1; }
  .btn-primary {
    width:100%; background:linear-gradient(135deg,var(--accent),var(--accent2));
    border:none; border-radius:var(--radius-sm); padding:12px; color:#fff;
    font-size:14px; font-weight:600; cursor:pointer; transition:all 0.2s;
    letter-spacing:0.3px;
  }
  .btn-primary:hover { transform:translateY(-1px); box-shadow:0 8px 24px rgba(99,102,241,0.35); }
  .btn-primary:active { transform:translateY(0); }
  .auth-links { text-align:center; margin-top:20px; font-size:13px; color:var(--text-muted); }
  .auth-links a { color:var(--accent); text-decoration:none; cursor:pointer; }
  .auth-divider { height:1px; background:var(--border); margin:20px 0; position:relative; }
  .auth-divider span {
    position:absolute; top:-9px; left:50%; transform:translateX(-50%);
    background:var(--bg-card); padding:0 12px; font-size:12px; color:var(--text-muted);
  }

  /* ── LAYOUT ── */
  .app { display:flex; height:100vh; overflow:hidden; }
  .sidebar {
    width:var(--sidebar-w); background:var(--bg-secondary); border-right:1px solid var(--border);
    display:flex; flex-direction:column; flex-shrink:0; overflow-y:auto; position:relative;
    z-index:50;
  }
  .sidebar-header {
    padding:20px; border-bottom:1px solid var(--border);
    display:flex; align-items:center; gap:10px;
  }
  .logo-icon {
    width:34px; height:34px; background:linear-gradient(135deg,var(--accent),var(--accent2));
    border-radius:8px; display:flex; align-items:center; justify-content:center;
    font-size:15px; font-weight:800; color:#fff; flex-shrink:0;
  }
  .logo-text { font-size:17px; font-weight:800; letter-spacing:-0.5px; }
  .logo-text span { color:var(--accent); }
  .sidebar-section { padding:16px 12px 8px; }
  .sidebar-section-label {
    font-size:11px; font-weight:600; color:var(--text-muted);
    text-transform:uppercase; letter-spacing:1px; padding:0 8px; margin-bottom:6px;
  }
  .nav-item {
    display:flex; align-items:center; gap:10px; padding:9px 12px; border-radius:var(--radius-sm);
    cursor:pointer; transition:all 0.15s; font-size:13.5px; font-weight:500;
    color:var(--text-secondary); position:relative;
  }
  .nav-item:hover { background:var(--glass); color:var(--text-primary); }
  .nav-item.active { background:rgba(99,102,241,0.12); color:var(--accent); }
  .nav-item.active::before {
    content:''; position:absolute; left:0; top:50%; transform:translateY(-50%);
    width:3px; height:18px; background:var(--accent); border-radius:0 3px 3px 0;
  }
  .nav-item .nav-icon { font-size:15px; width:18px; height:18px; display:inline-flex; align-items:center; justify-content:center; text-align:center; flex-shrink:0; }
  .nav-item .nav-icon svg { width:18px; height:18px; stroke:currentColor; fill:none; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
  .icon-btn svg { width:17px; height:17px; stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; vertical-align:middle; }
  .txbtn svg { width:14px; height:14px; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; vertical-align:middle; }
  .nav-badge {
    margin-left:auto; background:var(--red); color:#fff;
    font-size:10px; font-weight:700; padding:2px 6px; border-radius:10px;
  }
  .nav-badge.green { background:var(--green); }
  .sidebar-footer {
    margin-top:auto; padding:16px; border-top:1px solid var(--border);
    position:relative;
  }
  .user-pill {
    display:flex; align-items:center; gap:10px; padding:10px;
    background:var(--glass); border:1px solid var(--glass-border);
    border-radius:var(--radius-sm); cursor:pointer; transition:all 0.2s;
  }
  .user-pill:hover { border-color:var(--border-hover); background:rgba(255,255,255,0.04); }
  .user-pill:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }

  /* Dropdown do usuario (Configuracoes/Tema/Sair) */
  .user-menu {
    display:none;
    position:absolute; bottom:calc(100% - 4px); left:16px; right:16px;
    background:var(--bg-card); border:1px solid var(--border);
    border-radius:10px; box-shadow:0 12px 30px rgba(0,0,0,0.45), 0 0 0 1px rgba(255,255,255,0.02) inset;
    padding:6px; z-index:60;
    animation:userMenuIn 0.14s ease-out;
  }
  .user-menu.open { display:block; }
  @keyframes userMenuIn { from { opacity:0; transform:translateY(4px); } to { opacity:1; transform:none; } }
  .user-menu-item {
    display:flex; align-items:center; gap:10px;
    padding:9px 12px; font-size:13px; font-weight:500;
    color:var(--text-primary); cursor:pointer;
    border-radius:7px; text-decoration:none;
    transition:background 0.12s, color 0.12s;
  }
  .user-menu-item:hover { background:var(--glass); }
  .user-menu-item.danger { color:var(--red); }
  .user-menu-item.danger:hover { background:rgba(244,63,94,0.12); }
  .user-menu-item svg {
    width:16px; height:16px; stroke:currentColor; fill:none;
    stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; flex-shrink:0;
  }
  .user-menu-divider { height:1px; background:var(--border); margin:4px 0; }

  /* Avatar / Foto de perfil na pagina Configuracoes */
  .profile-avatar-section {
    display:flex; align-items:center; gap:18px;
    padding-bottom:18px; margin-bottom:18px;
    border-bottom:1px solid var(--border);
  }
  .profile-avatar-preview {
    width:88px; height:88px; flex-shrink:0;
    border-radius:50%; overflow:hidden;
    background:linear-gradient(135deg, var(--accent), var(--accent2));
    display:flex; align-items:center; justify-content:center;
    color:#fff; font-size:34px; font-weight:700;
    border:3px solid var(--border);
    box-shadow:0 6px 16px rgba(0,0,0,0.25);
  }
  .profile-avatar-preview img {
    width:100%; height:100%; object-fit:cover; display:block;
  }
  .profile-avatar-actions { display:flex; flex-direction:column; gap:6px; min-width:0; }
  .user-name { font-size:13px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .user-role { font-size:11px; color:var(--text-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .user-avatar {
    width:32px; height:32px; background:linear-gradient(135deg,var(--accent),var(--accent2));
    border-radius:50%; display:flex; align-items:center; justify-content:center;
    font-size:13px; font-weight:700; color:#fff; flex-shrink:0;
  }
  .user-status { margin-left:auto; width:8px; height:8px; background:var(--green); border-radius:50%; flex-shrink:0; }

  /* ── MAIN CONTENT ── */
  .main { flex:1; overflow-y:auto; background:var(--bg-primary); }
  .topbar {
    position:sticky; top:0; z-index:40;
    background:var(--topbar-bg);
    border-bottom:1px solid var(--border);
    padding:0 28px; height:60px; display:flex; align-items:center; gap:16px;
    color:var(--text-primary);
  }
  /* ── DARK THEME TOPBAR (preserva visual atual) ── */
  html.dark .topbar {
    background:rgba(6,13,24,0.85) !important;
    border-bottom:1px solid rgba(255,255,255,0.06) !important;
    color:#f1f5f9 !important;
    backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
  }
  html.dark .topbar .topbar-breadcrumb { color:#475569 !important; }
  html.dark .topbar .topbar-breadcrumb span { color:#94a3b8 !important; }
  html.dark .topbar .icon-btn,
  html.dark .topbar .btn-ghost {
    background:rgba(255,255,255,0.03) !important;
    border:1px solid rgba(255,255,255,0.08) !important;
    color:#94a3b8 !important;
  }
  html.dark .topbar .icon-btn:hover,
  html.dark .topbar .btn-ghost:hover {
    border-color:rgba(255,255,255,0.15) !important;
    color:#f1f5f9 !important;
  }

  /* ── LIGHT THEME OVERRIDES (max-specificity, no var dependency) ── */
  html.light .topbar {
    background:#ffffff !important;
    border-bottom:1px solid #e5e7eb !important;
    color:#0f172a !important;
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
  }
  html.light .topbar .topbar-breadcrumb { color:#64748b !important; }
  html.light .topbar .topbar-breadcrumb span { color:#0f172a !important; font-weight:600; }
  html.light .topbar .icon-btn,
  html.light .topbar .btn-ghost {
    background:#ffffff !important;
    border:1px solid #e5e7eb !important;
    color:#475569 !important;
  }
  html.light .topbar .icon-btn:hover,
  html.light .topbar .btn-ghost:hover {
    background:#f8fafc !important;
    border-color:#cbd5e1 !important;
    color:#0f172a !important;
  }
  html.light .topbar .notif-dot { border-color:#ffffff !important; }
  html.light .topbar .menu-btn { color:#475569 !important; }

  /* ───────────────────────────────────── */
  /*  LIGHT THEME — GLOBAL OVERRIDES                */
  /* ───────────────────────────────────── */
  html.light body, html.light .main { background:#f8fafc !important; color:#0f172a !important; }

  /* SIDEBAR */
  html.light .sidebar { background:#ffffff !important; border-right:1px solid #e5e7eb !important; }
  html.light .sidebar-header { border-bottom:1px solid #e5e7eb !important; }
  html.light .logo-text { color:#0f172a !important; }
  html.light .sidebar-section-label { color:#94a3b8 !important; }
  html.light .nav-item { color:#475569 !important; }
  html.light .nav-item:hover { background:#f1f5f9 !important; color:#0f172a !important; }
  html.light .nav-item.active { background:rgba(99,102,241,0.1) !important; color:#6366f1 !important; }
  html.light .sidebar-footer { border-top:1px solid #e5e7eb !important; }
  html.light .user-pill { background:#f8fafc !important; border:1px solid #e5e7eb !important; }
  html.light .user-pill .user-name { color:#0f172a !important; }
  html.light .user-pill .user-role { color:#64748b !important; }

  /* CARDS */
  html.light .kpi-card,
  html.light .chart-card,
  html.light .form-card,
  html.light .transactions-card,
  html.light .ranking-card,
  html.light .recharge-card,
  html.light .stat-chip,
  html.light .notif-panel,
  html.light .modal {
    background:#ffffff !important;
    border:1px solid #e5e7eb !important;
    box-shadow:0 1px 3px rgba(15,23,42,0.04), 0 2px 12px rgba(15,23,42,0.04) !important;
    color:#0f172a !important;
  }

  /* CARD TEXTS */
  html.light .kpi-label,
  html.light .chart-subtitle,
  html.light .kpi-sub,
  html.light .method-stat-label,
  html.light .stat-chip-label,
  html.light .form-label,
  html.light .recharge-stat-label { color:#64748b !important; }

  html.light .kpi-value,
  html.light .chart-title,
  html.light .method-name,
  html.light .stat-chip-value,
  html.light .recharge-stat-value,
  html.light .form-card-title,
  html.light .page-title,
  html.light .transactions-header-title { color:#0f172a !important; }

  html.light .page-subtitle { color:#64748b !important; }

  /* TABLE */
  html.light .tx-table th {
    background:#f8fafc !important;
    color:#64748b !important;
    border-bottom:1px solid #e5e7eb !important;
  }
  html.light .tx-table td {
    color:#334155 !important;
    border-bottom:1px solid #f1f5f9 !important;
  }
  html.light .tx-table tr:hover td { background:#f8fafc !important; }

  /* INPUTS / FORMS */
  html.light .form-input,
  html.light .form-select {
    background:#ffffff !important;
    border:1px solid #e5e7eb !important;
    color:#0f172a !important;
  }
  html.light .form-input::placeholder { color:#94a3b8 !important; }
  html.light .form-input:focus,
  html.light .form-select:focus { border-color:#6366f1 !important; box-shadow:0 0 0 3px rgba(99,102,241,0.1) !important; }

  /* PILLS / BADGES */
  html.light .tx-method-pill { background:rgba(99,102,241,0.08) !important; color:#6366f1 !important; }
  html.light .tag { background:#f1f5f9 !important; border:1px solid #e5e7eb !important; color:#475569 !important; }
  html.light .nav-badge { color:#fff !important; }
  html.light .nav-badge.green { background:#10b981 !important; }

  /* BUTTONS */
  html.light .btn-ghost { background:#ffffff !important; border:1px solid #e5e7eb !important; color:#475569 !important; }
  html.light .btn-ghost:hover { background:#f8fafc !important; color:#0f172a !important; border-color:#cbd5e1 !important; }
  html.light .icon-btn { background:#ffffff !important; border:1px solid #e5e7eb !important; color:#475569 !important; }
  html.light .icon-btn:hover { background:#f8fafc !important; color:#0f172a !important; }

  /* PERIOD TABS */
  html.light .period-tabs { background:#ffffff !important; border:1px solid #e5e7eb !important; }
  html.light .period-tab { color:#64748b !important; }
  html.light .period-tab:not(.active):hover { color:#0f172a !important; }
  html.light .period-tab.active { background:#6366f1 !important; color:#ffffff !important; }

  /* EVO FILTER BUTTONS */
  html.light .evo-filters > div:first-child { background:#f8fafc !important; border:1px solid #e5e7eb !important; }
  html.light .evo-btn { color:#64748b !important; }
  html.light .evo-btn:hover { color:#0f172a !important; }
  html.light .evo-btn.active { background:#6366f1 !important; color:#ffffff !important; }

  /* PROGRESS BAR */
  html.light .progress-bar,
  html.light .method-roi-bar,
  html.light .rank-bar-wrap,
  html.light .compare-bar { background:#f1f5f9 !important; }

  /* ALERTS keep semantic colors but lighter */
  html.light .alert-box.warning { background:rgba(245,158,11,0.08) !important; border-color:rgba(245,158,11,0.25) !important; color:#92400e !important; }
  html.light .alert-box.success { background:rgba(16,185,129,0.08) !important; border-color:rgba(16,185,129,0.25) !important; color:#065f46 !important; }
  html.light .alert-box.error { background:rgba(244,63,94,0.08) !important; border-color:rgba(244,63,94,0.25) !important; color:#9f1239 !important; }
  html.light .alert-box.info { background:rgba(59,130,246,0.08) !important; border-color:rgba(59,130,246,0.25) !important; color:#1e3a8a !important; }

  /* TRANSACTION TYPE BADGES */
  html.light .tx-type-badge.income { background:rgba(16,185,129,0.1) !important; color:#059669 !important; }
  html.light .tx-type-badge.expense { background:rgba(244,63,94,0.1) !important; color:#e11d48 !important; }
  html.light .tx-amount.income { color:#059669 !important; }
  html.light .tx-amount.expense { color:#e11d48 !important; }

  /* THEME TOGGLE & SWATCHES */
  html.light .theme-btn { background:#ffffff !important; border:1px solid #e5e7eb !important; color:#475569 !important; }
  html.light .theme-btn.active { background:rgba(99,102,241,0.1) !important; border-color:#6366f1 !important; color:#6366f1 !important; }

  /* NOTIF PANEL */
  html.light .notif-header { color:#0f172a !important; border-bottom:1px solid #e5e7eb !important; }
  html.light .notif-item { border-bottom:1px solid #f1f5f9 !important; }
  html.light .notif-item:hover { background:#f8fafc !important; }
  html.light .notif-text { color:#475569 !important; }
  html.light .notif-text strong { color:#0f172a !important; }
  html.light .notif-time { color:#94a3b8 !important; }

  /* TOAST */
  html.light .toast { background:#ffffff !important; border:1px solid #e5e7eb !important; color:#0f172a !important; }

  /* MODAL */
  html.light .modal-title { color:#0f172a !important; }
  html.light .modal-sub { color:#64748b !important; }
  html.light .modal-overlay { background:rgba(15,23,42,0.3) !important; }

  /* RANKING */
  html.light .rank-name { color:#0f172a !important; }

  /* UPLOAD */
  html.light .upload-area { border-color:#e5e7eb !important; color:#94a3b8 !important; }
  html.light .upload-area:hover { border-color:#6366f1 !important; background:rgba(99,102,241,0.04) !important; color:#475569 !important; }

  /* SETTINGS */
  html.light .settings-label { color:#475569 !important; }

  /* AUTH SCREEN */
  html.light .auth-screen { background:#f8fafc !important; }
  html.light .auth-card { background:#ffffff !important; border:1px solid #e5e7eb !important; }
  html.light .auth-title { color:#0f172a !important; }
  html.light .auth-sub { color:#64748b !important; }
  .topbar-title { font-size:15px; font-weight:600; flex:1; }
  .topbar-breadcrumb { font-size:12px; color:var(--text-muted); }
  .topbar-breadcrumb span { color:var(--text-secondary); }
  .topbar-actions { display:flex; gap:8px; align-items:center; }
  .icon-btn {
    width:34px; height:34px; background:var(--glass); border:1px solid var(--glass-border);
    border-radius:var(--radius-sm); display:flex; align-items:center; justify-content:center;
    cursor:pointer; transition:all 0.2s; font-size:15px; color:var(--text-secondary);
    position:relative;
  }
  .icon-btn:hover { border-color:var(--border-hover); color:var(--text-primary); }
  .notif-dot {
    position:absolute; top:6px; right:6px; width:7px; height:7px;
    background:var(--red); border-radius:50%; border:1.5px solid var(--topbar-bg);
  }
  .page-content { padding:20px 24px; }
  .page-header { margin-bottom:16px; }
  .page-title { font-size:22px; font-weight:800; letter-spacing:-0.5px; margin-bottom:4px; }
  .page-subtitle { font-size:13.5px; color:var(--text-secondary); opacity:.92; letter-spacing:.1px; }

  /* ── PERIOD TABS ── */
  .period-tabs {
    display:flex; gap:4px; background:var(--bg-card); border:1px solid var(--border);
    border-radius:10px; padding:4px; width:fit-content; margin-bottom:16px;
  }
  .period-tab {
    padding:6px 16px; border-radius:6px; font-size:12.5px; font-weight:500;
    cursor:pointer; transition:all 0.15s; color:var(--text-muted);
  }
  .period-tab.active { background:var(--accent); color:#fff; }
  .period-tab:not(.active):hover { color:var(--text-primary); }

  /* ── KPI CARDS ── */
  .kpi-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:16px; }
  .kpi-card {
    background:linear-gradient(160deg, var(--bg-card), rgba(0,0,0,0.18));
    border:1px solid var(--border); border-radius:var(--radius);
    padding:18px 18px 16px; position:relative; overflow:hidden; transition:all 0.2s;
    cursor:default;
  }
  .kpi-card::before {
    content:''; position:absolute; top:0; left:0; right:0; height:2px;
    background:linear-gradient(90deg,var(--card-color,var(--accent)),transparent);
  }
  /* Soft colored glow blob no canto superior direito (substitui o emoji cartoon) */
  .kpi-card::after {
    content:''; position:absolute; top:-50px; right:-50px;
    width:160px; height:160px; border-radius:50%;
    background:radial-gradient(circle, var(--card-color,var(--accent)) 0%, transparent 65%);
    opacity:0.16; pointer-events:none;
  }
  .kpi-card:hover { border-color:var(--border-hover); transform:translateY(-2px); box-shadow:var(--shadow-card); }
  .kpi-card:hover::after { opacity:0.24; }
  .kpi-card .kpi-label {
    font-size:11px; font-weight:700; color:var(--text-muted);
    text-transform:uppercase; letter-spacing:0.9px;
    margin-bottom:12px; display:flex; align-items:center; gap:8px;
    position:relative; z-index:1;
  }
  /* Bolinha colorida com brilho substitui o emoji do label — SOMENTE no Dashboard
     (outras secoes como Contas, Metas, Afiliados ja tem emoji no label e a
     bolinha duplicaria o indicador visual) */
  #sec-dashboard .kpi-card .kpi-label::before {
    content:''; width:8px; height:8px; border-radius:50%;
    background:var(--card-color,var(--accent));
    box-shadow:0 0 10px var(--card-color,var(--accent));
    flex-shrink:0;
  }
  /* ── Drag handle pra reordenar transacoes ──
     Desktop: cursor:grab. Mobile: touch-action:none impede o scroll
     enquanto arrasta. Tap target maior (min 32x32) pro dedo pegar bem. */
  .tx-drag-handle{
    cursor: grab;
    color: var(--text-muted, #94a3b8);
    font-weight: 800;
    font-size: 16px;
    line-height: 1;
    user-select: none;
    -webkit-user-select: none;
    width: 32px;
    min-height: 32px;
    text-align: center;
    opacity: .55;
    transition: opacity .15s ease, color .15s ease, background .15s ease;
    touch-action: none;
    -webkit-tap-highlight-color: transparent;
  }
  .tx-drag-handle:hover,
  .tx-drag-handle:active{ opacity: 1; color: var(--accent, #6366f1); background: rgba(99,102,241,.08); }
  tr.is-dragging{ opacity: .4; }
  tr.tx-drop-above{ box-shadow: inset 0 3px 0 0 var(--accent, #6366f1); }
  tr.tx-drop-below{ box-shadow: inset 0 -3px 0 0 var(--accent, #6366f1); }

  .kpi-card .kpi-value {
    /* clamp() escala fluidamente: minimo 18px, ideal ~2.2vw, maximo 26px.
       Em telas estreitas (cards 220-280px), encolhe pra caber sem quebrar. */
    font-size: clamp(18px, 1.8vw, 26px);
    font-weight:800; letter-spacing:-0.5px;
    margin-bottom:8px; position:relative; z-index:1;
    color:var(--text-primary,#fff);
    /* Nunca quebra o "R$" do numero. Forca uma linha so. */
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  .kpi-card .kpi-change {
    font-size:12px; font-weight:700; padding:3px 9px; border-radius:6px;
    width:fit-content; display:flex; align-items:center; gap:4px;
    position:relative; z-index:1;
  }
  .kpi-card .kpi-change.up { background:rgba(16,185,129,0.14); color:var(--green); }
  .kpi-card .kpi-change.down { background:rgba(244,63,94,0.14); color:var(--red); }
  /* Esconde o pill vazio "—" — fica mais limpo */
  .kpi-card .kpi-change.neutral { display:none; }
  .kpi-card .kpi-sub { font-size:11.5px; color:var(--text-muted); margin-top:6px; position:relative; z-index:1; }
  /* Botão de editar (banca inicial) no canto do card Saldo Total */
  .kpi-edit-btn {
    position:absolute; top:10px; right:10px; z-index:2;
    width:28px; height:28px; padding:0; line-height:1;
    display:flex; align-items:center; justify-content:center;
    font-size:13px; cursor:pointer;
    background:var(--glass); border:1px solid var(--glass-border); border-radius:8px;
    opacity:0.55; transition:all 0.15s;
  }
  .kpi-edit-btn:hover { opacity:1; border-color:var(--accent); transform:scale(1.06); }
  /* ── MAIN CHART WRAP — altura fixa (PARTE 4) ── */
  #mainChartWrap { height:400px; }
  @media (max-width:1024px) { #mainChartWrap { height:360px !important; } }
  @media (max-width:640px)  { #mainChartWrap { height:280px !important; } }

  /* ── KPI background emoji — substituido pelo glow .kpi-card::after ── */
  .kpi-bg-icon { display:none; }

  /* ── CHARTS ── */
  .chart-card {
    background:var(--bg-card); border:1px solid var(--border); border-radius:18px;
    padding:24px; margin-bottom:20px;
    box-shadow:0 4px 24px rgba(0,0,0,0.4);
  }
  .chart-card:last-child { margin-bottom:0; }
  .chart-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
  .chart-title { font-size:14px; font-weight:700; letter-spacing:-0.2px; }
  .chart-subtitle { font-size:12px; color:var(--text-muted); margin-top:2px; }
  .chart-legend { display:flex; gap:16px; flex-wrap:wrap; }
  .legend-item { display:flex; align-items:center; gap:6px; font-size:12px; color:var(--text-secondary); }
  .legend-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; }
  .chart-container { position:relative; }
  .chart-grid { display:grid; grid-template-columns:65fr 35fr; gap:20px; margin-bottom:20px; align-items:stretch; }
  .chart-grid .chart-card { display:flex; flex-direction:column; margin-bottom:0; }
  /* Form cards e tables também ganham espaçamento padrão entre blocos */
  .section > .form-card + .form-card,
  .section > .chart-card + .form-card,
  .section > .form-card + .chart-card,
  .section > .transactions-card + .transactions-card,
  .section > .chart-card + .transactions-card,
  .section > .transactions-card + .chart-card { margin-top:0; }
  /* Wrappers de gráfico com altura FIXA em px (PARTE 4 — correção do bug de altura) */
  .chart-canvas-wrap { position:relative; width:100%; height:260px; overflow:hidden; }
  #methodChartWrap { position:relative; width:100%; height:260px; overflow:hidden; }
  #pieChartWrap    { position:relative; width:100%; height:260px; display:flex; align-items:center; justify-content:center; }
  #pieChart        { max-width:240px !important; max-height:240px !important; }
  #methodChart { filter:drop-shadow(0 2px 4px rgba(0,0,0,0.25)); }

  /* ── METHODS ── */
  /* ── METHODS GRID — 6 cards em fileira única (versão ampliada) ── */
  .methods-grid {
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
    gap:12px;
    margin-bottom:16px;
    width:100%;
  }
  /* Em telas largas (24"+), nao deixa explodir alem de 6 colunas */
  @media (min-width:1600px) {
    .methods-grid { grid-template-columns:repeat(6,minmax(0,1fr)); }
  }
  .method-card {
    background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius);
    padding:16px; transition:all 0.2s; cursor:pointer; position:relative; overflow:hidden;
    min-width:0; min-height:220px;
    display:flex; flex-direction:column;
  }
  .method-card:hover { border-color:var(--border-hover); transform:translateY(-2px); box-shadow:var(--shadow-card); }
  .method-card::after {
    content:''; position:absolute; bottom:0; left:0; right:0; height:3px;
    background:linear-gradient(90deg,var(--m-color),var(--m-color2,var(--m-color)));
  }
  .method-header {
    display:flex; align-items:flex-start; justify-content:space-between;
    gap:8px; margin-bottom:12px; flex-wrap:wrap;
  }
  .method-name { font-size:14px; font-weight:600; min-width:0; flex:1; line-height:1.25; word-break:break-word; }
  .method-badge {
    font-size:10.5px; font-weight:600; padding:2px 7px; border-radius:6px;
    background:rgba(99,102,241,0.12); color:var(--accent);
    white-space:nowrap; flex-shrink:0; align-self:flex-start;
  }
  .method-badge.warn { background:rgba(244,63,94,0.12); color:var(--red); }
  .method-stats { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:12px; }
  .method-stat-label { font-size:10.5px; color:var(--text-muted); margin-bottom:2px; line-height:1.2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .method-stat-value { font-size:14.5px; font-weight:700; line-height:1.25; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .method-stat-value.green { color:var(--green); }
  .method-stat-value.red { color:var(--red); }
  .method-roi-bar { background:var(--bg-secondary); border-radius:3px; height:6px; margin-bottom:8px; overflow:hidden; }
  .method-roi-fill { height:100%; border-radius:3px; background:linear-gradient(90deg,var(--m-color),var(--m-color2,var(--m-color))); transition:width 1s ease; }
  .method-meta { display:flex; justify-content:space-between; gap:6px; font-size:11px; color:var(--text-muted); line-height:1.3; margin-top:auto; }

  /* ── RESPONSIVO METHODS GRID ── */
  @media (max-width:640px) {
    .methods-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
    .method-card { padding:14px; min-height:200px; }
  }
  @media (min-width:641px) and (max-width:900px) {
    .methods-grid { overflow-x:auto; grid-template-columns:repeat(6,minmax(160px,1fr)); }
  }

  /* ── TRANSACTIONS ── */
  .transactions-card {
    background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden;
    margin-bottom:20px;
  }
  .transactions-card:last-child { margin-bottom:0; }
  .transactions-header { padding:16px 20px; border-bottom:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; }
  .transactions-header-title { font-size:15px; font-weight:700; }
  .tx-table { width:100%; border-collapse:collapse; }
  .tx-table th {
    padding:10px 16px; text-align:left; font-size:11px; font-weight:600;
    color:var(--text-muted); text-transform:uppercase; letter-spacing:0.8px;
    border-bottom:1px solid var(--border); background:var(--bg-secondary);
  }
  .tx-table td { padding:13px 16px; font-size:13px; border-bottom:1px solid var(--border); vertical-align:middle; }
  .tx-table tr:last-child td { border-bottom:none; }
  .tx-table tr:hover td { background:var(--glass); }
  .tx-type-badge {
    display:inline-flex; align-items:center; gap:5px; padding:3px 8px; border-radius:6px;
    font-size:11px; font-weight:600;
  }
  .tx-type-badge.income { background:rgba(16,185,129,0.12); color:var(--green); }
  .tx-type-badge.expense { background:rgba(244,63,94,0.12); color:var(--red); }
  .tx-amount.income { color:var(--green); font-weight:700; }
  .tx-amount.expense { color:var(--red); font-weight:700; }
  .tx-method-pill {
    display:inline-block; padding:2px 8px; border-radius:5px; font-size:11px;
    background:rgba(99,102,241,0.1); color:var(--accent); font-weight:500;
  }

  /* ── RECHARGE ── */
  .recharge-card {
    background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius); padding:24px;
    position:relative; overflow:hidden; margin-bottom:24px;
  }
  .recharge-glow {
    position:absolute; top:-60px; right:-60px; width:200px; height:200px;
    background:radial-gradient(circle,rgba(99,102,241,0.15) 0%,transparent 70%);
    pointer-events:none;
  }
  .recharge-status {
    display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:600;
    padding:4px 10px; border-radius:8px; background:rgba(16,185,129,0.1); color:var(--green);
    margin-bottom:16px;
  }
  .recharge-status::before { content:''; width:6px; height:6px; background:var(--green); border-radius:50%; animation:pulse 2s infinite; }
  @keyframes pulse { 0%,100%{opacity:1} 50%{opacity:0.4} }
  .recharge-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:20px; }
  .recharge-stat { }
  .recharge-stat-label { font-size:11px; color:var(--text-muted); margin-bottom:4px; }
  .recharge-stat-value { font-size:20px; font-weight:800; }
  .progress-bar { background:var(--bg-secondary); border-radius:8px; height:10px; overflow:hidden; margin-bottom:8px; }
  .progress-fill {
    height:100%; border-radius:8px;
    background:linear-gradient(90deg,var(--accent),var(--accent2));
    transition:width 1s ease;
  }
  .progress-label { display:flex; justify-content:space-between; font-size:12px; color:var(--text-muted); }

  /* ── FORMS ── */
  .form-card {
    background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius);
    padding:24px; margin-bottom:16px;
  }
  .form-card-title { font-size:15px; font-weight:700; margin-bottom:16px; display:flex; align-items:center; gap:8px; }
  .form-row { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:12px; }
  .form-select {
    width:100%; background:var(--bg-secondary); border:1px solid var(--glass-border);
    border-radius:var(--radius-sm); padding:10px 12px; color:var(--text-primary);
    font-size:13.5px; outline:none; cursor:pointer; transition:border 0.2s;
  }
  .form-select:focus { border-color:var(--accent); }
  .form-select option { background:var(--bg-card); }
  .btn-ghost {
    background:var(--glass); border:1px solid var(--glass-border); border-radius:var(--radius-sm);
    padding:9px 16px; color:var(--text-secondary); font-size:13px; font-weight:500;
    cursor:pointer; transition:all 0.2s; display:flex; align-items:center; gap:6px;
  }
  .btn-ghost:hover { border-color:var(--border-hover); color:var(--text-primary); }
  .btn-success {
    background:rgba(16,185,129,0.15); border:1px solid rgba(16,185,129,0.25);
    border-radius:var(--radius-sm); padding:9px 16px; color:var(--green); font-size:13px;
    font-weight:600; cursor:pointer; transition:all 0.2s; display:flex; align-items:center; gap:6px;
  }
  .btn-success:hover { background:rgba(16,185,129,0.25); }
  .btn-danger {
    background:rgba(244,63,94,0.15); border:1px solid rgba(244,63,94,0.25);
    border-radius:var(--radius-sm); padding:9px 16px; color:var(--red); font-size:13px;
    font-weight:600; cursor:pointer; transition:all 0.2s; display:flex; align-items:center; gap:6px;
  }
  .btn-danger:hover { background:rgba(244,63,94,0.25); }

  /* ── ALERTS ── */
  .alert-box {
    padding:14px 16px; border-radius:var(--radius-sm); margin-bottom:12px;
    display:flex; align-items:flex-start; gap:10px; font-size:13px;
  }
  .alert-box.warning { background:rgba(245,158,11,0.1); border:1px solid rgba(245,158,11,0.2); color:#fbbf24; }
  .alert-box.error { background:rgba(244,63,94,0.1); border:1px solid rgba(244,63,94,0.2); color:#fb7185; }
  .alert-box.success { background:rgba(16,185,129,0.1); border:1px solid rgba(16,185,129,0.2); color:#34d399; }
  .alert-box.info { background:rgba(59,130,246,0.1); border:1px solid rgba(59,130,246,0.2); color:#60a5fa; }
  .alert-title { font-weight:700; margin-bottom:2px; }

  /* ── SETTINGS ── */
  .settings-section { margin-bottom:24px; }
  .settings-label { font-size:13px; font-weight:600; color:var(--text-secondary); margin-bottom:10px; }
  .color-swatches { display:flex; gap:8px; flex-wrap:wrap; }
  .swatch {
    width:28px; height:28px; border-radius:50%; cursor:pointer; transition:all 0.2s;
    border:2px solid transparent;
  }
  .swatch:hover, .swatch.active { border-color:#fff; transform:scale(1.15); }
  .theme-toggle {
    display:flex; gap:8px;
  }
  .theme-btn {
    flex:1; padding:10px; border-radius:var(--radius-sm); border:1px solid var(--glass-border);
    background:var(--glass); color:var(--text-secondary); font-size:13px; cursor:pointer;
    transition:all 0.2s; text-align:center;
  }
  .theme-btn.active { background:rgba(99,102,241,0.15); border-color:var(--accent); color:var(--accent); }

  /* ── RANKING ── */
  .ranking-card {
    background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius); padding:20px; margin-bottom:24px;
  }
  .rank-item { display:flex; align-items:center; gap:12px; padding:10px 0; border-bottom:1px solid var(--border); }
  .rank-item:last-child { border-bottom:none; }
  .rank-num { font-size:14px; font-weight:800; color:var(--text-muted); width:24px; text-align:center; }
  .rank-num.gold { color:#f59e0b; }
  .rank-num.silver { color:#94a3b8; }
  .rank-num.bronze { color:#cd7f32; }
  .rank-name { flex:1; font-size:14px; font-weight:600; }
  .rank-roi { font-size:14px; font-weight:700; color:var(--green); }
  .rank-bar-wrap { width:100px; background:var(--bg-secondary); border-radius:4px; height:5px; overflow:hidden; }
  .rank-bar { height:100%; border-radius:4px; background:linear-gradient(90deg,var(--accent),var(--green)); }

  /* ── NOTIFICATIONS ── */
  .notif-panel {
    position:fixed; top:60px; right:20px; width:340px;
    background:var(--bg-card); border:1px solid var(--border);
    border-radius:var(--radius); box-shadow:var(--shadow);
    z-index:200; display:none; overflow:hidden;
  }
  .notif-panel.open { display:block; }
  .notif-header { padding:14px 16px; border-bottom:1px solid var(--border); font-size:14px; font-weight:700; display:flex; justify-content:space-between; align-items:center; }
  .notif-clear { font-size:12px; color:var(--accent); cursor:pointer; font-weight:500; }
  .notif-item { padding:12px 16px; border-bottom:1px solid var(--border); display:flex; gap:10px; cursor:pointer; transition:background 0.15s; }
  .notif-item:hover { background:var(--glass); }
  .notif-icon { width:32px; height:32px; border-radius:8px; display:flex; align-items:center; justify-content:center; font-size:14px; flex-shrink:0; }
  .notif-text { font-size:12.5px; line-height:1.5; color:var(--text-secondary); }
  .notif-text strong { color:var(--text-primary); font-weight:600; }
  .notif-time { font-size:11px; color:var(--text-muted); margin-top:3px; }

  /* ── MODAL ── */
  .modal-overlay {
    position:fixed; inset:0; background:rgba(0,0,0,0.7); backdrop-filter:blur(4px);
    z-index:300; display:none; align-items:center; justify-content:center;
  }
  .modal-overlay.open { display:flex; }
  .modal {
    background:var(--bg-card); border:1px solid var(--border); border-radius:20px;
    padding:28px; width:480px; max-width:95vw; max-height:90vh; overflow-y:auto;
    box-shadow:var(--shadow);
  }
  .modal-title { font-size:18px; font-weight:800; margin-bottom:6px; }
  .modal-sub { font-size:13px; color:var(--text-muted); margin-bottom:24px; }
  .modal-actions { display:flex; gap:8px; margin-top:20px; justify-content:flex-end; }

  /* ──────────────────────────────────────────────
     PLANS & SUBSCRIPTION PAGE
     ──────────────────────────────────────────────── */

  /* HERO BANNER do trial */
  .trial-hero {
    position:relative; overflow:hidden;
    background: linear-gradient(135deg, rgba(99,102,241,0.15) 0%, rgba(139,92,246,0.08) 50%, rgba(16,185,129,0.10) 100%);
    border:1px solid rgba(99,102,241,0.25);
    border-radius:20px; padding:32px 36px;
    margin-bottom:20px;
  }
  .trial-hero-bg {
    position:absolute; inset:0; pointer-events:none;
    background:
      radial-gradient(circle at 85% -10%, rgba(139,92,246,0.35) 0%, transparent 50%),
      radial-gradient(circle at 15% 100%, rgba(16,185,129,0.18) 0%, transparent 50%);
  }
  .trial-hero-content { position:relative; z-index:1; }
  .trial-hero-badge {
    display:inline-flex; align-items:center; gap:8px;
    background:rgba(16,185,129,0.15); color:var(--green);
    padding:6px 14px; border-radius:20px;
    font-size:12px; font-weight:600; letter-spacing:0.3px;
    margin-bottom:18px;
    border:1px solid rgba(16,185,129,0.3);
  }
  .trial-pulse {
    width:8px; height:8px; border-radius:50%;
    background:var(--green); position:relative;
    box-shadow:0 0 0 0 rgba(16,185,129,0.5);
    animation:trialPulse 1.8s infinite;
  }
  @keyframes trialPulse {
    0%,100% { box-shadow:0 0 0 0 rgba(16,185,129,0.5); }
    50%     { box-shadow:0 0 0 8px rgba(16,185,129,0); }
  }
  .trial-hero-title {
    font-size:32px; font-weight:800; letter-spacing:-1px;
    line-height:1.15; margin-bottom:10px;
  }
  .trial-hero-title span { background:linear-gradient(135deg,var(--accent),var(--accent2)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
  .trial-hero-sub { font-size:15px; color:var(--text-secondary); line-height:1.5; max-width:620px; margin-bottom:22px; }
  .trial-hero-sub strong { color:var(--text-primary); }
  .trial-progress { max-width:420px; margin-bottom:24px; }
  .trial-progress-bar {
    height:8px; background:rgba(99,102,241,0.12);
    border-radius:8px; overflow:hidden; margin-bottom:6px;
  }
  .trial-progress-fill {
    height:100%; border-radius:8px;
    background:linear-gradient(90deg,var(--accent),var(--accent2));
    transition:width 0.6s ease;
  }
  .trial-progress-meta {
    display:flex; justify-content:space-between;
    font-size:11.5px; color:var(--text-muted); font-weight:500;
  }
  .trial-hero-actions { display:flex; gap:10px; flex-wrap:wrap; }
  .btn-cta-primary {
    background:linear-gradient(135deg,var(--accent),var(--accent2));
    color:#fff; border:none; border-radius:10px;
    padding:13px 24px; font-size:14px; font-weight:700; letter-spacing:0.2px;
    cursor:pointer; transition:all 0.2s;
    box-shadow:0 4px 16px rgba(99,102,241,0.35);
  }
  .btn-cta-primary:hover { transform:translateY(-2px); box-shadow:0 8px 24px rgba(99,102,241,0.45); }
  .btn-cta-ghost {
    background:transparent; border:1px solid var(--glass-border);
    color:var(--text-secondary); border-radius:10px;
    padding:13px 22px; font-size:14px; font-weight:600;
    cursor:pointer; transition:all 0.2s;
  }
  .btn-cta-ghost:hover { border-color:var(--border-hover); color:var(--text-primary); }

  /* PLANS GRID */
  .plans-grid {
    display:grid; grid-template-columns:repeat(3,1fr); gap:16px;
    margin-bottom:20px;
  }
  @media (max-width:980px) { .plans-grid { grid-template-columns:1fr; max-width:440px; margin-left:auto; margin-right:auto; } }

  .plan-card {
    position:relative;
    background:var(--bg-card); border:1px solid var(--border);
    border-radius:18px; padding:28px;
    transition:all 0.25s;
  }
  .plan-card:hover { transform:translateY(-3px); border-color:var(--border-hover); }

  .plan-card-featured {
    border:1.5px solid transparent;
    background:
      linear-gradient(var(--bg-card),var(--bg-card)) padding-box,
      linear-gradient(135deg,var(--accent) 0%,var(--accent2) 50%,#f59e0b 100%) border-box;
    box-shadow:
      0 0 0 1px rgba(99,102,241,0.15),
      0 8px 32px rgba(99,102,241,0.18);
  }
  .plan-card-featured:hover { box-shadow:0 12px 40px rgba(99,102,241,0.28); }

  .plan-featured-ribbon {
    position:absolute; top:-12px; right:24px;
    background:linear-gradient(135deg,var(--accent),var(--accent2));
    color:#fff; padding:5px 14px; border-radius:20px;
    font-size:11px; font-weight:700; letter-spacing:0.5px;
    box-shadow:0 4px 12px rgba(99,102,241,0.4);
  }

  .plan-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; }
  .plan-name { font-size:18px; font-weight:700; letter-spacing:-0.3px; }
  .plan-badge {
    font-size:10.5px; font-weight:700; padding:4px 10px;
    border-radius:12px; letter-spacing:0.5px; text-transform:uppercase;
  }
  .plan-badge-muted { background:rgba(148,163,184,0.15); color:var(--text-secondary); }
  .plan-badge-gold  { background:linear-gradient(135deg,#fbbf24,#f59e0b); color:#7c2d12; }

  .plan-price { display:flex; align-items:baseline; gap:4px; margin-bottom:6px; }
  .plan-price-currency { font-size:18px; font-weight:600; color:var(--text-secondary); }
  .plan-price-value    { font-size:52px; font-weight:800; letter-spacing:-2px; line-height:1; }
  .plan-price-value small { font-size:24px; font-weight:700; opacity:0.85; }
  .plan-price-period   { font-size:13px; color:var(--text-muted); margin-left:6px; }

  .plan-desc { font-size:13px; color:var(--text-secondary); margin-bottom:22px; line-height:1.5; }

  .plan-features { list-style:none; padding:0; margin:0 0 24px; display:flex; flex-direction:column; gap:11px; }
  .plan-features li { display:flex; align-items:center; gap:10px; font-size:13.5px; color:var(--text-primary); }
  .plan-features li strong { font-weight:700; }
  .plan-feature-off { color:var(--text-muted) !important; opacity:0.6; }
  .plan-check {
    width:18px; height:18px; border-radius:50%; flex-shrink:0;
    background:rgba(16,185,129,0.15); color:var(--green);
    display:inline-flex; align-items:center; justify-content:center;
    font-size:11px; font-weight:700;
  }
  .plan-check.premium { background:linear-gradient(135deg,var(--accent),var(--accent2)); color:#fff; box-shadow:0 2px 6px rgba(99,102,241,0.3); }
  .plan-x {
    width:18px; height:18px; border-radius:50%; flex-shrink:0;
    background:rgba(148,163,184,0.1); color:var(--text-muted);
    display:inline-flex; align-items:center; justify-content:center;
    font-size:11px; font-weight:700;
  }

  .btn-plan-primary, .btn-plan-ghost {
    width:100%; padding:14px; border-radius:10px;
    font-size:14px; font-weight:700; cursor:pointer; transition:all 0.2s;
    letter-spacing:0.2px;
  }
  .btn-plan-primary {
    background:linear-gradient(135deg,var(--accent),var(--accent2));
    color:#fff; border:none;
    box-shadow:0 4px 14px rgba(99,102,241,0.3);
  }
  .btn-plan-primary:hover { transform:translateY(-2px); box-shadow:0 8px 24px rgba(99,102,241,0.45); }
  .btn-plan-ghost {
    background:transparent; color:var(--text-muted);
    border:1px solid var(--glass-border); cursor:not-allowed;
  }
  .plan-guarantee {
    text-align:center; font-size:11.5px; color:var(--text-muted);
    margin-top:12px;
  }

  /* TRUST BAR */
  .trust-bar {
    display:grid; grid-template-columns:repeat(4,1fr); gap:12px;
    margin-bottom:0;
  }
  .trust-item {
    background:var(--bg-card); border:1px solid var(--border);
    border-radius:12px; padding:14px 16px;
    display:flex; align-items:center; gap:12px;
    transition:all 0.2s;
  }
  .trust-item:hover { border-color:var(--border-hover); }
  .trust-icon { font-size:22px; flex-shrink:0; }
  .trust-title { font-size:13px; font-weight:600; color:var(--text-primary); }
  .trust-sub   { font-size:11.5px; color:var(--text-muted); margin-top:1px; }
  @media (max-width:768px) { .trust-bar { grid-template-columns:repeat(2,1fr); } }

  /* FAQ */
  .faq-list { display:flex; flex-direction:column; gap:8px; }
  .faq-item {
    background:var(--bg-secondary); border:1px solid var(--border);
    border-radius:10px; overflow:hidden;
    transition:all 0.2s;
  }
  .faq-item:hover { border-color:var(--border-hover); }
  .faq-q {
    padding:14px 18px; cursor:pointer;
    display:flex; align-items:center; justify-content:space-between;
    font-size:13.5px; font-weight:600; color:var(--text-primary);
    user-select:none;
  }
  .faq-arrow { font-size:14px; color:var(--text-muted); transition:transform 0.25s; }
  .faq-item.open .faq-arrow { transform:rotate(180deg); }
  .faq-a {
    max-height:0; overflow:hidden;
    font-size:13px; color:var(--text-secondary); line-height:1.6;
    transition:max-height 0.3s ease, padding 0.3s ease;
    padding:0 18px;
  }
  .faq-item.open .faq-a { max-height:200px; padding:0 18px 16px; }

  /* LIGHT THEME overrides */
  html.light .trial-hero { background:linear-gradient(135deg,#eef2ff 0%,#f5f3ff 50%,#ecfdf5 100%); border-color:#c7d2fe; }
  html.light .trial-hero-sub { color:#475569; }
  html.light .plan-feature-off { color:#94a3b8 !important; }
  html.light .plan-badge-muted { background:#f1f5f9; color:#64748b; }
  html.light .trust-item, html.light .faq-item { background:#ffffff !important; }

  @media (max-width:768px) {
    .trial-hero { padding:24px 20px; }
    .trial-hero-title { font-size:24px; }
    .plan-card { padding:22px; }
    .plan-price-value { font-size:42px; }
  }

  /* ── ACESSIBILIDADE — foco visível em todos os elementos interativos ── */
  button:focus-visible,
  a:focus-visible,
  .nav-item:focus-visible,
  .icon-btn:focus-visible,
  .swatch:focus-visible,
  .goal-action-btn:focus-visible,
  .period-tab:focus-visible,
  .evo-btn:focus-visible,
  .cal-day:focus-visible,
  .faq-q:focus-visible,
  input:focus-visible,
  select:focus-visible,
  textarea:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
  }
  /* foco em campos de formulário (input/select) — sem deslocamento */
  .form-input:focus-visible, .form-select:focus-visible {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(99,102,241,0.18);
  }

  /* ──────────────────────────────────────────────
     CONTAS DEPOSITADAS
     ────────────────────────────────────────────── */
  .accounts-grid {
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(260px, 1fr));
    gap:14px;
    margin-top:14px;
  }
  .account-card {
    position:relative;
    background:var(--bg-card);
    border:1px solid var(--border);
    border-radius:14px;
    padding:18px;
    transition:all 0.2s;
    cursor:pointer;
    overflow:hidden;
  }
  .account-card:hover {
    border-color:var(--border-hover);
    transform:translateY(-2px);
    box-shadow:var(--shadow-card);
  }
  .account-card::before {
    content:''; position:absolute; top:0; left:0; right:0; height:3px;
    background:var(--house-color, var(--accent));
  }
  .account-card.low-balance::before { background:var(--yellow); }
  .account-card.empty-balance::before { background:var(--red); }
  .account-head {
    display:flex; align-items:center; gap:12px; margin-bottom:14px;
  }
  .house-logo {
    width:44px; height:44px; border-radius:10px;
    background:var(--house-color, var(--accent));
    display:flex; align-items:center; justify-content:center;
    font-size:18px; font-weight:800; color:#fff;
    flex-shrink:0;
    box-shadow:0 4px 12px rgba(0,0,0,0.2);
  }
  .house-name { font-size:15px; font-weight:700; letter-spacing:-0.2px; }
  .house-name-row { display:flex; align-items:center; gap:7px; flex-wrap:wrap; row-gap:4px; }
  .account-nickname {
    display:inline-flex; align-items:center;
    font-size:11px; font-weight:700;
    color:#c4b5fd;
    background:rgba(139,92,246,0.16);
    border:1px solid rgba(139,92,246,0.34);
    padding:2px 9px; border-radius:999px;
    letter-spacing:0.2px;
    max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
    line-height:1.5;
  }
  .house-meta { font-size:11px; color:var(--text-muted); margin-top:3px; }
  .account-balance {
    font-size:24px; font-weight:800; letter-spacing:-0.5px; margin-bottom:4px;
  }
  .account-balance.zero { color:var(--text-muted); }
  .account-balance.low { color:var(--yellow); }
  .account-note {
    font-size:11.5px; color:var(--text-muted);
    background:var(--bg-secondary); border:1px solid var(--glass-border);
    padding:6px 10px; border-radius:6px;
    margin-top:10px; line-height:1.4;
  }
  .account-actions {
    display:flex; gap:6px; margin-top:12px;
  }
  .account-quick-btn {
    flex:1; padding:6px 8px; border-radius:6px;
    background:var(--glass); border:1px solid var(--glass-border);
    color:var(--text-secondary); font-size:11.5px; font-weight:600;
    cursor:pointer; transition:all 0.15s;
  }
  .account-quick-btn:hover { border-color:var(--border-hover); color:var(--text-primary); }
  .account-quick-btn.add:hover { color:var(--green); border-color:rgba(16,185,129,0.4); }
  .account-quick-btn.sub:hover { color:var(--red); border-color:rgba(244,63,94,0.4); }

  /* HOUSE SELECTOR (modal) */
  .house-selector {
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(80px, 1fr));
    gap:8px;
    max-height:240px;
    overflow-y:auto;
    padding:8px;
    background:var(--bg-secondary);
    border:1px solid var(--glass-border);
    border-radius:10px;
  }
  .house-option {
    display:flex; flex-direction:column; align-items:center; gap:4px;
    padding:8px 4px; border-radius:8px;
    border:2px solid transparent;
    cursor:pointer; transition:all 0.15s;
    background:var(--bg-card);
  }
  .house-option:hover { background:var(--glass); border-color:var(--border-hover); }
  .house-option.selected { border-color:var(--accent); background:rgba(99,102,241,0.08); }
  .house-option .house-mini-logo {
    width:34px; height:34px; border-radius:8px;
    background:var(--c, var(--accent));
    display:flex; align-items:center; justify-content:center;
    font-size:13px; font-weight:800; color:#fff;
  }
  .house-option-name { font-size:10.5px; font-weight:600; text-align:center; color:var(--text-secondary); line-height:1.2; }
  .house-option.selected .house-option-name { color:var(--accent); }
  .house-option.custom .house-mini-logo {
    background:transparent; border:2px dashed var(--border-hover); color:var(--text-muted); font-size:18px;
  }

  /* ── SELETOR DE CASA — estilo dropdown "CASA SELECIONADA" ── */
  #houseSelector.house-selector { display:block; max-height:none; overflow:visible; background:transparent; padding:0; border:none; }
  .house-dd { position:relative; }
  .house-dd-caption { display:block; text-align:center; font-size:10px; letter-spacing:0.14em; color:var(--text-muted); text-transform:uppercase; font-weight:600; margin-bottom:8px; }
  .house-dd-trigger {
    position:relative; width:100%; display:flex; align-items:center; justify-content:center;
    background:var(--bg-card); border:1px solid var(--border); border-radius:12px;
    padding:15px 40px; cursor:pointer; transition:border-color 0.15s;
  }
  .house-dd-trigger:hover { border-color:var(--border-hover); }
  .house-dd-value { font-size:19px; font-weight:800; letter-spacing:0.04em; }
  .house-dd-value.placeholder { color:var(--text-muted); font-weight:700; letter-spacing:0.06em; }
  .house-dd-caret { position:absolute; right:16px; top:50%; transform:translateY(-50%); font-size:13px; color:var(--text-secondary); }
  .house-dd-menu {
    display:none; position:absolute; top:calc(100% + 6px); left:0; right:0; z-index:60;
    background:var(--bg-card); border:1px solid var(--border); border-radius:10px;
    box-shadow:var(--shadow); max-height:260px; overflow-y:auto; padding:6px;
  }
  .house-dd-menu.open { display:block; }
  .house-dd-item {
    display:flex; align-items:center; justify-content:center; gap:10px; padding:11px 10px; border-radius:8px; cursor:pointer;
    transition:background 0.12s;
  }
  .house-dd-item:hover { background:var(--glass); }
  .house-dd-item.selected { background:rgba(99,102,241,0.12); }
  .house-dd-item-name { font-size:16px; font-weight:800; letter-spacing:0.03em; color:var(--text-primary); }
  .house-dd-logo { width:22px; height:22px; object-fit:contain; border-radius:4px; display:block; flex-shrink:0; }
  .house-dd-dot {
    width:24px; height:24px; border-radius:6px; flex-shrink:0;
    display:flex; align-items:center; justify-content:center;
    color:#fff; font-weight:800; font-size:12px;
  }
  .house-dd-dot.custom { background:transparent; border:2px dashed var(--border-hover); color:var(--text-muted); font-size:16px; }
  html.light .house-dd-trigger { background:#f8fafc !important; }
  html.light .house-dd-menu { background:#ffffff !important; }

  /* Light theme */
  html.light .account-card { background:#ffffff !important; }
  html.light .account-note { background:#f8fafc !important; }
  html.light .account-nickname {
    color:#6d28d9;
    background:rgba(124,58,237,0.10);
    border-color:rgba(124,58,237,0.28);
  }
  html.light .house-selector { background:#f8fafc !important; }
  html.light .house-option { background:#ffffff !important; }
  html.light .account-quick-btn { background:#f8fafc !important; }

  /* ── EMPTY STATE (para Admin "em breve" e similares) ── */
  .empty-state {
    text-align:center;
    padding:60px 32px;
    background:var(--bg-card);
    border:1px dashed var(--glass-border);
    border-radius:18px;
    max-width:640px;
    margin:40px auto;
  }
  .empty-state-icon { font-size:56px; line-height:1; margin-bottom:18px; }
  .empty-state-title { font-size:22px; font-weight:800; margin-bottom:10px; letter-spacing:-0.4px; }
  .empty-state-sub { font-size:14px; color:var(--text-secondary); line-height:1.5; max-width:440px; margin:0 auto; }
  .empty-feature {
    display:inline-flex; align-items:center; gap:6px;
    background:var(--glass); border:1px solid var(--glass-border);
    border-radius:20px; padding:6px 12px; font-size:12px; color:var(--text-secondary);
  }
  html.light .empty-state { background:#ffffff !important; }

  /* ── COMPARE CHART — altura controlada ── */
  #compareChartWrap { height:300px; }
  @media (max-width:1024px) { #compareChartWrap { height:260px !important; } }
  @media (max-width:640px)  { #compareChartWrap { height:220px !important; } }

  /* ── REPORT CHARTS — altura controlada ── */
  #reportChartWrap  { height:320px; }
  #expenseChartWrap { height:280px; }
  #roiChartWrap     { height:280px; }
  @media (max-width:1024px) {
    #reportChartWrap  { height:280px !important; }
    #expenseChartWrap { height:240px !important; }
    #roiChartWrap     { height:240px !important; }
  }
  @media (max-width:640px) {
    #reportChartWrap  { height:240px !important; }
    #expenseChartWrap { height:220px !important; }
    #roiChartWrap     { height:220px !important; }
  }

  /* ── COMPARE SECTION — preenche viewport (sem espaço vazio embaixo) ── */
  #sec-compare.active {
    display:flex;
    flex-direction:column;
    min-height:calc(100vh - 100px); /* topbar (60) + padding do page-content */
  }
  #sec-compare.active > .form-card:last-child {
    flex:1;
    margin-bottom:0;
    display:flex;
    flex-direction:column;
  }
  #sec-compare.active > .form-card:last-child > div:last-child {
    flex:1;
    display:flex;
    flex-direction:column;
    justify-content:space-around; /* distribui as barras uniformemente */
  }
  @media (max-width:768px) {
    #sec-compare.active { min-height:auto; }
    #sec-compare.active > .form-card:last-child { flex:0 1 auto; }
    #sec-compare.active > .form-card:last-child > div:last-child { justify-content:flex-start; gap:12px; }
  }

  /* ── GOAL ACTIONS ── */
  .goal-row { position:relative; }
  .goal-row .goal-actions {
    display:inline-flex; gap:6px; margin-left:10px; opacity:0.55; transition:opacity 0.15s;
    vertical-align:middle;
  }
  .goal-row:hover .goal-actions { opacity:1; }
  .goal-action-btn {
    width:26px; height:26px; border-radius:6px; border:1px solid var(--glass-border);
    background:var(--glass); color:var(--text-secondary); font-size:13px; line-height:1;
    cursor:pointer; transition:all 0.15s; display:inline-flex; align-items:center; justify-content:center;
    padding:0;
  }
  .goal-action-btn:hover { border-color:var(--border-hover); color:var(--text-primary); }
  .goal-action-btn.danger:hover { border-color:var(--red); color:var(--red); background:rgba(244,63,94,0.08); }

  /* ── SECTION HIDDEN ── */
  .section { display:none; }
  .section.active { display:block; }

  /* ── MINI CHART ── */
  .mini-chart-wrap { height:60px; margin-top:10px; }

  /* ── STAT ROW — 7 cards em fileira única no desktop ── */
  .stat-row {
    display:grid;
    grid-template-columns:repeat(7,minmax(0,1fr));
    gap:12px; margin-bottom:14px; width:100%;
  }
  .stat-chip {
    background:transparent; border:1px solid var(--border); border-radius:8px;
    padding:10px 12px; min-width:0;
    transition:background .18s ease,border-color .18s ease;
  }
  .stat-chip:hover { background:var(--bg-secondary); border-color:rgba(139,92,246,.22); }
  .stat-chip-label { font-size:11.5px; color:var(--text-secondary); margin-bottom:4px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; letter-spacing:.1px; opacity:.95; font-weight:500; }
  .stat-chip-value { font-size:14px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  @media (max-width:1024px) { .stat-row { grid-template-columns:repeat(4,minmax(0,1fr)); } }
  @media (max-width:640px)  {
    /* força 2 colunas mesmo quando o grid vem inline do JS (Admin) */
    .stat-row { grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:8px; }
    .stat-chip { padding:10px 12px; }
    /* deixa o rótulo quebrar linha em vez de cortar com "..." */
    .stat-chip-label { white-space:normal; overflow:visible; text-overflow:clip; line-height:1.25; }
    .stat-chip-value { font-size:14px; white-space:normal; }
  }

  /* ── RESPONSIVE ── */
  @media (max-width:1024px) {
    .kpi-grid { grid-template-columns:repeat(2,1fr); }
    .chart-grid { grid-template-columns:1fr !important; }
    #methodChartWrap, #pieChartWrap { height:260px; }
    .recharge-grid { grid-template-columns:repeat(2,1fr); }
    .evo-filters { flex-wrap:wrap; gap:6px; }
    .evo-date-row { flex-direction:column; gap:6px; }
  }
  /* Breakpoint estendido pra cobrir todos os celulares (inclusive Pro Max em landscape 956px) e tablets pequenos */
  @media (max-width:960px) {
    :root { --sidebar-w:0px; }
    .sidebar {
      position:fixed; left:-280px; width:260px;
      transition:left 0.3s; z-index:100; --sidebar-w:260px;
      height:100vh; height:100dvh;
      overflow-y:auto; -webkit-overflow-scrolling:touch;
      display:flex; flex-direction:column;
    }
    .sidebar.open { left:0; }
    /* Sidebar SUPER compactada pra caber tudo em qualquer celular */
    .sidebar-header { padding:12px 14px; border-bottom:1px solid var(--border); flex-shrink:0; }
    .logo-icon { width:28px; height:28px; }
    .logo-text { font-size:14px; }
    .sidebar-section { padding:8px 8px 2px; }
    .sidebar-section-label { font-size:9.5px; margin-bottom:3px; padding:0 6px; letter-spacing:.8px; }
    .nav-item { padding:6px 9px; font-size:12.5px; gap:8px; min-height:0; border-radius:7px; }
    .nav-item.active::before { width:2px; height:14px; }
    .nav-item .nav-icon, .nav-item .nav-icon svg { width:15px; height:15px; }
    .nav-badge { font-size:8.5px; padding:1px 5px; }
    .nav-item .live-badge { font-size:9px; padding:1px 6px; }
    .sidebar-footer { padding:10px 12px; margin-top:auto; flex-shrink:0; border-top:1px solid var(--border); }
    .user-pill { padding:7px; gap:8px; }
    .user-avatar { width:28px; height:28px; }
    .user-name { font-size:12.5px; }
    .user-role { font-size:10px; }
    .main { width:100%; }
    .page-content { padding:10px 12px 14px; }
    .page-header { margin-bottom:10px; }
    .page-title { font-size:18px; }
    .page-subtitle { font-size:12px; }
    .kpi-grid { grid-template-columns:repeat(2,1fr); gap:8px; }
    .kpi-card { padding:12px 12px 10px; border-radius:12px; }
    .kpi-card .kpi-value { font-size:18px; letter-spacing:-.3px; margin-bottom:4px; }
    .kpi-card .kpi-label { font-size:9.5px; margin-bottom:8px; letter-spacing:.6px; gap:6px; }
    .kpi-card .kpi-sub { font-size:10.5px; margin-top:3px; }
    #sec-dashboard .kpi-card .kpi-label::before { width:6px; height:6px; }
    .kpi-edit-btn { width:22px; height:22px; top:8px; right:8px; }
    .chart-card { padding:14px; border-radius:12px; }
    .chart-grid { grid-template-columns:1fr !important; gap:12px !important; }
    .chart-grid .chart-card { height:240px; }
    .topbar { padding:0 10px; gap:6px; height:54px; }
    .menu-btn { display:flex !important; }
    .topbar-title { overflow:hidden; min-width:0; }
    .topbar-breadcrumb { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-size:14px; }
    .topbar-actions { gap:4px; }
    .topbar-actions .icon-btn { width:30px; height:30px; }
    .txbtn-label { display:none; }
    .txbtn { padding:6px 9px !important; }
    .stat-row { gap:6px; margin-bottom:12px; }
    .stat-chip { padding:8px 10px; min-width:0; }
    .stat-chip-label { font-size:9.5px; margin-bottom:2px; }
    .stat-chip-value { font-size:12.5px; }
    #methodEvolutionWrap { height:300px !important; }
    /* Banner trial compacto */
    .trial-sticky-banner{padding:7px 11px;margin-bottom:10px;border-radius:9px}
    .trial-sticky-banner-text{font-size:11px;line-height:1.35}
    .trial-sticky-banner-cta{font-size:10px;padding:4px 9px}
    .trial-sticky-banner-icon svg{width:12px;height:12px}
    /* Pie chart "Distribuição de Lucro" compacto pra nao ficar gigante */
    #pieChartWrap {
      width:100% !important; max-width:200px !important;
      height:180px !important; margin:0 auto !important;
      padding:0 !important;
      display:flex; align-items:center; justify-content:center;
    }
    #pieChart {
      width:auto !important; height:auto !important;
      max-width:180px !important; max-height:180px !important;
    }
    /* Other secondary charts also smaller on mobile */
    #methodChartWrap, #methodEvolutionWrap {
      max-height:260px !important;
    }
    /* Chart.js legend mais compacta no mobile (Evolucao por Metodo) */
    .chart-card canvas + .chartjs-legend,
    .chart-card .chart-legend-area {
      font-size:11px !important;
    }
    /* Inputs de data: trava altura mesmo vazio no iOS Safari */
    .form-input[type="date"] {
      height:40px !important;
      min-height:40px !important;
      max-height:40px !important;
      padding:8px 10px !important;
      font-size:13px !important;
      line-height:24px !important;
      box-sizing:border-box !important;
      -webkit-appearance:none;
      appearance:none;
      display:flex; align-items:center;
    }
    .form-input[type="date"]::-webkit-date-and-time-value {
      text-align:left;
      height:24px;
    }
    /* Modal: forca form-row com colunas iguais (Valor e Data do mesmo tamanho) */
    .modal .form-row {
      grid-template-columns:1fr 1fr !important;
      gap:10px !important;
    }
    .modal .form-row > .form-group {
      min-width:0 !important;
    }
    .form-input, .form-select { padding:10px 12px; font-size:13.5px; }
    .form-label { font-size:11.5px; margin-bottom:4px; }
    .form-group { margin-bottom:10px; }
    .form-row { gap:10px; }
    /* Botoes Filtrar / Limpar compactos */
    .filters-card .btn-primary, .filters-card .btn-ghost {
      padding:8px 16px !important; font-size:13px !important;
    }
    /* Resumo geral da Calculadora: cards muito menores no mobile */
    #sec-calculadora .kpi-grid {
      grid-template-columns:1fr 1fr 1fr !important; gap:6px !important;
    }
    #sec-calculadora .kpi-card {
      padding:10px 8px !important; border-radius:10px !important;
    }
    #sec-calculadora .kpi-card .kpi-label {
      font-size:9px !important; margin-bottom:6px !important; letter-spacing:.5px !important; line-height:1.2 !important;
    }
    #sec-calculadora .kpi-card .kpi-value {
      font-size:13px !important; letter-spacing:-.2px !important; margin-bottom:3px !important;
    }
    #sec-calculadora .kpi-card .kpi-sub {
      font-size:9px !important; line-height:1.25 !important; margin-top:2px !important;
    }
    /* Modal Nova Transacao - usa quase toda a largura do mobile */
    .modal {
      padding:20px !important; border-radius:16px !important;
      width:calc(100vw - 28px) !important; max-width:420px !important;
    }
    .modal-title { font-size:17px !important; margin-bottom:4px !important; }
    .modal-sub { font-size:12.5px !important; margin-bottom:16px !important; }
    .modal-actions { gap:6px !important; margin-top:14px !important; }
    .modal-actions .btn-primary, .modal-actions .btn-ghost {
      padding:9px 16px !important; font-size:13px !important;
    }
    /* Calculadora: cards de casas internos mais compactos */
    .sb-grid { gap:10px !important; }
    .sb-card { padding:14px !important; }
    /* Cards de dashboard secundarios mais compactos */
    .dash-rank-card{padding:14px;border-radius:12px}
    .dash-streak{padding:10px 12px;border-radius:10px}
    /* Form cards mobile */
    .form-card{padding:16px;border-radius:12px}
    .form-card-title{font-size:14px;margin-bottom:12px}
    /* Modais (paywall, upsell) mais compactos no mobile */
    .pro-upsell-card,.welcome-card,.paywall-card-premium{margin:12px}
  }
  .menu-btn { display:none; }
  .overlay-backdrop {
    position:fixed; inset:0; background:rgba(0,0,0,0.5); z-index:90;
    display:none;
  }
  .overlay-backdrop.open { display:block; }

  /* ── TOAST ── */
  .toast-container { position:fixed; bottom:24px; right:24px; z-index:500; display:flex; flex-direction:column; gap:8px; pointer-events:none; }
  .toast {
    background:var(--bg-card); border:1px solid var(--border); border-radius:10px;
    padding:12px 16px; font-size:13px; display:flex; align-items:center; gap:10px;
    box-shadow:var(--shadow); pointer-events:all;
    animation:slideIn 0.3s ease;
    max-width:320px;
  }
  @keyframes slideIn { from{transform:translateX(100%);opacity:0} to{transform:translateX(0);opacity:1} }
  .toast.success { border-left:3px solid var(--green); }
  .toast.error { border-left:3px solid var(--red); }
  .toast.info { border-left:3px solid var(--accent); }

  /* ── TAG ── */
  .tag { display:inline-block; padding:2px 8px; border-radius:5px; font-size:11px; font-weight:600; background:var(--bg-secondary); border:1px solid var(--border); color:var(--text-secondary); }

  /* ── COMPARE ── */
  .compare-bar-wrap { margin-bottom:12px; }
  .compare-label { display:flex; justify-content:space-between; font-size:12px; margin-bottom:4px; }
  .compare-bar { height:8px; background:var(--bg-secondary); border-radius:4px; overflow:hidden; position:relative; }
  .compare-bar-a { height:100%; border-radius:4px; background:var(--accent); position:absolute; top:0; left:0; }
  .compare-bar-b { height:100%; border-radius:4px; background:var(--green); opacity:0.6; position:absolute; top:0; left:0; }

  /* ── UPLOAD ── */
  .upload-area {
    border:2px dashed var(--border); border-radius:var(--radius-sm);
    padding:24px; text-align:center; cursor:pointer; transition:all 0.2s;
    color:var(--text-muted); font-size:13px;
  }
  .upload-area:hover { border-color:var(--accent); color:var(--text-secondary); background:rgba(99,102,241,0.04); }
  .upload-icon { font-size:28px; margin-bottom:8px; display:block; }

/* ── CARD GERENCIAR ASSINATURA ── */
.sub-plan-name { font-size:20px; font-weight:800; color:var(--text-primary); margin-bottom:6px; }
.sub-status-line { display:flex; align-items:center; gap:7px; font-size:13px; margin-bottom:16px; }
.sub-dot { width:9px; height:9px; border-radius:50%; display:inline-block; }
.sub-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
@media (max-width:480px) { .sub-grid { grid-template-columns:1fr 1fr; } }
.sub-k { font-size:11px; color:var(--text-muted); text-transform:uppercase; letter-spacing:0.04em; margin-bottom:3px; }
.sub-v { font-size:15px; font-weight:700; color:var(--text-primary); }

/* ── TABELA DO PAINEL ADMIN ── */
.admin-table { width:100%; border-collapse:collapse; font-size:13px; }
.admin-table th { text-align:left; padding:8px 10px; color:var(--text-muted); font-size:11px; text-transform:uppercase; letter-spacing:0.04em; border-bottom:1px solid var(--border); white-space:nowrap; }
.admin-table td { padding:10px; border-bottom:1px solid var(--border); color:var(--text-secondary); white-space:nowrap; }
.admin-table tbody tr:hover { background:var(--glass); }

/* ── PAYWALL (bloqueio por assinatura) ── */
.paywall-overlay {
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(6,13,24,0.94);
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
.paywall-card {
  background: var(--bg-card); border: 1px solid var(--border); border-radius: 16px;
  padding: 34px 28px; max-width: 380px; width: 100%; text-align: center; box-shadow: var(--shadow);
}
.paywall-emoji { font-size: 40px; margin-bottom: 6px; }
.paywall-title { font-size: 21px; font-weight: 800; color: var(--text-primary); margin-bottom: 8px; }
.paywall-sub { font-size: 14px; color: var(--text-secondary); line-height: 1.55; margin-bottom: 22px; }
.paywall-foot { margin-top: 16px; font-size: 13px; color: var(--text-muted); }
.paywall-foot a { color: var(--accent); cursor: pointer; text-decoration: none; }
.paywall-foot a:hover { text-decoration: underline; }

/* ═══════════════════════════════════════════════
   ADAPTAÇÃO MOBILE — iOS & Android
   ═══════════════════════════════════════════════ */

/* Configurações: 2 colunas no desktop, 1 no celular */
/* Multi-column layout: empilha cards verticalmente em N colunas e o
   browser balanceia as alturas — elimina o espaço vazio que sobrava
   embaixo do card menor quando o vizinho era muito mais alto. */
.settings-grid { column-count:2; column-gap:24px; }
.settings-grid > * { break-inside:avoid; -webkit-column-break-inside:avoid; page-break-inside:avoid; margin-bottom:22px; display:block; }
.settings-grid > *:last-child { margin-bottom:0; }
.settings-grid > .form-card { margin-bottom:22px; }
/* Card/wrapper que ocupa TODAS as colunas (full-width inside settings grid) */
.settings-grid .card-full { column-span:all; -webkit-column-span:all; }

/* Evita "blowout" de grid: cards de gráfico podem encolher até o container
   (sem isso, o gráfico empurra o card para fora da tela no celular) */
.chart-grid > *, .chart-card { min-width: 0; }
.chart-card { overflow: hidden; }
.chart-card canvas { max-width: 100% !important; }

/* Remove o flash cinza ao tocar e impede o ajuste de fonte do sistema */
* { -webkit-tap-highlight-color: rgba(0,0,0,0); }
html { -webkit-text-size-adjust:100%; text-size-adjust:100%; }

/* Respeita a área segura (notch / barra inferior) no iPhone */
@supports (padding: max(0px)) {
  .topbar      { padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(16px, env(safe-area-inset-right)); padding-top: env(safe-area-inset-top); height: calc(60px + env(safe-area-inset-top)); }
  .sidebar     { padding-bottom: env(safe-area-inset-bottom); }
  .main        { padding-bottom: env(safe-area-inset-bottom); }
  .auth-screen { padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(16px, env(safe-area-inset-right)); padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom); }
  .toast-container { right: max(24px, env(safe-area-inset-right)); bottom: max(24px, env(safe-area-inset-bottom)); }
}

/* Usa a altura real da tela no mobile (evita "pulo" com a barra do navegador no iOS/Android) */
@supports (height: 100dvh) {
  .auth-screen { min-height: 100dvh; }
  .app { height: 100dvh; }
}

@media (max-width:768px) {
  /* Configurações empilha em 1 coluna */
  .settings-grid { column-count:1; }

  /* Campos com >=16px evitam o ZOOM automático do iOS ao focar */
  .form-input, .form-select, textarea,
  input[type="text"], input[type="email"], input[type="password"],
  input[type="number"], input[type="date"] { font-size:16px; }

  /* Rolagem com inércia (suave) no iOS */
  .main, .sidebar, .modal, .notif-panel { -webkit-overflow-scrolling: touch; }

  /* Alvos de toque confortáveis (mín. ~44px) */
  .btn-primary, .icon-btn, .btn-ghost, .nav-item, .period-tab { min-height:44px; }
  .auth-card { padding:32px 24px; }
}

/* Quando os blocos de estatística ficam em 2 colunas e sobra um sozinho
   na última linha (nº ímpar), o último ocupa a linha inteira — sem "buraco". */
@media (max-width:640px) {
  /* Centraliza o conteúdo de TODOS os blocos de estatística (como em Metas Atingidas) */
  .stat-row .stat-chip { text-align: center; }
  .stat-row > .stat-chip:last-child:nth-child(odd) { grid-column: 1 / -1; }

  /* Gráfico de rosca: menor, com folga pra não estourar o card */
  #pieChartWrap { width:100%; max-width:260px; height:215px; margin:0 auto; padding:0; }
  #pieChart { max-width:100% !important; max-height:100% !important; }

  /* Filtros do grafico: scroll horizontal em vez de wrap (estilo Twitter/Instagram) */
  .evo-btn-group {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
    justify-content: flex-start;
  }
  .evo-btn-group::-webkit-scrollbar { display: none; }
  .evo-btn { padding: 7px 12px; font-size: 12px; flex-shrink: 0; white-space: nowrap; }

  /* Abas principais do dashboard: preenchem largura (4 abas) */
  .period-tabs {
    width: 100%;
    padding: 3px;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch;
  }
  .period-tabs::-webkit-scrollbar { display: none; }
  .period-tab { flex:1 1 0; min-width:0; text-align:center; padding:7px 6px; font-size:13px; min-height:34px; display:flex; align-items:center; justify-content:center; white-space:nowrap; }

  /* Abas do ranking idem (4 abas: Hoje/Semana/Mes/Geral) */
  .rank-period-tabs {
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch;
  }
  .rank-period-tabs::-webkit-scrollbar { display: none; }
  .rank-period-tab { flex-shrink: 0; white-space: nowrap; }

  /* Ranking: esconde a barrinha decorativa e mantém nome + ROI numa linha só */
  .rank-bar-wrap { display:none; }
  .rank-item { gap:8px; }
  .rank-name { font-size:13px; }
  .rank-roi  { font-size:12.5px; white-space:nowrap; }
  .rank-roi-pct { display:none; }  /* no mobile mostra só o valor, sem o ROI */

  /* Card de Filtros mais curto: 2 colunas (De|Até, Método|Tipo) + botões largura total */
  .filters-card .form-group { margin-bottom:8px; }
  .filters-card .form-card-title { margin-bottom:8px; }
  .filters-card .form-row { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
  .filters-card .form-row > .form-group { min-width:0; }
  .filters-card .form-row > .form-group:last-child { grid-column:1 / -1; }
  .filters-card .form-input, .filters-card .form-select { width:100%; min-width:0; box-sizing:border-box; }
  .filters-card .form-label { margin-bottom:4px; }

  /* Tabelas viram cartões compactos no mobile: campos lado a lado (2 colunas) */
  .tx-table, .tx-table tbody, .admin-table, .admin-table tbody { display:block; width:100%; }
  .tx-table thead, .admin-table thead { display:none; }
  .tx-table tr, .admin-table tr {
    display:grid; grid-template-columns:1fr 1fr; gap:9px 14px;
    background:var(--bg-secondary); border:1px solid var(--glass-border);
    border-radius:12px; padding:12px; margin-bottom:10px;
  }
  .tx-table td, .admin-table td {
    display:flex; flex-direction:column; align-items:flex-start; gap:2px;
    padding:0 !important; border:none !important; text-align:left; min-width:0;
    font-size:13px; word-break:break-word;
  }
  .tx-table td::before, .admin-table td::before {
    content: attr(data-label); color:var(--text-muted); font-size:10.5px; font-weight:600;
    text-transform:uppercase; letter-spacing:.3px;
  }
  .tx-table td[data-label=""], .admin-table td[data-label=""] {
    grid-column:1 / -1;
    /* Botoes em LINHA (era column empilhada que sobrava espaco gigante) */
    flex-direction: row !important;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
    padding-top:8px !important;
    border-top:1px solid var(--glass-border) !important;
    margin-top:2px;
  }
  .tx-table td[data-label=""]::before, .admin-table td[data-label=""]::before { content:none; }
  .tx-table td[data-label=""] button, .admin-table td[data-label=""] button {
    flex-shrink: 0;
    margin: 0 !important;
  }

  /* Drag handle no mobile: vira pill inline no canto superior do card,
     sem ocupar uma "celula" inteira do grid */
  .tx-table td.tx-drag-handle{
    grid-column: 1 / -1;
    grid-row: 1;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    padding: 0 0 4px !important;
    width: auto;
    min-height: 28px;
    font-size: 18px;
    opacity: .35;
  }
  .tx-table td.tx-drag-handle::before{ content: none; }
}

  /* ── EVO FILTER BUTTONS ── */
  .evo-btn {
    padding:5px 12px; border-radius:6px; border:none; background:transparent;
    color:var(--text-muted); font-size:12px; font-weight:500; cursor:pointer;
    transition:all 0.15s; white-space:nowrap;
  }
  .evo-btn:hover { color:var(--text-primary); }
  .evo-btn.active {
    background:var(--accent); color:#fff;
    box-shadow:0 2px 8px rgba(99,102,241,0.3);
  }

  /* ── LIVE INDICATOR ── */
  .live-badge {
    display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:600;
    color:var(--green); background:rgba(16,185,129,0.08); padding:3px 8px; border-radius:6px;
  }
  .live-dot { width:6px; height:6px; background:var(--green); border-radius:50%; animation:pulse 1.5s infinite; }

  /* ── PAINEL DO AFILIADO ── */
  .aff-wallet {
    position:relative; overflow:hidden;
    background:
      radial-gradient(circle at 12% 18%, rgba(16,185,129,0.20), transparent 42%),
      radial-gradient(circle at 95% 95%, rgba(139,92,246,0.20), transparent 48%),
      linear-gradient(135deg, #0f1a2e, #0a1020);
    border:1px solid rgba(255,255,255,0.09); border-radius:22px; padding:26px 28px;
    box-shadow:0 18px 45px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.05);
  }
  .aff-wallet::before {
    content:''; position:absolute; top:0; left:0; right:0; height:3px;
    background:linear-gradient(90deg, var(--green), var(--accent2));
  }
  .aff-wallet::after {
    content:''; position:absolute; right:-60px; top:-60px; width:220px; height:220px;
    background:radial-gradient(circle, rgba(139,92,246,0.16), transparent 70%);
    pointer-events:none;
  }
  .aff-wallet-pix {
    display:inline-flex; align-items:center;
    font-size:11px; font-weight:700; color:var(--green); letter-spacing:.3px;
    background:rgba(16,185,129,0.12); border:1px solid rgba(16,185,129,0.28);
    border-radius:20px; padding:4px 10px; white-space:nowrap;
  }
  .aff-wallet-body { display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap; position:relative; z-index:1; }
  .aff-wallet-info { flex:1; min-width:160px; }
  .aff-wallet-labelrow { display:flex; align-items:center; gap:10px; }
  .aff-wallet-label { font-size:12px; color:var(--text-muted); text-transform:uppercase; letter-spacing:1px; font-weight:600; }
  .aff-wallet-value { font-size:44px; font-weight:800; color:var(--green); letter-spacing:-1.5px; line-height:1.02; margin:5px 0; text-shadow:0 2px 24px rgba(16,185,129,0.32); }
  .aff-wallet-sub { font-size:12px; color:var(--text-muted); }
  .aff-wallet-sub b { color:var(--text-secondary); }
  .aff-wallet-cta { display:flex; flex-direction:column; align-items:center; gap:8px; }
  .aff-wallet-cta-sub { font-size:11px; color:var(--text-muted); }
  .aff-wallet-btn {
    background:linear-gradient(135deg, #10b981, #059669); color:#02261a; border:none; border-radius:13px;
    padding:14px 32px; font-size:15px; font-weight:800; cursor:pointer; white-space:nowrap;
    transition:transform .12s, box-shadow .12s, filter .12s; box-shadow:0 8px 22px rgba(16,185,129,0.35);
  }
  .aff-wallet-btn:hover { transform:translateY(-2px); box-shadow:0 12px 28px rgba(16,185,129,0.45); filter:brightness(1.05); }

  .aff-link-card {
    margin-top:14px; background:var(--card-bg,var(--glass)); border:1px solid var(--glass-border);
    border-radius:16px; padding:18px 20px;
  }
  .aff-link-caption { font-size:12px; color:var(--text-muted); text-transform:uppercase; letter-spacing:.8px; font-weight:600; margin-bottom:10px; }
  .aff-link-row { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
  .aff-link-url {
    flex:1; min-width:180px; font-size:14px; font-weight:600; color:var(--accent2); word-break:break-all;
    background:rgba(99,102,241,0.08); border:1px dashed rgba(99,102,241,0.35);
    border-radius:10px; padding:11px 14px;
  }
  .aff-link-actions { display:flex; gap:8px; flex-wrap:wrap; }
  .aff-btn {
    border:none; border-radius:10px; padding:11px 18px; font-size:13px; font-weight:700;
    cursor:pointer; white-space:nowrap; transition:transform .12s, filter .12s;
  }
  .aff-btn:hover { transform:translateY(-1px); }
  .aff-btn-copy { background:var(--glass); color:var(--text-primary); border:1px solid var(--glass-border); }
  .aff-btn-copy:hover { border-color:var(--border-hover); }
  .aff-btn-share { background:#25D366; color:#062b16; }
  .aff-btn-share:hover { filter:brightness(1.06); }
  .aff-link-meta { font-size:12px; color:var(--text-muted); margin-top:12px; }
  .aff-link-meta b { color:var(--text-secondary); }
  .aff-kpis { margin-top:16px; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); }
  @media (max-width:768px) {
    .aff-wallet { padding:18px 18px 20px; gap:18px; }
    .aff-wallet-value { font-size:36px; }
    .aff-wallet-cta { width:100%; }
    .aff-wallet-btn { width:100%; }
  }
  html.light .aff-wallet {
    background:
      radial-gradient(circle at 12% 18%, rgba(16,185,129,0.14), transparent 42%),
      radial-gradient(circle at 95% 95%, rgba(139,92,246,0.12), transparent 48%),
      linear-gradient(135deg, #ffffff, #f3f6fb) !important;
    border:1px solid #e5e7eb !important;
    box-shadow:0 12px 32px rgba(99,102,241,0.08), inset 0 1px 0 rgba(255,255,255,0.6) !important;
  }
  html.light .aff-link-card { background:#ffffff !important; border:1px solid #e5e7eb !important; }
  html.light .aff-link-caption, html.light .aff-link-meta { color:#64748b !important; }
  html.light .aff-link-meta b, html.light .aff-wallet-sub b { color:#0f172a !important; }
  html.light .aff-btn-copy { background:#ffffff !important; border:1px solid #e5e7eb !important; color:#475569 !important; }
  html.light .aff-btn-copy:hover { background:#f8fafc !important; color:#0f172a !important; }

  /* ── CALCULADORA ── */
  .calc-panel { display:none; }
  .calc-panel.active { display:block; }
  .sb-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
  @media (max-width:900px){ .sb-grid{ grid-template-columns:1fr; } }
  .sb-casa { background:var(--bg-card); border:1px solid var(--glass-border); border-radius:16px; padding:18px; }
  .sb-casa-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
  .sb-casa-title { font-size:14px; font-weight:700; color:var(--text-primary); }
  .sb-casa .form-group { margin-bottom:12px; }
  .sb-casa .form-label { margin-bottom:5px; }
  .sb-row { display:flex; gap:10px; flex-wrap:wrap; }
  .sb-row .form-group { flex:1; min-width:90px; }
  .sb-freebet { display:flex; align-items:center; gap:8px; font-size:13px; color:var(--text-secondary); cursor:pointer; margin-bottom:4px; user-select:none; }
  .sb-freebet input { width:16px; height:16px; accent-color:var(--accent); cursor:pointer; }
  .sb-tipo { display:flex; gap:6px; margin-bottom:12px; }
  .sb-tipo-btn { flex:1; border:1px solid var(--glass-border); background:var(--glass); color:var(--text-secondary); border-radius:9px; padding:8px; font-size:13px; font-weight:700; cursor:pointer; transition:all .15s; }
  .sb-tipo-btn:hover { color:var(--text-primary); }
  .sb-tipo-btn.active-back { background:var(--accent); color:#fff; border-color:transparent; }
  .sb-tipo-btn.active-lay { background:var(--yellow); color:#3a2606; border-color:transparent; }
  .sb-real { font-size:11px; color:var(--accent2); font-weight:700; margin-top:5px; }
  .sb-hint-q { font-size:10px; color:var(--text-muted); font-weight:500; text-transform:none; letter-spacing:0; cursor:help; border-bottom:1px dotted var(--text-muted); }
  .sb-actions { display:flex; gap:10px; flex-wrap:wrap; margin-top:16px; }
  .calc-tips p { font-size:13px; color:var(--text-secondary); line-height:1.6; margin:0 0 12px; }
  .calc-tips ol { margin:0 0 14px; padding-left:20px; }
  .calc-tips ol li { font-size:13px; color:var(--text-secondary); line-height:1.6; margin-bottom:7px; }
  .calc-tips ol li b, .calc-tips p b { color:var(--text-primary); }
  .calc-tips-gloss { border-top:1px solid var(--glass-border); padding-top:12px; }
  .calc-tips-gloss .gl { font-size:12.5px; color:var(--text-secondary); line-height:1.55; margin-bottom:6px; }
  .calc-tips-gloss .gl b { color:var(--accent2); }
  html.light .calc-tips p, html.light .calc-tips ol li, html.light .calc-tips-gloss .gl { color:#475569 !important; }
  html.light .calc-tips ol li b, html.light .calc-tips p b { color:#0f172a !important; }

  /* ── ANOTAÇÕES ── */
  .notes-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:16px; align-items:start; }
  .note-card { background:var(--bg-card); border:1px solid var(--glass-border); border-radius:16px; padding:16px; display:flex; flex-direction:column; transition:border-color .15s; }
  .note-card:hover { border-color:var(--border-hover); }
  .note-head { display:flex; align-items:center; gap:8px; margin-bottom:8px; }
  .note-title { flex:1; background:transparent; border:none; outline:none; color:var(--text-primary); font-size:15px; font-weight:700; padding:2px 0; }
  .note-title::placeholder { color:var(--text-muted); }
  .note-del { background:none; border:none; color:var(--text-muted); cursor:pointer; font-size:15px; padding:2px 4px; border-radius:6px; flex:none; }
  .note-del:hover { color:var(--red); background:rgba(244,63,94,0.1); }
  .note-body { width:100%; min-height:110px; resize:vertical; background:var(--bg-secondary); border:1px solid var(--glass-border); border-radius:10px; padding:10px 12px; color:var(--text-secondary); font-size:13.5px; line-height:1.55; outline:none; font-family:inherit; transition:border 0.2s; }
  .note-body:focus { border-color:var(--accent); box-shadow:0 0 0 3px rgba(99,102,241,0.15); }
  .note-body::placeholder { color:var(--text-muted); }
  .note-date { font-size:11px; color:var(--text-muted); margin-top:8px; }
  .notes-empty { text-align:center; padding:50px 20px; }
  html.light .note-card { background:#ffffff !important; border:1px solid #e5e7eb !important; }
  html.light .note-title { color:#0f172a !important; }
  html.light .note-body { background:#f8fafc !important; border:1px solid #e5e7eb !important; color:#334155 !important; }
  .sb-resp { display:flex; align-items:center; justify-content:space-between; font-size:12px; color:var(--text-secondary); margin-bottom:12px; padding:8px 12px; background:var(--glass); border:1px solid var(--glass-border); border-radius:9px; }
  .sb-resp b { color:var(--yellow); font-weight:800; }
  .sb-result { margin-top:8px; border-top:1px solid var(--glass-border); padding-top:10px; }
  .sb-result-line { display:flex; align-items:center; justify-content:space-between; font-size:13px; padding:4px 0; }
  .sb-result-line .lbl { color:var(--text-secondary); }
  .sb-result-line .val { font-weight:700; color:var(--text-primary); }
  .sb-fixar {
    width:100%; margin-top:12px; border:1px solid var(--glass-border); background:var(--glass);
    color:var(--text-secondary); border-radius:10px; padding:11px; font-size:13px; font-weight:700;
    cursor:pointer; transition:all .15s;
  }
  .sb-fixar:hover { border-color:var(--border-hover); color:var(--text-primary); }
  .sb-fixar.active { background:linear-gradient(135deg,var(--accent),var(--accent2)); color:#fff; border-color:transparent; }
  .pd-bet { background:var(--bg-secondary); border:1px solid var(--glass-border); border-radius:12px; padding:14px; margin-bottom:10px; }
  .pd-bet-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:10px; font-size:13px; font-weight:700; color:var(--text-primary); }
  .pd-del { background:none; border:none; color:var(--text-muted); cursor:pointer; font-size:15px; padding:0 4px; }
  .pd-del:hover { color:var(--red); }
  html.light .sb-casa { background:#ffffff !important; border:1px solid #e5e7eb !important; }
  html.light .sb-casa-title, html.light .sb-result-line .val { color:#0f172a !important; }
  html.light .sb-result-line .lbl, html.light .sb-freebet { color:#64748b !important; }
  html.light .pd-bet { background:#f8fafc !important; border:1px solid #e5e7eb !important; }
  html.light .pd-bet-head { color:#0f172a !important; }
  html.light .sb-fixar { background:#ffffff !important; border:1px solid #e5e7eb !important; color:#475569 !important; }
  html.light .sb-fixar.active { background:linear-gradient(135deg,#6366f1,#8b5cf6) !important; color:#fff !important; border-color:transparent !important; }
  html.light .sb-tipo-btn { background:#ffffff !important; border:1px solid #e5e7eb !important; color:#475569 !important; }
  html.light .sb-tipo-btn.active-back { background:#6366f1 !important; color:#fff !important; border-color:transparent !important; }
  html.light .sb-tipo-btn.active-lay { background:#f59e0b !important; color:#3a2606 !important; border-color:transparent !important; }
  html.light .sb-resp { background:#f8fafc !important; border:1px solid #e5e7eb !important; color:#64748b !important; }

  /* Tour / Passo-a-passo */
  .tour-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:9000;pointer-events:auto}
  .tour-spotlight{position:fixed;border-radius:14px;box-shadow:0 0 0 9999px rgba(0,0,0,.55),0 0 0 2.5px #7c5cff,0 0 36px rgba(124,92,255,.7);z-index:9001;pointer-events:none;transition:all .35s cubic-bezier(.4,0,.2,1)}
  .tour-tooltip{position:fixed;width:340px;background:linear-gradient(160deg,#1a2138,#0e1226);border:1px solid rgba(124,92,255,.30);border-radius:14px;padding:22px 22px 18px;z-index:9002;box-shadow:0 24px 60px rgba(0,0,0,.5),0 0 0 1px rgba(124,92,255,.15);color:#fff;font-family:inherit;transition:left .35s cubic-bezier(.4,0,.2,1),top .35s cubic-bezier(.4,0,.2,1),opacity .25s}
  .tour-tooltip-tag{display:inline-flex;align-items:center;gap:10px;font-size:11px;font-weight:800;color:#a282ff;letter-spacing:1.5px;text-transform:uppercase;margin-bottom:14px}
  .tour-tooltip-tag::before{content:"";width:24px;height:2.5px;background:linear-gradient(90deg,#7c5cff,#a282ff);border-radius:2px}
  .tour-tooltip-close{position:absolute;top:14px;right:14px;width:28px;height:28px;border-radius:50%;background:rgba(255,255,255,.06);color:#fff;border:0;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:16px;line-height:1;transition:background .15s;padding:0}
  .tour-tooltip-close:hover{background:rgba(255,255,255,.14)}
  .tour-tooltip h4{font-size:18px;font-weight:800;margin:0 0 10px;letter-spacing:-.3px;color:#fff}
  .tour-tooltip p{font-size:13.5px;color:#aeb8d6;line-height:1.55;margin:0 0 20px}
  .tour-tooltip-actions{display:flex;justify-content:space-between;align-items:center;gap:12px}
  .tour-btn{padding:9px 20px;border-radius:9px;font-size:13px;font-weight:700;cursor:pointer;display:inline-flex;align-items:center;gap:6px;transition:transform .15s,box-shadow .15s,background .15s;font-family:inherit;border:0}
  .tour-btn-exit{background:transparent;color:#a282ff;border:1px solid rgba(124,92,255,.45)}
  .tour-btn-exit:hover{background:rgba(124,92,255,.12)}
  .tour-btn-next{background:linear-gradient(135deg,#6d78ff,#9a5cff);color:#fff;box-shadow:0 6px 16px rgba(124,92,255,.35)}
  .tour-btn-next:hover{transform:translateY(-1px);box-shadow:0 10px 22px rgba(124,92,255,.50)}
  .tour-progress{position:absolute;left:22px;right:22px;top:0;height:3px;background:rgba(124,92,255,.18);border-radius:0 0 14px 14px;overflow:hidden}
  .tour-progress-bar{height:100%;background:linear-gradient(90deg,#7c5cff,#a282ff);transition:width .4s ease-out}
  @media (max-width:560px){
    .tour-tooltip{width:calc(100vw - 32px);left:16px!important;right:16px}
  }

  /* ═══ RANKING ═══ */
  #sec-ranking{position:relative}
  #sec-ranking > .page-header{margin-bottom:28px}

  /* Top card "Ranking de apostadores" */
  .rank-top-card{position:relative;background:linear-gradient(160deg,rgba(124,92,255,.05) 0%,rgba(15,20,40,.6) 60%,rgba(10,14,29,.8) 100%);border:1px solid rgba(124,92,255,.12);border-radius:20px;padding:26px 30px;margin-bottom:42px;overflow:hidden}
  .rank-top-card::before{content:"";position:absolute;inset:-1px;border-radius:20px;padding:1px;background:linear-gradient(135deg,rgba(124,92,255,.4),transparent 50%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}
  .rank-top-head{display:flex;align-items:center;gap:16px;margin-bottom:22px;position:relative}
  .rank-top-icon{width:48px;height:48px;border-radius:14px;background:linear-gradient(135deg,rgba(124,92,255,.18),rgba(162,130,255,.06));border:1px solid rgba(124,92,255,.3);display:flex;align-items:center;justify-content:center;color:#c4b5fd;box-shadow:0 8px 24px rgba(124,92,255,.18),inset 0 1px 0 rgba(255,255,255,.08)}
  .rank-top-title{font-size:19px;font-weight:800;color:#fff;letter-spacing:-.3px}
  .rank-top-sub{font-size:13px;color:#aeb8d6;margin-top:3px}
  .rank-top-empty{padding:54px 24px;text-align:center;background:radial-gradient(ellipse at center,rgba(124,92,255,.04),transparent 70%);border:1px dashed rgba(124,92,255,.14);border-radius:16px;position:relative}
  .rank-empty-title{font-size:17px;font-weight:700;color:#cdd5ea;margin-bottom:6px;letter-spacing:-.2px}
  .rank-empty-sub{font-size:13px;color:#7d87a4}
  .rank-empty-sub b{color:#a282ff}
  .rank-top-meta{font-size:11.5px;font-weight:700;color:#7d87a4;letter-spacing:.4px;background:rgba(255,255,255,.03);padding:6px 12px;border-radius:8px;border:1px solid rgba(255,255,255,.05);white-space:nowrap}
  .rank-top-meta b{color:#a282ff;font-weight:800}

  /* ═══ CHAMPION BANNER ═══ */
  .rank-champion{position:relative;display:flex;align-items:center;gap:20px;margin-bottom:24px;padding:22px 28px;background:linear-gradient(135deg,rgba(250,204,21,.14) 0%,rgba(251,146,60,.08) 50%,rgba(15,20,40,.7) 100%);border:1px solid rgba(250,204,21,.32);border-radius:18px;overflow:hidden;cursor:default}
  .rank-champion::before{content:"";position:absolute;inset:-1px;border-radius:18px;padding:1px;background:linear-gradient(135deg,rgba(250,204,21,.55),transparent 60%,rgba(251,146,60,.3));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}
  .rank-champion::after{content:"";position:absolute;right:-40px;top:50%;transform:translateY(-50%);width:240px;height:240px;background:radial-gradient(circle,rgba(250,204,21,.2),transparent 65%);pointer-events:none;animation:championGlow 4s ease-in-out infinite}
  @keyframes championGlow{0%,100%{opacity:.4}50%{opacity:.8}}
  .rank-champion-crown{font-size:46px;line-height:1;flex-shrink:0;filter:drop-shadow(0 4px 10px rgba(250,204,21,.55));animation:championCrown 3s ease-in-out infinite}
  @keyframes championCrown{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-3px) rotate(2deg)}}
  .rank-champion-content{flex:1;min-width:0;position:relative;z-index:1}
  .rank-champion-label{font-size:10.5px;font-weight:800;color:#fde047;letter-spacing:2.4px;margin-bottom:6px;text-transform:uppercase}
  .rank-champion-name{font-size:24px;font-weight:800;color:#fff;letter-spacing:-.5px;line-height:1.15;margin-bottom:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .rank-champion-profit{font-size:13px;color:#fbbf24;font-weight:700}
  .rank-champion-profit span{color:#fff;font-weight:800}
  .rank-champion-tier{position:relative;z-index:1;flex-shrink:0}
  .rank-champion-tier .rank-shield{width:54px;height:64px}

  /* ═══ SEASON HEADER + TABS ═══ */
  .rank-season{background:linear-gradient(160deg,rgba(15,20,40,.7) 0%,rgba(10,14,29,.85) 100%);border:1px solid rgba(124,92,255,.12);border-radius:18px;padding:22px 26px;margin-bottom:22px}
  .rank-season-head{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:18px;flex-wrap:wrap}
  .rank-season-title{font-size:11px;font-weight:800;color:#a282ff;letter-spacing:2px;text-transform:uppercase;margin-bottom:6px}
  .rank-season-sub{font-size:15px;font-weight:700;color:#fff;letter-spacing:-.2px}
  .rank-season-meta{font-size:11.5px;font-weight:700;color:#7d87a4;letter-spacing:.4px;background:rgba(124,92,255,.08);padding:7px 14px;border-radius:8px;border:1px solid rgba(124,92,255,.18);white-space:nowrap}
  .rank-season-meta b{color:#a282ff;font-weight:800}
  .rank-period-tabs{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;background:rgba(255,255,255,.025);padding:4px;border-radius:11px;border:1px solid rgba(255,255,255,.05)}
  .rank-period-tab{display:flex;align-items:center;justify-content:center;gap:6px;padding:9px 14px;background:transparent;border:0;border-radius:8px;font-size:12.5px;font-weight:700;color:#7d87a4;cursor:pointer;font-family:inherit;letter-spacing:.2px;transition:all .2s;white-space:nowrap}
  .rank-period-tab:hover{color:#cdd5ea;background:rgba(255,255,255,.02)}
  .rank-period-tab.is-active{background:linear-gradient(135deg,rgba(124,92,255,.22),rgba(162,130,255,.10));color:#fff;box-shadow:0 4px 10px rgba(124,92,255,.18),inset 0 1px 0 rgba(255,255,255,.04)}
  .rank-period-tab.is-soon::after{content:"em breve";display:inline-block;font-size:8.5px;font-weight:800;color:#fbbf24;background:rgba(245,158,11,.16);padding:1.5px 5px;border-radius:4px;margin-left:6px;letter-spacing:.7px;vertical-align:middle}

  /* ═══ SUA POSIÇÃO HERO CARD ═══ */
  .rank-mypos{position:relative;background:linear-gradient(135deg,rgba(124,92,255,.18) 0%,rgba(162,130,255,.06) 50%,rgba(15,20,40,.8) 100%);border:1px solid rgba(124,92,255,.28);border-radius:16px;padding:16px 22px;margin-bottom:22px;overflow:hidden}
  .rank-mypos::before{content:"";position:absolute;inset:-1px;border-radius:16px;padding:1px;background:linear-gradient(135deg,rgba(124,92,255,.6),transparent 50%,rgba(162,130,255,.4));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}
  .rank-mypos::after{content:"";position:absolute;right:-80px;top:-40px;width:240px;height:240px;background:radial-gradient(circle,rgba(124,92,255,.15),transparent 60%);pointer-events:none}
  .rank-mypos-head{display:flex;align-items:center;gap:20px;margin-bottom:12px;position:relative;z-index:1}
  .rank-mypos-pos{flex-shrink:0;text-align:center;min-width:90px}
  .rank-mypos-label{font-size:9.5px;font-weight:800;color:#a282ff;letter-spacing:1.6px;margin-bottom:2px;text-transform:uppercase}
  .rank-mypos-num{font-size:38px;font-weight:900;color:#fff;letter-spacing:-2px;line-height:.95;font-family:"Plus Jakarta Sans",sans-serif;background:linear-gradient(135deg,#fff,#c4b5fd);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;filter:drop-shadow(0 3px 8px rgba(124,92,255,.35))}
  .rank-mypos-delta{font-size:10.5px;font-weight:800;letter-spacing:.8px;margin-top:2px}
  .rank-mypos-delta.is-up{color:#10b981}
  .rank-mypos-delta.is-down{color:#f43f5e}
  .rank-mypos-delta.is-same{color:#7d87a4}
  .rank-mypos-info{flex:1;min-width:0}
  .rank-mypos-name-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:4px}
  .rank-mypos-name{font-size:18px;font-weight:800;color:#fff;letter-spacing:-.3px;line-height:1.1;overflow:hidden;text-overflow:ellipsis;max-width:240px;white-space:nowrap}
  .rank-mypos-tier-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
  .rank-mypos-tier-row .rank-shield{width:18px;height:22px}
  .rank-mypos-tier-name{font-size:12px;font-weight:700;color:#cdd5ea;letter-spacing:.2px}
  .rank-mypos-profit{font-size:13px;font-weight:800;color:#a282ff;letter-spacing:-.2px;margin-left:auto;padding:3px 10px;background:rgba(124,92,255,.12);border:1px solid rgba(124,92,255,.22);border-radius:6px}
  .rank-mypos-progress{position:relative;z-index:1}
  .rank-mypos-progress-text{font-size:12px;color:#aeb8d6;line-height:1.4;margin-bottom:7px}
  .rank-mypos-progress-text b{color:#fff;font-weight:800}
  .rank-mypos-progress-text .ahead{color:#fbbf24;font-weight:700}
  .rank-mypos-progress-bar{height:7px;background:rgba(255,255,255,.05);border-radius:99px;overflow:hidden;border:1px solid rgba(255,255,255,.04);position:relative}
  .rank-mypos-progress-fill{height:100%;background:linear-gradient(90deg,#7c5cff,#a282ff,#c4b5fd);border-radius:99px;transition:width 1s cubic-bezier(.4,0,.2,1);box-shadow:0 0 14px rgba(124,92,255,.55),inset 0 1px 0 rgba(255,255,255,.25);position:relative}
  .rank-mypos-progress-fill::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.4),transparent);animation:rankMyPosShine 2.5s ease-in-out infinite}
  @keyframes rankMyPosShine{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}
  .rank-mypos.is-top{background:linear-gradient(135deg,rgba(250,204,21,.16) 0%,rgba(251,146,60,.06) 50%,rgba(15,20,40,.8) 100%);border-color:rgba(250,204,21,.32)}
  .rank-mypos.is-top .rank-mypos-num{background:linear-gradient(135deg,#fef3c7,#fbbf24);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;filter:drop-shadow(0 4px 12px rgba(250,204,21,.5))}
  .rank-mypos.is-top .rank-mypos-progress-fill{background:linear-gradient(90deg,#fbbf24,#fde047,#fef3c7)}
  .rank-mypos.is-locked{background:linear-gradient(135deg,rgba(124,92,255,.08),rgba(15,20,40,.6));border-color:rgba(124,92,255,.15)}

  /* ═══ PÓDIO TOP 3 ═══ */
  .rank-podium{display:grid;grid-template-columns:1fr 1.15fr 1fr;gap:14px;align-items:end;margin-bottom:26px;padding:24px 16px 12px;background:radial-gradient(ellipse at 50% 100%,rgba(124,92,255,.10),transparent 65%);position:relative}
  .rank-podium-slot{position:relative;background:linear-gradient(160deg,rgba(15,20,40,.85) 0%,rgba(10,14,29,.95) 100%);border:1px solid rgba(255,255,255,.06);border-radius:16px;padding:18px 14px 16px;text-align:center;cursor:default;transition:transform .25s,box-shadow .25s;overflow:hidden}
  .rank-podium-slot:hover{transform:translateY(-3px)}
  .rank-podium-medal{width:60px;height:80px;margin:0 auto 4px;display:flex;align-items:center;justify-content:center;filter:drop-shadow(0 8px 20px rgba(0,0,0,.5))}
  .rank-podium-medal svg,.rank-podium-medal img,.rank-medal-img{width:100%;height:100%;display:block;object-fit:contain;pointer-events:none;user-select:none}
  /* Avatar grande no topo do card pódio (no lugar da medalha) */
  .rank-podium-avatar{width:72px;height:72px;border-radius:50%;background:linear-gradient(135deg,#1f2748,#0e1226);display:flex;align-items:center;justify-content:center;font-size:24px;font-weight:800;color:#fff;border:2.5px solid rgba(255,255,255,.1);margin:0 auto 8px;box-shadow:0 8px 20px rgba(0,0,0,.4);overflow:hidden;position:relative;font-family:"Plus Jakarta Sans",sans-serif}
  .rank-podium-avatar img{width:100%;height:100%;object-fit:cover;display:block}
  /* Medalha pequena no canto do card */
  .rank-podium-medal-corner{position:absolute;top:10px;right:10px;width:30px;height:40px;pointer-events:none;filter:drop-shadow(0 4px 8px rgba(0,0,0,.5));z-index:2}
  .rank-podium-medal-corner img,.rank-podium-medal-corner svg{width:100%;height:100%;display:block;object-fit:contain}
  /* Imagens de rank (PNG premium) — ajustam pra qualquer container existente */
  .rank-shield-img,.rank-shield img{width:100%;height:100%;display:block;object-fit:contain;pointer-events:none;user-select:none;filter:drop-shadow(0 4px 10px rgba(0,0,0,.4))}
  .rank-tier-icon img{width:100%;height:100%;display:block;object-fit:contain;filter:drop-shadow(0 3px 8px rgba(0,0,0,.5))}
  .rank-podium-rank{font-size:10px;font-weight:800;letter-spacing:1.5px;margin-bottom:8px}
  .rank-podium-shield{margin:0 auto 10px}
  .rank-podium-name{font-size:14px;font-weight:800;color:#fff;letter-spacing:-.2px;margin-bottom:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .rank-podium-tier-name{font-size:11px;font-weight:700;letter-spacing:.4px;margin-bottom:8px}
  .rank-podium-profit{font-size:14px;font-weight:800;color:#fff;letter-spacing:-.3px;font-variant-numeric:tabular-nums}
  .rank-podium-pro{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;margin-left:6px;vertical-align:middle}
  .rank-podium-pro svg{width:100%;height:100%}
  /* 1º lugar — central, maior, dourado */
  .rank-podium-1{padding:24px 16px 18px;background:linear-gradient(160deg,rgba(250,204,21,.18) 0%,rgba(251,146,60,.08) 50%,rgba(10,14,29,.92) 100%);border:1.5px solid rgba(250,204,21,.7);box-shadow:0 0 0 1px rgba(250,204,21,.4) inset,0 14px 36px rgba(250,204,21,.28),0 0 32px rgba(250,204,21,.22)}
  .rank-podium-1::before{content:"";position:absolute;top:-60px;left:50%;transform:translateX(-50%);width:180px;height:180px;background:radial-gradient(circle,rgba(250,204,21,.4),transparent 65%);pointer-events:none;animation:championGlow 3s ease-in-out infinite;z-index:0}
  .rank-podium-1 .rank-podium-medal{width:64px;height:88px;animation:podiumMedal1 3s ease-in-out infinite}
  @keyframes podiumMedal1{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-3px) rotate(3deg)}}
  .rank-podium-1 .rank-podium-rank{color:#fde047;font-size:11.5px;font-weight:900}
  .rank-podium-1 .rank-podium-avatar{width:84px;height:84px;border:3px solid rgba(250,204,21,.9);box-shadow:0 0 0 2px rgba(250,204,21,.35),0 8px 24px rgba(250,204,21,.45),0 0 36px rgba(250,204,21,.5),inset 0 1px 0 rgba(255,255,255,.1);font-size:28px;animation:podium1AvatarPulse 3s ease-in-out infinite}
  @keyframes podium1AvatarPulse{0%,100%{box-shadow:0 0 0 2px rgba(250,204,21,.35),0 8px 24px rgba(250,204,21,.45),0 0 36px rgba(250,204,21,.5),inset 0 1px 0 rgba(255,255,255,.1)}50%{box-shadow:0 0 0 2px rgba(250,204,21,.5),0 10px 28px rgba(250,204,21,.6),0 0 48px rgba(250,204,21,.65),inset 0 1px 0 rgba(255,255,255,.15)}}
  .rank-podium-1 .rank-podium-medal-corner{width:38px;height:50px;top:12px;right:12px}
  .rank-podium-1 .rank-podium-shield{width:54px;height:62px}
  .rank-podium-1 .rank-podium-name{font-size:16px;color:#fff}
  .rank-podium-1 .rank-podium-tier-name{color:#fde047}
  .rank-podium-1 .rank-podium-profit{font-size:16px;color:#fbbf24}
  /* 2º lugar — PRATA vibrante */
  .rank-podium-2{background:linear-gradient(160deg,rgba(203,213,225,.14) 0%,rgba(15,20,40,.85) 60%);border:1.5px solid rgba(203,213,225,.55);box-shadow:0 0 0 1px rgba(203,213,225,.25) inset,0 10px 26px rgba(203,213,225,.18),0 0 22px rgba(203,213,225,.15)}
  .rank-podium-2 .rank-podium-rank{color:#e2e8f0}
  .rank-podium-2 .rank-podium-avatar{border-color:rgba(203,213,225,.75);box-shadow:0 0 0 1.5px rgba(203,213,225,.32),0 6px 18px rgba(203,213,225,.3),0 0 22px rgba(203,213,225,.25)}
  .rank-podium-2 .rank-podium-shield{width:48px;height:56px}
  .rank-podium-2 .rank-podium-tier-name{color:#cbd5e1}
  /* 3º lugar — BRONZE/cobre vibrante */
  .rank-podium-3{background:linear-gradient(160deg,rgba(205,127,50,.14) 0%,rgba(15,20,40,.85) 60%);border:1.5px solid rgba(230,147,74,.6);box-shadow:0 0 0 1px rgba(205,127,50,.28) inset,0 10px 26px rgba(205,127,50,.22),0 0 22px rgba(205,127,50,.18)}
  .rank-podium-3 .rank-podium-rank{color:#fdba74}
  .rank-podium-3 .rank-podium-avatar{border-color:rgba(230,147,74,.8);box-shadow:0 0 0 1.5px rgba(205,127,50,.35),0 6px 18px rgba(205,127,50,.35),0 0 22px rgba(205,127,50,.3)}
  .rank-podium-3 .rank-podium-shield{width:48px;height:56px}
  .rank-podium-3 .rank-podium-tier-name{color:#e6934a}
  /* Highlight quando o user é um dos 3 */
  .rank-podium-slot.is-you{box-shadow:0 0 0 2px rgba(124,92,255,.5),0 12px 32px rgba(124,92,255,.25)}
  .rank-podium-slot.is-you{box-shadow:0 0 0 2px rgba(124,92,255,.5),0 12px 32px rgba(124,92,255,.25)}

  /* ═══ LISTA #4 EM DIANTE ═══ */
  .rank-list{background:linear-gradient(160deg,rgba(15,20,40,.7) 0%,rgba(10,14,29,.85) 100%);border:1px solid rgba(255,255,255,.05);border-radius:18px;padding:20px 22px;overflow:hidden}
  .rank-list-head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:14px;padding-bottom:14px;border-bottom:1px solid rgba(255,255,255,.04);flex-wrap:wrap}
  .rank-list-title{font-size:12px;font-weight:800;color:#a282ff;letter-spacing:1.8px;text-transform:uppercase}
  .rank-list-foot-inline{font-size:11.5px;color:#7d87a4}
  .rank-list-foot-inline b{color:#a282ff;font-weight:800}

  /* Position change deltas em itens da lista */
  .rank-row-delta{display:inline-flex;align-items:center;gap:2px;font-size:9.5px;font-weight:800;letter-spacing:.5px;padding:2px 5px;border-radius:4px;margin-left:8px;vertical-align:middle}
  .rank-row-delta.is-up{color:#10b981;background:rgba(16,185,129,.12)}
  .rank-row-delta.is-down{color:#f43f5e;background:rgba(244,63,94,.12)}
  .rank-row-delta.is-same{color:#7d87a4;background:rgba(255,255,255,.04)}

  @media (max-width:780px){
    /* Pódio mantém 3 colunas em mobile, mas tudo proporcional/compacto */
    .rank-podium{grid-template-columns:1fr 1.18fr 1fr;gap:8px;padding:18px 6px 8px}
    .rank-podium-slot{padding:12px 6px 12px}
    .rank-podium-medal{width:38px;height:52px;margin:0 auto 3px}
    .rank-podium-1 .rank-podium-medal{width:46px;height:62px}
    .rank-podium-avatar{width:54px;height:54px;font-size:18px;border-width:2px;margin:0 auto 5px}
    .rank-podium-1 .rank-podium-avatar{width:62px;height:62px;font-size:21px;border-width:2.5px}
    .rank-podium-medal-corner{width:24px;height:32px;top:7px;right:7px}
    .rank-podium-1 .rank-podium-medal-corner{width:28px;height:38px;top:8px;right:8px}
    .rank-podium-rank{font-size:8.5px;letter-spacing:1px;margin-bottom:5px}
    .rank-podium-shield{margin:0 auto 6px}
    .rank-podium-1{padding:16px 6px 14px}
    .rank-podium-1 .rank-podium-shield{width:44px;height:50px}
    .rank-podium-2 .rank-podium-shield,.rank-podium-3 .rank-podium-shield{width:36px;height:42px}
    .rank-podium-name{font-size:10.5px;line-height:1.15;margin-bottom:2px;letter-spacing:-.2px}
    .rank-podium-1 .rank-podium-name{font-size:12px}
    .rank-podium-tier-name{font-size:8.5px;letter-spacing:.2px;margin-bottom:4px}
    .rank-podium-profit{font-size:11px;letter-spacing:-.2px}
    .rank-podium-1 .rank-podium-profit{font-size:12.5px}
    .rank-podium-pro{width:14px;height:14px;margin-left:3px}
    .rank-podium-slot.is-you::after{font-size:7.5px;padding:2px 5px;top:5px;right:5px;letter-spacing:1px}
  }
  @media (max-width:420px){
    .rank-podium{gap:5px;padding:14px 4px 6px}
    .rank-podium-slot{padding:10px 4px 10px;border-radius:12px}
    .rank-podium-1{padding:14px 4px 12px}
    .rank-podium-medal{width:34px;height:48px}
    .rank-podium-1 .rank-podium-medal{width:42px;height:58px}
    .rank-podium-1 .rank-podium-shield{width:38px;height:44px}
    .rank-podium-2 .rank-podium-shield,.rank-podium-3 .rank-podium-shield{width:32px;height:38px}
    .rank-podium-name{font-size:9.5px}
    .rank-podium-1 .rank-podium-name{font-size:11px}
    .rank-podium-tier-name{font-size:8px}
    .rank-podium-profit{font-size:10px}
    .rank-podium-1 .rank-podium-profit{font-size:11.5px}
    .rank-podium-pro{width:12px;height:12px}
  }
  @media (max-width:560px){
    .rank-champion{padding:16px 18px;gap:14px;margin-bottom:18px}
    .rank-champion-crown{font-size:38px}
    .rank-champion-name{font-size:18px}
    .rank-champion-profit{font-size:12px}
    .rank-champion-tier .rank-shield{width:44px;height:52px}
    .rank-season{padding:16px 18px;margin-bottom:18px}
    .rank-season-head{margin-bottom:14px}
    .rank-season-sub{font-size:13.5px}
    .rank-season-meta{font-size:10.5px;padding:5px 10px}
    .rank-period-tab{padding:7px 6px;font-size:11px;gap:3px}
    .rank-mypos{padding:18px 18px;margin-bottom:18px}
    .rank-mypos-head{flex-direction:column;align-items:flex-start;gap:14px}
    .rank-mypos-pos{min-width:0;text-align:left}
    .rank-mypos-num{font-size:42px;letter-spacing:-2px}
    .rank-mypos-name{font-size:18px}
    .rank-mypos-tier-row{width:100%}
    .rank-mypos-profit{margin-left:auto}
    .rank-list{padding:16px 16px}
  }

  /* Leaderboard list */
  .rank-board{display:flex;flex-direction:column;gap:6px;position:relative}
  .rank-row{display:grid;grid-template-columns:54px 38px 1fr auto auto;align-items:center;gap:14px;padding:11px 16px;background:linear-gradient(160deg,rgba(255,255,255,.02),rgba(255,255,255,.005));border:1px solid rgba(255,255,255,.04);border-radius:12px;transition:transform .2s,border-color .2s,background .2s}
  .rank-row:hover{transform:translateX(2px);border-color:rgba(124,92,255,.18);background:rgba(124,92,255,.03)}
  .rank-row-pos{font-size:14px;font-weight:800;color:#7d87a4;text-align:center;letter-spacing:-.3px}
  .rank-row.is-podium-1 .rank-row-pos{color:#facc15;font-size:15px}
  .rank-row.is-podium-2 .rank-row-pos{color:#cbd5e1;font-size:15px}
  .rank-row.is-podium-3 .rank-row-pos{color:#cd7f32;font-size:15px}
  .rank-row-avatar{width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,#1f2748,#0e1226);display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:800;color:#fff;border:1.5px solid rgba(255,255,255,.08);overflow:hidden}
  /* Foto do user no avatar (RPC retornou avatar) — preenche o circulo */
  .rank-row-avatar img,
  .rank-podium-avatar img{
    width:100%;height:100%;object-fit:cover;display:block;border-radius:50%;
  }
  .rank-row-avatar img{width:100%;height:100%;object-fit:cover}
  .rank-row-name{font-size:14px;font-weight:700;color:#fff;letter-spacing:-.2px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .rank-row .rank-row-name b,.rank-board-foot .rank-row .rank-row-name b{display:inline-block;font-size:10.5px;font-weight:800;color:#fff;background:linear-gradient(135deg,#7c5cff,#a282ff);padding:3px 10px;border-radius:6px;margin-left:10px;letter-spacing:1.4px;vertical-align:middle;text-transform:uppercase;line-height:1.4;white-space:nowrap;box-shadow:0 2px 8px rgba(124,92,255,.4),inset 0 1px 0 rgba(255,255,255,.15);font-family:"Plus Jakarta Sans","Segoe UI",sans-serif}
  /* Badge Pro — usuários assinantes (estilo verificado azul) */
  .rank-pro-badge{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;margin-left:8px;vertical-align:middle;position:relative;flex-shrink:0;filter:drop-shadow(0 2px 4px rgba(29,155,240,.45))}
  .rank-pro-badge svg{width:100%;height:100%;display:block}
  .rank-pro-badge::before{content:"";position:absolute;inset:-3px;border-radius:50%;background:radial-gradient(circle,rgba(29,155,240,.45),transparent 70%);z-index:-1;animation:proPulse 2.4s ease-in-out infinite}
  @keyframes proPulse{0%,100%{opacity:.5;transform:scale(1)}50%{opacity:1;transform:scale(1.2)}}
  .rank-row.is-pro{background:linear-gradient(135deg,rgba(29,155,240,.04),rgba(124,92,255,.02));border-color:rgba(29,155,240,.14)}
  .rank-row.is-pro:hover{border-color:rgba(29,155,240,.28)}
  .rank-row-tier{display:flex;align-items:center;gap:8px}
  .rank-row-tier .rank-shield{width:22px;height:26px;flex-shrink:0}
  .rank-row-tier .rank-shield svg{filter:none}
  .rank-row-tier-name{font-size:11.5px;font-weight:700;color:#cdd5ea;letter-spacing:.3px}
  .rank-row-profit{font-size:14px;font-weight:800;color:#fff;letter-spacing:-.3px;text-align:right;font-variant-numeric:tabular-nums}
  .rank-row.is-you{background:linear-gradient(135deg,rgba(124,92,255,.12),rgba(124,92,255,.04));border-color:rgba(124,92,255,.32);box-shadow:0 8px 22px rgba(124,92,255,.08)}
  .rank-row.is-you .rank-row-profit{color:#a282ff}
  .rank-row-divider{height:10px;display:flex;align-items:center;justify-content:center;color:#5a657f;font-size:14px;letter-spacing:4px;padding:4px 0}

  .rank-board-foot{display:block;padding:14px 16px 4px;font-size:11.5px;color:#7d87a4;border-top:1px solid rgba(255,255,255,.04);margin-top:8px;line-height:1.5}
  .rank-board-foot b{color:#a282ff;font-weight:800}

  /* Preview row — mostra onde o user estaria se passasse nos critérios */
  .rank-preview-wrap{margin-top:14px;padding-top:14px;border-top:1px dashed rgba(124,92,255,.18);position:relative}
  .rank-preview-label{display:flex;align-items:center;gap:10px;font-size:10.5px;font-weight:800;color:#a282ff;letter-spacing:1.8px;margin-bottom:10px;text-transform:uppercase}
  .rank-preview-label::before{content:"";width:18px;height:2px;background:linear-gradient(90deg,#a282ff,transparent);border-radius:2px}
  .rank-row.rank-row-preview{background:linear-gradient(135deg,rgba(124,92,255,.05),rgba(255,255,255,.01));border:1px dashed rgba(124,92,255,.32);position:relative;opacity:.92}
  .rank-row.rank-row-preview::after{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:linear-gradient(180deg,#7c5cff,#a282ff);border-radius:12px 0 0 12px}
  .rank-row.rank-row-preview .rank-row-name{color:#cdd5ea}
  .rank-row.rank-row-preview .rank-row-profit{color:#a282ff}
  .rank-row.rank-row-preview .rank-row-pos{color:#a282ff}
  .rank-preview-hint{font-size:11px;color:#7d87a4;text-align:center;margin-top:10px;font-style:italic;line-height:1.5}
  .rank-preview-hint b{color:#a282ff;font-weight:700;font-style:normal}

  /* Section labels */
  .rank-section-label{font-size:11px;font-weight:700;color:#a282ff;letter-spacing:2px;margin:6px 0 14px;display:flex;align-items:center;gap:12px;text-transform:uppercase}
  .rank-section-label::before{content:"";width:22px;height:2px;background:linear-gradient(90deg,#a282ff,transparent);border-radius:2px}
  .rank-headline{font-size:44px;font-weight:400;color:#fff;letter-spacing:-2px;line-height:1.05;font-family:"Georgia","Times New Roman",serif;margin-bottom:10px}
  .rank-headline-sub{font-size:14.5px;color:#aeb8d6;max-width:580px;line-height:1.55;margin-bottom:24px}

  /* Current rank card */
  .rank-current-card{position:relative;background:linear-gradient(160deg,rgba(15,20,40,.8) 0%,rgba(10,14,29,.95) 100%);border:1px solid rgba(255,255,255,.06);border-radius:22px;padding:30px 34px;margin-bottom:46px;overflow:hidden;box-shadow:0 30px 80px -20px rgba(0,0,0,.5)}
  .rank-current-card::after{content:"";position:absolute;top:0;right:0;width:300px;height:100%;background:radial-gradient(ellipse at right center,rgba(124,92,255,.08),transparent 70%);pointer-events:none}
  .rank-current-head{display:flex;align-items:center;gap:22px;margin-bottom:26px;position:relative}
  .rank-current-info{flex:1;min-width:0}
  .rank-current-tag{font-size:10.5px;font-weight:800;color:#7d87a4;letter-spacing:1.8px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);padding:5px 12px;border-radius:6px;display:inline-block;margin-bottom:10px}
  .rank-current-tag b{color:#a282ff;font-weight:800}
  .rank-current-name{font-size:46px;font-weight:300;color:#fff;letter-spacing:-1.5px;font-family:"Georgia","Times New Roman",serif;line-height:1;margin-bottom:6px}
  .rank-current-meta{font-size:12.5px;color:#7d87a4}
  .rank-current-meta b{color:#cdd5ea;font-weight:700}

  .rank-progress-row{display:flex;justify-content:space-between;align-items:center;font-size:12.5px;color:#aeb8d6;margin-bottom:10px;position:relative}
  .rank-progress-row b{color:#fbbf24;font-weight:700}
  .rank-progress-remaining{color:#7d87a4}
  .rank-progress-remaining span{color:#fff;font-weight:800}
  .rank-progress-bar{position:relative;height:8px;background:rgba(255,255,255,.04);border-radius:99px;overflow:hidden;margin-bottom:8px;border:1px solid rgba(255,255,255,.04)}
  .rank-progress-fill{height:100%;background:linear-gradient(90deg,#7c5cff 0%,#a282ff 60%,#c4b5fd 100%);border-radius:99px;transition:width .8s cubic-bezier(.4,0,.2,1);box-shadow:0 0 12px rgba(124,92,255,.5),inset 0 1px 0 rgba(255,255,255,.2)}
  .rank-progress-range{display:flex;justify-content:space-between;font-size:11px;color:#5a657f;margin-bottom:28px;letter-spacing:.5px}
  .rank-progress-range :nth-child(2){color:#a282ff;font-weight:800;font-size:11.5px}

  .rank-current-foot{border-top:1px solid rgba(255,255,255,.06);padding-top:22px;position:relative}
  .rank-foot-label{font-size:10.5px;font-weight:800;color:#7d87a4;letter-spacing:1.8px;margin-bottom:14px}
  .rank-next-list{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
  .rank-next-item{display:flex;align-items:center;gap:12px;padding:13px 16px;background:linear-gradient(160deg,rgba(255,255,255,.025),rgba(255,255,255,.005));border:1px solid rgba(255,255,255,.06);border-radius:14px;transition:transform .2s,border-color .2s}
  .rank-next-item:hover{transform:translateY(-2px);border-color:rgba(124,92,255,.22)}
  .rank-next-item .rni-name{font-size:14px;font-weight:700;color:#fff;line-height:1.1;letter-spacing:-.2px}
  .rank-next-item .rni-min{font-size:11px;color:#7d87a4;margin-top:2px;letter-spacing:.5px}

  /* Tiers card */
  .rank-tiers-card{position:relative;background:linear-gradient(160deg,rgba(15,20,40,.85) 0%,rgba(8,11,24,.95) 100%);border:1px solid rgba(255,255,255,.05);border-radius:22px;padding:32px 36px 36px;margin-bottom:32px;overflow:hidden;box-shadow:0 30px 80px -20px rgba(0,0,0,.5)}
  .rank-tiers-card::before{content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);width:80%;height:1px;background:linear-gradient(90deg,transparent,rgba(124,92,255,.45),transparent)}
  .rank-tiers-head{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;margin-bottom:30px;flex-wrap:wrap;position:relative}
  .rank-tiers-title{font-size:22px;font-weight:800;color:#fff;letter-spacing:-.5px;font-family:"Plus Jakarta Sans","Segoe UI",sans-serif}
  .rank-tiers-sub{font-size:10.5px;font-weight:800;color:#7d87a4;letter-spacing:1.8px;margin-top:7px}
  .rank-tiers-current{background:linear-gradient(135deg,rgba(124,92,255,.1),rgba(162,130,255,.03));border:1px solid rgba(124,92,255,.25);border-radius:14px;padding:11px 16px;min-width:220px;box-shadow:0 8px 20px rgba(124,92,255,.1)}
  .rank-tiers-current-label{font-size:10px;font-weight:800;color:#7d87a4;letter-spacing:1.5px;margin-bottom:6px;display:flex;justify-content:space-between;align-items:center;gap:8px}
  .rank-tiers-current-name{font-size:15px;font-weight:700;color:#fff;display:flex;align-items:center;gap:10px}
  .rank-pill-voce{font-size:9.5px;font-weight:800;color:#fff;background:linear-gradient(135deg,#7c5cff,#a282ff);padding:3px 8px;border-radius:6px;letter-spacing:1.3px;box-shadow:0 4px 10px rgba(124,92,255,.35)}

  /* ═══ TIER BARS — Premium Gaming Progression ═══ */
  .rank-tier-bars-wrap{position:relative;padding:42px 4px 18px;background:radial-gradient(ellipse 110% 80% at 50% 100%,rgba(124,92,255,.12) 0%,rgba(124,92,255,.03) 40%,transparent 70%),radial-gradient(ellipse 60% 50% at 50% 0%,rgba(255,255,255,.025),transparent 70%);border-radius:14px;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-ms-overflow-style:none}
  .rank-tier-bars-wrap::-webkit-scrollbar{display:none;height:0;width:0}
  .rank-tier-bars{display:grid;grid-template-columns:repeat(15,minmax(58px,1fr));gap:8px;align-items:end;min-height:320px;position:relative;z-index:1;padding-bottom:18px;min-width:fit-content}
  /* Trilho horizontal logo abaixo dos valores R$ — base da jornada */
  .rank-tier-bars::before{content:"";position:absolute;left:1.5%;right:1.5%;bottom:0;height:1.5px;background:linear-gradient(90deg,rgba(124,92,255,.08),rgba(124,92,255,.28) 50%,rgba(250,204,21,.32));border-radius:99px;z-index:0;box-shadow:0 0 14px rgba(124,92,255,.18)}
  .rank-tier-bars::after{content:"";position:absolute;left:1.5%;right:1.5%;bottom:0;height:1.5px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.45),transparent);border-radius:99px;z-index:0;animation:tierTrackShine 3.5s ease-in-out infinite;pointer-events:none}
  @keyframes tierTrackShine{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}

  .rank-tier-bar{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;padding-top:38px;transition:transform .3s cubic-bezier(.4,0,.2,1);cursor:default}
  .rank-tier-bar:hover{transform:translateY(-4px)}
  .rank-tier-bar:hover .rank-tier-icon-badge{transform:scale(1.12);box-shadow:0 0 0 1.5px rgba(255,255,255,.12),0 8px 20px var(--ticon,#7c5cff),0 0 28px var(--ticon,#7c5cff)}
  .rank-tier-label{font-size:8.5px;font-weight:900;color:#5a657f;letter-spacing:1.6px;margin-bottom:10px;text-transform:uppercase;white-space:nowrap;text-align:center;height:11px;text-shadow:0 1px 2px rgba(0,0,0,.4);transition:color .3s}

  /* Icon badge — circular premium container */
  .rank-tier-icon-badge{position:relative;width:46px;height:46px;border-radius:50%;background:radial-gradient(circle at 30% 30%,rgba(255,255,255,.10),rgba(15,20,40,.85) 75%);border:1.5px solid rgba(255,255,255,.06);display:flex;align-items:center;justify-content:center;margin-bottom:14px;box-shadow:0 6px 16px rgba(0,0,0,.45),0 0 18px var(--ticon,#7c5cff),inset 0 1px 0 rgba(255,255,255,.08);transition:all .35s cubic-bezier(.4,0,.2,1)}
  .rank-tier-icon-badge::before{content:"";position:absolute;inset:-3px;border-radius:50%;background:radial-gradient(circle,var(--ticon,#7c5cff),transparent 70%);opacity:.25;z-index:-1;transition:opacity .3s}
  .rank-tier-icon-badge::after{content:"";position:absolute;top:14%;left:18%;width:30%;height:25%;background:radial-gradient(ellipse,rgba(255,255,255,.35),transparent 70%);border-radius:50%;pointer-events:none}
  .rank-tier-icon{width:30px;height:34px;position:relative;z-index:1;transition:transform .35s}
  .rank-tier-icon svg{filter:drop-shadow(0 2px 6px rgba(0,0,0,.5)) drop-shadow(0 0 6px var(--ticon,#7c5cff))}

  /* Tier premium tubes — glass effect, gradients, internal shadows */
  .rank-tier-tube{position:relative;width:100%;max-width:38px;height:175px;background:linear-gradient(180deg,rgba(0,0,0,.4) 0%,rgba(0,0,0,.55) 50%,rgba(0,0,0,.4) 100%);border:1px solid rgba(255,255,255,.07);border-radius:9px;overflow:hidden;display:flex;align-items:flex-end;box-shadow:inset 0 2px 8px rgba(0,0,0,.55),inset 0 -2px 8px rgba(255,255,255,.02),0 3px 8px rgba(0,0,0,.25)}
  /* Reflexo de luz vertical */
  .rank-tier-tube::before{content:"";position:absolute;top:0;left:3px;width:4px;height:65%;background:linear-gradient(180deg,rgba(255,255,255,.22),rgba(255,255,255,.04) 50%,transparent);border-radius:99px;pointer-events:none;z-index:2}
  /* Reflexo secundário (lado direito, mais sutil) */
  .rank-tier-tube::after{content:"";position:absolute;top:0;right:3px;width:1.5px;height:40%;background:linear-gradient(180deg,rgba(255,255,255,.12),transparent);border-radius:99px;pointer-events:none;z-index:2}

  .rank-tier-fill{width:100%;border-radius:0 0 8px 8px;box-shadow:inset 0 -14px 24px rgba(0,0,0,.45),inset 0 2px 4px rgba(255,255,255,.15);transition:height .8s cubic-bezier(.4,0,.2,1);position:relative;overflow:hidden}
  /* Brilho/highlight no topo do preenchimento */
  .rank-tier-fill::before{content:"";position:absolute;top:0;left:0;right:0;height:18px;background:linear-gradient(180deg,rgba(255,255,255,.45),transparent);border-radius:7px 7px 0 0;pointer-events:none}
  /* Shimmer animado no preenchimento */
  .rank-tier-fill::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent,rgba(255,255,255,.18) 50%,transparent);transform:translateY(-100%);animation:tierFillShine 4s ease-in-out infinite;animation-delay:var(--shine-delay,0s)}
  @keyframes tierFillShine{0%,100%{transform:translateY(-100%)}50%{transform:translateY(100%)}}

  .rank-tier-num{font-size:11px;font-weight:900;color:#7d87a4;margin-top:12px;letter-spacing:.6px;font-family:"Plus Jakarta Sans",sans-serif;background:rgba(255,255,255,.025);padding:2px 7px;border-radius:5px;border:1px solid rgba(255,255,255,.05)}
  .rank-tier-mintag{font-size:7.5px;font-weight:700;color:#4d5670;margin-top:5px;letter-spacing:.9px;text-transform:uppercase}
  .rank-tier-min{font-size:10.5px;font-weight:800;color:#cdd5ea;margin-top:2px;letter-spacing:.3px;font-variant-numeric:tabular-nums}

  /* Current rank — premium glow + pulse + VOCÊ pill */
  .rank-tier-bar.is-current .rank-tier-label{color:#fff;text-shadow:0 0 12px var(--ticon,#7c5cff),0 1px 2px rgba(0,0,0,.5)}
  .rank-tier-bar.is-current .rank-tier-icon-badge{background:radial-gradient(circle at 30% 30%,rgba(255,255,255,.18),rgba(15,20,40,.9) 75%);border-color:var(--ticon,#7c5cff);box-shadow:0 0 0 2px var(--ticon,#7c5cff),0 0 28px var(--ticon,#7c5cff),0 0 56px var(--ticon,#7c5cff),0 8px 18px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.15);animation:tierCurrentPulse 2.4s ease-in-out infinite}
  @keyframes tierCurrentPulse{0%,100%{box-shadow:0 0 0 2px var(--ticon,#7c5cff),0 0 28px var(--ticon,#7c5cff),0 0 56px var(--ticon,#7c5cff),0 8px 18px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.15)}50%{box-shadow:0 0 0 2px var(--ticon,#7c5cff),0 0 36px var(--ticon,#7c5cff),0 0 72px var(--ticon,#7c5cff),0 10px 22px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.18)}}
  .rank-tier-bar.is-current .rank-tier-tube{border-color:var(--ticon,#7c5cff);box-shadow:inset 0 2px 8px rgba(0,0,0,.6),0 0 0 1.5px var(--ticon,#7c5cff),0 0 32px var(--ticon,#7c5cff),0 4px 12px rgba(0,0,0,.3)}
  .rank-tier-bar.is-current .rank-tier-num{color:#fff;background:linear-gradient(135deg,rgba(124,92,255,.18),rgba(162,130,255,.06));border-color:rgba(124,92,255,.32)}
  .rank-tier-bar.is-current .rank-tier-min{color:#fff;text-shadow:0 0 8px var(--ticon,#7c5cff)}
  .rank-tier-bar.is-current::before{content:"VOCÊ";position:absolute;top:0;left:50%;transform:translateX(-50%);font-size:9.5px;font-weight:900;color:#fff;background:linear-gradient(135deg,#7c5cff,#a282ff);padding:4px 11px;border-radius:8px;letter-spacing:1.5px;box-shadow:0 8px 18px rgba(124,92,255,.55),0 0 24px rgba(124,92,255,.3),inset 0 1px 0 rgba(255,255,255,.25);z-index:3;white-space:nowrap;animation:tierVocePulse 2s ease-in-out infinite}
  @keyframes tierVocePulse{0%,100%{transform:translateX(-50%) scale(1)}50%{transform:translateX(-50%) scale(1.06)}}
  .rank-tier-bar.is-current::after{content:"";position:absolute;top:22px;left:50%;transform:translateX(-50%);width:0;height:0;border-left:6px solid transparent;border-right:6px solid transparent;border-top:7px solid #a282ff;filter:drop-shadow(0 2px 4px rgba(124,92,255,.6));z-index:3}

  /* Locked ranks (acima do user) */
  .rank-tier-bar.is-locked{opacity:.55}
  .rank-tier-bar.is-locked .rank-tier-icon-badge{box-shadow:0 4px 10px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.04);background:radial-gradient(circle at 30% 30%,rgba(255,255,255,.05),rgba(15,20,40,.95) 75%)}
  .rank-tier-bar.is-locked .rank-tier-icon-badge::before{opacity:.08}
  .rank-tier-bar.is-locked .rank-tier-icon svg{filter:saturate(.35) brightness(.6) drop-shadow(0 2px 4px rgba(0,0,0,.5))}
  .rank-tier-bar.is-locked .rank-tier-icon img{filter:saturate(.5) brightness(.7)}
  .rank-tier-bar.is-locked .rank-tier-tube{opacity:.7}
  /* APEX nunca fica opacidade baixa — sempre brilha pra criar desejo */
  .rank-tier-bar.is-apex.is-locked{opacity:.92}
  .rank-tier-bar.is-apex.is-locked .rank-tier-icon img{filter:none}
  .rank-tier-bar.is-apex.is-locked .rank-tier-tube{opacity:1}

  /* Ranks de elite (Mestre+) ganham mais presença */
  .rank-tier-bar:nth-child(n+10) .rank-tier-icon-badge{box-shadow:0 6px 16px rgba(0,0,0,.5),0 0 22px var(--ticon,#7c5cff),0 0 44px var(--ticon,#7c5cff),inset 0 1px 0 rgba(255,255,255,.1)}
  .rank-tier-bar:nth-child(n+14) .rank-tier-icon-badge{box-shadow:0 8px 20px rgba(0,0,0,.5),0 0 28px var(--ticon,#fbbf24),0 0 56px var(--ticon,#fbbf24),inset 0 1px 0 rgba(255,255,255,.15)}
  .rank-tier-bar:nth-child(15) .rank-tier-label{color:#fde047;text-shadow:0 0 16px rgba(250,204,21,.55),0 1px 2px rgba(0,0,0,.5)}

  /* ═══ PROGRESSÃO DE GRADIENTES POR TIER ═══ */
  /* Quanto mais alto o tier, mais elaborado o gradiente animado no tubo */

  /* is-pro-tier (Safira/Rubi/Diamante — 7-9): 4 stops com movimento sutil */
  .rank-tier-bar.is-pro-tier .rank-tier-fill{background:linear-gradient(180deg,var(--ticon,#7c5cff) 0%,color-mix(in srgb, var(--ticon, #7c5cff) 70%, white) 25%,var(--ticon,#7c5cff) 50%,color-mix(in srgb, var(--ticon, #7c5cff) 80%, black) 100%) !important;background-size:100% 220% !important;animation:tierProFlow 6s ease-in-out infinite !important;filter:saturate(1.1)}
  @keyframes tierProFlow{0%{background-position:50% 0%}50%{background-position:50% 100%}100%{background-position:50% 0%}}
  .rank-tier-bar.is-pro-tier .rank-tier-tube{box-shadow:inset 0 2px 8px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.04),0 0 16px var(--ticon,#7c5cff),0 3px 8px rgba(0,0,0,.25)}

  /* is-elite-tier (Mestre/Elite/Lendário — 10-12): 5 stops + brightness */
  .rank-tier-bar.is-elite-tier .rank-tier-fill{background:linear-gradient(180deg,color-mix(in srgb, var(--ticon, #a855f7) 50%, white) 0%,var(--ticon,#a855f7) 20%,color-mix(in srgb, var(--ticon, #a855f7) 90%, #ec4899) 45%,var(--ticon,#a855f7) 70%,color-mix(in srgb, var(--ticon, #a855f7) 70%, black) 100%) !important;background-size:100% 260% !important;animation:tierEliteFlow 5s ease-in-out infinite !important;filter:saturate(1.2) brightness(1.05);box-shadow:inset 0 -12px 22px rgba(0,0,0,.4),inset 0 2px 4px rgba(255,255,255,.2),0 0 24px var(--ticon,#a855f7)}
  @keyframes tierEliteFlow{0%,100%{background-position:50% 0%}50%{background-position:50% 100%}}
  .rank-tier-bar.is-elite-tier .rank-tier-tube{box-shadow:inset 0 2px 8px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.06),0 0 22px var(--ticon,#a855f7),0 0 44px var(--ticon,#a855f7),0 3px 8px rgba(0,0,0,.3)}

  /* is-godlike-tier (Imortal — 13): violet/lilás iridescente */
  .rank-tier-bar.is-godlike-tier .rank-tier-fill{background:linear-gradient(180deg,#ddd6fe 0%,#c4b5fd 18%,#a78bfa 36%,#8b5cf6 54%,#7c3aed 72%,#6d28d9 88%,#4c1d95 100%) !important;background-size:120% 300% !important;animation:tierGodlikeFlow 4.2s ease-in-out infinite !important;filter:saturate(1.3) brightness(1.08);box-shadow:inset 0 -14px 24px rgba(67,20,219,.45),inset 0 3px 5px rgba(255,255,255,.3),0 0 28px rgba(139,92,246,.55),0 0 56px rgba(139,92,246,.25)}
  @keyframes tierGodlikeFlow{0%{background-position:50% 0%;filter:saturate(1.3) brightness(1.08) hue-rotate(0deg)}50%{background-position:50% 100%;filter:saturate(1.4) brightness(1.15) hue-rotate(15deg)}100%{background-position:50% 0%;filter:saturate(1.3) brightness(1.08) hue-rotate(0deg)}}
  .rank-tier-bar.is-godlike-tier .rank-tier-tube{box-shadow:inset 0 2px 8px rgba(0,0,0,.55),0 0 0 1.5px rgba(139,92,246,.45),0 0 28px rgba(139,92,246,.6),0 0 56px rgba(167,139,250,.35),0 3px 8px rgba(0,0,0,.3)}

  /* is-supremo-tier (Supremo — 14): purple → cyan → pink iridescente */
  .rank-tier-bar.is-supremo-tier .rank-tier-fill{background:linear-gradient(180deg,#7D3CFF 0%,#5D7AFF 22%,#4ACBFF 45%,#A0A5FF 65%,#C56BFF 82%,#E86BFF 100%) !important;background-size:150% 320% !important;animation:tierSupremoFlow 3.8s ease-in-out infinite !important;filter:saturate(1.4) brightness(1.1);box-shadow:inset 0 -14px 24px rgba(0,0,0,.35),inset 0 3px 5px rgba(255,255,255,.35),0 0 32px rgba(74,203,255,.55),0 0 64px rgba(125,60,255,.35)}
  @keyframes tierSupremoFlow{0%{background-position:0% 0%;filter:saturate(1.4) brightness(1.1) hue-rotate(0deg)}25%{background-position:50% 33%;filter:saturate(1.5) brightness(1.15) hue-rotate(15deg)}50%{background-position:100% 66%;filter:saturate(1.6) brightness(1.2) hue-rotate(30deg)}75%{background-position:50% 100%;filter:saturate(1.5) brightness(1.15) hue-rotate(15deg)}100%{background-position:0% 0%;filter:saturate(1.4) brightness(1.1) hue-rotate(0deg)}}
  .rank-tier-bar.is-supremo-tier .rank-tier-tube{box-shadow:inset 0 2px 8px rgba(0,0,0,.55),0 0 0 1.5px rgba(74,203,255,.45),0 0 32px rgba(74,203,255,.6),0 0 64px rgba(232,107,255,.4),0 3px 8px rgba(0,0,0,.3);animation:tierSupremoTubeGlow 4s ease-in-out infinite}
  @keyframes tierSupremoTubeGlow{0%,100%{box-shadow:inset 0 2px 8px rgba(0,0,0,.55),0 0 0 1.5px rgba(125,60,255,.5),0 0 32px rgba(125,60,255,.6),0 0 64px rgba(232,107,255,.4),0 3px 8px rgba(0,0,0,.3)}50%{box-shadow:inset 0 2px 8px rgba(0,0,0,.55),0 0 0 1.5px rgba(74,203,255,.55),0 0 36px rgba(74,203,255,.75),0 0 72px rgba(232,107,255,.4),0 3px 8px rgba(0,0,0,.3)}}
  /* Supremo + Imortal nunca opacos demais — sempre brilham */
  .rank-tier-bar.is-supremo-tier.is-locked{opacity:.85}
  .rank-tier-bar.is-godlike-tier.is-locked{opacity:.78}
  .rank-tier-bar.is-elite-tier.is-locked{opacity:.72}

  /* ═══ APEX (R$ 1M) — Lendário absoluto com gradiente animado ═══ */
  .rank-tier-bar.is-apex .rank-tier-label{color:#fef3c7;text-shadow:0 0 18px rgba(250,204,21,.75),0 0 32px rgba(251,146,60,.45),0 1px 2px rgba(0,0,0,.5);animation:apexLabelShimmer 3s ease-in-out infinite;font-weight:900;letter-spacing:1.8px}
  @keyframes apexLabelShimmer{0%,100%{text-shadow:0 0 18px rgba(250,204,21,.75),0 0 32px rgba(251,146,60,.45),0 1px 2px rgba(0,0,0,.5)}50%{text-shadow:0 0 24px rgba(254,243,199,.95),0 0 44px rgba(250,204,21,.7),0 1px 2px rgba(0,0,0,.5)}}
  .rank-tier-bar.is-apex .rank-tier-icon-badge{background:radial-gradient(circle at 30% 30%,rgba(255,255,255,.2),rgba(15,20,40,.85) 75%);border-color:rgba(250,204,21,.55);box-shadow:0 8px 20px rgba(0,0,0,.5),0 0 32px rgba(250,204,21,.7),0 0 64px rgba(251,146,60,.5),0 0 96px rgba(217,119,6,.3),inset 0 1px 0 rgba(255,255,255,.2);animation:apexBadgePulse 2.5s ease-in-out infinite}
  @keyframes apexBadgePulse{0%,100%{box-shadow:0 8px 20px rgba(0,0,0,.5),0 0 32px rgba(250,204,21,.7),0 0 64px rgba(251,146,60,.5),0 0 96px rgba(217,119,6,.3),inset 0 1px 0 rgba(255,255,255,.2);transform:scale(1)}50%{box-shadow:0 10px 24px rgba(0,0,0,.5),0 0 44px rgba(254,243,199,.85),0 0 80px rgba(250,204,21,.65),0 0 120px rgba(251,146,60,.4),inset 0 1px 0 rgba(255,255,255,.25);transform:scale(1.04)}}
  .rank-tier-bar.is-apex .rank-tier-tube{border-color:rgba(250,204,21,.45);box-shadow:inset 0 2px 8px rgba(0,0,0,.55),0 0 0 1.5px rgba(250,204,21,.35),0 0 28px rgba(250,204,21,.45),0 0 56px rgba(251,146,60,.3)}
  /* Fill com gradiente DOURADO PREMIUM animado (champagne → gold → deep gold) */
  .rank-tier-bar.is-apex .rank-tier-fill{background:linear-gradient(180deg,#FFF8D1 0%,#FAEAA8 18%,#F5DA7B 35%,#F2C230 55%,#E0AB22 75%,#C99200 100%) !important;background-size:200% 400% !important;animation:apexFillFlow 4s ease-in-out infinite !important;box-shadow:inset 0 -14px 24px rgba(146,64,14,.5),inset 0 2px 6px rgba(255,255,255,.4),0 0 32px rgba(242,194,48,.6)}
  @keyframes apexFillFlow{0%{background-position:50% 0%}25%{background-position:50% 50%}50%{background-position:50% 100%}75%{background-position:50% 50%}100%{background-position:50% 0%}}
  /* Brilho superior do fill mais intenso */
  .rank-tier-bar.is-apex .rank-tier-fill::before{background:linear-gradient(180deg,rgba(254,249,195,.85),rgba(254,243,199,.3),transparent) !important;height:24px !important}
  /* Shimmer mais rápido e mais brilhante */
  .rank-tier-bar.is-apex .rank-tier-fill::after{background:linear-gradient(180deg,transparent,rgba(254,243,199,.5) 50%,transparent) !important;animation:tierFillShine 2.5s ease-in-out infinite !important}
  .rank-tier-bar.is-apex .rank-tier-num{color:#fde047 !important;background:linear-gradient(135deg,rgba(250,204,21,.18),rgba(251,146,60,.08)) !important;border-color:rgba(250,204,21,.4) !important;font-weight:900}
  .rank-tier-bar.is-apex .rank-tier-min{color:#fef3c7 !important;text-shadow:0 0 10px rgba(250,204,21,.7);font-weight:900}
  /* Partículas/sparkles ao redor da Apex */
  .rank-tier-bar.is-apex::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 30% 20%,rgba(254,243,199,.4) 0px,transparent 2px),radial-gradient(circle at 70% 40%,rgba(250,204,21,.5) 0px,transparent 2px),radial-gradient(circle at 50% 70%,rgba(254,243,199,.4) 0px,transparent 2px),radial-gradient(circle at 20% 85%,rgba(251,146,60,.4) 0px,transparent 2px);animation:apexSparkles 3s ease-in-out infinite}
  @keyframes apexSparkles{0%,100%{opacity:.7}50%{opacity:1}}

  /* Bottom card */
  .rank-bottom-card{position:relative;background:linear-gradient(160deg,rgba(15,20,40,.7) 0%,rgba(10,14,29,.9) 100%);border:1px solid rgba(255,255,255,.06);border-radius:18px;padding:20px 26px;display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;overflow:hidden}
  .rank-bottom-card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:linear-gradient(180deg,#7c5cff,#a282ff);border-radius:18px 0 0 18px}
  .rank-bottom-left{display:flex;align-items:center;gap:18px;flex:1;min-width:260px}
  .rank-bottom-name{font-size:18px;font-weight:800;color:#fff;display:flex;align-items:center;gap:10px;margin-bottom:5px;letter-spacing:-.3px}
  .rank-bottom-desc{font-size:13px;color:#aeb8d6;line-height:1.45}
  .rank-bottom-stats{display:flex;gap:36px;flex-wrap:wrap}
  .rank-bottom-stats > div{text-align:left}
  .rbs-label{font-size:10px;font-weight:800;color:#7d87a4;letter-spacing:1.5px;margin-bottom:4px}
  .rbs-value{font-size:15px;font-weight:800;color:#fff;letter-spacing:-.2px}

  /* SHIELDS */
  .rank-shield{position:relative;display:inline-flex;align-items:center;justify-content:center}
  .rank-shield-lg{width:96px;height:96px;flex-shrink:0}
  .rank-shield-md{width:60px;height:60px;flex-shrink:0}
  .rank-shield-sm{width:28px;height:28px;flex-shrink:0}
  .rank-shield-xs{width:36px;height:36px;flex-shrink:0}
  .rank-shield svg{width:100%;height:100%;filter:drop-shadow(0 6px 14px rgba(0,0,0,.5)) drop-shadow(0 0 16px rgba(124,92,255,.08))}

  @media (max-width:1100px){
    /* Scroll horizontal — mostra todos os 15 ranks */
    .rank-tier-bars{grid-template-columns:repeat(15,minmax(62px,1fr));gap:10px;min-width:980px}
    .rank-current-name{font-size:38px}
    .rank-headline{font-size:36px}
  }
  @media (max-width:780px){
    .rank-headline{font-size:26px;margin-bottom:6px}
    .rank-headline-sub{font-size:13px;margin-bottom:18px}
    .rank-section-label{font-size:10px;margin-bottom:10px}
    /* Card rank atual mais enxuto */
    .rank-current-card{padding:18px 18px;border-radius:16px;margin-bottom:30px}
    .rank-current-head{gap:14px;margin-bottom:18px}
    .rank-shield-lg{width:64px;height:64px}
    .rank-current-name{font-size:30px}
    .rank-current-meta{font-size:12px}
    .rank-current-tag{font-size:9.5px;padding:4px 10px;margin-bottom:8px}
    .rank-progress-row{font-size:11.5px;margin-bottom:7px}
    .rank-progress-bar{height:6px;margin-bottom:6px}
    .rank-progress-range{font-size:10px;margin-bottom:18px}
    .rank-current-foot{padding-top:16px}
    .rank-foot-label{font-size:10px;margin-bottom:10px}
    .rank-next-list{grid-template-columns:1fr;gap:8px}
    .rank-next-item{padding:10px 12px;gap:10px}
    .rank-next-item .rni-name{font-size:13px}
    .rank-next-item .rni-min{font-size:10.5px}
    .rank-shield-xs{width:30px;height:34px}
    /* Card Sistema de Ranks mais compacto */
    .rank-tiers-card{padding:18px 16px;border-radius:16px;margin-bottom:22px}
    .rank-tiers-head{gap:12px;margin-bottom:18px}
    .rank-tiers-title{font-size:20px}
    .rank-tiers-sub{font-size:9.5px}
    .rank-tiers-current{padding:9px 12px;min-width:180px;border-radius:11px}
    .rank-tiers-current-label{font-size:9px}
    .rank-tiers-current-name{font-size:13px}
    .rank-tier-bars-wrap{padding:32px 0 14px}
    .rank-tier-bars{grid-template-columns:repeat(15,minmax(54px,1fr));gap:6px;min-width:860px}
    .rank-tier-icon-badge{width:38px;height:38px;margin-bottom:10px}
    .rank-tier-icon{width:24px;height:28px}
    .rank-tier-label{font-size:8px;letter-spacing:1.3px;margin-bottom:8px;height:10px}
    .rank-tier-tube{max-width:32px;height:140px;border-radius:7px}
    .rank-tier-num{font-size:9.5px;padding:1.5px 5px;margin-top:8px}
    .rank-tier-mintag{font-size:7px;margin-top:3px}
    .rank-tier-min{font-size:9.5px}
    .rank-tier-bar.is-current::before{font-size:8.5px;padding:3px 9px}
    /* Card bottom mais compacto */
    .rank-bottom-card{padding:16px 18px;border-radius:14px}
    .rank-shield-md{width:46px;height:46px}
    .rank-bottom-name{font-size:16px}
    .rank-bottom-desc{font-size:12px}
    .rank-bottom-stats{gap:14px;width:100%}
    .rank-bottom-stats > div{flex:1;min-width:75px}
    .rbs-label{font-size:9.5px}
    .rbs-value{font-size:13px}
  }
  @media (max-width:420px){
    .rank-tier-bars{grid-template-columns:repeat(15,minmax(50px,1fr));min-width:790px;gap:5px}
    .rank-tier-icon-badge{width:34px;height:34px}
    .rank-tier-icon{width:22px;height:25px}
    .rank-tier-tube{max-width:28px;height:130px}
    .rank-tier-label{font-size:7.5px}
    .rank-tier-num{font-size:9px}
    .rank-tier-min{font-size:9px}
  }
  /* ═══ TOPBAR STREAK — visivel em todas as abas ═══ */
  .topbar-streak{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;background:linear-gradient(135deg,rgba(251,146,60,.16),rgba(220,38,38,.08));border:1px solid rgba(251,146,60,.35);border-radius:9px;cursor:pointer;transition:transform .2s,box-shadow .2s,border-color .2s;font-family:"Plus Jakarta Sans",sans-serif}
  .topbar-streak:hover{transform:translateY(-1px);box-shadow:0 6px 14px rgba(251,146,60,.22);border-color:rgba(251,146,60,.55)}
  .topbar-streak-flame{font-size:16px;line-height:1;filter:drop-shadow(0 1px 2px rgba(251,146,60,.5));animation:streakFlame 2.5s ease-in-out infinite}
  .topbar-streak-num{font-size:14px;font-weight:800;color:#fb923c;letter-spacing:-.3px;font-variant-numeric:tabular-nums}
  .topbar-streak.is-at-risk{background:linear-gradient(135deg,rgba(245,158,11,.18),rgba(220,38,38,.10));border-color:rgba(245,158,11,.5);box-shadow:0 0 0 1px rgba(245,158,11,.2)}
  .topbar-streak.is-at-risk .topbar-streak-num{color:#fbbf24}
  .topbar-streak.is-record .topbar-streak-num{color:#facc15;text-shadow:0 0 8px rgba(250,204,21,.4)}
  @media (max-width:560px){
    .topbar-streak{padding:5px 9px;gap:4px}
    .topbar-streak-flame{font-size:14px}
    .topbar-streak-num{font-size:12.5px}
  }

  /* ═══ TIER-UP CELEBRATION — modal que aparece quando user passa de tier ═══ */
  .tier-up-overlay{position:fixed;inset:0;background:rgba(0,0,0,.75);z-index:9500;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .4s}
  .tier-up-overlay.is-active{opacity:1;pointer-events:auto}
  .tier-up-modal{position:relative;width:min(440px,calc(100vw - 40px));background:linear-gradient(160deg,#1a2138 0%,#0a0e1d 100%);border:1px solid rgba(255,255,255,.08);border-radius:20px;padding:36px 30px;text-align:center;transform:scale(.85) translateY(20px);transition:transform .5s cubic-bezier(.34,1.56,.64,1);overflow:hidden}
  .tier-up-overlay.is-active .tier-up-modal{transform:scale(1) translateY(0)}
  .tier-up-modal::before{content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);width:80%;height:1px;background:linear-gradient(90deg,transparent,var(--tier-up-color,#7c5cff),transparent)}
  .tier-up-modal::after{content:"";position:absolute;bottom:-80px;left:50%;transform:translateX(-50%);width:200px;height:200px;background:radial-gradient(circle,var(--tier-up-color,#7c5cff),transparent 65%);opacity:.45;pointer-events:none;filter:blur(8px);animation:tierGlow 3s ease-in-out infinite}
  @keyframes tierGlow{0%,100%{opacity:.35;transform:translateX(-50%) scale(1)}50%{opacity:.65;transform:translateX(-50%) scale(1.15)}}
  .tier-up-tag{display:inline-flex;align-items:center;gap:10px;font-size:11px;font-weight:800;color:var(--tier-up-color,#a282ff);letter-spacing:2px;margin-bottom:18px;text-transform:uppercase}
  .tier-up-tag::before,.tier-up-tag::after{content:"";width:22px;height:2px;background:linear-gradient(90deg,transparent,var(--tier-up-color,#a282ff),transparent);border-radius:2px}
  .tier-up-shield{display:flex;align-items:center;justify-content:center;width:140px;height:140px;margin:0 auto 16px;position:relative;filter:drop-shadow(0 10px 30px var(--tier-up-color,#7c5cff));animation:tierShieldPop .8s cubic-bezier(.34,1.56,.64,1)}
  @keyframes tierShieldPop{0%{transform:scale(.3) rotate(-20deg);opacity:0}60%{transform:scale(1.15) rotate(5deg)}100%{transform:scale(1) rotate(0)}}
  .tier-up-shield svg{width:100%;height:100%}
  .tier-up-title{font-size:38px;font-weight:300;color:#fff;letter-spacing:-1px;font-family:"Georgia","Times New Roman",serif;margin-bottom:8px}
  .tier-up-subtitle{font-size:14px;color:#aeb8d6;line-height:1.55;margin-bottom:6px}
  .tier-up-subtitle b{color:var(--tier-up-color,#a282ff);font-weight:700}
  .tier-up-desc{font-size:13px;color:#7d87a4;line-height:1.5;margin-bottom:26px;padding:0 8px}
  .tier-up-actions{display:flex;flex-direction:column;gap:10px}
  .tier-up-btn-primary{background:linear-gradient(135deg,var(--tier-up-color,#7c5cff),var(--tier-up-color-2,#a282ff));color:#fff;border:0;padding:13px 22px;border-radius:11px;font-size:14px;font-weight:800;cursor:pointer;letter-spacing:.3px;transition:transform .15s,box-shadow .15s;box-shadow:0 8px 24px rgba(124,92,255,.3)}
  .tier-up-btn-primary:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(124,92,255,.45)}
  .tier-up-btn-secondary{background:transparent;color:#aeb8d6;border:1px solid rgba(255,255,255,.1);padding:11px 22px;border-radius:11px;font-size:13px;font-weight:700;cursor:pointer;transition:background .15s,color .15s}
  .tier-up-btn-secondary:hover{background:rgba(255,255,255,.04);color:#fff}
  /* Confetti */
  .tier-up-confetti{position:absolute;inset:0;pointer-events:none;overflow:hidden}
  .tier-up-confetti span{position:absolute;top:-20px;width:8px;height:14px;border-radius:2px;animation:confettiFall 3s linear infinite}
  @keyframes confettiFall{0%{transform:translateY(0) rotate(0deg);opacity:1}100%{transform:translateY(640px) rotate(720deg);opacity:0}}

  @media (max-width:560px){
    .tier-up-modal{padding:28px 22px;width:calc(100vw - 28px)}
    .tier-up-shield{width:110px;height:110px}
    .tier-up-title{font-size:30px}
    .tier-up-subtitle{font-size:13px}
  }

  /* ═══ DASHBOARD RANK CARD — puxa user pra aba Ranking ═══ */
  .dash-rank-card{position:relative;display:flex;justify-content:space-between;align-items:center;gap:20px;margin-top:20px;padding:18px 24px;background:linear-gradient(135deg,rgba(124,92,255,.10) 0%,rgba(124,92,255,.04) 50%,rgba(15,20,40,.6) 100%);border:1px solid rgba(124,92,255,.22);border-radius:16px;cursor:pointer;transition:all .25s cubic-bezier(.4,0,.2,1);overflow:hidden}
  .dash-rank-card::before{content:"";position:absolute;inset:-1px;border-radius:16px;padding:1px;background:linear-gradient(135deg,rgba(124,92,255,.45),transparent 50%,rgba(124,92,255,.25));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}
  .dash-rank-card::after{content:"";position:absolute;right:-60px;top:50%;transform:translateY(-50%);width:200px;height:200px;background:radial-gradient(circle,rgba(124,92,255,.15),transparent 70%);pointer-events:none}
  .dash-rank-card:hover{transform:translateY(-2px);box-shadow:0 16px 36px rgba(124,92,255,.18);border-color:rgba(124,92,255,.4)}
  .dash-rank-left{display:flex;align-items:center;gap:18px;flex:1;min-width:0;position:relative;z-index:1}
  .dash-rank-icon{width:54px;height:54px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
  .dash-rank-icon svg{width:100%;height:100%;filter:drop-shadow(0 6px 14px rgba(0,0,0,.4))}
  .dash-rank-info{flex:1;min-width:0}
  .dash-rank-tag{font-size:10.5px;font-weight:800;color:#a282ff;letter-spacing:1.8px;margin-bottom:5px;text-transform:uppercase}
  .dash-rank-main{font-size:22px;font-weight:800;color:#fff;letter-spacing:-.5px;line-height:1.15;margin-bottom:4px;display:flex;align-items:center;gap:10px}
  .dash-rank-main b{color:#facc15;font-weight:900}
  .dash-rank-main .pro-mini-badge{display:inline-flex;width:22px;height:22px;flex-shrink:0}
  .dash-rank-main .pro-mini-badge svg{width:100%;height:100%}
  .dash-rank-sub{font-size:13px;color:#aeb8d6;letter-spacing:-.1px}
  .dash-rank-sub b{color:#a282ff;font-weight:700}
  .dash-rank-right{position:relative;z-index:1;flex-shrink:0;display:flex;align-items:center;gap:14px}
  /* Streak chip — design premium estilo gaming (dark + orange glow + circular flame badge + separador) */
  /* Streak chip — design premium estilo gaming (dimensionado igual ao botão Ver ranking) */
  .dash-streak{position:relative;display:inline-flex;align-items:center;gap:7px;padding:3px 14px 3px 3px;background:linear-gradient(180deg,#1a1f33 0%,#0f1326 100%);border:1.5px solid rgba(251,146,60,.7);border-radius:10px;box-shadow:0 0 0 1px rgba(251,146,60,.18) inset,0 4px 12px rgba(251,146,60,.22),0 0 14px rgba(251,146,60,.16);overflow:visible}
  .dash-streak::before{content:"";position:absolute;inset:-2px;border-radius:11px;background:linear-gradient(135deg,rgba(251,146,60,.5),rgba(234,88,12,.25) 50%,rgba(251,146,60,.5));z-index:-1;filter:blur(3px);opacity:.5}
  /* Badge circular da chama */
  .dash-streak-badge{position:relative;width:26px;height:26px;border-radius:50%;background:radial-gradient(circle at 35% 30%,rgba(251,146,60,.18),rgba(15,19,38,.95) 75%);border:1.2px solid rgba(251,146,60,.4);display:flex;align-items:center;justify-content:center;flex-shrink:0;box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 0 8px rgba(251,146,60,.4)}
  .dash-streak-flame{width:14px;height:18px;line-height:1;flex-shrink:0;filter:drop-shadow(0 0 5px rgba(251,146,60,.85));animation:streakFlame 2.4s ease-in-out infinite}
  .dash-streak-flame svg{width:100%;height:100%;display:block}
  @keyframes streakFlame{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-1px) scale(1.05)}}
  /* Separador vertical entre chama e numero */
  .dash-streak-sep{width:1px;height:20px;background:linear-gradient(180deg,transparent,rgba(255,255,255,.18) 50%,transparent);margin:0 1px;flex-shrink:0}
  /* Número grande dourado/laranja */
  .dash-streak-num{font-size:17px;font-weight:900;letter-spacing:-.6px;line-height:1;font-family:"Plus Jakarta Sans",sans-serif;font-variant-numeric:tabular-nums;background:linear-gradient(180deg,#fef3c7 0%,#fbbf24 50%,#d97706 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;filter:drop-shadow(0 1px 3px rgba(217,119,6,.4))}
  /* Label texto branco */
  .dash-streak-label{font-size:8.5px;font-weight:800;color:#e7ecff;letter-spacing:1.4px;text-transform:uppercase;text-shadow:0 1px 2px rgba(0,0,0,.6)}
  /* Variante: em risco (sem tx hoje) — amber forte + pulso rápido */
  .dash-streak.is-at-risk{border-color:rgba(245,158,11,.85);box-shadow:0 0 0 1px rgba(245,158,11,.25) inset,0 6px 18px rgba(245,158,11,.35),0 0 28px rgba(245,158,11,.3);animation:streakAtRiskGlow 1.6s ease-in-out infinite}
  @keyframes streakAtRiskGlow{0%,100%{box-shadow:0 0 0 1px rgba(245,158,11,.25) inset,0 6px 18px rgba(245,158,11,.35),0 0 28px rgba(245,158,11,.3)}50%{box-shadow:0 0 0 1px rgba(245,158,11,.4) inset,0 8px 22px rgba(245,158,11,.5),0 0 40px rgba(245,158,11,.45)}}
  .dash-streak.is-at-risk .dash-streak-num{background:linear-gradient(180deg,#fef9c3 0%,#fbbf24 50%,#b45309 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
  .dash-streak.is-at-risk .dash-streak-flame{animation:streakFlame 1.2s ease-in-out infinite}
  /* Variante: 7+ dias — chama mais quente */
  .dash-streak.is-record{border-color:rgba(251,146,60,.9);box-shadow:0 0 0 1px rgba(251,146,60,.28) inset,0 8px 22px rgba(251,146,60,.4),0 0 32px rgba(251,146,60,.3)}
  .dash-streak.is-record .dash-streak-flame{filter:drop-shadow(0 0 12px rgba(251,146,60,1))}
  /* Variante: 30+ dias — dourado total */
  .dash-streak.is-king{border-color:rgba(250,204,21,.85);box-shadow:0 0 0 1.5px rgba(250,204,21,.3) inset,0 8px 24px rgba(250,204,21,.4),0 0 36px rgba(250,204,21,.32)}
  .dash-streak.is-king::before{background:linear-gradient(135deg,rgba(250,204,21,.6),rgba(251,146,60,.3) 50%,rgba(250,204,21,.6))}
  .dash-streak.is-king .dash-streak-badge{border-color:rgba(250,204,21,.6);box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 0 18px rgba(250,204,21,.55)}
  .dash-streak.is-king .dash-streak-num{background:linear-gradient(180deg,#fef9c3 0%,#fde047 50%,#ca8a04 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
  .dash-streak.is-king .dash-streak-flame{filter:drop-shadow(0 0 16px rgba(250,204,21,.9)) saturate(1.4) brightness(1.15)}
  @media (max-width:560px){
    .dash-rank-right{flex-direction:column-reverse;width:100%;gap:10px}
    .dash-streak{align-self:stretch;justify-content:center;padding:8px 14px}
    .dash-streak-flame{width:26px;height:30px}
    .dash-streak-num{font-size:16px}
  }
  .dash-rank-cta{display:inline-flex;align-items:center;gap:8px;padding:10px 18px;background:rgba(124,92,255,.12);border:1px solid rgba(124,92,255,.3);border-radius:10px;font-size:13px;font-weight:700;color:#c4b5fd;letter-spacing:.2px;transition:all .2s}
  .dash-rank-card:hover .dash-rank-cta{background:rgba(124,92,255,.22);color:#fff}
  .dash-rank-arrow{transition:transform .25s}
  .dash-rank-card:hover .dash-rank-arrow{transform:translateX(4px)}

  /* Variantes */
  .dash-rank-card.is-pro{background:linear-gradient(135deg,rgba(29,155,240,.10) 0%,rgba(124,92,255,.06) 50%,rgba(15,20,40,.6) 100%);border-color:rgba(29,155,240,.28)}
  .dash-rank-card.is-pro::before{background:linear-gradient(135deg,rgba(29,155,240,.5),transparent 50%,rgba(124,92,255,.3))}
  .dash-rank-card.is-podium .dash-rank-main b{color:#facc15}
  .dash-rank-card.is-locked{background:linear-gradient(135deg,rgba(124,92,255,.06) 0%,rgba(255,255,255,.02) 50%,rgba(15,20,40,.4) 100%);border-color:rgba(124,92,255,.15)}

  @media (max-width:560px){
    .dash-rank-card{padding:14px 14px;gap:10px;flex-direction:column;align-items:stretch}
    .dash-rank-left{gap:12px;width:100%}
    .dash-rank-icon{width:42px;height:42px}
    .dash-rank-tag{font-size:9.5px;letter-spacing:1.5px;margin-bottom:4px}
    .dash-rank-main{font-size:17px;flex-wrap:wrap;line-height:1.25;gap:6px}
    .dash-rank-main .pro-mini-badge{width:18px;height:18px}
    .dash-rank-sub{font-size:12px;line-height:1.4}
    .dash-rank-right{width:100%}
    .dash-rank-cta{display:flex;justify-content:center;width:100%;padding:9px 14px;font-size:12.5px}
  }

  @media (max-width:560px){
    /* Linha do ranking compactada pra mobile */
    .rank-row{grid-template-columns:30px 30px 1fr auto auto;padding:10px 12px;gap:9px}
    .rank-row-pos{font-size:11.5px;text-align:left}
    .rank-row-avatar{width:30px;height:30px;font-size:11px;border-width:1px}
    .rank-row-name{font-size:13px;letter-spacing:-.1px}
    .rank-row .rank-row-name b,.rank-board-foot .rank-row .rank-row-name b{font-size:8.5px;padding:2px 6px;margin-left:6px;letter-spacing:1px;border-radius:4px}
    .rank-row-tier-name{display:none}
    .rank-row-tier .rank-shield{width:22px;height:26px}
    .rank-row-tier{gap:0}
    .rank-row-profit{font-size:13px;white-space:nowrap}
    .rank-pro-badge{width:15px;height:15px;margin-left:5px}
    /* Card "Ranking global de apostadores" — head empilhado */
    .rank-top-card{padding:18px 16px}
    .rank-top-head{flex-direction:column;align-items:flex-start;gap:10px}
    .rank-top-meta{font-size:10.5px;align-self:stretch;text-align:center}
    .rank-top-title{font-size:16px}
    .rank-top-sub{font-size:12px}
    /* Footer do ranking quebra linha melhor */
    .rank-board-foot{font-size:11px;padding:12px 12px 4px}
    /* Card do user no bloqueado fica mais compacto também */
    .rank-board-foot .rank-row{padding:10px 12px}
    /* Card do rank atual */
    .rank-current-card{padding:20px 18px}
    .rank-current-head{gap:14px}
    .rank-shield-lg{width:72px;height:72px}
    .rank-shield-md{width:48px;height:48px}
    .rank-current-name{font-size:28px}
    /* Card final do tier */
    .rank-bottom-card{padding:16px 18px;flex-direction:column;align-items:flex-start;gap:14px}
    .rank-bottom-stats{justify-content:space-between;width:100%}
  }


/* ═══════════════════════════════════════════
   TRIAL STICKY BANNER (topo) — sutil mas presente
   ═══════════════════════════════════════════ */
.trial-sticky-banner{
  display:none;
  position:relative;
  margin:0 0 18px 0;
  padding:9px 14px;
  border-radius:10px;
  background:linear-gradient(90deg,rgba(247,147,30,.12),rgba(255,184,0,.08));
  border:1px solid rgba(247,147,30,.32);
  cursor:pointer;
  transition:border-color .18s ease,background .18s ease;
}
.trial-sticky-banner:hover{
  border-color:rgba(247,147,30,.55);
  background:linear-gradient(90deg,rgba(247,147,30,.18),rgba(255,184,0,.12));
}
.trial-sticky-banner.show{display:flex;align-items:center;gap:10px}
.trial-sticky-banner-icon{
  display:flex;align-items:center;
  color:#f7931e;opacity:.95;
}
.trial-sticky-banner-icon svg{width:14px;height:14px}
.trial-sticky-banner-text{
  flex:1;
  color:var(--text);
  font-weight:600;
  font-size:12.5px;
  letter-spacing:.1px;
}
.trial-sticky-banner-text b{
  font-weight:800;
  color:#f7931e;
}
.trial-sticky-banner-cta{
  background:rgba(247,147,30,.18);
  color:#f7931e;
  border:1px solid rgba(247,147,30,.45);
  padding:4px 11px;
  border-radius:7px;
  font-size:11.5px;
  font-weight:700;
  letter-spacing:.2px;
  transition:all .18s ease;
}
.trial-sticky-banner:hover .trial-sticky-banner-cta{
  background:#f7931e;
  color:#fff;
  border-color:#f7931e;
}
@media (max-width:680px){
  /* Mobile: uma unica linha compacta tipo o card 'Ver ranking' */
  .trial-sticky-banner{padding:8px 12px;flex-wrap:nowrap;gap:8px;border-radius:10px;margin-bottom:12px}
  .trial-sticky-banner-text{
    font-size:11.5px;line-height:1.25;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;
  }
  /* Esconde o "tail" longo ("Assine para manter...") no mobile pra caber */
  #trialStickyTail{display:none !important}
  .trial-sticky-banner-icon svg{width:12px;height:12px}
  .trial-sticky-banner-cta{
    flex-shrink:0;font-size:10.5px;padding:5px 10px;
    white-space:nowrap;
  }
}

/* ═══════════════════════════════════════════
   LOCK NAS FEATURES PRO (sidebar)
   ═══════════════════════════════════════════ */
.nav-item.is-pro-locked{
  position:relative;
  opacity:.7;
}
.nav-item.is-pro-locked::after{
  content:'🔒';
  margin-left:auto;
  font-size:11px;
  opacity:.85;
  filter:grayscale(.2);
}
.nav-item.is-pro-locked:hover{opacity:.95}

/* ═══════════════════════════════════════════
   UPGRADE PRO — item discreto, accent dourado
   ═══════════════════════════════════════════ */
.nav-item.nav-upgrade-pro{
  color:#ffd95c;
  font-weight:600;
  position:relative;
}
.nav-item.nav-upgrade-pro:hover{
  color:#fff;
  background:rgba(255,184,0,.08);
}
.nav-item.nav-upgrade-pro .nav-icon svg{stroke:#ffd95c}
.nav-item.nav-upgrade-pro:hover .nav-icon svg{stroke:#fff}
.nav-item.nav-upgrade-pro .upgrade-arrow{
  margin-left:auto;
  font-size:13px;
  opacity:.55;
  transition:transform .2s ease,opacity .2s ease;
}
.nav-item.nav-upgrade-pro:hover .upgrade-arrow{
  transform:translateX(2px);
  opacity:1;
}

/* ═══════════════════════════════════════════
   PRO UPSELL MODAL — premium, mostrado pra Free
   ═══════════════════════════════════════════ */
.pro-upsell-overlay{
  display:none;position:fixed;inset:0;
  background:rgba(5,7,15,.78);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  z-index:9999;align-items:center;justify-content:center;
  padding:24px;animation:proUpsellFadeIn .2s ease;
}
.pro-upsell-overlay.open{display:flex}
@keyframes proUpsellFadeIn{from{opacity:0}to{opacity:1}}
.pro-upsell-card{
  background:linear-gradient(180deg,#1a1d2e 0%,#13141f 100%);
  border:1px solid rgba(255,184,0,.22);
  border-radius:18px;
  padding:32px 30px 26px;
  max-width:540px;width:100%;
  position:relative;
  box-shadow:0 25px 80px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.02) inset;
  animation:proUpsellPop .25s cubic-bezier(.18,1.25,.6,1);
  max-height:90vh;overflow-y:auto;
}
@keyframes proUpsellPop{
  from{opacity:0;transform:translateY(20px) scale(.96)}
  to{opacity:1;transform:translateY(0) scale(1)}
}
.pro-upsell-close{
  position:absolute;top:14px;right:16px;
  background:transparent;border:none;
  color:var(--text-muted);
  font-size:24px;line-height:1;cursor:pointer;
  width:32px;height:32px;border-radius:8px;
  display:flex;align-items:center;justify-content:center;
  transition:all .15s ease;
}
.pro-upsell-close:hover{background:rgba(255,255,255,.06);color:#fff}
.pro-upsell-badge{
  display:inline-block;
  font-size:10.5px;font-weight:800;letter-spacing:1.4px;
  color:#ffd95c;
  background:rgba(255,184,0,.12);
  border:1px solid rgba(255,184,0,.35);
  padding:4px 11px;border-radius:6px;
  margin-bottom:14px;
}
.pro-upsell-title{
  font-size:22px;font-weight:800;line-height:1.25;
  color:#fff;margin-bottom:6px;
}
.pro-upsell-sub{
  font-size:13.5px;color:var(--text-secondary);
  line-height:1.5;margin-bottom:22px;
}
.pro-upsell-benefits{
  display:flex;flex-direction:column;gap:14px;
  margin-bottom:24px;
  padding:18px;
  background:rgba(255,255,255,.025);
  border:1px solid rgba(255,255,255,.06);
  border-radius:12px;
}
.pro-upsell-benefit{
  display:flex;gap:13px;align-items:flex-start;
}
.pro-upsell-benefit-icon{
  width:34px;height:34px;
  background:rgba(139,92,246,.1);
  border-radius:8px;
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;color:#a78bfa;
}
.pro-upsell-benefit-icon svg{width:18px;height:18px}
.pro-upsell-benefit b{
  color:#fff;font-size:13.5px;font-weight:700;
  display:block;margin-bottom:2px;
}
.pro-upsell-benefit-sub{
  font-size:12px;color:var(--text-muted);line-height:1.45;
}
.pro-upsell-cta-row{
  display:grid;grid-template-columns:1fr 1fr;gap:10px;
  margin-bottom:14px;
}
.pro-upsell-cta{
  position:relative;
  padding:14px 12px;
  border-radius:11px;
  border:1px solid rgba(255,255,255,.1);
  background:rgba(255,255,255,.03);
  color:#fff;
  cursor:pointer;
  transition:all .18s ease;
  display:flex;flex-direction:column;align-items:center;gap:3px;
}
.pro-upsell-cta:hover{
  background:rgba(255,255,255,.06);
  border-color:rgba(255,255,255,.18);
  transform:translateY(-1px);
}
.pro-upsell-cta.primary{
  background:linear-gradient(135deg,rgba(99,102,241,.16),rgba(139,92,246,.12));
  border-color:rgba(139,92,246,.42);
}
.pro-upsell-cta.primary:hover{
  background:linear-gradient(135deg,rgba(99,102,241,.28),rgba(139,92,246,.22));
  border-color:rgba(139,92,246,.65);
}
.pro-upsell-cta.gold{
  background:linear-gradient(135deg,rgba(255,184,0,.14),rgba(247,147,30,.1));
  border-color:rgba(255,184,0,.45);
}
.pro-upsell-cta.gold:hover{
  background:linear-gradient(135deg,rgba(255,184,0,.25),rgba(247,147,30,.18));
  border-color:rgba(255,184,0,.7);
}
.pro-upsell-cta-tag{
  position:absolute;top:-9px;right:50%;transform:translateX(50%);
  font-size:9.5px;font-weight:800;letter-spacing:1px;
  background:linear-gradient(90deg,#10b981,#059669);
  color:#fff;padding:3px 9px;border-radius:6px;
  box-shadow:0 4px 12px rgba(16,185,129,.32);
  white-space:nowrap;
}
.pro-upsell-cta-label{
  font-size:11.5px;font-weight:600;color:var(--text-secondary);
  letter-spacing:.4px;text-transform:uppercase;
}
.pro-upsell-cta-price{
  font-size:18px;font-weight:800;color:#fff;
}
.pro-upsell-cta-period{
  font-size:11.5px;font-weight:500;color:var(--text-muted);
  margin-left:2px;
}
.pro-upsell-foot{
  text-align:center;font-size:11.5px;
  color:var(--text-muted);
  letter-spacing:.2px;
}
@media (max-width:540px){
  .pro-upsell-card{padding:24px 20px 20px;border-radius:14px}
  .pro-upsell-title{font-size:19px}
  .pro-upsell-cta-row{grid-template-columns:1fr;gap:8px}
  .pro-upsell-cta-tag{top:50%;right:14px;transform:translateY(-50%)}
}

/* ═══════════════════════════════════════════
   TRIAL ENDING NOTE — aviso inline em features Pro
   ═══════════════════════════════════════════ */
.trial-ending-note{
  display:flex;align-items:center;gap:10px;
  padding:10px 14px;
  background:linear-gradient(90deg,rgba(247,147,30,.14),rgba(255,184,0,.08));
  border:1px solid rgba(247,147,30,.42);
  border-radius:10px;
  margin:0 0 16px 0;
}
.trial-ending-note-icon{display:flex;align-items:center;color:#f7931e;opacity:.95}
.trial-ending-note-icon svg{width:14px;height:14px}
.trial-ending-note-text{
  flex:1;
  font-size:12.5px;color:var(--text);
  font-weight:500;line-height:1.45;
}
.trial-ending-note-text b{
  color:#f7931e;font-weight:800;
}
.trial-ending-note-cta{
  background:rgba(247,147,30,.18);
  color:#f7931e;
  border:1px solid rgba(247,147,30,.45);
  padding:5px 12px;border-radius:7px;
  font-size:11.5px;font-weight:700;
  cursor:pointer;
  transition:all .18s ease;
  white-space:nowrap;
}
.trial-ending-note-cta:hover{
  background:#f7931e;color:#fff;border-color:#f7931e;
}
@media (max-width:640px){
  .trial-ending-note{flex-wrap:wrap;padding:9px 12px}
  .trial-ending-note-text{font-size:12px;flex-basis:100%;order:2}
  .trial-ending-note-icon{order:1;font-size:14px}
  .trial-ending-note-cta{order:3;margin-left:auto;font-size:11px}
}

/* ═══════════════════════════════════════════
   RANK EMPTY STATE — quando ninguem qualificou ainda
   ═══════════════════════════════════════════ */
.rank-empty-state{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:48px 24px;
  text-align:center;
}
.rank-empty-icon{
  width:54px;height:54px;
  margin:0 auto 14px;
  border-radius:14px;
  background:linear-gradient(135deg,rgba(139,92,246,.14),rgba(99,102,241,.08));
  border:1px solid rgba(139,92,246,.28);
  display:flex;align-items:center;justify-content:center;
  color:#a78bfa;
}
.rank-empty-icon svg{width:26px;height:26px}
.rank-empty-title{
  font-size:15px;font-weight:700;color:var(--text);
  margin-bottom:6px;
}
.rank-empty-sub{
  font-size:12.5px;color:var(--text-muted);
  max-width:380px;line-height:1.5;
}

/* ═══════════════════════════════════════════
   WELCOME MODAL — apresentacao na 1a visita
   ═══════════════════════════════════════════ */
.welcome-overlay{
  display:none;position:fixed;inset:0;
  background:rgba(5,7,15,.8);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  z-index:9999;align-items:center;justify-content:center;padding:24px;
  animation:welcomeFadeIn .25s ease;
}
.welcome-overlay.open{display:flex}
@keyframes welcomeFadeIn{from{opacity:0}to{opacity:1}}
.welcome-card{
  background:linear-gradient(180deg,#1a1d2e 0%,#13141f 100%);
  border:1px solid rgba(139,92,246,.28);
  border-radius:18px;
  padding:36px 30px 26px;
  max-width:560px;width:100%;
  position:relative;text-align:center;
  box-shadow:0 25px 80px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.02) inset;
  animation:welcomePop .3s cubic-bezier(.18,1.25,.6,1);
  max-height:90vh;overflow-y:auto;
}
@keyframes welcomePop{from{opacity:0;transform:translateY(24px) scale(.94)}to{opacity:1;transform:translateY(0) scale(1)}}
.welcome-close{
  position:absolute;top:14px;right:16px;background:transparent;border:none;
  color:var(--text-muted);font-size:24px;line-height:1;cursor:pointer;
  width:32px;height:32px;border-radius:8px;
  display:flex;align-items:center;justify-content:center;transition:all .15s ease;
}
.welcome-close:hover{background:rgba(255,255,255,.06);color:#fff}
.welcome-hero-icon{
  width:56px;height:56px;
  margin:0 auto 14px;
  border-radius:14px;
  background:linear-gradient(135deg,rgba(139,92,246,.22),rgba(99,102,241,.14));
  border:1px solid rgba(139,92,246,.42);
  display:flex;align-items:center;justify-content:center;
  color:#c9b8ff;
  box-shadow:0 8px 24px rgba(124,92,255,.22);
}
.welcome-hero-icon svg{width:28px;height:28px}
.welcome-feat-icon svg{width:18px;height:18px;color:#a78bfa}
.welcome-title{font-size:24px;font-weight:800;line-height:1.2;color:#fff;margin-bottom:6px}
.welcome-sub{font-size:13.5px;color:var(--text-secondary);line-height:1.55;margin-bottom:24px}
.welcome-sub b{color:#a78bfa}
.welcome-features{
  display:flex;flex-direction:column;gap:14px;margin-bottom:24px;
  padding:20px;text-align:left;
  background:rgba(255,255,255,.025);
  border:1px solid rgba(255,255,255,.06);border-radius:12px;
}
.welcome-feat{display:flex;gap:13px;align-items:flex-start}
.welcome-feat-icon{
  font-size:20px;width:36px;height:36px;
  background:rgba(139,92,246,.12);border-radius:8px;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.welcome-feat b{color:#fff;font-size:13.5px;font-weight:700;display:block;margin-bottom:2px}
.welcome-feat-sub{font-size:12px;color:var(--text-muted);line-height:1.45}
.welcome-cta{
  width:100%;padding:13px 20px;
  background:linear-gradient(135deg,#7c5cff,#a282ff);
  color:#fff;font-size:14px;font-weight:700;
  border:none;border-radius:11px;cursor:pointer;
  letter-spacing:.3px;
  box-shadow:0 8px 24px rgba(124,92,255,.32);
  transition:all .18s ease;
  margin-bottom:12px;
}
.welcome-cta:hover{transform:translateY(-1px);box-shadow:0 12px 32px rgba(124,92,255,.45)}
.welcome-foot{font-size:12px;color:var(--text-muted);text-align:center;letter-spacing:.2px}
.welcome-foot b{color:var(--text-secondary)}
@media (max-width:560px){
  .welcome-card{padding:26px 22px 22px;border-radius:14px}
  .welcome-hero-icon{width:48px;height:48px}
  .welcome-hero-icon svg{width:24px;height:24px}
  .welcome-title{font-size:21px}
}

/* ═══════════════════════════════════════════
   ONBOARDING CARD — primeiros passos no Dashboard
   ═══════════════════════════════════════════ */
.onboarding-card{
  position:relative;
  background:linear-gradient(135deg,rgba(139,92,246,.08),rgba(99,102,241,.05));
  border:1px solid rgba(139,92,246,.22);
  border-radius:14px;
  padding:20px 22px;
  margin-bottom:16px;
}
.onboarding-close{
  position:absolute;top:12px;right:14px;background:transparent;border:none;
  color:var(--text-muted);font-size:20px;line-height:1;cursor:pointer;
  width:28px;height:28px;border-radius:7px;
  display:flex;align-items:center;justify-content:center;transition:all .15s ease;
}
.onboarding-close:hover{background:rgba(255,255,255,.06);color:#fff}
.onboarding-head{display:flex;align-items:center;gap:14px;margin-bottom:18px}
.onboarding-head-icon{
  width:42px;height:42px;
  background:linear-gradient(135deg,rgba(139,92,246,.18),rgba(99,102,241,.1));
  border:1px solid rgba(139,92,246,.32);
  border-radius:10px;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
  color:#c9b8ff;
}
.onboarding-head-icon svg{width:22px;height:22px}
.onboarding-close{display:flex;align-items:center;justify-content:center}
.onboarding-arrow{display:flex;align-items:center;color:var(--text-muted)}
.onboarding-title{font-size:16px;font-weight:800;color:#fff;line-height:1.2}
.onboarding-sub{font-size:12.5px;color:var(--text-muted);margin-top:2px}
.onboarding-steps{display:flex;flex-direction:column;gap:8px}
.onboarding-step{
  display:flex;align-items:center;gap:12px;
  padding:11px 14px;
  background:rgba(255,255,255,.025);
  border:1px solid rgba(255,255,255,.06);
  border-radius:10px;
  cursor:pointer;
  transition:all .18s ease;
}
.onboarding-step:hover{
  background:rgba(139,92,246,.08);
  border-color:rgba(139,92,246,.32);
  transform:translateX(2px);
}
.onboarding-check{
  width:18px;height:18px;border-radius:50%;
  border:1.5px solid rgba(255,255,255,.22);
  flex-shrink:0;position:relative;
  transition:all .2s ease;
}
.onboarding-step.is-done .onboarding-check{
  background:linear-gradient(135deg,#10b981,#059669);
  border-color:#10b981;
}
.onboarding-step.is-done .onboarding-check::after{
  content:'';position:absolute;
  left:5px;top:1.5px;
  width:5px;height:9px;
  border:solid #fff;border-width:0 2px 2px 0;
  transform:rotate(45deg);
}
.onboarding-step-text{flex:1;min-width:0}
.onboarding-step-text b{
  color:#fff;font-size:13px;font-weight:700;
  display:block;margin-bottom:2px;
}
.onboarding-step-text span{
  color:var(--text-muted);font-size:11.5px;
  display:block;line-height:1.4;
}
.onboarding-step.is-done b{
  color:#cbd5e1;text-decoration:line-through;
  opacity:.92;
}
.onboarding-step.is-done span{color:#94a3b8;opacity:.85}
.onboarding-step.is-done{background:rgba(16,185,129,.04);border-color:rgba(16,185,129,.18)}
.onboarding-arrow{
  color:var(--text-muted);font-size:14px;
  flex-shrink:0;transition:transform .2s ease;
}
.onboarding-step:hover .onboarding-arrow{transform:translateX(3px);color:#a78bfa}
.onboarding-step.is-done .onboarding-arrow{display:none}

/* ═══════════════════════════════════════════
   PAYWALL PREMIUM — trial expirado (substitui paywall antigo)
   ═══════════════════════════════════════════ */
.paywall-overlay-premium{
  display:none;position:fixed;inset:0;
  background:rgba(5,7,15,.85);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  z-index:9999;align-items:center;justify-content:center;padding:24px;
  animation:proUpsellFadeIn .25s ease;
}
.paywall-overlay-premium[style*="flex"]{display:flex !important}
.paywall-card-premium{
  background:linear-gradient(180deg,#1a1d2e 0%,#13141f 100%);
  border:1px solid rgba(247,147,30,.34);
  border-radius:18px;
  padding:34px 30px 26px;
  max-width:560px;width:100%;
  position:relative;
  box-shadow:0 30px 100px rgba(0,0,0,.65),0 0 0 1px rgba(255,255,255,.02) inset,0 0 60px rgba(247,147,30,.08);
  animation:proUpsellPop .3s cubic-bezier(.18,1.25,.6,1);
  max-height:92vh;overflow-y:auto;
}
.paywall-badge{
  display:inline-block;
  font-size:10.5px;font-weight:800;letter-spacing:1.5px;
  color:#f7931e;
  background:rgba(247,147,30,.14);
  border:1px solid rgba(247,147,30,.42);
  padding:5px 12px;border-radius:6px;
  margin-bottom:16px;
}
.paywall-title{
  font-size:23px;font-weight:800;line-height:1.25;
  color:#fff;margin-bottom:8px;
}
.paywall-sub{
  font-size:13.5px;color:var(--text-secondary);
  line-height:1.55;margin-bottom:22px;
}
.paywall-benefits{
  display:flex;flex-direction:column;gap:14px;
  margin-bottom:24px;
  padding:18px;
  background:rgba(255,255,255,.025);
  border:1px solid rgba(255,255,255,.06);
  border-radius:12px;
}
.paywall-benefit{
  display:flex;gap:13px;align-items:flex-start;
}
.paywall-benefit-icon{
  width:34px;height:34px;
  background:rgba(247,147,30,.1);
  border:1px solid rgba(247,147,30,.22);
  border-radius:8px;
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;color:#f7931e;
}
.paywall-benefit-icon svg{width:18px;height:18px}
.paywall-benefit b{
  color:#fff;font-size:13.5px;font-weight:700;
  display:block;margin-bottom:2px;
}
.paywall-benefit-sub{font-size:12px;color:var(--text-muted);line-height:1.45}
.paywall-cta-row{
  display:grid;grid-template-columns:1fr 1fr;gap:10px;
  margin-bottom:16px;
}
.paywall-cta{
  position:relative;
  padding:14px 12px;
  border-radius:11px;
  border:1px solid rgba(255,255,255,.1);
  background:rgba(255,255,255,.03);
  color:#fff;cursor:pointer;
  transition:all .18s ease;
  display:flex;flex-direction:column;align-items:center;gap:3px;
}
.paywall-cta:hover{transform:translateY(-1px)}
.paywall-cta.primary{
  background:linear-gradient(135deg,rgba(99,102,241,.16),rgba(139,92,246,.12));
  border-color:rgba(139,92,246,.42);
}
.paywall-cta.primary:hover{
  background:linear-gradient(135deg,rgba(99,102,241,.28),rgba(139,92,246,.22));
  border-color:rgba(139,92,246,.65);
}
.paywall-cta.gold{
  background:linear-gradient(135deg,rgba(255,184,0,.14),rgba(247,147,30,.1));
  border-color:rgba(255,184,0,.45);
}
.paywall-cta.gold:hover{
  background:linear-gradient(135deg,rgba(255,184,0,.25),rgba(247,147,30,.18));
  border-color:rgba(255,184,0,.7);
}
.paywall-cta-tag{
  position:absolute;top:-9px;right:50%;transform:translateX(50%);
  font-size:9.5px;font-weight:800;letter-spacing:1px;
  background:linear-gradient(90deg,#10b981,#059669);
  color:#fff;padding:3px 9px;border-radius:6px;
  box-shadow:0 4px 12px rgba(16,185,129,.32);
  white-space:nowrap;
}
.paywall-cta-label{
  font-size:11.5px;font-weight:600;color:var(--text-secondary);
  letter-spacing:.4px;text-transform:uppercase;
}
.paywall-cta-price{font-size:18px;font-weight:800;color:#fff}
.paywall-cta-period{
  font-size:11.5px;font-weight:500;color:var(--text-muted);
  margin-left:2px;
}
.paywall-foot-premium{
  text-align:center;font-size:11.5px;
  color:var(--text-muted);
  letter-spacing:.2px;line-height:1.7;
  display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:6px;
}
.paywall-foot-premium a{
  color:#a78bfa;cursor:pointer;text-decoration:none;font-weight:600;
}
.paywall-foot-premium a:hover{color:#c9b8ff;text-decoration:underline}
.paywall-foot-sep{color:var(--text-muted);opacity:.5}
@media (max-width:540px){
  .paywall-card-premium{padding:26px 22px 22px;border-radius:14px}
  .paywall-title{font-size:20px}
  .paywall-cta-row{grid-template-columns:1fr;gap:8px}
  .paywall-cta-tag{top:50%;right:14px;transform:translateY(-50%)}
  .paywall-foot-premium{font-size:11px}
}

/* ═══════════════════════════════════════════
   PAYWALL PREMIUM v2 — overhaul completo
   ═══════════════════════════════════════════ */
.paywall-card-premium{
  max-width:760px !important;padding:0 !important;border-radius:20px !important;
  border:1px solid rgba(255,255,255,.08) !important;
  background:linear-gradient(180deg,#0f1322 0%,#0a0d18 100%) !important;
  overflow:hidden !important;position:relative !important;
  box-shadow:0 40px 120px rgba(0,0,0,.75),0 0 0 1px rgba(255,255,255,.02) inset,0 0 80px rgba(247,147,30,.06) !important;
}
.paywall-glow{
  position:absolute;top:-200px;left:50%;transform:translateX(-50%);
  width:600px;height:600px;
  background:radial-gradient(circle,rgba(247,147,30,.16) 0%,rgba(247,147,30,.06) 30%,transparent 60%);
  pointer-events:none;z-index:0;animation:paywallGlow 6s ease-in-out infinite;
}
@keyframes paywallGlow{0%,100%{opacity:.85;transform:translateX(-50%) scale(1)}50%{opacity:1;transform:translateX(-50%) scale(1.05)}}
.paywall-hero{position:relative;z-index:1;padding:36px 36px 24px;text-align:center}
.paywall-hero-icon{
  width:60px;height:60px;margin:0 auto 18px;border-radius:16px;
  background:linear-gradient(135deg,rgba(247,147,30,.25),rgba(255,184,0,.12));
  border:1px solid rgba(247,147,30,.45);
  display:flex;align-items:center;justify-content:center;color:#ffd95c;
  box-shadow:0 10px 30px rgba(247,147,30,.32),0 0 40px rgba(247,147,30,.18);
  animation:paywallIconPulse 2.6s ease-in-out infinite;
}
.paywall-hero-icon svg{width:30px;height:30px}
@keyframes paywallIconPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.04)}}

/* Hero medal premium (hexagono com estrela + sparkles) */
.paywall-hero-medal{
  position:relative;width:80px;height:80px;margin:0 auto 18px;
  filter:drop-shadow(0 14px 28px rgba(247,147,30,.42)) drop-shadow(0 0 36px rgba(247,147,30,.32));
  animation:paywallMedalFloat 3.2s ease-in-out infinite;
}
.paywall-hero-medal svg{width:100%;height:100%;display:block}
@keyframes paywallMedalFloat{
  0%,100%{transform:translateY(0) scale(1)}
  50%{transform:translateY(-3px) scale(1.025)}
}
.paywall-hero-sparkle{
  position:absolute;width:6px;height:6px;border-radius:50%;
  background:radial-gradient(circle,#fff6b8,rgba(255,212,79,.4) 60%,transparent 75%);
  pointer-events:none;
  animation:paywallSparkle 2.6s ease-in-out infinite;
}
.paywall-hero-sparkle-1{top:6%;left:-8%;animation-delay:0s}
.paywall-hero-sparkle-2{top:14%;right:-12%;width:4px;height:4px;animation-delay:.6s}
.paywall-hero-sparkle-3{bottom:18%;left:-10%;width:5px;height:5px;animation-delay:1.2s}
.paywall-hero-sparkle-4{bottom:6%;right:-6%;width:4px;height:4px;animation-delay:1.8s}
@keyframes paywallSparkle{
  0%,100%{opacity:.2;transform:scale(.7)}
  50%{opacity:1;transform:scale(1.3)}
}
.paywall-card-premium .paywall-badge{
  display:inline-block;font-size:10.5px;font-weight:800;letter-spacing:1.8px;
  color:#f7931e;background:rgba(247,147,30,.12);border:1px solid rgba(247,147,30,.42);
  padding:5px 14px;border-radius:6px;margin-bottom:18px;
}
.paywall-card-premium .paywall-title{
  font-size:30px;font-weight:800;line-height:1.18;color:#fff;margin:0 0 12px;letter-spacing:-.5px;
}
.paywall-title-accent{
  background:linear-gradient(90deg,#f7931e,#ffb800);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.paywall-card-premium .paywall-sub{
  font-size:14px;color:var(--text-secondary);line-height:1.55;
  margin:0 auto;max-width:520px;
}
.paywall-stats{
  position:relative;z-index:1;
  padding:16px 36px 18px;background:rgba(255,255,255,.025);
  border-top:1px solid rgba(255,255,255,.06);
  border-bottom:1px solid rgba(255,255,255,.06);margin-top:16px;
}
.paywall-stats-title{
  font-size:10.5px;font-weight:700;letter-spacing:1.6px;
  text-transform:uppercase;color:var(--text-muted);
  text-align:center;margin-bottom:14px;
}
.paywall-stats-row{display:flex;align-items:center;justify-content:center;gap:32px}
.paywall-stat{display:flex;align-items:center;gap:12px;text-align:left}
.paywall-stat-icon{
  width:34px;height:34px;border-radius:9px;
  background:linear-gradient(135deg,rgba(139,92,246,.16),rgba(99,102,241,.08));
  border:1px solid rgba(139,92,246,.32);
  display:flex;align-items:center;justify-content:center;color:#a78bfa;flex-shrink:0;
}
.paywall-stat-icon svg{width:17px;height:17px}
.paywall-stat-body{display:flex;flex-direction:column;line-height:1.05}
.paywall-stat-num{
  font-size:24px;font-weight:800;letter-spacing:-.5px;line-height:1;
  background:linear-gradient(135deg,#fff,#a78bfa);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.paywall-stat-lbl{
  font-size:10.5px;color:var(--text-muted);text-transform:uppercase;
  letter-spacing:1.2px;margin-top:3px;font-weight:600;
}
.paywall-stat-sep{width:1px;height:36px;background:linear-gradient(180deg,transparent,rgba(255,255,255,.12),transparent)}
.paywall-plans{
  position:relative;z-index:1;
  display:grid;grid-template-columns:1fr 1fr;gap:14px;padding:24px 24px 18px;
}
.paywall-plan{
  position:relative;padding:24px 22px 22px;
  background:rgba(255,255,255,.025);border:1px solid rgba(255,255,255,.08);
  border-radius:14px;transition:all .22s ease;
  display:flex;flex-direction:column;
}
.paywall-plan:hover{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.16);transform:translateY(-2px)}
.paywall-plan-featured{
  background:linear-gradient(180deg,rgba(247,147,30,.08),rgba(255,184,0,.04));
  border-color:rgba(247,147,30,.42);box-shadow:0 10px 30px rgba(247,147,30,.12);
}
.paywall-plan-featured:hover{border-color:rgba(247,147,30,.65);box-shadow:0 14px 38px rgba(247,147,30,.2)}
.paywall-plan-ribbon{
  position:absolute;top:-1px;right:-1px;
  font-size:9.5px;font-weight:800;letter-spacing:1.1px;
  background:linear-gradient(90deg,#10b981,#059669);color:#fff;
  padding:5px 11px;border-radius:0 13px 0 8px;box-shadow:0 6px 16px rgba(16,185,129,.32);
}
.paywall-plan-head{display:flex;align-items:baseline;gap:10px;margin-bottom:10px}
.paywall-plan-name{font-size:18px;font-weight:800;color:#fff;letter-spacing:-.3px}
.paywall-plan-tag{
  font-size:9.5px;font-weight:700;letter-spacing:1.2px;color:var(--text-muted);
  background:rgba(255,255,255,.05);padding:2px 8px;border-radius:5px;
}
.paywall-plan-featured .paywall-plan-tag{background:rgba(247,147,30,.15);color:#ffd95c}
.paywall-plan-price{display:flex;align-items:baseline;gap:2px;margin-bottom:4px}
.paywall-plan-currency{font-size:13px;font-weight:600;color:var(--text-muted)}
.paywall-plan-value{font-size:38px;font-weight:800;color:#fff;letter-spacing:-1.5px;line-height:1}
.paywall-plan-period{font-size:13px;color:var(--text-muted);margin-left:3px;font-weight:500}
.paywall-plan-equiv{font-size:11.5px;color:var(--text-muted);margin-bottom:18px;letter-spacing:.1px}
.paywall-plan-equiv b{color:#10b981;font-weight:700}
.paywall-plan-features{list-style:none;padding:0;margin:0 0 18px;display:flex;flex-direction:column;gap:8px;flex:1}
.paywall-plan-features li{
  display:flex;align-items:flex-start;gap:8px;
  font-size:12.5px;color:var(--text-secondary);line-height:1.45;
}
.paywall-plan-features li svg{color:#10b981;flex-shrink:0;margin-top:1.5px}
.paywall-plan-features li b{color:#fff;font-weight:700}
.paywall-plan-cta{
  width:100%;padding:12px;background:transparent;color:#c9b8ff;
  border:1.5px solid rgba(139,92,246,.5);border-radius:10px;
  font-size:13px;font-weight:700;cursor:pointer;letter-spacing:.3px;
  transition:all .18s ease;display:flex;align-items:center;justify-content:center;
}
.paywall-plan-cta:hover{
  background:rgba(139,92,246,.12);
  border-color:rgba(139,92,246,.8);
  color:#fff;
  box-shadow:0 6px 20px rgba(139,92,246,.22);
}
.paywall-plan-cta-featured{
  background:linear-gradient(135deg,#f7931e,#ffb800) !important;
  border-color:rgba(247,147,30,.6) !important;color:#0f1322 !important;
  font-weight:800 !important;box-shadow:0 8px 24px rgba(247,147,30,.32);
}
.paywall-plan-cta-featured:hover{
  background:linear-gradient(135deg,#ffa733,#ffc928) !important;
  box-shadow:0 12px 32px rgba(247,147,30,.45);transform:translateY(-1px);
}
.paywall-guarantee{
  position:relative;z-index:1;
  display:flex;align-items:center;gap:12px;
  margin:0 24px 18px;padding:12px 16px;
  background:rgba(16,185,129,.06);border:1px solid rgba(16,185,129,.22);
  border-radius:10px;font-size:12.5px;color:var(--text-secondary);line-height:1.45;
}
.paywall-guarantee-icon{
  width:38px;height:38px;border-radius:10px;
  background:linear-gradient(135deg,rgba(16,185,129,.18),rgba(5,150,105,.08));
  border:1px solid rgba(16,185,129,.35);
  display:flex;align-items:center;justify-content:center;color:#34d399;flex-shrink:0;
}
.paywall-guarantee-icon svg{width:20px;height:20px}
.paywall-guarantee b{color:#fff;font-weight:700}
.paywall-card-premium .paywall-foot-premium{padding:14px 24px 22px;text-align:center;font-size:11.5px}
@media (max-width:680px){
  .paywall-card-premium{max-width:96vw !important}
  .paywall-hero{padding:28px 22px 18px}
  .paywall-card-premium .paywall-title{font-size:24px}
  .paywall-stats{gap:18px;padding:14px 16px}
  .paywall-stat-num{font-size:18px}
  .paywall-plans{grid-template-columns:1fr;padding:20px 16px 12px;gap:12px}
  .paywall-guarantee{margin:0 16px 14px;font-size:11.5px}
}

/* ═══════════════════════════════════════════
   PRO UPSELL MODAL v2 — estilo Canva
   ═══════════════════════════════════════════ */
.pro-upsell-canva{
  max-width:480px !important;padding:0 !important;border-radius:18px !important;
  background:linear-gradient(180deg,#161827 0%,#0e101a 100%) !important;
  border:1px solid rgba(139,92,246,.28) !important;
  overflow:hidden !important;position:relative !important;
}
.pro-upsell-canva .pro-upsell-close{z-index:5}
.upsell-preview{
  position:relative;width:100%;height:170px;
  background:radial-gradient(ellipse 100% 80% at 50% 100%,rgba(139,92,246,.22),transparent 70%),linear-gradient(180deg,#1a1d2e,#13141f);
  border-bottom:1px solid rgba(255,255,255,.04);
  overflow:hidden;
}
.upsell-preview-content{
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  padding:18px;
  filter:blur(.5px);
  opacity:.65;
}
.upsell-preview-content svg{width:100%;height:100%;max-width:320px;display:block}
.upsell-preview-lock{
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  background:radial-gradient(circle at center,rgba(20,24,40,.55) 0%,rgba(20,24,40,.85) 70%);
  z-index:2;
}
.upsell-lock-icon{
  width:54px;height:54px;border-radius:14px;
  background:linear-gradient(135deg,rgba(139,92,246,.4),rgba(99,102,241,.2));
  border:1.5px solid rgba(167,139,250,.6);
  display:flex;align-items:center;justify-content:center;
  color:#fff;
  box-shadow:0 14px 32px rgba(139,92,246,.42),0 0 36px rgba(139,92,246,.28);
  animation:upsellLockPulse 2.4s ease-in-out infinite;
}
.upsell-lock-icon svg{width:26px;height:26px}
@keyframes upsellLockPulse{
  0%,100%{transform:scale(1);box-shadow:0 14px 32px rgba(139,92,246,.42),0 0 36px rgba(139,92,246,.28)}
  50%{transform:scale(1.04);box-shadow:0 18px 38px rgba(139,92,246,.55),0 0 48px rgba(139,92,246,.4)}
}

.upsell-body{padding:22px 24px 22px}
.upsell-pro-badge{
  display:inline-flex;align-items:center;gap:5px;
  font-size:10px;font-weight:800;letter-spacing:1.6px;
  background:linear-gradient(90deg,#7c5cff,#a282ff);
  color:#fff;padding:5px 11px;border-radius:6px;margin-bottom:14px;
  box-shadow:0 4px 14px rgba(124,92,255,.32);
}
.upsell-title{
  font-size:21px;font-weight:800;line-height:1.25;
  color:#fff;margin:0 0 6px;letter-spacing:-.3px;
}
.upsell-sub{
  font-size:13px;color:var(--text-secondary);
  line-height:1.55;margin:0 0 22px;
}

/* Grid de extras (outras features Pro) */
.upsell-extras{margin-bottom:20px}
.upsell-extras-label{
  font-size:10.5px;font-weight:700;letter-spacing:1.4px;
  text-transform:uppercase;color:var(--text-muted);
  margin-bottom:10px;
}
.upsell-extras-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:8px;
}
.upsell-extra{
  display:flex;flex-direction:column;align-items:center;gap:6px;
  padding:12px 6px;
  background:rgba(255,255,255,.025);
  border:1px solid rgba(255,255,255,.06);
  border-radius:9px;
  color:var(--text-muted);
  transition:all .2s ease;
}
.upsell-extra svg{width:18px;height:18px;color:#a78bfa;opacity:.85}
.upsell-extra span{
  font-size:10px;font-weight:600;text-align:center;line-height:1.2;
}
.upsell-extra.is-current{
  background:rgba(139,92,246,.12);
  border-color:rgba(139,92,246,.45);
  color:#fff;
}
.upsell-extra.is-current svg{opacity:1;color:#c9b8ff}
.upsell-extra.is-current::after{
  content:'';display:block;width:6px;height:6px;border-radius:50%;
  background:#10b981;margin-top:-4px;
  box-shadow:0 0 8px rgba(16,185,129,.6);
}

/* Plans (botoes de assinar) */
.upsell-plans{display:flex;flex-direction:column;gap:8px;margin-bottom:14px}
.upsell-plan{
  position:relative;
  display:flex;align-items:center;gap:12px;
  width:100%;padding:14px 16px;
  border-radius:11px;cursor:pointer;
  transition:all .18s ease;
}
.upsell-plan svg{flex-shrink:0;color:inherit}
.upsell-plan-info{flex:1;text-align:left;display:flex;flex-direction:column;gap:2px}
.upsell-plan-name{
  font-size:12px;font-weight:700;letter-spacing:.3px;
  text-transform:uppercase;
}
.upsell-plan-price{
  font-size:16px;font-weight:800;color:#fff;
}
.upsell-plan-price span{
  font-size:11.5px;font-weight:500;
  color:var(--text-muted);margin-left:4px;
}
.upsell-plan-plus{
  background:rgba(255,255,255,.04);
  border:1px solid rgba(139,92,246,.32);
  color:#c9b8ff;
}
.upsell-plan-plus:hover{
  background:rgba(139,92,246,.1);
  border-color:rgba(139,92,246,.55);
}
.upsell-plan-pro{
  background:linear-gradient(135deg,#7c5cff,#a282ff);
  border:1px solid rgba(139,92,246,.6);
  color:#fff;
  box-shadow:0 8px 24px rgba(124,92,255,.36);
}
.upsell-plan-pro:hover{
  background:linear-gradient(135deg,#8b6cff,#b095ff);
  box-shadow:0 12px 32px rgba(124,92,255,.5);
  transform:translateY(-1px);
}
.upsell-plan-pro .upsell-plan-name{color:rgba(255,255,255,.82)}
.upsell-plan-pro .upsell-plan-price span{color:rgba(255,255,255,.72)}
.upsell-plan-tag{
  position:absolute;top:-7px;right:14px;
  font-size:9px;font-weight:800;letter-spacing:1px;
  background:linear-gradient(90deg,#10b981,#059669);
  color:#fff;padding:3px 8px;border-radius:5px;
  box-shadow:0 4px 10px rgba(16,185,129,.32);
}

.upsell-trust{
  display:flex;align-items:center;gap:7px;justify-content:center;
  font-size:11px;color:var(--text-muted);
  letter-spacing:.2px;
}
.upsell-trust svg{color:#34d399;opacity:.85}

@media (max-width:480px){
  .pro-upsell-canva{max-width:96vw !important}
  .upsell-preview{height:140px}
  .upsell-body{padding:18px 18px 18px}
  .upsell-title{font-size:19px}
  .upsell-extras-grid{grid-template-columns:repeat(2,1fr)}
}

/* ═══════════════════════════════════════════
   GERENCIAR ASSINATURA — estilo Notion
   ═══════════════════════════════════════════ */
.sub-mgmt-card{padding:0 !important;overflow:hidden}
.sub-mgmt-card > .form-card-title{
  padding:18px 22px 16px;margin:0;
  border-bottom:1px solid var(--border);
  font-size:13px !important;
}
#subscriptionCard{padding:22px 22px 20px;display:block !important;background:none !important;border:none !important}

.sub-mgmt-head{
  display:flex;align-items:flex-start;justify-content:space-between;gap:16px;
  margin-bottom:22px;
}
.sub-mgmt-head-left{display:flex;flex-direction:column;gap:4px;min-width:0}
.sub-mgmt-plan{
  font-size:20px;font-weight:700;color:var(--text);
  letter-spacing:-.3px;line-height:1.2;
}
.sub-mgmt-price{
  font-size:13px;color:var(--text-muted);
  font-weight:500;letter-spacing:.1px;
}
.sub-mgmt-status{
  display:inline-flex;align-items:center;gap:6px;
  font-size:11.5px;font-weight:700;letter-spacing:.3px;
  padding:5px 11px;border-radius:6px;
  white-space:nowrap;
}
.sub-mgmt-status-dot{
  width:6px;height:6px;border-radius:50%;
  box-shadow:0 0 8px currentColor;
}
.sub-mgmt-status-active{background:rgba(16,185,129,.12);color:#34d399;border:1px solid rgba(16,185,129,.32)}
.sub-mgmt-status-active .sub-mgmt-status-dot{background:#10b981}
.sub-mgmt-status-trial{background:rgba(247,147,30,.12);color:#f7931e;border:1px solid rgba(247,147,30,.32)}
.sub-mgmt-status-trial .sub-mgmt-status-dot{background:#f7931e}
.sub-mgmt-status-inactive{background:rgba(239,68,68,.1);color:#f87171;border:1px solid rgba(239,68,68,.28)}
.sub-mgmt-status-inactive .sub-mgmt-status-dot{background:#ef4444}
.sub-mgmt-status-owner{background:rgba(139,92,246,.14);color:#c9b8ff;border:1px solid rgba(139,92,246,.4)}
.sub-mgmt-status-owner .sub-mgmt-status-dot{background:#a78bfa}

.sub-mgmt-rows{display:flex;flex-direction:column;gap:0;margin-bottom:6px}
.sub-mgmt-row{
  display:flex;align-items:center;justify-content:space-between;
  padding:11px 0;border-bottom:1px solid var(--border);
  font-size:13px;
}
.sub-mgmt-row:last-child{border-bottom:none}
.sub-mgmt-row-k{color:var(--text-muted);font-weight:500}
.sub-mgmt-row-v{color:var(--text);font-weight:600;letter-spacing:.1px}
.sub-mgmt-row-v.is-warning{color:#f7931e}
.sub-mgmt-row-v.sub-mgmt-row-muted{color:var(--text-secondary);font-weight:500}

.sub-mgmt-divider{
  height:1px;background:var(--border);
  margin:18px 0;
}

.sub-mgmt-features{margin-bottom:20px}
.sub-mgmt-features-label{
  font-size:10.5px;font-weight:700;letter-spacing:1.5px;
  text-transform:uppercase;color:var(--text-muted);
  margin-bottom:12px;
}
.sub-mgmt-features-list{
  list-style:none;padding:0;margin:0;
  display:flex;flex-direction:column;gap:8px;
}
.sub-mgmt-features-list li{
  display:flex;align-items:flex-start;gap:9px;
  font-size:13px;color:var(--text);
  line-height:1.45;
}
.sub-mgmt-features-list li svg{
  color:#10b981;flex-shrink:0;margin-top:3px;
}

.sub-mgmt-empty{
  font-size:13px;color:var(--text-secondary);
  line-height:1.55;margin:0 0 18px;
}

.sub-mgmt-actions{
  display:flex;flex-wrap:wrap;gap:8px;
  padding-top:4px;
}
.sub-mgmt-btn{
  padding:9px 16px;
  font-size:12.5px;font-weight:600;letter-spacing:.2px;
  border-radius:8px;cursor:pointer;
  transition:all .15s ease;
  display:inline-flex;align-items:center;justify-content:center;
}
.sub-mgmt-btn.primary{
  background:var(--text);color:var(--bg);
  border:1px solid var(--text);
}
.sub-mgmt-btn.primary:hover{
  background:var(--text-secondary);border-color:var(--text-secondary);
}
.sub-mgmt-btn.ghost{
  background:transparent;color:var(--text-secondary);
  border:1px solid var(--border);
}
.sub-mgmt-btn.ghost:hover{
  background:var(--bg-secondary);color:var(--text);
  border-color:var(--text-muted);
}

@media (max-width:640px){
  .sub-mgmt-head{flex-direction:column;gap:10px}
  .sub-mgmt-plan{font-size:18px}
  .sub-mgmt-row{font-size:12.5px}
}

/* ═══════════════════════════════════════════
   MINHAS INDICACOES — sistema de niveis
   ═══════════════════════════════════════════ */
.aff-tier-card{
  position:relative;
  margin-bottom:16px;
  padding:22px 24px;
  background:linear-gradient(135deg,#171c30 0%,#0e1220 100%);
  border:1px solid rgba(247,147,30,.28);
  border-radius:14px;
  overflow:hidden;
  display:grid;
  grid-template-columns:auto 1fr;
  gap:24px;
  align-items:center;
}
.aff-tier-card.is-vip{ border-color:rgba(124,92,255,.45); }
.aff-tier-glow{
  position:absolute;top:-150px;right:-100px;
  width:400px;height:400px;
  background:radial-gradient(circle,rgba(247,147,30,.18) 0%,transparent 60%);
  pointer-events:none;z-index:0;
}
.aff-tier-card.is-vip .aff-tier-glow{
  background:radial-gradient(circle,rgba(124,92,255,.22) 0%,transparent 60%);
}
.aff-tier-left{ display:flex;align-items:center;gap:16px;position:relative;z-index:1; }
.aff-tier-medal{ width:80px;height:80px;flex-shrink:0;display:flex;align-items:center;justify-content:center; }
.aff-tier-medal svg, .aff-tier-medal img{ width:100%;height:100%;display:block;object-fit:contain; }
.aff-badge-hero{ filter:drop-shadow(0 10px 24px rgba(0,0,0,.55)); }
.aff-tier-card.is-vip .aff-badge-hero{ filter:drop-shadow(0 10px 28px rgba(124,92,255,.5)); }
.aff-tier-info{ min-width:0; }
.aff-tier-eyebrow{ font-size:10.5px;font-weight:700;letter-spacing:1.4px;text-transform:uppercase;color:var(--text-muted);margin-bottom:4px; }
.aff-tier-name{ font-size:22px;font-weight:800;color:#fff;letter-spacing:-.4px;line-height:1.1; }
.aff-tier-rate{ font-size:13px;color:#f7931e;font-weight:600;margin-top:3px; }
.aff-tier-card.is-vip .aff-tier-rate{ color:#a78bfa; }
.aff-tier-progress{ position:relative;z-index:1;min-width:0; }
.aff-tier-progress-head{ display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;font-size:12px; }
.aff-tier-progress-next{ color:var(--text-secondary);font-weight:600; }
.aff-tier-progress-count{ color:var(--text-secondary);font-weight:600; }
.aff-tier-progress-count b{ color:#fff;font-weight:800; }
.aff-tier-progress-bar{
  height:8px;border-radius:4px;
  background:rgba(255,255,255,.06);
  overflow:hidden;
}
.aff-tier-progress-fill{
  height:100%;border-radius:4px;
  background:linear-gradient(90deg,#f7931e,#ffb800);
  transition:width .6s cubic-bezier(.4,0,.2,1);
}
.aff-tier-card.is-vip .aff-tier-progress-fill{
  background:linear-gradient(90deg,#7c5cff,#a78bfa);
}
.aff-tier-progress-foot{ margin-top:8px;font-size:12px;color:var(--text-muted);line-height:1.4; }
.aff-tier-progress-foot b{ color:#fff;font-weight:700; }
.aff-tier-progress.is-max .aff-tier-progress-foot{ color:#34d399; }
.aff-tier-progress.is-max .aff-tier-progress-foot b{ color:#34d399; }

/* Tabela de niveis (referencia) */
.aff-tiers-card{ padding:20px 22px; }
.aff-tiers-intro{ font-size:13px;color:var(--text-secondary);line-height:1.55;margin-bottom:16px; }
.aff-tiers-grid{ display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-bottom:14px; }
.aff-tier-row{
  display:grid;grid-template-columns:auto 1fr auto auto;align-items:center;gap:12px;
  padding:12px 14px;
  background:rgba(255,255,255,.025);
  border:1px solid var(--border);
  border-radius:10px;
  transition:all .15s ease;
}
.aff-tier-row.is-current{
  background:rgba(247,147,30,.08);
  border-color:rgba(247,147,30,.32);
  box-shadow:0 4px 16px rgba(247,147,30,.08);
}
.aff-tier-row-medal{
  width:42px;height:42px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
}
.aff-badge-png{
  width:100%;height:100%;display:block;object-fit:contain;
  filter:drop-shadow(0 3px 6px rgba(0,0,0,.45));
  transition:transform .2s ease;
}
.aff-tier-row:hover .aff-badge-png{ transform:scale(1.08) rotate(-2deg); }
.aff-tier-row.is-current .aff-badge-png{ filter:drop-shadow(0 4px 14px rgba(247,147,30,.55)); }
.aff-tier-row-name{ font-size:13.5px;font-weight:700;color:#fff;letter-spacing:-.2px; }
.aff-tier-row-range{ font-size:11.5px;color:var(--text-muted);font-weight:500; }
.aff-tier-row-rate{ font-size:15px;font-weight:800;color:#f7931e;letter-spacing:-.3px;min-width:40px;text-align:right; }
.aff-tier-row.is-current .aff-tier-row-rate{ color:#ffd95c; }
.aff-tiers-foot{
  font-size:12px;color:var(--text-muted);text-align:center;
  padding-top:14px;border-top:1px solid var(--border);
  line-height:1.5;
}
.aff-tiers-foot b{ color:#a78bfa;font-weight:700; }

/* Como funciona (steps) */
.aff-how-card{ padding:20px 22px; }
.aff-how-steps{ display:flex;flex-direction:column;gap:14px;margin-bottom:14px; }
.aff-how-step{ display:flex;gap:14px;align-items:flex-start; }
.aff-how-step-num{
  flex-shrink:0;width:30px;height:30px;border-radius:8px;
  background:linear-gradient(135deg,#7c5cff,#a78bfa);
  display:flex;align-items:center;justify-content:center;
  font-size:14px;font-weight:800;color:#fff;
  box-shadow:0 4px 12px rgba(124,92,255,.32);
}
.aff-how-step-text{ flex:1;min-width:0; }
.aff-how-step-text b{ display:block;font-size:13.5px;font-weight:700;color:#fff;margin-bottom:2px; }
.aff-how-step-text span{ display:block;font-size:12.5px;color:var(--text-secondary);line-height:1.5; }
.aff-how-foot{
  padding:11px 14px;
  background:rgba(124,92,255,.08);
  border:1px solid rgba(124,92,255,.25);
  border-radius:9px;
  font-size:12.5px;color:var(--text-secondary);line-height:1.5;text-align:center;
}
.aff-how-warning{
  display:flex;align-items:flex-start;gap:10px;
  margin:14px 0;padding:12px 14px;
  background:rgba(247,147,30,.08);
  border:1px solid rgba(247,147,30,.32);
  border-radius:9px;
}
.aff-how-warning-icon{
  width:30px;height:30px;border-radius:8px;
  background:linear-gradient(135deg,rgba(247,147,30,.22),rgba(255,184,0,.1));
  border:1px solid rgba(247,147,30,.42);
  color:#ffb44a;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
}
.aff-how-warning-text{
  flex:1;font-size:12.5px;color:var(--text-secondary);line-height:1.55;
}
.aff-how-warning-text b{color:#ffb44a;font-weight:700;}

@media (max-width:768px){
  .aff-tier-card{ grid-template-columns:1fr;gap:18px;padding:18px 18px; }
  .aff-tier-left{ gap:12px; }
  .aff-tier-medal{ width:46px;height:46px; }
  .aff-tier-name{ font-size:19px; }
  .aff-tiers-grid{ grid-template-columns:1fr; }
  .aff-tier-row{ padding:10px 12px;gap:10px; }
  .aff-tier-row-rate{ font-size:14px; }
}

/* ═══════════════════════════════════════════
   ADMIN — Saques de afiliados (sistema novo)
   ═══════════════════════════════════════════ */
.aff-tab-btn{
  padding:6px 12px;font-size:11.5px;font-weight:600;
  background:rgba(255,255,255,.04);
  border:1px solid var(--border);
  color:var(--text-secondary);
  border-radius:7px;cursor:pointer;
  transition:all .15s ease;
}
.aff-tab-btn:hover{background:rgba(255,255,255,.08);color:var(--text);}
.aff-tab-btn.is-active{
  background:rgba(124,92,255,.18);
  border-color:rgba(124,92,255,.5);
  color:#c9b8ff;
}
.aff-act-btn{
  padding:6px 12px;margin-left:6px;
  font-size:11.5px;font-weight:600;letter-spacing:.2px;
  border-radius:7px;cursor:pointer;
  transition:all .15s ease;
}
.aff-act-pay{
  background:linear-gradient(135deg,#10b981,#059669);
  color:#fff;border:1px solid rgba(16,185,129,.45);
  box-shadow:0 4px 12px rgba(16,185,129,.22);
}
.aff-act-pay:hover{transform:translateY(-1px);box-shadow:0 6px 16px rgba(16,185,129,.35);}
.aff-act-reject{
  background:transparent;color:#f87171;
  border:1px solid rgba(239,68,68,.4);
}
.aff-act-reject:hover{background:rgba(239,68,68,.1);border-color:rgba(239,68,68,.65);}
.aff-act-note{
  display:inline-block;
  font-size:11px;color:var(--text-muted);
  background:rgba(255,255,255,.03);
  padding:4px 9px;border-radius:6px;
  font-style:italic;
}

/* ════════════════════════════════════════════════════════════════
   MOBILE APP FEEL — bottom tab bar, safe-area, sticky topbar,
   bottom sheet pra modais. Aparece apenas em <=960px.
   Inspirado em padroes nativos iOS/Android.
   ════════════════════════════════════════════════════════════════ */

/* Esconde a tabbar no desktop */
.mobile-tabbar{ display:none; }

@media (max-width:960px){
  /* ── Safe area pro notch e home indicator ── */
  body{
    /* Respira embaixo pra a tab bar nao cobrir conteudo */
    padding-bottom: 0;
  }
  .main{
    /* Reserva espaco pra tab bar + safe area inferior do home indicator */
    padding-bottom: calc(70px + env(safe-area-inset-bottom, 0px)) !important;
  }
  .page-content{
    /* Garante que conteudo nao fique embaixo da tabbar */
    padding-bottom: 12px !important;
  }

  /* ── Topbar sticky tipo header de app ── */
  .topbar{
    position: sticky;
    top: 0;
    z-index: 50;
    background: var(--bg) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    padding-top: calc(8px + env(safe-area-inset-top, 0px)) !important;
    border-bottom: 1px solid rgba(255,255,255,.04);
  }
  /* Esconde hamburger (a tabbar e o menu de "Mais" substituem) */
  .topbar .menu-btn{ display: none !important; }
  /* Breadcrumb mais limpo — so o nome da secao */
  .topbar-breadcrumb{
    font-size: 16px !important;
    font-weight: 700 !important;
    color: var(--text) !important;
  }
  .topbar-breadcrumb > *:first-child{ display: none; }
  /* Texto antes do span "Apostack /" some — fica so o nome da pagina */
  .topbar-breadcrumb{
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  /* Botao "+ Transacao" do topo nao precisa mais — tem FAB embaixo */
  .topbar .txbtn{ display: none !important; }

  /* ── Bottom Tab Bar ── */
  .mobile-tabbar{
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 100;
    /* Glass effect tipo iOS */
    background: rgba(11,13,21,.92);
    backdrop-filter: blur(18px) saturate(180%);
    -webkit-backdrop-filter: blur(18px) saturate(180%);
    border-top: 1px solid rgba(255,255,255,.06);
    padding: 8px 6px calc(8px + env(safe-area-inset-bottom, 0px));
    align-items: flex-end;
    justify-content: space-around;
    gap: 4px;
  }
  .mt-item{
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    min-height: 52px;
    background: transparent;
    border: 0;
    color: rgba(255,255,255,.55);
    padding: 6px 4px;
    border-radius: 12px;
    cursor: pointer;
    transition: color .15s ease, background .15s ease, transform .12s ease;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
  }
  .mt-item svg{
    width: 22px; height: 22px;
    stroke: currentColor;
  }
  .mt-item span{
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .1px;
    line-height: 1;
  }
  .mt-item:active{ transform: scale(.92); background: rgba(255,255,255,.04); }
  /* Estado ativo (data-tab corresponde a secao ativa) */
  .mt-item.is-active{
    color: var(--primary, #6366f1);
  }
  .mt-item.is-active svg{
    stroke: var(--primary, #6366f1);
    filter: drop-shadow(0 0 6px rgba(99,102,241,.4));
  }

  /* ── FAB central (Nova Transacao) ── */
  .mt-fab{
    flex: 0 0 auto;
    margin-top: -22px; /* eleva acima da barra */
    border: 0;
    background: transparent;
    padding: 0;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    transition: transform .14s ease;
  }
  .mt-fab-inner{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px; height: 56px;
    border-radius: 50%;
    color: #fff;
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
    box-shadow: 0 8px 22px rgba(99,102,241,.45), 0 2px 6px rgba(0,0,0,.35);
    border: 3px solid var(--bg, #0b0d15);
  }
  .mt-fab:active{ transform: scale(.92); }

  /* ── Modal Nova Transacao como bottom sheet (slide-up) ── */
  #txModal.modal.open{
    align-items: flex-end !important;
  }
  #txModal .modal-content,
  #txModal > .modal-content,
  #txModal [class*="modal"]:first-child{
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    border-radius: 22px 22px 0 0 !important;
    padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px)) !important;
    animation: bottomSheetUp .28s cubic-bezier(.16,1,.3,1);
    max-height: 92vh;
    overflow-y: auto;
  }
  /* Drag handle visual no topo do bottom sheet */
  #txModal .modal-content::before,
  #txModal > div:first-child::before{
    content: '';
    display: block;
    width: 38px; height: 4px;
    background: rgba(255,255,255,.18);
    border-radius: 2px;
    margin: 6px auto 14px;
  }
  @keyframes bottomSheetUp{
    from{ transform: translateY(100%); opacity: .4; }
    to  { transform: translateY(0);    opacity: 1;  }
  }

  /* ── Tap targets minimos 44px ── */
  .btn, .btn-primary, .btn-ghost, .form-input, .form-select,
  .nav-item, .icon-btn, button:not(.mt-item):not(.mt-fab):not(.aff-tab-btn){
    min-height: 44px;
  }
  /* Tira o highlight azul/cinza do touch */
  button, a, .nav-item, .kpi-card, [onclick]{
    -webkit-tap-highlight-color: transparent;
  }

  /* ── Scroll snap suave em listas horizontais (filtros de periodo etc) ── */
  .period-filter, .rank-period-tabs, .aff-tabs{
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
  }
  .period-filter > *, .rank-period-tabs > *, .aff-tabs > *{
    scroll-snap-align: center;
  }

  /* ── Header de cada secao mais "card-like" tipo app ── */
  .section-title, h2, h3{
    letter-spacing: -.2px;
  }

  /* ── Transicao suave entre secoes ── */
  .section.active{
    animation: appFadeIn .22s ease-out;
  }
  @keyframes appFadeIn{
    from{ opacity: 0; transform: translateY(4px); }
    to  { opacity: 1; transform: translateY(0); }
  }
}

/* ── Action sheet "Mais" (overlay com lista de outras paginas) ── */
.mobile-more-sheet{
  position: fixed;
  inset: 0;
  z-index: 200;
  display: none;
  align-items: flex-end;
  justify-content: center;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.mobile-more-sheet.is-open{ display: flex; }
.mobile-more-sheet .mms-card{
  width: 100%;
  background: #14161f;
  border-radius: 22px 22px 0 0;
  padding: 8px 14px calc(20px + env(safe-area-inset-bottom, 0px));
  max-height: 80vh;
  overflow-y: auto;
  animation: bottomSheetUp .26s cubic-bezier(.16,1,.3,1);
}
.mobile-more-sheet .mms-handle{
  width: 38px; height: 4px;
  background: rgba(255,255,255,.18);
  border-radius: 2px;
  margin: 6px auto 14px;
}
.mobile-more-sheet .mms-title{
  font-size: 13px; font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .8px;
  padding: 6px 4px 10px;
}
.mobile-more-sheet .mms-item{
  display: flex; align-items: center; gap: 14px;
  padding: 14px 10px;
  color: var(--text);
  font-size: 15px;
  font-weight: 500;
  border-radius: 12px;
  cursor: pointer;
  border: 0;
  width: 100%;
  background: transparent;
  text-align: left;
  -webkit-tap-highlight-color: transparent;
}
.mobile-more-sheet .mms-item svg{
  width: 22px; height: 22px;
  color: var(--text-muted);
  stroke: currentColor;
}
.mobile-more-sheet .mms-item:active{ background: rgba(255,255,255,.04); }
.mobile-more-sheet .mms-item.is-danger{ color: #ef4444; }
.mobile-more-sheet .mms-item.is-danger svg{ color: #ef4444; }
/* Item premium "Assinatura" — destaque sutil (ouro) pra puxar o olho */
.mobile-more-sheet .mms-item-pro{ color: #f59e0b; }
.mobile-more-sheet .mms-item-pro svg{ color: #f59e0b; fill: rgba(245,158,11,.15); }
/* Item "Personalizar" — destaque roxo (acao principal de customizacao) */
.mobile-more-sheet .mms-item-accent{ color: #a78bfa; font-weight: 600; }
.mobile-more-sheet .mms-item-accent svg{ color: #a78bfa; fill: rgba(167,139,250,.12); }
/* Divisor entre grupos da sheet */
.mobile-more-sheet .mms-divider{
  height: 1px;
  background: rgba(255,255,255,.06);
  margin: 8px 4px;
}

/* ════════════════════════════════════════════════════════════════
   MOBILE — refinamento POR TAMANHO de tela
   Cobre todos os celulares reais do mercado:
   - Pro Max / Plus       (414-430px wide)  → tamanhos padrao
   - iPhone padrao / 14   (390-414px)        → tamanhos padrao
   - iPhone SE / S22      (360-389px)        → compacta tabbar
   - Galaxy Fold dobrado  (<=359px)          → ainda mais compacto
   - Landscape qualquer mobile               → reduz chrome vertical
   ════════════════════════════════════════════════════════════════ */

/* ── ≤480px — Smartphones padrao (SE, S22, iPhone Mini) ── */
@media (max-width:480px){
  .main{ padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)) !important; }
  .mobile-tabbar{ padding: 6px 4px calc(6px + env(safe-area-inset-bottom, 0px)); }
  .mt-item{ min-height: 48px; padding: 5px 2px; gap: 2px; }
  .mt-item svg{ width: 20px; height: 20px; }
  .mt-item span{ font-size: 10px; }
  .mt-fab{ margin-top: -18px; }
  .mt-fab-inner{ width: 50px; height: 50px; border-width: 2.5px; }
  .mt-fab-inner svg{ width: 22px; height: 22px; }
  .topbar{ padding-left: 12px !important; padding-right: 12px !important; }
  .topbar-breadcrumb{ font-size: 15px !important; }
  /* Bottom sheet com menos padding */
  #txModal .modal-content,
  #txModal > div:first-child{
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  .mobile-more-sheet .mms-card{ padding: 6px 10px calc(16px + env(safe-area-inset-bottom, 0px)); }
  .mobile-more-sheet .mms-item{ padding: 12px 8px; font-size: 14.5px; gap: 12px; }
  .mobile-more-sheet .mms-item svg{ width: 20px; height: 20px; }
}

/* ── ≤360px — Telas BEM pequenas (Galaxy Fold dobrado, iPhone 5/SE 1st gen) ── */
@media (max-width:360px){
  .main{ padding-bottom: calc(58px + env(safe-area-inset-bottom, 0px)) !important; }
  .mobile-tabbar{ padding: 4px 2px calc(4px + env(safe-area-inset-bottom, 0px)); }
  .mt-item{ min-height: 44px; gap: 1px; padding: 4px 1px; }
  .mt-item svg{ width: 18px; height: 18px; }
  .mt-item span{ font-size: 9.5px; }
  .mt-fab{ margin-top: -16px; }
  .mt-fab-inner{ width: 46px; height: 46px; border-width: 2px; }
  .mt-fab-inner svg{ width: 20px; height: 20px; }
  .topbar-breadcrumb{ font-size: 14px !important; }
  .mobile-more-sheet .mms-item{ padding: 11px 6px; font-size: 14px; }
}

/* ── Landscape em qualquer mobile — reduz chrome vertical ── */
@media (max-width:960px) and (orientation:landscape) and (max-height:500px){
  /* Tab bar mais baixa pra liberar espaco vertical */
  .main{ padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px)) !important; }
  .mobile-tabbar{ padding: 4px 6px calc(4px + env(safe-area-inset-bottom, 0px)); }
  .mt-item{ min-height: 42px; gap: 0; flex-direction: row; }
  .mt-item svg{ width: 18px; height: 18px; }
  .mt-item span{ font-size: 10.5px; margin-left: 4px; }
  .mt-fab{ margin-top: -14px; }
  .mt-fab-inner{ width: 44px; height: 44px; border-width: 2px; }
  .mt-fab-inner svg{ width: 20px; height: 20px; }
  /* Topbar mais baixa */
  .topbar{ padding-top: calc(4px + env(safe-area-inset-top, 0px)) !important; padding-bottom: 4px !important; }
  /* Bottom sheet ocupa mais altura mas com max */
  #txModal .modal-content,
  #txModal > div:first-child{ max-height: 95vh !important; }
}

/* ── Pro Max / Plus / iPhone 14 Plus (≥411px e ≤960px) — pode ser mais generoso ── */
@media (min-width:411px) and (max-width:960px) and (orientation:portrait){
  .mt-item span{ font-size: 11px; }
  .mt-item svg{ width: 23px; height: 23px; }
  .mt-fab-inner{ width: 58px; height: 58px; }
  .mt-fab-inner svg{ width: 27px; height: 27px; }
}

/* ── Telas grandes (≥440px e ≤960px) — agrupa items no CENTRO ──
   Em phablets/foldables/Pro Max+, items soltos parecem perdidos.
   Padrao Instagram/Twitter/WhatsApp: mantem cluster centralizado.
   Aqui criamos uma "ilha" interna com max-width que cresce com a tela. */
@media (min-width:440px) and (max-width:960px){
  .mobile-tabbar{
    /* Container ainda ocupa 100%, mas items ficam centralizados */
    justify-content: center !important;
    gap: 8px;
  }
  .mt-item{
    flex: 0 0 auto;
    min-width: 76px;
    padding: 6px 10px;
  }
  .mt-fab{ margin-left: 4px; margin-right: 4px; }
}

/* ── Pro Max+ (440-540) — mais espaco entre items pra respiro ── */
@media (min-width:440px) and (max-width:540px) and (orientation:portrait){
  .mobile-tabbar{ gap: 10px; }
  .mt-item{ min-width: 70px; }
  .mt-fab-inner{ width: 58px; height: 58px; }
}

/* ── Phablet/Fold aberto (541-720) — items maiores, mais respiro ── */
@media (min-width:541px) and (max-width:720px){
  .mobile-tabbar{ gap: 14px; padding: 10px 8px calc(10px + env(safe-area-inset-bottom, 0px)); }
  .mt-item{ min-width: 82px; padding: 8px 12px; }
  .mt-item svg{ width: 24px; height: 24px; }
  .mt-item span{ font-size: 11.5px; }
  .mt-fab{ margin-top: -24px; margin-left: 8px; margin-right: 8px; }
  .mt-fab-inner{ width: 62px; height: 62px; }
  .mt-fab-inner svg{ width: 28px; height: 28px; }
  /* Bottom sheet com max-width pra nao esticar absurdo */
  #txModal.modal.open{ align-items: flex-end !important; justify-content: center !important; }
  #txModal .modal-content,
  #txModal > div:first-child{
    max-width: 560px !important;
    border-radius: 22px 22px 0 0 !important;
  }
  /* Action sheet "Mais" tambem com max-width */
  .mobile-more-sheet .mms-card{ max-width: 560px; border-radius: 22px 22px 0 0; }
}

/* ── Tablets pequenos (721-960) — items distribuidos mas com max-width ── */
@media (min-width:721px) and (max-width:960px){
  .mobile-tabbar{ gap: 18px; padding: 12px 12px calc(12px + env(safe-area-inset-bottom, 0px)); }
  .mt-item{ min-width: 90px; padding: 8px 14px; }
  .mt-item svg{ width: 25px; height: 25px; }
  .mt-item span{ font-size: 12px; }
  .mt-fab{ margin-top: -26px; }
  .mt-fab-inner{ width: 64px; height: 64px; }
  .mt-fab-inner svg{ width: 28px; height: 28px; }
  #txModal .modal-content,
  #txModal > div:first-child{ max-width: 600px !important; }
  .mobile-more-sheet .mms-card{ max-width: 600px; }
}

/* ════════════════════════════════════════════════════════════════
   PERSONALIZAR CARDS — cada card individual pode ser escondido
   pelo usuario nas Configuracoes. Tipo widgets do iOS.
   ════════════════════════════════════════════════════════════════ */
[data-card].card-hidden{ display: none !important; }

.cust-header-desc{
  font-size: 13.5px; color: var(--text-muted);
  line-height: 1.5;
  padding: 0 2px 16px;
  margin-bottom: 4px;
}

/* Sidebar item "Personalizar" — accent roxo igual ao Mais sheet */
.nav-item.nav-personalizar{ color: #a78bfa; font-weight: 600; }
.nav-item.nav-personalizar .nav-icon svg{ color: #a78bfa; fill: rgba(167,139,250,.08); }
.nav-item.nav-personalizar:hover{ background: rgba(167,139,250,.08); }

/* Hero card no topo da aba Personalizar */
.cust-hero{
  display: flex; align-items: center; gap: 16px;
  padding: 18px 18px;
  margin-bottom: 18px;
  background: linear-gradient(135deg, rgba(99,102,241,.18), rgba(139,92,246,.10));
  border: 1px solid rgba(139,92,246,.25);
  border-radius: 16px;
  position: relative;
  overflow: hidden;
}
.cust-hero::before{
  content: '';
  position: absolute;
  top: -50%; right: -20%;
  width: 200px; height: 200px;
  background: radial-gradient(circle, rgba(139,92,246,.18), transparent 70%);
  pointer-events: none;
}
.cust-hero-icon{
  flex-shrink: 0;
  width: 56px; height: 56px;
  border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  color: #fff;
  box-shadow: 0 8px 20px rgba(99,102,241,.35);
}
.cust-hero-text{ flex: 1; position: relative; z-index: 1; }
.cust-hero-title{
  font-size: 16px; font-weight: 700;
  color: var(--text);
  margin-bottom: 4px;
  letter-spacing: -.2px;
}
.cust-hero-desc{
  font-size: 13px; color: var(--text-muted);
  line-height: 1.4;
}
.cust-list{
  display: flex; flex-direction: column; gap: 10px;
}

/* ── Header de secao com pill estilo iOS Settings ── */
.cust-section{
  padding: 10px 2px 4px;
}
.cust-section-pill{
  display: inline-block;
  font-size: 11px; font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 1.2px;
  padding: 4px 12px;
  background: rgba(255,255,255,.04);
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.06);
}

/* ── Card individual de cada item customizavel ── */
.cust-card{
  display: flex; align-items: center; gap: 14px;
  padding: 14px 16px;
  background: linear-gradient(135deg, rgba(255,255,255,.025), rgba(255,255,255,.015));
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 14px;
  cursor: pointer;
  transition: all .2s ease;
  -webkit-tap-highlight-color: transparent;
  position: relative;
  overflow: hidden;
}
.cust-card::before{
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: transparent;
  transition: background .2s ease;
}
.cust-card.is-on{
  border-color: rgba(16,185,129,.25);
  background: linear-gradient(135deg, rgba(16,185,129,.06), rgba(255,255,255,.015));
}
.cust-card.is-on::before{ background: #10b981; }
.cust-card.is-off{
  opacity: .55;
}
.cust-card:hover, .cust-card:active{
  transform: translateY(-1px);
  background: linear-gradient(135deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
}

/* Icone colorido com badge circular */
.cust-card-icon{
  flex-shrink: 0;
  width: 42px; height: 42px;
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(99,102,241,.15);
  color: #6366f1;
  transition: transform .2s ease;
}
.cust-card-icon svg{ width: 22px; height: 22px; }
.cust-card:hover .cust-card-icon{ transform: scale(1.05); }

/* Texto do card */
.cust-card-text{ flex: 1; min-width: 0; }
.cust-card-title{
  font-size: 14.5px; font-weight: 600;
  color: var(--text);
  line-height: 1.3;
  margin-bottom: 3px;
}
.cust-card-desc{
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Switch iOS-style — verde quando ON (cards visiveis) */
.cust-switch{
  flex-shrink: 0;
  position: relative;
  width: 46px; height: 26px;
  background: rgba(255,255,255,.12);
  border-radius: 13px;
  transition: background .25s ease;
}
.cust-switch::before{
  content: '';
  position: absolute;
  left: 3px; top: 3px;
  width: 20px; height: 20px;
  background: #fff;
  border-radius: 50%;
  transition: transform .25s cubic-bezier(.34,1.56,.64,1);
  box-shadow: 0 2px 4px rgba(0,0,0,.3);
}
.cust-switch.is-on{
  background: #10b981;
  box-shadow: 0 0 12px rgba(16,185,129,.3);
}
.cust-switch.is-on::before{ transform: translateX(20px); }

/* ════════════════════════════════════════════════════════════════
   CENTRAL DE AJUDA (FAQ + contato suporte)
   ════════════════════════════════════════════════════════════════ */
.help-contact-card{
  display:flex;align-items:center;gap:16px;
  padding:18px 20px;border-radius:14px;
  background:linear-gradient(135deg,rgba(167,139,250,.10),rgba(139,92,246,.04));
  border:1px solid rgba(167,139,250,.22);
  margin-bottom:24px;
}
.help-contact-icon{
  flex-shrink:0;width:52px;height:52px;border-radius:12px;
  background:linear-gradient(135deg,#8b5cf6,#a78bfa);
  display:flex;align-items:center;justify-content:center;color:#fff;
  box-shadow:0 4px 12px rgba(139,92,246,.35);
}
.help-contact-content{flex:1;min-width:0}
.help-contact-title{font-size:15px;font-weight:700;color:#fff;margin-bottom:3px}
.help-contact-sub{font-size:12.5px;color:var(--text-muted);line-height:1.45}
.help-contact-sub b{color:#cbd5e1}
.help-contact-btn{
  flex-shrink:0;display:inline-flex;align-items:center;gap:6px;
  padding:11px 18px;border-radius:10px;
  background:linear-gradient(135deg,#8b5cf6,#7c3aed);
  color:#fff;font-weight:700;font-size:13.5px;
  text-decoration:none;transition:all .18s ease;
  box-shadow:0 4px 12px rgba(139,92,246,.32);
}
.help-contact-btn:hover{transform:translateY(-1px);box-shadow:0 6px 18px rgba(139,92,246,.5)}
.help-contact-btn svg{transition:transform .18s ease}
.help-contact-btn:hover svg{transform:translateX(3px)}

/* ════════════════════════════════════════════════════════════════
   CALENDÁRIO HEATMAP (Reports → Atividade)
   ════════════════════════════════════════════════════════════════ */
/* Card heatmap com glow premium */
.heatmap-card{
  position:relative;
  background:linear-gradient(180deg,rgba(167,139,250,.02),transparent 30%), var(--card-bg, rgba(255,255,255,.025)) !important;
  box-shadow: 0 0 0 1px rgba(167,139,250,.06), 0 12px 40px rgba(0,0,0,.35) !important;
}
.heatmap-card::before{
  content:'';position:absolute;inset:-1px;border-radius:inherit;
  background:linear-gradient(135deg,rgba(167,139,250,.18),transparent 40%, transparent 60%, rgba(99,102,241,.12));
  z-index:-1;pointer-events:none;opacity:.6;
  filter:blur(6px);
}
.heatmap-header{
  align-items:flex-start;gap:14px;flex-wrap:wrap;
  justify-content:space-between;
}
.heatmap-title-wrap{
  display:flex;gap:12px;align-items:center;min-width:0;
}
.heatmap-title-icon{
  flex-shrink:0;width:38px;height:38px;border-radius:10px;
  background:linear-gradient(135deg,rgba(167,139,250,.22),rgba(124,92,255,.10));
  border:1px solid rgba(167,139,250,.25);
  color:#a78bfa;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 12px rgba(124,92,255,.18);
}
.heatmap-card .chart-subtitle{font-size:12.5px;line-height:1.45;margin-top:3px}
.heatmap-card .chart-subtitle b{color:#cbd5e1;font-weight:600}
.heatmap-toggle{
  display:inline-flex;background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.06);border-radius:8px;padding:3px;gap:2px;
}
.heatmap-tab{
  padding:6px 12px;border:0;background:transparent;cursor:pointer;
  font-family:inherit;font-size:12px;font-weight:600;color:var(--text-muted);
  border-radius:6px;transition:all .15s ease;
}
.heatmap-tab:hover{color:#e2e8f0}
.heatmap-tab.is-active{
  background:rgba(167,139,250,.20);color:#fff;
  box-shadow:0 1px 3px rgba(0,0,0,.2);
}
.heatmap-wrap{
  margin-top:14px;padding:6px 0 2px;overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  display:flex;justify-content:center;align-items:flex-start;
}
.heatmap-svg{display:block;max-width:100%;height:auto;margin:0 auto}
.heatmap-svg .heatmap-year{
  font-size:10px;font-weight:500;fill:var(--text-muted);opacity:.65;
  font-family:inherit;letter-spacing:.4px;
}
.heatmap-layout{
  display:grid;grid-template-columns: minmax(0,1fr) 260px;gap:18px;margin-top:14px;
  align-items:start;
}
.heatmap-main{min-width:0}
.heatmap-insights{
  background:rgba(255,255,255,.025);
  border:1px solid rgba(255,255,255,.06);
  border-radius:12px;padding:16px;
}
.heatmap-insights-title{
  font-size:13px;font-weight:700;color:#fff;margin-bottom:14px;
  padding-bottom:12px;border-bottom:1px solid rgba(255,255,255,.06);
}
.heatmap-insight{
  display:flex;align-items:center;gap:12px;
  padding:11px 0;border-bottom:1px solid rgba(255,255,255,.05);
}
.heatmap-insight:last-child{border-bottom:0;padding-bottom:0}
.heatmap-insight-icon{
  flex-shrink:0;width:36px;height:36px;border-radius:9px;
  background:rgba(167,139,250,.12);color:#a78bfa;
  display:flex;align-items:center;justify-content:center;
}
.heatmap-insight-body{flex:1;min-width:0}
.heatmap-insight-label{font-size:11.5px;color:var(--text-muted);margin-bottom:2px;line-height:1.2}
.heatmap-insight-main{font-size:17px;font-weight:800;color:#fff;line-height:1.2}
.heatmap-insight-main .is-pos{color:#10b981}
.heatmap-insight-main .is-neg{color:#ef4444}
.heatmap-insight-sub{font-size:10.5px;color:var(--text-muted);margin-top:2px;line-height:1.2}
.heatmap-insight-extra{
  flex-shrink:0;font-size:13px;font-weight:700;color:#a78bfa;
  padding:4px 9px;background:rgba(167,139,250,.10);border-radius:8px;
}
.heatmap-info-icon{
  display:inline-flex;align-items:center;gap:5px;
  font-size:11px;color:var(--text-muted);font-style:normal;
}
.heatmap-info-icon svg{flex-shrink:0;opacity:.7}
@media (max-width: 960px){
  .heatmap-layout{grid-template-columns: 1fr}
}

/* Barra de Resumo do Período */
.heatmap-summary-bar{
  display:grid;grid-template-columns: 1.8fr repeat(5, 1fr);gap:18px;
  margin-top:18px;padding:16px 18px;
  background:linear-gradient(135deg,rgba(167,139,250,.04),rgba(99,102,241,.02));
  border:1px solid rgba(167,139,250,.14);
  border-radius:12px;
  align-items:center;
}
.heatmap-summary-head{display:flex;align-items:center;gap:12px;min-width:0}
.heatmap-summary-icon{
  flex-shrink:0;width:36px;height:36px;border-radius:50%;
  background:linear-gradient(135deg,#8b5cf6,#7c3aed);
  display:flex;align-items:center;justify-content:center;color:#fff;
  box-shadow:0 4px 12px rgba(139,92,246,.3);
}
.heatmap-summary-title{font-size:13px;font-weight:700;color:#fff;line-height:1.2}
.heatmap-summary-sub{font-size:11px;color:var(--text-muted);margin-top:2px;line-height:1.3}
.heatmap-summary-kpi{display:flex;flex-direction:column;gap:3px;min-width:0}
.heatmap-summary-kpi-label{font-size:11px;color:var(--text-muted);line-height:1.2;white-space:nowrap}
.heatmap-summary-kpi-val{font-size:17px;font-weight:800;line-height:1.2;white-space:nowrap}
.heatmap-summary-kpi-val.neutral{color:#fff}
.heatmap-summary-kpi-val.accent{color:#a78bfa}
.heatmap-summary-kpi-val.is-pos{color:#10b981}
.heatmap-summary-kpi-val.is-neg{color:#ef4444}
@media (max-width: 1100px){
  .heatmap-summary-bar{grid-template-columns: 1fr 1fr 1fr;gap:14px}
  .heatmap-summary-head{grid-column: 1 / -1}
}
@media (max-width: 540px){
  .heatmap-summary-bar{grid-template-columns: 1fr 1fr}
  .heatmap-summary-kpi-val{font-size:15px}
}
.heatmap-svg .heatmap-cell,
.heatmap-svg .heatmap-cell-p{
  fill:rgba(255,255,255,.025);
  stroke:rgba(167,139,250,.14);stroke-width:1;
  transition:filter .15s ease;cursor:pointer;
}
.heatmap-svg .heatmap-cell:hover,
.heatmap-svg .heatmap-cell-p:hover{filter:brightness(1.35)}
/* Modo APOSTAS — escala verde */
.heatmap-svg .heatmap-cell.level-1{fill:rgba(16,185,129,.30);stroke:transparent}
.heatmap-svg .heatmap-cell.level-2{fill:rgba(16,185,129,.55);stroke:transparent}
.heatmap-svg .heatmap-cell.level-3{fill:rgba(16,185,129,.75);stroke:transparent}
.heatmap-svg .heatmap-cell.level-4{fill:rgba(16,185,129,.95);stroke:transparent}
/* Modo LUCRO — escala sequencial 6 niveis (matching mockup: vinho->lilas) */
.heatmap-svg .heatmap-cell-p.level-1{fill:#7a2c3a;stroke:transparent}
.heatmap-svg .heatmap-cell-p.level-2{fill:#b04156;stroke:transparent}
.heatmap-svg .heatmap-cell-p.level-3{fill:#3b5680;stroke:transparent}
.heatmap-svg .heatmap-cell-p.level-4{fill:#5a4d99;stroke:transparent}
.heatmap-svg .heatmap-cell-p.level-5{fill:#8b6dc7;stroke:transparent}
.heatmap-svg .heatmap-cell-p.level-6{fill:#c9b4e8;stroke:transparent}
.heatmap-svg .heatmap-month{
  font-size:11px;font-weight:700;fill:var(--text-muted);
  font-family:inherit;text-transform:uppercase;letter-spacing:.8px;
}
.heatmap-svg .heatmap-dow{font-size:10.5px;fill:var(--text-muted);font-family:inherit;font-weight:500}
.heatmap-empty{
  padding:24px 16px;text-align:center;color:var(--text-muted);
  font-size:13px;border:1px dashed rgba(255,255,255,.10);
  border-radius:10px;background:rgba(255,255,255,.015);
}
.heatmap-legend{
  display:flex;align-items:center;gap:12px;margin-top:14px;
  flex-wrap:wrap;
}
.heatmap-legend-items{
  display:inline-flex;align-items:center;gap:14px;flex-wrap:wrap;
}
.heatmap-legitem{
  display:inline-flex;align-items:center;gap:5px;
  font-size:11.5px;color:var(--text-muted);
  white-space:nowrap;
}
.heatmap-legend .heatmap-cell,
.heatmap-legend .heatmap-cell-p{
  width:13px;height:13px;border-radius:3px;display:inline-block;flex-shrink:0;
}
.heatmap-legend .heatmap-cell.level-0{background:rgba(255,255,255,.06)}
.heatmap-legend .heatmap-cell.level-1{background:rgba(16,185,129,.30)}
.heatmap-legend .heatmap-cell.level-2{background:rgba(16,185,129,.55)}
.heatmap-legend .heatmap-cell.level-3{background:rgba(16,185,129,.75)}
.heatmap-legend .heatmap-cell.level-4{background:rgba(16,185,129,.95)}
/* Swatches modo Lucro — mesma escala 6 cores */
.heatmap-legend .heatmap-cell-p.level-1{background:#7a2c3a}
.heatmap-legend .heatmap-cell-p.level-2{background:#b04156}
.heatmap-legend .heatmap-cell-p.level-3{background:#3b5680}
.heatmap-legend .heatmap-cell-p.level-4{background:#5a4d99}
.heatmap-legend .heatmap-cell-p.level-5{background:#8b6dc7}
.heatmap-legend .heatmap-cell-p.level-6{background:#c9b4e8}
.heatmap-legitem-label{font-size:11.5px;color:var(--text-muted)}
.heatmap-legitem-scale{display:inline-flex;gap:3px;align-items:center}
.heatmap-legend-spacer{flex:1;min-width:8px}
.heatmap-legend-summary{font-size:12px;color:#cbd5e1;white-space:nowrap}
.heatmap-legend-summary b{color:#fff;font-weight:700}
.heatmap-legend-summary.is-pos b{color:#10b981}
.heatmap-legend-summary.is-neg b{color:#ef4444}
.heatmap-hint{
  margin-top:10px;padding:8px 12px;
  background:rgba(167,139,250,.05);
  border:1px solid rgba(167,139,250,.12);
  border-radius:8px;
  font-size:11.5px;color:var(--text-muted);line-height:1.5;
}
.heatmap-hint b{color:#cbd5e1;font-weight:600}
.heatmap-tooltip{
  position:absolute;display:none;z-index:9999;
  padding:6px 10px;background:#0f172a;color:#fff;
  border:1px solid rgba(167,139,250,.30);border-radius:6px;
  font-size:11.5px;font-weight:600;white-space:nowrap;
  box-shadow:0 8px 24px rgba(0,0,0,.4);
  pointer-events:none;
}
/* heatmap-svg cresce no natural size — sem stretch */

.help-tour-card{
  display:flex;align-items:center;gap:14px;
  padding:14px 18px;border-radius:12px;
  background:linear-gradient(135deg,rgba(99,102,241,.08),rgba(99,102,241,.02));
  border:1px solid rgba(99,102,241,.22);
  margin-bottom:24px;
}
.help-tour-icon{
  flex-shrink:0;width:42px;height:42px;border-radius:10px;
  background:rgba(99,102,241,.18);color:#a78bfa;
  display:flex;align-items:center;justify-content:center;
}
.help-tour-content{flex:1;min-width:0}
.help-tour-title{font-size:14px;font-weight:700;color:#fff;margin-bottom:2px}
.help-tour-sub{font-size:12px;color:var(--text-muted);line-height:1.45}
.help-tour-sub b{color:#cbd5e1}
.help-tour-btn{
  flex-shrink:0;padding:9px 16px;border-radius:9px;border:0;cursor:pointer;
  background:rgba(99,102,241,.20);color:#c7d2fe;font-weight:700;font-size:12.5px;
  font-family:inherit;transition:all .18s ease;
}
.help-tour-btn:hover{background:rgba(99,102,241,.32);color:#fff;transform:translateY(-1px)}

.help-faq-section{display:flex;flex-direction:column;gap:8px}
.help-faq-category{
  font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:1.2px;
  color:#a78bfa;margin:18px 0 6px;padding-left:2px;
}
.help-faq-category:first-child{margin-top:0}
.help-faq-item{
  background:rgba(255,255,255,.025);
  border:1px solid rgba(255,255,255,.06);
  border-radius:10px;overflow:hidden;
  transition:border-color .18s ease,background .18s ease;
}
.help-faq-item:hover{border-color:rgba(167,139,250,.22);background:rgba(167,139,250,.04)}
.help-faq-item.is-open{
  border-color:rgba(167,139,250,.35);
  background:rgba(167,139,250,.05);
}
.help-faq-q{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:14px 16px;background:none;border:0;cursor:pointer;
  font-family:inherit;text-align:left;
  font-size:14px;font-weight:600;color:#e2e8f0;
  transition:color .18s ease;
}
.help-faq-q:hover{color:#fff}
.help-faq-q > span:first-child{flex:1;min-width:0;line-height:1.4}
.help-faq-arrow{
  flex-shrink:0;width:24px;height:24px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:rgba(167,139,250,.15);color:#a78bfa;
  font-size:18px;font-weight:600;line-height:1;
  transition:all .25s ease;
}
.help-faq-item.is-open .help-faq-arrow{
  transform:rotate(45deg);background:rgba(167,139,250,.3);color:#fff;
}
.help-faq-a{
  max-height:0;overflow:hidden;
  transition:max-height .3s ease,padding .3s ease;
  padding:0 16px;
}
.help-faq-item.is-open .help-faq-a{max-height:400px;padding:0 16px 14px}
.help-faq-a p{
  margin:0;font-size:13px;line-height:1.55;color:#cbd5e1;
}
.help-faq-a a{color:#a78bfa;text-decoration:none;font-weight:600}
.help-faq-a a:hover{text-decoration:underline}
.help-faq-a b{color:#fff}

/* Mobile */
@media (max-width: 720px){
  .help-contact-card{flex-direction:column;align-items:flex-start;gap:12px;padding:16px}
  .help-contact-btn{width:100%;justify-content:center}
  .help-tour-card{flex-direction:column;align-items:flex-start;gap:10px;padding:14px}
  .help-tour-btn{width:100%}
  .help-faq-q{font-size:13px;padding:12px 14px}
  .help-faq-a p{font-size:12.5px}
}

/* ════════════════════════════════════════════════════════════════
   FILTROS AVANÇADOS — Relatórios
   ════════════════════════════════════════════════════════════════ */
.reports-filters{
  display:flex;flex-direction:column;gap:14px;
  margin-bottom:18px;padding:16px 18px;
  background:rgba(255,255,255,.025);
  border:1px solid rgba(255,255,255,.06);
  border-radius:12px;
}
.rf-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.rf-row-summary{justify-content:space-between;gap:14px}
.rf-label{
  font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:1px;
  color:var(--text-muted);flex-shrink:0;min-width:78px;
}
.rf-period-buttons{display:flex;gap:6px;flex-wrap:wrap}
.rf-period-btn{
  padding:6px 12px;border-radius:8px;border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.025);color:var(--text-secondary);
  font-family:inherit;font-size:12.5px;font-weight:600;cursor:pointer;
  transition:all .15s ease;
}
.rf-period-btn:hover{background:rgba(255,255,255,.05);color:#fff}
.rf-period-btn.is-active{
  background:rgba(124,92,255,.18);color:#a78bfa;
  border-color:rgba(124,92,255,.35);
}
.rf-custom-inputs{display:flex;align-items:center;gap:8px;margin-left:8px}
.rf-custom-inputs input[type="date"]{
  padding:6px 10px;border-radius:8px;border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.04);color:#fff;
  font-family:inherit;font-size:12.5px;
  color-scheme:dark;
}
.rf-category-chips{display:flex;gap:6px;flex-wrap:wrap;flex:1;min-width:0}
.rf-chip{
  padding:5px 11px;border-radius:14px;border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.025);color:var(--text-secondary);
  font-size:12px;font-weight:600;cursor:pointer;
  display:inline-flex;align-items:center;gap:6px;
  transition:all .15s ease;
}
.rf-chip:hover{background:rgba(255,255,255,.05);color:#fff}
.rf-chip.is-active{
  background:rgba(16,185,129,.16);color:#10b981;
  border-color:rgba(16,185,129,.35);
}
.rf-chip-icon{font-size:13px;line-height:1}
.rf-summary{font-size:12px;color:var(--text-muted)}
.rf-summary b{color:#cbd5e1;font-weight:700}
.rf-clear-btn{
  display:inline-flex;align-items:center;gap:6px;
  padding:6px 12px;border-radius:8px;cursor:pointer;
  background:rgba(239,68,68,.10);color:#f87171;
  border:1px solid rgba(239,68,68,.25);
  font-family:inherit;font-size:12px;font-weight:600;
  transition:all .15s ease;
}
.rf-clear-btn:hover{background:rgba(239,68,68,.18);color:#fff}

@media (max-width: 720px){
  .reports-filters{padding:12px 14px;gap:10px}
  .rf-row{align-items:flex-start;flex-direction:column;gap:8px}
  .rf-row-summary{flex-direction:row;align-items:center}
  .rf-label{min-width:auto}
  .rf-period-btn{padding:5px 10px;font-size:11.5px}
  .rf-custom-inputs{margin-left:0;flex-wrap:wrap}
}

/* ════════════════════════════════════════════════════════════════
   SMART ALERTS — notificacoes contextuais no Dashboard
   ════════════════════════════════════════════════════════════════ */
.smart-alerts{
  display:flex;flex-direction:column;gap:8px;
  margin-bottom:18px;
}
.smart-alert{
  position:relative;
  display:flex;align-items:flex-start;gap:14px;
  padding:14px 16px;border-radius:12px;
  background:linear-gradient(135deg, var(--alert-color, #6366f1)10, rgba(255,255,255,.025));
  border:1px solid var(--alert-color, #6366f1)33;
  border-left:3px solid var(--alert-color, #6366f1);
  transition: transform .15s ease, box-shadow .15s ease;
}
.smart-alert:hover{
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(0,0,0,.25);
}
.smart-alert-icon{
  flex-shrink:0;width:38px;height:38px;border-radius:10px;
  display:flex;align-items:center;justify-content:center;
  font-size:20px;
}
.smart-alert-content{flex:1;min-width:0}
.smart-alert-title{
  font-size:14px;font-weight:700;color:#fff;
  margin-bottom:3px;line-height:1.3;
}
.smart-alert-desc{
  font-size:12.5px;color:var(--text-secondary);
  line-height:1.45;
}
.smart-alert-actions{
  display:flex;align-items:flex-start;gap:6px;flex-shrink:0;
}
.smart-alert-btn{
  padding:7px 13px;border-radius:8px;border:0;cursor:pointer;
  background:var(--alert-color, #6366f1);color:#fff;
  font-family:inherit;font-size:12.5px;font-weight:700;
  white-space:nowrap;
  transition: filter .15s ease, transform .12s ease;
}
.smart-alert-btn:hover{filter:brightness(1.1);transform:translateY(-1px)}
.smart-alert-btn:active{transform:translateY(0)}
.smart-alert-dismiss{
  width:28px;height:28px;border-radius:7px;cursor:pointer;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);
  color:#94a3b8;
  display:flex;align-items:center;justify-content:center;padding:0;
  transition: all .15s ease;
}
.smart-alert-dismiss:hover{background:rgba(255,255,255,.10);color:#fff}

@media (max-width: 640px){
  .smart-alert{padding:12px 14px;gap:10px}
  .smart-alert-icon{width:32px;height:32px;font-size:17px}
  .smart-alert-title{font-size:13px}
  .smart-alert-desc{font-size:11.5px}
  .smart-alert-actions{flex-direction:column;align-items:stretch}
  .smart-alert-btn{padding:6px 10px;font-size:11.5px}
}