/*
 * Light mode overrides.
 * app-style.css is hard-coded dark, so this file flips the surfaces/text when
 * <html> carries the .light-mode class (set by the topbar toggle).
 */

html.light-mode {
  --lt-bg: #f4f6f9;
  --lt-bg-alt: #eaeef4;
  --lt-surface: #ffffff;
  --lt-border: rgba(15, 23, 42, 0.10);
  --lt-text: #1f2933;
  --lt-text-muted: rgba(31, 41, 51, 0.72);
}

/* ---------- Base ---------- */
html.light-mode body,
html.light-mode body.bg-theme,
html.light-mode body.bg-theme9 {
  background-color: var(--lt-bg) !important;
  background-image: none !important;
  color: var(--lt-text);
}

html.light-mode ::selection {
  background: rgba(20, 171, 239, 0.20);
}

html.light-mode select option {
  background: var(--lt-surface);
}

html.light-mode ::placeholder {
  color: var(--lt-text) !important;
  opacity: .45 !important;
}

html.light-mode h1, html.light-mode h2, html.light-mode h3,
html.light-mode h4, html.light-mode h5, html.light-mode h6,
html.light-mode .page-title,
html.light-mode label {
  color: var(--lt-text);
}

/* A bare `a` here outranks every single-class component rule, so it kept
   hijacking links that are really buttons, nav items or icon tiles. Limit it to
   plain links; anything with a class of its own already defines its colour. */
html.light-mode a:not([class]) {
  color: #0f7fb8;
}

/* ---------- Top navigation ---------- */
html.light-mode .topnav {
  background: var(--lt-surface);
  border-bottom-color: var(--lt-border);
  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.06);
}

/* Two logo files ship with the app; show the one that fits the theme (the
   white wordmark disappears on a light surface). */
.topnav-brand img.logo-light {
  display: none;
}

html.light-mode .topnav-brand img.logo-dark {
  display: none;
}

html.light-mode .topnav-brand img.logo-light {
  display: inline-block;
}

html.light-mode .topnav-link {
  color: rgba(31, 41, 51, 0.78);
}

html.light-mode .topnav-link:hover,
html.light-mode .topnav-link:focus {
  background: rgba(15, 23, 42, 0.06);
  color: var(--lt-text);
}

html.light-mode .topnav-link.active,
html.light-mode .topnav-group.active > .topnav-link {
  background: rgba(67, 56, 202, 0.12);
  color: #4338ca;
}

html.light-mode .topnav-dropdown {
  background: var(--lt-surface);
  border-color: var(--lt-border);
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.16);
}

html.light-mode .topnav-dropdown a {
  color: rgba(31, 41, 51, 0.82);
}

html.light-mode .topnav-dropdown a:hover {
  background: rgba(15, 23, 42, 0.06);
  color: var(--lt-text);
}

html.light-mode .topnav-dropdown a.active {
  background: rgba(67, 56, 202, 0.12);
  color: #4338ca;
}

html.light-mode .topnav-icon-btn,
html.light-mode .topnav-burger {
  background: rgba(15, 23, 42, 0.06);
  color: rgba(31, 41, 51, 0.75);
}

html.light-mode .topnav-icon-btn:hover,
html.light-mode .topnav-burger:hover {
  background: rgba(15, 23, 42, 0.12);
  color: var(--lt-text);
}

html.light-mode .topnav-user-btn {
  color: var(--lt-text);
}

html.light-mode .topnav-user-btn:hover {
  background: rgba(15, 23, 42, 0.06);
}

html.light-mode .topnav-user-name small {
  color: var(--lt-text-muted);
}

@media (max-width: 991px) {
  html.light-mode .topnav-menu {
    background: var(--lt-surface);
    border-bottom-color: var(--lt-border);
  }
}

/* ---------- Dropdowns ---------- */
html.light-mode .dropdown-menu {
  background-color: var(--lt-surface);
  color: var(--lt-text);
  border: 1px solid var(--lt-border);
  box-shadow: 0 6px 20px rgba(15, 23, 42, 0.12) !important;
}

html.light-mode .dropdown-item,
html.light-mode .dropdown-item a,
html.light-mode .user-details .media .media-body .user-title {
  color: var(--lt-text);
}

