/*  ============================================================================
    Promtбаза — production stylesheet
    Single file, vanilla CSS, no preprocessor needed.
    Pair with `icons.svg` (sprite of category icons + model placeholders).
    ============================================================================ */


/*  ───────────────────────── 1. fonts ───────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Geist:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap');


/*  ───────────────────────── 2. tokens ───────────────────────── */
:root {
  /* surfaces — warm-neutral, near-white not pure */
  --pb-bg:        #FAFAF7;
  --pb-bg-2:      #F3F3EE;
  --pb-surface:   #FFFFFF;
  --pb-surface-2: #F7F7F4;
  --pb-line:      rgba(20,21,26,0.07);
  --pb-line-2:    rgba(20,21,26,0.12);
  --pb-line-3:    rgba(20,21,26,0.18);

  /* text */
  --pb-fg:        #14151A;
  --pb-fg-2:      #2C2D35;
  --pb-fg-mute:   #6B6F7D;
  --pb-fg-subtle: #9AA0AE;

  /* violet accent */
  --pb-violet:        #7C3AED;
  --pb-violet-hi:     #8B5CF6;
  --pb-violet-deep:   #5B21B6;
  --pb-violet-soft:   rgba(124,58,237,0.10);
  --pb-violet-softer: rgba(124,58,237,0.05);
  --pb-violet-glow:   rgba(124,58,237,0.35);

  /* logo gradient (unchanged from existing brand) */
  --pb-grad: linear-gradient(135deg, #8B5CF6 0%, #6366F1 50%, #5B8DEF 100%);

  /* per-model brand colors */
  --c-chatgpt:   #10A37F;
  --c-claude:    #D97757;
  --c-mj:        #C346F5;
  --c-kandinsky: #2A6FDB;
  --c-yandexgpt: #FC3F1D;
  --c-gemini:    #4285F4;
  --c-deepseek:  #6E5DE6;
  --c-suno:      #E03A8C;
  --c-alisa:     #FF5A2B;

  /* category accent hues (for soft tints) */
  --cat-marketing-a:#FF8A6B; --cat-marketing-b:#FFB347;
  --cat-content-a:  #FFC15E; --cat-content-b:  #F7A14A;
  --cat-design-a:   #F38AD3; --cat-design-b:   #B574F5;
  --cat-code-a:     #5BCBEB; --cat-code-b:     #6A8EFF;
  --cat-study-a:    #5FD6B6; --cat-study-b:    #6BC0A0;
  --cat-business-a: #6BAEF5; --cat-business-b: #7C8EFF;
  --cat-personal-a: #8DD970; --cat-personal-b: #5FC494;
  --cat-creative-a: #E07ACC; --cat-creative-b: #FF8AA0;
  --cat-knowledge-a:#C8B6FF; --cat-knowledge-b:#94A8FF;
  --cat-jobs-a:     #B8B0A0; --cat-jobs-b:     #8B8470;
  --cat-all-a:      #A78BFA; --cat-all-b:      #6366F1;

  /* type */
  --pb-font-sans:    'Inter', ui-sans-serif, system-ui, sans-serif;
  --pb-font-display: 'Geist', 'Inter', ui-sans-serif, sans-serif;
  --pb-font-mono:    'JetBrains Mono', ui-monospace, Menlo, monospace;

  /* radii */
  --pb-r-sm:  6px;
  --pb-r-md: 10px;
  --pb-r-lg: 14px;
  --pb-r-xl: 18px;

  /* shadows */
  --pb-sh-1: 0 1px 2px rgba(20,21,26,0.04), 0 0 0 1px rgba(20,21,26,0.04);
  --pb-sh-2: 0 4px 12px -2px rgba(20,21,26,0.08), 0 0 0 1px rgba(20,21,26,0.05);
  --pb-sh-3: 0 10px 30px -8px rgba(20,21,26,0.16), 0 2px 6px rgba(20,21,26,0.04);
  --pb-sh-violet: 0 8px 24px -6px rgba(124,58,237,0.30);
}


/*  ───────────────────────── 3. base ───────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0;
}
body {
  background: var(--pb-bg);
  color: var(--pb-fg);
  font-family: var(--pb-font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
a { color: inherit; }


/*  ───────────────────────── 4. layout shell ───────────────────────── */
.pb-shell {
  display: flex;
  min-height: calc(100vh - 56px);
}
.pb-main {
  flex: 1;
  min-width: 0;
  padding: 24px 36px 60px;
}
.pb-main--narrow { padding: 24px 36px 60px; }


/*  ───────────────────────── 5. topbar ───────────────────────── */
.pb-topbar {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; gap: 16px;
  padding: 12px 28px;
  background: rgba(250,250,247,0.85);
  backdrop-filter: saturate(180%) blur(10px);
  -webkit-backdrop-filter: saturate(180%) blur(10px);
  border-bottom: 1px solid var(--pb-line);
}
.pb-topbar__search-wrap {
  flex: 1;
  display: flex;
  justify-content: center;
}
.pb-topbar__nav {
  display: flex; align-items: center; gap: 14px;
}
.pb-topbar__nav-link {
  color: var(--pb-fg-mute);
  font-size: 13px; font-weight: 500;
  text-decoration: none;
}
.pb-topbar__nav-link:hover { color: var(--pb-fg); }


/*  ───────────────────────── 6. logo (preserved) ───────────────────────── */
.pb-logo {
  display: inline-flex; align-items: center; gap: 10px;
  text-decoration: none; color: var(--pb-fg);
}
.pb-logo__mark {
  width: 28px; height: 28px;
  border-radius: 8px;
  background: var(--pb-grad);
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff;
  font-family: var(--pb-font-display);
  font-weight: 800; font-size: 16px; line-height: 1;
  letter-spacing: -0.04em;
  box-shadow: 0 6px 14px -4px rgba(124,58,237,0.45), inset 0 0 0 1px rgba(255,255,255,0.25);
  flex-shrink: 0;
}
.pb-logo__word {
  font-family: var(--pb-font-display);
  font-weight: 700; font-size: 17px;
  letter-spacing: -0.02em; line-height: 1;
}


/*  ───────────────────────── 7. buttons ───────────────────────── */
.pb-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 7px 14px;
  border-radius: 8px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--pb-fg-2);
  font-family: var(--pb-font-sans);
  font-weight: 600; font-size: 13px;
  line-height: 1;
  cursor: pointer;
  text-decoration: none;
  transition: background 160ms ease, border-color 160ms ease, color 160ms ease;
}
.pb-btn:hover { background: var(--pb-surface-2); }

