/* Light appearance – toggled via html.appearance-light (see layout + appearance.js) */

html.appearance-light {
  color-scheme: light;
  --bg: #e9ecf2;
  --bg-soft: #ffffff;
  --bg-base: #dfe4ec;
  --border-soft: #c8d1dc;
  --text: #0f172a;
  --text-muted: #475569;
  --shadow-soft: 0 8px 28px rgba(15, 23, 42, 0.1);
  --surface-raised: #ffffff;
  --surface-raised-solid: #f1f5f9;
  --surface-muted-95: #e8edf3;
  --surface-muted-80: #eef2f7;
  --surface-muted-85: #e4eaf1;
  --surface-muted-75: #dde4ed;
  --surface-muted-65: #d5dde8;
  --surface-muted-60: #cbd5e3;
  --surface-bar-top: rgba(255, 255, 255, 0.94);
  --surface-bar-bottom: rgba(248, 250, 252, 0.98);
  --surface-deep: #ffffff;
  --surface-deep-90: rgba(255, 255, 255, 0.92);
  --surface-deep-45: rgba(248, 250, 252, 0.72);
  --hero-scrim-1: rgba(255, 255, 255, 0.94);
  --hero-scrim-2: rgba(255, 255, 255, 0.78);
  --hero-scrim-3: rgba(255, 255, 255, 0.42);
  --hero-scrim-4: rgba(255, 255, 255, 0.05);
  --hero-inset: rgba(255, 255, 255, 0.55);
  --table-bg: #dde3ec;
  --table-head-bg: #d0d8e4;
  --table-row: #e4e9f1;
  --table-row-alt: #d8dfe9;
  --table-row-hover: rgba(var(--accent-rgb), 0.14);
  --table-border: #c2ccd8;
}

html.appearance-light .theme-purple {
  --gradient-center: #ede9fe;
  --gradient-center-rgb: 237, 233, 254;
}
html.appearance-light .theme-blue {
  --gradient-center: #dbeafe;
  --gradient-center-rgb: 219, 234, 254;
}
html.appearance-light .theme-green {
  --gradient-center: #d1fae5;
  --gradient-center-rgb: 209, 250, 229;
}
html.appearance-light .theme-pink {
  --gradient-center: #fce7f3;
  --gradient-center-rgb: 252, 231, 243;
}
html.appearance-light .theme-orange {
  --gradient-center: #ffedd5;
  --gradient-center-rgb: 255, 237, 213;
}
html.appearance-light .theme-red {
  --gradient-center: #fee2e2;
  --gradient-center-rgb: 254, 226, 226;
}

html.appearance-light .btn-small:not(.btn-primary):not(.btn-danger):not(.btn-secondary) {
  color: var(--text);
  background: var(--surface-muted-80);
  border-color: var(--border-soft);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
}

html.appearance-light .btn-small:not(.btn-primary):not(.btn-danger):not(.btn-secondary):hover {
  color: var(--text);
  background: var(--surface-raised);
  border-color: rgba(var(--accent-rgb), 0.35);
}

html.appearance-light .btn-small.btn-secondary {
  background: var(--bg-soft);
  color: var(--text);
  border-color: var(--border-soft);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
}

html.appearance-light .btn-small.btn-secondary:hover {
  background: var(--surface-muted-80);
  border-color: rgba(var(--accent-rgb), 0.35);
  color: var(--text);
}

html.appearance-light .btn-secondary {
  border-color: var(--border-soft);
}

html.appearance-light .btn-secondary:hover {
  border-color: #94a3b8;
}

html.appearance-light .divider {
  border-top-color: var(--border-soft);
}

html.appearance-light .user-overview-card .link-inline {
  color: #2563eb;
}

html.appearance-light .user-overview-card .link-inline:hover {
  color: #1d4ed8;
}

html.appearance-light .nav-pill-warning {
  background: rgba(251, 191, 36, 0.2);
  color: #b45309;
}

html.appearance-light .nav-pill-info {
  background: rgba(59, 130, 246, 0.15);
  color: #1d4ed8;
}

html.appearance-light .admin-hub-stats {
  background: var(--bg-soft) !important;
  border-color: var(--border-soft) !important;
  box-shadow: var(--shadow-soft) !important;
}

