/* CONTROLPRO V132 - Base global e camada visual iOS inicial
   Blocos originais 01-02 da V131. Ordem interna preservada. */

/* =====================================================================
   inline-style-01
   Extraído do index V129 na separação V131
   ===================================================================== */
/* ===== ESTILOS COMPLETOS (mesmo do original) ===== */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
        }
        html, body {
            height: 100%;
            width: 100%;
            background: #000000;
            overflow: hidden;
        }
        body {
            background: var(--bg-body);
            color: var(--text-main);
            transition: background 0.2s, color 0.2s;
            overflow: hidden;
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
        }
        body.theme-light {
            --bg-body: #e2e8f0;
            --text-main: #1e2a3a;
            --card-bg: #ffffff;
            --card-border: #e2e8f0;
            --input-bg: #f8fafc;
            --input-border: #e2e8f0;
            --btn-primary-bg: #3b82f6;
            --btn-primary-text: white;
            --filter-btn-bg: #f1f5f9;
            --filter-active-bg: #3b82f6;
            --stat-card-bg: #f8fafc;
            --sidebar-bg: #ffffff;
            --servico-highlight: #3b82f6;
            --cloud-ok: #10b981;
            --cloud-error: #ef4444;
            --select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%233b82f6' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
        }
        body.theme-dark {
            --bg-body: #0f172a;
            --text-main: #e2e8f0;
            --card-bg: #1e293b;
            --card-border: #334155;
            --input-bg: #0f172a;
            --input-border: #475569;
            --btn-primary-bg: #0ea5e9;
            --btn-primary-text: #ffffff;
            --filter-btn-bg: #334155;
            --filter-active-bg: #0ea5e9;
            --stat-card-bg: #0f172a;
            --sidebar-bg: #1e293b;
            --servico-highlight: #0ea5e9;
            --cloud-ok: #10b981;
            --cloud-error: #ef4444;
            --select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%230ea5e9' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
        }
        body.theme-azul {
            --bg-body: #e8f0fe;
            --text-main: #1a3a5c;
            --card-bg: #ffffff;
            --card-border: #bcd0e8;
            --input-bg: #f0f4f8;
            --input-border: #bcd0e8;
            --btn-primary-bg: #1e6f9f;
            --btn-primary-text: white;
            --filter-btn-bg: #d9e6f2;
            --filter-active-bg: #1e6f9f;
            --stat-card-bg: #f0f4f8;
            --sidebar-bg: #ffffff;
            --servico-highlight: #1e6f9f;
            --cloud-ok: #10b981;
            --cloud-error: #ef4444;
            --select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%231e6f9f' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
        }
        body.theme-preto {
            --bg-body: #000000;
            --text-main: #e0e0e0;
            --card-bg: #1a1a1a;
            --card-border: #333333;
            --input-bg: #000000;
            --input-border: #444444;
            --btn-primary-bg: #00a896;
            --btn-primary-text: white;
            --filter-btn-bg: #2a2a2a;
            --filter-active-bg: #00a896;
            --stat-card-bg: #111111;
            --sidebar-bg: #111111;
            --servico-highlight: #00a896;
            --cloud-ok: #00a896;
            --cloud-error: #ef4444;
            --select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2300a896' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
        }
        body.theme-verde {
            --bg-body: #e6f4ea;
            --text-main: #1a4a2a;
            --card-bg: #ffffff;
            --card-border: #bce0c8;
            --input-bg: #fff;
            --input-border: #8abfa0;
            --btn-primary-bg: #2e7d5e;
            --btn-primary-text: white;
            --filter-btn-bg: #d4f0e0;
            --filter-active-bg: #2e7d5e;
            --stat-card-bg: #f0faf4;
            --sidebar-bg: #ffffff;
            --servico-highlight: #2e7d5e;
            --cloud-ok: #2e7d5e;
            --cloud-error: #ef4444;
            --select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%232e7d5e' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
        }
        body.theme-preto-puro {
            --bg-body: #000000;
            --text-main: #ffffff;
            --card-bg: #0a0a0a;
            --card-border: #222222;
            --input-bg: #000000;
            --input-border: #333333;
            --btn-primary-bg: #28f7e7;
            --btn-primary-text: #000000;
            --filter-btn-bg: #000000;
            --filter-active-bg: #28f7e7;
            --stat-card-bg: #0a0a0a;
            --sidebar-bg: #0a0a0a;
            --servico-highlight: #28f7e7;
            --cloud-ok: #28f7e7;
            --cloud-error: #ef4444;
            --select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2328f7e7' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
        }
        body.theme-lilas {
            --bg-body: #f3e8ff;
            --text-main: #3b1f5e;
            --card-bg: #ffffff;
            --card-border: #d8b4fe;
            --input-bg: #faf5ff;
            --input-border: #d8b4fe;
            --btn-primary-bg: #8b5cf6;
            --btn-primary-text: #ffffff;
            --filter-btn-bg: #ede9fe;
            --filter-active-bg: #8b5cf6;
            --stat-card-bg: #faf5ff;
            --sidebar-bg: #ffffff;
            --servico-highlight: #8b5cf6;
            --cloud-ok: #7c3aed;
            --cloud-error: #ef4444;
            --select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238b5cf6' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
        }
        body.theme-preto-lilas {
            --bg-body: #000000;
            --text-main: #ffffff;
            --card-bg: #0a0a0a;
            --card-border: #2a1a4a;
            --input-bg: #000000;
            --input-border: #3a2a5a;
            --btn-primary-bg: #a78bfa;
            --btn-primary-text: #000000;
            --filter-btn-bg: #1a1a2a;
            --filter-active-bg: #a78bfa;
            --stat-card-bg: #0a0a0a;
            --sidebar-bg: #0a0a0a;
            --servico-highlight: #a78bfa;
            --cloud-ok: #a78bfa;
            --cloud-error: #ef4444;
            --select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23a78bfa' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
        }
        body.theme-preto-puro .filter-btn {
            background: #000000;
            color: #ffffff;
            border: 1px solid #333333;
        }
        body.theme-preto-puro .filter-btn.active-filter {
            background: #000000;
            color: #ffffff;
            border-color: #28f7e7;
            box-shadow: 0 0 0 1px #28f7e7;
        }
        body.theme-preto-puro .drawer-status-item {
            background: #1a1a1a;
            border: 1px solid #333333;
            color: #ffffff;
        }
        body.theme-preto-puro .drawer-status-item .status-value.warning {
            color: #f59e0b;
        }
        body.theme-preto-puro .drawer-status-item .status-value.expired {
            color: #ef4444;
        }
        body.theme-custom {
            --select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%233b82f6' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
        }

        /* TELA DE LOGIN PADRÃO (original) */
        #loginScreen {
            background: #000000 !important;
        }
        #loginScreen .login-card {
            background: #0A0A0A !important;
            border: 1px solid #1A1A1A !important;
            box-shadow: 0 8px 30px rgba(0,0,0,0.8) !important;
            padding: 28px 20px !important;
            max-width: 400px !important;
        }
        #loginScreen .login-logo {
            text-align: center;
            margin-bottom: 12px;
        }
        #loginScreen .login-logo i {
            font-size: 48px;
            background: #76F2E7;
            color: #000;
            padding: 14px;
            border-radius: 20px;
            display: inline-block;
            margin-bottom: 6px;
        }
        #loginScreen .login-title {
            font-size: 26px;
            font-weight: 700;
            text-align: center;
            margin: 12px 0 4px;
            color: #FFFFFF !important;
        }
        #loginScreen .login-sub {
            text-align: center;
            color: #AAAAAA !important;
            font-size: 14px;
            margin-bottom: 24px;
        }
        #loginScreen .input-group {
            margin-bottom: 16px !important;
        }
        #loginScreen .input-group label {
            color: #FFFFFF !important;
            font-size: 13px;
            margin-bottom: 4px;
        }
        #loginScreen .input-group input {
            background: #000000 !important;
            border: 1.5px solid #2A2A2A !important;
            color: #FFFFFF !important;
            border-radius: 24px !important;
            padding: 14px 16px !important;
            font-size: 15px;
        }
        #loginScreen .input-group input::placeholder {
            color: #707070 !important;
            opacity: 1 !important;
        }
        #loginScreen .btn-login {
            background: #76F2E7 !important;
            color: #000000 !important;
            font-weight: 700 !important;
            border: none !important;
            border-radius: 40px !important;
            padding: 14px !important;
            font-size: 16px !important;
            margin-top: 8px;
            transition: background 0.2s;
        }
        #loginScreen .btn-login:hover {
            background: #5fd9ce !important;
        }
        #loginScreen .auth-toggle {
            text-align: center;
            margin-top: 16px;
            font-size: 14px;
            color: #FFFFFF !important;
        }
        #loginScreen .auth-toggle button {
            color: #76F2E7 !important;
            background: none;
            border: none;
            font-weight: 600;
            cursor: pointer;
        }
        #loginScreen .quick-login-card {
            background: #0A0A0A !important;
            border: 1px solid #2A2A2A !important;
            border-radius: 60px;
            padding: 12px 18px;
            margin-bottom: 18px;
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 14px;
        }
        #loginScreen .quick-login-name {
            color: #FFFFFF !important;
            font-weight: 700;
            font-size: 16px;
        }
        #loginScreen .quick-login-sub {
            color: #AAAAAA !important;
            font-size: 13px;
        }
        #loginScreen .switchAccountBtn {
            color: #76F2E7 !important;
            background: none;
            border: none;
            font-weight: 600;
            cursor: pointer;
            width: 100%;
            text-align: center;
            margin-bottom: 16px;
            font-size: 14px;
        }
        #loginScreen .error-msg {
            background: #fee2e2;
            color: #b91c1c;
            font-size: 13px;
            padding: 10px;
            border-radius: 20px;
            margin-top: 14px;
            text-align: center;
        }
        .hidden { display: none !important; }
        #loadingOverlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: #000000;
            z-index: 10000;
            display: flex;
            align-items: flex-end;
            justify-content: center;
            padding-bottom: 80px;
            transition: opacity 0.2s ease;
        }
        .loading-background {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            z-index: 1;
        }
        .loading-content {
            position: relative;
            z-index: 2;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 12px;
            background: rgba(0, 0, 0, 0.5);
            padding: 12px 24px;
            border-radius: 48px;
            backdrop-filter: blur(8px);
        }
        .spinner-small {
            width: 32px;
            height: 32px;
            border: 3px solid rgba(255,255,255,0.3);
            border-top: 3px solid #76F2E7;
            border-radius: 50%;
            animation: spin 1s linear infinite;
        }
        .loading-text {
            color: white;
            font-size: 14px;
            font-weight: 500;
            text-shadow: 0 1px 2px black;
        }
        /* CONTROLPRO V63 — loading de ação compacto + elegante, sem pílula gigante. */
        #actionLoadingOverlay {
            position: fixed;
            inset: 0;
            width: 100%;
            height: 100%;
            background: rgba(8, 15, 28, 0.24);
            backdrop-filter: blur(7px) saturate(120%);
            -webkit-backdrop-filter: blur(7px) saturate(120%);
            z-index: 10001;
            display: none;
            align-items: center;
            justify-content: center;
            padding: 20px;
        }
        .action-loading-pill {
            width: min(286px, calc(100vw - 40px));
            min-height: 104px;
            background: color-mix(in srgb, var(--card-bg) 96%, transparent);
            color: var(--text-main);
            border: 1px solid color-mix(in srgb, var(--card-border) 74%, transparent);
            border-radius: 24px;
            padding: 18px 20px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 10px;
            backdrop-filter: blur(22px) saturate(155%);
            -webkit-backdrop-filter: blur(22px) saturate(155%);
            box-shadow: 0 24px 65px rgba(2,8,23,.22), inset 0 1px 0 rgba(255,255,255,.28);
        }
        .action-spinner {
            width: 28px;
            height: 28px;
            border: 2.5px solid color-mix(in srgb, var(--text-main) 14%, transparent);
            border-top-color: var(--btn-primary-bg);
            border-radius: 50%;
            animation: spin .82s linear infinite;
        }
        .action-loading-text {
            color: var(--text-main);
            font-size: 13.5px;
            line-height: 1.3;
            font-weight: 700;
            letter-spacing: -.01em;
            text-align: center;
        }
        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
        .update-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: var(--bg-body);
            z-index: 20000;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            gap: 20px;
            font-size: 18px;
            font-weight: 600;
            color: var(--text-main);
        }
        .progress-bar-container {
            width: 80%;
            max-width: 300px;
            height: 8px;
            background: rgba(0,0,0,0.1);
            border-radius: 4px;
            overflow: hidden;
        }
        .progress-bar {
            width: 0%;
            height: 100%;
            background: var(--btn-primary-bg);
            transition: width 0.3s;
        }
        .app-container {
            width: 100%; height: 100%;
            background: var(--bg-body);
            display: flex; flex-direction: column;
            overflow: hidden;
        }
        .screen {
            width: 100%; height: 100%;
            display: flex; flex-direction: column;
            overflow: hidden;
        }
        .login-screen {
            justify-content: center;
            align-items: center;
            padding: 24px 20px;
            overflow-y: auto;
        }
        .login-card {
            width: 100%; max-width: 400px; margin: 0 auto;
            background: var(--card-bg); border-radius: 32px; padding: 28px 20px;
            box-shadow: 0 8px 30px rgba(0,0,0,0.05); border: 1px solid var(--card-border);
            color: var(--text-main);
        }
        .app-icon span {
            font-size: 48px;
            background: var(--btn-primary-bg);
            display: inline-flex;
            width: 72px;
            height: 72px;
            align-items: center;
            justify-content: center;
            border-radius: 28px;
            color: white;
        }
        .login-title {
            font-size: 26px;
            font-weight: 700;
            text-align: center;
            margin: 16px 0 8px;
        }
        .login-sub {
            text-align: center;
            color: #64748b;
            font-size: 14px;
            margin-bottom: 28px;
        }
        .input-group {
            margin-bottom: 18px;
        }
        .input-group label {
            display: block;
            font-size: 13px;
            font-weight: 600;
            margin-bottom: 6px;
        }
        .input-group input {
            width: 100%;
            padding: 14px 16px;
            border: 1.5px solid var(--input-border);
            border-radius: 24px;
            font-size: 15px;
            background: var(--input-bg);
            color: var(--text-main);
            outline: none;
        }
        .btn-login {
            width: 100%;
            background: var(--btn-primary-bg);
            color: var(--btn-primary-text);
            border: none;
            padding: 14px;
            border-radius: 40px;
            font-size: 16px;
            font-weight: 700;
            margin-top: 12px;
            cursor: pointer;
        }
        .auth-toggle {
            text-align: center;
            margin-top: 20px;
            font-size: 14px;
        }
        .auth-toggle button {
            background: none;
            border: none;
            color: var(--btn-primary-bg);
            font-weight: 600;
            cursor: pointer;
        }
        .error-msg {
            background: #fee2e2;
            color: #b91c1c;
            font-size: 13px;
            padding: 10px;
            border-radius: 20px;
            margin-top: 16px;
            text-align: center;
        }
        .quick-login-card {
            display: flex;
            align-items: center;
            gap: 16px;
            background: var(--filter-btn-bg);
            border-radius: 60px;
            padding: 12px 20px;
            margin-bottom: 24px;
            cursor: pointer;
        }
        .quick-login-avatar {
            width: 56px;
            height: 56px;
            border-radius: 50%;
            object-fit: cover;
            border: 2px solid var(--card-bg);
        }
        .quick-login-name {
            font-weight: 700;
            font-size: 16px;
        }

        .topbar {
            display: grid;
            grid-template-columns: auto 1fr auto;
            align-items: center;
            gap: 8px;
            background: var(--card-bg);
            border-bottom: 1px solid var(--card-border);
            padding: 4px 12px;
            min-height: 48px;
            flex-shrink: 0;
        }
        .topbar-left {
            grid-column: 1;
            display: flex;
            align-items: center;
            justify-self: start;
        }
        .topbar-right {
            grid-column: 3;
            display: flex;
            align-items: center;
            gap: 4px;
            justify-self: end;
        }
        .user-info-compact {
            grid-column: 2;
            justify-self: center;
            display: flex;
            flex-direction: column;
            align-items: center;
            min-width: 0;
            max-width: 100%;
            text-align: center;
        }
        .user-row {
            display: flex;
            align-items: center;
            gap: 6px;
            min-width: 0;
            max-width: 100%;
        }
        .user-avatar {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            object-fit: cover;
            border: 2px solid var(--card-border);
            flex-shrink: 0;
            background: var(--filter-btn-bg);
        }
        .user-name {
            font-size: 15px;
            font-weight: 700;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            color: var(--text-main);
            max-width: 100%;
            min-width: 0;
        }
        .cloud-status-icon {
            font-size: 18px;
            flex-shrink: 0;
            color: #64748b;
            transition: color 0.2s;
            cursor: pointer;
            margin-right: 2px;
        }
        .cloud-status-icon.sync-green {
            color: var(--cloud-ok);
        }
        .cloud-status-icon.sync-red {
            color: var(--cloud-error);
        }
        .cloud-status-icon.sync-spin {
            animation: spin 1s linear infinite;
        }

        .menu-icon {
            font-size: 22px;
            color: var(--text-main);
            cursor: pointer;
            background: none;
            border: none;
            width: 32px;
            flex-shrink: 0;
        }
        .notification-icon {
            position: relative;
            font-size: 18px;
            color: var(--text-main);
            cursor: pointer;
            background: var(--filter-btn-bg);
            border: none;
            width: 32px;
            height: 32px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.2s;
        }
        .notification-icon.has-notification {
            animation: pulseRing 1.5s infinite;
            background: var(--btn-primary-bg);
            color: white;
        }
        .notification-icon .badge {
            position: absolute;
            top: -4px;
            right: -4px;
            background: #ef4444;
            color: white;
            border-radius: 20px;
            padding: 1px 5px;
            font-size: 9px;
            font-weight: bold;
            min-width: 16px;
            text-align: center;
        }
        @keyframes pulseRing {
            0% { box-shadow: 0 0 0 0 rgba(59,130,246,0.7); }
            70% { box-shadow: 0 0 0 8px rgba(59,130,246,0); }
            100% { box-shadow: 0 0 0 0 rgba(59,130,246,0); }
        }
        .add-client-btn {
            font-size: 18px;
            color: var(--text-main);
            cursor: pointer;
            background: var(--filter-btn-bg);
            border: none;
            width: 32px;
            height: 32px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .content {
            padding: 2px 12px 12px 12px;
            flex: 1;
            overflow-y: auto;
            -webkit-overflow-scrolling: touch;
        }
        .page {
            display: flex;
            flex-direction: column;
            gap: 4px;
            width: 100%;
        }
        #pageListaClientes {
            gap: 4px;
        }
        #pageListaClientes .search-container {
            margin-top: 0;
            margin-bottom: 0;
            padding: 0;
        }
        #pageListaClientes .search-container input {
            margin-bottom: 0;
        }
        .search-container {
            margin-bottom: 0;
        }
        .filter-bar {
            margin-top: 0;
            margin-bottom: 0;
            padding: 0;
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
            gap: 4px;
            width: 100%;
        }
        .client-list {
            display: flex;
            flex-direction: column;
            gap: 4px;
            width: 100%;
            margin-top: 0;
        }
        .card-item {
            background: var(--card-bg);
            border: 1px solid var(--card-border);
            border-radius: 20px;
            padding: 12px 16px;
            width: 100%;
            box-shadow: 0 4px 12px rgba(0,0,0,0.04);
        }

        .card-form {
            background: var(--card-bg);
            border: 1px solid var(--card-border);
            border-radius: 20px;
            padding: 16px;
            width: 100%;
        }
        .card-form h3 {
            margin-bottom: 16px;
            border-bottom: 2px solid var(--card-border);
            padding-bottom: 8px;
            color: var(--btn-primary-bg);
        }
        input, select, textarea {
            background: var(--input-bg);
            border: 1px solid var(--input-border);
            border-radius: 40px;
            padding: 12px 16px;
            width: 100%;
            margin-bottom: 16px;
            color: var(--text-main);
            outline: none;
            font-size: 14px;
        }
        select {
            appearance: none;
            background-image: var(--select-arrow);
            background-repeat: no-repeat;
            background-position: right 16px center;
            cursor: pointer;
        }
        textarea {
            resize: vertical;
            min-height: 80px;
        }
        button {
            font-family: inherit;
        }
        .btn-action {
            background: var(--btn-primary-bg);
            color: var(--btn-primary-text);
            border: none;
            border-radius: 40px;
            padding: 12px 24px;
            cursor: pointer;
            font-weight: 600;
            width: 100%;
        }
        .btn-cancel {
            background: var(--filter-btn-bg);
            color: var(--text-main);
            border: 1px solid var(--input-border);
            border-radius: 40px;
            padding: 12px 24px;
            cursor: pointer;
            font-weight: 600;
        }
        .filter-btn {
            background: var(--filter-btn-bg);
            color: var(--text-main);
            border: none;
            padding: 8px 4px;
            border-radius: 40px;
            cursor: pointer;
            font-weight: 600;
            font-size: 0.7rem;
            text-align: center;
        }
        .filter-btn.active-filter {
            background: var(--filter-active-bg);
            color: white;
        }
        @keyframes pulseColor {
            0% { background-color: #10b981; }
            25% { background-color: #3b82f6; }
            50% { background-color: #8b5cf6; }
            75% { background-color: #f59e0b; }
            100% { background-color: #10b981; }
        }
        .filter-btn.pulse {
            animation: pulseColor 2s infinite;
            color: white;
            font-weight: 700;
        }

        .status-badge {
            display: inline-block;
            padding: 4px 12px;
            border-radius: 40px;
            font-size: 12px;
            font-weight: 700;
            text-transform: uppercase;
        }
        .status-ativo {
            background: #dcfce7;
            color: #166534;
        }
        .status-vencido {
            background: #fee2e2;
            color: #b91c1c;
        }
        .status-excluido {
            background: #f1f5f9;
            color: #475569;
        }
        .action-row {
            display: flex;
            gap: 8px;
            margin-top: 10px;
            flex-wrap: wrap;
            justify-content: center;
        }
        .btn-wa {
            background: #25D366;
            color: white;
            border: none;
            padding: 6px 12px;
            border-radius: 20px;
            cursor: pointer;
            font-weight: 600;
            font-size: 12px;
        }
        .btn-wa-simples {
            background: #25D366;
            color: white;
            border: none;
            padding: 6px 12px;
            border-radius: 20px;
            cursor: pointer;
            font-weight: 600;
            font-size: 12px;
        }
        .btn-editar, .btn-renovar, .btn-gerar-cp, .btn-excluir {
            padding: 8px 16px;
            font-size: 14px;
            border-radius: 24px;
            cursor: pointer;
            font-weight: 600;
            border: none;
        }
        .btn-editar {
            background: #3b82f6;
            color: white;
        }
        .btn-renovar {
            background: #10b981;
            color: white;
        }
        .btn-gerar-cp {
            background: #7c3aed;
            color: white;
        }
        .btn-excluir {
            background: #ef4444;
            color: white;
        }
        .btn-premiar {
            background: #8b5cf6;
            color: white;
            border: none;
            padding: 4px 10px;
            border-radius: 20px;
            cursor: pointer;
            font-weight: 600;
            font-size: 0.7rem;
        }
        .stats-row {
            display: flex;
            gap: 16px;
            flex-wrap: wrap;
            margin-bottom: 20px;
        }
        .stat-card {
            background: var(--stat-card-bg);
            border: 1px solid var(--card-border);
            border-radius: 20px;
            padding: 16px;
            flex: 1;
            text-align: center;
            min-width: 120px;
            cursor: pointer;
            transition: transform 0.2s, box-shadow 0.2s;
        }
        .stat-card:hover {
            transform: translateY(-4px);
            box-shadow: 0 8px 20px rgba(0,0,0,0.1);
        }
        .stat-card strong {
            display: block;
            font-size: 24px;
            color: var(--btn-primary-bg);
            margin-top: 8px;
        }
        .servico-card {
            background: var(--card-bg);
            border: 1px solid var(--card-border);
            border-radius: 16px;
            padding: 16px;
            margin-bottom: 12px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap;
            gap: 10px;
        }
        .servico-card .servico-nome {
            font-weight: 700;
            color: var(--servico-highlight);
            font-size: 1.1rem;
        }

        .drawer {
            position: fixed;
            top: 0;
            left: -320px;
            width: 300px;
            height: 100%;
            background: var(--sidebar-bg);
            border-right: 1px solid var(--card-border);
            box-shadow: 4px 0 30px rgba(0,0,0,0.15);
            transition: left 0.3s ease;
            z-index: 1000;
            padding: 16px 12px 20px;
            overflow-y: auto;
            -webkit-overflow-scrolling: touch;
            color: var(--text-main);
            display: flex;
            flex-direction: column;
        }
        .drawer.open {
            left: 0;
        }
        .overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,0.5);
            z-index: 999;
            display: none;
        }
        .overlay.active {
            display: block;
        }
        .drawer-header {
            font-weight: 800;
            font-size: 20px;
            border-bottom: 1px solid var(--card-border);
            padding-bottom: 12px;
            margin-bottom: 16px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            color: var(--btn-primary-bg);
        }
        .drawer-header span {
            display: flex;
            align-items: center;
            gap: 8px;
        }
        .drawer-header span i {
            font-size: 24px;
        }
        .drawer-close-btn {
            background: none;
            border: none;
            font-size: 22px;
            color: var(--text-main);
            cursor: pointer;
            padding: 4px 8px;
            border-radius: 10px;
            transition: background 0.2s;
        }
        .drawer-close-btn:hover {
            background: var(--filter-btn-bg);
        }

        .drawer-section-title {
            font-size: 11px;
            color: #94a3b8;
            text-transform: uppercase;
            letter-spacing: 0.6px;
            margin: 14px 0 4px 4px;
            font-weight: 700;
        }

        .drawer-item {
            padding: 10px 14px;
            border-radius: 12px;
            font-weight: 600;
            color: var(--text-main);
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 12px;
            transition: 0.2s;
            margin-bottom: 1px;
            background: none;
            border: none;
            width: 100%;
            text-align: left;
            font-size: 14px;
        }
        .drawer-item i {
            width: 22px;
            font-size: 16px;
            color: var(--btn-primary-bg);
            text-align: center;
        }
        .drawer-item:hover {
            background: var(--filter-btn-bg);
            color: var(--btn-primary-bg);
            transform: translateX(3px);
        }
        .drawer-item.danger {
            color: #ef4444;
        }
        .drawer-item.danger i {
            color: #ef4444;
        }
        .drawer-item.danger:hover {
            background: #fee2e2;
            color: #b91c1c;
        }

        .drawer-status-item {
            padding: 10px 14px;
            border-radius: 12px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-weight: 500;
            font-size: 13px;
            color: var(--text-main);
            cursor: default;
            background: var(--filter-btn-bg);
            margin-bottom: 2px;
        }
        .drawer-status-item span:first-child {
            display: flex;
            align-items: center;
            gap: 8px;
        }
        .drawer-status-item .status-value {
            font-weight: 700;
            padding: 2px 10px;
            border-radius: 30px;
            background: var(--card-bg);
            font-size: 12px;
        }
        .drawer-status-item .status-value.warning {
            color: #f59e0b;
            background: #fef3c7;
        }
        .drawer-status-item .status-value.expired {
            color: #ef4444;
            background: #fee2e2;
        }

        .drawer-toggle-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 8px 14px;
            font-weight: 600;
            border-radius: 12px;
            transition: background 0.2s;
            cursor: pointer;
            font-size: 14px;
        }
        .drawer-toggle-row:hover {
            background: var(--filter-btn-bg);
        }
        .toggle-switch {
            position: relative;
            width: 44px;
            height: 26px;
        }
        .toggle-switch input {
            display: none;
        }
        .slider {
            position: absolute;
            cursor: pointer;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: var(--input-border);
            transition: 0.3s;
            border-radius: 34px;
        }
        .slider:before {
            position: absolute;
            content: "";
            height: 20px;
            width: 20px;
            left: 3px;
            bottom: 3px;
            background-color: white;
            transition: 0.3s;
            border-radius: 50%;
        }
        input:checked+.slider {
            background-color: var(--btn-primary-bg);
        }
        input:checked+.slider:before {
            transform: translateX(18px);
        }

        .drawer-footer {
            margin-top: auto;
            padding-top: 16px;
            border-top: 1px solid var(--card-border);
            font-size: 11px;
            text-align: center;
            color: #94a3b8;
        }

        .profile-modal .modal-box {
            max-width: 480px;
            padding: 20px 18px;
        }
        .profile-modal .profile-header {
            display: flex;
            flex-direction: column;
            align-items: center;
            margin-bottom: 16px;
        }
        .profile-modal .profile-avatar-wrapper {
            position: relative;
            width: 80px;
            height: 80px;
            margin-bottom: 8px;
        }
        .profile-modal .profile-avatar-wrapper img {
            width: 100%;
            height: 100%;
            border-radius: 50%;
            object-fit: cover;
            border: 3px solid var(--card-border);
            background: var(--filter-btn-bg);
        }
        .profile-modal .profile-avatar-actions {
            display: flex;
            gap: 10px;
            margin-top: 4px;
        }
        .profile-modal .profile-avatar-actions label,
        .profile-modal .profile-avatar-actions button {
            font-size: 12px;
            background: var(--filter-btn-bg);
            padding: 4px 12px;
            border-radius: 30px;
            cursor: pointer;
            border: none;
            color: var(--text-main);
            font-weight: 600;
            transition: background 0.2s;
        }
        .profile-modal .profile-avatar-actions label:hover,
        .profile-modal .profile-avatar-actions button:hover {
            background: var(--btn-primary-bg);
            color: white;
        }
        .profile-modal .profile-avatar-actions button.danger {
            color: #ef4444;
        }
        .profile-modal .profile-avatar-actions button.danger:hover {
            background: #fee2e2;
            color: #b91c1c;
        }
        .profile-modal .field-row {
            margin-bottom: 12px;
        }
        .profile-modal .field-row label {
            display: block;
            font-weight: 600;
            font-size: 12px;
            margin-bottom: 4px;
        }
        .profile-modal .field-row input {
            width: 100%;
            padding: 10px 14px;
            border-radius: 30px;
            border: 1px solid var(--input-border);
            background: var(--input-bg);
            color: var(--text-main);
            font-size: 14px;
            outline: none;
        }
        .profile-modal .field-row input:focus {
            border-color: var(--btn-primary-bg);
        }
        .profile-modal .profile-divider {
            border: 0;
            border-top: 1px solid var(--card-border);
            margin: 16px 0;
        }
        .profile-modal .modal-actions {
            display: flex;
            gap: 10px;
            flex-wrap: wrap;
            margin-top: 16px;
        }
        .profile-modal .modal-actions button {
            flex: 1;
            padding: 10px 16px;
            border-radius: 40px;
            font-weight: 600;
            border: none;
            cursor: pointer;
            font-size: 13px;
            transition: opacity 0.2s;
        }
        .profile-modal .modal-actions .btn-cancel {
            background: var(--filter-btn-bg);
            color: var(--text-main);
            border: 1px solid var(--input-border);
        }
        .profile-modal .modal-actions .btn-confirm {
            background: var(--btn-primary-bg);
            color: var(--btn-primary-text);
        }
        .profile-modal .modal-actions .btn-danger {
            background: #ef4444;
            color: white;
        }
        .profile-modal .modal-actions button:hover {
            opacity: 0.85;
        }

        .admin-header {
            display: flex;
            align-items: center;
            padding: 16px 20px;
            background: var(--card-bg);
            border-bottom: 1px solid var(--card-border);
            flex-shrink: 0;
        }
        .back-btn {
            background: var(--filter-btn-bg);
            color: var(--text-main);
            padding: 8px 16px;
            border-radius: 40px;
            border: none;
            cursor: pointer;
            font-weight: 600;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        .admin-title {
            flex: 1;
            text-align: center;
            font-weight: 800;
            font-size: 18px;
        }
        .refresh-btn {
            background: var(--filter-btn-bg);
            border: none;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            font-size: 18px;
            cursor: pointer;
            color: var(--text-main);
        }
        .user-item {
            background: var(--card-bg);
            border: 1px solid var(--card-border);
            border-radius: 20px;
            padding: 12px 16px;
            margin-bottom: 12px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap;
            gap: 12px;
            transition: transform 0.2s, box-shadow 0.2s;
        }
        .user-item:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 20px rgba(0,0,0,0.1);
        }
        .user-email-admin {
            font-weight: 700;
            word-break: break-all;
            font-size: 15px;
        }
        .badge {
            padding: 4px 10px;
            border-radius: 30px;
            font-size: 11px;
            font-weight: bold;
            margin-left: 6px;
            color: white;
            display: inline-block;
        }
        .badge-admin {
            background: #3b82f6;
        }
        .badge-blocked {
            background: #ef4444;
        }
        .badge-expired {
            background: #f59e0b;
        }
        .user-meta {
            font-size: 12px;
            color: #64748b;
            margin-top: 8px;
            display: flex;
            align-items: center;
            gap: 12px;
            flex-wrap: wrap;
        }
        .quick-edit-btn {
            background: var(--filter-btn-bg);
            border: none;
            border-radius: 30px;
            padding: 6px 12px;
            font-size: 12px;
            font-weight: 600;
            cursor: pointer;
            color: var(--btn-primary-bg);
            display: inline-flex;
            align-items: center;
            gap: 6px;
        }
        .user-actions {
            display: flex;
            gap: 8px;
            align-items: center;
            flex-wrap: wrap;
        }
        .btn-small {
            background: var(--filter-btn-bg);
            border: none;
            border-radius: 20px;
            padding: 8px 14px;
            font-size: 13px;
            font-weight: 600;
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            gap: 6px;
            color: var(--text-main);
        }
        .admin-stats {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 16px;
            margin-bottom: 24px;
        }
        .admin-stat-card {
            background: var(--card-bg);
            border: 1px solid var(--card-border);
            border-radius: 20px;
            padding: 16px;
            text-align: center;
            cursor: pointer;
            transition: transform 0.2s, box-shadow 0.2s;
            border: 2px solid var(--btn-primary-bg);
        }
        .admin-stat-card:hover {
            transform: translateY(-4px);
            box-shadow: 0 8px 20px rgba(0,0,0,0.1);
        }
        .admin-stat-card i {
            font-size: 32px;
            color: var(--btn-primary-bg);
            margin-bottom: 8px;
        }
        .status-badge-admin {
            display: inline-block;
            padding: 4px 8px;
            border-radius: 30px;
            font-size: 11px;
            font-weight: bold;
        }
        .status-admin-active {
            background: #dcfce7;
            color: #166534;
        }
        .status-admin-expired {
            background: #fee2e2;
            color: #b91c1c;
        }
        .status-admin-warning {
            background: #fef9c3;
            color: #854d0e;
        }
        .status-admin-blocked {
            background: #fecaca;
            color: #991b1b;
        }
        .modal-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,0.6);
            backdrop-filter: blur(4px);
            z-index: 2000;
            display: none;
            align-items: center;
            justify-content: center;
            padding: 20px;
        }
        .modal-box {
            background: var(--card-bg);
            border: 1px solid var(--card-border);
            border-radius: 32px;
            padding: 28px 24px;
            width: 100%;
            max-width: 600px;
            max-height: 90vh;
            overflow-y: auto;
            box-shadow: 0 25px 50px -12px rgba(0,0,0,0.25);
            color: var(--text-main);
            margin: auto;
        }
        #servicoSelectModal.modal-overlay {
            z-index: 2100;
        }
        .modal-title {
            font-weight: 800;
            font-size: 20px;
            margin-bottom: 20px;
            border-left: 4px solid var(--btn-primary-bg);
            padding-left: 14px;
        }
        .field-row {
            margin-bottom: 16px;
        }
        .field-label {
            display: block;
            font-weight: 600;
            font-size: 13px;
            margin-bottom: 8px;
        }
        .time-group {
            display: flex;
            gap: 12px;
            flex-wrap: wrap;
        }
        .time-input {
            flex: 1;
            text-align: center;
            font-size: 15px;
            font-weight: 600;
        }
        .modal-actions {
            display: flex;
            gap: 12px;
            justify-content: flex-end;
            margin-top: 24px;
        }
        .modal-actions button {
            padding: 12px 24px;
            border-radius: 40px;
            font-weight: 600;
            cursor: pointer;
            border: none;
            font-size: 14px;
            flex: 1;
        }
        .counter-box {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 20px;
            margin: 16px 0;
        }
        .counter-btn {
            background: var(--filter-btn-bg);
            color: var(--text-main);
            border: none;
            width: 50px;
            height: 50px;
            border-radius: 25px;
            font-size: 24px;
            font-weight: bold;
            cursor: pointer;
        }
        .counter-value {
            font-size: 32px;
            font-weight: 800;
            min-width: 60px;
            text-align: center;
        }
        .avatar-preview {
            width: 90px;
            height: 90px;
            border-radius: 50%;
            object-fit: cover;
            margin: 0 auto 16px;
            display: block;
            border: 3px solid var(--filter-btn-bg);
        }
        hr {
            border: 0;
            border-top: 1px solid var(--card-border);
            margin: 20px 0;
        }
        .info-chip {
            background: var(--filter-btn-bg);
            border-radius: 20px;
            padding: 10px 16px;
            font-size: 13px;
            font-weight: 600;
            margin-bottom: 16px;
            display: inline-block;
        }
        .custom-color-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 10px;
        }
        .custom-color-row span {
            font-size: 13px;
            font-weight: 500;
        }
        .custom-color-row input[type="color"] {
            width: 40px;
            height: 40px;
            border: none;
            border-radius: 8px;
            cursor: pointer;
            padding: 2px;
            background: transparent;
        }
        .notification-modal, .confirm-modal, .success-modal {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background: var(--card-bg);
            border: 1px solid var(--card-border);
            border-radius: 28px;
            padding: 28px 32px;
            box-shadow: 0 20px 35px rgba(0,0,0,0.2);
            z-index: 3000;
            text-align: center;
            max-width: 90%;
            width: 360px;
            backdrop-filter: blur(8px);
        }
        .notification-modal p, .confirm-modal p, .success-modal p {
            font-size: 18px;
            font-weight: 500;
            margin-bottom: 24px;
        }
        .notification-modal button, .confirm-modal button, .success-modal button {
            background: var(--btn-primary-bg);
            color: var(--btn-primary-text);
            border: none;
            padding: 10px 24px;
            border-radius: 40px;
            font-weight: 600;
            cursor: pointer;
            font-size: 14px;
            margin: 0 8px;
        }
        .confirm-modal .btn-confirm-cancel {
            background: var(--filter-btn-bg);
            color: var(--text-main);
        }
        .modal-backdrop {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,0.4);
            z-index: 2999;
            display: none;
        }
        .indicador-group {
            display: flex;
            gap: 8px;
            margin-bottom: 16px;
            align-items: center;
            flex-wrap: wrap;
        }
        .indicador-group input {
            margin-bottom: 0;
            flex: 1;
            min-width: 0;
        }
        .indicador-group button {
            width: auto;
            padding: 12px 20px;
            white-space: nowrap;
            margin: 0;
        }
        .historico-container {
            max-height: 400px;
            overflow-y: auto;
            margin-top: 12px;
        }
        .search-historico {
            margin-bottom: 12px;
        }
        .servico-stats {
            display: flex;
            flex-direction: column;
            gap: 4px;
        }
        .servico-stats span {
            display: block;
        }
        .edit-modal .field-row {
            margin-bottom: 8px;
        }
        .edit-modal input, .edit-modal select, .edit-modal textarea {
            margin-bottom: 0;
            padding: 8px 12px;
        }
        .edit-modal .modal-title {
            margin-bottom: 12px;
        }
        .toast-message {
            position: fixed;
            bottom: 30px;
            left: 50%;
            transform: translateX(-50%);
            background: var(--card-bg);
            color: var(--text-main);
            padding: 12px 24px;
            border-radius: 40px;
            box-shadow: 0 4px 12px rgba(0,0,0,0.2);
            z-index: 10000;
            font-weight: 600;
            font-size: 14px;
            border-left: 4px solid var(--btn-primary-bg);
            backdrop-filter: blur(8px);
            transition: opacity 0.3s;
            opacity: 0;
            pointer-events: none;
        }
        .error-detail-item {
            margin-bottom: 12px;
            font-family: monospace;
            font-size: 13px;
            background: var(--input-bg);
            padding: 8px;
            border-radius: 12px;
            word-break: break-word;
        }
        .error-detail-label {
            font-weight: bold;
            color: var(--btn-primary-bg);
            display: block;
            margin-bottom: 4px;
        }
        .copy-error-btn {
            background: var(--btn-primary-bg);
            color: white;
            border: none;
            padding: 8px 16px;
            border-radius: 40px;
            cursor: pointer;
            font-weight: 600;
            margin-top: 16px;
            width: 100%;
        }
        .ticket-message {
            background: var(--input-bg);
            padding: 12px;
            border-radius: 16px;
            margin-bottom: 12px;
        }
        .ticket-message strong {
            color: var(--btn-primary-bg);
        }
        .ticket-status {
            font-size: 12px;
            padding: 4px 8px;
            border-radius: 20px;
            display: inline-block;
        }
        .status-open {
            background: #dcfce7;
            color: #166534;
        }
        .status-closed {
            background: #fee2e2;
            color: #b91c1c;
        }
        .ticket-tabs {
            display: flex;
            gap: 12px;
            margin-bottom: 20px;
            border-bottom: 1px solid var(--card-border);
            padding-bottom: 8px;
        }
        .ticket-tab {
            background: none;
            border: none;
            padding: 8px 16px;
            font-weight: 600;
            font-size: 14px;
            cursor: pointer;
            border-radius: 30px;
            color: var(--text-main);
            transition: all 0.2s;
        }
        .ticket-tab.active {
            background: var(--btn-primary-bg);
            color: white;
        }
        .ticket-tab:hover:not(.active) {
            background: var(--filter-btn-bg);
        }
        .admin-ticket-list {
            margin-top: 12px;
        }
        .select-trigger {
            background: var(--input-bg);
            border: 1px solid var(--input-border);
            border-radius: 40px;
            padding: 12px 16px;
            width: 100%;
            cursor: pointer;
            display: flex;
            justify-content: space-between;
            align-items: center;
            color: var(--text-main);
            font-size: 14px;
        }
        .select-trigger span:first-child {
            opacity: 0.7;
        }
        .select-trigger span:last-child i {
            font-size: 14px;
        }
        .option-list {
            max-height: 250px;
            overflow-y: auto;
        }
        .option-item {
            padding: 12px 16px;
            border-bottom: 1px solid var(--card-border);
            cursor: pointer;
            transition: background 0.2s;
        }
        .option-item:hover {
            background: var(--filter-btn-bg);
        }
        .option-item.selected {
            background: var(--btn-primary-bg);
            color: white;
        }
        .servico-search-input {
            margin-bottom: 16px;
            width: 100%;
        }
        .backup-modal-icon {
            font-size: 64px;
            color: #f59e0b;
            text-align: center;
            margin-bottom: 16px;
        }
        .backup-divider {
            margin: 20px 0;
            border-top: 1px solid var(--card-border);
        }
        .admin-filter-bar {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 8px;
            margin-bottom: 16px;
        }
        .admin-filter-bar .filter-btn {
            width: 100%;
            font-size: 0.75rem;
            padding: 8px 4px;
        }
        .admin-section {
            margin-top: 20px;
        }
        .admin-section.hidden {
            display: none;
        }
        .user-list-modal-item {
            background: var(--card-bg);
            border: 1px solid var(--card-border);
            border-radius: 16px;
            padding: 12px 16px;
            margin-bottom: 8px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap;
            gap: 8px;
        }
        .user-list-modal-item .user-email {
            font-weight: 600;
        }
        .user-list-modal-item .user-status {
            font-size: 12px;
            padding: 4px 10px;
            border-radius: 30px;
        }
        .user-list-modal-item .user-status.active {
            background: #dcfce7;
            color: #166534;
        }
        .user-list-modal-item .user-status.expired {
            background: #fee2e2;
            color: #b91c1c;
        }
        .user-list-modal-item .user-status.admin {
            background: #dbeafe;
            color: #1e40af;
        }
        .user-list-modal-item .user-status.blocked {
            background: #fecaca;
            color: #991b1b;
        }
        .admin-search-input {
            margin-bottom: 16px;
            width: 100%;
            padding: 10px 16px;
            border-radius: 40px;
            border: 1px solid var(--input-border);
            background: var(--input-bg);
            color: var(--text-main);
            font-size: 14px;
            outline: none;
        }
        .admin-search-input:focus {
            border-color: var(--btn-primary-bg);
        }
        .btn-block {
            background: #f59e0b;
            color: white;
            border: none;
            border-radius: 20px;
            padding: 8px 14px;
            font-size: 13px;
            font-weight: 600;
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            gap: 6px;
        }
        .btn-unblock {
            background: #10b981;
            color: white;
            border: none;
            border-radius: 20px;
            padding: 8px 14px;
            font-size: 13px;
            font-weight: 600;
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            gap: 6px;
        }
        /* Tela de bloqueio profissional */
        #blockedScreen {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,0.7);
            backdrop-filter: blur(6px);
            z-index: 15000;
            display: none;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 20px;
        }
        #blockedScreen .blocked-card {
            max-width: 500px;
            width: 100%;
            background: var(--card-bg);
            border-radius: 32px;
            padding: 32px 28px;
            text-align: center;
            box-shadow: 0 25px 50px -12px rgba(0,0,0,0.5);
            border: 1px solid var(--card-border);
        }
        #blockedScreen .blocked-card .lock-icon {
            font-size: 56px;
            color: #ef4444;
            margin-bottom: 16px;
        }
        #blockedScreen .blocked-card h2 {
            font-size: 24px;
            font-weight: 700;
            color: var(--text-main);
            margin-bottom: 12px;
        }
        #blockedScreen .blocked-card .blocked-reason {
            font-size: 15px;
            color: var(--text-main);
            background: var(--filter-btn-bg);
            padding: 10px 16px;
            border-radius: 30px;
            display: inline-block;
            margin-bottom: 20px;
        }
        #blockedScreen .blocked-card .blocked-message {
            font-size: 15px;
            color: var(--text-main);
            line-height: 1.6;
            margin-bottom: 24px;
        }
        #blockedScreen .blocked-card .blocked-message a {
            color: var(--btn-primary-bg);
            font-weight: 600;
            text-decoration: underline;
            cursor: pointer;
        }
        #blockedScreen .blocked-card .blocked-actions {
            display: flex;
            gap: 12px;
            justify-content: center;
            flex-wrap: wrap;
            margin-top: 8px;
        }
        #blockedScreen .blocked-card .blocked-actions button {
            padding: 10px 20px;
            border-radius: 40px;
            font-weight: 600;
            cursor: pointer;
            border: none;
            font-size: 14px;
            background: var(--filter-btn-bg);
            color: var(--text-main);
            transition: background 0.2s;
        }
        #blockedScreen .blocked-card .blocked-actions button:hover {
            background: var(--btn-primary-bg);
            color: white;
        }
        #blockedScreen .blocked-card .blocked-actions .btn-logout {
            background: #ef4444;
            color: white;
        }
        #blockedScreen .blocked-card .blocked-actions .btn-logout:hover {
            background: #dc2626;
        }
        #blockedScreen .blocked-card .blocked-tickets-area {
            margin-top: 16px;
            text-align: left;
            border-top: 1px solid var(--card-border);
            padding-top: 16px;
        }
        #blockedScreen .blocked-card .blocked-tickets-area h4 {
            font-size: 16px;
            margin-bottom: 8px;
            color: var(--text-main);
        }
        #blockedTicketsList {
            max-height: 150px;
            overflow-y: auto;
        }

        /* Modais de ticket devem ficar acima da tela de bloqueio */
        #createTicketModal.modal-overlay,
        #userTicketsModal.modal-overlay,
        #userReplyTicketModal.modal-overlay,
        #subjectSelectModal.modal-overlay {
            z-index: 16000 !important;
        }
        
        /* Novo modal para clientes do usuário */
        #userClientsModal .modal-box {
            max-width: 800px;
        }
        #userClientsList .card-item {
            margin-bottom: 10px;
            padding: 12px 14px;
        }
        #userClientsList .card-item .status-badge {
            font-size: 11px;
            padding: 2px 10px;
        }
        #userClientsList .card-item .btn-wa-simples {
            font-size: 12px;
            padding: 2px 10px;
            background: #25D366;
            color: white;
            border-radius: 20px;
            text-decoration: none;
            display: inline-block;
        }


        /* =====================================================================
           CONTROLPRO V2 — CAMADA VISUAL iOS/REFINADA
           Somente apresentação: preserva IDs, eventos, fluxos e funções.
           ===================================================================== */
        :root {
            --cp-ios-radius-card: 22px;
            --cp-ios-radius-control: 14px;
            --cp-ios-radius-pill: 999px;
            --cp-ios-shadow-soft: 0 7px 22px rgba(15, 23, 42, 0.065), inset 0 1px 0 rgba(255,255,255,.42);
            --cp-ios-shadow-float: 0 14px 38px rgba(15, 23, 42, 0.12), inset 0 1px 0 rgba(255,255,255,.46);
            --cp-ios-hairline: color-mix(in srgb, var(--card-border) 78%, transparent);
        }
        * {
            font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", Inter, "Segoe UI", system-ui, sans-serif;
            -webkit-tap-highlight-color: transparent;
        }
        body {
            letter-spacing: -0.008em;
        }
        .content {
            padding: 8px 12px calc(16px + env(safe-area-inset-bottom)) 12px;
            scrollbar-width: thin;
        }
        .page { gap: 10px; }
        .topbar {
            min-height: 54px;
            padding: 5px 12px;
            background: color-mix(in srgb, var(--card-bg) 88%, transparent);
            border-bottom: 1px solid color-mix(in srgb, var(--card-border) 70%, transparent);
            box-shadow: 0 2px 14px rgba(15,23,42,.045);
            backdrop-filter: saturate(180%) blur(18px);
            -webkit-backdrop-filter: saturate(180%) blur(18px);
            z-index: 30;
        }
        .user-avatar {
            width: 38px;
            height: 38px;
            border: 2px solid color-mix(in srgb, var(--card-bg) 88%, white 12%);
            box-shadow: 0 2px 7px rgba(15,23,42,.10);
        }
        .user-name {
            font-size: 16px;
            font-weight: 760;
            letter-spacing: -0.025em;
        }
        .menu-icon, .notification-icon, .add-client-btn, .refresh-btn {
            border-radius: 50%;
            transition: transform .14s ease, background .14s ease, box-shadow .14s ease;
        }
        .notification-icon, .add-client-btn, .refresh-btn {
            background: color-mix(in srgb, var(--filter-btn-bg) 86%, transparent);
            border: 1px solid color-mix(in srgb, var(--card-border) 62%, transparent);
            box-shadow: 0 2px 7px rgba(15,23,42,.045);
        }
        .menu-icon:active, .notification-icon:active, .add-client-btn:active, .refresh-btn:active { transform: scale(.92); }

        /* Busca e filtros */
        #pageListaClientes .search-container {
            padding-top: 2px;
        }
        #pageListaClientes .search-container input,
        .admin-search-input,
        .search-historico input,
        .servico-search-input,
        input, select, textarea, .select-trigger {
            border-radius: var(--cp-ios-radius-control);
            border: 1px solid color-mix(in srgb, var(--input-border) 82%, transparent);
            box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 2px 8px rgba(15,23,42,.025);
            transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
        }
        #pageListaClientes .search-container input {
            min-height: 44px;
            padding: 11px 15px;
            margin: 0;
            font-size: 14px;
            font-weight: 520;
        }
        input:focus, select:focus, textarea:focus, .select-trigger:focus-within {
            border-color: color-mix(in srgb, var(--btn-primary-bg) 60%, var(--input-border));
            box-shadow: 0 0 0 4px color-mix(in srgb, var(--btn-primary-bg) 11%, transparent), inset 0 1px 0 rgba(255,255,255,.14);
        }
        .filter-bar {
            gap: 7px;
            padding: 1px 0 2px;
        }
        .filter-btn {
            min-height: 36px;
            border-radius: var(--cp-ios-radius-pill);
            padding: 8px 10px;
            font-size: 11px;
            font-weight: 720;
            letter-spacing: -0.01em;
            border: 1px solid color-mix(in srgb, var(--card-border) 70%, transparent);
            background: color-mix(in srgb, var(--filter-btn-bg) 92%, transparent);
            box-shadow: 0 3px 10px rgba(15,23,42,.04);
            transition: transform .14s ease, box-shadow .14s ease, background .14s ease;
        }
        .filter-btn:active { transform: scale(.965); }
        .filter-btn.active-filter {
            border-color: transparent;
            background: linear-gradient(135deg, var(--filter-active-bg), color-mix(in srgb, var(--filter-active-bg) 76%, #7db5ff));
            box-shadow: 0 7px 17px color-mix(in srgb, var(--filter-active-bg) 20%, transparent);
        }

        /* Cards principais, inclusive Meus Clientes */
        .client-list { gap: 10px; }
        .card-item, .servico-card, .card-form, .stat-card, .admin-stat-card, .user-item, .user-list-modal-item {
            border-radius: var(--cp-ios-radius-card);
            border: 1px solid var(--cp-ios-hairline);
            box-shadow: var(--cp-ios-shadow-soft);
        }
        .card-item {
            padding: 14px 15px;
            background: linear-gradient(160deg,
                color-mix(in srgb, var(--card-bg) 98%, white 2%),
                color-mix(in srgb, var(--stat-card-bg) 34%, var(--card-bg)));
            line-height: 1.42;
            overflow: hidden;
            transition: transform .16s ease, box-shadow .16s ease;
        }
        .card-item:active { transform: scale(.987); box-shadow: 0 5px 15px rgba(15,23,42,.065); }
        .card-item strong { font-weight: 760; letter-spacing: -0.018em; }
        .card-item > div:not(.action-row) { font-size: 13.5px; }
        .card-item hr { opacity: .72; }
        .status-badge, .status-badge-admin, .ticket-status, .badge {
            border-radius: var(--cp-ios-radius-pill);
            font-size: 10.5px;
            letter-spacing: .015em;
            box-shadow: inset 0 0 0 1px rgba(255,255,255,.18);
        }
        .action-row {
            gap: 7px;
            margin-top: 11px;
        }
        .action-row button, .btn-small, .btn-editar, .btn-renovar, .btn-gerar-cp, .btn-excluir, .btn-wa, .btn-wa-simples, .btn-premiar {
            border-radius: 12px;
            min-height: 34px;
            padding: 7px 12px;
            font-size: 12px;
            font-weight: 720;
            box-shadow: 0 3px 9px rgba(15,23,42,.08), inset 0 1px 0 rgba(255,255,255,.18);
            transition: transform .14s ease, filter .14s ease, box-shadow .14s ease;
        }
        .action-row button:active, .btn-small:active, .btn-action:active, .btn-cancel:active { transform: scale(.97); }

        /* Formulários, estatísticas e financeiro */
        .card-form {
            padding: 18px;
            background: color-mix(in srgb, var(--card-bg) 97%, transparent);
        }
        .card-form h3, .modal-title {
            font-weight: 790;
            letter-spacing: -0.028em;
        }
        .card-form h3 { border-bottom-width: 1px; }
        .stats-row { gap: 10px; margin-bottom: 14px; }
        .stat-card, .admin-stat-card {
            padding: 15px 13px;
            background: linear-gradient(155deg, color-mix(in srgb,var(--stat-card-bg) 98%,white 2%), color-mix(in srgb,var(--card-bg) 92%,transparent));
        }
        .stat-card strong { font-size: 22px; letter-spacing: -0.035em; }
        .servico-card {
            padding: 14px;
            margin-bottom: 9px;
            background: color-mix(in srgb, var(--card-bg) 98%, transparent);
        }
        .servico-card .servico-nome { font-weight: 780; letter-spacing: -0.02em; }

        /* Botões principais */
        .btn-action, .btn-login, .btn-confirm, .btn-cancel, .back-btn {
            border-radius: 14px !important;
            min-height: 43px;
            font-weight: 720 !important;
            letter-spacing: -0.012em;
            box-shadow: 0 5px 14px rgba(15,23,42,.08), inset 0 1px 0 rgba(255,255,255,.20);
            transition: transform .14s ease, filter .14s ease, box-shadow .14s ease;
        }
        .btn-action:hover, .btn-login:hover, .btn-confirm:hover { filter: brightness(1.02); }

        /* Drawer */
        .drawer {
            width: min(304px, 86vw);
            left: min(-324px, -90vw);
            padding: calc(18px + env(safe-area-inset-top)) 14px 22px;
            border-radius: 0 26px 26px 0;
            background: color-mix(in srgb, var(--sidebar-bg) 94%, transparent);
            backdrop-filter: saturate(160%) blur(20px);
            -webkit-backdrop-filter: saturate(160%) blur(20px);
            box-shadow: 12px 0 34px rgba(15,23,42,.16);
        }
        .drawer-header {
            color: var(--text-main);
            margin-bottom: 12px;
            padding: 2px 4px 14px;
            letter-spacing: -0.025em;
        }
        .drawer-item {
            min-height: 43px;
            border-radius: 13px;
            padding: 10px 12px;
            font-weight: 620;
        }
        .drawer-item:hover { transform: none; }
        .drawer-item:active { transform: scale(.985); background: var(--filter-btn-bg); }
        .drawer-section-title { margin: 15px 0 5px 5px; font-size: 10px; letter-spacing: .075em; }
        .drawer-status-item, .drawer-toggle-row { border-radius: 13px; }

        /* Modais */
        .modal-overlay {
            background: rgba(8, 15, 28, .42);
            backdrop-filter: blur(9px) saturate(125%);
            -webkit-backdrop-filter: blur(9px) saturate(125%);
        }
        .modal-box {
            border-radius: 26px;
            padding: 22px 20px;
            border: 1px solid color-mix(in srgb, var(--card-border) 68%, transparent);
            box-shadow: 0 24px 60px rgba(15,23,42,.24), inset 0 1px 0 rgba(255,255,255,.30);
        }
        .notification-modal, .confirm-modal, .success-modal {
            border-radius: 24px;
            box-shadow: 0 24px 60px rgba(15,23,42,.25), inset 0 1px 0 rgba(255,255,255,.24);
        }

        /* Admin */
        .admin-header {
            min-height: 58px;
            padding: 8px 12px;
            background: color-mix(in srgb, var(--card-bg) 90%, transparent);
            backdrop-filter: blur(18px) saturate(160%);
            -webkit-backdrop-filter: blur(18px) saturate(160%);
            box-shadow: 0 2px 14px rgba(15,23,42,.045);
        }
        .admin-title { font-weight: 780; letter-spacing: -0.025em; }
        .admin-stat-card { border-width: 1px; }

        /* Login refinado sem alterar identidade */
        #loginScreen .login-card {
            border-radius: 30px !important;
            border-color: #202020 !important;
            box-shadow: 0 24px 70px rgba(0,0,0,.48), inset 0 1px 0 rgba(255,255,255,.035) !important;
        }
        #loginScreen .input-group input { border-radius: 14px !important; min-height: 48px; }
        #loginScreen .btn-login { border-radius: 14px !important; min-height: 48px; }
        #loginScreen .quick-login-card { border-radius: 20px; }

        @media (max-width: 560px) {
            .content { padding-left: 9px; padding-right: 9px; }
            .filter-bar { grid-template-columns: repeat(3, minmax(0, 1fr)); }
            .card-item { padding: 13px 13px; }
            .action-row { gap: 6px; }
            .action-row button, .btn-small, .btn-editar, .btn-renovar, .btn-gerar-cp, .btn-excluir, .btn-wa, .btn-wa-simples { padding: 7px 10px; }
            .modal-overlay { padding: 12px; }
            .modal-box { max-height: 92vh; padding: 20px 16px; }
        }


        /* =====================================================================
           CONTROLPRO V8 — MODAIS ANIMADOS + ESPAÇAMENTO REFINADO
           - Uma única regra autoritativa para "Meus Clientes".
           - O Pedido Anotado em lista compacta não usa vão entre cards: usa
             separador fino. No ControlPro mantemos os cards arredondados e
             deixamos 4px reais: ainda compacto, mas sem parecer grudado.
           - !important + contrato em runtime impedem regras legadas de 10px de
             reassumirem o layout após renderizações.
           ===================================================================== */
        #pageListaClientes {
            /* V16: não forçar display com !important. A regra antiga vencia .hidden
               pela especificidade do ID e mantinha Meus Clientes visível mesmo ao
               abrir Novo Cliente, Serviços/Planos e outras páginas. */
            flex-direction: column !important;
            gap: 4px !important;
        }
        #pageListaClientes.hidden {
            display: none !important;
        }
        #pageListaClientes > .search-container {
            margin: 0 !important;
            padding: 0 !important;
        }
        #pageListaClientes > .search-container > #searchCliente {
            min-height: 42px !important;
            margin: 0 !important;
            padding: 10px 14px !important;
            border-radius: 14px !important;
            box-shadow: 0 2px 7px rgba(15,23,42,.035) !important;
        }
        #pageListaClientes > #filterBar {
            margin: 0 !important;
            padding: 0 !important;
            column-gap: 4px !important;
            row-gap: 4px !important;
        }
        #pageListaClientes > #filterBar > .filter-btn {
            min-height: 34px !important;
            margin: 0 !important;
            padding: 6px 8px !important;
            box-shadow: 0 2px 7px rgba(15,23,42,.04) !important;
        }
        #pageListaClientes > #filterBar > .filter-btn.active-filter {
            box-shadow: 0 5px 13px color-mix(in srgb,var(--filter-active-bg) 14%,transparent) !important;
        }
        #pageListaClientes > #clientListContainer {
            display: flex !important;
            flex-direction: column !important;
            gap: 4px !important;
            row-gap: 4px !important;
            margin: 0 !important;
            padding: 0 !important;
        }
        #pageListaClientes > #clientListContainer > .card-item {
            margin: 0 !important;
            border-radius: 14px !important;
            box-shadow: 0 3px 9px rgba(15,23,42,.045) !important;
        }
    

        /* =====================================================================
           CONTROLPRO V8 — MOVIMENTO GLOBAL DE MODAIS
           - Abertura: fade + leve subida/escala, estilo iOS.
           - Fechamento: animação inversa antes de ocultar.
           - Aplicado aos modais estáticos e aos modais criados dinamicamente.
           - Respeita prefers-reduced-motion para acessibilidade.
           ===================================================================== */
        .modal-overlay,
        .modal-backdrop,
        .notification-modal,
        .confirm-modal,
        .success-modal {
            will-change: opacity;
        }
        .modal-overlay .modal-box,
        .notification-modal,
        .confirm-modal,
        .success-modal {
            transform-origin: 50% 50%;
            will-change: transform, opacity;
        }
        @media (prefers-reduced-motion: reduce) {
            .modal-overlay,
            .modal-backdrop,
            .modal-overlay .modal-box,
            .notification-modal,
            .confirm-modal,
            .success-modal {
                animation: none !important;
                transition: none !important;
            }
        }


        /* CONTROLPRO V10: PWA UI COMPACTA - PADRAO PEDIDO ANOTADO */
        #pwaConfigModal .modal-box {
            max-width: 600px !important;
            padding: 20px 18px !important;
        }
        #pwaConfigModal .modal-title {
            margin-bottom: 12px;
            font-size: 18px;
        }
        #pwaConfigModal .field-row {
            margin-bottom: 8px;
        }
        #pwaConfigModal .field-label {
            margin-bottom: 5px;
            font-size: 12px;
        }
        #pwaConfigModal input[type="text"],
        #pwaConfigModal input:not([type]) {
            padding: 10px 14px;
            margin-bottom: 0;
        }
        .pwa-config-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 10px;
        }
        .pwa-file-label {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 7px;
            min-height: 40px;
            padding: 9px 12px;
            border: 1px solid var(--input-border);
            border-radius: 12px;
            background: var(--input-bg);
            color: var(--text-main);
            font-size: 12px;
            font-weight: 650;
            cursor: pointer;
            transition: border-color .18s ease, background .18s ease, transform .18s ease;
        }
        .pwa-file-label:active {
            transform: scale(.985);
        }
        .pwa-file-label:hover {
            border-color: var(--btn-primary-bg);
        }
        .pwa-file-label input[type="file"] {
            display: none;
        }
        .pwa-preview-wrap {
            display: flex;
            gap: 12px;
            align-items: center;
            padding: 12px;
            background: var(--filter-btn-bg);
            border: 1px solid var(--card-border);
            border-radius: 16px;
            margin: 10px 0;
        }
        .pwa-icon-preview-card,
        .pwa-splash-preview-card {
            display: flex;
            align-items: center;
            gap: 8px;
            flex: 1 1 0;
            min-width: 0;
        }
        .pwa-icon-preview-card img,
        .pwa-splash-preview-card img {
            width: 62px !important;
            height: 62px !important;
            min-width: 62px;
            min-height: 62px;
            max-width: 62px !important;
            max-height: 62px !important;
            border-radius: 15px;
            object-fit: cover;
            background: var(--card-bg);
            border: 1px solid var(--card-border);
            display: block;
        }
        .pwa-icon-preview-card span,
        .pwa-splash-preview-card span {
            font-size: 11px;
            font-weight: 650;
            color: var(--text-main);
            white-space: nowrap;
        }
        .pwa-status-box {
            padding: 8px 10px;
            margin: 8px 0 4px;
            border-radius: 10px;
            background: var(--filter-btn-bg);
            border: 1px solid var(--card-border);
            font-size: 11px;
            line-height: 1.4;
            color: var(--text-main);
        }
        .pwa-status-box.ok { color: #15803d; }
        .pwa-status-box.warn { color: #b45309; }
        #pwaConfigModal .modal-actions {
            margin-top: 12px;
            gap: 8px;
        }
        #pwaConfigModal .modal-actions button {
            padding: 10px 14px;
            font-size: 12px;
        }
        /* =====================================================================
           CONTROLPRO V31 — INSTALADOR PWA NO PADRÃO PEDIDO ANOTADO
           - Visual transparente: título + PNG + instalar app.
           - X vermelho fecha apenas a sessão.
           - "Não mostrar novamente" persiste no navegador/origem.
           - Sem translate/scale para não reintroduzir os pulos removidos na V30.
           ===================================================================== */
        #pwaInstallPopup {
            position: fixed;
            right: 18px;
            bottom: 86px;
            width: 168px;
            max-width: calc(100vw - 28px);
            padding: 8px 8px 9px;
            border: 0;
            border-radius: 18px;
            background: transparent;
            box-shadow: none;
            backdrop-filter: none;
            -webkit-backdrop-filter: none;
            z-index: 22000;
            display: none;
            opacity: 1;
            cursor: grab;
            user-select: none;
            -webkit-user-select: none;
            touch-action: none;
            text-align: center;
            transition: opacity .22s ease;
        }
        #pwaInstallPopup.dragging { cursor: grabbing; opacity: .90; transition: none; }
        #pwaInstallPopup .pwa-header {
            display: grid;
            grid-template-columns: 1fr auto;
            align-items: start;
            gap: 4px;
            margin-bottom: 4px;
        }
        #pwaInstallPopup .pwa-title {
            font-weight: 760;
            font-size: 12px;
            line-height: 1.2;
            color: var(--text-main);
            letter-spacing: -.015em;
            text-shadow: 0 1px 8px color-mix(in srgb, var(--card-bg) 85%, transparent);
        }
        #pwaInstallPopup .pwa-close {
            appearance: none;
            width: 24px;
            height: 24px;
            display: grid;
            place-items: center;
            background: color-mix(in srgb, #fee2e2 78%, transparent);
            border: 1px solid rgba(239,68,68,.22);
            border-radius: 8px;
            color: #ef4444;
            font-size: 17px;
            font-weight: 800;
            line-height: 1;
            padding: 0;
            margin: -4px -3px 0 0;
            cursor: pointer;
            box-shadow: 0 3px 10px rgba(239,68,68,.10);
        }
        #pwaInstallPopup .pwa-logo {
            width: 52px;
            height: 52px;
            display: block;
            margin: 1px auto 5px;
            border-radius: 14px;
            object-fit: contain;
            background: transparent;
            border: 0;
            padding: 0;
            box-shadow: 0 7px 20px rgba(15,23,42,.16);
        }
        #pwaInstallPopup .pwa-subtitle {
            margin: 2px 0 7px;
            text-align: center;
            font-size: 11px;
            font-weight: 700;
            color: var(--text-main);
            text-shadow: 0 1px 8px color-mix(in srgb, var(--card-bg) 90%, transparent);
        }
        #pwaInstallPopup .pwa-install-btn {
            width: auto;
            min-width: 112px;
            min-height: 32px;
            border: 0;
            border-radius: 999px;
            padding: 6px 14px;
            background: var(--btn-primary-bg);
            color: var(--btn-primary-text);
            font-size: 10.8px;
            font-weight: 760;
            cursor: pointer;
            box-shadow: 0 5px 16px color-mix(in srgb, var(--btn-primary-bg) 22%, transparent);
            transition: filter .18s ease, opacity .18s ease;
        }
        #pwaInstallPopup .pwa-install-btn:hover { filter: brightness(1.03); }
        #pwaInstallPopup .pwa-never-row {
            margin: 7px auto 0;
            display: flex;
            width: max-content;
            max-width: 100%;
            align-items: center;
            justify-content: center;
            gap: 5px;
            cursor: pointer;
            color: var(--text-main);
            font-size: 9.5px;
            font-weight: 650;
            line-height: 1.2;
            text-shadow: 0 1px 8px color-mix(in srgb, var(--card-bg) 90%, transparent);
            touch-action: manipulation;
        }
        #pwaInstallPopup .pwa-never-row input {
            position: absolute;
            opacity: 0;
            pointer-events: none;
            width: 1px;
            height: 1px;
            margin: 0;
        }
        #pwaInstallPopup .pwa-never-box {
            width: 17px;
            height: 17px;
            display: grid;
            place-items: center;
            flex: 0 0 17px;
            border-radius: 5px;
            border: 1.5px solid color-mix(in srgb, var(--text-main) 34%, transparent);
            background: color-mix(in srgb, var(--card-bg) 44%, transparent);
            color: transparent;
            font-size: 13px;
            font-weight: 900;
            line-height: 1;
            box-shadow: 0 2px 8px rgba(15,23,42,.08);
        }
        #pwaInstallPopup .pwa-never-row input:checked + .pwa-never-box {
            background: #ef4444;
            border-color: #ef4444;
            color: #fff;
        }
        @media (max-width: 480px) {
            #pwaInstallPopup { right: 13px; bottom: 74px; width: 156px; padding: 7px 7px 8px; }
            #pwaInstallPopup .pwa-logo { width: 48px; height: 48px; }
            #pwaInstallPopup .pwa-title { font-size: 11.5px; }
            #pwaInstallPopup .pwa-install-btn { min-width: 104px; font-size: 10.3px; min-height: 30px; }
            #pwaInstallPopup .pwa-never-row { font-size: 9px; }
        }
        @media (max-width: 520px) {
            #pwaConfigModal .modal-box {
                max-width: 94vw !important;
                padding: 18px 14px !important;
            }
            .pwa-config-grid {
                grid-template-columns: 1fr;
                gap: 6px;
            }
            .pwa-preview-wrap {
                gap: 10px;
                padding: 10px;
            }
            .pwa-icon-preview-card,
            .pwa-splash-preview-card {
                gap: 6px;
            }
            .pwa-icon-preview-card img,
            .pwa-splash-preview-card img {
                width: 62px !important;
                height: 62px !important;
                min-width: 62px;
                min-height: 62px;
                max-width: 62px !important;
                max-height: 62px !important;
            }
        }

        /* ===== V11: AREA DO CLIENTE + ACESSO GERADO + PUSH ===== */
        .client-portal-screen { background: var(--bg-body); color: var(--text-main); }
        .client-portal-topbar { min-height:58px; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; padding:8px 14px; background:var(--card-bg); border-bottom:1px solid var(--card-border); flex-shrink:0; }
        .client-portal-brand { grid-column:2; justify-self:center; display:flex; align-items:center; justify-content:center; gap:9px; font-size:16px; font-weight:800; text-align:center; white-space:nowrap; }
        .client-portal-brand i { color:var(--btn-primary-bg); font-size:20px; }
        .client-portal-logout { grid-column:3; justify-self:end; border:0; border-radius:24px; padding:9px 14px; font-weight:700; background:var(--filter-btn-bg); color:var(--text-main); cursor:pointer; }
        .client-portal-content { flex:1; overflow-y:auto; padding:10px; -webkit-overflow-scrolling:touch; }
        .client-portal-hero { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:10px; background:var(--card-bg); border:1px solid var(--card-border); border-radius:18px; padding:12px; box-shadow:0 4px 14px rgba(0,0,0,.06); margin-bottom:3px; }
        .client-portal-avatar { width:48px; height:48px; border-radius:16px; display:grid; place-items:center; background:var(--filter-btn-bg); color:var(--btn-primary-bg); font-size:21px; border:0; padding:0; overflow:hidden; position:relative; cursor:pointer; box-shadow:0 3px 10px rgba(0,0,0,.06); }
        .client-portal-avatar img { width:100%; height:100%; object-fit:cover; display:none; }
        .client-portal-avatar.has-photo img { display:block; }
        .client-portal-avatar.has-photo > i.fa-user { display:none; }
        .client-portal-avatar .client-portal-avatar-camera { position:absolute; right:2px; bottom:2px; width:17px; height:17px; border-radius:50%; display:grid; place-items:center; background:rgba(0,0,0,.68); color:#fff; font-size:8px; border:1px solid rgba(255,255,255,.8); pointer-events:none; }
        .client-photo-modal .modal-box { max-width:390px; }
        .client-photo-preview { width:112px; height:112px; border-radius:28px; object-fit:cover; display:block; margin:2px auto 14px; background:var(--filter-btn-bg); border:1px solid var(--card-border); box-shadow:0 8px 24px rgba(15,23,42,.12); }
        .client-photo-actions { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:10px; }
        .client-photo-actions label { display:flex; align-items:center; justify-content:center; gap:7px; min-height:42px; padding:9px 12px; border-radius:14px; background:var(--filter-btn-bg); border:1px solid var(--card-border); color:var(--text-main); font-weight:700; font-size:12px; cursor:pointer; }
        .client-photo-actions label input { display:none; }
        .client-photo-note { margin-top:10px; font-size:10.5px; line-height:1.4; text-align:center; color:#94a3b8; }
        /* V50: foto do cliente no card, no quadrado abaixo do status. */
        .cp-client-card-main-v50 { display:grid; grid-template-columns:minmax(0,1fr) 94px; gap:12px; align-items:start; min-height:94px; }
        .cp-client-card-details-v50 { min-width:0; }
        .cp-client-card-avatar-v50 { width:94px; height:94px; justify-self:end; align-self:start; border-radius:17px; object-fit:cover; object-position:center; background:var(--filter-btn-bg); border:1px solid color-mix(in srgb,var(--card-border) 82%,transparent); box-shadow:0 5px 16px rgba(15,23,42,.09); display:block; }
        .cp-client-card-avatar-v50.is-default { object-fit:contain; padding:7px; background:color-mix(in srgb,var(--filter-btn-bg) 86%,var(--card-bg)); }
        @media (max-width:390px) {
            .cp-client-card-main-v50 { grid-template-columns:minmax(0,1fr) 82px; gap:9px; min-height:82px; }
            .cp-client-card-avatar-v50 { width:82px; height:82px; border-radius:15px; }
        }
        /* O atualizador V50 trabalha por baixo do splash. Esta camada antiga permanece apenas
           por compatibilidade estrutural e nunca é exibida pelo fluxo de produção. */
        #updateOverlay { display:none !important; }
        .client-portal-identity { min-width:0; }
        .client-portal-kicker { font-size:11px; color:#94a3b8; text-transform:uppercase; letter-spacing:.5px; font-weight:800; }
        .client-portal-identity h2 { font-size:20px; line-height:1.15; margin:2px 0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
        .client-portal-identity p { display:none; }
        .client-portal-status { padding:5px 10px; border-radius:20px; font-size:11px; font-weight:800; background:var(--filter-btn-bg); white-space:nowrap; }
        .client-portal-status.active { background:#dcfce7; color:#166534; }
        .client-portal-status.upcoming { background:#fef3c7; color:#92400e; }
        .client-portal-status.expired { background:#fee2e2; color:#991b1b; }
        .client-portal-status.inactive { background:#e5e7eb; color:#374151; }
        .client-portal-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px; }
        .client-portal-card { background:var(--card-bg); border:1px solid var(--card-border); border-radius:15px; padding:10px; min-width:0; box-shadow:0 3px 10px rgba(0,0,0,.04); }
        .client-portal-card span { display:block; font-size:10px; color:#94a3b8; font-weight:700; margin-bottom:3px; }
        .client-portal-card strong { display:block; font-size:13px; line-height:1.25; overflow-wrap:anywhere; }
        .client-portal-days-card { grid-column:auto; }
        .client-portal-actions { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px; margin-top:8px; }
        .client-portal-actions button { min-width:0; padding:10px 8px; font-size:12px; }
        .client-portal-note { margin-top:7px; font-size:11px; line-height:1.35; color:#94a3b8; text-align:center; }
        .client-access-modal-box { max-width:430px; }
        .client-access-success { display:flex; align-items:center; gap:10px; padding:12px; border-radius:16px; background:var(--filter-btn-bg); margin-bottom:10px; }
        .client-access-success > i { color:#10b981; font-size:26px; }
        .client-access-success div { min-width:0; }
        .client-access-success strong,.client-access-success span { display:block; }
        .client-access-success span { font-size:12px; color:#94a3b8; margin-top:2px; }
        .client-access-credential { display:flex; justify-content:space-between; align-items:center; gap:12px; border:1px solid var(--card-border); border-radius:15px; padding:12px 14px; margin-top:6px; background:var(--input-bg); }
        .client-access-credential span { font-size:12px; color:#94a3b8; font-weight:700; }
        .client-access-credential strong { font-size:16px; letter-spacing:.4px; text-align:right; word-break:break-all; user-select:all; }
        .client-access-warning { font-size:11px; color:#94a3b8; line-height:1.45; margin-top:10px; }
        .client-access-actions { display:grid !important; grid-template-columns:1fr 1fr; }
        .client-access-actions #closeClientAccessBtn { grid-column:1 / -1; }
        .client-renew-btn { background:#25D366 !important; color:#fff !important; border-color:#25D366 !important; }
        .client-renew-summary { background:var(--filter-btn-bg); border-radius:16px; padding:14px; margin:10px 0; display:grid; gap:8px; }
        .client-renew-row { display:flex; align-items:center; justify-content:space-between; gap:14px; font-size:13px; }
        .client-renew-row strong { font-size:15px; text-align:right; }
        .client-renew-options { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px; margin:10px 0; }
        .client-renew-option { border:1px solid var(--card-border); background:var(--input-bg); color:var(--text-main); border-radius:14px; padding:11px 9px; text-align:left; cursor:pointer; }
        .client-renew-option strong,.client-renew-option span { display:block; }
        .client-renew-option strong { font-size:14px; }
        .client-renew-option span { margin-top:3px; font-size:12px; color:#94a3b8; }
        .client-renew-option.selected { border-color:var(--btn-primary-bg); box-shadow:0 0 0 2px color-mix(in srgb,var(--btn-primary-bg) 18%,transparent); }
        .renewal-config-options { display:grid; gap:7px; margin:8px 0; }
        .renewal-config-row { display:grid; grid-template-columns:82px minmax(0,1fr) minmax(0,1fr) 38px; gap:7px; align-items:center; }
        .renewal-config-row input { margin:0 !important; min-width:0; }
        .renewal-config-discount { border-color:color-mix(in srgb,#22c55e 34%,var(--card-border)) !important; }
        .client-renew-option .cp-v74-price-old{text-decoration:line-through;opacity:.58;font-size:10px;margin-right:5px}.client-renew-option .cp-v74-discount{display:block;font-size:10px;color:#22c55e;font-weight:800;margin-top:2px}
        .renewal-config-remove { width:38px; height:38px; border:0; border-radius:12px; background:#fee2e2; color:#b91c1c; cursor:pointer; }
        .renewal-payment-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px; margin:8px 0 12px; }
        .renewal-payment-option { display:flex; align-items:center; gap:7px; padding:9px 10px; background:var(--input-bg); border:1px solid var(--card-border); border-radius:12px; font-size:12px; }
        .renewal-payment-option input { width:auto !important; margin:0 !important; }
        #pushNotificationsBtn.push-active i { color:#10b981; }
        #pushNotificationsBtn.push-denied i { color:#ef4444; }
        @media (max-width:480px) {
            .client-portal-hero { grid-template-columns:auto 1fr auto; }
            .client-portal-status { grid-column:auto; justify-self:end; padding:4px 7px; font-size:10px; }
            .client-portal-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
            .client-portal-actions { grid-template-columns:repeat(2,minmax(0,1fr)); }
            .client-access-actions { grid-template-columns:1fr !important; }
            .client-access-actions #closeClientAccessBtn { grid-column:auto; }
            .renewal-config-row { grid-template-columns:70px minmax(0,1fr) minmax(0,1fr) 36px; }
        }

        /* ===== CONTROLPRO V13: Console de Erros do Admin ===== */
        .admin-error-console-card {
            cursor: pointer;
            position: relative;
            overflow: hidden;
        }
        .admin-error-console-card::after {
            content: '';
            position: absolute;
            inset: 0;
            pointer-events: none;
            border-radius: inherit;
            box-shadow: inset 0 0 0 1px rgba(239,68,68,.10);
        }
        .admin-error-console-card.has-errors i,
        .admin-error-console-card.has-errors h3 { color: #ef4444 !important; }
        .cp-error-console-box { max-width: 760px; width: min(94vw, 760px); max-height: 88vh; display: flex; flex-direction: column; }
        .cp-error-console-toolbar { display:flex; gap:8px; flex-wrap:wrap; margin:0 0 12px; }
        .cp-error-console-toolbar button { width:auto; margin:0; }
        .cp-error-console-list { overflow:auto; display:flex; flex-direction:column; gap:8px; padding-right:2px; min-height:90px; }
        .cp-error-item { border:1px solid var(--card-border); border-radius:14px; padding:10px; background:var(--card-bg); box-shadow:var(--cp-ios-shadow-soft); }
        .cp-error-item-head { display:flex; justify-content:space-between; gap:10px; align-items:flex-start; }
        .cp-error-item-title { font-size:13px; font-weight:800; word-break:break-word; }
        .cp-error-item-meta { font-size:11px; color:#94a3b8; margin-top:3px; word-break:break-word; }
        .cp-error-item-message { font-size:12px; line-height:1.45; margin-top:7px; white-space:pre-wrap; word-break:break-word; }
        .cp-error-item-actions { display:flex; gap:6px; flex-wrap:wrap; margin-top:8px; }
        .cp-error-item-actions button { width:auto; padding:7px 10px; border-radius:10px; font-size:11px; margin:0; }
        .cp-error-stack { display:none; margin-top:8px; padding:8px; border-radius:10px; background:rgba(15,23,42,.06); font:11px/1.4 ui-monospace,SFMono-Regular,Menlo,monospace; white-space:pre-wrap; word-break:break-word; max-height:180px; overflow:auto; }
        .cp-error-stack.open { display:block; }
        .cp-error-empty { text-align:center; padding:28px 12px; color:#64748b; font-size:13px; }

        /* =====================================================================
           CONTROLPRO V23 — MOVIMENTO iOS SUAVE, SEM DESLOCAMENTO LATERAL
           ===================================================================== */
        button, .drawer-item, .card-item, .stat-card, .admin-stat-card, .user-item,
        .filter-btn, .btn-small, .btn-action, .btn-cancel, .btn-editar, .btn-renovar,
        .btn-excluir, .btn-wa, .btn-wa-simples, .btn-gerar-cp {
            transition: box-shadow .24s ease, background-color .22s ease, border-color .22s ease, opacity .18s ease, filter .18s ease !important;
        }
        button:hover, button:active, .drawer-item:hover, .drawer-item:active,
        .card-item:active, .stat-card:hover, .admin-stat-card:hover, .user-item:hover,
        .filter-btn:active, .btn-small:active, .btn-action:active, .btn-cancel:active {
            transform: none !important;
        }
        button:active, .drawer-item:active, .filter-btn:active { opacity: .84; }
        .card-item:hover, .stat-card:hover, .admin-stat-card:hover, .user-item:hover {
            box-shadow: 0 9px 24px rgba(15,23,42,.09), inset 0 1px 0 rgba(255,255,255,.22) !important;
        }
        .modal-overlay .modal-box, .notification-modal, .confirm-modal, .success-modal {
            transition: box-shadow .28s ease !important;
        }


        /* =====================================================================
           CONTROLPRO V25 — INTERAÇÕES ESTÁVEIS, SEM DESLOCAMENTO DE CARDS/BOTÕES
           Nenhuma ação de toque/hover usa translate/scale. O feedback visual fica
           restrito a sombra, opacidade e cor. Modais usam fade suave pelo runtime.
           ===================================================================== */
        button,
        .drawer-item,
        .card-item,
        .stat-card,
        .admin-stat-card,
        .user-item,
        .user-list-modal-item,
        .filter-btn,
        .btn-small,
        .btn-action,
        .btn-cancel,
        .btn-editar,
        .btn-renovar,
        .btn-excluir,
        .btn-wa,
        .btn-wa-simples,
        .btn-gerar-cp,
        .client-renew-option,
        .option-item,
        .ticket-tab,
        .pwa-file-label,
        .profile-avatar-actions button,
        .profile-avatar-actions label {
            transform: none !important;
            translate: none !important;
            animation-name: none;
            transition-property: box-shadow, background-color, border-color, color, opacity, filter !important;
            transition-duration: .26s, .22s, .22s, .22s, .20s, .20s !important;
            transition-timing-function: ease !important;
        }
        button:hover, button:active,
        .drawer-item:hover, .drawer-item:active,
        .card-item:hover, .card-item:active,
        .stat-card:hover, .stat-card:active,
        .admin-stat-card:hover, .admin-stat-card:active,
        .user-item:hover, .user-item:active,
        .user-list-modal-item:hover, .user-list-modal-item:active,
        .filter-btn:hover, .filter-btn:active,
        .btn-small:hover, .btn-small:active,
        .btn-action:hover, .btn-action:active,
        .btn-cancel:hover, .btn-cancel:active,
        .client-renew-option:hover, .client-renew-option:active,
        .option-item:hover, .option-item:active,
        .ticket-tab:hover, .ticket-tab:active,
        .pwa-file-label:hover, .pwa-file-label:active {
            transform: none !important;
            translate: none !important;
        }
        button:active,
        .drawer-item:active,
        .filter-btn:active,
        .client-renew-option:active,
        .option-item:active {
            opacity: .90 !important;
            filter: brightness(.985) !important;
        }
        .card-item:hover, .card-item:active,
        .stat-card:hover, .stat-card:active,
        .admin-stat-card:hover, .admin-stat-card:active,
        .user-item:hover, .user-item:active,
        .user-list-modal-item:hover, .user-list-modal-item:active {
            box-shadow: 0 8px 22px rgba(15,23,42,.08), inset 0 1px 0 rgba(255,255,255,.20) !important;
        }

        /* =====================================================================
           CONTROLPRO V30 — MODAIS SEM PULO / FADE iOS
           - Nenhum modal altera transform em abertura/fechamento.
           - Preserva translate usado pelos modais centralizados.
           - Cards e botões permanecem sem deslocamento/escala por interação.
           ===================================================================== */
        .modal-overlay .modal-box {
            transform: none !important;
            translate: none !important;
        }
        .modal-overlay .modal-box,
        .notification-modal,
        .confirm-modal,
        .success-modal {
            transition-property: box-shadow, opacity !important;
            transition-duration: .30s, .22s !important;
            transition-timing-function: ease !important;
        }
        .card-item,
        .card-item:hover,
        .card-item:active,
        .action-row button,
        .action-row button:hover,
        .action-row button:active,
        .btn-editar,
        .btn-editar:hover,
        .btn-editar:active,
        .btn-renovar,
        .btn-renovar:hover,
        .btn-renovar:active,
        .btn-excluir,
        .btn-excluir:hover,
        .btn-excluir:active,
        .btn-gerar-cp,
        .btn-gerar-cp:hover,
        .btn-gerar-cp:active {
            transform: none !important;
            translate: none !important;
        }

        /* =====================================================================
           CONTROLPRO V34 — ONBOARDING DE PUSH + BACKUP AUDITÁVEL
           ===================================================================== */
        .cp-reminder-time-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
        .cp-reminder-time-grid > div { min-width:0; }
        .cp-time-caption { display:block; font-size:10.5px; font-weight:750; color:#94a3b8; margin:0 0 4px 4px; }
        .cp-reminder-time-grid input { margin:0 !important; min-width:0; }
        .cp-onboarding-box { max-width:430px !important; text-align:center; }
        .cp-onboarding-icon { width:64px;height:64px;border-radius:20px;margin:0 auto 12px;display:grid;place-items:center;background:var(--filter-btn-bg);font-size:30px;color:var(--btn-primary-bg); }
        .cp-onboarding-box h3 { font-size:20px; margin-bottom:8px; }
        .cp-onboarding-box p { font-size:13px; line-height:1.5; color:#64748b; margin-bottom:14px; }
        /* V35: feedback visual de ativação do Push, sem alterar o fluxo funcional. */
        .cp-push-activating { display:inline-flex; align-items:center; justify-content:center; gap:7px; white-space:nowrap; }
        .cp-push-loading-dots { display:inline-flex; align-items:flex-end; gap:3px; height:12px; }
        .cp-push-loading-dot { width:4px; height:4px; border-radius:50%; background:currentColor; opacity:.45; animation:cpPushDotBounceV35 .9s ease-in-out infinite; }
        .cp-push-loading-dot:nth-child(2) { animation-delay:.14s; }
        .cp-push-loading-dot:nth-child(3) { animation-delay:.28s; }
        @keyframes cpPushDotBounceV35 {
            0%, 60%, 100% { transform:translateY(0); opacity:.42; }
            30% { transform:translateY(-5px); opacity:1; }
        }
        @media (prefers-reduced-motion: reduce) {
            .cp-push-loading-dot { animation:cpPushDotFadeV35 .9s ease-in-out infinite !important; transform:none !important; }
            @keyframes cpPushDotFadeV35 { 0%,100%{opacity:.35;} 50%{opacity:1;} }
        }
        .cp-backup-progress-box { max-width:520px !important; }
        .cp-backup-progress-track { height:9px;border-radius:999px;background:var(--filter-btn-bg);overflow:hidden;margin:12px 0; }
        .cp-backup-progress-bar { height:100%;width:12%;background:var(--btn-primary-bg);border-radius:inherit;transition:width .25s ease; }
        .cp-backup-progress-log { max-height:190px;overflow:auto;padding:10px;border:1px solid var(--card-border);background:var(--input-bg);border-radius:14px;font:11px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace;white-space:pre-wrap;word-break:break-word; }
        .cp-backup-summary { font-size:12px;line-height:1.5;padding:11px;border-radius:14px;background:var(--filter-btn-bg);border:1px solid var(--card-border);margin:10px 0; }
        @media (max-width:480px){ .cp-reminder-time-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:5px;} }



        /* =====================================================================
           CONTROLPRO V36 — POLIMENTO VISUAL iOS, ESTRITAMENTE ESTÉTICO
           - Não altera IDs, eventos, fluxo, regras ou integrações.
           - Refina tipografia, cards, profundidade, modais e confirmações.
           ===================================================================== */
        :root {
            --cp-v36-radius-card: 20px;
            --cp-v36-radius-modal: 28px;
            --cp-v36-shadow-card: 0 7px 24px rgba(15,23,42,.075), inset 0 1px 0 rgba(255,255,255,.28);
            --cp-v36-shadow-card-hover: 0 12px 32px rgba(15,23,42,.105), inset 0 1px 0 rgba(255,255,255,.30);
            --cp-v36-shadow-modal: 0 28px 80px rgba(2,8,23,.28), inset 0 1px 0 rgba(255,255,255,.32);
        }
        body, button, input, select, textarea {
            font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", Inter, "Segoe UI", system-ui, sans-serif !important;
            text-rendering: optimizeLegibility;
            -webkit-font-smoothing: antialiased;
        }
        .card-item, .card-form, .servico-card, .stat-card, .admin-stat-card, .user-item,
        .user-list-modal-item, .client-portal-card, .client-portal-hero, .client-renew-summary,
        .client-access-success, .client-access-credential, .cp-error-item {
            border-radius: var(--cp-v36-radius-card) !important;
            box-shadow: var(--cp-v36-shadow-card) !important;
            border-color: color-mix(in srgb, var(--card-border) 76%, transparent) !important;
        }
        .card-item, .card-form, .servico-card, .user-item, .client-portal-card, .client-portal-hero {
            background-image: linear-gradient(155deg,
                color-mix(in srgb, var(--card-bg) 99%, white 1%),
                color-mix(in srgb, var(--card-bg) 94%, var(--stat-card-bg) 6%)) !important;
        }
        .card-item:hover, .stat-card:hover, .admin-stat-card:hover, .user-item:hover {
            box-shadow: var(--cp-v36-shadow-card-hover) !important;
        }
        .card-item strong, .servico-card .servico-nome, .user-email-admin,
        .client-portal-card strong, .stat-card strong, .admin-stat-card h3 {
            letter-spacing: -.018em;
            font-weight: 760;
        }
        .field-label, .drawer-section-title, .client-portal-card span, .cp-error-item-meta {
            letter-spacing: .012em;
        }
        .modal-box {
            border-radius: var(--cp-v36-radius-modal) !important;
            box-shadow: var(--cp-v36-shadow-modal) !important;
            border-color: color-mix(in srgb, var(--card-border) 68%, transparent) !important;
        }
        .modal-title {
            font-weight: 800 !important;
            letter-spacing: -.03em !important;
        }
        .notification-modal, .confirm-modal, .success-modal {
            width: min(360px, calc(100vw - 28px)) !important;
            border-radius: 26px !important;
            padding: 24px 20px 20px !important;
            border: 1px solid color-mix(in srgb, var(--card-border) 70%, transparent) !important;
            box-shadow: var(--cp-v36-shadow-modal) !important;
            background: color-mix(in srgb, var(--card-bg) 97%, transparent) !important;
            backdrop-filter: blur(24px) saturate(155%) !important;
            -webkit-backdrop-filter: blur(24px) saturate(155%) !important;
        }
        .success-modal::before {
            content: "✓";
            width: 52px;
            height: 52px;
            margin: 0 auto 13px;
            display: grid;
            place-items: center;
            border-radius: 50%;
            background: color-mix(in srgb, #10b981 16%, var(--card-bg));
            color: #10b981;
            border: 1px solid color-mix(in srgb, #10b981 32%, transparent);
            box-shadow: 0 8px 24px rgba(16,185,129,.14);
            font-size: 28px;
            font-weight: 850;
            line-height: 1;
        }
        .success-modal p, .notification-modal p, .confirm-modal p {
            margin-bottom: 18px !important;
            font-size: 15px !important;
            line-height: 1.45 !important;
            font-weight: 650 !important;
            letter-spacing: -.012em;
        }
        .success-modal button, .notification-modal button, .confirm-modal button {
            min-height: 40px;
            border-radius: 13px !important;
            padding: 10px 18px !important;
            box-shadow: 0 5px 14px rgba(15,23,42,.08), inset 0 1px 0 rgba(255,255,255,.18);
        }
        .drawer-status-item, .drawer-toggle-row, .drawer-item {
            border-radius: 14px !important;
        }
        .topbar, .admin-header {
            box-shadow: 0 4px 20px rgba(15,23,42,.055) !important;
        }
        @media (max-width: 520px) {
            .modal-box { border-radius: 24px !important; }
            .card-item, .card-form, .servico-card, .stat-card, .admin-stat-card, .user-item { border-radius: 18px !important; }
        }


        /* =====================================================================
           CONTROLPRO V38 — CAMPANHAS / SLIDER DO CLIENTE
           Inspirado no fluxo de campanhas do Pedido Anotado, isolado por revenda.
           ===================================================================== */
        .cp-campaign-editor-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
        .cp-campaign-editor-grid .cp-full { grid-column:1 / -1; }
        .cp-campaign-photo-row { display:grid; grid-template-columns:128px 1fr; gap:12px; align-items:center; }
        .cp-campaign-preview { width:128px; aspect-ratio:16/9; border-radius:16px; object-fit:cover; background:var(--filter-btn-bg); border:1px solid var(--card-border); display:block; box-shadow:0 7px 18px rgba(15,23,42,.08); }
        .cp-campaign-preview.empty { display:grid; place-items:center; color:#94a3b8; font-size:11px; text-align:center; padding:8px; }
        .cp-campaign-photo-actions { display:flex; flex-direction:column; gap:8px; min-width:0; }
        .cp-campaign-photo-actions .btn-cancel, .cp-campaign-photo-actions .btn-action { width:100%; }
        .cp-campaign-help { font-size:10.5px; line-height:1.4; color:#94a3b8; margin-top:5px; }
        .cp-campaign-management { display:flex; flex-direction:column; gap:8px; margin-top:12px; }
        .cp-campaign-management-card { display:grid; grid-template-columns:104px 1fr; gap:12px; align-items:center; padding:11px; border:1px solid var(--card-border); border-radius:18px; background:var(--card-bg); box-shadow:0 7px 20px rgba(15,23,42,.055); }
        .cp-campaign-management-card img { width:104px; aspect-ratio:16/9; object-fit:cover; border-radius:13px; background:var(--filter-btn-bg); }
        .cp-campaign-management-card h4 { margin:0 0 3px; font-size:14px; }
        .cp-campaign-management-card p { margin:0; font-size:11.5px; color:#64748b; line-height:1.35; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
        .cp-campaign-management-actions { display:flex; gap:6px; margin-top:8px; flex-wrap:wrap; }
        .cp-campaign-management-actions button { width:auto; min-height:32px; padding:6px 11px; font-size:11px; }
        .cp-client-campaign-section { margin:-2px 0 8px; }
        .cp-client-campaign-title { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:0 2px 4px; font-size:12px; font-weight:800; }
        .cp-client-campaign-title span:last-child { font-size:10px; font-weight:650; color:#94a3b8; }
        .cp-client-campaign-carousel { position:relative; overflow:hidden; border-radius:22px; border:1px solid var(--card-border); background:var(--card-bg); box-shadow:0 10px 28px rgba(15,23,42,.10); }
        .cp-client-campaign-slide { position:relative; display:none; min-height:188px; aspect-ratio:16/9; cursor:pointer; overflow:hidden; background:var(--filter-btn-bg); }
        .cp-client-campaign-slide.active { display:block; animation:cpCampaignFadeV38 .32s ease; }
        .cp-client-campaign-slide img { width:100%; height:100%; object-fit:cover; display:block; }
        .cp-client-campaign-overlay { position:absolute; inset:auto 0 0; padding:34px 14px 18px; background:linear-gradient(transparent,rgba(0,0,0,.82)); color:#fff; z-index:1; }
        .cp-client-campaign-overlay strong { display:block; font-size:15px; line-height:1.2; text-shadow:0 1px 8px rgba(0,0,0,.35); }
        .cp-client-campaign-overlay span { display:block; font-size:11px; margin-top:3px; opacity:.93; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
        .cp-client-campaign-dots { position:absolute; left:0; right:0; bottom:10px; z-index:2; display:flex; justify-content:center; align-items:center; gap:6px; padding:0 10px; background:transparent; pointer-events:none; }
        .cp-client-campaign-dot { width:7px; height:7px; border-radius:999px; border:0; padding:0; background:rgba(255,255,255,.58); box-shadow:none !important; min-height:0; pointer-events:auto; }
        .cp-client-campaign-dot.active { width:20px; background:#ffffff; box-shadow:0 3px 10px rgba(0,0,0,.18) !important; }
        .cp-campaign-detail-image { width:100%; max-height:48vh; object-fit:contain; border-radius:18px; background:var(--filter-btn-bg); border:1px solid var(--card-border); }
        .cp-campaign-detail-message { text-align:center; font-size:13px; color:#64748b; line-height:1.45; margin:7px 0 0; }
        .cp-campaign-detail-info { margin-top:12px; background:var(--filter-btn-bg); border:1px solid var(--card-border); padding:13px; border-radius:15px; white-space:pre-wrap; word-break:break-word; font-size:12px; line-height:1.5; }
        @keyframes cpCampaignFadeV38 { from{opacity:.18;} to{opacity:1;} }
        @media (max-width:520px) {
            .cp-campaign-editor-grid { grid-template-columns:1fr; }
            .cp-campaign-editor-grid .cp-full { grid-column:auto; }
            .cp-campaign-photo-row { grid-template-columns:104px 1fr; }
            .cp-campaign-preview { width:104px; }
            .cp-campaign-management-card { grid-template-columns:92px 1fr; gap:9px; }
            .cp-campaign-management-card img { width:92px; }
            .cp-client-campaign-slide { min-height:184px; aspect-ratio:16/9; }
        }

        /* =====================================================================
           CONTROLPRO V58 — BACKUP PADRÃO PEDIDO ANOTADO
           Pré-check + inventário + auditoria + hash + relatório + restauração
           auditada. Sem novas leituras Firestore no navegador: usa o backend
           recursivo já existente e audita o pacote retornado.
           ===================================================================== */
        .cp-backup-source-grid {
            display:grid;
            grid-template-columns:repeat(2,minmax(0,1fr));
            gap:7px;
            margin:10px 0 14px;
        }
        .cp-backup-source-grid > div {
            display:grid;
            grid-template-columns:28px 1fr;
            grid-template-rows:auto auto;
            column-gap:8px;
            align-items:center;
            min-width:0;
            padding:10px;
            border-radius:14px;
            border:1px solid var(--card-border);
            background:var(--filter-btn-bg);
        }
        .cp-backup-source-grid i {
            grid-row:1 / 3;
            width:28px;
            height:28px;
            display:grid;
            place-items:center;
            border-radius:9px;
            background:color-mix(in srgb,var(--btn-primary-bg) 13%,transparent);
            color:var(--btn-primary-bg);
        }
        .cp-backup-source-grid strong { font-size:11.5px; line-height:1.2; }
        .cp-backup-source-grid span { font-size:9.5px; color:#94a3b8; line-height:1.2; margin-top:2px; }
        .cp-backup-progress-box { max-width:620px !important; }
        .cp-backup-progress-stage {
            padding:11px 12px;
            border:1px solid var(--card-border);
            border-radius:14px;
            background:var(--filter-btn-bg);
            margin-bottom:9px;
        }
        .cp-backup-progress-stage-label { display:block; font-size:9.5px; text-transform:uppercase; letter-spacing:.075em; color:#94a3b8; font-weight:800; margin-bottom:3px; }
        .cp-backup-progress-stage-text { display:block; font-size:13px; font-weight:760; line-height:1.35; color:var(--text-main); }
        .cp-backup-progress-metrics {
            display:grid;
            grid-template-columns:repeat(4,minmax(0,1fr));
            gap:6px;
            margin:8px 0 10px;
        }
        .cp-backup-progress-metric {
            padding:8px 6px;
            border-radius:12px;
            background:var(--input-bg);
            border:1px solid var(--card-border);
            text-align:center;
            min-width:0;
        }
        .cp-backup-progress-metric span { display:block; font-size:8.5px; color:#94a3b8; text-transform:uppercase; letter-spacing:.045em; font-weight:750; }
        .cp-backup-progress-metric strong { display:block; margin-top:3px; font-size:11px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
        .cp-backup-progress-log { max-height:220px; }
        .cp-backup-progress-note { font-size:10px; color:#94a3b8; line-height:1.4; margin-top:8px; text-align:center; }
        .cp-backup-live-row { display:flex; align-items:center; gap:8px; margin:8px 0; padding:9px 10px; border:1px solid var(--card-border); background:var(--filter-btn-bg); border-radius:13px; min-width:0; }
        .cp-backup-live-dot { width:9px; height:9px; border-radius:50%; background:var(--btn-primary-bg); flex:0 0 9px; box-shadow:0 0 0 0 color-mix(in srgb,var(--btn-primary-bg) 38%,transparent); animation:cpBackupPulseV59 1.2s ease-out infinite; }
        .cp-backup-live-row.done .cp-backup-live-dot { background:#10b981; animation:none; }
        .cp-backup-live-row.failed .cp-backup-live-dot { background:#ef4444; animation:none; }
        .cp-backup-live-copy { min-width:0; flex:1; }
        .cp-backup-live-copy span { display:block; font-size:9px; color:#94a3b8; font-weight:750; text-transform:uppercase; letter-spacing:.05em; }
        .cp-backup-live-copy strong { display:block; margin-top:2px; font-size:11px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
        .cp-backup-path-box { margin:7px 0; padding:9px 10px; border-radius:12px; background:var(--input-bg); border:1px solid var(--card-border); font:10.5px/1.45 ui-monospace,SFMono-Regular,Menlo,monospace; color:var(--text-main); word-break:break-all; min-height:34px; }
        .cp-backup-recent-title { font-size:9px; color:#94a3b8; text-transform:uppercase; letter-spacing:.055em; font-weight:800; margin:8px 2px 4px; }
        .cp-backup-recent-list { max-height:125px; overflow:auto; display:flex; flex-direction:column; gap:3px; padding:7px; border:1px solid var(--card-border); border-radius:12px; background:var(--input-bg); }
        .cp-backup-recent-item { display:flex; align-items:flex-start; gap:6px; min-width:0; font:9.8px/1.35 ui-monospace,SFMono-Regular,Menlo,monospace; color:var(--text-main); }
        .cp-backup-recent-item::before { content:'✓'; color:#10b981; font-weight:900; flex:0 0 auto; }
        .cp-backup-recent-item span { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
        @keyframes cpBackupPulseV59 { 0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--btn-primary-bg) 38%,transparent);} 100%{box-shadow:0 0 0 9px transparent;} }
        @media (max-width:520px) {
            .cp-backup-source-grid { grid-template-columns:1fr; }
            .cp-backup-progress-metrics { grid-template-columns:repeat(2,minmax(0,1fr)); }
        }



        /* =====================================================================
           CONTROLPRO V65 — AJUSTES VISUAIS E PERFIL SEGURO
           ===================================================================== */
        #notificacoesLista.cp-notification-list-v65,
        #notificacoesLista { display:flex !important; flex-direction:column !important; gap:10px !important; row-gap:10px !important; max-height:46vh !important; overflow-y:auto !important; padding:2px 2px 8px !important; }
        #notificacoesLista .cp-notification-card-v65 { margin:0 !important; min-height:88px !important; height:auto !important; overflow:visible !important; padding:13px 14px !important; border-radius:17px !important; flex:0 0 auto !important; }
        #notificacoesLista .cp-notification-row-v65 { display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:60px; }
        #notificacoesLista .cp-notification-info-v65 { flex:1 1 auto; min-width:0; line-height:1.45; }
        #notificacoesLista .cp-notification-info-v65 strong { display:block; margin-bottom:3px; font-size:14px; line-height:1.25; }
        #notificacoesLista .cp-notification-actions-v65 { display:flex; align-items:center; justify-content:flex-end; gap:6px; flex:0 0 auto; flex-wrap:wrap; }
        #notificacoesLista .cp-notification-actions-v65 button { margin:0 !important; white-space:nowrap; }
        .cp-client-identity-v65 { min-width:0; display:flex; flex-direction:column; gap:2px; line-height:1.28; }
        .cp-client-identity-v65 .cp-profile-name-v65 { font-size:12px; color:#64748b; font-weight:650; }
        .cp-profile-editor-v65 { display:grid; grid-template-columns:92px 1fr; gap:14px; align-items:start; margin-top:6px; }
        .cp-profile-photo-v65 { width:92px; height:92px; border-radius:22px; object-fit:cover; border:1px solid #111827; background:var(--input-bg); }
        .cp-profile-photo-actions-v65 { display:grid; gap:7px; margin-top:8px; }
        .cp-profile-photo-actions-v65 label, .cp-profile-photo-actions-v65 button { width:100%; min-height:36px; border-radius:12px; font-size:11px; }
        .cp-profile-photo-actions-v65 input { display:none; }
        .cp-last-access-v65 { opacity:.9; }
        @media (max-width:560px) {
            #notificacoesLista .cp-notification-row-v65 { align-items:flex-start; }
            #notificacoesLista .cp-notification-actions-v65 { max-width:112px; }
            #notificacoesLista .cp-notification-actions-v65 button { width:100%; }
            .cp-profile-editor-v65 { grid-template-columns:78px 1fr; gap:11px; }
            .cp-profile-photo-v65 { width:78px; height:78px; border-radius:19px; }
        }


/* =====================================================================
   controlpro-v44-topbar-pedido-anotado
   Extraído do index V129 na separação V131
   ===================================================================== */
/* V47: top bar de produção compacta; foto permanece 44px e a barra fica com 2px de respiro vertical. */
        #mainScreen .topbar {
            height: 48px;
            min-height: 48px;
            padding: 0 10px;
            gap: 8px;
        }
        #mainScreen .user-info-compact {
            padding: 0 4px;
            overflow: hidden;
        }
        #mainScreen .user-row {
            gap: 10px;
        }
        #mainScreen .user-avatar {
            width: 44px;
            height: 44px;
            border-radius: 50%;
            object-fit: cover;
            background: var(--bg-body, var(--filter-btn-bg));
            border: 2px solid var(--card-bg);
            box-shadow: 0 1px 2px rgba(0,0,0,.08);
            flex: 0 0 44px;
        }
        #mainScreen .user-name {
            font-size: 20px;
            line-height: 1.05;
            font-weight: 600;
            letter-spacing: -0.2px;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: clip;
            text-transform: uppercase;
        }