.pb-btn--primary {
  background: var(--pb-fg); color: #fff;
}
.pb-btn--primary:hover { background: #000; }

.pb-btn--violet {
  background: var(--pb-violet); color: #fff;
  box-shadow: var(--pb-sh-violet);
}
.pb-btn--violet:hover { background: var(--pb-violet-deep); }

.pb-btn--ghost {
  background: var(--pb-surface);
  border-color: var(--pb-line-2);
  color: var(--pb-fg);
}
.pb-btn--ghost:hover { background: var(--pb-surface-2); }

.pb-btn--lg { padding: 11px 16px; font-size: 14px; }
.pb-btn--full { width: 100%; }


/*  ───────────────────────── 8. kbd ───────────────────────── */
.pb-kbd {
  display: inline-flex; align-items: center;
  font-family: var(--pb-font-mono); font-size: 11px; line-height: 1;
  color: var(--pb-fg-mute);
  background: var(--pb-bg-2);
  border: 1px solid var(--pb-line);
  padding: 3px 6px; border-radius: 5px;
}


/*  ───────────────────────── 9. search ───────────────────────── */
.pb-search-pill {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 8px 10px 8px 14px;
  border-radius: 999px;
  background: var(--pb-surface);
  border: 1px solid var(--pb-line-2);
  color: var(--pb-fg-mute);
  font-size: 13px;
  cursor: text;
  text-align: left;
  width: 420px; max-width: 100%;
}
.pb-search-pill__placeholder { flex: 1; }
.pb-search-pill svg { color: var(--pb-fg-mute); flex-shrink: 0; }

.pb-search-big {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 18px;
  border-radius: 14px;
  background: var(--pb-surface);
  border: 1px solid var(--pb-line-2);
  box-shadow: 0 12px 32px -12px rgba(20,21,26,0.14), 0 0 0 4px var(--pb-violet-softer);
  max-width: 560px; width: 100%; margin: 0 auto;
}
.pb-search-big input,
.pb-search-big__placeholder {
  flex: 1; border: none; outline: none; background: transparent;
  color: var(--pb-fg);
  font: 400 15px var(--pb-font-sans);
  min-width: 0;
}
.pb-search-big input::placeholder,
.pb-search-big__placeholder { color: var(--pb-fg-subtle); }
.pb-search-big__placeholder b {
  color: var(--pb-fg); font-weight: 500;
}


/*  ───────────────────────── 10. sidebar ───────────────────────── */
.pb-side {
  width: 240px;
  flex-shrink: 0;
  padding: 20px 12px 24px;
  border-right: 1px solid var(--pb-line);
  font-family: var(--pb-font-sans);
}
.pb-side__heading-row {
  padding: 0 8px 8px;
  display: flex; align-items: center; gap: 8px;
}
.pb-side__heading {
  font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--pb-fg-subtle);
}
.pb-side__saved {
  font-size: 9.5px;
  padding: 2px 6px; border-radius: 999px;
  background: var(--pb-violet-soft);
  color: var(--pb-violet-deep);
  font-weight: 600; letter-spacing: 0.04em;
}
.pb-side__list {
  display: flex; flex-direction: column; gap: 1px;
  margin-bottom: 18px;
}
.pb-side-row {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 8px;
  border-radius: 7px;
  text-decoration: none;
  color: var(--pb-fg-2);
  font-size: 13px; font-weight: 500;
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease;
}
.pb-side-row:hover {
  background: var(--pb-surface-2);
  color: var(--pb-fg);
}
.pb-side-row__label { flex: 1; }
.pb-side-row__count {
  font-size: 11px; font-weight: 500;
  color: var(--pb-fg-subtle);
}

/* active states */
.pb-side-row[aria-current="true"][data-kind="model"] {
  background: var(--pb-violet-soft);
  color: var(--pb-violet-deep);
  font-weight: 600;
}
.pb-side-row[aria-current="true"][data-kind="model"] .pb-side-row__count {
  color: var(--pb-violet-deep);
}
.pb-side-row[aria-current="true"][data-kind="cat"] {
  background: var(--pb-fg);
  color: #fff;
  font-weight: 600;
}
.pb-side-row[aria-current="true"][data-kind="cat"] .pb-side-row__count {
  color: rgba(255,255,255,0.6);
}

