/* Styles authentiques du projet client CMP transmis par son propriétaire */

        /* ==============================================
           THÈME CLAIR / SOMBRE
        ============================================== */
        :root {
            --primary: #0D47A1;
            --primary-light: #1565C0;
            --primary-lighter: #42A5F5;
            --secondary: #E65100;
            --accent: #FF9800;
            --accent-light: #FFB74D;
            --bg: #F5F7FA;
            --surface: #FFFFFF;
            --surface-hover: #F0F2F5;
            --text: #1A1A2E;
            --text-secondary: #6B7280;
            --text-light: #9CA3AF;
            --border: #E5E7EB;
            --shadow: 0 4px 16px rgba(0,0,0,0.06);
            --radius: 12px;
            --header-h: 60px;
            --footer-h: 64px;
            --sidebar-w: 240px;
            --success: #2E7D32;
            --danger: #C62828;
        }
        
        [data-theme="dark"] {
            --primary: #1E88E5;
            --primary-light: #42A5F5;
            --primary-lighter: #64B5F6;
            --secondary: #FF8A50;
            --accent: #FFB74D;
            --accent-light: #FFCC80;
            --bg: #121212;
            --surface: #1E1E1E;
            --surface-hover: #2A2A2A;
            --text: #E0E0E0;
            --text-secondary: #9CA3AF;
            --text-light: #6B7280;
            --border: #333;
            --shadow: 0 4px 16px rgba(0,0,0,0.4);
        }
        
        * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Segoe UI', 'Inter', system-ui, sans-serif; }
        html, body { height: 100%; overflow: hidden; background: var(--bg); color: var(--text); transition: background 0.25s, color 0.25s; }
        
        ::-webkit-scrollbar { width: 5px; }
        ::-webkit-scrollbar-track { background: var(--bg); }
        ::-webkit-scrollbar-thumb { background: var(--primary-lighter); border-radius: 8px; }
        
        #app { position: relative; width: 100%; height: 100%; overflow: hidden; }
        
        /* ===== HEADER ===== */
        .app-header {
            position: fixed; top: 0; left: 0; right: 0; height: var(--header-h);
            background: var(--surface); border-bottom: 1px solid var(--border);
            display: flex; align-items: center; justify-content: space-between;
            padding: 0 16px; z-index: 1000;
            box-shadow: 0 1px 6px rgba(0,0,0,0.04);
            transition: background 0.25s, border-color 0.25s;
        }
        .app-header .brand {
            display: flex; align-items: center; gap: 8px;
            font-size: 1.15rem; font-weight: 700;
            color: var(--primary); cursor: pointer;
        }
        .app-header .brand i { font-size: 1.6rem; color: var(--secondary); }
        .header-actions { display: flex; align-items: center; gap: 8px; }
        .user-badge {
            display: none; align-items: center; gap: 6px;
            background: var(--surface-hover); padding: 4px 12px 4px 8px;
            border-radius: 30px; cursor: pointer;
            border: 1px solid var(--border);
            transition: background 0.2s;
        }
        .user-badge:hover { background: var(--border); }
        .user-badge .avatar-mini {
            width: 28px; height: 28px; border-radius: 50%;
            background: var(--primary); color: white;
            display: flex; align-items: center; justify-content: center;
            font-weight: 600; font-size: 0.75rem;
        }
        .user-badge .user-name { font-weight: 500; font-size: 0.85rem; color: var(--text); }
        .btn-icon {
            width: 34px; height: 34px; border-radius: 50%;
            border: none; background: var(--surface-hover);
            color: var(--text-secondary);
            display: flex; align-items: center; justify-content: center;
            cursor: pointer; font-size: 1.1rem;
            transition: all 0.2s;
        }
        .btn-icon:hover { background: var(--border); color: var(--text); }
        .lang-toggle { font-weight: 600; font-size: 0.75rem; letter-spacing: 0.3px; text-transform: uppercase; padding: 0 4px; }
        
        /* ===== SIDEBAR ===== */
        .desktop-nav {
            display: none; position: fixed; left: 0; top: var(--header-h); bottom: 0;
            width: var(--sidebar-w); background: var(--surface);
            border-right: 1px solid var(--border); z-index: 500;
            padding: 16px 10px; flex-direction: column; gap: 2px;
            overflow-y: auto; transition: background 0.25s, border-color 0.25s;
        }
        .nav-link {
            display: flex; align-items: center; gap: 12px;
            padding: 10px 14px; border-radius: 10px;
            color: var(--text-secondary); font-size: 0.9rem; font-weight: 500;
            cursor: pointer; border: none; background: none; width: 100%;
            transition: all 0.2s;
        }
        .nav-link i { font-size: 1.2rem; width: 22px; text-align: center; }
        .nav-link:hover { background: var(--surface-hover); color: var(--text); }
        .nav-link.active { background: var(--primary); color: white; }
        .nav-link .badge-count {
            margin-left: auto; background: var(--secondary); color: white;
            font-size: 0.65rem; padding: 1px 8px; border-radius: 12px;
            font-weight: 700;
        }
        .sidebar-footer {
            margin-top: auto; padding-top: 12px; border-top: 1px solid var(--border);
            text-align: center; font-size: 0.75rem; color: var(--text-light);
        }
        .sidebar-footer .btn-connect {
            padding: 8px 12px; border-radius: 30px; border: none;
            background: var(--primary); color: white; font-weight: 600; font-size: 0.8rem;
            cursor: pointer; transition: opacity 0.2s;
            width: 100%; display: flex; align-items: center; justify-content: center; gap: 6px;
        }
        .sidebar-footer .btn-connect:hover { opacity: 0.85; }
        
        /* ===== FOOTER MOBILE ===== */
        .app-footer {
            display: flex; position: fixed; bottom: 0; left: 0; right: 0;
            height: var(--footer-h); background: var(--surface);
            border-top: 1px solid var(--border); z-index: 1000;
            justify-content: space-around; align-items: center;
            padding-bottom: env(safe-area-inset-bottom);
            transition: background 0.25s, border-color 0.25s;
        }
        .footer-btn {
            display: flex; flex-direction: column; align-items: center; gap: 1px;
            color: var(--text-secondary); background: none; border: none;
            font-size: 0.6rem; cursor: pointer; transition: all 0.2s;
            padding: 4px 8px; border-radius: 8px;
        }
        .footer-btn i { font-size: 1.3rem; transition: transform 0.2s; }
        .footer-btn.active { color: var(--primary); }
        .footer-btn.active i { transform: translateY(-2px); }
        .footer-btn .badge-dot {
            position: relative; top: -8px; right: -12px; display: inline-block;
            width: 6px; height: 6px; background: var(--secondary); border-radius: 50%;
        }
        
        /* ===== CONTENEUR PAGES ===== */
        .page-container {
            position: fixed; top: var(--header-h); left: 0; right: 0; bottom: 0;
            overflow: hidden; z-index: 100; background: var(--bg);
            transition: background 0.25s;
        }
        .page-wrapper {
            position: absolute; top: 0; left: 0; right: 0; bottom: 0;
            overflow-y: auto; padding: 16px 16px 80px;
            opacity: 0; transform: translateX(100%);
            transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1), opacity 0.35s ease;
            will-change: transform, opacity;
            -webkit-overflow-scrolling: touch; background: var(--bg);
        }
        .page-wrapper.active { opacity: 1; transform: translateX(0); }
        .page-wrapper.exit-left { transform: translateX(-20%); opacity: 0.2; }
        .page-wrapper.exit-right { transform: translateX(20%); opacity: 0.2; }
        .page-content { max-width: 1100px; margin: 0 auto; min-height: 100%; }
        
        /* ===== ÉLÉMENTS COMMUNS ===== */
        .section-title {
            background: var(--surface); padding: 0.6rem 1rem;
            border-left: 4px solid var(--primary);
            margin: 1.5rem 0 1rem;
            font-weight: 700; border-radius: 0 12px 12px 0;
            display: flex; align-items: center; gap: 8px;
            color: var(--text); border: 1px solid var(--border); border-left-width: 4px;
            font-size: 0.95rem;
        }
        .section-title i { color: var(--primary); }
        
        .section-header {
            display: flex; align-items: center; justify-content: space-between;
            margin-bottom: 18px; flex-wrap: wrap; gap: 8px;
        }
        .section-header h2 { font-size: 1.2rem; font-weight: 700; display: flex; align-items: center; gap: 8px; }
        .section-header h2 i { color: var(--primary); }
        .section-header .btn-action {
            background: var(--surface); border: 1px solid var(--border);
            padding: 6px 14px; border-radius: 30px; font-weight: 600;
            font-size: 0.8rem; color: var(--text); cursor: pointer;
            transition: all 0.2s; display: flex; align-items: center; gap: 6px;
        }
        .section-header .btn-action:hover { background: var(--primary); color: white; border-color: var(--primary); }
        
        .card {
            background: var(--surface); border-radius: var(--radius);
            padding: 16px; margin-bottom: 14px;
            box-shadow: var(--shadow); border: 1px solid var(--border);
            transition: background 0.25s, border-color 0.25s;
        }
        .empty-state { text-align: center; padding: 40px 16px; color: var(--text-secondary); }
        .empty-state i { font-size: 3rem; color: var(--border); margin-bottom: 16px; display: block; }
        .empty-state h3 { font-size: 1.1rem; color: var(--text); margin-bottom: 6px; }
        .empty-state p { font-size: 0.9rem; margin-bottom: 16px; }
        
        .badge {
            display: inline-block; padding: 2px 12px; border-radius: 20px;
            font-size: 0.7rem; font-weight: 700; text-transform: uppercase;
            letter-spacing: 0.2px;
        }
        .badge-success { background: #e8f5e9; color: var(--success); }
        .badge-warning { background: #fff3e0; color: var(--secondary); }
        .badge-danger { background: #ffebee; color: var(--danger); }
        .badge-info { background: #e3f2fd; color: var(--primary); }
        .badge-muted { background: #f5f5f5; color: var(--text-secondary); }
        [data-theme="dark"] .badge-success { background: #1b3a1b; color: #66bb6a; }
        [data-theme="dark"] .badge-warning { background: #3a2a1a; color: #ffb74d; }
        [data-theme="dark"] .badge-danger { background: #3a1a1a; color: #ef5350; }
        [data-theme="dark"] .badge-info { background: #1a2a3a; color: #42a5f5; }
        [data-theme="dark"] .badge-muted { background: #2a2a2a; color: #9ca3af; }
        
        .progress-wrapper { margin: 12px 0; }
        .progress-label { display: flex; justify-content: space-between; font-size: 0.8rem; color: var(--text-secondary); margin-bottom: 4px; }
        .progress-track { background: var(--border); border-radius: 8px; height: 6px; overflow: hidden; }
        .progress-fill { height: 100%; border-radius: 8px; transition: width 0.6s ease; background: var(--primary); }
        .progress-fill.warning { background: var(--accent); }
        .progress-fill.danger { background: var(--danger); }
        
        .status-card {
            background: var(--surface); border-radius: var(--radius);
            padding: 14px 16px; margin-bottom: 10px;
            box-shadow: var(--shadow); border: 1px solid var(--border);
            display: flex; align-items: center; gap: 14px;
            cursor: pointer; transition: all 0.2s;
            border-left: 4px solid var(--primary);
        }
        .status-card:hover { transform: translateX(4px); box-shadow: 0 8px 20px rgba(0,0,0,0.06); }
        .status-card.contract { border-left-color: var(--primary); }
        .status-card.saving { border-left-color: var(--secondary); }
        .status-card.empty { border-left-color: var(--border); cursor: default; opacity: 0.6; }
        .status-card.empty:hover { transform: none; }
        .status-icon {
            width: 42px; height: 42px; border-radius: 12px;
            display: flex; align-items: center; justify-content: center;
            font-size: 1.2rem; color: white; flex-shrink: 0;
        }
        .status-card.contract .status-icon { background: var(--primary); }
        .status-card.saving .status-icon { background: var(--secondary); }
        .status-card.empty .status-icon { background: var(--border); color: var(--text-light); }
        .status-content { flex: 1; min-width: 0; }
        .status-content h4 { font-size: 0.95rem; font-weight: 600; margin-bottom: 1px; }
        .status-content .sub { font-size: 0.8rem; color: var(--text-secondary); }
        .status-amount { font-size: 1rem; font-weight: 700; color: var(--primary); margin-top: 4px; }
        .chevron { color: var(--border); font-size: 1.1rem; margin-left: auto; flex-shrink: 0; }
        
        .btn-primary {
            background: var(--primary); color: white; border: none;
            padding: 10px 24px; border-radius: 30px;
            font-size: 0.9rem; font-weight: 600; cursor: pointer;
            transition: all 0.25s;
            display: inline-flex; align-items: center; gap: 8px;
        }
        .btn-primary:hover { background: var(--primary-light); transform: translateY(-2px); box-shadow: 0 4px 12px rgba(13,71,161,0.25); }
        .btn-secondary {
            background: var(--surface); color: var(--text);
            border: 1px solid var(--border); padding: 10px 24px;
            border-radius: 30px; font-size: 0.9rem; font-weight: 600;
            cursor: pointer; transition: all 0.25s;
            display: inline-flex; align-items: center; gap: 8px;
        }
        .btn-secondary:hover { background: var(--surface-hover); }
        .btn-outline {
            background: transparent; border: 2px solid rgba(255,255,255,0.3);
            color: white; padding: 8px 20px; border-radius: 30px;
            font-size: 0.85rem; font-weight: 600; cursor: pointer;
            transition: all 0.25s;
        }
        .btn-outline:hover { background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.5); }
        
        .btn-submit {
            width: 100%; padding: 12px;
            background: var(--primary); color: white; border: none; border-radius: 12px;
            font-size: 0.95rem; font-weight: 700; cursor: pointer;
            transition: all 0.2s; display: flex; align-items: center;
            justify-content: center; gap: 8px;
        }
        .btn-submit:hover { background: var(--primary-light); }
        .btn-text {
            background: none; border: none; color: var(--primary);
            font-size: 0.8rem; font-weight: 600; cursor: pointer;
            display: inline-flex; align-items: center; gap: 4px;
        }
        .btn-text:hover { text-decoration: underline; }
        
        .form-group { margin-bottom: 14px; }
        .form-group label { display: block; margin-bottom: 4px; font-size: 0.8rem; color: var(--text-secondary); font-weight: 600; }
        .input-group { position: relative; display: flex; align-items: center; }
        .input-group i { position: absolute; left: 12px; color: var(--text-light); font-size: 1rem; }
        .form-control, .form-select {
            width: 100%; padding: 10px 14px;
            border: 1.5px solid var(--border); border-radius: 10px;
            font-size: 0.9rem; transition: all 0.2s;
            background: var(--bg); color: var(--text);
        }
        .form-control:focus, .form-select:focus { outline: none; border-color: var(--primary); background: var(--surface); }
        .form-control.no-icon { padding-left: 14px; }
        .form-select {
            appearance: none;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath fill='%23666' d='M5 7L0 2h10z'/%3E%3C/svg%3E");
            background-repeat: no-repeat; background-position: right 12px center;
            padding-right: 32px;
        }
        .input-group .form-control { padding-left: 36px; }
        
        .radio-group { display: flex; gap: 10px; flex-wrap: wrap; }
        .radio-item {
            flex: 1; border: 1.5px solid var(--border); border-radius: 10px;
            padding: 10px; text-align: center; cursor: pointer;
            transition: all 0.2s; background: var(--bg);
        }
        .radio-item.active { border-color: var(--primary); background: rgba(13,71,161,0.05); }
        .radio-item input { display: none; }
        .radio-item i { font-size: 1.1rem; color: var(--primary); margin-bottom: 2px; display: block; }
        .radio-item span { font-size: 0.8rem; color: var(--text-secondary); }
        
        .row { display: flex; flex-wrap: wrap; gap: 10px; }
        .row.g-3 { gap: 12px; }
        .col-md-3 { flex: 1 1 calc(25% - 10px); min-width: 120px; }
        .col-md-4 { flex: 1 1 calc(33.33% - 10px); min-width: 140px; }
        .col-md-6 { flex: 1 1 calc(50% - 10px); min-width: 160px; }
        .col-md-12 { flex: 1 1 100%; }
        .required:after { content: " *"; color: var(--danger); }
        .mt-2 { margin-top: 6px; }
        .mb-3 { margin-bottom: 12px; }
        .mb-4 { margin-bottom: 20px; }
        .text-center { text-align: center; }
        .text-danger { color: var(--danger); }
        .text-success { color: var(--success); }
        .text-muted { color: var(--text-secondary); }
        .fw-bold { font-weight: 700; }
        .d-flex { display: flex; }
        .justify-content-between { justify-content: space-between; }
        .align-items-center { align-items: center; }
        .flex-wrap { flex-wrap: wrap; }
        .gap-2 { gap: 6px; }
        .me-2 { margin-right: 6px; }
        .ms-2 { margin-left: 6px; }
        .w-100 { width: 100%; }
        .p-3 { padding: 12px; }
        .border { border: 1px solid var(--border); }
        .rounded-4 { border-radius: 12px; }
        .bg-light { background: var(--bg); }
        .photo-preview { margin-top: 8px; max-width: 120px; border-radius: 12px; box-shadow: var(--shadow); display: none; border: 2px solid var(--primary); }
        .alert-info-custom {
            background: var(--bg); border-left: 4px solid var(--primary);
            border-radius: 12px; padding: 12px 16px;
            border: 1px solid var(--border); border-left-width: 4px;
            font-size: 0.85rem;
        }
        .loan-details {
            background: var(--bg); border-radius: 12px; padding: 0.8rem;
            margin-top: 0.8rem; border: 1px solid var(--border);
            font-size: 0.9rem;
        }
        .loan-details p { margin-bottom: 4px; }
        
        .skeleton {
            background: linear-gradient(90deg, var(--border) 25%, var(--bg) 50%, var(--border) 75%);
            background-size: 200% 100%; animation: shimmer 1.5s infinite;
            border-radius: 6px;
        }
        @keyframes shimmer {
            0% { background-position: 200% 0; }
            100% { background-position: -200% 0; }
        }
        
        /* ===== MODALES ===== */
        .modal-overlay {
            display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0;
            background: rgba(0,0,0,0.5); z-index: 3000;
            align-items: flex-end; justify-content: center;
            backdrop-filter: blur(3px); padding: 16px;
        }
        .modal-overlay.active { display: flex; }
        .modal-sheet {
            background: var(--surface); border-radius: 20px 20px 0 0;
            width: 100%; max-width: 480px; max-height: 90vh;
            overflow-y: auto; box-shadow: 0 -8px 30px rgba(0,0,0,0.2);
            animation: slideUp 0.3s ease;
            border: 1px solid var(--border);
            transition: background 0.25s, border-color 0.25s;
        }
        @keyframes slideUp {
            from { transform: translateY(60px); opacity: 0; }
            to { transform: translateY(0); opacity: 1; }
        }
        .modal-header {
            padding: 20px 20px 16px;
            border-radius: 20px 20px 0 0;
            position: relative;
            color: white;
        }
        .modal-header .modal-icon { font-size: 2rem; opacity: 0.8; margin-bottom: 4px; display: block; }
        .modal-header h2 { font-size: 1.1rem; font-weight: 700; margin-bottom: 2px; }
        .modal-header p { opacity: 0.85; font-size: 0.85rem; }
        .modal-header .btn-close {
            position: absolute; top: 12px; right: 12px;
            background: rgba(255,255,255,0.15); border: none; color: white;
            width: 30px; height: 30px; border-radius: 50%; cursor: pointer;
            font-size: 1rem; display: flex; align-items: center;
            justify-content: center; transition: background 0.2s;
        }
        .modal-header .btn-close:hover { background: rgba(255,255,255,0.3); }
        .modal-body { padding: 20px; }
        .modal-footer-text { text-align: center; padding: 0 20px 20px; font-size: 0.85rem; color: var(--text-secondary); }
        .action-buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 16px; }
        .detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 16px; }
        .detail-item {
            background: var(--bg); padding: 10px; border-radius: 10px;
            text-align: center; border: 1px solid var(--border);
        }
        .detail-item .label { font-size: 0.75rem; color: var(--text-secondary); margin-bottom: 2px; display: flex; align-items: center; justify-content: center; gap: 4px; }
        .detail-item .value { font-size: 1rem; font-weight: 700; color: var(--text); }
        .detail-item .value.montant { color: var(--primary); }
        .detail-item .value.restant { color: var(--danger); }
        
        .remb-item {
            display: flex; justify-content: space-between; align-items: center;
            padding: 10px 12px; background: var(--bg); border: 1px solid var(--border);
            border-radius: 10px; margin-bottom: 8px;
        }
        .remb-item .remb-info { display: flex; align-items: center; gap: 10px; }
        .remb-item .remb-icon {
            width: 32px; height: 32px; background: rgba(46,125,50,0.08);
            color: var(--success); border-radius: 50%;
            display: flex; align-items: center; justify-content: center;
            font-size: 0.9rem;
        }
        .remb-item .remb-date { font-size: 0.75rem; color: var(--text-secondary); }
        .remb-item .remb-montant { font-weight: 700; color: var(--success); font-size: 0.95rem; }
        
        /* ===== NOTIFICATIONS ===== */
        .notification-item {
            background: var(--surface);
            border-radius: var(--radius);
            padding: 14px 16px;
            margin-bottom: 10px;
            box-shadow: var(--shadow);
            border: 1px solid var(--border);
            display: flex;
            align-items: flex-start;
            gap: 12px;
            transition: all 0.2s;
            cursor: pointer;
        }
        .notification-item:hover { background: var(--surface-hover); }
        .notification-item.unread { border-left: 4px solid var(--primary); background: rgba(13,71,161,0.03); }
        .notification-item .notif-icon {
            width: 36px; height: 36px; border-radius: 50%;
            display: flex; align-items: center; justify-content: center;
            font-size: 1rem; color: white; flex-shrink: 0;
            margin-top: 2px;
        }
        .notification-item .notif-icon.demande_creee { background: var(--primary); }
        .notification-item .notif-icon.remboursement_effectue { background: var(--success); }
        .notification-item .notif-icon.demande_prevalidee { background: var(--secondary); }
        .notification-item .notif-icon.default { background: var(--text-light); }
        .notification-item .notif-content { flex: 1; }
        .notification-item .notif-content h4 { font-size: 0.9rem; font-weight: 600; margin-bottom: 2px; }
        .notification-item .notif-content p { font-size: 0.85rem; color: var(--text-secondary); margin-bottom: 2px; }
        .notification-item .notif-content .notif-date { font-size: 0.7rem; color: var(--text-light); }
        .notification-item .notif-read-status {
            font-size: 0.6rem;
            padding: 2px 10px;
            border-radius: 12px;
            background: var(--primary);
            color: white;
            flex-shrink: 0;
        }
        .notification-item .notif-read-status.read { background: var(--border); color: var(--text-secondary); }
        
        /* ===== HOME STATS ===== */
        .home-stats-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 12px;
            margin: 16px 0 20px;
        }
        .home-stat-card {
            background: var(--surface);
            padding: 16px;
            border-radius: var(--radius);
            text-align: center;
            box-shadow: var(--shadow);
            border: 1px solid var(--border);
            transition: transform 0.2s;
        }
        .home-stat-card:hover { transform: translateY(-3px); }
        .home-stat-card .stat-number {
            font-size: 1.8rem;
            font-weight: 800;
            color: var(--primary);
        }
        .home-stat-card .stat-number.orange { color: var(--secondary); }
        .home-stat-card .stat-number.green { color: var(--success); }
        .home-stat-card .stat-label {
            font-size: 0.8rem;
            color: var(--text-secondary);
            margin-top: 2px;
        }
        .home-stat-card .stat-icon {
            font-size: 1.5rem;
            display: block;
            margin-bottom: 4px;
        }
        
        /* ===== WEBVIEW MODAL ===== */
        .webview-modal-overlay {
            display: none;
            position: fixed;
            top: 0; left: 0; right: 0; bottom: 0;
            background: rgba(0,0,0,0.7);
            z-index: 9999;
            align-items: center;
            justify-content: center;
            backdrop-filter: blur(4px);
            padding: 20px;
        }
        .webview-modal-overlay.active { display: flex; }
        .webview-modal-container {
            background: var(--surface);
            border-radius: 16px;
            width: 100%;
            max-width: 900px;
            height: 90vh;
            max-height: 800px;
            display: flex;
            flex-direction: column;
            box-shadow: 0 20px 60px rgba(0,0,0,0.3);
            overflow: hidden;
            position: relative;
            animation: slideUp 0.3s ease;
        }
        .webview-modal-header {
            padding: 16px 20px;
            background: var(--primary);
            color: white;
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-shrink: 0;
            border-radius: 16px 16px 0 0;
        }
        .webview-modal-header h3 {
            font-size: 1rem;
            font-weight: 600;
            margin: 0;
            display: flex;
            align-items: center;
            gap: 10px;
        }
        .webview-modal-header .btn-close-webview {
            background: rgba(255,255,255,0.15);
            border: none;
            color: white;
            width: 32px;
            height: 32px;
            border-radius: 50%;
            cursor: pointer;
            font-size: 1.2rem;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: background 0.2s;
        }
        .webview-modal-header .btn-close-webview:hover {
            background: rgba(255,255,255,0.3);
        }
        .webview-modal-body {
            flex: 1;
            position: relative;
            background: var(--bg);
            overflow: hidden;
        }
        .webview-modal-body iframe {
            width: 100%;
            height: 100%;
            border: none;
            background: white;
        }
        .webview-modal-body .webview-loader {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 12px;
            color: var(--text-secondary);
        }
        .webview-modal-body .webview-loader i {
            font-size: 2.5rem;
            animation: spin 1s linear infinite;
            color: var(--primary);
        }
        .webview-modal-body .webview-error {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            text-align: center;
            padding: 30px;
            color: var(--text-secondary);
            display: none;
        }
        .webview-modal-body .webview-error i {
            font-size: 3rem;
            color: var(--danger);
            margin-bottom: 16px;
            display: block;
        }
        .webview-modal-body .webview-error h4 {
            color: var(--text);
            margin-bottom: 8px;
        }
        .webview-modal-body .webview-error .btn-retry {
            margin-top: 16px;
            padding: 10px 24px;
            background: var(--primary);
            color: white;
            border: none;
            border-radius: 30px;
            cursor: pointer;
            font-weight: 600;
            transition: background 0.2s;
        }
        .webview-modal-body .webview-error .btn-retry:hover {
            background: var(--primary-light);
        }
        
        @media (max-width: 768px) {
            .webview-modal-container {
                max-height: 95vh;
                border-radius: 12px;
            }
            .webview-modal-header {
                padding: 12px 16px;
                border-radius: 12px 12px 0 0;
            }
            .webview-modal-header h3 {
                font-size: 0.9rem;
            }
        }
        
        /* ===== RESPONSIVE ===== */
        @media (min-width: 768px) {
            :root { --header-h: 64px; --footer-h: 0; }
            .app-footer { display: none !important; }
            .desktop-nav { display: flex; }
            .page-wrapper { left: var(--sidebar-w); padding: 24px 32px 24px; }
            .page-content { padding: 0; }
        }
        @media (max-width: 767px) {
            .user-badge .user-name { display: none; }
            .page-wrapper { padding: 12px 12px 72px; }
            .col-md-3, .col-md-4, .col-md-6 { flex: 1 1 100%; }
            .detail-grid { grid-template-columns: 1fr 1fr; }
            .action-buttons { grid-template-columns: 1fr; }
        }
        
        .swal2-container { z-index: 99999 !important; }
        
        .ui-autocomplete {
            max-height: 200px; overflow-y: auto; background: var(--surface);
            border: 1px solid var(--border); border-radius: 8px;
            z-index: 9999; box-shadow: var(--shadow);
        }
        .ui-menu-item { padding: 8px 14px; cursor: pointer; color: var(--text); font-size: 0.85rem; }
        .ui-menu-item:hover { background: var(--surface-hover); }
        .ui-state-focus { background: var(--primary); color: white; }
        
        .page-loader {
            display: flex; justify-content: center; align-items: center;
            height: 100%; min-height: 160px; color: var(--text-secondary);
        }
        .page-loader i { font-size: 2rem; animation: spin 1s linear infinite; color: var(--primary); }
        @keyframes spin { to { transform: rotate(360deg); } }
    
        /* ==========================================================
           V4 — TOTAL REFERENCE UI SYSTEM
           Visual direction: the supplied fintech poster/mobile mockup.
           No backend behaviour is changed here; only the presentation
           layer and page composition are replaced.
        ========================================================== */
        :root {
            --ref-bg: #f6f4ee;
            --ref-surface: #fffdf8;
            --ref-surface-2: #f1eee6;
            --ref-ink: #121212;
            --ref-muted: #7c7a74;
            --ref-line: #e7e2d8;
            --ref-yellow: #f4c85b;
            --ref-yellow-2: #f0b735;
            --ref-orange: #ff7a00;
            --ref-orange-soft: #ffe0b7;
            --ref-green: #17c6a3;
            --ref-red: #ef5b5b;
            --ref-radius-xl: 28px;
            --ref-radius-lg: 22px;
            --ref-radius-md: 16px;
            --ref-radius-sm: 12px;
            --ref-shadow: 0 20px 55px rgba(25, 23, 18, .08);
        }
        [data-theme="dark"] {
            --ref-bg: #0e0e0d;
            --ref-surface: #171715;
            --ref-surface-2: #20201d;
            --ref-ink: #faf9f5;
            --ref-muted: #aaa79f;
            --ref-line: #2e2d28;
            --ref-yellow: #e4ad36;
            --ref-yellow-2: #d99616;
            --ref-orange: #ff7a00;
            --ref-orange-soft: #4a2b09;
            --ref-green: #17c6a3;
            --ref-red: #f27777;
            --ref-shadow: 0 22px 60px rgba(0, 0, 0, .34);
        }
        html, body { background: var(--ref-bg) !important; color: var(--ref-ink) !important; }
        body { font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important; }
        #app { background: var(--ref-bg); }

        .app-header {
            height: 74px !important;
            background: var(--ref-bg) !important;
            border: 0 !important;
            box-shadow: none !important;
            padding: 14px max(18px, calc((100vw - 1180px)/2)) !important;
            z-index: 1200 !important;
            gap: 12px;
        }
        .app-header .brand { display: none !important; }
        .app-header .header-actions { width: 100%; justify-content: flex-end; gap: 8px; }
        .user-badge { order: -3; margin-right: auto; background: transparent !important; border: 0 !important; padding: 0 !important; }
        .user-badge .avatar-mini {
            width: 42px !important; height: 42px !important; border-radius: 50% !important;
            background: linear-gradient(135deg,#222,#777) !important; color:#fff !important;
            box-shadow: 0 5px 18px rgba(0,0,0,.12); font-size: .8rem !important;
            border: 2px solid rgba(255,255,255,.8);
        }
        .header-actions::after { content: ''; display: none; }
        .ref-head-action {
            width: 42px !important; height: 42px !important; border-radius: 14px !important;
            background: var(--ref-surface) !important; color: var(--ref-ink) !important;
            border: 1px solid var(--ref-line) !important; position: relative;
        }
        .ref-head-action:hover { background: var(--ref-surface-2) !important; transform: none !important; }
        #headerLogout { order: 4; }
        #themeToggle { order: 3; }
        #langToggle { order: 2; }
        #headerNotificationBtn { order: 1; }
        #pwaInstallBtn { order:0; }
        .app-header .app-brand { order:-5; }
        .ref-notif-badge {
            position:absolute; right:-2px; top:-2px; min-width:17px; height:17px; padding:0 4px;
            border-radius:9px; display:none; align-items:center; justify-content:center;
            background:var(--ref-orange); color:#fff; font-size:.58rem; font-weight:800;
            border:2px solid var(--ref-bg);
        }
        .header-user-name { display:none; }

        .desktop-nav { display:none !important; }
        .app-footer {
            display:flex !important; position:fixed !important; left:50% !important; transform:translateX(-50%);
            bottom:max(10px, env(safe-area-inset-bottom)) !important; height:76px !important;
            width:min(720px, calc(100vw - 22px)) !important; border:1px solid var(--ref-line) !important;
            background:rgba(255,253,248,.96) !important; backdrop-filter:blur(18px);
            border-radius:26px !important; padding:7px 8px !important; gap:2px !important;
            box-shadow:0 18px 45px rgba(20,18,12,.14) !important; z-index:1200 !important;
        }
        [data-theme="dark"] .app-footer { background:rgba(23,23,21,.96) !important; }
        .footer-btn {
            flex:1 !important; height:60px !important; border-radius:20px !important; gap:3px !important;
            font-size:.58rem !important; color:var(--ref-muted) !important; padding:6px 3px !important;
        }
        .footer-btn i { font-size:1.28rem !important; }
        .footer-btn.active { background:var(--ref-ink) !important; color:#fff !important; }
        .footer-btn.active i { transform:none !important; }
        .footer-btn .badge-dot { background:var(--ref-orange) !important; }
        .footer-btn[data-page="credit"] { display:flex !important; }
        #footerNotificationsDot { display:none !important; }

        .page-container {
            position:fixed !important; top:74px !important; left:0 !important; right:0 !important; bottom:0 !important;
            background:var(--ref-bg) !important;
        }
        .page-wrapper {
            padding:12px 16px 108px !important; background:var(--ref-bg) !important;
        }
        .page-content { max-width:1180px !important; width:100%; }

        .ref-page { max-width:1180px; margin:0 auto; }
        .ref-topline { display:flex; align-items:flex-end; justify-content:space-between; gap:14px; margin:0 0 18px; }
        .ref-kicker { font-size:.66rem; font-weight:800; letter-spacing:.16em; text-transform:uppercase; color:var(--ref-orange); margin-bottom:5px; }
        .ref-page-title { margin:0; font-size:clamp(1.45rem, 2vw, 2.1rem); line-height:1.05; letter-spacing:-.04em; }
        .ref-page-sub { margin:6px 0 0; color:var(--ref-muted); font-size:.87rem; line-height:1.45; }
        .ref-toolbar { display:flex; gap:8px; flex-wrap:wrap; }
        .ref-btn {
            border:1px solid var(--ref-line); background:var(--ref-surface); color:var(--ref-ink); border-radius:14px;
            min-height:42px; padding:0 14px; display:inline-flex; align-items:center; justify-content:center; gap:8px;
            cursor:pointer; font-weight:800; font-size:.78rem; transition:.2s ease;
        }
        .ref-btn:hover { transform:translateY(-1px); background:var(--ref-surface-2); }
        .ref-btn.primary { background:var(--ref-ink); color:#fff; border-color:var(--ref-ink); }
        .ref-btn.accent { background:var(--ref-yellow); border-color:var(--ref-yellow); color:#1a160e; }
        .ref-btn i { font-size:1rem; }

        .ref-layout { display:grid; grid-template-columns:minmax(0, 1.4fr) minmax(320px, .8fr); gap:16px; }
        .ref-card { background:var(--ref-surface); border:1px solid var(--ref-line); border-radius:var(--ref-radius-lg); box-shadow:var(--ref-shadow); }
        .ref-card.pad { padding:18px; }
        .ref-dashboard { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(260px,.85fr); gap:16px; align-items:stretch; }

        .ref-hero {
            position:relative; overflow:hidden; background:#121212; color:#fff; border-radius:var(--ref-radius-xl);
            padding:24px; min-height:260px; box-shadow:var(--ref-shadow);
        }
        .ref-hero::before { content:''; position:absolute; width:330px; height:330px; border-radius:50%; border:54px solid #fe5d16; right:-110px; bottom:-170px; opacity:.95; }
        .ref-hero::after { content:''; position:absolute; width:170px; height:170px; border-radius:50%; background:#f39b1f; left:-85px; bottom:-75px; opacity:.9; }
        .ref-hero-content { position:relative; z-index:2; max-width:620px; }
        .ref-hero-tag { display:inline-flex; align-items:center; gap:7px; padding:7px 10px; border-radius:999px; background:rgba(255,255,255,.09); border:1px solid rgba(255,255,255,.1); font-size:.66rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
        .ref-hero h1 { font-size:clamp(2rem, 4vw, 3.4rem); letter-spacing:-.06em; margin:18px 0 10px; line-height:.97; max-width:640px; }
        .ref-hero p { color:rgba(255,255,255,.74); max-width:560px; font-size:.9rem; line-height:1.55; }
        .ref-hero-actions { display:flex; flex-wrap:wrap; gap:8px; margin-top:18px; }
        .ref-hero .ref-btn { background:#fff; border-color:#fff; color:#111; }
        .ref-hero .ref-btn.secondary { background:transparent; color:#fff; border-color:rgba(255,255,255,.22); }

        .ref-balance {
            background:var(--ref-yellow); color:#201b12; border-radius:var(--ref-radius-lg); padding:18px; min-height:260px;
            position:relative; overflow:hidden; display:flex; flex-direction:column; justify-content:space-between;
        }
        .ref-balance::after { content:''; position:absolute; width:170px; height:170px; border-radius:50%; border:32px solid rgba(255,255,255,.25); right:-80px; top:-80px; }
        .ref-balance-head { display:flex; justify-content:space-between; align-items:center; gap:10px; position:relative; z-index:1; }
        .ref-balance-label { font-size:.68rem; text-transform:uppercase; letter-spacing:.1em; font-weight:900; opacity:.72; }
        .ref-balance-eye { width:34px; height:34px; border-radius:50%; background:rgba(255,255,255,.25); border:0; display:grid; place-items:center; color:#241b0c; }
        .ref-balance-number { font-size:clamp(2rem, 4vw, 3rem); font-weight:900; letter-spacing:-.06em; line-height:1; margin:10px 0 6px; position:relative; z-index:1; }
        .ref-balance-sub { font-size:.74rem; opacity:.72; position:relative; z-index:1; }
        .ref-balance-bottom { display:flex; align-items:center; justify-content:space-between; gap:8px; position:relative; z-index:1; margin-top:20px; }
        .ref-small-label { font-size:.62rem; opacity:.65; text-transform:uppercase; letter-spacing:.09em; font-weight:800; }
        .ref-small-value { font-size:1.1rem; font-weight:900; }
        .ref-dark-chip { border:0; background:#111; color:#fff; border-radius:999px; padding:11px 15px; font-size:.7rem; font-weight:900; cursor:pointer; }

        .ref-section-title { font-size:1.02rem; font-weight:900; letter-spacing:-.03em; margin:0 0 11px; }
        .ref-section-head { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:11px; }
        .ref-section-head a, .ref-link { color:var(--ref-orange); font-size:.73rem; font-weight:900; text-decoration:none; cursor:pointer; }

        .ref-actions-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }
        .ref-action {
            border:1px solid var(--ref-line); background:var(--ref-surface); border-radius:18px; padding:13px 8px;
            min-height:92px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px;
            color:var(--ref-ink); cursor:pointer; transition:.2s ease; text-align:center;
        }
        .ref-action:hover { transform:translateY(-2px); box-shadow:0 10px 20px rgba(0,0,0,.05); }
        .ref-action-icon { width:42px; height:42px; border-radius:14px; background:var(--ref-surface-2); display:grid; place-items:center; font-size:1.08rem; }
        .ref-action:nth-child(2n) .ref-action-icon { background:#fff3cc; }
        .ref-action:nth-child(3n) .ref-action-icon { background:#daf7ef; }
        [data-theme="dark"] .ref-action:nth-child(2n) .ref-action-icon { background:#3e3217; }
        [data-theme="dark"] .ref-action:nth-child(3n) .ref-action-icon { background:#15372f; }
        .ref-action span { font-size:.66rem; font-weight:800; line-height:1.15; }

        .ref-stat-strip { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:16px; }
        .ref-stat { background:var(--ref-surface); border:1px solid var(--ref-line); border-radius:17px; padding:13px; }
        .ref-stat .icon { width:34px; height:34px; border-radius:11px; background:var(--ref-surface-2); display:grid; place-items:center; margin-bottom:10px; }
        .ref-stat strong { display:block; font-size:1.08rem; letter-spacing:-.03em; }
        .ref-stat small { color:var(--ref-muted); font-size:.67rem; }

        .ref-product-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:12px; }
        .ref-product { border-radius:20px; border:1px solid var(--ref-line); overflow:hidden; background:var(--ref-surface); }
        .ref-product-visual { height:145px; position:relative; overflow:hidden; background:#f2e8d3; }
        .ref-product-visual::before { content:''; position:absolute; width:210px; height:210px; border-radius:50%; background:#f7c95a; right:-70px; top:-85px; }
        .ref-product-visual::after { content:''; position:absolute; width:135px; height:135px; border-radius:50%; background:#ff7a00; left:-50px; bottom:-80px; }
        .ref-product-copy { padding:14px; }
        .ref-product-copy h3 { font-size:.87rem; margin:0 0 4px; }
        .ref-product-copy p { margin:0; color:var(--ref-muted); font-size:.72rem; line-height:1.45; }
        .ref-product-pill { display:inline-flex; padding:5px 9px; margin-bottom:10px; border-radius:999px; background:#111; color:#fff; font-size:.58rem; font-weight:900; text-transform:uppercase; letter-spacing:.08em; }

        .ref-list { display:flex; flex-direction:column; gap:9px; }
        .ref-list .status-card, .ref-list .notification-item { background:var(--ref-surface) !important; border:1px solid var(--ref-line) !important; border-left:0 !important; border-radius:18px !important; box-shadow:none !important; margin:0 !important; }
        .ref-list .status-card:hover { transform:translateY(-1px) !important; }
        .status-card { min-height:84px; padding:13px 14px !important; }
        .status-icon { width:44px !important; height:44px !important; border-radius:14px !important; background:var(--ref-surface-2) !important; color:var(--ref-ink) !important; }
        .status-card.contract .status-icon, .status-card.saving .status-icon { background:#fff0c7 !important; color:#7f5f10 !important; }
        [data-theme="dark"] .status-card.contract .status-icon, [data-theme="dark"] .status-card.saving .status-icon { background:#3d3017 !important; color:#f3cb65 !important; }
        .status-amount { color:var(--ref-ink) !important; font-size:.98rem !important; }
        .chevron { color:var(--ref-muted) !important; }

        .section-header, .cmp-page-top, .cmp-section-head { margin-bottom:14px !important; }
        .section-header h2, .cmp-page-top h1, .cmp-section-head h2 { letter-spacing:-.035em !important; }
        .card, .cmp-info-card, .cmp-profile-head, .cmp-profile-stat, .mini-card, .detail-item {
            background:var(--ref-surface) !important; border-color:var(--ref-line) !important; box-shadow:none !important;
        }
        .cmp-profile-head { border-radius:24px !important; }
        .cmp-profile-stat { border-radius:17px !important; }
        .cmp-profile-stats { gap:10px !important; }
        .cmp-profile-stat strong { color:var(--ref-ink) !important; }
        .cmp-profile-stat small, .cmp-info-label { color:var(--ref-muted) !important; }
        .btn-primary, .btn-submit { background:var(--ref-ink) !important; color:#fff !important; border-radius:14px !important; }
        .btn-secondary, .btn-action { background:var(--ref-surface) !important; color:var(--ref-ink) !important; border-color:var(--ref-line) !important; border-radius:14px !important; }
        .btn-primary:hover, .btn-secondary:hover, .btn-action:hover, .btn-submit:hover { transform:translateY(-1px); }
        .form-control, .form-select { background:var(--ref-surface-2) !important; border-color:var(--ref-line) !important; color:var(--ref-ink) !important; border-radius:14px !important; }
        .section-title { background:var(--ref-surface) !important; border:1px solid var(--ref-line) !important; border-left:4px solid var(--ref-orange) !important; border-radius:16px !important; }
        .notification-item.unread { background:#fff8e6 !important; }
        [data-theme="dark"] .notification-item.unread { background:#2b2416 !important; }
        .notif-icon { border-radius:14px !important; }
        .empty-state { background:var(--ref-surface) !important; border:1px dashed var(--ref-line); border-radius:20px; }
        .skeleton { background:var(--ref-surface-2) !important; }

        .ref-form-shell { background:var(--ref-surface); border:1px solid var(--ref-line); border-radius:24px; padding:16px; }
        .ref-form-hero { padding:18px; border-radius:20px; background:#111; color:#fff; margin-bottom:14px; }
        .ref-form-hero h2 { margin:0 0 6px; font-size:1.25rem; letter-spacing:-.04em; }
        .ref-form-hero p { margin:0; color:rgba(255,255,255,.66); font-size:.78rem; line-height:1.45; }
        .step-indicator { border-radius:999px !important; background:var(--ref-surface-2) !important; border:1px solid var(--ref-line) !important; color:var(--ref-muted) !important; padding:6px 9px !important; }
        .step-indicator.active { background:var(--ref-yellow) !important; color:#17120a !important; border-color:var(--ref-yellow) !important; }
        .step-number { background:transparent !important; color:inherit !important; }

        .ref-auth-note { padding:12px 14px; border-radius:16px; background:var(--ref-surface-2); border:1px solid var(--ref-line); color:var(--ref-muted); font-size:.72rem; line-height:1.45; }


        .modal-overlay { background:rgba(15,15,14,.72) !important; backdrop-filter:blur(8px); }
        .modal-sheet, .modal-content { background:var(--ref-surface) !important; border:1px solid var(--ref-line) !important; border-radius:28px !important; box-shadow:0 28px 80px rgba(0,0,0,.22) !important; }
        .modal-header { background:#111 !important; color:#fff !important; border-bottom:0 !important; }
        .modal-header h2, .modal-header p { color:#fff !important; }
        .modal-body { background:var(--ref-surface) !important; }
        .modal-header .btn-close { color:#fff !important; }
        .webview-modal-container { background:var(--ref-surface) !important; border:1px solid var(--ref-line) !important; border-radius:26px !important; }
        .webview-modal-header { background:#111 !important; color:#fff !important; }


        /* V5 professional shell ------------------------------------------------ */
        .app-brand { display:flex; align-items:center; gap:9px; cursor:pointer; min-width:150px; user-select:none; }
        .app-brand-logo { width:43px; height:43px; border-radius:14px; object-fit:cover; border:1px solid var(--ref-line); box-shadow:0 8px 20px rgba(0,0,0,.08); }
        .app-brand-copy { display:flex; flex-direction:column; line-height:1; }
        .app-brand-copy strong { font-size:.82rem; letter-spacing:.14em; }
        .app-brand-copy span { font-size:.52rem; font-weight:900; letter-spacing:.16em; margin-top:5px; color:var(--ref-orange); }
        .home-v5-grid { display:grid; grid-template-columns:minmax(0,1.32fr) minmax(280px,.68fr); gap:16px; }
        .v5-hero { position:relative; overflow:hidden; min-height:330px; border-radius:28px; background:var(--ref-ink); color:#fff; padding:26px; display:flex; align-items:flex-end; box-shadow:0 18px 48px rgba(0,0,0,.12); }
        .v5-hero-media { position:absolute; inset:0; background-image:linear-gradient(90deg,rgba(0,0,0,.74),rgba(0,0,0,.22) 60%,rgba(0,0,0,.12)), url('https://images.pexels.com/photos/8837502/pexels-photo-8837502.jpeg?auto=compress&cs=tinysrgb&w=1500'); background-position:center; background-size:cover; opacity:.84; }
        .v5-hero-copy { position:relative; z-index:2; max-width:690px; }
        .v5-eyebrow { display:inline-flex; padding:7px 10px; border:1px solid rgba(255,255,255,.18); border-radius:999px; background:rgba(255,255,255,.08); text-transform:uppercase; font-size:.61rem; font-weight:900; letter-spacing:.11em; }
        .v5-hero h1 { font-size:clamp(2.3rem,4.8vw,4.2rem); line-height:.92; letter-spacing:-.065em; max-width:650px; margin:16px 0 12px; }
        .v5-hero p { font-size:.9rem; max-width:570px; line-height:1.55; color:rgba(255,255,255,.76); }
        .v5-hero-actions { display:flex; flex-wrap:wrap; gap:8px; margin-top:18px; }
        .v5-hero-actions .ref-btn { background:#fff; color:#111; border-color:#fff; }
        .v5-hero-actions .ref-btn.alt { background:rgba(255,255,255,.08); color:#fff; border-color:rgba(255,255,255,.2); }
        .v5-stat-card { border-radius:24px; background:var(--ref-yellow); color:#1f180d; padding:18px; min-height:330px; display:flex; flex-direction:column; justify-content:space-between; overflow:hidden; position:relative; }
        .v5-stat-card:after { content:''; position:absolute; width:220px; height:220px; border:34px solid rgba(255,255,255,.25); border-radius:50%; right:-110px; top:-95px; }
        .v5-stat-number { font-size:clamp(2.1rem,4vw,3.4rem); font-weight:950; letter-spacing:-.065em; line-height:1; position:relative; z-index:1; }
        .v5-stat-label { font-size:.68rem; font-weight:900; text-transform:uppercase; letter-spacing:.1em; opacity:.68; position:relative; z-index:1; }
        .v5-stat-meta { display:grid; grid-template-columns:1fr 1fr; gap:8px; position:relative; z-index:1; }
        .v5-stat-mini { background:rgba(255,255,255,.26); border-radius:15px; padding:10px; }
        .v5-stat-mini strong { display:block; font-size:1.05rem; }
        .v5-stat-mini small { font-size:.62rem; opacity:.72; }
        .v5-section { margin-top:20px; }
        .v5-section-head { display:flex; align-items:end; justify-content:space-between; gap:10px; margin-bottom:11px; }
        .v5-section-head h2 { font-size:1.06rem; letter-spacing:-.04em; margin:0; }
        .v5-section-head p { margin:3px 0 0; color:var(--ref-muted); font-size:.72rem; }
        .v5-benefit-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:11px; }
        .v5-benefit { position:relative; min-height:170px; overflow:hidden; border-radius:21px; background:var(--ref-surface); border:1px solid var(--ref-line); box-shadow:var(--ref-shadow); padding:14px; }
        .v5-benefit-media { height:86px; border-radius:15px; overflow:hidden; margin-bottom:12px; background:var(--ref-surface-2); }
        .v5-benefit-media img { width:100%; height:100%; object-fit:cover; display:block; }
        .v5-benefit h3 { font-size:.8rem; margin:0 0 4px; }
        .v5-benefit p { margin:0; color:var(--ref-muted); font-size:.68rem; line-height:1.42; }
        .v5-story-card { position:relative; min-height:245px; overflow:hidden; border-radius:24px; border:1px solid var(--ref-line); background:var(--ref-surface); }
        .v5-story-card img { width:100%; height:100%; object-fit:cover; position:absolute; inset:0; }
        .v5-story-overlay { position:absolute; inset:auto 0 0; padding:18px; background:linear-gradient(transparent,rgba(0,0,0,.84)); color:#fff; min-height:120px; display:flex; flex-direction:column; justify-content:flex-end; }
        .v5-story-overlay h3 { margin:0 0 4px; font-size:1rem; letter-spacing:-.03em; }
        .v5-story-overlay p { margin:0; font-size:.68rem; color:rgba(255,255,255,.72); line-height:1.4; }
        .v5-carousel { position:relative; }
        .v5-carousel-track { display:flex; gap:12px; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; padding-bottom:2px; }
        .v5-carousel-track::-webkit-scrollbar { display:none; }
        .v5-slide { min-width:calc(50% - 6px); scroll-snap-align:start; }
        .v5-carousel-nav { display:flex; gap:6px; align-items:center; }
        .v5-carousel-arrow { width:34px; height:34px; border:1px solid var(--ref-line); background:var(--ref-surface); color:var(--ref-ink); border-radius:12px; cursor:pointer; display:grid; place-items:center; }
        .v5-carousel-dots { display:flex; gap:5px; justify-content:center; margin-top:10px; }
        .v5-dot { width:6px; height:6px; border-radius:50%; background:var(--ref-line); border:0; padding:0; }
        .v5-dot.active { width:17px; border-radius:99px; background:var(--ref-orange); }
        .v5-steps { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
        .v5-step { padding:14px; border:1px solid var(--ref-line); border-radius:19px; background:var(--ref-surface); }
        .v5-step-num { width:31px; height:31px; display:grid; place-items:center; border-radius:11px; background:var(--ref-yellow); color:#231b0b; font-weight:900; font-size:.73rem; margin-bottom:9px; }
        .v5-step strong { display:block; font-size:.76rem; margin-bottom:3px; }
        .v5-step span { color:var(--ref-muted); font-size:.66rem; line-height:1.35; }
        .v5-cta { margin-top:20px; border-radius:25px; background:var(--ref-ink); color:#fff; padding:20px; display:flex; align-items:center; justify-content:space-between; gap:12px; }
        .v5-cta h3 { margin:0 0 5px; font-size:1.05rem; letter-spacing:-.03em; }
        .v5-cta p { margin:0; font-size:.7rem; color:rgba(255,255,255,.68); max-width:600px; line-height:1.45; }
        .v5-cta .ref-btn { background:#fff; color:#111; border-color:#fff; flex:none; }
        .v5-profile-hero { display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:15px; align-items:stretch; }
        .v5-profile-card { padding:20px; border:1px solid var(--ref-line); background:var(--ref-surface); border-radius:26px; }
        .v5-profile-main { display:flex; gap:14px; align-items:center; }
        .v5-profile-avatar { width:78px; height:78px; border-radius:24px; background:var(--ref-ink); color:#fff; display:grid; place-items:center; font-weight:950; font-size:1.35rem; box-shadow:0 12px 26px rgba(0,0,0,.1); flex:none; }
        .v5-profile-name { margin:0; font-size:1.5rem; letter-spacing:-.05em; }
        .v5-profile-badges { display:flex; flex-wrap:wrap; gap:7px; margin-top:7px; }
        .v5-profile-badge { border:1px solid var(--ref-line); background:var(--ref-surface-2); color:var(--ref-muted); padding:6px 9px; border-radius:999px; font-size:.62rem; font-weight:800; }
        .v5-health { border-radius:26px; background:var(--ref-yellow); color:#20180d; padding:18px; }
        .v5-health-top { display:flex; justify-content:space-between; align-items:center; gap:10px; }
        .v5-health-ring { width:84px; height:84px; border-radius:50%; display:grid; place-items:center; margin-top:12px; background:conic-gradient(var(--ref-ink) 0 315deg, rgba(255,255,255,.36) 315deg 360deg); position:relative; }
        .v5-health-ring:after { content:''; position:absolute; inset:9px; border-radius:50%; background:var(--ref-yellow); }
        .v5-health-ring span { position:relative; z-index:1; font-weight:950; font-size:1rem; }
        .v5-profile-stat-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:14px; }
        .v5-profile-stat { border:1px solid var(--ref-line); border-radius:17px; background:var(--ref-surface); padding:12px; }
        .v5-profile-stat small { display:block; color:var(--ref-muted); font-size:.62rem; margin-bottom:5px; }
        .v5-profile-stat strong { font-size:1rem; letter-spacing:-.03em; }
        .v5-profile-layout { display:grid; grid-template-columns:minmax(0,1.35fr) minmax(280px,.65fr); gap:14px; margin-top:14px; }
        .v5-detail-list { display:grid; gap:0; }
        .v5-detail-row { display:flex; justify-content:space-between; gap:15px; padding:12px 0; border-bottom:1px solid var(--ref-line); font-size:.75rem; }
        .v5-detail-row:last-child { border-bottom:0; }
        .v5-detail-row span:first-child { color:var(--ref-muted); }
        .v5-detail-row strong { text-align:right; }
        .v5-security-card { display:grid; gap:9px; }
        .v5-security-item { padding:12px; border-radius:16px; background:var(--ref-surface-2); border:1px solid var(--ref-line); }
        .v5-security-item strong { display:block; font-size:.74rem; margin-bottom:4px; }
        .v5-security-item span { color:var(--ref-muted); font-size:.65rem; line-height:1.4; }
        .v5-modal-kicker { font-size:.61rem; font-weight:900; letter-spacing:.12em; text-transform:uppercase; opacity:.68; }
        .modal-overlay { align-items:center !important; padding:16px !important; background:rgba(9,9,8,.74) !important; backdrop-filter:blur(14px) saturate(1.1) !important; }
        .modal-sheet { max-width:520px !important; max-height:min(88vh,760px) !important; border-radius:28px !important; overflow:hidden !important; box-shadow:0 32px 100px rgba(0,0,0,.28) !important; transform:translateY(10px) scale(.985); opacity:0; transition:transform .24s ease, opacity .24s ease; }
        .modal-overlay.active .modal-sheet { transform:translateY(0) scale(1); opacity:1; }
        .modal-header { padding:19px 20px 18px !important; background:var(--ref-ink) !important; border-bottom:1px solid rgba(255,255,255,.06); }
        .modal-header .modal-icon { opacity:.92; }
        .modal-header h2 { font-size:1.18rem !important; letter-spacing:-.035em; }
        .modal-header p { margin-top:3px; }
        .modal-header .btn-close, .webview-modal-header .btn-close-webview { width:38px !important; height:38px !important; border-radius:13px !important; background:rgba(255,255,255,.1) !important; border:1px solid rgba(255,255,255,.08) !important; cursor:pointer !important; z-index:5; }
        .modal-header .btn-close:hover, .webview-modal-header .btn-close-webview:hover { background:rgba(255,255,255,.18) !important; }
        .modal-body { padding:20px !important; }
        .form-group { margin-bottom:14px; }
        .form-group label { font-size:.72rem !important; font-weight:800 !important; color:var(--ref-muted) !important; margin-bottom:6px; }
        .form-control { min-height:46px; }
        .swal2-popup { border-radius:24px !important; background:var(--ref-surface) !important; color:var(--ref-ink) !important; border:1px solid var(--ref-line) !important; box-shadow:0 30px 90px rgba(0,0,0,.28) !important; padding:1.3rem !important; }
        .swal2-title { font-size:1.06rem !important; letter-spacing:-.03em !important; }
        .swal2-html-container, .swal2-content { color:var(--ref-muted) !important; font-size:.78rem !important; }
        .swal2-styled { border-radius:14px !important; font-weight:800 !important; }
        .swal2-confirm { background:var(--ref-ink) !important; }
        .swal2-cancel { background:var(--ref-surface-2) !important; color:var(--ref-ink) !important; border:1px solid var(--ref-line) !important; }
        [data-theme="dark"] .app-footer { background:rgba(23,23,21,.96) !important; }
        [data-theme="dark"] .v5-hero-media { opacity:.55; }
        @media (max-width:900px){
            .app-brand { min-width:auto; }
            .app-brand-copy { display:none; }
            .home-v5-grid, .v5-profile-hero, .v5-profile-layout { grid-template-columns:1fr; }
            .v5-benefit-grid { grid-template-columns:repeat(2,1fr); }
            .v5-slide { min-width:82%; }
        }
        @media (max-width:640px){
            .app-brand-logo { width:40px; height:40px; border-radius:13px; }
            .app-header { gap:8px !important; }
            .home-v5-grid { gap:11px; }
            .v5-hero { min-height:390px; padding:19px; border-radius:23px; }
            .v5-hero h1 { font-size:2.55rem; }
            .v5-stat-card { min-height:220px; }
            .v5-benefit-grid { grid-template-columns:1fr; }
            .v5-step { min-height:120px; }
            .v5-steps { grid-template-columns:1fr; }
            .v5-cta { align-items:flex-start; flex-direction:column; }
            .v5-cta .ref-btn { width:100%; }
            .v5-profile-main { align-items:flex-start; }
            .v5-profile-avatar { width:64px; height:64px; border-radius:20px; }
            .v5-profile-name { font-size:1.28rem; }
            .v5-profile-stat-grid { grid-template-columns:1fr 1fr 1fr; }
            .v5-health-ring { width:70px; height:70px; }
            .modal-overlay { padding:9px !important; align-items:flex-end !important; }
            .modal-sheet { max-height:92vh !important; width:100% !important; border-radius:27px 27px 18px 18px !important; }
        }

        @media (max-width: 900px) {
            .ref-layout, .ref-dashboard { grid-template-columns:1fr; }
            .ref-hero { min-height:250px; }
        }
        @media (max-width: 640px) {
            .app-header { height:72px !important; padding:12px !important; }
            .ref-head-action { width:40px !important; height:40px !important; }
            .page-container { top:72px !important; }
            .page-wrapper { padding:10px 11px 103px !important; }
            .ref-topline { align-items:flex-start; }
            .ref-page-title { font-size:1.45rem; }
            .ref-hero { padding:19px; border-radius:22px; }
            .ref-hero h1 { font-size:2.2rem; }
            .ref-actions-grid { grid-template-columns:repeat(4,1fr); gap:8px; }
            .ref-action { min-height:88px; border-radius:16px; }
            .ref-action-icon { width:38px; height:38px; border-radius:12px; }
            .ref-action span { font-size:.59rem; }
            .ref-stat-strip { grid-template-columns:1fr 1fr 1fr; gap:7px; }
            .ref-stat { padding:10px; }
            .ref-stat strong { font-size:.92rem; }
            .ref-stat small { font-size:.6rem; }
            .ref-product-grid { grid-template-columns:1fr; }
            .ref-product-visual { height:120px; }
            .app-footer { height:72px !important; border-radius:24px !important; }
            .footer-btn { height:58px !important; border-radius:18px !important; }
        }
        /* ==============================================
           V6 — POLISH, PREFERENCES & DARK MODE
        ============================================== */
        html { color-scheme: light; }
        html[data-theme="dark"] { color-scheme: dark; }
        body.modal-open { overflow:hidden !important; touch-action:none; }
        .app-header .app-brand { display:flex !important; align-items:center; gap:9px; min-width:0; }
        .app-brand-logo { width:42px; height:42px; object-fit:contain; border-radius:13px; flex:none; }
        .app-brand-copy { line-height:1; }
        .app-brand-copy strong { display:block; font-size:.76rem; font-weight:950; letter-spacing:.08em; color:var(--ref-ink); }
        .app-brand-copy span { display:block; margin-top:3px; font-size:.51rem; font-weight:800; letter-spacing:.09em; color:var(--ref-muted); }
        .pwa-install-button {
            min-height:40px; padding:0 13px; border-radius:14px; border:1px solid var(--ref-line);
            background:var(--ref-surface); color:var(--ref-ink); display:flex; align-items:center; gap:8px;
            cursor:pointer; font-size:.68rem; font-weight:900; white-space:nowrap;
            box-shadow:0 8px 20px rgba(0,0,0,.06); transition:transform .18s, background .18s, border-color .18s;
        }
        .pwa-install-button:hover { transform:translateY(-1px); background:var(--ref-surface-2); }
        .pwa-install-button i { font-size:1rem; }
        .header-actions { gap:6px !important; }
        [data-theme="dark"] .pwa-install-button, [data-theme="dark"] .btn-icon { box-shadow:none; }

        /* True dark surfaces for both legacy and V5/V6 components */
        [data-theme="dark"] body, [data-theme="dark"] #app, [data-theme="dark"] .page-container,
        [data-theme="dark"] .page-wrapper, [data-theme="dark"] .page-content { background:var(--ref-bg) !important; color:var(--ref-ink) !important; }
        [data-theme="dark"] .app-header, [data-theme="dark"] .desktop-nav, [data-theme="dark"] .app-footer {
            background:rgba(18,18,16,.97) !important; border-color:#34332e !important;
        }
        [data-theme="dark"] .form-control, [data-theme="dark"] select, [data-theme="dark"] input, [data-theme="dark"] textarea {
            background:#24231f !important; color:#f4f2ec !important; border-color:#3a3934 !important;
        }
        [data-theme="dark"] .form-control::placeholder, [data-theme="dark"] input::placeholder, [data-theme="dark"] textarea::placeholder { color:#aaa69c !important; }
        [data-theme="dark"] .ref-product, [data-theme="dark"] .ref-stat, [data-theme="dark"] .ref-action,
        [data-theme="dark"] .v5-profile-card, [data-theme="dark"] .v5-profile-stat, [data-theme="dark"] .v5-step,
        [data-theme="dark"] .v5-security-item, [data-theme="dark"] .ref-auth-note {
            background:var(--ref-surface) !important; border-color:#35342f !important; color:var(--ref-ink) !important;
        }
        [data-theme="dark"] .ref-action:hover, [data-theme="dark"] .v5-step:hover { background:#25241f !important; }
        [data-theme="dark"] .ref-link { color:#f6cc67 !important; }
        [data-theme="dark"] .ref-btn { color:#f4f2ec; border-color:#3b3932; background:#25241f; }
        [data-theme="dark"] .ref-btn.primary, [data-theme="dark"] .ref-btn.accent { color:#16150f; }
        [data-theme="dark"] .ref-hero, [data-theme="dark"] .v5-hero, [data-theme="dark"] .v5-cta { box-shadow:none !important; }
        [data-theme="dark"] .modal-sheet { background:var(--ref-surface) !important; color:var(--ref-ink) !important; }
        [data-theme="dark"] .modal-body, [data-theme="dark"] .modal-content { background:var(--ref-surface) !important; color:var(--ref-ink) !important; }
        [data-theme="dark"] .modal-header { background:#11110f !important; }
        [data-theme="dark"] .empty-state, [data-theme="dark"] .page-loader { color:var(--ref-muted) !important; }

        .preferences-page { max-width:980px; margin:0 auto; padding-bottom:26px; }
        .preferences-hero { border-radius:28px; padding:24px; background:linear-gradient(145deg,#11110f,#25231d); color:#fff; position:relative; overflow:hidden; }
        .preferences-hero::after { content:""; position:absolute; width:220px; height:220px; border-radius:50%; right:-80px; top:-100px; background:rgba(247,201,90,.18); }
        .preferences-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:14px; }
        .preferences-card { background:var(--ref-surface); border:1px solid var(--ref-line); border-radius:24px; padding:17px; }
        .preferences-card h3 { font-size:.9rem; margin:0 0 4px; letter-spacing:-.02em; }
        .preferences-card p { margin:0 0 13px; color:var(--ref-muted); font-size:.68rem; line-height:1.45; }
        .preferences-options { display:grid; gap:9px; }
        .preference-option { width:100%; display:flex; align-items:center; gap:12px; padding:12px; border-radius:17px; border:1px solid var(--ref-line); background:var(--ref-surface-2); color:var(--ref-ink); cursor:pointer; text-align:left; transition:.18s; }
        .preference-option:hover { transform:translateY(-1px); }
        .preference-option.active { border-color:var(--ref-ink); box-shadow:0 0 0 2px rgba(17,17,17,.08); }
        .preference-option .option-icon { width:38px; height:38px; border-radius:13px; display:grid; place-items:center; background:var(--ref-surface); flex:none; }
        .preference-option strong { display:block; font-size:.75rem; }
        .preference-option span { display:block; margin-top:3px; font-size:.61rem; color:var(--ref-muted); }
        .preference-check { margin-left:auto; width:22px; height:22px; border-radius:50%; display:grid; place-items:center; background:transparent; }
        .preference-option.active .preference-check { background:var(--ref-ink); color:#fff; }
        .preferences-pwa { margin-top:14px; display:grid; grid-template-columns:1.1fr .9fr; gap:14px; align-items:stretch; }
        .pwa-benefits { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
        .pwa-benefit { padding:11px; border-radius:16px; background:var(--ref-surface-2); border:1px solid var(--ref-line); }
        .pwa-benefit i { display:block; font-size:1.05rem; margin-bottom:6px; color:var(--ref-ink); }
        .pwa-benefit strong { display:block; font-size:.68rem; }
        .pwa-benefit span { display:block; margin-top:3px; color:var(--ref-muted); font-size:.59rem; line-height:1.35; }
        .pwa-install-card { padding:18px; border-radius:24px; background:var(--ref-yellow); color:#1a150d; display:flex; flex-direction:column; justify-content:space-between; gap:14px; }
        .pwa-install-card .ref-btn { align-self:flex-start; background:#111; color:#fff; border-color:#111; }
        [data-theme="dark"] .preference-option { background:#25241f; }
        [data-theme="dark"] .preference-option.active { border-color:#f0ede3; box-shadow:0 0 0 2px rgba(240,237,227,.08); }
        [data-theme="dark"] .preference-option .option-icon { background:#191916; }
        [data-theme="dark"] .preference-option.active .preference-check { background:#f0ede3; color:#11110f; }
        [data-theme="dark"] .pwa-install-card { background:#c9a84e; }
        .pwa-swal { text-align:left; }
        .pwa-swal-head { display:flex; align-items:center; gap:12px; margin-bottom:14px; }
        .pwa-swal-logo { width:58px; height:58px; border-radius:17px; object-fit:cover; box-shadow:0 10px 30px rgba(0,0,0,.12); }
        .pwa-swal-head strong { display:block; font-size:1rem; color:var(--ref-ink); }
        .pwa-swal-head span { display:block; margin-top:4px; font-size:.68rem; color:var(--ref-muted); line-height:1.35; }
        .pwa-swal-benefits { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
        .pwa-swal-benefit { padding:10px; border-radius:15px; background:var(--ref-surface-2); border:1px solid var(--ref-line); }
        .pwa-swal-benefit i { font-size:.92rem; }
        .pwa-swal-benefit strong { display:block; margin-top:5px; font-size:.65rem; color:var(--ref-ink); }
        .pwa-swal-benefit span { display:block; margin-top:3px; font-size:.56rem; line-height:1.35; color:var(--ref-muted); }
        @media (max-width:760px){
            .preferences-grid, .preferences-pwa { grid-template-columns:1fr; }
            .pwa-benefits { grid-template-columns:1fr 1fr; }
            .pwa-install-button span { display:none; }
        }
        @media (max-width:520px){
            .app-brand-copy { display:none !important; }
            .app-brand-logo { width:39px; height:39px; border-radius:12px; }
            .header-actions .pwa-install-button { min-width:40px; padding:0 11px; justify-content:center; }
            .preferences-hero { border-radius:22px; padding:18px; }
            .pwa-swal-benefits, .pwa-benefits { grid-template-columns:1fr; }
            .swal2-popup { width:calc(100% - 18px) !important; }
        }

        @media (max-width: 420px) {
            .ref-actions-grid { grid-template-columns:repeat(4,1fr); }
            .ref-action-icon { width:34px; height:34px; font-size:.95rem; }
            .ref-action span { font-size:.54rem; }
            .ref-balance-number { font-size:2rem; }
        }

    

/* ================= CMP V7 PROFESSIONAL SUITE ================= */
:root{
  --cmp-bg:#f4f1ea; --cmp-surface:#fffdfa; --cmp-card:#ffffff; --cmp-ink:#171716;
  --cmp-muted:#73736f; --cmp-line:#e8e4dc; --cmp-orange:#ff6a00; --cmp-orange-2:#ff8d36;
  --cmp-blue:#1769e0; --cmp-green:#1fa56a; --cmp-red:#df3f33; --cmp-shadow:0 18px 50px rgba(21,20,17,.08);
  --cmp-radius:24px; --cmp-header:74px; --cmp-sidebar:258px; --cmp-footer:72px;
}
html[data-theme="dark"]{
  --cmp-bg:#0d0d0d; --cmp-surface:#151514; --cmp-card:#191918; --cmp-ink:#f6f5f2;
  --cmp-muted:#aaa8a2; --cmp-line:#2a2926; --cmp-orange:#ff7b1a; --cmp-orange-2:#ff9a4b;
  --cmp-blue:#5796ff; --cmp-green:#48d493; --cmp-red:#ff726a; --cmp-shadow:0 20px 60px rgba(0,0,0,.34);
}
*{box-sizing:border-box}
body{background:var(--cmp-bg)!important;color:var(--cmp-ink)!important;font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif!important}
a{color:inherit}
.app-header{height:var(--cmp-header)!important;padding:10px 24px!important;background:var(--cmp-surface)!important;border-bottom:1px solid var(--cmp-line)!important;display:flex!important;align-items:center!important;gap:18px!important;position:sticky!important;top:0;z-index:1200!important;box-shadow:0 5px 18px rgba(0,0,0,.04)!important}
.app-brand{display:flex!important;align-items:center!important;gap:11px!important;min-width:230px!important}
.app-brand-logo{width:48px!important;height:48px!important;border-radius:15px!important;object-fit:cover!important;box-shadow:0 6px 18px rgba(0,0,0,.12)!important}
.app-brand-copy strong{display:block!important;letter-spacing:.06em!important;font-size:.98rem!important}.app-brand-copy span{display:block!important;color:var(--cmp-orange)!important;font-weight:800!important;font-size:.72rem!important;letter-spacing:.09em!important}
.header-actions{margin-left:auto!important;display:flex!important;align-items:center!important;gap:7px!important}
.ref-head-action,.btn-icon{width:44px!important;height:44px!important;border:1px solid var(--cmp-line)!important;background:var(--cmp-card)!important;color:var(--cmp-ink)!important;border-radius:14px!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;position:relative}
.ref-head-action:hover{transform:translateY(-1px);box-shadow:var(--cmp-shadow)}
.ref-head-action i{font-size:1.05rem!important}.lang-toggle{font-weight:900;font-size:.72rem}
.pwa-install-button{min-height:44px!important;border-radius:14px!important;border:0!important;background:var(--cmp-ink)!important;color:#fff!important;padding:0 15px!important;font-weight:850!important;display:inline-flex!important;align-items:center!important;gap:9px!important;box-shadow:0 8px 18px rgba(0,0,0,.14)!important}
.pwa-install-button i{font-size:1rem!important}.ref-notif-badge{position:absolute;right:4px;top:4px;min-width:17px;height:17px;border-radius:999px;background:var(--cmp-orange);color:#fff;font-size:.62rem;font-weight:900;display:none;align-items:center;justify-content:center;padding:0 4px}
.user-badge{display:flex!important;align-items:center!important;gap:9px!important;padding:6px 10px 6px 6px!important;border:1px solid var(--cmp-line)!important;background:var(--cmp-card)!important;border-radius:15px!important;cursor:pointer!important;max-width:220px!important}.avatar-mini{width:36px!important;height:36px!important;border-radius:12px!important;display:grid!important;place-items:center!important;background:var(--cmp-ink)!important;color:#fff!important;font-weight:900!important;overflow:hidden!important}.avatar-mini img{width:100%;height:100%;object-fit:cover}.user-name{font-weight:800;font-size:.82rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.desktop-nav{position:fixed!important;left:0!important;top:var(--cmp-header)!important;bottom:0!important;width:var(--cmp-sidebar)!important;padding:18px 13px!important;background:var(--cmp-surface)!important;border-right:1px solid var(--cmp-line)!important;display:flex!important;flex-direction:column!important;gap:7px!important;z-index:1100!important;overflow:auto!important;box-shadow:8px 0 26px rgba(0,0,0,.03)!important}
.nav-link{width:100%!important;border:0!important;background:transparent!important;color:var(--cmp-muted)!important;border-radius:16px!important;padding:12px 14px!important;display:flex!important;align-items:center!important;gap:12px!important;font-weight:800!important;text-align:left!important;cursor:pointer!important;position:relative}.nav-link i{width:24px!important;text-align:center!important;font-size:1.08rem!important}.nav-link.active{background:var(--cmp-ink)!important;color:#fff!important}.nav-link:hover:not(.active){background:var(--cmp-bg)!important;color:var(--cmp-ink)!important}.badge-count{margin-left:auto!important;min-width:22px;height:22px;border-radius:99px;background:var(--cmp-orange);color:#fff!important;display:grid;place-items:center;font-size:.66rem;font-weight:900}
.sidebar-footer{margin-top:auto!important;padding-top:12px!important;border-top:1px solid var(--cmp-line)!important}.btn-connect{width:100%;border:0;background:var(--cmp-orange);color:#fff;padding:12px 14px;border-radius:15px;font-weight:900;display:flex;align-items:center;justify-content:center;gap:9px}
.page-container{margin-left:var(--cmp-sidebar)!important;min-height:calc(100vh - var(--cmp-header))!important;padding:20px 22px calc(var(--cmp-footer) + 22px)!important;background:var(--cmp-bg)!important;max-width:none!important}.page-content{max-width:none!important;width:100%!important}.page-wrapper,.ref-page{width:100%!important;max-width:1620px!important;margin:0 auto!important}
.app-footer{position:fixed!important;left:0;right:0;bottom:0;height:var(--cmp-footer)!important;background:var(--cmp-surface)!important;border-top:1px solid var(--cmp-line)!important;z-index:1200!important;display:none!important;padding:7px 12px!important;gap:6px!important}.footer-btn{border:0!important;background:transparent!important;color:var(--cmp-muted)!important;border-radius:15px!important;display:flex!important;flex:1!important;flex-direction:column!important;justify-content:center!important;align-items:center!important;gap:4px!important;font-weight:800!important;font-size:.62rem!important}.footer-btn i{font-size:1.2rem!important}.footer-btn.active{background:var(--cmp-ink)!important;color:#fff!important}.footer-btn[data-page="notifications"]{display:flex!important}
.header-menu-btn{display:none!important;border:1px solid var(--cmp-line)!important;background:var(--cmp-card)!important;color:var(--cmp-ink)!important;width:44px;height:44px;border-radius:14px}
.mobile-nav-backdrop{display:none}
/* page building blocks */
.cmp-shell{display:flex;flex-direction:column;gap:18px}.cmp-topbar{display:flex;align-items:flex-end;justify-content:space-between;gap:18px}.cmp-kicker{color:var(--cmp-orange);font-weight:900;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase}.cmp-title{font-size:clamp(1.65rem,3vw,2.45rem);line-height:1.05;margin:6px 0 7px;font-weight:950;letter-spacing:-.045em}.cmp-sub{color:var(--cmp-muted);max-width:760px;line-height:1.55;margin:0}.cmp-actions{display:flex;gap:9px;flex-wrap:wrap}.cmp-btn{border:1px solid var(--cmp-line);background:var(--cmp-card);color:var(--cmp-ink);padding:11px 15px;border-radius:14px;font-weight:900;display:inline-flex;align-items:center;gap:8px;cursor:pointer}.cmp-btn.primary{background:var(--cmp-ink);color:#fff;border-color:var(--cmp-ink)}.cmp-btn.accent{background:var(--cmp-orange);color:#fff;border-color:var(--cmp-orange)}.cmp-btn.ghost{background:transparent}.cmp-grid-2{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(300px,.8fr);gap:16px}.cmp-grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.cmp-grid-4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}.cmp-card{background:var(--cmp-card);border:1px solid var(--cmp-line);border-radius:var(--cmp-radius);box-shadow:var(--cmp-shadow);padding:18px}.cmp-card.flat{box-shadow:none}.cmp-card.dark{background:var(--cmp-ink);color:#fff;border-color:var(--cmp-ink)}.cmp-card.orange{background:linear-gradient(140deg,var(--cmp-orange),var(--cmp-orange-2));color:#fff;border:0}.cmp-card-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:13px}.cmp-label{font-size:.72rem;text-transform:uppercase;letter-spacing:.09em;color:var(--cmp-muted);font-weight:900}.cmp-card.dark .cmp-label,.cmp-card.orange .cmp-label{color:rgba(255,255,255,.7)}.cmp-value{font-weight:950;font-size:clamp(1.35rem,2.5vw,2rem);letter-spacing:-.04em}.cmp-muted{color:var(--cmp-muted)}.cmp-small{font-size:.78rem;color:var(--cmp-muted)}.cmp-stat{display:flex;flex-direction:column;gap:5px;min-height:112px;justify-content:center}.cmp-iconbox{width:42px;height:42px;border-radius:14px;display:grid;place-items:center;background:var(--cmp-bg);color:var(--cmp-ink);margin-bottom:10px}.cmp-card.dark .cmp-iconbox{background:#2d2d2b;color:#fff}.cmp-card.orange .cmp-iconbox{background:rgba(255,255,255,.16);color:#fff}.cmp-stat-num{font-size:1.45rem;font-weight:950}.cmp-progress{height:9px;background:rgba(128,128,128,.18);border-radius:999px;overflow:hidden}.cmp-progress>span{display:block;height:100%;background:var(--cmp-orange);border-radius:inherit}.cmp-mini-list{display:flex;flex-direction:column;gap:10px}.cmp-row{display:flex;align-items:center;gap:12px;padding:11px 0;border-bottom:1px dashed var(--cmp-line)}.cmp-row:last-child{border-bottom:0}.cmp-row-icon{width:42px;height:42px;border-radius:13px;display:grid;place-items:center;background:var(--cmp-bg);flex:0 0 42px}.cmp-row-main{min-width:0;flex:1}.cmp-row-title{font-weight:900;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.cmp-row-meta{font-size:.76rem;color:var(--cmp-muted);margin-top:3px}.cmp-row-end{text-align:right}.cmp-badge{display:inline-flex;align-items:center;gap:5px;border-radius:999px;padding:6px 9px;font-size:.66rem;font-weight:900;background:var(--cmp-bg);color:var(--cmp-ink)}.cmp-badge.orange{background:rgba(255,106,0,.13);color:var(--cmp-orange)}.cmp-badge.green{background:rgba(31,165,106,.12);color:var(--cmp-green)}.cmp-badge.red{background:rgba(223,63,51,.12);color:var(--cmp-red)}.cmp-badge.blue{background:rgba(23,105,224,.11);color:var(--cmp-blue)}.cmp-action-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}.cmp-action{border:1px solid var(--cmp-line);background:var(--cmp-card);border-radius:18px;padding:13px 8px;display:flex;flex-direction:column;align-items:center;gap:8px;font-size:.72rem;font-weight:900;color:var(--cmp-ink);cursor:pointer}.cmp-action i{width:42px;height:42px;display:grid;place-items:center;border-radius:14px;background:var(--cmp-bg);font-size:1rem}.cmp-action:hover{transform:translateY(-2px);box-shadow:var(--cmp-shadow)}.cmp-section-title{font-size:1rem;font-weight:950;letter-spacing:-.02em;margin:0}.cmp-section-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:13px}.cmp-chart{display:grid;grid-template-columns:repeat(12,1fr);align-items:end;gap:8px;height:110px;padding-top:8px}.cmp-bar{border-radius:10px 10px 4px 4px;background:var(--cmp-orange);min-height:10px}.cmp-chart-labels{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;font-size:.64rem;color:var(--cmp-muted);text-align:center}.cmp-visual-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:13px}.cmp-visual{min-height:225px;border-radius:22px;overflow:hidden;position:relative;background:#222;border:1px solid var(--cmp-line)}.cmp-visual img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .35s ease}.cmp-visual:hover img{transform:scale(1.04)}.cmp-visual-overlay{position:absolute;inset:auto 0 0;padding:50px 15px 15px;background:linear-gradient(transparent,rgba(0,0,0,.82));color:#fff}.cmp-visual-overlay h3{margin:0 0 4px;font-size:1rem}.cmp-visual-overlay p{margin:0;color:rgba(255,255,255,.75);font-size:.76rem;line-height:1.45}.cmp-carousel{position:relative;overflow:hidden;border-radius:24px}.cmp-carousel-track{display:flex;transition:transform .45s ease}.cmp-slide{min-width:100%;position:relative;min-height:245px}.cmp-slide img{width:100%;height:245px;object-fit:cover}.cmp-slide::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(17,17,16,.78),rgba(17,17,16,.06) 70%)}.cmp-slide-copy{position:absolute;z-index:2;left:20px;top:50%;transform:translateY(-50%);color:#fff;max-width:520px}.cmp-slide-copy h3{font-size:clamp(1.2rem,2.6vw,2rem);margin:0 0 7px;font-weight:950}.cmp-slide-copy p{margin:0;color:rgba(255,255,255,.78);line-height:1.5}.cmp-carousel-controls{position:absolute;right:14px;bottom:14px;z-index:4;display:flex;gap:7px}.cmp-carousel-controls button{width:38px;height:38px;border:0;border-radius:12px;background:rgba(255,255,255,.18);color:#fff;backdrop-filter:blur(10px)}.cmp-dots{position:absolute;left:18px;bottom:18px;display:flex;gap:5px;z-index:4}.cmp-dot{width:7px;height:7px;border:0;padding:0;border-radius:99px;background:rgba(255,255,255,.45)}.cmp-dot.active{width:22px;background:#fff}.cmp-filterbar{display:flex;flex-wrap:wrap;gap:9px;align-items:center}.cmp-field{border:1px solid var(--cmp-line);background:var(--cmp-card);color:var(--cmp-ink);border-radius:14px;padding:11px 12px;outline:none}.cmp-filterbar .cmp-field{min-width:160px}.cmp-empty{padding:32px 14px;text-align:center;color:var(--cmp-muted);border:1px dashed var(--cmp-line);border-radius:18px}.cmp-table{width:100%;border-collapse:separate;border-spacing:0}.cmp-table th,.cmp-table td{padding:12px 10px;border-bottom:1px solid var(--cmp-line);font-size:.78rem;text-align:left;vertical-align:middle}.cmp-table th{color:var(--cmp-muted);font-size:.68rem;text-transform:uppercase;letter-spacing:.08em}.cmp-detail-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}.cmp-detail-item{padding:13px;border:1px solid var(--cmp-line);border-radius:16px;background:var(--cmp-card)}.cmp-detail-item span{display:block;font-size:.67rem;color:var(--cmp-muted);text-transform:uppercase;letter-spacing:.06em;font-weight:900;margin-bottom:5px}.cmp-detail-item strong{font-size:.9rem}.cmp-history{display:flex;flex-direction:column;gap:0}.cmp-history-item{display:grid;grid-template-columns:42px 1fr auto;gap:10px;align-items:center;padding:11px 0;border-bottom:1px dashed var(--cmp-line)}.cmp-history-icon{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;background:var(--cmp-bg)}.cmp-pagination{display:flex;justify-content:center;gap:8px;align-items:center;margin-top:15px;flex-wrap:wrap}.cmp-pagination button{border:1px solid var(--cmp-line);background:var(--cmp-card);color:var(--cmp-ink);border-radius:12px;padding:9px 12px;font-weight:850}.cmp-pagination .count{font-size:.72rem;color:var(--cmp-muted)}.cmp-profile-hero{display:grid;grid-template-columns:1.1fr .9fr;gap:16px}.cmp-profile-main{display:flex;align-items:center;gap:16px}.cmp-avatar-xl{width:92px;height:92px;border-radius:28px;background:var(--cmp-ink);overflow:hidden;display:grid;place-items:center;color:#fff;font-size:2rem;font-weight:950;box-shadow:0 14px 30px rgba(0,0,0,.12)}.cmp-avatar-xl img{width:100%;height:100%;object-fit:cover}.cmp-profile-name{font-size:1.55rem;font-weight:950;letter-spacing:-.04em}.cmp-profile-meta{color:var(--cmp-muted);font-size:.8rem;line-height:1.6}.cmp-about-hero{display:grid;grid-template-columns:1fr .8fr;gap:16px}.cmp-about-hero .cmp-card{min-height:280px}.cmp-quote{font-size:clamp(1.5rem,3vw,2.6rem);line-height:1.08;font-weight:950;letter-spacing:-.05em;max-width:760px}.cmp-contact-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.cmp-contact{padding:15px;border-radius:18px;background:var(--cmp-bg);border:1px solid var(--cmp-line)}.cmp-contact i{font-size:1.2rem;color:var(--cmp-orange);margin-bottom:9px}.cmp-contact strong{display:block;margin-bottom:4px}.cmp-contact span{font-size:.75rem;color:var(--cmp-muted);line-height:1.5;display:block}.cmp-tag-list{display:flex;gap:8px;flex-wrap:wrap}.cmp-tag{padding:8px 11px;border-radius:999px;background:var(--cmp-bg);border:1px solid var(--cmp-line);font-size:.7rem;font-weight:850}.cmp-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.cmp-step{position:relative;padding:16px;border:1px solid var(--cmp-line);border-radius:18px;background:var(--cmp-card)}.cmp-step-num{width:34px;height:34px;border-radius:11px;background:var(--cmp-ink);color:#fff;display:grid;place-items:center;font-weight:950;margin-bottom:12px}.cmp-step h3{margin:0 0 5px;font-size:.92rem}.cmp-step p{margin:0;color:var(--cmp-muted);font-size:.76rem;line-height:1.5}
@media(max-width:1150px){:root{--cmp-sidebar:228px}.cmp-grid-4{grid-template-columns:repeat(2,1fr)}.cmp-detail-grid{grid-template-columns:repeat(2,1fr)}.cmp-profile-hero,.cmp-about-hero{grid-template-columns:1fr}.cmp-contact-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:900px){:root{--cmp-sidebar:0px;--cmp-header:68px;--cmp-footer:72px}.app-header{padding:9px 12px!important}.header-menu-btn{display:inline-flex!important;align-items:center;justify-content:center}.desktop-nav{top:0!important;bottom:0!important;width:min(320px,88vw)!important;transform:translateX(-110%)!important;transition:transform .25s ease!important;padding-top:88px!important;box-shadow:18px 0 40px rgba(0,0,0,.2)!important}.desktop-nav.open{transform:translateX(0)!important}.mobile-nav-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.48);backdrop-filter:blur(3px);z-index:1090}.mobile-nav-backdrop.open{display:block}.page-container{margin-left:0!important;padding:14px 12px calc(var(--cmp-footer) + 16px)!important}.app-footer{display:flex!important}.app-brand{min-width:0!important}.app-brand-copy{display:none!important}.app-brand-logo{width:44px!important;height:44px!important}.user-badge{margin-left:auto!important}.header-actions{margin-left:0!important}.pwa-install-button{padding:0 11px!important;min-width:44px!important;justify-content:center!important}.pwa-install-button span{display:none!important}.ref-head-action{width:42px!important;height:42px!important}.header-actions .btn-icon[onclick="toggleLanguage()"]{display:none!important}.cmp-grid-2{grid-template-columns:1fr}.cmp-grid-3{grid-template-columns:1fr}.cmp-grid-4{grid-template-columns:repeat(2,1fr)}.cmp-action-grid{grid-template-columns:repeat(5,1fr)}.cmp-topbar{align-items:flex-start;flex-direction:column}.cmp-visual-grid{grid-template-columns:1fr}.cmp-contact-grid{grid-template-columns:1fr}.cmp-steps{grid-template-columns:1fr}.cmp-table-wrap{overflow:auto}.cmp-table{min-width:720px}.cmp-profile-main{align-items:flex-start}.cmp-slide-copy{right:20px}.page-wrapper{min-height:calc(100vh - 110px)} }
@media(max-width:520px){.cmp-grid-4{grid-template-columns:1fr 1fr}.cmp-action{padding:10px 5px}.cmp-action span{font-size:.62rem}.cmp-action i{width:38px;height:38px}.cmp-card{padding:14px;border-radius:20px}.cmp-detail-grid{grid-template-columns:1fr 1fr}.cmp-avatar-xl{width:76px;height:76px;border-radius:23px}.cmp-profile-name{font-size:1.25rem}.cmp-slide,.cmp-slide img{min-height:210px;height:210px}.cmp-slide-copy{left:15px}.cmp-title{font-size:1.7rem}.cmp-footer-text{display:none!important}}
/* Profile page — same desktop visual language as the rest of the SPA */
.cmp-profile-page .cmp-profile-overview{align-items:stretch}
.cmp-profile-page .cmp-profile-summary{min-height:230px;display:flex;flex-direction:column;justify-content:space-between}
.cmp-profile-page .cmp-profile-primary{background:var(--cmp-ink)!important;color:#fff!important;border-color:var(--cmp-ink)!important}
.cmp-profile-page .cmp-profile-primary .cmp-profile-name{color:#fff!important}
.cmp-profile-page .cmp-profile-primary .cmp-profile-meta,.cmp-profile-page .cmp-profile-primary .cmp-small{color:rgba(255,255,255,.68)!important}
.cmp-profile-page .cmp-profile-primary .cmp-avatar-xl{background:#fff!important;color:var(--cmp-ink)!important;box-shadow:none!important}
.cmp-profile-page .cmp-profile-primary .cmp-tag{background:rgba(255,255,255,.08)!important;border-color:rgba(255,255,255,.12)!important;color:#fff!important}
.cmp-profile-page .cmp-profile-primary .cmp-badge.green{background:rgba(72,201,133,.16)!important;color:#aef0ca!important}
.cmp-profile-page .cmp-profile-primary .cmp-btn{background:#fff!important;color:#171716!important;border-color:#fff!important}
.cmp-profile-page .cmp-profile-primary .cmp-btn.ghost{background:rgba(255,255,255,.08)!important;color:#fff!important;border-color:rgba(255,255,255,.14)!important}
.cmp-profile-page .cmp-profile-side{min-height:230px;display:flex;flex-direction:column;justify-content:space-between}
.cmp-profile-page .cmp-profile-side .cmp-iconbox{background:rgba(255,255,255,.16)!important;color:#fff!important}
.cmp-profile-page .cmp-account-list .cmp-row-icon{background:var(--soft-orange)!important;color:var(--cmp-orange)!important}
.cmp-profile-page .cmp-account-list .cmp-row{min-height:62px}
.cmp-profile-page .cmp-profile-contact-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
@media(min-width:901px){.cmp-profile-page .cmp-topbar{padding:2px 2px 4px}.cmp-profile-page .cmp-profile-primary{padding:22px!important}.cmp-profile-page .cmp-profile-side{padding:22px!important}}
@media(max-width:900px){.cmp-profile-page .cmp-profile-contact-grid{grid-template-columns:1fr}.cmp-profile-page .cmp-profile-summary,.cmp-profile-page .cmp-profile-side{min-height:auto}}

/* Dark mode hardening */
[data-theme="dark"] input,[data-theme="dark"] select,[data-theme="dark"] textarea,[data-theme="dark"] .form-control,[data-theme="dark"] .modal-sheet,[data-theme="dark"] .modal-content,[data-theme="dark"] .modal-body,[data-theme="dark"] .modal-header,[data-theme="dark"] .swal2-popup,[data-theme="dark"] .webview-modal,[data-theme="dark"] .webview-modal-header{background:#191918!important;color:var(--cmp-ink)!important;border-color:var(--cmp-line)!important}
[data-theme="dark"] input::placeholder,[data-theme="dark"] textarea::placeholder{color:#85837f!important}.swal2-popup{border-radius:24px!important;background:var(--cmp-card)!important;color:var(--cmp-ink)!important}.swal2-html-container{color:var(--cmp-muted)!important}.modal-overlay{background:rgba(8,8,8,.58)!important;backdrop-filter:blur(5px)}.modal-sheet{border-radius:28px!important;overflow:hidden!important;background:var(--cmp-card)!important;color:var(--cmp-ink)!important;border:1px solid var(--cmp-line)!important;box-shadow:0 25px 80px rgba(0,0,0,.28)!important}.modal-header{border-bottom:1px solid var(--cmp-line)!important}.btn-close,.btn-close-webview{border-radius:12px!important}


/* ==========================================================
   CMP V7.1 — Mobile fintech polish inspired by the supplied UI
   ========================================================== */
:root{
  --mobile-nav-shadow:0 18px 48px rgba(19,18,16,.16);
  --mobile-header-shadow:0 10px 30px rgba(19,18,16,.07);
  --teal:#18bfa4;
  --sun:#f2c551;
  --soft-orange:#fff1e3;
  --soft-teal:#e8faf6;
  --soft-blue:#ecf4ff;
}
html[data-theme="dark"]{
  --soft-orange:#332216;
  --soft-teal:#14312b;
  --soft-blue:#172535;
  --mobile-nav-shadow:0 20px 50px rgba(0,0,0,.46);
  --mobile-header-shadow:0 10px 30px rgba(0,0,0,.28);
}

/* Cleaner, more premium cards and actions */
.cmp-card{border-radius:26px!important;border-color:color-mix(in srgb,var(--cmp-line) 86%,transparent)!important;box-shadow:0 14px 38px rgba(24,22,17,.07)!important}
html[data-theme="dark"] .cmp-card{box-shadow:0 16px 44px rgba(0,0,0,.26)!important}
.cmp-card.orange{background:var(--cmp-orange)!important}
.cmp-iconbox{border-radius:15px!important;background:var(--soft-orange)!important;color:var(--cmp-orange)!important}
.cmp-action{border-radius:19px!important;border:1px solid var(--cmp-line)!important;background:var(--cmp-card)!important;box-shadow:0 8px 22px rgba(20,18,12,.045)!important}
.cmp-action:nth-child(4n+1) i{background:var(--soft-orange)!important;color:var(--cmp-orange)!important}
.cmp-action:nth-child(4n+2) i{background:var(--soft-teal)!important;color:var(--teal)!important}
.cmp-action:nth-child(4n+3) i{background:var(--soft-blue)!important;color:var(--cmp-blue)!important}
.cmp-action:nth-child(4n+4) i{background:#fff8db!important;color:#b98600!important}
html[data-theme="dark"] .cmp-action:nth-child(4n+4) i{background:#302b17!important;color:#f2c551!important}
.cmp-row-icon{background:var(--cmp-bg)!important;border:1px solid var(--cmp-line)!important}
.cmp-btn,.cmp-field{border-radius:15px!important}

/* Sidebar utilities now contain theme, preferences and logout. */
.sidebar-mobile-head{display:none}
.sidebar-divider{height:1px;background:var(--cmp-line);margin:5px 8px}
.nav-danger{color:var(--cmp-red)!important}
.nav-danger:hover{background:color-mix(in srgb,var(--cmp-red) 8%,transparent)!important;color:var(--cmp-red)!important}
#headerLogout,#sidebarLogoutBtn,.user-badge{display:none!important}
#headerLogout.is-auth-visible{display:inline-flex!important}
#sidebarLogoutBtn.is-auth-visible{display:flex!important}
.user-badge.is-auth-visible{display:flex!important}

/* Footer notification item is intentionally removed from mobile navigation. */
.app-footer .footer-btn[data-page="notifications"]{display:none!important}

@media (min-width:901px){
  .app-header .user-badge{order:10!important;margin-left:0!important}
  .app-header .header-actions{order:5!important}
}

@media (max-width:900px){
  :root{--cmp-header:72px;--cmp-footer:76px}
  body{background:var(--cmp-bg)!important}
  body.cmp-nav-open{overflow:hidden!important}

  /* Header: menu first, logo second, light actions, profile always last. */
  .app-header{
    position:fixed!important;top:0!important;left:0!important;right:0!important;
    height:var(--cmp-header)!important;padding:10px 12px!important;gap:8px!important;
    background:color-mix(in srgb,var(--cmp-surface) 93%,transparent)!important;
    backdrop-filter:blur(18px) saturate(145%)!important;
    -webkit-backdrop-filter:blur(18px) saturate(145%)!important;
    border-bottom:1px solid color-mix(in srgb,var(--cmp-line) 82%,transparent)!important;
    box-shadow:var(--mobile-header-shadow)!important;
  }
  .header-menu-btn{order:1!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;flex:0 0 44px!important;width:44px!important;height:44px!important;border-radius:15px!important;background:var(--cmp-card)!important;border:1px solid var(--cmp-line)!important;box-shadow:0 6px 16px rgba(0,0,0,.04)!important}
  .app-brand{order:2!important;min-width:0!important;flex:0 0 auto!important;margin:0!important}
  .app-brand-logo{width:44px!important;height:44px!important;border-radius:14px!important;box-shadow:0 7px 18px rgba(0,0,0,.1)!important}
  .app-brand-copy{display:none!important}
  .header-actions{order:3!important;margin-left:auto!important;display:flex!important;gap:6px!important;flex:0 0 auto!important}
  .user-badge{order:4!important;margin:0!important;flex:0 0 auto!important;padding:0!important;border:0!important;background:transparent!important;max-width:none!important;display:flex!important}
  .user-badge .user-name{display:none!important}
  .user-badge .avatar-mini{width:42px!important;height:42px!important;border-radius:14px!important;border:2px solid var(--cmp-card)!important;box-shadow:0 7px 18px rgba(0,0,0,.12)!important}

  /* Keep the mobile header intentionally uncluttered. */
  #headerPreferencesBtn,#themeToggle,#headerLogout,#pwaInstallBtn{display:none!important}
  #headerNotificationBtn,#langToggle{display:inline-flex!important;width:42px!important;height:42px!important;border-radius:14px!important;background:var(--cmp-card)!important;box-shadow:none!important}
  #langToggle{font-size:.72rem!important}

  /* Main page starts below the fixed header and stays clear of floating footer. */
  .page-container{top:var(--cmp-header)!important;bottom:0!important;left:0!important;right:0!important;margin-left:0!important;padding:0!important;background:var(--cmp-bg)!important}
  .page-wrapper{padding:16px 12px calc(var(--cmp-footer) + 28px)!important}
  .page-wrapper,.ref-page{max-width:100%!important}
  .cmp-shell{gap:14px!important}
  .cmp-card{padding:16px!important;border-radius:23px!important}
  .cmp-title{font-size:1.7rem!important}
  .cmp-sub{font-size:.84rem!important}
  .cmp-topbar{gap:12px!important}

  /* Mobile side drawer: app identity + uncluttered navigation utilities. */
  .desktop-nav{
    top:0!important;bottom:0!important;left:0!important;width:min(322px,88vw)!important;
    padding:14px 12px max(18px,env(safe-area-inset-bottom))!important;
    background:color-mix(in srgb,var(--cmp-surface) 97%,transparent)!important;
    transform:translateX(-108%)!important;transition:transform .28s cubic-bezier(.2,.85,.2,1)!important;
    border-right:1px solid var(--cmp-line)!important;box-shadow:24px 0 70px rgba(0,0,0,.24)!important;
    z-index:1400!important;gap:5px!important;
  }
  .desktop-nav.open{transform:translateX(0)!important}
  .sidebar-mobile-head{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:12px!important;padding:3px 3px 15px!important;margin-bottom:3px!important;border-bottom:1px solid var(--cmp-line)!important}
  .sidebar-mobile-brand{display:flex;align-items:center;gap:10px;min-width:0}
  .sidebar-mobile-brand img{width:46px;height:46px;object-fit:cover;border-radius:15px;box-shadow:0 8px 20px rgba(0,0,0,.11)}
  .sidebar-mobile-brand strong{display:block;font-size:.8rem;letter-spacing:.08em;color:var(--cmp-ink)}
  .sidebar-mobile-brand span{display:block;margin-top:3px;font-size:.59rem;font-weight:900;letter-spacing:.11em;color:var(--cmp-orange)}
  .sidebar-close-btn{width:40px;height:40px;border-radius:13px;border:1px solid var(--cmp-line);background:var(--cmp-bg);color:var(--cmp-ink);display:grid;place-items:center;flex:0 0 40px}
  .desktop-nav .nav-link{min-height:48px!important;border-radius:15px!important;padding:11px 13px!important;font-size:.88rem!important}
  .desktop-nav .nav-link i{width:25px!important;font-size:1.08rem!important}
  .desktop-nav .nav-link.active{background:var(--cmp-ink)!important;color:#fff!important;box-shadow:0 10px 24px rgba(0,0,0,.14)!important}
  .sidebar-footer{margin-top:auto!important}
  .btn-connect{min-height:48px!important;border-radius:15px!important;box-shadow:0 10px 22px color-mix(in srgb,var(--cmp-orange) 24%,transparent)!important}
  .mobile-nav-backdrop{position:fixed!important;inset:0!important;background:rgba(9,9,8,.48)!important;backdrop-filter:blur(4px)!important;z-index:1390!important}

  /* Bottom nav: five useful destinations, floating like the reference app. */
  .app-footer{
    display:flex!important;left:12px!important;right:12px!important;bottom:max(10px,env(safe-area-inset-bottom))!important;
    width:auto!important;height:var(--cmp-footer)!important;padding:7px!important;gap:3px!important;
    transform:none!important;border:1px solid color-mix(in srgb,var(--cmp-line) 92%,transparent)!important;
    border-radius:25px!important;background:color-mix(in srgb,var(--cmp-surface) 95%,transparent)!important;
    backdrop-filter:blur(18px) saturate(140%)!important;-webkit-backdrop-filter:blur(18px) saturate(140%)!important;
    box-shadow:var(--mobile-nav-shadow)!important;overflow:visible!important;
  }
  .footer-btn{height:60px!important;min-width:0!important;padding:6px 2px!important;gap:4px!important;border-radius:19px!important;font-size:.59rem!important;letter-spacing:.01em!important;transition:transform .18s ease,background .18s ease,color .18s ease!important}
  .footer-btn i{font-size:1.16rem!important}
  .footer-btn.active{background:var(--cmp-ink)!important;color:#fff!important;box-shadow:0 8px 18px rgba(0,0,0,.14)!important;transform:translateY(-1px)!important}
  .footer-btn .badge-dot{width:6px!important;height:6px!important;background:var(--cmp-orange)!important}
}

@media (max-width:520px){
  .app-header{padding:9px 10px!important;gap:6px!important}
  .header-menu-btn{width:42px!important;height:42px!important;flex-basis:42px!important;border-radius:14px!important}
  .app-brand-logo{width:42px!important;height:42px!important;border-radius:13px!important}
  #headerNotificationBtn,#langToggle{width:40px!important;height:40px!important;border-radius:13px!important}
  .user-badge .avatar-mini{width:40px!important;height:40px!important;border-radius:13px!important}
  .app-footer{left:9px!important;right:9px!important;border-radius:23px!important}
  .footer-btn{font-size:.56rem!important}
  .footer-btn i{font-size:1.12rem!important}
  .cmp-action-grid{grid-template-columns:repeat(4,1fr)!important;gap:8px!important}
}

@media (max-width:390px){
  #langToggle{display:none!important}
  .cmp-action-grid{grid-template-columns:repeat(3,1fr)!important}
  .footer-btn span{font-size:.53rem!important}
}