html.light-mode .dropdown-item:hover,
html.light-mode .dropdown-item.active,
html.light-mode .dropdown-item:active {
  background-color: var(--lt-bg-alt);
  color: var(--lt-text);
}

html.light-mode .dropdown-divider {
  border-top: 1px solid var(--lt-border);
}

/* ---------- Cards ---------- */
html.light-mode .card {
  background-color: var(--lt-surface);
  border: 1px solid var(--lt-border);
  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.06);
}

html.light-mode .card-header,
html.light-mode .card-title,
html.light-mode .card-action a i,
html.light-mode .card-action a svg {
  color: var(--lt-text);
}

html.light-mode .card-header,
html.light-mode .card-footer {
  border-color: var(--lt-border);
}

html.light-mode .row.row-group > div {
  border-right: 1px solid var(--lt-border);
}

/* ---------- Tables ---------- */
html.light-mode .table {
  color: var(--lt-text);
}

html.light-mode .table td,
html.light-mode .table th,
html.light-mode .table thead th,
html.light-mode .table-bordered,
html.light-mode .table-bordered td,
html.light-mode .table-bordered th {
  border-color: var(--lt-border);
}

html.light-mode .table-hover tbody tr:hover {
  background-color: var(--lt-bg-alt);
  color: var(--lt-text);
}

/* ---------- Forms ---------- */
html.light-mode .modal-body .form-control,
html.light-mode .form-control {
  background-color: var(--lt-surface);
  border: 1px solid var(--lt-border);
  color: var(--lt-text) !important;
}

html.light-mode .modal-body .form-control:focus,
html.light-mode .form-control:focus {
  background-color: var(--lt-surface);
  box-shadow: 0 0 0 0.2rem rgba(20, 171, 239, 0.25);
}

html.light-mode .form-control:disabled,
html.light-mode .form-control[readonly] {
  background-color: var(--lt-bg-alt);
}

html.light-mode .custom-file-label,
html.light-mode .input-group-text {
  background-color: var(--lt-bg-alt);
  border-color: var(--lt-border);
  color: var(--lt-text);
}

/* Preview modal's copy button — translucent white over a dark bar. */
html.light-mode .preview-header .copy-url-btn {
  background: rgba(15, 23, 42, 0.06);
  color: var(--lt-text-muted);
}

html.light-mode .preview-header .copy-url-btn:hover {
  background: rgba(67, 56, 202, 0.14);
  color: #4338ca;
}

/* Placeholder tint behind a member avatar while the image loads. */
html.light-mode img.user-avatar {
  background: rgba(15, 23, 42, 0.06);
}

/* Inline code: the dark theme's amber is unreadable on white. */
html.light-mode code {
  color: #9a3412;
  background: rgba(154, 52, 18, 0.08);
}

/* Dashboard stat tiles are translucent white over a dark page; on the light
   page that fill vanishes and the card loses its edges. */
html.light-mode .stat-tile {
  background: var(--lt-surface) !important;
  border: 1px solid var(--lt-border) !important;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
}

html.light-mode .stat-tile .progress {
  background: rgba(15, 23, 42, 0.08);
}

/* Per-app permission table inside the member modals. */
html.light-mode .app-perm-search input {
  background: var(--lt-bg-alt);
  border-color: var(--lt-border);
  color: var(--lt-text);
}

html.light-mode .app-perm-scroll {
  border-color: var(--lt-border);
}

html.light-mode .app-perm-table thead th {
  background: var(--lt-bg-alt);
  color: var(--lt-text-muted);
  border-bottom-color: var(--lt-border);
}

html.light-mode .app-perm-table tbody td {
  border-bottom-color: var(--lt-border);
}

html.light-mode .app-perm-table tbody tr:hover {
  background: rgba(67, 56, 202, 0.07);
}

html.light-mode .app-perm-pkg,
html.light-mode .app-perm-platform,
html.light-mode .app-perm-empty {
  color: var(--lt-text-muted);
}

/* Member modal: section headings and the basic-permission cards. */
html.light-mode .modal-section-label,
html.light-mode .user-info .user-name {
  color: var(--lt-text);
}

