:root{
            --palomai-primary:#1d4ed8;/* azul mais intenso */
            --palomai-secondary:#059669;/* verde intenso */
            --palomai-accent:#ea580c;/* laranja intenso */
            --palomai-pink:#db2777;/* destaque */
            --palomai-bg:#ffffff; --palomai-text:#0f172a;
            }
            body{font-family:'Outfit',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif; color:var(--palomai-text); background:var(--palomai-bg);}    
            .navbar{background:#ffffff;border-bottom:2px solid #e2e8f0;}
            .navbar-brand{font-weight:800;color:var(--palomai-primary)!important}
            .hero{background:linear-gradient(135deg,#dbeafe 0%,#dcfce7 45%,#ffedd5 85%);} 
            .highlight{background:linear-gradient(90deg,rgba(29,78,216,.1),rgba(234,88,12,.1));border-left:6px solid var(--palomai-accent);padding:1rem;border-radius:.75rem}
            .img-frame{position:relative;border-radius:1rem;overflow:hidden;border:4px solid #fff;box-shadow:0 16px 40px rgba(0,0,0,.12);min-height:260px}
            .badge-soft{background:#fee2e2;color:#b91c1c}
            .card{border:1px solid #e5e7eb;border-radius:1rem}
            .section-title{color:#0f172a}
            .kpi{font-weight:800;font-size:1.25rem;color:#0f172a}
            .btn-primary{background:var(--palomai-primary);border-color:var(--palomai-primary)}
            .btn-success{background:var(--palomai-secondary);border-color:var(--palomai-secondary)}
            .btn-accent{background:var(--palomai-accent);border-color:var(--palomai-accent);color:#fff}
            .footer{color:#475569}
            .table thead th{background:#f8fafc}
            .cap-badge{display:inline-block;padding:.35rem .6rem;border-radius:999px;background:#f0f9ff;color:#0369a1;font-weight:700}
            #graficos .chart-card {
            border: 1px solid #e5e7eb;
            border-radius: 1rem;
            box-shadow: 0 6px 18px rgba(2,6,23,.06);
            height: 100%;
            }
            #graficos .chart-title {
            margin: 0 0 .25rem 0;
            color: #0f172a;
            font-weight: 700;
            font-size: 1.05rem;
            line-height: 1.3;
            }
            #graficos .chart-note {
            font-size: .85rem;
            color: #64748b;
            margin-top: .5rem;
            }
            #graficos .chart-wrap {
            /* garante respiro e limite de altura do canvas */
            max-height: 360px;
            }
            #graficos canvas {
            /* deixa o canvas fluido dentro do card */
            width: 100% !important;
            height: auto !important;
            max-height: 320px !important;
            }
            /* micro badges/selos */
            #graficos .chip {
            display: inline-block; font-size:.72rem; font-weight:600;
            background:#f1f5f9; color:#0f172a; border-radius:999px; padding:.25rem .5rem;
            margin-left:.25rem;
            }
                        /* ========= MOLDURA CELULAR (CSS local) ========= */
            .phone-frame{
            width: 270px;
            max-width: 100%;
            height: 520px;
            border-radius: 34px;
            position: relative;
            background: #0b0f16;
            box-shadow: 0 18px 40px rgba(0,0,0,.28);
            border: 1px solid rgba(255,255,255,.08);
            padding: 14px;
            }
            
            /* “borda” interna */
            .phone-frame::before{
            content:"";
            position:absolute;
            inset: 7px;
            border-radius: 28px;
            border: 1px solid rgba(255,255,255,.06);
            pointer-events:none;
            }
            
            .phone-notch{
            position:absolute;
            top: 10px;
            left: 50%;
            transform: translateX(-50%);
            width: 140px;
            height: 26px;
            background: #0b0f16;
            border-radius: 0 0 16px 16px;
            display:flex;
            align-items:center;
            justify-content:center;
            gap: 10px;
            z-index: 2;
            }
            
            .phone-speaker{
            width: 58px;
            height: 6px;
            border-radius: 999px;
            background: rgba(255,255,255,.22);
            }
            
            .phone-camera{
            width: 10px;
            height: 10px;
            border-radius: 999px;
            background: rgba(255,255,255,.22);
            box-shadow: inset 0 0 0 2px rgba(0,0,0,.25);
            }
            
            .phone-screen{
            width: 100%;
            height: 100%;
            border-radius: 26px;
            overflow: hidden;
            background: #fff;
            position: relative;
            }
            
            .phone-iframe{
            width: 100%;
            height: 100%;
            border: 0;
            display:block;
            }
            
            .phone-homebar{
            position:absolute;
            bottom: 10px;
            left: 50%;
            transform: translateX(-50%);
            width: 110px;
            height: 5px;
            border-radius: 999px;
            background: rgba(255,255,255,.18);
            z-index: 2;
            }
            /* =============================================== */