/* Admin shell & dashboard */
html.appearance-light .admin-main-card .admin-metric {
  background: var(--surface-raised-solid);
  border-color: var(--border-soft);
  box-shadow: none;
}
html.appearance-light .admin-main-card .admin-metric-value {
  color: var(--text);
}
html.appearance-light .admin-main-card .admin-applications-tab-strip {
  background: var(--surface-raised-solid);
  border-color: var(--border-soft);
  box-shadow: none;
}
html.appearance-light .admin-main-card .admin-application-tab {
  background: var(--bg-soft);
  color: var(--text);
  border-color: var(--border-soft);
}
html.appearance-light .admin-main-card .admin-application-tab:hover {
  background: rgba(var(--accent-rgb), 0.08);
  border-color: rgba(var(--accent-rgb), 0.35);
}
html.appearance-light .admin-main-card .admin-application-tab.is-active {
  background: rgba(var(--accent-rgb), 0.12);
  border-color: rgba(var(--accent-rgb), 0.45);
  color: var(--text);
  box-shadow: none;
}
html.appearance-light .admin-nav-item {
  background: var(--surface-muted-75);
  border-color: var(--border-soft);
}
html.appearance-light .admin-nav-item:hover {
  border-color: rgba(var(--accent-rgb), 0.4);
  background: var(--bg-soft);
}
html.appearance-light .admin-nav-item.is-active {
  background: rgba(var(--accent-rgb), 0.1);
  border-color: rgba(var(--accent-rgb), 0.45);
}
html.appearance-light .admin-nav-item.is-disabled:hover {
  border-color: var(--border-soft);
}
html.appearance-light .global-search-input,
html.appearance-light #global-search-input {
  background: var(--bg-soft);
  color: var(--text);
  border-color: var(--border-soft);
}
html.appearance-light .global-search-input::placeholder,
html.appearance-light #global-search-input::placeholder {
  color: var(--text-muted);
}
html.appearance-light .global-search-results {
  background: var(--bg-soft);
  border-color: var(--border-soft);
}
html.appearance-light .global-search-result-item:hover {
  background: rgba(var(--accent-rgb), 0.1);
}
html.appearance-light .admin-quick-action {
  background: var(--bg-soft);
  border-color: var(--border-soft);
}
html.appearance-light .admin-quick-action:hover {
  background: rgba(var(--accent-rgb), 0.06);
  border-color: rgba(var(--accent-rgb), 0.4);
}
html.appearance-light .staff-settings-panel {
  background: var(--bg-soft);
  border-color: var(--border-soft);
}
html.appearance-light .insight-card {
  background: var(--bg-soft);
  border-color: var(--border-soft);
  box-shadow: var(--shadow-soft);
}
/* Applications Hub – layered panels (not all flat white) */
html.appearance-light .admin-main-card .admin-setting-card {
  background: var(--surface-raised-solid);
  border-color: var(--border-soft);
  box-shadow: none;
}
html.appearance-light .admin-main-card .collapsible-card {
  background: var(--bg-soft);
  border-color: var(--border-soft);
  box-shadow: none;
}
html.appearance-light .admin-main-card .collapsible-nested {
  background: var(--surface-raised-solid);
  border-color: var(--border-soft);
}
html.appearance-light .admin-main-card .collapsible-icon {
  background: var(--bg-soft);
  border-color: var(--border-soft);
  color: var(--text-muted);
}
html.appearance-light .admin-main-card .form-control,
html.appearance-light .admin-main-card input.form-control,
html.appearance-light .admin-main-card select.form-control,
html.appearance-light .admin-main-card textarea.form-control,
html.appearance-light .admin-main-card .form-row-inline select,
html.appearance-light .admin-main-card .form-row-stack textarea {
  background: var(--bg-soft);
  color: var(--text);
  border-color: var(--border-soft);
}
html.appearance-light .admin-main-card .form-control:focus,
html.appearance-light .admin-main-card .form-row-inline select:focus,
html.appearance-light .admin-main-card .form-row-stack textarea:focus {
  background: var(--bg-soft);
  border-color: rgba(var(--accent-rgb), 0.5);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.12);
}
html.appearance-light .admin-main-card select.form-control,
html.appearance-light .admin-main-card .form-row-inline select {
  color-scheme: light;
}
html.appearance-light .admin-main-card .btn-small.btn-secondary {
  background: var(--bg-soft);
  color: var(--text);
  border-color: var(--border-soft);
}
html.appearance-light .admin-main-card .btn-small.btn-secondary:hover {
  background: var(--surface-muted-80);
  border-color: rgba(var(--accent-rgb), 0.35);
}
html.appearance-light .admin-main-card .pill-success {
  background: rgba(34, 197, 94, 0.15);
  color: #15803d;
}
html.appearance-light .admin-main-card .pill-danger {
  background: rgba(239, 68, 68, 0.12);
  color: #b91c1c;
}
html.appearance-light .admin-main-card .pill-warning {
  background: rgba(251, 191, 36, 0.2);
  color: #b45309;
}
html.appearance-light .admin-main-card .tag-info {
  background: rgba(59, 130, 246, 0.12);
  color: #1d4ed8;
  border: 1px solid rgba(59, 130, 246, 0.35);
}
html.appearance-light .insight-value {
  color: var(--text);
}
html.appearance-light .inline-form select,
html.appearance-light .staff-add-grid input,
html.appearance-light .staff-add-grid select,
html.appearance-light .staff-add-form textarea {
  background: var(--surface-raised);
  color: var(--text);
  border-color: var(--border-soft);
}
html.appearance-light .admin-shell select,
html.appearance-light .admin-shell input[type="number"],
html.appearance-light .admin-shell input[type="text"],
html.appearance-light .admin-shell input[type="date"],
html.appearance-light .admin-shell input[type="url"],
html.appearance-light .admin-shell input[type="email"],
html.appearance-light .admin-shell textarea {
  background: var(--surface-raised);
  color: var(--text);
  border-color: var(--border-soft);
}
html.appearance-light .app-filters,
html.appearance-light .admin-analytics-filters,
html.appearance-light .admin-chart-panel,
html.appearance-light #announcement-filters {
  background: var(--bg-soft);
  border-color: var(--border-soft);
  box-shadow: var(--shadow-soft);
}
html.appearance-light .app-filters .filter-field .form-control,
html.appearance-light .admin-analytics-filters .filter-field .form-control,
html.appearance-light #announcement-filters .filter-field .form-control,
html.appearance-light .activity-filter-select,
html.appearance-light .activity-filter-input {
  background: var(--surface-raised) !important;
  color: var(--text) !important;
  border-color: var(--border-soft) !important;
}
html.appearance-light .app-filters .filter-field .form-control:focus,
html.appearance-light .admin-analytics-filters .filter-field .form-control:focus,
html.appearance-light #announcement-filters .filter-field .form-control:focus {
  background: var(--surface-raised) !important;
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.12) !important;
}
html.appearance-light .app-filters input[type="date"],
html.appearance-light .app-filters select,
html.appearance-light .admin-analytics-filters input[type="date"],
html.appearance-light .admin-analytics-filters select {
  color-scheme: light;
}
html.appearance-light .admin-table tbody tr {
  background: var(--bg-soft);
}
html.appearance-light .admin-table th {
  background: var(--table-head-bg);
  color: #475569;
  border-bottom: 1px solid var(--table-border);
}
html.appearance-light .admin-table td {
  color: var(--text);
  border-bottom-color: var(--table-border);
}
html.appearance-light .admin-table tbody tr:hover {
  background: var(--table-row-hover);
}
html.appearance-light .ticket-reply-quill .ql-toolbar {
  background: var(--surface-muted-75) !important;
  border-color: var(--border-soft) !important;
}
html.appearance-light .ticket-reply-quill .ql-container {
  background: var(--bg-soft) !important;
  border-color: var(--border-soft) !important;
  color: var(--text) !important;
}
html.appearance-light .ticket-reply-quill .ql-editor {
  background: var(--bg-soft) !important;
  color: var(--text) !important;
}
html.appearance-light .ticket-reply-quill .ql-editor.ql-blank::before {
  color: #64748b !important;
  font-style: normal !important;
}
html.appearance-light .ticket-reply-quill .ql-toolbar .ql-stroke {
  stroke: #475569 !important;
}
html.appearance-light .ticket-reply-quill .ql-toolbar .ql-fill {
  fill: #475569 !important;
}
html.appearance-light .ticket-reply-quill .ql-toolbar button:hover .ql-stroke {
  stroke: var(--accent) !important;
}
html.appearance-light .ticket-reply-quill .ql-toolbar button:hover .ql-fill {
  fill: var(--accent) !important;
}
html.appearance-light .admin-shell .ticket-reply-quill .ql-toolbar {
  background: var(--surface-muted-75) !important;
  border-color: var(--border-soft) !important;
}
html.appearance-light .admin-shell .ticket-reply-quill .ql-container {
  background: var(--bg-soft) !important;
  border-color: var(--border-soft) !important;
  color: var(--text) !important;
}
html.appearance-light .admin-shell .ticket-reply-quill .ql-editor {
  background: var(--bg-soft) !important;
  color: var(--text) !important;
}
html.appearance-light .admin-shell .ticket-reply-quill .ql-editor.ql-blank::before {
  color: #64748b !important;
}
html.appearance-light .admin-shell .ticket-reply-quill .ql-toolbar .ql-stroke {
  stroke: #475569 !important;
}
html.appearance-light .admin-shell .ticket-reply-quill .ql-toolbar .ql-fill {
  fill: #475569 !important;
}
html.appearance-light #ticket-tags-section #ticket-tag-input,
html.appearance-light #ticket-participants-section #participant-search,
html.appearance-light #ticket-participants-section #participant-permission-new,
html.appearance-light #ticket-participants-section .participant-permission-select {
  background: var(--surface-raised);
  color: var(--text);
  border-color: var(--border-soft);
}
html.appearance-light #ticket-participants-section #participant-search-results {
  background: var(--bg-soft) !important;
  border-color: var(--border-soft);
  box-shadow: var(--shadow-soft);
}
html.appearance-light .ticket-activity-item,
html.appearance-light .ticket-original-message-box,
html.appearance-light .ticket-empty-replies,
html.appearance-light .ticket-quote-preview,
html.appearance-light .ticket-status-notice {
  background: var(--surface-raised-solid);
  border-color: var(--border-soft);
}

html.appearance-light .ticket-activity-item,
html.appearance-light .ticket-original-message-box,
html.appearance-light .ticket-quote-preview {
  border-left-color: rgba(var(--accent-rgb), 0.45);
}

html.appearance-light .ticket-empty-replies {
  border-style: dashed;
  border-color: var(--border-soft);
  background: var(--surface-muted-80);
}

html.appearance-light .ticket-detail-field-value,
html.appearance-light .ticket-activity-item-title,
html.appearance-light .ticket-original-message-author,
html.appearance-light .ticket-contact-value,
html.appearance-light .ticket-quote-preview-header strong {
  color: var(--text);
}

html.appearance-light .ticket-detail-field-label,
html.appearance-light .ticket-activity-item-time,
html.appearance-light .ticket-activity-item-desc,
html.appearance-light .ticket-activity-item-by,
html.appearance-light .ticket-original-message-time,
html.appearance-light .ticket-empty-replies-text,
html.appearance-light .ticket-last-seen,
html.appearance-light .ticket-quote-preview-body {
  color: var(--text-muted);
}

html.appearance-light .ticket-reply-card {
  background: var(--bg-soft);
  border-color: var(--border-soft);
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
}

html.appearance-light .ticket-reply-card:hover {
  border-color: rgba(var(--accent-rgb), 0.35);
}

html.appearance-light .ticket-reply-card--staff {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.1) 0%, var(--bg-soft) 100%);
  border-left-color: rgba(59, 130, 246, 0.55);
}

html.appearance-light .ticket-reply-card--user {
  background: var(--surface-raised-solid);
  border-left-color: var(--border-soft);
}

html.appearance-light .ticket-reply-card--internal {
  background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.1) 0%, var(--bg-soft) 100%);
  border-left-color: var(--accent);
}

html.appearance-light .ticket-reply-header {
  border-bottom-color: var(--border-soft);
}

html.appearance-light .ticket-reply-quote {
  background: var(--surface-muted-80);
  color: var(--text-muted);
}

html.appearance-light .ticket-reply-quote strong {
  color: var(--text);
}

html.appearance-light .ticket-contact-row--steam {
  background: rgba(15, 23, 42, 0.06);
  border-left-color: var(--border-soft);
}

html.appearance-light .ticket-participant-row,
html.appearance-light .ticket-task-item {
  background: var(--surface-raised-solid);
  border-color: var(--border-soft);
}

html.appearance-light .ticket-task-item--pending {
  background: rgba(34, 197, 94, 0.08);
  border-left-color: rgba(34, 197, 94, 0.5);
}

html.appearance-light .ticket-task-merge-preview {
  background: var(--surface-muted-80);
  border-color: var(--border-soft);
}

/* Queue page */
html.appearance-light .queue-hero {
  background: linear-gradient(135deg, #ffffff 0%, var(--surface-muted-80) 100%);
  border-color: rgba(var(--accent-rgb), 0.3);
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.08);
}

html.appearance-light .queue-hero::after {
  opacity: 0.35;
}

html.appearance-light .queue-rank-circle {
  background: radial-gradient(circle, rgba(var(--accent-rgb), 0.2), var(--surface-raised));
  border-color: rgba(var(--accent-rgb), 0.45);
}

html.appearance-light .queue-rank-value {
  color: var(--accent-dark);
}

html.appearance-light .queue-rank-label,
html.appearance-light .queue-meta,
html.appearance-light .queue-hint,
html.appearance-light .queue-metric-label,
html.appearance-light .queue-metric-sub,
html.appearance-light .queue-actions-hint,
html.appearance-light .queue-timestamp,
html.appearance-light .queue-flow-desc,
html.appearance-light .queue-empty {
  color: var(--text-muted);
}