html.light-mode .user-info .user-username {
  color: var(--lt-text-muted);
}

html.light-mode .permission-checkbox {
  border-color: var(--lt-border);
}

html.light-mode .permission-checkbox:hover {
  background-color: rgba(67, 56, 202, 0.07);
  border-color: rgba(67, 56, 202, 0.45);
}

/* Tab strip splitting account details from permissions. */
html.light-mode .member-tabs {
  border-bottom-color: var(--lt-border);
}

html.light-mode .member-tab {
  color: var(--lt-text-muted);
}

html.light-mode .perm-admin-note {
  color: var(--lt-text-muted);
}

/* ---------- Footer ---------- */
html.light-mode .site-footer {
  background: var(--lt-surface);
  border-top-color: var(--lt-border);
  color: var(--lt-text-muted);
}

/* The white wordmark disappears on a light surface. */
html.light-mode .footer-brand img.logo-dark {
  display: none;
}

html.light-mode .footer-brand img.logo-light {
  display: inline-block;
}

html.light-mode .footer-social-link {
  background: rgba(15, 23, 42, 0.06);
  color: rgba(15, 23, 42, 0.62);
}

html.light-mode .footer-social-link:hover {
  background: rgba(15, 23, 42, 0.12);
  color: #0f172a;
}

html.light-mode .site-footer-bottom {
  border-top-color: var(--lt-border);
}

/* ---------- Misc ---------- */

html.light-mode .breadcrumb-item a {
  color: #4338ca;
}

html.light-mode .breadcrumb-item a:hover {
  color: #312e81;
}

html.light-mode .breadcrumb-item.active,
html.light-mode .breadcrumb-item + .breadcrumb-item::before {
  color: var(--lt-text-muted);
}

html.light-mode .nav-tabs .nav-link {
  color: var(--lt-text-muted);
}

html.light-mode .nav-tabs .nav-link.active {
  color: var(--lt-text);
}

html.light-mode .modal-content {
  background-color: var(--lt-surface);
  color: var(--lt-text);
  border-color: var(--lt-border);
  box-shadow: 0 20px 50px rgba(15, 23, 42, 0.22);
}

/* Labels and helper text inside dialogs. */
html.light-mode .modal-body label,
html.light-mode .modal-body .text-theme {
  color: var(--lt-text);
}

html.light-mode .modal-body small,
html.light-mode .modal-body .text-theme-muted,
html.light-mode .modal-body .form-text {
  color: var(--lt-text-muted);
}

html.light-mode .modal-header,
html.light-mode .modal-footer {
  border-color: var(--lt-border);
}

html.light-mode .close,
html.light-mode .modal-header .close {
  color: var(--lt-text);
  text-shadow: none;
}

/* The dark theme turns the close glyph white on hover, which outranks the rule
   above and makes it vanish against a white dialog. */
html.light-mode .modal-header .close:hover {
  color: #0f172a;
}

/* .btn-light / .btn-white are white text on a translucent white fill in the
   dark theme — invisible on a light background, so give them real contrast. */
html.light-mode .btn-primary,
html.light-mode .btn-primary:hover,
html.light-mode .btn-success,
html.light-mode .btn-success:hover,
html.light-mode .btn-danger,
html.light-mode .btn-danger:hover {
  color: #fff;
}

html.light-mode .btn-white,
html.light-mode .btn-light,
html.light-mode .btn-white:focus,
html.light-mode .btn-light:focus {
  color: var(--lt-text);
  background-color: var(--lt-surface);
  border: 1px solid rgba(15, 23, 42, 0.18);
}

html.light-mode .btn-white:hover,
html.light-mode .btn-light:hover,
html.light-mode .btn-white:not(:disabled):not(.disabled):active,
html.light-mode .btn-light:not(:disabled):not(.disabled):active {
  color: var(--lt-text);
  background-color: var(--lt-bg-alt);
  border-color: rgba(15, 23, 42, 0.25);
}

/* ---------- Theme toggle button ---------- */
.theme-toggle {
  cursor: pointer;
}

.theme-toggle .theme-toggle-icon-light {
  display: none;
}

html.light-mode .theme-toggle .theme-toggle-icon-light {
  display: inline-block;
}

