:root{
  --reflex-font: "Manrope", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --reflex-bg: #d6d6d4;
  --reflex-bg-soft: #dededc;
  --reflex-bg-mid: #d4d5d5;
  --reflex-text: #11131a;
  --reflex-muted: #6f7888;
  --reflex-soft-text: rgba(17,19,26,0.54);
  color-scheme: light;
}

html[data-theme="dark"]{
  --reflex-bg: #111214;
  --reflex-bg-soft: #15171a;
  --reflex-bg-mid: #181a1d;
  --reflex-text: #f2f3f5;
  --reflex-muted: #a5abb4;
  --reflex-soft-text: rgba(242,243,245,0.62);
  --bg: #111214;
  --card: #1b1d21;
  --card-strong: #202329;
  --modal: #17191d;
  --panel: #1b1d21;
  --panel-strong: #202329;
  --border: rgba(255,255,255,0.1);
  --text: #f2f3f5;
  --soft: #a5abb4;
  --muted: #a5abb4;
  --sidebar: #17191d;
  --sidebar-soft: #a5abb4;
  --sidebar-hover: #24272d;
  --accent: #8b74ff;
  --accent-dark: #a796ff;
  --shadow: 0 10px 24px rgba(0,0,0,0.18);
  color-scheme: dark;
}

html{
  font-family: var(--reflex-font);
}

body{
  font-family: var(--reflex-font);
  color: var(--reflex-text);
}


html[data-theme="dark"] body{
  background: var(--reflex-bg);
  color: var(--reflex-text);
}

html[data-theme="dark"] .reflex-home-body::before,
html[data-theme="dark"] .reflex-home-body::after,
html[data-theme="dark"] body.reflex-ai-body::before,
html[data-theme="dark"] body.reflex-ai-body::after{
  opacity: 0;
  background: none;
}

html[data-theme="dark"] .reflex-sidebar,
html[data-theme="dark"] .dashboard-sidebar{
  background: var(--sidebar);
  border-color: var(--border);
  box-shadow: none;
}

html[data-theme="dark"] .reflex-sidebar-logo,
html[data-theme="dark"] .reflex-mobile-logo,
html[data-theme="dark"] .dashboard-logo,
html[data-theme="dark"] .dashboard-title,
html[data-theme="dark"] .dashboard-panel-head h2,
html[data-theme="dark"] .dashboard-card-value,
html[data-theme="dark"] .dashboard-big-number,
html[data-theme="dark"] .dashboard-history-card h3,
html[data-theme="dark"] .dashboard-language-setting span,
html[data-theme="dark"] .dashboard-theme-setting span,
html[data-theme="dark"] .dashboard-settings-theme span,
html[data-theme="dark"] .model-card h1,
html[data-theme="dark"] .about-section-heading h2,
html[data-theme="dark"] .about-model-card h3,
html[data-theme="dark"] .about-credit-row strong,
html[data-theme="dark"] .plan-title,
html[data-theme="dark"] .price-value,
html[data-theme="dark"] .credits-title,
html[data-theme="dark"] .subscription-status-box strong{
  color: var(--reflex-text);
}

html[data-theme="dark"] .reflex-sidebar-label,
html[data-theme="dark"] .reflex-sidebar-section-head h2,
html[data-theme="dark"] .reflex-sidebar-section-head a,
html[data-theme="dark"] .reflex-sidebar-icon,
html[data-theme="dark"] .dashboard-card-label,
html[data-theme="dark"] .dashboard-info-label,
html[data-theme="dark"] .dashboard-card-meta,
html[data-theme="dark"] .dashboard-subtitle,
html[data-theme="dark"] .dashboard-highlight p,
html[data-theme="dark"] .dashboard-subscription-box p,
html[data-theme="dark"] .dashboard-history-card p,
html[data-theme="dark"] .dashboard-history-card span,
html[data-theme="dark"] .dashboard-form span,
html[data-theme="dark"] .dashboard-form-message,
html[data-theme="dark"] .dashboard-form-hint,
html[data-theme="dark"] .dashboard-theme-setting small,
html[data-theme="dark"] .dashboard-settings-theme small,
html[data-theme="dark"] .model-description,
html[data-theme="dark"] .model-tag,
html[data-theme="dark"] .about-hero-text,
html[data-theme="dark"] .about-panel p,
html[data-theme="dark"] .about-section-heading p,
html[data-theme="dark"] .about-model-card p,
html[data-theme="dark"] .about-credit-note,
html[data-theme="dark"] .about-trust-grid p,
html[data-theme="dark"] .subscription-kicker,
html[data-theme="dark"] .subscription-subtitle,
html[data-theme="dark"] .plan-description,
html[data-theme="dark"] .price-period,
html[data-theme="dark"] .subscription-limits-note,
html[data-theme="dark"] .credits-text,
html[data-theme="dark"] .usage-label{
  color: var(--reflex-muted);
}

