/* ===========================================
   LIGHT THEME OVERRIDES
   =========================================== */

/* Body and main containers */
.light-theme {
  background: #f5f5f7 !important;
  color: #1d1d1f !important;
}

/* Main navigation */
.light-theme .main-nav {
  background: linear-gradient(180deg, #ffffff, #f8f8fa) !important;
  border-color: #d1d1d6 !important;
}

.light-theme .nav-tab {
  color: var(--text-muted) !important;
}

.light-theme .nav-tab:hover,
.light-theme .nav-tab.active {
  color: #1d1d1f !important;
}

.light-theme .user-credits {
  color: #1d1d1f !important;
  background: linear-gradient(135deg, rgba(233, 30, 156, 0.12), rgba(0, 122, 255, 0.12)) !important;
  border-color: rgba(233, 30, 156, 0.2) !important;
}

.light-theme .user-avatar::before {
  opacity: 0.35;
}

.light-theme .user-avatar svg {
  stroke: var(--text-secondary);
}

.light-theme .theme-icon svg {
  stroke: var(--text-secondary);
}

/* Model selector tabs */
.light-theme .model-tab {
  background: #f0f0f5 !important;
  border-color: #d1d1d6 !important;
  color: var(--text-secondary) !important;
}

.light-theme .model-tab:hover {
  background: #e8e8ed !important;
  color: #1d1d1f !important;
  border-color: #c7c7cc !important;
}

.light-theme .model-tab.active {
  /* Keep gradient for active state */
  color: #ffffff !important;
}

/* Control panels and sidebars */
.light-theme .control-panel,
.light-theme .control-section,
.light-theme .video-controls,
.light-theme .marketplace-sidebar,
.light-theme .edit-sidebar,
.light-theme .channel-sidebar {
  background: #ffffff !important;
  border-color: #d1d1d6 !important;
}

.light-theme .control-panel-header,
.light-theme .section-header {
  background: #f5f5f7 !important;
  border-color: #d1d1d6 !important;
}

/* Cards and containers */
.light-theme .character-card,
.light-theme .marketplace-card,
.light-theme .resource-card,
.light-theme .starthere-card,
.light-theme .credit-card,
.light-theme .policy-card,
.light-theme .member-item,
.light-theme .channel-manage-item,
.light-theme .transaction-row {
  background: #ffffff !important;
  border-color: #d1d1d6 !important;
  color: #1d1d1f !important;
}

.light-theme .character-card:hover,
.light-theme .marketplace-card:hover,
.light-theme .resource-card:hover {
  background: #f5f5f7 !important;
  border-color: #c7c7cc !important;
}

/* Inputs and textareas */
.light-theme input,
.light-theme textarea,
.light-theme select,
.light-theme .prompt-input,
.light-theme .prompt-textarea,
.light-theme .login-input,
.light-theme .chat-input,
.light-theme .search-input,
.light-theme .giphy-search-input {
  background: #f0f0f5 !important;
  border-color: #d1d1d6 !important;
  color: #1d1d1f !important;
}

/* Placeholders. The !important is gone: every other placeholder rule in the
   app already names --text-muted (css/base.css, css/library.css, the two
   inline blocks in index.html), so whichever of them wins the cascade now
   paints the same readable grey this one does. */
.light-theme input::placeholder,
.light-theme textarea::placeholder {
  color: var(--text-muted);
}

.light-theme input:focus,
.light-theme textarea:focus,
.light-theme select:focus {
  border-color: #007aff !important;
}

/* Modals */
.light-theme .login-modal-content,
.light-theme .modal-content,
.light-theme .settings-modal-content,
.light-theme .age-modal-content,
.light-theme .character-modal-content,
.light-theme .resource-modal-content,
.light-theme .policies-modal-content,
.light-theme .rules-modal-content,
.light-theme .crop-modal-content,
.light-theme .giphy-modal-content,
.light-theme .channel-manage-content,
.light-theme .starthere-modal-content,
.light-theme .starthere-form-container,
.light-theme .resource-form-container {
  background: #ffffff !important;
  border-color: #d1d1d6 !important;
  color: #1d1d1f !important;
}

.light-theme .modal-header,
.light-theme .settings-modal-header,
.light-theme .character-modal-header,
.light-theme .resource-modal-header,
.light-theme .channel-manage-header {
  border-color: #d1d1d6 !important;
}

.light-theme .modal-title,
.light-theme .settings-modal-title,
.light-theme .login-modal-title {
  color: #1d1d1f !important;
}

/* Image output areas and grids */
.light-theme .output-area,
.light-theme .video-preview-container,
.light-theme .main-content,
.light-theme .marketplace-main,
.light-theme .image-history-grid,
.light-theme .video-history-grid {
  background: #f5f5f7 !important;
}

.light-theme .output-placeholder,
.light-theme .video-placeholder {
  background: #e8e8ed !important;
  color: var(--text-secondary) !important;
  border-color: #d1d1d6 !important;
}

/* History items. `.edit-history-grid` and `.edit-history-item` were dropped
   from these two rules in batch 5: neither class exists anywhere in the app —
   they matched nothing in index.html, in js/ or in any other stylesheet. */
.light-theme .history-item,
.light-theme .video-history-item {
  background: #ffffff !important;
  border-color: #d1d1d6 !important;
}

/* Buttons - secondary/outline styles */
.light-theme .btn-secondary,
.light-theme .filter-btn,
.light-theme .tab-btn,
.light-theme .subtab-btn,
.light-theme .resource-filter-btn,
.light-theme .education-subtab {
  background: #e8e8ed !important;
  color: #1d1d1f !important;
  border-color: #d1d1d6 !important;
}

.light-theme .filter-btn:hover,
.light-theme .tab-btn:hover,
.light-theme .filter-btn.active,
.light-theme .tab-btn.active,
.light-theme .education-subtab.active {
  background: #d1d1d6 !important;
}

/* Close buttons */
.light-theme .modal-close,
.light-theme .settings-modal-close,
.light-theme .members-panel-close,
.light-theme .channel-manage-close {
  background: #e8e8ed !important;
  color: var(--text-secondary) !important;
}

.light-theme .modal-close:hover,
.light-theme .settings-modal-close:hover {
  background: #ff3b30 !important;
  color: #ffffff !important;
}

/* Chat and community */
.light-theme .chat-area,
.light-theme .chat-messages,
.light-theme .education-chat {
  background: #f5f5f7 !important;
}

.light-theme .chat-header {
  background: #ffffff !important;
  border-color: #d1d1d6 !important;
}

.light-theme .chat-message {
  background: #ffffff !important;
}

.light-theme .chat-message-content {
  color: #1d1d1f !important;
}

.light-theme .chat-message-author {
  color: var(--text-secondary) !important;
}

.light-theme .reaction-pill {
  background: #f5f5f7 !important;
  border-color: #d1d1d6 !important;
}

.light-theme .reaction-pill:hover {
  background: #e8e8ed !important;
}

.light-theme .reaction-pill.active {
  background: rgba(255, 46, 187, 0.15) !important;
  border-color: #ff2ebb !important;
}

.light-theme .reaction-pill .reaction-count {
  color: var(--text-secondary) !important;
}

.light-theme .add-reaction-btn {
  border-color: #d1d1d6 !important;
  color: var(--text-muted) !important;
}

.light-theme .add-reaction-btn:hover {
  background: #f5f5f7 !important;
}

.light-theme .emoji-picker-popup {
  background: #ffffff !important;
  border-color: #d1d1d6 !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
}

.light-theme .emoji-picker-popup button:hover {
  background: #f5f5f7 !important;
}

.light-theme .mention {
  background: rgba(255, 46, 187, 0.15) !important;
}

.light-theme .chat-message.mentioned {
  background: rgba(255, 46, 187, 0.06) !important;
}

.light-theme .mention-autocomplete {
  background: #ffffff !important;
  border-color: #d1d1d6 !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
}

.light-theme .mention-autocomplete-item:hover,
.light-theme .mention-autocomplete-item.selected {
  background: #f5f5f7 !important;
}

.light-theme .mention-autocomplete-name {
  color: #1d1d1f !important;
}

/* Inpaint light theme */
/* The `background` this rule used to force is gone (batch 4): the inpaint
   stage is an EDITING CANVAS, and it now shares the deliberately dark, framed
   ground of #editCanvasWrapper in both themes — see the "editing stage" block
   in css/theme-light-components.css. Painting it #f5f5f7 here made the two
   canvases in the same editor opposite colours, and it was !important, so no
   component rule could reconcile them. The border-color is kept: the <= 900px
   rule in css/responsive.css does give this wrapper a real border. */
.light-theme .inpaint-canvas-wrapper {
  border-color: #d1d1d6 !important;
}

.light-theme .inpaint-sidebar {
  background: #ffffff !important;
  border-color: #d1d1d6 !important;
}

.light-theme .inpaint-header h2 {
  color: #1d1d1f !important;
}

.light-theme .inpaint-control-label {
  color: var(--text-secondary) !important;
}

.light-theme .inpaint-textarea,
.light-theme .inpaint-select {
  background: #f5f5f7 !important;
  border-color: #d1d1d6 !important;
  color: #1d1d1f !important;
}

.light-theme .inpaint-btn.secondary {
  background: #f5f5f7 !important;
  border-color: #d1d1d6 !important;
  color: #1d1d1f !important;
}

.light-theme .inpaint-btn.secondary:hover {
  background: #e8e8ed !important;
}

.light-theme .inpaint-mode-toggle {
  background: #f5f5f7 !important;
  border-color: #d1d1d6 !important;
}

/* :not(.active) added and the value deepened (batch 4). This rule used to
   reach the SELECTED half of the toggle as well, painting #6e6e73 on the
   accent gradient at 1.27:1; and #6e6e73 on the toggle's own light ground is
   4.15:1, which fails on its own. The selected half is inked white by
   css/theme-light-components.css, which this no longer outranks. */
.light-theme .inpaint-mode-btn:not(.active) {
  color: #4a4a4f !important;
}

.light-theme .inpaint-divider {
  background: #d1d1d6 !important;
}

.light-theme .inpaint-result-section {
  background: #f5f5f7 !important;
  border-color: #d1d1d6 !important;
}

.light-theme .inpaint-result-header h3 {
  color: #1d1d1f !important;
}

.light-theme .inpaint-result-placeholder {
  color: #999 !important;
}

.light-theme .chat-input-area {
  background: #ffffff !important;
  border-color: #d1d1d6 !important;
}

.light-theme .channel-item {
  color: var(--text-secondary) !important;
}

.light-theme .channel-item:hover,
.light-theme .channel-item.active {
  background: #e8e8ed !important;
  color: #1d1d1f !important;
}

.light-theme .channel-section-title {
  color: var(--text-muted) !important;
}

/* Members panel */
.light-theme .members-panel {
  background: #ffffff !important;
  border-color: #d1d1d6 !important;
}

.light-theme .members-panel-header {
  border-color: #d1d1d6 !important;
}

.light-theme .member-stat {
  background: #f5f5f7 !important;
}

/* User menu dropdown */
.light-theme .user-menu {
  background: #ffffff !important;
  border-color: #d1d1d6 !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15) !important;
}

.light-theme .user-menu-item {
  color: #1d1d1f !important;
}

.light-theme .user-menu-item:hover {
  background: #e8e8ed !important;
}

/* Dropdowns and selects */
.light-theme .model-dropdown,
.light-theme .aspect-dropdown,
.light-theme .character-dropdown,
.light-theme .dropdown-content {
  background: #ffffff !important;
  border-color: #d1d1d6 !important;
}

.light-theme .dropdown-option,
.light-theme .model-option,
.light-theme .aspect-option {
  color: #1d1d1f !important;
}

.light-theme .dropdown-option:hover,
.light-theme .model-option:hover,
.light-theme .aspect-option:hover {
  background: #e8e8ed !important;
}

/* Sliders */
.light-theme .slider-container {
  background: #f5f5f7 !important;
}

/* Slider track. The !important is retired: nothing after this file paints a
   range track, and the two sliders that style their own (the Fanvue composer's
   and the Edit page's) set `accent-color`, which this does not touch. */
.light-theme input[type="range"] {
  background: #d1d1d6;
}

/* Text colors.

   BATCH 5 RETIRED THE THREE BLANKET ELEMENT RULES that used to live here:

     .light-theme h1, .light-theme h2, .light-theme h3, .light-theme h4  #1d1d1f
     .light-theme p, .light-theme span, .light-theme label               #1d1d1f
     .light-theme small                                                  #8e8e93

   They painted an element by TAG, on any surface, with no idea what was behind
   it. On a white page that was right by accident. On the dark panels the light
   audit was about it produced the worst rows in the whole report: the
   app-update banner's `<span>`s at 1.02:1, `.library-item-overlay-meta` at
   1.25:1, Creator Studio's `<h1>` at 1.16:1 — near-black ink on a near-black
   panel. They also outranked every component rule (a tag adds specificity that
   a bare `.class` cannot beat), so the components that needed a different
   colour could not have one. Removing them hands each component back its own
   colour; where a component genuinely relied on the blanket value, it now says
   so itself in css/theme-light-components.css.

   What stays here is class-based and therefore surface-aware. */
.light-theme .section-title,
.light-theme .control-label {
  color: #1d1d1f !important;
}

.light-theme .subtitle,
.light-theme .description,
.light-theme .helper-text,
.light-theme .login-modal-subtitle {
  color: var(--text-secondary) !important;
}

/* Muted text. Names the token rather than repeating its value: batch 5
   darkened --text-muted from #8e8e93 (2.67:1 on --bg-tertiary — below 4.5:1
   against every surface in the light palette) to #636368, which clears 4.5:1
   on all of them. */
.light-theme .text-muted,
.light-theme .muted {
  color: var(--text-muted);
}

/* Scrollbars for light theme */
.light-theme ::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.light-theme ::-webkit-scrollbar-track {
  background: #f0f0f5;
}

.light-theme ::-webkit-scrollbar-thumb {
  background: #c7c7cc;
  border-radius: 4px;
}

.light-theme ::-webkit-scrollbar-thumb:hover {
  background: #a0a0a5;
}

/* Resource library */
.light-theme .resource-library,
.light-theme .starthere-container {
  background: #f5f5f7 !important;
}

.light-theme .resource-filters {
  background: #ffffff !important;
  border-color: #d1d1d6 !important;
}

/* Caption tab */
.light-theme .caption-container,
.light-theme .caption-chat-area {
  background: #f5f5f7 !important;
}

.light-theme .caption-message {
  background: #ffffff !important;
  color: #1d1d1f !important;
}

.light-theme .caption-message.assistant {
  background: #e8e8ed !important;
}

/* Ensure white text on gradient buttons stays white.
   `.membership-btn` left this group in batch 5: only `.membership-btn.primary`
   carries the gradient. The plain variant is a `--bg-hover` chip, so white on
   it was 1.32:1 — the "Get Supernova" button read as an empty grey pill.
   css/theme-light-components.css gives that variant its own ink. */
.light-theme .generate-btn,
.light-theme .primary-btn,
.light-theme .resource-upgrade-btn,
.light-theme .membership-btn.primary {
  color: #ffffff !important;
}

/* Learn tab top bar (education subtabs) */
.light-theme .education-subtabs {
  background: #ffffff !important;
  border-color: #d1d1d6 !important;
}

.light-theme .education-subtab {
  color: var(--text-secondary) !important;
}

.light-theme .education-subtab:hover {
  background: #e8e8ed !important;
  color: #1d1d1f !important;
}

.light-theme .education-subtab.active {
  background: #e8e8ed !important;
  color: #1d1d1f !important;
  border-color: #ff2ebb !important;
}

/* Image tab bulk action buttons */
.light-theme .bulk-action-btn {
  background: #e8e8ed !important;
  color: #1d1d1f !important;
  border-color: #d1d1d6 !important;
}

.light-theme .bulk-action-btn:hover {
  background: #d1d1d6 !important;
}

.light-theme .bulk-action-btn.select-all {
  background: #e8e8ed !important;
}

.light-theme .bulk-action-btn.select-all:hover {
  background: #d1d1d6 !important;
}

.light-theme .bulk-action-btn.download {
  background: rgba(74, 222, 128, 0.15) !important;
  color: #22c55e !important;
  border-color: rgba(74, 222, 128, 0.3) !important;
}

.light-theme .bulk-action-btn.download:hover {
  background: rgba(74, 222, 128, 0.25) !important;
}

.light-theme .bulk-action-btn.delete {
  background: rgba(255, 68, 68, 0.1) !important;
  color: #ff4444 !important;
  border-color: rgba(255, 68, 68, 0.3) !important;
}

.light-theme .bulk-action-btn.delete:hover {
  background: rgba(255, 68, 68, 0.2) !important;
}

.light-theme .bulk-action-btn.cancel {
  background: #f0f0f5 !important;
  color: var(--text-secondary) !important;
}

.light-theme .bulk-action-btn.cancel:hover {
  background: #e8e8ed !important;
}

/* Caption tab model selector (top right buttons) */
/* #6e6e73 is 4.15:1 on this chip's light ground (batch 4). */
.light-theme .caption-model-tab {
  color: #4a4a4f !important;
}

.light-theme .caption-model-tab:hover {
  color: #1d1d1f !important;
  background: #e8e8ed !important;
}

/* #ff2ebb carries white at 3.3:1 once the page around it is white (batch 4).
   Same hue, walked into the shade: 6.5:1. */
.light-theme .caption-model-tab.active {
  color: #ffffff !important;
  background: #b3106f !important;
}

/* Caption/Edit tool selector container */
.light-theme .tool-selector-container {
  background: #ffffff !important;
  border-color: #d1d1d6 !important;
}

/* Caption tab input bar */
.light-theme .caption-input-container {
  background: #ffffff !important;
  border-color: #d1d1d6 !important;
}

.light-theme .caption-input-wrapper {
  background: #f0f0f5 !important;
  border-color: #d1d1d6 !important;
}

.light-theme .caption-input-wrapper:focus-within {
  border-color: #ff2ebb !important;
}

.light-theme .caption-input {
  color: #1d1d1f !important;
}

.light-theme .caption-input::placeholder {
  color: var(--text-muted) !important;
}

.light-theme .caption-attach-btn {
  color: var(--text-secondary) !important;
}

.light-theme .caption-attach-btn:hover {
  color: #1d1d1f !important;
  background: #e8e8ed !important;
}

.light-theme .caption-send-btn {
  background: var(--lt-accent-gradient) !important;
  color: #ffffff !important;
}

/* Caption messages */
.light-theme .caption-message.user .caption-message-content {
  background: #e8e8ed !important;
}

.light-theme .caption-message-text {
  color: #1d1d1f !important;
}

/* Marketplace page background */
.light-theme .marketplace-page {
  background: #f5f5f7 !important;
}

.light-theme .marketplace-header {
  color: #1d1d1f !important;
}

.light-theme .marketplace-title {
  color: #1d1d1f !important;
}

.light-theme .marketplace-subtitle {
  color: var(--text-secondary) !important;
}

.light-theme .marketplace-tabs {
  background: #ffffff !important;
  border-color: #d1d1d6 !important;
}

.light-theme .marketplace-tab {
  color: var(--text-secondary) !important;
}

.light-theme .marketplace-tab:hover {
  background: #e8e8ed !important;
  color: #1d1d1f !important;
}

.light-theme .marketplace-tab.active {
  background: #e8e8ed !important;
  color: #1d1d1f !important;
}

/* Image output action buttons and containers */
.light-theme .output-actions {
  background: #ffffff !important;
  border-color: #d1d1d6 !important;
}

.light-theme .output-action-btn {
  background: #f0f0f5 !important;
  border-color: #d1d1d6 !important;
  color: #1d1d1f !important;
}

.light-theme .output-action-btn:hover {
  background: #e8e8ed !important;
  border-color: #c7c7cc !important;
}

/* Icon buttons (download, send, delete on images) */
.light-theme .icon-btn {
  background: rgba(0, 0, 0, 0.05) !important;
  color: var(--text-secondary) !important;
}

.light-theme .icon-btn:hover {
  background: rgba(0, 0, 0, 0.1) !important;
  color: #1d1d1f !important;
}

.light-theme .icon-btn.delete-btn:hover {
  background: rgba(255, 68, 68, 0.15) !important;
  color: #ff4444 !important;
}

/* Send-to dropdown menu: light values live with the rest of the menu in
   css/send-to-menu.css, which loads after this file. */

/* Output item overlays - transparent gradient like dark mode */
.light-theme .output-item-overlay {
  background: linear-gradient(to top, rgba(0, 0, 0, 0.6), transparent) !important;
}

.light-theme .output-item-overlay .output-item-info {
  color: #fff !important;
}

.light-theme .output-item-actions .icon-btn {
  background: rgba(0, 0, 0, 0.4) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  color: #fff !important;
}

/* ===========================================
   BILLING PAGE - Light Theme
   =========================================== */

/* Hero section */
.light-theme .billing-hero {
  background: linear-gradient(135deg, #f0f0f5 0%, #e8e8ed 50%, #f0f0f5 100%) !important;
}

.light-theme .billing-hero::before {
  background: radial-gradient(circle, rgba(255, 46, 187, 0.08) 0%, transparent 50%) !important;
}

.light-theme .billing-hero-label {
  color: var(--text-secondary) !important;
}

.light-theme .billing-low-balance {
  background: rgba(248, 113, 113, 0.1) !important;
  border-color: rgba(248, 113, 113, 0.25) !important;
}

/* Credit packages */
.light-theme .credits-package {
  background: linear-gradient(180deg, #ffffff 0%, #f9f9fb 100%) !important;
  border-color: #d1d1d6 !important;
}

.light-theme .credits-package:hover {
  border-color: #ff2ebb !important;
  box-shadow: 0 8px 32px rgba(255, 46, 187, 0.15) !important;
}

.light-theme .credits-package.featured {
  background: linear-gradient(180deg, #fff5fa 0%, #fef5f9 100%) !important;
  border-color: #ff2ebb !important;
}

.light-theme .package-name {
  color: var(--text-muted) !important;
}

.light-theme .package-credits {
  color: #1d1d1f !important;
}

.light-theme .package-credits-label {
  color: var(--text-secondary) !important;
}

.light-theme .package-pricing {
  border-color: #e8e8ed !important;
}

.light-theme .package-price {
  color: #1d1d1f !important;
}

.light-theme .package-unit-price {
  color: var(--text-muted) !important;
}

/* Credits reference section */
.light-theme .credits-reference {
  background: #ffffff !important;
  border-color: #d1d1d6 !important;
}

.light-theme .credits-reference-title {
  color: #1d1d1f !important;
}

.light-theme .credits-reference-item {
  background: #f5f5f7 !important;
}

.light-theme .credits-reference-item-name {
  color: var(--text-secondary) !important;
}

.light-theme .credits-reference-item-unit {
  color: var(--text-muted) !important;
}

/* Transaction section */
.light-theme .transaction-section {
  background: #ffffff !important;
  border-color: #d1d1d6 !important;
}

.light-theme .transaction-header {
  border-color: #e8e8ed !important;
}

.light-theme .transaction-header-title {
  color: #1d1d1f !important;
}

.light-theme .transaction-view-toggle {
  background: #f0f0f5 !important;
}

.light-theme .transaction-view-btn {
  color: var(--text-muted) !important;
}

.light-theme .transaction-view-btn.active {
  background: #ffffff !important;
  color: #1d1d1f !important;
}

.light-theme .transaction-table th {
  background: #f5f5f7 !important;
  color: var(--text-secondary) !important;
}

.light-theme .transaction-table td {
  color: #1d1d1f !important;
  border-color: #e8e8ed !important;
}

.light-theme .transaction-table tr:hover td {
  background: #f9f9fb !important;
}

.light-theme .transaction-description {
  color: var(--text-secondary) !important;
}

/* Transaction cards (mobile) */
.light-theme .transaction-cards {
  background: #e8e8ed !important;
}

.light-theme .transaction-card {
  background: #ffffff !important;
}

.light-theme .transaction-card-desc {
  color: var(--text-secondary) !important;
}

.light-theme .transaction-card-date {
  color: var(--text-muted) !important;
}

/* Trust section */
.light-theme .billing-trust {
  background: #f5f5f7 !important;
  border-color: #e8e8ed !important;
}

.light-theme .billing-trust-item {
  color: var(--text-secondary) !important;
}

.light-theme .billing-trust-divider {
  background: #d1d1d6 !important;
}

/* ===========================================
   ACCOUNT PAGE - Light Theme
   =========================================== */

/* Page background */
.light-theme .account-page {
  background: #f5f5f7 !important;
}

/* Header */
.light-theme .account-header {
  background: #ffffff !important;
}

.light-theme .account-title {
  color: #1d1d1f !important;
}

.light-theme .account-subtitle {
  color: var(--text-secondary) !important;
}

/* Cards */
.light-theme .account-card {
  background: #ffffff !important;
  border-color: #d1d1d6 !important;
}

.light-theme .account-card-header {
  background: #f5f5f7 !important;
  border-color: #e8e8ed !important;
}

.light-theme .account-card-title {
  color: #1d1d1f !important;
}

.light-theme .account-card-body {
  background: #ffffff !important;
}

/* Danger zone card */
.light-theme .account-card.danger {
  background: linear-gradient(180deg, #fff5f5 0%, #fff8f8 100%) !important;
  border-color: rgba(255, 68, 68, 0.3) !important;
}

.light-theme .account-card.danger .account-card-header {
  background: #fff0f0 !important;
  border-color: rgba(255, 68, 68, 0.15) !important;
}

/* Form fields */
.light-theme .account-label {
  color: var(--text-secondary) !important;
}

.light-theme .account-input {
  background: #f0f0f5 !important;
  border-color: #d1d1d6 !important;
  color: #1d1d1f !important;
}

.light-theme .account-input::placeholder {
  color: var(--text-muted) !important;
}

.light-theme .account-input:focus {
  border-color: #ff2ebb !important;
  background: #ffffff !important;
}

.light-theme .account-input:disabled {
  background: #e8e8ed !important;
  color: var(--text-muted) !important;
}

.light-theme .account-hint {
  color: var(--text-muted) !important;
}

/* Buttons */
.light-theme .account-btn {
  background: #e8e8ed !important;
  color: #1d1d1f !important;
  border-color: #d1d1d6 !important;
}

.light-theme .account-btn:hover {
  background: #d1d1d6 !important;
}

.light-theme .account-btn.primary {
  background: var(--lt-accent-gradient) !important;
  color: #ffffff !important;
  border: none !important;
}

.light-theme .account-btn.primary:hover {
  box-shadow: 0 4px 12px rgba(255, 46, 187, 0.3) !important;
}

.light-theme .account-btn.secondary {
  background: #f0f0f5 !important;
  border-color: #d1d1d6 !important;
  color: #1d1d1f !important;
}

.light-theme .account-btn.secondary:hover {
  background: #e8e8ed !important;
}

.light-theme .account-btn.danger {
  background: rgba(255, 68, 68, 0.1) !important;
  color: #dc2626 !important;
  border-color: rgba(255, 68, 68, 0.3) !important;
}

.light-theme .account-btn.danger:hover {
  background: rgba(255, 68, 68, 0.2) !important;
}

/* Avatar section */
.light-theme .account-avatar-section {
  background: #f5f5f7 !important;
}

.light-theme .account-avatar {
  border-color: #d1d1d6 !important;
  background: #e8e8ed !important;
}

/* Subscription info */
.light-theme .account-subscription-info {
  background: #f5f5f7 !important;
  border-color: #e8e8ed !important;
}

.light-theme .account-plan-badge {
  background: rgba(255, 46, 187, 0.1) !important;
  color: var(--accent-primary) !important;
}

.light-theme .account-credits-number {
  color: #1d1d1f !important;
}

.light-theme .account-credits-label {
  color: var(--text-secondary) !important;
}

.light-theme .account-detail-label {
  color: var(--text-muted) !important;
}

.light-theme .account-detail-value {
  color: #1d1d1f !important;
}

.light-theme .account-warning-text {
  color: #dc2626 !important;
}

/* Back button */
.light-theme .account-back-btn {
  background: #e8e8ed !important;
  color: #1d1d1f !important;
  border-color: #d1d1d6 !important;
}

.light-theme .account-back-btn:hover {
  background: #d1d1d6 !important;
}

/* Custom Character Orders */
.light-theme .order-item {
  background: #f5f5f7 !important;
  border-color: #e8e8ed !important;
}

.light-theme .order-item:hover {
  background: #f0f0f5 !important;
}

.light-theme .order-name {
  color: #1d1d1f !important;
}

.light-theme .order-date {
  color: var(--text-muted) !important;
}

.light-theme .order-status {
  color: var(--text-secondary) !important;
}