/* ==========================================================================
   Compact hero + professional palette pass
   ========================================================================== */

:root {
  --brand-grad: linear-gradient(115deg, #38f2cf 0%, #8b5cff 55%, #ff4d94 100%);
}
html[data-theme="light"] {
  --brand-grad: linear-gradient(115deg, #4338ca 0%, #0e7490 100%);
  --ink: #f7f8fb;
  --ink-2: #eef1f7;
  --text: #0b1120;
  --muted: #4a5468;
  --dim: #6b7488;
}
html[data-theme="neon"] {
  --brand-grad: linear-gradient(115deg, #00f5ff 0%, #ff2fb3 60%, #b6ff2e 100%);
}

/* ---------- hero ---------- */
.hero-compact { padding: 62px 0 24px; }
.hero-compact .display-xl {
  margin: 0;
  font-size: clamp(20px, 5.05vw, 68px);
  line-height: 1.04;
  letter-spacing: -.045em;
  white-space: nowrap;
  text-wrap: nowrap;
}
.hero-compact .pills-hero { margin-top: 26px; }

.pill-primary {
  background: var(--brand-grad);
  border: 0;
  color: #ffffff;
  font-weight: 700;
  box-shadow: 0 14px 30px -18px rgba(79, 70, 229, .65);
}
.pill-primary b { background: rgba(255, 255, 255, .22); color: #ffffff; }
.pill-primary:hover { background: var(--brand-grad); border: 0; transform: translateY(-2px); filter: brightness(1.05); }
html[data-theme="light"] .pill.pill-primary {
  background: var(--brand-grad);
  border: 0;
  color: #ffffff;
}
html[data-theme="light"] .pill.pill-primary b {
  background: rgba(255, 255, 255, .24);
  color: #ffffff;
}
html[data-theme="light"] .pill.pill-primary:hover { background: var(--brand-grad); }

/* ---------- cleaner backdrop ---------- */
.aurora { opacity: .34; }
.grid-floor { opacity: .55; }
.grain { opacity: .03; }

html[data-theme="light"] .backdrop { background: #f7f8fb; }
html[data-theme="light"] .aurora { display: none; }
html[data-theme="light"] .grid-floor {
  opacity: .18;
  background-image:
    linear-gradient(to right, rgba(15, 23, 42, .10) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(15, 23, 42, .08) 1px, transparent 1px);
}
html[data-theme="light"] .grain { display: none; }
html[data-theme="light"] .display { color: #0b1120; text-shadow: none; }
html[data-theme="light"] .display .accent {
  background: linear-gradient(100deg, #312e81 0%, #0e7490 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: none;
}

/* light theme surfaces: flat, no local contrast noise */
html[data-theme="light"] .tool-card,
html[data-theme="light"] .cat-card,
html[data-theme="light"] .app {
  background: #ffffff;
  border-color: rgba(15, 23, 42, .10);
  box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 12px 28px -20px rgba(15, 23, 42, .35);
}
html[data-theme="light"] .tool-card:hover,
html[data-theme="light"] .cat-card:hover {
  border-color: rgba(15, 23, 42, .18);
  box-shadow: 0 1px 2px rgba(15, 23, 42, .05), 0 22px 44px -28px rgba(15, 23, 42, .45);
}
html[data-theme="light"] .metric { background: #ffffff; border-color: rgba(15, 23, 42, .10); }
html[data-theme="light"] .site-header {
  background: rgba(255, 255, 255, .92);
  border-bottom-color: rgba(15, 23, 42, .08);
  backdrop-filter: blur(14px) saturate(120%);
}
html[data-theme="light"] .site-footer { background: #ffffff; border-top-color: rgba(15, 23, 42, .08); }
html[data-theme="light"] .btn { border-color: rgba(15, 23, 42, .14); background: #ffffff; }
html[data-theme="light"] .stat-chip { background: #ffffff; border-color: rgba(15, 23, 42, .10); }
html[data-theme="light"] .crumbs { color: #6b7488; }
html[data-theme="light"] .eyebrow { color: #0e7490; }
html[data-theme="light"] .pill b { background: rgba(67, 56, 202, .10); color: #3730a3; }
html[data-theme="light"] .pill-primary b { background: rgba(255, 255, 255, .22); color: #ffffff; }

@media (max-width: 760px) {
  .hero-compact { padding: 34px 0 18px; }
  .hero-compact .display-xl { white-space: normal; }
}

/* 17 category accents */
.cat-card.cat-text { --cat: #38f2cf; --cat-soft: rgba(56,242,207,.14); }
.cat-card.cat-image { --cat: #ff4d94; --cat-soft: rgba(255,77,148,.14); }
.cat-card.cat-converters { --cat: #5ee7a0; --cat-soft: rgba(94,231,160,.15); }
.cat-card.cat-finance { --cat: #ffd166; --cat-soft: rgba(255,209,102,.16); }
.cat-card.cat-files { --cat: #8b5cff; --cat-soft: rgba(139,92,255,.16); }
.cat-card.cat-math { --cat: #7bd3ff; --cat-soft: rgba(123,211,255,.15); }
.cat-card.cat-time { --cat: #ff9f6b; --cat-soft: rgba(255,159,107,.16); }
.cat-card.cat-developer { --cat: #c084fc; --cat-soft: rgba(192,132,252,.16); }
.cat-card.cat-encoding { --cat: #38bdf8; --cat-soft: rgba(56,189,248,.15); }
.cat-card.cat-generators { --cat: #f472b6; --cat-soft: rgba(244,114,182,.15); }
.cat-card.cat-health { --cat: #4ade80; --cat-soft: rgba(74,222,128,.15); }
.cat-card.cat-design { --cat: #facc15; --cat-soft: rgba(250,204,21,.15); }
.cat-card.cat-seo { --cat: #22d3ee; --cat-soft: rgba(34,211,238,.15); }
.cat-card.cat-web { --cat: #a3e635; --cat-soft: rgba(163,230,53,.15); }
.cat-card.cat-security { --cat: #fb7185; --cat-soft: rgba(251,113,133,.15); }
.cat-card.cat-marketing { --cat: #f0abfc; --cat-soft: rgba(240,171,252,.15); }
.cat-card.cat-education { --cat: #93c5fd; --cat-soft: rgba(147,197,253,.15); }

/* analytics panel */
.analytics-pop { min-width: 260px; max-width: 320px; padding: 12px; }
.analytics-pop h4 { margin: 2px 0 8px; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--dim); }
.analytics-status { margin: 0 0 10px; font-size: 12.5px; line-height: 1.5; color: var(--muted); }
.analytics-status.is-ok strong { color: var(--cyan); }
.analytics-status.is-off strong { color: #ffb347; }
.analytics-status code { font-family: var(--mono); font-size: 11px; background: rgba(255,255,255,.07); padding: 1px 5px; border-radius: 4px; }
.analytics-link { display: block; padding: 7px 8px; border-radius: 8px; font-size: 13.5px; color: var(--text); }
.analytics-link:hover { background: rgba(255,255,255,.07); }
.analytics-note { margin: 8px 0 0; font-size: 11.5px; line-height: 1.45; color: var(--dim); }
html[data-theme="light"] .analytics-status code { background: rgba(15,23,42,.07); }
html[data-theme="light"] .analytics-link:hover { background: rgba(15,23,42,.06); }

/* tools page: tighter head, bold category titles */
.page-head-compact { padding: 26px 0 6px; }
.page-head-compact .display-line { font-size: clamp(18px, 2.9vw, 40px); }
.page-head-compact .cat-pills { margin-top: 16px; margin-bottom: 0; }
.section-tight { padding: 26px 0 10px; }
.section-tight .section-head { margin-bottom: 16px; }
.cat-title { font-size: clamp(20px, 2.4vw, 26px); font-weight: 800; letter-spacing: -.02em; margin: 0; }
.cat-title::first-letter { text-transform: uppercase; }

/* analytics live metrics */
.analytics-metrics { margin: 4px 0 10px; }
.analytics-metrics[hidden] { display: none; }
.traffic-number { font-size: 28px; font-weight: 800; letter-spacing: -.02em; color: var(--text); font-variant-numeric: tabular-nums; }
.traffic-label { font-size: 11.5px; color: var(--muted); margin-bottom: 8px; }
.spark { display: flex; align-items: flex-end; gap: 2px; height: 34px; margin-bottom: 6px; }
.spark-bar { flex: 1; background: var(--grad); border-radius: 2px; opacity: .85; min-height: 2px; }
.traffic-time { font-size: 11px; color: var(--dim); }

/* reference tables inside long-form tool content */
.prose .ref-table { width: 100%; border-collapse: collapse; margin: 14px 0 22px; font-size: 14px; }
.prose .ref-table th, .prose .ref-table td { text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
.prose .ref-table th { font-weight: 700; color: var(--text); background: var(--surface-2); }
.prose .ref-table td { color: var(--muted); }
.prose .ref-table tr:last-child td { border-bottom: 0; }