@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700;800;900&family=JetBrains+Mono:wght@500;700;800&display=swap');

        /* ── RESET WORDPRESS ── */
        #wpadminbar { display: none !important; }
        html, body { margin: 0 !important; padding: 0 !important; overflow: hidden !important; height: 100% !important; }

        /* ── ROOT FULLSCREEN — cobre o viewport independente do conteúdo WP ── */
        #mflow-painel-root {
            position: fixed !important;
            top: 0 !important; left: 0 !important;
            width: 100vw !important; height: 100vh !important;
            z-index: 99998 !important;
            background: var(--bg-dark, #07090f) !important;
            overflow: hidden !important;
            font-family: var(--font, 'DM Sans', sans-serif);
            color: var(--text, #dde4f0);
        }

        :root {
            --bg-dark:    #07090f;
            --bg2:        #0b0e17;
            --card-bg:    #0f1420;
            --card2:      #141b28;
            --green:      #12e888;
            --green-dark: #0aad62;
            --green-glow: rgba(18,232,136,0.22);
            --green-dim:  rgba(18,232,136,0.09);
            --red:        #ff3d5a;
            --red-dark:   #c42040;
            --red-glow:   rgba(255,61,90,0.22);
            --red-dim:    rgba(255,61,90,0.09);
            --amber:      #f59e0b;
            --blue:       #3b9eff;
            --text:       #dde4f0;
            --text2:      #b8cce0;
            --text-dim:   #a0b8d0;
            --border:     rgba(255,255,255,0.055);
            --border2:    rgba(255,255,255,0.11);
            --shadow:     rgba(0,0,0,0.6);
            --font:       'DM Sans', 'Segoe UI', sans-serif;
            --mono:       'JetBrains Mono', 'Courier New', monospace;
            --radius:     10px;
        }
        * { margin: 0; padding: 0; box-sizing: border-box; }

        body {
            background-color: var(--bg-dark);
            font-family: var(--font);
            color: var(--text);
            line-height: 1.5;
            height: 100vh;
            touch-action: pan-y;
            overscroll-behavior: none;
        }

        /* ══════════════════════════════════════════
           MODAL DE LICENÇA
        ══════════════════════════════════════════ */
        .modal-overlay {
            position: absolute; top: 0; left: 0;
            width: 100%; height: 100%;
            background: rgba(5,7,12,0.96);
            backdrop-filter: blur(20px);
            z-index: 9999;
            display: flex; align-items: center; justify-content: center;
            padding: 20px;
        }
        .modal-box {
            background: linear-gradient(145deg, #111928 0%, #090d16 100%);
            padding: 44px 36px;
            border-radius: 24px;
            border: 1px solid var(--border2);
            box-shadow: 0 40px 100px rgba(0,0,0,0.9), 0 0 0 1px rgba(255,255,255,0.03), inset 0 1px 0 rgba(255,255,255,0.07);
            text-align: center;
            width: 100%; max-width: 390px;
            animation: modalFadeIn 0.45s cubic-bezier(0.22,1.2,0.36,1);
        }
        .modal-logo { display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 28px; }
        .modal-logo-icon {
            width: 52px; height: 52px;
            background: linear-gradient(135deg, var(--green), var(--green-dark));
            border-radius: 14px;
            display: flex; align-items: center; justify-content: center;
            font-weight: 900; font-size: 18px; color: #030d07;
            font-family: var(--mono);
            box-shadow: 0 0 40px var(--green-glow), 0 8px 20px rgba(0,0,0,0.5);
        }
        .modal-logo-text { font-size: 24px; font-weight: 800; color: var(--text); letter-spacing: -0.5px; }
        .modal-logo-badge {
            font-size: 10px; background: rgba(14,203,129,0.15); color: var(--green);
            padding: 2px 7px; border-radius: 6px; font-weight: 800;
            border: 1px solid rgba(14,203,129,0.3); margin-left: 4px;
        }
        .modal-subtitle { font-size: 12px; color: var(--text-dim); text-transform: uppercase; letter-spacing: 1.5px; font-weight: 600; margin-bottom: 6px; }
        .modal-desc { font-size: 13px; color: var(--text-dim); margin-bottom: 24px; }

        .license-input {
            width: 100%; padding: 18px;
            margin: 0 0 12px 0;
            background: rgba(0,0,0,0.45);
            border: 1px solid var(--border2);
            color: var(--green);
            border-radius: 14px;
            font-family: var(--mono);
            text-align: center;
            font-size: 26px; font-weight: 800;
            text-transform: uppercase; letter-spacing: 8px;
            outline: none; transition: all 0.2s;
            box-shadow: inset 0 2px 16px rgba(0,0,0,0.7), 0 0 0 0 var(--green-glow);
        }
        .license-input:focus { border-color: var(--green); box-shadow: 0 0 20px var(--green-glow), inset 0 2px 8px rgba(0,0,0,0.5); }
        .license-input.err { border-color: var(--red); box-shadow: 0 0 15px var(--red-glow); animation: shake 0.4s; }

        .error-msg {
            color: var(--red); font-size: 12px; font-weight: 600;
            margin-bottom: 14px; display: none; min-height: 18px;
        }
        .btn-activate {
            background: linear-gradient(135deg, var(--green-dark), var(--green), #5cffa4);
            border: none; color: #030d07;
            padding: 17px; border-radius: 12px;
            font-size: 13px; font-weight: 900; cursor: pointer;
            transition: all 0.2s; text-transform: uppercase;
            letter-spacing: 2px; width: 100%; font-family: var(--font);
            box-shadow: 0 6px 28px var(--green-glow), 0 1px 0 rgba(255,255,255,0.2) inset;
        }
        .btn-activate:hover { transform: translateY(-2px); filter: brightness(1.1); box-shadow: 0 8px 25px var(--green-glow); }
        .btn-activate:active { transform: translateY(1px); }
        .modal-footer { margin-top: 16px; font-size: 10px; color: var(--text-dim); letter-spacing: 0.5px; }

        /* ══════════════════════════════════════════
           BOOT SCREEN — ANIMAÇÃO DE INICIALIZAÇÃO
        ══════════════════════════════════════════ */
        #boot-screen {
            position: fixed; top: 0; left: 0;
            width: 100%; height: 100%;
            background: radial-gradient(ellipse at 25% 40%, #0d1e2a 0%, #080c14 45%, #050710 100%);
            z-index: 9998;
            display: none;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 0;
        }
        #boot-screen.visible { display: flex; }

        /* Partículas de fundo */
        .boot-particles {
            position: absolute; top: 0; left: 0; width: 100%; height: 100%;
            overflow: hidden; pointer-events: none;
        }
        .particle {
            position: absolute;
            width: 1px; height: 1px;
            background: var(--green);
            border-radius: 50%;
            opacity: 0;
            animation: particleFly var(--dur, 4s) var(--delay, 0s) ease-in infinite;
        }

        /* Logo pulsante */
        .boot-logo-wrap {
            display: flex; flex-direction: column; align-items: center; gap: 0;
            margin-bottom: 48px;
            animation: bootLogoIn 0.8s ease-out forwards;
            opacity: 0;
        }
        .boot-logo-icon {
            width: 80px; height: 80px;
            background: linear-gradient(135deg, var(--green), var(--green-dark));
            border-radius: 22px;
            display: flex; align-items: center; justify-content: center;
            font-weight: 900; font-size: 28px; color: var(--bg-dark);
            box-shadow: 0 0 50px var(--green-glow), 0 0 100px rgba(14,203,129,0.1);
            animation: logoPulse 2s ease-in-out infinite;
            margin-bottom: 20px;
        }
        .boot-logo-text {
            font-size: 36px; font-weight: 900; color: var(--text);
            letter-spacing: -1px;
            display: flex; align-items: center; gap: 10px;
        }
        .boot-logo-version {
            font-size: 14px; background: rgba(14,203,129,0.15); color: var(--green);
            padding: 4px 10px; border-radius: 8px; font-weight: 800;
            border: 1px solid rgba(14,203,129,0.3);
        }

        /* Texto de boas-vindas */
        .boot-welcome {
            font-size: 13px; color: var(--text-dim); text-transform: uppercase;
            letter-spacing: 3px; font-weight: 600; margin-top: 8px;
        }

        /* Área de digitação do nome */
        .boot-name-area {
            height: 60px; display: flex; align-items: center; justify-content: center;
            margin-bottom: 40px;
        }
        #boot-name-display {
            font-size: 28px; font-weight: 900; color: var(--green);
            letter-spacing: 2px; text-align: center;
            text-shadow: 0 0 30px var(--green-glow);
            font-family: 'Courier New', monospace;
            min-height: 40px;
        }
        #boot-name-display::after {
            content: '█';
            animation: blink 0.7s step-end infinite;
            margin-left: 3px;
            opacity: 0.8;
        }
        #boot-name-display.no-cursor::after { display: none; }

        /* Barra de progresso */
        .boot-progress-wrap {
            width: 360px; max-width: 90vw;
            display: flex; flex-direction: column; gap: 10px;
        }
        .boot-progress-label {
            display: flex; justify-content: space-between;
            font-size: 10px; color: var(--text-dim);
            text-transform: uppercase; letter-spacing: 1px; font-weight: 600;
        }
        .boot-progress-track {
            width: 100%; height: 3px;
            background: rgba(43,49,57,0.8);
            border-radius: 2px; overflow: hidden;
        }
        .boot-progress-bar {
            height: 100%;
            background: linear-gradient(90deg, var(--green-dark), var(--green), #7fffcb);
            width: 0%;
            border-radius: 2px;
            transition: width 0.3s ease;
            box-shadow: 0 0 10px var(--green-glow);
        }

        /* Logs de sistema */
        .boot-logs {
            width: 360px; max-width: 90vw;
            margin-top: 16px;
            font-family: 'Courier New', monospace;
            font-size: 10px; color: rgba(14,203,129,0.6);
            min-height: 18px; text-align: left;
        }
        .boot-logs .log-line { margin-bottom: 2px; }
        .boot-logs .log-line::before { content: '> '; color: rgba(255,255,255,0.3); }

        /* ══════════════════════════════════════════
           APP PRINCIPAL
        ══════════════════════════════════════════ */
        .app-wrapper {
            display: flex; width: 100%; height: 100vh;
            transition: filter 0.3s ease, opacity 0.3s ease;
            display: none;
        }
        .app-wrapper.visible { display: flex; }

        /* Barra lateral compacta */
        .dashboard-container {
            display: flex; flex-direction: column; gap: 5px;
            width: 196px; min-width: 196px; max-width: 196px;
            height: 100vh; overflow-y: auto; overflow-x: hidden;
            padding: 8px 9px;
            border-right: 1px solid var(--border);
            background: linear-gradient(180deg, var(--bg2) 0%, var(--bg-dark) 100%);
            z-index: 10;
        }
        .dashboard-container::-webkit-scrollbar { width: 3px; }
        .dashboard-container::-webkit-scrollbar-track { background: transparent; }
        .dashboard-container::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.08); border-radius: 10px; }
        .dashboard-container::-webkit-scrollbar-thumb:hover { background: rgba(14,203,129,0.3); }

        /* Container do gráfico */
        .exchange-container {
            flex: 1; height: 100vh; background-color: #000; position: relative;
        }

        /* Header */
        .system-header {
            display: flex; flex-direction: column; align-items: center;
            padding: 8px 0 10px; border-bottom: 1px solid var(--border);
            margin-bottom: 4px; gap: 7px; position: relative;
        }
        .logo { display: flex; align-items: center; gap: 6px; position: relative; }
        .logo-icon {
            width: 27px; height: 27px;
            background: linear-gradient(135deg, var(--green), var(--green-dark));
            border-radius: 8px; display: flex; align-items: center; justify-content: center;
            font-weight: 900; font-size: 11px; color: #030d07; font-family: var(--mono);
            box-shadow: 0 0 18px var(--green-glow), 0 2px 8px rgba(0,0,0,0.5);
        }
        .logo-text { font-size: 14px; font-weight: 800; color: var(--text); letter-spacing: -0.4px; font-family: var(--font); }
        .user-greeting {
            font-size: 9px; color: var(--green); font-weight: 600;
            text-align: center; opacity: 1; letter-spacing: 0.3px;
            order: -1;
        }
        .system-tag {
            font-size: 8px; background: var(--green-dim); color: var(--green);
            padding: 5px 10px; border-radius: 20px; font-weight: 700;
            text-transform: uppercase; display: flex; align-items: center;
            justify-content: center; gap: 5px; text-decoration: none;
            transition: all 0.18s; width: 100%;
            border: 1px solid rgba(18,232,136,0.18); letter-spacing: 0.5px;
            font-family: var(--font);
        }
        .system-tag:hover { background: rgba(18,232,136,0.16); box-shadow: 0 0 14px var(--green-glow); }

        /* Pares */
        .pair-selector { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
        .pair-btn {
            flex: 1; background: rgba(255,255,255,0.03); border: 1px solid var(--border);
            color: var(--text2); padding: 7px 0; border-radius: 7px;
            font-size: 10px; font-weight: 700; cursor: pointer; transition: all 0.18s;
            position: relative; font-family: var(--mono);
        }
        .pair-btn:hover { background: rgba(255,255,255,0.06); color: var(--text); border-color: var(--border2); }
        .pair-btn.active { background: var(--green-dim); color: var(--green); border-color: rgba(18,232,136,0.35); box-shadow: 0 0 14px var(--green-glow); }
        .pair-trend-dot { position: absolute; top: 4px; right: 4px; width: 5px; height: 5px; border-radius: 50%; background: var(--border); transition: all 0.3s; }
        .pair-trend-dot.bull { background: var(--green); box-shadow: 0 0 5px var(--green); }
        .pair-trend-dot.bear { background: var(--red); box-shadow: 0 0 5px var(--red); }
        .live-dot { width: 5px; height: 5px; background-color: var(--green); border-radius: 50%; animation: blink 1s infinite; }

        /* Preço */
        .price-monitor {
            background: linear-gradient(165deg, #111e30 0%, #0b1220 50%, #08101c 100%);
            padding: 12px 10px; border-radius: 11px; text-align: center;
            border: 1px solid rgba(18,232,136,0.13); position: relative;
            box-shadow: 0 8px 28px rgba(0,0,0,0.55),
                        inset 0 1px 0 rgba(255,255,255,0.05),
                        0 0 0 1px rgba(18,232,136,0.04);
        }
        .price-main { font-size: 20px; font-weight: 800; margin: 4px 0 2px; letter-spacing: -1px; font-variant-numeric: tabular-nums; color: var(--text); font-family: var(--mono); }
        .mute-btn { position: absolute; top: 5px; right: 5px; background: transparent; border: none; color: var(--text-dim); cursor: pointer; padding: 5px; display: flex; align-items: center; justify-content: center; transition: all 0.3s; }
        .mute-btn:hover { color: var(--text); transform: scale(1.1); }
        .mute-btn.active { color: var(--green); }
        .mute-btn svg { width: 16px; height: 16px; fill: currentColor; }
        .scan-line { position: absolute; bottom: 0; left: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--green-dark), var(--green), #5dffa8, var(--green), transparent); width: 0%; transition: width linear 1s; border-radius: 0 0 11px 11px; box-shadow: 0 0 12px var(--green-glow); }

        /* Cards */
        .indicator-card {
            background: var(--card-bg);
            padding: 9px 10px; border-radius: var(--radius); display: flex; flex-direction: column;
            transition: border-color 0.2s;
            border: 1px solid var(--border); position: relative; overflow: hidden;
        }
        .indicator-card::before {
            content: ''; position: absolute; inset: 0; border-radius: var(--radius);
            background: linear-gradient(180deg, rgba(255,255,255,0.022) 0%, transparent 60%);
            pointer-events: none;
        }
        .indicator-card.bull { border-left-color: var(--green); background: linear-gradient(180deg, rgba(14,203,129,0.05) 0%, var(--card-bg) 100%); }
        .indicator-card.bear { border-left-color: var(--red); background: linear-gradient(180deg, rgba(246,70,93,0.05) 0%, var(--card-bg) 100%); }
        .label { font-size: 8px; color: #b0c8e0; text-transform: uppercase; font-weight: 700; letter-spacing: 1.3px; font-family: var(--font); }
        .value { font-size: 16px; font-weight: bold; margin-top: 5px; }
        .status { font-size: 9px; margin-top: 4px; font-weight: 500; color: #8fa5bf; }

        /* Alerta */
        .alert-box {
            background: rgba(20,24,36,0.8);
            border: 1px solid rgba(255,255,255,0.06); color: var(--text-dim);
            padding: 10px; border-radius: 8px; text-align: center;
            font-weight: bold; font-size: 11px; text-transform: uppercase;
            box-shadow: 0 2px 12px rgba(0,0,0,0.3); transition: all 0.4s;
        }
        .alert-box { display: flex; flex-direction: column; align-items: center; gap: 4px; }
        .alert-box .signal-text { font-size: 11px; font-weight: 800; letter-spacing: 2px; font-family: var(--mono); }
        .alert-box .signal-stars { display: none; }
        .alert-box.bull { border-color: var(--green); color: #fff; background: rgba(18,232,136,0.13); transition: all 0.8s ease; box-shadow: 0 0 22px var(--green-glow); }
        .alert-box.bull.lvl1 { background: rgba(14,203,129,0.28); }
        .alert-box.bull.lvl2 { background: rgba(14,203,129,0.50); }
        .alert-box.bull.lvl3 { background: rgba(14,203,129,0.75); }
        .alert-box.bull.lvl4 { background: rgba(14,203,129,1.00); }
        .alert-box.bear { border-color: var(--red); color: #fff; background: rgba(255,61,90,0.13); transition: all 0.8s ease; box-shadow: 0 0 22px var(--red-glow); }
        .alert-box.bear.lvl1 { background: rgba(246,70,93,0.28); }
        .alert-box.bear.lvl2 { background: rgba(246,70,93,0.50); }
        .alert-box.bear.lvl3 { background: rgba(246,70,93,0.75); }
        .alert-box.bear.lvl4 { background: rgba(246,70,93,1.00); }
        .alert-box.bull .signal-stars { color: #fff; text-shadow: 0 0 8px rgba(255,255,255,0.6); }
        .alert-box.bear .signal-stars { color: #fff; text-shadow: 0 0 8px rgba(255,100,100,0.6); }

        /* Telemetria */
        .telemetry-container { background: #040608; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; box-shadow: 0 4px 20px rgba(0,0,0,0.6); }
        .telemetry-header { background: #07090f; padding: 5px 10px; display: flex; align-items: center; border-bottom: 1px solid rgba(255,255,255,0.04); }
        .telemetry-header .dot { width: 8px; height: 8px; border-radius: 50%; margin-right: 5px; }
        .telemetry-header .dot.red { background: #ff5f56; }
        .telemetry-header .dot.yellow { background: #ffbd2e; }
        .telemetry-header .dot.green { background: #27c93f; }
        .telemetry-header .title { margin-left: 8px; font-size: 9px; color: #b0c8e0; font-weight: 600; letter-spacing: 1px; }
        .telemetry { font-size: 9px; color: var(--green); font-family: var(--mono); text-align: left; padding: 9px 10px; min-height: 60px; max-height: 60px; display: block; font-weight: 700; text-shadow: 0 0 12px var(--green-glow); white-space: normal; word-break: break-word; line-height: 1.55; overflow: hidden; }
        /* .telemetry .prompt removed */
        .telemetry::after { content: ' █'; animation: blink 1s step-end infinite; color: var(--green); opacity: 0.8; display: inline; }

        /* Botões controle */
        .audio-controls { display: flex; flex-direction: column; gap: 5px; }
        .audio-btn {
            flex: 1; background: rgba(255,255,255,0.03); border: 1px solid var(--border);
            color: var(--text2); padding: 7px 10px; border-radius: 8px;
            font-size: 10px; font-weight: 600; cursor: pointer; transition: all 0.18s;
            display: flex; align-items: center; justify-content: center; gap: 5px;
            font-family: var(--font);
        }
        .audio-btn:hover { background: rgba(255,255,255,0.06); color: var(--text); border-color: var(--border2); }
        .audio-btn.active { background: var(--green-dim); color: var(--green); border-color: rgba(18,232,136,0.3); box-shadow: 0 0 12px var(--green-glow); }
        .icon-svg { width: 12px; height: 12px; fill: currentColor; }

        /* Volume */
        .volume-header { display: flex; justify-content: space-between; align-items: flex-end; margin-top: 8px; margin-bottom: 4px; }
        .vol-label { font-size: 8px; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.5px; }
        .volume-histogram { display: flex; align-items: flex-end; height: 46px; gap: 1px; margin-top: 4px; border-bottom: 1px solid rgba(255,255,255,0.06); padding-bottom: 1px; overflow: hidden; position: relative; border-radius: 0 0 3px 3px; }
        .hist-bar { flex: 1; min-width: 1px; border-radius: 1px 1px 0 0; background: var(--border); transition: height 0.4s cubic-bezier(0.4,0,0.2,1), background-color 0.4s; position: relative; }
        /* hist-bar ::after removed for clean bar rendering */

        /* Flux */
        .flux-value { font-size: 22px; font-weight: 800; color: var(--text); font-variant-numeric: tabular-nums; transition: transform 0.2s, color 0.4s; text-align: center; margin: 4px 0 2px; letter-spacing: -0.5px; font-family: var(--mono); }

        /* Reset btn */
        .btn-reset {
            background: rgba(255,255,255,0.03); border: 1px dashed rgba(255,255,255,0.1);
            color: var(--text2);
            padding: 9px; border-radius: 8px; font-size: 9px; font-weight: 700; cursor: pointer;
            transition: all 0.18s; text-transform: uppercase; letter-spacing: 0.8px; width: 100%;
            display: flex; justify-content: center; align-items: center; gap: 7px;
            font-family: var(--font);
        }
        .btn-reset:hover { background: var(--green-dim); border-color: rgba(18,232,136,0.3); color: var(--green); transform: translateY(-1px); }
        .btn-reset:active { transform: scale(0.97); }

        /* ── WELCOME CARD (after boot) ── */
        #boot-welcome-card {
            display: none; flex-direction: column; align-items: center;
            text-align: center; padding: 28px 24px; max-width: 380px;
        }
        #boot-welcome-card.visible { display: flex; }
        .boot-welcome-emoji { font-size: 48px; margin-bottom: 16px; animation: bootLogoIn 0.6s ease-out forwards; }
        .boot-welcome-title {
            font-size: 22px; font-weight: 900; color: var(--text); margin-bottom: 8px;
            letter-spacing: -0.5px;
        }
        .boot-welcome-name { color: var(--green); }
        .boot-welcome-msg {
            font-size: 13px; color: var(--text-dim); line-height: 1.7;
            margin-bottom: 24px; max-width: 300px;
        }
        .boot-welcome-msg strong { color: var(--text); }
        .boot-welcome-countdown {
            font-size: 10px; color: var(--text-dim); letter-spacing: 1px;
            text-transform: uppercase; font-weight: 600;
        }
        .boot-welcome-bar {
            width: 200px; height: 2px; background: rgba(43,49,57,0.8);
            border-radius: 2px; overflow: hidden; margin-top: 10px;
        }
        .boot-welcome-bar-fill {
            height: 100%; width: 0%;
            background: linear-gradient(90deg, var(--green-dark), var(--green));
            border-radius: 2px; transition: width 0.5s linear;
        }
        .boot-badge-row { display: flex; gap: 8px; margin-bottom: 20px; flex-wrap: wrap; justify-content: center; }
        .boot-badge {
            font-size: 9px; font-weight: 700; letter-spacing: 0.5px;
            padding: 4px 10px; border-radius: 20px; text-transform: uppercase;
            border: 1px solid;
        }
        .boot-badge.green { background: rgba(14,203,129,0.12); color: var(--green); border-color: rgba(14,203,129,0.3); }
        .boot-badge.amber { background: rgba(243,156,18,0.12); color: #f39c12; border-color: rgba(243,156,18,0.3); }
        .boot-badge.blue  { background: rgba(77,159,255,0.12); color: #4d9fff; border-color: rgba(77,159,255,0.3); }

        /* ══════════════════════════════════════
           TELA MFLOW — CINEMATOGRÁFICA
        ══════════════════════════════════════ */
        #mflow-ready-screen {
            position: fixed; top: 0; left: 0; width: 100%; height: 100%;
            background: #030507;
            z-index: 9997; display: none;
            flex-direction: column; align-items: center; justify-content: space-between;
            overflow: hidden;
        }
        #mflow-ready-screen.visible { display: flex; }

        /* Grade de fundo estilo terminal/matrix */
        .mflow-grid-bg {
            position: absolute; inset: 0; pointer-events: none;
            background-image:
                linear-gradient(rgba(18,232,136,0.025) 1px, transparent 1px),
                linear-gradient(90deg, rgba(18,232,136,0.025) 1px, transparent 1px);
            background-size: 60px 60px;
            mask-image: radial-gradient(ellipse at center, black 30%, transparent 80%);
        }

        /* Gradiente radial verde no centro */
        .mflow-logo-glow {
            position: absolute;
            width: 500px; height: 500px;
            background: radial-gradient(circle, rgba(18,232,136,0.08) 0%, transparent 65%);
            top: 50%; left: 50%; transform: translate(-50%, -55%);
            pointer-events: none; animation: mflowGlowPulse 4s ease-in-out infinite;
        }
        /* Anel animado ao redor do logo */
        .mflow-logo-ring {
            position: absolute;
            width: 280px; height: 280px;
            border: 1px solid rgba(18,232,136,0.08);
            border-radius: 50%;
            top: 50%; left: 50%; transform: translate(-50%, -62%);
            animation: mflowRingSpin 20s linear infinite;
            pointer-events: none;
        }
        .mflow-logo-ring::before {
            content: '';
            position: absolute; top: -2px; left: 40%;
            width: 20%; height: 3px;
            background: linear-gradient(90deg, transparent, var(--green), transparent);
            border-radius: 2px;
            box-shadow: 0 0 12px var(--green);
        }

        /* Badge topo */
        .mflow-top-badge {
            position: relative; z-index: 2;
            margin-top: 32px;
            display: flex; align-items: center; gap: 8px;
            font-size: 9px; font-weight: 700; letter-spacing: 3px;
            color: rgba(18,232,136,0.6); text-transform: uppercase;
            font-family: var(--mono);
            border: 1px solid rgba(18,232,136,0.1);
            padding: 6px 16px; border-radius: 20px;
            background: rgba(18,232,136,0.03);
            opacity: 0; animation: mflowFadeDown 0.6s ease 0.2s forwards;
        }
        .mflow-top-badge-dot {
            width: 6px; height: 6px; border-radius: 50%;
            background: var(--green);
            box-shadow: 0 0 8px var(--green);
            animation: blink 1.5s ease-in-out infinite;
        }

        /* Centro */
        .mflow-center {
            position: relative; z-index: 2;
            display: flex; flex-direction: column;
            align-items: center; gap: 0;
            margin-top: -20px;
        }
        .mflow-ready-logo {
            font-size: clamp(64px, 14vw, 120px);
            font-weight: 900; color: var(--green);
            letter-spacing: -4px; line-height: 1;
            font-family: var(--mono);
            text-shadow:
                0 0 40px rgba(18,232,136,0.5),
                0 0 80px rgba(18,232,136,0.2),
                0 0 160px rgba(18,232,136,0.08);
            opacity: 0;
            animation: mflowLogoPop 0.8s cubic-bezier(0.22,1.2,0.36,1) 0.1s forwards;
        }
        .mflow-ready-sub {
            font-size: 10px; color: rgba(18,232,136,0.5);
            letter-spacing: 5px; text-transform: uppercase;
            margin-top: 8px; font-family: var(--font); font-weight: 600;
            opacity: 0; animation: mflowFadeUp 0.5s ease 0.5s forwards;
        }
        .mflow-ready-version {
            font-size: 8px; color: var(--text-dim);
            letter-spacing: 2px; text-transform: uppercase;
            margin-top: 8px; font-family: var(--mono); font-weight: 500;
            opacity: 0; animation: mflowFadeUp 0.5s ease 0.65s forwards;
        }

        /* Botão INICIAR */
        .mflow-ready-btn {
            margin-top: 44px; opacity: 0;
            animation: mflowFadeUp 0.5s ease 0.85s forwards;
        }
        .mflow-ready-btn button {
            background: transparent;
            border: 1px solid rgba(18,232,136,0.4);
            color: var(--green);
            padding: 15px 56px; border-radius: 4px;
            font-size: 12px; font-weight: 800; cursor: pointer;
            font-family: var(--mono); letter-spacing: 4px; text-transform: uppercase;
            display: flex; align-items: center; gap: 12px;
            transition: all 0.2s; position: relative; overflow: hidden;
        }
        .mflow-ready-btn button::before {
            content: '';
            position: absolute; inset: 0;
            background: linear-gradient(135deg, rgba(18,232,136,0.08) 0%, transparent 60%);
            opacity: 0; transition: opacity 0.2s;
        }
        .mflow-ready-btn button:hover {
            border-color: var(--green);
            box-shadow: 0 0 30px rgba(18,232,136,0.2), inset 0 0 30px rgba(18,232,136,0.04);
            transform: translateY(-2px);
        }
        .mflow-ready-btn button:hover::before { opacity: 1; }
        .mflow-ready-btn button:active { transform: scale(0.97); }
        .mflow-btn-icon { font-size: 10px; opacity: 0.7; }

        /* Stats row */
        .mflow-stats-row {
            display: flex; align-items: center; gap: 24px;
            margin-top: 40px;
            opacity: 0; animation: mflowFadeUp 0.5s ease 1.1s forwards;
        }
        .mflow-stat-item { text-align: center; }
        .mflow-stat-val {
            font-size: 15px; font-weight: 800; color: var(--text);
            font-family: var(--mono); letter-spacing: 0;
        }
        .mflow-stat-lbl {
            font-size: 8px; color: var(--text-dim);
            text-transform: uppercase; letter-spacing: 1.5px;
            margin-top: 3px; font-weight: 600;
        }
        .mflow-stat-div {
            width: 1px; height: 28px;
            background: linear-gradient(180deg, transparent, rgba(255,255,255,0.1), transparent);
        }

        /* Partículas */
        .mflow-ready-particles {
            position: absolute; top: 0; left: 0; width: 100%; height: 100%;
            overflow: hidden; pointer-events: none;
        }

        /* Rodapé */
        .mflow-footer-bar {
            position: relative; z-index: 2;
            margin-bottom: 28px;
            display: flex; align-items: center; gap: 12px;
            font-size: 9px; color: var(--text-dim); font-weight: 600;
            letter-spacing: 1.5px; text-transform: uppercase;
            font-family: var(--font);
            opacity: 0; animation: mflowFadeUp 0.5s ease 1.3s forwards;
        }
        .mflow-footer-sep { color: rgba(18,232,136,0.3); }

        @keyframes mflowLogoPop {
            0%   { opacity: 0; transform: scale(0.85) translateY(16px); filter: blur(8px); }
            100% { opacity: 1; transform: scale(1) translateY(0); filter: blur(0); }
        }
        @keyframes mflowFadeUp {
            0%   { opacity: 0; transform: translateY(10px); }
            100% { opacity: 1; transform: translateY(0); }
        }
        @keyframes mflowFadeDown {
            0%   { opacity: 0; transform: translateY(-10px); }
            100% { opacity: 1; transform: translateY(0); }
        }
        @keyframes mflowGlowPulse {
            0%, 100% { opacity: 0.7; transform: translate(-50%,-55%) scale(1); }
            50%       { opacity: 1;   transform: translate(-50%,-55%) scale(1.15); }
        }
        @keyframes mflowRingSpin {
            from { transform: translate(-50%,-62%) rotate(0deg); }
            to   { transform: translate(-50%,-62%) rotate(360deg); }
        }

        /* ── KEYFRAMES ── */
        @keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }
        @keyframes pulse-green { 0% { box-shadow: 0 4px 10px rgba(0,0,0,0.2); } 50% { box-shadow: 0 4px 20px var(--green-glow); } 100% { box-shadow: 0 4px 10px rgba(0,0,0,0.2); } }
        @keyframes pulse-red { 0% { box-shadow: 0 4px 10px rgba(0,0,0,0.2); } 50% { box-shadow: 0 4px 20px var(--red-glow); } 100% { box-shadow: 0 4px 10px rgba(0,0,0,0.2); } }
        @keyframes modalFadeIn { from { opacity: 0; transform: translateY(20px) scale(0.95); } to { opacity: 1; transform: translateY(0) scale(1); } }
        @keyframes shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }
        @keyframes bootLogoIn { from { opacity: 0; transform: scale(0.8) translateY(20px); } to { opacity: 1; transform: scale(1) translateY(0); } }
        @keyframes logoPulse {
            0%, 100% { box-shadow: 0 0 50px var(--green-glow), 0 0 100px rgba(14,203,129,0.1); transform: scale(1); }
            50% { box-shadow: 0 0 80px rgba(14,203,129,0.5), 0 0 140px rgba(14,203,129,0.2); transform: scale(1.04); }
        }
        @keyframes bootFadeOut {
            0% { opacity: 1; transform: scale(1); }
            100% { opacity: 0; transform: scale(1.05); }
        }
        @keyframes appFadeIn {
            from { opacity: 0; } to { opacity: 1; }
        }
        @keyframes particleFly {
            0% { opacity: 0; transform: translateY(100vh) scale(0); }
            10% { opacity: 0.6; }
            90% { opacity: 0.2; }
            100% { opacity: 0; transform: translateY(-20px) scale(2); }
        }


        /* ── PERFORMANCE CARD (sidebar) ── */
        .perf-card {
            background: linear-gradient(160deg, #0f1e2a 0%, var(--card-bg) 60%);
            border: 1px solid rgba(18,232,136,0.14); border-radius: var(--radius); padding: 12px;
            position: relative; overflow: hidden;
            box-shadow: 0 0 0 1px rgba(18,232,136,0.04), 0 4px 20px rgba(0,0,0,0.4);
        }
        .perf-card::before {
            content:''; position:absolute; top:0; left:10%; right:10%; height:1px;
            background: linear-gradient(90deg, transparent, var(--green), transparent);
            opacity: 0.5;
        }
        .perf-summary { display: flex; gap: 4px; margin: 10px 0 8px; }
        .perf-stat {
            flex: 1; text-align: center; padding: 8px 3px;
            background: rgba(0,0,0,0.3); border-radius: 8px; border: 1px solid var(--border);
        }
        .ps-val { font-size: 16px; font-weight: 800; color: var(--text); font-variant-numeric: tabular-nums; line-height: 1; font-family: var(--mono); }
        .perf-stat.win .ps-val { color: var(--green); }
        .perf-stat.loss .ps-val { color: var(--red); }
        .ps-lbl { font-size: 7px; color: #b0c8e0; text-transform: uppercase; letter-spacing: 1px; margin-top: 4px; font-weight: 600; }
        .perf-btns { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; }
        .btn-perf {
            width: 100%; padding: 8px; border-radius: 8px; font-size: 9px;
            font-weight: 700; cursor: pointer; transition: all 0.18s; text-transform: uppercase;
            display: flex; align-items: center; justify-content: center; gap: 5px;
            letter-spacing: 0.5px; font-family: var(--font);
        }
        .btn-perf.register { background: var(--red-dim); color: var(--red); border: 1px solid rgba(255,61,90,0.22); }
        .btn-perf.register:hover { background: var(--red); color: #fff; transform: translateY(-1px); box-shadow: 0 4px 14px var(--red-glow); }
        .btn-perf.view-panel { background: var(--green-dim); color: var(--green); border: 1px solid rgba(18,232,136,0.22); }
        .btn-perf.view-panel:hover { background: rgba(18,232,136,0.18); transform: translateY(-1px); }

        /* ── MODAL REGISTRAR OPERAÇÃO ── */
        .mf-modal-bg {
            position: absolute; top: 0; left: 0; width: 100%; height: 100%;
            background: rgba(6,8,14,0.92); backdrop-filter: blur(12px);
            z-index: 9000; display: none; align-items: center; justify-content: center; padding: 16px;
        }
        .mf-modal-bg.open { display: flex; }
        .mf-modal {
            background: linear-gradient(145deg,#111928,#090e18); border: 1px solid var(--border2);
            border-radius: 18px; padding: 26px; width: 100%; max-width: 360px;
            box-shadow: 0 32px 90px rgba(0,0,0,0.9), inset 0 1px 0 rgba(255,255,255,0.06);
            animation: modalFadeIn 0.28s cubic-bezier(0.22,1.2,0.36,1);
        }
        .mf-modal h3 { font-size: 13px; font-weight: 800; color: var(--text); margin-bottom: 18px; text-transform: uppercase; letter-spacing: 0.5px; }
        .mf-field { margin-bottom: 14px; }
        .mf-field label { display: block; font-size: 9px; color: var(--text-dim); text-transform: uppercase; letter-spacing: 1px; font-weight: 700; margin-bottom: 6px; }
        .mf-field select, .mf-field input[type=number] {
            width: 100%; padding: 10px 12px; background: #080b12; border: 1px solid rgba(255,255,255,0.08);
            color: var(--text); border-radius: 8px; font-size: 16px; outline: none;
            transition: all 0.2s; font-variant-numeric: tabular-nums;
        }
        .mf-field select:focus, .mf-field input:focus { border-color: var(--green); box-shadow: 0 0 0 3px rgba(14,203,129,0.1); }
        .result-toggle { display: flex; gap: 8px; }
        .result-btn {
            flex: 1; padding: 11px; border-radius: 8px; font-size: 12px; font-weight: 800;
            cursor: pointer; transition: all 0.2s; border: 1px solid rgba(255,255,255,0.07);
            background: rgba(255,255,255,0.03); color: var(--text-dim); letter-spacing: 0.3px;
        }
        .result-btn:hover { background: rgba(255,255,255,0.06); }
        .result-btn.win.active { background: rgba(14,203,129,0.15); border-color: var(--green); color: var(--green); box-shadow: 0 0 16px rgba(14,203,129,0.15); }
        .result-btn.loss.active { background: rgba(246,70,93,0.15); border-color: var(--red); color: var(--red); box-shadow: 0 0 16px rgba(246,70,93,0.15); }
        .modal-action-btns { display: flex; gap: 8px; margin-top: 20px; }
        .btn-modal-cancel {
            flex: 0 0 auto; padding: 11px 18px; border-radius: 8px; font-size: 12px; font-weight: 700;
            cursor: pointer; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); color: var(--text-dim);
        }
        .btn-modal-save {
            flex: 1; padding: 11px; border-radius: 8px; font-size: 12px; font-weight: 800;
            cursor: pointer; background: linear-gradient(135deg, var(--green-dark), var(--green));
            border: none; color: #050e08; letter-spacing: 0.3px;
        }
        .btn-modal-save:hover { filter: brightness(1.08); transform: translateY(-1px); }

        /* ══ PAINEL PERFORMANCE FULLSCREEN — TRADING TERMINAL ══ */
        #perf-panel {
            position: absolute; top: 0; left: 0; width: 100%; height: 100%;
            background: #080b12; z-index: 8000; display: none;
            flex-direction: column; overflow: hidden;
        }
        #perf-panel.open { display: flex; animation: modalFadeIn 0.25s ease-out; }
        .pp-header {
            display: flex; align-items: center; justify-content: space-between;
            padding: 14px 24px; border-bottom: 1px solid rgba(255,255,255,0.06);
            background: #0d1117; flex-shrink: 0;
            box-shadow: 0 1px 0 rgba(14,203,129,0.08);
        }
        .pp-header-left { display: flex; align-items: center; gap: 14px; }
        .pp-logo { width: 32px; height: 32px; background: linear-gradient(135deg,var(--green-dark),var(--green)); border-radius: 8px; display: flex; align-items: center; justify-content: center; font-weight: 900; font-size: 12px; color: #050e08; }
        .pp-header h1 { font-size: 14px; font-weight: 800; color: var(--text); display: flex; align-items: center; gap: 10px; margin: 0; letter-spacing: -0.3px; }
        .pp-header .badge {
            font-size: 9px; background: rgba(14,203,129,0.12); color: var(--green);
            border: 1px solid rgba(14,203,129,0.25); border-radius: 20px; padding: 3px 9px;
            font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px;
        }
        .pp-close {
            background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08);
            color: var(--text-dim); padding: 7px 16px; border-radius: 8px; font-size: 11px;
            font-weight: 700; cursor: pointer; transition: all 0.2s;
            display: flex; align-items: center; gap: 6px;
        }
        .pp-close:hover { background: rgba(246,70,93,0.12); border-color: rgba(246,70,93,0.3); color: var(--red); }
        .pp-add-op-btn {
            display: flex; align-items: center; gap: 6px;
            padding: 8px 14px; border-radius: 8px; font-size: 11px; font-weight: 700;
            cursor: pointer; background: var(--green-dim); color: var(--green);
            border: 1px solid rgba(18,232,136,0.25); font-family: var(--font);
            transition: all 0.18s; letter-spacing: 0.3px;
        }
        .pp-add-op-btn:hover { background: rgba(18,232,136,0.18); transform: translateY(-1px); }

        /* ── SELETOR DE DIA / PERÍODO ── */
        .pp-day-selector { background: #0a0e18; border-bottom: 1px solid rgba(255,255,255,0.06); padding: 14px 20px 0; flex-shrink: 0; }
        .pp-days-row { display: flex; gap: 6px; margin-bottom: 10px; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; }
        .pp-days-row::-webkit-scrollbar { display: none; }
        .pp-day-btn {
            flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 4px;
            padding: 8px 14px; border-radius: 10px; border: 1px solid rgba(255,255,255,0.07);
            background: rgba(255,255,255,0.03); cursor: pointer; transition: all 0.18s; min-width: 56px; font-family: var(--font);
        }
        .pp-day-btn:hover { background: rgba(255,255,255,0.07); border-color: rgba(255,255,255,0.12); }
        .pp-day-btn.active { background: rgba(18,232,136,0.1); border-color: rgba(18,232,136,0.35); box-shadow: 0 0 16px rgba(18,232,136,0.08); }
        .pp-day-btn.today .pp-day-name { color: var(--green); }
        .pp-day-btn.active .pp-day-name { color: var(--green); font-weight: 800; }
        .pp-day-btn.active .pp-day-num { color: var(--text); }
        .pp-day-name { font-size: 9px; font-weight: 700; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.5px; }
        .pp-day-num { font-size: 16px; font-weight: 800; color: var(--text2); font-family: var(--mono); line-height: 1; }
        .pp-day-dot { width: 5px; height: 5px; border-radius: 50%; background: rgba(255,255,255,0.1); transition: background 0.2s; }
        .pp-day-btn.has-win .pp-day-dot { background: var(--green); box-shadow: 0 0 6px var(--green); }
        .pp-day-btn.has-loss .pp-day-dot { background: var(--red); }
        .pp-period-row {
            display: flex; gap: 5px; padding-bottom: 12px;
            overflow-x: auto; scrollbar-width: none;
        }
        .pp-period-row::-webkit-scrollbar { display: none; }
        .pp-period-btn { padding: 6px 14px; border-radius: 6px; font-size: 10px; font-weight: 700; color: var(--text-dim); background: transparent; border: 1px solid rgba(255,255,255,0.07); cursor: pointer; transition: all 0.18s; font-family: var(--font); }
        .pp-period-btn:hover { color: var(--text); background: rgba(255,255,255,0.05); }
        .pp-period-btn.active { color: var(--green); background: rgba(18,232,136,0.08); border-color: rgba(18,232,136,0.3); }

        .pp-body { flex: 1; overflow-y: auto; padding: 20px 24px; display: flex; flex-direction: column; gap: 16px; }
        .pp-body::-webkit-scrollbar { width: 4px; }
        .pp-body::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }

        /* KPI row */
        .pp-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
        .pp-kpi {
            background: #0d1117; border: 1px solid rgba(255,255,255,0.06);
            border-radius: 12px; padding: 16px 14px;
            display: flex; flex-direction: column; gap: 4px; position: relative; overflow: hidden;
        }
        .pp-kpi::before { content:''; position:absolute; bottom:0; left:0; right:0; height:2px; }
        .pp-kpi.green::before { background: var(--green); box-shadow: 0 0 10px var(--green-glow); }
        .pp-kpi.red::before   { background: var(--red); box-shadow: 0 0 10px var(--red-glow); }
        .pp-kpi.gold::before  { background: #f0b90b; }
        .pp-kpi.blue::before  { background: #4d9fff; }
        .kpi-label { font-size: 9px; color: var(--text2); text-transform: uppercase; letter-spacing: 1px; font-weight: 700; }
        .kpi-val   { font-size: 26px; font-weight: 900; font-variant-numeric: tabular-nums; letter-spacing: -1px; line-height: 1; }
        .pp-kpi.green .kpi-val { color: var(--green); }
        .pp-kpi.red   .kpi-val { color: var(--red); }
        .pp-kpi.gold  .kpi-val { color: #f0b90b; }
        .pp-kpi.blue  .kpi-val { color: #4d9fff; }
        .kpi-lbl { font-size: 9px; color: var(--text-dim); text-transform: uppercase; letter-spacing: 1px; margin-top: 4px; font-weight: 600; display: none; }
        .kpi-icon { display: none; }

        /* Cards section */
        .pp-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
        .pp-card {
            background: #0d1117; border: 1px solid rgba(255,255,255,0.06);
            border-radius: 12px; padding: 18px;
        }
        .pp-section-title {
            font-size: 9px; color: var(--text-dim); text-transform: uppercase;
            letter-spacing: 1.2px; font-weight: 700; margin-bottom: 14px;
            display: flex; align-items: center; gap: 6px;
        }
        .pp-section-title::before { content:''; display:inline-block; width:12px; height:2px; background:var(--green); border-radius:2px; }

        /* Table */
        .pp-table { width: 100%; border-collapse: collapse; font-size: 12px; }
        .pp-table th { padding: 8px 10px; text-align: left; font-size: 9px; color: var(--text2); text-transform: uppercase; letter-spacing: 0.8px; font-weight: 700; border-bottom: 1px solid rgba(255,255,255,0.06); }
        .pp-table td { padding: 10px 10px; border-bottom: 1px solid rgba(255,255,255,0.04); font-variant-numeric: tabular-nums; color: var(--text); }
        .pp-table tbody tr:last-child td { border-bottom: none; }
        .pp-table tbody tr:hover td { background: rgba(255,255,255,0.02); }
        .td-win { color: var(--green); font-weight: 700; }
        .td-loss { color: var(--red); font-weight: 700; }

        /* Pair bars */
        .pair-bar-row { margin-bottom: 10px; }
        .pair-bar-label { display: flex; justify-content: space-between; font-size: 10px; color: var(--text-dim); margin-bottom: 4px; font-weight: 600; }
        .pair-bar-track { height: 5px; background: rgba(255,255,255,0.05); border-radius: 3px; overflow: hidden; }
        .pair-bar-fill { height: 100%; border-radius: 3px; background: linear-gradient(90deg, var(--green-dark), var(--green)); transition: width 0.5s ease; }

        /* Metric rows */
        .metric-row { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; border-bottom: 1px solid rgba(255,255,255,0.04); }
        .metric-row:last-child { border-bottom: none; }
        .metric-label { font-size: 11px; color: var(--text-dim); }
        .metric-value { font-size: 12px; font-weight: 800; color: var(--text); font-variant-numeric: tabular-nums; }
        /* Mobile */
        /* ── ZOOM CONTROLS (desktop only) ── */
        /* zoom-trigger agora é o logo-icon MF — herda o estilo do logo-icon */
        .logo-icon[id="btn-zoom-trigger"] {
            cursor: pointer;
            transition: all 0.18s;
        }
        .logo-icon[id="btn-zoom-trigger"]:hover {
            box-shadow: 0 0 22px var(--green-glow), 0 0 0 2px rgba(18,232,136,0.4);
            transform: scale(1.08);
        }
        .logo-icon[id="btn-zoom-trigger"].active {
            box-shadow: 0 0 28px var(--green-glow), 0 0 0 2px var(--green);
            transform: scale(1.05);
        }
        .zoom-panel {
            display: none; position: absolute; top: calc(100% + 8px); left: 0;
            background: #111827; border: 1px solid rgba(255,255,255,0.1);
            border-radius: 10px; padding: 12px; z-index: 9999;
            box-shadow: 0 12px 40px rgba(0,0,0,0.8);
            min-width: 140px;
        }
        .zoom-panel.open { display: block; animation: modalFadeIn 0.18s ease-out; }
        .zoom-panel-title { font-size: 9px; color: #b0c8e0; text-transform: uppercase; letter-spacing: 1px; font-weight: 700; margin-bottom: 10px; }
        .zoom-panel-row { display: flex; align-items: center; gap: 6px; justify-content: center; margin-bottom: 10px; }
        .zoom-btn {
            width: 26px; height: 26px;
            background: rgba(255,255,255,0.06);
            border: 1px solid rgba(255,255,255,0.1);
            color: var(--text); border-radius: 6px;
            cursor: pointer; font-size: 16px; font-weight: 700;
            display: flex; align-items: center; justify-content: center;
            transition: all 0.15s; line-height: 1; user-select: none;
        }
        .zoom-btn:hover { background: rgba(14,203,129,0.15); border-color: rgba(14,203,129,0.4); color: var(--green); }
        .zoom-label {
            font-size: 12px; color: #dde8f4; font-weight: 800;
            text-align: center; min-width: 42px; font-variant-numeric: tabular-nums;
        }
        .zoom-presets { display: flex; gap: 4px; }
        .zoom-preset {
            flex: 1; padding: 5px 0; border-radius: 5px; font-size: 9px; font-weight: 700;
            cursor: pointer; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08);
            color: var(--text-dim); transition: all 0.15s;
        }
        .zoom-preset:hover { background: rgba(14,203,129,0.12); border-color: rgba(14,203,129,0.3); color: var(--green); }
        .zoom-preset.active { background: rgba(14,203,129,0.15); border-color: var(--green); color: var(--green); }
        @media (max-width: 768px) { .zoom-trigger, .zoom-panel { display: none !important; } }

        /* ── TABLET ── */
        @media (max-width: 1024px) and (min-width: 769px) {
            .dashboard-container { width: 170px; min-width: 170px; max-width: 170px; }
        }

        /* ── TABLET ── */
        @media (max-width: 1024px) and (min-width: 769px) {
            .dashboard-container { width: 170px; min-width: 170px; max-width: 170px; }
        }

        /* ══════════════════════════════════════
           MOBILE — 90% do tráfego
           Gráfico em cima, sidebar em baixo
        ══════════════════════════════════════ */
        @media (max-width: 768px) {
            /* ── MOBILE: dentro do #mflow-painel-root (já é fullscreen fixed) ──
               Apenas precisamos ajustar o layout interno para coluna.
               NÃO é necessário position:fixed no dashboard pois o root já cobre tudo. */

            /* App wrapper: coluna em vez de linha, altura total do root */
            .app-wrapper {
                flex-direction: column !important;
                height: 100vh !important;
                width: 100% !important;
            }

            /* Gráfico/Corretora: oculto no mobile */
            .exchange-container {
                display: none !important;
            }

            /* Dashboard: largura total, scroll vertical, sem borda lateral */
            .dashboard-container {
                width: 100% !important;
                min-width: 100% !important;
                max-width: 100% !important;
                height: 100% !important;
                overflow-y: auto !important;
                overflow-x: hidden !important;
                -webkit-overflow-scrolling: touch !important;
                display: block !important;
                padding: 14px 14px 30px !important;
                border-right: none !important;
                box-sizing: border-box !important;
                background: var(--bg-dark) !important;
            }

            /* Filhos empilham em bloco */
            .dashboard-container > * {
                display: block !important;
                width: 100% !important;
                box-sizing: border-box !important;
                margin-bottom: 14px !important;
            }

            /* Elementos que precisam de flex/grid internos */
            .dashboard-container > .system-header { display: flex !important; }
            .dashboard-container > .pair-selector  { display: grid !important; }
            .dashboard-container > .alert-box      { display: flex !important; }
            .dashboard-container > .audio-controls { display: flex !important; }
            .dashboard-container > #flux-card      { display: flex !important; }
            .dashboard-container > #pressure-card  { display: flex !important; }

            /* Header sidebar no mobile */
            .system-header {
                padding: 6px 0 10px;
                flex-direction: row !important;
                flex-wrap: wrap;
                justify-content: space-between;
                align-items: center;
            }
            .user-greeting { order: -1; width: 100%; text-align: left; }
            .logo { margin: 0; }
            .system-tag { width: auto; padding: 4px 10px; font-size: 8px; }

            /* Pares: 4 em linha */
            .pair-selector { grid-template-columns: repeat(4,1fr); gap: 6px; }
            .pair-btn { padding: 10px 0; font-size: 11px; }

            /* Price monitor mais compacto */
            .price-monitor { padding: 14px 12px; }
            .price-main { font-size: 24px; }
            .status { font-size: 9px; }

            /* Signal box maior para mobile */
            .alert-box { padding: 12px; font-size: 11px; }
            .alert-box .signal-text { font-size: 13px; letter-spacing: 2px; }

            /* Terminal mais alto no mobile */
            .telemetry { min-height: 50px; max-height: 50px; font-size: 9px; }

            /* Modo de análise em linha */
            .audio-controls { flex-direction: row; gap: 6px; }
            .audio-btn { padding: 9px 10px; font-size: 10px; }

            /* Cards mobile — garantir altura visível */
            div#flux-card,
            div#pressure-card {
                display: flex !important;
                flex-direction: column !important;
                width: 100% !important;
                height: auto !important;
                min-height: 85px !important;
                max-height: none !important;
                overflow: hidden !important;
            }

            /* Performance card mobile */
            .perf-summary { gap: 8px; }
            .ps-val { font-size: 18px; }

            /* Botões dentro do card PERFORMANCE: lado a lado no mobile */
            .perf-btns {
                flex-direction: row !important;
                gap: 8px !important;
            }
            .btn-perf {
                flex: 1 !important;
                padding: 11px 8px !important;
                font-size: 11px !important;
            }


            /* ── PAINEL PERFORMANCE fullscreen no mobile ── */
            /* Garantir display:none enquanto não tiver .open */
            #perf-panel { display: none !important; overflow-y: auto; -webkit-overflow-scrolling: touch; }
            #perf-panel.open { display: flex !important; }
            /* Modais: garantir hidden por padrão */
            .mf-modal-bg { display: none !important; }
            .mf-modal-bg.open { display: flex !important; }
            /* License modal: sempre no topo */
            .modal-overlay { z-index: 99999 !important; }
            .pp-header { padding: 14px 16px; }
            .pp-header h1 { font-size: 13px; }
            .pp-day-selector { padding: 12px 14px 0; }
            .pp-days-row { gap: 8px; }
            .pp-day-btn { min-width: 52px; padding: 8px 10px; }
            .pp-day-num { font-size: 18px; }
            .pp-body { padding: 14px; gap: 14px; }
            .pp-kpis { grid-template-columns: repeat(2,1fr); gap: 8px; }
            .pp-kpi { padding: 12px; border-radius: 10px; }
            .kpi-val { font-size: 22px; }
            .pp-grid2 { grid-template-columns: 1fr; }
            .pp-table { font-size: 11px; }
            .pp-table th, .pp-table td { padding: 8px 8px; }

            /* ── Modal registrar operação ── */
            .mf-modal-bg {
                display: none !important;
                padding: 20px !important;
                align-items: center !important;
                justify-content: center !important;
                position: absolute !important;
                top: 0 !important; left: 0 !important;
                width: 100% !important; height: 100% !important;
                z-index: 99999 !important;
            }
            .mf-modal-bg.open {
                display: flex !important;
            }
            .mf-modal {
                border-radius: 16px; max-width: 100%; width: 100%;
                padding: 24px 20px 28px;
            }

            /* ── Boot e licença ── */
            .boot-progress-wrap, .boot-logs { width: 90vw; }
            .boot-logo-icon { width: 60px; height: 60px; font-size: 22px; }
            .boot-logo-text { font-size: 26px; }
            #boot-name-display { font-size: 18px; }
            .modal-box { padding: 32px 20px; max-width: 95vw; border-radius: 20px; }
            .license-input { font-size: 22px; letter-spacing: 6px; padding: 16px; }

            /* ── Tela MFLOW ── */
            .mflow-ready-logo { font-size: 20vw !important; letter-spacing: -2px; }
            .mflow-stats-row { gap: 16px; margin-top: 28px; }
            .mflow-footer-bar { gap: 8px; font-size: 8px; flex-wrap: wrap; justify-content: center; }
            .mflow-top-badge { font-size: 7px; letter-spacing: 1.5px; padding: 5px 12px; }

            /* Zoom: desabilitado no mobile */
            .zoom-panel { display: none !important; }
            .logo-icon[id="btn-zoom-trigger"] { cursor: default !important; pointer-events: none; }
        }

        /* ══ TOAST DE CONFIRMAÇÃO ══════════════════════════════ */
        .mflow-toast {
            position: absolute;
            bottom: 28px; left: 50%; transform: translateX(-50%) translateY(20px);
            background: #111928; border: 1px solid var(--border2);
            color: var(--text); font-size: 13px; font-weight: 600;
            padding: 12px 22px; border-radius: 40px;
            white-space: nowrap; z-index: 99999;
            opacity: 0; transition: opacity 0.25s, transform 0.25s;
            pointer-events: none;
            box-shadow: 0 8px 32px rgba(0,0,0,0.6);
        }
        .mflow-toast.visible {
            opacity: 1; transform: translateX(-50%) translateY(0);
        }
        .mflow-toast-success { border-color: rgba(18,232,136,0.4); color: var(--green); }
        .mflow-toast-error   { border-color: rgba(255,61,90,0.4);   color: var(--red); }