[data-theme="dark"] {

  

  .new-korrektur {
    background: var(--color-bg) !important;
    color: var(--color-text-primary) !important;
  }

  .text-area-container {
    background: var(--color-bg) !important;
  }

  .inner-textarea-bottom {
    background-color: var(--color-card) !important;
    border-color: var(--color-border) !important;
  }

  .main-textarea-section {
    background: var(--color-card) !important;
    color: var(--color-text-primary) !important;
  }

  

  .correction-sidebar {
    background: var(--color-card) !important;
    border-color: var(--color-border) !important;
    color: var(--color-text-primary) !important;
  }

  .correction-content {
    background: var(--color-card) !important;
    color: var(--color-text-primary) !important;
  }

  .improv-inner {
    background: var(--color-card) !important;
  }

  

  .top-controls {
    background: var(--color-card) !important;
    border-color: var(--color-border) !important;
  }

  .top-controls .control-btn {
    color: var(--color-text-secondary) !important;
  }

  .top-controls .control-btn:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.08) !important;
    color: var(--color-text-primary) !important;
  }

  .format-toolbar {
    background: var(--color-card) !important;
    border-color: var(--color-border) !important;
  }

  .format-toolbar .format-btn,
  .format-toolbar button {
    color: var(--color-text-secondary) !important;
  }

  .format-toolbar .format-btn:hover,
  .format-toolbar button:hover {
    background: rgba(255, 255, 255, 0.08) !important;
    color: var(--color-text-primary) !important;
  }

  .format-divider,
  .format-separator {
    background: var(--color-border) !important;
  }

  

  .counter-nav-div {
    background: var(--color-card) !important;
    border-color: var(--color-border) !important;
    color: var(--color-text-secondary) !important;
  }

  

  .ql-container.ql-snow {
    border-color: var(--color-border) !important;
  }

  .ql-editor {
    color: var(--color-text-primary) !important;
  }

  .ql-editor.ql-blank::before {
    color: var(--color-text-secondary) !important;
  }

  .ql-toolbar.ql-snow {
    border-color: var(--color-border) !important;
    background: var(--color-card) !important;
  }

  .ql-snow .ql-stroke {
    stroke: var(--color-text-secondary) !important;
  }

  .ql-snow .ql-fill {
    fill: var(--color-text-secondary) !important;
  }

  .ql-snow .ql-picker {
    color: var(--color-text-secondary) !important;
  }

  

  .option-laes,
  .option-tab,
  .view-option,
  .assistent-tab {
    color: var(--color-text-secondary) !important;
  }

  .option-laes.active,
  .option-tab.active,
  .view-option.active,
  .assistent-tab.active {
    color: var(--color-text-primary) !important;
    background: rgba(var(--color-primary-rgb), 0.15) !important;
  }

  

  .text-area,
  #inputText,
  textarea {
    background: var(--color-card) !important;
    color: var(--color-text-primary) !important;
    border-color: var(--color-border) !important;
  }

  input[type="text"],
  input[type="search"] {
    background: var(--color-bg) !important;
    color: var(--color-text-primary) !important;
    border-color: var(--color-border) !important;
  }

  input.chat-search-input {
    background: transparent !important;
    border: none !important;
  }

  .chat-search-results {
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.08) transparent;
  }
  .chat-search-results::-webkit-scrollbar { width: 4px; }
  .chat-search-results::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.08); border-radius: 4px; }
  .chat-search-results::-webkit-scrollbar-track { background: transparent; }

  .chat-search-row:hover,
  .chat-search-row--active {
    background: rgba(255,255,255,0.04) !important;
  }



  .toast-notification {
    background: var(--color-card) !important;
    color: var(--color-text-primary) !important;
    border-color: var(--color-border) !important;
    box-shadow: var(--shadow-popup) !important;
  }

  

  .modal-overlay,
  .upload-modal-overlay {
    background: rgba(0, 0, 0, 0.6) !important;
  }

  .modal-content,
  .upload-modal {
    background: var(--color-card) !important;
    color: var(--color-text-primary) !important;
    border-color: var(--color-border) !important;
  }

  .dropdown-menu,
  .language-dropdown {
    background: var(--color-card) !important;
    border-color: var(--color-border) !important;
    box-shadow: var(--shadow-popup) !important;
  }

  .dropdown-item:hover {
    background: rgba(255, 255, 255, 0.06) !important;
  }

  

  .chat-messages,
  .assistent-container {
    background: var(--color-bg) !important;
  }

  .chat-welcome-state {
    color: var(--color-text-secondary) !important;
  }

  .assistent-input-wrapper {
    background: var(--color-card) !important;
    border-color: var(--color-border) !important;
  }

  .assistent-input-wrapper input,
  .assistent-input-wrapper textarea {
    background: transparent !important;
    color: var(--color-text-primary) !important;
  }

  

  .gemt-file-card,
  .instruction-card,
  .example-chip {
    background: var(--color-bg) !important;
    border-color: var(--color-border) !important;
    color: var(--color-text-primary) !important;
  }

  .gemt-file-card:hover,
  .instruction-card:hover {
    background: rgba(255, 255, 255, 0.04) !important;
  }

  .gemt-empty-state {
    color: var(--color-text-secondary) !important;
  }

  

  .selection-toolbar {
    background: var(--color-card) !important;
    border-color: var(--color-border) !important;
    box-shadow: var(--shadow-popup) !important;
  }

  .selection-toolbar button {
    color: var(--color-text-secondary) !important;
  }

  .selection-toolbar button:hover {
    background: rgba(255, 255, 255, 0.08) !important;
    color: var(--color-text-primary) !important;
  }

  

  * {
    scrollbar-color: var(--color-border) transparent;
  }

  *::-webkit-scrollbar-thumb {
    background: var(--color-border);
    border-radius: 4px;
  }

  *::-webkit-scrollbar-track {
    background: transparent;
  }

  

  .split-translator {
    background: var(--color-bg) !important;
  }

  .st-language-bar {
    background: var(--color-card) !important;
    border-color: var(--color-border) !important;
  }

  .st-lang-selector {
    color: var(--color-text-primary) !important;
  }

  .st-lang-dropdown {
    background: var(--color-card) !important;
    border-color: var(--color-border) !important;
    box-shadow: var(--shadow-popup) !important;
  }

  .st-lang-option:hover,
  .st-dropdown-item:hover {
    background: rgba(255, 255, 255, 0.06) !important;
  }

  .st-lang-option.selected {
    background: rgba(var(--color-primary-rgb), 0.15) !important;
  }

  .st-lang-search {
    background: var(--color-bg) !important;
    color: var(--color-text-primary) !important;
    border-color: var(--color-border) !important;
  }

  .st-source-panel,
  .st-target-panel {
    background: var(--color-card) !important;
  }

  .st-panel-toolbar {
    background: var(--color-card) !important;
    border-color: var(--color-border) !important;
  }

  .st-toolbar-btn {
    color: var(--color-text-secondary) !important;
  }

  .st-toolbar-btn:hover:not(:disabled) {
    color: var(--color-text-primary) !important;
    background: rgba(255, 255, 255, 0.08) !important;
  }

  .st-toolbar-divider {
    background: var(--color-border) !important;
  }

  .st-panel-divider {
    background: var(--color-border) !important;
  }

  .st-status-bar {
    background: var(--color-card) !important;
    border-color: var(--color-border) !important;
    color: var(--color-text-secondary) !important;
  }

  .st-char-count {
    color: var(--color-text-secondary) !important;
  }

  .st-tone-preset-btn {
    color: var(--color-text-secondary) !important;
    border-color: var(--color-border) !important;
  }

  .st-tone-preset-btn.active {
    background: rgba(var(--color-primary-rgb), 0.15) !important;
    color: var(--color-text-primary) !important;
  }

  .st-overflow-dropdown {
    background: var(--color-card) !important;
    border-color: var(--color-border) !important;
    box-shadow: var(--shadow-popup) !important;
  }

  .st-settings-popover {
    background: var(--color-card) !important;
    border-color: var(--color-border) !important;
    box-shadow: var(--shadow-popup) !important;
    color: var(--color-text-primary) !important;
  }

  .st-settings-label {
    color: var(--color-text-secondary) !important;
  }

  .st-settings-select {
    background: var(--color-bg) !important;
    color: var(--color-text-primary) !important;
    border-color: var(--color-border) !important;
  }

  
  .st-drawer {
    background: var(--color-card) !important;
    border-color: var(--color-border) !important;
  }

  .st-drawer-header {
    border-color: var(--color-border) !important;
    color: var(--color-text-primary) !important;
  }

  .st-chat-bubble.st-chat-assistant {
    background: var(--color-bg) !important;
    color: var(--color-text-primary) !important;
  }

  .st-chat-bubble.st-chat-user {
    background: rgba(var(--color-primary-rgb), 0.15) !important;
    color: var(--color-text-primary) !important;
  }

  .st-chat-input {
    background: transparent !important;
    color: var(--color-text-primary) !important;
    border-color: transparent !important;
  }

  .st-chat-action-btn {
    color: var(--color-text-secondary) !important;
  }

  .st-chat-welcome {
    color: var(--color-text-secondary) !important;
  }

  .st-shortcut-card {
    background: var(--color-bg) !important;
    border-color: var(--color-border) !important;
    color: var(--color-text-primary) !important;
  }

  .st-shortcut-card:hover {
    background: rgba(255, 255, 255, 0.04) !important;
  }

  .st-history-card {
    background: var(--color-bg) !important;
    border-color: var(--color-border) !important;
    color: var(--color-text-primary) !important;
  }

  
  .st-vocab-popover {
    background: var(--color-card) !important;
    border-color: var(--color-border) !important;
    box-shadow: var(--shadow-popup) !important;
  }

  .st-vocab-card {
    border-color: var(--color-border) !important;
    color: var(--color-text-primary) !important;
  }

  .st-toast {
    background: var(--color-card) !important;
    color: var(--color-text-primary) !important;
    box-shadow: var(--shadow-popup) !important;
  }

  

  .grammar-container,
  .grammer-container {
    background: var(--color-bg) !important;
  }

  .explanation-section {
    background: var(--color-card) !important;
    color: var(--color-text-primary) !important;
  }

  .correction-item {
    background: var(--color-bg) !important;
    border-color: var(--color-border) !important;
    color: var(--color-text-primary) !important;
  }

  .correction-item:hover {
    background: rgba(255, 255, 255, 0.04) !important;
  }

  .tab-btn,
  .sidebar-tab {
    color: var(--color-text-secondary) !important;
  }

  .tab-btn.active,
  .sidebar-tab.active {
    color: var(--color-text-primary) !important;
  }

  .history-panel,
  .history-item {
    background: var(--color-card) !important;
    color: var(--color-text-primary) !important;
    border-color: var(--color-border) !important;
  }

  
  .intensity-card,
  .slider-container {
    background: var(--color-bg) !important;
    color: var(--color-text-primary) !important;
  }

  
  .action-button,
  .primary-action-btn {
    
  }

  

  .transcription-option {
    background: var(--color-bg) !important;
    border-color: var(--color-border) !important;
    color: var(--color-text-primary) !important;
  }

  .toggle-track::after {
    background: #fff;
  }
  .transcription-toggle .toggle-track {
    background: var(--color-border) !important;
  }

  .new-note-btn,
  .saved-note-btn {
    background: var(--color-bg) !important;
    border-color: var(--color-border) !important;
    color: var(--color-text-primary) !important;
  }

  .new-note-btn:hover,
  .saved-note-btn:hover {
    background: rgba(255, 255, 255, 0.04) !important;
  }

  
  .mobile-fab {
    background: var(--color-card) !important;
    box-shadow: var(--shadow-popup) !important;
  }

  

  .loader-overlay,
  .nbt-textarea-overlay {
    background: rgba(28, 27, 24, 0.7) !important;
  }

  .loader-text,
  .nbt-loader-text {
    color: var(--color-text-primary) !important;
  }

  .st-skeleton-line {
    background: var(--color-border) !important;
  }

  

  hr,
  .divider,
  .separator {
    border-color: var(--color-border) !important;
  }

}

