/* =========================================================
   SaasBuddy — Emerald Prestige Theme (v2.0)
   Global override. Loads AFTER page-inline <style>.
   Palette: Emerald + Gold  •  Type: Syne / Plus Jakarta Sans
   ========================================================= */
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@500;600;700;800&family=Inter:wght@400;500;600;700&display=swap');

:root {
  /* Brand override — kills old crimson everywhere */
  --brand:    #0d7a5f;
  --brand-2:  #064e3b;
  --brand-3:  #052e26;
  --gold:     #c9a84c;
  --gold-2:   #f0d78c;
  --cream:    #f5f0e0;

  /* Surfaces */
  --bg-1: #f8faf7;
  --bg-2: #eef4ef;
  --bg-3: #e2ede4;
  --text: #0b1f18;
  --muted:#4a6157;
  --card: #ffffff;

  --border:       rgba(6,78,59,0.10);
  --border-hover: rgba(201,168,76,0.45);

  --radius: 18px;
  --shadow:    0 10px 30px -12px rgba(6,78,59,0.18);
  --shadow-lg: 0 24px 50px -20px rgba(6,78,59,0.28);
  --shadow-gold: 0 12px 34px -14px rgba(201,168,76,0.55);

  --grad-brand: linear-gradient(135deg,#0d7a5f 0%, #064e3b 100%);
  --grad-gold:  linear-gradient(135deg,#c9a84c 0%, #f0d78c 100%);
  --grad-hero:  linear-gradient(135deg,#052e26 0%, #064e3b 45%, #0d7a5f 100%);
}

/* Body-wide background wash */
html, body {
  background:
    radial-gradient(1100px 550px at 0% -10%, rgba(13,122,95,0.10), transparent 70%),
    radial-gradient(900px 500px at 110% 30%, rgba(201,168,76,0.10), transparent 70%),
    linear-gradient(180deg, var(--bg-1) 0%, var(--bg-2) 100%) !important;
  color: var(--text) !important;
}

body, input, button, textarea, select {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: 'cv11','ss01','ss03';
}

h1, h2, h3, h4, .logo, .hero-title, .section-title, .page-title, .brand, .navbar .logo {
  font-family: 'Manrope','Inter', sans-serif !important;
  letter-spacing: -0.02em;
  font-weight: 700;
}

/* Nav glass */
.navbar { background: rgba(255,255,255,0.78) !important; border-bottom:1px solid var(--border) !important; }
.logo, .navbar .logo { color: var(--brand-2) !important; }

/* Buttons */
.btn-primary, .cta-primary, button.primary, .primary-btn {
  background: var(--grad-brand) !important;
  color: #fff !important;
  border: none !important;
  box-shadow: var(--shadow) !important;
}
.btn-primary:hover, .cta-primary:hover, button.primary:hover {
  box-shadow: var(--shadow-lg) !important;
  transform: translateY(-1px);
}
.btn-secondary, .cta-secondary {
  background: #fff !important;
  color: var(--brand-2) !important;
  border: 1px solid var(--border) !important;
}
.btn-gold, .badge-gold, .cta-gold {
  background: var(--grad-gold) !important;
  color: #3a2c00 !important;
  box-shadow: var(--shadow-gold) !important;
  border:none !important;
}

/* Hero */
.hero, .hero-section, .page-hero {
  background: var(--grad-hero) !important;
  color: var(--cream) !important;
  border-radius: 28px !important;
  position: relative;
  overflow: hidden;
}
.hero::before, .hero-section::before {
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(600px 300px at 15% 20%, rgba(201,168,76,0.22), transparent 60%),
    radial-gradient(500px 260px at 90% 80%, rgba(13,122,95,0.35), transparent 60%);
  pointer-events:none;
}
.hero *, .hero-section * { position: relative; }
.hero h1, .hero-title { color:#fff !important; }
.hero .accent, .hero-title .accent, .gradient-text {
  background: var(--grad-gold) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
}

/* Cards / tool tiles */
.card, .tool-card, .feature-card, .pricing-card, .stat-card, .modal-content, .panel {
  background: var(--card) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow) !important;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.card:hover, .tool-card:hover, .feature-card:hover {
  transform: translateY(-4px);
  border-color: var(--border-hover) !important;
  box-shadow: var(--shadow-lg) !important;
}

/* Tool tile accent bar */
.tool-card { position: relative; overflow: hidden; }
.tool-card::before {
  content:""; position:absolute; top:0; left:0; right:0; height:3px;
  background: var(--grad-gold);
  opacity:.85;
}

/* Badges & pills */
.badge, .pill, .tag, .status-badge {
  border-radius: 999px !important;
  padding: 4px 10px !important;
  font-weight: 600 !important;
  font-size: 12px !important;
}
.badge-success, .status-active { background: rgba(13,122,95,0.12) !important; color: var(--brand-2) !important; }
.badge-warning, .status-warning { background: rgba(201,168,76,0.18) !important; color:#7a5a00 !important; }
.badge-danger, .status-expired  { background: rgba(220,38,38,0.10)  !important; color:#8a1c1c !important; }

/* Forms */
input, textarea, select {
  background: #fff !important;
  color: var(--text) !important;
  border: 1px solid var(--border) !important;
  border-radius: 12px !important;
}
input:focus, textarea:focus, select:focus {
  outline: none !important;
  border-color: var(--brand) !important;
  box-shadow: 0 0 0 4px rgba(13,122,95,0.15) !important;
}

/* Links */
a { color: var(--brand-2); }
a:hover { color: var(--brand); }

/* Admin dark surfaces → emerald tint */
.sidebar, .side-nav, .admin-sidebar {
  background: linear-gradient(180deg,#052e26,#064e3b) !important;
  color: var(--cream) !important;
  border-right: 1px solid rgba(201,168,76,0.15) !important;
}
.sidebar a, .side-nav a, .admin-sidebar a { color: rgba(245,240,224,0.82) !important; }
.sidebar a.active, .sidebar a:hover { color: var(--gold-2) !important; }

/* Tables */
table { border-collapse: separate; border-spacing: 0; }
th { background: var(--bg-3) !important; color: var(--brand-2) !important; font-family:'Manrope',sans-serif !important; }
tr:hover td { background: rgba(13,122,95,0.04) !important; }

/* Extension banner */
.extension-banner, .install-banner {
  background: var(--grad-hero) !important;
  color: var(--cream) !important;
  border: 1px solid rgba(201,168,76,0.30) !important;
  border-radius: 18px !important;
}

/* Kill legacy crimson references */
[style*="#790003"], [style*="#660002"], [style*="#550001"] { color: var(--brand-2) !important; }

/* Scrollbar */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--brand); border-radius: 8px; }
::-webkit-scrollbar-track { background: var(--bg-2); }

/* Subtle animation */
@keyframes floaty { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-6px)} }
.hero .badge, .hero-badge { animation: floaty 4s ease-in-out infinite; }