/* ═══════════════════════════════════════════
   Dark Mode — activated via html[data-theme="dark"]
   ═══════════════════════════════════════════ */

/* ─── CSS Variable overrides ─── */
html[data-theme="dark"] {
  --page-bg: #1a1a1a;
  --card-bg: #0C0C0C;
  --surface: rgba(255, 255, 255, 0.06);
  --surface-strong: rgba(255, 255, 255, 0.10);
  --surface-glass: rgba(255, 255, 255, 0.04);
  --surface-hover: rgba(255, 255, 255, 0.08);
  --surface-outline: rgba(255, 255, 255, 0.10);
  --card-border: rgba(255, 255, 255, 0.06);
  --card-border-hover: rgba(255, 255, 255, 0.10);
  --form-focus-border: rgba(7, 193, 96, 0.4);
  --form-focus-glow: 0 0 0 2px rgba(7, 193, 96, 0.12);
  --line: #2e2e2e;
  --line-soft: rgba(255, 255, 255, 0.06);
  --line-card: #2a2a2a;
  --text-primary: #E5E5E5;
  --text-secondary: #888888;
  --text-placeholder: #555555;
  --empty-state-text: #666666;
  --text-muted: rgba(255, 255, 255, 0.35);
  --text-strong: rgba(255, 255, 255, 0.90);
  --shadow-soft: 0px 8px 16px -2px rgba(0, 0, 0, 0.20);
  --shadow-green: 0px 8px 16px -2px rgba(7, 193, 96, 0.16);
  --white: #242424;
  --form-field-bg: rgba(255, 255, 255, 0.03);
}

/* ─── html / body / .app background ─── */
html[data-theme="dark"] body,
html[data-theme="dark"] html {
  background: #1a1a1a;
  color: #E5E5E5;
}

html[data-theme="dark"] .app {
  background: #1a1a1a;
}

/* ─── Ambient background dimming ─── */
html[data-theme="dark"] .ambient-gradient {
  opacity: 0.25;
}

html[data-theme="dark"] .ambient-blobs {
  opacity: 0.15;
}

html[data-theme="dark"] .ambient-veil {
  background:
    linear-gradient(180deg, rgba(26, 26, 26, 0.70) 0%, rgba(26, 26, 26, 0.85) 100%),
    radial-gradient(circle at 50% 24%, rgba(26, 26, 26, 0.30), transparent 58%) !important;
}

/* ─── Brand badge ─── */
html[data-theme="dark"] .brand-badge {
  background: #E5E5E5;
  color: #1a1a1a;
}

/* ─── Topbar ─── */
html[data-theme="dark"] .topbar-login {
  color: #888888;
  background: var(--surface);
}

html[data-theme="dark"] .topbar-login:hover {
  color: #E5E5E5;
}

html[data-theme="dark"] .topbar-login.is-logged-in {
  color: #E5E5E5;
}

html[data-theme="dark"] .topbar-login:hover .topbar-login-icon {
  filter: brightness(0) invert(1);
}

html[data-theme="dark"] .topbar-home:hover img,
html[data-theme="dark"] .topbar-home.is-active img {
  filter: brightness(0) invert(1);
}

html[data-theme="dark"] .topbar-new:hover img {
  filter: brightness(0) invert(1);
}

html[data-theme="dark"] .topbar-new:hover {
  color: #E5E5E5;
}

html[data-theme="dark"] .topbar-tab.is-active .tab-main,
html[data-theme="dark"] .topbar-tab.is-active .tab-close,
html[data-theme="dark"] .topbar-tab:hover .tab-main,
html[data-theme="dark"] .topbar-tab:hover .tab-close {
  color: #E5E5E5;
}

html[data-theme="dark"] .topbar-tab.is-active .tab-title,
html[data-theme="dark"] .topbar-tab:hover .tab-title {
  color: #E5E5E5;
}

html[data-theme="dark"] .topbar-tab.is-active .tab-close img,
html[data-theme="dark"] .topbar-tab:hover .tab-close img {
  filter: brightness(0) invert(1);
}

/* ─── Topbar dropdown ─── */
html[data-theme="dark"] .topbar-user-dropdown {
  background: rgba(36, 36, 36, 0.92);
  border-color: #2e2e2e;
  backdrop-filter: blur(8px);
}

html[data-theme="dark"] .topbar-dropdown-item {
  color: #888888;
}

html[data-theme="dark"] .topbar-dropdown-item:hover {
  background: rgba(255, 255, 255, 0.06);
  color: #E5E5E5;
}

html[data-theme="dark"] .topbar-dropdown-item + .topbar-dropdown-item {
  border-top-color: #2e2e2e;
}

/* ─── Unified dark button style (match "我的模板" button) ─── */
html[data-theme="dark"] {
  --dark-btn-bg: rgba(255, 255, 255, 0.1);
}

html[data-theme="dark"] .back-to-home-btn,
html[data-theme="dark"] .admin-all-edits-btn,
html[data-theme="dark"] .admin-edit-ads-btn,
html[data-theme="dark"] .admin-manage-tags-btn,
html[data-theme="dark"] .temp-file-btn,
html[data-theme="dark"] .theme-toggle-btn:not(.page-corner-theme-toggle),
html[data-theme="dark"] .region-toggle-btn {
  background: var(--dark-btn-bg);
  color: #999999;
}

html[data-theme="dark"] .back-to-home-btn:hover,
html[data-theme="dark"] .admin-all-edits-btn:hover,
html[data-theme="dark"] .admin-edit-ads-btn:hover,
html[data-theme="dark"] .admin-manage-tags-btn:hover,
html[data-theme="dark"] .temp-file-btn:hover,
html[data-theme="dark"] .theme-toggle-btn:not(.page-corner-theme-toggle):hover,
html[data-theme="dark"] .region-toggle-btn:hover {
  background: var(--dark-btn-bg);
  color: #FFFFFF;
}

/* 上传模板：深色模式保持品牌绿（与浅色一致） */
html[data-theme="dark"] .admin-upload-btn {
  background: #07C160;
  color: #FFFFFF;
}

html[data-theme="dark"] .admin-upload-btn:hover {
  background: #06AE56;
  color: #FFFFFF;
}

html[data-theme="dark"] .back-to-home-btn img,
html[data-theme="dark"] .temp-file-btn-icon,
html[data-theme="dark"] .theme-toggle-btn:not(.page-corner-theme-toggle) .theme-toggle-icon,
html[data-theme="dark"] .region-toggle-icon {
  opacity: 1;
  filter: brightness(0) invert(0.6);
  transition: opacity 0.2s ease, filter 0.2s ease, color 0.2s ease;
}

html[data-theme="dark"] .admin-upload-btn img {
  opacity: 1;
  filter: none;
  transition: opacity 0.2s ease;
}

html[data-theme="dark"] .back-to-home-btn:hover img,
html[data-theme="dark"] .temp-file-btn:hover .temp-file-btn-icon,
html[data-theme="dark"] .theme-toggle-btn:not(.page-corner-theme-toggle):hover .theme-toggle-icon,
html[data-theme="dark"] .region-toggle-btn:hover .region-toggle-icon {
  opacity: 1;
  filter: brightness(0) invert(1);
}

/* ─── Sidebar ─── */
html[data-theme="dark"] .sidebar-item {
  color: #bbb;
}

html[data-theme="dark"] .sidebar-item:not(.is-active):hover {
  background: rgba(255, 255, 255, 0.06);
  box-shadow: 0px 2px 12px rgba(0, 0, 0, 0.18);
  outline-color: rgba(255, 255, 255, 0.08);
}

html[data-theme="dark"] .sidebar-item.is-active:hover {
  background: rgba(255, 255, 255, 0.06);
  box-shadow: 0px 2px 12px rgba(0, 0, 0, 0.18);
  outline-color: rgba(255, 255, 255, 0.08);
}

html[data-theme="dark"] .sidebar-toggle:hover {
  background: transparent;
}

html[data-theme="dark"] .sidebar-toggle:hover img {
  filter: brightness(0) saturate(100%) invert(100%) !important;
}