.pb-side-row__icon-tile {
  width: 22px; height: 22px;
  border-radius: 5px;
  background: var(--pb-bg-2);
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.pb-side-row[aria-current="true"][data-kind="cat"] .pb-side-row__icon-tile {
  background: rgba(255,255,255,0.10);
}

.pb-side__notice {
  margin-top: 22px;
  padding: 12px;
  border-radius: 10px;
  background: var(--pb-bg-2);
  font-size: 12px; color: var(--pb-fg-mute);
  line-height: 1.5;
}
.pb-side__notice b {
  display: block;
  font-weight: 600;
  color: var(--pb-fg-2);
  margin-bottom: 4px;
}


/*  ───────────────────────── 11. model mark ───────────────────────── */
/*  Colored square with a glyph (or img fallback).
    Brand color comes from CSS variable on the element. */
.pb-mm {
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  width: 22px; height: 22px;
  border-radius: 6px;
  background: var(--mm-color, var(--pb-fg));
  color: #fff;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.18), 0 1px 2px rgba(20,21,26,0.10);
}
.pb-mm svg { width: 62%; height: 62%; }
.pb-mm img { width: 100%; height: 100%; object-fit: contain; }

.pb-mm--sm { width: 16px; height: 16px; border-radius: 5px; }
.pb-mm--md { width: 22px; height: 22px; border-radius: 6px; }
.pb-mm--lg { width: 28px; height: 28px; border-radius: 7px; }
.pb-mm--xl { width: 36px; height: 36px; border-radius: 8px; }

/* Per-model variable mapping so you can write
   <span class="pb-mm pb-mm--chatgpt"> without inline style. */
.pb-mm--chatgpt   { --mm-color: var(--c-chatgpt); }
.pb-mm--claude    { --mm-color: var(--c-claude); }
.pb-mm--mj        { --mm-color: var(--c-mj); }
.pb-mm--kandinsky { --mm-color: var(--c-kandinsky); }
.pb-mm--yandexgpt { --mm-color: var(--c-yandexgpt); }
.pb-mm--gemini    { --mm-color: var(--c-gemini); }
.pb-mm--deepseek  { --mm-color: var(--c-deepseek); }
.pb-mm--suno      { --mm-color: var(--c-suno); }
.pb-mm--alisa     { --mm-color: var(--c-alisa); }


/*  ───────────────────────── 12. category icon + tile ───────────────────────── */
.pb-ci {
  display: inline-block; flex-shrink: 0;
  width: 18px; height: 18px;
  color: currentColor;
}
.pb-ci--sm { width: 13px; height: 13px; }
.pb-ci--md { width: 18px; height: 18px; }
.pb-ci--lg { width: 26px; height: 26px; }
.pb-ci--xl { width: 80px; height: 80px; }

.pb-ci-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px 3px 7px;
  border-radius: 999px;
  background: var(--pb-bg-2);
  color: var(--pb-fg-2);
  font-size: 11px; font-weight: 600;
  border: 1px solid var(--pb-line);
}
.pb-ci-chip--violet {
  background: var(--pb-violet-soft);
  color: var(--pb-violet-deep);
  border-color: transparent;
  font-size: 12.5px;
  padding: 4px 10px 4px 8px;
}