html.appearance-light .queue-meta span,
html.appearance-light .queue-metric-value,
html.appearance-light .queue-flow-title,
html.appearance-light .queue-actions-panel h3,
html.appearance-light .queue-flow h3,
html.appearance-light .queue-overview-card h2 {
  color: var(--text);
}

html.appearance-light .queue-metric-card,
html.appearance-light .queue-actions-panel,
html.appearance-light .queue-flow-item {
  background: var(--surface-muted-80);
  border-color: var(--border-soft);
}

html.appearance-light .queue-flow-item.is-active {
  background: var(--surface-raised);
  border-color: rgba(var(--accent-rgb), 0.45);
}

html.appearance-light .queue-flow-icon {
  background: rgba(var(--accent-rgb), 0.12);
  color: var(--accent-dark);
}

html.appearance-light .queue-flow {
  background: var(--bg-soft);
}

html.appearance-light .queue-overview-card {
  background: var(--bg-soft);
}

html.appearance-light .queue-table {
  background: var(--surface-raised);
}

html.appearance-light .queue-table th {
  color: #64748b;
  background: var(--surface-muted-80);
}

html.appearance-light .queue-table td {
  color: var(--text);
}

html.appearance-light .queue-chip-ready {
  color: #166534;
  background: rgba(34, 197, 94, 0.16);
}

html.appearance-light .queue-chip-waiting {
  color: #b45309;
  background: rgba(251, 191, 36, 0.2);
}

html.appearance-light .queue-pill-web {
  color: #1d4ed8;
  background: rgba(59, 130, 246, 0.14);
}

html.appearance-light .queue-pill-ingame {
  color: #15803d;
  background: rgba(16, 185, 129, 0.14);
}

html.appearance-light .queue-ready-alert p {
  color: #166534;
}

html.appearance-light .queue-messages p {
  color: var(--text-muted);
}
html.appearance-light .ticket-reply-content .ticket-mention,
html.appearance-light .ticket-reply-content span[data-user-id],
html.appearance-light .ticket-reply-content span[data-id] {
  background: rgba(var(--accent-rgb), 0.14) !important;
  color: var(--accent-dark) !important;
}
html.appearance-light .tab-button {
  background: var(--bg-soft);
  border-color: var(--border-soft);
  color: var(--text-muted);
}
html.appearance-light .tab-button:hover {
  color: var(--text);
  border-color: #94a3b8;
}
html.appearance-light .tab-button.is-active {
  background: rgba(var(--accent-rgb), 0.14);
  color: var(--accent-dark);
  border-color: rgba(var(--accent-rgb), 0.45);
  box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), 0.2);
}
html.appearance-light .admin-canned-replies-tab .canned-replies-list-item,
html.appearance-light .admin-canned-replies-tab .canned-replies-add-card {
  background: var(--bg-soft);
  border-color: var(--border-soft);
  box-shadow: var(--shadow-soft);
}
html.appearance-light .admin-canned-replies-tab .canned-replies-category-tag {
  background: rgba(var(--accent-rgb), 0.12);
  color: var(--accent-dark);
}
html.appearance-light .admin-canned-replies-tab .canned-replies-modal-backdrop {
  background: rgba(15, 23, 42, 0.35);
}
html.appearance-light .admin-canned-replies-tab .canned-replies-modal-panel {
  background: var(--bg-soft);
  border-color: var(--border-soft);
  box-shadow: var(--shadow-soft);
}
html.appearance-light .admin-canned-replies-tab .canned-replies-add-body .form-control,
html.appearance-light .admin-canned-replies-tab .canned-replies-modal .form-control {
  background: var(--surface-raised);
  color: var(--text);
  border-color: var(--border-soft);
}
html.appearance-light .admin-canned-replies-tab .canned-replies-quill-wrap .ql-toolbar {
  background: var(--surface-muted-75) !important;
  border-color: var(--border-soft) !important;
}
html.appearance-light .admin-canned-replies-tab .canned-replies-quill-wrap .ql-container {
  background: var(--bg-soft) !important;
  border-color: var(--border-soft) !important;
  color: var(--text) !important;
}
html.appearance-light .admin-canned-replies-tab .canned-replies-quill-wrap .ql-editor {
  background: var(--bg-soft) !important;
  color: var(--text) !important;
}
html.appearance-light .admin-canned-replies-tab .canned-replies-quill-wrap .ql-editor.ql-blank::before {
  color: #64748b !important;
}
html.appearance-light .admin-canned-replies-tab .canned-replies-quill-wrap .ql-toolbar .ql-stroke {
  stroke: #475569 !important;
}
html.appearance-light .admin-canned-replies-tab .canned-replies-quill-wrap .ql-toolbar .ql-fill {
  fill: #475569 !important;
}

/* Announcement create/edit modals – Quill */
html.appearance-light #announcement-modal .announcement-quill-wrap .ql-toolbar,
html.appearance-light #edit-announcement-modal .announcement-quill-wrap .ql-toolbar {
  background: var(--surface-muted-75) !important;
  border-color: var(--border-soft) !important;
}
html.appearance-light #announcement-modal .announcement-quill-wrap .ql-container,
html.appearance-light #edit-announcement-modal .announcement-quill-wrap .ql-container {
  background: var(--bg-soft) !important;
  border-color: var(--border-soft) !important;
  color: var(--text) !important;
}
html.appearance-light #announcement-modal .announcement-quill-wrap .ql-editor,
html.appearance-light #edit-announcement-modal .announcement-quill-wrap .ql-editor {
  background: var(--bg-soft) !important;
  color: var(--text) !important;
}
html.appearance-light #announcement-modal .announcement-quill-wrap .ql-editor.ql-blank::before,
html.appearance-light #edit-announcement-modal .announcement-quill-wrap .ql-editor.ql-blank::before {
  color: #64748b !important;
}
html.appearance-light #announcement-modal .announcement-quill-wrap .ql-toolbar .ql-stroke,
html.appearance-light #edit-announcement-modal .announcement-quill-wrap .ql-toolbar .ql-stroke {
  stroke: #475569 !important;
}
html.appearance-light #announcement-modal .announcement-quill-wrap .ql-toolbar .ql-fill,
html.appearance-light #edit-announcement-modal .announcement-quill-wrap .ql-toolbar .ql-fill {
  fill: #475569 !important;
}
html.appearance-light #announcement-modal .user-modal-content h2,
html.appearance-light #edit-announcement-modal .user-modal-content h2 {
  color: var(--text);
}

/* Admin – Partners */
html.appearance-light .admin-partners .partners-add-card,
html.appearance-light .admin-partners .partners-list-item {
  background: var(--bg-soft);
  border-color: var(--border-soft);
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
}
html.appearance-light .admin-partners .admin-partners-input,
html.appearance-light .admin-partners .admin-partners-color-picker {
  background: var(--surface-raised);
  color: var(--text);
  border-color: var(--border-soft);
}
html.appearance-light .admin-partners .partners-modal-panel {
  background: var(--bg-soft);
  border-color: var(--border-soft);
  box-shadow: var(--shadow-soft);
}
html.appearance-light .admin-partners .partners-list-item-color {
  border-color: var(--border-soft);
}

/* Admin – About page (Quill body editor) */
html.appearance-light .admin-about .admin-about-editor-wrap .ql-toolbar {
  background: var(--surface-muted-75) !important;
  border-bottom-color: var(--border-soft) !important;
}
html.appearance-light .admin-about .admin-about-editor-wrap .ql-container,
html.appearance-light .admin-about .admin-about-editor-wrap .ql-editor {
  background: var(--bg-soft) !important;
  color: var(--text) !important;
}
html.appearance-light .admin-about .admin-about-editor-wrap .ql-editor h1,
html.appearance-light .admin-about .admin-about-editor-wrap .ql-editor h2,
html.appearance-light .admin-about .admin-about-editor-wrap .ql-editor h3,
html.appearance-light .admin-about .admin-about-editor-wrap .ql-editor p,
html.appearance-light .admin-about .admin-about-editor-wrap .ql-editor li,
html.appearance-light .admin-about .admin-about-editor-wrap .ql-editor span,
html.appearance-light .admin-about .admin-about-editor-wrap .ql-editor strong {
  color: var(--text) !important;
}
html.appearance-light .admin-about .admin-about-editor-wrap .ql-editor a {
  color: var(--accent) !important;
}
html.appearance-light .admin-about .admin-about-editor-wrap .ql-editor.ql-blank::before {
  color: #64748b !important;
}
html.appearance-light .admin-about .admin-about-editor-wrap .ql-toolbar .ql-stroke {
  stroke: #475569 !important;
}
html.appearance-light .admin-about .admin-about-editor-wrap .ql-toolbar .ql-fill {
  fill: #475569 !important;
}
html.appearance-light .admin-about .branding-input,
html.appearance-light .admin-about .branding-textarea {
  background: var(--surface-raised);
  color: var(--text);
  border-color: var(--border-soft);
}