html[data-theme="dark"] .sidebar-item:not(.is-active) img,
html[data-theme="dark"] .sidebar-toggle img {
  filter: brightness(0) saturate(100%) invert(93%) !important;
}

html[data-theme="dark"] .sidebar-item:hover:not(.is-active) img {
  filter: brightness(0) saturate(100%) invert(93%) !important;
}

html[data-theme="dark"] .sidebar-item.is-active img {
  filter: none !important;
}

html[data-theme="dark"] .sidebar-item.sidebar-item--help.is-active {
  color: #07C160;
  text-shadow: 0 0 8px rgba(7, 193, 96, 0.35);
}

html[data-theme="dark"] .sidebar-item.sidebar-item--help:not(.is-active) {
  color: #bbb;
}

/* ─── Scrollbar ─── */
html[data-theme="dark"] .content-scroll::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.12);
}

/* ─── Template cards (template-center, admin, my-templates) ─── */
html[data-theme="dark"] .template-card,
html[data-theme="dark"] .admin-template-card,
html[data-theme="dark"] .template-card.design-library-card {
  background: var(--card-bg, #0C0C0C);
  outline-color: rgba(255, 255, 255, 0.06);
  box-shadow: 0px 8px 16px -2px rgba(0, 0, 0, 0.24);
}

html[data-theme="dark"] .template-card:hover,
html[data-theme="dark"] .admin-template-card:hover,
html[data-theme="dark"] .template-card.design-library-card:hover {
  box-shadow: 0px 12px 24px -4px rgba(0, 0, 0, 0.32);
}

html[data-theme="dark"] .template-card.is-highlight {
  box-shadow: 0px 8px 16px -2px rgba(7, 193, 96, 0.20);
}

html[data-theme="dark"] .template-card-title,
html[data-theme="dark"] .admin-card-title {
  color: #E5E5E5;
}

html[data-theme="dark"] .tag,
html[data-theme="dark"] .admin-card-tag {
  outline-color: var(--card-border);
  color: #888888;
}

html[data-theme="dark"] .template-card-actions,
html[data-theme="dark"] .admin-card-actions,
html[data-theme="dark"] .card-actions,
html[data-theme="dark"] .admin-card-footer--stack,
html[data-theme="dark"] .admin-card-footer--stack-collapsed,
html[data-theme="dark"] .card-footer--stack,
html[data-theme="dark"] .card-footer--stack-collapsed {
  border-top-color: var(--stack-card-divider, rgba(255, 255, 255, 0.03));
}

html[data-theme="dark"] .card-action-col + .card-action-col,
html[data-theme="dark"] .card-action-col + .card-stack-toggle-col,
html[data-theme="dark"] .admin-card-action-col + .admin-card-action-col,
html[data-theme="dark"] .admin-card-action-col + .admin-card-stack-toggle-col,
html[data-theme="dark"] .card-stack-toggle-col,
html[data-theme="dark"] .admin-card-stack-toggle-col {
  border-left-color: var(--stack-card-divider, rgba(255, 255, 255, 0.03));
}

html[data-theme="dark"] .card-action,
html[data-theme="dark"] .admin-card-action,
html[data-theme="dark"] .card-action-btn {
  color: #888888;
}

html[data-theme="dark"] .card-action:hover,
html[data-theme="dark"] .admin-card-action:hover,
html[data-theme="dark"] .card-action-btn:hover {
  color: #E5E5E5;
  font-weight: 400;
}

html[data-theme="dark"] .card-action:hover img,
html[data-theme="dark"] .admin-card-action:hover img,
html[data-theme="dark"] .card-action-btn:hover img {
  filter: brightness(0) invert(1);
}

html[data-theme="dark"] .card-action:hover svg,
html[data-theme="dark"] .admin-card-action:hover svg,
html[data-theme="dark"] .card-action-btn:hover svg {
  color: #E5E5E5;
}

html[data-theme="dark"] .admin-card-date {
  color: #555555;
}

/* Tooltip/bubble stays dark */
html[data-theme="dark"] .card-action-bubble-body {
  background: #E5E5E5;
  color: #1a1a1a;
}

html[data-theme="dark"] .card-action-bubble-arrow::before {
  border-top-color: #E5E5E5;
}

/* ─── Filter buttons ─── */
html[data-theme="dark"] .filter-btn,
html[data-theme="dark"] .admin-filter-btn {
  color: rgba(255, 255, 255, 0.40);
}

html[data-theme="dark"] .filter-btn.is-active,
html[data-theme="dark"] .admin-filter-btn.is-active {
  background: rgba(255, 255, 255, 0.06);
  color: #E5E5E5;
}

html[data-theme="dark"] .filter-btn:hover,
html[data-theme="dark"] .admin-filter-btn:hover {
  background: rgba(255, 255, 255, 0.06);
  color: #E5E5E5;
}

/* ─── Green primary buttons (keep green, adjust slightly) ─── */
html[data-theme="dark"] .upload-design-btn,
html[data-theme="dark"] .admin-btn--primary,
html[data-theme="dark"] .login-submit {
  background: #07C160;
  color: #FFFFFF;
}

html[data-theme="dark"] .upload-design-btn:hover,
html[data-theme="dark"] .admin-btn--primary:hover,
html[data-theme="dark"] .login-submit:hover {
  background: #06AE56;
}

/* ─── Secondary / outline buttons ─── */
html[data-theme="dark"] .admin-btn--secondary {
  background: #2e2e2e;
  color: #E5E5E5;
}

html[data-theme="dark"] .admin-btn--secondary:hover {
  background: rgba(255, 255, 255, 0.10);
}

/* ─── Title section ─── */
html[data-theme="dark"] .content-title,
html[data-theme="dark"] .admin-title,
html[data-theme="dark"] .login-title,
html[data-theme="dark"] h1, html[data-theme="dark"] h2 {
  color: #E5E5E5;
}

/* ─── Modal overlays ─── */
html[data-theme="dark"] .auth-required-modal,
html[data-theme="dark"] .admin-upload-modal,
html[data-theme="dark"] .admin-delete-confirm-modal {
  background: rgba(0, 0, 0, 0.65);
}

html[data-theme="dark"] .auth-required-dialog,
html[data-theme="dark"] .admin-delete-dialog {
  background: var(--modal-bg, #F7F7F7);
  box-shadow: 0px 8px 32px rgba(0, 0, 0, 0.40);
}

html[data-theme="dark"] .admin-upload-modal .admin-upload-dialog {
  background: #FFFFFF;
  box-shadow: 0px 8px 32px rgba(0, 0, 0, 0.40);
}

html[data-theme="dark"] .admin-upload-modal :is(.admin-upload-header, .admin-upload-body) {
  background: #FAFAFA;
}

html[data-theme="dark"] .admin-upload-modal .admin-upload-footer {
  background: #FFFFFF;
}

html[data-theme="dark"] .admin-upload-header,
html[data-theme="dark"] .admin-delete-title {
  color: #E5E5E5;
}

/* ─── Upload drop zone ─── */
html[data-theme="dark"] .admin-upload-drop {
  border-color: var(--card-border);
  background: var(--form-field-bg, rgba(255, 255, 255, 0.03));
}

html[data-theme="dark"] .admin-upload-drop:hover,
html[data-theme="dark"] .admin-upload-drop.is-dragover,
html[data-theme="dark"] .admin-upload-drop:focus-visible,
html[data-theme="dark"] .admin-upload-drop:active {
  border-color: var(--form-focus-border);
  background: var(--form-field-bg, rgba(255, 255, 255, 0.03));
  box-shadow: none;
}

/* ─── Upload radio items ─── */
html[data-theme="dark"] .admin-upload-radio-item {
  border-color: var(--card-border);
  background: #2a2a2a;
}

html[data-theme="dark"] .admin-upload-radio-label {
  color: #888888;
}

html[data-theme="dark"] .admin-upload-radio-item.is-selected .admin-upload-radio-label {
  color: #E5E5E5;
}

html[data-theme="dark"] .admin-upload-radio-dot {
  border-color: var(--card-border);
}

html[data-theme="dark"] .admin-upload-field-label {
  color: #888888;
}

/* ─── Upload preview area ─── */
html[data-theme="dark"] .admin-upload-preview-area {
  border-color: var(--card-border);
  background: #2a2a2a;
}

html[data-theme="dark"] .admin-upload-preview-rebtn {
  background: #2a2a2a;
  border-color: #07C160;
  color: #07C160;
}

html[data-theme="dark"] .admin-upload-footer {
  border-top-color: var(--card-border);
}

/* ─── Text inputs ─── */
html[data-theme="dark"] .text-input {
  background: #242424;
  border-color: var(--card-border);
  color: #E5E5E5;
}

html[data-theme="dark"] .text-input::placeholder {
  color: #555555;
}

html[data-theme="dark"] .text-input:focus {
  border-color: #07C160;
  box-shadow:
    -2px 0 1px rgba(7, 193, 96, 0.15),
     2px 0 1px rgba(7, 193, 96, 0.15),
     0 -2px 1px rgba(7, 193, 96, 0.15),
     0 2px 1px rgba(7, 193, 96, 0.15);
}

/* ─── File preview thumb ─── */
html[data-theme="dark"] .admin-upload-file-preview {
  background: #2a2a2a;
}

/* ─── Login page specifics ─── */
html[data-theme="dark"][data-page="admin-login"],
html[data-theme="dark"][data-page="admin-login"] body {
  background: #000000;
}

html[data-theme="dark"] .login-card-shell {
  box-shadow: 0 8px 16px -2px rgba(0, 0, 0, 0.04);
}

html[data-theme="dark"] .login-card {
  background: var(--card-bg, #0C0C0C);
  border: 1px solid rgba(255, 255, 255, 0.067);
  outline: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
}

html[data-theme="dark"] .login-footer {
  border-top-color: var(--stack-card-divider, rgba(255, 255, 255, 0.03));
}

html[data-theme="dark"] .login-footer .link-action {
  color: #6B8FE0;
}

html[data-theme="dark"] .form-label {
  color: #E5E5E5;
}

/* admin-login.html — 后台登录页 */
html[data-theme="dark"] .login-card__title,
html[data-theme="dark"] .login-field__label {
  color: var(--text-primary, #E5E5E5);
}

html[data-theme="dark"] .login-field__input {
  background: var(--form-field-bg, rgba(255, 255, 255, 0.03));
  border: 1px solid var(--card-border, rgba(255, 255, 255, 0.1));
  box-shadow: none;
  color: var(--text-primary, #E5E5E5);
}

html[data-theme="dark"] .login-field__input::placeholder {
  color: var(--text-placeholder, #555555);
}

html[data-theme="dark"] .login-field__input:hover {
  border-color: var(--card-border-hover, rgba(255, 255, 255, 0.16));
}

html[data-theme="dark"] .login-field__input:focus {
  border-color: var(--focus-ring, #B4ECCE);
  box-shadow: -2px 0 1px var(--focus-shadow-color, rgba(180, 236, 206, 0.25)),
    2px 0 1px var(--focus-shadow-color, rgba(180, 236, 206, 0.25)),
    0 -2px 1px var(--focus-shadow-color, rgba(180, 236, 206, 0.25)),
    0 2px 1px var(--focus-shadow-color, rgba(180, 236, 206, 0.25));
  outline: 1px solid var(--focus-ring, #B4ECCE);
  outline-offset: -1px;
}

html[data-theme="dark"] .login-field__input:-webkit-autofill,
html[data-theme="dark"] .login-field__input:-webkit-autofill:hover,
html[data-theme="dark"] .login-field__input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--text-primary, #E5E5E5);
  -webkit-box-shadow: 0 0 0 1000px var(--card-bg, #0C0C0C) inset;
  box-shadow: 0 0 0 1000px var(--card-bg, #0C0C0C) inset;
}

html[data-theme="dark"] .login-card__footer {
  border-top: 1px solid var(--stack-card-divider, rgba(255, 255, 255, 0.03));
}

html[data-theme="dark"] .login-btn--cancel {
  background: rgba(255, 255, 255, 0.10);
  color: #999999;
}

html[data-theme="dark"] .login-btn--cancel:hover {
  background: rgba(255, 255, 255, 0.14);
  color: #E5E5E5;
}

html[data-theme="dark"] .logo-library-modal-cancel-btn {
  background: rgba(255, 255, 255, 0.10);
  color: #999999;
}

html[data-theme="dark"] .logo-library-modal-cancel-btn:hover {
  background: rgba(255, 255, 255, 0.14);
  color: #E5E5E5;
}

html[data-theme="dark"] .login-btn--submit:hover {
  background: #06AE56;
}

/* ─── Image preview overlay ─── */
html[data-theme="dark"] .image-preview-overlay {
  background: rgba(0, 0, 0, 0.90);
}

/* ─── Template detail overlay ─── */
html[data-theme="dark"] .template-detail-overlay {
  background: rgba(0, 0, 0, 0.85);
}

html[data-theme="dark"] .template-detail-panel {
  background: #242424;
}

/* ─── Admin header section colors ─── */
html[data-theme="dark"] .admin-upload-hint {
  color: #888888;
}

html[data-theme="dark"] .admin-upload-hint-small {
  color: #555555;
}

/* ─── Empty states ─── */
html[data-theme="dark"] :is(
  .empty-state-hint,
  .admin-empty,
  .admin-page-empty,
  .empty-state,
  .cards-empty,
  .template-grid-empty,
  .design-library-modal-empty,
  .edit-ads-empty,
  .download-preview-empty
) {
  color: var(--empty-state-text, #666666);
}

/* ─── Danger / Delete ─── */
html[data-theme="dark"] .admin-delete-text {
  color: #888888;
}

/* ─── Composer / chat area (if applicable) ─── */
html[data-theme="dark"] .composer-shell {
  background: rgba(255, 255, 255, 0.04);
}

/* ─── Help manual page ─── */
html[data-theme="dark"] .manual-card {
  background: var(--card-bg, #0C0C0C);
}

/* ─── AI Tools page ─── */
html[data-theme="dark"] .tool-card {
  background: var(--card-bg, #0C0C0C);
  outline-color: rgba(255, 255, 255, 0.06);
}

/* ─── Misc hardcoded #999999 and #333333 color overrides ─── */
html[data-theme="dark"] .topbar-new {
  color: #888888;
}

html[data-theme="dark"] .tab-main {
  color: #888888;
}

html[data-theme="dark"] .tab-title {
  color: #888888;
}

/* ─── SVG icons in topbar should invert in dark mode ─── */
html[data-theme="dark"] .brand img {
  filter: none;
}

html[data-theme="dark"] .brand-title {
  color: #FFFFFF;
}

html[data-theme="dark"] .topbar-home img {
  filter: brightness(0) invert(0.5);
}

html[data-theme="dark"] .topbar-new img {
  filter: brightness(0) invert(0.5);
}

html[data-theme="dark"] .topbar-login-icon {
  filter: brightness(0) invert(0.5);
}

/* ═══════════════════════════════════════════
   Edit-template page — Left sidebar (form panel)
   ═══════════════════════════════════════════ */

/* Panel card */
html[data-theme="dark"] .form-sidebar-panel {
  background: rgba(255, 255, 255, 0.06);
  box-shadow: 0px 8px 16px -2px rgba(0, 0, 0, 0.20);
  outline-color: var(--card-border);
}

html[data-theme="dark"] .editor-form-sidebar.is-loading .form-sidebar-panel {
  background: rgba(255, 255, 255, 0.06);
}

/* Title */
html[data-theme="dark"] .form-sidebar-title {
  color: #E5E5E5;
}

/* Close / expand icons */
html[data-theme="dark"] .form-sidebar-close img {
  filter: brightness(0) invert(0.6);
  opacity: 1;
  transition: filter 0.2s ease, opacity 0.2s ease;
}

html[data-theme="dark"] .form-sidebar-close:hover img,
html[data-theme="dark"] .form-sidebar-close:focus-visible img {
  filter: brightness(0) invert(1);
  opacity: 1;
}

html[data-theme="dark"] .form-sidebar-expand-trigger,
html[data-theme="dark"] .assistant-collapse-trigger {
  background: rgba(255, 255, 255, 0.1);
  outline: none;
  box-shadow: 0px 8px 16px -2px rgba(0, 0, 0, 0.2);
}

html[data-theme="dark"] .form-sidebar-expand-trigger:hover,
html[data-theme="dark"] .form-sidebar-expand-trigger:focus-visible,
html[data-theme="dark"] .assistant-collapse-trigger:hover,
html[data-theme="dark"] .assistant-collapse-trigger:focus-visible {
  background: rgba(255, 255, 255, 0.14);
}

html[data-theme="dark"] .form-sidebar-expand-trigger img,
html[data-theme="dark"] .assistant-collapse-trigger img {
  filter: brightness(0) invert(0.6);
  opacity: 1;
  transition: filter 0.2s ease, opacity 0.2s ease;
}

html[data-theme="dark"] .form-sidebar-expand-trigger:hover img,
html[data-theme="dark"] .form-sidebar-expand-trigger:focus-visible img,
html[data-theme="dark"] .assistant-collapse-trigger:hover img,
html[data-theme="dark"] .assistant-collapse-trigger:focus-visible img {
  filter: brightness(0) invert(1);
  opacity: 1;
}

/* Section labels */
html[data-theme="dark"] .form-field-label {
  color: #888888;
}

/* 表单控件底色：白 3%；按钮类控件仍用原深色底 */
html[data-theme="dark"] {
  --form-field-bg: rgba(255, 255, 255, 0.03);
}

/* ─── Form inputs (textarea & input) ─── */
html[data-theme="dark"] .form-textarea,
html[data-theme="dark"] .form-input {
  background: var(--form-field-bg);
  border: none;
  color: #E5E5E5;
  box-shadow: inset 0 0 0 1px transparent;
}

html[data-theme="dark"] .form-textarea::placeholder,
html[data-theme="dark"] .form-input::placeholder {
  color: #555555;
}

html[data-theme="dark"] .form-textarea:hover,
html[data-theme="dark"] .form-input:hover {
  box-shadow: inset 0 0 0 1px var(--form-focus-border);
}

html[data-theme="dark"] .form-textarea:focus,
html[data-theme="dark"] .form-input:focus {
  box-shadow: var(--form-focus-glow), inset 0 0 0 1px var(--form-focus-border);
}

/* 文字输入行：交互与浅色模式一致（描边变色 + 聚焦光晕，无渐变动画） */
html[data-theme="dark"] .text-input-row {
  border: none;
  outline: 1px solid var(--card-border);
  outline-offset: -1px;
  background: var(--form-field-bg);
  box-shadow: none;
  transition: outline-color 0.2s ease, box-shadow 0.2s ease;
}

html[data-theme="dark"] .text-input-row:hover {
  outline-color: var(--form-focus-border);
  box-shadow: none;
}

html[data-theme="dark"] .text-input-row:focus-within {
  outline-color: var(--form-focus-border);
  box-shadow: var(--form-focus-glow);
}

html[data-theme="dark"] .text-input-row .form-textarea {
  background: transparent;
  border: none;
  box-shadow: none;
  color: #E5E5E5;
}

html[data-theme="dark"] .text-input-row .form-textarea::placeholder {
  color: #555555;
}

html[data-theme="dark"] .text-input-row .form-textarea:hover,
html[data-theme="dark"] .text-input-row .form-textarea:focus {
  border: none;
  box-shadow: none;
  color: #E5E5E5;
}

/* 竖线与外框同色，避免 rgba 叠加比边框更亮 */
html[data-theme="dark"] .text-input-row-divider {
  background: var(--card-border);
}

html[data-theme="dark"] .text-clone-btn,
html[data-theme="dark"] .text-delete-btn {
  position: relative;
  z-index: 1;
  background: transparent;
}

/* ─── Media tiles (QR, design elements, logo) ─── */
html[data-theme="dark"] .form-media-tile,
html[data-theme="dark"] .dynamic-media-tile,
html[data-theme="dark"] .footer-collab-logo-tile,
html[data-theme="dark"] .footer-collab-upload {
  background: var(--form-field-bg);
  border-color: var(--card-border);
}

html[data-theme="dark"] .form-media-tile:hover,
html[data-theme="dark"] .form-media-tile:focus-visible,
html[data-theme="dark"] .dynamic-media-tile:hover,
html[data-theme="dark"] .dynamic-media-tile:focus-visible,
html[data-theme="dark"] .footer-collab-logo-tile:hover,
html[data-theme="dark"] .footer-collab-logo-tile:focus-visible,
html[data-theme="dark"] .footer-collab-upload:hover,
html[data-theme="dark"] .footer-collab-upload:focus-visible {
  border-color: var(--form-focus-border);
  box-shadow: none;
}

html[data-theme="dark"] .dynamic-media-tile.is-placeholder img:not([data-layer-media-preview]):not([data-layer-bg-preview]),
html[data-theme="dark"] .form-media-tile.is-placeholder img:not([data-layer-media-preview]):not([data-layer-bg-preview]) {
  filter: brightness(0) invert(0.6);
  transition: filter 0.2s ease;
}

html[data-theme="dark"] .dynamic-media-tile.is-placeholder:hover img:not([data-layer-media-preview]):not([data-layer-bg-preview]),
html[data-theme="dark"] .dynamic-media-tile.is-placeholder:focus-visible img:not([data-layer-media-preview]):not([data-layer-bg-preview]),
html[data-theme="dark"] .form-media-tile.is-placeholder:hover img:not([data-layer-media-preview]):not([data-layer-bg-preview]),
html[data-theme="dark"] .form-media-tile.is-placeholder:focus-visible img:not([data-layer-media-preview]):not([data-layer-bg-preview]) {
  filter: brightness(0) invert(1);
}

html[data-theme="dark"] .footer-collab-upload img {
  filter: brightness(0) invert(0.6);
  transition: filter 0.2s ease;
}

html[data-theme="dark"] .footer-collab-upload:hover img,
html[data-theme="dark"] .footer-collab-upload:focus-visible img {
  filter: brightness(0) invert(1);
}

html[data-theme="dark"] .footer-collab-upload.is-disabled,
html[data-theme="dark"] .footer-collab-upload:disabled {
  cursor: not-allowed;
  opacity: 0.55;
  border-color: var(--card-border);
  box-shadow: none;
}

html[data-theme="dark"] .footer-collab-upload.is-disabled:hover,
html[data-theme="dark"] .footer-collab-upload.is-disabled:focus-visible,
html[data-theme="dark"] .footer-collab-upload:disabled:hover,
html[data-theme="dark"] .footer-collab-upload:disabled:focus-visible {
  border-color: var(--card-border);
  box-shadow: none;
}

html[data-theme="dark"] .footer-collab-upload.is-disabled img,
html[data-theme="dark"] .footer-collab-upload:disabled img,
html[data-theme="dark"] .footer-collab-upload.is-disabled:hover img,
html[data-theme="dark"] .footer-collab-upload.is-disabled:focus-visible img,
html[data-theme="dark"] .footer-collab-upload:disabled:hover img,
html[data-theme="dark"] .footer-collab-upload:disabled:focus-visible img {
  filter: brightness(0) invert(0.45);
}

html[data-theme="dark"] .dynamic-media-tile img[data-layer-media-preview],
html[data-theme="dark"] .dynamic-media-tile img[data-layer-bg-preview],
html[data-theme="dark"] .form-media-tile img[data-layer-media-preview],
html[data-theme="dark"] .form-media-tile img[data-layer-bg-preview],
html[data-theme="dark"] .footer-collab-logo-tile:not(.is-placeholder) img {
  filter: none;
  opacity: 1;
}

/* ─── Text field add/delete buttons ─── */
html[data-theme="dark"] .text-add-btn {
  color: #888888;
}

html[data-theme="dark"] .text-add-btn:hover,
html[data-theme="dark"] .text-add-btn:focus-visible {
  color: #E5E5E5;
}

html[data-theme="dark"] .text-add-btn .text-add-btn-icon {
  filter: brightness(0) invert(0.6);
  transition: filter 0.2s ease;
}

html[data-theme="dark"] .text-add-btn:hover .text-add-btn-icon,
html[data-theme="dark"] .text-add-btn:focus-visible .text-add-btn-icon {
  filter: brightness(0) invert(1);
}

html[data-theme="dark"] .text-clone-btn img,
html[data-theme="dark"] .text-delete-btn img {
  filter: brightness(0) invert(0.6);
  opacity: 1;
  transition: filter 0.2s ease, opacity 0.2s ease;
}

html[data-theme="dark"] .text-clone-btn:hover img,
html[data-theme="dark"] .text-clone-btn:focus-visible img,
html[data-theme="dark"] .text-delete-btn:hover img,
html[data-theme="dark"] .text-delete-btn:focus-visible img {
  filter: brightness(0) invert(1);
  opacity: 1;
}

/* ─── Export size (split input) ─── */
html[data-theme="dark"] .form-split-input {
  background: var(--form-field-bg);
  border-color: var(--card-border);
}

html[data-theme="dark"] .form-split-input:hover {
  border-color: var(--form-focus-border);
}

html[data-theme="dark"] .form-split-input:focus-within {
  border-color: var(--form-focus-border);
  box-shadow: var(--form-focus-glow);
}

html[data-theme="dark"] .form-size-chip-list[data-empty="true"]::before {
  color: #555555;
}

html[data-theme="dark"] .form-size-chip {
  background: #383838;
  color: #E5E5E5;
}

html[data-theme="dark"] .form-size-chip-remove img {
  filter: brightness(0) invert(0.6);
  transition: filter 0.2s ease;
}

html[data-theme="dark"] .form-size-chip-remove:hover img,
html[data-theme="dark"] .form-size-chip-remove:focus-visible img {
  filter: brightness(0) invert(1);
}

html[data-theme="dark"] .form-split-action {
  background: #242424;
  border-left-color: var(--card-border);
  color: #888888;
}

html[data-theme="dark"] .form-split-action:hover {
  background: #2e2e2e;
  color: #E5E5E5;
}

html[data-theme="dark"] .form-split-action:focus-visible {
  background: #2e2e2e;
  color: #E5E5E5;
}

/* ─── Export size custom row (长/宽 mm) ─── */
html[data-theme="dark"] .export-size-custom-row {
  background: var(--form-field-bg);
  border-color: var(--card-border);
}

html[data-theme="dark"] .export-size-custom-row:hover {
  border-color: var(--form-focus-border);
  box-shadow: none;
}

html[data-theme="dark"] .export-size-custom-row:focus-within,
html[data-theme="dark"] .export-size-custom-row.is-editing,
html[data-theme="dark"] .export-size-custom-row.is-editing:not(.is-hidden) {
  border-color: var(--form-focus-border);
  box-shadow: var(--form-focus-glow);
}

html[data-theme="dark"] .export-size-custom-radio {
  background: transparent;
  border-right-color: var(--card-border);
}

html[data-theme="dark"] .export-size-input-label,
html[data-theme="dark"] .export-size-input-unit {
  color: #888888;
}

html[data-theme="dark"] .export-size-input {
  color: #E5E5E5;
}

html[data-theme="dark"] .export-size-input::placeholder {
  color: #555555;
}

html[data-theme="dark"] .export-size-link-btn {
  background: transparent;
  border-left-color: var(--card-border);
  border-right-color: var(--card-border);
  color: #888888;
}

html[data-theme="dark"] .export-size-link-btn:hover,
html[data-theme="dark"] .export-size-link-btn.is-locked {
  color: #CCCCCC;
}

html[data-theme="dark"] .export-size-link-btn img {
  filter: brightness(0) invert(0.6);
  transition: filter 0.2s ease;
}

html[data-theme="dark"] .export-size-link-btn:hover img,
html[data-theme="dark"] .export-size-link-btn:focus-visible img,
html[data-theme="dark"] .export-size-link-btn.is-locked img {
  filter: brightness(0) invert(1);
}

html[data-theme="dark"] [data-badge-export-size-section] .export-size-custom-row:hover,
html[data-theme="dark"] .editor-form-sidebar.is-image-mode [data-export-size-section] .export-size-custom-row:hover {
  border-color: var(--form-focus-border);
  box-shadow: none;
}

html[data-theme="dark"] [data-badge-export-size-section] .export-size-link-btn {
  color: #CCCCCC;
}

/* ─── Bottom action buttons ─── */
html[data-theme="dark"] .form-submit-btn {
  background: #07C160;
  color: #FFFFFF;
}

html[data-theme="dark"] .form-submit-btn:hover {
  background: #06AE56;
}

/* 与顶部「返回」按钮一致 */
html[data-theme="dark"] .form-reset-btn {
  background: rgba(255, 255, 255, 0.1);
  color: #999999;
}

html[data-theme="dark"] .form-reset-btn:hover {
  background: rgba(255, 255, 255, 0.14);
  color: #FFFFFF;
}

html[data-theme="dark"] .form-reset-btn .form-btn-icon svg path {
  fill: currentColor;
}

/* ═══════════════════════════════════════════
   Edit-template page — Right sidebar (AI chat panel)
   ═══════════════════════════════════════════ */

html[data-theme="dark"] .editor-panel {
  background: rgba(255, 255, 255, 0.06);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.10), 0px 8px 16px -2px rgba(0, 0, 0, 0.20);
}

html[data-theme="dark"] .chat-title {
  color: #E5E5E5;
}

html[data-theme="dark"] .chat-close img {
  filter: grayscale(1) brightness(1) opacity(0.5);
}

html[data-theme="dark"] .chat-close:hover img,
html[data-theme="dark"] .chat-close:focus-visible img {
  filter: grayscale(1) brightness(1) opacity(0.85);
}

/* Chat messages */
html[data-theme="dark"] .chat-message.is-user {
  background: rgba(7, 193, 96, 0.12);
  color: #E5E5E5;
}

html[data-theme="dark"] .chat-content .chat-message.is-user .chat-message-text {
  color: #E5E5E5;
}

html[data-theme="dark"] .chat-message.is-agent,
html[data-theme="dark"] .chat-message.is-system {
  background: rgba(255, 255, 255, 0.06);
  color: #E5E5E5;
}

html[data-theme="dark"] .chat-message-text {
  color: #E5E5E5;
}

html[data-theme="dark"] .chat-message-meta {
  color: #555555;
}

/* Composer */
html[data-theme="dark"] .chat-composer {
  background: var(--form-field-bg, rgba(255, 255, 255, 0.03));
  border-color: var(--card-border);
}

html[data-theme="dark"] .chat-composer.is-filled,
html[data-theme="dark"] .chat-composer[data-compose-mode="filled"] {
  background: rgba(255, 255, 255, 0.08);
}

html[data-theme="dark"] .composer-mode-tip-muted {
  color: #666666;
}

html[data-theme="dark"] .composer-mode-tip-highlight {
  color: #E5E5E5;
}

html[data-theme="dark"] .composer-mode-switch {
  color: #6B8FE8;
}

html[data-theme="dark"] .composer-mode-switch:hover,
html[data-theme="dark"] .composer-mode-switch:focus-visible {
  color: #8AA8F0;
}

html[data-theme="dark"] .ai-preview-card-ref {
  color: #6B8FE8;
}

html[data-theme="dark"] .ai-preview-card-ref:hover,
html[data-theme="dark"] .ai-preview-card-ref:focus-visible {
  color: #8AA8F0;
}

html[data-theme="dark"] .ai-preview-card-ref.is-referenced {
  color: #E5E5E5;
}

html[data-theme="dark"] .chat-composer .composer-prompt {
  color: #FFFFFF;
}

html[data-theme="dark"] .chat-composer .composer-textarea {
  color: #FFFFFF;
  caret-color: #FFFFFF;
}

html[data-theme="dark"] .chat-composer .composer-textarea[data-empty="true"]::before {
  color: #555555;
}

html[data-theme="dark"] .chat-composer .composer-image-tag {
  background: #383838;
}

html[data-theme="dark"] .chat-composer .composer-image-name {
  color: #E5E5E5;
}

html[data-theme="dark"] .chat-composer .composer-image-remove img {
  filter: brightness(0) invert(0.7);
}

html[data-theme="dark"] .chat-composer .composer-tool-btn {
  background: #242424;
  border-color: var(--card-border);
  outline: none;
  box-shadow: none;
}

html[data-theme="dark"] .chat-composer .send-btn:not(.is-active) {
  background: #242424;
  outline-color: var(--card-border);
}

html[data-theme="dark"] .chat-composer .composer-tool-btn:hover,
html[data-theme="dark"] .chat-composer .composer-tool-btn:focus-visible {
  border-color: var(--form-focus-border);
  outline: none;
  box-shadow: none;
}

html[data-theme="dark"] .chat-composer .composer-tool-btn img {
  filter: brightness(0) invert(0.6);
}

html[data-theme="dark"] .chat-composer .composer-tool-btn:hover img,
html[data-theme="dark"] .chat-composer .composer-tool-btn:focus-visible img {
  filter: brightness(0) invert(1);
}

html[data-theme="dark"] .chat-composer .send-btn:not(.is-active) .send-text {
  color: #666666;
}

html[data-theme="dark"] .chat-composer .send-btn:not(.is-active) .send-icon {
  filter: brightness(0) invert(0.4);
  opacity: 1;
}

/* 可生成：实心绿色，避免被 .tool-btn.is-active 半透明样式覆盖 */
html[data-theme="dark"] .chat-composer .send-btn.is-active {
  background: var(--green);
  border-color: transparent;
  color: #FFFFFF;
  cursor: pointer;
}

html[data-theme="dark"] .chat-composer .send-btn.is-active:hover,
html[data-theme="dark"] .chat-composer .send-btn.is-active:focus-visible {
  background: var(--green-dark);
  color: #FFFFFF;
}

html[data-theme="dark"] .chat-composer .send-btn.is-active .send-text {
  color: #FFFFFF;
}

html[data-theme="dark"] .chat-composer .send-btn.is-active .send-icon {
  filter: brightness(0) invert(1);
  opacity: 1;
}

/* Scrollbar in chat */
html[data-theme="dark"] .chat-content::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.12);
}

html[data-theme="dark"] .form-sidebar-body::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.12);
}

/* ═══════════════════════════════════════════
   Modals — 深色模式下弹窗保持浅色外观
   （面板背景见 design-tokens.css --modal-bg；内容 token 见弹窗浅色作用域）
   ═══════════════════════════════════════════ */

html[data-theme="dark"] :is(
  .size-modal,
  .download-preview-modal,
  .logo-upload-modal,
  .reset-confirm-modal,
  .reset-confirm-modal-actions,
  .edit-exit-save-modal,
  .edit-exit-save-modal-actions,
  .ai-entry-save-modal,
  .ai-entry-save-modal-actions,
  .qr-upload-hint-modal,
  .qr-upload-hint-modal-footer,
  .login-modal-dialog,
  .upload-template-dialog,
  .manage-tags-dialog,
  .edit-details-dialog,
  .edit-details-footer,
  .edit-ads-dialog,
  .admin-delete-dialog,
  .admin-delete-footer,
  .template-delete-dialog,
  .template-delete-footer,
  .auth-required-dialog,
  .auth-required-footer
) {
  background: var(--modal-bg, #F7F7F7);
}

html[data-theme="dark"] :is(.size-modal, .logo-upload-modal) {
  box-shadow: 0px 8px 32px rgba(0, 0, 0, 0.40);
}

html[data-theme="dark"] .download-preview-viewport {
  background: #FFFFFF;
}

/* 撤销泄漏进弹窗的全局深色规则（显式色值优先级高于 token） */
html[data-theme="dark"] :is(
  .auth-required-modal,
  .admin-upload-modal,
  .admin-delete-modal,
  .admin-delete-confirm-modal,
  .edit-details-modal,
  .edit-ads-modal,
  .manage-tags-modal,
  .template-delete-modal,
  .login-modal-overlay,
  .size-modal-overlay,
  .download-preview-modal-overlay,
  .logo-upload-modal-overlay,
  .reset-confirm-modal-overlay,
  .edit-exit-save-modal-overlay,
  .ai-entry-save-modal-overlay,
  .qr-upload-hint-modal-overlay,
  .tile-popup-menu
) :is(
  .text-input,
  .edit-details-input,
  .edit-details-textarea
) {
  background: var(--white);
  border-color: var(--line);
  color: var(--text-primary);
}

html[data-theme="dark"] :is(
  .auth-required-modal,
  .admin-upload-modal,
  .admin-delete-modal,
  .admin-delete-confirm-modal,
  .edit-details-modal,
  .edit-ads-modal,
  .manage-tags-modal,
  .template-delete-modal,
  .login-modal-overlay,
  .size-modal-overlay,
  .download-preview-modal-overlay,
  .logo-upload-modal-overlay,
  .reset-confirm-modal-overlay,
  .edit-exit-save-modal-overlay,
  .ai-entry-save-modal-overlay,
  .qr-upload-hint-modal-overlay,
  .tile-popup-menu
) :is(
  .text-input::placeholder,
  .edit-details-input::placeholder,
  .edit-details-textarea::placeholder
) {
  color: var(--text-placeholder);
}

html[data-theme="dark"] :is(
  .auth-required-modal,
  .admin-upload-modal,
  .admin-delete-modal,
  .admin-delete-confirm-modal,
  .edit-details-modal,
  .edit-ads-modal,
  .manage-tags-modal,
  .template-delete-modal,
  .login-modal-overlay,
  .size-modal-overlay,
  .download-preview-modal-overlay,
  .logo-upload-modal-overlay,
  .reset-confirm-modal-overlay,
  .edit-exit-save-modal-overlay,
  .ai-entry-save-modal-overlay,
  .qr-upload-hint-modal-overlay,
  .tile-popup-menu
) .text-input:focus {
  border-color: var(--focus-ring);
  box-shadow: -2px 0px 1px var(--focus-shadow-color),
              2px 0px 1px var(--focus-shadow-color),
              0px -2px 1px var(--focus-shadow-color),
              0px 2px 1px var(--focus-shadow-color);
}

html[data-theme="dark"] :is(
  .auth-required-modal,
  .admin-upload-modal,
  .admin-delete-modal,
  .admin-delete-confirm-modal,
  .edit-details-modal,
  .edit-ads-modal,
  .manage-tags-modal,
  .template-delete-modal,
  .login-modal-overlay,
  .size-modal-overlay,
  .download-preview-modal-overlay,
  .logo-upload-modal-overlay,
  .reset-confirm-modal-overlay,
  .edit-exit-save-modal-overlay,
  .ai-entry-save-modal-overlay,
  .qr-upload-hint-modal-overlay,
  .tile-popup-menu
) .admin-btn--secondary {
  background: var(--line);
  color: var(--text-primary);
}

html[data-theme="dark"] :is(
  .auth-required-modal,
  .admin-upload-modal,
  .admin-delete-modal,
  .admin-delete-confirm-modal,
  .edit-details-modal,
  .edit-ads-modal,
  .manage-tags-modal,
  .template-delete-modal,
  .login-modal-overlay,
  .size-modal-overlay,
  .download-preview-modal-overlay,
  .logo-upload-modal-overlay,
  .reset-confirm-modal-overlay,
  .edit-exit-save-modal-overlay,
  .ai-entry-save-modal-overlay,
  .qr-upload-hint-modal-overlay,
  .tile-popup-menu
) .admin-btn--secondary:hover {
  background: var(--line);
  filter: brightness(0.97);
}

html[data-theme="dark"] .manage-tags-modal .manage-tags-footer {
  background: #FFFFFF;
}

html[data-theme="dark"] .admin-upload-modal :is(
  .admin-delete-title,
  .admin-upload-field-label,
  .admin-upload-radio-label,
  .admin-upload-hint,
  .admin-upload-hint-small
) {
  color: var(--text-secondary);
}

html[data-theme="dark"] .admin-upload-modal .admin-upload-header {
  color: var(--text-primary);
}

html[data-theme="dark"] .admin-upload-modal .admin-upload-field-group .text-input {
  background: var(--form-field-bg);
  border: none;
  box-shadow: inset 0 0 0 1px transparent;
  color: var(--text-primary);
}

html[data-theme="dark"] .admin-upload-modal .admin-upload-field-group .text-input::placeholder {
  color: var(--text-placeholder);
}

html[data-theme="dark"] .admin-upload-modal .admin-upload-field-group .text-input:hover {
  box-shadow: inset 0 0 0 1px var(--form-focus-border);
}

html[data-theme="dark"] .admin-upload-modal .admin-upload-field-group .text-input:focus,
html[data-theme="dark"] .admin-upload-modal .admin-upload-field-group .text-input:focus-visible {
  box-shadow: var(--form-focus-glow), inset 0 0 0 1px var(--form-focus-border);
  outline: none;
}

html[data-theme="dark"] .admin-upload-modal .admin-upload-radio-item:hover,
html[data-theme="dark"] .admin-upload-modal .admin-upload-radio-item.is-selected:hover {
  outline-color: var(--form-focus-border);
  box-shadow: none;
}

html[data-theme="dark"] .admin-upload-modal .admin-upload-radio-item:focus-visible {
  outline-color: var(--form-focus-border);
  box-shadow: var(--form-focus-glow);
}

html[data-theme="dark"] .admin-upload-modal .admin-upload-drop-icon {
  filter: brightness(0) invert(0.6);
  transition: filter 0.2s ease;
}

html[data-theme="dark"] .admin-upload-modal .admin-upload-drop:hover .admin-upload-drop-icon,
html[data-theme="dark"] .admin-upload-modal .admin-upload-drop.is-dragover .admin-upload-drop-icon,
html[data-theme="dark"] .admin-upload-modal .admin-upload-drop:focus-visible .admin-upload-drop-icon,
html[data-theme="dark"] .admin-upload-modal .admin-upload-drop:active .admin-upload-drop-icon {
  filter: brightness(0) invert(1);
}

html[data-theme="dark"] .admin-upload-modal .admin-upload-radio-item.is-selected .admin-upload-radio-label {
  color: var(--text-primary);
}

html[data-theme="dark"] .admin-upload-modal :is(
  .admin-upload-drop,
  .admin-upload-radio-item,
  .admin-upload-preview-area,
  .admin-upload-preview-rebtn,
  .admin-upload-file-preview
) {
  border-color: var(--line);
  background: var(--form-field-bg, rgba(255, 255, 255, 0.03));
}

html[data-theme="dark"] .admin-upload-modal .admin-upload-drop:hover,
html[data-theme="dark"] .admin-upload-modal .admin-upload-drop.is-dragover,
html[data-theme="dark"] .admin-upload-modal .admin-upload-drop:active,
html[data-theme="dark"] .admin-upload-modal .admin-upload-drop:focus-visible {
  border-color: var(--form-focus-border);
  outline: none;
  box-shadow: none;
}

html[data-theme="dark"] .admin-upload-modal .admin-upload-preview-area:hover,
html[data-theme="dark"] .admin-upload-modal .admin-upload-preview-area:focus-visible,
html[data-theme="dark"] .admin-upload-modal .admin-upload-preview-area:active {
  border-color: var(--form-focus-border);
}

html[data-theme="dark"] .admin-upload-modal .admin-upload-footer .admin-btn--primary:hover {
  background: #06AE56;
  filter: none;
}

html[data-theme="dark"] .admin-upload-modal .admin-upload-footer .admin-btn--primary:active {
  background: #059A4C;
  filter: none;
}

html[data-theme="dark"] .admin-upload-modal .admin-upload-footer .admin-btn--secondary:hover {
  background: rgba(255, 255, 255, 0.10);
  filter: none;
}

html[data-theme="dark"] .admin-upload-modal .admin-upload-footer .admin-btn--secondary:active {
  background: rgba(255, 255, 255, 0.14);
  filter: none;
}

html[data-theme="dark"] .admin-upload-modal .admin-upload-preview-rebtn {
  border-color: var(--green);
  color: var(--green);
}

html[data-theme="dark"] .admin-upload-modal .admin-upload-footer {
  border-top-color: var(--line);
}

html[data-theme="dark"] .login-modal-overlay .form-label {
  color: var(--text-primary);
}

html[data-theme="dark"] .size-modal-overlay :is(
  .size-modal-title,
  .size-modal-section-title,
  .size-custom-label,
  .size-standard-option .size-name
) {
  color: #333333;
}

html[data-theme="dark"] .size-modal-overlay .size-standard-option .size-value {
  color: #808080;
}

html[data-theme="dark"] .download-preview-modal-overlay .download-preview-size-label {
  color: var(--text-secondary);
}

html[data-theme="dark"] .download-preview-modal-overlay .download-preview-empty {
  color: var(--empty-state-text, #666666);
}

/* ─── Toolbar panels (text style, copy) ─── */
html[data-theme="dark"] .toolbar-panel-copy .toolbar-copy-input,
html[data-theme="dark"] .toolbar-panel-copy .toolbar-copy-textarea {
  background: #242424;
  border-color: var(--card-border);
  color: #E5E5E5;
}

html[data-theme="dark"] .toolbar-panel-copy .toolbar-copy-input::placeholder,
html[data-theme="dark"] .toolbar-panel-copy .toolbar-copy-textarea::placeholder {
  color: #555555;
}

html[data-theme="dark"] .toolbar-panel-copy .toolbar-copy-input:hover,
html[data-theme="dark"] .toolbar-panel-copy .toolbar-copy-textarea:hover {
  border-color: var(--form-focus-border);
}

html[data-theme="dark"] .toolbar-panel-copy .toolbar-copy-input:focus,
html[data-theme="dark"] .toolbar-panel-copy .toolbar-copy-textarea:focus {
  border-color: var(--form-focus-border);
  box-shadow: var(--form-focus-glow);
}

html[data-theme="dark"] .toolbar-copy-label {
  color: #888888;
}

html[data-theme="dark"] .toolbar-copy-submit {
  background: #07C160;
  color: #FFFFFF;
}

/* ─── Form radio/size standard copy text ─── */
html[data-theme="dark"] .form-radio-copy .radio-main {
  color: #E5E5E5;
}

html[data-theme="dark"] .form-radio-copy .radio-extra {
  color: #888888;
}

html[data-theme="dark"] .size-standard-name {
  color: #E5E5E5;
}

html[data-theme="dark"] .size-standard-desc {
  color: #888888;
}

/* ─── Transition for smooth theme switching（编辑页排除，避免顶部闪白条）─── */
html.theme-switch-instant,
html.theme-switch-instant *,
html.theme-switch-instant *::before,
html.theme-switch-instant *::after {
  transition: none !important;
}

html[data-theme="dark"]:not([data-page="edit-template"]) *,
html[data-theme="dark"]:not([data-page="edit-template"]) *::before,
html[data-theme="dark"]:not([data-page="edit-template"]) *::after {
  transition-property: background-color, border-color, color, box-shadow, outline-color;
  transition-duration: 0.3s;
  transition-timing-function: ease;
}

/* ═══════════════════════════════════════════
   Badge form (edit-template — badge mode)
   ═══════════════════════════════════════════ */

/* Badge type custom dropdown */
html[data-theme="dark"] .badge-type-select-trigger {
  background: var(--form-field-bg);
  border-color: var(--card-border);
  color: #E5E5E5;
}

html[data-theme="dark"] .badge-type-select-trigger:hover {
  border-color: var(--form-focus-border);
  box-shadow: none;
}

html[data-theme="dark"] .badge-type-select-trigger.is-open,
html[data-theme="dark"] .badge-type-select-trigger:focus-visible {
  border-color: var(--form-focus-border);
  box-shadow: var(--form-focus-glow);
}

html[data-theme="dark"] .badge-type-select-dropdown {
  background: #242424;
  border-color: var(--card-border);
  box-shadow: 0px 2px 8px -1px rgba(0, 0, 0, 0.40);
}

html[data-theme="dark"] .badge-type-select-option {
  color: #E5E5E5;
}

html[data-theme="dark"] .badge-type-select-option:hover {
  background: rgba(7, 193, 96, 0.10);
}

html[data-theme="dark"] .badge-type-select-option.is-selected {
  color: #07C160;
}

html[data-theme="dark"] .badge-type-select-arrow {
  color: #888888;
}

/* Badge field labels */
html[data-theme="dark"] .badge-field-label {
  color: #888888;
}

/* Badge design add button */
html[data-theme="dark"] .badge-design-add-btn {
  color: #555555;
}

html[data-theme="dark"] .badge-design-add-btn:hover {
  color: #888888;
}

/* Badge cards */
html[data-theme="dark"] .badge-card {
  background: var(--card-bg, #0C0C0C);
  border-color: var(--card-border);
}

html[data-theme="dark"] .badge-card-label {
  color: #888888;
}

html[data-theme="dark"] .badge-card-delete-btn {
  filter: brightness(0) invert(0.6);
  transition: filter 0.2s ease;
}

html[data-theme="dark"] .badge-card-delete-btn:hover,
html[data-theme="dark"] .badge-card-delete-btn:focus-visible {
  filter: brightness(0) invert(1);
}

html[data-theme="dark"] .badge-card-thumb {
  background: #1a1a1a;
  border-color: var(--card-border);
}

html[data-theme="dark"] .badge-card-upload-btn {
  background: #242424;
  border-color: var(--card-border);
}

html[data-theme="dark"] .badge-card-upload-btn:hover {
  border-color: var(--form-focus-border);
}

html[data-theme="dark"] .badge-card-upload-btn img {
  filter: brightness(0) invert(0.6);
  transition: filter 0.2s ease;
}

html[data-theme="dark"] .badge-card-upload-btn:hover img,
html[data-theme="dark"] .badge-card-upload-btn:focus-visible img {
  filter: brightness(0) invert(1);
}

/* Badge canvas labels */
html[data-theme="dark"] .badge-canvas-label {
  color: #888888;
}

/* Badge layer selected highlight */
html[data-theme="dark"] .badge-layer-selected {
  outline-color: #1890FF !important;
}

/* Badge form scrollbar */
html[data-theme="dark"] .badge-form-sidebar-body::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.12);
}

/* ═══════════════════════════════════════════
   Edit-template — 补充深色样式（工具条 / 单选 / 弹窗）
   ═══════════════════════════════════════════ */

html[data-theme="dark"] .form-radio-option,
html[data-theme="dark"] .form-radio-option.is-active,
html[data-theme="dark"] .form-radio-option:hover,
html[data-theme="dark"] .form-radio-option:focus-visible {
  background-color: rgba(255, 255, 255, 0.03);
  outline-color: var(--card-border);
  color: #888888;
}

html[data-theme="dark"] .form-radio-option.is-active {
  color: #E5E5E5;
}

html[data-theme="dark"] .form-radio-option:hover {
  outline-color: var(--form-focus-border);
  box-shadow: none;
}

html[data-theme="dark"] .form-radio-option:focus-visible {
  outline-color: var(--form-focus-border);
  box-shadow: var(--form-focus-glow);
}

html[data-theme="dark"] .form-radio-option.is-disabled {
  opacity: 0.35;
}

html[data-theme="dark"] .form-radio-indicator .radio-icon-unselected {
  opacity: 0.55;
  filter: brightness(0) invert(0.75);
}

html[data-theme="dark"] .form-radio-option.is-active .form-radio-indicator .radio-icon-selected {
  filter: none;
}

html[data-theme="dark"] [data-radio-group="footer-collab"] .form-radio-option,
html[data-theme="dark"] [data-radio-group="footer-collab"] .form-radio-option.is-active,
html[data-theme="dark"] [data-radio-group="footer-collab"] .form-radio-option:hover,
html[data-theme="dark"] [data-radio-group="footer-collab"] .form-radio-option:focus-visible {
  background-color: rgba(255, 255, 255, 0.03);
  outline-color: var(--card-border);
}

html[data-theme="dark"] [data-radio-group="footer-collab"] .form-radio-option.is-active .radio-main {
  color: #E5E5E5;
}

html[data-theme="dark"] .tool-btn {
  background: #242424;
  border-color: var(--card-border);
  color: #999999;
}

html[data-theme="dark"] .tool-btn:hover {
  background: #2e2e2e;
  border-color: var(--card-border-hover);
  color: #FFFFFF;
}

html[data-theme="dark"] .tool-btn img {
  filter: brightness(0) invert(0.6);
  transition: filter 0.2s ease;
}

html[data-theme="dark"] .tool-btn:hover img,
html[data-theme="dark"] .tool-btn:focus-visible img {
  filter: brightness(0) invert(1);
}

html[data-theme="dark"] .tool-btn.gray:not(.send-btn),
html[data-theme="dark"] .tool-btn.export,
html[data-theme="dark"] .toolbar-primary .tool-btn,
html[data-theme="dark"] .btn-undo,
html[data-theme="dark"] .btn-redo {
  background: rgba(255, 255, 255, 0.08);
  border-color: transparent;
  color: #999999;
}

html[data-theme="dark"] .tool-btn.gray:not(.send-btn):hover,
html[data-theme="dark"] .tool-btn.export:hover,
html[data-theme="dark"] .toolbar-primary .tool-btn:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #FFFFFF;
}

html[data-theme="dark"] .tool-btn.is-active {
  background: rgba(7, 193, 96, 0.18);
  border-color: rgba(7, 193, 96, 0.45);
  color: #E5E5E5;
}

html[data-theme="dark"] .toolbar-panel {
  background: rgba(36, 36, 36, 0.96);
  outline-color: var(--card-border);
  box-shadow: 0px 8px 16px -2px rgba(0, 0, 0, 0.40);
}

html[data-theme="dark"] .toolbar-panel-label {
  color: #E5E5E5;
}

html[data-theme="dark"] .zoom-value {
  color: #999999;
}

html[data-theme="dark"] .toolbar-primary .zoom-btn:hover .zoom-value {
  color: #FFFFFF;
}

html[data-theme="dark"] .toolbar-primary .btn-undo img,
html[data-theme="dark"] .toolbar-primary .btn-redo img,
html[data-theme="dark"] .toolbar-primary .zoom-side img {
  filter: brightness(0) invert(0.6);
  transition: filter 0.2s ease;
}

html[data-theme="dark"] .toolbar-primary .btn-undo:hover img,
html[data-theme="dark"] .toolbar-primary .btn-undo:focus-visible img,
html[data-theme="dark"] .toolbar-primary .btn-redo:hover img,
html[data-theme="dark"] .toolbar-primary .btn-redo:focus-visible img,
html[data-theme="dark"] .toolbar-primary .zoom-side:hover img,
html[data-theme="dark"] .toolbar-primary .zoom-side:focus-visible img {
  filter: brightness(0) invert(1);
}

html[data-theme="dark"] .qr-upload-hint-modal {
  box-shadow: 0px 8px 32px rgba(0, 0, 0, 0.45);
}

html[data-theme="dark"] .form-reset-feedback {
  color: #07C160;
}

html[data-theme="dark"] .download-preview-size-label {
  color: #888888;
}

html[data-theme="dark"] .download-preview-empty {
  color: var(--empty-state-text, #666666);
}

html[data-theme="dark"] .tile-popup-menu {
  border: 1px solid #EEEEEE;
  box-shadow: var(--shadow-dropdown);
}

html[data-theme="dark"] .text-field-actions-menu {
  border: 1px solid #EEEEEE;
  box-shadow: var(--shadow-dropdown);
}

html[data-theme="dark"] .dynamic-media-tile-batch-count {
  background: #07C160;
  color: #FFFFFF;
}