/*
 * EcomSpy — Universal Theme Override
 * Loaded on every page as the last stylesheet.
 * Overrides hardcoded light-mode colors in individual template <style> blocks.
 */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700;800;900&display=swap');

/* ── Font ── */
*, body, button, input, select, textarea {
  font-family: 'Space Grotesk', -apple-system, sans-serif !important;
}

/* ── Base ── */
html {
  background: linear-gradient(135deg, #060C10 0%, #0A1F18 40%, #050A14 100%) !important;
  min-height: 100%;
}
body {
  background: transparent !important;
  color: #E2E8F0 !important;
}

/* ── Logo ── */
.logo-ecom { font-weight: 400 !important; color: #CBD5E1 !important; }
.logo-spy  { font-weight: 700 !important; color: #00FF88 !important; }
.nav-logo-text, .nav-brand-name { color: #F1F5F9 !important; }

/* ── Nav ── */
nav,
.app-header,
.navbar,
header {
  background: rgba(6,12,16,.97) !important;
  border-bottom: 1px solid #1E293B !important;
  backdrop-filter: blur(12px) !important;
}
.nav-back, .nav-home-btn, .nav-back-btn,
.header-back {
  background: #161F30 !important;
  border-color: #1E293B !important;
  color: #94A3B8 !important;
}
.nav-back:hover, .nav-home-btn:hover, .nav-back-btn:hover,
.header-back:hover {
  background: #1A2236 !important;
  color: #F1F5F9 !important;
  border-color: #334155 !important;
}
.header-logo h1, .header-logo .title { color: #F1F5F9 !important; }
.header-logo .badge {
  background: rgba(0,255,136,.1) !important;
  color: #00FF88 !important;
  border-color: rgba(0,255,136,.25) !important;
}

/* ── Hero ── */
.hero, .panel-hero, .page-hero {
  background: transparent !important;
  border-bottom: none !important;
}
.panel-hero::after, .page-hero::after {
  display: none !important;
}
.hero h1 { color: #FFFFFF !important; }
.hero p, .hero-sub { color: #BCC9DC !important; }
.hero-chip, .hero-badge {
  background: rgba(0,255,136,.1) !important;
  border-color: rgba(0,255,136,.25) !important;
  color: rgba(0,255,136,.9) !important;
}
.platform-chip {
  background: rgba(0,255,136,.08) !important;
  border-color: rgba(0,255,136,.2) !important;
  color: rgba(0,255,136,.9) !important;
}

/* ── Cards ── */
.card, .panel, .result-card, .email-card,
.tool-card, .score-hero, .score-header,
.side-card, .section-card {
  background: #121826 !important;
  border-color: #1E293B !important;
  box-shadow: 0 1px 4px rgba(0,0,0,.5) !important;
}
.card-head, .panel-head, .side-head,
.card-foot, .panel-foot, .email-head {
  background: #161F30 !important;
  border-color: #1E293B !important;
}
.card-title, .panel-title, .side-title,
h1, h2, h3, h4 { color: #F1F5F9 !important; }
p, .card-sub { color: #94A3B8 !important; }

/* ── App main content ── */
.app-main, .main, main,
.content, .container, .wrapper,
#results, .results-wrap {
  background: transparent !important;
  color: #E2E8F0 !important;
}

/* ── Inputs ── */
input, textarea, select {
  background: #161F30 !important;
  border-color: #1E293B !important;
  color: #F1F5F9 !important;
  border-radius: 10px !important;
}
input::placeholder, textarea::placeholder { color: #475569 !important; }
input:focus, textarea:focus, select:focus {
  border-color: rgba(0,255,136,.4) !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(0,255,136,.08) !important;
}
input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus, 
input:-webkit-autofill:active,
input:autofill,
input:autofill:hover,
input:autofill:focus,
input:autofill:active,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
textarea:-webkit-autofill:active,
textarea:autofill,
textarea:autofill:hover,
textarea:autofill:focus,
textarea:autofill:active,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus,
select:-webkit-autofill:active,
select:autofill,
select:autofill:hover,
select:autofill:focus,
select:autofill:active {
  -webkit-box-shadow: 0 0 0 1000px #121826 inset !important;
  box-shadow: 0 0 0 1000px #121826 inset !important;
  -webkit-text-fill-color: #F1F5F9 !important;
  caret-color: #F1F5F9 !important;
  transition: background-color 50000s ease-in-out 0s !important;
}
.input-card, .input-box, .input-row {
  background: rgba(18,24,38,.95) !important;
  border-color: #1E293B !important;
  border-radius: 12px !important;
}
.input-card:focus-within, .input-box:focus-within, .input-row:focus-within {
  border-color: rgba(0,255,136,.4) !important;
}
.input-box input, .input-card input, .input-row input, .url-row input {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
}

/* ── Buttons ── */
.btn-go, .btn-primary,
button[type="submit"],
.submit-btn, .analyze-btn {
  background: #00FF88 !important;
  color: #0A0F1C !important;
  border: none !important;
  box-shadow: 0 2px 8px rgba(0,255,136,.22) !important;
}
.btn-go:hover, .btn-primary:hover,
button[type="submit"]:hover,
.submit-btn:hover, .analyze-btn:hover {
  box-shadow: 0 0 20px rgba(0,255,136,.4) !important;
  opacity: .92 !important;
}
.btn-go:disabled, .btn-primary:disabled { opacity: .35 !important; box-shadow: none !important; }

.btn-copy, .btn-copy-email, .btn-copy-plain, .export-btn, .mini-copy, .dl-btn,
.btn-secondary, .btn-outline {
  background: #1A2236 !important;
  border-color: #1E293B !important;
  color: #CBD5E1 !important;
}
.btn-copy:hover, .btn-copy-email:hover, .btn-copy-plain:hover,
.export-btn:hover, .btn-secondary:hover, .btn-outline:hover {
  background: #1E293B !important;
  color: #F1F5F9 !important;
}
.btn-copy.ok, .btn-copy.copied, .btn-copy-email.ok {
  background: rgba(0,255,136,.1) !important;
  border-color: rgba(0,255,136,.25) !important;
  color: #4ADE80 !important;
}
.dl-btn {
  background: rgba(0,255,136,.1) !important;
  border-color: rgba(0,255,136,.25) !important;
  color: #00FF88 !important;
}
.dl-btn:hover { background: rgba(0,255,136,.15) !important; }

/* ── Nav register/CTA button ── */
.nav-btn-register, .btn-register, .nav-cta {
  background: #00FF88 !important;
  color: #0A0F1C !important;
  border: none !important;
}
.nav-btn-register:hover, .btn-register:hover, .nav-cta:hover {
  box-shadow: 0 0 20px rgba(0,255,136,.4) !important;
  color: #0A0F1C !important;
}
.footer-cta-btn-primary:hover {
  color: #0A0F1C !important;
}
.nav-btn-login, .btn-login {
  background: transparent !important;
  color: #94A3B8 !important;
  border-color: #1E293B !important;
}

/* ── Tabs ── */
.tab-bar, .fw-tab-bar, .email-tab-bar, .phase-tab-bar, .seq-tab-bar,
.tabs, .tab-list {
  background: #161F30 !important;
  border-color: #1E293B !important;
}
.tab, .fw-tab, .email-tab, .phase-tab, .seq-tab, .filter-btn {
  color: #64748B !important;
  background: transparent !important;
}
.tab:hover, .fw-tab:hover, .email-tab:hover, .phase-tab:hover,
.seq-tab:hover, .filter-btn:hover {
  background: #1A2236 !important;
  color: #F1F5F9 !important;
}
.tab.active, .fw-tab.active, .email-tab.active, .phase-tab.active,
.seq-tab.active, .filter-btn.active {
  background: #1A2236 !important;
  color: #F1F5F9 !important;
  box-shadow: 0 1px 4px rgba(0,0,0,.3) !important;
}

/* ── Badges ── */
.badge-green, .pass-badge { background: rgba(0,255,136,.1) !important; color: #4ADE80 !important; border-color: rgba(0,255,136,.25) !important; }
.badge-amber, .warn-badge { background: rgba(251,191,36,.1) !important; color: #FBBF24 !important; border-color: rgba(251,191,36,.25) !important; }
.badge-red,   .fail-badge { background: rgba(248,113,113,.1) !important; color: #F87171 !important; border-color: rgba(248,113,113,.25) !important; }
.badge-blue               { background: rgba(96,165,250,.1) !important;  color: #60A5FA !important; border-color: rgba(96,165,250,.25) !important; }
.badge-gray, .badge-muted { background: #1A2236 !important; color: #94A3B8 !important; border-color: #1E293B !important; }

/* ── Status colors ── */
.pass, .s-good, .col-found { color: #4ADE80 !important; }
.warn, .s-needs            { color: #FBBF24 !important; }
.fail, .s-missing, .col-missing { color: #F87171 !important; }
.muted, .empty-state       { color: #475569 !important; }

/* ── Spin / loader ── */
.spin-ring { border-color: #1E293B; border-top-color: #00FF88 !important; }
#loader p, .loading-wrap p { color: #64748B !important; }

/* ── Error msg ── */
#error-msg, #error-box {
  background: rgba(248,113,113,.1) !important;
  border-color: rgba(248,113,113,.25) !important;
  color: #F87171 !important;
}

/* ── Section eyebrow ── */
.section-eyebrow::after { background: #1E293B !important; }

/* ── Copy area ── */
.copy-area { color: #94A3B8 !important; }
.copy-area strong { color: #F1F5F9 !important; }

/* ── Auth pages ── */
.auth-container, .auth-card, .login-card, .register-card {
  background: #121826 !important;
  border-color: #1E293B !important;
}
.auth-header { background: #0A0F1C !important; border-bottom-color: #1E293B !important; }
label { color: #CBD5E1 !important; }

/* ── Footer ── */
footer, .footer, .site-footer {
  background: #060C10 !important;
  border-top: 1px solid #1E293B !important;
  color: #64748B !important;
}
footer a, .footer a { color: #94A3B8 !important; }
footer a:hover, .footer a:hover { color: #00FF88 !important; }

/* ── Global responsive utilities ── */
@media (max-width: 768px) {
  /* Prevent table overflow on all pages */
  table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* Nav items: hide label text on very small screens if needed */
  nav { padding: 0 12px !important; }
  .nav-tool-name { font-size: 12px !important; max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  /* Hero sections */
  .hero { padding: 32px 16px 28px !important; }
  .hero h1 { font-size: clamp(20px, 5vw, 32px) !important; }

  /* Input rows on mobile — horizontal icon + input, full-width button stacked below */
  .input-box, .input-row, .url-row {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    padding: 6px 12px !important;
    box-sizing: border-box !important;
  }
  .input-box > svg, .input-row > svg, .url-row > svg {
    order: 1 !important;
    margin-right: 4px !important;
  }
  .input-box input, .input-row input, .url-row input {
    order: 2 !important;
    flex: 1 1 0 !important;
    width: 0 !important;
    min-width: 0 !important;
  }
  .input-box > button, .input-row > button, .url-row > button,
  .input-box > .btn-go, .input-row > .btn-go, .url-row > .btn-go,
  .input-box > .check-btn, .input-row > .check-btn, .url-row > .check-btn {
    order: 3 !important;
    flex: 1 0 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    justify-content: center !important;
    margin-top: 4px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  .btn-go, .check-btn, .submit-btn, .analyze-btn, button[type="submit"] {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    justify-content: center !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* General container padding */
  .page-wrap, .results-wrap, .container, .wrapper { padding-left: 14px !important; padding-right: 14px !important; }
}

@media (max-width: 480px) {
  /* Extra small screens */
  .nav-sep { display: none !important; }
  .hero h1 { font-size: clamp(18px, 5vw, 26px) !important; }
  h2 { font-size: clamp(16px, 4vw, 22px) !important; }
}

/* ── 390px Mobile System ── */
@media (max-width: 390px) {
  /* Overflow prevention */
  html, body { overflow-x: hidden !important; max-width: 100vw !important; }

  /* Nav — 16px gutters, proper flex alignment */
  nav {
    padding: 0 16px !important;
    height: 54px !important;
  }
  .nav-left {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    gap: 7px !important;
  }
  .nav-logo, .nav-brand {
    gap: 6px !important;
    min-width: 0 !important;
  }
  .nav-logo-icon, .nav-brand-icon {
    width: 28px !important;
    height: 28px !important;
    flex-shrink: 0 !important;
  }
  .nav-logo-text, .nav-brand-name {
    font-size: 11.5px !important;
    max-width: 54px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
  .nav-sep, .nav-divider { display: none !important; }
  .nav-tool, .nav-tool-name, .nav-page-label {
    font-size: 11px !important;
    max-width: 33vw !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    min-width: 0 !important;
  }
  .nav-back, .nav-home-btn, .nav-back-btn {
    padding: 6px 10px !important;
    font-size: 11px !important;
    flex-shrink: 0 !important;
    white-space: nowrap !important;
    gap: 4px !important;
  }

  /* Universal page containers — consistent 16px side gutters */
  #results,
  .results-wrap,
  .page-wrap,
  .report-wrap,
  .results-body {
    padding-left: 16px !important;
    padding-right: 16px !important;
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Cards — full width, no overflow */
  .card,
  .panel,
  .result-card,
  .email-card,
  .side-card,
  .section-card,
  .brand-card,
  .readiness-card,
  .checklist-col,
  .orb-card,
  .task-card,
  .score-hero,
  .score-header {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  /* Hero */
  .hero, .panel-hero, .page-hero {
    padding: 28px 16px 24px !important;
    box-sizing: border-box !important;
  }
  .hero h1 { font-size: 21px !important; line-height: 1.3 !important; }

  /* Cleaned redundant inline rules at 390px */
}

/* ── Misc text ── */
a { color: #00FF88; }
a:hover { color: #4ADE80; }
code, pre {
  background: #161F30 !important;
  color: #4ADE80 !important;
  border-color: #1E293B !important;
}
hr, .divider { border-color: #1E293B !important; }
.text-muted, .muted-text { color: #64748B !important; }

/* ── Rich In-Page Loading (CRO-report style) ── */
._eo-inner {
  max-width: 640px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 8px 0 40px;
  width: 100%;
}

/* Hero card */
._eo-hero {
  background: linear-gradient(135deg, #0D1524 0%, #111827 100%) !important;
  border: 1px solid #1E293B !important;
  border-radius: 20px;
  padding: 40px 32px 32px;
  text-align: center;
  position: relative;
  overflow: hidden;
  width: 100%;
  box-sizing: border-box;
}
._eo-hero::before {
  content: '';
  position: absolute; top: -60px; left: 50%; transform: translateX(-50%);
  width: 320px; height: 320px; border-radius: 50%;
  background: radial-gradient(circle, rgba(0,255,136,.08) 0%, transparent 70%);
  pointer-events: none;
}
._eo-icon {
  width: 72px; height: 72px; border-radius: 50%;
  margin: 0 auto 20px;
  background: rgba(0,255,136,.1);
  border: 2px solid rgba(0,255,136,.25);
  display: flex; align-items: center; justify-content: center;
  font-size: 30px;
  animation: _eo-ring 2s ease-in-out infinite;
}
@keyframes _eo-ring {
  0%,100% { box-shadow: 0 0 0 0 rgba(0,255,136,.35), 0 0 0 0 rgba(0,255,136,.15); }
  50%      { box-shadow: 0 0 0 12px rgba(0,255,136,.08), 0 0 0 24px rgba(0,255,136,0); }
}
._eo-title {
  font-size: 20px !important; font-weight: 800 !important;
  color: #F1F5F9 !important; letter-spacing: -.3px !important;
  margin: 0 0 6px !important; line-height: 1.3 !important;
}
._eo-sub {
  font-size: 13px !important; color: #64748B !important;
  margin: 0 0 24px !important;
}

/* Progress bar */
._eo-bar-wrap {
  width: 100%; max-width: 420px; margin: 0 auto 28px;
  background: #1E293B; border-radius: 999px; height: 6px; overflow: hidden;
}
._eo-bar-fill {
  height: 100%; border-radius: 999px; width: 0%;
  background: linear-gradient(90deg, #00FF88, #34d399, #6ee7b7);
  transition: width .4s ease;
  animation: _eo-shimmer 1.8s ease-in-out infinite;
}
@keyframes _eo-shimmer {
  0%,100% { filter: brightness(1); }
  50%      { filter: brightness(1.4); }
}

/* Rotating fact */
._eo-fact-wrap {
  min-height: 72px; display: flex; align-items: center; justify-content: center;
}
._eo-fact {
  background: rgba(0,255,136,.06); border: 1px solid rgba(0,255,136,.15);
  border-radius: 14px; padding: 14px 20px;
  max-width: 480px; text-align: center;
  opacity: 0; transform: translateY(8px);
  transition: opacity .4s ease, transform .4s ease;
}
._eo-fact._eo-fact-vis { opacity: 1; transform: translateY(0); }
._eo-fact-stat { font-size: 26px !important; font-weight: 900 !important; color: #00FF88 !important; letter-spacing: -.5px !important; }
._eo-fact-text { font-size: 12px !important; color: #94a3b8 !important; margin-top: 3px !important; line-height: 1.4 !important; }

/* Section checklist */
._eo-checks {
  background: #121826; border: 1px solid #1E293B;
  border-radius: 16px; padding: 20px 24px;
}
._eo-checks-title {
  font-size: 11px !important; font-weight: 700 !important;
  text-transform: uppercase; letter-spacing: .6px;
  color: #475569 !important; margin: 0 0 14px !important;
}
._eo-check-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px;
}
@media(max-width:520px){ ._eo-check-grid { grid-template-columns: 1fr; } }
._eo-ci {
  display: flex; align-items: center; gap: 9px;
  font-size: 12px !important; color: #475569 !important; font-weight: 500 !important;
  padding: 7px 10px; border-radius: 8px;
  transition: color .3s, background .3s;
}
._eo-ci._eo-active { color: #00FF88 !important; background: rgba(0,255,136,.06); }
._eo-ci._eo-done   { color: #00FF88 !important; background: rgba(0,255,136,.04); opacity: .6; }
._eo-dot {
  width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0;
  background: #1E293B; transition: background .3s;
}
._eo-ci._eo-active ._eo-dot { background: #00FF88; animation: _eo-dpulse 1s ease infinite; }
._eo-ci._eo-done   ._eo-dot { background: #00FF88; animation: none; }
@keyframes _eo-dpulse { 0%,100% { opacity:1; } 50% { opacity:.3; } }

/* Prevent Chrome autofill white background bug when switching tabs (display none to block) */
.tool-panel, .tab-panel, .ms-tab-panel {
  display: block !important;
  position: absolute !important;
  left: -9999px !important;
  top: -9999px !important;
  visibility: hidden !important;
  opacity: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
}
.tool-panel.active, .tab-panel.active, .ms-tab-panel.active,
.tool-panel[style*="display: block"], .tab-panel[style*="display: block"], .ms-tab-panel[style*="display: block"] {
  display: block !important;
  position: static !important;
  visibility: visible !important;
  opacity: 1 !important;
  height: auto !important;
  overflow: visible !important;
}