:root {
                --bg: #070d18;
                --sidebar-bg: #0c1220;
                --card-bg: rgba(22, 30, 48, 0.82);
                --card-hover: rgba(36, 46, 68, 0.88);
                --border: rgba(255, 255, 255, 0.10);
                --border-bright: rgba(255, 255, 255, 0.20);
                --text-main: #f9fafb;
                --text-muted: #adb7c6;
                --accent-blue: #3b82f6;
                --accent-cyan: #06b6d4;
                --accent-emerald: #10b981;
                --accent-purple: #8b5cf6;
                --accent-amber: #f59e0b;
                --accent-red: #ef4444;
                --accent-pink: #ec4899;
                --accent-gold: #f59e0b;
            }
            * { margin:0; padding:0; box-sizing:border-box; }
            body {
                font-family: 'Manrope', 'Inter', sans-serif;
                background-color: var(--bg);
                background-image: 
                    radial-gradient(at 0% 0%, rgba(59, 130, 246, 0.12) 0px, transparent 50%),
                    radial-gradient(at 100% 100%, rgba(139, 92, 246, 0.08) 0px, transparent 50%);
                background-attachment: fixed;
                color: var(--text-main);
                min-height: 100vh;
                -webkit-font-smoothing: antialiased;
            }
            .app { display: flex; min-height: 100vh; }
            .sidebar {
                width: 270px;
                background: var(--sidebar-bg);
                border-right: 1px solid var(--border);
                padding: 32px 20px;
                position: fixed;
                height: 100vh;
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                z-index: 10;
                overflow-y: auto;
            }
            .brand-logo-only { display:flex; align-items:center; justify-content:center; min-height:150px; padding:8px 4px 14px; border-bottom:1px solid var(--border); margin-bottom:10px; }
            .brand-logo-img { width:100%; max-width:190px; height:auto; display:block; border-radius:8px; object-fit:contain; }
            .brand-logo-only + nav { margin-top:4px; }
            .brand {
                display: flex;
                align-items: center;
                gap: 14px;
                padding-bottom: 24px;
                border-bottom: 1px solid var(--border);
            }
            .brand-icon {
                width: 42px;
                height: 42px;
                border-radius: 12px;
                background: linear-gradient(135deg, var(--accent-blue), var(--accent-purple));
                display: flex;
                align-items: center;
                justify-content: center;
                box-shadow: 0 0 20px rgba(59, 130, 246, 0.4);
            }
            .brand-text { display: flex; flex-direction: column; }
            .brand-title { font-size: 17px; font-weight: 800; letter-spacing: -0.5px; color: #fff; }
            .brand-subtitle { font-size: 12px; font-weight: 600; color: var(--accent-cyan); text-transform: uppercase; letter-spacing: 1px; }
            .nav { display: flex; flex-direction: column; gap: 4px; margin-top: 20px; flex: 1; }
            .nav-group-label { margin:16px 10px 6px;font-size:12px;font-weight:900;letter-spacing:1.2px;color:#8f99ad;text-transform:uppercase; }
            .nav-group-label:first-child { margin-top:10px; }

            .nav-item {
                display: flex;
                align-items: center;
                gap: 14px;
                padding: 10px 14px;
                border-radius: 12px;
                color: var(--text-muted);
                text-decoration: none;
                font-size: 13px;
                font-weight: 600;
                transition: all 0.25s ease;
                border: 1px solid transparent;
            }
            .nav-item i { font-size: 15px; width: 20px; text-align: center; }
            .nav-item:hover {
                background: rgba(255, 255, 255, 0.04);
                color: var(--text-main);
                border-color: rgba(255, 255, 255, 0.05);
            }
            .nav-item.active {
                background: linear-gradient(90deg, rgba(59, 130, 246, 0.15), rgba(59, 130, 246, 0.05));
                color: #60a5fa;
                border-color: rgba(59, 130, 246, 0.3);
                box-shadow: inset 0 0 12px rgba(59, 130, 246, 0.1);
            }
            .nav-submenu { margin-top: 4px; }
            .nav-submenu summary {
                list-style: none;
                display: flex;
                align-items: center;
                gap: 10px;
                padding: 10px 14px;
                border-radius: 12px;
                color: var(--text-muted);
                font-size: 12px;
                font-weight: 700;
                cursor: pointer;
                user-select: none;
            }
            .nav-submenu summary::-webkit-details-marker { display: none; }
            .nav-submenu summary::after {
                content: '\203A';
                margin-left: auto;
                transform: rotate(90deg);
                transition: transform 0.15s ease;
                color: #8f99ad;
            }
            .nav-submenu[open] > summary::after { transform: rotate(-90deg); }
            .nav-submenu summary:hover { background: rgba(255,255,255,0.04); color: var(--text-main); }
            .nav-subitem { padding-left: 34px; font-size: 12px; margin-top: 2px; }
            .nav-submenu-account { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--border); }
            .sidebar-footer {
                padding-top: 20px;
                border-top: 1px solid var(--border);
                font-size: 12px;
                color: var(--text-muted);
            }
            .main { margin-left: 270px; flex: 1; padding: 40px 48px; }
            .top-bar {
                display: flex;
                justify-content: space-between;
                align-items: center;
                margin-bottom: 36px;
                flex-wrap: wrap;
                gap: 16px;
            }
            .page-header h1 { font-size: 28px; font-weight: 800; letter-spacing: -0.8px; margin-bottom: 4px; }
            .page-header p { color: var(--text-muted); font-size: 14px; font-weight: 500; }
            .top-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
            .status-pill {
                display: flex;
                align-items: center;
                gap: 10px;
                padding: 8px 16px;
                border-radius: 99px;
                font-size: 13px;
                font-weight: 600;
                backdrop-filter: blur(10px);
            }
            .status-online {
                background: rgba(16, 185, 129, 0.1);
                color: #34d399;
                border: 1px solid rgba(16, 185, 129, 0.25);
            }
            .demo-badge{display:inline-flex;align-items:center;gap:6px;padding:3px 7px;border-radius:999px;font-size:12px;font-weight:900;letter-spacing:.7px;color:#111827;background:#fbbf24;} .demo-status{background:rgba(251,191,36,.12);color:#fbbf24;border:1px solid rgba(251,191,36,.3);} .action-feed-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:12px}.action-feed-item{display:flex;gap:12px;align-items:flex-start;padding:15px;border:1px solid var(--border);border-radius:14px;background:rgba(255,255,255,.025);text-decoration:none;color:inherit}.action-feed-item:hover{border-color:var(--border-bright);background:rgba(255,255,255,.05)}.action-feed-icon{width:34px;height:34px;flex:0 0 34px;border-radius:10px;display:grid;place-items:center;background:rgba(96,165,250,.12);color:#60a5fa}.metric-positive{border-color:rgba(52,211,153,.25)!important}.metric-neutral{border-color:rgba(96,165,250,.25)!important}.metric-warning{border-color:rgba(251,191,36,.28)!important}.metric-critical{border-color:rgba(248,113,113,.3)!important}.skeleton{position:relative;overflow:hidden;background:rgba(255,255,255,.06);border-radius:8px}.skeleton:after{content:"";position:absolute;inset:0;transform:translateX(-100%);background:linear-gradient(90deg,transparent,rgba(255,255,255,.08),transparent);animation:zlaSkeleton 1.25s infinite}@keyframes zlaSkeleton{100%{transform:translateX(100%)}}
            .status-offline {
                background: rgba(239, 68, 68, 0.1);
                color: #f87171;
                border: 1px solid rgba(239, 68, 68, 0.25);
            }
            .status-dot {
                width: 8px;
                height: 8px;
                border-radius: 50%;
                background: currentColor;
                box-shadow: 0 0 10px currentColor;
            }
            .btn-primary, .btn-secondary, .btn-logout, .btn-plan {
                display: inline-flex;
                align-items: center;
                gap: 8px;
                padding: 10px 20px;
                border-radius: 12px;
                font-size: 13px;
                font-weight: 700;
                text-decoration: none;
                transition: all 0.25s ease;
                cursor: pointer;
                border: none;
            }
            .btn-primary {
                background: linear-gradient(135deg, var(--accent-blue), #2563eb);
                color: white;
                box-shadow: 0 4px 15px rgba(59, 130, 246, 0.35);
            }
            .btn-primary:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(59, 130, 246, 0.5); }
            .btn-secondary {
                background: rgba(255, 255, 255, 0.05);
                color: var(--text-main);
                border: 1px solid var(--border);
            }
            .btn-secondary:hover {
                background: rgba(255, 255, 255, 0.08);
                border-color: var(--border-bright);
            }
            .btn-logout {
                background: rgba(239, 68, 68, 0.1);
                color: #f87171;
                border: 1px solid rgba(239, 68, 68, 0.25);
            }
            .btn-logout:hover {
                background: rgba(239, 68, 68, 0.2);
                border-color: rgba(239, 68, 68, 0.4);
                transform: translateY(-1px);
            }
            .btn-plan {
                width: 100%;
                justify-content: center;
                margin-top: 16px;
                padding: 12px;
                font-size: 14px;
            }
            .btn-plan-alpha {
                background: linear-gradient(135deg, #6366f1, #8b5cf6);
                color: white;
            }
            .btn-plan-alpha:hover { transform: translateY(-2px); box-shadow: 0 4px 20px rgba(99, 102, 241, 0.4); }
            .btn-plan-beta {
                background: linear-gradient(135deg, #3b82f6, #06b6d4);
                color: white;
            }
            .btn-plan-beta:hover { transform: translateY(-2px); box-shadow: 0 4px 20px rgba(59, 130, 246, 0.4); }
            .btn-plan-omega {
                background: linear-gradient(135deg, #f59e0b, #ef4444);
                color: white;
            }
            .btn-plan-omega:hover { transform: translateY(-2px); box-shadow: 0 4px 20px rgba(245, 158, 11, 0.4); }
            .grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-bottom: 28px; }
            .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-bottom: 28px; }
            .grid-plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin: 0 auto 28px; max-width: 1120px; align-items: stretch; }
            .card-pro {
                background: var(--card-bg);
                backdrop-filter: blur(12px);
                border: 1px solid var(--border);
                border-radius: 14px;
                padding: 20px;
                transition: border-color 0.2s ease, background 0.2s ease;
                position: relative;
                overflow: hidden;
            }
            .card-pro::before {
                content: '';
                position: absolute;
                top: 0; left: 0; right: 0;
                height: 1px;
                background: linear-gradient(90deg, transparent, rgba(255,255,255,0.15), transparent);
            }
            .card-pro:hover {
                border-color: var(--border-bright);
                background: var(--card-hover);
            }
            a.card-pro, a.card-pro:visited, a.card-pro:hover, a.card-pro:active { color: var(--text-main); }
            a.card-pro h2, a.card-pro h3, a.card-pro h4 { color: #ffffff; }
            .modulo-card:hover { border-color: rgba(96,165,250,.55); }
            .modulo-card:focus-visible { outline: 2px solid #60a5fa; outline-offset: 2px; }
            .card-plan {
                background: var(--card-bg);
                backdrop-filter: blur(12px);
                border: 1px solid var(--border);
                border-radius: 20px;
                padding: 32px 28px;
                transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
                position: relative;
                overflow: hidden;
                text-align: left;
                display: flex;
                flex-direction: column;
            }
            .card-plan:hover { border-color: var(--border-bright); }
            .card-plan .btn-plan { margin-top: auto; }
            .card-plan.atual { border-color: #34d399; }
            .plan-head { display:flex; align-items:center; gap:12px; }
            .plan-head .plan-badge { margin:0; font-size:30px; line-height:1; }
            .plan-limites { display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--border); border:1px solid var(--border); border-radius:12px; overflow:hidden; margin:4px 0 18px; }
            .plan-limites div { background:rgba(255,255,255,.03); padding:12px 14px; }
            .plan-limites strong { display:block; font-size:18px; color:#fff; }
            .plan-limites span { font-size:12px; color:var(--text-muted); }
            .plan-mais summary { cursor:pointer; color:#93c5fd; font-size:13px; padding:8px 0 16px; list-style:none; }
            .plan-mais summary::-webkit-details-marker { display:none; }
            .plan-mais[open] summary { padding-bottom:4px; }
            .plan-selo-atual { display:block; text-align:center; padding:13px; border-radius:12px; border:1px solid #34d399; color:#34d399; font-weight:800; margin-top:auto; }
            .plan-topo { max-width:1120px; margin:0 auto 24px; display:flex; flex-wrap:wrap; gap:16px; align-items:center; justify-content:space-between; padding:18px 22px; border:1px solid rgba(52,211,153,.25); border-radius:14px; background:rgba(52,211,153,.06); }
            .plan-topo p { margin:0; color:#d1fae5; font-size:15px; line-height:1.5; }
            .plan-faq { max-width:1120px; margin:8px auto 0; display:grid; grid-template-columns:1fr 1fr; gap:24px; }
            .plan-faq h4 { margin:0 0 6px; color:#fff; font-size:15px; }
            .plan-faq p { margin:0; color:var(--text-muted); font-size:14px; line-height:1.6; }
            @media (max-width: 900px) { .plan-faq { grid-template-columns:1fr; } }
            .card-plan.featured {
                border-color: var(--accent-gold);
                background: rgba(245, 158, 11, 0.05);
            }
            .card-plan.featured::before {
                content: '★ Recomendado';
                position: absolute;
                top: 12px;
                right: 12px;
                background: linear-gradient(135deg, var(--accent-gold), #d97706);
                color: white;
                font-size: 12px;
                font-weight: 700;
                padding: 4px 12px;
                border-radius: 99px;
                letter-spacing: 0.5px;
            }
            .plan-badge {
                font-size: 36px;
                font-weight: 800;
                display: block;
                margin-bottom: 4px;
            }
            .plan-name {
                font-size: 20px;
                font-weight: 700;
                color: #fff;
                margin-bottom: 4px;
            }
            .plan-price {
                font-size: 32px;
                font-weight: 800;
                color: #fff;
                margin: 12px 0 4px;
            }
            .plan-price span {
                font-size: 16px;
                font-weight: 600;
                color: var(--text-muted);
            }
            .plan-description {
                color: var(--text-muted);
                font-size: 14px;
                line-height: 1.6;
                margin: 12px 0 20px;
            }
            .plan-features {
                list-style: none;
                padding: 0;
                margin: 16px 0;
                text-align: left;
            }
            .plan-features li {
                padding: 8px 0;
                color: var(--text-muted);
                font-size: 14px;
                display: flex;
                align-items: center;
                gap: 10px;
                border-bottom: 1px solid var(--border);
            }
            .plan-features li:last-child {
                border-bottom: none;
            }
            .plan-features li i {
                color: var(--accent-emerald);
                font-size: 14px;
                width: 20px;
            }
            .card-top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 16px; }
            .card-title {
                font-size: 13px;
                font-weight: 700;
                color: var(--text-muted);
                text-transform: uppercase;
                letter-spacing: 0.5px;
            }
            .card-val {
                font-size: 28px;
                font-weight: 800;
                letter-spacing: -1px;
                color: #fff;
                margin-top: 4px;
            }
            .card-icon {
                width: 46px;
                height: 46px;
                border-radius: 14px;
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 20px;
            }
            .glow-emerald { background: rgba(16, 185, 129, 0.12); color: #34d399; border: 1px solid rgba(16, 185, 129, 0.2); }
            .glow-blue { background: rgba(59, 130, 246, 0.12); color: #60a5fa; border: 1px solid rgba(59, 130, 246, 0.2); }
            .glow-purple { background: rgba(139, 92, 246, 0.12); color: #c084fc; border: 1px solid rgba(139, 92, 246, 0.2); }
            .glow-amber { background: rgba(245, 158, 11, 0.12); color: #fbbf24; border: 1px solid rgba(245, 158, 11, 0.2); }
            .glow-gold { background: rgba(245, 158, 11, 0.15); color: #fbbf24; border: 1px solid rgba(245, 158, 11, 0.3); }
            .card-sub {
                font-size: 13px;
                color: var(--text-muted);
                display: flex;
                align-items: center;
                gap: 6px;
                margin-top: 12px;
            }
            .badge-trend {
                padding: 2px 8px;
                border-radius: 6px;
                font-size: 12px;
                font-weight: 700;
            }
            .badge-up { background: rgba(16, 185, 129, 0.15); color: #34d399; }
            .grid-split { display: grid; grid-template-columns: 2fr 1fr; gap: 20px; }
            .section-head { margin-bottom: 20px; }
            .section-head h3 { font-size: 17px; font-weight: 700; color: #fff; }
            .section-head p { font-size: 13px; color: var(--text-muted); margin-top: 2px; }
            .section-head-center { text-align: center; margin-bottom: 32px; }
            .section-head-center h2 { font-size: 32px; font-weight: 800; color: #fff; letter-spacing: -0.5px; }
            .section-head-center p { font-size: 16px; color: var(--text-muted); margin-top: 8px; }
            .metric-box {
                background: rgba(255, 255, 255, 0.02);
                border: 1px solid var(--border);
                border-radius: 12px;
                padding: 16px;
                display: flex;
                align-items: center;
                justify-content: space-between;
                margin-bottom: 12px;
            }
            .metric-info { display: flex; align-items: center; gap: 14px; }
            .metric-info h4 { font-size: 13px; font-weight: 700; color: var(--text-main); }
            .metric-info p { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
            .metric-value { font-size: 26px; font-weight: 800; letter-spacing: -0.5px; }
            .table-wrap { overflow-x: auto; }
            table { width: 100%; border-collapse: collapse; text-align: left; font-size: 13px; }
            th {
                padding: 14px 12px;
                color: var(--text-muted);
                font-weight: 700;
                text-transform: uppercase;
                font-size: 12px;
                letter-spacing: 0.5px;
                border-bottom: 1px solid var(--border);
            }
            td { padding: 16px 12px; border-bottom: 1px solid var(--border); vertical-align: middle; }
            tr:last-child td { border-bottom: none; }
            tr:hover td { background: rgba(255, 255, 255, 0.02); }
            .prod-thumb { width: 42px; height: 42px; border-radius: 10px; object-fit: cover; border: 1px solid var(--border); }
            .prod-title { color: #fff; font-weight: 600; text-decoration: none; transition: color 0.2s; }
            .prod-title:hover { color: var(--accent-blue); }
            .form-group { margin-bottom: 16px; }
            .form-group label { display: block; font-size: 12px; font-weight: 700; color: var(--text-muted); margin-bottom: 6px; text-transform: uppercase; }
            .form-control {
                width: 100%;
                padding: 12px 16px;
                background: rgba(0, 0, 0, 0.2);
                border: 1px solid var(--border);
                border-radius: 10px;
                color: #fff;
                font-size: 14px;
                font-family: inherit;
            }
            .form-control:focus { outline: none; border-color: var(--accent-blue); }
            .checkbox-group {
                display: flex;
                align-items: center;
                gap: 10px;
                margin: 12px 0;
            }
            .checkbox-group input[type="checkbox"] {
                width: 18px;
                height: 18px;
                accent-color: var(--accent-blue);
                cursor: pointer;
            }
            .checkbox-group label {
                color: var(--text-muted);
                font-size: 13px;
                cursor: pointer;
            }
            .checkbox-group label a {
                color: var(--accent-blue);
                text-decoration: none;
            }
            .checkbox-group label a:hover {
                text-decoration: underline;
            }
            .payment-methods {
                display: grid;
                grid-template-columns: repeat(3, 1fr);
                gap: 10px;
                margin: 12px 0;
            }
            .payment-method {
                padding: 12px;
                border: 1px solid var(--border);
                border-radius: 10px;
                text-align: center;
                cursor: pointer;
                transition: all 0.25s ease;
                background: rgba(255,255,255,0.02);
            }
            .payment-method:hover {
                border-color: var(--border-bright);
                background: rgba(255,255,255,0.05);
            }
            .payment-method.selected {
                border-color: var(--accent-blue);
                background: rgba(59, 130, 246, 0.1);
            }
            .payment-method i {
                font-size: 24px;
                display: block;
                margin-bottom: 4px;
            }
            .payment-method span {
                font-size: 12px;
                color: var(--text-muted);
                font-weight: 600;
            }
            .warning-card {
                border-color: #f59e0b !important;
                background: rgba(245, 158, 11, 0.05) !important;
            }
            .warning-card .card-title {
                color: #fbbf24 !important;
            }

            /* DASHBOARD SAAS ZLA BINNAR v3.17.0 */
            .dash-kpi-grid { display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-bottom:18px; }
            .dash-kpi { min-height:150px;position:relative;overflow:hidden;background:linear-gradient(145deg,rgba(17,24,39,.92),rgba(10,15,25,.82)); }
            .dash-kpi:after { content:"";position:absolute;width:120px;height:120px;right:-45px;top:-55px;border-radius:50%;background:radial-gradient(circle,rgba(122,162,247,.16),transparent 68%);pointer-events:none; }
            .dash-kpi .card-title { display:flex;align-items:center;gap:8px;text-transform:none;font-size:12px;letter-spacing:.2px; }
            .kpi-icon { width:30px;height:30px;border-radius:9px;display:grid;place-items:center;background:rgba(122,162,247,.10);color:#7aa2f7; }
            .dash-kpi .card-val { font-size:29px;line-height:1.1;margin-top:12px;letter-spacing:-1px; }
            .kpi-foot { display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:13px; }
            .kpi-trend { font-size:12px;font-weight:800; }
            .kpi-spark { width:92px;height:28px;display:block; }
            .dashboard-section-title { display:flex;align-items:end;justify-content:space-between;gap:16px;margin:24px 0 12px; }
            .dashboard-section-title h2 { font-size:16px;font-weight:800;color:#fff;letter-spacing:-.3px; }
            .dashboard-section-title p { margin-top:4px;color:var(--text-muted);font-size:12px; }
            .dash-chart-grid { display:grid;grid-template-columns:minmax(0,1.75fr) minmax(280px,.75fr);gap:18px; }
            .dash-chart-card { min-height:330px; }
            .chart-header { display:flex;justify-content:space-between;align-items:flex-start;gap:15px;margin-bottom:18px; }
            .chart-title { color:#fff;font-size:14px;font-weight:800; }
            .chart-sub { color:var(--text-muted);font-size:12px;margin-top:4px; }
            .chart-legend { display:flex;gap:14px;flex-wrap:wrap;justify-content:flex-end; }
            .legend-item { display:flex;align-items:center;gap:6px;color:var(--text-muted);font-size:12px;font-weight:700; }
            .legend-dot { width:8px;height:8px;border-radius:50%; }
            .dash-line-chart { height:230px;position:relative;overflow:hidden;border-radius:14px;background:linear-gradient(180deg,rgba(255,255,255,.015),transparent); }
            .dash-line-chart svg { width:100%;height:100%;display:block; }
            .dash-gridline { stroke:rgba(255,255,255,.07);stroke-width:1; }
            .dash-revenue-line { fill:none;stroke:#7aa2f7;stroke-width:3;stroke-linecap:round;stroke-linejoin:round; }
            .dash-profit-line { fill:none;stroke:#bb9af7;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:5 5; }
            .dash-axis { fill:#94a1b3;font-size:12px;font-family:inherit; }
            .donut-wrap { display:flex;align-items:center;justify-content:center;gap:24px;min-height:250px; }
            .donut { width:180px;height:180px;border-radius:50%;position:relative;background:conic-gradient(#7aa2f7 0 var(--score-total, 0%),#334155 var(--score-total, 0%) 100%);box-shadow:0 0 45px rgba(122,162,247,.08); }
            .donut:after { content:"";position:absolute;inset:29px;border-radius:50%;background:#0c121d;border:1px solid rgba(255,255,255,.06); }
            .donut-center { position:absolute;inset:0;display:grid;place-items:center;z-index:2;text-align:center; }
            .donut-center strong { font-size:26px;color:#fff; }
            .donut-center span { display:block;color:var(--text-muted);font-size:12px;margin-top:2px; }
            .score-legend { display:grid;gap:12px;min-width:130px; }
            .score-row { display:grid;grid-template-columns:9px 1fr auto;gap:8px;align-items:center;font-size:12px;color:var(--text-muted); }
            .score-row b { color:#fff;font-size:12px; }
            .dash-products { margin-top:18px; }
            .dash-product-table { width:100%;border-collapse:collapse; }
            .dash-product-table th { text-align:left;padding:11px 10px;border-bottom:1px solid var(--border);color:#94a1b3;font-size:12px;text-transform:uppercase;letter-spacing:.6px; }
            .dash-product-table td { padding:13px 10px;border-bottom:1px solid rgba(255,255,255,.05);font-size:12px;color:#d6dbe4;vertical-align:middle; }
            .product-cell { display:flex;align-items:center;gap:10px;min-width:260px; }
            .product-avatar { width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:linear-gradient(135deg,rgba(122,162,247,.16),rgba(187,154,247,.12));color:#9fb8ff;font-size:12px; }
            .product-name { color:#fff;font-weight:800;max-width:360px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
            .product-id { color:#94a1b3;font-size:12px;margin-top:3px; }
            .table-metric { font-weight:800;color:#fff; }
            .table-mini-bar { width:90px;height:5px;background:rgba(255,255,255,.07);border-radius:99px;overflow:hidden;margin-top:5px; }
            .table-mini-bar span { display:block;height:100%;background:linear-gradient(90deg,#7aa2f7,#bb9af7);border-radius:inherit; }
            .dashboard-alert-strip { display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:18px; }
            .dash-alert-mini { padding:14px;border-radius:14px;border:1px solid var(--border);background:rgba(255,255,255,.025); }
            .dash-alert-mini strong { color:#fff;font-size:12px; }
            .dash-alert-mini span { display:block;color:var(--text-muted);font-size:12px;line-height:1.5;margin-top:4px; }
            .dash-source-bar { display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:18px;padding:12px 14px;border:1px solid var(--border);border-radius:14px;background:rgba(255,255,255,.018); }
            .source-status { display:flex;align-items:center;gap:7px;color:#a7b2c2;font-size:12px; }
            .source-status i { color:#34d399;font-size:12px; }
            .global-search { width:min(360px,38vw);position:relative; }
            .global-search input { width:100%;height:38px;padding:0 38px;border-radius:12px;border:1px solid var(--border);background:rgba(255,255,255,.035);color:#fff;outline:none;font:inherit;font-size:12px; }
            .global-search i { position:absolute;left:13px;top:12px;color:#94a1b3;font-size:12px; }
            .header-icon-btn { width:38px;height:38px;border:1px solid var(--border);border-radius:12px;background:rgba(255,255,255,.035);color:#aab4c2;display:grid;place-items:center;text-decoration:none;position:relative; }
            .header-notify { position:absolute;right:8px;top:7px;width:6px;height:6px;border-radius:50%;background:#7aa2f7;box-shadow:0 0 8px #7aa2f7; }
            @media (max-width: 1200px) {
                .dash-kpi-grid { grid-template-columns:repeat(2,1fr); }
                .dash-main-grid, .dash-bottom-grid { grid-template-columns:1fr; }
            }
            @media (max-width: 768px) {
                .dash-kpi-grid { grid-template-columns:1fr; }
                .dash-card-head { flex-direction:column; }
                .chart-wrap { height:230px; }
            }
            @media (max-width: 1200px) {
                .grid-4, .grid-3 { grid-template-columns: repeat(2, 1fr); }
                .grid-split { grid-template-columns: 1fr; }
                .grid-plans { grid-template-columns: 1fr; max-width: 400px; margin: 0 auto; }
                .payment-methods { grid-template-columns: repeat(3, 1fr); }
            }
            @media (max-width: 768px) {
                .sidebar { display: none; }
                .main { margin-left: 0; padding: 20px; }
                .grid-4, .grid-3 { grid-template-columns: 1fr; }
                .top-actions { flex-direction: column; align-items: stretch; }
                .grid-plans { grid-template-columns: 1fr; }
                .payment-methods { grid-template-columns: 1fr; }
            }