/* ================================================================
   SEO for Tube — App Design System v3.0
   Full SaaS UI: contrast-safe, mobile-first, accessible
   ================================================================ */

/* ── CSS Variables ── */
:root {
  --theme:        #7c3aed;
  --theme-light:  #f1ebfd;
  --theme-mid:    #d7c3f9;
  --theme-border: #cab0f7;
  --theme-dark:   #632ebd;
  --theme-deeper: #4a228e;
  --theme-rgb:    124,58,237;
  --btn:          #7c3aed;
  --btn-hover:    #6d33d0;
  --btn-text:     #ffffff;
  --btn-rgb:      124,58,237;
  --link:         #6d28d9;
  --navbar-bg:    #ffffff;
  --hero-bg:      #3b0764;
  --hero-rgb:     59,7,100;
  --bg:           #f5f3ff;
  --ff:           'Segoe UI', Segoe UI, system-ui, -apple-system, sans-serif;
  --fs:           15px;
  /* Text on gradient/dark backgrounds */
  --on-hero-h:    #ffffff;
  --on-hero-s:    #ededed;
  --on-hero-m:    rgba(255,255,255,0.85);
  /* Text on white/light backgrounds */
  --text-h:       #111827;
  --text-b:       #222222;
  --text-m:       #4b5563;
  --text-s:       #6b7280;
}

/* ── Font — no color/bg override ── */
body { font-family: var(--ff) !important; font-size: var(--fs) !important; }

/* ================================================================
   NAVBAR
   ================================================================ */
.navbar {
  background:          var(--navbar-bg) !important;
  border-bottom-color: var(--theme-border) !important;
}

/* ================================================================
   TOOL TABS
   ================================================================ */
.tool-tab.active {
  background:   var(--theme) !important;
  color:        #ffffff !important;
  border-color: transparent !important;
  box-shadow:   0 3px 12px rgba(var(--theme-rgb),.35) !important;
}
.tool-tab.inactive {
  background:   var(--theme-light) !important;
  color:        var(--theme-dark) !important;
  border-color: var(--theme-border) !important;
}
.tool-tab.inactive:hover {
  background: var(--theme-mid) !important;
  color:      var(--theme-dark) !important;
}

/* ================================================================
   HERO SECTION — full text visibility on gradient
   ================================================================ */
