/* ══════════════════════════════════════════════════════════════════════════════
   Seth Brand Tech Care — Tool Pages Shared Theme
   Loaded after inline <style> blocks in standalone tool HTML pages.
   Overrides legacy muted-green (#4CAF50) tokens with the homepage neon-green
   design system (#5ecf78 / void-dark surfaces / Jost body type).
   ══════════════════════════════════════════════════════════════════════════════ */

/* ─── Google Fonts: add Jost (body) + DM Mono (code) ─── */
@import url('https://fonts.googleapis.com/css2?family=Jost:wght@300;400;500;600&family=DM+Mono:wght@400;500&display=swap');

/* ─── Design Token Overrides ─── */
:root {
  /* Backgrounds — void-dark base matching index.html */
  --bg:             #0a0b0e;
  --void:           #0a0b0e;
  --card-bg:        #1f232b;
  --surface:        #181b21;
  --surface-2:      #1f232b;

  /* Neon green accent — matches theme.css / index.html */
  --primary-green:          #5ecf78;
  --green-dim:              rgba(94,207,120,0.10);
  --green-glow:             rgba(94,207,120,0.18);
  --green-trace:            rgba(94,207,120,0.07);
  --border:                 rgba(94,207,120,0.12);
  --border-accent:          rgba(94,207,120,0.28);

  /* Legacy aliases used by tool pages */
  --green:           #5ecf78;
  --red:             #ff5252;
  --orange:          #ff9800;

  /* Text */
  --text-primary:   #f2efe9;
  --text-secondary: rgba(242,239,233,0.82);
  --text-muted:     rgba(242,239,233,0.40);

  /* Typography */
  --font-body:   'Jost', 'DM Sans', sans-serif;
  --font-mono:   'DM Mono', 'Courier New', monospace;
}

/* ─── Base ─── */
html { font-size: 18px; -webkit-font-smoothing: antialiased; }

body {
  background: var(--bg) !important;
  color: var(--text-primary);
  font-family: var(--font-body);
  line-height: 1.65;
}

