/* The Flick Critic — Emerald Green Lift V2
   Purpose: make the site read visibly GREEN instead of nearly black,
   especially in bright rooms, while preserving the dark premium theme.
   Visual-only additive override loaded last. */

:root{
  --lift-bg:#0b2119;
  --lift-bg-2:#102b21;
  --lift-panel:#123126;
  --lift-panel-2:#163a2c;
  --lift-line:rgba(104,206,155,.28);
  --lift-line-strong:rgba(117,220,168,.42);
  --lift-text:#e0f4e9;
  --lift-muted:#b5d0c2;
  --lift-green:#6ecb98;
  --lift-green-bright:#91dfb5;
}

/* The biggest change: stop the page canvas from reading as black. */
html,
html body{
  background:
    radial-gradient(circle at 14% 10%, rgba(57,151,107,.16), transparent 27%),
    radial-gradient(circle at 88% 14%, rgba(48,132,96,.13), transparent 25%),
    radial-gradient(circle at 48% 82%, rgba(35,112,82,.10), transparent 34%),
    linear-gradient(180deg, #0a1d17 0%, #0d251c 44%, #0a1f18 100%)!important;
  color:var(--lift-text)!important;
}

/* Make large page bands visibly green rather than black. */
html body main,
html body .page-wrap,
html body .content-wrap,
html body .site-content,
html body .main-content{
  background:transparent!important;
}

/* Header: clearly deep green, not charcoal. */
html body .topbar{
  background:
    linear-gradient(180deg, rgba(10,36,27,.985) 0%, rgba(8,29,23,.97) 100%)!important;
  border-bottom-color:rgba(104,206,155,.25)!important;
  box-shadow:
    0 12px 34px rgba(0,0,0,.18),
    inset 0 -1px 0 rgba(125,221,172,.10)!important;
}

/* Market ticker becomes a green strip instead of almost black. */
html body .market-ticker,
html body .ticker-wrap{
  background:
    linear-gradient(180deg, rgba(12,42,31,.96), rgba(10,34,27,.96))!important;
  border-top-color:rgba(95,189,143,.15)!important;
  border-bottom-color:rgba(95,189,143,.18)!important;
}

/* Common cards/panels lifted substantially. */
html body .glass,
html body .panel,
html body .card,
html body .section-card,
html body .stat-card,
html body .news-card,
html body .review-card,
html body .movie-card,
html body .stock-card,
html body .prediction-card,
html body .portfolio-card,
html body .signal-card,
html body .table-card,
html body .metric-card,
html body .market-card,
html body .insight-card,
html body .box-office-card,
html body .macro-card,
html body .sentiment-card,
html body .ticker-card,
html body .watchlist-card,
html body .data-card,
html body .chart-card,
html body .overview-card,
html body .insight-panel,
html body .portfolio-panel,
html body .stock-ai-panel,
html body .ai-panel,
html body .results-panel,
html body .critical-mover-card{
  background:
    linear-gradient(180deg, rgba(19,52,40,.94), rgba(14,42,32,.94))!important;
  border-color:var(--lift-line)!important;
  box-shadow:
    inset 0 1px 0 rgba(203,248,226,.045),
    0 14px 34px rgba(0,0,0,.14),
    0 0 0 1px rgba(70,156,115,.035)!important;
}

/* Cards that are typically repeated in grids get a little extra lift. */
html body .movie-card,
html body .review-card,
html body .news-card,
html body .stock-card,
html body .prediction-card,
html body .critical-mover-card{
  background:
    linear-gradient(180deg, rgba(22,60,46,.96), rgba(16,46,36,.96))!important;
}

/* Section backgrounds: subtle green bands so whitespace does not look black. */
html body .section{
  background:
    linear-gradient(180deg, rgba(15,44,34,.22), rgba(10,32,25,.10))!important;
  border-radius:22px;
}

/* Hero still cinematic, but with a green wash in the dark areas. */
html body .hero{
  box-shadow:
    inset 0 -130px 150px rgba(9,42,30,.24),
    inset 0 0 120px rgba(15,64,45,.10)!important;
}
html body .page-hero,
html body .portfolio-hero,
html body .movie-detail-hero,
html body .generic-movie-hero{
  box-shadow:
    inset 0 -100px 130px rgba(9,42,30,.22),
    inset 0 0 90px rgba(15,64,45,.08)!important;
}

/* Buttons should clearly show emerald color. */
html body .btn,
html body button,
html body .button,
html body .cta,
html body a.btn{
  background:
    linear-gradient(180deg, rgba(20,59,45,.98), rgba(14,43,33,.98))!important;
  border-color:rgba(103,199,151,.30)!important;
  color:#e3f6ec!important;
}
html body .btn.primary,
html body .btn-primary,
html body .primary-btn,
html body .hero-actions .btn:first-child,
html body .cta-primary{
  background:
    linear-gradient(180deg, #2d7c59 0%, #236849 52%, #195239 100%)!important;
  border-color:rgba(139,229,181,.58)!important;
  color:#f3fff8!important;
  box-shadow:
    0 10px 24px rgba(0,0,0,.18),
    0 0 18px rgba(74,177,128,.14)!important;
}
html body .btn:hover,
html body button:hover,
html body .button:hover,
html body .cta:hover,
html body a.btn:hover{
  filter:brightness(1.08)!important;
  border-color:rgba(139,229,181,.48)!important;
}

/* Forms / filters */
html body input,
html body select,
html body textarea{
  background:rgba(17,50,38,.95)!important;
  border-color:rgba(96,188,142,.30)!important;
  color:#e2f5eb!important;
}
html body input::placeholder,
html body textarea::placeholder{
  color:#99b9aa!important;
}

/* Tables: very common in stock pages, so lift them noticeably. */
html body table{
  background:rgba(15,45,34,.88)!important;
}
html body th{
  background:
    linear-gradient(180deg, rgba(23,63,48,.98), rgba(17,51,39,.98))!important;
  color:#e4f5ec!important;
  border-color:rgba(105,200,152,.22)!important;
}
html body td{
  background:rgba(15,44,34,.72)!important;
  border-color:rgba(92,172,133,.15)!important;
  color:#d4e9df!important;
}
html body tbody tr:nth-child(even) td{
  background:rgba(18,50,39,.78)!important;
}
html body tbody tr:hover td{
  background:rgba(27,67,52,.90)!important;
}

/* Tabs, chips, filters */
html body .tab,
html body .tabs button,
html body .chip,
html body .badge,
html body .tag,
html body .filter-chip,
html body .pill{
  background:rgba(20,57,44,.90)!important;
  border-color:rgba(102,195,148,.26)!important;
  color:#d2eadf!important;
}
html body .tab.active,
html body .tabs button.active,
html body .filter-chip.active{
  background:rgba(38,105,76,.94)!important;
  border-color:rgba(134,224,174,.48)!important;
  color:#f2fff8!important;
}

/* Text hierarchy: brighten muted copy a little so the whole site feels less dim. */
html body p,
html body .muted,
html body .meta,
html body .subtext,
html body .description{
  color:var(--lift-muted)!important;
}
html body h1,
html body h2,
html body h3,
html body h4{
  color:#edf8f2!important;
}

/* Links get a greener glow while keeping existing gold accents where defined later. */
html body a:hover{
  color:#a9e6c2!important;
}

/* Keep cosmic footer dark, but visibly green-black instead of pure black. */
html body .footer{
  background:
    radial-gradient(circle at 14% 24%, rgba(43,118,85,.14), transparent 25%),
    radial-gradient(circle at 86% 16%, rgba(38,102,76,.10), transparent 22%),
    linear-gradient(180deg, #071713 0%, #081b16 48%, #06130f 100%)!important;
}
html body .footer-grid > div{
  background-color:rgba(10,30,24,.94)!important;
}

/* Mobile still gets the same green lift without extra visual weight. */
@media (max-width:720px){
  html,
  html body{
    background:
      linear-gradient(180deg,#0a1e17,#0d251c 48%,#0a1e17)!important;
  }
}