@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,400;0,500;0,600;0,700;0,800;1,500&display=swap');

:root {
    --bg-primary: #ebe3f4;
    --bg-secondary: #ffffff;
    --bg-card: rgba(255,255,255,0.88);
    --bg-card-hover: #fff;
    --bg-input: #f4eefb;
    --bg-modal: rgba(32, 12, 48, 0.55);
    --primary: #6D28D9;
    --primary-hover: #5B21B6;
    --primary-light: #F3E8FF;
    --primary-glow: rgba(109, 40, 217, 0.28);
    --accent: #6D28D9;
    --accent-hover: #5B21B6;
    --accent-light: rgba(109, 40, 217, 0.12);
    --accent-lighter: rgba(167, 139, 250, 0.12);
    --accent-glow: 0 8px 28px rgba(109, 40, 217, 0.28);
    --gold: #7C3AED;
    --gold-dark: #4C1D95;
    --gold-light: rgba(124, 58, 237, 0.12);
    --gold-gradient: linear-gradient(135deg, #8B5CF6 0%, #6D28D9 50%, #3B0764 100%);
    --acai-gradient: linear-gradient(145deg, #2A0A4A 0%, #5B21B6 52%, #7C3AED 100%);
    --text-primary: #1e1233;
    --text-secondary: #5b5270;
    --text-muted: #9086a6;
    --text-accent: #6D28D9;
    --border: #eadff6;
    --border-light: #f3ecfa;
    --danger: #dc3545;
    --warning: #c026d3;
    --success: #15803d;
    --info: #7c3aed;
    --sidebar-w: 268px;
}

html { overflow-x: hidden; }
body {
    font-family: 'Plus Jakarta Sans', 'DM Sans', system-ui, sans-serif;
    background:
        radial-gradient(900px 420px at 8% -8%, rgba(124, 58, 237, 0.20), transparent 55%),
        radial-gradient(720px 380px at 100% 0%, rgba(46, 16, 100, 0.18), transparent 50%),
        linear-gradient(180deg, #e9dff6 0%, #e4d8f2 42%, #f3eef9 100%);
    color: var(--text-primary);
}
.btn-primary, .btn-gold, .plan-card .btn-buy, .btn-alugar {
    background: var(--gold-gradient) !important;
    color: #fff !important;
    box-shadow: var(--accent-glow) !important;
}
.app-layout {
    max-width: none;
    margin: 0;
    min-height: 100vh;
    padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px));
}
.app-sidebar { display: none; }
.sidebar-overlay { display: none; }
.app-header {
    background: rgba(255,255,255,0.78);
    backdrop-filter: blur(18px) saturate(1.25);
    -webkit-backdrop-filter: blur(18px) saturate(1.25);
    border-bottom: 1px solid rgba(232, 214, 248, 0.8);
    padding: 10px 16px;
}
.header-top { display: flex; align-items: center; gap: 10px; }
.header-datetime { display: none; }
.header-menu-btn {
    width: 40px; height: 40px; border: 1px solid var(--border); border-radius: 12px;
    background: #fff; color: var(--text-primary);
    display: inline-flex; align-items: center; justify-content: center;
}
.header-brand { justify-content: flex-start; flex: 1; min-width: 0; }
.header-brand .brand-icon img { height: 40px !important; }
.header-hello, .header-balance-chip, .header-deposit { display: none; }
.header-user { position: relative; }
.header-avatar {
    width: 38px; height: 38px; border-radius: 50%;
    background: var(--gold-gradient); color: #fff; font-weight: 800; font-size: 13px;
    display: flex; align-items: center; justify-content: center; text-decoration: none;
}
.user-menu {
    display: none; position: absolute; right: 0; top: calc(100% + 8px);
    min-width: 180px; background: #fff; border: 1px solid var(--border);
    border-radius: 14px; box-shadow: 0 16px 40px rgba(76, 29, 149, 0.14); z-index: 40; overflow: hidden;
}
.header-user.open .user-menu { display: block; }
.user-menu a {
    display: flex; align-items: center; gap: 8px; padding: 11px 14px;
    color: var(--text-primary); text-decoration: none; font-size: 13px; font-weight: 600;
}
.user-menu a:hover { background: var(--primary-light); }
.page-content { padding: 16px; max-width: 1180px; margin: 0 auto; }
.hero-banner { background: var(--acai-gradient); border-radius: 24px; }
.dash-hello { margin: 4px 0 16px; }
.dash-hello h1 { font-size: 22px; font-weight: 800; letter-spacing: -0.03em; }
.dash-hello p { color: var(--text-secondary); font-size: 13px; margin-top: 4px; }
.kpi-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 16px; }
.kpi-card {
    background: var(--bg-card); border: 1px solid var(--border); border-radius: 18px;
    padding: 14px; box-shadow: 0 8px 24px rgba(76, 29, 149, 0.06);
}
.kpi-card.span2 { grid-column: 1 / -1; background: var(--acai-gradient); color: #fff; border: 0; }
.kpi-card .k { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; opacity: .75; }
.kpi-card .v { font-size: 22px; font-weight: 800; margin-top: 4px; letter-spacing: -0.03em; }
.kpi-card .d { font-size: 12px; font-weight: 700; margin-top: 6px; }
.kpi-card.span2 .d { color: #bbf7d0; }
.kpi-card:not(.span2) .d { color: #15803d; }
.qa-panel {
    background: #fff; border: 1px solid #ece8f3; border-radius: 18px;
    padding: 16px 12px 12px; margin: 0 0 14px;
    box-shadow: 0 10px 28px rgba(46,16,100,.06);
}
.qa-head { padding: 0 6px 12px; }
.qa-head strong { display: block; font-size: 15px; font-weight: 700; color: #1f1630; letter-spacing: -.02em; }
.qa-head span { display: block; margin-top: 3px; font-size: 12px; color: #8b8496; font-weight: 500; }
.quick-actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.quick-action {
    background: #faf8fc; border: 1px solid #f0ecf5; border-radius: 14px; padding: 12px 6px 10px;
    text-align: center; text-decoration: none; color: #3b3348;
    transition: background .15s ease, border-color .15s ease, transform .15s ease;
    display: flex; flex-direction: column; align-items: center; gap: 8px;
}
.quick-action:hover { background: #f3eef9; border-color: #e9dff6; transform: translateY(-1px); box-shadow: none; }
.quick-action .icon {
    width: 38px; height: 38px; margin: 0; border-radius: 12px;
    display: flex; align-items: center; justify-content: center; font-size: 14px;
    background: linear-gradient(180deg, #faf5ff, #efe7fb); color: #5b21b6;
}
.qa-jackpot {
    margin-top: 10px; display: flex; align-items: center; gap: 12px;
    padding: 12px 14px; border-radius: 16px; text-decoration: none;
    background: linear-gradient(120deg, #4c1d95, #6d28d9 48%, #2e1064);
    color: #fff; box-shadow: 0 12px 28px rgba(76,29,149,.28);
    position: relative; overflow: hidden;
}
.qa-jackpot::after {
    content: ''; position: absolute; top: 0; left: -30%; width: 30%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.18), transparent);
    animation: qaShine 3s ease-in-out infinite;
}
@keyframes qaShine { 0% { left: -35%; } 100% { left: 120%; } }
.qa-jackpot .icon {
    width: 42px; height: 42px; border-radius: 14px; flex-shrink: 0;
    background: rgba(255,255,255,.16); color: #fde68a;
    display: flex; align-items: center; justify-content: center; font-size: 18px;
}
.qa-jackpot-copy { flex: 1; min-width: 0; position: relative; z-index: 1; }
.qa-jackpot-copy span { display: block; font-size: 13px; font-weight: 800; }
.qa-jackpot-copy small { display: block; font-size: 11px; opacity: .8; }
.qa-jackpot strong {
    position: relative; z-index: 1; font-size: 15px; font-weight: 800;
    color: #fde68a; white-space: nowrap; font-variant-numeric: tabular-nums;
    text-shadow: 0 4px 14px rgba(0,0,0,.25);
}
.qa-jackpot strong.is-hot { animation: qaPop .55s ease; }
@keyframes qaPop {
    0% { transform: scale(.96); }
    50% { transform: scale(1.06); }
    100% { transform: scale(1); }
}
.quick-action .label { font-size: 12px; font-weight: 600; color: #3b3348; }
.quick-action .icon.green,
.quick-action .icon.gold,
.quick-action .icon.blue,
.quick-action .icon.purple { background: #f3eef9; color: #5b21b6; }
.chart-card { background: #fff; border: 1px solid #ece8f3; border-radius: 16px; padding: 18px 18px 16px; margin: 16px 0; box-shadow: 0 1px 2px rgba(46,16,100,.04); }
.chart-head { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; flex-wrap: wrap; margin-bottom: 14px; }
.chart-head strong { font-size: 15px; font-weight: 700; color: #1f1630; letter-spacing: -.02em; }
.chart-sub { font-size: 12px; color: #8b8496; margin: 4px 0 0; font-weight: 500; }
.chart-filters { display: inline-flex; gap: 0; flex-wrap: nowrap; background: #f6f4f8; border: 1px solid #ece8f3; border-radius: 10px; padding: 3px; }
.chart-filters a {
    font-size: 11px; font-weight: 650; padding: 6px 10px; border-radius: 8px;
    text-decoration: none; color: #6b6575; background: transparent; white-space: nowrap;
}
.chart-filters a.is-on { background: #fff; color: #2e1064; box-shadow: 0 1px 2px rgba(31,22,48,.08); }
.chart-svg { width: 100%; height: 180px; display: block; }
.chart-legend { display: flex; gap: 14px; font-size: 12px; color: var(--text-secondary); margin-top: 8px; }
.chart-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 4px; }
.lg-inv { background: #c4b5fd; }
.lg-ret { background: #6d28d9; }
.acai-visual {
    width: 92px; height: 92px; border-radius: 24px; background: var(--acai-gradient);
    position: relative; overflow: hidden; flex-shrink: 0;
    box-shadow: 0 10px 24px rgba(76,29,149,.25);
}
.acai-visual::before, .acai-visual::after, .acai-visual span {
    content: ''; position: absolute; border-radius: 50%;
    background: radial-gradient(circle at 30% 28%, #e9d5ff, #6d28d9 45%, #3b0764);
}
.acai-visual::before { width: 42px; height: 42px; left: 10px; top: 18px; }
.acai-visual::after { width: 34px; height: 34px; right: 12px; top: 22px; opacity: .9; }
.acai-visual span { width: 28px; height: 28px; left: 32px; bottom: 14px; opacity: .85; display: block; }
.acai-visual.v2 { filter: hue-rotate(12deg); }
.acai-visual.v3 { filter: hue-rotate(-8deg); }
.acai-visual.v4 { filter: hue-rotate(22deg); }
.acai-visual.v5 { filter: hue-rotate(-18deg); }
.acai-visual.v6 { filter: hue-rotate(32deg); }
.taxi-card, .invest-active-card, .balance-card, .checkin-card, .refer-card, .my-plan-card {
    background: #fff; border: 1px solid var(--border); border-radius: 20px;
    box-shadow: 0 10px 28px rgba(76, 29, 149, 0.06);
}
.taxi-img { display: none !important; }
.btn-alugar {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 10px 16px; border-radius: 12px; font-weight: 800; text-decoration: none; font-size: 13px;
}
.bottom-nav {
    left: 0; right: 0; bottom: 0;
    transform: none; max-width: none; width: 100%;
    border-radius: 28px 28px 0 0;
}
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.rank-podium { display: grid; grid-template-columns: 1fr; gap: 10px; margin-bottom: 16px; }
.rank-card { background: #fff; border: 1px solid var(--border); border-radius: 18px; padding: 14px; display: flex; align-items: center; gap: 12px; }
.rank-card.is-me { border-color: #c4b5fd; box-shadow: 0 0 0 3px rgba(109,40,217,.12); }
.rank-pos { font-size: 22px; font-weight: 800; color: var(--accent); width: 36px; }
.rank-card.gold { background: linear-gradient(135deg, #faf5ff, #ede9fe); }
.sim-box { background: #fff; border: 1px solid var(--border); border-radius: 20px; padding: 16px; margin-bottom: 16px; }
.side-nav a {
    display: flex; align-items: center; gap: 10px; color: #e9d5ff; text-decoration: none;
    padding: 11px 12px; border-radius: 12px; font-weight: 600; font-size: 14px;
}
.side-nav a.active, .side-nav a:hover { background: rgba(255,255,255,.1); color: #fff; }
.side-nav .sec { font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: #c4b5fd; padding: 16px 12px 6px; }
.side-nav a i { width: 18px; text-align: center; }
.pix-paid-card { background: #fff; border-radius: 20px; }
.wd-hero { background: var(--acai-gradient) !important; }

@media (max-width: 767px) {
    .app-sidebar {
        display: flex; flex-direction: column; position: fixed; top: 0; left: 0; bottom: 0;
        width: min(86vw, 300px); background: #2e1064; color: #fff; z-index: 1200;
        transform: translateX(-105%); transition: transform .28s ease; padding: 18px 12px;
    }
    .app-sidebar.open { transform: translateX(0); }
    .sidebar-overlay.show {
        display: block; position: fixed; inset: 0; background: rgba(20,8,36,.45); z-index: 1100;
    }
}

@media (min-width: 768px) {
    .header-menu-btn { display: none; }
    .header-hello { display: block; flex: 1; min-width: 0; }
    .header-hello strong { display: block; font-size: 15px; }
    .header-hello span { font-size: 12px; color: var(--text-secondary); }
    .header-balance-chip, .header-deposit { display: inline-flex; align-items: center; gap: 6px; }
    .header-balance-chip {
        background: var(--primary-light); color: var(--accent); font-weight: 800;
        font-size: 13px; padding: 8px 14px; border-radius: 999px;
    }
    .header-deposit {
        background: var(--gold-gradient); color: #fff; text-decoration: none; font-weight: 800;
        font-size: 13px; padding: 8px 16px; border-radius: 999px;
    }
    .kpi-grid { grid-template-columns: repeat(4, 1fr); }
    .kpi-card.span2 { grid-column: span 2; }
    .rank-podium { grid-template-columns: repeat(3, 1fr); }
    .bottom-nav { display: none !important; }
    .app-layout { padding-bottom: 24px; padding-left: calc(var(--sidebar-w) + 20px); }
    .app-sidebar {
        display: flex; flex-direction: column; position: fixed;
        top: 14px; left: 14px; bottom: 14px; right: auto;
        width: var(--sidebar-w); background: linear-gradient(180deg, #2e1064 0%, #1e0a3d 100%);
        color: #fff; z-index: 80; padding: 20px 14px; overflow-y: auto; transform: none;
        border-radius: 24px;
        box-shadow: 0 18px 40px rgba(46, 16, 100, .28);
    }
    .app-header {
        margin: 14px 20px 0 16px;
        padding: 10px 16px !important;
        border-radius: 22px;
        background: rgba(255,255,255,.82) !important;
        border: 1px solid rgba(255,255,255,.95);
        box-shadow: 0 10px 30px rgba(76,29,149,.10);
        backdrop-filter: blur(18px) saturate(1.3);
        -webkit-backdrop-filter: blur(18px) saturate(1.3);
    }
    .app-header.is-compact {
        border-radius: 22px;
        background: rgba(255,255,255,.92) !important;
    }
    .header-btn {
        border-radius: 14px !important;
    }
    .header-avatar { border-radius: 16px !important; }
    .page-content { padding-top: 18px; }
}

@media (min-width: 1280px) {
    .page-content { padding: 24px 28px; }
}

.admin-layout {
    background: radial-gradient(1000px 420px at 100% -10%, rgba(124,58,237,.10), transparent 50%), #f6f1fb !important;
}
.admin-sidebar {
    background: linear-gradient(180deg, #2e1064, #1e0a3d) !important;
    border-right: 0 !important;
}
.admin-sidebar .sidebar-brand h2 { color: #fff !important; }
.admin-nav-section { color: #c4b5fd !important; }
.admin-nav-item { color: #e9d5ff !important; }
.admin-nav-item i { color: #c4b5fd !important; }
.admin-nav-item:hover, .admin-nav-item.active {
    background: rgba(255,255,255,.12) !important; color: #fff !important;
}
.admin-nav-item.active i { color: #fff !important; }
.login-body, .login-page {
    background: radial-gradient(700px 380px at 20% 0%, rgba(168,85,247,.25), transparent 50%),
        linear-gradient(180deg, #2e1064, #4c1d95) !important;
}
.login-header h1, .login-welcome { color: #fff; }


.side-fabs { display: none !important; }
.quick-action { position: relative; }
.quick-action .qa-tag {
    position: absolute; top: 6px; right: 8px;
    background: #eefbf3; color: #15803d; font-size: 9px; font-weight: 700;
    padding: 2px 6px; border-radius: 6px; border: 1px solid #d1fae5;
}
.quick-action .icon.telegram,
.quick-action .icon.whatsapp,
.quick-action .icon.chat,
.quick-action .icon.gift,
.quick-action .icon.bola {
    background: #f3eef9 !important;
    color: #5b21b6 !important;
}
.side-fab-icon.bonus {
    background: linear-gradient(145deg, #a78bfa, #6d28d9) !important;
}
.btn-primary, .btn-gold, .checkin-card .btn-gold, .checkin-card .btn-primary {
    background: linear-gradient(135deg, #A78BFA 0%, #7C3AED 48%, #4C1D95 100%) !important;
    color: #fff !important;
}

.taxi-img { display: none; }
.taxi-img.acai-photo {
    display: block !important;
    width: 100%;
    height: 148px;
    object-fit: cover;
    border-radius: 16px;
    filter: none;
}
.taxi-card { overflow: hidden; padding: 0 0 14px; }
.taxi-card-top { flex-direction: column; gap: 0; }
.taxi-media { width: 100%; position: relative; }
.taxi-info { padding: 12px 14px 0; }
.taxi-foot { padding: 0 14px; }
.taxi-timer {
    position: absolute;
    top: 12px; right: 12px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: linear-gradient(135deg, rgba(46,16,100,.92), rgba(124,58,237,.92));
    backdrop-filter: blur(10px);
    color: #fff;
    font-size: 12px;
    font-weight: 800;
    padding: 8px 12px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.28);
    box-shadow: 0 10px 28px rgba(46,16,100,.35);
    font-variant-numeric: tabular-nums;
    letter-spacing: .04em;
    animation: timerGlow 2.6s ease-in-out infinite;
}
.taxi-timer i { width: 4px; height: 4px; border-radius: 50%; background: #86efac; box-shadow: 0 0 8px #86efac; }
.taxi-timer em { opacity: .45; font-style: normal; }
.taxi-timer .t-s { animation: tickFade 1s ease-in-out infinite; }
@keyframes timerGlow {
    0%,100% { box-shadow: 0 8px 22px rgba(109,40,217,.3); transform: translateY(0); }
    50% { box-shadow: 0 12px 32px rgba(192,132,252,.45); transform: translateY(-1px); }
}
@keyframes tickFade { 0%,100%{opacity:1} 50%{opacity:.4} }

.plan-kicker {
    padding: 0;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #7c3aed;
}
.plan-infogrid {
    margin: 0 0 16px;
    background: #fff;
    border: 1px solid #ece8f3;
    border-radius: 16px;
    padding: 14px;
}
.plan-details { margin: 0 0 16px; background: #fff; border-radius: 16px; padding: 16px; border: 1px solid #ece8f3; }

.pf-hero {
    display: flex; gap: 14px; align-items: center;
    background: var(--acai-gradient);
    color: #fff; border-radius: 24px; padding: 20px; margin-bottom: 16px;
}
.pf-hero h1 { font-size: 24px; margin: 0; }
.pf-hero p { opacity: .85; font-size: 13px; margin-top: 2px; }
.pf-ava {
    width: 64px; height: 64px; border-radius: 20px;
    background: rgba(255,255,255,.18); display: flex; align-items: center; justify-content: center;
    font-size: 26px; font-weight: 800;
}
.pf-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.pf-chips span { background: rgba(255,255,255,.16); border-radius: 999px; padding: 4px 8px; font-size: 11px; font-weight: 700; }
.pf-menu { background: #fff; border: 1px solid var(--border); border-radius: 20px; overflow: hidden; }
.pf-menu a {
    display: flex; align-items: center; gap: 12px;
    padding: 14px 16px; color: var(--text-primary); text-decoration: none;
    border-bottom: 1px solid var(--border-light); font-weight: 650; font-size: 14px;
}
.pf-menu a i { width: 18px; color: #7c3aed; }
.pf-menu a b { margin-left: auto; color: #c4b5fd; font-weight: 400; }
.pf-menu a.is-out { color: #b91c1c; }
.pf-hero .header-deposit { display: inline-flex !important; margin-top: 10px; }

.aff-hero {
    background: var(--acai-gradient); color: #fff;
    border-radius: 24px; padding: 22px 20px; margin-bottom: 14px;
}
.aff-hero p { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; opacity: .8; font-weight: 800; }
.aff-hero h1 { font-size: 26px; margin: 4px 0 8px; }
.invite-link-card, .invite100-card, .team-stats {
    background: #fff; border: 1px solid var(--border); border-radius: 18px;
}


.dep-page { padding-bottom: 28px; max-width: 560px; }
.dep-hero {
    background: var(--acai-gradient); color: #fff;
    border-radius: 24px; padding: 20px; margin-bottom: 12px;
    position: relative; overflow: hidden;
    box-shadow: 0 14px 36px rgba(76, 29, 149, .28);
}
.dep-hero::after {
    content: '';
    position: absolute; right: -28px; top: -36px;
    width: 150px; height: 150px; border-radius: 50%;
    background: radial-gradient(circle, rgba(255,255,255,.22), transparent 70%);
}
.dep-hero-top { display: flex; align-items: center; justify-content: space-between; position: relative; z-index: 1; }
.dep-kicker { font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; opacity: .75; }
.dep-pix-tag {
    display: inline-flex; align-items: center; gap: 6px;
    background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.2);
    border-radius: 999px; padding: 5px 10px; font-size: 11px; font-weight: 700;
}
.dep-amount { font-size: 32px; font-weight: 800; letter-spacing: -.04em; margin: 10px 0 14px; position: relative; z-index: 1; }
.dep-metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; position: relative; z-index: 1; }
.dep-metric { background: rgba(255,255,255,.12); border-radius: 14px; padding: 10px 12px; }
.dep-metric span { display: block; font-size: 11px; opacity: .7; }
.dep-metric b { font-size: 14px; }
.dep-tabs {
    display: grid; grid-template-columns: 1fr 1fr; gap: 6px;
    background: #fff; border: 1px solid var(--border); border-radius: 16px;
    padding: 5px; margin-bottom: 14px;
}
.dep-tabs a {
    text-align: center; text-decoration: none; color: var(--text-secondary);
    font-size: 13px; font-weight: 800; padding: 10px; border-radius: 12px;
}
.dep-tabs a.is-on { background: var(--gold-gradient); color: #fff; }
.dep-card {
    background: #fff; border: 1px solid var(--border); border-radius: 22px;
    padding: 18px 16px; margin-bottom: 14px;
    box-shadow: 0 10px 28px rgba(76, 29, 149, .06);
}
.dep-card h2 { font-size: 16px; font-weight: 800; margin: 0 0 14px; }
.dep-card label { display: block; font-size: 12px; font-weight: 700; color: var(--text-secondary); margin-bottom: 6px; }
.dep-rs {
    position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
    font-weight: 800; color: var(--accent); z-index: 2;
}
.dep-input { position: relative; }
.dep-input input { padding-left: 42px !important; font-size: 22px !important; font-weight: 800; }
.dep-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 16px; }
.dep-chip {
    border: 1px solid var(--border); background: var(--bg-input); color: var(--text-primary);
    font-weight: 800; font-size: 12px; padding: 9px 12px; border-radius: 999px;
    cursor: pointer; font-family: inherit;
}
.dep-chip.active, .dep-chip:hover {
    background: var(--primary-light); color: var(--accent); border-color: #c4b5fd;
}
.dep-method {
    display: flex; align-items: center; gap: 12px;
    padding: 12px; border-radius: 16px; background: #faf5ff;
    border: 1px solid #e9d5ff; margin-bottom: 16px;
}
.dep-method .t { font-size: 14px; font-weight: 800; }
.dep-method .s { font-size: 12px; color: var(--text-secondary); margin-top: 2px; }
.dep-check { margin-left: auto; color: var(--accent); }
.dep-submit {
    width: 100%; border: 0; cursor: pointer; color: #fff; font-weight: 800; font-size: 15px;
    padding: 15px; border-radius: 16px; font-family: inherit;
    background: var(--gold-gradient); box-shadow: var(--accent-glow);
}
.dep-submit:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; }
.dep-note {
    display: flex; gap: 8px; align-items: flex-start;
    background: #faf5ff; color: #6d28d9; border-radius: 12px;
    padding: 10px 12px; font-size: 12px; margin-bottom: 14px;
}
.dep-note.warn { background: #fff7ed; color: #9a3412; }
.dep-row {
    display: flex; align-items: center; gap: 12px; padding: 12px 0;
    border-bottom: 1px solid var(--border-light);
}
.dep-row:last-child { border-bottom: 0; padding-bottom: 0; }
.dep-row:first-child { padding-top: 0; }
.dep-ico {
    width: 42px; height: 42px; border-radius: 14px;
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.dep-ico.wait { background: #fae8ff; color: #a21caf; }
.dep-ico.ok { background: #ecfdf5; color: #059669; }
.dep-ico.no { background: #fef2f2; color: #dc2626; }
.dep-ico.pix { background: var(--primary-light); color: var(--accent); }
.dep-row .t { font-size: 15px; font-weight: 800; }
.dep-row .s { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.dep-pill { margin-left: auto; font-size: 11px; font-weight: 800; border-radius: 999px; padding: 5px 10px; white-space: nowrap; }
.dep-pill.wait { background: #fae8ff; color: #a21caf; }
.dep-pill.ok { background: #ecfdf5; color: #047857; }
.dep-pill.no { background: #fef2f2; color: #b91c1c; }
.dep-empty { text-align: center; color: var(--text-muted); padding: 28px 8px; }
.dep-empty i { font-size: 28px; margin-bottom: 10px; display: block; }
.dep-empty a { display: inline-block; margin-top: 10px; font-weight: 800; color: var(--accent); text-decoration: none; }
.dep-pending { text-align: center; }
.dep-pending h3 { margin: 10px 0 4px; font-size: 18px; }
.dep-pending p { color: var(--text-secondary); font-size: 13px; }
.dep-pending .dep-ico { margin: 0 auto; width: 56px; height: 56px; font-size: 22px; }
.pix-stage {
    position: relative; overflow: hidden; text-align: center;
    background: #fff; border-radius: 24px; padding: 24px 16px;
    border: 1px solid var(--border);
}
.dep-wait {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 16px; font-weight: 800; position: relative;
}
.dep-live {
    width: 8px; height: 8px; border-radius: 50%; background: #22c55e;
    box-shadow: 0 0 0 6px rgba(34,197,94,.18);
}
.dep-wait-sub { color: var(--text-secondary); font-size: 13px; margin: 6px 0 16px; position: relative; }
.dep-qr {
    background: #fff; padding: 14px; border-radius: 18px; display: inline-block;
    margin-bottom: 14px; border: 1px solid var(--border);
    box-shadow: 0 10px 28px rgba(76,29,149,.08); position: relative;
}
.dep-qr img { width: 200px; max-width: 70vw; display: block; }
.dep-pay-amt { font-size: 28px; font-weight: 800; color: var(--accent); margin-bottom: 12px; letter-spacing: -.03em; }
.dep-copybox {
    background: var(--bg-input); padding: 12px 14px; border-radius: 12px;
    margin-bottom: 14px; word-break: break-all; font-family: ui-monospace, monospace;
    font-size: 11px; color: var(--text-secondary); text-align: left;
}
.dep-hint { margin-top: 12px; font-size: 12px; color: var(--text-muted); }
.dep-id { margin-top: 6px; font-size: 11px; color: var(--text-muted); }

.pix-pulse {
    position: absolute; width: 180px; height: 180px; border-radius: 50%;
    left: 50%; top: 40px; transform: translateX(-50%);
    background: radial-gradient(circle, rgba(167,139,250,.35), transparent 70%);
    animation: pixPulse 2.2s ease-out infinite;
    pointer-events: none;
}
@keyframes pixPulse { 0%{transform:translateX(-50%) scale(.7); opacity:.8} 100%{transform:translateX(-50%) scale(1.4); opacity:0} }

.acai-visual { display: none !important; }
.invest-active-media .acai-photo {
    width: 84px !important;
    height: 84px !important;
    border-radius: 14px;
}
.pf-hero + .kpi-grid .header-deposit { display: inline-flex !important; }
.kpi-card .header-deposit { display: inline-flex !important; }

.kpi-grid.kpi-2x2 { grid-template-columns: 1fr 1fr !important; }
@media (min-width: 1100px) {
    .kpi-grid.kpi-2x2 { grid-template-columns: repeat(4, 1fr) !important; }
}
.kpi-card.span2 { grid-column: auto; }
.kpi-card.is-accent {
    background: var(--acai-gradient);
    color: #fff;
    border: 0;
}
.kpi-card.is-accent .k, .kpi-card.is-accent .d { color: #fff; opacity: .9; }
.kpi-card .k i { margin-right: 4px; opacity: .85; }
.kpi-link { display: inline-block; margin-top: 8px; font-size: 12px; font-weight: 800; color: var(--accent); text-decoration: none; }

.quick-actions {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 2px !important;
    margin-bottom: 0;
}

.checkin-card.is-compact { padding: 12px 14px; margin-bottom: 14px; }
.checkin-card.is-compact .ci-top { display: flex; align-items: center; gap: 10px; }
.checkin-card.is-compact .ci-ico {
    width: 42px; height: 42px; border-radius: 14px; flex-shrink: 0;
    background: var(--gold-gradient); color: #fff;
    display: flex; align-items: center; justify-content: center; font-size: 16px;
}
.checkin-card.is-compact .ci-copy { flex: 1; min-width: 0; }
.checkin-card.is-compact h3 { font-size: 15px; margin: 0; }
.checkin-card.is-compact p { margin: 0; font-size: 12px; }
.checkin-card.is-compact .ci-form { margin: 0; }
.checkin-card.is-compact .ci-btn {
    border: 0; border-radius: 999px; padding: 10px 14px;
    background: var(--gold-gradient); color: #fff; font-weight: 800; font-size: 13px; white-space: nowrap;
}
.checkin-card.is-compact .ci-btn.is-done { background: #ecfdf3; color: #15803d; }
.checkin-card.is-compact .checkin-streak { margin-top: 10px; padding-top: 10px; }
.checkin-card.is-compact .checkin-dot { height: 26px; }

.chart-empty { text-align: left; padding: 0; color: var(--text-secondary); }
.chart-card { margin: 12px 0; }
.chart-svg { height: 168px; }

.app-sidebar { justify-content: flex-start; }
.side-nav { flex: 1; }
.side-foot {
    margin-top: auto;
    padding-top: 14px;
    border-top: 1px solid rgba(255,255,255,.12);
}
.side-user {
    display: flex; align-items: center; gap: 10px;
    color: #fff; text-decoration: none;
    padding: 10px; border-radius: 14px;
    background: rgba(255,255,255,.08);
}
.side-user span {
    width: 36px; height: 36px; border-radius: 12px;
    background: var(--gold-gradient);
    display: flex; align-items: center; justify-content: center; font-weight: 800;
}
.side-user strong { display: block; font-size: 13px; }
.side-user small { color: #e9d5ff; font-size: 11px; }
.side-out {
    display: flex; align-items: center; gap: 8px;
    margin-top: 8px; color: #e9d5ff; font-size: 13px; text-decoration: none; padding: 8px 10px;
}
.refer-hero { padding: 16px 16px 14px; }
.refer-hero h3 { font-size: 18px; }

.app-sidebar {
    overflow: hidden;
    border-radius: 0 28px 28px 0 !important;
    background: linear-gradient(185deg, #1e0a3d 0%, #2e1064 42%, #1a0633 100%) !important;
    box-shadow: 18px 0 40px rgba(46,16,100,.18);
}

.side-art {
    position: relative;
    margin: -8px -6px 16px;
    padding: 10px 8px 6px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.side-brand {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    margin: 0;
}
.side-brand img {
    display: block;
    width: auto;
    max-width: 248px;
    max-height: 118px;
    width: 100%;
    height: auto;
    object-fit: contain;
    filter: drop-shadow(0 8px 18px rgba(0,0,0,.28));
}
.side-nav a {
    border-radius: 999px !important;
    margin: 2px 6px;
}
.side-nav a.active {
    background: linear-gradient(90deg, rgba(192,132,252,.35), rgba(255,255,255,.08)) !important;
    box-shadow: inset 3px 0 0 #c084fc;
}
.side-user { border-radius: 18px !important; }
.chart-kpis {
    display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
    margin-bottom: 12px;
}
.chart-kpis small {
    display: block; font-size: 10px; font-weight: 700; letter-spacing: .08em;
    text-transform: uppercase; color: #8b8496;
}
.chart-kpis strong { display: block; margin-top: 4px; font-size: 18px; color: #1f1630; font-weight: 700; letter-spacing: -.03em; }
.chart-illu {
    margin: 0; border: 1px solid #f0ecf5; border-radius: 12px;
    background: linear-gradient(180deg, #fcfbfd 0%, #f7f5fa 100%);
    overflow: hidden;
}
.chart-illu svg { width: 100%; height: 168px; display: block; }
.chart-empty-foot {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    margin-top: 12px; flex-wrap: wrap;
}
.chart-empty p { margin: 0; font-size: 12px; color: #8b8496; line-height: 1.45; max-width: 420px; }
.chart-cta {
    display: inline-flex; align-items: center; font-size: 12px; font-weight: 700;
    color: #5b21b6; text-decoration: none; padding: 8px 12px;
    border: 1px solid #ddd6fe; border-radius: 8px; background: #faf8ff;
    white-space: nowrap;
}
.chart-cta:hover { background: #f3e8ff; }
@media (max-width: 767px) {
    .app-sidebar { border-radius: 0 24px 24px 0 !important; }
}

.app-header.is-glass {
    margin: 10px 12px 0;
    padding: 8px 12px !important;
    border-radius: 20px;
    background: rgba(255,255,255,.72) !important;
    border: 1px solid rgba(255,255,255,.9);
    box-shadow: 0 10px 30px rgba(76,29,149,.08);
    backdrop-filter: blur(18px) saturate(1.3);
}
.header-brand { display: none; }
.header-mark {
    display: flex; align-items: center; gap: 8px;
    text-decoration: none; color: inherit; flex-shrink: 0;
}
.hm-bowl {
    width: 36px; height: 36px; border-radius: 12px;
    background: var(--acai-gradient);
    position: relative; overflow: hidden;
    box-shadow: 0 6px 14px rgba(109,40,217,.28);
}
.hm-bowl i, .hm-bowl b {
    position: absolute; border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, #f3e8ff, #7c3aed 50%, #3b0764);
}
.hm-bowl i { width: 14px; height: 14px; left: 6px; top: 8px; }
.hm-bowl b { width: 10px; height: 10px; right: 7px; top: 10px; }
.hm-text { display: flex; flex-direction: column; line-height: 1.05; }
.hm-text strong { font-size: 15px; font-weight: 800; color: #3b0764; letter-spacing: -.03em; }
.hm-text em { font-style: normal; font-size: 9px; letter-spacing: .2em; text-transform: uppercase; color: #7c3aed; font-weight: 700; }
.header-hello { flex: 1; min-width: 0; }
.header-hello strong { font-size: 15px; color: #2e1064; }
.header-hello span { display: block; font-size: 12px; color: #7c7390; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.header-balance-chip {
    display: inline-flex !important; flex-direction: column; align-items: flex-end;
    gap: 0; line-height: 1.15; padding: 6px 12px !important;
}
.header-balance-chip small { font-size: 9px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; opacity: .7; }
.header-deposit span { display: none; }
@media (min-width: 768px) {
    .app-header.is-glass { margin: 12px 20px 0 16px; padding: 10px 14px !important; }
    .header-deposit span { display: inline; }
    .header-menu-btn { display: none; }
    .dash-hello { display: none; }
}
.header-actions { display: flex; align-items: center; gap: 8px; }
@media (max-width: 767px) {
    .header-hello { display: none !important; }
    .header-balance-chip { display: none !important; }
    .header-user { display: none !important; }
    .header-top {
        position: relative;
        min-height: 56px;
        height: 56px;
        justify-content: space-between;
        overflow: visible;
    }
    .app-header { overflow: visible; }
    .header-menu-btn {
        display: inline-flex !important;
        width: 40px; height: 40px;
        border: 0;
        border-radius: 14px;
        background: #fff;
        color: #4c1d95;
        box-shadow: 0 6px 16px rgba(76,29,149,.12);
        z-index: 2;
    }
    .header-brand {
        display: flex !important;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        flex: none !important;
        z-index: 1;
    }
    .header-brand .brand-icon img { height: 64px !important; max-height: none; }
    .header-actions { margin-left: auto; z-index: 2; }
    .header-deposit {
        display: inline-flex !important;
        width: auto; height: 40px;
        padding: 0 12px !important;
        align-items: center; justify-content: center; gap: 6px;
        border-radius: 999px;
        background: var(--gold-gradient) !important;
        color: #fff !important;
        font-size: 12px !important;
        font-weight: 800;
        box-shadow: 0 8px 18px rgba(109,40,217,.32);
        text-decoration: none;
    }
    .header-deposit span { display: none !important; }
    .header-deposit i {
        font-size: 14px;
        width: 22px; height: 22px;
        border-radius: 50%;
        background: rgba(255,255,255,.2);
        display: inline-flex; align-items: center; justify-content: center;
    }
    .header-btn {
        width: 40px; height: 40px; border-radius: 14px;
        background: #fff !important;
        color: #4c1d95 !important;
        box-shadow: 0 6px 16px rgba(76,29,149,.12);
        display: inline-flex; align-items: center; justify-content: center;
    }
}

/* —— Páginas internas: carteira, saque, extrato, equipe, ranking, perfil, suporte —— */
.page-hero {
    position: relative; overflow: hidden;
    background: var(--acai-gradient); color: #fff;
    border-radius: 26px; padding: 22px 20px 20px; margin-bottom: 16px;
    box-shadow: 0 16px 36px rgba(76, 29, 149, .22);
}
.page-hero::before, .page-hero::after {
    content: ''; position: absolute; border-radius: 50%;
    background: radial-gradient(circle, rgba(255,255,255,.22), transparent 68%);
    pointer-events: none;
}
.page-hero::before { width: 160px; height: 160px; right: -40px; top: -50px; }
.page-hero::after { width: 90px; height: 90px; left: -20px; bottom: -30px; opacity: .5; }
.page-hero .kicker {
    font-size: 11px; font-weight: 800; letter-spacing: .14em;
    text-transform: uppercase; opacity: .78; position: relative; z-index: 1;
}
.page-hero h1 { font-size: 26px; font-weight: 800; letter-spacing: -.03em; margin: 6px 0 6px; position: relative; z-index: 1; }
.page-hero p { font-size: 13px; opacity: .88; margin: 0; max-width: 42ch; position: relative; z-index: 1; }
.page-hero .hero-amt { font-size: 34px; font-weight: 800; letter-spacing: -.04em; margin: 10px 0 4px; position: relative; z-index: 1; }
.wallet-kpis { margin-bottom: 18px; }
.wallet-kpis .kpi-card.is-accent { grid-column: 1 / -1; }
.wallet-kpis .kpi-card { transition: transform .2s ease, box-shadow .2s ease; }
.wallet-kpis .kpi-card:hover { transform: translateY(-2px); box-shadow: 0 14px 28px rgba(76,29,149,.12); }
.quick-actions.is-wallet { grid-template-columns: repeat(4, 1fr) !important; }
@media (max-width: 520px) {
    .quick-actions.is-wallet { grid-template-columns: repeat(2, 1fr) !important; }
}

.wd-page .wd-hero { border-radius: 26px !important; padding: 22px 20px !important; }
.wd-page .wd-card {
    border: 1px solid var(--border) !important;
    box-shadow: 0 10px 28px rgba(76,29,149,.07) !important;
}
.wd-page .wd-submit {
    background: var(--gold-gradient) !important;
    box-shadow: 0 10px 24px rgba(109,40,217,.32) !important;
}
.wd-page .wd-chip { background: var(--primary-light); color: var(--accent); }
.wd-page .wd-chip:hover { background: #ede9fe; }
.wd-preview {
    display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
    margin: 0 0 14px; padding: 12px; border-radius: 14px;
    background: linear-gradient(180deg, #faf5ff, #fff); border: 1px solid var(--border);
}
.wd-preview span { display: block; font-size: 11px; color: var(--text-muted); font-weight: 700; }
.wd-preview b { font-size: 16px; }
.wd-preview .net { color: var(--success); }

.tx-filters { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 8px; margin-bottom: 8px; -webkit-overflow-scrolling: touch; }
.tx-filters a {
    flex-shrink: 0; text-decoration: none; font-size: 12px; font-weight: 800;
    padding: 8px 12px; border-radius: 999px; color: var(--text-secondary);
    background: #fff; border: 1px solid var(--border);
}
.tx-filters a.is-on { background: var(--gold-gradient); color: #fff; border-color: transparent; }
.tx-list { background: #fff; border: 1px solid var(--border); border-radius: 22px; overflow: hidden; }
.tx-row {
    display: flex; align-items: center; gap: 12px;
    padding: 13px 14px; border-bottom: 1px solid var(--border-light);
}
.tx-row:last-child { border-bottom: 0; }
.tx-ico {
    width: 42px; height: 42px; border-radius: 14px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center; font-size: 15px;
}
.tx-ico.in { background: #ecfdf3; color: #15803d; }
.tx-ico.out { background: #fef2f2; color: #dc2626; }
.tx-ico.neu { background: #ede9fe; color: #6d28d9; }
.tx-row h3 { font-size: 13px; font-weight: 700; margin: 0; line-height: 1.3; }
.tx-row p { font-size: 11px; color: var(--text-muted); margin: 3px 0 0; }
.tx-amt { margin-left: auto; font-weight: 800; font-size: 13px; white-space: nowrap; }
.tx-amt.pos { color: #15803d; }
.tx-amt.neg { color: #dc2626; }

.rank-podium {
    display: grid !important;
    grid-template-columns: 1fr 1.15fr 1fr;
    align-items: end; gap: 10px; margin-bottom: 18px;
}
.podium-card {
    background: #fff; border: 1px solid var(--border); border-radius: 22px;
    padding: 16px 10px 14px; text-align: center;
    box-shadow: 0 10px 28px rgba(76,29,149,.08);
}
.podium-card .ava {
    width: 52px; height: 52px; margin: 0 auto 8px; border-radius: 50%;
    background: var(--gold-gradient); color: #fff; font-weight: 800;
    display: flex; align-items: center; justify-content: center; font-size: 20px;
    box-shadow: 0 8px 18px rgba(109,40,217,.3);
}
.podium-card .place { font-size: 12px; font-weight: 800; color: var(--accent); letter-spacing: .08em; }
.podium-card strong { display: block; font-size: 13px; margin: 4px 0 2px; }
.podium-card .earn { font-size: 12px; color: var(--text-secondary); font-weight: 700; }
.podium-card.is-1 { padding-top: 22px; background: linear-gradient(180deg, #faf5ff, #fff); border-color: #c4b5fd; transform: translateY(-8px); }
.podium-card.is-1 .ava { width: 64px; height: 64px; font-size: 24px; }
.podium-card.is-2 .ava { background: linear-gradient(135deg, #94a3b8, #475569); }
.podium-card.is-3 .ava { background: linear-gradient(135deg, #d6a57a, #b45309); }
.rank-list { background: #fff; border: 1px solid var(--border); border-radius: 22px; overflow: hidden; }
.rank-list .rank-card { border: 0; border-radius: 0; border-bottom: 1px solid var(--border-light); }
.rank-list .rank-card:last-child { border-bottom: 0; }
@media (max-width: 640px) {
    .rank-podium { grid-template-columns: 1fr; }
    .podium-card.is-1 { transform: none; }
}

.pf-hero { position: relative; overflow: hidden; box-shadow: 0 16px 36px rgba(76,29,149,.2); }
.pf-hero::after {
    content: ''; position: absolute; right: -30px; top: -40px; width: 140px; height: 140px;
    border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,.2), transparent 70%);
}
.pf-menu a { transition: background .15s ease; }
.pf-menu a:hover { background: #faf5ff; }
.pf-menu a .mi {
    width: 36px; height: 36px; border-radius: 12px;
    background: var(--primary-light); color: var(--accent);
    display: inline-flex; align-items: center; justify-content: center;
}
.pf-menu a.is-out .mi { background: #fef2f2; color: #b91c1c; }
.pf-menu a i { width: auto; color: inherit; }

.aff-hero { position: relative; overflow: hidden; box-shadow: 0 16px 36px rgba(76,29,149,.2); }
.aff-hero::before {
    content: ''; position: absolute; right: -24px; top: -36px; width: 140px; height: 140px;
    border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,.2), transparent 70%);
}
.invite-link-card, .invite100-card, .team-stats, .team-level-card, .milestone-card {
    border: 1px solid var(--border) !important;
    box-shadow: 0 10px 24px rgba(76,29,149,.06);
}
.invite-copy, .btn-receber {
    background: var(--gold-gradient) !important;
    color: #fff !important;
}
.invite-progress-bar span { background: var(--gold-gradient) !important; }
.team-level-card { transition: transform .2s ease; }
.team-level-card:hover { transform: translateY(-2px); }

.chat-screen {
    background:
        radial-gradient(600px 280px at 10% -10%, rgba(167,139,250,.28), transparent 55%),
        linear-gradient(180deg, #f4ecfb, #efe6f8) !important;
}
.chat-head {
    background: linear-gradient(135deg, #2e1064, #6d28d9) !important;
    border-bottom: 0 !important;
    border-radius: 0 0 22px 22px;
    box-shadow: 0 12px 28px rgba(46,16,100,.25);
}
.chat-head .agent {
    display: flex; align-items: center; gap: 10px; flex: 1;
}
.chat-head .agent span {
    width: 36px; height: 36px; border-radius: 12px;
    background: rgba(255,255,255,.18); display: flex; align-items: center; justify-content: center;
}
.chat-head h1 { text-align: left !important; margin-right: 0 !important; font-size: 15px; }
.chat-head small { display: block; font-size: 11px; opacity: .8; font-weight: 600; }
.chat-message.sent .chat-bubble { background: var(--gold-gradient) !important; }
.chat-send { background: var(--gold-gradient) !important; border-radius: 14px !important; }
.chat-empty i { color: #7c3aed; }

.team-level-card .level-number { font-size: 20px; box-shadow: 0 8px 16px rgba(0,0,0,.12); }
.team-level-card .level-1 {
    background: linear-gradient(145deg, #f6d365, #e0a106 55%, #b45309) !important;
    color: #fff8e1 !important;
    text-shadow: 0 1px 0 rgba(0,0,0,.2);
}
.team-level-card .level-2 {
    background: linear-gradient(145deg, #e8eef5, #94a3b8 50%, #64748b) !important;
    color: #fff !important;
}
.team-level-card .level-3 {
    background: linear-gradient(145deg, #e8b07a, #c2410c 55%, #9a3412) !important;
    color: #fff7ed !important;
}
.medal-tag {
    font-style: normal; font-size: 10px; font-weight: 800;
    letter-spacing: .06em; text-transform: uppercase;
    padding: 3px 8px; border-radius: 999px; margin-left: 6px; vertical-align: middle;
}
.medal-tag.gold { background: #fff7ed; color: #b45309; }
.medal-tag.silver { background: #f1f5f9; color: #475569; }
.medal-tag.bronze { background: #fff7ed; color: #9a3412; }

.wallet-actions {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px;
    margin: 4px 0 8px;
}
.wallet-btn {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
    min-height: 92px; padding: 14px 8px;
    border-radius: 18px; text-decoration: none; font-weight: 800; font-size: 12px;
    color: #fff !important; box-shadow: 0 10px 22px rgba(76,29,149,.18);
}
.wallet-btn i { font-size: 18px; }
.wallet-btn.deposit { background: linear-gradient(160deg, #16a34a, #15803d); }
.wallet-btn.withdraw { background: linear-gradient(160deg, #a78bfa, #6d28d9 55%, #4c1d95); }
.wallet-btn.extra { background: linear-gradient(160deg, #7c3aed, #5b21b6); }
.wallet-btn.invest { background: linear-gradient(160deg, #c026d3, #7e22ce); }
@media (max-width: 520px) {
    .wallet-actions { grid-template-columns: repeat(2, 1fr); }
    .wallet-btn { min-height: 84px; font-size: 13px; }
}

/* Plan page centered */
.page-content.plan-page {
    max-width: none !important;
    width: 100% !important;
    margin: 0 auto !important;
    padding: 0 0 24px !important;
}
.plan-head {
    max-width: 640px;
    width: 100%;
    margin: 0 auto;
    padding: 12px 16px !important;
    background: transparent !important;
    position: sticky;
    top: 0;
    z-index: 30;
    backdrop-filter: blur(12px);
}
.plan-head h1 {
    margin: 0 !important;
    text-align: center;
    font-size: 16px;
    font-weight: 700;
    color: #1f1630;
}
.plan-shell {
    width: 100%;
    max-width: 640px;
    margin: 0 auto;
    padding: 0 16px 120px;
    box-sizing: border-box;
}
.plan-alert { margin: 0 auto 12px; max-width: 640px; }
.plan-gallery {
    position: relative;
    display: grid;
    grid-template-columns: 1.45fr 1fr 1fr;
    gap: 3px;
    height: 210px;
    border-radius: 16px;
    overflow: hidden;
    background: #1f1630;
    margin-bottom: 14px;
}
.plan-gallery.is-sm { height: 140px; }
.plan-gallery img {
    width: 100%;
    height: 210px;
    object-fit: cover;
    display: block;
    animation: none !important;
}
.plan-gallery.is-sm img { height: 140px; }
.plan-gallery-cap {
    position: absolute; left: 0; right: 0; bottom: 0;
    padding: 16px 14px 12px;
    background: linear-gradient(180deg, transparent, rgba(20,8,36,.82));
    color: #fff;
}
.plan-gallery-cap h2 { font-size: 20px; margin: 6px 0 8px; letter-spacing: -.03em; }
.plan-gallery-cap .taxi-timer { position: static; display: inline-flex; }
.plan-next-yield { margin: 0 0 14px !important; }
.plan-h { padding: 4px 0 8px !important; }
.plan-confirm-card, .plan-box, .rent-receipt {
    margin-left: 0 !important;
    margin-right: 0 !important;
}
.plan-sticky {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    transform: none !important;
    width: auto !important;
    max-width: none !important;
    display: flex !important;
    justify-content: center;
    background: linear-gradient(180deg, transparent, rgba(244,236,251,.96) 28%) !important;
    box-shadow: none !important;
    border: 0 !important;
    padding: 10px 16px calc(12px + env(safe-area-inset-bottom)) !important;
    z-index: 90;
}
.plan-dock {
    width: 100%;
    max-width: 640px;
    background: #fff;
    border: 1px solid #ece8f3;
    border-radius: 16px;
    padding: 12px 14px;
    box-shadow: 0 12px 32px rgba(46,16,100,.12);
}
.plan-dock .plan-sticky-btn { width: 100%; display: flex; justify-content: center; }
@media (min-width: 768px) {
    .plan-sticky { left: var(--sidebar-w) !important; }
    .plan-gallery, .plan-gallery img { height: 240px; }
    .plan-gallery.is-sm, .plan-gallery.is-sm img { height: 160px; }
    .plan-infogrid { grid-template-columns: 1fr 1fr !important; }
}
.plan-page .plan-infogrid { grid-template-columns: 1fr 1fr !important; }
.plan-page .plan-confirm-card { margin: 0 0 16px; }

/* ===== Invest desktop canvas ===== */
body.page-invest .page-content.invest-page {
    max-width: none !important;
    width: 100% !important;
    margin: 0 !important;
}
.invest-desk { width: 100%; }
.invest-toolbar {
    display: flex; flex-direction: column; gap: 12px;
    background: #fff; border: 1px solid #ece8f3; border-radius: 16px;
    padding: 14px; margin: 0 0 12px;
    box-shadow: 0 8px 24px rgba(16,6,40,.08);
}
.invest-search {
    display: flex; align-items: center; gap: 10px;
    background: #f6f4f8; border: 1px solid #ece8f3; border-radius: 12px;
    padding: 8px 10px;
}
.invest-search i { color: #6d28d9; }
.invest-search input[type="search"] {
    flex: 1; min-width: 0; border: 0 !important; outline: none !important;
    background: transparent !important; box-shadow: none !important;
    font-size: 14px; color: #1f1630 !important; height: 36px;
}
.invest-search button {
    border: 0; background: #2e1064; color: #fff !important; font-weight: 700;
    font-size: 13px; border-radius: 10px; padding: 8px 14px; cursor: pointer;
}
.invest-toolbar .filter-row {
    display: flex !important; gap: 6px; overflow: auto;
    background: #f6f4f8; border: 1px solid #ece8f3; border-radius: 12px;
    padding: 4px !important; margin: 0;
}
.invest-toolbar .filter-row a {
    color: #4b4458 !important; background: transparent;
    font-size: 13px; font-weight: 650; padding: 8px 12px; border-radius: 9px;
    text-decoration: none; white-space: nowrap;
}
.invest-toolbar .filter-row a.is-active {
    background: #fff !important; color: #2e1064 !important;
    box-shadow: 0 1px 3px rgba(31,22,48,.10);
}
.city-pills { display: flex; gap: 8px; overflow: auto; padding: 0 0 14px; }
.city-pill {
    flex: 0 0 auto; padding: 8px 14px; border-radius: 999px !important;
    background: #fff !important; color: #3b3348 !important;
    border: 1px solid #ece8f3; font-weight: 650 !important; text-decoration: none;
}
.city-pill.active { background: #6d28d9 !important; color: #fff !important; border-color: #6d28d9; }
.franchise-grid { display: grid !important; grid-template-columns: 1fr; gap: 16px; }
.franchise-card { overflow: hidden; }
.fr-gallery {
    display: grid !important;
    grid-template-columns: 1.35fr 1fr 1fr !important;
    gap: 3px; height: 140px; position: relative; background: #1f1630;
}
.fr-gallery .fr-photo,
img.fr-photo {
    display: block !important; width: 100% !important; height: 140px !important;
    object-fit: cover !important; filter: none !important; border: 0;
}
.franchise-empty {
    background: #fff; border-radius: 16px; padding: 24px; text-align: center; color: #8b8496;
}
.invest-side { display: flex; flex-direction: column; gap: 12px; }
.invest-catalog { min-width: 0; }
.invest-top { display: flex; flex-direction: column; gap: 12px; margin-bottom: 16px; }
@media (min-width: 768px) {
    body.page-invest .page-content.invest-page {
        background: #f4ecfb;
        min-height: calc(100vh - 72px);
        padding: 24px 28px 40px !important;
        border-radius: 24px 0 0 0;
    }
    .invest-top { margin-bottom: 0; }
    .fr-gallery, .fr-gallery .fr-photo, img.fr-photo { height: 180px !important; }
    .invest-hero { margin-bottom: 0 !important; }
    .sim-box { margin-bottom: 0 !important; }
    .invest-side .invest-hero-content { grid-template-columns: 1fr !important; padding: 14px !important; }
    .invest-section-header h2 { color: #1f1630 !important; }
}



.header-wave { display: none; }

/* Mobile header + KPI cards polish */
@media (max-width: 767px) {
    .app-header,
    .app-header.is-glass {
        margin: 0 !important;
        padding: 10px 14px 0 !important;
        border-radius: 0 !important;
        background: linear-gradient(180deg, #5b21b6 0%, #6d28d9 42%, #7c3aed 100%) !important;
        border: 0 !important;
        box-shadow: none !important;
        backdrop-filter: none !important;
        overflow: visible !important;
    }
    .header-wave {
        display: block;
        height: 36px;
        margin: 4px -14px 0;
        line-height: 0;
    }
    .header-wave svg { display: block; width: 100%; height: 36px; }
    .header-wave .hw-back { fill: #c4b5fd; }
    .header-wave .hw-front { fill: #f4ecfb; }
    .header-top {
        min-height: 58px !important;
        height: 58px !important;
        gap: 8px !important;
        overflow: visible !important;
        align-items: center !important;
    }
    .header-menu-btn,
    .header-btn {
        width: 40px !important;
        height: 40px !important;
        border-radius: 50% !important;
        background: rgba(255,255,255,.16) !important;
        border: 1.5px solid rgba(255,255,255,.55) !important;
        box-shadow: none !important;
        color: #fff !important;
    }
    .header-brand {
        display: flex !important;
        align-items: center;
        justify-content: center;
    }
    .header-brand .brand-icon {
        background: transparent !important;
        box-shadow: none !important;
        width: auto !important;
        height: auto !important;
        border-radius: 0 !important;
        overflow: visible !important;
        border: 0 !important;
        display: flex; align-items: center; justify-content: center;
    }
    .header-brand .brand-icon img {
        height: 52px !important;
        max-height: 52px !important;
        width: auto !important;
        object-fit: contain !important;
        background: transparent !important;
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
    }
    .header-deposit {
        display: inline-flex !important;
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
        padding: 0 !important;
        border-radius: 50% !important;
        background: #fff !important;
        color: #6d28d9 !important;
        box-shadow: 0 8px 18px rgba(46,16,100,.2) !important;
        border: 0 !important;
        align-items: center !important;
        justify-content: center !important;
    }
    .header-deposit i {
        width: auto !important;
        height: auto !important;
        border-radius: 0 !important;
        background: transparent !important;
        font-size: 16px !important;
        display: inline !important;
        color: #6d28d9 !important;
    }
    .header-actions { gap: 8px !important; }

    .dash-hello { margin: 8px 0 14px; }
    .dash-hello h1 { font-size: 22px; font-weight: 800; letter-spacing: -.04em; color: #2e1064; }
    .dash-hello p { font-size: 13px; color: #7c7390; }

    .kpi-grid { gap: 10px !important; }
    .kpi-card {
        background: #fff !important;
        border: 1.5px solid #ddd6fe !important;
        border-radius: 16px !important;
        box-shadow: none !important;
        padding: 14px 14px 12px !important;
    }
    .kpi-card .k {
        font-size: 11px;
        letter-spacing: .04em;
        color: #6d28d9;
        opacity: 1;
    }
    .kpi-card .v {
        font-size: 20px;
        margin-top: 8px;
        color: #1e1233;
    }
    .kpi-card .d { font-size: 11px; margin-top: 6px; }
    .kpi-card.is-accent {
        background: linear-gradient(165deg, #8b5cf6 0%, #6d28d9 48%, #4c1d95 100%) !important;
        border: 1.5px solid #5b21b6 !important;
        color: #fff !important;
    }
    .kpi-card.is-accent .k,
    .kpi-card.is-accent .v,
    .kpi-card.is-accent .d { color: #fff !important; opacity: 1; }
    .kpi-card.is-accent .k { opacity: .88; }
    .kpi-link {
        display: inline-flex;
        margin-top: 8px;
        padding: 5px 10px;
        border-radius: 999px;
        background: #f3e8ff;
        color: #6d28d9 !important;
        font-size: 11px;
        font-weight: 800;
    }
}

/* Bonus page */
body.page-bonus .page-content.bonus-page {
    max-width: none !important;
    margin: 0 auto !important;
}
.bonus-shell { width: 100%; max-width: 640px; margin: 0 auto; padding-bottom: 24px; }
.bonus-head { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.bonus-back {
    width: 40px; height: 40px; border-radius: 12px;
    background: #fff; border: 1px solid #ece8f3; color: #2e1064;
    display: inline-flex; align-items: center; justify-content: center; text-decoration: none;
}
.bonus-kicker { margin: 0; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #8b8496; }
.bonus-head h1 { margin: 2px 0 0; font-size: 20px; font-weight: 800; color: #1f1630; letter-spacing: -.03em; }
.bonus-win {
    background: #ecfdf3; color: #166534; border: 1px solid #bbf7d0;
    border-radius: 14px; padding: 12px 14px; margin-bottom: 14px; font-size: 14px;
}
.bonus-hero {
    position: relative; overflow: hidden;
    background: linear-gradient(165deg, #4c1d95 0%, #2e1064 42%, #14062a 100%);
    color: #fff; border: 0; border-radius: 22px;
    padding: 20px 18px 16px; box-shadow: 0 18px 48px rgba(46,16,100,.35);
}
.bonus-hero::before {
    content: ''; position: absolute; inset: -40% -20% auto -20%; height: 70%;
    background: radial-gradient(circle, rgba(250,204,21,.28), transparent 62%);
    animation: jackpotGlow 4.2s ease-in-out infinite;
    pointer-events: none;
}
.bonus-hero::after {
    content: ''; position: absolute; top: 0; left: -40%; width: 40%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.16), transparent);
    animation: jackpotShine 3.4s ease-in-out infinite;
    pointer-events: none;
}
@keyframes jackpotGlow {
    0%,100% { opacity: .45; transform: translateY(0) scale(1); }
    50% { opacity: .85; transform: translateY(8px) scale(1.08); }
}
@keyframes jackpotShine {
    0% { left: -45%; }
    100% { left: 120%; }
}
.jackpot-live {
    display: inline-flex; align-items: center; gap: 6px;
    background: rgba(220,38,38,.92); color: #fff; font-size: 10px; font-weight: 800;
    letter-spacing: .12em; text-transform: uppercase; border-radius: 999px;
    padding: 4px 8px; margin-right: 8px; vertical-align: middle;
}
.jackpot-live i {
    width: 7px; height: 7px; border-radius: 50%; background: #fff;
    box-shadow: 0 0 0 0 rgba(255,255,255,.8);
    animation: livePulse 1.2s ease-out infinite; display: inline-block;
}
@keyframes livePulse {
    0% { box-shadow: 0 0 0 0 rgba(255,255,255,.7); }
    100% { box-shadow: 0 0 0 8px rgba(255,255,255,0); }
}
.jackpot-stage { position: relative; z-index: 1; padding-right: 78px; }
.float-clock {
    position: absolute; top: 14px; right: 14px; z-index: 4;
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    animation: clockFloat 3.2s ease-in-out infinite;
    pointer-events: none;
}
.float-clock small {
    font-size: 10px; font-weight: 800; letter-spacing: .06em;
    color: #fde68a; font-variant-numeric: tabular-nums;
}
.fc-face {
    width: 62px; height: 62px; border-radius: 50%;
    background: radial-gradient(circle at 32% 28%, #fff 0%, #fde68a 34%, #f59e0b 72%, #92400e);
    box-shadow: 0 10px 24px rgba(0,0,0,.35), inset 0 0 0 3px rgba(255,255,255,.35);
    position: relative;
}
.fc-hand {
    position: absolute; left: 50%; bottom: 50%;
    transform-origin: 50% 100%;
    border-radius: 6px; background: #1f1630;
}
.fc-h { width: 3px; height: 16px; margin-left: -1.5px; }
.fc-m { width: 2px; height: 21px; margin-left: -1px; }
.fc-s { width: 1.5px; height: 24px; margin-left: -0.75px; background: #dc2626; }
.fc-dot {
    position: absolute; left: 50%; top: 50%; width: 7px; height: 7px;
    margin: -3.5px 0 0 -3.5px; border-radius: 50%; background: #1f1630;
    box-shadow: 0 0 0 2px #fde68a;
}
@keyframes clockFloat {
    0%,100% { transform: translateY(0) rotate(-4deg); }
    50% { transform: translateY(-8px) rotate(4deg); }
}
.bonus-drop {
    display: flex; align-items: center; justify-content: space-between;
    gap: 10px; margin: 0 0 14px; padding: 10px 12px; position: relative; z-index: 1;
    background: rgba(255,255,255,.08); border: 1px solid rgba(253,230,138,.25);
    border-radius: 12px;
}
.bonus-drop span { font-size: 12px; color: #ddd6fe; }
.bonus-drop strong {
    font-size: 16px; letter-spacing: .06em; color: #fde68a;
    font-variant-numeric: tabular-nums;
}
.bonus-drop b { font-weight: 800; }
.bonus-hero-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; }
.bonus-chip {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 12px; font-weight: 650; color: #ede9fe;
    background: rgba(255,255,255,.12); border-radius: 999px; padding: 6px 10px;
}
.bonus-chip.is-ok { background: #dcfce7; color: #166534; }
.bonus-timer { display: flex; align-items: baseline; gap: 4px; font-variant-numeric: tabular-nums; }
.bonus-timer b {
    min-width: 28px; text-align: center; background: rgba(255,255,255,.12); border-radius: 8px;
    padding: 6px 4px; font-size: 13px; color: #fff;
}
.bonus-timer em { font-style: normal; font-size: 10px; color: #c4b5fd; margin-right: 4px; }
.bonus-label { margin: 0; font-size: 12px; color: #c4b5fd; font-weight: 600; }
.bonus-amount {
    display: block; font-size: 34px; font-weight: 800; letter-spacing: -.04em;
    color: #fff; margin: 8px 0 4px; position: relative; z-index: 1;
    text-shadow: 0 8px 24px rgba(0,0,0,.35);
    font-variant-numeric: tabular-nums;
}
.bonus-amount.is-hot { animation: jackpotPop .7s ease; color: #fde68a; }
.bonus-amount.is-tick { animation: jackpotNudge .42s ease; }
@keyframes jackpotPop {
    0% { transform: scale(.92); filter: brightness(1.4); }
    60% { transform: scale(1.06); }
    100% { transform: scale(1); }
}
@keyframes jackpotNudge {
    0%,100% { transform: translateY(0); }
    40% { transform: translateY(-3px); color: #fde68a; }
}
.bonus-sub { margin: 0 0 16px; font-size: 13px; color: #ddd6fe; }
.bonus-hero .bonus-stats div { background: rgba(255,255,255,.08); }
.bonus-hero .bonus-stats small { color: #c4b5fd; }
.bonus-hero .bonus-stats b { color: #fff; }
.bonus-stats {
    display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px;
    margin-bottom: 16px;
}
.bonus-stats div {
    background: #f7f4fb; border-radius: 12px; padding: 10px 8px; text-align: center;
}
.bonus-stats small { display: block; font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #8b8496; }
.bonus-stats b { display: block; margin-top: 4px; font-size: 14px; color: #2e1064; }
.bonus-claim {
    width: 100%; border: 0; border-radius: 12px; padding: 13px 16px;
    background: linear-gradient(135deg, #8B5CF6, #6D28D9 50%, #3B0764);
    color: #fff; font-weight: 800; font-size: 15px; cursor: pointer;
}
.bonus-claim:disabled { opacity: .45; cursor: not-allowed; }
.bonus-log { margin-top: 18px; background: #fff; border: 1px solid #ece8f3; border-radius: 20px; overflow: hidden; }
.bonus-log-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px 10px; }
.bonus-log-head h2 { margin: 0; font-size: 15px; color: #1f1630; }
.bonus-log-head span { font-size: 12px; color: #8b8496; }
.bonus-feed { list-style: none; margin: 0; padding: 8px 12px 14px; display: flex; flex-direction: column; gap: 8px; }
.bonus-feed li {
    display: flex; align-items: center; gap: 12px;
    padding: 12px; border: 0; border-radius: 14px; background: #f7f4fb;
}
.bonus-ico {
    width: 40px; height: 40px; border-radius: 12px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    background: #ede9fe; color: #6d28d9;
}
.bonus-feed li.is-mid .bonus-ico { background: #dbeafe; color: #1d4ed8; }
.bonus-feed li.is-hot .bonus-ico { background: #fef3c7; color: #b45309; }
.bonus-feed-copy { flex: 1; min-width: 0; }
.bonus-feed-copy strong { display: block; font-size: 13px; color: #1f1630; font-style: normal; }
.bonus-feed-copy span { font-size: 12px; color: #8b8496; }
.bonus-feed li em {
    font-style: normal; font-weight: 800; font-size: 14px; color: #15803d;
    background: #ecfdf3; border-radius: 999px; padding: 6px 10px; white-space: nowrap;
}
.bonus-feed li.is-hot em { background: #fffbeb; color: #b45309; }
.bonus-empty { text-align: center; padding: 28px 16px; color: #8b8496; }
.bonus-empty i { font-size: 22px; color: #7c3aed; margin-bottom: 8px; display: block; }
@media (min-width: 768px) {
    body.page-bonus .page-content.bonus-page {
        background: #f4ecfb; min-height: calc(100vh - 72px);
        padding: 28px 32px 40px !important; border-radius: 24px 0 0 0;
    }
    .bonus-amount { font-size: 40px; }
}


/* Invest mobile — catalog cards like reference */
@media (max-width: 767px) {
    body.page-invest .page-content.invest-page {
        background: #efe8f6 !important;
        padding: 12px 14px 28px !important;
    }
    body.page-invest .invest-side { display: none !important; }
    body.page-invest .invest-top { margin-bottom: 12px; gap: 0; }
    .invest-toolbar {
        border-radius: 24px !important;
        padding: 14px !important;
        border: 0 !important;
        box-shadow: 0 12px 32px rgba(76, 29, 149, 0.10) !important;
        gap: 12px !important;
    }
    .invest-search {
        background: #f3eef8 !important;
        border: 0 !important;
        border-radius: 999px !important;
        padding: 4px 4px 4px 14px !important;
    }
    .invest-search i { color: #6d28d9; font-size: 14px; }
    .invest-search input[type="search"] { height: 40px; font-size: 13px; }
    .invest-search button {
        background: #6d28d9 !important;
        border-radius: 999px !important;
        padding: 10px 16px !important;
        font-size: 13px !important;
    }
    .invest-toolbar .filter-row {
        background: #f3eef8 !important;
        border: 0 !important;
        border-radius: 999px !important;
        padding: 4px !important;
    }
    .invest-toolbar .filter-row a {
        border-radius: 999px !important;
        padding: 8px 14px !important;
    }
    .invest-toolbar .filter-row a.is-active {
        background: #fff !important;
        color: #4c1d95 !important;
        box-shadow: 0 2px 8px rgba(46,16,100,.08);
    }
    .city-pills { padding: 4px 2px 16px; gap: 8px; }
    .city-pill {
        border-radius: 999px !important;
        padding: 8px 16px !important;
        background: #fff !important;
        border: 1px solid #e9dff6 !important;
        color: #3b3348 !important;
        box-shadow: 0 4px 12px rgba(46,16,100,.05);
    }
    .city-pill.active {
        background: #6d28d9 !important;
        color: #fff !important;
        border-color: #6d28d9 !important;
    }
    .franchise-grid { gap: 16px !important; }
    .franchise-card.taxi-card {
        border-radius: 24px !important;
        border: 0 !important;
        box-shadow: 0 14px 36px rgba(46, 16, 100, 0.10) !important;
        padding: 0 0 16px !important;
        margin: 0 !important;
        overflow: hidden;
        background: #fff !important;
    }
    .fr-gallery {
        height: 168px !important;
        border-radius: 24px 24px 0 0;
        overflow: hidden;
        gap: 3px !important;
    }
    .fr-gallery .fr-photo,
    img.fr-photo { height: 168px !important; }
    .taxi-info { padding: 14px 16px 0 !important; }
    .taxi-title { font-size: 18px !important; font-weight: 800; color: #1a1228; letter-spacing: -.02em; }
    .badge-op {
        background: #f3e8ff !important;
        color: #6d28d9 !important;
        border-radius: 999px !important;
        padding: 4px 10px !important;
        font-size: 11px !important;
    }
    .taxi-profit { color: #6b6575 !important; font-size: 12px !important; }
    .fr-meta { color: #8b8496; font-size: 12px; gap: 10px; margin-top: 4px; }
    .fr-stats {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        gap: 8px;
        margin: 12px 0 0;
        padding: 12px 0 4px;
        border-top: 1px solid #f0ebf5;
    }
    .fr-stats b {
        display: block;
        color: #6d28d9;
        font-size: 13px;
        font-weight: 800;
        letter-spacing: -.02em;
    }
    .fr-stats small {
        display: block;
        margin-top: 3px;
        color: #8b8496;
        font-size: 10px;
        font-weight: 600;
        line-height: 1.2;
    }
    .taxi-foot {
        padding: 12px 16px 0 !important;
        margin-top: 8px !important;
        align-items: center;
    }
    .taxi-price { font-size: 22px !important; color: #1a1228; letter-spacing: -.03em; }
    .btn-alugar {
        border-radius: 999px !important;
        padding: 11px 20px !important;
        font-size: 14px !important;
        box-shadow: 0 8px 20px rgba(109, 40, 217, 0.32) !important;
        background: #6d28d9 !important;
    }
    .taxi-timer {
        top: 10px !important;
        right: 10px !important;
        border-radius: 999px !important;
        padding: 7px 12px !important;
        font-size: 11px !important;
    }
}


/* Meus investimentos dashboard */
.myinv {
    background: #fff;
    border-radius: 22px;
    padding: 16px 14px 14px;
    margin: 0 0 16px;
    box-shadow: 0 12px 32px rgba(46,16,100,.08);
    border: 1px solid #ece8f3;
}
.myinv-head {
    display: flex; align-items: center; gap: 10px;
    margin-bottom: 14px;
}
.myinv-ico {
    width: 40px; height: 40px; border-radius: 12px;
    background: var(--gold-gradient); color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
}
.myinv-head em {
    display: block; font-style: normal; font-size: 10px; font-weight: 800;
    letter-spacing: .14em; text-transform: uppercase; color: #8b8496;
}
.myinv-head strong { display: block; font-size: 16px; color: #1f1630; letter-spacing: -.02em; }
.myinv-kpis {
    display: grid; grid-template-columns: 1fr 1fr 1fr;
    background: #f7f4fb; border-radius: 16px; padding: 14px 8px;
    margin-bottom: 12px;
}
.myinv-kpis div { text-align: center; padding: 0 6px; }
.myinv-kpis div + div { border-left: 1px solid #e6dff0; }
.myinv-kpis b { display: block; font-size: 14px; color: #1f1630; letter-spacing: -.02em; }
.myinv-kpis small { display: block; margin-top: 4px; font-size: 10px; color: #8b7f70; font-weight: 600; }
.myinv-tabs {
    display: grid; grid-template-columns: 1fr 1fr;
    background: #efe8f6; border-radius: 999px; padding: 4px; gap: 4px;
    margin-bottom: 12px;
}
.myinv-tabs button {
    border: 0; background: transparent; border-radius: 999px;
    padding: 9px 12px; font-weight: 800; font-size: 13px; color: #6b6575; cursor: pointer;
    font-family: inherit;
}
.myinv-tabs button.is-on { background: #6d28d9; color: #fff; }
.myinv-empty {
    display: block; text-align: center; text-decoration: none;
    padding: 22px 12px 8px; color: inherit;
}
.myinv-empty p { margin: 0 0 8px; font-size: 13px; color: #8b8496; }
.myinv-empty strong {
    display: block; font-size: 15px; color: #4c1d95; line-height: 1.35; margin-bottom: 12px;
}
.myinv-empty span {
    display: inline-flex; background: #6d28d9; color: #fff; font-weight: 800;
    font-size: 13px; padding: 10px 18px; border-radius: 999px;
    box-shadow: 0 8px 18px rgba(109,40,217,.28);
}
.myinv-empty.is-static { padding: 18px 8px; }
.myinv-item {
    display: block; text-decoration: none; color: inherit;
    border: 1px solid #eee8f6; border-radius: 16px; padding: 12px 14px; margin-top: 10px;
    background: #faf8ff;
}
.myinv-item-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.myinv-item-top h3 { margin: 0; font-size: 14px; font-weight: 800; color: #1f1630; }
.myinv-item-top span {
    font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em;
    color: #6d28d9; background: #f3e8ff; padding: 4px 8px; border-radius: 999px;
}
.myinv-item.is-done .myinv-item-top span { color: #6b6575; background: #efe8f6; }
.myinv-bar { height: 6px; background: #efe8f6; border-radius: 99px; margin: 10px 0 8px; overflow: hidden; }
.myinv-bar i { display: block; height: 100%; background: #6d28d9; border-radius: 99px; }
.myinv-item-row { display: flex; justify-content: space-between; font-size: 12px; padding: 3px 0; }
.myinv-item-row span { color: #8b8496; }
.myinv-item-row b { color: #1f1630; }
.refer-share { display: grid; grid-template-columns: 1fr !important; }

/* Desktop header + KPI cards with wave bottoms */
@media (min-width: 768px) {
    .app-header,
    .app-header.is-glass,
    .app-header.is-compact {
        overflow: hidden !important;
        padding-bottom: 0 !important;
        border-radius: 22px !important;
    }
    .header-wave {
        display: block;
        height: 28px;
        margin: 6px -16px 0;
        line-height: 0;
    }
    .header-wave svg { display: block; width: 100%; height: 28px; }
    .header-wave .hw-back { fill: #ddd6fe; }
    .header-wave .hw-front { fill: #f4ecfb; }

    .kpi-grid { gap: 14px; }
    .kpi-card {
        position: relative;
        overflow: hidden;
        padding: 18px 18px 40px !important;
        border-radius: 22px !important;
        border: 1.5px solid #ddd6fe !important;
        background: #fff !important;
        box-shadow: 0 10px 28px rgba(76, 29, 149, 0.08) !important;
    }
    .kpi-card::before,
    .kpi-card::after {
        content: '';
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: 38px;
        pointer-events: none;
        background-repeat: no-repeat;
        background-position: bottom;
        background-size: 100% 38px;
    }
    .kpi-card::before {
        background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 48' preserveAspectRatio='none'><path fill='%23ddd6fe' d='M0,18 C55,40 110,8 165,24 C225,40 280,10 400,28 L400,48 L0,48 Z'/></svg>");
    }
    .kpi-card::after {
        background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 48' preserveAspectRatio='none'><path fill='%23f3e8ff' d='M0,28 C80,10 140,38 210,22 C270,8 330,34 400,18 L400,48 L0,48 Z'/></svg>");
    }
    .kpi-card.is-accent {
        background: linear-gradient(165deg, #8b5cf6 0%, #6d28d9 48%, #4c1d95 100%) !important;
        border-color: #5b21b6 !important;
        color: #fff !important;
    }
    .kpi-card.is-accent::before {
        background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 48' preserveAspectRatio='none'><path fill='%23a78bfa' fill-opacity='0.55' d='M0,18 C55,40 110,8 165,24 C225,40 280,10 400,28 L400,48 L0,48 Z'/></svg>");
    }
    .kpi-card.is-accent::after {
        background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 48' preserveAspectRatio='none'><path fill='%23c4b5fd' fill-opacity='0.45' d='M0,28 C80,10 140,38 210,22 C270,8 330,34 400,18 L400,48 L0,48 Z'/></svg>");
    }
    .kpi-card .k { color: #6d28d9; opacity: 1; }
    .kpi-card .v { font-size: 24px; margin-top: 8px; }
    .kpi-card.is-accent .k,
    .kpi-card.is-accent .v,
    .kpi-card.is-accent .d { color: #fff !important; }
    .kpi-link {
        display: inline-flex;
        margin-top: 8px;
        padding: 5px 12px;
        border-radius: 999px;
        background: #f3e8ff;
        color: #6d28d9 !important;
        font-size: 11px;
        font-weight: 800;
        position: relative;
        z-index: 1;
    }
}


/* Invest desktop = mobile cards, wider grid */
@media (min-width: 768px) {
    .invest-layout {
        display: grid;
        grid-template-columns: 280px minmax(0, 1fr);
        gap: 22px;
        align-items: start;
    }
    .invest-main { min-width: 0; }
    .franchise-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 18px !important; }
    .franchise-card.taxi-card {
        border-radius: 24px !important;
        border: 0 !important;
        box-shadow: 0 14px 36px rgba(46, 16, 100, 0.10) !important;
        padding: 0 0 16px !important;
        margin: 0 !important;
        overflow: hidden;
        background: #fff !important;
        height: 100%;
        display: flex;
        flex-direction: column;
    }
    .fr-gallery {
        height: 168px !important;
        border-radius: 24px 24px 0 0;
        overflow: hidden;
    }
    .fr-gallery .fr-photo, img.fr-photo { height: 168px !important; }
    .taxi-info { padding: 14px 16px 0 !important; flex: 1; }
    .taxi-title { font-size: 18px !important; }
    .badge-op {
        background: #f3e8ff !important;
        color: #6d28d9 !important;
        border-radius: 999px !important;
        padding: 4px 10px !important;
    }
    .fr-stats {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        gap: 8px;
        margin: 12px 0 0;
        padding: 12px 0 4px;
        border-top: 1px solid #f0ebf5;
    }
    .fr-stats b { display: block; color: #6d28d9; font-size: 13px; font-weight: 800; }
    .fr-stats small { display: block; margin-top: 3px; color: #8b8496; font-size: 10px; font-weight: 600; }
    .taxi-foot { padding: 12px 16px 0 !important; margin-top: auto !important; }
    .btn-alugar {
        border-radius: 999px !important;
        padding: 11px 20px !important;
        box-shadow: 0 8px 20px rgba(109, 40, 217, 0.28) !important;
        background: #6d28d9 !important;
    }
    .invest-toolbar {
        border-radius: 24px !important;
        border: 0 !important;
        box-shadow: 0 12px 32px rgba(76, 29, 149, 0.08) !important;
    }
    .invest-search { border-radius: 999px !important; background: #f3eef8 !important; border: 0 !important; }
    .invest-search button { border-radius: 999px !important; background: #6d28d9 !important; }
    .invest-toolbar .filter-row { border-radius: 999px !important; background: #f3eef8 !important; border: 0 !important; }
}
@media (min-width: 1280px) {
    .invest-layout { grid-template-columns: 300px minmax(0, 1fr); }
    .franchise-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}

.myinv-page { max-width: 920px; margin: 0 auto; }
.myinv-hero {
    display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
    background: linear-gradient(135deg, #5b21b6, #7c3aed);
    color: #fff; border-radius: 24px; padding: 22px 20px; margin-bottom: 16px;
}
.myinv-hero .myinv-ico { background: rgba(255,255,255,.18); }
.myinv-hero em { display: block; font-style: normal; font-size: 10px; letter-spacing: .16em; text-transform: uppercase; opacity: .8; font-weight: 800; }
.myinv-hero h1 { margin: 2px 0 4px; font-size: 24px; letter-spacing: -.03em; }
.myinv-hero p { margin: 0; font-size: 13px; opacity: .88; }
.myinv-go {
    margin-left: auto; background: #fff; color: #6d28d9; text-decoration: none;
    font-weight: 800; font-size: 13px; padding: 10px 16px; border-radius: 999px;
}
.myinv-grid { display: grid; gap: 12px; }
@media (min-width: 768px) {
    .myinv-grid { grid-template-columns: 1fr 1fr; }
    body.page-myinv .page-content { max-width: none; }
    .myinv-page { max-width: 980px; }
}