html.light-mode .theme-toggle .theme-toggle-icon-dark {
  display: none;
}

/* =========================================================================
 * Page-level components (playable / apps / members / dashboard).
 * These pages ship their own inline dark styles (translucent white panels
 * + light grey text), which turn invisible on a light background — so the
 * surfaces get a real white card + border, and the text real contrast.
 * ========================================================================= */

html.light-mode .stat-card,
html.light-mode .stat-mini,
html.light-mode .playable-card,
html.light-mode .stats-card,
html.light-mode .upload-progress-wrap,
html.light-mode .permission-checkbox {
  background: var(--lt-surface) !important;
  border: 1px solid var(--lt-border) !important;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
}

html.light-mode .stat-card:hover,
html.light-mode .stat-mini:hover,
html.light-mode .playable-card:hover {
  border-color: rgba(102, 126, 234, 0.45) !important;
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.10);
}

/* Titles / numbers: were #e0e0e0 */
html.light-mode .stat-info h3,
html.light-mode .stat-mini h3,
html.light-mode .stats-card .stats-number,
html.light-mode .playable-card .card-title,
html.light-mode .upload-zone h4,
html.light-mode .filetree-header h5,
html.light-mode .preview-header .preview-title,
html.light-mode .form-group label,
html.light-mode .permission-checkbox .perm-label {
  color: var(--lt-text) !important;
}

/* Secondary text: were #888 / #999 / #666 / #aaa */
html.light-mode .stat-info p,
html.light-mode .stat-mini p,
html.light-mode .stats-card .stats-label,
html.light-mode .upload-zone p,
html.light-mode .upload-progress-wrap .upload-status,
html.light-mode .app-id-text,
html.light-mode .app-stat,
html.light-mode .empty-state h5,
html.light-mode .empty-state p,
html.light-mode .empty-apps,
html.light-mode .file-tree-item .file-size,
html.light-mode .permission-checkbox .perm-desc,
html.light-mode .project-name-input::placeholder {
  color: var(--lt-text-muted) !important;
}

html.light-mode .empty-state i,
html.light-mode .empty-apps i,
html.light-mode .empty-apps svg {
  color: rgba(15, 23, 42, 0.20) !important;
}

/* Upload zone */
html.light-mode .upload-zone {
  border: 2px dashed rgba(102, 126, 234, 0.35) !important;
  background: var(--lt-surface);
}

html.light-mode .upload-zone.drag-over {
  border-color: #667eea !important;
  background: rgba(102, 126, 234, 0.06);
}

html.light-mode .upload-progress-wrap .progress {
  background: var(--lt-bg-alt);
}

/* Inputs declared inline on those pages */
html.light-mode .project-name-input,
html.light-mode .form-control-dark {
  background: var(--lt-surface) !important;
  border: 1px solid var(--lt-border) !important;
  color: var(--lt-text) !important;
}

html.light-mode .project-name-input:focus,
html.light-mode .form-control-dark:focus {
  background: var(--lt-surface) !important;
  border-color: #667eea !important;
}

/* Page-specific tables */
html.light-mode .project-table thead th,
html.light-mode .member-table th {
  background: var(--lt-bg-alt) !important;
  color: var(--lt-text) !important;
}

html.light-mode .project-table tbody td,
html.light-mode .member-table td {
  color: var(--lt-text) !important;
  border-bottom: 1px solid var(--lt-border) !important;
}

html.light-mode .project-table tbody tr:hover,
html.light-mode .member-table tbody tr:hover {
  background: rgba(102, 126, 234, 0.06) !important;
}

html.light-mode .project-table .project-name {
  color: var(--lt-text) !important;
}

/* Modals / overlays declared inline */
html.light-mode .preview-modal-content,
html.light-mode .build-modal-content,
html.light-mode .filetree-modal-content {
  background: var(--lt-surface) !important;
  border: 1px solid var(--lt-border) !important;
}

html.light-mode .preview-header,
html.light-mode .build-modal-header,
html.light-mode .filetree-header {
  border-bottom: 1px solid var(--lt-border) !important;
}

html.light-mode .file-tree-item {
  color: var(--lt-text) !important;
  border-bottom: 1px solid var(--lt-border);
}

