/* The Flick Critic — Emerald Appeal V1
   Visual color enhancement only.
   Goal: keep the website dark, but bring out richer dark-green / emerald energy
   so the site feels more alive and appealing without changing layout or data logic. */

:root{
  --emerald-bg-1:#061310;
  --emerald-bg-2:#0a1c17;
  --emerald-bg-3:#10261f;
  --emerald-glow-1:rgba(74,181,128,.22);
  --emerald-glow-2:rgba(41,128,96,.18);
  --emerald-border:rgba(88,189,141,.34);
  --emerald-border-soft:rgba(67,152,117,.22);
  --emerald-text:#d7efe4;
  --emerald-accent:#86d4aa;
  --emerald-gold:#e7c56f;
}

/* Subtle sitewide green atmosphere */
html body{
  background:
    radial-gradient(circle at 14% 14%, rgba(39,117,84,.10), transparent 24%),
    radial-gradient(circle at 86% 9%, rgba(45,138,99,.08), transparent 22%),
    radial-gradient(circle at 52% 100%, rgba(26,88,66,.08), transparent 28%),
    linear-gradient(180deg, rgba(5,15,13,.00), rgba(5,15,13,.00))!important;
  color:var(--emerald-text);
}

/* Header / navigation tint */
html body .topbar{
  background:
    linear-gradient(180deg, rgba(4,16,14,.96), rgba(6,20,17,.92))!important;
  border-bottom:1px solid rgba(86,182,136,.16)!important;
  box-shadow:
    0 10px 34px rgba(0,0,0,.18),
    inset 0 -1px 0 rgba(96,194,148,.08)!important;
}

html body .topbar .brand,
html body .topbar .nav > a,
html body .topbar .nav .nav-dropdown__label{
  text-shadow:0 0 10px rgba(41,138,97,.12)!important;
}

/* Make section surfaces more emerald without breaking structure */
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 .hero-stats .stat,
html body .search-card,
html body .footer-grid > div,
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{
  background-color:rgba(8,25,21,.84)!important;
  border-color:var(--emerald-border-soft)!important;
  box-shadow:
    inset 0 1px 0 rgba(184,243,213,.03),
    inset 0 0 0 1px rgba(76,160,120,.04),
    0 12px 34px rgba(0,0,0,.16),
    0 0 0 1px rgba(51,118,92,.05)!important;
}

/* Broad panel fallback for containers that are not using semantic card classes */
html body section,
html body .content-block,
html body .dashboard-block,
html body .overview-card,
html body .insight-panel{
  border-color:rgba(79,167,126,.14);
}

/* Buttons / CTAs */
html body .btn,
html body button,
html body .button,
html body .cta,
html body .pill-button,
html body a.btn,
html body input[type="submit"]{
  box-shadow:
    0 10px 24px rgba(0,0,0,.18),
    inset 0 1px 0 rgba(230,250,241,.06)!important;
}

html body .btn-primary,
html body .primary-btn,
html body .hero-actions .btn:first-child,
html body .cta-primary{
  background:
    linear-gradient(180deg, #1c5d45 0%, #154a37 52%, #10382b 100%)!important;
  border:1px solid rgba(103,198,150,.45)!important;
  color:#eefbf5!important;
}

html body .btn-primary:hover,
html body .primary-btn:hover,
html body .hero-actions .btn:first-child:hover,
html body .cta-primary:hover{
  background:
    linear-gradient(180deg, #257152 0%, #1b5a42 52%, #134432 100%)!important;
  box-shadow:
    0 12px 28px rgba(0,0,0,.22),
    0 0 18px rgba(79,173,128,.16)!important;
}

html body .btn-secondary,
html body .hero-actions .btn:last-child,
html body .cta-secondary{
  background:
    linear-gradient(180deg, rgba(11,32,27,.92), rgba(8,23,20,.92))!important;
  border:1px solid rgba(83,167,129,.26)!important;
  color:#d9f1e5!important;
}

/* Inputs / search / forms */
html body input,
html body select,
html body textarea{
  background-color:rgba(8,25,21,.88)!important;
  border-color:rgba(78,159,122,.26)!important;
  color:#d9efe5!important;
}

html body input:focus,
html body select:focus,
html body textarea:focus{
  border-color:rgba(111,204,157,.58)!important;
  box-shadow:
    0 0 0 3px rgba(67,155,116,.14),
    0 0 16px rgba(58,145,107,.10)!important;
}

/* Tables and dense dashboard areas */
html body table,
html body .data-table,
html body .table-wrap{
  border-color:rgba(73,151,116,.18)!important;
}
html body th{
  background:linear-gradient(180deg, rgba(11,35,28,.95), rgba(9,28,23,.95))!important;
  color:#dbf2e7!important;
  border-color:rgba(81,171,129,.18)!important;
}
html body td{
  border-color:rgba(71,142,109,.12)!important;
}
html body tr:hover td{
  background-color:rgba(20,49,39,.34)!important;
}

/* Section headings and key stats */
html body h1,
html body h2,
html body h3{
  text-shadow:0 0 16px rgba(50,136,101,.08)!important;
}
html body .stat-value,
html body .big-number,
html body .highlight-number{
  color:#eef8f2!important;
  text-shadow:0 0 14px rgba(74,169,124,.10)!important;
}

/* Hyperlinks and quick actions */
html body a{
  transition:color .16s ease, text-shadow .16s ease, transform .16s ease;
}
html body a:hover{
  color:#bfe9d0!important;
  text-shadow:0 0 10px rgba(78,170,128,.10)!important;
}

/* Market ticker / chips / small pills */
html body .market-ticker,
html body .ticker-wrap,
html body .ticker-chip,
html body .badge,
html body .chip,
html body .tag{
  background-color:rgba(10,29,24,.78)!important;
  border-color:rgba(76,158,122,.20)!important;
}

/* Hero remains dark but gains richer green presence */
html body .hero,
html body .page-hero,
html body .portfolio-hero,
html body .movie-detail-hero,
html body .generic-movie-hero{
  box-shadow:inset 0 -80px 120px rgba(7,25,20,.14)!important;
}

/* Footer gets a touch more emerald, keeping cosmic gold intact */
html body .footer{
  background:
    radial-gradient(circle at 15% 25%, rgba(35,102,75,.10), transparent 22%),
    radial-gradient(circle at 84% 14%, rgba(45,127,93,.08), transparent 20%),
    linear-gradient(180deg, rgba(3,10,12,1) 0%, rgba(4,13,12,1) 45%, rgba(2,8,9,1) 100%)!important;
}

/* Preserve existing footer cards but slightly lift the green undertone */
html body .footer-grid > div{
  background-color:rgba(4,13,12,.92)!important;
}

/* Small responsive nudge only for color intensity; no layout changes */
@media (max-width:720px){
  html body .btn-primary,
  html body .primary-btn{
    box-shadow:
      0 8px 18px rgba(0,0,0,.16),
      0 0 14px rgba(79,173,128,.10)!important;
  }
}