* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root{
    --bg: #f3f4f8;
    --bg-soft: #eef1f7;
    --card: #ffffff;
    --card-2: #f7f8fc;
    --text: #1d2433;
    --muted: #8f98ab;
    --line: rgba(28, 36, 51, 0.07);

    --blue: #3d7cff;
    --blue-soft: #eaf1ff;
    --cyan: #5da8ff;
    --green: #27c46a;
    --red: #f06778;
    --gold: #f5bf59;

    --purple: #7d7cff;
    --pink: #ff7cab;
    --orange: #ffb05c;
    --sky: #67c7ff;

    --shadow: 0 10px 30px rgba(20, 30, 55, 0.06);
    --radius-xl: 28px;
    --radius-lg: 22px;
    --radius-md: 18px;
    --radius-sm: 14px;
}

html, body {
    min-height: 100%;
}

body {
    font-family: Arial, Helvetica, sans-serif;
    background: var(--bg);
    color: var(--text);
}

.hidden {
    display: none !important;
}

/* =========================
   LOADERS / APP WRAPPER
   ========================= */
.screen-loader{
    position:fixed;
    inset:0;
    display:flex;
    justify-content:center;
    align-items:center;
    background:rgba(243,244,248,.96);
    backdrop-filter:blur(6px);
    z-index:99999;
}

.screen-loader-inner{
    display:flex;
    flex-direction:column;   /* pone texto arriba y gif abajo */
    align-items:center;
    justify-content:center;
}

.screen-loader-text{
    display:block;
    width:100%;
    text-align:center;
    margin-bottom:14px;     /* separación del gif */
    color:#155dfc;
    font-size:16px;
    font-weight:800;
}

.screen-loader-logo{
    width:120px;
    height:auto;
}
.page,
.app-shell{
    width:100%;
    max-width:520px;
    margin:0 auto;
    min-height:100vh;
    padding:18px 16px 110px;
}

.page-light{
    background:var(--bg);
}

/* =========================
   TOPBAR HOME
   ========================= */
.ft-topbar{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    margin-bottom:18px;
}

.ft-topbar-center{
    flex:1;
    text-align:center;
}

.ft-topbar-center h1{
    font-size:22px;
    line-height:1.1;
    font-weight:800;
    color:var(--text);
}

.icon-btn{
    width:42px;
    height:42px;
    border:none;
    border-radius:14px;
    background:transparent;
    color:#202633;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
}

.icon-btn svg{
    width:24px;
    height:24px;
    display:block;
}

/* =========================
   USER CARD
   ========================= */
.home-user-card{
    background:var(--card);
    border-radius:var(--radius-xl);
    padding:18px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
    box-shadow:var(--shadow);
    border:1px solid var(--line);
    margin-bottom:16px;
}

.home-user-left{
    display:flex;
    align-items:center;
    gap:14px;
    min-width:0;
}

.avatar-box{
    width:66px;
    height:66px;
    border-radius:20px;
    background:linear-gradient(180deg,#f0f3f8 0%, #dfe6f3 100%);
    color:#273249;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:24px;
    font-weight:800;
    flex-shrink:0;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.7);
}

.user-main-meta{
    min-width:0;
}

.user-main-meta h2{
    font-size:18px;
    line-height:1.15;
    font-weight:800;
    color:var(--text);
    margin-bottom:4px;
    word-break:break-word;
}

.user-main-meta p{
    color:#5279d8;
    font-size:14px;
    margin-bottom:6px;
}

.user-rank{
    color:#5279d8;
    font-size:14px;
    font-weight:700;
}

.home-user-right{
    display:flex;
    align-items:center;
}

.notification-pill{
    min-width:62px;
    height:62px;
    border:none;
    border-radius:20px;
    background:#f6f7fb;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-direction:column;
    gap:2px;
    color:#4f80df;
    cursor:pointer;
    box-shadow:inset 0 0 0 1px rgba(61,124,255,0.06);
}

.notification-pill svg{
    width:24px;
    height:24px;
}

.notification-pill span{
    font-size:14px;
    font-weight:700;
}

/* =========================
   PROMO BANNER
   ========================= */