html[data-theme="dark"] .reflex-sidebar-link,
html[data-theme="dark"] .reflex-story-card,
html[data-theme="dark"] .reflex-account-menu a,
html[data-theme="dark"] .dashboard-nav-link,
html[data-theme="dark"] .dashboard-setting-btn,
html[data-theme="dark"] .dashboard-soft-btn,
html[data-theme="dark"] .dashboard-secondary-btn,
html[data-theme="dark"] .dashboard-modal-close,
html[data-theme="dark"] .dashboard-icon-btn,
html[data-theme="dark"] .dashboard-modal-exit{
  color: rgba(245,242,234,0.78);
}

html[data-theme="dark"] .reflex-sidebar-link:hover,
html[data-theme="dark"] .reflex-sidebar-link.is-active,
html[data-theme="dark"] .reflex-sidebar-link-primary,
html[data-theme="dark"] .dashboard-nav-link:hover,
html[data-theme="dark"] .dashboard-nav-link.is-active,
html[data-theme="dark"] .dashboard-settings-nav .dashboard-nav-link,
html[data-theme="dark"] .dashboard-settings-nav .dashboard-nav-link:hover{
  background: var(--sidebar-hover);
  color: var(--reflex-text);
  box-shadow: none;
}

html[data-theme="dark"] .reflex-sidebar-link-primary,
html[data-theme="dark"] .reflex-story-card,
html[data-theme="dark"] .reflex-account-menu,
html[data-theme="dark"] .dashboard-layout,
html[data-theme="dark"] .dashboard-card,
html[data-theme="dark"] .dashboard-panel,
html[data-theme="dark"] .dashboard-history-card,
html[data-theme="dark"] .dashboard-info-item,
html[data-theme="dark"] .dashboard-highlight,
html[data-theme="dark"] .dashboard-list-box,
html[data-theme="dark"] .dashboard-subscription-box,
html[data-theme="dark"] .dashboard-language-setting,
html[data-theme="dark"] .dashboard-theme-setting,
html[data-theme="dark"] .model-card,
html[data-theme="dark"] .about-panel,
html[data-theme="dark"] .about-model-card,
html[data-theme="dark"] .about-credit-list,
html[data-theme="dark"] .about-trust-grid p,
html[data-theme="dark"] .pricing-card,
html[data-theme="dark"] .credits-box,
html[data-theme="dark"] .credits-mini-card,
html[data-theme="dark"] .subscription-status-box{
  background: var(--panel-strong);
  border-color: var(--border);
  box-shadow: none;
}

html[data-theme="dark"] .reflex-story-card:hover,
html[data-theme="dark"] .model-card:hover,
html[data-theme="dark"] .about-model-card:hover,
html[data-theme="dark"] .pricing-card:hover{
  background: #24272d;
  border-color: rgba(255,255,255,0.14);
}

html[data-theme="dark"] .reflex-account-menu,
html[data-theme="dark"] .dashboard-modal-box{
  background: rgba(28,27,24,0.98);
  border-color: rgba(255,255,255,0.13);
}

html[data-theme="dark"] .dashboard-topbar{
  background: var(--modal);
}

html[data-theme="dark"] .dashboard-modal{
  background: rgba(5,5,4,0.48);
}

html[data-theme="dark"] .dashboard-form input,
html[data-theme="dark"] .auth-field input{
  background: rgba(255,255,255,0.08);
  color: var(--reflex-text);
}

html[data-theme="dark"] .dashboard-language-switch,
html[data-theme="dark"] .dashboard-theme-switch,
html[data-theme="dark"] .auth-lang-switch,
html[data-theme="dark"] .about-lang-switch{
  background: rgba(255,255,255,0.08);
}

html[data-theme="dark"] .dashboard-language-switch a,
html[data-theme="dark"] .dashboard-theme-switch button,
html[data-theme="dark"] .auth-lang-switch a,
html[data-theme="dark"] .about-lang-switch a{
  color: rgba(245,242,234,0.68);
}

html[data-theme="dark"] .dashboard-language-switch a.is-active,
html[data-theme="dark"] .dashboard-theme-switch button.is-active,
html[data-theme="dark"] .auth-lang-switch a.is-active,
html[data-theme="dark"] .about-lang-switch a.is-active{
  background: rgba(255,255,255,0.16);
  color: var(--reflex-text);
}