/* Admin – Site branding */
html.appearance-light .admin-branding .branding-preview-card,
html.appearance-light .admin-branding .branding-form-section,
html.appearance-light .admin-branding .branding-db-status-card {
  background: var(--bg-soft);
  border-color: var(--border-soft);
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
}
html.appearance-light .admin-branding .branding-preview-bar {
  background: linear-gradient(to bottom, var(--surface-bar-top), var(--surface-bar-bottom));
  border-color: rgba(var(--accent-rgb), 0.25);
}
html.appearance-light .admin-branding .branding-preview-name {
  color: var(--text);
}
html.appearance-light .admin-branding .branding-tabs {
  background: var(--surface-muted-75);
  border-color: var(--border-soft);
}
html.appearance-light .admin-branding .branding-tab-active {
  color: var(--text);
}
html.appearance-light .admin-branding .branding-input,
html.appearance-light .admin-branding .branding-textarea {
  background: var(--surface-raised);
  color: var(--text);
  border-color: var(--border-soft);
}
html.appearance-light .admin-branding .branding-input:focus,
html.appearance-light .admin-branding .branding-textarea:focus {
  background: var(--surface-raised-solid);
  border-color: var(--accent);
}
html.appearance-light .admin-branding .branding-config-snippet {
  background: var(--surface-muted-75);
  color: var(--text);
  border-color: var(--border-soft);
}
html.appearance-light .admin-branding .branding-flash-success {
  color: #166534;
  background: rgba(34, 197, 94, 0.12);
  border-color: rgba(22, 163, 74, 0.35);
}
html.appearance-light .admin-branding .branding-flash-error {
  color: #b91c1c;
  background: rgba(239, 68, 68, 0.1);
  border-color: rgba(220, 38, 38, 0.35);
}
html.appearance-light .admin-branding .branding-db-status-ok {
  color: #166534;
  background: rgba(34, 197, 94, 0.15);
}
html.appearance-light .admin-branding .branding-db-status-fail {
  color: #b91c1c;
  background: rgba(239, 68, 68, 0.12);
}

/* Admin – Homepage Updates list & modal */
html.appearance-light .admin-update-item {
  background: var(--bg-soft);
  border-color: var(--border-soft);
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
}
html.appearance-light .admin-update-item:hover {
  background: var(--surface-muted-75);
  border-color: rgba(var(--accent-rgb), 0.35);
}
html.appearance-light .admin-update-item-title {
  color: var(--text);
}
html.appearance-light .admin-update-section-pills .updates-section-pill {
  color: #334155;
  background: var(--surface-muted-75);
  border-color: var(--border-soft);
}
html.appearance-light .update-modal-panel {
  background: var(--bg-soft);
  box-shadow: var(--shadow-soft);
}
html.appearance-light .update-modal-header {
  background: var(--surface-muted-75);
  border-bottom-color: var(--border-soft);
}
html.appearance-light .update-product-content-container,
html.appearance-light .update-sections-container {
  background: var(--surface-muted-75);
  border-color: var(--border-soft);
}
html.appearance-light .product-content-block,
html.appearance-light .update-section-block {
  background: var(--bg-soft);
  border-color: var(--border-soft);
}
html.appearance-light .product-content-block-title {
  color: var(--accent);
}

/* Manage user modal */
html.appearance-light .admin-modal-backdrop {
  background: rgba(15, 23, 42, 0.35);
}
html.appearance-light .admin-modal-panel {
  background: var(--bg-soft);
  border-color: var(--border-soft);
  box-shadow: var(--shadow-soft);
}
html.appearance-light .admin-modal-close {
  background: var(--surface-muted-75);
  border-color: var(--border-soft);
  color: var(--text);
}
html.appearance-light .user-summary-card,
html.appearance-light .user-overview-card {
  background: var(--bg-soft);
  border-color: var(--border-soft);
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
}
html.appearance-light .summary-value,
html.appearance-light .meta-value {
  color: var(--text);
}
html.appearance-light .user-modal-tab.is-active {
  color: var(--text);
}
html.appearance-light .user-modal-content .form-control,
html.appearance-light .user-note-form .form-control {
  background: var(--surface-raised) !important;
  color: var(--text) !important;
  border-color: var(--border-soft) !important;
}
html.appearance-light .user-note-form {
  background: var(--bg-soft);
  border-color: var(--border-soft);
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
}
html.appearance-light .user-note-form .meta-label,
html.appearance-light .user-note-form-footer label {
  color: var(--text-muted);
}
html.appearance-light .user-note-item {
  background: var(--bg-soft);
  border-color: var(--border-soft);
}
html.appearance-light .user-note-item strong {
  color: var(--text);
}

html.appearance-light .form-control,
html.appearance-light .app-form input[type="text"],
html.appearance-light .app-form input[type="number"],
html.appearance-light .app-form input[type="date"],
html.appearance-light .app-form input[type="url"],
html.appearance-light .app-form input[type="email"],
html.appearance-light .app-form input[type="password"],
html.appearance-light .app-form select,
html.appearance-light .app-form textarea {
  background: var(--surface-raised);
  color: var(--text);
  border-color: var(--border-soft);
}

/* Cards & panels – clearer separation from page background */
html.appearance-light .card {
  background: linear-gradient(165deg, #ffffff 0%, #f4f6fa 55%, #eef2f7 100%);
  border-color: rgba(var(--accent-rgb), 0.28);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.9) inset,
    0 10px 28px rgba(15, 23, 42, 0.08),
    0 0 16px rgba(var(--accent-rgb), 0.06);
}

/* Homepage hero – subtle accent glow (readable on light page without overpowering) */
html.appearance-light .card.card-hero.hero-carousel,
html.appearance-light .card.card-hero.hero-live-stream {
  border-color: rgba(var(--accent-rgb), 0.38);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.95) inset,
    0 10px 28px rgba(15, 23, 42, 0.08),
    0 0 0 1px rgba(var(--accent-rgb), 0.1),
    0 0 20px rgba(var(--accent-rgb), 0.22),
    0 0 40px rgba(var(--accent-rgb), 0.1);
}

html.appearance-light .card-subtitle,
html.appearance-light .section-text,
html.appearance-light .muted,
html.appearance-light .status-sub {
  color: #475569;
}

html.appearance-light .announcement-card {
  background: var(--surface-muted-75);
  border-color: var(--border-soft);
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
}

html.appearance-light .announcement-card-title,
html.appearance-light .announcement-card-body,
html.appearance-light .announcement-card-body p,
html.appearance-light .announcement-card-body li,
html.appearance-light .announcement-card-body h1,
html.appearance-light .announcement-card-body h2,
html.appearance-light .announcement-card-body h3,
html.appearance-light .announcement-card-body h4,
html.appearance-light .announcement-card-body strong {
  color: var(--text);
}

html.appearance-light .announcement-card-date,
html.appearance-light .announcement-card-author {
  color: var(--text-muted);
}

html.appearance-light .announcement-card-body a {
  color: var(--accent-dark, var(--accent));
}

/* System health */
html.appearance-light .admin-system-health .health-panel {
  background: var(--bg-soft);
  border-color: var(--border-soft);
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
}
html.appearance-light .admin-system-health .health-panel-error {
  color: #b91c1c;
}

/* Announcement analytics */
html.appearance-light .admin-announcement-analytics .announcement-analytics-chart-wrap {
  background: var(--bg-soft);
  border-color: var(--border-soft);
}

/* Sign in page */
html.appearance-light .login-card {
  background: linear-gradient(165deg, #ffffff 0%, #f4f6fa 55%, #eef2f7 100%);
  border-color: rgba(var(--accent-rgb), 0.28);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.9) inset,
    0 10px 28px rgba(15, 23, 42, 0.08);
}
html.appearance-light .login-provider-btn.cfx {
  background: var(--surface-muted-75);
  color: var(--text);
}
html.appearance-light .login-provider-btn.cfx:hover {
  background: var(--surface-raised);
}
html.appearance-light .login-form input[type="email"],
html.appearance-light .login-form input[type="password"] {
  background: var(--surface-raised);
  color: var(--text);
  border-color: var(--border-soft);
}

/* Forgot / reset password */
html.appearance-light .auth-password-card .login-form-panel {
  background: var(--surface-muted-80);
  border-color: var(--border-soft);
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
}

html.appearance-light .auth-password-card .login-icon {
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.1);
}

html.appearance-light .auth-password-card .form-control {
  background: var(--surface-raised);
  color: var(--text);
  border-color: var(--border-soft);
}

html.appearance-light .auth-password-card .btn-secondary {
  background: var(--surface-muted-75);
  color: var(--text);
  border-color: var(--border-soft);
}

html.appearance-light .auth-password-card .btn-secondary:hover {
  background: var(--surface-raised);
}

html.appearance-light .auth-password-card .info-text,
html.appearance-light .auth-password-card .password-requirements {
  color: var(--text-muted);
}

html.appearance-light .auth-password-card .password-requirements {
  background: var(--surface-muted-80);
}

html.appearance-light .login-error {
  color: #b91c1c;
  background: rgba(239, 68, 68, 0.1);
  border-color: rgba(220, 38, 38, 0.35);
}

