@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,700;0,900;1,400;1,700&family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;1,300;1,400&display=swap');/* ══════════════════════════════════════════════════════════════════════════════
   ALL WHITE THEME
   ══════════════════════════════════════════════════════════════════════════════ */

html[data-theme="allwhite"] {
  --primary-color: #6b7280;
  --primary-dark: #4b5563;
  --primary-light: #9ca3af;
  --secondary-color: #d1d5db;
  --secondary-dark: #9ca3af;
  --accent-color: #e5e7eb;
  --text-primary: #111827;
  --text-secondary: #6b7280;
  --text-light: #9ca3af;
  --bg-primary: #ffffff;
  --bg-secondary: #fafafa;
  --bg-dark: #f9fafb;
  --border-color: #e5e7eb;
  --success: #10b981;
  --warning: #f59e0b;
  --danger: #ef4444;
  --info: #6b7280;
  --card-bg:            #ffffff;
  --input-bg:           #ffffff;
  --sidebar-bg:         #f8f8f8;
  --table-header-bg:    #f8f8f8;
  --hover-bg:           #f5f5f5;
  --badge-bg:           #e5e7eb;
  --img-placeholder-bg: #f5f5f5;
  --error-color:        #ef4444;
}

html[data-theme="allwhite"] body {
  background-color: #ffffff;
  color: #111827;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  font-weight: 400;
}

/* ── Layout ─────────────────────────────────────────────────────────────── */

html[data-theme="allwhite"] .layout-main {
  background: #ffffff;
}

html[data-theme="allwhite"] .header {
  background: #fafafa;
  border-bottom: 1px solid #e5e7eb;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

html[data-theme="allwhite"] .header-logo-img {
  filter: brightness(0);
}

html[data-theme="allwhite"] .header-logo-suffix {
  color: #6b7280;
  border-left-color: #e5e7eb;
}

html[data-theme="allwhite"] .header-beta-badge {
  background: linear-gradient(135deg, #f3f4f6, #e5e7eb, #f3f4f6);
  background-size: 300% 300%;
  animation: betaShimmer 3s ease infinite;
  color: #6b7280;
  border: 1px solid #d1d5db;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

html[data-theme="allwhite"] .menu-toggle {
  color: #6b7280;
}

html[data-theme="allwhite"] .menu-toggle:hover {
  color: #111827;
}

html[data-theme="allwhite"] .header-user-info {
  color: #111827;
}

html[data-theme="allwhite"] .header-user-name,
html[data-theme="allwhite"] .user-name {
  color: #111827;
}

html[data-theme="allwhite"] .header-user-role,
html[data-theme="allwhite"] .user-role {
  color: #6b7280;
}

/* Rockstar Widget */
html[data-theme="allwhite"] .rockstar-widget-header {
  background: #e5e7eb !important;
  color: #111827 !important;
}

html[data-theme="allwhite"] .rockstar-widget-fab {
  background: #6b7280 !important;
  color: #ffffff !important;
}

html[data-theme="allwhite"] .user-avatar {
  background: #ffffff;
  border: 2px solid #d1d5db;
  color: #6b7280;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

html[data-theme="allwhite"] .btn-logout {
  background: #ffffff;
  color: #111827;
  border: 1px solid #e5e7eb;
}

html[data-theme="allwhite"] .btn-logout:hover {
  background: #f9fafb;
  border-color: #d1d5db;
}

html[data-theme="allwhite"] .logout-button {
  background: #ffffff;
  color: #111827;
  border: 1px solid #e5e7eb;
}

html[data-theme="allwhite"] .logout-button:hover {
  background: #f9fafb;
  border-color: #d1d5db;
}

html[data-theme="allwhite"] .btn-export-pdf {
  background: #ffffff;
  color: #6b7280;
  border: 1px solid #e5e7eb;
}

html[data-theme="allwhite"] .btn-export-pdf:hover {
  background: #f3f4f6;
  border-color: #d1d5db;
  color: #111827;
}

/* ── Sidebar ────────────────────────────────────────────────────────────── */

html[data-theme="allwhite"] .sidebar {
  background: #ffffff;
  border-right: 1px solid #e5e7eb;
}

html[data-theme="allwhite"] .sidebar-link {
  color: #6b7280;
  border-left: 2px solid transparent;
}

html[data-theme="allwhite"] .sidebar-link:hover {
  background: #f9fafb;
  color: #111827;
  border-left-color: #d1d5db;
}

html[data-theme="allwhite"] .sidebar-link.active {
  background: #f9fafb;
  color: #111827;
  border-left-color: #6b7280;
}

html[data-theme="allwhite"] .sidebar-icon {
  color: #9ca3af;
}

/* ── Scrollbars ── */
html[data-theme="allwhite"] ::-webkit-scrollbar-track {
  background: #ffffff;
}

html[data-theme="allwhite"] ::-webkit-scrollbar-thumb {
  background: #e5e7eb;
}

html[data-theme="allwhite"] ::-webkit-scrollbar-thumb:hover {
  background: #d1d5db;
}

/* ── Profile theme picker ───────────────────────────────────────────────── */

html[data-theme="allwhite"] .profile-themes {
  background: #ffffff;
  border: 1px solid #e5e7eb;
}

html[data-theme="allwhite"] .profile-theme-option {
  border-color: #e5e7eb;
}

html[data-theme="allwhite"] .profile-theme-option:hover {
  border-color: #d1d5db;
  background: #f9fafb;
}

html[data-theme="allwhite"] .profile-theme-option--active {
  border-color: #6b7280;
  box-shadow: 0 0 0 2px #f3f4f6;
  background: #fafafa;
}

html[data-theme="allwhite"] .profile-theme-name {
  color: #111827;
}

html[data-theme="allwhite"] .profile-theme-option--active .profile-theme-name {
  color: #111827;
  font-weight: 600;
}

/* ── Dashboard ──────────────────────────────────────────────────────────── */

html[data-theme="allwhite"] .stat-card,
html[data-theme="allwhite"] .dashboard-card,
html[data-theme="allwhite"] .health-section-row,
html[data-theme="allwhite"] .dashboard-manual-sync-box,
html[data-theme="allwhite"] .dashboard-schedule-row {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  color: #111827;
}

html[data-theme="allwhite"] .stat-card:hover,
html[data-theme="allwhite"] .dashboard-card:hover {
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

/* ── Reports ────────────────────────────────────────────────────────────── */

html[data-theme="allwhite"] .date-select,
html[data-theme="allwhite"] .sync-meta,
html[data-theme="allwhite"] .report-section {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  color: #111827;
}

/* ── Settings, Roles, Brand Flags ───────────────────────────────────────── */

html[data-theme="allwhite"] .settings-card,
html[data-theme="allwhite"] .role-card,
html[data-theme="allwhite"] .brand-flag-card {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  color: #111827;
}

/* ── Analytics ──────────────────────────────────────────────────────────── */

html[data-theme="allwhite"] .period-btn,
html[data-theme="allwhite"] .kpi-card,
html[data-theme="allwhite"] .analytics-card,
html[data-theme="allwhite"] .segment-card,
html[data-theme="allwhite"] .hub-card {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  color: #111827;
}

html[data-theme="allwhite"] .period-btn.active {
  background: #f3f4f6;
  border-color: #6b7280;
  color: #111827;
}

/* ── Monitoring ─────────────────────────────────────────────────────────── */

html[data-theme="allwhite"] .monitoring-section-header {
  color: #111827;
  border-color: #e5e7eb;
  background: #fafafa;
  border-left-color: #6b7280;
}

html[data-theme="allwhite"] .metric-card {
  background: #ffffff;
  border: 1px solid #e5e7eb;
}

html[data-theme="allwhite"] .metric-card-title {
  color: #111827;
  background: #fafafa;
  border-color: #e5e7eb;
}

html[data-theme="allwhite"] .metric-card-body {
  background: #ffffff;
}

html[data-theme="allwhite"] .btn-metric-filter,
html[data-theme="allwhite"] .btn-time-range,
html[data-theme="allwhite"] .btn-monitoring-refresh,
html[data-theme="allwhite"] .btn-monitoring-console {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  color: #6b7280;
}

html[data-theme="allwhite"] .btn-metric-filter:hover,
html[data-theme="allwhite"] .btn-time-range:hover {
  background: #f9fafb;
  border-color: #d1d5db;
}

html[data-theme="allwhite"] .btn-metric-filter.active,
html[data-theme="allwhite"] .btn-time-range.active {
  background: #f3f4f6;
  border-color: #6b7280;
  color: #111827;
}

/* ── Error Logs ─────────────────────────────────────────────────────────── */

html[data-theme="allwhite"] .logs-stat-card {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  color: #111827;
}

html[data-theme="allwhite"] .logs-row {
  background: #ffffff;
  border: 1px solid #f3f4f6;
}

html[data-theme="allwhite"] .logs-row:hover {
  background: #f9fafb;
  border-color: #e5e7eb;
}

html[data-theme="allwhite"] .btn-logs-refresh,
html[data-theme="allwhite"] .btn-logs-console,
html[data-theme="allwhite"] .btn-logs-group,
html[data-theme="allwhite"] .btn-logs-level,
html[data-theme="allwhite"] .btn-logs-time {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  color: #6b7280;
}

html[data-theme="allwhite"] .btn-logs-group.active,
html[data-theme="allwhite"] .btn-logs-level.active,
html[data-theme="allwhite"] .btn-logs-time.active {
  background: #f3f4f6;
  border-color: #6b7280;
  color: #111827;
}

/* ── XRay ───────────────────────────────────────────────────────────────── */

html[data-theme="allwhite"] .btn-xray-refresh,
html[data-theme="allwhite"] .btn-xray-console,
html[data-theme="allwhite"] .btn-xray-time,
html[data-theme="allwhite"] .btn-xray-filter {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  color: #6b7280;
}

html[data-theme="allwhite"] .btn-xray-time.active,
html[data-theme="allwhite"] .btn-xray-filter.active {
  background: #f3f4f6;
  border-color: #6b7280;
  color: #111827;
}

html[data-theme="allwhite"] .xray-stat-card,
html[data-theme="allwhite"] .xray-section-card {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  color: #111827;
}

html[data-theme="allwhite"] .xray-row:hover {
  background: #f9fafb;
}

html[data-theme="allwhite"] .xray-svcmap-wrap rect[stroke="#e2e8f0"] {
  stroke: #d1d5db !important;
}

html[data-theme="allwhite"] .xray-svcmap-wrap text[fill="#64748b"],
html[data-theme="allwhite"] .xray-svcmap-wrap text[fill="#94a3b8"],
html[data-theme="allwhite"] .xray-svcmap-wrap text[fill="#b0bec5"] {
  fill: #6b7280 !important;
}

/* ── Users ──────────────────────────────────────────────────────────────── */

html[data-theme="allwhite"] .users-search-input {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  color: #111827;
}

html[data-theme="allwhite"] .users-table {
  background: #ffffff;
  border: 1px solid #e5e7eb;
}

html[data-theme="allwhite"] .users-th-sortable.users-th-active {
  color: #111827;
}

/* ── Activity modal ─────────────────────────────────────────────────────── */
html[data-theme="allwhite"] .activity-summary {
  background: #fafafa;
  border: 1px solid #e5e7eb;
}
html[data-theme="allwhite"] .activity-table-wrapper {
  border-color: #e5e7eb;
}
html[data-theme="allwhite"] .activity-status-high {
  background: #fef3c7;
  color: #92400e;
}
html[data-theme="allwhite"] .activity-status-medium {
  background: #fef9c3;
  color: #713f12;
}
html[data-theme="allwhite"] .activity-result-badge.pass {
  background: #dcfce7;
  color: #166534;
}
html[data-theme="allwhite"] .activity-result-badge.fail {
  background: #fee2e2;
  color: #991b1b;
}

/* ═══════════════════════════════════════════════════════════════════════════
   THEME: CYBERPUNK — "Ghost in the Shell" edition
   ═══════════════════════════════════════════════════════════════════════════ */

html[data-theme="cyberpunk"] {
  --primary-color: #00ff9d;
  --primary-dark: #00cc7a;
  --primary-light: #00ff9d;
  --secondary-color: #00d4ff;
  --secondary-dark: #00a8cc;
  --accent-color: #ff00ff;
  --text-primary: #00ff9d;
  --text-secondary: #00c875;
  --text-light: #00794a;
  --bg-primary: #0a0e18;
  --bg-secondary: #070b0f;
  --bg-dark: #040609;
  --border-color: rgba(0, 255, 157, 0.22);
  --success: #00ff9d;
  --warning: #ffd700;
  --danger: #ff3366;
  --info: #00d4ff;
  --card-bg:            #1a1d29;
  --input-bg:           #1a1d29;
  --sidebar-bg:         #0f1117;
  --table-header-bg:    #0f1117;
  --hover-bg:           #0f1117;
  --badge-bg:           #1a1d29;
  --img-placeholder-bg: #0f1117;
  --error-color:        #ff3366;
  --btn-primary-text:   #04080f;
}

html[data-theme="cyberpunk"] body {
  background-color: #070b0f;
  color: #00ff9d;
  font-family: 'Courier New', 'SF Mono', 'Fira Code', monospace;
}

/* Scanlines overlay */
html[data-theme="cyberpunk"] body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 3px,
    rgba(0, 0, 0, 0.004) 3px,
    rgba(0, 0, 0, 0.004) 4px
  );
  z-index: 9999;
}

/* ── Layout ─────────────────────────────────────────────────────────────── */

html[data-theme="cyberpunk"] .layout-main {
  background: #070b0f;
}

html[data-theme="cyberpunk"] .header {
  background: #04080f;
  border-bottom: 1px solid rgba(0, 255, 157, 0.28);
  box-shadow: 0 0 24px rgba(0, 255, 157, 0.08);
}

/* Logo glows — everything else in the header recedes */
html[data-theme="cyberpunk"] .header-logo-img {
  filter: drop-shadow(0 0 6px rgba(0, 255, 157, 0.9)) drop-shadow(0 0 14px rgba(0, 255, 157, 0.5)) brightness(1.1);
}

html[data-theme="cyberpunk"] .header-logo-suffix {
  color: rgba(0, 255, 157, 0.3);
  border-left-color: rgba(0, 255, 157, 0.15);
}

html[data-theme="cyberpunk"] .header-beta-badge {
  background: linear-gradient(135deg, rgba(0,255,157,0.8), rgba(0,212,255,0.8), rgba(0,255,157,0.8));
  background-size: 300% 300%;
  animation: betaShimmer 3s ease infinite;
  box-shadow: 0 0 8px rgba(0, 255, 157, 0.4);
  color: #04080f;
}

html[data-theme="cyberpunk"] .menu-toggle {
  color: rgba(0, 255, 157, 0.4);
}

html[data-theme="cyberpunk"] .menu-toggle:hover {
  background: rgba(0, 255, 157, 0.06);
  color: rgba(0, 255, 157, 0.7);
}

html[data-theme="cyberpunk"] .user-name {
  color: rgba(0, 255, 157, 0.45);
}

html[data-theme="cyberpunk"] .user-role {
  color: rgba(0, 255, 157, 0.25);
}

html[data-theme="cyberpunk"] .user-avatar {
  background-color: #0a0e18;
  border-color: rgba(0, 255, 157, 0.4);
  color: rgba(0, 255, 157, 0.6);
  box-shadow: 0 0 10px rgba(0, 255, 157, 0.2);
}

html[data-theme="cyberpunk"] .logout-button {
  background: transparent;
  border: 1px solid rgba(0, 255, 157, 0.25);
  color: rgba(0, 255, 157, 0.4);
}

html[data-theme="cyberpunk"] .logout-button:hover {
  background: rgba(0, 255, 157, 0.06);
  border-color: rgba(0, 255, 157, 0.5);
  color: rgba(0, 255, 157, 0.75);
}

html[data-theme="cyberpunk"] .btn-export-pdf {
  background: rgba(0, 255, 157, 0.1);
  color: #00ff9d;
  border: 1px solid rgba(0, 255, 157, 0.3);
}

html[data-theme="cyberpunk"] .btn-export-pdf:hover {
  background: rgba(0, 255, 157, 0.18);
  border-color: rgba(0, 255, 157, 0.5);
}

html[data-theme="cyberpunk"] .btn-tr-refresh {
  color: #000;
}

html[data-theme="cyberpunk"] .tr-search-input {
  background: #070b0f;
  border-color: rgba(0, 255, 157, 0.28);
  color: #00ff9d;
}

html[data-theme="cyberpunk"] .tr-search-input::placeholder {
  color: #00794a;
}

html[data-theme="cyberpunk"] .tr-search-input:focus {
  border-color: #00ff9d;
  box-shadow: 0 0 0 3px rgba(0, 255, 157, 0.14);
}

html[data-theme="cyberpunk"] .tr-search-icon {
  color: #00794a;
}

html[data-theme="cyberpunk"] .sidebar {
  background: #0a0e18;
  border-right: 1px solid rgba(0, 255, 157, 0.18);
  box-shadow: 2px 0 24px rgba(0, 255, 157, 0.06);
}

html[data-theme="cyberpunk"] .nav-link {
  color: #00c875;
}

html[data-theme="cyberpunk"] .nav-link:hover {
  background: rgba(0, 255, 157, 0.07);
  color: #00ff9d;
}

html[data-theme="cyberpunk"] .nav-link.active {
  background: rgba(0, 255, 157, 0.1);
  border-left-color: #00ff9d;
  color: #00ff9d;
  text-shadow: 0 0 8px rgba(0, 255, 157, 0.5);
}

html[data-theme="cyberpunk"] .nav-section-title {
  color: #00794a;
}

html[data-theme="cyberpunk"] .user-avatar {
  border-color: #00ff9d;
  box-shadow: 0 0 10px rgba(0, 255, 157, 0.5);
}

html[data-theme="cyberpunk"] .user-tooltip {
  background: #0a0e18;
  border-color: rgba(0, 255, 157, 0.35);
  box-shadow: 0 0 30px rgba(0, 255, 157, 0.15);
}

html[data-theme="cyberpunk"] .user-tooltip::before {
  background: #0a0e18;
  border-color: rgba(0, 255, 157, 0.35);
}

/* ── Typography ─────────────────────────────────────────────────────────── */

html[data-theme="cyberpunk"] h1,
html[data-theme="cyberpunk"] h2,
html[data-theme="cyberpunk"] h3,
html[data-theme="cyberpunk"] h4 {
  color: #00ff9d;
}

/* ── Generic white card/wrapper backgrounds ─────────────────────────────── */

html[data-theme="cyberpunk"] .profile-card,
html[data-theme="cyberpunk"] .profile-hero,
html[data-theme="cyberpunk"] .users-table-wrapper,
html[data-theme="cyberpunk"] .users-modal,
html[data-theme="cyberpunk"] .user-tooltip {
  background: #0d1520;
  border-color: rgba(0, 255, 157, 0.18);
}

/* ── Profile page ───────────────────────────────────────────────────────── */

html[data-theme="cyberpunk"] .profile-hero {
  background: #0d1520;
  border-color: rgba(0, 255, 157, 0.18);
  border-left-color: #00ff9d;
  box-shadow: 0 0 40px rgba(0, 255, 157, 0.07);
}

html[data-theme="cyberpunk"] .profile-card {
  background: #0d1520;
  border-color: rgba(0, 255, 157, 0.18);
  box-shadow: 0 0 20px rgba(0, 255, 157, 0.05), inset 0 0 1px rgba(0, 255, 157, 0.12);
}

html[data-theme="cyberpunk"] .profile-avatar-initials {
  background: transparent;
  border: 2px solid #00ff9d;
  color: #00ff9d;
  box-shadow: 0 0 24px rgba(0, 255, 157, 0.4), inset 0 0 16px rgba(0, 255, 157, 0.08);
  text-shadow: 0 0 12px rgba(0, 255, 157, 0.9);
}

html[data-theme="cyberpunk"] .profile-role-badge {
  background: rgba(0, 255, 157, 0.1);
  border-color: rgba(0, 255, 157, 0.35);
  color: #00ff9d;
}

html[data-theme="cyberpunk"] .profile-email {
  color: #00c875;
}

html[data-theme="cyberpunk"] .card-header {
  border-bottom-color: rgba(0, 255, 157, 0.1);
}

html[data-theme="cyberpunk"] .card-header h3 {
  color: #00794a;
}

html[data-theme="cyberpunk"] .form-group {
  border-bottom-color: rgba(0, 255, 157, 0.1);
}

html[data-theme="cyberpunk"] .form-group label {
  color: #00794a;
}

html[data-theme="cyberpunk"] .field-value {
  color: #00ff9d;
}

html[data-theme="cyberpunk"] .field-hint,
html[data-theme="cyberpunk"] .security-message {
  color: #00794a;
}

html[data-theme="cyberpunk"] .form-input,
html[data-theme="cyberpunk"] .profile-role-select {
  background: #070b0f;
  border-color: rgba(0, 255, 157, 0.28);
  color: #00ff9d;
}

html[data-theme="cyberpunk"] .form-input:focus {
  background: #0a0e18;
  border-color: #00ff9d;
  box-shadow: 0 0 0 3px rgba(0, 255, 157, 0.14), 0 0 12px rgba(0, 255, 157, 0.2);
}

html[data-theme="cyberpunk"] .form-input::placeholder {
  color: #00794a;
}

html[data-theme="cyberpunk"] .profile-role-select {
  background: #070b0f;
}

html[data-theme="cyberpunk"] .profile-role-select option {
  background: #0d1520;
  color: #00ff9d;
}

html[data-theme="cyberpunk"] .btn-primary {
  background: #00ff9d;
  color: #04080f;
  font-weight: 800;
  box-shadow: 0 0 14px rgba(0, 255, 157, 0.5);
}

html[data-theme="cyberpunk"] .btn-primary:hover:not(:disabled) {
  background: #00cc7a;
  box-shadow: 0 0 22px rgba(0, 255, 157, 0.7);
}

html[data-theme="cyberpunk"] .btn-secondary {
  background: rgba(0, 255, 157, 0.07);
  border-color: rgba(0, 255, 157, 0.28);
  color: #00ff9d;
}

html[data-theme="cyberpunk"] .btn-secondary:hover:not(:disabled) {
  background: rgba(0, 255, 157, 0.14);
}

html[data-theme="cyberpunk"] .btn-icon {
  color: #00ff9d;
}

html[data-theme="cyberpunk"] .btn-icon:hover {
  background: rgba(0, 255, 157, 0.1);
}

html[data-theme="cyberpunk"] .btn-danger {
  background: #ff3366;
  box-shadow: 0 0 10px rgba(255, 51, 102, 0.4);
}

html[data-theme="cyberpunk"] .btn-danger:hover:not(:disabled) {
  background: #cc2952;
  box-shadow: 0 0 20px rgba(255, 51, 102, 0.6);
}

/* MFA */
html[data-theme="cyberpunk"] .mfa-section {
  border-top-color: rgba(0, 255, 157, 0.14);
}

html[data-theme="cyberpunk"] .mfa-status-badge.active {
  background: rgba(0, 255, 157, 0.1);
  color: #00ff9d;
  border-color: rgba(0, 255, 157, 0.4);
}

html[data-theme="cyberpunk"] .mfa-status-badge.inactive {
  background: rgba(255, 215, 0, 0.08);
  color: #ffd700;
  border-color: rgba(255, 215, 0, 0.3);
}

html[data-theme="cyberpunk"] .mfa-enabled-message {
  background: rgba(0, 255, 157, 0.07);
  color: #00ff9d;
  border-color: rgba(0, 255, 157, 0.3);
}

html[data-theme="cyberpunk"] .mfa-qr-container {
  background: #070b0f;
  border-color: rgba(0, 255, 157, 0.22);
}

html[data-theme="cyberpunk"] .mfa-secret-key code {
  background: #070b0f;
  border-color: rgba(0, 255, 157, 0.28);
  color: #00d4ff;
}

html[data-theme="cyberpunk"] .mfa-step-number {
  background: #00ff9d;
  color: #04080f;
}

html[data-theme="cyberpunk"] .mfa-description,
html[data-theme="cyberpunk"] .mfa-step p {
  color: #00794a;
}

html[data-theme="cyberpunk"] .mfa-disable-warning {
  background: rgba(255, 51, 102, 0.07);
  color: #ff3366;
  border-color: rgba(255, 51, 102, 0.28);
}

html[data-theme="cyberpunk"] .message.success {
  background: rgba(0, 255, 157, 0.07);
  border-color: #00ff9d;
  color: #00ff9d;
}

html[data-theme="cyberpunk"] .message.error {
  background: rgba(255, 51, 102, 0.07);
  border-color: #ff3366;
  color: #ff3366;
}

/* ── Users table ────────────────────────────────────────────────────────── */

html[data-theme="cyberpunk"] .users-table-wrapper {
  background: #0d1520;
  border-color: rgba(0, 255, 157, 0.18);
}

html[data-theme="cyberpunk"] .users-table th {
  background: #070b0f;
  color: #00794a;
  border-bottom-color: rgba(0, 255, 157, 0.18);
}

html[data-theme="cyberpunk"] .users-th-sortable:hover {
  background: rgba(0, 255, 157, 0.06);
  color: #00ff9d;
}

html[data-theme="cyberpunk"] .users-th-active {
  color: #00ff9d;
  text-shadow: 0 0 6px rgba(0, 255, 157, 0.6);
}

html[data-theme="cyberpunk"] .users-table td {
  color: #00ff9d;
  border-bottom-color: rgba(0, 255, 157, 0.08);
}

html[data-theme="cyberpunk"] .users-table tr:hover td {
  background: rgba(0, 255, 157, 0.04);
}

html[data-theme="cyberpunk"] .users-cell-date {
  color: #00794a;
}

html[data-theme="cyberpunk"] .users-cell-name {
  color: #00ff9d;
}

html[data-theme="cyberpunk"] .users-role-admin {
  background: rgba(0, 212, 255, 0.1);
  color: #00d4ff;
}

html[data-theme="cyberpunk"] .users-role-reports {
  background: rgba(0, 255, 157, 0.1);
  color: #00ff9d;
}

html[data-theme="cyberpunk"] .users-role-generic {
  background: rgba(255, 0, 255, 0.08);
  color: #ff00ff;
}

html[data-theme="cyberpunk"] .users-status-label.enabled {
  background: rgba(0, 255, 157, 0.1);
  color: #00ff9d;
  border: 1px solid rgba(0, 255, 157, 0.28);
}

html[data-theme="cyberpunk"] .users-status-label.disabled {
  background: rgba(255, 51, 102, 0.1);
  color: #ff3366;
  border: 1px solid rgba(255, 51, 102, 0.28);
}

html[data-theme="cyberpunk"] .users-icon {
  color: #00ff9d;
  filter: drop-shadow(0 0 6px rgba(0, 255, 157, 0.6));
}

html[data-theme="cyberpunk"] .btn-users-refresh {
  background: rgba(0, 255, 157, 0.07);
  border: 1px solid rgba(0, 255, 157, 0.28);
  color: #00ff9d;
}

html[data-theme="cyberpunk"] .btn-users-refresh:hover:not(:disabled) {
  background: rgba(0, 255, 157, 0.14);
}

html[data-theme="cyberpunk"] .btn-users-create {
  background: #00ff9d;
  color: #04080f;
  font-weight: 800;
  box-shadow: 0 0 14px rgba(0, 255, 157, 0.5);
}

html[data-theme="cyberpunk"] .btn-users-icon {
  border-color: rgba(0, 255, 157, 0.22);
  color: #00c875;
}

html[data-theme="cyberpunk"] .btn-users-icon:hover:not(:disabled) {
  background: rgba(0, 255, 157, 0.08);
  color: #00ff9d;
  border-color: rgba(0, 255, 157, 0.45);
}

html[data-theme="cyberpunk"] .users-search-bar {
  background: #070b0f;
  border-color: rgba(0, 255, 157, 0.28);
}

html[data-theme="cyberpunk"] .users-search-input {
  background: #070b0f;
  border-color: rgba(0, 255, 157, 0.28);
  color: #00ff9d;
}

html[data-theme="cyberpunk"] .users-search-input::placeholder {
  color: #00794a;
}

html[data-theme="cyberpunk"] .users-search-input:focus {
  border-color: #00ff9d;
  box-shadow: 0 0 0 3px rgba(0, 255, 157, 0.14);
}

html[data-theme="cyberpunk"] .users-search-icon {
  color: #00794a;
}

html[data-theme="cyberpunk"] .users-error {
  background: rgba(255, 51, 102, 0.07);
  border-color: rgba(255, 51, 102, 0.3);
  color: #ff3366;
}

html[data-theme="cyberpunk"] .users-loading,
html[data-theme="cyberpunk"] .users-empty {
  color: #00794a;
}

html[data-theme="cyberpunk"] .users-row-disabled td {
  opacity: 0.4;
}

/* Modal */
html[data-theme="cyberpunk"] .users-modal-backdrop {
  background: rgba(0, 0, 0, 0.8);
}

html[data-theme="cyberpunk"] .users-modal {
  background: #0d1520;
  border: 1px solid rgba(0, 255, 157, 0.32);
  box-shadow: 0 0 60px rgba(0, 255, 157, 0.12), 0 0 120px rgba(0, 255, 157, 0.04);
}

html[data-theme="cyberpunk"] .users-modal-title {
  color: #00ff9d;
}

html[data-theme="cyberpunk"] .users-delete-msg,
html[data-theme="cyberpunk"] .users-modal-hint {
  color: #00c875;
}

html[data-theme="cyberpunk"] .users-modal-form input,
html[data-theme="cyberpunk"] .users-modal-form select {
  background: #070b0f;
  border-color: rgba(0, 255, 157, 0.28);
  color: #00ff9d;
}

html[data-theme="cyberpunk"] .users-modal-form input:focus,
html[data-theme="cyberpunk"] .users-modal-form select:focus {
  border-color: #00ff9d;
  box-shadow: 0 0 0 3px rgba(0, 255, 157, 0.14);
}

html[data-theme="cyberpunk"] .users-modal-form label {
  color: #00794a;
}

html[data-theme="cyberpunk"] .users-modal-error {
  background: rgba(255, 51, 102, 0.07);
  color: #ff3366;
}

html[data-theme="cyberpunk"] .btn-users-cancel {
  background: rgba(0, 255, 157, 0.05);
  border-color: rgba(0, 255, 157, 0.28);
  color: #00ff9d;
}

html[data-theme="cyberpunk"] .btn-users-cancel:hover:not(:disabled) {
  background: rgba(0, 255, 157, 0.12);
}

html[data-theme="cyberpunk"] .btn-users-save {
  background: #00ff9d;
  color: #04080f;
  font-weight: 800;
  box-shadow: 0 0 12px rgba(0, 255, 157, 0.4);
}

html[data-theme="cyberpunk"] .btn-users-delete {
  background: #ff3366;
  box-shadow: 0 0 10px rgba(255, 51, 102, 0.4);
}

html[data-theme="cyberpunk"] .users-role-select {
  background: #070b0f;
  border-color: rgba(0, 255, 157, 0.28);
  color: #00ff9d;
}

html[data-theme="cyberpunk"] .users-role-select option {
  background: #0d1520;
  color: #00ff9d;
}

html[data-theme="cyberpunk"] .users-role-select:focus {
  border-color: #00ff9d;
  box-shadow: 0 0 0 3px rgba(0, 255, 157, 0.14);
}

/* ── Activity modal ─────────────────────────────────────────────────────── */
html[data-theme="cyberpunk"] .activity-status-high {
  background: rgba(255, 215, 0, 0.12);
  color: #ffd700;
  border: 1px solid rgba(255, 215, 0, 0.3);
}
html[data-theme="cyberpunk"] .activity-status-medium {
  background: rgba(255, 215, 0, 0.07);
  color: #ccac00;
  border: 1px solid rgba(255, 215, 0, 0.2);
}
html[data-theme="cyberpunk"] .activity-status-expired {
  background: rgba(0, 255, 157, 0.06);
  color: #00794a;
}
html[data-theme="cyberpunk"] .activity-status-none {
  background: rgba(0, 255, 157, 0.06);
  color: #00794a;
}
html[data-theme="cyberpunk"] .activity-result-badge.pass {
  background: rgba(0, 255, 157, 0.12);
  color: #00ff9d;
}
html[data-theme="cyberpunk"] .activity-result-badge.fail {
  background: rgba(255, 51, 102, 0.12);
  color: #ff3366;
}

/* ── Monitoring ─────────────────────────────────────────────────────────── */

html[data-theme="cyberpunk"] .monitoring-section-header {
  color: #00ff9d;
  border-color: rgba(0, 255, 157, 0.2);
  background: linear-gradient(180deg, #0d1520 0%, #070b0f 100%);
}

html[data-theme="cyberpunk"] .metric-card {
  background: #0d1520;
  border-color: rgba(0, 255, 157, 0.2);
  box-shadow: 0 0 16px rgba(0, 255, 157, 0.06);
}

html[data-theme="cyberpunk"] .metric-card:hover {
  box-shadow: 0 0 24px rgba(0, 255, 157, 0.14);
}

html[data-theme="cyberpunk"] .metric-card-title {
  color: #00ff9d;
  background: #070b0f;
  border-color: rgba(0, 255, 157, 0.15);
}

html[data-theme="cyberpunk"] .metric-card-loading {
  color: #00c875;
}

html[data-theme="cyberpunk"] .metric-card-error {
  background: rgba(255, 51, 102, 0.07);
  color: #ff3366;
}

html[data-theme="cyberpunk"] .metric-card-body {
  background: #0d1520;
}

html[data-theme="cyberpunk"] .metric-card-img {
  filter: invert(1) hue-rotate(180deg) brightness(0.85) contrast(1.1);
  opacity: 0.95;
}

html[data-theme="cyberpunk"] .btn-metric-filter {
  background: #0d1520;
  border-color: rgba(0, 255, 157, 0.2);
  color: rgba(0, 255, 157, 0.65);
}

html[data-theme="cyberpunk"] .btn-metric-filter:hover {
  background: rgba(0, 255, 157, 0.08);
  color: #00ff9d;
}

html[data-theme="cyberpunk"] .btn-metric-filter.active {
  background: #00ff9d;
  border-color: #00ff9d;
  color: #070b0f;
}

html[data-theme="cyberpunk"] .btn-time-range {
  background: #0d1520;
  border-color: rgba(0, 255, 157, 0.2);
  color: rgba(0, 255, 157, 0.65);
}

html[data-theme="cyberpunk"] .btn-time-range:hover {
  background: rgba(0, 255, 157, 0.08);
  color: #00ff9d;
}

html[data-theme="cyberpunk"] .btn-time-range.active {
  background: #00ff9d;
  border-color: #00ff9d;
  color: #070b0f;
}

html[data-theme="cyberpunk"] .btn-monitoring-refresh,
html[data-theme="cyberpunk"] .btn-monitoring-console {
  background: rgba(0, 255, 157, 0.08);
  border-color: rgba(0, 255, 157, 0.25);
  color: #00ff9d;
}

html[data-theme="cyberpunk"] .btn-monitoring-refresh:hover,
html[data-theme="cyberpunk"] .btn-monitoring-console:hover {
  background: rgba(0, 255, 157, 0.15);
}

/* ── ERROR LOGS ─────────────────────────────────────────────────────────── */

html[data-theme="cyberpunk"] .logs-stat-card {
  background: #0d1520;
  border-color: rgba(0, 255, 157, 0.18);
  color: #00ff9d;
  box-shadow: 0 0 16px rgba(0, 255, 157, 0.05);
}

html[data-theme="cyberpunk"] .logs-stat-card--error {
  background: rgba(255, 51, 102, 0.07);
  border-color: rgba(255, 51, 102, 0.3);
}

html[data-theme="cyberpunk"] .logs-stat-card--warn {
  background: rgba(255, 171, 0, 0.07);
  border-color: rgba(255, 171, 0, 0.3);
}

html[data-theme="cyberpunk"] .logs-section-card {
  background: #0d1520;
  border-color: rgba(0, 255, 157, 0.18);
}

html[data-theme="cyberpunk"] .logs-section-title {
  color: #00ff9d;
  border-color: rgba(0, 255, 157, 0.15);
}

html[data-theme="cyberpunk"] .logs-search-input {
  background: #070b0f;
  border-color: rgba(0, 255, 157, 0.25);
  color: #00ff9d;
}

html[data-theme="cyberpunk"] .logs-search-input:focus {
  border-color: #00ff9d;
  box-shadow: 0 0 0 3px rgba(0, 255, 157, 0.12);
}

html[data-theme="cyberpunk"] .logs-search-icon {
  color: #00c875;
}

html[data-theme="cyberpunk"] .logs-row {
  background: #0d1520;
  border-color: rgba(0, 255, 157, 0.1);
  color: #00ff9d;
}

html[data-theme="cyberpunk"] .logs-row:hover {
  background: rgba(0, 255, 157, 0.05);
}

html[data-theme="cyberpunk"] .logs-row--error {
  border-color: rgba(255, 51, 102, 0.3);
  background: rgba(255, 51, 102, 0.05);
}

html[data-theme="cyberpunk"] .logs-row--error:hover {
  background: rgba(255, 51, 102, 0.09);
}

html[data-theme="cyberpunk"] .logs-row--warn {
  border-color: rgba(255, 171, 0, 0.3);
  background: rgba(255, 171, 0, 0.05);
}

html[data-theme="cyberpunk"] .logs-row--warn:hover {
  background: rgba(255, 171, 0, 0.09);
}

html[data-theme="cyberpunk"] .logs-row--info {
  border-color: rgba(0, 255, 157, 0.18);
  background: rgba(0, 255, 157, 0.04);
}

html[data-theme="cyberpunk"] .logs-row--info:hover {
  background: rgba(0, 255, 157, 0.08);
}

html[data-theme="cyberpunk"] .logs-ts {
  color: #00c875;
}

html[data-theme="cyberpunk"] .logs-stream {
  background: rgba(0, 255, 157, 0.08);
  color: #00ff9d;
  border-color: rgba(0, 255, 157, 0.2);
}

html[data-theme="cyberpunk"] .logs-msg-preview {
  color: #00ff9d;
}

html[data-theme="cyberpunk"] .logs-row-detail {
  background: #070b0f;
  border-color: rgba(0, 255, 157, 0.12);
}

html[data-theme="cyberpunk"] .btn-logs-group {
  background: #0d1520;
  border-color: rgba(0, 255, 157, 0.2);
  color: rgba(0, 255, 157, 0.65);
}

html[data-theme="cyberpunk"] .btn-logs-group:hover {
  background: rgba(0, 255, 157, 0.08);
}

html[data-theme="cyberpunk"] .btn-logs-group.active {
  background: #00ff9d;
  border-color: #00ff9d;
  color: #070b0f;
}

html[data-theme="cyberpunk"] .btn-logs-level {
  background: #0d1520;
  border-color: rgba(0, 255, 157, 0.18);
  color: rgba(0, 255, 157, 0.65);
}

html[data-theme="cyberpunk"] .btn-logs-level--all.active {
  background: #00ff9d;
  border-color: #00ff9d;
  color: #070b0f;
}

html[data-theme="cyberpunk"] .btn-logs-time {
  background: #0d1520;
  border-color: rgba(0, 255, 157, 0.2);
  color: rgba(0, 255, 157, 0.65);
}

html[data-theme="cyberpunk"] .btn-logs-time:hover {
  background: rgba(0, 255, 157, 0.08);
  color: #00ff9d;
}

html[data-theme="cyberpunk"] .btn-logs-time.active {
  background: #00ff9d;
  color: #070b0f;
}

html[data-theme="cyberpunk"] .btn-logs-refresh,
html[data-theme="cyberpunk"] .btn-logs-console {
  background: rgba(0, 255, 157, 0.08);
  border-color: rgba(0, 255, 157, 0.25);
  color: #00ff9d;
}

html[data-theme="cyberpunk"] .btn-logs-refresh:hover {
  background: rgba(0, 255, 157, 0.15);
}

html[data-theme="cyberpunk"] .logs-count-badge {
  background: rgba(0, 255, 157, 0.15);
  color: #00ff9d;
}

html[data-theme="cyberpunk"] .logs-error-msg {
  background: rgba(255, 51, 102, 0.07);
  color: #ff3366;
}

/* ── XRAY ───────────────────────────────────────────────────────────────── */

html[data-theme="cyberpunk"] .btn-xray-refresh,
html[data-theme="cyberpunk"] .btn-xray-console {
  background: rgba(0, 255, 157, 0.08);
  border-color: rgba(0, 255, 157, 0.25);
  color: #00ff9d;
}

html[data-theme="cyberpunk"] .btn-xray-refresh:hover,
html[data-theme="cyberpunk"] .btn-xray-console:hover {
  background: rgba(0, 255, 157, 0.15);
}

html[data-theme="cyberpunk"] .btn-xray-time {
  background: #0d1520;
  border-color: rgba(0, 255, 157, 0.2);
  color: rgba(0, 255, 157, 0.65);
}

html[data-theme="cyberpunk"] .btn-xray-time:hover {
  background: rgba(0, 255, 157, 0.08);
  color: #00ff9d;
}

html[data-theme="cyberpunk"] .btn-xray-time.active {
  background: #00ff9d;
  border-color: #00ff9d;
  color: #070b0f;
}

html[data-theme="cyberpunk"] .xray-stat-card {
  background: #0d1520;
  border-color: rgba(0, 255, 157, 0.18);
  color: #00ff9d;
  box-shadow: 0 0 16px rgba(0, 255, 157, 0.05);
}

html[data-theme="cyberpunk"] .xray-stat-card--error {
  background: rgba(255, 51, 102, 0.07);
  border-color: rgba(255, 51, 102, 0.3);
}

html[data-theme="cyberpunk"] .xray-service-card {
  background: #0d1520;
  border-color: rgba(0, 255, 157, 0.15);
}

html[data-theme="cyberpunk"] .xray-service-card--error {
  border-color: rgba(255, 51, 102, 0.3);
  background: rgba(255, 51, 102, 0.05);
}

html[data-theme="cyberpunk"] .btn-xray-filter {
  background: #0d1520;
  border-color: rgba(0, 255, 157, 0.2);
  color: rgba(0, 255, 157, 0.65);
}

html[data-theme="cyberpunk"] .btn-xray-filter:hover {
  background: rgba(0, 255, 157, 0.08);
}

html[data-theme="cyberpunk"] .btn-xray-filter.active {
  background: #00ff9d;
  border-color: #00ff9d;
  color: #070b0f;
}

html[data-theme="cyberpunk"] .xray-search-input {
  background: #070b0f;
  border-color: rgba(0, 255, 157, 0.25);
  color: #00ff9d;
}

html[data-theme="cyberpunk"] .xray-search-input:focus {
  border-color: #00ff9d;
  box-shadow: 0 0 0 3px rgba(0, 255, 157, 0.12);
}

html[data-theme="cyberpunk"] .xray-search-icon {
  color: #00c875;
}

html[data-theme="cyberpunk"] .xray-error-msg {
  background: rgba(255, 51, 102, 0.07);
  color: #ff3366;
}

html[data-theme="cyberpunk"] .xray-section-card {
  background: #0d1520;
  border-color: rgba(0, 255, 157, 0.18);
}

html[data-theme="cyberpunk"] .xray-section-title {
  color: #00ff9d;
  border-color: rgba(0, 255, 157, 0.15);
}

html[data-theme="cyberpunk"] .xray-row {
  background: transparent;
}

html[data-theme="cyberpunk"] .xray-row:hover {
  background: rgba(0, 255, 157, 0.05);
}

html[data-theme="cyberpunk"] .xray-row--selected {
  background: rgba(0, 255, 157, 0.1) !important;
}

html[data-theme="cyberpunk"] .xray-table td {
  border-color: rgba(0, 255, 157, 0.08);
  color: #00ff9d;
}

html[data-theme="cyberpunk"] .xray-trace-id {
  background: rgba(0, 255, 157, 0.08);
  color: #00ff9d;
}

html[data-theme="cyberpunk"] .xray-exec-id {
  background: rgba(0, 255, 157, 0.1);
  color: #00ff9d;
}

html[data-theme="cyberpunk"] .badge-green {
  background: rgba(0, 255, 157, 0.15);
  color: #00ff9d;
}

html[data-theme="cyberpunk"] .badge-blue {
  background: rgba(14, 165, 233, 0.15);
  color: #0ea5e9;
}

html[data-theme="cyberpunk"] .badge-red {
  background: rgba(255, 51, 102, 0.15);
  color: #ff3366;
}

html[data-theme="cyberpunk"] .badge-orange {
  background: rgba(249, 115, 22, 0.15);
  color: #fb923c;
}

html[data-theme="cyberpunk"] .badge-gray {
  background: rgba(0, 255, 157, 0.08);
  color: rgba(0, 255, 157, 0.6);
}

html[data-theme="cyberpunk"] .xray-detail-panel {
  background: #0d1520;
  border-color: rgba(0, 255, 157, 0.18);
}

html[data-theme="cyberpunk"] .xray-detail-header {
  background: #070b0f;
  border-color: rgba(0, 255, 157, 0.15);
}

html[data-theme="cyberpunk"] .xray-seg-row:hover {
  background: rgba(0, 255, 157, 0.05);
}

html[data-theme="cyberpunk"] .xray-seg-status {
  background: rgba(0, 255, 157, 0.15);
  color: #00ff9d;
}

html[data-theme="cyberpunk"] .xray-seg-status--error {
  background: rgba(255, 51, 102, 0.15);
  color: #ff3366;
}

html[data-theme="cyberpunk"] .xray-seg-timeline {
  background: rgba(0, 255, 157, 0.08);
}

html[data-theme="cyberpunk"] .btn-xray-view {
  background: transparent;
  border-color: rgba(0, 255, 157, 0.2);
  color: rgba(0, 255, 157, 0.65);
}

html[data-theme="cyberpunk"] .btn-xray-view:hover {
  background: rgba(0, 255, 157, 0.08);
  color: #00ff9d;
}

html[data-theme="cyberpunk"] .btn-xray-view.active {
  background: rgba(0, 255, 157, 0.12);
  color: #00ff9d;
  box-shadow: 0 0 12px rgba(0, 255, 157, 0.2);
}

html[data-theme="cyberpunk"] .xray-svcmap-wrap rect[fill="#ffffff"],
html[data-theme="cyberpunk"] .xray-svcmap-wrap rect[fill="#fff5f5"],
html[data-theme="cyberpunk"] .xray-svcmap-wrap rect[fill="#fffbeb"] {
  fill: #0d1520 !important;
}

html[data-theme="cyberpunk"] .xray-svcmap-wrap rect[stroke="#e2e8f0"] {
  stroke: rgba(0, 255, 157, 0.25) !important;
}

html[data-theme="cyberpunk"] .xray-svcmap-wrap rect[stroke="#dc2626"] {
  stroke: #ff3366 !important;
}

html[data-theme="cyberpunk"] .xray-svcmap-wrap rect[stroke="#f59e0b"] {
  stroke: #fb923c !important;
}

html[data-theme="cyberpunk"] .xray-svcmap-wrap text[fill="#1e293b"] {
  fill: #00ff9d !important;
}

html[data-theme="cyberpunk"] .xray-svcmap-wrap text[fill="#64748b"],
html[data-theme="cyberpunk"] .xray-svcmap-wrap text[fill="#94a3b8"],
html[data-theme="cyberpunk"] .xray-svcmap-wrap text[fill="#b0bec5"] {
  fill: #00c875 !important;
}

html[data-theme="cyberpunk"] .xray-svcmap-wrap line[stroke="#f1f5f9"] {
  stroke: rgba(0, 255, 157, 0.15) !important;
}

html[data-theme="cyberpunk"] .xray-svcmap-wrap path[stroke="#b0bec5"] {
  stroke: rgba(0, 255, 157, 0.35) !important;
}

html[data-theme="cyberpunk"] .xray-svcmap-wrap marker path {
  fill: #00c875 !important;
}

/* ── Scrollbars ─────────────────────────────────────────────────────────── */

html[data-theme="cyberpunk"] ::-webkit-scrollbar-track {
  background: #070b0f;
}

html[data-theme="cyberpunk"] ::-webkit-scrollbar-thumb {
  background: rgba(0, 255, 157, 0.22);
}

html[data-theme="cyberpunk"] ::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 255, 157, 0.42);
}

/* ── Profile theme picker ───────────────────────────────────────────────── */

html[data-theme="cyberpunk"] .profile-themes {
  background: #0d1520;
  border-color: rgba(0, 255, 157, 0.18);
  box-shadow: 0 0 20px rgba(0, 255, 157, 0.05);
}

html[data-theme="cyberpunk"] .profile-themes-header {
  color: #00794a;
}

html[data-theme="cyberpunk"] .profile-theme-option {
  border-color: rgba(0, 255, 157, 0.2);
}

html[data-theme="cyberpunk"] .profile-theme-option:hover {
  border-color: #00ff9d;
}

html[data-theme="cyberpunk"] .profile-theme-option--active {
  border-color: #00ff9d;
  box-shadow: 0 0 0 3px rgba(0, 255, 157, 0.14);
}

html[data-theme="cyberpunk"] .profile-theme-name {
  color: #00c875;
}

html[data-theme="cyberpunk"] .profile-theme-option--active .profile-theme-name {
  color: #00ff9d;
}

/* ── Dashboard ──────────────────────────────────────────────────────────── */

html[data-theme="cyberpunk"] .stat-card {
  background: #0d1520;
  border-color: rgba(0, 255, 157, 0.18);
  box-shadow: 0 0 20px rgba(0, 255, 157, 0.05), inset 0 0 1px rgba(0, 255, 157, 0.12);
  color: #00ff9d;
}

html[data-theme="cyberpunk"] .stat-card:hover {
  box-shadow: 0 0 28px rgba(0, 255, 157, 0.08), inset 0 0 1px rgba(0, 255, 157, 0.15);
}

html[data-theme="cyberpunk"] .dashboard-card {
  background: #0d1520;
  border-color: rgba(0, 255, 157, 0.18);
  box-shadow: 0 0 20px rgba(0, 255, 157, 0.05), inset 0 0 1px rgba(0, 255, 157, 0.12);
  color: #00ff9d;
}

html[data-theme="cyberpunk"] .health-section-row {
  background: #0d1520;
  border-color: rgba(0, 255, 157, 0.18);
  box-shadow: 0 0 20px rgba(0, 255, 157, 0.05), inset 0 0 1px rgba(0, 255, 157, 0.12);
}

html[data-theme="cyberpunk"] .health-category-title {
  color: #00c875;
}

html[data-theme="cyberpunk"] .health-chip {
  background: #0d1520;
  border-color: rgba(0, 255, 157, 0.18);
  box-shadow: 0 0 20px rgba(0, 255, 157, 0.05), inset 0 0 1px rgba(0, 255, 157, 0.12);
}

html[data-theme="cyberpunk"] .health-chip-label {
  color: #00c875;
}

html[data-theme="cyberpunk"] .health-chip-value {
  color: #00ff9d;
}

html[data-theme="cyberpunk"] .dashboard-manual-sync-box {
  background: #0d1520;
  border-color: rgba(0, 255, 157, 0.18);
  box-shadow: 0 0 20px rgba(0, 255, 157, 0.05), inset 0 0 1px rgba(0, 255, 157, 0.12);
}

html[data-theme="cyberpunk"] .sync-info-label {
  color: #00c875;
}

html[data-theme="cyberpunk"] .sync-info-value {
  color: #00ff9d;
}

html[data-theme="cyberpunk"] .dashboard-schedule-row {
  background: #0d1520;
  border-color: rgba(0, 255, 157, 0.18);
  box-shadow: 0 0 20px rgba(0, 255, 157, 0.05), inset 0 0 1px rgba(0, 255, 157, 0.12);
}

html[data-theme="cyberpunk"] .dashboard-schedule-label {
  color: #00ff9d;
}

html[data-theme="cyberpunk"] .dashboard-schedule-badge.enabled {
  background: rgba(0, 255, 157, 0.15);
  color: #00ff9d;
}

html[data-theme="cyberpunk"] .dashboard-schedule-badge.disabled {
  background: rgba(0, 255, 157, 0.05);
  color: #00794a;
}

html[data-theme="cyberpunk"] .dashboard-schedule-btn {
  background: rgba(0, 255, 157, 0.08);
  border-color: rgba(0, 255, 157, 0.3);
  color: #00ff9d;
}

html[data-theme="cyberpunk"] .dashboard-schedule-btn:hover {
  background: rgba(0, 255, 157, 0.18);
  border-color: #00ff9d;
  color: #00ff9d;
}

html[data-theme="cyberpunk"] .quick-action-btn:hover {
  color: #000 !important;
}

html[data-theme="cyberpunk"] .dashboard-sync-button {
  color: #000 !important;
}

/* ── Brand Flags ────────────────────────────────────────────────────────── */

html[data-theme="cyberpunk"] .brand-flag-card {
  background: #0d1520;
  border-color: rgba(0, 255, 157, 0.18);
  box-shadow: 0 0 20px rgba(0, 255, 157, 0.05), inset 0 0 1px rgba(0, 255, 157, 0.12);
  color: #00ff9d;
}

html[data-theme="cyberpunk"] .brand-flag-card:hover {
  border-color: rgba(0, 255, 157, 0.35);
  box-shadow: 0 0 28px rgba(0, 255, 157, 0.1), inset 0 0 1px rgba(0, 255, 157, 0.15);
}

html[data-theme="cyberpunk"] .brand-flag-card.is-active {
  border-color: rgba(0, 255, 157, 0.4);
}

html[data-theme="cyberpunk"] .brand-flag-card.is-inactive {
  border-color: rgba(0, 255, 157, 0.1);
  opacity: 0.7;
}

html[data-theme="cyberpunk"] .brand-flags-search {
  background: #070b0f;
  border-color: rgba(0, 255, 157, 0.25);
  color: #00ff9d;
}

html[data-theme="cyberpunk"] .brand-flags-search:focus {
  border-color: #00ff9d;
  box-shadow: 0 0 0 3px rgba(0, 255, 157, 0.12);
}

html[data-theme="cyberpunk"] .brand-flags-filter-btn {
  background: #070b0f;
  border-color: rgba(0, 255, 157, 0.2);
  color: rgba(0, 255, 157, 0.6);
}

html[data-theme="cyberpunk"] .brand-flags-filter-btn:hover {
  background: rgba(0, 255, 157, 0.08);
  color: #00ff9d;
}

html[data-theme="cyberpunk"] .brand-flags-filter-btn.active {
  background: rgba(0, 255, 157, 0.15);
  border-color: #00ff9d;
  color: #00ff9d;
}

html[data-theme="cyberpunk"] .brand-flags-summary-item {
  background: #0d1520;
  border-color: rgba(0, 255, 157, 0.15);
  color: #00ff9d;
}

html[data-theme="cyberpunk"] .brand-flags-summary-item.active {
  border-color: rgba(0, 255, 157, 0.4);
  color: #00ff9d;
}

html[data-theme="cyberpunk"] .brand-flags-summary-item.inactive {
  border-color: rgba(0, 255, 157, 0.1);
  color: #00c875;
}

html[data-theme="cyberpunk"] .brand-flags-preview {
  background: #0d1520;
  border-color: rgba(0, 255, 157, 0.18);
  box-shadow: 0 0 20px rgba(0, 255, 157, 0.05), inset 0 0 1px rgba(0, 255, 157, 0.12);
}

html[data-theme="cyberpunk"] .brand-flags-preview-header {
  background: #070b0f;
  border-color: rgba(0, 255, 157, 0.15);
  color: #00ff9d;
}

html[data-theme="cyberpunk"] .brand-flags-preview-item {
  background: #0d1520;
  border-color: rgba(0, 255, 157, 0.1);
  color: #00ff9d;
}

html[data-theme="cyberpunk"] .brand-flags-preview-chip {
  background: rgba(0, 255, 157, 0.08);
  border-color: rgba(0, 255, 157, 0.2);
  color: #00c875;
}

html[data-theme="cyberpunk"] .brand-flags-readonly-notice {
  background: rgba(255, 171, 0, 0.08);
  border-color: rgba(255, 171, 0, 0.3);
  color: #ffab00;
}

html[data-theme="cyberpunk"] .brand-flags-error {
  background: rgba(255, 51, 102, 0.1);
  border-color: rgba(255, 51, 102, 0.3);
  color: #ff3366;
}

html[data-theme="cyberpunk"] .brand-flags-success {
  background: rgba(0, 255, 157, 0.1);
  border-color: rgba(0, 255, 157, 0.3);
  color: #00ff9d;
}

html[data-theme="cyberpunk"] .brand-flag-state-pill.active {
  background: rgba(0, 255, 157, 0.12);
  color: #00ff9d;
}

html[data-theme="cyberpunk"] .brand-flag-state-pill.inactive {
  background: rgba(0, 255, 157, 0.04);
  color: #00c875;
}

html[data-theme="cyberpunk"] .brand-flag-slider {
  background: rgba(0, 255, 157, 0.2);
}

/* ── Settings ───────────────────────────────────────────────────────────── */

html[data-theme="cyberpunk"] .settings-sidebar {
  background: #0d1520;
  border-color: rgba(0, 255, 157, 0.18);
  box-shadow: 0 0 20px rgba(0, 255, 157, 0.05), inset 0 0 1px rgba(0, 255, 157, 0.12);
}

html[data-theme="cyberpunk"] .settings-nav-item {
  background: #070b0f;
  border-color: rgba(0, 255, 157, 0.15);
  color: rgba(0, 255, 157, 0.6);
}

html[data-theme="cyberpunk"] .settings-nav-item:hover:not(:disabled) {
  background: rgba(0, 255, 157, 0.08);
  color: #00ff9d;
}

html[data-theme="cyberpunk"] .settings-nav-item.active {
  background: rgba(0, 255, 157, 0.15);
  color: #00ff9d;
  border-color: #00ff9d;
}

html[data-theme="cyberpunk"] .settings-content {
  background: #0d1520;
  border-color: rgba(0, 255, 157, 0.18);
  box-shadow: 0 0 20px rgba(0, 255, 157, 0.05), inset 0 0 1px rgba(0, 255, 157, 0.12);
}

html[data-theme="cyberpunk"] .settings-content-header {
  border-color: rgba(0, 255, 157, 0.15);
}

html[data-theme="cyberpunk"] .settings-content-header h2 {
  color: #00ff9d;
}

html[data-theme="cyberpunk"] .settings-section {
  background: #0d1520;
  box-shadow: 0 0 20px rgba(0, 255, 157, 0.05), inset 0 0 1px rgba(0, 255, 157, 0.12);
}

html[data-theme="cyberpunk"] .settings-section-title {
  color: #00ff9d;
  border-color: rgba(0, 255, 157, 0.2);
}

html[data-theme="cyberpunk"] .settings-section-hint {
  color: #00c875;
}

html[data-theme="cyberpunk"] .settings-input {
  background: #070b0f;
  border-color: rgba(0, 255, 157, 0.25);
  color: #00ff9d;
}

html[data-theme="cyberpunk"] .settings-input:focus {
  border-color: #00ff9d;
  box-shadow: 0 0 0 3px rgba(0, 255, 157, 0.12);
}

html[data-theme="cyberpunk"] .settings-input:disabled {
  background: #050810;
  color: #00c875;
  opacity: 0.6;
}

html[data-theme="cyberpunk"] .settings-label {
  color: #00ff9d;
}

html[data-theme="cyberpunk"] .settings-mode-btn {
  background: #070b0f;
  border-color: rgba(0, 255, 157, 0.2);
  color: rgba(0, 255, 157, 0.6);
}

html[data-theme="cyberpunk"] .settings-mode-btn:hover:not(:disabled) {
  background: rgba(0, 255, 157, 0.08);
  color: #00ff9d;
}

html[data-theme="cyberpunk"] .settings-mode-btn.active {
  background: #00ff9d;
  color: #070b0f;
  border-color: #00ff9d;
}

html[data-theme="cyberpunk"] .settings-instructions-preview {
  background: #070b0f;
  border-color: rgba(0, 255, 157, 0.2);
  color: #00ff9d;
}

html[data-theme="cyberpunk"] .settings-instructions-preview code {
  background: #050810;
  color: #00ffc8;
  border-color: rgba(0, 255, 157, 0.2);
}

html[data-theme="cyberpunk"] .settings-instructions-preview pre {
  background: #050810;
  border-color: rgba(0, 255, 157, 0.2);
}

html[data-theme="cyberpunk"] .settings-instructions-textarea {
  background: #070b0f;
  border-color: rgba(0, 255, 157, 0.25);
  color: #00ff9d;
}

html[data-theme="cyberpunk"] .settings-instructions-textarea:focus {
  border-color: #00ff9d;
  box-shadow: 0 0 0 3px rgba(0, 255, 157, 0.12);
}

html[data-theme="cyberpunk"] .settings-toggle-secret {
  color: #00c875;
}

html[data-theme="cyberpunk"] .settings-toggle-secret:hover {
  color: #00ff9d;
}

html[data-theme="cyberpunk"] .settings-confirm-modal {
  background: #0d1520;
  border: 1px solid rgba(0, 255, 157, 0.3);
  box-shadow: 0 0 40px rgba(0, 255, 157, 0.15);
  color: #00ff9d;
}

html[data-theme="cyberpunk"] .settings-confirm-header {
  background: #070b0f;
  border-color: rgba(0, 255, 157, 0.2);
}

html[data-theme="cyberpunk"] .settings-confirm-header h3 {
  color: #00ff9d;
}

html[data-theme="cyberpunk"] .settings-confirm-body {
  background: #0d1520;
  color: #00ff9d;
}

html[data-theme="cyberpunk"] .settings-confirm-changes {
  background: #070b0f;
  border-color: rgba(0, 255, 157, 0.18);
}

html[data-theme="cyberpunk"] .settings-confirm-arm input {
  background: #070b0f;
  border-color: rgba(0, 255, 157, 0.3);
  color: #00ff9d;
}

html[data-theme="cyberpunk"] .settings-visual-option {
  background: #070b0f;
  border-color: rgba(0, 255, 157, 0.2);
  color: rgba(0, 255, 157, 0.6);
}

html[data-theme="cyberpunk"] .settings-visual-option.selected {
  border-color: #00ff9d;
  color: #00ff9d;
  box-shadow: 0 0 0 3px rgba(0, 255, 157, 0.14);
}

html[data-theme="cyberpunk"] .settings-loading {
  background: #0d1520;
}

html[data-theme="cyberpunk"] .settings .btn-secondary:hover {
  background: rgba(0, 255, 157, 0.1);
}

html[data-theme="cyberpunk"] .settings-btn-ghost {
  background: transparent;
  border-color: rgba(0, 255, 157, 0.35);
  color: #00ff9d;
}

html[data-theme="cyberpunk"] .settings-btn-ghost:hover {
  background: rgba(0, 255, 157, 0.1);
}

html[data-theme="cyberpunk"] .settings-alert--error {
  background: rgba(255, 51, 102, 0.1);
  border-color: rgba(255, 51, 102, 0.3);
  color: #ff3366;
}

html[data-theme="cyberpunk"] .settings-alert--success {
  background: rgba(0, 255, 157, 0.1);
  border-color: rgba(0, 255, 157, 0.3);
  color: #00ff9d;
}

/* ── Analytics Hub ──────────────────────────────────────────────────────── */

html[data-theme="cyberpunk"] .hub-card {
  background: #0d1520;
  border: 1px solid rgba(0, 255, 157, 0.15);
  box-shadow: 0 2px 12px rgba(0, 255, 157, 0.08);
}

html[data-theme="cyberpunk"] .hub-card:hover {
  box-shadow: 0 6px 24px rgba(0, 255, 157, 0.15);
  border-color: rgba(0, 255, 157, 0.3);
}

html[data-theme="cyberpunk"] .hub-blue .hub-card-icon {
  background: rgba(14, 165, 233, 0.12);
  color: #0ea5e9;
}

html[data-theme="cyberpunk"] .hub-green .hub-card-icon {
  background: rgba(0, 255, 157, 0.12);
  color: #00ff9d;
}

html[data-theme="cyberpunk"] .hub-purple .hub-card-icon {
  background: rgba(139, 92, 246, 0.12);
  color: #a78bfa;
}

html[data-theme="cyberpunk"] .hub-orange .hub-card-icon {
  background: rgba(249, 115, 22, 0.12);
  color: #fb923c;
}

html[data-theme="cyberpunk"] .hub-red .hub-card-icon {
  background: rgba(239, 68, 68, 0.12);
  color: #f87171;
}

html[data-theme="cyberpunk"] .hub-teal .hub-card-icon {
  background: rgba(20, 184, 166, 0.12);
  color: #2dd4bf;
}

html[data-theme="cyberpunk"] .hub-gold .hub-card-icon {
  background: rgba(217, 119, 6, 0.12);
  color: #fbbf24;
}

/* ── Analytics Reports ──────────────────────────────────────────────────── */

html[data-theme="cyberpunk"] .period-btn {
  background: #0d1520;
  border-color: rgba(0, 255, 157, 0.2);
  color: rgba(0, 255, 157, 0.65);
}

html[data-theme="cyberpunk"] .period-btn:hover {
  background: rgba(0, 255, 157, 0.08);
  color: #00ff9d;
}

html[data-theme="cyberpunk"] .period-btn.active {
  background: #00ff9d;
  color: #070b0f;
}

html[data-theme="cyberpunk"] .kpi-card {
  background: #0d1520;
  border: 1px solid rgba(0, 255, 157, 0.15);
  box-shadow: 0 2px 12px rgba(0, 255, 157, 0.06);
}

html[data-theme="cyberpunk"] .analytics-card {
  background: #0d1520;
  border: 1px solid rgba(0, 255, 157, 0.15);
  box-shadow: 0 2px 12px rgba(0, 255, 157, 0.06);
}

html[data-theme="cyberpunk"] .donut-center {
  background: #070b0f;
  color: #00ff9d;
}

html[data-theme="cyberpunk"] .bar-track {
  background: rgba(0, 255, 157, 0.08);
}

html[data-theme="cyberpunk"] .analytics-card-title {
  color: #00ff9d;
}

html[data-theme="cyberpunk"] .kpi-label {
  color: rgba(0, 255, 157, 0.7);
}

html[data-theme="cyberpunk"] .kpi-value {
  color: #00ff9d;
}

html[data-theme="cyberpunk"] .kpi-sub {
  color: rgba(0, 255, 157, 0.6);
}

html[data-theme="cyberpunk"] .segment-card {
  background: #0d1520;
  border: 1px solid rgba(0, 255, 157, 0.15);
}

html[data-theme="cyberpunk"] .segment-name {
  color: #00ff9d;
}

html[data-theme="cyberpunk"] .segment-stat-value {
  color: #00ff9d;
}

html[data-theme="cyberpunk"] .segment-stat-label {
  color: rgba(0, 255, 157, 0.6);
}

/* ── Reports ────────────────────────────────────────────────────────────── */

html[data-theme="cyberpunk"] .reports-page,
html[data-theme="cyberpunk"] .report-section,
html[data-theme="cyberpunk"] .sync-meta,
html[data-theme="cyberpunk"] .skipped-filters {
  background: transparent;
}

html[data-theme="cyberpunk"] .date-select {
  background: #0d1520;
  border-color: rgba(0, 255, 157, 0.25);
  color: #00ff9d;
  box-shadow: 0 0 20px rgba(0, 255, 157, 0.05), inset 0 0 1px rgba(0, 255, 157, 0.12);
}

html[data-theme="cyberpunk"] .date-select:focus {
  border-color: #00ff9d;
  box-shadow: 0 0 0 3px rgba(0, 255, 157, 0.12);
}

html[data-theme="cyberpunk"] .date-select:hover {
  border-color: rgba(0, 255, 157, 0.35);
}

html[data-theme="cyberpunk"] .date-select-arrow {
  color: #00c875;
}

html[data-theme="cyberpunk"] .date-select:focus + .date-select-arrow {
  color: #00ff9d;
}

html[data-theme="cyberpunk"] .meta-item {
  background: #0d1520;
  border-color: rgba(0, 255, 157, 0.18);
  color: #00ff9d;
  box-shadow: 0 0 20px rgba(0, 255, 157, 0.05), inset 0 0 1px rgba(0, 255, 157, 0.12);
}

html[data-theme="cyberpunk"] .meta-label {
  color: #00c875;
}

html[data-theme="cyberpunk"] .meta-value {
  color: #00ff9d;
}

html[data-theme="cyberpunk"] .report-section {
  background: #0d1520;
  border-color: rgba(0, 255, 157, 0.18);
  box-shadow: 0 0 20px rgba(0, 255, 157, 0.05), inset 0 0 1px rgba(0, 255, 157, 0.12);
}

html[data-theme="cyberpunk"] .section-header {
  border-color: rgba(0, 255, 157, 0.15);
}

html[data-theme="cyberpunk"] .section-title {
  color: #00ff9d;
}

html[data-theme="cyberpunk"] .section-count {
  color: #00c875;
}

html[data-theme="cyberpunk"] .product-row {
  background: #0d1520;
  border-color: rgba(0, 255, 157, 0.12);
  color: #00ff9d;
}

html[data-theme="cyberpunk"] .product-row:hover {
  background: rgba(0, 255, 157, 0.05);
}

html[data-theme="cyberpunk"] .product-name {
  color: #00ff9d;
}

html[data-theme="cyberpunk"] .product-id,
html[data-theme="cyberpunk"] .product-brand {
  color: #00c875;
}

html[data-theme="cyberpunk"] .skipped-reason-chip {
  background: rgba(0, 255, 157, 0.08);
  color: #00ff9d;
  border-color: rgba(0, 255, 157, 0.2);
}

html[data-theme="cyberpunk"] .skipped-filter-select,
html[data-theme="cyberpunk"] .skipped-search-input {
  background: #0d1520;
  border-color: rgba(0, 255, 157, 0.25);
  color: #00ff9d;
}

html[data-theme="cyberpunk"] .skipped-search-input:focus {
  border-color: #00ff9d;
  box-shadow: 0 0 0 3px rgba(0, 255, 157, 0.12);
}

html[data-theme="cyberpunk"] .search-icon {
  color: #00c875;
}

html[data-theme="cyberpunk"] .changes-toggle {
  background: rgba(0, 255, 157, 0.08);
  border-color: rgba(0, 255, 157, 0.2);
  color: #00ff9d;
}

html[data-theme="cyberpunk"] .changes-toggle:hover {
  background: rgba(0, 255, 157, 0.12);
}

html[data-theme="cyberpunk"] .changes-list {
  background: #070b0f;
  border-color: rgba(0, 255, 157, 0.2);
}

html[data-theme="cyberpunk"] .change-from {
  color: #ff3366;
}

html[data-theme="cyberpunk"] .change-to {
  color: #00ff9d;
}

html[data-theme="cyberpunk"] .change-field {
  color: #00c875;
}

html[data-theme="cyberpunk"] .section-count {
  background: rgba(0, 255, 157, 0.15);
  color: #070b0f;
}

html[data-theme="cyberpunk"] .section-header:hover {
  background: rgba(0, 255, 157, 0.05);
}

html[data-theme="cyberpunk"] .product-avatar {
  background: #070b0f;
  border-color: rgba(0, 255, 157, 0.2);
  color: #00c875;
}

html[data-theme="cyberpunk"] .skipped-results-count {
  background: #070b0f;
  border-color: rgba(0, 255, 157, 0.15);
  color: rgba(0, 255, 157, 0.7);
}

html[data-theme="cyberpunk"] .error-banner {
  background: rgba(255, 51, 102, 0.1);
  border-color: rgba(255, 51, 102, 0.3);
  color: #ff3366;
}

/* Rockstar Chat */
html[data-theme="cyberpunk"] .rockstar-chat-header {
  background: #040609 !important;
  color: #00ff9d !important;
}

html[data-theme="cyberpunk"] .rockstar-chat-panel {
  background: #070b0f !important;
}

html[data-theme="cyberpunk"] .rockstar-message.assistant {
  background: #0a0e18 !important;
  color: #00ff9d !important;
}

/* Rockstar Widget */
html[data-theme="cyberpunk"] .rockstar-widget-header {
  background: #040609 !important;
  color: #00ff9d !important;
}
html[data-theme="cyberpunk"] .rockstar-widget-header .actions button {
  background: rgba(0, 255, 157, 0.14) !important;
  color: #00ff9d !important;
  border: 1px solid rgba(0, 255, 157, 0.3) !important;
  border-radius: 6px !important;
}
html[data-theme="cyberpunk"] .rockstar-widget-header .actions button:hover {
  background: rgba(0, 255, 157, 0.28) !important;
}

html[data-theme="cyberpunk"] .rockstar-widget-panel {
  background: #0a0e18 !important;
}

html[data-theme="cyberpunk"] .rockstar-widget-messages .message.assistant {
  background: #070b0f !important;
  color: #00ff9d !important;
}

html[data-theme="cyberpunk"] .rockstar-widget-fab {
  background: #00ff9d !important;
  color: #040609 !important;
}

/* ── BranchAccess — ba-btn-add (fondo neon verde, texto oscuro) ── */
html[data-theme="cyberpunk"] .ba-btn-add {
  background: #00ff9d;
  color: #04080f;
  border: none;
  font-weight: 800;
  box-shadow: 0 0 14px rgba(0, 255, 157, 0.4);
}
html[data-theme="cyberpunk"] .ba-btn-add:hover {
  background: #00cc7a;
  color: #04080f;
  opacity: 1;
  box-shadow: 0 0 22px rgba(0, 255, 157, 0.6);
}

/* ── BranchAccess — ba-btn-save (fondo neon verde, texto oscuro) ── */
html[data-theme="cyberpunk"] .ba-btn-save {
  background: #00ff9d;
  color: #04080f;
  box-shadow: 0 0 10px rgba(0, 255, 157, 0.35);
}
html[data-theme="cyberpunk"] .ba-btn-save:hover:not(:disabled) {
  background: #00cc7a;
  color: #04080f;
  opacity: 1;
  box-shadow: 0 0 18px rgba(0, 255, 157, 0.55);
}

/* ══════════════════════════════════════════════════════════════════════════════
   ██████   █████  ██████  ██   ██    ███████  ██████  ██████   ██████ ███████
   ██   ██ ██   ██ ██   ██ ██  ██     ██      ██    ██ ██   ██ ██      ██
   ██   ██ ███████ ██████  █████      █████   ██    ██ ██████  ██      █████
   ██   ██ ██   ██ ██   ██ ██  ██     ██      ██    ██ ██   ██ ██      ██
   ██████  ██   ██ ██   ██ ██   ██    ██       ██████  ██   ██  ██████ ███████

   Star Wars Theme — "A long time ago, in a galaxy far, far away..."
   Inspired by the movie poster: deep black space · crimson red lightsaber ·
   electric blue lightsaber · fire orange explosion · stormtrooper white text
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── CSS Variables ─────────────────────────────────────────────────────────── */

html[data-theme="darkforce"] {
  --primary-color:      #c92020;
  --primary-dark:       #8b0000;
  --primary-light:      #e55050;
  --secondary-color:    #0a0a0a;
  --secondary-dark:     #000000;
  --accent-color:       #0088cc;
  --text-primary:       #f5f5f5;
  --text-secondary:     #999999;
  --text-light:         #555555;
  --bg-primary:         #000000;
  --bg-secondary:       #0a0a0a;
  --bg-dark:            #000000;
  --border-color:       rgba(201, 32, 32, 0.3);
  --success:            #00c853;
  --warning:            #ff8c00;
  --danger:             #c92020;
  --info:               #0088cc;
  --card-bg:            #0d0d0d;
  --input-bg:           #0d0d0d;
  --sidebar-bg:         #050505;
  --table-header-bg:    #050505;
  --hover-bg:           #130000;
  --badge-bg:           #0d0d0d;
  --img-placeholder-bg: #050505;
  --error-color:        #c92020;
}

/* ── Body & Starfield ─────────────────────────────────────────────────────── */

html[data-theme="darkforce"] body {
  background: #000000;
  color: #f5f5f5;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

@keyframes darkforcePulse {
  0%, 100% { opacity: 0.6; }
  50%       { opacity: 1.0; }
}

@keyframes darkforceTwinkle1 {
  0%, 100% { opacity: 0.3; } 50% { opacity: 1.0; }
}
@keyframes darkforceTwinkle2 {
  0%, 100% { opacity: 1.0; } 40% { opacity: 0.65; } 70% { opacity: 0.9; }
}
@keyframes darkforceTwinkle3 {
  0%, 100% { opacity: 1.0; } 60% { opacity: 0.1; }
}
@keyframes darkforceTwinkle4 {
  0%, 100% { opacity: 0.8; } 25% { opacity: 0.2; } 75% { opacity: 1.0; }
}

/* ── Star layers 3 & 4 on html element ──────────────────────────────────────── */

html[data-theme="darkforce"]::before {
  content: "";
  position: fixed;
  inset: 0;
  background:
    /* ── 1px stars – rows 1-4 ── */
    radial-gradient(1px 1px at  0%  3%,  rgba(255,255,255,0.85) 0%, transparent 100%),
    radial-gradient(1px 1px at  1% 62%,  rgba(255,255,255,0.70) 0%, transparent 100%),
    radial-gradient(1px 1px at  2% 29%,  rgba(255,255,255,0.90) 0%, transparent 100%),
    radial-gradient(1px 1px at  2% 77%,  rgba(255,255,255,0.60) 0%, transparent 100%),
    radial-gradient(1px 1px at  3% 45%,  rgba(255,255,255,0.80) 0%, transparent 100%),
    radial-gradient(1px 1px at  4% 11%,  rgba(255,255,255,0.65) 0%, transparent 100%),
    radial-gradient(1px 1px at  4% 85%,  rgba(255,255,255,0.90) 0%, transparent 100%),
    radial-gradient(1px 1px at  5% 56%,  rgba(255,255,255,0.75) 0%, transparent 100%),
    radial-gradient(1px 1px at  6% 23%,  rgba(255,255,255,0.85) 0%, transparent 100%),
    radial-gradient(1px 1px at  6% 94%,  rgba(255,255,255,0.60) 0%, transparent 100%),
    radial-gradient(1px 1px at  7% 38%,  rgba(255,255,255,0.80) 0%, transparent 100%),
    radial-gradient(1px 1px at  8% 70%,  rgba(255,255,255,0.70) 0%, transparent 100%),
    radial-gradient(1px 1px at  9%  7%,  rgba(255,255,255,0.90) 0%, transparent 100%),
    radial-gradient(1px 1px at  9% 53%,  rgba(255,255,255,0.65) 0%, transparent 100%),
    radial-gradient(1px 1px at 10% 88%,  rgba(255,255,255,0.80) 0%, transparent 100%),
    radial-gradient(1px 1px at 11% 18%,  rgba(255,255,255,0.75) 0%, transparent 100%),
    radial-gradient(1px 1px at 11% 66%,  rgba(255,255,255,0.90) 0%, transparent 100%),
    radial-gradient(1px 1px at 12% 34%,  rgba(255,255,255,0.60) 0%, transparent 100%),
    radial-gradient(1px 1px at 13%  1%,  rgba(255,255,255,0.85) 0%, transparent 100%),
    radial-gradient(1px 1px at 13% 81%,  rgba(255,255,255,0.70) 0%, transparent 100%),
    radial-gradient(1px 1px at 14% 47%,  rgba(255,255,255,0.80) 0%, transparent 100%),
    radial-gradient(1px 1px at 15% 24%,  rgba(255,255,255,0.65) 0%, transparent 100%),
    radial-gradient(1px 1px at 15% 72%,  rgba(255,255,255,0.90) 0%, transparent 100%),
    radial-gradient(1px 1px at 16% 57%,  rgba(255,255,255,0.75) 0%, transparent 100%),
    radial-gradient(1px 1px at 17% 13%,  rgba(255,255,255,0.85) 0%, transparent 100%),
    radial-gradient(1px 1px at 17% 96%,  rgba(255,255,255,0.60) 0%, transparent 100%),
    radial-gradient(1px 1px at 18% 43%,  rgba(255,255,255,0.80) 0%, transparent 100%),
    radial-gradient(1px 1px at 19% 79%,  rgba(255,255,255,0.70) 0%, transparent 100%),
    /* ── rows 5-8 ── */
    radial-gradient(1px 1px at 20%  5%,  rgba(255,255,255,0.90) 0%, transparent 100%),
    radial-gradient(1px 1px at 20% 63%,  rgba(255,255,255,0.65) 0%, transparent 100%),
    radial-gradient(1px 1px at 21% 28%,  rgba(255,255,255,0.80) 0%, transparent 100%),
    radial-gradient(1px 1px at 21% 91%,  rgba(255,255,255,0.85) 0%, transparent 100%),
    radial-gradient(1px 1px at 22% 49%,  rgba(255,255,255,0.60) 0%, transparent 100%),
    radial-gradient(1px 1px at 23% 16%,  rgba(255,255,255,0.90) 0%, transparent 100%),
    radial-gradient(1px 1px at 23% 76%,  rgba(255,255,255,0.75) 0%, transparent 100%),
    radial-gradient(1px 1px at 24% 39%,  rgba(255,255,255,0.85) 0%, transparent 100%),
    radial-gradient(1px 1px at 25%  2%,  rgba(255,255,255,0.65) 0%, transparent 100%),
    radial-gradient(1px 1px at 25% 86%,  rgba(255,255,255,0.80) 0%, transparent 100%),
    radial-gradient(1px 1px at 26% 54%,  rgba(255,255,255,0.70) 0%, transparent 100%),
    radial-gradient(1px 1px at 27% 22%,  rgba(255,255,255,0.90) 0%, transparent 100%),
    radial-gradient(1px 1px at 27% 93%,  rgba(255,255,255,0.60) 0%, transparent 100%),
    radial-gradient(1px 1px at 28% 67%,  rgba(255,255,255,0.80) 0%, transparent 100%),
    radial-gradient(1px 1px at 29% 10%,  rgba(255,255,255,0.75) 0%, transparent 100%),
    radial-gradient(1px 1px at 29% 45%,  rgba(255,255,255,0.85) 0%, transparent 100%),
    radial-gradient(1px 1px at 30% 83%,  rgba(255,255,255,0.65) 0%, transparent 100%),
    radial-gradient(1px 1px at 31% 31%,  rgba(255,255,255,0.90) 0%, transparent 100%),
    radial-gradient(1px 1px at 31% 59%,  rgba(255,255,255,0.60) 0%, transparent 100%),
    radial-gradient(1px 1px at 32% 73%,  rgba(255,255,255,0.80) 0%, transparent 100%),
    radial-gradient(1px 1px at 33% 19%,  rgba(255,255,255,0.70) 0%, transparent 100%),
    radial-gradient(1px 1px at 33% 97%,  rgba(255,255,255,0.85) 0%, transparent 100%),
    radial-gradient(1px 1px at 34% 41%,  rgba(255,255,255,0.75) 0%, transparent 100%),
    radial-gradient(1px 1px at 35%  8%,  rgba(255,255,255,0.90) 0%, transparent 100%),
    radial-gradient(1px 1px at 35% 64%,  rgba(255,255,255,0.65) 0%, transparent 100%),
    radial-gradient(1px 1px at 36% 88%,  rgba(255,255,255,0.80) 0%, transparent 100%),
    radial-gradient(1px 1px at 37% 26%,  rgba(255,255,255,0.60) 0%, transparent 100%),
    radial-gradient(1px 1px at 37% 52%,  rgba(255,255,255,0.85) 0%, transparent 100%),
    /* ── rows 9-12 ── */
    radial-gradient(1px 1px at 38% 77%,  rgba(255,255,255,0.70) 0%, transparent 100%),
    radial-gradient(1px 1px at 39% 14%,  rgba(255,255,255,0.90) 0%, transparent 100%),
    radial-gradient(1px 1px at 39% 61%,  rgba(255,255,255,0.75) 0%, transparent 100%),
    radial-gradient(1px 1px at 40% 35%,  rgba(255,255,255,0.80) 0%, transparent 100%),
    radial-gradient(1px 1px at 41%  3%,  rgba(255,255,255,0.65) 0%, transparent 100%),
    radial-gradient(1px 1px at 41% 90%,  rgba(255,255,255,0.85) 0%, transparent 100%),
    radial-gradient(1px 1px at 42% 48%,  rgba(255,255,255,0.60) 0%, transparent 100%),
    radial-gradient(1px 1px at 43% 21%,  rgba(255,255,255,0.90) 0%, transparent 100%),
    radial-gradient(1px 1px at 43% 69%,  rgba(255,255,255,0.75) 0%, transparent 100%),
    radial-gradient(1px 1px at 44% 84%,  rgba(255,255,255,0.80) 0%, transparent 100%),
    radial-gradient(1px 1px at 45%  6%,  rgba(255,255,255,0.65) 0%, transparent 100%),
    radial-gradient(1px 1px at 45% 37%,  rgba(255,255,255,0.85) 0%, transparent 100%),
    radial-gradient(1px 1px at 46% 95%,  rgba(255,255,255,0.70) 0%, transparent 100%),
    radial-gradient(1px 1px at 47% 55%,  rgba(255,255,255,0.90) 0%, transparent 100%),
    radial-gradient(1px 1px at 48% 27%,  rgba(255,255,255,0.60) 0%, transparent 100%),
    radial-gradient(1px 1px at 48% 72%,  rgba(255,255,255,0.80) 0%, transparent 100%),
    radial-gradient(1px 1px at 49% 11%,  rgba(255,255,255,0.75) 0%, transparent 100%),
    radial-gradient(1px 1px at 49% 44%,  rgba(255,255,255,0.85) 0%, transparent 100%),
    radial-gradient(1px 1px at 50% 80%,  rgba(255,255,255,0.65) 0%, transparent 100%),
    radial-gradient(1px 1px at 51% 33%,  rgba(255,255,255,0.90) 0%, transparent 100%),
    radial-gradient(1px 1px at 51% 58%,  rgba(255,255,255,0.70) 0%, transparent 100%),
    radial-gradient(1px 1px at 52% 19%,  rgba(255,255,255,0.80) 0%, transparent 100%),
    radial-gradient(1px 1px at 52% 93%,  rgba(255,255,255,0.60) 0%, transparent 100%),
    radial-gradient(1px 1px at 53% 47%,  rgba(255,255,255,0.85) 0%, transparent 100%),
    radial-gradient(1px 1px at 54%  2%,  rgba(255,255,255,0.75) 0%, transparent 100%),
    radial-gradient(1px 1px at 54% 66%,  rgba(255,255,255,0.90) 0%, transparent 100%),
    radial-gradient(1px 1px at 55% 38%,  rgba(255,255,255,0.65) 0%, transparent 100%),
    radial-gradient(1px 1px at 55% 86%,  rgba(255,255,255,0.80) 0%, transparent 100%),
    /* ── rows 13-16 ── */
    radial-gradient(1px 1px at 56% 14%,  rgba(255,255,255,0.70) 0%, transparent 100%),
    radial-gradient(1px 1px at 56% 52%,  rgba(255,255,255,0.85) 0%, transparent 100%),
    radial-gradient(1px 1px at 57% 75%,  rgba(255,255,255,0.60) 0%, transparent 100%),
    radial-gradient(1px 1px at 58% 29%,  rgba(255,255,255,0.90) 0%, transparent 100%),
    radial-gradient(1px 1px at 58% 64%,  rgba(255,255,255,0.75) 0%, transparent 100%),
    radial-gradient(1px 1px at 59%  9%,  rgba(255,255,255,0.80) 0%, transparent 100%),
    radial-gradient(1px 1px at 59% 91%,  rgba(255,255,255,0.65) 0%, transparent 100%),
    radial-gradient(1px 1px at 60% 42%,  rgba(255,255,255,0.85) 0%, transparent 100%),
    radial-gradient(1px 1px at 61% 17%,  rgba(255,255,255,0.70) 0%, transparent 100%),
    radial-gradient(1px 1px at 61% 78%,  rgba(255,255,255,0.90) 0%, transparent 100%),
    radial-gradient(1px 1px at 62% 55%,  rgba(255,255,255,0.60) 0%, transparent 100%),
    radial-gradient(1px 1px at 63%  4%,  rgba(255,255,255,0.80) 0%, transparent 100%),
    radial-gradient(1px 1px at 63% 32%,  rgba(255,255,255,0.75) 0%, transparent 100%),
    radial-gradient(1px 1px at 64% 88%,  rgba(255,255,255,0.85) 0%, transparent 100%),
    radial-gradient(1px 1px at 65% 23%,  rgba(255,255,255,0.65) 0%, transparent 100%),
    radial-gradient(1px 1px at 65% 69%,  rgba(255,255,255,0.90) 0%, transparent 100%),
    radial-gradient(1px 1px at 66% 46%,  rgba(255,255,255,0.70) 0%, transparent 100%),
    radial-gradient(1px 1px at 67%  1%,  rgba(255,255,255,0.80) 0%, transparent 100%),
    radial-gradient(1px 1px at 67% 83%,  rgba(255,255,255,0.60) 0%, transparent 100%),
    radial-gradient(1px 1px at 68% 37%,  rgba(255,255,255,0.85) 0%, transparent 100%),
    radial-gradient(1px 1px at 69% 60%,  rgba(255,255,255,0.75) 0%, transparent 100%),
    radial-gradient(1px 1px at 69% 15%,  rgba(255,255,255,0.90) 0%, transparent 100%),
    radial-gradient(1px 1px at 70% 97%,  rgba(255,255,255,0.65) 0%, transparent 100%),
    radial-gradient(1px 1px at 70% 50%,  rgba(255,255,255,0.80) 0%, transparent 100%),
    radial-gradient(1px 1px at 71% 26%,  rgba(255,255,255,0.70) 0%, transparent 100%),
    radial-gradient(1px 1px at 71% 74%,  rgba(255,255,255,0.85) 0%, transparent 100%),
    radial-gradient(1px 1px at 72%  8%,  rgba(255,255,255,0.60) 0%, transparent 100%),
    radial-gradient(1px 1px at 72% 43%,  rgba(255,255,255,0.90) 0%, transparent 100%),
    radial-gradient(1px 1px at 73% 68%,  rgba(255,255,255,0.75) 0%, transparent 100%),
    radial-gradient(1px 1px at 74% 31%,  rgba(255,255,255,0.80) 0%, transparent 100%),
    radial-gradient(1px 1px at 74% 93%,  rgba(255,255,255,0.65) 0%, transparent 100%),
    radial-gradient(1px 1px at 75% 57%,  rgba(255,255,255,0.85) 0%, transparent 100%),
    radial-gradient(1px 1px at 76% 12%,  rgba(255,255,255,0.70) 0%, transparent 100%),
    radial-gradient(1px 1px at 76% 79%,  rgba(255,255,255,0.90) 0%, transparent 100%),
    radial-gradient(1px 1px at 77% 44%,  rgba(255,255,255,0.60) 0%, transparent 100%),
    radial-gradient(1px 1px at 78%  6%,  rgba(255,255,255,0.80) 0%, transparent 100%),
    radial-gradient(1px 1px at 78% 88%,  rgba(255,255,255,0.75) 0%, transparent 100%),
    radial-gradient(1px 1px at 79% 34%,  rgba(255,255,255,0.85) 0%, transparent 100%),
    radial-gradient(1px 1px at 80% 61%,  rgba(255,255,255,0.65) 0%, transparent 100%),
    radial-gradient(1px 1px at 80% 17%,  rgba(255,255,255,0.90) 0%, transparent 100%),
    radial-gradient(1px 1px at 81% 76%,  rgba(255,255,255,0.70) 0%, transparent 100%),
    radial-gradient(1px 1px at 82% 28%,  rgba(255,255,255,0.80) 0%, transparent 100%),
    radial-gradient(1px 1px at 82% 53%,  rgba(255,255,255,0.60) 0%, transparent 100%),
    radial-gradient(1px 1px at 83% 89%,  rgba(255,255,255,0.85) 0%, transparent 100%),
    radial-gradient(1px 1px at 84%  3%,  rgba(255,255,255,0.75) 0%, transparent 100%),
    radial-gradient(1px 1px at 84% 41%,  rgba(255,255,255,0.90) 0%, transparent 100%),
    radial-gradient(1px 1px at 85% 67%,  rgba(255,255,255,0.65) 0%, transparent 100%),
    radial-gradient(1px 1px at 86%  9%,  rgba(255,255,255,0.80) 0%, transparent 100%),
    radial-gradient(1px 1px at 86% 83%,  rgba(255,255,255,0.70) 0%, transparent 100%),
    radial-gradient(1px 1px at 87% 50%,  rgba(255,255,255,0.85) 0%, transparent 100%),
    radial-gradient(1px 1px at 88% 22%,  rgba(255,255,255,0.60) 0%, transparent 100%),
    radial-gradient(1px 1px at 88% 71%,  rgba(255,255,255,0.90) 0%, transparent 100%),
    radial-gradient(1px 1px at 89% 38%,  rgba(255,255,255,0.75) 0%, transparent 100%),
    radial-gradient(1px 1px at 90%  0%,  rgba(255,255,255,0.80) 0%, transparent 100%),
    radial-gradient(1px 1px at 90% 59%,  rgba(255,255,255,0.65) 0%, transparent 100%),
    radial-gradient(1px 1px at 91% 84%,  rgba(255,255,255,0.85) 0%, transparent 100%),
    radial-gradient(1px 1px at 92% 25%,  rgba(255,255,255,0.70) 0%, transparent 100%),
    radial-gradient(1px 1px at 92% 48%,  rgba(255,255,255,0.90) 0%, transparent 100%),
    radial-gradient(1px 1px at 93% 73%,  rgba(255,255,255,0.60) 0%, transparent 100%),
    radial-gradient(1px 1px at 94%  7%,  rgba(255,255,255,0.80) 0%, transparent 100%),
    radial-gradient(1px 1px at 94% 31%,  rgba(255,255,255,0.75) 0%, transparent 100%),
    radial-gradient(1px 1px at 95% 92%,  rgba(255,255,255,0.85) 0%, transparent 100%),
    radial-gradient(1px 1px at 96% 56%,  rgba(255,255,255,0.65) 0%, transparent 100%),
    radial-gradient(1px 1px at 96% 18%,  rgba(255,255,255,0.90) 0%, transparent 100%),
    radial-gradient(1px 1px at 97% 78%,  rgba(255,255,255,0.70) 0%, transparent 100%),
    radial-gradient(1px 1px at 98% 42%,  rgba(255,255,255,0.80) 0%, transparent 100%),
    radial-gradient(1px 1px at 98% 13%,  rgba(255,255,255,0.60) 0%, transparent 100%),
    radial-gradient(1px 1px at 99% 65%,  rgba(255,255,255,0.85) 0%, transparent 100%),
    radial-gradient(1px 1px at 99% 99%,  rgba(255,255,255,0.75) 0%, transparent 100%),
    /* ── 2px accent stars layer 3 ── */
    radial-gradient(2px 2px at  5% 44%,  #fff 0%, transparent 100%),
    radial-gradient(2px 2px at 14% 77%,  #fff 0%, transparent 100%),
    radial-gradient(2px 2px at 22% 11%,  #fff 0%, transparent 100%),
    radial-gradient(2px 2px at 31% 68%,  #fff 0%, transparent 100%),
    radial-gradient(2px 2px at 40% 33%,  #fff 0%, transparent 100%),
    radial-gradient(2px 2px at 50% 87%,  #fff 0%, transparent 100%),
    radial-gradient(2px 2px at 60% 19%,  #fff 0%, transparent 100%),
    radial-gradient(2px 2px at 71% 54%,  #fff 0%, transparent 100%),
    radial-gradient(2px 2px at 82% 89%,  #fff 0%, transparent 100%),
    radial-gradient(2px 2px at 91% 23%,  #fff 0%, transparent 100%),
    /* ── extra blue / red accents layer 3 ── */
    radial-gradient(2px 2px at 62% 35%,  rgba(0,180,255,0.90) 0%, transparent 100%),
    radial-gradient(2px 2px at 74% 82%,  rgba(0,160,240,0.85) 0%, transparent 100%),
    radial-gradient(2px 2px at 86% 49%,  rgba(0,136,204,0.95) 0%, transparent 100%),
    radial-gradient(3px 3px at 79% 21%,  rgba(0,180,255,1.00) 0%, transparent 100%),
    radial-gradient(2px 2px at  8% 58%,  rgba(220,50,50,0.90)  0%, transparent 100%),
    radial-gradient(2px 2px at 20% 37%,  rgba(201,32,32,0.85)  0%, transparent 100%),
    radial-gradient(3px 3px at 12% 76%,  rgba(220,50,50,1.00)  0%, transparent 100%);
  pointer-events: none;
  z-index: 0;
  animation: darkforceTwinkle1 13s ease-in-out infinite;
}

html[data-theme="darkforce"]::after {
  content: "";
  position: fixed;
  inset: 0;
  background:
    /* ── 1px stars – rows 1-4 ── */
    radial-gradient(1px 1px at  0% 46%,  rgba(255,255,255,0.80) 0%, transparent 100%),
    radial-gradient(1px 1px at  1% 17%,  rgba(255,255,255,0.65) 0%, transparent 100%),
    radial-gradient(1px 1px at  1% 82%,  rgba(255,255,255,0.90) 0%, transparent 100%),
    radial-gradient(1px 1px at  2% 51%,  rgba(255,255,255,0.70) 0%, transparent 100%),
    radial-gradient(1px 1px at  3%  8%,  rgba(255,255,255,0.85) 0%, transparent 100%),
    radial-gradient(1px 1px at  3% 69%,  rgba(255,255,255,0.60) 0%, transparent 100%),
    radial-gradient(1px 1px at  4% 36%,  rgba(255,255,255,0.80) 0%, transparent 100%),
    radial-gradient(1px 1px at  5% 92%,  rgba(255,255,255,0.75) 0%, transparent 100%),
    radial-gradient(1px 1px at  5% 23%,  rgba(255,255,255,0.85) 0%, transparent 100%),
    radial-gradient(1px 1px at  6% 57%,  rgba(255,255,255,0.60) 0%, transparent 100%),
    radial-gradient(1px 1px at  7% 14%,  rgba(255,255,255,0.90) 0%, transparent 100%),
    radial-gradient(1px 1px at  7% 74%,  rgba(255,255,255,0.70) 0%, transparent 100%),
    radial-gradient(1px 1px at  8% 41%,  rgba(255,255,255,0.80) 0%, transparent 100%),
    radial-gradient(1px 1px at  9%  3%,  rgba(255,255,255,0.65) 0%, transparent 100%),
    radial-gradient(1px 1px at  9% 88%,  rgba(255,255,255,0.85) 0%, transparent 100%),
    radial-gradient(1px 1px at 10% 28%,  rgba(255,255,255,0.75) 0%, transparent 100%),
    radial-gradient(1px 1px at 10% 63%,  rgba(255,255,255,0.90) 0%, transparent 100%),
    radial-gradient(1px 1px at 11% 49%,  rgba(255,255,255,0.60) 0%, transparent 100%),
    radial-gradient(1px 1px at 12% 16%,  rgba(255,255,255,0.80) 0%, transparent 100%),
    radial-gradient(1px 1px at 12% 95%,  rgba(255,255,255,0.70) 0%, transparent 100%),
    radial-gradient(1px 1px at 13% 38%,  rgba(255,255,255,0.85) 0%, transparent 100%),
    radial-gradient(1px 1px at 14% 73%,  rgba(255,255,255,0.65) 0%, transparent 100%),
    radial-gradient(1px 1px at 14% 22%,  rgba(255,255,255,0.90) 0%, transparent 100%),
    radial-gradient(1px 1px at 15% 57%,  rgba(255,255,255,0.75) 0%, transparent 100%),
    radial-gradient(1px 1px at 16%  0%,  rgba(255,255,255,0.80) 0%, transparent 100%),
    radial-gradient(1px 1px at 16% 84%,  rgba(255,255,255,0.60) 0%, transparent 100%),
    radial-gradient(1px 1px at 17% 44%,  rgba(255,255,255,0.85) 0%, transparent 100%),
    radial-gradient(1px 1px at 18% 12%,  rgba(255,255,255,0.70) 0%, transparent 100%),
    radial-gradient(1px 1px at 18% 67%,  rgba(255,255,255,0.90) 0%, transparent 100%),
    radial-gradient(1px 1px at 19% 31%,  rgba(255,255,255,0.65) 0%, transparent 100%),
    /* ── rows 5-8 ── */
    radial-gradient(1px 1px at 20% 98%,  rgba(255,255,255,0.80) 0%, transparent 100%),
    radial-gradient(1px 1px at 21% 54%,  rgba(255,255,255,0.75) 0%, transparent 100%),
    radial-gradient(1px 1px at 21% 19%,  rgba(255,255,255,0.85) 0%, transparent 100%),
    radial-gradient(1px 1px at 22% 77%,  rgba(255,255,255,0.60) 0%, transparent 100%),
    radial-gradient(1px 1px at 23% 43%,  rgba(255,255,255,0.90) 0%, transparent 100%),
    radial-gradient(1px 1px at 23%  7%,  rgba(255,255,255,0.70) 0%, transparent 100%),
    radial-gradient(1px 1px at 24% 62%,  rgba(255,255,255,0.80) 0%, transparent 100%),
    radial-gradient(1px 1px at 25% 29%,  rgba(255,255,255,0.65) 0%, transparent 100%),
    radial-gradient(1px 1px at 25% 91%,  rgba(255,255,255,0.85) 0%, transparent 100%),
    radial-gradient(1px 1px at 26% 48%,  rgba(255,255,255,0.75) 0%, transparent 100%),
    radial-gradient(1px 1px at 27% 14%,  rgba(255,255,255,0.90) 0%, transparent 100%),
    radial-gradient(1px 1px at 27% 70%,  rgba(255,255,255,0.60) 0%, transparent 100%),
    radial-gradient(1px 1px at 28% 35%,  rgba(255,255,255,0.80) 0%, transparent 100%),
    radial-gradient(1px 1px at 29% 82%,  rgba(255,255,255,0.70) 0%, transparent 100%),
    radial-gradient(1px 1px at 29%  2%,  rgba(255,255,255,0.85) 0%, transparent 100%),
    radial-gradient(1px 1px at 30% 56%,  rgba(255,255,255,0.65) 0%, transparent 100%),
    radial-gradient(1px 1px at 31% 24%,  rgba(255,255,255,0.90) 0%, transparent 100%),
    radial-gradient(1px 1px at 31% 93%,  rgba(255,255,255,0.75) 0%, transparent 100%),
    radial-gradient(1px 1px at 32% 40%,  rgba(255,255,255,0.80) 0%, transparent 100%),
    radial-gradient(1px 1px at 33%  9%,  rgba(255,255,255,0.60) 0%, transparent 100%),
    radial-gradient(1px 1px at 33% 75%,  rgba(255,255,255,0.85) 0%, transparent 100%),
    radial-gradient(1px 1px at 34% 52%,  rgba(255,255,255,0.70) 0%, transparent 100%),
    radial-gradient(1px 1px at 35% 18%,  rgba(255,255,255,0.90) 0%, transparent 100%),
    radial-gradient(1px 1px at 35% 87%,  rgba(255,255,255,0.65) 0%, transparent 100%),
    radial-gradient(1px 1px at 36% 33%,  rgba(255,255,255,0.80) 0%, transparent 100%),
    radial-gradient(1px 1px at 37% 69%,  rgba(255,255,255,0.75) 0%, transparent 100%),
    radial-gradient(1px 1px at 37%  5%,  rgba(255,255,255,0.85) 0%, transparent 100%),
    radial-gradient(1px 1px at 38% 47%,  rgba(255,255,255,0.60) 0%, transparent 100%),
    radial-gradient(1px 1px at 39% 91%,  rgba(255,255,255,0.90) 0%, transparent 100%),
    radial-gradient(1px 1px at 39% 26%,  rgba(255,255,255,0.70) 0%, transparent 100%),
    /* ── rows 9-16 ── */
    radial-gradient(1px 1px at 40% 61%,  rgba(255,255,255,0.80) 0%, transparent 100%),
    radial-gradient(1px 1px at 41% 13%,  rgba(255,255,255,0.65) 0%, transparent 100%),
    radial-gradient(1px 1px at 41% 78%,  rgba(255,255,255,0.85) 0%, transparent 100%),
    radial-gradient(1px 1px at 42% 39%,  rgba(255,255,255,0.75) 0%, transparent 100%),
    radial-gradient(1px 1px at 43%  1%,  rgba(255,255,255,0.90) 0%, transparent 100%),
    radial-gradient(1px 1px at 43% 55%,  rgba(255,255,255,0.60) 0%, transparent 100%),
    radial-gradient(1px 1px at 44% 86%,  rgba(255,255,255,0.80) 0%, transparent 100%),
    radial-gradient(1px 1px at 45% 23%,  rgba(255,255,255,0.70) 0%, transparent 100%),
    radial-gradient(1px 1px at 45% 47%,  rgba(255,255,255,0.85) 0%, transparent 100%),
    radial-gradient(1px 1px at 46% 71%,  rgba(255,255,255,0.65) 0%, transparent 100%),
    radial-gradient(1px 1px at 47%  8%,  rgba(255,255,255,0.90) 0%, transparent 100%),
    radial-gradient(1px 1px at 47% 32%,  rgba(255,255,255,0.75) 0%, transparent 100%),
    radial-gradient(1px 1px at 48% 94%,  rgba(255,255,255,0.80) 0%, transparent 100%),
    radial-gradient(1px 1px at 49% 60%,  rgba(255,255,255,0.60) 0%, transparent 100%),
    radial-gradient(1px 1px at 50% 17%,  rgba(255,255,255,0.85) 0%, transparent 100%),
    radial-gradient(1px 1px at 50% 76%,  rgba(255,255,255,0.70) 0%, transparent 100%),
    radial-gradient(1px 1px at 51% 41%,  rgba(255,255,255,0.90) 0%, transparent 100%),
    radial-gradient(1px 1px at 52%  3%,  rgba(255,255,255,0.65) 0%, transparent 100%),
    radial-gradient(1px 1px at 52% 88%,  rgba(255,255,255,0.80) 0%, transparent 100%),
    radial-gradient(1px 1px at 53% 26%,  rgba(255,255,255,0.75) 0%, transparent 100%),
    radial-gradient(1px 1px at 53% 64%,  rgba(255,255,255,0.85) 0%, transparent 100%),
    radial-gradient(1px 1px at 54% 50%,  rgba(255,255,255,0.60) 0%, transparent 100%),
    radial-gradient(1px 1px at 55% 12%,  rgba(255,255,255,0.90) 0%, transparent 100%),
    radial-gradient(1px 1px at 55% 83%,  rgba(255,255,255,0.70) 0%, transparent 100%),
    radial-gradient(1px 1px at 56% 37%,  rgba(255,255,255,0.80) 0%, transparent 100%),
    radial-gradient(1px 1px at 57%  0%,  rgba(255,255,255,0.65) 0%, transparent 100%),
    radial-gradient(1px 1px at 57% 69%,  rgba(255,255,255,0.85) 0%, transparent 100%),
    radial-gradient(1px 1px at 58% 28%,  rgba(255,255,255,0.75) 0%, transparent 100%),
    radial-gradient(1px 1px at 59% 92%,  rgba(255,255,255,0.90) 0%, transparent 100%),
    radial-gradient(1px 1px at 59% 45%,  rgba(255,255,255,0.60) 0%, transparent 100%),
    radial-gradient(1px 1px at 60% 16%,  rgba(255,255,255,0.80) 0%, transparent 100%),
    radial-gradient(1px 1px at 60% 73%,  rgba(255,255,255,0.70) 0%, transparent 100%),
    radial-gradient(1px 1px at 61% 53%,  rgba(255,255,255,0.85) 0%, transparent 100%),
    radial-gradient(1px 1px at 62%  9%,  rgba(255,255,255,0.65) 0%, transparent 100%),
    radial-gradient(1px 1px at 62% 87%,  rgba(255,255,255,0.90) 0%, transparent 100%),
    radial-gradient(1px 1px at 63% 34%,  rgba(255,255,255,0.75) 0%, transparent 100%),
    radial-gradient(1px 1px at 64% 61%,  rgba(255,255,255,0.80) 0%, transparent 100%),
    radial-gradient(1px 1px at 64% 22%,  rgba(255,255,255,0.60) 0%, transparent 100%),
    radial-gradient(1px 1px at 65% 96%,  rgba(255,255,255,0.85) 0%, transparent 100%),
    radial-gradient(1px 1px at 66% 48%,  rgba(255,255,255,0.70) 0%, transparent 100%),
    radial-gradient(1px 1px at 66% 11%,  rgba(255,255,255,0.90) 0%, transparent 100%),
    radial-gradient(1px 1px at 67% 79%,  rgba(255,255,255,0.65) 0%, transparent 100%),
    radial-gradient(1px 1px at 68% 36%,  rgba(255,255,255,0.80) 0%, transparent 100%),
    radial-gradient(1px 1px at 68% 57%,  rgba(255,255,255,0.75) 0%, transparent 100%),
    radial-gradient(1px 1px at 69% 90%,  rgba(255,255,255,0.85) 0%, transparent 100%),
    radial-gradient(1px 1px at 70% 25%,  rgba(255,255,255,0.60) 0%, transparent 100%),
    radial-gradient(1px 1px at 70% 63%,  rgba(255,255,255,0.90) 0%, transparent 100%),
    radial-gradient(1px 1px at 71%  4%,  rgba(255,255,255,0.70) 0%, transparent 100%),
    radial-gradient(1px 1px at 71% 43%,  rgba(255,255,255,0.80) 0%, transparent 100%),
    radial-gradient(1px 1px at 72% 82%,  rgba(255,255,255,0.65) 0%, transparent 100%),
    radial-gradient(1px 1px at 73% 19%,  rgba(255,255,255,0.85) 0%, transparent 100%),
    radial-gradient(1px 1px at 73% 51%,  rgba(255,255,255,0.75) 0%, transparent 100%),
    radial-gradient(1px 1px at 74% 74%,  rgba(255,255,255,0.90) 0%, transparent 100%),
    radial-gradient(1px 1px at 75%  7%,  rgba(255,255,255,0.60) 0%, transparent 100%),
    radial-gradient(1px 1px at 75% 38%,  rgba(255,255,255,0.80) 0%, transparent 100%),
    radial-gradient(1px 1px at 76% 95%,  rgba(255,255,255,0.70) 0%, transparent 100%),
    radial-gradient(1px 1px at 76% 66%,  rgba(255,255,255,0.85) 0%, transparent 100%),
    radial-gradient(1px 1px at 77% 29%,  rgba(255,255,255,0.65) 0%, transparent 100%),
    radial-gradient(1px 1px at 78%  1%,  rgba(255,255,255,0.90) 0%, transparent 100%),
    radial-gradient(1px 1px at 78% 55%,  rgba(255,255,255,0.75) 0%, transparent 100%),
    radial-gradient(1px 1px at 79% 88%,  rgba(255,255,255,0.80) 0%, transparent 100%),
    radial-gradient(1px 1px at 80% 42%,  rgba(255,255,255,0.60) 0%, transparent 100%),
    radial-gradient(1px 1px at 80% 15%,  rgba(255,255,255,0.85) 0%, transparent 100%),
    radial-gradient(1px 1px at 81% 71%,  rgba(255,255,255,0.70) 0%, transparent 100%),
    radial-gradient(1px 1px at 82% 34%,  rgba(255,255,255,0.90) 0%, transparent 100%),
    radial-gradient(1px 1px at 82% 59%,  rgba(255,255,255,0.65) 0%, transparent 100%),
    radial-gradient(1px 1px at 83% 93%,  rgba(255,255,255,0.80) 0%, transparent 100%),
    radial-gradient(1px 1px at 84%  8%,  rgba(255,255,255,0.75) 0%, transparent 100%),
    radial-gradient(1px 1px at 84% 47%,  rgba(255,255,255,0.85) 0%, transparent 100%),
    radial-gradient(1px 1px at 85% 76%,  rgba(255,255,255,0.60) 0%, transparent 100%),
    radial-gradient(1px 1px at 86% 23%,  rgba(255,255,255,0.90) 0%, transparent 100%),
    radial-gradient(1px 1px at 86% 62%,  rgba(255,255,255,0.70) 0%, transparent 100%),
    radial-gradient(1px 1px at 87%  0%,  rgba(255,255,255,0.80) 0%, transparent 100%),
    radial-gradient(1px 1px at 87% 85%,  rgba(255,255,255,0.65) 0%, transparent 100%),
    radial-gradient(1px 1px at 88% 37%,  rgba(255,255,255,0.85) 0%, transparent 100%),
    radial-gradient(1px 1px at 89% 16%,  rgba(255,255,255,0.75) 0%, transparent 100%),
    radial-gradient(1px 1px at 89% 54%,  rgba(255,255,255,0.90) 0%, transparent 100%),
    radial-gradient(1px 1px at 90% 91%,  rgba(255,255,255,0.60) 0%, transparent 100%),
    radial-gradient(1px 1px at 91% 28%,  rgba(255,255,255,0.80) 0%, transparent 100%),
    radial-gradient(1px 1px at 91% 67%,  rgba(255,255,255,0.70) 0%, transparent 100%),
    radial-gradient(1px 1px at 92%  5%,  rgba(255,255,255,0.85) 0%, transparent 100%),
    radial-gradient(1px 1px at 92% 44%,  rgba(255,255,255,0.65) 0%, transparent 100%),
    radial-gradient(1px 1px at 93% 79%,  rgba(255,255,255,0.90) 0%, transparent 100%),
    radial-gradient(1px 1px at 94% 20%,  rgba(255,255,255,0.75) 0%, transparent 100%),
    radial-gradient(1px 1px at 94% 58%,  rgba(255,255,255,0.80) 0%, transparent 100%),
    radial-gradient(1px 1px at 95% 96%,  rgba(255,255,255,0.60) 0%, transparent 100%),
    radial-gradient(1px 1px at 96% 33%,  rgba(255,255,255,0.85) 0%, transparent 100%),
    radial-gradient(1px 1px at 96% 71%,  rgba(255,255,255,0.70) 0%, transparent 100%),
    radial-gradient(1px 1px at 97% 11%,  rgba(255,255,255,0.90) 0%, transparent 100%),
    radial-gradient(1px 1px at 97% 49%,  rgba(255,255,255,0.65) 0%, transparent 100%),
    radial-gradient(1px 1px at 98% 84%,  rgba(255,255,255,0.80) 0%, transparent 100%),
    radial-gradient(1px 1px at 98% 38%,  rgba(255,255,255,0.75) 0%, transparent 100%),
    radial-gradient(1px 1px at 99%  6%,  rgba(255,255,255,0.85) 0%, transparent 100%),
    radial-gradient(1px 1px at 99% 61%,  rgba(255,255,255,0.60) 0%, transparent 100%),
    /* ── 2px accent stars layer 4 ── */
    radial-gradient(2px 2px at  9% 53%,  #fff 0%, transparent 100%),
    radial-gradient(2px 2px at 20% 87%,  #fff 0%, transparent 100%),
    radial-gradient(2px 2px at 33% 21%,  #fff 0%, transparent 100%),
    radial-gradient(2px 2px at 46% 64%,  #fff 0%, transparent 100%),
    radial-gradient(2px 2px at 55% 30%,  #fff 0%, transparent 100%),
    radial-gradient(2px 2px at 64% 73%,  #fff 0%, transparent 100%),
    radial-gradient(2px 2px at 73% 10%,  #fff 0%, transparent 100%),
    radial-gradient(2px 2px at 83% 44%,  #fff 0%, transparent 100%),
    radial-gradient(2px 2px at 92% 81%,  #fff 0%, transparent 100%),
    radial-gradient(2px 2px at 97% 16%,  #fff 0%, transparent 100%),
    /* ── extra blue / red accents layer 4 ── */
    radial-gradient(2px 2px at 68% 58%,  rgba(0,180,255,0.90) 0%, transparent 100%),
    radial-gradient(2px 2px at 81% 28%,  rgba(0,160,240,0.85) 0%, transparent 100%),
    radial-gradient(2px 2px at 93% 72%,  rgba(0,136,204,0.95) 0%, transparent 100%),
    radial-gradient(3px 3px at 76% 90%,  rgba(0,180,255,1.00) 0%, transparent 100%),
    radial-gradient(2px 2px at  6% 36%,  rgba(220,50,50,0.90)  0%, transparent 100%),
    radial-gradient(2px 2px at 17% 61%,  rgba(201,32,32,0.85)  0%, transparent 100%),
    radial-gradient(3px 3px at 24% 18%,  rgba(220,50,50,1.00)  0%, transparent 100%);
  pointer-events: none;
  z-index: 0;
  animation: darkforceTwinkle4 17s ease-in-out infinite;
}

html[data-theme="darkforce"] body::before {
  content: "";
  position: fixed;
  inset: 0;
  background:
    /* ── nebula glows (bottom layer) ── */
    radial-gradient(ellipse 65% 45% at 10% 48%, rgba(201,32,32,0.10) 0%, transparent 100%),
    radial-gradient(ellipse 65% 45% at 90% 52%, rgba(0,136,204,0.10) 0%, transparent 100%),
    radial-gradient(ellipse 40% 28% at 50% 60%, rgba(255,140,0,0.05) 0%, transparent 100%),
    radial-gradient(ellipse 30% 18% at 72% 25%, rgba(0,136,204,0.07) 0%, transparent 100%),
    radial-gradient(ellipse 30% 18% at 18% 45%, rgba(201,32,32,0.07) 0%, transparent 100%),
    radial-gradient(ellipse 20% 14% at 35% 80%, rgba(201,32,32,0.04) 0%, transparent 100%),
    radial-gradient(ellipse 20% 14% at 65% 20%, rgba(0,136,204,0.04) 0%, transparent 100%),
    /* ── 1px white stars – band A ── */
    radial-gradient(1px 1px at  1%  8%, #fff 0%, transparent 100%),
    radial-gradient(1px 1px at  2% 43%, rgba(255,255,255,0.80) 0%, transparent 100%),
    radial-gradient(1px 1px at  2% 77%, rgba(255,255,255,0.65) 0%, transparent 100%),
    radial-gradient(1px 1px at  3% 21%, rgba(255,255,255,0.90) 0%, transparent 100%),
    radial-gradient(1px 1px at  4% 62%, rgba(255,255,255,0.75) 0%, transparent 100%),
    radial-gradient(1px 1px at  4% 91%, rgba(255,255,255,0.85) 0%, transparent 100%),
    radial-gradient(1px 1px at  5% 36%, rgba(255,255,255,0.60) 0%, transparent 100%),
    radial-gradient(1px 1px at  6% 15%, #fff 0%, transparent 100%),
    radial-gradient(1px 1px at  6% 55%, rgba(255,255,255,0.70) 0%, transparent 100%),
    radial-gradient(1px 1px at  7% 84%, rgba(255,255,255,0.95) 0%, transparent 100%),
    radial-gradient(1px 1px at  8%  3%, rgba(255,255,255,0.80) 0%, transparent 100%),
    radial-gradient(1px 1px at  8% 69%, rgba(255,255,255,0.65) 0%, transparent 100%),
    radial-gradient(1px 1px at  9% 27%, rgba(255,255,255,0.90) 0%, transparent 100%),
    radial-gradient(1px 1px at  9% 93%, #fff 0%, transparent 100%),
    /* ── 1px white stars – band B ── */
    radial-gradient(1px 1px at 10% 48%, rgba(255,255,255,0.75) 0%, transparent 100%),
    radial-gradient(1px 1px at 11% 12%, rgba(255,255,255,0.85) 0%, transparent 100%),
    radial-gradient(1px 1px at 11% 74%, rgba(255,255,255,0.60) 0%, transparent 100%),
    radial-gradient(1px 1px at 12% 32%, rgba(255,255,255,0.90) 0%, transparent 100%),
    radial-gradient(1px 1px at 13%  6%, #fff 0%, transparent 100%),
    radial-gradient(1px 1px at 13% 58%, rgba(255,255,255,0.70) 0%, transparent 100%),
    radial-gradient(1px 1px at 14% 87%, rgba(255,255,255,0.80) 0%, transparent 100%),
    radial-gradient(1px 1px at 15% 23%, rgba(255,255,255,0.65) 0%, transparent 100%),
    radial-gradient(1px 1px at 15% 46%, rgba(255,255,255,0.95) 0%, transparent 100%),
    radial-gradient(1px 1px at 16% 70%, rgba(255,255,255,0.75) 0%, transparent 100%),
    radial-gradient(1px 1px at 17%  1%, rgba(255,255,255,0.85) 0%, transparent 100%),
    radial-gradient(1px 1px at 17% 82%, rgba(255,255,255,0.60) 0%, transparent 100%),
    radial-gradient(1px 1px at 18% 38%, #fff 0%, transparent 100%),
    radial-gradient(1px 1px at 19% 16%, rgba(255,255,255,0.80) 0%, transparent 100%),
    radial-gradient(1px 1px at 19% 61%, rgba(255,255,255,0.70) 0%, transparent 100%),
    radial-gradient(1px 1px at 19% 97%, rgba(255,255,255,0.90) 0%, transparent 100%),
    /* ── 1px white stars – band C ── */
    radial-gradient(1px 1px at 20% 29%, rgba(255,255,255,0.85) 0%, transparent 100%),
    radial-gradient(1px 1px at 21% 53%, rgba(255,255,255,0.65) 0%, transparent 100%),
    radial-gradient(1px 1px at 21% 88%, rgba(255,255,255,0.80) 0%, transparent 100%),
    radial-gradient(1px 1px at 22% 10%, #fff 0%, transparent 100%),
    radial-gradient(1px 1px at 22% 42%, rgba(255,255,255,0.75) 0%, transparent 100%),
    radial-gradient(1px 1px at 23% 67%, rgba(255,255,255,0.90) 0%, transparent 100%),
    radial-gradient(1px 1px at 24%  4%, rgba(255,255,255,0.60) 0%, transparent 100%),
    radial-gradient(1px 1px at 24% 79%, rgba(255,255,255,0.85) 0%, transparent 100%),
    radial-gradient(1px 1px at 25% 20%, rgba(255,255,255,0.70) 0%, transparent 100%),
    radial-gradient(1px 1px at 25% 94%, #fff 0%, transparent 100%),
    radial-gradient(1px 1px at 26% 35%, rgba(255,255,255,0.80) 0%, transparent 100%),
    radial-gradient(1px 1px at 27% 56%, rgba(255,255,255,0.65) 0%, transparent 100%),
    radial-gradient(1px 1px at 27% 14%, rgba(255,255,255,0.90) 0%, transparent 100%),
    radial-gradient(1px 1px at 28% 73%, rgba(255,255,255,0.75) 0%, transparent 100%),
    radial-gradient(1px 1px at 29%  7%, rgba(255,255,255,0.85) 0%, transparent 100%),
    radial-gradient(1px 1px at 29% 49%, rgba(255,255,255,0.60) 0%, transparent 100%),
    radial-gradient(1px 1px at 29% 86%, #fff 0%, transparent 100%),
    /* ── 1px white stars – band D ── */
    radial-gradient(1px 1px at 30% 25%, rgba(255,255,255,0.80) 0%, transparent 100%),
    radial-gradient(1px 1px at 31% 64%, rgba(255,255,255,0.70) 0%, transparent 100%),
    radial-gradient(1px 1px at 31% 92%, rgba(255,255,255,0.90) 0%, transparent 100%),
    radial-gradient(1px 1px at 32% 39%, rgba(255,255,255,0.65) 0%, transparent 100%),
    radial-gradient(1px 1px at 33%  2%, #fff 0%, transparent 100%),
    radial-gradient(1px 1px at 33% 57%, rgba(255,255,255,0.85) 0%, transparent 100%),
    radial-gradient(1px 1px at 34% 18%, rgba(255,255,255,0.75) 0%, transparent 100%),
    radial-gradient(1px 1px at 34% 80%, rgba(255,255,255,0.60) 0%, transparent 100%),
    radial-gradient(1px 1px at 35% 44%, rgba(255,255,255,0.95) 0%, transparent 100%),
    radial-gradient(1px 1px at 36%  9%, rgba(255,255,255,0.80) 0%, transparent 100%),
    radial-gradient(1px 1px at 36% 71%, rgba(255,255,255,0.70) 0%, transparent 100%),
    radial-gradient(1px 1px at 37% 31%, rgba(255,255,255,0.85) 0%, transparent 100%),
    radial-gradient(1px 1px at 37% 96%, #fff 0%, transparent 100%),
    radial-gradient(1px 1px at 38% 53%, rgba(255,255,255,0.65) 0%, transparent 100%),
    radial-gradient(1px 1px at 39% 22%, rgba(255,255,255,0.90) 0%, transparent 100%),
    radial-gradient(1px 1px at 39% 84%, rgba(255,255,255,0.75) 0%, transparent 100%),
    /* ── 1px white stars – band E ── */
    radial-gradient(1px 1px at 40% 13%, rgba(255,255,255,0.80) 0%, transparent 100%),
    radial-gradient(1px 1px at 40% 47%, rgba(255,255,255,0.60) 0%, transparent 100%),
    radial-gradient(1px 1px at 41% 68%, rgba(255,255,255,0.85) 0%, transparent 100%),
    radial-gradient(1px 1px at 42%  5%, #fff 0%, transparent 100%),
    radial-gradient(1px 1px at 42% 89%, rgba(255,255,255,0.70) 0%, transparent 100%),
    radial-gradient(1px 1px at 43% 37%, rgba(255,255,255,0.90) 0%, transparent 100%),
    radial-gradient(1px 1px at 43% 75%, rgba(255,255,255,0.65) 0%, transparent 100%),
    radial-gradient(1px 1px at 44% 19%, rgba(255,255,255,0.80) 0%, transparent 100%),
    radial-gradient(1px 1px at 45% 61%, rgba(255,255,255,0.75) 0%, transparent 100%),
    radial-gradient(1px 1px at 45% 93%, rgba(255,255,255,0.85) 0%, transparent 100%),
    radial-gradient(1px 1px at 46% 28%, rgba(255,255,255,0.60) 0%, transparent 100%),
    radial-gradient(1px 1px at 46% 55%, #fff 0%, transparent 100%),
    radial-gradient(1px 1px at 47% 42%, rgba(255,255,255,0.80) 0%, transparent 100%),
    radial-gradient(1px 1px at 48%  1%, rgba(255,255,255,0.70) 0%, transparent 100%),
    radial-gradient(1px 1px at 48% 78%, rgba(255,255,255,0.90) 0%, transparent 100%),
    radial-gradient(1px 1px at 49% 15%, rgba(255,255,255,0.65) 0%, transparent 100%),
    radial-gradient(1px 1px at 49% 66%, rgba(255,255,255,0.85) 0%, transparent 100%),
    /* ── 1px white stars – band F ── */
    radial-gradient(1px 1px at 50%  9%, rgba(255,255,255,0.75) 0%, transparent 100%),
    radial-gradient(1px 1px at 50% 52%, rgba(255,255,255,0.60) 0%, transparent 100%),
    radial-gradient(1px 1px at 51% 83%, #fff 0%, transparent 100%),
    radial-gradient(1px 1px at 51% 30%, rgba(255,255,255,0.80) 0%, transparent 100%),
    radial-gradient(1px 1px at 52% 70%, rgba(255,255,255,0.70) 0%, transparent 100%),
    radial-gradient(1px 1px at 52% 97%, rgba(255,255,255,0.90) 0%, transparent 100%),
    radial-gradient(1px 1px at 53% 45%, rgba(255,255,255,0.85) 0%, transparent 100%),
    radial-gradient(1px 1px at 54%  7%, rgba(255,255,255,0.65) 0%, transparent 100%),
    radial-gradient(1px 1px at 54% 60%, rgba(255,255,255,0.80) 0%, transparent 100%),
    radial-gradient(1px 1px at 55% 88%, rgba(255,255,255,0.75) 0%, transparent 100%),
    radial-gradient(1px 1px at 55% 23%, #fff 0%, transparent 100%),
    radial-gradient(1px 1px at 56% 49%, rgba(255,255,255,0.60) 0%, transparent 100%),
    radial-gradient(1px 1px at 57% 17%, rgba(255,255,255,0.90) 0%, transparent 100%),
    radial-gradient(1px 1px at 57% 74%, rgba(255,255,255,0.70) 0%, transparent 100%),
    radial-gradient(1px 1px at 58% 36%, rgba(255,255,255,0.85) 0%, transparent 100%),
    radial-gradient(1px 1px at 58% 95%, rgba(255,255,255,0.80) 0%, transparent 100%),
    /* ── 1px white stars – band G ── */
    radial-gradient(1px 1px at 59%  4%, rgba(255,255,255,0.65) 0%, transparent 100%),
    radial-gradient(1px 1px at 59% 63%, rgba(255,255,255,0.90) 0%, transparent 100%),
    radial-gradient(1px 1px at 60% 27%, #fff 0%, transparent 100%),
    radial-gradient(1px 1px at 60% 82%, rgba(255,255,255,0.75) 0%, transparent 100%),
    radial-gradient(1px 1px at 61% 11%, rgba(255,255,255,0.80) 0%, transparent 100%),
    radial-gradient(1px 1px at 61% 57%, rgba(255,255,255,0.60) 0%, transparent 100%),
    radial-gradient(1px 1px at 62% 38%, rgba(255,255,255,0.85) 0%, transparent 100%),
    radial-gradient(1px 1px at 62% 91%, rgba(255,255,255,0.70) 0%, transparent 100%),
    radial-gradient(1px 1px at 63% 22%, rgba(255,255,255,0.90) 0%, transparent 100%),
    radial-gradient(1px 1px at 63% 68%, rgba(255,255,255,0.65) 0%, transparent 100%),
    radial-gradient(1px 1px at 64%  6%, #fff 0%, transparent 100%),
    radial-gradient(1px 1px at 64% 47%, rgba(255,255,255,0.80) 0%, transparent 100%),
    radial-gradient(1px 1px at 65% 79%, rgba(255,255,255,0.75) 0%, transparent 100%),
    radial-gradient(1px 1px at 65% 31%, rgba(255,255,255,0.60) 0%, transparent 100%),
    radial-gradient(1px 1px at 66% 54%, rgba(255,255,255,0.85) 0%, transparent 100%),
    radial-gradient(1px 1px at 66% 14%, rgba(255,255,255,0.95) 0%, transparent 100%),
    /* ── 1px white stars – band H ── */
    radial-gradient(1px 1px at 67% 86%, rgba(255,255,255,0.70) 0%, transparent 100%),
    radial-gradient(1px 1px at 68% 43%, rgba(255,255,255,0.80) 0%, transparent 100%),
    radial-gradient(1px 1px at 68%  2%, rgba(255,255,255,0.65) 0%, transparent 100%),
    radial-gradient(1px 1px at 69% 65%, rgba(255,255,255,0.90) 0%, transparent 100%),
    radial-gradient(1px 1px at 69% 24%, #fff 0%, transparent 100%),
    radial-gradient(1px 1px at 70% 75%, rgba(255,255,255,0.75) 0%, transparent 100%),
    radial-gradient(1px 1px at 70% 10%, rgba(255,255,255,0.85) 0%, transparent 100%),
    radial-gradient(1px 1px at 71% 52%, rgba(255,255,255,0.60) 0%, transparent 100%),
    radial-gradient(1px 1px at 71% 88%, rgba(255,255,255,0.80) 0%, transparent 100%),
    radial-gradient(1px 1px at 72% 33%, rgba(255,255,255,0.70) 0%, transparent 100%),
    radial-gradient(1px 1px at 72% 19%, rgba(255,255,255,0.90) 0%, transparent 100%),
    radial-gradient(1px 1px at 73% 58%, rgba(255,255,255,0.65) 0%, transparent 100%),
    radial-gradient(1px 1px at 73% 95%, #fff 0%, transparent 100%),
    radial-gradient(1px 1px at 74% 40%, rgba(255,255,255,0.80) 0%, transparent 100%),
    radial-gradient(1px 1px at 74%  8%, rgba(255,255,255,0.75) 0%, transparent 100%),
    radial-gradient(1px 1px at 75% 71%, rgba(255,255,255,0.85) 0%, transparent 100%),
    /* ── 1px white stars – band I ── */
    radial-gradient(1px 1px at 75% 26%, rgba(255,255,255,0.60) 0%, transparent 100%),
    radial-gradient(1px 1px at 76% 85%, rgba(255,255,255,0.90) 0%, transparent 100%),
    radial-gradient(1px 1px at 76% 48%, rgba(255,255,255,0.70) 0%, transparent 100%),
    radial-gradient(1px 1px at 77%  3%, #fff 0%, transparent 100%),
    radial-gradient(1px 1px at 77% 62%, rgba(255,255,255,0.80) 0%, transparent 100%),
    radial-gradient(1px 1px at 78% 37%, rgba(255,255,255,0.65) 0%, transparent 100%),
    radial-gradient(1px 1px at 78% 92%, rgba(255,255,255,0.85) 0%, transparent 100%),
    radial-gradient(1px 1px at 79% 18%, rgba(255,255,255,0.75) 0%, transparent 100%),
    radial-gradient(1px 1px at 79% 77%, rgba(255,255,255,0.60) 0%, transparent 100%),
    radial-gradient(1px 1px at 80% 55%, rgba(255,255,255,0.90) 0%, transparent 100%),
    radial-gradient(1px 1px at 80% 13%, rgba(255,255,255,0.80) 0%, transparent 100%),
    radial-gradient(1px 1px at 81% 69%, rgba(255,255,255,0.70) 0%, transparent 100%),
    radial-gradient(1px 1px at 81%  6%, #fff 0%, transparent 100%),
    radial-gradient(1px 1px at 82% 44%, rgba(255,255,255,0.85) 0%, transparent 100%),
    radial-gradient(1px 1px at 82% 81%, rgba(255,255,255,0.65) 0%, transparent 100%),
    radial-gradient(1px 1px at 83% 28%, rgba(255,255,255,0.90) 0%, transparent 100%),
    /* ── 1px white stars – band J ── */
    radial-gradient(1px 1px at 83% 97%, rgba(255,255,255,0.75) 0%, transparent 100%),
    radial-gradient(1px 1px at 84% 51%, rgba(255,255,255,0.80) 0%, transparent 100%),
    radial-gradient(1px 1px at 84% 15%, rgba(255,255,255,0.60) 0%, transparent 100%),
    radial-gradient(1px 1px at 85% 73%, rgba(255,255,255,0.85) 0%, transparent 100%),
    radial-gradient(1px 1px at 85% 39%, rgba(255,255,255,0.70) 0%, transparent 100%),
    radial-gradient(1px 1px at 86%  9%, #fff 0%, transparent 100%),
    radial-gradient(1px 1px at 86% 60%, rgba(255,255,255,0.80) 0%, transparent 100%),
    radial-gradient(1px 1px at 87% 84%, rgba(255,255,255,0.65) 0%, transparent 100%),
    radial-gradient(1px 1px at 87% 22%, rgba(255,255,255,0.90) 0%, transparent 100%),
    radial-gradient(1px 1px at 88% 47%, rgba(255,255,255,0.75) 0%, transparent 100%),
    radial-gradient(1px 1px at 88% 93%, rgba(255,255,255,0.85) 0%, transparent 100%),
    radial-gradient(1px 1px at 89% 33%, rgba(255,255,255,0.60) 0%, transparent 100%),
    radial-gradient(1px 1px at 89% 67%, rgba(255,255,255,0.80) 0%, transparent 100%),
    radial-gradient(1px 1px at 90%  4%, rgba(255,255,255,0.70) 0%, transparent 100%),
    radial-gradient(1px 1px at 90% 57%, rgba(255,255,255,0.90) 0%, transparent 100%),
    radial-gradient(1px 1px at 90% 88%, #fff 0%, transparent 100%),
    /* ── 1px white stars – band K ── */
    radial-gradient(1px 1px at 91% 20%, rgba(255,255,255,0.75) 0%, transparent 100%),
    radial-gradient(1px 1px at 91% 76%, rgba(255,255,255,0.85) 0%, transparent 100%),
    radial-gradient(1px 1px at 92% 41%, rgba(255,255,255,0.60) 0%, transparent 100%),
    radial-gradient(1px 1px at 92% 12%, rgba(255,255,255,0.80) 0%, transparent 100%),
    radial-gradient(1px 1px at 93% 64%, rgba(255,255,255,0.70) 0%, transparent 100%),
    radial-gradient(1px 1px at 93% 96%, rgba(255,255,255,0.90) 0%, transparent 100%),
    radial-gradient(1px 1px at 94% 29%, rgba(255,255,255,0.65) 0%, transparent 100%),
    radial-gradient(1px 1px at 94% 53%, rgba(255,255,255,0.85) 0%, transparent 100%),
    radial-gradient(1px 1px at 95% 16%, #fff 0%, transparent 100%),
    radial-gradient(1px 1px at 95% 80%, rgba(255,255,255,0.75) 0%, transparent 100%),
    radial-gradient(1px 1px at 96% 35%, rgba(255,255,255,0.80) 0%, transparent 100%),
    radial-gradient(1px 1px at 96% 72%, rgba(255,255,255,0.60) 0%, transparent 100%),
    radial-gradient(1px 1px at 97%  8%, rgba(255,255,255,0.90) 0%, transparent 100%),
    radial-gradient(1px 1px at 97% 50%, rgba(255,255,255,0.70) 0%, transparent 100%),
    radial-gradient(1px 1px at 97% 89%, rgba(255,255,255,0.85) 0%, transparent 100%),
    radial-gradient(1px 1px at 98% 24%, rgba(255,255,255,0.65) 0%, transparent 100%),
    radial-gradient(1px 1px at 98% 61%, #fff 0%, transparent 100%),
    radial-gradient(1px 1px at 99%  4%, rgba(255,255,255,0.80) 0%, transparent 100%),
    radial-gradient(1px 1px at 99% 45%, rgba(255,255,255,0.75) 0%, transparent 100%),
    radial-gradient(1px 1px at 99% 78%, rgba(255,255,255,0.90) 0%, transparent 100%),
    /* ── 2px bright accent stars ── */
    radial-gradient(2px 2px at  7% 42%, #fff 0%, transparent 100%),
    radial-gradient(2px 2px at 12% 18%, #fff 0%, transparent 100%),
    radial-gradient(2px 2px at 19% 73%, #fff 0%, transparent 100%),
    radial-gradient(2px 2px at 23% 29%, #fff 0%, transparent 100%),
    radial-gradient(2px 2px at 34% 71%, #fff 0%, transparent 100%),
    radial-gradient(2px 2px at 38%  6%, #fff 0%, transparent 100%),
    radial-gradient(2px 2px at 47% 85%, #fff 0%, transparent 100%),
    radial-gradient(2px 2px at 52% 15%, #fff 0%, transparent 100%),
    radial-gradient(2px 2px at 56% 55%, #fff 0%, transparent 100%),
    radial-gradient(2px 2px at 61% 40%, #fff 0%, transparent 100%),
    radial-gradient(2px 2px at 67% 92%, #fff 0%, transparent 100%),
    radial-gradient(2px 2px at 74% 31%, #fff 0%, transparent 100%),
    radial-gradient(2px 2px at 78% 66%, #fff 0%, transparent 100%),
    radial-gradient(2px 2px at 85% 19%, #fff 0%, transparent 100%),
    radial-gradient(2px 2px at 91% 74%, #fff 0%, transparent 100%),
    radial-gradient(2px 2px at 96% 48%, #fff 0%, transparent 100%),
    /* ── 3px super-bright stars ── */
    radial-gradient(3px 3px at 15% 55%, #fff 0%, transparent 100%),
    radial-gradient(3px 3px at 25% 38%, #fff 0%, transparent 100%),
    radial-gradient(3px 3px at 41% 88%, #fff 0%, transparent 100%),
    radial-gradient(3px 3px at 55% 72%, #fff 0%, transparent 100%),
    radial-gradient(3px 3px at 63% 21%, #fff 0%, transparent 100%),
    radial-gradient(3px 3px at 72% 50%, #fff 0%, transparent 100%),
    radial-gradient(3px 3px at 87% 65%, #fff 0%, transparent 100%),
    radial-gradient(3px 3px at 93% 10%, #fff 0%, transparent 100%),
    /* ── blue lightsaber / Force stars ── */
    radial-gradient(2px 2px at 61%  6%, rgba(0,180,255,1.0) 0%, transparent 100%),
    radial-gradient(2px 2px at 64% 44%, rgba(0,160,240,0.9) 0%, transparent 100%),
    radial-gradient(2px 2px at 68% 32%, rgba(0,160,240,0.9) 0%, transparent 100%),
    radial-gradient(2px 2px at 71% 79%, rgba(0,136,204,0.85) 0%, transparent 100%),
    radial-gradient(2px 2px at 73% 58%, rgba(0,160,240,1.0) 0%, transparent 100%),
    radial-gradient(2px 2px at 77% 13%, rgba(0,180,255,0.90) 0%, transparent 100%),
    radial-gradient(2px 2px at 80% 74%, rgba(0,136,204,0.9) 0%, transparent 100%),
    radial-gradient(2px 2px at 84% 46%, rgba(0,160,240,0.85) 0%, transparent 100%),
    radial-gradient(2px 2px at 88% 18%, rgba(0,180,255,0.85) 0%, transparent 100%),
    radial-gradient(2px 2px at 92% 61%, rgba(0,136,204,0.90) 0%, transparent 100%),
    radial-gradient(3px 3px at 76% 42%, rgba(0,180,255,1.0) 0%, transparent 100%),
    radial-gradient(3px 3px at 91% 50%, rgba(0,160,240,1.0) 0%, transparent 100%),
    radial-gradient(4px 4px at 84% 28%, rgba(80,200,255,1.0) 0%, transparent 100%),
    /* ── red Dark Side stars ── */
    radial-gradient(2px 2px at  3% 50%, rgba(220,50,50,0.9)  0%, transparent 100%),
    radial-gradient(2px 2px at  5% 30%, rgba(220,50,50,1.0)  0%, transparent 100%),
    radial-gradient(2px 2px at  8% 76%, rgba(201,32,32,0.85) 0%, transparent 100%),
    radial-gradient(2px 2px at 10% 65%, rgba(201,32,32,0.9)  0%, transparent 100%),
    radial-gradient(2px 2px at 13% 91%, rgba(220,50,50,0.80) 0%, transparent 100%),
    radial-gradient(2px 2px at 16% 12%, rgba(220,50,50,0.85) 0%, transparent 100%),
    radial-gradient(2px 2px at 19% 53%, rgba(201,32,32,0.90) 0%, transparent 100%),
    radial-gradient(2px 2px at 21% 80%, rgba(201,32,32,1.0)  0%, transparent 100%),
    radial-gradient(3px 3px at  7% 85%, rgba(201,32,32,1.0)  0%, transparent 100%),
    radial-gradient(3px 3px at 14% 40%, rgba(220,50,50,1.0)  0%, transparent 100%),
    radial-gradient(4px 4px at 11% 22%, rgba(255,80,80,1.0)  0%, transparent 100%);
  pointer-events: none;
  z-index: 0;
  animation: darkforceTwinkle2 8s ease-in-out infinite;
}

/* ── Layout ─────────────────────────────────────────────────────────────────── */

html[data-theme="darkforce"] body::after {
  content: "";
  position: fixed;
  inset: 0;
  background:
    /* second dense star layer – offset positions from body::before */
    radial-gradient(1px 1px at  0%  18%, rgba(255,255,255,0.70) 0%, transparent 100%),
    radial-gradient(1px 1px at  1%  55%, rgba(255,255,255,0.85) 0%, transparent 100%),
    radial-gradient(1px 1px at  1%  90%, rgba(255,255,255,0.60) 0%, transparent 100%),
    radial-gradient(1px 1px at  2%  33%, rgba(255,255,255,0.90) 0%, transparent 100%),
    radial-gradient(1px 1px at  3%  71%, rgba(255,255,255,0.75) 0%, transparent 100%),
    radial-gradient(1px 1px at  3%  10%, rgba(255,255,255,0.80) 0%, transparent 100%),
    radial-gradient(1px 1px at  4%  48%, rgba(255,255,255,0.65) 0%, transparent 100%),
    radial-gradient(1px 1px at  4%  82%, rgba(255,255,255,0.90) 0%, transparent 100%),
    radial-gradient(1px 1px at  5%  25%, rgba(255,255,255,0.85) 0%, transparent 100%),
    radial-gradient(1px 1px at  5%  59%, rgba(255,255,255,0.70) 0%, transparent 100%),
    radial-gradient(1px 1px at  6%   2%, rgba(255,255,255,0.60) 0%, transparent 100%),
    radial-gradient(1px 1px at  6%  95%, rgba(255,255,255,0.80) 0%, transparent 100%),
    radial-gradient(1px 1px at  7%  40%, rgba(255,255,255,0.75) 0%, transparent 100%),
    radial-gradient(1px 1px at  8%  14%, rgba(255,255,255,0.90) 0%, transparent 100%),
    radial-gradient(1px 1px at  8%  73%, rgba(255,255,255,0.65) 0%, transparent 100%),
    radial-gradient(1px 1px at  9%  52%, rgba(255,255,255,0.85) 0%, transparent 100%),
    radial-gradient(1px 1px at 10%  28%, rgba(255,255,255,0.70) 0%, transparent 100%),
    radial-gradient(1px 1px at 10%  86%, rgba(255,255,255,0.80) 0%, transparent 100%),
    radial-gradient(1px 1px at 11%   7%, rgba(255,255,255,0.60) 0%, transparent 100%),
    radial-gradient(1px 1px at 11%  65%, rgba(255,255,255,0.90) 0%, transparent 100%),
    radial-gradient(1px 1px at 12%  44%, rgba(255,255,255,0.75) 0%, transparent 100%),
    radial-gradient(1px 1px at 13%  97%, rgba(255,255,255,0.85) 0%, transparent 100%),
    radial-gradient(1px 1px at 13%  19%, rgba(255,255,255,0.65) 0%, transparent 100%),
    radial-gradient(1px 1px at 14%  58%, rgba(255,255,255,0.80) 0%, transparent 100%),
    radial-gradient(1px 1px at 15%  35%, rgba(255,255,255,0.70) 0%, transparent 100%),
    radial-gradient(1px 1px at 15%  78%, rgba(255,255,255,0.90) 0%, transparent 100%),
    radial-gradient(1px 1px at 16%  11%, rgba(255,255,255,0.60) 0%, transparent 100%),
    radial-gradient(1px 1px at 16%  50%, rgba(255,255,255,0.85) 0%, transparent 100%),
    radial-gradient(1px 1px at 17%  88%, rgba(255,255,255,0.75) 0%, transparent 100%),
    radial-gradient(1px 1px at 18%  22%, rgba(255,255,255,0.80) 0%, transparent 100%),
    radial-gradient(1px 1px at 18%  67%, rgba(255,255,255,0.65) 0%, transparent 100%),
    radial-gradient(1px 1px at 19%   4%, rgba(255,255,255,0.90) 0%, transparent 100%),
    radial-gradient(1px 1px at 19%  41%, rgba(255,255,255,0.70) 0%, transparent 100%),
    radial-gradient(1px 1px at 20%  76%, rgba(255,255,255,0.85) 0%, transparent 100%),
    radial-gradient(1px 1px at 20%  32%, rgba(255,255,255,0.60) 0%, transparent 100%),
    radial-gradient(1px 1px at 21%  94%, rgba(255,255,255,0.80) 0%, transparent 100%),
    radial-gradient(1px 1px at 22%  17%, rgba(255,255,255,0.75) 0%, transparent 100%),
    radial-gradient(1px 1px at 22%  60%, rgba(255,255,255,0.90) 0%, transparent 100%),
    radial-gradient(1px 1px at 23%  83%, rgba(255,255,255,0.65) 0%, transparent 100%),
    radial-gradient(1px 1px at 23%  39%, rgba(255,255,255,0.85) 0%, transparent 100%),
    radial-gradient(1px 1px at 24%   8%, rgba(255,255,255,0.70) 0%, transparent 100%),
    radial-gradient(1px 1px at 24%  53%, rgba(255,255,255,0.80) 0%, transparent 100%),
    radial-gradient(1px 1px at 25%  71%, rgba(255,255,255,0.60) 0%, transparent 100%),
    radial-gradient(1px 1px at 26%  26%, rgba(255,255,255,0.90) 0%, transparent 100%),
    radial-gradient(1px 1px at 26%  89%, rgba(255,255,255,0.75) 0%, transparent 100%),
    radial-gradient(1px 1px at 27%  48%, rgba(255,255,255,0.85) 0%, transparent 100%),
    radial-gradient(1px 1px at 28%  13%, rgba(255,255,255,0.65) 0%, transparent 100%),
    radial-gradient(1px 1px at 28%  66%, rgba(255,255,255,0.80) 0%, transparent 100%),
    radial-gradient(1px 1px at 29%  30%, rgba(255,255,255,0.70) 0%, transparent 100%),
    radial-gradient(1px 1px at 29%  91%, rgba(255,255,255,0.90) 0%, transparent 100%),
    radial-gradient(1px 1px at 30%  57%, rgba(255,255,255,0.60) 0%, transparent 100%),
    radial-gradient(1px 1px at 31%  20%, rgba(255,255,255,0.85) 0%, transparent 100%),
    radial-gradient(1px 1px at 31%  74%, rgba(255,255,255,0.75) 0%, transparent 100%),
    radial-gradient(1px 1px at 32%  42%, rgba(255,255,255,0.80) 0%, transparent 100%),
    radial-gradient(1px 1px at 33%   1%, rgba(255,255,255,0.65) 0%, transparent 100%),
    radial-gradient(1px 1px at 33%  85%, rgba(255,255,255,0.90) 0%, transparent 100%),
    radial-gradient(1px 1px at 34%  36%, rgba(255,255,255,0.70) 0%, transparent 100%),
    radial-gradient(1px 1px at 34%  62%, rgba(255,255,255,0.85) 0%, transparent 100%),
    radial-gradient(1px 1px at 35%  10%, rgba(255,255,255,0.80) 0%, transparent 100%),
    radial-gradient(1px 1px at 35%  79%, rgba(255,255,255,0.60) 0%, transparent 100%),
    radial-gradient(1px 1px at 36%  51%, rgba(255,255,255,0.90) 0%, transparent 100%),
    radial-gradient(1px 1px at 37%  23%, rgba(255,255,255,0.75) 0%, transparent 100%),
    radial-gradient(1px 1px at 37%  96%, rgba(255,255,255,0.85) 0%, transparent 100%),
    radial-gradient(1px 1px at 38%  68%, rgba(255,255,255,0.65) 0%, transparent 100%),
    radial-gradient(1px 1px at 39%  15%, rgba(255,255,255,0.80) 0%, transparent 100%),
    radial-gradient(1px 1px at 39%  44%, rgba(255,255,255,0.70) 0%, transparent 100%),
    radial-gradient(1px 1px at 40%  87%, rgba(255,255,255,0.90) 0%, transparent 100%),
    radial-gradient(1px 1px at 41%  29%, rgba(255,255,255,0.60) 0%, transparent 100%),
    radial-gradient(1px 1px at 41%  60%, rgba(255,255,255,0.85) 0%, transparent 100%),
    radial-gradient(1px 1px at 42%   5%, rgba(255,255,255,0.75) 0%, transparent 100%),
    radial-gradient(1px 1px at 42%  73%, rgba(255,255,255,0.80) 0%, transparent 100%),
    radial-gradient(1px 1px at 43%  38%, rgba(255,255,255,0.65) 0%, transparent 100%),
    radial-gradient(1px 1px at 44%  92%, rgba(255,255,255,0.90) 0%, transparent 100%),
    radial-gradient(1px 1px at 44%  54%, rgba(255,255,255,0.70) 0%, transparent 100%),
    radial-gradient(1px 1px at 45%  17%, rgba(255,255,255,0.85) 0%, transparent 100%),
    radial-gradient(1px 1px at 45%  80%, rgba(255,255,255,0.60) 0%, transparent 100%),
    radial-gradient(1px 1px at 46%  46%, rgba(255,255,255,0.80) 0%, transparent 100%),
    radial-gradient(1px 1px at 47%  11%, rgba(255,255,255,0.75) 0%, transparent 100%),
    radial-gradient(1px 1px at 47%  67%, rgba(255,255,255,0.90) 0%, transparent 100%),
    radial-gradient(1px 1px at 48%  34%, rgba(255,255,255,0.65) 0%, transparent 100%),
    radial-gradient(1px 1px at 48%  98%, rgba(255,255,255,0.85) 0%, transparent 100%),
    radial-gradient(1px 1px at 49%  58%, rgba(255,255,255,0.70) 0%, transparent 100%),
    radial-gradient(1px 1px at 50%  22%, rgba(255,255,255,0.80) 0%, transparent 100%),
    radial-gradient(1px 1px at 50%  84%, rgba(255,255,255,0.60) 0%, transparent 100%),
    radial-gradient(1px 1px at 51%  40%, rgba(255,255,255,0.90) 0%, transparent 100%),
    radial-gradient(1px 1px at 52%   8%, rgba(255,255,255,0.75) 0%, transparent 100%),
    radial-gradient(1px 1px at 52%  63%, rgba(255,255,255,0.85) 0%, transparent 100%),
    radial-gradient(1px 1px at 53%  77%, rgba(255,255,255,0.65) 0%, transparent 100%),
    radial-gradient(1px 1px at 54%  27%, rgba(255,255,255,0.80) 0%, transparent 100%),
    radial-gradient(1px 1px at 54%  91%, rgba(255,255,255,0.70) 0%, transparent 100%),
    radial-gradient(1px 1px at 55%  49%, rgba(255,255,255,0.90) 0%, transparent 100%),
    radial-gradient(1px 1px at 56%  13%, rgba(255,255,255,0.60) 0%, transparent 100%),
    radial-gradient(1px 1px at 56%  72%, rgba(255,255,255,0.85) 0%, transparent 100%),
    radial-gradient(1px 1px at 57%  36%, rgba(255,255,255,0.75) 0%, transparent 100%),
    radial-gradient(1px 1px at 58%  58%, rgba(255,255,255,0.80) 0%, transparent 100%),
    radial-gradient(1px 1px at 58%  95%, rgba(255,255,255,0.65) 0%, transparent 100%),
    radial-gradient(1px 1px at 59%  21%, rgba(255,255,255,0.90) 0%, transparent 100%),
    radial-gradient(1px 1px at 59%  80%, rgba(255,255,255,0.70) 0%, transparent 100%),
    radial-gradient(1px 1px at 60%  44%, rgba(255,255,255,0.85) 0%, transparent 100%),
    radial-gradient(1px 1px at 61%   2%, rgba(255,255,255,0.60) 0%, transparent 100%),
    radial-gradient(1px 1px at 61%  68%, rgba(255,255,255,0.80) 0%, transparent 100%),
    radial-gradient(1px 1px at 62%  29%, rgba(255,255,255,0.75) 0%, transparent 100%),
    radial-gradient(1px 1px at 62%  87%, rgba(255,255,255,0.90) 0%, transparent 100%),
    radial-gradient(1px 1px at 63%  51%, rgba(255,255,255,0.65) 0%, transparent 100%),
    radial-gradient(1px 1px at 64%  17%, rgba(255,255,255,0.85) 0%, transparent 100%),
    radial-gradient(1px 1px at 64%  75%, rgba(255,255,255,0.70) 0%, transparent 100%),
    radial-gradient(1px 1px at 65%  38%, rgba(255,255,255,0.80) 0%, transparent 100%),
    radial-gradient(1px 1px at 66%   6%, rgba(255,255,255,0.60) 0%, transparent 100%),
    radial-gradient(1px 1px at 66%  93%, rgba(255,255,255,0.90) 0%, transparent 100%),
    radial-gradient(1px 1px at 67%  61%, rgba(255,255,255,0.75) 0%, transparent 100%),
    radial-gradient(1px 1px at 68%  24%, rgba(255,255,255,0.85) 0%, transparent 100%),
    radial-gradient(1px 1px at 68%  82%, rgba(255,255,255,0.65) 0%, transparent 100%),
    radial-gradient(1px 1px at 69%  46%, rgba(255,255,255,0.80) 0%, transparent 100%),
    radial-gradient(1px 1px at 70%  10%, rgba(255,255,255,0.70) 0%, transparent 100%),
    radial-gradient(1px 1px at 70%  71%, rgba(255,255,255,0.90) 0%, transparent 100%),
    radial-gradient(1px 1px at 71%  33%, rgba(255,255,255,0.60) 0%, transparent 100%),
    radial-gradient(1px 1px at 71%  96%, rgba(255,255,255,0.85) 0%, transparent 100%),
    radial-gradient(1px 1px at 72%  55%, rgba(255,255,255,0.75) 0%, transparent 100%),
    radial-gradient(1px 1px at 73%  16%, rgba(255,255,255,0.80) 0%, transparent 100%),
    radial-gradient(1px 1px at 73%  78%, rgba(255,255,255,0.65) 0%, transparent 100%),
    radial-gradient(1px 1px at 74%  40%, rgba(255,255,255,0.90) 0%, transparent 100%),
    radial-gradient(1px 1px at 75%   7%, rgba(255,255,255,0.70) 0%, transparent 100%),
    radial-gradient(1px 1px at 75%  63%, rgba(255,255,255,0.85) 0%, transparent 100%),
    radial-gradient(1px 1px at 76%  28%, rgba(255,255,255,0.60) 0%, transparent 100%),
    radial-gradient(1px 1px at 76%  89%, rgba(255,255,255,0.80) 0%, transparent 100%),
    radial-gradient(1px 1px at 77%  52%, rgba(255,255,255,0.75) 0%, transparent 100%),
    radial-gradient(1px 1px at 78%  19%, rgba(255,255,255,0.90) 0%, transparent 100%),
    radial-gradient(1px 1px at 78%  74%, rgba(255,255,255,0.65) 0%, transparent 100%),
    radial-gradient(1px 1px at 79%  37%, rgba(255,255,255,0.85) 0%, transparent 100%),
    radial-gradient(1px 1px at 80%   4%, rgba(255,255,255,0.70) 0%, transparent 100%),
    radial-gradient(1px 1px at 80%  84%, rgba(255,255,255,0.80) 0%, transparent 100%),
    radial-gradient(1px 1px at 81%  48%, rgba(255,255,255,0.60) 0%, transparent 100%),
    radial-gradient(1px 1px at 82%  21%, rgba(255,255,255,0.90) 0%, transparent 100%),
    radial-gradient(1px 1px at 82%  67%, rgba(255,255,255,0.75) 0%, transparent 100%),
    radial-gradient(1px 1px at 83%  35%, rgba(255,255,255,0.85) 0%, transparent 100%),
    radial-gradient(1px 1px at 84%  91%, rgba(255,255,255,0.65) 0%, transparent 100%),
    radial-gradient(1px 1px at 84%  54%, rgba(255,255,255,0.80) 0%, transparent 100%),
    radial-gradient(1px 1px at 85%  14%, rgba(255,255,255,0.70) 0%, transparent 100%),
    radial-gradient(1px 1px at 85%  76%, rgba(255,255,255,0.90) 0%, transparent 100%),
    radial-gradient(1px 1px at 86%  42%, rgba(255,255,255,0.60) 0%, transparent 100%),
    radial-gradient(1px 1px at 87%   9%, rgba(255,255,255,0.85) 0%, transparent 100%),
    radial-gradient(1px 1px at 87%  60%, rgba(255,255,255,0.75) 0%, transparent 100%),
    radial-gradient(1px 1px at 88%  26%, rgba(255,255,255,0.80) 0%, transparent 100%),
    radial-gradient(1px 1px at 88%  94%, rgba(255,255,255,0.65) 0%, transparent 100%),
    radial-gradient(1px 1px at 89%  47%, rgba(255,255,255,0.90) 0%, transparent 100%),
    radial-gradient(1px 1px at 90%  73%, rgba(255,255,255,0.70) 0%, transparent 100%),
    radial-gradient(1px 1px at 90%  31%, rgba(255,255,255,0.85) 0%, transparent 100%),
    radial-gradient(1px 1px at 91%   1%, rgba(255,255,255,0.60) 0%, transparent 100%),
    radial-gradient(1px 1px at 91%  58%, rgba(255,255,255,0.80) 0%, transparent 100%),
    radial-gradient(1px 1px at 92%  83%, rgba(255,255,255,0.75) 0%, transparent 100%),
    radial-gradient(1px 1px at 92%  22%, rgba(255,255,255,0.90) 0%, transparent 100%),
    radial-gradient(1px 1px at 93%  64%, rgba(255,255,255,0.65) 0%, transparent 100%),
    radial-gradient(1px 1px at 94%  39%, rgba(255,255,255,0.85) 0%, transparent 100%),
    radial-gradient(1px 1px at 94%  97%, rgba(255,255,255,0.70) 0%, transparent 100%),
    radial-gradient(1px 1px at 95%  16%, rgba(255,255,255,0.80) 0%, transparent 100%),
    radial-gradient(1px 1px at 95%  52%, rgba(255,255,255,0.60) 0%, transparent 100%),
    radial-gradient(1px 1px at 96%  79%, rgba(255,255,255,0.90) 0%, transparent 100%),
    radial-gradient(1px 1px at 97%  32%, rgba(255,255,255,0.75) 0%, transparent 100%),
    radial-gradient(1px 1px at 97%  70%, rgba(255,255,255,0.85) 0%, transparent 100%),
    radial-gradient(1px 1px at 98%  11%, rgba(255,255,255,0.65) 0%, transparent 100%),
    radial-gradient(1px 1px at 98%  55%, rgba(255,255,255,0.80) 0%, transparent 100%),
    radial-gradient(1px 1px at 99%  43%, rgba(255,255,255,0.70) 0%, transparent 100%),
    radial-gradient(1px 1px at 99%  87%, rgba(255,255,255,0.90) 0%, transparent 100%),
    /* ── extra 2px accent stars layer 2 ── */
    radial-gradient(2px 2px at 16% 36%, #fff 0%, transparent 100%),
    radial-gradient(2px 2px at 28% 82%, #fff 0%, transparent 100%),
    radial-gradient(2px 2px at 43% 25%, #fff 0%, transparent 100%),
    radial-gradient(2px 2px at 58% 90%, #fff 0%, transparent 100%),
    radial-gradient(2px 2px at 69%  7%, #fff 0%, transparent 100%),
    radial-gradient(2px 2px at 81% 48%, #fff 0%, transparent 100%),
    radial-gradient(2px 2px at 87% 30%, #fff 0%, transparent 100%),
    radial-gradient(2px 2px at 94% 66%, #fff 0%, transparent 100%),
    /* ── additional blue Force stars ── */
    radial-gradient(2px 2px at 70% 14%, rgba(0,160,240,0.9)  0%, transparent 100%),
    radial-gradient(2px 2px at 75%  3%, rgba(0,180,255,0.85) 0%, transparent 100%),
    radial-gradient(2px 2px at 79% 38%, rgba(0,136,204,0.90) 0%, transparent 100%),
    radial-gradient(2px 2px at 83% 72%, rgba(0,180,255,0.80) 0%, transparent 100%),
    radial-gradient(2px 2px at 89% 55%, rgba(0,160,240,0.95) 0%, transparent 100%),
    radial-gradient(2px 2px at 95% 33%, rgba(0,136,204,1.0)  0%, transparent 100%),
    radial-gradient(3px 3px at 77% 67%, rgba(0,180,255,0.90) 0%, transparent 100%),
    /* ── additional red Dark Side stars ── */
    radial-gradient(2px 2px at  9% 20%, rgba(201,32,32,0.85) 0%, transparent 100%),
    radial-gradient(2px 2px at 15% 72%, rgba(220,50,50,0.80) 0%, transparent 100%),
    radial-gradient(2px 2px at 18% 58%, rgba(220,50,50,0.9)  0%, transparent 100%),
    radial-gradient(2px 2px at 24% 14%, rgba(201,32,32,0.85) 0%, transparent 100%),
    radial-gradient(2px 2px at 26% 90%, rgba(220,50,50,0.8)  0%, transparent 100%),
    radial-gradient(3px 3px at  4% 44%, rgba(220,50,50,1.0)  0%, transparent 100%);
  pointer-events: none;
  z-index: 0;
  animation: darkforceTwinkle3 11s ease-in-out infinite;
}

html[data-theme="darkforce"] .layout-main { background: transparent; position: relative; z-index: 1; }

html[data-theme="darkforce"] .header {
  background: linear-gradient(90deg, rgba(25,0,0,0.97) 0%, rgba(0,0,0,0.97) 50%, rgba(0,0,30,0.97) 100%);
  border-bottom: 1px solid rgba(201, 32, 32, 0.5);
  box-shadow:
    0 2px 24px rgba(0,0,0,0.9),
    0 1px 0 rgba(201,32,32,0.25),
    inset 0 -1px 0 rgba(0,136,204,0.1);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

html[data-theme="darkforce"] .header-logo-img {
  filter: brightness(1.15) drop-shadow(0 0 6px rgba(201,32,32,0.35));
}

html[data-theme="darkforce"] .header-logo-suffix {
  color: #e55050;
  border-left-color: rgba(201,32,32,0.35);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-size: 0.75em;
  font-weight: 700;
}

html[data-theme="darkforce"] .header-beta-badge {
  background: linear-gradient(135deg, #c92020 0%, #8b0000 40%, #004477 70%, #0066aa 100%);
  color: #f5f5f5;
  border: 1px solid rgba(201,32,32,0.7);
  box-shadow: 0 0 14px rgba(201,32,32,0.7), 0 0 28px rgba(0,136,204,0.4);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  animation: darkforcePulse 2s ease-in-out infinite;
}

html[data-theme="darkforce"] .menu-toggle { color: #e55050; }
html[data-theme="darkforce"] .menu-toggle:hover { color: #ffffff; text-shadow: 0 0 14px rgba(201,32,32,0.8); }

html[data-theme="darkforce"] .header-user-info { color: #f5f5f5; }
html[data-theme="darkforce"] .header-user-name { color: #f5f5f5; font-weight: 600; }
html[data-theme="darkforce"] .header-user-role {
  color: #33aaee;
  font-size: 0.78em;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 700;
  text-shadow: 0 0 8px rgba(0,136,204,0.6);
}

/* Rockstar Widget */
html[data-theme="darkforce"] .rockstar-widget-header  { background: linear-gradient(135deg, #c92020, #8b0000) !important; color: #f5f5f5 !important; font-weight: 900 !important; }
html[data-theme="darkforce"] .rockstar-widget-header .actions button { background: rgba(255, 255, 255, 0.15) !important; color: #f5f5f5 !important; border: 1px solid rgba(255, 255, 255, 0.25) !important; border-radius: 6px !important; }
html[data-theme="darkforce"] .rockstar-widget-fab      { background: linear-gradient(135deg, #c92020, #8b0000) !important; color: #f5f5f5 !important; box-shadow: 0 4px 24px rgba(201,32,32,0.65) !important; }
html[data-theme="darkforce"] .rockstar-widget-messages .message.assistant { background: rgba(201,32,32,0.07) !important; border-left: 3px solid #c92020 !important; color: #f5f5f5 !important; }

html[data-theme="darkforce"] .user-avatar {
  background: linear-gradient(135deg, #c92020, #8b0000);
  border: 2px solid rgba(201,32,32,0.7);
  color: #f5f5f5;
  box-shadow: 0 0 22px rgba(201,32,32,0.55);
  font-weight: 900;
}

html[data-theme="darkforce"] .btn-logout,
html[data-theme="darkforce"] .logout-button { background: transparent; color: #e55050; border: 1px solid rgba(201,32,32,0.4); }
html[data-theme="darkforce"] .btn-logout:hover,
html[data-theme="darkforce"] .logout-button:hover { background: rgba(201,32,32,0.1); border-color: #c92020; box-shadow: 0 0 18px rgba(201,32,32,0.4); }

html[data-theme="darkforce"] .btn-export-pdf { background: transparent; color: #e55050; border: 1px solid rgba(201,32,32,0.4); }
html[data-theme="darkforce"] .btn-export-pdf:hover { background: rgba(201,32,32,0.1); border-color: #c92020; box-shadow: 0 0 18px rgba(201,32,32,0.4); }

/* ── Sidebar ─────────────────────────────────────────────────────────────────── */

html[data-theme="darkforce"] .sidebar {
  background: linear-gradient(180deg, rgba(14,2,2,0.94) 0%, rgba(0,0,0,0.92) 50%, rgba(0,0,12,0.94) 100%);
  border-right: 1px solid rgba(201, 32, 32, 0.3);
  box-shadow: inset -1px 0 0 rgba(0,136,204,0.15), 2px 0 12px rgba(0,0,0,0.5);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

html[data-theme="darkforce"] .nav-link { color: #888888; border-left: 2px solid transparent; transition: all 0.2s; }
html[data-theme="darkforce"] .nav-link:hover { background: rgba(201,32,32,0.07); color: #e55050; border-left-color: rgba(201,32,32,0.5); }
html[data-theme="darkforce"] .nav-link.active {
  background: linear-gradient(90deg, rgba(201,32,32,0.13), rgba(0,100,180,0.06));
  color: #e55050;
  border-left-color: #c92020;
  font-weight: 700;
  box-shadow: inset 0 0 20px rgba(201,32,32,0.12), inset -4px 0 12px rgba(0,136,204,0.06);
  text-shadow: 0 0 10px rgba(201,32,32,0.5);
}
html[data-theme="darkforce"] .nav-section-title {
  color: #3a3a3a;
  font-size: 0.65rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}
html[data-theme="darkforce"] .sidebar-icon { color: #c92020; }

/* ── Scrollbars ──────────────────────────────────────────────────────────────── */

html[data-theme="darkforce"] ::-webkit-scrollbar-track { background: #050505; }
html[data-theme="darkforce"] ::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #c92020, #1a1a1a, #0066aa);
  border-radius: 10px;
  border: 2px solid #050505;
}
html[data-theme="darkforce"] ::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #e55050, #333, #0088cc);
  box-shadow: 0 0 10px rgba(201,32,32,0.5), 0 0 10px rgba(0,136,204,0.4);
}

/* ── Profile theme picker ──────────────────────────────────────────────────── */

html[data-theme="darkforce"] .profile-themes {
  background: rgba(8,3,18,0.90);
  border-top:    1px solid rgba(201,32,32,0.40);
  border-left:   1px solid rgba(201,32,32,0.30);
  border-bottom: 1px solid rgba(0,110,200,0.30);
  border-right:  1px solid rgba(0,110,200,0.40);
  box-shadow: 0 8px 32px rgba(0,0,0,0.9);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
html[data-theme="darkforce"] .profile-themes-header { color: #e55050; text-transform: uppercase; letter-spacing: 0.12em; font-weight: 700; }
html[data-theme="darkforce"] .profile-themes-icon   { color: #c92020; }
html[data-theme="darkforce"] .profile-theme-option  { border-color: rgba(201,32,32,0.2); background: #0a0a0a; }
html[data-theme="darkforce"] .profile-theme-option:hover { border-color: #c92020; background: rgba(201,32,32,0.06); box-shadow: 0 0 20px rgba(201,32,32,0.25); }
html[data-theme="darkforce"] .profile-theme-option--active { border-color: #c92020; background: rgba(201,32,32,0.09); box-shadow: 0 0 0 3px rgba(201,32,32,0.25), 0 0 28px rgba(201,32,32,0.3); }
html[data-theme="darkforce"] .profile-theme-name    { color: #f5f5f5; }
html[data-theme="darkforce"] .profile-theme-option--active .profile-theme-name { color: #e55050; font-weight: 900; }
html[data-theme="darkforce"] .profile-theme-active-dot { background: #c92020; box-shadow: 0 0 14px rgba(201,32,32,0.85); }

/* ── Profile Hero & Cards ──────────────────────────────────────────────────── */

html[data-theme="darkforce"] .profile-hero {
  background: rgba(8,3,18,0.82);
  border-top:    1px solid rgba(201,32,32,0.45);
  border-left:   4px solid #c92020;
  border-bottom: 1px solid rgba(0,110,200,0.45);
  border-right:  1px solid rgba(0,110,200,0.55);
  box-shadow: -4px 0 20px rgba(201,32,32,0.12), 4px 0 20px rgba(0,100,200,0.10), 0 8px 32px rgba(0,0,0,0.7);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
html[data-theme="darkforce"] .profile-avatar-initials {
  background: linear-gradient(135deg, #c92020, #8b0000);
  color: #f5f5f5;
  border: 3px solid rgba(201,32,32,0.65);
  box-shadow: 0 0 30px rgba(201,32,32,0.6), 0 8px 24px rgba(0,0,0,0.6);
  font-weight: 900;
}
html[data-theme="darkforce"] .profile-hero-info h1 { color: #f5f5f5; }
html[data-theme="darkforce"] .profile-email  { color: #888888; }
html[data-theme="darkforce"] .profile-role-badge {
  background: rgba(201,32,32,0.12);
  color: #e55050;
  border: 1px solid rgba(201,32,32,0.45);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 700;
}
html[data-theme="darkforce"] .profile-card {
  background: rgba(8,3,18,0.82);
  border-top:    1px solid rgba(201,32,32,0.45);
  border-left:   1px solid rgba(201,32,32,0.35);
  border-bottom: 1px solid rgba(0,110,200,0.35);
  border-right:  1px solid rgba(0,110,200,0.45);
  box-shadow: 0 4px 24px rgba(0,0,0,0.7), -3px 0 10px rgba(201,32,32,0.06), 3px 0 10px rgba(0,100,200,0.06);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
html[data-theme="darkforce"] .card-header   {
  border-bottom: 1px solid rgba(201,32,32,0.25);
  background: linear-gradient(90deg, rgba(201,32,32,0.05) 0%, transparent 40%, rgba(0,120,200,0.05) 100%);
}
html[data-theme="darkforce"] .card-header h3 { color: #e55050; text-transform: uppercase; letter-spacing: 0.1em; font-weight: 700; }
html[data-theme="darkforce"] .form-group    { border-bottom: 1px solid rgba(201,32,32,0.08); }
html[data-theme="darkforce"] .form-group label { color: #666666; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.78em; }
html[data-theme="darkforce"] .field-value   { color: #f5f5f5; }
html[data-theme="darkforce"] .field-hint,
html[data-theme="darkforce"] .security-message { color: #555555; }
html[data-theme="darkforce"] .form-input,
html[data-theme="darkforce"] .profile-role-select { background: #0a0a0a; border: 1px solid rgba(201,32,32,0.25); color: #f5f5f5; }
html[data-theme="darkforce"] .form-input:focus { border-color: #c92020; box-shadow: 0 0 0 2px rgba(201,32,32,0.18), 0 0 18px rgba(201,32,32,0.18); background: #000000; }
html[data-theme="darkforce"] .form-input::placeholder { color: #444444; }
html[data-theme="darkforce"] .profile-role-select option { background: #0a0a0a; color: #f5f5f5; }

/* ── Buttons ──────────────────────────────────────────────────────────────── */

html[data-theme="darkforce"] .btn-primary {
  background: linear-gradient(135deg, #c92020, #8b0000);
  color: #f5f5f5;
  border: none;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  box-shadow: 0 4px 20px rgba(201,32,32,0.5), 0 0 0 1px rgba(201,32,32,0.3);
}
html[data-theme="darkforce"] .btn-primary:hover:not(:disabled) {
  background: linear-gradient(135deg, #e55050, #c92020);
  box-shadow: 0 6px 30px rgba(201,32,32,0.7);
  transform: translateY(-1px);
}
html[data-theme="darkforce"] .btn-secondary { background: transparent; color: #888888; border: 1px solid rgba(201,32,32,0.22); }
html[data-theme="darkforce"] .btn-secondary:hover:not(:disabled) { background: rgba(201,32,32,0.08); color: #e55050; border-color: rgba(201,32,32,0.5); }
html[data-theme="darkforce"] .btn-icon { color: #c92020; }
html[data-theme="darkforce"] .btn-icon:hover { color: #e55050; text-shadow: 0 0 12px rgba(201,32,32,0.7); }
html[data-theme="darkforce"] .btn-danger { background: rgba(139,0,0,0.15); color: #e55050; border: 1px solid rgba(201,32,32,0.45); }
html[data-theme="darkforce"] .btn-danger:hover:not(:disabled) { background: rgba(201,32,32,0.22); border-color: #c92020; box-shadow: 0 0 18px rgba(201,32,32,0.45); }

/* ── MFA Section ──────────────────────────────────────────────────────────── */

html[data-theme="darkforce"] .mfa-section   { border-top: 1px solid rgba(201,32,32,0.15); }
html[data-theme="darkforce"] .mfa-icon      { color: #c92020; }
html[data-theme="darkforce"] .mfa-status-badge.active   { background: rgba(0,200,83,0.15); color: #00c853; border: 1px solid rgba(0,200,83,0.4); }
html[data-theme="darkforce"] .mfa-status-badge.inactive { background: rgba(80,80,80,0.2);  color: #777777; border: 1px solid rgba(80,80,80,0.4); }
html[data-theme="darkforce"] .mfa-enabled-message { color: #888888; }
html[data-theme="darkforce"] .mfa-qr-container { background: rgba(248,248,248,0.95); border: 2px solid #c92020; box-shadow: 0 0 28px rgba(201,32,32,0.45); }
html[data-theme="darkforce"] .mfa-secret-key code { background: #000000; color: #e55050; border: 1px solid rgba(201,32,32,0.45); }
html[data-theme="darkforce"] .mfa-step-number { background: #c92020; color: #f5f5f5; font-weight: 900; }
html[data-theme="darkforce"] .mfa-description,
html[data-theme="darkforce"] .mfa-step p  { color: #888888; }
html[data-theme="darkforce"] .mfa-disable-warning { background: rgba(201,32,32,0.1); border-left: 3px solid #c92020; color: #f5f5f5; }
html[data-theme="darkforce"] .message.success { background: rgba(0,200,83,0.1); color: #00c853; border-left: 4px solid #00c853; }
html[data-theme="darkforce"] .message.error   { background: rgba(201,32,32,0.1); color: #e55050; border-left: 4px solid #c92020; }

/* ── Dashboard ──────────────────────────────────────────────────────────── */

html[data-theme="darkforce"] .stat-card,
html[data-theme="darkforce"] .dashboard-card,
html[data-theme="darkforce"] .health-section-row,
html[data-theme="darkforce"] .dashboard-manual-sync-box,
html[data-theme="darkforce"] .dashboard-schedule-row {
  background: rgba(8, 3, 18, 0.80);
  border-top:    1px solid rgba(201, 32,  32, 0.50);
  border-left:   1px solid rgba(201, 32,  32, 0.40);
  border-bottom: 1px solid rgba(0,  110, 200, 0.40);
  border-right:  1px solid rgba(0,  110, 200, 0.50);
  box-shadow:
    0 4px 24px rgba(0,0,0,0.6),
    -4px 0 14px rgba(201,32,32,0.08),
    4px  0 14px rgba(0,100,200,0.08);
  color: #f5f5f5;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
html[data-theme="darkforce"] .stat-card:hover,
html[data-theme="darkforce"] .dashboard-card:hover {
  background: rgba(12, 4, 24, 0.85);
  border-top:    1px solid rgba(201, 32,  32, 0.75);
  border-left:   1px solid rgba(201, 32,  32, 0.60);
  border-bottom: 1px solid rgba(0,  136, 220, 0.60);
  border-right:  1px solid rgba(0,  136, 220, 0.75);
  box-shadow:
    -6px  0 20px rgba(201,32,32,0.18),
    6px   0 20px rgba(0,120,220,0.18),
    0 8px 32px rgba(0,0,0,0.7);
  transform: translateY(-2px);
}
html[data-theme="darkforce"] .stat-value { color: #e55050; font-weight: 900; text-shadow: 0 0 16px rgba(201,32,32,0.55); }
html[data-theme="darkforce"] .stat-label { color: #666666; text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.73em; font-weight: 600; }
html[data-theme="darkforce"] .dashboard-schedule-btn { background: transparent; border: 1px solid rgba(201,32,32,0.4); color: #e55050; }
html[data-theme="darkforce"] .dashboard-schedule-btn:hover:not(:disabled) { background: rgba(201,32,32,0.08); border-color: #c92020; box-shadow: 0 0 18px rgba(201,32,32,0.3); }
html[data-theme="darkforce"] .health-category-title { color: #e55050; text-transform: uppercase; letter-spacing: 0.1em; font-weight: 700; text-shadow: 0 0 12px rgba(201,32,32,0.4); }
html[data-theme="darkforce"] .health-chip {
  background: rgba(8,3,18,0.78);
  border-top:    1px solid rgba(201,32,32,0.4);
  border-left:   1px solid rgba(201,32,32,0.3);
  border-bottom: 1px solid rgba(0,110,200,0.3);
  border-right:  1px solid rgba(0,110,200,0.4);
}
html[data-theme="darkforce"] .health-chip-label { color: #777777; }
html[data-theme="darkforce"] .health-chip-value { color: #e55050; font-weight: 700; }
html[data-theme="darkforce"] .sync-info-label  { color: #666666; }
html[data-theme="darkforce"] .sync-info-value  { color: #f5f5f5; }
html[data-theme="darkforce"] .dashboard-schedule-label { color: #666666; }
html[data-theme="darkforce"] .dashboard-schedule-value { color: #f5f5f5; }

/* ── Reports / Analytics ──────────────────────────────────────────────────── */

html[data-theme="darkforce"] .analytics-page,
html[data-theme="darkforce"] .reports-page,
html[data-theme="darkforce"] .page-wrapper { background: transparent; }

html[data-theme="darkforce"] .analytics-card,
html[data-theme="darkforce"] .report-card,
html[data-theme="darkforce"] .kpi-card,
html[data-theme="darkforce"] .data-card {
  background: rgba(8,3,18,0.80);
  border-top:    1px solid rgba(201,32,32,0.45);
  border-left:   1px solid rgba(201,32,32,0.35);
  border-bottom: 1px solid rgba(0,110,200,0.35);
  border-right:  1px solid rgba(0,110,200,0.45);
  box-shadow: 0 4px 16px rgba(0,0,0,0.6), -3px 0 10px rgba(201,32,32,0.06), 3px 0 10px rgba(0,100,200,0.06);
  color: #f5f5f5;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
html[data-theme="darkforce"] .analytics-card:hover,
html[data-theme="darkforce"] .kpi-card:hover {
  border-top:    1px solid rgba(201,32,32,0.70);
  border-left:   1px solid rgba(201,32,32,0.55);
  border-bottom: 1px solid rgba(0,136,220,0.55);
  border-right:  1px solid rgba(0,136,220,0.70);
  box-shadow: -4px 0 16px rgba(201,32,32,0.14), 4px 0 16px rgba(0,120,220,0.14);
}

html[data-theme="darkforce"] .kpi-value  { color: #e55050; font-weight: 900; }
html[data-theme="darkforce"] .kpi-label  { color: #666666; text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.78em; }
html[data-theme="darkforce"] .kpi-trend.positive { color: #00c853; }
html[data-theme="darkforce"] .kpi-trend.negative { color: #c92020; }
html[data-theme="darkforce"] .segment-stat-value { color: #e55050; font-weight: 700; }
html[data-theme="darkforce"] .segment-stat-label { color: #666666; }
html[data-theme="darkforce"] .meta-label { color: #666666; }
html[data-theme="darkforce"] .meta-value { color: #f5f5f5; }

html[data-theme="darkforce"] .period-selector-btn { background: transparent; border: 1px solid rgba(201,32,32,0.2); color: #666666; }
html[data-theme="darkforce"] .period-selector-btn:hover { background: rgba(201,32,32,0.07); border-color: rgba(201,32,32,0.45); color: #e55050; }
html[data-theme="darkforce"] .period-selector-btn.active { background: #c92020; border-color: #c92020; color: #f5f5f5; font-weight: 900; box-shadow: 0 0 18px rgba(201,32,32,0.55); }

html[data-theme="darkforce"] .section-title    { color: #e55050; text-transform: uppercase; letter-spacing: 0.14em; font-weight: 700; }
html[data-theme="darkforce"] .section-subtitle { color: #666666; }

/* ── Settings / Roles / Brand Flags ───────────────────────────────────────── */

html[data-theme="darkforce"] .settings-section,
html[data-theme="darkforce"] .roles-card,
html[data-theme="darkforce"] .brand-card {
  background: rgba(8,3,18,0.80);
  border-top:    1px solid rgba(201,32,32,0.45);
  border-left:   1px solid rgba(201,32,32,0.35);
  border-bottom: 1px solid rgba(0,110,200,0.35);
  border-right:  1px solid rgba(0,110,200,0.45);
  box-shadow: 0 4px 16px rgba(0,0,0,0.6), -3px 0 10px rgba(201,32,32,0.06), 3px 0 10px rgba(0,100,200,0.06);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
html[data-theme="darkforce"] .settings-label { color: #666666; }
html[data-theme="darkforce"] .settings-value { color: #f5f5f5; }
html[data-theme="darkforce"] .roles-page-header h1,
html[data-theme="darkforce"] .brand-page-header h1,
html[data-theme="darkforce"] .page-title { color: #e55050; text-shadow: 0 0 16px rgba(201,32,32,0.4); }
html[data-theme="darkforce"] .roles-card-title,
html[data-theme="darkforce"] .brand-card-name        { color: #f5f5f5; }
html[data-theme="darkforce"] .roles-card-description,
html[data-theme="darkforce"] .brand-card-description  { color: #666666; }

/* ── Monitoring ────────────────────────────────────────────────────────────── */

html[data-theme="darkforce"] .monitoring-page,
html[data-theme="darkforce"] .monitoring-card,
html[data-theme="darkforce"] .metric-card {
  background: #000000;
  border-top:    1px solid rgba(201,32,32,0.45);
  border-left:   1px solid rgba(201,32,32,0.35);
  border-bottom: 1px solid rgba(0,110,200,0.35);
  border-right:  1px solid rgba(0,110,200,0.45);
  box-shadow: -3px 0 10px rgba(201,32,32,0.06), 3px 0 10px rgba(0,100,200,0.06);
  color: #f5f5f5;
}
html[data-theme="darkforce"] .metric-value { color: #e55050; font-weight: 700; }
html[data-theme="darkforce"] .metric-label { color: #666666; }
html[data-theme="darkforce"] .metric-unit  { color: #555555; }

/* ── Error Logs / XRay ──────────────────────────────────────────────────────── */

html[data-theme="darkforce"] .error-logs-card,
html[data-theme="darkforce"] .xray-card,
html[data-theme="darkforce"] .log-entry {
  background: rgba(8,3,18,0.78);
  border-top:    1px solid rgba(201,32,32,0.35);
  border-left:   1px solid rgba(201,32,32,0.25);
  border-bottom: 1px solid rgba(0,110,200,0.25);
  border-right:  1px solid rgba(0,110,200,0.35);
  color: #f5f5f5;
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}
html[data-theme="darkforce"] .log-entry-level.error { color: #e55050; font-weight: 700; }
html[data-theme="darkforce"] .log-entry-level.warn  { color: #ff8c00; }
html[data-theme="darkforce"] .log-entry-level.info  { color: #0088cc; }
html[data-theme="darkforce"] .error-log-message { color: #aaaaaa; }
html[data-theme="darkforce"] .error-log-time    { color: #555555; }

/* ── Monitoring filter buttons ─────────────────────────────────────────────── */
html[data-theme="darkforce"] .btn-metric-filter {
  background: rgba(8,3,18,0.8);
  border-top:    1px solid rgba(201,32,32,0.3); border-left:   1px solid rgba(201,32,32,0.2);
  border-bottom: 1px solid rgba(0,110,200,0.2); border-right:  1px solid rgba(0,110,200,0.3);
  color: #888888;
}
html[data-theme="darkforce"] .btn-metric-filter:hover { background: rgba(201,32,32,0.1); border-color: rgba(201,32,32,0.5); color: #e55050; }
html[data-theme="darkforce"] .btn-metric-filter.active { background: rgba(201,32,32,0.15); border-color: #c92020; color: #e55050; }

/* ── Settings mode buttons ─────────────────────────────────────────────────── */
html[data-theme="darkforce"] .settings-mode-btn {
  background: rgba(8,3,18,0.8);
  border-top:    1px solid rgba(201,32,32,0.25); border-left:   1px solid rgba(201,32,32,0.18);
  border-bottom: 1px solid rgba(0,110,200,0.18); border-right:  1px solid rgba(0,110,200,0.25);
  color: #777777;
}
html[data-theme="darkforce"] .settings-mode-btn:hover:not(:disabled) { background: rgba(201,32,32,0.08); color: #e55050; }
html[data-theme="darkforce"] .settings-mode-btn.active { background: rgba(201,32,32,0.12); border-color: rgba(201,32,32,0.5); color: #e55050; box-shadow: 0 0 10px rgba(201,32,32,0.12); }

/* ── Error log filters / search / cards ────────────────────────────────────── */
html[data-theme="darkforce"] .logs-stat-card {
  background: rgba(8,3,18,0.80);
  border-top:    1px solid rgba(201,32,32,0.35); border-left:   1px solid rgba(201,32,32,0.25);
  border-bottom: 1px solid rgba(0,110,200,0.25); border-right:  1px solid rgba(0,110,200,0.35);
  color: #f5f5f5;
}
html[data-theme="darkforce"] .logs-stat-card--error { border-top-color: rgba(229,80,80,0.5); border-left-color: rgba(229,80,80,0.4); }
html[data-theme="darkforce"] .logs-stat-card--warn  { border-top-color: rgba(255,140,0,0.5); border-left-color: rgba(255,140,0,0.4); }
html[data-theme="darkforce"] .logs-section-card {
  background: rgba(8,3,18,0.78);
  border-top:    1px solid rgba(201,32,32,0.3); border-left:   1px solid rgba(201,32,32,0.22);
  border-bottom: 1px solid rgba(0,110,200,0.22); border-right:  1px solid rgba(0,110,200,0.3);
  color: #f5f5f5;
}
html[data-theme="darkforce"] .btn-logs-group,
html[data-theme="darkforce"] .btn-logs-level { background: rgba(8,3,18,0.8); border: 1px solid rgba(201,32,32,0.28); color: #777777; }
html[data-theme="darkforce"] .btn-logs-group:hover,
html[data-theme="darkforce"] .btn-logs-level:hover { background: rgba(201,32,32,0.08); border-color: rgba(201,32,32,0.5); color: #e55050; }
html[data-theme="darkforce"] .btn-logs-group.active,
html[data-theme="darkforce"] .btn-logs-level.active { background: rgba(201,32,32,0.14); border-color: #c92020; color: #e55050; }
html[data-theme="darkforce"] .logs-search-input { background: rgba(8,3,18,0.85); border: 1px solid rgba(201,32,32,0.32); color: #f5f5f5; }
html[data-theme="darkforce"] .logs-search-input:focus { border-color: #c92020; box-shadow: 0 0 0 2px rgba(201,32,32,0.15); }
html[data-theme="darkforce"] .logs-search-input::placeholder { color: #555555; }

/* ── Users Table / Modals ──────────────────────────────────────────────────── */

html[data-theme="darkforce"] .users-table-wrapper,
html[data-theme="darkforce"] .users-card {
  background: rgba(8,3,18,0.80);
  border-top:    1px solid rgba(201,32,32,0.45);
  border-left:   1px solid rgba(201,32,32,0.35);
  border-bottom: 1px solid rgba(0,110,200,0.35);
  border-right:  1px solid rgba(0,110,200,0.45);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
html[data-theme="darkforce"] .users-table thead tr { background: #050505; border-bottom: 2px solid rgba(201,32,32,0.4); }
html[data-theme="darkforce"] .users-table th { color: #e55050; text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.78em; }
html[data-theme="darkforce"] .users-table td { color: #f5f5f5; }
html[data-theme="darkforce"] .users-table tbody tr { border-bottom: 1px solid rgba(201,32,32,0.07); }
html[data-theme="darkforce"] .users-table tbody tr:hover { background: rgba(201,32,32,0.04); }
html[data-theme="darkforce"] .users-status-label.enabled  { background: rgba(0,200,83,0.12); color: #00c853; border: 1px solid rgba(0,200,83,0.3); }
html[data-theme="darkforce"] .users-status-label.disabled { background: rgba(201,32,32,0.12); color: #e55050; border: 1px solid rgba(201,32,32,0.3); }
html[data-theme="darkforce"] .users-modal-overlay { background: rgba(0,0,0,0.93); }
html[data-theme="darkforce"] .users-modal {
  background: rgba(8,3,18,0.93);
  border-top:    1px solid rgba(201,32,32,0.55);
  border-left:   1px solid rgba(201,32,32,0.45);
  border-bottom: 1px solid rgba(0,120,210,0.45);
  border-right:  1px solid rgba(0,120,210,0.55);
  box-shadow: -6px 0 24px rgba(201,32,32,0.12), 6px 0 24px rgba(0,110,200,0.12), 0 24px 80px rgba(0,0,0,0.95);
  color: #f5f5f5;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
html[data-theme="darkforce"] .users-modal-header { border-bottom: 1px solid rgba(201,32,32,0.22); }
html[data-theme="darkforce"] .users-modal-header h2 { color: #e55050; text-transform: uppercase; letter-spacing: 0.1em; }
html[data-theme="darkforce"] .users-modal-form label { color: #666666; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.78em; }
html[data-theme="darkforce"] .users-modal-form input,
html[data-theme="darkforce"] .users-modal-form select { background: #0a0a0a; border: 1px solid rgba(201,32,32,0.22); color: #f5f5f5; }
html[data-theme="darkforce"] .users-modal-form input:focus,
html[data-theme="darkforce"] .users-modal-form select:focus { border-color: #c92020; box-shadow: 0 0 0 2px rgba(201,32,32,0.18); }
html[data-theme="darkforce"] .users-modal-form select option { background: #0a0a0a; color: #f5f5f5; }
html[data-theme="darkforce"] .users-role-select option { background: #0a0a0a; color: #f5f5f5; }

/* ── Activity / Inventory Modal ───────────────────────────────────────────── */

html[data-theme="darkforce"] .activity-modal-overlay { background: rgba(0,0,0,0.93); }
html[data-theme="darkforce"] .activity-modal,
html[data-theme="darkforce"] .inventory-modal {
  background: rgba(8,3,18,0.93);
  border-top:    1px solid rgba(201,32,32,0.55);
  border-left:   1px solid rgba(201,32,32,0.45);
  border-bottom: 1px solid rgba(0,120,210,0.45);
  border-right:  1px solid rgba(0,120,210,0.55);
  box-shadow: -6px 0 24px rgba(201,32,32,0.12), 6px 0 24px rgba(0,110,200,0.12), 0 24px 80px rgba(0,0,0,0.95);
  color: #f5f5f5;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
html[data-theme="darkforce"] .activity-modal-header,
html[data-theme="darkforce"] .inventory-modal-header { border-bottom: 1px solid rgba(201,32,32,0.22); }
html[data-theme="darkforce"] .activity-modal-title { color: #e55050; }

/* ── Analytics hub cards ──────────────────────────────────────────────────── */

html[data-theme="darkforce"] .analytics-hub-card {
  background: rgba(8,3,18,0.80);
  border-top:    1px solid rgba(201,32,32,0.45);
  border-left:   1px solid rgba(201,32,32,0.35);
  border-bottom: 1px solid rgba(0,110,200,0.35);
  border-right:  1px solid rgba(0,110,200,0.45);
  box-shadow: 0 4px 16px rgba(0,0,0,0.6), -3px 0 10px rgba(201,32,32,0.06), 3px 0 10px rgba(0,100,200,0.06);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
html[data-theme="darkforce"] .analytics-hub-card:hover {
  border-top:    1px solid rgba(201,32,32,0.70);
  border-left:   1px solid rgba(201,32,32,0.55);
  border-bottom: 1px solid rgba(0,136,220,0.55);
  border-right:  1px solid rgba(0,136,220,0.70);
  box-shadow: -5px 0 20px rgba(201,32,32,0.15), 5px 0 20px rgba(0,120,220,0.15), 0 8px 32px rgba(0,0,0,0.7);
  transform: translateY(-2px);
}
html[data-theme="darkforce"] .analytics-hub-card h3 { color: #f5f5f5; }
html[data-theme="darkforce"] .analytics-hub-card p  { color: #666666; }

/* ── Brand Flags ──────────────────────────────────────────────────────────── */

html[data-theme="darkforce"] .brand-flag-card {
  background: rgba(8,3,18,0.80);
  border-top:    1px solid rgba(201,32,32,0.45);
  border-left:   1px solid rgba(201,32,32,0.35);
  border-bottom: 1px solid rgba(0,110,200,0.35);
  border-right:  1px solid rgba(0,110,200,0.45);
  box-shadow: 0 4px 16px rgba(0,0,0,0.6);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
html[data-theme="darkforce"] .brand-flag-card.active-brand {
  border-top:    1px solid rgba(201,32,32,0.70);
  border-left:   1px solid rgba(201,32,32,0.55);
  border-bottom: 1px solid rgba(0,136,220,0.55);
  border-right:  1px solid rgba(0,136,220,0.70);
  box-shadow: -4px 0 14px rgba(201,32,32,0.14), 4px 0 14px rgba(0,120,220,0.14);
}
html[data-theme="darkforce"] .brand-flag-name { color: #f5f5f5; font-weight: 700; }
html[data-theme="darkforce"] .brand-flag-status.active   { color: #00c853; }
html[data-theme="darkforce"] .brand-flag-status.inactive { color: #555555; }

html[data-theme="darkforce"] .brand-flags-filter-tabs {
  background: rgba(5, 3, 10, 0.9);
  border-color: rgba(201, 32, 32, 0.35);
}

html[data-theme="darkforce"] .brand-flags-filter-btn {
  background: rgba(5, 3, 10, 0.9);
  border-right-color: rgba(201, 32, 32, 0.2);
  color: #888888;
}

html[data-theme="darkforce"] .brand-flags-filter-btn:hover {
  background: rgba(201, 32, 32, 0.1);
  color: #f5f5f5;
}

html[data-theme="darkforce"] .brand-flags-filter-btn.active {
  background: rgba(201, 32, 32, 0.2);
  color: #e55050;
}

html[data-theme="darkforce"] .brand-flags-search {
  background: rgba(5, 3, 10, 0.85);
  border-color: rgba(201, 32, 32, 0.3);
  color: #f5f5f5;
}

html[data-theme="darkforce"] .brand-flags-search:focus {
  border-color: #e55050;
  box-shadow: 0 0 0 3px rgba(201, 32, 32, 0.15);
}

html[data-theme="darkforce"] .brand-flags-search::placeholder {
  color: #555555;
}

html[data-theme="darkforce"] .brand-flags-summary-item {
  background: rgba(5, 3, 10, 0.85);
  border: 1px solid rgba(201, 32, 32, 0.25);
  color: #f5f5f5;
}

html[data-theme="darkforce"] .brand-flags-summary-item.active {
  border-color: rgba(201, 32, 32, 0.55);
  color: #e55050;
}

html[data-theme="darkforce"] .brand-flags-summary-item.inactive {
  border-color: rgba(201, 32, 32, 0.1);
  color: #666666;
}

html[data-theme="darkforce"] .brand-flag-state-pill.active {
  background: rgba(201, 32, 32, 0.18);
  color: #e55050;
}

html[data-theme="darkforce"] .brand-flag-state-pill.inactive {
  background: rgba(5, 3, 10, 0.7);
  color: #555555;
}

html[data-theme="darkforce"] .brand-flag-slider {
  background: rgba(201, 32, 32, 0.25);
}

html[data-theme="darkforce"] .brand-flag-card h3 {
  color: #f5f5f5;
}

/* ── Roles ─────────────────────────────────────────────────────────────────── */

html[data-theme="darkforce"] .roles-table-row:hover { background: rgba(201,32,32,0.04); }
html[data-theme="darkforce"] .roles-table th { color: #e55050; background: #050505; text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.78em; }
html[data-theme="darkforce"] .roles-table td { color: #f5f5f5; border-bottom: 1px solid rgba(201,32,32,0.07); }
html[data-theme="darkforce"] .role-badge { background: rgba(201,32,32,0.1); color: #e55050; border: 1px solid rgba(201,32,32,0.35); font-weight: 700; letter-spacing: 0.08em; }

/* ── Dashboard Quick Access ───────────────────────────────────────────────── */

html[data-theme="darkforce"] .dashboard-quick-access-card {
  background: rgba(8,3,18,0.80);
  border-top:    1px solid rgba(201,32,32,0.45);
  border-left:   1px solid rgba(201,32,32,0.35);
  border-bottom: 1px solid rgba(0,110,200,0.35);
  border-right:  1px solid rgba(0,110,200,0.45);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
html[data-theme="darkforce"] .dashboard-quick-link { color: #888888; border: 1px solid rgba(201,32,32,0.12); background: rgba(0,0,0,0.6); }
html[data-theme="darkforce"] .dashboard-quick-link:hover { color: #e55050; border-color: rgba(201,32,32,0.5); background: rgba(201,32,32,0.07); box-shadow: 0 0 16px rgba(201,32,32,0.14), 0 0 8px rgba(0,100,180,0.06); }
html[data-theme="darkforce"] .dashboard-section-title { color: #e55050; text-transform: uppercase; letter-spacing: 0.12em; font-weight: 700; }
html[data-theme="darkforce"] .brand-summary-chip {
  background: rgba(8,3,18,0.78);
  border-top:    1px solid rgba(201,32,32,0.38);
  border-left:   1px solid rgba(201,32,32,0.28);
  border-bottom: 1px solid rgba(0,110,200,0.28);
  border-right:  1px solid rgba(0,110,200,0.38);
  color: #f5f5f5;
}
html[data-theme="darkforce"] .brand-summary-chip .chip-value { color: #e55050; font-weight: 900; }

/* ── Reports / Gonher Inventory ───────────────────────────────────────────── */

html[data-theme="darkforce"] .gonher-inventory-card,
html[data-theme="darkforce"] .gonher-inventory-table-wrapper {
  background: rgba(8,3,18,0.80);
  border-top:    1px solid rgba(201,32,32,0.45);
  border-left:   1px solid rgba(201,32,32,0.35);
  border-bottom: 1px solid rgba(0,110,200,0.35);
  border-right:  1px solid rgba(0,110,200,0.45);
  color: #f5f5f5;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
html[data-theme="darkforce"] .gonher-inventory-table thead tr { background: #050505; }
html[data-theme="darkforce"] .gonher-inventory-table th { color: #e55050; text-transform: uppercase; letter-spacing: 0.08em; }
html[data-theme="darkforce"] .gonher-inventory-table td { color: #f5f5f5; border-bottom: 1px solid rgba(201,32,32,0.07); }
html[data-theme="darkforce"] .gonher-inventory-table tbody tr:hover { background: rgba(201,32,32,0.04); }

/* ── Settings / General ───────────────────────────────────────────────────── */

html[data-theme="darkforce"] .settings-page,
html[data-theme="darkforce"] .settings-card {
  background: rgba(8,3,18,0.80);
  border-top:    1px solid rgba(201,32,32,0.45);
  border-left:   1px solid rgba(201,32,32,0.35);
  border-bottom: 1px solid rgba(0,110,200,0.35);
  border-right:  1px solid rgba(0,110,200,0.45);
  color: #f5f5f5;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
html[data-theme="darkforce"] .settings-sidebar {
  background: rgba(8,3,18,0.88);
  border-top:    1px solid rgba(201,32,32,0.45);
  border-left:   1px solid rgba(201,32,32,0.35);
  border-bottom: 1px solid rgba(0,110,200,0.35);
  border-right:  1px solid rgba(0,110,200,0.45);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
html[data-theme="darkforce"] .settings-content {
  background: rgba(8,3,18,0.80);
  border-top:    1px solid rgba(201,32,32,0.35);
  border-left:   1px solid rgba(201,32,32,0.25);
  border-bottom: 1px solid rgba(0,110,200,0.25);
  border-right:  1px solid rgba(0,110,200,0.35);
  color: #f5f5f5;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
html[data-theme="darkforce"] .settings-nav-item {
  background: rgba(0,0,0,0.4);
  border: 1px solid rgba(201,32,32,0.18);
  color: #888888;
}
html[data-theme="darkforce"] .settings-nav-item:hover:not(:disabled) {
  background: rgba(201,32,32,0.08);
  color: #e55050;
  border-color: rgba(201,32,32,0.45);
}
html[data-theme="darkforce"] .settings-nav-item.active {
  background: linear-gradient(90deg, rgba(201,32,32,0.15), rgba(0,100,180,0.08));
  color: #e55050;
  border-top:    1px solid rgba(201,32,32,0.55);
  border-left:   1px solid rgba(201,32,32,0.45);
  border-bottom: 1px solid rgba(0,110,200,0.35);
  border-right:  1px solid rgba(0,110,200,0.45);
  font-weight: 700;
}
html[data-theme="darkforce"] .settings-nav-label { color: #444444; text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.7em; }
html[data-theme="darkforce"] .settings-header h1 { color: #e55050; }

/* ── Monitoring Charts ────────────────────────────────────────────────────── */

html[data-theme="darkforce"] .monitoring-section-card {
  background: rgba(8,3,18,0.80);
  border-top:    1px solid rgba(201,32,32,0.45);
  border-left:   1px solid rgba(201,32,32,0.35);
  border-bottom: 1px solid rgba(0,110,200,0.35);
  border-right:  1px solid rgba(0,110,200,0.45);
  color: #f5f5f5;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
html[data-theme="darkforce"] .monitoring-chart-title  { color: #e55050; text-transform: uppercase; letter-spacing: 0.1em; }
html[data-theme="darkforce"] .monitoring-stat-value   { color: #e55050; font-weight: 700; }
html[data-theme="darkforce"] .monitoring-stat-label   { color: #666666; }

/* ── Modal shared ──────────────────────────────────────────────────────────── */

html[data-theme="darkforce"] .modal-overlay { background: rgba(0,0,0,0.93); }
html[data-theme="darkforce"] .modal-content,
html[data-theme="darkforce"] .modal-box {
  background: rgba(8,3,18,0.93);
  border-top:    1px solid rgba(201, 32,  32, 0.55);
  border-left:   1px solid rgba(201, 32,  32, 0.45);
  border-bottom: 1px solid rgba(0,  120, 210, 0.45);
  border-right:  1px solid rgba(0,  120, 210, 0.55);
  box-shadow:
    -6px 0 24px rgba(201,32,32,0.12),
    6px  0 24px rgba(0,110,200,0.12),
    0 24px 80px rgba(0,0,0,0.95);
  color: #f5f5f5;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
html[data-theme="darkforce"] .modal-header,
html[data-theme="darkforce"] .modal-title { color: #e55050; border-bottom: 1px solid rgba(201,32,32,0.22); }
html[data-theme="darkforce"] .modal-close-btn { color: #666666; background: transparent; border: 1px solid rgba(201,32,32,0.15); }
html[data-theme="darkforce"] .modal-close-btn:hover { color: #e55050; border-color: rgba(201,32,32,0.55); background: rgba(201,32,32,0.07); }

/* ── Loading / Empty States ────────────────────────────────────────────────── */

html[data-theme="darkforce"] .loading-spinner { border-top-color: #c92020; }
html[data-theme="darkforce"] .loading-text    { color: #666666; }
html[data-theme="darkforce"] .empty-state     { color: #555555; }
html[data-theme="darkforce"] .empty-icon      { color: #c92020; opacity: 0.4; }

/* ── Badges / Tags ──────────────────────────────────────────────────────────── */

html[data-theme="darkforce"] .badge-success { background: rgba(0,200,83,0.15); color: #00c853; border: 1px solid rgba(0,200,83,0.35); }
html[data-theme="darkforce"] .badge-warning { background: rgba(255,140,0,0.15); color: #ff8c00; border: 1px solid rgba(255,140,0,0.35); }
html[data-theme="darkforce"] .badge-danger  { background: rgba(201,32,32,0.15); color: #e55050; border: 1px solid rgba(201,32,32,0.4); }
html[data-theme="darkforce"] .badge-info    { background: rgba(0,136,204,0.18); color: #33aaee; border: 1px solid rgba(0,136,204,0.45); text-shadow: 0 0 8px rgba(0,136,204,0.4); }

/* ── Activity Log ──────────────────────────────────────────────────────────── */

html[data-theme="darkforce"] .activity-log-row { border-bottom: 1px solid rgba(201,32,32,0.07); }
html[data-theme="darkforce"] .activity-log-row:hover { background: rgba(201,32,32,0.03); }
html[data-theme="darkforce"] .activity-action { color: #e55050; font-weight: 700; }
html[data-theme="darkforce"] .activity-user   { color: #aaaaaa; }
html[data-theme="darkforce"] .activity-time   { color: #555555; font-size: 0.85em; }

/* ── Global Form Controls ──────────────────────────────────────────────────── */

html[data-theme="darkforce"] input[type="text"],
html[data-theme="darkforce"] input[type="email"],
html[data-theme="darkforce"] input[type="password"],
html[data-theme="darkforce"] input[type="search"],
html[data-theme="darkforce"] input[type="date"],
html[data-theme="darkforce"] input[type="number"],
html[data-theme="darkforce"] textarea,
html[data-theme="darkforce"] select { background: #0a0a0a; border: 1px solid rgba(201,32,32,0.22); color: #f5f5f5; caret-color: #c92020; }

html[data-theme="darkforce"] input[type="text"]:focus,
html[data-theme="darkforce"] input[type="email"]:focus,
html[data-theme="darkforce"] input[type="password"]:focus,
html[data-theme="darkforce"] input[type="search"]:focus,
html[data-theme="darkforce"] input[type="date"]:focus,
html[data-theme="darkforce"] input[type="number"]:focus,
html[data-theme="darkforce"] textarea:focus,
html[data-theme="darkforce"] select:focus { border-color: #c92020; box-shadow: 0 0 0 2px rgba(201,32,32,0.18), 0 0 14px rgba(201,32,32,0.12); outline: none; }

html[data-theme="darkforce"] input::placeholder,
html[data-theme="darkforce"] textarea::placeholder { color: #444444; }
html[data-theme="darkforce"] input[type="checkbox"],
html[data-theme="darkforce"] input[type="radio"] { accent-color: #c92020; }
html[data-theme="darkforce"] select option { background: #0a0a0a; color: #f5f5f5; }

/* ── POS overrides ─────────────────────────────────────────────────────────── */

html[data-theme="darkforce"] .pos-screen { background: #000000; color: #f5f5f5; }
html[data-theme="darkforce"] .pos-card,
html[data-theme="darkforce"] .pos-section {
  background: rgba(8,3,18,0.80);
  border-top:    1px solid rgba(201,32,32,0.40);
  border-left:   1px solid rgba(201,32,32,0.30);
  border-bottom: 1px solid rgba(0,110,200,0.30);
  border-right:  1px solid rgba(0,110,200,0.40);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
html[data-theme="darkforce"] .pos-product-name  { color: #f5f5f5; }
html[data-theme="darkforce"] .pos-product-price { color: #e55050; font-weight: 700; }
html[data-theme="darkforce"] .pos-total         { color: #e55050; font-weight: 900; }
html[data-theme="darkforce"] .pos-btn-primary   { background: linear-gradient(135deg, #c92020, #8b0000); color: #f5f5f5; font-weight: 900; border: none; box-shadow: 0 4px 22px rgba(201,32,32,0.55); }
html[data-theme="darkforce"] .pos-btn-primary:hover { background: linear-gradient(135deg, #e55050, #c92020); box-shadow: 0 6px 30px rgba(201,32,32,0.75); }
html[data-theme="darkforce"] .delivery-btn     { background: rgba(8,3,18,0.80); color: #f5f5f5; border-top: 1px solid rgba(201,32,32,0.35); border-left: 1px solid rgba(201,32,32,0.25); border-bottom: 1px solid rgba(0,110,200,0.25); border-right: 1px solid rgba(0,110,200,0.35); }
html[data-theme="darkforce"] .payment-btn      { background: rgba(8,3,18,0.80); color: #f5f5f5; border-top: 1px solid rgba(201,32,32,0.35); border-left: 1px solid rgba(201,32,32,0.25); border-bottom: 1px solid rgba(0,110,200,0.25); border-right: 1px solid rgba(0,110,200,0.35); }
html[data-theme="darkforce"] .delivery-btn.active,
html[data-theme="darkforce"] .payment-btn.active { background: #c92020; color: #f5f5f5; border-color: #c92020; }
html[data-theme="darkforce"] .confirm-summary  {
  background: rgba(8,3,18,0.82);
  border-top:    1px solid rgba(201,32,32,0.38);
  border-left:   1px solid rgba(201,32,32,0.28);
  border-bottom: 1px solid rgba(0,110,200,0.28);
  border-right:  1px solid rgba(0,110,200,0.38);
}
html[data-theme="darkforce"] .confirm-row      { color: #e55050; }
html[data-theme="darkforce"] .receipt-details,
html[data-theme="darkforce"] .receipt-items    {
  background: rgba(8,3,18,0.80);
  border-top:    1px solid rgba(201,32,32,0.35);
  border-left:   1px solid rgba(201,32,32,0.25);
  border-bottom: 1px solid rgba(0,110,200,0.25);
  border-right:  1px solid rgba(0,110,200,0.35);
}
html[data-theme="darkforce"] .receipt-header h1 { color: #e55050; }
html[data-theme="darkforce"] .receipt-row      { color: #e55050; border-color: rgba(201,32,32,0.22); }
html[data-theme="darkforce"] .customer-form input,
html[data-theme="darkforce"] .customer-form select { background: #000000; border-color: rgba(201,32,32,0.25); color: #f5f5f5; }
html[data-theme="darkforce"] .summary-row        { color: #e55050; }
html[data-theme="darkforce"] .discount-input-wrap input { background: #000000; border-color: rgba(201,32,32,0.25); color: #f5f5f5; }

/* ── Roles y Permisos ─────────────────────────────────────────────────────── */

html[data-theme="darkforce"] .roles-page { background: transparent; }
html[data-theme="darkforce"] .role-card {
  background: rgba(8,3,18,0.82);
  border-top:    1px solid rgba(201,32,32,0.50);
  border-left:   1px solid rgba(201,32,32,0.40);
  border-bottom: 1px solid rgba(0,110,200,0.40);
  border-right:  1px solid rgba(0,110,200,0.50);
  box-shadow: -3px 0 12px rgba(201,32,32,0.07), 3px 0 12px rgba(0,100,200,0.07);
  color: #f5f5f5;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
html[data-theme="darkforce"] .role-card--expanded {
  border-top:    1px solid rgba(201,32,32,0.70);
  border-left:   1px solid rgba(201,32,32,0.55);
  border-bottom: 1px solid rgba(0,136,220,0.55);
  border-right:  1px solid rgba(0,136,220,0.70);
  box-shadow: -5px 0 18px rgba(201,32,32,0.13), 5px 0 18px rgba(0,120,220,0.13);
}
html[data-theme="darkforce"] .role-card-header { background: transparent; cursor: pointer; }
html[data-theme="darkforce"] .role-card-title  { color: #f5f5f5; font-weight: 700; }
html[data-theme="darkforce"] .role-card-meta   { color: #666666; }
html[data-theme="darkforce"] .role-card-body   { background: transparent; }
html[data-theme="darkforce"] .role-expand-btn  { color: #c92020; }
html[data-theme="darkforce"] .role-builtin-badge { background: rgba(201,32,32,0.12); color: #e55050; border: 1px solid rgba(201,32,32,0.35); }
html[data-theme="darkforce"] .role-locked-badge  { background: rgba(0,110,200,0.12); color: #33aaee; border: 1px solid rgba(0,136,204,0.35); }
html[data-theme="darkforce"] .role-perm-section { background: rgba(0,0,0,0.3); border-top: 1px solid rgba(201,32,32,0.15); border-bottom: 1px solid rgba(0,110,200,0.15); }
html[data-theme="darkforce"] .role-perm-section-header { color: #e55050; }
html[data-theme="darkforce"] .role-perm-name   { color: #f5f5f5; }
html[data-theme="darkforce"] .role-perm-info   { color: #666666; }
html[data-theme="darkforce"] .roles-modal,
html[data-theme="darkforce"] .roles-delete-modal {
  background: rgba(8,3,18,0.95);
  border-top:    1px solid rgba(201,32,32,0.55);
  border-left:   1px solid rgba(201,32,32,0.45);
  border-bottom: 1px solid rgba(0,120,210,0.45);
  border-right:  1px solid rgba(0,120,210,0.55);
  box-shadow: -6px 0 24px rgba(201,32,32,0.12), 6px 0 24px rgba(0,110,200,0.12), 0 24px 80px rgba(0,0,0,0.95);
  color: #f5f5f5;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

/* ── Inventario Tienda en Línea (ShopifyMx) ──────────────────────────────── */

html[data-theme="darkforce"] .inventory-page,
html[data-theme="darkforce"] .shopify-inventory-page { background: transparent; }
html[data-theme="darkforce"] .product-card {
  background: rgba(8,3,18,0.82);
  border-top:    1px solid rgba(201,32,32,0.45);
  border-left:   1px solid rgba(201,32,32,0.35);
  border-bottom: 1px solid rgba(0,110,200,0.35);
  border-right:  1px solid rgba(0,110,200,0.45);
  box-shadow: -3px 0 10px rgba(201,32,32,0.06), 3px 0 10px rgba(0,100,200,0.06);
  color: #f5f5f5;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
html[data-theme="darkforce"] .product-card:hover {
  border-top:    1px solid rgba(201,32,32,0.70);
  border-left:   1px solid rgba(201,32,32,0.55);
  border-bottom: 1px solid rgba(0,136,220,0.55);
  border-right:  1px solid rgba(0,136,220,0.70);
  box-shadow: -5px 0 16px rgba(201,32,32,0.14), 5px 0 16px rgba(0,120,220,0.14);
}
html[data-theme="darkforce"] .product-card-name    { color: #f5f5f5; font-weight: 700; }
html[data-theme="darkforce"] .product-card-code    { color: #888888; }
html[data-theme="darkforce"] .product-card-brand   { color: #0088cc; }
html[data-theme="darkforce"] .product-card-price   { color: #e55050; font-weight: 700; }
html[data-theme="darkforce"] .inventory-header { background: transparent; }
html[data-theme="darkforce"] .inventory-toolbar {
  background: rgba(8,3,18,0.80);
  border-top:    1px solid rgba(201,32,32,0.35);
  border-left:   1px solid rgba(201,32,32,0.25);
  border-bottom: 1px solid rgba(0,110,200,0.25);
  border-right:  1px solid rgba(0,110,200,0.35);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
html[data-theme="darkforce"] .inventory-search-wrap { background: transparent; }
html[data-theme="darkforce"] .inventory-search-input { background: transparent; border: none; color: #f5f5f5; }
html[data-theme="darkforce"] .list-cell-name { color: #f5f5f5; }
html[data-theme="darkforce"] .phys-table-wrap,
html[data-theme="darkforce"] .phys-stats-bar {
  background: rgba(8,3,18,0.80);
  border-top:    1px solid rgba(201,32,32,0.40);
  border-left:   1px solid rgba(201,32,32,0.30);
  border-bottom: 1px solid rgba(0,110,200,0.30);
  border-right:  1px solid rgba(0,110,200,0.40);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
html[data-theme="darkforce"] .phys-csv-panel {
  background: rgba(8,3,18,0.90);
  border-top:    1px solid rgba(201,32,32,0.50);
  border-left:   1px solid rgba(201,32,32,0.40);
  border-bottom: 1px solid rgba(0,110,200,0.40);
  border-right:  1px solid rgba(0,110,200,0.50);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

/* ── POS: Punto de Venta, Ventas, Clientes ───────────────────────────────── */

html[data-theme="darkforce"] .pos-page { background: transparent; }
html[data-theme="darkforce"] .pos-products,
html[data-theme="darkforce"] .pos-cart-panel,
html[data-theme="darkforce"] .pos-cart-footer {
  background: rgba(8,3,18,0.82);
  border-top:    1px solid rgba(201,32,32,0.45);
  border-left:   1px solid rgba(201,32,32,0.35);
  border-bottom: 1px solid rgba(0,110,200,0.35);
  border-right:  1px solid rgba(0,110,200,0.45);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
html[data-theme="darkforce"] .pos-cart-item {
  background: rgba(8,3,18,0.70);
  border-top:    1px solid rgba(201,32,32,0.30);
  border-left:   1px solid rgba(201,32,32,0.22);
  border-bottom: 1px solid rgba(0,110,200,0.22);
  border-right:  1px solid rgba(0,110,200,0.30);
}
html[data-theme="darkforce"] .pos-sales-page { background: transparent; }
html[data-theme="darkforce"] .pos-sales-table-wrap,
html[data-theme="darkforce"] .pss-modal {
  background: rgba(8,3,18,0.82);
  border-top:    1px solid rgba(201,32,32,0.45);
  border-left:   1px solid rgba(201,32,32,0.35);
  border-bottom: 1px solid rgba(0,110,200,0.35);
  border-right:  1px solid rgba(0,110,200,0.45);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
html[data-theme="darkforce"] .psc-page { background: transparent; }
html[data-theme="darkforce"] .psc-table-wrap,
html[data-theme="darkforce"] .psc-modal {
  background: rgba(8,3,18,0.82);
  border-top:    1px solid rgba(201,32,32,0.45);
  border-left:   1px solid rgba(201,32,32,0.35);
  border-bottom: 1px solid rgba(0,110,200,0.35);
  border-right:  1px solid rgba(0,110,200,0.45);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}

/* ── Facturación Electrónica ─────────────────────────────────────────────── */

html[data-theme="darkforce"] .billing-page { background: transparent; }
html[data-theme="darkforce"] .billing-modal {
  background: rgba(8,3,18,0.93);
  border-top:    1px solid rgba(201,32,32,0.55);
  border-left:   1px solid rgba(201,32,32,0.45);
  border-bottom: 1px solid rgba(0,120,210,0.45);
  border-right:  1px solid rgba(0,120,210,0.55);
  box-shadow: -6px 0 24px rgba(201,32,32,0.12), 6px 0 24px rgba(0,110,200,0.12);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  color: #f5f5f5;
}
html[data-theme="darkforce"] .billing-filter-bar,
html[data-theme="darkforce"] .billing-search-wrap {
  background: rgba(8,3,18,0.80);
  border-top:    1px solid rgba(201,32,32,0.38);
  border-left:   1px solid rgba(201,32,32,0.28);
  border-bottom: 1px solid rgba(0,110,200,0.28);
  border-right:  1px solid rgba(0,110,200,0.38);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
html[data-theme="darkforce"] .billing-row {
  background: rgba(8,3,18,0.75);
  border-top:    1px solid rgba(201,32,32,0.30);
  border-left:   1px solid rgba(201,32,32,0.22);
  border-bottom: 1px solid rgba(0,110,200,0.22);
  border-right:  1px solid rgba(0,110,200,0.30);
}
html[data-theme="darkforce"] .billing-grand-total { color: #e55050; font-weight: 900; }
html[data-theme="darkforce"] .billing-folio { color: #33aaee; font-weight: 700; }

/* ── Centro de Contabilidad ──────────────────────────────────────────────── */

html[data-theme="darkforce"] .accounting-page { background: transparent; }
html[data-theme="darkforce"] .accounting-section,
html[data-theme="darkforce"] .accounting-card-top {
  background: rgba(8,3,18,0.82);
  border-top:    1px solid rgba(201,32,32,0.45);
  border-left:   1px solid rgba(201,32,32,0.35);
  border-bottom: 1px solid rgba(0,110,200,0.35);
  border-right:  1px solid rgba(0,110,200,0.45);
  box-shadow: -3px 0 10px rgba(201,32,32,0.06), 3px 0 10px rgba(0,100,200,0.06);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
html[data-theme="darkforce"] .accounting-history {
  background: rgba(8,3,18,0.78);
  border-top:    1px solid rgba(201,32,32,0.35);
  border-left:   1px solid rgba(201,32,32,0.25);
  border-bottom: 1px solid rgba(0,110,200,0.25);
  border-right:  1px solid rgba(0,110,200,0.35);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}
html[data-theme="darkforce"] .accounting-card-result { color: #e55050; font-weight: 900; }
html[data-theme="darkforce"] .accounting-section-title { color: #e55050; text-transform: uppercase; letter-spacing: 0.1em; }

/* ── Hub pages (Inventory, Sales, etc.) ─────────────────────────────────── */

html[data-theme="darkforce"] .hub-group,
html[data-theme="darkforce"] .analytics-hub-grid {
  background: transparent;
}
html[data-theme="darkforce"] .hub-card {
  background: rgba(8,3,18,0.82);
  border-top:    1px solid rgba(201,32,32,0.50);
  border-left:   1px solid rgba(201,32,32,0.40);
  border-bottom: 1px solid rgba(0,110,200,0.40);
  border-right:  1px solid rgba(0,110,200,0.50);
  box-shadow: -3px 0 10px rgba(201,32,32,0.07), 3px 0 10px rgba(0,100,200,0.07);
  color: #f5f5f5;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
html[data-theme="darkforce"] .hub-card:hover {
  border-top:    1px solid rgba(201,32,32,0.75);
  border-left:   1px solid rgba(201,32,32,0.60);
  border-bottom: 1px solid rgba(0,136,220,0.60);
  border-right:  1px solid rgba(0,136,220,0.75);
  box-shadow: -5px 0 18px rgba(201,32,32,0.15), 5px 0 18px rgba(0,120,220,0.15);
  transform: translateY(-2px);
}
html[data-theme="darkforce"] .hub-card-title { color: #f5f5f5; font-weight: 700; }
html[data-theme="darkforce"] .hub-card-desc  { color: #666666; }
html[data-theme="darkforce"] .hub-group-header { color: #e55050; text-transform: uppercase; letter-spacing: 0.12em; font-weight: 700; border-bottom: 1px solid rgba(201,32,32,0.2); }

/* ── Darkforce: period-btn (tabs Diario/Semanal/Mensual/Trimestral/Anual) ── */
html[data-theme="darkforce"] .period-btn {
  background: rgba(8, 3, 18, 0.9);
  border: 1px solid rgba(201, 32, 32, 0.25);
  color: #888888;
}
html[data-theme="darkforce"] .period-btn:hover {
  background: rgba(201, 32, 32, 0.08);
  border-color: rgba(201, 32, 32, 0.55);
  color: #e55050;
}
html[data-theme="darkforce"] .period-btn.active {
  background: linear-gradient(135deg, #c92020, #8b0000);
  border-color: #c92020;
  color: #f5f5f5;
  font-weight: 700;
  box-shadow: 0 0 18px rgba(201, 32, 32, 0.5);
}

/* ── Darkforce: table row hovers (white bg → invisible in dark theme) ─────── */
html[data-theme="darkforce"] .phys-table tbody tr:hover td              { background: rgba(201, 32, 32, 0.04); }
html[data-theme="darkforce"] .accounting-history-table tbody tr:hover td { background: rgba(201, 32, 32, 0.04); }
html[data-theme="darkforce"] .activity-log-table tbody tr:hover         { background: rgba(201, 32, 32, 0.04); }
html[data-theme="darkforce"] .analytics-table tr:hover td               { background: rgba(201, 32, 32, 0.04); }
html[data-theme="darkforce"] .tr-table tbody tr:hover                   { background: rgba(201, 32, 32, 0.04); }
html[data-theme="darkforce"] .users-table tr:hover td                   { background: rgba(201, 32, 32, 0.04); }

/* ── Darkforce: POS — pos-btn / tab-count / cart-badge / receipt-toggle ──── */
html[data-theme="darkforce"] .pos-btn.primary   { background: linear-gradient(135deg, #c92020, #8b0000); color: #f5f5f5; font-weight: 700; }
html[data-theme="darkforce"] .pos-btn.success   { background: #1a5c2a; color: #f5f5f5; }
html[data-theme="darkforce"] .pos-btn.secondary { background: rgba(8, 3, 18, 0.8); color: #e55050; border-color: rgba(201, 32, 32, 0.3); }
html[data-theme="darkforce"] .tab-count,
html[data-theme="darkforce"] .cart-badge        { background: #c92020; color: #f5f5f5; }
html[data-theme="darkforce"] .receipt-toggle.active { background: #c92020; border-color: #c92020; color: #f5f5f5; }

/* ── Darkforce: POSSales — pss-facturar-btn ─────────────────────────────── */
html[data-theme="darkforce"] .pss-facturar-btn { background: linear-gradient(135deg, #c92020, #8b0000); color: #f5f5f5; font-weight: 700; border-color: #c92020; }
html[data-theme="darkforce"] .pss-facturar-btn:hover:not(:disabled) { background: linear-gradient(135deg, #e55050, #c92020); opacity: 1; }

/* ── Darkforce: Billing — billing-action-btn hover ───────────────────────── */
html[data-theme="darkforce"] .billing-action-btn:hover { background: #c92020; color: #f5f5f5; }

/* ── Darkforce: GonherInventory / ShopifyMx — view toggle / pagination ───── */
html[data-theme="darkforce"] .view-toggle-btn.active       { background: #c92020; color: #f5f5f5; border-color: #c92020; }
html[data-theme="darkforce"] .filter-action-btn:hover      { background: rgba(201, 32, 32, 0.1); color: #e55050; border-color: rgba(201, 32, 32, 0.5); }
html[data-theme="darkforce"] .pagination-btn               { background: rgba(8, 3, 18, 0.9); border-color: rgba(201, 32, 32, 0.22); color: #f5f5f5; }
html[data-theme="darkforce"] .pagination-btn:hover:not(:disabled) { background: #c92020; border-color: #c92020; color: #f5f5f5; }
html[data-theme="darkforce"] .pagination-info              { color: #666666; }

/* ── Darkforce: PhysicalInventory — add/primary buttons ─────────────────── */
html[data-theme="darkforce"] .phys-add-btn                 { background: linear-gradient(135deg, #c92020, #8b0000); color: #f5f5f5; font-weight: 700; }
html[data-theme="darkforce"] .phys-add-btn:hover           { background: linear-gradient(135deg, #e55050, #c92020); opacity: 1; }
html[data-theme="darkforce"] .phys-btn--primary            { background: linear-gradient(135deg, #c92020, #8b0000); color: #f5f5f5; border-color: #c92020; font-weight: 700; }
html[data-theme="darkforce"] .phys-btn--primary:hover:not(:disabled) { background: linear-gradient(135deg, #e55050, #c92020); opacity: 1; }

/* ── Darkforce: XRay — active filter/time buttons ───────────────────────── */
html[data-theme="darkforce"] .btn-xray-time.active,
html[data-theme="darkforce"] .btn-xray-filter.active {
  background: rgba(201, 32, 32, 0.18);
  border-color: #c92020;
  color: #e55050;
}

/* ── Darkforce: ErrorLogs — btn-logs-time ───────────────────────────────── */
html[data-theme="darkforce"] .btn-logs-time            { background: rgba(8,3,18,0.9); border: 1px solid rgba(201,32,32,0.22); color: #888888; }
html[data-theme="darkforce"] .btn-logs-time:hover      { background: rgba(201,32,32,0.06); border-color: rgba(201,32,32,0.4); color: #e55050; }
html[data-theme="darkforce"] .btn-logs-time.active     { background: rgba(201,32,32,0.18); border-color: #c92020; color: #e55050; }

/* ── Darkforce: botones Refrescar ────────────────────────────────────────── */
html[data-theme="darkforce"] .btn-monitoring-console {
  background: rgba(201, 32, 32, 0.15);
  border: 1px solid rgba(201, 32, 32, 0.5);
  color: #e55050;
}
html[data-theme="darkforce"] .btn-monitoring-console:hover {
  background: rgba(201, 32, 32, 0.25);
  border-color: #c92020;
}
html[data-theme="darkforce"] .btn-monitoring-refresh,
html[data-theme="darkforce"] .btn-xray-refresh,
html[data-theme="darkforce"] .btn-xray-console,
html[data-theme="darkforce"] .btn-logs-refresh,
html[data-theme="darkforce"] .btn-logs-console,
html[data-theme="darkforce"] .btn-users-refresh {
  background: rgba(8, 3, 18, 0.9);
  border: 1px solid rgba(201, 32, 32, 0.25);
  color: #aaaaaa;
}
html[data-theme="darkforce"] .btn-monitoring-refresh:hover,
html[data-theme="darkforce"] .btn-xray-refresh:hover,
html[data-theme="darkforce"] .btn-xray-console:hover,
html[data-theme="darkforce"] .btn-logs-refresh:hover,
html[data-theme="darkforce"] .btn-logs-console:hover,
html[data-theme="darkforce"] .btn-users-refresh:hover:not(:disabled) {
  background: rgba(201, 32, 32, 0.08);
  border-color: rgba(201, 32, 32, 0.5);
  color: #e55050;
}
html[data-theme="darkforce"] .btn-tr-refresh { background: #c92020; color: #f5f5f5; border-color: #c92020; }

/* ── Darkforce: Monitoring — section header & metric card title ──────────── */
html[data-theme="darkforce"] .monitoring-section-header {
  color: #e55050;
  background: rgba(201, 32, 32, 0.07);
  border-color: rgba(201, 32, 32, 0.25);
  border-left-color: #c92020;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
html[data-theme="darkforce"] .metric-card-title {
  background: rgba(201, 32, 32, 0.08);
  color: #e55050;
  border-bottom-color: rgba(201, 32, 32, 0.2);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
html[data-theme="darkforce"] .metric-card-body { background: #000000; }
html[data-theme="darkforce"] .metric-card-img {
  filter: invert(1) hue-rotate(180deg);
  border-radius: 4px;
}
html[data-theme="darkforce"] .btn-time-range {
  background: transparent;
  color: #777777;
}
html[data-theme="darkforce"] .btn-time-range:hover {
  background: rgba(201, 32, 32, 0.08);
  color: #e55050;
}
html[data-theme="darkforce"] .btn-time-range.active {
  background: rgba(201, 32, 32, 0.18);
  color: #e55050;
  font-weight: 700;
}

/* ── Darkforce: Artículos no disponibles — Reports.css classes ───────────── */
html[data-theme="darkforce"] .date-select {
  background: rgba(8, 3, 18, 0.9);
  border-color: rgba(201, 32, 32, 0.25);
  color: #f5f5f5;
}
html[data-theme="darkforce"] .date-select:hover { background: rgba(201,32,32,0.06); border-color: rgba(201,32,32,0.45); }
html[data-theme="darkforce"] .date-select-arrow { color: #e55050; }
html[data-theme="darkforce"] .sync-meta {
  background: rgba(8, 3, 18, 0.85);
  border: 1px solid rgba(201, 32, 32, 0.2);
  color: #f5f5f5;
  box-shadow: none;
}
html[data-theme="darkforce"] .report-section {
  background: rgba(8, 3, 18, 0.8);
  box-shadow: none;
}
html[data-theme="darkforce"] .section-header { color: #f5f5f5; }
html[data-theme="darkforce"] .product-row { background: rgba(8,3,18,0.8); border-bottom-color: rgba(201,32,32,0.1); }
html[data-theme="darkforce"] .product-row:hover { background: rgba(201,32,32,0.05); }
html[data-theme="darkforce"] .changes-toggle {
  background: rgba(201, 32, 32, 0.12);
  border-color: rgba(201, 32, 32, 0.4);
  color: #e55050;
}
html[data-theme="darkforce"] .changes-toggle:hover { background: rgba(201, 32, 32, 0.2); }
html[data-theme="darkforce"] .changes-list {
  background: rgba(8, 3, 18, 0.9);
  border-color: rgba(201, 32, 32, 0.3);
}
html[data-theme="darkforce"] .change-field { color: #888888; }
html[data-theme="darkforce"] .change-from  { color: #ef9a9a; }
html[data-theme="darkforce"] .change-to    { color: #66bb6a; }
html[data-theme="darkforce"] .skipped-filters {
  background: rgba(8, 3, 18, 0.85);
  border-bottom-color: rgba(201, 32, 32, 0.2);
}
html[data-theme="darkforce"] .skipped-filter-select {
  background: rgba(8, 3, 18, 0.95);
  border-color: rgba(201, 32, 32, 0.25);
  color: #f5f5f5;
}
html[data-theme="darkforce"] .skipped-filter-select:focus {
  border-color: #c92020;
  box-shadow: 0 0 0 3px rgba(201, 32, 32, 0.1);
}
html[data-theme="darkforce"] .skipped-search-input {
  background: rgba(8, 3, 18, 0.95);
  border-color: rgba(201, 32, 32, 0.25);
  color: #f5f5f5;
}
html[data-theme="darkforce"] .skipped-search-input:focus {
  border-color: #c92020;
  box-shadow: 0 0 0 3px rgba(201, 32, 32, 0.1);
}
html[data-theme="darkforce"] .skipped-search-input::placeholder { color: #555555; }
html[data-theme="darkforce"] .skipped-results-count {
  background: rgba(8, 3, 18, 0.85);
  border-bottom-color: rgba(201, 32, 32, 0.2);
  color: #888888;
}
html[data-theme="darkforce"] .page-size-btn {
  background: rgba(8, 3, 18, 0.9);
  border-color: rgba(201, 32, 32, 0.22);
  color: #888888;
}
html[data-theme="darkforce"] .page-size-btn.active {
  background: rgba(201, 32, 32, 0.15);
  border-color: #c92020;
  color: #e55050;
}

/* ── Activity modal — Musicalerias (default) brand overrides ─────────────── */
html[data-theme="default"] .activity-summary {
  background: rgba(0, 48, 73, 0.05);
  border: 1px solid rgba(0, 48, 73, 0.15);
}

html[data-theme="default"] .activity-history-title {
  color: #003049;
}

html[data-theme="default"] .activity-status-high {
  background: rgba(255, 8, 6, 0.07);
  color: #dc2f02;
  border: 1px solid rgba(255, 8, 6, 0.2);
}

html[data-theme="default"] .activity-status-medium {
  background: rgba(0, 48, 73, 0.07);
  color: #003049;
  border: 1px solid rgba(0, 48, 73, 0.2);
}

html[data-theme="default"] .activity-status-expired {
  background: #f1f5f9;
  color: #64748b;
}

html[data-theme="default"] .activity-status-none {
  background: #f1f5f9;
  color: #94a3b8;
}

html[data-theme="default"] .activity-table-wrapper {
  border-color: rgba(0, 48, 73, 0.15);
}

html[data-theme="default"] .activity-table th {
  background: rgba(0, 48, 73, 0.04);
  color: #003049;
  border-bottom-color: rgba(0, 48, 73, 0.12);
}

html[data-theme="default"] .activity-result-badge.pass {
  background: #dcfce7;
  color: #166534;
}

html[data-theme="default"] .activity-result-badge.fail {
  background: rgba(255, 8, 6, 0.08);
  color: #dc2f02;
}

/* ═══════════════════════════════════════════════════════════════════════════
   TEMA: DISNEY — Magia, sueños y color ✨
   Inspired by Disney's royal blue, gold, and fairy-dust sparkle
   ═══════════════════════════════════════════════════════════════════════════ */

html[data-theme="disney"] {
  --primary-color:      #0072CE;
  --primary-dark:       #004E9A;
  --primary-light:      #4DACF7;
  --secondary-color:    #5c2d91;
  --secondary-dark:     #3d1a6e;
  --accent-color:       #FFC200;
  --text-primary:       #1a2d5a;
  --text-secondary:     #4a5a80;
  --text-light:         #8899bb;
  --bg-primary:         #e6f2ff;
  --bg-secondary:       #ede8ff;
  --bg-dark:            #d8edff;
  --border-color:       rgba(0, 114, 206, 0.28);
  --success:            #10b981;
  --warning:            #FFC200;
  --danger:             #dc2626;
  --info:               #0ea5e9;
  --card-bg:            #ffffff;
  --input-bg:           #ffffff;
  --sidebar-bg:         #EEF6FF;
  --table-header-bg:    #e6f2ff;
  --hover-bg:           #dbeeff;
  --badge-bg:           #dbeeff;
  --img-placeholder-bg: #EEF6FF;
  --error-color:        #dc2626;
}

html[data-theme="disney"] body {
  background: linear-gradient(135deg, #dbeeff 0%, #ede8ff 50%, #fff8e0 100%);
  color: #1a2d5a;
}

/* ── Layout ──────────────────────────────────────────────────────────────── */

html[data-theme="disney"] .layout-main {
  background: transparent;
}

html[data-theme="disney"] .header {
  background: linear-gradient(90deg, #003DA5 0%, #0072CE 40%, #5c2d91 80%, #003DA5 100%);
  border-bottom: 3px solid #FFC200;
  box-shadow: 0 4px 20px rgba(0, 61, 165, 0.35);
}

html[data-theme="disney"] .header-logo-img {
  filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.7)) brightness(1.15);
}

html[data-theme="disney"] .header-logo-suffix {
  color: rgba(255, 255, 255, 0.85);
  border-left-color: rgba(255, 255, 255, 0.4);
}

html[data-theme="disney"] .header-beta-badge {
  background: #FFC200;
  color: #003DA5;
  font-weight: 800;
  box-shadow: 0 0 10px rgba(255, 194, 0, 0.5);
}

html[data-theme="disney"] .header-user-info,
html[data-theme="disney"] .header-user-name { color: #ffffff; }
html[data-theme="disney"] .header-user-role { color: rgba(255, 255, 255, 0.75); }
html[data-theme="disney"] .menu-toggle { color: #ffffff; }
html[data-theme="disney"] .menu-toggle:hover { color: #FFC200; }

html[data-theme="disney"] .user-avatar {
  background: linear-gradient(135deg, #0072CE 0%, #5c2d91 100%);
  border: 2px solid #FFC200;
  color: #ffffff;
  box-shadow: 0 0 14px rgba(0, 114, 206, 0.4);
}

html[data-theme="disney"] .logout-button {
  background: linear-gradient(135deg, #0072CE 0%, #5c2d91 100%);
  color: #ffffff;
  border: 2px solid rgba(255, 194, 0, 0.5);
  font-weight: 700;
}
html[data-theme="disney"] .logout-button:hover {
  background: linear-gradient(135deg, #004E9A 0%, #3d1a6e 100%);
  box-shadow: 0 4px 16px rgba(0, 114, 206, 0.35);
}

html[data-theme="disney"] .btn-export-pdf {
  background: linear-gradient(135deg, #0072CE 0%, #5c2d91 100%);
  color: #ffffff; border: none; font-weight: 700;
}
html[data-theme="disney"] .btn-export-pdf:hover {
  background: linear-gradient(135deg, #004E9A 0%, #3d1a6e 100%);
}

/* ── Sidebar ─────────────────────────────────────────────────────────────── */

html[data-theme="disney"] .sidebar {
  background: #EEF6FF;
  border-right: 2px solid rgba(0, 114, 206, 0.2);
}

html[data-theme="disney"] .sidebar-link {
  color: #4a5a80;
  border-left: 3px solid transparent;
}

html[data-theme="disney"] .sidebar-link:hover {
  background: rgba(0, 114, 206, 0.1);
  color: #003DA5;
  border-left-color: #0072CE;
}

html[data-theme="disney"] .sidebar-link.active {
  background: linear-gradient(90deg, rgba(0, 114, 206, 0.15) 0%, transparent 100%);
  color: #003DA5;
  border-left-color: #0072CE;
  font-weight: 700;
}

html[data-theme="disney"] .sidebar-icon { color: #0072CE; }

/* ── Scrollbars ─────────────────────────────────────────────────────────── */

html[data-theme="disney"] ::-webkit-scrollbar-track { background: #EEF6FF; }
html[data-theme="disney"] ::-webkit-scrollbar-thumb { background: rgba(0, 114, 206, 0.3); border-radius: 4px; }
html[data-theme="disney"] ::-webkit-scrollbar-thumb:hover { background: rgba(0, 114, 206, 0.55); }

/* ── Profile theme picker ───────────────────────────────────────────────── */

html[data-theme="disney"] .profile-themes {
  background: #ffffff;
  border: 2px solid rgba(0, 114, 206, 0.3);
  box-shadow: 0 8px 24px rgba(0, 114, 206, 0.15);
}

html[data-theme="disney"] .profile-theme-option { border-color: rgba(0, 114, 206, 0.28); }
html[data-theme="disney"] .profile-theme-option:hover { border-color: #0072CE; background: rgba(0, 114, 206, 0.05); }
html[data-theme="disney"] .profile-theme-option--active {
  border-color: #0072CE;
  box-shadow: 0 0 0 3px rgba(0, 114, 206, 0.2);
  background: rgba(0, 114, 206, 0.08);
}
html[data-theme="disney"] .profile-theme-name { color: #1a2d5a; font-weight: 700; }
html[data-theme="disney"] .profile-theme-option--active .profile-theme-name { color: #0072CE; font-weight: 800; }

/* ── Dashboard ───────────────────────────────────────────────────────────── */

html[data-theme="disney"] .stat-card,
html[data-theme="disney"] .dashboard-card,
html[data-theme="disney"] .health-section-row,
html[data-theme="disney"] .dashboard-manual-sync-box,
html[data-theme="disney"] .dashboard-schedule-row {
  background: #ffffff;
  border: 2px solid rgba(0, 114, 206, 0.25);
  box-shadow: 0 4px 16px rgba(0, 114, 206, 0.1);
  color: #1a2d5a;
}

html[data-theme="disney"] .stat-card:hover,
html[data-theme="disney"] .dashboard-card:hover {
  box-shadow: 0 8px 24px rgba(0, 114, 206, 0.22);
  border-color: #0072CE;
  transform: translateY(-2px);
}

html[data-theme="disney"] .stat-value { color: #0072CE; }
html[data-theme="disney"] .stat-label { color: #4a5a80; }

html[data-theme="disney"] .health-chip {
  background: #ffffff;
  border: 1px solid rgba(0, 114, 206, 0.3);
  box-shadow: 0 2px 6px rgba(0, 114, 206, 0.1);
}
html[data-theme="disney"] .health-chip-label { color: #4a5a80; }
html[data-theme="disney"] .health-chip-value { color: #0072CE; font-weight: 700; }

html[data-theme="disney"] .dashboard-schedule-btn {
  background: #ffffff;
  border: 1px solid rgba(0, 114, 206, 0.4);
  color: #0072CE;
}
html[data-theme="disney"] .dashboard-schedule-btn:hover:not(:disabled) {
  background: rgba(0, 114, 206, 0.08);
  border-color: #0072CE;
  box-shadow: 0 0 12px rgba(0, 114, 206, 0.25);
}

/* ── Schedule Modal ─────────────────────────────────────────────────────── */

html[data-theme="disney"] .dashboard-schedule-modal,
html[data-theme="disney"] .dashboard-confirm-modal {
  background: #ffffff;
  border: 2px solid rgba(0, 114, 206, 0.35);
  box-shadow: 0 20px 60px rgba(0, 114, 206, 0.18);
  color: #1a2d5a;
}
html[data-theme="disney"] .dashboard-schedule-modal-header,
html[data-theme="disney"] .dashboard-schedule-modal-footer {
  background: #EEF6FF;
  border-color: rgba(0, 114, 206, 0.2);
}
html[data-theme="disney"] .schedule-select,
html[data-theme="disney"] .schedule-add-select {
  background: #ffffff;
  border-color: rgba(0, 114, 206, 0.35);
  color: #1a2d5a;
}
html[data-theme="disney"] .schedule-day-btn {
  background: #EEF6FF;
  border-color: rgba(0, 114, 206, 0.28);
  color: #4a5a80;
}
html[data-theme="disney"] .schedule-day-btn.selected,
html[data-theme="disney"] .schedule-day-btn:hover { background: rgba(0, 114, 206, 0.12); border-color: #0072CE; color: #003DA5; }
html[data-theme="disney"] .schedule-hour-chip { background: rgba(0, 114, 206, 0.1); color: #0072CE; }
html[data-theme="disney"] .schedule-btn-cancel { background: #ffffff; border-color: rgba(0, 114, 206, 0.35); color: #4a5a80; }
html[data-theme="disney"] .schedule-btn-cancel:hover { background: rgba(0, 114, 206, 0.06); }
html[data-theme="disney"] .schedule-toggle-track { background: #c7dff7; }

/* ── Quick Access / Hub ──────────────────────────────────────────────────── */

html[data-theme="disney"] .hub-card {
  background: #ffffff;
  border: 2px solid rgba(0, 114, 206, 0.25);
  box-shadow: 0 4px 16px rgba(0, 114, 206, 0.1);
  color: #1a2d5a;
}
html[data-theme="disney"] .hub-card:hover {
  border-color: #0072CE;
  box-shadow: 0 8px 24px rgba(0, 114, 206, 0.22);
  transform: translateY(-2px);
}
html[data-theme="disney"] .hub-card-title { color: #003DA5; font-weight: 700; }
html[data-theme="disney"] .hub-card-desc  { color: #4a5a80; }
html[data-theme="disney"] .hub-group-header {
  color: #0072CE;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 700;
  border-bottom: 1px solid rgba(0, 114, 206, 0.2);
}

/* ── Analytics / Reports ─────────────────────────────────────────────────── */

html[data-theme="disney"] .period-btn,
html[data-theme="disney"] .kpi-card,
html[data-theme="disney"] .analytics-card,
html[data-theme="disney"] .segment-card {
  background: #ffffff;
  border: 2px solid rgba(0, 114, 206, 0.25);
  color: #1a2d5a;
  box-shadow: 0 4px 16px rgba(0, 114, 206, 0.08);
}
html[data-theme="disney"] .period-btn.active {
  background: linear-gradient(135deg, #0072CE, #5c2d91);
  border-color: #0072CE;
  color: #ffffff;
  font-weight: 700;
}

html[data-theme="disney"] .date-select,
html[data-theme="disney"] .sync-meta,
html[data-theme="disney"] .report-section {
  background: #ffffff;
  border: 2px solid rgba(0, 114, 206, 0.25);
  color: #1a2d5a;
}

/* ── Monitoring ─────────────────────────────────────────────────────────── */

html[data-theme="disney"] .monitoring-page,
html[data-theme="disney"] .monitoring-card,
html[data-theme="disney"] .metric-card {
  background: #ffffff;
  border: 2px solid rgba(0, 114, 206, 0.25);
  color: #1a2d5a;
  box-shadow: 0 4px 16px rgba(0, 114, 206, 0.08);
}
html[data-theme="disney"] .metric-value { color: #0072CE; font-weight: 700; }
html[data-theme="disney"] .metric-label { color: #4a5a80; }
html[data-theme="disney"] .metric-unit  { color: #8899bb; }

html[data-theme="disney"] .monitoring-section-header {
  color: #0072CE;
  border-color: #0072CE;
  background: linear-gradient(180deg, #ffffff 0%, #EEF6FF 100%);
  border-left-width: 4px;
  font-weight: 700;
}

html[data-theme="disney"] .metric-card-title {
  color: #1a2d5a;
  background: #EEF6FF;
  border-color: rgba(0, 114, 206, 0.25);
  font-weight: 700;
}
html[data-theme="disney"] .metric-card-body { background: #ffffff; }

html[data-theme="disney"] .btn-metric-filter,
html[data-theme="disney"] .btn-time-range,
html[data-theme="disney"] .btn-monitoring-refresh,
html[data-theme="disney"] .btn-monitoring-console {
  background: #ffffff;
  border: 2px solid rgba(0, 114, 206, 0.35);
  color: #0072CE;
  font-weight: 600;
}
html[data-theme="disney"] .btn-metric-filter:hover,
html[data-theme="disney"] .btn-time-range:hover { background: rgba(0, 114, 206, 0.08); border-color: #0072CE; }
html[data-theme="disney"] .btn-metric-filter.active,
html[data-theme="disney"] .btn-time-range.active {
  background: linear-gradient(135deg, #0072CE, #5c2d91);
  border-color: #0072CE;
  color: #ffffff;
}

/* ── Error Logs ─────────────────────────────────────────────────────────── */

html[data-theme="disney"] .logs-stat-card {
  background: #ffffff;
  border: 2px solid rgba(0, 114, 206, 0.25);
  color: #1a2d5a;
  box-shadow: 0 4px 16px rgba(0, 114, 206, 0.08);
}
html[data-theme="disney"] .logs-stat-card--error { border-color: rgba(220, 38, 38, 0.4); }
html[data-theme="disney"] .logs-stat-card--warn  { border-color: rgba(255, 194, 0, 0.5); }
html[data-theme="disney"] .logs-section-card {
  background: #ffffff;
  border: 2px solid rgba(0, 114, 206, 0.22);
  color: #1a2d5a;
}
html[data-theme="disney"] .btn-logs-group,
html[data-theme="disney"] .btn-logs-level {
  background: #ffffff;
  border: 1px solid rgba(0, 114, 206, 0.35);
  color: #0072CE;
  font-weight: 600;
}
html[data-theme="disney"] .btn-logs-group:hover,
html[data-theme="disney"] .btn-logs-level:hover { background: rgba(0, 114, 206, 0.08); }
html[data-theme="disney"] .btn-logs-group.active,
html[data-theme="disney"] .btn-logs-level.active {
  background: linear-gradient(135deg, #0072CE, #5c2d91);
  border-color: #0072CE;
  color: #ffffff;
}
html[data-theme="disney"] .logs-search-input {
  background: #ffffff;
  border: 1px solid rgba(0, 114, 206, 0.35);
  color: #1a2d5a;
}
html[data-theme="disney"] .logs-search-input:focus { border-color: #0072CE; box-shadow: 0 0 0 2px rgba(0, 114, 206, 0.15); }
html[data-theme="disney"] .logs-search-input::placeholder { color: #8899bb; }
html[data-theme="disney"] .logs-row { background: #ffffff; border: 1px solid rgba(0, 114, 206, 0.18); }
html[data-theme="disney"] .logs-row:hover { background: rgba(0, 114, 206, 0.05); border-color: #0072CE; }

/* ── XRay ───────────────────────────────────────────────────────────────── */

html[data-theme="disney"] .xray-stat-card,
html[data-theme="disney"] .xray-section-card {
  background: #ffffff;
  border: 2px solid rgba(0, 114, 206, 0.25);
  color: #1a2d5a;
  box-shadow: 0 4px 16px rgba(0, 114, 206, 0.08);
}
html[data-theme="disney"] .btn-xray-refresh,
html[data-theme="disney"] .btn-xray-console,
html[data-theme="disney"] .btn-xray-time,
html[data-theme="disney"] .btn-xray-filter {
  background: #ffffff;
  border: 2px solid rgba(0, 114, 206, 0.35);
  color: #0072CE;
  font-weight: 600;
}
html[data-theme="disney"] .btn-xray-time.active,
html[data-theme="disney"] .btn-xray-filter.active {
  background: linear-gradient(135deg, #0072CE, #5c2d91);
  border-color: #0072CE;
  color: #ffffff;
}
html[data-theme="disney"] .xray-row:hover { background: rgba(0, 114, 206, 0.05); }

/* ── Settings / Roles / Brand Flags ─────────────────────────────────────── */

html[data-theme="disney"] .settings-section,
html[data-theme="disney"] .roles-card,
html[data-theme="disney"] .brand-card {
  background: #ffffff;
  border: 2px solid rgba(0, 114, 206, 0.22);
  box-shadow: 0 4px 16px rgba(0, 114, 206, 0.08);
}
html[data-theme="disney"] .settings-section-title,
html[data-theme="disney"] .roles-card-title,
html[data-theme="disney"] .brand-card-name { color: #003DA5; font-weight: 700; }

html[data-theme="disney"] .settings-sidebar {
  background: #EEF6FF;
  border: 2px solid rgba(0, 114, 206, 0.2);
}
html[data-theme="disney"] .settings-mode-btn {
  background: #EEF6FF;
  border: 1px solid rgba(0, 114, 206, 0.25);
  color: #4a5a80;
}
html[data-theme="disney"] .settings-mode-btn:hover:not(:disabled) { background: rgba(0, 114, 206, 0.1); color: #003DA5; }
html[data-theme="disney"] .settings-mode-btn.active {
  background: #0072CE;
  border-color: #0072CE;
  color: #ffffff;
  font-weight: 700;
  box-shadow: 0 2px 8px rgba(0, 114, 206, 0.3);
}
html[data-theme="disney"] .settings-nav-item { color: #4a5a80; border-left: 3px solid transparent; }
html[data-theme="disney"] .settings-nav-item:hover:not(:disabled) { background: rgba(0, 114, 206, 0.08); color: #003DA5; border-left-color: rgba(0, 114, 206, 0.4); }
html[data-theme="disney"] .settings-nav-item.active { background: rgba(0, 114, 206, 0.12); color: #003DA5; border-left-color: #0072CE; font-weight: 700; }
html[data-theme="disney"] .settings-nav-label { color: #8899bb; text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.7em; }
html[data-theme="disney"] .settings-label { color: #4a5a80; }
html[data-theme="disney"] .settings-value { color: #1a2d5a; }

html[data-theme="disney"] .roles-page-header h1,
html[data-theme="disney"] .brand-page-header h1,
html[data-theme="disney"] .page-title { color: #003DA5; }
html[data-theme="disney"] .section-title { color: #0072CE; }
html[data-theme="disney"] .section-subtitle { color: #4a5a80; }

/* ── Users ───────────────────────────────────────────────────────────────── */

html[data-theme="disney"] .users-table-wrapper,
html[data-theme="disney"] .users-card {
  background: #ffffff;
  border: 2px solid rgba(0, 114, 206, 0.25);
  box-shadow: 0 4px 16px rgba(0, 114, 206, 0.08);
}
html[data-theme="disney"] .users-table thead tr { background: #EEF6FF; border-bottom: 2px solid rgba(0, 114, 206, 0.35); }
html[data-theme="disney"] .users-table th { color: #0072CE; text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.78em; }
html[data-theme="disney"] .users-table td { color: #1a2d5a; }
html[data-theme="disney"] .users-table tbody tr { border-bottom: 1px solid rgba(0, 114, 206, 0.08); }
html[data-theme="disney"] .users-table tbody tr:hover { background: rgba(0, 114, 206, 0.05); }
html[data-theme="disney"] .users-modal-overlay { background: rgba(0, 30, 90, 0.55); }
html[data-theme="disney"] .users-modal {
  background: #ffffff;
  border: 2px solid rgba(0, 114, 206, 0.4);
  box-shadow: 0 24px 80px rgba(0, 114, 206, 0.2);
  color: #1a2d5a;
}
html[data-theme="disney"] .users-modal-header { border-bottom: 2px solid rgba(0, 114, 206, 0.2); background: #EEF6FF; }
html[data-theme="disney"] .users-modal-header h2 { color: #003DA5; font-weight: 800; }
html[data-theme="disney"] .users-modal-form label { color: #4a5a80; font-weight: 600; text-transform: uppercase; letter-spacing: 0.07em; font-size: 0.78em; }
html[data-theme="disney"] .users-modal-form input,
html[data-theme="disney"] .users-modal-form select { background: #f5faff; border: 1px solid rgba(0, 114, 206, 0.3); color: #1a2d5a; }
html[data-theme="disney"] .users-modal-form input:focus,
html[data-theme="disney"] .users-modal-form select:focus { border-color: #0072CE; box-shadow: 0 0 0 2px rgba(0, 114, 206, 0.15); }
html[data-theme="disney"] .users-search-input {
  background: #ffffff;
  border: 2px solid rgba(0, 114, 206, 0.35);
  color: #1a2d5a;
}

/* ── Activity / Inventory Modals ─────────────────────────────────────────── */

html[data-theme="disney"] .activity-modal-overlay,
html[data-theme="disney"] .inventory-modal-overlay { background: rgba(0, 30, 90, 0.5); }
html[data-theme="disney"] .activity-modal,
html[data-theme="disney"] .inventory-modal {
  background: #ffffff;
  border: 2px solid rgba(0, 114, 206, 0.4);
  box-shadow: 0 24px 80px rgba(0, 114, 206, 0.18);
  color: #1a2d5a;
}
html[data-theme="disney"] .activity-modal-header,
html[data-theme="disney"] .inventory-modal-header { border-bottom: 2px solid rgba(0, 114, 206, 0.2); background: #EEF6FF; }
html[data-theme="disney"] .activity-modal-title { color: #003DA5; font-weight: 700; }

/* ── Gonher Inventory / GonherInventory page ─────────────────────────────── */

html[data-theme="disney"] .gonher-inventory-page,
html[data-theme="disney"] .gi-header-card,
html[data-theme="disney"] .gi-stats-card { background: #ffffff; border: 2px solid rgba(0, 114, 206, 0.22); color: #1a2d5a; }
html[data-theme="disney"] .gi-table-wrap { background: #ffffff; border: 2px solid rgba(0, 114, 206, 0.22); }
html[data-theme="disney"] .gi-table thead { background: #EEF6FF; }
html[data-theme="disney"] .gi-table th { color: #0072CE; }
html[data-theme="disney"] .gi-table tbody tr:hover { background: rgba(0, 114, 206, 0.05); }
html[data-theme="disney"] .gi-search-input,
html[data-theme="disney"] .gi-filter-select { background: #ffffff; border: 1px solid rgba(0, 114, 206, 0.32); color: #1a2d5a; }
html[data-theme="disney"] .gi-search-input:focus,
html[data-theme="disney"] .gi-filter-select:focus { border-color: #0072CE; box-shadow: 0 0 0 2px rgba(0, 114, 206, 0.12); }

/* ── Shopify Inventory page ──────────────────────────────────────────────── */

html[data-theme="disney"] .shopify-inventory-page,
html[data-theme="disney"] .si-header-card,
html[data-theme="disney"] .si-stats-card { background: #ffffff; border: 2px solid rgba(0, 114, 206, 0.22); color: #1a2d5a; }
html[data-theme="disney"] .si-table-wrap { background: #ffffff; border: 2px solid rgba(0, 114, 206, 0.22); }
html[data-theme="disney"] .si-table thead { background: #EEF6FF; }
html[data-theme="disney"] .si-table th { color: #0072CE; }
html[data-theme="disney"] .si-table tbody tr:hover { background: rgba(0, 114, 206, 0.05); }

/* ── Brand Flags (Activacion de Marcas) ──────────────────────────────────── */

html[data-theme="disney"] .brand-flags-page { background: transparent; }
html[data-theme="disney"] .brand-flag-chip-total   { background: rgba(0, 114, 206, 0.1);  color: #0072CE;  border: 1px solid rgba(0, 114, 206, 0.3); }
html[data-theme="disney"] .brand-flag-chip-active  { background: rgba(16, 185, 129, 0.1); color: #059669; border: 1px solid rgba(16, 185, 129, 0.3); }
html[data-theme="disney"] .brand-flag-chip-inactive{ background: rgba(220, 38, 38, 0.08); color: #dc2626; border: 1px solid rgba(220, 38, 38, 0.2); }

/* ── Rockstar Widget ─────────────────────────────────────────────────────── */

html[data-theme="disney"] .rockstar-widget-header {
  background: linear-gradient(120deg, #003DA5 0%, #0072CE 50%, #5c2d91 100%) !important;
  color: #ffffff !important;
}
html[data-theme="disney"] .rockstar-widget-header .actions button {
  background: rgba(255, 255, 255, 0.2) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  border-radius: 6px !important;
}
html[data-theme="disney"] .rockstar-widget-header .actions button:hover {
  background: rgba(255, 255, 255, 0.35) !important;
}
html[data-theme="disney"] .rockstar-widget-fab {
  background: linear-gradient(135deg, #0072CE, #5c2d91) !important;
  color: #ffffff !important;
}

/* ── Physical Inventory / POS / Billing / Accounting ────────────────────── */

html[data-theme="disney"] .physical-modal,
html[data-theme="disney"] .physical-form input,
html[data-theme="disney"] .physical-form select,
html[data-theme="disney"] .physical-form textarea {
  background: #f5faff; border-color: rgba(0, 114, 206, 0.35); color: #1a2d5a;
}

html[data-theme="disney"] .pos-products,
html[data-theme="disney"] .pos-cart-panel,
html[data-theme="disney"] .pos-cart-footer { background: #ffffff; border-color: rgba(0, 114, 206, 0.22); color: #1a2d5a; }
html[data-theme="disney"] .pos-cart-item { border-color: rgba(0, 114, 206, 0.15); }

html[data-theme="disney"] .billing-page { background: transparent; }
html[data-theme="disney"] .billing-modal { background: #ffffff; border: 2px solid rgba(0, 114, 206, 0.35); color: #1a2d5a; }
html[data-theme="disney"] .billing-filter-bar,
html[data-theme="disney"] .billing-search-wrap { background: #EEF6FF; border-color: rgba(0, 114, 206, 0.2); }
html[data-theme="disney"] .billing-row { background: #ffffff; border-color: rgba(0, 114, 206, 0.12); color: #1a2d5a; }
html[data-theme="disney"] .billing-grand-total { color: #0072CE; font-weight: 900; }

html[data-theme="disney"] .accounting-page { background: transparent; }
html[data-theme="disney"] .accounting-section,
html[data-theme="disney"] .accounting-card-top { background: #ffffff; border: 2px solid rgba(0, 114, 206, 0.22); color: #1a2d5a; }
html[data-theme="disney"] .accounting-history { background: #EEF6FF; border-color: rgba(0, 114, 206, 0.18); }
html[data-theme="disney"] .accounting-card-result { color: #0072CE; font-weight: 900; }
html[data-theme="disney"] .accounting-section-title { color: #0072CE; text-transform: uppercase; letter-spacing: 0.08em; }

/* ═══════════════════════════════════════════════════════════════════════════
   THEME: GOLDEN — Sophisticated luxury edition
   ═══════════════════════════════════════════════════════════════════════════ */

html[data-theme="golden"] {
  --primary-color: #d4af37;
  --primary-dark: #b8960f;
  --primary-light: #f0d978;
  --secondary-color: #1a1d29;
  --secondary-dark: #0f1117;
  --accent-color: #8b7355;
  --text-primary: #f8f6f0;
  --text-secondary: #d4c9b0;
  --text-light: #a89881;
  --bg-primary: #1a1d29;
  --bg-secondary: #0f1117;
  --bg-dark: #0a0c12;
  --border-color: rgba(212, 175, 55, 0.25);
  --success: #86a361;
  --warning: #d4af37;
  --danger: #c97c5d;
  --info: #8b7355;
  --card-bg:            #1a1c2e;
  --input-bg:           #1a1c2e;
  --sidebar-bg:         #0d0f1a;
  --table-header-bg:    #0d0f1a;
  --hover-bg:           #0d0f1a;
  --badge-bg:           #1a1c2e;
  --img-placeholder-bg: #0d0f1a;
  --error-color:        #c97c5d;
  --btn-primary-text:   #0e0c00;
}

html[data-theme="golden"] body {
  background: linear-gradient(135deg, #0f1117 0%, #1a1d29 50%, #0f1117 100%);
  color: #f8f6f0;
  font-family: 'Georgia', 'Times New Roman', serif;
  font-weight: 400;
  letter-spacing: 0.01em;
}

html[data-theme="golden"] body::before {
  content: "";
  position: fixed;
  inset: 0;
  background: 
    radial-gradient(ellipse at 20% 20%, rgba(212, 175, 55, 0.05) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 80%, rgba(139, 115, 85, 0.05) 0%, transparent 50%);
  pointer-events: none;
  z-index: 0;
}

/* ── Layout ─────────────────────────────────────────────────────────────── */

html[data-theme="golden"] .layout-main {
  background: transparent;
  position: relative;
  z-index: 1;
}

html[data-theme="golden"] .header {
  background: linear-gradient(180deg, rgba(26, 29, 41, 0.95), rgba(15, 17, 23, 0.98));
  border-bottom: 1px solid rgba(212, 175, 55, 0.3);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5), 0 1px 0 rgba(212, 175, 55, 0.15);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

html[data-theme="golden"] .header-logo-img {
  filter: brightness(1.3) sepia(0.4) hue-rotate(10deg) saturate(1.2);
}

html[data-theme="golden"] .header-logo-suffix {
  color: #d4af37;
  border-left-color: rgba(212, 175, 55, 0.3);
  font-family: 'Georgia', serif;
  font-style: italic;
}

html[data-theme="golden"] .header-beta-badge {
  background: linear-gradient(135deg, #d4af37, #f0d978, #d4af37);
  background-size: 200% 200%;
  animation: elegantShimmer 4s ease-in-out infinite;
  color: #0f1117;
  border: 1px solid #f0d978;
  box-shadow: 0 0 15px rgba(212, 175, 55, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.2);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

@keyframes elegantShimmer {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

html[data-theme="golden"] .menu-toggle {
  color: #d4af37;
}

html[data-theme="golden"] .menu-toggle:hover {
  color: #f0d978;
  text-shadow: 0 0 8px rgba(212, 175, 55, 0.5);
}

html[data-theme="golden"] .header-user-info {
  color: #f8f6f0;
}

html[data-theme="golden"] .header-user-name {
  color: #f8f6f0;
  font-family: 'Georgia', serif;
  font-weight: 500;
}

html[data-theme="golden"] .header-user-role {
  color: #d4c9b0;
  font-style: italic;
  font-size: 0.85em;
}

/* Rockstar Widget */
html[data-theme="golden"] .rockstar-widget-header {
  background: linear-gradient(135deg, #d4af37, #b8960f) !important;
  color: #0f1117 !important;
  font-weight: 600 !important;
}
html[data-theme="golden"] .rockstar-widget-header .actions button {
  background: rgba(0, 0, 0, 0.15) !important;
  color: #0f1117 !important;
  border: 1px solid rgba(0, 0, 0, 0.2) !important;
  border-radius: 6px !important;
}
html[data-theme="golden"] .rockstar-widget-header .actions button:hover {
  background: rgba(0, 0, 0, 0.25) !important;
}

html[data-theme="golden"] .rockstar-widget-fab {
  background: linear-gradient(135deg, #d4af37, #f0d978) !important;
  color: #0f1117 !important;
  box-shadow: 0 4px 20px rgba(212, 175, 55, 0.4) !important;
}

html[data-theme="golden"] .rockstar-widget-messages .message.assistant {
  background: rgba(212, 175, 55, 0.1) !important;
  border-left: 3px solid #d4af37 !important;
  color: #f8f6f0 !important;
}

html[data-theme="golden"] .user-avatar {
  background: linear-gradient(135deg, #d4af37, #f0d978);
  border: 2px solid rgba(212, 175, 55, 0.6);
  color: #0f1117;
  box-shadow: 0 4px 15px rgba(212, 175, 55, 0.3), inset 0 1px 3px rgba(255, 255, 255, 0.3);
  font-weight: 700;
}

html[data-theme="golden"] .btn-logout {
  background: rgba(26, 29, 41, 0.8);
  color: #d4af37;
  border: 1px solid rgba(212, 175, 55, 0.4);
  font-family: 'Georgia', serif;
}

html[data-theme="golden"] .btn-logout:hover {
  background: rgba(212, 175, 55, 0.15);
  border-color: #d4af37;
  box-shadow: 0 0 15px rgba(212, 175, 55, 0.3);
}

html[data-theme="golden"] .logout-button {
  background: rgba(26, 29, 41, 0.8);
  color: #d4af37;
  border: 1px solid rgba(212, 175, 55, 0.4);
}

html[data-theme="golden"] .logout-button:hover {
  background: rgba(212, 175, 55, 0.15);
  border-color: #d4af37;
  box-shadow: 0 0 15px rgba(212, 175, 55, 0.3);
}

html[data-theme="golden"] .btn-export-pdf {
  background: rgba(26, 29, 41, 0.8);
  color: #d4af37;
  border: 1px solid rgba(212, 175, 55, 0.4);
}

html[data-theme="golden"] .btn-export-pdf:hover {
  background: rgba(212, 175, 55, 0.15);
  border-color: #d4af37;
  box-shadow: 0 0 15px rgba(212, 175, 55, 0.3);
  color: #f0d978;
}

/* ── Sidebar ────────────────────────────────────────────────────────────── */

html[data-theme="golden"] .sidebar {
  background: linear-gradient(180deg, rgba(26, 29, 41, 0.95), rgba(15, 17, 23, 0.98));
  border-right: 1px solid rgba(212, 175, 55, 0.25);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

html[data-theme="golden"] .nav-link {
  color: #d4c9b0;
  border-left: 2px solid transparent;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  transition: all 0.3s ease;
}

html[data-theme="golden"] .nav-link:hover {
  background: rgba(212, 175, 55, 0.1);
  color: #f0d978;
  border-left-color: #d4af37;
  box-shadow: inset 0 0 20px rgba(212, 175, 55, 0.1);
}

html[data-theme="golden"] .nav-link.active {
  background: rgba(212, 175, 55, 0.15);
  color: #f0d978;
  border-left-color: #d4af37;
  box-shadow: 
    inset 0 0 25px rgba(212, 175, 55, 0.15),
    inset 3px 0 10px rgba(212, 175, 55, 0.2);
  font-weight: 600;
}

html[data-theme="golden"] .nav-section-title {
  color: #8b7355;
  font-family: 'Georgia', serif;
  font-style: italic;
  font-size: 0.7rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

html[data-theme="golden"] .sidebar-icon {
  color: #d4af37;
}

/* ── Scrollbars ── */
html[data-theme="golden"] ::-webkit-scrollbar-track {
  background: rgba(15, 17, 23, 0.8);
}

html[data-theme="golden"] ::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #d4af37, #b8960f);
  border-radius: 10px;
  border: 2px solid rgba(15, 17, 23, 0.5);
}

html[data-theme="golden"] ::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #f0d978, #d4af37);
  box-shadow: 0 0 10px rgba(212, 175, 55, 0.5);
}

/* ── Profile theme picker ───────────────────────────────────────────────── */

html[data-theme="golden"] .profile-themes {
  background: linear-gradient(135deg, rgba(26, 29, 41, 0.9), rgba(15, 17, 23, 0.9));
  border: 1px solid rgba(212, 175, 55, 0.3);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(212, 175, 55, 0.1);
}

html[data-theme="golden"] .profile-themes-header {
  color: #d4af37;
  font-family: 'Georgia', serif;
}

html[data-theme="golden"] .profile-themes-icon {
  color: #f0d978;
}

html[data-theme="golden"] .profile-theme-option {
  border-color: rgba(212, 175, 55, 0.3);
  background: rgba(26, 29, 41, 0.5);
}

html[data-theme="golden"] .profile-theme-option:hover {
  border-color: #d4af37;
  background: rgba(212, 175, 55, 0.1);
  box-shadow: 0 4px 20px rgba(212, 175, 55, 0.2);
}

html[data-theme="golden"] .profile-theme-option--active {
  border-color: #d4af37;
  box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.2), 0 4px 20px rgba(212, 175, 55, 0.3);
  background: rgba(212, 175, 55, 0.15);
}

html[data-theme="golden"] .profile-theme-name {
  color: #f8f6f0;
  font-family: 'Georgia', serif;
}

html[data-theme="golden"] .profile-theme-option--active .profile-theme-name {
  color: #f0d978;
  font-weight: 700;
}

html[data-theme="golden"] .profile-theme-active-dot {
  background: #d4af37;
  box-shadow: 0 0 10px rgba(212, 175, 55, 0.6);
}

/* ── Profile Hero & Cards ───────────────────────────────────────────────── */

html[data-theme="golden"] .profile-hero {
  background: linear-gradient(135deg, rgba(26, 29, 41, 0.9), rgba(15, 17, 23, 0.95));
  border: 1px solid rgba(212, 175, 55, 0.3);
  border-left: 4px solid #d4af37;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(212, 175, 55, 0.1);
}

html[data-theme="golden"] .profile-avatar-initials {
  background: linear-gradient(135deg, #d4af37, #f0d978);
  color: #0f1117;
  border: 3px solid rgba(212, 175, 55, 0.5);
  box-shadow: 
    0 8px 32px rgba(212, 175, 55, 0.4),
    inset 0 2px 8px rgba(255, 255, 255, 0.3);
  font-weight: 900;
}

html[data-theme="golden"] .profile-hero-info h1 {
  color: #f8f6f0;
  font-family: 'Georgia', serif;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

html[data-theme="golden"] .profile-email {
  color: #d4c9b0;
  font-style: italic;
}

html[data-theme="golden"] .profile-role-badge {
  background: rgba(212, 175, 55, 0.2);
  color: #f0d978;
  border: 1px solid rgba(212, 175, 55, 0.4);
  font-family: 'Georgia', serif;
  font-style: italic;
}

html[data-theme="golden"] .profile-card {
  background: linear-gradient(135deg, rgba(26, 29, 41, 0.9), rgba(15, 17, 23, 0.95));
  border: 1px solid rgba(212, 175, 55, 0.3);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(212, 175, 55, 0.1);
}

html[data-theme="golden"] .card-header {
  border-bottom: 1px solid rgba(212, 175, 55, 0.2);
}

html[data-theme="golden"] .card-header h3 {
  color: #d4af37;
  font-family: 'Georgia', serif;
  font-style: italic;
}

html[data-theme="golden"] .form-group {
  border-bottom: 1px solid rgba(212, 175, 55, 0.15);
}

html[data-theme="golden"] .form-group label {
  color: #d4c9b0;
  font-weight: 500;
}

html[data-theme="golden"] .field-value {
  color: #f8f6f0;
}

html[data-theme="golden"] .field-hint,
html[data-theme="golden"] .security-message {
  color: #a89881;
  font-style: italic;
}

html[data-theme="golden"] .form-input,
html[data-theme="golden"] .profile-role-select {
  background: rgba(15, 17, 23, 0.6);
  border: 1px solid rgba(212, 175, 55, 0.3);
  color: #f8f6f0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

html[data-theme="golden"] .form-input:focus {
  border-color: #d4af37;
  box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.15), 0 0 20px rgba(212, 175, 55, 0.2);
  background: rgba(15, 17, 23, 0.8);
}

html[data-theme="golden"] .form-input::placeholder {
  color: #8b7355;
  font-style: italic;
}

html[data-theme="golden"] .profile-role-select {
  cursor: pointer;
}

html[data-theme="golden"] .profile-role-select option {
  background: #1a1d29;
  color: #f8f6f0;
}

html[data-theme="golden"] .btn-primary {
  background: linear-gradient(135deg, #d4af37, #b8960f);
  color: #0f1117;
  border: 1px solid #f0d978;
  font-weight: 700;
  box-shadow: 0 4px 15px rgba(212, 175, 55, 0.3);
}

html[data-theme="golden"] .btn-primary:hover:not(:disabled) {
  background: linear-gradient(135deg, #f0d978, #d4af37);
  box-shadow: 0 6px 25px rgba(212, 175, 55, 0.5);
  transform: translateY(-1px);
}

html[data-theme="golden"] .btn-secondary {
  background: rgba(26, 29, 41, 0.8);
  color: #d4c9b0;
  border: 1px solid rgba(212, 175, 55, 0.3);
}

html[data-theme="golden"] .btn-secondary:hover:not(:disabled) {
  background: rgba(212, 175, 55, 0.15);
  color: #f0d978;
  border-color: #d4af37;
}

html[data-theme="golden"] .btn-icon {
  color: #d4af37;
}

html[data-theme="golden"] .btn-icon:hover {
  color: #f0d978;
  text-shadow: 0 0 10px rgba(212, 175, 55, 0.5);
}

html[data-theme="golden"] .btn-danger {
  background: rgba(201, 124, 93, 0.2);
  color: #c97c5d;
  border: 1px solid rgba(201, 124, 93, 0.4);
}

html[data-theme="golden"] .btn-danger:hover:not(:disabled) {
  background: rgba(201, 124, 93, 0.3);
  border-color: #c97c5d;
  box-shadow: 0 0 15px rgba(201, 124, 93, 0.3);
}

/* ── MFA Section ────────────────────────────────────────────────────────── */

html[data-theme="golden"] .mfa-section {
  border-top: 1px solid rgba(212, 175, 55, 0.2);
  padding-top: 1.5rem;
  margin-top: 1rem;
}

html[data-theme="golden"] .mfa-icon {
  color: #d4af37;
}

html[data-theme="golden"] .mfa-status-badge.active {
  background: rgba(134, 163, 97, 0.2);
  color: #86a361;
  border: 1px solid rgba(134, 163, 97, 0.4);
}

html[data-theme="golden"] .mfa-status-badge.inactive {
  background: rgba(168, 152, 129, 0.2);
  color: #a89881;
  border: 1px solid rgba(168, 152, 129, 0.4);
}

html[data-theme="golden"] .mfa-enabled-message {
  color: #d4c9b0;
  font-style: italic;
}

html[data-theme="golden"] .mfa-qr-container {
  background: rgba(248, 246, 240, 0.95);
  border: 2px solid #d4af37;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

html[data-theme="golden"] .mfa-secret-key code {
  background: rgba(15, 17, 23, 0.6);
  color: #f0d978;
  border: 1px solid rgba(212, 175, 55, 0.3);
}

html[data-theme="golden"] .mfa-step-number {
  background: #d4af37;
  color: #0f1117;
  font-weight: 700;
}

html[data-theme="golden"] .mfa-description,
html[data-theme="golden"] .mfa-step p {
  color: #d4c9b0;
}

html[data-theme="golden"] .mfa-disable-warning {
  background: rgba(201, 124, 93, 0.15);
  border-left: 3px solid #c97c5d;
  color: #f8f6f0;
}

html[data-theme="golden"] .message.success {
  background: rgba(134, 163, 97, 0.2);
  color: #86a361;
  border-left: 4px solid #86a361;
}

html[data-theme="golden"] .message.error {
  background: rgba(201, 124, 93, 0.2);
  color: #c97c5d;
  border-left: 4px solid #c97c5d;
}

/* ── Dashboard ──────────────────────────────────────────────────────────── */

html[data-theme="golden"] .stat-card,
html[data-theme="golden"] .dashboard-card,
html[data-theme="golden"] .health-section-row,
html[data-theme="golden"] .dashboard-manual-sync-box,
html[data-theme="golden"] .dashboard-schedule-row {
  background: linear-gradient(135deg, rgba(26, 29, 41, 0.9), rgba(15, 17, 23, 0.95));
  border: 1px solid rgba(212, 175, 55, 0.25);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(212, 175, 55, 0.08);
  color: #f8f6f0;
}

html[data-theme="golden"] .stat-card:hover,
html[data-theme="golden"] .dashboard-card:hover {
  border-color: #d4af37;
  box-shadow: 0 12px 40px rgba(212, 175, 55, 0.25), inset 0 1px 0 rgba(212, 175, 55, 0.15);
  transform: translateY(-2px);
}

html[data-theme="golden"] .stat-value {
  color: #f0d978;
  text-shadow: 0 2px 10px rgba(212, 175, 55, 0.3);
}

html[data-theme="golden"] .stat-label {
  color: #d4c9b0;
  font-family: 'Georgia', serif;
  font-style: italic;
}

html[data-theme="golden"] .dashboard-schedule-btn {
  background: linear-gradient(135deg, rgba(26, 29, 41, 0.9), rgba(15, 17, 23, 0.95));
  border: 1px solid rgba(212, 175, 55, 0.4);
  color: #f0d978;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

html[data-theme="golden"] .dashboard-schedule-btn:hover:not(:disabled) {
  background: linear-gradient(135deg, rgba(26, 29, 41, 1), rgba(15, 17, 23, 1));
  border-color: #d4af37;
  box-shadow: 0 4px 12px rgba(212, 175, 55, 0.3);
}

html[data-theme="golden"] .health-category-title {
  color: #f0d978;
  text-shadow: 0 2px 8px rgba(212, 175, 55, 0.3);
}

html[data-theme="golden"] .health-chip {
  background: linear-gradient(135deg, rgba(26, 29, 41, 0.9), rgba(15, 17, 23, 0.95));
  border: 1px solid rgba(212, 175, 55, 0.25);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}

html[data-theme="golden"] .health-chip-label {
  color: #d4c9b0;
  font-family: 'Georgia', serif;
  font-style: italic;
}

html[data-theme="golden"] .health-chip-value {
  color: #f8f6f0;
  text-shadow: 0 1px 4px rgba(212, 175, 55, 0.2);
}

/* ── Reports ────────────────────────────────────────────────────────────── */

html[data-theme="golden"] .date-select,
html[data-theme="golden"] .sync-meta,
html[data-theme="golden"] .report-section {
  background: linear-gradient(135deg, rgba(26, 29, 41, 0.9), rgba(15, 17, 23, 0.95));
  border: 1px solid rgba(212, 175, 55, 0.25);
  color: #f8f6f0;
}

/* ── Settings, Roles, Brand Flags ───────────────────────────────────────── */

html[data-theme="golden"] .settings-card,
html[data-theme="golden"] .role-card,
html[data-theme="golden"] .brand-flag-card {
  background: linear-gradient(135deg, rgba(26, 29, 41, 0.9), rgba(15, 17, 23, 0.95));
  border: 1px solid rgba(212, 175, 55, 0.25);
  color: #f8f6f0;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

/* ── Analytics ──────────────────────────────────────────────────────────── */

html[data-theme="golden"] .period-btn,
html[data-theme="golden"] .kpi-card,
html[data-theme="golden"] .analytics-card,
html[data-theme="golden"] .segment-card,
html[data-theme="golden"] .hub-card {
  background: linear-gradient(135deg, rgba(26, 29, 41, 0.9), rgba(15, 17, 23, 0.95));
  border: 1px solid rgba(212, 175, 55, 0.25);
  color: #f8f6f0;
}

html[data-theme="golden"] .period-btn.active {
  background: rgba(212, 175, 55, 0.2);
  border-color: #d4af37;
  color: #f0d978;
  box-shadow: 0 0 20px rgba(212, 175, 55, 0.3);
}

html[data-theme="golden"] .hub-section-label {
  color: #d4af37;
  border-bottom-color: rgba(212, 175, 55, 0.3);
  font-family: 'Georgia', serif;
  font-style: italic;
}

/* ── Monitoring ─────────────────────────────────────────────────────────── */

html[data-theme="golden"] .monitoring-section-header {
  color: #f0d978;
  border-color: rgba(212, 175, 55, 0.3);
  background: rgba(212, 175, 55, 0.1);
  border-left-color: #d4af37;
  font-family: 'Georgia', serif;
}

html[data-theme="golden"] .metric-card {
  background: linear-gradient(135deg, rgba(26, 29, 41, 0.9), rgba(15, 17, 23, 0.95));
  border: 1px solid rgba(212, 175, 55, 0.25);
}

html[data-theme="golden"] .metric-card-title {
  color: #f0d978;
  background: rgba(212, 175, 55, 0.1);
  border-color: rgba(212, 175, 55, 0.2);
  font-family: 'Georgia', serif;
}

html[data-theme="golden"] .metric-card-body {
  background: rgba(15, 17, 23, 0.6);
}

html[data-theme="golden"] .metric-card-img {
  filter: invert(0.92) hue-rotate(180deg) brightness(1.1) contrast(0.95);
  border-radius: 4px;
}

html[data-theme="golden"] .btn-metric-filter,
html[data-theme="golden"] .btn-time-range,
html[data-theme="golden"] .btn-monitoring-refresh,
html[data-theme="golden"] .btn-monitoring-console {
  background: rgba(26, 29, 41, 0.8);
  border: 1px solid rgba(212, 175, 55, 0.3);
  color: #d4c9b0;
}

html[data-theme="golden"] .btn-metric-filter:hover,
html[data-theme="golden"] .btn-time-range:hover {
  background: rgba(212, 175, 55, 0.15);
  border-color: #d4af37;
  color: #f0d978;
}

html[data-theme="golden"] .btn-metric-filter.active,
html[data-theme="golden"] .btn-time-range.active {
  background: rgba(212, 175, 55, 0.2);
  border-color: #d4af37;
  color: #f0d978;
  box-shadow: 0 0 15px rgba(212, 175, 55, 0.3);
}

/* ── Error Logs ─────────────────────────────────────────────────────────── */

html[data-theme="golden"] .logs-stat-card {
  background: linear-gradient(135deg, rgba(26, 29, 41, 0.9), rgba(15, 17, 23, 0.95));
  border: 1px solid rgba(212, 175, 55, 0.25);
  color: #f8f6f0;
}

html[data-theme="golden"] .logs-row {
  background: rgba(26, 29, 41, 0.6);
  border: 1px solid rgba(212, 175, 55, 0.15);
}

html[data-theme="golden"] .logs-row:hover {
  background: rgba(212, 175, 55, 0.1);
  border-color: rgba(212, 175, 55, 0.3);
}

html[data-theme="golden"] .btn-logs-refresh,
html[data-theme="golden"] .btn-logs-console,
html[data-theme="golden"] .btn-logs-group,
html[data-theme="golden"] .btn-logs-level,
html[data-theme="golden"] .btn-logs-time {
  background: rgba(26, 29, 41, 0.8);
  border: 1px solid rgba(212, 175, 55, 0.3);
  color: #d4c9b0;
}

html[data-theme="golden"] .btn-logs-group.active,
html[data-theme="golden"] .btn-logs-level.active,
html[data-theme="golden"] .btn-logs-time.active {
  background: rgba(212, 175, 55, 0.2);
  border-color: #d4af37;
  color: #f0d978;
}

html[data-theme="golden"] .logs-search-wrap .logs-search-icon {
  color: #d4c9b0;
}

html[data-theme="golden"] .logs-search-input {
  background: rgba(15, 17, 23, 0.8);
  border: 1px solid rgba(212, 175, 55, 0.3);
  color: #f8f6f0;
}

html[data-theme="golden"] .logs-search-input:focus {
  border-color: #d4af37;
  box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.2);
}

html[data-theme="golden"] .logs-search-input::placeholder {
  color: #a89881;
}

html[data-theme="golden"] .logs-row--error {
  background: rgba(220, 38, 38, 0.15);
  border-color: rgba(220, 38, 38, 0.4);
}

html[data-theme="golden"] .logs-row--error:hover {
  background: rgba(220, 38, 38, 0.25);
  border-color: rgba(220, 38, 38, 0.5);
}

html[data-theme="golden"] .logs-row--warn {
  background: rgba(217, 119, 6, 0.15);
  border-color: rgba(217, 119, 6, 0.4);
}

html[data-theme="golden"] .logs-row--warn:hover {
  background: rgba(217, 119, 6, 0.25);
  border-color: rgba(217, 119, 6, 0.5);
}

html[data-theme="golden"] .logs-row--info {
  background: rgba(59, 130, 246, 0.15);
  border-color: rgba(59, 130, 246, 0.4);
}

html[data-theme="golden"] .logs-row--info:hover {
  background: rgba(59, 130, 246, 0.25);
  border-color: rgba(59, 130, 246, 0.5);
}

html[data-theme="golden"] .logs-stream {
  background: rgba(15, 17, 23, 0.9);
  color: #d4c9b0;
  border: 1px solid rgba(212, 175, 55, 0.3);
}

html[data-theme="golden"] .logs-section-card {
  background: linear-gradient(135deg, rgba(26, 29, 41, 0.9), rgba(15, 17, 23, 0.95));
  border: 1px solid rgba(212, 175, 55, 0.25);
}

/* ── XRay ───────────────────────────────────────────────────────────────── */

html[data-theme="golden"] .btn-xray-refresh,
html[data-theme="golden"] .btn-xray-console,
html[data-theme="golden"] .btn-xray-time,
html[data-theme="golden"] .btn-xray-filter {
  background: rgba(26, 29, 41, 0.8);
  border: 1px solid rgba(212, 175, 55, 0.3);
  color: #d4c9b0;
}

html[data-theme="golden"] .btn-xray-time.active,
html[data-theme="golden"] .btn-xray-filter.active {
  background: rgba(212, 175, 55, 0.2);
  border-color: #d4af37;
  color: #f0d978;
}

html[data-theme="golden"] .xray-stat-card,
html[data-theme="golden"] .xray-section-card {
  background: linear-gradient(135deg, rgba(26, 29, 41, 0.9), rgba(15, 17, 23, 0.95));
  border: 1px solid rgba(212, 175, 55, 0.25);
  color: #f8f6f0;
}

html[data-theme="golden"] .xray-service-card {
  background: rgba(26, 29, 41, 0.8);
  border: 1px solid rgba(212, 175, 55, 0.25);
  color: #f8f6f0;
}

html[data-theme="golden"] .xray-service-card:hover {
  background: rgba(26, 29, 41, 0.9);
  border-color: rgba(212, 175, 55, 0.4);
}

html[data-theme="golden"] .xray-service-card--error {
  background: rgba(201, 124, 93, 0.2);
  border-color: rgba(201, 124, 93, 0.5);
}

html[data-theme="golden"] .xray-service-name {
  color: #f0d978;
}

html[data-theme="golden"] .xray-service-type {
  color: #d4c9b0;
}

html[data-theme="golden"] .xray-row:hover {
  background: rgba(212, 175, 55, 0.1);
}

html[data-theme="golden"] .xray-search-wrap .xray-search-icon {
  color: #d4c9b0;
}

html[data-theme="golden"] .xray-search-input {
  background: rgba(15, 17, 23, 0.8);
  border: 1px solid rgba(212, 175, 55, 0.3);
  color: #f8f6f0;
}

html[data-theme="golden"] .xray-search-input:focus {
  border-color: #d4af37;
  box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.15);
}

html[data-theme="golden"] .xray-search-input::placeholder {
  color: #a89881;
}

html[data-theme="golden"] .btn-xray-view {
  background: transparent;
  color: #d4c9b0;
}

html[data-theme="golden"] .btn-xray-view:hover {
  background: rgba(26, 29, 41, 0.6);
  color: #f0d978;
}

html[data-theme="golden"] .btn-xray-view.active {
  background: linear-gradient(135deg, rgba(212, 175, 55, 0.25), rgba(212, 175, 55, 0.15));
  color: #f0d978;
  box-shadow: 0 2px 8px rgba(212, 175, 55, 0.3);
}

html[data-theme="golden"] .xray-view-toggle {
  background: rgba(15, 17, 23, 0.8);
}

html[data-theme="golden"] .xray-svcmap-wrap svg rect[fill="#ffffff"],
html[data-theme="golden"] .xray-svcmap-wrap svg rect[fill="#fff5f5"],
html[data-theme="golden"] .xray-svcmap-wrap svg rect[fill="#fffbeb"] {
  fill: rgba(26, 29, 41, 0.9) !important;
}

html[data-theme="golden"] .xray-svcmap-wrap svg rect[stroke="#e2e8f0"] {
  stroke: rgba(212, 175, 55, 0.4) !important;
}

html[data-theme="golden"] .xray-svcmap-wrap svg rect[fill="rgba(0,0,0,0.06)"] {
  fill: rgba(0, 0, 0, 0.3) !important;
}

html[data-theme="golden"] .xray-svcmap-wrap svg text[fill="#1e293b"] {
  fill: #f0d978 !important;
}

html[data-theme="golden"] .xray-svcmap-wrap svg text[fill="#64748b"] {
  fill: #d4c9b0 !important;
}

html[data-theme="golden"] .xray-svcmap-wrap svg text[fill="#94a3b8"] {
  fill: #a89881 !important;
}

html[data-theme="golden"] .xray-svcmap-wrap svg text[fill="#b0bec5"] {
  fill: #d4c9b0 !important;
}

html[data-theme="golden"] .xray-svcmap-wrap svg path[fill="#b0bec5"] {
  fill: #d4c9b0 !important;
}

html[data-theme="golden"] .xray-svcmap-wrap svg path[stroke="#b0bec5"],
html[data-theme="golden"] .xray-svcmap-wrap svg line[stroke="#f1f5f9"] {
  stroke: rgba(212, 175, 55, 0.3) !important;
}

html[data-theme="golden"] .xray-row {
  background: rgba(26, 29, 41, 0.5);
}

html[data-theme="golden"] .xray-row:hover {
  background: rgba(26, 29, 41, 0.75) !important;
}

html[data-theme="golden"] .xray-row--selected {
  background: rgba(212, 175, 55, 0.2) !important;
  border-left: 3px solid #d4af37;
}

html[data-theme="golden"] .xray-trace-id {
  background: rgba(15, 17, 23, 0.9);
  color: #d4c9b0;
  border: 1px solid rgba(212, 175, 55, 0.3);
}

html[data-theme="golden"] .xray-exec-id {
  background: rgba(15, 17, 23, 0.9);
  color: #f0d978;
  border: 1px solid rgba(212, 175, 55, 0.4);
}

html[data-theme="golden"] .xray-badge.badge-green {
  background: rgba(22, 163, 74, 0.2);
  color: #86efac;
  border: 1px solid rgba(34, 197, 94, 0.4);
}

html[data-theme="golden"] .xray-badge.badge-blue {
  background: rgba(59, 130, 246, 0.2);
  color: #93c5fd;
  border: 1px solid rgba(59, 130, 246, 0.4);
}

html[data-theme="golden"] .xray-badge.badge-red {
  background: rgba(220, 38, 38, 0.2);
  color: #fca5a5;
  border: 1px solid rgba(220, 38, 38, 0.4);
}

html[data-theme="golden"] .xray-badge.badge-orange {
  background: rgba(249, 115, 22, 0.2);
  color: #fdba74;
  border: 1px solid rgba(249, 115, 22, 0.4);
}

html[data-theme="golden"] .xray-badge.badge-gray {
  background: rgba(168, 152, 129, 0.2);
  color: #d4c9b0;
  border: 1px solid rgba(168, 152, 129, 0.4);
}

html[data-theme="golden"] .xray-detail-panel {
  background: rgba(26, 29, 41, 0.9);
  border: 1px solid rgba(212, 175, 55, 0.3);
}

html[data-theme="golden"] .xray-detail-header {
  background: rgba(15, 17, 23, 0.95);
  border-bottom: 1px solid rgba(212, 175, 55, 0.3);
}

html[data-theme="golden"] .xray-detail-title {
  color: #f0d978;
}

html[data-theme="golden"] .xray-detail-title code {
  background: rgba(15, 17, 23, 0.9);
  color: #93c5fd;
  border: 1px solid rgba(59, 130, 246, 0.4);
}

html[data-theme="golden"] .xray-detail-close {
  color: #d4c9b0;
}

html[data-theme="golden"] .xray-detail-close:hover {
  background: rgba(212, 175, 55, 0.2);
  color: #f0d978;
}

html[data-theme="golden"] .xray-waterfall-col-label {
  color: #d4c9b0;
}

html[data-theme="golden"] .xray-seg-row:hover {
  background: rgba(212, 175, 55, 0.1) !important;
}

html[data-theme="golden"] .xray-seg-name {
  color: #f8f6f0;
}

html[data-theme="golden"] .xray-seg-url {
  color: #d4c9b0;
}

html[data-theme="golden"] .xray-seg-status {
  background: rgba(22, 163, 74, 0.2);
  color: #86efac;
  border: 1px solid rgba(34, 197, 94, 0.4);
}

html[data-theme="golden"] .xray-seg-status--error {
  background: rgba(220, 38, 38, 0.2);
  color: #fca5a5;
  border: 1px solid rgba(220, 38, 38, 0.4);
}

html[data-theme="golden"] .xray-seg-timeline {
  background: rgba(15, 17, 23, 0.8);
  border: 1px solid rgba(212, 175, 55, 0.2);
}

html[data-theme="golden"] .xray-seg-duration {
  color: #d4c9b0;
}

html[data-theme="golden"] .xray-placeholder {
  color: #d4c9b0;
}

html[data-theme="golden"] .xray-error-msg {
  background: rgba(220, 38, 38, 0.15);
  color: #fca5a5;
  border: 1px solid rgba(220, 38, 38, 0.4);
}

/* ── Users ──────────────────────────────────────────────────────────────── */

html[data-theme="golden"] .users-search-input {
  background: rgba(15, 17, 23, 0.6);
  border: 1px solid rgba(212, 175, 55, 0.3);
  color: #f8f6f0;
}

html[data-theme="golden"] .tr-search-input {
  background: rgba(15, 17, 23, 0.6);
  border: 1px solid rgba(212, 175, 55, 0.3);
  color: #f8f6f0;
}

html[data-theme="golden"] .tr-search-input::placeholder {
  color: #8b7355;
  font-style: italic;
}

html[data-theme="golden"] .tr-search-input:focus {
  border-color: #d4af37;
  box-shadow: 0 0 20px rgba(212, 175, 55, 0.2);
}

html[data-theme="golden"] .tr-search-icon {
  color: #8b7355;
}

html[data-theme="golden"] .users-search-input:focus {
  border-color: #d4af37;
  box-shadow: 0 0 20px rgba(212, 175, 55, 0.2);
}

html[data-theme="golden"] .users-search-input::placeholder {
  color: #8b7355;
  font-style: italic;
}

html[data-theme="golden"] .users-table {
  background: linear-gradient(135deg, rgba(26, 29, 41, 0.9), rgba(15, 17, 23, 0.95));
  border: 1px solid rgba(212, 175, 55, 0.25);
}

html[data-theme="golden"] .users-table th {
  background: rgba(212, 175, 55, 0.1);
  color: #f0d978;
  border-bottom: 2px solid rgba(212, 175, 55, 0.3);
  font-family: 'Georgia', serif;
}

html[data-theme="golden"] .users-th-sortable:hover {
  background: rgba(212, 175, 55, 0.15);
  color: #f0d978;
}

html[data-theme="golden"] .users-th-active {
  color: #d4af37;
  background: rgba(212, 175, 55, 0.2);
}

html[data-theme="golden"] .users-table td {
  color: #f8f6f0;
  border-bottom: 1px solid rgba(212, 175, 55, 0.15);
}

html[data-theme="golden"] .users-table tr:hover td {
  background: rgba(212, 175, 55, 0.08);
}

html[data-theme="golden"] .users-cell-date {
  color: #d4c9b0;
  font-style: italic;
}

html[data-theme="golden"] .users-cell-name {
  color: #f8f6f0;
  font-weight: 600;
}

html[data-theme="golden"] .users-role-admin {
  background: rgba(212, 175, 55, 0.2);
  color: #f0d978;
  border: 1px solid rgba(212, 175, 55, 0.4);
}

html[data-theme="golden"] .users-role-reports {
  background: rgba(139, 115, 85, 0.2);
  color: #d4c9b0;
  border: 1px solid rgba(139, 115, 85, 0.4);
}

html[data-theme="golden"] .users-role-generic {
  background: rgba(168, 152, 129, 0.2);
  color: #a89881;
  border: 1px solid rgba(168, 152, 129, 0.3);
}

html[data-theme="golden"] .users-status-label.enabled {
  background: rgba(134, 163, 97, 0.2);
  color: #86a361;
  border: 1px solid rgba(134, 163, 97, 0.4);
}

html[data-theme="golden"] .users-status-label.disabled {
  background: rgba(168, 152, 129, 0.2);
  color: #a89881;
  border: 1px solid rgba(168, 152, 129, 0.4);
}

html[data-theme="golden"] .users-icon {
  color: #d4af37;
}

html[data-theme="golden"] .btn-users-refresh,
html[data-theme="golden"] .btn-users-create,
html[data-theme="golden"] .btn-users-icon {
  background: rgba(26, 29, 41, 0.8);
  border: 1px solid rgba(212, 175, 55, 0.3);
  color: #d4c9b0;
}

html[data-theme="golden"] .btn-users-refresh:hover:not(:disabled),
html[data-theme="golden"] .btn-users-create:hover:not(:disabled),
html[data-theme="golden"] .btn-users-icon:hover:not(:disabled) {
  background: rgba(212, 175, 55, 0.15);
  border-color: #d4af37;
  color: #f0d978;
  box-shadow: 0 0 15px rgba(212, 175, 55, 0.2);
}

html[data-theme="golden"] .users-row-disabled td {
  opacity: 0.5;
  color: #8b7355;
}

html[data-theme="golden"] .users-modal-backdrop {
  background: rgba(10, 12, 18, 0.9);
}

html[data-theme="golden"] .users-modal {
  background: linear-gradient(135deg, rgba(26, 29, 41, 0.98), rgba(15, 17, 23, 0.98));
  border: 1px solid rgba(212, 175, 55, 0.4);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6), 0 0 100px rgba(212, 175, 55, 0.15);
}

html[data-theme="golden"] .users-modal-title {
  color: #f0d978;
  font-family: 'Georgia', serif;
  border-bottom: 2px solid rgba(212, 175, 55, 0.3);
}

html[data-theme="golden"] .btn-users-cancel {
  background: linear-gradient(135deg, rgba(26, 29, 41, 0.9), rgba(15, 17, 23, 0.95));
  border: 1px solid rgba(212, 175, 55, 0.4);
  color: #f0d978;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

html[data-theme="golden"] .btn-users-cancel:hover:not(:disabled) {
  background: linear-gradient(135deg, rgba(26, 29, 41, 1), rgba(15, 17, 23, 1));
  border-color: #d4af37;
  box-shadow: 0 4px 12px rgba(212, 175, 55, 0.3);
}

html[data-theme="golden"] .users-modal-form input,
html[data-theme="golden"] .users-modal-form select,
html[data-theme="golden"] .users-role-select {
  background: rgba(15, 17, 23, 0.8);
  border: 1px solid rgba(212, 175, 55, 0.3);
  color: #f8f6f0;
}

html[data-theme="golden"] .users-modal-form input:focus,
html[data-theme="golden"] .users-modal-form select:focus,
html[data-theme="golden"] .users-role-select:focus {
  border-color: #d4af37;
  box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.2);
}

html[data-theme="golden"] .users-modal-form label {
  color: #d4c9b0;
}

/* ── Activity modal ─────────────────────────────────────────────────────── */
html[data-theme="golden"] .activity-summary {
  background: rgba(212, 175, 55, 0.06);
  border: 1px solid rgba(212, 175, 55, 0.25);
}
html[data-theme="golden"] .activity-table-wrapper {
  border-color: rgba(212, 175, 55, 0.3);
}
html[data-theme="golden"] .activity-table th {
  background: rgba(212, 175, 55, 0.08);
  border-bottom-color: rgba(212, 175, 55, 0.2);
  color: #d4c9b0;
}
html[data-theme="golden"] .activity-table td {
  color: #f8f6f0;
  border-bottom-color: rgba(212, 175, 55, 0.1);
}
html[data-theme="golden"] .activity-status-high {
  background: rgba(212, 175, 55, 0.15);
  color: #f0d978;
  border: 1px solid rgba(212, 175, 55, 0.3);
}
html[data-theme="golden"] .activity-status-medium {
  background: rgba(212, 175, 55, 0.08);
  color: #c9a961;
  border: 1px solid rgba(212, 175, 55, 0.2);
}
html[data-theme="golden"] .activity-status-expired {
  background: rgba(212, 175, 55, 0.04);
  color: #a89881;
}
html[data-theme="golden"] .activity-status-none {
  background: rgba(212, 175, 55, 0.04);
  color: #a89881;
}
html[data-theme="golden"] .activity-result-badge.pass {
  background: rgba(134, 163, 97, 0.2);
  color: #86a361;
}
html[data-theme="golden"] .activity-result-badge.fail {
  background: rgba(220, 60, 60, 0.2);
  color: #ff6b6b;
}

/* ── Additional component overrides for elegant theme ───────────────────── */

/* Analytics page components */
html[data-theme="golden"] .period-btn {
  background: rgba(26, 29, 41, 0.8);
  color: #d4c9b0;
  border-right-color: rgba(212, 175, 55, 0.2);
}

html[data-theme="golden"] .period-btn:hover {
  background: rgba(212, 175, 55, 0.15);
  color: #f0d978;
}

html[data-theme="golden"] .period-btn.active {
  background: rgba(212, 175, 55, 0.25);
  color: #f0d978;
}

html[data-theme="golden"] .kpi-card {
  background: linear-gradient(135deg, rgba(26, 29, 41, 0.9), rgba(15, 17, 23, 0.95));
  border: 1px solid rgba(212, 175, 55, 0.2);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}

html[data-theme="golden"] .kpi-label {
  color: #d4c9b0;
}

html[data-theme="golden"] .kpi-value {
  color: #f0d978;
}

html[data-theme="golden"] .kpi-sub {
  color: #a89881;
}

html[data-theme="golden"] .analytics-card {
  background: linear-gradient(135deg, rgba(26, 29, 41, 0.9), rgba(15, 17, 23, 0.95));
  border: 1px solid rgba(212, 175, 55, 0.25);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}

html[data-theme="golden"] .analytics-card-title {
  color: #f0d978;
}

html[data-theme="golden"] .analytics-table th {
  color: #d4af37;
  border-bottom-color: rgba(212, 175, 55, 0.3);
}

html[data-theme="golden"] .analytics-table td {
  color: #f8f6f0;
  border-bottom-color: rgba(212, 175, 55, 0.1);
}

html[data-theme="golden"] .analytics-table tr:hover td {
  background: rgba(212, 175, 55, 0.08);
}

html[data-theme="golden"] .bar-track {
  background: rgba(15, 17, 23, 0.8);
}

html[data-theme="golden"] .bar-fill {
  background: linear-gradient(90deg, #d4af37, #f0d978);
}

html[data-theme="golden"] .bar-label,
html[data-theme="golden"] .bar-value {
  color: #f8f6f0;
}

html[data-theme="golden"] .donut-center {
  background: rgba(26, 29, 41, 0.95);
  color: #f0d978;
}

html[data-theme="golden"] .donut-legend-label,
html[data-theme="golden"] .donut-legend-value {
  color: #f8f6f0;
}

html[data-theme="golden"] .funnel-step {
  border-bottom-color: rgba(212, 175, 55, 0.15);
}

html[data-theme="golden"] .funnel-step-name {
  color: #f8f6f0;
}

html[data-theme="golden"] .funnel-step-bar {
  background: rgba(212, 175, 55, 0.2);
}

html[data-theme="golden"] .funnel-rate {
  color: #f0d978;
}

html[data-theme="golden"] .funnel-sessions {
  color: #d4c9b0;
}

html[data-theme="golden"] .segment-card {
  background: rgba(26, 29, 41, 0.6);
  border: 1px solid rgba(212, 175, 55, 0.2);
}

html[data-theme="golden"] .segment-name {
  color: #f8f6f0;
}

html[data-theme="golden"] .segment-stat-value {
  color: #f0d978;
}

html[data-theme="golden"] .segment-stat-label {
  color: #d4c9b0;
}

html[data-theme="golden"] .hub-card {
  background: linear-gradient(135deg, rgba(26, 29, 41, 0.9), rgba(15, 17, 23, 0.95));
  border: 1px solid rgba(212, 175, 55, 0.25);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}

html[data-theme="golden"] .hub-card:hover {
  box-shadow: 0 8px 32px rgba(212, 175, 55, 0.25);
}

html[data-theme="golden"] .hub-card h3 {
  color: #f0d978;
}

html[data-theme="golden"] .hub-card p {
  color: #d4c9b0;
}

html[data-theme="golden"] .exec-date-select,
html[data-theme="golden"] .exec-date-input {
  background: rgba(15, 17, 23, 0.8);
  border-color: rgba(212, 175, 55, 0.3);
  color: #f8f6f0;
}

html[data-theme="golden"] .exec-explore-card {
  background: rgba(26, 29, 41, 0.8);
  border-color: rgba(212, 175, 55, 0.25);
}

html[data-theme="golden"] .exec-explore-card:hover {
  background: rgba(212, 175, 55, 0.15);
}

html[data-theme="golden"] .exec-explore-title {
  color: #f8f6f0;
}

/* Brand Flags components */
html[data-theme="golden"] .brand-flags-search {
  background: rgba(15, 17, 23, 0.6);
  border-color: rgba(212, 175, 55, 0.3);
  color: #f8f6f0;
}

html[data-theme="golden"] .brand-flags-search:focus {
  border-color: #d4af37;
  box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.2);
}

html[data-theme="golden"] .brand-flags-search::placeholder {
  color: #8b7355;
}

html[data-theme="golden"] .brand-flags-filter-tabs {
  background: rgba(26, 29, 41, 0.8);
  border-color: rgba(212, 175, 55, 0.3);
}

html[data-theme="golden"] .brand-flags-filter-btn {
  background: rgba(26, 29, 41, 0.8);
  border-right-color: rgba(212, 175, 55, 0.2);
  color: #d4c9b0;
}

html[data-theme="golden"] .brand-flags-filter-btn:hover {
  background: rgba(212, 175, 55, 0.15);
}

html[data-theme="golden"] .brand-flags-filter-btn.active {
  background: rgba(212, 175, 55, 0.25);
  color: #f0d978;
}

html[data-theme="golden"] .brand-flags-preview {
  background: linear-gradient(135deg, rgba(26, 29, 41, 0.9), rgba(15, 17, 23, 0.95));
  border-color: rgba(212, 175, 55, 0.3);
}

html[data-theme="golden"] .brand-flags-preview h3 {
  color: #f0d978;
}

html[data-theme="golden"] .brand-flags-preview-item {
  background: rgba(15, 17, 23, 0.6);
  border-color: rgba(212, 175, 55, 0.2);
}

html[data-theme="golden"] .brand-flags-preview-name {
  color: #f8f6f0;
}

html[data-theme="golden"] .brand-flags-readonly-notice {
  background: rgba(212, 175, 55, 0.15);
  border-color: rgba(212, 175, 55, 0.4);
  color: #f0d978;
}

html[data-theme="golden"] .brand-flags-error {
  background: rgba(201, 124, 93, 0.2);
  border-color: rgba(201, 124, 93, 0.4);
  color: #f8f6f0;
}

html[data-theme="golden"] .brand-flags-success {
  background: rgba(134, 163, 97, 0.2);
  border-color: rgba(134, 163, 97, 0.4);
  color: #f8f6f0;
}

html[data-theme="golden"] .brand-flags-summary-item {
  background: rgba(26, 29, 41, 0.8);
  border: 1px solid rgba(212, 175, 55, 0.2);
  color: #f8f6f0;
}

html[data-theme="golden"] .brand-flags-summary-item.active {
  border-color: rgba(212, 175, 55, 0.5);
  color: #f0d978;
}

html[data-theme="golden"] .brand-flags-summary-item.inactive {
  border-color: rgba(212, 175, 55, 0.1);
  color: #8b7355;
}

html[data-theme="golden"] .brand-flag-state-pill.active {
  background: rgba(212, 175, 55, 0.18);
  color: #f0d978;
}

html[data-theme="golden"] .brand-flag-state-pill.inactive {
  background: rgba(26, 29, 41, 0.7);
  color: #8b7355;
}

html[data-theme="golden"] .brand-flag-slider {
  background: rgba(212, 175, 55, 0.25);
}

html[data-theme="golden"] .bf-card {
  background: linear-gradient(135deg, rgba(26, 29, 41, 0.9), rgba(15, 17, 23, 0.95));
  border: 1px solid rgba(212, 175, 55, 0.25);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}

html[data-theme="golden"] .bf-card-body {
  color: #f8f6f0;
}

html[data-theme="golden"] .bf-brand-name {
  color: #f0d978;
}

html[data-theme="golden"] .bf-brand-key {
  color: #8b7355;
}

/* Roles components */
html[data-theme="golden"] .role-card {
  background: linear-gradient(135deg, rgba(26, 29, 41, 0.9), rgba(15, 17, 23, 0.95));
  border: 1px solid rgba(212, 175, 55, 0.25);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}

html[data-theme="golden"] .role-card-header {
  border-bottom-color: rgba(212, 175, 55, 0.2);
}

html[data-theme="golden"] .role-name {
  color: #f0d978;
}

html[data-theme="golden"] .role-description {
  color: #d4c9b0;
}

html[data-theme="golden"] .permission-item {
  background: rgba(15, 17, 23, 0.6);
  border: 1px solid rgba(212, 175, 55, 0.2);
}

html[data-theme="golden"] .permission-item:hover {
  background: rgba(212, 175, 55, 0.1);
}

html[data-theme="golden"] .permission-label {
  color: #f8f6f0;
}

html[data-theme="golden"] .permission-description {
  color: #a89881;
}

/* Dashboard components */
html[data-theme="golden"] .dashboard-sync-status {
  background: rgba(26, 29, 41, 0.8);
  border: 1px solid rgba(212, 175, 55, 0.25);
}

html[data-theme="golden"] .sync-status-label {
  color: #d4c9b0;
}

html[data-theme="golden"] .sync-status-value {
  color: #f0d978;
}

html[data-theme="golden"] .dashboard-queue-item {
  background: rgba(15, 17, 23, 0.6);
  border: 1px solid rgba(212, 175, 55, 0.2);
}

html[data-theme="golden"] .dashboard-queue-label {
  color: #d4c9b0;
}

html[data-theme="golden"] .dashboard-queue-count {
  color: #f0d978;
}

html[data-theme="golden"] .dashboard-link-item {
  background: rgba(15, 17, 23, 0.6);
  border: 1px solid rgba(212, 175, 55, 0.2);
  color: #d4c9b0;
}

html[data-theme="golden"] .dashboard-link-item:hover {
  background: rgba(212, 175, 55, 0.15);
  border-color: #d4af37;
  color: #f0d978;
}

/* Reports components */
html[data-theme="golden"] .date-select {
  background: linear-gradient(135deg, rgba(26, 29, 41, 0.9), rgba(15, 17, 23, 0.95));
  border: 1px solid rgba(212, 175, 55, 0.25);
}

html[data-theme="golden"] .sync-meta {
  background: rgba(26, 29, 41, 0.8);
  border: 1px solid rgba(212, 175, 55, 0.2);
}

html[data-theme="golden"] .report-section {
  background: linear-gradient(135deg, rgba(26, 29, 41, 0.9), rgba(15, 17, 23, 0.95));
  border: 1px solid rgba(212, 175, 55, 0.25);
}

html[data-theme="golden"] .report-table {
  background: rgba(15, 17, 23, 0.6);
}

html[data-theme="golden"] .report-table th {
  background: rgba(212, 175, 55, 0.1);
  color: #d4af37;
  border-bottom-color: rgba(212, 175, 55, 0.3);
}

html[data-theme="golden"] .report-table td {
  color: #f8f6f0;
  border-bottom-color: rgba(212, 175, 55, 0.1);
}

html[data-theme="golden"] .report-table tr:hover td {
  background: rgba(212, 175, 55, 0.08);
}

html[data-theme="golden"] .changes-toggle {
  background: rgba(212, 175, 55, 0.2);
  border-color: rgba(212, 175, 55, 0.5);
  color: #f0d978;
}

html[data-theme="golden"] .changes-toggle:hover {
  background: rgba(212, 175, 55, 0.3);
}

html[data-theme="golden"] .changes-list {
  background: rgba(26, 29, 41, 0.8);
  border-color: rgba(212, 175, 55, 0.4);
}

html[data-theme="golden"] .change-field {
  color: #d4c9b0;
}

html[data-theme="golden"] .change-from {
  color: #ff9999;
}

html[data-theme="golden"] .change-arrow {
  color: #d4c9b0;
}

html[data-theme="golden"] .change-to {
  color: #86a361;
}

html[data-theme="golden"] .skipped-filters {
  background: rgba(26, 29, 41, 0.8);
  border-bottom-color: rgba(212, 175, 55, 0.3);
}

html[data-theme="golden"] .skipped-filter-select {
  background: rgba(15, 17, 23, 0.8);
  border-color: rgba(212, 175, 55, 0.3);
  color: #f8f6f0;
}

html[data-theme="golden"] .skipped-filter-select:focus {
  border-color: #d4af37;
  box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.15);
}

html[data-theme="golden"] .skipped-search-wrap .search-icon {
  color: #d4c9b0;
}

html[data-theme="golden"] .skipped-search-input {
  background: rgba(15, 17, 23, 0.8);
  border-color: rgba(212, 175, 55, 0.3);
  color: #f8f6f0;
}

html[data-theme="golden"] .skipped-search-input:focus {
  border-color: #d4af37;
  box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.15);
}

html[data-theme="golden"] .skipped-search-input::placeholder {
  color: #a89881;
}

html[data-theme="golden"] .skipped-results-count {
  background: rgba(26, 29, 41, 0.8);
  border-bottom-color: rgba(212, 175, 55, 0.3);
  color: #d4c9b0;
}

html[data-theme="golden"] .filter-icon {
  color: #d4c9b0;
}

html[data-theme="golden"] .section-header {
  color: #f0d978 !important;
}

html[data-theme="golden"] .section-header:hover {
  background: rgba(212, 175, 55, 0.1);
}

html[data-theme="golden"] .section-count {
  background-color: #d4af37 !important;
  color: #1a1d29 !important;
  font-weight: 700;
}

html[data-theme="golden"] .report-section {
  border-left-color: #d4af37 !important;
}

html[data-theme="golden"] .section-body {
  border-top-color: rgba(212, 175, 55, 0.3);
}

/* Settings components */
html[data-theme="golden"] .settings-card {
  background: linear-gradient(135deg, rgba(26, 29, 41, 0.9), rgba(15, 17, 23, 0.95));
  border: 1px solid rgba(212, 175, 55, 0.25);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}

html[data-theme="golden"] .settings-sidebar {
  background: linear-gradient(135deg, rgba(26, 29, 41, 0.9), rgba(15, 17, 23, 0.95));
  border: 1px solid rgba(212, 175, 55, 0.25);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

html[data-theme="golden"] .settings-nav-label {
  color: #d4c9b0;
}

html[data-theme="golden"] .settings-nav-item {
  color: #a89881;
}

html[data-theme="golden"] .settings-nav-item:hover:not(:disabled) {
  background: rgba(26, 29, 41, 0.6);
  color: #f0d978;
}

html[data-theme="golden"] .settings-nav-item.active {
  background: linear-gradient(135deg, rgba(212, 175, 55, 0.25), rgba(212, 175, 55, 0.15));
  color: #f0d978;
  border: 1px solid rgba(212, 175, 55, 0.4);
  box-shadow: 0 2px 8px rgba(212, 175, 55, 0.3), inset 0 1px 0 rgba(212, 175, 55, 0.1);
}

html[data-theme="golden"] .settings-section {
  background: linear-gradient(135deg, rgba(26, 29, 41, 0.9), rgba(15, 17, 23, 0.95));
  border: 1px solid rgba(212, 175, 55, 0.25);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
  border-bottom-color: rgba(212, 175, 55, 0.15);
}

html[data-theme="golden"] .settings-section-title {
  color: #f0d978;
  border-bottom-color: rgba(212, 175, 55, 0.3);
}

html[data-theme="golden"] .settings-mode-toggle {
  background: rgba(15, 17, 23, 0.8);
}

html[data-theme="golden"] .settings-mode-btn:hover:not(:disabled) {
  background: rgba(26, 29, 41, 0.9);
  color: #f0d978;
}

html[data-theme="golden"] .settings-mode-btn.active {
  background: linear-gradient(135deg, rgba(26, 29, 41, 0.95), rgba(15, 17, 23, 1)) !important;
  color: #f0d978 !important;
  border: 1px solid #d4af37;
  box-shadow: 0 2px 8px rgba(212, 175, 55, 0.4), inset 0 1px 0 rgba(212, 175, 55, 0.15);
}

html[data-theme="golden"] .settings-instructions-preview {
  background: rgba(15, 17, 23, 0.8);
  border: 1px solid rgba(212, 175, 55, 0.3);
  color: #f8f6f0;
}

html[data-theme="golden"] .settings-instructions-preview h1,
html[data-theme="golden"] .settings-instructions-preview h2,
html[data-theme="golden"] .settings-instructions-preview h3 {
  color: #f0d978;
}

html[data-theme="golden"] .settings-instructions-preview code {
  background: rgba(26, 29, 41, 0.8);
  color: #f0d978;
}

html[data-theme="golden"] .settings-instructions-preview pre {
  background: rgba(26, 29, 41, 0.8);
  border: 1px solid rgba(212, 175, 55, 0.2);
}

html[data-theme="golden"] .settings-label {
  color: #d4c9b0;
}

html[data-theme="golden"] .settings-input,
html[data-theme="golden"] .settings-textarea,
html[data-theme="golden"] .settings-select {
  background: rgba(15, 17, 23, 0.6);
  border-color: rgba(212, 175, 55, 0.3);
  color: #f8f6f0;
}

html[data-theme="golden"] .settings-input:focus,
html[data-theme="golden"] .settings-textarea:focus,
html[data-theme="golden"] .settings-select:focus {
  border-color: #d4af37;
  box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.15);
}

/* Monitoring components */
html[data-theme="golden"] .monitoring-control {
  background: rgba(26, 29, 41, 0.8);
  border: 1px solid rgba(212, 175, 55, 0.3);
  color: #d4c9b0;
}

html[data-theme="golden"] .monitoring-control:hover {
  background: rgba(212, 175, 55, 0.15);
  color: #f0d978;
}

html[data-theme="golden"] .monitoring-control.active {
  background: rgba(212, 175, 55, 0.25);
  color: #f0d978;
  border-color: #d4af37;
}

html[data-theme="golden"] .chart-tooltip {
  background: rgba(15, 17, 23, 0.98) !important;
  border: 1px solid rgba(212, 175, 55, 0.4) !important;
  color: #f8f6f0 !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6) !important;
}

/* Modal components */
html[data-theme="golden"] .modal-content {
  background: linear-gradient(135deg, rgba(26, 29, 41, 0.98), rgba(15, 17, 23, 0.98));
  border: 1px solid rgba(212, 175, 55, 0.4);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
  color: #f8f6f0;
}

html[data-theme="golden"] .modal-header {
  border-bottom-color: rgba(212, 175, 55, 0.3);
}

html[data-theme="golden"] .modal-title {
  color: #f0d978;
}

html[data-theme="golden"] .modal-body {
  color: #f8f6f0;
}

html[data-theme="golden"] .modal-footer {
  border-top-color: rgba(212, 175, 55, 0.2);
}

/* Loading states */
html[data-theme="golden"] .loading-spinner {
  border-color: rgba(212, 175, 55, 0.2);
  border-top-color: #d4af37;
}

html[data-theme="golden"] .loading-text {
  color: #d4c9b0;
}

/* Empty states */
html[data-theme="golden"] .empty-state {
  color: #a89881;
}

html[data-theme="golden"] .empty-state-icon {
  color: #8b7355;
}

/* Badge components */
html[data-theme="golden"] .badge {
  background: rgba(212, 175, 55, 0.2);
  color: #f0d978;
  border: 1px solid rgba(212, 175, 55, 0.4);
}

html[data-theme="golden"] .badge.badge-success {
  background: rgba(134, 163, 97, 0.2);
  color: #86a361;
  border-color: rgba(134, 163, 97, 0.4);
}

html[data-theme="golden"] .badge.badge-warning {
  background: rgba(212, 175, 55, 0.2);
  color: #d4af37;
  border-color: rgba(212, 175, 55, 0.4);
}

html[data-theme="golden"] .badge.badge-danger {
  background: rgba(201, 124, 93, 0.2);
  color: #c97c5d;
  border-color: rgba(201, 124, 93, 0.4);
}

/* ═══════════════════════════════════════════════════════════════════════════
   Activity Log — Theme Overrides
   Action badges have hardcoded light colors; dark themes need an override
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── cyberpunk (dark) ───────────────────────────────────────────────────── */
html[data-theme="cyberpunk"] .activity-log-table-wrapper {
  background: #0f1117;
  border-color: #00ff4133;
}
html[data-theme="cyberpunk"] .activity-log-table thead { background: #1a1d29; }
html[data-theme="cyberpunk"] .activity-log-table th { color: #00ff41aa; border-bottom-color: #00ff4133; }
html[data-theme="cyberpunk"] .activity-log-table td { border-bottom-color: #00ff4115; color: #e0e0e0; }
html[data-theme="cyberpunk"] .activity-log-table tbody tr:hover { background: #00ff4108; }
html[data-theme="cyberpunk"] .action-badge.user    { background: rgba(0,149,255,0.15); color: #0095ff; }
html[data-theme="cyberpunk"] .action-badge.theme   { background: rgba(191,0,255,0.15); color: #bf00ff; }
html[data-theme="cyberpunk"] .action-badge.sync    { background: rgba(0,255,65,0.15);  color: #00ff41; }
html[data-theme="cyberpunk"] .action-badge.role    { background: rgba(255,149,0,0.15); color: #ff9500; }
html[data-theme="cyberpunk"] .action-badge.brand   { background: rgba(255,220,0,0.15); color: #ffdc00; }
html[data-theme="cyberpunk"] .action-badge.report  { background: rgba(0,212,255,0.15); color: #00d4ff; }
html[data-theme="cyberpunk"] .action-badge.setting   { background: rgba(160,160,160,0.15); color: #a0a0a0; }
html[data-theme="cyberpunk"] .action-badge.inventory { background: rgba(0,255,180,0.15);   color: #00ffb4; }
html[data-theme="cyberpunk"] .action-badge.pos       { background: rgba(255,0,200,0.15);   color: #ff00c8; }
html[data-theme="cyberpunk"] .action-badge.other     { background: rgba(120,120,120,0.15); color: #aaa; }
html[data-theme="cyberpunk"] .activity-log-table tr { background: #0f1117; border-color: #00ff4133; }
html[data-theme="cyberpunk"] .activity-log-search,
html[data-theme="cyberpunk"] .activity-log-date-filter input[type="date"] {
  background: #1a1d29;
  border-color: #00ff4133;
  color: #e0e0e0;
}
html[data-theme="cyberpunk"] .activity-log-clear-btn {
  background: transparent;
  border-color: #00ff4133;
  color: #00ff41;
}

/* ── jarvis (dark) ──────────────────────────────────────────────────────── */
html[data-theme="jarvis"] .activity-log-table-wrapper {
  background: #0d1526;
  border-color: #1e4a8033;
}
html[data-theme="jarvis"] .activity-log-table thead { background: #111e35; }
html[data-theme="jarvis"] .activity-log-table th { color: #5b8dbbaa; border-bottom-color: #1e4a8033; }
html[data-theme="jarvis"] .activity-log-table td { border-bottom-color: #1e4a8015; color: #c8d8f0; }
html[data-theme="jarvis"] .activity-log-table tbody tr:hover { background: #1e4a8010; }
html[data-theme="jarvis"] .action-badge.user    { background: rgba(91,141,187,0.2); color: #5b8dbb; }
html[data-theme="jarvis"] .action-badge.theme   { background: rgba(120,80,200,0.2); color: #9b6ee0; }
html[data-theme="jarvis"] .action-badge.sync    { background: rgba(30,200,150,0.2); color: #1ec896; }
html[data-theme="jarvis"] .action-badge.role    { background: rgba(220,130,50,0.2); color: #dc8232; }
html[data-theme="jarvis"] .action-badge.brand   { background: rgba(200,200,60,0.2); color: #c8c83c; }
html[data-theme="jarvis"] .action-badge.report  { background: rgba(0,180,230,0.2);  color: #00b4e6; }
html[data-theme="jarvis"] .action-badge.setting   { background: rgba(140,160,190,0.15); color: #8ca0be; }
html[data-theme="jarvis"] .action-badge.inventory { background: rgba(30,200,140,0.2);   color: #1ec88c; }
html[data-theme="jarvis"] .action-badge.pos       { background: rgba(200,80,180,0.2);   color: #d060c0; }
html[data-theme="jarvis"] .action-badge.other     { background: rgba(100,120,160,0.15); color: #9aadcc; }
html[data-theme="jarvis"] .activity-log-table tr { background: #0d1526; border-color: #1e4a8033; }
html[data-theme="jarvis"] .activity-log-search,
html[data-theme="jarvis"] .activity-log-date-filter input[type="date"] {
  background: #111e35;
  border-color: #1e4a8033;
  color: #c8d8f0;
}
html[data-theme="jarvis"] .activity-log-clear-btn {
  background: transparent;
  border-color: #1e4a8055;
  color: #5b8dbb;
}

/* ── rock (dark) ────────────────────────────────────────────────────────── */
html[data-theme="rock"] .activity-log-table-wrapper {
  background: #0a0a0a;
  border-color: #8b000033;
}
html[data-theme="rock"] .activity-log-table thead { background: #111; }
html[data-theme="rock"] .activity-log-table th { color: #8b0000aa; border-bottom-color: #8b000033; }
html[data-theme="rock"] .activity-log-table td { border-bottom-color: #8b000015; color: #e0d0d0; }
html[data-theme="rock"] .activity-log-table tbody tr:hover { background: #8b000010; }
html[data-theme="rock"] .action-badge.user    { background: rgba(139,0,0,0.2);    color: #cc4444; }
html[data-theme="rock"] .action-badge.theme   { background: rgba(120,40,160,0.2); color: #c080e0; }
html[data-theme="rock"] .action-badge.sync    { background: rgba(60,160,80,0.2);  color: #60c878; }
html[data-theme="rock"] .action-badge.role    { background: rgba(200,100,30,0.2); color: #e07830; }
html[data-theme="rock"] .action-badge.brand   { background: rgba(200,160,30,0.2); color: #c8a030; }
html[data-theme="rock"] .action-badge.report  { background: rgba(30,140,200,0.2); color: #3090cc; }
html[data-theme="rock"] .action-badge.setting   { background: rgba(160,140,140,0.15); color: #c0a8a8; }
html[data-theme="rock"] .action-badge.inventory { background: rgba(60,160,80,0.2);    color: #60c878; }
html[data-theme="rock"] .action-badge.pos       { background: rgba(180,40,140,0.2);   color: #e060c0; }
html[data-theme="rock"] .action-badge.other     { background: rgba(120,100,100,0.15); color: #b09090; }
html[data-theme="rock"] .activity-log-table tr { background: #0a0a0a; border-color: #8b000033; }
html[data-theme="rock"] .activity-log-search,
html[data-theme="rock"] .activity-log-date-filter input[type="date"] {
  background: #111;
  border-color: #8b000033;
  color: #e0d0d0;
}
html[data-theme="rock"] .activity-log-clear-btn {
  background: transparent;
  border-color: #8b000055;
  color: #cc4444;
}

/* ── golden (dark) ──────────────────────────────────────────────────────── */
html[data-theme="golden"] .activity-log-table-wrapper {
  background: #1a1608;
  border-color: #d4af3733;
}
html[data-theme="golden"] .activity-log-table thead { background: #221e0a; }
html[data-theme="golden"] .activity-log-table th { color: #d4af37aa; border-bottom-color: #d4af3733; }
html[data-theme="golden"] .activity-log-table td { border-bottom-color: #d4af3715; color: #f5e8c8; }
html[data-theme="golden"] .activity-log-table tbody tr:hover { background: #d4af3710; }
html[data-theme="golden"] .action-badge.user    { background: rgba(212,175,55,0.2);  color: #d4af37; }
html[data-theme="golden"] .action-badge.theme   { background: rgba(180,100,200,0.2); color: #c078d8; }
html[data-theme="golden"] .action-badge.sync    { background: rgba(80,180,100,0.2);  color: #70c888; }
html[data-theme="golden"] .action-badge.role    { background: rgba(201,124,93,0.2);  color: #c97c5d; }
html[data-theme="golden"] .action-badge.brand   { background: rgba(212,175,55,0.15); color: #e8c84a; }
html[data-theme="golden"] .action-badge.report  { background: rgba(80,160,220,0.2);  color: #60b8e8; }
html[data-theme="golden"] .action-badge.setting   { background: rgba(160,150,120,0.15); color: #c8b890; }
html[data-theme="golden"] .action-badge.inventory { background: rgba(80,180,120,0.2);   color: #70c890; }
html[data-theme="golden"] .action-badge.pos       { background: rgba(212,100,160,0.2);  color: #e080c0; }
html[data-theme="golden"] .action-badge.other     { background: rgba(120,110,80,0.15);  color: #b0a070; }
html[data-theme="golden"] .activity-log-table tr { background: #1a1608; border-color: #d4af3733; }
html[data-theme="golden"] .activity-log-search,
html[data-theme="golden"] .activity-log-date-filter input[type="date"] {
  background: #221e0a;
  border-color: #d4af3733;
  color: #f5e8c8;
}
html[data-theme="golden"] .activity-log-clear-btn {
  background: transparent;
  border-color: #d4af3755;
  color: #d4af37;
}

/* ── parchment (light) — slight warm tint on badges ────────────────────── */
html[data-theme="parchment"] .activity-log-table-wrapper {
  background: #fdf8ef;
  border-color: #c9b89a55;
}
html[data-theme="parchment"] .activity-log-table thead { background: #f5ede0; }
html[data-theme="parchment"] .activity-log-table th { color: #8b6e4e; border-bottom-color: #c9b89a55; }
html[data-theme="parchment"] .activity-log-table td { border-bottom-color: #c9b89a33; }
html[data-theme="parchment"] .activity-log-table tbody tr:hover { background: #f0e8d8; }
html[data-theme="parchment"] .activity-log-search,
html[data-theme="parchment"] .activity-log-date-filter input[type="date"] {
  background: #fdf8ef;
  border-color: #c9b89a;
  color: #4a3728;
}
html[data-theme="parchment"] .activity-log-clear-btn {
  border-color: #c9b89a;
  color: #8b6e4e;
}

/* ── pop (light) — keep badges vibrant on pink background ──────────────── */
html[data-theme="pop"] .activity-log-table-wrapper {
  background: #ffffff;
  border-color: #f0d6e8;
}
html[data-theme="pop"] .activity-log-table thead { background: #fdf2f8; }
html[data-theme="pop"] .activity-log-table th { color: #9d174d; border-bottom-color: #f0d6e8; }
html[data-theme="pop"] .activity-log-table td { border-bottom-color: #fce7f3; }
html[data-theme="pop"] .activity-log-table tbody tr:hover { background: #fdf2f8; }
html[data-theme="pop"] .activity-log-search,
html[data-theme="pop"] .activity-log-date-filter input[type="date"] {
  background: #fff;
  border-color: #f0d6e8;
  color: #4a0030;
}
html[data-theme="pop"] .activity-log-clear-btn {
  border-color: #f0d6e8;
  color: #9d174d;
}

/* ── allwhite (light) — pure grayscale ──────────────────────────────────── */
html[data-theme="allwhite"] .activity-log-table-wrapper {
  background: #ffffff;
  border-color: #e5e7eb;
}
html[data-theme="allwhite"] .action-badge.user    { background: #f1f5f9; color: #374151; }
html[data-theme="allwhite"] .action-badge.theme   { background: #f1f5f9; color: #374151; }
html[data-theme="allwhite"] .action-badge.sync    { background: #f1f5f9; color: #374151; }
html[data-theme="allwhite"] .action-badge.role    { background: #f1f5f9; color: #374151; }
html[data-theme="allwhite"] .action-badge.brand   { background: #f1f5f9; color: #374151; }
html[data-theme="allwhite"] .action-badge.report  { background: #f1f5f9; color: #374151; }
html[data-theme="allwhite"] .action-badge.setting   { background: #f1f5f9; color: #374151; }
html[data-theme="allwhite"] .action-badge.inventory { background: #f1f5f9; color: #374151; }
html[data-theme="allwhite"] .action-badge.pos       { background: #f1f5f9; color: #374151; }
html[data-theme="allwhite"] .action-badge.other     { background: #f1f5f9; color: #374151; }

/* ═══════════════════════════════════════════════════════════════════════════
   GLOBAL FORM CONTROL THEMING — checkboxes, radios, selects
   Applied globally so every component inherits the correct style per theme.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Dark themes: render unchecked state with dark background */
html[data-theme="cyberpunk"] input[type='checkbox'],
html[data-theme="cyberpunk"] input[type='radio'] {
  color-scheme: dark;
  accent-color: #00ff88;
}

html[data-theme="jarvis"] input[type='checkbox'],
html[data-theme="jarvis"] input[type='radio'] {
  color-scheme: dark;
  accent-color: #60a5fa;
}

html[data-theme="rock"] input[type='checkbox'],
html[data-theme="rock"] input[type='radio'] {
  color-scheme: dark;
  accent-color: #ff4444;
}

html[data-theme="golden"] input[type='checkbox'],
html[data-theme="golden"] input[type='radio'] {
  color-scheme: dark;
  accent-color: #f5c842;
}

/* Light themes: explicit accent color so checkmarks match the theme */
html[data-theme="parchment"] input[type='checkbox'],
html[data-theme="parchment"] input[type='radio'] {
  accent-color: #b8860b;
}

html[data-theme="pop"] input[type='checkbox'],
html[data-theme="pop"] input[type='radio'] {
  accent-color: #ff1493;
}

html[data-theme="allwhite"] input[type='checkbox'],
html[data-theme="allwhite"] input[type='radio'] {
  accent-color: #6b7280;
}

/* Global: text inputs, selects — ensure they always use theme tokens */
input[type='text'],
input[type='search'],
input[type='email'],
input[type='password'],
input[type='number'],
input[type='date'],
input[type='month'],
textarea,
select {
  background: var(--input-bg, #ffffff);
  color: var(--text-primary, #111827);
  border-color: var(--border-color, #d1d5db);
}

/* color-scheme per theme — makes the native date-picker calendar icon
   and the select dropdown option list match the current theme.
   Without this the browser renders the widget chrome in OS default mode
   (usually light), which causes invisible text on dark-bg inputs.        */

html[data-theme="cyberpunk"] input[type='date'],
html[data-theme="cyberpunk"] input[type='month'],
html[data-theme="cyberpunk"] select {
  color-scheme: dark;
}

html[data-theme="jarvis"] input[type='date'],
html[data-theme="jarvis"] input[type='month'],
html[data-theme="jarvis"] select {
  color-scheme: dark;
}

html[data-theme="rock"] input[type='date'],
html[data-theme="rock"] input[type='month'],
html[data-theme="rock"] select {
  color-scheme: dark;
}

html[data-theme="golden"] input[type='date'],
html[data-theme="golden"] input[type='month'],
html[data-theme="golden"] select {
  color-scheme: dark;
}

html[data-theme="default"] input[type='date'],
html[data-theme="default"] input[type='month'],
html[data-theme="default"] select,
html[data-theme="parchment"] input[type='date'],
html[data-theme="parchment"] input[type='month'],
html[data-theme="parchment"] select,
html[data-theme="pop"] input[type='date'],
html[data-theme="pop"] input[type='month'],
html[data-theme="pop"] select,
html[data-theme="allwhite"] input[type='date'],
html[data-theme="allwhite"] input[type='month'],
html[data-theme="allwhite"] select {
  color-scheme: light;
}

/* ── Dark theme: force explicit bg/color on selects & date inputs
   (some browsers ignore CSS vars on native widgets without the above) ── */

html[data-theme="cyberpunk"] input[type='date'],
html[data-theme="cyberpunk"] input[type='month'],
html[data-theme="cyberpunk"] select {
  background: var(--input-bg);
  color: var(--text-primary);
  border-color: var(--border-color);
}

html[data-theme="jarvis"] input[type='date'],
html[data-theme="jarvis"] input[type='month'],
html[data-theme="jarvis"] select {
  background: var(--input-bg);
  color: var(--text-primary);
  border-color: var(--border-color);
}

html[data-theme="rock"] input[type='date'],
html[data-theme="rock"] input[type='month'],
html[data-theme="rock"] select {
  background: var(--input-bg);
  color: var(--text-primary);
  border-color: var(--border-color);
}

html[data-theme="golden"] input[type='date'],
html[data-theme="golden"] input[type='month'],
html[data-theme="golden"] select {
  background: var(--input-bg);
  color: var(--text-primary);
  border-color: var(--border-color);
}

/* ═══════════════════════════════════════════════════════
   POS THEME OVERRIDES
   Applies to: .pos-page, .pos-product-card, .pos-cart-panel,
   .pos-receipt, and checkout step elements.
   All 8 themes covered below.
   ═══════════════════════════════════════════════════════ */

/* ── cyberpunk ─── */
html[data-theme="cyberpunk"] .pos-page,
html[data-theme="cyberpunk"] .pos-receipt {
  background: #0a0e1a;
  color: #00ff88;
}
html[data-theme="cyberpunk"] .pos-header {
  background: #0d1220;
  border-color: #00ff8833;
}
html[data-theme="cyberpunk"] .pos-products,
html[data-theme="cyberpunk"] .pos-cart-panel {
  background: #0a0e1a;
}
html[data-theme="cyberpunk"] .pos-tabs { background: #0d1220; }
html[data-theme="cyberpunk"] .pos-tab { color: #00cc66; }
html[data-theme="cyberpunk"] .pos-tab.active { color: #00ff88; border-bottom-color: #00ff88; background: #0a0e1a; }
html[data-theme="cyberpunk"] .pos-search-bar { background: #0d1220; border-color: #00ff8833; }
html[data-theme="cyberpunk"] .pos-scanner-strip { background: #0d1220; border-color: #00ff8822; }
html[data-theme="cyberpunk"] .scanner-strip-hint { color: #00ff8880; }
html[data-theme="cyberpunk"] .pos-scanner-strip.scan-found     { background: rgba(0,255,65,0.10);  border-color: #00ff41; }
html[data-theme="cyberpunk"] .pos-scanner-strip.scan-not-found { background: rgba(255,60,60,0.10); border-color: #ff4040; }
html[data-theme="cyberpunk"] .scanner-strip-feedback.found     { color: #00ff41; }
html[data-theme="cyberpunk"] .scanner-strip-feedback.not-found { color: #ff4040; }
html[data-theme="cyberpunk"] .pos-search-input { background: #0a0e1a; border-color: #00ff8844; color: #00ff88; }
html[data-theme="cyberpunk"] .pos-product-card { background: #0d1220; border-color: #00ff8822; color: #00ff88; }
html[data-theme="cyberpunk"] .pos-product-card:hover:not(:disabled) { border-color: #00ff88; box-shadow: 0 0 14px #00ff8840; }
html[data-theme="cyberpunk"] .pos-product-name { color: #e0ffe8; }
html[data-theme="cyberpunk"] .pos-product-price { color: #00ff88; }
html[data-theme="cyberpunk"] .pos-cart-header,
html[data-theme="cyberpunk"] .pos-cart-item { color: #00ff88; }
html[data-theme="cyberpunk"] .pos-cart-item { background: #0d1220; border-color: #00ff8822; }
html[data-theme="cyberpunk"] .cart-item-name { color: #e0ffe8; }
html[data-theme="cyberpunk"] .cart-item-qty span { background: #0a0e1a; color: #00ff88; }
html[data-theme="cyberpunk"] .cart-item-qty button { background: #0d1220; color: #00ff88; }
html[data-theme="cyberpunk"] .cart-item-subtotal { color: #00ff88; }
html[data-theme="cyberpunk"] .pos-btn.primary { background: #00ff88; color: #0a0e1a; }
html[data-theme="cyberpunk"] .pos-btn.success { background: #00cc66; color: #0a0e1a; }
html[data-theme="cyberpunk"] .pos-btn.secondary { background: #0d1220; color: #00ff88; border-color: #00ff8844; }
html[data-theme="cyberpunk"] .delivery-btn,
html[data-theme="cyberpunk"] .payment-btn { background: #0d1220; color: #00ff88; border-color: #00ff8833; }
html[data-theme="cyberpunk"] .delivery-btn.active,
html[data-theme="cyberpunk"] .payment-btn.active { background: #00ff88; color: #0a0e1a; border-color: #00ff88; }
html[data-theme="cyberpunk"] .confirm-summary { background: #0d1220; border-color: #00ff8822; }
html[data-theme="cyberpunk"] .confirm-row { color: #00ff88; }
html[data-theme="cyberpunk"] .confirm-row.total { color: #00ff88; }
html[data-theme="cyberpunk"] .receipt-details,
html[data-theme="cyberpunk"] .receipt-items { background: #0d1220; }
html[data-theme="cyberpunk"] .receipt-header h1 { color: #00ff88; }
html[data-theme="cyberpunk"] .receipt-row { color: #00ff88; border-color: #00ff8822; }
html[data-theme="cyberpunk"] .pos-checkout-step h3,
html[data-theme="cyberpunk"] .pos-checkout-step h4 { color: #00ff88; }
html[data-theme="cyberpunk"] .customer-form input,
html[data-theme="cyberpunk"] .customer-form select { background: #0a0e1a; border-color: #00ff8833; color: #00ff88; }
html[data-theme="cyberpunk"] .summary-row { color: #00ff88; }
html[data-theme="cyberpunk"] .summary-row.total-row { color: #00ff88; border-color: #00ff8833; }
html[data-theme="cyberpunk"] .discount-input-wrap input { background: #0a0e1a; border-color: #00ff8833; color: #00ff88; }

/* ── jarvis ─── */
html[data-theme="jarvis"] .pos-page,
html[data-theme="jarvis"] .pos-receipt {
  background: #0a0f1e;
  color: #60afff;
}
html[data-theme="jarvis"] .pos-header { background: #0d1428; border-color: #1e3a5f; }
html[data-theme="jarvis"] .pos-products,
html[data-theme="jarvis"] .pos-cart-panel { background: #0a0f1e; }
html[data-theme="jarvis"] .pos-tabs { background: #0d1428; }
html[data-theme="jarvis"] .pos-tab { color: #4a8fc4; }
html[data-theme="jarvis"] .pos-tab.active { color: #60afff; border-bottom-color: #60afff; background: #0a0f1e; }
html[data-theme="jarvis"] .pos-search-bar { background: #0d1428; border-color: #1e3a5f; }
html[data-theme="jarvis"] .pos-scanner-strip { background: #0d1428; border-color: #1e3a5f55; }
html[data-theme="jarvis"] .scanner-strip-hint { color: #60afff80; }
html[data-theme="jarvis"] .pos-scanner-strip.scan-found     { background: rgba(30,200,150,0.10); border-color: #1ec896; }
html[data-theme="jarvis"] .pos-scanner-strip.scan-not-found { background: rgba(255,60,60,0.10);  border-color: #ff6060; }
html[data-theme="jarvis"] .scanner-strip-feedback.found     { color: #1ec896; }
html[data-theme="jarvis"] .scanner-strip-feedback.not-found { color: #ff6060; }
html[data-theme="jarvis"] .pos-search-input { background: #0a0f1e; border-color: #1e3a5f; color: #60afff; }
html[data-theme="jarvis"] .pos-product-card { background: #0d1428; border-color: #1e3a5f; color: #60afff; }
html[data-theme="jarvis"] .pos-product-card:hover:not(:disabled) { border-color: #60afff; box-shadow: 0 0 14px #60afff30; }
html[data-theme="jarvis"] .pos-product-name { color: #b8d4ff; }
html[data-theme="jarvis"] .pos-product-price { color: #60afff; }
html[data-theme="jarvis"] .pos-cart-item { background: #0d1428; border-color: #1e3a5f; }
html[data-theme="jarvis"] .cart-item-name { color: #b8d4ff; }
html[data-theme="jarvis"] .cart-item-qty span { background: #0a0f1e; color: #60afff; }
html[data-theme="jarvis"] .cart-item-qty button { background: #0d1428; color: #60afff; }
html[data-theme="jarvis"] .cart-item-subtotal { color: #60afff; }
html[data-theme="jarvis"] .pos-btn.primary { background: #1976d2; color: #fff; }
html[data-theme="jarvis"] .pos-btn.success { background: #0f9d58; color: #fff; }
html[data-theme="jarvis"] .pos-btn.secondary { background: #0d1428; color: #60afff; border-color: #1e3a5f; }
html[data-theme="jarvis"] .delivery-btn,
html[data-theme="jarvis"] .payment-btn { background: #0d1428; color: #60afff; border-color: #1e3a5f; }
html[data-theme="jarvis"] .delivery-btn.active,
html[data-theme="jarvis"] .payment-btn.active { background: #1976d2; color: #fff; border-color: #1976d2; }
html[data-theme="jarvis"] .confirm-summary { background: #0d1428; border-color: #1e3a5f; }
html[data-theme="jarvis"] .confirm-row { color: #60afff; }
html[data-theme="jarvis"] .receipt-details,
html[data-theme="jarvis"] .receipt-items { background: #0d1428; }
html[data-theme="jarvis"] .receipt-header h1 { color: #60afff; }
html[data-theme="jarvis"] .receipt-row { color: #60afff; border-color: #1e3a5f; }
html[data-theme="jarvis"] .pos-checkout-step h3,
html[data-theme="jarvis"] .pos-checkout-step h4 { color: #60afff; }
html[data-theme="jarvis"] .customer-form input,
html[data-theme="jarvis"] .customer-form select { background: #0a0f1e; border-color: #1e3a5f; color: #60afff; }
html[data-theme="jarvis"] .summary-row { color: #60afff; }
html[data-theme="jarvis"] .discount-input-wrap input { background: #0a0f1e; border-color: #1e3a5f; color: #60afff; }

/* ── parchment ─── */
html[data-theme="parchment"] .pos-page,
html[data-theme="parchment"] .pos-receipt { background: #fdf6e3; color: #3d2b1a; }
html[data-theme="parchment"] .pos-header { background: #f5e6c8; border-color: #c8a96e; }
html[data-theme="parchment"] .pos-products,
html[data-theme="parchment"] .pos-cart-panel { background: #fdf6e3; }
html[data-theme="parchment"] .pos-tabs { background: #f5e6c8; }
html[data-theme="parchment"] .pos-tab { color: #7a5c3a; }
html[data-theme="parchment"] .pos-tab.active { color: #3d2b1a; border-bottom-color: #8b5e3c; background: #fdf6e3; }
html[data-theme="parchment"] .pos-search-bar { background: #f5e6c8; border-color: #c8a96e; }
html[data-theme="parchment"] .pos-search-input { background: #fdf6e3; border-color: #c8a96e; color: #3d2b1a; }
html[data-theme="parchment"] .pos-product-card { background: #faeecf; border-color: #d4b483; color: #3d2b1a; }
html[data-theme="parchment"] .pos-product-card:hover:not(:disabled) { border-color: #8b5e3c; }
html[data-theme="parchment"] .pos-product-name { color: #3d2b1a; }
html[data-theme="parchment"] .pos-product-price { color: #8b5e3c; }
html[data-theme="parchment"] .pos-cart-item { background: #faeecf; border-color: #d4b483; }
html[data-theme="parchment"] .cart-item-name { color: #3d2b1a; }
html[data-theme="parchment"] .cart-item-qty span { background: #fdf6e3; color: #3d2b1a; }
html[data-theme="parchment"] .cart-item-qty button { background: #f5e6c8; color: #3d2b1a; }
html[data-theme="parchment"] .cart-item-subtotal { color: #8b5e3c; }
html[data-theme="parchment"] .pos-btn.primary { background: #8b5e3c; color: #fff; }
html[data-theme="parchment"] .pos-btn.secondary { background: #faeecf; color: #3d2b1a; border-color: #c8a96e; }
html[data-theme="parchment"] .delivery-btn,
html[data-theme="parchment"] .payment-btn { background: #faeecf; color: #3d2b1a; border-color: #c8a96e; }
html[data-theme="parchment"] .delivery-btn.active,
html[data-theme="parchment"] .payment-btn.active { background: #8b5e3c; color: #fff; border-color: #8b5e3c; }
html[data-theme="parchment"] .confirm-summary { background: #faeecf; border-color: #d4b483; }
html[data-theme="parchment"] .confirm-row { color: #3d2b1a; }
html[data-theme="parchment"] .receipt-details,
html[data-theme="parchment"] .receipt-items { background: #f5e6c8; }
html[data-theme="parchment"] .receipt-header h1 { color: #3d2b1a; }
html[data-theme="parchment"] .receipt-row { color: #3d2b1a; border-color: #c8a96e; }
html[data-theme="parchment"] .customer-form input,
html[data-theme="parchment"] .customer-form select { background: #fdf6e3; border-color: #c8a96e; color: #3d2b1a; }
html[data-theme="parchment"] .summary-row { color: #3d2b1a; }
html[data-theme="parchment"] .discount-input-wrap input { background: #fdf6e3; border-color: #c8a96e; color: #3d2b1a; }

/* ── rock ─── */
html[data-theme="rock"] .pos-page,
html[data-theme="rock"] .pos-receipt { background: #0a0000; color: #ff4444; }
html[data-theme="rock"] .pos-header { background: #130000; border-color: #3d0000; }
html[data-theme="rock"] .pos-products,
html[data-theme="rock"] .pos-cart-panel { background: #0a0000; }
html[data-theme="rock"] .pos-tabs { background: #130000; }
html[data-theme="rock"] .pos-tab { color: #cc2222; }
html[data-theme="rock"] .pos-tab.active { color: #ff4444; border-bottom-color: #ff4444; background: #0a0000; }
html[data-theme="rock"] .pos-search-bar { background: #130000; border-color: #3d0000; }
html[data-theme="rock"] .pos-scanner-strip { background: #130000; border-color: #3d000055; }
html[data-theme="rock"] .scanner-strip-hint { color: #ff666680; }
html[data-theme="rock"] .pos-scanner-strip.scan-found     { background: rgba(60,160,80,0.10);  border-color: #60c878; }
html[data-theme="rock"] .pos-scanner-strip.scan-not-found { background: rgba(255,60,60,0.10);  border-color: #ff6666; }
html[data-theme="rock"] .scanner-strip-feedback.found     { color: #60c878; }
html[data-theme="rock"] .scanner-strip-feedback.not-found { color: #ff6666; }
html[data-theme="rock"] .pos-search-input { background: #0a0000; border-color: #3d0000; color: #ff6666; }
html[data-theme="rock"] .pos-product-card { background: #130000; border-color: #3d0000; color: #ff6666; }
html[data-theme="rock"] .pos-product-card:hover:not(:disabled) { border-color: #ff4444; box-shadow: 0 0 10px #ff444430; }
html[data-theme="rock"] .pos-product-name { color: #ffaaaa; }
html[data-theme="rock"] .pos-product-price { color: #ff4444; }
html[data-theme="rock"] .pos-cart-item { background: #130000; border-color: #3d0000; }
html[data-theme="rock"] .cart-item-name { color: #ffaaaa; }
html[data-theme="rock"] .cart-item-qty span { background: #0a0000; color: #ff6666; }
html[data-theme="rock"] .cart-item-qty button { background: #130000; color: #ff6666; }
html[data-theme="rock"] .cart-item-subtotal { color: #ff4444; }
html[data-theme="rock"] .pos-btn.primary { background: #cc0000; color: #fff; }
html[data-theme="rock"] .pos-btn.success { background: #aa0000; color: #fff; }
html[data-theme="rock"] .pos-btn.secondary { background: #130000; color: #ff6666; border-color: #3d0000; }
html[data-theme="rock"] .delivery-btn,
html[data-theme="rock"] .payment-btn { background: #130000; color: #ff6666; border-color: #3d0000; }
html[data-theme="rock"] .delivery-btn.active,
html[data-theme="rock"] .payment-btn.active { background: #cc0000; color: #fff; border-color: #cc0000; }
html[data-theme="rock"] .confirm-summary { background: #130000; border-color: #3d0000; }
html[data-theme="rock"] .confirm-row { color: #ff6666; }
html[data-theme="rock"] .receipt-details,
html[data-theme="rock"] .receipt-items { background: #130000; }
html[data-theme="rock"] .receipt-header h1 { color: #ff4444; }
html[data-theme="rock"] .receipt-row { color: #ff6666; border-color: #3d0000; }
html[data-theme="rock"] .customer-form input,
html[data-theme="rock"] .customer-form select { background: #0a0000; border-color: #3d0000; color: #ff6666; }
html[data-theme="rock"] .summary-row { color: #ff6666; }
html[data-theme="rock"] .discount-input-wrap input { background: #0a0000; border-color: #3d0000; color: #ff6666; }

/* ── pop ─── */
html[data-theme="pop"] .pos-page,
html[data-theme="pop"] .pos-receipt { background: #fef7ff; color: #4a004a; }
html[data-theme="pop"] .pos-header { background: #f8e8ff; border-color: #d4a0e0; }
html[data-theme="pop"] .pos-products,
html[data-theme="pop"] .pos-cart-panel { background: #fef7ff; }
html[data-theme="pop"] .pos-tabs { background: #f8e8ff; }
html[data-theme="pop"] .pos-tab { color: #9932cc; }
html[data-theme="pop"] .pos-tab.active { color: #6600aa; border-bottom-color: #cc44ff; background: #fef7ff; }
html[data-theme="pop"] .pos-search-bar { background: #f8e8ff; border-color: #d4a0e0; }
html[data-theme="pop"] .pos-search-input { background: #fef7ff; border-color: #d4a0e0; color: #4a004a; }
html[data-theme="pop"] .pos-product-card { background: #fce8ff; border-color: #e0b0f0; color: #4a004a; }
html[data-theme="pop"] .pos-product-card:hover:not(:disabled) { border-color: #cc44ff; }
html[data-theme="pop"] .pos-product-name { color: #4a004a; }
html[data-theme="pop"] .pos-product-price { color: #9932cc; }
html[data-theme="pop"] .pos-cart-item { background: #fce8ff; border-color: #e0b0f0; }
html[data-theme="pop"] .cart-item-name { color: #4a004a; }
html[data-theme="pop"] .cart-item-qty span { background: #fef7ff; color: #4a004a; }
html[data-theme="pop"] .cart-item-qty button { background: #f8e8ff; color: #4a004a; }
html[data-theme="pop"] .cart-item-subtotal { color: #9932cc; }
html[data-theme="pop"] .pos-btn.primary { background: #9932cc; color: #fff; }
html[data-theme="pop"] .pos-btn.secondary { background: #fce8ff; color: #4a004a; border-color: #d4a0e0; }
html[data-theme="pop"] .delivery-btn,
html[data-theme="pop"] .payment-btn { background: #fce8ff; color: #4a004a; border-color: #d4a0e0; }
html[data-theme="pop"] .delivery-btn.active,
html[data-theme="pop"] .payment-btn.active { background: #9932cc; color: #fff; border-color: #9932cc; }
html[data-theme="pop"] .confirm-summary { background: #fce8ff; border-color: #e0b0f0; }
html[data-theme="pop"] .confirm-row { color: #4a004a; }
html[data-theme="pop"] .receipt-details,
html[data-theme="pop"] .receipt-items { background: #f8e8ff; }
html[data-theme="pop"] .receipt-header h1 { color: #4a004a; }
html[data-theme="pop"] .receipt-row { color: #4a004a; border-color: #d4a0e0; }
html[data-theme="pop"] .customer-form input,
html[data-theme="pop"] .customer-form select { background: #fef7ff; border-color: #d4a0e0; color: #4a004a; }
html[data-theme="pop"] .summary-row { color: #4a004a; }
html[data-theme="pop"] .discount-input-wrap input { background: #fef7ff; border-color: #d4a0e0; color: #4a004a; }

/* ── allwhite ─── */
html[data-theme="allwhite"] .pos-page,
html[data-theme="allwhite"] .pos-receipt { background: #ffffff; color: #111827; }
html[data-theme="allwhite"] .pos-header { background: #f9fafb; border-color: #e5e7eb; }
html[data-theme="allwhite"] .pos-products,
html[data-theme="allwhite"] .pos-cart-panel { background: #ffffff; }
html[data-theme="allwhite"] .pos-tabs { background: #f9fafb; }
html[data-theme="allwhite"] .pos-tab { color: #6b7280; }
html[data-theme="allwhite"] .pos-tab.active { color: #111827; border-bottom-color: #374151; background: #ffffff; }
html[data-theme="allwhite"] .pos-search-bar { background: #f9fafb; border-color: #e5e7eb; }
html[data-theme="allwhite"] .pos-search-input { background: #ffffff; border-color: #d1d5db; color: #111827; }
html[data-theme="allwhite"] .pos-product-card { background: #f9fafb; border-color: #e5e7eb; color: #111827; }
html[data-theme="allwhite"] .pos-product-card:hover:not(:disabled) { border-color: #374151; }
html[data-theme="allwhite"] .pos-product-name { color: #111827; }
html[data-theme="allwhite"] .pos-product-price { color: #374151; }
html[data-theme="allwhite"] .pos-cart-item { background: #f9fafb; border-color: #e5e7eb; }
html[data-theme="allwhite"] .cart-item-name { color: #111827; }
html[data-theme="allwhite"] .cart-item-qty span { background: #ffffff; color: #111827; }
html[data-theme="allwhite"] .cart-item-qty button { background: #f9fafb; color: #374151; }
html[data-theme="allwhite"] .cart-item-subtotal { color: #374151; }
html[data-theme="allwhite"] .pos-btn.primary { background: #374151; color: #fff; }
html[data-theme="allwhite"] .pos-btn.secondary { background: #f9fafb; color: #374151; border-color: #e5e7eb; }
html[data-theme="allwhite"] .delivery-btn,
html[data-theme="allwhite"] .payment-btn { background: #f9fafb; color: #374151; border-color: #e5e7eb; }
html[data-theme="allwhite"] .delivery-btn.active,
html[data-theme="allwhite"] .payment-btn.active { background: #374151; color: #fff; border-color: #374151; }
html[data-theme="allwhite"] .confirm-summary { background: #f9fafb; border-color: #e5e7eb; }
html[data-theme="allwhite"] .confirm-row { color: #111827; }
html[data-theme="allwhite"] .receipt-details,
html[data-theme="allwhite"] .receipt-items { background: #f9fafb; }
html[data-theme="allwhite"] .receipt-header h1 { color: #111827; }
html[data-theme="allwhite"] .receipt-row { color: #111827; border-color: #e5e7eb; }
html[data-theme="allwhite"] .customer-form input,
html[data-theme="allwhite"] .customer-form select { background: #ffffff; border-color: #d1d5db; color: #111827; }
html[data-theme="allwhite"] .summary-row { color: #111827; }
html[data-theme="allwhite"] .discount-input-wrap input { background: #ffffff; border-color: #d1d5db; color: #111827; }

/* ── golden ─── */
html[data-theme="golden"] .pos-page,
html[data-theme="golden"] .pos-receipt { background: #0e0c00; color: #f0c040; }
html[data-theme="golden"] .pos-header { background: #1a1500; border-color: #3d3000; }
html[data-theme="golden"] .pos-products,
html[data-theme="golden"] .pos-cart-panel { background: #0e0c00; }
html[data-theme="golden"] .pos-tabs { background: #1a1500; }
html[data-theme="golden"] .pos-tab { color: #c8a000; }
html[data-theme="golden"] .pos-tab.active { color: #f0c040; border-bottom-color: #f0c040; background: #0e0c00; }
html[data-theme="golden"] .pos-search-bar { background: #1a1500; border-color: #3d3000; }
html[data-theme="golden"] .pos-scanner-strip { background: #1a1500; border-color: #3d300055; }
html[data-theme="golden"] .scanner-strip-hint { color: #f0c04070; }
html[data-theme="golden"] .pos-scanner-strip.scan-found     { background: rgba(80,180,120,0.10); border-color: #70c890; }
html[data-theme="golden"] .pos-scanner-strip.scan-not-found { background: rgba(255,80,80,0.10);  border-color: #ff8080; }
html[data-theme="golden"] .scanner-strip-feedback.found     { color: #70c890; }
html[data-theme="golden"] .scanner-strip-feedback.not-found { color: #ff8080; }
html[data-theme="golden"] .pos-search-input { background: #0e0c00; border-color: #3d3000; color: #f0c040; }
html[data-theme="golden"] .pos-product-card { background: #1a1500; border-color: #3d3000; color: #f0c040; }
html[data-theme="golden"] .pos-product-card:hover:not(:disabled) { border-color: #f0c040; box-shadow: 0 0 12px #f0c04030; }
html[data-theme="golden"] .pos-product-name { color: #ffe080; }
html[data-theme="golden"] .pos-product-price { color: #f0c040; }
html[data-theme="golden"] .pos-cart-item { background: #1a1500; border-color: #3d3000; }
html[data-theme="golden"] .cart-item-name { color: #ffe080; }
html[data-theme="golden"] .cart-item-qty span { background: #0e0c00; color: #f0c040; }
html[data-theme="golden"] .cart-item-qty button { background: #1a1500; color: #f0c040; }
html[data-theme="golden"] .cart-item-subtotal { color: #f0c040; }
html[data-theme="golden"] .pos-btn.primary { background: #c8a000; color: #0e0c00; }
html[data-theme="golden"] .pos-btn.success { background: #a07a00; color: #ffe080; }
html[data-theme="golden"] .pos-btn.secondary { background: #1a1500; color: #f0c040; border-color: #3d3000; }
html[data-theme="golden"] .delivery-btn,
html[data-theme="golden"] .payment-btn { background: #1a1500; color: #f0c040; border-color: #3d3000; }
html[data-theme="golden"] .delivery-btn.active,
html[data-theme="golden"] .payment-btn.active { background: #c8a000; color: #0e0c00; border-color: #c8a000; }
html[data-theme="golden"] .confirm-summary { background: #1a1500; border-color: #3d3000; }
html[data-theme="golden"] .confirm-row { color: #f0c040; }
html[data-theme="golden"] .receipt-details,
html[data-theme="golden"] .receipt-items { background: #1a1500; }
html[data-theme="golden"] .receipt-header h1 { color: #f0c040; }
html[data-theme="golden"] .receipt-row { color: #f0c040; border-color: #3d3000; }
html[data-theme="golden"] .customer-form input,
html[data-theme="golden"] .customer-form select { background: #0e0c00; border-color: #3d3000; color: #f0c040; }
html[data-theme="golden"] .summary-row { color: #f0c040; }
html[data-theme="golden"] .discount-input-wrap input { background: #0e0c00; border-color: #3d3000; color: #f0c040; }

/* ── Schedule / Confirm modal overrides (dark themes) ─── */
html[data-theme="cyberpunk"] .dashboard-schedule-modal,
html[data-theme="cyberpunk"] .dashboard-confirm-modal {
  background: #070b0f; border: 1px solid rgba(0,255,157,0.3);
  box-shadow: 0 0 40px rgba(0,255,157,0.12); color: #00ff9d;
}
html[data-theme="cyberpunk"] .dashboard-schedule-modal-header,
html[data-theme="cyberpunk"] .dashboard-schedule-modal-footer {
  background: #050810; border-color: rgba(0,255,157,0.18);
}
html[data-theme="cyberpunk"] .schedule-select,
html[data-theme="cyberpunk"] .schedule-add-select { background: #050810; border-color: rgba(0,255,157,0.3); color: #00ff9d; }
html[data-theme="cyberpunk"] .schedule-day-btn { background: #050810; border-color: rgba(0,255,157,0.25); color: #00ff9d; }
html[data-theme="cyberpunk"] .schedule-day-btn.selected,
html[data-theme="cyberpunk"] .schedule-day-btn:hover { background: rgba(0,255,157,0.15); border-color: #00ff9d; }
html[data-theme="cyberpunk"] .schedule-hour-chip { background: rgba(0,255,157,0.1); color: #00ff9d; }
html[data-theme="cyberpunk"] .schedule-btn-cancel { background: transparent; border-color: rgba(0,255,157,0.35); color: #00ff9d; }
html[data-theme="cyberpunk"] .schedule-btn-cancel:hover { background: rgba(0,255,157,0.1); }
html[data-theme="cyberpunk"] .schedule-toggle-track { background: #1a2a1a; }

html[data-theme="rock"] .dashboard-schedule-modal,
html[data-theme="rock"] .dashboard-confirm-modal {
  background: #0d0000; border: 1px solid rgba(200,0,0,0.4);
  box-shadow: 0 0 40px rgba(200,0,0,0.15); color: #ff6666;
}
html[data-theme="rock"] .dashboard-schedule-modal-header,
html[data-theme="rock"] .dashboard-schedule-modal-footer {
  background: #080000; border-color: rgba(200,0,0,0.2);
}
html[data-theme="rock"] .schedule-select,
html[data-theme="rock"] .schedule-add-select { background: #080000; border-color: rgba(200,0,0,0.35); color: #ff6666; }
html[data-theme="rock"] .schedule-day-btn { background: #080000; border-color: rgba(200,0,0,0.3); color: #cc4444; }
html[data-theme="rock"] .schedule-day-btn.selected,
html[data-theme="rock"] .schedule-day-btn:hover { background: rgba(200,0,0,0.15); border-color: #cc0000; }
html[data-theme="rock"] .schedule-hour-chip { background: rgba(200,0,0,0.12); color: #ff6666; }
html[data-theme="rock"] .schedule-btn-cancel { background: transparent; border-color: rgba(200,0,0,0.35); color: #cc4444; }
html[data-theme="rock"] .schedule-btn-cancel:hover { background: rgba(200,0,0,0.1); }
html[data-theme="rock"] .schedule-toggle-track { background: #1a0000; }

html[data-theme="golden"] .dashboard-schedule-modal,
html[data-theme="golden"] .dashboard-confirm-modal {
  background: #0e0c00; border: 1px solid rgba(200,160,0,0.4);
  box-shadow: 0 0 40px rgba(200,160,0,0.12); color: #f0c040;
}
html[data-theme="golden"] .dashboard-schedule-modal-header,
html[data-theme="golden"] .dashboard-schedule-modal-footer {
  background: #080600; border-color: rgba(200,160,0,0.2);
}
html[data-theme="golden"] .schedule-select,
html[data-theme="golden"] .schedule-add-select { background: #080600; border-color: rgba(200,160,0,0.35); color: #f0c040; }
html[data-theme="golden"] .schedule-day-btn { background: #080600; border-color: rgba(200,160,0,0.3); color: #c0a030; }
html[data-theme="golden"] .schedule-day-btn.selected,
html[data-theme="golden"] .schedule-day-btn:hover { background: rgba(200,160,0,0.15); border-color: #c0a030; }
html[data-theme="golden"] .schedule-hour-chip { background: rgba(200,160,0,0.12); color: #f0c040; }
html[data-theme="golden"] .schedule-btn-cancel { background: transparent; border-color: rgba(200,160,0,0.35); color: #c0a030; }
html[data-theme="golden"] .schedule-btn-cancel:hover { background: rgba(200,160,0,0.1); }
html[data-theme="golden"] .schedule-toggle-track { background: #1a1500; }

/* ── BranchAccess — ba-btn-save / ba-btn-add (fondo dorado, texto oscuro) ── */
html[data-theme="golden"] .ba-btn-save,
html[data-theme="golden"] .ba-btn-add {
  background: #d4af37;
  color: #120f00;
  border: none;
  font-weight: 700;
}
html[data-theme="golden"] .ba-btn-save:hover:not(:disabled),
html[data-theme="golden"] .ba-btn-add:hover {
  background: #b8960a;
  color: #120f00;
  opacity: 1;
}

/* ═══════════════════════════════════════════════════════════════════════════
   TEMA: iTunes
   Sidebar oscuro carbón, contenido blanco/gris claro, acento azul Apple
   Header metálico oscuro degradado, fuente Helvetica Neue / San Francisco
   Inspirado en iTunes 10-12 (2010-2015)
   ═══════════════════════════════════════════════════════════════════════════ */

html[data-theme="itunes"] {
  --primary-color:      #4a90e2;
  --primary-dark:       #2d72c8;
  --primary-light:      #79b0f0;
  --secondary-color:    #f5f5f5;
  --accent-color:       #4a90e2;
  --text-primary:       #1a1a1a;
  --text-secondary:     #555555;
  --text-light:         #888888;
  --bg-primary:         #f5f5f5;
  --bg-secondary:       #ffffff;
  --bg-dark:            #1e1e1e;
  --border-color:       rgba(0, 0, 0, 0.1);
  --success:            #5aac44;
  --warning:            #e6a817;
  --danger:             #e53935;
  --info:               #4a90e2;
  --card-bg:            #ffffff;
  --input-bg:           #ffffff;
  --sidebar-bg:         #1e1e1e;
  --table-header-bg:    #f0f0f0;
  --hover-bg:           rgba(74, 144, 226, 0.08);
  --badge-bg:           #eaf2fb;
  --img-placeholder-bg: #f0f0f0;
  --error-color:        #e53935;
  --btn-primary-text:   #ffffff;
}

html[data-theme="itunes"] body {
  background: #f5f5f5;
  color: #1a1a1a;
  font-family: 'Helvetica Neue', -apple-system, BlinkMacSystemFont, 'SF Pro Text', Arial, sans-serif;
  font-size: 13px;
  font-weight: 400;
}

html[data-theme="itunes"] body::before {
  content: none;
}

/* ── Layout ── */

html[data-theme="itunes"] .layout-main {
  background: #f5f5f5;
}

/* ── Header — barra metálica oscura estilo iTunes ── */

html[data-theme="itunes"] .header {
  background: linear-gradient(180deg, #484848 0%, #282828 100%);
  border-bottom: 1px solid #111111;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

html[data-theme="itunes"] .header-logo-suffix {
  color: #c8c8c8;
  border-left-color: rgba(255, 255, 255, 0.15);
  font-weight: 500;
}

html[data-theme="itunes"] .header-beta-badge {
  background: linear-gradient(180deg, #5aacf0 0%, #2d72c8 100%);
  color: #ffffff;
  border: 1px solid #1a5fa0;
  border-radius: 10px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
  animation: none;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 8px;
}

html[data-theme="itunes"] .menu-toggle {
  color: #c8c8c8;
}

html[data-theme="itunes"] .menu-toggle:hover {
  color: #ffffff;
  text-shadow: none;
}

html[data-theme="itunes"] .header-user-info,
html[data-theme="itunes"] .header-user-name { color: #e0e0e0; font-weight: 500; }
html[data-theme="itunes"] .header-user-role { color: #909090; font-size: 0.8em; }

/* Logout buttons */
html[data-theme="itunes"] .btn-logout,
html[data-theme="itunes"] .logout-button {
  background: linear-gradient(180deg, #5a5a5a 0%, #3a3a3a 100%);
  color: #e0e0e0;
  border: 1px solid #222222;
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  font-size: 12px;
}

html[data-theme="itunes"] .btn-logout:hover,
html[data-theme="itunes"] .logout-button:hover {
  background: linear-gradient(180deg, #6a6a6a 0%, #4a4a4a 100%);
  color: #ffffff;
  border-color: #111111;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
}

html[data-theme="itunes"] .btn-export-pdf {
  background: linear-gradient(180deg, #5aacf0 0%, #2d72c8 100%);
  color: #ffffff;
  border: 1px solid #1a5fa0;
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

html[data-theme="itunes"] .btn-export-pdf:hover {
  background: linear-gradient(180deg, #79b8f5 0%, #3d85d8 100%);
  color: #ffffff;
  box-shadow: 0 2px 6px rgba(74, 144, 226, 0.5);
}

/* ── User avatar ── */

html[data-theme="itunes"] .user-avatar {
  background: linear-gradient(180deg, #5aacf0 0%, #2d72c8 100%);
  border: 1px solid #1a5fa0;
  color: #ffffff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
  border-radius: 50%;
  font-weight: 700;
}

/* ── Sidebar — oscuro como fuente de iTunes ── */

html[data-theme="itunes"] .sidebar {
  background: linear-gradient(180deg, #252525 0%, #1c1c1c 100%);
  border-right: 1px solid #111111;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

html[data-theme="itunes"] .nav-link {
  color: #b0b0b0;
  border-left: 3px solid transparent;
  font-family: 'Helvetica Neue', -apple-system, sans-serif;
  font-size: 12px;
  border-radius: 4px;
  margin: 1px 4px;
  transition: background 0.15s, color 0.15s;
}

html[data-theme="itunes"] .nav-link:hover {
  background: rgba(255, 255, 255, 0.06);
  color: #e0e0e0;
  border-left-color: transparent;
  box-shadow: none;
}

html[data-theme="itunes"] .nav-link.active {
  background: linear-gradient(180deg, #5aacf0 0%, #2d72c8 100%);
  color: #ffffff;
  border-left-color: transparent;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.15);
  font-weight: 600;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
  border-radius: 6px;
}

html[data-theme="itunes"] .nav-section-title {
  color: #666666;
  font-family: 'Helvetica Neue', -apple-system, sans-serif;
  font-size: 10px;
  font-weight: 700;
  font-style: normal;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

html[data-theme="itunes"] .sidebar-icon {
  color: inherit;
  opacity: 0.8;
}

/* ── Scrollbars ── */

html[data-theme="itunes"] ::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

html[data-theme="itunes"] ::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.05);
}

html[data-theme="itunes"] ::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.25);
  border-radius: 10px;
}

html[data-theme="itunes"] ::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.4);
}

/* ── Cards y paneles ── */

html[data-theme="itunes"] .card,
html[data-theme="itunes"] .dashboard-card,
html[data-theme="itunes"] .summary-card,
html[data-theme="itunes"] .stat-card,
html[data-theme="itunes"] .section-card,
html[data-theme="itunes"] .detail-card,
html[data-theme="itunes"] .info-card,
html[data-theme="itunes"] .monitoring-card,
html[data-theme="itunes"] .report-card {
  background: #ffffff;
  border: 1px solid #e0e0e0;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1), 0 0 1px rgba(0, 0, 0, 0.06);
  border-radius: 6px;
  color: #1a1a1a;
}

html[data-theme="itunes"] .card-header,
html[data-theme="itunes"] .dashboard-card-header,
html[data-theme="itunes"] .section-header,
html[data-theme="itunes"] .panel-header,
html[data-theme="itunes"] .modal-header {
  background: linear-gradient(180deg, #f0f0f0 0%, #e4e4e4 100%);
  color: #1a1a1a;
  font-weight: 700;
  border-bottom: 1px solid #cccccc;
  border-radius: 6px 6px 0 0;
  padding: 8px 14px;
  font-size: 13px;
}

html[data-theme="itunes"] .card-title,
html[data-theme="itunes"] .section-title,
html[data-theme="itunes"] .panel-title {
  color: #1a1a1a;
  font-weight: 700;
}

/* ── Botones ── */

html[data-theme="itunes"] button,
html[data-theme="itunes"] .btn,
html[data-theme="itunes"] .btn-secondary {
  background: linear-gradient(180deg, #f8f8f8 0%, #e8e8e8 100%);
  color: #1a1a1a;
  border: 1px solid #bbbbbb;
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.9);
  font-family: 'Helvetica Neue', -apple-system, sans-serif;
  font-size: 12px;
  font-weight: 400;
  cursor: pointer;
  transition: background 0.1s;
  padding: 4px 14px;
  min-height: 24px;
}

html[data-theme="itunes"] button:hover,
html[data-theme="itunes"] .btn:hover {
  background: linear-gradient(180deg, #ffffff 0%, #f0f0f0 100%);
  border-color: #aaaaaa;
  color: #1a1a1a;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

html[data-theme="itunes"] .btn-primary {
  background: linear-gradient(180deg, #5aacf0 0%, #2d72c8 100%);
  color: #ffffff;
  border: 1px solid #1a5fa0;
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

html[data-theme="itunes"] .btn-primary:hover {
  background: linear-gradient(180deg, #79b8f5 0%, #3d85d8 100%);
  color: #ffffff;
  box-shadow: 0 2px 6px rgba(74, 144, 226, 0.5);
}

html[data-theme="itunes"] .btn-danger {
  background: linear-gradient(180deg, #f06060 0%, #c82828 100%);
  color: #ffffff;
  border: 1px solid #a01a1a;
  border-radius: 12px;
}

html[data-theme="itunes"] button:active,
html[data-theme="itunes"] .btn:active {
  background: linear-gradient(180deg, #e0e0e0 0%, #d0d0d0 100%);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2);
}

html[data-theme="itunes"] button:disabled,
html[data-theme="itunes"] .btn:disabled {
  color: #aaaaaa;
  background: linear-gradient(180deg, #f5f5f5 0%, #ebebeb 100%);
  border-color: #d0d0d0;
  box-shadow: none;
  cursor: default;
}

/* ── Inputs ── */

html[data-theme="itunes"] input,
html[data-theme="itunes"] textarea,
html[data-theme="itunes"] select,
html[data-theme="itunes"] .input,
html[data-theme="itunes"] .form-control {
  background: #ffffff;
  color: #1a1a1a;
  border: 1px solid #bbbbbb;
  border-radius: 4px;
  font-family: 'Helvetica Neue', -apple-system, sans-serif;
  font-size: 12px;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.08);
  padding: 4px 8px;
  transition: border-color 0.15s, box-shadow 0.15s;
}

html[data-theme="itunes"] input:focus,
html[data-theme="itunes"] textarea:focus,
html[data-theme="itunes"] select:focus {
  outline: none;
  border-color: #4a90e2;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.08), 0 0 0 3px rgba(74, 144, 226, 0.2);
}

html[data-theme="itunes"] input::selection,
html[data-theme="itunes"] textarea::selection {
  background: rgba(74, 144, 226, 0.25);
  color: #1a1a1a;
}

html[data-theme="itunes"] label,
html[data-theme="itunes"] .form-label {
  color: #1a1a1a;
  font-size: 12px;
  font-weight: 700;
}

/* ── Tablas (estilo playlist de iTunes) ── */

html[data-theme="itunes"] table,
html[data-theme="itunes"] .data-table,
html[data-theme="itunes"] .inventory-table,
html[data-theme="itunes"] .users-table,
html[data-theme="itunes"] .report-table,
html[data-theme="itunes"] .pos-sales-table,
html[data-theme="itunes"] .pos-customers-table {
  background: #ffffff;
  border: 1px solid #dddddd;
  border-radius: 0;
  border-collapse: collapse;
  font-family: 'Helvetica Neue', -apple-system, sans-serif;
  font-size: 12px;
  color: #1a1a1a;
}

html[data-theme="itunes"] th,
html[data-theme="itunes"] thead td,
html[data-theme="itunes"] .data-table th,
html[data-theme="itunes"] .inventory-table th {
  background: linear-gradient(180deg, #f0f0f0 0%, #e4e4e4 100%);
  color: #555555;
  border-bottom: 1px solid #cccccc;
  border-right: 1px solid #d8d8d8;
  font-weight: 700;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 4px 8px;
}

html[data-theme="itunes"] td {
  border-bottom: 1px solid #f0f0f0;
  padding: 4px 8px;
  color: #1a1a1a;
  background: transparent;
}

html[data-theme="itunes"] tr:nth-child(even) td {
  background: #f9f9f9;
}

html[data-theme="itunes"] tr:hover td {
  background: linear-gradient(180deg, #4a90e2 0%, #2d72c8 100%);
  color: #ffffff;
}

/* ── Modales ── */

html[data-theme="itunes"] .modal,
html[data-theme="itunes"] .modal-overlay,
html[data-theme="itunes"] .modal-backdrop,
html[data-theme="itunes"] .modal-content {
  background: rgba(0, 0, 0, 0.45);
}

html[data-theme="itunes"] .modal-dialog > *,
html[data-theme="itunes"] .modal-box > *,
html[data-theme="itunes"] .modal-content-inner,
html[data-theme="itunes"] .modal-window,
html[data-theme="itunes"] .confirm-modal-box,
html[data-theme="itunes"] .sync-confirm-box,
html[data-theme="itunes"] .ba-modal,
html[data-theme="itunes"] .pos-modal {
  background: #f5f5f5;
  border: 1px solid #aaaaaa;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  color: #1a1a1a;
}

/* ── Badges y chips ── */

html[data-theme="itunes"] .badge,
html[data-theme="itunes"] .chip,
html[data-theme="itunes"] .status-badge,
html[data-theme="itunes"] .brand-chip {
  background: #eaf2fb;
  color: #2d72c8;
  border: none;
  border-radius: 10px;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 8px;
}

html[data-theme="itunes"] .badge.success,
html[data-theme="itunes"] .badge-success,
html[data-theme="itunes"] .status-badge.activo,
html[data-theme="itunes"] .chip.active {
  background: rgba(90, 172, 68, 0.12);
  color: #3a8e28;
}

html[data-theme="itunes"] .badge.danger,
html[data-theme="itunes"] .badge-danger,
html[data-theme="itunes"] .status-badge.inactivo {
  background: rgba(229, 57, 53, 0.1);
  color: #c32c28;
}

/* ── Dashboard ── */

html[data-theme="itunes"] .dashboard-page,
html[data-theme="itunes"] .dashboard-container {
  background: #f5f5f5;
}

html[data-theme="itunes"] .dashboard-card {
  background: #ffffff;
  border: 1px solid #e0e0e0;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
  border-radius: 6px;
}

html[data-theme="itunes"] .dashboard-card-title,
html[data-theme="itunes"] .dashboard-title {
  background: linear-gradient(180deg, #f0f0f0 0%, #e4e4e4 100%);
  color: #1a1a1a;
  font-weight: 700;
  font-size: 13px;
  border-bottom: 1px solid #cccccc;
  padding: 6px 12px;
  margin: -1px -1px 10px -1px;
  border-radius: 6px 6px 0 0;
}

html[data-theme="itunes"] .dashboard-stat-value,
html[data-theme="itunes"] .stat-number {
  color: #2d72c8;
  font-weight: 700;
}

html[data-theme="itunes"] .dashboard-stat-label,
html[data-theme="itunes"] .stat-label {
  color: #888888;
  font-size: 11px;
}

/* ── Página genérica ── */

html[data-theme="itunes"] .page-container,
html[data-theme="itunes"] .page-content,
html[data-theme="itunes"] .content-area,
html[data-theme="itunes"] .main-content {
  background: #f5f5f5;
  color: #1a1a1a;
}

html[data-theme="itunes"] h1,
html[data-theme="itunes"] h2,
html[data-theme="itunes"] h3,
html[data-theme="itunes"] h4 {
  color: #1a1a1a;
  font-family: 'Helvetica Neue', -apple-system, sans-serif;
  font-weight: 700;
}

html[data-theme="itunes"] .page-title {
  color: #1a1a1a;
  font-weight: 700;
  font-size: 18px;
}

html[data-theme="itunes"] .page-subtitle {
  color: #888888;
  font-size: 12px;
}

/* ── Links ── */

html[data-theme="itunes"] a {
  color: #2d72c8;
  text-decoration: none;
}

html[data-theme="itunes"] a:hover {
  color: #4a90e2;
  text-decoration: underline;
}

html[data-theme="itunes"] .text-muted,
html[data-theme="itunes"] .text-secondary {
  color: #888888;
}

/* ── Dropdown ── */

html[data-theme="itunes"] .dropdown,
html[data-theme="itunes"] .dropdown-menu {
  background: #f5f5f5;
  border: 1px solid #aaaaaa;
  border-radius: 6px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
  color: #1a1a1a;
}

html[data-theme="itunes"] .dropdown-item:hover {
  background: linear-gradient(180deg, #4a90e2 0%, #2d72c8 100%);
  color: #ffffff;
  border-radius: 4px;
}

/* ── Alertas ── */

html[data-theme="itunes"] .alert,
html[data-theme="itunes"] .alert-warning,
html[data-theme="itunes"] .mock-banner,
html[data-theme="itunes"] .MockDataBanner,
html[data-theme="itunes"] .mock-data-banner {
  background: #fff8e1;
  color: #5a4000;
  border: 1px solid #e6c800;
  border-radius: 6px;
  font-size: 12px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
}

html[data-theme="itunes"] .alert-error,
html[data-theme="itunes"] .alert-danger {
  background: #fdecea;
  color: #b71c1c;
  border-color: #e57373;
}

html[data-theme="itunes"] .alert-success {
  background: #e8f5e9;
  color: #1b5e20;
  border-color: #81c784;
}

/* ── Progress bars ── */

html[data-theme="itunes"] .progress,
html[data-theme="itunes"] .progress-bar-container {
  background: #e0e0e0;
  border: 1px solid #cccccc;
  border-radius: 100px;
  height: 8px;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
}

html[data-theme="itunes"] .progress-fill,
html[data-theme="itunes"] .progress-bar {
  background: linear-gradient(180deg, #5aacf0 0%, #2d72c8 100%);
  border-radius: 100px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

/* ── Inventory / table wrappers ── */

html[data-theme="itunes"] .inventory-page,
html[data-theme="itunes"] .inventory-container {
  background: #f5f5f5;
}

html[data-theme="itunes"] .inventory-table-wrapper,
html[data-theme="itunes"] .table-wrapper {
  background: #ffffff;
  border: 1px solid #dddddd;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}

html[data-theme="itunes"] .tr-search-input,
html[data-theme="itunes"] .search-input,
html[data-theme="itunes"] .filter-input {
  background: #ffffff;
  color: #1a1a1a;
  border: 1px solid #bbbbbb;
  border-radius: 12px;
  font-size: 12px;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.06);
}

html[data-theme="itunes"] .btn-tr-refresh,
html[data-theme="itunes"] .btn-refresh {
  background: linear-gradient(180deg, #f8f8f8 0%, #e8e8e8 100%);
  color: #1a1a1a;
  border: 1px solid #bbbbbb;
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
}

html[data-theme="itunes"] .btn-tr-refresh:hover,
html[data-theme="itunes"] .btn-refresh:hover {
  background: linear-gradient(180deg, #ffffff 0%, #f0f0f0 100%);
  border-color: #aaaaaa;
}

html[data-theme="itunes"] .status-active,
html[data-theme="itunes"] .status-activo { color: #3a8e28; font-weight: 600; }
html[data-theme="itunes"] .status-inactive,
html[data-theme="itunes"] .status-inactivo,
html[data-theme="itunes"] .status-draft { color: #888888; }

/* ── Profile / Theme picker ── */

html[data-theme="itunes"] .profile-themes {
  background: #ffffff;
  border: 1px solid #dddddd;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  border-radius: 6px;
}

html[data-theme="itunes"] .profile-themes-header {
  color: #1a1a1a;
  font-weight: 700;
}

html[data-theme="itunes"] .profile-themes-icon {
  color: #4a90e2;
}

html[data-theme="itunes"] .profile-theme-option {
  border: 1px solid #e0e0e0;
  background: #f8f8f8;
  border-radius: 6px;
  transition: border-color 0.15s, box-shadow 0.15s;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}

html[data-theme="itunes"] .profile-theme-option:hover {
  border-color: #4a90e2;
  background: #f0f6ff;
  box-shadow: 0 2px 8px rgba(74, 144, 226, 0.2);
}

html[data-theme="itunes"] .profile-theme-option--active {
  border-color: #2d72c8;
  background: linear-gradient(180deg, #eaf2fb 0%, #d8e8f8 100%);
  box-shadow: 0 0 0 2px rgba(74, 144, 226, 0.25);
}

html[data-theme="itunes"] .profile-theme-name {
  color: #1a1a1a;
  font-size: 11px;
}

html[data-theme="itunes"] .profile-theme-option--active .profile-theme-name {
  color: #2d72c8;
  font-weight: 700;
}

/* ── Rockstar Widget ── */

html[data-theme="itunes"] .rockstar-widget-header {
  background: linear-gradient(180deg, #484848 0%, #282828 100%) !important;
  color: #e0e0e0 !important;
  font-weight: 600 !important;
  border-radius: 8px 8px 0 0 !important;
}
html[data-theme="itunes"] .rockstar-widget-header .actions button {
  background: rgba(255, 255, 255, 0.12) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  border-radius: 6px !important;
  font-size: 1rem !important;
  padding: 0 !important;
  width: 30px !important;
  height: 30px !important;
  box-sizing: border-box !important;
}
html[data-theme="itunes"] .rockstar-widget-header .actions button svg {
  fill: #ffffff !important;
  width: 16px !important;
  height: 16px !important;
  flex-shrink: 0 !important;
}
html[data-theme="itunes"] .rockstar-widget-header .actions button svg path {
  fill: #ffffff !important;
}
html[data-theme="itunes"] .rockstar-widget-header .actions button:hover {
  background: rgba(255, 255, 255, 0.22) !important;
}

html[data-theme="itunes"] .rockstar-widget-fab {
  background: linear-gradient(180deg, #5aacf0 0%, #2d72c8 100%) !important;
  color: #ffffff !important;
  border: 1px solid #1a5fa0 !important;
  border-radius: 6px !important;
  box-shadow: 0 4px 12px rgba(74, 144, 226, 0.4) !important;
}

html[data-theme="itunes"] .rockstar-widget-messages .message.assistant {
  background: #f0f6ff !important;
  border-left: 3px solid #4a90e2 !important;
  color: #1a1a1a !important;
}

html[data-theme="itunes"] .rockstar-widget-messages .message.user {
  background: linear-gradient(180deg, #5aacf0 0%, #2d72c8 100%) !important;
  color: #ffffff !important;
}

/* ── Monitoring ── */

html[data-theme="itunes"] .monitoring-page,
html[data-theme="itunes"] .monitoring-container {
  background: #f5f5f5;
}

html[data-theme="itunes"] .monitoring-card {
  background: #ffffff;
  border: 1px solid #e0e0e0;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
  border-radius: 6px;
  color: #1a1a1a;
}

/* ── Pagination ── */

html[data-theme="itunes"] .page-size-btn,
html[data-theme="itunes"] .pagination-btn {
  background: linear-gradient(180deg, #f8f8f8 0%, #e8e8e8 100%);
  color: #555555;
  border: 1px solid #bbbbbb;
  border-radius: 10px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  font-size: 11px;
  transition: none;
}

html[data-theme="itunes"] .page-size-btn:hover,
html[data-theme="itunes"] .pagination-btn:hover {
  background: linear-gradient(180deg, #ffffff 0%, #f0f0f0 100%);
  color: #1a1a1a;
  border-color: #aaaaaa;
}

html[data-theme="itunes"] .page-size-btn.active,
html[data-theme="itunes"] .pagination-btn.active {
  background: linear-gradient(180deg, #5aacf0 0%, #2d72c8 100%);
  color: #ffffff;
  border-color: #1a5fa0;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

/* ── Toggle ── */

html[data-theme="itunes"] input[type="checkbox"],
html[data-theme="itunes"] input[type="radio"] {
  accent-color: #4a90e2;
}

html[data-theme="itunes"] hr,
html[data-theme="itunes"] .divider {
  border: none;
  border-top: 1px solid #e0e0e0;
}

/* ═══════════════════════════════════════════════════════════════════════════
   J.A.R.V.I.S. THEME  —  High-tech sci-fi holographic interface
   Palette: deep navy blacks · electric blue · cyan · gold accent
   ═══════════════════════════════════════════════════════════════════════════ */

html[data-theme="jarvis"] {
  --primary-color:   #00b4ff;
  --primary-dark:    #0090d4;
  --primary-light:   #33caff;
  --secondary-color: #ffab00;
  --secondary-dark:  #cc8800;
  --accent-color:    #00d4ff;
  --text-primary:    #00b4ff;
  --text-secondary:  #0090d4;
  --text-light:      #005a8a;
  --bg-primary:      #051828;
  --bg-secondary:    #02101f;
  --bg-dark:         #010c1a;
  --border-color:    rgba(0, 180, 255, 0.22);
  --success:         #00e5a0;
  --warning:         #ffab00;
  --danger:          #ff3366;
  --info:            #00d4ff;
  --card-bg:            #0d1117;
  --input-bg:           #0d1117;
  --sidebar-bg:         #0a0e1a;
  --table-header-bg:    #0a0e1a;
  --hover-bg:           #0a0e1a;
  --badge-bg:           #0d1117;
  --img-placeholder-bg: #0a0e1a;
  --error-color:        #ff3366;
}

/* ── Body & base ── */
html[data-theme="jarvis"] body {
  background-color: #010c1a;
  color: #00b4ff;
  font-family: 'Courier New', 'Share Tech Mono', monospace;
}

html[data-theme="jarvis"] body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 3px,
    rgba(0, 180, 255, 0.006) 3px,
    rgba(0, 180, 255, 0.006) 4px
  );
}

/* ── Layout ── */
html[data-theme="jarvis"] .layout-main {
  background: #010c1a;
}

/* ── Header ── */
html[data-theme="jarvis"] .header {
  background: #000d1f;
  border-bottom: 1px solid rgba(0, 180, 255, 0.3);
  box-shadow: 0 0 20px rgba(0, 180, 255, 0.12);
}

html[data-theme="jarvis"] .header-logo-img {
  filter: drop-shadow(0 0 8px rgba(0, 180, 255, 0.8)) drop-shadow(0 0 20px rgba(0, 180, 255, 0.5)) brightness(1.3);
}

html[data-theme="jarvis"] .header-logo-suffix {
  color: rgba(0, 180, 255, 0.45);
}

html[data-theme="jarvis"] .menu-toggle {
  color: rgba(0, 180, 255, 0.5);
}

html[data-theme="jarvis"] .user-name {
  color: rgba(0, 180, 255, 0.75);
}

html[data-theme="jarvis"] .user-role {
  color: rgba(0, 180, 255, 0.45);
}

html[data-theme="jarvis"] .user-avatar {
  background: #000d1f;
  border: 1.5px solid rgba(0, 180, 255, 0.4);
  color: #00b4ff;
  box-shadow: 0 0 10px rgba(0, 180, 255, 0.2);
}

html[data-theme="jarvis"] .user-tooltip {
  background: #02101f;
  border: 1px solid rgba(0, 180, 255, 0.25);
  color: #00b4ff;
}

html[data-theme="jarvis"] .logout-button {
  background: rgba(0, 180, 255, 0.08);
  color: rgba(0, 180, 255, 0.6);
  border: 1px solid rgba(0, 180, 255, 0.18);
}

html[data-theme="jarvis"] .logout-button:hover {
  background: rgba(0, 180, 255, 0.15);
  color: #00b4ff;
  border-color: rgba(0, 180, 255, 0.4);
}

html[data-theme="jarvis"] .btn-export-pdf {
  background: rgba(0, 180, 255, 0.1);
  color: #00b4ff;
  border: 1px solid rgba(0, 180, 255, 0.25);
}

html[data-theme="jarvis"] .btn-export-pdf:hover {
  background: rgba(0, 180, 255, 0.2);
  border-color: rgba(0, 180, 255, 0.45);
}

/* ── Sidebar ── */
html[data-theme="jarvis"] .sidebar {
  background: #02101f;
  border-right: 1px solid rgba(0, 180, 255, 0.2);
  box-shadow: 2px 0 20px rgba(0, 180, 255, 0.08);
}

html[data-theme="jarvis"] .nav-link {
  color: rgba(0, 180, 255, 0.6);
}

html[data-theme="jarvis"] .nav-link:hover {
  background: rgba(0, 180, 255, 0.07);
  color: #00b4ff;
}

html[data-theme="jarvis"] .nav-link.active {
  background: rgba(0, 180, 255, 0.12);
  color: #00b4ff;
  border-left: 3px solid #00b4ff;
  box-shadow: inset 0 0 12px rgba(0, 180, 255, 0.08);
}

/* ── Page containers (generic) ── */
html[data-theme="jarvis"] .page-container,
html[data-theme="jarvis"] .content-wrapper {
  background: transparent;
}

/* ══════════════════════════════════════════
   DASHBOARD
   ══════════════════════════════════════════ */

html[data-theme="jarvis"] .stat-card {
  background: #051828;
  border-color: rgba(0, 180, 255, 0.2);
  box-shadow: 0 0 16px rgba(0, 180, 255, 0.07);
  color: #00b4ff;
}

html[data-theme="jarvis"] .stat-card:hover {
  box-shadow: 0 0 24px rgba(0, 180, 255, 0.16);
}

html[data-theme="jarvis"] .dashboard-card {
  background: #051828;
  border-color: rgba(0, 180, 255, 0.2);
  box-shadow: 0 0 16px rgba(0, 180, 255, 0.06);
  color: #00b4ff;
}

html[data-theme="jarvis"] .dashboard-manual-sync-box {
  background: #010c1a;
  border-color: rgba(0, 180, 255, 0.2);
}

html[data-theme="jarvis"] .health-chip {
  background: #051828;
  border-color: rgba(0, 180, 255, 0.2);
  color: #00b4ff;
  box-shadow: none;
}

html[data-theme="jarvis"] .health-section-row {
  background: #010c1a;
  border-color: rgba(0, 180, 255, 0.15);
}

html[data-theme="jarvis"] .health-category-title {
  color: #0090d4;
}

html[data-theme="jarvis"] .dashboard-schedule-row {
  background: #010c1a;
  border-color: rgba(0, 180, 255, 0.15);
}

html[data-theme="jarvis"] .dashboard-schedule-modal,
html[data-theme="jarvis"] .dashboard-confirm-modal {
  background: #051828;
  border: 1px solid rgba(0, 180, 255, 0.3);
  box-shadow: 0 0 40px rgba(0, 180, 255, 0.15);
  color: #00b4ff;
}

html[data-theme="jarvis"] .quick-action-btn:hover {
  color: #000 !important;
}

html[data-theme="jarvis"] .dashboard-sync-button {
  color: #fff !important;
}

html[data-theme="jarvis"] .dashboard-schedule-modal-header,
html[data-theme="jarvis"] .dashboard-schedule-modal-footer {
  background: #010c1a;
  border-color: rgba(0, 180, 255, 0.18);
}

html[data-theme="jarvis"] .schedule-select,
html[data-theme="jarvis"] .schedule-add-select {
  background: #010c1a;
  border-color: rgba(0, 180, 255, 0.3);
  color: #00b4ff;
}

html[data-theme="jarvis"] .schedule-day-btn {
  background: #010c1a;
  border-color: rgba(0, 180, 255, 0.25);
  color: #00b4ff;
}

html[data-theme="jarvis"] .schedule-day-btn.active,
html[data-theme="jarvis"] .schedule-day-btn:hover {
  background: rgba(0, 180, 255, 0.15);
  border-color: #00b4ff;
}

html[data-theme="jarvis"] .schedule-hour-chip {
  background: rgba(0, 212, 255, 0.1);
  color: #00d4ff;
  border-color: rgba(0, 212, 255, 0.3);
}

html[data-theme="jarvis"] .schedule-btn-cancel {
  background: transparent;
  border-color: rgba(0, 180, 255, 0.35);
  color: #00b4ff;
}

html[data-theme="jarvis"] .schedule-btn-cancel:hover {
  background: rgba(0, 180, 255, 0.1);
}

html[data-theme="jarvis"] .schedule-toggle-track {
  background: #0a1e30;
}

html[data-theme="jarvis"] .dashboard-schedule-btn {
  background: rgba(0, 180, 255, 0.08);
  border-color: rgba(0, 180, 255, 0.25);
  color: #00b4ff;
}

html[data-theme="jarvis"] .dashboard-schedule-badge.disabled {
  background: rgba(0, 180, 255, 0.06);
  color: #005a8a;
}

html[data-theme="jarvis"] .dashboard-sync-button {
  background: rgba(0, 180, 255, 0.12);
  border: 1px solid rgba(0, 180, 255, 0.4);
  color: #00b4ff;
}

html[data-theme="jarvis"] .dashboard-sync-button:hover {
  background: rgba(0, 180, 255, 0.22);
  box-shadow: 0 0 14px rgba(0, 180, 255, 0.3);
}

/* ══════════════════════════════════════════
   ANALYTICS HUB
   ══════════════════════════════════════════ */

html[data-theme="jarvis"] .hub-card {
  background: #051828;
  border: 1px solid rgba(0, 180, 255, 0.15);
  box-shadow: 0 2px 12px rgba(0, 180, 255, 0.08);
}

html[data-theme="jarvis"] .hub-card:hover {
  box-shadow: 0 6px 24px rgba(0, 180, 255, 0.15);
  border-color: rgba(0, 180, 255, 0.3);
}

html[data-theme="jarvis"] .hub-blue .hub-card-icon {
  background: rgba(0, 180, 255, 0.12);
  color: #00b4ff;
}

html[data-theme="jarvis"] .hub-green .hub-card-icon {
  background: rgba(34, 197, 94, 0.12);
  color: #4ade80;
}

html[data-theme="jarvis"] .hub-purple .hub-card-icon {
  background: rgba(139, 92, 246, 0.12);
  color: #a78bfa;
}

html[data-theme="jarvis"] .hub-orange .hub-card-icon {
  background: rgba(249, 115, 22, 0.12);
  color: #fb923c;
}

html[data-theme="jarvis"] .hub-red .hub-card-icon {
  background: rgba(239, 68, 68, 0.12);
  color: #f87171;
}

html[data-theme="jarvis"] .hub-teal .hub-card-icon {
  background: rgba(20, 184, 166, 0.12);
  color: #2dd4bf;
}

html[data-theme="jarvis"] .hub-gold .hub-card-icon {
  background: rgba(217, 119, 6, 0.12);
  color: #fbbf24;
}

/* ══════════════════════════════════════════
   ANALYTICS REPORTS
   ══════════════════════════════════════════ */

html[data-theme="jarvis"] .period-btn {
  background: #051828;
  border-color: rgba(0, 180, 255, 0.2);
  color: rgba(0, 180, 255, 0.65);
}

html[data-theme="jarvis"] .period-btn:hover {
  background: rgba(0, 180, 255, 0.08);
  color: #00b4ff;
}

html[data-theme="jarvis"] .period-btn.active {
  background: #00b4ff;
  color: #010c1a;
}

html[data-theme="jarvis"] .kpi-card {
  background: #051828;
  border: 1px solid rgba(0, 180, 255, 0.15);
  box-shadow: 0 2px 12px rgba(0, 180, 255, 0.06);
}

html[data-theme="jarvis"] .analytics-card {
  background: #051828;
  border: 1px solid rgba(0, 180, 255, 0.15);
  box-shadow: 0 2px 12px rgba(0, 180, 255, 0.06);
}

html[data-theme="jarvis"] .donut-center {
  background: #010c1a;
  color: #00b4ff;
}

html[data-theme="jarvis"] .bar-track {
  background: rgba(0, 180, 255, 0.08);
}

html[data-theme="jarvis"] .analytics-card-title {
  color: #00b4ff;
}

html[data-theme="jarvis"] .kpi-label {
  color: rgba(0, 180, 255, 0.7);
}

html[data-theme="jarvis"] .kpi-value {
  color: #00b4ff;
}

html[data-theme="jarvis"] .kpi-sub {
  color: rgba(0, 180, 255, 0.6);
}

html[data-theme="jarvis"] .segment-card {
  background: #051828;
  border: 1px solid rgba(0, 180, 255, 0.15);
}

html[data-theme="jarvis"] .segment-name {
  color: #00b4ff;
}

html[data-theme="jarvis"] .segment-stat-value {
  color: #00b4ff;
}

html[data-theme="jarvis"] .segment-stat-label {
  color: rgba(0, 180, 255, 0.6);
}

/* ══════════════════════════════════════════
   REPORTS
   ══════════════════════════════════════════ */

html[data-theme="jarvis"] .reports-page,
html[data-theme="jarvis"] .report-section,
html[data-theme="jarvis"] .sync-meta,
html[data-theme="jarvis"] .skipped-filters {
  background: transparent;
}

html[data-theme="jarvis"] .date-select {
  background: #051828;
  border-color: rgba(0, 180, 255, 0.3);
  color: #00b4ff;
}

html[data-theme="jarvis"] .date-select:focus {
  border-color: #00b4ff;
  box-shadow: 0 0 0 3px rgba(0, 180, 255, 0.12);
}

html[data-theme="jarvis"] .meta-item {
  background: #051828;
  border-color: rgba(0, 180, 255, 0.18);
  color: #00b4ff;
}

html[data-theme="jarvis"] .meta-label {
  color: #0090d4;
}

html[data-theme="jarvis"] .product-row {
  background: #051828;
  border-color: rgba(0, 180, 255, 0.12);
  color: #00b4ff;
}

html[data-theme="jarvis"] .product-row:hover {
  background: rgba(0, 180, 255, 0.07);
}

html[data-theme="jarvis"] .product-name {
  color: #00b4ff;
}

html[data-theme="jarvis"] .product-id,
html[data-theme="jarvis"] .product-brand {
  color: #0090d4;
}

html[data-theme="jarvis"] .skipped-reason-chip {
  background: rgba(0, 180, 255, 0.08);
  color: #00b4ff;
  border-color: rgba(0, 180, 255, 0.2);
}

html[data-theme="jarvis"] .skipped-filter-select,
html[data-theme="jarvis"] .skipped-search-input {
  background: #051828;
  border-color: rgba(0, 180, 255, 0.25);
  color: #00b4ff;
}

html[data-theme="jarvis"] .skipped-search-input:focus {
  border-color: #00b4ff;
  box-shadow: 0 0 0 3px rgba(0, 180, 255, 0.12);
}

html[data-theme="jarvis"] .search-icon {
  color: #0090d4;
}

html[data-theme="jarvis"] .changes-toggle {
  background: rgba(0, 180, 255, 0.08);
  border-color: rgba(0, 180, 255, 0.2);
  color: #00b4ff;
}

html[data-theme="jarvis"] .changes-toggle:hover {
  background: rgba(0, 180, 255, 0.12);
}

html[data-theme="jarvis"] .changes-list {
  background: #010c1a;
  border-color: rgba(0, 180, 255, 0.2);
}

html[data-theme="jarvis"] .change-from {
  color: #ff3366;
}

html[data-theme="jarvis"] .change-to {
  color: #00e5a0;
}

html[data-theme="jarvis"] .change-field {
  color: #0090d4;
}

html[data-theme="jarvis"] .section-count {
  background: rgba(0, 180, 255, 0.15);
  color: #010c1a;
}

html[data-theme="jarvis"] .section-header:hover {
  background: rgba(0, 180, 255, 0.05);
}

html[data-theme="jarvis"] .product-avatar {
  background: #010c1a;
  border-color: rgba(0, 180, 255, 0.2);
  color: #0090d4;
}

html[data-theme="jarvis"] .skipped-results-count {
  background: #010c1a;
  border-color: rgba(0, 180, 255, 0.15);
  color: rgba(0, 180, 255, 0.7);
}

html[data-theme="jarvis"] .error-banner {
  background: rgba(255, 51, 102, 0.1);
  border-color: rgba(255, 51, 102, 0.3);
  color: #ff3366;
}

/* ══════════════════════════════════════════
   ROLES
   ══════════════════════════════════════════ */

html[data-theme="jarvis"] .role-card {
  background: #051828;
  border-color: rgba(0, 180, 255, 0.2);
  box-shadow: 0 0 12px rgba(0, 180, 255, 0.05);
  color: #00b4ff;
}

html[data-theme="jarvis"] .role-card:hover {
  box-shadow: 0 0 20px rgba(0, 180, 255, 0.12);
  border-color: rgba(0, 180, 255, 0.4);
}

html[data-theme="jarvis"] .role-card--expanded {
  border-color: rgba(0, 180, 255, 0.4);
}

html[data-theme="jarvis"] .role-card-header {
  border-color: rgba(0, 180, 255, 0.15);
}

html[data-theme="jarvis"] .role-name {
  color: #00b4ff;
}

html[data-theme="jarvis"] .role-id {
  color: #0090d4;
}

html[data-theme="jarvis"] .role-perm-row--locked {
  background: rgba(0, 180, 255, 0.05);
}

html[data-theme="jarvis"] .role-card-footer {
  background: #010c1a;
  border-color: rgba(0, 180, 255, 0.15);
}

html[data-theme="jarvis"] .role-perm-row {
  border-color: rgba(0, 180, 255, 0.1);
}

html[data-theme="jarvis"] .role-perm-name {
  color: #00b4ff;
}

html[data-theme="jarvis"] .role-perm-id {
  color: #0090d4;
}

html[data-theme="jarvis"] .role-resource-block h4 {
  color: #0090d4;
  border-color: rgba(0, 180, 255, 0.15);
}

html[data-theme="jarvis"] .roles-modal {
  background: #051828;
  border: 1px solid rgba(0, 180, 255, 0.3);
  box-shadow: 0 0 40px rgba(0, 180, 255, 0.15);
  color: #00b4ff;
}

html[data-theme="jarvis"] .roles-modal-title {
  color: #00b4ff;
  border-color: rgba(0, 180, 255, 0.2);
}

html[data-theme="jarvis"] .roles-modal-form input {
  background: #010c1a;
  border-color: rgba(0, 180, 255, 0.3);
  color: #00b4ff;
}

html[data-theme="jarvis"] .roles-modal-form input:focus {
  border-color: #00b4ff;
  box-shadow: 0 0 0 3px rgba(0, 180, 255, 0.12);
}

html[data-theme="jarvis"] .roles-delete-modal {
  background: #051828;
  border: 1px solid rgba(255, 51, 102, 0.3);
  color: #00b4ff;
}

/* ══════════════════════════════════════════
   SETTINGS
   ══════════════════════════════════════════ */

html[data-theme="jarvis"] .settings-sidebar {
  background: #051828;
  border-color: rgba(0, 180, 255, 0.18);
}

html[data-theme="jarvis"] .settings-nav-item {
  background: #010c1a;
  border-color: rgba(0, 180, 255, 0.15);
  color: rgba(0, 180, 255, 0.65);
}

html[data-theme="jarvis"] .settings-nav-item:hover:not(:disabled) {
  background: rgba(0, 180, 255, 0.08);
  color: #00b4ff;
}

html[data-theme="jarvis"] .settings-nav-item.active {
  background: rgba(0, 180, 255, 0.15);
  color: #00b4ff;
  border-color: #00b4ff;
}

html[data-theme="jarvis"] .settings-content {
  background: #051828;
  border-color: rgba(0, 180, 255, 0.18);
}

html[data-theme="jarvis"] .settings-content-header {
  border-color: rgba(0, 180, 255, 0.15);
}

html[data-theme="jarvis"] .settings-content-header h2 {
  color: #00b4ff;
}

html[data-theme="jarvis"] .settings-section {
  background: #051828;
}

html[data-theme="jarvis"] .settings-section-title {
  color: #00b4ff;
  border-color: rgba(0, 180, 255, 0.2);
}

html[data-theme="jarvis"] .settings-section-hint {
  color: #0090d4;
}

html[data-theme="jarvis"] .settings-input {
  background: #010c1a;
  border-color: rgba(0, 180, 255, 0.3);
  color: #00b4ff;
}

html[data-theme="jarvis"] .settings-input:focus {
  border-color: #00b4ff;
  box-shadow: 0 0 0 3px rgba(0, 180, 255, 0.12);
}

html[data-theme="jarvis"] .settings-input:disabled {
  background: #02101f;
  color: #0090d4;
  opacity: 0.6;
}

html[data-theme="jarvis"] .settings-label {
  color: #00b4ff;
}

html[data-theme="jarvis"] .settings-mode-btn {
  background: #010c1a;
  border-color: rgba(0, 180, 255, 0.2);
  color: rgba(0, 180, 255, 0.6);
}

html[data-theme="jarvis"] .settings-mode-btn:hover:not(:disabled) {
  background: rgba(0, 180, 255, 0.08);
  color: #00b4ff;
}

html[data-theme="jarvis"] .settings-mode-btn.active {
  background: #00b4ff;
  color: #010c1a;
  border-color: #00b4ff;
}

html[data-theme="jarvis"] .settings-instructions-preview {
  background: #010c1a;
  border-color: rgba(0, 180, 255, 0.2);
  color: #00b4ff;
}

html[data-theme="jarvis"] .settings-instructions-preview code {
  background: #02101f;
  color: #00d4ff;
  border-color: rgba(0, 180, 255, 0.2);
}

html[data-theme="jarvis"] .settings-instructions-preview pre {
  background: #02101f;
  border-color: rgba(0, 180, 255, 0.2);
}

html[data-theme="jarvis"] .settings-instructions-textarea {
  background: #010c1a;
  border-color: rgba(0, 180, 255, 0.25);
  color: #00b4ff;
}

html[data-theme="jarvis"] .settings-instructions-textarea:focus {
  border-color: #00b4ff;
  box-shadow: 0 0 0 3px rgba(0, 180, 255, 0.12);
}

html[data-theme="jarvis"] .settings-toggle-secret {
  color: #0090d4;
}

html[data-theme="jarvis"] .settings-toggle-secret:hover {
  color: #00b4ff;
}

html[data-theme="jarvis"] .settings-confirm-modal {
  background: #051828;
  border: 1px solid rgba(0, 180, 255, 0.3);
  box-shadow: 0 0 40px rgba(0, 180, 255, 0.15);
  color: #00b4ff;
}

html[data-theme="jarvis"] .settings-confirm-header {
  background: #010c1a;
  border-color: rgba(0, 180, 255, 0.2);
}

html[data-theme="jarvis"] .settings-confirm-header h3 {
  color: #00b4ff;
}

html[data-theme="jarvis"] .settings-confirm-body {
  background: #051828;
  color: #00b4ff;
}

html[data-theme="jarvis"] .settings-confirm-changes {
  background: #010c1a;
  border-color: rgba(0, 180, 255, 0.18);
}

html[data-theme="jarvis"] .settings-confirm-arm input {
  background: #010c1a;
  border-color: rgba(0, 180, 255, 0.3);
  color: #00b4ff;
}

html[data-theme="jarvis"] .settings-visual-option {
  background: #010c1a;
  border-color: rgba(0, 180, 255, 0.2);
  color: rgba(0, 180, 255, 0.65);
}

html[data-theme="jarvis"] .settings-visual-option.selected {
  border-color: #00b4ff;
  color: #00b4ff;
  box-shadow: 0 0 0 3px rgba(0, 180, 255, 0.14);
}

html[data-theme="jarvis"] .settings-loading {
  background: #051828;
}

html[data-theme="jarvis"] .settings .btn-secondary:hover {
  background: rgba(0, 180, 255, 0.1);
}

html[data-theme="jarvis"] .settings-btn-ghost {
  background: transparent;
  border-color: rgba(0, 180, 255, 0.35);
  color: #00b4ff;
}

html[data-theme="jarvis"] .settings-btn-ghost:hover {
  background: rgba(0, 180, 255, 0.1);
}

html[data-theme="jarvis"] .settings-alert--error {
  background: rgba(255, 51, 102, 0.1);
  border-color: rgba(255, 51, 102, 0.3);
  color: #ff3366;
}

html[data-theme="jarvis"] .settings-alert--success {
  background: rgba(0, 229, 160, 0.08);
  border-color: rgba(0, 229, 160, 0.3);
  color: #00e5a0;
}

/* ══════════════════════════════════════════
   BRAND FLAGS
   ══════════════════════════════════════════ */

html[data-theme="jarvis"] .brand-flag-card {
  background: #051828;
  border-color: rgba(0, 180, 255, 0.2);
  box-shadow: 0 0 12px rgba(0, 180, 255, 0.05);
  color: #00b4ff;
}

html[data-theme="jarvis"] .brand-flag-card:hover {
  border-color: rgba(0, 180, 255, 0.45);
  box-shadow: 0 0 20px rgba(0, 180, 255, 0.12);
}

html[data-theme="jarvis"] .brand-flag-card.is-active {
  border-color: rgba(0, 229, 160, 0.35);
}

html[data-theme="jarvis"] .brand-flag-card.is-inactive {
  border-color: rgba(0, 180, 255, 0.1);
  opacity: 0.7;
}

html[data-theme="jarvis"] .brand-flags-search {
  background: #010c1a;
  border-color: rgba(0, 180, 255, 0.3);
  color: #00b4ff;
}

html[data-theme="jarvis"] .brand-flags-search:focus {
  border-color: #00b4ff;
  box-shadow: 0 0 0 3px rgba(0, 180, 255, 0.12);
}

html[data-theme="jarvis"] .brand-flags-filter-btn {
  background: #010c1a;
  border-color: rgba(0, 180, 255, 0.2);
  color: rgba(0, 180, 255, 0.65);
}

html[data-theme="jarvis"] .brand-flags-filter-btn:hover {
  background: rgba(0, 180, 255, 0.08);
  color: #00b4ff;
}

html[data-theme="jarvis"] .brand-flags-filter-btn.active {
  background: rgba(0, 180, 255, 0.15);
  border-color: #00b4ff;
  color: #00b4ff;
}

html[data-theme="jarvis"] .brand-flags-summary-item {
  background: #051828;
  border-color: rgba(0, 180, 255, 0.15);
  color: #00b4ff;
}

html[data-theme="jarvis"] .brand-flags-summary-item.active {
  border-color: rgba(0, 229, 160, 0.35);
  color: #00e5a0;
}

html[data-theme="jarvis"] .brand-flags-summary-item.inactive {
  border-color: rgba(0, 180, 255, 0.1);
  color: #0090d4;
}

html[data-theme="jarvis"] .brand-flags-preview {
  background: #051828;
  border-color: rgba(0, 180, 255, 0.2);
}

html[data-theme="jarvis"] .brand-flags-preview-header {
  background: #010c1a;
  border-color: rgba(0, 180, 255, 0.15);
  color: #00b4ff;
}

html[data-theme="jarvis"] .brand-flags-preview-item {
  background: #051828;
  border-color: rgba(0, 180, 255, 0.1);
  color: #00b4ff;
}

html[data-theme="jarvis"] .brand-flags-preview-chip {
  background: rgba(0, 180, 255, 0.08);
  border-color: rgba(0, 180, 255, 0.2);
  color: #00b4ff;
}

html[data-theme="jarvis"] .brand-flags-readonly-notice {
  background: rgba(255, 171, 0, 0.08);
  border-color: rgba(255, 171, 0, 0.3);
  color: #ffab00;
}

html[data-theme="jarvis"] .brand-flags-error {
  background: rgba(255, 51, 102, 0.1);
  border-color: rgba(255, 51, 102, 0.3);
  color: #ff3366;
}

html[data-theme="jarvis"] .brand-flags-success {
  background: rgba(0, 229, 160, 0.08);
  border-color: rgba(0, 229, 160, 0.3);
  color: #00e5a0;
}

html[data-theme="jarvis"] .brand-flag-state-pill.active {
  background: rgba(0, 229, 160, 0.12);
  color: #00e5a0;
}

html[data-theme="jarvis"] .brand-flag-state-pill.inactive {
  background: rgba(0, 180, 255, 0.06);
  color: #0090d4;
}

html[data-theme="jarvis"] .brand-flag-slider {
  background: rgba(0, 180, 255, 0.2);
}

/* ══════════════════════════════════════════
   ERROR LOGS
   ══════════════════════════════════════════ */

html[data-theme="jarvis"] .logs-stat-card {
  background: #051828;
  border-color: rgba(0, 180, 255, 0.18);
  color: #00b4ff;
}

html[data-theme="jarvis"] .logs-stat-card--error {
  background: rgba(255, 51, 102, 0.07);
  border-color: rgba(255, 51, 102, 0.3);
}

html[data-theme="jarvis"] .logs-stat-card--warn {
  background: rgba(255, 171, 0, 0.07);
  border-color: rgba(255, 171, 0, 0.3);
}

html[data-theme="jarvis"] .logs-section-card {
  background: #051828;
  border-color: rgba(0, 180, 255, 0.18);
}

html[data-theme="jarvis"] .logs-section-title {
  color: #00b4ff;
  border-color: rgba(0, 180, 255, 0.15);
}

html[data-theme="jarvis"] .logs-search-input {
  background: #010c1a;
  border-color: rgba(0, 180, 255, 0.25);
  color: #00b4ff;
}

html[data-theme="jarvis"] .logs-search-input:focus {
  border-color: #00b4ff;
  box-shadow: 0 0 0 3px rgba(0, 180, 255, 0.12);
}

html[data-theme="jarvis"] .logs-search-icon {
  color: #0090d4;
}

html[data-theme="jarvis"] .logs-row {
  background: #051828;
  border-color: rgba(0, 180, 255, 0.1);
  color: #00b4ff;
}

html[data-theme="jarvis"] .logs-row:hover {
  background: rgba(0, 180, 255, 0.05);
}

html[data-theme="jarvis"] .logs-row--error {
  border-color: rgba(255, 51, 102, 0.3);
  background: rgba(255, 51, 102, 0.05);
}

html[data-theme="jarvis"] .logs-row--error:hover {
  background: rgba(255, 51, 102, 0.09);
}

html[data-theme="jarvis"] .logs-row--warn {
  border-color: rgba(255, 171, 0, 0.3);
  background: rgba(255, 171, 0, 0.05);
}

html[data-theme="jarvis"] .logs-row--warn:hover {
  background: rgba(255, 171, 0, 0.09);
}

html[data-theme="jarvis"] .logs-row--info {
  border-color: rgba(0, 180, 255, 0.18);
  background: rgba(0, 180, 255, 0.04);
}

html[data-theme="jarvis"] .logs-row--info:hover {
  background: rgba(0, 180, 255, 0.08);
}

html[data-theme="jarvis"] .logs-ts {
  color: #0090d4;
}

html[data-theme="jarvis"] .logs-stream {
  background: rgba(0, 180, 255, 0.08);
  color: #00b4ff;
  border-color: rgba(0, 180, 255, 0.2);
}

html[data-theme="jarvis"] .logs-msg-preview {
  color: #00b4ff;
}

html[data-theme="jarvis"] .logs-row-detail {
  background: #010c1a;
  border-color: rgba(0, 180, 255, 0.12);
}

html[data-theme="jarvis"] .btn-logs-group {
  background: #051828;
  border-color: rgba(0, 180, 255, 0.2);
  color: rgba(0, 180, 255, 0.65);
}

html[data-theme="jarvis"] .btn-logs-group:hover {
  background: rgba(0, 180, 255, 0.08);
}

html[data-theme="jarvis"] .header-beta-badge {
  background: linear-gradient(135deg, rgba(0,180,255,0.9), rgba(0,150,255,0.9), rgba(0,180,255,0.9));
  background-size: 300% 300%;
  animation: betaShimmer 3s ease infinite;
  box-shadow: 0 0 10px rgba(0, 180, 255, 0.5);
  color: #ffffff;
}

html[data-theme="jarvis"] .btn-logs-group.active {
  background: #00b4ff;
  border-color: #00b4ff;
  color: #010c1a;
}

html[data-theme="jarvis"] .btn-logs-level {
  background: #051828;
  border-color: rgba(0, 180, 255, 0.18);
  color: rgba(0, 180, 255, 0.65);
}

html[data-theme="jarvis"] .btn-logs-level--all.active {
  background: #00b4ff;
  border-color: #00b4ff;
  color: #010c1a;
}

html[data-theme="jarvis"] .btn-logs-time {
  background: #051828;
  border-color: rgba(0, 180, 255, 0.2);
  color: rgba(0, 180, 255, 0.65);
}

html[data-theme="jarvis"] .btn-logs-time:hover {
  background: rgba(0, 180, 255, 0.08);
  color: #00b4ff;
}

html[data-theme="jarvis"] .btn-logs-time.active {
  background: #00b4ff;
  color: #010c1a;
}

html[data-theme="jarvis"] .btn-logs-refresh,
html[data-theme="jarvis"] .btn-logs-console {
  background: rgba(0, 180, 255, 0.08);
  border-color: rgba(0, 180, 255, 0.25);
  color: #00b4ff;
}

html[data-theme="jarvis"] .btn-logs-refresh:hover {
  background: rgba(0, 180, 255, 0.15);
}

html[data-theme="jarvis"] .logs-count-badge {
  background: rgba(0, 180, 255, 0.15);
  color: #00b4ff;
}

/* ══════════════════════════════════════════
   XRAY
   ══════════════════════════════════════════ */

html[data-theme="jarvis"] .btn-xray-refresh,
html[data-theme="jarvis"] .btn-xray-console {
  background: rgba(0, 180, 255, 0.08);
  border-color: rgba(0, 180, 255, 0.25);
  color: #00b4ff;
}

html[data-theme="jarvis"] .btn-xray-refresh:hover,
html[data-theme="jarvis"] .btn-xray-console:hover {
  background: rgba(0, 180, 255, 0.15);
}

html[data-theme="jarvis"] .btn-xray-time {
  background: #051828;
  border-color: rgba(0, 180, 255, 0.2);
  color: rgba(0, 180, 255, 0.65);
}

html[data-theme="jarvis"] .btn-xray-time:hover {
  background: rgba(0, 180, 255, 0.08);
  color: #00b4ff;
}

html[data-theme="jarvis"] .btn-xray-time.active {
  background: #00b4ff;
  border-color: #00b4ff;
  color: #010c1a;
}

html[data-theme="jarvis"] .xray-stat-card {
  background: #051828;
  border-color: rgba(0, 180, 255, 0.18);
  color: #00b4ff;
  box-shadow: 0 0 16px rgba(0, 180, 255, 0.05);
}

html[data-theme="jarvis"] .xray-stat-card--error {
  background: rgba(255, 51, 102, 0.07);
  border-color: rgba(255, 51, 102, 0.3);
}

html[data-theme="jarvis"] .xray-service-card {
  background: #051828;
  border-color: rgba(0, 180, 255, 0.15);
}

html[data-theme="jarvis"] .xray-service-card--error {
  border-color: rgba(255, 51, 102, 0.3);
  background: rgba(255, 51, 102, 0.05);
}

html[data-theme="jarvis"] .btn-xray-filter {
  background: #051828;
  border-color: rgba(0, 180, 255, 0.2);
  color: rgba(0, 180, 255, 0.65);
}

html[data-theme="jarvis"] .btn-xray-filter:hover {
  background: rgba(0, 180, 255, 0.08);
}

html[data-theme="jarvis"] .btn-xray-filter.active {
  background: #00b4ff;
  border-color: #00b4ff;
  color: #010c1a;
}

html[data-theme="jarvis"] .xray-search-input {
  background: #010c1a;
  border-color: rgba(0, 180, 255, 0.25);
  color: #00b4ff;
}

html[data-theme="jarvis"] .xray-search-input:focus {
  border-color: #00b4ff;
  box-shadow: 0 0 0 3px rgba(0, 180, 255, 0.12);
}

html[data-theme="jarvis"] .xray-search-icon {
  color: #0090d4;
}

html[data-theme="jarvis"] .xray-error-msg {
  background: rgba(255, 51, 102, 0.07);
  color: #ff3366;
}

html[data-theme="jarvis"] .xray-section-card {
  background: #051828;
  border-color: rgba(0, 180, 255, 0.18);
}

html[data-theme="jarvis"] .xray-section-title {
  color: #00b4ff;
  border-color: rgba(0, 180, 255, 0.15);
}

html[data-theme="jarvis"] .xray-row {
  background: transparent;
}

html[data-theme="jarvis"] .xray-row:hover {
  background: rgba(0, 180, 255, 0.05);
}

html[data-theme="jarvis"] .xray-row--selected {
  background: rgba(0, 180, 255, 0.1) !important;
}

html[data-theme="jarvis"] .xray-table td {
  border-color: rgba(0, 180, 255, 0.08);
  color: #00b4ff;
}

html[data-theme="jarvis"] .xray-trace-id {
  background: rgba(0, 180, 255, 0.08);
  color: #00b4ff;
}

html[data-theme="jarvis"] .xray-exec-id {
  background: rgba(0, 180, 255, 0.1);
  color: #00b4ff;
}

html[data-theme="jarvis"] .badge-green {
  background: rgba(34, 197, 94, 0.15);
  color: #4ade80;
}

html[data-theme="jarvis"] .badge-blue {
  background: rgba(0, 180, 255, 0.15);
  color: #00b4ff;
}

html[data-theme="jarvis"] .badge-red {
  background: rgba(255, 51, 102, 0.15);
  color: #ff3366;
}

html[data-theme="jarvis"] .badge-orange {
  background: rgba(249, 115, 22, 0.15);
  color: #fb923c;
}

html[data-theme="jarvis"] .badge-gray {
  background: rgba(0, 180, 255, 0.08);
  color: rgba(0, 180, 255, 0.6);
}

html[data-theme="jarvis"] .xray-detail-panel {
  background: #051828;
  border-color: rgba(0, 180, 255, 0.18);
}

html[data-theme="jarvis"] .xray-detail-header {
  background: #010c1a;
  border-color: rgba(0, 180, 255, 0.15);
}

html[data-theme="jarvis"] .xray-seg-row:hover {
  background: rgba(0, 180, 255, 0.05);
}

html[data-theme="jarvis"] .xray-seg-status {
  background: rgba(34, 197, 94, 0.15);
  color: #4ade80;
}

html[data-theme="jarvis"] .xray-seg-status--error {
  background: rgba(255, 51, 102, 0.15);
  color: #ff3366;
}

html[data-theme="jarvis"] .xray-seg-timeline {
  background: rgba(0, 180, 255, 0.08);
}

html[data-theme="jarvis"] .btn-xray-view {
  background: transparent;
  border-color: rgba(0, 180, 255, 0.2);
  color: rgba(0, 180, 255, 0.65);
}

html[data-theme="jarvis"] .btn-xray-view:hover {
  background: rgba(0, 180, 255, 0.08);
  color: #00b4ff;
}

html[data-theme="jarvis"] .btn-xray-view.active {
  background: rgba(0, 180, 255, 0.12);
  color: #00b4ff;
  box-shadow: 0 0 12px rgba(0, 180, 255, 0.2);
}

html[data-theme="jarvis"] .xray-svcmap-wrap rect[fill="#ffffff"],
html[data-theme="jarvis"] .xray-svcmap-wrap rect[fill="#fff5f5"],
html[data-theme="jarvis"] .xray-svcmap-wrap rect[fill="#fffbeb"] {
  fill: #051828 !important;
}

html[data-theme="jarvis"] .xray-svcmap-wrap rect[stroke="#e2e8f0"] {
  stroke: rgba(0, 180, 255, 0.25) !important;
}

html[data-theme="jarvis"] .xray-svcmap-wrap rect[stroke="#dc2626"] {
  stroke: #ff3366 !important;
}

html[data-theme="jarvis"] .xray-svcmap-wrap rect[stroke="#f59e0b"] {
  stroke: #fb923c !important;
}

html[data-theme="jarvis"] .xray-svcmap-wrap text[fill="#1e293b"] {
  fill: #00b4ff !important;
}

html[data-theme="jarvis"] .xray-svcmap-wrap text[fill="#64748b"],
html[data-theme="jarvis"] .xray-svcmap-wrap text[fill="#94a3b8"],
html[data-theme="jarvis"] .xray-svcmap-wrap text[fill="#b0bec5"] {
  fill: #0090d4 !important;
}

html[data-theme="jarvis"] .xray-svcmap-wrap line[stroke="#f1f5f9"] {
  stroke: rgba(0, 180, 255, 0.15) !important;
}

html[data-theme="jarvis"] .xray-svcmap-wrap path[stroke="#b0bec5"] {
  stroke: rgba(0, 180, 255, 0.35) !important;
}

html[data-theme="jarvis"] .xray-svcmap-wrap marker path {
  fill: #0090d4 !important;
}

/* ══════════════════════════════════════════
   MONITORING
   ══════════════════════════════════════════ */

html[data-theme="jarvis"] .monitoring-section-header {
  color: #00b4ff;
  border-color: rgba(0, 180, 255, 0.2);
  background: linear-gradient(180deg, #051828 0%, #010c1a 100%);
}

html[data-theme="jarvis"] .metric-card {
  background: #051828;
  border-color: rgba(0, 180, 255, 0.2);
  box-shadow: 0 0 16px rgba(0, 180, 255, 0.06);
}

html[data-theme="jarvis"] .metric-card:hover {
  box-shadow: 0 0 24px rgba(0, 180, 255, 0.14);
}

html[data-theme="jarvis"] .metric-card-title {
  color: #00b4ff;
  background: #010c1a;
  border-color: rgba(0, 180, 255, 0.15);
}

html[data-theme="jarvis"] .metric-card-loading {
  color: #0090d4;
}

html[data-theme="jarvis"] .metric-card-error {
  background: rgba(255, 51, 102, 0.07);
  color: #ff3366;
}

html[data-theme="jarvis"] .metric-card-body {
  background: #051828;
}

html[data-theme="jarvis"] .metric-card-img {
  filter: invert(1) hue-rotate(180deg) brightness(0.85) contrast(1.1);
  opacity: 0.95;
}

html[data-theme="jarvis"] .btn-metric-filter {
  background: #051828;
  border-color: rgba(0, 180, 255, 0.2);
  color: rgba(0, 180, 255, 0.65);
}

html[data-theme="jarvis"] .btn-metric-filter:hover {
  background: rgba(0, 180, 255, 0.08);
  color: #00b4ff;
}

html[data-theme="jarvis"] .btn-metric-filter.active {
  background: #00b4ff;
  border-color: #00b4ff;
  color: #010c1a;
}

html[data-theme="jarvis"] .btn-time-range {
  background: #051828;
  border-color: rgba(0, 180, 255, 0.2);
  color: rgba(0, 180, 255, 0.65);
}

html[data-theme="jarvis"] .btn-time-range:hover {
  background: rgba(0, 180, 255, 0.08);
  color: #00b4ff;
}

html[data-theme="jarvis"] .btn-time-range.active {
  background: #00b4ff;
  border-color: #00b4ff;
  color: #010c1a;
}

html[data-theme="jarvis"] .btn-monitoring-refresh,
html[data-theme="jarvis"] .btn-monitoring-console {
  background: rgba(0, 180, 255, 0.08);
  border-color: rgba(0, 180, 255, 0.25);
  color: #00b4ff;
}

html[data-theme="jarvis"] .btn-monitoring-refresh:hover,
html[data-theme="jarvis"] .btn-monitoring-console:hover {
  background: rgba(0, 180, 255, 0.15);
}

/* ══════════════════════════════════════════
   USERS (J.A.R.V.I.S. overrides)
   ══════════════════════════════════════════ */

html[data-theme="jarvis"] .users-table-wrapper {
  background: #051828;
  border-color: rgba(0, 180, 255, 0.18);
  box-shadow: 0 0 20px rgba(0, 180, 255, 0.06);
}

html[data-theme="jarvis"] .users-table th {
  background: #010c1a;
  color: #0090d4;
  border-color: rgba(0, 180, 255, 0.15);
}

html[data-theme="jarvis"] .users-table td {
  border-color: rgba(0, 180, 255, 0.1);
  color: #00b4ff;
}

html[data-theme="jarvis"] .users-table tr:hover td {
  background: rgba(0, 180, 255, 0.04);
}

html[data-theme="jarvis"] .users-th-sortable:hover {
  background: rgba(0, 180, 255, 0.08);
}

html[data-theme="jarvis"] .users-th-active {
  color: #00b4ff;
}

html[data-theme="jarvis"] .users-search-input {
  background: #010c1a;
  border-color: rgba(0, 180, 255, 0.25);
  color: #00b4ff;
}

html[data-theme="jarvis"] .users-search-input:focus {
  border-color: #00b4ff;
  box-shadow: 0 0 0 3px rgba(0, 180, 255, 0.12);
}

html[data-theme="jarvis"] .users-search-icon {
  color: #0090d4;
}

html[data-theme="jarvis"] .tr-search-input {
  background: #010c1a;
  border-color: rgba(0, 180, 255, 0.25);
  color: #00b4ff;
}

html[data-theme="jarvis"] .tr-search-input::placeholder {
  color: #0090d4;
}

html[data-theme="jarvis"] .tr-search-input:focus {
  border-color: #00b4ff;
  box-shadow: 0 0 0 3px rgba(0, 180, 255, 0.12);
}

html[data-theme="jarvis"] .tr-search-icon {
  color: #0090d4;
}

html[data-theme="jarvis"] .users-modal {
  background: #051828;
  border: 1px solid rgba(0, 180, 255, 0.3);
  box-shadow: 0 0 40px rgba(0, 180, 255, 0.15);
  color: #00b4ff;
}

html[data-theme="jarvis"] .users-modal-header {
  border-color: rgba(0, 180, 255, 0.15);
  color: #00b4ff;
}

html[data-theme="jarvis"] .users-modal input,
html[data-theme="jarvis"] .users-modal select {
  background: #010c1a;
  border-color: rgba(0, 180, 255, 0.25);
  color: #00b4ff;
}

html[data-theme="jarvis"] .users-modal input:focus,
html[data-theme="jarvis"] .users-modal select:focus {
  border-color: #00b4ff;
  box-shadow: 0 0 0 3px rgba(0, 180, 255, 0.12);
}

/* ── Activity modal ─────────────────────────────────────────────────────── */
html[data-theme="jarvis"] .activity-status-high {
  background: rgba(255, 171, 0, 0.12);
  color: #ffab00;
  border: 1px solid rgba(255, 171, 0, 0.3);
}
html[data-theme="jarvis"] .activity-status-medium {
  background: rgba(255, 171, 0, 0.07);
  color: #cc8800;
  border: 1px solid rgba(255, 171, 0, 0.2);
}
html[data-theme="jarvis"] .activity-status-expired {
  background: rgba(0, 180, 255, 0.06);
  color: #005a8a;
}
html[data-theme="jarvis"] .activity-status-none {
  background: rgba(0, 180, 255, 0.06);
  color: #005a8a;
}
html[data-theme="jarvis"] .activity-result-badge.pass {
  background: rgba(0, 229, 160, 0.12);
  color: #00e5a0;
}
html[data-theme="jarvis"] .activity-result-badge.fail {
  background: rgba(255, 51, 102, 0.12);
  color: #ff3366;
}

/* ══════════════════════════════════════════
   PROFILE (J.A.R.V.I.S. overrides)
   ══════════════════════════════════════════ */

html[data-theme="jarvis"] .profile-hero {
  background: #051828;
  border: 1px solid rgba(0, 180, 255, 0.2);
  box-shadow: 0 0 30px rgba(0, 180, 255, 0.08);
}

html[data-theme="jarvis"] .profile-avatar {
  background: #010c1a;
  border-color: rgba(0, 180, 255, 0.4);
  color: #00b4ff;
  box-shadow: 0 0 20px rgba(0, 180, 255, 0.25);
}

html[data-theme="jarvis"] .profile-name {
  color: #00b4ff;
}

html[data-theme="jarvis"] .profile-email,
html[data-theme="jarvis"] .profile-sub {
  color: #0090d4;
}

html[data-theme="jarvis"] .profile-card {
  background: #051828;
  border-color: rgba(0, 180, 255, 0.18);
  box-shadow: 0 0 20px rgba(0, 180, 255, 0.05);
}

html[data-theme="jarvis"] .card-header {
  border-color: rgba(0, 180, 255, 0.15);
}

html[data-theme="jarvis"] .card-header h3 {
  color: #00b4ff;
}

html[data-theme="jarvis"] .profile-field-label {
  color: #0090d4;
}

html[data-theme="jarvis"] .profile-field-value {
  color: #00b4ff;
  border-color: rgba(0, 180, 255, 0.15);
}

html[data-theme="jarvis"] .profile-input {
  background: #010c1a;
  border-color: rgba(0, 180, 255, 0.3);
  color: #00b4ff;
}

html[data-theme="jarvis"] .profile-input:focus {
  border-color: #00b4ff;
  box-shadow: 0 0 0 3px rgba(0, 180, 255, 0.12);
}

html[data-theme="jarvis"] .profile-input:disabled {
  background: #02101f;
  color: #0090d4;
}

html[data-theme="jarvis"] .profile-mfa-section {
  background: #051828;
  border-color: rgba(0, 180, 255, 0.18);
}

html[data-theme="jarvis"] .profile-mfa-section h4 {
  color: #00b4ff;
}

html[data-theme="jarvis"] .profile-mfa-on {
  background: rgba(0, 229, 160, 0.08);
  border-color: rgba(0, 229, 160, 0.3);
  color: #00e5a0;
}

html[data-theme="jarvis"] .profile-mfa-off {
  background: rgba(255, 171, 0, 0.08);
  border-color: rgba(255, 171, 0, 0.3);
  color: #ffab00;
}

html[data-theme="jarvis"] .profile-success-msg {
  background: rgba(0, 229, 160, 0.08);
  border-color: rgba(0, 229, 160, 0.3);
  color: #00e5a0;
}

html[data-theme="jarvis"] .profile-error-msg {
  background: rgba(255, 51, 102, 0.08);
  border-color: rgba(255, 51, 102, 0.3);
  color: #ff3366;
}

html[data-theme="jarvis"] .btn-primary {
  background: #00b4ff;
  border-color: #00b4ff;
  color: #010c1a;
  box-shadow: 0 0 10px rgba(0, 180, 255, 0.3);
}

html[data-theme="jarvis"] .btn-primary:hover:not(:disabled) {
  background: #33caff;
  border-color: #33caff;
  box-shadow: 0 0 20px rgba(0, 180, 255, 0.5);
}

html[data-theme="jarvis"] .btn-secondary {
  background: transparent;
  border-color: rgba(0, 180, 255, 0.4);
  color: #00b4ff;
}

html[data-theme="jarvis"] .btn-secondary:hover:not(:disabled) {
  background: rgba(0, 180, 255, 0.1);
}

html[data-theme="jarvis"] .btn-danger,
html[data-theme="jarvis"] .btn-danger-sm {
  background: rgba(255, 51, 102, 0.15);
  border-color: rgba(255, 51, 102, 0.4);
  color: #ff3366;
}

html[data-theme="jarvis"] .btn-danger:hover:not(:disabled),
html[data-theme="jarvis"] .btn-danger-sm:hover {
  background: rgba(255, 51, 102, 0.25);
  box-shadow: 0 0 14px rgba(255, 51, 102, 0.3);
}

html[data-theme="jarvis"] .btn-icon {
  color: #0090d4;
}

html[data-theme="jarvis"] .btn-icon:hover {
  color: #00b4ff;
  background: rgba(0, 180, 255, 0.08);
}

/* ── Profile theme picker (J.A.R.V.I.S.) ── */

html[data-theme="jarvis"] .profile-themes {
  background: #051828;
  border-color: rgba(0, 180, 255, 0.2);
  box-shadow: 0 0 20px rgba(0, 180, 255, 0.06);
}

html[data-theme="jarvis"] .profile-themes-header {
  color: #0090d4;
}

html[data-theme="jarvis"] .profile-theme-option {
  border-color: rgba(0, 180, 255, 0.2);
}

html[data-theme="jarvis"] .profile-theme-option:hover {
  border-color: #00b4ff;
}

html[data-theme="jarvis"] .profile-theme-option--active {
  border-color: #00b4ff;
  box-shadow: 0 0 0 3px rgba(0, 180, 255, 0.16);
}

html[data-theme="jarvis"] .profile-theme-name {
  color: #0090d4;
}

html[data-theme="jarvis"] .profile-theme-option--active .profile-theme-name {
  color: #00b4ff;
}

/* ── Scrollbars ── */
html[data-theme="jarvis"] ::-webkit-scrollbar-track {
  background: #010c1a;
}

html[data-theme="jarvis"] ::-webkit-scrollbar-thumb {
  background: rgba(0, 180, 255, 0.25);
}

html[data-theme="jarvis"] ::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 180, 255, 0.45);
}

/* Rockstar Chat */
html[data-theme="jarvis"] .rockstar-chat-header {
  background: #010c1a !important;
  color: #00b4ff !important;
}

html[data-theme="jarvis"] .rockstar-chat-panel {
  background: #02101f !important;
}

html[data-theme="jarvis"] .rockstar-message.assistant {
  background: #051828 !important;
  color: #00b4ff !important;
}

/* Rockstar Widget */
html[data-theme="jarvis"] .rockstar-widget-header {
  background: #010c1a !important;
  color: #00b4ff !important;
}
html[data-theme="jarvis"] .rockstar-widget-header .actions button {
  background: rgba(0, 180, 255, 0.14) !important;
  color: #00b4ff !important;
  border: 1px solid rgba(0, 180, 255, 0.3) !important;
  border-radius: 6px !important;
}
html[data-theme="jarvis"] .rockstar-widget-header .actions button:hover {
  background: rgba(0, 180, 255, 0.28) !important;
}

html[data-theme="jarvis"] .rockstar-widget-panel {
  background: #051828 !important;
}

html[data-theme="jarvis"] .rockstar-widget-messages .message.assistant {
  background: #02101f !important;
  color: #00b4ff !important;
}

html[data-theme="jarvis"] .rockstar-widget-fab {
  background: #00b4ff !important;
  color: #010c1a !important;
}

/* ── BranchAccess — ba-btn-add (fondo azul holográfico, texto oscuro) ── */
html[data-theme="jarvis"] .ba-btn-add {
  background: #00b4ff;
  color: #010c1a;
  border: none;
  font-weight: 800;
  box-shadow: 0 0 10px rgba(0, 180, 255, 0.35);
}
html[data-theme="jarvis"] .ba-btn-add:hover {
  background: #33caff;
  color: #010c1a;
  opacity: 1;
  box-shadow: 0 0 20px rgba(0, 180, 255, 0.55);
}

/* ── BranchAccess — ba-btn-save (fondo azul holográfico, texto oscuro) ── */
html[data-theme="jarvis"] .ba-btn-save {
  background: #00b4ff;
  color: #010c1a;
  box-shadow: 0 0 8px rgba(0, 180, 255, 0.3);
}
html[data-theme="jarvis"] .ba-btn-save:hover:not(:disabled) {
  background: #33caff;
  color: #010c1a;
  opacity: 1;
  box-shadow: 0 0 16px rgba(0, 180, 255, 0.5);
}

/* ══════════════════════════════════════════════════════════════════════════════
   ████████  ████████  ███████   ██
       ██    ██        ██    ██  ██
       ██    ██████    ██    ██  ██
       ██    ██        ██    ██  ██
       ██    ████████  ███████   ████████

   Star Wars Theme (Jedi Edition) — "May the Force be with you."
   Dark theme | Pure space black #000000 | Crawl yellow #FFE81F | Bright white text
   The Force is strong with this one.
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── CSS Variables ─────────────────────────────────────────────────────────── */

html[data-theme="jedi"] {
  --primary-color:      #FFE81F;
  --primary-dark:       #c4a000;
  --primary-light:      #ffef62;
  --secondary-color:    #0d0d0d;
  --secondary-dark:     #000000;
  --accent-color:       #4488dd;
  --text-primary:       #f0f0f0;
  --text-secondary:     #999999;
  --text-light:         #555555;
  --bg-primary:         #000000;
  --bg-secondary:       #0a0a0a;
  --bg-dark:            #000000;
  --border-color:       rgba(255, 232, 31, 0.3);
  --success:            #00c853;
  --warning:            #FFE81F;
  --danger:             #cc0000;
  --info:               #4488dd;
  --card-bg:            #0d0d0d;
  --input-bg:           #0d0d0d;
  --sidebar-bg:         #050505;
  --table-header-bg:    #050505;
  --hover-bg:           #141414;
  --badge-bg:           #0d0d0d;
  --img-placeholder-bg: #050505;
  --error-color:        #cc0000;
  --btn-primary-text:   #000000;
}

/* ── Body & Starfield ─────────────────────────────────────────────────────── */

html[data-theme="jedi"] body {
  background: #000000;
  color: #f0f0f0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  letter-spacing: 0.01em;
}

@keyframes jediTwinkle {
  0%, 100% { opacity: 0.5; }
  50%       { opacity: 1.0; }
}

html[data-theme="jedi"] body::before {
  content: "";
  position: fixed;
  inset: 0;
  background:
    radial-gradient(1px 1px at 12% 18%, rgba(255,255,255,0.85) 0%, transparent 100%),
    radial-gradient(1px 1px at 23% 67%, rgba(255,255,255,0.6)  0%, transparent 100%),
    radial-gradient(1px 1px at 38% 12%, rgba(255,255,255,0.75) 0%, transparent 100%),
    radial-gradient(1px 1px at 48% 82%, rgba(255,255,255,0.5)  0%, transparent 100%),
    radial-gradient(1px 1px at 57% 33%, rgba(255,255,255,0.8)  0%, transparent 100%),
    radial-gradient(1px 1px at 68% 58%, rgba(255,255,255,0.65) 0%, transparent 100%),
    radial-gradient(1px 1px at 77% 8%,  rgba(255,255,255,0.9)  0%, transparent 100%),
    radial-gradient(1px 1px at 84% 44%, rgba(255,255,255,0.55) 0%, transparent 100%),
    radial-gradient(1px 1px at 91% 72%, rgba(255,255,255,0.7)  0%, transparent 100%),
    radial-gradient(1px 1px at 5%  90%, rgba(255,255,255,0.6)  0%, transparent 100%),
    radial-gradient(1px 1px at 16% 44%, rgba(255,255,255,0.5)  0%, transparent 100%),
    radial-gradient(1px 1px at 29% 28%, rgba(255,255,255,0.7)  0%, transparent 100%),
    radial-gradient(1px 1px at 71% 85%, rgba(255,255,255,0.6)  0%, transparent 100%),
    radial-gradient(2px 2px at 33% 55%, rgba(255,232,31,0.55)  0%, transparent 100%),
    radial-gradient(2px 2px at 65% 22%, rgba(255,232,31,0.4)   0%, transparent 100%),
    radial-gradient(1px 1px at 52% 70%, rgba(100,160,255,0.5)  0%, transparent 100%),
    radial-gradient(ellipse at 25% 25%, rgba(255,232,31,0.025) 0%, transparent 50%),
    radial-gradient(ellipse at 75% 75%, rgba(68,136,221,0.025) 0%, transparent 50%);
  pointer-events: none;
  z-index: 0;
}

/* ── Layout ─────────────────────────────────────────────────────────────────── */

html[data-theme="jedi"] .layout-main {
  background: transparent;
  position: relative;
  z-index: 1;
}

html[data-theme="jedi"] .header {
  background: rgba(0, 0, 0, 0.97);
  border-bottom: 1px solid rgba(255, 232, 31, 0.45);
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.9), 0 1px 0 rgba(255, 232, 31, 0.25);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

html[data-theme="jedi"] .header-logo-img {
  filter: brightness(1.2) drop-shadow(0 0 8px rgba(255, 232, 31, 0.4));
}

html[data-theme="jedi"] .header-logo-suffix {
  color: #FFE81F;
  border-left-color: rgba(255, 232, 31, 0.35);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: 0.75em;
  font-weight: 700;
}

html[data-theme="jedi"] .header-beta-badge {
  background: #FFE81F;
  color: #000000;
  border: 1px solid #FFE81F;
  box-shadow: 0 0 16px rgba(255, 232, 31, 0.8), 0 0 32px rgba(255, 232, 31, 0.4);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  animation: jediTwinkle 1.8s ease-in-out infinite;
}

html[data-theme="jedi"] .menu-toggle { color: #FFE81F; }
html[data-theme="jedi"] .menu-toggle:hover { color: #ffffff; text-shadow: 0 0 14px rgba(255,232,31,0.9); }

html[data-theme="jedi"] .header-user-info  { color: #f0f0f0; }
html[data-theme="jedi"] .header-user-name  { color: #f0f0f0; font-weight: 600; }
html[data-theme="jedi"] .header-user-role  {
  color: #FFE81F;
  font-size: 0.78em;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 700;
}

/* Rockstar Widget */
html[data-theme="jedi"] .rockstar-widget-header  { background: #FFE81F !important; color: #000000 !important; font-weight: 900 !important; letter-spacing: 0.1em !important; }
html[data-theme="jedi"] .rockstar-widget-header .actions button { background: rgba(0, 0, 0, 0.15) !important; color: #000000 !important; border: 1px solid rgba(0, 0, 0, 0.2) !important; border-radius: 6px !important; }
html[data-theme="jedi"] .rockstar-widget-fab      { background: #FFE81F !important; color: #000000 !important; box-shadow: 0 4px 24px rgba(255,232,31,0.65) !important; }
html[data-theme="jedi"] .rockstar-widget-messages .message.assistant { background: rgba(255,232,31,0.06) !important; border-left: 3px solid #FFE81F !important; color: #f0f0f0 !important; }

html[data-theme="jedi"] .user-avatar {
  background: #FFE81F;
  border: 2px solid rgba(255, 232, 31, 0.8);
  color: #000000;
  box-shadow: 0 0 24px rgba(255, 232, 31, 0.6);
  font-weight: 900;
}

html[data-theme="jedi"] .btn-logout,
html[data-theme="jedi"] .logout-button {
  background: transparent;
  color: #FFE81F;
  border: 1px solid rgba(255, 232, 31, 0.4);
}
html[data-theme="jedi"] .btn-logout:hover,
html[data-theme="jedi"] .logout-button:hover {
  background: rgba(255, 232, 31, 0.1);
  border-color: #FFE81F;
  box-shadow: 0 0 18px rgba(255, 232, 31, 0.4);
}

html[data-theme="jedi"] .btn-export-pdf {
  background: transparent;
  color: #FFE81F;
  border: 1px solid rgba(255, 232, 31, 0.4);
}
html[data-theme="jedi"] .btn-export-pdf:hover {
  background: rgba(255, 232, 31, 0.1);
  border-color: #FFE81F;
  box-shadow: 0 0 18px rgba(255, 232, 31, 0.4);
}

/* ── Sidebar ─────────────────────────────────────────────────────────────────── */

html[data-theme="jedi"] .sidebar {
  background: #050505;
  border-right: 1px solid rgba(255, 232, 31, 0.3);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

html[data-theme="jedi"] .nav-link {
  color: #aaaaaa;
  border-left: 2px solid transparent;
  transition: all 0.2s ease;
  letter-spacing: 0.04em;
}
html[data-theme="jedi"] .nav-link:hover {
  background: rgba(255, 232, 31, 0.07);
  color: #FFE81F;
  border-left-color: rgba(255, 232, 31, 0.6);
}
html[data-theme="jedi"] .nav-link.active {
  background: rgba(255, 232, 31, 0.11);
  color: #FFE81F;
  border-left-color: #FFE81F;
  font-weight: 700;
  box-shadow: inset 0 0 20px rgba(255, 232, 31, 0.1), 0 0 8px rgba(255, 232, 31, 0.12);
  text-shadow: 0 0 8px rgba(255, 232, 31, 0.45);
  letter-spacing: 0.06em;
}
html[data-theme="jedi"] .nav-section-title {
  color: #444444;
  font-size: 0.65rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}
html[data-theme="jedi"] .sidebar-icon { color: #FFE81F; }

/* ── Scrollbars ──────────────────────────────────────────────────────────────── */

html[data-theme="jedi"] ::-webkit-scrollbar-track { background: #050505; }
html[data-theme="jedi"] ::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #FFE81F, #c4a000);
  border-radius: 10px;
  border: 2px solid #050505;
}
html[data-theme="jedi"] ::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #ffef62, #FFE81F);
  box-shadow: 0 0 14px rgba(255, 232, 31, 0.7);
}

/* ── Profile theme picker ──────────────────────────────────────────────────── */

html[data-theme="jedi"] .profile-themes {
  background: #0d0d0d;
  border: 1px solid rgba(255, 232, 31, 0.35);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.9), inset 0 1px 0 rgba(255, 232, 31, 0.1);
}
html[data-theme="jedi"] .profile-themes-header {
  color: #FFE81F;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-weight: 700;
}
html[data-theme="jedi"] .profile-themes-icon { color: #FFE81F; }
html[data-theme="jedi"] .profile-theme-option { border-color: rgba(255, 232, 31, 0.2); background: #0a0a0a; }
html[data-theme="jedi"] .profile-theme-option:hover {
  border-color: #FFE81F;
  background: rgba(255, 232, 31, 0.06);
  box-shadow: 0 0 22px rgba(255, 232, 31, 0.3);
}
html[data-theme="jedi"] .profile-theme-option--active {
  border-color: #FFE81F;
  background: rgba(255, 232, 31, 0.09);
  box-shadow: 0 0 0 3px rgba(255, 232, 31, 0.28), 0 0 28px rgba(255, 232, 31, 0.35);
}
html[data-theme="jedi"] .profile-theme-name { color: #f0f0f0; }
html[data-theme="jedi"] .profile-theme-option--active .profile-theme-name { color: #FFE81F; font-weight: 900; }
html[data-theme="jedi"] .profile-theme-active-dot { background: #FFE81F; box-shadow: 0 0 14px rgba(255, 232, 31, 0.9); }

/* ── Profile Hero & Cards ──────────────────────────────────────────────────── */

html[data-theme="jedi"] .profile-hero {
  background: #0d0d0d;
  border: 1px solid rgba(255, 232, 31, 0.35);
  border-left: 4px solid #FFE81F;
  box-shadow: 0 0 30px rgba(255, 232, 31, 0.1), 0 8px 32px rgba(0, 0, 0, 0.7);
}
html[data-theme="jedi"] .profile-avatar-initials {
  background: #FFE81F;
  color: #000000;
  border: 3px solid rgba(255, 232, 31, 0.7);
  box-shadow: 0 0 32px rgba(255, 232, 31, 0.7), 0 8px 24px rgba(0, 0, 0, 0.6);
  font-weight: 900;
}
html[data-theme="jedi"] .profile-hero-info h1 { color: #f0f0f0; }
html[data-theme="jedi"] .profile-email { color: #888888; }
html[data-theme="jedi"] .profile-role-badge {
  background: rgba(255, 232, 31, 0.12);
  color: #FFE81F;
  border: 1px solid rgba(255, 232, 31, 0.45);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 700;
}
html[data-theme="jedi"] .profile-card {
  background: #0d0d0d;
  border: 1px solid rgba(255, 232, 31, 0.2);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.7);
}
html[data-theme="jedi"] .card-header { border-bottom: 1px solid rgba(255, 232, 31, 0.2); }
html[data-theme="jedi"] .card-header h3 { color: #FFE81F; text-transform: uppercase; letter-spacing: 0.12em; font-weight: 700; }
html[data-theme="jedi"] .form-group { border-bottom: 1px solid rgba(255, 232, 31, 0.08); }
html[data-theme="jedi"] .form-group label { color: #777777; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.78em; }
html[data-theme="jedi"] .field-value { color: #f0f0f0; }
html[data-theme="jedi"] .field-hint,
html[data-theme="jedi"] .security-message { color: #555555; }
html[data-theme="jedi"] .form-input,
html[data-theme="jedi"] .profile-role-select { background: #0a0a0a; border: 1px solid rgba(255, 232, 31, 0.25); color: #f0f0f0; }
html[data-theme="jedi"] .form-input:focus {
  border-color: #FFE81F;
  box-shadow: 0 0 0 2px rgba(255, 232, 31, 0.18), 0 0 20px rgba(255, 232, 31, 0.2);
  background: #000000;
}
html[data-theme="jedi"] .form-input::placeholder { color: #444444; }
html[data-theme="jedi"] .profile-role-select option { background: #0a0a0a; color: #f0f0f0; }

/* ── Buttons ──────────────────────────────────────────────────────────────── */

html[data-theme="jedi"] .btn-primary {
  background: #FFE81F;
  color: #000000;
  border: none;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  box-shadow: 0 4px 20px rgba(255, 232, 31, 0.55), 0 0 0 1px rgba(255, 232, 31, 0.4);
}
html[data-theme="jedi"] .btn-primary:hover:not(:disabled) {
  background: #ffef62;
  box-shadow: 0 6px 32px rgba(255, 232, 31, 0.75), 0 0 0 2px rgba(255, 232, 31, 0.55);
  transform: translateY(-1px);
}
html[data-theme="jedi"] .btn-secondary { background: transparent; color: #aaaaaa; border: 1px solid rgba(255, 232, 31, 0.22); }
html[data-theme="jedi"] .btn-secondary:hover:not(:disabled) { background: rgba(255, 232, 31, 0.08); color: #FFE81F; border-color: rgba(255, 232, 31, 0.55); }
html[data-theme="jedi"] .btn-icon { color: #FFE81F; }
html[data-theme="jedi"] .btn-icon:hover { color: #ffffff; text-shadow: 0 0 14px rgba(255, 232, 31, 0.7); }
html[data-theme="jedi"] .btn-danger { background: rgba(204, 0, 0, 0.12); color: #ff4444; border: 1px solid rgba(204, 0, 0, 0.4); }
html[data-theme="jedi"] .btn-danger:hover:not(:disabled) { background: rgba(204, 0, 0, 0.22); border-color: #cc0000; box-shadow: 0 0 18px rgba(204, 0, 0, 0.45); }

/* ── MFA Section ──────────────────────────────────────────────────────────── */

html[data-theme="jedi"] .mfa-section { border-top: 1px solid rgba(255, 232, 31, 0.15); }
html[data-theme="jedi"] .mfa-icon { color: #FFE81F; }
html[data-theme="jedi"] .mfa-status-badge.active  { background: rgba(0,200,83,0.15); color: #00e676; border: 1px solid rgba(0,200,83,0.4); }
html[data-theme="jedi"] .mfa-status-badge.inactive { background: rgba(80,80,80,0.2); color: #777777; border: 1px solid rgba(80,80,80,0.4); }
html[data-theme="jedi"] .mfa-enabled-message { color: #888888; }
html[data-theme="jedi"] .mfa-qr-container { background: rgba(248,248,248,0.95); border: 2px solid #FFE81F; box-shadow: 0 0 28px rgba(255,232,31,0.45); }
html[data-theme="jedi"] .mfa-secret-key code { background: #000000; color: #FFE81F; border: 1px solid rgba(255,232,31,0.45); }
html[data-theme="jedi"] .mfa-step-number { background: #FFE81F; color: #000000; font-weight: 900; }
html[data-theme="jedi"] .mfa-description,
html[data-theme="jedi"] .mfa-step p { color: #888888; }
html[data-theme="jedi"] .mfa-disable-warning { background: rgba(204,0,0,0.1); border-left: 3px solid #cc0000; color: #f0f0f0; }
html[data-theme="jedi"] .message.success { background: rgba(0,200,83,0.1); color: #00e676; border-left: 4px solid #00c853; }
html[data-theme="jedi"] .message.error   { background: rgba(204,0,0,0.1); color: #ff4444; border-left: 4px solid #cc0000; }

/* ── Dashboard ──────────────────────────────────────────────────────────── */

html[data-theme="jedi"] .stat-card,
html[data-theme="jedi"] .dashboard-card,
html[data-theme="jedi"] .health-section-row,
html[data-theme="jedi"] .dashboard-manual-sync-box,
html[data-theme="jedi"] .dashboard-schedule-row {
  background: #0d0d0d;
  border: 1px solid rgba(255, 232, 31, 0.28);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.7);
  color: #f0f0f0;
}
html[data-theme="jedi"] .stat-card:hover,
html[data-theme="jedi"] .dashboard-card:hover {
  border-color: rgba(255, 232, 31, 0.65);
  box-shadow: 0 0 0 1px rgba(255, 232, 31, 0.3), 0 8px 32px rgba(255, 232, 31, 0.18);
  transform: translateY(-2px);
}
html[data-theme="jedi"] .stat-value { color: #FFE81F; font-weight: 900; text-shadow: 0 0 18px rgba(255, 232, 31, 0.55); }
html[data-theme="jedi"] .stat-label { color: #777777; text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.73em; font-weight: 600; }
html[data-theme="jedi"] .dashboard-schedule-btn { background: transparent; border: 1px solid rgba(255, 232, 31, 0.4); color: #FFE81F; }
html[data-theme="jedi"] .dashboard-schedule-btn:hover:not(:disabled) { background: rgba(255, 232, 31, 0.08); border-color: #FFE81F; box-shadow: 0 0 18px rgba(255, 232, 31, 0.35); }
html[data-theme="jedi"] .health-category-title { color: #FFE81F; text-transform: uppercase; letter-spacing: 0.12em; font-weight: 700; text-shadow: 0 0 14px rgba(255, 232, 31, 0.45); }
html[data-theme="jedi"] .health-chip { background: #0d0d0d; border: 1px solid rgba(255, 232, 31, 0.28); }
html[data-theme="jedi"] .health-chip-label { color: #888888; }
html[data-theme="jedi"] .health-chip-value { color: #FFE81F; font-weight: 700; }
html[data-theme="jedi"] .sync-info-label  { color: #777777; }
html[data-theme="jedi"] .sync-info-value  { color: #f0f0f0; }
html[data-theme="jedi"] .dashboard-schedule-label { color: #777777; }
html[data-theme="jedi"] .dashboard-schedule-value { color: #f0f0f0; }

/* ── Reports / Analytics ──────────────────────────────────────────────────── */

html[data-theme="jedi"] .analytics-page,
html[data-theme="jedi"] .reports-page,
html[data-theme="jedi"] .page-wrapper { background: transparent; }

html[data-theme="jedi"] .analytics-card,
html[data-theme="jedi"] .report-card,
html[data-theme="jedi"] .kpi-card,
html[data-theme="jedi"] .data-card {
  background: #0d0d0d;
  border: 1px solid rgba(255, 232, 31, 0.22);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.6);
  color: #f0f0f0;
}
html[data-theme="jedi"] .analytics-card:hover,
html[data-theme="jedi"] .kpi-card:hover { border-color: rgba(255, 232, 31, 0.55); box-shadow: 0 0 22px rgba(255, 232, 31, 0.14); }

html[data-theme="jedi"] .kpi-value            { color: #FFE81F; font-weight: 900; }
html[data-theme="jedi"] .kpi-label            { color: #777777; text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.78em; }
html[data-theme="jedi"] .kpi-trend.positive   { color: #00c853; }
html[data-theme="jedi"] .kpi-trend.negative   { color: #cc0000; }
html[data-theme="jedi"] .segment-stat-value   { color: #FFE81F; font-weight: 700; }
html[data-theme="jedi"] .segment-stat-label   { color: #777777; }
html[data-theme="jedi"] .meta-label           { color: #777777; }
html[data-theme="jedi"] .meta-value           { color: #f0f0f0; }

html[data-theme="jedi"] .period-selector-btn { background: transparent; border: 1px solid rgba(255, 232, 31, 0.22); color: #777777; }
html[data-theme="jedi"] .period-selector-btn:hover { background: rgba(255, 232, 31, 0.07); border-color: rgba(255, 232, 31, 0.45); color: #FFE81F; }
html[data-theme="jedi"] .period-selector-btn.active { background: #FFE81F; border-color: #FFE81F; color: #000000; font-weight: 900; box-shadow: 0 0 18px rgba(255, 232, 31, 0.55); }

html[data-theme="jedi"] .section-title    { color: #FFE81F; text-transform: uppercase; letter-spacing: 0.14em; font-weight: 700; }
html[data-theme="jedi"] .section-subtitle { color: #777777; }

/* ── Settings / Roles / Brand Flags ───────────────────────────────────────── */

html[data-theme="jedi"] .settings-section,
html[data-theme="jedi"] .roles-card,
html[data-theme="jedi"] .brand-card { background: #0d0d0d; border: 1px solid rgba(255, 232, 31, 0.22); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.6); }

html[data-theme="jedi"] .settings-label { color: #777777; }
html[data-theme="jedi"] .settings-value { color: #f0f0f0; }

html[data-theme="jedi"] .roles-page-header h1,
html[data-theme="jedi"] .brand-page-header h1,
html[data-theme="jedi"] .page-title { color: #FFE81F; text-shadow: 0 0 18px rgba(255, 232, 31, 0.4); }

html[data-theme="jedi"] .roles-card-title,
html[data-theme="jedi"] .brand-card-name        { color: #f0f0f0; }
html[data-theme="jedi"] .roles-card-description,
html[data-theme="jedi"] .brand-card-description  { color: #666666; }

/* ── Monitoring ────────────────────────────────────────────────────────────── */

html[data-theme="jedi"] .monitoring-page,
html[data-theme="jedi"] .monitoring-card,
html[data-theme="jedi"] .metric-card { background: #000000; border: 1px solid rgba(255, 232, 31, 0.22); color: #f0f0f0; }
html[data-theme="jedi"] .metric-value { color: #FFE81F; font-weight: 700; }
html[data-theme="jedi"] .metric-label { color: #777777; }
html[data-theme="jedi"] .metric-unit  { color: #555555; }

/* ── Error Logs / XRay ──────────────────────────────────────────────────────── */

html[data-theme="jedi"] .error-logs-card,
html[data-theme="jedi"] .xray-card,
html[data-theme="jedi"] .log-entry { background: #0d0d0d; border: 1px solid rgba(255, 232, 31, 0.15); color: #f0f0f0; }
html[data-theme="jedi"] .log-entry-level.error { color: #ff4444; font-weight: 700; }
html[data-theme="jedi"] .log-entry-level.warn  { color: #FFE81F; }
html[data-theme="jedi"] .log-entry-level.info  { color: #4488dd; }
html[data-theme="jedi"] .error-log-message { color: #aaaaaa; }
html[data-theme="jedi"] .error-log-time    { color: #555555; }

/* ── Monitoring filter buttons ─────────────────────────────────────────────── */
html[data-theme="jedi"] .btn-metric-filter { background: #0a0a0a; border: 1px solid rgba(255,232,31,0.25); color: #888888; }
html[data-theme="jedi"] .btn-metric-filter:hover { background: rgba(255,232,31,0.08); border-color: rgba(255,232,31,0.5); color: #FFE81F; }
html[data-theme="jedi"] .btn-metric-filter.active { background: rgba(255,232,31,0.15); border-color: #FFE81F; color: #FFE81F; }

/* ── Settings mode buttons ─────────────────────────────────────────────────── */
html[data-theme="jedi"] .settings-mode-btn { background: #0a0a0a; border: 1px solid rgba(255,232,31,0.2); color: #888888; }
html[data-theme="jedi"] .settings-mode-btn:hover:not(:disabled) { background: rgba(255,232,31,0.06); color: #FFE81F; }
html[data-theme="jedi"] .settings-mode-btn.active { background: rgba(255,232,31,0.12); border-color: rgba(255,232,31,0.5); color: #FFE81F; box-shadow: 0 0 10px rgba(255,232,31,0.12); }

/* ── Error log filters / search / cards ────────────────────────────────────── */
html[data-theme="jedi"] .logs-stat-card { background: #0d0d0d; border: 1px solid rgba(255,232,31,0.2); color: #f0f0f0; }
html[data-theme="jedi"] .logs-stat-card--error { border-color: rgba(255,68,68,0.4); }
html[data-theme="jedi"] .logs-stat-card--warn  { border-color: rgba(255,232,31,0.4); }
html[data-theme="jedi"] .logs-section-card { background: #0d0d0d; border: 1px solid rgba(255,232,31,0.15); color: #f0f0f0; }
html[data-theme="jedi"] .btn-logs-group,
html[data-theme="jedi"] .btn-logs-level { background: #0a0a0a; border: 1px solid rgba(255,232,31,0.22); color: #888888; }
html[data-theme="jedi"] .btn-logs-group:hover,
html[data-theme="jedi"] .btn-logs-level:hover { background: rgba(255,232,31,0.06); border-color: rgba(255,232,31,0.4); color: #FFE81F; }
html[data-theme="jedi"] .btn-logs-group.active,
html[data-theme="jedi"] .btn-logs-level.active { background: rgba(255,232,31,0.14); border-color: #FFE81F; color: #FFE81F; }
html[data-theme="jedi"] .logs-search-input { background: #0a0a0a; border: 1px solid rgba(255,232,31,0.25); color: #f0f0f0; }
html[data-theme="jedi"] .logs-search-input:focus { border-color: #FFE81F; box-shadow: 0 0 0 2px rgba(255,232,31,0.15); }
html[data-theme="jedi"] .logs-search-input::placeholder { color: #555555; }

/* ── Users Table / Modals ──────────────────────────────────────────────────── */

html[data-theme="jedi"] .users-table-wrapper,
html[data-theme="jedi"] .users-card { background: #0d0d0d; border: 1px solid rgba(255, 232, 31, 0.22); }
html[data-theme="jedi"] .users-table thead tr { background: #050505; border-bottom: 2px solid rgba(255, 232, 31, 0.35); }
html[data-theme="jedi"] .users-table th { color: #FFE81F; text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.78em; }
html[data-theme="jedi"] .users-table td { color: #f0f0f0; }
html[data-theme="jedi"] .users-table tbody tr { border-bottom: 1px solid rgba(255, 232, 31, 0.07); }
html[data-theme="jedi"] .users-table tbody tr:hover { background: rgba(255, 232, 31, 0.04); }
html[data-theme="jedi"] .users-status-label.enabled  { background: rgba(0,200,83,0.12); color: #00c853; border: 1px solid rgba(0,200,83,0.3); }
html[data-theme="jedi"] .users-status-label.disabled { background: rgba(204,0,0,0.12); color: #cc0000; border: 1px solid rgba(204,0,0,0.3); }
html[data-theme="jedi"] .users-modal-overlay { background: rgba(0, 0, 0, 0.92); }
html[data-theme="jedi"] .users-modal {
  background: #0d0d0d;
  border: 1px solid rgba(255, 232, 31, 0.35);
  box-shadow: 0 0 48px rgba(255, 232, 31, 0.14), 0 24px 80px rgba(0, 0, 0, 0.9);
  color: #f0f0f0;
}
html[data-theme="jedi"] .users-modal-header { border-bottom: 1px solid rgba(255, 232, 31, 0.22); }
html[data-theme="jedi"] .users-modal-header h2 { color: #FFE81F; text-transform: uppercase; letter-spacing: 0.1em; }
html[data-theme="jedi"] .users-modal-form label { color: #777777; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.78em; }
html[data-theme="jedi"] .users-modal-form input,
html[data-theme="jedi"] .users-modal-form select { background: #0a0a0a; border: 1px solid rgba(255, 232, 31, 0.22); color: #f0f0f0; }
html[data-theme="jedi"] .users-modal-form input:focus,
html[data-theme="jedi"] .users-modal-form select:focus { border-color: #FFE81F; box-shadow: 0 0 0 2px rgba(255, 232, 31, 0.18); }
html[data-theme="jedi"] .users-modal-form select option { background: #0a0a0a; color: #f0f0f0; }
html[data-theme="jedi"] .users-role-select option { background: #0a0a0a; color: #f0f0f0; }

/* ── Activity / Inventory Modal ───────────────────────────────────────────── */

html[data-theme="jedi"] .activity-modal-overlay { background: rgba(0, 0, 0, 0.92); }
html[data-theme="jedi"] .activity-modal,
html[data-theme="jedi"] .inventory-modal { background: #0d0d0d; border: 1px solid rgba(255, 232, 31, 0.35); box-shadow: 0 0 48px rgba(255, 232, 31, 0.12), 0 24px 80px rgba(0, 0, 0, 0.9); color: #f0f0f0; }
html[data-theme="jedi"] .activity-modal-header,
html[data-theme="jedi"] .inventory-modal-header { border-bottom: 1px solid rgba(255, 232, 31, 0.22); }
html[data-theme="jedi"] .activity-modal-title { color: #FFE81F; }

/* ── Analytics hub cards ──────────────────────────────────────────────────── */

html[data-theme="jedi"] .analytics-hub-card { background: #0d0d0d; border: 1px solid rgba(255, 232, 31, 0.22); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.6); }
html[data-theme="jedi"] .analytics-hub-card:hover { border-color: rgba(255, 232, 31, 0.6); box-shadow: 0 0 28px rgba(255, 232, 31, 0.18), 0 8px 32px rgba(0, 0, 0, 0.7); transform: translateY(-2px); }
html[data-theme="jedi"] .analytics-hub-card h3 { color: #f0f0f0; }
html[data-theme="jedi"] .analytics-hub-card p  { color: #666666; }

/* ── Brand Flags ──────────────────────────────────────────────────────────── */

html[data-theme="jedi"] .brand-flag-card { background: #0d0d0d; border: 1px solid rgba(255, 232, 31, 0.22); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.6); }
html[data-theme="jedi"] .brand-flag-card.active-brand { border-color: rgba(255, 232, 31, 0.55); box-shadow: 0 0 22px rgba(255, 232, 31, 0.14); }
html[data-theme="jedi"] .brand-flag-name { color: #f0f0f0; font-weight: 700; }
html[data-theme="jedi"] .brand-flag-status.active   { color: #00c853; }
html[data-theme="jedi"] .brand-flag-status.inactive { color: #555555; }

html[data-theme="jedi"] .brand-flags-filter-tabs {
  background: rgba(5, 5, 5, 0.9);
  border-color: rgba(255, 232, 31, 0.25);
}

html[data-theme="jedi"] .brand-flags-filter-btn {
  background: rgba(5, 5, 5, 0.9);
  border-right-color: rgba(255, 232, 31, 0.15);
  color: #888888;
}

html[data-theme="jedi"] .brand-flags-filter-btn:hover {
  background: rgba(255, 232, 31, 0.08);
  color: #f0f0f0;
}

html[data-theme="jedi"] .brand-flags-filter-btn.active {
  background: rgba(255, 232, 31, 0.18);
  color: #FFE81F;
}

html[data-theme="jedi"] .brand-flags-search {
  background: rgba(5, 5, 5, 0.85);
  border-color: rgba(255, 232, 31, 0.25);
  color: #f0f0f0;
}

html[data-theme="jedi"] .brand-flags-search:focus {
  border-color: #FFE81F;
  box-shadow: 0 0 0 3px rgba(255, 232, 31, 0.12);
}

html[data-theme="jedi"] .brand-flags-search::placeholder {
  color: #555555;
}

html[data-theme="jedi"] .brand-flags-summary-item {
  background: rgba(5, 5, 5, 0.85);
  border: 1px solid rgba(255, 232, 31, 0.2);
  color: #f0f0f0;
}

html[data-theme="jedi"] .brand-flags-summary-item.active {
  border-color: rgba(255, 232, 31, 0.5);
  color: #FFE81F;
}

html[data-theme="jedi"] .brand-flags-summary-item.inactive {
  border-color: rgba(255, 232, 31, 0.1);
  color: #666666;
}

html[data-theme="jedi"] .brand-flag-state-pill.active {
  background: rgba(255, 232, 31, 0.14);
  color: #FFE81F;
}

html[data-theme="jedi"] .brand-flag-state-pill.inactive {
  background: rgba(0, 0, 0, 0.5);
  color: #555555;
}

html[data-theme="jedi"] .brand-flag-slider {
  background: rgba(255, 232, 31, 0.2);
}

html[data-theme="jedi"] .brand-flag-card h3 {
  color: #f0f0f0;
}

/* ── Roles ─────────────────────────────────────────────────────────────────── */

html[data-theme="jedi"] .roles-table-row:hover { background: rgba(255, 232, 31, 0.04); }
html[data-theme="jedi"] .roles-table th { color: #FFE81F; background: #050505; text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.78em; }
html[data-theme="jedi"] .roles-table td { color: #f0f0f0; border-bottom: 1px solid rgba(255, 232, 31, 0.07); }
html[data-theme="jedi"] .role-badge { background: rgba(255, 232, 31, 0.1); color: #FFE81F; border: 1px solid rgba(255, 232, 31, 0.35); font-weight: 700; letter-spacing: 0.08em; }

/* ── Dashboard Quick Access ───────────────────────────────────────────────── */

html[data-theme="jedi"] .dashboard-quick-access-card { background: #0d0d0d; border: 1px solid rgba(255, 232, 31, 0.22); }
html[data-theme="jedi"] .dashboard-quick-link { color: #aaaaaa; border: 1px solid rgba(255, 232, 31, 0.12); background: rgba(0, 0, 0, 0.6); }
html[data-theme="jedi"] .dashboard-quick-link:hover { color: #FFE81F; border-color: rgba(255, 232, 31, 0.5); background: rgba(255, 232, 31, 0.07); box-shadow: 0 0 18px rgba(255, 232, 31, 0.14); }
html[data-theme="jedi"] .dashboard-section-title { color: #FFE81F; text-transform: uppercase; letter-spacing: 0.12em; font-weight: 700; }
html[data-theme="jedi"] .brand-summary-chip { background: #0a0a0a; border: 1px solid rgba(255, 232, 31, 0.22); color: #f0f0f0; }
html[data-theme="jedi"] .brand-summary-chip .chip-value { color: #FFE81F; font-weight: 900; }

/* ── Reports / Gonher Inventory ───────────────────────────────────────────── */

html[data-theme="jedi"] .gonher-inventory-card,
html[data-theme="jedi"] .gonher-inventory-table-wrapper { background: #0d0d0d; border: 1px solid rgba(255, 232, 31, 0.22); color: #f0f0f0; }
html[data-theme="jedi"] .gonher-inventory-table thead tr { background: #050505; }
html[data-theme="jedi"] .gonher-inventory-table th { color: #FFE81F; text-transform: uppercase; letter-spacing: 0.08em; }
html[data-theme="jedi"] .gonher-inventory-table td { color: #f0f0f0; border-bottom: 1px solid rgba(255, 232, 31, 0.07); }
html[data-theme="jedi"] .gonher-inventory-table tbody tr:hover { background: rgba(255, 232, 31, 0.04); }

/* ── Settings / General ───────────────────────────────────────────────────── */

html[data-theme="jedi"] .settings-page,
html[data-theme="jedi"] .settings-card { background: #0d0d0d; border: 1px solid rgba(255, 232, 31, 0.22); color: #f0f0f0; }
html[data-theme="jedi"] .settings-header h1 { color: #FFE81F; }

/* ── Monitoring Charts / Widgets ──────────────────────────────────────────── */

html[data-theme="jedi"] .monitoring-section-card { background: #0d0d0d; border: 1px solid rgba(255, 232, 31, 0.22); color: #f0f0f0; }
html[data-theme="jedi"] .monitoring-chart-title  { color: #FFE81F; text-transform: uppercase; letter-spacing: 0.1em; }
html[data-theme="jedi"] .monitoring-stat-value   { color: #FFE81F; font-weight: 700; }
html[data-theme="jedi"] .monitoring-stat-label   { color: #777777; }

/* ── Modal shared ──────────────────────────────────────────────────────────── */

html[data-theme="jedi"] .modal-overlay { background: rgba(0, 0, 0, 0.92); }
html[data-theme="jedi"] .modal-content,
html[data-theme="jedi"] .modal-box { background: #0d0d0d; border: 1px solid rgba(255, 232, 31, 0.35); box-shadow: 0 0 48px rgba(255, 232, 31, 0.14), 0 24px 80px rgba(0, 0, 0, 0.95); color: #f0f0f0; }
html[data-theme="jedi"] .modal-header,
html[data-theme="jedi"] .modal-title { color: #FFE81F; border-bottom: 1px solid rgba(255, 232, 31, 0.22); }
html[data-theme="jedi"] .modal-close-btn { color: #777777; background: transparent; border: 1px solid rgba(255, 232, 31, 0.15); }
html[data-theme="jedi"] .modal-close-btn:hover { color: #FFE81F; border-color: rgba(255, 232, 31, 0.55); background: rgba(255, 232, 31, 0.07); }

/* ── Loading / Empty States ────────────────────────────────────────────────── */

html[data-theme="jedi"] .loading-spinner { border-top-color: #FFE81F; }
html[data-theme="jedi"] .loading-text    { color: #777777; }
html[data-theme="jedi"] .empty-state     { color: #555555; }
html[data-theme="jedi"] .empty-icon      { color: #FFE81F; opacity: 0.45; }

/* ── Badges / Tags ──────────────────────────────────────────────────────────── */

html[data-theme="jedi"] .badge-success { background: rgba(0,200,83,0.15); color: #00c853; border: 1px solid rgba(0,200,83,0.35); }
html[data-theme="jedi"] .badge-warning { background: rgba(255,232,31,0.15); color: #FFE81F; border: 1px solid rgba(255,232,31,0.35); }
html[data-theme="jedi"] .badge-danger  { background: rgba(204,0,0,0.15); color: #ff4444; border: 1px solid rgba(204,0,0,0.35); }
html[data-theme="jedi"] .badge-info    { background: rgba(68,136,221,0.15); color: #4488dd; border: 1px solid rgba(68,136,221,0.35); }

/* ── Activity Log ──────────────────────────────────────────────────────────── */

html[data-theme="jedi"] .activity-log-row { border-bottom: 1px solid rgba(255, 232, 31, 0.07); }
html[data-theme="jedi"] .activity-log-row:hover { background: rgba(255, 232, 31, 0.03); }
html[data-theme="jedi"] .activity-action { color: #FFE81F; font-weight: 700; }
html[data-theme="jedi"] .activity-user   { color: #aaaaaa; }
html[data-theme="jedi"] .activity-time   { color: #555555; font-size: 0.85em; }

/* ── Global Form Controls ──────────────────────────────────────────────────── */

html[data-theme="jedi"] input[type="text"],
html[data-theme="jedi"] input[type="email"],
html[data-theme="jedi"] input[type="password"],
html[data-theme="jedi"] input[type="search"],
html[data-theme="jedi"] input[type="date"],
html[data-theme="jedi"] input[type="number"],
html[data-theme="jedi"] textarea,
html[data-theme="jedi"] select { background: #0a0a0a; border: 1px solid rgba(255, 232, 31, 0.22); color: #f0f0f0; caret-color: #FFE81F; }

html[data-theme="jedi"] input[type="text"]:focus,
html[data-theme="jedi"] input[type="email"]:focus,
html[data-theme="jedi"] input[type="password"]:focus,
html[data-theme="jedi"] input[type="search"]:focus,
html[data-theme="jedi"] input[type="date"]:focus,
html[data-theme="jedi"] input[type="number"]:focus,
html[data-theme="jedi"] textarea:focus,
html[data-theme="jedi"] select:focus { border-color: #FFE81F; box-shadow: 0 0 0 2px rgba(255, 232, 31, 0.18), 0 0 16px rgba(255, 232, 31, 0.12); outline: none; }

html[data-theme="jedi"] input::placeholder,
html[data-theme="jedi"] textarea::placeholder { color: #444444; }

html[data-theme="jedi"] input[type="checkbox"],
html[data-theme="jedi"] input[type="radio"] { accent-color: #FFE81F; }

html[data-theme="jedi"] select option { background: #0a0a0a; color: #f0f0f0; }

/* ── POS overrides ─────────────────────────────────────────────────────────── */

html[data-theme="jedi"] .pos-screen { background: #000000; color: #f0f0f0; }
html[data-theme="jedi"] .pos-card,
html[data-theme="jedi"] .pos-section { background: #0d0d0d; border: 1px solid rgba(255, 232, 31, 0.22); }
html[data-theme="jedi"] .pos-product-name  { color: #f0f0f0; }
html[data-theme="jedi"] .pos-product-price { color: #FFE81F; font-weight: 700; }
html[data-theme="jedi"] .pos-total         { color: #FFE81F; font-weight: 900; }
html[data-theme="jedi"] .pos-btn-primary   { background: #FFE81F; color: #000000; font-weight: 900; border: none; box-shadow: 0 4px 22px rgba(255, 232, 31, 0.55); }
html[data-theme="jedi"] .pos-btn-primary:hover { background: #ffef62; box-shadow: 0 6px 30px rgba(255, 232, 31, 0.75); }
html[data-theme="jedi"] .delivery-btn      { background: #0d0d0d; color: #f0f0f0; border: 1px solid rgba(255, 232, 31, 0.22); }
html[data-theme="jedi"] .payment-btn       { background: #0d0d0d; color: #f0f0f0; border: 1px solid rgba(255, 232, 31, 0.22); }
html[data-theme="jedi"] .delivery-btn.active,
html[data-theme="jedi"] .payment-btn.active { background: #FFE81F; color: #000000; border-color: #FFE81F; }
html[data-theme="jedi"] .confirm-summary   { background: #0d0d0d; border-color: rgba(255, 232, 31, 0.22); }
html[data-theme="jedi"] .confirm-row       { color: #FFE81F; }
html[data-theme="jedi"] .receipt-details,
html[data-theme="jedi"] .receipt-items     { background: #0d0d0d; }
html[data-theme="jedi"] .receipt-header h1 { color: #FFE81F; }
html[data-theme="jedi"] .receipt-row       { color: #FFE81F; border-color: rgba(255, 232, 31, 0.22); }
html[data-theme="jedi"] .customer-form input,
html[data-theme="jedi"] .customer-form select { background: #000000; border-color: rgba(255, 232, 31, 0.25); color: #f0f0f0; }
html[data-theme="jedi"] .summary-row        { color: #FFE81F; }
html[data-theme="jedi"] .discount-input-wrap input { background: #000000; border-color: rgba(255, 232, 31, 0.25); color: #f0f0f0; }

/* ── Jedi: Hub Cards ──────────────────────────────────────────────────────── */

html[data-theme="jedi"] .hub-card {
  background: rgba(5,4,0,0.88);
  border: 1px solid rgba(255,232,31,0.22);
  box-shadow: 0 4px 16px rgba(0,0,0,0.7), 0 0 8px rgba(255,232,31,0.04);
  color: #f0f0f0;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
html[data-theme="jedi"] .hub-card:hover {
  border-color: rgba(255,232,31,0.6);
  box-shadow: 0 0 28px rgba(255,232,31,0.18), 0 8px 32px rgba(0,0,0,0.7);
  transform: translateY(-2px);
}
html[data-theme="jedi"] .hub-card-title { color: #f0f0f0; font-weight: 700; }
html[data-theme="jedi"] .hub-card-desc  { color: #666666; }
html[data-theme="jedi"] .hub-group-header { color: #FFE81F; border-bottom-color: rgba(255,232,31,0.25); text-transform: uppercase; letter-spacing: 0.12em; font-weight: 700; }

/* ── Jedi: Settings sidebar ──────────────────────────────────────────────── */

html[data-theme="jedi"] .settings-sidebar {
  background: rgba(5,4,0,0.90);
  border: 1px solid rgba(255,232,31,0.22);
  box-shadow: 0 0 12px rgba(255,232,31,0.05);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
html[data-theme="jedi"] .settings-content {
  background: rgba(5,4,0,0.82);
  border: 1px solid rgba(255,232,31,0.18);
  color: #f0f0f0;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
html[data-theme="jedi"] .settings-nav-item {
  background: rgba(0,0,0,0.5);
  border: 1px solid rgba(255,232,31,0.15);
  color: #888888;
}
html[data-theme="jedi"] .settings-nav-item:hover:not(:disabled) {
  background: rgba(255,232,31,0.07);
  color: #FFE81F;
  border-color: rgba(255,232,31,0.4);
}
html[data-theme="jedi"] .settings-nav-item.active {
  background: rgba(255,232,31,0.12);
  color: #FFE81F;
  border-color: rgba(255,232,31,0.6);
  font-weight: 700;
  box-shadow: 0 0 12px rgba(255,232,31,0.15);
}
html[data-theme="jedi"] .settings-nav-label { color: #444444; text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.7em; }

/* ── Jedi: period-btn (tabs Diario/Semanal/Mensual/Trimestral/Anual) ─────── */
html[data-theme="jedi"] .period-btn {
  background: #0d0d0d;
  border: 1px solid rgba(255, 232, 31, 0.22);
  color: #888888;
}
html[data-theme="jedi"] .period-btn:hover {
  background: rgba(255, 232, 31, 0.07);
  border-color: rgba(255, 232, 31, 0.45);
  color: #FFE81F;
}
html[data-theme="jedi"] .period-btn.active {
  background: #FFE81F;
  border-color: #FFE81F;
  color: #000000;
  font-weight: 900;
  box-shadow: 0 0 18px rgba(255, 232, 31, 0.55);
}

/* ── Jedi: table row hovers (white bg → invisible in dark theme) ─────────── */
html[data-theme="jedi"] .phys-table tbody tr:hover td         { background: rgba(255, 232, 31, 0.04); }
html[data-theme="jedi"] .accounting-history-table tbody tr:hover td { background: rgba(255, 232, 31, 0.04); }
html[data-theme="jedi"] .activity-log-table tbody tr:hover    { background: rgba(255, 232, 31, 0.04); }
html[data-theme="jedi"] .analytics-table tr:hover td          { background: rgba(255, 232, 31, 0.04); }
html[data-theme="jedi"] .tr-table tbody tr:hover              { background: rgba(255, 232, 31, 0.04); }
html[data-theme="jedi"] .users-table tr:hover td              { background: rgba(255, 232, 31, 0.04); }

/* ── Jedi: POS — pos-btn.primary / tab-count / cart-badge / receipt-toggle ─ */
html[data-theme="jedi"] .pos-btn.primary             { background: #FFE81F; color: #000000; font-weight: 900; }
html[data-theme="jedi"] .pos-btn.success             { background: #00c853; color: #000000; }
html[data-theme="jedi"] .pos-btn.secondary           { background: #0d0d0d; color: #FFE81F; border-color: rgba(255, 232, 31, 0.25); }
html[data-theme="jedi"] .tab-count,
html[data-theme="jedi"] .cart-badge                  { background: #FFE81F; color: #000000; }
html[data-theme="jedi"] .receipt-toggle.active       { background: #FFE81F; border-color: #FFE81F; color: #000000; }

/* ── Jedi: POSSales — pss-facturar-btn ───────────────────────────────────── */
html[data-theme="jedi"] .pss-facturar-btn { background: #FFE81F; color: #000000; font-weight: 900; border-color: #FFE81F; }
html[data-theme="jedi"] .pss-facturar-btn:hover:not(:disabled) { background: #ffef62; opacity: 1; }

/* ── Jedi: Billing — billing-action-btn hover ────────────────────────────── */
html[data-theme="jedi"] .billing-action-btn:hover { background: #FFE81F; color: #000000; }

/* ── Jedi: GonherInventory / ShopifyMxInventory — view toggle, pagination ── */
html[data-theme="jedi"] .view-toggle-btn.active       { background: #FFE81F; color: #000000; border-color: #FFE81F; }
html[data-theme="jedi"] .filter-action-btn:hover      { background: rgba(255, 232, 31, 0.12); color: #FFE81F; border-color: rgba(255, 232, 31, 0.5); }
html[data-theme="jedi"] .pagination-btn               { background: #0d0d0d; border-color: rgba(255, 232, 31, 0.22); color: #f0f0f0; }
html[data-theme="jedi"] .pagination-btn:hover:not(:disabled) { background: #FFE81F; border-color: #FFE81F; color: #000000; }
html[data-theme="jedi"] .pagination-info              { color: #666666; }

/* ── Jedi: PhysicalInventory — add/primary buttons ───────────────────────── */
html[data-theme="jedi"] .phys-add-btn                  { background: #FFE81F; color: #000000; font-weight: 900; }
html[data-theme="jedi"] .phys-add-btn:hover            { background: #ffef62; opacity: 1; }
html[data-theme="jedi"] .phys-btn--primary             { background: #FFE81F; color: #000000; border-color: #FFE81F; font-weight: 900; }
html[data-theme="jedi"] .phys-btn--primary:hover:not(:disabled) { background: #ffef62; opacity: 1; }

/* ── Jedi: XRay — btn-xray-time / btn-xray-filter active states ──────────── */
html[data-theme="jedi"] .btn-xray-time.active,
html[data-theme="jedi"] .btn-xray-filter.active {
  background: rgba(255, 232, 31, 0.14);
  border-color: #FFE81F;
  color: #FFE81F;
}

/* ── Jedi: ErrorLogs — btn-logs-time active ──────────────────────────────── */
html[data-theme="jedi"] .btn-logs-time            { background: #0a0a0a; border: 1px solid rgba(255,232,31,0.22); color: #888888; }
html[data-theme="jedi"] .btn-logs-time:hover      { background: rgba(255,232,31,0.06); border-color: rgba(255,232,31,0.4); color: #FFE81F; }
html[data-theme="jedi"] .btn-logs-time.active     { background: rgba(255,232,31,0.14); border-color: #FFE81F; color: #FFE81F; }

/* ── Jedi: botones Refrescar ─────────────────────────────────────────────── */
html[data-theme="jedi"] .btn-monitoring-console {
  background: rgba(255, 232, 31, 0.12);
  border: 1px solid rgba(255, 232, 31, 0.4);
  color: #FFE81F;
}
html[data-theme="jedi"] .btn-monitoring-console:hover {
  background: rgba(255, 232, 31, 0.2);
  border-color: #FFE81F;
}
html[data-theme="jedi"] .btn-monitoring-refresh,
html[data-theme="jedi"] .btn-xray-refresh,
html[data-theme="jedi"] .btn-xray-console,
html[data-theme="jedi"] .btn-logs-refresh,
html[data-theme="jedi"] .btn-logs-console,
html[data-theme="jedi"] .btn-users-refresh {
  background: #0a0a0a;
  border: 1px solid rgba(255, 232, 31, 0.25);
  color: #aaaaaa;
}
html[data-theme="jedi"] .btn-monitoring-refresh:hover,
html[data-theme="jedi"] .btn-xray-refresh:hover,
html[data-theme="jedi"] .btn-xray-console:hover,
html[data-theme="jedi"] .btn-logs-refresh:hover,
html[data-theme="jedi"] .btn-logs-console:hover,
html[data-theme="jedi"] .btn-users-refresh:hover:not(:disabled) {
  background: rgba(255, 232, 31, 0.08);
  border-color: rgba(255, 232, 31, 0.5);
  color: #FFE81F;
}
html[data-theme="jedi"] .btn-tr-refresh { color: #000000; }

/* ── Jedi: Monitoring — section header & metric card title ───────────────── */
html[data-theme="jedi"] .monitoring-section-header {
  color: #FFE81F;
  background: rgba(255, 232, 31, 0.07);
  border-color: rgba(255, 232, 31, 0.22);
  border-left-color: #FFE81F;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
html[data-theme="jedi"] .metric-card-title {
  background: rgba(255, 232, 31, 0.08);
  color: #FFE81F;
  border-bottom-color: rgba(255, 232, 31, 0.15);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
html[data-theme="jedi"] .metric-card-body { background: #000000; }
html[data-theme="jedi"] .metric-card-img {
  filter: invert(1) hue-rotate(180deg);
  border-radius: 4px;
}
html[data-theme="jedi"] .btn-time-range {
  background: transparent;
  color: #888888;
}
html[data-theme="jedi"] .btn-time-range:hover {
  background: rgba(255, 232, 31, 0.08);
  color: #FFE81F;
}
html[data-theme="jedi"] .btn-time-range.active {
  background: rgba(255, 232, 31, 0.15);
  color: #FFE81F;
  font-weight: 700;
}

/* ── Jedi: Artículos no disponibles — Reports.css classes ────────────────── */
html[data-theme="jedi"] .date-select {
  background: #0a0a0a;
  border-color: rgba(255, 232, 31, 0.22);
  color: #f0f0f0;
}
html[data-theme="jedi"] .date-select:hover { background: #111111; border-color: rgba(255, 232, 31, 0.45); }
html[data-theme="jedi"] .date-select-arrow { color: #FFE81F; }
html[data-theme="jedi"] .sync-meta {
  background: #0a0a0a;
  border: 1px solid rgba(255, 232, 31, 0.18);
  color: #f0f0f0;
  box-shadow: none;
}
html[data-theme="jedi"] .report-section {
  background: #0d0d0d;
  border-left-color: inherit;
  box-shadow: none;
}
html[data-theme="jedi"] .section-header { color: #f0f0f0; }
html[data-theme="jedi"] .product-row { background: #0a0a0a; border-bottom-color: rgba(255,232,31,0.08); }
html[data-theme="jedi"] .product-row:hover { background: rgba(255,232,31,0.04); }
html[data-theme="jedi"] .changes-toggle {
  background: rgba(255, 232, 31, 0.12);
  border-color: rgba(255, 232, 31, 0.4);
  color: #FFE81F;
}
html[data-theme="jedi"] .changes-toggle:hover { background: rgba(255, 232, 31, 0.2); }
html[data-theme="jedi"] .changes-list {
  background: #0a0a0a;
  border-color: rgba(255, 232, 31, 0.3);
}
html[data-theme="jedi"] .change-field { color: #888888; }
html[data-theme="jedi"] .change-from  { color: #ef9a9a; }
html[data-theme="jedi"] .change-to    { color: #66bb6a; }
html[data-theme="jedi"] .skipped-filters {
  background: #0a0a0a;
  border-bottom-color: rgba(255, 232, 31, 0.2);
}
html[data-theme="jedi"] .skipped-filter-select {
  background: #000000;
  border-color: rgba(255, 232, 31, 0.22);
  color: #f0f0f0;
}
html[data-theme="jedi"] .skipped-filter-select:focus {
  border-color: #FFE81F;
  box-shadow: 0 0 0 3px rgba(255, 232, 31, 0.1);
}
html[data-theme="jedi"] .skipped-search-input {
  background: #000000;
  border-color: rgba(255, 232, 31, 0.22);
  color: #f0f0f0;
}
html[data-theme="jedi"] .skipped-search-input:focus {
  border-color: #FFE81F;
  box-shadow: 0 0 0 3px rgba(255, 232, 31, 0.1);
}
html[data-theme="jedi"] .skipped-search-input::placeholder { color: #555555; }
html[data-theme="jedi"] .skipped-results-count {
  background: #0a0a0a;
  border-bottom-color: rgba(255, 232, 31, 0.18);
  color: #888888;
}
html[data-theme="jedi"] .page-size-btn {
  background: #0a0a0a;
  border-color: rgba(255, 232, 31, 0.22);
  color: #888888;
}
html[data-theme="jedi"] .page-size-btn.active {
  background: rgba(255, 232, 31, 0.14);
  border-color: #FFE81F;
  color: #FFE81F;
}

/* ── BranchAccess — ba-btn-save / ba-btn-add (fondo amarillo Force, texto oscuro) ── */
html[data-theme="jedi"] .ba-btn-save,
html[data-theme="jedi"] .ba-btn-add {
  background: #FFE81F;
  color: #04080f;
  border: none;
  font-weight: 700;
}
html[data-theme="jedi"] .ba-btn-save:hover:not(:disabled),
html[data-theme="jedi"] .ba-btn-add:hover {
  background: #fff176;
  color: #04080f;
  opacity: 1;
}

/* ═══════════════════════════════════════════════════════════════════════════
   PARCHMENT THEME  —  Ancient magical manuscript interface
   Palette: aged paper · sepia tones · antique gold · deep browns
   ═══════════════════════════════════════════════════════════════════════════ */

html[data-theme="parchment"] {
  --primary-color:   #b8860b;
  --primary-dark:    #8b6914;
  --primary-light:   #d4af37;
  --secondary-color: #8b4513;
  --secondary-dark:  #5d2f0f;
  --accent-color:    #d4af37;
  --text-primary:    #3e2723;
  --text-secondary:  #5d4037;
  --text-light:      #8d6e63;
  --bg-primary:      #faf6ed;
  --bg-secondary:    #f4e4c1;
  --bg-dark:         #e8d4a8;
  --border-color:    #c9a961;
  --success:         #6b8e23;
  --warning:         #d4a024;
  --danger:          #8b3626;
  --info:            #7b6b4a;
  --card-bg:            #fffdf5;
  --input-bg:           #fffdf5;
  --sidebar-bg:         #f4ead8;
  --table-header-bg:    #f4ead8;
  --hover-bg:           #f4ead8;
  --badge-bg:           #e8d4a8;
  --img-placeholder-bg: #f4ead8;
  --error-color:        #8b3626;
}

/* ── Body & base ── */
html[data-theme="parchment"] body {
  background: linear-gradient(to bottom, #f4e4c1 0%, #f8f0d9 50%, #f4e4c1 100%);
  color: #3e2723;
  font-family: Georgia, 'Times New Roman', 'Palatino Linotype', serif;
}

html[data-theme="parchment"] body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  background-image: 
    radial-gradient(circle at 20% 30%, rgba(139, 69, 19, 0.02) 0%, transparent 50%),
    radial-gradient(circle at 80% 70%, rgba(139, 69, 19, 0.02) 0%, transparent 50%),
    repeating-linear-gradient(90deg, transparent, transparent 2px, rgba(139, 69, 19, 0.008) 2px, rgba(139, 69, 19, 0.008) 4px);
  opacity: 0.6;
}

/* ── Layout ── */
html[data-theme="parchment"] .layout-main {
  background: transparent;
}

/* ── Header ── */
html[data-theme="parchment"] .header {
  background: #e8d4a8;
  border-bottom: 2px solid #c9a961;
  box-shadow: 0 2px 8px rgba(62, 39, 35, 0.15);
}

html[data-theme="parchment"] .header-logo-img {
  filter: sepia(0.3) saturate(1.2) drop-shadow(0 2px 4px rgba(62, 39, 35, 0.2));
}

html[data-theme="parchment"] .header-logo-suffix {
  color: rgba(62, 39, 35, 0.5);
}

html[data-theme="parchment"] .menu-toggle {
  color: #5d4037;
}

html[data-theme="parchment"] .user-name {
  color: #3e2723;
  font-weight: 600;
}

html[data-theme="parchment"] .user-role {
  color: #8d6e63;
}

html[data-theme="parchment"] .user-avatar {
  background: #faf6ed;
  border: 2px solid #d4af37;
  color: #5d4037;
  box-shadow: 0 2px 6px rgba(62, 39, 35, 0.2);
}

html[data-theme="parchment"] .user-tooltip {
  background: #faf6ed;
  border: 1px solid #c9a961;
  color: #3e2723;
  box-shadow: 0 4px 12px rgba(62, 39, 35, 0.15);
}

html[data-theme="parchment"] .logout-button {
  background: rgba(139, 69, 19, 0.1);
  color: #5d4037;
  border: 1px solid #c9a961;
}

html[data-theme="parchment"] .logout-button:hover {
  background: rgba(139, 69, 19, 0.2);
  color: #3e2723;
  border-color: #b8860b;
}

html[data-theme="parchment"] .btn-export-pdf {
  background: rgba(212, 175, 55, 0.15);
  color: #8b4513;
  border: 1px solid #c9a961;
}

html[data-theme="parchment"] .btn-export-pdf:hover {
  background: rgba(212, 175, 55, 0.25);
  border-color: #b8860b;
}

html[data-theme="parchment"] .header-beta-badge {
  background: linear-gradient(135deg, #d4af37, #c9a961, #b8860b, #d4af37);
  background-size: 400% 400%;
  animation: betaShimmer 4s ease infinite;
  box-shadow: 0 0 10px rgba(212, 175, 55, 0.4);
  color: #3e2723;
  font-weight: 700;
  border: 1px solid rgba(184, 134, 11, 0.3);
}

/* ── Sidebar ── */
html[data-theme="parchment"] .sidebar {
  background: #ebe0c8;
  border-right: 2px solid #c9a961;
  box-shadow: 2px 0 12px rgba(62, 39, 35, 0.08);
}

html[data-theme="parchment"] .nav-link {
  color: #5d4037;
}

html[data-theme="parchment"] .nav-link:hover {
  background: rgba(212, 175, 55, 0.15);
  color: #3e2723;
}

html[data-theme="parchment"] .nav-link.active {
  background: rgba(212, 175, 55, 0.25);
  color: #3e2723;
  border-left: 4px solid #b8860b;
  box-shadow: inset 0 0 12px rgba(139, 69, 19, 0.08);
  font-weight: 600;
}

/* ── Page containers (generic) ── */
html[data-theme="parchment"] .page-container,
html[data-theme="parchment"] .content-wrapper {
  background: transparent;
}

/* ══════════════════════════════════════════
   DASHBOARD
   ══════════════════════════════════════════ */

html[data-theme="parchment"] .stat-card {
  background: #faf6ed;
  border: 2px solid #d4af37;
  box-shadow: 0 4px 12px rgba(62, 39, 35, 0.12);
  color: #3e2723;
}

html[data-theme="parchment"] .stat-card:hover {
  box-shadow: 0 6px 18px rgba(62, 39, 35, 0.18);
  transform: translateY(-2px);
}

html[data-theme="parchment"] .dashboard-card {
  background: #faf6ed;
  border: 2px solid #c9a961;
  box-shadow: 0 4px 12px rgba(62, 39, 35, 0.1);
  color: #3e2723;
}

html[data-theme="parchment"] .dashboard-manual-sync-box {
  background: #f4e4c1;
  border: 1px solid #c9a961;
}

html[data-theme="parchment"] .health-chip {
  background: #faf6ed;
  border: 1px solid #d4af37;
  color: #3e2723;
  box-shadow: 0 2px 4px rgba(62, 39, 35, 0.08);
}

html[data-theme="parchment"] .health-section-row {
  background: #f8f0d9;
  border: 1px solid #d4c89a;
}

html[data-theme="parchment"] .health-category-title {
  color: #5d4037;
  font-weight: 600;
}

html[data-theme="parchment"] .dashboard-schedule-row {
  background: #f8f0d9;
  border: 1px solid #d4c89a;
}

html[data-theme="parchment"] .dashboard-schedule-modal,
html[data-theme="parchment"] .dashboard-confirm-modal {
  background: #faf6ed;
  border: 3px double #b8860b;
  box-shadow: 0 8px 32px rgba(62, 39, 35, 0.25);
  color: #3e2723;
}

html[data-theme="parchment"] .dashboard-schedule-modal-header,
html[data-theme="parchment"] .dashboard-schedule-modal-footer {
  background: #f4e4c1;
  border-color: #c9a961;
}

html[data-theme="parchment"] .schedule-select,
html[data-theme="parchment"] .schedule-add-select {
  background: #faf6ed;
  border: 1px solid #c9a961;
  color: #3e2723;
}

html[data-theme="parchment"] .schedule-day-btn {
  background: #faf6ed;
  border: 1px solid #c9a961;
  color: #5d4037;
}

html[data-theme="parchment"] .schedule-day-btn.active,
html[data-theme="parchment"] .schedule-day-btn:hover {
  background: #d4af37;
  border-color: #b8860b;
  color: #3e2723;
  font-weight: 600;
}

html[data-theme="parchment"] .schedule-hour-chip {
  background: rgba(212, 175, 55, 0.2);
  color: #5d4037;
  border: 1px solid #d4af37;
}

html[data-theme="parchment"] .schedule-btn-cancel {
  background: transparent;
  border: 1px solid #8d6e63;
  color: #5d4037;
}

html[data-theme="parchment"] .schedule-btn-cancel:hover {
  background: rgba(141, 110, 99, 0.1);
}

html[data-theme="parchment"] .schedule-toggle-track {
  background: #e8d4a8;
}

html[data-theme="parchment"] .dashboard-schedule-btn {
  background: rgba(212, 175, 55, 0.15);
  border: 1px solid #c9a961;
  color: #5d4037;
}

html[data-theme="parchment"] .dashboard-schedule-badge.disabled {
  background: rgba(141, 110, 99, 0.1);
  color: #8d6e63;
}

html[data-theme="parchment"] .dashboard-sync-button {
  background: rgba(212, 175, 55, 0.2);
  border: 2px solid #b8860b;
  color: #3e2723;
  font-weight: 600;
}

html[data-theme="parchment"] .dashboard-sync-button:hover {
  background: rgba(212, 175, 55, 0.35);
  box-shadow: 0 4px 12px rgba(184, 134, 11, 0.3);
}

/* ══════════════════════════════════════════
   ANALYTICS HUB
   ══════════════════════════════════════════ */

html[data-theme="parchment"] .hub-card {
  background: #faf6ed;
  border: 2px solid #d4af37;
  box-shadow: 0 4px 12px rgba(62, 39, 35, 0.1);
}

html[data-theme="parchment"] .hub-card:hover {
  box-shadow: 0 6px 18px rgba(62, 39, 35, 0.15);
  border-color: #b8860b;
}

html[data-theme="parchment"] .hub-blue .hub-card-icon {
  background: rgba(14, 165, 233, 0.08);
  color: #0284c7;
}

html[data-theme="parchment"] .hub-green .hub-card-icon {
  background: rgba(107, 142, 35, 0.1);
  color: #6b8e23;
}

html[data-theme="parchment"] .hub-purple .hub-card-icon {
  background: rgba(139, 92, 246, 0.08);
  color: #7c3aed;
}

html[data-theme="parchment"] .hub-orange .hub-card-icon {
  background: rgba(217, 119, 6, 0.1);
  color: #d97706;
}

html[data-theme="parchment"] .hub-red .hub-card-icon {
  background: rgba(139, 54, 38, 0.1);
  color: #8b3626;
}

html[data-theme="parchment"] .hub-teal .hub-card-icon {
  background: rgba(20, 184, 166, 0.08);
  color: #0d9488;
}

html[data-theme="parchment"] .hub-gold .hub-card-icon {
  background: rgba(212, 175, 55, 0.15);
  color: #b8860b;
}

/* ══════════════════════════════════════════
   ANALYTICS REPORTS
   ══════════════════════════════════════════ */

html[data-theme="parchment"] .period-btn {
  background: #faf6ed;
  border-color: #c9a961;
  color: #5d4037;
}

html[data-theme="parchment"] .period-btn:hover {
  background: rgba(212, 175, 55, 0.15);
  color: #3e2723;
}

html[data-theme="parchment"] .period-btn.active {
  background: #b8860b;
  border-color: #8b6914;
  color: #faf6ed;
  font-weight: 600;
}

html[data-theme="parchment"] .kpi-card {
  background: #faf6ed;
  border: 2px solid #d4af37;
  box-shadow: 0 4px 12px rgba(62, 39, 35, 0.1);
}

html[data-theme="parchment"] .analytics-card {
  background: #faf6ed;
  border: 2px solid #c9a961;
  box-shadow: 0 4px 12px rgba(62, 39, 35, 0.1);
}

html[data-theme="parchment"] .donut-center {
  background: #f4e4c1;
  color: #3e2723;
}

html[data-theme="parchment"] .bar-track {
  background: #e8d4a8;
}

html[data-theme="parchment"] .analytics-card-title {
  color: #3e2723;
  font-weight: 600;
}

html[data-theme="parchment"] .kpi-label {
  color: #8d6e63;
}

html[data-theme="parchment"] .kpi-value {
  color: #3e2723;
}

html[data-theme="parchment"] .kpi-sub {
  color: #8d6e63;
}

html[data-theme="parchment"] .segment-card {
  background: #f4e4c1;
  border: 1px solid #d4af37;
}

html[data-theme="parchment"] .segment-name {
  color: #3e2723;
  font-weight: 600;
}

html[data-theme="parchment"] .segment-stat-value {
  color: #3e2723;
}

html[data-theme="parchment"] .segment-stat-label {
  color: #8d6e63;
}

/* ══════════════════════════════════════════
   REPORTS
   ══════════════════════════════════════════ */

html[data-theme="parchment"] .reports-page,
html[data-theme="parchment"] .report-section,
html[data-theme="parchment"] .sync-meta,
html[data-theme="parchment"] .skipped-filters {
  background: transparent;
}

html[data-theme="parchment"] .date-select {
  background: #faf6ed;
  border: 1px solid #c9a961;
  color: #3e2723;
}

html[data-theme="parchment"] .date-select:focus {
  border-color: #b8860b;
  box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.2);
}

html[data-theme="parchment"] .meta-item {
  background: #faf6ed;
  border: 1px solid #d4af37;
  color: #3e2723;
  box-shadow: 0 2px 6px rgba(62, 39, 35, 0.08);
}

html[data-theme="parchment"] .meta-label {
  color: #5d4037;
  font-weight: 600;
}

html[data-theme="parchment"] .product-row {
  background: #faf6ed;
  border: 1px solid #e8d4a8;
  color: #3e2723;
}

html[data-theme="parchment"] .product-row:hover {
  background: #fff9f0;
  box-shadow: 0 2px 8px rgba(62, 39, 35, 0.08);
}

html[data-theme="parchment"] .product-name {
  color: #3e2723;
  font-weight: 500;
}

html[data-theme="parchment"] .product-id,
html[data-theme="parchment"] .product-brand {
  color: #5d4037;
}

html[data-theme="parchment"] .skipped-reason-chip {
  background: rgba(139, 69, 19, 0.08);
  color: #5d4037;
  border: 1px solid #c9a961;
}

html[data-theme="parchment"] .skipped-filter-select,
html[data-theme="parchment"] .skipped-search-input {
  background: #faf6ed;
  border: 1px solid #c9a961;
  color: #3e2723;
}

html[data-theme="parchment"] .skipped-search-input:focus {
  border-color: #b8860b;
  box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.2);
}

html[data-theme="parchment"] .search-icon {
  color: #8d6e63;
}

html[data-theme="parchment"] .changes-toggle {
  background: rgba(212, 175, 55, 0.1);
  border: 1px solid #c9a961;
  color: #5d4037;
}

html[data-theme="parchment"] .changes-toggle:hover {
  background: rgba(212, 175, 55, 0.15);
}

html[data-theme="parchment"] .changes-list {
  background: #f4e4c1;
  border: 1px solid #d4c89a;
}

html[data-theme="parchment"] .change-from {
  color: #8b3626;
}

html[data-theme="parchment"] .change-to {
  color: #6b8e23;
}

html[data-theme="parchment"] .change-field {
  color: #5d4037;
  font-weight: 600;
}

html[data-theme="parchment"] .section-count {
  background: rgba(212, 175, 55, 0.2);
  color: #3e2723;
}

html[data-theme="parchment"] .section-header:hover {
  background: rgba(212, 175, 55, 0.05);
}

html[data-theme="parchment"] .product-avatar {
  background: #f4e4c1;
  border-color: #d4c89a;
  color: #5d4037;
}

html[data-theme="parchment"] .skipped-results-count {
  background: #f4e4c1;
  border-color: #d4c89a;
  color: #5d4037;
}

html[data-theme="parchment"] .error-banner {
  background: rgba(139, 54, 38, 0.1);
  border: 2px solid #b8524a;
  color: #8b3626;
}

/* ══════════════════════════════════════════
   ROLES
   ══════════════════════════════════════════ */

html[data-theme="parchment"] .role-card {
  background: #faf6ed;
  border: 2px solid #d4af37;
  box-shadow: 0 4px 12px rgba(62, 39, 35, 0.1);
  color: #3e2723;
}

html[data-theme="parchment"] .role-card:hover {
  box-shadow: 0 6px 18px rgba(62, 39, 35, 0.15);
  border-color: #b8860b;
}

html[data-theme="parchment"] .role-card--expanded {
  border-color: #b8860b;
  box-shadow: 0 8px 24px rgba(62, 39, 35, 0.18);
}

html[data-theme="parchment"] .role-card-header {
  border-color: #e8d4a8;
}

html[data-theme="parchment"] .role-name {
  color: #3e2723;
  font-weight: 600;
}

html[data-theme="parchment"] .role-id {
  color: #8d6e63;
}

html[data-theme="parchment"] .role-perm-row--locked {
  background: rgba(212, 175, 55, 0.08);
}

html[data-theme="parchment"] .role-card-footer {
  background: #f4e4c1;
  border-color: #d4c89a;
}

html[data-theme="parchment"] .role-perm-row {
  border-color: #e8d4a8;
}

html[data-theme="parchment"] .role-perm-name {
  color: #3e2723;
}

html[data-theme="parchment"] .role-perm-id {
  color: #8d6e63;
}

html[data-theme="parchment"] .role-resource-block h4 {
  color: #5d4037;
  border-color: #d4c89a;
  font-weight: 600;
}

html[data-theme="parchment"] .roles-modal {
  background: #faf6ed;
  border: 3px double #b8860b;
  box-shadow: 0 8px 32px rgba(62, 39, 35, 0.25);
  color: #3e2723;
}

html[data-theme="parchment"] .roles-modal-title {
  color: #3e2723;
  border-color: #c9a961;
  font-weight: 600;
}

html[data-theme="parchment"] .roles-modal-form input {
  background: #fff9f0;
  border: 1px solid #c9a961;
  color: #3e2723;
}

html[data-theme="parchment"] .roles-modal-form input:focus {
  border-color: #b8860b;
  box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.2);
}

html[data-theme="parchment"] .roles-delete-modal {
  background: #faf6ed;
  border: 3px double #8b3626;
  color: #3e2723;
}

/* ══════════════════════════════════════════
   SETTINGS
   ══════════════════════════════════════════ */

html[data-theme="parchment"] .settings-sidebar {
  background: #f4e4c1;
  border: 1px solid #c9a961;
}

html[data-theme="parchment"] .settings-nav-item {
  background: #faf6ed;
  border: 1px solid #d4c89a;
  color: #5d4037;
}

html[data-theme="parchment"] .settings-nav-item:hover:not(:disabled) {
  background: rgba(212, 175, 55, 0.15);
  color: #3e2723;
}

html[data-theme="parchment"] .settings-nav-item.active {
  background: rgba(212, 175, 55, 0.25);
  color: #3e2723;
  border-color: #b8860b;
  font-weight: 600;
}

html[data-theme="parchment"] .settings-content {
  background: #faf6ed;
  border: 2px solid #c9a961;
  box-shadow: 0 4px 16px rgba(62, 39, 35, 0.1);
}

html[data-theme="parchment"] .settings-content-header {
  border-color: #d4c89a;
}

html[data-theme="parchment"] .settings-content-header h2 {
  color: #3e2723;
  font-weight: 600;
}

html[data-theme="parchment"] .settings-section {
  background: #faf6ed;
}

html[data-theme="parchment"] .settings-section-title {
  color: #3e2723;
  border-color: #d4c89a;
  font-weight: 600;
}

html[data-theme="parchment"] .settings-section-hint {
  color: #8d6e63;
}

html[data-theme="parchment"] .settings-input {
  background: #fff9f0;
  border: 1px solid #c9a961;
  color: #3e2723;
}

html[data-theme="parchment"] .settings-input:focus {
  border-color: #b8860b;
  box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.2);
}

html[data-theme="parchment"] .settings-input:disabled {
  background: #f4e4c1;
  color: #8d6e63;
  opacity: 0.7;
}

html[data-theme="parchment"] .settings-label {
  color: #3e2723;
  font-weight: 500;
}

html[data-theme="parchment"] .settings-mode-btn {
  background: #faf6ed;
  border: 1px solid #c9a961;
  color: #5d4037;
}

html[data-theme="parchment"] .settings-mode-btn:hover:not(:disabled) {
  background: rgba(212, 175, 55, 0.15);
  color: #3e2723;
}

html[data-theme="parchment"] .settings-mode-btn.active {
  background: #b8860b;
  color: #faf6ed;
  border-color: #8b6914;
  font-weight: 600;
}

html[data-theme="parchment"] .settings-instructions-preview {
  background: #fff9f0;
  border: 1px solid #d4c89a;
  color: #3e2723;
}

html[data-theme="parchment"] .settings-instructions-preview code {
  background: #f4e4c1;
  color: #5d4037;
  border: 1px solid #c9a961;
}

html[data-theme="parchment"] .settings-instructions-preview pre {
  background: #f4e4c1;
  border: 1px solid #c9a961;
}

html[data-theme="parchment"] .settings-instructions-textarea {
  background: #fff9f0;
  border: 1px solid #c9a961;
  color: #3e2723;
}

html[data-theme="parchment"] .settings-instructions-textarea:focus {
  border-color: #b8860b;
  box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.2);
}

html[data-theme="parchment"] .settings-toggle-secret {
  color: #8d6e63;
}

html[data-theme="parchment"] .settings-toggle-secret:hover {
  color: #5d4037;
}

html[data-theme="parchment"] .settings-confirm-modal {
  background: #faf6ed;
  border: 3px double #b8860b;
  box-shadow: 0 8px 32px rgba(62, 39, 35, 0.3);
  color: #3e2723;
}

html[data-theme="parchment"] .settings-confirm-header {
  background: #f4e4c1;
  border-color: #c9a961;
}

html[data-theme="parchment"] .settings-confirm-header h3 {
  color: #3e2723;
  font-weight: 600;
}

html[data-theme="parchment"] .settings-confirm-body {
  background: #faf6ed;
  color: #3e2723;
}

html[data-theme="parchment"] .settings-confirm-changes {
  background: #fff9f0;
  border: 1px solid #d4c89a;
}

html[data-theme="parchment"] .settings-confirm-arm input {
  background: #fff9f0;
  border: 1px solid #c9a961;
  color: #3e2723;
}

html[data-theme="parchment"] .settings-visual-option {
  background: #faf6ed;
  border: 1px solid #c9a961;
  color: #5d4037;
}

html[data-theme="parchment"] .settings-visual-option.selected {
  border-color: #b8860b;
  color: #3e2723;
  box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.2);
  font-weight: 600;
}

html[data-theme="parchment"] .settings-loading {
  background: #faf6ed;
}

html[data-theme="parchment"] .settings .btn-secondary:hover {
  background: rgba(212, 175, 55, 0.15);
}

html[data-theme="parchment"] .settings-btn-ghost {
  background: transparent;
  border: 1px solid #8d6e63;
  color: #5d4037;
}

html[data-theme="parchment"] .settings-btn-ghost:hover {
  background: rgba(141, 110, 99, 0.1);
}

html[data-theme="parchment"] .settings-alert--error {
  background: rgba(139, 54, 38, 0.1);
  border: 2px solid #b8524a;
  color: #8b3626;
}

html[data-theme="parchment"] .settings-alert--success {
  background: rgba(107, 142, 35, 0.1);
  border: 2px solid #8da656;
  color: #6b8e23;
}

/* ══════════════════════════════════════════
   BRAND FLAGS
   ══════════════════════════════════════════ */

html[data-theme="parchment"] .brand-flag-card {
  background: #faf6ed;
  border: 2px solid #d4af37;
  box-shadow: 0 4px 12px rgba(62, 39, 35, 0.1);
  color: #3e2723;
}

html[data-theme="parchment"] .brand-flag-card:hover {
  border-color: #b8860b;
  box-shadow: 0 6px 18px rgba(62, 39, 35, 0.15);
}

html[data-theme="parchment"] .brand-flag-card.is-active {
  border-color: #6b8e23;
}

html[data-theme="parchment"] .brand-flag-card.is-inactive {
  border-color: #c9a961;
  opacity: 0.7;
}

html[data-theme="parchment"] .brand-flags-search {
  background: #fff9f0;
  border: 1px solid #c9a961;
  color: #3e2723;
}

html[data-theme="parchment"] .brand-flags-search:focus {
  border-color: #b8860b;
  box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.2);
}

html[data-theme="parchment"] .brand-flags-filter-btn {
  background: #faf6ed;
  border: 1px solid #c9a961;
  color: #5d4037;
}

html[data-theme="parchment"] .brand-flags-filter-btn:hover {
  background: rgba(212, 175, 55, 0.15);
  color: #3e2723;
}

html[data-theme="parchment"] .brand-flags-filter-btn.active {
  background: rgba(212, 175, 55, 0.25);
  border-color: #b8860b;
  color: #3e2723;
  font-weight: 600;
}

html[data-theme="parchment"] .brand-flags-summary-item {
  background: #faf6ed;
  border: 1px solid #d4c89a;
  color: #3e2723;
}

html[data-theme="parchment"] .brand-flags-summary-item.active {
  border-color: #6b8e23;
  color: #6b8e23;
}

html[data-theme="parchment"] .brand-flags-summary-item.inactive {
  border-color: #c9a961;
  color: #8d6e63;
}

html[data-theme="parchment"] .brand-flags-preview {
  background: #faf6ed;
  border: 2px solid #c9a961;
}

html[data-theme="parchment"] .brand-flags-preview-header {
  background: #f4e4c1;
  border-color: #d4c89a;
  color: #3e2723;
}

html[data-theme="parchment"] .brand-flags-preview-item {
  background: #faf6ed;
  border: 1px solid #e8d4a8;
  color: #3e2723;
}

html[data-theme="parchment"] .brand-flags-preview-chip {
  background: rgba(212, 175, 55, 0.15);
  border: 1px solid #c9a961;
  color: #5d4037;
}

html[data-theme="parchment"] .brand-flags-readonly-notice {
  background: rgba(212, 160, 36, 0.1);
  border: 2px solid #d4a024;
  color: #8b6914;
}

html[data-theme="parchment"] .brand-flags-error {
  background: rgba(139, 54, 38, 0.1);
  border: 2px solid #b8524a;
  color: #8b3626;
}

html[data-theme="parchment"] .brand-flags-success {
  background: rgba(107, 142, 35, 0.1);
  border: 2px solid #8da656;
  color: #6b8e23;
}

/* ══════════════════════════════════════════
   ERROR LOGS
   ══════════════════════════════════════════ */

html[data-theme="parchment"] .logs-stat-card {
  background: #faf6ed;
  border: 1px solid #d4af37;
  color: #3e2723;
  box-shadow: 0 2px 8px rgba(62, 39, 35, 0.08);
}

html[data-theme="parchment"] .logs-stat-card--error {
  background: rgba(139, 54, 38, 0.08);
  border-color: #b8524a;
}

html[data-theme="parchment"] .logs-stat-card--warn {
  background: rgba(212, 160, 36, 0.08);
  border-color: #d4a024;
}

html[data-theme="parchment"] .logs-section-card {
  background: #faf6ed;
  border: 2px solid #c9a961;
  box-shadow: 0 4px 12px rgba(62, 39, 35, 0.1);
}

html[data-theme="parchment"] .logs-section-title {
  color: #3e2723;
  border-color: #d4c89a;
  font-weight: 600;
}

html[data-theme="parchment"] .logs-search-input {
  background: #fff9f0;
  border: 1px solid #c9a961;
  color: #3e2723;
}

html[data-theme="parchment"] .logs-search-input:focus {
  border-color: #b8860b;
  box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.2);
}

html[data-theme="parchment"] .logs-search-icon {
  color: #8d6e63;
}

html[data-theme="parchment"] .logs-row {
  background: #faf6ed;
  border: 1px solid #e8d4a8;
  color: #3e2723;
}

html[data-theme="parchment"] .logs-row:hover {
  background: #fff9f0;
}

html[data-theme="parchment"] .logs-row--error {
  border-color: #b8524a;
  background: rgba(139, 54, 38, 0.05);
}

html[data-theme="parchment"] .logs-row--error:hover {
  background: rgba(139, 54, 38, 0.1);
}

html[data-theme="parchment"] .logs-row--warn {
  border-color: #d4a024;
  background: rgba(212, 160, 36, 0.05);
}

html[data-theme="parchment"] .logs-row--warn:hover {
  background: rgba(212, 160, 36, 0.1);
}

html[data-theme="parchment"] .logs-row--info {
  border-color: #7b6b4a;
  background: rgba(123, 107, 74, 0.05);
}

html[data-theme="parchment"] .logs-row--info:hover {
  background: rgba(123, 107, 74, 0.1);
}

html[data-theme="parchment"] .logs-ts {
  color: #8d6e63;
}

html[data-theme="parchment"] .logs-stream {
  background: rgba(212, 175, 55, 0.1);
  color: #5d4037;
  border: 1px solid #c9a961;
}

html[data-theme="parchment"] .logs-msg-preview {
  color: #3e2723;
}

html[data-theme="parchment"] .logs-row-detail {
  background: #f8f0d9;
  border: 1px solid #d4c89a;
}

html[data-theme="parchment"] .btn-logs-group {
  background: #faf6ed;
  border: 1px solid #c9a961;
  color: #5d4037;
}

html[data-theme="parchment"] .btn-logs-group:hover {
  background: rgba(212, 175, 55, 0.15);
}

html[data-theme="parchment"] .btn-logs-group.active {
  background: #b8860b;
  border-color: #8b6914;
  color: #faf6ed;
  font-weight: 600;
}

html[data-theme="parchment"] .btn-logs-level {
  background: #faf6ed;
  border: 1px solid #c9a961;
  color: #5d4037;
}

html[data-theme="parchment"] .btn-logs-level--all.active {
  background: #b8860b;
  border-color: #8b6914;
  color: #faf6ed;
  font-weight: 600;
}

html[data-theme="parchment"] .btn-logs-time {
  background: #faf6ed;
  border: 1px solid #c9a961;
  color: #5d4037;
}

html[data-theme="parchment"] .btn-logs-time:hover {
  background: rgba(212, 175, 55, 0.15);
  color: #3e2723;
}

html[data-theme="parchment"] .btn-logs-time.active {
  background: #b8860b;
  color: #faf6ed;
  font-weight: 600;
}

html[data-theme="parchment"] .btn-logs-refresh,
html[data-theme="parchment"] .btn-logs-console {
  background: rgba(212, 175, 55, 0.1);
  border: 1px solid #c9a961;
  color: #5d4037;
}

html[data-theme="parchment"] .btn-logs-refresh:hover {
  background: rgba(212, 175, 55, 0.2);
}

html[data-theme="parchment"] .logs-count-badge {
  background: rgba(212, 175, 55, 0.2);
  color: #5d4037;
  font-weight: 600;
}

/* ══════════════════════════════════════════
   XRAY
   ══════════════════════════════════════════ */

html[data-theme="parchment"] .btn-xray-refresh,
html[data-theme="parchment"] .btn-xray-console {
  background: rgba(212, 175, 55, 0.1);
  border: 1px solid #c9a961;
  color: #5d4037;
}

html[data-theme="parchment"] .btn-xray-refresh:hover,
html[data-theme="parchment"] .btn-xray-console:hover {
  background: rgba(212, 175, 55, 0.2);
}

html[data-theme="parchment"] .btn-xray-time {
  background: #faf6ed;
  border: 1px solid #c9a961;
  color: #5d4037;
}

html[data-theme="parchment"] .btn-xray-time:hover {
  background: rgba(212, 175, 55, 0.15);
  color: #3e2723;
}

html[data-theme="parchment"] .btn-xray-time.active {
  background: #b8860b;
  border-color: #8b6914;
  color: #faf6ed;
  font-weight: 600;
}

html[data-theme="parchment"] .xray-stat-card {
  background: #faf6ed;
  border: 1px solid #d4af37;
  color: #3e2723;
  box-shadow: 0 2px 8px rgba(62, 39, 35, 0.08);
}

html[data-theme="parchment"] .xray-stat-card--error {
  background: rgba(139, 54, 38, 0.08);
  border-color: #b8524a;
}

html[data-theme="parchment"] .xray-service-card {
  background: #faf6ed;
  border: 1px solid #d4c89a;
}

html[data-theme="parchment"] .xray-service-card--error {
  border-color: #b8524a;
  background: rgba(139, 54, 38, 0.05);
}

html[data-theme="parchment"] .btn-xray-filter {
  background: #faf6ed;
  border: 1px solid #c9a961;
  color: #5d4037;
}

html[data-theme="parchment"] .btn-xray-filter:hover {
  background: rgba(212, 175, 55, 0.15);
}

html[data-theme="parchment"] .btn-xray-filter.active {
  background: #b8860b;
  border-color: #8b6914;
  color: #faf6ed;
  font-weight: 600;
}

html[data-theme="parchment"] .xray-search-input {
  background: #fff9f0;
  border: 1px solid #c9a961;
  color: #3e2723;
}

html[data-theme="parchment"] .xray-search-input:focus {
  border-color: #b8860b;
  box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.2);
}

html[data-theme="parchment"] .xray-search-icon {
  color: #8d6e63;
}

html[data-theme="parchment"] .xray-error-msg {
  background: rgba(139, 54, 38, 0.08);
  color: #8b3626;
}

html[data-theme="parchment"] .xray-section-card {
  background: #faf6ed;
  border: 2px solid #c9a961;
  box-shadow: 0 4px 12px rgba(62, 39, 35, 0.1);
}

html[data-theme="parchment"] .xray-section-title {
  color: #3e2723;
  border-color: #d4c89a;
  font-weight: 600;
}

html[data-theme="parchment"] .xray-row:hover {
  background: #fff9f0;
}

html[data-theme="parchment"] .xray-row--selected {
  background: rgba(212, 175, 55, 0.15) !important;
}

html[data-theme="parchment"] .xray-table td {
  border-color: #e8d4a8;
  color: #3e2723;
}

html[data-theme="parchment"] .xray-trace-id {
  background: #f4e4c1;
  color: #5d4037;
}

html[data-theme="parchment"] .xray-exec-id {
  background: rgba(212, 175, 55, 0.2);
  color: #5d4037;
}

html[data-theme="parchment"] .badge-green {
  background: rgba(107, 142, 35, 0.15);
  color: #6b8e23;
}

html[data-theme="parchment"] .badge-blue {
  background: rgba(14, 165, 233, 0.1);
  color: #0284c7;
}

html[data-theme="parchment"] .badge-red {
  background: rgba(139, 54, 38, 0.15);
  color: #8b3626;
}

html[data-theme="parchment"] .badge-orange {
  background: rgba(217, 119, 6, 0.15);
  color: #d97706;
}

html[data-theme="parchment"] .badge-gray {
  background: #e8d4a8;
  color: #5d4037;
}

html[data-theme="parchment"] .xray-detail-panel {
  background: #faf6ed;
  border: 2px solid #c9a961;
}

html[data-theme="parchment"] .xray-detail-header {
  background: #f4e4c1;
  border-color: #d4c89a;
}

html[data-theme="parchment"] .xray-seg-row:hover {
  background: #fff9f0;
}

html[data-theme="parchment"] .xray-seg-status {
  background: rgba(107, 142, 35, 0.15);
  color: #6b8e23;
}

html[data-theme="parchment"] .xray-seg-status--error {
  background: rgba(139, 54, 38, 0.15);
  color: #8b3626;
}

html[data-theme="parchment"] .xray-seg-timeline {
  background: #e8d4a8;
}

html[data-theme="parchment"] .btn-xray-view {
  background: transparent;
  border-color: #c9a961;
  color: #5d4037;
}

html[data-theme="parchment"] .btn-xray-view:hover {
  background: rgba(212, 175, 55, 0.1);
  color: #3e2723;
}

html[data-theme="parchment"] .btn-xray-view.active {
  background: rgba(212, 175, 55, 0.2);
  color: #3e2723;
  box-shadow: 0 2px 8px rgba(184, 134, 11, 0.2);
}

html[data-theme="parchment"] .xray-svcmap-wrap rect[fill="#ffffff"],
html[data-theme="parchment"] .xray-svcmap-wrap rect[fill="#fff5f5"],
html[data-theme="parchment"] .xray-svcmap-wrap rect[fill="#fffbeb"] {
  fill: #faf6ed !important;
}

html[data-theme="parchment"] .xray-svcmap-wrap rect[stroke="#e2e8f0"] {
  stroke: #c9a961 !important;
}

html[data-theme="parchment"] .xray-svcmap-wrap rect[stroke="#dc2626"] {
  stroke: #8b3626 !important;
}

html[data-theme="parchment"] .xray-svcmap-wrap rect[stroke="#f59e0b"] {
  stroke: #d97706 !important;
}

html[data-theme="parchment"] .xray-svcmap-wrap text[fill="#1e293b"] {
  fill: #3e2723 !important;
}

html[data-theme="parchment"] .xray-svcmap-wrap text[fill="#64748b"],
html[data-theme="parchment"] .xray-svcmap-wrap text[fill="#94a3b8"],
html[data-theme="parchment"] .xray-svcmap-wrap text[fill="#b0bec5"] {
  fill: #5d4037 !important;
}

html[data-theme="parchment"] .xray-svcmap-wrap line[stroke="#f1f5f9"] {
  stroke: #d4c89a !important;
}

html[data-theme="parchment"] .xray-svcmap-wrap path[stroke="#b0bec5"] {
  stroke: #8d6e63 !important;
}

html[data-theme="parchment"] .xray-svcmap-wrap marker path {
  fill: #8d6e63 !important;
}

/* ══════════════════════════════════════════
   MONITORING
   ══════════════════════════════════════════ */

html[data-theme="parchment"] .monitoring-section-header {
  color: #3e2723;
  border-color: #c9a961;
  font-weight: 600;
}

html[data-theme="parchment"] .metric-card {
  background: #faf6ed;
  border: 2px solid #d4af37;
  box-shadow: 0 4px 12px rgba(62, 39, 35, 0.1);
}

html[data-theme="parchment"] .metric-card:hover {
  box-shadow: 0 6px 18px rgba(62, 39, 35, 0.15);
}

html[data-theme="parchment"] .metric-card-title {
  color: #3e2723;
  border-color: #d4c89a;
  font-weight: 600;
}

html[data-theme="parchment"] .metric-card-loading {
  color: #8d6e63;
}

html[data-theme="parchment"] .metric-card-error {
  background: rgba(139, 54, 38, 0.08);
  color: #8b3626;
}

html[data-theme="parchment"] .metric-card-body {
  background: #f4e4c1;
}

html[data-theme="parchment"] .btn-metric-filter {
  background: #faf6ed;
  border: 1px solid #c9a961;
  color: #5d4037;
}

html[data-theme="parchment"] .btn-metric-filter:hover {
  background: rgba(212, 175, 55, 0.15);
  color: #3e2723;
}

html[data-theme="parchment"] .btn-metric-filter.active {
  background: #b8860b;
  border-color: #8b6914;
  color: #faf6ed;
  font-weight: 600;
}

html[data-theme="parchment"] .btn-time-range {
  background: #faf6ed;
  border: 1px solid #c9a961;
  color: #5d4037;
}

html[data-theme="parchment"] .btn-time-range:hover {
  background: rgba(212, 175, 55, 0.15);
  color: #3e2723;
}

html[data-theme="parchment"] .btn-time-range.active {
  background: #b8860b;
  border-color: #8b6914;
  color: #faf6ed;
  font-weight: 600;
}

html[data-theme="parchment"] .btn-monitoring-refresh,
html[data-theme="parchment"] .btn-monitoring-console {
  background: rgba(212, 175, 55, 0.1);
  border: 1px solid #c9a961;
  color: #5d4037;
}

html[data-theme="parchment"] .btn-monitoring-refresh:hover,
html[data-theme="parchment"] .btn-monitoring-console:hover {
  background: rgba(212, 175, 55, 0.2);
}

/* ══════════════════════════════════════════
   USERS (Parchment overrides)
   ══════════════════════════════════════════ */

html[data-theme="parchment"] .users-table-wrapper {
  background: #faf6ed;
  border: 2px solid #c9a961;
  box-shadow: 0 4px 16px rgba(62, 39, 35, 0.1);
}

html[data-theme="parchment"] .users-table th {
  background: #f4e4c1;
  color: #3e2723;
  border-color: #d4c89a;
  font-weight: 600;
}

html[data-theme="parchment"] .users-table td {
  border-color: #e8d4a8;
  color: #3e2723;
}

html[data-theme="parchment"] .users-table tr:hover td {
  background: #fff9f0;
}

html[data-theme="parchment"] .users-th-sortable:hover {
  background: rgba(212, 175, 55, 0.15);
}

html[data-theme="parchment"] .users-th-active {
  color: #b8860b;
}

html[data-theme="parchment"] .users-search-input {
  background: #fff9f0;
  border: 1px solid #c9a961;
  color: #3e2723;
}

html[data-theme="parchment"] .users-search-input:focus {
  border-color: #b8860b;
  box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.2);
}

html[data-theme="parchment"] .users-search-icon {
  color: #8d6e63;
}

html[data-theme="parchment"] .users-modal {
  background: #faf6ed;
  border: 3px double #b8860b;
  box-shadow: 0 8px 32px rgba(62, 39, 35, 0.25);
  color: #3e2723;
}

html[data-theme="parchment"] .users-modal-header {
  border-color: #c9a961;
  color: #3e2723;
  font-weight: 600;
}

html[data-theme="parchment"] .users-modal input,
html[data-theme="parchment"] .users-modal select {
  background: #fff9f0;
  border: 1px solid #c9a961;
  color: #3e2723;
}

html[data-theme="parchment"] .users-modal input:focus,
html[data-theme="parchment"] .users-modal select:focus {
  border-color: #b8860b;
  box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.2);
}

/* ── Activity modal ─────────────────────────────────────────────────────── */
html[data-theme="parchment"] .activity-summary {
  background: #faf0d7;
  border: 1px solid #d4c89a;
}
html[data-theme="parchment"] .activity-table-wrapper {
  border-color: #c9a961;
}
html[data-theme="parchment"] .activity-table th {
  background: #faf0d7;
  border-bottom-color: #d4c89a;
  color: #5d4037;
}
html[data-theme="parchment"] .activity-status-high {
  background: #fef3c7;
  color: #78350f;
  border: 1px solid #c9a961;
}
html[data-theme="parchment"] .activity-status-medium {
  background: #fef9e7;
  color: #78350f;
  border: 1px solid #d4c89a;
}
html[data-theme="parchment"] .activity-status-expired {
  background: #f5ede0;
  color: #8d6e63;
}
html[data-theme="parchment"] .activity-status-none {
  background: #f5ede0;
  color: #8d6e63;
}
html[data-theme="parchment"] .activity-result-badge.pass {
  background: rgba(74, 124, 40, 0.15);
  color: #2d6a1a;
}
html[data-theme="parchment"] .activity-result-badge.fail {
  background: rgba(139, 69, 19, 0.15);
  color: #8b4513;
}

/* ══════════════════════════════════════════
   PROFILE (Parchment overrides)
   ══════════════════════════════════════════ */

html[data-theme="parchment"] .profile-hero {
  background: #faf6ed;
  border: 2px solid #d4af37;
  box-shadow: 0 6px 20px rgba(62, 39, 35, 0.15);
}

html[data-theme="parchment"] .profile-avatar {
  background: #fff9f0;
  border: 3px solid #b8860b;
  color: #5d4037;
  box-shadow: 0 4px 12px rgba(62, 39, 35, 0.2);
}

html[data-theme="parchment"] .profile-name {
  color: #3e2723;
  font-weight: 600;
}

html[data-theme="parchment"] .profile-email,
html[data-theme="parchment"] .profile-sub {
  color: #8d6e63;
}

html[data-theme="parchment"] .profile-card {
  background: #faf6ed;
  border: 2px solid #c9a961;
  box-shadow: 0 4px 16px rgba(62, 39, 35, 0.1);
}

html[data-theme="parchment"] .card-header {
  border-color: #d4c89a;
}

html[data-theme="parchment"] .card-header h3 {
  color: #3e2723;
  font-weight: 600;
}

html[data-theme="parchment"] .profile-field-label {
  color: #5d4037;
  font-weight: 500;
}

html[data-theme="parchment"] .profile-field-value {
  color: #3e2723;
  border-color: #e8d4a8;
}

html[data-theme="parchment"] .profile-input {
  background: #fff9f0;
  border: 1px solid #c9a961;
  color: #3e2723;
}

html[data-theme="parchment"] .profile-input:focus {
  border-color: #b8860b;
  box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.2);
}

html[data-theme="parchment"] .profile-input:disabled {
  background: #f4e4c1;
  color: #8d6e63;
}

html[data-theme="parchment"] .profile-mfa-section {
  background: #faf6ed;
  border: 1px solid #d4c89a;
}

html[data-theme="parchment"] .profile-mfa-section h4 {
  color: #3e2723;
  font-weight: 600;
}

html[data-theme="parchment"] .profile-mfa-on {
  background: rgba(107, 142, 35, 0.1);
  border: 2px solid #8da656;
  color: #6b8e23;
}

html[data-theme="parchment"] .profile-mfa-off {
  background: rgba(212, 160, 36, 0.1);
  border: 2px solid #d4a024;
  color: #8b6914;
}

html[data-theme="parchment"] .profile-success-msg {
  background: rgba(107, 142, 35, 0.1);
  border: 2px solid #8da656;
  color: #6b8e23;
}

html[data-theme="parchment"] .profile-error-msg {
  background: rgba(139, 54, 38, 0.1);
  border: 2px solid #b8524a;
  color: #8b3626;
}

html[data-theme="parchment"] .btn-primary {
  background: #b8860b;
  border-color: #8b6914;
  color: #faf6ed;
  box-shadow: 0 2px 8px rgba(184, 134, 11, 0.3);
  font-weight: 600;
}

html[data-theme="parchment"] .btn-primary:hover:not(:disabled) {
  background: #d4af37;
  border-color: #b8860b;
  box-shadow: 0 4px 12px rgba(212, 175, 55, 0.4);
}

html[data-theme="parchment"] .btn-secondary {
  background: transparent;
  border: 1px solid #8d6e63;
  color: #5d4037;
}

html[data-theme="parchment"] .btn-secondary:hover:not(:disabled) {
  background: rgba(141, 110, 99, 0.1);
}

html[data-theme="parchment"] .btn-danger,
html[data-theme="parchment"] .btn-danger-sm {
  background: rgba(139, 54, 38, 0.1);
  border: 2px solid #8b3626;
  color: #8b3626;
}

html[data-theme="parchment"] .btn-danger:hover:not(:disabled),
html[data-theme="parchment"] .btn-danger-sm:hover {
  background: rgba(139, 54, 38, 0.2);
  box-shadow: 0 4px 12px rgba(139, 54, 38, 0.25);
}

html[data-theme="parchment"] .btn-icon {
  color: #8d6e63;
}

html[data-theme="parchment"] .btn-icon:hover {
  color: #5d4037;
  background: rgba(141, 110, 99, 0.1);
}

/* ── Profile theme picker (Parchment) ── */

html[data-theme="parchment"] .profile-themes {
  background: #faf6ed;
  border: 2px solid #c9a961;
  box-shadow: 0 4px 16px rgba(62, 39, 35, 0.1);
}

html[data-theme="parchment"] .profile-themes-header {
  color: #5d4037;
}

html[data-theme="parchment"] .profile-theme-option {
  border: 1px solid #c9a961;
}

html[data-theme="parchment"] .profile-theme-option:hover {
  border-color: #b8860b;
}

html[data-theme="parchment"] .profile-theme-option--active {
  border-color: #b8860b;
  box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.2);
}

html[data-theme="parchment"] .profile-theme-name {
  color: #5d4037;
}

html[data-theme="parchment"] .profile-theme-option--active .profile-theme-name {
  color: #3e2723;
  font-weight: 600;
}

/* ── Scrollbars ── */
html[data-theme="parchment"] ::-webkit-scrollbar-track {
  background: #f4e4c1;
}

html[data-theme="parchment"] ::-webkit-scrollbar-thumb {
  background: rgba(201, 169, 97, 0.6);
}

html[data-theme="parchment"] ::-webkit-scrollbar-thumb:hover {
  background: rgba(184, 134, 11, 0.8);
}

/* ══════════════════════════════════════════════════════════════════════════════
   POP WORLD THEME
   ══════════════════════════════════════════════════════════════════════════════ */

html[data-theme="pop"] {
  --primary-color: #ff1493;
  --primary-dark: #c026d3;
  --primary-light: #ff69b4;
  --secondary-color: #06b6d4;
  --secondary-dark: #0891b2;
  --accent-color: #fbbf24;
  --text-primary: #1e293b;
  --text-secondary: #475569;
  --text-light: #94a3b8;
  --bg-primary: #fff0f5;
  --bg-secondary: #fce7f3;
  --bg-dark: #f9fafb;
  --border-color: rgba(255, 20, 147, 0.3);
  --success: #10b981;
  --warning: #fbbf24;
  --danger: #f43f5e;
  --info: #06b6d4;
  --card-bg:            #ffffff;
  --input-bg:           #ffffff;
  --sidebar-bg:         #fff0f5;
  --table-header-bg:    #faf5ff;
  --hover-bg:           #fce7f3;
  --badge-bg:           #e9d5ff;
  --img-placeholder-bg: #faf5ff;
  --error-color:        #f43f5e;
}

html[data-theme="pop"] body {
  background: linear-gradient(135deg, #fff0f5 0%, #fce7f3 50%, #e0f2fe 100%);
  color: #1e293b;
  font-family: 'Poppins', 'Helvetica Neue', 'Arial', sans-serif;
  font-weight: 500;
}

/* ── Layout ─────────────────────────────────────────────────────────────── */

html[data-theme="pop"] .layout-main {
  background: transparent;
}

html[data-theme="pop"] .header {
  background: linear-gradient(90deg, #ff1493 0%, #c026d3 50%, #06b6d4 100%);
  border-bottom: none;
  box-shadow: 0 4px 20px rgba(255, 20, 147, 0.3);
}

html[data-theme="pop"] .header-logo-img {
  filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.8)) brightness(1.2);
}

html[data-theme="pop"] .header-logo-suffix {
  color: rgba(255, 255, 255, 0.8);
  border-left-color: rgba(255, 255, 255, 0.4);
}

html[data-theme="pop"] .header-beta-badge {
  background: linear-gradient(135deg, #ff1493, #c026d3, #06b6d4, #ff1493);
  background-size: 400% 400%;
  animation: betaShimmer 4s ease infinite;
  box-shadow: 0 0 12px rgba(255, 20, 147, 0.6);
  color: #ffffff;
  font-weight: 700;
}

html[data-theme="pop"] .menu-toggle {
  color: #ffffff;
}

html[data-theme="pop"] .menu-toggle:hover {
  color: #fbbf24;
}

html[data-theme="pop"] .header-user-info {
  color: #ffffff;
}

html[data-theme="pop"] .header-user-name,
html[data-theme="pop"] .user-name {
  color: #ffffff;
}

html[data-theme="pop"] .header-user-role,
html[data-theme="pop"] .user-role {
  color: rgba(255, 255, 255, 0.7);
}

html[data-theme="pop"] .user-avatar {
  background: linear-gradient(135deg, #ff1493 0%, #c026d3 100%);
  border: 2px solid #06b6d4;
  color: #ffffff;
  box-shadow: 0 0 16px rgba(255, 20, 147, 0.4);
}

html[data-theme="pop"] .logout-button {
  background: linear-gradient(135deg, #ff1493 0%, #c026d3 100%);
  color: #ffffff;
  border: 2px solid transparent;
  font-weight: 700;
}

html[data-theme="pop"] .logout-button:hover {
  background: linear-gradient(135deg, #ff1493 0%, #a21caf 100%);
  box-shadow: 0 4px 16px rgba(255, 20, 147, 0.3);
}

html[data-theme="pop"] .btn-export-pdf {
  background: linear-gradient(135deg, #ff1493 0%, #c026d3 100%);
  color: #ffffff;
  border: 2px solid transparent;
  font-weight: 700;
}

html[data-theme="pop"] .btn-export-pdf:hover {
  background: linear-gradient(135deg, #ff1493 0%, #a21caf 100%);
  box-shadow: 0 4px 16px rgba(255, 20, 147, 0.3);
}

/* ── Sidebar ────────────────────────────────────────────────────────────── */

html[data-theme="pop"] .sidebar {
  background: linear-gradient(180deg, #fce7f3 0%, #e0f2fe 100%);
  border-right: 2px solid rgba(255, 20, 147, 0.2);
}

html[data-theme="pop"] .sidebar-link {
  color: #475569;
  border-left: 3px solid transparent;
}

html[data-theme="pop"] .sidebar-link:hover {
  background: rgba(255, 20, 147, 0.1);
  color: #1e293b;
  border-left-color: #ff1493;
}

html[data-theme="pop"] .sidebar-link.active {
  background: linear-gradient(90deg, rgba(255, 20, 147, 0.15) 0%, transparent 100%);
  color: #1e293b;
  border-left-color: #ff1493;
  font-weight: 700;
}

html[data-theme="pop"] .sidebar-icon {
  color: #ff1493;
}

/* ── Scrollbars ── */
html[data-theme="pop"] ::-webkit-scrollbar-track {
  background: #fff0f5;
}

html[data-theme="pop"] ::-webkit-scrollbar-thumb {
  background: rgba(255, 20, 147, 0.3);
}

html[data-theme="pop"] ::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 20, 147, 0.5);
}

/* ── Profile theme picker ───────────────────────────────────────────────── */

html[data-theme="pop"] .profile-themes {
  background: #ffffff;
  border: 2px solid rgba(255, 20, 147, 0.3);
  box-shadow: 0 8px 24px rgba(255, 20, 147, 0.15);
}

html[data-theme="pop"] .profile-theme-option {
  border-color: rgba(255, 20, 147, 0.3);
}

html[data-theme="pop"] .profile-theme-option:hover {
  border-color: #ff1493;
  background: rgba(255, 20, 147, 0.05);
}

html[data-theme="pop"] .profile-theme-option--active {
  border-color: #ff1493;
  box-shadow: 0 0 0 3px rgba(255, 20, 147, 0.2);
  background: rgba(255, 20, 147, 0.1);
}

html[data-theme="pop"] .profile-theme-name {
  color: #1e293b;
  font-weight: 700;
}

html[data-theme="pop"] .profile-theme-option--active .profile-theme-name {
  color: #ff1493;
  font-weight: 800;
}

/* ── Dashboard ──────────────────────────────────────────────────────────── */

html[data-theme="pop"] .stat-card,
html[data-theme="pop"] .dashboard-card,
html[data-theme="pop"] .health-section-row,
html[data-theme="pop"] .dashboard-manual-sync-box,
html[data-theme="pop"] .dashboard-schedule-row {
  background: #ffffff;
  border: 2px solid rgba(255, 20, 147, 0.3);
  box-shadow: 0 4px 16px rgba(255, 20, 147, 0.15);
  color: #1e293b;
}

html[data-theme="pop"] .stat-card:hover,
html[data-theme="pop"] .dashboard-card:hover {
  box-shadow: 0 8px 24px rgba(255, 20, 147, 0.25);
  border-color: #ff1493;
  transform: translateY(-2px);
}

/* ── Reports ────────────────────────────────────────────────────────────── */

html[data-theme="pop"] .date-select,
html[data-theme="pop"] .sync-meta,
html[data-theme="pop"] .report-section {
  background: #ffffff;
  border: 2px solid rgba(255, 20, 147, 0.3);
  color: #1e293b;
}

/* ── Settings, Roles, Brand Flags ───────────────────────────────────────── */

html[data-theme="pop"] .settings-card,
html[data-theme="pop"] .role-card,
html[data-theme="pop"] .brand-flag-card {
  background: #ffffff;
  border: 2px solid rgba(255, 20, 147, 0.3);
  color: #1e293b;
  box-shadow: 0 4px 16px rgba(255, 20, 147, 0.1);
}

/* ── Analytics ──────────────────────────────────────────────────────────── */

html[data-theme="pop"] .period-btn,
html[data-theme="pop"] .kpi-card,
html[data-theme="pop"] .analytics-card,
html[data-theme="pop"] .segment-card,
html[data-theme="pop"] .hub-card {
  background: #ffffff;
  border: 2px solid rgba(255, 20, 147, 0.3);
  color: #1e293b;
  box-shadow: 0 4px 16px rgba(255, 20, 147, 0.1);
}

html[data-theme="pop"] .period-btn.active {
  background: linear-gradient(135deg, #ff1493, #c026d3);
  border-color: #ff1493;
  color: #ffffff;
  font-weight: 700;
}

/* ── Monitoring ─────────────────────────────────────────────────────────── */

html[data-theme="pop"] .monitoring-section-header {
  color: #ff1493;
  border-color: #ff1493;
  background: linear-gradient(180deg, #ffffff 0%, #fce7f3 100%);
  border-left-width: 4px;
  font-weight: 700;
}

html[data-theme="pop"] .metric-card {
  background: #ffffff;
  border: 2px solid rgba(255, 20, 147, 0.3);
  box-shadow: 0 4px 16px rgba(255, 20, 147, 0.1);
}

html[data-theme="pop"] .metric-card-title {
  color: #1e293b;
  background: #fce7f3;
  border-color: rgba(255, 20, 147, 0.3);
  font-weight: 700;
}

html[data-theme="pop"] .metric-card-body {
  background: #ffffff;
}

html[data-theme="pop"] .btn-metric-filter,
html[data-theme="pop"] .btn-time-range,
html[data-theme="pop"] .btn-monitoring-refresh,
html[data-theme="pop"] .btn-monitoring-console {
  background: #ffffff;
  border: 2px solid rgba(255, 20, 147, 0.4);
  color: #ff1493;
  font-weight: 700;
}

html[data-theme="pop"] .btn-metric-filter:hover,
html[data-theme="pop"] .btn-time-range:hover {
  background: rgba(255, 20, 147, 0.1);
  border-color: #ff1493;
}

html[data-theme="pop"] .btn-metric-filter.active,
html[data-theme="pop"] .btn-time-range.active {
  background: linear-gradient(135deg, #ff1493, #c026d3);
  border-color: #ff1493;
  color: #ffffff;
}

/* ── Error Logs ─────────────────────────────────────────────────────────── */

html[data-theme="pop"] .logs-stat-card {
  background: #ffffff;
  border: 2px solid rgba(255, 20, 147, 0.3);
  color: #1e293b;
  box-shadow: 0 4px 16px rgba(255, 20, 147, 0.1);
}

html[data-theme="pop"] .logs-row {
  background: #ffffff;
  border: 1px solid rgba(255, 20, 147, 0.2);
}

html[data-theme="pop"] .logs-row:hover {
  background: rgba(255, 20, 147, 0.05);
  border-color: #ff1493;
}

html[data-theme="pop"] .btn-logs-refresh,
html[data-theme="pop"] .btn-logs-console,
html[data-theme="pop"] .btn-logs-group,
html[data-theme="pop"] .btn-logs-level,
html[data-theme="pop"] .btn-logs-time {
  background: #ffffff;
  border: 2px solid rgba(255, 20, 147, 0.4);
  color: #ff1493;
  font-weight: 700;
}

html[data-theme="pop"] .btn-logs-group.active,
html[data-theme="pop"] .btn-logs-level.active,
html[data-theme="pop"] .btn-logs-time.active {
  background: linear-gradient(135deg, #ff1493, #c026d3);
  border-color: #ff1493;
  color: #ffffff;
}

/* ── XRay ───────────────────────────────────────────────────────────────── */

html[data-theme="pop"] .btn-xray-refresh,
html[data-theme="pop"] .btn-xray-console,
html[data-theme="pop"] .btn-xray-time,
html[data-theme="pop"] .btn-xray-filter {
  background: #ffffff;
  border: 2px solid rgba(255, 20, 147, 0.4);
  color: #ff1493;
  font-weight: 700;
}

html[data-theme="pop"] .btn-xray-time.active,
html[data-theme="pop"] .btn-xray-filter.active {
  background: linear-gradient(135deg, #ff1493, #c026d3);
  border-color: #ff1493;
  color: #ffffff;
}

html[data-theme="pop"] .xray-stat-card,
html[data-theme="pop"] .xray-section-card {
  background: #ffffff;
  border: 2px solid rgba(255, 20, 147, 0.3);
  color: #1e293b;
  box-shadow: 0 4px 16px rgba(255, 20, 147, 0.1);
}

html[data-theme="pop"] .xray-row:hover {
  background: rgba(255, 20, 147, 0.05);
}

html[data-theme="pop"] .xray-svcmap-wrap rect[stroke="#e2e8f0"] {
  stroke: rgba(255, 20, 147, 0.4) !important;
}

html[data-theme="pop"] .xray-svcmap-wrap text[fill="#1e293b"] {
  fill: #1e293b !important;
  font-weight: 700;
}

/* ── Users ──────────────────────────────────────────────────────────────── */

html[data-theme="pop"] .users-search-input {
  background: #ffffff;
  border: 2px solid rgba(255, 20, 147, 0.4);
  color: #1e293b;
}

html[data-theme="pop"] .users-table {
  background: #ffffff;
  border: 2px solid rgba(255, 20, 147, 0.3);
  box-shadow: 0 4px 16px rgba(255, 20, 147, 0.1);
}

html[data-theme="pop"] .users-th-sortable.users-th-active {
  color: #ff1493;
}

/* ── Activity modal ─────────────────────────────────────────────────────── */
html[data-theme="pop"] .activity-status-high {
  background: #fef3c7;
  color: #92400e;
  border: 1px solid #fde68a;
}
html[data-theme="pop"] .activity-status-medium {
  background: #fef9c3;
  color: #713f12;
}
html[data-theme="pop"] .activity-result-badge.pass {
  background: #dcfce7;
  color: #166534;
}
html[data-theme="pop"] .activity-result-badge.fail {
  background: #fee2e2;
  color: #991b1b;
}

/* Rockstar Widget */
html[data-theme="pop"] .rockstar-widget-header {
  background: linear-gradient(120deg, #ff1493 0%, #c026d3 60%, #06b6d4 100%) !important;
  color: #ffffff !important;
}
html[data-theme="pop"] .rockstar-widget-header .actions button {
  background: rgba(255, 255, 255, 0.22) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.35) !important;
  border-radius: 6px !important;
}
html[data-theme="pop"] .rockstar-widget-header .actions button:hover {
  background: rgba(255, 255, 255, 0.38) !important;
}

html[data-theme="pop"] .rockstar-widget-fab {
  background: linear-gradient(135deg, #ff1493, #c026d3) !important;
  color: #ffffff !important;
}

/* ══════════════════════════════════════════════════════════════════════════════
   ROCK & ROLL THEME
   ══════════════════════════════════════════════════════════════════════════════ */

html[data-theme="rock"] {
  --primary-color: #dc143c;
  --primary-dark: #b01030;
  --primary-light: #ff1744;
  --secondary-color: #ff4444;
  --secondary-dark: #cc0000;
  --accent-color: #ffcc00;
  --text-primary: #ffffff;
  --text-secondary: #cccccc;
  --text-light: #999999;
  --bg-primary: #0a0a0a;
  --bg-secondary: #1a1a1a;
  --bg-dark: #000000;
  --border-color: rgba(220, 20, 60, 0.3);
  --success: #4caf50;
  --warning: #ffcc00;
  --danger: #ff1744;
  --info: #ff4444;
  --card-bg:            #1a0a0a;
  --input-bg:           #1a0a0a;
  --sidebar-bg:         #0a0000;
  --table-header-bg:    #0a0000;
  --hover-bg:           #0a0000;
  --badge-bg:           #2a0a0a;
  --img-placeholder-bg: #0a0000;
  --error-color:        #ff1744;
}

html[data-theme="rock"] body {
  background-color: #0a0a0a;
  color: #ffffff;
  font-family: 'Impact', 'Arial Black', 'Helvetica', sans-serif;
  font-weight: 700;
}

/* ── Layout ─────────────────────────────────────────────────────────────── */

html[data-theme="rock"] .layout-main {
  background: #0a0a0a;
}

html[data-theme="rock"] .header {
  background: #000000;
  border-bottom: 2px solid #dc143c;
  box-shadow: 0 4px 12px rgba(220, 20, 60, 0.3);
}

html[data-theme="rock"] .header-logo-img {
  filter: drop-shadow(0 0 8px rgba(220, 20, 60, 0.8)) brightness(1.1);
}

html[data-theme="rock"] .header-logo-suffix {
  color: #dc143c;
  border-left-color: rgba(220, 20, 60, 0.4);
}

html[data-theme="rock"] .header-beta-badge {
  background: linear-gradient(135deg, #dc143c, #ff1744, #dc143c);
  background-size: 300% 300%;
  animation: betaShimmer 3s ease infinite;
  box-shadow: 0 0 8px rgba(220, 20, 60, 0.5);
  color: #000000;
  font-weight: 900;
}

html[data-theme="rock"] .menu-toggle {
  color: #dc143c;
}

html[data-theme="rock"] .menu-toggle:hover {
  color: #ff1744;
}

html[data-theme="rock"] .header-user-info {
  color: #ffffff;
}

html[data-theme="rock"] .header-user-name {
  color: #ffffff;
}

html[data-theme="rock"] .header-user-role {
  color: #999999;
}

html[data-theme="rock"] .user-avatar {
  background: linear-gradient(135deg, #1a1a1a 0%, #000000 100%);
  border: 2px solid #dc143c;
  color: #ffffff;
  box-shadow: 0 0 12px rgba(220, 20, 60, 0.4);
}

html[data-theme="rock"] .logout-button {
  background: #dc143c;
  color: #ffffff;
  border: 2px solid #dc143c;
  font-weight: 900;
}

html[data-theme="rock"] .logout-button:hover {
  background: #ff1744;
  border-color: #ff1744;
  box-shadow: 0 0 12px rgba(220, 20, 60, 0.5);
}

html[data-theme="rock"] .btn-export-pdf {
  background: #dc143c;
  color: #ffffff;
  border: 2px solid #dc143c;
  font-weight: 900;
}

html[data-theme="rock"] .btn-export-pdf:hover {
  background: #ff1744;
  border-color: #ff1744;
  box-shadow: 0 0 12px rgba(220, 20, 60, 0.5);
}

/* ── Sidebar ────────────────────────────────────────────────────────────── */

html[data-theme="rock"] .sidebar {
  background: linear-gradient(180deg, #1a1a1a 0%, #000000 100%);
  border-right: 2px solid rgba(220, 20, 60, 0.3);
}

html[data-theme="rock"] .sidebar-link {
  color: #cccccc;
  border-left: 3px solid transparent;
}

html[data-theme="rock"] .sidebar-link:hover {
  background: rgba(220, 20, 60, 0.15);
  color: #ffffff;
  border-left-color: #dc143c;
}

html[data-theme="rock"] .sidebar-link.active {
  background: rgba(220, 20, 60, 0.2);
  color: #ffffff;
  border-left-color: #dc143c;
  font-weight: 900;
}

html[data-theme="rock"] .sidebar-icon {
  color: #dc143c;
}

/* ── Scrollbars ── */
html[data-theme="rock"] ::-webkit-scrollbar-track {
  background: #0a0a0a;
}

html[data-theme="rock"] ::-webkit-scrollbar-thumb {
  background: rgba(220, 20, 60, 0.4);
}

html[data-theme="rock"] ::-webkit-scrollbar-thumb:hover {
  background: rgba(220, 20, 60, 0.6);
}

/* ── Profile theme picker ───────────────────────────────────────────────── */

html[data-theme="rock"] .profile-themes {
  background: #1a1a1a;
  border: 2px solid rgba(220, 20, 60, 0.3);
}

html[data-theme="rock"] .profile-theme-option {
  border-color: rgba(220, 20, 60, 0.3);
}

html[data-theme="rock"] .profile-theme-option:hover {
  border-color: #dc143c;
  background: rgba(220, 20, 60, 0.05);
}

html[data-theme="rock"] .profile-theme-option--active {
  border-color: #dc143c;
  box-shadow: 0 0 0 3px rgba(220, 20, 60, 0.2);
  background: rgba(220, 20, 60, 0.1);
}

html[data-theme="rock"] .profile-theme-name {
  color: #ffffff;
  font-weight: 900;
}

html[data-theme="rock"] .profile-theme-option--active .profile-theme-name {
  color: #dc143c;
}

/* ── Dashboard ──────────────────────────────────────────────────────────── */

html[data-theme="rock"] .stat-card,
html[data-theme="rock"] .dashboard-card,
html[data-theme="rock"] .health-section-row,
html[data-theme="rock"] .dashboard-manual-sync-box,
html[data-theme="rock"] .dashboard-schedule-row {
  background: #1a1a1a;
  border: 2px solid rgba(220, 20, 60, 0.3);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
  color: #ffffff;
}

html[data-theme="rock"] .stat-card:hover,
html[data-theme="rock"] .dashboard-card:hover {
  box-shadow: 0 6px 16px rgba(220, 20, 60, 0.3);
  border-color: #dc143c;
}

/* ── Reports ────────────────────────────────────────────────────────────── */

html[data-theme="rock"] .date-select,
html[data-theme="rock"] .sync-meta,
html[data-theme="rock"] .report-section {
  background: #1a1a1a;
  border: 2px solid rgba(220, 20, 60, 0.3);
  color: #ffffff;
}

html[data-theme="rock"] .changes-list {
  background: rgba(220, 20, 60, 0.15) !important;
  border-color: rgba(220, 20, 60, 0.4) !important;
}

html[data-theme="rock"] .change-field {
  color: #cccccc !important;
}

html[data-theme="rock"] .change-from {
  color: #ff6b6b !important;
}

html[data-theme="rock"] .change-arrow {
  color: #ffffff !important;
}

html[data-theme="rock"] .change-to {
  color: #4ade80 !important;
}

html[data-theme="rock"] .changes-toggle {
  background: rgba(220, 20, 60, 0.1) !important;
  border-color: rgba(220, 20, 60, 0.4) !important;
  color: #ffffff !important;
}

html[data-theme="rock"] .changes-toggle:hover {
  background: rgba(220, 20, 60, 0.2) !important;
}

/* ── Settings, Roles, Brand Flags ───────────────────────────────────────── */

html[data-theme="rock"] .settings-card,
html[data-theme="rock"] .role-card,
html[data-theme="rock"] .brand-flag-card {
  background: #1a1a1a;
  border: 2px solid rgba(220, 20, 60, 0.3);
  color: #ffffff;
}

html[data-theme="rock"] .brand-flags-filter-tabs {
  background: #1a1a1a !important;
  border-color: rgba(220, 20, 60, 0.4) !important;
}

html[data-theme="rock"] .brand-flags-filter-btn {
  background: #0a0a0a !important;
  border-color: rgba(220, 20, 60, 0.3) !important;
  color: #ffffff !important;
  font-weight: 900;
}

html[data-theme="rock"] .brand-flags-filter-btn:hover {
  background: rgba(220, 20, 60, 0.15) !important;
  color: #ffffff !important;
}

html[data-theme="rock"] .brand-flags-filter-btn.active {
  background: #dc143c !important;
  border-color: #dc143c !important;
  color: #ffffff !important;
}

html[data-theme="rock"] .brand-flags-search {
  background: #1a1a1a !important;
  border-color: rgba(220, 20, 60, 0.4) !important;
  color: #ffffff !important;
}

html[data-theme="rock"] .brand-flags-search:focus {
  border-color: #dc143c !important;
}

html[data-theme="rock"] .brand-flags-summary-item {
  background: rgba(220, 20, 60, 0.2) !important;
  color: #ffffff !important;
}

html[data-theme="rock"] .brand-flag-state-pill.active {
  background: rgba(220, 20, 60, 0.25) !important;
  color: #ffffff !important;
}

html[data-theme="rock"] .brand-flag-state-pill.inactive {
  background: rgba(255, 255, 255, 0.08) !important;
  color: #aaaaaa !important;
}

html[data-theme="rock"] .brand-flag-slider {
  background: rgba(220, 20, 60, 0.3) !important;
}

/* ── Analytics ──────────────────────────────────────────────────────────── */

html[data-theme="rock"] .period-btn,
html[data-theme="rock"] .kpi-card,
html[data-theme="rock"] .analytics-card,
html[data-theme="rock"] .segment-card,
html[data-theme="rock"] .hub-card {
  background: #1a1a1a;
  border: 2px solid rgba(220, 20, 60, 0.3);
  color: #ffffff;
}

html[data-theme="rock"] .period-btn.active {
  background: #dc143c;
  border-color: #dc143c;
  color: #ffffff;
  font-weight: 900;
}

/* ── Monitoring ─────────────────────────────────────────────────────────── */

html[data-theme="rock"] .monitoring-section-header {
  color: #dc143c;
  border-color: #dc143c;
  background: linear-gradient(180deg, #1a1a1a 0%, #0a0a0a 100%);
  border-left-width: 4px;
  font-weight: 900;
}

html[data-theme="rock"] .metric-card {
  background: #1a1a1a;
  border: 2px solid rgba(220, 20, 60, 0.3);
}

html[data-theme="rock"] .metric-card-title {
  color: #ffffff;
  background: #0a0a0a;
  border-color: rgba(220, 20, 60, 0.3);
  font-weight: 900;
}

html[data-theme="rock"] .metric-card-body {
  background: #1a1a1a;
}

html[data-theme="rock"] .metric-card-img {
  filter: invert(1) hue-rotate(180deg) brightness(0.8) contrast(1.2);
  opacity: 0.9;
}

html[data-theme="rock"] .btn-metric-filter,
html[data-theme="rock"] .btn-time-range,
html[data-theme="rock"] .btn-monitoring-refresh,
html[data-theme="rock"] .btn-monitoring-console {
  background: rgba(220, 20, 60, 0.1);
  border-color: rgba(220, 20, 60, 0.4);
  color: #ffffff;
  font-weight: 900;
}

html[data-theme="rock"] .btn-metric-filter:hover,
html[data-theme="rock"] .btn-time-range:hover {
  background: rgba(220, 20, 60, 0.2);
  border-color: #dc143c;
}

html[data-theme="rock"] .btn-metric-filter.active,
html[data-theme="rock"] .btn-time-range.active {
  background: #dc143c;
  border-color: #dc143c;
  color: #ffffff;
}

/* ── Error Logs ─────────────────────────────────────────────────────────── */

html[data-theme="rock"] .logs-stat-card,
html[data-theme="rock"] .logs-section-card {
  background: #1a1a1a !important;
  border: 2px solid rgba(220, 20, 60, 0.3) !important;
  color: #ffffff !important;
}

html[data-theme="rock"] .logs-section-title {
  color: #ffffff !important;
}

html[data-theme="rock"] .logs-placeholder {
  color: #cccccc !important;
}

html[data-theme="rock"] .logs-error-msg {
  background: rgba(220, 20, 60, 0.2) !important;
  color: #ff6b6b !important;
}

html[data-theme="rock"] .logs-row {
  background: #1a1a1a;
  border: 1px solid rgba(220, 20, 60, 0.2);
}

html[data-theme="rock"] .logs-row:hover {
  background: rgba(220, 20, 60, 0.1);
  border-color: #dc143c;
}

html[data-theme="rock"] .btn-logs-refresh,
html[data-theme="rock"] .btn-logs-console,
html[data-theme="rock"] .btn-logs-group,
html[data-theme="rock"] .btn-logs-level,
html[data-theme="rock"] .btn-logs-time {
  background: rgba(220, 20, 60, 0.1);
  border-color: rgba(220, 20, 60, 0.4);
  color: #ffffff;
  font-weight: 900;
}

html[data-theme="rock"] .btn-logs-group.active,
html[data-theme="rock"] .btn-logs-level.active,
html[data-theme="rock"] .btn-logs-time.active {
  background: #dc143c;
  border-color: #dc143c;
  color: #ffffff;
}

/* ── XRay ───────────────────────────────────────────────────────────────── */

html[data-theme="rock"] .btn-xray-refresh,
html[data-theme="rock"] .btn-xray-console,
html[data-theme="rock"] .btn-xray-time,
html[data-theme="rock"] .btn-xray-filter {
  background: rgba(220, 20, 60, 0.1);
  border-color: rgba(220, 20, 60, 0.4);
  color: #ffffff;
  font-weight: 900;
}

html[data-theme="rock"] .btn-xray-time.active,
html[data-theme="rock"] .btn-xray-filter.active {
  background: #dc143c;
  border-color: #dc143c;
  color: #ffffff;
}

html[data-theme="rock"] .xray-stat-card,
html[data-theme="rock"] .xray-section-card {
  background: #1a1a1a;
  border: 2px solid rgba(220, 20, 60, 0.3);
  color: #ffffff;
}

html[data-theme="rock"] .xray-table {
  background: #1a1a1a !important;
}

html[data-theme="rock"] .xray-table th {
  color: #cccccc !important;
  border-color: rgba(220, 20, 60, 0.3) !important;
}

html[data-theme="rock"] .xray-table td {
  color: #ffffff !important;
  border-color: rgba(220, 20, 60, 0.2) !important;
}

html[data-theme="rock"] .xray-row {
  background: #1a1a1a !important;
}

html[data-theme="rock"] .xray-row:hover {
  background: rgba(220, 20, 60, 0.1) !important;
}

html[data-theme="rock"] .xray-row--selected {
  background: rgba(220, 20, 60, 0.25) !important;
}

html[data-theme="rock"] .xray-row--fault td {
  color: #ff6b6b !important;
}

html[data-theme="rock"] .xray-row--error td {
  color: #ffa500 !important;
}

html[data-theme="rock"] .xray-trace-id {
  background: rgba(220, 20, 60, 0.2) !important;
  color: #ffffff !important;
}

html[data-theme="rock"] .xray-exec-id {
  background: rgba(220, 20, 60, 0.3) !important;
  color: #ffffff !important;
}

html[data-theme="rock"] .xray-action-label {
  color: #ffffff !important;
}

html[data-theme="rock"] .xray-badge {
  color: #ffffff !important;
  font-weight: 700;
}

html[data-theme="rock"] .badge-green {
  background: rgba(34, 197, 94, 0.3) !important;
  color: #4ade80 !important;
}

html[data-theme="rock"] .badge-blue {
  background: rgba(59, 130, 246, 0.3) !important;
  color: #60a5fa !important;
}

html[data-theme="rock"] .badge-red {
  background: rgba(239, 68, 68, 0.3) !important;
  color: #f87171 !important;
}

html[data-theme="rock"] .badge-orange {
  background: rgba(245, 158, 11, 0.3) !important;
  color: #fbbf24 !important;
}

html[data-theme="rock"] .badge-gray {
  background: rgba(220, 20, 60, 0.2) !important;
  color: #cccccc !important;
}

html[data-theme="rock"] .xray-search-input {
  background: #0a0a0a !important;
  color: #ffffff !important;
  border-color: rgba(220, 20, 60, 0.4) !important;
}

html[data-theme="rock"] .xray-search-input:focus {
  border-color: #dc143c !important;
  box-shadow: 0 0 0 3px rgba(220, 20, 60, 0.2) !important;
}

html[data-theme="rock"] .xray-search-icon {
  color: #cccccc !important;
}

html[data-theme="rock"] .xray-detail-panel {
  background: #1a1a1a !important;
  border-color: rgba(220, 20, 60, 0.3) !important;
}

html[data-theme="rock"] .xray-detail-header {
  background: #0a0a0a !important;
  border-color: rgba(220, 20, 60, 0.3) !important;
}

html[data-theme="rock"] .xray-detail-title {
  color: #ffffff !important;
}

html[data-theme="rock"] .xray-detail-title code {
  background: rgba(220, 20, 60, 0.3) !important;
  color: #ffffff !important;
}

html[data-theme="rock"] .xray-detail-close {
  color: #cccccc !important;
}

html[data-theme="rock"] .xray-detail-close:hover {
  background: rgba(220, 20, 60, 0.2) !important;
  color: #ffffff !important;
}

html[data-theme="rock"] .xray-waterfall-col-label {
  color: #cccccc !important;
}

html[data-theme="rock"] .xray-seg-row {
  background: transparent !important;
}

html[data-theme="rock"] .xray-seg-row:hover {
  background: rgba(220, 20, 60, 0.1) !important;
}

html[data-theme="rock"] .xray-seg-name {
  color: #ffffff !important;
}

html[data-theme="rock"] .xray-seg-url {
  color: #cccccc !important;
}

html[data-theme="rock"] .xray-seg-status {
  background: rgba(34, 197, 94, 0.3) !important;
  color: #4ade80 !important;
}

html[data-theme="rock"] .xray-seg-status--error {
  background: rgba(239, 68, 68, 0.3) !important;
  color: #f87171 !important;
}

html[data-theme="rock"] .xray-seg-err-icon {
  color: #ff6b6b !important;
}

html[data-theme="rock"] .xray-seg-timeline {
  background: rgba(220, 20, 60, 0.1) !important;
}

html[data-theme="rock"] .xray-service-grid {
  gap: 0.5rem;
}

html[data-theme="rock"] .xray-service-card {
  background: #1a1a1a !important;
  border-color: rgba(220, 20, 60, 0.3) !important;
}

html[data-theme="rock"] .xray-service-card--error {
  background: rgba(220, 20, 60, 0.2) !important;
  border-color: rgba(220, 20, 60, 0.6) !important;
}

html[data-theme="rock"] .xray-service-name {
  color: #ffffff !important;
}

html[data-theme="rock"] .xray-service-type {
  color: #cccccc !important;
}

html[data-theme="rock"] .xray-stat-item {
  color: #cccccc !important;
}

html[data-theme="rock"] .xray-stat-error {
  color: #ff6b6b !important;
}

html[data-theme="rock"] .xray-view-toggle {
  background: rgba(220, 20, 60, 0.1) !important;
}

html[data-theme="rock"] .btn-xray-view {
  color: #cccccc !important;
}

html[data-theme="rock"] .btn-xray-view:hover {
  background: rgba(220, 20, 60, 0.15) !important;
  color: #ffffff !important;
}

html[data-theme="rock"] .btn-xray-view.active {
  background: #dc143c !important;
  color: #ffffff !important;
  box-shadow: 0 2px 4px rgba(220, 20, 60, 0.3) !important;
}

html[data-theme="rock"] .xray-filter-label {
  color: #cccccc !important;
}

html[data-theme="rock"] .xray-svcmap-wrap rect[fill="#ffffff"],
html[data-theme="rock"] .xray-svcmap-wrap rect[fill="#fff5f5"],
html[data-theme="rock"] .xray-svcmap-wrap rect[fill="#fffbeb"] {
  fill: #1a1a1a !important;
}

html[data-theme="rock"] .xray-svcmap-wrap rect[stroke="#e2e8f0"] {
  stroke: rgba(220, 20, 60, 0.4) !important;
}

html[data-theme="rock"] .xray-svcmap-wrap text[fill="#1e293b"] {
  fill: #ffffff !important;
  font-weight: 900;
}

html[data-theme="rock"] .xray-svcmap-wrap text[fill="#64748b"],
html[data-theme="rock"] .xray-svcmap-wrap text[fill="#94a3b8"],
html[data-theme="rock"] .xray-svcmap-wrap text[fill="#b0bec5"] {
  fill: #cccccc !important;
}

/* ── Users ──────────────────────────────────────────────────────────────── */

html[data-theme="rock"] .users-search-input {
  background: #1a1a1a;
  border-color: rgba(220, 20, 60, 0.4);
  color: #ffffff;
}

html[data-theme="rock"] .tr-search-input {
  background: #1a1a1a;
  border-color: rgba(220, 20, 60, 0.4);
  color: #ffffff;
}

html[data-theme="rock"] .tr-search-input::placeholder {
  color: #999999;
}

html[data-theme="rock"] .tr-search-input:focus {
  border-color: #dc143c;
  box-shadow: 0 0 0 3px rgba(220, 20, 60, 0.2);
}

html[data-theme="rock"] .tr-search-icon {
  color: #cccccc;
}

html[data-theme="rock"] .logs-search-input {
  background: #0a0a0a !important;
  border-color: rgba(220, 20, 60, 0.4) !important;
  color: #ffffff !important;
}

html[data-theme="rock"] .logs-search-input:focus {
  border-color: #dc143c !important;
  box-shadow: 0 0 0 3px rgba(220, 20, 60, 0.2) !important;
}

html[data-theme="rock"] .logs-search-icon {
  color: #cccccc !important;
}

html[data-theme="rock"] .users-table {
  background: #1a1a1a;
  border: 2px solid rgba(220, 20, 60, 0.3);
}

html[data-theme="rock"] .users-th-sortable.users-th-active {
  color: #dc143c;
}

html[data-theme="rock"] .users-table tr:hover td {
  background: rgba(220, 20, 60, 0.1) !important;
}

/* Rockstar Chat */
html[data-theme="rock"] .rockstar-chat-header {
  background: #000000 !important;
  color: #ffffff !important;
}

html[data-theme="rock"] .rockstar-chat-panel {
  background: #0a0a0a !important;
}

html[data-theme="rock"] .rockstar-message.assistant {
  background: #1a1a1a !important;
  color: #ffffff !important;
}

/* Rockstar Widget */
html[data-theme="rock"] .rockstar-widget-header {
  background: #000000 !important;
  color: #ffffff !important;
}
html[data-theme="rock"] .rockstar-widget-header .actions button {
  background: rgba(255, 255, 255, 0.12) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  border-radius: 6px !important;
}
html[data-theme="rock"] .rockstar-widget-header .actions button:hover {
  background: rgba(255, 255, 255, 0.22) !important;
}

html[data-theme="rock"] .rockstar-widget-panel {
  background: #0a0a0a !important;
}

html[data-theme="rock"] .rockstar-widget-messages .message.assistant {
  background: #1a1a1a !important;
  color: #ffffff !important;
}

html[data-theme="rock"] .rockstar-widget-fab {
  background: #dc143c !important;
  color: #ffffff !important;
}

/* ── Override white backgrounds ─────────────────────────────────────────── */

html[data-theme="rock"] input[type="text"],
html[data-theme="rock"] input[type="email"],
html[data-theme="rock"] input[type="password"],
html[data-theme="rock"] input[type="number"],
html[data-theme="rock"] input[type="date"],
html[data-theme="rock"] input[type="time"],
html[data-theme="rock"] textarea,
html[data-theme="rock"] select {
  background: #1a1a1a !important;
  color: #ffffff !important;
  border-color: rgba(220, 20, 60, 0.3) !important;
}

html[data-theme="rock"] .date-select,
html[data-theme="rock"] .sync-meta,
html[data-theme="rock"] .report-section-table,
html[data-theme="rock"] .settings-mode-btn,
html[data-theme="rock"] .btn-metric-filter,
html[data-theme="rock"] .table-cell,
html[data-theme="rock"] .modal-content,
html[data-theme="rock"] .overlay-content,
html[data-theme="rock"] .form-group,
html[data-theme="rock"] .input-wrapper,
html[data-theme="rock"] .brand-flag-item,
html[data-theme="rock"] .role-permission-item,
html[data-theme="rock"] .profile-section,
html[data-theme="rock"] .profile-card {
  background: #1a1a1a !important;
  color: #ffffff !important;
}

html[data-theme="rock"] .settings-mode-btn:hover,
html[data-theme="rock"] .settings-mode-btn.active {
  background: rgba(220, 20, 60, 0.2) !important;
}

html[data-theme="rock"] .logs-stat-card--error,
html[data-theme="rock"] .logs-stat-card--warn,
html[data-theme="rock"] .logs-row--error,
html[data-theme="rock"] .logs-row--warn,
html[data-theme="rock"] .xray-stat-card--error {
  background: rgba(220, 20, 60, 0.15) !important;
}

html[data-theme="rock"] td,
html[data-theme="rock"] th {
  color: #ffffff !important;
}

html[data-theme="rock"] .reports-table-row,
html[data-theme="rock"] .product-row {
  background: #1a1a1a !important;
  color: #ffffff !important;
}

html[data-theme="rock"] .product-info {
  color: #ffffff !important;
}

html[data-theme="rock"] .product-id,
html[data-theme="rock"] .product-name {
  color: #ffffff !important;
}

html[data-theme="rock"] .product-brand {
  color: #cccccc !important;
}

html[data-theme="rock"] .skipped-reason-chip {
  color: #ffffff !important;
  font-weight: 700;
}

html[data-theme="rock"] .reports-table-row:hover,
html[data-theme="rock"] .product-row:hover {
  background: rgba(220, 20, 60, 0.1) !important;
}

html[data-theme="rock"] .skipped-filters {
  background: #1a1a1a !important;
  border-color: rgba(220, 20, 60, 0.3) !important;
}

html[data-theme="rock"] .skipped-filter-select {
  background: #0a0a0a !important;
  color: #ffffff !important;
  border-color: rgba(220, 20, 60, 0.4) !important;
}

html[data-theme="rock"] .skipped-filter-select:focus {
  border-color: #dc143c !important;
  box-shadow: 0 0 0 3px rgba(220, 20, 60, 0.2) !important;
}

html[data-theme="rock"] .skipped-search-input {
  background: #0a0a0a !important;
  color: #ffffff !important;
  border-color: rgba(220, 20, 60, 0.4) !important;
}

html[data-theme="rock"] .skipped-search-input:focus {
  border-color: #dc143c !important;
  box-shadow: 0 0 0 3px rgba(220, 20, 60, 0.2) !important;
}

html[data-theme="rock"] .skipped-search-input::placeholder {
  color: #666666 !important;
}

html[data-theme="rock"] .filter-icon,
html[data-theme="rock"] .search-icon {
  color: #cccccc !important;
}

html[data-theme="rock"] .skipped-results-count {
  color: #cccccc !important;
  background: #0a0a0a !important;
  border-color: rgba(220, 20, 60, 0.3) !important;
}

html[data-theme="rock"] .page-size-btn {
  background: #0a0a0a !important;
  color: #ffffff !important;
  border-color: rgba(220, 20, 60, 0.4) !important;
}

html[data-theme="rock"] .page-size-btn:hover {
  background: rgba(220, 20, 60, 0.15) !important;
}

html[data-theme="rock"] .page-size-btn.active {
  background: #dc143c !important;
  border-color: #dc143c !important;
  color: #ffffff !important;
}

html[data-theme="rock"] .pagination-btn {
  background: rgba(220, 20, 60, 0.1) !important;
  color: #ffffff !important;
  border-color: rgba(220, 20, 60, 0.4) !important;
}

html[data-theme="rock"] .pagination-btn:hover:not(:disabled) {
  background: rgba(220, 20, 60, 0.2) !important;
}

html[data-theme="rock"] .pagination-btn:disabled {
  opacity: 0.3 !important;
}

html[data-theme="rock"] .report-section-header,
html[data-theme="rock"] .analytics-header,
html[data-theme="rock"] .dashboard-section-title,
html[data-theme="rock"] .settings-header,
html[data-theme="rock"] .profile-header {
  color: #dc143c !important;
}

html[data-theme="rock"] .badge,
html[data-theme="rock"] .chip,
html[data-theme="rock"] .tag {
  background: rgba(220, 20, 60, 0.2) !important;
  color: #ffffff !important;
}

html[data-theme="rock"] .btn-secondary,
html[data-theme="rock"] .btn-outline {
  background: rgba(220, 20, 60, 0.1) !important;
  color: #ffffff !important;
  border-color: rgba(220, 20, 60, 0.4) !important;
}

html[data-theme="rock"] .dropdown-menu,
html[data-theme="rock"] .context-menu,
html[data-theme="rock"] .tooltip {
  background: #1a1a1a !important;
  color: #ffffff !important;
  border-color: rgba(220, 20, 60, 0.3) !important;
}

html[data-theme="rock"] .dashboard-schedule-btn {
  background: rgba(220, 20, 60, 0.1) !important;
  color: #ffffff !important;
  border-color: rgba(220, 20, 60, 0.4) !important;
}

html[data-theme="rock"] .dashboard-schedule-btn:hover {
  background: #dc143c !important;
  border-color: #dc143c !important;
  color: #ffffff !important;
}

html[data-theme="rock"] .health-chip {
  background: #1a1a1a !important;
  border-color: rgba(220, 20, 60, 0.3) !important;
}

html[data-theme="rock"] .health-chip-label {
  color: #cccccc !important;
}

html[data-theme="rock"] .health-chip-value {
  color: #ffffff !important;
}

html[data-theme="rock"] .health-category-title {
  color: #ffffff !important;
}

html[data-theme="rock"] .profile-hero {
  background: #1a1a1a !important;
  border-color: rgba(220, 20, 60, 0.3) !important;
  border-left-color: #dc143c !important;
}

html[data-theme="rock"] .profile-hero-info h1 {
  color: #ffffff !important;
}

html[data-theme="rock"] .profile-email {
  color: #cccccc !important;
}

html[data-theme="rock"] .profile-role-badge {
  background: rgba(220, 20, 60, 0.2) !important;
  color: #ffffff !important;
}

html[data-theme="rock"] .users-modal {
  background: #1a1a1a !important;
  border: 2px solid rgba(220, 20, 60, 0.3) !important;
}

html[data-theme="rock"] .users-modal-title {
  color: #ffffff !important;
}

html[data-theme="rock"] .users-modal-form label {
  color: #cccccc !important;
}

html[data-theme="rock"] .users-modal-form input,
html[data-theme="rock"] .users-modal-form select,
html[data-theme="rock"] .users-role-select {
  background: #0a0a0a !important;
  color: #ffffff !important;
  border-color: rgba(220, 20, 60, 0.3) !important;
}

html[data-theme="rock"] .users-modal-form input:focus,
html[data-theme="rock"] .users-modal-form select:focus,
html[data-theme="rock"] .users-role-select:focus {
  border-color: #dc143c !important;
}

html[data-theme="rock"] .users-role-select:hover:not(:disabled) {
  background: rgba(220, 20, 60, 0.05) !important;
  border-color: rgba(220, 20, 60, 0.5) !important;
}

html[data-theme="rock"] .users-role-select:disabled {
  background: rgba(220, 20, 60, 0.05) !important;
  color: #666666 !important;
  opacity: 0.5;
}

html[data-theme="rock"] .users-modal-error {
  background: rgba(220, 20, 60, 0.2) !important;
  color: #ff6b6b !important;
}

html[data-theme="rock"] .users-modal-hint {
  color: #999999 !important;
}

html[data-theme="rock"] .users-role-select-arrow {
  color: #cccccc !important;
}

html[data-theme="rock"] .btn-users-cancel {
  background: rgba(220, 20, 60, 0.1) !important;
  color: #ffffff !important;
  border-color: rgba(220, 20, 60, 0.4) !important;
}

html[data-theme="rock"] .btn-users-cancel:hover:not(:disabled) {
  background: rgba(220, 20, 60, 0.2) !important;
  border-color: rgba(220, 20, 60, 0.6) !important;
}

/* ── Activity modal ─────────────────────────────────────────────────────── */
html[data-theme="rock"] .activity-summary {
  background: #111111 !important;
  border: 1px solid rgba(220, 20, 60, 0.25) !important;
}
html[data-theme="rock"] .activity-table-wrapper {
  border-color: rgba(220, 20, 60, 0.3) !important;
}
html[data-theme="rock"] .activity-table th {
  background: #111111 !important;
  border-bottom-color: rgba(220, 20, 60, 0.2) !important;
  color: #999999 !important;
}
html[data-theme="rock"] .activity-table td {
  color: #ffffff !important;
  border-bottom-color: rgba(220, 20, 60, 0.1) !important;
}
html[data-theme="rock"] .activity-status-high {
  background: rgba(255, 200, 0, 0.12) !important;
  color: #ffcc00 !important;
  border: 1px solid rgba(255, 200, 0, 0.3) !important;
}
html[data-theme="rock"] .activity-status-medium {
  background: rgba(255, 200, 0, 0.07) !important;
  color: #cc9900 !important;
  border: 1px solid rgba(255, 200, 0, 0.2) !important;
}
html[data-theme="rock"] .activity-status-expired {
  background: rgba(255, 255, 255, 0.05) !important;
  color: #666666 !important;
}
html[data-theme="rock"] .activity-status-none {
  background: rgba(255, 255, 255, 0.05) !important;
  color: #666666 !important;
}
html[data-theme="rock"] .activity-result-badge.pass {
  background: rgba(0, 200, 100, 0.15) !important;
  color: #00c864 !important;
}
html[data-theme="rock"] .activity-result-badge.fail {
  background: rgba(220, 20, 60, 0.2) !important;
  color: #dc143c !important;
}

html[data-theme="rock"] .settings-sidebar {
  background: #1a1a1a !important;
  border: 2px solid rgba(220, 20, 60, 0.3) !important;
}

html[data-theme="rock"] .settings-section {
  background: #1a1a1a !important;
  border: 2px solid rgba(220, 20, 60, 0.3) !important;
}

html[data-theme="rock"] .settings-instructions-preview {
  background: #0a0a0a !important;
  border-color: rgba(220, 20, 60, 0.4) !important;
  color: #ffffff !important;
}

html[data-theme="rock"] .settings-instructions-preview h1,
html[data-theme="rock"] .settings-instructions-preview h2,
html[data-theme="rock"] .settings-instructions-preview h3,
html[data-theme="rock"] .settings-instructions-preview strong {
  color: #ffffff !important;
}

html[data-theme="rock"] .settings-instructions-preview code {
  background: rgba(220, 20, 60, 0.2) !important;
  color: #ffffff !important;
}

html[data-theme="rock"] .settings-instructions-preview pre {
  background: rgba(220, 20, 60, 0.1) !important;
  border: 1px solid rgba(220, 20, 60, 0.3) !important;
}

html[data-theme="rock"] .settings-instructions-textarea {
  background: #0a0a0a !important;
  color: #ffffff !important;
  border-color: rgba(220, 20, 60, 0.4) !important;
}

html[data-theme="rock"] .settings-instructions-textarea:focus {
  border-color: #dc143c !important;
}

html[data-theme="rock"] .settings-input {
  background: #0a0a0a !important;
  color: #ffffff !important;
  border-color: rgba(220, 20, 60, 0.4) !important;
}

html[data-theme="rock"] .settings-input:focus {
  border-color: #dc143c !important;
}

html[data-theme="rock"] .settings-nav-item {
  color: #cccccc !important;
}

html[data-theme="rock"] .settings-nav-item:hover:not(:disabled) {
  background: rgba(220, 20, 60, 0.1) !important;
  color: #ffffff !important;
}

html[data-theme="rock"] .settings-nav-item.active {
  background: rgba(220, 20, 60, 0.3) !important;
  color: #ffffff !important;
}

html[data-theme="rock"] .settings-mode-toggle {
  background: rgba(220, 20, 60, 0.1) !important;
}

html[data-theme="rock"] .settings-readonly-badge,
html[data-theme="rock"] .settings-nav-soon-badge {
  background: rgba(220, 20, 60, 0.2) !important;
  color: #cccccc !important;
  border-color: rgba(220, 20, 60, 0.4) !important;
}

html[data-theme="rock"] .settings-label {
  color: #cccccc !important;
}

html[data-theme="rock"] .settings-section-title {
  color: #ffffff !important;
  border-color: rgba(220, 20, 60, 0.4) !important;
}

html[data-theme="rock"] .settings-alert--error {
  background: rgba(220, 20, 60, 0.2) !important;
  color: #ff6b6b !important;
  border-color: rgba(220, 20, 60, 0.5) !important;
}

html[data-theme="rock"] .settings-alert--success {
  background: rgba(34, 197, 94, 0.2) !important;
  color: #4ade80 !important;
  border-color: rgba(34, 197, 94, 0.5) !important;
}




/* ═══════════════════════════════════════════════════════════════════════════
   TEMA: Runway — Editorial de moda · Vogue / The Devil Wears Prada
   Página en blanco · Masthead negro · Dorado champagne · Tipografía serif
   Alta costura editorial — interior de revista de lujo
   ═══════════════════════════════════════════════════════════════════════════ */
html[data-theme="runway"] {
  --primary-color:      #b8913e;
  --primary-dark:       #9a7820;
  --primary-light:      #d4af60;
  --secondary-color:    #f5f2ed;
  --accent-color:       #c8102e;
  --text-primary:       #0a0a0a;
  --text-secondary:     #4a4540;
  --text-light:         #8a8580;
  --bg-primary:         #f8f5f0;
  --bg-secondary:       #ffffff;
  --bg-dark:            #000000;
  --border-color:       rgba(0, 0, 0, 0.1);
  --success:            #2e6e4a;
  --warning:            #b8913e;
  --danger:             #c8102e;
  --info:               #3a3a3a;
  --card-bg:            #ffffff;
  --input-bg:           #ffffff;
  --sidebar-bg:         #ffffff;
  --table-header-bg:    #000000;
  --hover-bg:           #f0ece5;
  --badge-bg:           #f5f2ed;
  --img-placeholder-bg: #ede9e2;
  --error-color:        #c8102e;
  --btn-primary-text:   #000000;
}
html[data-theme="runway"] body {
  background: #f8f5f0;
  color: #0a0a0a;
  font-family: 'Cormorant Garamond', 'Georgia', 'Times New Roman', serif;
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 0.01em;
}
html[data-theme="runway"] body::before {
  content: none;
}
/* ── Layout ── */
html[data-theme="runway"] .layout-main {
  background: #f8f5f0;
}
/* ── Header — masthead negro de revista (diferenciador clave) ── */
html[data-theme="runway"] .header {
  background: #000000;
  border-bottom: 2px solid #c8a96e;
  box-shadow: 0 2px 30px rgba(0, 0, 0, 0.8);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
html[data-theme="runway"] .header-logo-img {
  filter: brightness(0) invert(1);
}
html[data-theme="runway"] .header-logo-suffix {
  color: #c8a96e;
  border-left-color: rgba(200, 169, 110, 0.4);
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-weight: 300;
  letter-spacing: 0.08em;
}
html[data-theme="runway"] .header-beta-badge {
  background: #b8913e;
  color: #000000;
  border: none;
  border-radius: 0;
  box-shadow: none;
  animation: none;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  padding: 2px 8px;
}
html[data-theme="runway"] .menu-toggle {
  color: #b8b0a0;
}
html[data-theme="runway"] .menu-toggle:hover {
  color: #f0ece4;
  text-shadow: none;
}
html[data-theme="runway"] .header-user-info,
html[data-theme="runway"] .header-user-name {
  color: #f0ece4;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 600;
  letter-spacing: 0.05em;
}
html[data-theme="runway"] .header-user-role {
  color: #c8a96e;
  font-style: italic;
  font-size: 0.8em;
  letter-spacing: 0.08em;
}
/* Logout */
html[data-theme="runway"] .btn-logout,
html[data-theme="runway"] .logout-button {
  background: transparent;
  color: #b8b0a0;
  border: 1px solid rgba(200, 169, 110, 0.35);
  border-radius: 0;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
html[data-theme="runway"] .btn-logout:hover,
html[data-theme="runway"] .logout-button:hover {
  background: rgba(200, 169, 110, 0.12);
  border-color: #c8a96e;
  color: #c8a96e;
  box-shadow: none;
}
html[data-theme="runway"] .btn-export-pdf {
  background: #c8a96e;
  color: #000000;
  border: none;
  border-radius: 0;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
html[data-theme="runway"] .btn-export-pdf:hover {
  background: #a8893e;
  color: #000000;
  box-shadow: none;
}
/* ── User avatar ── */
html[data-theme="runway"] .user-avatar {
  background: #c8a96e;
  border: 1px solid rgba(200, 169, 110, 0.6);
  color: #000000;
  box-shadow: 0 2px 12px rgba(200, 169, 110, 0.3);
  border-radius: 50%;
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 700;
  letter-spacing: 0.05em;
}
/* ── Sidebar — página interior de revista ── */
html[data-theme="runway"] .sidebar {
  background: #ffffff;
  border-right: 1px solid rgba(0, 0, 0, 0.08);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
html[data-theme="runway"] .nav-link {
  color: #5a5550;
  border-left: 2px solid transparent;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: 0;
  transition: color 0.2s, border-left-color 0.2s;
}
html[data-theme="runway"] .nav-link:hover {
  background: transparent;
  color: #0a0a0a;
  border-left-color: #b8913e;
  box-shadow: none;
}
html[data-theme="runway"] .nav-link.active {
  background: transparent;
  color: #b8913e;
  border-left-color: #b8913e;
  font-weight: 700;
  font-style: italic;
  box-shadow: none;
}
html[data-theme="runway"] .nav-section-title {
  color: #c0bbb5;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 9px;
  font-weight: 300;
  font-style: normal;
  letter-spacing: 0.25em;
  text-transform: uppercase;
}
html[data-theme="runway"] .sidebar-icon {
  color: inherit;
  opacity: 0.7;
}
/* ── Scrollbars ── */
html[data-theme="runway"] ::-webkit-scrollbar {
  width: 4px;
  height: 4px;
}
html[data-theme="runway"] ::-webkit-scrollbar-track {
  background: #f0ece5;
}
html[data-theme="runway"] ::-webkit-scrollbar-thumb {
  background: #b8913e;
  border-radius: 0;
}
html[data-theme="runway"] ::-webkit-scrollbar-thumb:hover {
  background: #9a7820;
}
/* ── Cards — página editorial clara ── */
html[data-theme="runway"] .card,
html[data-theme="runway"] .dashboard-card,
html[data-theme="runway"] .summary-card,
html[data-theme="runway"] .stat-card,
html[data-theme="runway"] .section-card,
html[data-theme="runway"] .detail-card,
html[data-theme="runway"] .info-card,
html[data-theme="runway"] .monitoring-card,
html[data-theme="runway"] .report-card {
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.09);
  box-shadow: 0 2px 16px rgba(0, 0, 0, 0.06);
  border-radius: 0;
  color: #0a0a0a;
}
html[data-theme="runway"] .card-header,
html[data-theme="runway"] .dashboard-card-header,
html[data-theme="runway"] .section-header,
html[data-theme="runway"] .panel-header,
html[data-theme="runway"] .modal-header {
  background: #000000;
  color: #b8913e;
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.08em;
  border-radius: 0;
  border-bottom: 1px solid rgba(184, 145, 62, 0.4);
  padding: 10px 16px;
  text-transform: uppercase;
}
html[data-theme="runway"] .card-title,
html[data-theme="runway"] .section-title,
html[data-theme="runway"] .panel-title {
  color: #0a0a0a;
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 700;
  letter-spacing: 0.03em;
}
/* Headings dentro de headers negros — deben ser dorados, no negros */
html[data-theme="runway"] .card-header h1,
html[data-theme="runway"] .card-header h2,
html[data-theme="runway"] .card-header h3,
html[data-theme="runway"] .card-header h4,
html[data-theme="runway"] .card-header .card-title,
html[data-theme="runway"] .dashboard-card-header h1,
html[data-theme="runway"] .dashboard-card-header h2,
html[data-theme="runway"] .dashboard-card-header h3,
html[data-theme="runway"] .dashboard-card-header h4,
html[data-theme="runway"] .dashboard-card-header .card-title,
html[data-theme="runway"] .section-header h1,
html[data-theme="runway"] .section-header h2,
html[data-theme="runway"] .section-header h3,
html[data-theme="runway"] .panel-header h1,
html[data-theme="runway"] .panel-header h2,
html[data-theme="runway"] .panel-header h3,
html[data-theme="runway"] .modal-header h1,
html[data-theme="runway"] .modal-header h2,
html[data-theme="runway"] .modal-header h3 {
  color: #b8913e !important;
  font-family: 'Playfair Display', Georgia, serif !important;
}
/* Botones dentro de headers negros — deben ser visibles sobre fondo negro */
html[data-theme="runway"] .dashboard-card-header button,
html[data-theme="runway"] .card-header button,
html[data-theme="runway"] .section-header button,
html[data-theme="runway"] .panel-header button {
  background: rgba(184, 145, 62, 0.15) !important;
  color: #b8913e !important;
  border: 1px solid rgba(184, 145, 62, 0.45) !important;
}
html[data-theme="runway"] .dashboard-card-header button:hover,
html[data-theme="runway"] .card-header button:hover {
  background: rgba(184, 145, 62, 0.3) !important;
  color: #e8c98e !important;
  border-color: #b8913e !important;
}
/* dashboard-sync-button — botón primario de acción */
html[data-theme="runway"] .dashboard-sync-button {
  background: #b8913e !important;
  color: #000000 !important;
  border: none !important;
  border-radius: 0 !important;
  letter-spacing: 0.1em !important;
}
html[data-theme="runway"] .dashboard-sync-button:hover:not(:disabled) {
  background: #9a7820 !important;
  color: #000000 !important;
  opacity: 1 !important;
}
html[data-theme="runway"] .dashboard-sync-button.is-disabled,
html[data-theme="runway"] .dashboard-sync-button:disabled {
  background: rgba(184, 145, 62, 0.35) !important;
  color: rgba(0, 0, 0, 0.5) !important;
}
/* dashboard-schedule-btn — botón secundario en cuerpo de card (fondo claro) */
html[data-theme="runway"] .dashboard-schedule-btn {
  background: transparent !important;
  color: #4a4540 !important;
  border: 1px solid rgba(0, 0, 0, 0.25) !important;
  border-radius: 0 !important;
  letter-spacing: 0.08em !important;
}
html[data-theme="runway"] .dashboard-schedule-btn:hover:not(:disabled) {
  background: rgba(184, 145, 62, 0.1) !important;
  color: #b8913e !important;
  border-color: #b8913e !important;
}
/* ── Botones ── */
html[data-theme="runway"] button,
html[data-theme="runway"] .btn,
html[data-theme="runway"] .btn-secondary {
  background: transparent;
  color: #0a0a0a;
  border: 1px solid rgba(0, 0, 0, 0.5);
  border-radius: 0;
  box-shadow: none;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
  padding: 8px 20px;
  min-height: 36px;
}
html[data-theme="runway"] button:hover,
html[data-theme="runway"] .btn:hover {
  background: #0a0a0a;
  color: #ffffff;
  border-color: #0a0a0a;
  box-shadow: none;
}
html[data-theme="runway"] .btn-primary {
  background: #000000;
  color: #b8913e;
  border: 1px solid #000000;
  border-radius: 0;
  font-weight: 700;
}
html[data-theme="runway"] .btn-primary:hover {
  background: #b8913e;
  border-color: #b8913e;
  color: #000000;
  box-shadow: 0 4px 16px rgba(184, 145, 62, 0.3);
}
html[data-theme="runway"] .btn-danger {
  background: transparent;
  color: #c8102e;
  border: 1px solid #c8102e;
  border-radius: 0;
}
html[data-theme="runway"] .btn-danger:hover {
  background: #c8102e;
  color: #ffffff;
}
html[data-theme="runway"] .btn-success {
  background: transparent;
  color: #5a9e72;
  border: 1px solid #5a9e72;
  border-radius: 0;
}
html[data-theme="runway"] button:active,
html[data-theme="runway"] .btn:active {
  opacity: 0.85;
}
html[data-theme="runway"] button:disabled,
html[data-theme="runway"] .btn:disabled {
  color: #444444;
  border-color: #333333;
  background: transparent;
  cursor: default;
}
/* ── Inputs ── */
html[data-theme="runway"] input,
html[data-theme="runway"] textarea,
html[data-theme="runway"] select,
html[data-theme="runway"] .input,
html[data-theme="runway"] .form-control {
  background: #ffffff;
  color: #0a0a0a;
  border: none;
  border-bottom: 1px solid rgba(0, 0, 0, 0.35);
  border-radius: 0;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 14px;
  box-shadow: none;
  padding: 6px 2px;
  transition: border-bottom-color 0.2s;
}
html[data-theme="runway"] input:focus,
html[data-theme="runway"] textarea:focus,
html[data-theme="runway"] select:focus {
  outline: none;
  border-bottom-color: #b8913e;
  box-shadow: none;
}
html[data-theme="runway"] input::selection,
html[data-theme="runway"] textarea::selection {
  background: rgba(184, 145, 62, 0.2);
  color: #0a0a0a;
}
html[data-theme="runway"] label,
html[data-theme="runway"] .form-label {
  color: #8a8580;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}
/* ── Tablas — editorial grid oscura ── */
html[data-theme="runway"] table,
html[data-theme="runway"] .data-table,
html[data-theme="runway"] .inventory-table,
html[data-theme="runway"] .users-table,
html[data-theme="runway"] .report-table,
html[data-theme="runway"] .pos-sales-table,
html[data-theme="runway"] .pos-customers-table {
  background: #ffffff;
  border: none;
  border-radius: 0;
  border-collapse: collapse;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 14px;
  color: #0a0a0a;
}
html[data-theme="runway"] th,
html[data-theme="runway"] thead td,
html[data-theme="runway"] .data-table th,
html[data-theme="runway"] .inventory-table th,
html[data-theme="runway"] .users-table th,
html[data-theme="runway"] .report-table th {
  background: #000000;
  color: #b8913e;
  border: none;
  border-bottom: 1px solid rgba(184, 145, 62, 0.3);
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 600;
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: 10px 12px;
}
html[data-theme="runway"] td {
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  padding: 10px 12px;
  color: #0a0a0a;
  background: transparent;
}
html[data-theme="runway"] tr:nth-child(even) td {
  background: rgba(0, 0, 0, 0.02);
}
html[data-theme="runway"] tr:hover td {
  background: rgba(184, 145, 62, 0.06);
  color: #b8913e;
}
/* ── Modales ── */
html[data-theme="runway"] .modal,
html[data-theme="runway"] .modal-overlay,
html[data-theme="runway"] .modal-backdrop,
html[data-theme="runway"] .modal-content {
  background: rgba(0, 0, 0, 0.6);
}
html[data-theme="runway"] .modal-dialog > *,
html[data-theme="runway"] .modal-box > *,
html[data-theme="runway"] .modal-content-inner,
html[data-theme="runway"] .modal-window,
html[data-theme="runway"] .confirm-modal-box,
html[data-theme="runway"] .sync-confirm-box,
html[data-theme="runway"] .ba-modal,
html[data-theme="runway"] .pos-modal {
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.1);
  box-shadow: 0 20px 80px rgba(0, 0, 0, 0.35);
  border-radius: 0;
  color: #0a0a0a;
}
/* ── Badges ── */
html[data-theme="runway"] .badge,
html[data-theme="runway"] .chip,
html[data-theme="runway"] .status-badge,
html[data-theme="runway"] .brand-chip {
  background: transparent;
  color: #0a0a0a;
  border: 1px solid rgba(0, 0, 0, 0.35);
  border-radius: 0;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  padding: 2px 8px;
}
html[data-theme="runway"] .badge.success,
html[data-theme="runway"] .badge-success,
html[data-theme="runway"] .status-badge.activo,
html[data-theme="runway"] .chip.active {
  border-color: #2e6e4a;
  color: #2e6e4a;
  background: transparent;
}
html[data-theme="runway"] .badge.danger,
html[data-theme="runway"] .badge-danger,
html[data-theme="runway"] .status-badge.inactivo {
  border-color: #c8102e;
  color: #c8102e;
  background: transparent;
}
/* ── Dashboard ── */
html[data-theme="runway"] .dashboard-page,
html[data-theme="runway"] .dashboard-container {
  background: #f8f5f0;
}
html[data-theme="runway"] .dashboard-card {
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.09);
  box-shadow: 0 2px 16px rgba(0, 0, 0, 0.06);
  border-radius: 0;
}
html[data-theme="runway"] .dashboard-card-title,
html[data-theme="runway"] .dashboard-title {
  background: #000000;
  color: #b8913e;
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-bottom: 1px solid rgba(184, 145, 62, 0.35);
  padding: 8px 14px;
  margin: -1px -1px 12px -1px;
}
html[data-theme="runway"] .dashboard-stat-value,
html[data-theme="runway"] .stat-number {
  color: #b8913e;
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 900;
  font-size: 2rem;
}
html[data-theme="runway"] .dashboard-stat-label,
html[data-theme="runway"] .stat-label {
  color: #8a8580;
  font-size: 10px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  font-family: 'Cormorant Garamond', Georgia, serif;
}
/* ── Headings y texto ── */
html[data-theme="runway"] .page-container,
html[data-theme="runway"] .page-content,
html[data-theme="runway"] .content-area,
html[data-theme="runway"] .main-content {
  background: #f8f5f0;
  color: #0a0a0a;
}
html[data-theme="runway"] h1,
html[data-theme="runway"] h2,
html[data-theme="runway"] h3 {
  color: #0a0a0a;
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 700;
  letter-spacing: 0.02em;
}
html[data-theme="runway"] h4 {
  color: #b8913e;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.9em;
}
html[data-theme="runway"] .page-title {
  color: #0a0a0a;
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 900;
  font-size: 28px;
  letter-spacing: -0.01em;
}
html[data-theme="runway"] .page-subtitle {
  color: #8a8580;
  font-style: italic;
  font-size: 13px;
}
/* ── Links ── */
html[data-theme="runway"] a {
  color: #0a0a0a;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-bottom-color 0.2s, color 0.2s;
}
html[data-theme="runway"] a:hover {
  color: #b8913e;
  border-bottom-color: rgba(184, 145, 62, 0.5);
  text-decoration: none;
}
html[data-theme="runway"] .text-muted,
html[data-theme="runway"] .text-secondary {
  color: #8a8580;
  font-style: italic;
}
/* ── Dropdown ── */
html[data-theme="runway"] .dropdown,
html[data-theme="runway"] .dropdown-menu {
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 0;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
  color: #0a0a0a;
}
html[data-theme="runway"] .dropdown-item:hover {
  background: rgba(184, 145, 62, 0.07);
  color: #b8913e;
  border-radius: 0;
}
/* ── Alertas ── */
html[data-theme="runway"] .alert,
html[data-theme="runway"] .alert-warning,
html[data-theme="runway"] .mock-banner,
html[data-theme="runway"] .MockDataBanner,
html[data-theme="runway"] .mock-data-banner {
  background: rgba(184, 145, 62, 0.06);
  color: #6a5010;
  border: none;
  border-left: 3px solid #b8913e;
  border-radius: 0;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 13px;
  font-style: italic;
  box-shadow: none;
}
html[data-theme="runway"] .alert-error,
html[data-theme="runway"] .alert-danger {
  background: rgba(200, 16, 46, 0.06);
  color: #7a0010;
  border-left-color: #c8102e;
}
html[data-theme="runway"] .alert-success {
  background: rgba(46, 110, 74, 0.06);
  color: #1a4a30;
  border-left-color: #2e6e4a;
}
/* ── Progress bars ── */
html[data-theme="runway"] .progress,
html[data-theme="runway"] .progress-bar-container {
  background: rgba(0, 0, 0, 0.08);
  border: none;
  border-radius: 0;
  height: 2px;
}
html[data-theme="runway"] .progress-fill,
html[data-theme="runway"] .progress-bar {
  background: #b8913e;
  border-radius: 0;
}
/* ── Inventory ── */
html[data-theme="runway"] .inventory-page,
html[data-theme="runway"] .inventory-container {
  background: #f8f5f0;
}
html[data-theme="runway"] .inventory-table-wrapper,
html[data-theme="runway"] .table-wrapper {
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.09);
  border-radius: 0;
  overflow: hidden;
}
html[data-theme="runway"] .tr-search-input,
html[data-theme="runway"] .search-input,
html[data-theme="runway"] .filter-input {
  background: transparent;
  color: #0a0a0a;
  border: none;
  border-bottom: 1px solid rgba(0, 0, 0, 0.3);
  border-radius: 0;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 14px;
  font-style: italic;
}
html[data-theme="runway"] .btn-tr-refresh,
html[data-theme="runway"] .btn-refresh {
  background: transparent;
  color: #0a0a0a;
  border: 1px solid rgba(0, 0, 0, 0.4);
  border-radius: 0;
  box-shadow: none;
  font-family: 'Cormorant Garamond', Georgia, serif;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-size: 10px;
}
html[data-theme="runway"] .btn-tr-refresh:hover,
html[data-theme="runway"] .btn-refresh:hover {
  background: #0a0a0a;
  color: #ffffff;
}
html[data-theme="runway"] .status-active,
html[data-theme="runway"] .status-activo {
  color: #2e6e4a;
  font-weight: 600;
  font-style: italic;
}
html[data-theme="runway"] .status-inactive,
html[data-theme="runway"] .status-inactivo,
html[data-theme="runway"] .status-draft {
  color: #c0bbb5;
  font-style: italic;
}
/* ── Profile / Theme picker ── */
html[data-theme="runway"] .profile-themes {
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.09);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.09);
  border-radius: 0;
}
html[data-theme="runway"] .profile-themes-header {
  color: #0a0a0a;
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 700;
  letter-spacing: 0.05em;
}
html[data-theme="runway"] .profile-themes-icon {
  color: #b8913e;
}
html[data-theme="runway"] .profile-theme-option {
  border: 1px solid rgba(0, 0, 0, 0.12);
  background: #faf8f4;
  border-radius: 0;
  transition: border-color 0.2s, box-shadow 0.2s;
  box-shadow: none;
}
html[data-theme="runway"] .profile-theme-option:hover {
  border-color: #0a0a0a;
  background: #f5f2ed;
  box-shadow: none;
}
html[data-theme="runway"] .profile-theme-option--active {
  border-color: #b8913e;
  background: #ffffff;
  box-shadow: 0 0 0 1px #b8913e;
}
html[data-theme="runway"] .profile-theme-name {
  color: #0a0a0a;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 12px;
  letter-spacing: 0.06em;
}
html[data-theme="runway"] .profile-theme-option--active .profile-theme-name {
  color: #b8913e;
  font-weight: 700;
  font-style: italic;
}
/* ── Rockstar Widget ── */
html[data-theme="runway"] .rockstar-widget-header {
  background: #0a0a0a !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  border-radius: 0 !important;
  font-family: 'Playfair Display', Georgia, serif !important;
  letter-spacing: 0.05em !important;
  border-bottom: 2px solid #b8913e !important;
}
html[data-theme="runway"] .rockstar-widget-header .actions button {
  background: rgba(255, 255, 255, 0.12) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
  border-radius: 4px !important;
  font-size: 1rem !important;
  padding: 0 !important;
  width: 30px !important;
  height: 30px !important;
  box-sizing: border-box !important;
}
html[data-theme="runway"] .rockstar-widget-header .actions button span {
  color: #ffffff !important;
}
html[data-theme="runway"] .rockstar-widget-header .actions button:hover {
  background: rgba(184, 145, 62, 0.35) !important;
  border-color: rgba(184, 145, 62, 0.6) !important;
}
html[data-theme="runway"] .rockstar-widget-fab {
  background: #b8913e !important;
  color: #000000 !important;
  border: none !important;
  border-radius: 6px !important;
  box-shadow: 0 4px 16px rgba(184, 145, 62, 0.4) !important;
}
html[data-theme="runway"] .rockstar-widget-messages .message.assistant {
  background: #faf8f4 !important;
  border-left: 2px solid #b8913e !important;
  color: #0a0a0a !important;
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-style: italic !important;
}
html[data-theme="runway"] .rockstar-widget-messages .message.user {
  background: #000000 !important;
  color: #b8913e !important;
  font-family: 'Cormorant Garamond', Georgia, serif !important;
}
/* ── Monitoring ── */
html[data-theme="runway"] .monitoring-page,
html[data-theme="runway"] .monitoring-container {
  background: #f8f5f0;
}
html[data-theme="runway"] .monitoring-card {
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.09);
  box-shadow: 0 2px 16px rgba(0, 0, 0, 0.06);
  border-radius: 0;
  color: #0a0a0a;
}
/* ── Pagination ── */
html[data-theme="runway"] .page-size-btn,
html[data-theme="runway"] .pagination-btn {
  background: transparent;
  color: #4a4540;
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: 0;
  box-shadow: none;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 12px;
  letter-spacing: 0.08em;
  transition: none;
}
html[data-theme="runway"] .page-size-btn:hover,
html[data-theme="runway"] .pagination-btn:hover {
  background: #0a0a0a;
  color: #ffffff;
  border-color: #0a0a0a;
}
html[data-theme="runway"] .page-size-btn.active,
html[data-theme="runway"] .pagination-btn.active {
  background: #000000;
  color: #b8913e;
  border-color: #000000;
  box-shadow: none;
}
/* ── Dividers ── */
html[data-theme="runway"] hr,
html[data-theme="runway"] .divider {
  border: none;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}
/* ── Toggle ── */
html[data-theme="runway"] input[type="checkbox"],
html[data-theme="runway"] input[type="radio"] {
  accent-color: #b8913e;
}
html[data-theme="runway"] .switch,
html[data-theme="runway"] .toggle {
  background: #d0ccc5;
  border-radius: 0;
}
html[data-theme="runway"] .switch.active,
html[data-theme="runway"] .toggle.active,
html[data-theme="runway"] input:checked + .switch,
html[data-theme="runway"] input:checked + .slider {
  background: #b8913e;
}
html[data-theme="starwars"] .dashboard-schedule-modal,
html[data-theme="starwars"] .dashboard-confirm-modal {
  background: #000510; border: 1px solid rgba(255,232,31,0.3);
  box-shadow: 0 0 40px rgba(255,232,31,0.12); color: #e8e6d0;
}
html[data-theme="starwars"] .dashboard-schedule-modal-header,
html[data-theme="starwars"] .dashboard-schedule-modal-footer {
  background: #000208; border-color: rgba(255,232,31,0.18);
}
html[data-theme="starwars"] .schedule-select,
html[data-theme="starwars"] .schedule-add-select { background: #000208; border-color: rgba(255,232,31,0.3); color: #e8e6d0; }
html[data-theme="starwars"] .schedule-day-btn { background: #000208; border-color: rgba(255,232,31,0.25); color: #c0be90; }
html[data-theme="starwars"] .schedule-day-btn.selected,
html[data-theme="starwars"] .schedule-day-btn:hover { background: rgba(255,232,31,0.12); border-color: rgba(255,232,31,0.7); }
html[data-theme="starwars"] .schedule-hour-chip { background: rgba(255,232,31,0.1); color: #FFE81F; }
html[data-theme="starwars"] .schedule-btn-cancel { background: transparent; border-color: rgba(255,232,31,0.3); color: #c0be90; }
html[data-theme="starwars"] .schedule-btn-cancel:hover { background: rgba(255,232,31,0.08); }
html[data-theme="starwars"] .schedule-btn-save { background: #FFE81F; color: #000510; font-weight: 700; border-color: #FFE81F; }
html[data-theme="starwars"] .schedule-btn-save:hover:not(:disabled) { background: #fff176; opacity: 1; }
html[data-theme="starwars"] .schedule-toggle-track { background: #0a0908; }

html[data-theme="jedi"] .dashboard-schedule-modal,
html[data-theme="jedi"] .dashboard-confirm-modal {
  background: #0a0a0a; border: 1px solid rgba(255,232,31,0.3);
  box-shadow: 0 0 40px rgba(255,232,31,0.12); color: #f0f0f0;
}
html[data-theme="jedi"] .dashboard-schedule-modal-header,
html[data-theme="jedi"] .dashboard-schedule-modal-footer {
  background: #050505; border-color: rgba(255,232,31,0.18);
}
html[data-theme="jedi"] .schedule-select,
html[data-theme="jedi"] .schedule-add-select { background: #050505; border-color: rgba(255,232,31,0.3); color: #f0f0f0; }
html[data-theme="jedi"] .schedule-day-btn { background: #050505; border-color: rgba(255,232,31,0.25); color: #999999; }
html[data-theme="jedi"] .schedule-day-btn.selected,
html[data-theme="jedi"] .schedule-day-btn:hover { background: rgba(255,232,31,0.12); border-color: #FFE81F; }
html[data-theme="jedi"] .schedule-hour-chip { background: rgba(255,232,31,0.1); color: #FFE81F; }
html[data-theme="jedi"] .schedule-btn-cancel { background: transparent; border-color: rgba(255,232,31,0.3); color: #999999; }
html[data-theme="jedi"] .schedule-btn-cancel:hover { background: rgba(255,232,31,0.08); }
html[data-theme="jedi"] .schedule-toggle-track { background: #1a1a00; }

html[data-theme="darkforce"] .dashboard-schedule-modal,
html[data-theme="darkforce"] .dashboard-confirm-modal {
  background: rgba(8,3,18,0.95);
  border-top:    1px solid rgba(201,32,32,0.5);
  border-left:   1px solid rgba(201,32,32,0.4);
  border-bottom: 1px solid rgba(0,110,200,0.4);
  border-right:  1px solid rgba(0,110,200,0.5);
  box-shadow: -4px 0 16px rgba(201,32,32,0.1), 4px 0 16px rgba(0,100,200,0.1), 0 20px 60px rgba(0,0,0,0.95);
  color: #f5f5f5;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
html[data-theme="darkforce"] .dashboard-schedule-modal-header,
html[data-theme="darkforce"] .dashboard-schedule-modal-footer {
  background: rgba(4,2,10,0.95); border-color: rgba(201,32,32,0.25);
}
html[data-theme="darkforce"] .schedule-select,
html[data-theme="darkforce"] .schedule-add-select { background: rgba(4,2,10,0.95); border-color: rgba(201,32,32,0.35); color: #f5f5f5; }
html[data-theme="darkforce"] .schedule-day-btn { background: rgba(4,2,10,0.9); border-color: rgba(201,32,32,0.3); color: #999999; }
html[data-theme="darkforce"] .schedule-day-btn.selected,
html[data-theme="darkforce"] .schedule-day-btn:hover { background: rgba(201,32,32,0.12); border-color: #c92020; color: #e55050; }
html[data-theme="darkforce"] .schedule-hour-chip { background: rgba(201,32,32,0.1); color: #e55050; }
html[data-theme="darkforce"] .schedule-btn-cancel { background: transparent; border-color: rgba(201,32,32,0.35); color: #999999; }
html[data-theme="darkforce"] .schedule-btn-cancel:hover { background: rgba(201,32,32,0.08); }
html[data-theme="darkforce"] .schedule-toggle-track { background: rgba(20,8,30,0.9); }

/* ── physical-form modal overrides (all themes) ─── */
html[data-theme="cyberpunk"] .physical-modal,
html[data-theme="cyberpunk"] .physical-form input,
html[data-theme="cyberpunk"] .physical-form select,
html[data-theme="cyberpunk"] .physical-form textarea { background: #0d1220; border-color: #00ff8833; color: #00ff88; }

html[data-theme="jarvis"] .physical-modal,
html[data-theme="jarvis"] .physical-form input,
html[data-theme="jarvis"] .physical-form select,
html[data-theme="jarvis"] .physical-form textarea { background: #0d1428; border-color: #1e3a5f; color: #60afff; }

html[data-theme="rock"] .physical-modal,
html[data-theme="rock"] .physical-form input,
html[data-theme="rock"] .physical-form select,
html[data-theme="rock"] .physical-form textarea { background: #130000; border-color: #3d0000; color: #ff6666; }

html[data-theme="golden"] .physical-modal,
html[data-theme="golden"] .physical-form input,
html[data-theme="golden"] .physical-form select,
html[data-theme="golden"] .physical-form textarea { background: #1a1500; border-color: #3d3000; color: #f0c040; }

html[data-theme="pop"] .physical-modal,
html[data-theme="pop"] .physical-form input,
html[data-theme="pop"] .physical-form select,
html[data-theme="pop"] .physical-form textarea { background: #fce8ff; border-color: #e0b0f0; color: #4a004a; }

html[data-theme="parchment"] .physical-modal,
html[data-theme="parchment"] .physical-form input,
html[data-theme="parchment"] .physical-form select,
html[data-theme="parchment"] .physical-form textarea { background: #faeecf; border-color: #c8a96e; color: #3d2b1a; }

html[data-theme="starwars"] .physical-modal,
html[data-theme="starwars"] .physical-form input,
html[data-theme="starwars"] .physical-form select,
html[data-theme="starwars"] .physical-form textarea { background: #050d1a; border-color: rgba(255, 232, 31, 0.3); color: #e8e6d0; }

html[data-theme="jedi"] .physical-modal,
html[data-theme="jedi"] .physical-form input,
html[data-theme="jedi"] .physical-form select,
html[data-theme="jedi"] .physical-form textarea { background: #0a0a0a; border-color: rgba(255, 232, 31, 0.3); color: #f0f0f0; }

html[data-theme="darkforce"] .physical-modal,
html[data-theme="darkforce"] .physical-form input,
html[data-theme="darkforce"] .physical-form select,
html[data-theme="darkforce"] .physical-form textarea { background: #0a0a0a; border-color: rgba(201, 32, 32, 0.35); color: #f0f0f0; }

/* ══════════════════════════════════════════════════════════════════════════════
   ██████  ██████████  █████████  ████████       ███   ███   █████████  ████████  ██████
   ██  ██  ██      ██  ██     ██  ██    ██       ████ ████  ██      ██  ██    ██  ██
   ██████  ██████████  █████████  ████████       ██  █  ██  ██████████  ████████  ██████
   ██      ██  ██      ██     ██  ██   ██        ██     ██  ██      ██  ██   ██        ██
   ██      ██   ██     ██     ██  ██    ██       ██     ██  ██      ██  ██    ██  ██████

   Star Wars Theme — "A long time ago, in a galaxy far, far away..."
   Dark theme | Deep space black | Star Wars crawl yellow #FFE81F
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── CSS Variables ─────────────────────────────────────────────────────────── */

html[data-theme="starwars"] {
  --primary-color:      #FFE81F;
  --primary-dark:       #c4a000;
  --primary-light:      #fff176;
  --secondary-color:    #050d1a;
  --secondary-dark:     #020710;
  --accent-color:       #4fc3f7;
  --text-primary:       #e8e6d0;
  --text-secondary:     #8db4cc;
  --text-light:         #5a7a96;
  --bg-primary:         #000510;
  --bg-secondary:       #050d1a;
  --bg-dark:            #000000;
  --border-color:       rgba(255, 232, 31, 0.2);
  --success:            #4caf50;
  --warning:            #FFE81F;
  --danger:             #e53935;
  --info:               #4fc3f7;
  --card-bg:            #060e1c;
  --input-bg:           #060e1c;
  --sidebar-bg:         #030a15;
  --table-header-bg:    #030a15;
  --hover-bg:           #0a1a30;
  --badge-bg:           #060e1c;
  --img-placeholder-bg: #030a15;
  --error-color:        #e53935;
  --btn-primary-text:   #000208;
}

/* ── Body ──────────────────────────────────────────────────────────────────── */

html[data-theme="starwars"] body {
  background: #000510;
  color: #e8e6d0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  letter-spacing: 0.01em;
}

html[data-theme="starwars"] body::before {
  content: "";
  position: fixed;
  inset: 0;
  background:
    radial-gradient(ellipse at 15% 25%,  rgba(255, 232, 31, 0.03)  0%, transparent 40%),
    radial-gradient(ellipse at 85% 70%,  rgba(79,  195, 247, 0.03) 0%, transparent 40%),
    radial-gradient(ellipse at 50% 10%,  rgba(255, 255, 255, 0.02) 0%, transparent 30%),
    radial-gradient(ellipse at 20% 80%,  rgba(255, 255, 255, 0.015) 0%, transparent 25%),
    radial-gradient(ellipse at 75% 40%,  rgba(255, 255, 255, 0.01)  0%, transparent 20%);
  pointer-events: none;
  z-index: 0;
}

/* Animated starfield shimmer */
@keyframes swCrawlGlow {
  0%, 100% { opacity: 0.7; }
  50%       { opacity: 1.0; }
}

/* ── Layout ─────────────────────────────────────────────────────────────────── */

html[data-theme="starwars"] .layout-main {
  background: transparent;
  position: relative;
  z-index: 1;
}

html[data-theme="starwars"] .header {
  background: linear-gradient(180deg, rgba(5, 13, 26, 0.97), rgba(2, 7, 16, 0.99));
  border-bottom: 1px solid rgba(255, 232, 31, 0.25);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.7), 0 1px 0 rgba(255, 232, 31, 0.12);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

html[data-theme="starwars"] .header-logo-img {
  filter: brightness(1.1) drop-shadow(0 0 6px rgba(255, 232, 31, 0.3));
}

html[data-theme="starwars"] .header-logo-suffix {
  color: #FFE81F;
  border-left-color: rgba(255, 232, 31, 0.25);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.75em;
}

html[data-theme="starwars"] .header-beta-badge {
  background: linear-gradient(135deg, #FFE81F, #fff176, #FFE81F);
  background-size: 200% 200%;
  animation: swCrawlGlow 3s ease-in-out infinite;
  color: #000510;
  border: 1px solid #FFE81F;
  box-shadow: 0 0 12px rgba(255, 232, 31, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.3);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

html[data-theme="starwars"] .menu-toggle {
  color: #FFE81F;
}

html[data-theme="starwars"] .menu-toggle:hover {
  color: #fff176;
  text-shadow: 0 0 10px rgba(255, 232, 31, 0.6);
}

html[data-theme="starwars"] .header-user-info {
  color: #e8e6d0;
}

html[data-theme="starwars"] .header-user-name {
  color: #e8e6d0;
  font-weight: 500;
}

html[data-theme="starwars"] .header-user-role {
  color: #8db4cc;
  font-size: 0.85em;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* Rockstar Widget */
html[data-theme="starwars"] .rockstar-widget-header {
  background: linear-gradient(135deg, #FFE81F, #c4a000) !important;
  color: #000510 !important;
  font-weight: 700 !important;
}
html[data-theme="starwars"] .rockstar-widget-header .actions button {
  background: rgba(0, 0, 0, 0.15) !important;
  color: #000510 !important;
  border: 1px solid rgba(0, 0, 0, 0.2) !important;
  border-radius: 6px !important;
}
html[data-theme="starwars"] .rockstar-widget-header .actions button:hover {
  background: rgba(0, 0, 0, 0.25) !important;
}

html[data-theme="starwars"] .rockstar-widget-fab {
  background: linear-gradient(135deg, #FFE81F, #fff176) !important;
  color: #000510 !important;
  box-shadow: 0 4px 20px rgba(255, 232, 31, 0.45) !important;
}

html[data-theme="starwars"] .rockstar-widget-messages .message.assistant {
  background: rgba(255, 232, 31, 0.08) !important;
  border-left: 3px solid #FFE81F !important;
  color: #e8e6d0 !important;
}

html[data-theme="starwars"] .user-avatar {
  background: linear-gradient(135deg, #FFE81F, #fff176);
  border: 2px solid rgba(255, 232, 31, 0.5);
  color: #000510;
  box-shadow: 0 4px 16px rgba(255, 232, 31, 0.35), inset 0 1px 3px rgba(255, 255, 255, 0.3);
  font-weight: 700;
}

html[data-theme="starwars"] .btn-logout {
  background: rgba(5, 13, 26, 0.8);
  color: #FFE81F;
  border: 1px solid rgba(255, 232, 31, 0.35);
}

html[data-theme="starwars"] .btn-logout:hover {
  background: rgba(255, 232, 31, 0.12);
  border-color: #FFE81F;
  box-shadow: 0 0 14px rgba(255, 232, 31, 0.35);
}

html[data-theme="starwars"] .logout-button {
  background: rgba(5, 13, 26, 0.8);
  color: #FFE81F;
  border: 1px solid rgba(255, 232, 31, 0.35);
}

html[data-theme="starwars"] .logout-button:hover {
  background: rgba(255, 232, 31, 0.12);
  border-color: #FFE81F;
  box-shadow: 0 0 14px rgba(255, 232, 31, 0.35);
}

html[data-theme="starwars"] .btn-export-pdf {
  background: rgba(5, 13, 26, 0.8);
  color: #FFE81F;
  border: 1px solid rgba(255, 232, 31, 0.35);
}

html[data-theme="starwars"] .btn-export-pdf:hover {
  background: rgba(255, 232, 31, 0.12);
  border-color: #FFE81F;
  box-shadow: 0 0 14px rgba(255, 232, 31, 0.35);
  color: #fff176;
}

/* ── Sidebar ─────────────────────────────────────────────────────────────────── */

html[data-theme="starwars"] .sidebar {
  background: linear-gradient(180deg, rgba(5, 13, 26, 0.97), rgba(2, 7, 16, 0.99));
  border-right: 1px solid rgba(255, 232, 31, 0.2);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

html[data-theme="starwars"] .nav-link {
  color: #8db4cc;
  border-left: 2px solid transparent;
  transition: all 0.25s ease;
  letter-spacing: 0.03em;
}

html[data-theme="starwars"] .nav-link:hover {
  background: rgba(255, 232, 31, 0.08);
  color: #FFE81F;
  border-left-color: rgba(255, 232, 31, 0.5);
  text-shadow: 0 0 8px rgba(255, 232, 31, 0.4);
}

html[data-theme="starwars"] .nav-link.active {
  background: rgba(255, 232, 31, 0.12);
  color: #FFE81F;
  border-left-color: #FFE81F;
  box-shadow:
    inset 0 0 20px rgba(255, 232, 31, 0.1),
    inset 3px 0 10px rgba(255, 232, 31, 0.15);
  font-weight: 600;
  text-shadow: 0 0 6px rgba(255, 232, 31, 0.35);
}

html[data-theme="starwars"] .nav-section-title {
  color: #5a7a96;
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

html[data-theme="starwars"] .sidebar-icon {
  color: #FFE81F;
}

/* ── Scrollbars ──────────────────────────────────────────────────────────────── */

html[data-theme="starwars"] ::-webkit-scrollbar-track {
  background: rgba(2, 7, 16, 0.8);
}

html[data-theme="starwars"] ::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #FFE81F, #c4a000);
  border-radius: 10px;
  border: 2px solid rgba(2, 7, 16, 0.5);
}

html[data-theme="starwars"] ::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #fff176, #FFE81F);
  box-shadow: 0 0 10px rgba(255, 232, 31, 0.5);
}

/* ── Profile theme picker ──────────────────────────────────────────────────── */

html[data-theme="starwars"] .profile-themes {
  background: linear-gradient(135deg, rgba(6, 14, 28, 0.95), rgba(2, 7, 16, 0.95));
  border: 1px solid rgba(255, 232, 31, 0.25);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 232, 31, 0.08);
}

html[data-theme="starwars"] .profile-themes-header {
  color: #FFE81F;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

html[data-theme="starwars"] .profile-themes-icon {
  color: #fff176;
}

html[data-theme="starwars"] .profile-theme-option {
  border-color: rgba(255, 232, 31, 0.2);
  background: rgba(6, 14, 28, 0.6);
}

html[data-theme="starwars"] .profile-theme-option:hover {
  border-color: #FFE81F;
  background: rgba(255, 232, 31, 0.08);
  box-shadow: 0 4px 20px rgba(255, 232, 31, 0.2);
}

html[data-theme="starwars"] .profile-theme-option--active {
  border-color: #FFE81F;
  box-shadow: 0 0 0 3px rgba(255, 232, 31, 0.2), 0 4px 20px rgba(255, 232, 31, 0.25);
  background: rgba(255, 232, 31, 0.12);
}

html[data-theme="starwars"] .profile-theme-name {
  color: #e8e6d0;
}

html[data-theme="starwars"] .profile-theme-option--active .profile-theme-name {
  color: #FFE81F;
  font-weight: 700;
}

html[data-theme="starwars"] .profile-theme-active-dot {
  background: #FFE81F;
  box-shadow: 0 0 10px rgba(255, 232, 31, 0.7);
}

/* ── Profile Hero & Cards ──────────────────────────────────────────────────── */

html[data-theme="starwars"] .profile-hero {
  background: linear-gradient(135deg, rgba(6, 14, 28, 0.95), rgba(2, 7, 16, 0.98));
  border: 1px solid rgba(255, 232, 31, 0.25);
  border-left: 4px solid #FFE81F;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 232, 31, 0.08);
}

html[data-theme="starwars"] .profile-avatar-initials {
  background: linear-gradient(135deg, #FFE81F, #fff176);
  color: #000510;
  border: 3px solid rgba(255, 232, 31, 0.5);
  box-shadow:
    0 8px 32px rgba(255, 232, 31, 0.4),
    inset 0 2px 8px rgba(255, 255, 255, 0.2);
  font-weight: 900;
}

html[data-theme="starwars"] .profile-hero-info h1 {
  color: #e8e6d0;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.7);
}

html[data-theme="starwars"] .profile-email {
  color: #8db4cc;
}

html[data-theme="starwars"] .profile-role-badge {
  background: rgba(255, 232, 31, 0.15);
  color: #FFE81F;
  border: 1px solid rgba(255, 232, 31, 0.35);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.8em;
}

html[data-theme="starwars"] .profile-card {
  background: linear-gradient(135deg, rgba(6, 14, 28, 0.95), rgba(2, 7, 16, 0.98));
  border: 1px solid rgba(255, 232, 31, 0.2);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 232, 31, 0.06);
}

html[data-theme="starwars"] .card-header {
  border-bottom: 1px solid rgba(255, 232, 31, 0.15);
}

html[data-theme="starwars"] .card-header h3 {
  color: #FFE81F;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

html[data-theme="starwars"] .form-group {
  border-bottom: 1px solid rgba(255, 232, 31, 0.1);
}

html[data-theme="starwars"] .form-group label {
  color: #8db4cc;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.85em;
}

html[data-theme="starwars"] .field-value {
  color: #e8e6d0;
}

html[data-theme="starwars"] .field-hint,
html[data-theme="starwars"] .security-message {
  color: #5a7a96;
}

html[data-theme="starwars"] .form-input,
html[data-theme="starwars"] .profile-role-select {
  background: rgba(2, 7, 16, 0.7);
  border: 1px solid rgba(255, 232, 31, 0.25);
  color: #e8e6d0;
}

html[data-theme="starwars"] .form-input:focus {
  border-color: #FFE81F;
  box-shadow: 0 0 0 3px rgba(255, 232, 31, 0.12), 0 0 20px rgba(255, 232, 31, 0.15);
  background: rgba(2, 7, 16, 0.9);
}

html[data-theme="starwars"] .form-input::placeholder {
  color: #5a7a96;
}

html[data-theme="starwars"] .profile-role-select {
  cursor: pointer;
}

html[data-theme="starwars"] .profile-role-select option {
  background: #050d1a;
  color: #e8e6d0;
}

/* ── Buttons ──────────────────────────────────────────────────────────────── */

html[data-theme="starwars"] .btn-primary {
  background: linear-gradient(135deg, #FFE81F, #c4a000);
  color: #000510;
  border: 1px solid #fff176;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  box-shadow: 0 4px 15px rgba(255, 232, 31, 0.35);
}

html[data-theme="starwars"] .btn-primary:hover:not(:disabled) {
  background: linear-gradient(135deg, #fff176, #FFE81F);
  box-shadow: 0 6px 25px rgba(255, 232, 31, 0.55);
  transform: translateY(-1px);
}

html[data-theme="starwars"] .btn-secondary {
  background: rgba(5, 13, 26, 0.8);
  color: #8db4cc;
  border: 1px solid rgba(255, 232, 31, 0.25);
}

html[data-theme="starwars"] .btn-secondary:hover:not(:disabled) {
  background: rgba(255, 232, 31, 0.1);
  color: #FFE81F;
  border-color: rgba(255, 232, 31, 0.5);
}

html[data-theme="starwars"] .btn-icon {
  color: #FFE81F;
}

html[data-theme="starwars"] .btn-icon:hover {
  color: #fff176;
  text-shadow: 0 0 10px rgba(255, 232, 31, 0.5);
}

html[data-theme="starwars"] .btn-danger {
  background: rgba(229, 57, 53, 0.15);
  color: #ef5350;
  border: 1px solid rgba(229, 57, 53, 0.4);
}

html[data-theme="starwars"] .btn-danger:hover:not(:disabled) {
  background: rgba(229, 57, 53, 0.25);
  border-color: #e53935;
  box-shadow: 0 0 14px rgba(229, 57, 53, 0.35);
}

/* ── MFA Section ──────────────────────────────────────────────────────────── */

html[data-theme="starwars"] .mfa-section {
  border-top: 1px solid rgba(255, 232, 31, 0.15);
  padding-top: 1.5rem;
  margin-top: 1rem;
}

html[data-theme="starwars"] .mfa-icon {
  color: #FFE81F;
}

html[data-theme="starwars"] .mfa-status-badge.active {
  background: rgba(76, 175, 80, 0.2);
  color: #66bb6a;
  border: 1px solid rgba(76, 175, 80, 0.4);
}

html[data-theme="starwars"] .mfa-status-badge.inactive {
  background: rgba(90, 122, 150, 0.2);
  color: #5a7a96;
  border: 1px solid rgba(90, 122, 150, 0.4);
}

html[data-theme="starwars"] .mfa-enabled-message {
  color: #8db4cc;
}

html[data-theme="starwars"] .mfa-qr-container {
  background: rgba(248, 248, 248, 0.95);
  border: 2px solid #FFE81F;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
}

html[data-theme="starwars"] .mfa-secret-key code {
  background: rgba(2, 7, 16, 0.8);
  color: #FFE81F;
  border: 1px solid rgba(255, 232, 31, 0.3);
}

html[data-theme="starwars"] .mfa-step-number {
  background: #FFE81F;
  color: #000510;
  font-weight: 700;
}

html[data-theme="starwars"] .mfa-description,
html[data-theme="starwars"] .mfa-step p {
  color: #8db4cc;
}

html[data-theme="starwars"] .mfa-disable-warning {
  background: rgba(229, 57, 53, 0.12);
  border-left: 3px solid #e53935;
  color: #e8e6d0;
}

html[data-theme="starwars"] .message.success {
  background: rgba(76, 175, 80, 0.15);
  color: #66bb6a;
  border-left: 4px solid #4caf50;
}

html[data-theme="starwars"] .message.error {
  background: rgba(229, 57, 53, 0.15);
  color: #ef5350;
  border-left: 4px solid #e53935;
}

/* ── Dashboard ──────────────────────────────────────────────────────────── */

html[data-theme="starwars"] .stat-card,
html[data-theme="starwars"] .dashboard-card,
html[data-theme="starwars"] .health-section-row,
html[data-theme="starwars"] .dashboard-manual-sync-box,
html[data-theme="starwars"] .dashboard-schedule-row {
  background: linear-gradient(135deg, rgba(6, 14, 28, 0.95), rgba(2, 7, 16, 0.98));
  border: 1px solid rgba(255, 232, 31, 0.2);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 232, 31, 0.06);
  color: #e8e6d0;
}

html[data-theme="starwars"] .stat-card:hover,
html[data-theme="starwars"] .dashboard-card:hover {
  border-color: rgba(255, 232, 31, 0.5);
  box-shadow: 0 12px 40px rgba(255, 232, 31, 0.2), inset 0 1px 0 rgba(255, 232, 31, 0.1);
  transform: translateY(-2px);
}

html[data-theme="starwars"] .stat-value {
  color: #FFE81F;
  text-shadow: 0 2px 10px rgba(255, 232, 31, 0.35);
}

html[data-theme="starwars"] .stat-label {
  color: #8db4cc;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.8em;
}

html[data-theme="starwars"] .dashboard-schedule-btn {
  background: rgba(6, 14, 28, 0.9);
  border: 1px solid rgba(255, 232, 31, 0.35);
  color: #FFE81F;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

html[data-theme="starwars"] .dashboard-schedule-btn:hover:not(:disabled) {
  background: rgba(6, 14, 28, 1);
  border-color: #FFE81F;
  box-shadow: 0 4px 12px rgba(255, 232, 31, 0.3);
}

html[data-theme="starwars"] .dashboard-sync-button {
  background: #FFE81F;
  color: #000510;
  font-weight: 700;
}
html[data-theme="starwars"] .dashboard-sync-button:hover:not(:disabled) {
  background: #fff176;
  opacity: 1;
}

html[data-theme="starwars"] .health-category-title {
  color: #FFE81F;
  text-shadow: 0 2px 8px rgba(255, 232, 31, 0.3);
}

html[data-theme="starwars"] .health-chip {
  background: linear-gradient(135deg, rgba(6, 14, 28, 0.95), rgba(2, 7, 16, 0.98));
  border: 1px solid rgba(255, 232, 31, 0.2);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
}

html[data-theme="starwars"] .health-chip-label {
  color: #8db4cc;
  text-transform: uppercase;
  font-size: 0.8em;
  letter-spacing: 0.05em;
}

html[data-theme="starwars"] .health-chip-value {
  color: #e8e6d0;
  text-shadow: 0 1px 4px rgba(255, 232, 31, 0.15);
}

/* ── Reports ────────────────────────────────────────────────────────────── */

html[data-theme="starwars"] .date-select,
html[data-theme="starwars"] .sync-meta,
html[data-theme="starwars"] .report-section {
  background: linear-gradient(135deg, rgba(6, 14, 28, 0.95), rgba(2, 7, 16, 0.98));
  border: 1px solid rgba(255, 232, 31, 0.2);
  color: #e8e6d0;
}

/* ── Settings, Roles, Brand Flags ───────────────────────────────────────── */

html[data-theme="starwars"] .settings-card,
html[data-theme="starwars"] .role-card,
html[data-theme="starwars"] .brand-flag-card {
  background: linear-gradient(135deg, rgba(6, 14, 28, 0.95), rgba(2, 7, 16, 0.98));
  border: 1px solid rgba(255, 232, 31, 0.2);
  color: #e8e6d0;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}

/* ── Analytics ──────────────────────────────────────────────────────────── */

html[data-theme="starwars"] .period-btn,
html[data-theme="starwars"] .kpi-card,
html[data-theme="starwars"] .analytics-card,
html[data-theme="starwars"] .segment-card,
html[data-theme="starwars"] .hub-card {
  background: linear-gradient(135deg, rgba(6, 14, 28, 0.95), rgba(2, 7, 16, 0.98));
  border: 1px solid rgba(255, 232, 31, 0.2);
  color: #e8e6d0;
}

html[data-theme="starwars"] .period-btn.active {
  background: rgba(255, 232, 31, 0.15);
  border-color: #FFE81F;
  color: #FFE81F;
  box-shadow: 0 0 18px rgba(255, 232, 31, 0.3);
}

html[data-theme="starwars"] .hub-section-label {
  color: #FFE81F;
  border-bottom-color: rgba(255, 232, 31, 0.25);
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

/* ── Monitoring ─────────────────────────────────────────────────────────── */

html[data-theme="starwars"] .monitoring-section-header {
  color: #FFE81F;
  border-color: rgba(255, 232, 31, 0.25);
  background: rgba(255, 232, 31, 0.08);
  border-left-color: #FFE81F;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

html[data-theme="starwars"] .metric-card {
  background: #000000;
  border: 1px solid rgba(255, 232, 31, 0.2);
}

html[data-theme="starwars"] .metric-card-title {
  color: #FFE81F;
  background: rgba(255, 232, 31, 0.08);
  border-color: rgba(255, 232, 31, 0.15);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

html[data-theme="starwars"] .metric-card-body {
  background: #000000;
}

html[data-theme="starwars"] .metric-card-img {
  filter: invert(1) hue-rotate(180deg);
  border-radius: 4px;
}

html[data-theme="starwars"] .btn-metric-filter,
html[data-theme="starwars"] .btn-time-range,
html[data-theme="starwars"] .btn-monitoring-refresh,
html[data-theme="starwars"] .btn-monitoring-console {
  background: rgba(5, 13, 26, 0.8);
  border: 1px solid rgba(255, 232, 31, 0.25);
  color: #8db4cc;
}

html[data-theme="starwars"] .btn-metric-filter:hover,
html[data-theme="starwars"] .btn-time-range:hover {
  background: rgba(255, 232, 31, 0.1);
  border-color: #FFE81F;
  color: #FFE81F;
}

html[data-theme="starwars"] .btn-metric-filter.active,
html[data-theme="starwars"] .btn-time-range.active {
  background: rgba(255, 232, 31, 0.15);
  border-color: #FFE81F;
  color: #FFE81F;
  box-shadow: 0 0 14px rgba(255, 232, 31, 0.3);
}

/* ── Error Logs ─────────────────────────────────────────────────────────── */

html[data-theme="starwars"] .logs-stat-card {
  background: linear-gradient(135deg, rgba(6, 14, 28, 0.95), rgba(2, 7, 16, 0.98));
  border: 1px solid rgba(255, 232, 31, 0.2);
  color: #e8e6d0;
}

html[data-theme="starwars"] .logs-row {
  background: rgba(6, 14, 28, 0.6);
  border: 1px solid rgba(255, 232, 31, 0.12);
}

html[data-theme="starwars"] .logs-row:hover {
  background: rgba(255, 232, 31, 0.07);
  border-color: rgba(255, 232, 31, 0.25);
}

html[data-theme="starwars"] .btn-logs-refresh,
html[data-theme="starwars"] .btn-logs-console,
html[data-theme="starwars"] .btn-logs-group,
html[data-theme="starwars"] .btn-logs-level,
html[data-theme="starwars"] .btn-logs-time {
  background: rgba(5, 13, 26, 0.8);
  border: 1px solid rgba(255, 232, 31, 0.25);
  color: #8db4cc;
}

html[data-theme="starwars"] .btn-logs-group.active,
html[data-theme="starwars"] .btn-logs-level.active,
html[data-theme="starwars"] .btn-logs-time.active {
  background: rgba(255, 232, 31, 0.15);
  border-color: #FFE81F;
  color: #FFE81F;
}

html[data-theme="starwars"] .logs-search-wrap .logs-search-icon {
  color: #8db4cc;
}

html[data-theme="starwars"] .logs-search-input {
  background: rgba(2, 7, 16, 0.85);
  border: 1px solid rgba(255, 232, 31, 0.25);
  color: #e8e6d0;
}

html[data-theme="starwars"] .logs-search-input:focus {
  border-color: #FFE81F;
  box-shadow: 0 0 0 3px rgba(255, 232, 31, 0.15);
}

html[data-theme="starwars"] .logs-search-input::placeholder {
  color: #5a7a96;
}

html[data-theme="starwars"] .logs-row--error {
  background: rgba(229, 57, 53, 0.12);
  border-color: rgba(229, 57, 53, 0.4);
}

html[data-theme="starwars"] .logs-row--error:hover {
  background: rgba(229, 57, 53, 0.2);
  border-color: rgba(229, 57, 53, 0.5);
}

html[data-theme="starwars"] .logs-row--warn {
  background: rgba(255, 232, 31, 0.08);
  border-color: rgba(255, 232, 31, 0.35);
}

html[data-theme="starwars"] .logs-row--warn:hover {
  background: rgba(255, 232, 31, 0.14);
  border-color: rgba(255, 232, 31, 0.5);
}

html[data-theme="starwars"] .logs-row--info {
  background: rgba(79, 195, 247, 0.1);
  border-color: rgba(79, 195, 247, 0.35);
}

html[data-theme="starwars"] .logs-row--info:hover {
  background: rgba(79, 195, 247, 0.18);
  border-color: rgba(79, 195, 247, 0.5);
}

html[data-theme="starwars"] .logs-stream {
  background: rgba(2, 7, 16, 0.95);
  color: #8db4cc;
  border: 1px solid rgba(255, 232, 31, 0.25);
}

html[data-theme="starwars"] .logs-section-card {
  background: linear-gradient(135deg, rgba(6, 14, 28, 0.95), rgba(2, 7, 16, 0.98));
  border: 1px solid rgba(255, 232, 31, 0.2);
}

/* ── XRay ───────────────────────────────────────────────────────────────── */

html[data-theme="starwars"] .btn-xray-refresh,
html[data-theme="starwars"] .btn-xray-console,
html[data-theme="starwars"] .btn-xray-time,
html[data-theme="starwars"] .btn-xray-filter {
  background: rgba(5, 13, 26, 0.8);
  border: 1px solid rgba(255, 232, 31, 0.25);
  color: #8db4cc;
}

html[data-theme="starwars"] .btn-xray-time.active,
html[data-theme="starwars"] .btn-xray-filter.active {
  background: rgba(255, 232, 31, 0.15);
  border-color: #FFE81F;
  color: #FFE81F;
}

html[data-theme="starwars"] .xray-stat-card,
html[data-theme="starwars"] .xray-section-card {
  background: linear-gradient(135deg, rgba(6, 14, 28, 0.95), rgba(2, 7, 16, 0.98));
  border: 1px solid rgba(255, 232, 31, 0.2);
  color: #e8e6d0;
}

html[data-theme="starwars"] .xray-service-card {
  background: rgba(6, 14, 28, 0.8);
  border: 1px solid rgba(255, 232, 31, 0.2);
  color: #e8e6d0;
}

html[data-theme="starwars"] .xray-service-card:hover {
  background: rgba(6, 14, 28, 0.95);
  border-color: rgba(255, 232, 31, 0.4);
}

html[data-theme="starwars"] .xray-service-card--error {
  background: rgba(229, 57, 53, 0.15);
  border-color: rgba(229, 57, 53, 0.45);
}

html[data-theme="starwars"] .xray-service-name {
  color: #FFE81F;
}

html[data-theme="starwars"] .xray-service-type {
  color: #8db4cc;
}

html[data-theme="starwars"] .xray-row {
  background: rgba(6, 14, 28, 0.5);
}

html[data-theme="starwars"] .xray-row:hover {
  background: rgba(255, 232, 31, 0.08) !important;
}

html[data-theme="starwars"] .xray-search-wrap .xray-search-icon {
  color: #8db4cc;
}

html[data-theme="starwars"] .xray-search-input {
  background: rgba(2, 7, 16, 0.85);
  border: 1px solid rgba(255, 232, 31, 0.25);
  color: #e8e6d0;
}

html[data-theme="starwars"] .xray-search-input:focus {
  border-color: #FFE81F;
  box-shadow: 0 0 0 3px rgba(255, 232, 31, 0.12);
}

html[data-theme="starwars"] .xray-search-input::placeholder {
  color: #5a7a96;
}

html[data-theme="starwars"] .btn-xray-view {
  background: transparent;
  color: #8db4cc;
}

html[data-theme="starwars"] .btn-xray-view:hover {
  background: rgba(6, 14, 28, 0.7);
  color: #FFE81F;
}

html[data-theme="starwars"] .btn-xray-view.active {
  background: linear-gradient(135deg, rgba(255, 232, 31, 0.2), rgba(255, 232, 31, 0.12));
  color: #FFE81F;
  box-shadow: 0 2px 8px rgba(255, 232, 31, 0.3);
}

html[data-theme="starwars"] .xray-view-toggle {
  background: rgba(2, 7, 16, 0.85);
}

html[data-theme="starwars"] .xray-svcmap-wrap svg rect[fill="#ffffff"],
html[data-theme="starwars"] .xray-svcmap-wrap svg rect[fill="#fff5f5"],
html[data-theme="starwars"] .xray-svcmap-wrap svg rect[fill="#fffbeb"] {
  fill: rgba(6, 14, 28, 0.95) !important;
}

html[data-theme="starwars"] .xray-svcmap-wrap svg rect[stroke="#e2e8f0"] {
  stroke: rgba(255, 232, 31, 0.35) !important;
}

html[data-theme="starwars"] .xray-svcmap-wrap svg rect[fill="rgba(0,0,0,0.06)"] {
  fill: rgba(0, 0, 0, 0.4) !important;
}

html[data-theme="starwars"] .xray-svcmap-wrap svg text[fill="#1e293b"] {
  fill: #FFE81F !important;
}

html[data-theme="starwars"] .xray-svcmap-wrap svg text[fill="#64748b"] {
  fill: #8db4cc !important;
}

html[data-theme="starwars"] .xray-svcmap-wrap svg text[fill="#94a3b8"] {
  fill: #5a7a96 !important;
}

html[data-theme="starwars"] .xray-svcmap-wrap svg text[fill="#b0bec5"] {
  fill: #8db4cc !important;
}

html[data-theme="starwars"] .xray-svcmap-wrap svg path[fill="#b0bec5"] {
  fill: #8db4cc !important;
}

html[data-theme="starwars"] .xray-svcmap-wrap svg path[stroke="#b0bec5"],
html[data-theme="starwars"] .xray-svcmap-wrap svg line[stroke="#f1f5f9"] {
  stroke: rgba(255, 232, 31, 0.25) !important;
}

html[data-theme="starwars"] .xray-row--selected {
  background: rgba(255, 232, 31, 0.15) !important;
  border-left: 3px solid #FFE81F;
}

html[data-theme="starwars"] .xray-trace-id {
  background: rgba(2, 7, 16, 0.95);
  color: #8db4cc;
  border: 1px solid rgba(255, 232, 31, 0.25);
}

html[data-theme="starwars"] .xray-exec-id {
  background: rgba(2, 7, 16, 0.95);
  color: #FFE81F;
  border: 1px solid rgba(255, 232, 31, 0.35);
}

html[data-theme="starwars"] .xray-badge.badge-green {
  background: rgba(76, 175, 80, 0.2);
  color: #81c784;
  border: 1px solid rgba(76, 175, 80, 0.4);
}

html[data-theme="starwars"] .xray-badge.badge-blue {
  background: rgba(79, 195, 247, 0.2);
  color: #81d4fa;
  border: 1px solid rgba(79, 195, 247, 0.4);
}

html[data-theme="starwars"] .xray-badge.badge-red {
  background: rgba(229, 57, 53, 0.2);
  color: #ef9a9a;
  border: 1px solid rgba(229, 57, 53, 0.4);
}

html[data-theme="starwars"] .xray-badge.badge-orange {
  background: rgba(255, 167, 38, 0.2);
  color: #ffcc80;
  border: 1px solid rgba(255, 167, 38, 0.4);
}

html[data-theme="starwars"] .xray-badge.badge-gray {
  background: rgba(90, 122, 150, 0.2);
  color: #8db4cc;
  border: 1px solid rgba(90, 122, 150, 0.4);
}

html[data-theme="starwars"] .xray-detail-panel {
  background: rgba(6, 14, 28, 0.95);
  border: 1px solid rgba(255, 232, 31, 0.25);
}

html[data-theme="starwars"] .xray-detail-header {
  background: rgba(2, 7, 16, 0.98);
  border-bottom: 1px solid rgba(255, 232, 31, 0.25);
}

html[data-theme="starwars"] .xray-detail-title {
  color: #FFE81F;
}

html[data-theme="starwars"] .xray-detail-title code {
  background: rgba(2, 7, 16, 0.95);
  color: #81d4fa;
  border: 1px solid rgba(79, 195, 247, 0.4);
}

html[data-theme="starwars"] .xray-detail-close {
  color: #8db4cc;
}

html[data-theme="starwars"] .xray-detail-close:hover {
  background: rgba(255, 232, 31, 0.15);
  color: #FFE81F;
}

html[data-theme="starwars"] .xray-waterfall-col-label {
  color: #8db4cc;
}

html[data-theme="starwars"] .xray-seg-row:hover {
  background: rgba(255, 232, 31, 0.08) !important;
}

html[data-theme="starwars"] .xray-seg-name {
  color: #e8e6d0;
}

html[data-theme="starwars"] .xray-seg-url {
  color: #8db4cc;
}

html[data-theme="starwars"] .xray-seg-status {
  background: rgba(76, 175, 80, 0.2);
  color: #81c784;
  border: 1px solid rgba(76, 175, 80, 0.4);
}

html[data-theme="starwars"] .xray-seg-status--error {
  background: rgba(229, 57, 53, 0.2);
  color: #ef9a9a;
  border: 1px solid rgba(229, 57, 53, 0.4);
}

html[data-theme="starwars"] .xray-seg-timeline {
  background: rgba(2, 7, 16, 0.85);
  border: 1px solid rgba(255, 232, 31, 0.15);
}

html[data-theme="starwars"] .xray-seg-duration {
  color: #8db4cc;
}

html[data-theme="starwars"] .xray-placeholder {
  color: #8db4cc;
}

html[data-theme="starwars"] .xray-error-msg {
  background: rgba(229, 57, 53, 0.12);
  color: #ef9a9a;
  border: 1px solid rgba(229, 57, 53, 0.4);
}

/* ── Users ──────────────────────────────────────────────────────────────── */

html[data-theme="starwars"] .users-search-input {
  background: rgba(2, 7, 16, 0.7);
  border: 1px solid rgba(255, 232, 31, 0.25);
  color: #e8e6d0;
}

html[data-theme="starwars"] .tr-search-input {
  background: rgba(2, 7, 16, 0.7);
  border: 1px solid rgba(255, 232, 31, 0.25);
  color: #e8e6d0;
}

html[data-theme="starwars"] .tr-search-input::placeholder {
  color: #5a7a96;
}

html[data-theme="starwars"] .tr-search-input:focus {
  border-color: #FFE81F;
  box-shadow: 0 0 18px rgba(255, 232, 31, 0.2);
}

html[data-theme="starwars"] .tr-search-icon {
  color: #5a7a96;
}

html[data-theme="starwars"] .users-search-input:focus {
  border-color: #FFE81F;
  box-shadow: 0 0 18px rgba(255, 232, 31, 0.2);
}

html[data-theme="starwars"] .users-search-input::placeholder {
  color: #5a7a96;
}

html[data-theme="starwars"] .users-table {
  background: linear-gradient(135deg, rgba(6, 14, 28, 0.95), rgba(2, 7, 16, 0.98));
  border: 1px solid rgba(255, 232, 31, 0.2);
}

html[data-theme="starwars"] .users-table th {
  background: rgba(255, 232, 31, 0.08);
  color: #FFE81F;
  border-bottom: 2px solid rgba(255, 232, 31, 0.25);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.85em;
}

html[data-theme="starwars"] .users-th-sortable:hover {
  background: rgba(255, 232, 31, 0.12);
  color: #FFE81F;
}

html[data-theme="starwars"] .users-th-active {
  color: #FFE81F;
  background: rgba(255, 232, 31, 0.15);
}

html[data-theme="starwars"] .users-table td {
  color: #e8e6d0;
  border-bottom: 1px solid rgba(255, 232, 31, 0.1);
}

html[data-theme="starwars"] .users-table tr:hover td {
  background: rgba(255, 232, 31, 0.06);
}

html[data-theme="starwars"] .users-cell-date {
  color: #8db4cc;
}

html[data-theme="starwars"] .users-cell-name {
  color: #e8e6d0;
  font-weight: 600;
}

html[data-theme="starwars"] .users-role-admin {
  background: rgba(255, 232, 31, 0.15);
  color: #FFE81F;
  border: 1px solid rgba(255, 232, 31, 0.35);
}

html[data-theme="starwars"] .users-role-reports {
  background: rgba(79, 195, 247, 0.12);
  color: #81d4fa;
  border: 1px solid rgba(79, 195, 247, 0.3);
}

html[data-theme="starwars"] .users-role-generic {
  background: rgba(90, 122, 150, 0.15);
  color: #8db4cc;
  border: 1px solid rgba(90, 122, 150, 0.3);
}

html[data-theme="starwars"] .users-status-label.enabled {
  background: rgba(76, 175, 80, 0.15);
  color: #66bb6a;
  border: 1px solid rgba(76, 175, 80, 0.35);
}

html[data-theme="starwars"] .users-status-label.disabled {
  background: rgba(90, 122, 150, 0.12);
  color: #5a7a96;
  border: 1px solid rgba(90, 122, 150, 0.3);
}

html[data-theme="starwars"] .users-icon {
  color: #FFE81F;
}

html[data-theme="starwars"] .btn-users-refresh,
html[data-theme="starwars"] .btn-users-create,
html[data-theme="starwars"] .btn-users-icon {
  background: rgba(5, 13, 26, 0.8);
  border: 1px solid rgba(255, 232, 31, 0.25);
  color: #8db4cc;
}

html[data-theme="starwars"] .btn-users-refresh:hover:not(:disabled),
html[data-theme="starwars"] .btn-users-create:hover:not(:disabled),
html[data-theme="starwars"] .btn-users-icon:hover:not(:disabled) {
  background: rgba(255, 232, 31, 0.1);
  border-color: #FFE81F;
  color: #FFE81F;
  box-shadow: 0 0 14px rgba(255, 232, 31, 0.2);
}

html[data-theme="starwars"] .users-row-disabled td {
  opacity: 0.45;
  color: #5a7a96;
}

html[data-theme="starwars"] .users-modal-backdrop {
  background: rgba(0, 3, 10, 0.92);
}

html[data-theme="starwars"] .users-modal {
  background: linear-gradient(135deg, rgba(6, 14, 28, 0.99), rgba(2, 7, 16, 0.99));
  border: 1px solid rgba(255, 232, 31, 0.35);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.8), 0 0 80px rgba(255, 232, 31, 0.1);
}

html[data-theme="starwars"] .users-modal-title {
  color: #FFE81F;
  border-bottom: 2px solid rgba(255, 232, 31, 0.25);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

html[data-theme="starwars"] .btn-users-cancel {
  background: rgba(6, 14, 28, 0.9);
  border: 1px solid rgba(255, 232, 31, 0.35);
  color: #FFE81F;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

html[data-theme="starwars"] .btn-users-cancel:hover:not(:disabled) {
  background: rgba(6, 14, 28, 1);
  border-color: #FFE81F;
  box-shadow: 0 4px 12px rgba(255, 232, 31, 0.3);
}

html[data-theme="starwars"] .users-modal-form input,
html[data-theme="starwars"] .users-modal-form select,
html[data-theme="starwars"] .users-role-select {
  background: rgba(2, 7, 16, 0.85);
  border: 1px solid rgba(255, 232, 31, 0.25);
  color: #e8e6d0;
}

html[data-theme="starwars"] .users-modal-form input:focus,
html[data-theme="starwars"] .users-modal-form select:focus,
html[data-theme="starwars"] .users-role-select:focus {
  border-color: #FFE81F;
  box-shadow: 0 0 0 3px rgba(255, 232, 31, 0.15);
}

html[data-theme="starwars"] .users-modal-form select option,
html[data-theme="starwars"] .users-role-select option {
  background: #000510;
  color: #e8e6d0;
}

html[data-theme="starwars"] .users-modal-form label {
  color: #8db4cc;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 0.85em;
}

/* ── Activity modal ─────────────────────────────────────────────────────── */

html[data-theme="starwars"] .activity-summary {
  background: rgba(255, 232, 31, 0.05);
  border: 1px solid rgba(255, 232, 31, 0.2);
}

html[data-theme="starwars"] .activity-table-wrapper {
  border-color: rgba(255, 232, 31, 0.25);
}

html[data-theme="starwars"] .activity-table th {
  background: rgba(255, 232, 31, 0.07);
  border-bottom-color: rgba(255, 232, 31, 0.15);
  color: #8db4cc;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

html[data-theme="starwars"] .activity-table td {
  color: #e8e6d0;
  border-bottom-color: rgba(255, 232, 31, 0.08);
}

html[data-theme="starwars"] .activity-status-high {
  background: rgba(255, 232, 31, 0.12);
  color: #FFE81F;
  border: 1px solid rgba(255, 232, 31, 0.25);
}

html[data-theme="starwars"] .activity-status-medium {
  background: rgba(255, 232, 31, 0.06);
  color: #c4a000;
  border: 1px solid rgba(255, 232, 31, 0.15);
}

html[data-theme="starwars"] .activity-status-expired {
  background: rgba(90, 122, 150, 0.06);
  color: #5a7a96;
}

html[data-theme="starwars"] .activity-status-none {
  background: rgba(90, 122, 150, 0.06);
  color: #5a7a96;
}

html[data-theme="starwars"] .activity-result-badge.pass {
  background: rgba(76, 175, 80, 0.18);
  color: #66bb6a;
}

html[data-theme="starwars"] .activity-result-badge.fail {
  background: rgba(229, 57, 53, 0.18);
  color: #ef5350;
}

/* ── Analytics page components ──────────────────────────────────────────── */

html[data-theme="starwars"] .period-btn {
  background: rgba(5, 13, 26, 0.8);
  color: #8db4cc;
  border-right-color: rgba(255, 232, 31, 0.15);
}

html[data-theme="starwars"] .period-btn:hover {
  background: rgba(255, 232, 31, 0.1);
  color: #FFE81F;
}

html[data-theme="starwars"] .period-btn.active {
  background: rgba(255, 232, 31, 0.18);
  color: #FFE81F;
}

html[data-theme="starwars"] .kpi-card {
  background: linear-gradient(135deg, rgba(6, 14, 28, 0.95), rgba(2, 7, 16, 0.98));
  border: 1px solid rgba(255, 232, 31, 0.15);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
}

html[data-theme="starwars"] .kpi-label {
  color: #8db4cc;
  text-transform: uppercase;
  font-size: 0.8em;
  letter-spacing: 0.06em;
}

html[data-theme="starwars"] .kpi-value {
  color: #FFE81F;
}

html[data-theme="starwars"] .kpi-sub {
  color: #5a7a96;
}

html[data-theme="starwars"] .analytics-card {
  background: linear-gradient(135deg, rgba(6, 14, 28, 0.95), rgba(2, 7, 16, 0.98));
  border: 1px solid rgba(255, 232, 31, 0.2);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
}

html[data-theme="starwars"] .analytics-card-title {
  color: #FFE81F;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

html[data-theme="starwars"] .analytics-table th {
  color: #FFE81F;
  border-bottom-color: rgba(255, 232, 31, 0.25);
}

html[data-theme="starwars"] .analytics-table td {
  color: #e8e6d0;
  border-bottom-color: rgba(255, 232, 31, 0.08);
}

html[data-theme="starwars"] .analytics-table tr:hover td {
  background: rgba(255, 232, 31, 0.06);
}

html[data-theme="starwars"] .bar-track {
  background: rgba(2, 7, 16, 0.85);
}

html[data-theme="starwars"] .bar-fill {
  background: linear-gradient(90deg, #FFE81F, #fff176);
}

html[data-theme="starwars"] .bar-label,
html[data-theme="starwars"] .bar-value {
  color: #e8e6d0;
}

html[data-theme="starwars"] .donut-center {
  background: rgba(6, 14, 28, 0.98);
  color: #FFE81F;
}

html[data-theme="starwars"] .donut-legend-label,
html[data-theme="starwars"] .donut-legend-value {
  color: #e8e6d0;
}

html[data-theme="starwars"] .funnel-step {
  border-bottom-color: rgba(255, 232, 31, 0.1);
}

html[data-theme="starwars"] .funnel-step-name {
  color: #e8e6d0;
}

html[data-theme="starwars"] .funnel-step-bar {
  background: rgba(255, 232, 31, 0.15);
}

html[data-theme="starwars"] .funnel-rate {
  color: #FFE81F;
}

html[data-theme="starwars"] .funnel-sessions {
  color: #8db4cc;
}

html[data-theme="starwars"] .segment-card {
  background: rgba(6, 14, 28, 0.65);
  border: 1px solid rgba(255, 232, 31, 0.15);
}

html[data-theme="starwars"] .segment-name {
  color: #e8e6d0;
}

html[data-theme="starwars"] .segment-stat-value {
  color: #FFE81F;
}

html[data-theme="starwars"] .segment-stat-label {
  color: #8db4cc;
}

html[data-theme="starwars"] .hub-card {
  background: linear-gradient(135deg, rgba(6, 14, 28, 0.95), rgba(2, 7, 16, 0.98));
  border: 1px solid rgba(255, 232, 31, 0.2);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
}

html[data-theme="starwars"] .hub-card:hover {
  box-shadow: 0 8px 32px rgba(255, 232, 31, 0.2);
  border-color: rgba(255, 232, 31, 0.4);
}

html[data-theme="starwars"] .hub-card h3 {
  color: #FFE81F;
}

html[data-theme="starwars"] .hub-card p {
  color: #8db4cc;
}

html[data-theme="starwars"] .exec-date-select,
html[data-theme="starwars"] .exec-date-input {
  background: rgba(2, 7, 16, 0.85);
  border-color: rgba(255, 232, 31, 0.25);
  color: #e8e6d0;
}

html[data-theme="starwars"] .exec-explore-card {
  background: rgba(6, 14, 28, 0.8);
  border-color: rgba(255, 232, 31, 0.2);
}

html[data-theme="starwars"] .exec-explore-card:hover {
  background: rgba(255, 232, 31, 0.1);
}

html[data-theme="starwars"] .exec-explore-title {
  color: #e8e6d0;
}

/* ── Brand Flags components ─────────────────────────────────────────────── */

html[data-theme="starwars"] .brand-flags-search {
  background: rgba(2, 7, 16, 0.7);
  border-color: rgba(255, 232, 31, 0.25);
  color: #e8e6d0;
}

html[data-theme="starwars"] .brand-flags-search:focus {
  border-color: #FFE81F;
  box-shadow: 0 0 0 3px rgba(255, 232, 31, 0.15);
}

html[data-theme="starwars"] .brand-flags-search::placeholder {
  color: #5a7a96;
}

html[data-theme="starwars"] .brand-flags-filter-tabs {
  background: rgba(5, 13, 26, 0.8);
  border-color: rgba(255, 232, 31, 0.25);
}

html[data-theme="starwars"] .brand-flags-filter-btn {
  background: rgba(5, 13, 26, 0.8);
  border-right-color: rgba(255, 232, 31, 0.15);
  color: #8db4cc;
}

html[data-theme="starwars"] .brand-flags-filter-btn:hover {
  background: rgba(255, 232, 31, 0.1);
}

html[data-theme="starwars"] .brand-flags-filter-btn.active {
  background: rgba(255, 232, 31, 0.18);
  color: #FFE81F;
}

html[data-theme="starwars"] .brand-flags-preview {
  background: linear-gradient(135deg, rgba(6, 14, 28, 0.95), rgba(2, 7, 16, 0.98));
  border-color: rgba(255, 232, 31, 0.25);
}

html[data-theme="starwars"] .brand-flags-preview h3 {
  color: #FFE81F;
}

html[data-theme="starwars"] .brand-flags-preview-item {
  background: rgba(2, 7, 16, 0.7);
  border-color: rgba(255, 232, 31, 0.15);
}

html[data-theme="starwars"] .brand-flags-preview-name {
  color: #e8e6d0;
}

html[data-theme="starwars"] .brand-flags-readonly-notice {
  background: rgba(255, 232, 31, 0.1);
  border-color: rgba(255, 232, 31, 0.35);
  color: #FFE81F;
}

html[data-theme="starwars"] .brand-flags-btn-primary {
  background: #FFE81F;
  color: #000510;
  font-weight: 700;
}
html[data-theme="starwars"] .brand-flags-btn-primary:hover:not(:disabled) {
  background: #fff176;
}

html[data-theme="starwars"] .brand-flags-error {
  background: rgba(229, 57, 53, 0.15);
  border-color: rgba(229, 57, 53, 0.4);
  color: #e8e6d0;
}

html[data-theme="starwars"] .brand-flags-success {
  background: rgba(76, 175, 80, 0.15);
  border-color: rgba(76, 175, 80, 0.4);
  color: #e8e6d0;
}

html[data-theme="starwars"] .brand-flags-summary-item {
  background: rgba(5, 13, 26, 0.8);
  border: 1px solid rgba(255, 232, 31, 0.2);
  color: #e8e6d0;
}

html[data-theme="starwars"] .brand-flags-summary-item.active {
  border-color: rgba(255, 232, 31, 0.5);
  color: #FFE81F;
}

html[data-theme="starwars"] .brand-flags-summary-item.inactive {
  border-color: rgba(255, 232, 31, 0.1);
  color: #8db4cc;
}

html[data-theme="starwars"] .brand-flag-state-pill.active {
  background: rgba(255, 232, 31, 0.15);
  color: #FFE81F;
}

html[data-theme="starwars"] .brand-flag-state-pill.inactive {
  background: rgba(5, 13, 26, 0.6);
  color: #5a7a96;
}

html[data-theme="starwars"] .brand-flag-slider {
  background: rgba(255, 232, 31, 0.2);
}

html[data-theme="starwars"] .bf-card {
  background: linear-gradient(135deg, rgba(6, 14, 28, 0.95), rgba(2, 7, 16, 0.98));
  border: 1px solid rgba(255, 232, 31, 0.2);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
}

html[data-theme="starwars"] .bf-card-body {
  color: #e8e6d0;
}

html[data-theme="starwars"] .bf-brand-name {
  color: #FFE81F;
}

html[data-theme="starwars"] .bf-brand-key {
  color: #5a7a96;
}

/* ── Roles components ───────────────────────────────────────────────────── */

html[data-theme="starwars"] .role-card {
  background: linear-gradient(135deg, rgba(6, 14, 28, 0.95), rgba(2, 7, 16, 0.98));
  border: 1px solid rgba(255, 232, 31, 0.2);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
}

html[data-theme="starwars"] .role-card-header {
  border-bottom-color: rgba(255, 232, 31, 0.15);
}

html[data-theme="starwars"] .role-name {
  color: #FFE81F;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

html[data-theme="starwars"] .role-description {
  color: #8db4cc;
}

html[data-theme="starwars"] .permission-item {
  background: rgba(2, 7, 16, 0.7);
  border: 1px solid rgba(255, 232, 31, 0.15);
}

html[data-theme="starwars"] .permission-item:hover {
  background: rgba(255, 232, 31, 0.08);
}

html[data-theme="starwars"] .permission-label {
  color: #e8e6d0;
}

html[data-theme="starwars"] .permission-description {
  color: #5a7a96;
}

/* ── Dashboard components ───────────────────────────────────────────────── */

html[data-theme="starwars"] .dashboard-sync-status {
  background: rgba(6, 14, 28, 0.8);
  border: 1px solid rgba(255, 232, 31, 0.2);
}

html[data-theme="starwars"] .sync-status-label {
  color: #8db4cc;
}

html[data-theme="starwars"] .sync-status-value {
  color: #FFE81F;
}

html[data-theme="starwars"] .dashboard-queue-item {
  background: rgba(2, 7, 16, 0.7);
  border: 1px solid rgba(255, 232, 31, 0.15);
}

html[data-theme="starwars"] .dashboard-queue-label {
  color: #8db4cc;
}

html[data-theme="starwars"] .dashboard-queue-count {
  color: #FFE81F;
}

html[data-theme="starwars"] .dashboard-link-item {
  background: rgba(2, 7, 16, 0.7);
  border: 1px solid rgba(255, 232, 31, 0.15);
  color: #8db4cc;
}

html[data-theme="starwars"] .dashboard-link-item:hover {
  background: rgba(255, 232, 31, 0.1);
  border-color: rgba(255, 232, 31, 0.4);
  color: #FFE81F;
}

/* ── Reports components ─────────────────────────────────────────────────── */

html[data-theme="starwars"] .date-select {
  background: linear-gradient(135deg, rgba(6, 14, 28, 0.95), rgba(2, 7, 16, 0.98));
  border: 1px solid rgba(255, 232, 31, 0.2);
}

html[data-theme="starwars"] .sync-meta {
  background: rgba(6, 14, 28, 0.8);
  border: 1px solid rgba(255, 232, 31, 0.15);
}

html[data-theme="starwars"] .report-section {
  background: linear-gradient(135deg, rgba(6, 14, 28, 0.95), rgba(2, 7, 16, 0.98));
  border: 1px solid rgba(255, 232, 31, 0.2);
}

html[data-theme="starwars"] .report-table {
  background: rgba(2, 7, 16, 0.7);
}

html[data-theme="starwars"] .report-table th {
  background: rgba(255, 232, 31, 0.08);
  color: #FFE81F;
  border-bottom-color: rgba(255, 232, 31, 0.25);
}

html[data-theme="starwars"] .report-table td {
  color: #e8e6d0;
  border-bottom-color: rgba(255, 232, 31, 0.08);
}

html[data-theme="starwars"] .report-table tr:hover td {
  background: rgba(255, 232, 31, 0.05);
}

html[data-theme="starwars"] .changes-toggle {
  background: rgba(255, 232, 31, 0.15);
  border-color: rgba(255, 232, 31, 0.45);
  color: #FFE81F;
}

html[data-theme="starwars"] .changes-toggle:hover {
  background: rgba(255, 232, 31, 0.22);
}

html[data-theme="starwars"] .changes-list {
  background: rgba(6, 14, 28, 0.85);
  border-color: rgba(255, 232, 31, 0.35);
}

html[data-theme="starwars"] .change-field {
  color: #8db4cc;
}

html[data-theme="starwars"] .change-from {
  color: #ef9a9a;
}

html[data-theme="starwars"] .change-arrow {
  color: #8db4cc;
}

html[data-theme="starwars"] .change-to {
  color: #66bb6a;
}

html[data-theme="starwars"] .skipped-filters {
  background: rgba(6, 14, 28, 0.85);
  border-bottom-color: rgba(255, 232, 31, 0.25);
}

html[data-theme="starwars"] .skipped-filter-select {
  background: rgba(2, 7, 16, 0.85);
  border-color: rgba(255, 232, 31, 0.25);
  color: #e8e6d0;
}

html[data-theme="starwars"] .skipped-filter-select:focus {
  border-color: #FFE81F;
  box-shadow: 0 0 0 3px rgba(255, 232, 31, 0.12);
}

html[data-theme="starwars"] .skipped-search-wrap .search-icon {
  color: #8db4cc;
}

html[data-theme="starwars"] .skipped-search-input {
  background: rgba(2, 7, 16, 0.85);
  border-color: rgba(255, 232, 31, 0.25);
  color: #e8e6d0;
}

html[data-theme="starwars"] .skipped-search-input:focus {
  border-color: #FFE81F;
  box-shadow: 0 0 0 3px rgba(255, 232, 31, 0.12);
}

html[data-theme="starwars"] .skipped-search-input::placeholder {
  color: #5a7a96;
}

html[data-theme="starwars"] .skipped-results-count {
  background: rgba(6, 14, 28, 0.85);
  border-bottom-color: rgba(255, 232, 31, 0.25);
  color: #8db4cc;
}

html[data-theme="starwars"] .filter-icon {
  color: #8db4cc;
}

html[data-theme="starwars"] .section-header {
  color: #FFE81F !important;
}

html[data-theme="starwars"] .section-header:hover {
  background: rgba(255, 232, 31, 0.08);
}

html[data-theme="starwars"] .section-count {
  background-color: #FFE81F !important;
  color: #000510 !important;
  font-weight: 700;
}

html[data-theme="starwars"] .report-section {
  border-left-color: #FFE81F !important;
}

html[data-theme="starwars"] .section-body {
  border-top-color: rgba(255, 232, 31, 0.2);
}

/* ── Settings components ────────────────────────────────────────────────── */

html[data-theme="starwars"] .settings-card {
  background: linear-gradient(135deg, rgba(6, 14, 28, 0.95), rgba(2, 7, 16, 0.98));
  border: 1px solid rgba(255, 232, 31, 0.2);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
}

html[data-theme="starwars"] .settings-sidebar {
  background: linear-gradient(135deg, rgba(6, 14, 28, 0.95), rgba(2, 7, 16, 0.98));
  border: 1px solid rgba(255, 232, 31, 0.2);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}

html[data-theme="starwars"] .settings-nav-label {
  color: #8db4cc;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

html[data-theme="starwars"] .settings-nav-item {
  color: #5a7a96;
}

html[data-theme="starwars"] .settings-nav-item:hover:not(:disabled) {
  background: rgba(6, 14, 28, 0.7);
  color: #FFE81F;
}

html[data-theme="starwars"] .settings-nav-item.active {
  background: linear-gradient(135deg, rgba(255, 232, 31, 0.18), rgba(255, 232, 31, 0.1));
  color: #FFE81F;
  border: 1px solid rgba(255, 232, 31, 0.35);
  box-shadow: 0 2px 8px rgba(255, 232, 31, 0.25), inset 0 1px 0 rgba(255, 232, 31, 0.08);
}

html[data-theme="starwars"] .settings-section {
  background: linear-gradient(135deg, rgba(6, 14, 28, 0.95), rgba(2, 7, 16, 0.98));
  border: 1px solid rgba(255, 232, 31, 0.2);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
  border-bottom-color: rgba(255, 232, 31, 0.1);
}

html[data-theme="starwars"] .settings-section-title {
  color: #FFE81F;
  border-bottom-color: rgba(255, 232, 31, 0.25);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

html[data-theme="starwars"] .settings-mode-toggle {
  background: rgba(2, 7, 16, 0.85);
}

html[data-theme="starwars"] .settings-mode-btn:hover:not(:disabled) {
  background: rgba(6, 14, 28, 0.95);
  color: #FFE81F;
}

html[data-theme="starwars"] .settings-mode-btn.active {
  background: linear-gradient(135deg, rgba(6, 14, 28, 1), rgba(2, 7, 16, 1)) !important;
  color: #FFE81F !important;
  border: 1px solid #FFE81F;
  box-shadow: 0 2px 8px rgba(255, 232, 31, 0.35), inset 0 1px 0 rgba(255, 232, 31, 0.12);
}

html[data-theme="starwars"] .settings-instructions-preview {
  background: rgba(2, 7, 16, 0.85);
  border: 1px solid rgba(255, 232, 31, 0.25);
  color: #e8e6d0;
}

html[data-theme="starwars"] .settings-instructions-preview h1,
html[data-theme="starwars"] .settings-instructions-preview h2,
html[data-theme="starwars"] .settings-instructions-preview h3 {
  color: #FFE81F;
}

html[data-theme="starwars"] .settings-instructions-preview code {
  background: rgba(6, 14, 28, 0.85);
  color: #FFE81F;
}

html[data-theme="starwars"] .settings-instructions-preview pre {
  background: rgba(6, 14, 28, 0.85);
  border: 1px solid rgba(255, 232, 31, 0.15);
}

html[data-theme="starwars"] .settings-label {
  color: #8db4cc;
  text-transform: uppercase;
  font-size: 0.85em;
  letter-spacing: 0.06em;
}

html[data-theme="starwars"] .settings-input,
html[data-theme="starwars"] .settings-textarea,
html[data-theme="starwars"] .settings-select {
  background: rgba(2, 7, 16, 0.7);
  border-color: rgba(255, 232, 31, 0.25);
  color: #e8e6d0;
}

html[data-theme="starwars"] .settings-input:focus,
html[data-theme="starwars"] .settings-textarea:focus,
html[data-theme="starwars"] .settings-select:focus {
  border-color: #FFE81F;
  box-shadow: 0 0 0 3px rgba(255, 232, 31, 0.12);
}

/* ── Monitoring components ──────────────────────────────────────────────── */

html[data-theme="starwars"] .monitoring-control {
  background: rgba(5, 13, 26, 0.8);
  border: 1px solid rgba(255, 232, 31, 0.25);
  color: #8db4cc;
}

html[data-theme="starwars"] .monitoring-control:hover {
  background: rgba(255, 232, 31, 0.1);
  color: #FFE81F;
}

html[data-theme="starwars"] .monitoring-control.active {
  background: rgba(255, 232, 31, 0.18);
  color: #FFE81F;
  border-color: #FFE81F;
}

html[data-theme="starwars"] .chart-tooltip {
  background: rgba(2, 7, 16, 0.98) !important;
  border: 1px solid rgba(255, 232, 31, 0.35) !important;
  color: #e8e6d0 !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.7) !important;
}

/* ── Modal components ───────────────────────────────────────────────────── */

html[data-theme="starwars"] .modal-content {
  background: linear-gradient(135deg, rgba(6, 14, 28, 0.99), rgba(2, 7, 16, 0.99));
  border: 1px solid rgba(255, 232, 31, 0.35);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.8);
  color: #e8e6d0;
}

html[data-theme="starwars"] .modal-header {
  border-bottom-color: rgba(255, 232, 31, 0.25);
}

html[data-theme="starwars"] .modal-title {
  color: #FFE81F;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

html[data-theme="starwars"] .modal-body {
  color: #e8e6d0;
}

html[data-theme="starwars"] .modal-footer {
  border-top-color: rgba(255, 232, 31, 0.15);
}

/* ── Loading & Empty states ─────────────────────────────────────────────── */

html[data-theme="starwars"] .loading-spinner {
  border-color: rgba(255, 232, 31, 0.15);
  border-top-color: #FFE81F;
}

html[data-theme="starwars"] .loading-text {
  color: #8db4cc;
}

html[data-theme="starwars"] .empty-state {
  color: #5a7a96;
}

html[data-theme="starwars"] .empty-state-icon {
  color: rgba(255, 232, 31, 0.3);
}

/* ── Badge components ───────────────────────────────────────────────────── */

html[data-theme="starwars"] .badge {
  background: rgba(255, 232, 31, 0.15);
  color: #FFE81F;
  border: 1px solid rgba(255, 232, 31, 0.35);
}

html[data-theme="starwars"] .badge.badge-success {
  background: rgba(76, 175, 80, 0.18);
  color: #66bb6a;
  border-color: rgba(76, 175, 80, 0.4);
}

html[data-theme="starwars"] .badge.badge-warning {
  background: rgba(255, 232, 31, 0.15);
  color: #FFE81F;
  border-color: rgba(255, 232, 31, 0.4);
}

html[data-theme="starwars"] .badge.badge-danger {
  background: rgba(229, 57, 53, 0.18);
  color: #ef5350;
  border-color: rgba(229, 57, 53, 0.4);
}

/* ── Activity Log — Star Wars theme ────────────────────────────────────── */

html[data-theme="starwars"] .activity-log-table-wrapper {
  background: #020b16;
  border-color: rgba(255, 232, 31, 0.2);
}
html[data-theme="starwars"] .activity-log-table thead { background: #050d1a; }
html[data-theme="starwars"] .activity-log-table th { color: rgba(255, 232, 31, 0.7); border-bottom-color: rgba(255, 232, 31, 0.2); }
html[data-theme="starwars"] .activity-log-table td { border-bottom-color: rgba(255, 232, 31, 0.08); color: #e8e6d0; }
html[data-theme="starwars"] .activity-log-table tbody tr:hover { background: rgba(255, 232, 31, 0.05); }
html[data-theme="starwars"] .action-badge.user    { background: rgba(255, 232, 31, 0.15); color: #FFE81F; }
html[data-theme="starwars"] .action-badge.theme   { background: rgba(79, 195, 247, 0.15); color: #4fc3f7; }
html[data-theme="starwars"] .action-badge.sync    { background: rgba(76, 175, 80, 0.15);  color: #66bb6a; }
html[data-theme="starwars"] .action-badge.role    { background: rgba(255, 167, 38, 0.15); color: #ffca28; }
html[data-theme="starwars"] .action-badge.brand   { background: rgba(255, 232, 31, 0.1);  color: #c4a000; }
html[data-theme="starwars"] .action-badge.report  { background: rgba(79, 195, 247, 0.12); color: #81d4fa; }
html[data-theme="starwars"] .action-badge.setting   { background: rgba(90, 122, 150, 0.15); color: #8db4cc; }
html[data-theme="starwars"] .action-badge.inventory { background: rgba(76, 175, 80, 0.12);  color: #81c784; }
html[data-theme="starwars"] .action-badge.pos       { background: rgba(229, 57, 53, 0.15);  color: #ef5350; }
html[data-theme="starwars"] .action-badge.other     { background: rgba(90, 122, 150, 0.1);  color: #5a7a96; }
html[data-theme="starwars"] .activity-log-table tr { background: #020b16; border-color: rgba(255, 232, 31, 0.15); }
html[data-theme="starwars"] .activity-log-search,
html[data-theme="starwars"] .activity-log-date-filter input[type="date"] {
  background: #050d1a;
  border-color: rgba(255, 232, 31, 0.2);
  color: #e8e6d0;
}
html[data-theme="starwars"] .activity-log-clear-btn {
  background: transparent;
  border-color: rgba(255, 232, 31, 0.3);
  color: #FFE81F;
}

/* ── Global form controls — Star Wars ──────────────────────────────────── */

html[data-theme="starwars"] input[type='checkbox'],
html[data-theme="starwars"] input[type='radio'] {
  color-scheme: dark;
  accent-color: #FFE81F;
}

html[data-theme="starwars"] input[type='date'],
html[data-theme="starwars"] input[type='month'],
html[data-theme="starwars"] select {
  color-scheme: dark;
  background: var(--input-bg);
  color: var(--text-primary);
  border-color: var(--border-color);
}

/* ── POS — Star Wars ────────────────────────────────────────────────────── */

html[data-theme="starwars"] .pos-page,
html[data-theme="starwars"] .pos-receipt { background: #000510; color: #FFE81F; }
html[data-theme="starwars"] .pos-header { background: #050d1a; border-color: rgba(255, 232, 31, 0.25); }
html[data-theme="starwars"] .pos-products,
html[data-theme="starwars"] .pos-cart-panel { background: #000510; }
html[data-theme="starwars"] .pos-tabs { background: #050d1a; }
html[data-theme="starwars"] .pos-tab { color: #c4a000; }
html[data-theme="starwars"] .pos-tab.active { color: #FFE81F; border-bottom-color: #FFE81F; background: #000510; }
html[data-theme="starwars"] .pos-search-bar { background: #050d1a; border-color: rgba(255, 232, 31, 0.2); }
html[data-theme="starwars"] .pos-scanner-strip { background: #050d1a; border-color: rgba(255, 232, 31, 0.15); }
html[data-theme="starwars"] .scanner-strip-hint { color: rgba(255, 232, 31, 0.5); }
html[data-theme="starwars"] .pos-scanner-strip.scan-found     { background: rgba(76, 175, 80, 0.12);  border-color: #4caf50; }
html[data-theme="starwars"] .pos-scanner-strip.scan-not-found { background: rgba(229, 57, 53, 0.12);  border-color: #e53935; }
html[data-theme="starwars"] .scanner-strip-feedback.found     { color: #4caf50; }
html[data-theme="starwars"] .scanner-strip-feedback.not-found { color: #e53935; }
html[data-theme="starwars"] .pos-search-input { background: #000510; border-color: rgba(255, 232, 31, 0.25); color: #FFE81F; }
html[data-theme="starwars"] .pos-product-card { background: #050d1a; border-color: rgba(255, 232, 31, 0.18); color: #FFE81F; }
html[data-theme="starwars"] .pos-product-card:hover:not(:disabled) { border-color: #FFE81F; box-shadow: 0 0 14px rgba(255, 232, 31, 0.3); }
html[data-theme="starwars"] .pos-product-name { color: #e8e6d0; }
html[data-theme="starwars"] .pos-product-price { color: #FFE81F; }
html[data-theme="starwars"] .pos-cart-item { background: #050d1a; border-color: rgba(255, 232, 31, 0.15); }
html[data-theme="starwars"] .cart-item-name { color: #e8e6d0; }
html[data-theme="starwars"] .cart-item-qty span { background: #000510; color: #FFE81F; }
html[data-theme="starwars"] .cart-item-qty button { background: #050d1a; color: #FFE81F; }
html[data-theme="starwars"] .cart-item-subtotal { color: #FFE81F; }
html[data-theme="starwars"] .pos-btn.primary { background: #FFE81F; color: #000510; font-weight: 700; }
html[data-theme="starwars"] .pos-btn.success { background: #c4a000; color: #e8e6d0; }
html[data-theme="starwars"] .pos-btn.secondary { background: #050d1a; color: #FFE81F; border-color: rgba(255, 232, 31, 0.25); }
html[data-theme="starwars"] .delivery-btn,
html[data-theme="starwars"] .payment-btn { background: #050d1a; color: #FFE81F; border-color: rgba(255, 232, 31, 0.2); }
html[data-theme="starwars"] .delivery-btn.active,
html[data-theme="starwars"] .payment-btn.active { background: #FFE81F; color: #000510; border-color: #FFE81F; }
html[data-theme="starwars"] .confirm-summary { background: #050d1a; border-color: rgba(255, 232, 31, 0.2); }
html[data-theme="starwars"] .confirm-row { color: #FFE81F; }
html[data-theme="starwars"] .receipt-details,
html[data-theme="starwars"] .receipt-items { background: #050d1a; }
html[data-theme="starwars"] .receipt-header h1 { color: #FFE81F; }
html[data-theme="starwars"] .receipt-row { color: #FFE81F; border-color: rgba(255, 232, 31, 0.2); }
html[data-theme="starwars"] .customer-form input,
html[data-theme="starwars"] .customer-form select { background: #000510; border-color: rgba(255, 232, 31, 0.25); color: #e8e6d0; }
html[data-theme="starwars"] .summary-row { color: #FFE81F; }
html[data-theme="starwars"] .discount-input-wrap input { background: #000510; border-color: rgba(255, 232, 31, 0.25); color: #e8e6d0; }

/* ── POS — badges/counts con fondo amarillo ─────────────────────────────── */
/* tab-count y cart-badge usan var(--accent) = amarillo → texto debe ser oscuro */
html[data-theme="starwars"] .tab-count,
html[data-theme="starwars"] .cart-badge { background: #FFE81F; color: #000510; }
html[data-theme="starwars"] .receipt-toggle.active { background: #FFE81F; border-color: #FFE81F; color: #000510; }

/* ── POSSales — botón Facturar ───────────────────────────────────────────── */
html[data-theme="starwars"] .pss-facturar-btn { background: #FFE81F; color: #000510; font-weight: 700; border-color: #FFE81F; }
html[data-theme="starwars"] .pss-facturar-btn:hover:not(:disabled) { background: #fff176; opacity: 1; }

/* ── Billing — hover de acción ───────────────────────────────────────────── */
html[data-theme="starwars"] .billing-action-btn:hover { background: #FFE81F; color: #000510; }

/* ── GonherInventory / ShopifyMxInventory — view toggle, filter, pagination */
html[data-theme="starwars"] .view-toggle-btn.active { background: #FFE81F; color: #000510; border-color: #FFE81F; }
html[data-theme="starwars"] .filter-action-btn:hover { background: rgba(255, 232, 31, 0.15); color: #FFE81F; border-color: rgba(255, 232, 31, 0.5); }
html[data-theme="starwars"] .pagination-btn { background: #050d1a; border-color: rgba(255, 232, 31, 0.25); color: #e8e6d0; }
html[data-theme="starwars"] .pagination-btn:hover:not(:disabled) { background: #FFE81F; border-color: #FFE81F; color: #000510; }
html[data-theme="starwars"] .pagination-info { color: #8db4cc; }

/* ── PhysicalInventory — botones primarios ───────────────────────────────── */
html[data-theme="starwars"] .phys-add-btn { background: #FFE81F; color: #000510; font-weight: 700; }
html[data-theme="starwars"] .phys-add-btn:hover { background: #fff176; opacity: 1; }
html[data-theme="starwars"] .phys-btn--primary { background: #FFE81F; color: #000510; border-color: #FFE81F; font-weight: 700; }
html[data-theme="starwars"] .phys-btn--primary:hover:not(:disabled) { background: #fff176; opacity: 1; }

/* ── BranchAccess — ba-btn-save / ba-btn-add (fondo amarillo Star Wars, texto oscuro) ── */
html[data-theme="starwars"] .ba-btn-save,
html[data-theme="starwars"] .ba-btn-add {
  background: #FFE81F;
  color: #000510;
  border: none;
  font-weight: 700;
}
html[data-theme="starwars"] .ba-btn-save:hover:not(:disabled),
html[data-theme="starwars"] .ba-btn-add:hover {
  background: #fff176;
  color: #000510;
  opacity: 1;
}

/* ═══════════════════════════════════════════════════════════════════════════
   TEMA: Windows 11
   Fluent Design: Mica/Acrylic, esquinas redondeadas, azul #0078D4
   Fuente Segoe UI Variable, sombras suaves, look moderno y limpio
   ═══════════════════════════════════════════════════════════════════════════ */

html[data-theme="win11"] {
  --primary-color:      #0078D4;
  --primary-dark:       #005FA3;
  --primary-light:      #60CDFF;
  --secondary-color:    #f3f3f3;
  --accent-color:       #0078D4;
  --text-primary:       #1a1a1a;
  --text-secondary:     #444444;
  --text-light:         #767676;
  --bg-primary:         #f0f0f0;
  --bg-secondary:       #fafafa;
  --bg-dark:            #e0e0e0;
  --border-color:       rgba(0, 0, 0, 0.08);
  --success:            #107c10;
  --warning:            #ca5010;
  --danger:             #d13438;
  --info:               #0078D4;
  --card-bg:            rgba(255, 255, 255, 0.85);
  --input-bg:           #ffffff;
  --sidebar-bg:         rgba(238, 238, 238, 0.85);
  --table-header-bg:    #f5f5f5;
  --hover-bg:           rgba(0, 0, 0, 0.04);
  --badge-bg:           #e8f0fe;
  --img-placeholder-bg: #f0f0f0;
  --error-color:        #d13438;
  --btn-primary-text:   #ffffff;
}

html[data-theme="win11"] body {
  background: #f0f0f0;
  color: #1a1a1a;
  font-family: 'Segoe UI Variable', 'Segoe UI', system-ui, -apple-system, sans-serif;
  font-size: 14px;
  font-weight: 400;
}

html[data-theme="win11"] body::before {
  content: "";
  position: fixed;
  inset: 0;
  background: radial-gradient(ellipse at 30% 0%, rgba(0,120,212,0.06) 0%, transparent 60%);
  pointer-events: none;
  z-index: 0;
}

/* ── Layout ── */

html[data-theme="win11"] .layout-main {
  background: #f0f0f0;
  position: relative;
  z-index: 1;
}

/* ── Header (Mica material) ── */

html[data-theme="win11"] .header {
  background: rgba(243, 243, 243, 0.92);
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
  -webkit-backdrop-filter: blur(20px) saturate(1.5);
  backdrop-filter: blur(20px) saturate(1.5);
}

html[data-theme="win11"] .header-logo-img {
  filter: brightness(0);
}

html[data-theme="win11"] .header-logo-suffix {
  color: #0078D4;
  border-left-color: rgba(0, 0, 0, 0.1);
  font-family: 'Segoe UI Variable', 'Segoe UI', sans-serif;
  font-weight: 600;
}

html[data-theme="win11"] .header-beta-badge {
  background: #0078D4;
  color: #ffffff;
  border: none;
  border-radius: 4px;
  box-shadow: none;
  animation: none;
  font-family: 'Segoe UI Variable', 'Segoe UI', sans-serif;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
}

html[data-theme="win11"] .menu-toggle {
  color: #1a1a1a;
}

html[data-theme="win11"] .menu-toggle:hover {
  color: #0078D4;
  text-shadow: none;
}

html[data-theme="win11"] .header-user-info,
html[data-theme="win11"] .header-user-name,
html[data-theme="win11"] .user-name { color: #1a1a1a; font-weight: 600; }
html[data-theme="win11"] .header-user-role,
html[data-theme="win11"] .user-role { color: #767676; font-size: 0.8em; }

/* Logout buttons */
html[data-theme="win11"] .btn-logout,
html[data-theme="win11"] .logout-button {
  background: transparent;
  color: #1a1a1a;
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 6px;
  font-family: 'Segoe UI Variable', 'Segoe UI', sans-serif;
  font-size: 13px;
}

html[data-theme="win11"] .btn-logout:hover,
html[data-theme="win11"] .logout-button:hover {
  background: rgba(0, 0, 0, 0.05);
  border-color: rgba(0, 0, 0, 0.2);
  box-shadow: none;
  color: #1a1a1a;
}

html[data-theme="win11"] .btn-export-pdf {
  background: transparent;
  color: #0078D4;
  border: 1px solid rgba(0, 120, 212, 0.35);
  border-radius: 6px;
}

html[data-theme="win11"] .btn-export-pdf:hover {
  background: rgba(0, 120, 212, 0.06);
  border-color: #0078D4;
  color: #005FA3;
  box-shadow: none;
}

/* ── User avatar ── */

html[data-theme="win11"] .user-avatar {
  background: #0078D4;
  border: none;
  color: #ffffff;
  box-shadow: 0 2px 6px rgba(0, 120, 212, 0.3);
  border-radius: 50%;
  font-weight: 600;
}

/* ── Sidebar (Acrylic) ── */

html[data-theme="win11"] .sidebar {
  background: rgba(238, 238, 238, 0.85);
  border-right: 1px solid rgba(0, 0, 0, 0.06);
  -webkit-backdrop-filter: blur(20px) saturate(1.5);
  backdrop-filter: blur(20px) saturate(1.5);
}

html[data-theme="win11"] .nav-link {
  color: #1a1a1a;
  border-left: 3px solid transparent;
  font-family: 'Segoe UI Variable', 'Segoe UI', sans-serif;
  font-size: 13px;
  border-radius: 6px;
  margin: 1px 6px;
  transition: background 0.15s, color 0.15s;
}

html[data-theme="win11"] .nav-link:hover {
  background: rgba(0, 0, 0, 0.05);
  color: #1a1a1a;
  border-left-color: transparent;
  box-shadow: none;
}

html[data-theme="win11"] .nav-link.active {
  background: rgba(0, 120, 212, 0.1);
  color: #0078D4;
  border-left-color: #0078D4;
  box-shadow: none;
  font-weight: 600;
}

html[data-theme="win11"] .nav-section-title {
  color: #767676;
  font-family: 'Segoe UI Variable', 'Segoe UI', sans-serif;
  font-size: 11px;
  font-weight: 600;
  font-style: normal;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

html[data-theme="win11"] .sidebar-icon {
  color: inherit;
}

/* ── Scrollbars ── */

html[data-theme="win11"] ::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

html[data-theme="win11"] ::-webkit-scrollbar-track {
  background: transparent;
}

html[data-theme="win11"] ::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 10px;
  border: 2px solid transparent;
  background-clip: padding-box;
}

html[data-theme="win11"] ::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.35);
  background-clip: padding-box;
}

/* ── Cards y paneles (Fluent card) ── */

html[data-theme="win11"] .card,
html[data-theme="win11"] .dashboard-card,
html[data-theme="win11"] .summary-card,
html[data-theme="win11"] .stat-card,
html[data-theme="win11"] .section-card,
html[data-theme="win11"] .detail-card,
html[data-theme="win11"] .info-card,
html[data-theme="win11"] .monitoring-card,
html[data-theme="win11"] .report-card {
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  border-radius: 12px;
  color: #1a1a1a;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

html[data-theme="win11"] .card-header,
html[data-theme="win11"] .dashboard-card-header,
html[data-theme="win11"] .section-header,
html[data-theme="win11"] .panel-header,
html[data-theme="win11"] .modal-header {
  background: transparent;
  color: #1a1a1a;
  font-weight: 700;
  font-family: 'Segoe UI Variable', 'Segoe UI', sans-serif;
  font-size: 14px;
  border-radius: 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  padding: 12px 16px;
}

html[data-theme="win11"] .card-title,
html[data-theme="win11"] .section-title,
html[data-theme="win11"] .panel-title {
  color: #1a1a1a;
  font-weight: 700;
  font-family: 'Segoe UI Variable', 'Segoe UI', sans-serif;
}

/* ── Botones (Fluent style) ── */

html[data-theme="win11"] button,
html[data-theme="win11"] .btn,
html[data-theme="win11"] .btn-primary,
html[data-theme="win11"] .btn-secondary {
  background: rgba(255, 255, 255, 0.7);
  color: #1a1a1a;
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 6px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
  font-family: 'Segoe UI Variable', 'Segoe UI', sans-serif;
  font-size: 13px;
  font-weight: 400;
  cursor: pointer;
  transition: background 0.1s, box-shadow 0.1s;
  padding: 5px 16px;
  min-height: 32px;
}

html[data-theme="win11"] .btn-primary {
  background: #0078D4;
  color: #ffffff;
  border-color: #0067B8;
  box-shadow: 0 1px 2px rgba(0, 120, 212, 0.3);
}

html[data-theme="win11"] button:hover,
html[data-theme="win11"] .btn:hover {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.18);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
  color: #1a1a1a;
}

html[data-theme="win11"] .btn-primary:hover {
  background: #006CBE;
  color: #ffffff;
  border-color: #005EA6;
  box-shadow: 0 2px 6px rgba(0, 120, 212, 0.4);
}

html[data-theme="win11"] .btn-danger {
  background: rgba(209, 52, 56, 0.08);
  color: #d13438;
  border-color: rgba(209, 52, 56, 0.3);
  border-radius: 6px;
}

html[data-theme="win11"] .btn-danger:hover {
  background: #d13438;
  color: #ffffff;
}

html[data-theme="win11"] .btn-success {
  background: rgba(16, 124, 16, 0.08);
  color: #107c10;
  border-color: rgba(16, 124, 16, 0.3);
  border-radius: 6px;
}

html[data-theme="win11"] button:active,
html[data-theme="win11"] .btn:active {
  background: rgba(0, 0, 0, 0.07);
  box-shadow: none;
  transform: scale(0.99);
}

html[data-theme="win11"] button:disabled,
html[data-theme="win11"] .btn:disabled {
  color: #a0a0a0;
  background: rgba(0, 0, 0, 0.03);
  border-color: rgba(0, 0, 0, 0.06);
  cursor: default;
  box-shadow: none;
}

/* ── Inputs (Fluent) ── */

html[data-theme="win11"] input,
html[data-theme="win11"] textarea,
html[data-theme="win11"] select,
html[data-theme="win11"] .input,
html[data-theme="win11"] .form-control {
  background: #ffffff;
  color: #1a1a1a;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 6px;
  font-family: 'Segoe UI Variable', 'Segoe UI', sans-serif;
  font-size: 13px;
  box-shadow: none;
  padding: 5px 10px;
  transition: border-color 0.15s, box-shadow 0.15s;
}

html[data-theme="win11"] input:focus,
html[data-theme="win11"] textarea:focus,
html[data-theme="win11"] select:focus {
  outline: none;
  border-color: #0078D4;
  box-shadow: 0 0 0 2px rgba(0, 120, 212, 0.2);
}

html[data-theme="win11"] input::selection,
html[data-theme="win11"] textarea::selection {
  background: rgba(0, 120, 212, 0.2);
  color: #1a1a1a;
}

html[data-theme="win11"] label,
html[data-theme="win11"] .form-label {
  color: #1a1a1a;
  font-family: 'Segoe UI Variable', 'Segoe UI', sans-serif;
  font-size: 13px;
  font-weight: 600;
}

/* ── Tablas ── */

html[data-theme="win11"] table,
html[data-theme="win11"] .data-table,
html[data-theme="win11"] .inventory-table,
html[data-theme="win11"] .users-table,
html[data-theme="win11"] .report-table,
html[data-theme="win11"] .pos-sales-table,
html[data-theme="win11"] .pos-customers-table {
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 8px;
  border-collapse: separate;
  border-spacing: 0;
  font-family: 'Segoe UI Variable', 'Segoe UI', sans-serif;
  font-size: 13px;
  color: #1a1a1a;
  overflow: hidden;
}

html[data-theme="win11"] th,
html[data-theme="win11"] thead td,
html[data-theme="win11"] .data-table th,
html[data-theme="win11"] .inventory-table th,
html[data-theme="win11"] .users-table th,
html[data-theme="win11"] .report-table th {
  background: #f5f5f5;
  color: #1a1a1a;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  font-weight: 600;
  font-size: 12px;
  padding: 8px 12px;
  text-transform: none;
}

html[data-theme="win11"] td,
html[data-theme="win11"] .data-table td,
html[data-theme="win11"] .inventory-table td,
html[data-theme="win11"] .users-table td,
html[data-theme="win11"] .report-table td {
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  padding: 6px 12px;
  color: #1a1a1a;
  background: transparent;
}

html[data-theme="win11"] tr:hover td {
  background: rgba(0, 120, 212, 0.04);
}

/* ── Modales (Fluent dialog) ── */

html[data-theme="win11"] .modal,
html[data-theme="win11"] .modal-overlay,
html[data-theme="win11"] .modal-backdrop,
html[data-theme="win11"] .modal-content {
  background: rgba(0, 0, 0, 0.3);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}

html[data-theme="win11"] .modal-dialog > *,
html[data-theme="win11"] .modal-box > *,
html[data-theme="win11"] .modal-content-inner,
html[data-theme="win11"] .modal-window,
html[data-theme="win11"] .confirm-modal-box,
html[data-theme="win11"] .sync-confirm-box,
html[data-theme="win11"] .ba-modal,
html[data-theme="win11"] .pos-modal {
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid rgba(0, 0, 0, 0.1);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.18);
  border-radius: 12px;
  color: #1a1a1a;
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
}

/* ── Badges y chips ── */

html[data-theme="win11"] .badge,
html[data-theme="win11"] .chip,
html[data-theme="win11"] .status-badge,
html[data-theme="win11"] .brand-chip {
  background: #e8f0fe;
  color: #0078D4;
  border: none;
  border-radius: 100px;
  font-size: 11px;
  font-family: 'Segoe UI Variable', 'Segoe UI', sans-serif;
  font-weight: 600;
  padding: 2px 10px;
}

html[data-theme="win11"] .badge.success,
html[data-theme="win11"] .badge-success,
html[data-theme="win11"] .status-badge.activo,
html[data-theme="win11"] .chip.active {
  background: rgba(16, 124, 16, 0.1);
  color: #107c10;
}

html[data-theme="win11"] .badge.danger,
html[data-theme="win11"] .badge-danger,
html[data-theme="win11"] .status-badge.inactivo {
  background: rgba(209, 52, 56, 0.1);
  color: #d13438;
}

html[data-theme="win11"] .badge.warning,
html[data-theme="win11"] .badge-warning {
  background: rgba(202, 80, 16, 0.1);
  color: #ca5010;
}

/* ── Dashboard ── */

html[data-theme="win11"] .dashboard-page,
html[data-theme="win11"] .dashboard-container {
  background: #f0f0f0;
}

html[data-theme="win11"] .dashboard-card {
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  border-radius: 12px;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

html[data-theme="win11"] .dashboard-card-title,
html[data-theme="win11"] .dashboard-title {
  background: transparent;
  color: #1a1a1a;
  font-weight: 700;
  font-family: 'Segoe UI Variable', 'Segoe UI', sans-serif;
  font-size: 15px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  padding-bottom: 8px;
  margin-bottom: 12px;
}

html[data-theme="win11"] .dashboard-stat-value,
html[data-theme="win11"] .stat-number {
  color: #0078D4;
  font-weight: 700;
}

html[data-theme="win11"] .dashboard-stat-label,
html[data-theme="win11"] .stat-label {
  color: #767676;
  font-size: 12px;
}

/* ── Página genérica ── */

html[data-theme="win11"] .page-container,
html[data-theme="win11"] .page-content,
html[data-theme="win11"] .content-area,
html[data-theme="win11"] .main-content {
  background: #f0f0f0;
  color: #1a1a1a;
}

html[data-theme="win11"] h1,
html[data-theme="win11"] h2,
html[data-theme="win11"] h3,
html[data-theme="win11"] h4 {
  color: #1a1a1a;
  font-family: 'Segoe UI Variable', 'Segoe UI', sans-serif;
  font-weight: 700;
}

html[data-theme="win11"] .page-title {
  color: #1a1a1a;
  font-family: 'Segoe UI Variable', 'Segoe UI', sans-serif;
  font-weight: 700;
  font-size: 20px;
}

html[data-theme="win11"] .page-subtitle {
  color: #767676;
  font-size: 13px;
}

/* ── Links ── */

html[data-theme="win11"] a {
  color: #0078D4;
  text-decoration: none;
}

html[data-theme="win11"] a:hover {
  color: #005FA3;
  text-decoration: underline;
}

html[data-theme="win11"] .text-muted,
html[data-theme="win11"] .text-secondary {
  color: #767676;
}

/* ── Dropdown ── */

html[data-theme="win11"] .dropdown,
html[data-theme="win11"] .dropdown-menu {
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  color: #1a1a1a;
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
}

html[data-theme="win11"] .dropdown-item:hover {
  background: rgba(0, 120, 212, 0.06);
  color: #0078D4;
  border-radius: 4px;
}

/* ── Alertas / banner de mock ── */

html[data-theme="win11"] .alert,
html[data-theme="win11"] .alert-warning,
html[data-theme="win11"] .mock-banner,
html[data-theme="win11"] .MockDataBanner,
html[data-theme="win11"] .mock-data-banner {
  background: rgba(255, 244, 206, 0.95);
  color: #1a1a1a;
  border: 1px solid rgba(202, 80, 16, 0.3);
  border-radius: 8px;
  font-family: 'Segoe UI Variable', 'Segoe UI', sans-serif;
  font-size: 13px;
  box-shadow: 0 2px 8px rgba(202, 80, 16, 0.1);
}

html[data-theme="win11"] .alert-error,
html[data-theme="win11"] .alert-danger {
  background: rgba(253, 231, 233, 0.95);
  color: #d13438;
  border-color: rgba(209, 52, 56, 0.3);
}

html[data-theme="win11"] .alert-success {
  background: rgba(223, 246, 221, 0.95);
  color: #107c10;
  border-color: rgba(16, 124, 16, 0.3);
}

/* ── Progress bars ── */

html[data-theme="win11"] .progress,
html[data-theme="win11"] .progress-bar-container {
  background: rgba(0, 0, 0, 0.06);
  border: none;
  border-radius: 100px;
  height: 4px;
}

html[data-theme="win11"] .progress-fill,
html[data-theme="win11"] .progress-bar {
  background: #0078D4;
  border-radius: 100px;
}

/* ── Inventory / table wrappers ── */

html[data-theme="win11"] .inventory-page,
html[data-theme="win11"] .inventory-container {
  background: #f0f0f0;
}

html[data-theme="win11"] .inventory-table-wrapper,
html[data-theme="win11"] .table-wrapper {
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 12px;
  overflow: hidden;
}

html[data-theme="win11"] .tr-search-input,
html[data-theme="win11"] .search-input,
html[data-theme="win11"] .filter-input {
  background: #ffffff;
  color: #1a1a1a;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 6px;
  font-family: 'Segoe UI Variable', 'Segoe UI', sans-serif;
  font-size: 13px;
}

html[data-theme="win11"] .btn-tr-refresh,
html[data-theme="win11"] .btn-refresh {
  background: rgba(255, 255, 255, 0.7);
  color: #1a1a1a;
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 6px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}

html[data-theme="win11"] .btn-tr-refresh:hover,
html[data-theme="win11"] .btn-refresh:hover {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.18);
}

html[data-theme="win11"] .status-active,
html[data-theme="win11"] .status-activo { color: #107c10; font-weight: 600; }
html[data-theme="win11"] .status-inactive,
html[data-theme="win11"] .status-inactivo,
html[data-theme="win11"] .status-draft  { color: #767676; }

/* ── Profile / Theme picker ── */

html[data-theme="win11"] .profile-themes {
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  border-radius: 12px;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

html[data-theme="win11"] .profile-themes-header {
  color: #1a1a1a;
  font-weight: 700;
  font-family: 'Segoe UI Variable', 'Segoe UI', sans-serif;
}

html[data-theme="win11"] .profile-themes-icon {
  color: #0078D4;
}

html[data-theme="win11"] .profile-theme-option {
  border: 1px solid rgba(0, 0, 0, 0.08);
  background: #ffffff;
  border-radius: 10px;
  transition: border-color 0.15s, box-shadow 0.15s;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

html[data-theme="win11"] .profile-theme-option:hover {
  border-color: #0078D4;
  box-shadow: 0 4px 12px rgba(0, 120, 212, 0.15);
  background: #ffffff;
}

html[data-theme="win11"] .profile-theme-option--active {
  border-color: #0078D4;
  box-shadow: 0 0 0 3px rgba(0, 120, 212, 0.15), 0 4px 12px rgba(0, 120, 212, 0.12);
  background: rgba(0, 120, 212, 0.04);
}

html[data-theme="win11"] .profile-theme-name {
  color: #1a1a1a;
  font-family: 'Segoe UI Variable', 'Segoe UI', sans-serif;
  font-size: 12px;
}

html[data-theme="win11"] .profile-theme-option--active .profile-theme-name {
  color: #0078D4;
  font-weight: 700;
}

/* ── Rockstar Widget ── */

html[data-theme="win11"] .rockstar-widget-fab {
  background: #0078D4 !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 8px !important;         /* Fluent square-ish, not football */
  padding: 0.55rem 1.1rem !important;
  box-shadow: 0 4px 16px rgba(0, 120, 212, 0.35) !important;
  font-family: 'Segoe UI Variable', 'Segoe UI', sans-serif !important;
  font-size: 0.88rem !important;
}

html[data-theme="win11"] .rockstar-widget-fab:hover {
  background: #106EBE !important;
  box-shadow: 0 6px 20px rgba(0, 120, 212, 0.45) !important;
}

html[data-theme="win11"] .rockstar-widget-header {
  background: #0078D4 !important;
  color: #ffffff !important;
  font-weight: 600 !important;
  border-radius: 12px 12px 0 0 !important;
  font-family: 'Segoe UI Variable', 'Segoe UI', sans-serif !important;
  font-size: 13px !important;
}

/* Botones de acciones dentro del header (cerrar, minimizar, etc.) */
html[data-theme="win11"] .rockstar-widget-header .actions button {
  background: rgba(255, 255, 255, 0.15) !important;
  color: #ffffff !important;
  border-radius: 6px !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  font-size: 1rem !important;
  padding: 0 !important;
  width: 30px !important;
  height: 30px !important;
  box-sizing: border-box !important;
}
html[data-theme="win11"] .rockstar-widget-header .actions button svg {
  fill: #ffffff !important;
  width: 16px !important;
  height: 16px !important;
  flex-shrink: 0 !important;
}
html[data-theme="win11"] .rockstar-widget-header .actions button svg path {
  fill: #ffffff !important;
}

html[data-theme="win11"] .rockstar-widget-header .actions button:hover {
  background: rgba(255, 255, 255, 0.28) !important;
  opacity: 1 !important;
}

html[data-theme="win11"] .rockstar-widget-panel {
  background: #ffffff !important;
  border: 1px solid rgba(0, 0, 0, 0.1) !important;
  border-radius: 12px !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18) !important;
}

html[data-theme="win11"] .rockstar-widget-messages .message.assistant {
  background: rgba(0, 120, 212, 0.05) !important;
  border-left: 3px solid #0078D4 !important;
  color: #1a1a1a !important;
  border-radius: 0 8px 8px 0 !important;
}

html[data-theme="win11"] .rockstar-widget-messages .message.user {
  background: rgba(0, 120, 212, 0.1) !important;
  color: #1a1a1a !important;
  border-radius: 8px !important;
}

/* ── Monitoring ── */

/* Botones de Monitoring / XRay / Logs — Fluent style estandarizado (todos en un bloque) */

/* Botón Consola AWS — primario (igual que btn-primary) */
html[data-theme="win11"] .btn-monitoring-console,
html[data-theme="win11"] .btn-xray-console,
html[data-theme="win11"] .btn-logs-console {
  background: #0078D4;
  color: #ffffff;
  border: 1px solid #0067B8;
  border-radius: 6px;
  box-shadow: 0 1px 2px rgba(0, 120, 212, 0.3);
  text-decoration: none;
  opacity: 1;
}

html[data-theme="win11"] .btn-monitoring-console:hover,
html[data-theme="win11"] .btn-xray-console:hover,
html[data-theme="win11"] .btn-logs-console:hover {
  background: #006CBE;
  color: #ffffff;
  border-color: #005EA6;
  box-shadow: 0 2px 6px rgba(0, 120, 212, 0.4);
  opacity: 1;
  text-decoration: none;
}

/* Botones secundarios (refresh, filtros, time-range) */
html[data-theme="win11"] .btn-xray-refresh,
html[data-theme="win11"] .btn-logs-refresh,
html[data-theme="win11"] .btn-xray-time,
html[data-theme="win11"] .btn-xray-filter,
html[data-theme="win11"] .btn-logs-time,
html[data-theme="win11"] .btn-logs-level,
html[data-theme="win11"] .btn-logs-group {
  background: rgba(255, 255, 255, 0.7);
  color: #1a1a1a;
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 6px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}

html[data-theme="win11"] .btn-xray-refresh:hover,
html[data-theme="win11"] .btn-logs-refresh:hover,
html[data-theme="win11"] .btn-xray-time:hover,
html[data-theme="win11"] .btn-xray-filter:hover,
html[data-theme="win11"] .btn-logs-time:hover,
html[data-theme="win11"] .btn-logs-level:hover,
html[data-theme="win11"] .btn-logs-group:hover {
  background: rgba(0, 0, 0, 0.04);
  color: #1a1a1a;
  border-color: rgba(0, 0, 0, 0.18);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
}

html[data-theme="win11"] .btn-xray-time.active,
html[data-theme="win11"] .btn-xray-filter.active,
html[data-theme="win11"] .btn-logs-time.active,
html[data-theme="win11"] .btn-logs-level.active,
html[data-theme="win11"] .btn-logs-group.active {
  background: #0078D4;
  color: #ffffff;
  border-color: #0067B8;
  box-shadow: 0 1px 2px rgba(0, 120, 212, 0.3);
}

/* Botones de monitoreo — Fluent style estandarizado */
html[data-theme="win11"] .btn-monitoring-refresh {
  background: rgba(255, 255, 255, 0.7);
  color: #1a1a1a;
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 6px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}

html[data-theme="win11"] .btn-monitoring-refresh:hover {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.18);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
  color: #1a1a1a;
}

html[data-theme="win11"] .btn-monitoring-console {
  background: #0078D4;
  color: #ffffff;
  border: 1px solid #0067B8;
  border-radius: 6px;
  box-shadow: 0 1px 2px rgba(0, 120, 212, 0.3);
  text-decoration: none;
}

html[data-theme="win11"] .btn-monitoring-console:hover {
  background: #006CBE;
  color: #ffffff;
  border-color: #005EA6;
  box-shadow: 0 2px 6px rgba(0, 120, 212, 0.4);
  opacity: 1;
  text-decoration: none;
}

html[data-theme="win11"] .btn-metric-filter,
html[data-theme="win11"] .btn-time-range {
  background: rgba(255, 255, 255, 0.7);
  color: #1a1a1a;
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 6px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}

html[data-theme="win11"] .btn-metric-filter:hover,
html[data-theme="win11"] .btn-time-range:hover {
  background: rgba(0, 0, 0, 0.04);
  color: #1a1a1a;
  border-color: rgba(0, 0, 0, 0.18);
}

html[data-theme="win11"] .btn-metric-filter.active,
html[data-theme="win11"] .btn-time-range.active {
  background: #0078D4;
  color: #ffffff;
  border-color: #0067B8;
  box-shadow: 0 1px 2px rgba(0, 120, 212, 0.3);
}

html[data-theme="win11"] .monitoring-page,
html[data-theme="win11"] .monitoring-container {
  background: #f0f0f0;
}

html[data-theme="win11"] .monitoring-card {
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  border-radius: 12px;
  color: #1a1a1a;
}

/* ── Pagination ── */

html[data-theme="win11"] .page-size-btn,
html[data-theme="win11"] .pagination-btn {
  background: rgba(255, 255, 255, 0.7);
  color: #1a1a1a;
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 6px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
  font-family: 'Segoe UI Variable', 'Segoe UI', sans-serif;
  font-size: 12px;
}

html[data-theme="win11"] .page-size-btn:hover,
html[data-theme="win11"] .pagination-btn:hover {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.18);
  color: #1a1a1a;
}

html[data-theme="win11"] .page-size-btn.active,
html[data-theme="win11"] .pagination-btn.active {
  background: #0078D4;
  color: #ffffff;
  border-color: #0067B8;
  box-shadow: 0 2px 6px rgba(0, 120, 212, 0.3);
}

/* ── Toggle / switch ── */

html[data-theme="win11"] .switch,
html[data-theme="win11"] .toggle {
  background: rgba(0, 0, 0, 0.15);
  border: none;
  border-radius: 100px;
}

html[data-theme="win11"] .switch.active,
html[data-theme="win11"] .toggle.active,
html[data-theme="win11"] input:checked + .switch,
html[data-theme="win11"] input:checked + .slider {
  background: #0078D4;
}

/* ── Dividers ── */

html[data-theme="win11"] hr,
html[data-theme="win11"] .divider {
  border: none;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}

/* ── Checkbox / Radio ── */

html[data-theme="win11"] input[type="checkbox"],
html[data-theme="win11"] input[type="radio"] {
  accent-color: #0078D4;
}

/* ═══════════════════════════════════════════════════════════════════════════
   TEMA: Windows 95
   Paleta clásica: gris plata #c0c0c0, azul marino #000080, negro #000000
   Botones biselados, bordes 3D, fuente pixel-era
   ═══════════════════════════════════════════════════════════════════════════ */

html[data-theme="win95"] {
  --primary-color:      #000080;
  --primary-dark:       #00007a;
  --primary-light:      #1084d0;
  --secondary-color:    #c0c0c0;
  --accent-color:       #000080;
  --text-primary:       #000000;
  --text-secondary:     #404040;
  --text-light:         #808080;
  --bg-primary:         #c0c0c0;
  --bg-secondary:       #d4d0c8;
  --bg-dark:            #808080;
  --border-color:       #808080;
  --success:            #008000;
  --warning:            #808000;
  --danger:             #800000;
  --info:               #000080;
  --card-bg:            #c0c0c0;
  --input-bg:           #ffffff;
  --sidebar-bg:         #c0c0c0;
  --table-header-bg:    #000080;
  --hover-bg:           #d4d0c8;
  --badge-bg:           #c0c0c0;
  --img-placeholder-bg: #d4d0c8;
  --error-color:        #800000;
  --btn-primary-text:   #ffffff;
}

/* Mixin de borde biselado elevado (botones, paneles) */
/* raised:  top/left blanco, bottom/right gris oscuro */
/* sunken:  top/left gris oscuro, bottom/right blanco */

html[data-theme="win95"] body {
  background: #008080;   /* teal clásico del escritorio */
  color: #000000;
  font-family: 'Tahoma', 'MS Sans Serif', Arial, sans-serif;
  font-size: 13px;
  font-weight: 400;
}

html[data-theme="win95"] body::before {
  content: none;
}

/* ── Layout ── */

html[data-theme="win95"] .layout-main {
  background: #008080;
}

/* ── Header (barra de título de la ventana principal) ── */

html[data-theme="win95"] .header {
  background: linear-gradient(to right, #000080 0%, #1084d0 100%);
  border-bottom: 2px solid #000000;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  padding: 3px 6px;
}

html[data-theme="win95"] .header-logo-suffix {
  color: #ffffff;
  border-left-color: rgba(255, 255, 255, 0.4);
  font-family: 'Tahoma', Arial, sans-serif;
  font-weight: 700;
  font-style: normal;
}

html[data-theme="win95"] .header-beta-badge {
  background: #c0c0c0;
  color: #000000;
  border: 2px solid;
  border-color: #ffffff #808080 #808080 #ffffff;
  box-shadow: none;
  animation: none;
  font-family: 'Tahoma', Arial, sans-serif;
  font-size: 10px;
  font-weight: 700;
  border-radius: 0;
  padding: 1px 4px;
}

html[data-theme="win95"] .menu-toggle {
  color: #ffffff;
}

html[data-theme="win95"] .menu-toggle:hover {
  color: #c0c0c0;
  text-shadow: none;
}

html[data-theme="win95"] .header-user-info,
html[data-theme="win95"] .header-user-name,
html[data-theme="win95"] .user-name { color: #ffffff; font-weight: 700; }
html[data-theme="win95"] .header-user-role,
html[data-theme="win95"] .user-role { color: rgba(255,255,255,0.8); font-size: 0.8em; }

/* Logout / logout button */
html[data-theme="win95"] .btn-logout,
html[data-theme="win95"] .logout-button {
  background: #c0c0c0;
  color: #000000;
  border: 2px solid;
  border-color: #ffffff #808080 #808080 #ffffff;
  border-radius: 0;
  box-shadow: 1px 1px 0 #000000;
  font-family: 'Tahoma', Arial, sans-serif;
  font-size: 12px;
}

html[data-theme="win95"] .btn-logout:hover,
html[data-theme="win95"] .logout-button:hover {
  background: #c0c0c0;
  border-color: #808080 #ffffff #ffffff #808080;
  box-shadow: none;
}

html[data-theme="win95"] .btn-export-pdf {
  background: #c0c0c0;
  color: #000000;
  border: 2px solid;
  border-color: #ffffff #808080 #808080 #ffffff;
  border-radius: 0;
  box-shadow: 1px 1px 0 #000000;
}

html[data-theme="win95"] .btn-export-pdf:hover {
  border-color: #808080 #ffffff #ffffff #808080;
  box-shadow: none;
  color: #000000;
}

/* ── User avatar ── */

html[data-theme="win95"] .user-avatar {
  background: #000080;
  border: 2px solid;
  border-color: #ffffff #808080 #808080 #ffffff;
  color: #ffffff;
  box-shadow: 1px 1px 0 #000000;
  border-radius: 0;
  font-weight: 700;
}

/* ── Sidebar (ventana de navegación) ── */

html[data-theme="win95"] .sidebar {
  background: #c0c0c0;
  border-right: 2px solid;
  border-color: #ffffff #808080 #808080 #ffffff;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

html[data-theme="win95"] .nav-link {
  color: #000000;
  border-left: 2px solid transparent;
  font-family: 'Tahoma', Arial, sans-serif;
  font-size: 12px;
  border-radius: 0;
  transition: none;
}

html[data-theme="win95"] .nav-link:hover {
  background: #000080;
  color: #ffffff;
  border-left-color: #000080;
  box-shadow: none;
}

html[data-theme="win95"] .nav-link.active {
  background: #000080;
  color: #ffffff;
  border-left-color: #1084d0;
  box-shadow: inset 1px 1px 2px rgba(0,0,0,0.3);
  font-weight: 700;
}

html[data-theme="win95"] .nav-section-title {
  color: #000080;
  font-family: 'Tahoma', Arial, sans-serif;
  font-size: 10px;
  font-weight: 700;
  font-style: normal;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

html[data-theme="win95"] .sidebar-icon {
  color: inherit;
}

/* ── Scrollbars ── */

html[data-theme="win95"] ::-webkit-scrollbar {
  width: 16px;
  height: 16px;
}

html[data-theme="win95"] ::-webkit-scrollbar-track {
  background: #c0c0c0;
  border: 1px solid #808080;
}

html[data-theme="win95"] ::-webkit-scrollbar-thumb {
  background: #c0c0c0;
  border: 2px solid;
  border-color: #ffffff #808080 #808080 #ffffff;
  border-radius: 0;
}

html[data-theme="win95"] ::-webkit-scrollbar-button {
  background: #c0c0c0;
  border: 2px solid;
  border-color: #ffffff #808080 #808080 #ffffff;
  display: block;
  height: 16px;
  width: 16px;
}

/* ── Cards y paneles (ventanas flotantes de Windows) ── */

html[data-theme="win95"] .card,
html[data-theme="win95"] .dashboard-card,
html[data-theme="win95"] .summary-card,
html[data-theme="win95"] .stat-card,
html[data-theme="win95"] .section-card,
html[data-theme="win95"] .detail-card,
html[data-theme="win95"] .info-card,
html[data-theme="win95"] .monitoring-card,
html[data-theme="win95"] .report-card {
  background: #c0c0c0;
  border: 2px solid;
  border-color: #ffffff #808080 #808080 #ffffff;
  box-shadow: 2px 2px 0 #000000;
  border-radius: 0;
  color: #000000;
}

/* Barra de título de ventana */
html[data-theme="win95"] .card-header,
html[data-theme="win95"] .dashboard-card-header,
html[data-theme="win95"] .section-header,
html[data-theme="win95"] .panel-header,
html[data-theme="win95"] .modal-header {
  background: linear-gradient(to right, #000080 0%, #1084d0 100%);
  color: #ffffff;
  font-weight: 700;
  font-family: 'Tahoma', Arial, sans-serif;
  font-size: 12px;
  border-radius: 0;
  padding: 3px 6px;
  border-bottom: 1px solid #000000;
}

html[data-theme="win95"] .card-title,
html[data-theme="win95"] .section-title,
html[data-theme="win95"] .panel-title {
  color: #000000;
  font-weight: 700;
  font-family: 'Tahoma', Arial, sans-serif;
}

/* Texto dentro de barras de título azules → siempre blanco, sin excepciones */
html[data-theme="win95"] .card-header h1,
html[data-theme="win95"] .card-header h2,
html[data-theme="win95"] .card-header h3,
html[data-theme="win95"] .card-header h4,
html[data-theme="win95"] .card-header h5,
html[data-theme="win95"] .card-header .card-title,
html[data-theme="win95"] .card-header .section-title,
html[data-theme="win95"] .card-header .panel-title,
html[data-theme="win95"] .dashboard-card-header h1,
html[data-theme="win95"] .dashboard-card-header h2,
html[data-theme="win95"] .dashboard-card-header h3,
html[data-theme="win95"] .dashboard-card-header .card-title,
html[data-theme="win95"] .section-header h1,
html[data-theme="win95"] .section-header h2,
html[data-theme="win95"] .section-header h3,
html[data-theme="win95"] .panel-header h1,
html[data-theme="win95"] .panel-header h2,
html[data-theme="win95"] .panel-header h3,
html[data-theme="win95"] .modal-header h1,
html[data-theme="win95"] .modal-header h2,
html[data-theme="win95"] .modal-header h3 {
  color: #ffffff;
  font-family: 'Tahoma', Arial, sans-serif;
}

/* ── Botones (biselados, sin border-radius) ── */

html[data-theme="win95"] button,
html[data-theme="win95"] .btn,
html[data-theme="win95"] .btn-primary,
html[data-theme="win95"] .btn-secondary,
html[data-theme="win95"] .btn-danger,
html[data-theme="win95"] .btn-success,
html[data-theme="win95"] .btn-warning {
  background: #c0c0c0;
  color: #000000;
  border: 2px solid;
  border-color: #ffffff #808080 #808080 #ffffff;
  border-radius: 0 !important;
  box-shadow: 1px 1px 0 #000000;
  font-family: 'Tahoma', Arial, sans-serif;
  font-size: 12px;
  font-weight: normal;
  cursor: pointer;
  transition: none;
  padding: 3px 12px;
  min-height: 23px;
}

html[data-theme="win95"] button:hover,
html[data-theme="win95"] .btn:hover,
html[data-theme="win95"] .btn-primary:hover,
html[data-theme="win95"] .btn-secondary:hover,
html[data-theme="win95"] .btn-danger:hover,
html[data-theme="win95"] .btn-success:hover,
html[data-theme="win95"] .btn-warning:hover {
  background: #c0c0c0;
  color: #000000;
  box-shadow: 1px 1px 0 #000000;
}

html[data-theme="win95"] button:active,
html[data-theme="win95"] .btn:active,
html[data-theme="win95"] .btn-primary:active {
  border-color: #808080 #ffffff #ffffff #808080;
  box-shadow: none;
  padding: 4px 11px 2px 13px;
}

html[data-theme="win95"] button:disabled,
html[data-theme="win95"] .btn:disabled {
  color: #808080;
  text-shadow: 1px 1px 0 #ffffff;
  border-color: #d4d0c8 #808080 #808080 #d4d0c8;
  cursor: default;
  box-shadow: none;
}

/* ── Inputs y formularios ── */

html[data-theme="win95"] input,
html[data-theme="win95"] textarea,
html[data-theme="win95"] select,
html[data-theme="win95"] .input,
html[data-theme="win95"] .form-control {
  background: #ffffff;
  color: #000000;
  border: 2px solid;
  border-color: #808080 #ffffff #ffffff #808080;
  border-radius: 0;
  font-family: 'Tahoma', Arial, sans-serif;
  font-size: 12px;
  box-shadow: inset 1px 1px 2px rgba(0,0,0,0.2);
  padding: 2px 4px;
}

html[data-theme="win95"] input:focus,
html[data-theme="win95"] textarea:focus,
html[data-theme="win95"] select:focus {
  outline: 1px dotted #000000;
  border-color: #808080 #ffffff #ffffff #808080;
  box-shadow: inset 1px 1px 2px rgba(0,0,0,0.2);
}

html[data-theme="win95"] input::selection,
html[data-theme="win95"] textarea::selection {
  background: #000080;
  color: #ffffff;
}

html[data-theme="win95"] label,
html[data-theme="win95"] .form-label {
  color: #000000;
  font-family: 'Tahoma', Arial, sans-serif;
  font-size: 12px;
  font-weight: 700;
}

/* ── Tablas (estilo spreadsheet clásico) ── */

html[data-theme="win95"] table,
html[data-theme="win95"] .data-table,
html[data-theme="win95"] .inventory-table,
html[data-theme="win95"] .users-table,
html[data-theme="win95"] .report-table,
html[data-theme="win95"] .pos-sales-table,
html[data-theme="win95"] .pos-customers-table {
  background: #ffffff;
  border: 2px solid;
  border-color: #808080 #ffffff #ffffff #808080;
  border-radius: 0;
  border-collapse: collapse;
  font-family: 'Tahoma', Arial, sans-serif;
  font-size: 12px;
  color: #000000;
}

html[data-theme="win95"] th,
html[data-theme="win95"] thead td,
html[data-theme="win95"] .data-table th,
html[data-theme="win95"] .inventory-table th,
html[data-theme="win95"] .users-table th,
html[data-theme="win95"] .report-table th {
  background: #c0c0c0;
  color: #000000;
  border: 1px solid #808080;
  font-weight: 700;
  font-size: 12px;
  padding: 2px 6px;
  border-bottom: 2px solid #808080;
}

html[data-theme="win95"] td,
html[data-theme="win95"] .data-table td,
html[data-theme="win95"] .inventory-table td,
html[data-theme="win95"] .users-table td,
html[data-theme="win95"] .report-table td {
  border: 1px solid #d4d0c8;
  padding: 1px 4px;
  color: #000000;
  background: #ffffff;
}

html[data-theme="win95"] tr:hover td,
html[data-theme="win95"] .data-table tr:hover td,
html[data-theme="win95"] .inventory-table tr:hover td {
  background: #000080;
  color: #ffffff;
}

html[data-theme="win95"] tr:nth-child(even) td {
  background: #f0f0f0;
}

html[data-theme="win95"] tr:nth-child(even):hover td {
  background: #000080;
  color: #ffffff;
}

/* ── Modales ── */

html[data-theme="win95"] .modal,
html[data-theme="win95"] .modal-overlay,
html[data-theme="win95"] .modal-backdrop,
html[data-theme="win95"] .modal-content {
  background: rgba(0, 0, 0, 0.5);
}

html[data-theme="win95"] .modal-dialog,
html[data-theme="win95"] .modal-box,
html[data-theme="win95"] .modal-body,
html[data-theme="win95"] .modal-panel,
html[data-theme="win95"] .confirm-modal,
html[data-theme="win95"] .ba-modal-backdrop,
html[data-theme="win95"] .sync-modal-backdrop,
html[data-theme="win95"] .pos-modal-overlay {
  background: rgba(0, 0, 0, 0.4);
}

html[data-theme="win95"] .modal-dialog > *,
html[data-theme="win95"] .modal-box > *,
html[data-theme="win95"] .modal-content-inner,
html[data-theme="win95"] .modal-window,
html[data-theme="win95"] .confirm-modal-box,
html[data-theme="win95"] .sync-confirm-box,
html[data-theme="win95"] .ba-modal,
html[data-theme="win95"] .pos-modal {
  background: #c0c0c0;
  border: 2px solid;
  border-color: #ffffff #808080 #808080 #ffffff;
  box-shadow: 4px 4px 0 #000000;
  border-radius: 0;
  color: #000000;
}

/* ── Badges y chips ── */

html[data-theme="win95"] .badge,
html[data-theme="win95"] .chip,
html[data-theme="win95"] .status-badge,
html[data-theme="win95"] .brand-chip {
  background: #c0c0c0;
  color: #000000;
  border: 1px solid #808080;
  border-radius: 0;
  font-size: 10px;
  font-family: 'Tahoma', Arial, sans-serif;
}

html[data-theme="win95"] .badge.success,
html[data-theme="win95"] .badge-success,
html[data-theme="win95"] .status-badge.activo,
html[data-theme="win95"] .chip.active {
  background: #008000;
  color: #ffffff;
  border-color: #004000;
}

html[data-theme="win95"] .badge.danger,
html[data-theme="win95"] .badge-danger,
html[data-theme="win95"] .status-badge.inactivo {
  background: #800000;
  color: #ffffff;
  border-color: #400000;
}

html[data-theme="win95"] .badge.warning,
html[data-theme="win95"] .badge-warning {
  background: #808000;
  color: #ffffff;
  border-color: #404000;
}

/* ── Dashboard ── */

html[data-theme="win95"] .dashboard-page,
html[data-theme="win95"] .dashboard-container {
  background: #c0c0c0;
}

html[data-theme="win95"] .dashboard-card {
  background: #c0c0c0;
  border: 2px solid;
  border-color: #ffffff #808080 #808080 #ffffff;
  box-shadow: 2px 2px 0 #000000;
  border-radius: 0;
}

html[data-theme="win95"] .dashboard-card-title,
html[data-theme="win95"] .dashboard-title {
  background: linear-gradient(to right, #000080, #1084d0);
  color: #ffffff;
  font-weight: 700;
  font-family: 'Tahoma', Arial, sans-serif;
  font-size: 12px;
  padding: 3px 6px;
  margin: -1px -1px 8px -1px;
}

html[data-theme="win95"] .dashboard-stat-value,
html[data-theme="win95"] .stat-number {
  color: #000080;
  font-weight: 700;
  font-family: 'Tahoma', Arial, sans-serif;
}

html[data-theme="win95"] .dashboard-stat-label,
html[data-theme="win95"] .stat-label {
  color: #000000;
  font-size: 11px;
}

/* ── Página genérica ── */

html[data-theme="win95"] .page-container,
html[data-theme="win95"] .page-content,
html[data-theme="win95"] .content-area,
html[data-theme="win95"] .main-content {
  background: #c0c0c0;
  color: #000000;
}

html[data-theme="win95"] h1,
html[data-theme="win95"] h2,
html[data-theme="win95"] h3,
html[data-theme="win95"] h4 {
  color: #000000;
  font-family: 'Tahoma', Arial, sans-serif;
  font-weight: 700;
}

html[data-theme="win95"] .page-title {
  color: #000080;
  font-family: 'Tahoma', Arial, sans-serif;
  font-weight: 700;
  font-size: 14px;
}

html[data-theme="win95"] .page-subtitle {
  color: #000000;
  font-size: 12px;
}

/* ── Texto secundario y links ── */

html[data-theme="win95"] a {
  color: #000080;
  text-decoration: underline;
}

html[data-theme="win95"] a:hover {
  color: #1084d0;
}

html[data-theme="win95"] .text-muted,
html[data-theme="win95"] .text-secondary {
  color: #808080;
}

/* ── Dropdown / select boxes ── */

html[data-theme="win95"] .dropdown,
html[data-theme="win95"] .dropdown-menu {
  background: #ffffff;
  border: 2px solid;
  border-color: #808080 #ffffff #ffffff #808080;
  border-radius: 0;
  box-shadow: 2px 2px 0 #000000;
  color: #000000;
}

html[data-theme="win95"] .dropdown-item:hover {
  background: #000080;
  color: #ffffff;
}

/* ── Alertas / banners ── */

html[data-theme="win95"] .alert,
html[data-theme="win95"] .alert-warning,
html[data-theme="win95"] .mock-banner,
html[data-theme="win95"] .MockDataBanner,
html[data-theme="win95"] .mock-data-banner {
  background: #ffff80;
  color: #000000;
  border: 2px solid;
  border-color: #ffffff #808080 #808080 #ffffff;
  border-radius: 0;
  font-family: 'Tahoma', Arial, sans-serif;
  font-size: 12px;
  box-shadow: 2px 2px 0 #000000;
}

html[data-theme="win95"] .alert-error,
html[data-theme="win95"] .alert-danger {
  background: #ff8080;
  color: #000000;
  border-color: #ffffff #800000 #800000 #ffffff;
}

html[data-theme="win95"] .alert-success {
  background: #80ff80;
  color: #000000;
  border-color: #ffffff #008000 #008000 #ffffff;
}

/* ── Progress bars ── */

html[data-theme="win95"] .progress,
html[data-theme="win95"] .progress-bar-container {
  background: #ffffff;
  border: 2px solid;
  border-color: #808080 #ffffff #ffffff #808080;
  border-radius: 0;
  height: 14px;
}

html[data-theme="win95"] .progress-fill,
html[data-theme="win95"] .progress-bar {
  background: #000080;
  border-radius: 0;
}

/* ── Inventory / stock tables ── */

html[data-theme="win95"] .inventory-page,
html[data-theme="win95"] .inventory-container {
  background: #c0c0c0;
}

html[data-theme="win95"] .inventory-table-wrapper,
html[data-theme="win95"] .table-wrapper {
  background: #ffffff;
  border: 2px solid;
  border-color: #808080 #ffffff #ffffff #808080;
  border-radius: 0;
}

html[data-theme="win95"] .tr-search-input,
html[data-theme="win95"] .search-input,
html[data-theme="win95"] .filter-input {
  background: #ffffff;
  color: #000000;
  border: 2px solid;
  border-color: #808080 #ffffff #ffffff #808080;
  border-radius: 0;
  font-family: 'Tahoma', Arial, sans-serif;
  font-size: 12px;
}

html[data-theme="win95"] .btn-tr-refresh,
html[data-theme="win95"] .btn-refresh {
  background: #c0c0c0;
  color: #000000;
  border: 2px solid;
  border-color: #ffffff #808080 #808080 #ffffff;
  border-radius: 0;
  box-shadow: 1px 1px 0 #000000;
}

html[data-theme="win95"] .btn-tr-refresh:hover,
html[data-theme="win95"] .btn-refresh:hover {
  border-color: #808080 #ffffff #ffffff #808080;
  box-shadow: none;
}

/* Filas de tabla en vista de inventario */
html[data-theme="win95"] .inventory-row:hover,
html[data-theme="win95"] .table-row:hover {
  background: #000080;
  color: #ffffff;
}

html[data-theme="win95"] .status-active,
html[data-theme="win95"] .status-activo {
  color: #008000;
  font-weight: 700;
}

html[data-theme="win95"] .status-inactive,
html[data-theme="win95"] .status-inactivo,
html[data-theme="win95"] .status-draft {
  color: #808080;
}

/* ── Profile / Theme picker ── */

/* Tarjetas de perfil (Información Personal, Seguridad, etc.) */
html[data-theme="win95"] .profile-card {
  background: #c0c0c0;
  border: 2px solid;
  border-color: #ffffff #808080 #808080 #ffffff;
  box-shadow: 2px 2px 0 #000000;
  border-radius: 0;
}

html[data-theme="win95"] .card-header {
  border-radius: 0;
  border-bottom-color: #000000;
  margin-bottom: 0;
  padding: 3px 6px;
}

html[data-theme="win95"] .form-group {
  border-bottom-color: #b8b4ac;
}

html[data-theme="win95"] .form-group label {
  color: #000000;
  font-family: 'Tahoma', Arial, sans-serif;
  font-size: 11px;
}

html[data-theme="win95"] .field-value {
  color: #000000;
  font-family: 'Tahoma', Arial, sans-serif;
}

html[data-theme="win95"] .field-hint {
  color: #404040;
}

html[data-theme="win95"] .profile-themes {
  background: #c0c0c0;
  border: 2px solid;
  border-color: #ffffff #808080 #808080 #ffffff;
  box-shadow: 2px 2px 0 #000000;
}

html[data-theme="win95"] .profile-themes-header {
  color: #000080;
  font-weight: 700;
  font-family: 'Tahoma', Arial, sans-serif;
}

html[data-theme="win95"] .profile-themes-icon {
  color: #000080;
}

html[data-theme="win95"] .profile-theme-option {
  border: 2px solid;
  border-color: #ffffff #808080 #808080 #ffffff;
  background: #d4d0c8;
  border-radius: 0;
  transition: none;
}

html[data-theme="win95"] .profile-theme-option:hover {
  border-color: #000080;
  background: #d4d0c8;
  box-shadow: 1px 1px 0 #000000;
}

html[data-theme="win95"] .profile-theme-option--active {
  border-color: #808080 #ffffff #ffffff #808080;
  background: #c0c0c0;
  box-shadow: inset 1px 1px 2px rgba(0,0,0,0.3);
}

html[data-theme="win95"] .profile-theme-name {
  color: #000000;
  font-family: 'Tahoma', Arial, sans-serif;
  font-size: 11px;
}

html[data-theme="win95"] .profile-theme-option--active .profile-theme-name {
  color: #000080;
  font-weight: 700;
}

/* ── Rockstar Widget ── */

html[data-theme="win95"] .rockstar-widget-header {
  background: linear-gradient(to right, #000080, #1084d0) !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  border-radius: 0 !important;
  font-family: 'Tahoma', Arial, sans-serif !important;
  font-size: 12px !important;
}
html[data-theme="win95"] .rockstar-widget-header .actions button {
  background: #c0c0c0 !important;
  color: #000000 !important;
  border: 2px solid !important;
  border-color: #ffffff #808080 #808080 #ffffff !important;
  border-radius: 0 !important;
  box-shadow: 1px 1px 0 #000000 !important;
  font-family: 'Tahoma', Arial, sans-serif !important;
  font-size: 1rem !important;
  padding: 0 !important;
  width: 30px !important;
  height: 30px !important;
  box-sizing: border-box !important;
}
html[data-theme="win95"] .rockstar-widget-header .actions button svg {
  fill: #000000 !important;
  width: 16px !important;
  height: 16px !important;
  flex-shrink: 0 !important;
}
html[data-theme="win95"] .rockstar-widget-header .actions button svg path {
  fill: #000000 !important;
}
html[data-theme="win95"] .rockstar-widget-header .actions button:hover {
  border-color: #808080 #ffffff #ffffff #808080 !important;
  box-shadow: none !important;
}

html[data-theme="win95"] .rockstar-widget-fab {
  background: #c0c0c0 !important;
  color: #000000 !important;
  border: 2px solid !important;
  border-color: #ffffff #808080 #808080 #ffffff !important;
  border-radius: 0 !important;
  box-shadow: 2px 2px 0 #000000 !important;
}

html[data-theme="win95"] .rockstar-widget-messages .message.assistant {
  background: #d4d0c8 !important;
  border-left: 3px solid #000080 !important;
  color: #000000 !important;
  border-radius: 0 !important;
  font-family: 'Tahoma', Arial, sans-serif !important;
}

html[data-theme="win95"] .rockstar-widget-messages .message.user {
  background: #000080 !important;
  color: #ffffff !important;
  border-radius: 0 !important;
}

/* ── Monitoring / Charts / XRay / Logs — botones estandarizados win95 ── */

/* Botones normales (refresh, filtros, time range) */
html[data-theme="win95"] .btn-monitoring-refresh,
html[data-theme="win95"] .btn-xray-refresh,
html[data-theme="win95"] .btn-logs-refresh,
html[data-theme="win95"] .btn-metric-filter,
html[data-theme="win95"] .btn-xray-filter,
html[data-theme="win95"] .btn-xray-time,
html[data-theme="win95"] .btn-logs-time,
html[data-theme="win95"] .btn-logs-level,
html[data-theme="win95"] .btn-logs-group,
html[data-theme="win95"] .btn-time-range {
  background: #c0c0c0;
  color: #000000;
  border: 2px solid;
  border-color: #ffffff #808080 #808080 #ffffff;
  border-radius: 0;
  box-shadow: 1px 1px 0 #000000;
  font-family: 'Tahoma', Arial, sans-serif;
  font-size: 12px;
  transition: none;
}

html[data-theme="win95"] .btn-monitoring-refresh:hover,
html[data-theme="win95"] .btn-xray-refresh:hover,
html[data-theme="win95"] .btn-logs-refresh:hover,
html[data-theme="win95"] .btn-metric-filter:hover,
html[data-theme="win95"] .btn-xray-filter:hover,
html[data-theme="win95"] .btn-xray-time:hover,
html[data-theme="win95"] .btn-logs-time:hover,
html[data-theme="win95"] .btn-logs-level:hover,
html[data-theme="win95"] .btn-logs-group:hover,
html[data-theme="win95"] .btn-time-range:hover {
  background: #d4d0c8;
  color: #000000;
  box-shadow: 1px 1px 0 #000000;
}

/* Estado activo — sunken (seleccionado) */
html[data-theme="win95"] .btn-metric-filter.active,
html[data-theme="win95"] .btn-xray-filter.active,
html[data-theme="win95"] .btn-xray-time.active,
html[data-theme="win95"] .btn-logs-time.active,
html[data-theme="win95"] .btn-logs-level.active,
html[data-theme="win95"] .btn-logs-group.active,
html[data-theme="win95"] .btn-time-range.active {
  background: #000080;
  color: #ffffff;
  border-color: #808080 #ffffff #ffffff #808080;
  box-shadow: inset 1px 1px 2px rgba(0,0,0,0.4);
}

/* Botón Consola AWS — primario, barra de título win95 */
html[data-theme="win95"] .btn-monitoring-console,
html[data-theme="win95"] .btn-xray-console,
html[data-theme="win95"] .btn-logs-console {
  background: #000080;
  color: #ffffff;
  border: 2px solid;
  border-color: #ffffff #00003a #00003a #ffffff;
  border-radius: 0;
  box-shadow: 1px 1px 0 #000000;
  font-family: 'Tahoma', Arial, sans-serif;
  font-size: 12px;
  text-decoration: none;
  transition: none;
  opacity: 1;
}

html[data-theme="win95"] .btn-monitoring-console:hover,
html[data-theme="win95"] .btn-xray-console:hover,
html[data-theme="win95"] .btn-logs-console:hover {
  background: #1084d0;
  color: #ffffff;
  opacity: 1;
  text-decoration: none;
}

html[data-theme="win95"] .monitoring-page,
html[data-theme="win95"] .monitoring-container {
  background: #c0c0c0;
}

html[data-theme="win95"] .monitoring-card {
  background: #c0c0c0;
  border: 2px solid;
  border-color: #ffffff #808080 #808080 #ffffff;
  box-shadow: 2px 2px 0 #000000;
  border-radius: 0;
  color: #000000;
}

/* ── Pagination ── */

html[data-theme="win95"] .page-size-btn,
html[data-theme="win95"] .pagination-btn {
  background: #c0c0c0;
  color: #000000;
  border: 2px solid;
  border-color: #ffffff #808080 #808080 #ffffff;
  border-radius: 0;
  box-shadow: 1px 1px 0 #000000;
  font-family: 'Tahoma', Arial, sans-serif;
  font-size: 11px;
  transition: none;
}

html[data-theme="win95"] .page-size-btn:hover,
html[data-theme="win95"] .pagination-btn:hover {
  background: #d4d0c8;
  color: #000000;
  box-shadow: 1px 1px 0 #000000;
}

html[data-theme="win95"] .page-size-btn.active,
html[data-theme="win95"] .pagination-btn.active {
  background: #000080;
  color: #ffffff;
  border-color: #808080 #ffffff #ffffff #808080;
  box-shadow: inset 1px 1px 2px rgba(0,0,0,0.4);
}

/* ── Checkbox / Radio ── */

html[data-theme="win95"] input[type="checkbox"],
html[data-theme="win95"] input[type="radio"] {
  accent-color: #000080;
}

/* ── Dividers ── */

html[data-theme="win95"] hr,
html[data-theme="win95"] .divider {
  border: none;
  border-top: 1px solid #808080;
  border-bottom: 1px solid #ffffff;
}

/* ── Toggle switches ── */

html[data-theme="win95"] .switch,
html[data-theme="win95"] .toggle {
  background: #808080;
  border: 2px solid;
  border-color: #808080 #ffffff #ffffff #808080;
  border-radius: 0;
}

html[data-theme="win95"] .switch.active,
html[data-theme="win95"] .toggle.active,
html[data-theme="win95"] input:checked + .switch,
html[data-theme="win95"] input:checked + .slider {
  background: #000080;
}

/* ── Cabeceras de tabla / lista (elementos que usan --table-header-bg) ── */
/* En win95 --table-header-bg=#000080 pero el texto quedaría oscuro sobre azul.
   Forzamos el estilo clásico de columna de Windows 95: gris con texto negro.  */

html[data-theme="win95"] .inventory-list-header {
  background: #c0c0c0;
  color: #000000;
  border-bottom: 2px solid #808080;
  border-top: 1px solid #ffffff;
}

html[data-theme="win95"] .inv-list thead tr,
html[data-theme="win95"] .phys-table thead tr,
html[data-theme="win95"] .activity-log-table thead,
html[data-theme="win95"] .psc-table thead,
html[data-theme="win95"] .pos-sales-table thead {
  background: #c0c0c0;
}

/* Monitoring section headers — en win95 usar borde azul con fondo gris */
html[data-theme="win95"] .monitoring-section-header {
  background: #d4d0c8;
  color: #000000;
  border: 2px solid;
  border-color: #ffffff #808080 #808080 #ffffff;
  border-left: 6px solid #000080;
  border-radius: 0;
}

/* Dashboard section titles */
html[data-theme="win95"] .dashboard-section-title {
  color: #000000;
  font-family: 'Tahoma', Arial, sans-serif;
  font-weight: 700;
}

html[data-theme="win95"] .dashboard-section-subtitle {
  background: #d4d0c8;
  color: #404040;
  border-radius: 0;
  border: 1px solid #808080;
}



.layout {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.layout-container {
  display: flex;
  flex: 1;
}

.layout-main {
  flex: 1;
  padding: 2rem;
  margin-left: 250px;
  transition: margin-left 0.3s ease;
  background-color: var(--bg-secondary);
  /* prevent any page content from causing body-level horizontal scroll */
  overflow-x: hidden;
}

.layout-main.sidebar-closed {
  margin-left: 0;
}

.layout-content {
  max-width: 1400px;
  margin: 0 auto;
}

/* Header */
.header {
  background-color: #000;
  color: white;
  padding: 0 2rem;
  height: 70px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  position: sticky;
  top: 0;
  z-index: 100;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.menu-toggle {
  background: none;
  border: none;
  color: white;
  font-size: 1.5rem;
  cursor: pointer;
  padding: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  transition: background-color 0.2s;
}

.menu-toggle:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

.header-logo {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  text-decoration: none;
  color: white;
}

.logo-text {
  display: none;
}

.header-logo-img {
  height: 48px;
  width: auto;
  filter: brightness(0) invert(1);
  display: block;
}

.header-logo-suffix {
  color: rgba(255, 255, 255, 0.55);
  font-size: 0.95rem;
  font-weight: 400;
  letter-spacing: 0.03em;
  white-space: nowrap;
  margin-left: 0.5rem;
  padding-left: 0.75rem;
  border-left: 1px solid rgba(255,255,255,0.2);
}

.header-beta-badge {
  background: linear-gradient(135deg, #f59e0b, #ef4444, #a855f7, #3b82f6);
  background-size: 300% 300%;
  animation: betaShimmer 3s ease infinite;
  color: #fff;
  font-size: 0.72rem;
  font-weight: 800;
  padding: 0.22rem 0.6rem;
  border-radius: 20px;
  letter-spacing: 0.1em;
  vertical-align: middle;
  margin-left: 0.4rem;
  text-shadow: 0 1px 2px rgba(0,0,0,0.3);
  box-shadow: 0 0 8px rgba(245, 158, 11, 0.4);
}

@keyframes betaShimmer {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.header-right {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.user-info {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  position: relative;
  cursor: pointer;
}

.user-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: #333;
  border: 2px solid #FF0806;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  color: white;
}

.user-details {
  display: flex;
  flex-direction: column;
}

.user-name {
  font-weight: 600;
  font-size: 0.95rem;
  color: white;
}

.user-role {
  font-size: 0.8rem;
  color: #aaa;
  text-transform: capitalize;
}

/* User hover tooltip */
.user-tooltip {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 0.75rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  min-width: 200px;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity 0.2s, visibility 0.2s, transform 0.2s;
  pointer-events: none;
  z-index: 1000;
}

.user-tooltip::before {
  content: '';
  position: absolute;
  top: -6px;
  right: 16px;
  width: 10px;
  height: 10px;
  background: #fff;
  border-left: 1px solid #e2e8f0;
  border-top: 1px solid #e2e8f0;
  transform: rotate(45deg);
}

.user-info:hover .user-tooltip {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.user-tooltip-name {
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--text-primary);
}

.user-tooltip-role {
  font-size: 0.78rem;
  color: var(--text-secondary);
  text-transform: capitalize;
}

.user-tooltip-email {
  font-size: 0.78rem;
  color: #94a3b8;
  word-break: break-all;
}

.logout-button {
  background-color: #FF0806;
  color: white;
  border: none;
  padding: 0.6rem 1.2rem;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.95rem;
  transition: background-color 0.2s;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.logout-button:hover {
  background-color: #cc0605;
}

/* Sidebar */
.sidebar {
  width: 250px;
  background-color: var(--bg-primary);
  box-shadow: 2px 0 4px rgba(0, 0, 0, 0.05);
  position: fixed;
  left: 0;
  top: 70px;
  bottom: 0;
  overflow-y: auto;
  transition: transform 0.3s ease;
  z-index: 90;
}

.sidebar.closed {
  transform: translateX(-100%);
}

.sidebar-nav {
  padding: 1rem 0;
}

.nav-section {
  margin-bottom: 1.5rem;
}

.nav-section-title {
  padding: 0.5rem 1.5rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-light);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.nav-links {
  list-style: none;
  padding: 0;
  margin: 0;
}

.nav-link {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.875rem 1.5rem;
  color: var(--text-secondary);
  text-decoration: none;
  transition: all 0.2s;
  font-size: 0.95rem;
}

.nav-link:hover {
  background-color: var(--bg-secondary);
  color: var(--primary-color);
}

.nav-link.active {
  background-color: var(--primary-light);
  color: white;
  border-left: 4px solid var(--primary-dark);
  font-weight: 600;
}

.nav-link-icon {
  font-size: 1.25rem;
}

@media (max-width: 768px) {
  .layout-main {
    margin-left: 0;
    padding: 1rem;
  }

  .sidebar {
    transform: translateX(-100%);
  }

  .sidebar:not(.closed) {
    transform: translateX(0);
  }

  .user-details {
    display: none;
  }

  .header {
    padding: 0 1rem;
  }

  .header-logo-suffix {
    display: none;
  }

  .logout-button span {
    display: none;
  }

  .logout-button {
    padding: 0.6rem 0.75rem;
  }
}

/* Sidebar overlay for mobile */
.sidebar-overlay {
  display: none;
}

@media (max-width: 768px) {
  .sidebar-overlay {
    display: block;
    position: fixed;
    inset: 70px 0 0 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 89;
  }
}
/* Rockstar AI Widget - Floating chat assistant */

.rockstar-widget-shell {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 1400;
}

.rockstar-widget-fab {
  border: none;
  border-radius: 999px;
  background: var(--primary-color);
  color: #ffffff;
  padding: 0.6rem 0.95rem;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-weight: 700;
  font-size: 0.9rem;
  cursor: pointer;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
  transition: transform 0.2s, box-shadow 0.2s;
}

.rockstar-widget-fab:hover {
  transform: scale(1.05);
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.45);
}

.rockstar-widget-panel {
  width: min(92vw, 400px);
  height: min(76vh, 580px);
  background: var(--bg-primary);
  border-radius: 14px;
  border: 1px solid var(--border-color);
  box-shadow: 0 22px 60px rgba(0, 0, 0, 0.35);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.rockstar-widget-header {
  background: var(--bg-dark);
  color: var(--text-primary);
  padding: 0.8rem 0.95rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.rockstar-widget-header .title {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 700;
  font-size: 0.98rem;
}

.rockstar-widget-header .actions {
  display: inline-flex;
  gap: 0.4rem;
}

.rockstar-widget-header .actions button {
  width: 30px;
  height: 30px;
  border: none;
  border-radius: 7px;
  background: var(--bg-secondary);
  color: var(--text-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: opacity 0.2s;
}

.rockstar-widget-header .actions button span {
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1;
  -webkit-user-select: none;
  user-select: none;
  display: block;
  color: inherit;
}

.rockstar-widget-header .actions button:hover {
  opacity: 0.8;
}

.rockstar-widget-meta {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
  padding: 0.75rem 0.95rem;
  background: var(--bg-primary);
  border-bottom: 1px solid var(--border-color);
}

.rockstar-widget-meta span {
  background: var(--bg-secondary);
  color: var(--text-primary);
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 0.2rem 0.6rem;
  border: 1px solid var(--border-color);
}

.rockstar-widget-messages {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: 0.85rem;
  background: var(--bg-primary);
}

.rockstar-widget-messages .message {
  position: relative;
  max-width: 85%;
  border-radius: 14px;
  padding: 0.6rem 0.75rem;
  font-size: 0.88rem;
  line-height: 1.45;
  margin-bottom: 0.15rem;
}

.rockstar-widget-messages .message p {
  margin: 0;
  white-space: pre-wrap;
}

.rockstar-widget-messages .message.assistant {
  align-self: flex-start;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  color: var(--text-primary);
  border-radius: 14px 14px 14px 4px;
}

.rockstar-widget-messages .message.user {
  align-self: flex-end;
  background: var(--primary-color);
  color: #ffffff;
  border-radius: 14px 14px 4px 14px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
}

.rockstar-widget-messages .message.thinking {
  opacity: 0.8;
  font-style: italic;
}

.rockstar-widget-suggestions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  padding: 0.65rem 0.85rem;
  background: var(--bg-primary);
  border-top: 1px solid var(--border-color);
}

.rockstar-widget-suggestions button {
  border: 1px solid var(--border-color);
  border-radius: 999px;
  background: var(--bg-primary);
  color: var(--text-primary);
  font-size: 0.72rem;
  font-weight: 700;
  padding: 0.25rem 0.6rem;
  cursor: pointer;
  transition: all 0.2s;
}

.rockstar-widget-suggestions button:hover:not(:disabled) {
  background: var(--bg-secondary);
  border-color: var(--primary-color);
}

.rockstar-widget-suggestions button.toggle {
  background: var(--bg-secondary);
  border-style: dashed;
}

.rockstar-widget-suggestions button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.rockstar-widget-input {
  border-top: 1px solid var(--border-color);
  padding: 0.75rem 0.85rem;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.55rem;
  background: var(--bg-primary);
}

.rockstar-widget-input input {
  border: 1px solid var(--border-color);
  border-radius: 9px;
  padding: 0.6rem 0.75rem;
  font-size: 0.88rem;
  background: var(--bg-primary);
  color: var(--text-primary);
  transition: border-color 0.2s, box-shadow 0.2s;
}

.rockstar-widget-input input:focus {
  outline: none;
  border-color: var(--primary-color);
  box-shadow: 0 0 0 3px rgba(255, 8, 6, 0.1);
}

.rockstar-widget-input button {
  border: none;
  border-radius: 9px;
  min-width: 42px;
  padding: 0 0.7rem;
  background: var(--primary-color);
  color: #ffffff;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: opacity 0.2s;
}

.rockstar-widget-input button:hover:not(:disabled) {
  opacity: 0.9;
}

.rockstar-widget-input button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.mock-data-banner {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  background: linear-gradient(90deg, #0f172a 0%, #1e1b4b 50%, #0f172a 100%);
  background-size: 200% 100%;
  animation: mockBannerScroll 6s linear infinite;
  border-bottom: 2px solid #6366f1;
  color: #c7d2fe;
  font-size: 0.82rem;
  padding: 0.5rem 1.25rem;
  letter-spacing: 0.01em;
  position: sticky;
  top: 0;
  z-index: 90;
}

@keyframes mockBannerScroll {
  0%   { background-position: 0% 0%; }
  100% { background-position: 200% 0%; }
}

.mock-data-banner-icon {
  font-size: 1.1rem;
  flex-shrink: 0;
  animation: iconWarn 1.2s ease-in-out infinite;
}

@keyframes iconWarn {
  0%, 100% {
    transform: scale(1);
    filter: drop-shadow(0 0 0px transparent);
  }
  50% {
    transform: scale(1.35);
    filter: drop-shadow(0 0 5px #fbbf24) drop-shadow(0 0 10px #ef4444);
  }
}

.mock-data-banner-text strong {
  background: linear-gradient(135deg, #f59e0b, #ef4444, #a855f7, #3b82f6, #f59e0b);
  background-size: 300% 300%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: warnTextShimmer 3s ease infinite;
  font-weight: 700;
}

@keyframes warnTextShimmer {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
:root {
  /* Musicalerias Brand Colors */
  --primary-color: #FF0806;
  --primary-dark: #dc2f02;
  --primary-light: #FF0806;
  --secondary-color: #003049;
  --secondary-dark: #001d35;
  --accent-color: #01166F;
  --text-primary: #212529;
  --text-secondary: #6c757d;
  --text-light: #adb5bd;
  --bg-primary: #ffffff;
  --bg-secondary: #f8f9fa;
  --bg-dark: #212529;
  --border-color: #dee2e6;
  --success: #28a745;
  --warning: #ffc107;
  --danger: #dc3545;
  --info: #17a2b8;
  /* Semantic UI tokens */
  --card-bg:            #ffffff;
  --input-bg:           #ffffff;
  --sidebar-bg:         #f9fafb;
  --table-header-bg:    #f9fafb;
  --hover-bg:           #f3f4f6;
  --badge-bg:           #e5e7eb;
  --img-placeholder-bg: #f3f4f6;
  --error-color:        #dc3545;
  /* Aliases used by POS and other components */
  --accent:             var(--primary-color);
  --accent-hover:       var(--primary-dark);
  --bg-card:            var(--card-bg);
  --bg-hover:           var(--hover-bg);
  --text-muted:         var(--text-light);
  /* Button system */
  --btn-primary-text:   #fff;
}

html:is([data-theme="default"], [data-theme="cyberpunk"], [data-theme="jarvis"], [data-theme="parchment"], [data-theme="rock"], [data-theme="pop"], [data-theme="allwhite"], [data-theme="golden"]) .pipeline-failure-modal {
  color: var(--text-primary);
  background: var(--card-bg);
  border-color: var(--border-color);
}

.page-placeholder {
  padding: 2rem;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
    sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-color: var(--bg-secondary);
  color: var(--text-primary);
  line-height: 1.6;
}

code {
  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
    monospace;
}

#root {
  min-height: 100vh;
}

/* Animations */
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Scrollbar Styling */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: var(--bg-secondary);
}

::-webkit-scrollbar-thumb {
  background: var(--border-color);
  border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--text-light);
}

/* Utility Classes */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.text-center {
  text-align: center;
}

.mt-1 { margin-top: 0.5rem; }
.mt-2 { margin-top: 1rem; }
.mt-3 { margin-top: 1.5rem; }
.mt-4 { margin-top: 2rem; }

.mb-1 { margin-bottom: 0.5rem; }
.mb-2 { margin-bottom: 1rem; }
.mb-3 { margin-bottom: 1.5rem; }
.mb-4 { margin-bottom: 2rem; }

.flex {
  display: flex;
}

.flex-col {
  flex-direction: column;
}

.items-center {
  align-items: center;
}

.justify-center {
  justify-content: center;
}

.justify-between {
  justify-content: space-between;
}

.gap-1 { gap: 0.5rem; }
.gap-2 { gap: 1rem; }
.gap-3 { gap: 1.5rem; }

/* Rockstar Widget - Default Theme */
.rockstar-widget-header {
  color: #ffffff !important;
}

.rockstar-widget-messages .message.assistant {
  color: #212529 !important;
}