html.light-mode .file-tree-item:hover {
  background: var(--lt-bg-alt) !important;
}

html.light-mode .device-btn {
  background: var(--lt-bg-alt) !important;
  border: 1px solid var(--lt-border) !important;
  color: var(--lt-text) !important;
}

html.light-mode .device-btn.active {
  background: #667eea !important;
  border-color: #667eea !important;
  color: #fff !important;
}

html.light-mode .preview-header .preview-url-box,
html.light-mode .api-token-container {
  background: var(--lt-bg-alt) !important;
  border: 1px solid var(--lt-border) !important;
}

html.light-mode .preview-header .preview-url {
  color: var(--lt-text) !important;
}

html.light-mode .preview-close-btn {
  color: var(--lt-text) !important;
}

/* Coloured action buttons keep their hue but need a visible outline */
html.light-mode .btn-action,
html.light-mode .app-btn,
html.light-mode .html-badge {
  border: 1px solid rgba(15, 23, 42, 0.10);
}

/* The badge kept the dark theme's #81c784 on a white row: too light to read
   and glaring next to the rest of the table. Same darker green as the other
   light-mode greens. */
html.light-mode .html-badge {
  background: rgba(46, 125, 50, 0.10);
  color: #2e7d32;
}

html.light-mode .html-badge:hover {
  background: rgba(46, 125, 50, 0.18);
  border-color: rgba(46, 125, 50, 0.30);
  color: #1b5e20;
}

/* ---------- Theme-aware text utilities ---------- */
html.light-mode .text-theme {
  color: var(--lt-text);
}

html.light-mode .text-theme-muted {
  color: var(--lt-text-muted);
}

html.light-mode .btn-outline-light {
  color: var(--lt-text);
  border-color: rgba(15, 23, 42, 0.25);
}

html.light-mode .btn-outline-light:hover {
  color: var(--lt-text);
  background-color: var(--lt-bg-alt);
}

/* Several views set `border-color: rgba(255,255,255,0.08)` inline on <hr>. */
html.light-mode hr {
  border-color: var(--lt-border) !important;
}

html.light-mode .back-to-apps {
  background: rgba(102, 126, 234, 0.12);
}

html.light-mode .back-to-apps:hover {
  background: rgba(102, 126, 234, 0.22);
}

html.light-mode .app-header-icon.no-icon {
  background: rgba(102, 126, 234, 0.12);
}

/* Creative type tabs (Creative Library) */
/* :not(.active) matters — this selector outweighs the page's own
   `.creative-tab.active` rule, so without it the active tab loses its
   gradient and ends up white text on a white background. */
html.light-mode .creative-tab:not(.active) {
  background: var(--lt-surface);
  border-color: var(--lt-border);
  color: var(--lt-text);
}

html.light-mode .creative-tab:not(.active):hover {
  background: var(--lt-bg-alt);
}

/* Creative Library app table */
html.light-mode .library-card {
  background: var(--lt-surface) !important;
  border: 1px solid var(--lt-border) !important;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
}

html.light-mode .library-search input {
  background: var(--lt-bg-alt);
  border-color: var(--lt-border);
  color: var(--lt-text);
}

html.light-mode .app-table thead th {
  border-bottom-color: var(--lt-border);
}

html.light-mode .app-table tbody td {
  border-bottom-color: var(--lt-border);
}

html.light-mode .app-table tbody tr:hover {
  background: rgba(102, 126, 234, 0.07);
}

html.light-mode .app-table .app-icon.no-icon {
  background: rgba(102, 126, 234, 0.12);
}

/* Comments drawer */
html.light-mode .comments-drawer {
  background: var(--lt-surface);
  border-left-color: var(--lt-border);
  box-shadow: -8px 0 30px rgba(15, 23, 42, 0.15);
}

html.light-mode .comments-header,
html.light-mode .comments-form {
  border-color: var(--lt-border);
}

html.light-mode .comment-body {
  background: var(--lt-bg-alt);
}

html.light-mode .comments-form textarea {
  background: var(--lt-surface);
  border-color: var(--lt-border);
  color: var(--lt-text);
}

html.light-mode .btn-comments {
  background: rgba(102, 126, 234, 0.12);
}