/*  ───────────────────────── 13. hero (home) ───────────────────────── */
.pb-hero {
  position: relative; text-align: center;
  padding: 18px 0 30px;
  margin-bottom: 8px;
}
.pb-hero__glow {
  position: absolute; top: -40px; left: 50%;
  transform: translateX(-50%);
  width: 540px; height: 200px;
  border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side,
    rgba(124,58,237,0.18),
    rgba(99,102,241,0.06) 55%,
    transparent 75%);
  filter: blur(6px);
}
.pb-hero__inner { position: relative; }
.pb-hero__badge {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 11px;
  border-radius: 999px;
  background: var(--pb-violet-soft);
  color: var(--pb-violet-deep);
  font-size: 11.5px; font-weight: 600;
  letter-spacing: 0.02em;
  margin-bottom: 14px;
}
.pb-hero__title {
  margin: 0;
  font-family: var(--pb-font-display);
  font-weight: 700;
  font-size: 40px; line-height: 1.05;
  letter-spacing: -0.035em;
  color: var(--pb-fg);
}
.pb-hero__accent {
  background: linear-gradient(90deg, var(--pb-violet) 0%, var(--pb-violet-hi) 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.pb-hero__sub {
  margin: 10px 0 22px;
  color: var(--pb-fg-mute);
  font-size: 14.5px;
}


/*  ───────────────────────── 14. section header ───────────────────────── */
.pb-section + .pb-section { margin-top: 40px; }
.pb-section__header {
  display: flex; align-items: flex-end; justify-content: space-between;
  margin-bottom: 16px; gap: 16px;
}
.pb-section__title-wrap {
  display: flex; flex-direction: column; gap: 3px;
}
.pb-section__title-row {
  display: flex; align-items: center; gap: 8px;
}
.pb-section__title {
  margin: 0;
  font-family: var(--pb-font-display);
  font-weight: 700; font-size: 20px;
  letter-spacing: -0.02em;
  color: var(--pb-fg);
}
.pb-section__sub {
  color: var(--pb-fg-mute);
  font-size: 13px;
}
.pb-section__more {
  display: inline-flex; align-items: center; gap: 5px;
  color: var(--pb-fg-2);
  font-size: 12.5px; font-weight: 600;
  text-decoration: none;
}
.pb-section__more:hover { color: var(--pb-fg); }


/*  ───────────────────────── 15. grid ───────────────────────── */
.pb-grid { display: grid; gap: 14px; }
.pb-grid--2 { grid-template-columns: repeat(2, 1fr); }
.pb-grid--3 { grid-template-columns: repeat(3, 1fr); }
.pb-grid--4 { grid-template-columns: repeat(4, 1fr); }
.pb-grid--5 { grid-template-columns: repeat(5, 1fr); }
.pb-grid--gap-sm { gap: 10px; }
.pb-grid--gap-md { gap: 14px; }


/*  ───────────────────────── 16. prompt card ───────────────────────── */
.pb-card {
  display: flex; flex-direction: column;
  border-radius: var(--pb-r-lg);
  background: var(--pb-surface);
  border: 1px solid var(--pb-line);
  text-decoration: none;
  color: inherit;
  overflow: hidden;
  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}
.pb-card:hover {
  border-color: var(--pb-line-2);
  box-shadow: var(--pb-sh-2);
}
.pb-card__body {
  padding: 16px 18px;
  display: flex; flex-direction: column; gap: 10px;
  flex: 1;
}
.pb-card__head {
  display: flex; align-items: center; gap: 10px;
}
.pb-card__model-name {
  font-size: 12.5px; font-weight: 600;
  color: var(--pb-fg);
}
.pb-card__title {
  font-family: var(--pb-font-display);
  font-weight: 600; font-size: 16px;
  line-height: 1.3;
  letter-spacing: -0.015em;
  color: var(--pb-fg);
}
.pb-card__preview {
  font-size: 13px;
  color: var(--pb-fg-mute);
  line-height: 1.55;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.pb-card__foot {
  display: flex; align-items: center; gap: 8px;
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px solid var(--pb-line);
}
.pb-card__spacer { flex: 1; }
.pb-card__open {
  display: inline-flex; align-items: center; gap: 3px;
  color: var(--pb-violet);
  font-size: 11.5px; font-weight: 600;
  margin-left: 6px;
  text-decoration: none;
}

/* compact variant */
.pb-card--compact .pb-card__body { padding: 14px 16px; gap: 8px; }
.pb-card--compact .pb-card__title { font-size: 15px; }
.pb-card--compact .pb-card__preview { -webkit-line-clamp: 1; font-size: 12.5px; }
.pb-card--compact .pb-card__foot { border-top: 0; padding-top: 0; }

/* large variant */
.pb-card--large .pb-card__body { padding: 18px 22px 20px; }
.pb-card--large .pb-card__title { font-size: 20px; font-weight: 700; letter-spacing: -0.02em; }
.pb-card--large .pb-card__preview { -webkit-line-clamp: 3; font-size: 13.5px; }


/*  ───────────────────────── 17. hot badge, save count ───────────────────────── */
.pb-hot {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 7px 2px 6px;
  border-radius: 999px;
  background: rgba(255,90,43,0.10);
  color: #E04A1A;
  font-weight: 600; font-size: 10.5px; line-height: 1;
}
.pb-save-count {
  display: inline-flex; align-items: center; gap: 4px;
  color: var(--pb-fg-mute);
  font-size: 11.5px; font-weight: 500;
}


/*  ───────────────────────── 18. category tiles (home bottom) ───────────────────────── */
.pb-cat-tile {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px;
  text-decoration: none; color: inherit;
  border-radius: var(--pb-r-md);
  border: 1px solid var(--pb-line);
  background: var(--pb-surface);
  transition: border-color 160ms ease, box-shadow 160ms ease;
}
.pb-cat-tile:hover {
  border-color: var(--pb-line-2);
  box-shadow: var(--pb-sh-2);
}
.pb-cat-tile__icon {
  width: 36px; height: 36px;
  border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  /* per-tile: set --tint-bg and --tint-fg with inline style or per-slug class below */
  background: var(--tint-bg, var(--pb-bg-2));
  color: var(--tint-fg, var(--pb-fg-2));
}
.pb-cat-tile__body { min-width: 0; flex: 1; }
.pb-cat-tile__name {
  font-family: var(--pb-font-display);
  font-weight: 600; font-size: 13.5px;
  color: var(--pb-fg);
  letter-spacing: -0.01em; line-height: 1.2;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pb-cat-tile__count {
  font-size: 11.5px; color: var(--pb-fg-mute);
  margin-top: 2px;
}

/* Per-category tint presets */
.pb-cat-tile--knowledge .pb-cat-tile__icon { --tint-bg: color-mix(in oklab, var(--cat-knowledge-a) 16%, var(--pb-bg-2)); --tint-fg: color-mix(in oklab, var(--cat-knowledge-b) 70%, var(--pb-fg)); }
.pb-cat-tile--jobs      .pb-cat-tile__icon { --tint-bg: color-mix(in oklab, var(--cat-jobs-a) 16%,      var(--pb-bg-2)); --tint-fg: color-mix(in oklab, var(--cat-jobs-b) 70%,      var(--pb-fg)); }
.pb-cat-tile--marketing .pb-cat-tile__icon { --tint-bg: color-mix(in oklab, var(--cat-marketing-a) 16%, var(--pb-bg-2)); --tint-fg: color-mix(in oklab, var(--cat-marketing-b) 70%, var(--pb-fg)); }
.pb-cat-tile--content   .pb-cat-tile__icon { --tint-bg: color-mix(in oklab, var(--cat-content-a) 16%,   var(--pb-bg-2)); --tint-fg: color-mix(in oklab, var(--cat-content-b) 70%,   var(--pb-fg)); }
.pb-cat-tile--design    .pb-cat-tile__icon { --tint-bg: color-mix(in oklab, var(--cat-design-a) 16%,    var(--pb-bg-2)); --tint-fg: color-mix(in oklab, var(--cat-design-b) 70%,    var(--pb-fg)); }
.pb-cat-tile--code      .pb-cat-tile__icon { --tint-bg: color-mix(in oklab, var(--cat-code-a) 16%,      var(--pb-bg-2)); --tint-fg: color-mix(in oklab, var(--cat-code-b) 70%,      var(--pb-fg)); }
.pb-cat-tile--study     .pb-cat-tile__icon { --tint-bg: color-mix(in oklab, var(--cat-study-a) 16%,     var(--pb-bg-2)); --tint-fg: color-mix(in oklab, var(--cat-study-b) 70%,     var(--pb-fg)); }
.pb-cat-tile--business  .pb-cat-tile__icon { --tint-bg: color-mix(in oklab, var(--cat-business-a) 16%,  var(--pb-bg-2)); --tint-fg: color-mix(in oklab, var(--cat-business-b) 70%,  var(--pb-fg)); }
.pb-cat-tile--personal  .pb-cat-tile__icon { --tint-bg: color-mix(in oklab, var(--cat-personal-a) 16%,  var(--pb-bg-2)); --tint-fg: color-mix(in oklab, var(--cat-personal-b) 70%,  var(--pb-fg)); }
.pb-cat-tile--creative  .pb-cat-tile__icon { --tint-bg: color-mix(in oklab, var(--cat-creative-a) 16%,  var(--pb-bg-2)); --tint-fg: color-mix(in oklab, var(--cat-creative-b) 70%,  var(--pb-fg)); }


/*  ───────────────────────── 19. sticky filter bar (category page) ───────────────────────── */
.pb-filter {
  position: sticky; top: 56px; z-index: 5;
  margin: 24px -36px 18px;
  padding: 12px 36px;
  background: rgba(250,250,247,0.92);
  backdrop-filter: saturate(180%) blur(8px);
  -webkit-backdrop-filter: saturate(180%) blur(8px);
  border-bottom: 1px solid var(--pb-line);
  display: flex; align-items: center; gap: 14px;
  font-size: 13px; color: var(--pb-fg-mute);
}
.pb-filter__count b {
  color: var(--pb-fg); font-weight: 600;
}
.pb-filter__divider {
  width: 1px; height: 14px;
  background: var(--pb-line-2);
}
.pb-filter__current {
  display: inline-flex; align-items: center; gap: 6px;
}
.pb-filter__current-model {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--pb-fg); font-weight: 600;
}
.pb-filter__change {
  color: var(--pb-violet);
  font-size: 12px; font-weight: 600;
  margin-left: 4px;
  text-decoration: none;
}
.pb-filter__sort {
  margin-left: auto;
}
.pb-sort-btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 12px;
  border-radius: 8px;
  background: var(--pb-surface);
  border: 1px solid var(--pb-line-2);
  color: var(--pb-fg-2);
  font-family: var(--pb-font-sans);
  font-size: 12.5px; font-weight: 500;
  cursor: pointer;
}
.pb-sort-btn:hover { background: var(--pb-surface-2); }


/*  ───────────────────────── 20. breadcrumb ───────────────────────── */
.pb-crumb {
  display: flex; align-items: center; gap: 8px;
  font-size: 12.5px; color: var(--pb-fg-mute);
}
.pb-crumb__sep { color: var(--pb-fg-subtle); display: inline-flex; }
.pb-crumb a {
  color: var(--pb-fg-mute);
  text-decoration: none; font-weight: 500;
}
.pb-crumb a:hover { color: var(--pb-fg); }
.pb-crumb__current {
  color: var(--pb-fg); font-weight: 600;
}


/*  ───────────────────────── 21. category hero (category page) ───────────────────────── */
.pb-cat-hero {
  display: flex; gap: 28px; align-items: stretch;
  margin-top: 18px;
  padding: 22px;
  border-radius: var(--pb-r-xl);
  background: var(--pb-surface);
  border: 1px solid var(--pb-line);
}
.pb-cat-hero__spotlight {
  width: 180px; height: 180px;
  flex-shrink: 0;
  border-radius: var(--pb-r-lg);
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--pb-line);
  /* per-slug: --tint-bg / --tint-fg from .pb-cat-hero--{slug} below */
  background: var(--tint-bg, var(--pb-bg-2));
  color: var(--tint-fg, var(--pb-fg-2));
}
.pb-cat-hero__body {
  flex: 1;
  display: flex; flex-direction: column; justify-content: center;
}
.pb-cat-hero__eyebrow {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 12px;
}
.pb-cat-hero__eyebrow-code {
  font-family: var(--pb-font-mono);
  font-size: 11px; letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--pb-fg-subtle);
}
.pb-cat-hero__title {
  margin: 0;
  font-family: var(--pb-font-display);
  font-weight: 700; font-size: 38px;
  letter-spacing: -0.03em; line-height: 1.05;
  color: var(--pb-fg);
  margin-bottom: 10px;
}
.pb-cat-hero__desc {
  margin: 0;
  color: var(--pb-fg-mute);
  font-size: 14.5px; line-height: 1.5;
  max-width: 540px;
}
.pb-cat-hero__tags {
  display: flex; gap: 8px;
  margin-top: 16px;
  flex-wrap: wrap;
}