[data-theme="dark"] {

  
  .view-option,
  .chat-tab,
  .assistent-tab {
    background: transparent !important;
    color: var(--color-text-secondary) !important;
    border-color: var(--color-border) !important;
  }

  .view-option.active,
  .chat-tab.active,
  .assistent-tab.active {
    background: var(--color-card) !important;
    color: var(--color-text-primary) !important;
  }

  
  .language-dropdown,
  .dk-dropdown {
    background: var(--color-card) !important;
    border-color: var(--color-border) !important;
    color: var(--color-text-primary) !important;
    box-shadow: var(--shadow-popup) !important;
  }

  .language-dropdown::after {
    background: var(--color-card) !important;
  }

  
  .instruction-modal-content {
    background: var(--color-card) !important;
    color: var(--color-text-primary) !important;
    border-color: var(--color-border) !important;
  }

  
  .premium-plus-btn,
  .premium-plus-btn.selected {
    background: var(--color-bg) !important;
    border-color: var(--color-border) !important;
    color: var(--color-text-primary) !important;
  }

  
  .tone-card,
  .voice-card,
  .audio-control-card {
    background: var(--color-bg) !important;
    border-color: var(--color-border) !important;
    color: var(--color-text-primary) !important;
  }

  .voice-toggle-btn {
    color: var(--color-text-secondary) !important;
    border-color: var(--color-border) !important;
  }

  .voice-toggle-btn.selected {
    background: var(--color-card) !important;
    color: var(--color-text-primary) !important;
  }

  
  .link-input-wrapper {
    background: var(--color-bg) !important;
    border-color: var(--color-border) !important;
    color: var(--color-text-primary) !important;
  }

  .link-input-wrapper input {
    color: var(--color-text-primary) !important;
  }

  
  .source-option,
  .input-card,
  .upload-card {
    background: var(--color-card) !important;
    border-color: var(--color-border) !important;
    color: var(--color-text-primary) !important;
  }

  .source-option:hover,
  .input-card:hover {
    background: rgba(255, 255, 255, 0.04) !important;
  }

  .source-option p,
  .input-card p {
    color: var(--color-text-secondary) !important;
  }

  
  .hamdan-header,
  .hClose {
    background: var(--color-card) !important;
    border-color: var(--color-border) !important;
    color: var(--color-text-primary) !important;
  }

  .hamdan-header-btn {
    color: var(--color-text-secondary) !important;
  }

  .hamdan-header-btn:hover {
    background: rgba(255, 255, 255, 0.08) !important;
  }

  .dk-hamdan-custom-input-label {
    background: var(--color-card) !important;
    color: var(--color-text-primary) !important;
  }

  
  #inputText {
    background: var(--color-card) !important;
    color: var(--color-text-primary) !important;
  }

  #inputText *:not(.word-highlight) {
    color: inherit !important;
  }

  
  #inputText mark.word-highlight {
    color: var(--color-text-primary) !important;
  }

  
  .size-btn {
    background: var(--color-bg) !important;
    color: var(--color-text-secondary) !important;
    border-color: var(--color-border) !important;
  }

  .size-btn:hover {
    background: rgba(255, 255, 255, 0.06) !important;
  }

  
  .new-note-btn {
    background: var(--color-bg) !important;
    border-color: var(--color-border) !important;
    color: var(--color-text-primary) !important;
  }

  
  .robot-container [style*="background: #fff"],
  .robot-container [style*="background-color: #fff"],
  .robot-container [style*="background: white"],
  .robot-container [style*="background-color: white"] {
    background: var(--color-card) !important;
    background-color: var(--color-card) !important;
  }

  
  [style*="linear-gradient"][style*="#fff"] {
    background: var(--color-card) !important;
  }

  
  .robot-container svg {
    color: inherit;
  }

  
  .counter-text,
  .char-count,
  .char-limit-text {
    color: var(--color-text-secondary) !important;
  }

  
  .robot-container [style*="border-color: #e5e7eb"],
  .robot-container [style*="border: 1px solid #e"] {
    border-color: var(--color-border) !important;
  }
}