/* About page – Connect social cards */
html.appearance-light .social-card {
  background: var(--bg-soft);
  border-color: var(--border-soft);
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
}
html.appearance-light .social-card:hover {
  background: var(--surface-raised);
  border-color: rgba(var(--accent-rgb), 0.45);
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.1);
}
html.appearance-light .social-tag {
  background: var(--surface-muted-75);
  color: var(--text);
  border-color: var(--border-soft);
}

/* About page – City Gallery tiles */
html.appearance-light .gallery-item {
  background: var(--surface-raised);
  border-color: var(--border-soft);
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
}

html.appearance-light .gallery-caption {
  color: var(--text-muted);
  background: var(--surface-muted-80);
}

/* Subscribe page – What's included tiles */
html.appearance-light .subscribe-feature-item {
  background: var(--surface-muted-80);
  border-color: var(--border-soft);
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
}

html.appearance-light .subscribe-feature-item:hover {
  background: var(--surface-muted-75);
  border-color: rgba(var(--accent-rgb), 0.35);
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08);
}

html.appearance-light .subscribe-feature-content strong {
  color: var(--text);
}

html.appearance-light .subscribe-feature-content span {
  color: var(--text-muted);
}

html.appearance-light .subscribe-code {
  background: var(--surface-muted-75);
  color: var(--text);
  border: 1px solid var(--border-soft);
}

/* Homepage partners carousel */
html.appearance-light .partners-carousel .partners-item {
  background: var(--bg-soft);
  border-color: var(--border-soft);
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
}
html.appearance-light .partners-carousel .partners-item:hover {
  background: var(--surface-raised);
  border-color: rgba(var(--accent-rgb), 0.45);
}
html.appearance-light .partners-carousel .partners-item-initial {
  background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.18), rgba(var(--accent-rgb), 0.06));
  border: 1px solid rgba(var(--accent-rgb), 0.2);
}

html.appearance-light .btn-secondary {
  background: #eef2f7;
  color: #1e293b;
  border-color: #b8c5d4;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
}

html.appearance-light .btn-secondary:hover {
  background: #e2e8f0;
  color: #0f172a;
  border-color: #94a3b8;
}

html.appearance-light .btn-ghost-small {
  background: #ffffff;
  color: var(--accent-dark);
  border-color: rgba(var(--accent-rgb), 0.45);
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
}

html.appearance-light .btn-ghost-small:hover {
  background: rgba(var(--accent-rgb), 0.1);
  color: var(--accent-dark);
  box-shadow: 0 4px 12px rgba(var(--accent-rgb), 0.18);
}

html.appearance-light .tag {
  color: #334155;
  background: #e8edf3;
  border-color: #b8c5d4;
}

html.appearance-light .tag-success {
  color: #166534;
  background: rgba(34, 197, 94, 0.18);
  border-color: rgba(22, 163, 74, 0.45);
}

html.appearance-light .tag-warning {
  color: #b45309;
  background: rgba(251, 191, 36, 0.22);
  border-color: rgba(217, 119, 6, 0.45);
}

html.appearance-light .tag-info {
  color: #1d4ed8;
  background: rgba(59, 130, 246, 0.15);
  border-color: rgba(37, 99, 235, 0.4);
}

html.appearance-light .tag-danger {
  color: #b91c1c;
  background: rgba(239, 68, 68, 0.12);
  border-color: rgba(220, 38, 38, 0.4);
}

html.appearance-light .dashboard-hero-status {
  background: #e8edf3;
  border-color: rgba(var(--accent-rgb), 0.35);
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.07);
}

