/* ── XetaAI TradeSuite Design Tokens ── */
:root {
    --bg: #0a0a0f;
    --surface: #0f0f17;
    --surface-2: #1a1a2e;
    --border: #1e1e2e;
    --border-hover: #2a2a3e;
    --text: #e2e8f0;
    --text-muted: #64748b;
    --text-secondary: #94a3b8;
    --accent: #7c3aed;
    --accent-light: #a78bfa;
    --radius: 8px;
    --radius-lg: 10px;
}

/* ── Help Tooltip Component ── */
.x-tooltip { position:relative; display:inline-flex; align-items:center; cursor:help; margin-left:4px; }
.x-tooltip-icon { flex-shrink:0; color:var(--text-muted); }
.x-tooltip-bubble {
    position:absolute; bottom:calc(100% + 8px); left:50%; transform:translateX(-50%);
    background:var(--surface-2); border:1px solid var(--border); border-radius:var(--radius);
    padding:10px 14px; font-size:12px; color:var(--text); white-space:normal; width:240px;
    z-index:999; pointer-events:none; opacity:0; transition:opacity .15s;
    line-height:1.5; box-shadow:0 4px 16px rgba(0,0,0,.4);
}
.x-tooltip-title { display:block; margin-bottom:4px; font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--accent-light); }
.x-tooltip-arrow { position:absolute; top:100%; left:50%; transform:translateX(-50%); border:6px solid transparent; border-top-color:var(--border); }
.x-tooltip:hover .x-tooltip-bubble,
.x-tooltip.active .x-tooltip-bubble { opacity:1; pointer-events:auto; }
@media (max-width:640px) {
    .x-tooltip-bubble {
        position: fixed !important;
        top: 72px !important;
        left: 16px !important;
        right: 16px !important;
        bottom: auto !important;
        transform: none !important;
        width: auto !important;
        max-width: calc(100vw - 32px);
        z-index: 9999;
    }
    .x-tooltip-arrow { display: none !important; }
}