:root {
            --panda-black: #0b0b0b;
            --panda-panel: #151515;
            --panda-panel-2: #1d1d1d;
            --panda-border: #2b2b2b;
            --panda-text: #f7f7f7;
            --panda-muted: #969696;
            --panda-orange: #ff8c00;
            --panda-orange-soft: rgba(255, 140, 0, .14);
            --panda-green: #39d98a;
            --panda-red: #ff6b6b;
        }
        * { box-sizing: border-box; }
        body { margin: 0; min-height: 100vh; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; background: var(--panda-black); color: var(--panda-text); overflow-x: hidden; }
        button, input, select, textarea { font: inherit; }
        input, select, textarea { width: 100%; padding: 11px 12px; margin: 5px 0; border: 1px solid var(--panda-border); border-radius: 9px; background: #101010; color: var(--panda-text); outline: none; }
        input:focus, select:focus, textarea:focus { border-color: var(--panda-orange); box-shadow: 0 0 0 3px var(--panda-orange-soft); }
        button { padding: 10px 14px; border: 1px solid transparent; border-radius: 9px; background: var(--panda-orange); color: #111; cursor: pointer; font-weight: 700; transition: .18s ease; }
        button:hover { filter: brightness(1.08); transform: translateY(-1px); }
        table { width: 100%; border-collapse: separate; border-spacing: 0; margin-top: 16px; overflow: hidden; }
        th, td { padding: 12px 14px; border-bottom: 1px solid var(--panda-border); text-align: left; vertical-align: middle; }
        th { background: #202020; color: #bfbfbf; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; }
        tr:last-child td { border-bottom: 0; }
        tr:hover td { background: rgba(255,255,255,.025); }
        .error { color: var(--panda-red); }
        .success { color: var(--panda-green); }
        .hidden { display: none !important; }
        #auth-section { position: relative; overflow: hidden; width: min(920px, calc(100% - 32px)); height: min(520px, calc(100vh - 32px)); min-height: 0; margin: 16px auto; padding: 0; display: grid; grid-template-columns: 1.05fr .95fr; background: linear-gradient(135deg, #171a1e 0%, #101214 100%); border: 1px solid #30353b; border-radius: 22px; box-shadow: 0 28px 90px rgba(0,0,0,.48); }
        #auth-section::before { content: ''; position: absolute; width: 360px; height: 360px; left: -150px; top: -175px; border-radius: 50%; background: rgba(255,140,0,.07); filter: blur(2px); }
        #auth-section::after { content: ''; position: absolute; width: 280px; height: 280px; right: -120px; bottom: -160px; border-radius: 50%; background: rgba(79,140,255,.08); }
        .auth-brand-panel, .auth-form-panel { position: relative; z-index: 1; }
        .auth-brand-panel { display: flex; flex-direction: column; justify-content: space-between; padding: 44px; background: linear-gradient(155deg, rgba(255,140,0,.12), rgba(255,140,0,.02) 58%, transparent); border-right: 1px solid rgba(255,255,255,.07); }
        .auth-brand { display: flex; align-items: center; gap: 12px; }
        .auth-brand-mark { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 14px; background: var(--panda-orange); color: #111; font-size: 27px; font-weight: 900; box-shadow: 0 10px 25px rgba(255,140,0,.22); }
        .auth-brand strong { display: block; color: #f5f6f7; font-size: 16px; letter-spacing: -.02em; }
        .auth-brand small { display: block; margin-top: 3px; color: #87909a; font-size: 11px; }
        .auth-copy { max-width: 330px; }
        .auth-copy h1 { margin: 0 0 10px; color: #f7f8f9; font-size: clamp(28px, 4vw, 40px); line-height: 1.05; letter-spacing: -.045em; }
        .auth-copy p { margin: 0; color: #9ba3ab; font-size: 13px; line-height: 1.65; }
        .auth-footnote { color: #737c85; font-size: 11px; }
        .auth-footnote::before { content: ''; display: inline-block; width: 6px; height: 6px; margin: 0 7px 1px 0; border-radius: 50%; background: #39d98a; box-shadow: 0 0 0 3px rgba(57,217,138,.12); }
        .auth-form-panel { display: flex; align-items: center; padding: 44px; }
        .auth-form { width: 100%; max-width: 330px; margin: 0 auto; }
        .auth-form h2 { margin: 0 0 8px; color: #f4f6f8; font-size: 24px; letter-spacing: -.03em; }
        .auth-form > p { margin: 0 0 24px; color: #89929c; font-size: 12px; line-height: 1.55; }
        .auth-label { display: block; margin: 0 0 7px; color: #c8ced4; font-size: 11px; font-weight: 650; letter-spacing: .03em; }
        .auth-form input { margin: 0 0 16px; padding: 13px 14px; background: #0c0e10; border-color: #343a41; border-radius: 10px; }
        .auth-form input::placeholder { color: #68717b; }
        .auth-form button { width: 100%; margin-top: 3px; padding: 13px 15px; border-radius: 10px; box-shadow: 0 10px 22px rgba(255,140,0,.16); }
        .auth-form #loginError { min-height: 18px; margin: 12px 0 0; font-size: 12px; }
        @media (max-width: 700px) { #auth-section { width: min(500px, calc(100% - 22px)); height: calc(100vh - 24px); min-height: 0; margin: 12px auto; grid-template-columns: 1fr; } .auth-brand-panel { min-height: 0; padding: 24px 24px 18px; border-right: 0; border-bottom: 1px solid rgba(255,255,255,.07); } .auth-form-panel { padding: 24px; } .auth-copy h1 { font-size: 28px; } .auth-copy p { line-height: 1.45; } }
        @media (max-height: 700px) and (min-width: 701px) { #auth-section { height: calc(100vh - 24px); } .auth-brand-panel, .auth-form-panel { padding: 28px; } .auth-copy h1 { font-size: 32px; } .auth-form h2 { font-size: 21px; } .auth-form > p { margin-bottom: 16px; } .auth-form input { margin-bottom: 11px; padding: 11px 13px; } }
        #admin-content { min-height: 100vh; display: grid; grid-template-columns: 236px minmax(0, 1fr); grid-template-rows: auto 1fr; gap: 0 26px; padding: 22px; }
        body[data-dashboard-layout="fluid"] #admin-content { width: 100%; max-width: none; margin-inline: 0; }
        body[data-dashboard-layout="boxed"] #admin-content { width: min(100%, 1600px); margin-inline: auto; }
        .admin-header { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; min-height: 58px; margin-bottom: 18px; }
        .brand-lockup { display: flex; align-items: center; gap: 12px; }
        .brand-mark { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: var(--panda-orange); color: #111; font-size: 25px; font-weight: 900; line-height: 1; }
        .brand-lockup h1 { margin: 0; font-size: 21px; letter-spacing: -.02em; }
        .brand-lockup small { color: var(--panda-muted); display: block; margin-top: 2px; }
        .logout-btn { background: transparent; color: #ddd; border-color: var(--panda-border); }
        .logout-btn:hover { background: #222; }
        .tab-bar { grid-column: 1; grid-row: 2; display: flex; flex-direction: column; align-self: start; gap: 7px; padding: 12px; background: var(--panda-panel); border: 1px solid var(--panda-border); border-radius: 16px; position: sticky; top: 22px; }
        .tab-bar button { width: 100%; text-align: left; background: transparent; color: #aaa; border-color: transparent; font-weight: 600; }
        .tab-bar button:hover { background: #232323; color: #fff; transform: none; }
        .tab-bar button.active { background: var(--panda-orange-soft); color: var(--panda-orange); border-color: rgba(255,140,0,.22); }
        #admin-content > [id^="tab-content-"] { grid-column: 2; grid-row: 2; min-width: 0; }
        #admin-content > [id^="tab-content-"] > h2 { margin-top: 0; font-size: 25px; letter-spacing: -.03em; }
        #tab-content-dashboard, #tab-content-users, #tab-content-activity, #tab-content-locations, #tab-content-addons, #tab-content-settings { background: var(--panda-panel); border: 1px solid var(--panda-border); border-radius: 16px; padding: 22px; }
        .dashboard-card { background: var(--panda-panel-2); border: 1px solid var(--panda-border); padding: 18px; border-radius: 14px; display: inline-flex; flex-direction: column; gap: 8px; min-width: 190px; min-height: 105px; margin: 0; }
        .dashboard-card .metric-label { color: var(--panda-muted); font-size: 12px; text-transform: uppercase; letter-spacing: .07em; }
        .dashboard-card strong { color: #fff; font-size: 28px; letter-spacing: -.03em; }
        #dashboard-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(175px, 1fr)); gap: 12px; }
        #dashboard-cards .dashboard-card:nth-child(2) strong { color: var(--panda-green); }
        #dashboard-cards .dashboard-card:nth-child(3) strong { color: var(--panda-orange); }
        .dashboard-loading { grid-column: 1 / -1; padding: 22px; color: var(--panda-muted); background: var(--panda-panel-2); border: 1px dashed var(--panda-border); border-radius: 12px; text-align: center; }
        .section-toolbar, .form-grid, .filter-grid { display: grid; gap: 12px; }
        .form-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
        .filter-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
        .panel { background: var(--panda-panel-2); border: 1px solid var(--panda-border); border-radius: 14px; padding: 16px; }
        .panel h3 { margin-top: 0; }

        .torbox-panel { margin-bottom: 18px; border-color: rgba(255,140,0,.25); }
        .torbox-panel h3 { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
        .torbox-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(150px, 1fr)); gap: 12px; align-items: end; }
        .torbox-grid .wide { grid-column: span 2; }
        .torbox-key-row { display: flex; gap: 8px; align-items: end; }
        .torbox-key-row > div { flex: 1; }
        .torbox-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; align-items: center; }
        .torbox-actions button.danger { border-color: rgba(239,98,98,.35); color: #ff9a9a; }
        .torbox-meta { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 12px; color: #8997a9; font-size: 11px; }
        .torbox-managed-note { margin: 0 0 14px; color: #9aa6b7; font-size: 12px; line-height: 1.55; }
        @media (max-width: 800px) { .torbox-grid { grid-template-columns: 1fr; } .torbox-grid .wide { grid-column: auto; } }
        .modal-overlay { position: fixed; top:0; left:0; width:100%; height:100%; background: rgba(0,0,0,0.8); display: flex; align-items: center; justify-content: center; z-index:1000; }
        .modal { background: #333; padding: 20px; border-radius: 10px; width: min(760px, calc(100vw - 28px)); max-height:88vh; overflow-y:auto; }
        .modal input, .modal select, .modal textarea { width: 100%; margin: 5px 0; }
        .modal button { margin-right: 10px; }
        .close-btn { float: right; background: #555; }
        .modal-actions { display:flex; gap:8px; flex-wrap:wrap; margin-top:16px; }
        .payment-history-editor { margin-top:16px; padding:14px; background:#141619; border:1px solid #292c30; border-radius:8px; }
        .payment-history-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:10px; }
        .payment-history-heading strong { display:block; color:#f1f3f5; }
        .payment-history-heading small { display:block; margin-top:4px; color:#81868d; font-size:11px; }
        .payment-history-wrap { max-height:190px; overflow:auto; }
        .payment-history-table { margin-top:0; min-width:620px; background:#101214; }
        .payment-history-table th, .payment-history-table td { padding:8px 9px; font-size:11px; }
        .payment-history-table .payment-delete { padding:5px 7px; font-size:11px; background:#3a1c1c; color:#ffb3b3; border-color:#6a2a2a; }
        .payment-entry-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin:12px 0; }
        .payment-entry-grid label { display:block; color:#92979e; font-size:10px; text-transform:uppercase; letter-spacing:.05em; }
        .payment-entry-grid input { margin:4px 0 0; padding:8px 9px; font-size:12px; }
        .muted { color:#81868d; font-size:11px; }



        .code-result-actions { display:flex; gap:7px; flex-wrap:wrap; margin-top:9px; }
        .code-result-actions button { margin:0; padding:7px 9px; font-size:11px; }
        .message-template-panel { max-width:720px; padding:16px; background:#141619; border:1px solid #292c30; }
        .message-template-panel h3 { margin:0 0 5px; font-size:13px; }
        .message-template-panel p { margin:0 0 12px; color:#81868d; font-size:12px; line-height:1.5; }
        #whatsappTemplate { min-height:145px; resize:vertical; font-size:12px; line-height:1.55; font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; }
        .template-placeholders { display:flex; gap:6px; flex-wrap:wrap; margin:7px 0 11px; }
        .template-token { padding:4px 7px; border:1px solid #3a3f46; background:#101214; color:#bfc7d1; font:11px ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; cursor:pointer; }
        .template-actions { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
        .template-actions button { margin:0; padding:8px 10px; font-size:11px; }
        #whatsappTemplateStatus { color:#74d39a; font-size:11px; }
        .template-preview { margin-top:14px; padding:12px; white-space:pre-wrap; overflow-wrap:anywhere; background:#101214; border:1px solid #292c30; color:#cbd1d7; font-size:12px; line-height:1.55; }
        .template-preview strong { display:block; margin-bottom:6px; color:#92979e; font-size:10px; text-transform:uppercase; letter-spacing:.05em; }

        .ops-section { margin-top:20px; padding:18px; background:#141619; border:1px solid #292c30; border-radius:8px; }
        .ops-section-header { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:14px; }
        .ops-section-header h3 { margin:0 0 4px; font-size:14px; }
        .ops-section-header p { margin:0; color:#81868d; font-size:12px; }
        .ops-stat-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; }
        .ops-stat { padding:13px; background:#101214; border:1px solid #292c30; border-radius:7px; }
        .ops-stat strong { display:block; margin-top:5px; color:var(--panda-orange); font-size:22px; }
        .ops-stat small { color:#92979e; font-size:10px; text-transform:uppercase; letter-spacing:.06em; }
        .ops-stat button { margin-top:9px; padding:6px 8px; font-size:11px; background:transparent; color:#cbd1d7; border-color:#3a3f46; }
        .profile-modal { width:min(980px,calc(100vw - 28px)); }

        .detail-whatsapp-btn { padding:6px 8px; margin:0; font-size:11px; background:transparent; color:#b9e7c9; border-color:#2e6948; white-space:nowrap; }
        .detail-whatsapp-btn:hover { background:#12301f; }
        .profile-header { display:flex; align-items:flex-start; justify-content:space-between; gap:14px; padding-bottom:14px; border-bottom:1px solid #30343a; }
        .profile-header h3 { margin:0 0 5px; }
        .profile-header p { margin:0; color:#92979e; font-size:12px; }
        .profile-actions { display:flex; gap:7px; flex-wrap:wrap; }
        .profile-actions button { margin:0; padding:8px 10px; font-size:11px; }
        .profile-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:9px; margin:15px 0; }
        .profile-field { padding:10px; background:#101214; border:1px solid #292c30; }
        .profile-field small { display:block; color:#81868d; font-size:10px; text-transform:uppercase; letter-spacing:.05em; }
        .profile-field strong { display:block; margin-top:4px; color:#e8eaed; font-size:13px; overflow-wrap:anywhere; }
        .profile-section { margin-top:15px; }
        .profile-section h4 { margin:0 0 7px; font-size:12px; color:#cbd1d7; }
        .profile-section .table-wrap { max-height:220px; overflow:auto; }
        .profile-section table { margin-top:0; min-width:620px; }
        .activity-filter-panel { display:grid; grid-template-columns:1.2fr 1fr 1fr 1fr auto auto; gap:8px; align-items:end; margin:0 0 14px; padding:13px; background:#141619; border:1px solid #292c30; }
        .activity-filter-panel label { display:block; color:#92979e; font-size:10px; text-transform:uppercase; letter-spacing:.05em; }
        .activity-filter-panel input, .activity-filter-panel select { margin:5px 0 0; padding:8px 9px; font-size:12px; }
        .activity-filter-panel button { padding:8px 10px; font-size:11px; white-space:nowrap; }
        #activityResult { color:#81868d; font-size:11px; margin:0 0 8px; }
        @media (max-width:900px) { .ops-stat-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .profile-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .activity-filter-panel { grid-template-columns:repeat(2,minmax(0,1fr)); } }
        @media (max-width:600px) { .ops-section { padding:14px; } .ops-stat-grid { gap:7px; } .ops-stat { padding:10px; } .ops-stat strong { font-size:19px; } .profile-header { flex-direction:column; } .profile-grid { grid-template-columns:1fr 1fr; } .activity-filter-panel { grid-template-columns:1fr; } }

        /* Activity Log: keep verbose JSON inside the panel instead of forcing page-wide overflow. */
        #tab-content-activity .table-wrap { min-width: 0; overflow-x: auto; }
        #activityTable { width: 100%; min-width: 0; table-layout: fixed; }
        #activityTable th:nth-child(1), #activityTable td:nth-child(1) { width: 168px; white-space: nowrap; }
        #activityTable th:nth-child(2), #activityTable td:nth-child(2) { width: 155px; }
        #activityTable td:nth-child(2) { overflow-wrap: anywhere; word-break: break-word; }
        #activityTable td.activity-details { white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-word; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; line-height: 1.5; color: #bfc7d1; }
        @media (max-width: 600px) {
            #tab-content-activity .table-wrap { margin-right: 0; padding-right: 0; }
            #activityTable { min-width: 0; }
            #activityTable th:nth-child(1), #activityTable td:nth-child(1) { width: 112px; white-space: normal; }
            #activityTable th:nth-child(2), #activityTable td:nth-child(2) { width: 92px; }
            #activityTable th, #activityTable td { padding: 9px 7px; font-size: 11px; }
            #activityTable td.activity-details { font-size: 10px; }
        }
        @media (max-width:600px) { .payment-entry-grid { grid-template-columns:1fr; } .payment-history-heading { flex-direction:column; } }
        .addon-toolbar { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; margin-bottom: 16px; }
        .addon-toolbar > div { flex: 1 1 220px; }
        .addon-toolbar label { display: block; margin: 0 0 6px; color: #92979e; font-size: 10px; text-transform: uppercase; letter-spacing: .05em; }
        .addon-toolbar input { margin: 0; }
        .addon-toolbar button { align-self: flex-end; }
        .status-pill { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px; font-size: 11px; font-weight: 700; }
        .status-pill.on { background: rgba(57,217,138,.14); color: var(--panda-green); }
        .status-pill.off { background: rgba(255,107,107,.14); color: var(--panda-red); }
        .addon-url-cell { max-width: 360px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: ui-monospace, monospace; font-size: 11.5px; color: #b7bcc2; }
        #map { height: 500px; border-radius: 14px; margin-top: 15px; border: 1px solid var(--panda-border); }
        .location-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 15px 0; }
        .location-stat { background: var(--panda-panel-2); border: 1px solid var(--panda-border); border-radius: 12px; padding: 14px 16px; color: var(--panda-muted); font-size: 12px; text-transform: uppercase; letter-spacing: .06em; }
        .location-stat strong { display: block; color: var(--panda-orange); font-size: 25px; margin-top: 5px; letter-spacing: -.03em; }
        .location-table { margin-top: 15px; background: var(--panda-panel-2); border: 1px solid var(--panda-border); border-radius: 12px; overflow: hidden; }
        .location-table th { background: #202020; }
        .location-table td, .location-table th { padding: 11px 13px; }
        .panda-count-marker { background: var(--panda-orange); color: #111; border: 3px solid #fff; border-radius: 50%; width: 36px !important; height: 36px !important; line-height: 30px; text-align: center; font-weight: 800; font-size: 14px; box-shadow: 0 2px 8px rgba(0,0,0,.65); }
        @media (max-width: 900px) {
            #admin-content { grid-template-columns: 1fr; grid-template-rows: auto auto 1fr; padding: 14px; gap: 12px; }
            .admin-header { grid-column: 1; margin-bottom: 0; }
            .tab-bar { grid-column: 1; grid-row: 2; position: static; flex-direction: row; overflow-x: auto; padding: 7px; }
            .tab-bar button { width: auto; min-width: max-content; text-align: center; white-space: nowrap; }
            #admin-content > [id^="tab-content-"] { grid-column: 1; grid-row: 3; }
            .form-grid, .filter-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
        }
        @media (max-width: 600px) {
            #admin-content { padding: 10px; }
            .admin-header { min-height: 48px; }
            .brand-mark { width: 34px; height: 34px; font-size: 22px; }
            .brand-lockup h1 { font-size: 18px; }
            .brand-lockup small { display: none; }
            .logout-btn { padding: 8px 10px; font-size: 12px; }
            #tab-content-dashboard, #tab-content-users, #tab-content-activity, #tab-content-locations, #tab-content-addons, #tab-content-settings { padding: 14px; border-radius: 13px; }
            .form-grid, .filter-grid, .location-summary { grid-template-columns: 1fr; }
            #dashboard-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
            .dashboard-card { min-width: 0; min-height: 92px; padding: 13px; }
            .dashboard-card strong { font-size: 22px; }
            .dashboard-card .metric-label { font-size: 10px; }
            .table-wrap { overflow-x: auto; margin-right: -14px; padding-right: 14px; }
            table { min-width: 720px; }
            #map { height: 380px; }
        }

        /* Enterprise Users redesign: compact table, semantic status pills, one overflow action menu. */
        .users-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin-bottom:18px; }
        .users-heading h2 { margin:0 0 5px; }
        .users-heading p { margin:0; color:#81868d; font-size:12px; }
        .users-create-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin-bottom:16px; }
        .users-create-grid > div { padding:16px; border:1px solid #292c30; background:#141619; border-radius:8px; }
        .users-create-grid h3 { margin:0 0 11px; font-size:13px; color:#d7d9dc; }
        .users-create-grid textarea { width:100%; }
        .users-create-grid .result-card { display:flex; flex-direction:column; justify-content:center; }
        .users-filter-panel { padding:16px; border:1px solid #292c30; background:#141619; border-radius:8px; margin-bottom:14px; }
        .users-filter-panel h3 { margin:0 0 4px; font-size:13px; }
        .users-filter-panel p { margin:0 0 12px; color:#81868d; font-size:12px; }
        .users-filter-actions { display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; margin-top:12px; }
        .users-filter-actions > div { display:flex; gap:8px; flex-wrap:wrap; }
        .users-filter-actions button { width:auto; margin:0; }
        .users-table-meta { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:14px 0 8px; color:#92979e; font-size:12px; }
        .users-table-meta strong { color:#e8eaed; font-size:13px; }
        #userTable { table-layout:auto; }
        #userTable th:first-child, #userTable td:first-child { width:42px; }
        #userTable th:last-child, #userTable td:last-child { width:108px; text-align:right; }
        .user-primary { display:block; color:#f2f3f4; font-weight:650; }
        .user-secondary { display:block; margin-top:3px; color:#81868d; font-size:11px; }
        .status-pill { display:inline-flex; align-items:center; gap:5px; padding:4px 8px; border:1px solid #343941; font-size:11px; white-space:nowrap; }
        .status-pill::before { content:''; width:6px; height:6px; border-radius:50%; background:currentColor; }
        .status-pill.active { color:#53e39a; border-color:#245c43; background:#10251b; }
        .status-pill.pending { color:#ffbd66; border-color:#68481e; background:#2a1c0d; }
        .status-pill.disabled { color:#ff8c8c; border-color:#6d3030; background:#2a1212; }
        .status-pill.expired { color:#ff9f66; border-color:#70401f; background:#2b1b10; }
        .row-actions { position:relative; display:inline-block; z-index:1; }
        .row-actions[open] { z-index:100; }
        .row-actions summary { list-style:none; cursor:pointer; border:1px solid #3a3f46; padding:7px 9px; color:#d7d9dc; font-size:12px; }
        .row-actions summary::-webkit-details-marker { display:none; }
        .row-actions[open] summary { border-color:var(--panda-orange); color:#fff; }
        .row-actions-menu { position:fixed; left:0; top:0; z-index:10000; display:block; min-width:170px; max-height:min(280px, calc(100vh - 16px)); overflow-y:auto; padding:5px; background:#17191c; border:1px solid #3a3f46; box-shadow:0 12px 30px rgba(0,0,0,.55); }
        .row-actions-menu button { display:block; width:100%; margin:0; padding:8px 9px; background:transparent; color:#d7d9dc; text-align:left; font-size:12px; }
        .row-actions-menu button:hover { background:#292d32; transform:none; }
        .row-actions-menu .theme-danger { color:#ff8c8c; }
        .bulk-actions button { background:transparent; color:#d7d9dc; border-color:#3a3f46; }
        .bulk-actions button:last-child { color:#ff8c8c; border-color:#6d3030; }
        .monthly-payment-panel { margin-top:20px; padding:18px; background:#141619; border:1px solid #292c30; border-radius:8px; }
        .monthly-payment-header { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:12px; }
        .monthly-payment-header h3 { margin:0 0 4px; font-size:14px; }
        .monthly-payment-header p { margin:0; color:#81868d; font-size:12px; }
        .monthly-payment-table { margin-top:0; background:#101214; border:1px solid #292c30; }
        .monthly-payment-table td strong { color:#f2f3f4; }
        .monthly-payment-table .current-month td { background:rgba(255,140,0,.06); }
        .monthly-payment-empty { padding:24px; color:#81868d; text-align:center; }
        @media (max-width:900px) { .users-create-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .users-create-grid .result-card { grid-column:1/-1; } }
        @media (max-width:600px) { .users-heading { align-items:flex-start; flex-direction:column; } .users-create-grid { grid-template-columns:1fr; } .users-create-grid .result-card { grid-column:auto; } .users-filter-actions { align-items:flex-start; flex-direction:column; } .users-table-meta { align-items:flex-start; flex-direction:column; } #userTable { min-width:680px; } }

        /* Enterprise refinement */
        body { background: #0e0f11; color: #e8eaed; font-size: 14px; }
        #admin-content { max-width: 1680px; margin: 0 auto; grid-template-columns: 220px minmax(0, 1fr); gap: 0 24px; padding: 24px 30px 40px; }
        .admin-header { min-height: 54px; padding-bottom: 18px; border-bottom: 1px solid #292c30; margin-bottom: 22px; }
        .brand-mark { width: 32px; height: 32px; border-radius: 8px; font-size: 21px; }
        .brand-lockup { gap: 10px; }
        .brand-lockup h1 { font-size: 17px; font-weight: 650; letter-spacing: 0; }
        .brand-lockup small { font-size: 11px; color: #81868d; }
        .tab-bar { border-radius: 10px; padding: 8px; background: #141619; border-color: #292c30; top: 24px; }
        .tab-bar button { border-radius: 7px; font-size: 13px; padding: 10px 11px; }
        .tab-bar button.active { background: #2a1c0d; color: #ff9d1a; border-color: #5c3a16; }
        #admin-content > [id^="tab-content-"] { background: transparent; border: 0; padding: 0; border-radius: 0; }
        #admin-content > [id^="tab-content-"] > h2 { font-size: 22px; font-weight: 650; margin: 0 0 5px; }
        #tab-content-dashboard > h2::after { content: 'Monitor subscription activity and account health'; display: block; color: #81868d; font-size: 12px; font-weight: 400; letter-spacing: 0; margin-top: 7px; }
        #tab-content-dashboard > div:first-of-type { margin: 22px 0 16px !important; padding: 12px 14px; background: #141619; border: 1px solid #292c30; border-radius: 8px; }
        #tab-content-dashboard > div:first-of-type label { color: #9ca1a8 !important; font-size: 12px; }
        #dashboard-cards { margin-bottom: 20px; grid-template-columns: repeat(6, minmax(130px, 1fr)); gap: 10px; }
        .dashboard-card { min-width: 0; min-height: 96px; padding: 14px; border-radius: 8px; background: #141619; border-color: #292c30; }
        .dashboard-card .metric-label { font-size: 10px; color: #92979e; letter-spacing: .05em; }
        .dashboard-card strong { font-size: 24px; font-weight: 650; }
        #tab-content-users h3, #tab-content-locations h3, #tab-content-activity h2 { font-weight: 600; }
        #tab-content-users > div:first-child { display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(190px, .7fr); gap: 12px !important; margin-bottom: 20px !important; }
        #tab-content-users > div:first-child > div { padding: 16px; border: 1px solid #292c30; border-radius: 8px; background: #141619; }
        #tab-content-users > div:first-child h3 { margin: 0 0 10px; font-size: 13px; color: #d7d9dc; }
        #tab-content-users > div:nth-of-type(2) { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
        #tab-content-users > div:nth-of-type(2) button { align-self: end; }
        #userTable, #activityTable, #expiredUsersTable, #locationAreaTable { background: #141619; border: 1px solid #292c30; border-radius: 8px; }
        th { font-size: 10px; font-weight: 650; letter-spacing: .07em; color: #92979e; background: #191b1f; }
        td { font-size: 13px; color: #d7d9dc; }
        .location-summary { grid-template-columns: repeat(3, minmax(150px, 1fr)); }
        .location-stat { border-radius: 8px; background: #141619; border-color: #292c30; }
        .location-stat strong { font-weight: 650; }
        #map { border-radius: 8px; border-color: #292c30; }
        .modal { background: #17191c; border: 1px solid #30343a; border-radius: 9px; }
        .modal-overlay { background: rgba(0,0,0,.66); }
        @media (max-width: 1100px) { #dashboard-cards { grid-template-columns: repeat(3, minmax(140px, 1fr)); } }
        @media (max-width: 900px) {
            #admin-content { padding: 16px; }
            .tab-bar { border-radius: 8px; }
            #tab-content-users > div:first-child { grid-template-columns: repeat(2, minmax(0, 1fr)); }
        }
        @media (max-width: 600px) {
            #admin-content { padding: 10px; }
            .admin-header { padding-bottom: 12px; }
            #dashboard-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
            #tab-content-users > div:first-child, #tab-content-users > div:nth-of-type(2) { grid-template-columns: 1fr; }
            .location-summary { grid-template-columns: 1fr; }
        }
        /* Corner presets are driven by --ui-radius-* tokens in applyCornerStyle. */
        .corner-setting { display: flex; align-items: center; justify-content: space-between; gap: 20px; max-width: 520px; padding: 16px; background: #141619; border: 1px solid #292c30; }
        .corner-setting label { color: #d7d9dc; font-weight: 600; }
        .corner-setting small { display: block; color: #81868d; font-weight: 400; margin-top: 4px; }
        .corner-setting select { width: 180px; margin: 0; }
        .settings-stack { display: grid; gap: 10px; max-width: 560px; }
        .theme-preview { width: 12px; height: 12px; display: inline-block; margin-right: 7px; vertical-align: -1px; background: var(--panda-orange); }
        /* Theme tokens are also applied inline by applyColorTheme so every control updates immediately. */
        body.theme-teal { --panda-orange: #16b8a6; --panda-orange-soft: rgba(22,184,166,.14); }
        body.theme-blue { --panda-orange: #4f8cff; --panda-orange-soft: rgba(79,140,255,.14); }
        body.theme-red { --panda-orange: #ef6262; --panda-orange-soft: rgba(239,98,98,.14); }
        body.theme-gold { --panda-orange: #e6b84f; --panda-orange-soft: rgba(230,184,79,.14); }
        body.theme-teal button:not(.logout-btn), body.theme-blue button:not(.logout-btn), body.theme-red button:not(.logout-btn), body.theme-gold button:not(.logout-btn),
        body.theme-teal .brand-mark, body.theme-blue .brand-mark, body.theme-red .brand-mark, body.theme-gold .brand-mark { background: var(--panda-orange); }
        body.theme-teal .tab-bar button.active, body.theme-blue .tab-bar button.active, body.theme-red .tab-bar button.active, body.theme-gold .tab-bar button.active { color: var(--panda-orange); border-color: var(--panda-orange-soft); background: var(--panda-orange-soft); }
        body.theme-teal .dashboard-card strong, body.theme-blue .dashboard-card strong, body.theme-red .dashboard-card strong, body.theme-gold .dashboard-card strong,
        body.theme-teal .location-stat strong, body.theme-blue .location-stat strong, body.theme-red .location-stat strong, body.theme-gold .location-stat strong { color: var(--panda-orange); }
        body.theme-teal input:focus, body.theme-teal select:focus, body.theme-teal textarea:focus, body.theme-blue input:focus, body.theme-blue select:focus, body.theme-blue textarea:focus, body.theme-red input:focus, body.theme-red select:focus, body.theme-red textarea:focus, body.theme-gold input:focus, body.theme-gold select:focus, body.theme-gold textarea:focus { border-color: var(--panda-orange); box-shadow: 0 0 0 3px var(--panda-orange-soft); }
        .action-grid .theme-danger { background: #3a1c1c !important; color: #ffb3b3 !important; border-color: #6a2a2a !important; }
        /* Navigation keeps a neutral surface; only the active item uses the theme accent. */
        body.theme-teal .tab-bar button:not(.active),
        body.theme-blue .tab-bar button:not(.active),
        body.theme-red .tab-bar button:not(.active),
        body.theme-gold .tab-bar button:not(.active) { background: #1a1d20 !important; color: #e4e7ea !important; }
        body.theme-teal .tab-bar button:not(.active)::before,
        body.theme-blue .tab-bar button:not(.active)::before,
        body.theme-red .tab-bar button:not(.active)::before,
        body.theme-gold .tab-bar button:not(.active)::before { color: #aeb5bc !important; }
        body.theme-teal .tab-bar button.active,
        body.theme-blue .tab-bar button.active,
        body.theme-red .tab-bar button.active,
        body.theme-gold .tab-bar button.active { color: var(--panda-orange) !important; background: var(--panda-orange-soft) !important; }
        body.theme-teal .tab-bar button.active::before,
        body.theme-blue .tab-bar button.active::before,
        body.theme-red .tab-bar button.active::before,
        body.theme-gold .tab-bar button.active::before { color: var(--panda-orange) !important; }
        .action-cell { min-width: 330px; vertical-align: top; }
        .action-grid { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
        .action-grid button { margin: 0; padding: 7px 10px; font-size: 12px; line-height: 1.2; white-space: nowrap; }
        .chart-panel { background: linear-gradient(145deg, #171a1e 0%, #121416 100%); border: 1px solid #30353b; padding: 20px; margin: 0 0 20px; border-radius: 12px; box-shadow: 0 14px 35px rgba(0,0,0,.18); }
        .chart-panel-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; margin-bottom: 18px; }
        .chart-panel-title { display: flex; align-items: flex-start; gap: 11px; }
        .chart-panel-title::before { content: ''; width: 4px; min-width: 4px; height: 34px; margin-top: 2px; border-radius: 99px; background: linear-gradient(180deg, var(--panda-orange), #4f8cff); }
        .chart-panel h3 { margin: 0; font-size: 15px; font-weight: 700; letter-spacing: -.01em; color: #f2f4f6; }
        .chart-panel small { color: #8e969f; }
        .chart-panel-title small { display: block; margin-top: 5px; font-size: 11px; }
        .chart-legend { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: flex-end; padding-top: 2px; }
        .chart-legend-item { display: inline-flex; align-items: center; gap: 6px; color: #b9c0c7; font-size: 11px; white-space: nowrap; }
        .chart-legend-dot { width: 8px; height: 8px; border-radius: 3px; display: inline-block; }
        .chart-legend-dot.users { background: var(--panda-orange); }
        .chart-legend-dot.revenue { background: #4f8cff; }
        .chart-wrap { height: 290px; position: relative; padding: 4px 2px 0; }
        .map-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 14px 0 10px; }
        .map-toolbar label { display: inline-flex; align-items: center; gap: 8px; color: #c7cbd0; font-size: 12px; }
        .map-toolbar input[type="checkbox"] { width: auto; margin: 0; accent-color: var(--panda-orange); }
        @media (max-width: 600px) { .map-toolbar { align-items: flex-start; flex-direction: column; } }
        .live-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 12px 0 18px; padding: 10px 12px; background: #141619; border: 1px solid #292c30; }
        .live-status { display: inline-flex; align-items: center; gap: 7px; color: #aeb5bc; font-size: 12px; }
        .live-status::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: #81868d; }
        .live-status.live::before { background: #39d98a; box-shadow: 0 0 0 3px rgba(57,217,138,.12); }
        .live-status.offline::before { background: #ff6b6b; }
        .live-actions { display: flex; align-items: center; gap: 8px; }
        .live-actions select, .live-actions button { width: auto; margin: 0; padding: 8px 10px; font-size: 12px; }
        @media (max-width: 600px) { .live-toolbar { align-items: flex-start; flex-direction: column; } .live-actions { width: 100%; } .live-actions select, .live-actions button { flex: 1; } }
        @media (max-width: 600px) { .chart-panel { padding: 14px; } .chart-wrap { height: 240px; } .chart-panel-header { align-items: flex-start; flex-direction: column; gap: 10px; } .chart-legend { justify-content: flex-start; } }
        /* Runtime resize safety for charts, maps, and narrow containers. */
        #map, .chart-panel, .chart-wrap, canvas { width: 100%; max-width: 100%; min-width: 0; }
        .table-wrap { max-width: 100%; }

        /* Panda Enterprise UI refresh — visual-only layer; existing IDs and JS remain unchanged. */
        :root {
            --panda-black: #07090d;
            --panda-panel: #0e131b;
            --panda-panel-2: #131a24;
            --panda-border: rgba(148, 163, 184, .16);
            --panda-text: #f6f8fb;
            --panda-muted: #8d99aa;
            --panda-orange: #ff9d2e;
            --panda-orange-soft: rgba(255, 157, 46, .13);
            --panda-green: #43d69a;
            --panda-red: #ff7474;
            --panda-blue: #6f9cff;
            --panda-shadow: 0 18px 55px rgba(0,0,0,.22);
        }
        html { background: #07090d; }
        body { background: radial-gradient(circle at 82% -10%, rgba(70, 105, 180, .13), transparent 30%), linear-gradient(135deg, #07090d 0%, #0a0e14 52%, #07090d 100%); color: var(--panda-text); }
        button { border-radius: 10px; box-shadow: 0 6px 16px rgba(0,0,0,.14); }
        button:hover { box-shadow: 0 9px 22px rgba(0,0,0,.2); }
        input, select, textarea { background: rgba(5, 8, 13, .72); border-color: var(--panda-border); color: #f7f9fc; }
        input::placeholder, textarea::placeholder { color: #657286; }
        #admin-content { grid-template-columns: 224px minmax(0, 1fr); gap: 22px; max-width: 1680px; margin: 0 auto; padding: 26px 30px 34px; }
        .admin-header { min-height: 66px; margin-bottom: 4px; padding: 0 2px 18px; border-bottom: 1px solid rgba(148,163,184,.12); }
        .brand-lockup { gap: 13px; }
        .brand-mark, .auth-brand-mark { background: linear-gradient(135deg, #ffb14a, #f27518); color: #101318; box-shadow: 0 10px 28px rgba(255,157,46,.22); }
        .brand-mark { width: 42px; height: 42px; border-radius: 13px; font-size: 27px; }
        .brand-lockup h1 { font-size: 22px; letter-spacing: -.04em; }
        .brand-lockup small { color: #77859a; font-size: 11px; letter-spacing: .02em; }
        .logout-btn { border-color: var(--panda-border); color: #c4ccd8; background: rgba(255,255,255,.035); }
        .tab-bar { gap: 5px; padding: 10px; background: rgba(14,19,27,.86); border-color: var(--panda-border); border-radius: 15px; box-shadow: var(--panda-shadow); }
        .tab-bar::before { content: 'WORKSPACE'; padding: 8px 11px 10px; color: #68778b; font-size: 10px; font-weight: 800; letter-spacing: .14em; }
        .tab-bar button { position: relative; min-height: 42px; padding: 10px 12px 10px 40px; border-radius: 9px; color: #8f9bad; font-size: 12px; }
        .tab-bar button:hover { background: rgba(255,255,255,.045); color: #f4f7fb; }
        .tab-bar button.active { background: linear-gradient(90deg, rgba(255,157,46,.18), rgba(255,157,46,.07)); color: #ffb14a; border-color: rgba(255,157,46,.24); }
        #admin-content > [id^="tab-content-"] { background: rgba(14,19,27,.8); border-color: var(--panda-border); border-radius: 17px; box-shadow: var(--panda-shadow); padding: 28px; }
        #admin-content > [id^="tab-content-"] > h2 { margin: 0 0 8px; font-size: 27px; letter-spacing: -.045em; }
        #tab-content-dashboard > h2::after { content: '  /  Overview'; color: #657286; font-size: 12px; font-weight: 500; letter-spacing: .02em; margin-left: 8px; }
        #tab-content-dashboard > div[style*="display: flex"] { margin: 18px 0 14px !important; padding: 13px 14px; background: rgba(19,26,36,.72); border: 1px solid var(--panda-border); border-radius: 12px; }
        #tab-content-dashboard > div[style*="display: flex"] label { color: #8997a9 !important; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; }
        #tab-content-dashboard > div[style*="display: flex"] input { width: auto; min-width: 145px; margin: 0 !important; }
        #dashboard-cards { gap: 13px; margin: 16px 0 18px; }
        .dashboard-card { position: relative; overflow: hidden; min-height: 118px; padding: 18px 19px; background: linear-gradient(145deg, rgba(24,33,46,.96), rgba(14,19,27,.96)); border-color: var(--panda-border); border-radius: 14px; box-shadow: 0 10px 28px rgba(0,0,0,.13); }
        .dashboard-card::after { content: ''; position: absolute; width: 88px; height: 88px; right: -32px; bottom: -42px; border-radius: 50%; border: 1px solid rgba(255,255,255,.07); }
        .dashboard-card .metric-label { color: #8290a3; font-size: 10px; font-weight: 800; letter-spacing: .11em; }
        .dashboard-card strong { margin-top: 8px; font-size: 31px; }
        .live-toolbar { margin: 0 0 17px; padding: 9px 12px; background: rgba(19,26,36,.56); border-color: var(--panda-border); border-radius: 10px; }

        .dashboard-card { cursor: pointer; }
        .dashboard-card:focus-visible { outline: 2px solid var(--panda-orange); outline-offset: 3px; }
        .dashboard-card::before { content: 'View details'; position: absolute; right: 14px; top: 12px; color: #758399; font-size: 10px; opacity: 0; transform: translateY(-3px); transition: .18s ease; }
        .dashboard-card:hover::before, .dashboard-card:focus-visible::before { opacity: 1; transform: translateY(0); }
        .kpi-details-panel { margin: 0 0 20px; padding: 20px; background: linear-gradient(145deg, rgba(19,26,36,.9), rgba(12,17,24,.94)); border: 1px solid var(--panda-border); border-radius: 14px; box-shadow: 0 8px 24px rgba(0,0,0,.12); }
        .kpi-details-header { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin-bottom:12px; }
        .kpi-details-header h3 { margin:0 0 5px; font-size:16px; }
        .kpi-details-header p { margin:0; color:#7e8b9e; font-size:12px; }
        .kpi-details-close { padding:7px 10px; background:rgba(255,255,255,.06); color:#cbd5e1; border:1px solid var(--panda-border); }
        .kpi-details-meta { margin:0 0 10px; color:#9aa7b8; font-size:12px; }
        .kpi-details-panel table { margin-top:0; }
        .kpi-details-empty { padding:24px; color:#81868d; text-align:center; }
        .chart-panel, .monthly-payment-panel, .users-filter-panel, .result-card, .panel { background: rgba(19,26,36,.68); border-color: var(--panda-border); border-radius: 14px; box-shadow: 0 8px 24px rgba(0,0,0,.1); }
        .chart-panel { padding: 20px; }
        .monthly-payment-panel { margin-top: 17px; padding: 20px; }
        .monthly-payment-header h3, .chart-panel h3 { font-size: 16px; letter-spacing: -.02em; }
        .monthly-payment-header p { color: #7e8b9e; }
        table { border: 1px solid var(--panda-border); border-radius: 11px; overflow: hidden; }
        th { background: rgba(31,42,57,.75); color: #8e9db0; font-size: 10px; letter-spacing: .1em; }
        td { color: #cbd3de; border-color: rgba(148,163,184,.11); font-size: 12px; }
        tr:hover td { background: rgba(255,255,255,.035); }
        .users-heading { margin-bottom: 22px; }
        .users-heading h2, #tab-content-activity h2, #tab-content-locations h2, #tab-content-addons h2, #tab-content-settings h2 { margin-bottom: 7px; }
        .users-heading p, #tab-content-locations > p, #tab-content-addons > p { color: #8491a3 !important; }
        .users-create-grid { gap: 14px; margin-bottom: 18px; }
        .users-create-grid > div { padding: 17px; background: rgba(19,26,36,.68); border: 1px solid var(--panda-border); border-radius: 13px; }
        .users-create-grid h3, .users-filter-panel h3 { margin: 0 0 7px; font-size: 14px; }
        .users-create-grid input, .users-create-grid textarea { margin-top: 8px; }
        .users-create-grid button { margin-top: 8px; }
        .users-filter-panel { padding: 18px; }
        .users-filter-panel p { color: #7f8c9e; }
        .users-filter-actions { margin-top: 13px; }
        .users-table-meta { margin: 18px 0 10px; color: #9aa7b8; }
        .addon-toolbar { padding: 16px; background: rgba(19,26,36,.68); border: 1px solid var(--panda-border); border-radius: 13px; align-items: flex-end; }
        .status-pill { border: 1px solid currentColor; }
        .settings-stack { display: grid; gap: 12px; max-width: 760px; margin-top: 20px; }
        .corner-setting { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 17px 18px; background: rgba(19,26,36,.68); border: 1px solid var(--panda-border); border-radius: 13px; }
        .corner-setting label { color: #e6ebf2; font-weight: 700; }
        .corner-setting small { display: block; margin-top: 5px; color: #7d8b9e; }
        .corner-setting select { width: auto; min-width: 180px; margin: 0; }
        .modal { background: #121923; border: 1px solid var(--panda-border); border-radius: 16px; box-shadow: 0 28px 80px rgba(0,0,0,.5); }
        .modal h3 { margin-top: 0; font-size: 20px; }
        .close-btn { border: 1px solid var(--panda-border); background: rgba(255,255,255,.06); color: #cbd5e1; }
        #auth-section { background: linear-gradient(135deg, #111820 0%, #0b1017 100%); border-color: var(--panda-border); box-shadow: 0 30px 100px rgba(0,0,0,.55); }
        .auth-brand-panel { background: linear-gradient(155deg, rgba(255,157,46,.15), rgba(255,157,46,.025) 58%, transparent); }
        .auth-copy h1 { letter-spacing: -.055em; }
        .auth-form-panel { background: rgba(5,8,13,.18); }
        .auth-form button { background: linear-gradient(135deg, #ffb14a, #f27518); }
        @media (max-width: 900px) { #admin-content { padding: 16px; } #admin-content > [id^="tab-content-"] { padding: 20px; } }
        @media (max-width: 600px) { #admin-content > [id^="tab-content-"] { padding: 16px; } .corner-setting { align-items: flex-start; flex-direction: column; gap: 12px; } .corner-setting select { width: 100%; } #tab-content-dashboard > div[style*="display: flex"] input { min-width: 0; flex: 1; } }


        /* Panda design system: shared hierarchy, spacing, surfaces, and button roles. */
        :root {
            --ui-space-1: 6px; --ui-space-2: 10px; --ui-space-3: 14px;
            --ui-space-4: 18px; --ui-space-5: 24px;
            --ui-radius-sm: 9px; --ui-radius-md: 13px; --ui-radius-lg: 16px;
            --ui-radius-button: 9px; --ui-radius-table: 9px;
            --ui-control-height: 40px;
        }
        body[data-theme] {
            background: var(--theme-background) fixed !important;
            color: var(--theme-text); color-scheme: dark;
            font-size: 14px; line-height: 1.5;
        }
        body[data-theme] #admin-content { gap: 0 22px; max-width: 1680px; margin: 0 auto; padding: 24px 28px 32px; }
        body[data-theme] .admin-header { min-height: 64px; margin-bottom: 8px; padding: 0 2px 16px; border-bottom: 1px solid var(--theme-border); }
        body[data-theme] #admin-content > [id^="tab-content-"] {
            min-width: 0; padding: 24px; background: var(--theme-panel) !important;
            color: var(--theme-text); border: 1px solid var(--theme-border); border-radius: var(--ui-radius-lg);
            box-shadow: none !important;
        }
        body[data-theme] .tab-bar {
            gap: 5px; padding: 10px; background: var(--theme-panel) !important;
            border: 1px solid var(--theme-border); border-radius: var(--ui-radius-lg);
            box-shadow: none !important;
        }
        body[data-theme] .dashboard-card,
        body[data-theme] .panel, body[data-theme] .chart-panel,
        body[data-theme] .monthly-payment-panel, body[data-theme] .users-filter-panel,
        body[data-theme] .result-card, body[data-theme] .kpi-details-panel,
        body[data-theme] .live-toolbar, body[data-theme] .corner-setting,
        body[data-theme] .ops-section, body[data-theme] .ops-stat,
        body[data-theme] .message-template-panel, body[data-theme] .payment-history-editor,
        body[data-theme] .template-preview, body[data-theme] .profile-field,
        body[data-theme] .glass-control-setting {
            color: var(--theme-text); background: var(--theme-panel) !important;
            border: 1px solid var(--theme-border); border-radius: var(--ui-radius-md); box-shadow: none !important;
        }
        body[data-theme] #auth-section, body[data-theme] #map, body[data-theme] .table-wrap,
        body[data-theme] .map-toolbar, body[data-theme] .row-actions-menu,
        body[data-theme] .location-stat, body[data-theme] .location-table,
        body[data-theme] .users-create-grid > div, body[data-theme] .activity-filter-panel,
        body[data-theme] .profile-section, body[data-theme] .monthly-payment-header,
        body[data-theme] .payment-history-wrap, body[data-theme] .users-table-meta,
        body[data-theme] .torbox-panel { border-radius: var(--ui-radius-md); }
        body[data-theme] #tab-content-dashboard > div[style*="display: flex"] { border-radius: var(--ui-radius-md); }
        body[data-theme] .panda-count-marker { border-radius: 50%; }
        body[data-theme] .dashboard-card, body[data-theme] .ops-stat,
        body[data-theme] .profile-field, body[data-theme] .payment-history-editor,
        body[data-theme] .template-preview, body[data-theme] .message-template-panel,
        body[data-theme] .glass-control-setting { background: var(--theme-raised) !important; }
        body[data-theme] .dashboard-card { min-width: 0; min-height: 126px; padding: 17px 18px; gap: 6px; border-inline-start: 3px solid var(--panda-orange) !important; box-shadow: none !important; }
        body[data-theme] .dashboard-card::after { display: none; }
        body[data-theme] #dashboard-cards { grid-template-columns: repeat(auto-fit, minmax(145px, 1fr)); gap: var(--ui-space-3); }
        body[data-theme] .dashboard-card[data-tone="positive"] { border-inline-start-color: #39c98b !important; }
        body[data-theme] .dashboard-card[data-tone="warning"] { border-inline-start-color: #edbd59 !important; }
        body[data-theme] .dashboard-card[data-tone="danger"] { border-inline-start-color: #ef7777 !important; }
        body[data-theme] .dashboard-card[data-tone="informative"] { border-inline-start-color: #78a8fa !important; }
        body[data-theme] .dashboard-card[data-tone="positive"] strong { color: #58d99b !important; }
        body[data-theme] .dashboard-card[data-tone="warning"] strong { color: #f1c96d !important; }
        body[data-theme] .dashboard-card[data-tone="danger"] strong { color: #ff9292 !important; }
        body[data-theme] .dashboard-card[data-tone="informative"] strong { color: #9bbcff !important; }
        body[data-theme] .dashboard-card strong { margin-top: 2px; font-size: clamp(21px, 1.9vw, 29px); line-height: 1.08; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
        body[data-theme] .dashboard-card .metric-revenue-value { display:flex; align-items:baseline; gap:5px; white-space:nowrap; font-size:clamp(16px, 1.45vw, 21px); letter-spacing:-.035em; }
        body[data-theme] .dashboard-card .metric-currency { color:var(--theme-muted); font-size:11px; font-weight:700; letter-spacing:0; }
        body[data-theme] .dashboard-card .metric-label { font-size: 10px; font-weight: 800; letter-spacing: .09em; }
        body[data-theme] .dashboard-card .metric-context { margin-top: auto; color: var(--theme-muted); font-size: 11px; line-height: 1.25; }
        body[data-theme] .nav-icon { position: absolute; left: 13px; top: 50%; width: 16px; height: 16px; transform: translateY(-50%); fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
        body[data-theme] .tab-bar button:not(.active) .nav-icon { color: var(--theme-muted); }
        body[data-theme] .tab-bar button.active .nav-icon { color: var(--panda-orange); }
        body[data-theme] #dashboard-cards.is-refreshing { opacity: .72; }
        body[data-theme] .dashboard-state, body[data-theme] .dashboard-empty-state { grid-column: 1 / -1; display: flex; align-items: center; gap: 12px; padding: 16px 18px; background: var(--theme-raised); border: 1px solid var(--theme-border); border-radius: var(--ui-radius-md); color: var(--theme-text); }
        body[data-theme] .dashboard-state-copy, body[data-theme] .dashboard-empty-copy { display: grid; gap: 3px; }
        body[data-theme] .dashboard-state-copy span, body[data-theme] .dashboard-empty-copy span { color: var(--theme-muted); font-size: 12px; }
        body[data-theme] .dashboard-state-error { border-color: rgba(239,119,119,.4); }
        body[data-theme] .dashboard-state-error .state-mark { background: #ef7777; }
        body[data-theme] .dashboard-load-notice { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 0 0 12px; padding: 10px 13px; color: #ffd5d5; background: rgba(239,119,119,.1); border: 1px solid rgba(239,119,119,.28); border-radius: var(--ui-radius-md); font-size: 12px; }
        body[data-theme] .dashboard-state .state-mark { width: 9px; height: 9px; flex: 0 0 9px; border-radius: 50%; background: var(--panda-orange); }
        body[data-theme] .dashboard-empty-state { margin: -4px 0 16px; }
        body[data-theme] .dashboard-empty-state button { margin-left: auto; white-space: nowrap; }
        body[data-theme] .chart-wrap { position: relative; }
        body[data-theme] .chart-empty-state { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; padding: 18px; text-align: center; color: var(--theme-text); background: var(--theme-panel); border: 1px dashed var(--theme-border); border-radius: var(--ui-radius-md); }
        body[data-theme] .chart-empty-state span { max-width: 390px; color: var(--theme-muted); font-size: 12px; line-height: 1.5; }
        body[data-theme] .chart-empty-state[hidden], body[data-theme] .dashboard-load-notice[hidden], body[data-theme] .dashboard-empty-state[hidden] { display: none !important; }
        body[data-theme] .dashboard-card .metric-label,
        body[data-theme] .brand-lockup small, body[data-theme] .auth-brand small,
        body[data-theme] .auth-copy p, body[data-theme] .auth-footnote,
        body[data-theme] .auth-form > p, body[data-theme] .auth-label,
        body[data-theme] .tab-bar::before, body[data-theme] .tab-bar button:not(.active),
        body[data-theme] .dashboard-card::before, body[data-theme] .chart-panel small,
        body[data-theme] .chart-legend-item, body[data-theme] .map-toolbar label,
        body[data-theme] .live-status, body[data-theme] .corner-setting small,
        body[data-theme] .monthly-payment-header p, body[data-theme] .users-heading p,
        body[data-theme] #tab-content-locations > p, body[data-theme] #tab-content-addons > p,
        body[data-theme] .kpi-details-header p, body[data-theme] .kpi-details-meta,
        body[data-theme] .profile-header p, body[data-theme] .payment-history-heading small,
        body[data-theme] .payment-entry-grid label, body[data-theme] .muted,
        body[data-theme] th { color: var(--theme-muted) !important; }
        body[data-theme] p, body[data-theme] li, body[data-theme] td,
        body[data-theme] .profile-field, body[data-theme] .auth-form,
        body[data-theme] .corner-setting label { color: var(--theme-text); }
        body[data-theme] h1, body[data-theme] h2, body[data-theme] h3,
        body[data-theme] h4, body[data-theme] .brand-lockup strong,
        body[data-theme] .dashboard-card strong, body[data-theme] .profile-header h3,
        body[data-theme] .payment-history-heading strong { color: var(--theme-text) !important; }
        body[data-theme] #admin-content > [id^="tab-content-"] > h2 { margin: 0 0 8px; font-size: 25px; line-height: 1.2; letter-spacing: -.035em; }
        body[data-theme] h3 { font-size: 16px; line-height: 1.3; }
        body[data-theme] small { font-size: 12px; line-height: 1.45; }
        body[data-theme] .tab-bar button { min-height: 40px; border-radius: var(--ui-radius-button); }
        body[data-theme] .tab-bar button { padding-left: 40px; }
        body[data-theme] #resetDashboardFilter { color: var(--theme-text) !important; background: rgba(255,255,255,.06) !important; border: 1px solid var(--theme-border) !important; }
        body[data-theme] .tab-bar button:not(.active) { background: transparent !important; }
        body[data-theme] .tab-bar button:hover:not(.active) { background: rgba(255,255,255,.055) !important; color: var(--theme-text) !important; }
        body[data-theme] .tab-bar button.active { color: var(--panda-orange) !important; background: var(--panda-orange-soft) !important; border-color: var(--theme-border) !important; }
        body[data-theme] .brand-mark, body[data-theme] .auth-brand-mark { background: var(--panda-orange) !important; color: #111318 !important; box-shadow: none !important; }
        body[data-theme] input:not([type="checkbox"]):not([type="range"]), body[data-theme] select,
        body[data-theme] textarea { min-height: var(--ui-control-height); padding: 9px 12px; background: var(--theme-input) !important; border: 1px solid var(--theme-border) !important; border-radius: var(--ui-radius-sm); color: var(--theme-text) !important; }
        body[data-theme] textarea { min-height: 90px; }
        body[data-theme] input::placeholder, body[data-theme] textarea::placeholder { color: var(--theme-muted) !important; opacity: .9; }
        body[data-theme] input:focus, body[data-theme] select:focus, body[data-theme] textarea:focus { border-color: var(--panda-orange) !important; box-shadow: 0 0 0 3px var(--panda-orange-soft) !important; }
        body[data-theme] table { width: 100%; border: 1px solid var(--theme-border); border-radius: var(--ui-radius-table); overflow: hidden; }
        body[data-theme] th, body[data-theme] td { padding: 11px 12px; border-color: var(--theme-border) !important; }
        body[data-theme] th { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
        body[data-theme] td { color: var(--theme-text) !important; }
        body[data-theme] tr:hover td { background: rgba(255,255,255,.045) !important; }
        body[data-theme] button { min-height: 36px; padding: 8px 12px; border-radius: var(--ui-radius-button); font-weight: 650; text-shadow: none; box-shadow: none; transition: background-color .16s ease, border-color .16s ease, color .16s ease, transform .16s ease; }
        body[data-theme] button:focus-visible, body[data-theme] a:focus-visible, body[data-theme] input:focus-visible, body[data-theme] select:focus-visible { outline: 2px solid var(--panda-orange); outline-offset: 2px; }
        body[data-theme] button:not(.logout-btn):not(.close-btn):not(.tab-bar button):not(.template-token):not(.payment-delete):not(.detail-whatsapp-btn):not(.theme-danger):not(.kpi-details-close):not(.ops-stat button) { background: var(--panda-orange); color: #111318; border: 1px solid transparent; }
        body[data-theme] button:not(.logout-btn):not(.close-btn):not(.tab-bar button):not(.template-token):not(.payment-delete):not(.detail-whatsapp-btn):not(.theme-danger):not(.kpi-details-close):not(.ops-stat button):hover { filter: brightness(1.06); transform: translateY(-1px); }
        body[data-theme] .logout-btn, body[data-theme] .close-btn, body[data-theme] .kpi-details-close,
        body[data-theme] .template-token, body[data-theme] .detail-whatsapp-btn,
        body[data-theme] .ops-stat button, body[data-theme] .action-grid button:not(.theme-danger),
        body[data-theme] .profile-actions button, body[data-theme] .modal-actions button:last-child {
            color: var(--theme-text) !important; background: rgba(255,255,255,.055) !important;
            border: 1px solid var(--theme-border) !important;
        }
        body[data-theme] .theme-danger, body[data-theme] .payment-delete { color: #ffd0d0 !important; background: rgba(177,54,65,.24) !important; border: 1px solid rgba(255,130,140,.34) !important; }
        body[data-theme] .modal { max-height: 88vh; overflow-y: auto; color: var(--theme-text); background: var(--theme-panel) !important; border: 1px solid var(--theme-border); border-radius: var(--ui-radius-lg); box-shadow: none !important; }
        /* Blur is entirely omitted from the render tree at 0px; opt-in only. */
        body[data-theme].glass-blur-enabled .tab-bar,
        body[data-theme].glass-blur-enabled #admin-content > [id^="tab-content-"],
        body[data-theme].glass-blur-enabled .modal {
            -webkit-backdrop-filter: blur(var(--glass-blur));
            backdrop-filter: blur(var(--glass-blur));
        }
        body[data-theme] .modal-overlay { background: rgba(2,4,8,.68) !important; }
        body[data-theme] .auth-brand-panel { background: linear-gradient(155deg,var(--panda-orange-soft),transparent 74%) !important; }
        body[data-theme] .auth-form-panel { background: var(--theme-panel); }
        body[data-theme] .auth-form input { background: var(--theme-input) !important; }
        body[data-theme] .success { color: #8fe5b4 !important; }
        body[data-theme] .error { color: #ff9c9c !important; }
        .glass-control-setting { display:flex; align-items:center; justify-content:space-between; gap:22px; max-width:560px; padding:15px 16px; }
        .glass-control-copy label { color:var(--theme-text); font-weight:700; }
        .glass-control-copy small { display:block; margin-top:5px; color:var(--theme-muted); line-height:1.45; }
        .glass-control-input { display:flex; align-items:center; gap:12px; width:min(290px,48%); flex:0 0 auto; }
        .glass-control-input input[type="range"] { width:100%; margin:0; padding:0; background:transparent !important; border:0 !important; box-shadow:none !important; accent-color:var(--panda-orange); cursor:pointer; }
        .glass-control-input output { min-width:42px; color:var(--theme-text); font-variant-numeric:tabular-nums; text-align:right; }
        @media (max-width:700px) {
            body[data-theme] #admin-content { padding:14px; grid-template-columns:1fr; }
            body[data-theme] .glass-control-setting { align-items:flex-start; flex-direction:column; gap:10px; }
            body[data-theme] .glass-control-input { width:100%; }
            body[data-theme] #admin-content > [id^="tab-content-"] { padding:16px; }
        }
    

body{font-family:Arial,sans-serif;color:#161616;max-width:680px;margin:40px auto;padding:0 24px}h1{font-size:24px;margin:0 0 4px}h2{font-size:14px;color:#666;font-weight:normal;margin:0 0 28px}.brand{border-bottom:3px solid #ff8c00;padding-bottom:16px;margin-bottom:24px}.row{display:flex;justify-content:space-between;gap:20px;padding:11px 0;border-bottom:1px solid #ddd}.label{color:#666}.value{font-weight:bold;text-align:right;overflow-wrap:anywhere}.code{font-size:28px;letter-spacing:5px;color:#d86f00;margin:18px 0}.footer{margin-top:30px;color:#777;font-size:12px;text-align:center}@media print{body{margin:0 auto}}

/* Corrected dashboard width: respect the available parent width */
html, body {
    width: 100%;
    min-width: 0;
}

#admin-content,
body[data-dashboard-layout="boxed"] #admin-content,
body[data-dashboard-layout="fluid"] #admin-content {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin: 0;
    padding: 26px 30px 34px;
}

#admin-content > [id^="tab-content-"] {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

@media (max-width: 900px) {
    #admin-content,
    body[data-dashboard-layout="boxed"] #admin-content,
    body[data-dashboard-layout="fluid"] #admin-content {
        padding: 16px;
    }
}

@media (max-width: 600px) {
    #admin-content,
    body[data-dashboard-layout="boxed"] #admin-content,
    body[data-dashboard-layout="fluid"] #admin-content {
        padding: 10px;
    }
}

/* Fixed dashboard viewport and overflow */
html, body {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin: 0;
    overflow-x: hidden;
}

#admin-content,
body[data-dashboard-layout="boxed"] #admin-content,
body[data-dashboard-layout="fluid"] #admin-content {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin: 0;
    padding: 26px 30px 34px;
    box-sizing: border-box;
}

#admin-content > [id^="tab-content-"] {
    min-width: 0;
    max-width: 100%;
}

#admin-content img,
#admin-content canvas,
#admin-content table {
    max-width: 100%;
}

#admin-content table {
    display: block;
    overflow-x: auto;
}

@media (max-width: 900px) {
    #admin-content,
    body[data-dashboard-layout="boxed"] #admin-content,
    body[data-dashboard-layout="fluid"] #admin-content {
        padding: 16px;
    }
}

@media (max-width: 600px) {
    #admin-content,
    body[data-dashboard-layout="boxed"] #admin-content,
    body[data-dashboard-layout="fluid"] #admin-content {
        padding: 10px;
    }
}