/* FBot Ion — tokens e base.
   Canônico: bacbo-bot-entradas/public/assets/fbot-tokens.css
   As extensões guardam cópia idêntica; editar aqui e copiar. */
:root {
    color-scheme: dark;
    --bg-void: #04060b;
    --bg: #070a12;
    --surface: #0d1320;
    --surface-2: #131b2c;
    --glass: rgba(18, 24, 38, 0.72);
    --line: rgba(130, 170, 255, 0.12);
    --line-strong: rgba(130, 170, 255, 0.24);
    --text: #eaf0fa;
    --text-2: #a7b2c7;
    --text-3: #7a86a0;
    --brand: #2f8cff;
    --brand-hi: #5aa8ff;
    --brand-lo: #1a62d6;
    --brand-muted: rgba(47, 140, 255, 0.14);
    --brand-glow: rgba(47, 140, 255, 0.35);
    --ion: #38d6ff;
    --gain: #3ee6b5;
    --gain-muted: rgba(62, 230, 181, 0.12);
    --loss: #f87171;
    --loss-muted: rgba(248, 113, 113, 0.12);
    --warn: #f4b740;
    --warn-muted: rgba(244, 183, 64, 0.12);
    --gold: #f4c860;
    --player: #5ab4ff;
    --banker: #f05656;
    --tie: #f4c860;
    --font-display: 'Sora', system-ui, sans-serif;
    --font: 'Inter', system-ui, sans-serif;
    --mono: 'JetBrains Mono', ui-monospace, monospace;
    --r-sm: 6px;
    --r: 10px;
    --r-lg: 14px;
    --r-pill: 999px;
    --e1: inset 0 1px 0 rgba(255, 255, 255, 0.06);
    --e2: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 10px 30px rgba(0, 0, 0, 0.35);
    --focus: 0 0 0 2px var(--bg), 0 0 0 4px var(--brand-hi);
    --t-fast: 150ms;
    --t: 220ms;
}

:where(h1, h2, h3) { font-family: var(--font-display); letter-spacing: -0.015em; }

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
    outline: none;
    box-shadow: var(--focus);
}

.ic {
    width: 1.125em;
    height: 1.125em;
    flex: none;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.75;
    stroke-linecap: round;
    stroke-linejoin: round;
    vertical-align: -0.2em;
}

.fb-num { font-family: var(--mono); font-variant-numeric: tabular-nums; letter-spacing: 0.02em; }
.fb-gain { color: var(--gain); text-shadow: 0 0 14px rgba(62, 230, 181, 0.35); }
.fb-loss { color: var(--loss); }
.fb-label { font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-3); }

.fb-card {
    background: linear-gradient(180deg, rgba(22, 30, 48, 0.75), rgba(12, 16, 26, 0.75));
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    box-shadow: var(--e2);
}
.fb-card--live { position: relative; overflow: hidden; }
.fb-card--live::before {
    content: '';
    position: absolute;
    inset: 0 0 auto;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--ion), transparent);
}

.fb-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.5625rem 1rem;
    border-radius: var(--r);
    border: 1px solid var(--line-strong);
    background: var(--glass);
    color: var(--text);
    font: 600 0.8125rem/1.2 var(--font);
    text-decoration: none;
    cursor: pointer;
    transition: background var(--t-fast), border-color var(--t-fast), box-shadow var(--t-fast), transform var(--t-fast);
}
.fb-btn:hover { border-color: rgba(90, 168, 255, 0.5); background: rgba(30, 40, 62, 0.8); }
.fb-btn:active { transform: scale(0.97); }
.fb-btn[disabled], .fb-btn[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; transform: none; }
.fb-btn--primary {
    border-color: transparent;
    background: linear-gradient(180deg, #2f80ee 0%, #1f6fe0 45%, var(--brand-lo) 100%);
    color: #fff;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 0 0 1px rgba(90, 168, 255, 0.5), 0 6px 18px rgba(47, 140, 255, 0.3);
}
.fb-btn--primary:hover {
    background: linear-gradient(180deg, #3584f2 0%, #1f6fe0 45%, #1a62d6 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 0 0 1px rgba(140, 195, 255, 0.8), 0 8px 26px rgba(47, 140, 255, 0.5);
}
.fb-btn--ghost { background: transparent; border-color: transparent; color: var(--brand-hi); }
.fb-btn--ghost:hover { background: var(--brand-muted); border-color: transparent; }
.fb-btn--danger { background: var(--loss-muted); border-color: rgba(248, 113, 113, 0.35); color: #fecaca; }
.fb-btn--danger:hover { background: rgba(248, 113, 113, 0.2); border-color: rgba(248, 113, 113, 0.6); }

.fb-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.1875rem 0.5625rem;
    border-radius: var(--r-pill);
    font-size: 0.6875rem;
    font-weight: 600;
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-2);
}
.fb-tag--gain { background: var(--gain-muted); color: var(--gain); }
.fb-tag--loss { background: var(--loss-muted); color: #fca5a5; }
.fb-tag--warn { background: var(--warn-muted); color: var(--warn); }
.fb-tag--brand { background: var(--brand-muted); color: #9cc8ff; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}