/* ============================================================
   SimplyViral — Global Design System (Stitch-Accurate)
   ============================================================ */
/* Inter is loaded via <link> in index.html — no duplicate @import needed */

:root {
  /* Signature gradient — blue to coral */
  --grad-primary:   linear-gradient(135deg, #3c83f6 0%, #FF7F50 100%);
  --grad-primary-hover: linear-gradient(135deg, #2563eb 0%, #ea580c 100%);

  /* Colors */
  --color-primary:     #3c83f6;
  --color-primary-end: #FF7F50;
  --color-bg-page:     #F5F7F8;
  --color-bg-white:    #FFFFFF;
  --color-bg-section:  #FFFFFF;
  --color-bg-dark:     #101722;
  --color-text-dark:   #0D131C;
  --color-text-body:   #49699C;
  --color-text-muted:  #49699C;
  --color-text-subtle: #9ca3af;
  --color-border:      #e2e8f0;
  --color-border-focus:#3c83f6;
  --color-error:       #ef4444;
  --color-error-bg:    rgba(239,68,68,0.08);
  --color-success:     #10b981;
  --color-success-bg:  rgba(16,185,129,0.08);
  --color-blue-icon:   #3c83f6;

  /* Typography */
  --font-family:   'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-xs:   0.75rem;
  --font-sm:   0.875rem;
  --font-base: 1rem;
  --font-lg:   1.125rem;
  --font-xl:   1.25rem;
  --font-2xl:  1.5rem;
  --font-3xl:  1.875rem;
  --font-4xl:  2.25rem;
  --font-5xl:  3rem;

  /* Spacing */
  --sp-1: 0.25rem; --sp-2: 0.5rem;  --sp-3: 0.75rem; --sp-4: 1rem;
  --sp-5: 1.25rem; --sp-6: 1.5rem;  --sp-8: 2rem;    --sp-10: 2.5rem;
  --sp-12: 3rem;   --sp-16: 4rem;   --sp-20: 5rem;   --sp-24: 6rem;

  /* Radii */
  --r-sm:   0.375rem;
  --r-md:   0.5rem;
  --r-lg:   1rem;
  --r-xl:   1.25rem;
  --r-pill: 9999px;

  /* Shadows */
  --shadow-sm:   0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
  --shadow-md:   0 4px 16px rgba(0,0,0,0.08);
  --shadow-card: 0 8px 32px rgba(0,0,0,0.08);
  --shadow-lg:   0 16px 48px rgba(0,0,0,0.12);

  /* Transition */
  --t-fast: all 0.15s ease;
  --t-base: all 0.25s ease;
}

/* ── Reset ──────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; scroll-behavior: smooth; }
body {
  font-family: var(--font-family);
  background: var(--color-bg-page);
  color: var(--color-text-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }
button, input, textarea { font-family: var(--font-family); }
button { cursor: pointer; border: none; outline: none; }
input, textarea { outline: none; }

/* ── Shell ──────────────────────────────────── */
#app { min-height: 100vh; }

/* ── Gradient Button ────────────────────────── */
.btn-grad {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  background: var(--grad-primary);
  color: white;
  font-weight: 700;
  font-size: var(--font-sm);
  padding: 0.7rem 1.6rem;
  border-radius: var(--r-md);
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: var(--t-base);
  box-shadow: 0 4px 14px rgba(60,131,246,0.35);
}
.btn-grad:hover {
  background: var(--grad-primary-hover);
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(60,131,246,0.45);
}

/* ── Outline Button ─────────────────────────── */
.btn-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  background: transparent;
  color: var(--color-text-body);
  font-weight: 600;
  font-size: var(--font-sm);
  padding: 0.7rem 1.6rem;
  border-radius: var(--r-md);
  border: 1.5px solid var(--color-border);
  cursor: pointer;
  text-decoration: none;
  transition: var(--t-fast);
}
.btn-outline:hover { border-color: var(--color-primary); color: var(--color-primary); }

/* ── Form Utilities ─────────────────────────── */
.form-group { display: flex; flex-direction: column; gap: var(--sp-1); }
.form-label { font-size: var(--font-sm); font-weight: 500; color: var(--color-text-dark); }
.form-input {
  width: 100%;
  padding: 0.7rem 0.875rem;
  border: 1.5px solid var(--color-border);
  border-radius: var(--r-md);
  font-size: var(--font-sm);
  color: var(--color-text-dark);
  background: var(--color-bg-white);
  transition: var(--t-fast);
}
.form-input::placeholder { color: var(--color-text-subtle); }
.form-input:focus { border-color: var(--color-border-focus); box-shadow: 0 0 0 3px rgba(99,102,241,0.15); }
.form-input.error { border-color: var(--color-error); box-shadow: 0 0 0 3px var(--color-error-bg); }
.form-error { font-size: var(--font-xs); color: var(--color-error); display: none; margin-top: 2px; }
.form-error.visible { display: block; }

/* ── Password wrapper ───────────────────────── */
.input-wrap { position: relative; }
.input-wrap .form-input { padding-right: 2.5rem; }
.input-wrap .eye-btn {
  position: absolute; right: 0.75rem; top: 50%; transform: translateY(-50%);
  background: none; border: none; cursor: pointer; color: var(--color-text-muted);
  display: flex; padding: 0;
}

/* ── Toast ──────────────────────────────────── */
.toast {
  position: fixed; top: var(--sp-6); right: var(--sp-6);
  padding: var(--sp-4) var(--sp-6); border-radius: var(--r-lg);
  font-size: var(--font-sm); font-weight: 500;
  z-index: 9999; box-shadow: var(--shadow-lg);
  opacity: 0; transform: translateY(-8px);
  transition: var(--t-base); pointer-events: none;
  font-family: var(--font-family);
}
.toast.show { opacity: 1; transform: translateY(0); }
.toast.success { background: var(--color-success-bg); color: var(--color-success); border: 1px solid rgba(16,185,129,0.25); }
.toast.error   { background: var(--color-error-bg);   color: var(--color-error);   border: 1px solid rgba(239,68,68,0.25); }

/* ── Section shared ─────────────────────────── */
.section-label {
  font-size: var(--font-xs); font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.1em; color: var(--color-primary); margin-bottom: var(--sp-2);
  text-align: center;
}
.section-title {
  font-size: clamp(1.6rem, 2.5vw, 2.25rem); font-weight: 800;
  color: var(--color-text-dark); line-height: 1.2; text-align: center;
  margin-bottom: var(--sp-4);
}
.section-sub {
  font-size: var(--font-lg); color: var(--color-text-muted);
  max-width: 560px; margin: 0 auto var(--sp-12); text-align: center; line-height: 1.65;
}

/* ── Spinner ────────────────────────────────── */
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Shared app utilities (needed on every page) ── */

/* Page background used in app shell containers */
.bg-background-light { background-color: #F5F7F8; }

/* Sidebar active nav item — gradient pill */
.sidebar-active-item {
  background: linear-gradient(135deg, #3c83f6 0%, #FF7F50 100%);
  color: white !important;
}

/* Step progress bar fill */
.primary-gradient { background: linear-gradient(135deg, #3c83f6 0%, #FF7F50 100%); }

/* Thin custom scrollbar for sidebar / content panels */
.custom-scrollbar::-webkit-scrollbar { width: 4px; }
.custom-scrollbar::-webkit-scrollbar-track { background: transparent; }
.custom-scrollbar::-webkit-scrollbar-thumb { background: #E5E7EB; border-radius: 10px; }
.custom-scrollbar::-webkit-scrollbar-thumb:hover { background: #cbd5e1; }

/* Hide scrollbar entirely (keep scroll functionality) */
.hide-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
.hide-scrollbar::-webkit-scrollbar { display: none; }

/* Initial app loading state */
#app-loader {
  position: fixed; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: #F5F7F8; z-index: 9999;
}
#app-loader .loader-ring {
  width: 42px; height: 42px;
  border-radius: 50%;
  border: 3px solid #e2e8f0;
  border-top-color: #3c83f6;
  animation: spin 0.7s linear infinite;
}

/* ── Dark Mode ──────────────────────────────────── */
html.dark { color-scheme: dark; }
html.dark body { background: #0f172a; color: #cbd5e1; }
html.dark #app { background: #0f172a; }
html.dark .bg-soft-gray,
html.dark .bg-background-light,
html.dark main[data-purpose="content-view"] { background: #0f172a !important; }
html.dark header { border-color: #1e293b !important; }
html.dark .text-slate-900 { color: #f1f5f9 !important; }
html.dark .text-slate-800 { color: #e2e8f0 !important; }
html.dark .text-slate-700 { color: #cbd5e1 !important; }
html.dark .text-slate-600 { color: #94a3b8 !important; }
html.dark .text-slate-500 { color: #64748b !important; }
html.dark .text-black     { color: #cbd5e1 !important; }
html.dark .text-gray-700  { color: #cbd5e1 !important; }
html.dark .bg-white       { background: #1e293b !important; }
html.dark .bg-slate-50    { background: #1e293b !important; }
html.dark .border-slate-100 { border-color: #334155 !important; }
html.dark .border-slate-200 { border-color: #334155 !important; }
html.dark .border-gray-200  { border-color: #334155 !important; }
html.dark #main-sidebar { background: #1e293b !important; border-color: #334155 !important; }
html.dark #main-sidebar a { color: #cbd5e1 !important; }
html.dark #main-sidebar a:hover { background: #243247 !important; }
html.dark input, html.dark textarea, html.dark select {
  background: #0f172a !important; color: #f1f5f9 !important; border-color: #334155 !important;
}
html.dark input::placeholder, html.dark textarea::placeholder { color: rgba(255,255,255,0.45) !important; }
html.dark input[readonly], html.dark textarea[readonly] { background: #1e293b !important; color: #94a3b8 !important; }
html.dark .form-input { background: #0f172a; color: #f1f5f9; border-color: #334155; }
html.dark .form-input::placeholder { color: rgba(255,255,255,0.45); }
html.dark .hover\:bg-gray-100:hover,
html.dark .hover\:bg-slate-100:hover { background: #243247 !important; }
html.dark .toast.success { background: rgba(16,185,129,0.15); border-color: rgba(16,185,129,0.3); }
html.dark .toast.error   { background: rgba(239,68,68,0.15);  border-color: rgba(239,68,68,0.3); }
/* Project Library */
html.dark .project-section  { background: #1e293b !important; border-color: #334155 !important; }
html.dark .project-header:hover { background: #243247 !important; }
html.dark .project-name     { color: #f1f5f9 !important; }
html.dark .video-card       { background: #1e293b !important; border-color: #334155 !important; }
html.dark .card-title       { color: #f1f5f9 !important; }
html.dark .creator-name     { color: #94a3b8 !important; }
html.dark .card-stats       { border-top-color: #334155 !important; border-bottom-color: #334155 !important; }
html.dark .stat-value       { color: #f1f5f9 !important; }
html.dark .badge-ultra  { background: rgba(254,243,199,0.12) !important; color: #fbbf24 !important; }
html.dark .badge-high   { background: rgba(220,252,231,0.12) !important; color: #34d399 !important; }
html.dark .badge-viral  { background: rgba(219,234,254,0.12) !important; color: #60a5fa !important; }
html.dark .badge-potential { background: #334155 !important; color: #94a3b8 !important; }
html.dark .btn-analyze  { background: #334155 !important; color: #cbd5e1 !important; border-color: #475569 !important; }
html.dark .skeleton-card { background: #1e293b !important; border-color: #334155 !important; }
/* Plans injected styles */
html.dark .gradient-border-thin { background: #1e293b !important; }
/* Tour */
html.dark #sv-tip { background: #1e293b !important; box-shadow: 0 24px 64px rgba(0,0,0,.5) !important; }
html.dark #sv-tip h2, html.dark #sv-tip h3 { color: #f1f5f9 !important; }
html.dark #sv-tip p { color: #94a3b8 !important; }
html.dark #sv-prev { background: #243247 !important; border-color: #334155 !important; color: #94a3b8 !important; }