/* per-cat tint for spotlight */
.pb-cat-hero--knowledge .pb-cat-hero__spotlight { --tint-bg: color-mix(in oklab, var(--cat-knowledge-a) 14%, var(--pb-bg-2)); --tint-fg: color-mix(in oklab, var(--cat-knowledge-b) 65%, var(--pb-fg)); }
.pb-cat-hero--jobs      .pb-cat-hero__spotlight { --tint-bg: color-mix(in oklab, var(--cat-jobs-a) 14%,      var(--pb-bg-2)); --tint-fg: color-mix(in oklab, var(--cat-jobs-b) 65%,      var(--pb-fg)); }
.pb-cat-hero--marketing .pb-cat-hero__spotlight { --tint-bg: color-mix(in oklab, var(--cat-marketing-a) 14%, var(--pb-bg-2)); --tint-fg: color-mix(in oklab, var(--cat-marketing-b) 65%, var(--pb-fg)); }
.pb-cat-hero--content   .pb-cat-hero__spotlight { --tint-bg: color-mix(in oklab, var(--cat-content-a) 14%,   var(--pb-bg-2)); --tint-fg: color-mix(in oklab, var(--cat-content-b) 65%,   var(--pb-fg)); }
.pb-cat-hero--design    .pb-cat-hero__spotlight { --tint-bg: color-mix(in oklab, var(--cat-design-a) 14%,    var(--pb-bg-2)); --tint-fg: color-mix(in oklab, var(--cat-design-b) 65%,    var(--pb-fg)); }
.pb-cat-hero--code      .pb-cat-hero__spotlight { --tint-bg: color-mix(in oklab, var(--cat-code-a) 14%,      var(--pb-bg-2)); --tint-fg: color-mix(in oklab, var(--cat-code-b) 65%,      var(--pb-fg)); }
.pb-cat-hero--study     .pb-cat-hero__spotlight { --tint-bg: color-mix(in oklab, var(--cat-study-a) 14%,     var(--pb-bg-2)); --tint-fg: color-mix(in oklab, var(--cat-study-b) 65%,     var(--pb-fg)); }
.pb-cat-hero--business  .pb-cat-hero__spotlight { --tint-bg: color-mix(in oklab, var(--cat-business-a) 14%,  var(--pb-bg-2)); --tint-fg: color-mix(in oklab, var(--cat-business-b) 65%,  var(--pb-fg)); }
.pb-cat-hero--personal  .pb-cat-hero__spotlight { --tint-bg: color-mix(in oklab, var(--cat-personal-a) 14%,  var(--pb-bg-2)); --tint-fg: color-mix(in oklab, var(--cat-personal-b) 65%,  var(--pb-fg)); }
.pb-cat-hero--creative  .pb-cat-hero__spotlight { --tint-bg: color-mix(in oklab, var(--cat-creative-a) 14%,  var(--pb-bg-2)); --tint-fg: color-mix(in oklab, var(--cat-creative-b) 65%,  var(--pb-fg)); }