[data-theme="dark"] body .robot-container .inner-textarea-bottom {
  background: var(--color-card) !important;
  background-color: var(--color-card) !important;
  border-color: var(--color-border) !important;
}

[data-theme="dark"] body .robot-container .correction-sidebar {
  background: var(--color-card) !important;
  background-color: var(--color-card) !important;
  border-color: var(--color-border) !important;
}

[data-theme="dark"] body .robot-container .main-textarea-section {
  background: var(--color-card) !important;
  background-color: var(--color-card) !important;
}

[data-theme="dark"] body .robot-container #inputText {
  background: var(--color-card) !important;
  background-color: var(--color-card) !important;
  color: var(--color-text-primary) !important;
}

[data-theme="dark"] body .robot-container #inputText .markdown-body table tr {
  background-color: var(--color-bg) !important;
}

[data-theme="dark"] body .robot-container .format-toolbar {
  background: var(--color-card) !important;
  background-color: var(--color-card) !important;
  border-color: var(--color-border) !important;
}

[data-theme="dark"] body .robot-container .counter-nav-div {
  background: var(--color-card) !important;
  background-color: var(--color-card) !important;
}

[data-theme="dark"] body .robot-container .top-controls {
  background: var(--color-card) !important;
  background-color: var(--color-card) !important;
}

[data-theme="dark"] body .robot-container .robot-view,
[data-theme="dark"] body .robot-container .noter-view,
[data-theme="dark"] body .robot-container .assistent-view,
[data-theme="dark"] body .robot-container .gemt-view {
  background: var(--color-card) !important;
  color: var(--color-text-primary) !important;
}

[data-theme="dark"] body .robot-container .transcription-options {
  background: var(--color-card) !important;
  border-color: var(--color-border) !important;
}

[data-theme="dark"] body .robot-container .option-toggle {
  border-color: var(--color-border) !important;
}

[data-theme="dark"] body .robot-container .toggle-label,
[data-theme="dark"] body .robot-container .state-title,
[data-theme="dark"] body .robot-container .state-desc {
  color: var(--color-text-primary) !important;
}

[data-theme="dark"] body .robot-container .sidebar-tab-btn,
[data-theme="dark"] body .robot-container .tab-button,
[data-theme="dark"] body .robot-container [class*="tab-btn"],
[data-theme="dark"] body .robot-container [class*="view-btn"] {
  background: transparent !important;
  color: var(--color-text-secondary) !important;
  border-color: var(--color-border) !important;
}

[data-theme="dark"] body .robot-container .sidebar-tab-btn.active,
[data-theme="dark"] body .robot-container .tab-button.active,
[data-theme="dark"] body .robot-container [class*="tab-btn"].active,
[data-theme="dark"] body .robot-container [class*="view-btn"].active {
  background: var(--color-bg) !important;
  color: var(--color-text-primary) !important;
}

[data-theme="dark"] body .robot-container .mobile-bottom-sheet .audio-control-card {
  background: var(--color-bg) !important;
}

[data-theme="dark"] body .robot-container .new-note-btn,
[data-theme="dark"] body .robot-container [class*="new-note"],
[data-theme="dark"] body .robot-container [class*="create-btn"] {
  background: var(--color-bg) !important;
  border-color: var(--color-border) !important;
  color: var(--color-text-primary) !important;
}

[data-theme="dark"] body .robot-container .welcome-state,
[data-theme="dark"] body .robot-container .source-card,
[data-theme="dark"] body .robot-container [class*="source-option"] {
  background: var(--color-card) !important;
  border-color: var(--color-border) !important;
  color: var(--color-text-primary) !important;
}

[data-theme="dark"] {

  
  .ql-editor,
  .ql-container.ql-snow,
  .ql-container {
    background: var(--color-card) !important;
    background-color: var(--color-card) !important;
    color: var(--color-text-primary) !important;
    border-color: var(--color-border) !important;
  }

  .ql-editor.ql-blank::before {
    color: var(--color-text-secondary) !important;
  }

  
  .correction-level-container {
    background: var(--color-bg) !important;
    border-color: var(--color-border) !important;
    color: var(--color-text-primary) !important;
  }

  .level-help-tooltip {
    background: var(--color-bg) !important;
    color: var(--color-text-secondary) !important;
    border-color: var(--color-border) !important;
  }

  
  .grammar-mode-buttons {
    background: var(--color-card) !important;
  }

  
  .tooltip {
    background: var(--color-card) !important;
    color: var(--color-text-primary) !important;
    border-color: var(--color-border) !important;
    box-shadow: var(--shadow-popup) !important;
  }

  
  .sidebar-dropdown-items {
    background: var(--color-card) !important;
    border-color: var(--color-border) !important;
  }

  .sidebar-dropdown-items button,
  .sidebar-dropdown-items a {
    color: var(--color-text-secondary) !important;
  }

  .sidebar-dropdown-items button:hover,
  .sidebar-dropdown-items a:hover,
  .sidebar-dropdown-items button.active,
  .sidebar-dropdown-items a.active {
    background: rgba(255, 255, 255, 0.06) !important;
    color: var(--color-text-primary) !important;
  }

  
  .upload-modal-btn {
    background: var(--color-card) !important;
    border-color: var(--color-border) !important;
    color: var(--color-text-primary) !important;
  }

  .upload-modal-btn:hover {
    background: rgba(255, 255, 255, 0.04) !important;
  }

  .upload-modal-btn p,
  .upload-modal-btn span {
    color: var(--color-text-secondary) !important;
  }

  
  .sidebar-tab-itmes {
    background: var(--color-card) !important;
    border-color: var(--color-border) !important;
  }

  .sidebar-tab-itmes button,
  .sidebar-tab-itmes a {
    color: var(--color-text-secondary) !important;
  }

  .sidebar-tab-itmes button:hover,
  .sidebar-tab-itmes a:hover,
  .sidebar-tab-itmes button.active,
  .sidebar-tab-itmes a.active {
    color: var(--color-text-primary) !important;
    background: rgba(255, 255, 255, 0.06) !important;
  }

  
  .ql-snow .ql-tooltip {
    background-color: var(--color-card) !important;
    border-color: var(--color-border) !important;
    color: var(--color-text-primary) !important;
    box-shadow: var(--shadow-popup) !important;
  }

  .ql-snow .ql-tooltip input[type=text] {
    background: var(--color-bg) !important;
    color: var(--color-text-primary) !important;
    border-color: var(--color-border) !important;
  }

  
  .ql-snow .ql-picker-options {
    background-color: var(--color-card) !important;
    border-color: var(--color-border) !important;
  }

  
  .ql-snow .ql-stroke {
    stroke: var(--color-text-secondary) !important;
  }

  .ql-snow .ql-fill,
  .ql-snow .ql-stroke.ql-fill {
    fill: var(--color-text-secondary) !important;
  }

  .ql-snow .ql-picker {
    color: var(--color-text-secondary) !important;
  }

  .ql-toolbar.ql-snow {
    border-color: var(--color-border) !important;
  }

  .ql-container.ql-snow {
    border-color: var(--color-border) !important;
  }
}

[data-theme="dark"] body .robot-container .text-area.ql-container .ql-editor,
[data-theme="dark"] body .robot-container .text-area.ql-container.ql-snow .ql-editor,
[data-theme="dark"] body .text-area .ql-editor {
  background: var(--color-card) !important;
  background-color: var(--color-card) !important;
  color: var(--color-text-primary) !important;
}

[data-theme="dark"] .ql-editor[class] {
  background: var(--color-card) !important;
  background-color: var(--color-card) !important;
}