/* ─── Atmospheric Grid — neon-green tint ─── */
.bg-grid {
  background-image:
    linear-gradient(rgba(94,207,120,0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(94,207,120,0.025) 1px, transparent 1px) !important;
  background-size: 72px 72px !important;
}

/* ─── Glow Orbs ─── */
.orb-1 {
  background: radial-gradient(circle, rgba(94,207,120,0.07), transparent 70%) !important;
}
.orb-2 {
  background: radial-gradient(circle, rgba(94,207,120,0.05), transparent 70%) !important;
}

/* ─── Header / Nav ─── */
header {
  background: rgba(0,0,0,0.88) !important;
  border-bottom: 1px solid rgba(94,207,120,0.10) !important;
  backdrop-filter: blur(20px);
}

nav { height: 64px; }

.nav-links a {
  color: var(--text-secondary);
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 500;
}

.nav-links a:hover,
.nav-links a.nav-active {
  color: var(--text-primary);
  background: rgba(94,207,120,0.07);
}

.nav-links .nav-cta,
.nav-cta {
  background: var(--primary-green) !important;
  color: #000 !important;
  font-weight: 700 !important;
  border-radius: 8px;
}

.nav-links .nav-cta:hover,
.nav-cta:hover {
  background: #56f885 !important;
  transform: translateY(-1px);
}

/* ─── Hero ─── */
.hero h1 {
  background: linear-gradient(135deg, var(--text-primary) 40%, var(--primary-green));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.hero p { color: var(--text-secondary); }

/* ─── Cards / Panels ─── */
.options-grid,
.password-display,
.password-list,
.tool-card,
.result-box,
.output-box,
.card {
  background: var(--card-bg) !important;
  border-color: var(--border) !important;
}

/* ─── Buttons — primary ─── */
.btn-primary {
  background: var(--primary-green) !important;
  color: #000 !important;
}
.btn-primary:hover {
  background: #56f885 !important;
  transform: translateY(-1px);
}

/* ─── Buttons — secondary ─── */
.btn-secondary {
  border-color: var(--border) !important;
  color: var(--text-primary);
}
.btn-secondary:hover {
  background: var(--green-dim) !important;
  border-color: var(--primary-green) !important;
}

/* ─── Copy / Action Buttons ─── */
.copy-btn,
.action-btn,
[onclick*="copy"],
button[aria-label*="copy" i] {
  background: var(--primary-green) !important;
  color: #000 !important;
}
.copy-btn:hover { background: #56f885 !important; }

/* ─── Sliders & Inputs ─── */
.range-input::-webkit-slider-thumb { background: var(--primary-green) !important; }
.range-input::-moz-range-thumb     { background: var(--primary-green) !important; border: none; }
.range-value { color: var(--primary-green) !important; }

input[type="checkbox"] { accent-color: var(--primary-green) !important; }

input[type="text"],
input[type="number"],
input[type="email"],
input[type="search"],
input[type="url"],
textarea,
select {
  background: rgba(13,26,18,0.8);
  border: 1px solid var(--border);
  color: var(--text-primary);
  font-family: var(--font-body);
  border-radius: 8px;
}

input:focus,
textarea:focus,
select:focus {
  border-color: rgba(94,207,120,0.35);
  outline: none;
  box-shadow: 0 0 0 3px rgba(94,207,120,0.10);
}

/* ─── Labels ─── */
.option-label,
.lbl,
label { color: var(--text-primary); }

/* ─── Info / Callout Boxes ─── */
.info-box,
.info-panel,
.callout {
  background: rgba(94,207,120,0.06) !important;
  border-color: rgba(94,207,120,0.20) !important;
  border-radius: 12px;
}
.info-box h3,
.info-box h4 { color: var(--primary-green) !important; }

/* ─── Password history / list items ─── */
.history-item {
  background: rgba(94,207,120,0.04) !important;
  border-radius: 8px;
}

/* ─── Tool page service CTA block ─── */
.card[style*="linear-gradient"],
.card[style*="rgba(76,175,80"] {
  background: linear-gradient(135deg, rgba(94,207,120,0.08), rgba(94,207,120,0.03)) !important;
  border-color: rgba(94,207,120,0.22) !important;
}

/* Inline CTA buttons within service promo cards */
a[style*="background:var(--primary-green)"],
a[style*="background: var(--primary-green)"] {
  background: var(--primary-green) !important;
  color: #000 !important;
}

a[style*="color:var(--primary-green)"],
a[style*="color: var(--primary-green)"] {
  color: var(--primary-green) !important;
  border-color: rgba(94,207,120,0.30) !important;
}

/* ─── Output / Code areas ─── */
.password-output,
.output,
pre,
code {
  font-family: var(--font-mono);
  background: rgba(94,207,120,0.05) !important;
  border-color: rgba(94,207,120,0.18) !important;
}

/* ─── Strength Bars ─── */
.strength-bar.fill.strong  { background: var(--primary-green) !important; }
.strength-bar.fill.medium  { background: #f0c040 !important; }
.strength-bar.fill         { background: #ff5252 !important; }

/* ─── Related-tools list (tl / tli) ─── */
.tl { border-color: var(--border); }
.tli {
  color: var(--text-primary);
  border-bottom-color: var(--border);
}
.tli:hover {
  background: var(--green-dim);
  color: var(--primary-green);
}
.tli .ar { color: var(--primary-green); }

/* ─── Breadcrumb ─── */
.breadcrumb-nav,
.breadcrumb { border-color: var(--border); }
.breadcrumb a { color: var(--text-secondary); }
.breadcrumb a:hover { color: var(--primary-green); }
.breadcrumb .current { color: var(--text-muted); }
.breadcrumb a,
.breadcrumb .current {
  user-select: none;
  -webkit-user-select: none;
}

/* ─── Footer (PHP include) ─── */
footer {
  border-top: 1px solid var(--border);
}

/* ─── Back-to-top button ─── */
#back-to-top {
  background: var(--primary-green) !important;
  color: #000 !important;
}

/* ─── Scrollbar ─── */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: #0a0b0e; }
::-webkit-scrollbar-thumb {
  background: rgba(94,207,120,0.25);
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover { background: rgba(94,207,120,0.40); }

/* ─── Extended catch-all overrides for hardcoded rgba(76,175,80,...) in tool inline styles ─── */

/* Info / example boxes with hardcoded old green */
.info-item,
.example-section,
.example-box,
.tip-box,
.note-box,
.feature-item,
.stat-box {
  background: rgba(94,207,120,0.06) !important;
  border-color: rgba(94,207,120,0.18) !important;
}

/* Focus glow overrides — any element using rgba(76,175,80,0.1) glow */
*:focus {
  outline-color: rgba(94,207,120,0.40) !important;
}
.textarea-input:focus,
.input-field:focus,
input:focus,
textarea:focus,
select:focus {
  border-color: rgba(94,207,120,0.35) !important;
  box-shadow: 0 0 0 3px rgba(94,207,120,0.10) !important;
}

/* Service/promo CTA cards — hardcoded gradient in style attribute */
[style*="rgba(76,175,80"] {
  background: rgba(94,207,120,0.06) !important;
  border-color: rgba(94,207,120,0.20) !important;
}
[style*="rgba(76, 175, 80"] {
  background: rgba(94,207,120,0.06) !important;
  border-color: rgba(94,207,120,0.20) !important;
}

/* Hover states that use old green border */
.btn-secondary:hover { border-color: var(--primary-green) !important; }
.nav-links a:hover { background: rgba(94,207,120,0.07) !important; }

/* ─── Mobile ─── */
@media (max-width: 768px) {
  .nav-links {
    background: rgba(10,11,14,0.94) !important;
    border-bottom: 1px solid var(--border) !important;
  }
  html { font-size: 16px; }
}