/*  ───────────────────────── 22. tag (hash chip) ───────────────────────── */
.pb-tag {
  padding: 5px 11px;
  border-radius: 999px;
  font-size: 12px; font-weight: 500;
  background: var(--pb-bg-2);
  color: var(--pb-fg-2);
  border: 1px solid var(--pb-line);
  text-decoration: none;
  display: inline-flex; align-items: center;
}
.pb-tag:hover { background: var(--pb-surface-2); }


/*  ───────────────────────── 23. detail (prompt page) ───────────────────────── */
.pb-detail {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 32px;
  margin-top: 22px;
}
.pb-detail__title-meta {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 14px;
}
.pb-detail__meta-dot {
  width: 3px; height: 3px; border-radius: 999px;
  background: var(--pb-line-3);
}
.pb-detail__meta-text {
  font-size: 12.5px; color: var(--pb-fg-mute);
}
.pb-detail__title {
  margin: 0;
  font-family: var(--pb-font-display);
  font-weight: 700; font-size: 42px;
  letter-spacing: -0.03em; line-height: 1.05;
  color: var(--pb-fg);
  margin-bottom: 16px;
}
.pb-detail__lead {
  margin: 0;
  font-size: 16px; color: var(--pb-fg-mute);
  line-height: 1.55;
  max-width: 640px;
  margin-bottom: 22px;
}

.pb-detail__body-card {
  position: relative;
  background: var(--pb-surface);
  border: 1px solid var(--pb-line-2);
  border-radius: var(--pb-r-lg);
  padding: 22px 24px;
  margin-bottom: 18px;
}
.pb-detail__body {
  font-family: var(--pb-font-mono);
  font-size: 13.5px; line-height: 1.65;
  color: var(--pb-fg-2);
  white-space: pre-wrap;
  max-width: 720px;
}
.pb-detail__copy {
  position: absolute;
  top: 14px; right: 14px;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 11px;
  border-radius: 7px;
  background: var(--pb-fg); color: #fff;
  border: none;
  font-size: 12px; font-weight: 600;
  cursor: pointer;
}

.pb-detail__tags {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-bottom: 26px;
}