[data-theme="dark"] .ql-snow .ql-editor,
[data-theme="dark"] .ql-container.ql-snow .ql-editor,
[data-theme="dark"] .text-area.ql-container.ql-snow .ql-editor,
html[data-theme="dark"] .ql-editor {
  background: var(--color-card) !important;
  background-color: var(--color-card) !important;
  color: var(--color-text-primary) !important;
}

[data-theme="dark"] .progress-card {
  background: var(--color-card);
}
[data-theme="dark"] .density-number {
  color: var(--color-text-primary);
}
[data-theme="dark"] .density-unit,
[data-theme="dark"] .diary-label,
[data-theme="dark"] .diary-title,
[data-theme="dark"] .diary-detail,
[data-theme="dark"] .milestone-labels span {
  color: var(--color-text-secondary);
}
[data-theme="dark"] .milestone-track {
  background: var(--color-border);
}
[data-theme="dark"] .milestone-marker {
  background: var(--color-card);
}
[data-theme="dark"] .diary-dot {
  background: var(--color-border);
}
[data-theme="dark"] .week-diary {
  border-color: var(--color-border);
}

[data-theme="dark"] {

  

  .hamdan-speech-bubble {
    background: var(--color-card) !important;
    color: var(--color-text-primary) !important;
    border-color: var(--color-border) !important;
  }

  .hamdan-speech-bubble::before {
    border-bottom-color: var(--color-card) !important;
  }

  .hamdan-speech-bubble::after {
    border-bottom-color: var(--color-card) !important;
  }

  .hamdan-speech-bubble .warning-msg {
    color: var(--color-text-primary) !important;
  }

  

  .voice-slider-container {
    background: var(--color-border) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
  }

  .voice-slider-container::before {
    background-image:
      linear-gradient(to bottom, var(--color-text-faint) 0%, var(--color-text-faint) 100%),
      linear-gradient(to bottom, var(--color-text-faint) 0%, var(--color-text-faint) 100%),
      linear-gradient(to bottom, var(--color-text-faint) 0%, var(--color-text-faint) 100%),
      linear-gradient(to bottom, var(--color-text-faint) 0%, var(--color-text-faint) 100%),
      linear-gradient(to bottom, var(--color-text-faint) 0%, var(--color-text-faint) 100%) !important;
  }

  .voice-handle {
    border-color: var(--color-card) !important;
  }

  .voice-slider-labels {
    color: var(--color-text-secondary) !important;
  }

  .voice-slider-start,
  .voice-slider-end {
    color: var(--color-text-secondary) !important;
  }

  .voice-card-title {
    color: var(--color-text-primary) !important;
  }

  .voice-card-subtitle {
    color: var(--color-text-secondary) !important;
  }

  
  .voice-change-btn,
  .analyze-request-btn,
  #genBtn {
    box-shadow: 0 2px 6px rgba(var(--color-primary-rgb), 0.4) !important;
  }

  .voice-change-btn::before,
  .analyze-request-btn::before,
  #genBtn::before {
    background: linear-gradient(to bottom, rgba(28, 27, 24, 0) 0%, rgba(28, 27, 24, 0.9) 100%) !important;
  }

  .voice-change-btn:hover,
  .analyze-request-btn:hover,
  #genBtn:hover {
    box-shadow: 0 4px 12px rgba(var(--color-primary-rgb), 0.5) !important;
  }

  

  .style-option {
    background: var(--color-card) !important;
    border-color: var(--color-border) !important;
    box-shadow: none !important;
  }

  .style-option:hover {
    background: rgba(255, 255, 255, 0.04) !important;
    border-color: var(--color-border) !important;
    box-shadow: none !important;
  }

  .style-title {
    color: var(--color-text-secondary) !important;
  }

  .style-title:hover {
    color: var(--color-text-primary) !important;
  }

  .style-description {
    color: var(--color-text-secondary) !important;
  }

  
  .style-icon.formal {
    background-color: rgba(107, 119, 255, 0.15) !important;
  }

  .style-icon.chat {
    background-color: rgba(46, 213, 115, 0.15) !important;
  }

  .style-icon.book {
    background-color: rgba(205, 132, 241, 0.15) !important;
  }

  .style-icon.humor {
    background-color: rgba(255, 175, 64, 0.15) !important;
  }

  

  .improvement-icon,
  .improvement-icon-3 {
    background: var(--color-card) !important;
    border-color: var(--color-border) !important;
  }

  .improvement-icon svg path,
  .improvement-icon-3 svg path {
    stroke: var(--color-text-secondary) !important;
    fill: var(--color-text-secondary) !important;
  }

  .improvement-text {
    color: var(--color-text-secondary) !important;
  }

  .improvement-header {
    color: var(--color-text-primary) !important;
  }

  .improvement-section {
    background: var(--color-card) !important;
    border-color: var(--color-border) !important;
  }

  .analysis-card {
    background: var(--color-bg) !important;
    border-color: var(--color-border) !important;
    color: var(--color-text-primary) !important;
  }

  .ai-analysis-text {
    color: var(--color-text-secondary) !important;
  }

  .analysis-subtitle {
    color: var(--color-text-secondary) !important;
  }

  .analysis-reset-button {
    color: var(--color-text-secondary) !important;
    border-color: var(--color-border) !important;
  }

  .analysis-reset-button:hover {
    background: rgba(255, 255, 255, 0.06) !important;
  }

  .analysis-reset-button svg path {
    stroke: var(--color-text-secondary) !important;
  }

  

  .correction-level-container .level-labels .level-label {
    color: var(--color-text-secondary) !important;
  }

  .correction-level-container .level-labels .level-label.active {
    color: var(--color-text-primary) !important;
  }

  .level-slider-track,
  .level-slider-fill {
    background: var(--color-border) !important;
  }

  .level-slider::-webkit-slider-thumb {
    border-color: var(--color-card) !important;
  }

  .level-slider::-moz-range-thumb {
    border-color: var(--color-card) !important;
  }

  

  .dk-hamdan-input-container {
    background: var(--color-card) !important;
    border-color: var(--color-border) !important;
  }

  .dk-hamdan-custom-input {
    background: var(--color-bg) !important;
    color: var(--color-text-primary) !important;
    border-color: var(--color-border) !important;
  }

  .dk-hamdan-custom-input::placeholder {
    color: var(--color-text-secondary) !important;
  }

  .dk-hamdan-custom-input-controls {
    color: var(--color-text-secondary) !important;
  }

  
  .dk-hamdan-modal-container {
    background: var(--color-card) !important;
    border-color: var(--color-border) !important;
  }

  .dk-hamdan-option-button {
    background: var(--color-bg) !important;
    border-color: var(--color-border) !important;
    color: var(--color-text-primary) !important;
  }

  .dk-hamdan-option-button:hover {
    background: rgba(255, 255, 255, 0.04) !important;
  }

  

  .sidebar-collapsed-icons {
    background: var(--color-card) !important;
  }

  .sidebar-icon-btn {
    color: var(--color-text-secondary) !important;
  }

  .sidebar-icon-btn:hover {
    background: rgba(255, 255, 255, 0.06) !important;
  }

  .sidebar-icon-btn .sidebar-svg-icon svg path {
    stroke: var(--color-text-secondary) !important;
  }

  
  .correction-sidebar-collapsed {
    background: var(--color-card) !important;
    border-color: var(--color-border) !important;
  }

  .collapsed-option:hover {
    background: rgba(255, 255, 255, 0.06) !important;
  }

  .collapsed-option.active {
    background: rgba(var(--color-primary-rgb), 0.15) !important;
  }

  

  .legend-text {
    color: var(--color-text-secondary) !important;
  }

  .correction-message {
    color: var(--color-text-secondary) !important;
  }

  

  .header-section {
    background: var(--color-card) !important;
    border-color: var(--color-border) !important;
  }

  .header-content {
    background: var(--color-card) !important;
    color: var(--color-text-primary) !important;
  }

  
  .hk-dropdown-option,
  .hk-dropdown-option span {
    color: var(--color-text-secondary) !important;
  }

  .hk-dropdown-option:hover {
    background: rgba(255, 255, 255, 0.06) !important;
  }

  .hk-dropdown-option.active,
  .hk-dropdown-option[class*="active"] {
    color: var(--color-text-primary) !important;
  }

  

  .correction-sidebar-opsaeting-svg path,
  .correction-sidebar-dropdown2-svg path {
    fill: var(--color-text-secondary) !important;
    stroke: var(--color-text-secondary) !important;
  }

  /* lang-pill: override slate/navy hardcodes from langPill.css */
  .lang-pill {
    color: var(--color-text-secondary) !important;
  }
  .lang-pill:hover {
    background: rgba(255,255,255,0.08) !important;
    color: var(--color-text-primary) !important;
  }
  .lang-pill-dropdown {
    background: var(--color-card) !important;
    border-color: rgba(255,255,255,0.10) !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.06) !important;
  }
  .lang-pill-option {
    color: var(--color-text-primary) !important;
  }
  .lang-pill-option:hover {
    background: rgba(255,255,255,0.08) !important;
  }
  .lang-pill-option.lang-pill-active {
    background: rgba(255,255,255,0.08) !important;
    color: var(--color-text-primary) !important;
  }
  .controls-sep {
    background: var(--color-border) !important;
  }
}