html[data-theme="dark"] .composer,
html[data-theme="dark"] .story-nav-btn,
html[data-theme="dark"] .mode-panel{
  background: #1b1d21;
  border: 1px solid var(--border);
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

html[data-theme="dark"] .composer-input,
html[data-theme="dark"] .story-nav-btn{
  color: var(--reflex-text);
}

html[data-theme="dark"] .composer-input::placeholder{
  color: var(--reflex-muted);
}

html[data-theme="dark"] .composer-send,
html[data-theme="dark"] .mode-trigger{
  background: #2d3138;
  color: var(--reflex-text);
}

html[data-theme="dark"] .composer-send:hover,
html[data-theme="dark"] .mode-trigger:hover,
html[data-theme="dark"] .mode-trigger[aria-expanded="true"],
html[data-theme="dark"] .story-nav-btn:hover:not(:disabled){
  background: #343943;
}

html[data-theme="dark"] .mode-badge,
html[data-theme="dark"] .mode-premium-badge,
html[data-theme="dark"] .mode-option:hover,
html[data-theme="dark"] .mode-option.is-selected{
  background: rgba(255,255,255,0.1);
  color: var(--reflex-text);
}

html[data-theme="dark"] .mode-option,
html[data-theme="dark"] .share-btn,
html[data-theme="dark"] .new-back-btn,
html[data-theme="dark"] .new-story-btn{
  color: rgba(245,242,234,0.62);
}

html[data-theme="dark"] .share-btn:hover,
html[data-theme="dark"] .new-back-btn:hover,
html[data-theme="dark"] .new-story-btn:hover{
  background: rgba(255,255,255,0.1);
  color: var(--reflex-text);
}

html[data-theme="dark"] .auth-body,
html[data-theme="dark"] .about-body,
html[data-theme="dark"] .subscription-body{
  background: var(--reflex-bg);
}

html[data-theme="dark"] .auth-card,
html[data-theme="dark"] .auth-nav-link,
html[data-theme="dark"] .about-nav-link,
html[data-theme="dark"] .about-button-ghost,
html[data-theme="dark"] .plan-badge,
html[data-theme="dark"] .plan-btn-secondary,
html[data-theme="dark"] .reflex-settings-btn,
html[data-theme="dark"] .reflex-user-btn{
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.11);
  color: var(--reflex-text);
}

html[data-theme="dark"] .auth-title,
html[data-theme="dark"] .about-hero h1,
html[data-theme="dark"] .subscription-title{
  color: var(--reflex-text);
}

html[data-theme="dark"] .auth-field label,
html[data-theme="dark"] .auth-logo,
html[data-theme="dark"] .about-logo,
html[data-theme="dark"] .reflex-logo,
html[data-theme="dark"] .reflex-nav-link:hover,
html[data-theme="dark"] .reflex-nav-link.is-active,
html[data-theme="dark"] .plan-features li{
  color: var(--reflex-text);
}

html[data-theme="dark"] .reflex-nav-link,
html[data-theme="dark"] .about-kicker,
html[data-theme="dark"] .about-model-name,
html[data-theme="dark"] .about-credit-row span,
html[data-theme="dark"] .auth-subtitle,
html[data-theme="dark"] .auth-switch{
  color: var(--reflex-muted);
}

/* simplified-dark-sidebar-interactions */
html[data-theme="dark"] .reflex-sidebar-toggle-btn,
html[data-theme="dark"] .reflex-mobile-menu-btn{
  background: #202329;
  border-color: var(--border);
  color: var(--reflex-text);
  box-shadow: none;
}

html[data-theme="dark"] .reflex-sidebar-toggle-btn:hover,
html[data-theme="dark"] .reflex-mobile-menu-btn:hover{
  background: #24272d;
  border-color: rgba(255,255,255,0.14);
  transform: none;
  box-shadow: none;
}

html[data-theme="dark"] .reflex-sidebar-link,
html[data-theme="dark"] .reflex-sidebar-icon{
  color: #a9afb8;
}

html[data-theme="dark"] .reflex-sidebar-link:hover,
html[data-theme="dark"] .reflex-sidebar-link.is-active,
html[data-theme="dark"] .reflex-sidebar-link-primary,
html[data-theme="dark"] .reflex-sidebar-link-primary:hover{
  background: #202329;
  border-color: var(--border);
  color: var(--reflex-text);
  transform: none;
  box-shadow: none;
}

html[data-theme="dark"] .reflex-sidebar-link:hover .reflex-sidebar-icon,
html[data-theme="dark"] .reflex-sidebar-link.is-active .reflex-sidebar-icon,
html[data-theme="dark"] .reflex-sidebar-link-primary .reflex-sidebar-icon{
  color: #c2c7d0;
}

html[data-theme="dark"] .reflex-story-card{
  background: #1b1d21;
  border-color: var(--border);
  color: #d5d8de;
  box-shadow: none;
}