/* FiveM server name accent colors on light backgrounds (^0 / ^7 use var(--text) in styles.css) */
html.appearance-light .server-name-ch-1 { color: #dc2626; }
html.appearance-light .server-name-ch-2 { color: #15803d; }
html.appearance-light .server-name-ch-3 { color: #a16207; }
html.appearance-light .server-name-ch-4 { color: #1d4ed8; }
html.appearance-light .server-name-ch-5 { color: #0369a1; }
html.appearance-light .server-name-ch-6 { color: #7e22ce; }
html.appearance-light .server-name-ch-8 { color: #c2410c; }
html.appearance-light .server-name-ch-9 { color: #64748b; }

html.appearance-light .btn-connect-server:not(.btn-connect-disabled) {
  color: #166534;
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.22), rgba(34, 197, 94, 0.08));
  border-color: rgba(22, 163, 74, 0.55);
}

html.appearance-light .btn-connect-server:not(.btn-connect-disabled):hover {
  color: #14532d;
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.32), rgba(34, 197, 94, 0.14));
  border-color: rgba(22, 163, 74, 0.75);
}

/* Homepage – hero highlights, side cards, staff, updates */
html.appearance-light .highlight-item {
  background: var(--surface-raised);
  border-color: var(--border-soft);
}

html.appearance-light .highlight-label {
  color: #64748b;
  font-weight: 700;
}

html.appearance-light .highlight-value {
  color: var(--text);
  font-weight: 600;
}

html.appearance-light .hero-carousel {
  background:
    radial-gradient(circle at top left, rgba(var(--accent-rgb), 0.12), transparent 55%),
    linear-gradient(
      to right,
      rgba(255, 255, 255, 0.97),
      rgba(255, 255, 255, 0.92) 38%,
      rgba(255, 255, 255, 0.75) 62%,
      rgba(255, 255, 255, 0.35) 100%
    ),
    var(--hero-bg-image);
  background-size: cover;
  background-position: center;
}

html.appearance-light .hero-carousel::after {
  box-shadow:
    inset 0 1px 0 rgba(var(--accent-rgb), 0.1),
    inset 0 -1px 0 rgba(var(--accent-rgb), 0.08),
    inset 0 0 48px rgba(255, 255, 255, 0.55);
}

html.appearance-light .hero-live-stream-welcome {
  background: linear-gradient(180deg, var(--hero-scrim-1) 0%, var(--surface-muted-75) 100%);
  border-bottom-color: var(--border-soft);
}

html.appearance-light .server-stat-item {
  background: var(--surface-muted-75);
  border-color: var(--border-soft);
}

html.appearance-light .server-stats-widget .stat-value {
  color: var(--text);
}

html.appearance-light .discord-announcement-box {
  background: var(--surface-muted-75);
  border-color: var(--border-soft);
}

html.appearance-light .discord-announcement-box .announcement-item,
html.appearance-light .discord-announcement-box .home-announcement-item {
  background: var(--bg-soft);
  border-color: var(--border-soft);
}

html.appearance-light .discord-announcement-box .announcement-item:hover,
html.appearance-light .discord-announcement-box .home-announcement-item:hover {
  background: var(--surface-raised);
  border-color: rgba(var(--accent-rgb), 0.35);
}

html.appearance-light .home-announcement-title {
  color: var(--text);
}

html.appearance-light .home-announcement-content,
html.appearance-light .discord-announcement-box .announcement-content {
  color: var(--text-muted);
}

html.appearance-light .updates-item {
  background: var(--surface-muted-75);
  border-color: var(--border-soft);
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
}

html.appearance-light .updates-item:hover {
  background: var(--surface-raised);
  border-color: rgba(var(--accent-rgb), 0.35);
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08);
}

html.appearance-light .updates-item-recent {
  background: rgba(var(--accent-rgb), 0.1);
  border-color: rgba(var(--accent-rgb), 0.4);
  box-shadow:
    0 0 0 1px rgba(var(--accent-rgb), 0.15),
    0 4px 14px rgba(15, 23, 42, 0.08);
}

html.appearance-light .updates-item-recent:hover {
  background: rgba(var(--accent-rgb), 0.14);
  border-color: rgba(var(--accent-rgb), 0.5);
}

html.appearance-light .updates-title {
  color: var(--text);
}

html.appearance-light .updates-tag,
html.appearance-light .updates-section-pill {
  color: var(--accent-dark);
  background: rgba(var(--accent-rgb), 0.12);
  border-color: rgba(var(--accent-rgb), 0.35);
}

html.appearance-light .updates-overview:hover {
  background: rgba(var(--accent-rgb), 0.08);
}

html.appearance-light .staff-card {
  background: var(--bg-soft);
  border-color: var(--border-soft);
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
}

html.appearance-light .staff-card-lead {
  border-color: rgba(var(--accent-rgb), 0.45);
  box-shadow: 0 4px 18px rgba(var(--accent-rgb), 0.12);
}

html.appearance-light .staff-name {
  color: var(--text);
}

html.appearance-light .staff-role {
  color: var(--text-muted);
}

html.appearance-light .staff-grid .staff-card-note {
  background: var(--surface-muted-75);
  border-color: var(--border-soft);
  color: #475569;
}

html.appearance-light .update-detail-modal-backdrop {
  background: rgba(15, 23, 42, 0.4);
}

html.appearance-light .update-detail-modal-panel {
  background: linear-gradient(180deg, #ffffff 0%, #f1f5f9 100%);
  border-color: var(--border-soft);
  box-shadow: var(--shadow-soft);
}

html.appearance-light .update-detail-modal-title,
html.appearance-light .update-detail-modal-close {
  color: var(--text);
}

html.appearance-light .update-detail-modal-close {
  background: var(--surface-muted-75);
  border-color: var(--border-soft);
}

html.appearance-light .update-detail-modal-close:hover {
  background: var(--surface-raised);
  border-color: #94a3b8;
}

html.appearance-light .update-detail-modal-body,
html.appearance-light .update-detail-modal-body .updates-body,
html.appearance-light .update-detail-modal-body p,
html.appearance-light .update-detail-modal-body .updates-section-title,
html.appearance-light .update-detail-modal-body .updates-section-list,
html.appearance-light .update-detail-modal-body .updates-section-list li {
  color: var(--text);
}

html.appearance-light .update-detail-modal-body .updates-section-list {
  color: var(--text-muted);
}

html.appearance-light .update-detail-modal-meta,
html.appearance-light .update-detail-modal-meta .updates-date {
  color: var(--text-muted);
}

html.appearance-light .showcase-demo-banner-dismiss {
  background: var(--surface-muted-75);
  color: var(--text-muted);
}

html.appearance-light .showcase-demo-banner-dismiss:hover {
  background: var(--surface-raised);
  color: var(--text);
}

/* Customer dashboard */
html.appearance-light .dash-customer {
  --dash-border: #b8c5d4;
  --dash-kpi-bg: #e4eaf1;
  --dash-row-bg: #e0e7ef;
  --dash-empty-bg: #d5dde8;
}

html.appearance-light .dash-kpi-value {
  color: #0f172a;
}

html.appearance-light .dash-row-link:hover {
  background: rgba(var(--accent-rgb), 0.12);
  border-color: rgba(var(--accent-rgb), 0.4);
}

html.appearance-light .dash-pill-neutral {
  background: #dde4ed;
  color: #334155;
  border-color: #b8c5d4;
}

html.appearance-light .dash-pill-warn {
  color: #b45309;
  background: rgba(251, 191, 36, 0.28);
  border-color: rgba(217, 119, 6, 0.45);
}

html.appearance-light .dash-pill-progress {
  color: #1d4ed8;
  background: rgba(59, 130, 246, 0.18);
  border-color: rgba(37, 99, 235, 0.4);
}

html.appearance-light .dash-empty {
  border-style: dashed;
  border-color: #a8b6c8;
}

html.appearance-light .empty-state {
  background: var(--surface-muted-65);
  border-color: var(--border-soft);
  color: var(--text-muted);
}

html.appearance-light .info-item {
  background: var(--surface-muted-80);
  border-color: var(--border-soft);
}

html.appearance-light .info-label {
  color: #64748b;
}

html.appearance-light .info-value {
  color: var(--text);
}

/* Applications page */
html.appearance-light .app-type-pill:not(.is-active) {
  color: var(--text);
  background: var(--surface-muted-80);
  border-color: var(--border-soft);
}

html.appearance-light .app-type-pill:not(.is-active):hover {
  background: var(--surface-raised);
  border-color: rgba(var(--accent-rgb), 0.4);
}

html.appearance-light .app-type-pill.is-active {
  color: #fff;
  border-color: rgba(var(--accent-rgb), 0.55);
  box-shadow: 0 4px 14px rgba(var(--accent-rgb), 0.22);
}

/* Ticket create & generic form rows */
html.appearance-light .form-row label,
html.appearance-light .ticket-form .form-row label {
  color: #64748b;
}

html.appearance-light .form-row input,
html.appearance-light .form-row textarea,
html.appearance-light .form-row select,
html.appearance-light .ticket-form input,
html.appearance-light .ticket-form textarea,
html.appearance-light .ticket-form select {
  background: var(--surface-raised);
  color: var(--text);
  border-color: var(--border-soft);
}

html.appearance-light .form-row input::placeholder,
html.appearance-light .form-row textarea::placeholder,
html.appearance-light .ticket-form input::placeholder,
html.appearance-light .ticket-form textarea::placeholder {
  color: #94a3b8;
  opacity: 1;
}

html.appearance-light .ticket-status.success {
  color: #166534;
  background: rgba(34, 197, 94, 0.14);
  border-color: rgba(22, 163, 74, 0.4);
}

html.appearance-light .ticket-status.error {
  color: #b91c1c;
  background: rgba(239, 68, 68, 0.1);
  border-color: rgba(220, 38, 38, 0.35);
}

html.appearance-light .stat-pill {
  background: var(--surface-muted-75);
  border-color: var(--border-soft);
}

html.appearance-light .stat-value {
  color: var(--text);
}

html.appearance-light .identity-row {
  background: var(--surface-muted-80);
  border-color: var(--border-soft);
}

html.appearance-light .quick-action-card {
  background: var(--surface-muted-80);
  border-color: var(--border-soft);
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
}

html.appearance-light .quick-action-card:hover {
  background: var(--surface-raised);
  border-color: rgba(var(--accent-rgb), 0.4);
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08);
}

html.appearance-light .tag-soft {
  color: var(--accent-dark);
  background: rgba(var(--accent-rgb), 0.12);
  border-color: rgba(var(--accent-rgb), 0.35);
}

html.appearance-light .tag-neutral,
html.appearance-light .tag-secondary {
  color: #475569;
  background: var(--surface-muted-75);
  border-color: var(--border-soft);
}

html.appearance-light .announcement-toggle-btn.is-active {
  color: var(--accent-dark) !important;
}

html.appearance-light .dashboard-stat-card {
  background: var(--surface-muted-80);
  border-color: rgba(var(--accent-rgb), 0.28);
}

html.appearance-light .dashboard-stat-card:hover {
  background: var(--surface-raised);
  border-color: rgba(var(--accent-rgb), 0.45);
}

html.appearance-light .dashboard-stat-value {
  color: var(--text);
}

html.appearance-light .nav-link {
  color: #475569;
}

html.appearance-light .nav-link:hover {
  color: #0f172a;
  background: rgba(var(--accent-rgb), 0.1);
}

/* Appearance toggle */
.appearance-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.35rem;
  height: 2.35rem;
  padding: 0;
  margin: 0;
  border-radius: var(--radius-full);
  border: 1px solid rgba(var(--accent-rgb), 0.35);
  background: var(--surface-raised);
  color: var(--text);
  cursor: pointer;
  font-size: 1.05rem;
  line-height: 1;
  transition: background 0.12s ease, border-color 0.12s ease, transform 0.12s ease;
}

.appearance-toggle:hover {
  border-color: rgba(var(--accent-rgb), 0.55);
  transform: translateY(-1px);
}

.appearance-toggle:focus-visible {
  outline: 2px solid rgba(var(--accent-rgb), 0.65);
  outline-offset: 2px;
}

html.appearance-light .password-strength {
  background: var(--surface-muted-75);
  border-color: var(--border-soft);
}
html.appearance-light .password-strength-meter {
  background: var(--surface-muted-60);
}
html.appearance-light .password-strength-label span {
  color: var(--text);
}
html.appearance-light .password-strength-requirements {
  color: var(--text-muted);
}
html.appearance-light .password-strength-requirements li::before {
  color: var(--text-muted);
}
html.appearance-light .password-strength-requirements li.met {
  color: #15803d;
}
html.appearance-light .password-strength-requirements li.met::before {
  color: #15803d;
}
html.appearance-light .password-strength-message {
  color: var(--text-muted);
}
html.appearance-light .account-settings-password-validation .password-strength {
  background: var(--surface-muted-75);
  border-color: var(--border-soft);
}

html.appearance-light .session-table-wrapper {
  background: var(--bg-soft);
  border-color: var(--border-soft);
}
html.appearance-light .session-table th {
  background: var(--surface-muted-75);
  border-bottom-color: var(--border-soft);
  color: var(--text-muted);
}
html.appearance-light .session-table td {
  color: var(--text);
}
html.appearance-light .session-table tbody tr + tr {
  border-top-color: var(--border-soft);
}
html.appearance-light .session-table tbody tr.is-current-session {
  background: rgba(59, 130, 246, 0.08);
}
html.appearance-light .session-device-name {
  color: var(--text);
}
html.appearance-light .session-device-meta,
html.appearance-light .session-last {
  color: var(--text-muted);
}
html.appearance-light .session-ip {
  color: var(--text);
}
html.appearance-light .account-security-badge-active {
  background: rgba(148, 163, 184, 0.2);
  border-color: rgba(100, 116, 139, 0.45);
  color: var(--text-muted);
}
html.appearance-light .account-security-badge-current {
  background: rgba(59, 130, 246, 0.12);
  border-color: rgba(59, 130, 246, 0.35);
}
html.appearance-light .account-security-badge-success {
  background: rgba(34, 197, 94, 0.12);
  border-color: rgba(34, 197, 94, 0.35);
}
html.appearance-light .account-security-badge-failed {
  background: rgba(239, 68, 68, 0.1);
  border-color: rgba(239, 68, 68, 0.35);
}
html.appearance-light .account-security-btn-outline {
  color: var(--text);
  background: var(--bg-soft);
  border-color: var(--border-soft);
}
html.appearance-light .account-security-btn-outline:hover:not(:disabled) {
  border-color: var(--accent);
  color: var(--accent);
  background: rgba(var(--accent-rgb), 0.08);
}

html.appearance-light .account-notice-box {
  background: var(--surface-muted-75);
  border-color: var(--border-soft);
}
html.appearance-light .account-notice-box--warn {
  background: rgba(251, 191, 36, 0.14);
  border-color: rgba(251, 191, 36, 0.35);
}
html.appearance-light .account-connection-locked {
  background: rgba(var(--accent-rgb), 0.06);
  border-color: var(--border-soft);
  border-left-color: var(--accent);
}
html.appearance-light .account-billing-intro {
  border-bottom-color: var(--border-soft);
}
html.appearance-light .account-billing-stat,
html.appearance-light .account-billing-plan-card,
html.appearance-light .account-billing-panel {
  background: var(--bg-soft);
  border-color: var(--border-soft);
}
html.appearance-light .account-billing-panel-highlight {
  background: linear-gradient(145deg, rgba(var(--accent-rgb), 0.08) 0%, var(--bg-soft) 60%);
}
html.appearance-light .account-billing-panel-muted {
  background: var(--surface-muted-75);
}
html.appearance-light .account-billing-empty {
  background: var(--surface-muted-75);
  border-color: #cbd5e1;
}
html.appearance-light .account-billing-badge-active {
  background: rgba(34, 197, 94, 0.12);
  border-color: rgba(34, 197, 94, 0.35);
  color: #15803d;
}
html.appearance-light .account-billing-alert-error {
  color: #b91c1c;
}
html.appearance-light .account-security-intro {
  border-bottom-color: var(--border-soft);
}
html.appearance-light .account-security-stat,
html.appearance-light .account-security-block,
html.appearance-light .account-security-panel {
  background: var(--bg-soft);
  border-color: var(--border-soft);
}
html.appearance-light .account-security-panel-highlight {
  background: linear-gradient(145deg, rgba(var(--accent-rgb), 0.08) 0%, var(--bg-soft) 60%);
}
html.appearance-light .account-security-panel-muted {
  background: var(--surface-muted-75);
}
html.appearance-light .account-security-inline-stats,
html.appearance-light .account-security-empty {
  background: var(--surface-muted-75);
  border-color: #cbd5e1;
}
html.appearance-light .account-security-badge-success {
  color: #15803d;
}
html.appearance-light .account-security-badge-failed {
  color: #b91c1c;
}
html.appearance-light .account-security-badge-current {
  color: #0369a1;
}
html.appearance-light .account-security-btn-danger {
  color: #b91c1c;
  background: rgba(239, 68, 68, 0.1);
}
html.appearance-light .account-security-btn-danger:hover {
  color: #991b1b;
  background: rgba(239, 68, 68, 0.18);
}
html.appearance-light .account-security-pagination-btn {
  background: var(--bg-soft);
}
html.appearance-light .account-connections-intro {
  border-bottom-color: var(--border-soft);
}
html.appearance-light .account-connections-stat {
  background: linear-gradient(
    145deg,
    rgba(var(--accent-rgb), 0.1) 0%,
    var(--bg-soft) 55%
  );
  border-color: rgba(var(--accent-rgb), 0.4);
}
html.appearance-light .account-connections-card {
  background: linear-gradient(
    155deg,
    rgba(var(--accent-rgb), 0.06) 0%,
    var(--bg-soft) 45%
  );
  border-color: rgba(var(--accent-rgb), 0.28);
  box-shadow: 0 4px 18px rgba(15, 23, 42, 0.06);
}
html.appearance-light .account-connections-card.is-linked {
  border-color: rgba(var(--accent-rgb), 0.45);
}
html.appearance-light .account-connections-card--cfx {
  border-top: 3px solid #f97316;
}
html.appearance-light .account-connections-card--cfx.is-linked {
  background: linear-gradient(
    155deg,
    rgba(249, 115, 22, 0.1) 0%,
    var(--bg-soft) 48%
  );
}
html.appearance-light .account-connections-card--discord {
  border-top: 3px solid #5865f2;
}
html.appearance-light .account-connections-card--discord.is-linked {
  background: linear-gradient(
    155deg,
    rgba(88, 101, 242, 0.1) 0%,
    var(--bg-soft) 48%
  );
}
html.appearance-light .account-connections-card--steam {
  border-top: 3px solid #64748b;
}
html.appearance-light .account-connections-card--steam.is-linked {
  background: linear-gradient(
    155deg,
    rgba(100, 116, 139, 0.1) 0%,
    var(--bg-soft) 48%
  );
}
html.appearance-light .account-connections-platform-icon--cfx {
  background: linear-gradient(145deg, rgba(249, 115, 22, 0.2), rgba(249, 115, 22, 0.08));
  border-color: rgba(234, 88, 12, 0.45);
  color: #c2410c;
}
html.appearance-light .account-connections-platform-icon--discord {
  background: linear-gradient(145deg, rgba(88, 101, 242, 0.22), rgba(88, 101, 242, 0.08));
  border-color: rgba(79, 70, 229, 0.4);
  color: #4338ca;
}
html.appearance-light .account-connections-platform-icon--steam {
  background: linear-gradient(145deg, rgba(100, 116, 139, 0.2), rgba(148, 163, 184, 0.1));
  border-color: rgba(100, 116, 139, 0.45);
  color: #475569;
}
html.appearance-light .account-connections-details {
  background: var(--surface-muted-75);
  border: 1px solid rgba(var(--accent-rgb), 0.22);
}
html.appearance-light .account-connections-badge-linked {
  background: rgba(34, 197, 94, 0.12);
  border-color: rgba(34, 197, 94, 0.45);
  color: #15803d;
}
html.appearance-light .account-connections-badge-unlinked {
  background: rgba(251, 191, 36, 0.14);
  border-color: rgba(245, 158, 11, 0.45);
  color: #b45309;
}
html.appearance-light .account-connections-locked {
  background: rgba(var(--accent-rgb), 0.06);
  border-color: rgba(var(--accent-rgb), 0.35);
  border-left-width: 4px;
  border-left-color: var(--accent);
}
html.appearance-light .account-connections-subpanel {
  margin-top: 0;
  background: rgba(88, 101, 242, 0.08);
  border: 1px solid rgba(88, 101, 242, 0.35);
}
html.appearance-light .account-connections-panel {
  background: linear-gradient(
    160deg,
    rgba(var(--accent-rgb), 0.06) 0%,
    var(--bg-soft) 50%
  );
  border-color: rgba(var(--accent-rgb), 0.25);
}
html.appearance-light .account-connections-panel-highlight {
  background: linear-gradient(145deg, rgba(var(--accent-rgb), 0.12) 0%, var(--bg-soft) 60%);
  border-color: rgba(var(--accent-rgb), 0.4);
}
html.appearance-light .account-connections-panel-muted {
  background: var(--surface-muted-75);
  border-color: rgba(148, 163, 184, 0.35);
}
html.appearance-light .account-connections-btn-outline {
  border-color: rgba(100, 116, 139, 0.5);
}
html.appearance-light .account-connections-btn-outline:hover {
  border-color: var(--accent);
  background: rgba(var(--accent-rgb), 0.1);
  color: var(--accent-dark);
}
html.appearance-light .account-email-intro {
  border-bottom-color: var(--border-soft);
}
html.appearance-light .account-email-stat {
  background: linear-gradient(145deg, rgba(var(--accent-rgb), 0.1) 0%, var(--bg-soft) 55%);
  border-color: rgba(var(--accent-rgb), 0.4);
}
html.appearance-light .account-email-block {
  background: linear-gradient(155deg, rgba(var(--accent-rgb), 0.06) 0%, var(--bg-soft) 45%);
  border-color: rgba(var(--accent-rgb), 0.28);
  box-shadow: 0 4px 18px rgba(15, 23, 42, 0.06);
}
html.appearance-light .account-email-block.is-locked {
  border-color: rgba(var(--accent-rgb), 0.45);
}
html.appearance-light .account-email-block--address {
  border-top: 3px solid var(--accent);
}
html.appearance-light .account-email-block--notifications {
  border-top: 3px solid rgba(var(--accent-rgb), 0.35);
}
html.appearance-light .account-email-details,
html.appearance-light .account-email-pref-master {
  background: var(--surface-muted-75);
  border: 1px solid rgba(var(--accent-rgb), 0.22);
}
html.appearance-light .account-email-detail--verification {
  background: var(--bg-soft);
  border-color: var(--border-soft);
  box-shadow: none;
}
html.appearance-light .account-email-detail--verification.is-verified {
  background: rgba(34, 197, 94, 0.1);
  border-color: rgba(34, 197, 94, 0.4);
}
html.appearance-light .account-email-detail--verification.is-verified dd {
  color: #15803d;
}
html.appearance-light .account-email-detail--verification.is-discord {
  background: rgba(88, 101, 242, 0.1);
  border-color: rgba(88, 101, 242, 0.35);
}
html.appearance-light .account-email-detail--verification.is-discord dd {
  color: #4338ca;
}
html.appearance-light .account-email-detail--verification.is-pending {
  background: rgba(251, 191, 36, 0.12);
  border-color: rgba(245, 158, 11, 0.45);
}
html.appearance-light .account-email-detail--verification.is-pending dd {
  color: #b45309;
}
html.appearance-light .account-email-badge-verified {
  color: #15803d;
  background: rgba(34, 197, 94, 0.12);
  border-color: rgba(34, 197, 94, 0.45);
}
html.appearance-light .account-email-badge-pending {
  color: #b45309;
  background: rgba(251, 191, 36, 0.14);
  border-color: rgba(245, 158, 11, 0.45);
}
html.appearance-light .account-email-locked {
  background: rgba(var(--accent-rgb), 0.06);
  border-color: rgba(var(--accent-rgb), 0.35);
  border-left-color: var(--accent);
}
html.appearance-light .account-email-panel {
  background: linear-gradient(160deg, rgba(var(--accent-rgb), 0.06) 0%, var(--bg-soft) 50%);
  border-color: rgba(var(--accent-rgb), 0.25);
}
html.appearance-light .account-email-panel-highlight {
  background: linear-gradient(145deg, rgba(var(--accent-rgb), 0.12) 0%, var(--bg-soft) 60%);
  border-color: rgba(var(--accent-rgb), 0.4);
}
html.appearance-light .account-email-panel-muted {
  background: var(--surface-muted-75);
  border-color: rgba(148, 163, 184, 0.35);
}
html.appearance-light .account-email-btn-outline {
  border-color: rgba(100, 116, 139, 0.5);
}
html.appearance-light .account-email-btn-outline:hover {
  border-color: var(--accent);
  background: rgba(var(--accent-rgb), 0.1);
  color: var(--accent-dark);
}
html.appearance-light .account-email-notify-list li {
  background: var(--surface-muted-75);
  border-color: rgba(var(--accent-rgb), 0.2);
}
html.appearance-light .account-email-notify-discord {
  background: rgba(88, 101, 242, 0.08);
  border-color: rgba(88, 101, 242, 0.35);
}

html.appearance-light .account-business-intro {
  border-bottom-color: var(--border-soft);
}
html.appearance-light .account-business-stat {
  background: linear-gradient(145deg, rgba(102, 192, 244, 0.12) 0%, var(--bg-soft) 55%);
  border-color: rgba(102, 192, 244, 0.4);
}
html.appearance-light .account-business-block {
  background: linear-gradient(155deg, rgba(102, 192, 244, 0.06) 0%, var(--bg-soft) 45%);
  border-color: rgba(102, 192, 244, 0.28);
  box-shadow: 0 4px 18px rgba(15, 23, 42, 0.06);
}
html.appearance-light .account-business-block--company {
  border-top-color: #66c0f4;
}
html.appearance-light .account-business-panel-highlight {
  background: linear-gradient(145deg, rgba(102, 192, 244, 0.12) 0%, var(--bg-soft) 60%);
  border-color: rgba(102, 192, 244, 0.4);
}
html.appearance-light .account-business-panel-cta {
  background: linear-gradient(145deg, rgba(var(--accent-rgb), 0.12) 0%, var(--bg-soft) 60%);
  border-color: rgba(var(--accent-rgb), 0.4);
}
html.appearance-light .account-business-btn-outline {
  border-color: rgba(100, 116, 139, 0.5);
}
html.appearance-light .account-business-btn-outline:hover {
  border-color: var(--accent);
  background: rgba(var(--accent-rgb), 0.1);
  color: var(--accent-dark);
}
html.appearance-light .account-business .form-control,
html.appearance-light .account-business-field input,
html.appearance-light .account-business-field textarea,
html.appearance-light .account-business-field select,
html.appearance-light .opening-hours-editor .form-control,
html.appearance-light .opening-hours-time-input,
html.appearance-light .opening-hours-bank-note-input {
  background: var(--surface-raised);
  color: var(--text);
  border-color: var(--border-soft);
}
html.appearance-light .opening-hours-bank-ev,
html.appearance-light .opening-hours-bank-ev > span,
html.appearance-light .opening-hours-bank-ev strong {
  color: var(--text);
}
html.appearance-light .opening-hours-bank-list {
  background: var(--surface-raised);
  border-color: var(--border-soft);
}
html.appearance-light .opening-hours-bank-year-break {
  border-top-color: var(--border-soft);
}
html.appearance-light .opening-hours-bank-year-label {
  color: var(--text-muted);
}

html.appearance-light .account-overview-intro {
  border-bottom-color: var(--border-soft);
}
html.appearance-light .account-overview-stat {
  background: linear-gradient(145deg, rgba(var(--accent-rgb), 0.1) 0%, var(--bg-soft) 55%);
  border-color: rgba(var(--accent-rgb), 0.4);
}
html.appearance-light .account-overview-block {
  background: linear-gradient(155deg, rgba(var(--accent-rgb), 0.06) 0%, var(--bg-soft) 45%);
  border-color: rgba(var(--accent-rgb), 0.28);
  box-shadow: 0 4px 18px rgba(15, 23, 42, 0.06);
}
html.appearance-light .account-overview-block--profile {
  border-top: 3px solid var(--accent);
}
html.appearance-light .account-overview-details,
html.appearance-light .account-overview-platform {
  background: var(--surface-muted-75);
  border-color: rgba(var(--accent-rgb), 0.22);
}
html.appearance-light .account-overview-platform--cfx.is-linked {
  border-top-color: #f97316;
}
html.appearance-light .account-overview-platform--discord.is-linked {
  border-top-color: #5865f2;
}
html.appearance-light .account-overview-platform--steam.is-linked {
  border-top-color: #66c0f4;
}
html.appearance-light .account-overview-badge-ok {
  color: #15803d;
  background: rgba(34, 197, 94, 0.12);
  border-color: rgba(34, 197, 94, 0.45);
}
html.appearance-light .account-overview-badge-warn {
  color: #b45309;
  background: rgba(251, 191, 36, 0.14);
  border-color: rgba(245, 158, 11, 0.45);
}
html.appearance-light .account-overview-panel {
  background: linear-gradient(160deg, rgba(var(--accent-rgb), 0.06) 0%, var(--bg-soft) 50%);
  border-color: rgba(var(--accent-rgb), 0.25);
}
html.appearance-light .account-overview-panel-highlight {
  background: linear-gradient(145deg, rgba(var(--accent-rgb), 0.12) 0%, var(--bg-soft) 60%);
  border-color: rgba(var(--accent-rgb), 0.4);
}
html.appearance-light .account-overview-panel-muted {
  background: var(--surface-muted-75);
  border-color: rgba(148, 163, 184, 0.35);
}
html.appearance-light .account-overview-nav-link {
  background: var(--surface-muted-75);
  border-color: rgba(var(--accent-rgb), 0.22);
}
html.appearance-light .account-overview-nav-link:hover {
  background: rgba(var(--accent-rgb), 0.1);
  border-color: rgba(var(--accent-rgb), 0.45);
}
html.appearance-light .account-overview-btn-outline {
  border-color: rgba(100, 116, 139, 0.5);
}
html.appearance-light .account-overview-btn-outline:hover {
  border-color: var(--accent);
  background: rgba(var(--accent-rgb), 0.1);
  color: var(--accent-dark);
}

html.appearance-light .account-settings-intro {
  border-bottom-color: var(--border-soft);
}
html.appearance-light .account-settings-stat {
  background: linear-gradient(145deg, rgba(var(--accent-rgb), 0.1) 0%, var(--bg-soft) 55%);
  border-color: rgba(var(--accent-rgb), 0.4);
}
html.appearance-light .account-settings-block {
  background: linear-gradient(155deg, rgba(var(--accent-rgb), 0.06) 0%, var(--bg-soft) 45%);
  border-color: rgba(var(--accent-rgb), 0.28);
  box-shadow: 0 4px 18px rgba(15, 23, 42, 0.06);
}
html.appearance-light .account-settings-block--profile {
  border-top: 3px solid var(--accent);
}
html.appearance-light .account-settings-panel {
  background: linear-gradient(160deg, rgba(var(--accent-rgb), 0.06) 0%, var(--bg-soft) 50%);
  border-color: rgba(var(--accent-rgb), 0.25);
}
html.appearance-light .account-settings-panel-highlight {
  background: linear-gradient(145deg, rgba(var(--accent-rgb), 0.12) 0%, var(--bg-soft) 60%);
  border-color: rgba(var(--accent-rgb), 0.4);
}
html.appearance-light .account-settings-btn-outline {
  border-color: rgba(100, 116, 139, 0.5);
}
html.appearance-light .account-settings-btn-outline:hover {
  border-color: var(--accent);
  background: rgba(var(--accent-rgb), 0.1);
  color: var(--accent-dark);
}
html.appearance-light .account-settings .form-control,
html.appearance-light .account-email .form-control,
html.appearance-light .account-connections .form-control,
html.appearance-light .account-settings-field input,
html.appearance-light .account-email-field input,
html.appearance-light .account-connections-field input {
  background: var(--surface-raised);
  color: var(--text);
  border-color: var(--border-soft);
}
html.appearance-light .account-settings .form-control:focus,
html.appearance-light .account-email .form-control:focus,
html.appearance-light .account-connections .form-control:focus,
html.appearance-light .account-settings-field input:focus,
html.appearance-light .account-email-field input:focus,
html.appearance-light .account-connections-field input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.18);
}