[data-theme="dark"] body .robot-container .hamdan-speech-bubble {
  background: var(--color-card) !important;
  color: var(--color-text-primary) !important;
}

[data-theme="dark"] body .robot-container .hamdan-speech-bubble::before {
  border-bottom-color: var(--color-card) !important;
}

[data-theme="dark"] body .robot-container .hamdan-speech-bubble::after {
  border-bottom-color: var(--color-card) !important;
}

[data-theme="dark"] body .robot-container .voice-slider-container {
  background: var(--color-card) !important;
  border-color: var(--color-border) !important;
}

[data-theme="dark"] body .robot-container .style-option {
  background: var(--color-bg) !important;
  border-color: var(--color-border) !important;
  box-shadow: none !important;
}

[data-theme="dark"] body .robot-container .improvement-icon,
[data-theme="dark"] body .robot-container .improvement-icon-3 {
  background: var(--color-bg) !important;
}

[data-theme="dark"] body .robot-container .dk-hamdan-input-container {
  background: var(--color-card) !important;
}

[data-theme="dark"] body .voice-change-btn,
[data-theme="dark"] body .analyze-request-btn,
[data-theme="dark"] body #genBtn {
  box-shadow: 0 2px 6px rgba(var(--color-primary-rgb), 0.4) !important;
}

[data-theme="dark"] body .voice-change-btn:hover,
[data-theme="dark"] body .analyze-request-btn:hover,
[data-theme="dark"] body #genBtn:hover {
  box-shadow: 0 4px 12px rgba(var(--color-primary-rgb), 0.5) !important;
}

html[data-theme="dark"] #inputText .ql-editor {
  background: var(--color-card) !important;
  background-color: var(--color-card) !important;
}

html[data-theme="dark"] #inputText :not(.word-highlight) {
  background: inherit !important;
  background-color: inherit !important;
}

html[data-theme="dark"] #inputText mark.word-highlight {
  background: rgba(255, 241, 194, 0.2) !important;
}

html[data-theme="dark"] #inputText {
  background: var(--color-card) !important;
  background-color: var(--color-card) !important;
  color: var(--color-text-primary) !important;
}

html[data-theme="dark"] #inputText p,
html[data-theme="dark"] #inputText div:not(.ql-editor),
html[data-theme="dark"] #inputText span:not(.word-highlight),
html[data-theme="dark"] #inputText li,
html[data-theme="dark"] #inputText h1,
html[data-theme="dark"] #inputText h2,
html[data-theme="dark"] #inputText h3 {
  background: transparent !important;
  color: inherit !important;
}

html[data-theme="dark"] #inputText ham-dan {
  color: var(--color-text-primary) !important;
}

html[data-theme="dark"] #inputText ham-dan.grammar-correction-added {
  background: rgba(16, 185, 129, 0.2) !important;
}

html[data-theme="dark"] #inputText ham-dan.grammar-correction-removed {
  background: rgba(239, 68, 68, 0.2) !important;
  text-decoration-color: rgba(239, 68, 68, 0.6) !important;
}

html[data-theme="dark"] #inputText ham-dan.grammar-correction-punctuation {
  background: rgba(245, 158, 11, 0.2) !important;
}

html[data-theme="dark"] #inputText ham-dan.hamdanActive {
  background: rgba(255, 241, 194, 0.25) !important;
}

/* ── Laes/reading tool dark overrides ── */

/* Error bar — light red bg is blinding in dark mode */
[data-theme="dark"] .sl-error-bar {
  background: rgba(239, 68, 68, 0.15);
  color: var(--color-danger);
}

/* Word count warning/error — use dark-friendly palette */
[data-theme="dark"] .sl-char-count.sl-wc-warn {
  color: var(--color-warning);
}
[data-theme="dark"] .sl-char-count.sl-wc-over {
  color: var(--color-danger);
}

/* Play button playing state — navy #1a1a2e clashes with warm dark bg */
[data-theme="dark"] .ss-play.playing {
  background: var(--color-card);
}

/* Chat copied icon — brighter green for dark background contrast */
[data-theme="dark"] .message-actions .action-icon.copied {
  color: var(--color-success);
}

/* STT active mic indicator — softer red for dark mode */
[data-theme="dark"] .sl-toolbar-btn.active.sl-stt-active,
[data-theme="dark"] .sl-labeled-btn.active.sl-stt-active {
  background: rgba(239, 68, 68, 0.15);
  color: var(--color-error);
}
[data-theme="dark"] .sl-toolbar-btn.active.sl-stt-active svg,
[data-theme="dark"] .sl-labeled-btn.active.sl-stt-active svg {
  stroke: var(--color-error);
}
[data-theme="dark"] .sl-toolbar-btn.active.sl-stt-active::after,
[data-theme="dark"] .sl-labeled-btn.active.sl-stt-active::after {
  background: var(--color-error);
}

/* Dropdown items — flip black overlays to white for dark bg */
[data-theme="dark"] .sl-dropdown-item:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--color-text-primary);
}
[data-theme="dark"] .sl-dropdown-item.active {
  background: rgba(255, 255, 255, 0.1);
  color: var(--color-text-primary);
}
[data-theme="dark"] .sl-tools-dropdown {
  background: var(--color-card);
  border-color: var(--color-border);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

/* Nav buttons (prev/next) — hover needs white overlay in dark */
[data-theme="dark"] .sl-nav-btn:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.1);
  color: var(--color-text-primary);
}

/* Click-to-read hover — flip black overlay to white */
[data-theme="dark"] .sl-source-editor .sl-output-content p:hover,
[data-theme="dark"] .sl-source-editor .sl-output-content h1:hover,
[data-theme="dark"] .sl-source-editor .sl-output-content h2:hover,
[data-theme="dark"] .sl-source-editor .sl-output-content h3:hover,
[data-theme="dark"] .sl-source-editor .sl-output-content h4:hover,
[data-theme="dark"] .sl-source-editor .sl-output-content li:hover,
[data-theme="dark"] .sl-source-editor .sl-output-content blockquote:hover {
  background: rgba(255, 255, 255, 0.04);
}
[data-theme="dark"] .sl-target-output .sl-output-content p:hover,
[data-theme="dark"] .sl-target-output .sl-output-content h1:hover,
[data-theme="dark"] .sl-target-output .sl-output-content h2:hover,
[data-theme="dark"] .sl-target-output .sl-output-content h3:hover,
[data-theme="dark"] .sl-target-output .sl-output-content li:hover {
  background: rgba(255, 255, 255, 0.04);
}

/* Panel borders/shadows — black shadows invisible on dark bg */
[data-theme="dark"] .sl-source-panel,
[data-theme="dark"] .sl-target-panel {
  border-color: var(--color-border);
  box-shadow: none;
}