.promo-banner{
    background:linear-gradient(90deg, #f6c98c 0%, #f4bb44 100%);
    border-radius:24px;
    padding:18px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
    margin-bottom:16px;
    box-shadow:0 10px 24px rgba(245,191,89,0.18);
    color:#3a2b14;
}

.promo-copy{
    display:flex;
    flex-direction:column;
    gap:2px;
}

.promo-mini{
    font-size:12px;
    opacity:.78;
    font-weight:700;
}

.promo-copy strong{
    font-size:34px;
    line-height:1;
    font-weight:800;
}

.promo-copy small{
    font-size:14px;
    color:rgba(58,43,20,.84);
}

.promo-arrow{
    width:54px;
    height:54px;
    border:none;
    border-radius:18px;
    background:#fff;
    color:#2c2f3a;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
    cursor:pointer;
    box-shadow:0 10px 25px rgba(255,255,255,.35);
}

.promo-arrow svg{
    width:24px;
    height:24px;
}

/* =========================
   BALANCE
   ========================= */
.balance-panel{
    background:var(--card);
    border-radius:var(--radius-xl);
    border:1px solid var(--line);
    box-shadow:var(--shadow);
    padding:20px;
    margin-bottom:16px;
}

.balance-head{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:12px;
    margin-bottom:18px;
}

.balance-head small{
    display:block;
    font-size:14px;
    color:#8f98ab;
    margin-bottom:6px;
}

.balance-head h3{
    font-size:56px;
    line-height:1;
    font-weight:800;
    color:#1f2430;
    letter-spacing:-1px;
}

.soft-badge{
    display:inline-flex;
    align-items:center;
    gap:6px;
    border-radius:999px;
    padding:8px 12px;
    background:#edf3ff;
    color:#4b7fe2;
    font-size:12px;
    font-weight:800;
    white-space:nowrap;
}

.balance-split-card{
    background:#f6f7fb;
    border-radius:22px;
    padding:16px;
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:12px;
}

.balance-split-item{
    min-height:84px;
    padding:8px 4px;
}

.balance-split-item strong{
    display:block;
    font-size:20px;
    line-height:1.1;
    color:#242a38;
    margin-bottom:8px;
    font-weight:800;
}

.balance-split-item span{
    color:#8f98ab;
    font-size:15px;
}

/* =========================
   QUICK ACTIONS
   ========================= */
.quick-grid{
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    gap:14px;
    margin-bottom:16px;
}

.quick-card{
    border:none;
    background:transparent;
    cursor:pointer;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:10px;
    text-align:center;
}

.quick-icon{
    width:72px;
    height:72px;
    border-radius:22px;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#fff;
    font-size:30px;
    box-shadow:0 10px 20px rgba(20,30,55,.08);
}

.quick-purple{ background:linear-gradient(180deg,#8f8fff 0%, #6f6df4 100%); }
.quick-pink{ background:linear-gradient(180deg,#ff92b6 0%, #ff6e98 100%); }
.quick-orange{ background:linear-gradient(180deg,#ffbd75 0%, #ff9f47 100%); }
.quick-blue{ background:linear-gradient(180deg,#88b3ff 0%, #5d90ff 100%); }
.quick-green{ background:linear-gradient(180deg,#7ae2a0 0%, #44cb79 100%); }
.quick-cyan{ background:linear-gradient(180deg,#8bdfff 0%, #58c2ff 100%); }
.quick-gold{ background:linear-gradient(180deg,#f8db8a 0%, #f2bf45 100%); }
.quick-sky{ background:linear-gradient(180deg,#7ddcff 0%, #4cbcff 100%); }

.quick-card strong{
    font-size:13px;
    line-height:1.15;
    font-weight:700;
    color:#232936;
}

/* =========================
   PANELS
   ========================= */
.panel-light{
    background:var(--card);
    border-radius:var(--radius-xl);
    border:1px solid var(--line);
    box-shadow:var(--shadow);
    padding:18px;
    margin-bottom:16px;
}

.panel-light-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    margin-bottom:14px;
}

.panel-light-head h3{
    font-size:20px;
    line-height:1.15;
    font-weight:800;
    color:var(--text);
}

.panel-mini-badge{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:34px;
    padding:8px 12px;
    border-radius:999px;
    background:#f1f3f8;
    color:#8f98ab;
    font-size:12px;
    font-weight:800;
    white-space:nowrap;
}

.panel-mini-badge.is-live{
    background:#eaf8ef;
    color:#1da957;
}

.mini-link{
    font-size:13px;
    font-weight:700;
    color:#5a83e8;
    text-decoration:none;
}

.summary-grid{
    display:grid;
    grid-template-columns:repeat(2, 1fr);
    gap:12px;
}

.summary-card{
    background:#f7f8fc;
    border-radius:20px;
    padding:16px;
    min-height:96px;
}

.summary-card span{
    display:block;
    color:#8f98ab;
    font-size:13px;
    margin-bottom:10px;
}

.summary-card strong{
    font-size:28px;
    font-weight:800;
    color:#232936;
}

/* =========================
   ACTIVITY
   ========================= */
.activity-list{
    display:flex;
    flex-direction:column;
    gap:12px;
}

.activity-item{
    display:flex;
    align-items:flex-start;
    gap:12px;
    padding:14px;
    background:#f7f8fc;
    border-radius:18px;
}

.activity-dot{
    width:12px;
    height:12px;
    border-radius:50%;
    margin-top:5px;
    flex-shrink:0;
}

.activity-dot.blue{ background:#5a83e8; }
.activity-dot.green{ background:#29c467; }
.activity-dot.gold{ background:#f3bf57; }
.activity-dot.red{ background:#ef7080; }

.activity-item strong{
    display:block;
    font-size:15px;
    font-weight:800;
    color:#232936;
    margin-bottom:4px;
}

.activity-item p{
    color:#8f98ab;
    font-size:13px;
    line-height:1.45;
}

/* =========================
   ACADEMY FEATURE
   ========================= */
.academy-feature-card{
    overflow:hidden;
    border-radius:22px;
    background:#f7f8fc;
    border:1px solid rgba(0,0,0,.03);
}

.academy-visual{
    height:150px;
    background:
        radial-gradient(circle at 30% 35%, rgba(255,210,91,.75), transparent 16%),
        radial-gradient(circle at 68% 28%, rgba(69,132,255,.45), transparent 20%),
        radial-gradient(circle at 50% 55%, rgba(58,200,127,.30), transparent 22%),
        linear-gradient(135deg, #0e2556 0%, #103f82 45%, #197d8e 100%);
}

.academy-copy{
    padding:16px;
}

.academy-tag{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border-radius:999px;
    background:#1f2430;
    color:#fff;
    padding:8px 12px;
    font-size:12px;
    font-weight:700;
    margin-bottom:12px;
}

.academy-copy h4{
    font-size:18px;
    line-height:1.25;
    font-weight:800;
    color:#00ff68;;
    margin-bottom:8px;
}

.academy-copy p{
    color:#8f98ab;
    font-size:14px;
    line-height:1.5;
}

/* =========================
   LOGOUT
   ========================= */
.logout-wrap{
    margin-top:4px;
    margin-bottom:16px;
}

.logout-light-btn{
    width:100%;
    height:56px;
    border:none;
    border-radius:20px;
    background:#fff;
    color:#202633;
    font-size:16px;
    font-weight:800;
    box-shadow:var(--shadow);
    border:1px solid var(--line);
    cursor:pointer;
}

/* =========================
   NAV LIGHT
   ========================= */
.bottom-nav{
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 50;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 8px;
    padding: 10px 10px calc(10px + env(safe-area-inset-bottom));
    background: rgba(255,255,255,0.96);
    backdrop-filter: blur(14px);
    border-top: 1px solid #e9edf5;
}

.bottom-item{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    min-height: 58px;
    color: #97a0af;
    text-decoration: none;
    font-weight: 700;
    font-size: 11px;
    transition: .2s ease;
}

.bottom-item .nav-icon{
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.bottom-item .nav-icon svg{
    width: 22px;
    height: 22px;
}

.bottom-item.active{
    color: #3867ff;
}

.bottom-item.active .nav-icon{
    width: 42px;
    height: 42px;
    border-radius: 14px;
    background: linear-gradient(180deg, #4f7bff 0%, #3867ff 100%);
    color: #fff;
    box-shadow: 0 10px 24px rgba(56, 103, 255, .24);
}

.bottom-item.active small{
    color: #1d2433;
}

/* =========================
   LEGACY / COMPAT
   ========================= */
.mobile-header,
.topbar,
.brand-side,
.topbar-actions,
.header-actions,
.user-meta,
.hero-card,
.hero-top,
.hero-label,
.hero-stats,
.mini-stat,
.cards-grid,
.metric-card,
.metric-label,
.panel,
.panel-head,
.signal-card,
.signal-top,
.signal-badge,
.signal-meta,
.symbols-grid,
.symbol-chip,
.trade-table-wrap,
.trade-table,
.account-card,
.card-head,
.actions,
.badge,
.field-grid,
.field,
.balance-grid,
.balance-item,
.auth-shell,
.auth-card,
.auth-logo,
.auth-tabs,
.auth-tab,
.auth-form,
.field-group,
.auth-submit,
.auth-message,
.plan-badge,
.welcome-line,
.btn,
.btn-primary,
.btn-dark,
.btn-danger,
.btn-outline,
.btn-success,
.btn-logout,
.link-action,
.loading-card,
.empty-box,
.toast-wrap,
.toast{
    transition:.18s ease;
}

/* base legacy clara */
.mobile-header,
.topbar{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    margin-bottom:18px;
}

.user-meta{
    display:flex;
    flex-direction:column;
    align-items:flex-end;
    gap:4px;
    text-align:right;
}

.user-meta strong{
    font-size:14px;
    color:var(--text);
}

.user-meta small{
    color:var(--muted);
    font-size:12px;
}

.header-actions{
    display:flex;
    align-items:center;
    gap:10px;
}

.btn-logout{
    border:none;
    border-radius:12px;
    padding:10px 12px;
    cursor:pointer;
    font-weight:700;
    color:#fff;
    background:#202633;
}

.welcome-line{
    color:var(--muted);
    margin-top:6px;
    font-size:14px;
}

.plan-badge{
    display:inline-flex;
    align-items:center;
    gap:6px;
    border-radius:999px;
    padding:6px 10px;
    background:#edf3ff;
    color:#5a83e8;
    font-size:12px;
    font-weight:700;
    margin-top:10px;
}

.hero-card,
.panel,
.metric-card,
.account-card{
    background:var(--card);
    border:1px solid var(--line);
    border-radius:22px;
    box-shadow:var(--shadow);
}

.hero-card,
.panel,
.account-card{
    padding:18px;
    margin-bottom:18px;
}

.metric-card{
    padding:16px;
}

.hero-top,
.panel-head,
.card-head{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:12px;
    margin-bottom:14px;
}

.hero-label,
.metric-label,
.field-group label,
.field label{
    color:var(--muted);
    font-size:12px;
}

.hero-stats,
.cards-grid,
.field-grid,
.balance-grid,
.symbols-grid,
.signal-meta{
    display:grid;
    gap:12px;
}

.hero-stats{
    grid-template-columns:repeat(3,1fr);
}

.cards-grid{
    grid-template-columns:repeat(2,1fr);
}

.mini-stat,
.symbol-chip,
.loading-card,
.empty-box{
    background:#f7f8fc;
    border-radius:16px;
    padding:14px 12px;
}

.metric-card h3{
    font-size:24px;
    margin-bottom:4px;
    color:var(--text);
}

.metric-card small{
    color:var(--muted);
}

.panel-head h3,
.card-head h3,
.card-head h4{
    font-size:18px;
    font-weight:800;
    color:var(--text);
}

.tag,
.badge-success{
    background:rgba(39,196,106,.12);
    color:#26a55a;
    font-size:12px;
    font-weight:700;
    padding:7px 10px;
    border-radius:999px;
}

.badge-danger{
    background:rgba(240,103,120,.12);
    color:#d85767;
    font-size:12px;
    font-weight:700;
    padding:7px 10px;
    border-radius:999px;
}

.badge-warning{
    background:rgba(245,191,89,.16);
    color:#bf8b14;
    font-size:12px;
    font-weight:700;
    padding:7px 10px;
    border-radius:999px;
}

.badge-info{
    background:#edf3ff;
    color:#5a83e8;
    font-size:12px;
    font-weight:700;
    padding:7px 10px;
    border-radius:999px;
}

.badge-gray{
    background:#eef2f7;
    color:#7b8498;
    font-size:12px;
    font-weight:700;
    padding:7px 10px;
    border-radius:999px;
}

.signal-card{
    border-radius:18px;
    padding:16px;
    border:1px solid var(--line);
    background:#f7f8fc;
}

.signal-card.buy{
    box-shadow:inset 0 0 0 1px rgba(39,196,106,0.08);
}

.signal-card.sell{
    box-shadow:inset 0 0 0 1px rgba(240,103,120,0.08);
}

.signal-top{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:12px;
    margin-bottom:12px;
}

.signal-top h4{
    font-size:18px;
    margin-bottom:4px;
}

.signal-top p{
    font-size:12px;
    color:var(--muted);
}

.signal-badge{
    min-width:64px;
    text-align:center;
    border-radius:999px;
    padding:8px 12px;
    font-weight:800;
    font-size:12px;
}

.signal-badge.buy{
    background:rgba(39,196,106,0.12);
    color:#239852;
}

.signal-badge.sell{
    background:rgba(240,103,120,0.12);
    color:#cf4f60;
}

.signal-meta{
    grid-template-columns:repeat(3,1fr);
}

.signal-meta span{
    display:block;
    color:var(--muted);
    font-size:11px;
    margin-bottom:4px;
}

.signal-meta strong{
    font-size:13px;
    color:var(--text);
}

.symbol-chip-top{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:6px;
}

.symbol-chip strong{
    font-size:15px;
}

.symbol-chip small{
    color:var(--muted);
    font-size:12px;
}

.dot-live,
.dot-off{
    width:10px;
    height:10px;
    border-radius:50%;
    display:inline-block;
}

.dot-live{
    background:var(--green);
    box-shadow:0 0 10px rgba(39,196,106,.35);
}

.dot-off{
    background:#97a2b5;
}

.trade-table-wrap{
    overflow-x:auto;
}

.trade-table{
    width:100%;
    border-collapse:collapse;
}

.trade-table th,
.trade-table td{
    text-align:left;
    padding:12px 8px;
    font-size:13px;
    border-bottom:1px solid rgba(31,36,48,0.06);
    white-space:nowrap;
    color:var(--text);
}

.trade-table th{
    color:var(--muted);
    font-size:12px;
}

.table-pill{
    display:inline-block;
    min-width:56px;
    text-align:center;
    padding:6px 9px;
    border-radius:999px;
    font-size:11px;
    font-weight:800;
}

.table-pill.buy{
    background:rgba(39,196,106,0.12);
    color:#239852;
}

.table-pill.sell{
    background:rgba(240,103,120,0.12);
    color:#cf4f60;
}

.link-action{
    color:#5a83e8;
    font-size:13px;
    text-decoration:none;
    font-weight:700;
}

.btn{
    border:0;
    border-radius:14px;
    padding:12px 14px;
    font-weight:800;
    cursor:pointer;
    color:#fff;
}

.btn-primary{
    background:linear-gradient(135deg, var(--blue), var(--cyan));
    box-shadow:0 10px 25px rgba(61,124,255,.22);
}

.btn-dark{
    background:#202633;
    color:#fff;
}

.btn-danger{
    background:#a73e4b;
    color:#fff;
}

.btn-outline{
    background:#fff;
    color:#394050;
    border:1px solid rgba(31,36,48,.1);
}

.btn-success{
    background:#27c46a;
    color:#fff;
}

.loading-card{
    color:var(--muted);
    text-align:center;
}

.empty-box{
    color:var(--muted);
    text-align:center;
    border:1px dashed rgba(31,36,48,.08);
}

.field-grid{
    grid-template-columns:repeat(2,1fr);
    margin-top:12px;
}

.field{
    display:flex;
    flex-direction:column;
    gap:8px;
}

.field.full{
    grid-column:1 / -1;
}

.field input,
.field select,
.field textarea,
.field-group input{
    width:100%;
    border:none;
    outline:none;
    border-radius:14px;
    padding:14px 15px;
    background:#f7f8fc;
    color:var(--text);
    border:1px solid rgba(31,36,48,.06);
}

.auth-shell{
    min-height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:24px;
    background:var(--bg);
}

.auth-card{
    width:100%;
    max-width:420px;
    background:#fff;
    border:1px solid var(--line);
    border-radius:22px;
    padding:24px;
    box-shadow:var(--shadow);
    color:var(--text);
}

.auth-logo{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:18px;
}

.auth-logo .badge{
    width:48px;
    height:48px;
    border-radius:14px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight:700;
    background:linear-gradient(135deg,#7fb1ff,#5fd1ff);
    color:#fff;
}

.auth-tabs{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
    margin:18px 0 20px;
}

.auth-tab{
    border:none;
    border-radius:14px;
    padding:12px 14px;
    cursor:pointer;
    font-weight:700;
    color:#7e8799;
    background:#f3f5fa;
}

.auth-tab.active{
    background:#202633;
    color:#fff;
}

.auth-form{
    display:flex;
    flex-direction:column;
    gap:14px;
}

.auth-submit{
    border:none;
    border-radius:14px;
    padding:14px 16px;
    font-weight:700;
    cursor:pointer;
    background:linear-gradient(135deg, var(--blue), var(--cyan));
    color:#fff;
}

.auth-message{
    margin-top:14px;
    border-radius:14px;
    padding:12px 14px;
    font-size:14px;
    display:none;
}

.auth-message.show{ display:block; }

.auth-message.error{
    background:rgba(240,103,120,.12);
    color:#d85767;
    border:1px solid rgba(240,103,120,.18);
}

.auth-message.success{
    background:rgba(39,196,106,.12);
    color:#239852;
    border:1px solid rgba(39,196,106,.18);
}

.balance-grid{
    grid-template-columns:repeat(3,1fr);
}

.balance-item strong{
    font-size:15px;
}

.balance-item small{
    color:var(--muted);
    font-size:12px;
    line-height:1.6;
}

.toast-wrap{
    position:fixed;
    right:16px;
    bottom:16px;
    z-index:9999;
    display:grid;
    gap:10px;
}

.toast{
    min-width:240px;
    max-width:360px;
    padding:14px 16px;
    border-radius:14px;
    color:var(--text);
    background:#fff;
    border:1px solid var(--line);
    box-shadow:var(--shadow);
}

.toast.success{ border-color:rgba(39,196,106,.28); }
.toast.error{ border-color:rgba(240,103,120,.28); }
.toast.info{ border-color:rgba(61,124,255,.28); }

/* =========================
   RESPONSIVE
   ========================= */
@media (max-width: 560px){
    .balance-head h3{
        font-size:48px;
    }

    .balance-split-card,
    .summary-grid{
        grid-template-columns:1fr;
    }

    .quick-grid{
        grid-template-columns:repeat(4, 1fr);
    }

    .bottom-nav{
        width:calc(100% - 20px);
        max-width:500px;
    }
}

@media (max-width: 430px){
    .page,
    .app-shell{
        padding-left:14px;
        padding-right:14px;
    }

    .quick-grid{
        gap:12px;
    }

    .quick-icon{
        width:64px;
        height:64px;
        border-radius:20px;
        font-size:26px;
    }

    .quick-card strong{
        font-size:12px;
    }

    .user-main-meta h2{
        font-size:17px;
    }

    .balance-head h3{
        font-size:44px;
    }
}

@media (max-width: 370px){
    .quick-grid{
        grid-template-columns:repeat(2, 1fr);
    }

    .home-user-card{
        align-items:flex-start;
    }

    .notification-pill{
        width:56px;
        min-width:56px;
        height:56px;
    }
}
/* =========================
   PROFILE LIGHT APP
   ========================= */
.profile-hero-card{
    margin-bottom:16px;
}

.class-panel{
    background:var(--card);
    border-radius:var(--radius-xl);
    border:1px solid var(--line);
    box-shadow:var(--shadow);
    padding:18px;
    margin-bottom:16px;
}

.class-panel-top{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    margin-bottom:16px;
}

.class-panel-top small{
    display:block;
    color:var(--muted);
    font-size:14px;
    margin-bottom:6px;
}

.class-panel-top h3{
    font-size:18px;
    font-weight:800;
    color:var(--text);
    line-height:1.2;
}

.class-badge{
    width:52px;
    height:52px;
    border-radius:16px;
    background:linear-gradient(180deg,#d7a96a 0%, #b87733 100%);
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:24px;
    font-weight:800;
    flex-shrink:0;
}

.class-progress-wrap{
    display:flex;
    align-items:center;
    gap:14px;
}

.class-medal-left,
.class-medal-right{
    width:56px;
    height:56px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#fff;
    font-size:24px;
    font-weight:800;
    flex-shrink:0;
}

.class-medal-left{
    background:linear-gradient(180deg,#d7a96a 0%, #b87733 100%);
}

.class-medal-right{
    background:linear-gradient(180deg,#c08e68 0%, #8e5735 100%);
}

.class-progress-center{
    flex:1;
    min-width:0;
}

.class-progress-bar{
    width:100%;
    height:8px;
    background:#edf1f7;
    border-radius:999px;
    overflow:hidden;
    margin-bottom:10px;
}

.class-progress-bar span{
    display:block;
    width:30%;
    height:100%;
    border-radius:999px;
    background:linear-gradient(90deg,#4f80df 0%, #2f7cff 100%);
}

.class-progress-center strong{
    font-size:18px;
    font-weight:800;
    color:#2b3140;
}

.profile-main-grid{
    display:grid;
    grid-template-columns:1.2fr .9fr;
    gap:14px;
    margin-bottom:16px;
}

.profile-balance-card,
.profile-mini-kpi{
    background:var(--card);
    border-radius:var(--radius-xl);
    border:1px solid var(--line);
    box-shadow:var(--shadow);
}

.profile-balance-card{
    padding:18px;
}

.profile-balance-head h3{
    font-size:54px;
    line-height:1;
    font-weight:800;
    color:#202633;
    margin-bottom:6px;
}

.profile-balance-head small{
    font-size:14px;
    color:var(--muted);
}

.profile-ring-wrap{
    display:flex;
    justify-content:center;
    align-items:center;
    padding:18px 0 16px;
}

.profile-ring{
    width:220px;
    height:220px;
    border-radius:50%;
    background:conic-gradient(#2f7cff 0deg 360deg);
    position:relative;
}

.profile-ring::after{
    content:"";
    position:absolute;
    inset:34px;
    border-radius:50%;
    background:#fff;
}

.profile-balance-legend{
    display:flex;
    flex-direction:column;
    gap:14px;
}

.legend-row{
    display:flex;
    align-items:flex-start;
    gap:10px;
}

.legend-dot{
    width:12px;
    height:12px;
    border-radius:50%;
    margin-top:6px;
    flex-shrink:0;
}

.legend-dot.green{ background:#39c97a; }
.legend-dot.gold{ background:#f3cf9e; }
.legend-dot.blue{ background:#2f7cff; }

.legend-row small{
    display:block;
    font-size:14px;
    color:var(--muted);
    margin-bottom:4px;
}

.legend-row strong{
    font-size:16px;
    font-weight:800;
    color:#232936;
}

.profile-side-stack{
    display:flex;
    flex-direction:column;
    gap:14px;
}

.profile-mini-kpi{
    padding:16px;
    min-height:226px;
}

.profile-mini-kpi-top{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    margin-bottom:12px;
}

.profile-mini-kpi-top small{
    color:var(--muted);
    font-size:14px;
}

.profile-mini-kpi-top strong{
    color:#4f80df;
    font-size:18px;
    font-weight:800;
}

.profile-mini-placeholder{
    width:100%;
    height:112px;
    border-radius:18px;
    background:#f5f6fa;
    margin-bottom:14px;
}

.profile-mini-kpi-bottom strong{
    display:block;
    font-size:18px;
    font-weight:800;
    color:#232936;
    margin-bottom:4px;
}

.profile-mini-kpi-bottom span{
    color:var(--muted);
    font-size:14px;
}

.profile-mini-image{
    width:100%;
    height:132px;
    border-radius:18px;
    background:
        radial-gradient(circle at 68% 25%, rgba(255,255,255,.95), transparent 18%),
        radial-gradient(circle at 40% 45%, rgba(194,199,209,.95), transparent 20%),
        linear-gradient(180deg,#f6f7fb 0%, #eceff5 100%);
    margin-bottom:14px;
}

.referral-highlight-card{
    background:#f7f8fc;
    border-radius:22px;
    padding:16px;
    margin-bottom:14px;
}

.referral-highlight-copy small{
    display:block;
    font-size:13px;
    color:var(--muted);
    margin-bottom:6px;
}

.referral-highlight-copy strong{
    display:block;
    font-size:22px;
    line-height:1.1;
    font-weight:800;
    color:#232936;
    margin-bottom:8px;
}

.referral-highlight-copy p{
    color:#7f899d;
    font-size:13px;
    line-height:1.45;
    word-break:break-word;
}

.referral-highlight-actions{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin-top:14px;
}

.small-action-btn{
    border:none;
    border-radius:14px;
    padding:11px 14px;
    background:#eaf1ff;
    color:#4f80df;
    font-size:13px;
    font-weight:800;
    cursor:pointer;
}

.small-action-btn.dark{
    background:#202633;
    color:#fff;
}

.referral-summary-grid{
    margin-top:0;
}

.referrals-list{
    display:flex;
    flex-direction:column;
    gap:12px;
}

.referral-user-item{
    display:flex;
    align-items:center;
    gap:12px;
    padding:14px;
    border-radius:18px;
    background:#f7f8fc;
}

.referral-user-avatar{
    width:44px;
    height:44px;
    border-radius:14px;
    background:#eaf1ff;
    color:#4f80df;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:18px;
    font-weight:800;
    flex-shrink:0;
}

.referral-user-copy{
    flex:1;
    min-width:0;
}

.referral-user-copy strong{
    display:block;
    font-size:15px;
    font-weight:800;
    color:#232936;
    margin-bottom:4px;
}

.referral-user-copy p{
    color:var(--muted);
    font-size:13px;
}

.referral-user-meta{
    display:flex;
    flex-direction:column;
    align-items:flex-end;
    gap:6px;
    flex-shrink:0;
}

.referral-user-meta strong{
    font-size:15px;
    font-weight:800;
    color:#232936;
}

.mini-status-badge{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:28px;
    padding:6px 10px;
    border-radius:999px;
    background:#edf3ff;
    color:#4f80df;
    font-size:11px;
    font-weight:800;
    white-space:nowrap;
}

.stats-list{
    display:flex;
    flex-direction:column;
    gap:12px;
}

.stats-row-card{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding:16px;
    border-radius:20px;
    background:#f7f8fc;
}

.stats-row-left{
    display:flex;
    align-items:center;
    gap:12px;
    min-width:0;
}

.stats-icon-box{
    width:44px;
    height:44px;
    border-radius:14px;
    background:#eef2f8;
    color:#4f80df;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:18px;
    font-weight:800;
    flex-shrink:0;
}

.stats-row-left small{
    color:#8f98ab;
    font-size:14px;
    line-height:1.35;
}

.stats-row-card strong{
    font-size:18px;
    font-weight:800;
    color:#232936;
    flex-shrink:0;
}

.account-list-light{
    display:flex;
    flex-direction:column;
    gap:12px;
}

.account-light-card{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding:16px;
    border-radius:20px;
    background:#f7f8fc;
}

.account-light-copy strong{
    display:block;
    font-size:15px;
    font-weight:800;
    color:#232936;
    margin-bottom:4px;
}

.account-light-copy p{
    color:#8f98ab;
    font-size:13px;
}

@media (max-width: 560px){
    .profile-main-grid{
        grid-template-columns:1fr;
    }

    .profile-ring{
        width:190px;
        height:190px;
    }

    .profile-ring::after{
        inset:30px;
    }

    .class-progress-wrap{
        align-items:flex-start;
    }

    .stats-row-card{
        align-items:flex-start;
        flex-direction:column;
    }

    .account-light-card{
        align-items:flex-start;
        flex-direction:column;
    }
}

@media (max-width: 430px){
    .profile-balance-head h3{
        font-size:48px;
    }

    .class-progress-center strong{
        font-size:16px;
    }

    .referral-highlight-actions{
        flex-direction:column;
    }

    .small-action-btn{
        width:100%;
    }
}
/* =========================
   REFERRALS PAGE
   ========================= */
#referralLinkText{
    display:block;
    line-height:1.45;
}

.referral-user-copy p{
    margin-top:2px;
}

#statAmount{
    color:#3a2b14;
}
/* =========================
   EXCHANGE LIGHT PAGE
   ========================= */
.exchange-hero-card{
    background:linear-gradient(135deg,#eff5ff 0%, #edf2fb 100%);
    border:1px solid rgba(31,36,48,.06);
    border-radius:28px;
    padding:20px;
    box-shadow:var(--shadow);
    margin-bottom:16px;
}

.exchange-hero-top{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:14px;
    margin-bottom:16px;
}

.exchange-hero-top small{
    display:block;
    color:var(--muted);
    font-size:13px;
    margin-bottom:6px;
}

.exchange-hero-top h2{
    font-size:24px;
    line-height:1.1;
    font-weight:800;
    color:#202633;
    margin-bottom:8px;
}

.exchange-hero-top p{
    color:#7d879a;
    font-size:14px;
    line-height:1.5;
    max-width:320px;
}

.exchange-hero-badge{
    width:56px;
    height:56px;
    border-radius:18px;
    background:#202633;
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:22px;
    font-weight:800;
    flex-shrink:0;
}

.exchange-hero-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:12px;
}

.exchange-hero-stat{
    background:#fff;
    border-radius:20px;
    padding:16px;
    min-height:88px;
    border:1px solid rgba(31,36,48,.05);
}

.exchange-hero-stat span{
    display:block;
    color:#8f98ab;
    font-size:13px;
    margin-bottom:10px;
}

.exchange-hero-stat strong{
    display:block;
    font-size:22px;
    line-height:1.1;
    font-weight:800;
    color:#232936;
}

.exchange-placeholder-card{
    background:#f7f8fc;
    border-radius:22px;
    padding:16px;
}

.exchange-placeholder-copy strong{
    display:block;
    font-size:18px;
    font-weight:800;
    color:#232936;
    margin-bottom:8px;
}

.exchange-placeholder-copy p{
    color:#7f899d;
    font-size:14px;
    line-height:1.5;
}

.exchange-placeholder-actions{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin-top:14px;
}

@media (max-width: 560px){
    .exchange-hero-grid{
        grid-template-columns:1fr;
    }

    .exchange-hero-top{
        flex-direction:column;
        align-items:flex-start;
    }

    .exchange-placeholder-actions{
        flex-direction:column;
    }

    .exchange-placeholder-actions .small-action-btn{
        width:100%;
    }
}
/* =========================
   ACADEMY / TRADERS PAGE
   ========================= */
.academy-hero-card{
    background:linear-gradient(135deg,#eff4ff 0%, #eef7f5 100%);
    border:1px solid rgba(31,36,48,.06);
    border-radius:28px;
    padding:20px;
    box-shadow:var(--shadow);
    margin-bottom:16px;
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:14px;
}

.academy-hero-copy small{
    display:block;
    color:var(--muted);
    font-size:13px;
    margin-bottom:6px;
}

.academy-hero-copy h2{
    font-size:26px;
    line-height:1.1;
    font-weight:800;
    color:#202633;
    margin-bottom:8px;
}

.academy-hero-copy p{
    color:#7d879a;
    font-size:14px;
    line-height:1.5;
    max-width:360px;
}

.academy-hero-badge{
    width:58px;
    height:58px;
    border-radius:18px;
    background:#202633;
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:20px;
    font-weight:800;
    flex-shrink:0;
}

.academy-search-wrap{
    margin-bottom:14px;
}

.academy-search-box{
    display:flex;
    align-items:center;
    gap:10px;
    background:#fff;
    border:1px solid rgba(31,36,48,.06);
    border-radius:20px;
    padding:14px 16px;
    box-shadow:var(--shadow);
}

.academy-search-box svg{
    width:20px;
    height:20px;
    color:#8f98ab;
    flex-shrink:0;
}

.academy-search-box input{
    width:100%;
    border:none;
    outline:none;
    background:transparent;
    color:#232936;
    font-size:14px;
}

.academy-search-box input::placeholder{
    color:#99a3b6;
}

.academy-filter-row{
    display:flex;
    gap:10px;
    overflow:auto;
    padding-bottom:2px;
    margin-bottom:16px;
}

.academy-chip{
    border:none;
    border-radius:999px;
    padding:11px 14px;
    background:#edf1f7;
    color:#667086;
    font-size:13px;
    font-weight:800;
    white-space:nowrap;
    cursor:pointer;
}

.academy-chip.active{
    background:#202633;
    color:#fff;
}

.academy-feature-card-tall{
    min-height:280px;
}

.academy-visual-alt{
    background:
        radial-gradient(circle at 24% 30%, rgba(255,220,122,.8), transparent 16%),
        radial-gradient(circle at 74% 28%, rgba(79,128,223,.42), transparent 20%),
        radial-gradient(circle at 50% 62%, rgba(55,201,122,.28), transparent 22%),
        linear-gradient(135deg,#132e63 0%, #1d4b92 40%, #1f7d84 100%);
}

.academy-cards-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:14px;
}

.academy-module-card{
    background:#f7f8fc;
    border-radius:22px;
    padding:16px;
    border:1px solid rgba(31,36,48,.04);
}

.academy-module-top{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    margin-bottom:12px;
}

.academy-mini-tag{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border-radius:999px;
    background:#edf3ff;
    color:#4f80df;
    padding:7px 10px;
    font-size:11px;
    font-weight:800;
}

.academy-module-top small{
    color:#8f98ab;
    font-size:12px;
    font-weight:700;
}

.academy-module-card h4{
    font-size:18px;
    line-height:1.2;
    font-weight:800;
    color:#232936;
    margin-bottom:8px;
}

.academy-module-card p{
    color:#7f899d;
    font-size:14px;
    line-height:1.5;
    margin-bottom:14px;
}

@media (max-width: 560px){
    .academy-hero-card{
        flex-direction:column;
        align-items:flex-start;
    }

    .academy-cards-grid{
        grid-template-columns:1fr;
    }
}
/* =========================
   SIGNALS / TORNEO PAGE
   ========================= */
.signals-hero-card{
    background:linear-gradient(135deg,#eff4ff 0%, #eef1fb 100%);
    border:1px solid rgba(31,36,48,.06);
    border-radius:28px;
    padding:20px;
    box-shadow:var(--shadow);
    margin-bottom:16px;
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:14px;
}

.signals-hero-copy small{
    display:block;
    color:var(--muted);
    font-size:13px;
    margin-bottom:6px;
}

.signals-hero-copy h2{
    font-size:26px;
    line-height:1.1;
    font-weight:800;
    color:#202633;
    margin-bottom:8px;
}

.signals-hero-copy p{
    color:#7d879a;
    font-size:14px;
    line-height:1.5;
    max-width:350px;
}

.signals-hero-badge{
    width:58px;
    height:58px;
    border-radius:18px;
    background:#202633;
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:22px;
    font-weight:800;
    flex-shrink:0;
}

.signals-filter-row{
    display:flex;
    gap:10px;
    overflow:auto;
    padding-bottom:2px;
    margin-bottom:16px;
}

.signals-list-light{
    display:flex;
    flex-direction:column;
    gap:14px;
}

.signal-light-card{
    border-radius:22px;
    padding:16px;
    background:#f7f8fc;
    border:1px solid rgba(31,36,48,.04);
}

.signal-light-card.buy{
    box-shadow:inset 0 0 0 1px rgba(39,196,106,0.08);
}

.signal-light-card.sell{
    box-shadow:inset 0 0 0 1px rgba(240,103,120,0.08);
}

.signal-light-top{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:12px;
    margin-bottom:14px;
}

.signal-light-top h4{
    font-size:19px;
    line-height:1.15;
    font-weight:800;
    color:#232936;
    margin-bottom:4px;
}

.signal-light-top p{
    color:#8f98ab;
    font-size:13px;
}

.signal-light-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:12px;
}

.signal-light-meta{
    background:#fff;
    border-radius:18px;
    padding:14px;
}

.signal-light-meta span{
    display:block;
    color:#8f98ab;
    font-size:12px;
    margin-bottom:6px;
}

.signal-light-meta strong{
    display:block;
    font-size:16px;
    font-weight:800;
    color:#232936;
}

@media (max-width: 560px){
    .signals-hero-card{
        flex-direction:column;
        align-items:flex-start;
    }

    .signal-light-grid{
        grid-template-columns:1fr;
    }
}
/* =========================
   WELCOME / SETTINGS PAGE
   ========================= */
.settings-hero-card{
    background:linear-gradient(135deg,#eef4ff 0%, #f2f6fb 100%);
    border:1px solid rgba(31,36,48,.06);
    border-radius:28px;
    padding:20px;
    box-shadow:var(--shadow);
    margin-bottom:16px;
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:14px;
}

.settings-hero-copy small{
    display:block;
    color:var(--muted);
    font-size:13px;
    margin-bottom:6px;
}

.settings-hero-copy h2{
    font-size:24px;
    line-height:1.1;
    font-weight:800;
    color:#202633;
    margin-bottom:8px;
}

.settings-hero-copy p{
    color:#7d879a;
    font-size:14px;
    line-height:1.5;
    max-width:340px;
    word-break:break-word;
}

.settings-hero-badge{
    min-width:64px;
    height:56px;
    border-radius:18px;
    background:#202633;
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:16px;
    font-weight:800;
    padding:0 14px;
    flex-shrink:0;
}

.settings-list{
    display:flex;
    flex-direction:column;
    gap:12px;
}

.settings-item{
    width:100%;
    border:none;
    background:#f7f8fc;
    border-radius:22px;
    padding:16px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    cursor:pointer;
    text-align:left;
}

.settings-item-left{
    display:flex;
    align-items:center;
    gap:12px;
    min-width:0;
}

.settings-icon-box{
    width:44px;
    height:44px;
    border-radius:14px;
    background:#eef2f8;
    color:#4f80df;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:18px;
    font-weight:800;
    flex-shrink:0;
}

.settings-item-left strong{
    display:block;
    font-size:15px;
    font-weight:800;
    color:#232936;
    margin-bottom:4px;
}

.settings-item-left p{
    color:#8f98ab;
    font-size:13px;
    line-height:1.4;
}

.settings-arrow{
    color:#9ba5b7;
    font-size:24px;
    line-height:1;
    flex-shrink:0;
}

.summary-card-button{
    border:none;
    text-align:left;
    cursor:pointer;
}

.danger-panel .settings-item.danger{
    background:#fff5f6;
}

.danger-box{
    background:#ffe8eb;
    color:#d14a5d;
}

@media (max-width: 560px){
    .settings-hero-card{
        flex-direction:column;
        align-items:flex-start;
    }
}
/* =========================
   BOT PAGE
   ========================= */
.bot-hero-card{
    background:linear-gradient(135deg,#eef4ff 0%, #edf7f1 100%);
    border:1px solid rgba(31,36,48,.06);
    border-radius:28px;
    padding:20px;
    box-shadow:var(--shadow);
    margin-bottom:16px;
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:14px;
}

.bot-hero-copy small{
    display:block;
    color:var(--muted);
    font-size:13px;
    margin-bottom:6px;
}

.bot-hero-copy h2{
    font-size:25px;
    line-height:1.1;
    font-weight:800;
    color:#202633;
    margin-bottom:8px;
}

.bot-hero-copy p{
    color:#7d879a;
    font-size:14px;
    line-height:1.5;
    max-width:360px;
}

.bot-hero-badge{
    width:58px;
    height:58px;
    border-radius:18px;
    background:#202633;
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:18px;
    font-weight:800;
    flex-shrink:0;
}

.bot-actions-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:12px;
}

.bot-visual-card{
    background:#f7f8fc;
    border-radius:24px;
    padding:18px;
    display:flex;
    align-items:center;
    gap:18px;
}

.bot-orbit{
    width:120px;
    height:120px;
    border-radius:50%;
    background:
        radial-gradient(circle at center, rgba(79,128,223,.16) 0%, rgba(79,128,223,.08) 34%, transparent 35%),
        radial-gradient(circle at center, transparent 0%, transparent 48%, rgba(79,128,223,.22) 49%, transparent 52%),
        radial-gradient(circle at center, transparent 0%, transparent 68%, rgba(39,196,106,.18) 69%, transparent 72%),
        linear-gradient(180deg,#f4f7fc 0%, #edf2f8 100%);
    display:flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
}

.bot-core{
    width:54px;
    height:54px;
    border-radius:16px;
    background:#202633;
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:16px;
    font-weight:800;
    box-shadow:0 10px 20px rgba(32,38,51,.14);
}

.bot-visual-copy strong{
    display:block;
    font-size:18px;
    font-weight:800;
    color:#232936;
    margin-bottom:8px;
}

.bot-visual-copy p{
    color:#7f899d;
    font-size:14px;
    line-height:1.5;
}

@media (max-width: 560px){
    .bot-hero-card{
        flex-direction:column;
        align-items:flex-start;
    }

    .bot-actions-grid{
        grid-template-columns:1fr;
    }

    .bot-visual-card{
        flex-direction:column;
        align-items:flex-start;
    }
}
/* =========================
   HOME IA DASHBOARD
   ========================= */
.ai-hero-card{
    background:linear-gradient(135deg,#eef4ff 0%, #edf7f1 100%);
    border:1px solid rgba(31,36,48,.06);
    border-radius:28px;
    padding:20px;
    box-shadow:var(--shadow);
    margin-bottom:16px;
}

.ai-hero-top{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:14px;
    margin-bottom:16px;
}

.ai-hero-top small{
    display:block;
    color:var(--muted);
    font-size:13px;
    margin-bottom:6px;
}

.ai-hero-top h2{
    font-size:25px;
    line-height:1.1;
    font-weight:800;
    color:#202633;
    margin-bottom:8px;
}

.ai-hero-top p{
    color:#7d879a;
    font-size:14px;
    line-height:1.5;
    max-width:360px;
}

.ai-hero-badge{
    min-width:98px;
    height:56px;
    border-radius:18px;
    background:#202633;
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:12px;
    font-weight:800;
    padding:0 14px;
    flex-shrink:0;
    text-align:center;
}

.ai-hero-badge.is-live{
    background:#eaf8ef;
    color:#1da957;
    border:1px solid rgba(39,196,106,.16);
}

.ai-hero-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:12px;
    margin-bottom:14px;
}

.ai-hero-stat{
    background:#fff;
    border-radius:20px;
    padding:16px;
    min-height:88px;
    border:1px solid rgba(31,36,48,.05);
}

.ai-hero-stat span{
    display:block;
    color:#8f98ab;
    font-size:13px;
    margin-bottom:10px;
}

.ai-hero-stat strong{
    display:block;
    font-size:22px;
    line-height:1.1;
    font-weight:800;
    color:#232936;
}

.ai-hero-actions{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
}

.dual-balance-grid{
    display:grid;
    grid-template-columns:1fr;
    gap:14px;
}

.balance-box{
    border-radius:24px;
    padding:18px;
    border:1px solid rgba(31,36,48,.05);
}

.balance-box.real{
    background:linear-gradient(135deg,#f8fbff 0%, #eef4ff 100%);
}

.balance-box.demo{
    background:linear-gradient(135deg,#fbfcff 0%, #f5f7fc 100%);
}

.balance-box-top{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    margin-bottom:10px;
}

.balance-box-top small{
    color:#8f98ab;
    font-size:14px;
}

.balance-box > strong{
    display:block;
    font-size:34px;
    line-height:1;
    font-weight:800;
    color:#202633;
    margin-bottom:14px;
}

.mini-balance-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:12px;
}

.mini-balance-grid div{
    background:#fff;
    border-radius:18px;
    padding:14px;
    border:1px solid rgba(31,36,48,.04);
}

.mini-balance-grid span{
    display:block;
    color:#8f98ab;
    font-size:12px;
    margin-bottom:8px;
}

.mini-balance-grid strong{
    display:block;
    color:#232936;
    font-size:16px;
    font-weight:800;
}

.trading-quick-grid{
    margin-bottom:16px;
}

.trade-live-list{
    display:flex;
    flex-direction:column;
    gap:14px;
}

.trade-live-card{
    border-radius:22px;
    padding:16px;
    background:#f7f8fc;
    border:1px solid rgba(31,36,48,.04);
}

.trade-live-top{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:12px;
    margin-bottom:14px;
}

.trade-live-top strong{
    display:block;
    font-size:18px;
    line-height:1.15;
    font-weight:800;
    color:#232936;
    margin-bottom:4px;
}

.trade-live-top p{
    color:#8f98ab;
    font-size:13px;
}

.trade-live-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:12px;
}

.trade-live-meta{
    background:#fff;
    border-radius:18px;
    padding:14px;
}

.trade-live-meta span{
    display:block;
    color:#8f98ab;
    font-size:12px;
    margin-bottom:6px;
}

.trade-live-meta strong{
    display:block;
    font-size:16px;
    font-weight:800;
    color:#232936;
}

.referral-dashboard-card{
    margin-bottom:14px;
}

@media (max-width: 560px){
    .ai-hero-top{
        flex-direction:column;
        align-items:flex-start;
    }

    .ai-hero-grid,
    .trade-live-grid,
    .mini-balance-grid{
        grid-template-columns:1fr;
    }

    .ai-hero-actions{
        flex-direction:column;
    }

    .ai-hero-actions .small-action-btn{
        width:100%;
    }
}
/* =========================
   COIN DETAIL PAGE
   ========================= */

.page-wrap{
    width:100%;
    max-width:520px;
    margin:0 auto;
    min-height:100vh;
    padding:18px 16px 110px;
}

.coin-topbar{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    margin-bottom:14px;
}

.icon-shell{
    width:44px;
    height:44px;
    border-radius:16px;
    background:rgba(255,255,255,.96);
    border:1px solid var(--line);
    display:flex;
    align-items:center;
    justify-content:center;
    box-shadow:var(--shadow);
    color:#1e293b;
    flex-shrink:0;
    text-decoration:none;
}

.icon-shell svg{
    width:20px;
    height:20px;
    display:block;
}

.coin-title-wrap{
    flex:1;
    min-width:0;
}

.coin-title-wrap h1{
    margin:0;
    font-size:22px;
    line-height:1.1;
    font-weight:800;
    color:var(--text);
}

.coin-title-wrap p{
    margin:4px 0 0;
    color:var(--muted);
    font-size:12px;
    font-weight:700;
    display:flex;
    align-items:center;
    gap:8px;
}

.live-dot{
    width:8px;
    height:8px;
    border-radius:999px;
    background:var(--green);
    display:inline-block;
    box-shadow:0 0 0 4px rgba(39,196,106,.12);
}

.action-row{
    display:flex;
    gap:10px;
}

.price-hero{
    background:linear-gradient(135deg,#eef4ff 0%, #edf7f1 100%);
    border:1px solid rgba(31,36,48,.06);
    border-radius:28px;
    padding:20px;
    box-shadow:var(--shadow);
    margin-bottom:16px;
}

.price-top{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:12px;
    margin-bottom:14px;
}

.coin-chip{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:8px 12px;
    border-radius:999px;
    background:#edf3ff;
    color:#4f80df;
    font-size:12px;
    font-weight:800;
    white-space:nowrap;
    margin-bottom:10px;
}

.price-value{
    font-size:34px;
    line-height:1;
    font-weight:800;
    color:#202633;
    margin:0 0 8px;
    letter-spacing:-.02em;
}

.price-change{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:28px;
    padding:6px 10px;
    border-radius:999px;
    font-size:11px;
    font-weight:800;
    white-space:nowrap;
}

.price-change.up{
    background:rgba(39,196,106,.12);
    color:#239852;
}

.price-change.down{
    background:rgba(240,103,120,.12);
    color:#cf4f60;
}

.metrics-grid{
    display:grid;
    grid-template-columns:repeat(2, 1fr);
    gap:12px;
}

.metric-mini{
    background:#fff;
    border-radius:20px;
    padding:16px;
    min-height:88px;
    border:1px solid rgba(31,36,48,.05);
}

.metric-mini span{
    display:block;
    color:#8f98ab;
    font-size:12px;
    margin-bottom:8px;
}

.metric-mini strong{
    display:block;
    font-size:16px;
    line-height:1.15;
    font-weight:800;
    color:#232936;
}

.chart-card,
.tabs-card,
.panel-card,
.config-card{
    background:var(--card);
    border-radius:var(--radius-xl);
    border:1px solid var(--line);
    box-shadow:var(--shadow);
    margin-bottom:16px;
}

.chart-head{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:12px;
    padding:18px 18px 12px;
}

.chart-head h3,
.panel-head h3{
    margin:0;
    font-size:18px;
    font-weight:800;
    color:var(--text);
}

.chart-head p,
.panel-head p{
    margin:4px 0 0;
    font-size:12px;
    color:var(--muted);
    font-weight:600;
}

.timeframe-row{
    display:flex;
    gap:8px;
    flex-wrap:wrap;
    padding:0 18px 12px;
}

.tf-btn{
    border:none;
    border-radius:14px;
    padding:10px 12px;
    cursor:pointer;
    font-weight:700;
    color:#7e8799;
    background:#f3f5fa;
}

.tf-btn.active{
    background:#202633;
    color:#fff;
}

.chart-wrap{
    padding:0 12px 12px;
}

#coinChart{
    width:100%;
    height:240px;
    display:block;
    background:#f7f8fc;
    border-radius:20px;
    border:1px solid rgba(31,36,48,.04);
}

.chart-foot{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:12px;
    padding:0 18px 18px;
}

.chart-foot .metric-mini{
    min-height:auto;
    padding:14px;
    background:#f7f8fc;
}

.coin-advisors-section{
    background:var(--card);
    border-radius:var(--radius-xl);
    border:1px solid var(--line);
    box-shadow:var(--shadow);
    padding:18px;
    margin-bottom:16px;
}

.section-head{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:12px;
    margin-bottom:14px;
}

.section-kicker{
    display:block;
    color:var(--muted);
    font-size:12px;
    margin-bottom:4px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.04em;
}

.section-head h3{
    margin:0;
    font-size:20px;
    line-height:1.15;
    font-weight:800;
    color:var(--text);
}

.section-badge{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:34px;
    padding:8px 12px;
    border-radius:999px;
    background:#f1f3f8;
    color:#8f98ab;
    font-size:12px;
    font-weight:800;
    white-space:nowrap;
}

.advisors-grid{
    display:grid;
    gap:12px;
}

.advisor-card{
    position:relative;
    overflow:hidden;
    border-radius:20px;
    padding:16px;
    background:#f7f8fc;
    border:1px solid rgba(31,36,48,.04);
}

.advisor-card::before{
    content:"";
    position:absolute;
    left:0;
    top:0;
    bottom:0;
    width:4px;
    background:var(--bot-color,#4f80df);
}

.advisor-card.nexa{ --bot-color:#3867FF; }
.advisor-card.penny{ --bot-color:#7A3CFF; }
.advisor-card.orbit{ --bot-color:#10CFC9; }
.advisor-card.sentry{ --bot-color:#F5A623; }
.advisor-card.kael{ --bot-color:#18C67A; }

.advisor-top{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:10px;
    margin-bottom:10px;
}

.advisor-ident{
    display:flex;
    align-items:center;
    gap:12px;
    min-width:0;
}

.advisor-icon{
    width:46px;
    height:46px;
    border-radius:16px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#fff;
    color:var(--bot-color,#4f80df);
    flex-shrink:0;
    border:1px solid rgba(31,36,48,.05);
}

.advisor-icon svg{
    width:22px;
    height:22px;
}

.advisor-ident strong{
    display:block;
    font-size:15px;
    line-height:1.1;
    font-weight:800;
    color:#232936;
    margin-bottom:3px;
}

.advisor-ident small{
    display:block;
    color:var(--muted);
    font-size:12px;
    line-height:1.3;
}

.advisor-status{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:28px;
    padding:6px 10px;
    border-radius:999px;
    font-size:11px;
    font-weight:800;
    white-space:nowrap;
    flex-shrink:0;
}

.advisor-status.positive{
    background:rgba(39,196,106,.12);
    color:#239852;
}

.advisor-status.neutral{
    background:rgba(245,191,89,.16);
    color:#bf8b14;
}

.advisor-status.warning{
    background:rgba(240,103,120,.12);
    color:#cf4f60;
}

.advisor-message{
    margin:0 0 12px;
    color:#7f899d;
    font-size:13px;
    line-height:1.5;
}

.advisor-footer{
    display:grid;
    grid-template-columns:auto 1fr auto;
    gap:10px;
    align-items:center;
}

.confidence-label{
    color:var(--muted);
    font-size:12px;
    font-weight:700;
}

.confidence-track{
    width:100%;
    height:8px;
    border-radius:999px;
    background:#e7edf7;
    overflow:hidden;
}

.confidence-fill{
    height:100%;
    border-radius:999px;
    background:linear-gradient(90deg,var(--bot-color,#4f80df), #9cb7ff);
}

.confidence-value{
    font-size:13px;
    font-weight:800;
    color:#232936;
}

.tabs-head{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:10px;
    padding:14px;
}

.tab-btn{
    border:none;
    border-radius:14px;
    padding:12px 10px;
    cursor:pointer;
    font-weight:700;
    color:#7e8799;
    background:#f3f5fa;
}

.tab-btn.active{
    background:#202633;
    color:#fff;
}

.tab-panel{
    display:none;
    padding:0 14px 14px;
}

.tab-panel.active{
    display:block;
}

.panel-head{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:12px;
    padding:4px 2px 12px;
}

.panel-note{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:30px;
    padding:6px 10px;
    border-radius:999px;
    background:#edf3ff;
    color:#5a83e8;
    font-size:11px;
    font-weight:800;
    white-space:nowrap;
}

.stats-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:12px;
}

.list-card{
    background:#f7f8fc;
    border-radius:20px;
    padding:16px;
    border:1px solid rgba(31,36,48,.04);
}

.list-row{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:12px;
    padding:12px 0;
    border-bottom:1px solid rgba(31,36,48,.06);
}

.list-row:first-child{
    padding-top:0;
}

.list-row:last-child{
    padding-bottom:0;
    border-bottom:none;
}

.list-row strong{
    display:block;
    font-size:15px;
    font-weight:800;
    color:#232936;
}

.list-row p{
    color:#8f98ab;
    font-size:13px;
    line-height:1.45;
    margin-top:4px;
}

.pill{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:28px;
    padding:6px 10px;
    border-radius:999px;
    font-size:11px;
    font-weight:800;
    white-space:nowrap;
}

.pill.buy{
    background:rgba(39,196,106,.12);
    color:#239852;
}

.pill.sell{
    background:rgba(240,103,120,.12);
    color:#cf4f60;
}

.pill.wait{
    background:#edf3ff;
    color:#5a83e8;
}

.config-stack{
    display:flex;
    flex-direction:column;
    gap:12px;
}

.config-item{
    background:#f7f8fc;
    border-radius:20px;
    padding:16px;
    border:1px solid rgba(31,36,48,.04);
}

.config-item h4{
    font-size:16px;
    font-weight:800;
    color:#232936;
    margin-bottom:8px;
}

.config-item p{
    color:#8f98ab;
    font-size:13px;
    line-height:1.5;
    margin-bottom:12px;
}

.choice-row{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
}

.choice-chip{
    border:none;
    border-radius:14px;
    padding:10px 12px;
    cursor:pointer;
    font-weight:700;
    color:#7e8799;
    background:#fff;
    border:1px solid rgba(31,36,48,.06);
}

.choice-chip.active{
    background:#202633;
    color:#fff;
    border-color:#202633;
}

.switch-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
}

.switch{
    position:relative;
    width:58px;
    height:34px;
    border:none;
    border-radius:999px;
    background:#d9e1ef;
    cursor:pointer;
    flex-shrink:0;
}

.switch::after{
    content:"";
    position:absolute;
    top:4px;
    left:4px;
    width:26px;
    height:26px;
    border-radius:50%;
    background:#fff;
    box-shadow:0 2px 8px rgba(0,0,0,.12);
    transition:.2s ease;
}

.switch.active{
    background:linear-gradient(135deg, var(--blue), var(--cyan));
}

.switch.active::after{
    left:28px;
}

.primary-btn,
.ghost-btn{
    width:100%;
    border:none;
    border-radius:18px;
    padding:14px 16px;
    font-size:14px;
    font-weight:800;
    cursor:pointer;
}

.primary-btn{
    background:linear-gradient(135deg, var(--blue), var(--cyan));
    color:#fff;
    box-shadow:0 10px 25px rgba(61,124,255,.22);
}

.ghost-btn{
    background:#fff;
    color:#394050;
    border:1px solid rgba(31,36,48,.1);
}

.loading-shimmer{
    position:relative;
    overflow:hidden;
}

.loading-shimmer::after{
    content:"";
    position:absolute;
    top:0;
    left:-150%;
    width:120%;
    height:100%;
    background:linear-gradient(90deg, transparent, rgba(255,255,255,.7), transparent);
    animation:coinShimmer 1.4s infinite;
}

@keyframes coinShimmer{
    100%{
        left:130%;
    }
}

.toast.show{
    opacity:1;
    transform:translateX(-50%) translateY(0);
}

@media (min-width: 768px){
    .advisors-grid{
        grid-template-columns:1fr 1fr;
    }

    .advisor-card.kael{
        grid-column:1 / -1;
    }
}

@media (max-width: 560px){
    .chart-foot,
    .stats-grid,
    .metrics-grid{
        grid-template-columns:1fr;
    }

    .price-top,
    .switch-row{
        flex-direction:column;
        align-items:flex-start;
    }

    .section-badge{
        display:none;
    }
}
.coin-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    padding:10px 12px;
    border-radius:18px;
    border:1px solid transparent;
    background:#fff;
}

.coin-select{
    flex:1;
    border:none;
    background:transparent;
    padding:0;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    text-align:left;
    cursor:pointer;
    color:inherit;
}

.coin-open-btn{
    border:none;
    background:#edf2ff;
    color:#3158d6;
    border-radius:12px;
    padding:10px 12px;
    font-weight:800;
    cursor:pointer;
    flex-shrink:0;
}
.market-chip[data-filter="favorites"]{
    font-size:18px;
    padding:10px 14px;
}
/* =========================
   BOTTOM NAV LIMPIO
   ========================= */

.page,
.app-shell,
.page-wrap,
.page.page-light{
    padding-bottom:110px;
}

.bottom-nav.fd-bottom-nav{
    position:fixed;
    left:50%;
    transform:translateX(-50%);
    bottom:0;
    width:min(520px,100%);
    padding:10px 10px calc(10px + env(safe-area-inset-bottom));
    background:rgba(255,255,255,.96);
    backdrop-filter:blur(14px);
    border-top:1px solid #e9edf5;
    display:grid;
    grid-template-columns:repeat(5,minmax(0,1fr));
    gap:8px;
    z-index:80;
}

.fd-bottom-nav .bottom-item{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:5px;
    min-height:58px;
    color:#004a03;
    text-decoration:none;
    font-weight:700;
    font-size:11px;
    transition:.2s ease;
    border-radius:16px;
}

.fd-bottom-nav .bottom-item .nav-icon{
    width:22px;
    height:22px;
    display:flex;
    align-items:center;
    justify-content:center;
}

.fd-bottom-nav .bottom-item .nav-icon svg{
    width:22px;
    height:22px;
}

.fd-bottom-nav .bottom-item.active{
    color:#3867ff;
}

.fd-bottom-nav .bottom-item.active .nav-icon{
    width:42px;
    height:42px;
    border-radius:14px;
    background:linear-gradient(180deg,#00207e 0%, #3867ff 100%);
    color:#fff;
    box-shadow:0 10px 24px rgba(56,103,255,.24);
}

.fd-bottom-nav .bottom-item.active small{
    color:#1d2433;
}
/* =========================
   BOTON IA CENTRAL
========================= */

.fd-bottom-nav{
    position: relative;
}

.fd-bottom-nav .bottom-item.bot-center{
    position: relative;
    transform: translateY(-10px);
}

.fd-bottom-nav .bottom-item.bot-center .nav-icon{
    width:52px;
    height:52px;
    border-radius:50%;
    background: linear-gradient(36deg, #001450, #00ff5e);
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    box-shadow:0 10px 24px rgba(56,103,255,.28);
    animation:iaPulse 2s infinite;
}

.fd-bottom-nav .bottom-item.bot-center small{
    font-weight:800;
    color:#1d2433;
}

@keyframes iaPulse{
    0%{
        box-shadow:0 0 0 0 rgba(56,103,255,.45);
    }
    70%{
        box-shadow:0 0 0 12px rgba(56,103,255,0);
    }
    100%{
        box-shadow:0 0 0 0 rgba(56,103,255,0);
    }
}
/* =========================
   IA TEXTO CENTRO
========================= */

.fd-bottom-nav .bottom-item.bot-center .nav-icon.ia-text{
    font-size:14px;
    font-weight:900;
    letter-spacing:.05em;
}

.fd-bottom-nav .bottom-item.bot-center small{
    display:none;
}