.pb-detail__output-placeholder {
  height: 170px;
  border-radius: var(--pb-r-md);
  border: 1px solid var(--pb-line);
  background: repeating-linear-gradient(45deg,
    var(--pb-bg-2),
    var(--pb-bg-2) 8px,
    var(--pb-surface) 8px,
    var(--pb-surface) 16px);
  display: flex; align-items: center; justify-content: center;
}
.pb-detail__output-placeholder-label {
  font-family: var(--pb-font-mono);
  font-size: 11px; letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--pb-fg-subtle);
  padding: 6px 10px;
  border-radius: 5px;
  background: var(--pb-surface);
  border: 1px solid var(--pb-line-2);
}


/*  ───────────────────────── 24. right rail (detail) ───────────────────────── */
.pb-rail {
  position: sticky;
  top: 80px;
  align-self: start;
}
.pb-rail__card {
  padding: 18px;
  border-radius: var(--pb-r-lg);
  background: var(--pb-surface);
  border: 1px solid var(--pb-line);
  margin-bottom: 14px;
}
.pb-rail__model-row {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 12px;
}
.pb-rail__model-name {
  font-family: var(--pb-font-display);
  font-weight: 700; font-size: 14px;
  letter-spacing: -0.01em;
  color: var(--pb-fg);
}
.pb-rail__model-sub {
  font-size: 11.5px; color: var(--pb-fg-mute);
}
.pb-rail__stats-title {
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--pb-fg-subtle);
  margin-bottom: 12px;
}
.pb-rail__stat {
  display: flex; justify-content: space-between;
  padding: 6px 0;
  font-size: 13px;
}
.pb-rail__stat-key { color: var(--pb-fg-mute); }
.pb-rail__stat-val { color: var(--pb-fg); font-weight: 500; }

.pb-rail__tip {
  padding: 16px;
  border-radius: var(--pb-r-lg);
  background: var(--pb-violet-softer);
  border: 1px solid var(--pb-violet-soft);
  font-size: 13px;
  color: var(--pb-fg-2);
  line-height: 1.5;
}
.pb-rail__tip-eyebrow {
  display: flex; align-items: center; gap: 7px;
  margin-bottom: 6px;
  color: var(--pb-violet-deep);
  font-weight: 600;
  font-size: 12.5px;
}


/*  ───────────────────────── 25. responsive ───────────────────────── */
@media (max-width: 1199px) {
  .pb-side { width: 200px; }
  .pb-main { padding: 24px 28px 60px; }
  .pb-grid--3 { grid-template-columns: repeat(2, 1fr); }
  .pb-grid--5 { grid-template-columns: repeat(3, 1fr); }
  .pb-cat-hero__title { font-size: 32px; }
  .pb-detail { grid-template-columns: 1fr; }
  .pb-rail { position: static; }
}

@media (max-width: 767px) {
  .pb-side {
    /* Default: hide on mobile, expose via a menu button (TODO in production) */
    display: none;
  }
  .pb-main { padding: 20px 16px 40px; }
  .pb-topbar { padding: 12px 16px; gap: 10px; }
  .pb-topbar__search-wrap { display: none; }
  .pb-grid--3, .pb-grid--4, .pb-grid--5 { grid-template-columns: 1fr; }
  .pb-grid--2 { grid-template-columns: 1fr; }
  .pb-hero__title { font-size: 28px; }
  .pb-cat-hero { flex-direction: column; }
  .pb-cat-hero__spotlight { width: 100%; height: 140px; }
  .pb-cat-hero__title { font-size: 28px; }
  .pb-detail__title { font-size: 30px; }
  .pb-filter { margin-left: -16px; margin-right: -16px; padding: 12px 16px; flex-wrap: wrap; }
}


/*  ───────────────────────── 26. utility ───────────────────────── */
.pb-spacer { flex: 1; }
.pb-divider {
  height: 1px; background: var(--pb-line);
  margin: 30px 0;
}

