/* ==========================================================================
   LAZARUS PARTNERS — folha de estilo
   Extraída do index.html para virar asset cacheável: o HTML é servido com
   no-cache (precisa revalidar sempre), enquanto .css/.js ganham os 30 dias do
   _STATIC_CACHE. O index.html referencia este arquivo com ?v=<hash>, então um
   deploy invalida o cache na hora — ver serve_index() em app.py.
   ========================================================================== */
        /* ==========================================
           DESIGN SYSTEM — LAZARUS PARTNERS
        ========================================== */
        :root {
            --bg-body:    #f4f4f9;
            --text-main:  #333333;
            --primary:    #1a1a1a;
            --accent:     #555555;
            --accent-dim: rgba(85,85,85,0.10);
            --card-bg:    #ffffff;

            --font-serif: 'Cormorant Garamond', Georgia, serif;
            --font-sans:  'Inter', 'Segoe UI', Helvetica, Arial, sans-serif;
        }

        html { scroll-behavior: smooth; }
        .content-section, #contact, #partners-section, #team-section { scroll-margin-top: 90px; }

        body {
            font-family: var(--font-sans);
            background-color: var(--bg-body);
            color: var(--text-main);
            margin: 0;
            line-height: 1.6;
        }
        .hidden { display: none !important; }

        /* ── HEADER ── */
        header {
            background: rgba(255,255,255,0.96);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            padding: 0 2.5rem;
            height: 72px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-bottom: 1px solid rgba(0,0,0,0.07);
            position: sticky;
            top: 0;
            z-index: 1000;
        }
        .logo-img { height: 52px; width: auto; display: block; }

        nav { display: flex; align-items: center; gap: 8px; }
        nav a {
            text-decoration: none;
            color: #555;
            cursor: pointer;
            font-weight: 500;
            font-size: 0.82rem;
            text-transform: uppercase;
            letter-spacing: 0.08em;
            padding: 6px 14px;
            border-radius: 3px;
            transition: color 0.2s, background 0.2s;
        }
        nav a:hover { color: var(--primary); background: #f0f0f3; }
        .btn-access {
            background: var(--primary) !important;
            color: #fff !important;
            padding: 8px 20px !important;
            border-radius: 3px;
            font-weight: 600 !important;
            letter-spacing: 0.06em;
            transition: background 0.2s !important;
        }
        .btn-access:hover { background: #333 !important; color: #fff !important; }

        #nav-private { gap: 20px; }
        #user-name { font-weight: 700; color: var(--primary); font-size: 0.9rem; }

        /* ── TOAST ── */
        #toast {
            visibility: hidden; min-width: 250px;
            background: var(--primary); color: #fff;
            text-align: center; border-radius: 4px; padding: 16px;
            position: fixed; z-index: 9999; left: 50%; bottom: 30px;
            transform: translateX(-50%); font-size: 1rem;
            box-shadow: 0 4px 15px rgba(0,0,0,0.2);
            opacity: 0; transition: opacity 0.3s, bottom 0.3s;
        }
        #toast.show { visibility: visible; opacity: 1; bottom: 50px; }

        /* ── MOBILE MENU ── */
        .mobile-menu-btn { display: none; font-size: 1.8rem; cursor: pointer; color: var(--primary); background: none; border: none; }

        /* ==========================================
           LANDING PAGE — NOVA
        ========================================== */

        /* Override accent to warm gold on landing page only */
        #landing-page {
            --accent:     #555555;
            --accent-dim: rgba(85,85,85,0.10);
            text-align: left;
        }

        /* HERO */
        .hero-section {
            background: var(--primary);
            min-height: 92vh;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            text-align: center;
            padding: 5rem 2rem 4rem;
            position: relative;
            overflow: hidden;
        }
        /* Subtle texture overlay */
        .hero-section::before {
            content: '';
            position: absolute;
            inset: 0;
            background-image:
                radial-gradient(ellipse 80% 50% at 50% 110%, rgba(46,170,220,0.08) 0%, transparent 70%),
                repeating-linear-gradient(
                    0deg,
                    transparent,
                    transparent 59px,
                    rgba(255,255,255,0.015) 59px,
                    rgba(255,255,255,0.015) 60px
                ),
                repeating-linear-gradient(
                    90deg,
                    transparent,
                    transparent 59px,
                    rgba(255,255,255,0.015) 59px,
                    rgba(255,255,255,0.015) 60px
                );
            pointer-events: none;
        }
        .hero-content { position: relative; z-index: 1; max-width: 680px; }
        .logo-hero { height: 130px; width: auto; margin-bottom: 2.5rem; filter: brightness(0) invert(1); opacity: 0.95; }
        .hero-tagline {
            font-family: var(--font-serif);
            font-size: clamp(1.5rem, 3vw, 2.1rem);
            font-weight: 300;
            font-style: italic;
            color: rgba(255,255,255,0.75);
            margin: 0 0 2.5rem;
            letter-spacing: 0.01em;
            line-height: 1.4;
        }
        .hero-divider {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 16px;
            color: rgba(255,255,255,0.3);
            margin-bottom: 2.5rem;
        }
        .hero-divider span.line {
            height: 1px;
            width: 60px;
            background: rgba(255,255,255,0.2);
            display: inline-block;
        }
        .hero-divider a {
            font-size: 0.78rem;
            color: rgba(255,255,255,0.45);
            text-decoration: none;
            letter-spacing: 0.12em;
            text-transform: uppercase;
            transition: color 0.2s;
        }
        .hero-divider a:hover { color: var(--accent); }
        .hero-scroll-cue {
            position: absolute;
            bottom: 2.5rem;
            left: 50%;
            transform: translateX(-50%);
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 8px;
            opacity: 0.3;
            animation: scrollBounce 2s infinite;
        }
        .hero-scroll-cue span {
            font-size: 0.7rem;
            color: #fff;
            letter-spacing: 0.12em;
            text-transform: uppercase;
        }
        .hero-scroll-cue svg { color: #fff; }
        @keyframes scrollBounce {
            0%, 100% { transform: translateX(-50%) translateY(0); }
            50% { transform: translateX(-50%) translateY(6px); }
        }

        /* SECTION WRAPPER */
        .lp-section {
            max-width: 1100px;
            margin: 0 auto;
            padding: 6rem 2rem;
        }
        .lp-section-full {
            width: 100%;
            padding: 6rem 2rem;
        }

        /* SECTION LABEL */
        .section-label {
            font-size: 0.72rem;
            font-weight: 600;
            letter-spacing: 0.18em;
            text-transform: uppercase;
            color: #999;
            margin-bottom: 1rem;
            display: block;
        }
        .section-title {
            font-family: var(--font-serif);
            font-size: clamp(2rem, 4vw, 3rem);
            font-weight: 400;
            color: var(--primary);
            line-height: 1.2;
            margin: 0 0 2rem;
        }

        /* ABOUT US */
        .about-grid {
            display: block;
        }
        .about-text p {
            font-size: 1rem;
            color: #444;
            line-height: 1.85;
            margin-bottom: 1.4em;
            text-align: justify;
            text-wrap: pretty;
        }
        .about-visual {
            display: flex;
            flex-direction: column;
            gap: 1.5rem;
        }
        .about-stat {
            padding: 1.8rem 2rem;
            border: 1px solid rgba(0,0,0,0.08);
            border-radius: 4px;
            background: #fff;
        }
        .about-stat-number {
            font-family: var(--font-serif);
            font-size: 2.8rem;
            font-weight: 500;
            color: var(--primary);
            line-height: 1;
            margin-bottom: 0.4rem;
        }
        .about-stat-label {
            font-size: 0.8rem;
            color: #888;
            letter-spacing: 0.08em;
            text-transform: uppercase;
        }
        .about-accent-bar {
            height: 2px;
            width: 32px;
            background: #ccc;
            margin-bottom: 1.5rem;
            border-radius: 2px;
        }

        /* PHILOSOPHY STRIP */
        .philosophy-strip {
            background: var(--primary);
            padding: 5rem 2rem;
        }
        .philosophy-inner {
            max-width: 900px;
            margin: 0 auto;
            text-align: center;
        }
        .philosophy-quote {
            font-family: var(--font-serif);
            font-size: clamp(1.5rem, 3vw, 2.2rem);
            font-weight: 300;
            font-style: italic;
            color: rgba(255,255,255,0.88);
            line-height: 1.5;
            margin: 0 0 1.5rem;
        }
        .philosophy-quote em {
            color: var(--accent);
            font-style: normal;
        }
        .philosophy-attr {
            font-size: 0.8rem;
            letter-spacing: 0.12em;
            text-transform: uppercase;
            color: rgba(255,255,255,0.35);
        }

        /* PERFORMANCE SECTION */
        .performance-bg {
            background: #f9f9fc;
        }
        .perf-subtitle {
            color: #888;
            font-size: 0.9rem;
            margin-bottom: 2.5rem;
            margin-top: -1rem;
        }
        .perf-table-wrapper { overflow-x: auto; margin-bottom: 2rem; }
        table.perf-table {
            width: 100%;
            border-collapse: collapse;
            font-size: 0.875rem;
            text-align: center;
            background: white;
            border-radius: 6px;
            overflow: hidden;
            box-shadow: 0 1px 4px rgba(0,0,0,0.06), 0 4px 16px rgba(0,0,0,0.04);
        }
        table.perf-table th {
            background: var(--primary);
            color: rgba(255,255,255,0.85);
            padding: 13px 10px;
            font-weight: 500;
            font-size: 0.75rem;
            letter-spacing: 0.06em;
            text-transform: uppercase;
        }
        table.perf-table td {
            padding: 11px 10px;
            border-bottom: 1px solid #f0f0f4;
            color: #555;
        }
        table.perf-table tr:last-child td { border-bottom: none; }
        table.perf-table tr:hover td { background: #f7f8fc; }
        .perf-label {
            font-weight: 600;
            text-align: left;
            padding-left: 16px !important;
            color: var(--primary);
            white-space: nowrap;
        }
        .perf-pos { color: #059669; font-weight: 600; }
        .perf-neg { color: #e11d48; font-weight: 600; }
        .perf-acc {
            background: rgba(26,26,26,0.04) !important;
            font-weight: 700;
            color: var(--primary) !important;
        }
        .perf-currency-tag {
            display: inline-block;
            font-size: 0.7rem;
            font-weight: 600;
            letter-spacing: 0.1em;
            text-transform: uppercase;
            color: var(--accent);
            background: var(--accent-dim);
            padding: 3px 10px;
            border-radius: 20px;
            margin-bottom: 1rem;
        }

        /* COMPARATIVE CHART */
        .comp-chart-section {
            background: #fff;
            border-radius: 8px;
            padding: 28px 28px 22px;
            margin-bottom: 2.5rem;
            box-shadow: 0 1px 4px rgba(0,0,0,0.06), 0 4px 20px rgba(0,0,0,0.04);
        }
        .comp-chart-header {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            flex-wrap: wrap;
            gap: 16px;
            margin-bottom: 22px;
        }
        .comp-chart-title {
            font-size: 0.72rem;
            font-weight: 700;
            letter-spacing: 0.1em;
            text-transform: uppercase;
            color: #aaa;
            margin-bottom: 2px;
        }
        .comp-chart-note {
            font-size: 0.78rem;
            color: #bbb;
        }
        .comp-toggle-group {
            display: flex;
            gap: 8px;
            align-items: center;
        }
        .comp-toggle {
            appearance: none;
            -webkit-appearance: none;
            border: 1.5px solid #e0e0e6;
            border-radius: 8px;
            padding: 8px 16px;
            font-size: 0.8rem;
            font-weight: 700;
            color: #aaa;
            background: transparent;
            cursor: pointer;
            letter-spacing: 0.02em;
            transition: all 0.2s;
            white-space: nowrap;
            font-family: inherit;
        }
        .comp-toggle:hover { border-color: #bbb; color: #666; }
        .comp-toggle.active {
            background: var(--primary);
            border-color: var(--primary);
            color: #fff;
        }
        .comp-range-group {
            display: flex;
            gap: 4px;
            margin-bottom: 14px;
        }
        .comp-range-btn {
            appearance: none;
            -webkit-appearance: none;
            border: none;
            border-radius: 5px;
            padding: 4px 11px;
            font-size: 0.7rem;
            font-weight: 700;
            letter-spacing: 0.05em;
            color: #bbb;
            background: #f3f4f6;
            cursor: pointer;
            font-family: inherit;
            transition: all 0.18s;
        }
        .comp-range-btn:hover { color: #555; background: #e8e8ee; }
        .comp-range-btn.active { background: var(--primary); color: #fff; }
        .tperf-pair-btn { appearance: none; -webkit-appearance: none; border: 1px solid rgba(0,0,0,0.12); border-radius: 4px; padding: 3px 9px; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.04em; color: #888; background: transparent; cursor: pointer; font-family: inherit; transition: all 0.15s; }
        .tperf-pair-btn:hover { color: #333; border-color: rgba(0,0,0,0.25); }
        .tperf-pair-btn.active { background: #374151; color: #fff; border-color: #374151; }
        /* Segmented control (risk-window selector) */
        .rk-seg { display: inline-flex; gap: 2px; padding: 3px; background: rgba(0,0,0,0.045); border: 1px solid rgba(0,0,0,0.07); border-radius: 9px; }
        .rk-seg .tperf-pair-btn { border: none; border-radius: 6px; padding: 4px 12px; color: var(--priv-text-3); background: transparent; }
        .rk-seg .tperf-pair-btn:hover { color: #111; background: rgba(0,0,0,0.05); border-color: transparent; }
        .rk-seg .tperf-pair-btn.active { background: #fff; color: #111; box-shadow: 0 1px 2px rgba(0,0,0,0.14); }
        /* Growth da aba Trader: moeda + janela + caixa de comparação */
        .tg-controls { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
        .tg-seg { display: inline-flex; gap: 4px; }
        .tg-canvas { position: relative; height: 360px; }
        .tg-compare { position: relative; }
        .tg-compare-menu {
            display: none; position: absolute; right: 0; top: calc(100% + 6px); z-index: 40;
            width: 320px; max-height: 380px; overflow-y: auto; padding: 6px;
            background: #fff; border: 1px solid rgba(0,0,0,0.1); border-radius: 10px;
            box-shadow: 0 8px 24px rgba(0,0,0,0.14);
        }
        .tg-compare.open .tg-compare-menu { display: block; }
        .tg-compare-grupo {
            padding: 8px 10px 4px; font-size: 0.62rem; font-weight: 700;
            letter-spacing: 0.08em; text-transform: uppercase; color: var(--priv-text-3);
        }
        .tg-compare-grupo + .tg-compare-grupo,
        .tg-compare-item + .tg-compare-grupo { border-top: 1px solid rgba(0,0,0,0.07); margin-top: 4px; }
        .tg-compare-item {
            display: flex; align-items: center; gap: 9px; padding: 7px 10px;
            border-radius: 7px; cursor: pointer; font-size: 0.8rem; color: var(--priv-text-2);
        }
        .tg-compare-item:hover { background: var(--priv-bg); }
        /* A regra global `input { width:100% }` estica o checkbox p/ a linha
           inteira e empurra nome e traço p/ fora do menu — daí o tamanho fixo. */
        .tg-compare-item input[type="checkbox"] {
            width: 15px; height: 15px; flex: none; margin: 0; padding: 0;
            cursor: pointer; accent-color: var(--primary);
        }
        .tg-compare-item i {
            width: 16px; height: 0; flex-shrink: 0; font-style: normal;
            border-top: 3px solid currentColor; border-radius: 2px;
        }
        /* Nome numa linha só, com reticências: denominação de fundo é longa e,
           sem isto, cada rótulo quebrava caractere a caractere. */
        .tg-compare-nome {
            flex: 1; min-width: 0; overflow: hidden;
            text-overflow: ellipsis; white-space: nowrap;
        }
        .tg-compare-sub {
            flex-shrink: 0; font-size: 0.68rem; color: var(--priv-text-3);
            font-variant-numeric: tabular-nums;
        }
        .tg-compare-vazio { padding: 10px; font-size: 0.75rem; color: var(--priv-text-3); }
        .comp-chart-wrap { position: relative; height: 280px; }
        .comp-chart-legend {
            display: flex;
            gap: 20px;
            margin-top: 14px;
            flex-wrap: wrap;
        }
        .comp-legend-item {
            display: flex;
            align-items: center;
            gap: 7px;
            font-size: 0.78rem;
            color: #666;
            font-weight: 600;
        }
        .comp-legend-line {
            width: 22px;
            height: 2.5px;
            border-radius: 2px;
            flex-shrink: 0;
        }
        .comp-legend-line.dashed {
            background: repeating-linear-gradient(to right, #b0b0b8 0, #b0b0b8 5px, transparent 5px, transparent 9px);
        }

        /* TEAM / PARTNERS */
        .team-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
            gap: 2rem;
            margin-top: 3rem;
        }
        .team-card {
            background: #fff;
            border: 1px solid rgba(0,0,0,0.07);
            border-radius: 6px;
            overflow: hidden;
            transition: box-shadow 0.3s, transform 0.3s;
        }
        .team-card:hover {
            box-shadow: 0 8px 32px rgba(0,0,0,0.1);
            transform: translateY(-3px);
        }
        .team-photo-wrap {
            width: 100%;
            aspect-ratio: 1;
            overflow: hidden;
            background: #e8e8ee;
        }
        .team-photo-wrap img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: top;
            filter: grayscale(15%);
            transition: filter 0.4s;
        }
        .team-card:hover .team-photo-wrap img { filter: grayscale(0%); }
        .team-photo-placeholder {
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            background: #e8e8ee;
            color: #bbb;
            font-family: var(--font-serif);
            font-size: 3rem;
            font-weight: 300;
        }
        .team-info {
            padding: 1.4rem 1.6rem;
            border-top: 2px solid var(--accent);
        }
        .team-name {
            font-family: var(--font-serif);
            font-size: 1.4rem;
            font-weight: 500;
            color: var(--primary);
            margin: 0 0 0.25rem;
            line-height: 1.2;
        }
        .team-role {
            font-size: 0.78rem;
            font-weight: 600;
            letter-spacing: 0.1em;
            text-transform: uppercase;
            color: var(--accent);
            margin-bottom: 0.9rem;
        }
        .team-bio {
            font-size: 0.88rem;
            color: #666;
            line-height: 1.7;
            text-align: justify;
        }

        /* TEAM secondary (smaller cards) */
        .team-secondary-grid {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 2rem;
            margin-top: 2rem;
        }
        .team-secondary-card {
            /* Match one partner-card width (1 of 3 per row) so management photos
               are never larger than the partners' photos */
            width: calc((100% - 4rem) / 3);
            box-sizing: border-box;
            background: #fff;
            border: 1px solid rgba(0,0,0,0.07);
            border-radius: 6px;
            overflow: hidden;
            text-align: center;
            padding-bottom: 1.4rem;
        }
        .team-secondary-photo {
            width: 100%;
            aspect-ratio: 1;
            overflow: hidden;
            background: #e8e8ee;
        }
        .team-secondary-photo img {
            width: 100%; height: 100%;
            object-fit: cover;
            object-position: top;
            filter: grayscale(15%);
        }
        .team-secondary-card h3 {
            font-family: var(--font-serif);
            font-size: 1.2rem;
            font-weight: 500;
            color: var(--primary);
            margin: 1rem 0 0.2rem;
        }
        .team-secondary-card p {
            font-size: 0.75rem;
            font-weight: 600;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            color: var(--accent);
            margin: 0;
            padding: 0 1rem;
        }

        /* FOOTER */
        .footer-section {
            background: var(--primary);
            padding: 5rem 2rem 3rem;
        }
        .footer-inner {
            max-width: 1000px;
            margin: 0 auto;
        }
        .footer-top {
            display: grid;
            grid-template-columns: 2fr 1fr 1fr;
            gap: 4rem;
            padding-bottom: 3rem;
            border-bottom: 1px solid rgba(255,255,255,0.08);
            margin-bottom: 3rem;
        }
        .footer-brand .footer-logo {
            height: 42px;
            opacity: 0.85;
            filter: brightness(0) invert(1);
            margin-bottom: 1.2rem;
            display: block;
        }
        .footer-brand p {
            color: rgba(255,255,255,0.4);
            font-size: 0.87rem;
            line-height: 1.7;
            max-width: 300px;
            font-style: italic;
            font-family: var(--font-serif);
        }
        .footer-col h4 {
            color: rgba(255,255,255,0.5);
            font-size: 0.7rem;
            font-weight: 600;
            letter-spacing: 0.15em;
            text-transform: uppercase;
            margin: 0 0 1.2rem;
        }
        .footer-col p {
            color: rgba(255,255,255,0.7);
            font-size: 0.9rem;
            margin: 0 0 0.5rem;
            line-height: 1.6;
        }
        .footer-col a {
            color: rgba(255,255,255,0.55);
            text-decoration: none;
            font-size: 0.88rem;
            transition: color 0.2s;
        }
        .footer-col a:hover { color: var(--accent); }
        .footer-bottom {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .copyright {
            color: rgba(255,255,255,0.25);
            font-size: 0.78rem;
        }
        .footer-patreon {
            font-size: 0.78rem;
            color: rgba(255,255,255,0.3);
            text-decoration: none;
            letter-spacing: 0.06em;
            transition: color 0.2s;
        }
        .footer-patreon:hover { color: var(--accent); }

        /* ==========================================
           DASHBOARD STYLES (preservados)
        ========================================== */
        .container { max-width: 1280px; margin: 0 auto; padding: 1.5rem; }
        .card { background: var(--card-bg); padding: 24px; border-radius: 8px; box-shadow: 0 1px 4px rgba(0,0,0,0.05), 0 4px 16px rgba(0,0,0,0.03); margin-bottom: 20px; border-top: 3px solid var(--accent); text-align: left; }
        .card h3 { font-size: 0.95rem; font-weight: 700; color: var(--primary); margin-bottom: 16px; letter-spacing: 0.02em; }

        .page-modal-body { background-color: #f7f7f9; align-items: center; padding-top: 20px; }
        .editor-sheet { background: white; width: 100%; max-width: 750px; min-height: 80vh; padding: 50px 60px; box-shadow: 0 4px 15px rgba(0,0,0,0.05); margin-bottom: 40px; border-radius: 2px; }
        .editor-content, #page-content-area { font-family: 'Georgia', 'Cambria', serif; font-size: 1.1rem; line-height: 1.8; color: #2c3e50; outline: none; }
        #page-content-area a, .editor-content a { color: var(--accent); text-decoration: none; font-weight: 600; border-bottom: 1px dotted var(--accent); transition: all 0.2s ease; padding-bottom: 1px; }
        #page-content-area a:hover, .editor-content a:hover { background-color: rgba(46,170,220,0.1); border-bottom-style: solid; color: #1a6ca0; }
        #page-content-area p, .editor-content p { text-align: justify; margin-bottom: 1.2em; }
        .editor-content h1, #page-content-area h1 { font-family: var(--font-sans); font-size: 2.2rem; margin-top: 0; color: #1a1a1a; letter-spacing: -0.5px; }
        .editor-content h2, #page-content-area h2 { font-family: var(--font-sans); font-size: 1.6rem; margin-top: 1.5rem; color: #333; border-bottom: 1px solid #eee; padding-bottom: 5px; }
        .editor-content blockquote, #page-content-area blockquote { border-left: 4px solid #2eaadc; margin: 1.5em 0; padding-left: 20px; font-style: italic; color: #555; background: #f9f9f9; padding: 15px; border-radius: 0 4px 4px 0; }
        .editor-content ul, #page-content-area ul { padding-left: 20px; }
        .editor-content li, #page-content-area li { margin-bottom: 5px; }

        .hub-item { display: flex; justify-content: space-between; align-items: center; padding: 12px 15px; border: 1px solid #eee; border-radius: 6px; margin-bottom: 8px; background: #fff; transition: transform 0.2s, box-shadow 0.2s; }
        .hub-item:hover { transform: translateY(-2px); box-shadow: 0 4px 8px rgba(0,0,0,0.05); border-color: var(--accent); }
        .hub-icon { font-size: 1.2rem; margin-right: 12px; }
        .hub-text { font-weight: 600; color: #444; font-size: 0.95rem; }

        .perf-table-wrapper { overflow-x: auto; margin-bottom: 40px; }

        @keyframes fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
        .chart-card, .partner-card { opacity: 0; animation: fadeInUp 0.8s ease-out forwards; }
        .chart-card { background: white; border-radius: 8px; padding: 20px; box-shadow: 0 1px 4px rgba(0,0,0,0.05); }
        .chart-card:nth-child(1) { animation-delay: 0.1s; } .chart-card:nth-child(2) { animation-delay: 0.2s; }
        .chart-card:nth-child(3) { animation-delay: 0.3s; } .chart-card:nth-child(4) { animation-delay: 0.4s; }

        .modal { position: fixed; inset: 0; background: rgba(0,0,0,0.6); display: flex; justify-content: center; align-items: center; z-index: 2000; backdrop-filter: blur(2px); }
        .modal-box { background: white; padding: 2.5rem; width: 450px; text-align: left; border-radius: 8px; box-shadow: 0 20px 50px rgba(0,0,0,0.2); max-height: 90vh; overflow-y: auto; }
        label { display: block; margin-bottom: 5px; font-size: 0.8rem; color: #666; font-weight: 500; text-align: left; width: 100%; }
        input, select, textarea { width: 100%; padding: 12px; margin: 0 0 15px 0; border: 1px solid #ccc; border-radius: 4px; font-size: 1rem; box-sizing: border-box; font-family: inherit; }
        /* Toggle pill (WaterMark ajuste manual) */
.wm-toggle { display:flex; align-items:center; gap:8px; cursor:pointer; user-select:none; }
.wm-toggle input[type=checkbox] { display:none; }
.wm-toggle-track { width:34px; height:18px; background:#d1d5db; border-radius:9px; position:relative; transition:background .2s; flex-shrink:0; }
.wm-toggle-thumb { width:14px; height:14px; background:#fff; border-radius:50%; position:absolute; top:2px; left:2px; transition:left .2s; box-shadow:0 1px 3px rgba(0,0,0,.25); }
.wm-toggle input[type=checkbox]:checked + .wm-toggle-track { background:#f59e0b; }
.wm-toggle input[type=checkbox]:checked + .wm-toggle-track .wm-toggle-thumb { left:18px; }
.wm-toggle-label { font-size:0.78rem; font-weight:500; color:#6b7280; }
/* Perfil pill-checkboxes (user modal) */
.perfil-pill { display:inline-flex !important; margin:0 !important; width:auto !important; cursor:pointer; }
.perfil-pill input[type=checkbox] { display:none; }
.perfil-pill span { display:inline-block; padding:5px 15px; border-radius:20px; border:1.5px solid #e2e5ea; font-size:0.8rem; font-weight:500; cursor:pointer; transition:all .15s; color:#555; background:#f9fafb; user-select:none; }
.perfil-pill input:checked + span { background:#111; color:#fff; border-color:#111; }
.perfil-pill:hover span { border-color:#9ca3af; }
/* Password field with eye toggle */
.pw-field { position:relative; }
.pw-field input { padding-right:40px !important; margin:0 !important; }
.pw-eye { position:absolute; right:10px; top:50%; transform:translateY(-50%); background:none; border:none; cursor:pointer; padding:2px; color:#9ca3af; width:auto; line-height:1; display:flex; align-items:center; }
.pw-eye:hover { color:#555; }
button.action-btn { width: 100%; padding: 12px; background: var(--primary); color: white; border: none; border-radius: 4px; font-weight: bold; cursor: pointer; }
        button.action-btn:disabled { background-color: #999; cursor: not-allowed; }
        button.cancel-btn { background: transparent; border: none; color: #888; cursor: pointer; margin-right: 15px; font-weight: 600; }
        input:disabled, select:disabled { background-color: #f5f5f5; color: #777; cursor: not-allowed; border-color: #eee; }

        #preview-modal { z-index: 3000; }
        .admin-filter-btn { padding:5px 16px; border-radius:20px; border:1px solid #d1d5db; background:#fff; cursor:pointer; font-size:0.82rem; font-weight:600; color:#6b7280; transition:all .15s; }
        .admin-filter-btn.active { background:var(--primary); color:#fff; border-color:var(--primary); }
        .billing-label { font-size:0.78rem; font-weight:700; color:#666; display:block; margin-bottom:5px; text-transform:uppercase; letter-spacing:0.05em; }
        .billing-input { width:100%; padding:9px 12px; border:1px solid #d8dce2; border-radius:6px; font-size:0.93rem; box-sizing:border-box; background:#fff; color:#222; transition:border-color .15s; }
        .billing-input:focus { outline:none; border-color:var(--primary); }
        select.billing-input { cursor:pointer; }
        #preview-box { width: 85%; height: 85%; padding: 0; overflow: hidden; display: flex; flex-direction: column; }
        #preview-header { padding: 15px 20px; background: #f8f8f8; border-bottom: 1px solid #ddd; display: flex; justify-content: space-between; align-items: center; }
        #preview-title { font-weight: bold; color: #333; font-size: 1.1rem; }
        #preview-iframe { flex-grow: 1; width: 100%; border: none; background: #eee; }

        .toggle-container { display: flex; align-items: center; gap: 15px; padding: 15px; background: #f8f9fa; border-radius: 8px; border: 1px solid #e9ecef; }
        .toggle-label { font-weight: 600; color: #333; }
        .ios-switch { position: relative; display: inline-block; width: 50px; height: 28px; }
        .ios-switch input { opacity: 0; width: 0; height: 0; }
        .ios-switch .slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; transition: .4s; border-radius: 34px; }
        .ios-switch .slider:before { position: absolute; content: ""; height: 20px; width: 20px; left: 4px; bottom: 4px; background-color: white; transition: .4s; border-radius: 50%; box-shadow: 0 2px 4px rgba(0,0,0,0.2); }
        .ios-switch input:checked + .slider { background-color: #34C759; }
        .ios-switch input:checked + .slider:before { transform: translateX(22px); }
        .status-text { font-size: 0.9em; font-weight: 600; }

        .home-grid { display: grid; grid-template-columns: 320px 1fr; gap: 30px; align-items: start; }
        .notion-col { display: flex; flex-direction: column; gap: 16px; }

        /* KPI CARDS */
        .kpi-card { background: white; border-radius: 8px; padding: 20px 22px; box-shadow: 0 1px 4px rgba(0,0,0,0.05); border-left: 3px solid var(--accent); }
        .kpi-label { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: #999; margin-bottom: 6px; }
        .kpi-value { font-size: 1.8rem; font-weight: 800; color: var(--primary); line-height: 1; }
        .kpi-sub { font-size: 0.78rem; color: #888; margin-top: 4px; }
        .kpi-pos { color: #059669 !important; }
        .kpi-neg { color: #e11d48 !important; }

        /* SALDO CARD */
        .saldo-card { background: white; border-left: 5px solid var(--accent); border-radius: 8px; padding: 24px 28px; display: flex; align-items: center; gap: 40px; flex-wrap: wrap; margin-bottom: 20px; box-shadow: 0 1px 4px rgba(0,0,0,0.05); }
        .saldo-big { font-size: 3rem; font-weight: 800; color: var(--primary); line-height: 1; }
        .saldo-label { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: #999; margin-bottom: 6px; }
        .divider-v { width: 1px; height: 50px; background: #eee; }

        /* GRID HELPERS */
        .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
        .grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 20px; margin-bottom: 20px; }
        .grid-4 { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 20px; margin-bottom: 20px; }
        .notion-card { background: white; border: 1px solid #eee; border-radius: 8px; padding: 20px; box-shadow: 0 1px 4px rgba(0,0,0,0.03); transition: all 0.15s; text-align: left; height: auto; }
        .notion-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.06); }
        .notion-title { font-size: 0.95rem; font-weight: 700; color: #333; margin-bottom: 12px; display: flex; align-items: center; gap: 8px; }
        .notion-link { display: flex; align-items: center; padding: 8px 6px; border-bottom: 1px solid #f5f5f5; color: #444; font-size: 0.88rem; cursor: pointer; transition: all 0.15s; border-radius: 4px; gap: 8px; }
        .notion-link:hover { color: var(--accent); background: #f8f9fc; padding-left: 10px; }
        .notion-icon { margin-right: 10px; font-size: 1.1rem; width: 20px; text-align: center; }
        #page-content-area { min-height: 150px; white-space: pre-wrap; margin-bottom: 20px; line-height: 1.8; color: #2c2c2c; text-align: justify; font-size: 1.05rem; }

        .goal-bar { height: 6px; background: #eee; border-radius: 3px; overflow: hidden; margin-top: 4px; }
        .goal-progress { height: 100%; background: var(--accent); border-radius: 3px; transition: width 0.6s ease; }

        #interests-list::-webkit-scrollbar { width: 8px; }
        #interests-list::-webkit-scrollbar-track { background: #f1f1f1; }
        #interests-list::-webkit-scrollbar-thumb { background: #ccc; border-radius: 4px; }
        .interest-item { display: flex; align-items: center; background: #f9f9f9; padding: 10px; margin-bottom: 8px; border-radius: 4px; border: 1px solid #eee; transition: background 0.2s; }
        .interest-item:hover { background: #f0f0f0; }
        .item-text { flex-grow: 1; font-weight: 600; color: #333; }

        .tv-widget-box { margin-bottom: 25px; border-radius: 8px; overflow: hidden; box-shadow: 0 4px 10px rgba(0,0,0,0.05); background: white; }
        .tv-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 25px; margin-bottom: 30px; }
        .charts-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 25px; margin-bottom: 30px; }
        .tables-row-top { display: grid; grid-template-columns: 1fr 1fr; gap: 25px; }
        .tables-row-bottom { display: block; width: 100%; margin-top: 25px; }
        .chart-container { position: relative; height: 220px; width: 100%; }
        .client-grid-layout { display: grid; grid-template-columns: 1fr 1.2fr; gap: 25px; }
        .client-left-col { display: flex; flex-direction: column; gap: 25px; }
        .chart-title { font-size: 0.82rem; font-weight: 700; color: #666; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 14px; }
        .client-chart-height { height: 200px !important; }

        .role-nav { background: white; padding: 12px 16px; margin-bottom: 24px; display: flex; justify-content: space-between; align-items: center; border-radius: 8px; box-shadow: 0 1px 4px rgba(0,0,0,0.06); }
        .nav-group { display: flex; gap: 10px; flex-wrap: wrap; }
        .tab-btn { padding: 9px 22px; background: #f4f4f6; border: 1px solid #e0e0e6; color: #666; cursor: pointer; font-weight: 600; font-size: 0.78rem; border-radius: 4px; transition: all 0.15s; letter-spacing: 0.04em; text-transform: uppercase; }
        .tab-btn:hover { background: #e8e8ee; color: var(--primary); }
        .tab-btn.active { background: var(--primary); color: white; border-color: var(--primary); }
        .config-btn { background: white; color: var(--accent); border: 1px solid var(--accent); display: flex; align-items: center; gap: 5px; }
        .config-btn:hover { background: #eef8fc; }

        table.generic-table { width: 100%; border-collapse: collapse; margin-top: 10px; }
        table.generic-table th { text-align: left; padding: 12px; background: #f8f8f8; border-bottom: 2px solid #ddd; font-size: 0.8rem; text-transform: uppercase; color: #555; font-weight: bold; }
        table.generic-table td { padding: 12px; border-bottom: 1px solid #eee; font-size: 0.9rem; vertical-align: middle; }

        .ra-table-container { border: 1px solid #ebebeb; border-radius: 6px; overflow: hidden; }
        table.ra-table { width: 100%; border-collapse: collapse; }
        table.ra-table th { text-align: left; padding: 10px 14px; background: #f7f7f9; border-bottom: 1px solid #ebebeb; color: #888; font-weight: 600; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.06em; }
        table.ra-table td { padding: 10px 14px; border-bottom: 1px solid #f0f0f4; color: #333; font-size: 0.88rem; vertical-align: middle; }
        table.ra-table tr:last-child td { border-bottom: none; }
        table.ra-table tr:hover td { background: #f9f9fc; }

        .file-link { text-decoration: none; color: #37352f; border-bottom: 1px solid #aebac6; transition: all 0.2s; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 180px; display: inline-block; vertical-align: middle; font-size: 0.85rem; cursor: pointer; }
        .file-link:hover { background: #eef3f7; color: var(--accent); border-bottom-color: var(--accent); }
        .setor-tag { border-radius: 3px; padding: 2px 8px; font-size: 0.8rem; font-weight: 500; }
        .badge { padding: 3px 8px; border-radius: 4px; font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; }
        .comprar { background: #e6fcf5; color: #0b6e4f; }
        .vender { background: #ffebeb; color: #c92a2a; }
        .acompanhar { background: #fff9db; color: #d97706; }
        .manter { background: #edf2ff; color: #364fc7; }

        .drag-handle { cursor: grab; color: #bbb; font-size: 1.2rem; user-select: none; text-align: center; vertical-align: middle; width: 30px; transition: color 0.2s; }
        .drag-handle:hover { color: var(--accent); }
        .drag-handle:active { cursor: grabbing; }
        .drag-handle-wl { cursor: grab; color: #ccc; font-size: 1rem; margin-right: 10px; font-weight: bold; user-select: none; padding: 0 5px; }
        .drag-handle-wl:hover { color: var(--accent); }
        .drag-handle-wl:active { cursor: grabbing; }

        .prio-alta { background: #ffe3e3; color: #c92a2a; }
        .prio-media { background: #fff3bf; color: #d9480f; }
        .prio-baixa { background: #e6fcf5; color: #087f5b; }
        .status-progresso { background: #e7f5ff; color: #1c7ed6; }
        .status-atrasado { background: #fff5f5; color: #fa5252; }
        .status-concluido { background: #ebfbee; color: #2f9e44; }
        .status-nao-iniciado { background: #f1f3f5; color: #868e96; }
        .days-ok { color: #087f5b !important; font-weight: bold; }
        .days-warn { color: #e67700 !important; font-weight: bold; }
        .days-late { color: #e03131 !important; font-weight: bold; }

        .modal-box.large-modal { width: 90vw; max-width: 1100px; height: 90vh; padding: 0 !important; display: flex; flex-direction: column; overflow: hidden; background: #f0f2f5; border-radius: 8px; }
        .page-modal-header { padding: 15px 30px; background: #fff; border-bottom: 1px solid #e0e0e0; display: flex; justify-content: space-between; align-items: center; flex-shrink: 0; z-index: 10; }
        .page-modal-body { flex-grow: 1; overflow-y: auto; padding: 40px 0 100px 0; background-color: #f0f2f5; display: block; text-align: center; }
        .editor-sheet { display: block; margin: 0 auto; background: white; width: 100%; max-width: 850px; min-height: 1000px; padding: 70px 80px; box-shadow: 0 4px 20px rgba(0,0,0,0.08); box-sizing: border-box; text-align: justify; color: #1a1a1a; }
        .page-modal-footer-close { padding: 15px 30px; background: #fff; border-top: 1px solid #e0e0e0; text-align: right; flex-shrink: 0; z-index: 10; }

        .search-container { position: relative; margin-left: 20px; flex-grow: 1; max-width: 400px; }
        .search-input { width: 100%; padding: 8px 35px 8px 15px; border-radius: 20px; border: 1px solid #ddd; background: #f9f9f9; }
        .search-results { position: absolute; top: 110%; left: 0; width: 100%; background: white; border: 1px solid #eee; border-radius: 8px; box-shadow: 0 4px 15px rgba(0,0,0,0.1); z-index: 5000; max-height: 300px; overflow-y: auto; display: none; }
        .search-item { padding: 10px; border-bottom: 1px solid #f5f5f5; cursor: pointer; display: flex; flex-direction: column; }
        .search-item:hover { background: #f0f7ff; }

        .kanban-board { display: flex; gap: 15px; overflow-x: auto; padding-bottom: 20px; }
        .kanban-col { min-width: 260px; background: #f8f9fa; border-radius: 8px; padding: 10px; flex-shrink: 0; }
        .kanban-header { font-weight: bold; margin-bottom: 10px; padding-bottom: 5px; border-bottom: 2px solid #e9ecef; color: var(--primary); display: flex; justify-content: space-between; }
        .kanban-card { background: white; padding: 15px; border-radius: 6px; box-shadow: 0 1px 3px rgba(0,0,0,0.05); margin-bottom: 10px; cursor: grab; border-left: 4px solid var(--accent); position: relative; }
        .kanban-card:active { cursor: grabbing; transform: rotate(1deg); }
        .kanban-price { font-weight: bold; color: #333; margin-top: 5px; }

        .morning-box { background: #fff; border-left: 4px solid var(--accent); padding: 14px 16px; border-radius: 6px; border: 1px solid #eee; }
        .news-terminal { background: transparent; border: none; height: 85px; overflow-y: auto; font-family: 'Roboto Mono', 'Consolas', monospace; font-size: 0.65rem; margin-top: 5px; }
        .news-terminal::-webkit-scrollbar { width: 4px; }
        .news-terminal::-webkit-scrollbar-thumb { background: #ddd; border-radius: 2px; }
        .news-item { padding: 4px 0; border-bottom: 1px dotted #eee; display: flex; gap: 8px; align-items: center; font-size: 0.72rem; line-height: 1.3; }
        .news-item:hover { color: var(--accent); }
        .news-time { color: #999; font-weight: 600; min-width: 28px; font-size: 0.6rem; }
        .news-source { color: #333; font-weight: 800; font-size: 0.6rem; background: #f0f0f0; padding: 0 3px; border-radius: 2px; }
        .news-content { color: #444; flex-grow: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

        .row-divergence { background-color: #fff9db !important; }

        @keyframes shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }
        .skeleton-cell { display: inline-block; width: 80%; height: 12px; border-radius: 4px; background: linear-gradient(90deg, #eee 25%, #f5f5f5 50%, #eee 75%); background-size: 200% 100%; animation: shimmer 1.4s infinite; }

        .editor-toolbar { background: #f8f9fa; padding: 10px; border: 1px solid #e0e0e0; border-bottom: none; border-radius: 6px 6px 0 0; display: flex; gap: 8px; }
        .editor-btn { background: white; border: 1px solid #d0d0d0; padding: 6px 14px; cursor: pointer; font-weight: 600; border-radius: 4px; font-size: 0.9rem; color: #555; transition: all 0.2s ease; }
        .editor-btn:hover { background: #e9ecef; color: var(--primary); border-color: #bbb; }
        .editor-content { min-height: 400px; border: 1px solid #e0e0e0; padding: 40px; border-radius: 0 0 6px 6px; background: white; outline: none; overflow-y: auto; text-align: justify; line-height: 1.8; font-size: 1.05rem; color: #333; }
        .editor-content:focus { border-color: #ccc; box-shadow: inset 0 2px 4px rgba(0,0,0,0.02); }
        .editor-content p { margin-bottom: 20px; }
        .editor-content ul, .editor-content ol { margin-bottom: 20px; padding-left: 30px; }
        .editor-content li { margin-bottom: 8px; }
        .editor-content b, .editor-content strong { color: var(--primary); font-weight: 700; }

        details { margin: 20px 0; padding: 10px; border: none; background: transparent; }
        details[open] { padding-left: 10px; border-left: 2px solid #eee; }
        summary { cursor: pointer; font-weight: 800; color: #000; list-style: none; outline: none; user-select: none; font-size: 1.05rem; margin-bottom: 10px; }
        summary::-webkit-details-marker { display: none; }
        summary::before { content: '▶'; display: inline-block; margin-right: 10px; font-size: 0.8rem; transition: 0.2s; color: #000; }
        details[open] summary::before { transform: rotate(90deg); }

        /* ── PARTNERS GRID (dashboard) ── */
        .partners-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 25px; margin-top: 30px; }
        .partner-card { text-align: center; width: 220px; }
        .partner-img-placeholder { width: 180px; height: 180px; background: #e0e0e0; border-radius: 50%; margin: 0 auto 15px; display: flex; align-items: center; justify-content: center; color: #888; font-weight: bold; overflow: hidden; }
        .partner-img-placeholder img { width: 100%; height: 100%; object-fit: cover; }

        /* ── MARKETING ── */
        #mkt-summary-cards { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; margin-bottom: 24px; }
        .notion-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px,1fr)); gap: 16px; }

        /* ── RESPONSIVE ── */
        @media (max-width: 1024px) {
            .charts-grid, .tables-row-top, .home-grid, .client-grid-layout, .tv-grid, .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
            .about-grid { grid-template-columns: 1fr; gap: 3rem; }
            .footer-top { grid-template-columns: 1fr 1fr; }
        }
        @media (max-width: 768px) {
            body { font-size: 15px; overflow-x: hidden; }
            .container { padding: 1rem; }
            .card { padding: 15px; }

            /* Header */
            header { flex-wrap: wrap; padding: 10px 15px; position: relative; gap: 0; height: auto; min-height: 60px; }
            .logo-img { height: 36px; }
            .mobile-menu-btn { display: block; position: absolute; right: 15px; top: 14px; }
            nav { width: 100%; display: none; flex-direction: column; margin-top: 12px; border-top: 1px solid #eee; padding-top: 8px; gap: 4px; }
            nav.mobile-visible { display: flex; }
            nav a { margin: 0; padding: 12px 8px; border-bottom: 1px solid #f5f5f5; width: 100%; font-size: 0.88rem; }
            .btn-access { display: block; text-align: center; margin-top: 8px; width: 100%; box-sizing: border-box; padding: 12px 20px !important; }

            /* Hero */
            .hero-section { min-height: 85vh; padding: 3rem 1.5rem 2.5rem; }
            .logo-hero { height: 80px; margin-bottom: 2rem; }
            .hero-tagline { margin-bottom: 2rem; }
            .hero-scroll-cue { bottom: 1.5rem; }

            /* Sections */
            .lp-section { padding: 3rem 1.25rem; }
            .section-title { margin-bottom: 1.5rem; }

            /* About */
            .about-grid { grid-template-columns: 1fr; }
            .about-text p { text-align: left; }

            /* Philosophy */
            .philosophy-strip { padding: 3rem 1.5rem; }

            /* Partners / Team */
            .team-grid { grid-template-columns: 1fr; }
            .team-photo-wrap { aspect-ratio: unset; height: 320px; }
            .team-photo-wrap img { object-position: center 20%; }
            .team-info { margin-top: 0; }
            .team-secondary-card { width: calc((100% - 2rem) / 2); }

            /* Footer */
            .footer-section { padding: 3rem 1.25rem 2rem; }
            .footer-top { grid-template-columns: 1fr; gap: 2rem; padding-bottom: 2rem; margin-bottom: 2rem; }
            .footer-bottom { flex-direction: column; gap: 1rem; text-align: center; }

            /* Dashboard */
            .charts-grid, .tables-row-top, .home-grid, .client-grid-layout, .tv-grid, .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
            .modal-box { width: 90%; padding: 1.5rem; max-height: 85vh; }
            .modal-box.large-modal { width: 100%; height: 100%; border-radius: 0; }
            .editor-sheet { padding: 30px; min-height: 60vh; width: 95%; }
            /* .rk-mini-table fora: são label/valor de 2 colunas dentro de card
               estreito — forçar 500px jogava a coluna de valor p/ fora da tela. */
            table:not(.lz-table):not(.generic-table):not(.rk-mini-table) { min-width: 500px; }
            .ra-table-container, .card { overflow-x: auto; }
            #cli-big-saldo { font-size: clamp(1.6rem, 8vw, 2.1rem) !important; }
            #cli-performance { font-size: clamp(1.4rem, 6.5vw, 1.8rem) !important; }
        }

        @media (max-width: 480px) {
            .hero-section { padding: 2.5rem 1.25rem 2rem; }
            .logo-hero { height: 66px; margin-bottom: 1.5rem; }
            .lp-section { padding: 2.5rem 1rem; }
            .philosophy-strip { padding: 2.5rem 1rem; }
            .footer-section { padding: 2.5rem 1rem 1.5rem; }
            .team-secondary-card { width: 100%; }
            .footer-top { gap: 1.5rem; }
            .section-title { font-size: 1.85rem; }

            /* Comparative chart — mobile */
            .comp-chart-section { padding: 20px 16px 16px; }
            .comp-chart-header { flex-direction: column; align-items: flex-start; gap: 14px; }
            .comp-toggle-group { width: 100%; }
            .comp-toggle { flex: 1; text-align: center; }
            .comp-chart-wrap { height: 220px; }
        }

/* ═══════════════════════════════════════════════════════
   PRIVATE APP — SIDEBAR LAYOUT (design handoff 2026)
═══════════════════════════════════════════════════════ */
:root {
  --priv-sidebar-w:        240px;
  --priv-sidebar-collapsed: 64px;
  --priv-header-h:          56px;
  --priv-bg:                #f4f4f9;
  --priv-card:              #ffffff;
  --priv-border:            rgba(0,0,0,0.07);
  --priv-border-mid:        rgba(0,0,0,0.12);
  --priv-text-2:            #555555;
  --priv-text-3:            #999999;
  --priv-pos:               #059669;
  --priv-neg:               #dc2626;
  --priv-warn:              #d97706;
  --priv-radius:            6px;
  --priv-shadow-sm:         0 1px 3px rgba(0,0,0,0.06), 0 2px 8px rgba(0,0,0,0.04);
  --priv-shadow-md:         0 4px 16px rgba(0,0,0,0.08), 0 1px 4px rgba(0,0,0,0.04);
}

#private-app {
  display: flex; min-height: 100vh;
  background: var(--priv-bg);
  font-family: var(--font-sans); font-size: 14px; line-height: 1.5;
}

/* ── SIDEBAR ── */
.priv-sidebar {
  width: var(--priv-sidebar-w); min-height: 100vh;
  background: var(--primary);
  display: flex; flex-direction: column; flex-shrink: 0;
  position: fixed; top: 0; left: 0; bottom: 0; z-index: 100;
  transition: width 0.25s ease; overflow: hidden;
}
.priv-sidebar.collapsed { width: var(--priv-sidebar-collapsed); }

.priv-brand {
  height: var(--priv-header-h);
  display: flex; align-items: center; gap: 14px;
  padding: 0 16px;
  border-bottom: 1px solid rgba(255,255,255,0.07);
  flex-shrink: 0;
}
.priv-brand-mark { width: 42px; height: 42px; flex-shrink: 0; object-fit: contain; }
.priv-brand-text {
  display: flex; flex-direction: column;
  opacity: 1; transition: opacity 0.2s; white-space: nowrap; overflow: hidden;
}
.priv-sidebar.collapsed .priv-brand-text { opacity: 0; pointer-events: none; }
.priv-brand-name {
  font-family: var(--font-serif); font-size: 1.05rem; font-weight: 500;
  color: rgba(255,255,255,0.9); line-height: 1.1;
}
.priv-brand-sub {
  font-size: 0.6rem; font-weight: 600; letter-spacing: 0.14em;
  text-transform: uppercase; color: rgba(255,255,255,0.3); margin-top: 2px;
}
.priv-nav { flex: 1; padding: 16px 0; overflow-y: auto; overflow-x: hidden; display: flex; flex-direction: column; align-items: stretch; gap: 0; }
.priv-nav-section {
  font-size: 0.58rem; font-weight: 700; letter-spacing: 0.16em;
  text-transform: uppercase; color: rgba(255,255,255,0.22);
  padding: 14px 20px 6px; white-space: nowrap; overflow: hidden;
  transition: opacity 0.2s;
}
.priv-sidebar.collapsed .priv-nav-section { opacity: 0; }
.priv-nav-item {
  display: flex; align-items: center; gap: 11px;
  padding: 9px 18px; cursor: pointer;
  transition: background 0.15s; position: relative; white-space: nowrap;
}
.priv-nav-item:hover { background: rgba(255,255,255,0.07); }
.priv-nav-item.active { background: rgba(255,255,255,0.11); }
.priv-nav-item.active::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0;
  width: 2px; background: rgba(255,255,255,0.6);
}
.priv-nav-icon {
  width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; font-size: 1rem; color: rgba(255,255,255,0.55);
  transition: color 0.15s;
}
.priv-nav-item.active .priv-nav-icon,
.priv-nav-item:hover .priv-nav-icon { color: rgba(255,255,255,0.9); }
.priv-nav-label {
  font-size: 0.8rem; font-weight: 500; color: rgba(255,255,255,0.55);
  letter-spacing: 0.01em; transition: color 0.15s, opacity 0.2s;
}
.priv-nav-item.active .priv-nav-label,
.priv-nav-item:hover .priv-nav-label { color: rgba(255,255,255,0.9); }
.priv-sidebar.collapsed .priv-nav-label { opacity: 0; }
.priv-nav-badge {
  margin-left: auto; background: rgba(255,255,255,0.15);
  color: rgba(255,255,255,0.7); font-size: 0.58rem; font-weight: 700;
  padding: 2px 6px; border-radius: 20px; transition: opacity 0.2s;
}
.priv-sidebar.collapsed .priv-nav-badge { opacity: 0; }
.priv-sidebar-footer {
  padding: 14px 0; border-top: 1px solid rgba(255,255,255,0.07); flex-shrink: 0;
}

/* ── MAIN ── */
.priv-main {
  margin-left: var(--priv-sidebar-w); flex: 1;
  display: flex; flex-direction: column; min-height: 100vh;
  transition: margin-left 0.25s ease; min-width: 0; overflow-x: hidden;
}
.priv-sidebar.collapsed ~ .priv-main { margin-left: var(--priv-sidebar-collapsed); }

/* ── TICKER ── */
.priv-ticker {
  background: var(--primary); height: 46px;
  display: flex; align-items: center; overflow: hidden; flex-shrink: 0;
}

/* ── TOPBAR ── */
.priv-topbar {
  height: var(--priv-header-h); background: var(--priv-card);
  border-bottom: 1px solid var(--priv-border);
  display: flex; align-items: center; gap: 12px;
  padding: 0 24px; position: sticky; top: 0; z-index: 50;
  min-width: 0; overflow: hidden;
}
.priv-topbar-toggle {
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; border-radius: var(--priv-radius); color: var(--priv-text-2);
  transition: background 0.15s; flex-shrink: 0; border: none; background: none; font-size: 1.1rem;
}
.priv-topbar-toggle:hover { background: var(--priv-bg); }
.priv-breadcrumb {
  display: flex; align-items: center; gap: 6px;
  font-size: 0.78rem; color: var(--priv-text-3);
}
.priv-breadcrumb span { color: var(--primary); font-weight: 600; }
.priv-user-info {
  display: flex; align-items: center; gap: 8px;
  padding: 4px 8px; border-radius: var(--priv-radius); transition: background 0.15s;
}
.priv-user-info:hover { background: var(--priv-bg); }
.priv-avatar {
  width: 28px; height: 28px; background: var(--primary); border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.7rem; font-weight: 700; color: rgba(255,255,255,0.85); flex-shrink: 0;
}
.priv-user-name { font-size: 0.78rem; font-weight: 600; color: var(--primary); }
.priv-user-role {
  font-size: 0.58rem; font-weight: 600; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--priv-text-3); display: block;
}
.priv-logout-btn {
  font-size: 0.72rem; font-weight: 600; color: var(--priv-neg); cursor: pointer;
  padding: 4px 10px; border-radius: var(--priv-radius);
  border: 1px solid rgba(220,38,38,0.2); background: none;
  transition: background 0.15s; letter-spacing: 0.04em; text-transform: uppercase;
  white-space: nowrap; font-family: var(--font-sans);
}
.priv-logout-btn:hover { background: rgba(220,38,38,0.06); }

/* ── CONTENT ── */
/* box-sizing aqui não é cosmético: sem ele o `width:100%` soma os 28px+28px de
   padding e o bloco fica 56px mais largo que o pai, que tem overflow-x:hidden
   (.priv-main) e corta a direita em silêncio. Só aparecia abaixo de ~1356px de
   largura útil, onde o max-width:1300px deixa de absorver a sobra — daí o
   gráfico da direita (Rolling volatility) "às vezes" vazar da aba. */
.priv-content { flex: 1; padding: 28px 28px 48px; max-width: 1300px; width: 100%; overflow-x: hidden; box-sizing: border-box; }

/* ── VIEWS ── */
.priv-view { display: none; }
.priv-view.active { display: block; }

/* ── PAGE TITLE ── */
.priv-page-title {
  font-family: var(--font-serif); font-size: 1.6rem; font-weight: 400;
  color: var(--primary); margin-bottom: 4px; line-height: 1.2;
}
.priv-page-sub {
  font-size: 0.76rem; color: var(--priv-text-3);
  letter-spacing: 0.04em; text-transform: uppercase;
  margin-bottom: 28px; font-weight: 500;
}

/* ── CARD ── */
.lz-card {
  background: var(--priv-card); border-radius: var(--priv-radius);
  box-shadow: var(--priv-shadow-sm); border: 1px solid var(--priv-border);
  padding: 20px 22px; box-sizing: border-box;
}
.lz-card-accent { border-top: 2px solid var(--accent); }
.lz-card-header {
  display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px;
}
.lz-card-title {
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--priv-text-2);
}

/* ── KPI ── */
.lz-kpi-grid {
  display: grid; grid-template-columns: repeat(auto-fit,minmax(180px,1fr));
  gap: 14px; margin-bottom: 24px;
}
.lz-kpi {
  background: var(--priv-card); border: 1px solid var(--priv-border);
  border-radius: var(--priv-radius); padding: 18px 20px; box-shadow: var(--priv-shadow-sm);
}
.lz-kpi-divider { width: 20px; height: 2px; background: var(--priv-border-mid); margin-bottom: 10px; border-radius: 2px; }
.lz-kpi-label {
  font-size: 0.65rem; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--priv-text-3); margin-bottom: 8px;
}
.lz-kpi-value {
  font-size: 1.65rem; font-weight: 700; color: var(--primary);
  line-height: 1; font-variant-numeric: tabular-nums; margin-bottom: 4px;
}
.lz-kpi-sub { font-size: 0.7rem; color: var(--priv-text-3); }
.lz-kpi-pos { color: var(--priv-pos) !important; }
.lz-kpi-neg { color: var(--priv-neg) !important; }

/* ── (i) — o que a métrica significa ──
   Um botão minúsculo ao lado do rótulo; o texto mora no LZ_INFO (JS), não no
   markup, para o mesmo verbete servir tile, linha de tabela e cabeçalho.
   `text-transform:none` é obrigatório: quase todo rótulo que hospeda o (i)
   está em uppercase e o "i" viraria "I". O balão é ÚNICO e preso ao body —
   dentro do card ele seria cortado pelo overflow do .lz-table-wrap. */
.lz-i {
  display: inline-flex; align-items: center; justify-content: center;
  width: 13px; height: 13px; flex: none; padding: 0; margin-left: 5px;
  border: 1px solid var(--priv-border-mid); border-radius: 50%;
  background: transparent; color: var(--priv-text-3);
  font-family: var(--font-sans); font-size: 9px; font-weight: 700;
  line-height: 1; letter-spacing: 0; text-transform: none;
  vertical-align: middle; cursor: help; transition: all 0.15s;
}
.lz-i::before { content: 'i'; }
.lz-i:hover, .lz-i:focus-visible {
  border-color: var(--accent); color: var(--accent);
  background: var(--priv-bg); outline: none;
}
#lz-info-pop {
  position: fixed; z-index: 10000; display: none; max-width: 310px;
  /* content-box é o default aqui: sem isto os 26px de padding escapam do
     max-width e o balão encosta na borda da tela no celular. */
  box-sizing: border-box; padding: 11px 13px; border-radius: 7px;
  background: rgba(18,18,22,0.97); color: rgba(255,255,255,0.86);
  font-family: var(--font-sans); font-size: 0.74rem; font-weight: 400;
  line-height: 1.55; text-align: left; text-transform: none;
  letter-spacing: normal; box-shadow: 0 6px 26px rgba(0,0,0,0.34);
}
#lz-info-pop b {
  display: block; margin-bottom: 5px; color: #fff;
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
}
#lz-info-pop code {
  display: block; margin-top: 8px; padding-top: 7px;
  border-top: 1px solid rgba(255,255,255,0.14);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.67rem; line-height: 1.45; color: rgba(255,255,255,0.6);
  white-space: pre-wrap;
}

/* ── TABLE ── */
.lz-table-wrap { overflow-x: auto; max-width: 100%; }
table.lz-table { width: 100%; border-collapse: collapse; font-size: 0.82rem; }
table.lz-table th {
  text-align: left; padding: 9px 12px;
  font-size: 0.65rem; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--priv-text-3);
  border-bottom: 1px solid var(--priv-border-mid); white-space: nowrap;
}
table.lz-table td {
  padding: 10px 12px; border-bottom: 1px solid var(--priv-border);
  color: var(--priv-text-2); vertical-align: middle;
}
table.lz-table tr:last-child td { border-bottom: none; }
table.lz-table tr:hover td { background: var(--priv-bg); }
.lz-td-main { font-weight: 600; color: var(--primary) !important; }

/* ── BADGES / CHIPS ── */
.lz-badge {
  display: inline-flex; align-items: center;
  padding: 2px 8px; border-radius: 3px;
  font-size: 0.65rem; font-weight: 700; letter-spacing: 0.07em;
  text-transform: uppercase; white-space: nowrap;
}
.lz-badge-buy   { background: #dcfce7; color: #15803d; }
.lz-badge-sell  { background: #fee2e2; color: #b91c1c; }
.lz-badge-hold  { background: #fef9c3; color: #92400e; }
.lz-badge-watch { background: #e0f2fe; color: #0369a1; }
.lz-chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 7px; border-radius: 20px;
  font-size: 0.62rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
}
.lz-chip-green  { background: #dcfce7; color: #166534; }
.lz-chip-red    { background: #fee2e2; color: #991b1b; }
.lz-chip-yellow { background: #fef9c3; color: #92400e; }
.lz-chip-blue   { background: #dbeafe; color: #1e40af; }
.lz-chip-gray   { background: var(--priv-bg); color: var(--priv-text-2); }
.lz-chip-dot    { width: 5px; height: 5px; border-radius: 50%; background: currentColor; }

/* ── BUTTONS ── */
.lz-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 16px; border-radius: var(--priv-radius);
  font-family: var(--font-sans); font-size: 0.74rem; font-weight: 600;
  letter-spacing: 0.04em; text-transform: uppercase;
  cursor: pointer; border: none; transition: background 0.15s; white-space: nowrap;
}
.lz-btn-primary { background: var(--primary); color: #fff; }
.lz-btn-primary:hover { background: #2c2c2c; }
.lz-btn-outline { background: transparent; color: var(--priv-text-2); border: 1px solid var(--priv-border-mid); }
.lz-btn-outline:hover { background: var(--priv-bg); color: var(--primary); }
.lz-btn-sm { padding: 4px 11px; font-size: 0.68rem; }

/* ── LINK ITEMS ── */
.lz-link-item {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 8px; border-bottom: 1px solid var(--priv-border);
  cursor: pointer; transition: background 0.12s, padding-left 0.12s;
  border-radius: 4px; color: var(--priv-text-2); font-size: 0.82rem;
}
.lz-link-item:last-child { border-bottom: none; }
.lz-link-item:hover { background: var(--priv-bg); padding-left: 14px; color: var(--primary); }

/* ── SALDO BANNER ── */
.lz-saldo-banner {
  background: var(--primary); border-radius: var(--priv-radius);
  padding: 24px 28px; display: flex; align-items: center; gap: 40px; flex-wrap: wrap;
  margin-bottom: 24px;
}
.lz-saldo-banner .lz-kpi-label { color: rgba(255,255,255,0.4); }
.lz-saldo-banner .lz-kpi-value { color: #fff; font-size: 2.2rem; }
.lz-saldo-banner .lz-kpi-sub   { color: rgba(255,255,255,0.4); }
.lz-saldo-banner .divider-v    { width: 1px; height: 44px; background: rgba(255,255,255,0.12); }

/* ── GRIDS ── */
.lz-grid-2   { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.lz-grid-3   { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 18px; }
.lz-home-grid { display: grid; grid-template-columns: minmax(0,280px) minmax(0,1fr); gap: 20px; align-items: start; }
/* min-width:auto (o default de item de grid) impede a coluna de encolher abaixo
   do min-content do conteúdo — e o conteúdo é um canvas do Chart.js, que escreve
   a largura em px de volta no style. Vira catraca: a coluna cresce e não volta.
   Esta regra existia só dentro do @media(max-width:640px); os gráficos do Risk
   ficam lado a lado até 900px, então precisavam dela em todas as larguras. */
.lz-grid-2 > *, .lz-grid-3 > *, .lz-home-grid > *, .priv-stack-row > * { min-width: 0; }
.lz-section-gap { margin-top: 24px; }

/* ── RISK MONITOR ── */
.rk-alert {
  border-radius: var(--priv-radius); padding: 16px 20px; margin-bottom: 24px;
  border: 1px solid var(--priv-border); border-left: 3px solid;
  background: var(--priv-card); box-shadow: var(--priv-shadow-sm);
}
.rk-alert-critical { border-left-color: #dc2626; background: linear-gradient(90deg, rgba(220,38,38,0.05), var(--priv-card) 40%); }
.rk-alert-warning  { border-left-color: #d97706; background: linear-gradient(90deg, rgba(217,119,6,0.06), var(--priv-card) 40%); }
.rk-alert-tag {
  display: inline-flex; padding: 2px 8px; border-radius: 3px; margin-bottom: 8px;
  font-size: 0.62rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase;
}
.rk-alert-critical .rk-alert-tag { background: #fee2e2; color: #b91c1c; }
.rk-alert-warning  .rk-alert-tag { background: #fef3c7; color: #92400e; }
.rk-alert-headline { font-size: 0.92rem; font-weight: 700; color: var(--primary); margin-bottom: 4px; }
.rk-alert-body { font-size: 0.8rem; color: var(--priv-text-2); line-height: 1.55; }
.rk-mini-table { width: 100%; border-collapse: collapse; font-size: 0.82rem; }
.rk-mini-table td { padding: 9px 2px; border-bottom: 1px solid var(--priv-border); color: var(--priv-text-2); }
.rk-mini-table tr:last-child td { border-bottom: none; }
.rk-mini-table td:last-child { text-align: right; font-weight: 700; color: var(--primary); font-variant-numeric: tabular-nums; }
.rk-meta-strip { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 0; font-size: 0.72rem; color: var(--priv-text-3); margin: 2px 0 18px; }
.rk-meta-strip strong { color: var(--priv-text-2); font-weight: 600; }
/* Separador entre itens em vez de gap solto: lê como uma faixa só. */
.rk-meta-strip > span { padding: 0 12px; border-left: 1px solid var(--priv-border); line-height: 1.15; }
.rk-meta-strip > span:first-child { padding-left: 0; border-left: none; }

/* ── Risk: densidade própria dos KPIs ──
   Escopado em .rk-kpi-grid de propósito: .lz-kpi é compartilhada com a área do
   cliente e outras abas, e mexer na classe global regrediria aquelas telas.

   COLUNAS FIXAS (5), não auto-fit: são 10 tiles, e o auto-fit resolvia 9 colunas
   na largura cheia — sobrava 1 órfão numa 2ª linha com altura própria. Pior, o
   tile de VaR 99% só aparece quando o backend manda `var99_t`, então a contagem
   mudava com o dado e o layout pulava entre "1 linha limpa" e "9+1".
   Seletor duplo (.lz-kpi-grid.rk-kpi-grid) de propósito: há um
   `@media(max-width:640px) .lz-kpi-grid{1fr 1fr}` MAIS ABAIXO no arquivo que
   venceria por ordem de fonte com a mesma especificidade. */
.lz-kpi-grid.rk-kpi-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  /* Todas as linhas com a MESMA altura (a da mais alta). Sem isto o grid só
     iguala dentro de cada linha, e a 2ª ficava mais baixa que a 1ª. */
  grid-auto-rows: 1fr;
  gap: 10px; margin-bottom: 18px;
}
@media (max-width: 1180px) { .lz-kpi-grid.rk-kpi-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 900px)  { .lz-kpi-grid.rk-kpi-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 620px)  { .lz-kpi-grid.rk-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Coluna flex + sub empurrada p/ o rodapé: o valor fica na mesma linha de base
   em todos os cards, e a sub de 2-3 linhas (ex.: "realized · 12M (jul/2025 →
   jun/2026)") cresce para baixo em vez de deslocar o número. */
.rk-kpi-grid .lz-kpi { padding: 12px 14px; display: flex; flex-direction: column; }
.rk-kpi-grid .lz-kpi-divider { display: none; }
.rk-kpi-grid .lz-kpi-label { font-size: 0.58rem; letter-spacing: 0.1em; margin-bottom: 6px; white-space: nowrap; }
.rk-kpi-grid .lz-kpi-value { font-size: 1.34rem; margin-bottom: 5px; }
.rk-kpi-grid .lz-kpi-sub { font-size: 0.62rem; line-height: 1.3; margin-top: auto; }

/* Perfil de longo prazo: 6 blocos em 3×2 no desktop. Com o auto-fit da grade
   base eles caem 5+1 e o último fica órfão numa linha; fixar 3 colunas equilibra
   e dá largura p/ as sub-linhas não quebrarem no meio.
   Seletor duplo (.lz-kpi-grid.rk-perfil-grid) de propósito: há um
   `@media(max-width:640px) .lz-kpi-grid{1fr 1fr}` MAIS ABAIXO no arquivo; com a
   mesma especificidade ele venceria por ordem de fonte e o mobile ficaria 2×3. */
.lz-kpi-grid.rk-perfil-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-bottom: 0; }
@media (max-width: 900px) { .lz-kpi-grid.rk-perfil-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .lz-kpi-grid.rk-perfil-grid { grid-template-columns: 1fr; } }

/* Barra da janela de risco */
.rk-winbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 4px 0 14px; }
.rk-winbar-lbl { font-size: 0.62rem; text-transform: uppercase; letter-spacing: .1em; color: var(--priv-text-3); font-weight: 800; }
.rk-winbar-note { font-size: 0.68rem; color: var(--priv-text-3); font-variant-numeric: tabular-nums; }

/* Legenda do growth no cabeçalho do card (devolve altura ao gráfico) */
.rk-growth-head { flex-wrap: wrap; gap: 8px 10px; }
.rk-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-left: auto; }
.rk-leg { display: inline-flex; align-items: center; gap: 6px; font-size: 0.7rem; color: var(--priv-text-2); }
.rk-leg i { width: 14px; height: 2.5px; border-radius: 2px; flex: none; }
.rk-leg b { font-variant-numeric: tabular-nums; color: var(--primary); font-weight: 700; }

/* Matriz de correlação — agora cobre a carteira inteira, então aperta a célula */
.rk-corr-table { width: 100%; border-collapse: separate; border-spacing: 2px; }
.rk-corr-table th { font-size: 0.6rem; color: var(--priv-text-3); font-weight: 700; }
.rk-corr-table td { text-align: center; font-variant-numeric: tabular-nums; font-size: 0.68rem; padding: 5px 4px; border-radius: 3px; }
.rk-bar-track { background: #f0f0f0; border-radius: 99px; height: 6px; overflow: hidden; }
.rk-bar-fill { background: var(--accent); height: 100%; border-radius: 99px; }
.rk-bar-fill-muted { background: repeating-linear-gradient(45deg, var(--priv-text-3), var(--priv-text-3) 3px, transparent 3px, transparent 6px); opacity: 0.55; }
.rk-bar-tag {
  display: inline-block; margin-left: 4px; padding: 0 5px; border-radius: 3px;
  font-size: 0.58rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
  vertical-align: middle; background: var(--priv-bg); color: var(--priv-text-3);
  border: 1px solid var(--priv-border-mid);
}
/* Linhas de peso (_rkBars) e de stress (_rkStress). Vieram de style="" inline;
   viraram classe porque larguras fixas (130px / 150px+250px) não cabem no card
   estreito do celular e inline não pode ser sobrescrito por @media. */
.rk-wbar-row {
  display: grid; grid-template-columns: 130px 1fr 58px; align-items: center;
  gap: 8px; padding: 5px 0; border-bottom: 1px solid var(--priv-border);
}
.rk-wbar-name {
  font-weight: 600; font-size: 0.8rem; color: #333;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rk-wbar-name.is-unmapped { color: var(--priv-text-3); }
.rk-wbar-val { text-align: right; font-size: 0.78rem; color: #666; font-variant-numeric: tabular-nums; }

.rk-stress-row { display: flex; align-items: center; gap: 10px; margin: 5px 0; }
.rk-stress-name {
  width: 150px; flex: none; font-size: 0.8rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rk-stress-track { flex: 1; background: var(--priv-bg); border-radius: 4px; height: 20px; }
.rk-stress-track > div { background: var(--priv-neg); height: 100%; border-radius: 4px; opacity: 0.75; }
.rk-stress-figs { width: 250px; flex: none; text-align: right; font-size: 0.78rem; font-variant-numeric: tabular-nums; }
/* 150px + 250px fixos não cabem quando a linha divide a largura com outro card:
   o trilho do meio (flex:1) colapsa a zero e a barra some. Encolhe as pontas
   antes disso — o empilhamento completo só vem em ≤640px. */
@media(max-width:1100px) {
  .rk-stress-name { width: 110px; }
  .rk-stress-figs { width: 170px; }
}

/* Altura do "Where risk comes from" — em classe (e não inline) p/ o mobile poder
   respirar: são até 5 barras de fator + rótulos em 150px. */
.rk-canvas-var { position: relative; height: 150px; }

.rk-foot { font-size: 0.74rem; color: var(--priv-text-3); line-height: 1.6; }
.rk-foot ul { margin: 6px 0 0; padding-left: 18px; }
.rk-foot li { margin-bottom: 4px; }

/* ── CLIENTES: a aba Dados e a de Carteiras ──────────────────────────────────
   Estas telas nasceram com estilo inline e cor chumbada (#f8f9fa, #15803d,
   #b91c1c), o que as deixava fora do tema: as variáveis existem e não estavam
   sendo usadas, então a mesma tabela tinha um cinza aqui e outro no resto do
   site. Aqui elas passam a herdar de `.lz-table` e das variáveis --priv-*.

   `.cl-num` em vez de `text-align:right` repetido célula a célula: são nove
   colunas numéricas, e `tabular-nums` é o que impede a coluna de dançar quando
   um dígito muda. */
.cl-tab { width: 100%; border-collapse: collapse; font-size: 0.82rem; }
.cl-tab thead tr { background: var(--priv-bg); border-bottom: 2px solid var(--priv-border-mid); }
.cl-tab th { padding: 8px 10px; text-align: left; white-space: nowrap; font-weight: 600; }
.cl-tab td { padding: 7px 10px; vertical-align: middle; }
.cl-tab tbody tr { border-bottom: 1px solid var(--priv-border); }
.cl-tab tbody tr:hover td { background: var(--priv-bg); }
.cl-tab tfoot tr { border-top: 2px solid var(--priv-border-mid); font-weight: 600; }
.cl-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* A matriz mês × cliente rola na horizontal; a coluna do nome fica. Precisa de
   fundo próprio, senão as células rolando aparecem por baixo dela. */
.cl-col-fixa { position: sticky; left: 0; background: var(--priv-card); }
.cl-tab thead .cl-col-fixa { background: var(--priv-bg); }
.cl-forte { font-weight: 600; }
.cl-fraco { color: var(--priv-text-3); }
.cl-pos { color: var(--priv-pos); }
.cl-neg { color: var(--priv-neg); }
.cl-alerta { color: var(--priv-warn); }

/* A coluna Entrada. A borda é o estado: cinza alocou, âmbar data salva que não
   alocou, rosa sem data. Três estados, porque com dois a data aparecia na tela
   ao lado do texto "sem data". */
.cl-entrada {
  width: 104px; padding: 3px 5px; text-align: right; font-size: 0.8rem;
  font-variant-numeric: tabular-nums; border-radius: 4px;
  border: 1px solid var(--priv-border-mid); background: var(--priv-card);
  color: inherit;
}
.cl-entrada:focus { outline: none; border-color: var(--accent); }
.cl-entrada.e-parcial { border-color: var(--priv-warn); }
.cl-entrada.e-vazia   { border-color: var(--priv-neg); }
.cl-entrada.e-erro    { border-color: var(--priv-neg); background: rgba(220,38,38,0.06); }

/* Lista lateral de clientes. O hover era feito por `onmouseover` gravando
   `style.background` — e o handler de saída tinha de saber se a linha era a
   selecionada para restaurar a cor certa, o que duplicava a regra em três
   lugares. Com :hover e uma classe, a regra mora aqui. */
.cl-item {
  padding: 8px 10px; border-radius: var(--priv-radius);
  cursor: pointer; margin-bottom: 2px;
}
.cl-item:hover { background: var(--priv-bg); }
.cl-sel, .cl-sel:hover { background: var(--accent-dim); font-weight: 600; }

/* Caixa de aviso — a que explica quando o número precisa de ressalva. */
.cl-aviso {
  background: color-mix(in srgb, var(--priv-warn) 8%, var(--priv-card));
  border: 1px solid color-mix(in srgb, var(--priv-warn) 40%, var(--priv-card));
  border-radius: var(--priv-radius); padding: 12px;
}

/* Altura do canvas por CLASSE, não por `style="height:190px"` inline em cada um.
   O análogo no Risk é `.rk-canvas-var`. Chart.js precisa de um pai com altura
   definida quando `maintainAspectRatio: false`. */
.rk-canvas-med { position: relative; height: 220px; }

/* ── A CARTEIRA INDIVIDUAL ────────────────────────────────────────────────────
   O editor era um `innerHTML` de 229 linhas com onze blocos em sequência, sem
   agrupamento nenhum: só `border-top` e margens variando entre 8, 12, 14, 16 e
   22px, o que fazia a tela parecer uma lista de coisas em vez de três assuntos.
   Agora são três seções, e o padding/borda mora aqui. */
.cl-sec { padding-top: 14px; margin-top: 18px; border-top: 1px solid var(--priv-border); }
.cl-sec:first-child { padding-top: 0; margin-top: 0; border-top: none; }
.cl-sec-tit {
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--priv-text-3); margin-bottom: 10px;
}
.cl-sec-tit span { text-transform: none; letter-spacing: 0; font-weight: 400; }

/* Os campos da tabela de posições. Eram sete `style="..."` repetidos por linha,
   com o mesmo border/radius/padding escrito de novo em cada um. */
.cl-inp {
  padding: 5px 7px; border: 1px solid var(--priv-border-mid);
  border-radius: 5px; font-size: 0.85rem; background: var(--priv-card);
  color: inherit; width: 108px;
}
.cl-inp:focus { outline: none; border-color: var(--accent); }
.cl-inp-tk { width: 104px; text-transform: uppercase; }
.cl-inp-num { text-align: right; font-variant-numeric: tabular-nums; }
.cl-x {
  border: none; background: none; color: var(--priv-neg);
  cursor: pointer; font-size: 1rem; line-height: 1; padding: 0 4px;
}
.cl-add {
  margin: 10px 0 0; border: 1px dashed var(--priv-border-mid); background: none;
  border-radius: var(--priv-radius); padding: 6px 12px; cursor: pointer;
  font-size: 0.85rem; color: var(--priv-text-2);
}
.cl-add:hover { border-color: var(--accent); color: var(--accent); }
.cl-txa {
  width: 100%; padding: 6px 8px; border: 1px solid var(--priv-border-mid);
  border-radius: var(--priv-radius); font-family: ui-monospace, monospace;
  font-size: 0.8rem; background: var(--priv-card); color: inherit;
}
/* O rodapé de totais: caixa, renda fixa, total e o valor de agora. */
.cl-tot { display: flex; gap: 24px; flex-wrap: wrap; align-items: flex-end; }
.cl-tot-num { font-size: 1.35rem; font-weight: 700; }

/* Bloco de performance da carteira aberta. */
.cl-perf {
  display: flex; gap: 28px; flex-wrap: wrap; align-items: flex-start;
  padding: 12px 14px; margin-bottom: 14px;
  background: var(--priv-bg); border-radius: var(--priv-radius);
}
.cl-perf-num { font-size: 1.35rem; font-weight: 700; }
.cl-perf-sec { font-size: 1.1rem; font-weight: 600; }
.cl-perf-nota { flex: 1 1 260px; margin: 0; }

/* ── PSIM (Pair Simulator) ── */
/* Construtor do par: as duas pernas com o botão de troca no meio. auto/1fr nas
   pontas p/ o campo crescer e o botão ficar do tamanho que é. */
.ps-builder { margin-bottom: 18px; }
.ps-legs { display: grid; grid-template-columns: 1fr auto 1fr; align-items: end; gap: 10px; }
.ps-field { display: flex; flex-direction: column; gap: 5px; }
.ps-field label {
  font-size: 0.62rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--priv-text-3); display: inline-flex; align-items: center; gap: 6px;
}
.ps-field input, .ps-field select {
  padding: 9px 11px; border: 1px solid var(--priv-border-mid); border-radius: 6px;
  font-family: var(--font-sans); font-size: 0.86rem; color: var(--primary);
  background: var(--priv-card); width: 100%;
}
.ps-field input:focus, .ps-field select:focus { outline: none; border-color: var(--accent); }
.ps-field input.ps-ticker { text-transform: uppercase; font-weight: 700; letter-spacing: 0.04em; }
.ps-swap {
  border: 1px solid var(--priv-border-mid); background: var(--priv-card); cursor: pointer;
  border-radius: 6px; width: 36px; height: 36px; font-size: 1rem; color: var(--priv-text-2);
  margin-bottom: 1px; transition: all 0.15s;
}
.ps-swap:hover { background: var(--priv-bg); color: var(--primary); }
.ps-controls { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 12px; margin-top: 14px; }
.ps-controls .ps-field { min-width: 130px; }
.ps-controls .ps-field:first-child { min-width: auto; }

/* Ponto colorido das pernas — a cor é do _RK_SERIES (mesma paleta do growth). */
.ps-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; display: inline-block; }

.ps-snapshot {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px 18px;
  font-size: 0.78rem; color: var(--priv-text-2); margin-bottom: 16px;
}
.ps-snapshot .ps-leg { display: inline-flex; align-items: center; gap: 7px; }
.ps-snapshot .ps-leg b { color: var(--primary); font-weight: 700; letter-spacing: 0.03em; }
.ps-snapshot .ps-leg span { font-variant-numeric: tabular-nums; }
.ps-snapshot .ps-vs { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--priv-text-3); }
.ps-snapshot .ps-meta { margin-left: auto; font-size: 0.72rem; color: var(--priv-text-3); font-variant-numeric: tabular-nums; }

/* KPIs: mesma decisão do Risk — 5 colunas FIXAS p/ duas linhas limpas (são 10
   tiles), grid-auto-rows p/ as duas linhas terem a mesma altura, e SELETOR
   DUPLO porque há um `@media(max-width:640px) .lz-kpi-grid{1fr 1fr}` mais
   abaixo no arquivo que venceria por ordem de fonte na mesma especificidade. */
.lz-kpi-grid.ps-kpi-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  grid-auto-rows: 1fr; gap: 10px; margin-bottom: 18px;
}

/* Leitura grande da correlação, ao lado do gráfico móvel. */
.ps-corr-wrap { display: grid; grid-template-columns: 210px 1fr; gap: 18px; align-items: center; }
.ps-corr-readout { text-align: center; }
.ps-corr-big { font-size: 2.4rem; font-weight: 300; color: var(--primary); font-variant-numeric: tabular-nums; line-height: 1.1; }
.ps-corr-lbl { font-size: 0.62rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--priv-text-3); margin-bottom: 4px; }
.ps-corr-note { font-size: 0.7rem; color: var(--priv-text-3); margin-top: 6px; line-height: 1.5; }

/* Trilho do z-score (−3σ … +3σ) — portado do zscore-rail do PairLab. */
.ps-zrail { display: flex; align-items: center; gap: 10px; margin: 14px 0 4px; }
.ps-zrail > span { font-size: 0.62rem; color: var(--priv-text-3); font-weight: 700; flex: none; }
.ps-zrail-track {
  position: relative; flex: 1; height: 6px; border-radius: 99px;
  background: linear-gradient(90deg, rgba(13,148,136,0.35), var(--priv-border) 35%, var(--priv-border) 65%, rgba(217,119,6,0.35));
}
.ps-zrail-track i {
  position: absolute; top: 50%; width: 12px; height: 12px; border-radius: 50%;
  background: var(--primary); border: 2px solid var(--priv-card);
  transform: translate(-50%, -50%); transition: left 0.25s;
}
.ps-zrail-track u {
  position: absolute; top: -3px; bottom: -3px; left: 50%; width: 1px;
  background: var(--priv-border-mid);
}

.ps-canvas-var { position: relative; height: 130px; }

/* Tabela de execução: números alinhados à direita e tabulares — é uma ordem,
   tem que ser conferível de relance. */
.ps-exec-table td { padding: 9px 6px; font-size: 0.84rem; border-bottom: 1px solid var(--priv-border); }
.ps-exec-table tr:last-child td { border-bottom: none; }
.ps-exec-table td.ps-exec-num { text-align: right; font-variant-numeric: tabular-nums; font-weight: 700; color: var(--primary); white-space: nowrap; }
.ps-exec-table td.ps-exec-sec { text-align: right; font-variant-numeric: tabular-nums; color: var(--priv-text-3); white-space: nowrap; }
.ps-exec-lado { display: inline-flex; align-items: center; gap: 7px; font-weight: 700; }
.ps-exec-lado small { font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; font-size: 0.6rem; padding: 1px 6px; border-radius: 3px; }
.ps-exec-buy  small { background: rgba(0,131,0,0.1); color: #006b00; }
.ps-exec-sell small { background: rgba(232,123,164,0.16); color: #a63a65; }
/* "Manter" é ausência de ordem — verde de compra ali fazia a perna parada
   parecer um trade. */
.ps-exec-hold small { background: var(--priv-bg); color: var(--priv-text-3); }
/* Valor em real logo abaixo do dólar: o book é dolarizado, quem executa não é. */
.ps-exec-brl { font-size: 0.7rem; font-weight: 600; color: var(--priv-text-3); }
/* Linha do BDR: recuada e mais leve — é a MESMA posição por outra porta, não
   uma segunda ordem. */
.ps-exec-bdr td { padding-top: 2px; padding-bottom: 9px; border-bottom: none; opacity: 0.9; }
.ps-exec-bdr td:first-child { padding-left: 18px; }
.ps-exec-bdrtag {
  font-size: 0.55rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 1px 5px; border-radius: 3px; background: var(--priv-bg);
  color: var(--priv-text-3); border: 1px solid var(--priv-border-mid); margin-right: 5px;
}
.ps-vivo {
  margin-left: 7px; font-size: 0.55rem; font-weight: 800; letter-spacing: 0.08em;
  text-transform: uppercase; padding: 1px 5px; border-radius: 3px;
  background: rgba(0,131,0,0.1); color: #006b00;
}
/* Tamanho ótimo: destaque discreto dentro do bloco de impacto. */
.ps-otimo {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px;
  padding: 10px 14px; border-radius: var(--priv-radius); background: var(--priv-bg);
  border: 1px solid var(--priv-border); margin-bottom: 14px; font-size: 0.78rem;
  color: var(--priv-text-2);
}
.ps-otimo b { color: var(--primary); font-variant-numeric: tabular-nums; }

/* ── Pares ativos ── */
.ps-badge {
  display: inline-block; margin-left: 6px; min-width: 16px; padding: 0 5px;
  border-radius: 8px; font-size: 0.6rem; font-weight: 800; line-height: 16px;
  background: #dc2626; color: #fff; text-align: center;
}
.lz-tab-pill.active .ps-badge { background: #fff; color: #dc2626; }
.ps-par-table td { padding: 10px 8px; font-size: 0.8rem; vertical-align: middle; }
.ps-par-table td.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ps-par-nome { font-weight: 700; color: var(--primary); white-space: nowrap; }
.ps-par-nome small { display: block; font-weight: 500; color: var(--priv-text-3); font-size: 0.68rem; }
/* Drift fora da banda: fundo, não só cor de texto — a linha inteira tem que
   saltar numa tabela de 9 colunas. */
.ps-par-fora { background: rgba(220,38,38,0.045); }
.ps-drift-chip {
  display: inline-block; padding: 1px 6px; border-radius: 3px;
  font-variant-numeric: tabular-nums; font-weight: 700; font-size: 0.75rem;
}
.ps-drift-ok   { color: var(--priv-text-2); }
.ps-drift-fora { background: rgba(220,38,38,0.1); color: #b91c1c; }
.ps-par-venc {
  font-size: 0.58rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 1px 5px; border-radius: 3px; background: rgba(217,119,6,0.12); color: #92400e;
}
.ps-par-vazio { text-align: center; padding: 32px 12px; color: var(--priv-text-3); font-size: 0.82rem; }

/* Bloco de impacto no book: borda própria p/ ficar claro que é uma seção
   restrita (admin/back), não mais um card do fluxo. */
.ps-impacto-card { border-left: 3px solid var(--accent); }
.ps-restrito {
  font-size: 0.58rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase;
  padding: 2px 7px; border-radius: 3px; background: var(--priv-bg);
  color: var(--priv-text-3); border: 1px solid var(--priv-border-mid);
}

/* ── TABS ── */
.lz-tabs { display: flex; gap: 4px; margin-bottom: 20px; }
.lz-tab-pill {
  padding: 5px 14px; border-radius: 20px; font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase; cursor: pointer; border: none;
  background: transparent; color: var(--priv-text-3); transition: all 0.15s;
  font-family: var(--font-sans);
}
.lz-tab-pill:hover { background: var(--priv-bg); color: var(--primary); }
.lz-tab-pill.active { background: var(--primary); color: #fff; }

/* ── SEARCH ── */
.lz-search-bar { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.lz-search-bar input {
  flex: 1; height: 34px; padding: 0 12px;
  border: 1px solid var(--priv-border-mid); border-radius: var(--priv-radius);
  font-family: var(--font-sans); font-size: 0.8rem; background: var(--priv-bg); outline: none;
}
.lz-search-bar input:focus { border-color: var(--accent); background: #fff; }

/* ── FORM ── */
.lz-form-label {
  font-size: 0.7rem; font-weight: 600; color: var(--priv-text-2);
  letter-spacing: 0.04em; text-transform: uppercase; margin-bottom: 5px; display: block;
}
.lz-form-input {
  width: 100%; padding: 9px 12px; border: 1px solid var(--priv-border-mid);
  border-radius: var(--priv-radius); font-family: var(--font-sans); font-size: 0.84rem;
  color: var(--primary); outline: none; background: #fff; transition: border-color 0.15s;
  box-sizing: border-box;
}
.lz-form-input:focus { border-color: var(--accent); }
.lz-form-select {
  width: 100%; padding: 9px 12px; border: 1px solid var(--priv-border-mid);
  border-radius: var(--priv-radius); font-family: var(--font-sans); font-size: 0.84rem;
  color: var(--primary); outline: none; background: #fff; cursor: pointer; box-sizing: border-box;
}

/* ── TOGGLE ── */
.lz-toggle-wrap { display: flex; align-items: center; gap: 10px; }
.lz-toggle { position: relative; width: 42px; height: 24px; flex-shrink: 0; }
.lz-toggle input { opacity: 0; width: 0; height: 0; }
.lz-toggle-track {
  position: absolute; inset: 0; background: #ddd; border-radius: 24px; cursor: pointer; transition: .3s;
}
.lz-toggle-track::before {
  content: ''; position: absolute; width: 18px; height: 18px; left: 3px; top: 3px;
  background: #fff; border-radius: 50%; transition: .3s; box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.lz-toggle input:checked + .lz-toggle-track { background: var(--priv-pos); }
.lz-toggle input:checked + .lz-toggle-track::before { transform: translateX(18px); }
.lz-toggle-label { font-size: 0.8rem; font-weight: 600; color: var(--priv-text-2); }

/* ── RESPONSIVE ── */
@media(max-width:900px) {
  .lz-grid-3 { grid-template-columns: 1fr 1fr; }
  .lz-grid-2, .lz-home-grid { grid-template-columns: 1fr; }
}
@media(max-width:640px) {
  .priv-sidebar {
    width: var(--priv-sidebar-w);
    transform: translateX(-100%);
    transition: transform 0.25s ease, width 0.25s ease;
  }
  .priv-sidebar.mobile-open { transform: translateX(0); }
  .priv-main { margin-left: 0; }
  .priv-sidebar.collapsed ~ .priv-main { margin-left: 0; }
  .priv-content { padding: 16px 14px 40px; }
  .lz-kpi-grid { grid-template-columns: 1fr 1fr; }
  .priv-topbar { padding: 0 12px; }
  .priv-user-name, .priv-user-role { display: none; }

  /* Cards: keep within viewport (box-sizing e min-width:0 agora são globais) */
  .lz-card { padding: 16px; }
  .lz-card-header { flex-wrap: wrap; gap: 8px; }

  /* Inline flex/grid row containers (set via style="") that won't collapse on
     their own — force them to stack on mobile */
  .priv-stack-row { display: flex !important; flex-direction: column !important; gap: 16px !important; }
  .priv-stack-row > * { flex: 1 1 auto !important; width: 100% !important; min-width: 0 !important; }

  /* Generic table (Clientes Ativos): fit width instead of overflowing */
  table.generic-table { font-size: 0.82rem; }
  table.generic-table th, table.generic-table td { padding: 9px 8px; }

  /* Tables: let narrow tables fit, wide ones scroll smoothly with affordance */
  table.lz-table { min-width: 0; font-size: 0.78rem; }
  table.lz-table th, table.lz-table td { padding: 8px 7px; }
  table.lz-table .file-link { max-width: none; white-space: normal; overflow: visible; text-overflow: clip; }
  .lz-table-wrap {
    -webkit-overflow-scrolling: touch;
    background:
      linear-gradient(to right, var(--priv-card) 30%, rgba(255,255,255,0)) left center,
      linear-gradient(to left, var(--priv-card) 30%, rgba(255,255,255,0)) right center,
      radial-gradient(farthest-side at 0 50%, rgba(0,0,0,0.10), rgba(0,0,0,0)) left center,
      radial-gradient(farthest-side at 100% 50%, rgba(0,0,0,0.10), rgba(0,0,0,0)) right center;
    background-repeat: no-repeat;
    background-size: 36px 100%, 36px 100%, 14px 100%, 14px 100%;
    background-attachment: local, local, scroll, scroll;
  }

  /* ── Risk Monitor no celular ──
     Mini-tabelas de stats: rótulo pode quebrar em 2 linhas, valor nunca quebra.
     (o min-width:500px legado já não as pega — ver @media 768px lá em cima) */
  .rk-mini-table { font-size: 0.78rem; }
  .rk-mini-table td { padding: 8px 0; }
  .rk-mini-table td:first-child { padding-right: 10px; }
  .rk-mini-table td:last-child { white-space: nowrap; }

  /* (i) no toque: 13px é alvo pequeno demais para o dedo, e o balão não pode
     ser mais largo que a tela. */
  .lz-i { width: 16px; height: 16px; font-size: 10px; margin-left: 6px; }
  #lz-info-pop { max-width: calc(100vw - 24px); font-size: 0.78rem; }

  /* Barras de peso: encolhe o nome p/ sobrar trilho visível */
  .rk-wbar-row { grid-template-columns: minmax(0, 96px) 1fr 46px; gap: 6px; }
  .rk-wbar-name { font-size: 0.76rem; }
  .rk-wbar-val { font-size: 0.72rem; }

  /* Stress: 150px + 250px fixos não cabem — empilha nome / barra / números */
  .rk-stress-row { flex-wrap: wrap; gap: 6px; }
  .rk-stress-name { width: 100%; }
  .rk-stress-track { flex: 1 1 100%; }
  .rk-stress-figs { width: 100%; text-align: left; }

  .rk-canvas-var { height: 190px; }

  /* ── PSIM no celular ──
     Construtor: 1fr auto 1fr não cabe em 375px — as pernas empilham e o botão
     de troca vira uma faixa horizontal entre elas. */
  .ps-legs { grid-template-columns: 1fr; gap: 12px; }
  /* Largura fixa e centrado: esticado na linha inteira ele lia como mais um
     campo de texto vazio entre as duas pernas, não como botão. */
  .ps-swap { width: 46px; height: 30px; justify-self: center; margin: -2px 0; }
  .ps-controls { gap: 10px; }
  .ps-controls .ps-field { min-width: calc(50% - 5px); flex: 1; }
  /* 5 colunas fixas viram 2 — mesma decisão do .rk-kpi-grid abaixo, repetida
     aqui porque o seletor duplo do desktop também venceria dentro deste @media. */
  .lz-kpi-grid.ps-kpi-grid { grid-template-columns: 1fr 1fr; }
  /* Leitura da correlação em cima do gráfico, não ao lado (210px + gráfico
     colapsariam o canvas a quase nada) */
  .ps-corr-wrap { grid-template-columns: 1fr; gap: 12px; }
  .ps-canvas-var { height: 170px; }
  .ps-snapshot .ps-meta { margin-left: 0; flex-basis: 100%; }
  /* Ordem de execução: 4 colunas não cabem em 375px. Some a do preço unitário —
     ele já está na barra de snapshot logo acima — em vez de deixar a ordem
     rolando de lado. O .lz-table-wrap continua ali como rede de segurança. */
  .ps-exec-table td { padding: 8px 3px; font-size: 0.78rem; }
  .ps-exec-table td.ps-exec-sec { display: none; }
  .ps-exec-lado { gap: 4px; }
  .ps-exec-lado small { font-size: 0.55rem; padding: 1px 4px; }

  /* Pares ativos: 9 colunas nunca cabem em 375px, e o .lz-table-wrap rolaria
     com o DRIFT — o número que se abre o celular para ver — fora da primeira
     tela. Some com alvo, líquido, hedge e P&L; fica "que par, quanto pesa,
     quanto desviou, quando rebalancear". */
  .ps-par-table th:nth-child(2), .ps-par-table td:nth-child(2),
  .ps-par-table th:nth-child(5), .ps-par-table td:nth-child(5),
  .ps-par-table th:nth-child(6), .ps-par-table td:nth-child(6),
  .ps-par-table th:nth-child(8), .ps-par-table td:nth-child(8) { display: none; }
  .ps-par-table td { padding: 8px 4px; font-size: 0.74rem; }
  .ps-drift-chip { font-size: 0.7rem; padding: 1px 4px; }
  /* Três botões lado a lado eram sozinhos metade da largura da tabela —
     empilham e o resto cabe. */
  .ps-par-table td:last-child { white-space: normal; width: 62px; }
  .ps-par-table td:last-child .tperf-pair-btn {
    display: block; width: 100%; margin: 0 0 3px; padding: 3px 4px; font-size: 0.62rem;
  }
  /* Drift e peso: as duas pernas uma SOBRE a outra em vez de lado a lado. Em
     linha, "20.00% / 10.00%" + os dois chips de drift empurravam o número mais
     importante da tela para fora da borda visível. */
  .ps-par-table td:nth-child(4) .ps-drift-chip { display: block; text-align: right; }
  .ps-peso-l, .ps-peso-s { display: block; }
  .ps-peso-sep { display: none; }

  /* Growth do Trader: 360px come a tela inteira no celular */
  .tg-canvas { height: 260px; }
  /* O menu de comparação ancorado à direita vazaria a viewport estreita */
  .tg-compare { position: static; }
  .tg-compare-menu { left: 0; right: 0; width: auto; }

  /* Saldo banner: stack cleanly, scale value, drop vertical divider */
  .lz-saldo-banner { flex-direction: column; align-items: stretch; gap: 16px; padding: 20px; }
  .lz-saldo-banner .divider-v { display: none; }
  .lz-saldo-banner > div[style*="margin-left"] { margin-left: 0 !important; }
}
.priv-sidebar-overlay {
  display: none; position: fixed; inset: 0;
  background: rgba(0,0,0,0.4); z-index: 99;
}
.priv-sidebar-overlay.active { display: block; }
@media(max-width:480px) {
  .lz-grid-3 { grid-template-columns: 1fr; }
}

@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
#btn-refresh-cache { display: inline-block; }