/* Emoji picker */
html.light-mode .emoji-picker {
  background: var(--lt-surface);
  border-color: var(--lt-border);
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.18);
}

html.light-mode .emoji-tabs {
  border-bottom-color: var(--lt-border);
}

html.light-mode .emoji-tab.active,
html.light-mode .emoji-grid button:hover {
  background: rgba(102, 126, 234, 0.14);
}

html.light-mode .comment-edit textarea {
  background: var(--lt-surface);
  border-color: var(--lt-border);
  color: var(--lt-text);
}

/* Cocos packer channel picker */
html.light-mode .channel-item {
  background: var(--lt-surface);
  border-color: var(--lt-border);
}

/* Cocos Packer page */
html.light-mode .packer-card {
  background: var(--lt-surface) !important;
  border: 1px solid var(--lt-border) !important;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
}

html.light-mode .packer-card .upload-zone {
  border-color: rgba(102, 126, 234, 0.35);
  background: var(--lt-surface);
}

/* ---------- Low-key control tokens ----------
   Dark defaults live in app-style.css (:root). On white the pastel accents
   used by the dark theme drop to ~2.5:1 contrast, so light mode gets the
   darker end of each hue instead. */
html.light-mode {
  --icon-action: rgba(15, 23, 42, 0.62);
  --icon-action-hover: #0f172a;
  --icon-action-hover-bg: rgba(15, 23, 42, 0.08);
  --icon-danger: #c62828;
  --icon-danger-bg: rgba(198, 40, 40, 0.12);
  --accent: #4338ca;
  --accent-strong: #4338ca;
  --info: #1565c0;
  --success: #2e7d32;
}

/* Row action buttons (concept list, and anything reusing .action-cell). */
html.light-mode .concept-table .concept-badge {
  background: rgba(67, 56, 202, 0.12);
}

/* Coloured pill buttons: the dark theme paints a light hue over a dark
   surface; on white the same hue needs a darker text colour to stay legible. */
html.light-mode .btn-files {
  background: rgba(21, 101, 192, 0.12);
  color: #1565c0;
}

html.light-mode .btn-files:hover {
  background: rgba(21, 101, 192, 0.22);
  color: #0d47a1;
}

html.light-mode .btn-download {
  background: rgba(46, 125, 50, 0.12);
  color: #2e7d32;
}

html.light-mode .btn-download:hover {
  background: rgba(46, 125, 50, 0.22);
  color: #1b5e20;
}

html.light-mode .btn-delete {
  background: rgba(198, 40, 40, 0.12);
  color: #c62828;
}

html.light-mode .btn-delete:hover {
  background: rgba(198, 40, 40, 0.22);
  color: #b71c1c;
}

html.light-mode .btn-comments {
  background: rgba(67, 56, 202, 0.12);
  color: #4338ca;
}

html.light-mode .btn-comments:hover {
  background: rgba(67, 56, 202, 0.22);
  color: #3730a3;
}

/* Stat tiles and count columns read as accents, not body text. */
html.light-mode .stat-icon.purple {
  background: rgba(67, 56, 202, 0.12);
  color: #4338ca;
}

html.light-mode .stat-icon.green {
  background: rgba(46, 125, 50, 0.12);
  color: #2e7d32;
}

html.light-mode .stat-icon.blue {
  background: rgba(21, 101, 192, 0.12);
  color: #1565c0;
}

html.light-mode .stat-card {
  background: var(--lt-surface);
  border-color: var(--lt-border);
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
}

html.light-mode .app-table .count-cell,
html.light-mode .concept-table .count-cell,
html.light-mode .app-table .go-cell {
  color: #4338ca;
}

/* Concept list shares the app table's light treatment. */
html.light-mode .concept-table thead th,
html.light-mode .concept-table tbody td {
  border-bottom-color: var(--lt-border);
}

html.light-mode .concept-table tbody tr:hover {
  background: rgba(67, 56, 202, 0.07);
}

/* Concept create/rename dialog — the dark theme hard-codes a navy panel. */
html.light-mode .cp-modal {
  background: rgba(15, 23, 42, 0.45);
}