html[data-theme="dark"] .reflex-story-card:hover{
  background: #202329;
  border-color: rgba(255,255,255,0.14);
  color: var(--reflex-text);
  transform: none;
  box-shadow: none;
}

html[data-theme="dark"] .reflex-sidebar-recent-tabs{
  background: #17191d;
  border-color: var(--border);
}

html[data-theme="dark"] .reflex-sidebar-recent-tab{
  color: #8f96a3;
  box-shadow: none;
  transform: none;
}

html[data-theme="dark"] .reflex-sidebar-recent-tab:hover{
  background: #202329;
  color: #c2c7d0;
  transform: none;
}

html[data-theme="dark"] .reflex-sidebar-recent-tab.is-active{
  background: #2d3138;
  color: var(--reflex-text);
  box-shadow: none;
}

html[data-theme="dark"] .reflex-account-trigger{
  background: #202329;
  border-color: var(--border);
  color: var(--reflex-text);
  box-shadow: none;
}

html[data-theme="dark"] .reflex-account-trigger:hover,
html[data-theme="dark"] .reflex-account-menu-toggle:checked ~ .reflex-account-trigger{
  background: #24272d;
  border-color: rgba(255,255,255,0.15);
  transform: none;
  box-shadow: none;
}

html[data-theme="dark"] .reflex-account-menu{
  background: #17191d;
  border-color: var(--border);
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

html[data-theme="dark"] .reflex-account-menu a,
html[data-theme="dark"] .reflex-account-trigger{
  color: #c8ccd4;
}

html[data-theme="dark"] .reflex-account-menu a:hover{
  background: #202329;
  color: var(--reflex-text);
  transform: none;
}

html[data-theme="dark"] .reflex-account-menu a > i:first-child,
html[data-theme="dark"] .reflex-account-menu-arrow,
html[data-theme="dark"] .reflex-account-trigger-arrow{
  color: #8f96a3;
}

html[data-theme="dark"] .reflex-account-menu a:hover > i:first-child,
html[data-theme="dark"] .reflex-account-menu a:hover .reflex-account-menu-arrow{
  color: #c2c7d0;
}

html[data-theme="dark"] .reflex-account-menu-title strong,
html[data-theme="dark"] .reflex-sidebar-user-text strong{
  color: var(--reflex-text);
}

html[data-theme="dark"] .reflex-account-menu-title span,
html[data-theme="dark"] .reflex-sidebar-user-text span{
  color: #8f96a3;
}

html[data-theme="dark"] .reflex-account-menu-separator{
  background: rgba(255,255,255,0.08);
}

/* quota-notice-above-composer */
.quota-notice{
  position: absolute;
  left: 50%;
  bottom: calc(100% + 12px);
  z-index: 12;
  width: min(720px, 100%);
  max-width: calc(100vw - 32px);
  min-height: 46px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px 10px 16px;
  border-radius: 18px;
  background: rgba(247,247,248,0.96);
  border: 1px solid rgba(15,17,21,0.08);
  color: #20242c;
  box-shadow: 0 12px 30px rgba(15,17,21,0.1);
  font-size: 0.86rem;
  font-weight: 750;
  line-height: 1.35;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 8px);
  transition: opacity 0.18s ease, transform 0.18s ease;
}

.quota-notice[hidden]{
  display: none !important;
}

.quota-notice.is-visible{
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, 0);
}

.quota-notice-text{
  min-width: 0;
}

.quota-notice-timer{
  flex: 0 0 auto;
  padding: 5px 8px;
  border-radius: 999px;
  background: rgba(15,17,21,0.07);
  color: #4b5563;
  font-size: 0.74rem;
  font-weight: 850;
  white-space: nowrap;
}

.quota-notice-action{
  flex: 0 0 auto;
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 12px;
  border-radius: 999px;
  background: #20242c;
  color: #fff;
  font-size: 0.78rem;
  font-weight: 850;
  text-decoration: none;
  white-space: nowrap;
}

.quota-notice-action:hover{
  background: #11131a;
}

html[data-theme="dark"] .quota-notice{
  background: #202329;
  border-color: var(--border);
  color: var(--reflex-text);
  box-shadow: none;
}

html[data-theme="dark"] .quota-notice-timer{
  background: #17191d;
  color: #c2c7d0;
}

html[data-theme="dark"] .quota-notice-action{
  background: #343943;
  color: var(--reflex-text);
}

html[data-theme="dark"] .quota-notice-action:hover{
  background: #3d4350;
}

@media (max-width: 720px){
  .quota-notice{
    align-items: stretch;
    flex-direction: column;
    gap: 8px;
    padding: 12px;
    border-radius: 16px;
    font-size: 0.82rem;
  }

  .quota-notice-timer,
  .quota-notice-action{
    width: 100%;
    text-align: center;
  }
}