.hero {
  background: linear-gradient(145deg, var(--hero-bg) 0%, #632ebd 45%, var(--theme) 100%) !important;
}

/* All direct text in hero: MUST be white */
.hero h1, .hero h2, .hero h3 {
  color: var(--on-hero-h) !important;
  text-shadow: 0 1px 4px rgba(0,0,0,.25);
}
.hero p, .hero label, .hero span:not(.tool-tab):not(.coins-badge) {
  color: var(--on-hero-s) !important;
}

/* ================================================================
   INPUT CARD (glass card on hero)
   ================================================================ */
.input-card {
  background:    rgba(255,255,255,0.10) !important;
  border:        1.5px solid rgba(255,255,255,0.20) !important;
  border-radius: 20px !important;
  -webkit-backdrop-filter:blur(12px) !important;backdrop-filter:blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
}

/* ================================================================
   INPUTS — always white bg, dark text, visible placeholder
   ================================================================ */
.main-input,
input[type="text"].main-input,
input[type="search"].main-input {
  background:    #ffffff !important;
  color:         #222222 !important;
  border:        2px solid transparent !important;
  border-radius: 14px !important;
  padding:       15px 52px 15px 16px !important;
  font-size:     16px !important;
  box-shadow:    0 4px 16px rgba(0,0,0,.12) !important;
  -webkit-appearance: none !important;
}
.main-input::placeholder { color: #777777 !important; font-size: 14px !important; }
.main-input:focus {
  border-color: var(--theme) !important;
  box-shadow:   0 0 0 3px rgba(var(--theme-rgb),.2) !important;
  outline: none !important;
}

/* Tags textarea (youtube-tags dark theme) */
.tags-box {
  background:    rgba(0,0,0,.35) !important;
  color:         #e2e8f0 !important;
  border:        1.5px solid rgba(255,255,255,.15) !important;
  border-radius: 14px !important;
  font-size:     14px !important;
  line-height:   1.8 !important;
}
.tags-box:focus {
  border-color: var(--theme) !important;
  outline: none !important;
}
.tags-box::placeholder { color: #64748b !important; }

/* Lang/count selects on hero */
.lang-select {
  background:    rgba(255,255,255,.12) !important;
  color:         #ffffff !important;
  border:        1.5px solid rgba(255,255,255,.25) !important;
  border-radius: 10px !important;
  font-size:     13px !important;
  font-weight:   700 !important;
  min-height:    42px !important;
}
.lang-select option { color: #1f2937 !important; background: white !important; }

/* ================================================================
   GENERATE BUTTON — premium gradient, always white text
   ================================================================ */
.gen-btn {
  background:    linear-gradient(135deg, var(--btn), var(--theme-dark)) !important;
  color:         #ffffff !important;
  border:        none !important;
  border-radius: 14px !important;
  font-size:     16px !important;
  font-weight:   800 !important;
  min-height:    54px !important;
  box-shadow:    0 6px 20px rgba(var(--btn-rgb),.4) !important;
  transition:    all .2s !important;
  width:         100% !important;
}
.gen-btn:hover:not(:disabled) {
  background: linear-gradient(135deg, var(--btn-hover), var(--theme-deeper)) !important;
  box-shadow: 0 8px 28px rgba(var(--btn-rgb),.5) !important;
  transform:  translateY(-1px) !important;
}
.gen-btn:active  { transform: scale(.97) !important; }
.gen-btn:disabled { opacity: .65 !important; cursor: not-allowed !important; transform: none !important; }

/* ================================================================
   ACTION BUTTONS
   ================================================================ */
.act-btn:first-child, .act-btn.primary {
  background: var(--btn) !important;
  color:      #ffffff !important;
}

/* ================================================================
   PILL TAGS (suggestions on hero)
   ================================================================ */
.pill-tag {
  background:    rgba(255,255,255,.12) !important;
  border:        1.5px solid rgba(255,255,255,.2) !important;
  color:         #ffffff !important;
  border-radius: 999px !important;
  font-size:     12px !important;
  font-weight:   600 !important;
  padding:       7px 14px !important;
  min-height:    34px !important;
}
.pill-tag:hover {
  background:    rgba(255,255,255,.25) !important;
  border-color:  rgba(255,255,255,.4) !important;
}

/* ================================================================
   RESULT CARDS — white, readable text
   ================================================================ */
.result-card {
  background:    #ffffff !important;
  border:        1px solid var(--theme-border) !important;
  border-radius: 18px !important;
  box-shadow:    0 2px 12px rgba(var(--theme-rgb),.06) !important;
  overflow:      hidden !important;
}
.result-card .card-title,
.result-card h2, .result-card h3 {
  color: var(--text-h) !important;
  font-weight: 800 !important;
}
.result-card p, .result-card li,
.result-card span:not(.diff-easy):not(.diff-medium):not(.diff-hard):not(.ht-chip) {
  color: var(--text-b) !important;
}

/* Stat cards */
.stat-card {
  background:    #ffffff !important;
  border:        1px solid var(--theme-border) !important;
  border-radius: 14px !important;
  box-shadow:    0 2px 8px rgba(var(--theme-rgb),.05) !important;
}
.stat-val  { color: var(--theme) !important; font-weight: 900 !important; }
.stat-lbl  { color: var(--text-s) !important; font-size: 10px !important; font-weight: 600 !important; }
#statTitles, #statKeywords, .stat-num { color: var(--theme) !important; }

/* Copy button */
.copy-btn {
  background:    var(--theme-light) !important;
  color:         var(--theme-dark) !important;
  border:        1px solid var(--theme-border) !important;
  border-radius: 8px !important;
  font-weight:   700 !important;
  font-size:     12px !important;
  padding:       6px 12px !important;
  white-space:   nowrap !important;
}
.copy-btn:hover { background: var(--theme-mid) !important; }

/* Tag chips */
.tag-chip {
  background:    rgba(var(--theme-rgb),.1) !important;
  border:        1px solid rgba(var(--theme-rgb),.22) !important;
  color:         var(--theme-dark) !important;
  border-radius: 999px !important;
  font-weight:   700 !important;
  font-size:     12px !important;
}
.tag-chip:hover {
  background:    rgba(var(--theme-rgb),.22) !important;
  border-color:  var(--theme) !important;
  color:         var(--theme) !important;
}

/* Result textareas */
.result-textarea {
  background:    #fafafa !important;
  color:         #222222 !important;
  border:        1.5px solid var(--theme-border) !important;
  border-radius: 12px !important;
  font-size:     13px !important;
  line-height:   1.7 !important;
}
.result-textarea:focus { border-color: var(--theme) !important; outline: none !important; }

/* ================================================================
   KEYWORD DIFFICULTY BADGES
   ================================================================ */
.diff-easy   { background: #d1fae5 !important; color: #065f46 !important; }
.diff-medium { background: #fef3c7 !important; color: #92400e !important; }
.diff-hard   { background: #fee2e2 !important; color: #991b1b !important; }

/* ================================================================
   COINS BADGE
   ================================================================ */
.coins-badge {
  background:    #fef3c7 !important;
  color:         #92400e !important;
  border:        1.5px solid #fde68a !important;
  border-radius: 999px !important;
  font-weight:   800 !important;
  font-size:     12px !important;
  padding:       4px 10px !important;
  white-space:   nowrap !important;
}

/* ================================================================
   USER MENU DROPDOWN
   ================================================================ */
.user-menu-dropdown {
  background:    #ffffff !important;
  border:        1px solid var(--theme-border) !important;
  border-radius: 16px !important;
  box-shadow:    0 12px 40px rgba(0,0,0,.14) !important;
}
.user-menu-dropdown a { color: #374151 !important; font-size: 13px !important; }
.user-menu-dropdown a:hover { background: var(--theme-light) !important; }

/* ================================================================
   HOW-TO BOX (Tag Generator)
   ================================================================ */
.howto-box {
  background:    rgba(var(--theme-rgb),.06) !important;
  border:        1.5px solid rgba(var(--theme-rgb),.18) !important;
  border-radius: 16px !important;
  padding:       16px 18px !important;
}
.howto-box * { color: var(--text-b) !important; }
.step-badge {
  background: var(--btn) !important;
  color:      #ffffff !important;
}

/* ================================================================
   PRICING / PLAN CARDS
   ================================================================ */
.pricing-card.featured, .plan-badge, .pricing-highlight {
  background:   var(--theme) !important;
  border-color: var(--theme) !important;
  color:        #ffffff !important;
}
.dur-option:hover, .dur-option.selected {
  border-color: var(--theme) !important;
  background:   var(--theme-light) !important;
}

/* ================================================================
   GEN BADGE / HIST BADGE
   ================================================================ */
.gen-badge, .hist-badge {
  background:    var(--theme-light) !important;
  color:         var(--theme-dark) !important;
  border:        1px solid var(--theme-border) !important;
}

/* ================================================================
   TOAST
   ================================================================ */
.toast { background: var(--btn) !important; color: #ffffff !important; }

/* ================================================================
   SCROLLBAR
   ================================================================ */
::-webkit-scrollbar-thumb       { background: var(--theme-border) !important; }
::-webkit-scrollbar-thumb:hover { background: var(--theme) !important; }

/* ================================================================
   CHECKBOXES
   ================================================================ */
input[type="checkbox"]:checked,
input[type="radio"]:checked { accent-color: var(--theme) !important; }

/* ================================================================
   ERROR BOX
   ================================================================ */
.error-box {
  background:    #fef2f2 !important;
  border:        1.5px solid #fecaca !important;
  color:         #dc2626 !important;
  border-radius: 12px !important;
}

/* ================================================================
   MOBILE IMPROVEMENTS (min font sizes, touch targets)
   ================================================================ */
@media(max-width: 640px) {
  .hero h1 { font-size: clamp(1.35rem,6vw,1.75rem) !important; line-height: 1.25 !important; }
  .hero p  { font-size: 13px !important; }
  .gen-btn { font-size: 15px !important; min-height: 52px !important; }
  .main-input { font-size: 16px !important; padding: 14px 48px 14px 14px !important; }
  .result-card { padding: 14px !important; border-radius: 14px !important; }
  .stat-card   { padding: 10px 6px !important; }
  .stat-val    { font-size: 1.4rem !important; }
  .tool-tab    { font-size: 12px !important; padding: 7px 11px !important; }
  .act-btn     { font-size: 12px !important; padding: 8px 12px !important; }
  body         { font-size: 14px !important; }
}

/* ================================================================
   CONTENT IDEAS page text visibility
   ================================================================ */
.idea-card, .idea-item {
  color: var(--text-b) !important;
}
.idea-card h3, .idea-item h3,
.idea-card .title, .idea-item .title {
  color: var(--text-h) !important;
}
.idea-card:hover, .idea-item:hover {
  border-color: var(--theme) !important;
}

/* ================================================================
   CREATOR FINDER / ANALYZER cards
   ================================================================ */
.creator-card, .channel-card {
  background: #ffffff !important;
}
.creator-card:hover, .channel-card:hover {
  border-color: var(--theme) !important;
  box-shadow:   0 4px 20px rgba(var(--theme-rgb),.15) !important;
}