@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%; }
}
/*
 * Amplify UI Basic Theme
 */
:root, [data-amplify-theme] {
  --amplify-components-accordion-background-color: var(--amplify-colors-background-primary);
  --amplify-components-accordion-item-border-color: var(--amplify-colors-border-secondary);
  --amplify-components-accordion-item-border-width: var(--amplify-border-widths-small);
  --amplify-components-accordion-item-border-style: solid;
  --amplify-components-accordion-item-border-radius: var(--amplify-radii-small);
  --amplify-components-accordion-item-trigger-align-items: center;
  --amplify-components-accordion-item-trigger-background-color: var(--amplify-colors-background-primary);
  --amplify-components-accordion-item-trigger-color: inherit;
  --amplify-components-accordion-item-trigger-gap: var(--amplify-space-small);
  --amplify-components-accordion-item-trigger-justify-content: space-between;
  --amplify-components-accordion-item-trigger-padding-block: var(--amplify-space-xs);
  --amplify-components-accordion-item-trigger-padding-inline: var(--amplify-space-small);
  --amplify-components-accordion-item-trigger-hover-color: inherit;
  --amplify-components-accordion-item-trigger-hover-background-color: var(--amplify-colors-overlay-5);
  --amplify-components-accordion-item-trigger-focus-border-color: var(--amplify-colors-border-focus);
  --amplify-components-accordion-item-trigger-focus-box-shadow: 0 0 0 2px var(--amplify-colors-border-focus);
  --amplify-components-accordion-item-content-color: inherit;
  --amplify-components-accordion-item-content-padding-inline: var(--amplify-space-small);
  --amplify-components-accordion-item-content-padding-block-end: var(--amplify-space-small);
  --amplify-components-accordion-item-content-padding-block-start: var(--amplify-space-xxxs);
  --amplify-components-accordion-item-icon-color: var(--amplify-colors-font-tertiary);
  --amplify-components-accordion-item-icon-transition-duration: var(--amplify-time-medium);
  --amplify-components-accordion-item-icon-transition-timing-function: cubic-bezier(0.87, 0, 0.13, 1);
  --amplify-components-ai-conversation-message-background-color: var(--amplify-colors-background-secondary);
  --amplify-components-ai-conversation-message-border-radius: var(--amplify-radii-large);
  --amplify-components-ai-conversation-message-gap: var(--amplify-space-small);
  --amplify-components-ai-conversation-message-padding-block: var(--amplify-space-small);
  --amplify-components-ai-conversation-message-padding-inline: var(--amplify-space-small);
  --amplify-components-ai-conversation-message-user-background-color: var(--amplify-colors-background-secondary);
  --amplify-components-ai-conversation-message-assistant-background-color: var(--amplify-colors-primary-10);
  --amplify-components-ai-conversation-message-sender-gap: var(--amplify-space-small);
  --amplify-components-ai-conversation-message-sender-username-color: var(--amplify-colors-font-primary);
  --amplify-components-ai-conversation-message-sender-username-font-size: inherit;
  --amplify-components-ai-conversation-message-sender-username-font-weight: var(--amplify-font-weights-bold);
  --amplify-components-ai-conversation-message-sender-timestamp-color: var(--amplify-colors-font-tertiary);
  --amplify-components-ai-conversation-message-sender-timestamp-font-size: inherit;
  --amplify-components-ai-conversation-message-sender-timestamp-font-weight: inherit;
  --amplify-components-ai-conversation-message-body-gap: var(--amplify-space-xs);
  --amplify-components-ai-conversation-message-actions-gap: var(--amplify-space-xs);
  --amplify-components-ai-conversation-form-gap: var(--amplify-space-small);
  --amplify-components-ai-conversation-form-padding: var(--amplify-space-small);
  --amplify-components-ai-conversation-attachment-border-color: var(--amplify-colors-border-secondary);
  --amplify-components-ai-conversation-attachment-border-width: var(--amplify-border-widths-small);
  --amplify-components-ai-conversation-attachment-border-radius: var(--amplify-radii-small);
  --amplify-components-ai-conversation-attachment-font-size: var(--amplify-font-sizes-small);
  --amplify-components-ai-conversation-attachment-padding-block: var(--amplify-space-xxxs);
  --amplify-components-ai-conversation-attachment-padding-inline: var(--amplify-space-xs);
  --amplify-components-ai-conversation-attachment-gap: var(--amplify-space-xs);
  --amplify-components-ai-conversation-attachment-list-padding: var(--amplify-space-xs);
  --amplify-components-ai-conversation-attachment-list-padding-block-start: 0;
  --amplify-components-ai-conversation-attachment-list-gap: var(--amplify-space-xxs);
  --amplify-components-ai-conversation-attachment-name-color: var(--amplify-colors-font-primary);
  --amplify-components-ai-conversation-attachment-name-font-size: var(--amplify-font-sizes-small);
  --amplify-components-ai-conversation-attachment-name-font-weight: var(--amplify-font-weights-normal);
  --amplify-components-ai-conversation-attachment-size-color: var(--amplify-colors-font-tertiary);
  --amplify-components-ai-conversation-attachment-size-font-size: var(--amplify-font-sizes-small);
  --amplify-components-ai-conversation-attachment-size-font-weight: var(--amplify-font-weights-normal);
  --amplify-components-ai-conversation-attachment-remove-padding: var(--amplify-space-xxs);
  --amplify-components-ai-conversation-attachment-image-width: var(--amplify-font-sizes-medium);
  --amplify-components-ai-conversation-attachment-image-height: var(--amplify-font-sizes-medium);
  --amplify-components-alert-align-items: center;
  --amplify-components-alert-justify-content: space-between;
  --amplify-components-alert-color: var(--amplify-colors-font-primary);
  --amplify-components-alert-background-color: var(--amplify-colors-background-tertiary);
  --amplify-components-alert-padding-block: var(--amplify-space-small);
  --amplify-components-alert-padding-inline: var(--amplify-space-medium);
  --amplify-components-alert-icon-size: var(--amplify-font-sizes-xl);
  --amplify-components-alert-heading-font-size: var(--amplify-font-sizes-medium);
  --amplify-components-alert-heading-font-weight: var(--amplify-font-weights-bold);
  --amplify-components-alert-info-color: var(--amplify-colors-font-info);
  --amplify-components-alert-info-background-color: var(--amplify-colors-background-info);
  --amplify-components-alert-error-color: var(--amplify-colors-font-error);
  --amplify-components-alert-error-background-color: var(--amplify-colors-background-error);
  --amplify-components-alert-warning-color: var(--amplify-colors-font-warning);
  --amplify-components-alert-warning-background-color: var(--amplify-colors-background-warning);
  --amplify-components-alert-success-color: var(--amplify-colors-font-success);
  --amplify-components-alert-success-background-color: var(--amplify-colors-background-success);
  --amplify-components-authenticator-max-width: 60rem;
  --amplify-components-authenticator-modal-width: var(--amplify-space-relative-full);
  --amplify-components-authenticator-modal-height: var(--amplify-space-relative-full);
  --amplify-components-authenticator-modal-background-color: var(--amplify-colors-overlay-50);
  --amplify-components-authenticator-modal-top: var(--amplify-space-zero);
  --amplify-components-authenticator-modal-left: var(--amplify-space-zero);
  --amplify-components-authenticator-container-width-max: 30rem;
  --amplify-components-authenticator-router-border-width: var(--amplify-border-widths-small);
  --amplify-components-authenticator-router-border-style: solid;
  --amplify-components-authenticator-router-border-color: var(--amplify-colors-border-primary);
  --amplify-components-authenticator-router-background-color: var(--amplify-colors-background-primary);
  --amplify-components-authenticator-router-box-shadow: var(--amplify-shadows-medium);
  --amplify-components-authenticator-footer-padding-bottom: var(--amplify-space-medium);
  --amplify-components-authenticator-form-padding: var(--amplify-space-xl);
  --amplify-components-authenticator-state-inactive-background-color: var(--amplify-colors-background-secondary);
  --amplify-components-authenticator-or-container-color: var(--amplify-colors-neutral-80);
  --amplify-components-authenticator-or-container-or-line-background-color: var(--amplify-colors-background-primary);
  --amplify-components-autocomplete-menu-width: 100%;
  --amplify-components-autocomplete-menu-margin-block-start: var(--amplify-space-xxxs);
  --amplify-components-autocomplete-menu-background-color: var(--amplify-colors-background-primary);
  --amplify-components-autocomplete-menu-border-color: var(--amplify-colors-border-primary);
  --amplify-components-autocomplete-menu-border-width: var(--amplify-border-widths-small);
  --amplify-components-autocomplete-menu-border-style: solid;
  --amplify-components-autocomplete-menu-border-radius: var(--amplify-radii-small);
  --amplify-components-autocomplete-menu-options-display: flex;
  --amplify-components-autocomplete-menu-options-flex-direction: column;
  --amplify-components-autocomplete-menu-options-max-height: 300px;
  --amplify-components-autocomplete-menu-option-background-color: var(--amplify-colors-background-primary);
  --amplify-components-autocomplete-menu-option-color: currentcolor;
  --amplify-components-autocomplete-menu-option-cursor: pointer;
  --amplify-components-autocomplete-menu-option-transition-duration: var(--amplify-time-short);
  --amplify-components-autocomplete-menu-option-transition-property: background-color, color;
  --amplify-components-autocomplete-menu-option-transition-timing-function: ease;
  --amplify-components-autocomplete-menu-option-active-background-color: var(--amplify-colors-primary-80);
  --amplify-components-autocomplete-menu-option-active-color: var(--amplify-colors-white);
  --amplify-components-autocomplete-menu-empty-display: flex;
  --amplify-components-autocomplete-menu-loading-align-items: center;
  --amplify-components-autocomplete-menu-loading-display: flex;
  --amplify-components-autocomplete-menu-loading-gap: var(--amplify-space-xxxs);
  --amplify-components-autocomplete-menu-space-shared-padding-block: var(--amplify-space-xs);
  --amplify-components-autocomplete-menu-space-shared-padding-inline: var(--amplify-space-small);
  --amplify-components-avatar-color: var(--amplify-colors-font-tertiary);
  --amplify-components-avatar-line-height: 1;
  --amplify-components-avatar-font-weight: var(--amplify-font-weights-semibold);
  --amplify-components-avatar-font-size: var(--amplify-font-sizes-small);
  --amplify-components-avatar-text-align: center;
  --amplify-components-avatar-width: var(--amplify-font-sizes-xxl);
  --amplify-components-avatar-height: var(--amplify-font-sizes-xxl);
  --amplify-components-avatar-background-color: var(--amplify-colors-background-tertiary);
  --amplify-components-avatar-border-radius: 100%;
  --amplify-components-avatar-border-color: var(--amplify-colors-border-primary);
  --amplify-components-avatar-border-width: var(--amplify-border-widths-medium);
  --amplify-components-avatar-info-color: var(--amplify-colors-font-info);
  --amplify-components-avatar-info-background-color: var(--amplify-colors-background-info);
  --amplify-components-avatar-info-border-color: var(--amplify-colors-border-info);
  --amplify-components-avatar-warning-color: var(--amplify-colors-font-warning);
  --amplify-components-avatar-warning-background-color: var(--amplify-colors-background-warning);
  --amplify-components-avatar-warning-border-color: var(--amplify-colors-border-warning);
  --amplify-components-avatar-success-color: var(--amplify-colors-font-success);
  --amplify-components-avatar-success-background-color: var(--amplify-colors-background-success);
  --amplify-components-avatar-success-border-color: var(--amplify-colors-border-success);
  --amplify-components-avatar-error-color: var(--amplify-colors-font-error);
  --amplify-components-avatar-error-background-color: var(--amplify-colors-background-error);
  --amplify-components-avatar-error-border-color: var(--amplify-colors-border-error);
  --amplify-components-avatar-small-font-size: var(--amplify-font-sizes-xs);
  --amplify-components-avatar-small-width: var(--amplify-font-sizes-xl);
  --amplify-components-avatar-small-height: var(--amplify-font-sizes-xl);
  --amplify-components-avatar-large-font-size: var(--amplify-font-sizes-medium);
  --amplify-components-avatar-large-width: var(--amplify-font-sizes-xxxl);
  --amplify-components-avatar-large-height: var(--amplify-font-sizes-xxxl);
  --amplify-components-badge-color: var(--amplify-colors-font-primary);
  --amplify-components-badge-line-height: 1;
  --amplify-components-badge-font-weight: var(--amplify-font-weights-semibold);
  --amplify-components-badge-font-size: var(--amplify-font-sizes-small);
  --amplify-components-badge-text-align: center;
  --amplify-components-badge-padding-vertical: var(--amplify-space-xs);
  --amplify-components-badge-padding-horizontal: var(--amplify-space-small);
  --amplify-components-badge-background-color: var(--amplify-colors-background-tertiary);
  --amplify-components-badge-border-radius: var(--amplify-radii-xl);
  --amplify-components-badge-info-color: var(--amplify-colors-font-info);
  --amplify-components-badge-info-background-color: var(--amplify-colors-background-info);
  --amplify-components-badge-warning-color: var(--amplify-colors-font-warning);
  --amplify-components-badge-warning-background-color: var(--amplify-colors-background-warning);
  --amplify-components-badge-success-color: var(--amplify-colors-font-success);
  --amplify-components-badge-success-background-color: var(--amplify-colors-background-success);
  --amplify-components-badge-error-color: var(--amplify-colors-font-error);
  --amplify-components-badge-error-background-color: var(--amplify-colors-background-error);
  --amplify-components-badge-small-font-size: var(--amplify-font-sizes-xs);
  --amplify-components-badge-small-padding-vertical: var(--amplify-space-xxs);
  --amplify-components-badge-small-padding-horizontal: var(--amplify-space-xs);
  --amplify-components-badge-large-font-size: var(--amplify-font-sizes-medium);
  --amplify-components-badge-large-padding-vertical: var(--amplify-space-small);
  --amplify-components-badge-large-padding-horizontal: var(--amplify-space-medium);
  --amplify-components-breadcrumbs-flex-direction: row;
  --amplify-components-breadcrumbs-flex-wrap: wrap;
  --amplify-components-breadcrumbs-gap: 0;
  --amplify-components-breadcrumbs-color: var(--amplify-colors-font-tertiary);
  --amplify-components-breadcrumbs-item-flex-direction: row;
  --amplify-components-breadcrumbs-item-color: inherit;
  --amplify-components-breadcrumbs-item-font-size: inherit;
  --amplify-components-breadcrumbs-item-align-items: center;
  --amplify-components-breadcrumbs-item-line-height: 1;
  --amplify-components-breadcrumbs-separator-color: inherit;
  --amplify-components-breadcrumbs-separator-font-size: inherit;
  --amplify-components-breadcrumbs-separator-padding-inline: var(--amplify-space-xxs);
  --amplify-components-breadcrumbs-link-color: var(--amplify-components-link-color);
  --amplify-components-breadcrumbs-link-font-size: inherit;
  --amplify-components-breadcrumbs-link-font-weight: normal;
  --amplify-components-breadcrumbs-link-text-decoration: none;
  --amplify-components-breadcrumbs-link-padding-inline: var(--amplify-space-xs);
  --amplify-components-breadcrumbs-link-padding-block: var(--amplify-space-xxs);
  --amplify-components-breadcrumbs-link-current-color: inherit;
  --amplify-components-breadcrumbs-link-current-font-size: inherit;
  --amplify-components-breadcrumbs-link-current-font-weight: normal;
  --amplify-components-breadcrumbs-link-current-text-decoration: none;
  --amplify-components-button-font-weight: var(--amplify-font-weights-bold);
  --amplify-components-button-transition-duration: var(--amplify-components-fieldcontrol-transition-duration);
  --amplify-components-button-font-size: var(--amplify-components-fieldcontrol-font-size);
  --amplify-components-button-line-height: var(--amplify-components-fieldcontrol-line-height);
  --amplify-components-button-padding-block-start: var(--amplify-components-fieldcontrol-padding-block-start);
  --amplify-components-button-padding-block-end: var(--amplify-components-fieldcontrol-padding-block-end);
  --amplify-components-button-padding-inline-start: var(--amplify-components-fieldcontrol-padding-inline-start);
  --amplify-components-button-padding-inline-end: var(--amplify-components-fieldcontrol-padding-inline-end);
  --amplify-components-button-background-color: transparent;
  --amplify-components-button-border-color: var(--amplify-components-fieldcontrol-border-color);
  --amplify-components-button-border-width: var(--amplify-components-fieldcontrol-border-width);
  --amplify-components-button-border-style: var(--amplify-components-fieldcontrol-border-style);
  --amplify-components-button-border-radius: var(--amplify-components-fieldcontrol-border-radius);
  --amplify-components-button-color: var(--amplify-colors-font-primary);
  --amplify-components-button-hover-color: var(--amplify-colors-font-focus);
  --amplify-components-button-hover-background-color: var(--amplify-colors-primary-10);
  --amplify-components-button-hover-border-color: var(--amplify-colors-primary-60);
  --amplify-components-button-focus-color: var(--amplify-colors-font-focus);
  --amplify-components-button-focus-background-color: var(--amplify-colors-primary-10);
  --amplify-components-button-focus-border-color: var(--amplify-colors-border-focus);
  --amplify-components-button-focus-box-shadow: var(--amplify-components-fieldcontrol-focus-box-shadow);
  --amplify-components-button-active-color: var(--amplify-colors-font-active);
  --amplify-components-button-active-background-color: var(--amplify-colors-primary-20);
  --amplify-components-button-active-border-color: var(--amplify-colors-primary-100);
  --amplify-components-button-loading-color: var(--amplify-colors-font-disabled);
  --amplify-components-button-loading-background-color: transparent;
  --amplify-components-button-loading-border-color: var(--amplify-colors-border-tertiary);
  --amplify-components-button-disabled-color: var(--amplify-colors-font-disabled);
  --amplify-components-button-disabled-background-color: transparent;
  --amplify-components-button-disabled-border-color: var(--amplify-colors-border-tertiary);
  --amplify-components-button-outlined-info-border-color: var(--amplify-colors-blue-60);
  --amplify-components-button-outlined-info-background-color: transparent;
  --amplify-components-button-outlined-info-color: var(--amplify-colors-blue-100);
  --amplify-components-button-outlined-info-hover-border-color: var(--amplify-colors-blue-60);
  --amplify-components-button-outlined-info-hover-background-color: var(--amplify-colors-blue-10);
  --amplify-components-button-outlined-info-hover-color: var(--amplify-colors-blue-100);
  --amplify-components-button-outlined-info-focus-border-color: var(--amplify-colors-blue-100);
  --amplify-components-button-outlined-info-focus-background-color: var(--amplify-colors-blue-10);
  --amplify-components-button-outlined-info-focus-color: var(--amplify-colors-blue-100);
  --amplify-components-button-outlined-info-focus-box-shadow: var(--amplify-components-fieldcontrol-info-focus-box-shadow);
  --amplify-components-button-outlined-info-active-border-color: var(--amplify-colors-blue-100);
  --amplify-components-button-outlined-info-active-background-color: var(--amplify-colors-blue-20);
  --amplify-components-button-outlined-info-active-color: var(--amplify-colors-blue-100);
  --amplify-components-button-outlined-warning-border-color: var(--amplify-colors-orange-60);
  --amplify-components-button-outlined-warning-background-color: transparent;
  --amplify-components-button-outlined-warning-color: var(--amplify-colors-orange-100);
  --amplify-components-button-outlined-warning-hover-border-color: var(--amplify-colors-orange-60);
  --amplify-components-button-outlined-warning-hover-background-color: var(--amplify-colors-orange-10);
  --amplify-components-button-outlined-warning-hover-color: var(--amplify-colors-orange-100);
  --amplify-components-button-outlined-warning-focus-border-color: var(--amplify-colors-orange-100);
  --amplify-components-button-outlined-warning-focus-background-color: var(--amplify-colors-orange-10);
  --amplify-components-button-outlined-warning-focus-color: var(--amplify-colors-orange-100);
  --amplify-components-button-outlined-warning-focus-box-shadow: var(--amplify-components-fieldcontrol-warning-focus-box-shadow);
  --amplify-components-button-outlined-warning-active-border-color: var(--amplify-colors-orange-100);
  --amplify-components-button-outlined-warning-active-background-color: var(--amplify-colors-orange-20);
  --amplify-components-button-outlined-warning-active-color: var(--amplify-colors-orange-100);
  --amplify-components-button-outlined-success-border-color: var(--amplify-colors-green-60);
  --amplify-components-button-outlined-success-background-color: transparent;
  --amplify-components-button-outlined-success-color: var(--amplify-colors-green-100);
  --amplify-components-button-outlined-success-hover-border-color: var(--amplify-colors-green-60);
  --amplify-components-button-outlined-success-hover-background-color: var(--amplify-colors-green-10);
  --amplify-components-button-outlined-success-hover-color: var(--amplify-colors-green-100);
  --amplify-components-button-outlined-success-focus-border-color: var(--amplify-colors-green-100);
  --amplify-components-button-outlined-success-focus-background-color: var(--amplify-colors-green-10);
  --amplify-components-button-outlined-success-focus-color: var(--amplify-colors-green-100);
  --amplify-components-button-outlined-success-focus-box-shadow: var(--amplify-components-fieldcontrol-success-focus-box-shadow);
  --amplify-components-button-outlined-success-active-border-color: var(--amplify-colors-green-100);
  --amplify-components-button-outlined-success-active-background-color: var(--amplify-colors-green-20);
  --amplify-components-button-outlined-success-active-color: var(--amplify-colors-green-100);
  --amplify-components-button-outlined-error-border-color: var(--amplify-colors-red-80);
  --amplify-components-button-outlined-error-background-color: transparent;
  --amplify-components-button-outlined-error-color: var(--amplify-colors-red-100);
  --amplify-components-button-outlined-error-hover-border-color: var(--amplify-colors-red-80);
  --amplify-components-button-outlined-error-hover-background-color: var(--amplify-colors-red-10);
  --amplify-components-button-outlined-error-hover-color: var(--amplify-colors-red-100);
  --amplify-components-button-outlined-error-focus-border-color: var(--amplify-colors-red-100);
  --amplify-components-button-outlined-error-focus-background-color: var(--amplify-colors-red-10);
  --amplify-components-button-outlined-error-focus-color: var(--amplify-colors-red-100);
  --amplify-components-button-outlined-error-focus-box-shadow: var(--amplify-components-fieldcontrol-error-focus-box-shadow);
  --amplify-components-button-outlined-error-active-border-color: var(--amplify-colors-red-100);
  --amplify-components-button-outlined-error-active-background-color: var(--amplify-colors-red-20);
  --amplify-components-button-outlined-error-active-color: var(--amplify-colors-red-100);
  --amplify-components-button-outlined-overlay-border-color: var(--amplify-colors-overlay-60);
  --amplify-components-button-outlined-overlay-background-color: transparent;
  --amplify-components-button-outlined-overlay-color: var(--amplify-colors-font-primary);
  --amplify-components-button-outlined-overlay-hover-border-color: var(--amplify-colors-overlay-60);
  --amplify-components-button-outlined-overlay-hover-background-color: var(--amplify-colors-overlay-5);
  --amplify-components-button-outlined-overlay-hover-color: var(--amplify-colors-neutral-90);
  --amplify-components-button-outlined-overlay-focus-border-color: var(--amplify-colors-overlay-90);
  --amplify-components-button-outlined-overlay-focus-background-color: var(--amplify-colors-overlay-5);
  --amplify-components-button-outlined-overlay-focus-color: var(--amplify-colors-neutral-90);
  --amplify-components-button-outlined-overlay-focus-box-shadow: var(--amplify-components-fieldcontrol-overlay-focus-box-shadow);
  --amplify-components-button-outlined-overlay-active-border-color: var(--amplify-colors-overlay-90);
  --amplify-components-button-outlined-overlay-active-background-color: var(--amplify-colors-overlay-10);
  --amplify-components-button-outlined-overlay-active-color: var(--amplify-colors-neutral-100);
  --amplify-components-button-primary-border-color: transparent;
  --amplify-components-button-primary-border-width: var(--amplify-border-widths-small);
  --amplify-components-button-primary-border-style: solid;
  --amplify-components-button-primary-background-color: var(--amplify-colors-primary-80);
  --amplify-components-button-primary-color: var(--amplify-colors-font-inverse);
  --amplify-components-button-primary-disabled-border-color: transparent;
  --amplify-components-button-primary-disabled-background-color: var(--amplify-colors-background-disabled);
  --amplify-components-button-primary-disabled-color: var(--amplify-colors-font-disabled);
  --amplify-components-button-primary-loading-border-color: transparent;
  --amplify-components-button-primary-loading-background-color: var(--amplify-colors-background-disabled);
  --amplify-components-button-primary-loading-color: var(--amplify-colors-font-disabled);
  --amplify-components-button-primary-hover-border-color: transparent;
  --amplify-components-button-primary-hover-background-color: var(--amplify-colors-primary-90);
  --amplify-components-button-primary-hover-color: var(--amplify-colors-font-inverse);
  --amplify-components-button-primary-focus-border-color: transparent;
  --amplify-components-button-primary-focus-background-color: var(--amplify-colors-primary-90);
  --amplify-components-button-primary-focus-color: var(--amplify-colors-font-inverse);
  --amplify-components-button-primary-focus-box-shadow: var(--amplify-components-fieldcontrol-focus-box-shadow);
  --amplify-components-button-primary-active-border-color: transparent;
  --amplify-components-button-primary-active-background-color: var(--amplify-colors-primary-100);
  --amplify-components-button-primary-active-color: var(--amplify-colors-font-inverse);
  --amplify-components-button-primary-info-border-color: transparent;
  --amplify-components-button-primary-info-background-color: var(--amplify-colors-blue-80);
  --amplify-components-button-primary-info-color: var(--amplify-colors-font-inverse);
  --amplify-components-button-primary-info-hover-border-color: transparent;
  --amplify-components-button-primary-info-hover-background-color: var(--amplify-colors-blue-90);
  --amplify-components-button-primary-info-hover-color: var(--amplify-colors-font-inverse);
  --amplify-components-button-primary-info-focus-border-color: transparent;
  --amplify-components-button-primary-info-focus-background-color: var(--amplify-colors-blue-90);
  --amplify-components-button-primary-info-focus-color: var(--amplify-colors-font-inverse);
  --amplify-components-button-primary-info-focus-box-shadow: var(--amplify-components-fieldcontrol-info-focus-box-shadow);
  --amplify-components-button-primary-info-active-border-color: transparent;
  --amplify-components-button-primary-info-active-background-color: var(--amplify-colors-blue-100);
  --amplify-components-button-primary-info-active-color: var(--amplify-colors-font-inverse);
  --amplify-components-button-primary-warning-border-color: transparent;
  --amplify-components-button-primary-warning-background-color: var(--amplify-colors-orange-80);
  --amplify-components-button-primary-warning-color: var(--amplify-colors-font-inverse);
  --amplify-components-button-primary-warning-hover-border-color: transparent;
  --amplify-components-button-primary-warning-hover-background-color: var(--amplify-colors-orange-90);
  --amplify-components-button-primary-warning-hover-color: var(--amplify-colors-font-inverse);
  --amplify-components-button-primary-warning-focus-border-color: transparent;
  --amplify-components-button-primary-warning-focus-background-color: var(--amplify-colors-orange-90);
  --amplify-components-button-primary-warning-focus-color: var(--amplify-colors-font-inverse);
  --amplify-components-button-primary-warning-focus-box-shadow: var(--amplify-components-fieldcontrol-overlay-focus-box-shadow);
  --amplify-components-button-primary-warning-active-border-color: transparent;
  --amplify-components-button-primary-warning-active-background-color: var(--amplify-colors-orange-100);
  --amplify-components-button-primary-warning-active-color: var(--amplify-colors-font-inverse);
  --amplify-components-button-primary-error-border-color: transparent;
  --amplify-components-button-primary-error-background-color: var(--amplify-colors-red-80);
  --amplify-components-button-primary-error-color: var(--amplify-colors-font-inverse);
  --amplify-components-button-primary-error-hover-border-color: transparent;
  --amplify-components-button-primary-error-hover-background-color: var(--amplify-colors-red-90);
  --amplify-components-button-primary-error-hover-color: var(--amplify-colors-font-inverse);
  --amplify-components-button-primary-error-focus-border-color: transparent;
  --amplify-components-button-primary-error-focus-background-color: var(--amplify-colors-red-90);
  --amplify-components-button-primary-error-focus-color: var(--amplify-colors-font-inverse);
  --amplify-components-button-primary-error-focus-box-shadow: var(--amplify-components-fieldcontrol-error-focus-box-shadow);
  --amplify-components-button-primary-error-active-border-color: transparent;
  --amplify-components-button-primary-error-active-background-color: var(--amplify-colors-red-100);
  --amplify-components-button-primary-error-active-color: var(--amplify-colors-font-inverse);
  --amplify-components-button-primary-success-border-color: transparent;
  --amplify-components-button-primary-success-background-color: var(--amplify-colors-green-80);
  --amplify-components-button-primary-success-color: var(--amplify-colors-font-inverse);
  --amplify-components-button-primary-success-hover-border-color: transparent;
  --amplify-components-button-primary-success-hover-background-color: var(--amplify-colors-green-90);
  --amplify-components-button-primary-success-hover-color: var(--amplify-colors-font-inverse);
  --amplify-components-button-primary-success-focus-border-color: transparent;
  --amplify-components-button-primary-success-focus-background-color: var(--amplify-colors-green-90);
  --amplify-components-button-primary-success-focus-color: var(--amplify-colors-font-inverse);
  --amplify-components-button-primary-success-focus-box-shadow: var(--amplify-components-fieldcontrol-success-focus-box-shadow);
  --amplify-components-button-primary-success-active-border-color: transparent;
  --amplify-components-button-primary-success-active-background-color: var(--amplify-colors-green-100);
  --amplify-components-button-primary-success-active-color: var(--amplify-colors-font-inverse);
  --amplify-components-button-primary-overlay-border-color: transparent;
  --amplify-components-button-primary-overlay-background-color: var(--amplify-colors-overlay-70);
  --amplify-components-button-primary-overlay-color: var(--amplify-colors-font-inverse);
  --amplify-components-button-primary-overlay-hover-border-color: transparent;
  --amplify-components-button-primary-overlay-hover-background-color: var(--amplify-colors-overlay-90);
  --amplify-components-button-primary-overlay-hover-color: var(--amplify-colors-font-inverse);
  --amplify-components-button-primary-overlay-focus-border-color: transparent;
  --amplify-components-button-primary-overlay-focus-background-color: var(--amplify-colors-overlay-90);
  --amplify-components-button-primary-overlay-focus-color: var(--amplify-colors-font-inverse);
  --amplify-components-button-primary-overlay-focus-box-shadow: var(--amplify-components-fieldcontrol-overlay-focus-box-shadow);
  --amplify-components-button-primary-overlay-active-border-color: transparent;
  --amplify-components-button-primary-overlay-active-background-color: var(--amplify-colors-overlay-90);
  --amplify-components-button-primary-overlay-active-color: var(--amplify-colors-font-inverse);
  --amplify-components-button-menu-border-width: var(--amplify-space-zero);
  --amplify-components-button-menu-background-color: transparent;
  --amplify-components-button-menu-justify-content: start;
  --amplify-components-button-menu-hover-color: var(--amplify-colors-font-inverse);
  --amplify-components-button-menu-hover-background-color: var(--amplify-colors-primary-80);
  --amplify-components-button-menu-focus-color: var(--amplify-colors-font-inverse);
  --amplify-components-button-menu-focus-background-color: var(--amplify-colors-primary-80);
  --amplify-components-button-menu-active-color: var(--amplify-colors-font-inverse);
  --amplify-components-button-menu-active-background-color: var(--amplify-colors-primary-90);
  --amplify-components-button-menu-disabled-color: var(--amplify-colors-font-disabled);
  --amplify-components-button-link-background-color: transparent;
  --amplify-components-button-link-border-color: transparent;
  --amplify-components-button-link-border-width: var(--amplify-border-widths-small);
  --amplify-components-button-link-color: var(--amplify-colors-font-interactive);
  --amplify-components-button-link-hover-border-color: transparent;
  --amplify-components-button-link-hover-background-color: var(--amplify-colors-primary-10);
  --amplify-components-button-link-hover-color: var(--amplify-colors-font-hover);
  --amplify-components-button-link-focus-border-color: transparent;
  --amplify-components-button-link-focus-background-color: var(--amplify-colors-primary-10);
  --amplify-components-button-link-focus-color: var(--amplify-colors-font-focus);
  --amplify-components-button-link-focus-box-shadow: var(--amplify-components-fieldcontrol-focus-box-shadow);
  --amplify-components-button-link-active-border-color: transparent;
  --amplify-components-button-link-active-background-color: var(--amplify-colors-primary-20);
  --amplify-components-button-link-active-color: var(--amplify-colors-font-active);
  --amplify-components-button-link-disabled-border-color: transparent;
  --amplify-components-button-link-disabled-background-color: transparent;
  --amplify-components-button-link-disabled-color: var(--amplify-colors-font-disabled);
  --amplify-components-button-link-loading-border-color: transparent;
  --amplify-components-button-link-loading-background-color: transparent;
  --amplify-components-button-link-loading-color: var(--amplify-colors-font-disabled);
  --amplify-components-button-link-info-border-color: transparent;
  --amplify-components-button-link-info-background-color: transparent;
  --amplify-components-button-link-info-color: var(--amplify-colors-blue-100);
  --amplify-components-button-link-info-hover-border-color: transparent;
  --amplify-components-button-link-info-hover-background-color: var(--amplify-colors-blue-10);
  --amplify-components-button-link-info-hover-color: var(--amplify-colors-blue-90);
  --amplify-components-button-link-info-focus-border-color: transparent;
  --amplify-components-button-link-info-focus-background-color: var(--amplify-colors-blue-10);
  --amplify-components-button-link-info-focus-color: var(--amplify-colors-blue-100);
  --amplify-components-button-link-info-focus-box-shadow: var(--amplify-components-fieldcontrol-info-focus-box-shadow);
  --amplify-components-button-link-info-active-border-color: transparent;
  --amplify-components-button-link-info-active-background-color: var(--amplify-colors-blue-20);
  --amplify-components-button-link-info-active-color: var(--amplify-colors-blue-100);
  --amplify-components-button-link-warning-border-color: transparent;
  --amplify-components-button-link-warning-background-color: transparent;
  --amplify-components-button-link-warning-color: var(--amplify-colors-orange-100);
  --amplify-components-button-link-warning-hover-border-color: transparent;
  --amplify-components-button-link-warning-hover-background-color: var(--amplify-colors-orange-10);
  --amplify-components-button-link-warning-hover-color: var(--amplify-colors-orange-90);
  --amplify-components-button-link-warning-focus-border-color: transparent;
  --amplify-components-button-link-warning-focus-background-color: var(--amplify-colors-orange-10);
  --amplify-components-button-link-warning-focus-color: var(--amplify-colors-orange-100);
  --amplify-components-button-link-warning-focus-box-shadow: var(--amplify-components-fieldcontrol-warning-focus-box-shadow);
  --amplify-components-button-link-warning-active-border-color: transparent;
  --amplify-components-button-link-warning-active-background-color: var(--amplify-colors-orange-20);
  --amplify-components-button-link-warning-active-color: var(--amplify-colors-orange-100);
  --amplify-components-button-link-success-border-color: transparent;
  --amplify-components-button-link-success-background-color: transparent;
  --amplify-components-button-link-success-color: var(--amplify-colors-green-100);
  --amplify-components-button-link-success-hover-border-color: transparent;
  --amplify-components-button-link-success-hover-background-color: var(--amplify-colors-green-10);
  --amplify-components-button-link-success-hover-color: var(--amplify-colors-green-90);
  --amplify-components-button-link-success-focus-border-color: transparent;
  --amplify-components-button-link-success-focus-background-color: var(--amplify-colors-green-10);
  --amplify-components-button-link-success-focus-color: var(--amplify-colors-green-100);
  --amplify-components-button-link-success-focus-box-shadow: var(--amplify-components-fieldcontrol-success-focus-box-shadow);
  --amplify-components-button-link-success-active-border-color: transparent;
  --amplify-components-button-link-success-active-background-color: var(--amplify-colors-green-20);
  --amplify-components-button-link-success-active-color: var(--amplify-colors-green-100);
  --amplify-components-button-link-error-border-color: transparent;
  --amplify-components-button-link-error-background-color: transparent;
  --amplify-components-button-link-error-color: var(--amplify-colors-red-100);
  --amplify-components-button-link-error-hover-border-color: transparent;
  --amplify-components-button-link-error-hover-background-color: var(--amplify-colors-red-10);
  --amplify-components-button-link-error-hover-color: var(--amplify-colors-red-90);
  --amplify-components-button-link-error-focus-border-color: transparent;
  --amplify-components-button-link-error-focus-background-color: var(--amplify-colors-red-10);
  --amplify-components-button-link-error-focus-color: var(--amplify-colors-red-100);
  --amplify-components-button-link-error-focus-box-shadow: var(--amplify-components-fieldcontrol-error-focus-box-shadow);
  --amplify-components-button-link-error-active-border-color: transparent;
  --amplify-components-button-link-error-active-background-color: var(--amplify-colors-red-20);
  --amplify-components-button-link-error-active-color: var(--amplify-colors-red-100);
  --amplify-components-button-link-overlay-border-color: transparent;
  --amplify-components-button-link-overlay-background-color: transparent;
  --amplify-components-button-link-overlay-color: var(--amplify-colors-neutral-100);
  --amplify-components-button-link-overlay-hover-border-color: transparent;
  --amplify-components-button-link-overlay-hover-background-color: var(--amplify-colors-overlay-5);
  --amplify-components-button-link-overlay-hover-color: var(--amplify-colors-overlay-80);
  --amplify-components-button-link-overlay-focus-border-color: transparent;
  --amplify-components-button-link-overlay-focus-background-color: var(--amplify-colors-overlay-5);
  --amplify-components-button-link-overlay-focus-color: var(--amplify-colors-overlay-90);
  --amplify-components-button-link-overlay-focus-box-shadow: var(--amplify-components-fieldcontrol-overlay-focus-box-shadow);
  --amplify-components-button-link-overlay-active-border-color: transparent;
  --amplify-components-button-link-overlay-active-background-color: var(--amplify-colors-overlay-10);
  --amplify-components-button-link-overlay-active-color: var(--amplify-colors-overlay-90);
  --amplify-components-button-warning-background-color: transparent;
  --amplify-components-button-warning-border-color: var(--amplify-colors-red-60);
  --amplify-components-button-warning-border-width: var(--amplify-border-widths-small);
  --amplify-components-button-warning-color: var(--amplify-colors-red-60);
  --amplify-components-button-warning-hover-border-color: var(--amplify-colors-red-80);
  --amplify-components-button-warning-hover-background-color: var(--amplify-colors-red-10);
  --amplify-components-button-warning-hover-color: var(--amplify-colors-font-error);
  --amplify-components-button-warning-focus-border-color: var(--amplify-colors-red-80);
  --amplify-components-button-warning-focus-background-color: var(--amplify-colors-red-10);
  --amplify-components-button-warning-focus-color: var(--amplify-colors-red-80);
  --amplify-components-button-warning-focus-box-shadow: var(--amplify-components-fieldcontrol-error-focus-box-shadow);
  --amplify-components-button-warning-active-border-color: var(--amplify-colors-red-100);
  --amplify-components-button-warning-active-background-color: var(--amplify-colors-red-20);
  --amplify-components-button-warning-active-color: var(--amplify-colors-red-100);
  --amplify-components-button-warning-disabled-border-color: var(--amplify-colors-border-tertiary);
  --amplify-components-button-warning-disabled-background-color: transparent;
  --amplify-components-button-warning-disabled-color: var(--amplify-colors-font-disabled);
  --amplify-components-button-warning-loading-border-color: var(--amplify-colors-border-tertiary);
  --amplify-components-button-warning-loading-background-color: transparent;
  --amplify-components-button-warning-loading-color: var(--amplify-colors-font-disabled);
  --amplify-components-button-destructive-border-color: transparent;
  --amplify-components-button-destructive-border-width: var(--amplify-border-widths-small);
  --amplify-components-button-destructive-border-style: solid;
  --amplify-components-button-destructive-background-color: var(--amplify-colors-red-60);
  --amplify-components-button-destructive-color: var(--amplify-colors-font-inverse);
  --amplify-components-button-destructive-disabled-border-color: transparent;
  --amplify-components-button-destructive-disabled-background-color: var(--amplify-colors-background-disabled);
  --amplify-components-button-destructive-disabled-color: var(--amplify-colors-font-disabled);
  --amplify-components-button-destructive-loading-border-color: transparent;
  --amplify-components-button-destructive-loading-background-color: var(--amplify-colors-background-disabled);
  --amplify-components-button-destructive-loading-color: var(--amplify-colors-font-disabled);
  --amplify-components-button-destructive-hover-border-color: transparent;
  --amplify-components-button-destructive-hover-background-color: var(--amplify-colors-red-80);
  --amplify-components-button-destructive-hover-color: var(--amplify-colors-font-inverse);
  --amplify-components-button-destructive-focus-border-color: transparent;
  --amplify-components-button-destructive-focus-background-color: var(--amplify-colors-red-80);
  --amplify-components-button-destructive-focus-color: var(--amplify-colors-font-inverse);
  --amplify-components-button-destructive-focus-box-shadow: var(--amplify-components-fieldcontrol-error-focus-box-shadow);
  --amplify-components-button-destructive-active-border-color: transparent;
  --amplify-components-button-destructive-active-background-color: var(--amplify-colors-red-100);
  --amplify-components-button-destructive-active-color: var(--amplify-colors-font-inverse);
  --amplify-components-button-small-font-size: var(--amplify-components-fieldcontrol-small-font-size);
  --amplify-components-button-small-padding-block-start: var(--amplify-components-fieldcontrol-small-padding-block-start);
  --amplify-components-button-small-padding-block-end: var(--amplify-components-fieldcontrol-small-padding-block-end);
  --amplify-components-button-small-padding-inline-start: var(--amplify-components-fieldcontrol-small-padding-inline-start);
  --amplify-components-button-small-padding-inline-end: var(--amplify-components-fieldcontrol-small-padding-inline-end);
  --amplify-components-button-large-font-size: var(--amplify-components-fieldcontrol-large-font-size);
  --amplify-components-button-large-padding-block-start: var(--amplify-components-fieldcontrol-large-padding-block-start);
  --amplify-components-button-large-padding-block-end: var(--amplify-components-fieldcontrol-large-padding-block-end);
  --amplify-components-button-large-padding-inline-start: var(--amplify-components-fieldcontrol-large-padding-inline-start);
  --amplify-components-button-large-padding-inline-end: var(--amplify-components-fieldcontrol-large-padding-inline-end);
  --amplify-components-button-loader-wrapper-align-items: center;
  --amplify-components-button-loader-wrapper-gap: var(--amplify-space-xs);
  --amplify-components-card-background-color: var(--amplify-colors-background-primary);
  --amplify-components-card-border-radius: var(--amplify-radii-xs);
  --amplify-components-card-border-width: 0;
  --amplify-components-card-border-style: solid;
  --amplify-components-card-border-color: transparent;
  --amplify-components-card-box-shadow: none;
  --amplify-components-card-padding: var(--amplify-space-medium);
  --amplify-components-card-outlined-background-color: var(--amplify-components-card-background-color);
  --amplify-components-card-outlined-border-radius: var(--amplify-radii-xs);
  --amplify-components-card-outlined-border-width: var(--amplify-border-widths-small);
  --amplify-components-card-outlined-border-style: solid;
  --amplify-components-card-outlined-border-color: var(--amplify-colors-border-primary);
  --amplify-components-card-outlined-box-shadow: var(--amplify-components-card-box-shadow);
  --amplify-components-card-elevated-background-color: var(--amplify-components-card-background-color);
  --amplify-components-card-elevated-border-radius: var(--amplify-radii-xs);
  --amplify-components-card-elevated-border-width: 0;
  --amplify-components-card-elevated-border-style: solid;
  --amplify-components-card-elevated-border-color: transparent;
  --amplify-components-card-elevated-box-shadow: var(--amplify-shadows-medium);
  --amplify-components-checkbox-cursor: pointer;
  --amplify-components-checkbox-align-items: center;
  --amplify-components-checkbox-disabled-cursor: not-allowed;
  --amplify-components-checkbox-button-position: relative;
  --amplify-components-checkbox-button-align-items: center;
  --amplify-components-checkbox-button-justify-content: center;
  --amplify-components-checkbox-button-color: var(--amplify-colors-font-inverse);
  --amplify-components-checkbox-button-before-width: 100%;
  --amplify-components-checkbox-button-before-height: 100%;
  --amplify-components-checkbox-button-before-border-width: var(--amplify-border-widths-medium);
  --amplify-components-checkbox-button-before-border-radius: 20%;
  --amplify-components-checkbox-button-before-border-style: solid;
  --amplify-components-checkbox-button-before-border-color: var(--amplify-colors-border-primary);
  --amplify-components-checkbox-button-focus-outline-color: var(--amplify-colors-transparent);
  --amplify-components-checkbox-button-focus-outline-style: solid;
  --amplify-components-checkbox-button-focus-outline-width: var(--amplify-outline-widths-medium);
  --amplify-components-checkbox-button-focus-outline-offset: var(--amplify-outline-offsets-medium);
  --amplify-components-checkbox-button-focus-border-color: var(--amplify-colors-border-focus);
  --amplify-components-checkbox-button-focus-box-shadow: var(--amplify-components-fieldcontrol-focus-box-shadow);
  --amplify-components-checkbox-button-disabled-border-color: var(--amplify-colors-border-disabled);
  --amplify-components-checkbox-button-error-border-color: var(--amplify-colors-border-error);
  --amplify-components-checkbox-button-error-focus-border-color: var(--amplify-colors-border-error);
  --amplify-components-checkbox-button-error-focus-box-shadow: var(--amplify-components-fieldcontrol-error-focus-box-shadow);
  --amplify-components-checkbox-icon-background-color: var(--amplify-colors-primary-80);
  --amplify-components-checkbox-icon-border-radius: 20%;
  --amplify-components-checkbox-icon-opacity: var(--amplify-opacities-0);
  --amplify-components-checkbox-icon-transform: scale(0);
  --amplify-components-checkbox-icon-transition-property: all;
  --amplify-components-checkbox-icon-transition-duration: var(--amplify-time-short);
  --amplify-components-checkbox-icon-transition-timing-function: ease-in-out;
  --amplify-components-checkbox-icon-checked-opacity: var(--amplify-opacities-100);
  --amplify-components-checkbox-icon-checked-transform: scale(1);
  --amplify-components-checkbox-icon-checked-disabled-background-color: var(--amplify-colors-background-disabled);
  --amplify-components-checkbox-icon-indeterminate-opacity: var(--amplify-opacities-100);
  --amplify-components-checkbox-icon-indeterminate-transform: scale(1);
  --amplify-components-checkbox-icon-indeterminate-disabled-background-color: var(--amplify-colors-background-disabled);
  --amplify-components-checkbox-label-color: var(--amplify-components-text-color);
  --amplify-components-checkbox-label-disabled-color: var(--amplify-colors-font-disabled);
  --amplify-components-checkboxfield-align-items: flex-start;
  --amplify-components-checkboxfield-align-content: center;
  --amplify-components-checkboxfield-flex-direction: column;
  --amplify-components-checkboxfield-justify-content: center;
  --amplify-components-collection-pagination-current-color: var(--amplify-components-pagination-current-color);
  --amplify-components-collection-pagination-current-background-color: var(--amplify-components-pagination-current-background-color);
  --amplify-components-collection-pagination-button-color: var(--amplify-components-pagination-button-color);
  --amplify-components-collection-pagination-button-hover-background-color: var(--amplify-components-pagination-button-hover-background-color);
  --amplify-components-collection-pagination-button-hover-color: var(--amplify-components-pagination-button-hover-color);
  --amplify-components-collection-pagination-button-disabled-color: var(--amplify-components-pagination-button-disabled-color);
  --amplify-components-collection-search-input-color: var(--amplify-components-searchfield-color);
  --amplify-components-collection-search-button-color: var(--amplify-components-searchfield-button-color);
  --amplify-components-collection-search-button-active-background-color: var(--amplify-components-searchfield-button-active-background-color);
  --amplify-components-collection-search-button-active-border-color: var(--amplify-components-searchfield-button-active-border-color);
  --amplify-components-collection-search-button-active-color: var(--amplify-components-searchfield-button-active-color);
  --amplify-components-collection-search-button-disabled-background-color: var(--amplify-components-searchfield-button-disabled-background-color);
  --amplify-components-collection-search-button-disabled-border-color: var(--amplify-components-searchfield-button-disabled-border-color);
  --amplify-components-collection-search-button-disabled-color: var(--amplify-components-searchfield-button-disabled-color);
  --amplify-components-collection-search-button-focus-background-color: var(--amplify-components-searchfield-button-focus-background-color);
  --amplify-components-collection-search-button-focus-border-color: var(--amplify-components-searchfield-button-focus-border-color);
  --amplify-components-collection-search-button-focus-color: var(--amplify-components-searchfield-button-focus-color);
  --amplify-components-collection-search-button-hover-background-color: var(--amplify-components-searchfield-button-hover-background-color);
  --amplify-components-collection-search-button-hover-border-color: var(--amplify-components-searchfield-button-hover-border-color);
  --amplify-components-collection-search-button-hover-color: var(--amplify-components-searchfield-button-hover-color);
  --amplify-components-copy-font-size: var(--amplify-font-sizes-xs);
  --amplify-components-copy-gap: var(--amplify-space-relative-medium);
  --amplify-components-copy-svg-path-fill: var(--amplify-colors-font-primary);
  --amplify-components-copy-tool-tip-bottom: var(--amplify-space-large);
  --amplify-components-copy-tool-tip-color: var(--amplify-colors-teal-100);
  --amplify-components-copy-tool-tip-font-size: var(--amplify-font-sizes-xxs);
  --amplify-components-countrycodeselect-height: var(--amplify-space-relative-full);
  --amplify-components-divider-border-style: solid;
  --amplify-components-divider-border-color: var(--amplify-colors-border-primary);
  --amplify-components-divider-border-width: var(--amplify-border-widths-medium);
  --amplify-components-divider-label-color: var(--amplify-colors-font-tertiary);
  --amplify-components-divider-label-padding-inline: var(--amplify-space-medium);
  --amplify-components-divider-label-font-size: var(--amplify-font-sizes-small);
  --amplify-components-divider-label-background-color: var(--amplify-colors-background-primary);
  --amplify-components-divider-small-border-width: var(--amplify-border-widths-small);
  --amplify-components-divider-large-border-width: var(--amplify-border-widths-large);
  --amplify-components-divider-opacity: var(--amplify-opacities-60);
  --amplify-components-dropzone-background-color: var(--amplify-colors-background-primary);
  --amplify-components-dropzone-border-radius: var(--amplify-radii-small);
  --amplify-components-dropzone-border-color: var(--amplify-colors-border-primary);
  --amplify-components-dropzone-border-style: dashed;
  --amplify-components-dropzone-border-width: var(--amplify-border-widths-small);
  --amplify-components-dropzone-color: var(--amplify-colors-font-primary);
  --amplify-components-dropzone-gap: var(--amplify-space-small);
  --amplify-components-dropzone-padding-block: var(--amplify-space-xl);
  --amplify-components-dropzone-padding-inline: var(--amplify-space-large);
  --amplify-components-dropzone-text-align: center;
  --amplify-components-dropzone-active-background-color: var(--amplify-colors-primary-10);
  --amplify-components-dropzone-active-border-radius: var(--amplify-components-dropzone-border-radius);
  --amplify-components-dropzone-active-border-color: var(--amplify-colors-border-pressed);
  --amplify-components-dropzone-active-border-style: var(--amplify-components-dropzone-border-style);
  --amplify-components-dropzone-active-border-width: var(--amplify-components-dropzone-border-width);
  --amplify-components-dropzone-active-color: var(--amplify-colors-font-primary);
  --amplify-components-dropzone-disabled-background-color: var(--amplify-colors-background-disabled);
  --amplify-components-dropzone-disabled-border-radius: var(--amplify-components-dropzone-border-radius);
  --amplify-components-dropzone-disabled-border-color: var(--amplify-colors-border-disabled);
  --amplify-components-dropzone-disabled-border-style: var(--amplify-components-dropzone-border-style);
  --amplify-components-dropzone-disabled-border-width: var(--amplify-components-dropzone-border-width);
  --amplify-components-dropzone-disabled-color: var(--amplify-colors-font-disabled);
  --amplify-components-dropzone-accepted-background-color: var(--amplify-colors-background-success);
  --amplify-components-dropzone-accepted-border-radius: var(--amplify-components-dropzone-border-radius);
  --amplify-components-dropzone-accepted-border-color: var(--amplify-colors-border-success);
  --amplify-components-dropzone-accepted-border-style: var(--amplify-components-dropzone-border-style);
  --amplify-components-dropzone-accepted-border-width: var(--amplify-components-dropzone-border-width);
  --amplify-components-dropzone-accepted-color: var(--amplify-colors-font-success);
  --amplify-components-dropzone-rejected-background-color: var(--amplify-colors-background-error);
  --amplify-components-dropzone-rejected-border-radius: var(--amplify-components-dropzone-border-radius);
  --amplify-components-dropzone-rejected-border-color: var(--amplify-colors-border-pressed);
  --amplify-components-dropzone-rejected-border-style: var(--amplify-components-dropzone-border-style);
  --amplify-components-dropzone-rejected-border-width: var(--amplify-components-dropzone-border-width);
  --amplify-components-dropzone-rejected-color: var(--amplify-colors-font-error);
  --amplify-components-field-gap: var(--amplify-space-xs);
  --amplify-components-field-font-size: var(--amplify-font-sizes-medium);
  --amplify-components-field-flex-direction: column;
  --amplify-components-field-small-gap: var(--amplify-space-xxxs);
  --amplify-components-field-small-font-size: var(--amplify-font-sizes-small);
  --amplify-components-field-large-gap: var(--amplify-space-small);
  --amplify-components-field-large-font-size: var(--amplify-font-sizes-large);
  --amplify-components-field-label-color: var(--amplify-colors-font-secondary);
  --amplify-components-fieldcontrol-border-style: solid;
  --amplify-components-fieldcontrol-border-color: var(--amplify-colors-border-primary);
  --amplify-components-fieldcontrol-border-width: var(--amplify-border-widths-small);
  --amplify-components-fieldcontrol-border-radius: var(--amplify-radii-small);
  --amplify-components-fieldcontrol-color: var(--amplify-colors-font-primary);
  --amplify-components-fieldcontrol-padding-block-start: var(--amplify-space-xs);
  --amplify-components-fieldcontrol-padding-block-end: var(--amplify-space-xs);
  --amplify-components-fieldcontrol-padding-inline-start: var(--amplify-space-medium);
  --amplify-components-fieldcontrol-padding-inline-end: var(--amplify-space-medium);
  --amplify-components-fieldcontrol-font-size: var(--amplify-components-field-font-size);
  --amplify-components-fieldcontrol-line-height: var(--amplify-line-heights-medium);
  --amplify-components-fieldcontrol-transition-duration: var(--amplify-time-medium);
  --amplify-components-fieldcontrol-outline-color: var(--amplify-colors-transparent);
  --amplify-components-fieldcontrol-outline-style: solid;
  --amplify-components-fieldcontrol-outline-width: var(--amplify-outline-widths-medium);
  --amplify-components-fieldcontrol-outline-offset: var(--amplify-outline-offsets-medium);
  --amplify-components-fieldcontrol-small-font-size: var(--amplify-components-field-small-font-size);
  --amplify-components-fieldcontrol-small-padding-block-start: var(--amplify-space-xxs);
  --amplify-components-fieldcontrol-small-padding-block-end: var(--amplify-space-xxs);
  --amplify-components-fieldcontrol-small-padding-inline-start: var(--amplify-space-small);
  --amplify-components-fieldcontrol-small-padding-inline-end: var(--amplify-space-small);
  --amplify-components-fieldcontrol-large-font-size: var(--amplify-components-field-large-font-size);
  --amplify-components-fieldcontrol-large-padding-block-start: var(--amplify-space-xs);
  --amplify-components-fieldcontrol-large-padding-block-end: var(--amplify-space-xs);
  --amplify-components-fieldcontrol-large-padding-inline-start: var(--amplify-space-medium);
  --amplify-components-fieldcontrol-large-padding-inline-end: var(--amplify-space-medium);
  --amplify-components-fieldcontrol-quiet-border-style: none;
  --amplify-components-fieldcontrol-quiet-border-inline-start: none;
  --amplify-components-fieldcontrol-quiet-border-inline-end: none;
  --amplify-components-fieldcontrol-quiet-border-block-start: none;
  --amplify-components-fieldcontrol-quiet-border-radius: 0;
  --amplify-components-fieldcontrol-quiet-focus-border-block-end-color: transparent;
  --amplify-components-fieldcontrol-quiet-focus-box-shadow: var(--amplify-components-fieldcontrol-focus-box-shadow);
  --amplify-components-fieldcontrol-quiet-error-border-block-end-color: var(--amplify-colors-border-error);
  --amplify-components-fieldcontrol-quiet-error-focus-border-block-end-color: transparent;
  --amplify-components-fieldcontrol-quiet-error-focus-box-shadow: var(--amplify-components-fieldcontrol-error-focus-box-shadow);
  --amplify-components-fieldcontrol-focus-border-color: var(--amplify-colors-border-focus);
  --amplify-components-fieldcontrol-focus-box-shadow: 0px 0px 0px 2px var(--amplify-colors-border-focus);
  --amplify-components-fieldcontrol-disabled-color: var(--amplify-colors-font-disabled);
  --amplify-components-fieldcontrol-disabled-cursor: not-allowed;
  --amplify-components-fieldcontrol-disabled-border-color: var(--amplify-colors-transparent);
  --amplify-components-fieldcontrol-disabled-background-color: var(--amplify-colors-background-disabled);
  --amplify-components-fieldcontrol-error-border-color: var(--amplify-colors-border-error);
  --amplify-components-fieldcontrol-error-color: var(--amplify-colors-font-error);
  --amplify-components-fieldcontrol-error-focus-box-shadow: 0px 0px 0px 2px var(--amplify-colors-border-error);
  --amplify-components-fieldcontrol-info-focus-box-shadow: 0px 0px 0px 2px var(--amplify-colors-blue-100);
  --amplify-components-fieldcontrol-warning-focus-box-shadow: 0px 0px 0px 2px var(--amplify-colors-orange-100);
  --amplify-components-fieldcontrol-success-focus-box-shadow: 0px 0px 0px 2px var(--amplify-colors-green-100);
  --amplify-components-fieldcontrol-overlay-focus-box-shadow: 0px 0px 0px 2px var(--amplify-colors-overlay-90);
  --amplify-components-fieldgroup-gap: var(--amplify-space-zero);
  --amplify-components-fieldgroup-vertical-align-items: center;
  --amplify-components-fieldgroup-outer-align-items: center;
  --amplify-components-fieldmessages-error-color: var(--amplify-colors-font-error);
  --amplify-components-fieldmessages-error-font-size: var(--amplify-font-sizes-small);
  --amplify-components-fieldmessages-description-color: var(--amplify-colors-font-secondary);
  --amplify-components-fieldmessages-description-font-style: italic;
  --amplify-components-fieldmessages-description-font-size: var(--amplify-font-sizes-small);
  --amplify-components-fieldset-background-color: transparent;
  --amplify-components-fieldset-border-radius: var(--amplify-radii-xs);
  --amplify-components-fieldset-flex-direction: column;
  --amplify-components-fieldset-gap: var(--amplify-components-field-gap);
  --amplify-components-fieldset-legend-color: var(--amplify-colors-font-primary);
  --amplify-components-fieldset-legend-font-size: var(--amplify-components-field-font-size);
  --amplify-components-fieldset-legend-font-weight: var(--amplify-font-weights-bold);
  --amplify-components-fieldset-legend-line-height: var(--amplify-line-heights-medium);
  --amplify-components-fieldset-legend-small-font-size: var(--amplify-components-field-small-font-size);
  --amplify-components-fieldset-legend-large-font-size: var(--amplify-components-field-large-font-size);
  --amplify-components-fieldset-outlined-padding: var(--amplify-space-medium);
  --amplify-components-fieldset-outlined-border-color: var(--amplify-colors-neutral-40);
  --amplify-components-fieldset-outlined-border-width: var(--amplify-border-widths-small);
  --amplify-components-fieldset-outlined-border-style: solid;
  --amplify-components-fieldset-outlined-small-padding: var(--amplify-space-small);
  --amplify-components-fieldset-outlined-large-padding: var(--amplify-space-large);
  --amplify-components-fieldset-small-gap: var(--amplify-components-field-small-gap);
  --amplify-components-fieldset-large-gap: var(--amplify-components-field-large-gap);
  --amplify-components-fileuploader-dropzone-background-color: var(--amplify-colors-background-primary);
  --amplify-components-fileuploader-dropzone-border-radius: var(--amplify-radii-small);
  --amplify-components-fileuploader-dropzone-border-color: var(--amplify-colors-border-primary);
  --amplify-components-fileuploader-dropzone-border-style: dashed;
  --amplify-components-fileuploader-dropzone-border-width: var(--amplify-border-widths-small);
  --amplify-components-fileuploader-dropzone-gap: var(--amplify-space-small);
  --amplify-components-fileuploader-dropzone-padding-block: var(--amplify-space-xl);
  --amplify-components-fileuploader-dropzone-padding-inline: var(--amplify-space-large);
  --amplify-components-fileuploader-dropzone-text-align: center;
  --amplify-components-fileuploader-dropzone-active-background-color: var(--amplify-colors-primary-10);
  --amplify-components-fileuploader-dropzone-active-border-radius: var(--amplify-components-fileuploader-dropzone-border-radius);
  --amplify-components-fileuploader-dropzone-active-border-color: var(--amplify-colors-border-pressed);
  --amplify-components-fileuploader-dropzone-active-border-style: var(--amplify-components-fileuploader-dropzone-border-style);
  --amplify-components-fileuploader-dropzone-active-border-width: var(--amplify-border-widths-medium);
  --amplify-components-fileuploader-dropzone-icon-color: var(--amplify-colors-border-primary);
  --amplify-components-fileuploader-dropzone-icon-font-size: var(--amplify-font-sizes-xxl);
  --amplify-components-fileuploader-dropzone-text-color: var(--amplify-colors-font-tertiary);
  --amplify-components-fileuploader-dropzone-text-font-size: var(--amplify-font-sizes-medium);
  --amplify-components-fileuploader-dropzone-text-font-weight: var(--amplify-font-weights-bold);
  --amplify-components-fileuploader-file-background-color: var(--amplify-colors-background-primary);
  --amplify-components-fileuploader-file-border-radius: var(--amplify-radii-small);
  --amplify-components-fileuploader-file-border-color: var(--amplify-colors-border-primary);
  --amplify-components-fileuploader-file-border-style: solid;
  --amplify-components-fileuploader-file-border-width: var(--amplify-border-widths-small);
  --amplify-components-fileuploader-file-padding-block: var(--amplify-space-xs);
  --amplify-components-fileuploader-file-padding-inline: var(--amplify-space-small);
  --amplify-components-fileuploader-file-gap: var(--amplify-space-small);
  --amplify-components-fileuploader-file-align-items: baseline;
  --amplify-components-fileuploader-file-name-font-size: var(--amplify-font-sizes-medium);
  --amplify-components-fileuploader-file-name-font-weight: var(--amplify-font-weights-bold);
  --amplify-components-fileuploader-file-name-color: var(--amplify-colors-font-primary);
  --amplify-components-fileuploader-file-size-font-size: var(--amplify-font-sizes-small);
  --amplify-components-fileuploader-file-size-font-weight: var(--amplify-font-weights-normal);
  --amplify-components-fileuploader-file-size-color: var(--amplify-colors-font-tertiary);
  --amplify-components-fileuploader-file-image-width: var(--amplify-space-xxl);
  --amplify-components-fileuploader-file-image-height: var(--amplify-space-xxl);
  --amplify-components-fileuploader-file-image-background-color: var(--amplify-colors-background-secondary);
  --amplify-components-fileuploader-file-image-color: var(--amplify-colors-font-tertiary);
  --amplify-components-fileuploader-file-image-border-radius: var(--amplify-radii-small);
  --amplify-components-fileuploader-filelist-flex-direction: column;
  --amplify-components-fileuploader-filelist-gap: var(--amplify-space-small);
  --amplify-components-fileuploader-loader-stroke-linecap: round;
  --amplify-components-fileuploader-loader-stroke-empty: var(--amplify-colors-border-secondary);
  --amplify-components-fileuploader-loader-stroke-filled: var(--amplify-components-loader-stroke-filled);
  --amplify-components-fileuploader-loader-stroke-width: var(--amplify-border-widths-large);
  --amplify-components-fileuploader-previewer-background-color: var(--amplify-colors-background-primary);
  --amplify-components-fileuploader-previewer-border-color: var(--amplify-colors-border-primary);
  --amplify-components-fileuploader-previewer-border-style: solid;
  --amplify-components-fileuploader-previewer-border-width: var(--amplify-border-widths-small);
  --amplify-components-fileuploader-previewer-border-radius: var(--amplify-radii-small);
  --amplify-components-fileuploader-previewer-padding-block: var(--amplify-space-zero);
  --amplify-components-fileuploader-previewer-padding-inline: var(--amplify-space-zero);
  --amplify-components-fileuploader-previewer-max-height: 40rem;
  --amplify-components-fileuploader-previewer-max-width: auto;
  --amplify-components-fileuploader-previewer-text-font-size: var(--amplify-font-sizes-medium);
  --amplify-components-fileuploader-previewer-text-font-weight: var(--amplify-font-weights-bold);
  --amplify-components-fileuploader-previewer-text-color: var(--amplify-colors-font-primary);
  --amplify-components-fileuploader-previewer-body-padding-block: var(--amplify-space-medium);
  --amplify-components-fileuploader-previewer-body-padding-inline: var(--amplify-space-medium);
  --amplify-components-fileuploader-previewer-body-gap: var(--amplify-space-small);
  --amplify-components-fileuploader-previewer-footer-justify-content: flex-end;
  --amplify-components-flex-gap: var(--amplify-space-medium);
  --amplify-components-flex-justify-content: normal;
  --amplify-components-flex-align-items: stretch;
  --amplify-components-flex-align-content: normal;
  --amplify-components-flex-flex-wrap: nowrap;
  --amplify-components-heading-1-font-size: var(--amplify-font-sizes-xxxxl);
  --amplify-components-heading-1-font-weight: var(--amplify-font-weights-light);
  --amplify-components-heading-2-font-size: var(--amplify-font-sizes-xxxl);
  --amplify-components-heading-2-font-weight: var(--amplify-font-weights-normal);
  --amplify-components-heading-3-font-size: var(--amplify-font-sizes-xxl);
  --amplify-components-heading-3-font-weight: var(--amplify-font-weights-medium);
  --amplify-components-heading-4-font-size: var(--amplify-font-sizes-xl);
  --amplify-components-heading-4-font-weight: var(--amplify-font-weights-semibold);
  --amplify-components-heading-5-font-size: var(--amplify-font-sizes-large);
  --amplify-components-heading-5-font-weight: var(--amplify-font-weights-bold);
  --amplify-components-heading-6-font-size: var(--amplify-font-sizes-medium);
  --amplify-components-heading-6-font-weight: var(--amplify-font-weights-extrabold);
  --amplify-components-heading-color: var(--amplify-colors-font-primary);
  --amplify-components-heading-line-height: var(--amplify-line-heights-small);
  --amplify-components-icon-line-height: 1;
  --amplify-components-icon-height: 1em;
  --amplify-components-highlightmatch-highlighted-font-weight: var(--amplify-font-weights-bold);
  --amplify-components-image-max-width: 100%;
  --amplify-components-image-height: auto;
  --amplify-components-image-object-fit: initial;
  --amplify-components-image-object-position: initial;
  --amplify-components-inappmessaging-banner-height: 150px ;
  --amplify-components-inappmessaging-banner-width: 400px ;
  --amplify-components-inappmessaging-button-background-color: #e8e8e8;
  --amplify-components-inappmessaging-button-border-radius: 5px;
  --amplify-components-inappmessaging-button-color: black;
  --amplify-components-inappmessaging-dialog-height: 50vh;
  --amplify-components-inappmessaging-dialog-min-height: 400px;
  --amplify-components-inappmessaging-dialog-min-width: 400px;
  --amplify-components-inappmessaging-dialog-width: 30vw;
  --amplify-components-inappmessaging-header-font-size: var(--amplify-font-sizes-medium);
  --amplify-components-inappmessaging-header-font-weight: var(--amplify-font-weights-extrabold);
  --amplify-components-input-color: var(--amplify-components-fieldcontrol-color);
  --amplify-components-input-border-color: var(--amplify-components-fieldcontrol-border-color);
  --amplify-components-input-font-size: var(--amplify-components-fieldcontrol-font-size);
  --amplify-components-input-focus-border-color: var(--amplify-components-fieldcontrol-focus-border-color);
  --amplify-components-link-active-color: var(--amplify-colors-font-active);
  --amplify-components-link-color: var(--amplify-colors-font-interactive);
  --amplify-components-link-focus-color: var(--amplify-colors-font-focus);
  --amplify-components-link-hover-color: var(--amplify-colors-font-hover);
  --amplify-components-link-visited-color: var(--amplify-colors-font-interactive);
  --amplify-components-liveness-camera-module-background-color: var(--amplify-colors-background-primary);
  --amplify-components-loader-width: var(--amplify-font-sizes-medium);
  --amplify-components-loader-height: var(--amplify-font-sizes-medium);
  --amplify-components-loader-font-size: var(--amplify-font-sizes-xs);
  --amplify-components-loader-stroke-empty: var(--amplify-colors-neutral-20);
  --amplify-components-loader-stroke-filled: var(--amplify-colors-primary-80);
  --amplify-components-loader-stroke-linecap: round;
  --amplify-components-loader-animation-duration: 1s;
  --amplify-components-loader-small-width: var(--amplify-font-sizes-small);
  --amplify-components-loader-small-height: var(--amplify-font-sizes-small);
  --amplify-components-loader-small-font-size: var(--amplify-font-sizes-xxs);
  --amplify-components-loader-large-width: var(--amplify-font-sizes-large);
  --amplify-components-loader-large-height: var(--amplify-font-sizes-large);
  --amplify-components-loader-large-font-size: var(--amplify-font-sizes-small);
  --amplify-components-loader-linear-width: 100%;
  --amplify-components-loader-linear-min-width: 5rem;
  --amplify-components-loader-linear-font-size: var(--amplify-font-sizes-xxs);
  --amplify-components-loader-linear-stroke-width: var(--amplify-font-sizes-xxs);
  --amplify-components-loader-linear-stroke-filled: var(--amplify-colors-primary-80);
  --amplify-components-loader-linear-stroke-empty: var(--amplify-colors-neutral-20);
  --amplify-components-loader-linear-stroke-linecap: round;
  --amplify-components-loader-linear-animation-duration: 1s;
  --amplify-components-loader-linear-small-stroke-width: var(--amplify-font-sizes-xxxs);
  --amplify-components-loader-linear-small-font-size: var(--amplify-font-sizes-xxxs);
  --amplify-components-loader-linear-large-stroke-width: var(--amplify-font-sizes-xs);
  --amplify-components-loader-linear-large-font-size: var(--amplify-font-sizes-xs);
  --amplify-components-loader-text-fill: var(--amplify-colors-font-primary);
  --amplify-components-menu-background-color: var(--amplify-colors-background-primary);
  --amplify-components-menu-border-radius: var(--amplify-radii-medium);
  --amplify-components-menu-border-width: var(--amplify-border-widths-small);
  --amplify-components-menu-border-style: solid;
  --amplify-components-menu-border-color: var(--amplify-colors-border-primary);
  --amplify-components-menu-box-shadow: var(--amplify-shadows-large);
  --amplify-components-menu-flex-direction: column;
  --amplify-components-menu-gap: var(--amplify-space-zero);
  --amplify-components-menu-max-width: 30rem;
  --amplify-components-menu-min-width: 14rem;
  --amplify-components-menu-small-width: var(--amplify-font-sizes-medium);
  --amplify-components-menu-small-height: var(--amplify-font-sizes-medium);
  --amplify-components-menu-large-width: var(--amplify-font-sizes-xxxl);
  --amplify-components-menu-large-height: var(--amplify-font-sizes-xxxl);
  --amplify-components-menu-item-min-height: 2.5rem;
  --amplify-components-menu-item-padding-inline-start: var(--amplify-space-medium);
  --amplify-components-menu-item-padding-inline-end: var(--amplify-space-medium);
  --amplify-components-message-align-items: center;
  --amplify-components-message-background-color: var(--amplify-colors-background-tertiary);
  --amplify-components-message-border-color: transparent;
  --amplify-components-message-border-style: solid;
  --amplify-components-message-border-width: var(--amplify-border-widths-small);
  --amplify-components-message-border-radius: var(--amplify-radii-xs);
  --amplify-components-message-color: var(--amplify-colors-font-primary);
  --amplify-components-message-justify-content: flex-start;
  --amplify-components-message-padding-block: var(--amplify-space-small);
  --amplify-components-message-padding-inline: var(--amplify-space-medium);
  --amplify-components-message-line-height: var(--amplify-line-heights-small);
  --amplify-components-message-icon-size: var(--amplify-font-sizes-xl);
  --amplify-components-message-heading-font-size: var(--amplify-font-sizes-medium);
  --amplify-components-message-heading-font-weight: var(--amplify-font-weights-bold);
  --amplify-components-message-dismiss-gap: var(--amplify-space-xxs);
  --amplify-components-message-plain-color: var(--amplify-colors-font-primary);
  --amplify-components-message-plain-background-color: var(--amplify-colors-background-primary);
  --amplify-components-message-plain-border-color: transparent;
  --amplify-components-message-plain-info-color: var(--amplify-colors-font-info);
  --amplify-components-message-plain-info-background-color: var(--amplify-colors-background-primary);
  --amplify-components-message-plain-info-border-color: transparent;
  --amplify-components-message-plain-error-color: var(--amplify-colors-font-error);
  --amplify-components-message-plain-error-background-color: var(--amplify-colors-background-primary);
  --amplify-components-message-plain-error-border-color: transparent;
  --amplify-components-message-plain-success-color: var(--amplify-colors-font-success);
  --amplify-components-message-plain-success-background-color: var(--amplify-colors-background-primary);
  --amplify-components-message-plain-success-border-color: transparent;
  --amplify-components-message-plain-warning-color: var(--amplify-colors-font-warning);
  --amplify-components-message-plain-warning-background-color: var(--amplify-colors-background-primary);
  --amplify-components-message-plain-warning-border-color: transparent;
  --amplify-components-message-outlined-color: var(--amplify-colors-font-primary);
  --amplify-components-message-outlined-background-color: var(--amplify-colors-background-primary);
  --amplify-components-message-outlined-border-color: var(--amplify-colors-border-primary);
  --amplify-components-message-outlined-info-color: var(--amplify-colors-font-info);
  --amplify-components-message-outlined-info-background-color: var(--amplify-colors-background-primary);
  --amplify-components-message-outlined-info-border-color: var(--amplify-colors-border-info);
  --amplify-components-message-outlined-error-color: var(--amplify-colors-font-error);
  --amplify-components-message-outlined-error-background-color: var(--amplify-colors-background-primary);
  --amplify-components-message-outlined-error-border-color: var(--amplify-colors-border-error);
  --amplify-components-message-outlined-success-color: var(--amplify-colors-font-success);
  --amplify-components-message-outlined-success-background-color: var(--amplify-colors-background-primary);
  --amplify-components-message-outlined-success-border-color: var(--amplify-colors-border-success);
  --amplify-components-message-outlined-warning-color: var(--amplify-colors-font-warning);
  --amplify-components-message-outlined-warning-background-color: var(--amplify-colors-background-primary);
  --amplify-components-message-outlined-warning-border-color: var(--amplify-colors-border-warning);
  --amplify-components-message-filled-color: var(--amplify-colors-font-primary);
  --amplify-components-message-filled-background-color: var(--amplify-colors-background-secondary);
  --amplify-components-message-filled-border-color: transparent;
  --amplify-components-message-filled-info-color: var(--amplify-colors-font-info);
  --amplify-components-message-filled-info-background-color: var(--amplify-colors-background-info);
  --amplify-components-message-filled-info-border-color: transparent;
  --amplify-components-message-filled-error-color: var(--amplify-colors-font-error);
  --amplify-components-message-filled-error-background-color: var(--amplify-colors-background-error);
  --amplify-components-message-filled-error-border-color: transparent;
  --amplify-components-message-filled-success-color: var(--amplify-colors-font-success);
  --amplify-components-message-filled-success-background-color: var(--amplify-colors-background-success);
  --amplify-components-message-filled-success-border-color: transparent;
  --amplify-components-message-filled-warning-color: var(--amplify-colors-font-warning);
  --amplify-components-message-filled-warning-background-color: var(--amplify-colors-background-warning);
  --amplify-components-message-filled-warning-border-color: transparent;
  --amplify-components-pagination-current-align-items: center;
  --amplify-components-pagination-current-justify-content: center;
  --amplify-components-pagination-current-color: var(--amplify-colors-font-inverse);
  --amplify-components-pagination-current-font-size: var(--amplify-font-sizes-small);
  --amplify-components-pagination-current-background-color: var(--amplify-colors-overlay-40);
  --amplify-components-pagination-button-color: var(--amplify-colors-font-primary);
  --amplify-components-pagination-button-padding-inline-start: var(--amplify-space-xxs);
  --amplify-components-pagination-button-padding-inline-end: var(--amplify-space-xxs);
  --amplify-components-pagination-button-transition-property: background-color;
  --amplify-components-pagination-button-transition-duration: var(--amplify-time-medium);
  --amplify-components-pagination-button-hover-background-color: var(--amplify-colors-overlay-10);
  --amplify-components-pagination-button-hover-color: var(--amplify-colors-font-primary);
  --amplify-components-pagination-button-disabled-color: var(--amplify-colors-font-disabled);
  --amplify-components-pagination-ellipsis-align-items: baseline;
  --amplify-components-pagination-ellipsis-justify-content: center;
  --amplify-components-pagination-ellipsis-padding-inline-start: var(--amplify-space-xs);
  --amplify-components-pagination-ellipsis-padding-inline-end: var(--amplify-space-xs);
  --amplify-components-pagination-item-container-margin-left: var(--amplify-space-xxxs);
  --amplify-components-pagination-item-container-margin-right: var(--amplify-space-xxxs);
  --amplify-components-pagination-item-shared-height: var(--amplify-font-sizes-xxl);
  --amplify-components-pagination-item-shared-min-width: var(--amplify-font-sizes-xxl);
  --amplify-components-pagination-item-shared-border-radius: var(--amplify-font-sizes-medium);
  --amplify-components-passwordfield-color: var(--amplify-components-fieldcontrol-color);
  --amplify-components-passwordfield-button-color: var(--amplify-components-button-color);
  --amplify-components-passwordfield-button-active-background-color: var(--amplify-components-button-active-background-color);
  --amplify-components-passwordfield-button-active-border-color: var(--amplify-components-button-active-border-color);
  --amplify-components-passwordfield-button-active-color: var(--amplify-components-button-active-color);
  --amplify-components-passwordfield-button-disabled-background-color: var(--amplify-components-button-disabled-background-color);
  --amplify-components-passwordfield-button-disabled-border-color: var(--amplify-components-button-disabled-border-color);
  --amplify-components-passwordfield-button-disabled-color: var(--amplify-components-button-disabled-color);
  --amplify-components-passwordfield-button-error-color: var(--amplify-components-button-outlined-error-color);
  --amplify-components-passwordfield-button-error-background-color: var(--amplify-components-button-outlined-error-background-color);
  --amplify-components-passwordfield-button-error-border-color: var(--amplify-components-button-outlined-error-border-color);
  --amplify-components-passwordfield-button-error-active-border-color: var(--amplify-components-button-outlined-error-active-border-color);
  --amplify-components-passwordfield-button-error-active-background-color: var(--amplify-components-button-outlined-error-active-background-color);
  --amplify-components-passwordfield-button-error-active-color: var(--amplify-components-button-outlined-error-active-color);
  --amplify-components-passwordfield-button-error-focus-border-color: var(--amplify-components-button-outlined-error-focus-border-color);
  --amplify-components-passwordfield-button-error-focus-background-color: var(--amplify-components-button-outlined-error-focus-background-color);
  --amplify-components-passwordfield-button-error-focus-color: var(--amplify-components-button-outlined-error-focus-color);
  --amplify-components-passwordfield-button-error-focus-box-shadow: var(--amplify-components-button-outlined-error-focus-box-shadow);
  --amplify-components-passwordfield-button-error-hover-border-color: var(--amplify-components-button-outlined-error-hover-border-color);
  --amplify-components-passwordfield-button-error-hover-background-color: var(--amplify-components-button-outlined-error-hover-background-color);
  --amplify-components-passwordfield-button-error-hover-color: var(--amplify-components-button-outlined-error-hover-color);
  --amplify-components-passwordfield-button-focus-background-color: var(--amplify-components-button-focus-background-color);
  --amplify-components-passwordfield-button-focus-border-color: var(--amplify-components-button-focus-border-color);
  --amplify-components-passwordfield-button-focus-color: var(--amplify-components-button-focus-color);
  --amplify-components-passwordfield-button-hover-background-color: var(--amplify-components-button-hover-background-color);
  --amplify-components-passwordfield-button-hover-border-color: var(--amplify-components-button-hover-border-color);
  --amplify-components-passwordfield-button-hover-color: var(--amplify-components-button-hover-color);
  --amplify-components-phonenumberfield-color: var(--amplify-components-fieldcontrol-color);
  --amplify-components-phonenumberfield-border-color: var(--amplify-components-fieldcontrol-border-color);
  --amplify-components-phonenumberfield-font-size: var(--amplify-components-fieldcontrol-font-size);
  --amplify-components-phonenumberfield-focus-border-color: var(--amplify-components-fieldcontrol-focus-border-color);
  --amplify-components-placeholder-border-radius: var(--amplify-radii-small);
  --amplify-components-placeholder-transition-duration: var(--amplify-time-long);
  --amplify-components-placeholder-start-color: var(--amplify-colors-background-secondary);
  --amplify-components-placeholder-end-color: var(--amplify-colors-background-tertiary);
  --amplify-components-placeholder-small-height: var(--amplify-space-small);
  --amplify-components-placeholder-default-height: var(--amplify-space-medium);
  --amplify-components-placeholder-large-height: var(--amplify-space-large);
  --amplify-components-radio-align-items: center;
  --amplify-components-radio-justify-content: flex-start;
  --amplify-components-radio-gap: inherit;
  --amplify-components-radio-disabled-cursor: not-allowed;
  --amplify-components-radio-button-align-items: center;
  --amplify-components-radio-button-justify-content: center;
  --amplify-components-radio-button-width: var(--amplify-font-sizes-medium);
  --amplify-components-radio-button-height: var(--amplify-font-sizes-medium);
  --amplify-components-radio-button-box-sizing: border-box;
  --amplify-components-radio-button-border-width: var(--amplify-border-widths-medium);
  --amplify-components-radio-button-border-style: solid;
  --amplify-components-radio-button-border-radius: 50%;
  --amplify-components-radio-button-border-color: var(--amplify-colors-border-primary);
  --amplify-components-radio-button-color: var(--amplify-colors-background-primary);
  --amplify-components-radio-button-background-color: var(--amplify-colors-background-primary);
  --amplify-components-radio-button-transition-property: all;
  --amplify-components-radio-button-transition-duration: var(--amplify-time-medium);
  --amplify-components-radio-button-outline-color: var(--amplify-colors-transparent);
  --amplify-components-radio-button-outline-style: solid;
  --amplify-components-radio-button-outline-width: var(--amplify-outline-widths-medium);
  --amplify-components-radio-button-outline-offset: var(--amplify-outline-offsets-medium);
  --amplify-components-radio-button-padding: var(--amplify-border-widths-medium);
  --amplify-components-radio-button-small-width: var(--amplify-font-sizes-small);
  --amplify-components-radio-button-small-height: var(--amplify-font-sizes-small);
  --amplify-components-radio-button-large-width: var(--amplify-font-sizes-large);
  --amplify-components-radio-button-large-height: var(--amplify-font-sizes-large);
  --amplify-components-radio-button-checked-color: var(--amplify-colors-primary-80);
  --amplify-components-radio-button-checked-disabled-color: var(--amplify-colors-background-disabled);
  --amplify-components-radio-button-focus-border-color: var(--amplify-colors-border-focus);
  --amplify-components-radio-button-focus-box-shadow: var(--amplify-components-fieldcontrol-focus-box-shadow);
  --amplify-components-radio-button-error-border-color: var(--amplify-colors-border-error);
  --amplify-components-radio-button-error-focus-box-shadow: var(--amplify-components-fieldcontrol-error-focus-box-shadow);
  --amplify-components-radio-button-disabled-border-color: var(--amplify-colors-border-disabled);
  --amplify-components-radio-button-disabled-background-color: var(--amplify-colors-background-primary);
  --amplify-components-radio-label-color: var(--amplify-components-text-color);
  --amplify-components-radio-label-disabled-color: var(--amplify-colors-font-disabled);
  --amplify-components-radiogroup-radio-border-width: var(--amplify-components-radio-button-border-width);
  --amplify-components-radiogroup-radio-border-color: var(--amplify-components-radio-button-border-color);
  --amplify-components-radiogroup-radio-background-color: var(--amplify-components-radio-button-background-color);
  --amplify-components-radiogroup-radio-checked-color: var(--amplify-components-radio-button-checked-color);
  --amplify-components-radiogroup-radio-label-color: var(--amplify-components-radio-label-color);
  --amplify-components-radiogroup-legend-color: var(--amplify-components-fieldset-legend-color);
  --amplify-components-radiogroup-legend-font-weight: var(--amplify-font-weights-normal);
  --amplify-components-rating-large-size: var(--amplify-font-sizes-xxxl);
  --amplify-components-rating-default-size: var(--amplify-font-sizes-xl);
  --amplify-components-rating-small-size: var(--amplify-font-sizes-small);
  --amplify-components-rating-filled-color: var(--amplify-colors-secondary-80);
  --amplify-components-rating-empty-color: var(--amplify-colors-background-tertiary);
  --amplify-components-searchfield-color: var(--amplify-components-fieldcontrol-color);
  --amplify-components-searchfield-button-color: var(--amplify-components-button-color);
  --amplify-components-searchfield-button-background-color: var(--amplify-colors-background-primary);
  --amplify-components-searchfield-button-active-background-color: var(--amplify-components-button-active-background-color);
  --amplify-components-searchfield-button-active-border-color: var(--amplify-components-button-active-border-color);
  --amplify-components-searchfield-button-active-color: var(--amplify-components-button-active-color);
  --amplify-components-searchfield-button-disabled-background-color: var(--amplify-components-button-disabled-background-color);
  --amplify-components-searchfield-button-disabled-border-color: var(--amplify-components-button-disabled-border-color);
  --amplify-components-searchfield-button-disabled-color: var(--amplify-components-button-disabled-color);
  --amplify-components-searchfield-button-focus-background-color: var(--amplify-components-button-focus-background-color);
  --amplify-components-searchfield-button-focus-border-color: var(--amplify-components-button-focus-border-color);
  --amplify-components-searchfield-button-focus-color: var(--amplify-components-button-focus-color);
  --amplify-components-searchfield-button-hover-background-color: var(--amplify-components-button-hover-background-color);
  --amplify-components-searchfield-button-hover-border-color: var(--amplify-components-button-hover-border-color);
  --amplify-components-searchfield-button-hover-color: var(--amplify-components-button-hover-color);
  --amplify-components-select-color: var(--amplify-components-fieldcontrol-color);
  --amplify-components-select-background-color: var(--amplify-colors-background-primary);
  --amplify-components-select-padding-inline-end: var(--amplify-space-xxl);
  --amplify-components-select-disabled-color: var(--amplify-colors-font-disabled);
  --amplify-components-select-disabled-background-color: var(--amplify-colors-background-disabled);
  --amplify-components-select-wrapper-flex: 1;
  --amplify-components-select-wrapper-display: block;
  --amplify-components-select-wrapper-position: relative;
  --amplify-components-select-wrapper-cursor: pointer;
  --amplify-components-select-icon-wrapper-align-items: center;
  --amplify-components-select-icon-wrapper-position: absolute;
  --amplify-components-select-icon-wrapper-top: 50%;
  --amplify-components-select-icon-wrapper-right: var(--amplify-space-medium);
  --amplify-components-select-icon-wrapper-transform: translateY(-50%);
  --amplify-components-select-icon-wrapper-pointer-events: none;
  --amplify-components-select-icon-wrapper-small-right: var(--amplify-space-xs);
  --amplify-components-select-icon-wrapper-large-right: var(--amplify-space-medium);
  --amplify-components-select-option-background-color: transparent;
  --amplify-components-select-option-color: var(--amplify-colors-font-primary);
  --amplify-components-select-option-disabled-color: var(--amplify-colors-font-disabled);
  --amplify-components-select-option-disabled-background-color: transparent;
  --amplify-components-select-white-space: nowrap;
  --amplify-components-select-min-width: 6.5rem;
  --amplify-components-select-small-min-width: 5.5rem;
  --amplify-components-select-small-padding-inline-end: var(--amplify-space-xl);
  --amplify-components-select-large-min-width: 7.5rem;
  --amplify-components-select-large-padding-inline-end: var(--amplify-space-xxl);
  --amplify-components-select-expanded-padding-block: var(--amplify-space-xs);
  --amplify-components-select-expanded-padding-inline: var(--amplify-space-small);
  --amplify-components-select-expanded-option-padding-block: var(--amplify-space-xs);
  --amplify-components-select-expanded-option-padding-inline: var(--amplify-space-small);
  --amplify-components-selectfield-border-color: var(--amplify-components-fieldcontrol-border-color);
  --amplify-components-selectfield-color: var(--amplify-components-fieldcontrol-color);
  --amplify-components-selectfield-flex-direction: column;
  --amplify-components-selectfield-font-size: var(--amplify-components-fieldcontrol-font-size);
  --amplify-components-selectfield-focus-border-color: var(--amplify-components-fieldcontrol-focus-border-color);
  --amplify-components-selectfield-label-color: var(--amplify-components-field-label-color);
  --amplify-components-sliderfield-padding-block: var(--amplify-space-xs);
  --amplify-components-sliderfield-track-background-color: var(--amplify-colors-background-quaternary);
  --amplify-components-sliderfield-track-border-radius: 9999px;
  --amplify-components-sliderfield-track-height: 0.375rem;
  --amplify-components-sliderfield-track-min-width: 10rem;
  --amplify-components-sliderfield-range-background-color: var(--amplify-colors-primary-80);
  --amplify-components-sliderfield-range-border-radius: 9999px;
  --amplify-components-sliderfield-range-disabled-background-color: var(--amplify-colors-background-disabled);
  --amplify-components-sliderfield-thumb-width: 1.25rem;
  --amplify-components-sliderfield-thumb-height: 1.25rem;
  --amplify-components-sliderfield-thumb-background-color: var(--amplify-colors-background-primary);
  --amplify-components-sliderfield-thumb-box-shadow: var(--amplify-shadows-small);
  --amplify-components-sliderfield-thumb-border-radius: 50%;
  --amplify-components-sliderfield-thumb-border-width: var(--amplify-border-widths-medium);
  --amplify-components-sliderfield-thumb-border-color: var(--amplify-colors-border-primary);
  --amplify-components-sliderfield-thumb-border-style: solid;
  --amplify-components-sliderfield-thumb-disabled-background-color: var(--amplify-colors-background-disabled);
  --amplify-components-sliderfield-thumb-disabled-border-color: transparent;
  --amplify-components-sliderfield-thumb-disabled-box-shadow: none;
  --amplify-components-sliderfield-thumb-hover-background-color: var(--amplify-colors-background-primary);
  --amplify-components-sliderfield-thumb-hover-border-color: var(--amplify-colors-border-focus);
  --amplify-components-sliderfield-thumb-focus-border-color: var(--amplify-colors-border-focus);
  --amplify-components-sliderfield-thumb-focus-box-shadow: var(--amplify-components-fieldcontrol-focus-box-shadow);
  --amplify-components-sliderfield-small-track-height: 0.25rem;
  --amplify-components-sliderfield-small-thumb-width: 1rem;
  --amplify-components-sliderfield-small-thumb-height: 1rem;
  --amplify-components-sliderfield-large-track-height: 0.625rem;
  --amplify-components-sliderfield-large-thumb-width: 1.5rem;
  --amplify-components-sliderfield-large-thumb-height: 1.5rem;
  --amplify-components-stepperfield-border-color: var(--amplify-components-fieldcontrol-border-color);
  --amplify-components-stepperfield-flex-direction: column;
  --amplify-components-stepperfield-input-color: var(--amplify-components-fieldcontrol-color);
  --amplify-components-stepperfield-input-font-size: var(--amplify-components-fieldcontrol-font-size);
  --amplify-components-stepperfield-input-text-align: center;
  --amplify-components-stepperfield-button-color: var(--amplify-components-button-color);
  --amplify-components-stepperfield-button-background-color: var(--amplify-colors-transparent);
  --amplify-components-stepperfield-button-active-color: var(--amplify-components-button-active-color);
  --amplify-components-stepperfield-button-active-background-color: var(--amplify-components-button-active-background-color);
  --amplify-components-stepperfield-button-focus-color: var(--amplify-components-button-focus-color);
  --amplify-components-stepperfield-button-focus-background-color: var(--amplify-components-button-focus-background-color);
  --amplify-components-stepperfield-button-disabled-color: var(--amplify-components-button-disabled-color);
  --amplify-components-stepperfield-button-disabled-background-color: var(--amplify-components-fieldcontrol-disabled-background-color);
  --amplify-components-stepperfield-button-hover-color: var(--amplify-components-button-hover-color);
  --amplify-components-stepperfield-button-hover-background-color: var(--amplify-components-button-hover-background-color);
  --amplify-components-storagemanager-dropzone-background-color: var(--amplify-colors-background-primary);
  --amplify-components-storagemanager-dropzone-border-radius: var(--amplify-radii-small);
  --amplify-components-storagemanager-dropzone-border-color: var(--amplify-colors-border-primary);
  --amplify-components-storagemanager-dropzone-border-style: dashed;
  --amplify-components-storagemanager-dropzone-border-width: var(--amplify-border-widths-small);
  --amplify-components-storagemanager-dropzone-gap: var(--amplify-space-small);
  --amplify-components-storagemanager-dropzone-padding-block: var(--amplify-space-xl);
  --amplify-components-storagemanager-dropzone-padding-inline: var(--amplify-space-large);
  --amplify-components-storagemanager-dropzone-text-align: center;
  --amplify-components-storagemanager-dropzone-active-background-color: var(--amplify-colors-primary-10);
  --amplify-components-storagemanager-dropzone-active-border-radius: var(--amplify-components-storagemanager-dropzone-border-radius);
  --amplify-components-storagemanager-dropzone-active-border-color: var(--amplify-colors-border-pressed);
  --amplify-components-storagemanager-dropzone-active-border-style: var(--amplify-components-storagemanager-dropzone-border-style);
  --amplify-components-storagemanager-dropzone-active-border-width: var(--amplify-border-widths-medium);
  --amplify-components-storagemanager-dropzone-icon-color: var(--amplify-colors-border-primary);
  --amplify-components-storagemanager-dropzone-icon-font-size: var(--amplify-font-sizes-xxl);
  --amplify-components-storagemanager-dropzone-text-color: var(--amplify-colors-font-tertiary);
  --amplify-components-storagemanager-dropzone-text-font-size: var(--amplify-font-sizes-medium);
  --amplify-components-storagemanager-dropzone-text-font-weight: var(--amplify-font-weights-bold);
  --amplify-components-storagemanager-file-background-color: var(--amplify-colors-background-primary);
  --amplify-components-storagemanager-file-border-radius: var(--amplify-radii-small);
  --amplify-components-storagemanager-file-border-color: var(--amplify-colors-border-primary);
  --amplify-components-storagemanager-file-border-style: solid;
  --amplify-components-storagemanager-file-border-width: var(--amplify-border-widths-small);
  --amplify-components-storagemanager-file-padding-block: var(--amplify-space-xs);
  --amplify-components-storagemanager-file-padding-inline: var(--amplify-space-small);
  --amplify-components-storagemanager-file-gap: var(--amplify-space-small);
  --amplify-components-storagemanager-file-align-items: baseline;
  --amplify-components-storagemanager-file-name-font-size: var(--amplify-font-sizes-medium);
  --amplify-components-storagemanager-file-name-font-weight: var(--amplify-font-weights-bold);
  --amplify-components-storagemanager-file-name-color: var(--amplify-colors-font-primary);
  --amplify-components-storagemanager-file-size-font-size: var(--amplify-font-sizes-small);
  --amplify-components-storagemanager-file-size-font-weight: var(--amplify-font-weights-normal);
  --amplify-components-storagemanager-file-size-color: var(--amplify-colors-font-tertiary);
  --amplify-components-storagemanager-file-image-width: var(--amplify-space-xxl);
  --amplify-components-storagemanager-file-image-height: var(--amplify-space-xxl);
  --amplify-components-storagemanager-file-image-background-color: var(--amplify-colors-background-secondary);
  --amplify-components-storagemanager-file-image-color: var(--amplify-colors-font-tertiary);
  --amplify-components-storagemanager-file-image-border-radius: var(--amplify-radii-small);
  --amplify-components-storagemanager-filelist-flex-direction: column;
  --amplify-components-storagemanager-filelist-gap: var(--amplify-space-small);
  --amplify-components-storagemanager-loader-stroke-linecap: round;
  --amplify-components-storagemanager-loader-stroke-empty: var(--amplify-colors-border-secondary);
  --amplify-components-storagemanager-loader-stroke-filled: var(--amplify-components-loader-stroke-filled);
  --amplify-components-storagemanager-loader-stroke-width: var(--amplify-border-widths-large);
  --amplify-components-storagemanager-previewer-background-color: var(--amplify-colors-background-primary);
  --amplify-components-storagemanager-previewer-border-color: var(--amplify-colors-border-primary);
  --amplify-components-storagemanager-previewer-border-style: solid;
  --amplify-components-storagemanager-previewer-border-width: var(--amplify-border-widths-small);
  --amplify-components-storagemanager-previewer-border-radius: var(--amplify-radii-small);
  --amplify-components-storagemanager-previewer-padding-block: var(--amplify-space-zero);
  --amplify-components-storagemanager-previewer-padding-inline: var(--amplify-space-zero);
  --amplify-components-storagemanager-previewer-max-height: 40rem;
  --amplify-components-storagemanager-previewer-max-width: auto;
  --amplify-components-storagemanager-previewer-text-font-size: var(--amplify-font-sizes-medium);
  --amplify-components-storagemanager-previewer-text-font-weight: var(--amplify-font-weights-bold);
  --amplify-components-storagemanager-previewer-text-color: var(--amplify-colors-font-primary);
  --amplify-components-storagemanager-previewer-body-padding-block: var(--amplify-space-medium);
  --amplify-components-storagemanager-previewer-body-padding-inline: var(--amplify-space-medium);
  --amplify-components-storagemanager-previewer-body-gap: var(--amplify-space-small);
  --amplify-components-storagemanager-previewer-footer-justify-content: flex-end;
  --amplify-components-switchfield-disabled-opacity: var(--amplify-opacities-60);
  --amplify-components-switchfield-focused-shadow: var(--amplify-components-fieldcontrol-focus-box-shadow);
  --amplify-components-switchfield-font-size: var(--amplify-font-sizes-medium);
  --amplify-components-switchfield-large-font-size: var(--amplify-font-sizes-large);
  --amplify-components-switchfield-small-font-size: var(--amplify-font-sizes-small);
  --amplify-components-switchfield-label-padding: var(--amplify-space-xs);
  --amplify-components-switchfield-thumb-background-color: var(--amplify-colors-background-primary);
  --amplify-components-switchfield-thumb-border-color: transparent;
  --amplify-components-switchfield-thumb-border-width: var(--amplify-border-widths-small);
  --amplify-components-switchfield-thumb-border-style: solid;
  --amplify-components-switchfield-thumb-border-radius: var(--amplify-radii-xxxl);
  --amplify-components-switchfield-thumb-checked-transform: var(--amplify-transforms-slide-x-medium);
  --amplify-components-switchfield-thumb-transition-duration: var(--amplify-time-medium);
  --amplify-components-switchfield-thumb-width: var(--amplify-space-relative-medium);
  --amplify-components-switchfield-track-background-color: var(--amplify-colors-background-quaternary);
  --amplify-components-switchfield-track-border-radius: var(--amplify-radii-xxxl);
  --amplify-components-switchfield-track-checked-background-color: var(--amplify-colors-primary-80);
  --amplify-components-switchfield-track-height: var(--amplify-space-relative-medium);
  --amplify-components-switchfield-track-padding: var(--amplify-outline-widths-medium);
  --amplify-components-switchfield-track-transition-duration: var(--amplify-time-short);
  --amplify-components-switchfield-track-width: var(--amplify-space-relative-xl);
  --amplify-components-switchfield-track-error-background-color: var(--amplify-colors-background-error);
  --amplify-components-table-border-collapse: collapse;
  --amplify-components-table-display: table;
  --amplify-components-table-width: 100%;
  --amplify-components-table-head-display: table-header-group;
  --amplify-components-table-head-vertical-align: middle;
  --amplify-components-table-body-display: table-row-group;
  --amplify-components-table-body-vertical-align: middle;
  --amplify-components-table-foot-display: table-footer-group;
  --amplify-components-table-foot-vertical-align: middle;
  --amplify-components-table-row-display: table-row;
  --amplify-components-table-row-vertical-align: middle;
  --amplify-components-table-row-hover-background-color: var(--amplify-colors-background-tertiary);
  --amplify-components-table-row-striped-background-color: var(--amplify-colors-background-secondary);
  --amplify-components-table-header-border-color: var(--amplify-colors-border-tertiary);
  --amplify-components-table-header-border-style: solid;
  --amplify-components-table-header-border-width: var(--amplify-border-widths-small);
  --amplify-components-table-header-color: var(--amplify-colors-font-primary);
  --amplify-components-table-header-display: table-cell;
  --amplify-components-table-header-font-size: var(--amplify-font-sizes-medium);
  --amplify-components-table-header-font-weight: var(--amplify-font-weights-bold);
  --amplify-components-table-header-padding: var(--amplify-space-medium);
  --amplify-components-table-header-vertical-align: middle;
  --amplify-components-table-header-large-font-size: var(--amplify-font-sizes-large);
  --amplify-components-table-header-large-padding: var(--amplify-space-large);
  --amplify-components-table-header-small-font-size: var(--amplify-font-sizes-small);
  --amplify-components-table-header-small-padding: var(--amplify-space-xs);
  --amplify-components-table-data-border-color: var(--amplify-colors-border-tertiary);
  --amplify-components-table-data-border-style: solid;
  --amplify-components-table-data-border-width: var(--amplify-border-widths-small);
  --amplify-components-table-data-color: var(--amplify-colors-font-primary);
  --amplify-components-table-data-display: table-cell;
  --amplify-components-table-data-font-size: var(--amplify-font-sizes-medium);
  --amplify-components-table-data-font-weight: var(--amplify-font-weights-normal);
  --amplify-components-table-data-padding: var(--amplify-space-medium);
  --amplify-components-table-data-vertical-align: middle;
  --amplify-components-table-data-large-font-size: var(--amplify-font-sizes-large);
  --amplify-components-table-data-large-padding: var(--amplify-space-large);
  --amplify-components-table-data-small-font-size: var(--amplify-font-sizes-small);
  --amplify-components-table-data-small-padding: var(--amplify-space-xs);
  --amplify-components-table-caption-caption-side: bottom;
  --amplify-components-table-caption-color: var(--amplify-colors-font-primary);
  --amplify-components-table-caption-display: table-caption;
  --amplify-components-table-caption-font-size: var(--amplify-font-sizes-medium);
  --amplify-components-table-caption-text-align: center;
  --amplify-components-table-caption-word-break: break-all;
  --amplify-components-table-caption-large-font-size: var(--amplify-font-sizes-large);
  --amplify-components-table-caption-small-font-size: var(--amplify-font-sizes-small);
  --amplify-components-tabs-background-color: transparent;
  --amplify-components-tabs-border-color: var(--amplify-colors-border-secondary);
  --amplify-components-tabs-border-style: solid;
  --amplify-components-tabs-border-width: var(--amplify-border-widths-medium);
  --amplify-components-tabs-gap: 0;
  --amplify-components-tabs-item-background-color: transparent;
  --amplify-components-tabs-item-border-color: var(--amplify-colors-border-secondary);
  --amplify-components-tabs-item-border-style: solid;
  --amplify-components-tabs-item-border-width: var(--amplify-border-widths-medium);
  --amplify-components-tabs-item-color: var(--amplify-colors-font-secondary);
  --amplify-components-tabs-item-font-size: var(--amplify-font-sizes-medium);
  --amplify-components-tabs-item-font-weight: var(--amplify-font-weights-bold);
  --amplify-components-tabs-item-padding-vertical: var(--amplify-space-small);
  --amplify-components-tabs-item-padding-horizontal: var(--amplify-space-medium);
  --amplify-components-tabs-item-text-align: center;
  --amplify-components-tabs-item-transition-duration: var(--amplify-time-medium);
  --amplify-components-tabs-item-hover-background-color: transparent;
  --amplify-components-tabs-item-hover-border-color: var(--amplify-colors-border-focus);
  --amplify-components-tabs-item-hover-box-shadow: none;
  --amplify-components-tabs-item-hover-color: var(--amplify-colors-font-hover);
  --amplify-components-tabs-item-focus-background-color: transparent;
  --amplify-components-tabs-item-focus-border-color: var(--amplify-colors-border-focus);
  --amplify-components-tabs-item-focus-box-shadow: 0px 0px 0px var(--amplify-border-widths-medium) var(--amplify-colors-border-focus);
  --amplify-components-tabs-item-focus-color: var(--amplify-colors-font-focus);
  --amplify-components-tabs-item-active-background-color: transparent;
  --amplify-components-tabs-item-active-border-color: var(--amplify-colors-font-interactive);
  --amplify-components-tabs-item-active-box-shadow: none;
  --amplify-components-tabs-item-active-color: var(--amplify-colors-font-interactive);
  --amplify-components-tabs-item-disabled-background-color: transparent;
  --amplify-components-tabs-item-disabled-border-color: var(--amplify-colors-border-tertiary);
  --amplify-components-tabs-item-disabled-box-shadow: none;
  --amplify-components-tabs-item-disabled-color: var(--amplify-colors-font-disabled);
  --amplify-components-tabs-panel-background-color: transparent;
  --amplify-components-tabs-panel-padding-inline: 0;
  --amplify-components-tabs-panel-padding-block: var(--amplify-space-small);
  --amplify-components-text-color: var(--amplify-colors-font-primary);
  --amplify-components-text-primary-color: var(--amplify-colors-font-primary);
  --amplify-components-text-secondary-color: var(--amplify-colors-font-secondary);
  --amplify-components-text-tertiary-color: var(--amplify-colors-font-tertiary);
  --amplify-components-text-error-color: var(--amplify-colors-font-error);
  --amplify-components-text-warning-color: var(--amplify-colors-font-warning);
  --amplify-components-text-success-color: var(--amplify-colors-font-success);
  --amplify-components-text-info-color: var(--amplify-colors-font-info);
  --amplify-components-textareafield-color: var(--amplify-components-fieldcontrol-color);
  --amplify-components-textareafield-border-color: var(--amplify-components-fieldcontrol-border-color);
  --amplify-components-textareafield-focus-border-color: var(--amplify-components-fieldcontrol-focus-border-color);
  --amplify-components-textfield-color: var(--amplify-components-fieldcontrol-color);
  --amplify-components-textfield-border-color: var(--amplify-components-fieldcontrol-border-color);
  --amplify-components-textfield-font-size: var(--amplify-components-fieldcontrol-font-size);
  --amplify-components-textfield-focus-border-color: var(--amplify-components-fieldcontrol-focus-border-color);
  --amplify-components-togglebutton-border-color: var(--amplify-colors-border-primary);
  --amplify-components-togglebutton-color: var(--amplify-colors-font-primary);
  --amplify-components-togglebutton-hover-background-color: var(--amplify-colors-overlay-10);
  --amplify-components-togglebutton-focus-border-color: var(--amplify-colors-border-focus);
  --amplify-components-togglebutton-focus-color: var(--amplify-colors-font-primary);
  --amplify-components-togglebutton-active-background-color: var(--amplify-colors-transparent);
  --amplify-components-togglebutton-disabled-background-color: var(--amplify-colors-transparent);
  --amplify-components-togglebutton-disabled-border-color: var(--amplify-colors-border-disabled);
  --amplify-components-togglebutton-disabled-color: var(--amplify-colors-font-disabled);
  --amplify-components-togglebutton-pressed-border-color: var(--amplify-colors-border-pressed);
  --amplify-components-togglebutton-pressed-color: var(--amplify-colors-font-primary);
  --amplify-components-togglebutton-pressed-background-color: var(--amplify-colors-overlay-20);
  --amplify-components-togglebutton-pressed-hover-background-color: var(--amplify-colors-overlay-30);
  --amplify-components-togglebutton-primary-background-color: var(--amplify-colors-transparent);
  --amplify-components-togglebutton-primary-border-width: var(--amplify-border-widths-small);
  --amplify-components-togglebutton-primary-focus-border-color: var(--amplify-colors-border-focus);
  --amplify-components-togglebutton-primary-focus-background-color: var(--amplify-colors-transparent);
  --amplify-components-togglebutton-primary-focus-box-shadow: var(--amplify-components-fieldcontrol-focus-box-shadow);
  --amplify-components-togglebutton-primary-focus-color: var(--amplify-colors-font-primary);
  --amplify-components-togglebutton-primary-hover-background-color: var(--amplify-colors-overlay-10);
  --amplify-components-togglebutton-primary-hover-color: var(--amplify-colors-font-primary);
  --amplify-components-togglebutton-primary-disabled-border-color: var(--amplify-colors-border-disabled);
  --amplify-components-togglebutton-primary-disabled-background-color: var(--amplify-colors-background-disabled);
  --amplify-components-togglebutton-primary-disabled-color: var(--amplify-colors-font-disabled);
  --amplify-components-togglebutton-primary-pressed-background-color: var(--amplify-colors-primary-80);
  --amplify-components-togglebutton-primary-pressed-border-color: var(--amplify-colors-primary-80);
  --amplify-components-togglebutton-primary-pressed-color: var(--amplify-colors-background-primary);
  --amplify-components-togglebutton-primary-pressed-focus-background-color: var(--amplify-colors-border-focus);
  --amplify-components-togglebutton-primary-pressed-focus-border-color: var(--amplify-colors-border-focus);
  --amplify-components-togglebutton-primary-pressed-focus-color: var(--amplify-colors-background-primary);
  --amplify-components-togglebutton-primary-pressed-hover-border-color: var(--amplify-colors-primary-60);
  --amplify-components-togglebutton-primary-pressed-hover-background-color: var(--amplify-colors-primary-60);
  --amplify-components-togglebutton-primary-pressed-hover-box-shadow: var(--amplify-colors-primary-60);
  --amplify-components-togglebutton-primary-pressed-hover-color: var(--amplify-colors-background-primary);
  --amplify-components-togglebutton-link-background-color: var(--amplify-colors-transparent);
  --amplify-components-togglebutton-link-color: var(--amplify-colors-overlay-50);
  --amplify-components-togglebutton-link-hover-background-color: var(--amplify-colors-transparent);
  --amplify-components-togglebutton-link-hover-color: var(--amplify-colors-overlay-50);
  --amplify-components-togglebutton-link-focus-background-color: var(--amplify-colors-transparent);
  --amplify-components-togglebutton-link-focus-color: var(--amplify-colors-overlay-50);
  --amplify-components-togglebutton-link-disabled-background-color: var(--amplify-colors-transparent);
  --amplify-components-togglebutton-link-disabled-color: var(--amplify-colors-font-disabled);
  --amplify-components-togglebutton-link-pressed-background-color: var(--amplify-colors-transparent);
  --amplify-components-togglebutton-link-pressed-color: var(--amplify-colors-overlay-90);
  --amplify-components-togglebutton-link-pressed-focus-background-color: var(--amplify-colors-transparent);
  --amplify-components-togglebutton-link-pressed-focus-color: var(--amplify-colors-overlay-90);
  --amplify-components-togglebutton-link-pressed-hover-color: var(--amplify-colors-overlay-90);
  --amplify-components-togglebutton-link-pressed-hover-background-color: var(--amplify-colors-transparent);
  --amplify-components-togglebuttongroup-align-items: center;
  --amplify-components-togglebuttongroup-align-content: center;
  --amplify-components-togglebuttongroup-justify-content: flex-start;
  --amplify-border-widths-small: 1px;
  --amplify-border-widths-medium: 2px;
  --amplify-border-widths-large: 3px;
  --amplify-colors-red-10: hsl(0, 75%, 95%);
  --amplify-colors-red-20: hsl(0, 75%, 85%);
  --amplify-colors-red-40: hsl(0, 75%, 75%);
  --amplify-colors-red-60: hsl(0, 50%, 50%);
  --amplify-colors-red-80: hsl(0, 95%, 30%);
  --amplify-colors-red-90: hsl(0, 100%, 20%);
  --amplify-colors-red-100: hsl(0, 100%, 15%);
  --amplify-colors-orange-10: hsl(30, 75%, 95%);
  --amplify-colors-orange-20: hsl(30, 75%, 85%);
  --amplify-colors-orange-40: hsl(30, 75%, 75%);
  --amplify-colors-orange-60: hsl(30, 50%, 50%);
  --amplify-colors-orange-80: hsl(30, 95%, 30%);
  --amplify-colors-orange-90: hsl(30, 100%, 20%);
  --amplify-colors-orange-100: hsl(30, 100%, 15%);
  --amplify-colors-yellow-10: hsl(60, 75%, 95%);
  --amplify-colors-yellow-20: hsl(60, 75%, 85%);
  --amplify-colors-yellow-40: hsl(60, 75%, 75%);
  --amplify-colors-yellow-60: hsl(60, 50%, 50%);
  --amplify-colors-yellow-80: hsl(60, 95%, 30%);
  --amplify-colors-yellow-90: hsl(60, 100%, 20%);
  --amplify-colors-yellow-100: hsl(60, 100%, 15%);
  --amplify-colors-green-10: hsl(130, 60%, 95%);
  --amplify-colors-green-20: hsl(130, 60%, 90%);
  --amplify-colors-green-40: hsl(130, 44%, 63%);
  --amplify-colors-green-60: hsl(130, 43%, 46%);
  --amplify-colors-green-80: hsl(130, 33%, 37%);
  --amplify-colors-green-90: hsl(130, 27%, 29%);
  --amplify-colors-green-100: hsl(130, 22%, 23%);
  --amplify-colors-teal-10: hsl(190, 75%, 95%);
  --amplify-colors-teal-20: hsl(190, 75%, 85%);
  --amplify-colors-teal-40: hsl(190, 70%, 70%);
  --amplify-colors-teal-60: hsl(190, 50%, 50%);
  --amplify-colors-teal-80: hsl(190, 95%, 30%);
  --amplify-colors-teal-90: hsl(190, 100%, 20%);
  --amplify-colors-teal-100: hsl(190, 100%, 15%);
  --amplify-colors-blue-10: hsl(220, 95%, 95%);
  --amplify-colors-blue-20: hsl(220, 85%, 85%);
  --amplify-colors-blue-40: hsl(220, 70%, 70%);
  --amplify-colors-blue-60: hsl(220, 50%, 50%);
  --amplify-colors-blue-80: hsl(220, 95%, 30%);
  --amplify-colors-blue-90: hsl(220, 100%, 20%);
  --amplify-colors-blue-100: hsl(220, 100%, 15%);
  --amplify-colors-purple-10: hsl(300, 95%, 95%);
  --amplify-colors-purple-20: hsl(300, 85%, 85%);
  --amplify-colors-purple-40: hsl(300, 70%, 70%);
  --amplify-colors-purple-60: hsl(300, 50%, 50%);
  --amplify-colors-purple-80: hsl(300, 95%, 30%);
  --amplify-colors-purple-90: hsl(300, 100%, 20%);
  --amplify-colors-purple-100: hsl(300, 100%, 15%);
  --amplify-colors-pink-10: hsl(340, 95%, 95%);
  --amplify-colors-pink-20: hsl(340, 90%, 85%);
  --amplify-colors-pink-40: hsl(340, 70%, 70%);
  --amplify-colors-pink-60: hsl(340, 50%, 50%);
  --amplify-colors-pink-80: hsl(340, 95%, 30%);
  --amplify-colors-pink-90: hsl(340, 100%, 20%);
  --amplify-colors-pink-100: hsl(340, 100%, 15%);
  --amplify-colors-neutral-10: hsl(210, 5%, 98%);
  --amplify-colors-neutral-20: hsl(210, 5%, 94%);
  --amplify-colors-neutral-40: hsl(210, 5%, 87%);
  --amplify-colors-neutral-60: hsl(210, 10%, 58%);
  --amplify-colors-neutral-80: hsl(210, 10%, 40%);
  --amplify-colors-neutral-90: hsl(210, 25%, 25%);
  --amplify-colors-neutral-100: hsl(210, 50%, 10%);
  --amplify-colors-primary-10: var(--amplify-colors-teal-10);
  --amplify-colors-primary-20: var(--amplify-colors-teal-20);
  --amplify-colors-primary-40: var(--amplify-colors-teal-40);
  --amplify-colors-primary-60: var(--amplify-colors-teal-60);
  --amplify-colors-primary-80: var(--amplify-colors-teal-80);
  --amplify-colors-primary-90: var(--amplify-colors-teal-90);
  --amplify-colors-primary-100: var(--amplify-colors-teal-100);
  --amplify-colors-secondary-10: var(--amplify-colors-purple-10);
  --amplify-colors-secondary-20: var(--amplify-colors-purple-20);
  --amplify-colors-secondary-40: var(--amplify-colors-purple-40);
  --amplify-colors-secondary-60: var(--amplify-colors-purple-60);
  --amplify-colors-secondary-80: var(--amplify-colors-purple-80);
  --amplify-colors-secondary-90: var(--amplify-colors-purple-90);
  --amplify-colors-secondary-100: var(--amplify-colors-purple-100);
  --amplify-colors-font-primary: var(--amplify-colors-neutral-100);
  --amplify-colors-font-secondary: var(--amplify-colors-neutral-90);
  --amplify-colors-font-tertiary: var(--amplify-colors-neutral-80);
  --amplify-colors-font-disabled: var(--amplify-colors-neutral-60);
  --amplify-colors-font-inverse: var(--amplify-colors-white);
  --amplify-colors-font-interactive: var(--amplify-colors-primary-80);
  --amplify-colors-font-hover: var(--amplify-colors-primary-90);
  --amplify-colors-font-focus: var(--amplify-colors-primary-100);
  --amplify-colors-font-active: var(--amplify-colors-primary-100);
  --amplify-colors-font-info: var(--amplify-colors-blue-90);
  --amplify-colors-font-warning: var(--amplify-colors-orange-90);
  --amplify-colors-font-error: var(--amplify-colors-red-90);
  --amplify-colors-font-success: var(--amplify-colors-green-90);
  --amplify-colors-background-primary: var(--amplify-colors-white);
  --amplify-colors-background-secondary: var(--amplify-colors-neutral-10);
  --amplify-colors-background-tertiary: var(--amplify-colors-neutral-20);
  --amplify-colors-background-quaternary: var(--amplify-colors-neutral-60);
  --amplify-colors-background-disabled: var(--amplify-colors-background-tertiary);
  --amplify-colors-background-info: var(--amplify-colors-blue-10);
  --amplify-colors-background-warning: var(--amplify-colors-orange-10);
  --amplify-colors-background-error: var(--amplify-colors-red-10);
  --amplify-colors-background-success: var(--amplify-colors-green-10);
  --amplify-colors-border-primary: var(--amplify-colors-neutral-60);
  --amplify-colors-border-secondary: var(--amplify-colors-neutral-40);
  --amplify-colors-border-tertiary: var(--amplify-colors-neutral-20);
  --amplify-colors-border-disabled: var(--amplify-colors-border-tertiary);
  --amplify-colors-border-pressed: var(--amplify-colors-primary-100);
  --amplify-colors-border-focus: var(--amplify-colors-primary-100);
  --amplify-colors-border-error: var(--amplify-colors-red-80);
  --amplify-colors-border-info: var(--amplify-colors-blue-80);
  --amplify-colors-border-success: var(--amplify-colors-green-80);
  --amplify-colors-border-warning: var(--amplify-colors-orange-80);
  --amplify-colors-shadow-primary: hsla(210, 50%, 10%, 0.25);
  --amplify-colors-shadow-secondary: hsla(210, 50%, 10%, 0.15);
  --amplify-colors-shadow-tertiary: hsla(210, 50%, 10%, 0.05);
  --amplify-colors-overlay-5: hsla(0, 0%, 0%, 0.05);
  --amplify-colors-overlay-10: hsla(0, 0%, 0%, 0.1);
  --amplify-colors-overlay-20: hsla(0, 0%, 0%, 0.2);
  --amplify-colors-overlay-30: hsla(0, 0%, 0%, 0.3);
  --amplify-colors-overlay-40: hsla(0, 0%, 0%, 0.4);
  --amplify-colors-overlay-50: hsla(0, 0%, 0%, 0.5);
  --amplify-colors-overlay-60: hsla(0, 0%, 0%, 0.6);
  --amplify-colors-overlay-70: hsla(0, 0%, 0%, 0.7);
  --amplify-colors-overlay-80: hsla(0, 0%, 0%, 0.8);
  --amplify-colors-overlay-90: hsla(0, 0%, 0%, 0.9);
  --amplify-colors-black: hsl(0, 0%, 0%);
  --amplify-colors-white: hsl(0, 0%, 100%);
  --amplify-colors-transparent: transparent;
  --amplify-fonts-default-variable: "InterVariable", "Inter var", "Inter", -apple-system, BlinkMacSystemFont,
          "Helvetica Neue", "Segoe UI", Oxygen, Ubuntu, Cantarell, "Open Sans",
          sans-serif;
  --amplify-fonts-default-static: "Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue",
          "Segoe UI", Oxygen, Ubuntu, Cantarell, "Open Sans", sans-serif;
  --amplify-font-sizes-xxxs: 0.375rem;
  --amplify-font-sizes-xxs: 0.5rem;
  --amplify-font-sizes-xs: 0.75rem;
  --amplify-font-sizes-small: 0.875rem;
  --amplify-font-sizes-medium: 1rem;
  --amplify-font-sizes-large: 1.25rem;
  --amplify-font-sizes-xl: 1.5rem;
  --amplify-font-sizes-xxl: 2rem;
  --amplify-font-sizes-xxxl: 2.5rem;
  --amplify-font-sizes-xxxxl: 3rem;
  --amplify-font-weights-hairline: 100;
  --amplify-font-weights-thin: 200;
  --amplify-font-weights-light: 300;
  --amplify-font-weights-normal: 400;
  --amplify-font-weights-medium: 500;
  --amplify-font-weights-semibold: 600;
  --amplify-font-weights-bold: 700;
  --amplify-font-weights-extrabold: 800;
  --amplify-font-weights-black: 900;
  --amplify-line-heights-small: 1.25;
  --amplify-line-heights-medium: 1.5;
  --amplify-line-heights-large: 2;
  --amplify-opacities-0: 0;
  --amplify-opacities-10: 0.1;
  --amplify-opacities-20: 0.2;
  --amplify-opacities-30: 0.3;
  --amplify-opacities-40: 0.4;
  --amplify-opacities-50: 0.5;
  --amplify-opacities-60: 0.6;
  --amplify-opacities-70: 0.7;
  --amplify-opacities-80: 0.8;
  --amplify-opacities-90: 0.9;
  --amplify-opacities-100: 1;
  --amplify-outline-offsets-small: 1px;
  --amplify-outline-offsets-medium: 2px;
  --amplify-outline-offsets-large: 3px;
  --amplify-outline-widths-small: 1px;
  --amplify-outline-widths-medium: 2px;
  --amplify-outline-widths-large: 3px;
  --amplify-radii-xs: 0.125rem;
  --amplify-radii-small: 0.25rem;
  --amplify-radii-medium: 0.5rem;
  --amplify-radii-large: 1rem;
  --amplify-radii-xl: 2rem;
  --amplify-radii-xxl: 4rem;
  --amplify-radii-xxxl: 8rem;
  --amplify-shadows-small: 0px 2px 4px var(--amplify-colors-shadow-tertiary);
  --amplify-shadows-medium: 0px 2px 6px var(--amplify-colors-shadow-secondary);
  --amplify-shadows-large: 0px 4px 12px var(--amplify-colors-shadow-primary);
  --amplify-space-zero: 0;
  --amplify-space-xxxs: 0.25rem;
  --amplify-space-xxs: 0.375rem;
  --amplify-space-xs: 0.5rem;
  --amplify-space-small: 0.75rem;
  --amplify-space-medium: 1rem;
  --amplify-space-large: 1.5rem;
  --amplify-space-xl: 2.0rem;
  --amplify-space-xxl: 3.0rem;
  --amplify-space-xxxl: 4.5rem;
  --amplify-space-relative-xxxs: 0.25em;
  --amplify-space-relative-xxs: 0.375em;
  --amplify-space-relative-xs: 0.5em;
  --amplify-space-relative-small: 0.75em;
  --amplify-space-relative-medium: 1em;
  --amplify-space-relative-large: 1.5em;
  --amplify-space-relative-xl: 2.0em;
  --amplify-space-relative-xxl: 3.0em;
  --amplify-space-relative-xxxl: 4.5em;
  --amplify-space-relative-full: 100%;
  --amplify-time-short: 100ms;
  --amplify-time-medium: 250ms;
  --amplify-time-long: 500ms;
  --amplify-transforms-slide-x-small: translateX(0.5em);
  --amplify-transforms-slide-x-medium: translateX(1em);
  --amplify-transforms-slide-x-large: translateX(2em);
}

html,
[data-amplify-theme] {
  font-family: var(--amplify-fonts-default-static);
}

@supports (font-variation-settings: normal) {
  html,
  [data-amplify-theme] {
    font-family: var(--amplify-fonts-default-variable);
  }
}
html:focus-within {
  scroll-behavior: smooth;
}

body {
  min-height: 100vh;
  text-rendering: optimizeSpeed;
  line-height: var(--amplify-line-heights-medium);
}

* {
  box-sizing: border-box;
}

input,
button,
textarea,
select {
  font: inherit;
}

@media (prefers-reduced-motion: reduce) {
  html:focus-within {
    scroll-behavior: auto;
  }
}
[class*=amplify] {
  all: unset; /* protect against external styles */
  box-sizing: border-box; /* set box-sizing after unset above */
}

.amplify-flex {
  align-content: var(--amplify-components-flex-align-content);
  align-items: var(--amplify-components-flex-align-items);
  display: flex;
  flex-wrap: var(--amplify-components-flex-flex-wrap);
  gap: var(--amplify-components-flex-gap);
  justify-content: var(--amplify-components-flex-justify-content);
}

.amplify-grid {
  display: grid;
}

.amplify-scrollview {
  display: block;
  overflow: auto;
}

.amplify-text {
  display: block;
  color: var(--amplify-components-text-color);
}
b.amplify-text,
em.amplify-text,
i.amplify-text,
span.amplify-text,
strong.amplify-text {
  display: inline;
}

.amplify-text--truncated {
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.amplify-text--primary {
  color: var(--amplify-components-text-primary-color);
}
.amplify-text--secondary {
  color: var(--amplify-components-text-secondary-color);
}
.amplify-text--tertiary {
  color: var(--amplify-components-text-tertiary-color);
}
.amplify-text--error {
  color: var(--amplify-components-text-error-color);
}
.amplify-text--info {
  color: var(--amplify-components-text-info-color);
}
.amplify-text--success {
  color: var(--amplify-components-text-success-color);
}
.amplify-text--warning {
  color: var(--amplify-components-text-warning-color);
}

.amplify-badge {
  background-color: var(--amplify-components-badge-background-color);
  border-radius: var(--amplify-components-badge-border-radius);
  color: var(--amplify-components-badge-color);
  display: inline-flex;
  font-size: var(--amplify-components-badge-font-size);
  font-weight: var(--amplify-components-badge-font-weight);
  line-height: var(--amplify-components-badge-line-height);
  padding: var(--amplify-components-badge-padding-vertical) var(--amplify-components-badge-padding-horizontal);
  text-align: var(--amplify-components-badge-text-align);
}
.amplify-badge--info {
  color: var(--amplify-components-badge-info-color);
  background-color: var(--amplify-components-badge-info-background-color);
}
.amplify-badge--error {
  color: var(--amplify-components-badge-error-color);
  background-color: var(--amplify-components-badge-error-background-color);
}
.amplify-badge--warning {
  color: var(--amplify-components-badge-warning-color);
  background-color: var(--amplify-components-badge-warning-background-color);
}
.amplify-badge--success {
  color: var(--amplify-components-badge-success-color);
  background-color: var(--amplify-components-badge-success-background-color);
}
.amplify-badge--small {
  font-size: var(--amplify-components-badge-small-font-size);
  padding: var(--amplify-components-badge-small-padding-vertical) var(--amplify-components-badge-small-padding-horizontal);
}
.amplify-badge--large {
  font-size: var(--amplify-components-badge-large-font-size);
  padding: var(--amplify-components-badge-large-padding-vertical) var(--amplify-components-badge-large-padding-horizontal);
}

/*
 * Button base styles
 */
.amplify-button {
  --amplify-internal-button-background-color: var(
    --amplify-components-button-background-color
  );
  --amplify-internal-button-border-color: var(
    --amplify-components-button-border-color
  );
  --amplify-internal-button-color: var(--amplify-components-button-color);
  --amplify-internal-button-focus-box-shadow: var(
    --amplify-components-button-focus-box-shadow
  );
  --amplify-internal-button-border-width: var(
    --amplify-components-button-border-width
  );
  align-items: center;
  background-color: var(--amplify-internal-button-background-color);
  border-color: var(--amplify-internal-button-border-color);
  border-radius: var(--amplify-components-button-border-radius);
  border-style: var(--amplify-components-button-border-style);
  border-width: var(--amplify-internal-button-border-width);
  box-sizing: border-box;
  color: var(--amplify-internal-button-color);
  cursor: pointer;
  display: inline-flex;
  font-size: var(--amplify-components-button-font-size);
  font-weight: var(--amplify-components-button-font-weight);
  justify-content: center;
  line-height: var(--amplify-components-button-line-height);
  padding-block-start: var(--amplify-components-button-padding-block-start);
  padding-block-end: var(--amplify-components-button-padding-block-end);
  padding-inline-start: var(--amplify-components-button-padding-inline-start);
  padding-inline-end: var(--amplify-components-button-padding-inline-end);
  transition: all var(--amplify-components-button-transition-duration);
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  --amplify-internal-button-disabled-color: var(
    --amplify-components-button-disabled-color
  );
  --amplify-internal-button-disabled-background-color: var(
    --amplify-components-button-disabled-background-color
  );
  --amplify-internal-button-disabled-border-color: var(
    --amplify-components-button-disabled-border-color
  );
  --amplify-internal-button-disabled-text-decoration: initial;
  --amplify-internal-button-loading-background-color: var(
    --amplify-components-button-loading-background-color
  );
  --amplify-internal-button-loading-border-color: var(
    --amplify-components-button-loading-border-color
  );
  --amplify-internal-button-loading-color: var(
    --amplify-components-button-loading-color
  );
  --amplify-internal-button-loading-text-decoration: initial;
}
.amplify-button:hover {
  --amplify-internal-button-background-color: var(
    --amplify-components-button-hover-background-color
  );
  --amplify-internal-button-border-color: var(
    --amplify-components-button-hover-border-color
  );
  --amplify-internal-button-color: var(
    --amplify-components-button-hover-color
  );
}
.amplify-button:focus {
  --amplify-internal-button-background-color: var(
    --amplify-components-button-hover-background-color
  );
  --amplify-internal-button-border-color: var(
    --amplify-components-button-focus-border-color
  );
  --amplify-internal-button-color: var(
    --amplify-components-button-focus-color
  );
  box-shadow: var(--amplify-internal-button-focus-box-shadow);
}
.amplify-button:active {
  --amplify-internal-button-background-color: var(
    --amplify-components-button-active-background-color
  );
  --amplify-internal-button-border-color: var(
    --amplify-components-button-active-border-color
  );
  --amplify-internal-button-color: var(
    --amplify-components-button-active-color
  );
}
.amplify-button--fullwidth {
  width: 100%;
}
.amplify-button--outlined--info {
  --amplify-internal-button-background-color: var(
    --amplify-components-button-outlined-info-background-color
  );
  --amplify-internal-button-border-color: var(
    --amplify-components-button-outlined-info-border-color
  );
  --amplify-internal-button-color: var(
    --amplify-components-button-outlined-info-color
  );
}
.amplify-button--outlined--info:hover {
  --amplify-internal-button-background-color: var(
    --amplify-components-button-outlined-info-hover-background-color
  );
  --amplify-internal-button-border-color: var(
    --amplify-components-button-outlined-info-hover-border-color
  );
  --amplify-internal-button-color: var(
    --amplify-components-button-outlined-info-hover-color
  );
}
.amplify-button--outlined--info:focus {
  --amplify-internal-button-background-color: var(
    --amplify-components-button-outlined-info-focus-background-color
  );
  --amplify-internal-button-border-color: var(
    --amplify-components-button-outlined-info-focus-border-color
  );
  --amplify-internal-button-color: var(
    --amplify-components-button-outlined-info-focus-color
  );
  --amplify-internal-button-focus-box-shadow: var(
    --amplify-components-button-outlined-info-focus-box-shadow
  );
}
.amplify-button--outlined--info:active {
  --amplify-internal-button-background-color: var(
    --amplify-components-button-outlined-info-active-background-color
  );
  --amplify-internal-button-border-color: var(
    --amplify-components-button-outlined-info-active-border-color
  );
  --amplify-internal-button-color: var(
    --amplify-components-button-outlined-info-active-color
  );
}
.amplify-button--outlined--warning {
  --amplify-internal-button-background-color: var(
    --amplify-components-button-outlined-warning-background-color
  );
  --amplify-internal-button-border-color: var(
    --amplify-components-button-outlined-warning-border-color
  );
  --amplify-internal-button-color: var(
    --amplify-components-button-outlined-warning-color
  );
}
.amplify-button--outlined--warning:hover {
  --amplify-internal-button-background-color: var(
    --amplify-components-button-outlined-warning-hover-background-color
  );
  --amplify-internal-button-border-color: var(
    --amplify-components-button-outlined-warning-hover-border-color
  );
  --amplify-internal-button-color: var(
    --amplify-components-button-outlined-warning-hover-color
  );
}
.amplify-button--outlined--warning:focus {
  --amplify-internal-button-background-color: var(
    --amplify-components-button-outlined-warning-focus-background-color
  );
  --amplify-internal-button-border-color: var(
    --amplify-components-button-outlined-warning-focus-border-color
  );
  --amplify-internal-button-color: var(
    --amplify-components-button-outlined-warning-focus-color
  );
  --amplify-internal-button-focus-box-shadow: var(
    --amplify-components-button-outlined-warning-focus-box-shadow
  );
}
.amplify-button--outlined--warning:active {
  --amplify-internal-button-background-color: var(
    --amplify-components-button-outlined-warning-active-background-color
  );
  --amplify-internal-button-border-color: var(
    --amplify-components-button-outlined-warning-active-border-color
  );
  --amplify-internal-button-color: var(
    --amplify-components-button-outlined-warning-active-color
  );
}
.amplify-button--outlined--error {
  --amplify-internal-button-background-color: var(
    --amplify-components-button-outlined-error-background-color
  );
  --amplify-internal-button-border-color: var(
    --amplify-components-button-outlined-error-border-color
  );
  --amplify-internal-button-color: var(
    --amplify-components-button-outlined-error-color
  );
}
.amplify-button--outlined--error:hover {
  --amplify-internal-button-background-color: var(
    --amplify-components-button-outlined-error-hover-background-color
  );
  --amplify-internal-button-border-color: var(
    --amplify-components-button-outlined-error-hover-border-color
  );
  --amplify-internal-button-color: var(
    --amplify-components-button-outlined-error-hover-color
  );
}
.amplify-button--outlined--error:focus {
  --amplify-internal-button-background-color: var(
    --amplify-components-button-outlined-error-focus-background-color
  );
  --amplify-internal-button-border-color: var(
    --amplify-components-button-outlined-error-focus-border-color
  );
  --amplify-internal-button-color: var(
    --amplify-components-button-outlined-error-focus-color
  );
  --amplify-internal-button-focus-box-shadow: var(
    --amplify-components-button-outlined-error-focus-box-shadow
  );
}
.amplify-button--outlined--error:active {
  --amplify-internal-button-background-color: var(
    --amplify-components-button-outlined-error-active-background-color
  );
  --amplify-internal-button-border-color: var(
    --amplify-components-button-outlined-error-active-border-color
  );
  --amplify-internal-button-color: var(
    --amplify-components-button-outlined-error-active-color
  );
}
.amplify-button--outlined--success {
  --amplify-internal-button-background-color: var(
    --amplify-components-button-outlined-success-background-color
  );
  --amplify-internal-button-border-color: var(
    --amplify-components-button-outlined-success-border-color
  );
  --amplify-internal-button-color: var(
    --amplify-components-button-outlined-success-color
  );
}
.amplify-button--outlined--success:hover {
  --amplify-internal-button-background-color: var(
    --amplify-components-button-outlined-success-hover-background-color
  );
  --amplify-internal-button-border-color: var(
    --amplify-components-button-outlined-success-hover-border-color
  );
  --amplify-internal-button-color: var(
    --amplify-components-button-outlined-success-hover-color
  );
}
.amplify-button--outlined--success:focus {
  --amplify-internal-button-background-color: var(
    --amplify-components-button-outlined-success-focus-background-color
  );
  --amplify-internal-button-border-color: var(
    --amplify-components-button-outlined-success-focus-border-color
  );
  --amplify-internal-button-color: var(
    --amplify-components-button-outlined-success-focus-color
  );
  --amplify-internal-button-focus-box-shadow: var(
    --amplify-components-button-outlined-success-focus-box-shadow
  );
}
.amplify-button--outlined--success:active {
  --amplify-internal-button-background-color: var(
    --amplify-components-button-outlined-success-active-background-color
  );
  --amplify-internal-button-border-color: var(
    --amplify-components-button-outlined-success-active-border-color
  );
  --amplify-internal-button-color: var(
    --amplify-components-button-outlined-success-active-color
  );
}
.amplify-button--outlined--overlay {
  --amplify-internal-button-background-color: var(
    --amplify-components-button-outlined-overlay-background-color
  );
  --amplify-internal-button-border-color: var(
    --amplify-components-button-outlined-overlay-border-color
  );
  --amplify-internal-button-color: var(
    --amplify-components-button-outlined-overlay-color
  );
}
.amplify-button--outlined--overlay:hover {
  --amplify-internal-button-background-color: var(
    --amplify-components-button-outlined-overlay-hover-background-color
  );
  --amplify-internal-button-border-color: var(
    --amplify-components-button-outlined-overlay-hover-border-color
  );
  --amplify-internal-button-color: var(
    --amplify-components-button-outlined-overlay-hover-color
  );
}
.amplify-button--outlined--overlay:focus {
  --amplify-internal-button-background-color: var(
    --amplify-components-button-outlined-overlay-focus-background-color
  );
  --amplify-internal-button-border-color: var(
    --amplify-components-button-outlined-overlay-focus-border-color
  );
  --amplify-internal-button-color: var(
    --amplify-components-button-outlined-overlay-focus-color
  );
  --amplify-internal-button-focus-box-shadow: var(
    --amplify-components-button-outlined-overlay-focus-box-shadow
  );
}
.amplify-button--outlined--overlay:active {
  --amplify-internal-button-background-color: var(
    --amplify-components-button-outlined-overlay-active-background-color
  );
  --amplify-internal-button-border-color: var(
    --amplify-components-button-outlined-overlay-active-border-color
  );
  --amplify-internal-button-color: var(
    --amplify-components-button-outlined-overlay-active-color
  );
}
.amplify-button--menu {
  border-width: var(--amplify-components-button-menu-border-width);
  background-color: var(--amplify-components-button-menu-background-color);
  justify-content: var(--amplify-components-button-menu-justify-content);
  --amplify-internal-button-disabled-color: var(
    --amplify-components-button-menu-disabled-color
  );
}
.amplify-button--menu:hover {
  color: var(--amplify-components-button-menu-hover-color);
  background-color: var(--amplify-components-button-menu-hover-background-color);
}
.amplify-button--menu:focus {
  box-shadow: none;
  color: var(--amplify-components-button-menu-focus-color);
  background-color: var(--amplify-components-button-menu-focus-background-color);
}
.amplify-button--menu:active {
  color: var(--amplify-components-button-menu-active-color);
  background-color: var(--amplify-components-button-menu-active-background-color);
}
.amplify-button--primary {
  --amplify-internal-button-border-width: var(
    --amplify-components-button-primary-border-width
  );
  --amplify-internal-button-background-color: var(
    --amplify-components-button-primary-background-color
  );
  --amplify-internal-button-border-color: var(
    --amplify-components-button-primary-border-color
  );
  --amplify-internal-button-color: var(
    --amplify-components-button-primary-color
  );
  --amplify-internal-button-disabled-border-color: var(
    --amplify-components-button-primary-disabled-border-color
  );
  --amplify-internal-button-disabled-background-color: var(
    --amplify-components-button-primary-disabled-background-color
  );
  --amplify-internal-button-disabled-color: var(
    --amplify-components-button-primary-disabled-color
  );
  --amplify-internal-button-loading-background-color: var(
    --amplify-components-button-primary-loading-background-color
  );
  --amplify-internal-button-loading-border-color: var(
    --amplify-components-button-primary-loading-border-color
  );
  --amplify-internal-button-loading-color: var(
    --amplify-components-button-primary-loading-color
  );
}
.amplify-button--primary:hover {
  --amplify-internal-button-background-color: var(
    --amplify-components-button-primary-hover-background-color
  );
  --amplify-internal-button-border-color: var(
    --amplify-components-button-primary-hover-border-color
  );
  --amplify-internal-button-color: var(
    --amplify-components-button-primary-hover-color
  );
}
.amplify-button--primary:focus {
  --amplify-internal-button-background-color: var(
    --amplify-components-button-primary-focus-background-color
  );
  --amplify-internal-button-border-color: var(
    --amplify-components-button-primary-focus-border-color
  );
  --amplify-internal-button-color: var(
    --amplify-components-button-primary-focus-color
  );
  --amplify-internal-button-focus-box-shadow: var(
    --amplify-components-button-primary-focus-box-shadow
  );
}
.amplify-button--primary:active {
  --amplify-internal-button-background-color: var(
    --amplify-components-button-primary-active-background-color
  );
  --amplify-internal-button-border-color: var(
    --amplify-components-button-primary-active-border-color
  );
  --amplify-internal-button-color: var(
    --amplify-components-button-primary-active-color
  );
}
.amplify-button--primary--info {
  --amplify-internal-button-background-color: var(
    --amplify-components-button-primary-info-background-color
  );
  --amplify-internal-button-border-color: var(
    --amplify-components-button-primary-info-border-color
  );
  --amplify-internal-button-color: var(
    --amplify-components-button-primary-info-color
  );
}
.amplify-button--primary--info:hover {
  --amplify-internal-button-background-color: var(
    --amplify-components-button-primary-info-hover-background-color
  );
  --amplify-internal-button-border-color: var(
    --amplify-components-button-primary-info-hover-border-color
  );
  --amplify-internal-button-color: var(
    --amplify-components-button-primary-info-hover-color
  );
}
.amplify-button--primary--info:focus {
  --amplify-internal-button-background-color: var(
    --amplify-components-button-primary-info-focus-background-color
  );
  --amplify-internal-button-border-color: var(
    --amplify-components-button-primary-info-focus-border-color
  );
  --amplify-internal-button-color: var(
    --amplify-components-button-primary-info-focus-color
  );
  --amplify-internal-button-focus-box-shadow: var(
    --amplify-components-button-primary-info-focus-box-shadow
  );
}
.amplify-button--primary--info:active {
  --amplify-internal-button-background-color: var(
    --amplify-components-button-primary-info-active-background-color
  );
  --amplify-internal-button-border-color: var(
    --amplify-components-button-primary-info-active-border-color
  );
  --amplify-internal-button-color: var(
    --amplify-components-button-primary-info-active-color
  );
}
.amplify-button--primary--warning {
  --amplify-internal-button-background-color: var(
    --amplify-components-button-primary-warning-background-color
  );
  --amplify-internal-button-border-color: var(
    --amplify-components-button-primary-warning-border-color
  );
  --amplify-internal-button-color: var(
    --amplify-components-button-primary-warning-color
  );
}
.amplify-button--primary--warning:hover {
  --amplify-internal-button-background-color: var(
    --amplify-components-button-primary-warning-hover-background-color
  );
  --amplify-internal-button-border-color: var(
    --amplify-components-button-primary-warning-hover-border-color
  );
  --amplify-internal-button-color: var(
    --amplify-components-button-primary-warning-hover-color
  );
}
.amplify-button--primary--warning:focus {
  --amplify-internal-button-background-color: var(
    --amplify-components-button-primary-warning-focus-background-color
  );
  --amplify-internal-button-border-color: var(
    --amplify-components-button-primary-warning-focus-border-color
  );
  --amplify-internal-button-color: var(
    --amplify-components-button-primary-warning-focus-color
  );
  --amplify-internal-button-focus-box-shadow: var(
    --amplify-components-button-primary-warning-focus-box-shadow
  );
}
.amplify-button--primary--warning:active {
  --amplify-internal-button-background-color: var(
    --amplify-components-button-primary-warning-active-background-color
  );
  --amplify-internal-button-border-color: var(
    --amplify-components-button-primary-warning-active-border-color
  );
  --amplify-internal-button-color: var(
    --amplify-components-button-primary-warning-active-color
  );
}
.amplify-button--primary--error {
  --amplify-internal-button-background-color: var(
    --amplify-components-button-primary-error-background-color
  );
  --amplify-internal-button-border-color: var(
    --amplify-components-button-primary-error-border-color
  );
  --amplify-internal-button-color: var(
    --amplify-components-button-primary-error-color
  );
}
.amplify-button--primary--error:hover {
  --amplify-internal-button-background-color: var(
    --amplify-components-button-primary-error-hover-background-color
  );
  --amplify-internal-button-border-color: var(
    --amplify-components-button-primary-error-hover-border-color
  );
  --amplify-internal-button-color: var(
    --amplify-components-button-primary-error-hover-color
  );
}
.amplify-button--primary--error:focus {
  --amplify-internal-button-background-color: var(
    --amplify-components-button-primary-error-focus-background-color
  );
  --amplify-internal-button-border-color: var(
    --amplify-components-button-primary-error-focus-border-color
  );
  --amplify-internal-button-color: var(
    --amplify-components-button-primary-error-focus-color
  );
  --amplify-internal-button-focus-box-shadow: var(
    --amplify-components-button-primary-error-focus-box-shadow
  );
}
.amplify-button--primary--error:active {
  --amplify-internal-button-background-color: var(
    --amplify-components-button-primary-error-active-background-color
  );
  --amplify-internal-button-border-color: var(
    --amplify-components-button-primary-error-active-border-color
  );
  --amplify-internal-button-color: var(
    --amplify-components-button-primary-error-active-color
  );
}
.amplify-button--primary--success {
  --amplify-internal-button-background-color: var(
    --amplify-components-button-primary-success-background-color
  );
  --amplify-internal-button-border-color: var(
    --amplify-components-button-primary-success-border-color
  );
  --amplify-internal-button-color: var(
    --amplify-components-button-primary-success-color
  );
}
.amplify-button--primary--success:hover {
  --amplify-internal-button-background-color: var(
    --amplify-components-button-primary-success-hover-background-color
  );
  --amplify-internal-button-border-color: var(
    --amplify-components-button-primary-success-hover-border-color
  );
  --amplify-internal-button-color: var(
    --amplify-components-button-primary-success-hover-color
  );
}
.amplify-button--primary--success:focus {
  --amplify-internal-button-background-color: var(
    --amplify-components-button-primary-success-focus-background-color
  );
  --amplify-internal-button-border-color: var(
    --amplify-components-button-primary-success-focus-border-color
  );
  --amplify-internal-button-color: var(
    --amplify-components-button-primary-success-focus-color
  );
  --amplify-internal-button-focus-box-shadow: var(
    --amplify-components-button-primary-success-focus-box-shadow
  );
}
.amplify-button--primary--success:active {
  --amplify-internal-button-background-color: var(
    --amplify-components-button-primary-success-active-background-color
  );
  --amplify-internal-button-border-color: var(
    --amplify-components-button-primary-success-active-border-color
  );
  --amplify-internal-button-color: var(
    --amplify-components-button-primary-success-active-color
  );
}
.amplify-button--primary--overlay {
  --amplify-internal-button-background-color: var(
    --amplify-components-button-primary-overlay-background-color
  );
  --amplify-internal-button-border-color: var(
    --amplify-components-button-primary-overlay-border-color
  );
  --amplify-internal-button-color: var(
    --amplify-components-button-primary-overlay-color
  );
}
.amplify-button--primary--overlay:hover {
  --amplify-internal-button-background-color: var(
    --amplify-components-button-primary-overlay-hover-background-color
  );
  --amplify-internal-button-border-color: var(
    --amplify-components-button-primary-overlay-hover-border-color
  );
  --amplify-internal-button-color: var(
    --amplify-components-button-primary-overlay-hover-color
  );
}
.amplify-button--primary--overlay:focus {
  --amplify-internal-button-background-color: var(
    --amplify-components-button-primary-overlay-focus-background-color
  );
  --amplify-internal-button-border-color: var(
    --amplify-components-button-primary-overlay-focus-border-color
  );
  --amplify-internal-button-color: var(
    --amplify-components-button-primary-overlay-focus-color
  );
  --amplify-internal-button-focus-box-shadow: var(
    --amplify-components-button-primary-overlay-focus-box-shadow
  );
}
.amplify-button--primary--overlay:active {
  --amplify-internal-button-background-color: var(
    --amplify-components-button-primary-overlay-active-background-color
  );
  --amplify-internal-button-border-color: var(
    --amplify-components-button-primary-overlay-active-border-color
  );
  --amplify-internal-button-color: var(
    --amplify-components-button-primary-overlay-active-color
  );
}
.amplify-button--link {
  --amplify-internal-button-border-width: var(
    --amplify-components-button-link-border-width
  );
  --amplify-internal-button-background-color: var(
    --amplify-components-button-link-background-color
  );
  --amplify-internal-button-border-color: var(
    --amplify-components-button-link-border-color
  );
  --amplify-internal-button-color: var(
    --amplify-components-button-link-color
  );
  --amplify-internal-button-disabled-border-color: var(
    --amplify-components-button-link-disabled-border-color
  );
  --amplify-internal-button-disabled-background-color: var(
    --amplify-components-button-link-disabled-background-color
  );
  --amplify-internal-button-disabled-color: var(
    --amplify-components-button-link-disabled-color
  );
  --amplify-internal-button-loading-background-color: var(
    --amplify-components-button-link-loading-background-color
  );
  --amplify-internal-button-loading-border-color: var(
    --amplify-components-button-link-loading-border-color
  );
  --amplify-internal-button-loading-color: var(
    --amplify-components-button-link-loading-color
  );
}
.amplify-button--link:hover {
  --amplify-internal-button-background-color: var(
    --amplify-components-button-link-hover-background-color
  );
  --amplify-internal-button-border-color: var(
    --amplify-components-button-link-hover-border-color
  );
  --amplify-internal-button-color: var(
    --amplify-components-button-link-hover-color
  );
}
.amplify-button--link:focus {
  --amplify-internal-button-background-color: var(
    --amplify-components-button-link-focus-background-color
  );
  --amplify-internal-button-border-color: var(
    --amplify-components-button-link-focus-border-color
  );
  --amplify-internal-button-color: var(
    --amplify-components-button-link-focus-color
  );
  --amplify-internal-button-focus-box-shadow: var(
    --amplify-components-button-link-focus-box-shadow
  );
}
.amplify-button--link:active {
  --amplify-internal-button-background-color: var(
    --amplify-components-button-link-active-background-color
  );
  --amplify-internal-button-border-color: var(
    --amplify-components-button-link-active-border-color
  );
  --amplify-internal-button-color: var(
    --amplify-components-button-link-active-color
  );
}
.amplify-button--link--info {
  --amplify-internal-button-background-color: var(
    --amplify-components-button-link-info-background-color
  );
  --amplify-internal-button-border-color: var(
    --amplify-components-button-link-info-border-color
  );
  --amplify-internal-button-color: var(
    --amplify-components-button-link-info-color
  );
}
.amplify-button--link--info:hover {
  --amplify-internal-button-background-color: var(
    --amplify-components-button-link-info-hover-background-color
  );
  --amplify-internal-button-border-color: var(
    --amplify-components-button-link-info-hover-border-color
  );
  --amplify-internal-button-color: var(
    --amplify-components-button-link-info-hover-color
  );
}
.amplify-button--link--info:focus {
  --amplify-internal-button-background-color: var(
    --amplify-components-button-link-info-focus-background-color
  );
  --amplify-internal-button-border-color: var(
    --amplify-components-button-link-info-focus-border-color
  );
  --amplify-internal-button-color: var(
    --amplify-components-button-link-info-focus-color
  );
  --amplify-internal-button-focus-box-shadow: var(
    --amplify-components-button-link-info-focus-box-shadow
  );
}
.amplify-button--link--info:active {
  --amplify-internal-button-background-color: var(
    --amplify-components-button-link-info-active-background-color
  );
  --amplify-internal-button-border-color: var(
    --amplify-components-button-link-info-active-border-color
  );
  --amplify-internal-button-color: var(
    --amplify-components-button-link-info-active-color
  );
}
.amplify-button--link--warning {
  --amplify-internal-button-background-color: var(
    --amplify-components-button-link-warning-background-color
  );
  --amplify-internal-button-border-color: var(
    --amplify-components-button-link-warning-border-color
  );
  --amplify-internal-button-color: var(
    --amplify-components-button-link-warning-color
  );
}
.amplify-button--link--warning:hover {
  --amplify-internal-button-background-color: var(
    --amplify-components-button-link-warning-hover-background-color
  );
  --amplify-internal-button-border-color: var(
    --amplify-components-button-link-warning-hover-border-color
  );
  --amplify-internal-button-color: var(
    --amplify-components-button-link-warning-hover-color
  );
}
.amplify-button--link--warning:focus {
  --amplify-internal-button-background-color: var(
    --amplify-components-button-link-warning-focus-background-color
  );
  --amplify-internal-button-border-color: var(
    --amplify-components-button-link-warning-focus-border-color
  );
  --amplify-internal-button-color: var(
    --amplify-components-button-link-warning-focus-color
  );
  --amplify-internal-button-focus-box-shadow: var(
    --amplify-components-button-link-warning-focus-box-shadow
  );
}
.amplify-button--link--warning:active {
  --amplify-internal-button-background-color: var(
    --amplify-components-button-link-warning-active-background-color
  );
  --amplify-internal-button-border-color: var(
    --amplify-components-button-link-warning-active-border-color
  );
  --amplify-internal-button-color: var(
    --amplify-components-button-link-warning-active-color
  );
}
.amplify-button--link--error {
  --amplify-internal-button-background-color: var(
    --amplify-components-button-link-error-background-color
  );
  --amplify-internal-button-border-color: var(
    --amplify-components-button-link-error-border-color
  );
  --amplify-internal-button-color: var(
    --amplify-components-button-link-error-color
  );
}
.amplify-button--link--error:hover {
  --amplify-internal-button-background-color: var(
    --amplify-components-button-link-error-hover-background-color
  );
  --amplify-internal-button-border-color: var(
    --amplify-components-button-link-error-hover-border-color
  );
  --amplify-internal-button-color: var(
    --amplify-components-button-link-error-hover-color
  );
}
.amplify-button--link--error:focus {
  --amplify-internal-button-background-color: var(
    --amplify-components-button-link-error-focus-background-color
  );
  --amplify-internal-button-border-color: var(
    --amplify-components-button-link-error-focus-border-color
  );
  --amplify-internal-button-color: var(
    --amplify-components-button-link-error-focus-color
  );
  --amplify-internal-button-focus-box-shadow: var(
    --amplify-components-button-link-error-focus-box-shadow
  );
}
.amplify-button--link--error:active {
  --amplify-internal-button-background-color: var(
    --amplify-components-button-link-error-active-background-color
  );
  --amplify-internal-button-border-color: var(
    --amplify-components-button-link-error-active-border-color
  );
  --amplify-internal-button-color: var(
    --amplify-components-button-link-error-active-color
  );
}
.amplify-button--link--success {
  --amplify-internal-button-background-color: var(
    --amplify-components-button-link-success-background-color
  );
  --amplify-internal-button-border-color: var(
    --amplify-components-button-link-success-border-color
  );
  --amplify-internal-button-color: var(
    --amplify-components-button-link-success-color
  );
}
.amplify-button--link--success:hover {
  --amplify-internal-button-background-color: var(
    --amplify-components-button-link-success-hover-background-color
  );
  --amplify-internal-button-border-color: var(
    --amplify-components-button-link-success-hover-border-color
  );
  --amplify-internal-button-color: var(
    --amplify-components-button-link-success-hover-color
  );
}
.amplify-button--link--success:focus {
  --amplify-internal-button-background-color: var(
    --amplify-components-button-link-success-focus-background-color
  );
  --amplify-internal-button-border-color: var(
    --amplify-components-button-link-success-focus-border-color
  );
  --amplify-internal-button-color: var(
    --amplify-components-button-link-success-focus-color
  );
  --amplify-internal-button-focus-box-shadow: var(
    --amplify-components-button-link-success-focus-box-shadow
  );
}
.amplify-button--link--success:active {
  --amplify-internal-button-background-color: var(
    --amplify-components-button-link-success-active-background-color
  );
  --amplify-internal-button-border-color: var(
    --amplify-components-button-link-success-active-border-color
  );
  --amplify-internal-button-color: var(
    --amplify-components-button-link-success-active-color
  );
}
.amplify-button--link--overlay {
  --amplify-internal-button-background-color: var(
    --amplify-components-button-link-overlay-background-color
  );
  --amplify-internal-button-border-color: var(
    --amplify-components-button-link-overlay-border-color
  );
  --amplify-internal-button-color: var(
    --amplify-components-button-link-overlay-color
  );
}
.amplify-button--link--overlay:hover {
  --amplify-internal-button-background-color: var(
    --amplify-components-button-link-overlay-hover-background-color
  );
  --amplify-internal-button-border-color: var(
    --amplify-components-button-link-overlay-hover-border-color
  );
  --amplify-internal-button-color: var(
    --amplify-components-button-link-overlay-hover-color
  );
}
.amplify-button--link--overlay:focus {
  --amplify-internal-button-background-color: var(
    --amplify-components-button-link-overlay-focus-background-color
  );
  --amplify-internal-button-border-color: var(
    --amplify-components-button-link-overlay-focus-border-color
  );
  --amplify-internal-button-color: var(
    --amplify-components-button-link-overlay-focus-color
  );
  --amplify-internal-button-focus-box-shadow: var(
    --amplify-components-button-link-overlay-focus-box-shadow
  );
}
.amplify-button--link--overlay:active {
  --amplify-internal-button-background-color: var(
    --amplify-components-button-link-overlay-active-background-color
  );
  --amplify-internal-button-border-color: var(
    --amplify-components-button-link-overlay-active-border-color
  );
  --amplify-internal-button-color: var(
    --amplify-components-button-link-overlay-active-color
  );
}
.amplify-button--destructive {
  border-width: var(--amplify-components-button-destructive-border-width);
  background-color: var(--amplify-components-button-destructive-background-color);
  border-color: var(--amplify-components-button-destructive-border-color);
  color: var(--amplify-components-button-destructive-color);
  --amplify-internal-button-disabled-border-color: var(
    --amplify-components-button-destructive-disabled-border-color
  );
  --amplify-internal-button-disabled-background-color: var(
    --amplify-components-button-destructive-disabled-background-color
  );
  --amplify-internal-button-disabled-color: var(
    --amplify-components-button-destructive-disabled-color
  );
  --amplify-internal-button-loading-background-color: var(
    --amplify-components-button-destructive-loading-background-color
  );
  --amplify-internal-button-loading-border-color: var(
    --amplify-components-button-destructive-loading-border-color
  );
  --amplify-internal-button-loading-color: var(
    --amplify-components-button-destructive-loading-color
  );
}
.amplify-button--destructive:hover {
  background-color: var(--amplify-components-button-destructive-hover-background-color);
  border-color: var(--amplify-components-button-destructive-hover-border-color);
  color: var(--amplify-components-button-destructive-hover-color);
}
.amplify-button--destructive:focus {
  background-color: var(--amplify-components-button-destructive-focus-background-color);
  border-color: var(--amplify-components-button-destructive-focus-border-color);
  color: var(--amplify-components-button-destructive-focus-color);
  box-shadow: var(--amplify-components-button-destructive-focus-box-shadow);
}
.amplify-button--destructive:active {
  background-color: var(--amplify-components-button-destructive-active-background-color);
  border-color: var(--amplify-components-button-destructive-active-border-color);
  color: var(--amplify-components-button-destructive-active-color);
}
.amplify-button--warning {
  background-color: var(--amplify-components-button-warning-background-color);
  border-color: var(--amplify-components-button-warning-border-color);
  border-width: var(--amplify-components-button-warning-border-width);
  color: var(--amplify-components-button-warning-color);
  --amplify-internal-button-disabled-text-decoration: none;
  --amplify-internal-button-disabled-border-color: var(
    --amplify-components-button-warning-disabled-border-color
  );
  --amplify-internal-button-disabled-background-color: var(
    --amplify-components-button-warning-disabled-background-color
  );
  --amplify-internal-button-disabled-color: var(
    --amplify-components-button-warning-disabled-color
  );
  --amplify-internal-button-loading-background-color: var(
    --amplify-components-button-warning-loading-background-color
  );
  --amplify-internal-button-loading-border-color: var(
    --amplify-components-button-warning-loading-border-color
  );
  --amplify-internal-button-loading-color: var(
    --amplify-components-button-warning-loading-color
  );
  --amplify-internal-button-loading-text-decoration: none;
}
.amplify-button--warning:hover {
  background-color: var(--amplify-components-button-warning-hover-background-color);
  border-color: var(--amplify-components-button-warning-hover-border-color);
  color: var(--amplify-components-button-warning-hover-color);
}
.amplify-button--warning:focus {
  background-color: var(--amplify-components-button-warning-focus-background-color);
  border-color: var(--amplify-components-button-warning-focus-border-color);
  color: var(--amplify-components-button-warning-focus-color);
  box-shadow: var(--amplify-components-button-warning-focus-box-shadow);
}
.amplify-button--warning:active {
  background-color: var(--amplify-components-button-warning-active-background-color);
  border-color: var(--amplify-components-button-warning-active-border-color);
  color: var(--amplify-components-button-warning-active-color);
}
.amplify-button--small {
  font-size: var(--amplify-components-button-small-font-size);
  padding-block-start: var(--amplify-components-button-small-padding-block-start);
  padding-block-end: var(--amplify-components-button-small-padding-block-end);
  padding-inline-start: var(--amplify-components-button-small-padding-inline-start);
  padding-inline-end: var(--amplify-components-button-small-padding-inline-end);
}
.amplify-button--large {
  font-size: var(--amplify-components-button-large-font-size);
  padding-block-start: var(--amplify-components-button-large-padding-block-start);
  padding-block-end: var(--amplify-components-button-large-padding-block-end);
  padding-inline-start: var(--amplify-components-button-large-padding-inline-start);
  padding-inline-end: var(--amplify-components-button-large-padding-inline-end);
}
.amplify-button--disabled {
  background-color: var(--amplify-internal-button-disabled-background-color);
  border-color: var(--amplify-internal-button-disabled-border-color);
  color: var(--amplify-internal-button-disabled-color);
  -webkit-text-decoration: var(--amplify-internal-button-disabled-text-decoration);
          text-decoration: var(--amplify-internal-button-disabled-text-decoration);
  cursor: not-allowed;
}
.amplify-button--disabled:hover {
  background-color: var(--amplify-internal-button-disabled-background-color);
  border-color: var(--amplify-internal-button-disabled-border-color);
  color: var(--amplify-internal-button-disabled-color);
  -webkit-text-decoration: var(--amplify-internal-button-disabled-text-decoration);
          text-decoration: var(--amplify-internal-button-disabled-text-decoration);
}
.amplify-button--disabled :focus {
  background-color: var(--amplify-internal-button-disabled-background-color);
  border-color: var(--amplify-internal-button-disabled-border-color);
  color: var(--amplify-internal-button-disabled-color);
  -webkit-text-decoration: var(--amplify-internal-button-disabled-text-decoration);
          text-decoration: var(--amplify-internal-button-disabled-text-decoration);
}
.amplify-button--disabled:active {
  background-color: var(--amplify-internal-button-disabled-background-color);
  border-color: var(--amplify-internal-button-disabled-border-color);
  color: var(--amplify-internal-button-disabled-color);
  -webkit-text-decoration: var(--amplify-internal-button-disabled-text-decoration);
          text-decoration: var(--amplify-internal-button-disabled-text-decoration);
}
.amplify-button--loading {
  background-color: var(--amplify-internal-button-loading-background-color);
  border-color: var(--amplify-internal-button-loading-border-color);
  color: var(--amplify-components-button-loading-color);
  -webkit-text-decoration: var(--amplify-internal-button-loading-text-decoration);
          text-decoration: var(--amplify-internal-button-loading-text-decoration);
}
.amplify-button--loading:hover {
  background-color: var(--amplify-internal-button-loading-background-color);
  border-color: var(--amplify-internal-button-loading-border-color);
  color: var(--amplify-components-button-loading-color);
  -webkit-text-decoration: var(--amplify-internal-button-loading-text-decoration);
          text-decoration: var(--amplify-internal-button-loading-text-decoration);
}
.amplify-button--loading:focus {
  background-color: var(--amplify-internal-button-loading-background-color);
  border-color: var(--amplify-internal-button-loading-border-color);
  color: var(--amplify-components-button-loading-color);
  -webkit-text-decoration: var(--amplify-internal-button-loading-text-decoration);
          text-decoration: var(--amplify-internal-button-loading-text-decoration);
}
.amplify-button--loading:active {
  background-color: var(--amplify-internal-button-loading-background-color);
  border-color: var(--amplify-internal-button-loading-border-color);
  color: var(--amplify-components-button-loading-color);
  -webkit-text-decoration: var(--amplify-internal-button-loading-text-decoration);
          text-decoration: var(--amplify-internal-button-loading-text-decoration);
}
.amplify-button__loader-wrapper {
  align-items: var(--amplify-components-button-loader-wrapper-align-items);
  gap: var(--amplify-components-button-loader-wrapper-gap);
}

@media (prefers-reduced-motion: reduce) {
  .amplify-button {
    transition: none;
  }
}
.amplify-dropzone {
  display: block;
  background-color: var(--amplify-components-dropzone-background-color);
  border-color: var(--amplify-components-dropzone-border-color);
  border-width: var(--amplify-components-dropzone-border-width);
  border-style: var(--amplify-components-dropzone-border-style);
  border-radius: var(--amplify-components-dropzone-border-radius);
  color: var(--amplify-components-dropzone-color);
  padding-block: var(--amplify-components-dropzone-padding-block);
  padding-inline: var(--amplify-components-dropzone-padding-inline);
  text-align: var(--amplify-components-dropzone-text-align);
}
.amplify-dropzone--disabled {
  cursor: not-allowed;
  background-color: var(--amplify-components-dropzone-disabled-background-color);
  border-color: var(--amplify-components-dropzone-disabled-border-color);
  border-width: var(--amplify-components-dropzone-disabled-border-width);
  border-style: var(--amplify-components-dropzone-disabled-border-style);
  border-radius: var(--amplify-components-dropzone-disabled-border-radius);
  color: var(--amplify-components-dropzone-disabled-color);
}
.amplify-dropzone--active {
  background-color: var(--amplify-components-dropzone-active-background-color);
  border-color: var(--amplify-components-dropzone-active-border-color);
  border-width: var(--amplify-components-dropzone-active-border-width);
  border-style: var(--amplify-components-dropzone-active-border-style);
  border-radius: var(--amplify-components-dropzone-active-border-radius);
  color: var(--amplify-components-dropzone-active-color);
}
.amplify-dropzone--rejected {
  background-color: var(--amplify-components-dropzone-rejected-background-color);
  border-color: var(--amplify-components-dropzone-rejected-border-color);
  border-width: var(--amplify-components-dropzone-rejected-border-width);
  border-style: var(--amplify-components-dropzone-rejected-border-style);
  border-radius: var(--amplify-components-dropzone-rejected-border-radius);
  color: var(--amplify-components-dropzone-rejected-color);
}
.amplify-dropzone--accepted {
  background-color: var(--amplify-components-dropzone-accepted-background-color);
  border-color: var(--amplify-components-dropzone-accepted-border-color);
  border-width: var(--amplify-components-dropzone-accepted-border-width);
  border-style: var(--amplify-components-dropzone-accepted-border-style);
  border-radius: var(--amplify-components-dropzone-accepted-border-radius);
  color: var(--amplify-components-dropzone-accepted-color);
}

.amplify-field__description {
  color: var(--amplify-components-fieldmessages-description-color);
  font-style: var(--amplify-components-fieldmessages-description-font-style);
  font-size: var(--amplify-components-fieldmessages-description-font-size);
}

.amplify-field__error-message {
  color: var(--amplify-components-fieldmessages-error-color);
  font-size: var(--amplify-components-fieldmessages-error-font-size);
}

.amplify-heading {
  color: var(--amplify-components-heading-color);
  line-height: var(--amplify-components-heading-line-height);
  display: block;
}
.amplify-heading--truncated {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.amplify-heading--1 {
  font-size: var(--amplify-components-heading-1-font-size);
  font-weight: var(--amplify-components-heading-1-font-weight);
}

.amplify-heading--2 {
  font-size: var(--amplify-components-heading-2-font-size);
  font-weight: var(--amplify-components-heading-2-font-weight);
}

.amplify-heading--3 {
  font-size: var(--amplify-components-heading-3-font-size);
  font-weight: var(--amplify-components-heading-3-font-weight);
}

.amplify-heading--4 {
  font-size: var(--amplify-components-heading-4-font-size);
  font-weight: var(--amplify-components-heading-4-font-weight);
}

.amplify-heading--5 {
  font-size: var(--amplify-components-heading-5-font-size);
  font-weight: var(--amplify-components-heading-5-font-weight);
}

.amplify-heading--6 {
  font-size: var(--amplify-components-heading-6-font-size);
  font-weight: var(--amplify-components-heading-6-font-weight);
}

/*
 * Icon base styles
 */
.amplify-icon {
  display: inline-block;
  vertical-align: middle;
  fill: currentColor;
  height: var(--amplify-components-icon-height);
  line-height: var(--amplify-components-icon-line-height);
}
.amplify-icon > svg {
  height: var(--amplify-components-icon-height);
  width: var(--amplify-components-icon-height);
}

.amplify-highlightmatch__highlighted {
  font-weight: var(--amplify-components-highlightmatch-highlighted-font-weight);
}

.amplify-input {
  box-sizing: border-box;
  color: var(--amplify-components-fieldcontrol-color);
  font-size: var(--amplify-components-fieldcontrol-font-size);
  line-height: var(--amplify-components-fieldcontrol-line-height);
  padding-block-start: var(--amplify-components-fieldcontrol-padding-block-start);
  padding-block-end: var(--amplify-components-fieldcontrol-padding-block-end);
  padding-inline-start: var(--amplify-components-fieldcontrol-padding-inline-start);
  padding-inline-end: var(--amplify-components-fieldcontrol-padding-inline-end);
  transition: all var(--amplify-components-fieldcontrol-transition-duration);
  width: 100%;
  border-color: var(--amplify-components-fieldcontrol-border-color);
  border-radius: var(--amplify-components-fieldcontrol-border-radius);
  border-style: var(--amplify-components-fieldcontrol-border-style);
  border-width: var(--amplify-components-fieldcontrol-border-width);
  outline-color: var(--amplify-components-fieldcontrol-outline-color);
  outline-style: var(--amplify-components-fieldcontrol-outline-style);
  outline-width: var(--amplify-components-fieldcontrol-outline-width);
  outline-offset: var(--amplify-components-fieldcontrol-outline-offset);
  -webkit-user-select: text;
     -moz-user-select: text;
          user-select: text;
  display: inline-block;
  --amplify-components-fieldcontrol-color: var(
    --amplify-components-input-color
  );
  --amplify-components-fieldcontrol-border-color: var(
    --amplify-components-input-border-color
  );
  --amplify-components-fieldcontrol-font-size: var(
    --amplify-components-input-font-size
  );
  --amplify-components-fieldcontrol-focus-border-color: var(
    --amplify-components-input-focus-border-color
  );
}
.amplify-input:focus {
  border-color: var(--amplify-components-fieldcontrol-focus-border-color);
  box-shadow: var(--amplify-components-fieldcontrol-focus-box-shadow);
}
.amplify-input--small {
  font-size: var(--amplify-components-fieldcontrol-small-font-size);
  padding-block-start: var(--amplify-components-fieldcontrol-small-padding-block-start);
  padding-block-end: var(--amplify-components-fieldcontrol-small-padding-block-end);
  padding-inline-start: var(--amplify-components-fieldcontrol-small-padding-inline-start);
  padding-inline-end: var(--amplify-components-fieldcontrol-small-padding-inline-end);
}
.amplify-input--large {
  font-size: var(--amplify-components-fieldcontrol-large-font-size);
  padding-block-start: var(--amplify-components-fieldcontrol-large-padding-block-start);
  padding-block-end: var(--amplify-components-fieldcontrol-large-padding-block-end);
  padding-inline-start: var(--amplify-components-fieldcontrol-large-padding-inline-start);
  padding-inline-end: var(--amplify-components-fieldcontrol-large-padding-inline-end);
}
.amplify-input--error {
  border-color: var(--amplify-components-fieldcontrol-error-border-color);
}
.amplify-input--error:focus {
  border-color: var(--amplify-components-fieldcontrol-error-border-color);
  box-shadow: var(--amplify-components-fieldcontrol-error-focus-box-shadow);
}
.amplify-input--quiet {
  border-block-start: var(--amplify-components-fieldcontrol-quiet-border-block-start);
  border-inline-start: var(--amplify-components-fieldcontrol-quiet-border-inline-start);
  border-inline-end: var(--amplify-components-fieldcontrol-quiet-border-inline-end);
  border-radius: var(--amplify-components-fieldcontrol-quiet-border-radius);
}
.amplify-input--quiet:focus {
  border-block-end-color: var(--amplify-components-fieldcontrol-quiet-focus-border-block-end-color);
  box-shadow: var(--amplify-components-fieldcontrol-quiet-focus-box-shadow);
}
.amplify-input--quiet[aria-invalid=true] {
  border-block-end-color: var(--amplify-components-fieldcontrol-quiet-error-border-block-end-color);
}
.amplify-input--quiet[aria-invalid=true]:focus {
  border-block-end-color: var(--amplify-components-fieldcontrol-quiet-error-focus-border-block-end-color);
  box-shadow: var(--amplify-components-fieldcontrol-quiet-error-focus-box-shadow);
}
.amplify-input[disabled] {
  color: var(--amplify-components-fieldcontrol-disabled-color);
  cursor: var(--amplify-components-fieldcontrol-disabled-cursor);
  border-color: var(--amplify-components-fieldcontrol-disabled-border-color);
  background-color: var(--amplify-components-fieldcontrol-disabled-background-color);
}

.amplify-textarea {
  box-sizing: border-box;
  color: var(--amplify-components-fieldcontrol-color);
  font-size: var(--amplify-components-fieldcontrol-font-size);
  line-height: var(--amplify-components-fieldcontrol-line-height);
  padding-block-start: var(--amplify-components-fieldcontrol-padding-block-start);
  padding-block-end: var(--amplify-components-fieldcontrol-padding-block-end);
  padding-inline-start: var(--amplify-components-fieldcontrol-padding-inline-start);
  padding-inline-end: var(--amplify-components-fieldcontrol-padding-inline-end);
  transition: all var(--amplify-components-fieldcontrol-transition-duration);
  width: 100%;
  border-color: var(--amplify-components-fieldcontrol-border-color);
  border-radius: var(--amplify-components-fieldcontrol-border-radius);
  border-style: var(--amplify-components-fieldcontrol-border-style);
  border-width: var(--amplify-components-fieldcontrol-border-width);
  outline-color: var(--amplify-components-fieldcontrol-outline-color);
  outline-style: var(--amplify-components-fieldcontrol-outline-style);
  outline-width: var(--amplify-components-fieldcontrol-outline-width);
  outline-offset: var(--amplify-components-fieldcontrol-outline-offset);
  -webkit-user-select: text;
     -moz-user-select: text;
          user-select: text;
  white-space: pre-wrap;
  max-height: 100%;
}
.amplify-textarea:focus {
  border-color: var(--amplify-components-fieldcontrol-focus-border-color);
  box-shadow: var(--amplify-components-fieldcontrol-focus-box-shadow);
}
.amplify-textarea--small {
  font-size: var(--amplify-components-fieldcontrol-small-font-size);
  padding-block-start: var(--amplify-components-fieldcontrol-small-padding-block-start);
  padding-block-end: var(--amplify-components-fieldcontrol-small-padding-block-end);
  padding-inline-start: var(--amplify-components-fieldcontrol-small-padding-inline-start);
  padding-inline-end: var(--amplify-components-fieldcontrol-small-padding-inline-end);
}
.amplify-textarea--large {
  font-size: var(--amplify-components-fieldcontrol-large-font-size);
  padding-block-start: var(--amplify-components-fieldcontrol-large-padding-block-start);
  padding-block-end: var(--amplify-components-fieldcontrol-large-padding-block-end);
  padding-inline-start: var(--amplify-components-fieldcontrol-large-padding-inline-start);
  padding-inline-end: var(--amplify-components-fieldcontrol-large-padding-inline-end);
}
.amplify-textarea--error {
  border-color: var(--amplify-components-fieldcontrol-error-border-color);
}
.amplify-textarea--error:focus {
  border-color: var(--amplify-components-fieldcontrol-error-border-color);
  box-shadow: var(--amplify-components-fieldcontrol-error-focus-box-shadow);
}
.amplify-textarea--quiet {
  border-block-start: var(--amplify-components-fieldcontrol-quiet-border-block-start);
  border-inline-start: var(--amplify-components-fieldcontrol-quiet-border-inline-start);
  border-inline-end: var(--amplify-components-fieldcontrol-quiet-border-inline-end);
  border-radius: var(--amplify-components-fieldcontrol-quiet-border-radius);
}
.amplify-textarea--quiet:focus {
  border-block-end-color: var(--amplify-components-fieldcontrol-quiet-focus-border-block-end-color);
  box-shadow: var(--amplify-components-fieldcontrol-quiet-focus-box-shadow);
}
.amplify-textarea--quiet[aria-invalid=true] {
  border-block-end-color: var(--amplify-components-fieldcontrol-quiet-error-border-block-end-color);
}
.amplify-textarea--quiet[aria-invalid=true]:focus {
  border-block-end-color: var(--amplify-components-fieldcontrol-quiet-error-focus-border-block-end-color);
  box-shadow: var(--amplify-components-fieldcontrol-quiet-error-focus-box-shadow);
}
.amplify-textarea[disabled] {
  color: var(--amplify-components-fieldcontrol-disabled-color);
  cursor: var(--amplify-components-fieldcontrol-disabled-cursor);
  border-color: var(--amplify-components-fieldcontrol-disabled-border-color);
  background-color: var(--amplify-components-fieldcontrol-disabled-background-color);
}

.amplify-image {
  height: var(--amplify-components-image-height);
  max-width: var(--amplify-components-image-max-width);
  -o-object-fit: var(--amplify-components-image-object-fit);
     object-fit: var(--amplify-components-image-object-fit);
  -o-object-position: var(--amplify-components-image-object-position);
     object-position: var(--amplify-components-image-object-position);
  overflow: clip;
}

.amplify-link {
  color: var(--amplify-components-link-color);
  -webkit-text-decoration: var(--amplify-components-link-text-decoration);
          text-decoration: var(--amplify-components-link-text-decoration);
  cursor: pointer;
}
.amplify-link:visited {
  color: var(--amplify-components-link-visited-color);
  -webkit-text-decoration: var(--amplify-components-link-visited-text-decoration);
          text-decoration: var(--amplify-components-link-visited-text-decoration);
}
.amplify-link:active {
  color: var(--amplify-components-link-active-color);
  -webkit-text-decoration: var(--amplify-components-link-active-text-decoration);
          text-decoration: var(--amplify-components-link-active-text-decoration);
}
.amplify-link:focus {
  color: var(--amplify-components-link-focus-color);
  -webkit-text-decoration: var(--amplify-components-link-focus-text-decoration);
          text-decoration: var(--amplify-components-link-focus-text-decoration);
}
.amplify-link:hover {
  color: var(--amplify-components-link-hover-color);
  -webkit-text-decoration: var(--amplify-components-link-hover-text-decoration);
          text-decoration: var(--amplify-components-link-hover-text-decoration);
}

.amplify-loader {
  width: var(--amplify-components-loader-width);
  height: var(--amplify-components-loader-height);
  font-size: var(--amplify-components-loader-font-size);
  fill: none;
  stroke: var(--amplify-components-loader-stroke-empty);
  --amplify-internal-loader-linear-font-size: var(
    --amplify-components-loader-linear-font-size
  );
  --amplify-internal-loader-linear-stroke-width: var(
    --amplify-components-loader-linear-stroke-width
  );
}
.amplify-loader circle:last-of-type {
  transform-origin: center center;
  animation-name: amplify-loader-circular;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-duration: var(--amplify-components-loader-animation-duration);
  stroke: var(--amplify-components-loader-stroke-filled);
  stroke-linecap: var(--amplify-components-loader-stroke-linecap);
}
@media (prefers-reduced-motion) {
  .amplify-loader circle:last-of-type {
    animation: none;
    stroke-dasharray: 100% 200%;
    stroke-dashoffset: 50%;
  }
}
.amplify-loader line:last-of-type {
  stroke: var(--amplify-components-loader-linear-stroke-filled);
  stroke-dasharray: 50% 200%;
  animation-name: amplify-loader-linear;
  animation-duration: var(--amplify-components-loader-linear-animation-duration);
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}
@media (prefers-reduced-motion) {
  .amplify-loader line:last-of-type {
    animation: none;
    stroke-dashoffset: -50%;
  }
}
.amplify-loader--small {
  width: var(--amplify-components-loader-small-width);
  height: var(--amplify-components-loader-small-height);
  font-size: var(--amplify-components-loader-small-font-size);
  --amplify-internal-loader-linear-stroke-width: var(
    --amplify-components-loader-linear-small-stroke-width
  );
  --amplify-internal-loader-linear-font-size: var(
    --amplify-components-loader-linear-small-font-size
  );
}
.amplify-loader--large {
  width: var(--amplify-components-loader-large-width);
  height: var(--amplify-components-loader-large-height);
  font-size: var(--amplify-components-loader-large-font-size);
  --amplify-internal-loader-linear-stroke-width: var(
    --amplify-components-loader-linear-large-stroke-width
  );
  --amplify-internal-loader-linear-font-size: var(
    --amplify-components-loader-linear-large-font-size
  );
}
.amplify-loader--linear {
  width: var(--amplify-components-loader-linear-width);
  min-width: var(--amplify-components-loader-linear-min-width);
  stroke: var(--amplify-components-loader-linear-stroke-empty);
  stroke-linecap: var(--amplify-components-loader-linear-stroke-linecap);
  stroke-width: var(--amplify-internal-loader-linear-stroke-width);
  font-size: var(--amplify-internal-loader-linear-font-size);
}
.amplify-loader--determinate circle:last-of-type {
  animation: none;
  transform: rotate(-90deg);
}
.amplify-loader--determinate line:last-of-type {
  animation: none;
  stroke-dashoffset: 0%;
  stroke-dasharray: none;
}
.amplify-loader__label {
  fill: var(--amplify-components-loader-text-fill);
  stroke: none;
}

@keyframes amplify-loader-circular {
  0% {
    stroke-dasharray: 100% 200%;
    transform: rotate(120deg);
  }
  50% {
    stroke-dasharray: 20% 400%;
  }
  100% {
    stroke-dasharray: 100% 200%;
    transform: rotate(480deg);
  }
}
@keyframes amplify-loader-linear {
  0% {
    stroke-dashoffset: 200%;
  }
  100% {
    stroke-dashoffset: -50%;
  }
}
.amplify-placeholder {
  animation-direction: alternate;
  animation-duration: var(--amplify-components-placeholder-transition-duration);
  animation-iteration-count: infinite;
  animation-name: amplify-placeholder-loading;
  border-radius: var(--amplify-components-placeholder-border-radius);
  height: var(--amplify-components-placeholder-default-height);
  width: 100%;
  display: block;
}
.amplify-placeholder--small {
  height: var(--amplify-components-placeholder-small-height);
}
.amplify-placeholder--large {
  height: var(--amplify-components-placeholder-large-height);
}

@keyframes amplify-placeholder-loading {
  0% {
    background-color: var(--amplify-components-placeholder-start-color);
  }
  100% {
    background-color: var(--amplify-components-placeholder-end-color);
  }
}
@media (prefers-reduced-motion: reduce) {
  .amplify-placeholder {
    animation: none;
    background-color: var(--amplify-components-placeholder-end-color);
  }
}
[data-amplify-copy] {
  display: flex;
  font-size: var(--amplify-components-copy-font-size);
  gap: var(--amplify-components-copy-gap);
  justify-content: center;
  align-items: center;
  word-break: break-all;
}

[data-amplify-copy-svg] {
  cursor: pointer;
  position: relative;
}
[data-amplify-copy-svg] path {
  fill: var(--amplify-components-copy-svg-path-fill);
}
[data-amplify-copy-svg]:hover [data-amplify-copy-tooltip] {
  visibility: visible;
  font-size: var(--amplify-components-copy-tool-tip-font-size);
}

[data-amplify-copy-tooltip] {
  visibility: hidden;
  position: absolute;
  bottom: var(--amplify-components-copy-tool-tip-bottom);
  color: var(--amplify-components-copy-tool-tip-color);
}

.amplify-accordion {
  display: block;
  background-color: var(--amplify-components-accordion-background-color);
  border-radius: var(--amplify-components-accordion-item-border-radius);
}

.amplify-accordion__item {
  display: block;
  position: relative;
  border-width: var(--amplify-components-accordion-item-border-width);
  border-style: var(--amplify-components-accordion-item-border-style);
  border-color: var(--amplify-components-accordion-item-border-color);
}
.amplify-accordion__item + .amplify-accordion__item {
  margin-block-start: calc(-1 * var(--amplify-components-accordion-item-border-width));
}
.amplify-accordion__item:where(:first-of-type) {
  border-start-end-radius: var(--amplify-components-accordion-item-border-radius);
  border-start-start-radius: var(--amplify-components-accordion-item-border-radius);
}
.amplify-accordion__item:where(:last-of-type) {
  border-end-end-radius: var(--amplify-components-accordion-item-border-radius);
  border-end-start-radius: var(--amplify-components-accordion-item-border-radius);
}
.amplify-accordion__item__trigger {
  cursor: pointer;
  display: flex;
  position: relative;
  color: var(--amplify-components-accordion-item-trigger-color);
  border-radius: var(--amplify-components-accordion-item-border-radius);
  padding-inline: var(--amplify-components-accordion-item-trigger-padding-inline);
  padding-block: var(--amplify-components-accordion-item-trigger-padding-block);
  gap: var(--amplify-components-accordion-item-trigger-gap);
  align-items: var(--amplify-components-accordion-item-trigger-align-items);
  justify-content: var(--amplify-components-accordion-item-trigger-justify-content);
}
.amplify-accordion__item__trigger:hover {
  background-color: var(--amplify-components-accordion-item-trigger-hover-background-color);
  color: var(--amplify-components-accordion-item-trigger-hover-color);
}
.amplify-accordion__item__trigger:focus {
  box-shadow: var(--amplify-components-accordion-item-trigger-focus-box-shadow);
  border-color: var(--amplify-components-accordion-item-trigger-focus-border-color);
  z-index: 2;
}
.amplify-accordion__item__trigger::-webkit-details-marker {
  display: none;
}
.amplify-accordion__item__content {
  display: block;
  color: var(--amplify-components-accordion-item-content-color);
  padding-block-end: var(--amplify-components-accordion-item-content-padding-block-end);
  padding-block-start: var(--amplify-components-accordion-item-content-padding-block-start);
  padding-inline: var(--amplify-components-accordion-item-content-padding-inline);
}
.amplify-accordion__item__icon {
  color: var(--amplify-components-accordion-item-icon-color);
  transition-property: transform;
  transition-duration: var(--amplify-components-accordion-item-icon-transition-duration);
  transition-timing-function: var(--amplify-components-accordion-item-icon-transition-timing-function);
}
[open] .amplify-accordion__item__icon {
  transform: rotate(180deg);
}

.amplify-alert {
  align-items: var(--amplify-components-alert-align-items);
  background-color: var(--amplify-components-alert-background-color);
  color: var(--amplify-components-alert-color);
  justify-content: var(--amplify-components-alert-justify-content);
  padding-block: var(--amplify-components-alert-padding-block);
  padding-inline: var(--amplify-components-alert-padding-inline);
}
.amplify-alert--info {
  color: var(--amplify-components-alert-info-color);
  background-color: var(--amplify-components-alert-info-background-color);
}
.amplify-alert--error {
  color: var(--amplify-components-alert-error-color);
  background-color: var(--amplify-components-alert-error-background-color);
}
.amplify-alert--warning {
  color: var(--amplify-components-alert-warning-color);
  background-color: var(--amplify-components-alert-warning-background-color);
}
.amplify-alert--success {
  color: var(--amplify-components-alert-success-color);
  background-color: var(--amplify-components-alert-success-background-color);
}

.amplify-alert__icon {
  font-size: var(--amplify-components-alert-icon-size);
  line-height: 1;
}

.amplify-alert__heading {
  display: block;
  font-weight: var(--amplify-components-alert-heading-font-weight);
  font-size: var(--amplify-components-alert-heading-font-size);
}

.amplify-alert__body {
  color: inherit;
  display: block;
}

.amplify-alert__dismiss {
  color: inherit;
}

.amplify-autocomplete__menu__option, .amplify-autocomplete__menu--loading, .amplify-autocomplete__menu--empty {
  padding-block: var(--amplify-components-autocomplete-menu-space-shared-padding-block);
  padding-inline: var(--amplify-components-autocomplete-menu-space-shared-padding-inline);
}

.amplify-autocomplete {
  position: relative;
  display: block;
}

.amplify-autocomplete__menu {
  position: absolute;
  z-index: 999999;
  width: var(--amplify-components-autocomplete-menu-width);
  margin-block-start: var(--amplify-components-autocomplete-menu-margin-block-start);
  background-color: var(--amplify-components-autocomplete-menu-background-color);
  border-color: var(--amplify-components-autocomplete-menu-border-color);
  border-width: var(--amplify-components-autocomplete-menu-border-width);
  border-style: var(--amplify-components-autocomplete-menu-border-style);
  border-radius: var(--amplify-components-autocomplete-menu-border-radius);
}
.amplify-autocomplete__menu--empty {
  display: var(--amplify-components-autocomplete-menu-empty-display);
}
.amplify-autocomplete__menu--loading {
  display: var(--amplify-components-autocomplete-menu-loading-display);
  align-items: var(--amplify-components-autocomplete-menu-loading-align-items);
  gap: var(--amplify-components-autocomplete-menu-loading-gap);
}
.amplify-autocomplete__menu__options {
  position: relative;
  overscroll-behavior: contain;
  display: var(--amplify-components-autocomplete-menu-options-display);
  flex-direction: var(--amplify-components-autocomplete-menu-options-flex-direction);
  max-height: var(--amplify-components-autocomplete-menu-options-max-height);
}
.amplify-autocomplete__menu__option {
  background-color: var(--amplify-components-autocomplete-menu-option-background-color);
  color: var(--amplify-components-autocomplete-menu-option-color);
  cursor: var(--amplify-components-autocomplete-menu-option-cursor);
  transition-duration: var(--amplify-components-autocomplete-menu-option-transition-duration);
  transition-property: var(--amplify-components-autocomplete-menu-option-transition-property);
  transition-timing-function: var(--amplify-components-autocomplete-menu-option-transition-timing-function);
}
.amplify-autocomplete__menu__option--active {
  background-color: var(--amplify-components-autocomplete-menu-option-active-background-color);
  color: var(--amplify-components-autocomplete-menu-option-active-color);
}

/* Center by default */
[data-amplify-authenticator] {
  display: grid;
}
[data-amplify-authenticator][data-variation=modal] {
  overflow-y: auto;
  width: var(--amplify-components-authenticator-modal-width);
  height: var(--amplify-components-authenticator-modal-height);
  background-color: var(--amplify-components-authenticator-modal-background-color);
  position: fixed;
  top: var(--amplify-components-authenticator-modal-top);
  left: var(--amplify-components-authenticator-modal-left);
  /* Having a z-index at least "wins" by default */
  z-index: 1;
}
[data-amplify-authenticator] [data-amplify-container] {
  place-self: center;
}
@media (min-width: 30rem) {
  [data-amplify-authenticator] [data-amplify-container] {
    width: var(--amplify-components-authenticator-container-width-max);
  }
}
[data-amplify-authenticator] [data-amplify-router] {
  background-color: var(--amplify-components-authenticator-router-background-color);
  box-shadow: var(--amplify-components-authenticator-router-box-shadow);
  border-color: var(--amplify-components-authenticator-router-border-color);
  border-width: var(--amplify-components-authenticator-router-border-width);
  border-style: var(--amplify-components-authenticator-router-border-style);
}
[data-amplify-authenticator] [data-amplify-footer] {
  padding-bottom: var(--amplify-components-authenticator-footer-padding-bottom);
  text-align: center;
}
[data-amplify-authenticator] [data-amplify-form] {
  padding: var(--amplify-components-authenticator-form-padding);
}
[data-amplify-authenticator] [data-state=inactive] {
  background-color: var(--amplify-components-authenticator-state-inactive-background-color);
}
@media (max-width: 26rem) {
  [data-amplify-authenticator] [data-amplify-sign-up-errors] {
    font-size: 0.688rem;
  }
}

.amplify-authenticator__column {
  display: flex;
  flex-direction: column;
}

.amplify-authenticator__subtitle {
  margin-bottom: var(--amplify-space-medium);
}

.amplify-authenticator__heading {
  font-size: var(--amplify-font-sizes-xl);
}

.amplify-authenticator__federated-text {
  align-self: center;
}

.amplify-authenticator__federated-buttons {
  flex-direction: column;
  padding-block-end: var(--amplify-space-medium);
}

.amplify-authenticator__federated-button {
  font-weight: normal;
  gap: var(--amplify-space-medium);
}

[data-amplify-authenticator-passkeyprompt] .amplify-authenticator__passkey-success-icon {
  font-size: var(--amplify-font-sizes-xxxl);
  color: var(--amplify-colors-green-60, #34a853);
}
[data-amplify-authenticator-passkeyprompt] .amplify-authenticator__passkey-credential-item {
  padding: var(--amplify-space-medium);
  background-color: var(--amplify-colors-background-secondary);
  border-radius: var(--amplify-radii-small);
}
[data-amplify-authenticator-passkeyprompt] .amplify-authenticator__passkey-error {
  color: var(--amplify-colors-font-error);
  margin-top: var(--amplify-space-small);
}
[data-amplify-authenticator-passkeyprompt] .amplify-authenticator__passkey-icon {
  font-size: var(--amplify-components-authenticator-passkey-icon-size, 12rem);
}

.amplify-avatar {
  --avatar-color: var(--amplify-components-avatar-color);
  --avatar-background-color: var(--amplify-components-avatar-background-color);
  --avatar-filled-background-color: var(--amplify-components-avatar-color);
  --avatar-filled-color: var(--amplify-components-avatar-background-color);
  --avatar-border-color: var(--amplify-components-avatar-border-color);
  --avatar-size: var(--amplify-components-avatar-width);
  --amplify-components-icon-height: 100%;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--avatar-color);
  background-color: var(--avatar-background-color);
  font-weight: var(--amplify-components-avatar-font-weight);
  font-size: var(--amplify-components-avatar-font-size);
  width: var(--amplify-components-avatar-width);
  height: var(--amplify-components-avatar-height);
  overflow: hidden;
  border-radius: var(--amplify-components-avatar-border-radius);
}
.amplify-avatar--filled {
  background-color: var(--avatar-filled-background-color);
  color: var(--avatar-filled-color);
}
.amplify-avatar--outlined {
  border-width: var(--amplify-components-avatar-border-width);
  border-style: solid;
  padding: var(--amplify-components-avatar-border-width);
  border-color: var(--avatar-border-color);
  background-color: transparent;
  color: var(--avatar-color);
}
.amplify-avatar--small {
  --avatar-size: var(--amplify-components-avatar-small-width);
  width: var(--amplify-components-avatar-small-width);
  height: var(--amplify-components-avatar-small-height);
  font-size: var(--amplify-components-avatar-small-font-size);
}
.amplify-avatar--large {
  --avatar-size: var(--amplify-components-avatar-large-width);
  width: var(--amplify-components-avatar-large-width);
  height: var(--amplify-components-avatar-large-height);
  font-size: var(--amplify-components-avatar-large-font-size);
}
.amplify-avatar--warning {
  --avatar-border-color: var(
    --amplify-components-avatar-warning-border-color
  );
  --avatar-background-color: var(
    --amplify-components-avatar-warning-background-color
  );
  --avatar-color: var(--amplify-components-avatar-warning-color);
  --avatar-filled-background-color: var(
    --amplify-components-avatar-warning-color
  );
  --avatar-filled-color: var(
    --amplify-components-avatar-warning-background-color
  );
  --amplify-components-loader-stroke-filled: var(
    --amplify-components-avatar-warning-color
  );
}
.amplify-avatar--error {
  --avatar-border-color: var(--amplify-components-avatar-error-border-color);
  --avatar-background-color: var(
    --amplify-components-avatar-error-background-color
  );
  --avatar-color: var(--amplify-components-avatar-error-color);
  --avatar-filled-background-color: var(
    --amplify-components-avatar-error-color
  );
  --avatar-filled-color: var(
    --amplify-components-avatar-error-background-color
  );
  --amplify-components-loader-stroke-filled: var(
    --amplify-components-avatar-error-color
  );
}
.amplify-avatar--info {
  --avatar-border-color: var(--amplify-components-avatar-info-border-color);
  --avatar-background-color: var(
    --amplify-components-avatar-info-background-color
  );
  --avatar-color: var(--amplify-components-avatar-info-color);
  --avatar-filled-background-color: var(
    --amplify-components-avatar-info-color
  );
  --avatar-filled-color: var(
    --amplify-components-avatar-info-background-color
  );
  --amplify-components-loader-stroke-filled: var(
    --amplify-components-avatar-info-color
  );
}
.amplify-avatar--success {
  --avatar-border-color: var(
    --amplify-components-avatar-success-border-color
  );
  --avatar-background-color: var(
    --amplify-components-avatar-success-background-color
  );
  --avatar-color: var(--amplify-components-avatar-success-color);
  --avatar-filled-background-color: var(
    --amplify-components-avatar-success-color
  );
  --avatar-filled-color: var(
    --amplify-components-avatar-success-background-color
  );
  --amplify-components-loader-stroke-filled: var(
    --amplify-components-avatar-success-color
  );
}
.amplify-avatar__icon {
  display: flex;
  font-size: calc(var(--avatar-size) * 0.6);
}
.amplify-avatar__image {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
}
.amplify-avatar__loader {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  stroke: transparent;
}

.amplify-breadcrumbs__list {
  display: flex;
  flex-wrap: var(--amplify-components-breadcrumbs-flex-wrap);
  flex-direction: var(--amplify-components-breadcrumbs-flex-direction);
  gap: var(--amplify-components-breadcrumbs-gap);
  color: var(--amplify-components-breadcrumbs-color);
}

.amplify-breadcrumbs__item {
  display: inline-flex;
  flex-direction: var(--amplify-components-breadcrumbs-item-flex-direction);
  align-items: var(--amplify-components-breadcrumbs-item-align-items);
  line-height: var(--amplify-components-breadcrumbs-item-line-height);
  color: var(--amplify-components-breadcrumbs-item-color);
  font-size: var(--amplify-components-breadcrumbs-item-font-size);
}

.amplify-breadcrumbs__separator {
  color: var(--amplify-components-breadcrumbs-separator-color);
  font-size: var(--amplify-components-breadcrumbs-separator-font-size);
  padding-inline: var(--amplify-components-breadcrumbs-separator-padding-inline);
}

.amplify-breadcrumbs__link {
  color: var(--amplify-components-breadcrumbs-link-color);
  font-size: var(--amplify-components-breadcrumbs-link-font-size);
  font-weight: var(--amplify-components-breadcrumbs-link-font-weight);
  padding-inline: var(--amplify-components-breadcrumbs-link-padding-inline);
  padding-block: var(--amplify-components-breadcrumbs-link-padding-block);
  -webkit-text-decoration: var(--amplify-components-breadcrumbs-link-text-decoration);
          text-decoration: var(--amplify-components-breadcrumbs-link-text-decoration);
}

.amplify-breadcrumbs__link--current {
  color: var(--amplify-components-breadcrumbs-link-current-color);
  font-size: var(--amplify-components-breadcrumbs-link-current-font-size);
  font-weight: var(--amplify-components-breadcrumbs-link-current-font-weight);
  -webkit-text-decoration: var(--amplify-components-breadcrumbs-link-current-text-decoration);
          text-decoration: var(--amplify-components-breadcrumbs-link-current-text-decoration);
}

.amplify-card {
  background-color: var(--amplify-components-card-background-color);
  border-radius: var(--amplify-components-card-border-radius);
  border-width: var(--amplify-components-card-border-width);
  border-style: var(--amplify-components-card-border-style);
  border-color: var(--amplify-components-card-border-color);
  box-shadow: var(--amplify-components-card-box-shadow);
  display: block;
  padding: var(--amplify-components-card-padding);
}
.amplify-card--outlined {
  background-color: var(--amplify-components-card-outlined-background-color);
  border-radius: var(--amplify-components-card-outlined-border-radius);
  border-width: var(--amplify-components-card-outlined-border-width);
  border-style: var(--amplify-components-card-outlined-border-style);
  border-color: var(--amplify-components-card-outlined-border-color);
  box-shadow: var(--amplify-components-card-outlined-box-shadow);
}
.amplify-card--elevated {
  background-color: var(--amplify-components-card-elevated-background-color);
  border-radius: var(--amplify-components-card-elevated-border-radius);
  border-width: var(--amplify-components-card-elevated-border-width);
  border-style: var(--amplify-components-card-elevated-border-style);
  border-color: var(--amplify-components-card-elevated-border-color);
  box-shadow: var(--amplify-components-card-elevated-box-shadow);
}

.amplify-collection {
  flex-direction: column;
}
.amplify-collection__pagination {
  justify-content: center;
  --amplify-components-pagination-current-color: var(
    --amplify-components-collection-pagination-current-color
  );
  --amplify-components-pagination-current-background-color: var(
    --amplify-components-collection-pagination-current-background-color
  );
  --amplify-components-pagination-button-color: var(
    --amplify-components-collection-pagination-button-color
  );
  --amplify-components-pagination-button-hover-color: var(
    --amplify-components-collection-pagination-button-hover-color
  );
  --amplify-components-pagination-button-hover-background-color: var(
    --amplify-components-collection-pagination-button-hover-background-color
  );
  --amplify-components-pagination-button-disabled-color: var(
    --amplify-components-collection-pagination-button-disabled-color
  );
}
.amplify-collection__search {
  flex-direction: row;
  justify-content: center;
  --amplify-components-searchfield-input-color: var(
    --amplify-components-collection-search-input-color
  );
  --amplify-components-searchfield-button-color: var(
    --amplify-components-collection-search-button-color
  );
  --amplify-components-searchfield-button-active-background-color: var(
    --amplify-components-collection-search-button-active-background-color
  );
  --amplify-components-searchfield-button-active-border-color: var(
    --amplify-components-collection-search-button-active-border-color
  );
  --amplify-components-searchfield-button-active-color: var(
    --amplify-components-collection-search-button-active-color
  );
  --amplify-components-searchfield-button-disabled-background-color: var(
    --amplify-components-collection-search-button-disabled-background-color
  );
  --amplify-components-searchfield-button-disabled-border-color: var(
    --amplify-components-collection-search-button-disabled-border-color
  );
  --amplify-components-searchfield-button-disabled-color: var(
    --amplify-components-collection-search-button-disabled-color
  );
  --amplify-components-searchfield-button-focus-background-color: var(
    --amplify-components-collection-search-button-focus-background-color
  );
  --amplify-components-searchfield-button-focus-border-color: var(
    --amplify-components-collection-search-button-focus-border-color
  );
  --amplify-components-searchfield-button-focus-color: var(
    --amplify-components-collection-search-button-focus-color
  );
  --amplify-components-searchfield-button-hover-background-color: var(
    --amplify-components-collection-search-button-hover-background-color
  );
  --amplify-components-searchfield-button-hover-border-color: var(
    --amplify-components-collection-search-button-hover-border-color
  );
  --amplify-components-searchfield-button-hover-color: var(
    --amplify-components-collection-search-button-hover-color
  );
}

.amplify-checkbox {
  cursor: var(--amplify-components-checkbox-cursor);
  align-items: var(--amplify-components-checkbox-align-items);
  flex-direction: row-reverse;
  gap: inherit;
  position: relative;
}
.amplify-checkbox--disabled {
  cursor: var(--amplify-components-checkbox-disabled-cursor);
  color: var(--amplify-components-checkbox-label-disabled-color);
}

.amplify-checkbox__button {
  position: var(--amplify-components-checkbox-button-position);
  align-items: var(--amplify-components-checkbox-button-align-items);
  justify-content: var(--amplify-components-checkbox-button-justify-content);
  color: var(--amplify-components-checkbox-button-color);
  --amplify-internal-checkbox_button-focused-before-border-color: var(
    --amplify-components-checkbox-button-focus-border-color
  );
  --amplify-internal-checkbox_button-focused-before-box-shadow: var(
    --amplify-components-checkbox-button-focus-box-shadow
  );
}
.amplify-checkbox__button::before {
  content: "";
  display: inline-block;
  position: absolute;
  box-sizing: border-box;
  width: var(--amplify-components-checkbox-button-before-width);
  height: var(--amplify-components-checkbox-button-before-height);
  border-width: var(--amplify-components-checkbox-button-before-border-width);
  border-radius: var(--amplify-components-checkbox-button-before-border-radius);
  border-style: var(--amplify-components-checkbox-button-before-border-style);
  border-color: var(--amplify-components-checkbox-button-before-border-color);
}
.amplify-checkbox__button--focused::before {
  outline-color: var(--amplify-components-checkbox-button-focus-outline-color);
  outline-style: var(--amplify-components-checkbox-button-focus-outline-style);
  outline-width: var(--amplify-components-checkbox-button-focus-outline-width);
  outline-offset: var(--amplify-components-checkbox-button-focus-outline-offset);
  border-color: var(--amplify-internal-checkbox_button-focused-before-border-color);
  box-shadow: var(--amplify-internal-checkbox_button-focused-before-box-shadow);
}
.amplify-checkbox__button--error {
  --amplify-internal-checkbox_button-focused-before-border-color: var(
    --amplify-components-checkbox-button-error-focus-border-color
  );
  --amplify-internal-checkbox_button-focused-before-box-shadow: var(
    --amplify-components-checkbox-button-error-focus-box-shadow
  );
}
.amplify-checkbox__button--error::before {
  border-color: var(--amplify-components-checkbox-button-error-border-color);
}
.amplify-checkbox__button--disabled::before {
  border-color: var(--amplify-components-checkbox-button-disabled-border-color);
}

.amplify-checkbox__icon {
  line-height: 1;
  width: 1em;
  height: 1em;
  background-color: var(--amplify-components-checkbox-icon-background-color);
  opacity: var(--amplify-components-checkbox-icon-opacity);
  transform: var(--amplify-components-checkbox-icon-transform);
  border-radius: var(--amplify-components-checkbox-icon-border-radius);
  transition-property: var(--amplify-components-checkbox-icon-transition-property);
  transition-duration: var(--amplify-components-checkbox-icon-transition-duration);
  transition-timing-function: var(--amplify-components-checkbox-icon-transition-timing-function);
  --amplify-internal-checkbox-icon-disabled-background-color: var(
    --amplify-components-checkbox-icon-background-color
  );
}
.amplify-checkbox__icon--checked {
  opacity: var(--amplify-components-checkbox-icon-checked-opacity);
  transform: var(--amplify-components-checkbox-icon-checked-transform);
  --amplify-internal-checkbox-icon-disabled-background-color: var(
    --amplify-components-checkbox-icon-checked-disabled-background-color
  );
}
.amplify-checkbox__icon--indeterminate {
  opacity: var(--amplify-components-checkbox-icon-indeterminate-opacity);
  transform: var(--amplify-components-checkbox-icon-indeterminate-transform);
  --amplify-internal-checkbox-icon-disabled-background-color: var(
    --amplify-components-checkbox-icon-indeterminate-disabled-background-color
  );
}
.amplify-checkbox__icon--disabled {
  background-color: var(--amplify-internal-checkbox-icon-disabled-background-color);
}

.amplify-checkbox__label {
  color: var(--amplify-components-checkbox-label-color);
}
.amplify-checkbox__label--disabled {
  color: var(--amplify-components-checkbox-label-disabled-color);
}

.amplify-checkboxfield {
  align-content: var(--amplify-components-checkboxfield-align-content);
  align-items: var(--amplify-components-checkboxfield-align-items);
  flex-direction: var(--amplify-components-checkboxfield-flex-direction);
  justify-content: var(--amplify-components-checkboxfield-justify-content);
}

.amplify-dialcodeselect {
  height: var(--amplify-components-countrycodeselect-height);
}

.amplify-divider {
  --amplify-internal-divider-size: var(
    --amplify-components-divider-border-width
  );
  border-color: var(--amplify-components-divider-border-color);
  border-style: var(--amplify-components-divider-border-style);
  border-width: 0;
  opacity: var(--amplify-components-divider-opacity);
  padding: 0;
  display: flex;
  position: relative;
  text-align: center;
  justify-content: center;
}
.amplify-divider::after {
  content: attr(data-label);
  position: absolute;
  transform: translateY(-50%);
  font-size: var(--amplify-components-divider-label-font-size);
  padding-inline: var(--amplify-components-divider-label-padding-inline);
  background-color: var(--amplify-components-divider-label-background-color);
  color: var(--amplify-components-divider-label-color);
}
.amplify-divider--small {
  --amplify-internal-divider-size: var(
    --amplify-components-divider-small-border-width
  );
}
.amplify-divider--large {
  --amplify-internal-divider-size: var(
    --amplify-components-divider-large-border-width
  );
}
.amplify-divider--horizontal {
  width: 100%;
  border-bottom-width: var(--amplify-internal-divider-size);
}
.amplify-divider--vertical {
  border-left-width: var(--amplify-internal-divider-size);
  flex-direction: column;
}
.amplify-divider--vertical::after {
  top: auto;
  transform: translateX(-50%);
  padding-block: 0;
  padding-inline: 0;
}

.amplify-field {
  font-size: var(--amplify-components-field-font-size);
  gap: var(--amplify-components-field-gap);
  flex-direction: var(--amplify-components-field-flex-direction);
}
.amplify-field--small {
  font-size: var(--amplify-components-field-small-font-size);
  gap: var(--amplify-components-field-small-gap);
}
.amplify-field--large {
  font-size: var(--amplify-components-field-large-font-size);
  gap: var(--amplify-components-field-large-gap);
}

.amplify-label {
  color: var(--amplify-components-field-label-color);
}

.amplify-field-group__outer-end .amplify-select__wrapper .amplify-select, .amplify-field-group__outer-end .amplify-field-group__control, .amplify-field-group__outer-start .amplify-select__wrapper:not(:first-child) .amplify-select:not(:first-child), .amplify-field-group__outer-start--quiet .amplify-field-group__control, .amplify-field-group__outer-start .amplify-field-group__control:not(:first-child), .amplify-field-group :not(:first-child) .amplify-input {
  border-start-start-radius: 0;
  border-end-start-radius: 0;
}
@supports not (border-start-start-radius: 0) {
  .amplify-field-group__outer-end .amplify-select__wrapper .amplify-select, .amplify-field-group__outer-end .amplify-field-group__control, .amplify-field-group__outer-start .amplify-select__wrapper:not(:first-child) .amplify-select:not(:first-child), .amplify-field-group__outer-start--quiet .amplify-field-group__control, .amplify-field-group__outer-start .amplify-field-group__control:not(:first-child), .amplify-field-group :not(:first-child) .amplify-input {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
  }
}

.amplify-field-group__outer-end .amplify-select__wrapper:not(:last-child) .amplify-select, .amplify-field-group__outer-end--quiet .amplify-field-group__control, .amplify-field-group__outer-end .amplify-field-group__control:not(:last-child), .amplify-field-group__outer-start .amplify-select__wrapper .amplify-select, .amplify-field-group__outer-start .amplify-field-group__control, .amplify-field-group :not(:last-child) .amplify-input {
  border-end-end-radius: 0;
  border-start-end-radius: 0;
}
@supports not (border-end-end-radius: 0) {
  .amplify-field-group__outer-end .amplify-select__wrapper:not(:last-child) .amplify-select, .amplify-field-group__outer-end--quiet .amplify-field-group__control, .amplify-field-group__outer-end .amplify-field-group__control:not(:last-child), .amplify-field-group__outer-start .amplify-select__wrapper .amplify-select, .amplify-field-group__outer-start .amplify-field-group__control, .amplify-field-group :not(:last-child) .amplify-input {
    border-bottom-right-radius: 0;
    border-top-right-radius: 0;
  }
}

.amplify-field-group {
  gap: var(--amplify-components-fieldgroup-gap);
  align-self: stretch;
}
.amplify-field-group--horizontal {
  flex-direction: row;
}
.amplify-field-group--vertical {
  flex-direction: column;
  align-items: var(--amplify-components-fieldgroup-vertical-align-items);
}
.amplify-field-group__outer-start,
.amplify-field-group__outer-end {
  display: flex;
  flex-shrink: 0;
  align-items: var(--amplify-components-fieldgroup-outer-align-items);
}
.amplify-field-group__outer-start .amplify-field-group__control,
.amplify-field-group__outer-end .amplify-field-group__control {
  height: 100%;
}

/**
 * Outer field group components
 */
.amplify-field-group__outer-start .amplify-field-group__control:not(:focus) {
  border-inline-end-color: transparent;
}
.amplify-field-group__outer-start .amplify-field-group__control:focus {
  z-index: 1;
}
.amplify-field-group__outer-start--quiet .amplify-field-group__control:not(:focus) {
  border-block-start-color: transparent;
  border-inline-start-color: transparent;
}
.amplify-field-group__outer-end .amplify-field-group__control:not(:focus) {
  border-inline-start-color: transparent;
}
.amplify-field-group__outer-end .amplify-field-group__control:focus {
  z-index: 1;
}
.amplify-field-group__outer-end--quiet .amplify-field-group__control:not(:focus) {
  border-block-start-color: transparent;
  border-inline-end-color: transparent;
}
/**
 * Inner field group components
 */
.amplify-field-group__field-wrapper {
  position: relative;
  width: 100%;
}
.amplify-field-group__field-wrapper--vertical {
  width: -moz-fit-content;
  width: fit-content;
}

.amplify-field-group__inner-end,
.amplify-field-group__inner-start {
  position: absolute;
  top: 0;
  height: 100%;
  pointer-events: none;
}
.amplify-field-group__inner-end .amplify-button,
.amplify-field-group__inner-start .amplify-button {
  pointer-events: all;
  height: 100%;
}

.amplify-field-group__inner-end {
  right: 0;
  left: auto;
}

.amplify-field-group__inner-start {
  right: auto;
  left: 0;
}

html[dir=rtl] .amplify-field-group__inner-end {
  right: auto;
  left: 0;
}
html[dir=rtl] .amplify-field-group__inner-start {
  left: auto;
  right: 0;
}

.amplify-field-group--has-inner-end .amplify-input {
  padding-inline-end: calc(var(--amplify-components-fieldcontrol-padding-inline-end) * 3);
}

.amplify-field-group--has-inner-start .amplify-input {
  padding-inline-start: calc(var(--amplify-components-fieldcontrol-padding-inline-start) * 3);
}

/**
 * Inner icon (non-button) component styling requires additional styling
 */
.amplify-field-group__icon:not(.amplify-field-group__icon-button) {
  display: flex;
  padding-inline-start: var(--amplify-components-fieldcontrol-padding-inline-start);
  padding-inline-end: var(--amplify-components-fieldcontrol-padding-inline-start);
  flex-direction: column;
  justify-content: center;
  height: 100%;
}

.amplify-fieldset {
  background-color: var(--amplify-components-fieldset-background-color);
  border-radius: var(--amplify-components-fieldset-border-radius);
  flex-direction: var(--amplify-components-fieldset-flex-direction);
  gap: var(--amplify-components-fieldset-gap);
  /* Sizes */
  /* Variations */
}
.amplify-fieldset--small {
  gap: var(--amplify-components-fieldset-small-gap);
}
.amplify-fieldset--large {
  gap: var(--amplify-components-fieldset-large-gap);
}
.amplify-fieldset--outlined {
  border: var(--amplify-components-fieldset-outlined-border-width) var(--amplify-components-fieldset-outlined-border-style) var(--amplify-components-fieldset-outlined-border-color);
  padding: var(--amplify-components-fieldset-outlined-padding);
}
.amplify-fieldset--outlined.amplify-fieldset--small {
  padding: var(--amplify-components-fieldset-outlined-small-padding);
}
.amplify-fieldset--outlined.amplify-fieldset--large {
  padding: var(--amplify-components-fieldset-outlined-large-padding);
}

.amplify-fieldset__legend {
  color: var(--amplify-components-fieldset-legend-color);
  font-weight: var(--amplify-components-fieldset-legend-font-weight);
  line-height: var(--amplify-components-fieldset-legend-line-height);
  font-size: var(--amplify-components-fieldset-legend-font-size);
}
.amplify-fieldset__legend--small {
  font-size: var(--amplify-components-fieldset-legend-small-font-size);
}
.amplify-fieldset__legend--large {
  font-size: var(--amplify-components-fieldset-legend-large-font-size);
}

.amplify-liveness-cancel-container {
  z-index: 2;
  position: absolute;
  top: var(--amplify-space-medium);
  right: var(--amplify-space-medium);
}

.liveness-detector .amplify-button--primary:focus {
  box-shadow: unset;
  outline: var(--amplify-components-button-focus-color) solid 2px;
  outline-offset: 2px;
}

.amplify-liveness-cancel-button {
  background-color: #fff;
  color: hsl(190, 95%, 30%);
}

.amplify-liveness-fade-out {
  animation-name: amplify-liveness-animation-fadeout;
  animation-duration: 1s;
  animation-fill-mode: forwards;
}

@keyframes amplify-liveness-animation-fadeout {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
.amplify-liveness-camera-module {
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: var(--amplify-components-liveness-camera-module-background-color);
  border: 1px solid var(--amplify-colors-neutral-40);
  position: relative;
}

.amplify-liveness-camera-module--mobile {
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: 2;
}

.amplify-liveness-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform: scaleX(-1);
}

.amplify-liveness-freshness-canvas {
  height: 100%;
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 1;
}

.amplify-liveness-loader .amplify-liveness-centered-loader {
  transform: translate(-50%, -50%);
}

.amplify-liveness-centered-loader {
  position: absolute;
  left: 50%;
  top: 50%;
}

.amplify-liveness-connecting-loader {
  display: flex;
  position: absolute;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 3;
  width: 100%;
  height: 100%;
  background-color: var(--amplify-colors-background-primary);
}

.amplify-liveness-oval-canvas {
  flex-direction: column;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
}

.amplify-liveness-oval-canvas--mobile {
  position: fixed;
}

.amplify-liveness-video-anchor {
  position: relative;
  width: 100%;
}

.amplify-liveness-recording-icon-container {
  z-index: 1;
  position: absolute;
  top: var(--amplify-space-medium);
  left: var(--amplify-space-medium);
}

.amplify-liveness-recording-icon {
  flex-direction: column;
  align-items: center;
  background-color: #fff;
  padding: var(--amplify-space-xxs);
  gap: var(--amplify-space-xxs);
  border-radius: var(--amplify-radii-small);
}

.amplify-liveness-recording-icon .amplify-text {
  color: var(--amplify-colors-black);
}

.amplify-liveness-instruction-overlay {
  z-index: 2;
}

.amplify-liveness-countdown-container {
  background-color: var(--amplify-colors-background-primary);
  border-radius: 100%;
  padding: var(--amplify-space-xs);
}

.amplify-liveness-instruction-list {
  flex-direction: column;
}
.amplify-liveness-instruction-list li {
  display: flex;
}

.amplify-liveness-toast {
  background-color: var(--amplify-colors-background-primary);
  padding: var(--amplify-space-small);
  max-width: 100%;
}

.amplify-liveness-toast__message {
  color: var(--amplify-colors-font-primary);
  text-align: center;
  flex-direction: column;
}

.amplify-liveness-toast--medium {
  border-radius: var(--amplify-radii-medium);
}

.amplify-liveness-toast--large {
  font-size: var(--amplify-font-sizes-xxl);
  padding: 0 var(--amplify-space-xs);
}

.amplify-liveness-toast--primary {
  background-color: var(--amplify-colors-primary-80);
}
.amplify-liveness-toast--primary .amplify-liveness-toast__message {
  color: var(--amplify-colors-font-inverse);
  text-align: center;
  flex-direction: column;
}

.amplify-liveness-toast__container {
  gap: var(--amplify-space-xs);
  flex-direction: column;
  align-items: center;
}

.amplify-liveness-toast--error {
  background-color: var(--amplify-colors-red-80);
}
.amplify-liveness-toast--error .amplify-liveness-toast__message {
  color: var(--amplify-colors-font-inverse);
}

.amplify-liveness-match-indicator {
  display: block;
  width: min(70%, 200px);
  position: relative;
  --amplify-liveness-match-indicator-transition: transform 0.2s linear;
}

.amplify-liveness-match-indicator__bar {
  --percentage: 0;
  display: block;
  width: 100%;
  height: var(--amplify-space-medium);
  border-radius: var(--amplify-radii-medium);
  background: var(--amplify-colors-white);
  position: relative;
  overflow: hidden;
  /* 
    This translateZ transform fixes in issue in Safari where the bar::after
    element doesn't appear clipped from overflow: hidden here */
  transform: translateZ(0);
  border: 1px solid var(--amplify-colors-border-tertiary);
}

.amplify-liveness-match-indicator__pin {
  --percentage: 0;
  display: block;
  width: 100%;
  position: absolute;
  top: 50%;
  left: 0;
  transform: translate(var(--percentage), 0);
  transition: var(--amplify-liveness-match-indicator-transition);
}

.amplify-liveness-match-indicator__bar:after {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  background: var(--amplify-colors-primary-80);
  left: -100%;
  transform: translate(var(--percentage), 0);
  transition: var(--amplify-liveness-match-indicator-transition);
}

.amplify-liveness-match-indicator__pin:after {
  --height: var(--amplify-space-xl);
  position: absolute;
  content: "";
  width: var(--amplify-space-small);
  height: var(--height);
  border-radius: var(--amplify-radii-medium);
  background: var(--amplify-colors-primary-80);
  left: 0;
  top: 0;
  transform: translate(-50%, calc(var(--height) / 2 * -1));
}

.amplify-liveness-figures {
  flex-wrap: wrap;
}

.amplify-liveness-figure {
  flex-direction: column;
  gap: 0;
}

.amplify-liveness-figure__caption {
  padding: var(--amplify-space-xxs);
}

.amplify-liveness-figure__caption--success {
  background-color: var(--amplify-colors-background-success);
  color: var(--amplify-colors-font-success);
}

.amplify-liveness-figure__caption--error {
  background-color: var(--amplify-colors-background-error);
  color: var(--amplify-colors-font-error);
}

.amplify-liveness-figure__image {
  background-color: #fff;
  border: 1px solid var(--amplify-colors-border-primary);
  position: relative;
  display: flex;
  justify-content: center;
}
.amplify-liveness-figure__image svg {
  display: block;
}

.amplify-liveness-figure__image--success {
  border-color: var(--amplify-colors-green-90);
}

.amplify-liveness-figure__image--error {
  border-color: var(--amplify-colors-border-error);
}

.amplify-liveness-figure__icon {
  position: absolute;
  left: 0;
  top: 0;
}

.amplify-liveness-landscape-error-modal {
  background-color: var(--amplify-colors-background-primary);
  flex-direction: column;
  text-align: center;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.amplify-liveness-landscape-error-modal__header {
  font-size: large;
  font-weight: var(--amplify-font-weights-bold);
}

.amplify-liveness-landscape-error-modal__button {
  justify-content: center;
}

.amplify-liveness-start-screen-header {
  display: flex;
  flex-direction: column;
}

.amplify-liveness-start-screen-header__heading {
  color: var(--amplify-colors-font-primary);
  font-weight: var(--amplify-font-weights-bold);
}

.amplify-liveness-start-screen-header__body {
  color: var(--amplify-colors-font-primary);
}

.amplify-liveness-start-screen-warning {
  color: var(--amplify-colors-blue-90);
  background-color: var(--amplify-colors-blue-10);
  align-items: center;
  z-index: 3;
}

.amplify-liveness-start-screen-instructions__heading {
  color: var(--amplify-colors-font-primary);
  font-weight: var(--amplify-font-weights-bold);
}

.amplify-liveness-overlay-opaque {
  background-color: var(--amplify-colors-overlay-40);
}

.amplify-liveness-overlay {
  flex-direction: column;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  padding: var(--amplify-space-large);
}

.amplify-liveness-error-modal {
  gap: var(--amplify-space-xs);
  align-items: center;
  justify-content: center;
  color: var(--amplify-colors-font-error);
}

.amplify-liveness-error-modal__heading {
  font-weight: var(--amplify-font-weights-bold);
}

.amplify-liveness-hint--mobile {
  margin-top: var(--amplify-space-xxxl);
}

.amplify-liveness-hint__text {
  align-items: center;
  gap: var(--amplify-space-xs);
}

.amplify-liveness-popover {
  position: relative;
}

.amplify-liveness-popover__anchor {
  position: absolute;
  top: 26px;
  left: 20px;
  z-index: 3;
  border-style: solid;
  border-width: 0 9px 9px 9px;
  border-color: transparent transparent var(--amplify-colors-background-primary) transparent;
}

.amplify-liveness-popover__anchor-secondary {
  position: absolute;
  top: 24px;
  left: 19px;
  z-index: 2;
  border-style: solid;
  border-width: 0 10px 10px 10px;
  border-color: transparent transparent var(--amplify-colors-border-secondary) transparent;
}

.amplify-liveness-popover__container {
  position: absolute;
  background-color: var(--amplify-colors-background-primary);
  color: var(--amplify-colors-font-primary);
  flex-direction: row;
  font-size: var(--amplify-font-sizes-xs);
  font-weight: var(--amplify-font-weights-normal);
  padding: var(--amplify-space-small);
  top: 33px;
  width: 240px;
  border: 1px solid var(--amplify-colors-border-secondary);
  border-radius: 2px;
  z-index: 4;
}

.amplify-liveness-start-screen-camera-select {
  flex-direction: column;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  padding: var(--amplify-space-xl);
  align-items: center;
  justify-content: flex-end;
  display: flex;
  z-index: 2;
}

.amplify-liveness-start-screen-camera-select__container {
  display: flex;
  justify-content: space-between;
  align-items: inherit;
  gap: var(--amplify-space-xs);
}

.amplify-liveness-start-screen-camera-select__label,
.amplify-liveness-start-screen-camera-select .amplify-select,
.amplify-liveness-start-screen-camera-select .amplify-select__wrapper,
.amplify-liveness-start-screen-camera-select .amplify-select__icon-wrapper {
  background-color: var(--amplify-colors-background-primary);
  color: var(--amplify-colors-font-primary);
}

.amplify-liveness-start-screen-camera-waiting {
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  height: 480px;
}

.amplify-menu__wrapper {
  z-index: 999999;
}

.amplify-menu__trigger {
  display: flex;
  justify-content: center;
  align-items: center;
}

.amplify-menu__content {
  background-color: var(--amplify-components-menu-background-color);
  border-radius: var(--amplify-components-menu-border-radius);
  box-shadow: var(--amplify-components-menu-box-shadow);
  flex-direction: var(--amplify-components-menu-flex-direction);
  gap: var(--amplify-components-menu-gap);
  min-width: var(--amplify-components-menu-min-width);
  max-width: var(--amplify-components-menu-max-width);
  border-color: var(--amplify-components-menu-border-color);
  border-width: var(--amplify-components-menu-border-width);
  border-style: var(--amplify-components-menu-border-style);
}

.amplify-menu__content__item {
  min-height: var(--amplify-components-menu-item-min-height);
  padding-inline-start: var(--amplify-components-menu-item-padding-inline-start);
  padding-inline-end: var(--amplify-components-menu-item-padding-inline-end);
}

.amplify-menu__content__item:not(:first-child):not(:last-child) {
  border-radius: 0;
}

.amplify-menu__content__item:first-child {
  border-end-end-radius: 0;
  border-end-start-radius: 0;
}
@supports not (border-end-end-radius: 0) {
  .amplify-menu__content__item:first-child {
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
  }
}

.amplify-menu__content__item:last-child {
  border-start-end-radius: 0;
  border-start-start-radius: 0;
}
@supports not (border-end-end-radius: 0) {
  .amplify-menu__content__item:last-child {
    border-top-right-radius: 0;
    border-top-left-radius: 0;
  }
}

.amplify-message {
  align-items: var(--amplify-components-message-align-items);
  background-color: var(--amplify-components-message-background-color);
  color: var(--amplify-components-message-color);
  justify-content: var(--amplify-components-message-justify-content);
  padding-block: var(--amplify-components-message-padding-block);
  padding-inline: var(--amplify-components-message-padding-inline);
  border-color: var(--amplify-components-message-border-color);
  border-radius: var(--amplify-components-message-border-radius);
  border-style: var(--amplify-components-message-border-style);
  border-width: var(--amplify-components-message-border-width);
  line-height: var(--amplify-components-message-line-height);
}
.amplify-message--plain {
  background-color: var(--amplify-components-message-plain-background-color);
  border-color: var(--amplify-components-message-plain-border-color);
  color: var(--amplify-components-message-plain-color);
}
.amplify-message--plain.amplify-message--info {
  background-color: var(--amplify-components-message-plain-info-background-color);
  border-color: var(--amplify-components-message-plain-info-border-color);
  color: var(--amplify-components-message-plain-info-color);
}
.amplify-message--plain.amplify-message--error {
  background-color: var(--amplify-components-message-plain-error-background-color);
  border-color: var(--amplify-components-message-plain-error-border-color);
  color: var(--amplify-components-message-plain-error-color);
}
.amplify-message--plain.amplify-message--warning {
  background-color: var(--amplify-components-message-plain-warning-background-color);
  border-color: var(--amplify-components-message-plain-warning-border-color);
  color: var(--amplify-components-message-plain-warning-color);
}
.amplify-message--plain.amplify-message--success {
  background-color: var(--amplify-components-message-plain-success-background-color);
  border-color: var(--amplify-components-message-plain-success-border-color);
  color: var(--amplify-components-message-plain-success-color);
}
.amplify-message--outlined {
  background-color: var(--amplify-components-message-outlined-background-color);
  border-color: var(--amplify-components-message-outlined-border-color);
  color: var(--amplify-components-message-outlined-color);
}
.amplify-message--outlined.amplify-message--info {
  background-color: var(--amplify-components-message-outlined-info-background-color);
  border-color: var(--amplify-components-message-outlined-info-border-color);
  color: var(--amplify-components-message-outlined-info-color);
}
.amplify-message--outlined.amplify-message--error {
  background-color: var(--amplify-components-message-outlined-error-background-color);
  border-color: var(--amplify-components-message-outlined-error-border-color);
  color: var(--amplify-components-message-outlined-error-color);
}
.amplify-message--outlined.amplify-message--warning {
  background-color: var(--amplify-components-message-outlined-warning-background-color);
  border-color: var(--amplify-components-message-outlined-warning-border-color);
  color: var(--amplify-components-message-outlined-warning-color);
}
.amplify-message--outlined.amplify-message--success {
  background-color: var(--amplify-components-message-outlined-success-background-color);
  border-color: var(--amplify-components-message-outlined-success-border-color);
  color: var(--amplify-components-message-outlined-success-color);
}
.amplify-message--filled {
  background-color: var(--amplify-components-message-filled-background-color);
  border-color: var(--amplify-components-message-filled-border-color);
  color: var(--amplify-components-message-filled-color);
}
.amplify-message--filled.amplify-message--info {
  background-color: var(--amplify-components-message-filled-info-background-color);
  border-color: var(--amplify-components-message-filled-info-border-color);
  color: var(--amplify-components-message-filled-info-color);
}
.amplify-message--filled.amplify-message--error {
  background-color: var(--amplify-components-message-filled-error-background-color);
  border-color: var(--amplify-components-message-filled-error-border-color);
  color: var(--amplify-components-message-filled-error-color);
}
.amplify-message--filled.amplify-message--warning {
  background-color: var(--amplify-components-message-filled-warning-background-color);
  border-color: var(--amplify-components-message-filled-warning-border-color);
  color: var(--amplify-components-message-filled-warning-color);
}
.amplify-message--filled.amplify-message--success {
  background-color: var(--amplify-components-message-filled-success-background-color);
  border-color: var(--amplify-components-message-filled-success-border-color);
  color: var(--amplify-components-message-filled-success-color);
}

.amplify-message__icon {
  font-size: var(--amplify-components-message-icon-size);
}
.amplify-message__icon > * {
  display: block;
}

.amplify-message__heading {
  font-weight: var(--amplify-components-message-heading-font-weight);
  font-size: var(--amplify-components-message-heading-font-size);
}

.amplify-message__content {
  flex: 1;
  flex-direction: column;
  gap: var(--amplify-space-xxxs);
}

.amplify-message__dismiss {
  margin-inline-start: auto;
  gap: var(--amplify-components-message-dismiss-gap);
}

/* Modal component with highest specificity to override global resets */
.amplify-modal__overlay.amplify-modal__overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

.amplify-modal__content.amplify-modal__content {
  background-color: var(--amplify-colors-background-primary);
  padding: var(--amplify-space-large);
  border-radius: var(--amplify-radii-medium);
  box-shadow: var(--amplify-shadows-large);
  max-width: 500px;
  width: 90%;
  box-sizing: border-box;
}

.amplify-modal__header.amplify-modal__header {
  margin-bottom: var(--amplify-space-medium);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.amplify-modal__title.amplify-modal__title {
  font-weight: var(--amplify-font-weights-bold);
  font-size: var(--amplify-font-sizes-large);
  margin: 0;
}

.amplify-modal__close-button.amplify-modal__close-button {
  background: none;
  border: none;
  font-size: var(--amplify-font-sizes-large);
  cursor: pointer;
  padding: var(--amplify-space-xs);
  color: var(--amplify-colors-font-secondary);
}

.amplify-modal__close-button.amplify-modal__close-button:hover {
  color: var(--amplify-colors-font-primary);
}

.amplify-modal__body.amplify-modal__body {
  margin-bottom: var(--amplify-space-medium);
  color: var(--amplify-colors-font-primary);
}

.amplify-modal__footer.amplify-modal__footer {
  display: flex;
  gap: var(--amplify-space-xs);
  justify-content: flex-end;
}

.amplify-modal__list-title.amplify-modal__list-title {
  margin-bottom: var(--amplify-space-xs);
  font-weight: var(--amplify-font-weights-bold);
  box-sizing: border-box;
}

.amplify-modal__list.amplify-modal__list {
  margin: var(--amplify-space-xs) 0;
  padding-left: var(--amplify-space-medium);
  max-height: 250px;
  overflow-y: auto;
  box-sizing: border-box;
  list-style: disc;
  display: flex;
  flex-direction: column;
  gap: var(--amplify-space-xxs);
}

.amplify-modal__list-item.amplify-modal__list-item {
  display: list-item;
  margin-bottom: var(--amplify-space-xxs);
}

.amplify-pagination {
  list-style-type: none;
}
.amplify-pagination__item {
  height: var(--amplify-components-pagination-item-shared-height);
  min-width: var(--amplify-components-pagination-item-shared-min-width);
  border-radius: var(--amplify-components-pagination-item-shared-border-radius);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: initial;
  color: var(--amplify-components-pagination-button-color);
  margin-inline-start: var(--amplify-components-pagination-item-container-margin-left);
  margin-inline-end: var(--amplify-components-pagination-item-container-margin-right);
  padding-inline-start: var(--amplify-components-pagination-button-padding-inline-start);
  padding-inline-end: var(--amplify-components-pagination-button-padding-inline-end);
  transition-property: var(--amplify-components-pagination-button-transition-property);
  transition-duration: var(--amplify-components-pagination-button-transition-duration);
}
.amplify-pagination__item:hover {
  text-decoration: none;
  color: var(--amplify-components-pagination-button-hover-color);
  background-color: var(--amplify-components-pagination-button-hover-background-color);
}
.amplify-pagination__item--disabled {
  color: var(--amplify-components-pagination-button-disabled-color);
  pointer-events: none;
}
.amplify-pagination__item--current {
  align-items: var(--amplify-components-pagination-current-align-items);
  justify-content: var(--amplify-components-pagination-current-justify-content);
  color: var(--amplify-components-pagination-current-color);
  font-size: var(--amplify-components-pagination-current-font-size);
  background-color: var(--amplify-components-pagination-current-background-color);
}
.amplify-pagination__item--ellipsis {
  align-items: var(--amplify-components-pagination-ellipsis-align-items);
  justify-content: var(--amplify-components-pagination-ellipsis-justify-content);
  padding-inline-start: var(--amplify-components-pagination-ellipsis-padding-inline-start);
  padding-inline-end: var(--amplify-components-pagination-ellipsis-padding-inline-end);
}

.amplify-passwordfield {
  --amplify-components-fieldcontrol-color: var(
    --amplify-components-passwordfield-color
  );
  --amplify-components-button-color: var(
    --amplify-components-passwordfield-button-color
  );
  --amplify-components-button-active-background-color: var(
    --amplify-components-passwordfield-button-active-background-color
  );
  --amplify-components-button-active-border-color: var(
    --amplify-components-passwordfield-button-active-border-color
  );
  --amplify-components-button-active-color: var(
    --amplify-components-passwordfield-button-active-color
  );
  --amplify-components-button-disabled-background-color: var(
    --amplify-components-passwordfield-button-disabled-background-color
  );
  --amplify-components-button-disabled-border-color: var(
    --amplify-components-passwordfield-button-disabled-border-color
  );
  --amplify-components-button-disabled-color: var(
    --amplify-components-passwordfield-button-disabled-color
  );
  --amplify-components-button-focus-background-color: var(
    --amplify-components-passwordfield-button-focus-background-color
  );
  --amplify-components-button-focus-border-color: var(
    --amplify-components-passwordfield-button-focus-border-color
  );
  --amplify-components-button-focus-color: var(
    --amplify-components-passwordfield-button-focus-color
  );
  --amplify-components-button-hover-background-color: var(
    --amplify-components-passwordfield-button-hover-background-color
  );
  --amplify-components-button-hover-border-color: var(
    --amplify-components-passwordfield-button-hover-border-color
  );
  --amplify-components-button-hover-color: var(
    --amplify-components-passwordfield-button-hover-color
  );
  --amplify-components-button-outlined-error-color: var(
    --amplify-components-passwordfield-button-error-color
  );
  --amplify-components-button-outlined-error-border-color: var(
    --amplify-components-passwordfield-button-error-border-color
  );
  --amplify-components-button-outlined-error-background-color: var(
    --amplify-components-passwordfield-button-error-background-color
  );
  --amplify-components-button-outlined-error-active-color: var(
    --amplify-components-passwordfield-button-error-active-color
  );
  --amplify-components-button-outlined-error-active-border-color: var(
    --amplify-components-passwordfield-button-error-active-border-color
  );
  --amplify-components-button-outlined-error-active-background-color: var(
    --amplify-components-passwordfield-button-error-active-background-color
  );
  --amplify-components-button-outlined-error-hover-color: var(
    --amplify-components-passwordfield-button-error-hover-color
  );
  --amplify-components-button-outlined-error-hover-border-color: var(
    --amplify-components-passwordfield-button-error-hover-border-color
  );
  --amplify-components-button-outlined-error-hover-background-color: var(
    --amplify-components-passwordfield-button-error-hover-background-color
  );
  --amplify-components-button-outlined-error-focus-color: var(
    --amplify-components-passwordfield-button-error-focus-color
  );
  --amplify-components-button-outlined-error-focus-box-shadow: var(
    --amplify-components-passwordfield-button-error-focus-box-shadow
  );
  --amplify-components-button-outlined-error-focus-border-color: var(
    --amplify-components-passwordfield-button-error-focus-border-color
  );
  --amplify-components-button-outlined-error-focus-background-color: var(
    --amplify-components-passwordfield-button-error-focus-background-color
  );
}

.amplify-phonenumberfield select:not(:focus) {
  border-right: none;
}

.amplify-phonenumberfield {
  --amplify-components-selectfield-color: var(
    --amplify-components-phonenumberfield-color
  );
  --amplify-components-selectfield-border-color: var(
    --amplify-components-phonenumberfield-border-color
  );
  --amplify-components-selectfield-font-size: var(
    --amplify-components-phonenumberfield-font-size
  );
  --amplify-components-selectfield-focus-border-color: var(
    --amplify-components-phonenumberfield-focus-border-color
  );
  --amplify-components-textfield-color: var(
    --amplify-components-phonenumberfield-color
  );
  --amplify-components-textfield-border-color: var(
    --amplify-components-phonenumberfield-border-color
  );
  --amplify-components-textfield-font-size: var(
    --amplify-components-phonenumberfield-font-size
  );
  --amplify-components-textfield-focus-border-color: var(
    --amplify-components-phonenumberfield-focus-border-color
  );
}

.amplify-rating {
  display: flex;
  position: relative;
  text-align: left;
  font-size: var(--amplify-components-rating-default-size);
  line-height: var(--amplify-components-rating-default-size);
}
.amplify-rating--small {
  font-size: var(--amplify-components-rating-small-size);
  line-height: var(--amplify-components-rating-small-size);
}
.amplify-rating--large {
  font-size: var(--amplify-components-rating-large-size);
  line-height: var(--amplify-components-rating-large-size);
}
.amplify-rating__item {
  position: relative;
  height: 1em;
  width: 1em;
}
.amplify-rating__icon {
  width: 1em;
  height: 1em;
  display: block;
  position: absolute;
  overflow: hidden;
}
.amplify-rating__icon--filled {
  color: var(--amplify-components-rating-filled-color);
}
.amplify-rating__icon--empty {
  color: var(--amplify-components-rating-empty-color);
}

.amplify-radio {
  align-items: var(--amplify-components-radio-align-items);
  justify-content: var(--amplify-components-radio-justify-content);
  gap: inherit;
  flex-direction: row-reverse;
  position: relative;
}
.amplify-radio--disabled {
  cursor: var(--amplify-components-radio-disabled-cursor);
}

.amplify-radio__button {
  flex-shrink: 0;
  align-items: var(--amplify-components-radio-button-align-items);
  justify-content: var(--amplify-components-radio-button-justify-content);
  padding: var(--amplify-components-radio-button-padding);
  box-sizing: var(--amplify-components-radio-button-box-sizing);
  border-width: var(--amplify-components-radio-button-border-width);
  border-style: var(--amplify-components-radio-button-border-style);
  border-radius: var(--amplify-components-radio-button-border-radius);
  border-color: var(--amplify-components-radio-button-border-color);
  color: var(--amplify-components-radio-button-color);
  background-color: var(--amplify-components-radio-button-background-color);
  transition-property: var(--amplify-components-radio-button-transition-property);
  transition-duration: var(--amplify-components-radio-button-transition-duration);
  width: var(--amplify-components-radio-button-width);
  height: var(--amplify-components-radio-button-height);
  outline-color: var(--amplify-components-radio-button-outline-color);
  outline-style: var(--amplify-components-radio-button-outline-style);
  outline-width: var(--amplify-components-radio-button-outline-width);
  outline-offset: var(--amplify-components-radio-button-outline-offset);
}
.amplify-radio__button::before {
  content: "";
  display: inline-block;
  width: 100%;
  height: 100%;
  border-radius: var(--amplify-components-radio-button-before-border-radius);
  background-color: currentColor;
  border-radius: 50%;
}
.amplify-radio__button--small {
  width: var(--amplify-components-radio-button-small-width);
  height: var(--amplify-components-radio-button-small-height);
}
.amplify-radio__button--large {
  width: var(--amplify-components-radio-button-large-width);
  height: var(--amplify-components-radio-button-large-height);
}

.amplify-radio__input:checked + .amplify-radio__button {
  color: var(--amplify-components-radio-button-checked-color);
}

.amplify-radio__input:checked:disabled + .amplify-radio__button {
  color: var(--amplify-components-radio-button-checked-disabled-color);
}

.amplify-radio__input:focus + .amplify-radio__button {
  border-color: var(--amplify-components-radio-button-focus-border-color);
  box-shadow: var(--amplify-components-radio-button-focus-box-shadow);
}

.amplify-radio__input[aria-invalid=true] + .amplify-radio__button {
  border-color: var(--amplify-components-radio-button-error-border-color);
}

.amplify-radio__input[aria-invalid=true]:focus + .amplify-radio__button {
  box-shadow: var(--amplify-components-radio-button-error-focus-box-shadow);
}

.amplify-radio__input:disabled + .amplify-radio__button {
  border-color: var(--amplify-components-radio-button-disabled-border-color);
  background-color: var(--amplify-components-radio-button-disabled-background-color);
}

.amplify-radio__label {
  color: var(--amplify-components-radio-label-color);
}
.amplify-radio__label--disabled {
  color: var(--amplify-components-radio-label-disabled-color);
}

.amplify-radiogroup {
  gap: inherit;
  flex-direction: inherit;
  align-items: inherit;
}

.amplify-radiogroupfield {
  flex-direction: column;
  align-items: flex-start;
  --amplify-components-fieldset-legend-color: var(
    --amplify-components-radiogroup-legend-color
  );
  --amplify-components-fieldset-legend-font-weight: var(
    --amplify-components-radiogroup-legend-font-weight
  );
  --amplify-components-radio-button-border-width: var(
    --amplify-components-radiogroup-radio-border-width
  );
  --amplify-components-radio-button-border-color: var(
    --amplify-components-radiogroup-radio-border-color
  );
  --amplify-components-radio-button-background-color: var(
    --amplify-components-radiogroup-radio-background-color
  );
  --amplify-components-radio-label-color: var(
    --amplify-components-radiogroup-radio-label-color
  );
  --amplify-components-radio-button-checked-color: var(
    --amplify-components-radiogroup-radio-checked-color
  );
}

.amplify-searchfield {
  --amplify-components-fieldcontrol-color: var(
    --amplify-components-searchfield-input-color
  );
}
.amplify-searchfield__search {
  color: var(--amplify-components-searchfield-button-color);
  background-color: var(--amplify-components-searchfield-button-background-color);
}
.amplify-searchfield__search:active {
  background-color: var(--amplify-components-button-active-background-color);
  border-color: var(--amplify-components-button-active-border-color);
  color: var(--amplify-components-button-active-color);
}
.amplify-searchfield__search:focus {
  background-color: var(--amplify-components-searchfield-button-focus-background-color);
  border-color: var(--amplify-components-searchfield-button-focus-border-color);
  color: var(--amplify-components-searchfield-button-focus-color);
}
.amplify-searchfield__search:hover {
  background-color: var(--amplify-components-searchfield-button-hover-background-color);
  border-color: var(--amplify-components-searchfield-button-hover-border-color);
  color: var(--amplify-components-searchfield-button-hover-color);
}
.amplify-searchfield__search:disabled {
  background-color: var(--amplify-components-searchfield-button-disabled-background-color);
  border-color: var(--amplify-components-searchfield-button-disabled-border-color);
  color: var(--amplify-components-searchfield-button-disabled-color);
}

.amplify-select__wrapper {
  flex: var(--amplify-components-select-wrapper-flex);
  display: var(--amplify-components-select-wrapper-display);
  position: var(--amplify-components-select-wrapper-position);
  cursor: var(--amplify-components-select-wrapper-cursor);
  align-self: stretch;
}

.amplify-select__icon {
  color: var(--amplify-components-fieldcontrol-color);
  align-items: var(--amplify-components-select-icon-wrapper-align-items);
  position: var(--amplify-components-select-icon-wrapper-position);
  top: var(--amplify-components-select-icon-wrapper-top);
  right: var(--amplify-components-select-icon-wrapper-right);
  transform: var(--amplify-components-select-icon-wrapper-transform);
  pointer-events: var(--amplify-components-select-icon-wrapper-pointer-events);
}
.amplify-select__icon--small {
  right: var(--amplify-components-select-icon-wrapper-small-right);
}
.amplify-select__icon--large {
  right: var(--amplify-components-select-icon-wrapper-large-right);
}

.amplify-select {
  box-sizing: border-box;
  color: var(--amplify-components-fieldcontrol-color);
  font-size: var(--amplify-components-fieldcontrol-font-size);
  line-height: var(--amplify-components-fieldcontrol-line-height);
  padding-block-start: var(--amplify-components-fieldcontrol-padding-block-start);
  padding-block-end: var(--amplify-components-fieldcontrol-padding-block-end);
  padding-inline-start: var(--amplify-components-fieldcontrol-padding-inline-start);
  padding-inline-end: var(--amplify-components-fieldcontrol-padding-inline-end);
  transition: all var(--amplify-components-fieldcontrol-transition-duration);
  width: 100%;
  border-color: var(--amplify-components-fieldcontrol-border-color);
  border-radius: var(--amplify-components-fieldcontrol-border-radius);
  border-style: var(--amplify-components-fieldcontrol-border-style);
  border-width: var(--amplify-components-fieldcontrol-border-width);
  outline-color: var(--amplify-components-fieldcontrol-outline-color);
  outline-style: var(--amplify-components-fieldcontrol-outline-style);
  outline-width: var(--amplify-components-fieldcontrol-outline-width);
  outline-offset: var(--amplify-components-fieldcontrol-outline-offset);
  background-color: var(--amplify-components-select-background-color);
  color: var(--amplify-components-select-color);
  min-width: var(--amplify-components-select-min-width);
  padding-inline-end: var(--amplify-components-select-padding-inline-end);
  white-space: var(--amplify-components-select-white-space);
}
.amplify-select:focus {
  border-color: var(--amplify-components-fieldcontrol-focus-border-color);
  box-shadow: var(--amplify-components-fieldcontrol-focus-box-shadow);
}
.amplify-select--small {
  font-size: var(--amplify-components-fieldcontrol-small-font-size);
  padding-block-start: var(--amplify-components-fieldcontrol-small-padding-block-start);
  padding-block-end: var(--amplify-components-fieldcontrol-small-padding-block-end);
  padding-inline-start: var(--amplify-components-fieldcontrol-small-padding-inline-start);
  padding-inline-end: var(--amplify-components-fieldcontrol-small-padding-inline-end);
}
.amplify-select--large {
  font-size: var(--amplify-components-fieldcontrol-large-font-size);
  padding-block-start: var(--amplify-components-fieldcontrol-large-padding-block-start);
  padding-block-end: var(--amplify-components-fieldcontrol-large-padding-block-end);
  padding-inline-start: var(--amplify-components-fieldcontrol-large-padding-inline-start);
  padding-inline-end: var(--amplify-components-fieldcontrol-large-padding-inline-end);
}
.amplify-select--error {
  border-color: var(--amplify-components-fieldcontrol-error-border-color);
}
.amplify-select--error:focus {
  border-color: var(--amplify-components-fieldcontrol-error-border-color);
  box-shadow: var(--amplify-components-fieldcontrol-error-focus-box-shadow);
}
.amplify-select--quiet {
  border-block-start: var(--amplify-components-fieldcontrol-quiet-border-block-start);
  border-inline-start: var(--amplify-components-fieldcontrol-quiet-border-inline-start);
  border-inline-end: var(--amplify-components-fieldcontrol-quiet-border-inline-end);
  border-radius: var(--amplify-components-fieldcontrol-quiet-border-radius);
}
.amplify-select--quiet:focus {
  border-block-end-color: var(--amplify-components-fieldcontrol-quiet-focus-border-block-end-color);
  box-shadow: var(--amplify-components-fieldcontrol-quiet-focus-box-shadow);
}
.amplify-select--quiet[aria-invalid=true] {
  border-block-end-color: var(--amplify-components-fieldcontrol-quiet-error-border-block-end-color);
}
.amplify-select--quiet[aria-invalid=true]:focus {
  border-block-end-color: var(--amplify-components-fieldcontrol-quiet-error-focus-border-block-end-color);
  box-shadow: var(--amplify-components-fieldcontrol-quiet-error-focus-box-shadow);
}
.amplify-select[disabled] {
  color: var(--amplify-components-fieldcontrol-disabled-color);
  cursor: var(--amplify-components-fieldcontrol-disabled-cursor);
  border-color: var(--amplify-components-fieldcontrol-disabled-border-color);
  background-color: var(--amplify-components-fieldcontrol-disabled-background-color);
}
.amplify-select option {
  background-color: var(--amplify-components-select-option-background-color);
  color: var(--amplify-components-select-option-color);
}
.amplify-select option[disabled=""] {
  background-color: var(--amplify-components-select-option-disabled-background-color);
  color: var(--amplify-components-select-option-disabled-color);
  cursor: var(--amplify-components-fieldcontrol-disabled-cursor);
}
.amplify-select[disabled] {
  background-color: var(--amplify-components-select-disabled-background-color);
  color: var(--amplify-components-select-disabled-color);
}
.amplify-select[disabled] option {
  color: inherit;
  background-color: inherit;
}
.amplify-select--small {
  min-width: var(--amplify-components-select-small-min-width);
  padding-inline-end: var(--amplify-components-select-small-padding-inline-end);
}
.amplify-select--large {
  min-width: var(--amplify-components-select-large-min-width);
  padding-inline-end: var(--amplify-components-select-large-padding-inline-end);
}
.amplify-select--expanded {
  overflow: auto;
  padding: var(--amplify-components-select-expanded-padding-block) var(--amplify-components-select-expanded-padding-inline);
}
.amplify-select--expanded option {
  padding: var(--amplify-components-select-expanded-option-padding-block) var(--amplify-components-select-expanded-option-padding-inline);
}

.amplify-selectfield {
  flex-direction: var(--amplify-components-selectfield-flex-direction);
  --amplify-components-fieldcontrol-border-color: var(
    --amplify-components-selectfield-border-color
  );
  --amplify-components-fieldcontrol-color: var(
    --amplify-components-selectfield-color
  );
  --amplify-components-fieldcontrol-font-size: var(
    --amplify-components-selectfield-font-size
  );
  --amplify-components-fieldcontrol-focus-border-color: var(
    --amplify-components-selectfield-focus-border-color
  );
  --amplify-components-field-label-color: var(
    --amplify-components-selectfield-label-color
  );
}

.amplify-sliderfield {
  flex-direction: column;
}

.amplify-sliderfield__label {
  display: flex;
  justify-content: space-between;
}

.amplify-sliderfield__root {
  align-items: center;
  box-sizing: content-box;
  display: flex;
  padding-block: var(--amplify-components-sliderfield-padding-block);
  position: relative;
  touch-action: none;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  --amplify-internal-sliderfield-root-height: var(
    --amplify-components-sliderfield-thumb-height
  );
  --amplify-internal-sliderfield-root-width: var(
    --amplify-components-sliderfield-thumb-height
  );
}
.amplify-sliderfield__root--disabled {
  cursor: not-allowed;
}
.amplify-sliderfield__root--horizontal {
  height: var(--amplify-internal-sliderfield-root-height);
}
.amplify-sliderfield__root--vertical {
  flex-direction: column;
  width: var(--amplify-internal-sliderfield-root-width);
}
.amplify-sliderfield__root--large {
  --amplify-internal-sliderfield-root-height: var(
    --amplify-components-sliderfield-large-thumb-height
  );
  --amplify-internal-sliderfield-root-width: var(
    --amplify-components-sliderfield-large-thumb-height
  );
}
.amplify-sliderfield__root--small {
  --amplify-internal-sliderfield-root-height: var(
    --amplify-components-sliderfield-small-thumb-height
  );
  --amplify-internal-sliderfield-root-width: var(
    --amplify-components-sliderfield-small-thumb-height
  );
}

.amplify-sliderfield__track {
  position: relative;
  flex-grow: 1;
  border-radius: var(--amplify-components-sliderfield-track-border-radius);
  background-color: var(--amplify-components-sliderfield-track-background-color);
  --amplify-internal-sliderfield-track-height: var(
    --amplify-components-sliderfield-track-height
  );
  --amplify-internal-sliderfield-track-min-width: var(
    --amplify-components-sliderfield-track-min-width
  );
  --amplify-internal-sliderfield-track-width: var(
    --amplify-components-sliderfield-track-height
  );
  --amplify-internal-sliderfield-track-min-height: var(
    --amplify-components-sliderfield-track-min-width
  );
}
.amplify-sliderfield__track--horizontal {
  height: var(--amplify-internal-sliderfield-track-height);
  min-width: var(--amplify-internal-sliderfield-track-min-width);
}
.amplify-sliderfield__track--vertical {
  width: var(--amplify-internal-sliderfield-track-width);
  min-height: var(--amplify-internal-sliderfield-track-min-height);
}
.amplify-sliderfield__track--large {
  --amplify-internal-sliderfield-track-height: var(
    --amplify-components-sliderfield-large-track-height
  );
  --amplify-internal-sliderfield-track-width: var(
    --amplify-components-sliderfield-large-track-height
  );
}
.amplify-sliderfield__track--small {
  --amplify-internal-sliderfield-track-height: var(
    --amplify-components-sliderfield-small-track-height
  );
  --amplify-internal-sliderfield-track-width: var(
    --amplify-components-sliderfield-small-track-height
  );
}

.amplify-sliderfield__range {
  position: absolute;
  border-radius: var(--amplify-components-sliderfield-range-border-radius);
  background-color: var(--amplify-components-sliderfield-range-background-color);
}
.amplify-sliderfield__range--disabled {
  background-color: var(--amplify-components-sliderfield-range-disabled-background-color);
}
.amplify-sliderfield__range--horizontal {
  height: 100%;
}
.amplify-sliderfield__range--vertical {
  width: 100%;
}

.amplify-sliderfield__thumb {
  display: block;
  width: var(--amplify-components-sliderfield-thumb-width);
  height: var(--amplify-components-sliderfield-thumb-height);
  background-color: var(--amplify-components-sliderfield-thumb-background-color);
  box-shadow: var(--amplify-components-sliderfield-thumb-box-shadow);
  border-radius: var(--amplify-components-sliderfield-thumb-border-radius);
  border-width: var(--amplify-components-sliderfield-thumb-border-width);
  border-color: var(--amplify-components-sliderfield-thumb-border-color);
  border-style: var(--amplify-components-sliderfield-thumb-border-style);
}
.amplify-sliderfield__thumb:hover {
  background-color: var(--amplify-components-sliderfield-thumb-hover-background-color);
  border-color: var(--amplify-components-sliderfield-thumb-hover-border-color);
}
.amplify-sliderfield__thumb:focus {
  border-color: var(--amplify-components-sliderfield-thumb-focus-border-color);
  box-shadow: var(--amplify-components-sliderfield-thumb-focus-box-shadow);
}
.amplify-sliderfield__thumb--disabled {
  background-color: var(--amplify-components-sliderfield-thumb-disabled-background-color);
  border-color: var(--amplify-components-sliderfield-thumb-disabled-border-color);
  box-shadow: var(--amplify-components-sliderfield-thumb-disabled-box-shadow);
}
.amplify-sliderfield__thumb--large {
  width: var(--amplify-components-sliderfield-large-thumb-width);
  height: var(--amplify-components-sliderfield-large-thumb-height);
}
.amplify-sliderfield__thumb--small {
  width: var(--amplify-components-sliderfield-small-thumb-width);
  height: var(--amplify-components-sliderfield-small-thumb-height);
}

.amplify-stepperfield {
  flex-direction: var(--amplify-components-stepperfield-flex-direction);
  --amplify-components-fieldcontrol-border-color: var(
    --amplify-components-stepperfield-border-color
  );
  --amplify-components-button-border-color: var(
    --amplify-components-stepperfield-border-color
  );
  --amplify-components-fieldcontrol-color: var(
    --amplify-components-stepperfield-input-color
  );
  --amplify-components-fieldcontrol-font-size: var(
    --amplify-components-stepperfield-input-font-size
  );
  --amplify-components-button-color: var(
    --amplify-components-stepperfield-button-color
  );
  --amplify-components-button-active-color: var(
    --amplify-components-stepperfield-button-active-color
  );
  --amplify-components-button-active-background-color: var(
    --amplify-components-stepperfield-button-active-background-color
  );
  --amplify-components-button-focus-color: var(
    --amplify-components-stepperfield-button-focus-color
  );
  --amplify-components-button-focus-background-color: var(
    --amplify-components-stepperfield-button-focus-background-color
  );
  --amplify-components-button-disabled-color: var(
    --amplify-components-stepperfield-button-disabled-color
  );
  --amplify-components-button-disabled-background-color: var(
    --amplify-components-stepperfield-button-disabled-background-color
  );
  --amplify-components-button-hover-color: var(
    --amplify-components-stepperfield-button-hover-color
  );
  --amplify-components-button-hover-background-color: var(
    --amplify-components-stepperfield-button-hover-background-color
  );
}

.amplify-stepperfield__button--decrease,
.amplify-stepperfield__button--increase {
  background-color: var(--amplify-components-stepperfield-button-background-color);
}
.amplify-stepperfield__button--decrease--disabled,
.amplify-stepperfield__button--increase--disabled {
  background-color: var(--amplify-components-stepperfield-button-disabled-background-color);
}
.amplify-stepperfield__button--decrease--quiet,
.amplify-stepperfield__button--increase--quiet {
  border-width: 0 0 var(--amplify-components-button-border-width) 0;
  border-radius: 0;
}

.amplify-stepperfield__button--decrease[data-invalid=true] {
  border-inline-end: none;
}

.amplify-stepperfield__button--increase[data-invalid=true] {
  border-inline-start: none;
}

.amplify-stepperfield__input {
  -moz-appearance: textfield;
  text-align: var(--amplify-components-stepperfield-input-text-align);
}
.amplify-stepperfield__input::-webkit-outer-spin-button, .amplify-stepperfield__input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.amplify-stepperfield__input:not(:focus, [aria-invalid=true]) {
  border-inline-start: none;
  border-inline-end: none;
}

.amplify-switchfield {
  display: inline-block;
  font-size: var(--amplify-components-switchfield-font-size);
  cursor: pointer;
}
.amplify-switchfield--small {
  font-size: var(--amplify-components-switchfield-small-font-size);
}
.amplify-switchfield--large {
  font-size: var(--amplify-components-switchfield-large-font-size);
}

.amplify-switch__wrapper {
  display: inline-flex;
  align-items: center;
}
.amplify-switch__wrapper--start {
  flex-direction: row;
}
.amplify-switch__wrapper--end {
  flex-direction: row-reverse;
}
.amplify-switch__wrapper--top {
  flex-direction: column;
}
.amplify-switch__wrapper--bottom {
  flex-direction: column-reverse;
}

.amplify-switch__track {
  display: inline-flex;
  justify-content: flex-start;
  box-sizing: content-box;
  border-radius: var(--amplify-components-switchfield-track-border-radius);
  padding: var(--amplify-components-switchfield-track-padding);
  width: var(--amplify-components-switchfield-track-width);
  height: var(--amplify-components-switchfield-track-height);
  transition-duration: var(--amplify-components-switchfield-track-transition-duration);
  background-color: var(--amplify-components-switchfield-track-background-color);
}
.amplify-switch__track--checked {
  background-color: var(--amplify-components-switchfield-track-checked-background-color);
}
.amplify-switch__track--disabled {
  opacity: var(--amplify-components-switchfield-disabled-opacity);
  cursor: not-allowed;
}
.amplify-switch__track--focused {
  box-shadow: var(--amplify-components-switchfield-focused-shadow);
}
.amplify-switch__track--error {
  background-color: var(--amplify-components-switchfield-track-error-background-color);
}

.amplify-switch__thumb {
  background-color: var(--amplify-components-switchfield-thumb-background-color);
  transition-duration: var(--amplify-components-switchfield-thumb-transition-duration);
  border-radius: var(--amplify-components-switchfield-thumb-border-radius);
  width: var(--amplify-components-switchfield-thumb-width);
  height: var(--amplify-components-switchfield-thumb-width);
  border-width: var(--amplify-components-switchfield-thumb-border-width);
  border-style: var(--amplify-components-switchfield-thumb-border-style);
  border-color: var(--amplify-components-switchfield-thumb-border-color);
  overflow-wrap: break-word;
}
.amplify-switch__thumb--checked {
  transform: var(--amplify-components-switchfield-thumb-checked-transform);
}
.amplify-switch__thumb--disabled {
  cursor: not-allowed;
}

.amplify-switch__label {
  padding: var(--amplify-components-switchfield-label-padding);
  cursor: pointer;
}

.amplify-table {
  /**
   * Default Table primitive stylings
   */
  border-collapse: var(--amplify-components-table-border-collapse);
  display: var(--amplify-components-table-display);
  width: var(--amplify-components-table-width);
  --amplify-internal-table-caption-font-size: var(
    --amplify-components-table-caption-font-size
  );
  --amplify-internal-table-th-font-size: var(
    --amplify-components-table-header-font-size
  );
  --amplify-internal-table-th-padding: var(
    --amplify-components-table-header-padding
  );
  --amplify-internal-table-td-font-size: var(
    --amplify-components-table-data-font-size
  );
  --amplify-internal-table-td-padding: var(
    --amplify-components-table-data-padding
  );
  --amplify-internal-table-td-border-width: var(
      --amplify-components-table-data-border-width
    )
    0px var(--amplify-components-table-data-border-width) 0px;
  --amplify-internal-table-th-border-width: var(
      --amplify-components-table-header-border-width
    )
    0px var(--amplify-components-table-header-border-width) 0px;
  /**
   * Data attribute stylings
   */
}
.amplify-table--small {
  --amplify-internal-table-caption-font-size: var(
    --amplify-components-table-caption-small-font-size
  );
  --amplify-internal-table-th-font-size: var(
    --amplify-components-table-header-small-font-size
  );
  --amplify-internal-table-th-padding: var(
    --amplify-components-table-header-small-padding
  );
  --amplify-internal-table-td-font-size: var(
    --amplify-components-table-data-small-font-size
  );
  --amplify-internal-table-td-padding: var(
    --amplify-components-table-data-small-padding
  );
}
.amplify-table--large {
  --amplify-internal-table-caption-font-size: var(
    --amplify-components-table-caption-large-font-size
  );
  --amplify-internal-table-th-font-size: var(
    --amplify-components-table-header-large-font-size
  );
  --amplify-internal-table-th-padding: var(
    --amplify-components-table-header-large-padding
  );
  --amplify-internal-table-td-font-size: var(
    --amplify-components-table-data-large-font-size
  );
  --amplify-internal-table-td-padding: var(
    --amplify-components-table-data-large-padding
  );
}
.amplify-table--bordered {
  --amplify-internal-table-td-border-width: var(
      --amplify-components-table-data-border-width
    )
    var(--amplify-components-table-data-border-width)
    var(--amplify-components-table-data-border-width)
    var(--amplify-components-table-data-border-width);
  --amplify-internal-table-th-border-width: var(
      --amplify-components-table-header-border-width
    )
    var(--amplify-components-table-header-border-width)
    var(--amplify-components-table-header-border-width)
    var(--amplify-components-table-header-border-width);
}
.amplify-table--striped .amplify-table__row:not(.amplify-table__head *):nth-child(odd) {
  background-color: var(--amplify-components-table-row-striped-background-color);
}
.amplify-table--striped .amplify-table__row.amplify-storage-browser__table-row_active:nth-child(odd) {
  background-color: var(--amplify-colors-background-info);
}
.amplify-table__caption {
  caption-side: var(--amplify-components-table-caption-caption-side);
  color: var(--amplify-components-table-caption-color);
  display: var(--amplify-components-table-caption-display);
  font-size: var(--amplify-internal-table-caption-font-size);
  text-align: var(--amplify-components-table-caption-text-align);
  word-break: var(--amplify-components-table-caption-word-break);
}
.amplify-table__head {
  display: var(--amplify-components-table-head-display);
  vertical-align: var(--amplify-components-table-head-vertical-align);
}
.amplify-table__body {
  display: var(--amplify-components-table-body-display);
  vertical-align: var(--amplify-components-table-body-vertical-align);
}
.amplify-table__foot {
  display: var(--amplify-components-table-foot-display);
  vertical-align: var(--amplify-components-table-foot-vertical-align);
}
.amplify-table__row {
  display: var(--amplify-components-table-row-display);
  vertical-align: var(--amplify-components-table-row-vertical-align);
}
.amplify-table__th {
  border-color: var(--amplify-components-table-header-border-color);
  border-style: var(--amplify-components-table-header-border-style);
  border-width: var(--amplify-internal-table-th-border-width);
  color: var(--amplify-components-table-header-color);
  display: var(--amplify-components-table-header-display);
  font-size: var(--amplify-internal-table-th-font-size);
  font-weight: var(--amplify-components-table-header-font-weight);
  padding: var(--amplify-internal-table-th-padding);
  vertical-align: var(--amplify-components-table-header-vertical-align);
}
.amplify-table__th:first-child {
  border-left-width: var(--amplify-components-table-header-border-width);
}
.amplify-table__th:last-child {
  border-right-width: var(--amplify-components-table-header-border-width);
}
.amplify-table__td {
  border-color: var(--amplify-components-table-data-border-color);
  border-style: var(--amplify-components-table-data-border-style);
  border-width: var(--amplify-internal-table-td-border-width);
  color: var(--amplify-components-table-data-color);
  display: var(--amplify-components-table-data-display);
  font-size: var(--amplify-internal-table-td-font-size);
  font-weight: var(--amplify-components-table-data-font-weight);
  padding: var(--amplify-internal-table-td-padding);
  vertical-align: var(--amplify-components-table-data-vertical-align);
}
.amplify-table__td:first-child {
  border-left-width: var(--amplify-components-table-data-border-width);
}
.amplify-table__td:last-child {
  border-right-width: var(--amplify-components-table-data-border-width);
}
.amplify-table[data-highlightonhover=true] .amplify-table__row:not(.amplify-table__head *):hover {
  background-color: var(--amplify-components-table-row-hover-background-color);
}

.amplify-tabs__list {
  --internal-item-margin-start: 0;
  --internal-item-margin-end: calc(
    -1 * var(--amplify-components-tabs-item-border-width)
  );
  --internal-item-border-width: 0 0
    var(--amplify-components-tabs-border-width) 0;
  --internal-item-flex: initial;
  display: flex;
  flex-direction: row;
  background-color: var(--amplify-components-tabs-background-color);
  box-shadow: var(--amplify-components-tabs-box-shadow);
  border-width: var(--internal-item-border-width);
  border-style: var(--amplify-components-tabs-border-style);
  border-color: var(--amplify-components-tabs-border-color);
  gap: var(--amplify-components-tabs-gap);
}
.amplify-tabs__list--top {
  --internal-item-border-width: var(--amplify-components-tabs-border-width)
    0 0 0;
  --internal-item-margin-start: calc(
    -1 * var(--amplify-components-tabs-item-border-width)
  );
  --internal-item-margin-end: 0;
}
.amplify-tabs__list--equal {
  --internal-item-flex: 1 1 0;
}
.amplify-tabs__list--relative {
  --internal-item-flex: 1 1 auto;
}
.amplify-tabs__panel {
  display: none;
  background-color: var(--amplify-components-tabs-panel-background-color);
  padding-inline: var(--amplify-components-tabs-panel-padding-inline);
  padding-block: var(--amplify-components-tabs-panel-padding-block);
}
.amplify-tabs__panel--active {
  display: block;
}
.amplify-tabs__item {
  position: relative;
  background-color: var(--amplify-components-tabs-item-background-color);
  box-sizing: border-box;
  color: var(--amplify-components-tabs-item-color);
  font-size: var(--amplify-components-tabs-item-font-size);
  font-weight: var(--amplify-components-tabs-item-font-weight);
  padding: var(--amplify-components-tabs-item-padding-vertical) var(--amplify-components-tabs-item-padding-horizontal);
  text-align: var(--amplify-components-tabs-item-text-align);
  transition: all var(--amplify-components-tabs-item-transition-duration);
  border-width: var(--internal-item-border-width);
  border-style: var(--amplify-components-tabs-item-border-style);
  border-color: var(--amplify-components-tabs-item-border-color);
  flex: var(--internal-item-flex);
  margin-block-start: var(--internal-item-margin-start);
  margin-block-end: var(--internal-item-margin-end);
}
.amplify-tabs__item--active {
  color: var(--amplify-components-tabs-item-active-color);
  border-color: var(--amplify-components-tabs-item-active-border-color);
  background-color: var(--amplify-components-tabs-item-active-background-color);
  transition-property: none;
}
.amplify-tabs__item:hover {
  color: var(--amplify-components-tabs-item-hover-color);
  cursor: pointer;
}
.amplify-tabs__item:focus-visible {
  z-index: 2;
  color: var(--amplify-components-tabs-item-focus-color);
  background-color: var(--amplify-components-tabs-item-focus-background-color);
  border-color: var(--amplify-components-tabs-item-focus-border-color);
  box-shadow: var(--amplify-components-tabs-item-focus-box-shadow);
}
.amplify-tabs__item:active {
  background-color: var(--amplify-components-tabs-item-active-background-color);
  border-color: var(--amplify-components-tabs-item-active-border-color);
  box-shadow: var(--amplify-components-tabs-item-active-box-shadow);
  color: var(--amplify-components-tabs-item-active-color);
}
.amplify-tabs__item[disabled] {
  background-color: var(--amplify-components-tabs-item-disabled-background-color);
  border-color: var(--amplify-components-tabs-item-disabled-border-color);
  box-shadow: var(--amplify-components-tabs-item-disabled-box-shadow);
  color: var(--amplify-components-tabs-item-disabled-color);
  cursor: not-allowed;
}

.amplify-textareafield {
  max-height: 100%;
  flex-direction: column;
  --amplify-components-fieldcontrol-color: var(
    --amplify-components-textareafield-color
  );
  --amplify-components-fieldcontrol-border-color: var(
    --amplify-components-textareafield-border-color
  );
  --amplify-components-fieldcontrol-focus-border-color: var(
    --amplify-components-textareafield-focus-border-color
  );
}

.amplify-textfield {
  --amplify-components-fieldcontrol-color: var(
    --amplify-components-textfield-color
  );
  --amplify-components-fieldcontrol-border-color: var(
    --amplify-components-textfield-border-color
  );
  --amplify-components-fieldcontrol-font-size: var(
    --amplify-components-textfield-font-size
  );
  --amplify-components-fieldcontrol-focus-border-color: var(
    --amplify-components-textfield-focus-border-color
  );
}

.amplify-togglebutton {
  --amplify-internal-togglebutton-background-color: initial;
  --amplify-internal-togglebutton-border-color: var(
    --amplify-components-togglebutton-border-color
  );
  --amplify-internal-togglebutton-color: var(
    --amplify-components-togglebutton-color
  );
  background-color: var(--amplify-internal-togglebutton-background-color);
  border-color: var(--amplify-internal-togglebutton-border-color);
  color: var(--amplify-internal-togglebutton-color);
  --amplify-internal-togglebutton-focus-background-color: var(
    --amplify-internal-togglebutton-background-color
  );
  --amplify-internal-togglebutton-focus-border-color: var(
    --amplify-components-togglebutton-focus-border-color
  );
  --amplify-internal-togglebutton-focus-color: var(
    --amplify-components-togglebutton-focus-color
  );
  --amplify-internal-togglebutton-hover-background-color: var(
    --amplify-components-togglebutton-hover-background-color
  );
  --amplify-internal-togglebutton-hover-border-color: var(
    --amplify-internal-togglebutton-border-color
  );
  --amplify-internal-togglebutton-hover-color: var(
    --amplify-internal-togglebutton-color
  );
  --amplify-internal-togglebutton-active-background-color: var(
    --amplify-components-togglebutton-active-background-color
  );
  --amplify-internal-togglebutton-disabled-background-color: var(
    --amplify-components-togglebutton-disabled-background-color
  );
  --amplify-internal-togglebutton-disabled-border-color: var(
    --amplify-components-togglebutton-disabled-border-color
  );
  --amplify-internal-togglebutton-disabled-color: var(
    --amplify-components-togglebutton-disabled-color
  );
}
.amplify-togglebutton:focus {
  background-color: var(--amplify-internal-togglebutton-focus-background-color);
  border-color: var(--amplify-internal-togglebutton-focus-border-color);
  color: var(--amplify-internal-togglebutton-focus-color);
}
.amplify-togglebutton:hover {
  background-color: var(--amplify-internal-togglebutton-hover-background-color);
  border-color: var(--amplify-internal-togglebutton-hover-border-color);
  color: var(--amplify-internal-togglebutton-hover-color);
}
.amplify-togglebutton:active {
  background-color: var(--amplify-internal-togglebutton-active-background-color);
}
.amplify-togglebutton:disabled {
  background-color: var(--amplify-internal-togglebutton-disabled-background-color);
  border-color: var(--amplify-internal-togglebutton-disabled-border-color);
  color: var(--amplify-internal-togglebutton-disabled-color);
}
.amplify-togglebutton--pressed {
  --amplify-internal-togglebutton-border-color: var(
    --amplify-components-togglebutton-pressed-border-color
  );
  --amplify-internal-togglebutton-background-color: var(
    --amplify-components-togglebutton-pressed-background-color
  );
  --amplify-internal-togglebutton-color: var(
    --amplify-components-togglebutton-pressed-color
  );
  --amplify-internal-togglebutton-hover-background-color: var(
    --amplify-components-togglebutton-pressed-hover-background-color
  );
  --amplify-internal-togglebutton-disabled-background-color: var(
    --amplify-components-togglebutton-pressed-background-color
  );
  --amplify-internal-togglebutton-disabled-border-color: var(
    --amplify-components-togglebutton-pressed-border-color
  );
  --amplify-internal-togglebutton-disabled-color: var(
    --amplify-components-togglebutton-pressed-color
  );
}
.amplify-togglebutton--primary {
  --amplify-internal-togglebutton-primary-background-color: var(
    --amplify-components-togglebutton-primary-background-color
  );
  --amplify-internal-togglebutton-background-color: var(
    --amplify-internal-togglebutton-primary-background-color
  );
  --amplify-internal-togglebutton-primary-border-color: var(
    --amplify-components-togglebutton-border-color
  );
  --amplify-internal-togglebutton-border-color: var(
    --amplify-internal-togglebutton-primary-border-color
  );
  --amplify-internal-togglebutton-primary-color: var(
    --amplify-components-togglebutton-color
  );
  --amplify-internal-togglebutton-color: var(
    --amplify-internal-togglebutton-primary-color
  );
  border-width: var(--amplify-components-togglebutton-primary-border-width);
  --amplify-internal-togglebutton-primary-focus-background-color: var(
    --amplify-components-togglebutton-primary-focus-background-color
  );
  --amplify-internal-togglebutton-primary-focus-border-color: var(
    --amplify-components-togglebutton-primary-focus-border-color
  );
  --amplify-internal-togglebutton-primary-focus-color: var(
    --amplify-components-togglebutton-primary-focus-color
  );
  --amplify-internal-togglebutton-primary-focus-box-shadow: var(
    --amplify-components-togglebutton-primary-focus-box-shadow
  );
  --amplify-internal-togglebutton-focus-background-color: var(
    --amplify-internal-togglebutton-primary-focus-background-color
  );
  --amplify-internal-togglebutton-focus-border-color: var(
    --amplify-internal-togglebutton-primary-focus-border-color
  );
  --amplify-internal-togglebutton-focus-color: var(
    --amplify-internal-togglebutton-primary-focus-color
  );
  --amplify-internal-togglebutton-primary-hover-background-color: var(
    --amplify-components-togglebutton-primary-hover-background-color
  );
  --amplify-internal-togglebutton-primary-hover-border-color: var(
    --amplify-internal-togglebutton-primary-border-color
  );
  --amplify-internal-togglebutton-primary-hover-color: var(
    --amplify-components-togglebutton-primary-hover-color
  );
  --amplify-internal-togglebutton-hover-background-color: var(
    --amplify-internal-togglebutton-primary-hover-background-color
  );
  --amplify-internal-togglebutton-hover-border-color: var(
    --amplify-internal-togglebutton-primary-hover-border-color
  );
  --amplify-internal-togglebutton-hover-color: var(
    --amplify-internal-togglebutton-primary-hover-color
  );
  --amplify-internal-togglebutton-primary-disabled-background-color: var(
    --amplify-components-togglebutton-primary-disabled-background-color
  );
  --amplify-internal-togglebutton-primary-disabled-border-color: var(
    --amplify-components-togglebutton-primary-disabled-border-color
  );
  --amplify-internal-togglebutton-primary-disabled-color: var(
    --amplify-components-togglebutton-primary-disabled-color
  );
  --amplify-internal-togglebutton-disabled-background-color: var(
    --amplify-internal-togglebutton-primary-disabled-background-color
  );
  --amplify-internal-togglebutton-disabled-border-color: var(
    --amplify-internal-togglebutton-primary-disabled-border-color
  );
  --amplify-internal-togglebutton-disabled-color: var(
    --amplify-internal-togglebutton-primary-disabled-color
  );
}
.amplify-togglebutton--primary:focus {
  box-shadow: var(--amplify-internal-togglebutton-primary-focus-box-shadow);
}
.amplify-togglebutton--pressed {
  --amplify-internal-togglebutton-primary-background-color: var(
    --amplify-components-togglebutton-primary-pressed-background-color
  );
  --amplify-internal-togglebutton-primary-border-color: var(
    --amplify-components-togglebutton-primary-pressed-border-color
  );
  --amplify-internal-togglebutton-primary-color: var(
    --amplify-components-togglebutton-primary-pressed-color
  );
  --amplify-internal-togglebutton-primary-focus-background-color: var(
    --amplify-components-togglebutton-primary-pressed-focus-background-color
  );
  --amplify-internal-togglebutton-primary-focus-border-color: var(
    --amplify-components-togglebutton-primary-pressed-focus-border-color
  );
  --amplify-internal-togglebutton-primary-focus-color: var(
    --amplify-components-togglebutton-primary-pressed-focus-color
  );
  --amplify-internal-togglebutton-primary-hover-background-color: var(
    --amplify-components-togglebutton-primary-pressed-hover-background-color
  );
  --amplify-internal-togglebutton-primary-hover-border-color: var(
    --amplify-components-togglebutton-primary-pressed-hover-border-color
  );
  --amplify-internal-togglebutton-primary-hover-color: var(
    --amplify-components-togglebutton-primary-pressed-hover-color
  );
  --amplify-internal-togglebutton-primary-disabled-background-color: var(
    --amplify-components-togglebutton-primary-pressed-background-color
  );
  --amplify-internal-togglebutton-primary-disabled-border-color: var(
    --amplify-components-togglebutton-primary-pressed-border-color
  );
  --amplify-internal-togglebutton-primary-disabled-color: var(
    --amplify-components-togglebutton-primary-pressed-color
  );
}
.amplify-togglebutton--pressed:hover {
  --amplify-internal-togglebutton-primary-focus-box-shadow: var(
    --amplify-components-togglebutton-primary-pressed-hover-box-shadow
  );
}
.amplify-togglebutton--link {
  --amplify-internal-togglebutton-link-background-color: var(
    --amplify-components-togglebutton-link-background-color
  );
  --amplify-internal-togglebutton-link-color: var(
    --amplify-components-togglebutton-link-color
  );
  --amplify-internal-togglebutton-background-color: var(
    --amplify-internal-togglebutton-link-background-color
  );
  --amplify-internal-togglebutton-color: var(
    --amplify-internal-togglebutton-link-color
  );
  --amplify-internal-togglebutton-link-focus-background-color: var(
    --amplify-components-togglebutton-link-focus-background-color
  );
  --amplify-internal-togglebutton-link-focus-color: var(
    --amplify-components-togglebutton-link-focus-color
  );
  --amplify-internal-togglebutton-focus-background-color: var(
    --amplify-internal-togglebutton-link-focus-background-color
  );
  --amplify-internal-togglebutton-focus-color: var(
    --amplify-internal-togglebutton-link-focus-color
  );
  --amplify-internal-togglebutton-link-hover-background-color: var(
    --amplify-components-togglebutton-link-hover-background-color
  );
  --amplify-internal-togglebutton-link-hover-color: var(
    --amplify-components-togglebutton-link-hover-color
  );
  --amplify-internal-togglebutton-hover-background-color: var(
    --amplify-internal-togglebutton-link-hover-background-color
  );
  --amplify-internal-togglebutton-hover-color: var(
    --amplify-internal-togglebutton-link-hover-color
  );
  --amplify-internal-togglebutton-link-disabled-color: var(
    --amplify-components-togglebutton-link-disabled-color
  );
  --amplify-internal-togglebutton-link-disabled-background-color: var(
    --amplify-components-togglebutton-link-disabled-background-color
  );
  --amplify-internal-togglebutton-disabled-color: var(
    --amplify-internal-togglebutton-link-disabled-color
  );
  --amplify-internal-togglebutton-disabled-background-color: var(
    --amplify-internal-togglebutton-link-disabled-background-color
  );
}
.amplify-togglebutton--pressed {
  --amplify-internal-togglebutton-link-color: var(
    --amplify-components-togglebutton-link-pressed-color
  );
  --amplify-internal-togglebutton-link-background-color: var(
    --amplify-components-togglebutton-link-pressed-background-color
  );
  --amplify-internal-togglebutton-link-focus-background-color: var(
    --amplify-components-togglebutton-link-pressed-focus-background-color
  );
  --amplify-internal-togglebutton-link-focus-color: var(
    --amplify-components-togglebutton-link-pressed-focus-color
  );
  --amplify-internal-togglebutton-link-hover-background-color: var(
    --amplify-components-togglebutton-link-pressed-hover-background-color
  );
  --amplify-internal-togglebutton-link-hover-color: var(
    --amplify-components-togglebutton-link-pressed-hover-color
  );
  --amplify-internal-togglebutton-link-disabled-color: var(
    --amplify-components-togglebutton-link-pressed-color
  );
}

.amplify-togglebuttongroup {
  align-items: var(--amplify-components-togglebuttongroup-align-items);
  align-content: var(--amplify-components-togglebuttongroup-align-content);
  justify-content: var(--amplify-components-togglebuttongroup-justify-content);
  gap: 0;
}

.amplify-togglebuttongroup .amplify-togglebutton:focus, .amplify-togglebuttongroup .amplify-togglebutton.amplify-togglebutton--pressed {
  z-index: 2;
}
.amplify-togglebuttongroup .amplify-togglebutton:not(:first-of-type) {
  margin-inline-start: calc(-1 * var(--amplify-components-button-border-width));
  border-start-start-radius: 0;
  border-end-start-radius: 0;
}
@supports not (border-start-start-radius: 0) {
  .amplify-togglebuttongroup .amplify-togglebutton:not(:first-of-type) {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
  }
}
.amplify-togglebuttongroup .amplify-togglebutton:not(:last-of-type) {
  border-start-end-radius: 0;
  border-end-end-radius: 0;
}
@supports not (border-end-end-radius: 0) {
  .amplify-togglebuttongroup .amplify-togglebutton:not(:last-of-type) {
    border-bottom-right-radius: 0;
    border-top-right-radius: 0;
  }
}

.amplify-fileuploader__dropzone {
  background-color: var(--amplify-components-fileuploader-dropzone-background-color);
  border-color: var(--amplify-components-fileuploader-dropzone-border-color);
  border-radius: var(--amplify-components-fileuploader-dropzone-border-radius);
  border-style: var(--amplify-components-fileuploader-dropzone-border-style);
  border-width: var(--amplify-components-fileuploader-dropzone-border-width);
  text-align: var(--amplify-components-fileuploader-dropzone-text-align);
  padding-block: var(--amplify-components-fileuploader-dropzone-padding-block);
  padding-inline: var(--amplify-components-fileuploader-dropzone-padding-inline);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--amplify-components-fileuploader-dropzone-gap);
}
.amplify-fileuploader__dropzone--small {
  flex-direction: row;
  justify-content: center;
}
.amplify-fileuploader__dropzone--active {
  border-color: var(--amplify-components-fileuploader-dropzone-active-border-color);
  border-width: var(--amplify-components-fileuploader-dropzone-active-border-width);
  background-color: var(--amplify-components-fileuploader-dropzone-active-background-color);
}
.amplify-fileuploader__dropzone__icon {
  font-size: var(--amplify-components-fileuploader-dropzone-icon-font-size);
  color: var(--amplify-components-fileuploader-dropzone-icon-color);
}
.amplify-fileuploader__dropzone__text {
  color: var(--amplify-components-fileuploader-dropzone-text-color);
  font-size: var(--amplify-components-fileuploader-dropzone-text-font-size);
  font-weight: var(--amplify-components-fileuploader-dropzone-text-font-weight);
}
.amplify-fileuploader__file__list {
  display: flex;
  flex-direction: var(--amplify-components-fileuploader-filelist-flex-direction);
  gap: var(--amplify-components-fileuploader-filelist-gap);
}
.amplify-fileuploader__file {
  position: relative;
  border-width: var(--amplify-components-fileuploader-file-border-width);
  border-style: var(--amplify-components-fileuploader-file-border-style);
  border-color: var(--amplify-components-fileuploader-file-border-color);
  border-radius: var(--amplify-components-fileuploader-file-border-radius);
  display: flex;
  flex-direction: column;
  padding-inline: var(--amplify-components-fileuploader-file-padding-inline);
  padding-block: var(--amplify-components-fileuploader-file-padding-block);
  align-items: var(--amplify-components-fileuploader-file-align-items);
}
.amplify-fileuploader__file__wrapper {
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--amplify-components-fileuploader-file-gap);
}
.amplify-fileuploader__file__name {
  text-overflow: ellipsis;
  overflow: hidden;
  font-weight: var(--amplify-components-fileuploader-file-name-font-weight);
  font-size: var(--amplify-components-fileuploader-file-name-font-size);
  color: var(--amplify-components-fileuploader-file-name-color);
}
.amplify-fileuploader__file__size {
  font-weight: var(--amplify-components-fileuploader-file-size-font-weight);
  font-size: var(--amplify-components-fileuploader-file-size-font-size);
  color: var(--amplify-components-fileuploader-file-size-color);
}
.amplify-fileuploader__file__main {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
}
.amplify-fileuploader__file__image {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--amplify-components-fileuploader-file-image-width);
  height: var(--amplify-components-fileuploader-file-image-height);
  background-color: var(--amplify-components-fileuploader-file-image-background-color);
  border-radius: var(--amplify-components-fileuploader-file-image-border-radius);
  color: var(--amplify-components-fileuploader-file-image-color);
}
.amplify-fileuploader__file__image img {
  max-height: 100%;
}
.amplify-fileuploader__file__status--error {
  color: var(--amplify-colors-font-error);
  font-size: var(--amplify-components-fileuploader-file-size-font-size);
}
.amplify-fileuploader__file__status--success {
  color: var(--amplify-colors-font-success);
}
.amplify-fileuploader__loader {
  stroke-linecap: var(--amplify-components-fileuploader-loader-stroke-linecap);
  stroke: var(--amplify-components-fileuploader-loader-stroke-empty);
  stroke-width: var(--amplify-components-fileuploader-loader-stroke-width);
  height: var(--amplify-components-fileuploader-loader-stroke-width);
  --amplify-components-loader-linear-stroke-filled: var(
    --amplify-components-fileuploader-loader-stroke-filled
  );
  overflow: hidden;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
}
.amplify-fileuploader__previewer {
  display: flex;
  flex-direction: column;
  max-width: var(--amplify-components-fileuploader-previewer-max-width);
  max-height: var(--amplify-components-fileuploader-previewer-max-height);
  overflow: auto;
  gap: var(--amplify-components-fileuploader-previewer-body-gap);
  padding-inline: var(--amplify-components-fileuploader-previewer-body-padding-inline);
  padding-block: var(--amplify-components-fileuploader-previewer-body-padding-block);
  background-color: var(--amplify-components-fileuploader-previewer-background-color);
  border-width: var(--amplify-components-fileuploader-previewer-border-width);
  border-style: var(--amplify-components-fileuploader-previewer-border-style);
  border-color: var(--amplify-components-fileuploader-previewer-border-color);
  border-radius: var(--amplify-components-fileuploader-previewer-border-radius);
}
.amplify-fileuploader__previewer__text {
  font-weight: var(--amplify-components-fileuploader-previewer-text-font-weight);
  font-size: var(--amplify-components-fileuploader-previewer-text-font-size);
  color: var(--amplify-components-fileuploader-previewer-text-color);
}
.amplify-fileuploader__previewer__footer {
  display: flex;
  flex-direction: row;
  justify-content: var(--amplify-components-fileuploader-previewer-footer-justify-content);
}
.amplify-fileuploader__previewer__actions {
  display: flex;
  flex-direction: row;
  gap: var(--amplify-space-small);
}

.amplify-inappmessaging-backdrop {
  background-color: var(--amplify-colors-overlay-50);
  inset: 0;
  position: fixed;
  z-index: 1000;
}

.amplify-inappmessaging-backdrop-content-container {
  align-items: center;
  inset: 0;
  justify-content: center;
  pointer-events: none;
  position: fixed;
  z-index: 1001;
}

.amplify-inappmessaging-backdrop-content {
  pointer-events: auto;
}

.amplify-inappmessaging-bannermessage {
  box-shadow: var(--amplify-shadows-medium);
  height: var(--amplify-components-inappmessaging-banner-height);
  margin: var(--amplify-space-small);
  max-width: 50%;
  position: fixed;
  width: var(--amplify-components-inappmessaging-banner-width);
}
.amplify-inappmessaging-bannermessage--top {
  top: 0;
}
.amplify-inappmessaging-bannermessage--middle {
  bottom: 0;
  margin: auto var(--amplify-space-small);
  top: 0;
}
.amplify-inappmessaging-bannermessage--bottom {
  bottom: 0;
}
.amplify-inappmessaging-bannermessage--left {
  left: 0;
}
.amplify-inappmessaging-bannermessage--center {
  left: 0;
  margin: var(--amplify-space-small) auto;
  right: 0;
}
.amplify-inappmessaging-bannermessage--right {
  right: 0;
}
.amplify-inappmessaging-bannermessage--center-middle {
  inset: 0;
  margin: auto;
}
.amplify-inappmessaging-bannermessage--full-width {
  max-width: initial;
  width: calc(100% - 2 * var(--amplify-space-small));
}

.amplify-inappmessaging-fullscreenmessage {
  height: var(--amplify-components-inappmessaging-dialog-height);
  min-height: var(--amplify-components-inappmessaging-dialog-min-height);
  min-width: var(--amplify-components-inappmessaging-dialog-min-width);
  width: var(--amplify-components-inappmessaging-dialog-width);
}
.amplify-inappmessaging-fullscreenmessage--fullscreen {
  height: auto;
  inset: 0;
  position: fixed;
  width: auto;
  z-index: 1000;
}

.amplify-inappmessaging-messagelayout {
  background-color: var(--amplify-colors-background-primary);
  flex-direction: column;
  flex-grow: 1;
  gap: var(--amplify-space-xxxs);
  max-width: 100%;
  padding: var(--amplify-space-medium);
}
.amplify-inappmessaging-messagelayout__button {
  border-width: 0;
  width: 100%;
}
.amplify-inappmessaging-messagelayout__button, .amplify-inappmessaging-messagelayout__button:active, .amplify-inappmessaging-messagelayout__button:visited, .amplify-inappmessaging-messagelayout__button:hover, .amplify-inappmessaging-messagelayout__button:focus {
  background-color: var(--amplify-components-inappmessaging-button-background-color);
  border-radius: var(--amplify-components-inappmessaging-button-border-radius);
  color: var(--amplify-components-inappmessaging-button-color);
}
.amplify-inappmessaging-messagelayout__button--dark:active, .amplify-inappmessaging-messagelayout__button--dark:visited, .amplify-inappmessaging-messagelayout__button--light:active, .amplify-inappmessaging-messagelayout__button--light:visited {
  filter: brightness(100%);
}
.amplify-inappmessaging-messagelayout__button--dark:hover, .amplify-inappmessaging-messagelayout__button--dark:focus {
  filter: brightness(120%);
}
.amplify-inappmessaging-messagelayout__button--light:hover, .amplify-inappmessaging-messagelayout__button--light:focus {
  filter: brightness(80%);
}
.amplify-inappmessaging-messagelayout__close-button {
  color: var(--amplify-colors-neutral-80);
}
.amplify-inappmessaging-messagelayout__close-button:active, .amplify-inappmessaging-messagelayout__close-button:visited {
  color: var(--amplify-colors-neutral-80);
}
.amplify-inappmessaging-messagelayout__close-button:hover, .amplify-inappmessaging-messagelayout__close-button:focus {
  color: var(--amplify-colors-neutral-100);
}
.amplify-inappmessaging-messagelayout__content {
  flex-grow: 1;
  overflow: hidden;
}
.amplify-inappmessaging-messagelayout__content--horizontal {
  flex-direction: row;
}
.amplify-inappmessaging-messagelayout__content--vertical {
  flex-direction: column;
  justify-content: center;
}
.amplify-inappmessaging-messagelayout__header {
  flex-shrink: 0;
  font-size: var(--amplify-components-inappmessaging-header-font-size);
  font-weight: var(--amplify-components-inappmessaging-header-font-weight);
}
.amplify-inappmessaging-messagelayout__image-container {
  align-items: center;
  display: flex;
  justify-content: center;
  position: relative;
}
.amplify-inappmessaging-messagelayout__image-container img {
  max-height: 100%;
  max-width: 100%;
  -o-object-fit: contain;
     object-fit: contain;
  position: absolute;
}
.amplify-inappmessaging-messagelayout__image-container--horizontal {
  max-width: 15%;
  min-width: 15%;
}
.amplify-inappmessaging-messagelayout__image-container--vertical {
  max-height: 40%;
  min-height: 40%;
}
.amplify-inappmessaging-messagelayout__text-container {
  flex-direction: column;
  overflow-y: auto;
  gap: var(--amplify-space-xxxs);
}
.amplify-inappmessaging-messagelayout__text-container--horizontal {
  flex-grow: 1;
}
.amplify-inappmessaging-messagelayout__text-container--vertical {
  flex-grow: 0;
}

.amplify-inappmessaging-modalmessage {
  align-items: center;
  height: initial;
  inset: 0;
  justify-content: center;
  pointer-events: none;
  position: fixed;
  width: initial;
  z-index: 1000;
}
.amplify-inappmessaging-modalmessage__dialog {
  box-shadow: var(--amplify-shadows-medium);
  height: var(--amplify-components-inappmessaging-dialog-height);
  min-height: var(--amplify-components-inappmessaging-dialog-min-height);
  min-width: var(--amplify-components-inappmessaging-dialog-min-width);
  pointer-events: auto;
  width: var(--amplify-components-inappmessaging-dialog-width);
}
.amplify-inappmessaging-modalmessage__dialog--full-width {
  width: 100%;
  margin: var(--amplify-space-small);
}

.amplify-storagemanager__dropzone {
  background-color: var(--amplify-components-storagemanager-dropzone-background-color);
  border-color: var(--amplify-components-storagemanager-dropzone-border-color);
  border-radius: var(--amplify-components-storagemanager-dropzone-border-radius);
  border-style: var(--amplify-components-storagemanager-dropzone-border-style);
  border-width: var(--amplify-components-storagemanager-dropzone-border-width);
  text-align: var(--amplify-components-storagemanager-dropzone-text-align);
  padding-block: var(--amplify-components-storagemanager-dropzone-padding-block);
  padding-inline: var(--amplify-components-storagemanager-dropzone-padding-inline);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--amplify-components-storagemanager-dropzone-gap);
}
.amplify-storagemanager__dropzone--small {
  flex-direction: row;
  justify-content: center;
}
.amplify-storagemanager__dropzone--active {
  border-color: var(--amplify-components-storagemanager-dropzone-active-border-color);
  border-width: var(--amplify-components-storagemanager-dropzone-active-border-width);
  background-color: var(--amplify-components-storagemanager-dropzone-active-background-color);
}
.amplify-storagemanager__dropzone__icon {
  font-size: var(--amplify-components-storagemanager-dropzone-icon-font-size);
  color: var(--amplify-components-storagemanager-dropzone-icon-color);
}
.amplify-storagemanager__dropzone__text {
  color: var(--amplify-components-storagemanager-dropzone-text-color);
  font-size: var(--amplify-components-storagemanager-dropzone-text-font-size);
  font-weight: var(--amplify-components-storagemanager-dropzone-text-font-weight);
}
.amplify-storagemanager__file__list {
  display: flex;
  flex-direction: var(--amplify-components-storagemanager-filelist-flex-direction);
  gap: var(--amplify-components-storagemanager-filelist-gap);
}
.amplify-storagemanager__file {
  position: relative;
  border-width: var(--amplify-components-storagemanager-file-border-width);
  border-style: var(--amplify-components-storagemanager-file-border-style);
  border-color: var(--amplify-components-storagemanager-file-border-color);
  border-radius: var(--amplify-components-storagemanager-file-border-radius);
  display: flex;
  flex-direction: column;
  padding-inline: var(--amplify-components-storagemanager-file-padding-inline);
  padding-block: var(--amplify-components-storagemanager-file-padding-block);
  align-items: var(--amplify-components-storagemanager-file-align-items);
}
.amplify-storagemanager__file__wrapper {
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--amplify-components-storagemanager-file-gap);
}
.amplify-storagemanager__file__name {
  text-overflow: ellipsis;
  overflow: hidden;
  font-weight: var(--amplify-components-storagemanager-file-name-font-weight);
  font-size: var(--amplify-components-storagemanager-file-name-font-size);
  color: var(--amplify-components-storagemanager-file-name-color);
}
.amplify-storagemanager__file__size {
  font-weight: var(--amplify-components-storagemanager-file-size-font-weight);
  font-size: var(--amplify-components-storagemanager-file-size-font-size);
  color: var(--amplify-components-storagemanager-file-size-color);
}
.amplify-storagemanager__file__main {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
}
.amplify-storagemanager__file__image {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--amplify-components-storagemanager-file-image-width);
  height: var(--amplify-components-storagemanager-file-image-height);
  background-color: var(--amplify-components-storagemanager-file-image-background-color);
  border-radius: var(--amplify-components-storagemanager-file-image-border-radius);
  color: var(--amplify-components-storagemanager-file-image-color);
}
.amplify-storagemanager__file__image img {
  max-height: 100%;
}
.amplify-storagemanager__file__status--error {
  color: var(--amplify-colors-font-error);
  font-size: var(--amplify-components-storagemanager-file-size-font-size);
}
.amplify-storagemanager__file__status--success {
  color: var(--amplify-colors-font-success);
}
.amplify-storagemanager__loader {
  stroke-linecap: var(--amplify-components-storagemanager-loader-stroke-linecap);
  stroke: var(--amplify-components-storagemanager-loader-stroke-empty);
  stroke-width: var(--amplify-components-storagemanager-loader-stroke-width);
  height: var(--amplify-components-storagemanager-loader-stroke-width);
  --amplify-components-loader-linear-stroke-filled: var(
    --amplify-components-storagemanager-loader-stroke-filled
  );
  overflow: hidden;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
}
.amplify-storagemanager__previewer {
  display: flex;
  flex-direction: column;
  max-width: var(--amplify-components-storagemanager-previewer-max-width);
  max-height: var(--amplify-components-storagemanager-previewer-max-height);
  overflow: auto;
  gap: var(--amplify-components-storagemanager-previewer-body-gap);
  padding-inline: var(--amplify-components-storagemanager-previewer-body-padding-inline);
  padding-block: var(--amplify-components-storagemanager-previewer-body-padding-block);
  background-color: var(--amplify-components-storagemanager-previewer-background-color);
  border-width: var(--amplify-components-storagemanager-previewer-border-width);
  border-style: var(--amplify-components-storagemanager-previewer-border-style);
  border-color: var(--amplify-components-storagemanager-previewer-border-color);
  border-radius: var(--amplify-components-storagemanager-previewer-border-radius);
}
.amplify-storagemanager__previewer__text {
  font-weight: var(--amplify-components-storagemanager-previewer-text-font-weight);
  font-size: var(--amplify-components-storagemanager-previewer-text-font-size);
  color: var(--amplify-components-storagemanager-previewer-text-color);
}
.amplify-storagemanager__previewer__footer {
  display: flex;
  flex-direction: row;
  justify-content: var(--amplify-components-storagemanager-previewer-footer-justify-content);
}
.amplify-storagemanager__previewer__actions {
  display: flex;
  flex-direction: row;
  gap: var(--amplify-space-small);
}

.amplify-storage-browser {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  height: 100%;
  position: relative;
  padding: var(--amplify-space-small);
  gap: var(--amplify-space-small);
  /* Error boundary */
}
.amplify-storage-browser__error {
  background-color: var(--amplify-colors-background-error);
  color: var(--amplify-colors-font-error);
  padding: var(--amplify-space-medium);
}
.amplify-storage-browser__navigation, .amplify-storage-browser__exit {
  align-self: flex-start;
}
.amplify-storage-browser__title {
  font-weight: var(--amplify-font-weights-bold);
  font-size: var(--amplify-font-sizes-large);
}
.amplify-storage-browser__controls, .amplify-storage-browser__summary, .amplify-storage-browser__footer {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: var(--amplify-space-medium);
}
.amplify-storage-browser__footer {
  justify-content: flex-end;
}
.amplify-storage-browser__search {
  display: flex;
  flex-direction: row;
  flex: 1;
  gap: var(--amplify-space-small);
}
.amplify-storage-browser__drop-zone {
  flex: 1;
  overflow: hidden;
  position: relative;
  width: 100%;
  display: block;
}
.amplify-storage-browser__data-table {
  overflow: auto;
  position: relative;
  border-width: var(--amplify-border-widths-small);
  border-style: solid;
  border-color: var(--amplify-colors-border-primary);
  border-radius: var(--amplify-radii-small);
  width: 100%;
  height: 100%;
  display: block;
}
.amplify-storage-browser__table {
  width: 100%;
  position: relative;
}
.amplify-storage-browser__table-head {
  position: sticky;
  top: 0;
  background: var(--amplify-colors-background-primary);
  box-shadow: var(--amplify-shadows-small);
  z-index: 2;
}
.amplify-storage-browser__table-row_active {
  background-color: var(--amplify-colors-background-info);
}
.amplify-storage-browser__table-header {
  border: none;
  padding: var(--amplify-space-xxxs);
}
.amplify-storage-browser__table-data-cell {
  padding: var(--amplify-space-xxxs);
}
.amplify-storage-browser__table-data-cell:first-child, .amplify-storage-browser__table-data-cell:last-child {
  border-inline-start-width: 0;
  border-inline-end-width: 0;
}
.amplify-storage-browser__table-data-cell-icon {
  vertical-align: middle;
  margin-inline-end: var(--amplify-space-xs);
}
.amplify-storage-browser__table-header--select, .amplify-storage-browser__table-data--select, .amplify-storage-browser__table-header--download, .amplify-storage-browser__table-data--download, .amplify-storage-browser__table-data--cancel {
  text-align: center;
}
.amplify-storage-browser__table-data--size, .amplify-storage-browser__table-header--size {
  text-align: end;
}
.amplify-storage-browser__table-button-data-cell, .amplify-storage-browser__table-date-data-cell, .amplify-storage-browser__table-number-data-cell, .amplify-storage-browser__table-text-data-cell, .amplify-storage-browser__table-sort-header {
  display: flex;
  width: 100%;
  gap: var(--amplify-space-xxs);
  padding: var(--amplify-space-xxs);
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  align-items: center;
  justify-content: flex-start;
}
.amplify-storage-browser__table-button-data-cell-icon--action-progress, .amplify-storage-browser__table-date-data-cell-icon--action-progress, .amplify-storage-browser__table-number-data-cell-icon--action-progress, .amplify-storage-browser__table-text-data-cell-icon--action-progress, .amplify-storage-browser__table-sort-header-icon--action-progress {
  animation-name: amplify-loader-circular;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-duration: var(--amplify-components-loader-animation-duration);
}
.amplify-storage-browser__status {
  display: flex;
  flex-direction: row;
  gap: var(--amplify-space-xs);
  align-items: center;
}
.amplify-storage-browser__status-display {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;
  gap: var(--amplify-space-small);
  flex: 1;
}
.amplify-storage-browser__status-label {
  font-weight: var(--amplify-font-weights-bold);
}
.amplify-storage-browser__status-value {
  color: var(--amplify-colors-font-secondary);
}
.amplify-storage-browser__destination {
  display: flex;
  flex-direction: row;
  gap: var(--amplify-space-xs);
  align-items: center;
}
.amplify-storage-browser__destination-label {
  font-weight: var(--amplify-font-weights-bold);
}
.amplify-storage-browser__message {
  flex: 1;
}
.amplify-storage-browser__buttons {
  justify-content: flex-end;
  display: flex;
  gap: var(--amplify-space-small);
}
.amplify-storage-browser__loader {
  position: absolute;
  stroke-width: var(--amplify-border-widths-large);
  height: var(--amplify-border-widths-large);
  top: 0;
  z-index: 3;
}
.amplify-storage-browser__content-with-preview {
  display: flex;
  height: 100%;
}
.amplify-storage-browser__file-preview {
  overflow: auto;
  flex: 1;
  width: 50%;
  position: sticky;
  top: 10px;
  bottom: 10px;
  height: -moz-fit-content;
  height: fit-content;
  max-height: calc(100svh - 20px);
  padding: var(--amplify-space-medium);
  border: var(--amplify-border-widths-small) solid var(--amplify-colors-border-primary);
  border-radius: var(--amplify-radii-small);
  margin-inline-start: var(--amplify-space-large);
  padding-block-end: var(--amplify-space-large);
}
.amplify-storage-browser__file-preview-header {
  margin-block-end: var(--amplify-space-medium);
  display: flex;
  justify-content: flex-end;
}
.amplify-storage-browser__file-preview-container {
  display: flex;
  flex-direction: column;
  gap: var(--amplify-space-large);
}
.amplify-storage-browser__file-preview-content {
  display: flex;
  flex-direction: column;
  gap: var(--amplify-space-large);
  align-items: center;
}
.amplify-storage-browser__file-preview-section {
  display: flex;
  flex-direction: column;
  min-height: 400px;
  flex: 1;
}
.amplify-storage-browser__file-preview-title {
  margin-block-end: var(--amplify-space-medium);
  color: var(--amplify-colors-font-primary);
  font-size: var(--amplify-font-sizes-large);
  font-weight: var(--amplify-font-weights-semibold);
  flex-shrink: 0;
}
.amplify-storage-browser__file-metadata {
  display: grid;
  gap: var(--amplify-space-small);
  background-color: var(--amplify-colors-background-secondary);
  padding: var(--amplify-space-medium);
  border-radius: var(--amplify-radii-small);
  border: var(--amplify-border-widths-small) solid var(--amplify-colors-border-secondary);
}
.amplify-storage-browser__file-metadata-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-block: var(--amplify-space-xs);
  border-block-end: var(--amplify-border-widths-small) solid var(--amplify-colors-border-secondary);
}
.amplify-storage-browser__file-metadata-item:last-child {
  border-block-end: none;
}
.amplify-storage-browser__file-metadata-label {
  font-weight: var(--amplify-font-weights-medium);
  color: var(--amplify-colors-font-primary);
  margin: 0;
}
.amplify-storage-browser__file-metadata-value {
  color: var(--amplify-colors-font-secondary);
  margin: 0;
  word-break: break-all;
  text-align: end;
  max-width: 60%;
}
.amplify-storage-browser__preview-fallback {
  width: 100%;
  height: 400px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--amplify-space-medium);
  background-color: var(--amplify-colors-background-secondary);
  border: var(--amplify-border-widths-small) dashed var(--amplify-colors-border-secondary);
  border-radius: var(--amplify-radii-small);
  padding: var(--amplify-space-large);
  text-align: center;
}
.amplify-storage-browser__preview-fallback--error {
  color: var(--amplify-colors-font-error);
  background-color: var(--amplify-colors-background-error);
  border-color: var(--amplify-colors-border-error);
}
.amplify-storage-browser__preview-fallback--default {
  color: var(--amplify-colors-font-secondary);
  background-color: var(--amplify-colors-background-secondary);
  border-color: var(--amplify-colors-border-secondary);
}
.amplify-storage-browser__preview-fallback-icon {
  font-size: var(--amplify-font-sizes-xxxxl);
  margin-block-end: var(--amplify-space-xs);
}
.amplify-storage-browser__preview-fallback-title {
  font-weight: var(--amplify-font-weights-bold);
  font-size: var(--amplify-font-sizes-large);
  margin-block-end: var(--amplify-space-xs);
}
.amplify-storage-browser__preview-fallback-description {
  font-size: var(--amplify-font-sizes-small);
  margin-block-end: var(--amplify-space-xs);
}
.amplify-storage-browser__preview-fallback-filename {
  font-size: var(--amplify-font-sizes-xs);
  font-family: var(--amplify-fonts-monospace), monospace;
}
.amplify-storage-browser__preview-fallback-actions {
  display: flex;
  gap: var(--amplify-space-small);
  flex-wrap: wrap;
  justify-content: center;
}
.amplify-storage-browser__preview-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--amplify-space-medium);
  height: 400px;
  width: 100%;
}
.amplify-storage-browser__preview-placeholder-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--amplify-space-small);
  width: 100%;
}
.amplify-storage-browser__preview-placeholder-info {
  color: var(--amplify-colors-font-secondary);
  font-size: var(--amplify-font-sizes-small);
  text-align: center;
}
.amplify-storage-browser__text-container {
  display: flex;
  flex-flow: column nowrap;
  gap: 8px;
  align-items: center;
}
.amplify-storage-browser__text-preview {
  height: 400px;
  width: 100%;
  display: block;
  background-color: var(--amplify-colors-background-secondary);
  border: var(--amplify-border-widths-small) solid var(--amplify-colors-border-secondary);
  border-radius: var(--amplify-radii-small);
  padding: var(--amplify-space-medium);
  font-family: var(--amplify-fonts-monospace), monospace;
  font-size: var(--amplify-font-sizes-small);
  line-height: 1.5;
  overflow-y: auto;
  word-wrap: break-word;
  white-space: pre-wrap;
  word-break: break-word;
}
.amplify-storage-browser__video-container {
  display: flex;
  flex-flow: column nowrap;
  gap: 8px;
  align-items: center;
}
.amplify-storage-browser__video-preview {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 400px;
  border-radius: var(--amplify-radii-small);
  background-color: var(--amplify-colors-background-secondary);
  flex-shrink: 0;
}
.amplify-storage-browser__video-preview video {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  -o-object-fit: contain;
     object-fit: contain;
}
.amplify-storage-browser__image-container {
  display: flex;
  flex-flow: column nowrap;
  gap: 8px;
  align-items: center;
}
.amplify-storage-browser__image-preview {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 400px;
  width: 100%;
  background-color: var(--amplify-colors-background-secondary);
  border-radius: var(--amplify-radii-small);
  flex-shrink: 0;
  flex-flow: column nowrap;
  gap: 8px;
}
.amplify-storage-browser__image-preview img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  -o-object-fit: contain;
     object-fit: contain;
  border-radius: var(--amplify-radii-small);
}
.amplify-storage-browser__download-button {
  display: flex;
  flex-flow: row nowrap;
  gap: 8px;
}
.amplify-storage-browser__download-button_icon {
  animation-delay: 0s;
  animation-direction: normal;
  animation-duration: 1s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  animation-name: spin;
}
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(180deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.amplify-ai-conversation {
  display: flex;
  flex-direction: column;
  height: 100%;
  flex: 1;
}
.amplify-ai-conversation__message {
  --internal-content-bg: ;
  --internal-flex-direction: ;
  --internal-content-padding: ;
  --internal-body-align-items: ;
  display: flex;
  flex-direction: var(--internal-flex-direction);
  gap: var(--amplify-components-ai-conversation-message-gap);
  padding-inline: var(--amplify-components-ai-conversation-message-padding-inline);
  padding-block: var(--amplify-components-ai-conversation-message-padding-block);
}
.amplify-ai-conversation__message__list {
  display: flex;
  flex-direction: column;
}
.amplify-ai-conversation__message__avatar {
  flex-shrink: 0;
}
.amplify-ai-conversation__message__sender {
  display: flex;
  flex-direction: var(--internal-flex-direction);
  align-items: center;
  min-height: var(--amplify-components-avatar-height);
  gap: var(--amplify-components-ai-conversation-message-sender-gap);
}
.amplify-ai-conversation__message__sender__username {
  color: var(--amplify-components-ai-conversation-message-sender-username-color);
  font-size: var(--amplify-components-ai-conversation-message-sender-username-font-size);
  font-weight: var(--amplify-components-ai-conversation-message-sender-username-font-weight);
}
.amplify-ai-conversation__message__sender__timestamp {
  color: var(--amplify-components-ai-conversation-message-sender-timestamp-color);
  font-size: var(--amplify-components-ai-conversation-message-sender-timestamp-font-size);
  font-weight: var(--amplify-components-ai-conversation-message-sender-timestamp-font-weight);
}
.amplify-ai-conversation__message__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: var(--internal-body-align-items);
  gap: var(--amplify-components-ai-conversation-message-body-gap);
}
.amplify-ai-conversation__message__content {
  background-color: var(--internal-content-bg);
  border-radius: var(--amplify-radii-medium);
  padding: var(--internal-content-padding);
  display: flex;
  flex-direction: column;
  gap: var(--amplify-space-small);
}
.amplify-ai-conversation__message__text {
  display: block;
}
.amplify-ai-conversation__message__image {
  max-width: 25%;
}
.amplify-ai-conversation__message__actions {
  display: flex;
  flex-direction: row;
  gap: var(--amplify-components-ai-conversation-message-actions-gap);
}
.amplify-ai-conversation__message--bubble {
  --internal-content-bg: var(--internal-bg-color);
  --internal-content-padding: var(--amplify-space-xxs)
    var(--amplify-space-xs);
  --internal-flex-direction: row-reverse;
  --internal-body-align-items: flex-end;
}
.amplify-ai-conversation__message--user {
  --internal-bg-color: var(
    --amplify-components-ai-conversation-message-user-background-color
  );
}
.amplify-ai-conversation__message--assistant {
  --internal-bg-color: var(
    --amplify-components-ai-conversation-message-assistant-background-color
  );
  --internal-flex-direction: row;
  --internal-body-align-items: flex-start;
}
.amplify-ai-conversation__scrollview {
  flex: 1 0 50%;
}
.amplify-ai-conversation__form {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  padding: var(--amplify-components-ai-conversation-form-padding);
  gap: var(--amplify-components-ai-conversation-form-gap);
  max-height: 100%;
  overflow: hidden;
}
.amplify-ai-conversation__form__dropzone {
  text-align: initial;
  border: none;
  padding: 0;
  display: grid;
  overflow: hidden;
}
.amplify-ai-conversation__form__error {
  padding: 0;
  padding-block-start: var(--amplify-components-ai-conversation-attachment-list-padding-block-start);
  gap: var(--amplify-components-ai-conversation-attachment-gap);
}
.amplify-ai-conversation__attachment {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding-block: var(--amplify-components-ai-conversation-attachment-padding-block);
  padding-inline: var(--amplify-components-ai-conversation-attachment-padding-inline);
  border-width: var(--amplify-components-ai-conversation-attachment-border-width);
  border-style: solid;
  border-color: var(--amplify-components-ai-conversation-attachment-border-color);
  border-radius: var(--amplify-components-ai-conversation-attachment-border-radius);
  gap: var(--amplify-components-ai-conversation-attachment-gap);
  font-size: var(--amplify-components-ai-conversation-attachment-font-size);
}
.amplify-ai-conversation__attachment__list {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: var(--amplify-components-ai-conversation-attachment-list-gap);
  padding: var(--amplify-components-ai-conversation-attachment-list-padding);
  padding-block-start: var(--amplify-components-ai-conversation-attachment-list-padding-block-start);
}
.amplify-ai-conversation__attachment__image {
  width: var(--amplify-components-ai-conversation-attachment-image-width);
  height: var(--amplify-components-ai-conversation-attachment-image-height);
  -o-object-fit: cover;
     object-fit: cover;
}
.amplify-ai-conversation__attachment__name {
  color: var(--amplify-components-ai-conversation-attachment-name-color);
  font-size: var(--amplify-components-ai-conversation-attachment-name-font-size);
  font-weight: var(--amplify-components-ai-conversation-attachment-name-font-weight);
}
.amplify-ai-conversation__attachment__size {
  color: var(--amplify-components-ai-conversation-attachment-size-color);
  font-size: var(--amplify-components-ai-conversation-attachment-size-font-size);
  font-weight: var(--amplify-components-ai-conversation-attachment-size-font-weight);
}
.amplify-ai-conversation__attachment__remove {
  padding: var(--amplify-components-ai-conversation-attachment-remove-padding);
}
.amplify-ai-conversation__prompt {
  font-weight: normal;
}

.amplify-label-start {
  flex-direction: row;
}

.amplify-label-end {
  flex-direction: row-reverse;
}

.amplify-label-top {
  flex-direction: column;
}

.amplify-label-bottom {
  flex-direction: column-reverse;
}

.amplify-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  fill: transparent;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}.login-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background-color: #000;
  background-image: url('/assets/fondopattern-BPQNRX8F.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding: 2rem;
}

.login-card {
  background: white;
  border-radius: 12px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  padding: 3.5rem 2.25rem;
  width: 100%;
  max-width: 550px;
  box-sizing: border-box;
}

.login-header {
  text-align: center;
  margin-bottom: 2rem;
}

.login-logo {
  width: 100%;
  max-width: 320px;
  height: auto;
  display: block;
  margin: 0 auto 1rem;
  filter: brightness(0);
}

.login-subtitle {
  color: var(--text-secondary);
  font-size: 1rem;
  margin: 0;
}

.login-beta-badge {
  display: inline-block;
  background: linear-gradient(135deg, #f59e0b, #ef4444, #a855f7, #3b82f6);
  background-size: 300% 300%;
  animation: loginBetaShimmer 3s ease infinite;
  color: #fff;
  font-size: 0.75rem;
  font-weight: 800;
  padding: 0.25rem 0.65rem;
  border-radius: 20px;
  letter-spacing: 0.1em;
  vertical-align: middle;
  margin-left: 0.3rem;
  text-shadow: 0 1px 2px rgba(0,0,0,0.3);
  box-shadow: 0 0 10px rgba(245, 158, 11, 0.35);
}

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

/* Override Amplify UI styles - Force everything to fit */
.login-card [data-amplify-authenticator] {
  --amplify-colors-brand-primary-10: var(--primary-light);
  --amplify-colors-brand-primary-80: var(--primary-color);
  --amplify-colors-brand-primary-90: var(--primary-dark);
  --amplify-colors-brand-primary-100: var(--primary-dark);
  --amplify-components-fieldcontrol-padding-inline-start: 0.75rem;
  --amplify-components-fieldcontrol-padding-inline-end: 0.75rem;
  --amplify-components-fieldcontrol-border-width: 1px;
  width: 100%;
  max-width: 100%;
}

.login-card [data-amplify-authenticator] * {
  box-sizing: border-box !important;
}

.login-card [data-amplify-authenticator] [data-amplify-router] {
  border: none;
  box-shadow: none;
  background: transparent;
  width: 100%;
  padding: 0;
  margin: 0;
  max-width: 100%;
}

.login-card [data-amplify-authenticator] [data-amplify-form] {
  width: 100%;
  padding: 0 1.25rem;
  margin: 0;
  max-width: 100%;
  box-sizing: border-box;
}

.login-card [data-amplify-authenticator] [data-amplify-field-group] {
  width: 100%;
  margin: 0;
  padding: 0;
  max-width: 100%;
}

.login-card [data-amplify-authenticator] [data-amplify-field] {
  width: 100%;
  margin-bottom: 1rem;
  padding: 0;
  max-width: 100%;
}

.login-card [data-amplify-authenticator] label {
  width: 100%;
  margin-bottom: 0.5rem;
  display: block;
}

.login-card [data-amplify-authenticator] input {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  padding: 0.65rem 0.75rem !important;
  margin: 0 !important;
  border: 1px solid #d1d5db !important;
  box-sizing: border-box !important;
}

/* Remove right border on input when paired with show/hide button */
.login-card [data-amplify-authenticator] [data-amplify-field-group] input {
  border-right: none !important;
  padding-right: 0.75rem !important;
}

.login-card [data-amplify-authenticator] button {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  padding: 0.75rem !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}

.login-card [data-amplify-authenticator] button[type='submit'] {
  background-color: #FF0806 !important;
  font-weight: 600;
  margin-top: 1rem !important;
}

.login-card [data-amplify-authenticator] button[type='submit']:hover {
  background-color: #cc0605 !important;
}

/* Forgot password link */
.login-card [data-amplify-authenticator] button:not([type='submit']) {
  background: none !important;
  color: #888 !important;
  font-size: 0.85rem !important;
  font-weight: 400 !important;
  padding: 0.25rem 0 !important;
  text-decoration: underline !important;
  text-underline-offset: 2px !important;
  box-shadow: none !important;
  border: none !important;
  width: auto !important;
  cursor: pointer !important;
}

.login-card [data-amplify-authenticator] button:not([type='submit']):hover {
  color: #FF0806 !important;
  background: none !important;
}

/* Show/hide password toggle button */
.login-card [data-amplify-authenticator] [data-amplify-field-group],
.login-card [data-amplify-authenticator] [class*="field-group__outer"] {
  display: flex !important;
  align-items: stretch !important;
}

.login-card [data-amplify-authenticator] [data-amplify-field-group] button,
.login-card [data-amplify-authenticator] [class*="amplify-field-group__icon"],
.login-card [data-amplify-authenticator] [class*="field-group"] button {
  width: auto !important;
  min-width: 2.5rem !important;
  height: auto !important;
  align-self: stretch !important;
  padding: 0 0.75rem !important;
  background: #f3f4f6 !important;
  border: none !important;
  border-left: 1px solid #d1d5db !important;
  color: #555 !important;
  font-size: 1rem !important;
  text-decoration: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
}

.login-card [data-amplify-authenticator] [data-amplify-field-group] button:hover,
.login-card [data-amplify-authenticator] [class*="field-group"] button:hover {
  background: #e5e7eb !important;
  color: #FF0806 !important;
}

/* Error / alert messages */
.login-card [data-amplify-authenticator] [role="alert"],
.login-card [data-amplify-authenticator] [data-amplify-alert],
.login-card [data-amplify-authenticator] .amplify-alert {
  background-color: #fff0f0 !important;
  border: 1px solid #FF0806 !important;
  border-left: 4px solid #FF0806 !important;
  border-radius: 6px !important;
  color: #991b1b !important;
  font-size: 0.875rem !important;
  padding: 0.75rem 1rem !important;
  margin-bottom: 1rem !important;
  box-shadow: 0 1px 4px rgba(255,8,6,0.08) !important;
}

@media (max-width: 500px) {
  .login-card {
    padding: 1.5rem 0.5rem;
  }

  .login-title {
    font-size: 2rem;
  }
}
.dashboard {
  animation: fadeIn 0.3s ease-in;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.dashboard-header {
  margin-bottom: 2rem;
}

.dashboard-header h1 {
  font-size: 2rem;
  color: var(--text-primary);
  margin-bottom: 0.5rem;
}

.dashboard-welcome {
  color: var(--text-secondary);
  font-size: 1rem;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}

.stat-card {
  background: white;
  border-radius: 8px;
  padding: 0.75rem 1rem;
  display: flex;
  align-items: center;
  gap: 0.625rem;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  border-left: 4px solid transparent;
  transition: transform 0.2s, box-shadow 0.2s;
}

.stat-card.stat-blue   { border-left-color: #0ea5e9; }
.stat-card.stat-green  { border-left-color: #22c55e; }
.stat-card.stat-yellow { border-left-color: #f59e0b; }
.stat-card.stat-red    { border-left-color: #ef4444; }
.stat-card.stat-gray   { border-left-color: #64748b; }
.stat-card.stat-purple { border-left-color: #8b5cf6; }
.stat-card.stat-orange { border-left-color: #f97316; }

.stat-icon.stat-blue   { background-color: #0ea5e915; color: #0ea5e9; }
.stat-icon.stat-green  { background-color: #22c55e15; color: #22c55e; }
.stat-icon.stat-yellow { background-color: #f59e0b15; color: #f59e0b; }
.stat-icon.stat-red    { background-color: #ef444415; color: #ef4444; }
.stat-icon.stat-gray   { background-color: #64748b15; color: #64748b; }
.stat-icon.stat-purple { background-color: #8b5cf615; color: #8b5cf6; }
.stat-icon.stat-orange { background-color: #f9731615; color: #f97316; }

.stat-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.stat-icon {
  width: 38px;
  height: 38px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  flex-shrink: 0;
}

.stat-content {
  flex: 1;
}

.stat-value {
  font-size: 1.25rem;
  font-weight: bold;
  color: var(--text-primary);
  margin: 0 0 0.1rem 0;
}

.stat-label {
  color: var(--text-secondary);
  font-size: 0.75rem;
  margin: 0;
  line-height: 1.2;
}

.dashboard-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
}

.dashboard-card {
  background: white;
  border-radius: 8px;
  padding: 1.5rem;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.dashboard-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}

.card-title {
  font-size: 1.25rem;
  color: var(--text-primary);
  margin: 0;
  font-weight: 600;
}

.dashboard-sync-button {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  border: none;
  border-radius: 6px;
  padding: 0.55rem 0.95rem;
  background: var(--primary-color);
  color: #fff;
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.15s, transform 0.15s;
}

.dashboard-sync-button:hover:not(:disabled) {
  opacity: 0.88;
}

.dashboard-sync-button.is-disabled,
.dashboard-sync-button:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.dashboard-manual-sync-box {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
  padding: 1rem;
  background: #f8fafc;
  border: 1px solid var(--border-color);
  border-radius: 8px;
}

.dashboard-manual-sync-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  font-size: 0.92rem;
}

.dashboard-manual-sync-state {
  font-weight: 700;
}

.dashboard-manual-sync-state.idle {
  color: #15803d;
}

.dashboard-manual-sync-state.running {
  color: #b45309;
}

.dashboard-manual-sync-hint {
  color: var(--text-secondary);
  font-size: 0.82rem;
  margin: 0;
}

.dashboard-manual-sync-notice {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  background: #ecfdf5;
  color: #065f46;
  border: 1px solid #a7f3d0;
  border-radius: 8px;
  font-size: 0.84rem;
  font-weight: 600;
  padding: 0.55rem 0.65rem;
}

.dashboard-confirm-backdrop {
  position: fixed;
  inset: 0;
  background: radial-gradient(circle at top, rgba(15, 23, 42, 0.65), rgba(2, 6, 23, 0.85));
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1200;
  padding: 1rem;
}

.dashboard-confirm-modal {
  width: 100%;
  max-width: 560px;
  border-radius: 12px;
  background: linear-gradient(180deg, #0f172a 0%, #111827 100%);
  border: 1px solid rgba(148, 163, 184, 0.3);
  box-shadow: 0 24px 70px rgba(2, 6, 23, 0.5);
  color: #e5e7eb;
  overflow: hidden;
}

.dashboard-confirm-header {
  display: flex;
  gap: 0.8rem;
  align-items: center;
  padding: 1rem 1.15rem;
  border-bottom: 1px solid rgba(148, 163, 184, 0.2);
  background: rgba(15, 23, 42, 0.6);
  position: relative;
  overflow: hidden;
}

.dashboard-confirm-header::after {
  content: '';
  position: absolute;
  left: -35%;
  top: 0;
  width: 30%;
  height: 100%;
  background: linear-gradient(90deg, rgba(56, 189, 248, 0), rgba(56, 189, 248, 0.3), rgba(56, 189, 248, 0));
  animation: dashboardSecureScan 2.4s linear infinite;
}

@keyframes dashboardSecureScan {
  from { left: -35%; }
  to { left: 110%; }
}

.dashboard-confirm-header h3 {
  margin: 0;
  font-size: 1rem;
  color: #f8fafc;
}

.dashboard-confirm-header p {
  margin: 0.2rem 0 0;
  font-size: 0.8rem;
  color: #94a3b8;
}

.dashboard-confirm-icon {
  font-size: 1.6rem;
  color: #38bdf8;
}

.dashboard-confirm-body {
  padding: 1.1rem 1.15rem;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

.dashboard-confirm-body p {
  margin: 0;
  line-height: 1.45;
  color: #cbd5e1;
  font-size: 0.92rem;
}

.dashboard-confirm-queues {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.55rem;
}

.dashboard-confirm-queues div {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border: 1px solid rgba(148, 163, 184, 0.25);
  border-radius: 8px;
  padding: 0.55rem 0.7rem;
  background: rgba(30, 41, 59, 0.55);
  font-size: 0.86rem;
}

.dashboard-confirm-queues strong {
  color: #38bdf8;
  font-size: 0.95rem;
}

.dashboard-confirm-arm {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  font-size: 0.86rem;
  color: #e2e8f0;
}

.dashboard-confirm-arm input {
  margin-top: 0.2rem;
}

.dashboard-confirm-code {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.dashboard-confirm-code span {
  font-size: 0.8rem;
  color: #93c5fd;
}

.dashboard-confirm-code input {
  border: 1px solid rgba(125, 211, 252, 0.35);
  background: rgba(15, 23, 42, 0.7);
  color: #f8fafc;
  border-radius: 6px;
  padding: 0.55rem 0.65rem;
  font-size: 0.9rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.dashboard-confirm-code input:focus {
  outline: none;
  border-color: #38bdf8;
}

.dashboard-confirm-visual-check {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.dashboard-confirm-visual-check span {
  font-size: 0.8rem;
  color: #93c5fd;
}

.dashboard-confirm-visual-options {
  display: flex;
  gap: 0.55rem;
}

.dashboard-visual-option {
  width: 44px;
  height: 44px;
  border-radius: 8px;
  border: 1px solid rgba(125, 211, 252, 0.35);
  background: rgba(15, 23, 42, 0.7);
  color: #e2e8f0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.35rem;
  cursor: pointer;
}

.dashboard-visual-option.selected {
  border-color: #38bdf8;
  color: #38bdf8;
  box-shadow: 0 0 0 2px rgba(56, 189, 248, 0.2);
}

.dashboard-confirm-countdown {
  margin: 0;
  color: #fbbf24;
  font-size: 0.82rem;
  font-weight: 600;
}

.dashboard-confirm-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.65rem;
  padding: 1rem 1.15rem 1.1rem;
  border-top: 1px solid rgba(148, 163, 184, 0.2);
}

.dashboard-btn-ghost,
.dashboard-btn-danger {
  border: none;
  border-radius: 7px;
  padding: 0.5rem 0.9rem;
  font-size: 0.86rem;
  font-weight: 600;
  cursor: pointer;
}

.dashboard-btn-ghost {
  background: rgba(100, 116, 139, 0.25);
  color: #e2e8f0;
}

.dashboard-btn-danger {
  background: #dc2626;
  color: #fff;
}

.dashboard-btn-danger:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.activity-list {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

/* ── Sync info ─────────────────────────────────────────────────────────────── */
.dashboard-sync-loading,
.dashboard-sync-empty {
  color: var(--text-secondary);
  font-size: 0.95rem;
}

.dashboard-sync-error {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: #ef4444;
  font-size: 0.9rem;
}

.dashboard-sync-active-note {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.9rem;
  padding: 0.7rem 0.8rem;
  border-radius: 8px;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  color: #1d4ed8;
  font-size: 0.88rem;
  font-weight: 600;
}

.dashboard-sync-info {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.sync-info-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--border-color);
  padding-bottom: 0.6rem;
  font-size: 0.95rem;
}

.sync-info-row:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.sync-info-label {
  color: var(--text-secondary);
  font-weight: 500;
}

.sync-info-value {
  color: var(--text-primary);
  font-weight: 600;
}

.sync-status-ok {
  color: #22c55e;
}


.activity-item {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}

.activity-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  margin-top: 4px;
  flex-shrink: 0;
}

.activity-content {
  flex: 1;
}

.activity-text {
  color: var(--text-primary);
  margin: 0 0 0.25rem 0;
  font-size: 0.95rem;
}

.activity-time {
  color: var(--text-light);
  font-size: 0.8rem;
}

.quick-actions-group-label {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-secondary);
  margin: 1rem 0 0.5rem 0;
}

.quick-actions-group-label:first-child {
  margin-top: 0;
}

.quick-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
  margin-bottom: 0.25rem;
}

.dashboard-brand-summary {
  margin-top: 1.2rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border-color);
}

.dashboard-brand-summary h3 {
  margin: 0 0 0.55rem;
  font-size: 0.95rem;
  color: var(--text-primary);
}

.dashboard-brand-summary-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.dashboard-brand-chip {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 0.25rem 0.65rem;
  font-size: 0.78rem;
  font-weight: 700;
}

.dashboard-brand-chip.all {
  background: #e5e7eb;
  color: #111827;
}

.dashboard-brand-chip.active {
  background: #dcfce7;
  color: #166534;
}

.dashboard-brand-chip.inactive {
  background: #f3f4f6;
  color: #374151;
}

/* ── Activity Feed ─────────────────────────────────────────────────────────── */
.dashboard-activity-list {
  list-style: none;
  padding: 0;
  margin: 0.5rem 0 0;
  display: flex;
  flex-direction: column;
}

.dashboard-activity-item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--border-color);
}

.dashboard-activity-item:last-child {
  border-bottom: none;
}

.dashboard-activity-dot {
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-top: 0.35rem;
  background: var(--text-secondary);
}

.dashboard-activity-dot.dot-green  { background: #22c55e; }
.dashboard-activity-dot.dot-blue   { background: #3b82f6; }
.dashboard-activity-dot.dot-purple { background: #8b5cf6; }
.dashboard-activity-dot.dot-orange { background: #f97316; }
.dashboard-activity-dot.dot-teal   { background: #14b8a6; }
.dashboard-activity-dot.dot-gray   { background: #6b7280; }
.dashboard-activity-dot.dot-default { background: var(--text-secondary); }

.dashboard-activity-body {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}

.dashboard-activity-desc {
  font-size: 0.875rem;
  color: var(--text-primary);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dashboard-activity-meta {
  font-size: 0.75rem;
  color: var(--text-secondary);
}

.dashboard-activity-view-all {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.75rem;
  font-size: 0.82rem;
  color: var(--accent);
  text-decoration: none;
  font-weight: 500;
}

.dashboard-activity-view-all:hover {
  text-decoration: underline;
}

.dashboard-activity-view-all svg {
  font-size: 0.9rem;
}

.quick-action-btn {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 1.25rem;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  color: var(--text-primary);
  text-decoration: none;
  font-weight: 500;
  transition: all 0.2s;
}

.quick-action-btn:hover {
  background: var(--primary-light);
  color: white;
  border-color: var(--primary-color);
  transform: translateY(-2px);
}

.quick-action-btn svg {
  font-size: 1.5rem;
}

@media (max-width: 768px) {
  .dashboard-grid {
    grid-template-columns: 1fr;
  }

  .stats-grid {
    grid-template-columns: 1fr;
  }

  .dashboard-header h1 {
    font-size: 1.5rem;
  }

  .dashboard-card-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }

  .dashboard-manual-sync-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }
}

/* ── Section titles ────────────────────────────────────────────────────────── */
.dashboard-section-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text-primary);
  margin: 1.75rem 0 0.9rem;
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.dashboard-section-subtitle {
  font-size: 0.8rem;
  font-weight: 400;
  color: var(--text-secondary);
  background: var(--border-color);
  padding: 0.15rem 0.5rem;
  border-radius: 10px;
}

/* ── Health chips ──────────────────────────────────────────────────────────── */
.health-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 0.85rem;
  margin-bottom: 0;
}

.health-sections {
  display: flex;
  flex-direction: column;
  gap: 0.95rem;
  margin-bottom: 1.5rem;
}

.health-section-row {
  background: #f8fafc;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  padding: 0.85rem;
}

.health-category-title {
  margin: 0 0 0.65rem;
  font-size: 0.88rem;
  font-weight: 700;
  color: #1f2937;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}

.health-chip {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  background: white;
  border-radius: 8px;
  padding: 0.9rem 1rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
  border-left: 3px solid transparent;
}

.health-chip-ok    { border-left-color: #22c55e; }
.health-chip-warn  { border-left-color: #f59e0b; }
.health-chip-error { border-left-color: #ef4444; }

.health-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

.health-dot-ok    { background: #22c55e; }
.health-dot-warn  { background: #f59e0b; }
.health-dot-error { background: #ef4444; }

.health-chip-content {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}

.health-chip-label {
  font-size: 0.78rem;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.health-chip-value {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text-primary);
}

/* ── Schedule row (inside Detalle card) ────────────────────────────────────── */
.dashboard-schedule-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.7rem 1rem;
  background: #f8fafc;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  margin-bottom: 1rem;
}

.dashboard-schedule-info {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  overflow: hidden;
}

.dashboard-schedule-text {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  overflow: hidden;
}

.dashboard-schedule-icon {
  font-size: 1rem;
  color: var(--primary-color);
  flex-shrink: 0;
}

.dashboard-schedule-label {
  font-weight: 500;
  color: var(--text-primary);
  font-size: 0.88rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dashboard-schedule-badge {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  border-radius: 999px;
  padding: 0.1rem 0.5rem;
  width: fit-content;
}

.dashboard-schedule-badge.enabled {
  background: #dcfce7;
  color: #166534;
}

.dashboard-schedule-badge.disabled {
  background: #f3f4f6;
  color: #6b7280;
}

.dashboard-schedule-btn {
  border: 1px solid var(--border-color);
  background: #fff;
  color: var(--text-primary);
  border-radius: 6px;
  padding: 0.35rem 0.75rem;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s, border-color 0.15s;
}

.dashboard-schedule-btn:hover {
  background: var(--bg-secondary);
  border-color: var(--primary-color);
  color: var(--primary-color);
}

.dashboard-schedule-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

/* ── Schedule modal ─────────────────────────────────────────────────────────── */
.dashboard-schedule-modal {
  width: 100%;
  max-width: 440px;
  border-radius: 14px;
  background: #fff;
  border: 1px solid #e2e8f0;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.18);
  overflow: hidden;
  position: relative;
}

.dashboard-schedule-modal-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid #e2e8f0;
  background: #f8fafc;
}

.dashboard-schedule-modal-header h3 {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-primary);
}

.dashboard-schedule-modal-header p {
  margin: 0.15rem 0 0;
  font-size: 0.78rem;
  color: var(--text-secondary);
}

.dashboard-schedule-modal-icon {
  font-size: 1.5rem;
  color: var(--primary-color);
  flex-shrink: 0;
}

.dashboard-schedule-modal-body {
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.schedule-field-group {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.schedule-field-label {
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #64748b;
}

.schedule-time-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.schedule-select {
  border: 1px solid #e2e8f0;
  border-radius: 7px;
  padding: 0.45rem 0.6rem;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text-primary);
  background: #f8fafc;
  cursor: pointer;
  appearance: none;
  text-align: center;
  min-width: 64px;
}

.schedule-select:focus {
  outline: none;
  border-color: var(--primary-color);
}

.schedule-time-sep {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--text-primary);
}

.schedule-time-hint {
  font-size: 0.82rem;
  color: var(--text-secondary);
  margin-left: 0.25rem;
}

.schedule-recurrence-options {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.schedule-radio-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9rem;
  color: var(--text-primary);
  cursor: pointer;
}

.schedule-days-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.35rem;
}

.schedule-day-btn {
  border: 1px solid #e2e8f0;
  background: #f8fafc;
  border-radius: 6px;
  padding: 0.3rem 0.6rem;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-secondary);
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}

.schedule-day-btn.selected {
  background: var(--primary-color);
  border-color: var(--primary-color);
  color: #fff;
}

.schedule-day-btn:not(.selected):hover {
  border-color: var(--primary-color);
  color: var(--primary-color);
}

.dashboard-schedule-modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 0.65rem;
  padding: 1rem 1.25rem;
  border-top: 1px solid #e2e8f0;
  background: #f8fafc;
}

.schedule-btn-cancel {
  border: 1px solid #e2e8f0;
  background: #fff;
  color: var(--text-secondary);
  border-radius: 7px;
  padding: 0.5rem 0.9rem;
  font-size: 0.86rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.12s;
}

.schedule-btn-cancel:hover:not(:disabled) {
  background: #f1f5f9;
}

.schedule-btn-save {
  border: none;
  background: var(--primary-color);
  color: #fff;
  border-radius: 7px;
  padding: 0.5rem 1rem;
  font-size: 0.86rem;
  font-weight: 700;
  cursor: pointer;
  transition: opacity 0.12s;
}

.schedule-btn-save:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

/* ── Schedule confirm overlay (dark panel inside the schedule modal) ─────────── */
.schedule-confirm-overlay {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at top, rgba(15, 23, 42, 0.72), rgba(2, 6, 23, 0.88));
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  z-index: 10;
  padding: 1rem;
}

.schedule-confirm-panel {
  width: 100%;
  border-radius: 12px;
  background: linear-gradient(180deg, #0f172a 0%, #111827 100%);
  border: 1px solid rgba(148, 163, 184, 0.3);
  box-shadow: 0 16px 48px rgba(2, 6, 23, 0.5);
  color: #e5e7eb;
  overflow: hidden;
}

/* ── Schedule enable toggle ─────────────────────────────────────────────────── */
.schedule-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 1rem;
  border-bottom: 1px solid #f1f5f9;
}

.schedule-toggle-switch {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
}

.schedule-toggle-switch input {
  display: none;
}

.schedule-toggle-track {
  position: relative;
  width: 40px;
  height: 22px;
  border-radius: 999px;
  background: #cbd5e1;
  transition: background 0.2s;
  flex-shrink: 0;
}

.schedule-toggle-track::after {
  content: '';
  position: absolute;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  top: 3px;
  left: 3px;
  transition: left 0.2s;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

.schedule-toggle-switch input:checked + .schedule-toggle-track {
  background: #22c55e;
}

.schedule-toggle-switch input:checked + .schedule-toggle-track::after {
  left: 21px;
}

.schedule-toggle-label {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text-primary);
  min-width: 46px;
}

/* ── Schedule hour chips ────────────────────────────────────────────────────── */
.schedule-hours-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 0.5rem;
}

.schedule-hour-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  background: #e0f2fe;
  color: #0369a1;
  border-radius: 6px;
  padding: 0.3rem 0.55rem;
  font-size: 0.88rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.schedule-hour-chip-remove {
  background: none;
  border: none;
  color: #0369a1;
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
  padding: 0;
  opacity: 0.7;
  transition: opacity 0.1s;
}

.schedule-hour-chip-remove:hover {
  opacity: 1;
}

.schedule-add-hour-row {
  display: flex;
  align-items: center;
}

.schedule-add-select {
  font-size: 0.85rem !important;
  font-weight: 600 !important;
  color: var(--primary-color) !important;
  min-width: auto !important;
  padding: 0.35rem 0.5rem !important;
  border-color: var(--primary-color) !important;
  background: #fff7f7 !important;
  cursor: pointer;
}
.profile {
  animation: fadeIn 0.3s ease-in;
  max-width: 920px;
}

/* ── Theme picker ── */
.profile-themes {
  background: #fff;
  border-radius: 14px;
  padding: 1.25rem 1.75rem;
  border: 1px solid #e2e8f0;
  box-shadow: 0 2px 12px rgba(15, 23, 42, 0.06);
  margin-bottom: 1.25rem;
}

.profile-themes-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.78rem;
  font-weight: 700;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 1rem;
}

.profile-themes-icon {
  font-size: 1rem;
  color: var(--primary-color);
}

.profile-themes-options {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

.profile-theme-option {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  background: none;
  border: 2px solid #e2e8f0;
  border-radius: 10px;
  padding: 0.75rem;
  cursor: pointer;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.profile-theme-option:hover {
  border-color: var(--primary-color);
}

.profile-theme-option--active {
  border-color: var(--primary-color);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary-color) 18%, transparent);
}

.profile-theme-name {
  font-size: 0.8rem;
  font-weight: 600;
  color: #374151;
}

.profile-theme-option--active .profile-theme-name {
  color: var(--primary-color);
}

.profile-theme-active-dot {
  position: absolute;
  top: 0.4rem;
  right: 0.4rem;
  width: 8px;
  height: 8px;
  background: var(--primary-color);
  border-radius: 50%;
}

/* Mini preview */
.profile-theme-preview {
  width: 120px;
  height: 72px;
  border-radius: 6px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(0,0,0,0.08);
}

.profile-theme-preview .ptp-bar {
  height: 12px;
  flex-shrink: 0;
}

.profile-theme-preview .ptp-sidebar {
  position: absolute;
  top: 12px;
  left: 0;
  width: 28px;
  bottom: 0;
}

.profile-theme-preview .ptp-content {
  display: flex;
  flex: 1;
  gap: 4px;
  padding: 5px 5px 5px 34px;
  align-items: stretch;
}

.profile-theme-preview {
  position: relative;
}

.profile-theme-preview .ptp-card {
  flex: 1;
  border-radius: 3px;
}

/* Default theme preview colors */
.profile-theme-preview--default .ptp-bar      { background: #000; }
.profile-theme-preview--default .ptp-sidebar  { background: #fff; border-right: 1px solid #e2e8f0; }
.profile-theme-preview--default               { background: #f8f9fa; }
.profile-theme-preview--default .ptp-card     { background: #fff; border: 1px solid #e2e8f0; }

/* Cyberpunk theme preview colors */
.profile-theme-preview--cyberpunk             { background: #070b0f; }
.profile-theme-preview--cyberpunk .ptp-bar    { background: #04080f; border-bottom: 1px solid rgba(0,255,157,0.3); }
.profile-theme-preview--cyberpunk .ptp-sidebar{ background: #0a0e18; border-right: 1px solid rgba(0,255,157,0.2); }
.profile-theme-preview--cyberpunk .ptp-card   { background: #0d1520; border: 1px solid rgba(0,255,157,0.2); }

/* J.A.R.V.I.S. theme preview colors */
.profile-theme-preview--jarvis             { background: #010c1a; }
.profile-theme-preview--jarvis .ptp-bar    { background: #000d1f; border-bottom: 1px solid rgba(0,180,255,0.4); }
.profile-theme-preview--jarvis .ptp-sidebar{ background: #02101f; border-right: 1px solid rgba(0,180,255,0.25); }
.profile-theme-preview--jarvis .ptp-card   { background: #051828; border: 1px solid rgba(0,180,255,0.3); box-shadow: 0 0 6px rgba(0,180,255,0.15) inset; }

/* Parchment theme preview colors */
.profile-theme-preview--parchment             { background: #f4e4c1; }
.profile-theme-preview--parchment .ptp-bar    { background: #e8d4a8; border-bottom: 2px solid #c9a961; }
.profile-theme-preview--parchment .ptp-sidebar{ background: #ebe0c8; border-right: 1px solid #c9a961; }
.profile-theme-preview--parchment .ptp-card   { background: #faf6ed; border: 1px solid #d4af37; box-shadow: 0 2px 4px rgba(62,39,35,0.1); }

/* Rock & Roll theme preview colors */
.profile-theme-preview--rock             { background: #0a0a0a; }
.profile-theme-preview--rock .ptp-bar    { background: #000000; border-bottom: 2px solid #dc143c; }
.profile-theme-preview--rock .ptp-sidebar{ background: #1a1a1a; border-right: 2px solid rgba(220,20,60,0.3); }
.profile-theme-preview--rock .ptp-card   { background: #1a1a1a; border: 2px solid rgba(220,20,60,0.3); }

/* Pop World theme preview colors */
.profile-theme-preview--pop             { background: linear-gradient(135deg, #fff0f5 0%, #fce7f3 50%, #e0f2fe 100%); }
.profile-theme-preview--pop .ptp-bar    { background: linear-gradient(90deg, #ff1493 0%, #c026d3 50%, #06b6d4 100%); }
.profile-theme-preview--pop .ptp-sidebar{ background: #fce7f3; border-right: 2px solid rgba(255,20,147,0.3); }
.profile-theme-preview--pop .ptp-card   { background: #ffffff; border: 2px solid rgba(255,20,147,0.3); box-shadow: 0 2px 8px rgba(255,20,147,0.15); }

/* All White theme preview colors */
.profile-theme-preview--allwhite             { background: #ffffff; }
.profile-theme-preview--allwhite .ptp-bar    { background: #fafafa; border-bottom: 1px solid #e5e7eb; }
.profile-theme-preview--allwhite .ptp-sidebar{ background: #ffffff; border-right: 1px solid #e5e7eb; }
.profile-theme-preview--allwhite .ptp-card   { background: #ffffff; border: 1px solid #e5e7eb; box-shadow: 0 1px 3px rgba(0,0,0,0.05); }

/* Elegant theme preview colors */
.profile-theme-preview--golden             { background: linear-gradient(135deg, #0f1117, #1a1d29); }
.profile-theme-preview--golden .ptp-bar    { background: linear-gradient(90deg, rgba(26,29,41,0.95), rgba(15,17,23,0.98)); border-bottom: 1px solid rgba(212,175,55,0.4); }
.profile-theme-preview--golden .ptp-sidebar{ background: rgba(26,29,41,0.9); border-right: 1px solid rgba(212,175,55,0.3); }
.profile-theme-preview--golden .ptp-card   { background: linear-gradient(135deg, rgba(26,29,41,0.8), rgba(15,17,23,0.9)); border: 1px solid rgba(212,175,55,0.3); box-shadow: 0 4px 12px rgba(212,175,55,0.15); }

.profile-theme-preview--starwars             { background: #000510; }
.profile-theme-preview--starwars .ptp-bar    { background: #000510; border-bottom: 1px solid rgba(255,232,31,0.5); }
.profile-theme-preview--starwars .ptp-sidebar{ background: #00061a; border-right: 1px solid rgba(255,232,31,0.25); }
.profile-theme-preview--starwars .ptp-card   { background: #000c2a; border: 1px solid rgba(255,232,31,0.3); box-shadow: 0 0 6px rgba(255,232,31,0.1) inset; }

.profile-theme-preview--jedi             { background: #000000; }
.profile-theme-preview--jedi .ptp-bar    { background: #000000; border-bottom: 2px solid #FFE81F; }
.profile-theme-preview--jedi .ptp-sidebar{ background: #050505; border-right: 1px solid rgba(255,232,31,0.35); }
.profile-theme-preview--jedi .ptp-card   { background: #0d0d0d; border: 1px solid rgba(255,232,31,0.5); box-shadow: 0 0 8px rgba(255,232,31,0.2) inset; }

.profile-theme-preview--darkforce             { background: #000000; }
.profile-theme-preview--darkforce .ptp-bar    { background: linear-gradient(90deg, #180000, #000018); border-bottom: 1px solid #c92020; }
.profile-theme-preview--darkforce .ptp-sidebar{ background: #080808; border-right: 1px solid rgba(201,32,32,0.45); }
.profile-theme-preview--darkforce .ptp-card   { background: #0d0d0d; border: 1px solid rgba(201,32,32,0.4); box-shadow: 0 0 8px rgba(201,32,32,0.15) inset; }

.profile-theme-preview--disney             { background: linear-gradient(135deg, #dbeeff 0%, #ede8ff 50%, #fff8e0 100%); }
.profile-theme-preview--disney .ptp-bar    { background: linear-gradient(90deg, #0072CE, #5c2d91); border-bottom: 2px solid #FFC200; }
.profile-theme-preview--disney .ptp-sidebar{ background: #EEF6FF; border-right: 2px solid rgba(0,114,206,0.3); }
.profile-theme-preview--disney .ptp-card   { background: #ffffff; border: 1px solid rgba(0,114,206,0.35); box-shadow: 0 2px 8px rgba(0,114,206,0.15); }

.profile-theme-preview--win95             { background: #008080; }
.profile-theme-preview--win95 .ptp-bar    { background: linear-gradient(90deg, #000080, #1084d0); border-bottom: 2px solid #000000; }
.profile-theme-preview--win95 .ptp-sidebar{ background: #c0c0c0; border-right: 2px solid #808080; }
.profile-theme-preview--win95 .ptp-card   { background: #c0c0c0; border: 2px solid; border-color: #ffffff #808080 #808080 #ffffff; box-shadow: 1px 1px 0 #000000; border-radius: 0; }

.profile-theme-preview--win11             { background: #f0f0f0; }
.profile-theme-preview--win11 .ptp-bar    { background: rgba(243,243,243,0.92); border-bottom: 1px solid rgba(0,0,0,0.08); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); }
.profile-theme-preview--win11 .ptp-sidebar{ background: rgba(238,238,238,0.85); border-right: 1px solid rgba(0,0,0,0.06); }
.profile-theme-preview--win11 .ptp-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: 8px; }

.profile-theme-preview--itunes             { background: #f5f5f5; }
.profile-theme-preview--itunes .ptp-bar    { background: linear-gradient(180deg, #484848 0%, #282828 100%); border-bottom: 1px solid #111111; }
.profile-theme-preview--itunes .ptp-sidebar{ background: #1e1e1e; border-right: 1px solid #111111; }
.profile-theme-preview--itunes .ptp-card   { background: #ffffff; border: 1px solid #e0e0e0; box-shadow: 0 1px 4px rgba(0,0,0,0.1); border-radius: 4px; }

.profile-theme-preview--runway             { background: #f8f5f0; }
.profile-theme-preview--runway .ptp-bar    { background: #0a0a0a; border-bottom: 3px solid #b8913e; }
.profile-theme-preview--runway .ptp-sidebar{ background: #ffffff; border-right: 1px solid #e0e0e0; }
.profile-theme-preview--runway .ptp-card   { background: #ffffff; border-top: 2px solid #b8913e; border-left: 1px solid #e8e0d8; border-right: 1px solid #e8e0d8; border-bottom: 1px solid #e8e0d8; box-shadow: 0 2px 12px rgba(0,0,0,0.06); border-radius: 0; }



/* ── Hero card ── */
.profile-hero {
  background: #f8fafc;
  border-radius: 14px;
  padding: 2rem 2.2rem;
  display: flex;
  align-items: center;
  gap: 1.8rem;
  margin-bottom: 1.5rem;
  border: 1px solid #e2e8f0;
  border-left: 4px solid var(--primary-color);
  box-shadow: 0 2px 12px rgba(15, 23, 42, 0.06);
}

.profile-avatar-initials {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  background: var(--primary-color);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.1rem;
  font-weight: 800;
  color: #fff;
  flex-shrink: 0;
  letter-spacing: -1px;
}

.profile-hero-info h1 {
  margin: 0 0 0.3rem;
  font-size: 1.6rem;
  color: var(--text-primary);
  font-weight: 700;
}

.profile-hero-info .profile-email {
  color: var(--text-secondary);
  margin: 0 0 0.85rem;
  font-size: 0.92rem;
}

.profile-role-badge {
  display: inline-block;
  padding: 0.28rem 0.8rem;
  background: #f1f5f9;
  color: #0f172a;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: capitalize;
  border: 1px solid #e2e8f0;
}

/* ── Messages ── */
.message {
  padding: 0.85rem 1.2rem;
  border-radius: 6px;
  margin-bottom: 1.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 500;
}

.message.success {
  background: #d1fae5;
  color: #065f46;
  border-left: 4px solid #10b981;
}

.message.error {
  background: #fee2e2;
  color: #991b1b;
  border-left: 4px solid #ef4444;
}

.message button {
  background: none;
  border: none;
  font-size: 1.4rem;
  cursor: pointer;
  color: inherit;
  padding: 0;
  line-height: 1;
  opacity: 0.7;
}

.message button:hover {
  opacity: 1;
}

/* ── Grid ── */
.profile-grid {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(2, 1fr);
  margin-bottom: 1.5rem;
}

/* ── Cards ── */
.profile-card {
  background: #fff;
  border-radius: 14px;
  padding: 1.6rem 1.75rem;
  border: 1px solid #e2e8f0;
  box-shadow: 0 2px 12px rgba(15, 23, 42, 0.06);
}

/* ── Card header ── */
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid #f1f5f9;
}

.card-header h3 {
  margin: 0;
  font-size: 0.78rem;
  font-weight: 700;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* ── Form groups ── */
.form-group {
  padding: 0.85rem 0;
  border-bottom: 1px solid #f1f5f9;
}

.form-group:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.form-group label {
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #94a3b8;
  margin-bottom: 0.3rem;
}

.label-optional {
  font-weight: 400;
  font-size: 0.85em;
  color: #94a3b8;
  text-transform: none;
  letter-spacing: 0;
}

.form-input {
  width: 100%;
  padding: 0.62rem 0.85rem;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  font-size: 0.95rem;
  transition: border-color 0.2s, box-shadow 0.2s;
  background: #f8fafc;
  box-sizing: border-box;
}

.form-input:focus {
  outline: none;
  border-color: var(--primary-color);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary-color) 15%, transparent);
  background: #fff;
}

.profile-role-select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-color: #fff;
  font-weight: 600;
  color: var(--text-primary);
  border: 1px solid #d6dce5;
  border-radius: 10px;
  padding: 0.78rem 2.7rem 0.78rem 0.95rem;
  line-height: 1.2;
  min-height: 46px;
}

.profile-role-select-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.profile-role-select-wrap .profile-role-select-arrow {
  position: absolute;
  right: 0.9rem;
  color: #6b7280;
  font-size: 0.9rem;
  pointer-events: none;
  transition: transform 0.15s ease, color 0.15s ease;
}

.profile-role-select:hover {
  border-color: #c0c9d5;
  background: #fcfdff;
}

.profile-role-select:focus {
  border-color: var(--primary-color);
  box-shadow: 0 0 0 3px rgba(232, 93, 4, 0.12);
}

.profile-role-select:focus + .profile-role-select-arrow {
  color: var(--primary-color);
  transform: translateY(1px);
}

.profile-role-select:disabled {
  background: #f4f6f8;
  color: #8a93a3;
  border-color: #dbe1e8;
}

.profile-role-select option {
  color: #111827;
}

.field-value {
  color: var(--text-primary);
  margin: 0;
  font-size: 0.97rem;
  font-weight: 500;
}

.field-hint {
  display: block;
  color: #94a3b8;
  font-size: 0.79rem;
  margin-top: 0.3rem;
}

.capitalize {
  text-transform: capitalize;
}

.input-group {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.button-group {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
}

/* ── Buttons ── */
.btn-primary,
.btn-secondary,
.btn-icon {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.58rem 1.05rem;
  border-radius: 8px;
  font-weight: 600;
  font-size: 0.87rem;
  cursor: pointer;
  transition: all 0.2s;
  border: none;
}

.btn-primary {
  background: var(--primary-color);
  color: #fff;
}

.btn-primary:hover { background: var(--primary-dark); }

.btn-primary:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.btn-secondary {
  background: #f1f5f9;
  color: var(--text-primary);
  border: 1px solid #e2e8f0;
}

.btn-secondary:hover { background: #e2e8f0; }

.btn-secondary:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.btn-icon {
  background: none;
  color: var(--primary-color);
  padding: 0.38rem 0.7rem;
  font-size: 0.82rem;
  border-radius: 6px;
}

.btn-icon:hover { background: #fff5f0; }

.security-message {
  color: var(--text-secondary);
  line-height: 1.65;
  margin: 0;
  font-size: 0.92rem;
}

/* ── MFA Section ── */
.mfa-section {
  margin-top: 1.2rem;
  padding-top: 1.2rem;
  border-top: 2px solid #f1f5f9;
}

.mfa-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.mfa-header-info {
  display: flex;
  gap: 0.7rem;
  align-items: flex-start;
}

.mfa-icon {
  font-size: 1.4rem;
  color: var(--primary-color);
  flex-shrink: 0;
  margin-top: 0.1rem;
}

.mfa-header-info h4 {
  margin: 0 0 0.2rem;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-primary);
}

.mfa-description {
  margin: 0;
  font-size: 0.82rem;
  color: #94a3b8;
  line-height: 1.4;
}

.mfa-status-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.22rem 0.7rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  flex-shrink: 0;
  white-space: nowrap;
}

.mfa-status-badge.active {
  background: #d1fae5;
  color: #065f46;
  border: 1px solid #a7f3d0;
}

.mfa-status-badge.inactive {
  background: #fef3c7;
  color: #92400e;
  border: 1px solid #fde68a;
}

.mfa-loading {
  color: #94a3b8;
  font-size: 0.88rem;
  font-style: italic;
  padding: 0.5rem 0;
}

/* Setup flow */
.mfa-setup-steps {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin-bottom: 1.2rem;
}

.mfa-step {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
}

.mfa-step-number {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--primary-color);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.mfa-step p {
  margin: 0;
  font-size: 0.85rem;
  color: var(--text-secondary);
  line-height: 1.5;
  padding-top: 0.1rem;
}

.mfa-qr-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.8rem;
  padding: 1.2rem;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  margin-bottom: 1.2rem;
}

.mfa-qr-code {
  border-radius: 8px;
  border: 3px solid #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.mfa-secret-key {
  text-align: center;
}

.mfa-secret-key label {
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #94a3b8;
  margin-bottom: 0.25rem;
}

.mfa-secret-key code {
  font-family: 'SF Mono', 'Fira Code', monospace;
  font-size: 0.85rem;
  background: #fff;
  padding: 0.35rem 0.7rem;
  border-radius: 6px;
  border: 1px solid #e2e8f0;
  color: var(--text-primary);
  font-weight: 600;
  letter-spacing: 0.1em;
  word-break: break-all;
  -webkit-user-select: all;
  user-select: all;
}

.mfa-code-input {
  text-align: center;
  font-size: 1.4rem !important;
  font-weight: 700;
  letter-spacing: 0.35em;
  max-width: 200px;
  font-family: 'SF Mono', 'Fira Code', monospace;
}

.mfa-verify-form .form-group {
  border-bottom: none;
  padding-bottom: 0.4rem;
}

/* Enabled state */
.mfa-enabled-message {
  color: #065f46;
  font-size: 0.88rem;
  font-weight: 500;
  margin: 0 0 0.8rem;
  padding: 0.6rem 0.85rem;
  background: #ecfdf5;
  border-radius: 8px;
  border: 1px solid #a7f3d0;
}

.mfa-disable-btn {
  color: #dc2626 !important;
  font-size: 0.8rem !important;
}

.mfa-disable-btn:hover {
  background: #fef2f2 !important;
}

.mfa-disable-confirm {
  margin-top: 0.5rem;
}

.mfa-disable-warning {
  color: #991b1b;
  font-size: 0.85rem;
  font-weight: 500;
  margin: 0 0 0.8rem;
  padding: 0.6rem 0.85rem;
  background: #fef2f2;
  border-radius: 8px;
  border: 1px solid #fecaca;
}

.btn-danger {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.58rem 1.05rem;
  border-radius: 8px;
  font-weight: 600;
  font-size: 0.87rem;
  cursor: pointer;
  transition: all 0.2s;
  border: none;
  background: #dc2626;
  color: #fff;
}

.btn-danger:hover {
  background: #b91c1c;
}

.btn-danger:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.mfa-enable-btn {
  margin-top: 0.3rem;
}

/* ── Responsive ── */
@media (max-width: 768px) {
  .profile-grid {
    grid-template-columns: 1fr;
  }

  .profile-hero {
    flex-direction: column;
    text-align: center;
    padding: 1.5rem;
  }

  .button-group {
    flex-direction: column;
  }

  .btn-primary,
  .btn-secondary {
    width: 100%;
    justify-content: center;
  }
}
.not-found-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background: var(--bg-secondary);
  padding: 2rem;
}

.not-found-content {
  text-align: center;
  max-width: 500px;
}

.not-found-title {
  font-size: 8rem;
  font-weight: bold;
  background: linear-gradient(135deg, var(--primary-color), var(--accent-color));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin: 0 0 1rem 0;
  line-height: 1;
}

.not-found-subtitle {
  font-size: 2rem;
  color: var(--text-primary);
  margin: 0 0 1rem 0;
  font-weight: 600;
}

.not-found-message {
  color: var(--text-secondary);
  font-size: 1.1rem;
  margin: 0 0 2rem 0;
  line-height: 1.6;
}

.not-found-button {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 2rem;
  background-color: var(--primary-color);
  color: white;
  text-decoration: none;
  border-radius: 6px;
  font-weight: 600;
  font-size: 1.05rem;
  transition: all 0.2s;
  box-shadow: 0 4px 6px rgba(232, 93, 4, 0.2);
}

.not-found-button:hover {
  background-color: var(--primary-dark);
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(232, 93, 4, 0.3);
}

.not-found-button svg {
  font-size: 1.5rem;
}

@media (max-width: 768px) {
  .not-found-title {
    font-size: 5rem;
  }

  .not-found-subtitle {
    font-size: 1.5rem;
  }

  .not-found-message {
    font-size: 1rem;
  }
}
/* ── Page layout ───────────────────────────────────────────────────────────── */
.reports-page {
  animation: fadeIn 0.3s ease-in;
  max-width: 1100px;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Page header ───────────────────────────────────────────────────────────── */
.reports-header {
  margin-bottom: 1.75rem;
}

.reports-title-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 1rem;
}

.reports-title-row h1 {
  font-size: 1.9rem;
  color: var(--text-primary);
  margin: 0;
}

.reports-icon {
  font-size: 2rem;
  color: var(--primary-color);
}

/* ── Date selector ─────────────────────────────────────────────────────────── */
.date-selector-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.btn-export-pdf {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.55rem 1rem;
  background: #dc2626;
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s;
}
.btn-export-pdf:hover { background: #b91c1c; }
.btn-export-pdf svg { font-size: 1.15rem; }


.date-selector-row label {
  font-weight: 600;
  color: var(--text-secondary);
  font-size: 0.95rem;
  white-space: nowrap;
}

.date-select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  width: 100%;
  padding: 0.72rem 2.5rem 0.72rem 0.9rem;
  border: 1px solid #d6dce5;
  border-radius: 9px;
  font-size: 0.95rem;
  background: white;
  color: var(--text-primary);
  cursor: pointer;
  min-width: 280px;
  font-weight: 600;
  transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
}

.date-select:focus {
  outline: none;
  border-color: var(--primary-color);
  box-shadow: 0 0 0 3px rgba(232, 93, 4, 0.12);
}

.date-select:hover {
  border-color: #c0c9d5;
  background: #fcfdff;
}

.date-select-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.date-select-arrow {
  position: absolute;
  right: 0.85rem;
  color: #6b7280;
  font-size: 0.88rem;
  pointer-events: none;
}

.date-select:focus + .date-select-arrow {
  color: var(--primary-color);
}

/* ── Sync metadata ─────────────────────────────────────────────────────────── */
.sync-meta {
  display: flex;
  gap: 1.5rem;
  background: white;
  border-radius: 8px;
  padding: 1rem 1.5rem;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  margin-bottom: 1.75rem;
  flex-wrap: wrap;
}

.meta-item {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 180px;
}

.meta-item--center {
  flex: 1;
  align-items: center;
  text-align: center;
}

.meta-label {
  font-size: 0.78rem;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 600;
}

.meta-value {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-primary);
}

/* ── Sections ──────────────────────────────────────────────────────────────── */
.sections {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.report-section {
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  border-left: 4px solid;
  overflow: hidden;
}

.section-header {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1rem;
  font-weight: 700;
  text-align: left;
  transition: background 0.15s;
}

.section-header:hover {
  background: rgba(0, 0, 0, 0.03);
}

.section-header svg {
  font-size: 1.3rem;
  flex-shrink: 0;
}

.section-title {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.section-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.6rem;
  height: 1.6rem;
  padding: 0 0.4rem;
  border-radius: 999px;
  font-size: 0.8rem;
  color: white;
  font-weight: 700;
  line-height: 1;
}

.section-body {
  border-top: 1px solid var(--border-color);
}

/* ── Pagination ────────────────────────────────────────────────────────────── */
.pagination-toolbar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0.5rem 1.25rem;
  gap: 0.5rem;
}

.page-size-selector {
  display: flex;
  align-items: center;
  gap: 0.3rem;
}

.page-size-label {
  font-size: 0.78rem;
  color: var(--text-secondary);
  margin-right: 0.25rem;
}

.page-size-btn {
  background: none;
  border: 1px solid var(--border-color);
  border-radius: 5px;
  padding: 0.25rem 0.55rem;
  font-size: 0.78rem;
  color: var(--text-secondary);
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.page-size-btn:hover {
  background: var(--bg-hover, #f5f5f5);
  color: var(--text-primary);
}
.page-size-btn.active {
  background: var(--accent, #2563eb);
  color: #fff;
  border-color: var(--accent, #2563eb);
}

.pagination-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 0.75rem 1.25rem;
  border-top: 1px solid var(--border-color);
}

.pagination-btn {
  background: none;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  padding: 0.35rem 0.9rem;
  font-size: 0.82rem;
  cursor: pointer;
  color: var(--text-primary);
  transition: background 0.15s;
}
.pagination-btn:hover:not(:disabled) {
  background: var(--bg-hover, #f5f5f5);
}
.pagination-btn:disabled {
  opacity: 0.4;
  cursor: default;
}

.pagination-info {
  font-size: 0.82rem;
  color: var(--text-secondary);
  min-width: 4rem;
  text-align: center;
}

/* ── Product rows ──────────────────────────────────────────────────────────── */
.product-row {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.75rem 1.25rem;
  border-bottom: 1px solid var(--border-color);
  flex-wrap: wrap;
  transition: background 0.15s;
}

.product-row:last-child {
  border-bottom: none;
}

.product-row:hover {
  background: rgba(0, 0, 0, 0.02);
}

/* Accent stripe per variant */
.product-row--added   { border-left: 3px solid #22c55e; }
.product-row--removed { border-left: 3px solid #ef4444; }
.product-row--changed { border-left: 3px solid #f59e0b; }

/* Avatar */
.product-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--text-secondary);
}

.product-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Info */
.product-info {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 120px;
  gap: 0.05rem;
}

.product-id {
  font-size: 0.75rem;
  color: var(--text-secondary);
  font-family: monospace;
}

.product-name {
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.3;
}

/* Price */
.product-price {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--secondary-color);
  white-space: nowrap;
}

/* Changes toggle button */
.changes-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.3rem 0.65rem;
  border: 1px solid #f59e0b;
  border-radius: 999px;
  background: #fffbeb;
  color: #92400e;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s;
}

.changes-toggle:hover {
  background: #fef3c7;
}

.changes-toggle svg {
  font-size: 1rem;
}

/* Changes detail */
.changes-list {
  width: 100%;
  margin-top: 0.5rem;
  padding: 0.6rem 1rem;
  background: #fffbeb;
  border-radius: 6px;
  border: 1px solid #fde68a;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.change-item {
  display: flex;
  align-items: baseline;
  gap: 0.45rem;
  font-size: 0.84rem;
  flex-wrap: wrap;
}

.change-field {
  font-weight: 700;
  color: var(--text-secondary);
  white-space: nowrap;
}

.change-from {
  color: #b91c1c;
  text-decoration: line-through;
  word-break: break-all;
}

.change-arrow {
  color: var(--text-secondary);
  flex-shrink: 0;
}

.change-to {
  color: #15803d;
  font-weight: 600;
  word-break: break-all;
}

/* ── State indicators ──────────────────────────────────────────────────────── */
.loading-inline {
  color: var(--text-secondary);
  font-size: 0.95rem;
}

.loading-overlay {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 2.5rem;
  justify-content: center;
  color: var(--text-secondary);
}

.spinner {
  width: 24px;
  height: 24px;
  border: 3px solid var(--border-color);
  border-top-color: var(--primary-color);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.error-banner {
  background: #fef2f2;
  border: 1px solid #fca5a5;
  color: #b91c1c;
  border-radius: 8px;
  padding: 0.85rem 1.25rem;
  margin-bottom: 1.25rem;
  font-size: 0.92rem;
}

.empty-message {
  padding: 1.25rem;
  color: var(--text-secondary);
  font-size: 0.92rem;
  text-align: center;
}

/* ── Skipped section ───────────────────────────────────────────────────────── */
.product-row--skipped { border-left: none; }

.product-brand {
  font-size: 0.75rem;
  color: var(--text-secondary);
  font-weight: 500;
}

.skipped-reason-chip {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.65rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  color: white;
  white-space: nowrap;
  flex-shrink: 0;
}

.skipped-filters {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.75rem 1.25rem;
  background: #f8fafc;
  border-bottom: 1px solid var(--border-color);
  flex-wrap: wrap;
}

.skipped-filter-group {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.filter-icon {
  font-size: 1.15rem;
  color: var(--text-secondary);
  flex-shrink: 0;
}

.skipped-filter-select {
  appearance: none;
  -webkit-appearance: none;
  padding: 0.45rem 0.75rem;
  border: 1px solid #d6dce5;
  border-radius: 7px;
  font-size: 0.85rem;
  background: white;
  color: var(--text-primary);
  cursor: pointer;
  font-weight: 500;
  min-width: 160px;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.skipped-filter-select:focus {
  outline: none;
  border-color: var(--primary-color);
  box-shadow: 0 0 0 3px rgba(232, 93, 4, 0.12);
}

.skipped-search-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.search-icon {
  position: absolute;
  left: 0.6rem;
  font-size: 1.1rem;
  color: var(--text-secondary);
  pointer-events: none;
}

.skipped-search-input {
  padding: 0.45rem 0.75rem 0.45rem 2rem;
  border: 1px solid #d6dce5;
  border-radius: 7px;
  font-size: 0.85rem;
  background: white;
  color: var(--text-primary);
  min-width: 220px;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.skipped-search-input:focus {
  outline: none;
  border-color: var(--primary-color);
  box-shadow: 0 0 0 3px rgba(232, 93, 4, 0.12);
}

.skipped-search-input::placeholder {
  color: #9ca3af;
}

.skipped-results-count {
  padding: 0.4rem 1.25rem;
  font-size: 0.8rem;
  color: var(--text-secondary);
  font-weight: 500;
  border-bottom: 1px solid var(--border-color);
  background: #f8fafc;
}

@media (max-width: 768px) {
  .date-selector-row {
    flex-wrap: wrap;
  }

  .date-select-wrap {
    flex: 1;
    min-width: 0;
  }

  .date-select {
    min-width: 0;
    width: 100%;
  }

  .sync-meta {
    gap: 1rem;
    padding: 0.85rem 1rem;
  }

  .meta-item {
    min-width: 140px;
  }

  .product-row {
    padding: 0.65rem 0.85rem;
  }
}
/* ── Page layout ───────────────────────────────────────────────────────────── */
.analytics-page {
  animation: fadeIn 0.3s ease-in;
  max-width: 1200px;
}

/* ── Page header ───────────────────────────────────────────────────────────── */
.analytics-header {
  margin-bottom: 1.75rem;
}

.analytics-title-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.4rem;
}

.analytics-title-row h1 {
  font-size: 1.9rem;
  color: var(--text-primary);
  margin: 0;
}

.analytics-icon {
  font-size: 2rem;
  color: var(--primary-color);
}

.analytics-subtitle {
  color: var(--text-secondary);
  font-size: 0.92rem;
  margin: 0;
}

.analytics-subtitle-period {
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--text-secondary);
  opacity: 0.8;
  margin-top: 0.15rem;
}

/* ── Period selector ───────────────────────────────────────────────────────── */
.analytics-controls {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
}

.period-selector {
  display: flex;
  gap: 0;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  overflow: hidden;
}

.period-btn {
  padding: 0.5rem 1rem;
  border: none;
  background: white;
  color: var(--text-secondary);
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
}

.period-btn:not(:last-child) {
  border-right: 1px solid var(--border-color);
}

.period-btn:hover {
  background: #f8fafc;
}

.period-btn.active {
  background: var(--primary-color);
  color: white;
}

/* ── KPI cards ─────────────────────────────────────────────────────────────── */
.analytics-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}

.kpi-card {
  background: white;
  border-radius: 8px;
  padding: 1rem 1.15rem;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  border-left: 4px solid transparent;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.kpi-card.kpi-blue    { border-left-color: #0ea5e9; }
.kpi-card.kpi-green   { border-left-color: #22c55e; }
.kpi-card.kpi-yellow  { border-left-color: #f59e0b; }
.kpi-card.kpi-red     { border-left-color: #ef4444; }
.kpi-card.kpi-purple  { border-left-color: #8b5cf6; }
.kpi-card.kpi-orange  { border-left-color: #f97316; }
.kpi-card.kpi-teal    { border-left-color: #14b8a6; }

.kpi-label {
  font-size: 0.78rem;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 600;
  margin: 0;
}

.kpi-value {
  font-size: 1.45rem;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
}

.kpi-sub {
  font-size: 0.78rem;
  color: var(--text-secondary);
  margin: 0;
}

/* ── Analytics grid ────────────────────────────────────────────────────────── */
.analytics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(460px, 1fr));
  gap: 1.25rem;
  margin-bottom: 1.5rem;
}

.analytics-card {
  background: white;
  border-radius: 8px;
  padding: 1.25rem;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.analytics-card.full-width {
  grid-column: 1 / -1;
}

.analytics-card-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 1rem 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.analytics-card-title svg {
  color: var(--primary-color);
  font-size: 1.15rem;
}

/* ── Data table ────────────────────────────────────────────────────────────── */
.analytics-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
}

.analytics-table th {
  text-align: left;
  font-weight: 700;
  color: var(--text-secondary);
  text-transform: uppercase;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  padding: 0.5rem 0.75rem;
  border-bottom: 2px solid var(--border-color);
}

.analytics-table td {
  padding: 0.6rem 0.75rem;
  color: var(--text-primary);
  border-bottom: 1px solid #f1f5f9;
}

.analytics-table tr:hover td {
  background: #f8fafc;
}

.analytics-table .num {
  font-variant-numeric: tabular-nums;
  text-align: right;
  font-weight: 600;
}

/* ── Bar chart (CSS-only) ──────────────────────────────────────────────────── */
.bar-chart {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.bar-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.bar-label {
  width: 160px;
  font-size: 0.84rem;
  color: var(--text-primary);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex-shrink: 0;
}

.bar-track {
  flex: 1;
  height: 22px;
  background: #f1f5f9;
  border-radius: 4px;
  overflow: hidden;
  position: relative;
}

.bar-fill {
  height: 100%;
  border-radius: 4px;
  transition: width 0.6s ease;
  min-width: 2px;
  width: var(--bar-width, 0%);
  background: var(--bar-color, #3b82f6);
}

.bar-value {
  width: 70px;
  text-align: right;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}

/* ── Mini trend ────────────────────────────────────────────────────────────── */
.mini-trend {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 60px;
  padding: 4px 0;
}

.mini-trend-bar {
  flex: 1;
  background: var(--primary-color);
  border-radius: 2px 2px 0 0;
  opacity: 0.7;
  min-width: 3px;
  transition: opacity 0.15s;
}

.mini-trend-bar:hover {
  opacity: 1;
}

/* ── Donut chart (CSS-only) ────────────────────────────────────────────────── */
.donut-chart {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.donut-visual {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  position: relative;
  flex-shrink: 0;
  background: var(--donut-gradient);
}

.donut-center {
  position: absolute;
  inset: 25%;
  border-radius: 50%;
  background: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--text-primary);
}

.donut-legend {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  flex: 1;
}

.donut-legend-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.84rem;
}

.donut-legend-swatch {
  width: 12px;
  height: 12px;
  border-radius: 3px;
  flex-shrink: 0;
  background: var(--swatch-color, var(--primary-color));
}

.donut-legend-label {
  flex: 1;
  color: var(--text-primary);
}

.donut-legend-value {
  font-weight: 700;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}

/* ── Funnel ────────────────────────────────────────────────────────────────── */
.funnel-chart {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.funnel-step {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.85rem 1rem;
  position: relative;
}

.funnel-step:not(:last-child) {
  border-bottom: 1px solid #f1f5f9;
}

.funnel-step-bar {
  height: 32px;
  border-radius: 6px;
  background: var(--primary-color);
  opacity: 0.15;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 0;
  transition: width 0.6s ease;
}

.funnel-step-content {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: 0.75rem;
}

.funnel-step-name {
  font-weight: 600;
  color: var(--text-primary);
  font-size: 0.9rem;
}

.funnel-step-stats {
  display: flex;
  gap: 1.25rem;
  font-size: 0.84rem;
}

.funnel-step-stats span {
  font-variant-numeric: tabular-nums;
}

.funnel-rate {
  font-weight: 700;
  color: var(--primary-color);
}

.funnel-sessions {
  color: var(--text-secondary);
}

.funnel-dropoff {
  color: #ef4444;
  font-weight: 600;
}

/* ── Session heatmap ───────────────────────────────────────────────────────── */
.heatmap-grid {
  display: grid;
  grid-template-columns: repeat(24, 1fr);
  gap: 3px;
}

.heatmap-cell {
  aspect-ratio: 1;
  border-radius: 3px;
  background: var(--primary-color);
  transition: opacity 0.15s;
  position: relative;
  opacity: var(--cell-opacity, 0.5);
}

.heatmap-cell:hover::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  background: #1e293b;
  color: white;
  font-size: 0.72rem;
  padding: 0.25rem 0.4rem;
  border-radius: 4px;
  white-space: nowrap;
  z-index: 10;
}

.heatmap-labels {
  display: grid;
  grid-template-columns: repeat(24, 1fr);
  gap: 3px;
  margin-top: 2px;
}

.heatmap-labels span {
  text-align: center;
  font-size: 0.62rem;
  color: var(--text-secondary);
}

/* ── Segment chips ─────────────────────────────────────────────────────────── */
.segment-card {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  background: #f8fafc;
  border-radius: 8px;
  border-left: 4px solid transparent;
  border-left-color: var(--segment-color, transparent);
}

.segment-card + .segment-card {
  margin-top: 0.5rem;
}

.segment-name {
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--text-primary);
  flex: 1;
}

.segment-stat {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.1rem;
}

.segment-stat-value {
  font-weight: 700;
  font-size: 0.92rem;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}

.segment-stat-label {
  font-size: 0.7rem;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

/* ── Hub page ──────────────────────────────────────────────────────────────── */
.hub-group {
  margin-bottom: 2rem;
}

.hub-group-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid var(--border-color);
}

.hub-group-header span {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-secondary);
}

.hub-group-icon {
  font-size: 1rem;
  color: var(--text-secondary);
}

.analytics-hub-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.25rem;
}

.hub-card {
  background: white;
  border-radius: 12px;
  padding: 1.5rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  border-left: 4px solid transparent;
  transition: transform 0.2s, box-shadow 0.2s;
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.hub-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
}

.hub-card.hub-blue   { border-left-color: #0ea5e9; }
.hub-card.hub-green  { border-left-color: #22c55e; }
.hub-card.hub-purple { border-left-color: #8b5cf6; }
.hub-card.hub-orange { border-left-color: #f97316; }
.hub-card.hub-red    { border-left-color: #ef4444; }
.hub-card.hub-teal   { border-left-color: #14b8a6; }

.hub-card-icon {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
}

.hub-blue .hub-card-icon   { background: #0ea5e915; color: #0ea5e9; }
.hub-green .hub-card-icon  { background: #22c55e15; color: #22c55e; }
.hub-purple .hub-card-icon { background: #8b5cf615; color: #8b5cf6; }
.hub-orange .hub-card-icon { background: #f9731615; color: #f97316; }
.hub-red .hub-card-icon    { background: #ef444415; color: #ef4444; }
.hub-teal .hub-card-icon   { background: #14b8a615; color: #14b8a6; }

.hub-card h3 {
  margin: 0;
  font-size: 1.1rem;
  color: var(--text-primary);
}

.hub-card p {
  margin: 0;
  font-size: 0.88rem;
  color: var(--text-secondary);
  line-height: 1.45;
}

/* ── Loading state ─────────────────────────────────────────────────────────── */
.analytics-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 300px;
  color: var(--text-secondary);
  font-size: 0.95rem;
  gap: 0.6rem;
}

.analytics-loading .spinner {
  animation: spin 1s linear infinite;
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* ── Responsive ────────────────────────────────────────────────────────────── */
/* Exec date controls (year/month/quarter/week/day pickers) */
.exec-date-controls {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.exec-date-select,
.exec-date-input {
  height: 36px;
  padding: 0 0.75rem;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  background: var(--card-bg);
  color: var(--text-primary);
  font-size: 0.875rem;
  cursor: pointer;
  outline: none;
  transition: border-color 0.15s;
}

.exec-date-select:hover,
.exec-date-input:hover {
  border-color: var(--primary-color);
}

.exec-date-select:focus,
.exec-date-input:focus {
  border-color: var(--primary-color);
  box-shadow: 0 0 0 2px rgba(255, 8, 6, 0.15);
}

/* "Ver detalle" inline link next to section titles */
.exec-drilldown-link {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  margin-left: auto;
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--primary-color);
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: 6px;
  padding: 2px 8px;
  transition: background 0.15s, border-color 0.15s;
}

.exec-drilldown-link:hover {
  background: rgba(255, 8, 6, 0.07);
  border-color: rgba(255, 8, 6, 0.25);
}

/* Explore grid at the bottom */
.exec-explore-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
}

.exec-explore-card {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.85rem 1rem;
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-left: 4px solid transparent;
  border-radius: 10px;
  text-decoration: none;
  transition: background 0.15s, transform 0.12s;
}

.exec-explore-card:hover {
  background: var(--hover-bg, #f8fafc);
  transform: translateX(3px);
}

.exec-explore-green  { border-left-color: #22c55e; }
.exec-explore-blue   { border-left-color: #0ea5e9; }
.exec-explore-purple { border-left-color: #8b5cf6; }
.exec-explore-orange { border-left-color: #f97316; }

.exec-explore-icon {
  font-size: 1.4rem;
  flex-shrink: 0;
}

.exec-explore-green  .exec-explore-icon { color: #22c55e; }
.exec-explore-blue   .exec-explore-icon { color: #0ea5e9; }
.exec-explore-purple .exec-explore-icon { color: #8b5cf6; }
.exec-explore-orange .exec-explore-icon { color: #f97316; }

.exec-explore-title {
  margin: 0;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-primary);
}

.exec-explore-desc {
  margin: 0;
  font-size: 0.78rem;
  color: var(--text-secondary);
  line-height: 1.35;
}

.exec-explore-arrow {
  margin-left: auto;
  color: var(--text-secondary);
  font-size: 1.1rem;
  flex-shrink: 0;
}

@media (max-width: 768px) {
  .exec-explore-grid {
    grid-template-columns: 1fr;
  }
}

/* ── Hub golden color ──────────────────────────────────────────────────────── */
.hub-card.hub-gold   { border-left-color: #d97706; }
.hub-gold .hub-card-icon { background: #d9770615; color: #d97706; }

/* ── Executive Summary ─────────────────────────────────────────────────────── */
.analytics-section {
  margin-bottom: 0.5rem;
}

.analytics-section-title {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 0.75rem 0;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.section-icon {
  font-size: 1.1rem;
}

.section-icon-green  { color: #22c55e; }
.section-icon-blue   { color: #0ea5e9; }
.section-icon-purple { color: #8b5cf6; }
.section-icon-orange { color: #f97316; }
.section-icon-yellow { color: #f59e0b; }
.section-icon-red    { color: var(--primary-color); }

/* Executive KPI cards (with delta badges) */
.exec-kpi-card {
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  padding: 1rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.exec-kpi-label {
  font-size: 0.8rem;
  color: var(--text-secondary);
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.exec-kpi-value {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
}

.exec-kpi-footer {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.15rem;
}

.exec-delta {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  font-size: 0.8rem;
  font-weight: 600;
  border-radius: 4px;
  padding: 1px 5px;
}

.exec-delta-up      { background: #22c55e18; color: #16a34a; }
.exec-delta-down    { background: #ef444418; color: #dc2626; }
.exec-delta-neutral { background: #64748b15; color: #64748b; }

.exec-kpi-prev {
  font-size: 0.75rem;
  color: var(--text-secondary);
}

/* Trend sparkline card */
.exec-trend-card {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.exec-trend-header {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.exec-trend-title {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
}

.exec-trend-subtitle {
  font-size: 0.72rem;
  color: var(--text-secondary);
  margin: 0;
}

.exec-sparkline {
  display: block;
  width: 100%;
  max-width: 560px;
  height: auto;
}

.exec-trend-legend {
  display: flex;
  gap: 1.25rem;
  margin-top: 0.1rem;
}

.exec-trend-legend-item {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.72rem;
  color: var(--text-secondary);
}

.exec-trend-legend-line {
  display: inline-block;
  width: 20px;
  height: 2px;
  border-radius: 1px;
  flex-shrink: 0;
}

.exec-trend-legend-dashed {
  background: transparent;
  border-top: 2px dashed;
  height: 0;
}

/* Highlights */
.exec-highlights {
  padding: 1rem 1.25rem;
}

.exec-highlights-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.exec-highlight-item {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  font-size: 0.9rem;
  color: var(--text-primary);
  line-height: 1.4;
}

.exec-highlight-icon {
  color: #f59e0b;
  font-size: 1rem;
  flex-shrink: 0;
  margin-top: 0.1rem;
}

/* ── Posibles acciones ─────────────────────────────────────────────────────── */
.exec-actions {
  padding: 0.6rem 1rem;
}

.exec-actions-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.exec-action-item {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.45rem 0.25rem;
  border-bottom: 1px solid var(--border-color, rgba(255, 255, 255, 0.06));
}

.exec-action-item:last-child {
  border-bottom: none;
}

.exec-action-icon {
  color: var(--primary-color);
  font-size: 0.95rem;
  flex-shrink: 0;
}

.exec-action-body {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.exec-action-text {
  margin: 0;
  font-size: 0.845rem;
  color: var(--text-primary);
  line-height: 1.3;
}

.exec-action-metric {
  margin: 0;
  font-size: 0.73rem;
  color: var(--text-secondary);
  white-space: nowrap;
}

.exec-action-badge {
  flex-shrink: 0;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.15rem 0.45rem;
  border-radius: 99px;
}

.exec-action-badge-alto {
  background: rgba(239, 68, 68, 0.15);
  color: #f87171;
}

.exec-action-badge-medio {
  background: rgba(245, 158, 11, 0.15);
  color: #fbbf24;
}

.exec-action-badge-bajo {
  background: rgba(107, 114, 128, 0.15);
  color: #9ca3af;
}

@media (max-width: 768px) {
  .analytics-kpis {
    grid-template-columns: repeat(2, 1fr);
  }
  .analytics-grid {
    grid-template-columns: 1fr;
  }
  .bar-label {
    width: 100px;
  }
  .donut-chart {
    flex-direction: column;
  }
  .analytics-hub-grid {
    grid-template-columns: 1fr;
  }
}

/* ── Export PDF button ─────────────────────────────────────────────────────── */
.btn-export-pdf {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.55rem 1rem;
  background: #dc2626;
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s;
}
.btn-export-pdf:hover { background: #b91c1c; }
.btn-export-pdf svg { font-size: 1.15rem; }

/* ── Comparar periodos ─────────────────────────────────────────────────────── */
.btn-compare {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.55rem 1rem;
  background: transparent;
  color: var(--text-secondary);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.btn-compare:hover {
  background: var(--hover-bg);
  border-color: var(--primary-color);
  color: var(--primary-color);
}
.btn-compare.active {
  background: rgba(255, 8, 6, 0.08);
  border-color: var(--primary-color);
  color: var(--primary-color);
}
.btn-compare svg { font-size: 1.1rem; }

.compare-controls-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.6rem 0.75rem;
  background: var(--hover-bg);
  border: 1px dashed var(--border-color);
  border-radius: 8px;
  flex-wrap: wrap;
  margin-top: 0.25rem;
}

.compare-vs-label {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
}

/* KPI compare row — shown below kpi-value when compare is active */
.kpi-compare-row {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.75rem;
  color: var(--text-secondary);
  margin: 0;
  flex-wrap: wrap;
}

.kpi-compare-delta {
  display: inline-flex;
  align-items: center;
  gap: 0.15rem;
  font-size: 0.72rem;
  font-weight: 700;
  border-radius: 4px;
  padding: 1px 5px;
}

.kpi-compare-delta-up   { background: #22c55e18; color: #16a34a; }
.kpi-compare-delta-down { background: #ef444418; color: #dc2626; }
.kpi-compare-delta-neutral { background: #64748b15; color: #64748b; }

/* exec-kpi-card compare row */
.exec-kpi-compare-row {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.73rem;
  color: var(--text-secondary);
  margin: 0;
  margin-top: 0.15rem;
  padding-top: 0.3rem;
  border-top: 1px solid var(--border-color);
  flex-wrap: wrap;
}

.compare-period-tag {
  display: inline-block;
  font-size: 0.65rem;
  font-weight: 600;
  background: rgba(255, 8, 6, 0.08);
  color: var(--primary-color);
  border-radius: 4px;
  padding: 1px 5px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

@media (max-width: 768px) {
  .compare-controls-row {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ── Comparison deltas — pill badges used in tables & donut legends ──────── */
.tbl-delta {
  display: inline-block;
  font-size: 0.65rem;
  font-weight: 700;
  margin-top: 3px;
  border-radius: 4px;
  padding: 1px 5px;
  letter-spacing: 0.01em;
  white-space: nowrap;
}
.tbl-delta-up      { background: #dcfce7; color: #15803d; }
.tbl-delta-down    { background: #fee2e2; color: #b91c1c; }
.tbl-delta-neutral { background: #f1f5f9; color: #64748b; }

/* Compare sub-row values (actual value + delta) — inline so row height stays the same */
.cmp-subvalue {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.72rem;
  color: var(--text-secondary);
  margin-left: 0.4rem;
}

/* Rows that exist only in the compare period */
.cmp-only-row td {
  opacity: 0.6;
}

.cmp-only-tag {
  display: inline-block;
  font-size: 0.62rem;
  background: var(--bg-secondary, #f1f5f9);
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 3px;
  padding: 0 4px;
  color: var(--text-secondary);
  vertical-align: middle;
  margin-left: 0.3rem;
}

/* Compare period date labels (dashed underline to differentiate from main) */
.exec-trend-labels-cmp {
  opacity: 0.55;
  font-style: italic;
}

.donut-legend-delta {
  display: inline-flex;
  align-items: center;
  gap: 0.15rem;
  font-size: 0.68rem;
  font-weight: 700;
  border-radius: 4px;
  padding: 1px 5px;
  white-space: nowrap;
}
.donut-legend-delta.up      { background: #dcfce7; color: #15803d; }
.donut-legend-delta.down    { background: #fee2e2; color: #b91c1c; }
.donut-legend-delta.neutral { background: #f1f5f9; color: #64748b; }

/* ── Visual comparison bar rows (current + compare stacked) ──────────────── */
.bar-row-cmp {
  margin-top: -0.2rem;
  padding-bottom: 0.4rem;
  margin-bottom: 0.1rem;
}

.bar-label-cmp {
  width: 160px;
  font-size: 0.67rem;
  font-style: italic;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex-shrink: 0;
}

.bar-track-cmp {
  background: #e0e7ff;
}

.bar-fill-cmp {
  background: #818cf8;
}

.bar-value-cmp {
  width: 70px;
  text-align: right;
  font-size: 0.73rem;
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.15rem;
  line-height: 1.3;
}

/* Delta badge used inside comparison bar rows */
.delta-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.15rem;
  font-size: 0.68rem;
  font-weight: 800;
  border-radius: 4px;
  padding: 1px 5px;
  white-space: nowrap;
}
.delta-badge-up      { background: #dcfce7; color: #15803d; }
.delta-badge-down    { background: #fee2e2; color: #b91c1c; }
.delta-badge-neutral { background: #f1f5f9; color: #64748b; }

/* ── Trend chart comparison row ─────────────────────────────────────────── */
.mini-trend-period-label {
  font-size: 0.7rem;
  color: var(--text-secondary);
  font-weight: 500;
  margin-bottom: 0.15rem;
  margin-top: 0.1rem;
}
.mini-trend-period-label.is-cmp {
  color: #6366f1;
  margin-top: 0.5rem;
  padding-top: 0.4rem;
  border-top: 1px dashed var(--border-color);
}
.mini-trend-cmp-row {
  margin-top: 0;
}
.mini-trend-bar-cmp {
  flex: 1;
  background: #818cf8;
  min-height: 2px;
  border-radius: 2px 2px 0 0;
  transition: height 0.4s ease;
}

@media (max-width: 768px) {
  .bar-label-cmp { width: 90px; }
}
/* ── Page layout ───────────────────────────────────────────────────────────── */
.monitoring-page {
  display: flex;
  flex-direction: column;
  animation: monitoringFadeIn 0.3s ease-in;
}

@keyframes monitoringFadeIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Header ────────────────────────────────────────────────────────────────── */
.monitoring-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.5rem;
  flex-shrink: 0;
}

.monitoring-title-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.monitoring-title-row h1 {
  font-size: 2.15rem;
  font-weight: 800;
  color: var(--text-primary);
  margin: 0;
  letter-spacing: 0.01em;
}

.monitoring-icon {
  font-size: 2rem;
  color: var(--primary-color);
}

/* ── Actions ───────────────────────────────────────────────────────────────── */
.monitoring-actions {
  display: flex;
  gap: 0.75rem;
  align-items: center;
}

.btn-monitoring-refresh,
.btn-monitoring-console {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 1rem;
  border-radius: 6px;
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.15s, opacity 0.15s;
}

/* ── Time range selector ───────────────────────────────────────────────────── */
.monitoring-time-range {
  display: inline-flex;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  overflow: hidden;
}

.btn-time-range {
  background: transparent;
  border: none;
  border-right: 1px solid var(--border-color);
  color: var(--text-secondary);
  padding: 0.4rem 0.65rem;
  font-size: 0.82rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
}

.btn-time-range:last-child {
  border-right: none;
}

.btn-time-range:hover {
  background: var(--border-color);
  color: var(--text-primary);
}

.btn-time-range.active {
  background: var(--primary-color);
  color: #fff;
}

.btn-monitoring-refresh {
  background: var(--border-color);
  border: 1px solid var(--border-color);
  color: var(--text-primary);
  padding: 0.5rem;
  gap: 0;
}

.btn-monitoring-refresh:hover {
  background: var(--hover-bg);
}

.btn-monitoring-console {
  background: var(--primary-color);
  border: 1px solid var(--primary-color);
  color: #fff;
}

.btn-monitoring-console:hover {
  opacity: 0.85;
}

/* ── Body ──────────────────────────────────────────────────────────────────── */
.monitoring-body {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.monitoring-filter-row {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  flex-wrap: wrap;
  margin-bottom: 0.9rem;
}

.monitoring-filter-label {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--text-secondary);
}

.monitoring-filter-buttons {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.btn-metric-filter {
  border: 1px solid #d1d9e4;
  background: #fff;
  color: #374151;
  border-radius: 999px;
  padding: 0.38rem 0.85rem;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s, background-color 0.15s;
}

.btn-metric-filter:hover {
  border-color: #b8c3d3;
  background: #f8fafc;
}

.btn-metric-filter.active {
  border-color: var(--primary-color);
  background: rgba(232, 93, 4, 0.1);
  color: var(--primary-color);
}

/* ── Section header ────────────────────────────────────────────────────────── */
.monitoring-section-header {
  font-size: 1.2rem;
  font-weight: 800;
  color: #1f2937;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  padding: 0.9rem 1rem;
  border: 1px solid #d8dee8;
  border-left: 6px solid var(--primary-color);
  border-radius: 10px;
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  margin: 0.8rem 0 0.85rem;
}

/* ── Metric grid ───────────────────────────────────────────────────────────── */
.metric-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  margin-bottom: 0.5rem;
}

@media (max-width: 1400px) {
  .metric-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .metric-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 768px) {
  .monitoring-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
  }

  .monitoring-actions {
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  .monitoring-time-range {
    flex-wrap: wrap;
    border: none;
    border-radius: 0;
    gap: 0.4rem;
  }

  .btn-time-range {
    border: 1px solid var(--border-color);
    border-radius: 6px;
  }
}

/* ── Metric card ───────────────────────────────────────────────────────────── */
.metric-card {
  background: #fff;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  overflow: hidden;
}

.metric-card-title {
  font-size: 0.96rem;
  font-weight: 700;
  color: #111827;
  padding: 0.72rem 1rem;
  border-bottom: 1px solid #dbe1e8;
  background: #f3f6fa;
  letter-spacing: 0.01em;
}

.metric-card-body {
  min-height: 220px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.metric-card-img {
  width: 100%;
  height: auto;
  display: block;
}

/* ── Loading ───────────────────────────────────────────────────────────────── */
.metric-card-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 220px;
}

.metric-spinner {
  width: 32px;
  height: 32px;
  border: 3px solid var(--border-color);
  border-top-color: var(--primary-color);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
  display: inline-block;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* ── Error ─────────────────────────────────────────────────────────────────── */
.metric-card-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding: 1.5rem;
  color: #dc2626;
  font-size: 0.85rem;
  text-align: center;
}

.metric-card-error-icon {
  font-size: 2rem;
  opacity: 0.7;
}
/* ── Page ──────────────────────────────────────────────────────────────────── */
.xray-page {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  animation: xrayFadeIn 0.3s ease-in;
  overflow-x: hidden;
}

@keyframes xrayFadeIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Header ─────────────────────────────────────────────────────────────────── */
.xray-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.xray-title-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.xray-title-row h1 {
  font-size: 2.1rem;
  font-weight: 800;
  color: var(--text-primary);
  margin: 0;
}

.xray-page-icon {
  font-size: 2rem;
  color: var(--primary-color);
}

.xray-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

/* ── Time range ──────────────────────────────────────────────────────────────── */
.xray-time-range {
  display: inline-flex;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  overflow: hidden;
}

.btn-xray-time {
  background: transparent;
  border: none;
  border-right: 1px solid var(--border-color);
  color: var(--text-secondary);
  padding: 0.4rem 0.65rem;
  font-size: 0.82rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
}

.btn-xray-time:last-child { border-right: none; }
.btn-xray-time:hover { background: var(--border-color); color: var(--text-primary); }
.btn-xray-time.active { background: var(--primary-color); color: #fff; }

/* ── Buttons ─────────────────────────────────────────────────────────────────── */
.btn-xray-refresh,
.btn-xray-console {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 1rem;
  border-radius: 6px;
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.15s, opacity 0.15s;
  border: 1px solid transparent;
}

.btn-xray-refresh {
  background: var(--border-color);
  border-color: var(--border-color);
  color: var(--text-primary);
  padding: 0.5rem;
  gap: 0;
}
.btn-xray-refresh:hover { background: var(--hover-bg); }

.btn-xray-console {
  background: var(--primary-color);
  border-color: var(--primary-color);
  color: #fff;
}
.btn-xray-console:hover { opacity: 0.85; }

/* ── Stats row ───────────────────────────────────────────────────────────────── */
.xray-stats-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}

@media (max-width: 700px) {
  .xray-stats-row { grid-template-columns: repeat(2, 1fr); }
}

.xray-stat-card {
  background: var(--card-bg, #fff);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  padding: 1rem 1.25rem;
  text-align: center;
}

.xray-stat-card--error {
  border-color: #f87171;
  background: #fff5f5;
}

.xray-stat-value {
  font-size: 1.9rem;
  font-weight: 800;
  color: var(--text-primary);
  line-height: 1;
}

.xray-stat-card--error .xray-stat-value { color: #dc2626; }

.xray-stat-label {
  font-size: 0.78rem;
  color: var(--text-secondary);
  margin-top: 0.25rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* ── Section cards ───────────────────────────────────────────────────────────── */
.xray-section-card {
  background: var(--card-bg, #fff);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  padding: 1.25rem;
  min-width: 0;
}

.xray-section-title {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  justify-content: space-between;
}

.xray-view-toggle {
  display: flex;
  gap: 2px;
  align-items: center;
  background: var(--bg-secondary, #f1f5f9);
  border-radius: 8px;
  padding: 2px;
}

.btn-xray-view {
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: 6px;
  padding: 4px 6px;
  font-size: 1rem;
  color: var(--text-secondary);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  letter-spacing: 0;
  text-transform: none;
}

.btn-xray-view:hover {
  background: var(--bg-primary, #fff);
  color: var(--text-primary);
}

.btn-xray-view.active {
  background: var(--bg-primary, #fff);
  color: var(--primary-color, #1c7ed6);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}

.xray-count-badge {
  background: var(--primary-color);
  color: #fff;
  font-size: 0.75rem;
  border-radius: 999px;
  padding: 0.1rem 0.5rem;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
}

/* ── Service graph ───────────────────────────────────────────────────────────── */
.xray-service-grid {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.xray-service-card {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.6rem 0.85rem;
  border-radius: 7px;
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  transition: border-color 0.15s;
}

.xray-service-card--error {
  border-color: #fca5a5;
  background: #fff5f5;
}

.xray-service-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

.xray-service-info {
  flex: 1;
  min-width: 0;
}

.xray-service-name {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.xray-service-type {
  font-size: 0.75rem;
  color: var(--text-secondary);
}

.xray-service-stats {
  display: flex;
  gap: 0.75rem;
  flex-shrink: 0;
}

.xray-stat-item {
  font-size: 0.78rem;
  color: var(--text-secondary);
  white-space: nowrap;
}

.xray-stat-error {
  color: #dc2626;
  font-weight: 600;
}

/* ── Filters ─────────────────────────────────────────────────────────────────── */
.xray-filters {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.xray-filter-group {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
}

.xray-filter-label {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text-secondary);
  white-space: nowrap;
}

.xray-filter-pills {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
}

.btn-xray-filter {
  background: #fff;
  border: 1px solid #d1d9e4;
  color: #374151;
  border-radius: 999px;
  padding: 0.35rem 0.8rem;
  font-size: 0.8rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.btn-xray-filter:hover { background: #f3f4f6; }
.btn-xray-filter.active { background: var(--primary-color); color: #fff; border-color: var(--primary-color); }

/* search */
.xray-search-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.xray-search-icon {
  position: absolute;
  left: 0.75rem;
  color: var(--text-secondary);
  font-size: 1.1rem;
  pointer-events: none;
}

.xray-search-input {
  border: 1px solid var(--border-color);
  border-radius: 10px;
  padding: 0.6rem 0.8rem 0.6rem 2.3rem;
  font-size: 0.93rem;
  color: var(--text-primary);
  background: #fff;
  outline: none;
  width: 260px;
}
.xray-search-input:focus {
  outline: none;
  border-color: var(--primary-color);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary-color) 20%, transparent);
}

/* ── Table ───────────────────────────────────────────────────────────────────── */
.xray-table-wrap {
  overflow-x: auto;
}

.xray-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.84rem;
}

.xray-table th {
  text-align: left;
  padding: 0.5rem 0.75rem;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-bottom: 1px solid var(--border-color);
}

.xray-table td {
  padding: 0.55rem 0.75rem;
  border-bottom: 1px solid #f3f4f6;
  color: var(--text-primary);
  vertical-align: middle;
}

.xray-row {
  cursor: pointer;
  transition: background 0.1s;
}
.xray-row:hover { background: #f9fafb; }
.xray-row--selected { background: #eff6ff !important; }
.xray-row--fault td { color: #7f1d1d; }
.xray-row--error td { color: #7c3333; }

/* status icons */
.xray-status-icon { font-size: 1.1rem; }
.xray-status-icon.ok { color: #16a34a; }
.xray-status-icon.error { color: #d97706; }
.xray-status-icon.fault { color: #dc2626; }

/* code elements */
.xray-trace-id { font-size: 0.78rem; background: #f3f4f6; padding: 0.1rem 0.4rem; border-radius: 4px; }
.xray-exec-id  { font-size: 0.8rem; background: #eff6ff; color: #1d4ed8; padding: 0.1rem 0.4rem; border-radius: 4px; }

/* action label */
.xray-action-label { font-size: 0.83rem; color: var(--text-primary); }

/* badges */
.xray-badge {
  display: inline-block;
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
}
.badge-green  { background: #dcfce7; color: #15803d; }
.badge-blue   { background: #dbeafe; color: #1d4ed8; }
.badge-red    { background: #fee2e2; color: #b91c1c; }
.badge-orange { background: #ffedd5; color: #c2410c; }
.badge-gray   { background: #f3f4f6; color: #6b7280; }

/* ── Detail Panel (Waterfall) ────────────────────────────────────────────────── */
.xray-detail-panel {
  background: var(--card-bg, #fff);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  overflow: hidden;
}

.xray-detail-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.85rem 1.25rem;
  background: #f8fafc;
  border-bottom: 1px solid var(--border-color);
}

.xray-detail-title {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--text-primary);
}

.xray-detail-title code {
  font-size: 0.82rem;
  background: #e0e7ff;
  color: #3730a3;
  padding: 0.1rem 0.4rem;
  border-radius: 4px;
}

.xray-detail-close {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-secondary);
  font-size: 1.2rem;
  display: flex;
  align-items: center;
  border-radius: 4px;
  padding: 0.2rem;
  transition: background 0.1s;
}
.xray-detail-close:hover { background: #e5e7eb; color: var(--text-primary); }

/* Waterfall layout */
.xray-waterfall {
  padding: 0.75rem 0;
  font-size: 0.82rem;
  overflow-x: auto;
}

.xray-waterfall-header {
  display: grid;
  grid-template-columns: 260px 1fr 80px;
  padding: 0 1rem;
  margin-bottom: 0.25rem;
}

.xray-waterfall-col-label {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.xray-seg-row {
  display: grid;
  grid-template-columns: 260px 1fr 80px;
  align-items: center;
  padding: 0.2rem 1rem;
  transition: background 0.1s;
}
.xray-seg-row:hover { background: #f9fafb; }

.xray-seg-label {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  overflow: hidden;
  white-space: nowrap;
}

.xray-seg-name {
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--text-primary);
  font-weight: 500;
}

.xray-seg-url {
  font-size: 0.72rem;
  color: var(--text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
}

.xray-seg-status {
  font-size: 0.72rem;
  padding: 0.05rem 0.3rem;
  border-radius: 3px;
  background: #dcfce7;
  color: #15803d;
}
.xray-seg-status--error { background: #fee2e2; color: #b91c1c; }

.xray-seg-err-icon {
  color: #dc2626;
  font-size: 0.9rem;
  flex-shrink: 0;
}

.xray-seg-timeline {
  position: relative;
  height: 18px;
  background: #f3f4f6;
  border-radius: 3px;
  overflow: hidden;
  margin: 0 0.5rem;
}

.xray-seg-bar {
  position: absolute;
  top: 0;
  height: 100%;
  background: #7c6fcd;
  border-radius: 3px;
  min-width: 3px;
  transition: opacity 0.1s;
}
.xray-seg-bar--fault { background: #dc2626; }
.xray-seg-bar--error { background: #f59e0b; }
.xray-seg-bar--http  { background: #0ea5e9; }

.xray-seg-duration {
  text-align: right;
  color: var(--text-secondary);
  font-size: 0.78rem;
  white-space: nowrap;
}

/* ── Shared utils ────────────────────────────────────────────────────────────── */
.xray-placeholder {
  padding: 2rem;
  text-align: center;
  color: var(--text-secondary);
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.xray-error-msg {
  padding: 1rem;
  color: #dc2626;
  background: #fff5f5;
  border-radius: 6px;
  font-size: 0.88rem;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

/* ── Service Map SVG container ───────────────────────────────────────── */
.xray-svcmap-wrap {
  overflow-x: auto;
  padding: 0.25rem 0;
}

/* No min-width — SVG scales naturally via viewBox + width:100% */
.xray-svcmap-wrap svg {
  min-width: 0;
}

.xray-spinner {
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 2px solid var(--border-color);
  border-top-color: var(--primary-color);
  border-radius: 50%;
  animation: xraySpinAnim 0.7s linear infinite;
}

@keyframes xraySpinAnim {
  to { transform: rotate(360deg); }
}

/* ── Responsive ──────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  /* ── Header: 2-row grid layout ──
     Row 1: [title]  [🔄] [↗]
     Row 2: [1h | 3h | 6h | 1d | 7d]  full width
  */
  .xray-header {
    display: grid;
    grid-template-columns: 1fr auto auto;
    grid-template-rows: auto auto;
    column-gap: 0.5rem;
    row-gap: 0.5rem;
    align-items: center;
  }

  .xray-title-row {
    grid-column: 1;
    grid-row: 1;
  }
  .xray-title-row h1 { font-size: 1.5rem; }
  .xray-page-icon    { font-size: 1.4rem; }

  /* Unwrap .xray-actions so its children become direct grid items */
  .xray-actions { display: contents; }

  /* Time range: spans all 3 columns on row 2 */
  .xray-time-range {
    grid-column: 1 / -1;
    grid-row: 2;
    display: flex;
    width: 100%;
  }
  .btn-xray-time {
    flex: 1;
    text-align: center;
    font-size: 0.78rem;
    padding: 0.42rem 0.25rem;
  }

  /* Icon-only action buttons: top-right */
  .btn-xray-refresh {
    grid-column: 2;
    grid-row: 1;
    padding: 0.5rem 0.65rem;
  }
  .btn-xray-console {
    grid-column: 3;
    grid-row: 1;
    padding: 0.5rem 0.65rem;
  }
  .btn-xray-refresh span,
  .btn-xray-console span { display: none; }

  /* ── Filters: card with dividers ── */
  .xray-filters {
    flex-direction: column;
    gap: 0;
    background: var(--card-bg, #fff);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 0;
    overflow: hidden;
  }

  .xray-filter-group {
    width: 100%;
    flex-direction: row;
    align-items: center;
    flex-wrap: nowrap;
    gap: 0.6rem;
    padding: 0.65rem 1rem;
    border-bottom: 1px solid var(--border-color);
  }
  .xray-filter-group:last-child { border-bottom: none; }

  .xray-filter-label {
    min-width: 80px;
    flex-shrink: 0;
    font-size: 0.8rem;
  }

  /* Filter pills wrap */
  .xray-filter-pills { flex-wrap: wrap; gap: 0.3rem; }
  .btn-xray-filter { font-size: 0.78rem; padding: 0.28rem 0.65rem; }

  /* Search inside filter group */
  .xray-search-wrap { flex: 1; min-width: 0; width: 100%; }
  .xray-search-input { width: 100%; box-sizing: border-box; }

  /* Stats */
  .xray-stats-row { grid-template-columns: repeat(2, 1fr); gap: 0.6rem; }
  .xray-stat-value { font-size: 1.5rem; }

  /* Table: hide less-critical columns */
  .xray-table th:nth-child(4),
  .xray-table td:nth-child(4),
  .xray-table th:nth-child(5),
  .xray-table td:nth-child(5),
  .xray-table th:nth-child(7),
  .xray-table td:nth-child(7) { display: none; }

  /* Waterfall label column narrower */
  .xray-waterfall-header,
  .xray-seg-row { grid-template-columns: 150px 1fr 68px; }

  .xray-section-card { padding: 1rem; }
}

@media (max-width: 380px) {
  .xray-title-row h1 { font-size: 1.2rem; }
  .btn-xray-time { font-size: 0.72rem; padding: 0.38rem 0.15rem; }

  .xray-waterfall-header,
  .xray-seg-row { grid-template-columns: 110px 1fr 52px; }

  /* Service list stats wrap */
  .xray-service-stats { flex-wrap: wrap; gap: 0.3rem; }
}

/* ─── Pagination ─────────────────────────────────────────────────────────── */
.xray-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 12px 16px;
  border-top: 1px solid var(--border-color, #e5e7eb);
  margin-top: 4px;
}
.xray-page-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 1px solid var(--border-color, #d1d5db);
  border-radius: 6px;
  background: var(--card-bg, #fff);
  color: var(--text-primary, #374151);
  cursor: pointer;
  font-size: 18px;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.xray-page-btn:hover:not(:disabled) {
  background: var(--primary-color, #3b82f6);
  color: #fff;
  border-color: var(--primary-color, #3b82f6);
}
.xray-page-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
.xray-page-info {
  font-size: 0.85rem;
  color: var(--text-secondary, #6b7280);
  min-width: 100px;
  text-align: center;
  font-weight: 500;
}
/* ── Page ──────────────────────────────────────────────────────────────────── */
.logs-page {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  animation: logsFadeIn 0.3s ease-in;
  overflow-x: hidden;
}

@keyframes logsFadeIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Header ─────────────────────────────────────────────────────────────────── */
.logs-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.logs-title-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.logs-title-row h1 {
  font-size: 2.1rem;
  font-weight: 800;
  color: var(--text-primary);
  margin: 0;
}

.logs-page-icon {
  font-size: 2rem;
  color: var(--primary-color);
}

.logs-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.logs-action-buttons {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

/* ── Time range ──────────────────────────────────────────────────────────────── */
.logs-time-range {
  display: inline-flex;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  overflow: hidden;
}

.btn-logs-time {
  background: transparent;
  border: none;
  border-right: 1px solid var(--border-color);
  color: var(--text-secondary);
  padding: 0.4rem 0.65rem;
  font-size: 0.82rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
}
.btn-logs-time:last-child { border-right: none; }
.btn-logs-time:hover  { background: var(--border-color); color: var(--text-primary); }
.btn-logs-time.active { background: var(--primary-color); color: #fff; }

/* ── Action buttons ──────────────────────────────────────────────────────────── */
.btn-logs-refresh,
.btn-logs-console {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 1rem;
  border-radius: 6px;
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.15s, opacity 0.15s;
  border: 1px solid transparent;
}

.btn-logs-refresh {
  background: var(--border-color);
  border-color: var(--border-color);
  color: var(--text-primary);
  padding: 0.5rem;
  gap: 0;
}
.btn-logs-refresh:hover    { background: var(--hover-bg); }
.btn-logs-refresh:disabled { opacity: 0.55; cursor: default; }

.btn-logs-console {
  background: var(--primary-color);
  border-color: var(--primary-color);
  color: #fff;
}
.btn-logs-console:hover { opacity: 0.85; }

/* ── Controls row ────────────────────────────────────────────────────────────── */
.logs-controls {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  flex-wrap: wrap;
}

.logs-control-group {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
}

.logs-control-label {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text-secondary);
  white-space: nowrap;
}

/* Lambda group selector */
.logs-group-tabs {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
}

.btn-logs-group {
  background: #fff;
  border: 1px solid #d1d9e4;
  color: #374151;
  border-radius: 6px;
  padding: 0.35rem 0.8rem;
  font-size: 0.82rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.btn-logs-group:hover  { background: #f3f4f6; }
.btn-logs-group.active { background: var(--primary-color); color: #fff; border-color: var(--primary-color); }

/* Level filter */
.logs-level-tabs {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
}

.btn-logs-level {
  border: 1px solid #d1d9e4;
  border-radius: 999px;
  padding: 0.3rem 0.75rem;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  background: #fff;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}

.btn-logs-level--error        { color: #991b1b; }
.btn-logs-level--error.active { background: #dc2626; border-color: #dc2626; color: #fff; }
.btn-logs-level--warn         { color: #92400e; }
.btn-logs-level--warn.active  { background: #d97706; border-color: #d97706; color: #fff; }
.btn-logs-level--all          { color: #374151; }
.btn-logs-level--all.active   { background: var(--primary-color); border-color: var(--primary-color); color: #fff; }

/* Search */
.logs-search-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  margin-left: auto;
}

.logs-search-icon {
  position: absolute;
  left: 0.75rem;
  color: var(--text-secondary);
  font-size: 1.1rem;
  pointer-events: none;
}

.logs-search-input {
  border: 1px solid var(--border-color);
  border-radius: 10px;
  padding: 0.6rem 0.8rem 0.6rem 2.3rem;
  font-size: 0.93rem;
  color: var(--text-primary);
  background: #fff;
  outline: none;
  width: 280px;
}
.logs-search-input:focus {
  outline: none;
  border-color: var(--primary-color);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary-color) 20%, transparent);
}

/* ── Stats row ───────────────────────────────────────────────────────────────── */
.logs-stats-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}

@media (max-width: 700px) {
  .logs-stats-row { grid-template-columns: repeat(2, 1fr); }
}

.logs-stat-card {
  background: var(--card-bg, #fff);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  padding: 1rem 1.25rem;
  text-align: center;
}

.logs-stat-card--error { border-color: #f87171; background: #fff5f5; }
.logs-stat-card--warn  { border-color: #fcd34d; background: #fffbeb; }

.logs-stat-value {
  font-size: 1.9rem;
  font-weight: 800;
  color: var(--text-primary);
  line-height: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.logs-stat-card--error .logs-stat-value { color: #dc2626; }
.logs-stat-card--warn  .logs-stat-value { color: #b45309; }

.logs-stat-label {
  font-size: 0.78rem;
  color: var(--text-secondary);
  margin-top: 0.25rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* ── Section card ────────────────────────────────────────────────────────────── */
.logs-section-card {
  background: var(--card-bg, #fff);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  padding: 1.25rem;
  min-width: 0;
}

.logs-section-title {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.logs-count-badge {
  background: var(--primary-color);
  color: #fff;
  font-size: 0.75rem;
  border-radius: 999px;
  padding: 0.1rem 0.5rem;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
}

/* ── Log events list ─────────────────────────────────────────────────────────── */
.logs-events-list {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

/* Individual log row */
.logs-row {
  border-radius: 7px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 0.1s, border-color 0.1s;
  outline: none;
  overflow: hidden;   /* contain pre elements inside the row */
  max-width: 100%;
}

.logs-row--error { border-color: #fecaca; background: #fff5f5; }
.logs-row--error:hover { background: #fee2e2; }
.logs-row--warn  { border-color: #fde68a; background: #fffbeb; }
.logs-row--warn:hover  { background: #fef3c7; }
.logs-row--info  { border-color: #e0e7ff; background: #f8faff; }
.logs-row--info:hover  { background: #eff6ff; }

.logs-row-header {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.55rem 0.75rem;
  min-height: 2.4rem;
}

/* Level icons */
.logs-level-icon { font-size: 1.15rem; flex-shrink: 0; }
.logs-level--error { color: #dc2626; }
.logs-level--warn  { color: #d97706; }
.logs-level--info  { color: #2563eb; }

/* Timestamp */
.logs-ts {
  font-size: 0.78rem;
  color: var(--text-secondary);
  white-space: nowrap;
  flex-shrink: 0;
}

/* Stream ID */
.logs-stream {
  font-size: 0.72rem;
  background: #e5e7eb;
  color: #374151;
  padding: 0.1rem 0.4rem;
  border-radius: 4px;
  flex-shrink: 0;
  max-width: 100px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Message preview */
.logs-msg-preview {
  font-size: 0.83rem;
  color: var(--text-primary);
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Expand icon */
.logs-expand-icon {
  color: var(--text-secondary);
  font-size: 1.2rem;
  flex-shrink: 0;
  display: flex;
}

/* Expanded detail area */
.logs-row-detail {
  padding: 0 0.75rem 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  /* ensure pre elements can't blow out the row width */
  overflow: hidden;
  min-width: 0;
}

.logs-raw,
.logs-raw,
.logs-json {
  margin: 0;
  font-size: 0.8rem;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-all;
  border-radius: 6px;
  padding: 0.6rem 0.75rem;
  overflow-x: auto;
  /* critical: never wider than the log row card */
  max-width: 100%;
  box-sizing: border-box;
}

.logs-raw  { background: #1a1a2e; color: #e2e8f0; }
.logs-json { background: #0f172a; color: #7dd3fc; }

/* ── Utility ─────────────────────────────────────────────────────────────────── */
.logs-placeholder {
  padding: 2rem;
  text-align: center;
  color: var(--text-secondary);
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.logs-error-msg {
  padding: 1rem;
  color: #dc2626;
  background: #fff5f5;
  border-radius: 6px;
  font-size: 0.88rem;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.logs-inline-error {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  color: #dc2626;
  font-size: 0.85rem;
}

.logs-spinner-inline {
  display: inline-flex;
  align-items: center;
}

.logs-spinner {
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 2px solid var(--border-color);
  border-top-color: var(--primary-color);
  border-radius: 50%;
  animation: logsSpinAnim 0.7s linear infinite;
}

@keyframes logsSpinAnim {
  to { transform: rotate(360deg); }
}

/* ── Responsive ──────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  /* ── Header: stack title above actions row ──
     Row 1: [🖥 Logs de Lambda]
     Row 2: [30m|1h|3h|12h|1d|3d]    [🔄][↗]
  */
  .logs-header {
    flex-direction: column;
    align-items: stretch;
    gap: 0.5rem;
  }

  .logs-title-row h1 { font-size: 1.5rem; }
  .logs-page-icon    { font-size: 1.4rem; }

  /* Actions: time range full width above, icon buttons row below */
  .logs-actions {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.5rem;
    width: 100%;
  }

  .logs-time-range {
    width: 100%;
    display: flex;
    border-radius: 6px;
    overflow: hidden;
  }
  .btn-logs-time {
    flex: 1;
    text-align: center;
    font-size: 0.78rem;
    padding: 0.42rem 0.2rem;
  }

  .logs-action-buttons {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
  }
  .btn-logs-refresh,
  .btn-logs-console { padding: 0.5rem 0.65rem; }
  .btn-logs-refresh span,
  .btn-logs-console span { display: none; }

  /* ── Controls: card with dividers ── */
  .logs-controls {
    flex-direction: column;
    gap: 0;
    background: var(--card-bg, #fff);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 0;
    overflow: hidden;
  }

  .logs-control-group {
    width: 100%;
    flex-direction: row;
    align-items: flex-start;
    flex-wrap: nowrap;
    gap: 0.6rem;
    padding: 0.65rem 1rem;
    border-bottom: 1px solid var(--border-color);
  }

  .logs-control-label {
    min-width: 52px;
    padding-top: 0.2rem;
    flex-shrink: 0;
    font-size: 0.8rem;
  }

  /* Lambda + level pills fill remaining width */
  .logs-group-tabs { flex: 1; flex-wrap: wrap; gap: 0.35rem; }
  .logs-level-tabs { flex: 1; flex-wrap: wrap; gap: 0.35rem; }

  .btn-logs-group { font-size: 0.78rem; padding: 0.3rem 0.65rem; }
  .btn-logs-level { font-size: 0.75rem; padding: 0.28rem 0.6rem; }

  /* Search: card row at the bottom, full width */
  .logs-search-wrap {
    display: flex;
    position: relative;
    align-items: center;
    width: 100%;
    margin-left: 0;
    min-width: 0;
    padding: 0.65rem 1rem;
    box-sizing: border-box;
  }
  .logs-search-input { width: 100%; box-sizing: border-box; }

  /* Hide stream badge in log rows */
  .logs-stream { display: none; }

  /* Stats */
  .logs-stats-row { grid-template-columns: repeat(2, 1fr); gap: 0.6rem; }
  .logs-stat-value { font-size: 1.5rem; }

  .logs-section-card { padding: 1rem; }
}

@media (max-width: 380px) {
  .logs-title-row h1 { font-size: 1.2rem; }
  .btn-logs-time { font-size: 0.7rem; padding: 0.38rem 0.1rem; }
}

/* ─── Pagination ─────────────────────────────────────────────────────────── */
.logs-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 12px 16px;
  border-top: 1px solid var(--border-color, #e5e7eb);
  margin-top: 4px;
}
.logs-page-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 1px solid var(--border-color, #d1d5db);
  border-radius: 6px;
  background: var(--card-bg, #fff);
  color: var(--text-primary, #374151);
  cursor: pointer;
  font-size: 18px;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.logs-page-btn:hover:not(:disabled) {
  background: var(--primary-color, #3b82f6);
  color: #fff;
  border-color: var(--primary-color, #3b82f6);
}
.logs-page-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
.logs-page-info {
  font-size: 0.85rem;
  color: var(--text-secondary, #6b7280);
  min-width: 64px;
  text-align: center;
  font-weight: 500;
}
/* ── Page ──────────────────────────────────────────────────────────────────── */
.users-page {
  display: flex;
  flex-direction: column;
  animation: usersFadeIn 0.3s ease-in;
}

@keyframes usersFadeIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Header ────────────────────────────────────────────────────────────────── */
.users-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.5rem;
}

.users-title-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.users-title-row h1 {
  font-size: 1.9rem;
  color: var(--text-primary);
  margin: 0;
}

.users-icon {
  font-size: 2rem;
  color: var(--primary-color);
}

.users-actions {
  display: flex;
  gap: 0.75rem;
}

.btn-users-refresh,
.btn-users-create {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 1rem;
  border-radius: 6px;
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  border: none;
  transition: background 0.15s, opacity 0.15s;
}

.btn-users-refresh {
  background: var(--border-color);
  color: var(--text-primary);
  padding: 0.5rem;
  gap: 0;
}

.btn-users-refresh:hover:not(:disabled) {
  background: var(--hover-bg);
}

.btn-users-create {
  background: var(--primary-color);
  color: var(--btn-primary-text);
}

.btn-users-create:hover {
  opacity: 0.85;
}

/* ── Loading / Error / Empty ───────────────────────────────────────────────── */
.users-loading,
.users-empty {
  color: var(--text-secondary);
  text-align: center;
  padding: 2rem;
}

.users-error {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: #ef4444;
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 6px;
  padding: 0.75rem 1rem;
  margin-bottom: 1rem;
  font-size: 0.9rem;
}

/* ── Search bar ─────────────────────────────────────────────────────────────── */
.users-search-bar {
  position: relative;
  display: inline-flex;
  align-items: center;
  margin-bottom: 1rem;
}

.users-search-icon {
  position: absolute;
  left: 0.75rem;
  color: var(--text-secondary);
  font-size: 1.1rem;
  pointer-events: none;
}

.users-search-input {
  border: 1px solid var(--border-color);
  border-radius: 10px;
  padding: 0.6rem 0.8rem 0.6rem 2.3rem;
  font-size: 0.93rem;
  color: var(--text-primary);
  background: #fff;
  outline: none;
  width: 300px;
}

.users-search-input:focus {
  outline: none;
  border-color: var(--primary-color);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary-color) 20%, transparent);
}

/* ── Table ─────────────────────────────────────────────────────────────────── */
.users-table-wrapper {
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  overflow: auto;
}

.users-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}

.users-table th {
  background: var(--bg-secondary);
  color: var(--text-secondary);
  font-weight: 600;
  text-align: left;
  padding: 0.85rem 1rem;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-bottom: 1px solid var(--border-color);
}

.users-th-sortable {
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
  white-space: nowrap;
}

.users-th-sortable:hover {
  background: #e5e7eb;
  color: var(--text-primary);
}

.label-optional {
  font-weight: 400;
  font-size: 0.8em;
  color: #94a3b8;
}

.users-th-active {
  color: var(--primary-color);
}

.users-sort-icon {
  display: inline-flex;
  vertical-align: middle;
  margin-left: 0.25rem;
  font-size: 0.9rem;
  opacity: 0.7;
}

.users-table td {
  padding: 0.85rem 1rem;
  border-bottom: 1px solid var(--border-color);
  color: var(--text-primary);
  vertical-align: middle;
}

.users-table tr:last-child td {
  border-bottom: none;
}

.users-table tr:hover td {
  background: #f9fafb;
}

.users-row-disabled td {
  opacity: 0.55;
}

.users-cell-name {
  font-weight: 600;
}

.users-cell-date {
  color: var(--text-secondary);
  font-size: 0.85rem;
  white-space: nowrap;
}

.users-cell-actions {
  display: flex;
  gap: 0.4rem;
}

/* ── Role badge ────────────────────────────────────────────────────────────── */
.users-role-badge {
  display: inline-block;
  padding: 0.2rem 0.6rem;
  border-radius: 12px;
  font-size: 0.78rem;
  font-weight: 600;
}

.users-role-admin {
  background: #ede9fe;
  color: #6d28d9;
}

.users-role-reports {
  background: #dcfce7;
  color: #166534;
}

.users-role-generic {
  background: #e0e7ff;
  color: #3730a3;
}

/* ── Status label ──────────────────────────────────────────────────────────── */
.users-status-label {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.25rem 0.65rem;
  border-radius: 12px;
  font-size: 0.8rem;
  font-weight: 600;
}

.users-status-label.enabled {
  background: #dcfce7;
  color: #166534;
}

.users-status-label.disabled {
  background: #fee2e2;
  color: #991b1b;
}

/* ── Icon buttons ──────────────────────────────────────────────────────────── */
.btn-users-icon {
  background: transparent;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  padding: 0.35rem 0.5rem;
  cursor: pointer;
  color: var(--text-secondary);
  font-size: 1rem;
  display: inline-flex;
  align-items: center;
  transition: background 0.15s, color 0.15s;
}

.btn-users-icon:hover:not(:disabled) {
  background: var(--border-color);
  color: var(--text-primary);
}

.btn-users-icon:disabled {
  opacity: 0.35;
  cursor: default;
}

.btn-users-icon-danger:hover:not(:disabled) {
  background: #fee2e2;
  color: #dc2626;
  border-color: #fca5a5;
}

.btn-users-icon-warning:hover:not(:disabled) {
  background: #fef3c7;
  color: #d97706;
  border-color: #fcd34d;
}

.btn-users-icon-success:hover:not(:disabled) {
  background: #dcfce7;
  color: #16a34a;
  border-color: #86efac;
}

/* ── Modal ─────────────────────────────────────────────────────────────────── */
.users-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 1rem;
}

.users-modal {
  background: white;
  border-radius: 10px;
  padding: 2rem;
  width: 100%;
  max-width: 440px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
}

.users-modal-sm {
  max-width: 360px;
}

.users-modal-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 1.5rem;
}

.users-modal-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.users-modal-form label {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--text-secondary);
}

.users-modal-form input,
.users-modal-form select {
  padding: 0.55rem 0.75rem;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  font-size: 0.95rem;
  color: var(--text-primary);
  background: var(--input-bg);
  outline: none;
  transition: border-color 0.15s;
}

.users-modal-form select option {
  background: var(--input-bg);
  color: var(--text-primary);
}

.users-modal-form input:focus,
.users-modal-form select:focus {
  border-color: var(--primary-color);
  background: var(--input-bg);
}

.users-role-select-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.users-role-select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: 100%;
  padding: 0.7rem 2.4rem 0.7rem 0.8rem;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  background: var(--input-bg);
  color: var(--text-primary);
  font-size: 0.95rem;
  font-weight: 600;
  transition: border-color 0.15s, box-shadow 0.15s, background-color 0.15s;
}

.users-role-select option {
  background: var(--input-bg);
  color: var(--text-primary);
}

.users-role-select:hover:not(:disabled) {
  border-color: var(--border-color);
  background: var(--input-bg);
}

.users-role-select:focus {
  border-color: var(--primary-color);
  box-shadow: 0 0 0 3px rgba(232, 93, 4, 0.12);
  background: var(--input-bg);
  outline: none;
}

.users-role-select:disabled {
  background: var(--bg-secondary);
  color: var(--text-light);
  border-color: var(--border-color);
  cursor: not-allowed;
}

.users-role-select-arrow {
  position: absolute;
  right: 0.8rem;
  font-size: 0.85rem;
  color: #6b7280;
  pointer-events: none;
}

.users-role-select:focus + .users-role-select-arrow {
  color: var(--primary-color);
}

.users-modal-error {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  color: #dc2626;
  font-size: 0.85rem;
  background: #fef2f2;
  padding: 0.6rem 0.75rem;
  border-radius: 6px;
}

.users-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.75rem;
  margin-top: 0.5rem;
}

.btn-users-cancel {
  padding: 0.5rem 1.1rem;
  border-radius: 6px;
  border: 1px solid var(--border-color);
  background: var(--card-bg);
  color: var(--text-primary);
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
}

.btn-users-cancel:hover:not(:disabled) {
  background: var(--hover-bg);
}

.btn-users-save {
  padding: 0.5rem 1.25rem;
  border-radius: 6px;
  border: none;
  background: var(--primary-color);
  color: var(--btn-primary-text);
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.15s;
}

.btn-users-save:hover:not(:disabled) {
  opacity: 0.85;
}

.btn-users-save:disabled,
.btn-users-cancel:disabled {
  opacity: 0.5;
  cursor: default;
}

.btn-users-delete {
  padding: 0.5rem 1.25rem;
  border-radius: 6px;
  border: none;
  background: var(--danger);
  color: #fff;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.15s;
}

.btn-users-delete:hover:not(:disabled) {
  opacity: 0.85;
}

.btn-users-delete:disabled {
  opacity: 0.5;
  cursor: default;
}

.users-delete-msg {
  color: var(--text-secondary);
  font-size: 0.95rem;
  margin: 0 0 1.25rem;
}

.users-modal-hint {
  font-size: 0.85rem;
  color: #64748b;
  margin: 0 0 1.25rem;
}

/* ── Activity modal ─────────────────────────────────────────────────────────── */
.users-modal-activity {
  max-width: 760px;
  width: 100%;
  /* The modal itself scrolls when content is taller than the viewport */
  max-height: calc(100vh - 2rem);
  overflow-y: auto;
}

/* No special layout needed — just a normal flow container */
.activity-modal-body {
  display: block;
}

.activity-summary {
  display: flex;
  gap: 1.5rem;
  padding: 1rem 1.25rem;
  background: var(--bg-secondary);
  border-radius: 8px;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
}

.activity-summary-item {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.activity-label {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-secondary);
}

.activity-value {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-primary);
}

.activity-status-badge {
  display: inline-block;
  padding: 0.2rem 0.65rem;
  border-radius: 12px;
  font-size: 0.8rem;
  font-weight: 600;
}

.activity-status-high {
  background: #fef3c7;
  color: #92400e;
}

.activity-status-medium {
  background: #fef9c3;
  color: #713f12;
}

.activity-status-expired {
  background: #f1f5f9;
  color: #64748b;
}

.activity-status-none {
  background: #f1f5f9;
  color: #94a3b8;
}

.activity-history-title {
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-secondary);
  margin: 0 0 0.75rem;
}

.activity-history {
  display: block;
}

.activity-table-wrapper {
  overflow-x: auto;
  border-radius: 8px;
  border: 1px solid var(--border-color);
}

.activity-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
  table-layout: auto;
  word-break: break-word;
}

.activity-table th {
  background: var(--bg-secondary);
  color: var(--text-secondary);
  font-weight: 600;
  text-align: left;
  padding: 0.65rem 0.85rem;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-bottom: 1px solid var(--border-color);
}

.activity-table td {
  padding: 0.65rem 0.85rem;
  border-bottom: 1px solid var(--border-color);
  color: var(--text-primary);
  vertical-align: middle;
}

.activity-table tr:last-child td {
  border-bottom: none;
}

.activity-cell-date {
  color: var(--text-secondary);
  font-size: 0.82rem;
}

.activity-cell-ip {
  font-family: monospace;
  font-size: 0.82rem;
  color: var(--text-secondary);
}

.activity-result-badge {
  display: inline-block;
  padding: 0.15rem 0.5rem;
  border-radius: 10px;
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
}

.activity-result-badge.pass {
  background: #dcfce7;
  color: #166534;
}

.activity-result-badge.fail {
  background: #fee2e2;
  color: #991b1b;
}

.activity-empty {
  color: var(--text-secondary);
  font-size: 0.9rem;
  text-align: center;
  padding: 1.5rem 0;
}

.activity-modal-actions {
  margin-top: 1.5rem;
}

@media (max-width: 768px) {
  .users-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
  }

  .users-actions {
    width: 100%;
    justify-content: flex-end;
  }

  /* Hide the table header */
  .users-table thead {
    display: none;
  }

  .users-table,
  .users-table tbody,
  .users-table tr,
  .users-table td {
    display: block;
    width: 100%;
  }

  /* Each row becomes a card */
  .users-table tr {
    background: white;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    margin-bottom: 0.75rem;
    padding: 0.75rem 1rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  }

  .users-table tr:hover td {
    background: transparent;
  }

  .users-table td {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.4rem 0;
    border-bottom: none;
    font-size: 0.88rem;
  }

  .users-table td::before {
    content: attr(data-label);
    font-weight: 600;
    font-size: 0.78rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    flex-shrink: 0;
    margin-right: 0.75rem;
  }

  .users-cell-name {
    font-size: 1rem !important;
  }

  .users-cell-actions {
    justify-content: flex-end;
    gap: 0.4rem;
    padding-top: 0.5rem !important;
    border-top: 1px solid var(--border-color);
    margin-top: 0.25rem;
  }

  .users-cell-actions::before {
    display: none;
  }

  .users-empty {
    text-align: center;
  }

  .users-table tr td.users-empty::before {
    display: none;
  }

  /* ── Activity modal responsive ───────────────────────────────────────────── */
  .users-modal-activity {
    max-height: 100vh;
    border-radius: 0;
    padding: 1.25rem 1rem;
  }

  .activity-summary {
    flex-direction: column;
    gap: 0.75rem;
  }

  /* Collapse activity table to card layout on mobile */
  .activity-table thead {
    display: none;
  }

  .activity-table,
  .activity-table tbody,
  .activity-table tr,
  .activity-table td {
    display: block;
    width: 100%;
  }

  .activity-table tr {
    border-bottom: 1px solid var(--border-color);
    padding: 0.5rem 0;
  }

  .activity-table tr:last-child {
    border-bottom: none;
  }

  .activity-table td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.3rem 0.85rem;
    border-bottom: none;
    font-size: 0.83rem;
  }

  .activity-table td::before {
    content: attr(data-label);
    font-weight: 600;
    font-size: 0.75rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    flex-shrink: 0;
    margin-right: 0.75rem;
  }

  .activity-cell-date,
  .activity-cell-ip {
    white-space: normal;
  }

  .theme-stats-panel {
    padding: 1rem;
  }

  .theme-stats-row {
    gap: 0.5rem;
  }

  .theme-stats-rank {
    width: 1.5rem;
  }
}

/* ── Theme chip colours (used by table column) ──────────────────────────────── */
.theme-chip-default   { background: #003049; color: #fff; }
.theme-chip-cyberpunk { background: #ff00ff; color: #000; }
.theme-chip-jarvis    { background: #00b4d8; color: #000; }
.theme-chip-parchment { background: #8b6914; color: #fff; }
.theme-chip-rock      { background: #e63946; color: #fff; }
.theme-chip-pop       { background: #ff006e; color: #fff; }
.theme-chip-allwhite  { background: #333;    color: #fff; }
.theme-chip-golden    { background: #d4a017; color: #000; }

/* ── Theme chip in table column ─────────────────────────────────────────────── */
.users-theme-chip {
  display: inline-block;
  padding: 0.18rem 0.55rem;
  border-radius: 10px;
  font-size: 0.72rem;
  font-weight: 600;
  white-space: nowrap;
}

.users-cell-theme {
  white-space: nowrap;
}

/* ── UserModal: new fields ──────────────────────────────────────────────────── */
.users-field-optional {
  font-weight: 400;
  font-size: 0.8em;
  color: #94a3b8;
}

.users-branch-field {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.users-branch-field-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.users-branch-label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-primary);
}

.users-branch-toggle-all {
  background: none;
  border: none;
  padding: 0;
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--accent, #003049);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.users-branch-toggle-all:hover {
  opacity: 0.75;
}

.users-branch-toggle-all:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.users-branch-checks {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.4rem 0.75rem;
  padding: 0.65rem 0.75rem;
  background: var(--bg-secondary, #f8fafc);
  border: 1px solid var(--border-color, #e2e8f0);
  border-radius: 8px;
}

.users-branch-check-row {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  cursor: pointer;
  color: var(--text-primary);
  padding: 0.15rem 0;
}

.users-branch-check-row input[type="checkbox"] {
  width: 1rem;
  height: 1rem;
  margin-top: 0.15rem;
  flex-shrink: 0;
  cursor: pointer;
  accent-color: var(--accent, #003049);
}

.users-branch-check-info {
  display: flex;
  flex-direction: column;
  gap: 0.05rem;
}

.users-branch-check-name {
  font-size: 0.83rem;
  font-weight: 500;
  line-height: 1.2;
}

.users-branch-check-city {
  font-size: 0.73rem;
  color: var(--text-secondary, #64748b);
  line-height: 1.2;
}

.users-branch-no-restriction {
  font-size: 0.78rem;
  color: var(--text-secondary, #64748b);
  margin: 0;
  padding: 0.1rem 0.25rem;
}
/* ── Page ──────────────────────────────────────────────────────────────────── */
.roles-page {
  display: flex;
  flex-direction: column;
  animation: rolesFadeIn 0.3s ease-in;
}

@keyframes rolesFadeIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Header ────────────────────────────────────────────────────────────────── */
.roles-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.5rem;
}

.roles-title-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.roles-title-row h1 {
  font-size: 1.9rem;
  color: var(--text-primary);
  margin: 0;
}

.roles-header-icon {
  color: var(--primary-color);
}

.roles-header-actions {
  display: flex;
  gap: 0.75rem;
}

.roles-subtitle {
  color: var(--text-secondary);
  font-size: 0.9rem;
  margin: 0 0 1.5rem;
}

/* ── Error / Loading ───────────────────────────────────────────────────────── */
.roles-error-banner {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: #fef2f2;
  border: 1px solid #fca5a5;
  color: #991b1b;
  padding: 0.75rem 1rem;
  border-radius: 6px;
  margin-bottom: 1rem;
}

.roles-loading {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  color: var(--text-secondary);
  padding: 2rem 0;
}

.roles-spinner {
  width: 22px;
  height: 22px;
  border: 3px solid var(--border-color);
  border-top-color: var(--primary-color);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.spin {
  animation: spin 0.8s linear infinite;
}

.roles-empty {
  color: var(--text-secondary);
  padding: 2rem;
  text-align: center;
}

/* ── List ───────────────────────────────────────────────────────────────────── */
.roles-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* ── Role Card ──────────────────────────────────────────────────────────────── */
.role-card {
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  overflow: hidden;
  transition: box-shadow 0.2s;
}

.role-card:hover {
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}

.role-card--expanded {
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}

/* ── Card Header ────────────────────────────────────────────────────────────── */
.role-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem;
  cursor: pointer;
  user-select: none;
  gap: 1rem;
}

.role-card-title {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
}

.role-shield-icon {
  font-size: 1.6rem;
  flex-shrink: 0;
}

.shield-builtin {
  color: var(--primary-color);
}

.shield-custom {
  color: #6b7280;
}

.role-name {
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--text-primary);
  display: block;
}

.role-id {
  font-size: 0.78rem;
  color: var(--text-secondary);
  font-family: monospace;
  display: block;
  margin-top: 1px;
}

.role-builtin-badge {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 500;
  background: #ede9fe;
  color: #6d28d9;
  border-radius: 4px;
  padding: 1px 6px;
  margin-left: 0.4rem;
  vertical-align: middle;
}

.role-locked-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 0.7rem;
  font-weight: 600;
  background: #f1f5f9;
  color: #475569;
  border-radius: 4px;
  padding: 1px 6px;
  margin-left: 0.4rem;
  vertical-align: middle;
  border: 1px solid #e2e8f0;
}

.role-perm-row--locked {
  opacity: 0.65;
  cursor: default;
}

.role-admin-notice {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0;
  font-size: 0.83rem;
  color: #64748b;
  font-style: italic;
}

.role-card-meta {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-shrink: 0;
  color: var(--text-secondary);
  font-size: 0.85rem;
}

.role-save-btn-top {
  font-size: 0.8rem !important;
  padding: 0.3rem 0.75rem !important;
  height: 32px;
  white-space: nowrap;
}

.role-user-count,
.role-perm-count {
  display: flex;
  align-items: center;
  gap: 0.3rem;
}

.role-expand-btn {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  padding: 0;
}

/* ── Card Body ──────────────────────────────────────────────────────────────── */
.role-card-body {
  border-top: 1px solid var(--border-color);
  padding: 1.25rem;
}

.role-perm-sections {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-bottom: 1.25rem;
}

/* ── Section ─────────────────────────────────────────── */
.role-perm-section {
  border: 1px solid var(--border-color, #e5e7eb);
  border-radius: 8px;
  overflow: hidden;
}

.role-perm-section-header {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.6rem 1rem;
  background: var(--bg-secondary, #f9fafb);
  border-bottom: 1px solid var(--border-color, #e5e7eb);
  user-select: none;
}

.role-perm-section-icon {
  font-size: 1rem;
  line-height: 1;
}

.role-perm-section-label {
  font-size: 0.82rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-primary, #111827);
  flex: 1;
}

.role-section-toggle {
  width: 15px;
  height: 15px;
  accent-color: var(--primary-color, #3b82f6);
  cursor: pointer;
  flex-shrink: 0;
}

.role-perm-section-count {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-secondary, #6b7280);
  background: var(--border-color, #e5e7eb);
  border-radius: 10px;
  padding: 1px 8px;
  min-width: 32px;
  text-align: center;
}

/* ── Section body ───────────────────────────────────── */
.role-perm-section-body {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem 2rem;
  padding: 1rem 1.25rem;
}

.role-resource-block {
  flex: 1 1 220px;
  min-width: 180px;
}

/* Responsive multi-column list of permission rows inside each resource block */
.role-perm-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 0 0.75rem;
}

/* Reports section spans full width and uses a nested sub-grid */
.role-perm-section-body--reports {
  display: block;
  padding: 0.75rem 1rem;
}

.role-report-subgroups-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 0.75rem 1.5rem;
}

/* Keep old grid class for any fallback reference */
.role-perms-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 1.5rem 2rem;
  margin-bottom: 1.25rem;
}

.role-resource-block h4 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-secondary);
  margin: 0 0 0.75rem;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid var(--border-color);
}

.role-resource-toggle {
  flex-shrink: 0;
  width: 15px;
  height: 15px;
  accent-color: var(--primary-color);
  cursor: pointer;
  margin: 0;
}

/* ── Report sub-groups ─────────────────────────────────── */
.role-report-subgroup {
  margin-bottom: 0.75rem;
}

.role-report-subgroup-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 0.35rem;
  padding: 0.25rem 0.4rem;
  background: var(--bg-secondary, rgba(0,0,0,0.04));
  border-radius: 5px;
}

.role-perm-row--sub {
  padding-left: 1.2rem;
}

.role-perm-row {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 0.35rem 0;
  cursor: pointer;
}

.role-perm-row input[type='checkbox'] {
  margin-top: 3px;
  flex-shrink: 0;
  accent-color: var(--primary-color);
  width: 15px;
  height: 15px;
  cursor: pointer;
}

.role-perm-row input[type='checkbox']:disabled {
  cursor: not-allowed;
}

.role-perm-info {
  display: flex;
  flex-direction: column;
}

.role-perm-name {
  font-size: 0.88rem;
  color: var(--text-primary);
  line-height: 1.3;
}

.role-perm-id {
  font-size: 0.72rem;
  color: var(--text-secondary);
  font-family: monospace;
  margin-top: 1px;
}

/* ── Card Footer ────────────────────────────────────────────────────────────── */
.role-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid var(--border-color);
  padding-top: 1rem;
  gap: 1rem;
  flex-wrap: wrap;
}

.role-footer-left,
.role-footer-right {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.role-save-error {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  color: #dc2626;
  font-size: 0.85rem;
}

.role-save-ok {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  color: #16a34a;
  font-size: 0.85rem;
  animation: fadeInOut 3s ease-in-out;
}

@keyframes fadeInOut {
  0%   { opacity: 0; }
  15%  { opacity: 1; }
  75%  { opacity: 1; }
  100% { opacity: 0; }
}

/* ── Buttons ────────────────────────────────────────────────────────────────── */
.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: var(--primary-color);
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 0.5rem 1rem;
  font-size: 0.88rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s;
}

.btn-primary:hover:not(:disabled) {
  background: var(--primary-dark, #1d4ed8);
}

.btn-primary:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: var(--bg-secondary);
  color: var(--text-primary);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  padding: 0.5rem 1rem;
  font-size: 0.88rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s;
}

.btn-secondary.icon-only {
  padding: 0.5rem;
  gap: 0;
  font-size: 1.1rem;
}

.btn-secondary:hover:not(:disabled) {
  background: var(--border-color);
}

.btn-secondary:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.btn-danger-sm {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  background: none;
  color: #dc2626;
  border: 1px solid #fca5a5;
  border-radius: 6px;
  padding: 0.4rem 0.8rem;
  font-size: 0.85rem;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.btn-danger-sm:hover {
  background: #fef2f2;
}

.btn-danger {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: #dc2626;
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 0.5rem 1rem;
  font-size: 0.88rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s;
}

.btn-danger:hover:not(:disabled) {
  background: #b91c1c;
}

.btn-danger:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

/* ── Modals ─────────────────────────────────────────────────────────────────── */
.roles-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 1rem;
}

.roles-modal {
  background: var(--bg-primary);
  border-radius: 10px;
  padding: 1.75rem;
  width: 100%;
  max-width: 440px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
  animation: modalSlideIn 0.2s ease-out;
}

.roles-modal-title {
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 1.25rem;
}

.roles-modal-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.roles-modal-form label {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--text-primary);
}

.roles-modal-form input {
  padding: 0.55rem 0.75rem;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  font-size: 0.88rem;
  background: var(--bg-secondary);
  color: var(--text-primary);
  transition: border-color 0.15s;
}

.roles-modal-form input:focus {
  outline: none;
  border-color: var(--primary-color);
}

.roles-modal-hint {
  font-size: 0.76rem;
  color: var(--text-secondary);
  font-weight: 400;
}

.roles-modal-error {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  color: #dc2626;
  font-size: 0.85rem;
  background: #fef2f2;
  border: 1px solid #fca5a5;
  border-radius: 6px;
  padding: 0.5rem 0.75rem;
}

.roles-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.75rem;
  margin-top: 0.5rem;
}

/* Delete modal */
.roles-delete-modal {
  background: var(--bg-primary);
  border-radius: 10px;
  padding: 2rem;
  width: 100%;
  max-width: 380px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
  animation: modalSlideIn 0.2s ease-out;
  text-align: center;
}

.roles-delete-modal h2 {
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0.75rem 0 0.5rem;
}

.roles-delete-modal p {
  color: var(--text-secondary);
  font-size: 0.9rem;
  margin-bottom: 1.25rem;
  line-height: 1.5;
}

.roles-delete-icon {
  color: #dc2626;
}

@keyframes modalSlideIn {
  from { opacity: 0; transform: translateY(-16px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

@media (max-width: 768px) {
  .roles-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
  }

  .roles-header-actions {
    width: 100%;
    justify-content: flex-end;
  }

  .role-card-meta {
    gap: 0.75rem;
  }

  .role-perms-grid {
    grid-template-columns: 1fr;
  }

  .role-card-footer {
    flex-direction: column;
    align-items: flex-start;
  }

  .role-footer-right {
    width: 100%;
    justify-content: flex-end;
  }
}
/* ─── UserAutocomplete ─────────────────────────────────────────────────────── */

.ua-wrap {
  position: relative;
  display: flex;
  flex-direction: column;
}

.ua-input-row {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--input-bg, #fff);
  border: 1px solid var(--border-color, #d1d5db);
  border-radius: 8px;
  padding: 0 10px;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.ua-input-row:focus-within {
  border-color: var(--primary-color, #3b82f6);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary-color, #3b82f6) 15%, transparent);
}

.ua-icon {
  flex-shrink: 0;
  font-size: 16px;
  color: var(--text-secondary, #9ca3af);
  pointer-events: none;
}

.ua-input {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  background: transparent;
  color: var(--text-primary, #111827);
  font-size: 0.875rem;
  padding: 8px 0;
}

.ua-input::placeholder {
  color: var(--text-secondary, #9ca3af);
}

.ua-clear-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border: none;
  border-radius: 50%;
  background: var(--border-color, #e5e7eb);
  color: var(--text-secondary, #6b7280);
  font-size: 14px;
  cursor: pointer;
  padding: 0;
  transition: background 0.15s;
}

.ua-clear-btn:hover {
  background: var(--primary-color, #3b82f6);
  color: #fff;
}

/* ─── Dropdown ─────────────────────────────────────────────────────────────── */

.ua-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 200;
  list-style: none;
  margin: 0;
  padding: 4px 0;
  background: var(--card-bg, #fff);
  border: 1px solid var(--border-color, #d1d5db);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  max-height: 280px;
  overflow-y: auto;
}

.ua-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  cursor: pointer;
  transition: background 0.1s;
}

.ua-option:hover {
  background: color-mix(in srgb, var(--primary-color, #3b82f6) 10%, transparent);
}

.ua-option-icon {
  flex-shrink: 0;
  font-size: 18px;
  color: var(--text-secondary, #9ca3af);
}

.ua-option-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.ua-option-name {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-primary, #111827);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ua-option-email {
  font-size: 0.75rem;
  color: var(--text-secondary, #6b7280);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ua-option-more {
  padding: 6px 14px;
  font-size: 0.75rem;
  color: var(--text-secondary, #9ca3af);
  font-style: italic;
  cursor: default;
}

/* ─── Dark themes ──────────────────────────────────────────────────────────── */

html[data-theme='cyberpunk'] .ua-input-row,
html[data-theme='jarvis'] .ua-input-row,
html[data-theme='rock'] .ua-input-row,
html[data-theme='golden'] .ua-input-row,
html[data-theme='starwars'] .ua-input-row {
  background: #1a1d29;
  border-color: #374151;
}

html[data-theme='jedi'] .ua-input-row {
  background: #0a0a0a;
  border-color: rgba(255, 232, 31, 0.25);
}

html[data-theme='darkforce'] .ua-input-row {
  background: #0a0a0a;
  border-color: rgba(201, 32, 32, 0.3);
}

html[data-theme='cyberpunk'] .ua-input-row:focus-within {
  border-color: #00ff9d;
  box-shadow: 0 0 0 3px rgba(0, 255, 157, 0.15);
}

html[data-theme='jarvis'] .ua-input-row:focus-within {
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}

html[data-theme='rock'] .ua-input-row:focus-within {
  border-color: #ef4444;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15);
}

html[data-theme='golden'] .ua-input-row:focus-within {
  border-color: #d97706;
  box-shadow: 0 0 0 3px rgba(217, 119, 6, 0.15);
}

html[data-theme='starwars'] .ua-input-row:focus-within {
  border-color: #FFE81F;
  box-shadow: 0 0 0 3px rgba(255, 232, 31, 0.15);
}

html[data-theme='jedi'] .ua-input-row:focus-within {
  border-color: #FFE81F;
  box-shadow: 0 0 0 3px rgba(255, 232, 31, 0.2);
}

html[data-theme='darkforce'] .ua-input-row:focus-within {
  border-color: #c92020;
  box-shadow: 0 0 0 3px rgba(201, 32, 32, 0.2);
}

html[data-theme='cyberpunk'] .ua-dropdown,
html[data-theme='jarvis'] .ua-dropdown,
html[data-theme='rock'] .ua-dropdown,
html[data-theme='golden'] .ua-dropdown,
html[data-theme='starwars'] .ua-dropdown {
  background: #1a1d29;
  border-color: #374151;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

html[data-theme='jedi'] .ua-dropdown {
  background: #0a0a0a;
  border-color: rgba(255, 232, 31, 0.2);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6);
}

html[data-theme='darkforce'] .ua-dropdown {
  background: #0a0a0a;
  border-color: rgba(201, 32, 32, 0.25);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.7);
}

html[data-theme='cyberpunk'] .ua-option:hover {
  background: rgba(0, 255, 157, 0.08);
}

html[data-theme='jarvis'] .ua-option:hover {
  background: rgba(59, 130, 246, 0.08);
}

html[data-theme='rock'] .ua-option:hover {
  background: rgba(239, 68, 68, 0.08);
}

html[data-theme='golden'] .ua-option:hover {
  background: rgba(217, 119, 6, 0.08);
}

html[data-theme='starwars'] .ua-option:hover {
  background: rgba(255, 232, 31, 0.08);
}

html[data-theme='jedi'] .ua-option:hover {
  background: rgba(255, 232, 31, 0.08);
}

html[data-theme='darkforce'] .ua-option:hover {
  background: rgba(201, 32, 32, 0.08);
}

html[data-theme='cyberpunk'] .ua-clear-btn:hover {
  background: #00ff9d;
  color: #000;
}

html[data-theme='rock'] .ua-clear-btn:hover {
  background: #ef4444;
  color: #fff;
}

html[data-theme='golden'] .ua-clear-btn:hover {
  background: #d97706;
  color: #fff;
}

html[data-theme='starwars'] .ua-clear-btn:hover {
  background: #FFE81F;
  color: #000510;
}

html[data-theme='jedi'] .ua-clear-btn:hover {
  background: #FFE81F;
  color: #000000;
}

html[data-theme='darkforce'] .ua-clear-btn:hover {
  background: #c92020;
  color: #ffffff;
}
/* ── Page ──────────────────────────────────────────────────────────────────── */
.tr-page {
  display: flex;
  flex-direction: column;
  animation: trFadeIn 0.3s ease-in;
}

@keyframes trFadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Header ────────────────────────────────────────────────────────────────── */
.tr-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.25rem;
}

.tr-title-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.tr-title-row h1 {
  font-size: 1.9rem;
  color: var(--text-primary);
  margin: 0;
}

.tr-header-icon {
  font-size: 2rem;
  color: var(--primary-color);
}

.tr-subtitle {
  color: var(--text-secondary);
  font-size: 0.9rem;
  margin: 0 0 1.5rem;
}

.btn-tr-refresh {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--primary-color);
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 0.5rem;
  font-size: 1.1rem;
  cursor: pointer;
  transition: opacity 0.15s;
}

.btn-tr-refresh:hover:not(:disabled) { opacity: 0.85; }
.btn-tr-refresh:disabled { opacity: 0.5; cursor: not-allowed; }

/* ── Error ─────────────────────────────────────────────────────────────────── */
.tr-error {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: #fef2f2;
  border: 1px solid #fca5a5;
  color: #991b1b;
  padding: 0.75rem 1rem;
  border-radius: 6px;
  margin-bottom: 1rem;
  font-size: 0.875rem;
}

/* ── Top grid ──────────────────────────────────────────────────────────────── */
.tr-top-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
  margin-bottom: 1.5rem;
}

@media (max-width: 768px) {
  .tr-top-grid {
    grid-template-columns: 1fr;
  }
}

/* ── Card ──────────────────────────────────────────────────────────────────── */
.tr-card {
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  padding: 1.25rem 1.5rem;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
}

.tr-card-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.tr-card-icon {
  font-size: 1.3rem;
  color: var(--primary-color);
  flex-shrink: 0;
}

.tr-card-title {
  font-size: 1rem;
  font-weight: 700;
  margin: 0;
  flex: 1;
  color: var(--text-primary);
}

.tr-card-badge {
  font-size: 0.75rem;
  color: var(--text-secondary);
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 20px;
  padding: 0.15rem 0.6rem;
  white-space: nowrap;
}

/* ── Loading / Empty ───────────────────────────────────────────────────────── */
.tr-loading {
  color: var(--text-secondary);
  font-size: 0.875rem;
  margin: 0;
  padding: 0.5rem 0;
}

.tr-empty-hint {
  color: var(--text-secondary);
  font-size: 0.85rem;
  margin: 0;
  line-height: 1.5;
}

/* ── Ranking list ──────────────────────────────────────────────────────────── */
.tr-rank-list {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.tr-rank-row {
  display: flex;
  align-items: center;
  gap: 0.65rem;
}

.tr-rank-pos {
  width: 2rem;
  font-size: 0.78rem;
  color: var(--text-secondary);
  text-align: right;
  flex-shrink: 0;
}

.tr-bar-wrap {
  flex: 1;
  background: var(--border-color);
  border-radius: 4px;
  height: 10px;
  overflow: hidden;
}

.tr-bar {
  height: 100%;
  border-radius: 4px;
  transition: width 0.4s ease;
  width: var(--bar-width, 0%);
}

.tr-rank-count {
  min-width: 1.5rem;
  text-align: right;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text-primary);
  flex-shrink: 0;
}

/* ── Summary list ──────────────────────────────────────────────────────────── */
.tr-summary-list {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  margin: 0;
}

.tr-summary-row {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding-bottom: 0.85rem;
  border-bottom: 1px solid var(--border-color);
}

.tr-summary-row:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.tr-summary-row dt {
  font-size: 0.75rem;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.tr-summary-row dd {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-primary);
}

.tr-summary-date {
  font-size: 0.85rem;
}

.tr-summary-sub {
  font-size: 0.78rem;
  font-weight: 400;
  color: var(--text-secondary);
}

/* ── Favorite theme panel ──────────────────────────────────────────────────── */
.tr-fav-card {
  margin-bottom: 1.5rem;
}

.tr-fav-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.tr-fav-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--border-color);
}

.tr-fav-row:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.tr-fav-user {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
}

.tr-fav-name {
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tr-fav-email {
  font-size: 0.78rem;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tr-fav-right {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}

.tr-fav-hint {
  font-size: 0.7rem;
  color: var(--text-secondary);
  font-style: italic;
}

/* ── History section ───────────────────────────────────────────────────────── */
.tr-history-section {
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  padding: 1.25rem 1.5rem;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
}

.tr-history-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.tr-history-header h2 {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
}

.tr-search-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.tr-user-search {
  width: 300px;
}

@media (max-width: 600px) {
  .tr-user-search {
    width: 100%;
  }
}

.tr-search-icon {
  position: absolute;
  left: 0.75rem;
  color: var(--text-secondary);
  font-size: 1.1rem;
  pointer-events: none;
}

.tr-search-input {
  border: 1px solid var(--border-color);
  border-radius: 10px;
  padding: 0.6rem 0.8rem 0.6rem 2.3rem;
  font-size: 0.93rem;
  color: var(--text-primary);
  background: #fff;
  outline: none;
  width: 300px;
}

.tr-search-input:focus {
  outline: none;
  border-color: var(--primary-color);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary-color) 20%, transparent);
}

/* ── Table ─────────────────────────────────────────────────────────────────── */
.tr-table-wrapper {
  overflow-x: auto;
}

.tr-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}

.tr-table thead th {
  padding: 0.6rem 0.9rem;
  text-align: left;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-bottom: 2px solid var(--border-color);
  background: var(--bg-secondary);
  white-space: nowrap;
}

.tr-th-sortable {
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.tr-th-sortable:hover {
  color: var(--primary-color);
}

.tr-sort-icon {
  font-size: 0.85rem;
}

.tr-table tbody tr {
  border-bottom: 1px solid var(--border-color);
  transition: background 0.15s;
}

.tr-table tbody tr:hover {
  background: var(--bg-secondary);
}

.tr-table tbody tr:last-child {
  border-bottom: none;
}

.tr-table td {
  padding: 0.65rem 0.9rem;
  vertical-align: middle;
  color: var(--text-primary);
}

.tr-cell-date {
  white-space: nowrap;
  color: var(--text-secondary) !important;
  font-size: 0.82rem;
}

.tr-cell-user {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.tr-user-name {
  font-weight: 600;
}

.tr-user-email {
  font-size: 0.78rem;
  color: var(--text-secondary);
}

.tr-empty {
  text-align: center;
  color: var(--text-secondary);
  padding: 2rem 0;
  font-size: 0.9rem;
  margin: 0;
}

/* ── Theme chips ───────────────────────────────────────────────────────────── */
.tr-chip {
  display: inline-block;
  padding: 0.2rem 0.65rem;
  border-radius: 12px;
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
  flex-shrink: 0;
  min-width: 6.5rem;
  text-align: center;
}

.tr-chip-default   { background: #003049; color: #fff; }
.tr-chip-cyberpunk { background: #ff00ff; color: #000; }
.tr-chip-jarvis    { background: #00b4d8; color: #000; }
.tr-chip-parchment { background: #8b6914; color: #fff; }
.tr-chip-rock      { background: #e63946; color: #fff; }
.tr-chip-pop       { background: #ff006e; color: #fff; }
.tr-chip-allwhite  { background: #333;    color: #fff; }
.tr-chip-golden    { background: #d4a017; color: #000; }
.tr-chip-starwars  { background: #4fc3f7; color: #000510; }
.tr-chip-jedi      { background: #FFE81F; color: #000; }
.tr-chip-darkforce { background: #c92020; color: #fff; }

/* ── Theme bar fills ───────────────────────────────────────────────────────── */
.tr-bar-default   { background: #003049; }
.tr-bar-cyberpunk { background: #ff00ff; }
.tr-bar-jarvis    { background: #00b4d8; }
.tr-bar-parchment { background: #8b6914; }
.tr-bar-rock      { background: #e63946; }
.tr-bar-pop       { background: #ff006e; }
.tr-bar-allwhite  { background: #555;    }
.tr-bar-golden    { background: #d4a017; }
.tr-bar-starwars  { background: #4fc3f7; }
.tr-bar-jedi      { background: #FFE81F; }
.tr-bar-darkforce { background: #c92020; }

/* ── Mobile ────────────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
  .tr-history-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .tr-search-input {
    width: 100%;
  }

  .tr-search-wrap {
    width: 100%;
  }

  .tr-card {
    padding: 1rem;
  }

  .tr-fav-row {
    flex-wrap: wrap;
    gap: 0.4rem;
  }

  .tr-history-section {
    padding: 1rem 0;
  }

  .tr-history-section > *:not(.tr-table-wrapper) {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  /* Stacked card layout — hide traditional table header */
  .tr-table-wrapper {
    overflow-x: visible;
  }

  .tr-table thead {
    display: none;
  }

  .tr-table,
  .tr-table tbody,
  .tr-table tr {
    display: block;
    width: 100%;
  }

  .tr-table tbody tr {
    border: 1px solid var(--border-color);
    border-radius: 8px;
    margin: 0 1rem 0.75rem;
    width: calc(100% - 2rem);
    padding: 0.5rem 0;
  }

  .tr-table tbody tr:last-child {
    border-bottom: 1px solid var(--border-color);
  }

  .tr-table td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.45rem 0.9rem;
    border-bottom: 1px solid var(--border-color);
  }

  .tr-table td:last-child {
    border-bottom: none;
  }

  .tr-table td::before {
    content: attr(data-label);
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    flex-shrink: 0;
    margin-right: 0.75rem;
  }

  /* User cell needs column layout inside the flex row */
  .tr-cell-user {
    flex-direction: row;
    justify-content: flex-end;
    gap: 0;
  }

  .tr-cell-user .tr-user-name,
  .tr-cell-user .tr-user-email {
    display: block;
    text-align: right;
  }
}

/* ─── Pagination ─────────────────────────────────────────────────────────── */
.tr-hist-badge {
  font-size: 0.78rem;
  font-weight: 600;
  background: var(--primary-color, #3b82f6);
  color: #fff;
  border-radius: 12px;
  padding: 2px 10px;
  margin-left: 8px;
}
.tr-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 12px 16px;
  border-top: 1px solid var(--border-color, #e5e7eb);
  margin-top: 4px;
}
.tr-page-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 1px solid var(--border-color, #d1d5db);
  border-radius: 6px;
  background: var(--card-bg, #fff);
  color: var(--text-primary, #374151);
  cursor: pointer;
  font-size: 18px;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.tr-page-btn:hover:not(:disabled) {
  background: var(--primary-color, #3b82f6);
  color: #fff;
  border-color: var(--primary-color, #3b82f6);
}
.tr-page-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
.tr-page-info {
  font-size: 0.85rem;
  color: var(--text-secondary, #6b7280);
  min-width: 64px;
  text-align: center;
  font-weight: 500;
}
/* ─── Activity Log Page ───────────────────────────────────────────────────── */

.activity-log-page {
  padding: 2rem;
  max-width: 1200px;
  margin: 0 auto;
}

/* ─── Header ─────────────────────────────────────────────────────────────── */

.activity-log-header {
  margin-bottom: 1.5rem;
}

.activity-log-title-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.5rem;
}

.activity-log-icon {
  font-size: 2rem;
  color: var(--primary-color, #7c3aed);
}

.activity-log-header h1 {
  font-size: 1.75rem;
  font-weight: 700;
  margin: 0;
  color: var(--text-primary, #111827);
}

.activity-log-subtitle {
  color: var(--text-secondary, #6b7280);
  font-size: 0.95rem;
  margin: 0;
}

/* ─── Filters ────────────────────────────────────────────────────────────── */

.activity-log-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
  align-items: center;
}

.activity-log-user-filter {
  min-width: 220px;
  flex: 1;
  max-width: 320px;
}

.activity-log-search {
  flex: 1;
  min-width: 200px;
  padding: 0.5rem 0.875rem;
  border: 1px solid var(--border-color, #d1d5db);
  border-radius: 6px;
  font-size: 0.9rem;
  background: var(--input-bg, #ffffff);
  color: var(--text-primary, #111827);
  outline: none;
}

.activity-log-search:focus {
  border-color: var(--primary-color, #7c3aed);
  box-shadow: 0 0 0 2px rgba(124, 58, 237, 0.15);
}

.activity-log-date-filter {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.activity-log-date-filter label {
  font-size: 0.85rem;
  color: var(--text-secondary, #6b7280);
  white-space: nowrap;
}

.activity-log-date-filter input[type="date"] {
  padding: 0.45rem 0.75rem;
  border: 1px solid var(--border-color, #d1d5db);
  border-radius: 6px;
  font-size: 0.875rem;
  background: var(--input-bg, #ffffff);
  color: var(--text-primary, #111827);
  outline: none;
}

.activity-log-date-filter input[type="date"]:focus {
  border-color: var(--primary-color, #7c3aed);
}

.activity-log-clear-btn {
  padding: 0.45rem 0.875rem;
  background: transparent;
  border: 1px solid var(--border-color, #d1d5db);
  border-radius: 6px;
  font-size: 0.85rem;
  color: var(--text-secondary, #6b7280);
  cursor: pointer;
  white-space: nowrap;
}

.activity-log-clear-btn:hover {
  background: var(--hover-bg, #f3f4f6);
}

/* ─── Stats Bar ──────────────────────────────────────────────────────────── */

.activity-log-stats {
  display: flex;
  gap: 1.5rem;
  margin-bottom: 1.25rem;
  font-size: 0.875rem;
  color: var(--text-secondary, #6b7280);
}

.activity-log-stats strong {
  color: var(--text-primary, #111827);
  font-weight: 600;
}

/* ─── Table ──────────────────────────────────────────────────────────────── */

.activity-log-table-wrapper {
  background: var(--card-bg, #ffffff);
  border: 1px solid var(--border-color, #e5e7eb);
  border-radius: 10px;
  overflow: hidden;
}

.activity-log-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}

.activity-log-table thead {
  background: var(--table-header-bg, #f9fafb);
}

.activity-log-table th {
  padding: 0.75rem 1rem;
  text-align: left;
  font-weight: 600;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-secondary, #6b7280);
  border-bottom: 1px solid var(--border-color, #e5e7eb);
  white-space: nowrap;
}

.activity-log-table td {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--border-color, #f3f4f6);
  color: var(--text-primary, #111827);
  vertical-align: middle;
}

.activity-log-table tr:last-child td {
  border-bottom: none;
}

.activity-log-table tbody tr:hover {
  background: var(--hover-bg, #f9fafb);
}

/* ─── Action Badge ───────────────────────────────────────────────────────── */

.action-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.25rem 0.6rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
  white-space: nowrap;
}

.action-badge.user      { background: #dbeafe; color: #1d4ed8; }
.action-badge.theme     { background: #f3e8ff; color: #7c3aed; }
.action-badge.sync      { background: #dcfce7; color: #15803d; }
.action-badge.role      { background: #ffedd5; color: #c2410c; }
.action-badge.brand     { background: #fef9c3; color: #a16207; }
.action-badge.report    { background: #e0f2fe; color: #0369a1; }
.action-badge.setting   { background: #f1f5f9; color: #475569; }
.action-badge.inventory { background: #d1fae5; color: #065f46; }
.action-badge.pos       { background: #fce7f3; color: #9d174d; }
.action-badge.other     { background: #f3f4f6; color: #6b7280; }

/* ─── User Cell ──────────────────────────────────────────────────────────── */

.activity-user-cell {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.activity-user-name {
  font-weight: 500;
  color: var(--text-primary, #111827);
}

.activity-user-email {
  font-size: 0.78rem;
  color: var(--text-secondary, #6b7280);
}

/* ─── Date Cell ──────────────────────────────────────────────────────────── */

.activity-date-cell {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.activity-date {
  font-weight: 500;
  white-space: nowrap;
}

.activity-time {
  font-size: 0.78rem;
  color: var(--text-secondary, #6b7280);
}

/* ─── Empty State ────────────────────────────────────────────────────────── */

.activity-log-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 4rem 2rem;
  color: var(--text-secondary, #9ca3af);
  text-align: center;
}

.activity-log-empty svg {
  font-size: 3rem;
  margin-bottom: 1rem;
  opacity: 0.4;
}

.activity-log-empty p {
  font-size: 1rem;
  margin: 0;
}

/* ─── Loading ────────────────────────────────────────────────────────────── */

.activity-log-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4rem;
  color: var(--text-secondary, #6b7280);
  gap: 0.75rem;
  font-size: 0.95rem;
}

/* ─── Responsive — Tablet ────────────────────────────────────────────────── */

@media (max-width: 1024px) {
  .activity-log-page {
    padding: 1.5rem;
  }

  .activity-log-table th:nth-child(5),
  .activity-log-table td:nth-child(5) {
    display: none; /* hide Details on tablet */
  }
}

/* ─── Responsive — Mobile ────────────────────────────────────────────────── */

@media (max-width: 600px) {
  .activity-log-page {
    padding: 1rem;
  }

  .activity-log-header h1 {
    font-size: 1.35rem;
  }

  .activity-log-filters {
    flex-direction: column;
    align-items: stretch;
  }

  .activity-log-search {
    min-width: unset;
    width: 100%;
  }

  .activity-log-date-filter {
    flex-direction: column;
    align-items: stretch;
    gap: 0.4rem;
  }

  .activity-log-date-filter input[type="date"] {
    width: 100%;
  }

  .activity-log-stats {
    flex-direction: column;
    gap: 0.5rem;
  }

  /* Card layout on mobile instead of table */
  .activity-log-table-wrapper {
    border: none;
    background: transparent;
  }

  .activity-log-table thead {
    display: none;
  }

  .activity-log-table,
  .activity-log-table tbody,
  .activity-log-table tr,
  .activity-log-table td {
    display: block;
    width: 100%;
  }

  .activity-log-table tr {
    background: var(--card-bg, #ffffff);
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 8px;
    margin-bottom: 0.75rem;
    padding: 0.75rem;
  }

  .activity-log-table td {
    border-bottom: none;
    padding: 0.35rem 0;
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
  }

  .activity-log-table td::before {
    content: attr(data-label);
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
    color: var(--text-secondary, #6b7280);
    min-width: 80px;
    flex-shrink: 0;
  }
}

/* ─── Pagination ─────────────────────────────────────────────────────────── */
.activity-log-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 12px 16px;
  margin-top: 8px;
}
.activity-log-page-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 1px solid var(--border-color, #d1d5db);
  border-radius: 6px;
  background: var(--card-bg, #fff);
  color: var(--text-primary, #374151);
  cursor: pointer;
  font-size: 18px;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.activity-log-page-btn:hover:not(:disabled) {
  background: var(--primary-color, #3b82f6);
  color: #fff;
  border-color: var(--primary-color, #3b82f6);
}
.activity-log-page-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
.activity-log-page-info {
  font-size: 0.85rem;
  color: var(--text-secondary, #6b7280);
  min-width: 64px;
  text-align: center;
  font-weight: 500;
}
.brand-flags-page {
  display: flex;
  flex-direction: column;
  animation: fadeIn 0.3s ease-in;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.brand-flags-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.brand-flags-title-row {
  display: flex;
  align-items: center;
  gap: 0.55rem;
}

.brand-flags-title-row h1 {
  margin: 0;
  font-size: 1.85rem;
}

.brand-flags-title-icon {
  font-size: 1.8rem;
  color: var(--primary-color);
}

.brand-flags-actions {
  display: flex;
  gap: 0.7rem;
}

.brand-flags-btn-primary,
.brand-flags-btn-secondary {
  border: none;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  cursor: pointer;
  font-weight: 600;
}

.brand-flags-btn-primary {
  padding: 0.5rem 0.9rem;
}

.brand-flags-btn-secondary {
  padding: 0.5rem;
  justify-content: center;
  font-size: 1.1rem;
}

.brand-flags-btn-secondary {
  background: var(--border-color);
  color: var(--text-primary);
}

.brand-flags-btn-primary {
  background: var(--primary-color);
  color: var(--btn-primary-text, #fff);
}

.brand-flags-btn-primary:hover:not(:disabled) {
  opacity: 0.85;
}

.brand-flags-btn-secondary:hover:not(:disabled) {
  background: var(--hover-bg);
}

.brand-flags-btn-primary:disabled,
.brand-flags-btn-secondary:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.brand-flags-subtitle {
  color: var(--text-secondary);
  margin: 0.65rem 0 1.2rem;
}

.brand-flags-readonly-notice {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: #fef9ec;
  border: 1px solid #fcd34d;
  border-radius: 8px;
  padding: 0.6rem 0.9rem;
  color: #92400e;
  font-size: 0.88rem;
  font-weight: 600;
  margin-bottom: 1rem;
}

.brand-flag-switch.is-readonly {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

.brand-flags-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.brand-flags-summary-item {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 0.25rem 0.65rem;
  font-size: 0.8rem;
  font-weight: 700;
}

.brand-flags-summary-item.all {
  background: #e5e7eb;
  color: #111827;
}

.brand-flags-summary-item.active {
  background: #dcfce7;
  color: #166534;
}

.brand-flags-summary-item.inactive {
  background: #f3f4f6;
  color: #374151;
}

.brand-flags-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  margin-bottom: 1rem;
}

.brand-flags-search {
  flex: 1;
  min-width: 240px;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  padding: 0.6rem 0.8rem;
  font-size: 0.93rem;
  background: var(--input-bg, #fff);
  color: var(--text-primary);
}

.brand-flags-search:focus {
  outline: none;
  border-color: var(--primary-color);
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2);
}

.brand-flags-filter-tabs {
  display: inline-flex;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  overflow: hidden;
  background: var(--input-bg, #fff);
}

.brand-flags-filter-btn {
  border: none;
  border-right: 1px solid var(--border-color);
  background: transparent;
  color: var(--text-secondary);
  padding: 0.55rem 0.9rem;
  font-size: 0.86rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.brand-flags-filter-btn:hover:not(.active) {
  background: var(--hover-bg, #f3f4f6);
  color: var(--text-primary);
}

.brand-flags-filter-btn:last-child {
  border-right: none;
}

.brand-flags-filter-btn.active {
  background: var(--primary-color);
  color: var(--btn-primary-text, #fff);
}

.brand-flags-error,
.brand-flags-success {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  border-radius: 7px;
  padding: 0.6rem 0.75rem;
  margin-bottom: 0.9rem;
}

.brand-flags-error {
  color: #991b1b;
  background: #fef2f2;
  border: 1px solid #fecaca;
}

.brand-flags-success {
  color: #065f46;
  background: #ecfdf5;
  border: 1px solid #a7f3d0;
}

.brand-flags-loading,
.brand-flags-empty {
  color: var(--text-secondary);
  font-size: 0.95rem;
}

.brand-flags-preview {
  border: 1px solid var(--border-color);
  border-radius: 10px;
  background: var(--card-bg, #fff);
  padding: 0.9rem;
  margin-bottom: 1rem;
}

.brand-flags-preview-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.7rem;
  margin-bottom: 0.65rem;
}

.brand-flags-preview-header h3 {
  margin: 0;
  font-size: 0.95rem;
}

.brand-flags-preview-totals {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.brand-flags-preview-chip {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 0.2rem 0.55rem;
  font-size: 0.74rem;
  font-weight: 700;
}

.brand-flags-preview-chip.activate {
  background: #dcfce7;
  color: #166534;
}

.brand-flags-preview-chip.inactivate {
  background: #f3f4f6;
  color: #374151;
}

@media (max-width: 768px) {
  .brand-flags-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
  }

  .brand-flags-actions {
    width: 100%;
    justify-content: flex-end;
  }

  .brand-flags-filters {
    flex-direction: column;
    align-items: stretch;
  }

  .brand-flags-filter-tabs {
    width: 100%;
    justify-content: center;
  }

  .brand-flags-filter-btn {
    flex: 1;
    text-align: center;
  }
}

.brand-flags-preview-list {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  max-height: 200px;
  overflow-y: auto;
}

.brand-flags-preview-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  padding: 0.45rem 0.55rem;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  background: var(--hover-bg, #f8fafc);
}

.brand-flags-preview-name {
  color: var(--text-primary);
  font-size: 0.88rem;
  font-weight: 600;
}

.brand-flags-preview-state {
  font-size: 0.78rem;
  font-weight: 700;
}

.brand-flags-preview-state.to-active {
  color: #166534;
}

.brand-flags-preview-state.to-inactive {
  color: #374151;
}

.brand-flags-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 0.85rem;
}

.brand-flag-card {
  background: var(--card-bg, #fff);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 0.85rem 0.95rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.brand-flag-card.is-active {
  border-color: var(--primary-color);
  box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.18);
}

.brand-flag-card.is-inactive {
  opacity: 0.92;
}

.brand-flag-info {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.brand-flag-card h3 {
  margin: 0;
  font-size: 1rem;
}

.brand-flag-state-pill {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  border-radius: 999px;
  padding: 0.2rem 0.55rem;
  font-size: 0.74rem;
  font-weight: 700;
}

.brand-flag-state-pill.active {
  background: #dcfce7;
  color: #166534;
}

.brand-flag-state-pill.inactive {
  background: #f3f4f6;
  color: #4b5563;
}

.brand-flag-count {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-secondary);
}

.brand-flag-switch {
  position: relative;
  display: inline-flex;
  width: 56px;
  height: 32px;
  cursor: pointer;
}

.brand-flag-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.brand-flag-slider {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: #d1d5db;
  transition: background-color 0.2s ease;
}

.brand-flag-slider::before {
  content: '';
  position: absolute;
  width: 24px;
  height: 24px;
  left: 4px;
  top: 4px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.3);
  transition: transform 0.2s ease;
}

.brand-flag-switch input:checked + .brand-flag-slider {
  background: var(--primary-color);
}

.brand-flag-switch input:checked + .brand-flag-slider::before {
  transform: translateX(24px);
}

.brand-flags-confirm-backdrop {
  position: fixed;
  inset: 0;
  background: radial-gradient(circle at top, rgba(15, 23, 42, 0.65), rgba(2, 6, 23, 0.85));
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1200;
  padding: 1rem;
}

.brand-flags-confirm-modal {
  width: 100%;
  max-width: 560px;
  border-radius: 12px;
  background: linear-gradient(180deg, #0f172a 0%, #111827 100%);
  border: 1px solid rgba(148, 163, 184, 0.3);
  box-shadow: 0 24px 70px rgba(2, 6, 23, 0.5);
  color: #e5e7eb;
  overflow: hidden;
}

.brand-flags-confirm-header {
  display: flex;
  gap: 0.8rem;
  align-items: center;
  padding: 1rem 1.15rem;
  border-bottom: 1px solid rgba(148, 163, 184, 0.2);
  background: rgba(15, 23, 42, 0.6);
  position: relative;
  overflow: hidden;
}

.brand-flags-confirm-header::after {
  content: '';
  position: absolute;
  left: -35%;
  top: 0;
  width: 30%;
  height: 100%;
  background: linear-gradient(90deg, rgba(56, 189, 248, 0), rgba(56, 189, 248, 0.3), rgba(56, 189, 248, 0));
  animation: brandFlagsSecureScan 2.4s linear infinite;
}

@keyframes brandFlagsSecureScan {
  from { left: -35%; }
  to { left: 110%; }
}

.brand-flags-confirm-header h3 {
  margin: 0;
  font-size: 1rem;
  color: #f8fafc;
}

.brand-flags-confirm-header p {
  margin: 0.2rem 0 0;
  font-size: 0.8rem;
  color: #94a3b8;
}

.brand-flags-confirm-icon {
  font-size: 1.6rem;
  color: #38bdf8;
}

.brand-flags-confirm-body {
  padding: 1.1rem 1.15rem;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

.brand-flags-confirm-body p {
  margin: 0;
  line-height: 1.45;
  color: #cbd5e1;
  font-size: 0.92rem;
}

.brand-flags-confirm-preview {
  border: 1px solid rgba(148, 163, 184, 0.25);
  border-radius: 8px;
  padding: 0.6rem;
  background: rgba(30, 41, 59, 0.55);
}

.brand-flags-confirm-preview-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  margin-bottom: 0.5rem;
  font-size: 0.78rem;
  color: #93c5fd;
}

.brand-flags-confirm-preview-list {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  max-height: 160px;
  overflow-y: auto;
}

.brand-flags-confirm-preview-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  font-size: 0.82rem;
  color: #e2e8f0;
}

.brand-flags-confirm-preview-item .to-active {
  color: #86efac;
  font-weight: 700;
}

.brand-flags-confirm-preview-item .to-inactive {
  color: #cbd5e1;
  font-weight: 700;
}

.brand-flags-confirm-arm {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  font-size: 0.86rem;
  color: #e2e8f0;
}

.brand-flags-confirm-arm input {
  margin-top: 0.2rem;
}

.brand-flags-confirm-visual-check {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.brand-flags-confirm-visual-check span {
  font-size: 0.8rem;
  color: #93c5fd;
}

.brand-flags-confirm-visual-options {
  display: flex;
  gap: 0.55rem;
}

.brand-flags-visual-option {
  width: 44px;
  height: 44px;
  border-radius: 8px;
  border: 1px solid rgba(125, 211, 252, 0.35);
  background: rgba(15, 23, 42, 0.7);
  color: #e2e8f0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.35rem;
  cursor: pointer;
}

.brand-flags-visual-option.selected {
  border-color: #38bdf8;
  color: #38bdf8;
  box-shadow: 0 0 0 2px rgba(56, 189, 248, 0.2);
}

.brand-flags-confirm-countdown {
  margin: 0;
  color: #fbbf24;
  font-size: 0.82rem;
  font-weight: 600;
}

.brand-flags-confirm-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.65rem;
  padding: 1rem 1.15rem 1.1rem;
  border-top: 1px solid rgba(148, 163, 184, 0.2);
}

.brand-flags-btn-ghost,
.brand-flags-btn-danger {
  border: none;
  border-radius: 7px;
  padding: 0.5rem 0.9rem;
  font-size: 0.86rem;
  font-weight: 600;
  cursor: pointer;
}

.brand-flags-btn-ghost {
  background: rgba(100, 116, 139, 0.25);
  color: #e2e8f0;
}

.brand-flags-btn-danger {
  background: #dc2626;
  color: #fff;
}

.brand-flags-btn-danger:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

/* ─── Dark theme overrides ─────────────────────────────────────────────────── */
html[data-theme='cyberpunk'] .brand-flags-search,
html[data-theme='jarvis'] .brand-flags-search,
html[data-theme='rock'] .brand-flags-search,
html[data-theme='golden'] .brand-flags-search,
html[data-theme='starwars'] .brand-flags-search {
  background: var(--input-bg);
  color: var(--text-primary);
  border-color: var(--border-color);
  color-scheme: dark;
}

html[data-theme='cyberpunk'] .brand-flags-filter-tabs,
html[data-theme='jarvis'] .brand-flags-filter-tabs,
html[data-theme='rock'] .brand-flags-filter-tabs,
html[data-theme='golden'] .brand-flags-filter-tabs,
html[data-theme='starwars'] .brand-flags-filter-tabs {
  background: var(--input-bg);
  border-color: var(--border-color);
}

html[data-theme='cyberpunk'] .brand-flag-card,
html[data-theme='jarvis'] .brand-flag-card,
html[data-theme='rock'] .brand-flag-card,
html[data-theme='golden'] .brand-flag-card,
html[data-theme='starwars'] .brand-flag-card {
  background: var(--card-bg);
}

html[data-theme='cyberpunk'] .brand-flag-card h3,
html[data-theme='jarvis'] .brand-flag-card h3,
html[data-theme='rock'] .brand-flag-card h3,
html[data-theme='golden'] .brand-flag-card h3,
html[data-theme='starwars'] .brand-flag-card h3 {
  color: var(--text-primary);
}

/* Summary chips */
html[data-theme='cyberpunk'] .brand-flags-summary-item.all,
html[data-theme='jarvis'] .brand-flags-summary-item.all,
html[data-theme='rock'] .brand-flags-summary-item.all,
html[data-theme='golden'] .brand-flags-summary-item.all,
html[data-theme='starwars'] .brand-flags-summary-item.all {
  background: var(--badge-bg);
  color: var(--text-primary);
}

html[data-theme='cyberpunk'] .brand-flags-summary-item.active,
html[data-theme='jarvis'] .brand-flags-summary-item.active,
html[data-theme='rock'] .brand-flags-summary-item.active,
html[data-theme='golden'] .brand-flags-summary-item.active,
html[data-theme='starwars'] .brand-flags-summary-item.active {
  background: rgba(34, 197, 94, 0.15);
  color: #4ade80;
}

html[data-theme='cyberpunk'] .brand-flags-summary-item.inactive,
html[data-theme='jarvis'] .brand-flags-summary-item.inactive,
html[data-theme='rock'] .brand-flags-summary-item.inactive,
html[data-theme='golden'] .brand-flags-summary-item.inactive,
html[data-theme='starwars'] .brand-flags-summary-item.inactive {
  background: var(--badge-bg);
  color: var(--text-secondary);
}

/* State pills on cards */
html[data-theme='cyberpunk'] .brand-flag-state-pill.active,
html[data-theme='jarvis'] .brand-flag-state-pill.active,
html[data-theme='rock'] .brand-flag-state-pill.active,
html[data-theme='golden'] .brand-flag-state-pill.active,
html[data-theme='starwars'] .brand-flag-state-pill.active {
  background: rgba(34, 197, 94, 0.15);
  color: #4ade80;
}

html[data-theme='cyberpunk'] .brand-flag-state-pill.inactive,
html[data-theme='jarvis'] .brand-flag-state-pill.inactive,
html[data-theme='rock'] .brand-flag-state-pill.inactive,
html[data-theme='golden'] .brand-flag-state-pill.inactive,
html[data-theme='starwars'] .brand-flag-state-pill.inactive {
  background: var(--badge-bg);
  color: var(--text-secondary);
}

/* Preview panel */
html[data-theme='cyberpunk'] .brand-flags-preview,
html[data-theme='jarvis'] .brand-flags-preview,
html[data-theme='rock'] .brand-flags-preview,
html[data-theme='golden'] .brand-flags-preview,
html[data-theme='starwars'] .brand-flags-preview {
  background: var(--card-bg);
}

html[data-theme='cyberpunk'] .brand-flags-preview-item,
html[data-theme='jarvis'] .brand-flags-preview-item,
html[data-theme='rock'] .brand-flags-preview-item,
html[data-theme='golden'] .brand-flags-preview-item,
html[data-theme='starwars'] .brand-flags-preview-item {
  background: var(--hover-bg);
}

html[data-theme='cyberpunk'] .brand-flags-preview-chip.activate,
html[data-theme='jarvis'] .brand-flags-preview-chip.activate,
html[data-theme='rock'] .brand-flags-preview-chip.activate,
html[data-theme='golden'] .brand-flags-preview-chip.activate,
html[data-theme='starwars'] .brand-flags-preview-chip.activate {
  background: rgba(34, 197, 94, 0.15);
  color: #4ade80;
}

html[data-theme='cyberpunk'] .brand-flags-preview-chip.inactivate,
html[data-theme='jarvis'] .brand-flags-preview-chip.inactivate,
html[data-theme='rock'] .brand-flags-preview-chip.inactivate,
html[data-theme='golden'] .brand-flags-preview-chip.inactivate,
html[data-theme='starwars'] .brand-flags-preview-chip.inactivate {
  background: var(--badge-bg);
  color: var(--text-secondary);
}

html[data-theme='cyberpunk'] .brand-flags-preview-state.to-active,
html[data-theme='jarvis'] .brand-flags-preview-state.to-active,
html[data-theme='rock'] .brand-flags-preview-state.to-active,
html[data-theme='golden'] .brand-flags-preview-state.to-active,
html[data-theme='starwars'] .brand-flags-preview-state.to-active {
  color: #4ade80;
}

html[data-theme='cyberpunk'] .brand-flags-preview-state.to-inactive,
html[data-theme='jarvis'] .brand-flags-preview-state.to-inactive,
html[data-theme='rock'] .brand-flags-preview-state.to-inactive,
html[data-theme='golden'] .brand-flags-preview-state.to-inactive,
html[data-theme='starwars'] .brand-flags-preview-state.to-inactive {
  color: var(--text-secondary);
}

/* Toggle slider track — dark backgrounds */
html[data-theme='cyberpunk'] .brand-flag-slider,
html[data-theme='jarvis'] .brand-flag-slider,
html[data-theme='rock'] .brand-flag-slider,
html[data-theme='golden'] .brand-flag-slider,
html[data-theme='starwars'] .brand-flag-slider {
  background: #374151;
}

/* Readonly notice — dark themes */
html[data-theme='cyberpunk'] .brand-flags-readonly-notice,
html[data-theme='jarvis'] .brand-flags-readonly-notice,
html[data-theme='rock'] .brand-flags-readonly-notice,
html[data-theme='golden'] .brand-flags-readonly-notice,
html[data-theme='starwars'] .brand-flags-readonly-notice {
  background: rgba(251, 191, 36, 0.1);
  border-color: rgba(251, 191, 36, 0.35);
  color: #fbbf24;
}
/* ── Category Mappings page ────────────────────────────────────────────────── */

.category-mappings-page {
  padding: 2rem;
  max-width: 1000px;
}

.category-mappings-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}

.category-mappings-title {
  font-size: 1.5rem;
  font-weight: 700;
  margin: 0 0 0.25rem;
  color: var(--text-primary);
}

.category-mappings-subtitle {
  font-size: 0.875rem;
  margin: 0;
  color: var(--text-secondary);
}

.category-mappings-actions {
  display: flex;
  gap: 0.75rem;
  flex-shrink: 0;
}

/* Summary chips */
.mappings-summary {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}

.summary-chip {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.75rem;
  border-radius: 999px;
  font-size: 0.8125rem;
  font-weight: 600;
}

.summary-chip.total {
  background: var(--bg-secondary);
  color: var(--text-secondary);
  border: 1px solid var(--border-color);
}
.summary-chip.custom {
  background: var(--accent-bg, rgba(99,102,241,.12));
  color: var(--accent);
  border: 1px solid var(--accent);
}
.summary-chip.default {
  background: var(--bg-secondary);
  color: var(--text-muted, var(--text-secondary));
  border: 1px solid var(--border-color);
}

/* Messages */
.category-mappings-message {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  border-radius: 8px;
  margin-bottom: 1rem;
  font-size: 0.875rem;
  font-weight: 500;
}

.category-mappings-message.success {
  background: var(--success-bg, #d1fae5);
  color: var(--success-text, #065f46);
  border: 1px solid var(--success-border, #6ee7b7);
}

.category-mappings-message.error {
  background: var(--error-bg, #fee2e2);
  color: var(--error-text, #991b1b);
  border: 1px solid var(--error-border, #fca5a5);
}

.dismiss-btn {
  background: none;
  border: none;
  cursor: pointer;
  color: inherit;
  display: flex;
  align-items: center;
  padding: 0;
  opacity: 0.7;
  flex-shrink: 0;
}
.dismiss-btn:hover { opacity: 1; }

/* Table */
.category-mappings-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--card-bg, var(--bg-secondary));
  border: 1px solid var(--border-color);
  border-radius: 12px;
  overflow: hidden;
  font-size: 0.9375rem;
}

.category-mappings-table th {
  background: var(--table-header-bg, var(--bg-tertiary, var(--bg-secondary)));
  color: var(--text-secondary);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.75rem 1rem;
  text-align: left;
  border-bottom: 1px solid var(--border-color);
}

.category-mappings-table td {
  padding: 0.65rem 1rem;
  border-bottom: 1px solid var(--border-color);
  color: var(--text-primary);
  vertical-align: middle;
}

.category-mappings-table tr:last-child td {
  border-bottom: none;
}

.category-mappings-table tbody tr:hover {
  background: var(--row-hover-bg, var(--bg-primary));
}

.editing-row {
  background: var(--accent-bg, rgba(99,102,241,.06)) !important;
}

.gonher-name {
  font-family: monospace;
  font-size: 0.875rem;
  color: var(--text-secondary);
}

.display-name { font-weight: 500; }

.status-col { width: 140px; }
.actions-col { width: 100px; text-align: right !important; }
.actions-cell { text-align: right; white-space: nowrap; }
.status-cell { white-space: nowrap; }

/* Badges */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
}

.badge-custom {
  background: var(--accent-bg, rgba(99,102,241,.12));
  color: var(--accent);
  border: 1px solid var(--accent);
}

.badge-default {
  background: var(--bg-tertiary, var(--bg-secondary));
  color: var(--text-muted, var(--text-secondary));
  border: 1px solid var(--border-color);
}

/* Inline edit */
.inline-edit-wrapper {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.inline-input {
  width: 100%;
  max-width: 320px;
  padding: 0.35rem 0.6rem !important;
  font-size: 0.9375rem !important;
}

.inline-error {
  font-size: 0.75rem;
  color: var(--error-text, #dc2626);
}

/* Icon buttons */
.icon-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.3rem;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  font-size: 1.1rem;
  transition: background 0.15s, color 0.15s;
}
.icon-btn:disabled { opacity: 0.4; cursor: not-allowed; }

.edit-btn { color: var(--accent); }
.edit-btn:hover:not(:disabled) { background: var(--accent-bg, rgba(99,102,241,.1)); }

.save-btn { color: var(--success-text, #059669); }
.save-btn:hover:not(:disabled) { background: var(--success-bg, rgba(5,150,105,.1)); }

.cancel-btn { color: var(--text-secondary); }
.cancel-btn:hover:not(:disabled) { background: var(--bg-primary); }

/* Input shared */
.form-input {
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  background: var(--bg-primary);
  color: var(--text-primary);
  font-size: 0.9375rem;
  outline: none;
  transition: border-color 0.2s;
}
.form-input:focus { border-color: var(--accent); }

/* Loading / empty */
.category-mappings-loading,
.category-mappings-empty {
  padding: 3rem;
  text-align: center;
  color: var(--text-secondary);
  font-size: 0.9375rem;
}

.empty-hint {
  font-size: 0.8125rem;
  color: var(--text-muted, var(--text-secondary));
  margin-top: 0.5rem;
}

/* Spinner */
@keyframes spin { to { transform: rotate(360deg); } }
.spin { animation: spin 0.8s linear infinite; }

/* Buttons */
.btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 1rem;
  background: var(--bg-secondary);
  color: var(--text-primary);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s;
}
.btn-secondary:hover { background: var(--bg-primary); }
.btn-secondary:disabled { opacity: 0.5; cursor: not-allowed; }


.category-mappings-page {
  padding: 2rem;
  max-width: 1100px;
}


/* ── Sample image preview trigger ──────────────────────────────────────────── */
.images-col { width: 70px; }

.images-cell {
  vertical-align: middle;
  padding: 0.5rem 0.75rem !important;
}

.img-preview-trigger {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 0.3rem 0.5rem;
  cursor: pointer;
  color: var(--text-secondary);
  font-size: 0.8rem;
  font-weight: 700;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.img-preview-trigger:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-bg, rgba(99,102,241,.08));
}

.preview-icon { font-size: 1rem; flex-shrink: 0; }

.preview-count {
  font-size: 0.75rem;
  font-weight: 700;
  min-width: 12px;
  text-align: center;
}

.no-images-hint {
  color: var(--text-muted, var(--text-secondary));
  opacity: 0.35;
  font-size: 1.1rem;
  display: flex;
  align-items: center;
}

/* ── Image tooltip ────────────────────────────────────────────────────────── */
.img-tooltip {
  position: fixed;
  transform: translateY(-50%);
  z-index: 1000;
  background: var(--card-bg, var(--bg-secondary));
  border: 1px solid var(--border-color);
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.28), 0 2px 8px rgba(0,0,0,0.18);
  min-width: 264px;
  max-width: 296px;
  overflow: hidden;
  pointer-events: auto;
}

.img-tooltip-title {
  padding: 0.6rem 0.9rem 0.5rem;
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--text-primary);
  border-bottom: 1px solid var(--border-color);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.img-tooltip-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3px;
  padding: 6px;
  background: var(--bg-primary);
}

.tooltip-img {
  width: 100%;
  height: 80px;
  object-fit: cover;
  border-radius: 4px;
  display: block;
  background: var(--bg-secondary);
}

.img-tooltip-footer {
  padding: 0.4rem 0.9rem;
  font-size: 0.75rem;
  color: var(--text-secondary);
  border-top: 1px solid var(--border-color);
  text-align: center;
}

.category-mappings-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1.5rem;
}

.category-mappings-title {
  font-size: 1.5rem;
  font-weight: 700;
  margin: 0 0 0.25rem;
  color: var(--text-primary);
}

.category-mappings-subtitle {
  font-size: 0.875rem;
  margin: 0;
  color: var(--text-secondary);
}

.category-mappings-actions {
  display: flex;
  gap: 0.75rem;
  flex-shrink: 0;
}

/* Messages */
.category-mappings-message {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  border-radius: 8px;
  margin-bottom: 1rem;
  font-size: 0.875rem;
  font-weight: 500;
}

.category-mappings-message.success {
  background: var(--success-bg, #d1fae5);
  color: var(--success-text, #065f46);
  border: 1px solid var(--success-border, #6ee7b7);
}

.category-mappings-message.error {
  background: var(--error-bg, #fee2e2);
  color: var(--error-text, #991b1b);
  border: 1px solid var(--error-border, #fca5a5);
}

.dismiss-btn {
  background: none;
  border: none;
  cursor: pointer;
  color: inherit;
  display: flex;
  align-items: center;
  padding: 0;
  opacity: 0.7;
  flex-shrink: 0;
}
.dismiss-btn:hover { opacity: 1; }

/* Form card */
.category-mappings-form-card {
  background: var(--card-bg, var(--bg-secondary));
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 1.5rem;
  margin-bottom: 1.5rem;
}

.form-title {
  font-size: 1rem;
  font-weight: 600;
  margin: 0 0 1rem;
  color: var(--text-primary);
}

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

@media (max-width: 600px) {
  .form-grid { grid-template-columns: 1fr; }
}

.form-label {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.form-input {
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  background: var(--bg-primary);
  color: var(--text-primary);
  font-size: 0.9375rem;
  font-weight: 400;
  outline: none;
  transition: border-color 0.2s;
  text-transform: none;
  letter-spacing: normal;
}
.form-input:focus {
  border-color: var(--accent);
}
.form-input:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.form-hint {
  font-size: 0.75rem;
  font-weight: 400;
  color: var(--text-muted, var(--text-secondary));
  text-transform: none;
  letter-spacing: normal;
}

.form-error {
  color: var(--error-text, #991b1b);
  font-size: 0.875rem;
  margin: 0.75rem 0 0;
}

.form-buttons {
  display: flex;
  gap: 0.75rem;
  justify-content: flex-end;
  margin-top: 1.25rem;
}

/* Table */
.category-mappings-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--card-bg, var(--bg-secondary));
  border: 1px solid var(--border-color);
  border-radius: 12px;
  overflow: hidden;
  font-size: 0.9375rem;
}

.category-mappings-table th {
  background: var(--table-header-bg, var(--bg-tertiary, var(--bg-secondary)));
  color: var(--text-secondary);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.75rem 1rem;
  text-align: left;
  border-bottom: 1px solid var(--border-color);
}

.category-mappings-table td {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--border-color);
  color: var(--text-primary);
  vertical-align: middle;
}

.category-mappings-table tr:last-child td {
  border-bottom: none;
}

.category-mappings-table tbody tr:hover {
  background: var(--row-hover-bg, var(--bg-primary));
}

.gonher-name {
  font-family: monospace;
  font-size: 0.875rem;
  color: var(--text-secondary);
}

.display-name {
  font-weight: 500;
}

.actions-col {
  width: 120px;
  text-align: right !important;
}

.actions-cell {
  text-align: right;
  white-space: nowrap;
}

/* Icon buttons */
.icon-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.3rem;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  font-size: 1.1rem;
  transition: background 0.15s, color 0.15s;
}
.icon-btn:disabled { opacity: 0.4; cursor: not-allowed; }

.edit-btn { color: var(--accent); }
.edit-btn:hover { background: var(--accent-bg, rgba(99,102,241,.1)); }

.delete-btn { color: var(--error-text, #dc2626); }
.delete-btn:hover { background: var(--error-hover-bg, rgba(220,38,38,.1)); }

.delete-confirm {
  font-size: 0.875rem;
  color: var(--text-secondary);
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

.confirm-delete-btn {
  color: var(--error-text, #dc2626);
  font-size: 0.8rem;
  font-weight: 700;
  padding: 0.15rem 0.4rem;
  border-radius: 4px;
}
.confirm-delete-btn:hover { background: var(--error-hover-bg, rgba(220,38,38,.1)); }

.cancel-delete-btn {
  color: var(--text-secondary);
  font-size: 0.8rem;
  font-weight: 700;
  padding: 0.15rem 0.4rem;
  border-radius: 4px;
}
.cancel-delete-btn:hover { background: var(--bg-primary); }

/* Loading / empty */
.category-mappings-loading,
.category-mappings-empty {
  padding: 3rem;
  text-align: center;
  color: var(--text-secondary);
  font-size: 0.9375rem;
}

.empty-hint {
  font-size: 0.8125rem;
  color: var(--text-muted, var(--text-secondary));
  margin-top: 0.5rem;
}

/* Spinner */
@keyframes spin {
  to { transform: rotate(360deg); }
}
.spin {
  animation: spin 0.8s linear infinite;
}

/* Shared button styles (mirrors Layout pattern) */
.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 1rem;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.2s;
}
.btn-primary:hover { opacity: 0.88; }
.btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }

.btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 1rem;
  background: var(--bg-secondary);
  color: var(--text-primary);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s;
}
.btn-secondary:hover { background: var(--bg-primary); }
.btn-secondary:disabled { opacity: 0.5; cursor: not-allowed; }
.settings {
  animation: settingsFadeIn 0.3s ease-in;
}

@keyframes settingsFadeIn {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Header ── */
.settings-header {
  margin-bottom: 1.75rem;
}

.settings-header h1 {
  font-size: 2rem;
  color: var(--text-primary);
  margin-bottom: 0.35rem;
}

.settings-subtitle {
  color: var(--text-secondary);
  font-size: 0.92rem;
}

/* ── Two-column layout ── */
.settings-layout {
  display: flex;
  gap: 1.5rem;
  align-items: flex-start;
}

/* ── Sidebar ── */
.settings-sidebar {
  width: 210px;
  flex-shrink: 0;
  background: white;
  border-radius: 10px;
  padding: 0.85rem;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
  position: sticky;
  top: 1.5rem;
}

@media (max-width: 700px) {
  .settings-layout {
    flex-direction: column;
    gap: 1rem;
  }

  .settings-sidebar {
    width: 100%;
    position: static;
    padding: 0.65rem;
  }

  .settings-nav-group {
    margin-bottom: 0;
  }

  .settings-nav {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
  }

  .settings-nav-label {
    display: none;
  }

  .settings-nav-item {
    flex: 1 1 auto;
    justify-content: center;
    min-width: max-content;
  }

  .settings-nav-soon-badge {
    display: none;
  }

  .settings-header h1 {
    font-size: 1.5rem;
  }

  .settings-instructions-footer {
    flex-direction: column;
    align-items: flex-start;
  }

  .settings-actions--inline {
    width: 100%;
    justify-content: flex-end;
  }
}

.settings-nav-group {
  margin-bottom: 1.1rem;
}

.settings-nav-group:last-child {
  margin-bottom: 0;
}

.settings-nav-label {
  display: block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-secondary);
  padding: 0 0.5rem 0.45rem;
}

.settings-nav-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.48rem 0.65rem;
  border: none;
  border-radius: 7px;
  background: transparent;
  color: var(--text-secondary);
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  text-align: left;
}

.settings-nav-item:hover:not(:disabled) {
  background: #f1f5f9;
  color: var(--text-primary);
}

.settings-nav-item.active {
  background: #eff0ff;
  color: var(--primary-color);
  font-weight: 600;
}

.settings-nav-item svg {
  font-size: 1.1rem;
  flex-shrink: 0;
}

.settings-nav-item--soon {
  opacity: 0.5;
  cursor: not-allowed;
}

.settings-nav-soon-badge {
  margin-left: auto;
  font-size: 0.65rem;
  font-weight: 700;
  background: #e2e8f0;
  color: var(--text-secondary);
  border-radius: 4px;
  padding: 0.15rem 0.35rem;
  letter-spacing: 0.03em;
}

/* ── Content area ── */
.settings-content {
  flex: 1;
  min-width: 0;
  /* Reserve space so the Rockstar floating button never overlaps the save buttons */
  padding-bottom: 84px;
}

.settings-content-header {
  margin-bottom: 1.5rem;
}

.settings-content-header h2 {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 0.3rem;
}

/* ── Read-only badge on section titles ── */
.settings-readonly-badge {
  margin-left: 0.6rem;
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background: #f1f5f9;
  color: var(--text-secondary);
  border: 1px solid #e2e8f0;
  border-radius: 4px;
  padding: 0.15rem 0.4rem;
  vertical-align: middle;
}

/* ── Editor toolbar (mode toggle) ── */
.settings-editor-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.65rem;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.settings-mode-toggle {
  display: flex;
  background: #f1f5f9;
  border-radius: 8px;
  padding: 3px;
  gap: 2px;
}

.settings-mode-btn {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.3rem 0.75rem;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--text-secondary);
  font-size: 0.82rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.settings-mode-btn:hover:not(:disabled) {
  background: white;
  color: var(--text-primary);
}

.settings-mode-btn.active {
  background: white;
  color: var(--primary-color);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.settings-mode-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* ── Rockstar instructions preview ── */
.settings-instructions-preview {
  width: 100%;
  min-height: 340px;
  max-height: 540px;
  overflow-y: auto;
  padding: 1rem 1.25rem;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: white;
  line-height: 1.7;
  font-size: 0.9rem;
  color: var(--text-primary);
  box-sizing: border-box;
}

.settings-instructions-preview h1,
.settings-instructions-preview h2,
.settings-instructions-preview h3 {
  color: var(--text-primary);
  margin-top: 1.25rem;
  margin-bottom: 0.4rem;
  font-weight: 700;
}

.settings-instructions-preview h1 { font-size: 1.25rem; }
.settings-instructions-preview h2 { font-size: 1.05rem; }
.settings-instructions-preview h3 { font-size: 0.95rem; }

.settings-instructions-preview ul,
.settings-instructions-preview ol {
  padding-left: 1.4rem;
  margin: 0.4rem 0;
}

.settings-instructions-preview li {
  margin-bottom: 0.2rem;
}

.settings-instructions-preview strong {
  font-weight: 700;
}

.settings-instructions-preview code {
  background: #f1f5f9;
  padding: 0.1rem 0.35rem;
  border-radius: 4px;
  font-family: 'SF Mono', 'Fira Mono', 'Consolas', monospace;
  font-size: 0.85em;
}

.settings-instructions-preview pre {
  background: #f1f5f9;
  padding: 0.75rem 1rem;
  border-radius: 6px;
  overflow-x: auto;
  margin: 0.75rem 0;
}

.settings-instructions-preview blockquote {
  border-left: 3px solid var(--primary-color);
  margin: 0.75rem 0;
  padding: 0.25rem 0.75rem;
  color: var(--text-secondary);
  font-style: italic;
}

.settings-instructions-preview p {
  margin: 0.4rem 0;
}

/* ── Rockstar instructions textarea ── */
.settings-instructions-textarea {
  width: 100%;
  min-height: 340px;
  padding: 0.85rem 1rem;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  font-size: 0.88rem;
  font-family: 'SF Mono', 'Fira Mono', 'Consolas', monospace;
  line-height: 1.6;
  color: var(--text-primary);
  background: #f8f9fc;
  resize: vertical;
  transition: border-color 0.2s;
  box-sizing: border-box;
}

.settings-instructions-textarea:focus {
  outline: none;
  border-color: var(--primary-color);
  box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.15);
}

.settings-instructions-textarea:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.settings-instructions-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-top: 0.75rem;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.settings-instructions-count {
  font-size: 0.78rem;
  color: var(--text-secondary);
}

.settings-actions--inline {
  margin-top: 0;
}

/* ── Alerts ── */
.settings-alert {
  padding: 0.75rem 1rem;
  border-radius: 8px;
  margin-bottom: 1.25rem;
  font-size: 0.9rem;
}

.settings-alert--error {
  background: #fef2f2;
  color: #b91c1c;
  border: 1px solid #fecaca;
}

.settings-alert--success {
  background: #f0fdf4;
  color: #15803d;
  border: 1px solid #bbf7d0;
}

.settings-loading {
  text-align: center;
  padding: 3rem 1rem;
  color: var(--text-secondary);
  font-size: 0.95rem;
}

/* ── Sections ── */
.settings-section {
  background: white;
  border-radius: 10px;
  padding: 1.25rem 1.5rem;
  margin-bottom: 1.25rem;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}

.settings-section-title {
  font-size: 1.1rem;
  color: var(--text-primary);
  margin-bottom: 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid #e2e8f0;
  display: flex;
  align-items: center;
}

.settings-section-hint {
  font-size: 0.84rem;
  color: var(--text-secondary);
  margin: -0.5rem 0 1rem 0;
  line-height: 1.5;
}

/* ── Fields ── */
.settings-field {
  margin-bottom: 1rem;
}

.settings-field:last-child {
  margin-bottom: 0;
}

.settings-label {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 0.35rem;
}

.settings-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.settings-input {
  width: 100%;
  padding: 0.55rem 0.85rem;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  font-size: 0.9rem;
  color: var(--text-primary);
  background: #f8f9fc;
  transition: border-color 0.2s;
}

.settings-input:focus {
  outline: none;
  border-color: var(--primary-color);
  box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.15);
}

.settings-input:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.settings-toggle-secret {
  position: absolute;
  right: 0.5rem;
  background: none;
  border: none;
  color: var(--text-secondary);
  cursor: pointer;
  font-size: 1.2rem;
  display: flex;
  padding: 0.3rem;
}

.settings-toggle-secret:hover {
  color: var(--text-primary);
}

/* ── Actions bar ── */
.settings-actions {
  display: flex;
  gap: 0.75rem;
  justify-content: flex-end;
  margin-top: 1.5rem;
}

/* ── Buttons (shared tokens from Profile.css) ── */
.settings .btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.58rem 1.05rem;
  border-radius: 8px;
  font-weight: 600;
  font-size: 0.87rem;
  cursor: pointer;
  transition: all 0.2s;
  border: none;
}

.settings .btn-primary {
  background: var(--primary-color);
  color: #fff;
}
.settings .btn-primary:hover { background: var(--primary-dark); }
.settings .btn-primary:disabled { opacity: 0.6; cursor: not-allowed; }

.settings .btn-secondary {
  background: var(--card-bg);
  color: var(--text-primary);
  border: 1px solid var(--border-color);
}
.settings .btn-secondary:hover { background: var(--hover-bg); }
.settings .btn-secondary:disabled { opacity: 0.6; cursor: not-allowed; }
.settings .btn-secondary.icon-only { padding: 0.5rem; gap: 0; font-size: 1.1rem; }

/* ── Secure Confirmation Modal ── */
.settings-confirm-backdrop {
  position: fixed;
  inset: 0;
  background: radial-gradient(circle at top, rgba(15, 23, 42, 0.65), rgba(2, 6, 23, 0.85));
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1200;
  padding: 1rem;
}

.settings-confirm-modal {
  width: 100%;
  max-width: 560px;
  border-radius: 12px;
  background: linear-gradient(180deg, #0f172a 0%, #111827 100%);
  border: 1px solid rgba(148, 163, 184, 0.3);
  box-shadow: 0 24px 70px rgba(2, 6, 23, 0.5);
  color: #e5e7eb;
  overflow: hidden;
}

.settings-confirm-header {
  display: flex;
  gap: 0.8rem;
  align-items: center;
  padding: 1rem 1.15rem;
  border-bottom: 1px solid rgba(148, 163, 184, 0.2);
  background: rgba(15, 23, 42, 0.6);
  position: relative;
  overflow: hidden;
}

.settings-confirm-header::after {
  content: '';
  position: absolute;
  left: -35%;
  top: 0;
  width: 30%;
  height: 100%;
  background: linear-gradient(90deg, rgba(56, 189, 248, 0), rgba(56, 189, 248, 0.3), rgba(56, 189, 248, 0));
  animation: settingsSecureScan 2.4s linear infinite;
}

@keyframes settingsSecureScan {
  from { left: -35%; }
  to { left: 110%; }
}

.settings-confirm-header h3 {
  margin: 0;
  font-size: 1rem;
  color: #f8fafc;
}

.settings-confirm-header p {
  margin: 0.2rem 0 0;
  font-size: 0.8rem;
  color: #94a3b8;
}

.settings-confirm-icon {
  font-size: 1.6rem;
  color: #38bdf8;
}

.settings-confirm-body {
  padding: 1.1rem 1.15rem;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

.settings-confirm-body > p {
  margin: 0;
  line-height: 1.45;
  color: #cbd5e1;
  font-size: 0.92rem;
}

/* ── Changed fields list ── */
.settings-confirm-changes {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.settings-confirm-changes-title {
  font-size: 0.82rem;
  color: #93c5fd;
  margin-bottom: 0.15rem;
}

.settings-confirm-change-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  border: 1px solid rgba(148, 163, 184, 0.25);
  border-radius: 8px;
  padding: 0.5rem 0.7rem;
  background: rgba(30, 41, 59, 0.55);
  font-size: 0.86rem;
  color: #e2e8f0;
}

.settings-confirm-change-icon {
  color: #38bdf8;
  font-size: 1.05rem;
  flex-shrink: 0;
}

/* ── Arm checkbox ── */
.settings-confirm-arm {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  font-size: 0.86rem;
  color: #e2e8f0;
}

.settings-confirm-arm input {
  margin-top: 0.2rem;
}

/* ── Visual challenge ── */
.settings-confirm-visual-check {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.settings-confirm-visual-check span {
  font-size: 0.8rem;
  color: #93c5fd;
}

.settings-confirm-visual-options {
  display: flex;
  gap: 0.55rem;
}

.settings-visual-option {
  width: 44px;
  height: 44px;
  border-radius: 8px;
  border: 1px solid rgba(125, 211, 252, 0.35);
  background: rgba(15, 23, 42, 0.7);
  color: #e2e8f0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.35rem;
  cursor: pointer;
}

.settings-visual-option.selected {
  border-color: #38bdf8;
  color: #38bdf8;
  box-shadow: 0 0 0 2px rgba(56, 189, 248, 0.2);
}

/* ── Countdown ── */
.settings-confirm-countdown {
  margin: 0;
  color: #fbbf24;
  font-size: 0.82rem;
  font-weight: 600;
}

/* ── Actions ── */
.settings-confirm-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.65rem;
  padding: 1rem 1.15rem 1.1rem;
  border-top: 1px solid rgba(148, 163, 184, 0.2);
}

.settings-btn-ghost,
.settings-btn-danger {
  border: none;
  border-radius: 7px;
  padding: 0.5rem 0.9rem;
  font-size: 0.86rem;
  font-weight: 600;
  cursor: pointer;
}

.settings-btn-ghost {
  background: rgba(100, 116, 139, 0.25);
  color: #e2e8f0;
}

.settings-btn-danger {
  background: #dc2626;
  color: #fff;
}

.settings-btn-danger:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
/* ── StoreChatConfig page ─────────────────────────────────────────────────── */

.store-chat-config {
  max-width: 860px;
  margin: 0 auto;
  padding: 2rem 1.5rem;
}

/* Header */
.store-chat-config__header {
  margin-bottom: 2rem;
}

.store-chat-config__title-row {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}

.store-chat-config__icon {
  font-size: 2rem;
  color: var(--accent);
  flex-shrink: 0;
  margin-top: 0.25rem;
}

.store-chat-config__title {
  font-size: 1.4rem;
  font-weight: 700;
  margin: 0 0 0.35rem;
  color: var(--text-primary);
}

.store-chat-config__subtitle {
  font-size: 0.9rem;
  color: var(--text-secondary);
  margin: 0;
  line-height: 1.5;
}

/* Alerts */
.store-chat-config__alert {
  padding: 0.85rem 1.1rem;
  border-radius: 8px;
  margin-bottom: 1.5rem;
  font-size: 0.9rem;
  line-height: 1.4;
}

.store-chat-config__alert--success {
  background: var(--success-bg, #d1fae5);
  color: var(--success-text, #065f46);
  border: 1px solid var(--success-border, #6ee7b7);
}

.store-chat-config__alert--error {
  background: var(--error-bg, #fee2e2);
  color: var(--error-text, #991b1b);
  border: 1px solid var(--error-border, #fca5a5);
}

/* Loading */
.store-chat-config__loading {
  color: var(--text-secondary);
  font-size: 0.95rem;
  padding: 2rem 0;
}

/* Form */
.store-chat-config__form {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.store-chat-config__field {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.store-chat-config__label {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-primary);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.store-chat-config__field-hint {
  font-size: 0.83rem;
  color: var(--text-secondary);
  margin: 0 0 0.3rem;
  line-height: 1.5;
}

/* Text input */
.store-chat-config__input {
  width: 100%;
  max-width: 360px;
  padding: 0.6rem 0.85rem;
  border: 1px solid var(--border-color, #d1d5db);
  border-radius: 8px;
  font-size: 0.95rem;
  background: var(--bg-secondary, #fff);
  color: var(--text-primary);
  outline: none;
  box-sizing: border-box;
  transition: border-color 0.15s;
}

.store-chat-config__input:focus {
  border-color: var(--accent);
}

.store-chat-config__input:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Textarea wrapper */
.store-chat-config__textarea-wrapper {
  position: relative;
}

.store-chat-config__textarea {
  width: 100%;
  padding: 0.75rem 1rem;
  border: 1px solid var(--border-color, #d1d5db);
  border-radius: 8px;
  font-size: 0.875rem;
  font-family: 'Courier New', Courier, monospace;
  background: var(--bg-secondary, #fff);
  color: var(--text-primary);
  resize: vertical;
  outline: none;
  box-sizing: border-box;
  line-height: 1.6;
  transition: border-color 0.15s;
  min-height: 320px;
}

.store-chat-config__textarea:focus {
  border-color: var(--accent);
}

.store-chat-config__textarea:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.store-chat-config__char-count {
  position: absolute;
  bottom: 0.6rem;
  right: 0.85rem;
  font-size: 0.75rem;
  color: var(--text-secondary);
  pointer-events: none;
}

/* Actions bar */
.store-chat-config__actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding-top: 0.5rem;
}

/* ── Theme overrides — dark themes ─────────────────────────────────────────── */
html[data-theme="cyberpunk"] .store-chat-config__input,
html[data-theme="cyberpunk"] .store-chat-config__textarea {
  background: #1a1d29;
  color: #39ff14;
  border-color: #00ffff44;
}

html[data-theme="cyberpunk"] .store-chat-config__input:focus,
html[data-theme="cyberpunk"] .store-chat-config__textarea:focus {
  border-color: #00ffff;
}

html[data-theme="cyberpunk"] .store-chat-config__alert--success {
  background: #0d2a1a;
  color: #39ff14;
  border-color: #39ff1466;
}

html[data-theme="cyberpunk"] .store-chat-config__alert--error {
  background: #2a0d0d;
  color: #ff4444;
  border-color: #ff444466;
}

html[data-theme="jarvis"] .store-chat-config__input,
html[data-theme="jarvis"] .store-chat-config__textarea {
  background: #0d1117;
  color: #58a6ff;
  border-color: #30363d;
}

html[data-theme="jarvis"] .store-chat-config__input:focus,
html[data-theme="jarvis"] .store-chat-config__textarea:focus {
  border-color: #58a6ff;
}

html[data-theme="jarvis"] .store-chat-config__alert--success {
  background: #0d2a1a;
  color: #3fb950;
  border-color: #3fb95066;
}

html[data-theme="jarvis"] .store-chat-config__alert--error {
  background: #2a0d0d;
  color: #f85149;
  border-color: #f8514966;
}

html[data-theme="rock"] .store-chat-config__input,
html[data-theme="rock"] .store-chat-config__textarea {
  background: #0a0a0a;
  color: #f0f0f0;
  border-color: #cc000044;
}

html[data-theme="rock"] .store-chat-config__input:focus,
html[data-theme="rock"] .store-chat-config__textarea:focus {
  border-color: #cc0000;
}

html[data-theme="golden"] .store-chat-config__input,
html[data-theme="golden"] .store-chat-config__textarea {
  background: #1a1610;
  color: #f5d060;
  border-color: #c9a52044;
}

html[data-theme="golden"] .store-chat-config__input:focus,
html[data-theme="golden"] .store-chat-config__textarea:focus {
  border-color: #c9a520;
}

html[data-theme="golden"] .store-chat-config__alert--success {
  background: #1a2a10;
  color: #90d060;
  border-color: #90d06066;
}

html[data-theme="golden"] .store-chat-config__alert--error {
  background: #2a1010;
  color: #f87171;
  border-color: #f8717166;
}

/* ── Theme overrides — light themes ────────────────────────────────────────── */
html[data-theme="parchment"] .store-chat-config__input,
html[data-theme="parchment"] .store-chat-config__textarea {
  background: #fdf8f0;
  color: #3d2b1f;
  border-color: #c8a97a;
}

html[data-theme="parchment"] .store-chat-config__input:focus,
html[data-theme="parchment"] .store-chat-config__textarea:focus {
  border-color: #8b6340;
}

html[data-theme="pop"] .store-chat-config__input,
html[data-theme="pop"] .store-chat-config__textarea {
  background: #fff0f9;
  color: #4a0044;
  border-color: #e070cc44;
}

html[data-theme="pop"] .store-chat-config__input:focus,
html[data-theme="pop"] .store-chat-config__textarea:focus {
  border-color: #e070cc;
}

html[data-theme="allwhite"] .store-chat-config__input,
html[data-theme="allwhite"] .store-chat-config__textarea {
  background: #ffffff;
  color: #111827;
  border-color: #d1d5db;
}
/* ─── Inventory Layout ─────────────────────────────────────────────────────── */

.inventory-page {
  display: flex;
  flex-direction: column;
  gap: 0;
  min-height: 0;
  flex: 1;
}

.inventory-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 24px 24px 0;
}

.inventory-header-icon {
  font-size: 28px;
  color: var(--primary-color, #3b82f6);
}

.inventory-header h1 {
  font-size: 1.5rem;
  font-weight: 700;
  margin: 0;
  color: var(--text-primary, #111827);
}

.inventory-header-sub {
  font-size: 0.875rem;
  color: var(--text-secondary, #6b7280);
  margin: 2px 0 0;
}

.inventory-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 24px;
  border-bottom: 1px solid var(--border-color, #e5e7eb);
  flex-wrap: wrap;
}

.inventory-search-wrap {
  flex: 1;
  min-width: 200px;
  position: relative;
  display: flex;
  align-items: center;
}

.inventory-search-icon {
  position: absolute;
  left: 12px;
  font-size: 18px;
  color: var(--text-secondary, #9ca3af);
  pointer-events: none;
}

.inventory-search-input {
  width: 100%;
  padding: 9px 12px 9px 38px;
  border: 1px solid var(--border-color, #d1d5db);
  border-radius: 8px;
  font-size: 0.9rem;
  background: var(--input-bg, #fff);
  color: var(--text-primary, #111827);
  outline: none;
  transition: border-color 0.15s;
}

.inventory-search-input:focus {
  border-color: var(--primary-color, #3b82f6);
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.15);
}

.inventory-search-input::placeholder {
  color: var(--text-secondary, #9ca3af);
}

.inventory-clear-btn {
  position: absolute;
  right: 10px;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-secondary, #9ca3af);
  display: flex;
  align-items: center;
  font-size: 18px;
  padding: 2px;
  border-radius: 50%;
  transition: color 0.15s;
}

.inventory-clear-btn:hover {
  color: var(--text-primary, #374151);
}

.inventory-result-count {
  font-size: 0.85rem;
  color: var(--text-secondary, #6b7280);
  white-space: nowrap;
}

.inventory-view-toggle {
  display: flex;
  border: 1px solid var(--border-color, #d1d5db);
  border-radius: 8px;
  overflow: hidden;
}

.view-toggle-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 12px;
  background: var(--card-bg, #fff);
  border: none;
  cursor: pointer;
  color: var(--text-secondary, #6b7280);
  font-size: 20px;
  transition: background 0.15s, color 0.15s;
}

.view-toggle-btn:first-child {
  border-right: 1px solid var(--border-color, #d1d5db);
}

.view-toggle-btn.active {
  background: var(--primary-color, #3b82f6);
  color: #fff;
}

.view-toggle-btn:not(.active):hover {
  background: var(--hover-bg, #f3f4f6);
  color: var(--text-primary, #374151);
}

/* ─── Body (filter sidebar + content) ─────────────────────────────────────── */

.inventory-body {
  display: flex;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

/* ─── Brand Filter Sidebar ─────────────────────────────────────────────────── */

.inventory-filter-sidebar {
  width: fit-content;
  min-width: 180px;
  max-width: 320px;
  flex-shrink: 0;
  border-right: 1px solid var(--border-color, #e5e7eb);
  display: flex;
  flex-direction: column;
  background: var(--sidebar-bg, #f9fafb);
  overflow-y: auto;
  overflow-x: hidden;
  transition: width 0.2s ease, min-width 0.2s ease, max-width 0.2s ease;
}

.inventory-filter-sidebar.collapsed {
  min-width: 32px;
  width: 32px;
  max-width: 32px;
  overflow: hidden;
}

.inventory-filter-sidebar.collapsed .status-filter-section,
.inventory-filter-sidebar.collapsed .filter-sidebar-header,
.inventory-filter-sidebar.collapsed .brand-filter-list {
  display: none;
}

/* ─── Sidebar collapse toggle ─────────────────────────────────────────────── */
.sidebar-collapse-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  width: 100%;
  padding: 6px 10px 6px 12px;
  border: none;
  border-bottom: 1px solid var(--border-color, #e5e7eb);
  background: transparent;
  cursor: pointer;
  color: var(--text-secondary, #6b7280);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
  overflow: hidden;
  transition: color 0.12s, background 0.12s;
  flex-shrink: 0;
}

.sidebar-collapse-btn:hover {
  color: var(--primary-color, #3b82f6);
  background: var(--hover-bg, rgba(0,0,0,0.04));
}

.inventory-filter-sidebar.collapsed .sidebar-collapse-btn {
  justify-content: center;
  padding: 8px 0;
  border-bottom: none;
}

.filter-sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px 10px;
  border-bottom: 1px solid var(--border-color, #e5e7eb);
  position: sticky;
  top: 0;
  background: var(--sidebar-bg, #f9fafb);
  z-index: 1;
}

.filter-sidebar-title {
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-secondary, #6b7280);
}

.filter-sidebar-actions {
  display: flex;
  gap: 6px;
}

.filter-action-btn {
  font-size: 0.72rem;
  padding: 2px 7px;
  border: 1px solid var(--border-color, #d1d5db);
  border-radius: 4px;
  background: transparent;
  cursor: pointer;
  color: var(--primary-color, #3b82f6);
  font-weight: 600;
  transition: background 0.12s, color 0.12s;
}

.filter-action-btn:hover {
  background: var(--primary-color, #3b82f6);
  color: #fff;
  border-color: var(--primary-color, #3b82f6);
}

/* ─── Status filter chips (sidebar) ──────────────────────────────────────────────── */
.status-filter-section {
  padding: 12px 14px 10px;
  border-bottom: 1px solid var(--border-color, #e5e7eb);
}

.status-filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 8px;
}

.status-chip {
  font-size: 0.72rem;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid var(--border-color, #d1d5db);
  background: transparent;
  color: var(--text-secondary, #6b7280);
  cursor: pointer;
  transition: all 0.12s;
  white-space: nowrap;
  line-height: 1.4;
}

.status-chip:hover {
  border-color: var(--primary-color, #3b82f6);
  color: var(--primary-color, #3b82f6);
}

.status-chip.selected {
  background: var(--primary-color, #3b82f6);
  color: #fff;
  border-color: var(--primary-color, #3b82f6);
}

.status-chip--active.selected {
  background: #16a34a;
  border-color: #16a34a;
  color: #fff;
}

.status-chip--draft.selected {
  background: #6b7280;
  border-color: #6b7280;
  color: #fff;
}

.status-chip--archived.selected {
  background: #b45309;
  border-color: #b45309;
  color: #fff;
}

/* ─── Actualizar (refresh) button — standard secondary action button ──────── */
.inventory-refresh-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem;
  border-radius: 6px;
  font-size: 1.1rem;
  cursor: pointer;
  border: 1px solid var(--border-color);
  background: var(--card-bg);
  color: var(--text-primary);
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.inventory-refresh-btn:hover:not(:disabled) {
  background: var(--hover-bg);
  border-color: var(--primary-color);
  color: var(--primary-color);
}

.inventory-refresh-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

/* ─── Sort select (toolbar) ───────────────────────────────────────────────────── */
.inventory-sort-select {
  font-size: 0.78rem;
  padding: 0.38rem 2rem 0.38rem 0.6rem;
  border-radius: 6px;
  border: 1px solid var(--border-color, #d1d5db);
  background: var(--input-bg, var(--card-bg, #ffffff));
  color: var(--text-primary, #111827);
  cursor: pointer;
  outline: none;
  transition: border-color 0.15s;
  min-width: 180px;
  -webkit-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%236b7280'%3E%3Cpath fill-rule='evenodd' d='M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z' clip-rule='evenodd'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.5rem center;
  background-size: 1rem;
  color-scheme: light;
}

.inventory-sort-select:hover,
.inventory-sort-select:focus {
  border-color: var(--primary-color, #3b82f6);
}

.brand-filter-list {
  list-style: none;
  margin: 0;
  padding: 8px 0;
}

.brand-filter-item {
  display: flex;
  align-items: center;
  padding: 0;
}

.brand-filter-label {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 7px 16px;
  cursor: pointer;
  transition: background 0.12s;
  font-size: 0.875rem;
  color: var(--text-primary, #374151);
}

.brand-filter-label:hover {
  background: var(--hover-bg, #f3f4f6);
}

.brand-filter-label input[type='checkbox'] {
  accent-color: var(--primary-color, #3b82f6);
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}

.brand-filter-name {
  flex: 1;
  white-space: normal;
  word-break: break-word;
}

.brand-filter-count {
  font-size: 0.75rem;
  color: var(--text-secondary, #9ca3af);
  background: var(--badge-bg, #e5e7eb);
  border-radius: 10px;
  padding: 1px 7px;
  min-width: 24px;
  text-align: center;
  font-weight: 600;
  flex-shrink: 0;
}

/* ─── Main Content Area ────────────────────────────────────────────────────── */

.inventory-content {
  flex: 1;
  overflow-y: auto;
  padding: 20px 24px;
}

/* ─── Loading / Empty / Error ──────────────────────────────────────────────── */

.inventory-loading,
.inventory-empty,
.inventory-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 60px 24px;
  color: var(--text-secondary, #6b7280);
  font-size: 0.95rem;
  text-align: center;
}

.inventory-spinner {
  width: 36px;
  height: 36px;
  border: 3px solid var(--border-color, #e5e7eb);
  border-top-color: var(--primary-color, #3b82f6);
  border-radius: 50%;
  animation: inv-spin 0.7s linear infinite;
}

@keyframes inv-spin {
  to { transform: rotate(360deg); }
}

.inventory-error {
  color: var(--error-color, #dc2626);
}

.inventory-error-icon {
  font-size: 36px;
}

/* ─── Grid View ────────────────────────────────────────────────────────────── */

.inventory-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
}

.product-card {
  background: var(--card-bg, #fff);
  border: 1px solid var(--border-color, #e5e7eb);
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: box-shadow 0.15s, transform 0.15s;
}

.product-card:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
}

.product-card-img-wrap {
  width: 100%;
  aspect-ratio: 4/3;
  background: var(--img-placeholder-bg, #f3f4f6);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.product-card-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 8px;
}

.product-card-img-placeholder {
  font-size: 48px;
  color: var(--border-color, #d1d5db);
}

.product-card-body {
  padding: 12px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.product-card-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  flex-wrap: wrap;
}

.product-card-code {
  font-size: 0.72rem;
  color: var(--text-secondary, #9ca3af);
  font-family: monospace;
  font-weight: 600;
  letter-spacing: 0.04em;
}

.product-card-brand {
  font-size: 0.68rem;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 10px;
  background: var(--badge-bg, #eff6ff);
  color: var(--primary-color, #2563eb);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.product-card-name {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-primary, #111827);
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.product-card-desc {
  font-size: 0.78rem;
  color: var(--text-secondary, #6b7280);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-top: 2px;
}

.product-card-category {
  display: inline-block;
  font-size: 0.68rem;
  padding: 2px 7px;
  border-radius: 8px;
  background: var(--hover-bg, #f3f4f6);
  color: var(--text-secondary, #6b7280);
  margin-top: 4px;
  align-self: flex-start;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.product-card-footer {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding: 8px 12px 12px;
  gap: 8px;
  flex-wrap: wrap;
}

.product-card-prices {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.product-card-price {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--primary-color, #3b82f6);
}

.product-card-price-dist {
  font-size: 0.72rem;
  color: var(--text-secondary, #9ca3af);
  font-weight: 500;
}

.product-card-price-none {
  font-size: 0.85rem;
  color: var(--text-secondary, #9ca3af);
  font-style: italic;
}

.product-card-badges {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}

/* ─── List View ────────────────────────────────────────────────────────────── */

.inventory-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  border: 1px solid var(--border-color, #e5e7eb);
  border-radius: 10px;
  overflow: hidden;
}

.inventory-list-header {
  display: grid;
  grid-template-columns: 110px 1fr 130px 120px 110px 100px 130px 90px;
  gap: 8px;
  padding: 10px 16px;
  background: var(--table-header-bg, #f9fafb);
  border-bottom: 1px solid var(--border-color, #e5e7eb);
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--text-secondary, #6b7280);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.inventory-list-row {
  display: grid;
  grid-template-columns: 110px 1fr 130px 120px 110px 100px 130px 90px;
  gap: 8px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-color, #e5e7eb);
  background: var(--card-bg, #fff);
  transition: background 0.12s;
  align-items: center;
}

.inventory-list-row:last-child {
  border-bottom: none;
}

.inventory-list-row:hover {
  background: var(--hover-bg, #f9fafb);
}

.list-cell-code {
  font-size: 0.78rem;
  font-family: monospace;
  font-weight: 600;
  color: var(--text-secondary, #6b7280);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.list-cell-name {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.list-cell-name-inner {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.list-cell-thumb {
  width: 40px;
  height: 40px;
  object-fit: contain;
  border-radius: 6px;
  background: var(--img-placeholder-bg, #f3f4f6);
  flex-shrink: 0;
  border: 1px solid var(--border-color, #e5e7eb);
}

.list-cell-thumb-placeholder {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  background: var(--img-placeholder-bg, #f3f4f6);
  color: var(--border-color, #d1d5db);
  font-size: 20px;
  flex-shrink: 0;
  border: 1px solid var(--border-color, #e5e7eb);
}

.list-cell-name-text-wrap {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.list-cell-name-text {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-primary, #111827);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.list-cell-name-desc {
  font-size: 0.75rem;
  color: var(--text-secondary, #6b7280);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.list-cell-brand {
  font-size: 0.85rem;
  color: var(--text-primary, #374151);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.list-cell-price {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--primary-color, #3b82f6);
  white-space: nowrap;
}

.list-cell-price-dist {
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--text-secondary, #9ca3af);
  white-space: nowrap;
}

.list-cell-price-none {
  font-size: 0.82rem;
  color: var(--text-secondary, #9ca3af);
  font-style: italic;
}

.list-cell-prices {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.list-cell-price-secondary {
  font-size: 0.72rem;
  color: var(--text-secondary, #9ca3af);
  white-space: nowrap;
}

.list-cell-price-promo {
  font-size: 0.72rem;
  color: #d97706;
  font-weight: 600;
  white-space: nowrap;
}

.list-cell-divisions {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.list-cell-div-count {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--text-primary, #111827);
}

.list-cell-div-label {
  font-size: 0.7rem;
  color: var(--text-secondary, #9ca3af);
}

/* ─── Grid extra price classes ─────────────────────────────────────────────── */

.product-card-price-extra {
  font-size: 0.7rem;
  color: var(--text-secondary, #6b7280);
  font-weight: 500;
}

.product-card-price-promo {
  font-size: 0.72rem;
  color: #d97706;
  font-weight: 600;
}

/* ─── Status Badges ────────────────────────────────────────────────────────── */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 20px;
  white-space: nowrap;
  text-transform: capitalize;
}

.badge-available {
  background: #dcfce7;
  color: #16a34a;
}

.badge-unavailable {
  background: #fee2e2;
  color: #dc2626;
}

.badge-active {
  background: #dbeafe;
  color: #2563eb;
}

.badge-draft {
  background: #f3f4f6;
  color: #6b7280;
}

/* ─── Responsive ───────────────────────────────────────────────────────────── */

@media (max-width: 1400px) {
  .inventory-list-header,
  .inventory-list-row {
    grid-template-columns: 100px 1fr 120px 110px 100px 90px 120px 80px;
  }
}

@media (max-width: 1200px) {
  .inventory-list-header,
  .inventory-list-row {
    grid-template-columns: 90px 1fr 110px 110px 100px 120px 80px;
  }

  /* Hide Divisiones (child 6) */
  .inventory-list-header :nth-child(6),
  .inventory-list-row :nth-child(6) {
    display: none;
  }
}

@media (max-width: 1024px) {
  .inventory-list-header,
  .inventory-list-row {
    grid-template-columns: 90px 1fr 105px 110px 100px;
  }

  /* Hide Divisiones, Disponibilidad, Estado */
  .inventory-list-header :nth-child(n+6),
  .inventory-list-row :nth-child(n+6) {
    display: none;
  }
}

/* ─── 768px: sidebar colapsa arriba + lista con scroll horizontal ─────────── */

@media (max-width: 768px) {
  .inventory-body {
    flex-direction: column;
    overflow: visible;
  }

  .inventory-filter-sidebar {
    width: 100%;
    max-width: 100%;
    border-right: none;
    border-bottom: 1px solid var(--border-color, #e5e7eb);
    max-height: 200px;
    overflow-y: auto;
  }

  .inventory-content {
    padding: 14px 16px;
    overflow-y: visible;
  }

  .inventory-header {
    padding: 16px 16px 0;
  }

  .inventory-toolbar {
    padding: 12px 16px;
    flex-wrap: wrap;
  }

  .inventory-grid {
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 12px;
  }

  /* Lista: permite scroll horizontal para no perder datos */
  .inventory-list {
    overflow-x: auto;
    overflow-y: visible;

    /* Restaura todas las columnas con ancho mínimo fijo */
    min-width: 620px;
    grid-template-columns: 85px 1fr 100px 110px 95px 120px 80px;
    /* 7 columnas: código, nombre, marca, pvp, dist, disponibilidad, estado */
    font-size: 0.8rem;
  }

  /* Ocultar divisiones (child 6) pero mostrar disponibilidad y estado */
  .inventory-list-header :nth-child(6),
  .inventory-list-row :nth-child(6) {
    display: none;
  }

  /* Restaurar disponibilidad (7) y estado (8) ocultos por 1024px */
  .inventory-list-header :nth-child(7),
  .inventory-list-header :nth-child(8),
  .inventory-list-row :nth-child(7),
  .inventory-list-row :nth-child(8) {
    display: revert;
  }
}

/* ─── 600px: filas de lista como tarjetas apiladas ──────────────────────────── */

@media (max-width: 600px) {
  .inventory-grid {
    grid-template-columns: repeat(auto-fill, minmax(145px, 1fr));
    gap: 10px;
  }

  /* Lista: transición a tarjetas */
  .inventory-list {
    overflow: visible;
    border-radius: 8px;
  }

  .inventory-list-header {
    display: none;
  }

  .inventory-list-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 10px;
    padding: 10px 12px;
    min-width: unset;
    border-radius: 0;
    font-size: 0.875rem;
  }

  /* Línea 1: nombre completo (ancho 100%) */
  .list-cell-name {
    order: 1;
    flex: 0 0 100%;
    max-width: 100%;
  }

  /* Línea 2: código + marca */
  .list-cell-code {
    order: 2;
    flex: 0 0 auto;
    font-size: 0.7rem;
  }

  .list-cell-brand {
    order: 2;
    flex: 0 0 auto;
    font-size: 0.78rem;
    font-weight: 600;
  }

  /* Separador visual entre código y marca */
  .list-cell-code::after {
    content: '·';
    margin-left: 8px;
    color: var(--border-color, #d1d5db);
  }

  /* Línea 3: precios */
  .list-cell-prices {
    order: 3;
    flex: 0 0 auto;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
  }

  .inventory-list-row > .list-cell-price-dist,
  .inventory-list-row > .list-cell-price-none {
    order: 3;
    flex: 0 0 auto;
  }

  /* Línea 4: badges de disponibilidad y estado */
  .inventory-list-row > .badge {
    order: 4;
    flex: 0 0 auto;
  }

  /* Ocultar divisiones en tarjetas (ya está en badge de disponibilidad) */
  .list-cell-divisions {
    display: none;
  }

  /* Ajuste de la descripción en tarjeta de nombre */
  .list-cell-name-text {
    white-space: normal;
    -webkit-line-clamp: 2;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
}

@media (max-width: 480px) {
  .inventory-grid {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  }

  .inventory-list-row {
    padding: 8px 10px;
    gap: 3px 8px;
  }
}

/* ─── Theme: cyberpunk ─────────────────────────────────────────────────────── */

html[data-theme='cyberpunk'] .inventory-page,
html[data-theme='cyberpunk'] .inventory-filter-sidebar,
html[data-theme='cyberpunk'] .filter-sidebar-header {
  background: #0f1117;
}

html[data-theme='cyberpunk'] .inventory-header h1 {
  color: #00ff88;
}

html[data-theme='cyberpunk'] .inventory-search-input {
  background: #1a1d29;
  color: #e0e0e0;
  border-color: #00ff88;
}

html[data-theme='cyberpunk'] .inventory-search-icon,
html[data-theme='cyberpunk'] .inventory-result-count,
html[data-theme='cyberpunk'] .inventory-header-sub,
html[data-theme='cyberpunk'] .filter-sidebar-title {
  color: #9ca3af;
}

html[data-theme='cyberpunk'] .brand-filter-label {
  color: #e0e0e0;
}

html[data-theme='cyberpunk'] .brand-filter-label:hover {
  background: #1a1d29;
}

html[data-theme='cyberpunk'] .brand-filter-count {
  background: #1a1d29;
  color: #9ca3af;
}

html[data-theme='cyberpunk'] .product-card {
  background: #1a1d29;
  border-color: #00ff88;
}

html[data-theme='cyberpunk'] .product-card-name,
html[data-theme='cyberpunk'] .list-cell-name-text,
html[data-theme='cyberpunk'] .list-cell-brand {
  color: #e0e0e0;
}

html[data-theme='cyberpunk'] .product-card-price,
html[data-theme='cyberpunk'] .list-cell-price {
  color: #00ff88;
}

html[data-theme='cyberpunk'] .inventory-list {
  border-color: #00ff88;
}

html[data-theme='cyberpunk'] .inventory-list-header {
  background: #0f1117;
  border-color: #00ff88;
}

html[data-theme='cyberpunk'] .inventory-list-row {
  background: #1a1d29;
  border-color: #1f2937;
}

html[data-theme='cyberpunk'] .inventory-list-row:hover {
  background: #0f1117;
}

html[data-theme='cyberpunk'] .view-toggle-btn {
  background: #1a1d29;
  border-color: #00ff88;
  color: #9ca3af;
}

html[data-theme='cyberpunk'] .view-toggle-btn.active {
  background: #00ff88;
  color: #0f1117;
}

html[data-theme='cyberpunk'] .inventory-toolbar {
  border-color: #1f2937;
}

html[data-theme='cyberpunk'] .inventory-card-img-wrap,
html[data-theme='cyberpunk'] .product-card-img-wrap {
  background: #0f1117;
}

html[data-theme='cyberpunk'] .list-cell-thumb,
html[data-theme='cyberpunk'] .list-cell-thumb-placeholder {
  background: #0f1117;
  border-color: #1f2937;
  color: #374151;
}

html[data-theme='cyberpunk'] .badge-available {
  background: #052e16;
  color: #4ade80;
}
html[data-theme='cyberpunk'] .badge-unavailable {
  background: #450a0a;
  color: #f87171;
}
html[data-theme='cyberpunk'] .badge-active {
  background: #0c1a2e;
  color: #60a5fa;
}
html[data-theme='cyberpunk'] .badge-draft {
  background: #1f2937;
  color: #9ca3af;
}

/* ─── Theme: jarvis ────────────────────────────────────────────────────────── */

html[data-theme='jarvis'] .inventory-page,
html[data-theme='jarvis'] .inventory-filter-sidebar,
html[data-theme='jarvis'] .filter-sidebar-header {
  background: #0a0e1a;
}

html[data-theme='jarvis'] .inventory-header h1 {
  color: #60a5fa;
}

html[data-theme='jarvis'] .inventory-search-input {
  background: #0d1117;
  color: #e0e0e0;
  border-color: #1e3a5f;
}

html[data-theme='jarvis'] .inventory-search-icon,
html[data-theme='jarvis'] .inventory-result-count,
html[data-theme='jarvis'] .inventory-header-sub,
html[data-theme='jarvis'] .filter-sidebar-title {
  color: #8b9dc3;
}

html[data-theme='jarvis'] .brand-filter-label {
  color: #c0cfe0;
}

html[data-theme='jarvis'] .brand-filter-label:hover {
  background: #0d1117;
}

html[data-theme='jarvis'] .brand-filter-count {
  background: #0d1117;
  color: #8b9dc3;
}

html[data-theme='jarvis'] .product-card {
  background: #0d1117;
  border-color: #1e3a5f;
}

html[data-theme='jarvis'] .product-card-name,
html[data-theme='jarvis'] .list-cell-name-text,
html[data-theme='jarvis'] .list-cell-brand {
  color: #c0cfe0;
}

html[data-theme='jarvis'] .product-card-price,
html[data-theme='jarvis'] .list-cell-price {
  color: #60a5fa;
}

html[data-theme='jarvis'] .inventory-list {
  border-color: #1e3a5f;
}

html[data-theme='jarvis'] .inventory-list-header {
  background: #0a0e1a;
  border-color: #1e3a5f;
}

html[data-theme='jarvis'] .inventory-list-row {
  background: #0d1117;
  border-color: #1e3a5f;
}

html[data-theme='jarvis'] .inventory-list-row:hover {
  background: #0a0e1a;
}

html[data-theme='jarvis'] .view-toggle-btn {
  background: #0d1117;
  color: #8b9dc3;
}

html[data-theme='jarvis'] .view-toggle-btn.active {
  background: #1e3a5f;
  color: #60a5fa;
}

html[data-theme='jarvis'] .inventory-toolbar {
  border-color: #1e3a5f;
}

html[data-theme='jarvis'] .product-card-img-wrap {
  background: #0a0e1a;
}

html[data-theme='jarvis'] .list-cell-thumb,
html[data-theme='jarvis'] .list-cell-thumb-placeholder {
  background: #0a0e1a;
  border-color: #1e3a5f;
  color: #1e3a5f;
}

html[data-theme='jarvis'] .badge-available {
  background: #052e16;
  color: #4ade80;
}
html[data-theme='jarvis'] .badge-unavailable {
  background: #450a0a;
  color: #f87171;
}
html[data-theme='jarvis'] .badge-active {
  background: #0c1a2e;
  color: #60a5fa;
}
html[data-theme='jarvis'] .badge-draft {
  background: #1f2937;
  color: #8b9dc3;
}

/* ─── Theme: rock ──────────────────────────────────────────────────────────── */

html[data-theme='rock'] .inventory-page,
html[data-theme='rock'] .inventory-filter-sidebar,
html[data-theme='rock'] .filter-sidebar-header {
  background: #0a0000;
}

html[data-theme='rock'] .inventory-header h1 {
  color: #ff4444;
}

html[data-theme='rock'] .inventory-search-input {
  background: #1a0000;
  color: #e0d0d0;
  border-color: #ff4444;
}

html[data-theme='rock'] .brand-filter-label {
  color: #e0d0d0;
}

html[data-theme='rock'] .brand-filter-label:hover {
  background: #1a0000;
}

html[data-theme='rock'] .brand-filter-count {
  background: #1a0000;
  color: #9ca3af;
}

html[data-theme='rock'] .product-card {
  background: #1a0000;
  border-color: #ff4444;
}

html[data-theme='rock'] .product-card-name,
html[data-theme='rock'] .list-cell-name-text,
html[data-theme='rock'] .list-cell-brand {
  color: #e0d0d0;
}

html[data-theme='rock'] .product-card-price,
html[data-theme='rock'] .list-cell-price {
  color: #ff4444;
}

html[data-theme='rock'] .inventory-list {
  border-color: #ff4444;
}

html[data-theme='rock'] .inventory-list-header {
  background: #0a0000;
}

html[data-theme='rock'] .inventory-list-row {
  background: #1a0000;
}

html[data-theme='rock'] .inventory-list-row:hover {
  background: #0a0000;
}

html[data-theme='rock'] .view-toggle-btn {
  background: #1a0000;
  color: #9ca3af;
}

html[data-theme='rock'] .view-toggle-btn.active {
  background: #ff4444;
  color: #fff;
}

html[data-theme='rock'] .inventory-toolbar,
html[data-theme='rock'] .inventory-filter-sidebar {
  border-color: #3d0000;
}

html[data-theme='rock'] .product-card-img-wrap {
  background: #0a0000;
}

html[data-theme='rock'] .list-cell-thumb,
html[data-theme='rock'] .list-cell-thumb-placeholder {
  background: #0a0000;
  border-color: #3d0000;
  color: #5a1a1a;
}

html[data-theme='rock'] .inventory-search-icon,
html[data-theme='rock'] .inventory-result-count,
html[data-theme='rock'] .inventory-header-sub,
html[data-theme='rock'] .filter-sidebar-title,
html[data-theme='rock'] .list-cell-code,
html[data-theme='rock'] .product-card-code,
html[data-theme='rock'] .product-card-desc,
html[data-theme='rock'] .list-cell-name-desc {
  color: #9e6060;
}

html[data-theme='rock'] .inventory-list-header {
  color: #9e6060;
  border-color: #3d0000;
}
html[data-theme='rock'] .inventory-list-row {
  border-color: #3d0000;
}

html[data-theme='rock'] .badge-available {
  background: #052e16;
  color: #4ade80;
}
html[data-theme='rock'] .badge-unavailable {
  background: #450a0a;
  color: #f87171;
}
html[data-theme='rock'] .badge-active {
  background: #1a0a0a;
  color: #ff8888;
}
html[data-theme='rock'] .badge-draft {
  background: #2a0a0a;
  color: #9e6060;
}

/* ─── Theme: golden ────────────────────────────────────────────────────────── */

html[data-theme='golden'] .inventory-page,
html[data-theme='golden'] .inventory-filter-sidebar,
html[data-theme='golden'] .filter-sidebar-header {
  background: #0d0f1a;
}

html[data-theme='golden'] .inventory-header h1 {
  color: #f5c842;
}

html[data-theme='golden'] .inventory-search-input {
  background: #1a1c2e;
  color: #f0e0c0;
  border-color: #f5c842;
}

html[data-theme='golden'] .brand-filter-label {
  color: #f0e0c0;
}

html[data-theme='golden'] .brand-filter-label:hover {
  background: #1a1c2e;
}

html[data-theme='golden'] .brand-filter-count {
  background: #1a1c2e;
  color: #a0906a;
}

html[data-theme='golden'] .product-card {
  background: #1a1c2e;
  border-color: #f5c842;
}

html[data-theme='golden'] .product-card-name,
html[data-theme='golden'] .list-cell-name-text,
html[data-theme='golden'] .list-cell-brand {
  color: #f0e0c0;
}

html[data-theme='golden'] .product-card-price,
html[data-theme='golden'] .list-cell-price {
  color: #f5c842;
}

html[data-theme='golden'] .inventory-list {
  border-color: #f5c842;
}

html[data-theme='golden'] .inventory-list-header {
  background: #0d0f1a;
}

html[data-theme='golden'] .inventory-list-row {
  background: #1a1c2e;
}

html[data-theme='golden'] .inventory-list-row:hover {
  background: #0d0f1a;
}

html[data-theme='golden'] .view-toggle-btn {
  background: #1a1c2e;
  color: #a0906a;
}

html[data-theme='golden'] .view-toggle-btn.active {
  background: #f5c842;
  color: #0d0f1a;
}

html[data-theme='golden'] .inventory-toolbar,
html[data-theme='golden'] .inventory-filter-sidebar {
  border-color: #2e2410;
}

html[data-theme='golden'] .product-card-img-wrap {
  background: #0d0f1a;
}

html[data-theme='golden'] .list-cell-thumb,
html[data-theme='golden'] .list-cell-thumb-placeholder {
  background: #0d0f1a;
  border-color: #2e2410;
  color: #4a3a1a;
}

html[data-theme='golden'] .inventory-search-icon,
html[data-theme='golden'] .inventory-result-count,
html[data-theme='golden'] .inventory-header-sub,
html[data-theme='golden'] .filter-sidebar-title,
html[data-theme='golden'] .list-cell-code,
html[data-theme='golden'] .product-card-code,
html[data-theme='golden'] .product-card-desc,
html[data-theme='golden'] .list-cell-name-desc {
  color: #a0906a;
}

html[data-theme='golden'] .inventory-list-header {
  color: #a0906a;
  border-color: #2e2410;
}
html[data-theme='golden'] .inventory-list-row {
  border-color: #2e2410;
}

html[data-theme='golden'] .badge-available {
  background: #052e16;
  color: #4ade80;
}
html[data-theme='golden'] .badge-unavailable {
  background: #450a0a;
  color: #f87171;
}
html[data-theme='golden'] .badge-active {
  background: #1a1c2e;
  color: #f5c842;
}
html[data-theme='golden'] .badge-draft {
  background: #1a1c2e;
  color: #a0906a;
}

/* ─── Theme: parchment ─────────────────────────────────────────────────────── */

html[data-theme='parchment'] .inventory-filter-sidebar,
html[data-theme='parchment'] .filter-sidebar-header {
  background: #f4ead8;
}

html[data-theme='parchment'] .product-card {
  background: #fffdf5;
  border-color: #d4b896;
}

html[data-theme='parchment'] .inventory-list-header {
  background: #f4ead8;
}

html[data-theme='parchment'] .inventory-list-row {
  background: #fffdf5;
}

html[data-theme='parchment'] .inventory-list-row:hover {
  background: #f4ead8;
}

html[data-theme='parchment'] .product-card-img-wrap {
  background: #f4ead8;
}

/* ─── Theme: pop ───────────────────────────────────────────────────────────── */

html[data-theme='pop'] .inventory-header h1 {
  color: #9333ea;
}

html[data-theme='pop'] .product-card-price,
html[data-theme='pop'] .list-cell-price {
  color: #9333ea;
}

html[data-theme='pop'] .product-card {
  background: #fff;
  border-color: #e9d5ff;
}

html[data-theme='pop'] .inventory-list-header {
  background: #faf5ff;
}

html[data-theme='pop'] .product-card-img-wrap {
  background: #faf5ff;
}

/* ─── Theme: allwhite ──────────────────────────────────────────────────────── */

html[data-theme='allwhite'] .inventory-filter-sidebar,
html[data-theme='allwhite'] .filter-sidebar-header {
  background: #f8f8f8;
}

html[data-theme='allwhite'] .inventory-list-header {
  background: #f8f8f8;
}

/* ─── Pagination ───────────────────────────────────────────────────────────── */

.inventory-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 20px 0 8px;
}

.pagination-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  border: 1px solid var(--border-color, #e5e7eb);
  background: var(--card-bg, #fff);
  color: var(--text-primary, #111827);
  font-size: 20px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}

.pagination-btn:hover:not(:disabled) {
  background: var(--primary-color, #3b82f6);
  border-color: var(--primary-color, #3b82f6);
  color: #fff;
}

.pagination-btn:disabled {
  opacity: 0.35;
  cursor: default;
}

.pagination-info {
  font-size: 0.875rem;
  color: var(--text-secondary, #6b7280);
  padding: 0 8px;
  white-space: nowrap;
}

/* ─── Pagination — dark themes ─────────────────────────────────────────────── */

html[data-theme='cyberpunk'] .pagination-btn,
html[data-theme='jarvis'] .pagination-btn,
html[data-theme='rock'] .pagination-btn,
html[data-theme='golden'] .pagination-btn {
  background: #1e2030;
  border-color: #374151;
  color: #f9fafb;
}

html[data-theme='cyberpunk'] .pagination-btn:hover:not(:disabled) {
  background: #00ff9d;
  border-color: #00ff9d;
  color: #000;
}

html[data-theme='jarvis'] .pagination-btn:hover:not(:disabled) {
  background: #3b82f6;
  border-color: #3b82f6;
  color: #fff;
}

html[data-theme='rock'] .pagination-btn:hover:not(:disabled) {
  background: #ef4444;
  border-color: #ef4444;
  color: #fff;
}

html[data-theme='golden'] .pagination-btn:hover:not(:disabled) {
  background: #d97706;
  border-color: #d97706;
  color: #fff;
}

html[data-theme='cyberpunk'] .pagination-info,
html[data-theme='jarvis'] .pagination-info,
html[data-theme='rock'] .pagination-info,
html[data-theme='golden'] .pagination-info {
  color: #9ca3af;
}

/* ─── Theme: starwars ──────────────────────────────────────────────────────── */

html[data-theme='starwars'] .inventory-page,
html[data-theme='starwars'] .inventory-filter-sidebar,
html[data-theme='starwars'] .filter-sidebar-header {
  background: #000510;
}

html[data-theme='starwars'] .inventory-header h1 {
  color: #FFE81F;
}

html[data-theme='starwars'] .inventory-search-input {
  background: #060e1c;
  color: #e8e6d0;
  border-color: rgba(255, 232, 31, 0.2);
}

html[data-theme='starwars'] .inventory-search-icon,
html[data-theme='starwars'] .inventory-result-count,
html[data-theme='starwars'] .inventory-header-sub,
html[data-theme='starwars'] .filter-sidebar-title {
  color: #8db4cc;
}

html[data-theme='starwars'] .brand-filter-label {
  color: #c0be90;
}

html[data-theme='starwars'] .brand-filter-label:hover {
  background: #060e1c;
}

html[data-theme='starwars'] .brand-filter-count {
  background: #060e1c;
  color: #8db4cc;
}

html[data-theme='starwars'] .product-card {
  background: #060e1c;
  border-color: rgba(255, 232, 31, 0.15);
}

html[data-theme='starwars'] .product-card-name,
html[data-theme='starwars'] .list-cell-name-text,
html[data-theme='starwars'] .list-cell-brand {
  color: #e8e6d0;
}

html[data-theme='starwars'] .product-card-price,
html[data-theme='starwars'] .list-cell-price {
  color: #FFE81F;
}

html[data-theme='starwars'] .inventory-list {
  border-color: rgba(255, 232, 31, 0.2);
}

html[data-theme='starwars'] .inventory-list-header {
  background: #030a15;
  border-color: rgba(255, 232, 31, 0.2);
}

html[data-theme='starwars'] .inventory-list-row {
  background: #060e1c;
  border-color: rgba(255, 232, 31, 0.08);
}

html[data-theme='starwars'] .inventory-list-row:hover {
  background: #0a1a30;
}

html[data-theme='starwars'] .view-toggle-btn {
  background: #060e1c;
  color: #8db4cc;
}

html[data-theme='starwars'] .view-toggle-btn.active {
  background: rgba(255, 232, 31, 0.12);
  color: #FFE81F;
}

html[data-theme='starwars'] .inventory-toolbar {
  border-color: rgba(255, 232, 31, 0.15);
}

html[data-theme='starwars'] .product-card-img-wrap {
  background: #030a15;
}

html[data-theme='starwars'] .list-cell-thumb,
html[data-theme='starwars'] .list-cell-thumb-placeholder {
  background: #030a15;
  border-color: rgba(255, 232, 31, 0.2);
  color: rgba(255, 232, 31, 0.3);
}

html[data-theme='starwars'] .badge-available {
  background: rgba(76, 175, 80, 0.12);
  color: #4caf50;
}
html[data-theme='starwars'] .badge-unavailable {
  background: rgba(229, 57, 53, 0.12);
  color: #e57373;
}
html[data-theme='starwars'] .badge-active {
  background: rgba(79, 195, 247, 0.1);
  color: #4fc3f7;
}
html[data-theme='starwars'] .badge-draft {
  background: #060e1c;
  color: #8db4cc;
}

/* ─── Status chip + sort select — dark theme overrides ──────────────────────────── */

html[data-theme='cyberpunk'] .inventory-sort-select {
  background: var(--card-bg);
  color: var(--text-primary);
  border-color: var(--border-color);
  color-scheme: dark;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%239ca3af'%3E%3Cpath fill-rule='evenodd' d='M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z' clip-rule='evenodd'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.5rem center;
  background-size: 1rem;
}
html[data-theme='cyberpunk'] .status-chip {
  color: #9ca3af;
  border-color: #374151;
}
html[data-theme='cyberpunk'] .status-chip:hover {
  border-color: #00ff88;
  color: #00ff88;
}
html[data-theme='cyberpunk'] .status-chip.selected,
html[data-theme='cyberpunk'] .status-chip--active.selected {
  background: #00ff88;
  border-color: #00ff88;
  color: #0f1117;
}
html[data-theme='cyberpunk'] .status-chip--draft.selected {
  background: #4b5563;
  border-color: #4b5563;
  color: #e0e0e0;
}
html[data-theme='cyberpunk'] .status-chip--archived.selected {
  background: #92400e;
  border-color: #92400e;
  color: #fcd34d;
}

html[data-theme='jarvis'] .inventory-sort-select {
  background: var(--card-bg);
  color: var(--text-primary);
  border-color: var(--border-color);
  color-scheme: dark;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%239ca3af'%3E%3Cpath fill-rule='evenodd' d='M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z' clip-rule='evenodd'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.5rem center;
  background-size: 1rem;
}
html[data-theme='jarvis'] .status-chip {
  color: #9ca3af;
  border-color: #1e3a5f;
}
html[data-theme='jarvis'] .status-chip:hover {
  border-color: #60a5fa;
  color: #60a5fa;
}
html[data-theme='jarvis'] .status-chip.selected,
html[data-theme='jarvis'] .status-chip--active.selected {
  background: #2563eb;
  border-color: #2563eb;
  color: #fff;
}
html[data-theme='jarvis'] .status-chip--draft.selected {
  background: #374151;
  border-color: #374151;
  color: #d1d5db;
}
html[data-theme='jarvis'] .status-chip--archived.selected {
  background: #7c3aed;
  border-color: #7c3aed;
  color: #fff;
}

html[data-theme='rock'] .inventory-sort-select {
  background: var(--card-bg);
  color: var(--text-primary);
  border-color: var(--border-color);
  color-scheme: dark;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%239ca3af'%3E%3Cpath fill-rule='evenodd' d='M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z' clip-rule='evenodd'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.5rem center;
  background-size: 1rem;
}
html[data-theme='rock'] .status-chip {
  color: #9e6060;
  border-color: #3d0000;
}
html[data-theme='rock'] .status-chip:hover {
  border-color: #ff4444;
  color: #ff4444;
}
html[data-theme='rock'] .status-chip.selected,
html[data-theme='rock'] .status-chip--active.selected {
  background: #ff4444;
  border-color: #ff4444;
  color: #fff;
}
html[data-theme='rock'] .status-chip--draft.selected {
  background: #4b1c1c;
  border-color: #4b1c1c;
  color: #e0d0d0;
}
html[data-theme='rock'] .status-chip--archived.selected {
  background: #7a2800;
  border-color: #7a2800;
  color: #fcd34d;
}

html[data-theme='golden'] .inventory-sort-select {
  background: var(--card-bg);
  color: var(--text-primary);
  border-color: var(--border-color);
  color-scheme: dark;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%239ca3af'%3E%3Cpath fill-rule='evenodd' d='M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z' clip-rule='evenodd'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.5rem center;
  background-size: 1rem;
}
html[data-theme='golden'] .status-chip {
  color: #a0906a;
  border-color: #2e2410;
}
html[data-theme='golden'] .status-chip:hover {
  border-color: #f5c842;
  color: #f5c842;
}
html[data-theme='golden'] .status-chip.selected,
html[data-theme='golden'] .status-chip--active.selected {
  background: #f5c842;
  border-color: #f5c842;
  color: #0d0f1a;
}
html[data-theme='golden'] .status-chip--draft.selected {
  background: #3d3010;
  border-color: #3d3010;
  color: #f0e0c0;
}
html[data-theme='golden'] .status-chip--archived.selected {
  background: #7c3a00;
  border-color: #7c3a00;
  color: #fcd34d;
}

html[data-theme='starwars'] .inventory-sort-select {
  background: var(--card-bg);
  color: var(--text-primary);
  border-color: var(--border-color);
  color-scheme: dark;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%239ca3af'%3E%3Cpath fill-rule='evenodd' d='M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z' clip-rule='evenodd'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.5rem center;
  background-size: 1rem;
}
html[data-theme='starwars'] .status-chip {
  color: #8db4cc;
  border-color: rgba(255, 232, 31, 0.2);
}
html[data-theme='starwars'] .status-chip:hover {
  border-color: rgba(255, 232, 31, 0.6);
  color: #FFE81F;
}
html[data-theme='starwars'] .status-chip.selected,
html[data-theme='starwars'] .status-chip--active.selected {
  background: rgba(255, 232, 31, 0.15);
  border-color: rgba(255, 232, 31, 0.5);
  color: #FFE81F;
}
html[data-theme='starwars'] .status-chip--draft.selected {
  background: rgba(141, 180, 204, 0.15);
  border-color: rgba(141, 180, 204, 0.4);
  color: #8db4cc;
}
html[data-theme='starwars'] .status-chip--archived.selected {
  background: rgba(229, 57, 53, 0.2);
  border-color: rgba(229, 57, 53, 0.5);
  color: #e57373;
}

/* ─── filter-action-btn + sidebar-collapse-btn — dark theme overrides ────────── */

html[data-theme='cyberpunk'] .filter-action-btn {
  color: #00ff88;
  border-color: #374151;
}
html[data-theme='cyberpunk'] .filter-action-btn:hover {
  background: rgba(0, 255, 136, 0.1);
  border-color: #00ff88;
  color: #00ff88;
}
html[data-theme='cyberpunk'] .sidebar-collapse-btn {
  color: #9ca3af;
  border-color: #1f2937;
}
html[data-theme='cyberpunk'] .sidebar-collapse-btn:hover {
  color: #00ff88;
  background: rgba(0, 255, 136, 0.06);
}

html[data-theme='jarvis'] .filter-action-btn {
  color: #60a5fa;
  border-color: #1e3a5f;
}
html[data-theme='jarvis'] .filter-action-btn:hover {
  background: rgba(96, 165, 250, 0.1);
  border-color: #60a5fa;
  color: #60a5fa;
}
html[data-theme='jarvis'] .sidebar-collapse-btn {
  color: #9ca3af;
  border-color: #1e3a5f;
}
html[data-theme='jarvis'] .sidebar-collapse-btn:hover {
  color: #60a5fa;
  background: rgba(96, 165, 250, 0.08);
}

html[data-theme='rock'] .filter-action-btn {
  color: #ff4444;
  border-color: #3d0000;
}
html[data-theme='rock'] .filter-action-btn:hover {
  background: rgba(255, 68, 68, 0.1);
  border-color: #ff4444;
  color: #ff4444;
}
html[data-theme='rock'] .sidebar-collapse-btn {
  color: #9e6060;
  border-color: #3d0000;
}
html[data-theme='rock'] .sidebar-collapse-btn:hover {
  color: #ff4444;
  background: rgba(255, 68, 68, 0.08);
}

html[data-theme='golden'] .filter-action-btn {
  color: #f5c842;
  border-color: #2e2410;
}
html[data-theme='golden'] .filter-action-btn:hover {
  background: rgba(245, 200, 66, 0.1);
  border-color: #f5c842;
  color: #f5c842;
}
html[data-theme='golden'] .sidebar-collapse-btn {
  color: #a0906a;
  border-color: #2e2410;
}
html[data-theme='golden'] .sidebar-collapse-btn:hover {
  color: #f5c842;
  background: rgba(245, 200, 66, 0.08);
}

html[data-theme='starwars'] .filter-action-btn {
  color: #FFE81F;
  border-color: rgba(255, 232, 31, 0.2);
}
html[data-theme='starwars'] .filter-action-btn:hover {
  background: rgba(255, 232, 31, 0.08);
  border-color: rgba(255, 232, 31, 0.5);
  color: #FFE81F;
}
html[data-theme='starwars'] .sidebar-collapse-btn {
  color: #8db4cc;
  border-color: rgba(255, 232, 31, 0.15);
}
html[data-theme='starwars'] .sidebar-collapse-btn:hover {
  color: #FFE81F;
  background: rgba(255, 232, 31, 0.06);
}

/* ─── Product Re-sync Button ───────────────────────────────────────────────── */

.product-resync-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 6px;
  right: 6px;
  width: 24px;
  height: 24px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--text-secondary, #9ca3af);
  cursor: pointer;
  transition: color 0.15s, background 0.15s;
  opacity: 0;
}
.product-card {
  position: relative;
}
.product-card:hover .product-resync-btn {
  opacity: 1;
}
.product-resync-btn:hover {
  color: var(--accent, #2563eb);
  background: rgba(37, 99, 235, 0.08);
}

.product-resync-btn--row {
  position: static;
  width: 26px;
  height: 26px;
  opacity: 0.35;
  border-radius: 4px;
}
.product-resync-btn--row:hover {
  opacity: 1;
}

.inv-td--actions {
  width: 36px;
  text-align: center;
}

/* ─── Resync Confirmation Modal ────────────────────────────────────────────── */

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1200;
  padding: 1rem;
}

.modal-content {
  width: 100%;
  max-width: 480px;
  border-radius: 12px;
  background: var(--bg-primary, #ffffff);
  border: 1px solid var(--border-color, #e5e7eb);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.18);
  color: var(--text-primary, #111827);
  overflow: hidden;
}

.modal-header {
  display: flex;
  gap: 0.7rem;
  align-items: center;
  padding: 1rem 1.2rem;
  border-bottom: 1px solid var(--border-color, #e5e7eb);
  background: var(--bg-secondary, #f9fafb);
}

.modal-title {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-primary, #111827);
}

.modal-body {
  padding: 1.1rem 1.2rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.modal-body p {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--text-primary, #374151);
}

.modal-body-sub {
  font-size: 0.82rem !important;
  color: var(--text-secondary, #6b7280) !important;
}

.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.6rem;
  padding: 0.9rem 1.2rem;
  border-top: 1px solid var(--border-color, #e5e7eb);
  background: var(--bg-secondary, #f9fafb);
}

.modal-btn {
  padding: 7px 20px;
  border-radius: 7px;
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, opacity 0.15s;
}
.modal-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.modal-btn--secondary {
  background: transparent;
  border: 1px solid var(--border-color, #d1d5db);
  color: var(--text-secondary, #6b7280);
}
.modal-btn--secondary:hover:not(:disabled) {
  background: var(--bg-hover, #f3f4f6);
}

.modal-btn--primary {
  background: var(--accent, #2563eb);
  border: 1px solid var(--accent, #2563eb);
  color: #fff;
}
.modal-btn--primary:hover:not(:disabled) {
  opacity: 0.88;
}

/* ─── Resync Toast ─────────────────────────────────────────────────────────── */

.resync-toast {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 1300;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  border-radius: 8px;
  font-size: 0.88rem;
  font-weight: 600;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
  animation: toastSlideIn 0.25s ease;
}

@keyframes toastSlideIn {
  from { transform: translateY(20px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

.resync-toast--ok {
  background: #dcfce7;
  color: #166534;
  border: 1px solid #bbf7d0;
}

.resync-toast--error {
  background: #fee2e2;
  color: #991b1b;
  border: 1px solid #fecaca;
}

.resync-toast-close {
  background: none;
  border: none;
  cursor: pointer;
  color: inherit;
  display: flex;
  align-items: center;
  padding: 2px;
  opacity: 0.7;
}
.resync-toast-close:hover { opacity: 1; }

/* ─── Modal button theme overrides (dark themes with bright accent colors) ── */

/* Cyberpunk: neon green accent → dark text for legibility */
html[data-theme='cyberpunk'] .modal-btn--primary {
  background: #00ff9d;
  border-color: #00ff9d;
  color: #060d0a;
}
html[data-theme='cyberpunk'] .modal-btn--primary:hover:not(:disabled) {
  background: #00e08a;
  border-color: #00e08a;
  opacity: 1;
}
html[data-theme='cyberpunk'] .modal-btn--secondary {
  border-color: rgba(0, 255, 157, 0.35);
  color: #00ff9d;
}
html[data-theme='cyberpunk'] .modal-btn--secondary:hover:not(:disabled) {
  background: rgba(0, 255, 157, 0.08);
}
html[data-theme='cyberpunk'] .modal-content {
  background: #0a0e18;
  border-color: rgba(0, 255, 157, 0.22);
  color: #e0ffe0;
}
html[data-theme='cyberpunk'] .modal-header,
html[data-theme='cyberpunk'] .modal-actions {
  background: #070b0f;
  border-color: rgba(0, 255, 157, 0.15);
}
html[data-theme='cyberpunk'] .modal-title {
  color: #00ff9d;
}
html[data-theme='cyberpunk'] .modal-body p {
  color: #a0c8a0;
}

/* Jarvis: bright cyan accent → dark text */
html[data-theme='jarvis'] .modal-btn--primary {
  background: #00b4ff;
  border-color: #00b4ff;
  color: #00080f;
}
html[data-theme='jarvis'] .modal-btn--primary:hover:not(:disabled) {
  background: #009de0;
  border-color: #009de0;
  opacity: 1;
}
html[data-theme='jarvis'] .modal-btn--secondary {
  border-color: rgba(0, 180, 255, 0.35);
  color: #00b4ff;
}
html[data-theme='jarvis'] .modal-btn--secondary:hover:not(:disabled) {
  background: rgba(0, 180, 255, 0.08);
}
html[data-theme='jarvis'] .modal-content {
  background: #0d1117;
  border-color: rgba(0, 180, 255, 0.2);
  color: #cce8ff;
}
html[data-theme='jarvis'] .modal-header,
html[data-theme='jarvis'] .modal-actions {
  background: #080e14;
  border-color: rgba(0, 180, 255, 0.12);
}
html[data-theme='jarvis'] .modal-title {
  color: #00b4ff;
}
html[data-theme='jarvis'] .modal-body p {
  color: #90b8d0;
}

/* Golden: gold accent → dark text */
html[data-theme='golden'] .modal-btn--primary {
  background: #d4af37;
  border-color: #d4af37;
  color: #1a1200;
}
html[data-theme='golden'] .modal-btn--primary:hover:not(:disabled) {
  background: #be9c2e;
  border-color: #be9c2e;
  opacity: 1;
}
html[data-theme='golden'] .modal-btn--secondary {
  border-color: rgba(212, 175, 55, 0.35);
  color: #d4af37;
}
html[data-theme='golden'] .modal-btn--secondary:hover:not(:disabled) {
  background: rgba(212, 175, 55, 0.08);
}
html[data-theme='golden'] .modal-content {
  background: #12100a;
  border-color: rgba(212, 175, 55, 0.2);
  color: #f0e0b0;
}
html[data-theme='golden'] .modal-header,
html[data-theme='golden'] .modal-actions {
  background: #0c0a06;
  border-color: rgba(212, 175, 55, 0.12);
}
html[data-theme='golden'] .modal-title {
  color: #d4af37;
}
html[data-theme='golden'] .modal-body p {
  color: #b09060;
}

/* Rock: crimson on dark — white text works, just fix modal backgrounds */
html[data-theme='rock'] .modal-content {
  background: #0f0005;
  border-color: rgba(220, 20, 60, 0.25);
  color: #f0d0d5;
}
html[data-theme='rock'] .modal-header,
html[data-theme='rock'] .modal-actions {
  background: #090003;
  border-color: rgba(220, 20, 60, 0.15);
}
html[data-theme='rock'] .modal-title {
  color: #ff4060;
}
html[data-theme='rock'] .modal-body p {
  color: #c0a0a5;
}
html[data-theme='rock'] .modal-btn--primary {
  background: #dc143c;
  border-color: #dc143c;
  color: #fff;
}
html[data-theme='rock'] .modal-btn--secondary {
  border-color: rgba(220, 20, 60, 0.35);
  color: #ff4060;
}
html[data-theme='rock'] .modal-btn--secondary:hover:not(:disabled) {
  background: rgba(220, 20, 60, 0.08);
}
/* ─── Conversation Log – supplemental styles ─────────────────────────────── */
/* Base table/layout comes from GonherInventory.css                            */

/* ── Date filter controls ──────────────────────────────────────────────────── */

.conv-date-filters {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.conv-date-label {
  font-size: 0.85rem;
  color: var(--text-secondary, #6b7280);
  white-space: nowrap;
}

.conv-date-input {
  padding: 8px 10px;
  border: 1px solid var(--border-color, #d1d5db);
  border-radius: 8px;
  font-size: 0.875rem;
  background: var(--input-bg, #fff);
  color: var(--text-primary, #111827);
  outline: none;
  transition: border-color 0.15s;
}

.conv-date-input:focus {
  border-color: var(--primary-color, #7c3aed);
  box-shadow: 0 0 0 2px rgba(124, 58, 237, 0.15);
}

/* ── Row styles ──────────────────────────────────────────────────────────── */

.conv-row-expanded td {
  background: var(--bg-secondary, #f9fafb);
}

.conv-date {
  display: block;
  font-size: 0.875rem;
  color: var(--text-primary, #111827);
  font-weight: 500;
}

.conv-time {
  display: block;
  font-size: 0.8rem;
  color: var(--text-secondary, #6b7280);
}

.conv-first-msg {
  max-width: 360px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.9rem;
  color: var(--text-primary, #111827);
}

.conv-count-badge {
  display: inline-block;
  background: var(--primary-color, #7c3aed);
  color: #fff;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
  padding: 2px 8px;
  min-width: 28px;
  text-align: center;
}

.conv-expand-btn {
  background: none;
  border: 1px solid var(--border-color, #e5e7eb);
  border-radius: 6px;
  cursor: pointer;
  color: var(--text-secondary, #6b7280);
  font-size: 1.2rem;
  padding: 3px 6px;
  display: inline-flex;
  align-items: center;
  transition: background 0.15s, color 0.15s;
}

.conv-expand-btn:hover {
  background: var(--bg-secondary, #f3f4f6);
  color: var(--primary-color, #7c3aed);
}

/* ── Thread (expanded detail row) ─────────────────────────────────────────── */

.conv-detail-row td {
  padding: 0 !important;
  background: var(--bg-secondary, #f9fafb);
  border-bottom: 2px solid var(--primary-color, #7c3aed);
}

.conv-thread {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px 24px;
  max-height: 420px;
  overflow-y: auto;
}

.conv-bubble {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-width: 75%;
  padding: 10px 14px;
  border-radius: 12px;
  font-size: 0.9rem;
}

.conv-bubble-user {
  align-self: flex-end;
  background: var(--primary-color, #7c3aed);
  color: #fff;
  border-bottom-right-radius: 4px;
}

.conv-bubble-assistant {
  align-self: flex-start;
  background: var(--bg-primary, #fff);
  border: 1px solid var(--border-color, #e5e7eb);
  color: var(--text-primary, #111827);
  border-bottom-left-radius: 4px;
}

.conv-bubble-label {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  opacity: 0.75;
}

.conv-bubble-content {
  margin: 0;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
}

/* ── Pagination ─────────────────────────────────────────────────────────── */

.conv-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 24px;
  border-top: 1px solid var(--border-color, #e5e7eb);
  flex-wrap: wrap;
  gap: 8px;
}

.conv-pagination-info {
  font-size: 0.85rem;
  color: var(--text-secondary, #6b7280);
}

.conv-pagination-controls {
  display: flex;
  gap: 4px;
}

.conv-pagination-controls button {
  background: none;
  border: 1px solid var(--border-color, #d1d5db);
  border-radius: 6px;
  cursor: pointer;
  color: var(--text-primary, #374151);
  font-size: 1.2rem;
  padding: 4px 8px;
  display: inline-flex;
  align-items: center;
  transition: background 0.15s, color 0.15s;
}

.conv-pagination-controls button:hover:not(:disabled) {
  background: var(--bg-secondary, #f3f4f6);
  color: var(--primary-color, #7c3aed);
}

.conv-pagination-controls button:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

/* ── Theme overrides ─────────────────────────────────────────────────────── */

html[data-theme="cyberpunk"] .conv-date-input,
html[data-theme="jarvis"] .conv-date-input,
html[data-theme="rock"] .conv-date-input,
html[data-theme="golden"] .conv-date-input {
  background: var(--input-bg, #1e2235);
  color: var(--text-primary, #e0e0e0);
  border-color: var(--border-color, #3a3f5c);
}

html[data-theme="cyberpunk"] .conv-bubble-assistant,
html[data-theme="jarvis"] .conv-bubble-assistant,
html[data-theme="rock"] .conv-bubble-assistant,
html[data-theme="golden"] .conv-bubble-assistant {
  background: var(--bg-tertiary, #1a1d29);
  border-color: var(--border-color, #3a3f5c);
}

html[data-theme="cyberpunk"] .conv-row-expanded td,
html[data-theme="jarvis"] .conv-row-expanded td,
html[data-theme="rock"] .conv-row-expanded td,
html[data-theme="golden"] .conv-row-expanded td {
  background: var(--bg-tertiary, #16192a);
}

html[data-theme="cyberpunk"] .conv-detail-row td,
html[data-theme="jarvis"] .conv-detail-row td,
html[data-theme="rock"] .conv-detail-row td,
html[data-theme="golden"] .conv-detail-row td {
  background: var(--bg-tertiary, #16192a);
}

html[data-theme="cyberpunk"] .conv-thread,
html[data-theme="jarvis"] .conv-thread,
html[data-theme="rock"] .conv-thread,
html[data-theme="golden"] .conv-thread {
  background: var(--bg-tertiary, #16192a);
}

html[data-theme="cyberpunk"] .conv-expand-btn:hover,
html[data-theme="jarvis"] .conv-expand-btn:hover,
html[data-theme="rock"] .conv-expand-btn:hover,
html[data-theme="golden"] .conv-expand-btn:hover {
  background: var(--bg-secondary, #1e2235);
}

html[data-theme="parchment"] .conv-bubble-assistant,
html[data-theme="allwhite"] .conv-bubble-assistant {
  background: var(--bg-secondary, #f8f4ec);
  border-color: var(--border-color, #d4c9a8);
  color: var(--text-primary, #3d3020);
}

/* Dark themes: primary-color is a bright/neon hue — dark text is required for
   legibility on user bubbles and count badges. Use --btn-primary-text when
   available (cyberpunk, golden) or fall back to --bg-primary (near-black). */
html[data-theme="cyberpunk"] .conv-bubble-user,
html[data-theme="jarvis"] .conv-bubble-user,
html[data-theme="golden"] .conv-bubble-user {
  color: var(--btn-primary-text, var(--bg-primary));
}

html[data-theme="cyberpunk"] .conv-count-badge,
html[data-theme="jarvis"] .conv-count-badge,
html[data-theme="golden"] .conv-count-badge {
  background: var(--primary-color);
  color: var(--btn-primary-text, var(--bg-primary));
}
/* ──────────────────────────────────────────────────────────────────────────────
   Shared inventory list view — import this file in every inventory page.
   All classes are prefixed with  inv-  to avoid collisions.
   ────────────────────────────────────────────────────────────────────────────── */

/* ── Scrollable wrapper ────────────────────────────────────────────────────── */

.inv-list-wrap {
  border: 1px solid var(--border-color, #e5e7eb);
  border-radius: 10px;
  overflow-x: auto;          /* horizontal scroll on small screens */
}

/* ── Table base ────────────────────────────────────────────────────────────── */

.inv-list {
  width: 100%;
  min-width: 780px;          /* prevents columns from collapsing completely */
  border-collapse: collapse;
  font-size: 0.875rem;
  color: var(--text-primary, #111827);
}

.inv-list thead tr {
  background: var(--table-header-bg, #f9fafb);
  border-bottom: 2px solid var(--border-color, #e5e7eb);
}

.inv-list th {
  padding: 10px 14px;
  text-align: left;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--text-secondary, #6b7280);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
}

.inv-list td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--border-color, #f3f4f6);
  vertical-align: middle;
}

.inv-list tbody tr:last-child td {
  border-bottom: none;
}

.inv-list tbody tr:hover td {
  background: var(--hover-bg, #f9fafb);
}

/* ── Image column ──────────────────────────────────────────────────────────── */

.inv-th--img {
  width: 56px;
  min-width: 56px;
  padding: 8px 10px !important;
}

.inv-td--img {
  width: 56px;
  min-width: 56px;
  padding: 6px 10px !important;
}

.inv-thumb {
  width: 40px;
  height: 40px;
  object-fit: cover;
  border-radius: 6px;
  border: 1px solid var(--border-color, #e5e7eb);
  display: block;
  background: var(--hover-bg, #f3f4f6);
}

.inv-thumb-ph {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  background: var(--hover-bg, #f3f4f6);
  color: var(--text-secondary, #9ca3af);
  font-size: 20px;
  border: 1px solid var(--border-color, #e5e7eb);
}

/* ── Name column ───────────────────────────────────────────────────────────── */

.inv-th--name {
  min-width: 200px;
}

.inv-name {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.inv-name-text {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-primary, #111827);
  line-height: 1.3;
}

.inv-name-sub {
  font-size: 0.75rem;
  color: var(--text-secondary, #6b7280);
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ── Code / SKU ────────────────────────────────────────────────────────────── */

.inv-code {
  font-family: ui-monospace, 'SFMono-Regular', monospace;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-secondary, #6b7280);
  white-space: nowrap;
  background: var(--hover-bg, #f3f4f6);
  padding: 2px 5px;
  border-radius: 4px;
}

/* ── Price ─────────────────────────────────────────────────────────────────── */

.inv-prices {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 80px;
}

.inv-price {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--primary-color, #3b82f6);
  white-space: nowrap;
}

.inv-price-dist {
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--text-secondary, #9ca3af);
  white-space: nowrap;
}

.inv-price-sub {
  font-size: 0.7rem;
  color: var(--text-secondary, #9ca3af);
  white-space: nowrap;
}

.inv-price-promo {
  font-size: 0.7rem;
  color: #d97706;
  font-weight: 600;
  white-space: nowrap;
}

.inv-price-none {
  font-size: 0.82rem;
  color: var(--text-secondary, #9ca3af);
  font-style: italic;
}

/* ── Divisions / Stock count ───────────────────────────────────────────────── */

.inv-divisions {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.inv-div-count {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--text-primary, #111827);
}

.inv-div-label {
  font-size: 0.7rem;
  color: var(--text-secondary, #9ca3af);
}

/* ── Stock danger ──────────────────────────────────────────────────────────── */

.inv-stock-danger {
  color: #dc2626;
  font-weight: 700;
}

/* ── Out-of-stock row tint ─────────────────────────────────────────────────── */

.inv-tr--out-stock td {
  background: #fff7f7;
}

.inv-list tbody .inv-tr--out-stock:hover td {
  background: #fee2e2;
}

/* dark themes: override out-of-stock to a dark tint (beats the base rule above) */
html[data-theme='cyberpunk'] .inv-list tbody .inv-tr--out-stock td { background: rgba(255, 0, 0, 0.07); }
html[data-theme='jarvis']    .inv-list tbody .inv-tr--out-stock td { background: rgba(229, 57, 53, 0.07); }
html[data-theme='rock']      .inv-list tbody .inv-tr--out-stock td { background: rgba(255, 0, 0, 0.07); }
html[data-theme='golden']    .inv-list tbody .inv-tr--out-stock td { background: rgba(229, 57, 53, 0.07); }
html[data-theme='starwars']  .inv-list tbody .inv-tr--out-stock td { background: rgba(229, 57, 53, 0.14); }
html[data-theme='jedi']      .inv-list tbody .inv-tr--out-stock td { background: rgba(229, 57, 53, 0.07); }
html[data-theme='darkforce']  .inv-list tbody .inv-tr--out-stock td { background: rgba(229, 57, 53, 0.07); }

/* ── Actions column ────────────────────────────────────────────────────────── */

.inv-td--actions {
  white-space: nowrap;
}

/* ─── Theme: cyberpunk ──────────────────────────────────────────────────────── */

html[data-theme='cyberpunk'] .inv-list-wrap { border-color: #1a3a1a; }
html[data-theme='cyberpunk'] .inv-list thead tr { background: #0f1a0f; border-color: #1a3a1a; }
html[data-theme='cyberpunk'] .inv-list th { color: #4ade80; }
html[data-theme='cyberpunk'] .inv-list td { border-color: #1a3a1a; color: #d1fae5; }
html[data-theme='cyberpunk'] .inv-list tbody tr:hover td { background: #1a2a1a; }
html[data-theme='cyberpunk'] .inv-thumb-ph { background: #0f1117; color: #4ade80; border-color: #1a3a1a; }

/* ─── Theme: starwars ──────────────────────────────────────────────────────── */
html[data-theme='starwars'] .inv-list-wrap { border-color: rgba(255, 232, 31, 0.2); }
html[data-theme='starwars'] .inv-list thead tr { background: #030a15; border-color: rgba(255, 232, 31, 0.2); }
html[data-theme='starwars'] .inv-list th { color: #FFE81F; }
html[data-theme='starwars'] .inv-list td { background: #060e1c; border-color: rgba(255, 232, 31, 0.08); color: #e8e6d0; }
html[data-theme='starwars'] .inv-list tbody tr:hover td { background: #0a1a30; }
html[data-theme='starwars'] .inv-thumb-ph { background: #030a15; color: #FFE81F; border-color: rgba(255, 232, 31, 0.2); }
html[data-theme='starwars'] .inv-code { background: #030a15; color: #8db4cc; }
html[data-theme='starwars'] .inv-name-text { color: #e8e6d0; }
html[data-theme='starwars'] .inv-name-sub { color: #8db4cc; }
html[data-theme='starwars'] .inv-price { color: #FFE81F; }
html[data-theme='starwars'] .inv-price-dist { color: #8db4cc; }
html[data-theme='cyberpunk'] .inv-thumb { border-color: #1a3a1a; background: #0f1117; }
html[data-theme='cyberpunk'] .inv-code { background: #0a1a0a; color: #4ade80; }
html[data-theme='cyberpunk'] .inv-price { color: #00ff9d; }

/* ─── Theme: jarvis ─────────────────────────────────────────────────────────── */

html[data-theme='jarvis'] .inv-list-wrap { border-color: #1a3050; }
html[data-theme='jarvis'] .inv-list thead tr { background: #060d1c; border-color: #1a3050; }
html[data-theme='jarvis'] .inv-list th { color: #4a86c0; }
html[data-theme='jarvis'] .inv-list td { border-color: #1a3050; color: #a8d4ff; }
html[data-theme='jarvis'] .inv-list tbody tr:hover td { background: #0a1a30; }
html[data-theme='jarvis'] .inv-thumb-ph { background: #060d1c; color: #4a86c0; border-color: #1a3050; }
html[data-theme='jarvis'] .inv-thumb { border-color: #1a3050; background: #060d1c; }
html[data-theme='jarvis'] .inv-code { background: #040a14; color: #4a86c0; }
html[data-theme='jarvis'] .inv-price { color: #00b4ff; }
/* ─── Status filter chips bar ───────────────────────────────────────────────── */

.phys-status-chips-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 8px 24px;
  border-bottom: 1px solid var(--border-color, #e5e7eb);
}

/* ─── Stats bar ────────────────────────────────────────────────────────────── */

.phys-stats-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 24px;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--border-color, #e5e7eb);
}

.phys-stat-chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 6px 16px;
  border-radius: 20px;
  background: var(--hover-bg, #f3f4f6);
  border: 1px solid var(--border-color, #e5e7eb);
  min-width: 72px;
}

.phys-stat-chip--ok {
  background: #dcfce7;
  border-color: #bbf7d0;
}

.phys-stat-chip--warn {
  background: #fef9c3;
  border-color: #fde047;
}

.phys-stat-chip--danger {
  background: #fee2e2;
  border-color: #fecaca;
}

.phys-stat-value {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text-primary, #111827);
  line-height: 1.2;
}

.phys-stat-chip--ok .phys-stat-value   { color: #15803d; }
.phys-stat-chip--warn .phys-stat-value  { color: #b45309; }
.phys-stat-chip--danger .phys-stat-value { color: #dc2626; }

.phys-stat-label {
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-secondary, #6b7280);
  white-space: nowrap;
}

/* ─── Toolbar filter select ─────────────────────────────────────────────────── */

.phys-filter-select {
  padding: 0.45rem 2rem 0.45rem 0.75rem;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  font-size: 0.875rem;
  background: var(--input-bg, var(--bg-primary));
  color: var(--text-primary);
  outline: none;
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s;
  -webkit-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%236b7280'%3E%3Cpath fill-rule='evenodd' d='M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z' clip-rule='evenodd'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.5rem center;
  background-size: 1rem;
  max-width: 180px;
}

.phys-filter-select:focus {
  border-color: var(--primary-color);
  box-shadow: 0 0 0 2px rgba(232, 93, 4, 0.12);
}

/* ─── Add button ────────────────────────────────────────────────────────────── */

.phys-add-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border: none;
  border-radius: 8px;
  background: var(--primary-color, #3b82f6);
  color: #fff;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s, opacity 0.15s;
}

.phys-add-btn:hover {
  opacity: 0.88;
}

/* ─── Badge category ────────────────────────────────────────────────────────── */

.phys-badge-cat {
  background: var(--hover-bg, #f3f4f6);
  color: var(--text-secondary, #6b7280);
  font-weight: 600;
}

/* ─── Card badges spacing ───────────────────────────────────────────────────── */

.phys-card-badges {
  margin-bottom: 8px;
}

/* ─── Card content (inside product-card) ───────────────────────────────────── */

.phys-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
}

.phys-card-name {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-primary, #111827);
  line-height: 1.35;
  flex: 1;
  /* allow wrapping to two lines */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.phys-card-actions {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}

/* ─── Icon buttons (card + table) ───────────────────────────────────────────── */

.phys-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 1px solid var(--border-color, #d1d5db);
  border-radius: 6px;
  background: transparent;
  color: var(--text-secondary, #6b7280);
  font-size: 15px;
  cursor: pointer;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}

.phys-icon-btn:hover {
  background: var(--hover-bg, #f3f4f6);
  color: var(--text-primary, #374151);
}

.phys-icon-btn--danger {
  color: #dc2626;
  border-color: #fecaca;
}

.phys-icon-btn--danger:hover {
  background: #fee2e2;
  color: #b91c1c;
}

/* ─── Card field rows ───────────────────────────────────────────────────────── */

.phys-field {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.82rem;
  color: var(--text-primary, #374151);
  line-height: 1.4;
}

.phys-label {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-secondary, #9ca3af);
  white-space: nowrap;
}

.phys-code {
  font-family: monospace;
  font-size: 0.8rem;
  color: var(--text-secondary, #6b7280);
  background: var(--hover-bg, #f3f4f6);
  padding: 1px 5px;
  border-radius: 4px;
}

.phys-price {
  color: var(--primary-color, #3b82f6);
  font-weight: 700;
}

.phys-text-danger {
  color: #dc2626;
  font-weight: 700;
}

/* ─── Out-of-stock card modifier ────────────────────────────────────────────── */

.phys-card--out-stock {
  opacity: 0.72;
  border-color: #fecaca !important;
}

/* ─── Table ─────────────────────────────────────────────────────────────────── */

.phys-table-wrap {
  border: 1px solid var(--border-color, #e5e7eb);
  border-radius: 10px;
  overflow-x: auto;
}

.phys-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
  color: var(--text-primary, #111827);
}

.phys-table thead tr {
  background: var(--table-header-bg, #f9fafb);
  border-bottom: 1px solid var(--border-color, #e5e7eb);
}

.phys-table th {
  padding: 10px 14px;
  text-align: left;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--text-secondary, #6b7280);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
}

.phys-table td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--border-color, #f3f4f6);
  vertical-align: middle;
}

.phys-table tbody tr:last-child td {
  border-bottom: none;
}

.phys-table tbody tr:hover td {
  background: var(--hover-bg, #f9fafb);
}

.phys-row-out-stock td {
  background: #fff7f7;
}

.phys-cell-name {
  font-weight: 600;
  color: var(--text-primary, #111827);
}

.phys-cell-brand {
  font-size: 0.78rem;
  color: var(--text-secondary, #6b7280);
  margin-top: 2px;
}

.phys-actions-cell {
  white-space: nowrap;
  display: flex;
  gap: 6px;
  align-items: center;
}

/* ─── Modals ────────────────────────────────────────────────────────────────── */

.phys-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.48);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 16px;
}

.phys-modal {
  background: var(--card-bg, #fff);
  border-radius: 12px;
  width: 100%;
  max-width: 600px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
  overflow: hidden;
}

.phys-modal--sm {
  max-width: 420px;
}

.phys-modal-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 18px 20px 14px;
  border-bottom: 1px solid var(--border-color, #e5e7eb);
}

.phys-modal-header h2 {
  font-size: 1.05rem;
  font-weight: 700;
  margin: 0;
  flex: 1;
  color: var(--text-primary, #111827);
}

.phys-modal-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: none;
  border-radius: 6px;
  background: transparent;
  cursor: pointer;
  color: var(--text-secondary, #6b7280);
  font-size: 18px;
  transition: background 0.12s;
}

.phys-modal-close:hover {
  background: var(--hover-bg, #f3f4f6);
}

.phys-modal-body {
  padding: 20px;
  overflow-y: auto;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.phys-modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 14px 20px;
  border-top: 1px solid var(--border-color, #e5e7eb);
}

/* ─── Modal form fields ──────────────────────────────────────────────────────── */

.phys-field-group {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.phys-field-group label {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-secondary, #374151);
}

.phys-input {
  padding: 8px 10px;
  border: 1px solid var(--border-color, #d1d5db);
  border-radius: 7px;
  font-size: 0.875rem;
  background: var(--input-bg, #fff);
  color: var(--text-primary, #111827);
  width: 100%;
  outline: none;
  transition: border-color 0.15s;
  box-sizing: border-box;
}

.phys-input:focus {
  border-color: var(--primary-color, #3b82f6);
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.15);
}

.phys-row-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.phys-row-3 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 12px;
}

/* ─── Modal buttons ─────────────────────────────────────────────────────────── */

.phys-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background 0.15s, opacity 0.15s;
}

.phys-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.phys-btn--primary {
  background: var(--primary-color, #3b82f6);
  color: #fff;
  border-color: var(--primary-color, #3b82f6);
}

.phys-btn--primary:hover:not(:disabled) {
  opacity: 0.88;
}

.phys-btn--secondary {
  background: transparent;
  color: var(--text-primary, #374151);
  border-color: var(--border-color, #d1d5db);
}

.phys-btn--secondary:hover:not(:disabled) {
  background: var(--hover-bg, #f3f4f6);
}

.phys-btn--danger {
  background: #dc2626;
  color: #fff;
  border-color: #dc2626;
}

.phys-btn--danger:hover:not(:disabled) {
  background: #b91c1c;
  border-color: #b91c1c;
}

/* ─── Delete confirm ────────────────────────────────────────────────────────── */

.phys-warning-icon {
  font-size: 22px;
  color: #d97706;
  flex-shrink: 0;
}

.phys-delete-text {
  padding: 0 20px 16px;
  font-size: 0.9rem;
  color: var(--text-secondary, #6b7280);
  line-height: 1.5;
  margin: 0;
}

/* ─── Secondary add button ──────────────────────────────────────────────────── */

.phys-add-btn--secondary {
  background: transparent;
  color: var(--text-primary, #111827);
  border: 1px solid var(--border-color, #d1d5db);
}

.phys-add-btn--secondary:hover {
  background: var(--hover-bg, #f3f4f6);
}

/* ─── CSV import panel ──────────────────────────────────────────────────────── */

.phys-csv-panel,
.phys-branch-panel {
  margin: 0 24px 16px;
  border: 1px solid var(--border-color, #e5e7eb);
  border-radius: 10px;
  background: var(--card-bg, #fff);
  overflow: hidden;
}

.phys-csv-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-color, #e5e7eb);
  background: var(--hover-bg, #f9fafb);
}

.phys-csv-panel-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--text-primary, #111827);
}

.phys-csv-body {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.phys-csv-hint {
  font-size: 0.85rem;
  color: var(--text-secondary, #6b7280);
  margin: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.phys-csv-template-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: none;
  border: 1px solid var(--border-color, #d1d5db);
  border-radius: 6px;
  padding: 3px 10px;
  font-size: 0.8rem;
  cursor: pointer;
  color: var(--text-primary, #111827);
  text-decoration: none;
}

.phys-csv-template-btn:hover {
  background: var(--hover-bg, #f3f4f6);
}

.phys-csv-drop {
  border: 2px dashed var(--border-color, #d1d5db);
  border-radius: 8px;
  padding: 28px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  font-size: 0.875rem;
  color: var(--text-secondary, #6b7280);
  transition: border-color 0.15s, background 0.15s;
  text-align: center;
}

.phys-csv-drop:hover,
.phys-csv-drop--active {
  border-color: var(--primary-color, #3b82f6);
  background: var(--hover-bg, #f0f9ff);
}

.phys-csv-drop-icon {
  font-size: 32px;
  color: var(--text-secondary, #9ca3af);
}

.phys-csv-progress {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 0.85rem;
  color: var(--text-secondary, #6b7280);
}

.phys-csv-progress-bar {
  height: 6px;
  background: var(--hover-bg, #e5e7eb);
  border-radius: 3px;
  overflow: hidden;
}

.phys-csv-progress-fill {
  height: 100%;
  background: var(--primary-color, #3b82f6);
  border-radius: 3px;
  transition: width 0.2s;
  width: var(--progress-width, 0%);
}

.phys-file-input {
  display: none;
}

.phys-csv-result {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 0.875rem;
}

.phys-csv-result-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.phys-csv-ok { color: #166534; }
.phys-csv-err { color: #dc2626; }

.phys-csv-result-errors {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.phys-csv-error-list {
  margin: 4px 0 0 20px;
  padding: 0;
  font-size: 0.8rem;
  color: var(--text-secondary, #6b7280);
  list-style: disc;
  max-height: 120px;
  overflow-y: auto;
}

/* ─── Branch panel ──────────────────────────────────────────────────────────── */

.phys-branch-body {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.phys-branch-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.phys-branch-empty {
  font-size: 0.875rem;
  color: var(--text-secondary, #9ca3af);
  margin: 0;
}

.phys-branch-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  border-radius: 8px;
  background: var(--hover-bg, #f9fafb);
  border: 1px solid var(--border-color, #e5e7eb);
}

.phys-branch-item-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.phys-branch-name {
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--text-primary, #111827);
}

.phys-branch-sub {
  font-size: 0.78rem;
  color: var(--text-secondary, #6b7280);
}

.phys-branch-add {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 12px;
  border-top: 1px solid var(--border-color, #e5e7eb);
}

.phys-branch-error {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.85rem;
  color: #dc2626;
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 6px;
  padding: 8px 12px;
  margin: 0;
}

/* Secure delete confirmation modal used inside branch panel */
.phys-secure-modal {
  max-width: 520px;
}

/* ─── Branch badge & stat chip ──────────────────────────────────────────────── */

.phys-badge-branch {
  background: #dbeafe;
  color: #1e40af;
  border: 1px solid #93c5fd;
}

.phys-stat-chip--branch {
  background: #dbeafe;
  border-color: #93c5fd;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
}

.phys-stat-chip--branch .phys-stat-value { color: #1d4ed8; }
.phys-stat-chip--branch .phys-stat-label { color: #1e40af; }

.phys-stat-chip--branch-active {
  background: #1d4ed8;
  border-color: #1d4ed8;
}

.phys-stat-chip--branch-active .phys-stat-value,
.phys-stat-chip--branch-active .phys-stat-label { color: #fff; }

/* ─── List view thumbnail ────────────────────────────────────────────────────── */

.phys-table-img-cell {
  width: 48px;
  padding: 6px !important;
}

.phys-table-thumb {
  width: 40px;
  height: 40px;
  object-fit: cover;
  border-radius: 6px;
}

.phys-table-thumb-placeholder {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--hover-bg, #f3f4f6);
  border-radius: 6px;
  color: var(--text-secondary, #9ca3af);
  font-size: 18px;
}

/* ─── Image section in modal ────────────────────────────────────────────────── */

.phys-image-section {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  margin-bottom: 16px;
  padding: 14px;
  border: 1px solid var(--border-color, #e5e7eb);
  border-radius: 10px;
  background: var(--hover-bg, #f9fafb);
}

.phys-image-preview-wrap {
  flex-shrink: 0;
  width: 100px;
  height: 100px;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--border-color, #e5e7eb);
  background: var(--card-bg, #fff);
}

.phys-image-preview {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.phys-image-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  color: var(--text-secondary, #9ca3af);
  font-size: 0.7rem;
}

.phys-image-placeholder svg {
  font-size: 28px;
}

.phys-image-controls {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.phys-image-label {
  margin: 0;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-primary, #111827);
}

.phys-image-hint {
  margin: 0;
  font-size: 0.75rem;
  color: var(--text-secondary, #6b7280);
}

.phys-gonher-row {
  display: flex;
  gap: 6px;
}

.phys-btn--sm {
  padding: 5px 10px;
  font-size: 0.8rem;
}

.phys-input--sm {
  padding: 5px 10px;
  font-size: 0.8rem;
}

/* ─── Responsive ─────────────────────────────────────────────────────────────── */

@media (max-width: 600px) {
  .phys-row-2,
  .phys-row-3 {
    grid-template-columns: 1fr;
  }

  .phys-filter-select {
    max-width: 100%;
    width: 100%;
  }

  .phys-stats-bar {
    gap: 6px;
    padding: 8px 16px;
  }

  .phys-stat-chip {
    padding: 4px 12px;
    min-width: 60px;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════════
   DARK THEMES
   ═══════════════════════════════════════════════════════════════════════════════ */

/* ── cyberpunk ─────────────────────────────────────────────────────────────── */

html[data-theme='cyberpunk'] .phys-stat-chip {
  background: #1a2a1a;
  border-color: #1a3a1a;
}
html[data-theme='cyberpunk'] .phys-stat-chip--ok {
  background: #0d2a15;
  border-color: #00ff41;
}
html[data-theme='cyberpunk'] .phys-stat-chip--warn {
  background: #2a2000;
  border-color: #d4ff00;
}
html[data-theme='cyberpunk'] .phys-stat-chip--danger {
  background: #2a0a0a;
  border-color: #ff4444;
}
html[data-theme='cyberpunk'] .phys-stat-value { color: #00ff41; }
html[data-theme='cyberpunk'] .phys-stat-chip--warn .phys-stat-value { color: #d4ff00; }
html[data-theme='cyberpunk'] .phys-stat-chip--danger .phys-stat-value { color: #ff4444; }
html[data-theme='cyberpunk'] .phys-stat-label { color: #4ade80; }

html[data-theme='cyberpunk'] .phys-add-btn {
  background: #00ff41;
  color: #000;
}

html[data-theme='cyberpunk'] .phys-icon-btn {
  border-color: #1a3a1a;
  color: #4ade80;
}
html[data-theme='cyberpunk'] .phys-icon-btn:hover {
  background: #1a2a1a;
  color: #00ff41;
}
html[data-theme='cyberpunk'] .phys-icon-btn--danger { color: #ff4444; border-color: #2a0a0a; }
html[data-theme='cyberpunk'] .phys-icon-btn--danger:hover { background: #2a0a0a; }

html[data-theme='cyberpunk'] .phys-label { color: #4ade80; }
html[data-theme='cyberpunk'] .phys-code {
  background: #0f1a0f;
  color: #00ff41;
}
html[data-theme='cyberpunk'] .phys-price { color: #00ff41; }
html[data-theme='cyberpunk'] .phys-text-danger { color: #ff4444; }

html[data-theme='cyberpunk'] .phys-table-wrap { border-color: #1a3a1a; }
html[data-theme='cyberpunk'] .phys-table thead tr { background: #0f1a0f; }
html[data-theme='cyberpunk'] .phys-table th { color: #4ade80; }
html[data-theme='cyberpunk'] .phys-table td { border-color: #1a3a1a; color: #d1fae5; }
html[data-theme='cyberpunk'] .phys-table tbody tr:hover td { background: #1a2a1a; }
html[data-theme='cyberpunk'] .phys-row-out-stock td { background: #1a0505; }

html[data-theme='cyberpunk'] .phys-modal { background: #0d150d; border: 1px solid #1a3a1a; }
html[data-theme='cyberpunk'] .phys-modal-header { border-bottom-color: #1a3a1a; }
html[data-theme='cyberpunk'] .phys-modal-header h2 { color: #00ff41; }
html[data-theme='cyberpunk'] .phys-modal-close { color: #4ade80; }
html[data-theme='cyberpunk'] .phys-modal-close:hover { background: #1a2a1a; }
html[data-theme='cyberpunk'] .phys-modal-footer { border-top-color: #1a3a1a; }
html[data-theme='cyberpunk'] .phys-field-group label { color: #4ade80; }
html[data-theme='cyberpunk'] .phys-input {
  background: #0f1a0f;
  border-color: #1a3a1a;
  color: #d1fae5;
}
html[data-theme='cyberpunk'] .phys-input:focus { border-color: #00ff41; }
html[data-theme='cyberpunk'] .phys-delete-text { color: #4ade80; }
html[data-theme='cyberpunk'] .phys-btn--secondary {
  color: #4ade80;
  border-color: #1a3a1a;
}
html[data-theme='cyberpunk'] .phys-btn--secondary:hover:not(:disabled) { background: #1a2a1a; }
html[data-theme='cyberpunk'] .phys-add-btn--secondary { background: transparent; color: #4ade80; border-color: #1a3a1a; }
html[data-theme='cyberpunk'] .phys-add-btn--secondary:hover { background: #1a2a1a; }
html[data-theme='cyberpunk'] .phys-csv-panel,
html[data-theme='cyberpunk'] .phys-branch-panel { background: #1a1d29; border-color: #00ff41; }
html[data-theme='cyberpunk'] .phys-csv-panel-header { background: #0f1117; border-bottom-color: #1a3a1a; }
html[data-theme='cyberpunk'] .phys-csv-panel-title { color: #00ff88; }
html[data-theme='cyberpunk'] .phys-csv-hint { color: #4ade80; }
html[data-theme='cyberpunk'] .phys-csv-template-btn { color: #00ff88; border-color: #1a3a1a; background: transparent; }
html[data-theme='cyberpunk'] .phys-csv-template-btn:hover { background: #1a2a1a; }
html[data-theme='cyberpunk'] .phys-csv-drop { border-color: #1a3a1a; color: #4ade80; }
html[data-theme='cyberpunk'] .phys-csv-drop:hover,
html[data-theme='cyberpunk'] .phys-csv-drop--active { border-color: #00ff88; background: #0f1a0f; }
html[data-theme='cyberpunk'] .phys-csv-drop-icon { color: #4ade80; }
html[data-theme='cyberpunk'] .phys-csv-progress-bar { background: #1a3a1a; }
html[data-theme='cyberpunk'] .phys-csv-progress-fill { background: #00ff88; }
html[data-theme='cyberpunk'] .phys-csv-ok { color: #00ff88; }
html[data-theme='cyberpunk'] .phys-branch-item { background: #0f1117; border-color: #1a3a1a; }
html[data-theme='cyberpunk'] .phys-branch-name { color: #00ff88; }
html[data-theme='cyberpunk'] .phys-branch-sub { color: #4ade80; }
html[data-theme='cyberpunk'] .phys-branch-add { border-top-color: #1a3a1a; }
html[data-theme='cyberpunk'] .phys-badge-branch { background: #0f1a0f; color: #00ff88; border-color: #1a3a1a; }
html[data-theme='cyberpunk'] .phys-stat-chip--branch { background: #0f1a0f; border-color: #00ff41; }
html[data-theme='cyberpunk'] .phys-stat-chip--branch .phys-stat-value { color: #00ff88; }
html[data-theme='cyberpunk'] .phys-stat-chip--branch .phys-stat-label { color: #4ade80; }
html[data-theme='cyberpunk'] .phys-stat-chip--branch-active { background: #00ff41; border-color: #00ff41; }
html[data-theme='cyberpunk'] .phys-stat-chip--branch-active .phys-stat-value,
html[data-theme='cyberpunk'] .phys-stat-chip--branch-active .phys-stat-label { color: #000; }
html[data-theme='cyberpunk'] .phys-table-thumb-placeholder { background: #0f1117; color: #4ade80; }
html[data-theme='cyberpunk'] .phys-image-section { background: #0f1117; border-color: #1a3a1a; }
html[data-theme='cyberpunk'] .phys-image-preview-wrap { background: #1a1d29; border-color: #1a3a1a; }
html[data-theme='cyberpunk'] .phys-image-placeholder { color: #4ade80; }
html[data-theme='cyberpunk'] .phys-image-label { color: #00ff88; }
html[data-theme='cyberpunk'] .phys-image-hint { color: #4ade80; }
html[data-theme='cyberpunk'] .phys-gonher-row .phys-input--sm { background: #1a1d29; border-color: #1a3a1a; color: #00ff88; }

/* ── jarvis ────────────────────────────────────────────────────────────────── */

html[data-theme='jarvis'] .phys-stat-chip {
  background: #0a1628;
  border-color: #1a3050;
}
html[data-theme='jarvis'] .phys-stat-chip--ok {
  background: #0a1e16;
  border-color: #00c896;
}
html[data-theme='jarvis'] .phys-stat-chip--warn {
  background: #1e1a00;
  border-color: #f59e0b;
}
html[data-theme='jarvis'] .phys-stat-chip--danger {
  background: #1e0a0a;
  border-color: #ef4444;
}
html[data-theme='jarvis'] .phys-stat-value { color: #60b4ff; }
html[data-theme='jarvis'] .phys-stat-chip--ok .phys-stat-value { color: #00c896; }
html[data-theme='jarvis'] .phys-stat-chip--warn .phys-stat-value { color: #f59e0b; }
html[data-theme='jarvis'] .phys-stat-chip--danger .phys-stat-value { color: #ef4444; }
html[data-theme='jarvis'] .phys-stat-label { color: #4a86c0; }

html[data-theme='jarvis'] .phys-add-btn { background: #60b4ff; color: #000; }

html[data-theme='jarvis'] .phys-icon-btn { border-color: #1a3050; color: #4a86c0; }
html[data-theme='jarvis'] .phys-icon-btn:hover { background: #0a1628; color: #60b4ff; }
html[data-theme='jarvis'] .phys-icon-btn--danger { color: #ef4444; border-color: #1e0a0a; }
html[data-theme='jarvis'] .phys-icon-btn--danger:hover { background: #1e0a0a; }

html[data-theme='jarvis'] .phys-label { color: #4a86c0; }
html[data-theme='jarvis'] .phys-code { background: #060d1c; color: #60b4ff; }
html[data-theme='jarvis'] .phys-price { color: #60b4ff; }
html[data-theme='jarvis'] .phys-text-danger { color: #ef4444; }

html[data-theme='jarvis'] .phys-table-wrap { border-color: #1a3050; }
html[data-theme='jarvis'] .phys-table thead tr { background: #060d1c; }
html[data-theme='jarvis'] .phys-table th { color: #4a86c0; }
html[data-theme='jarvis'] .phys-table td { border-color: #1a3050; color: #a8d4ff; }
html[data-theme='jarvis'] .phys-table tbody tr:hover td { background: #0a1628; }
html[data-theme='jarvis'] .phys-row-out-stock td { background: #160606; }

html[data-theme='jarvis'] .phys-modal { background: #060d1c; border: 1px solid #1a3050; }
html[data-theme='jarvis'] .phys-modal-header { border-bottom-color: #1a3050; }
html[data-theme='jarvis'] .phys-modal-header h2 { color: #60b4ff; }
html[data-theme='jarvis'] .phys-modal-close { color: #4a86c0; }
html[data-theme='jarvis'] .phys-modal-close:hover { background: #0a1628; }
html[data-theme='jarvis'] .phys-modal-footer { border-top-color: #1a3050; }
html[data-theme='jarvis'] .phys-field-group label { color: #4a86c0; }
html[data-theme='jarvis'] .phys-input { background: #060d1c; border-color: #1a3050; color: #a8d4ff; }
html[data-theme='jarvis'] .phys-input:focus { border-color: #60b4ff; }
html[data-theme='jarvis'] .phys-delete-text { color: #4a86c0; }
html[data-theme='jarvis'] .phys-btn--secondary { color: #4a86c0; border-color: #1a3050; }
html[data-theme='jarvis'] .phys-btn--secondary:hover:not(:disabled) { background: #0a1628; }
html[data-theme='jarvis'] .phys-add-btn--secondary { background: transparent; color: #4a86c0; border-color: #1a3050; }
html[data-theme='jarvis'] .phys-add-btn--secondary:hover { background: #0a1628; }
html[data-theme='jarvis'] .phys-csv-panel,
html[data-theme='jarvis'] .phys-branch-panel { background: #0d1117; border-color: #1e3a5f; }
html[data-theme='jarvis'] .phys-csv-panel-header { background: #060d1c; border-bottom-color: #1a3050; }
html[data-theme='jarvis'] .phys-csv-panel-title { color: #60b4ff; }
html[data-theme='jarvis'] .phys-csv-hint { color: #4a86c0; }
html[data-theme='jarvis'] .phys-csv-template-btn { color: #60b4ff; border-color: #1a3050; background: transparent; }
html[data-theme='jarvis'] .phys-csv-template-btn:hover { background: #0a1628; }
html[data-theme='jarvis'] .phys-csv-drop { border-color: #1a3050; color: #4a86c0; }
html[data-theme='jarvis'] .phys-csv-drop:hover,
html[data-theme='jarvis'] .phys-csv-drop--active { border-color: #60b4ff; background: #060d1c; }
html[data-theme='jarvis'] .phys-csv-drop-icon { color: #4a86c0; }
html[data-theme='jarvis'] .phys-csv-progress-bar { background: #1a3050; }
html[data-theme='jarvis'] .phys-csv-progress-fill { background: #60b4ff; }
html[data-theme='jarvis'] .phys-csv-ok { color: #60b4ff; }
html[data-theme='jarvis'] .phys-branch-item { background: #060d1c; border-color: #1a3050; }
html[data-theme='jarvis'] .phys-branch-name { color: #60b4ff; }
html[data-theme='jarvis'] .phys-branch-sub { color: #4a86c0; }
html[data-theme='jarvis'] .phys-branch-add { border-top-color: #1a3050; }
html[data-theme='jarvis'] .phys-badge-branch { background: #060d1c; color: #60b4ff; border-color: #1a3050; }
html[data-theme='jarvis'] .phys-stat-chip--branch { background: #060d1c; border-color: #1e3a5f; }
html[data-theme='jarvis'] .phys-stat-chip--branch .phys-stat-value { color: #60b4ff; }
html[data-theme='jarvis'] .phys-stat-chip--branch .phys-stat-label { color: #4a86c0; }
html[data-theme='jarvis'] .phys-stat-chip--branch-active { background: #1e3a5f; border-color: #60b4ff; }
html[data-theme='jarvis'] .phys-stat-chip--branch-active .phys-stat-value,
html[data-theme='jarvis'] .phys-stat-chip--branch-active .phys-stat-label { color: #e0e0e0; }
html[data-theme='jarvis'] .phys-table-thumb-placeholder { background: #060d1c; color: #4a86c0; }
html[data-theme='jarvis'] .phys-image-section { background: #060d1c; border-color: #1a3050; }
html[data-theme='jarvis'] .phys-image-preview-wrap { background: #0d1117; border-color: #1a3050; }
html[data-theme='jarvis'] .phys-image-placeholder { color: #4a86c0; }
html[data-theme='jarvis'] .phys-image-label { color: #60b4ff; }
html[data-theme='jarvis'] .phys-image-hint { color: #4a86c0; }

/* ── rock ──────────────────────────────────────────────────────────────────── */

html[data-theme='rock'] .phys-stat-chip { background: #1a0a0a; border-color: #3a1010; }
html[data-theme='rock'] .phys-stat-chip--ok { background: #0a1a0a; border-color: #22c55e; }
html[data-theme='rock'] .phys-stat-chip--warn { background: #1a1200; border-color: #f59e0b; }
html[data-theme='rock'] .phys-stat-chip--danger { background: #200505; border-color: #ef4444; }
html[data-theme='rock'] .phys-stat-value { color: #ff4a4a; }
html[data-theme='rock'] .phys-stat-chip--ok .phys-stat-value { color: #22c55e; }
html[data-theme='rock'] .phys-stat-chip--warn .phys-stat-value { color: #f59e0b; }
html[data-theme='rock'] .phys-stat-chip--danger .phys-stat-value { color: #ef4444; }
html[data-theme='rock'] .phys-stat-label { color: #a06060; }

html[data-theme='rock'] .phys-filter-select:focus { border-color: #ff4444; }
html[data-theme='rock'] .phys-add-btn { background: #dc2626; }
html[data-theme='rock'] .phys-icon-btn { border-color: #3a1010; color: #a06060; }
html[data-theme='rock'] .phys-icon-btn:hover { background: #1a0a0a; color: #ff4a4a; }
html[data-theme='rock'] .phys-icon-btn--danger { color: #ef4444; border-color: #200505; }
html[data-theme='rock'] .phys-icon-btn--danger:hover { background: #200505; }
html[data-theme='rock'] .phys-label { color: #a06060; }
html[data-theme='rock'] .phys-code { background: #0d0505; color: #ff4a4a; }
html[data-theme='rock'] .phys-price { color: #ff4a4a; }
html[data-theme='rock'] .phys-text-danger { color: #ef4444; }
html[data-theme='rock'] .phys-table-wrap { border-color: #3a1010; }
html[data-theme='rock'] .phys-table thead tr { background: #0d0505; }
html[data-theme='rock'] .phys-table th { color: #a06060; }
html[data-theme='rock'] .phys-table td { border-color: #3a1010; color: #e8c0c0; }
html[data-theme='rock'] .phys-table tbody tr:hover td { background: #1a0a0a; }
html[data-theme='rock'] .phys-row-out-stock td { background: #1a0505; }
html[data-theme='rock'] .phys-modal { background: #0d0505; border: 1px solid #3a1010; }
html[data-theme='rock'] .phys-modal-header { border-bottom-color: #3a1010; }
html[data-theme='rock'] .phys-modal-header h2 { color: #ff4a4a; }
html[data-theme='rock'] .phys-modal-close { color: #a06060; }
html[data-theme='rock'] .phys-modal-close:hover { background: #1a0a0a; }
html[data-theme='rock'] .phys-modal-footer { border-top-color: #3a1010; }
html[data-theme='rock'] .phys-field-group label { color: #a06060; }
html[data-theme='rock'] .phys-input { background: #0d0505; border-color: #3a1010; color: #e8c0c0; }
html[data-theme='rock'] .phys-input:focus { border-color: #ff4a4a; }
html[data-theme='rock'] .phys-delete-text { color: #a06060; }
html[data-theme='rock'] .phys-btn--secondary { color: #a06060; border-color: #3a1010; }
html[data-theme='rock'] .phys-btn--secondary:hover:not(:disabled) { background: #1a0a0a; }
html[data-theme='rock'] .phys-add-btn--secondary { background: transparent; color: #e0d0d0; border-color: #3a1010; }
html[data-theme='rock'] .phys-add-btn--secondary:hover { background: #1a0a0a; }
html[data-theme='rock'] .phys-csv-panel,
html[data-theme='rock'] .phys-branch-panel { background: #1a0000; border-color: #ff4444; }
html[data-theme='rock'] .phys-csv-panel-header { background: #0d0505; border-bottom-color: #3a1010; }
html[data-theme='rock'] .phys-csv-panel-title { color: #ff4a4a; }
html[data-theme='rock'] .phys-csv-hint { color: #a06060; }
html[data-theme='rock'] .phys-csv-template-btn { color: #ff4a4a; border-color: #3a1010; background: transparent; }
html[data-theme='rock'] .phys-csv-template-btn:hover { background: #1a0a0a; }
html[data-theme='rock'] .phys-csv-drop { border-color: #3a1010; color: #a06060; }
html[data-theme='rock'] .phys-csv-drop:hover,
html[data-theme='rock'] .phys-csv-drop--active { border-color: #ff4444; background: #1a0505; }
html[data-theme='rock'] .phys-csv-drop-icon { color: #a06060; }
html[data-theme='rock'] .phys-csv-progress-bar { background: #3a1010; }
html[data-theme='rock'] .phys-csv-progress-fill { background: #ff4444; }
html[data-theme='rock'] .phys-csv-ok { color: #ff4444; }
html[data-theme='rock'] .phys-branch-item { background: #0d0505; border-color: #3a1010; }
html[data-theme='rock'] .phys-branch-name { color: #ff4a4a; }
html[data-theme='rock'] .phys-branch-sub { color: #a06060; }
html[data-theme='rock'] .phys-branch-add { border-top-color: #3a1010; }
html[data-theme='rock'] .phys-badge-branch { background: #1a0a0a; color: #ff4a4a; border-color: #3a1010; }
html[data-theme='rock'] .phys-stat-chip--branch { background: #1a0a0a; border-color: #ff4444; }
html[data-theme='rock'] .phys-stat-chip--branch .phys-stat-value { color: #ff4a4a; }
html[data-theme='rock'] .phys-stat-chip--branch .phys-stat-label { color: #a06060; }
html[data-theme='rock'] .phys-stat-chip--branch-active { background: #dc2626; border-color: #dc2626; }
html[data-theme='rock'] .phys-stat-chip--branch-active .phys-stat-value,
html[data-theme='rock'] .phys-stat-chip--branch-active .phys-stat-label { color: #fff; }
html[data-theme='rock'] .phys-table-thumb-placeholder { background: #0d0505; color: #a06060; }
html[data-theme='rock'] .phys-image-section { background: #0d0505; border-color: #3a1010; }
html[data-theme='rock'] .phys-image-preview-wrap { background: #1a0000; border-color: #3a1010; }
html[data-theme='rock'] .phys-image-placeholder { color: #a06060; }
html[data-theme='rock'] .phys-image-label { color: #ff4a4a; }
html[data-theme='rock'] .phys-image-hint { color: #a06060; }

/* ── golden ────────────────────────────────────────────────────────────────── */

html[data-theme='golden'] .phys-stat-chip { background: #1a1500; border-color: #3a2e00; }
html[data-theme='golden'] .phys-stat-chip--ok { background: #0a1a10; border-color: #22c55e; }
html[data-theme='golden'] .phys-stat-chip--warn { background: #1a1000; border-color: #f59e0b; }
html[data-theme='golden'] .phys-stat-chip--danger { background: #1a0808; border-color: #ef4444; }
html[data-theme='golden'] .phys-stat-value { color: #fbbf24; }
html[data-theme='golden'] .phys-stat-chip--ok .phys-stat-value { color: #22c55e; }
html[data-theme='golden'] .phys-stat-chip--warn .phys-stat-value { color: #f59e0b; }
html[data-theme='golden'] .phys-stat-chip--danger .phys-stat-value { color: #ef4444; }
html[data-theme='golden'] .phys-stat-label { color: #a08020; }

html[data-theme='golden'] .phys-filter-select:focus { border-color: #f5c842; }
html[data-theme='golden'] .phys-add-btn { background: #fbbf24; color: #000; }
html[data-theme='golden'] .phys-icon-btn { border-color: #3a2e00; color: #a08020; }
html[data-theme='golden'] .phys-icon-btn:hover { background: #1a1500; color: #fbbf24; }
html[data-theme='golden'] .phys-icon-btn--danger { color: #ef4444; border-color: #1a0808; }
html[data-theme='golden'] .phys-icon-btn--danger:hover { background: #1a0808; }
html[data-theme='golden'] .phys-label { color: #a08020; }
html[data-theme='golden'] .phys-code { background: #0d0e00; color: #fbbf24; }
html[data-theme='golden'] .phys-price { color: #fbbf24; }
html[data-theme='golden'] .phys-text-danger { color: #ef4444; }
html[data-theme='golden'] .phys-table-wrap { border-color: #3a2e00; }
html[data-theme='golden'] .phys-table thead tr { background: #0d0e00; }
html[data-theme='golden'] .phys-table th { color: #a08020; }
html[data-theme='golden'] .phys-table td { border-color: #3a2e00; color: #f5e090; }
html[data-theme='golden'] .phys-table tbody tr:hover td { background: #1a1500; }
html[data-theme='golden'] .phys-row-out-stock td { background: #150505; }
html[data-theme='golden'] .phys-modal { background: #0d0e00; border: 1px solid #3a2e00; }
html[data-theme='golden'] .phys-modal-header { border-bottom-color: #3a2e00; }
html[data-theme='golden'] .phys-modal-header h2 { color: #fbbf24; }
html[data-theme='golden'] .phys-modal-close { color: #a08020; }
html[data-theme='golden'] .phys-modal-close:hover { background: #1a1500; }
html[data-theme='golden'] .phys-modal-footer { border-top-color: #3a2e00; }
html[data-theme='golden'] .phys-field-group label { color: #a08020; }
html[data-theme='golden'] .phys-input { background: #0d0e00; border-color: #3a2e00; color: #f5e090; }
html[data-theme='golden'] .phys-input:focus { border-color: #fbbf24; }
html[data-theme='golden'] .phys-delete-text { color: #a08020; }
html[data-theme='golden'] .phys-btn--secondary { color: #a08020; border-color: #3a2e00; }
html[data-theme='golden'] .phys-btn--secondary:hover:not(:disabled) { background: #1a1500; }
html[data-theme='golden'] .phys-add-btn--secondary { background: transparent; color: #f0e0c0; border-color: #3a2e00; }
html[data-theme='golden'] .phys-add-btn--secondary:hover { background: #1a1500; }
html[data-theme='golden'] .phys-csv-panel,
html[data-theme='golden'] .phys-branch-panel { background: #1a1c2e; border-color: #f5c842; }
html[data-theme='golden'] .phys-csv-panel-header { background: #0d0e00; border-bottom-color: #3a2e00; }
html[data-theme='golden'] .phys-csv-panel-title { color: #fbbf24; }
html[data-theme='golden'] .phys-csv-hint { color: #a08020; }
html[data-theme='golden'] .phys-csv-template-btn { color: #fbbf24; border-color: #3a2e00; background: transparent; }
html[data-theme='golden'] .phys-csv-template-btn:hover { background: #1a1500; }
html[data-theme='golden'] .phys-csv-drop { border-color: #3a2e00; color: #a08020; }
html[data-theme='golden'] .phys-csv-drop:hover,
html[data-theme='golden'] .phys-csv-drop--active { border-color: #f5c842; background: #1a1500; }
html[data-theme='golden'] .phys-csv-drop-icon { color: #a08020; }
html[data-theme='golden'] .phys-csv-progress-bar { background: #3a2e00; }
html[data-theme='golden'] .phys-csv-progress-fill { background: #fbbf24; }
html[data-theme='golden'] .phys-csv-ok { color: #fbbf24; }
html[data-theme='golden'] .phys-branch-item { background: #0d0e00; border-color: #3a2e00; }
html[data-theme='golden'] .phys-branch-name { color: #fbbf24; }
html[data-theme='golden'] .phys-branch-sub { color: #a08020; }
html[data-theme='golden'] .phys-branch-add { border-top-color: #3a2e00; }
html[data-theme='golden'] .phys-badge-branch { background: #1a1500; color: #fbbf24; border-color: #3a2e00; }
html[data-theme='golden'] .phys-stat-chip--branch { background: #1a1500; border-color: #f5c842; }
html[data-theme='golden'] .phys-stat-chip--branch .phys-stat-value { color: #fbbf24; }
html[data-theme='golden'] .phys-stat-chip--branch .phys-stat-label { color: #a08020; }
html[data-theme='golden'] .phys-stat-chip--branch-active { background: #f5c842; border-color: #f5c842; }
html[data-theme='golden'] .phys-stat-chip--branch-active .phys-stat-value,
html[data-theme='golden'] .phys-stat-chip--branch-active .phys-stat-label { color: #000; }
html[data-theme='golden'] .phys-table-thumb-placeholder { background: #0d0e00; color: #a08020; }
html[data-theme='golden'] .phys-image-section { background: #0d0e00; border-color: #3a2e00; }
html[data-theme='golden'] .phys-image-preview-wrap { background: #1a1c2e; border-color: #3a2e00; }
html[data-theme='golden'] .phys-image-placeholder { color: #a08020; }
html[data-theme='golden'] .phys-image-label { color: #fbbf24; }
html[data-theme='golden'] .phys-image-hint { color: #a08020; }

/* ═══════════════════════════════════════════════════════════════════════════════
   LIGHT THEMES
   ═══════════════════════════════════════════════════════════════════════════════ */

/* ── parchment ─────────────────────────────────────────────────────────────── */

html[data-theme='parchment'] .phys-stat-chip { background: #f5f0e4; border-color: #d4c49a; }
html[data-theme='parchment'] .phys-stat-chip--ok { background: #d6f0e0; border-color: #86c99a; }
html[data-theme='parchment'] .phys-stat-chip--warn { background: #fef5d4; border-color: #d4a849; }
html[data-theme='parchment'] .phys-stat-chip--danger { background: #fde8e4; border-color: #c96a5a; }
html[data-theme='parchment'] .phys-stat-value { color: #5c4012; }
html[data-theme='parchment'] .phys-stat-chip--ok .phys-stat-value { color: #166534; }
html[data-theme='parchment'] .phys-stat-chip--warn .phys-stat-value { color: #7c5f00; }
html[data-theme='parchment'] .phys-stat-chip--danger .phys-stat-value { color: #9b1c1c; }
html[data-theme='parchment'] .phys-stat-label { color: #7a6020; }

html[data-theme='parchment'] .phys-add-btn { background: #8b6914; }
html[data-theme='parchment'] .phys-icon-btn { border-color: #d4c49a; color: #7a6020; }
html[data-theme='parchment'] .phys-icon-btn:hover { background: #f5f0e4; color: #5c4012; }
html[data-theme='parchment'] .phys-label { color: #7a6020; }
html[data-theme='parchment'] .phys-code { background: #f5f0e4; color: #5c4012; }
html[data-theme='parchment'] .phys-price { color: #7c4000; }
html[data-theme='parchment'] .phys-table-wrap { border-color: #d4c49a; }
html[data-theme='parchment'] .phys-table thead tr { background: #f5f0e4; }
html[data-theme='parchment'] .phys-table th { color: #7a6020; }
html[data-theme='parchment'] .phys-table td { border-color: #ede5cc; color: #3d2c08; }
html[data-theme='parchment'] .phys-table tbody tr:hover td { background: #f5f0e4; }
html[data-theme='parchment'] .phys-row-out-stock td { background: #fde8e4; }
html[data-theme='parchment'] .phys-modal { background: #fdf8ee; border: 1px solid #d4c49a; }
html[data-theme='parchment'] .phys-modal-header { border-bottom-color: #d4c49a; }
html[data-theme='parchment'] .phys-modal-header h2 { color: #3d2c08; }
html[data-theme='parchment'] .phys-modal-footer { border-top-color: #d4c49a; }
html[data-theme='parchment'] .phys-field-group label { color: #7a6020; }
html[data-theme='parchment'] .phys-input { background: #fff8ee; border-color: #d4c49a; color: #3d2c08; }
html[data-theme='parchment'] .phys-btn--secondary { color: #5c4012; border-color: #d4c49a; }
html[data-theme='parchment'] .phys-btn--secondary:hover:not(:disabled) { background: #f5f0e4; }
html[data-theme='parchment'] .phys-delete-text { color: #7a6020; }
html[data-theme='parchment'] .phys-add-btn--secondary { background: transparent; color: #5c4012; border-color: #d4c49a; }
html[data-theme='parchment'] .phys-add-btn--secondary:hover { background: #f5f0e4; }
html[data-theme='parchment'] .phys-csv-panel,
html[data-theme='parchment'] .phys-branch-panel { background: #fffdf5; border-color: #d4c49a; }
html[data-theme='parchment'] .phys-csv-panel-header { background: #f5f0e4; border-bottom-color: #d4c49a; }
html[data-theme='parchment'] .phys-csv-panel-title { color: #5c4012; }
html[data-theme='parchment'] .phys-csv-drop { border-color: #d4c49a; }
html[data-theme='parchment'] .phys-csv-drop:hover,
html[data-theme='parchment'] .phys-csv-drop--active { border-color: #8b6914; background: #fdf8ee; }
html[data-theme='parchment'] .phys-branch-item { background: #f5f0e4; border-color: #d4c49a; }
html[data-theme='parchment'] .phys-branch-name { color: #5c4012; }
html[data-theme='parchment'] .phys-branch-add { border-top-color: #d4c49a; }
html[data-theme='parchment'] .phys-badge-branch { background: #e8f4e8; color: #1a4a1a; border-color: #a0c8a0; }
html[data-theme='parchment'] .phys-stat-chip--branch { background: #e8f4e8; border-color: #a0c8a0; }
html[data-theme='parchment'] .phys-stat-chip--branch .phys-stat-value { color: #1a4a1a; }
html[data-theme='parchment'] .phys-stat-chip--branch .phys-stat-label { color: #3a6a3a; }
html[data-theme='parchment'] .phys-image-section { background: #f5f0e4; border-color: #d4c49a; }
html[data-theme='parchment'] .phys-image-preview-wrap { background: #fdf8ee; border-color: #d4c49a; }

/* ── pop ───────────────────────────────────────────────────────────────────── */

html[data-theme='pop'] .phys-stat-chip { background: #faf0fa; border-color: #e0b0f0; }
html[data-theme='pop'] .phys-stat-chip--ok { background: #e6f9ee; border-color: #86efac; }
html[data-theme='pop'] .phys-stat-chip--warn { background: #fffbea; border-color: #fde68a; }
html[data-theme='pop'] .phys-stat-chip--danger { background: #fef2f2; border-color: #fca5a5; }
html[data-theme='pop'] .phys-stat-value { color: #7c3aed; }
html[data-theme='pop'] .phys-stat-chip--ok .phys-stat-value { color: #166534; }
html[data-theme='pop'] .phys-stat-chip--warn .phys-stat-value { color: #b45309; }
html[data-theme='pop'] .phys-stat-chip--danger .phys-stat-value { color: #dc2626; }
html[data-theme='pop'] .phys-stat-label { color: #a855f7; }

html[data-theme='pop'] .phys-add-btn { background: #7c3aed; }
html[data-theme='pop'] .phys-icon-btn { border-color: #e0b0f0; color: #a855f7; }
html[data-theme='pop'] .phys-icon-btn:hover { background: #faf0fa; color: #7c3aed; }
html[data-theme='pop'] .phys-label { color: #a855f7; }
html[data-theme='pop'] .phys-code { background: #faf0fa; color: #7c3aed; }
html[data-theme='pop'] .phys-price { color: #7c3aed; }
html[data-theme='pop'] .phys-table-wrap { border-color: #e0b0f0; }
html[data-theme='pop'] .phys-table thead tr { background: #faf0fa; }
html[data-theme='pop'] .phys-table th { color: #a855f7; }
html[data-theme='pop'] .phys-table td { border-color: #f3e8ff; color: #1f2937; }
html[data-theme='pop'] .phys-table tbody tr:hover td { background: #faf0fa; }
html[data-theme='pop'] .phys-row-out-stock td { background: #fef2f2; }
html[data-theme='pop'] .phys-modal { background: #fff; border: 1px solid #e0b0f0; }
html[data-theme='pop'] .phys-modal-header { border-bottom-color: #e0b0f0; }
html[data-theme='pop'] .phys-modal-header h2 { color: #7c3aed; }
html[data-theme='pop'] .phys-modal-footer { border-top-color: #e0b0f0; }
html[data-theme='pop'] .phys-field-group label { color: #a855f7; }
html[data-theme='pop'] .phys-input { background: #fff; border-color: #e0b0f0; color: #1f2937; }
html[data-theme='pop'] .phys-input:focus { border-color: #7c3aed; }
html[data-theme='pop'] .phys-btn--secondary { color: #7c3aed; border-color: #e0b0f0; }
html[data-theme='pop'] .phys-btn--secondary:hover:not(:disabled) { background: #faf0fa; }
html[data-theme='pop'] .phys-delete-text { color: #a855f7; }
html[data-theme='pop'] .phys-add-btn--secondary { background: transparent; color: #7c3aed; border-color: #e0b0f0; }
html[data-theme='pop'] .phys-add-btn--secondary:hover { background: #faf0fa; }
html[data-theme='pop'] .phys-csv-panel,
html[data-theme='pop'] .phys-branch-panel { background: #fff; border-color: #e0b0f0; }
html[data-theme='pop'] .phys-csv-panel-header { background: #faf0fa; border-bottom-color: #e0b0f0; }
html[data-theme='pop'] .phys-csv-panel-title { color: #7c3aed; }
html[data-theme='pop'] .phys-csv-drop { border-color: #e0b0f0; }
html[data-theme='pop'] .phys-csv-drop:hover,
html[data-theme='pop'] .phys-csv-drop--active { border-color: #7c3aed; background: #faf0fa; }
html[data-theme='pop'] .phys-branch-item { background: #faf0fa; border-color: #e0b0f0; }
html[data-theme='pop'] .phys-branch-name { color: #7c3aed; }
html[data-theme='pop'] .phys-branch-add { border-top-color: #e0b0f0; }
html[data-theme='pop'] .phys-badge-branch { background: #ede9fe; color: #4c1d95; border-color: #c4b5fd; }
html[data-theme='pop'] .phys-stat-chip--branch { background: #ede9fe; border-color: #c4b5fd; }
html[data-theme='pop'] .phys-stat-chip--branch .phys-stat-value { color: #4c1d95; }
html[data-theme='pop'] .phys-stat-chip--branch .phys-stat-label { color: #7c3aed; }
html[data-theme='pop'] .phys-image-section { background: #faf0fa; border-color: #e0b0f0; }
html[data-theme='pop'] .phys-image-preview-wrap { background: #fff; border-color: #e0b0f0; }

/* ── allwhite ──────────────────────────────────────────────────────────────── */

html[data-theme='allwhite'] .phys-stat-chip { background: #f9fafb; border-color: #e5e7eb; }
html[data-theme='allwhite'] .phys-stat-chip--ok { background: #dcfce7; border-color: #bbf7d0; }
html[data-theme='allwhite'] .phys-stat-chip--warn { background: #fef9c3; border-color: #fde047; }
html[data-theme='allwhite'] .phys-stat-chip--danger { background: #fee2e2; border-color: #fecaca; }
html[data-theme='allwhite'] .phys-table tbody tr:hover td { background: #f9fafb; }
html[data-theme='allwhite'] .phys-row-out-stock td { background: #fff5f5; }
html[data-theme='allwhite'] .phys-modal { background: #fff; border: 1px solid #e5e7eb; }
html[data-theme='allwhite'] .phys-input { background: #fff; border-color: #d1d5db; color: #111827; }
html[data-theme='allwhite'] .phys-add-btn--secondary { background: transparent; color: #374151; border-color: #e5e7eb; }
html[data-theme='allwhite'] .phys-add-btn--secondary:hover { background: #f9fafb; }
html[data-theme='allwhite'] .phys-csv-panel,
html[data-theme='allwhite'] .phys-branch-panel { background: #fff; border-color: #e5e7eb; }
html[data-theme='allwhite'] .phys-csv-panel-header { background: #f9fafb; border-bottom-color: #e5e7eb; }
html[data-theme='allwhite'] .phys-csv-drop { border-color: #e5e7eb; }
html[data-theme='allwhite'] .phys-csv-drop:hover,
html[data-theme='allwhite'] .phys-csv-drop--active { border-color: #374151; background: #f9fafb; }
html[data-theme='allwhite'] .phys-branch-item { background: #f9fafb; border-color: #e5e7eb; }
html[data-theme='allwhite'] .phys-branch-add { border-top-color: #e5e7eb; }
html[data-theme='allwhite'] .phys-badge-branch { background: #eff6ff; color: #1e40af; border-color: #bfdbfe; }
html[data-theme='allwhite'] .phys-stat-chip--branch { background: #eff6ff; border-color: #bfdbfe; }
html[data-theme='allwhite'] .phys-stat-chip--branch .phys-stat-value { color: #1e40af; }
html[data-theme='allwhite'] .phys-stat-chip--branch .phys-stat-label { color: #3b82f6; }
html[data-theme='allwhite'] .phys-image-section { background: #f9fafb; border-color: #e5e7eb; }
html[data-theme='allwhite'] .phys-image-preview-wrap { background: #fff; border-color: #e5e7eb; }

/* ─── Theme: starwars ──────────────────────────────────────────────────────── */

html[data-theme='starwars'] .phys-stat-chip { background: #060e1c; border-color: rgba(255, 232, 31, 0.2); }
html[data-theme='starwars'] .phys-stat-chip--ok { background: #061a0e; border-color: rgba(76, 175, 80, 0.4); }
html[data-theme='starwars'] .phys-stat-chip--warn { background: #1a1500; border-color: rgba(255, 232, 31, 0.5); }
html[data-theme='starwars'] .phys-stat-chip--danger { background: #1a0606; border-color: rgba(229, 57, 53, 0.4); }
html[data-theme='starwars'] .phys-stat-value { color: #FFE81F; }
html[data-theme='starwars'] .phys-stat-chip--ok .phys-stat-value { color: #4caf50; }
html[data-theme='starwars'] .phys-stat-chip--warn .phys-stat-value { color: #FFE81F; }
html[data-theme='starwars'] .phys-stat-chip--danger .phys-stat-value { color: #e57373; }
html[data-theme='starwars'] .phys-stat-label { color: #8db4cc; }

html[data-theme='starwars'] .phys-add-btn { background: #FFE81F; color: #000510; }

html[data-theme='starwars'] .phys-icon-btn { border-color: rgba(255, 232, 31, 0.2); color: #8db4cc; }
html[data-theme='starwars'] .phys-icon-btn:hover { background: #0a1a30; color: #e8e6d0; }
html[data-theme='starwars'] .phys-icon-btn--danger { color: #e57373; border-color: rgba(229, 57, 53, 0.3); }
html[data-theme='starwars'] .phys-icon-btn--danger:hover { background: rgba(229, 57, 53, 0.1); color: #ef9a9a; }

html[data-theme='starwars'] .phys-label { color: #8db4cc; }
html[data-theme='starwars'] .phys-code { background: #030a15; color: #4fc3f7; }
html[data-theme='starwars'] .phys-price { color: #FFE81F; }
html[data-theme='starwars'] .phys-text-danger { color: #e57373; }

html[data-theme='starwars'] .phys-modal { background: #060e1c; border: 1px solid rgba(255, 232, 31, 0.2); }
html[data-theme='starwars'] .phys-modal-header { border-bottom-color: rgba(255, 232, 31, 0.2); }
html[data-theme='starwars'] .phys-modal-header h2 { color: #FFE81F; }
html[data-theme='starwars'] .phys-modal-close { color: #8db4cc; }
html[data-theme='starwars'] .phys-modal-close:hover { background: #0a1a30; }
html[data-theme='starwars'] .phys-modal-footer { border-top-color: rgba(255, 232, 31, 0.2); }
html[data-theme='starwars'] .phys-field-group label { color: #8db4cc; }
html[data-theme='starwars'] .phys-input { background: #060e1c; border-color: rgba(255, 232, 31, 0.2); color: #e8e6d0; }
html[data-theme='starwars'] .phys-input:focus { border-color: rgba(255, 232, 31, 0.6); }
html[data-theme='starwars'] .phys-delete-text { color: #c0be90; }
html[data-theme='starwars'] .phys-btn--secondary { color: #8db4cc; border-color: rgba(255, 232, 31, 0.2); }
html[data-theme='starwars'] .phys-btn--secondary:hover:not(:disabled) { background: #0a1a30; }
html[data-theme='starwars'] .phys-add-btn--secondary { background: transparent; color: #8db4cc; border-color: rgba(255, 232, 31, 0.2); }
html[data-theme='starwars'] .phys-add-btn--secondary:hover { background: #0a1a30; }
html[data-theme='starwars'] .phys-csv-panel,
html[data-theme='starwars'] .phys-branch-panel { background: #050d1a; border-color: rgba(255, 232, 31, 0.25); }
html[data-theme='starwars'] .phys-csv-panel-header { background: #030a15; border-bottom-color: rgba(255, 232, 31, 0.2); }
html[data-theme='starwars'] .phys-csv-panel-title { color: #FFE81F; }
html[data-theme='starwars'] .phys-csv-hint { color: #8db4cc; }
html[data-theme='starwars'] .phys-csv-template-btn { color: #FFE81F; border-color: rgba(255, 232, 31, 0.2); background: transparent; }
html[data-theme='starwars'] .phys-csv-template-btn:hover { background: #0a1a30; }
html[data-theme='starwars'] .phys-csv-drop { border-color: rgba(255, 232, 31, 0.2); color: #8db4cc; }
html[data-theme='starwars'] .phys-csv-drop:hover,
html[data-theme='starwars'] .phys-csv-drop--active { border-color: #FFE81F; background: #030a15; }
html[data-theme='starwars'] .phys-csv-drop-icon { color: #8db4cc; }
html[data-theme='starwars'] .phys-csv-progress-bar { background: rgba(255, 232, 31, 0.15); }
html[data-theme='starwars'] .phys-csv-progress-fill { background: #FFE81F; }
html[data-theme='starwars'] .phys-csv-ok { color: #FFE81F; }
html[data-theme='starwars'] .phys-branch-item { background: #060e1c; border-color: rgba(255, 232, 31, 0.15); }
html[data-theme='starwars'] .phys-branch-name { color: #FFE81F; }
html[data-theme='starwars'] .phys-branch-sub { color: #8db4cc; }
html[data-theme='starwars'] .phys-branch-add { border-top-color: rgba(255, 232, 31, 0.15); }
html[data-theme='starwars'] .phys-badge-branch { background: #060e1c; color: #4fc3f7; border-color: rgba(79, 195, 247, 0.3); }
html[data-theme='starwars'] .phys-stat-chip--branch { background: #060e1c; border-color: rgba(79, 195, 247, 0.25); }
html[data-theme='starwars'] .phys-stat-chip--branch .phys-stat-value { color: #4fc3f7; }
html[data-theme='starwars'] .phys-stat-chip--branch .phys-stat-label { color: #8db4cc; }
html[data-theme='starwars'] .phys-stat-chip--branch-active { background: rgba(79, 195, 247, 0.1); border-color: #4fc3f7; }
html[data-theme='starwars'] .phys-stat-chip--branch-active .phys-stat-value,
html[data-theme='starwars'] .phys-stat-chip--branch-active .phys-stat-label { color: #e8e6d0; }
html[data-theme='starwars'] .phys-image-section { background: #060e1c; border-color: rgba(255, 232, 31, 0.15); }
html[data-theme='starwars'] .phys-image-preview-wrap { background: #030a15; border-color: rgba(255, 232, 31, 0.2); }
html[data-theme='starwars'] .phys-image-placeholder { color: #8db4cc; }
html[data-theme='starwars'] .phys-image-label { color: #FFE81F; }
html[data-theme='starwars'] .phys-image-hint { color: #8db4cc; }

html[data-theme='starwars'] .phys-filter-select { background: #050d1a; color: #e8e6d0; border-color: rgba(255, 232, 31, 0.2); color-scheme: dark; }

/* ─── filter-select: dark themes ────────────────────────────────────────────── */
html[data-theme='cyberpunk'] .phys-filter-select,
html[data-theme='jarvis'] .phys-filter-select,
html[data-theme='rock'] .phys-filter-select,
html[data-theme='golden'] .phys-filter-select {
  background: var(--bg-primary);
  color: var(--text-primary);
  border-color: var(--border-color);
  color-scheme: dark;
}

/* ─── filter-select: light themes ───────────────────────────────────────────── */
html[data-theme='default'] .phys-filter-select,
html[data-theme='parchment'] .phys-filter-select,
html[data-theme='pop'] .phys-filter-select,
html[data-theme='allwhite'] .phys-filter-select {
  background: var(--input-bg, #fff);
  color: var(--text-primary);
  border-color: var(--border-color);
  color-scheme: light;
}
/* ═══════════════════════════════════════════════════════
   POS.css — Punto de Venta
   Theme-aware: all colors via CSS variables / overrides
   ═══════════════════════════════════════════════════════ */

/* ── Page layout ────────────────────────────────────── */
.pos-page {
  display: flex;
  flex-direction: column;
  /* Subtracts: 70px header + 2rem top padding + 2rem bottom padding from layout-main */
  height: calc(100dvh - 70px - 4rem);
  min-height: 0;
  overflow: hidden;
  background: var(--bg-primary);
  color: var(--text-primary);
  font-family: inherit;
}

/* ── Branch picker modal ─────────────────────────────── */
.pos-branch-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 200;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}

.pos-branch-modal {
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: 14px;
  padding: 2rem;
  width: min(92vw, 400px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  box-shadow: 0 24px 60px rgba(0,0,0,0.35);
}

.branch-modal-icon {
  font-size: 2.5rem;
  color: var(--accent);
}

.pos-branch-modal h2 {
  margin: 0;
  font-size: 1.2rem;
  color: var(--text-primary);
}

.pos-branch-modal p {
  margin: 0;
  font-size: 0.82rem;
  color: var(--text-secondary);
  text-align: center;
}

.branch-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  width: 100%;
  margin-top: 0.5rem;
}

.branch-option {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.15rem;
  padding: 0.7rem 1rem;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  background: var(--bg-secondary);
  cursor: pointer;
  text-align: left;
  transition: border-color 0.15s, background 0.15s;
}

.branch-option:hover {
  border-color: var(--accent);
  background: var(--bg-hover);
}

.branch-option strong {
  font-size: 0.9rem;
  color: var(--text-primary);
}

.branch-option span {
  font-size: 0.78rem;
  color: var(--text-secondary);
}

/* ── Header ─────────────────────────────────────────── */
.pos-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.5rem 0.75rem;
  border-bottom: 1px solid var(--border-color);
  background: var(--bg-secondary);
}

.pos-header-actions {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.pos-btn.pos-btn-sm {
  font-size: 0.78rem;
}

.pos-header-left {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.pos-header-icon {
  font-size: 2rem;
  color: var(--accent);
}

.pos-header h1 {
  margin: 0;
  font-size: 1.4rem;
  color: var(--text-primary);
}

.pos-header p {
  margin: 0;
  font-size: 0.82rem;
  color: var(--text-secondary);
}

/* ── Body: 2 columns ────────────────────────────────── */
.pos-body {
  display: grid;
  grid-template-columns: 1fr 380px;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  /* Reserve space at the bottom so the Rockstar floating button
     never overlaps the cart checkout button */
  padding-bottom: 84px;
}

/* ── Product Browser ────────────────────────────────── */
.pos-products {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-right: 1px solid var(--border-color);
}

/* Tabs */
.pos-tabs {
  display: flex;
  border-bottom: 1px solid var(--border-color);
  background: var(--bg-secondary);
}

.pos-tab {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.75rem;
  background: none;
  border: none;
  border-bottom: 3px solid transparent;
  color: var(--text-secondary);
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s;
}

.pos-tab:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

.pos-tab.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
  background: var(--bg-primary);
}

.tab-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.4rem;
  height: 1.4rem;
  padding: 0 0.3rem;
  background: var(--accent);
  color: #fff;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
}

/* Barcode scanner strip — always visible on physical tab */
.pos-scanner-strip {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 1rem;
  background: var(--bg-secondary);
  border-bottom: 2px solid var(--border-color);
  transition: background 0.2s, border-color 0.2s;
  min-height: 2.4rem;
}

.pos-scanner-strip.scan-found {
  background: rgba(22, 163, 74, 0.08);
  border-color: #16a34a;
}

.pos-scanner-strip.scan-not-found {
  background: rgba(220, 38, 38, 0.08);
  border-color: #dc2626;
}

.scanner-strip-icon {
  font-size: 1.1rem;
  color: var(--text-secondary);
  flex-shrink: 0;
  opacity: 0.6;
}

.pos-scanner-strip.scan-found     .scanner-strip-icon { color: #16a34a; opacity: 1; }
.pos-scanner-strip.scan-not-found .scanner-strip-icon { color: #dc2626; opacity: 1; }

.scanner-strip-hint {
  font-size: 0.78rem;
  color: var(--text-secondary);
  font-style: italic;
}

.scanner-strip-feedback {
  font-size: 0.82rem;
  font-weight: 700;
  animation: scan-fade-in 0.12s ease;
}

.scanner-strip-feedback.found     { color: #15803d; }
.scanner-strip-feedback.not-found { color: #dc2626; }

@keyframes scan-fade-in {
  from { opacity: 0; transform: translateX(-4px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* Search */
.pos-search-bar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 1rem;
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border-color);
}

.pos-search-icon {
  color: var(--text-secondary);
  font-size: 1.2rem;
  flex-shrink: 0;
}

.pos-search-input {
  flex: 1;
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  padding: 0.45rem 0.75rem;
  color: var(--text-primary);
  font-size: 0.9rem;
}

.pos-search-input::placeholder { color: var(--text-muted); }
.pos-search-input:focus { outline: none; border-color: var(--accent); }

/* Product grid */
.pos-product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 0.75rem;
  padding: 1rem;
  overflow-y: auto;
  align-content: start;
}

.pos-product-card {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding: 0.85rem;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.1s;
  color: var(--text-primary);
}

.pos-product-card:hover:not(:disabled) {
  border-color: var(--accent);
  box-shadow: 0 2px 12px rgba(0,0,0,0.15);
  transform: translateY(-2px);
}

.pos-product-card.disabled,
.pos-product-card:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
}

.pos-product-img {
  width: 100%;
  height: 90px;
  object-fit: contain;
  border-radius: 6px;
  background: var(--bg-secondary);
  margin-bottom: 0.3rem;
}

.pos-product-cat {
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.pos-product-name {
  font-size: 0.85rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--text-primary);
}

.pos-product-brand {
  font-size: 0.75rem;
  color: var(--text-secondary);
}

.pos-product-price {
  font-size: 1rem;
  font-weight: 700;
  color: var(--accent);
  margin-top: auto;
}

.pos-product-stock {
  font-size: 0.72rem;
  color: var(--text-secondary);
}

.pos-product-stock.out { color: #e53e3e; font-weight: 600; }
.pos-product-stock.low { color: #dd6b20; font-weight: 600; }

.pos-product-delivery-badge {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.72rem;
  color: #3182ce;
  font-weight: 500;
}

/* Loading / empty */
.pos-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  flex: 1;
  padding: 2rem;
  color: var(--text-secondary);
}

.pos-empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: 2rem;
  color: var(--text-secondary);
  font-size: 0.9rem;
}

/* ── Cart Panel ─────────────────────────────────────── */
.pos-cart-panel {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--bg-secondary);
}

.pos-cart-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 1rem 1.25rem;
  font-size: 1rem;
  font-weight: 700;
  border-bottom: 1px solid var(--border-color);
  color: var(--text-primary);
}

.cart-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.4rem;
  height: 1.4rem;
  background: var(--accent);
  color: #fff;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 700;
}

/* Empty cart */
.pos-cart-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
  gap: 0.5rem;
  color: var(--text-muted);
  padding: 2rem;
  text-align: center;
}

.empty-cart-icon {
  font-size: 3rem;
  opacity: 0.3;
}

.empty-hint {
  font-size: 0.8rem;
  opacity: 0.6;
}

/* Cart items */
.pos-cart-items {
  flex: 1;
  overflow-y: auto;
  padding: 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.pos-cart-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 0.75rem;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 8px;
}

.cart-item-info { flex: 1; min-width: 0; }

.cart-item-name {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cart-item-price {
  font-size: 0.74rem;
  color: var(--text-secondary);
}

.cart-item-type {
  display: flex;
  align-items: center;
  gap: 0.2rem;
  font-size: 0.68rem;
  margin-top: 0.15rem;
}

.cart-item-type.online { color: #3182ce; }

.cart-item-qty {
  display: flex;
  align-items: center;
  gap: 0;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  overflow: hidden;
}

.cart-item-qty button {
  padding: 0.25rem 0.4rem;
  background: var(--bg-secondary);
  border: none;
  color: var(--text-primary);
  cursor: pointer;
  font-size: 0.85rem;
  line-height: 1;
}

.cart-item-qty button:hover { background: var(--bg-hover); }

.cart-item-qty span {
  padding: 0.25rem 0.4rem;
  font-size: 0.82rem;
  font-weight: 600;
  min-width: 1.6rem;
  text-align: center;
  background: var(--bg-primary);
  color: var(--text-primary);
}

.cart-item-subtotal {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--accent);
  min-width: 3.5rem;
  text-align: right;
}

.cart-remove-btn {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 0.2rem;
  font-size: 1rem;
  border-radius: 4px;
  transition: color 0.15s;
}

.cart-remove-btn:hover { color: #e53e3e; }

/* Cart footer / summary */
.pos-cart-footer {
  border-top: 1px solid var(--border-color);
  padding: 0.75rem;
}

.cart-summary {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin-bottom: 0.75rem;
}

.summary-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.88rem;
  color: var(--text-primary);
}

.summary-row.total-row {
  font-size: 1rem;
  font-weight: 700;
  border-top: 1px solid var(--border-color);
  padding-top: 0.4rem;
  margin-top: 0.2rem;
  color: var(--accent);
}

.discount-input-wrap {
  display: flex;
  align-items: center;
  gap: 0.2rem;
  color: var(--text-secondary);
}

.discount-input-wrap input {
  width: 5rem;
  text-align: right;
  border: 1px solid var(--border-color);
  border-radius: 5px;
  padding: 0.25rem 0.4rem;
  background: var(--bg-primary);
  color: var(--text-primary);
  font-size: 0.85rem;
}

.discount-input-wrap input:focus { outline: none; border-color: var(--accent); }

/* ── Checkout steps ─────────────────────────────────── */
.pos-checkout-step {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 0.75rem;
  border-top: 1px solid var(--border-color);
  overflow-y: auto;
}

.pos-checkout-step h3 {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-primary);
}

.pos-checkout-step h4 {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0.5rem 0 0.25rem;
  font-size: 0.88rem;
  color: var(--text-primary);
}

/* Delivery options */
.delivery-options {
  display: flex;
  gap: 0.5rem;
}

.delivery-btn {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  padding: 0.75rem;
  border: 2px solid var(--border-color);
  border-radius: 10px;
  background: var(--bg-card);
  color: var(--text-primary);
  cursor: pointer;
  font-size: 0.82rem;
  font-weight: 600;
  transition: all 0.15s;
}

.delivery-btn svg { font-size: 1.4rem; }
.delivery-btn:hover { border-color: var(--accent); }
.delivery-btn.active { border-color: var(--accent); background: var(--accent); color: #fff; }

/* Customer form */
.customer-form {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  margin-top: 0.5rem;
}

.customer-form input,
.customer-form select {
  width: 100%;
  box-sizing: border-box;
  padding: 0.45rem 0.6rem;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  background: var(--bg-primary);
  color: var(--text-primary);
  font-size: 0.85rem;
}

.customer-form input:focus,
.customer-form select:focus {
  outline: none;
  border-color: var(--accent);
}

.customer-form input::placeholder { color: var(--text-muted); }

.customer-form h4 {
  margin: 0.4rem 0 0.1rem;
  font-size: 0.85rem;
  color: var(--text-secondary);
  font-weight: 600;
}

.customer-form .form-row-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.4rem;
}

/* Receipt channel toggles */
.receipt-options {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.75rem;
  padding-top: 0.6rem;
  border-top: 1px solid var(--border-color);
}

.receipt-options-label {
  font-size: 0.8rem;
  color: var(--text-secondary);
  margin: 0;
  flex-shrink: 0;
}

.receipt-toggle {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.3rem 0.7rem;
  border: 1px solid var(--border-color);
  border-radius: 999px;
  font-size: 0.82rem;
  cursor: pointer;
  color: var(--text-secondary);
  background: var(--bg-primary);
  -webkit-user-select: none;
  user-select: none;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
}

.receipt-toggle input { display: none; }

.receipt-toggle.active {
  border-color: var(--accent);
  background: var(--accent);
  color: #fff;
}

.receipt-toggle:hover:not(.active) { border-color: var(--accent); color: var(--accent); }

/* Checkout button */
.checkout-btn {
  margin-top: 0.25rem;
  font-size: 1rem;
  letter-spacing: 0.01em;
}

/* Step hint */
.step-hint {
  font-size: 0.78rem;
  color: var(--text-secondary);
  margin: -0.25rem 0 0.5rem;
  font-style: italic;
}

/* Ghost button */
.pos-btn.ghost {
  background: transparent;
  border: 1px solid var(--border-color);
  color: var(--text-secondary);
}
.pos-btn.ghost:hover { border-color: var(--accent); color: var(--accent); }

/* Payment options */
.payment-options {
  display: flex;
  gap: 0.5rem;
}

.payment-btn {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  padding: 0.65rem 0.4rem;
  border: 2px solid var(--border-color);
  border-radius: 8px;
  background: var(--bg-card);
  color: var(--text-primary);
  cursor: pointer;
  font-size: 0.78rem;
  font-weight: 600;
  transition: all 0.15s;
}

.payment-btn svg { font-size: 1.2rem; }
.payment-btn:hover { border-color: var(--accent); }
.payment-btn.active { border-color: var(--accent); background: var(--accent); color: #fff; }

.payment-total {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-primary);
  text-align: center;
}

.payment-total strong { color: var(--accent); }

/* Confirm summary */
.confirm-summary {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.confirm-row {
  display: flex;
  justify-content: space-between;
  font-size: 0.85rem;
  color: var(--text-primary);
}

.confirm-row.total {
  font-size: 1rem;
  font-weight: 700;
  border-top: 1px solid var(--border-color);
  padding-top: 0.4rem;
  margin-top: 0.2rem;
  color: var(--accent);
}

/* Navigation */
.step-nav {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.25rem;
}

/* Error */
.pos-error {
  background: #fff5f5;
  color: #c53030;
  border: 1px solid #feb2b2;
  border-radius: 8px;
  padding: 0.6rem 0.75rem;
  font-size: 0.85rem;
}

/* ── Buttons ────────────────────────────────────────── */
.pos-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  padding: 0.55rem 1rem;
  border-radius: 8px;
  border: none;
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, opacity 0.15s;
  white-space: nowrap;
}

.pos-btn:disabled { opacity: 0.5; cursor: not-allowed; }

.pos-btn.primary { background: var(--accent); color: #fff; }
.pos-btn.primary:hover:not(:disabled) { background: var(--accent-hover); }

.pos-btn.secondary {
  background: var(--bg-card);
  color: var(--text-primary);
  border: 1px solid var(--border-color);
}
.pos-btn.secondary:hover:not(:disabled) { background: var(--bg-hover); }

.pos-btn.success { background: #38a169; color: #fff; }
.pos-btn.success:hover:not(:disabled) { background: #2f855a; }

.pos-btn.full-width { width: 100%; }
.pos-btn.icon-only { padding: 0.5rem; }

.btn-spinner {
  width: 1rem;
  height: 1rem;
  border: 2px solid rgba(255,255,255,0.4);
  border-top-color: #fff;
  border-radius: 50%;
  animation: pos-spin 0.7s linear infinite;
}

@keyframes pos-spin { to { transform: rotate(360deg); } }

/* ── Receipt ────────────────────────────────────────── */
.pos-receipt {
  max-width: 480px;
  margin: 2rem auto;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 16px;
  padding: 2rem;
}

.receipt-header {
  text-align: center;
  margin-bottom: 1.5rem;
}

.receipt-check {
  font-size: 3rem;
  color: #38a169;
  margin-bottom: 0.5rem;
}

.receipt-header h1 {
  margin: 0 0 0.25rem;
  color: var(--text-primary);
}

.receipt-sale-id {
  color: var(--text-secondary);
  font-size: 0.9rem;
}

.receipt-details, .receipt-items {
  background: var(--bg-secondary);
  border-radius: 10px;
  padding: 0.75rem 1rem;
  margin-bottom: 1rem;
}

.receipt-row {
  display: flex;
  justify-content: space-between;
  padding: 0.35rem 0;
  font-size: 0.9rem;
  color: var(--text-primary);
  border-bottom: 1px solid var(--border-color);
}

.receipt-row:last-child { border-bottom: none; }
.receipt-row.highlight strong { color: #3182ce; }

.receipt-items h3 {
  margin: 0 0 0.5rem;
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.receipt-item {
  display: flex;
  justify-content: space-between;
  font-size: 0.85rem;
  padding: 0.25rem 0;
  color: var(--text-primary);
}

.receipt-actions {
  display: flex;
  gap: 0.75rem;
}

/* ── Responsive ─────────────────────────────────────── */
@media (max-width: 768px) {
  .pos-body {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    overflow: visible;
  }

  .pos-products {
    border-right: none;
    border-bottom: 1px solid var(--border-color);
  }

  .pos-product-grid {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  }

  .pos-cart-panel {
    max-height: none;
  }

  .pos-body {
    overflow-y: auto;
  }
}

@media print {
  .pos-header,
  .pos-body,
  .receipt-actions { display: none; }
  .pos-receipt {
    border: none;
    max-width: 100%;
    margin: 0;
  }
}
/* ═══════════════════════════════════════════════════════
   POSSales.css — Registro de Ventas (POS)
   ═══════════════════════════════════════════════════════ */

.pos-sales-page {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  color: var(--text-primary);
}

/* ── Header ─────────────────────────────────────────── */
.pos-sales-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.pos-sales-header-left {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.pos-sales-header-icon {
  font-size: 2rem;
  color: var(--primary-color);
}

.pos-sales-header h1 {
  margin: 0;
  font-size: 1.4rem;
  color: var(--text-primary);
}

.pos-sales-header p {
  margin: 0;
  font-size: 0.82rem;
  color: var(--text-secondary);
}

/* ── Buttons ─────────────────────────────────────────── */
.pss-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.5rem 1rem;
  border-radius: 8px;
  border: 1px solid var(--border-color);
  background: var(--card-bg);
  color: var(--text-primary);
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}

.pss-btn.icon-only {
  padding: 0.5rem;
  gap: 0;
  font-size: 1.1rem;
}

.pss-btn:hover:not(:disabled) {
  background: var(--hover-bg);
  border-color: var(--primary-color);
}

.pss-btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* ── Filter bar ──────────────────────────────────────── */
.pss-filter-bar {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  padding: 1rem 1.1rem;
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 10px;
}

.pss-filter-row {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  flex-wrap: wrap;
}

.pss-date-row {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  flex-wrap: wrap;
  border-top: 1px solid var(--border-color);
  padding-top: 0.65rem;
}

/* Shared input / select base */
.pss-input,
.pss-select {
  padding: 0.45rem 0.75rem;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  font-size: 0.875rem;
  background: var(--input-bg, var(--bg-primary));
  color: var(--text-primary);
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.pss-input:focus,
.pss-select:focus {
  border-color: var(--primary-color);
  box-shadow: 0 0 0 2px rgba(232, 93, 4, 0.12);
}

/* Search */
.pss-search-wrap {
  position: relative;
  flex: 1;
  min-width: 220px;
}

.pss-search-icon {
  position: absolute;
  left: 0.6rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-secondary);
  font-size: 1rem;
  pointer-events: none;
}

.pss-search-input {
  width: 100%;
  padding-left: 2rem;
  box-sizing: border-box;
}

/* Selects row */
.pss-selects-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.pss-filter-icon-label {
  color: var(--text-secondary);
  font-size: 1.1rem;
  flex-shrink: 0;
}

.pss-select {
  -webkit-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%236b7280'%3E%3Cpath fill-rule='evenodd' d='M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z' clip-rule='evenodd'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.5rem center;
  background-size: 1rem;
  padding-right: 2rem;
  cursor: pointer;
}

/* Date inputs */
.pss-date-label {
  font-size: 0.82rem;
  color: var(--text-secondary);
  white-space: nowrap;
}

.pss-date-input { width: 142px; }

/* Clear button */
.pss-clear-btn {
  padding: 0.42rem 0.875rem;
  background: transparent;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  font-size: 0.82rem;
  color: var(--text-secondary);
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.pss-clear-btn:hover {
  background: var(--hover-bg);
  border-color: var(--primary-color);
  color: var(--primary-color);
}

/* ── Summary bar ─────────────────────────────────────── */
.pos-sales-summary {
  display: flex;
  gap: 2rem;
  padding: 0.85rem 1.25rem;
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-left: 4px solid var(--primary-color);
  border-radius: 10px;
}

.pss-stat {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.pss-stat-value {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--primary-color);
  line-height: 1.2;
}

.pss-stat-label {
  font-size: 0.72rem;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* ── States ──────────────────────────────────────────── */
.pos-sales-loading,
.pos-sales-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 3.5rem 1rem;
  color: var(--text-secondary);
  font-size: 0.9rem;
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 10px;
}

.pos-sales-empty-icon {
  font-size: 3rem;
  opacity: 0.25;
}

/* ── Table ───────────────────────────────────────────── */
.pos-sales-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  background: var(--card-bg);
}

.pos-sales-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}

/* Header */
.pos-sales-table thead {
  background: var(--table-header-bg, var(--hover-bg));
  border-bottom: 2px solid var(--border-color);
}

.pos-sales-table th {
  text-align: left;
  padding: 0.75rem 1rem;
  color: var(--text-secondary);
  font-weight: 700;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  white-space: nowrap;
}

/* Body rows */
.pos-sales-table td {
  padding: 0.72rem 1rem;
  border-bottom: 1px solid var(--border-color);
  vertical-align: middle;
  color: var(--text-primary);
  white-space: nowrap;
}

.pss-row:last-child td { border-bottom: none; }

.pss-row:nth-child(even) td {
  background: rgba(0,0,0,0.025);
}

.pss-row:hover td {
  background: var(--hover-bg);
}

/* Folio */
.folio-code {
  font-family: 'Courier New', monospace;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}

/* Date */
.pss-date { color: var(--text-secondary); font-size: 0.83rem; }

/* Seller */
.pss-seller { font-weight: 600; }

/* Items inline */
.items-count { font-weight: 700; margin-right: 0.2rem; }
.items-preview {
  font-size: 0.78rem;
  color: var(--text-secondary);
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-block;
  vertical-align: middle;
}

/* Delivery chip */
.pss-delivery-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.83rem;
}

/* Payment badge */
.payment-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.22rem 0.6rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
  white-space: nowrap;
}

.payment-cash     { background: #d1fae5; color: #065f46; }
.payment-card     { background: #dbeafe; color: #1e40af; }
.payment-transfer { background: #ede9fe; color: #5b21b6; }

/* Total column */
.pss-col-total { text-align: right; }
.pss-col-total strong { font-size: 0.95rem; font-weight: 700; }

/* Detail button */
.pss-detail-btn {
  padding: 0.28rem 0.65rem;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  background: transparent;
  color: var(--primary-color);
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s, border-color 0.15s;
}

.pss-detail-btn:hover {
  background: var(--hover-bg);
  border-color: var(--primary-color);
}

/* ── Modal ───────────────────────────────────────────── */
.pss-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 1rem;
}

.pss-modal {
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  width: 100%;
  max-width: 620px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,0.25);
}

.pss-modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 1.25rem 1.5rem 1rem;
  border-bottom: 1px solid var(--border-color);
  flex-shrink: 0;
}

.pss-modal-title {
  margin: 0 0 0.2rem;
  font-size: 1.1rem;
  color: var(--text-primary);
}

.pss-modal-folio {
  font-family: 'Courier New', monospace;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--primary-color);
}

.pss-modal-shopify {
  font-size: 0.82rem;
  color: var(--text-secondary);
}

.pss-modal-close {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-secondary);
  font-size: 1.3rem;
  line-height: 1;
  padding: 0.25rem;
  border-radius: 4px;
  display: flex;
  align-items: center;
  transition: background 0.15s, color 0.15s;
}

.pss-modal-close:hover {
  background: var(--hover-bg);
  color: var(--text-primary);
}

.pss-modal-body {
  overflow-y: auto;
  padding: 1.25rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

/* Meta grid */
.pss-modal-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2rem;
}

.pss-meta-item {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.pss-meta-label {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-secondary);
  font-weight: 700;
}

.pss-meta-value {
  font-size: 0.9rem;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.pss-icon { opacity: 0.55; flex-shrink: 0; }

/* Modal section */
.pss-modal-section { display: flex; flex-direction: column; gap: 0.6rem; }

.pss-section-title {
  margin: 0;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-secondary);
  font-weight: 700;
  border-bottom: 1px solid var(--border-color);
  padding-bottom: 0.35rem;
}

/* Items table inside modal */
.pss-items-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}

.pss-items-table th {
  text-align: left;
  padding: 0.4rem 0.6rem;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-secondary);
  font-weight: 700;
  border-bottom: 1px solid var(--border-color);
}

.pss-items-table td {
  padding: 0.55rem 0.6rem;
  border-bottom: 1px solid var(--border-color);
  color: var(--text-primary);
  vertical-align: middle;
  white-space: normal;
}

.pss-items-table tr:last-child td { border-bottom: none; }

.pss-num { text-align: right; white-space: nowrap; }

.pss-item-title { font-weight: 500; }

.pss-item-sku {
  font-size: 0.74rem;
  color: var(--text-secondary);
  font-family: 'Courier New', monospace;
}

/* Totals */
.pss-modal-totals {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  border-top: 1px solid var(--border-color);
  padding-top: 0.75rem;
}

.pss-total-row {
  display: flex;
  justify-content: space-between;
  font-size: 0.9rem;
  color: var(--text-secondary);
}

.pss-discount-row { color: #dc2626; }

.pss-grand-total {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text-primary);
  border-top: 2px solid var(--border-color);
  padding-top: 0.5rem;
  margin-top: 0.1rem;
}

/* ── Billing button + billing modal ── */
.pss-modal-billing-footer {
  padding-top: 0.75rem;
  border-top: 1px solid var(--border-color);
  display: flex;
  justify-content: flex-end;
}

.pss-facturar-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.6rem 1.25rem;
  border: none;
  border-radius: 7px;
  background: var(--accent);
  color: #fff;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.15s;
  white-space: nowrap;
}
.pss-facturar-btn:hover { opacity: 0.85; }
.pss-facturar-btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* Refund / return button */
.pss-refund-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.6rem 1.25rem;
  border: 1px solid var(--border-color);
  border-radius: 7px;
  background: transparent;
  color: var(--text-primary);
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  white-space: nowrap;
}
.pss-refund-btn:hover:not(:disabled) {
  background: var(--hover-bg);
  border-color: var(--primary-color);
}
.pss-refund-btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* Returned status badge */
.pss-status-returned {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-secondary);
  padding: 0.4rem 0.75rem;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  background: var(--bg-secondary, rgba(0,0,0,0.04));
}

.pss-return-modal { max-width: 480px; }

.pss-return-info {
  font-size: 0.9rem;
  color: var(--text-secondary);
  line-height: 1.55;
  margin: 0 0 0.5rem;
}

.pss-return-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.pss-return-reason {
  resize: vertical;
  min-height: 72px;
  font-family: inherit;
}

.pss-return-success-msg {
  font-size: 0.9rem;
  color: var(--text-secondary);
  margin: 0;
  line-height: 1.5;
}

.pss-billing-modal { max-width: 520px; }

/* IVA preview bar */
.pss-billing-iva-preview {
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: 7px;
  padding: 0.65rem 0.9rem;
  margin-bottom: 0.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.pss-billing-iva-row {
  display: flex;
  justify-content: space-between;
  font-size: 0.85rem;
  color: var(--text-secondary);
}
.pss-billing-iva-total {
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--text-primary);
  border-top: 1px solid var(--border-color);
  padding-top: 0.3rem;
  margin-top: 0.15rem;
}

/* Form fields */
.pss-billing-form {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}
.pss-billing-field {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.pss-billing-label {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-secondary);
}
.pss-select-full { width: 100%; }

.pss-billing-error {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.65rem 0.85rem;
  background: #ef444422;
  border: 1px solid #ef444455;
  border-radius: 6px;
  color: #dc2626;
  font-size: 0.85rem;
}

.pss-billing-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.75rem;
  padding-top: 0.25rem;
}

/* Success state */
.pss-billing-result {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.9rem;
  text-align: center;
  padding: 0.5rem;
}
.pss-billing-ok h3 { margin: 0; font-size: 1.1rem; color: var(--text-primary); }
.pss-billing-result-icon {
  font-size: 3rem;
  color: #10b981;
}
.pss-billing-result-rows {
  width: 100%;
  border: 1px solid var(--border-color);
  border-radius: 7px;
  overflow: hidden;
}
.pss-billing-result-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem 0.85rem;
  font-size: 0.88rem;
  border-bottom: 1px solid var(--border-color);
  gap: 0.75rem;
}
.pss-billing-result-row:last-child { border-bottom: none; }
.pss-billing-result-row span { color: var(--text-secondary); }
.pss-billing-result-row strong { color: var(--text-primary); word-break: break-all; text-align: right; }
.pss-mono { font-family: monospace; font-size: 0.78rem; }
.pss-billing-notice {
  font-size: 0.78rem;
  color: var(--text-secondary);
  line-height: 1.5;
  padding: 0.5rem 0.75rem;
  border-left: 3px solid #f59e0b;
  background: #f59e0b11;
  text-align: left;
  border-radius: 0 5px 5px 0;
  margin: 0;
}

/* Spin animation for refresh icon */
@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

.spin { animation: spin 1s linear infinite; display: inline-block; }

/* ── Responsive ─────────────────────────────────────── */
@media (max-width: 900px) {
  .pss-selects-row { gap: 0.4rem; }
  .pss-select { font-size: 0.8rem; }
}

@media (max-width: 768px) {
  .pos-sales-summary { flex-wrap: wrap; gap: 1rem; }
  .pss-filter-row    { flex-direction: column; align-items: stretch; }
  .pss-selects-row   { flex-direction: column; align-items: stretch; }
  .pss-search-wrap   { min-width: 0; }
  .pss-date-row      { flex-direction: column; align-items: flex-start; }
  .pss-date-input    { width: 100%; }
}

/* ── Dark themes: fix alternating rows, badges, inputs ── */
html[data-theme="cyberpunk"] .pss-modal,
html[data-theme="jarvis"] .pss-modal,
html[data-theme="rock"] .pss-modal,
html[data-theme="golden"] .pss-modal {
  background: var(--card-bg);
}

html[data-theme="cyberpunk"] .pss-items-table td,
html[data-theme="jarvis"] .pss-items-table td,
html[data-theme="rock"] .pss-items-table td,
html[data-theme="golden"] .pss-items-table td {
  color: var(--text-primary);
}

html[data-theme="cyberpunk"] .pss-row:nth-child(even) td,
html[data-theme="jarvis"] .pss-row:nth-child(even) td,
html[data-theme="rock"] .pss-row:nth-child(even) td,
html[data-theme="golden"] .pss-row:nth-child(even) td {
  background: rgba(255, 255, 255, 0.04);
}

html[data-theme="cyberpunk"] .pos-sales-table thead,
html[data-theme="jarvis"] .pos-sales-table thead,
html[data-theme="rock"] .pos-sales-table thead,
html[data-theme="golden"] .pos-sales-table thead {
  background: rgba(255, 255, 255, 0.05);
}

html[data-theme="cyberpunk"] .pss-input,
html[data-theme="cyberpunk"] .pss-select,
html[data-theme="jarvis"] .pss-input,
html[data-theme="jarvis"] .pss-select,
html[data-theme="rock"] .pss-input,
html[data-theme="rock"] .pss-select,
html[data-theme="golden"] .pss-input,
html[data-theme="golden"] .pss-select {
  background: var(--bg-primary);
  color: var(--text-primary);
  border-color: var(--border-color);
  color-scheme: dark;
}

html[data-theme="default"] .pss-input,
html[data-theme="default"] .pss-select,
html[data-theme="parchment"] .pss-input,
html[data-theme="parchment"] .pss-select,
html[data-theme="pop"] .pss-input,
html[data-theme="pop"] .pss-select,
html[data-theme="allwhite"] .pss-input,
html[data-theme="allwhite"] .pss-select {
  background: var(--input-bg, #fff);
  color: var(--text-primary);
  border-color: var(--border-color);
  color-scheme: light;
}

html[data-theme="cyberpunk"] .payment-cash,
html[data-theme="jarvis"] .payment-cash,
html[data-theme="rock"] .payment-cash,
html[data-theme="golden"] .payment-cash {
  background: rgba(16, 185, 129, 0.2);
  color: #6ee7b7;
}

html[data-theme="cyberpunk"] .payment-card,
html[data-theme="jarvis"] .payment-card,
html[data-theme="rock"] .payment-card,
html[data-theme="golden"] .payment-card {
  background: rgba(59, 130, 246, 0.2);
  color: #93c5fd;
}

html[data-theme="cyberpunk"] .payment-transfer,
html[data-theme="jarvis"] .payment-transfer,
html[data-theme="rock"] .payment-transfer,
html[data-theme="golden"] .payment-transfer {
  background: rgba(139, 92, 246, 0.2);
  color: #c4b5fd;
}

/* ── Single-branch badge (shown instead of dropdown when user has only 1 branch) */
.pss-branch-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35rem 0.75rem;
  border-radius: 6px;
  background: var(--bg-secondary, #f1f5f9);
  border: 1px solid var(--border-color, #e2e8f0);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
}
/* ═══════════════════════════════════════════════════════
   POSCustomers.css — Registro de Clientes (POS)
   ═══════════════════════════════════════════════════════ */

.psc-page {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  color: var(--text-primary);
}

/* ── Header ─────────────────────────────────────────── */
.psc-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.psc-header-left {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.psc-header-icon {
  font-size: 2rem;
  color: var(--primary-color);
}

.psc-header h1 {
  margin: 0;
  font-size: 1.4rem;
  color: var(--text-primary);
}

.psc-header p {
  margin: 0;
  font-size: 0.82rem;
  color: var(--text-secondary);
}

/* ── Button ──────────────────────────────────────────── */
.psc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem;
  border-radius: 8px;
  border: 1px solid var(--border-color);
  background: var(--card-bg);
  color: var(--text-primary);
  font-size: 1.1rem;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}

.psc-btn:hover:not(:disabled) {
  background: var(--hover-bg);
  border-color: var(--primary-color);
}

.psc-btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* ── Filter bar ──────────────────────────────────────── */
.psc-filter-bar {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.85rem 1rem;
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 10px;
}

.psc-search-wrap {
  position: relative;
  flex: 1;
  min-width: 220px;
}

.psc-search-icon {
  position: absolute;
  left: 0.6rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-secondary);
  font-size: 1rem;
  pointer-events: none;
}

.psc-input {
  padding: 0.45rem 0.75rem;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  font-size: 0.875rem;
  background: var(--input-bg, var(--bg-primary));
  color: var(--text-primary);
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.psc-input:focus {
  border-color: var(--primary-color);
  box-shadow: 0 0 0 2px rgba(232, 93, 4, 0.12);
}

.psc-search-input {
  width: 100%;
  padding-left: 2rem;
  box-sizing: border-box;
}

.psc-clear-btn {
  padding: 0.42rem 0.875rem;
  background: transparent;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  font-size: 0.82rem;
  color: var(--text-secondary);
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.psc-clear-btn:hover {
  background: var(--hover-bg);
  border-color: var(--primary-color);
  color: var(--primary-color);
}

/* ── Summary ─────────────────────────────────────────── */
.psc-summary {
  display: flex;
  gap: 2rem;
  flex-wrap: wrap;
  padding: 0.85rem 1.25rem;
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-left: 4px solid var(--primary-color);
  border-radius: 10px;
}

.psc-stat {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.psc-stat-value {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--primary-color);
  line-height: 1.2;
}

.psc-stat-label {
  font-size: 0.72rem;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* ── States ──────────────────────────────────────────── */
.psc-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 3.5rem 1rem;
  color: var(--text-secondary);
  font-size: 0.9rem;
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 10px;
}

.psc-empty-icon {
  font-size: 3rem;
  opacity: 0.25;
}

/* ── Table ───────────────────────────────────────────── */
.psc-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  background: var(--card-bg);
}

.psc-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}

.psc-table thead {
  background: var(--table-header-bg, var(--hover-bg));
  border-bottom: 2px solid var(--border-color);
}

.psc-table th {
  text-align: left;
  padding: 0.75rem 1rem;
  color: var(--text-secondary);
  font-weight: 700;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  white-space: nowrap;
}

.psc-table td {
  padding: 0.72rem 1rem;
  border-bottom: 1px solid var(--border-color);
  vertical-align: middle;
  white-space: nowrap;
  color: var(--text-primary);
}

.psc-row:last-child td { border-bottom: none; }
.psc-row:nth-child(even) td { background: rgba(0,0,0,0.025); }
.psc-row:hover td { background: var(--hover-bg); }

.psc-name    { font-weight: 600; }
.psc-secondary { color: var(--text-secondary); font-size: 0.83rem; }
.psc-num     { text-align: right; }
.psc-bold    { font-weight: 700; }

.psc-detail-btn {
  padding: 0.28rem 0.65rem;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  background: transparent;
  color: var(--primary-color);
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s, border-color 0.15s;
}

.psc-detail-btn:hover {
  background: var(--hover-bg);
  border-color: var(--primary-color);
}

/* ── Modal ───────────────────────────────────────────── */
.psc-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 1rem;
}

.psc-modal {
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  width: 100%;
  max-width: 520px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,0.25);
}

.psc-modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 1.25rem 1.5rem 1rem;
  border-bottom: 1px solid var(--border-color);
  flex-shrink: 0;
}

.psc-modal-title {
  margin: 0 0 0.2rem;
  font-size: 1.15rem;
  color: var(--text-primary);
}

.psc-modal-id {
  font-size: 0.78rem;
  color: var(--text-secondary);
  font-family: 'Courier New', monospace;
}

.psc-modal-close {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-secondary);
  font-size: 1.3rem;
  line-height: 1;
  padding: 0.25rem;
  border-radius: 4px;
  display: flex;
  align-items: center;
  transition: background 0.15s, color 0.15s;
}

.psc-modal-close:hover {
  background: var(--hover-bg);
  color: var(--text-primary);
}

.psc-modal-body {
  overflow-y: auto;
  padding: 1.25rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

/* Contact chips */
.psc-contact-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.psc-contact-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.3rem 0.75rem;
  border: 1px solid var(--border-color);
  border-radius: 999px;
  font-size: 0.84rem;
  color: var(--text-primary);
  background: var(--hover-bg);
}

.psc-chip-icon { opacity: 0.6; font-size: 0.9rem; }

/* Modal stats grid */
.psc-modal-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.psc-modal-stat {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  padding: 0.7rem 0.85rem;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  background: var(--hover-bg);
}

.psc-stat-icon {
  font-size: 1.1rem;
  color: var(--primary-color);
  opacity: 0.75;
  margin-top: 0.1rem;
  flex-shrink: 0;
}

.psc-mstat-label {
  display: block;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-secondary);
  font-weight: 700;
}

.psc-mstat-value {
  display: block;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-top: 0.15rem;
}

.psc-accent { color: var(--primary-color); }

/* Sale IDs */
.psc-sale-ids-section { display: flex; flex-direction: column; gap: 0.5rem; }

.psc-section-title {
  margin: 0;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-secondary);
  font-weight: 700;
  border-bottom: 1px solid var(--border-color);
  padding-bottom: 0.35rem;
}

.psc-sale-ids {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.psc-sale-id-chip {
  font-family: 'Courier New', monospace;
  font-size: 0.8rem;
  font-weight: 700;
  padding: 0.2rem 0.55rem;
  border-radius: 5px;
  background: var(--hover-bg);
  border: 1px solid var(--border-color);
  color: var(--primary-color);
  letter-spacing: 0.03em;
}

/* Spin */
@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
.spin { animation: spin 1s linear infinite; display: inline-block; }

/* ── Responsive ─────────────────────────────────────── */
@media (max-width: 768px) {
  .psc-summary        { gap: 1rem; }
  .psc-modal-stats    { grid-template-columns: 1fr; }
}

/* ── Dark theme overrides ────────────────────────────── */
html[data-theme="cyberpunk"] .psc-table thead,
html[data-theme="jarvis"] .psc-table thead,
html[data-theme="rock"] .psc-table thead,
html[data-theme="golden"] .psc-table thead {
  background: rgba(255, 255, 255, 0.05);
}

html[data-theme="cyberpunk"] .psc-row:nth-child(even) td,
html[data-theme="jarvis"] .psc-row:nth-child(even) td,
html[data-theme="rock"] .psc-row:nth-child(even) td,
html[data-theme="golden"] .psc-row:nth-child(even) td {
  background: rgba(255, 255, 255, 0.04);
}

html[data-theme="cyberpunk"] .psc-input,
html[data-theme="jarvis"] .psc-input,
html[data-theme="rock"] .psc-input,
html[data-theme="golden"] .psc-input {
  background: var(--bg-primary);
  color: var(--text-primary);
  border-color: var(--border-color);
}
/* ── BranchAccess page ──────────────────────────────────────────────────────── */

.ba-page {
  padding: 1.5rem 2rem;
  max-width: 1100px;
  margin: 0 auto;
}

.ba-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 2rem;
}

.ba-title-row {
  display: flex;
  align-items: flex-start;
  gap: 0.9rem;
}

.ba-icon {
  font-size: 2rem;
  color: var(--accent, #003049);
  flex-shrink: 0;
  margin-top: 0.15rem;
}

.ba-page h1 {
  font-size: 1.55rem;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 0.3rem;
}

.ba-subtitle {
  font-size: 0.88rem;
  color: var(--text-secondary, #64748b);
  margin: 0;
  line-height: 1.5;
  max-width: 600px;
}

.ba-btn-refresh {
  background: none;
  border: 1px solid var(--border-color, #e2e8f0);
  border-radius: 8px;
  padding: 0.45rem 0.7rem;
  cursor: pointer;
  color: var(--text-secondary, #64748b);
  font-size: 1.25rem;
  display: flex;
  align-items: center;
  transition: background 0.15s;
  flex-shrink: 0;
}

.ba-btn-refresh:hover:not(:disabled) {
  background: var(--bg-secondary, #f1f5f9);
}

.ba-loading,
.ba-empty {
  text-align: center;
  padding: 3rem;
  color: var(--text-secondary, #64748b);
  font-size: 0.95rem;
}

/* ── Table ──────────────────────────────────────────────────────────────────── */
.ba-table-wrap {
  overflow-x: auto;
  border-radius: 10px;
  border: 1px solid var(--border-color, #e2e8f0);
}

.ba-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--bg-card, #fff);
}

.ba-table th {
  background: var(--bg-secondary, #f8fafc);
  color: var(--text-secondary, #64748b);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.75rem 1rem;
  text-align: left;
  border-bottom: 1px solid var(--border-color, #e2e8f0);
}

.ba-table td {
  padding: 0.85rem 1rem;
  border-bottom: 1px solid var(--border-color, #e2e8f0);
  vertical-align: middle;
  color: var(--text-primary);
}

.ba-table tbody tr:last-child td {
  border-bottom: none;
}

.ba-table tbody tr:hover {
  background: var(--bg-hover, #f8fafc);
}

.ba-row-disabled {
  opacity: 0.55;
}

/* ── User cell ──────────────────────────────────────────────────────────────── */
.ba-user-cell {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.ba-user-name {
  font-weight: 600;
  font-size: 0.88rem;
}

.ba-user-email {
  font-size: 0.78rem;
  color: var(--text-secondary, #64748b);
}

.ba-role-badge {
  display: inline-block;
  padding: 0.2rem 0.55rem;
  border-radius: 20px;
  font-size: 0.72rem;
  font-weight: 600;
  background: var(--bg-secondary, #e2e8f0);
  color: var(--text-secondary, #475569);
}

/* ── Branch cell ────────────────────────────────────────────────────────────── */
.ba-branches-cell {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.ba-branch-count {
  font-weight: 600;
  font-size: 0.82rem;
  color: var(--accent, #003049);
}

.ba-branch-names {
  font-size: 0.78rem;
  color: var(--text-secondary, #64748b);
  line-height: 1.4;
}

/* ── Edit button ────────────────────────────────────────────────────────────── */
.ba-btn-edit {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35rem 0.75rem;
  border-radius: 6px;
  background: none;
  border: 1px solid var(--border-color, #e2e8f0);
  color: var(--text-secondary, #475569);
  font-size: 0.8rem;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.ba-btn-edit:hover {
  background: var(--accent, #003049);
  color: #fff;
  border-color: var(--accent, #003049);
}

/* ── Modal ──────────────────────────────────────────────────────────────────── */
.ba-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 1rem;
}

.ba-modal {
  background: var(--bg-card, #fff);
  border-radius: 14px;
  padding: 1.75rem;
  width: 100%;
  max-width: 440px;
  position: relative;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
}

.ba-modal-close {
  position: absolute;
  top: 0.9rem;
  right: 0.9rem;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1.3rem;
  color: var(--text-secondary, #64748b);
  display: flex;
  align-items: center;
}

.ba-modal-close:hover {
  color: var(--text-primary);
}

.ba-modal-title {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 0.5rem;
}

.ba-modal-user {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 0.4rem;
}

.ba-modal-role {
  font-size: 0.72rem;
  font-weight: 600;
  padding: 0.15rem 0.5rem;
  border-radius: 20px;
  background: var(--bg-secondary, #e2e8f0);
  color: var(--text-secondary, #475569);
  margin-left: 0.25rem;
}

.ba-modal-hint {
  font-size: 0.82rem;
  color: var(--text-secondary, #64748b);
  margin: 0 0 1rem;
  line-height: 1.5;
}

.ba-branch-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.ba-branch-row {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.55rem 0.75rem;
  border-radius: 8px;
  border: 1px solid var(--border-color, #e2e8f0);
  cursor: pointer;
  transition: background 0.15s;
}

.ba-branch-row:hover {
  background: var(--bg-secondary, #f8fafc);
}

.ba-branch-row input[type="checkbox"] {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  accent-color: var(--accent, #003049);
  cursor: pointer;
}

.ba-branch-row > div {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.ba-branch-name {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-primary);
}

.ba-branch-city {
  font-size: 0.75rem;
  color: var(--text-secondary, #64748b);
}

.ba-error {
  background: #fee2e2;
  color: #b91c1c;
  padding: 0.5rem 0.75rem;
  border-radius: 8px;
  font-size: 0.82rem;
  margin-bottom: 0.75rem;
}

.ba-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.75rem;
}

.ba-btn-cancel {
  padding: 0.5rem 1rem;
  border-radius: 8px;
  border: 1px solid var(--border-color, #e2e8f0);
  background: none;
  color: var(--text-secondary, #475569);
  cursor: pointer;
  font-size: 0.88rem;
}

.ba-btn-cancel:hover:not(:disabled) {
  background: var(--bg-secondary, #f1f5f9);
}

.ba-btn-save {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.5rem 1.1rem;
  border-radius: 8px;
  border: none;
  background: var(--accent, #003049);
  color: #fff;
  cursor: pointer;
  font-size: 0.88rem;
  font-weight: 600;
  transition: background 0.15s;
}

.ba-btn-save:hover:not(:disabled) {
  background: var(--accent-dark, #00253a);
}

.ba-btn-save:disabled,
.ba-btn-cancel:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* ── Responsive ────────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
  .ba-page {
    padding: 1rem;
  }

  .ba-table th,
  .ba-table td {
    padding: 0.65rem 0.6rem;
    font-size: 0.8rem;
  }

  .ba-branch-config-grid {
    grid-template-columns: 1fr;
  }
}

/* ── Section cards ────────────────────────────────────────────────────────── */

.ba-section-card {
  background: var(--bg-primary, #fff);
  border: 1px solid var(--border-color, #e2e8f0);
  border-radius: 10px;
  padding: 1.25rem 1.5rem;
  margin-bottom: 1.5rem;
}

.ba-section-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}

.ba-section-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 0.2rem;
}

.ba-section-desc {
  font-size: 0.82rem;
  color: var(--text-secondary, #64748b);
  margin: 0;
}

/* ── Branch config grid ────────────────────────────────────────────────────── */

.ba-branch-config-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 0.75rem;
}

.ba-branch-config-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  background: var(--bg-secondary, #f8fafc);
  border: 1px solid var(--border-color, #e2e8f0);
  border-radius: 8px;
}

.ba-branch-config-info {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}

.ba-branch-config-name {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ba-branch-config-city {
  font-size: 0.75rem;
  color: var(--text-secondary, #64748b);
}

.ba-branch-config-actions {
  display: flex;
  gap: 0.25rem;
  flex-shrink: 0;
}

.ba-btn-add {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.45rem 0.9rem;
  background: var(--accent, #003049);
  color: #fff;
  border: none;
  border-radius: 7px;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}

.ba-btn-add:hover {
  opacity: 0.88;
}

.ba-btn-icon {
  background: none;
  border: none;
  padding: 0.3rem;
  border-radius: 5px;
  cursor: pointer;
  color: var(--text-secondary, #64748b);
  display: flex;
  align-items: center;
  font-size: 1rem;
}

.ba-btn-icon:hover {
  background: var(--bg-primary, #fff);
  color: var(--text-primary);
}

.ba-btn-icon-delete:hover {
  color: #dc2626;
}

.ba-btn-delete {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.45rem 0.9rem;
  background: #dc2626;
  color: #fff;
  border: none;
  border-radius: 7px;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
}

.ba-btn-delete:hover {
  opacity: 0.88;
}

.ba-empty-branches {
  font-size: 0.85rem;
  color: var(--text-secondary, #64748b);
  margin: 0;
  padding: 0.5rem 0;
}

/* ── Branch form modal ────────────────────────────────────────────────────── */

.ba-form-modal {
  max-width: 400px;
}

.ba-branch-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.ba-branch-form label {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--text-primary);
}

.ba-branch-form input {
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--border-color, #e2e8f0);
  border-radius: 6px;
  font-size: 0.9rem;
  background: var(--bg-primary, #fff);
  color: var(--text-primary);
}

.ba-optional {
  font-size: 0.78rem;
  font-weight: 400;
  color: var(--text-secondary, #64748b);
}

.ba-form-error {
  font-size: 0.82rem;
  color: #dc2626;
  margin: 0;
}

/* ── Delete modal ─────────────────────────────────────────────────────────── */

.ba-delete-modal {
  max-width: 520px;
}

.ba-delete-msg {
  font-size: 0.9rem;
  color: var(--text-primary);
  margin: 0 0 1.25rem;
  line-height: 1.5;
}
/* ─── Billing.css — Centro de Facturación CFDI 4.0 ─── */

/* Page layout */
.billing-page {
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  min-height: 100%;
  color: var(--text-primary);
  background: var(--bg-primary);
}

/* Header */
.billing-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
.billing-header-left {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}
.billing-header-icon {
  font-size: 2rem;
  color: var(--accent);
  flex-shrink: 0;
  margin-top: 0.2rem;
}
.billing-header h1 {
  margin: 0 0 0.25rem;
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--text-primary);
}
.billing-header p {
  margin: 0;
  font-size: 0.85rem;
  color: var(--text-secondary);
}
.billing-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  background: var(--card-bg);
  color: var(--text-primary);
  font-size: 1.1rem;
  cursor: pointer;
  transition: background 0.15s;
}
.billing-btn:hover { background: var(--hover-bg); }
.billing-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.spin { animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Filter bar */
.billing-filter-bar {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
}
.billing-search-wrap {
  position: relative;
  flex: 1;
  min-width: 200px;
}
.billing-search-icon {
  position: absolute;
  left: 0.6rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-secondary);
  pointer-events: none;
}
.billing-input {
  width: 100%;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  background: var(--input-bg, var(--card-bg));
  color: var(--text-primary);
  font-size: 0.85rem;
  box-sizing: border-box;
}
.billing-search-input { padding-left: 2rem; }
.billing-input:focus { outline: none; border-color: var(--accent); }
.billing-select {
  padding: 0.5rem 2rem 0.5rem 0.75rem;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  background: var(--input-bg, var(--card-bg));
  color: var(--text-primary);
  font-size: 0.85rem;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%236b7280'%3E%3Cpath fill-rule='evenodd' d='M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z' clip-rule='evenodd'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.5rem center;
  background-size: 1rem;
  transition: border-color 0.15s;
}
.billing-select:focus { outline: none; border-color: var(--accent); }
.billing-date-label {
  font-size: 0.8rem;
  color: var(--text-secondary);
  white-space: nowrap;
}
.billing-date-input { width: 140px; }
.billing-clear-btn {
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  background: transparent;
  color: var(--text-secondary);
  font-size: 0.85rem;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s;
}
.billing-clear-btn:hover { background: var(--hover-bg); }

/* Summary bar */
.billing-summary {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}
.billing-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0.75rem 1.25rem;
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  min-width: 110px;
  text-align: center;
  flex: 1;
}
.billing-stat-value {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--accent);
}
.billing-stat-label {
  font-size: 0.75rem;
  color: var(--text-secondary);
  margin-top: 0.25rem;
}

/* Mock mode notice */
.billing-mock-notice {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.85rem 1rem;
  border: 1px solid #f59e0b44;
  border-left: 4px solid #f59e0b;
  border-radius: 6px;
  background: #f59e0b11;
  font-size: 0.82rem;
  color: var(--text-secondary);
  line-height: 1.5;
}
.billing-notice-icon {
  font-size: 1.25rem;
  color: #f59e0b;
  flex-shrink: 0;
  margin-top: 0.1rem;
}
.billing-mock-notice strong { color: #d97706; }

/* Table */
.billing-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  background: var(--card-bg);
}
.billing-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
}
.billing-table th {
  padding: 0.65rem 0.85rem;
  text-align: left;
  font-weight: 600;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--text-secondary);
  background: var(--card-bg);
  border-bottom: 1px solid var(--border-color);
  white-space: nowrap;
}
.billing-table td {
  padding: 0.65rem 0.85rem;
  border-bottom: 1px solid var(--border-color);
  vertical-align: middle;
  color: var(--text-primary);
}
.billing-row:last-child td { border-bottom: none; }
.billing-row:hover td { background: var(--hover-bg); }
.billing-num { text-align: right; }
.billing-mono { font-family: monospace; font-size: 0.82rem; }
.billing-secondary { color: var(--text-secondary); }
.billing-bold { font-weight: 600; }
.billing-nowrap { white-space: nowrap; }
.billing-folio { font-weight: 700; color: var(--accent); }
.billing-razon { max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Status chips */
.billing-status-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
  white-space: nowrap;
}
.cfdi-status-pending  { background: #f59e0b22; color: #d97706; border: 1px solid #f59e0b55; }
.cfdi-status-ok       { background: #10b98122; color: #059669; border: 1px solid #10b98155; }
.cfdi-status-cancelled{ background: #6b728022; color: #6b7280; border: 1px solid #6b728055; }
.cfdi-status-error    { background: #ef444422; color: #dc2626; border: 1px solid #ef444455; }

/* Detail button */
.billing-detail-btn {
  padding: 0.3rem 0.7rem;
  border: 1px solid var(--border-color);
  border-radius: 5px;
  background: var(--card-bg);
  color: var(--accent);
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
  white-space: nowrap;
}
.billing-detail-btn:hover { background: var(--hover-bg); }

/* Empty / loading state */
.billing-state {
  text-align: center;
  padding: 3rem;
  color: var(--text-secondary);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
}
.billing-empty-icon {
  font-size: 3rem;
  color: var(--text-secondary);
  opacity: 0.4;
}

/* ─── Modal ─── */
.billing-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}
.billing-modal {
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  width: 100%;
  max-width: 680px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
  color: var(--text-primary);
}
.billing-modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 1.25rem 1.5rem 1rem;
  border-bottom: 1px solid var(--border-color);
  gap: 1rem;
}
.billing-modal-title {
  font-size: 1.2rem;
  font-weight: 700;
  margin: 0 0 0.4rem;
  color: var(--text-primary);
}
.billing-modal-close {
  background: transparent;
  border: none;
  font-size: 1.4rem;
  cursor: pointer;
  color: var(--text-secondary);
  padding: 0.25rem;
  border-radius: 4px;
  flex-shrink: 0;
  transition: background 0.15s;
  line-height: 1;
}
.billing-modal-close:hover { background: var(--hover-bg); }
.billing-modal-body {
  padding: 1.25rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

/* UUID row */
.billing-uuid-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.65rem 0.85rem;
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  flex-wrap: wrap;
}
.billing-uuid-label {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  white-space: nowrap;
}
.billing-uuid-value {
  font-family: monospace;
  font-size: 0.82rem;
  color: var(--accent);
  word-break: break-all;
  flex: 1;
}
.billing-copy-btn {
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--text-secondary);
  font-size: 1.1rem;
  padding: 0.2rem;
  border-radius: 4px;
  transition: background 0.15s;
  flex-shrink: 0;
}
.billing-copy-btn:hover { background: var(--hover-bg); }

/* Modal sections */
.billing-modal-section { display: flex; flex-direction: column; gap: 0.65rem; }
.billing-section-title {
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-secondary);
  margin: 0;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid var(--border-color);
}
.billing-detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 0.75rem;
}
.billing-detail-item { display: flex; flex-direction: column; gap: 0.2rem; }
.billing-detail-label {
  font-size: 0.72rem;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.billing-detail-value { font-size: 0.88rem; color: var(--text-primary); font-weight: 500; }

/* Totals */
.billing-totals {
  border: 1px solid var(--border-color);
  border-radius: 6px;
  overflow: hidden;
}
.billing-total-row {
  display: flex;
  justify-content: space-between;
  padding: 0.5rem 0.85rem;
  font-size: 0.88rem;
  border-bottom: 1px solid var(--border-color);
}
.billing-total-row:last-child { border-bottom: none; }
.billing-discount { color: #10b981; }
.billing-grand-total {
  font-weight: 700;
  font-size: 1rem;
  background: var(--bg-primary);
}

/* Modal actions */
.billing-modal-actions {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}
.billing-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 1rem;
  border: 1px solid var(--accent);
  border-radius: 6px;
  background: transparent;
  color: var(--accent);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.15s;
}
.billing-action-btn:hover { background: var(--accent); color: #fff; }

/* ─── Responsive ─── */
@media (max-width: 768px) {
  .billing-page { padding: 1rem; }
  .billing-filter-bar { flex-direction: column; align-items: stretch; }
  .billing-search-wrap { flex: none; }
  .billing-date-input { width: 100%; }
  .billing-summary { gap: 0.6rem; }
  .billing-stat { min-width: 80px; padding: 0.6rem 0.75rem; }
  .billing-modal { max-height: 95vh; margin: 0.5rem; }
  .billing-modal-header { padding: 1rem; }
  .billing-modal-body { padding: 1rem; }
}

/* ─── Theme overrides ─── */

/* ── cyberpunk ── */
html[data-theme="cyberpunk"] .billing-modal,
html[data-theme="cyberpunk"] .billing-table-wrap,
html[data-theme="cyberpunk"] .billing-stat {
  background: #0d0d1a;
  border-color: #00ff41;
}
html[data-theme="cyberpunk"] .billing-mock-notice {
  background: #f59e0b0a;
  border-color: #f59e0b33;
}
html[data-theme="cyberpunk"] .billing-grand-total { background: #0a0a14; }
html[data-theme="cyberpunk"] .billing-input,
html[data-theme="cyberpunk"] .billing-select,
html[data-theme="cyberpunk"] .billing-date-input {
  background: var(--input-bg);
  color: var(--text-primary);
  border-color: var(--border-color);
  color-scheme: dark;
}

/* ── jarvis ── */
html[data-theme="jarvis"] .billing-modal,
html[data-theme="jarvis"] .billing-table-wrap,
html[data-theme="jarvis"] .billing-stat {
  background: #0a1628;
  border-color: #1e3a5f;
}
html[data-theme="jarvis"] .billing-grand-total { background: #060f1e; }
html[data-theme="jarvis"] .billing-input,
html[data-theme="jarvis"] .billing-select,
html[data-theme="jarvis"] .billing-date-input {
  background: var(--input-bg);
  color: var(--text-primary);
  border-color: var(--border-color);
  color-scheme: dark;
}

/* ── rock ── */
html[data-theme="rock"] .billing-modal,
html[data-theme="rock"] .billing-table-wrap,
html[data-theme="rock"] .billing-stat {
  background: #0d0000;
  border-color: #8b0000;
}
html[data-theme="rock"] .billing-grand-total { background: #080000; }
html[data-theme="rock"] .billing-input,
html[data-theme="rock"] .billing-select,
html[data-theme="rock"] .billing-date-input {
  background: var(--input-bg);
  color: var(--text-primary);
  border-color: var(--border-color);
  color-scheme: dark;
}

/* ── golden ── */
html[data-theme="golden"] .billing-modal,
html[data-theme="golden"] .billing-table-wrap,
html[data-theme="golden"] .billing-stat {
  background: #1a1505;
  border-color: #b8860b;
}
html[data-theme="golden"] .billing-grand-total { background: #100e03; }
html[data-theme="golden"] .billing-input,
html[data-theme="golden"] .billing-select,
html[data-theme="golden"] .billing-date-input {
  background: var(--input-bg);
  color: var(--text-primary);
  border-color: var(--border-color);
  color-scheme: dark;
}

/* ── parchment ── */
html[data-theme="parchment"] .billing-page,
html[data-theme="parchment"] .billing-modal,
html[data-theme="parchment"] .billing-table-wrap { background: #fef9f0; }
html[data-theme="parchment"] .billing-input,
html[data-theme="parchment"] .billing-select,
html[data-theme="parchment"] .billing-date-input {
  background: var(--input-bg);
  color: var(--text-primary);
  border-color: var(--border-color);
  color-scheme: light;
}

/* ── pop ── */
html[data-theme="pop"] .billing-input,
html[data-theme="pop"] .billing-select,
html[data-theme="pop"] .billing-date-input {
  background: var(--input-bg);
  color: var(--text-primary);
  border-color: var(--border-color);
  color-scheme: light;
}

/* ── allwhite ── */
html[data-theme="allwhite"] .billing-mock-notice {
  background: #fffbf0;
  border-color: #e5e7eb;
  border-left-color: #d97706;
}
html[data-theme="allwhite"] .billing-input,
html[data-theme="allwhite"] .billing-select,
html[data-theme="allwhite"] .billing-date-input {
  background: var(--input-bg);
  color: var(--text-primary);
  border-color: var(--border-color);
  color-scheme: light;
}

/* ── Select arrow: restore background-image after shorthand overrides ──
   The background shorthand used in each theme block clears background-image.
   These rules run after (higher cascade position, same specificity) so they
   win and restore the correct arrow color per theme variant.               */

html[data-theme="cyberpunk"] .billing-select,
html[data-theme="jarvis"] .billing-select,
html[data-theme="rock"] .billing-select,
html[data-theme="golden"] .billing-select {
  background-color: var(--input-bg);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%239ca3af'%3E%3Cpath fill-rule='evenodd' d='M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z' clip-rule='evenodd'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.5rem center;
  background-size: 1rem;
}

html[data-theme="parchment"] .billing-select,
html[data-theme="pop"] .billing-select,
html[data-theme="allwhite"] .billing-select {
  background-color: var(--input-bg, #fff);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%236b7280'%3E%3Cpath fill-rule='evenodd' d='M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z' clip-rule='evenodd'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.5rem center;
  background-size: 1rem;
}
/* ─── Accounting.css ─────────────────────────────────────────────────────────
   Centro de Contabilidad — styles for all 8 themes
   ──────────────────────────────────────────────────────────────────────────── */

.accounting-page {
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

/* ── Header ── */

.accounting-header {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.accounting-header-icon {
  font-size: 2.5rem;
  color: var(--accent);
  flex-shrink: 0;
  line-height: 1;
}

.accounting-title {
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 0.25rem;
}

.accounting-subtitle {
  font-size: 0.9rem;
  color: var(--text-secondary);
  margin: 0;
  line-height: 1.5;
}

/* ── Section ── */

.accounting-section {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.accounting-section-hd {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding-bottom: 0.75rem;
  border-bottom: 2px solid var(--accent);
}

.accounting-section-icon {
  font-size: 1.5rem;
  color: var(--accent);
  margin-top: 0.15rem;
  flex-shrink: 0;
}

.accounting-section-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 0.2rem;
  text-transform: small-caps;
  letter-spacing: 0.03em;
}

.accounting-section-desc {
  font-size: 0.82rem;
  color: var(--text-secondary);
  margin: 0;
  line-height: 1.5;
}

/* ── Grid ── */

.accounting-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}

/* ── Card ── */

.accounting-card {
  background: var(--card-bg, var(--bg-secondary, #f8fafc));
  border: 1px solid var(--border-color);
  border-radius: 0.75rem;
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  transition: border-color 0.18s;
}

.accounting-card:hover {
  border-color: var(--accent);
}

.accounting-card--busy {
  opacity: 0.85;
  pointer-events: none;
}

.accounting-card--busy .accounting-gen-btn {
  pointer-events: all;
}

.accounting-card--done {
  border-color: #22c55e;
}

.accounting-card-top {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.accounting-card-title {
  font-size: 0.98rem;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
}

.accounting-card-legal {
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.accounting-card-last {
  font-size: 0.74rem;
  color: var(--text-secondary);
}

.accounting-card-desc {
  font-size: 0.83rem;
  color: var(--text-secondary);
  margin: 0;
  line-height: 1.55;
  flex: 1;
}

/* ── Controls ── */

.accounting-card-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-top: auto;
}

.accounting-input,
.accounting-select {
  padding: 0.38rem 0.55rem;
  border: 1px solid var(--border-color);
  border-radius: 0.4rem;
  font-size: 0.84rem;
  background: var(--input-bg, #fff);
  color: var(--text-primary);
  min-width: 0;
  transition: border-color 0.15s;
}

.accounting-input:focus,
.accounting-select:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.accounting-format-tag {
  display: inline-flex;
  align-items: center;
  font-size: 0.72rem;
  font-weight: 700;
  background: var(--bg-secondary, rgba(0,0,0,0.06));
  color: var(--text-primary);
  border: 1px solid var(--border-color);
  padding: 0.25rem 0.55rem;
  border-radius: 0.3rem;
  letter-spacing: 0.06em;
}

.accounting-gen-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.84rem;
  padding: 0.38rem 0.75rem;
  white-space: nowrap;
}

/* ── Spinner ── */

.accounting-spin {
  animation: accounting-rotate 0.9s linear infinite;
  display: inline-block;
}

@keyframes accounting-rotate {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* ── Error / Result ── */

.accounting-card-error {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.8rem;
  color: #ef4444;
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 0.4rem;
  padding: 0.4rem 0.65rem;
}

.accounting-card-result {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  font-size: 0.82rem;
  color: var(--text-primary);
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  border-radius: 0.4rem;
  padding: 0.4rem 0.65rem;
}

.accounting-result-icon {
  color: #22c55e;
  font-size: 1.05rem;
  flex-shrink: 0;
}

.accounting-result-filename {
  flex: 1;
  word-break: break-all;
  font-size: 0.78rem;
  color: var(--text-secondary);
}

.accounting-dl-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.79rem;
  padding: 0.28rem 0.55rem;
  margin-left: auto;
  flex-shrink: 0;
}

/* ── History ── */

.accounting-history {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.accounting-history-toggle {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--bg-secondary, rgba(0, 0, 0, 0.03));
  border: 1px solid var(--border-color);
  border-radius: 0.5rem;
  padding: 0.6rem 1rem;
  cursor: pointer;
  font-size: 0.9rem;
  color: var(--text-primary);
  width: 100%;
  text-align: left;
  transition: background 0.15s;
}

.accounting-history-toggle:hover {
  background: var(--bg-secondary, rgba(0, 0, 0, 0.06));
}

.accounting-history-toggle svg:last-child {
  margin-left: auto;
}

.accounting-history-msg {
  font-size: 0.85rem;
  color: var(--text-secondary);
  padding: 0.75rem 1rem;
  text-align: center;
}

.accounting-history-wrap {
  overflow-x: auto;
  border: 1px solid var(--border-color);
  border-radius: 0.5rem;
}

.accounting-history-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
}

.accounting-history-table th {
  padding: 0.6rem 0.85rem;
  background: var(--bg-secondary, #f1f5f9);
  color: var(--text-secondary);
  font-weight: 600;
  text-align: left;
  white-space: nowrap;
  border-bottom: 1px solid var(--border-color);
}

.accounting-history-table td {
  padding: 0.55rem 0.85rem;
  border-bottom: 1px solid var(--border-color);
  color: var(--text-primary);
}

.accounting-history-table tbody tr:last-child td {
  border-bottom: none;
}

.accounting-history-table tbody tr:hover td {
  background: var(--bg-secondary, rgba(0, 0, 0, 0.025));
}

.accounting-format-chip {
  display: inline-block;
  font-size: 0.71rem;
  font-weight: 700;
  background: var(--bg-secondary, rgba(0,0,0,0.06));
  color: var(--text-primary);
  border: 1px solid var(--border-color);
  padding: 0.15rem 0.42rem;
  border-radius: 0.25rem;
  letter-spacing: 0.05em;
}

/* ── Responsive ── */

@media (max-width: 900px) {
  .accounting-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 600px) {
  .accounting-page {
    padding: 1rem;
  }

  .accounting-title {
    font-size: 1.4rem;
  }

  .accounting-header {
    align-items: flex-start;
  }

  .accounting-card-controls {
    flex-direction: column;
    align-items: stretch;
  }

  .accounting-input,
  .accounting-select {
    width: 100%;
  }

  .accounting-gen-btn {
    justify-content: center;
    width: 100%;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Theme overrides
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── cyberpunk ── */

html[data-theme="cyberpunk"] .accounting-card {
  background: #0d0d1a;
  border-color: #00ff4133;
}
html[data-theme="cyberpunk"] .accounting-card:hover { border-color: #00ff41; }
html[data-theme="cyberpunk"] .accounting-card--done { border-color: #00ff41; }
html[data-theme="cyberpunk"] .accounting-card-error  { background: #1a0000; border-color: #ff000055; color: #ff6666; }
html[data-theme="cyberpunk"] .accounting-card-result { background: #001a05; border-color: #00ff4155; }
html[data-theme="cyberpunk"] .accounting-history-toggle { background: #0d0d1a; }
html[data-theme="cyberpunk"] .accounting-history-toggle:hover { background: #1a1a2e; }
html[data-theme="cyberpunk"] .accounting-history-wrap { border-color: #00ff4133; }
html[data-theme="cyberpunk"] .accounting-history-table th { background: #0a0a14; }
html[data-theme="cyberpunk"] .accounting-input,
html[data-theme="cyberpunk"] .accounting-select {
  background: var(--input-bg);
  color: var(--text-primary);
  border-color: var(--border-color);
  color-scheme: dark;
}


/* ── jarvis ── */

html[data-theme="jarvis"] .accounting-card {
  background: #0a1628;
  border-color: #1e3a5f;
}
html[data-theme="jarvis"] .accounting-card:hover { border-color: var(--accent); }
html[data-theme="jarvis"] .accounting-card--done { border-color: #22c55e; }
html[data-theme="jarvis"] .accounting-card-error  { background: #1a0008; border-color: #ff000055; color: #ff8888; }
html[data-theme="jarvis"] .accounting-card-result { background: #001a08; border-color: #22c55e55; }
html[data-theme="jarvis"] .accounting-history-toggle { background: #0a1628; }
html[data-theme="jarvis"] .accounting-history-toggle:hover { background: #0d1f3a; }
html[data-theme="jarvis"] .accounting-history-wrap { border-color: #1e3a5f; }
html[data-theme="jarvis"] .accounting-history-table th { background: #060f1e; }
html[data-theme="jarvis"] .accounting-input,
html[data-theme="jarvis"] .accounting-select {
  background: var(--input-bg);
  color: var(--text-primary);
  border-color: var(--border-color);
  color-scheme: dark;
}


/* ── rock ── */

html[data-theme="rock"] .accounting-card {
  background: #0d0000;
  border-color: #8b000033;
}
html[data-theme="rock"] .accounting-card:hover { border-color: #8b0000; }
html[data-theme="rock"] .accounting-card--done { border-color: #22c55e; }
html[data-theme="rock"] .accounting-card-error  { background: #1a0000; border-color: #ff000055; color: #ff6666; }
html[data-theme="rock"] .accounting-card-result { background: #001a05; border-color: #22c55e55; }
html[data-theme="rock"] .accounting-history-toggle { background: #0d0000; }
html[data-theme="rock"] .accounting-history-toggle:hover { background: #1a0000; }
html[data-theme="rock"] .accounting-history-wrap { border-color: #8b000033; }
html[data-theme="rock"] .accounting-history-table th { background: #080000; }
html[data-theme="rock"] .accounting-input,
html[data-theme="rock"] .accounting-select {
  background: var(--input-bg);
  color: var(--text-primary);
  border-color: var(--border-color);
  color-scheme: dark;
}


/* ── golden ── */

html[data-theme="golden"] .accounting-card {
  background: #1a1505;
  border-color: #b8860b33;
}
html[data-theme="golden"] .accounting-card:hover { border-color: #b8860b; }
html[data-theme="golden"] .accounting-card--done { border-color: #22c55e; }
html[data-theme="golden"] .accounting-card-error  { background: #1a0000; border-color: #ff000055; color: #ff8888; }
html[data-theme="golden"] .accounting-card-result { background: #001a05; border-color: #22c55e55; }
html[data-theme="golden"] .accounting-history-toggle { background: #1a1505; }
html[data-theme="golden"] .accounting-history-toggle:hover { background: #252005; }
html[data-theme="golden"] .accounting-history-wrap { border-color: #b8860b33; }
html[data-theme="golden"] .accounting-history-table th { background: #100e03; }
html[data-theme="golden"] .accounting-input,
html[data-theme="golden"] .accounting-select {
  background: var(--input-bg);
  color: var(--text-primary);
  border-color: var(--border-color);
  color-scheme: dark;
}


/* ── parchment ── */

html[data-theme="parchment"] .accounting-card { background: #fef9f0; }
html[data-theme="parchment"] .accounting-history-toggle { background: #fef9f0; }
html[data-theme="parchment"] .accounting-history-table th { background: #f5e6d0; }
html[data-theme="parchment"] .accounting-input,
html[data-theme="parchment"] .accounting-select {
  background: var(--input-bg, #fff);
  color: var(--text-primary);
  border-color: var(--border-color);
  color-scheme: light;
}

/* ── pop ── */

html[data-theme="pop"] .accounting-input,
html[data-theme="pop"] .accounting-select {
  background: var(--input-bg, #fff);
  color: var(--text-primary);
  border-color: var(--border-color);
  color-scheme: light;
}

/* ── allwhite ── */

html[data-theme="allwhite"] .accounting-input,
html[data-theme="allwhite"] .accounting-select {
  background: var(--input-bg, #fff);
  color: var(--text-primary);
  border-color: var(--border-color);
  color-scheme: light;
}
/* ── ProductImages.css ───────────────────────────────────────────────────────
   Gestión de Imágenes - full theme support (8 themes).
   Uses CSS variables + explicit overrides per theme.
   ─────────────────────────────────────────────────────────────────────────── */

/* ── Root layout ─────────────────────────────────────────────────────────────── */
.pi-root {
  display: flex;
  height: calc(100vh - 64px);
  overflow: hidden;
  background: var(--bg-primary);
  color: var(--text-primary);
}

/* ── Sidebar ─────────────────────────────────────────────────────────────────── */
.pi-sidebar {
  width: 320px;
  min-width: 260px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--border-color, rgba(0,0,0,0.1));
  background: var(--bg-secondary, var(--bg-primary));
  overflow: hidden;
}

.pi-sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px;
  border-bottom: 1px solid var(--border-color, rgba(0,0,0,0.1));
}

.pi-sidebar-title {
  font-size: 1rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
}

.pi-sidebar-subtitle {
  padding: 8px 16px;
  font-size: 0.78rem;
  opacity: 0.65;
  margin: 0;
}

.pi-refresh-btn {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-primary);
  opacity: 0.7;
  padding: 4px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  font-size: 1.2rem;
  transition: opacity 0.2s;
}
.pi-refresh-btn:hover { opacity: 1; }
.pi-refresh-btn:disabled { opacity: 0.4; cursor: default; }

.pi-spin {
  animation: pi-spin 1s linear infinite;
}
@keyframes pi-spin {
  to { transform: rotate(360deg); }
}

/* ── Product list ─────────────────────────────────────────────────────────────── */
.pi-product-list {
  list-style: none;
  padding: 0;
  margin: 0;
  overflow-y: auto;
  flex: 1;
}

@keyframes pi-slide-out {
  0%   { opacity: 1; transform: translateX(0); max-height: 80px; }
  40%  { opacity: 0.6; transform: translateX(6px); }
  100% { opacity: 0; transform: translateX(100%); max-height: 0; padding-top: 0; padding-bottom: 0; border-bottom-width: 0; }
}

.pi-product-item {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 10px 14px;
  cursor: pointer;
  border-bottom: 1px solid var(--border-color, rgba(0,0,0,0.07));
  transition: background 0.15s;
  overflow: hidden;
}
.pi-product-item:hover { background: var(--bg-hover, rgba(0,0,0,0.05)); }
.pi-product-item.active { background: var(--accent-subtle, rgba(59,130,246,0.12)); }
.pi-product-item.leaving {
  animation: pi-slide-out 0.6s cubic-bezier(0.4, 0, 0.6, 1) forwards;
  pointer-events: none;
}

.pi-product-thumb {
  width: 48px;
  height: 48px;
  border-radius: 6px;
  overflow: hidden;
  flex-shrink: 0;
  background: var(--bg-muted, #f3f4f6);
  display: flex;
  align-items: center;
  justify-content: center;
}
.pi-product-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.pi-no-img-icon {
  font-size: 1.4rem;
  opacity: 0.35;
}

.pi-product-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.pi-product-title {
  font-size: 0.85rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pi-product-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  font-size: 0.72rem;
  opacity: 0.65;
}

.pi-vendor { font-weight: 600; }

/* ── Main panel ──────────────────────────────────────────────────────────────── */
.pi-main {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

.pi-no-selection {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  opacity: 0.5;
  padding: 48px;
  text-align: center;
}
.pi-no-selection-icon {
  font-size: 3rem;
}

.pi-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 32px 16px;
  text-align: center;
  opacity: 0.55;
  font-size: 0.85rem;
}
.pi-empty-icon { font-size: 2rem; color: var(--accent, #3b82f6); }

/* ── Detail ──────────────────────────────────────────────────────────────────── */
.pi-detail {
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

.pi-detail-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 20px 24px 12px;
  border-bottom: 1px solid var(--border-color, rgba(0,0,0,0.1));
  gap: 12px;
}

.pi-detail-title {
  font-size: 1.15rem;
  font-weight: 700;
  margin: 0 0 4px;
}

.pi-detail-meta {
  font-size: 0.8rem;
  opacity: 0.65;
  margin: 0;
}

.pi-code {
  font-family: monospace;
  font-size: 0.75rem;
  background: var(--bg-muted, rgba(0,0,0,0.07));
  padding: 1px 5px;
  border-radius: 4px;
}

.pi-draft-badge {
  background: #f59e0b;
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 12px;
  white-space: nowrap;
  flex-shrink: 0;
}
.pi-draft-badge.active {
  background: #22c55e;
}

.pi-detail-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.pi-activate-btn {
  background: #22c55e;
  color: #052e16;
  border: none;
  border-radius: 8px;
  padding: 6px 14px;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s;
}
.pi-activate-btn:hover:not(:disabled) { background: #16a34a; color: #052e16; }
.pi-activate-btn:disabled { opacity: 0.6; cursor: not-allowed; }

/* ── Status filter tabs ──────────────────────────────────────────────────────── */
.pi-status-tabs {
  display: flex;
  border-bottom: 1px solid var(--border-color, rgba(0,0,0,0.1));
}

.pi-status-tab {
  flex: 1;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  padding: 8px 4px;
  font-size: 0.78rem;
  font-weight: 500;
  cursor: pointer;
  color: var(--text-secondary, rgba(0,0,0,0.55));
  transition: color 0.15s, border-color 0.15s;
  white-space: nowrap;
}
.pi-status-tab:hover { color: var(--text-primary); }
.pi-status-tab.active {
  color: var(--accent, #3b82f6);
  border-bottom-color: var(--accent, #3b82f6);
  font-weight: 700;
}

/* ── Sort row ────────────────────────────────────────────────────────────────── */
.pi-sort-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-bottom: 1px solid var(--border-color, rgba(0,0,0,0.07));
}

.pi-sort-label {
  font-size: 0.74rem;
  opacity: 0.65;
  white-space: nowrap;
  flex-shrink: 0;
}

.pi-sort-select {
  flex: 1;
  font-size: 0.76rem;
  padding: 3px 6px;
  border: 1px solid var(--border-color, rgba(0,0,0,0.15));
  border-radius: 6px;
  background: var(--bg-primary);
  color: var(--text-primary);
  cursor: pointer;
  outline: none;
}
.pi-sort-select:focus { border-color: var(--accent, #3b82f6); }

/* ── "Regresar a borrador" button & inline confirm ───────────────────────────── */
.pi-draft-btn {
  background: #f59e0b;
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 6px 12px;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 5px;
  transition: background 0.15s;
}
.pi-draft-btn:hover:not(:disabled) { background: #d97706; }
.pi-draft-btn:disabled { opacity: 0.6; cursor: not-allowed; }

.pi-draft-confirm-group {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.pi-confirm-text {
  font-size: 0.8rem;
  font-weight: 500;
  white-space: nowrap;
}

.pi-confirm-btn-cancel {
  background: none;
  border: 1px solid var(--border-color, rgba(0,0,0,0.2));
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 0.78rem;
  cursor: pointer;
  color: var(--text-primary);
  transition: background 0.15s;
}
.pi-confirm-btn-cancel:hover:not(:disabled) { background: var(--bg-hover, rgba(0,0,0,0.05)); }
.pi-confirm-btn-cancel:disabled { opacity: 0.5; cursor: not-allowed; }

.pi-confirm-btn-ok {
  background: #f59e0b;
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 4px 12px;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 4px;
  transition: background 0.15s;
}
.pi-confirm-btn-ok:hover:not(:disabled) { background: #d97706; }
.pi-confirm-btn-ok:disabled { opacity: 0.6; cursor: not-allowed; }

/* ── List status badge (visible in "Todos" filter) ───────────────────────────── */
.pi-list-status-badge {
  font-size: 0.68rem;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 10px;
  white-space: nowrap;
  opacity: 1 !important;
}
.pi-list-status-badge.active { background: #22c55e; color: #052e16; }
.pi-list-status-badge.draft  { background: #f59e0b; color: #fff; } ─────────────────────────────────────────────────── */
.pi-secure-backdrop {
  position: fixed;
  inset: 0;
  background: radial-gradient(circle at top, rgba(15, 23, 42, 0.65), rgba(2, 6, 23, 0.85));
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1200;
  padding: 1rem;
}

.pi-secure-modal {
  width: 100%;
  max-width: 520px;
  border-radius: 12px;
  background: linear-gradient(180deg, #0f172a 0%, #111827 100%);
  border: 1px solid rgba(148, 163, 184, 0.3);
  box-shadow: 0 24px 70px rgba(2, 6, 23, 0.5);
  color: #e5e7eb;
  overflow: hidden;
}

.pi-secure-header {
  display: flex;
  gap: 0.8rem;
  align-items: center;
  padding: 1rem 1.15rem;
  border-bottom: 1px solid rgba(148, 163, 184, 0.2);
  background: rgba(15, 23, 42, 0.6);
  position: relative;
  overflow: hidden;
}
.pi-secure-header::after {
  content: '';
  position: absolute;
  left: -35%;
  top: 0;
  width: 30%;
  height: 100%;
  background: linear-gradient(90deg, rgba(56, 189, 248, 0), rgba(56, 189, 248, 0.3), rgba(56, 189, 248, 0));
  animation: piSecureScan 2.4s linear infinite;
}
@keyframes piSecureScan {
  from { left: -35%; }
  to { left: 110%; }
}
.pi-secure-header h3 { margin: 0; font-size: 1rem; color: #f8fafc; }
.pi-secure-header p { margin: 0.2rem 0 0; font-size: 0.8rem; color: #94a3b8; }
.pi-secure-icon { font-size: 1.6rem; color: #38bdf8; flex-shrink: 0; }

.pi-secure-body {
  padding: 1.1rem 1.15rem;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}
.pi-secure-body p { margin: 0; line-height: 1.45; color: #cbd5e1; font-size: 0.92rem; }
.pi-secure-body strong { color: #f1f5f9; }

.pi-secure-arm {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  font-size: 0.86rem;
  color: #e2e8f0;
  cursor: pointer;
}
.pi-secure-arm input { margin-top: 0.2rem; }

.pi-secure-visual-check { display: flex; flex-direction: column; gap: 0.45rem; }
.pi-secure-visual-check > span { font-size: 0.8rem; color: #93c5fd; }
.pi-secure-visual-options { display: flex; gap: 0.55rem; }

.pi-secure-visual-btn {
  width: 44px;
  height: 44px;
  border-radius: 8px;
  border: 1px solid rgba(125, 211, 252, 0.35);
  background: rgba(15, 23, 42, 0.7);
  color: #e2e8f0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.35rem;
  cursor: pointer;
}
.pi-secure-visual-btn.selected {
  border-color: #38bdf8;
  color: #38bdf8;
  box-shadow: 0 0 0 2px rgba(56, 189, 248, 0.2);
}

.pi-secure-countdown {
  margin: 0;
  color: #fbbf24;
  font-size: 0.82rem;
  font-weight: 600;
}

.pi-secure-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.65rem;
  padding: 1rem 1.15rem 1.1rem;
  border-top: 1px solid rgba(148, 163, 184, 0.2);
}

.pi-secure-btn-ghost {
  border: none;
  border-radius: 7px;
  padding: 0.5rem 0.9rem;
  font-size: 0.86rem;
  font-weight: 600;
  cursor: pointer;
  background: rgba(100, 116, 139, 0.25);
  color: #e2e8f0;
}
.pi-secure-btn-confirm {
  border: none;
  border-radius: 7px;
  padding: 0.5rem 0.9rem;
  font-size: 0.86rem;
  font-weight: 600;
  cursor: pointer;
  background: var(--accent, #3b82f6);
  color: var(--accent-fg, #fff);
}
.pi-secure-btn-confirm:disabled { opacity: 0.55; cursor: not-allowed; }

/* ── Tabs ────────────────────────────────────────────────────────────────────── */
.pi-tabs {
  display: flex;
  border-bottom: 2px solid var(--border-color, rgba(0,0,0,0.1));
  padding: 0 24px;
  background: var(--bg-secondary, var(--bg-primary));
}

.pi-tab {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 12px 16px;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  cursor: pointer;
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--text-primary);
  opacity: 0.6;
  transition: opacity 0.15s, border-color 0.15s;
}
.pi-tab:hover { opacity: 0.9; }
.pi-tab.active {
  opacity: 1;
  border-bottom-color: var(--accent, #3b82f6);
  color: var(--accent, #3b82f6);
}

/* Badge count on tab button */
.pi-tab-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: var(--accent, #3b82f6);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1;
  margin-left: 2px;
}

/* ── Sections ────────────────────────────────────────────────────────────────── */
.pi-images-tab {
  padding: 20px 24px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.pi-always-visible {
  padding: 0 24px 20px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.pi-section {
  background: var(--card-bg, var(--bg-secondary, #fff));
  border-radius: 10px;
  padding: 18px;
  border: 1px solid var(--border-color, rgba(0,0,0,0.09));
}

.pi-section-title {
  font-size: 0.9rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 14px;
}

.pi-section-hint {
  font-size: 0.8rem;
  opacity: 0.65;
  margin: -8px 0 12px;
}

.pi-no-images {
  font-size: 0.85rem;
  opacity: 0.6;
  margin: 0;
}

/* ── Image cards grid ────────────────────────────────────────────────────────── */
.pi-images-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 12px;
}

.pi-image-card {
  border-radius: 8px;
  overflow: hidden;
  transition: box-shadow 0.15s;
  /* Sin borde ni fondo — las imágenes se muestran limpias */
}
.pi-image-card.clickable { cursor: pointer; }
.pi-image-card.clickable:hover { box-shadow: 0 0 0 2px var(--accent, #3b82f6); }
.pi-image-card.selected {
  box-shadow: 0 0 0 3px var(--accent, #3b82f6);
}

.pi-image-thumb {
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
}
.pi-image-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.pi-img-zoom-btn {
  position: absolute;
  bottom: 6px;
  right: 6px;
  background: rgba(0,0,0,0.55);
  color: #fff;
  border: none;
  border-radius: 50%;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  cursor: zoom-in;
  opacity: 0;
  transition: opacity 0.15s;
  z-index: 2;
}
.pi-image-thumb:hover .pi-img-zoom-btn { opacity: 1; }
.pi-agent-img-wrap .pi-img-zoom-btn { bottom: 6px; right: 6px; }
.pi-agent-img-wrap:hover .pi-img-zoom-btn { opacity: 1; }
.pi-image-selected-badge {
  position: absolute;
  top: 6px;
  right: 6px;
  background: var(--accent, #3b82f6);
  color: #fff;
  border-radius: 50%;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
}

.pi-image-variants {
  padding: 4px 6px;
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
}
.pi-image-unassigned {
  display: block;
  padding: 4px 6px;
  font-size: 0.7rem;
  opacity: 0.5;
}

.pi-variant-badge {
  font-size: 0.68rem;
  background: var(--accent, #3b82f6);
  color: #fff;
  padding: 1px 5px;
  border-radius: 8px;
  white-space: nowrap;
}

/* ── Variants list ───────────────────────────────────────────────────────────── */
.pi-variants-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.pi-variant-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1.5px solid var(--border-color, rgba(0,0,0,0.09));
  background: var(--bg-primary);
  transition: border-color 0.15s, background 0.15s;
}
.pi-variant-row.clickable { cursor: pointer; }
.pi-variant-row.clickable:hover { border-color: var(--accent, #3b82f6); }
.pi-variant-row.selected {
  border-color: var(--accent, #3b82f6);
  background: var(--accent-subtle, rgba(59,130,246,0.07));
}

.pi-variant-check {
  width: 20px;
  flex-shrink: 0;
  color: var(--accent, #3b82f6);
  font-size: 1.1rem;
  display: flex;
  align-items: center;
}

.pi-variant-thumb {
  width: 36px;
  height: 36px;
  border-radius: 5px;
  overflow: hidden;
  flex-shrink: 0;
  background: var(--bg-muted, #f3f4f6);
  display: flex;
  align-items: center;
  justify-content: center;
}
.pi-variant-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.pi-variant-thumb.has-img {
  cursor: zoom-in;
  position: relative;
}
.pi-thumb-zoom-hint {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  background: rgba(0,0,0,0.45);
  opacity: 0;
  transition: opacity 0.15s;
  border-radius: inherit;
}
.pi-variant-thumb.has-img:hover .pi-thumb-zoom-hint { opacity: 1; }
.pi-variant-thumb.uploading {
  background: var(--accent-subtle, rgba(59,130,246,0.1));
  border: 1.5px solid var(--accent, #3b82f6);
}
.pi-variant-upload-spinner {
  display: inline-block;
  width: 18px;
  height: 18px;
  border: 2.5px solid var(--accent, #3b82f6);
  border-top-color: transparent;
  border-radius: 50%;
  animation: pi-spin 0.7s linear infinite;
  flex-shrink: 0;
}
.pi-variant-row.loading {
  opacity: 0.7;
  pointer-events: none;
}
.pi-no-img-sm { font-size: 1rem; opacity: 0.35; }

/* ── Zoom modal ──────────────────────────────────────────────────────────────── */
.pi-zoom-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.75);
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  cursor: zoom-out;
}
.pi-zoom-modal {
  position: relative;
  max-width: min(90vw, 700px);
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  cursor: default;
}
.pi-zoom-img {
  max-width: 100%;
  max-height: calc(90vh - 80px);
  object-fit: contain;
  border-radius: 6px;
}
.pi-zoom-label {
  color: #fff;
  font-size: 0.9rem;
  font-weight: 600;
  text-align: center;
  margin: 0;
}
.pi-zoom-close {
  position: absolute;
  top: -12px;
  right: -12px;
  background: rgba(0,0,0,0.7);
  color: #fff;
  border: none;
  border-radius: 50%;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  cursor: pointer;
  z-index: 1;
  transition: background 0.15s;
}
.pi-zoom-close:hover { background: rgba(200,0,0,0.8); }

.pi-variant-details {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.pi-variant-title { font-size: 0.88rem; font-weight: 600; }
.pi-variant-sku { font-size: 0.72rem; opacity: 0.55; font-family: monospace; }

.pi-variant-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 3px;
}
.pi-variant-price { font-size: 0.85rem; font-weight: 600; }

.pi-img-status {
  font-size: 0.7rem;
  padding: 1px 6px;
  border-radius: 8px;
  font-weight: 600;
}
.pi-img-status.ok { background: rgba(34,197,94,0.15); color: #16a34a; }
.pi-img-status.missing { background: rgba(239,68,68,0.12); color: #dc2626; }

/* ── Assign actions section ──────────────────────────────────────────────────── */
.pi-actions-section { display: flex; flex-direction: column; gap: 14px; }

.pi-assign-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 12px;
  border-radius: 8px;
  background: var(--accent-subtle, rgba(59,130,246,0.07));
  border: 1px solid var(--accent, #3b82f6);
}
.pi-assign-preview {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  font-weight: 600;
}
.pi-assign-preview img {
  width: 36px;
  height: 36px;
  border-radius: 5px;
  object-fit: cover;
}
.pi-assign-arrow { font-size: 1.2rem; opacity: 0.5; }
.pi-assign-targets { display: flex; flex-wrap: wrap; gap: 4px; flex: 1; }
.pi-assign-btn {
  background: var(--accent, #3b82f6);
  color: #fff;
  border: none;
  padding: 7px 18px;
  border-radius: 7px;
  cursor: pointer;
  font-weight: 600;
  font-size: 0.85rem;
  transition: opacity 0.15s;
}
.pi-assign-btn:disabled { opacity: 0.5; cursor: default; }
.pi-assign-btn:not(:disabled):hover { opacity: 0.85; }

.pi-add-image-row { display: flex; flex-direction: column; gap: 6px; }
.pi-add-label { font-size: 0.83rem; font-weight: 600; }
.pi-add-input-group { display: flex; gap: 8px; }
.pi-add-input {
  flex: 1;
  padding: 8px 12px;
  border-radius: 7px;
  border: 1.5px solid var(--border-color, rgba(0,0,0,0.15));
  background: var(--bg-primary);
  color: var(--text-primary);
  font-size: 0.85rem;
}
.pi-add-input:focus {
  outline: none;
  border-color: var(--accent, #3b82f6);
}
.pi-add-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--accent, #3b82f6);
  color: #fff;
  border: none;
  padding: 8px 16px;
  border-radius: 7px;
  cursor: pointer;
  font-weight: 600;
  font-size: 0.85rem;
  white-space: nowrap;
  transition: opacity 0.15s;
}
.pi-add-btn:disabled { opacity: 0.5; cursor: default; }
.pi-add-btn:not(:disabled):hover { opacity: 0.85; }
.pi-add-hint { font-size: 0.75rem; opacity: 0.6; margin: 0; }
.pi-url-targets { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 6px; }
.pi-url-targets-label { font-size: 0.75rem; opacity: 0.7; margin-right: 2px; }

.pi-assign-msg {
  padding: 10px 14px;
  border-radius: 7px;
  font-size: 0.85rem;
  font-weight: 600;
}
.pi-assign-msg.ok { background: rgba(34,197,94,0.12); color: #16a34a; border: 1px solid rgba(34,197,94,0.3); }
.pi-assign-msg.error { background: rgba(239,68,68,0.1); color: #dc2626; border: 1px solid rgba(239,68,68,0.3); }

.pi-upload-progress {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 7px;
  font-size: 0.83rem;
  font-weight: 600;
  background: rgba(59,130,246,0.1);
  color: #2563eb;
  border: 1px solid rgba(59,130,246,0.25);
}
.pi-upload-progress--top,
.pi-assign-msg--top {
  margin: 0 24px;
  border-radius: 8px;
}

/* ── AI Agent panel ──────────────────────────────────────────────────────────── */
.pi-agent-panel {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 20px 24px;
  flex: 1;
}

.pi-agent-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 1rem;
  font-weight: 700;
}
.pi-agent-icon {
  color: var(--accent, #3b82f6);
  font-size: 1.3rem;
}

.pi-agent-variant-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
}
.pi-agent-chips-label {
  font-size: 0.75rem;
  opacity: 0.65;
  margin-right: 2px;
  white-space: nowrap;
}
.pi-agent-chip {
  padding: 4px 10px;
  border-radius: 20px;
  border: 1.5px solid var(--border-color, rgba(0,0,0,0.2));
  background: transparent;
  color: var(--text-primary);
  font-size: 0.78rem;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.pi-agent-chip:hover:not(:disabled) {
  border-color: var(--accent, #3b82f6);
  background: rgba(59,130,246,0.08);
}
.pi-agent-chip.active {
  background: var(--accent, #3b82f6);
  color: #fff;
  border-color: var(--accent, #3b82f6);
}
.pi-agent-chip:disabled { opacity: 0.5; cursor: default; }

.pi-agent-query {
  display: flex;
  gap: 8px;
}
.pi-agent-input {
  flex: 1;
  padding: 10px 14px;
  border-radius: 8px;
  border: 1.5px solid var(--border-color, rgba(0,0,0,0.15));
  background: var(--bg-primary);
  color: var(--text-primary);
  font-size: 0.9rem;
}
.pi-agent-input:focus {
  outline: none;
  border-color: var(--accent, #3b82f6);
}
.pi-agent-input:disabled { opacity: 0.6; }

.pi-agent-send,
.pi-agent-stop {
  padding: 0 14px;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  font-size: 1.2rem;
  display: flex;
  align-items: center;
  transition: opacity 0.15s;
}
.pi-agent-send {
  background: var(--accent, #3b82f6);
  color: #fff;
}
.pi-agent-send:disabled { opacity: 0.5; cursor: default; }
.pi-agent-send:not(:disabled):hover { opacity: 0.85; }
.pi-agent-stop { background: #ef4444; color: #fff; }
.pi-agent-stop:hover { opacity: 0.85; }

.pi-agent-tool-status {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.82rem;
  opacity: 0.7;
}
.pi-spinner {
  width: 14px;
  height: 14px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: pi-spin 0.8s linear infinite;
  flex-shrink: 0;
}

.pi-agent-error {
  padding: 10px 14px;
  border-radius: 7px;
  background: rgba(239,68,68,0.1);
  color: #dc2626;
  font-size: 0.85rem;
  border: 1px solid rgba(239,68,68,0.3);
}

.pi-agent-response {
  background: var(--card-bg, var(--bg-secondary, #fff));
  border: 1px solid var(--border-color, rgba(0,0,0,0.09));
  border-radius: 10px;
  padding: 8px 12px;
}
.pi-agent-text-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  color: var(--text-secondary, #6b7280);
  font-size: 0.8rem;
  cursor: pointer;
  padding: 4px 0;
  opacity: 0.75;
  transition: opacity 0.15s;
}
.pi-agent-text-toggle:hover { opacity: 1; color: var(--accent, #3b82f6); }
.pi-agent-text-toggle svg { font-size: 1rem; }
.pi-agent-text {
  white-space: pre-wrap;
  word-break: break-word;
  font-size: 0.88rem;
  line-height: 1.6;
  margin: 0;
}
.pi-cursor {
  display: inline-block;
  width: 2px;
  height: 1em;
  background: var(--text-primary);
  animation: pi-blink 0.8s step-end infinite;
  vertical-align: text-bottom;
  margin-left: 2px;
}
@keyframes pi-blink {
  50% { opacity: 0; }
}

.pi-agent-results { display: flex; flex-direction: column; gap: 10px; }
.pi-agent-results-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.pi-agent-results-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.88rem;
  font-weight: 700;
  margin: 0;
}
.pi-agent-clear-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  background: none;
  border: 1px solid var(--border-color, rgba(0,0,0,0.15));
  border-radius: 6px;
  color: var(--text-secondary, #6b7280);
  font-size: 0.78rem;
  padding: 3px 10px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.pi-agent-clear-btn:hover { background: rgba(239,68,68,0.08); color: #ef4444; border-color: #ef4444; }
/* URL drag preview — wrap for zoom button */
.pi-url-preview-img-wrap {
  position: relative;
  overflow: hidden;
}
.pi-url-preview-img-wrap .pi-img-zoom-btn { bottom: 4px; right: 4px; }
.pi-url-preview-img-wrap:hover .pi-img-zoom-btn { opacity: 1; }
.pi-agent-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 12px;
}

.pi-agent-img-card {
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  /* Sin borde ni fondo — imágenes limpias */
}
.pi-agent-img-card img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
}
.pi-agent-img-dims {
  padding: 3px 8px 4px;
  font-size: 0.68rem;
  opacity: 0.55;
  text-align: center;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
}
.pi-use-image-btn {
  padding: 6px 10px;
  background: var(--accent, #3b82f6);
  color: #fff;
  border: none;
  cursor: pointer;
  font-size: 0.76rem;
  font-weight: 600;
  transition: opacity 0.15s, background 0.15s;
}
.pi-use-image-btn:hover { opacity: 0.85; }
.pi-use-image-btn.selected {
  background: #16a34a;
  color: #fff;
}
.pi-use-image-btn.selected:hover { opacity: 0.85; }

/* ── Agent image queue — remove button below card ──────────────────────────── */
.pi-queue-remove-inline-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  width: 100%;
  margin-top: 4px;
  padding: 3px 6px;
  border: 1px solid var(--border-color, rgba(0,0,0,0.15));
  border-radius: 5px;
  background: transparent;
  color: var(--text-secondary, #6b7280);
  font-size: 0.68rem;
  cursor: pointer;
  transition: background 0.13s, color 0.13s, border-color 0.13s;
}
.pi-queue-remove-inline-btn:hover {
  background: rgba(239,68,68,0.1);
  border-color: #ef4444;
  color: #ef4444;
}

/* ── Similar products images ───────────────────────────────────────────────── */
.pi-similar-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-primary);
  font-size: 0.88rem;
  font-weight: 600;
  padding: 0;
  text-align: left;
}
.pi-similar-toggle-arrow {
  margin-left: auto;
  font-size: 0.72rem;
  opacity: 0.6;
}
.pi-similar-card-wrap {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.pi-similar-product-name {
  color: var(--text-secondary, #6b7280);
  font-size: 0.68rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 0 2px;
}

/* ── Drag & Drop ─────────────────────────────────────────────────────────────── */

/* Image cards: draggable cursor + floating handle */
.pi-image-card { position: relative; }
.pi-image-card[draggable="true"] { cursor: grab; }
.pi-image-card[draggable="true"]:active { cursor: grabbing; }

/* Source card fades and shrinks while being dragged — shows the "slot" it left */
.pi-image-card.dragging {
  opacity: 0.25;
  transform: scale(0.93);
  filter: grayscale(0.5);
  transition: opacity 0.12s, transform 0.12s, filter 0.12s;
  box-shadow: inset 0 0 0 2px var(--accent, #3b82f6);
  border-radius: 8px;
}

.pi-drag-handle {
  position: absolute;
  top: 5px;
  left: 5px;
  background: rgba(0,0,0,0.55);
  color: #fff;
  border-radius: 4px;
  padding: 3px 4px;
  font-size: 1rem;
  line-height: 1;
  display: flex;
  align-items: center;
  opacity: 0;
  z-index: 2;
  transition: opacity 0.15s, background 0.15s;
  cursor: grab;
  touch-action: none;
}
.pi-image-card[draggable="true"]:hover .pi-drag-handle { opacity: 1; }
/* On touch devices: always show handle so users know it is draggable */
@media (hover: none) {
  .pi-image-card[draggable="true"] .pi-drag-handle {
    opacity: 0.9;
    background: rgba(59,130,246,0.88);
    padding: 5px 6px;
    font-size: 1.1rem;
  }
}

/* Touch drag clone — floating card that follows the finger */
@property --pi-clone-angle {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}
.pi-touch-drag-clone {
  position: fixed;
  width: 126px;
  height: 126px;
  border-radius: 17px;
  overflow: hidden;
  pointer-events: none;
  z-index: 9999;
  box-shadow: 0 24px 60px rgba(0,0,0,0.6), 0 8px 24px rgba(0,0,0,0.4);
  transform: rotate(-4deg) scale(1.08);
  background: conic-gradient(from var(--pi-clone-angle),
    #3b82f6 0%, #93c5fd 18%, rgba(255,255,255,0.4) 25%, #60a5fa 35%, #1d4ed8 50%,
    #3b82f6 65%, #93c5fd 80%, rgba(255,255,255,0.4) 87%, #3b82f6 100%
  );
  animation: pi-clone-spin 0.9s linear infinite;
}
@keyframes pi-clone-spin {
  to { --pi-clone-angle: 360deg; }
}
.pi-touch-drag-clone-inner {
  position: absolute;
  inset: 3px;
  border-radius: 14px;
  overflow: hidden;
  background: #111;
}
.pi-touch-drag-clone-inner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Desktop drag ghost — same motion-frame look (static snapshot for browser ghost image) */
.pi-drag-ghost {
  width: 126px;
  height: 126px;
  border-radius: 17px;
  overflow: hidden;
  background: conic-gradient(from 45deg,
    #3b82f6 0%, #93c5fd 18%, rgba(255,255,255,0.35) 25%,
    #60a5fa 35%, #1d4ed8 50%,
    #3b82f6 65%, #93c5fd 80%, rgba(255,255,255,0.35) 87%, #3b82f6 100%
  );
  box-shadow: 0 24px 60px rgba(0,0,0,0.55), 0 8px 20px rgba(0,0,0,0.35),
              0 0 20px rgba(59,130,246,0.45);
  transform: rotate(-3deg);
}
.pi-drag-ghost-inner {
  position: absolute;
  inset: 3px;
  border-radius: 14px;
  overflow: hidden;
  background: #111;
}
.pi-drag-ghost-inner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Variant rows: drop zones */
.pi-variant-row { position: relative; }
.pi-variant-row.is-drop-target {
  border-style: dashed !important;
  animation: pi-drop-target-breathe 1.4s ease-in-out infinite;
}
@keyframes pi-drop-target-breathe {
  0%, 100% { box-shadow: none; }
  50% { box-shadow: 0 0 0 2px rgba(59,130,246,0.25); }
}
.pi-variant-row.drop-over {
  border-color: var(--accent, #3b82f6) !important;
  background: var(--accent-subtle, rgba(59,130,246,0.14)) !important;
  box-shadow: 0 0 0 3px rgba(59,130,246,0.3), 0 4px 20px rgba(59,130,246,0.2) !important;
  transform: scale(1.015);
  transition: box-shadow 0.1s, transform 0.1s, background 0.1s;
  animation: none !important;
}

.pi-drop-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: var(--accent, #3b82f6);
  background: var(--accent-subtle, rgba(59,130,246,0.1));
  border-radius: 7px;
  pointer-events: none;
  z-index: 2;
  animation: pi-drop-overlay-pop 0.18s ease;
}
@keyframes pi-drop-overlay-pop {
  0%   { opacity: 0; transform: scale(0.86); }
  65%  { opacity: 1; transform: scale(1.05); }
  100% { opacity: 1; transform: scale(1); }
}

/* Animated banner when drag is in progress */
.pi-drop-hint-banner {
  padding: 8px 14px;
  margin-bottom: 10px;
  border-radius: 6px;
  background: var(--accent-subtle, rgba(59,130,246,0.08));
  border: 1.5px dashed var(--accent, #3b82f6);
  color: var(--accent, #3b82f6);
  font-size: 0.8rem;
  font-weight: 600;
  text-align: center;
  animation: pi-pulse 1.4s ease-in-out infinite;
}
@keyframes pi-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.55; }
}

/* Draggable URL preview chip */
.pi-url-drag-preview {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 12px;
  border-radius: 8px;
  border: 1.5px dashed var(--accent, #3b82f6);
  background: var(--accent-subtle, rgba(59,130,246,0.07));
  cursor: grab;
  font-size: 0.8rem;
  color: var(--accent, #3b82f6);
  font-weight: 600;
  margin-top: 8px;
  max-width: 100%;
  user-select: none;
}
.pi-url-drag-preview:active { cursor: grabbing; }
.pi-url-drag-preview img {
  width: 28px;
  height: 28px;
  object-fit: cover;
  border-radius: 4px;
  flex-shrink: 0;
  display: block;
}
.pi-url-drag-preview svg { font-size: 1.1rem; opacity: 0.7; flex-shrink: 0; }

/* Agent gallery: draggable image wrapper */
.pi-agent-img-wrap { position: relative; overflow: hidden; }
.pi-agent-img-wrap.draggable { cursor: grab; }
.pi-agent-img-wrap.draggable:active { cursor: grabbing; }
.pi-agent-img-wrap img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; }

.pi-agent-drag-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 5px 6px;
  background: rgba(0,0,0,0.6);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 600;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  opacity: 0;
  transition: opacity 0.15s;
  pointer-events: none;
}
.pi-agent-img-wrap.draggable:hover .pi-agent-drag-overlay { opacity: 1; }

/* THEME OVERRIDES */

/* ── cyberpunk (dark: neon green/cyan on dark) ─── */
html[data-theme="cyberpunk"] .pi-root { background: #0f1117; color: #e0ffe0; }
html[data-theme="cyberpunk"] .pi-sidebar { background: #131720; border-color: #00ff9044; }
html[data-theme="cyberpunk"] .pi-sidebar-header { border-color: #00ff9044; }
html[data-theme="cyberpunk"] .pi-product-item:hover { background: rgba(0,255,144,0.07); }
html[data-theme="cyberpunk"] .pi-product-item.active { background: rgba(0,255,144,0.15); }
html[data-theme="cyberpunk"] .pi-product-thumb { background: #1a1d2e; }
html[data-theme="cyberpunk"] .pi-refresh-btn { color: #00ff90; }
html[data-theme="cyberpunk"] .pi-section { background: #131720; border-color: #00ff9033; }
html[data-theme="cyberpunk"] .pi-tab.active { border-color: #00ff90; color: #00ff90; }
html[data-theme="cyberpunk"] .pi-tabs { background: #131720; border-color: #00ff9033; }
html[data-theme="cyberpunk"] .pi-detail-header { border-color: #00ff9033; }
html[data-theme="cyberpunk"] .pi-variant-row { background: #0f1117; border-color: #00ff9022; }
html[data-theme="cyberpunk"] .pi-variant-row.clickable:hover { border-color: #00ff90; }
html[data-theme="cyberpunk"] .pi-variant-row.selected { background: rgba(0,255,144,0.08); border-color: #00ff90; }
html[data-theme="cyberpunk"] .pi-image-card.clickable:hover { box-shadow: 0 0 0 2px #00ff90; }
html[data-theme="cyberpunk"] .pi-image-card.selected { box-shadow: 0 0 0 3px #00ff90; }
html[data-theme="cyberpunk"] .pi-image-selected-badge { background: #00ff90; color: #0f1117; }
html[data-theme="cyberpunk"] .pi-assign-btn,
html[data-theme="cyberpunk"] .pi-add-btn,
html[data-theme="cyberpunk"] .pi-agent-send { background: #00ff90; color: #0f1117; }
html[data-theme="cyberpunk"] .pi-add-input { background: #131720; border-color: #00ff9044; color: #e0ffe0; }
html[data-theme="cyberpunk"] .pi-add-input:focus { border-color: #00ff90; }
html[data-theme="cyberpunk"] .pi-agent-input { background: #131720; border-color: #00ff9044; color: #e0ffe0; }
html[data-theme="cyberpunk"] .pi-agent-input:focus { border-color: #00ff90; }
html[data-theme="cyberpunk"] .pi-agent-response { background: #131720; border-color: #00ff9033; }
html[data-theme="cyberpunk"] .pi-use-image-btn { background: #00ff90; color: #0f1117; }
html[data-theme="cyberpunk"] .pi-use-image-btn.selected { background: #00e676; color: #0f1117; }
html[data-theme="cyberpunk"] .pi-tab-badge { background: #00ff90; color: #0f1117; }
html[data-theme="cyberpunk"] .pi-queue-remove-inline-btn:hover { background: rgba(239,68,68,0.15); border-color: #ff4444; color: #ff4444; }
html[data-theme="cyberpunk"] .pi-similar-toggle { color: #e0ffe0; }
html[data-theme="cyberpunk"] .pi-code { background: rgba(0,255,144,0.1); }
html[data-theme="cyberpunk"] .pi-assign-row { background: rgba(0,255,144,0.08); border-color: #00ff90; }
html[data-theme="cyberpunk"] .pi-agent-icon { color: #00ff90; }
html[data-theme="cyberpunk"] .pi-tab { color: #e0ffe0; }
html[data-theme="cyberpunk"] .pi-empty-icon { color: #00ff90; }
html[data-theme="cyberpunk"] .pi-img-status.ok { color: #00ff90; background: rgba(0,255,144,0.12); }
html[data-theme="cyberpunk"] .pi-variant-badge { background: #00ff90; color: #0f1117; }

html[data-theme="cyberpunk"] .pi-drop-overlay { color: #00ff90; background: rgba(0,255,144,0.1); }
html[data-theme="cyberpunk"] .pi-drop-hint-banner { background: rgba(0,255,144,0.08); border-color: #00ff90; color: #00ff90; }
html[data-theme="cyberpunk"] .pi-variant-row.drop-over { border-color: #00ff90 !important; background: rgba(0,255,144,0.12) !important; box-shadow: 0 0 0 3px rgba(0,255,144,0.2) !important; }
html[data-theme="cyberpunk"] .pi-url-drag-preview { border-color: #00ff90; background: rgba(0,255,144,0.07); color: #00ff90; }
html[data-theme="cyberpunk"] .pi-drag-handle { background: rgba(0,255,144,0.7); color: #0f1117; }
html[data-theme="cyberpunk"] .pi-agent-chip { border-color: #00ff9055; color: #e0ffe0; }
html[data-theme="cyberpunk"] .pi-agent-chip:hover:not(:disabled) { border-color: #00ff90; background: rgba(0,255,144,0.1); }
html[data-theme="cyberpunk"] .pi-agent-chip.active { background: #00ff90; color: #0f1117; border-color: #00ff90; }
html[data-theme="cyberpunk"] .pi-agent-chips-label { color: #e0ffe0; }
html[data-theme="cyberpunk"] .pi-activate-btn { background: #00ff90; color: #0f1117; }
html[data-theme="cyberpunk"] .pi-activate-btn:hover:not(:disabled) { background: #00cc72; color: #0f1117; }
html[data-theme="cyberpunk"] .pi-draft-badge.active { background: #00ff90; color: #0f1117; }
html[data-theme="cyberpunk"] .pi-status-tab { color: #a0ffd0; }
html[data-theme="cyberpunk"] .pi-status-tab.active { color: #00ff90; border-bottom-color: #00ff90; }
html[data-theme="cyberpunk"] .pi-status-tabs { border-color: #00ff9033; }
html[data-theme="cyberpunk"] .pi-sort-row { border-color: #00ff9022; background: #131720; }
html[data-theme="cyberpunk"] .pi-sort-select { background: #0f1117; border-color: #00ff9044; color: #e0ffe0; }
html[data-theme="cyberpunk"] .pi-sort-select:focus { border-color: #00ff90; }
html[data-theme="cyberpunk"] .pi-draft-btn { background: #00d4ff; color: #0f1117; }
html[data-theme="cyberpunk"] .pi-draft-btn:hover:not(:disabled) { background: #00a8cc; color: #0f1117; }
html[data-theme="cyberpunk"] .pi-confirm-btn-ok { background: #00d4ff; color: #0f1117; }
html[data-theme="cyberpunk"] .pi-confirm-btn-ok:hover:not(:disabled) { background: #00a8cc; color: #0f1117; }
html[data-theme="cyberpunk"] .pi-secure-btn-confirm { background: #00d4ff; color: #0f1117; }
html[data-theme="cyberpunk"] .pi-confirm-btn-cancel { border-color: #00ff9044; color: #e0ffe0; }
html[data-theme="cyberpunk"] .pi-list-status-badge.active { background: #00ff90; color: #0f1117; }
html[data-theme="cyberpunk"] .pi-list-status-badge.draft { background: #00d4ff; color: #0f1117; }

/* ── jarvis (dark: blue on dark) ─── */
html[data-theme="jarvis"] .pi-root { background: #0a0f1e; color: #d4e5ff; }
html[data-theme="jarvis"] .pi-sidebar { background: #0d1326; border-color: #1d4ed844; }
html[data-theme="jarvis"] .pi-sidebar-header { border-color: #1d4ed844; }
html[data-theme="jarvis"] .pi-product-item:hover { background: rgba(59,130,246,0.1); }
html[data-theme="jarvis"] .pi-product-item.active { background: rgba(59,130,246,0.18); }
html[data-theme="jarvis"] .pi-product-thumb { background: #111827; }
html[data-theme="jarvis"] .pi-section { background: #0d1326; border-color: #1d4ed833; }
html[data-theme="jarvis"] .pi-tab.active { border-color: #60a5fa; color: #60a5fa; }
html[data-theme="jarvis"] .pi-tabs { background: #0d1326; border-color: #1d4ed833; }
html[data-theme="jarvis"] .pi-detail-header { border-color: #1d4ed833; }
html[data-theme="jarvis"] .pi-variant-row { background: #0a0f1e; border-color: #1d4ed822; }
html[data-theme="jarvis"] .pi-variant-row.clickable:hover { border-color: #60a5fa; }
html[data-theme="jarvis"] .pi-variant-row.selected { background: rgba(59,130,246,0.1); border-color: #60a5fa; }
html[data-theme="jarvis"] .pi-image-card.clickable:hover,
html[data-theme="jarvis"] .pi-image-card.selected { box-shadow: 0 0 0 3px #60a5fa; }
html[data-theme="jarvis"] .pi-agent-response { background: #0d1326; border-color: #1d4ed833; }
html[data-theme="jarvis"] .pi-add-input,
html[data-theme="jarvis"] .pi-agent-input { background: #0d1326; border-color: #1d4ed844; color: #d4e5ff; }
html[data-theme="jarvis"] .pi-tab { color: #d4e5ff; }
html[data-theme="jarvis"] .pi-code { background: rgba(59,130,246,0.12); }
html[data-theme="jarvis"] .pi-assign-row { background: rgba(59,130,246,0.1); border-color: #60a5fa; }
html[data-theme="jarvis"] .pi-similar-toggle { color: #d4e5ff; }

html[data-theme="jarvis"] .pi-drop-overlay { color: #60a5fa; background: rgba(59,130,246,0.12); }
html[data-theme="jarvis"] .pi-drop-hint-banner { background: rgba(59,130,246,0.08); border-color: #60a5fa; color: #60a5fa; }
html[data-theme="jarvis"] .pi-variant-row.drop-over { border-color: #60a5fa !important; box-shadow: 0 0 0 3px rgba(59,130,246,0.2) !important; }
html[data-theme="jarvis"] .pi-url-drag-preview { border-color: #60a5fa; background: rgba(59,130,246,0.08); color: #60a5fa; }
html[data-theme="jarvis"] .pi-agent-chip { border-color: #1d4ed855; color: #d4e5ff; }
html[data-theme="jarvis"] .pi-agent-chip:hover:not(:disabled) { border-color: #60a5fa; background: rgba(59,130,246,0.1); }
html[data-theme="jarvis"] .pi-agent-chip.active { background: #60a5fa; color: #0a0f1e; border-color: #60a5fa; }
html[data-theme="jarvis"] .pi-tab-badge { background: #60a5fa; color: #0a0f1e; }
html[data-theme="jarvis"] .pi-agent-chips-label { color: #d4e5ff; }
html[data-theme="jarvis"] .pi-activate-btn { background: #60a5fa; color: #0a0f1e; }
html[data-theme="jarvis"] .pi-activate-btn:hover:not(:disabled) { background: #3b82f6; color: #0a0f1e; }
html[data-theme="jarvis"] .pi-draft-badge.active { background: #60a5fa; color: #0a0f1e; }
html[data-theme="jarvis"] .pi-status-tab { color: #a0c0f0; }
html[data-theme="jarvis"] .pi-status-tab.active { color: #60a5fa; border-bottom-color: #60a5fa; }
html[data-theme="jarvis"] .pi-status-tabs { border-color: #1d4ed833; }
html[data-theme="jarvis"] .pi-sort-row { border-color: #1d4ed822; background: #0d1326; }
html[data-theme="jarvis"] .pi-sort-select { background: #0a0f1e; border-color: #1d4ed844; color: #d4e5ff; }
html[data-theme="jarvis"] .pi-sort-select:focus { border-color: #60a5fa; }
html[data-theme="jarvis"] .pi-draft-btn { background: #fbbf24; color: #0a0f1e; }
html[data-theme="jarvis"] .pi-draft-btn:hover:not(:disabled) { background: #f59e0b; color: #0a0f1e; }
html[data-theme="jarvis"] .pi-confirm-btn-ok { background: #fbbf24; color: #0a0f1e; }
html[data-theme="jarvis"] .pi-confirm-btn-ok:hover:not(:disabled) { background: #f59e0b; color: #0a0f1e; }
html[data-theme="jarvis"] .pi-confirm-btn-cancel { border-color: #1d4ed844; color: #d4e5ff; }
html[data-theme="jarvis"] .pi-list-status-badge.active { background: #60a5fa; color: #0a0f1e; }
html[data-theme="jarvis"] .pi-list-status-badge.draft { background: #fbbf24; color: #0a0f1e; }

/* ── rock (dark: red on black) ─── */
html[data-theme="rock"] .pi-root { background: #0a0000; color: #f8e8e8; }
html[data-theme="rock"] .pi-sidebar { background: #120000; border-color: #8b000055; }
html[data-theme="rock"] .pi-sidebar-header { border-color: #8b000055; }
html[data-theme="rock"] .pi-product-item:hover { background: rgba(139,0,0,0.15); }
html[data-theme="rock"] .pi-product-item.active { background: rgba(139,0,0,0.25); }
html[data-theme="rock"] .pi-product-thumb { background: #1a0000; }
html[data-theme="rock"] .pi-section { background: #120000; border-color: #8b000033; }
html[data-theme="rock"] .pi-tab.active { border-color: #ef4444; color: #ef4444; }
html[data-theme="rock"] .pi-tabs { background: #120000; border-color: #8b000033; }
html[data-theme="rock"] .pi-detail-header { border-color: #8b000033; }
html[data-theme="rock"] .pi-variant-row { background: #0a0000; border-color: #8b000022; }
html[data-theme="rock"] .pi-variant-row.clickable:hover,
html[data-theme="rock"] .pi-variant-row.selected { border-color: #ef4444; }
html[data-theme="rock"] .pi-variant-row.selected { background: rgba(139,0,0,0.12); }
html[data-theme="rock"] .pi-image-card.clickable:hover,
html[data-theme="rock"] .pi-image-card.selected { box-shadow: 0 0 0 3px #ef4444; }
html[data-theme="rock"] .pi-assign-btn,
html[data-theme="rock"] .pi-add-btn,
html[data-theme="rock"] .pi-agent-send { background: #ef4444; }
html[data-theme="rock"] .pi-add-input,
html[data-theme="rock"] .pi-agent-input { background: #120000; border-color: #8b000044; color: #f8e8e8; }
html[data-theme="rock"] .pi-agent-response { background: #120000; border-color: #8b000033; }
html[data-theme="rock"] .pi-agent-icon { color: #ef4444; }
html[data-theme="rock"] .pi-empty-icon { color: #ef4444; }
html[data-theme="rock"] .pi-code { background: rgba(239,68,68,0.1); }
html[data-theme="rock"] .pi-assign-row { background: rgba(139,0,0,0.1); border-color: #ef4444; }
html[data-theme="rock"] .pi-similar-toggle { color: #f8e8e8; }
html[data-theme="rock"] .pi-variant-badge { background: #ef4444; }
html[data-theme="rock"] .pi-tab { color: #f8e8e8; }

html[data-theme="rock"] .pi-drop-overlay { color: #ef4444; background: rgba(239,68,68,0.1); }
html[data-theme="rock"] .pi-drop-hint-banner { background: rgba(239,68,68,0.08); border-color: #ef4444; color: #ef4444; }
html[data-theme="rock"] .pi-variant-row.drop-over { border-color: #ef4444 !important; background: rgba(139,0,0,0.15) !important; box-shadow: 0 0 0 3px rgba(239,68,68,0.2) !important; }
html[data-theme="rock"] .pi-url-drag-preview { border-color: #ef4444; background: rgba(239,68,68,0.07); color: #ef4444; }
html[data-theme="rock"] .pi-agent-chip { border-color: #8b000055; color: #f8e8e8; }
html[data-theme="rock"] .pi-agent-chip:hover:not(:disabled) { border-color: #ef4444; background: rgba(239,68,68,0.1); }
html[data-theme="rock"] .pi-agent-chip.active { background: #ef4444; color: #fff; border-color: #ef4444; }
html[data-theme="rock"] .pi-tab-badge { background: #ef4444; color: #fff; }
html[data-theme="rock"] .pi-agent-chips-label { color: #f8e8e8; }
html[data-theme="rock"] .pi-activate-btn { background: #ef4444; color: #fff; }
html[data-theme="rock"] .pi-activate-btn:hover:not(:disabled) { background: #dc2626; color: #fff; }
html[data-theme="rock"] .pi-draft-badge.active { background: #ef4444; }
html[data-theme="rock"] .pi-status-tab { color: #e0a0a0; }
html[data-theme="rock"] .pi-status-tab.active { color: #ef4444; border-bottom-color: #ef4444; }
html[data-theme="rock"] .pi-status-tabs { border-color: #8b000033; }
html[data-theme="rock"] .pi-sort-row { border-color: #8b000022; background: #120000; }
html[data-theme="rock"] .pi-sort-select { background: #0a0000; border-color: #8b000044; color: #f8e8e8; }
html[data-theme="rock"] .pi-sort-select:focus { border-color: #ef4444; }
html[data-theme="rock"] .pi-draft-btn { background: #f97316; color: #fff; }
html[data-theme="rock"] .pi-draft-btn:hover:not(:disabled) { background: #ea580c; color: #fff; }
html[data-theme="rock"] .pi-confirm-btn-ok { background: #f97316; color: #fff; }
html[data-theme="rock"] .pi-confirm-btn-ok:hover:not(:disabled) { background: #ea580c; color: #fff; }
html[data-theme="rock"] .pi-confirm-btn-cancel { border-color: #8b000044; color: #f8e8e8; }
html[data-theme="rock"] .pi-list-status-badge.active { background: #ef4444; color: #fff; }
html[data-theme="rock"] .pi-list-status-badge.draft { background: #f97316; color: #fff; }

/* ── golden (dark: gold on dark navy) ─── */
html[data-theme="golden"] .pi-root { background: #0f0f1a; color: #fef3c7; }
html[data-theme="golden"] .pi-sidebar { background: #141425; border-color: #d97706; }
html[data-theme="golden"] .pi-sidebar-header { border-color: #d9770644; }
html[data-theme="golden"] .pi-product-item:hover { background: rgba(217,119,6,0.1); }
html[data-theme="golden"] .pi-product-item.active { background: rgba(217,119,6,0.18); }
html[data-theme="golden"] .pi-product-thumb { background: #1a1a2e; }
html[data-theme="golden"] .pi-section { background: #141425; border-color: #d9770633; }
html[data-theme="golden"] .pi-tab.active { border-color: #f59e0b; color: #f59e0b; }
html[data-theme="golden"] .pi-tabs { background: #141425; border-color: #d9770633; }
html[data-theme="golden"] .pi-detail-header { border-color: #d9770633; }
html[data-theme="golden"] .pi-variant-row { background: #0f0f1a; border-color: #d9770622; }
html[data-theme="golden"] .pi-variant-row.clickable:hover,
html[data-theme="golden"] .pi-variant-row.selected { border-color: #f59e0b; }
html[data-theme="golden"] .pi-variant-row.selected { background: rgba(217,119,6,0.1); }
html[data-theme="golden"] .pi-image-card.clickable:hover,
html[data-theme="golden"] .pi-image-card.selected { box-shadow: 0 0 0 3px #f59e0b; }
html[data-theme="golden"] .pi-assign-btn,
html[data-theme="golden"] .pi-add-btn,
html[data-theme="golden"] .pi-agent-send { background: #d97706; }
html[data-theme="golden"] .pi-add-input,
html[data-theme="golden"] .pi-agent-input { background: #141425; border-color: #d9770644; color: #fef3c7; }
html[data-theme="golden"] .pi-agent-response { background: #141425; border-color: #d9770633; }
html[data-theme="golden"] .pi-agent-icon { color: #f59e0b; }
html[data-theme="golden"] .pi-empty-icon { color: #f59e0b; }
html[data-theme="golden"] .pi-code { background: rgba(217,119,6,0.12); }
html[data-theme="golden"] .pi-assign-row { background: rgba(217,119,6,0.1); border-color: #f59e0b; }
html[data-theme="golden"] .pi-similar-toggle { color: #fef3c7; }
html[data-theme="golden"] .pi-variant-badge { background: #d97706; }
html[data-theme="golden"] .pi-tab { color: #fef3c7; }

html[data-theme="golden"] .pi-drop-overlay { color: #f59e0b; background: rgba(217,119,6,0.1); }
html[data-theme="golden"] .pi-drop-hint-banner { background: rgba(217,119,6,0.08); border-color: #f59e0b; color: #f59e0b; }
html[data-theme="golden"] .pi-variant-row.drop-over { border-color: #f59e0b !important; background: rgba(217,119,6,0.15) !important; box-shadow: 0 0 0 3px rgba(217,119,6,0.2) !important; }
html[data-theme="golden"] .pi-agent-chip { border-color: #d9770655; color: #fef3c7; }
html[data-theme="golden"] .pi-agent-chip:hover:not(:disabled) { border-color: #f59e0b; background: rgba(217,119,6,0.1); }
html[data-theme="golden"] .pi-agent-chip.active { background: #d97706; color: #fff; border-color: #d97706; }
html[data-theme="golden"] .pi-tab-badge { background: #d97706; color: #fff; }
html[data-theme="golden"] .pi-agent-chips-label { color: #fef3c7; }
html[data-theme="golden"] .pi-url-drag-preview { border-color: #f59e0b; background: rgba(217,119,6,0.07); color: #f59e0b; }
html[data-theme="golden"] .pi-activate-btn { background: #d97706; color: #1a1208; }
html[data-theme="golden"] .pi-activate-btn:hover:not(:disabled) { background: #b45309; color: #1a1208; }
html[data-theme="golden"] .pi-draft-badge.active { background: #d97706; color: #1a1208; }
html[data-theme="golden"] .pi-status-tab { color: #e0c070; }
html[data-theme="golden"] .pi-status-tab.active { color: #f59e0b; border-bottom-color: #f59e0b; }
html[data-theme="golden"] .pi-status-tabs { border-color: #d9770633; }
html[data-theme="golden"] .pi-sort-row { border-color: #d9770622; background: #141425; }
html[data-theme="golden"] .pi-sort-select { background: #0f0f1a; border-color: #d9770644; color: #fef3c7; }
html[data-theme="golden"] .pi-sort-select:focus { border-color: #f59e0b; }
html[data-theme="golden"] .pi-draft-btn { background: #6366f1; color: #fff; }
html[data-theme="golden"] .pi-draft-btn:hover:not(:disabled) { background: #4f46e5; color: #fff; }
html[data-theme="golden"] .pi-confirm-btn-ok { background: #6366f1; color: #fff; }
html[data-theme="golden"] .pi-confirm-btn-ok:hover:not(:disabled) { background: #4f46e5; color: #fff; }
html[data-theme="golden"] .pi-confirm-btn-cancel { border-color: #d9770644; color: #fef3c7; }
html[data-theme="golden"] .pi-list-status-badge.active { background: #d97706; color: #1a1208; }
html[data-theme="golden"] .pi-list-status-badge.draft { background: #6366f1; color: #fff; }

/* ── parchment (light: warm beige) ─── */
html[data-theme="parchment"] .pi-root { background: #f8f0e3; color: #3d2b1f; }
html[data-theme="parchment"] .pi-sidebar { background: #f0e6d3; border-color: #c4996855; }
html[data-theme="parchment"] .pi-sidebar-header { border-color: #c4996855; }
html[data-theme="parchment"] .pi-product-item:hover { background: rgba(196,153,104,0.1); }
html[data-theme="parchment"] .pi-product-item.active { background: rgba(196,153,104,0.2); }
html[data-theme="parchment"] .pi-product-thumb { background: #e8ddd0; }
html[data-theme="parchment"] .pi-section { background: #f0e6d3; border-color: #c4996833; }
html[data-theme="parchment"] .pi-tab.active { border-color: #8b5e3c; color: #8b5e3c; }
html[data-theme="parchment"] .pi-tabs { background: #f0e6d3; border-color: #c4996833; }
html[data-theme="parchment"] .pi-detail-header { border-color: #c4996833; }
html[data-theme="parchment"] .pi-variant-row { background: #f8f0e3; border-color: #c4996822; }
html[data-theme="parchment"] .pi-variant-row.clickable:hover,
html[data-theme="parchment"] .pi-variant-row.selected { border-color: #8b5e3c; }
html[data-theme="parchment"] .pi-variant-row.selected { background: rgba(196,153,104,0.12); }
html[data-theme="parchment"] .pi-image-card.clickable:hover,
html[data-theme="parchment"] .pi-image-card.selected { box-shadow: 0 0 0 3px #8b5e3c; }
html[data-theme="parchment"] .pi-assign-btn,
html[data-theme="parchment"] .pi-add-btn,
html[data-theme="parchment"] .pi-agent-send { background: #8b5e3c; }
html[data-theme="parchment"] .pi-add-input,
html[data-theme="parchment"] .pi-agent-input { background: #f8f0e3; border-color: #c4996844; color: #3d2b1f; }
html[data-theme="parchment"] .pi-agent-response { background: #f0e6d3; border-color: #c4996833; }
html[data-theme="parchment"] .pi-agent-icon { color: #8b5e3c; }
html[data-theme="parchment"] .pi-empty-icon { color: #8b5e3c; }
html[data-theme="parchment"] .pi-code { background: rgba(139,94,60,0.1); }
html[data-theme="parchment"] .pi-assign-row { background: rgba(196,153,104,0.12); border-color: #8b5e3c; }
html[data-theme="parchment"] .pi-variant-badge { background: #8b5e3c; }
html[data-theme="parchment"] .pi-tab { color: #3d2b1f; }

html[data-theme="parchment"] .pi-drop-overlay { color: #8b5e3c; background: rgba(196,153,104,0.12); }
html[data-theme="parchment"] .pi-drop-hint-banner { background: rgba(196,153,104,0.1); border-color: #8b5e3c; color: #8b5e3c; }
html[data-theme="parchment"] .pi-variant-row.drop-over { border-color: #8b5e3c !important; background: rgba(196,153,104,0.15) !important; box-shadow: 0 0 0 3px rgba(139,94,60,0.2) !important; }
html[data-theme="parchment"] .pi-url-drag-preview { border-color: #8b5e3c; background: rgba(196,153,104,0.1); color: #8b5e3c; }
html[data-theme="parchment"] .pi-status-tab { color: #6b4c3b; }
html[data-theme="parchment"] .pi-status-tab.active { color: #8b5e3c; border-bottom-color: #8b5e3c; }
html[data-theme="parchment"] .pi-status-tabs { border-color: #c4996833; }
html[data-theme="parchment"] .pi-sort-row { border-color: #c4996822; background: #f0e6d3; }
html[data-theme="parchment"] .pi-sort-select { background: #f8f0e3; border-color: #c4996844; color: #3d2b1f; }
html[data-theme="parchment"] .pi-sort-select:focus { border-color: #8b5e3c; }
html[data-theme="parchment"] .pi-draft-btn { background: #6b7280; color: #fff; }
html[data-theme="parchment"] .pi-draft-btn:hover:not(:disabled) { background: #4b5563; color: #fff; }
html[data-theme="parchment"] .pi-confirm-btn-ok { background: #6b7280; color: #fff; }
html[data-theme="parchment"] .pi-confirm-btn-ok:hover:not(:disabled) { background: #4b5563; color: #fff; }
html[data-theme="parchment"] .pi-confirm-btn-cancel { border-color: #c4996844; color: #3d2b1f; }
html[data-theme="parchment"] .pi-list-status-badge.active { background: #8b5e3c; color: #fff; }
html[data-theme="parchment"] .pi-list-status-badge.draft { background: #6b7280; color: #fff; }

/* ── pop (light: pink/purple) ─── */
html[data-theme="pop"] .pi-root { background: #fdf2f8; color: #1e1030; }
html[data-theme="pop"] .pi-sidebar { background: #fce7f3; border-color: #f472b655; }
html[data-theme="pop"] .pi-sidebar-header { border-color: #f472b655; }
html[data-theme="pop"] .pi-product-item:hover { background: rgba(244,114,182,0.1); }
html[data-theme="pop"] .pi-product-item.active { background: rgba(244,114,182,0.2); }
html[data-theme="pop"] .pi-product-thumb { background: #fce7f3; }
html[data-theme="pop"] .pi-section { background: #fce7f3; border-color: #f472b633; }
html[data-theme="pop"] .pi-tab.active { border-color: #ec4899; color: #ec4899; }
html[data-theme="pop"] .pi-tabs { background: #fce7f3; border-color: #f472b633; }
html[data-theme="pop"] .pi-detail-header { border-color: #f472b633; }
html[data-theme="pop"] .pi-variant-row { background: #fdf2f8; border-color: #f472b622; }
html[data-theme="pop"] .pi-variant-row.clickable:hover,
html[data-theme="pop"] .pi-variant-row.selected { border-color: #ec4899; }
html[data-theme="pop"] .pi-variant-row.selected { background: rgba(244,114,182,0.1); }
html[data-theme="pop"] .pi-image-card.clickable:hover,
html[data-theme="pop"] .pi-image-card.selected { box-shadow: 0 0 0 3px #ec4899; }
html[data-theme="pop"] .pi-assign-btn,
html[data-theme="pop"] .pi-add-btn,
html[data-theme="pop"] .pi-agent-send { background: #ec4899; }
html[data-theme="pop"] .pi-add-input,
html[data-theme="pop"] .pi-agent-input { background: #fdf2f8; border-color: #f472b644; color: #1e1030; }
html[data-theme="pop"] .pi-agent-response { background: #fce7f3; border-color: #f472b633; }
html[data-theme="pop"] .pi-agent-icon { color: #ec4899; }
html[data-theme="pop"] .pi-empty-icon { color: #ec4899; }
html[data-theme="pop"] .pi-code { background: rgba(236,72,153,0.1); }
html[data-theme="pop"] .pi-assign-row { background: rgba(244,114,182,0.1); border-color: #ec4899; }
html[data-theme="pop"] .pi-variant-badge { background: #ec4899; }
html[data-theme="pop"] .pi-tab { color: #1e1030; }

html[data-theme="pop"] .pi-drop-overlay { color: #ec4899; background: rgba(244,114,182,0.1); }
html[data-theme="pop"] .pi-drop-hint-banner { background: rgba(244,114,182,0.08); border-color: #ec4899; color: #ec4899; }
html[data-theme="pop"] .pi-variant-row.drop-over { border-color: #ec4899 !important; background: rgba(244,114,182,0.12) !important; box-shadow: 0 0 0 3px rgba(236,72,153,0.2) !important; }
html[data-theme="pop"] .pi-url-drag-preview { border-color: #ec4899; background: rgba(244,114,182,0.07); color: #ec4899; }
html[data-theme="pop"] .pi-status-tab { color: #9d174d; }
html[data-theme="pop"] .pi-status-tab.active { color: #ec4899; border-bottom-color: #ec4899; }
html[data-theme="pop"] .pi-status-tabs { border-color: #f472b633; }
html[data-theme="pop"] .pi-sort-row { border-color: #f472b622; background: #fce7f3; }
html[data-theme="pop"] .pi-sort-select { background: #fdf2f8; border-color: #f472b644; color: #1e1030; }
html[data-theme="pop"] .pi-sort-select:focus { border-color: #ec4899; }
html[data-theme="pop"] .pi-draft-btn { background: #a855f7; color: #fff; }
html[data-theme="pop"] .pi-draft-btn:hover:not(:disabled) { background: #9333ea; color: #fff; }
html[data-theme="pop"] .pi-confirm-btn-ok { background: #a855f7; color: #fff; }
html[data-theme="pop"] .pi-confirm-btn-ok:hover:not(:disabled) { background: #9333ea; color: #fff; }
html[data-theme="pop"] .pi-confirm-btn-cancel { border-color: #f472b644; color: #1e1030; }
html[data-theme="pop"] .pi-list-status-badge.active { background: #ec4899; color: #fff; }
html[data-theme="pop"] .pi-list-status-badge.draft { background: #a855f7; color: #fff; }

/* ── allwhite (light: grayscale minimalist) ─── */
html[data-theme="allwhite"] .pi-root { background: #ffffff; color: #111827; }
html[data-theme="allwhite"] .pi-sidebar { background: #f9fafb; border-color: #e5e7eb; }
html[data-theme="allwhite"] .pi-sidebar-header { border-color: #e5e7eb; }
html[data-theme="allwhite"] .pi-product-item:hover { background: #f3f4f6; }
html[data-theme="allwhite"] .pi-product-item.active { background: #e5e7eb; }
html[data-theme="allwhite"] .pi-product-thumb { background: #f3f4f6; }
html[data-theme="allwhite"] .pi-section { background: #f9fafb; border-color: #e5e7eb; }
html[data-theme="allwhite"] .pi-tab.active { border-color: #374151; color: #374151; }
html[data-theme="allwhite"] .pi-tabs { background: #f9fafb; border-color: #e5e7eb; }
html[data-theme="allwhite"] .pi-detail-header { border-color: #e5e7eb; }
html[data-theme="allwhite"] .pi-variant-row { background: #fff; border-color: #e5e7eb; }
html[data-theme="allwhite"] .pi-variant-row.clickable:hover,
html[data-theme="allwhite"] .pi-variant-row.selected { border-color: #374151; }
html[data-theme="allwhite"] .pi-variant-row.selected { background: #f3f4f6; }
html[data-theme="allwhite"] .pi-image-card.clickable:hover,
html[data-theme="allwhite"] .pi-image-card.selected { box-shadow: 0 0 0 3px #374151; }
html[data-theme="allwhite"] .pi-assign-btn,
html[data-theme="allwhite"] .pi-add-btn,
html[data-theme="allwhite"] .pi-agent-send { background: #374151; }
html[data-theme="allwhite"] .pi-add-input,
html[data-theme="allwhite"] .pi-agent-input { background: #fff; border-color: #d1d5db; color: #111827; }
html[data-theme="allwhite"] .pi-agent-response { background: #f9fafb; border-color: #e5e7eb; }
html[data-theme="allwhite"] .pi-agent-icon { color: #374151; }
html[data-theme="allwhite"] .pi-code { background: #f3f4f6; }
html[data-theme="allwhite"] .pi-assign-row { background: #f3f4f6; border-color: #374151; }
html[data-theme="allwhite"] .pi-variant-badge { background: #374151; }
html[data-theme="allwhite"] .pi-use-image-btn { background: #374151; }
html[data-theme="allwhite"] .pi-image-selected-badge { background: #374151; }

html[data-theme="allwhite"] .pi-drop-overlay { color: #374151; background: rgba(55,65,81,0.08); }
html[data-theme="allwhite"] .pi-drop-hint-banner { background: rgba(55,65,81,0.06); border-color: #374151; color: #374151; }
html[data-theme="allwhite"] .pi-variant-row.drop-over { border-color: #374151 !important; background: #f3f4f6 !important; box-shadow: 0 0 0 3px rgba(55,65,81,0.15) !important; }
html[data-theme="allwhite"] .pi-url-drag-preview { border-color: #374151; background: rgba(55,65,81,0.05); color: #374151; }
html[data-theme="allwhite"] .pi-status-tab { color: #6b7280; }
html[data-theme="allwhite"] .pi-status-tab.active { color: #374151; border-bottom-color: #374151; }
html[data-theme="allwhite"] .pi-status-tabs { border-color: #e5e7eb; }
html[data-theme="allwhite"] .pi-sort-row { border-color: #e5e7eb; background: #f9fafb; }
html[data-theme="allwhite"] .pi-sort-select { background: #fff; border-color: #d1d5db; color: #111827; }
html[data-theme="allwhite"] .pi-sort-select:focus { border-color: #374151; }
html[data-theme="allwhite"] .pi-draft-btn { background: #6b7280; color: #fff; }
html[data-theme="allwhite"] .pi-draft-btn:hover:not(:disabled) { background: #4b5563; color: #fff; }
html[data-theme="allwhite"] .pi-confirm-btn-ok { background: #6b7280; color: #fff; }
html[data-theme="allwhite"] .pi-confirm-btn-ok:hover:not(:disabled) { background: #4b5563; color: #fff; }
html[data-theme="allwhite"] .pi-confirm-btn-cancel { border-color: #d1d5db; color: #111827; }
html[data-theme="allwhite"] .pi-list-status-badge.active { background: #374151; color: #fff; }
html[data-theme="allwhite"] .pi-list-status-badge.draft { background: #6b7280; color: #fff; }

/* ── Touch drag clone: per-theme border colors ─────────────────────────────── */
html[data-theme="cyberpunk"] .pi-touch-drag-clone { background: conic-gradient(from var(--pi-clone-angle), #00ff90 0%, #a0ffd6 18%, rgba(255,255,255,0.4) 25%, #00e077 35%, #005e32 50%, #00ff90 65%, #a0ffd6 80%, rgba(255,255,255,0.4) 87%, #00ff90 100%); }
html[data-theme="rock"] .pi-touch-drag-clone { background: conic-gradient(from var(--pi-clone-angle), #ef4444 0%, #fca5a5 18%, rgba(255,255,255,0.4) 25%, #dc2626 35%, #7f1d1d 50%, #ef4444 65%, #fca5a5 80%, rgba(255,255,255,0.4) 87%, #ef4444 100%); }
html[data-theme="golden"] .pi-touch-drag-clone { background: conic-gradient(from var(--pi-clone-angle), #f59e0b 0%, #fde68a 18%, rgba(255,255,255,0.4) 25%, #d97706 35%, #78350f 50%, #f59e0b 65%, #fde68a 80%, rgba(255,255,255,0.4) 87%, #f59e0b 100%); }
html[data-theme="parchment"] .pi-touch-drag-clone { background: conic-gradient(from var(--pi-clone-angle), #8b5e3c 0%, #c4956a 18%, rgba(255,255,255,0.4) 25%, #7c4a2d 35%, #3c1f0d 50%, #8b5e3c 65%, #c4956a 80%, rgba(255,255,255,0.4) 87%, #8b5e3c 100%); }
html[data-theme="pop"] .pi-touch-drag-clone { background: conic-gradient(from var(--pi-clone-angle), #ec4899 0%, #fbcfe8 18%, rgba(255,255,255,0.5) 25%, #db2777 35%, #831843 50%, #ec4899 65%, #fbcfe8 80%, rgba(255,255,255,0.5) 87%, #ec4899 100%); }
html[data-theme="allwhite"] .pi-touch-drag-clone { background: conic-gradient(from var(--pi-clone-angle), #374151 0%, #9ca3af 18%, rgba(255,255,255,0.5) 25%, #4b5563 35%, #111827 50%, #374151 65%, #9ca3af 80%, rgba(255,255,255,0.5) 87%, #374151 100%); }

/* ── Responsive ─── */
@media (max-width: 768px) {
  .pi-root { flex-direction: column; height: auto; }
  .pi-sidebar { width: 100%; min-width: unset; max-height: 40vh; border-right: none; border-bottom: 1px solid var(--border-color, rgba(0,0,0,0.1)); }
  .pi-main { overflow-y: visible; }
  .pi-agent-gallery { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
  .pi-variant-row { padding: 16px 14px; min-height: 72px; }
  .pi-variant-thumb { width: 48px; height: 48px; }
}
/* StoreImageGenerator.css — Generador de Imagenes de Tienda */

/* ── Root layout ─────────────────────────────────────────────────────────────── */
.sig-root {
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - 64px);
  background: var(--bg-secondary);
  color: var(--text-primary);
  padding: 24px;
  gap: 20px;
}

/* ── Header ──────────────────────────────────────────────────────────────────── */
.sig-header {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.sig-header-left {
  display: flex;
  align-items: center;
  gap: 14px;
}

.sig-header-icon {
  font-size: 2rem;
  color: var(--primary-color);
  flex-shrink: 0;
}

.sig-title {
  font-size: 1.6rem;
  font-weight: 700;
  margin: 0;
  color: var(--text-primary);
}

.sig-subtitle {
  font-size: 0.88rem;
  color: var(--text-secondary);
  margin: 2px 0 0;
}

.sig-hidden-input {
  display: none;
}

/* ── Body: two-column layout ─────────────────────────────────────────────────── */
.sig-body {
  display: grid;
  grid-template-columns: 420px 1fr;
  gap: 20px;
  align-items: start;
}

@media (max-width: 1024px) {
  .sig-body {
    grid-template-columns: 1fr;
  }
}

/* ── Section ─────────────────────────────────────────────────────────────────── */
.sig-section {
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  padding: 18px;
  margin-bottom: 14px;
}

.sig-section:last-child {
  margin-bottom: 0;
}

.sig-section-title {
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-secondary);
  margin: 0 0 14px;
}

/* ── Presets ─────────────────────────────────────────────────────────────────── */
.sig-presets {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.sig-preset-btn {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 10px 12px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  cursor: pointer;
  color: var(--text-primary);
  text-align: left;
  transition: border-color 0.15s, background 0.15s;
}

.sig-preset-btn:hover {
  border-color: var(--primary-color);
  background: var(--hover-bg);
}

.sig-preset-btn.active {
  border-color: var(--primary-color);
  background: color-mix(in srgb, var(--primary-color) 10%, var(--card-bg));
}

.sig-preset-icon {
  font-size: 1.3rem;
  line-height: 1;
}

.sig-preset-label {
  font-size: 0.82rem;
  font-weight: 600;
}

.sig-preset-dims {
  font-size: 0.72rem;
  color: var(--text-secondary);
}

.sig-goal-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.sig-goal-btn {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: 12px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  color: var(--text-primary);
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}

.sig-goal-btn strong {
  font-size: 0.84rem;
}

.sig-goal-btn span {
  font-size: 0.76rem;
  color: var(--text-secondary);
  line-height: 1.45;
}

.sig-goal-btn:hover {
  border-color: var(--primary-color);
  background: color-mix(in srgb, var(--primary-color) 10%, var(--card-bg));
}

/* ── Custom dimensions ───────────────────────────────────────────────────────── */
.sig-custom-dims {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  margin-top: 12px;
  flex-wrap: wrap;
}

.sig-dim-label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.8rem;
  color: var(--text-secondary);
  font-weight: 500;
}

.sig-dim-input {
  width: 90px;
  padding: 6px 8px;
  background: var(--input-bg);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  color: var(--text-primary);
  font-size: 0.88rem;
}

.sig-dim-sep {
  font-size: 1.1rem;
  color: var(--text-secondary);
  padding-bottom: 6px;
}

.sig-dim-hint {
  padding-bottom: 6px;
}

/* ── Prompt textarea ─────────────────────────────────────────────────────────── */
.sig-prompt {
  width: 100%;
  padding: 10px 12px;
  background: var(--input-bg);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  color: var(--text-primary);
  font-size: 0.9rem;
  font-family: inherit;
  resize: vertical;
  transition: border-color 0.15s;
  box-sizing: border-box;
}

.sig-prompt:focus {
  outline: none;
  border-color: var(--primary-color);
}

.sig-prompt::placeholder {
  color: var(--text-light);
}

.sig-negative-prompt {
  margin-top: 10px;
  opacity: 0.85;
}

/* ── Quick prompts ───────────────────────────────────────────────────────────── */
.sig-quick-prompts {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.sig-quick-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.sig-quick-btn {
  text-align: left;
  padding: 6px 10px;
  font-size: 0.78rem;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  color: var(--text-primary);
  cursor: pointer;
  opacity: 0.85;
  transition: opacity 0.1s, border-color 0.1s;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sig-quick-btn:hover {
  opacity: 1;
  border-color: var(--primary-color);
}

.sig-quick-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* ── Context chips ───────────────────────────────────────────────────────────── */
.sig-chips {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.sig-series-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.sig-series-title {
  margin-bottom: 6px;
}

.sig-series-subtitle {
  font-size: 0.82rem;
  color: var(--text-secondary);
  margin: 0;
}

.sig-series-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
}

.sig-series-toggle input {
  accent-color: var(--primary-color);
}

.sig-series-actions {
  margin-top: 14px;
}

.sig-secondary-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  font-size: 0.84rem;
  font-weight: 600;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  color: var(--text-primary);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}

.sig-secondary-btn:hover:not(:disabled) {
  border-color: var(--primary-color);
  background: color-mix(in srgb, var(--primary-color) 8%, var(--card-bg));
}

.sig-secondary-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.sig-series-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 14px;
}

.sig-field-label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 0.8rem;
  color: var(--text-secondary);
  font-weight: 600;
}

.sig-field-span-2 {
  grid-column: span 2;
}

.sig-series-textarea {
  min-height: 92px;
}

.sig-series-preview {
  margin-top: 14px;
  padding: 12px;
  border-radius: 8px;
  border: 1px solid var(--border-color);
  background: var(--bg-secondary);
}

.sig-series-preview-text {
  margin: 8px 0 0;
  font-size: 0.82rem;
  color: var(--text-primary);
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
}

@media (max-width: 720px) {
  .sig-series-header {
    flex-direction: column;
  }

  .sig-series-grid {
    grid-template-columns: 1fr;
  }

  .sig-field-span-2 {
    grid-column: span 1;
  }
}

.sig-chips-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  display: flex;
  align-items: center;
  gap: 4px;
}

.sig-chips-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.sig-chip {
  padding: 4px 10px;
  font-size: 0.78rem;
  background: var(--badge-bg);
  border: 1px solid var(--border-color);
  border-radius: 20px;
  color: var(--text-primary);
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
}

.sig-chip:hover {
  background: color-mix(in srgb, var(--primary-color) 15%, var(--card-bg));
  border-color: var(--primary-color);
}

.sig-chip:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* ── Collapsible section ─────────────────────────────────────────────────────── */
.sig-section-collapsible {
  padding: 0;
  overflow: hidden;
}

.sig-collapsible-header {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-secondary);
  font-size: 0.82rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.sig-collapsible-header:hover {
  color: var(--text-primary);
}

.sig-section-collapsible .sig-prompt {
  margin: 0 18px 14px;
  width: calc(100% - 36px);
}

/* ── Quality + generate ──────────────────────────────────────────────────────── */
.sig-generate-section {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.sig-quality-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.sig-quality-label {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-secondary);
  margin-right: 4px;
}

.sig-quality-btn {
  padding: 6px 14px;
  font-size: 0.82rem;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 20px;
  color: var(--text-primary);
  cursor: pointer;
  transition: all 0.15s;
}

.sig-quality-btn.active {
  background: var(--primary-color);
  border-color: var(--primary-color);
  color: var(--btn-primary-text);
  font-weight: 600;
}

.sig-quality-btn:not(.active):hover {
  border-color: var(--primary-color);
}

.sig-generate-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 24px;
  font-size: 1rem;
  font-weight: 700;
  background: var(--primary-color);
  color: var(--btn-primary-text);
  border: none;
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.15s, opacity 0.15s;
}

.sig-generate-btn:hover:not(:disabled) {
  background: var(--primary-dark);
}

.sig-generate-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.sig-no-permission {
  font-size: 0.8rem;
  color: var(--text-secondary);
  text-align: center;
}

/* ── Spinner ─────────────────────────────────────────────────────────────────── */
.sig-spin {
  animation: sig-spin-kf 0.8s linear infinite;
}

@keyframes sig-spin-kf {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* ── Result panel ────────────────────────────────────────────────────────────── */
.sig-result-panel {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.sig-result-section {
  min-height: 280px;
  display: flex;
  flex-direction: column;
}

/* Empty state */
.sig-empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 10px;
  padding: 24px;
  color: var(--text-secondary);
}

.sig-empty-icon {
  font-size: 3rem;
  opacity: 0.3;
  color: var(--text-primary);
}

.sig-empty-hint {
  font-size: 0.78rem;
  opacity: 0.7;
}

/* Generating state */
.sig-generating {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 32px;
  text-align: center;
}

.sig-generating-spinner {
  width: 48px;
  height: 48px;
  border: 4px solid var(--border-color);
  border-top-color: var(--primary-color);
  border-radius: 50%;
  animation: sig-spin-kf 0.9s linear infinite;
}

.sig-generating-hint {
  font-size: 0.8rem;
  color: var(--text-secondary);
}

/* Error state */
.sig-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 24px;
  text-align: center;
  flex: 1;
  justify-content: center;
}

.sig-error-title {
  font-weight: 700;
  color: var(--error-color, var(--danger));
}

.sig-error-message {
  font-size: 0.85rem;
  color: var(--text-secondary);
  max-width: 420px;
}

.sig-retry-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 18px;
  font-size: 0.88rem;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  color: var(--text-primary);
  cursor: pointer;
  margin-top: 6px;
  transition: border-color 0.15s;
}

.sig-retry-btn:hover {
  border-color: var(--primary-color);
}

/* Result image */
.sig-result {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.sig-result-image-wrapper {
  width: 100%;
  border-radius: 8px;
  overflow: hidden;
  background: var(--img-placeholder-bg);
  display: flex;
  align-items: center;
  justify-content: center;
}

.sig-result-image {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 8px;
  max-height: 500px;
  object-fit: contain;
}

.sig-result-meta {
  display: flex;
  gap: 14px;
  font-size: 0.78rem;
  color: var(--text-secondary);
}

.sig-result-prompt {
  font-size: 0.82rem;
  color: var(--text-secondary);
  font-style: italic;
  word-break: break-word;
}

.sig-result-series {
  font-weight: 600;
}

.sig-result-details {
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 10px 12px;
  background: var(--bg-secondary);
}

.sig-result-details summary {
  cursor: pointer;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-primary);
}

.sig-result-details[open] summary {
  margin-bottom: 8px;
}

.sig-download-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  font-size: 0.9rem;
  font-weight: 600;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  color: var(--text-primary);
  cursor: pointer;
  width: fit-content;
  transition: border-color 0.15s, background 0.15s;
}

.sig-download-btn:hover {
  border-color: var(--primary-color);
  background: color-mix(in srgb, var(--primary-color) 8%, var(--card-bg));
}

/* ── History ─────────────────────────────────────────────────────────────────── */
.sig-history-section {
  padding: 16px;
}

.sig-history-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
  gap: 8px;
}

.sig-history-item {
  position: relative;
  border: 2px solid var(--border-color);
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  padding: 0;
  background: var(--img-placeholder-bg);
  transition: border-color 0.15s;
  aspect-ratio: 1;
}

.sig-history-item:hover,
.sig-history-item.active {
  border-color: var(--primary-color);
}

.sig-history-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.sig-history-dims {
  position: absolute;
  bottom: 2px;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 0.6rem;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  padding: 1px 2px;
}

/* ── Result actions row ─────────────────────────────────────────────────────── */
.sig-result-actions {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-top: 0.5rem;
}

.sig-text-toggle-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.45rem 1rem;
  border-radius: 6px;
  border: 1.5px solid var(--primary-color);
  background: transparent;
  color: var(--primary-color);
  font-size: 0.85rem;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.sig-text-toggle-btn:hover {
  background: var(--primary-color);
  color: #fff;
}

/* ── Text overlay panel ─────────────────────────────────────────────────────── */
.sig-text-panel {
  margin-top: 0.75rem;
  padding: 1rem;
  border-radius: 8px;
  border: 1px solid var(--border-color, #e0e0e0);
  background: var(--bg-secondary, #f8f8f8);
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.sig-text-row {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.sig-text-label {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-secondary);
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.sig-text-input {
  width: 100%;
  padding: 0.5rem 0.75rem;
  border-radius: 6px;
  border: 1px solid var(--border-color, #ccc);
  background: var(--bg-primary, #fff);
  color: var(--text-primary);
  font-size: 0.95rem;
  box-sizing: border-box;
}
.sig-text-input:focus {
  outline: none;
  border-color: var(--primary-color);
}

.sig-text-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: flex-end;
}

.sig-text-num {
  width: 72px;
  padding: 0.35rem 0.5rem;
  border-radius: 6px;
  border: 1px solid var(--border-color, #ccc);
  background: var(--bg-primary, #fff);
  color: var(--text-primary);
  font-size: 0.85rem;
}

.sig-text-color {
  width: 40px;
  height: 32px;
  padding: 2px;
  border-radius: 6px;
  border: 1px solid var(--border-color, #ccc);
  background: var(--bg-primary, #fff);
  cursor: pointer;
}

.sig-text-select {
  padding: 0.35rem 0.5rem;
  border-radius: 6px;
  border: 1px solid var(--border-color, #ccc);
  background: var(--bg-primary, #fff);
  color: var(--text-primary);
  font-size: 0.85rem;
}

.sig-text-range {
  width: 100px;
  cursor: pointer;
  accent-color: var(--primary-color);
}

.sig-text-footer {
  display: flex;
  gap: 0.5rem;
  justify-content: flex-end;
  flex-wrap: wrap;
}

.sig-text-apply-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 1.2rem;
  border-radius: 6px;
  border: none;
  background: var(--primary-color);
  color: #fff;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.15s;
}
.sig-text-apply-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.sig-text-apply-btn:not(:disabled):hover {
  opacity: 0.85;
}

.sig-text-clear-btn {
  padding: 0.5rem 1rem;
  border-radius: 6px;
  border: 1px solid var(--border-color, #ccc);
  background: transparent;
  color: var(--text-secondary);
  font-size: 0.85rem;
  cursor: pointer;
  transition: background 0.15s;
}
.sig-text-clear-btn:hover {
  background: var(--bg-secondary, #eee);
}

/* ── Product upload button ───────────────────────────────────────────────────── */
.sig-product-upload-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.45rem 0.9rem;
  border-radius: 6px;
  border: 1.5px dashed var(--border-color, #ccc);
  background: var(--bg-primary, #fff);
  color: var(--text-primary);
  font-size: 0.85rem;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sig-product-upload-btn:hover {
  border-color: var(--primary-color);
  background: var(--bg-secondary, #f5f5f5);
}

/* ── Product preview thumbnail ───────────────────────────────────────────────── */
.sig-product-preview {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.sig-product-thumb {
  width: 64px;
  height: 64px;
  object-fit: contain;
  border-radius: 6px;
  border: 1px solid var(--border-color, #ddd);
  background: repeating-conic-gradient(#ccc 0% 25%, #fff 0% 50%) 0 0 / 12px 12px;
}
.sig-product-filename {
  font-size: 0.78rem;
  color: var(--text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 200px;
}

/* ── Active state for toggle buttons ─────────────────────────────────────────── */
.sig-text-toggle-btn.active {
  background: var(--primary-color);
  color: #fff;
}

/* ── Dark theme overrides for product panel ──────────────────────────────────── */
html[data-theme="cyberpunk"] .sig-product-upload-btn,
html[data-theme="jarvis"] .sig-product-upload-btn,
html[data-theme="rock"] .sig-product-upload-btn,
html[data-theme="golden"] .sig-product-upload-btn {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.25);
  color: inherit;
}
html[data-theme="cyberpunk"] .sig-product-thumb,
html[data-theme="jarvis"] .sig-product-thumb,
html[data-theme="rock"] .sig-product-thumb,
html[data-theme="golden"] .sig-product-thumb {
  background: repeating-conic-gradient(#444 0% 25%, #333 0% 50%) 0 0 / 12px 12px;
  border-color: rgba(255, 255, 255, 0.2);
}

/* ── Theme overrides for text panel ─────────────────────────────────────────── */
html[data-theme="cyberpunk"] .sig-text-panel,
html[data-theme="jarvis"] .sig-text-panel,
html[data-theme="rock"] .sig-text-panel,
html[data-theme="golden"] .sig-text-panel {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.15);
}
html[data-theme="cyberpunk"] .sig-text-input,
html[data-theme="cyberpunk"] .sig-text-num,
html[data-theme="cyberpunk"] .sig-text-select,
html[data-theme="jarvis"] .sig-text-input,
html[data-theme="jarvis"] .sig-text-num,
html[data-theme="jarvis"] .sig-text-select,
html[data-theme="rock"] .sig-text-input,
html[data-theme="rock"] .sig-text-num,
html[data-theme="rock"] .sig-text-select,
html[data-theme="golden"] .sig-text-input,
html[data-theme="golden"] .sig-text-num,
html[data-theme="golden"] .sig-text-select {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.2);
  color: inherit;
}

/* ── Guided redesign overrides ─────────────────────────────────────────────── */
.sig-guide {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.sig-guide-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--primary-color) 10%, var(--card-bg)), var(--card-bg));
  border: 1px solid color-mix(in srgb, var(--primary-color) 22%, var(--border-color));
  border-radius: 12px;
}

.sig-guide-card strong {
  display: block;
  font-size: 0.92rem;
  color: var(--text-primary);
}

.sig-guide-card p {
  margin: 2px 0 0;
  font-size: 0.8rem;
  color: var(--text-secondary);
}

.sig-guide-step,
.sig-step-badge {
  width: 30px;
  height: 30px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--primary-color);
  color: var(--btn-primary-text);
  font-size: 0.86rem;
  font-weight: 700;
  flex-shrink: 0;
}

.sig-step-section {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.sig-step-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 2px;
}

.sig-step-badge--optional {
  background: color-mix(in srgb, var(--primary-color) 18%, var(--card-bg));
  color: var(--text-primary);
}

.sig-step-title {
  margin-bottom: 4px;
}

.sig-step-note,
.sig-inline-note {
  margin: 0;
  font-size: 0.82rem;
  color: var(--text-secondary);
  line-height: 1.45;
}

.sig-step-actions {
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.sig-series-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.sig-collapsible-header--inner {
  padding: 0;
  margin-top: 14px;
  font-size: 0.78rem;
}

.sig-advanced-body {
  padding: 0 18px 18px;
}

.sig-template-create {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
}

.sig-template-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.sig-template-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
}

.sig-template-apply {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: 12px;
  border-radius: 10px;
  border: 1px solid var(--border-color);
  background: var(--bg-secondary);
  color: var(--text-primary);
  cursor: pointer;
  text-align: left;
}

.sig-template-apply strong {
  font-size: 0.84rem;
}

.sig-template-apply span {
  font-size: 0.74rem;
  color: var(--text-secondary);
}

.sig-template-apply:hover {
  border-color: var(--primary-color);
}

.sig-template-delete {
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid var(--border-color);
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
}

.sig-template-delete:hover {
  border-color: var(--primary-color);
  color: var(--text-primary);
}

.sig-preview-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 16px;
}

.sig-status-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.sig-status-chip {
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--border-color);
  background: var(--bg-secondary);
  color: var(--text-secondary);
  font-size: 0.74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.sig-status-chip.is-active {
  border-color: color-mix(in srgb, var(--primary-color) 45%, var(--border-color));
  background: color-mix(in srgb, var(--primary-color) 14%, var(--card-bg));
  color: var(--text-primary);
}

.sig-layer-empty {
  padding: 14px;
  border-radius: 8px;
  border: 1px dashed var(--border-color);
  background: var(--bg-secondary);
  color: var(--text-secondary);
  font-size: 0.84rem;
  line-height: 1.5;
}

.sig-layer-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.sig-layer-file {
  font-size: 0.8rem;
  color: var(--text-secondary);
}

.sig-layer-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.sig-layer-grid--text {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.sig-product-preview {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 8px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
}

.sig-product-thumb {
  width: 56px;
  height: 56px;
  object-fit: cover;
  border-radius: 8px;
  flex-shrink: 0;
}

.sig-product-filename {
  font-size: 0.82rem;
  color: var(--text-primary);
  word-break: break-word;
  max-width: none;
  white-space: normal;
}

@media (max-width: 1024px) {
  .sig-goal-grid {
    grid-template-columns: 1fr;
  }

  .sig-guide {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .sig-template-create,
  .sig-template-item {
    grid-template-columns: 1fr;
  }

  .sig-preview-header {
    flex-direction: column;
  }

  .sig-status-row {
    justify-content: flex-start;
  }

  .sig-layer-grid,
  .sig-layer-grid--text {
    grid-template-columns: 1fr;
  }
}
: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;
}

.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;
}