/* Toolbar borders — flip black to white */
[data-theme="dark"] .sl-panel-toolbar {
  border-bottom-color: var(--color-border);
}
[data-theme="dark"] .sl-right-toolbar {
  border-bottom-color: var(--color-border);
}
[data-theme="dark"] .sl-mode-row {
  border-bottom-color: var(--color-border);
}
[data-theme="dark"] .sl-tts-bar {
  border-top-color: var(--color-border);
}

/* Submode pills — black-alpha borders to white-alpha */
[data-theme="dark"] .sl-submode-btn {
  border-color: rgba(255, 255, 255, 0.1);
  background: var(--color-card);
}
[data-theme="dark"] .sl-submode-btn.active {
  background: rgba(255, 255, 255, 0.1);
  border-color: var(--color-text-primary);
}

/* Generate redo button — flip border to white */
[data-theme="dark"] .sl-generate-btn.sl-generate-redo {
  border-color: rgba(255, 255, 255, 0.15);
}

/* URL input focus ring — grey hex to white alpha */
[data-theme="dark"] .sl-url-input:focus {
  border-color: rgba(255, 255, 255, 0.3);
}

/* Chat message border/shadow — flip for dark */
[data-theme="dark"] .message-bubble.ai {
  border-color: var(--color-border);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* Chat input wrapper border — flip */
[data-theme="dark"] .st-chat-input-wrapper {
  border-color: var(--color-border);
}

/* Chat shortcut cards — flip borders */
[data-theme="dark"] .st-shortcut-card {
  border-color: var(--color-border);
}
[data-theme="dark"] .st-shortcut-card:hover {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.15);
}

/* Typing indicator — flip black overlay */
[data-theme="dark"] .st-typing {
  background: rgba(255, 255, 255, 0.06);
}

/* Mobile tab bar border — flip for dark */
[data-theme="dark"] .sl-mobile-tabs {
  border-bottom-color: var(--color-border);
}
[data-theme="dark"] .sl-mobile-tab:not(.active):active {
  background: rgba(255, 255, 255, 0.04);
}

/* Speed pill hover — already in laes.css but border-color #9ca3af missed */
[data-theme="dark"] .sl-speed-pill:hover {
  border-color: rgba(255, 255, 255, 0.2);
}

/* Chat action icon hover — flip */
[data-theme="dark"] .message-actions .action-icon:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--color-text-primary);
}

/* Chat mic hover — flip */
[data-theme="dark"] .st-chat-mic-btn:hover {
  background: rgba(255, 255, 255, 0.08);
}

/* Chat reset hover — flip */
[data-theme="dark"] .st-chat-reset-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--color-text-primary);
}

/* Empty action cards — already partially handled in laes.css but hover border needs flip */
[data-theme="dark"] .sl-empty-action:hover {
  border-color: rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.08);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

/* ── Chat page dark overrides ──
   Fixes hardcoded navy-blue and slate-blue dark values in chat CSS files.
   These override the inline [data-theme="dark"] rules in chat-templates.css,
   chat-input.css, chat-plus-menu.css, chat-category-chips.css, and
   doc-preview.css with warm-brown theme variables.
   ───────────────────────────────────────────────────────────────────── */

/* — chat-templates.css: template modal (navy #1a2035 → warm brown) — */

[data-theme="dark"] .chat-template-modal {
  background: var(--color-card);
}

[data-theme="dark"] .chat-template-modal-header h3 {
  color: var(--color-text-primary);
}

[data-theme="dark"] .chat-template-modal-label {
  color: var(--color-text-secondary);
}

[data-theme="dark"] .chat-template-modal-input,
[data-theme="dark"] .chat-template-modal-textarea {
  background: var(--color-bg);
  border-color: var(--color-border);
  color: var(--color-text-primary);
}

[data-theme="dark"] .chat-template-modal-input:focus,
[data-theme="dark"] .chat-template-modal-textarea:focus {
  background: var(--color-card);
}

[data-theme="dark"] .chat-template-modal-input::placeholder,
[data-theme="dark"] .chat-template-modal-textarea::placeholder {
  color: var(--color-text-tertiary);
}

[data-theme="dark"] .chat-templates-empty {
  color: var(--color-text-secondary);
}

/* — chat-input.css: send button, stop button hover, dragover overlay — */

[data-theme="dark"] .chat-send-btn {
  background: var(--color-primary);
  color: #fff;
}
[data-theme="dark"] .chat-send-btn:hover {
  background: var(--color-primary-hover);
}
[data-theme="dark"] .chat-send-btn.is-empty {
  background: rgba(255,255,255,0.08);
  color: var(--color-text-tertiary);
}

[data-theme="dark"] .chat-send-btn.is-stop:hover {
  background: var(--color-text-primary);
}

[data-theme="dark"] .chat-empty-input-area.is-dragover::after,
[data-theme="dark"] #chat-input.is-dragover::after {
  background: var(--color-card);
  color: var(--color-text-primary);
}

/* — chat-plus-menu.css: search inputs use hardcoded #e8e8ed — */

[data-theme="dark"] .chat-contact-search {
  color: var(--color-text-primary);
}

[data-theme="dark"] .chat-doc-search {
  color: var(--color-text-primary);
}

/* — chat-category-chips.css: prompt panel white bg, save button navy text — */

[data-theme="dark"] .chat-prompt-panel-inner {
  background: var(--color-card);
  border-color: var(--color-border);
}

[data-theme="dark"] .chat-prompt-form-save {
  color: var(--color-bg);
}

[data-theme="dark"] .chat-prompt-form-save:hover {
  background: var(--color-text-primary);
}

/* — doc-preview.css: card, preview, modal (slate #1e293b → warm brown) — */

[data-theme="dark"] .doc-preview-card {
  background: var(--color-card);
  border-color: var(--color-border);
}

[data-theme="dark"] .doc-preview-image {
  background: var(--color-bg);
  border-bottom-color: var(--color-border);
}

[data-theme="dark"] .doc-preview-body {
  color: var(--color-text-primary);
}

[data-theme="dark"] .doc-preview-title {
  color: var(--color-text-primary);
}

[data-theme="dark"] .doc-preview-subtitle {
  color: var(--color-text-secondary);
}

[data-theme="dark"] .doc-style-btn {
  background: var(--color-bg);
  border-color: var(--color-border);
  color: var(--color-text-secondary);
}

[data-theme="dark"] .doc-style-btn:hover {
  background: var(--color-card);
  color: var(--color-text-primary);
  border-color: rgba(255, 255, 255, 0.2);
}

[data-theme="dark"] .doc-preview-modal-inner {
  background: var(--color-card);
}

[data-theme="dark"] .doc-preview-modal-iframe {
  background: var(--color-card);
}

[data-theme="dark"] .doc-skel-line {
  background: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .doc-brandkit-toggle {
  color: var(--color-text-tertiary);
}

[data-theme="dark"] .doc-brandkit-editor {
  background: var(--color-bg);
  border-color: var(--color-border);
}

[data-theme="dark"] .doc-bk-label {
  color: var(--color-text-secondary);
}

[data-theme="dark"] .doc-bk-input {
  background: var(--color-card);
  border-color: var(--color-border);
  color: var(--color-text-primary);
}

/* ── Skabeloner (templates) dark overrides ── */

/* tokens.css — override light-only token values */
[data-theme="dark"] .wf-page {
  --wf-surface: var(--color-card);
  --wf-bg-alt: rgba(255, 255, 255, 0.06);
}

/* gallery.css — #wf-next button (dark slate bg invisible on dark) */
[data-theme="dark"] #wf-next {
  background: var(--color-text-primary);
  color: var(--color-bg);
}
[data-theme="dark"] #wf-next:hover {
  background: #fff;
}

/* gallery.css — ghost button (hardcoded #71717a) */
[data-theme="dark"] .wf-btn-ghost {
  color: var(--color-text-secondary);
}

/* gallery.css — card icon background in dark */
[data-theme="dark"] .wf-card-icon {
  background: rgba(255, 255, 255, 0.06);
}