html.light-mode .cp-modal-box {
  background: var(--lt-surface);
  border-color: var(--lt-border);
  box-shadow: 0 20px 50px rgba(15, 23, 42, 0.22);
  color: var(--lt-text);
}

html.light-mode .cp-modal-box input {
  background: var(--lt-bg-alt);
  border-color: var(--lt-border);
  color: var(--lt-text);
}

/* Tool-link dialog on the Creative Library app list; the dark theme
   hard-codes a navy panel, same as the concept dialog above. */
html.light-mode .tl-modal {
  background: rgba(15, 23, 42, 0.45);
}

html.light-mode .tl-box {
  background: var(--lt-surface);
  border-color: var(--lt-border);
  box-shadow: 0 20px 50px rgba(15, 23, 42, 0.22);
  color: var(--lt-text);
}

html.light-mode .tl-box select option {
  background: var(--lt-surface);
  color: var(--lt-text);
}

html.light-mode .tl-box select,
html.light-mode .tl-box input {
  background: var(--lt-bg-alt);
  border-color: var(--lt-border);
  color: var(--lt-text);
}

/* Duplicate-scope choices inside the concept dialog. */
html.light-mode .cp-modal-box .cp-option {
  border-color: var(--lt-border);
}

html.light-mode .cp-modal-box .cp-option:has(input:checked) {
  border-color: var(--accent);
}

/* Flash messages: the dark tints read as pale text on white, so use the
   darker end of each hue instead. */
html.light-mode .alert.flash-alert.alert-success {
  background-color: rgba(46, 125, 50, 0.10);
  border-color: rgba(46, 125, 50, 0.35);
  color: #1b5e20;
}

html.light-mode .alert.flash-alert.alert-danger {
  background-color: rgba(198, 40, 40, 0.08);
  border-color: rgba(198, 40, 40, 0.35);
  color: #b71c1c;
}

html.light-mode .concept-header .back-link {
  background: var(--lt-bg-alt);
  border-color: var(--lt-border);
  color: var(--lt-text);
}

html.light-mode .concept-header .app-icon.no-icon {
  background: rgba(67, 56, 202, 0.12);
  color: #4338ca;
}

html.light-mode .empty-state i,
html.light-mode .empty-state svg {
  color: rgba(15, 23, 42, 0.22);
}

/* ---------- Tool versions page ----------
   These panels are written against the dark theme: a translucent white fill
   over a dark page. On the light page that fill is invisible, so the cards
   lose their edges entirely — give them the same surface/border as the rest. */
html.light-mode .tool-card {
  background: var(--lt-surface);
  border: 1px solid var(--lt-border);
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
}

html.light-mode .tool-status {
  background: rgba(67, 56, 202, 0.08);
  border-color: rgba(67, 56, 202, 0.22);
}

html.light-mode .tool-status.is-error {
  background: rgba(180, 83, 9, 0.08);
  border-color: rgba(180, 83, 9, 0.30);
}

html.light-mode .tool-status.is-error i,
html.light-mode .tool-status.is-error svg {
  color: #b45309;
}

html.light-mode .version-table th {
  border-bottom-color: var(--lt-border);
}

html.light-mode .version-table td {
  border-bottom-color: var(--lt-border);
}

html.light-mode .badge-active {
  background: rgba(46, 125, 50, 0.14);
}

html.light-mode .btn-mini {
  background: rgba(67, 56, 202, 0.12);
}

html.light-mode .btn-mini:hover {
  background: rgba(67, 56, 202, 0.22);
}

html.light-mode .btn-mini.danger {
  background: rgba(198, 40, 40, 0.12);
}

html.light-mode .btn-mini.danger:hover {
  background: rgba(198, 40, 40, 0.22);
}

/* The upload button is .btn-light, which is near-invisible on a white card. */
html.light-mode .tool-card .btn-light {
  background: var(--lt-bg-alt);
  border: 1px solid var(--lt-border);
  color: var(--lt-text);
}

html.light-mode .tool-card .btn-light:hover {
  background: #dfe4ec;
  color: var(--lt-text);
}

/* Build modal: the sticky action row sits on the modal surface, so it needs
   the same background in light mode or the list scrolls through it. */
html.light-mode .build-modal-body .build-actions {
  background: var(--lt-surface) !important;
}