/* PB-MOBILE-NAV-28may */
.pb-burger{display:none;background:transparent;border:0;padding:8px;margin-right:6px;cursor:pointer;color:var(--pb-fg,#18181B);align-items:center;justify-content:center;border-radius:8px}
.pb-burger:hover{background:var(--pb-surface-2,rgba(0,0,0,.05))}
.pb-burger svg{width:22px;height:22px;display:block}
.pb-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:90;opacity:0;pointer-events:none;transition:opacity .2s ease}
body.pb-menu-open .pb-backdrop{opacity:1;pointer-events:auto}
@media (max-width:767px){
  .pb-burger{display:inline-flex}
  .pb-shell{grid-template-columns:1fr !important}
  .pb-side{display:block !important;position:fixed !important;top:0;left:0;bottom:0;width:280px;max-width:85vw;height:100vh;height:100dvh;z-index:100;transform:translateX(-100%);transition:transform .25s ease;overflow-y:auto;-webkit-overflow-scrolling:touch;background:var(--pb-bg,#FAFAF7);border-right:1px solid var(--pb-line);box-shadow:2px 0 24px rgba(0,0,0,.12);padding:20px 12px 24px}
  body.pb-menu-open .pb-side{transform:translateX(0)}
  body.pb-menu-open{overflow:hidden}
  .pb-main{padding-left:16px !important;min-width:0}
}

/* PB-KONSTRUKTOR-CSS */
.pb-konstruktor{max-width:1040px;margin:0 auto;}
.pb-breadcrumb{font-size:.85rem;color:var(--pb-text-muted,#71717A);margin-bottom:8px;}
.pb-breadcrumb a{color:var(--pb-text-muted,#71717A);text-decoration:none;}
.pb-k-hero h1{font-size:2rem;margin:0 0 .4rem;}
.pb-k-sub{color:var(--pb-text-muted,#71717A);max-width:680px;}
.pb-k-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin:24px 0;align-items:start;}
.pb-k-form{display:flex;flex-direction:column;gap:18px;}
.pb-k-field label{display:block;font-weight:600;margin-bottom:6px;font-size:.95rem;}
.pb-k-input{width:100%;padding:10px 12px;border:1px solid var(--pb-border,#E4E4E7);border-radius:10px;background:var(--pb-bg-card,#fff);color:var(--pb-text,#18181B);font-size:.95rem;box-sizing:border-box;}
.pb-k-input:focus{outline:none;border-color:var(--pb-accent,#7C3AED);}
.pb-k-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px;}
.pb-k-chip{border:1px solid var(--pb-border,#E4E4E7);background:transparent;color:var(--pb-text-muted,#71717A);border-radius:999px;padding:4px 12px;font-size:.82rem;cursor:pointer;transition:.15s;}
.pb-k-chip:hover{border-color:var(--pb-accent,#7C3AED);color:var(--pb-accent,#7C3AED);}
.pb-k-preview{position:sticky;top:16px;border:1px solid var(--pb-border,#E4E4E7);border-radius:14px;background:var(--pb-bg-card,#fff);padding:16px;}
.pb-k-preview-head{font-weight:600;margin-bottom:10px;}
.pb-k-preview-head small{color:var(--pb-text-muted,#71717A);font-weight:400;}
.pb-k-out{white-space:pre-wrap;word-break:break-word;background:var(--pb-bg,#FAFAF7);border-radius:10px;padding:14px;min-height:170px;font-size:.92rem;line-height:1.55;margin:0 0 14px;font-family:inherit;}
.pb-k-actions{display:flex;gap:10px;}
.pb-k-btn{border:1px solid var(--pb-border,#E4E4E7);background:transparent;color:var(--pb-text,#18181B);border-radius:10px;padding:9px 16px;font-size:.9rem;cursor:pointer;}
.pb-k-btn-primary{background:var(--pb-accent,#7C3AED);border-color:var(--pb-accent,#7C3AED);color:#fff;}
.pb-k-btn-primary:hover{background:var(--pb-accent-2,#5B21B6);}
.pb-k-btn.is-done{border-color:#16a34a;color:#16a34a;}
.pb-k-text{margin-top:32px;max-width:760px;}
.pb-k-text h2{font-size:1.3rem;margin:1.6rem 0 .6rem;}
.pb-k-text h3{font-size:1.02rem;margin:1.1rem 0 .3rem;}
.pb-k-text p{line-height:1.6;color:var(--pb-text,#18181B);}
.pb-k-related{margin-top:28px;}
.pb-k-related a{display:inline-block;margin:4px 8px 4px 0;color:var(--pb-accent,#7C3AED);text-decoration:none;border-bottom:1px solid transparent;}
.pb-k-related a:hover{border-bottom-color:var(--pb-accent,#7C3AED);}
@media(max-width:860px){.pb-k-grid{grid-template-columns:1fr;}.pb-k-preview{position:static;}}


/* PB-KONSTRUKTOR-CSS-V2 */
.pb-k-tabs{display:flex;gap:8px;margin:18px 0 4px;flex-wrap:wrap;}
.pb-k-tab{border:1px solid var(--pb-border,#E4E4E7);background:var(--pb-bg-card,#fff);color:var(--pb-text-muted,#71717A);border-radius:999px;padding:7px 18px;font-size:.92rem;cursor:pointer;transition:.15s;}
.pb-k-tab:hover{border-color:var(--pb-accent,#7C3AED);color:var(--pb-accent,#7C3AED);}
.pb-k-tab.is-active{background:var(--pb-accent,#7C3AED);border-color:var(--pb-accent,#7C3AED);color:#fff;}
.pb-k-adv{border:1px dashed var(--pb-border,#E4E4E7);border-radius:12px;padding:10px 14px;}
.pb-k-adv summary{cursor:pointer;font-weight:600;font-size:.92rem;color:var(--pb-text-muted,#71717A);}
.pb-k-adv .pb-k-field{margin-top:14px;}
.pb-k-check label{display:flex;align-items:center;gap:8px;font-weight:500;font-size:.92rem;cursor:pointer;}

/* PB-KONSTRUKTOR-CSS-V3: presets */
.pb-k-presets{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 14px}
.pb-k-preset{padding:7px 14px;border:1px solid var(--pb-violet);background:var(--pb-violet-soft);color:var(--pb-violet);border-radius:999px;font-size:13px;cursor:pointer;transition:background .15s,color .15s}
.pb-k-preset:hover{background:var(--pb-violet);color:#fff}

/* PB-TOOL-LINK-CSS */
.pb-tool-link-wrap{margin:.2rem 0 1.5rem;}
.pb-tool-link{display:inline-block;padding:.5rem .9rem;border:1px solid #7C3AED;border-radius:8px;color:#7C3AED;text-decoration:none;font-weight:600;font-size:.95rem;transition:background .15s,color .15s;}
.pb-tool-link:hover{background:#7C3AED;color:#fff;}