/* wizard.css — radio card selected state (rgba(56,69,81,...) invisible in dark) */
[data-theme="dark"] .wf-radio-card:has(input:checked),
[data-theme="dark"] .wf-radio-card.selected {
  border-color: rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.08);
  color: var(--color-text-primary);
}

/* wizard.css — custom confirm button */
[data-theme="dark"] .wf-custom-cat-confirm {
  border-color: rgba(255, 255, 255, 0.25);
  background: rgba(255, 255, 255, 0.06);
  color: var(--color-text-primary);
}
[data-theme="dark"] .wf-custom-cat-confirm:hover {
  background: rgba(255, 255, 255, 0.12);
}

/* wizard.css — emoji button selected state */
[data-theme="dark"] .wf-emoji-picker button.selected,
[data-theme="dark"] .wf-emoji-btn.selected,
[data-theme="dark"] .wf-emoji-btn.active {
  background: rgba(255, 255, 255, 0.1);
  color: var(--color-text-primary);
}

/* wizard.css — suggested fields callout */
[data-theme="dark"] .wf-suggested-fields {
  background: rgba(255, 255, 255, 0.03);
}

/* wizard.css — suggest chip hover */
[data-theme="dark"] .wf-suggest-chip:hover {
  border-color: rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.06);
}

/* field-builder.css — field card borders in dark */
[data-theme="dark"] .wf-field-card:hover {
  border-color: rgba(255, 255, 255, 0.18);
}
[data-theme="dark"] .wf-field-card.expanded {
  border-color: rgba(255, 255, 255, 0.2);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}
[data-theme="dark"] .wf-field-card.dragging {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
}

/* field-builder.css — type dropdown shadow in dark */
[data-theme="dark"] .wf-type-dropdown {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35), 0 2px 8px rgba(0, 0, 0, 0.2);
}

/* field-builder.css — type option active state */
[data-theme="dark"] .wf-type-option.active {
  background: rgba(255, 255, 255, 0.08);
  color: var(--color-text-primary);
}

/* field-builder.css — move buttons hover */
[data-theme="dark"] .wf-field-move-up:hover,
[data-theme="dark"] .wf-field-move-down:hover {
  color: var(--color-text-primary);
  border-color: rgba(255, 255, 255, 0.2);
}

/* field-builder.css — add-field input border hover */
[data-theme="dark"] .wf-add-field-input:hover {
  border-color: rgba(255, 255, 255, 0.2);
}

/* field-builder.css — section card border hover */
[data-theme="dark"] .wf-section-card:hover {
  border-color: rgba(255, 255, 255, 0.18);
}

/* guided-builder.css — story step border */
[data-theme="dark"] .wf-story__step {
  border-color: rgba(255, 255, 255, 0.08);
}
[data-theme="dark"] .wf-story__step--ai {
  background: rgba(255, 255, 255, 0.03);
}

/* guided-builder.css — story arrow (hardcoded #cbd5e1) */
[data-theme="dark"] .wf-story__arrow {
  color: rgba(255, 255, 255, 0.2);
}

/* guided-builder.css — flow badge */
[data-theme="dark"] .wf-flow-badge {
  background: rgba(255, 255, 255, 0.08);
  color: var(--color-text-primary);
}

/* guided-builder.css — journal field bottom borders */
[data-theme="dark"] .wf-journal-field {
  border-bottom-color: rgba(255, 255, 255, 0.06);
}

/* guided-builder.css — example block (hardcoded #f8f9fa bg, #cbd5e1 border) */
[data-theme="dark"] .wf-story__example {
  background: rgba(255, 255, 255, 0.03);
  border-left-color: rgba(255, 255, 255, 0.15);
}

/* guided-builder.css — prompt expander tag (hardcoded #f1f5f9) */
[data-theme="dark"] .wf-prompt-expander__tag {
  background: rgba(255, 255, 255, 0.08);
  color: var(--color-text-secondary);
}

/* guided-builder.css — story chip (hardcoded #f1f5f9) */
[data-theme="dark"] .wf-story-chip {
  background: rgba(255, 255, 255, 0.06);
  color: var(--color-text-secondary);
}

/* guided-builder.css — pill checked state in dark */
[data-theme="dark"] .wf-pill:has(input:checked) {
  background: rgba(255, 255, 255, 0.18);
  color: var(--color-text-primary);
  border-color: rgba(255, 255, 255, 0.25);
}

/* guided-builder.css — ai assist button (dark slate invisible in dark) */
[data-theme="dark"] .wf-ai-assist-btn {
  background: var(--color-text-primary);
  color: var(--color-bg);
}
[data-theme="dark"] .wf-ai-assist-btn:hover {
  background: #fff;
}

/* guided-builder.css — editor header / meta neutral bg */
[data-theme="dark"] .wf-story__editor-header {
  background: rgba(255, 255, 255, 0.04);
}
[data-theme="dark"] .wf-story__meta {
  background: rgba(255, 255, 255, 0.04);
  border-top-color: rgba(255, 255, 255, 0.08);
}

/* runner.css — output wrapper (#1a1a2e clashes with warm dark palette) */
[data-theme="dark"] .wf-output {
  background: var(--color-sidebar);
}

/* runner.css — submit row shadow in dark */
[data-theme="dark"] .wf-submit-row .wf-btn {
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
}
[data-theme="dark"] .wf-submit-row .wf-btn:hover {
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
}

/* ── Hjem (home dashboard) dark overrides ── */

/* tool-cards.css — base card (hardcoded #fff background) */
[data-theme="dark"] .v-voksen .tool-card {
  background: var(--color-card);
  border-color: var(--color-border);
  box-shadow: none;
}
[data-theme="dark"] .v-voksen .tool-card:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.15);
  box-shadow: none;
}

/* tool-cards.css — hero gradient wash (hardcoded #fff endpoint) */
[data-theme="dark"] .v-voksen .tool-card--hero.tool-card--grammar {
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.1) 0%, rgba(34, 197, 94, 0.03) 40%, var(--color-card) 100%);
}
[data-theme="dark"] .v-voksen .tool-card--hero.tool-card--skabeloner {
  background: linear-gradient(135deg, rgba(217, 70, 239, 0.1) 0%, rgba(217, 70, 239, 0.03) 40%, var(--color-card) 100%);
}

/* tool-cards.css — accent tint backgrounds (subtle on dark card) */
[data-theme="dark"] .v-voksen .tool-card--grammar { background: rgba(34, 197, 94, 0.06); }
[data-theme="dark"] .v-voksen .tool-card--email { background: rgba(37, 99, 235, 0.06); }
[data-theme="dark"] .v-voksen .tool-card--chat { background: rgba(139, 92, 246, 0.06); }
[data-theme="dark"] .v-voksen .tool-card--translate { background: rgba(8, 145, 178, 0.06); }
[data-theme="dark"] .v-voksen .tool-card--calendar { background: rgba(234, 88, 12, 0.06); }
[data-theme="dark"] .v-voksen .tool-card--cv { background: rgba(234, 88, 12, 0.06); }
[data-theme="dark"] .v-voksen .tool-card--laes { background: rgba(236, 72, 153, 0.06); }
[data-theme="dark"] .v-voksen .tool-card--skabeloner { background: rgba(217, 70, 239, 0.06); }

/* docs-glance.css — link color (hardcoded #64748B) */
[data-theme="dark"] .recent-docs-link {
  color: var(--color-text-secondary);
}
[data-theme="dark"] .recent-docs-link:hover {
  color: var(--color-text-primary);
}

/* docs-glance.css — doc icon (hardcoded #f1f5f9 bg) */
[data-theme="dark"] .recent-doc-icon {
  background: rgba(255, 255, 255, 0.08);
  color: var(--color-text-secondary);
}

/* docs-glance.css — card border in dark */
[data-theme="dark"] .recent-docs-card {
  border-color: rgba(255, 255, 255, 0.08);
}

