/* =====================================================
   Tools SaaS Platform — Colorful Modern Design v5
   ===================================================== */

@import url('https://fonts.googleapis.com/css2?family=Syne:wght@400;600;700;800&family=DM+Sans:opsz,wght@9..40,300;9..40,400;9..40,500&display=swap');

:root {
  --tsp-primary:        #6366F1;
  --tsp-primary-light:  #EEF2FF;
  --tsp-secondary:      #8B5CF6;
  --tsp-accent:         #06B6D4;
  --tsp-accent2:        #F43F5E;
  --tsp-success:        #10B981;
  --tsp-warning:        #F59E0B;
  --tsp-danger:         #EF4444;
  --tsp-text:           #0F172A;
  --tsp-text-muted:     #64748B;
  --tsp-bg:             #F8FAFF;
  --tsp-card:           #FFFFFF;
  --tsp-border:         #E2E8F0;
  --tsp-radius:         14px;
  --tsp-shadow:         0 1px 3px rgba(99,102,241,.06), 0 4px 20px rgba(99,102,241,.08);
  --tsp-shadow-hover:   0 8px 16px rgba(99,102,241,.14), 0 20px 40px rgba(139,92,246,.12);
  --tsp-font-head:      'Syne', 'Segoe UI', system-ui, sans-serif;
  --tsp-font:           'DM Sans', 'Segoe UI', system-ui, sans-serif;
  /* Dark theme */
  --tsp-dark-bg:        #0A0A0F;
  --tsp-dark-surface:   #13131A;
  --tsp-dark-surface2:  #1C1C26;
  --tsp-dark-border:    rgba(255,255,255,0.06);
  --tsp-dark-text:      #F0F0F8;
  --tsp-dark-muted:     #8A8AA0;
  --tsp-dark-dim:       #555568;
  /* Header gradient tokens */
  --tsp-header-grad:    linear-gradient(135deg, #0EA5E9 0%, #6366F1 40%, #8B5CF6 70%, #EC4899 100%);
  --tsp-hero-grad:      linear-gradient(135deg, #020617 0%, #0F0A2E 35%, #1E1045 65%, #0C1A3A 100%);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: var(--tsp-font); color: var(--tsp-text); background: var(--tsp-bg); line-height: 1.6; }
.tsp-home-wrap { background: var(--tsp-dark-bg); color: var(--tsp-dark-text); }

/* ── Layout ─────────────────────────────────────────── */
.tsp-wrap       { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
.tsp-section    { padding: 56px 0; }
.tsp-section-sm { padding: 28px 0; }

/* ── Tool Header ─────────────────────────────────────── */
.tsp-tool-header {
  background: linear-gradient(140deg, #1C1730 0%, #2D1B69 50%, #1C1730 100%);
  padding: 56px 0 48px;
  text-align: center;
  position: relative;
  overflow: hidden;
}

/* Per-category vibrant tool header backgrounds */
.tsp-tool-header.tsp-cat-Calculators{background:linear-gradient(135deg,#1E1060 0%,#4C1D95 40%,#6C3EF4 100%);}
.tsp-tool-header.tsp-cat-Calculators::before{background:radial-gradient(ellipse 60% 70% at 20% 50%,rgba(139,92,246,.6) 0%,transparent 65%),radial-gradient(ellipse 50% 60% at 80% 40%,rgba(196,181,253,.3) 0%,transparent 65%);}
.tsp-tool-header.tsp-cat-Text-Tools{background:linear-gradient(135deg,#0C2A3F 0%,#0C4A6E 40%,#0EA5B5 100%);}
.tsp-tool-header.tsp-cat-Text-Tools::before{background:radial-gradient(ellipse 60% 70% at 20% 50%,rgba(6,182,212,.5) 0%,transparent 65%),radial-gradient(ellipse 50% 60% at 80% 40%,rgba(103,232,249,.25) 0%,transparent 65%);}
.tsp-tool-header.tsp-cat-Image-Tools{background:linear-gradient(135deg,#1A0828 0%,#6B21A8 40%,#DB2777 100%);}
.tsp-tool-header.tsp-cat-Image-Tools::before{background:radial-gradient(ellipse 60% 70% at 20% 50%,rgba(219,39,119,.5) 0%,transparent 65%),radial-gradient(ellipse 50% 60% at 80% 40%,rgba(244,114,182,.3) 0%,transparent 65%);}
.tsp-tool-header.tsp-cat-PDF-Tools{background:linear-gradient(135deg,#2D0A0A 0%,#991B1B 40%,#E5431A 100%);}
.tsp-tool-header.tsp-cat-PDF-Tools::before{background:radial-gradient(ellipse 60% 70% at 20% 50%,rgba(239,68,68,.55) 0%,transparent 65%),radial-gradient(ellipse 50% 60% at 80% 40%,rgba(252,165,165,.25) 0%,transparent 65%);}
.tsp-tool-header.tsp-cat-Developer-Tools{background:linear-gradient(135deg,#0A1F3D 0%,#1E3A8A 40%,#2563EB 100%);}
.tsp-tool-header.tsp-cat-Developer-Tools::before{background:radial-gradient(ellipse 60% 70% at 20% 50%,rgba(59,130,246,.55) 0%,transparent 65%),radial-gradient(ellipse 50% 60% at 80% 40%,rgba(147,197,253,.3) 0%,transparent 65%);}
.tsp-tool-header.tsp-cat-SEO-Tools{background:linear-gradient(135deg,#1C0F00 0%,#92400E 40%,#D97706 100%);}
.tsp-tool-header.tsp-cat-SEO-Tools::before{background:radial-gradient(ellipse 60% 70% at 20% 50%,rgba(245,158,11,.5) 0%,transparent 65%),radial-gradient(ellipse 50% 60% at 80% 40%,rgba(253,230,138,.25) 0%,transparent 65%);}
.tsp-tool-header.tsp-cat-Converters{background:linear-gradient(135deg,#150A3D 0%,#5B21B6 40%,#7C3AED 100%);}
.tsp-tool-header.tsp-cat-Converters::before{background:radial-gradient(ellipse 60% 70% at 20% 50%,rgba(124,58,237,.55) 0%,transparent 65%),radial-gradient(ellipse 50% 60% at 80% 40%,rgba(196,181,253,.3) 0%,transparent 65%);}
.tsp-tool-header.tsp-cat-Math-Tools{background:linear-gradient(135deg,#042024 0%,#155E75 40%,#0891B2 100%);}
.tsp-tool-header.tsp-cat-Math-Tools::before{background:radial-gradient(ellipse 60% 70% at 20% 50%,rgba(6,182,212,.5) 0%,transparent 65%),radial-gradient(ellipse 50% 60% at 80% 40%,rgba(103,232,249,.3) 0%,transparent 65%);}
.tsp-tool-header.tsp-cat-Finance-Tools{background:linear-gradient(135deg,#02162A 0%,#075985 40%,#0284C7 100%);}
.tsp-tool-header.tsp-cat-Finance-Tools::before{background:radial-gradient(ellipse 60% 70% at 20% 50%,rgba(14,165,233,.5) 0%,transparent 65%),radial-gradient(ellipse 50% 60% at 80% 40%,rgba(125,211,252,.3) 0%,transparent 65%);}
.tsp-tool-header.tsp-cat-Health-Tools{background:linear-gradient(135deg,#081A10 0%,#14532D 40%,#15803D 100%);}
.tsp-tool-header.tsp-cat-Health-Tools::before{background:radial-gradient(ellipse 60% 70% at 20% 50%,rgba(22,163,74,.55) 0%,transparent 65%),radial-gradient(ellipse 50% 60% at 80% 40%,rgba(134,239,172,.3) 0%,transparent 65%);}
.tsp-tool-header.tsp-cat-Productivity-Tools{background:linear-gradient(135deg,#1A0A00 0%,#7C2D12 40%,#EA580C 100%);}
.tsp-tool-header.tsp-cat-Productivity-Tools::before{background:radial-gradient(ellipse 60% 70% at 20% 50%,rgba(234,88,12,.5) 0%,transparent 65%),radial-gradient(ellipse 50% 60% at 80% 40%,rgba(253,186,116,.3) 0%,transparent 65%);}
.tsp-tool-header.tsp-cat-Social-Media-Tools{background:linear-gradient(135deg,#280A1A 0%,#9D174D 40%,#DB2777 100%);}
.tsp-tool-header.tsp-cat-Social-Media-Tools::before{background:radial-gradient(ellipse 60% 70% at 20% 50%,rgba(219,39,119,.5) 0%,transparent 65%),radial-gradient(ellipse 50% 60% at 80% 40%,rgba(251,182,206,.25) 0%,transparent 65%);}
.tsp-tool-header::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 55% 70% at 15% 50%, rgba(99,102,241,.45) 0%, transparent 65%),
    radial-gradient(ellipse 50% 60% at 85% 40%, rgba(6,182,212,.35) 0%, transparent 65%),
    radial-gradient(ellipse 40% 50% at 50% 100%, rgba(139,92,246,.3) 0%, transparent 60%),
    radial-gradient(ellipse 30% 30% at 70% 10%, rgba(244,63,94,.2) 0%, transparent 55%);
  animation: tspHeaderPulse 6s ease-in-out infinite alternate;
}
.tsp-tool-header::after {
  content: '';
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg, transparent 0%, rgba(255,255,255,.03) 50%, transparent 100%);
  background-size: 200% 100%;
  animation: tspHeaderShimmer 4s linear infinite;
}
@keyframes tspHeaderPulse {
  0%  { opacity: .85; transform: scale(1); }
  100%{ opacity: 1;   transform: scale(1.04); }
}
@keyframes tspHeaderShimmer {
  0%  { background-position: -200% 0; }
  100%{ background-position:  200% 0; }
}
.tsp-tool-header h1 {
  font-size: clamp(1.8rem, 4.5vw, 2.8rem);
  font-weight: 900; color: #fff;
  margin-bottom: 12px; position: relative; z-index: 2;
  text-shadow: 0 0 40px rgba(99,102,241,.5);
  letter-spacing: -.02em;
}
.tsp-tool-header p {
  font-size: 1.08rem; color: rgba(255,255,255,.82);
  max-width: 620px; margin: 0 auto 18px; position: relative; z-index: 2;
  line-height: 1.7;
}
.tsp-badge {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(255,255,255,.2);
  backdrop-filter: blur(8px);
  color: #fff; border: 1px solid rgba(255,255,255,.3);
  font-size: .78rem; font-weight: 600; letter-spacing: .03em;
  padding: 5px 14px; border-radius: 99px;
}
.tsp-badge-premium {
  background: linear-gradient(135deg,#F59E0B,#EF4444);
  color: #fff; border: none;
}

/* ── Breadcrumb ──────────────────────────────────────── */
.tsp-breadcrumb {
  padding: 10px 0; font-size: .82rem;
  background: rgba(255,255,255,.15); backdrop-filter: blur(4px);
}
.tsp-breadcrumb a { color: rgba(255,255,255,.8); text-decoration: none; }
.tsp-breadcrumb a:hover { color: #fff; }
.tsp-breadcrumb span { color: rgba(255,255,255,.6); margin: 0 8px; }

/* ── Buttons ─────────────────────────────────────────── */
.tsp-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 22px; border-radius: 10px; font-weight: 600;
  font-size: .92rem; border: none; cursor: pointer;
  text-decoration: none; transition: all .2s; font-family: var(--tsp-font);
  line-height: 1;
}
.tsp-btn-primary {
  background: linear-gradient(135deg, #4F46E5, #7C3AED);
  color: #fff; box-shadow: 0 4px 14px rgba(79,70,229,.35);
}
.tsp-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(79,70,229,.45); }
.tsp-btn-secondary {
  background: #fff; color: var(--tsp-primary);
  border: 1.5px solid var(--tsp-border);
  box-shadow: 0 1px 3px rgba(0,0,0,.05);
}
.tsp-btn-secondary:hover { border-color: var(--tsp-primary); background: var(--tsp-primary-light); }
.tsp-btn-success {
  background: linear-gradient(135deg,#10B981,#059669);
  color: #fff; box-shadow: 0 4px 14px rgba(16,185,129,.3);
}
.tsp-btn-success:hover { transform: translateY(-2px); }
.tsp-btn-full { width: 100%; }
.tsp-copy-btn {
  background: var(--tsp-primary-light); color: var(--tsp-primary);
  border: 1px solid #C7D2FE; border-radius: 7px;
  padding: 5px 12px; font-size: .78rem; font-weight: 600;
  cursor: pointer; white-space: nowrap; transition: all .15s;
}
.tsp-copy-btn:hover { background: var(--tsp-primary); color: #fff; }

/* ── Forms ───────────────────────────────────────────── */
.tsp-field-group { margin-bottom: 18px; }
.tsp-field-group label {
  display: block; font-size: .85rem; font-weight: 600;
  color: #374151; margin-bottom: 7px; letter-spacing: .01em;
}
.tsp-input, .tsp-select, .tsp-textarea {
  width: 100%; padding: 11px 14px;
  border: 1.5px solid var(--tsp-border); border-radius: 10px;
  font-size: .95rem; font-family: var(--tsp-font); color: var(--tsp-text);
  background: #fff; transition: all .2s; outline: none;
}
.tsp-input:focus, .tsp-select:focus, .tsp-textarea:focus {
  border-color: var(--tsp-primary);
  box-shadow: 0 0 0 3px rgba(79,70,229,.12);
}
.tsp-textarea { resize: vertical; min-height: 120px; line-height: 1.6; }
.tsp-select { cursor: pointer; }

/* ── Tool Card ───────────────────────────────────────── */
/* Each category gets its own gradient color */
.tsp-tool-card {
  background: #fff;
  border: 1.5px solid var(--tsp-border);
  border-radius: var(--tsp-radius);
  padding: 20px 18px 18px;
  text-decoration: none; color: var(--tsp-text);
  display: flex; flex-direction: column; gap: 8px;
  transition: all .25s; position: relative; overflow: hidden;
}
.tsp-tool-card::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--card-accent, linear-gradient(90deg,#4F46E5,#7C3AED));
}
.tsp-tool-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--tsp-shadow-hover);
  border-color: transparent;
}
.tsp-tool-card-icon {
  font-size: 2rem; margin-bottom: 4px;
  width: 52px; height: 52px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 12px;
  background: var(--card-bg, #EEF2FF);
}
.tsp-tool-card-name {
  font-size: .95rem; font-weight: 700; line-height: 1.3;
  color: #0F172A;
}
.tsp-tool-card-desc {
  font-size: .8rem; color: var(--tsp-text-muted); line-height: 1.5;
  flex: 1;
}
.tsp-tool-card-meta {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 4px;
}
.tsp-tool-card-cat {
  font-size: .72rem; font-weight: 600;
  padding: 3px 10px; border-radius: 99px;
  background: var(--card-bg, #EEF2FF);
  color: var(--card-color, #4F46E5);
}
.tsp-tool-card-arrow {
  font-size: .85rem; color: var(--tsp-text-muted);
  transition: transform .2s;
}
.tsp-tool-card:hover .tsp-tool-card-arrow { transform: translateX(4px); }

/* Category color themes for tool cards */
.tsp-cat-Calculators      { --card-accent: linear-gradient(90deg,#4F46E5,#818CF8); --card-bg: #EEF2FF; --card-color: #4F46E5; }
.tsp-cat-Text-Tools       { --card-accent: linear-gradient(90deg,#0EA5E9,#38BDF8); --card-bg: #E0F2FE; --card-color: #0284C7; }
.tsp-cat-Image-Tools      { --card-accent: linear-gradient(90deg,#EC4899,#F472B6); --card-bg: #FCE7F3; --card-color: #DB2777; }
.tsp-cat-PDF-Tools        { --card-accent: linear-gradient(90deg,#EF4444,#F87171); --card-bg: #FEE2E2; --card-color: #DC2626; }
.tsp-cat-Developer-Tools  { --card-accent: linear-gradient(90deg,#10B981,#34D399); --card-bg: #D1FAE5; --card-color: #059669; }
.tsp-cat-SEO-Tools        { --card-accent: linear-gradient(90deg,#F59E0B,#FCD34D); --card-bg: #FEF3C7; --card-color: #D97706; }
.tsp-cat-Converters       { --card-accent: linear-gradient(90deg,#8B5CF6,#A78BFA); --card-bg: #EDE9FE; --card-color: #7C3AED; }
.tsp-cat-Math-Tools       { --card-accent: linear-gradient(90deg,#06B6D4,#67E8F9); --card-bg: #CFFAFE; --card-color: #0891B2; }
.tsp-cat-Finance-Tools    { --card-accent: linear-gradient(90deg,#10B981,#6EE7B7); --card-bg: #D1FAE5; --card-color: #047857; }
.tsp-cat-Health-Tools     { --card-accent: linear-gradient(90deg,#F43F5E,#FB7185); --card-bg: #FFE4E6; --card-color: #E11D48; }
.tsp-cat-Productivity-Tools { --card-accent: linear-gradient(90deg,#EA580C,#FB923C); --card-bg: #FFF7ED; --card-color: #C2410C; }
.tsp-cat-Social-Media-Tools { --card-accent: linear-gradient(90deg,#16A34A,#4ADE80); --card-bg: #F0FDF4; --card-color: #15803D; }

/* ── Tool Grid ───────────────────────────────────────── */
.tsp-tools-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px,1fr));
  gap: 16px;
}

/* ── Tool Box (calculator area) ─────────────────────── */
.tsp-tool-box {
  background: #fff; border-radius: 16px;
  border: 1.5px solid var(--tsp-border);
  padding: 28px; box-shadow: var(--tsp-shadow);
  margin-bottom: 24px;
}

/* ── Results ─────────────────────────────────────────── */
.tsp-result {
  background: linear-gradient(135deg, #F0FDF4, #ECFDF5);
  border: 1.5px solid #6EE7B7;
  border-radius: 14px; padding: 24px;
  margin-top: 20px; text-align: center;
  animation: tspFadeIn .3s ease;
}
.tsp-result-title {
  font-size: .8rem; font-weight: 700; color: #047857;
  text-transform: uppercase; letter-spacing: .08em; margin-bottom: 10px;
}
.tsp-result-value {
  font-size: 2.4rem; font-weight: 900;
  background: linear-gradient(135deg,#4F46E5,#7C3AED);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
}
.tsp-result-unit { font-size: 1rem; color: var(--tsp-text-muted); font-weight: 500; }

.tsp-result-text {
  background: #F8FAFC; border: 1.5px solid var(--tsp-border);
  border-radius: 12px; padding: 16px;
  margin-top: 16px; display: none;
}
.tsp-result-text.visible { display: block; animation: tspFadeIn .3s ease; }
.tsp-result-text textarea {
  width: 100%; background: transparent; border: none; outline: none;
  font-family: inherit; font-size: .9rem; resize: vertical; color: var(--tsp-text);
}

/* ── Error ───────────────────────────────────────────── */
.tsp-error {
  color: #DC2626; font-size: .85rem; font-weight: 500;
  margin-top: 10px; padding: 10px 14px;
  background: #FEF2F2; border: 1px solid #FECACA; border-radius: 8px;
  display: none;
}
.tsp-error.visible { display: block; animation: tspFadeIn .2s ease; }

/* ── How-To Section ──────────────────────────────────── */
.tsp-howto {
  background: #fff;
  border-radius: 20px;
  padding: 32px;
  border: 2px solid #EDE9FE;
  margin-bottom: 24px;
  position: relative;
  overflow: hidden;
}
.tsp-howto::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg,#6C3EF4,#EC4899,#FB923C);
}
.tsp-howto-header {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 24px;
}
.tsp-howto-icon {
  width: 44px; height: 44px; border-radius: 12px;
  background: linear-gradient(135deg,#6C3EF4,#EC4899);
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; flex-shrink: 0;
}
.tsp-howto h3 {
  font-size: 1.15rem; font-weight: 800; color: #1C1730;
  letter-spacing: -.02em; margin: 0;
  font-family: 'Syne', 'Segoe UI', system-ui, sans-serif;
}
.tsp-howto-steps { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.tsp-howto-steps li {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 16px 18px;
  background: #F9F7FF;
  border-radius: 14px;
  border: 1.5px solid #EDE9FE;
  transition: border-color .2s, transform .2s;
}
.tsp-howto-steps li:hover { border-color: #A78BFA; transform: translateX(4px); }
.tsp-howto-step-num {
  width: 28px; height: 28px; border-radius: 50%;
  background: linear-gradient(135deg,#6C3EF4,#EC4899);
  color: #fff; font-size: .8rem; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; margin-top: 1px;
}
.tsp-howto-step-text { font-size: .92rem; line-height: 1.65; color: #374151; font-weight: 500; }
.tsp-howto-step-text strong { color: #1C1730; font-weight: 700; }

/* ── Related Tools ───────────────────────────────────── */
.tsp-related { margin-top: 0; }
.tsp-related-grid {
  display: grid; grid-template-columns: repeat(auto-fill,minmax(180px,1fr)); gap: 12px;
}
.tsp-related-card {
  background: #fff; border: 1.5px solid var(--tsp-border); border-radius: 12px;
  padding: 14px; text-decoration: none; color: var(--tsp-text);
  display: flex; align-items: center; gap: 10px; transition: all .2s;
}
.tsp-related-card:hover { border-color: var(--tsp-primary); transform: translateY(-2px); box-shadow: var(--tsp-shadow); }
.tsp-related-icon { font-size: 1.6rem; flex-shrink: 0; }
.tsp-related-name { font-size: .82rem; font-weight: 600; }

/* ── Archive (Directory) Page ────────────────────────── */
.tsp-archive-header {
  background: linear-gradient(140deg, #060B27 0%, #0E0933 28%, #150D3E 52%, #0A1A30 78%, #040A1E 100%);
  padding: 64px 0 56px; text-align: center; position: relative; overflow: hidden;
}
.tsp-archive-header::before {
  content:''; position:absolute; inset:0;
  background:
    radial-gradient(ellipse 60% 65% at 20% 55%, rgba(14,165,233,.4) 0%, transparent 65%),
    radial-gradient(ellipse 55% 60% at 80% 35%, rgba(99,102,241,.4) 0%, transparent 65%),
    radial-gradient(ellipse 45% 45% at 50% 5%,  rgba(244,63,94,.2) 0%, transparent 60%),
    radial-gradient(ellipse 35% 55% at 50% 100%,rgba(139,92,246,.3) 0%, transparent 60%);
  animation: tspHeaderPulse 7s ease-in-out infinite alternate;
}
.tsp-archive-header::after {
  content:''; position:absolute; inset:0;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.025) 50%, transparent 100%);
  background-size: 200% 100%;
  animation: tspHeaderShimmer 5s linear infinite;
}
.tsp-archive-header h1 {
  font-size: clamp(1.9rem,5.5vw,3.2rem); font-weight: 900; color: #fff;
  position: relative; z-index: 2; margin-bottom: 12px;
  letter-spacing: -.025em;
  text-shadow: 0 0 50px rgba(99,102,241,.5), 0 2px 20px rgba(0,0,0,.4);
}
.tsp-archive-header p { color: rgba(255,255,255,.82); font-size: 1.08rem; position: relative; z-index: 2; line-height: 1.7; }

.tsp-search-bar {
  display: flex; max-width: 560px; margin: 24px auto 0;
  background: #fff; border-radius: 99px;
  box-shadow: 0 8px 36px rgba(0,0,0,.28), 0 0 0 1px rgba(99,102,241,.15); overflow: hidden;
  position: relative;
}
.tsp-search-bar input {
  flex: 1; border: none; outline: none; padding: 14px 20px;
  font-size: 1rem; font-family: var(--tsp-font);
}
.tsp-search-bar button {
  background: linear-gradient(135deg,#4F46E5,#7C3AED);
  color: #fff; border: none; padding: 14px 28px;
  font-weight: 700; cursor: pointer; font-size: .95rem;
  transition: opacity .2s;
}
.tsp-search-bar button:hover { opacity: .9; }

.tsp-cat-nav {
  display: flex; gap: 8px; flex-wrap: wrap;
  margin: 28px 0 20px; justify-content: center;
}
.tsp-cat-nav-btn {
  padding: 8px 18px; border-radius: 99px; font-size: .85rem; font-weight: 600;
  cursor: pointer; border: 1.5px solid var(--tsp-border);
  background: #fff; color: var(--tsp-text-muted); transition: all .2s;
}
.tsp-cat-nav-btn:hover, .tsp-cat-nav-btn.active {
  background: linear-gradient(135deg,#4F46E5,#7C3AED);
  color: #fff; border-color: transparent;
  box-shadow: 0 4px 12px rgba(79,70,229,.3);
}

/* ── Category Section Headers ────────────────────────── */
.tsp-cat-section-header {
  display: flex; align-items: center; gap: 12px;
  margin: 36px 0 16px; padding-bottom: 12px;
  border-bottom: 2px solid var(--tsp-border);
}
.tsp-cat-section-icon {
  width: 44px; height: 44px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem; flex-shrink: 0;
}
.tsp-cat-section-title { font-size: 1.2rem; font-weight: 800; }
.tsp-cat-section-count { font-size: .8rem; color: var(--tsp-text-muted); margin-left: auto; }

/* ── Premium Lock ────────────────────────────────────── */
.tsp-premium-lock {
  background: linear-gradient(135deg,#FFFBEB,#FEF3C7);
  border: 2px dashed #FCD34D; border-radius: 14px;
  padding: 32px; text-align: center;
}
.tsp-premium-lock h3 { font-size: 1.2rem; font-weight: 800; margin-bottom: 8px; }

/* ── Animations ──────────────────────────────────────── */
@keyframes tspFadeIn { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } }
@keyframes tspPulse  { 0%,100% { opacity:1; } 50% { opacity:.6; } }

/* ═══════════════════════════════════════════════════════
   HOMEPAGE STYLES
   ═══════════════════════════════════════════════════════ */

/* Hero */
.tsp-hero {
  position: relative;
  background: linear-gradient(145deg, #020617 0%, #080B24 20%, #0D0A2E 40%, #0F1235 60%, #0A0D28 80%, #020617 100%);
  padding: 100px 0 80px; overflow: hidden;
  border-bottom: 1px solid rgba(99,102,241,.2);
  box-shadow: 0 4px 60px rgba(6,182,212,.08), 0 1px 0 rgba(99,102,241,.15);
}
.tsp-hero::before {
  content:''; position:absolute; inset:0;
  background:
    radial-gradient(ellipse 70% 60% at 10% 60%,  rgba(6,182,212,.38) 0%,  transparent 60%),
    radial-gradient(ellipse 60% 55% at 90% 40%,  rgba(139,92,246,.38) 0%, transparent 60%),
    radial-gradient(ellipse 50% 50% at 50% 10%,  rgba(99,102,241,.32) 0%, transparent 58%),
    radial-gradient(ellipse 40% 40% at 25% 15%,  rgba(14,165,233,.25) 0%, transparent 55%),
    radial-gradient(ellipse 40% 40% at 75% 85%,  rgba(244,63,94,.22) 0%, transparent 55%),
    radial-gradient(ellipse 30% 30% at 60% 50%,  rgba(168,85,247,.18) 0%, transparent 50%);
  animation: tspAuroraShift 10s ease-in-out infinite alternate;
}
.tsp-hero::after {
  content:''; position:absolute; inset:0;
  background:
    radial-gradient(circle 1.2px at 20% 30%, rgba(255,255,255,.75), transparent 2px),
    radial-gradient(circle 1px   at 80% 20%, rgba(255,255,255,.6),  transparent 2px),
    radial-gradient(circle 1.5px at 55% 70%, rgba(255,255,255,.5),  transparent 2px),
    radial-gradient(circle 1px   at 35% 80%, rgba(255,255,255,.45), transparent 2px),
    radial-gradient(circle 1.2px at 90% 65%, rgba(255,255,255,.65), transparent 2px),
    radial-gradient(circle 1px   at 10% 55%, rgba(255,255,255,.5),  transparent 2px),
    radial-gradient(circle 1.5px at 65% 15%, rgba(255,255,255,.7),  transparent 2px),
    radial-gradient(circle 1px   at 45% 45%, rgba(255,255,255,.35), transparent 2px),
    radial-gradient(circle 1px   at 72% 52%, rgba(255,255,255,.5),  transparent 2px),
    radial-gradient(circle 1.2px at 30% 65%, rgba(255,255,255,.55), transparent 2px);
  pointer-events: none;
}
@keyframes tspAuroraShift {
  0%  { opacity: .8; transform: scale(1)    rotate(0deg); }
  50% { opacity: 1;  transform: scale(1.06) rotate(.4deg); }
  100%{ opacity: .9; transform: scale(1.02) rotate(-.3deg); }
}
.tsp-hero-inner { position:relative; z-index:1; text-align:center; }
.tsp-hero-badge {
  display:inline-flex; align-items:center; gap:8px;
  background:rgba(99,102,241,.18); backdrop-filter:blur(16px);
  border:1px solid rgba(99,102,241,.4); color:#E0E7FF;
  padding:7px 20px; border-radius:99px; font-size:.85rem; font-weight:600;
  margin-bottom:24px; letter-spacing:.02em;
}
.tsp-hero-title {
  font-size:clamp(2.2rem,7vw,4rem); font-weight:900; color:#fff;
  line-height:1.1; margin-bottom:18px; letter-spacing:-.02em;
}
.tsp-hero-highlight {
  background: linear-gradient(120deg,#38BDF8 0%,#818CF8 40%,#C084FC 70%,#F472B6 100%);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
.tsp-hero-sub {
  font-size:clamp(1rem,2.5vw,1.2rem); color:rgba(255,255,255,.75);
  max-width:580px; margin:0 auto 36px; line-height:1.7;
}
.tsp-hero-search {
  display:flex; max-width:580px; margin:0 auto;
  background:rgba(255,255,255,.95); border-radius:99px;
  box-shadow:0 16px 48px rgba(0,0,0,.4), 0 0 0 1px rgba(99,102,241,.15); overflow:visible;
  position:relative; align-items:center; padding:6px 6px 6px 22px;
}
.tsp-hero-search-icon { font-size:1.1rem; margin-right:6px; color:#64748B; }
.tsp-hero-search input {
  flex:1; border:none; outline:none; font-size:1rem;
  font-family:var(--tsp-font); background:transparent; padding:8px 0;
  color:#0F172A;
}
.tsp-hero-search button {
  background:linear-gradient(135deg,#6366F1,#8B5CF6,#A855F7); color:#fff;
  border:none; border-radius:99px; padding:12px 28px;
  font-weight:700; cursor:pointer; font-size:.95rem; white-space:nowrap;
  transition:all .2s; box-shadow:0 4px 20px rgba(99,102,241,.5);
}
.tsp-hero-search button:hover { transform:scale(1.03); }
.tsp-search-dropdown {
  position:absolute; top:calc(100% + 10px); left:0; right:0;
  background:#fff; border-radius:16px; box-shadow:0 12px 40px rgba(0,0,0,.15);
  z-index:999; display:none; overflow:hidden; border:1px solid #E2E8F0;
}
.tsp-search-item {
  display:flex; align-items:center; gap:12px;
  padding:12px 18px; text-decoration:none; color:var(--tsp-text);
  transition:background .15s; border-bottom:1px solid #F1F5F9;
}
.tsp-search-item:last-child { border-bottom:none; }
.tsp-search-item:hover { background:#F8FAFF; }
.tsp-search-icon { font-size:1.4rem; }
.tsp-search-item strong { display:block; font-size:.9rem; font-weight:700; }
.tsp-search-item small { font-size:.75rem; color:#64748B; }
.tsp-hero-stats {
  display:flex; justify-content:center; align-items:center;
  gap:0; margin-top:44px; flex-wrap:wrap;
}
.tsp-hero-stat { text-align:center; padding:0 28px; color:#fff; }
.tsp-hero-stat strong { display:block; font-size:1.8rem; font-weight:900; background:linear-gradient(135deg,#38BDF8,#818CF8,#C084FC); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.tsp-hero-stat span { font-size:.82rem; opacity:.7; }
.tsp-hero-stat-divider { width:1px; height:44px; background:rgba(255,255,255,.15); }

/* ── Dark Homepage Styles ──────────────────────────── */
.tsp-home-wrap { background: var(--tsp-dark-bg); color: var(--tsp-dark-text); min-height: 100vh; }
.tsp-home-wrap .tsp-section { padding: 56px 0; }
.tsp-home-wrap .tsp-section-white { background: rgba(255,255,255,.02); }
.tsp-home-wrap .tsp-section-alt   { background: transparent; }

/* Dark section headers */
.tsp-home-wrap .tsp-section-label {
  font-size: .7rem; text-transform: uppercase; letter-spacing: .1em;
  color: var(--tsp-dark-muted); margin-bottom: 8px; font-weight: 500;
  font-family: var(--tsp-font-head);
}
.tsp-home-wrap .tsp-section-header h2 {
  font-family: var(--tsp-font-head); font-weight: 800; color: var(--tsp-dark-text);
  letter-spacing: -.025em;
}
.tsp-home-wrap .tsp-section-header p { color: var(--tsp-dark-muted); }

/* Dark divider */
.tsp-home-divider { height: 1px; background: var(--tsp-dark-border); }

/* Dark Hero */
.tsp-home-wrap .tsp-hero {
  background: linear-gradient(145deg, #020617 0%, #080B24 20%, #0D0A2E 40%, #0F1235 60%, #0A0D28 80%, #020617 100%);
  border-bottom: 1px solid var(--tsp-dark-border);
}
.tsp-home-wrap .tsp-hero-badge {
  background: rgba(99,102,241,.15) !important;
  border: 1px solid rgba(99,102,241,.3) !important;
  color: #B5AAFF !important;
}
.tsp-home-wrap .tsp-hero-title { color: var(--tsp-dark-text) !important; }
.tsp-home-wrap .tsp-hero-highlight {
  background: linear-gradient(120deg,#38BDF8 0%,#818CF8 40%,#C084FC 70%,#F472B6 100%) !important;
  -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; background-clip: text !important;
}
.tsp-home-wrap .tsp-hero-sub { color: rgba(240,240,248,.65) !important; }
.tsp-home-wrap .tsp-hero-stat { color: var(--tsp-dark-text) !important; }
.tsp-home-wrap .tsp-hero-stat span { opacity: .6 !important; }

/* Search bar dark */
.tsp-home-wrap .tsp-hero-search {
  background: rgba(28,28,38,.9) !important;
  border: 1px solid rgba(99,102,241,.35) !important;
  border-radius: 12px !important;
  box-shadow: 0 8px 32px rgba(0,0,0,.4) !important;
}
.tsp-home-wrap .tsp-hero-search input { color: var(--tsp-dark-text) !important; }
.tsp-home-wrap .tsp-hero-search input::placeholder { color: var(--tsp-dark-dim) !important; }

/* Dark category cards */
/* tsp-home-wrap cat-card overrides removed — homepage now uses .tsp-hp scoped styles with inline bg colours */
.tsp-home-wrap .tsp-cat-icon { font-size: 2rem !important; }
/* Per-category colored hover borders */
.tsp-home-wrap .tsp-cat-card[data-color="purple"]:hover { border-color: rgba(124,110,250,.5) !important; box-shadow: 0 8px 24px rgba(124,110,250,.12) !important; }
.tsp-home-wrap .tsp-cat-card[data-color="cyan"]:hover   { border-color: rgba(62,207,207,.5) !important;  box-shadow: 0 8px 24px rgba(62,207,207,.1) !important;  }
.tsp-home-wrap .tsp-cat-card[data-color="orange"]:hover { border-color: rgba(249,112,102,.5) !important; box-shadow: 0 8px 24px rgba(249,112,102,.1) !important; }
.tsp-home-wrap .tsp-cat-card[data-color="red"]:hover    { border-color: rgba(248,113,113,.5) !important; box-shadow: 0 8px 24px rgba(248,113,113,.1) !important; }
.tsp-home-wrap .tsp-cat-card[data-color="blue"]:hover   { border-color: rgba(96,165,250,.5) !important;  box-shadow: 0 8px 24px rgba(96,165,250,.1) !important;  }
.tsp-home-wrap .tsp-cat-card[data-color="green"]:hover  { border-color: rgba(74,222,128,.5) !important;  box-shadow: 0 8px 24px rgba(74,222,128,.1) !important;  }
.tsp-home-wrap .tsp-cat-card[data-color="amber"]:hover  { border-color: rgba(245,190,74,.5) !important;  box-shadow: 0 8px 24px rgba(245,190,74,.1) !important;  }
.tsp-home-wrap .tsp-cat-card[data-color="pink"]:hover   { border-color: rgba(232,121,249,.5) !important; box-shadow: 0 8px 24px rgba(232,121,249,.1) !important; }
.tsp-home-wrap .tsp-cat-card[data-color="sky"]:hover    { border-color: rgba(125,211,252,.5) !important; box-shadow: 0 8px 24px rgba(125,211,252,.1) !important; }
.tsp-home-wrap .tsp-cat-card[data-color="lime"]:hover   { border-color: rgba(163,230,53,.5) !important;  box-shadow: 0 8px 24px rgba(163,230,53,.1) !important;  }

/* Dark popular pills */
.tsp-home-wrap .tsp-popular-card {
  background: var(--tsp-dark-surface) !important;
  border: 1px solid var(--tsp-dark-border) !important;
  color: var(--tsp-dark-text) !important;
  border-radius: 99px !important;
  padding: 9px 16px !important;
}
.tsp-home-wrap .tsp-popular-card:hover {
  background: var(--tsp-dark-surface2) !important;
  border-color: rgba(255,255,255,.12) !important;
  transform: translateY(-1px) !important;
  box-shadow: none !important;
}
.tsp-home-wrap .tsp-popular-icon { background: transparent !important; width: auto !important; height: auto !important; border-radius: 0 !important; }
.tsp-home-wrap .tsp-popular-name { font-size: .82rem !important; }
.tsp-home-wrap .tsp-popular-grid { display: flex !important; flex-wrap: wrap !important; gap: 8px !important; }

/* Dark feature cards */
.tsp-home-wrap .tsp-feature-card {
  background: var(--tsp-dark-surface) !important;
  border: 1px solid var(--tsp-dark-border) !important;
  border-radius: 16px !important;
  text-align: left !important;
}
.tsp-home-wrap .tsp-feature-card:hover { transform: translateY(-2px) !important; box-shadow: none !important; border-color: rgba(255,255,255,.1) !important; }
.tsp-home-wrap .tsp-feature-card h3 { color: var(--tsp-dark-text) !important; font-family: var(--tsp-font-head) !important; font-size: .9rem !important; }
.tsp-home-wrap .tsp-feature-card p  { color: var(--tsp-dark-muted) !important; font-size: .82rem !important; }
.tsp-home-wrap .tsp-feature-icon    { border-radius: 10px !important; width: 38px !important; height: 38px !important; margin: 0 0 12px !important; font-size: 1rem !important; }
.tsp-feat-purple .tsp-feature-icon { background: rgba(124,110,250,.14) !important; }
.tsp-feat-cyan   .tsp-feature-icon { background: rgba(62,207,207,.14) !important; }
.tsp-feat-green  .tsp-feature-icon { background: rgba(74,222,128,.14) !important; }
.tsp-feat-amber  .tsp-feature-icon { background: rgba(245,190,74,.14) !important; }
.tsp-feat-orange .tsp-feature-icon { background: rgba(249,112,102,.14) !important; }
.tsp-feat-pink   .tsp-feature-icon { background: rgba(232,121,249,.14) !important; }

/* Dark blog cards */
.tsp-home-wrap .tsp-blog-card {
  background: var(--tsp-dark-surface) !important;
  border: 1px solid var(--tsp-dark-border) !important;
  border-radius: 14px !important;
  color: var(--tsp-dark-text) !important;
}
.tsp-home-wrap .tsp-blog-card:hover { border-color: rgba(255,255,255,.1) !important; transform: translateY(-2px) !important; box-shadow: none !important; }
.tsp-home-wrap .tsp-blog-meta  { color: var(--tsp-dark-muted) !important; }
.tsp-home-wrap .tsp-blog-title { color: var(--tsp-dark-text) !important; font-family: var(--tsp-font-head) !important; }
.tsp-home-wrap .tsp-blog-exc   { color: var(--tsp-dark-muted) !important; }
.tsp-home-wrap .tsp-blog-link  { color: #818CF8 !important; }

/* Dark CTA */
.tsp-home-wrap .tsp-cta-section {
  background: linear-gradient(145deg, #0D0A2E 0%, #150D40 50%, #0A1628 100%) !important;
  border-top: 1px solid var(--tsp-dark-border);
  border-bottom: 1px solid var(--tsp-dark-border);
}

/* Search dropdown dark */
.tsp-home-wrap .tsp-search-dropdown {
  background: var(--tsp-dark-surface) !important;
  border: 1px solid var(--tsp-dark-border) !important;
}
.tsp-home-wrap .tsp-search-item { color: var(--tsp-dark-text) !important; border-bottom-color: var(--tsp-dark-border) !important; }
.tsp-home-wrap .tsp-search-item:hover { background: var(--tsp-dark-surface2) !important; }
.tsp-home-wrap .tsp-search-item strong { color: var(--tsp-dark-text) !important; }
.tsp-home-wrap .tsp-search-item small  { color: var(--tsp-dark-muted) !important; }

/* Back to top */
.tsp-back-top { display:flex; justify-content:center; padding:20px; background: var(--tsp-dark-bg); }
.tsp-back-top-btn {
  background: var(--tsp-dark-surface2); border: 1px solid var(--tsp-dark-border);
  color: var(--tsp-dark-muted); border-radius: 99px; padding: 9px 20px;
  font-size: .78rem; cursor: pointer; display: flex; align-items: center;
  gap: 6px; transition: all .2s; font-family: var(--tsp-font);
}
.tsp-back-top-btn:hover { color: var(--tsp-dark-text); border-color: rgba(255,255,255,.14); }


/* Section Headers */
.tsp-section-header { text-align:center; margin-bottom:40px; }
.tsp-section-header h2 {
  font-size:clamp(1.5rem,3.5vw,2.2rem); font-weight:900;
  margin-bottom:10px; letter-spacing:-.02em;
}
.tsp-section-header p { color:var(--tsp-text-muted); font-size:1.05rem; }

/* Category Grid */
.tsp-cat-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(155px,1fr)); gap:14px; }
.tsp-cat-card {
  background:var(--tsp-card); border:1.5px solid var(--tsp-border); border-radius:14px;
  padding:22px 16px; text-align:center; text-decoration:none; color:var(--tsp-text);
  transition:all .25s; position:relative; overflow:hidden;
}
.tsp-cat-card::after {
  content:''; position:absolute; bottom:0; left:0; right:0; height:3px;
  background:var(--cat-gradient,linear-gradient(90deg,#4F46E5,#7C3AED));
  transform:scaleX(0); transition:transform .25s; transform-origin:left;
}
.tsp-cat-card:hover { transform:translateY(-4px); box-shadow:var(--tsp-shadow-hover); border-color:transparent; }
.tsp-cat-card:hover::after { transform:scaleX(1); }
.tsp-cat-icon { font-size:2.4rem; margin-bottom:12px; display:block; }
.tsp-cat-name { font-weight:700; font-size:.9rem; margin-bottom:5px; }
.tsp-cat-count { font-size:.75rem; color:var(--tsp-text-muted); font-weight:500; }

/* Popular Grid */
.tsp-popular-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:12px; }
.tsp-popular-card {
  background:#fff; border:1.5px solid var(--tsp-border); border-radius:12px;
  padding:14px 16px; display:flex; align-items:center; gap:12px;
  text-decoration:none; color:var(--tsp-text); transition:all .2s; position:relative;
}
.tsp-popular-card:hover { border-color:var(--tsp-primary); box-shadow:0 4px 16px rgba(79,70,229,.12); transform:translateY(-2px); }
.tsp-popular-icon { font-size:1.6rem; flex-shrink:0; width:40px; height:40px; display:flex; align-items:center; justify-content:center; background:#F8FAFF; border-radius:10px; }
.tsp-popular-name { font-size:.82rem; font-weight:700; line-height:1.3; }
.tsp-popular-badge { position:absolute; top:6px; right:8px; font-size:.7rem; }

/* Features Grid */
.tsp-features-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:20px; }
.tsp-feature-card {
  background:#fff; border-radius:16px; padding:26px 22px;
  text-align:center; border:1.5px solid var(--tsp-border);
  transition:all .2s;
}
.tsp-feature-card:hover { transform:translateY(-3px); box-shadow:var(--tsp-shadow-hover); }
.tsp-feature-icon {
  font-size:2.6rem; margin-bottom:14px; display:block;
  width:64px; height:64px; border-radius:16px;
  display:flex; align-items:center; justify-content:center; margin:0 auto 14px;
  background:linear-gradient(135deg,#EEF2FF,#F0FDF4);
}
.tsp-feature-card h3 { font-size:1rem; font-weight:700; margin-bottom:8px; }
.tsp-feature-card p  { font-size:.87rem; color:var(--tsp-text-muted); line-height:1.6; }

/* Blog Grid */
.tsp-blog-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:20px; }
.tsp-blog-card {
  background:#fff; border:1.5px solid var(--tsp-border); border-radius:14px;
  padding:24px; text-decoration:none; color:var(--tsp-text);
  transition:all .2s; display:flex; flex-direction:column; gap:10px;
}
.tsp-blog-card:hover { border-color:var(--tsp-primary); box-shadow:var(--tsp-shadow-hover); transform:translateY(-3px); }
.tsp-blog-meta  { font-size:.78rem; color:var(--tsp-text-muted); }
.tsp-blog-title { font-size:1rem; font-weight:700; line-height:1.4; }
.tsp-blog-exc   { font-size:.85rem; color:var(--tsp-text-muted); line-height:1.6; flex:1; }
.tsp-blog-link  { font-size:.85rem; font-weight:700; color:var(--tsp-primary); }

/* CTA */
.tsp-cta-section {
  background:linear-gradient(135deg,#0F0C29,#302B63,#24243E);
  padding:72px 0; position:relative; overflow:hidden;
}
.tsp-cta-section::before {
  content:''; position:absolute; inset:0;
  background:radial-gradient(ellipse 60% 80% at 70% 50%,rgba(124,58,237,.3),transparent);
}

/* Admin table used in tools */
.tsp-admin-table { width:100%; border-collapse:collapse; font-size:.88rem; }
.tsp-admin-table th { background:#F8FAFC; padding:10px 12px; text-align:left; font-weight:600; font-size:.8rem; text-transform:uppercase; letter-spacing:.04em; color:#64748B; border-bottom:2px solid var(--tsp-border); }
.tsp-admin-table td { padding:10px 12px; border-bottom:1px solid #F1F5F9; }
.tsp-admin-table tr:hover td { background:#FAFBFF; }

/* Upload zone */
.tsp-upload-zone {
  border:2.5px dashed #C7D2FE; border-radius:16px;
  padding:48px 24px; text-align:center; cursor:pointer;
  transition:all .2s; background:linear-gradient(135deg,#F8FAFF,#EEF2FF);
}
.tsp-upload-zone:hover, .tsp-upload-zone.dragover {
  border-color:var(--tsp-primary); background:linear-gradient(135deg,#EEF2FF,#E0E7FF);
  box-shadow:0 8px 24px rgba(79,70,229,.12);
}
.tsp-upload-icon  { font-size:3.5rem; margin-bottom:14px; display:block; }
.tsp-upload-title { font-size:1.05rem; font-weight:700; margin-bottom:6px; }
.tsp-upload-sub   { font-size:.85rem; color:var(--tsp-text-muted); margin-bottom:20px; }

/* ── Responsive ──────────────────────────────────────── */
@media (max-width: 768px) {
  .tsp-tools-grid  { grid-template-columns: repeat(2,1fr); gap:10px; }
  .tsp-tool-card   { padding:16px 14px; }
  /* Archive page category nav — horizontal scroll on mobile */
  .tsp-cat-nav     { overflow-x:auto; flex-wrap:nowrap; padding-bottom:6px; -webkit-overflow-scrolling:touch; }
  .tsp-cat-nav-btn { white-space:nowrap; flex-shrink:0; }
  /* Tool header responsive */
  .tsp-tool-header { padding:36px 0 28px; }
  .tsp-tool-header h1 { font-size:clamp(1.3rem,4vw,2rem); }
  /* Archive header responsive */
  .tsp-archive-header { padding:40px 0 32px; }
  .tsp-archive-header h1 { font-size:clamp(1.4rem,4.5vw,2.2rem); }
  /* Category section header on mobile */
  .tsp-cat-section-header { flex-wrap:wrap; gap:6px; }
  /* Blog grid */
  .tsp-blog-grid   { grid-template-columns:1fr; }
}
@media (max-width: 640px) {
  .tsp-hero              { padding:56px 0 44px; }
  .tsp-hero-stat         { padding:0 14px; }
  .tsp-hero-stat-divider { display:none; }
  .tsp-hero-stats        { gap:4px; }
  /* Category + feature grids — 2 columns on small screens */
  .tsp-cat-grid          { grid-template-columns:repeat(2,1fr); gap:10px; }
  .tsp-popular-grid      { grid-template-columns:repeat(2,1fr); gap:8px; }
  .tsp-features-grid     { grid-template-columns:repeat(2,1fr); gap:12px; }
  .tsp-tools-grid        { grid-template-columns:repeat(2,1fr); gap:8px; }
  /* Homepage dark theme pill popular tools — single column on small */
  .tsp-home-wrap .tsp-popular-grid { display:flex; flex-wrap:wrap; gap:8px; }
  /* Section headers */
  .tsp-section-header h2 { font-size:clamp(1.3rem,5vw,1.8rem); }
  /* Wrap stats row */
  .tsp-hero-stats { flex-wrap:wrap; justify-content:center; row-gap:12px; }
  /* Admin stats grid */
  .tsp-stats-grid { grid-template-columns:repeat(2,1fr) !important; }
  /* Monetization 3-col → 1-col */
  .tsp-admin-wrap [style*="grid-template-columns:repeat(3"] { display:block !important; }
  .tsp-admin-wrap [style*="grid-template-columns:1fr 1fr"] { grid-template-columns:1fr !important; }
}
@media (max-width: 480px) {
  .tsp-wrap { padding:0 14px; }
  /* Tools grid single column on very small phones */
  .tsp-tools-grid  { grid-template-columns:1fr; gap:8px; }
  /* Cat cards — 2 cols still */
  .tsp-cat-grid    { grid-template-columns:repeat(2,1fr); gap:8px; }
  .tsp-cat-card    { padding:16px 10px; }
  .tsp-cat-icon    { font-size:1.8rem !important; }
  /* Hero search — stack button */
  .tsp-hero-search { flex-wrap:wrap; border-radius:12px !important; padding:10px 12px !important; gap:8px; }
  .tsp-hero-search button { width:100%; border-radius:9px !important; padding:11px 0 !important; }
  /* Feature cards — single column */
  .tsp-features-grid { grid-template-columns:1fr; }
  /* Stats grid single col */
  .tsp-stats-grid { grid-template-columns:1fr !important; }
  /* Admin pages */
  .tsp-admin-wrap table { font-size:.78rem; }
  .tsp-admin-wrap th, .tsp-admin-wrap td { padding:7px 8px; }
}
@media (max-width: 400px) {
  .tsp-tools-grid  { grid-template-columns:1fr; }
  .tsp-cat-grid    { grid-template-columns:repeat(2,1fr); }
  .tsp-popular-grid{ grid-template-columns:1fr; }
}