/* cal-glance.css — link color (hardcoded #64748B) */
[data-theme="dark"] .cal-glance-link {
  color: var(--color-text-secondary);
}
[data-theme="dark"] .cal-glance-link:hover {
  color: var(--color-text-primary);
}

/* cal-glance.css — card border */
[data-theme="dark"] .cal-glance-card {
  border-color: rgba(255, 255, 255, 0.08);
}

/* email-glance.css — link color (hardcoded #64748B / #0F172A) */
[data-theme="dark"] .voksen-email-link {
  color: var(--color-text-secondary);
  border-top-color: rgba(255, 255, 255, 0.08);
}
[data-theme="dark"] .voksen-email-link:hover {
  color: var(--color-text-primary);
}

/* email-glance.css — glance card border */
[data-theme="dark"] .voksen-email-glance {
  border-color: rgba(255, 255, 255, 0.08);
}

/* email-glance.css — zero-refresh hover in dark */
[data-theme="dark"] .voksen-email-zero-refresh:hover {
  color: var(--color-text-secondary);
  background: rgba(255, 255, 255, 0.06);
}

/* widgets.css — widget action button (hardcoded #64748B) */
[data-theme="dark"] .widget-action-btn {
  color: var(--color-text-secondary);
  border-color: rgba(255, 255, 255, 0.12);
}

/* cal-glance.css — delete confirm "No" button hover */
[data-theme="dark"] .cal-delete-no:hover {
  background: var(--color-hover-strong);
}

/* base.css — page bg override */
[data-theme="dark"] .v-voksen .main-content {
  background: var(--color-bg);
}

/* ── Dokumenter selection dark overrides ── */

/* selection.css — selected row background (hardcoded #f0f6ff light blue flash) */
[data-theme="dark"] .doc-card.selected {
  background: rgba(26, 115, 232, 0.08);
  box-shadow: none;
}

[data-theme="dark"] .doc-list-row.selected {
  background: rgba(26, 115, 232, 0.08);
}

/* selection.css — selection bar (frosted glass — flip to dark) */
[data-theme="dark"] .doc-selection-bar {
  background: rgba(43, 42, 39, 0.78);
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow:
    0 4px 6px -1px rgba(0, 0, 0, 0.2),
    0 12px 24px -4px rgba(0, 0, 0, 0.35),
    0 0 0 1px rgba(255, 255, 255, 0.04);
}

/* selection.css — count divider in dark */
[data-theme="dark"] .doc-selection-count {
  border-right-color: rgba(255, 255, 255, 0.08);
}

/* selection.css — delete hover in dark */
[data-theme="dark"] .doc-sel-delete:hover {
  background: rgba(241, 112, 122, 0.1);
  color: var(--color-primary);
}

/* selection.css — checked checkbox (brighter blue for contrast) */
[data-theme="dark"] .doc-card.selected .doc-card-checkbox,
[data-theme="dark"] .doc-list-row.selected .doc-card-checkbox {
  background: var(--color-selection);
  border-color: var(--color-selection);
}

/* ── Email account-filter chips — nuclear override ── */
/* email-base.css uses var(--sk-text) as chip BACKGROUND which flips to
   light in dark mode, creating white-on-white chips. !important required
   because the variable cascade makes the base rule win unexpectedly. */
[data-theme="dark"] .email-account-chip {
  background: transparent !important;
  color: var(--color-text-tertiary) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}
[data-theme="dark"] .email-account-chip:hover {
  background: rgba(255, 255, 255, 0.06) !important;
  color: var(--color-text-secondary) !important;
  border-color: rgba(255, 255, 255, 0.15) !important;
}
[data-theme="dark"] .email-account-chip.active {
  background: rgba(255, 255, 255, 0.12) !important;
  color: var(--color-text-primary) !important;
  border-color: rgba(255, 255, 255, 0.20) !important;
}

/* ── Notebot inline-style override ── */
[data-theme="dark"] [data-i18n="saved.noResults"] {
  color: var(--color-text-secondary) !important;
}
[data-theme="dark"] [data-i18n="saved.tryOther"] {
  color: var(--color-text-tertiary) !important;
}

/* ── Fix text-inverted on non-inverting backgrounds ── */
/* These buttons use var(--color-text-inverted) which flips to #131313 in dark,
   but their backgrounds stay colored — need white text always. */
[data-theme="dark"] .btn-accent,
[data-theme="dark"] .btn-accent:hover {
  color: #fff;
}

[data-theme="dark"] .btn-danger,
[data-theme="dark"] .btn-danger:hover {
  color: #fff;
}

/* ── Tone diagnosis — var(--color-text) is undefined, fallback #384551 invisible ── */
[data-theme="dark"] .tone-diagnosis-text strong {
  color: var(--color-text-primary);
}
[data-theme="dark"] .tone-back-link:hover {
  color: var(--color-text-primary);
}
[data-theme="dark"] .wm-tone-label {
  color: var(--color-text-primary);
}

/* ── Intern admin bar-chart text on colored segments ── */
[data-theme="dark"] .bar-seg {
  color: #fff !important;
}

/* ── Papirkurv (trash) — bundle has hardcoded light backgrounds ── */
[data-theme="dark"] .apb-card {
  background: var(--color-card);
  border-color: var(--color-border);
}
[data-theme="dark"] .apb-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}
[data-theme="dark"] .apb-card-top {
  background: rgba(255, 255, 255, 0.04);
}
[data-theme="dark"] .apb-card-visual {
  background: rgba(255, 255, 255, 0.03) !important;
}
[data-theme="dark"] .apb-card-badge {
  background: rgba(220, 38, 38, 0.2);
  color: var(--color-danger);
}
[data-theme="dark"] .apb-card-download-menu {
  background: var(--color-card);
  border: 1px solid var(--color-border);
}
[data-theme="dark"] .apb-card-download-option:hover {
  background: rgba(255, 255, 255, 0.06);
}
[data-theme="dark"] .apb-card-progress-bar {
  background: rgba(255, 255, 255, 0.08);
}
[data-theme="dark"] .apb-card-btn {
  color: var(--color-text-secondary);
}
[data-theme="dark"] .apb-card-btn:hover {
  color: var(--color-text-primary);
  background: rgba(255, 255, 255, 0.08);
}
[data-theme="dark"] .apb-card-delete {
  color: var(--color-text-tertiary);
}

/* ── Indstillinger — form elements dark override (specificity boost) ── */
[data-theme="dark"] .set-input,
[data-theme="dark"] .set-textarea,
[data-theme="dark"] .set-select {
  background-color: #1f1e1b;
  color: var(--color-text-primary);
  border-color: rgba(255, 255, 255, 0.12);
}
[data-theme="dark"] .set-input:hover,
[data-theme="dark"] .set-textarea:hover,
[data-theme="dark"] .set-select:hover {
  border-color: rgba(255, 255, 255, 0.20);
}
[data-theme="dark"] .set-input:focus,
[data-theme="dark"] .set-textarea:focus,
[data-theme="dark"] .set-select:focus {
  border-color: rgba(255, 255, 255, 0.35);
}
[data-theme="dark"] .set-btn {
  border-color: rgba(255, 255, 255, 0.12);
}

/* ── Global btn-primary: uses --color-text-primary as bg → cream in dark ── */
[data-theme="dark"] .btn-primary {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}
[data-theme="dark"] .btn-primary:hover {
  background: var(--color-primary-hover);
  border-color: var(--color-primary-hover);
  color: #fff;
}

/* ── Sidebar avatar: collapsed + tablet — don't go cream ── */
[data-theme="dark"] .chat-sidebar.collapsed .s-avatar,
[data-theme="dark"] .chat-sidebar:not(.force-expanded) .s-avatar {
  background: var(--color-text-secondary);
}

/* ── Global dark scrollbar ── */
[data-theme="dark"] * {
  scrollbar-color: var(--color-border) transparent;
}

/* ── TTS gender picker ── */
[data-theme="dark"] .gender-option {
  color: var(--color-text-primary);
}
[data-theme="dark"] .gender-option:hover {
  background: rgba(255, 255, 255, 0.06);
}