/* =========================================================
   WriteUpCafe — app.css  (Palette B – Modern Minimal)
   Mobile-first, no JS framework, no CSS framework.
   ========================================================= */

/* ---------------------------------------------------------
   1. Design System Tokens
   --------------------------------------------------------- */
:root {
  /* ── Core palette ─────────────────────────────────────── */
  --ink:            #1a1a2e;
  --ink-light:      #2d2d44;
  --ink-muted:      #6b7194;
  --parchment:      #faf9f7;
  --parchment-warm: #f5f3ef;
  --cream:          #edeae4;
  --accent:         #e8553d;
  --accent-hover:   #d4432c;
  --accent-glow:    rgba(232,85,61,0.12);
  --teal:           #2ab09e;
  --teal-soft:      rgba(42,176,158,0.1);
  --gold:           #d4a853;
  --violet:         #7c5cbf;
  --header-bg:      rgba(22, 12, 2, .97);
  --mist:           #E8E2D9;
  --espresso:       #2C1F14;
  --copper:         #C4622D;
  --border:         rgba(0,0,0,0.08);
  --shadow-sm:      0 1px 3px rgba(0,0,0,0.06);
  --shadow-md:      0 4px 16px rgba(0,0,0,0.08);
  --radius:         12px;
  --radius-lg:      20px;
  --blue:           #3b82f6;
  --blue-soft:      rgba(59,130,246,0.1);

  /* ── Old brand color aliases ─────────────────────────── */
  --color-purple: var(--violet);
  --color-indigo: var(--violet);

  /* ── Backward-compat aliases ──────────────────────────── */
  --bg:           var(--parchment);
  --surface:      #ffffff;
  --text:         var(--ink);
  --muted:        var(--ink-muted);
  --link:         var(--blue);

  /* Always-dark section tokens (hero, CTA, footer, admin) */
  --ink-surface: var(--header-bg);
  --ink-text:    #f2f2f2;
  --ink-border:  rgba(255,255,255,.08);

  /* Status */
  --color-error:   #DC2626;
  --color-success: #16A34A;

  /* Radii aliases */
  --radius-sm:   6px;
  --radius-md:   var(--radius);
  --radius-full: 9999px;

  /* Shadow alias */
  --shadow-lg: 0 8px 32px rgba(0,0,0,.12);

  /* Brand gradient (used for avatar placeholders, badges, etc.) */
  --gradient-brand: linear-gradient(135deg, var(--accent) 0%, var(--violet) 100%);

  /* Typography */
  --font-sans:  'DM Sans', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-serif: 'Playfair Display', ui-serif, Georgia, serif;
  --font-mono:  'JetBrains Mono', ui-monospace, 'Cascadia Code', Menlo, monospace;

  --transition: 160ms ease;
}

/* ---------------------------------------------------------
   2. Reset & Base
   --------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { font-size: 16px; scroll-behavior: smooth; scrollbar-gutter: stable; }

body {
  font-family: var(--font-sans);
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
  word-break: break-word;
}

a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }

img { max-width: 100%; display: block; }

ul { list-style: none; }

/* Global heading font — Playfair Display */
h1, h2, h3, h4, h5, h6 { font-family: var(--font-serif); }

/* Utility: mono labels / counters */
.font-mono { font-family: var(--font-mono); }

/* ---------------------------------------------------------
   3. Layout Primitives
   --------------------------------------------------------- */
.container {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 1rem;
}

@media (min-width: 768px)  { .container { padding: 0 1.5rem; } }
@media (min-width: 1100px) { .container { padding: 0 2rem; } }

/* 3-column app layout (logged-in home) */
.layout-app {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.layout-app__body {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  padding: 24px 32px;
}

/* Tablet: right sidebar only */
@media (min-width: 769px) and (max-width: 1100px) {
  .layout-app__body {
    grid-template-columns: 1fr 300px;
    gap: 28px;
  }
}

/* Desktop: full 3-column */
@media (min-width: 1101px) {
  .layout-app__body {
    grid-template-columns: 220px 1fr 320px;
    gap: 28px;
  }
}

/* ---------------------------------------------------------
   4. Header / Navbar
   --------------------------------------------------------- */
.nav-public {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--header-bg);
  color: var(--ink-text);
  height: 60px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid rgba(255,255,255,.06);
}

.nav-app {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--header-bg);
  color: var(--ink-text);
  height: 60px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid rgba(255,255,255,.06);
}

.nav-public .btn-outline {
  color: #fff;
  border-color: rgba(255,255,255,.25);
}
.nav-public .btn-outline:hover {
  border-color: rgba(255,255,255,.5);
}

.nav-public .container,
.nav-app .container {
  display: flex;
  align-items: center;
  gap: 1rem;
  width: 100%;
}

.nav__logo {
  font-family: var(--font-serif);
  font-size: 1.25rem;
  font-weight: 800;
  color: #fff;
  text-decoration: none;
  flex-shrink: 0;
  letter-spacing: -.02em;
}

.nav__logo span { color: var(--accent); }

.nav__spacer { flex: 1; }

.nav__actions {
  display: flex;
  align-items: center;
  gap: .75rem;
}

.nav__user {
  font-size: .875rem;
  color: var(--muted);
}


/* ---------------------------------------------------------
   5. Buttons
   --------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .375rem;
  padding: .5rem 1.125rem;
  border: none;
  border-radius: 10px;
  font-size: .875rem;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  font-family: inherit;
  transition: background var(--transition), color var(--transition),
              border-color var(--transition), opacity var(--transition);
  white-space: nowrap;
}

.btn:hover { text-decoration: none; }

.btn-primary {
  background: var(--accent);
  color: #fff;
}

.btn-primary:hover { background: var(--accent-hover); }

.btn-outline {
  background: transparent;
  color: var(--text);
  border: 1.5px solid var(--border);
}

.btn-outline:hover {
  border-color: var(--muted);
  background: transparent;
}

.btn-dark {
  background: var(--ink-surface);
  color: #fff;
}

.btn-ghost {
  background: transparent;
  color: var(--muted);
  padding: .5rem .75rem;
  border: none;
}

.btn-ghost:hover {
  background: var(--parchment-warm);
  color: var(--text);
}

.btn-sm { padding: .3rem .75rem; font-size: .8rem; }

/* ---------------------------------------------------------
   6. Cards
   --------------------------------------------------------- */
.card {
  background: var(--surface);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  overflow: hidden;
  transition: box-shadow var(--transition), border-color var(--transition);
}

.card:hover { box-shadow: var(--shadow-md); border-color: transparent; }

/* Blog/card cover image */
.card__cover {
  width: 100%;
  height: 130px;
  object-fit: cover;
  display: block;
}

.card__body { padding: 1.25rem; }

.card__title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: .375rem;
  line-height: 1.4;
}

.card__meta {
  font-size: .8rem;
  color: var(--muted);
}

/* ---------------------------------------------------------
   7. Badges / Tags
   --------------------------------------------------------- */
.badge {
  display: inline-block;
  padding: .25rem .625rem;
  border-radius: var(--radius-full);
  font-size: .75rem;
  font-weight: 500;
  background: var(--accent-glow);
  color: var(--accent);
  text-decoration: none;
  transition: background var(--transition);
}

.badge:hover { background: rgba(232,85,61,.2); text-decoration: none; }


/* ---------------------------------------------------------
   8. Hero Section (public homepage)
   --------------------------------------------------------- */
.hero {
  background: var(--ink-surface);
  color: var(--ink-text);
  padding: 5rem 0 4rem;
  text-align: center;
}

.hero__headline {
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: 900;
  line-height: 1.15;
  margin-bottom: 1rem;
  letter-spacing: -.03em;
}

.hero__headline em {
  font-style: normal;
  color: var(--accent);
}

.hero__sub {
  font-size: 1.125rem;
  color: var(--ink-muted);
  max-width: 560px;
  margin: 0 auto 2rem;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
  margin-bottom: 3rem;
}

/* Hero-specific button overrides (always on dark bg) */
.hero .btn-outline {
  color: var(--ink-text);
  border-color: rgba(255,255,255,.3);
}

.hero .btn-outline:hover {
  border-color: rgba(255,255,255,.7);
  background: transparent;
}

.hero__cards {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
  max-width: 700px;
  margin: 0 auto;
}

.hero__card {
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--radius-md);
  padding: 1.25rem 1.5rem;
  text-align: left;
  flex: 1;
  min-width: 220px;
}

.hero__card h3 {
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: .5rem;
  color: var(--accent);
}

.hero__card ul { padding-left: 1rem; list-style: disc; }
.hero__card li { color: #bbb; font-size: .875rem; margin-bottom: .25rem; }

/* ---------------------------------------------------------
   9. Stats Bar
   --------------------------------------------------------- */
.stats-bar {
  background: var(--surface);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 1.5rem 0;
}

.stats-bar__grid {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  justify-content: center;
  align-items: center;
}

.stat-item { text-align: center; }

.stat-item__value {
  display: block;
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--accent);
}

.stat-item__label {
  font-size: .8rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .05em;
}

/* ---------------------------------------------------------
   10. Section Headings
   --------------------------------------------------------- */
.section { padding: 3rem 0; }

.section--alt { background: var(--surface); }

.section__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 1.5rem;
}

.section__title {
  font-size: 1.375rem;
  font-weight: 700;
  letter-spacing: -.01em;
}

.section__link { font-size: .875rem; }

/* ---------------------------------------------------------
   11. Trending Bar
   --------------------------------------------------------- */
.trending-bar {
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  padding: .75rem 0;
}

.trending-bar__inner {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  align-items: center;
}

.trending-bar__label {
  font-size: .8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--muted);
  margin-right: .5rem;
}

/* ---------------------------------------------------------
   12. Content Grid (homepage)
   --------------------------------------------------------- */
.content-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}

@media (min-width: 768px) {
  .content-grid { grid-template-columns: 1fr 1fr; }
}

.post-list { display: flex; flex-direction: column; gap: .625rem; }

.post-item {
  display: flex;
  flex-direction: column;
  gap: .25rem;
  padding: .875rem 1rem;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  background: var(--surface);
  transition: box-shadow var(--transition), border-color var(--transition);
}

.post-item:hover { box-shadow: var(--shadow-sm); border-color: var(--muted); }

.post-item__row {
  display: flex;
  gap: .75rem;
  align-items: flex-start;
  width: 100%;
}

.post-item__content { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .25rem; }

.post-item__thumb {
  width: 80px;
  height: 60px;
  border-radius: var(--radius-sm);
  object-fit: cover;
  flex-shrink: 0;
}

/* Small avatar inline with meta text */
.post-item__avatar {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  object-fit: cover;
  vertical-align: middle;
  margin-right: .25rem;
}

.post-item__title { font-weight: 600; font-size: .9375rem; color: var(--text); }
.post-item__meta  { font-size: .8rem; color: var(--muted); display: flex; align-items: center; flex-wrap: wrap; gap: .25rem; }

.blog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1rem;
}

/* ---------------------------------------------------------
   13. Author Cards Row
   --------------------------------------------------------- */
.author-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.author-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
  padding: 1.25rem 1rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  text-align: center;
  flex: 1;
  min-width: 140px;
  transition: box-shadow var(--transition), border-color var(--transition);
}

.author-card:hover { box-shadow: var(--shadow-sm); border-color: var(--muted); }

.author-card__avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  font-weight: 800;
  color: #fff;
  flex-shrink: 0;
}

.author-card__name { font-weight: 700; font-size: .9rem; }
.author-card__meta { font-size: .78rem; color: var(--muted); }

/* ---------------------------------------------------------
   14. CTA Banner
   --------------------------------------------------------- */
.cta-banner {
  background: var(--ink-surface);
  color: var(--ink-text);
  padding: 4rem 0;
  text-align: center;
}

.cta-banner__title {
  font-size: clamp(1.5rem, 3vw, 2.5rem);
  font-weight: 900;
  margin-bottom: 1rem;
  letter-spacing: -.02em;
}

.cta-banner__sub { color: var(--ink-muted); margin-bottom: 2rem; }

/* ---------------------------------------------------------
   15. Footer
   --------------------------------------------------------- */
.site-footer {
  background: transparent;
  color: var(--ink-muted);
  padding: 24px 0;
  font-size: 12px;
  border-top: 1px solid var(--border);
  margin-top: 40px;
}

.site-footer .container,
.site-footer__inner {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: space-between;
  align-items: center;
}

.footer-links {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}

.site-footer a,
.footer-links a {
  font-size: 12px;
  color: var(--ink-muted);
  text-decoration: none;
}
.site-footer a:hover,
.footer-links a:hover { color: var(--ink); text-decoration: none; }

/* ---------------------------------------------------------
   16. Auth Forms
   --------------------------------------------------------- */
.auth-wrap {
  min-height: calc(100vh - 61px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 1rem;
}

.auth-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 2.5rem 2rem;
  width: 100%;
  max-width: 440px;
  box-shadow: var(--shadow-lg);
}

.auth-card__title {
  font-size: 1.625rem;
  font-weight: 800;
  margin-bottom: .375rem;
  letter-spacing: -.02em;
}

.auth-card__sub {
  color: var(--muted);
  font-size: .9rem;
  margin-bottom: 1.75rem;
}

/* Form elements */
.form-group { margin-bottom: 1.125rem; }

.form-label {
  display: block;
  font-size: .875rem;
  font-weight: 600;
  margin-bottom: .4rem;
}

.form-input {
  display: block;
  width: 100%;
  padding: .625rem .875rem;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-md);
  font-size: .9375rem;
  font-family: inherit;
  background: var(--bg);
  color: var(--text);
  transition: border-color var(--transition), box-shadow var(--transition);
}

.form-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(232,85,61,.15);
}

.form-input.is-invalid { border-color: var(--color-error); }

.form-error {
  display: block;
  font-size: .8rem;
  color: var(--color-error);
  margin-top: .3rem;
}

.alert {
  border-radius: var(--radius-md);
  padding: .75rem 1rem;
  font-size: .875rem;
  margin-bottom: 1rem;
}

.alert-error {
  background: rgba(220,38,38,.08);
  border: 1px solid rgba(220,38,38,.25);
  color: var(--color-error);
}

.alert-success {
  background: rgba(22,163,74,.08);
  border: 1px solid rgba(22,163,74,.25);
  color: var(--color-success);
}

.form-submit { width: 100%; margin-top: .5rem; padding: .7rem; font-size: 1rem; }

.auth-footer {
  text-align: center;
  margin-top: 1.25rem;
  font-size: .875rem;
  color: var(--muted);
}

/* ---------------------------------------------------------
   17. Left Sidebar (app layout)
   --------------------------------------------------------- */
.sidebar-left {
  display: none;
  padding: 24px 0;
  position: sticky;
  top: 88px;
  height: fit-content;
}

@media (min-width: 1101px) { .sidebar-left { display: block; } }

.sidebar-nav { display: flex; flex-direction: column; gap: 0; }

.sidebar-nav__item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-radius: 10px;
  color: var(--ink-muted);
  font-weight: 500;
  font-size: 14px;
  transition: all .2s;
  text-decoration: none;
  margin-bottom: 4px;
}

.sidebar-nav__item:hover {
  background: #fff;
  color: var(--ink);
  box-shadow: var(--shadow-sm);
  text-decoration: none;
}

.sidebar-nav__item.active,
.sidebar-nav__item--active {
  background: #fff;
  color: var(--accent);
  box-shadow: var(--shadow-sm);
  font-weight: 600;
  text-decoration: none;
}

.sidebar-nav__section {
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-muted);
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 0 14px;
  margin: 12px 0 8px;
}

.sidebar-nav__divider {
  height: 1px;
  background: var(--border);
  margin: 12px 0;
}

/* ---------------------------------------------------------
   18. Feed (app layout)
   --------------------------------------------------------- */
.feed { padding: 0.5rem 0; }
/*
.feed-tabs {
  display: flex;
  align-items: center;
  gap: 4px;
  background: #fff;
  border-radius: var(--radius);
  padding: 4px;
  margin-bottom: 20px;
  border: 1px solid var(--border);
  overflow-x: auto;
}

.feed-tab {
  padding: 10px 20px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-muted);
  cursor: pointer;
  transition: all .2s;
  border: none;
  background: none;
  font-family: 'DM Sans', sans-serif;
  white-space: nowrap;
  text-decoration: none;
  display: inline-block;
}

.feed-tab:hover { color: var(--ink); text-decoration: none; }
.feed-tab.active { background: var(--ink); color: #fff; font-weight: 600; }

.feed-empty {
  text-align: center;
  padding: 3rem 1rem;
  color: var(--muted);
}

.feed-empty__icon { font-size: 2.5rem; margin-bottom: .75rem; }
.feed-empty__title { font-size: 1.125rem; font-weight: 700; margin-bottom: .375rem; color: var(--text); }
*/
/* ---------------------------------------------------------
   19. Right Sidebar (app layout)
   --------------------------------------------------------- */
.sidebar-right {
  display: none;
  padding: 24px 0;
  position: sticky;
  top: 88px;
  height: fit-content;
}

@media (min-width: 769px) { .sidebar-right { display: block; } }

/* Sidebar card */
.sidebar-widget,
.sidebar-card {
  background: #fff;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  padding: 20px;
  margin-bottom: 16px;
}

/* Sidebar title */
.sidebar-widget__title,
.sidebar-card__title {
  font-family: var(--font-serif);
  font-size: clamp(14px, 2vw, 16px);
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Badge (Live / Suggested) */
.sidebar-badge {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  color: var(--accent);
  background: var(--accent-glow);
  padding: 3px 10px;
  border-radius: 100px;
  text-transform: uppercase;
  letter-spacing: .5px;
}

/* Trending items */
.trending-item {
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: background .2s;
}
.trending-item:last-child { border-bottom: none; }
.trending-item:hover {
  background: var(--parchment-warm);
  margin: 0 -20px;
  padding: 10px 20px;
  border-radius: 8px;
}
.trending-item__label {
  font-size: 11px;
  display:none;
  color: var(--ink-muted);
  text-transform: uppercase;
  letter-spacing: .5px;
  margin-bottom: 2px;
}
.trending-item__topic { font-size: 14px; font-weight: 600; color: var(--ink); }
.trending-item__count { font-size: 12px; color: var(--ink-muted); margin-top: 2px; }

/* Who to follow items */
.follow-suggestion {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}
.follow-suggestion:last-of-type { border-bottom: none; }

.follow-suggestion__avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--gold));
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  color: #fff;
  font-size: .85rem;
  flex-shrink: 0;
  overflow: hidden;
}
.follow-suggestion__avatar img { width: 100%; height: 100%; object-fit: cover; }

.follow-suggestion__info { flex: 1; min-width: 0; }
.follow-suggestion__name { font-size: 14px; font-weight: 600; color: var(--ink); }
.follow-suggestion__meta { font-size: 12px; color: var(--ink-muted); }

.follow-suggestion__form { margin-left: auto; flex-shrink: 0; }

.btn-follow {
  font-size: 12px;
  font-weight: 600;
  color: var(--accent);
  background: var(--accent-glow);
  border: none;
  padding: 5px 12px;
  border-radius: 6px;
  cursor: pointer;
  font-family: 'DM Sans', sans-serif;
  transition: background .2s;
}
.btn-follow:hover { background: rgba(232,85,61,.2); }

/* Topic tags grid */
.topics-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.topic-tag {
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 500;
  color: var(--ink);
  background: var(--parchment-warm);
  border: 1px solid var(--border);
  cursor: pointer;
  transition: all .2s;
  text-decoration: none;
}
.topic-tag:hover {
  background: var(--accent-glow);
  color: var(--accent);
  border-color: var(--accent);
  text-decoration: none;
}

/* Guidelines dark card */
.guidelines-card {
  background: var(--ink);
  color: #fff;
  border-radius: var(--radius);
  padding: 20px;
  margin-bottom: 16px;
}
.guidelines-card h4 {
  font-family: var(--font-serif);
  font-size: 15px;
  margin-bottom: 10px;
}
.guidelines-card p {
  font-size: 13px;
  color: rgba(255,255,255,.6);
  line-height: 1.5;
  margin-bottom: 12px;
}
.guidelines-card a {
  font-size: 13px;
  color: var(--accent);
  font-weight: 600;
  text-decoration: none;
}

/* Sidebar more link */
.sidebar-widget__more {
  display: block;
  font-size: 12px;
  color: var(--ink-muted);
  margin-top: 12px;
  text-decoration: none;
}
.sidebar-widget__more:hover { color: var(--accent); text-decoration: none; }

/* ---------------------------------------------------------
   20. Profile Hero (author/blog pages)
   --------------------------------------------------------- */
.profile-hero {
  /* background: var(--ink-surface); */
  color: var(--ink-text);
  padding: 3rem 0 2rem;
}

.profile-hero__inner {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

@media (min-width: 768px) {
  .profile-hero__inner {
    flex-direction: row;
    align-items: flex-end;
    gap: 1.5rem;
  }
}

.profile-avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.25rem;
  font-weight: 800;
  color: #fff;
  flex-shrink: 0;
}

.profile-hero__name { font-size: 1.625rem; font-weight: 800; letter-spacing: -.02em; }
.profile-hero__bio  { color: var(--ink-muted); font-size: .9375rem; margin-top: .25rem; }

.profile-stats {
  display: flex;
  gap: 1.5rem;
  margin-top: .5rem;
}

.profile-stat__value { font-weight: 800; font-size: 1.125rem; }
.profile-stat__label { font-size: .75rem; color: var(--ink-muted); }

/* Profile tabs */
.profile-tabs {
/*  border-bottom: 1px solid var(--border);
  background: var(--surface); */
  position: sticky;
  top: 61px;
  z-index: 50;
}

.profile-tabs__inner {
  display: flex;
  overflow-x: auto;
}

.profile-tab {
  padding: .875rem 1.25rem;
  font-size: .875rem;
  font-weight: 600;
  color: var(--muted);
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  transition: color var(--transition), border-color var(--transition);
}

.profile-tab.active { color: var(--accent); border-bottom-color: var(--accent); }
.profile-tab:hover  { color: var(--text); text-decoration: none; }

/* ---------------------------------------------------------
   21. Admin Dashboard
   --------------------------------------------------------- */
.admin-header {
  background: var(--ink-surface);
  color: var(--ink-text);
  padding: 2rem 0;
  margin-bottom: 2rem;
}

.admin-header__title { font-size: 1.5rem; font-weight: 800; letter-spacing: -.02em; }
.admin-header__sub   { color: var(--ink-muted); font-size: .875rem; margin-top: .25rem; }

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 1rem;
  margin-bottom: 2rem;
}

.stat-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 1.25rem;
}

.stat-card__label { font-size: .8rem; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.stat-card__value { font-size: 2rem; font-weight: 900; margin-top: .25rem; }

.stat-card--purple .stat-card__value,
.stat-card--indigo .stat-card__value,
.stat-card--cyan   .stat-card__value { color: var(--accent); }
.stat-card--dark   .stat-card__value { color: var(--text); }

/* ---------------------------------------------------------
   22. Stub / Coming Soon Placeholder
   --------------------------------------------------------- */
.stub-placeholder {
  text-align: center;
  padding: 4rem 1rem;
  color: var(--muted);
  border: 2px dashed var(--border);
  border-radius: var(--radius-lg);
  margin: 2rem 0;
}

.stub-placeholder__title { font-size: 1.125rem; font-weight: 700; margin-bottom: .5rem; color: var(--text); }

/* ---------------------------------------------------------
   23. Article / Post Content (reading typography)
   --------------------------------------------------------- */
.post-wrap { padding: 3rem 0; }

.post-header {
  max-width: 720px;
  margin: 0 auto 2.5rem;
}

.post-header__title {
  font-family: var(--font-serif);
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -.02em;
  color: var(--text);
  margin-bottom: .875rem;
}

.post-header__meta {
  font-size: .875rem;
  color: var(--muted);
}

.post-header__meta a { color: var(--link); }

.article-body {
  font-family: var(--font-serif);
  font-size: 1.125rem;
  line-height: 1.75;
  color: var(--text);
  max-width: 720px;
  margin: 0 auto;
}

.article-body h2,
.article-body h3,
.article-body h4 {
  font-family: var(--font-sans);
  font-weight: 700;
  margin-top: 2.5rem;
  margin-bottom: .75rem;
  line-height: 1.3;
  color: var(--text);
}

.article-body h2 { font-size: 1.5rem; }
.article-body h3 { font-size: 1.25rem; }
.article-body h4 { font-size: 1.125rem; }

.article-body p { margin-bottom: 1.5rem; }

.article-body a {
  color: var(--link);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.article-body ul,
.article-body ol {
  padding-left: 1.75rem;
  margin-bottom: 1.5rem;
}

.article-body ul { list-style: disc; }
.article-body ol { list-style: decimal; }
.article-body li { margin-bottom: .5rem; }

.article-body blockquote {
  border-left: 3px solid var(--accent);
  padding: .75rem 1.25rem;
  margin: 2rem 0;
  color: var(--muted);
  font-style: italic;
  background: rgba(232,85,61,.05);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}


.article-body pre,
.article-body code { font-family: var(--font-mono); }

.article-body pre {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 1.25rem;
  overflow-x: auto;
  font-size: .875rem;
  line-height: 1.6;
  margin-bottom: 1.5rem;
}

.article-body code {
  background: rgba(232,85,61,.08);
  color: var(--accent);
  padding: .15em .4em;
  border-radius: var(--radius-sm);
  font-size: .9em;
}

.article-body pre code { background: none; color: inherit; padding: 0; }

.article-body hr {
  border: none;
  border-top: 1px solid var(--border);
  margin: 2.5rem 0;
}

.article-body img {
  max-width: 100%;
  border-radius: var(--radius-md);
  margin: 1.5rem 0;
}

/* ---------------------------------------------------------
   24. Feed Cards
   --------------------------------------------------------- */
.feed-cards { display: flex; flex-direction: column; gap: 0; }

.feed-card {
  background: #fff;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  padding: 20px;
  margin-bottom: 16px;
  transition: box-shadow .25s, border-color .25s;
}

.feed-card:hover { box-shadow: var(--shadow-md); border-color: transparent; }

/* Header row: avatar + meta + kebab */
.feed-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: .625rem;
}

.feed-card__author-link {
  display: flex;
  align-items: center;
  gap: .625rem;
  text-decoration: none;
  color: inherit;
}

.feed-card__avatar-wrap {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
}

.feed-card__avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
}

.feed-card__avatar--init {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--gold));
  color: #fff;
  font-weight: 700;
  font-size: .9rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.feed-card__author-name {
  font-weight: 600;
  font-size: .875rem;
  color: var(--text);
  display: block;
  line-height: 1.2;
}

.feed-card__timestamp {
  font-size: .75rem;
  color: var(--muted);
  display: block;
  margin-top: .1rem;
}

.feed-card__kebab {
  background: none;
  border: none;
  color: var(--muted);
  cursor: pointer;
  padding: .25rem;
  border-radius: var(--radius-sm);
  line-height: 0;
  transition: color var(--transition), background var(--transition);
}
.feed-card__kebab:hover { color: var(--text); background: var(--bg); }

/* Topic pill + reading time */
.feed-card__meta-row {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-bottom: .625rem;
}

.feed-card__topic-pill {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  color: var(--teal);
  background: var(--teal-soft);
  padding: 3px 10px;
  border-radius: 6px;
  letter-spacing: .5px;
  text-transform: uppercase;
}

.feed-card__reading-time {
  font-size: .75rem;
  color: var(--muted);
}

/* Featured image */
.feed-card__image {
  width: 100%;
  max-height: 220px;
  object-fit: cover;
  border-radius: var(--radius-md);
  display: block;
  margin-bottom: .75rem;
}

/* Title + excerpt */
.feed-card__body { margin-bottom: .875rem; }

.feed-card__title {
  display: block;
  font-family: var(--font-serif);
  font-size: clamp(17px, 2.5vw, 20px);
  font-weight: 700;
  line-height: 1.3;
  color: var(--ink);
  text-decoration: none;
  cursor: pointer;
  margin-bottom: 8px;
}
.feed-card__title:hover { color: var(--accent); }

.feed-card__excerpt {
  font-size: .875rem;
  color: var(--muted);
  line-height: 1.55;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ---------------------------------------------------------
   25. Engagement Bar
   --------------------------------------------------------- */
.engage-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}

.engage-bar__left {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 1;
}

.engage-bar__right {
  display: flex;
  align-items: center;
  gap: 6px;
}

.engage-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 12px;
  border-radius: 8px;
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: 13px;
  color: var(--ink-muted);
  font-family: 'DM Sans', sans-serif;
  transition: all .2s;
  text-decoration: none;
  line-height: 1;
}
.engage-btn svg { width: 18px; height: 18px; }
.engage-btn:hover { background: var(--parchment-warm); color: var(--ink); text-decoration: none; }

.engage-count {
  font-size: 13px;
  min-width: 1.25ch;
}

/* Like — active = accent */
.engage-btn--like.is-active     { color: var(--accent); }
.engage-btn--like.is-active svg { fill: var(--accent); stroke: var(--accent); }
.engage-btn--like:hover         { color: var(--accent); background: var(--accent-glow); }

/* Bookmark — active = gold */
.engage-btn--bookmark.is-active     { color: var(--gold); }
.engage-btn--bookmark.is-active svg { fill: var(--gold); stroke: var(--gold); }
.engage-btn--bookmark:hover         { color: var(--gold); background: rgba(212,168,83,.1); }

/* Repost — active = teal */
.engage-btn--repost.is-active { color: var(--teal); }
.engage-btn--repost:hover     { color: var(--teal); background: var(--teal-soft); }

/* Comment */
.engage-btn--comment:hover { color: var(--blue); background: var(--blue-soft); }

/* Aux (Tip / Boost) */
.engage-btn--aux {
  font-size: 12px;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 8px;
  cursor: default;
}
.engage-btn--tip {
  border: 1px solid var(--gold);
  background: rgba(212,168,83,.08);
  color: var(--gold);
}
.engage-btn--boost {
  border: 1px solid var(--blue);
  background: var(--blue-soft);
  color: var(--blue);
}

/* Post featured image */
.post-featured-img {
  display: block;
  width: 100%;
  max-height: 420px;
  object-fit: cover;
  border-radius: var(--radius-md);
  margin-bottom: 1.5rem;
}

/* ---------------------------------------------------------
   26. Comment System
   --------------------------------------------------------- */

/* Section header */
.comments-section { max-width: 720px; margin: 0 auto; padding: 2rem 0 3rem; }
.comments-heading { font-family: var(--font-sans); font-size: 1.125rem; font-weight: 700; margin-bottom: 1.5rem; }

/* Avatar shared between composer + thread */
.comment__avatar {
  width: 34px; height: 34px; border-radius: var(--radius-full);
  background: linear-gradient(135deg, var(--accent) 0%, var(--link) 100%);
  color: #fff; font-weight: 700; font-size: .8rem;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; overflow: hidden;
}
.comment__avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius-full); }

/* Composer */
.comment-composer { margin-bottom: 2rem; }
.comment-composer__row { display: flex; gap: .75rem; align-items: flex-start; }
.comment-composer__input-wrap { flex: 1; }

.comment-login-prompt { font-size: .875rem; color: var(--muted); }
.comment-login-prompt a { color: var(--link); }

/* Textarea */
.comment-textarea {
  width: 100%; padding: .625rem .75rem;
  border: 1px solid var(--border); border-radius: var(--radius-md);
  background: var(--surface); color: var(--text);
  font-family: var(--font-sans); font-size: .9375rem; line-height: 1.5;
  resize: vertical; transition: border-color var(--transition), box-shadow var(--transition);
}
.comment-textarea:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(232,85,61,.15);
}
.comment-textarea--sm { font-size: .875rem; }

.comment-form__actions {
  display: flex; align-items: center; justify-content: flex-end;
  gap: .75rem; margin-top: .5rem;
}
.comment-char-count { font-size: .75rem; color: var(--muted); }

/* Thread */
.comment-thread { display: flex; flex-direction: column; gap: 0; }
.comment-empty  { font-size: .875rem; color: var(--muted); }

/* Individual comment */
.comment {
  padding: 1rem 0;
  border-bottom: 1px solid var(--border);
}
.comment:last-child { border-bottom: none; }

.comment__header {
  display: flex; align-items: center; gap: .625rem; margin-bottom: .5rem;
}
.comment__author {
  font-weight: 600; font-size: .875rem; color: var(--text); text-decoration: none;
}
.comment__author:hover { color: var(--accent); }
.comment__timestamp { font-size: .75rem; color: var(--muted); margin-left: .25rem; }

.comment__body {
  font-size: .9375rem; line-height: 1.6; color: var(--text);
  margin-bottom: .625rem; word-break: break-word;
}

.comment__deleted {
  font-size: .875rem; color: var(--muted); font-style: italic;
  padding: .5rem 0;
}

/* Nested replies */
.comment__replies {
  margin-left: 1.75rem;
  border-left: 2px solid var(--border);
  padding-left: 1rem;
  margin-top: .5rem;
}

/* Actions row */
.comment__actions { display: flex; align-items: center; gap: .125rem; flex-wrap: wrap; }

.comment-action-btn {
  display: inline-flex; align-items: center; gap: .3rem;
  background: none; border: none; cursor: pointer;
  font-size: .8125rem; font-family: var(--font-sans);
  color: var(--muted); padding: .3rem .5rem; border-radius: var(--radius-sm);
  transition: color var(--transition), background var(--transition);
  text-decoration: none; line-height: 1;
}
.comment-action-btn:hover { color: var(--text); background: var(--bg); }
.comment-action-btn.is-active { color: #E03131; }
.comment-action-btn.is-active svg { fill: #E03131; }
.comment-action-btn:hover .comment-action-btn--like { color: #E03131; }
.comment-action-btn--muted { color: var(--muted); }
.comment-action-btn--muted:hover { color: var(--muted); background: none; }
.comment-action-btn--danger:hover { color: #E03131; background: rgba(224,49,49,.07); }
.comment-action-btn--disabled { pointer-events: none; opacity: .5; }
.comment-action-btn:disabled { opacity: .45; cursor: default; }

/* Reply inline box */
.comment__reply-box { margin-top: .75rem; padding-left: .25rem; }
.comment-form--reply .comment-form__actions { justify-content: flex-end; }

/* Responsive */
@media (max-width: 600px) {
  .comment__replies { margin-left: .75rem; padding-left: .625rem; }
}

/* ---------------------------------------------------------
   27. Post Editor
   --------------------------------------------------------- */
.editor-wrap { max-width: 800px; margin: 0 auto; padding: 2.5rem 1rem 4rem; }

.editor-wrap__header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 1.75rem;
}
.editor-wrap__heading { font-size: 1.625rem; font-weight: 800; }

.editor-actions {
  display: flex; gap: .75rem; justify-content: flex-end;
  padding-top: 1.5rem; margin-top: 1rem;
  border-top: 1px solid var(--border);
}

.form-control-file {
  display: block; width: 100%;
  padding: .5rem 0; font-size: .9rem; color: var(--text);
  cursor: pointer;
}

.form-hint { font-size: .75rem; color: var(--muted); margin-top: .4rem; font-family: var(--font-sans); line-height: 1.4; }

/* Custom file upload button */
.file-upload-btn {
  display:inline-flex; align-items:center; gap:8px; padding:10px 20px;
  background:var(--parchment); border:1.5px dashed var(--border);
  border-radius:10px; cursor:pointer; font-size:.85rem; font-weight:500;
  color:var(--muted); font-family:var(--font-sans);
  transition:all .2s; margin-bottom:4px;
}
.file-upload-btn:hover { border-color:var(--accent); color:var(--accent); background:rgba(232,85,61,.03); }
.file-upload-btn svg { opacity:.5; transition:opacity .2s; }
.file-upload-btn:hover svg { opacity:.8; }

.featured-img-preview { margin-bottom: .75rem; }
.featured-img-preview img {
  max-width: 100%; max-height: 260px; object-fit: cover;
  border-radius: var(--radius-md); border: 1px solid var(--border);
}

/* Make CKEditor respect the surface colour */
.ck.ck-editor__editable_inline {
  min-height: 320px;
  background: var(--surface) !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
}
.ck.ck-toolbar { background: var(--surface) !important; border-color: var(--border) !important; }
.ck.ck-editor__main > .ck-editor__editable { border-color: var(--border) !important; }

.alert { padding: .875rem 1rem; border-radius: var(--radius-md); margin-bottom: 1.25rem; font-size: .9rem; }
.alert--error   { background: rgba(220,38,38,.08);  border: 1px solid rgba(220,38,38,.3);  color: #DC2626; }
.alert--success { background: rgba(22,163,74,.08);  border: 1px solid rgba(22,163,74,.3);  color: var(--color-success); }

.required { color: var(--color-error); }

/* ---------------------------------------------------------
   28. Utility Classes
   --------------------------------------------------------- */
.text-muted   { color: var(--muted); }
.text-center  { text-align: center; }
.fw-bold      { font-weight: 700; }
.mt-1 { margin-top: .5rem; }
.mt-2 { margin-top: 1rem; }
.mt-3 { margin-top: 1.5rem; }
.mb-1 { margin-bottom: .5rem; }
.mb-2 { margin-bottom: 1rem; }
.mb-3 { margin-bottom: 1.5rem; }
.d-flex { display: flex; }
.align-center { align-items: center; }
.gap-1 { gap: .5rem; }
.gap-2 { gap: 1rem; }

/* ---------------------------------------------------------
   29. Write Mode Layout
   --------------------------------------------------------- */
.write-mode-body {
    background: var(--bg);
    margin: 0;
}

.write-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    height: 56px;
    display: flex;
    align-items: center;
}

.write-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 1.5rem;
    gap: 1rem;
}

.write-header__logo {
    /* layout handled by .site-logo--light */
}

.write-header__actions {
    display: flex;
    align-items: center;
    gap: .75rem;
    flex-shrink: 0;
}

@media (max-width: 600px) {
    .write-header__inner { padding: 0 .75rem; gap: .5rem; }
    .write-header__actions { gap: .4rem; }
    .write-header__actions .btn { padding: .4rem .7rem; font-size: .75rem; }
    .autosave-status { font-size: .65rem; min-width: 4rem; }
}

.autosave-status {
    font-size: .8rem;
    color: var(--muted);
    min-width: 7rem;
    text-align: right;
    transition: color .2s;
}
.autosave-status--saving { color: var(--muted); }
.autosave-status--saved  { color: var(--color-success); }
.autosave-status--error  { color: var(--color-error); }

.write-main {
    min-height: calc(100vh - 56px);
}

/* Writing canvas — step 1 */
.write-canvas {
    max-width: 780px;
    margin: 0 auto;
    padding: 2.5rem 1.5rem 6rem;
}

.write-canvas__inner {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.write-title-input {
    width: 100%;
    border: none;
    outline: none;
    background: transparent;
    font-size: clamp(1.6rem, 4vw, 2.4rem);
    font-weight: 700;
    font-family: var(--font-serif);
    color: var(--text);
    line-height: 1.25;
    padding: 0;
    resize: none;
    caret-color: var(--color-purple);
}

.write-title-input::placeholder {
    color: var(--muted);
    opacity: .5;
}

.write-editor-mount {
    min-height: 420px;
}

/* ── CKEditor toolbar — modern override ────────────────────── */

/* Sticky toolbar: sits just below the 56px write-header */
.write-canvas .ck.ck-editor__top {
    position: sticky;
    top: 56px;
    z-index: 40;
}

/* Toolbar bar itself */
.write-canvas .ck.ck-toolbar {
    background: var(--surface) !important;
    border: none !important;
    border-bottom: 1px solid var(--border) !important;
    border-radius: 0 !important;
    padding: .3rem .75rem !important;
    gap: 2px !important;
    box-shadow: 0 2px 12px rgba(0,0,0,.05) !important;
    flex-wrap: wrap !important;
}
.write-canvas .ck.ck-toolbar__items { flex-wrap: wrap !important; }

/* Individual buttons */
.write-canvas .ck.ck-button {
    
    padding: .35rem .45rem !important;
	justify-content: center;
	cursor: pointer;
/*	border-radius: 7px !important;
    color: var(--ink-muted) !important;
    background: transparent !important;
    border: none !important;
    transition: background .12s, color .12s !important;
    
    min-width: 32px;
    min-height: 32px;
    
*/	
}
.ck .ck-insert-table-dropdown__grid{
width:auto !important;	
}	

/* Button hover */
.write-canvas .ck.ck-button:hover:not(.ck-disabled) {
    background: var(--parchment-warm) !important;
    color: var(--ink) !important;
}

/* Active / pressed button (bold active, heading selected, etc.) */
.write-canvas .ck.ck-button.ck-on {
    background: var(--accent-glow) !important;
    color: var(--accent) !important;
	border: 1px solid;
}
.write-canvas .ck.ck-button.ck-on:hover {
    background: rgba(232,85,61,.18) !important;
    color: var(--accent) !important;
}

/* Separator lines between groups */
.write-canvas .ck.ck-toolbar__separator {
    background: var(--border) !important;
    width: 1px !important;
    margin: .2rem .35rem !important;
    align-self: stretch;
    height: auto !important;
}

/* Dropdown arrow buttons (heading, etc.) */
.write-canvas .ck.ck-dropdown .ck-dropdown__arrow {
    color: var(--ink-muted) !important;
}
.write-canvas .ck.ck-dropdown__button {
    border-radius: 7px !important;
    padding: .35rem .6rem !important;
    border: none !important;
    background: transparent !important;
    color: var(--ink-muted) !important;
    transition: background .12s, color .12s !important;
    min-height: 32px;
}
.write-canvas .ck.ck-dropdown__button:hover:not(.ck-disabled) {
    background: var(--parchment-warm) !important;
    color: var(--ink) !important;
}
.write-canvas .ck.ck-dropdown__button.ck-on {
    background: var(--accent-glow) !important;
    color: var(--accent) !important;
}

/* Dropdown panel — heading / link / etc. (not the table grid) */
.write-canvas .ck.ck-dropdown__panel {
    border: 1px solid var(--border) !important;
    border-radius: 10px !important;
    box-shadow: 0 8px 24px rgba(0,0,0,.1) !important;
    /* no overflow:hidden — it breaks the table insertion grid */
    background: var(--surface) !important;
}

/* Dropdown list items */
.write-canvas .ck.ck-list__item .ck-button {
    border-radius: 5px !important;
    padding: .4rem .75rem !important;
}

/* Hide CKEditor "Powered by" badge (GPL open-source usage) */
.ck.ck-powered-by { display: none !important; }

/* Table insertion grid layout and label are fixed via JavaScript
   (MutationObserver in editor.js) — CSS alone cannot reliably beat
   CKEditor's own injected stylesheet on these elements. */

/* Lists inside the editable — our global reset (padding:0) strips indentation */
.write-canvas .ck.ck-editor__editable ul,
.write-canvas .ck.ck-editor__editable ol {
    padding-left: 2em !important;
    margin: .4em 0 !important;
}
.write-canvas .ck.ck-editor__editable ul { list-style-type: disc !important; }
.write-canvas .ck.ck-editor__editable ol { list-style-type: decimal !important; }
.write-canvas .ck.ck-editor__editable li { display: list-item !important; }

/* Toolbar SVG icon size */
.write-canvas .ck.ck-icon {
    width: 17px !important;
    height: 17px !important;
}

/* Editable area */
.write-canvas .ck.ck-editor__editable {
    min-height: 400px;
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
    padding: .5rem 0 !important;
    font-size: 1.05rem;
    line-height: 1.8;
}

.write-canvas .ck.ck-editor__editable.ck-focused {
    border: none !important;
    box-shadow: none !important;
}

/* Settings panel — step 2 */
.write-settings {
    max-width: 680px;
    margin: 0 auto;
    padding: 2rem 1.5rem 6rem;
}

.write-settings__title-preview {
    margin-bottom: 1.75rem;
    padding: .875rem 1rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    font-size: .9rem;
    color: var(--text);
}

.write-settings__title-label {
    color: var(--muted);
    margin-right: .4rem;
}

/* ── Form control (step 2 publish form) ── */
.form-control {
  display:block; width:100%; padding:.7rem .9rem;
  border:1.5px solid var(--border); border-radius:10px;
  font-size:.9rem; font-family:var(--font-sans); line-height:1.5;
  background:var(--parchment); color:var(--text);
  outline:none; transition:border-color .2s, box-shadow .2s, background .2s;
  box-sizing:border-box; resize:vertical;
}
.form-control:focus {
  border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(232,85,61,.1);
  background:var(--bg, #fff);
}
.form-control::placeholder { color:rgba(26,22,18,.3); }

textarea.form-control { min-height:60px; }

.settings-card {
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:12px;
    padding:1.5rem 1.75rem;
    margin-bottom:1.25rem;
    transition:border-color .2s;
}
.settings-card:focus-within { border-color:rgba(232,85,61,.2); }

.settings-card__heading {
    font-family:var(--font-serif);
    font-size:1.05rem;
    font-weight:700;
    margin:0 0 .35rem;
    color:var(--text);
}
.settings-card__heading .required,
.settings-card__heading span[style*="accent"] {
    font-family:var(--font-sans);
    font-size:.7rem;
    font-weight:600;
    letter-spacing:.04em;
    vertical-align:middle;
}

.settings-card__desc {
    font-size:.82rem;
    color:var(--muted);
    margin:0 0 .875rem;
    line-height:1.5;
}

.settings-actions {
    display:flex; gap:.75rem; justify-content:flex-end;
    padding-top:1.25rem; margin-top:.75rem;
}

/* Slug field with inline prefix */
.slug-field {
    display:flex; align-items:center;
    border:1.5px solid var(--border); border-radius:10px;
    overflow:hidden; background:var(--parchment);
    transition:border-color .2s;
}
.slug-field:focus-within { border-color:var(--accent); box-shadow:0 0 0 3px rgba(232,85,61,.1); }

.slug-field__prefix {
    padding:.65rem .85rem;
    background:rgba(0,0,0,.03);
    border-right:1px solid var(--border);
    color:var(--muted);
    font-size:.82rem; font-family:var(--font-mono);
    white-space:nowrap; user-select:none;
}

.slug-field__input {
    border:none !important; border-radius:0 !important;
    background:transparent !important;
    flex:1; min-width:0; padding:.65rem .85rem;
    font-family:var(--font-mono); font-size:.88rem;
    color:var(--text);
}

.slug-field__input:focus { outline:none; box-shadow:none !important; }

/* settings-actions overridden above in §publish-form */

/* ---------------------------------------------------------
   30. Preview Banner
   --------------------------------------------------------- */
.preview-banner {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .75rem;
    background: var(--color-indigo);
    color: #fff;
    padding: .75rem 1.5rem;
    font-size: .875rem;
    position: sticky;
    top: 0;
    z-index: 90;
}

.preview-banner__label {
    font-weight: 700;
    background: rgba(255,255,255,.25);
    padding: .2rem .6rem;
    border-radius: 999px;
    font-size: .75rem;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.preview-banner__sep { opacity: .5; }

.preview-banner__actions {
    display: flex;
    gap: .5rem;
    margin-left: auto;
}

.preview-banner .btn-ghost {
    color: #fff;
    border-color: rgba(255,255,255,.4);
}

.preview-banner .btn-ghost:hover {
    background: rgba(255,255,255,.15);
}

.post-article--preview {
    padding-top: 0;
}

.badge--draft {
    background: rgba(245,158,11,.15);
    color: #D97706;
    border: 1px solid rgba(245,158,11,.3);
    padding: .15rem .5rem;
    border-radius: 999px;
    font-size: .75rem;
    font-weight: 600;
}

@media (max-width: 768px) {
    .slug-field__prefix { font-size: .72rem; padding: .55rem .6rem; }
}
@media (max-width: 600px) {
    .write-canvas { padding: 1.5rem 1rem 4rem; }
    .write-settings { padding: 1.25rem 1rem 4rem; }
    .settings-actions { flex-direction: column-reverse; }
    .settings-actions .btn { width: 100%; justify-content: center; }
    .slug-field { flex-wrap: wrap; }
    .slug-field__prefix { width: 100%; border-right: none; border-bottom: 1px solid var(--border); font-size: .72rem; padding: .5rem .75rem; }
    .slug-field__input { width: 100%; }
}

/* ---------------------------------------------------------
   31. Notification Bell (nav)
   --------------------------------------------------------- */
.notif-bell {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    color: var(--text);
    text-decoration: none;
    transition: background .15s;
}

.notif-bell:hover { background: var(--surface); }

.notif-badge {
    position: absolute;
    top: 2px;
    right: 2px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    background: var(--color-error, #DC2626);
    color: #fff;
    font-size: .65rem;
    font-weight: 700;
    line-height: 16px;
    border-radius: 999px;
    text-align: center;
    pointer-events: none;
}

/* ---------------------------------------------------------
   32. Notifications Page
   --------------------------------------------------------- */
.notif-page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.5rem;
}

.notif-page-title {
    font-size: clamp(1.2rem, 2.5vw, 1.5rem);
    font-weight: 700;
    margin: 0;
}

.notif-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .25rem;
}

.notif-item {
    display: flex;
    align-items: flex-start;
    gap: .875rem;
    padding: .875rem 1rem;
    border-radius: var(--radius-md);
    border: 1px solid transparent;
    transition: background .12s;
    position: relative;
}

.notif-item:hover { background: var(--surface); }

.notif-item--unread {
    background: var(--surface);
    border-color: var(--border);
}

.notif-item--unread::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 60%;
    background: var(--color-purple);
    border-radius: 0 2px 2px 0;
}

.notif-item__avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--gradient-brand);
    color: #fff;
    font-size: .8rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
}

.notif-item__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.notif-item__body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: .2rem;
}

.notif-item__text {
    font-size: .9rem;
    color: var(--text);
    text-decoration: none;
    line-height: 1.4;
    overflow-wrap: break-word; min-width: 0;
    display: block;
}

a.notif-item__text:hover { color: var(--link); }

.notif-item__time {
    font-size: .75rem;
    color: var(--muted);
}

.notif-item__dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--color-purple);
    border: none;
    cursor: pointer;
    flex-shrink: 0;
    margin-top: .35rem;
    transition: opacity .15s;
}

.notif-item__dot:hover { opacity: .7; }

.notif-item__read-form { display: flex; align-items: flex-start; padding-top: .3rem; }

.notif-item__read-indicator {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 1.5px solid var(--border);
    flex-shrink: 0;
    display: inline-block;
    margin-top: .35rem;
}

.notif-empty {
    text-align: center;
    padding: 4rem 1rem;
    color: var(--muted);
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: .95rem;
}

.notif-pagination {
    display: flex;
    align-items: center;
    gap: 1rem;
    justify-content: center;
    margin-top: 2rem;
}

.notif-pagination__info { font-size: .85rem; color: var(--muted); }

/* Follow button state */
.follow-form { display: inline-block; }

/* ---------------------------------------------------------
   33. Utility: hidden
   --------------------------------------------------------- */
.hidden { display: none !important; }

/* ---------------------------------------------------------
   34. Notification Dropdown
   --------------------------------------------------------- */
.notif-wrap {
    position: relative;
    display: inline-flex;
}

/* Bell is now a <button> — strip default button styling */
button.notif-bell {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    font: inherit;
}

.notification-dropdown {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    width: 340px;
    max-height: 480px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: 0 8px 24px rgba(0,0,0,.18);
    z-index: 1200;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.notification-dropdown__header {
    padding: .75rem 1rem;
    font-weight: 600;
    font-size: .85rem;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: .06em;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}

.notification-dropdown__body {
    overflow-y: auto;
    flex: 1;
    max-height: 360px;
}

.notif-drop-loading,
.notif-drop-error,
.notif-drop-empty {
    padding: 2rem 1rem;
    text-align: center;
    font-size: .875rem;
    color: var(--muted);
}

.notif-drop-error { color: var(--color-error); }

/* Individual item inside dropdown */
.notif-drop-item {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    padding: .75rem 1rem;
    border-bottom: 1px solid var(--border);
    transition: background .12s;
}

.notif-drop-item:last-child { border-bottom: none; }
.notif-drop-item:hover { background: var(--bg); }

.notif-drop-item--unread {
    background: color-mix(in srgb, var(--color-purple) 6%, var(--surface));
}

.notif-drop-item__avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--gradient-brand);
    color: #fff;
    font-size: .75rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
}

.notif-drop-item__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.notif-drop-item__content {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    min-width: 0;
}

.notif-drop-item__text {
    font-size: .855rem;
    color: var(--text);
    text-decoration: none;
    line-height: 1.4;
    display: block;
    white-space: normal;
    word-break: break-word;
}

a.notif-drop-item__text:hover { color: var(--link); }

.notif-drop-item__time {
    font-size: .73rem;
    color: var(--muted);
}

/* Footer "View all" link */
.dropdown-footer {
    padding: .6rem 1rem;
    border-top: 1px solid var(--border);
    flex-shrink: 0;
    text-align: center;
}

.view-all-link {
    font-size: .82rem;
    color: var(--link);
    text-decoration: none;
    font-weight: 500;
}

.view-all-link:hover { text-decoration: underline; }

@media (max-width: 480px) {
    .notification-dropdown {
        width: calc(100vw - 2rem);
        right: -1rem;
    }
}

/* ============================================================
   §35  Activity Stream
   ============================================================ */

/* Feed tabs now use <a> instead of <button> */
.feed-tab {
    display: inline-block;
    padding: .45rem .9rem;
    border-radius: 999px;
    font-size: .875rem;
    font-weight: 500;
    color: var(--muted);
    text-decoration: none;
    transition: background .15s, color .15s;
}

.feed-tab:hover  { color: var(--ink); }
.feed-tab.active { background: var(--ink); color: #fff; font-weight: 600; }

/* Shared activity card wrapper */
.act-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: .75rem;
    padding: 1.1rem 1.25rem;
    margin-bottom: 1rem;
}

/* Context row (actor avatar + sentence) */
.act-card__context {
    display: flex;
    align-items: flex-start;
    gap: .65rem;
    margin-bottom: .75rem;
}

.act-card__actor-av {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--surface-2);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .85rem;
    font-weight: 600;
    color: var(--muted);
}

.act-card__actor-av img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.act-card__context-text {
    font-size: .875rem;
    color: var(--text);
    line-height: 1.45;
}

.act-card__context-text a {
    font-weight: 600;
    color: var(--text);
    text-decoration: none;
}
.act-card__context-text a:hover { text-decoration: underline; }

.act-card__time {
    color: var(--muted);
    font-size: .8rem;
    margin-left: .15rem;
}

/* Compact card: post preview strip */
.act-card--compact .act-card__post-preview {
    display: flex;
    align-items: center;
    gap: .75rem;
    text-decoration: none;
    background: var(--surface-2);
    border-radius: .5rem;
    padding: .6rem .8rem;
    transition: background .15s;
}

.act-card--compact .act-card__post-preview:hover {
    background: var(--border);
}

.act-card__thumb {
    width: 56px;
    height: 40px;
    object-fit: cover;
    border-radius: .35rem;
    flex-shrink: 0;
}

.act-card__post-info {
    flex: 1;
    min-width: 0;
}

.act-card__post-title {
    font-size: .9rem;
    font-weight: 600;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.act-card__post-author {
    font-size: .78rem;
    color: var(--muted);
    margin-top: .1rem;
}

/* Person card (followed) — no extra inner content needed beyond context row */
.act-card--person {
    padding-bottom: .75rem;
}

.activity-stream {
    padding-top: .25rem;
}

/* ============================================================
   §36  Premium Homepage Redesign
   ============================================================ */

/* ── Design tokens ─────────────────────────────────────────── */
:root {
    --nav-app-bg:      var(--header-bg);
    --nav-app-border:  rgba(255,255,255,.06);
    --nav-icon-bg:     rgba(255,255,255,.08);
    --nav-icon-hover:  rgba(255,255,255,.14);
    --nav-icon-color:  rgba(255,255,255,.75);
    --surface-2:       var(--parchment-warm);
    --card-radius:     var(--radius);
}

/* ── Missing token fix used in §35 ────────────────────────── */

/* ── Dark sticky nav override ──────────────────────────────── */
.nav-app {
    background: var(--nav-app-bg);
    border-bottom: 1px solid var(--nav-app-border);
    height: 64px;
    color: #E8E8EC;
}

/* 3-part grid: logo | search | actions */
.nav-app .nav-app__inner,
.nav-app.container {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 1.25rem;
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0;
}

/* Logo on dark bg */
.nav-app .nav__logo {
    color: #fff;
    font-size: 1.2rem;
}
.nav-app .nav__logo span { color: var(--accent); }

/* ── Nav search bar ─────────────────────────────────────────── */
.nav-search {
    position: relative;
    width: 100%;
    max-width: 560px;
    margin: 0 auto;
}

.nav-search__icon {
    position: absolute;
    left: .875rem;
    top: 50%;
    transform: translateY(-50%);
    color: rgba(255,255,255,.35);
    pointer-events: none;
    flex-shrink: 0;
}

.nav-search__input {
    width: 100%;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: var(--radius-full);
    padding: .5rem 1rem .5rem 2.5rem;
    font-size: .875rem;
    color: rgba(255,255,255,.8);
    font-family: inherit;
    transition: background .15s, border-color .15s;
}
.nav-search__input::placeholder { color: rgba(255,255,255,.35); }
.nav-search__input:focus {
    outline: none;
    background: rgba(255,255,255,.09);
    border-color: rgba(255,255,255,.22);
}
.nav-search__input:disabled { cursor: text; }

/* ── Nav actions strip ──────────────────────────────────────── */
.nav-app .nav__actions { gap: .625rem; }

/* ── Icon buttons (messages, bell) ──────────────────────────── */
.nav-icon-btn {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: var(--nav-icon-bg);
    border: 1px solid rgba(255,255,255,.08);
    color: var(--nav-icon-color);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background .2s, color .2s;
    flex-shrink: 0;
    position: relative;
    text-decoration: none;
}
.nav-icon-btn:hover { background: var(--nav-icon-hover); color: #fff; text-decoration: none; }
.nav-icon-btn:disabled { opacity: .4; cursor: not-allowed; }
.nav-icon-btn svg { width: 20px; height: 20px; }

/* Bell uses same style */
.nav-app button.notif-bell {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: var(--nav-icon-bg);
    border: 1px solid rgba(255,255,255,.08);
    color: var(--nav-icon-color);
    padding: 0;
}
.nav-app button.notif-bell:hover { background: var(--nav-icon-hover); color: #fff; }

/* Badge positioning tweak for icon-style bell */
.nav-app .notif-badge {
    position: absolute;
    top: -2px;
    right: -2px;
    background: var(--accent);
    color: #fff;
    font-size: .6rem;
    font-weight: 700;
    font-family: var(--font-mono);
    min-width: 16px;
    height: 16px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
    pointer-events: none;
    pointer-events: none;
    border: 2px solid var(--nav-app-bg);
}

/* + Create button */
.nav-btn-create {
    background: var(--accent);
    color: #fff;
    font-weight: 600;
    white-space: nowrap;
}
.nav-btn-create:hover { background: var(--accent-hover); text-decoration: none; }

/* ── Profile avatar button ───────────────────────────────────── */
.nav-profile-wrap {
    position: relative;
    display: inline-flex;
}

.nav-profile-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--accent);
    border: 2px solid rgba(255,255,255,.2);
    color: #fff;
    font-weight: 700;
    font-size: .875rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    overflow: hidden;
    transition: border-color .15s;
    flex-shrink: 0;
}
.nav-profile-btn:hover { border-color: rgba(255,255,255,.5); }
.nav-profile-btn img { width: 100%; height: 100%; object-fit: cover; }

/* ── Profile dropdown ────────────────────────────────────────── */
.nav-profile-dropdown {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    width: 228px;
    background: #16181f;
    border: 1px solid rgba(255,255,255,.1);
    border-radius: var(--radius-md);
    box-shadow: 0 8px 32px rgba(0,0,0,.5);
    z-index: 1200;
    overflow: hidden;
}

.nav-profile-dropdown__header {
    padding: .875rem 1rem;
    border-bottom: 1px solid rgba(255,255,255,.07);
}
.nav-profile-dropdown__name {
    font-weight: 600;
    font-size: .9rem;
    color: #F2F2F2;
}
.nav-profile-dropdown__username {
    font-size: .775rem;
    color: rgba(255,255,255,.4);
    margin-top: .15rem;
}

.nav-profile-dropdown__links { padding: .375rem 0; }

.nav-profile-dropdown__link {
    display: flex;
    align-items: center;
    gap: .625rem;
    padding: .6rem 1rem;
    font-size: .875rem;
    color: rgba(255,255,255,.75);
    text-decoration: none;
    transition: background .12s, color .12s;
    width: 100%;
    text-align: left;
}
.nav-profile-dropdown__link:hover {
    background: rgba(255,255,255,.07);
    color: #fff;
    text-decoration: none;
}
.nav-profile-dropdown__link--btn {
    background: none;
    border: none;
    cursor: pointer;
    font-family: inherit;
}
.nav-profile-dropdown__divider {
    height: 1px;
    background: rgba(255,255,255,.07);
    margin: .25rem 0;
}
.nav-profile-dropdown__logout { padding: .25rem 0; }


/* ── Layout body tweaks for 64px nav ───────────────────────── */
.layout-app__body.container { padding-top: 1.5rem; }

@media (min-width: 1100px) {
    .layout-app__body { gap: 1.75rem; }
    .sidebar-left  { width: 220px; }
    .sidebar-right { width: 320px; }
    /* Sticky sidebar */
    .sidebar-left {
        position: sticky;
        top: 72px;
        align-self: flex-start;
        max-height: calc(100vh - 72px);
        overflow-y: auto;
    }
}

/* Profile tabs sticky position update (was 61px for 60px nav) */
.profile-tabs { top: 65px; }

/* ── Sidebar nav ─────────────────────────────────────────────── */
.sidebar-left { padding-top: .5rem; padding-bottom: 2rem; }

.sidebar-nav { gap: .125rem; }

.sidebar-nav__item {
    font-size: .9rem;
    font-weight: 500;
    border-radius: var(--radius-md);
    padding: .6rem .875rem;
    color: var(--text);
    gap: .75rem;
}

.sidebar-nav__item--active,
.sidebar-nav__item.active {
    background: #fff;
    color: var(--accent);
    box-shadow: var(--shadow-sm);
    font-weight: 600;
}

.sidebar-nav__icon {
    flex-shrink: 0;
    opacity: .7;
}
.sidebar-nav__item--active .sidebar-nav__icon,
.sidebar-nav__item.active .sidebar-nav__icon,
.sidebar-nav__item:hover .sidebar-nav__icon { opacity: 1; }

.sidebar-nav__section {
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .09em;
    color: var(--muted);
    padding: 1rem .875rem .375rem;
}

/* ── Feed composer ───────────────────────────────────────────── */
.feed-composer {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--card-radius);
    padding: 1rem 1.125rem;
    margin-bottom: .875rem;
    box-shadow: var(--shadow-sm);
}

.feed-composer__top {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin-bottom: .75rem;
}

.feed-composer__avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent) 0%, var(--link) 100%);
    color: #fff;
    font-weight: 700;
    font-size: .9rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
}
.feed-composer__avatar img { width: 100%; height: 100%; object-fit: cover; }

.feed-composer__placeholder {
    flex: 1;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-full);
    padding: .55rem 1rem;
    font-size: .9rem;
    color: var(--muted);
    cursor: pointer;
    transition: border-color .15s, background .15s;
    user-select: none;
}
.feed-composer__placeholder:hover {
    border-color: var(--accent);
    background: var(--surface);
}

.feed-composer__bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: .625rem;
    border-top: 1px solid var(--border);
}

.feed-composer__tools { display: flex; gap: .125rem; }

.feed-composer__tool {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-md);
    background: transparent;
    border: none;
    color: var(--muted);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: not-allowed;
    opacity: .5;
}

/* ── Feed tabs — wireframe style (canonical) ─────────────────── */
/*
.feed-tabs {
    display: flex;
    align-items: center;
    gap: 4px;
    background: #fff;
    border-radius: var(--radius);
    padding: 4px;
    margin-bottom: 20px;
    border: 1px solid var(--border);
    overflow-x: auto;
}

.feed-tab {
    display: inline-block;
    padding: 10px 20px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    color: var(--ink-muted);
    text-decoration: none;
    background: none;
    border: none;
    cursor: pointer;
    font-family: 'DM Sans', sans-serif;
    white-space: nowrap;
    transition: all .2s;
}
.feed-tab:hover {
    color: var(--ink);
    text-decoration: none;
}
.feed-tab.active { background: var(--ink); color: #fff; font-weight: 600; }
*/
/* ── Premium feed cards (overrides §24) ─────────────────────── */
.feed-cards { gap: 0; }

.feed-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    border-radius: var(--card-radius);
    padding: 1.25rem 1.25rem 1rem;
    margin-bottom: .75rem;
    transition: box-shadow .15s, border-color .15s;
}
.feed-card:first-child { padding-top: 1.25rem; }
.feed-card:hover {
    box-shadow: 0 2px 16px rgba(0,0,0,.07);
    border-color: var(--muted);
}

/* Act card (activity stream) also gets card treatment */
.act-card {
    border-radius: var(--card-radius);
    margin-bottom: .75rem;
}
.act-card:hover {
    box-shadow: 0 2px 12px rgba(0,0,0,.06);
    border-color: var(--muted);
}

/* ── Right sidebar widgets ────────────────────────────────────── */
.sidebar-right { padding-top: .5rem; }

.sidebar-widget--card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--card-radius);
    padding: 1rem 1.125rem 1.125rem;
    margin-bottom: 1rem;
    box-shadow: var(--shadow-sm);
}
.sidebar-widget--card .sidebar-widget__title {
    font-size: .78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--muted);
    margin-bottom: .875rem;
}

/* Trending list */
.trending-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.trending-item {
/*    display: flex; */
    align-items: flex-start;
    gap: .625rem;
    padding: .5rem 0;
    border-bottom: 1px solid var(--border);
}
.trending-item:last-child { border-bottom: none; }

.trending-item__num {
    font-size: .7rem;
    font-weight: 700;
    color: var(--muted);
    width: 14px;
    flex-shrink: 0;
    margin-top: .2rem;
}

.trending-item__body { flex: 1; min-width: 0; }

.trending-item__topic {
    display: block;
    font-size: .9rem;
    font-weight: 700;
    color: var(--text);
    text-decoration: none;
    margin-bottom: .1rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.trending-item__topic:hover { color: var(--accent); text-decoration: none; }

.trending-item__count {
    font-size: .72rem;
    color: var(--muted);
}

.sidebar-widget__more {
    display: block;
    font-size: .78rem;
    color: var(--link);
    text-decoration: none;
    margin-top: .75rem;
    font-weight: 500;
}
.sidebar-widget__more:hover { text-decoration: underline; }

/* Who to Follow */
.follow-suggestion {
    display: flex;
    align-items: center;
    gap: .625rem;
    padding: .5rem 0;
    border-bottom: 1px solid var(--border);
}
.follow-suggestion:last-child { border-bottom: none; }

.follow-suggestion__avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent) 0%, var(--link) 100%);
    color: #fff;
    font-weight: 700;
    font-size: .875rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
}
.follow-suggestion__avatar img { width: 100%; height: 100%; object-fit: cover; }

.follow-suggestion__info { flex: 1; min-width: 0; }

.follow-suggestion__name {
    font-weight: 600;
    font-size: .85rem;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.follow-suggestion__meta {
    font-size: .73rem;
    color: var(--muted);
    margin-top: .1rem;
}

.follow-suggestion__form { flex-shrink: 0; }

/* ── Coming soon page ─────────────────────────────────────────── */
.coming-soon-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: calc(100vh - 64px);
    padding: 2rem 1rem;
}
.coming-soon {
    text-align: center;
    max-width: 400px;
}
.coming-soon__icon { font-size: 3rem; margin-bottom: 1rem; }
.coming-soon__title {
    font-size: 1.75rem;
    font-weight: 800;
    letter-spacing: -.02em;
    margin-bottom: .75rem;
}
.coming-soon__text {
    color: var(--muted);
    font-size: .9375rem;
    margin-bottom: 1.25rem;
}

/* ── Create button: icon + label on desktop, icon-only on mobile ── */
.nav-btn-create {
    width: auto !important;
    height: 38px !important;
    background: var(--accent) !important;
    color: #fff !important;
    border: none !important;
    font-weight: 600;
    gap: 5px;
    padding: 0 18px !important;
    border-radius: 10px !important;
    white-space: nowrap;
}
.nav-btn-create:hover { background: var(--accent-hover) !important; text-decoration: none; }
.nav-create-icon { display: none; }
.nav-create-label { font-size: .85rem; }

/* ── Mobile search toggle — hidden on desktop ── */
.nav-mobile-search-btn { display: none; }

/* ── Hamburger — hidden on desktop ── */
.nav-hamburger { display: none; }

/* ── Mobile search overlay ── */
.nav-mobile-search {
    display: none; position: fixed; top: 64px; left: 0; right: 0;
    z-index: 200; background: var(--nav-app-bg); border-bottom: 1px solid rgba(255,255,255,.1);
    padding: 10px 16px; box-shadow: 0 8px 24px rgba(0,0,0,.25);
}
.nav-mobile-search.open { display: block; }
.nav-mobile-search__inner { position: relative; }
.nav-mobile-search__icon {
    position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
    color: rgba(255,255,255,.35); pointer-events: none;
}
.nav-mobile-search__input {
    width: 100%; padding: 10px 44px 10px 38px; box-sizing: border-box;
    background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.15);
    border-radius: 10px; font-size: .9rem; color: rgba(255,255,255,.85);
    font-family: inherit; outline: none;
}
.nav-mobile-search__input:focus { border-color: rgba(255,255,255,.3); background: rgba(255,255,255,.12); }
.nav-mobile-search__input::placeholder { color: rgba(255,255,255,.35); }
.nav-mobile-search__close {
    position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
    background: none; border: none; color: rgba(255,255,255,.5); cursor: pointer; padding: 4px;
}
.nav-mobile-search .srch-dropdown {
    position: absolute; top: calc(100% + 6px); left: 0; right: 0;
}

/* ── Mobile drawer ── */
.nav-drawer-backdrop {
    display: none; position: fixed; inset: 0; z-index: 199;
    background: rgba(0,0,0,.5); backdrop-filter: blur(2px);
}
.nav-drawer-backdrop.open { display: block; }
.nav-drawer {
    position: fixed; top: 0; left: 0; bottom: 0;
    width: 280px; max-width: 85vw; z-index: 200;
    background: #1A1612; color: #E8E2D9;
    transform: translateX(-100%); transition: transform .25s ease;
    display: flex; flex-direction: column;
    box-shadow: 4px 0 24px rgba(0,0,0,.4);
    overflow: hidden;
}
.nav-drawer__head { flex-shrink: 0; }
.nav-drawer__body {
    flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,.18) transparent;
}
.nav-drawer__body::-webkit-scrollbar { width: 5px; }
.nav-drawer__body::-webkit-scrollbar-track { background: transparent; }
.nav-drawer__body::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,.18); border-radius: 4px;
}
.nav-drawer__body::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.3); }
.nav-drawer.open { transform: translateX(0); }
.nav-drawer__head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 18px 20px; border-bottom: 1px solid rgba(255,255,255,.08);
}
.nav-drawer__title {
    font-family: var(--font-serif); font-size: 1.1rem; font-weight: 700; color: #fff;
}
.nav-drawer__close {
    background: none; border: none; color: rgba(255,255,255,.5); cursor: pointer; padding: 4px;
}
.nav-drawer__close:hover { color: #fff; }
.nav-drawer__links { padding: 12px 0; }
.nav-drawer__link {
    display: flex; align-items: center; gap: 14px;
    padding: 14px 20px; font-size: .9rem; font-weight: 500;
    color: rgba(255,255,255,.7); text-decoration: none; transition: all .15s;
}
.nav-drawer__link:hover { background: rgba(255,255,255,.06); color: #fff; }
.nav-drawer__link svg { flex-shrink: 0; opacity: .5; }
.nav-drawer__divider {
    height: 1px; background: rgba(255,255,255,.06); margin: 8px 20px;
}

/* ── Drawer profile section ── */
.nav-drawer__profile {
    display: flex; align-items: center; gap: 12px; padding: 16px 20px 12px;
}
.nav-drawer__avatar {
    width: 44px; height: 44px; border-radius: 12px; overflow: hidden;
    background: linear-gradient(135deg, #C4622D, #E8A042);
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-family: var(--font-serif); font-size: 18px; font-weight: 800;
    flex-shrink: 0; text-decoration: none;
}
.nav-drawer__avatar img { width: 100%; height: 100%; object-fit: cover; }
.nav-drawer__profile-info { min-width: 0; }
.nav-drawer__profile-name {
    font-size: .95rem; font-weight: 700; color: #fff; text-decoration: none;
    display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.nav-drawer__profile-name:hover { color: var(--accent); }
.nav-drawer__profile-handle {
    font-size: .78rem; color: rgba(255,255,255,.4); font-family: var(--font-mono);
}
.nav-drawer__profile-links { padding: 0 0 4px; }
.nav-drawer__section-label {
    font-size: .65rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px;
    color: rgba(255,255,255,.3); padding: 10px 20px 6px;
}
.nav-drawer__link--danger { color: rgba(220,80,80,.8) !important; }
.nav-drawer__link--danger:hover { color: #ef4444 !important; }
.nav-drawer__logout { padding: 0 0 16px; }
.nav-drawer__logout form { margin: 0; }
.nav-drawer__logout button { background: none; border: none; cursor: pointer; font-family: inherit; width: 100%; text-align: left; }

/* ── Mobile adjustments ───────────────────────────────────────── */
@media (max-width: 767px) {
    .nav-search { display: none; }
    .nav-app .nav-app__inner {
        grid-template-columns: auto auto;
        padding: 0 8px 0 16px;
    }
    .nav-app .nav__actions { gap: 2px; }
    /* Strip borders/bg from all nav icon buttons for compact look */
    .nav-icon-btn,
    .nav-app button.notif-bell,
    .nav-btn-create {
        width: 36px; height: 36px;
        background: transparent !important;
        border: none !important;
        border-radius: 0 !important;
        box-shadow: none !important;
    }
    /* Compact create: icon-only */
    .nav-btn-create { padding: 0 !important; justify-content: center; }
    .nav-create-icon { display: block; }
    .nav-create-label { display: none; }
    /* Show mobile-only buttons */
    .nav-mobile-search-btn { display: flex; }
    .nav-hamburger { display: flex; }
    /* Hide profile avatar — it's in the drawer */
    .nav-profile-wrap { display: none; }
}

@media (max-width: 1099px) {
    .layout-app__body.container { padding-top: 1rem; }
    .feed { padding: 1rem 0; }
}

/* ============================================================
   §37  Wireframe Design System — Editorial Premium
   Applied to html.app-layout (logged-in pages only).
   ============================================================ */

/* ── --wf-* aliases (backward-compat for rules below) ────────── */
:root {
    --wf-ink:            var(--ink);
    --wf-ink-light:      var(--ink-light);
    --wf-ink-muted:      var(--ink-muted);
    --wf-parchment:      var(--parchment);
    --wf-parchment-warm: var(--parchment-warm);
    --wf-cream:          var(--cream);
    --wf-accent:         var(--accent);
    --wf-accent-hover:   var(--accent-hover);
    --wf-accent-glow:    var(--accent-glow);
    --wf-teal:           var(--teal);
    --wf-teal-soft:      var(--teal-soft);
    --wf-gold:           var(--gold);
    --wf-violet:         var(--violet);
    --wf-header-bg:      var(--header-bg);
    --wf-border:         var(--border);
    --wf-shadow-sm:      var(--shadow-sm);
    --wf-shadow-md:      var(--shadow-md);
    --wf-radius:         var(--radius);
    --wf-radius-lg:      var(--radius-lg);
    --wf-blue:           var(--blue);
    --wf-blue-soft:      var(--blue-soft);
}

/* ── Logged-in layout: tokens are inherited from :root ────────── */
/* Only override what's specific to the app layout */
html.app-layout {
    --link: var(--teal);  /* app uses teal links (follow, topics, etc.) */
}


/* ── Body: apply DM Sans + warm parchment background ────────── */
html.app-layout body {
    font-family: var(--font-sans);
    background:   var(--bg);
    color:        var(--text);
    -webkit-font-smoothing: antialiased;
}

/* ── Playfair Display: post/writeup titles ───────────────────── */
html.app-layout .feed-card__title,
html.app-layout .post-header__title,
html.app-layout .act-card--published .feed-card__title {
    font-family: 'Playfair Display', Georgia, serif;
    font-size:   1.175rem;
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: -0.01em;
    color: var(--text);
}

html.app-layout .feed-card__title:hover { text-decoration: none; color: var(--accent); }

/* Article body reading text */
html.app-layout .article-body {
    font-family: 'Playfair Display', Georgia, serif;
    font-size:   1.125rem;
}
/* Article headings stay DM Sans */
html.app-layout .article-body h2,
html.app-layout .article-body h3,
html.app-layout .article-body h4 {
    font-family: 'DM Sans', sans-serif;
}

/* Section headings in sidebar widgets */
html.app-layout .sidebar-widget__title {
    font-family: 'DM Sans', sans-serif;
/*    font-size:   0.72rem; */
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
}

/* ── Fix hardcoded orange-brown → new coral accent glow ─────── */
/* Badge */
html.app-layout .badge {
    background: var(--wf-accent-glow);
    color: var(--accent);
}
html.app-layout .badge:hover { background: rgba(232,85,61,.22); text-decoration: none; }

/* Topic pill — teal */
html.app-layout .feed-card__topic-pill {
    background: var(--teal-soft);
    color: var(--teal);
}

/* Sidebar active / hover */
html.app-layout .sidebar-nav__item:hover {
    background: #fff;
    color: var(--ink);
    box-shadow: var(--shadow-sm);
}
html.app-layout .sidebar-nav__item--active,
html.app-layout .sidebar-nav__item.active {
    background: #fff;
    color: var(--accent);
    box-shadow: var(--shadow-sm);
    font-weight: 600;
}

/* ── Buttons: primary uses new coral accent ──────────────────── */
html.app-layout .btn-primary {
    background: var(--accent);
    color: #fff;
}
html.app-layout .btn-primary:hover { background: var(--accent-hover); }

/* ── Keep nav/UI links text-colored; accent links use teal ───── */
/* Global a { color: var(--link) } already picks up teal via remapped --link */
html.app-layout .feed-card__author-link,
html.app-layout .act-card__context-text a,
html.app-layout .sidebar-nav__item,
html.app-layout .notif-drop-item__text { color: var(--text); }
html.app-layout a.notif-drop-item__text:hover { color: var(--link); }
html.app-layout .feed-card__author-link:hover { text-decoration: none; color: var(--accent); }

/* ── Avatar gradients → coral-to-violet premium ──────────────── */
html.app-layout .feed-card__avatar--init,
html.app-layout .comment__avatar,
html.app-layout .feed-composer__avatar,
html.app-layout .follow-suggestion__avatar,
html.app-layout .act-card__actor-av {
    background: linear-gradient(135deg, var(--wf-accent) 0%, var(--wf-violet) 100%);
}

/* ── Feed card premium polish ────────────────────────────────── */
html.app-layout .feed-card {
    background: var(--surface);
    border-color: var(--border);
    box-shadow: var(--shadow-sm);
}
html.app-layout .feed-card:hover {
    box-shadow: var(--shadow-md);
    border-color: rgba(0,0,0,0.14);
    transform: translateY(-1px);
    transition: all 0.18s ease;
}

/* ── Activity cards ──────────────────────────────────────────── */
html.app-layout .act-card {
    background: var(--surface);
    border-color: var(--border);
}
html.app-layout .act-card--compact .act-card__post-preview {
    background: var(--surface-2);
}
html.app-layout .act-card--compact .act-card__post-preview:hover {
    background: var(--wf-cream);
}

/* ── Composer ────────────────────────────────────────────────── */
html.app-layout .feed-composer {
    background: var(--surface);
    border-color: var(--border);
}
html.app-layout .feed-composer__placeholder {
    background: var(--surface-2);
    border-color: var(--border);
}
html.app-layout .feed-composer__placeholder:hover {
    border-color: var(--accent);
    background: var(--surface);
}

/* ── Right sidebar widgets ───────────────────────────────────── */
html.app-layout .sidebar-widget--card {
    background: var(--surface);
    border-color: var(--border);
    box-shadow: var(--shadow-sm);
}
html.app-layout .trending-item__topic { color: var(--text); }
html.app-layout .trending-item__topic:hover { color: var(--accent); }
html.app-layout .sidebar-widget__more { color: var(--link); }
html.app-layout .sidebar-widget__more:hover { color: var(--accent); }

/* ── Form inputs ─────────────────────────────────────────────── */
html.app-layout .form-input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--wf-accent-glow);
}

/* ── Engagement bar ──────────────────────────────────────────── */
html.app-layout .engage-btn--like.is-active,
html.app-layout .engage-btn--like.is-active svg { color: var(--accent); fill: var(--accent); }
html.app-layout .engage-btn--repost.is-active  { color: var(--link); }
html.app-layout .engage-btn--bookmark.is-active { color: var(--wf-gold); fill: var(--wf-gold); }

/* ── Feed tabs ────────────────────────────────────────────────── */

html.app-layout .feed-tab:hover { color: var(--ink); }
html.app-layout .feed-tab.active { background: var(--ink); color: #fff; }

/* ── Author profile pages on app-layout ─────────────────────── */
html.app-layout .author-card__avatar,
html.app-layout .profile-avatar {
    background: var(--wf-accent);
}

/* ── Auth form accents ───────────────────────────────────────── */
html.app-layout .auth-card { background: var(--surface); border-color: var(--border); }

/* ── Admin header stays as-is (already uses --ink-surface) ──── */

/* ── Notification dropdown on dark nav ───────────────────────── */
html.app-layout .notification-dropdown {
    background: var(--surface);
    border-color: var(--border);
}
html.app-layout .notif-drop-item:hover { background: var(--surface-2); }

/* ── Coming soon page ────────────────────────────────────────── */
html.app-layout .coming-soon-wrap { background: var(--bg); }

/* ── Nav logo color on dark header ───────────────────────────── */
html.app-layout .nav__logo span { color: var(--wf-accent); }

/* ── Engage bar aux disabled buttons ────────────────────────── */
html.app-layout .engage-btn--aux {
    color: var(--muted);
    font-size: .8rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: .2rem .6rem;
}


/* =========================================================
   §38  Wireframe — Additional Components
   ========================================================= */

/* ── Site logo — shared base ────────────────────────────────── */
/* ── Site logo — text-only style ─────────────────────────────── */
.site-logo {
    font-family: var(--font-serif);
    font-size: 1.7rem;
    font-weight: 900;
    text-decoration: none;
    flex-shrink: 0;
    white-space: nowrap;
    letter-spacing: -0.5px;
    line-height: 1;
}
.site-logo:hover,
.site-logo:focus {
    text-decoration: none;
}
.site-logo em {
    font-style: italic;
}
/* Dark background (nav header) */
.site-logo--dark       { color: #fff; }
.site-logo--dark em    { color: var(--copper); }
/* Light background (write editor header) */
.site-logo--light      { color: var(--ink); }
.site-logo--light em   { color: var(--gold); }

/* Entry animation */
@keyframes fadeUp {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}
.anim { animation: fadeUp .5s ease-out forwards; opacity: 0; }
.d1 { animation-delay: .05s; }
.d2 { animation-delay: .10s; }
.d3 { animation-delay: .15s; }
.d4 { animation-delay: .20s; }
.d5 { animation-delay: .25s; }
.d6 { animation-delay: .30s; }

/* Repost indicator */
.repost-indicator {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--ink-muted);
    margin-bottom: 10px;
    padding-bottom: 8px;
}
.repost-indicator svg { width: 14px; height: 14px; }

/* PRO badge on feed cards */
.badge-pro {
    font-size: 10px;
    background: var(--gold);
    color: #fff;
    padding: 1px 6px;
    border-radius: 4px;
    font-weight: 700;
    font-family: 'DM Sans', sans-serif;
    vertical-align: middle;
}

/* Feed card excerpt (3-line clamp) */
.feed-card__excerpt {
    font-size: 14px;
    color: var(--ink-muted);
    line-height: 1.6;
    margin-bottom: 12px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Feed card reading time */
.feed-card__reading-time {
    font-size: 12px;
    color: var(--ink-muted);
    margin-left: 8px;
}

/* Feed text (short post) */
.feed-card__text {
    font-size: 15px;
    line-height: 1.65;
    color: var(--ink);
    margin-bottom: 14px;
}

/* Feed card more (kebab) */
.feed-card__kebab {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: none;
    background: transparent;
    cursor: pointer;
    color: var(--ink-muted);
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .2s;
}
.feed-card__kebab:hover { background: var(--parchment-warm); }

/* Load more button */
.load-more-wrap { text-align: center; padding: 24px; }
.btn-load-more {
    background: #fff;
    border: 1px solid var(--border);
    color: var(--ink);
    padding: 12px 32px;
    border-radius: 10px;
    font-family: 'DM Sans', sans-serif;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: box-shadow .2s;
}
.btn-load-more:hover { box-shadow: var(--shadow-sm); }

/* Feed card image */
.feed-card__image {
    width: 100%;
    height: 200px;
    background: var(--cream);
    border-radius: 10px;
    margin-bottom: 14px;
    object-fit: cover;
    display: block;
}

/* ── §39 Follow button (unified) ─────────────────────────────── */
.btn-follow {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 20px;
    border-radius: 10px;
    font-family: 'DM Sans', sans-serif;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    border: 1.5px solid var(--accent);
    background: var(--accent-glow);
    color: var(--accent);
    transition: background .15s, color .15s, border-color .15s;
}
.btn-follow:hover {
    background: var(--accent);
    color: #fff;
}
.btn-follow--active {
    background: var(--parchment-warm);
    border-color: var(--border);
    color: var(--ink-muted);
}
.btn-follow--active:hover {
    background: var(--cream);
    border-color: var(--ink-muted);
    color: var(--ink);
}

/* ── §40 Topic hero ──────────────────────────────────────────── */
.topic-hero {
    background: linear-gradient(135deg, var(--ink) 0%, var(--ink-light) 100%);
    padding: 48px 0 40px;
    margin-bottom: 0;
}
.topic-hero__inner {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    flex-wrap: wrap;
}
.topic-hero__icon {
    width: 72px;
    height: 72px;
    border-radius: var(--radius);
    background: var(--accent-glow);
    border: 2px solid var(--accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 36px;
    font-weight: 700;
    color: var(--accent);
    flex-shrink: 0;
}
.topic-hero__info {
    flex: 1;
    min-width: 200px;
}
.topic-hero__name {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 2rem;
    font-weight: 700;
    color: #fff;
    margin: 0 0 8px;
}
.topic-hero__desc {
    font-size: 15px;
    color: rgba(255,255,255,0.7);
    margin: 0 0 12px;
    line-height: 1.55;
}
.topic-hero__meta {
    display: flex;
    gap: 12px;
    font-size: 14px;
    color: rgba(255,255,255,0.55);
}
.topic-hero__meta strong { color: rgba(255,255,255,0.9); }

.topic-content {
    padding-top: 32px;
    padding-bottom: 48px;
}

/* ── §41 Topic sections ──────────────────────────────────────── */
.topic-section {
    margin-bottom: 40px;
}
.topic-section__title {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--ink);
    margin: 0 0 20px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border);
}
.topic-posts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
}
.topic-latest-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.feed-card__image--thumb {
    width: 80px;
    height: 60px;
    object-fit: cover;
    border-radius: 8px;
    flex-shrink: 0;
    float: right;
    margin-left: 12px;
}

/* ── §42 Topic blogs grid ────────────────────────────────────── */
.topic-blogs-grid {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.topic-blog-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    text-decoration: none;
    transition: box-shadow .2s, border-color .2s;
}
.topic-blog-card:hover { box-shadow: var(--shadow-md); border-color: transparent; }
.topic-blog-card__avatar {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--accent), var(--gold));
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    color: #fff;
    font-size: 18px;
    flex-shrink: 0;
    overflow: hidden;
}
.topic-blog-card__avatar img { width: 100%; height: 100%; object-fit: cover; }
.topic-blog-card__name {
    font-weight: 600;
    color: var(--ink);
    font-size: 15px;
}
.topic-blog-card__meta { font-size: 13px; color: var(--ink-muted); margin-top: 2px; }

/* ── §43 Topics index page — editorial redesign ─────────────── */

/* Full-width wrapper overrides layout-app__body grid for this page */
.tpc-page-header,
.tpc-filter-bar,
.tpc-featured-row,
.tpc-grid-wrap {
    width: 100%;
    max-width: 1400px;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
}

/* Page header */
.tpc-page-header {
    padding: 52px 48px 0;
}
.tpc-page-header__inner {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 40px;
    padding-bottom: 40px;
    border-bottom: 1px solid var(--cream);
}
.tpc-eyebrow {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.tpc-eyebrow::before {
    content: '';
    width: 20px;
    height: 1px;
    background: var(--accent);
}
.tpc-title {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: clamp(32px, 4vw, 54px);
    font-weight: 900;
    letter-spacing: -2px;
    line-height: 1.05;
    color: var(--ink);
    margin: 0 0 12px;
}
.tpc-title em { font-style: italic; color: var(--accent); }
.tpc-subtitle {
    font-size: 15px;
    line-height: 1.65;
    color: var(--ink-muted);
    max-width: 420px;
    margin: 0;
}
.tpc-header-stats {
    display: flex;
    gap: 32px;
    flex-shrink: 0;
}
.tpc-hstat { text-align: right; }
.tpc-hstat__num {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 28px;
    font-weight: 700;
    color: var(--ink);
    display: block;
    line-height: 1;
}
.tpc-hstat__label {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--ink-muted);
    margin-top: 4px;
    display: block;
}

/* Filter bar */
.tpc-filter-bar {
    padding: 24px 48px;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.tpc-filter-label {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--ink-muted);
    margin-right: 4px;
}
.tpc-filter-pill {
    padding: 7px 16px;
    border-radius: 40px;
    font-size: 13px;
    font-weight: 500;
    border: 1.5px solid var(--cream);
    background: #fff;
    color: var(--ink);
    cursor: pointer;
    transition: border-color .2s, color .2s, background .2s;
    font-family: 'DM Sans', sans-serif;
}
.tpc-filter-pill:hover { border-color: var(--accent); color: var(--accent); }
.tpc-filter-pill.active {
    background: var(--ink);
    border-color: var(--ink);
    color: #fff;
}
.tpc-filter-search {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 8px;
    background: #fff;
    border: 1.5px solid var(--cream);
    border-radius: 40px;
    padding: 7px 16px;
    transition: border-color .2s;
}
.tpc-filter-search:focus-within { border-color: var(--accent); }
.tpc-filter-search input {
    border: none;
    outline: none;
    background: none;
    font-family: 'DM Sans', sans-serif;
    font-size: 13px;
    color: var(--ink);
    width: 180px;
}
.tpc-filter-search input::placeholder { color: var(--ink-muted); }

/* Featured row */
.tpc-featured-row {
    padding: 0 48px 16px;
}
.tpc-featured-label {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: var(--ink-muted);
    margin-bottom: 14px;
}
.tpc-featured-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-bottom: 40px;
}
.tpc-featured-card {
    border-radius: var(--radius);
    padding: 28px 24px;
    position: relative;
    overflow: hidden;
    min-height: 180px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    cursor: pointer;
    transition: transform .25s, box-shadow .25s;
    text-decoration: none;
}
.tpc-featured-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 16px 48px rgba(0,0,0,0.2);
    text-decoration: none;
}
.tpc-featured-card::before {
    content: attr(data-topic);
    position: absolute;
    bottom: -16px; right: -8px;
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 88px;
    font-weight: 900;
    color: rgba(255,255,255,0.06);
    line-height: 1;
    pointer-events: none;
    white-space: nowrap;
}
.tpc-fc-1 { background: var(--ink); }
.tpc-fc-2 { background: var(--teal); }
.tpc-fc-3 { background: var(--accent); }

.tpc-fc-tag {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: rgba(255,255,255,0.5);
    margin-bottom: 8px;
}
.tpc-fc-name {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: clamp(20px, 3vw, 24px);
    font-weight: 700;
    color: #fff;
    line-height: 1.2;
    margin-bottom: 6px;
}
.tpc-fc-meta { font-size: 13px; color: rgba(255,255,255,0.55); }
.tpc-fc-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 20px;
}
.tpc-fc-count {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 30px;
    font-weight: 700;
    color: #fff;
    line-height: 1;
}
.tpc-fc-count-label { font-size: 11px; color: rgba(255,255,255,0.4); margin-top: 2px; }
.tpc-fc-follow {
    padding: 8px 18px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    border: 1.5px solid rgba(255,255,255,0.35);
    background: rgba(255,255,255,0.1);
    color: #fff;
    cursor: pointer;
    font-family: 'DM Sans', sans-serif;
    transition: background .2s, border-color .2s;
    backdrop-filter: blur(4px);
}
.tpc-fc-follow:hover { background: rgba(255,255,255,0.2); border-color: rgba(255,255,255,0.6); }
.tpc-fc-follow.following { background: #fff; color: var(--ink); border-color: #fff; }

/* Topics grid */
.tpc-grid-wrap { padding: 0 48px 80px; }
.tpc-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
}
.tpc-card {
    background: #fff;
    border: 1.5px solid var(--cream);
    border-radius: 10px;
    padding: 22px;
    transition: border-color .22s, transform .22s, box-shadow .22s;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    cursor: pointer;
    text-decoration: none !important;
    color: inherit;
    animation: fadeUp .5s ease both;
}
.tpc-card *, .tpc-card *:hover { text-decoration: none !important; }
.tpc-card:hover {
    border-color: var(--accent);
    transform: translateY(-2px);
    box-shadow: 0 8px 32px rgba(232,85,61,0.1);
}
.tpc-card::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: var(--accent);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .3s ease;
}
.tpc-card:hover::after { transform: scaleX(1); }
.tpc-card:hover .tpc-card__follow { opacity: 1; transform: translateY(0); }
.tpc-card:hover .tpc-card__hash { background: var(--accent); color: #fff; }

.tpc-card__top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 14px;
}
.tpc-card__hash {
    width: 40px; height: 40px;
    border-radius: 8px;
    background: var(--teal-soft);
    color: var(--teal);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 700;
    font-family: 'JetBrains Mono', monospace;
    transition: background .2s, color .2s;
    flex-shrink: 0;
}
.tpc-card__follow {
    padding: 6px 13px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
    border: 1.5px solid var(--cream);
    background: var(--parchment);
    color: var(--ink);
    cursor: pointer;
    font-family: 'DM Sans', sans-serif;
    transition: background .2s, color .2s, border-color .2s;
    opacity: 0;
    transform: translateY(4px);
    transition: opacity .2s, transform .2s, background .15s, color .15s;
    white-space: nowrap;
}
.tpc-card__follow:hover { background: var(--ink); color: #fff; border-color: var(--ink); }
.tpc-card__follow.following {
    opacity: 1 !important;
    transform: translateY(0) !important;
    background: var(--ink);
    color: #fff;
    border-color: var(--ink);
}
.tpc-card__follow.following:hover { background: var(--accent); border-color: var(--accent); }

.tpc-card__name {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 17px;
    font-weight: 700;
    color: var(--ink);
    margin-bottom: 5px;
    line-height: 1.25;
}
.tpc-card__meta {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    color: var(--ink-muted);
    letter-spacing: 0.3px;
    margin-bottom: 14px;
}
.tpc-card__bar {
    height: 2px;
    background: var(--cream);
    border-radius: 2px;
    overflow: hidden;
    margin-bottom: 12px;
}
.tpc-card__bar-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--teal), var(--accent));
    border-radius: 2px;
}
.tpc-card__footer { margin-top: auto; }
.tpc-card__trend {
    font-size: 11px;
    font-weight: 500;
    color: var(--teal);
}
.tpc-card__trend.hot  { color: var(--accent); }

/* No results */
.tpc-no-results {
    display: none;
    text-align: center;
    padding: 80px 20px;
    grid-column: 1 / -1;
}
.tpc-no-results__icon { font-size: 48px; margin-bottom: 16px; opacity: 0.4; }
.tpc-no-results__title {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 22px;
    font-weight: 700;
    color: var(--ink);
    margin-bottom: 8px;
}
.tpc-no-results__sub { font-size: 14px; color: var(--ink-muted); }

/* Responsive */
@media (max-width: 1100px) {
    .tpc-grid { grid-template-columns: repeat(3, 1fr); }
    .tpc-featured-grid { grid-template-columns: repeat(2, 1fr); }
    .tpc-featured-grid .tpc-featured-card:last-child { display: none; }
}
@media (max-width: 768px) {
    .tpc-page-header { padding: 36px 20px 0; }
    .tpc-page-header__inner { flex-direction: column; align-items: flex-start; gap: 24px; }
    .tpc-header-stats { gap: 24px; }
    .tpc-hstat { text-align: left; }
    .tpc-filter-bar { padding: 16px 20px; }
    .tpc-filter-search { margin-left: 0; width: 100%; }
    .tpc-filter-search input { width: 100%; }
    .tpc-featured-row { padding: 0 20px 16px; }
    .tpc-featured-grid { grid-template-columns: 1fr; }
    .tpc-featured-grid .tpc-featured-card:not(:first-child) { display: none; }
    .tpc-grid-wrap { padding: 0 20px 48px; }
    .tpc-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .tpc-card__follow { opacity: 1; transform: translateY(0); }
    .tpc-card__name { font-size: 15px; }
}
@media (max-width: 420px) {
    .tpc-grid { grid-template-columns: 1fr; }
}

/* ── §44 Topic single page (ts-*) ───────────────────────────── */

/* Hero */
.ts-hero {
    background: #2C1F14;
    position: relative;
    overflow: hidden;
    padding: 48px 48px 0;
}
.ts-hero::before {
    content: attr(data-topic);
    position: absolute;
    bottom: -2px; right: -1px;
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 160px;
    font-weight: 900;
    line-height: 1;
    white-space: nowrap;
    color: white;
    opacity: 0.035;
    -webkit-text-stroke: 1px rgba(255,255,255,0.06);
    pointer-events: none;
    z-index: 0;
    user-select: none;
}
.ts-hero-grid-bg {
    position: absolute; inset: 0;
    background-image:
        repeating-linear-gradient(0deg,  rgba(255,255,255,0.025) 0, rgba(255,255,255,0.025) 1px, transparent 1px, transparent 48px),
        repeating-linear-gradient(90deg, rgba(255,255,255,0.025) 0, rgba(255,255,255,0.025) 1px, transparent 1px, transparent 48px);
    pointer-events: none;
    z-index: 0;
}
.ts-hero::after {
    content: '';
    position: absolute; bottom: 0; left: 0; right: 0; height: 1px;
    background: linear-gradient(90deg, rgba(196,98,45,0.6), transparent);
    z-index: 1;
}
.ts-hero-glow {
    position: absolute; top: -80px; left: -60px;
    width: 500px; height: 400px;
	display:none;
    background: radial-gradient(ellipse, rgba(196,98,45,0.18) 0%, transparent 65%);
    pointer-events: none; z-index: 0;
}
.ts-hero-glow-2 {
    position: absolute; bottom: -40px; right: -20px;
    width: 350px; height: 300px;
	display:none;
    background: radial-gradient(ellipse, rgba(58,138,130,0.12) 0%, transparent 65%);
    pointer-events: none; z-index: 0;
}
.ts-hero__inner {
    max-width: 1300px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: flex-start;
    gap: 40px;
    position: relative; z-index: 1;
}
.ts-hero__left { padding-bottom: 40px; }

.ts-breadcrumb {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: rgba(255,255,255,0.3);
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.ts-breadcrumb a { color: rgba(255,255,255,0.3); text-decoration: none; }
.ts-breadcrumb a:hover { color: var(--gold); }
.ts-breadcrumb__sep { opacity: 0.4; }

.ts-icon-row { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.ts-icon {
    width: 54px; height: 54px;
    border-radius: 10px;
    background: rgba(232,85,61,0.15);
    border: 1.5px solid rgba(232,85,61,0.35);
    display: flex; align-items: center; justify-content: center;
    font-size: 24px; font-weight: 700;
    color: var(--accent);
    font-family: 'JetBrains Mono', monospace;
}
.ts-badge {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--gold);
    background: rgba(212,168,83,0.12);
    border: 1px solid rgba(212,168,83,0.25);
    padding: 5px 12px;
    border-radius: 2px;
    display: flex; align-items: center; gap: 6px;
}
.ts-badge__dot {
    width: 5px; height: 5px;
    background: var(--gold);
    border-radius: 50%;
    animation: tsPulse 2s infinite;
}
@keyframes tsPulse {
    0%,100% { opacity:1; transform:scale(1); }
    50%      { opacity:0.4; transform:scale(0.7); }
}

.ts-title {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: clamp(36px, 5vw, 60px);
    font-weight: 900;
    letter-spacing: -2px;
    line-height: 1.0;
    color: #fff;
    margin-bottom: 14px;
}
.ts-desc {
    font-size: 15px;
    line-height: 1.65;
    color: rgba(255,255,255,0.5);
    max-width: 520px;
    margin-bottom: 28px;
}

.ts-meta { display: flex; align-items: center; gap: 24px; }
.ts-meta__item {}
.ts-meta__num {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: clamp(18px, 2.8vw, 22px);
    font-weight: 700;
    color: #fff;
    line-height: 1;
}
.ts-meta__label { font-size: 12px; color: rgba(255,255,255,0.4); margin-top: 2px; }
.ts-meta__divider { width: 1px; height: 28px; background: rgba(255,255,255,0.1); }

/* Follow column */
.ts-follow-col {
    padding-top: 8px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 14px;
}
.ts-follow-btn {
    padding: 12px 28px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    font-family: 'DM Sans', sans-serif;
    transition: all .25s;
    border: 2px solid rgba(255,255,255,0.25);
    background: rgba(255,255,255,0.08);
    color: #fff;
    display: flex; align-items: center; gap: 8px;
    min-width: 148px;
    justify-content: center;
}
.ts-follow-btn:hover { background: rgba(255,255,255,0.15); border-color: rgba(255,255,255,0.45); }
.ts-follow-btn.following { background: var(--accent); border-color: var(--accent); color: #fff; }
.ts-follow-btn.following:hover { background: var(--accent-hover); border-color: var(--accent-hover); }

.ts-follower-stack { display: flex; align-items: center; gap: 0; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.ts-follower-avatars { display: flex; }
.ts-f-avatar {
    width: 26px; height: 26px;
    border-radius: 50%;
    border: 2px solid var(--ink);
    margin-left: -8px;
    font-size: 9px; font-weight: 700; color: #fff;
    display: flex; align-items: center; justify-content: center;
    overflow: hidden; flex-shrink: 0;
}
.ts-f-avatar:first-child { margin-left: 0; }
.ts-f-avatar img { width: 100%; height: 100%; object-fit: cover; }
.ts-follower-label { font-size: 12px; color: rgba(255,255,255,0.4); }

/* Tab nav */
.ts-tab-nav {
    background: #2C1F14;
    border-top: 1px solid rgba(255,255,255,0.06);
}
.ts-tab-nav__inner {
    max-width: 1300px;
    margin: 0 auto;
    padding: 0 48px;
    display: flex;
    align-items: center;

}
.ts-tab {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 15px 22px;
    font-size: 13px;
    font-weight: 500;
    color: rgba(255,255,255,0.4);
    cursor: pointer;
    border: none;
    background: none;
    font-family: 'DM Sans', sans-serif;
    border-bottom: 2px solid transparent;
    transition: color .2s, border-color .2s;
    position: relative;
    top: 1px;
    white-space: nowrap;
}
.ts-tab:hover { color: rgba(255,255,255,0.8); }
.ts-tab.active { color: var(--gold); border-bottom-color: var(--accent); }

/* Main layout */
.ts-layout {
    max-width: 1300px;
    margin: 0 auto;
    padding: 44px 48px 80px;
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 48px;
    align-items: start;
}
.ts-main {
    min-width: 0;
}

/* blog-grid inside ts-main uses the same 2-col layout as ts-trending-grid */
.ts-main .blog-grid {
    grid-template-columns: repeat(2, 1fr);
}
@media (max-width: 640px) {
    .ts-main .blog-grid { grid-template-columns: 1fr; }
}

/* Section headers */
.ts-section-hdr {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
}
.ts-section-hdr__left { display: flex; align-items: center; gap: 12px; }
.ts-section-hdr__title {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 21px;
    font-weight: 700;
    color: var(--ink);
    letter-spacing: -0.3px;
}
.ts-section-hdr__count {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    color: var(--ink-muted);
    background: var(--cream);
    padding: 3px 9px;
    border-radius: 20px;
}

/* Trending grid — 2 cols */
.ts-trending-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin-bottom: 48px;
}
.ts-wcard {
    background: #fff;
    border: 1.5px solid var(--cream);
    border-radius: 10px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    text-decoration: none !important;
    color: inherit;
    transition: border-color .25s, transform .25s, box-shadow .25s;
    animation: fadeUp .5s ease both;
}
.ts-wcard:hover {
    border-color: rgba(232,85,61,0.3);
    transform: translateY(-3px);
    box-shadow: 0 10px 40px rgba(0,0,0,0.1);
}
.ts-wcard:hover .ts-wcard__title { color: var(--accent); }
.ts-wcard__image {
    width: 100%;
    aspect-ratio: 16/9;
    overflow: hidden;
    background: var(--cream);
    position: relative;
}
.ts-wcard__image img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.ts-wcard:hover .ts-wcard__image img { transform: scale(1.04); }
.ts-wcard__time {
    position: absolute; bottom: 8px; right: 8px;
    background: rgba(0,0,0,0.65);
    color: #fff;
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    padding: 3px 7px;
    border-radius: 3px;
    backdrop-filter: blur(4px);
}
.ts-wcard__body { padding: 18px; flex: 1; display: flex; flex-direction: column; }
.ts-wcard__author-row {
    display: flex; align-items: center; gap: 8px;
    margin-bottom: 10px;
}
.ts-wcard__avatar {
    width: 26px; height: 26px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 9px; font-weight: 700; color: #fff;
    overflow: hidden; flex-shrink: 0;
}
.ts-wcard__avatar img { width: 100%; height: 100%; object-fit: cover; }
.ts-wcard__author { font-size: 12px; font-weight: 600; color: var(--ink); }
.ts-wcard__date { font-size: 11px; color: var(--ink-muted); margin-left: auto; }
.ts-wcard__title {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 16px;
    font-weight: 700;
    color: var(--ink);
    line-height: 1.35;
    margin-bottom: 8px;
    transition: color .2s;
}
.ts-wcard__excerpt {
    font-size: 13px;
    line-height: 1.6;
    color: var(--ink-muted);
    margin-bottom: 14px;
    flex: 1;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.ts-wcard__footer {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--cream);
}
.ts-wcard__action {
    display: flex; align-items: center; gap: 4px;
    font-size: 12px;
    color: var(--ink-muted);
}

/* Latest list */
.ts-latest-list { display: flex; flex-direction: column; }
.ts-litem {
    display: grid;
    grid-template-columns: 1fr 80px;
    gap: 16px;
    align-items: center;
    padding: 20px 0;
    border-bottom: 1px solid var(--cream);
    text-decoration: none !important;
    color: inherit;
    transition: background .15s;
    animation: fadeUp .5s ease both;
}
.ts-litem:first-child { border-top: 1px solid var(--cream); }
.ts-litem:hover .ts-litem__title { color: var(--accent); }
.ts-litem__author-row {
    display: flex; align-items: center; gap: 8px;
    margin-bottom: 8px;
}
.ts-litem__avatar {
    width: 22px; height: 22px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 8px; font-weight: 700; color: #fff;
    overflow: hidden; flex-shrink: 0;
}
.ts-litem__avatar img { width: 100%; height: 100%; object-fit: cover; }
.ts-litem__author { font-size: 12px; font-weight: 600; color: var(--ink); }
.ts-litem__date { font-size: 11px; color: var(--ink-muted); margin-left: 4px; }
.ts-litem__title {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 15px;
    font-weight: 700;
    color: var(--ink);
    line-height: 1.35;
    margin-bottom: 10px;
    transition: color .2s;
}
.ts-litem__footer { display: flex; align-items: center; gap: 12px; }
.ts-litem__action {
    display: flex; align-items: center; gap: 4px;
    font-size: 12px;
    color: var(--ink-muted);
}
.ts-litem__action.liked { color: var(--accent); }
.ts-litem__thumb {
    width: 80px; height: 60px;
    border-radius: 6px;
    overflow: hidden;
    flex-shrink: 0;
}
.ts-litem__thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.ts-litem:hover .ts-litem__thumb img { transform: scale(1.06); }

/* Blogs list (tab) */
/* Blog directory-style cards for topic page blogs tab */
.ts-bcard {
    display: flex; align-items: flex-start; gap: 16px;
    padding: 20px 0; border-bottom: 1px solid var(--cream);
    text-decoration: none !important; color: inherit;
    transition: background .15s;
}
.ts-bcard:first-child { border-top: 1px solid var(--cream); }
.ts-bcard:hover .ts-bcard__name { color: var(--accent); }
.ts-bcard__icon {
    width: 52px; height: 52px; border-radius: 10px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 22px; font-weight: 700; color: #fff; overflow: hidden;
}
.ts-bcard__icon img { width: 100%; height: 100%; object-fit: cover; }
.ts-bcard__body { flex: 1; min-width: 0; }
.ts-bcard__name {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 15px; font-weight: 700; color: var(--ink);
    margin-bottom: 4px; transition: color .15s;
}
.ts-bcard__desc {
    font-size: 13px; color: var(--ink-muted); line-height: 1.5;
    margin-bottom: 8px;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
}
.ts-bcard__footer { display: flex; align-items: center; gap: 14px; }
.ts-bcard__stat {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 12px; color: var(--ink-muted);
}
.ts-bcard__visit {
    margin-left: auto; font-size: 12px; font-weight: 600;
    color: var(--accent); transition: opacity .15s;
}
.ts-bcard:hover .ts-bcard__visit { opacity: .7; }

.ts-blogs-list { display: flex; flex-direction: column; gap: 2px; }
.ts-blog-item {
    display: flex; align-items: center; gap: 14px;
    padding: 16px 0;
    border-bottom: 1px solid var(--cream);
    text-decoration: none !important;
    color: inherit;
    transition: background .15s;
}
.ts-blog-item:first-child { border-top: 1px solid var(--cream); }
.ts-blog-item:hover .ts-blog-item__visit { color: var(--accent); }
.ts-blog-item__avatar {
    width: 44px; height: 44px;
    border-radius: 8px;
    background: linear-gradient(135deg, var(--accent), var(--gold));
    display: flex; align-items: center; justify-content: center;
    font-size: 16px; font-weight: 700; color: #fff;
    overflow: hidden; flex-shrink: 0;
}
.ts-blog-item__avatar img { width: 100%; height: 100%; object-fit: cover; }
.ts-blog-item__name { font-size: 14px; font-weight: 600; color: var(--ink); margin-bottom: 2px; }
.ts-blog-item__posts { font-size: 12px; color: var(--ink-muted); }
.ts-blog-item__visit { margin-left: auto; font-size: 13px; font-weight: 600; color: var(--ink-muted); transition: color .2s; }

/* Writers list (tab) */
/* Writer card — same grid slot as ts-wcard */
.ts-writer-card { cursor: default; }
.ts-writer-card__banner {
    height: 80px;
    position: relative;
    flex-shrink: 0;
}
.ts-writer-card__avatar {
    position: absolute;
    bottom: -28px; left: 50%;
    transform: translateX(-50%);
    width: 56px; height: 56px;
    border-radius: 50%;
    border: 3px solid #fff;
    background: var(--cream);
    display: flex; align-items: center; justify-content: center;
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 22px; font-weight: 700; color: #fff;
    overflow: hidden;
    text-decoration: none !important;
    box-shadow: 0 2px 12px rgba(0,0,0,0.15);
}
.ts-writer-card__avatar img { width: 100%; height: 100%; object-fit: cover; }
.ts-writer-card__body {
    padding: 40px 18px 18px;
    display: flex; flex-direction: column; align-items: center;
    flex: 1;
}
.ts-writer-card__name-row {
    display: flex; align-items: center; gap: 6px;
    margin-bottom: 2px;
}
.ts-writer-card__name {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 15px; font-weight: 700;
    color: var(--ink); text-decoration: none !important;
    transition: color .15s;
}
.ts-wcard.ts-writer-card:hover .ts-writer-card__name { color: var(--accent); }
.ts-writer-card__pro {
    font-family: 'JetBrains Mono', monospace;
    font-size: 9px; font-weight: 700; letter-spacing: 1px;
    background: var(--gold); color: #fff;
    padding: 2px 5px; border-radius: 3px;
}
.ts-writer-card__username {
    font-size: 11px; color: var(--ink-muted);
    margin-bottom: 10px;
}
.ts-writer-card__bio {
    font-size: 12px; color: var(--ink-muted);
    line-height: 1.55; text-align: center;
    margin-bottom: 12px;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
}
.ts-writer-card__stats {
    display: flex; align-items: center; gap: 14px;
    margin-bottom: 14px;
    padding-top: 10px;
    border-top: 1px solid var(--cream);
    width: 100%;
    justify-content: center;
}
.ts-writer-card__stat {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 12px; color: var(--ink-muted);
}
.ts-writer-card__stat svg { opacity: .6; }
.ts-writer-follow {
    display: inline-flex; align-items: center; justify-content: center; gap: 5px;
    width: 100%; padding: 8px 16px;
    border-radius: 8px;
    font-size: 13px; font-weight: 600;
    cursor: pointer;
    background: var(--accent-glow);
    border: 1.5px solid var(--accent);
    color: var(--accent);
    font-family: 'DM Sans', sans-serif;
    transition: background .15s, color .15s;
    margin-top: auto;
}
.ts-writer-follow:hover { background: var(--accent); color: #fff; }
.ts-writer-follow.following { background: var(--parchment-warm); border-color: var(--border); color: var(--ink-muted); }
.ts-writer-follow.following:hover { background: var(--cream); border-color: var(--ink-muted); color: var(--ink); }


/* Sidebar cards */
.ts-sidebar { display: flex; flex-direction: column; gap: 24px; position: sticky; top: 80px; }
.ts-sc {
    background: #fff;
    border: 1.5px solid var(--cream);
    border-radius: 10px;
    overflow: hidden;
}
.ts-sc__header {
    padding: 16px 18px 14px;
    border-bottom: 1px solid var(--cream);
    display: flex; align-items: center; justify-content: space-between;
}
.ts-sc__title {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 15px;
    font-weight: 700;
    color: var(--ink);
}
.ts-sc__link { font-size: 12px; font-weight: 600; color: var(--accent); text-decoration: none !important; cursor: pointer; background: none; border: none; padding: 0; }
.ts-sc__link:hover { opacity: .7; }

.ts-sc__blog-item {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 18px;
    border-bottom: 1px solid var(--cream);
    text-decoration: none !important;
    color: inherit;
    transition: background .15s;
}
.ts-sc__blog-item:last-child { border-bottom: none; }
.ts-sc__blog-item:hover { background: var(--parchment); }
.ts-sc__blog-item:hover .ts-sc__blog-visit { color: var(--accent); }
.ts-sc__blog-thumb {
    width: 40px; height: 40px;
    border-radius: 8px;
    background: linear-gradient(135deg, var(--accent), var(--gold));
    display: flex; align-items: center; justify-content: center;
    font-size: 14px; font-weight: 700; color: #fff;
    overflow: hidden; flex-shrink: 0;
}
.ts-sc__blog-thumb img { width: 100%; height: 100%; object-fit: cover; }
.ts-sc__blog-name { font-size: 13px; font-weight: 600; color: var(--ink); }
.ts-sc__blog-posts { font-size: 11px; color: var(--ink-muted); margin-top: 1px; }
.ts-sc__blog-visit { margin-left: auto; font-size: 13px; color: var(--ink-muted); transition: color .15s; }

.ts-sc__tags { padding: 14px 18px; display: flex; flex-wrap: wrap; gap: 8px; }
.ts-sc__tag {
    padding: 5px 11px;
    border-radius: 3px;
    font-size: 12px;
    font-weight: 500;
    border: 1.5px solid var(--cream);
    background: var(--parchment);
    color: var(--ink);
    text-decoration: none !important;
    transition: border-color .15s, color .15s;
}
.ts-sc__tag:hover { border-color: var(--accent); color: var(--accent); }

.ts-sc__writer {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 18px;
    border-bottom: 1px solid var(--cream);
}
.ts-sc__writer:last-child { border-bottom: none; }
.ts-sc__writer-avatar {
    width: 36px; height: 36px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 12px; font-weight: 700; color: #fff;
    overflow: hidden; flex-shrink: 0;
    text-decoration: none !important;
}
.ts-sc__writer-avatar img { width: 100%; height: 100%; object-fit: cover; }
.ts-sc__writer-name { font-size: 13px; font-weight: 600; color: var(--ink); text-decoration: none !important; }
.ts-sc__writer-name:hover { color: var(--accent); }
.ts-sc__writer-count { font-size: 11px; color: var(--ink-muted); margin-top: 1px; }

/* Empty state */
.ts-empty {
    text-align: center;
    padding: 60px 20px;
}
.ts-empty__icon { margin-bottom: 12px; opacity: .45; line-height: 1; }
.ts-empty__title {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 20px; font-weight: 700;
    color: var(--ink); margin-bottom: 8px;
}
.ts-empty p { font-size: 14px; color: var(--ink-muted); margin-bottom: 16px; }
.ts-empty__btn {
    display: inline-block;
    padding: 10px 24px;
    background: var(--accent);
    color: #fff;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none !important;
}

/* Responsive */
@media (max-width: 1024px) {
    .ts-layout { grid-template-columns: 1fr; padding: 32px 32px 60px; }
    .ts-sidebar { position: static; }
    .ts-hero { padding: 40px 24px 0; }
    .ts-hero::before { font-size: 120px; }
    .ts-hero__inner { grid-template-columns: 1fr; gap: 24px; }
    .ts-follow-col { align-items: flex-start; flex-direction: row; flex-wrap: wrap; }
    .ts-tab-nav__inner { padding: 0 24px; }
}
@media (max-width: 640px) {
    .ts-hero { padding: 28px 16px 0; }
    .ts-hero::before { font-size: 80px; }
    .ts-title { font-size: 34px; letter-spacing: -1px; }
    .ts-meta { gap: 14px; flex-wrap: wrap; }
    .ts-meta__divider { height: 20px; }
    .ts-meta__num { font-size: 18px; }
    .ts-layout { padding: 24px 16px 48px; }
    .ts-trending-grid { grid-template-columns: 1fr; }
    .ts-tab-nav__inner { padding: 0 16px; }
}

/* ── Top Writers Modal (ts-wm-*) ────────────────────────────── */
.ts-wm-overlay {
    display: none;
    position: fixed; inset: 0; z-index: 9000;
    background: rgba(0,0,0,0.55);
    backdrop-filter: blur(3px);
    align-items: center; justify-content: center;
    padding: 20px;
}
.ts-wm {
    background: #fff;
    border-radius: 14px;
    width: 100%; max-width: 560px;
    max-height: 80vh;
    display: flex; flex-direction: column;
    box-shadow: 0 24px 80px rgba(0,0,0,0.2);
    overflow: hidden;
}
.ts-wm__header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 20px 24px 18px;
    border-bottom: 1px solid var(--cream);
    flex-shrink: 0;
}
.ts-wm__title {
    display: flex; align-items: center; gap: 8px;
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 17px; font-weight: 700; color: var(--ink);
}
.ts-wm__close {
    width: 32px; height: 32px;
    display: flex; align-items: center; justify-content: center;
    border: none; background: var(--parchment); border-radius: 50%;
    cursor: pointer; color: var(--ink-muted);
    transition: background .15s, color .15s;
}
.ts-wm__close:hover { background: var(--cream); color: var(--ink); }
.ts-wm__body {
    overflow-y: auto;
    flex: 1;
    padding: 8px 0;
}
.ts-wm__item {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 24px;
    transition: background .15s;
}
.ts-wm__item:hover { background: var(--parchment); }
.ts-wm__rank {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px; font-weight: 700;
    color: var(--ink-muted);
    width: 20px; flex-shrink: 0; text-align: right;
}
.ts-wm__rank:nth-child(1) { color: #D4A853; }
.ts-wm__avatar {
    width: 42px; height: 42px; border-radius: 50%; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 16px; font-weight: 700; color: #fff;
    overflow: hidden; text-decoration: none !important;
}
.ts-wm__avatar img { width: 100%; height: 100%; object-fit: cover; }
.ts-wm__info { flex: 1; min-width: 0; }
.ts-wm__name-row { display: flex; align-items: center; gap: 6px; margin-bottom: 2px; }
.ts-wm__name {
    font-size: 13px; font-weight: 700; color: var(--ink);
    text-decoration: none !important; white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis;
}
.ts-wm__name:hover { color: var(--accent); }
.ts-wm__bio {
    font-size: 11px; color: var(--ink-muted);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    margin-bottom: 4px;
}
.ts-wm__stats {
    display: flex; align-items: center; gap: 10px;
    font-size: 11px; color: var(--ink-muted);
}
.ts-wm__stats span { display: inline-flex; align-items: center; gap: 3px; }
.ts-wm__follow {
    flex-shrink: 0;
    padding: 6px 14px; border-radius: 8px;
    font-size: 12px; font-weight: 600;
    cursor: pointer; font-family: 'DM Sans', sans-serif;
    background: var(--accent-glow); border: 1.5px solid var(--accent); color: var(--accent);
    transition: background .15s, color .15s;
    white-space: nowrap;
}
.ts-wm__follow:hover { background: var(--accent); color: #fff; }
.ts-wm__follow.following { background: var(--parchment-warm); border-color: var(--border); color: var(--ink-muted); }

/* ── §45 Creator Profile (cp-*) ──────────────────────────────────────────── */

/* Hero */
.cp-hero {
    background: var(--ink);
    color: var(--ink-text);
    padding: 48px 0 0;
}
.cp-hero__inner {
    max-width: 900px;
    margin: 0 auto;
    padding: 0 24px 40px;
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 28px;
    align-items: start;
}
@media (max-width: 768px) {
    .cp-hero__inner { grid-template-columns: auto 1fr; }
    .cp-actions { grid-column: 1/-1; }
}
@media (max-width: 480px) {
    .cp-hero__inner { grid-template-columns: 1fr; }
}

/* Avatar */
.cp-avatar {
    width: 96px; height: 96px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--accent);
    flex-shrink: 0;
    border: 3px solid rgba(255,255,255,.12);
}
.cp-avatar__img { width: 100%; height: 100%; object-fit: cover; }
.cp-avatar__init {
    width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center;
    font-size: 2.25rem; font-weight: 800; color: #fff;
    font-family: var(--font-serif);
}

/* Info */
.cp-info__name {
    font-family: var(--font-serif);
    font-size: 1.75rem;
    font-weight: 700;
    color: #fff;
    letter-spacing: -.02em;
}
.cp-info__username {
    font-size: .875rem;
    color: rgba(255,255,255,.5);
    margin-top: 2px;
    font-family: var(--font-mono);
}
.cp-info__bio {
    margin-top: 10px;
    color: rgba(255,255,255,.75);
    font-size: .9375rem;
    line-height: 1.55;
    max-width: 480px;
}
.cp-info__meta {
    margin-top: 8px;
    font-size: .8125rem;
    color: rgba(255,255,255,.4);
}

/* Stats + Actions */
.cp-actions { display: flex; flex-direction: column; align-items: flex-end; gap: 16px; }
.cp-stats { display: flex; gap: 20px; }
.cp-stat {
    text-align: center;
    text-decoration: none;
    color: rgba(255,255,255,.85);
    transition: color var(--transition);
}
.cp-stat:hover { color: var(--accent); text-decoration: none; }
.cp-stat__val  { display: block; font-size: 1.125rem; font-weight: 800; color: #fff; }
.cp-stat__label{ display: block; font-size: .75rem; color: rgba(255,255,255,.45); }

/* Buttons */
.cp-btns { display: flex; gap: 8px; align-items: center; }
.cp-btn-follow {
    padding: 8px 20px;
    border-radius: var(--radius-full);
    border: 1.5px solid var(--accent);
    background: transparent;
    color: var(--accent);
    font-size: .875rem;
    font-weight: 600;
    cursor: pointer;
    transition: background var(--transition), color var(--transition);
    white-space: nowrap;
}
.cp-btn-follow:hover { background: var(--accent); color: #fff; }
.cp-btn-follow.is-following {
    background: var(--accent);
    color: #fff;
}
.cp-btn-follow.is-following:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.cp-btn-msg {
    padding: 8px 16px;
    border-radius: var(--radius-full);
    border: 1.5px solid rgba(255,255,255,.2);
    background: transparent;
    color: rgba(255,255,255,.7);
    font-size: .875rem;
    cursor: pointer;
    transition: border-color var(--transition), color var(--transition);
    text-decoration: none;
}
.cp-btn-msg:hover { border-color: rgba(255,255,255,.5); color: #fff; text-decoration: none; }
.cp-btn-msg:disabled { opacity: .35; cursor: default; }

/* Tab Nav */
.cp-tab-nav {
    background: var(--ink-light);
    border-bottom: 1px solid rgba(255,255,255,.06);
    position: sticky;
    top: 65px;
    z-index: 90;
}
.cp-tab-nav__inner {
    max-width: 900px;
    margin: 0 auto;
    padding: 0 24px;
    display: flex;
    gap: 4px;
    overflow-x: auto;
    scrollbar-width: none;
}
.cp-tab-nav__inner::-webkit-scrollbar { display: none; }
.cp-tab {
    padding: 14px 16px;
    font-size: .875rem;
    font-weight: 500;
    color: rgba(255,255,255,.5);
    border-bottom: 2px solid transparent;
    white-space: nowrap;
    text-decoration: none;
    transition: color var(--transition), border-color var(--transition);
}
.cp-tab:hover { color: rgba(255,255,255,.85); text-decoration: none; }
.cp-tab.is-active { color: #fff; border-bottom-color: var(--accent); }

/* Body */
.cp-body {
    max-width: 900px;
    margin: 0 auto;
    padding: 32px 24px 80px;
}

/* Posts tab (reuse feed-card, just need width container) */
.cp-posts { display: flex; flex-direction: column; gap: 0; }

/* Activity */
.cp-activity-list { display: flex; flex-direction: column; gap: 1px; }
.cp-act-card {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 0;
    border-bottom: 1px solid var(--border);
}
.cp-act-card__avatar {
    width: 36px; height: 36px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    background: var(--accent);
}
.cp-act-card__img { width: 100%; height: 100%; object-fit: cover; }
.cp-act-card__init {
    width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center;
    font-size: .875rem; font-weight: 700; color: #fff;
}
.cp-act-card__body { flex: 1; font-size: .9rem; line-height: 1.5; }
.cp-act-card__actor { font-weight: 600; }
.cp-act-card__actor a { color: var(--ink); text-decoration: none; }
.cp-act-card__actor a:hover { color: var(--accent); }
.cp-act-card__text a { color: var(--accent); text-decoration: none; }
.cp-act-card__time { font-size: .8rem; color: var(--ink-muted); white-space: nowrap; flex-shrink: 0; }

/* Blogs tab */
.cp-blogs-header { margin-bottom: 20px; }
.cp-blogs-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 20px;
}
.cp-blog-card {
    border-radius: var(--radius);
    border: 1px solid var(--border);
    background: var(--surface);
    overflow: hidden;
    text-decoration: none;
    color: var(--ink);
    transition: box-shadow var(--transition), border-color var(--transition);
    display: flex;
    flex-direction: column;
}
.cp-blog-card:hover { box-shadow: var(--shadow-md); border-color: transparent; text-decoration: none; }
.cp-blog-card__cover {
    height: 100px;
    background-size: cover;
    background-position: center;
}
.cp-blog-card__cover--default {
    background: linear-gradient(135deg, var(--ink) 0%, var(--ink-light) 100%);
}
.cp-blog-card__body {
    padding: 16px;
    display: flex;
    gap: 12px;
    align-items: flex-start;
}
.cp-blog-card__avatar {
    width: 44px; height: 44px;
    border-radius: 50%;
    flex-shrink: 0;
    object-fit: cover;
}
.cp-blog-card__avatar--init {
    width: 44px; height: 44px;
    border-radius: 50%;
    background: var(--accent);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.125rem; font-weight: 800; color: #fff;
    flex-shrink: 0;
}
.cp-blog-card__name  { font-weight: 700; font-size: .9375rem; }
.cp-blog-card__desc  { font-size: .8125rem; color: var(--ink-muted); margin-top: 4px; }
.cp-blog-card__meta  { font-size: .75rem; color: var(--ink-muted); margin-top: 6px; font-family: var(--font-mono); }

/* User list (followers/following) */
.cp-user-list { display: flex; flex-direction: column; gap: 1px; }
.cp-user-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 0;
    border-bottom: 1px solid var(--border);
}
.cp-user-card__av {
    width: 48px; height: 48px;
    border-radius: 50%;
    flex-shrink: 0;
    text-decoration: none;
    overflow: hidden;
    display: block;
}
.cp-user-card__img  { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.cp-user-card__init {
    width: 100%; height: 100%;
    border-radius: 50%;
    background: var(--accent);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.125rem; font-weight: 700; color: #fff;
}
.cp-user-card__info { flex: 1; min-width: 0; }
.cp-user-card__name {
    font-weight: 600;
    font-size: .9375rem;
    color: var(--ink);
    text-decoration: none;
}
.cp-user-card__name:hover { color: var(--accent); text-decoration: none; }
.cp-user-card__username { font-size: .8125rem; color: var(--ink-muted); font-family: var(--font-mono); }
.cp-user-card__bio { font-size: .8125rem; color: var(--ink-muted); margin-top: 2px; }
.cp-user-card__follow {
    padding: 6px 14px;
    border-radius: var(--radius-full);
    border: 1.5px solid var(--accent);
    background: transparent;
    color: var(--accent);
    font-size: .8125rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
    transition: background var(--transition), color var(--transition);
}
.cp-user-card__follow:hover { background: var(--accent); color: #fff; }
.cp-user-card__follow.is-following { background: var(--accent); color: #fff; }
.cp-user-card__follow.is-following:hover { background: var(--accent-hover); border-color: var(--accent-hover); }

/* Empty state */
.cp-empty {
    text-align: center;
    padding: 64px 24px;
}
.cp-empty__icon  { font-size: 2.5rem; margin-bottom: 12px; }
.cp-empty__title { font-size: 1.125rem; font-weight: 700; color: var(--ink); }

/* ── §46 Blog Page (bp-*) ─────────────────────────────────────────────────── */

.bp-flash {
    background: var(--teal-soft);
    border-left: 3px solid var(--teal);
    padding: 12px 24px;
    font-size: .9rem;
    max-width: 900px;
    margin: 16px auto 0;
}

.bp-cover {
    height: 200px;
    background-size: cover;
    background-position: center;
    background-color: var(--ink);
}

.bp-header {
    background: var(--ink);
    color: var(--ink-text);
    padding: 32px 0;
}
.bp-header__inner {
    max-width: 900px;
    margin: 0 auto;
    padding: 0 24px;
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 24px;
    align-items: start;
}
@media (max-width: 768px) {
    .bp-header__inner { grid-template-columns: auto 1fr; }
    .bp-actions { grid-column: 1/-1; }
}

.bp-avatar {
    width: 80px; height: 80px;
    border-radius: var(--radius);
    overflow: hidden;
    border: 2px solid rgba(255,255,255,.15);
    flex-shrink: 0;
    background: var(--accent);
}
.bp-avatar__img { width: 100%; height: 100%; object-fit: cover; }
.bp-avatar__init {
    width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center;
    font-size: 2rem; font-weight: 800; color: #fff;
    font-family: var(--font-serif);
}

.bp-name {
    font-family: var(--font-serif);
    font-size: 1.625rem;
    font-weight: 700;
    color: #fff;
    letter-spacing: -.01em;
}
.bp-desc {
    font-size: .9375rem;
    color: rgba(255,255,255,.7);
    margin-top: 6px;
    line-height: 1.5;
}
.bp-owner { font-size: .8rem; color: rgba(255,255,255,.45); margin-top: 8px; }
.bp-owner a { color: rgba(255,255,255,.7); text-decoration: none; }
.bp-owner a:hover { color: var(--accent); text-decoration: none; }

.bp-topics { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.bp-topic-tag {
    padding: 3px 10px;
    border-radius: var(--radius-full);
    background: rgba(255,255,255,.08);
    color: rgba(255,255,255,.7);
    font-size: .75rem;
    font-weight: 500;
    text-decoration: none;
    transition: background var(--transition), color var(--transition);
}
.bp-topic-tag:hover { background: var(--accent); color: #fff; text-decoration: none; }

.bp-actions { display: flex; flex-direction: column; align-items: flex-end; gap: 14px; }
.bp-stats { display: flex; gap: 20px; }
.bp-stat { text-align: center; }
.bp-stat__val   { display: block; font-size: 1.125rem; font-weight: 800; color: #fff; }
.bp-stat__label { display: block; font-size: .75rem; color: rgba(255,255,255,.45); }
.bp-btns { display: flex; gap: 8px; align-items: center; }

/* About tab */
.bp-about {
    max-width: 560px;
    padding: 8px 0;
}
.bp-about__h {
    font-family: var(--font-serif);
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 12px;
}
.bp-about__desc {
    font-size: .9375rem;
    color: var(--ink-muted);
    line-height: 1.65;
    margin-bottom: 20px;
    white-space: pre-wrap;
}
.bp-about__row {
    display: flex;
    gap: 16px;
    padding: 10px 0;
    border-bottom: 1px solid var(--border);
    align-items: baseline;
}
.bp-about__label { font-size: .8125rem; color: var(--ink-muted); width: 100px; flex-shrink: 0; }
.bp-about__val   { font-size: .9375rem; font-weight: 500; }
.bp-about__val a { color: var(--accent); text-decoration: none; }

/* ── §47 Create/Edit Blog form (cb-*) ────────────────────────────────────── */

.cb-page {
    padding: 40px 24px 80px;
}
.cb-page__inner {
    max-width: 640px;
    margin: 0 auto;
}
.cb-header { margin-bottom: 32px; }
.cb-title {
    font-family: var(--font-serif);
    font-size: 2rem;
    font-weight: 700;
    letter-spacing: -.02em;
    color: var(--ink);
    margin-bottom: 6px;
}
.cb-title em { font-style: italic; color: var(--accent); }
.cb-subtitle { color: var(--ink-muted); font-size: .9375rem; }
.cb-back { font-size: .875rem; color: var(--ink-muted); text-decoration: none; }
.cb-back:hover { color: var(--accent); }

.cb-form { display: flex; flex-direction: column; gap: 24px; }
.cb-field { display: flex; flex-direction: column; gap: 6px; }
.cb-field--error .cb-input { border-color: var(--color-error); }
.cb-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 768px) {
  .cb-page { padding: 28px 16px 60px; }
  .cb-upload { height: 100px; }
  .cb-upload--wide { height: 80px; }
}
@media (max-width: 540px) { .cb-field-row { grid-template-columns: 1fr; } }

.cb-label {
    font-size: .875rem;
    font-weight: 600;
    color: var(--ink);
    display: flex;
    align-items: baseline;
    gap: 8px;
}
.cb-label__hint { font-size: .8rem; font-weight: 400; color: var(--ink-muted); font-family: var(--font-mono); }
.cb-required { color: var(--color-error); }
.cb-hint { font-size: .8rem; color: var(--ink-muted); }
.cb-error { font-size: .8125rem; color: var(--color-error); }

.cb-input {
    padding: 10px 14px;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-sm);
    font-family: var(--font-sans);
    font-size: .9375rem;
    color: var(--ink);
    background: var(--surface);
    transition: border-color var(--transition);
    outline: none;
    width: 100%;
    box-sizing: border-box;
}
.cb-input:focus { border-color: var(--accent); }
.cb-input--mono { font-family: var(--font-mono); }
.cb-select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 36px; cursor: pointer; }
.cb-textarea { resize: vertical; min-height: 100px; }

/* Upload areas */
.cb-upload {
    position: relative;
    width: 100%;
    height: 120px;
    border: 2px dashed var(--border);
    border-radius: var(--radius-sm);
    overflow: hidden;
    cursor: pointer;
    transition: border-color var(--transition);
}
.cb-upload:hover { border-color: var(--accent); }
.cb-upload--wide { height: 100px; }
.cb-upload__input {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
    z-index: 2;
    width: 100%;
    height: 100%;
}
.cb-upload__preview { position: absolute; inset: 0; z-index: 1; }
.cb-upload__placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 100%;
    color: var(--ink-muted);
    font-size: .8125rem;
}
.cb-current-img {
    display: block;
    margin-bottom: 8px;
    border-radius: var(--radius-sm);
    object-fit: cover;
}
.cb-current-img--avatar { width: 64px; height: 64px; border-radius: 50%; }
.cb-current-img--cover  { width: 100%; height: 80px; }

/* Topic grid */
.cb-topic-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.cb-topic-pill {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 5px 12px;
    border-radius: var(--radius-full);
    border: 1.5px solid var(--border);
    font-size: .8125rem;
    font-weight: 500;
    cursor: pointer;
    transition: border-color var(--transition), background var(--transition), color var(--transition);
    user-select: none;
    color: var(--ink-muted);
}
.cb-topic-pill:hover { border-color: var(--accent); color: var(--accent); }
.cb-topic-pill__check { display: none; }
.cb-topic-pill:has(.cb-topic-pill__check:checked) {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}

/* Actions row */
.cb-actions { display: flex; gap: 12px; align-items: center; margin-top: 8px; }

/* Submit post list */
.sp-post-list { display: flex; flex-direction: column; gap: 1px; }
.sp-post-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 0;
    border-bottom: 1px solid var(--border);
    cursor: pointer;
}
.sp-post-item:hover .sp-post-item__title { color: var(--accent); }
.sp-post-item__radio { flex-shrink: 0; accent-color: var(--accent); width: 18px; height: 18px; }
.sp-post-item__title { font-weight: 600; font-size: .9375rem; color: var(--ink); transition: color var(--transition); }
.sp-post-item__slug  { font-size: .8rem; color: var(--ink-muted); font-family: var(--font-mono); margin-top: 2px; }
@media (max-width: 768px) {
  .sp-post-item__radio { width: 22px; height: 22px; }
  .sp-post-item { padding: 16px 0; }
  .sp-post-item__title { font-size: 1rem; }
}
@media (max-width: 540px) {
  .sp-post-item__slug { display: none; }
}


/* =========================================================
   §48 — User Profile Page (warm editorial design)
   Classes prefixed prof-* or use reference names:
   profile-cover, profile-tabs-wrap, prof-page-layout
   Variables: --prof-* (scoped to this section)
   ========================================================= */

/* ── Tokens (scoped under profile sections) ────────────────────────── */
.profile-cover,
.profile-tabs-wrap,
.prof-page-layout,
#prof-pin-menu {
  --prof-cream:      #F7F3ED;
  --prof-ink:        #1A1612;
  --prof-espresso:   #2C1F14;
  --prof-copper:     #C4622D;
  --prof-amber:      #E8A042;
  --prof-sage:       #5C7A5C;
  --prof-mist:       #E8E2D9;
  --prof-warm-white: #FDFAF6;
  --prof-teal:       #3A8A82;
  --prof-dark:       #0F0E0C;
  --prof-gold:       #D4A853;
}

/* ── Profile Cover ──────────────────────────────────────────────────── */
.profile-cover {
  background: #2C1F14;
  position: relative;
  overflow: hidden;
}
.cover-grid-bg {
  position: absolute; inset: 0;
  background-image:
    repeating-linear-gradient(0deg,  rgba(255,255,255,0.025) 0, rgba(255,255,255,0.025) 1px, transparent 1px, transparent 48px),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.025) 0, rgba(255,255,255,0.025) 1px, transparent 1px, transparent 48px);
  pointer-events: none;
}
.cover-glow {
  position: absolute; top: -80px; left: -60px;
  width: 500px; height: 400px;
  background: radial-gradient(ellipse, rgba(196,98,45,0.18) 0%, transparent 65%);
  pointer-events: none;
}
.cover-glow-2 {
  position: absolute; bottom: -40px; right: -20px;
  width: 350px; height: 300px;
  background: radial-gradient(ellipse, rgba(58,138,130,0.12) 0%, transparent 65%);
  pointer-events: none;
}

.profile-hero {
  max-width: 1300px; margin: 0 auto;
  padding: 44px 40px 0;
  position: relative; z-index: 1;
}

.profile-hero-grid {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 32px;
  align-items: start;
  padding-bottom: 36px;
}

/* Avatar */
.profile-avatar-col { padding-top: 4px; }
.profile-avatar-wrap { position: relative; display: inline-block; }
.profile-avatar {
  width: 110px; height: 110px; border-radius: 20px;
  background: linear-gradient(135deg, #C4622D 0%, #E8A042 100%);
  display: flex; align-items: center; justify-content: center;
  font-family: 'Playfair Display', serif; font-size: 38px; font-weight: 900; color: white;
  border: 3px solid rgba(255,255,255,0.12);
  box-shadow: 0 16px 48px rgba(0,0,0,0.4), 0 0 0 1px rgba(255,255,255,0.06);
  overflow: hidden;
}
.profile-avatar--img {
  object-fit: cover; font-size: 0;
}
.pro-badge {
  position: absolute; bottom: -10px; left: 50%; transform: translateX(-50%);
  background: #D4A853; color: white;
  font-family: 'DM Mono', monospace; font-size: 9px; font-weight: 500;
  letter-spacing: 2px; text-transform: uppercase;
  padding: 4px 10px; border-radius: 4px;
  border: 2px solid #2C1F14;
  white-space: nowrap;
  z-index: 1;
}

/* Profile info */
.profile-info { padding-top: 4px; }
.profile-name-row { display: flex; align-items: center; gap: 12px; margin-bottom: 4px; }
.profile-name {
  font-family: 'Playfair Display', serif;
  font-size: clamp(26px, 3vw, 38px); font-weight: 900;
  color: white; letter-spacing: -1px; line-height: 1.1;
}
.profile-verified {
  width: 22px; height: 22px; background: #3A8A82;
  border-radius: 50%; display: flex; align-items: center;
  justify-content: center; flex-shrink: 0;
  font-size: 11px; color: white;
}
.profile-handle {
  font-size: 14px; color: rgba(255,255,255,0.4);
  margin-bottom: 14px; font-family: 'DM Mono', monospace;
}
.profile-bio {
  font-size: 15px; line-height: 1.65;
  color: rgba(255,255,255,0.6); max-width: 520px; margin-bottom: 18px;
}
.profile-meta-row {
  display: flex; align-items: center; gap: 20px; flex-wrap: wrap; margin-bottom: 16px;
}
.profile-meta-item {
  display: flex; align-items: center; gap: 6px;
  font-size: 12px; color: rgba(255,255,255,0.4);
}
.profile-meta-item svg { width: 13px; height: 13px; flex-shrink: 0; }

/* Social icon links */
.social-links { display: flex; gap: 8px; margin-top: 2px; }
.social-link {
  width: 30px; height: 30px; border-radius: 6px;
  background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.12);
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,0.5); text-decoration: none;
  transition: all 0.2s; flex-shrink: 0;
}
.social-link svg { width: 15px; height: 15px; }
.social-link:hover { background: rgba(255,255,255,0.16); color: white; border-color: rgba(255,255,255,0.25); }

/* Stats + actions */
.profile-right { display: flex; flex-direction: column; align-items: flex-end; gap: 20px; }
.profile-stats-row { display: flex; gap: 28px; }
.profile-stat { text-align: center; }
.stat-num {
  font-family: 'Playfair Display', serif;
  font-size: clamp(20px, 3vw, 26px); font-weight: 700; color: white; display: block; line-height: 1;
}
.stat-label {
  font-family: 'DM Mono', monospace;
  font-size: 9px; letter-spacing: 1.5px; text-transform: uppercase;
  color: rgba(255,255,255,0.35); margin-top: 4px; display: block;
}
.stat-divider { width: 1px; background: rgba(255,255,255,0.08); align-self: stretch; }
.profile-action-row { display: flex; gap: 10px; align-items: center; }

.prof-btn-follow {
  background: #C4622D; color: white;
  font-family: 'DM Sans', sans-serif; font-weight: 600; font-size: 14px;
  padding: 10px 26px; border-radius: 6px; border: none; cursor: pointer;
  transition: all 0.25s; display: flex; align-items: center; gap: 7px;
  text-decoration: none;
}
.prof-btn-follow:hover { background: #b0561f; transform: translateY(-1px); }
.prof-btn-follow.following {
  background: rgba(255,255,255,0.1); border: 1.5px solid rgba(255,255,255,0.25);
}
.prof-btn-follow.following:hover { background: rgba(255,255,255,0.18); }

.prof-btn-chat {
  font-family: 'DM Sans', sans-serif; font-weight: 600; font-size: 13px;
  padding: 10px 18px; border-radius: 6px; cursor: pointer; transition: all 0.2s;
  display: flex; align-items: center; gap: 6px;
  background: rgba(255,255,255,0.08); color: white;
  border: 1px solid rgba(255,255,255,0.15);
  text-decoration: none;
}
.prof-btn-chat:hover { background: rgba(255,255,255,0.15); }
.prof-btn-chat:disabled { opacity: 0.5; cursor: not-allowed; }
.prof-btn-tip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 18px; border-radius: 8px; font-size: 13px; font-weight: 600;
  font-family: var(--font-sans); cursor: pointer; text-decoration: none;
  transition: all 0.22s; white-space: nowrap;
  background: rgba(212,168,83,0.15); color: #D4A853;
  border: 1.5px solid rgba(212,168,83,0.35);
}
.prof-btn-tip:hover { background: rgba(212,168,83,0.25); border-color: #D4A853; transform: translateY(-1px); }

/* ── Profile Tabs ───────────────────────────────────────────────────── */
.profile-tabs-wrap {
  background: #2C1F14;
  border-bottom: 1px solid rgba(255,255,255,0.07);
  position: sticky; top: 60px; z-index: 50;
}
.profile-tabs {
  max-width: 1300px; margin: 0 auto; padding: 0 40px;
  display: flex; gap: 0; overflow-x: auto; scrollbar-width: none;
}
.profile-tabs::-webkit-scrollbar { display: none; }
.profile-tab {
  padding: 14px 22px; font-size: 13px; font-weight: 500;
  color: rgba(255,255,255,0.45); cursor: pointer;
  border-bottom: 2px solid transparent; transition: all 0.2s;
  text-decoration: none; white-space: nowrap;
  display: flex; align-items: center; gap: 6px;
}
.profile-tab:hover { color: rgba(255,255,255,0.8); }
.profile-tab.active { color: white; border-bottom-color: #C4622D; font-weight: 600; }
.prof-tab-count {
  font-family: 'DM Mono', monospace; font-size: 10px;
  background: rgba(255,255,255,0.12); color: rgba(255,255,255,0.6);
  padding: 2px 7px; border-radius: 10px;
}

/* ── 2-Column Page Layout ───────────────────────────────────────────── */
.prof-page-layout {
  max-width: 1300px; margin: 0 auto;
  padding: 32px 40px 80px;
  display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 32px;
  background: #F7F3ED;
  min-height: 60vh;
  width: 100%;
}
/* Lock the main column to its grid track — prevents content from shrinking 1fr */
.prof-page-layout > main {
  min-width: 0;
  width: 100%;
  box-sizing: border-box;
}

/* ── Feed Cards ─────────────────────────────────────────────────────── */
.prof-feed-card {
  background: #FDFAF6;
  border: 1.5px solid #E8E2D9;
  border-radius: 10px; padding: 22px;
  margin-bottom: 16px; transition: all 0.25s;
  display: flex; gap: 18px; align-items: flex-start;
}
.prof-feed-card__body { flex: 1; min-width: 0; }
.prof-feed-card__thumb {
  flex-shrink: 0; width: 130px; height: 130px;
  border-radius: 8px; overflow: hidden;
  align-self: flex-start; margin-top: 2px;
}
.prof-feed-card__thumb img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.prof-feed-card:hover {
  box-shadow: 0 8px 32px rgba(26,22,18,0.08);
  border-color: rgba(196,98,45,0.2);
}
.prof-feed-card--pinned {
  border-color: rgba(196,98,45,0.25);
  background: linear-gradient(135deg, #FDFAF6 0%, rgba(196,98,45,0.02) 100%);
}
.prof-feed-card--pinned::before {
  content: ''; display: block; height: 2px;
  background: linear-gradient(90deg, #C4622D, transparent);
  border-radius: 2px; margin-bottom: 18px; margin-top: -6px;
}

.pinned-label {
  display: flex; align-items: center; gap: 6px;
  font-family: 'DM Mono', monospace; font-size: 10px; font-weight: 500;
  letter-spacing: 2px; text-transform: uppercase; color: #C4622D;
  margin-bottom: 8px;
}

.prof-feed-header {
  display: flex; align-items: center; gap: 10px; margin-bottom: 14px;
}
.prof-feed-avatar {
  width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0;
  background: linear-gradient(135deg, #C4622D, #E8A042);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; color: white;
  object-fit: cover; overflow: hidden;
}
.prof-feed-author { flex: 1; }
.prof-feed-author-name {
  font-size: 13px; font-weight: 600; color: #2C1F14;
  display: flex; align-items: center; gap: 6px;
}
.pro-tag {
  font-size: 9px; background: #D4A853; color: white;
  padding: 2px 6px; border-radius: 3px; font-weight: 700;
  letter-spacing: 0.5px; font-family: 'DM Mono', monospace;
}
.prof-feed-meta-text {
  font-size: 11px; color: #1A1612; opacity: 0.4; margin-top: 1px;
}
.prof-feed-more {
  width: 30px; height: 30px; border-radius: 6px; border: none;
  background: transparent; cursor: pointer; color: #1A1612;
  opacity: 0.3; font-size: 18px; display: flex; align-items: center; justify-content: center;
  transition: all 0.2s; position: relative;
}
.prof-feed-more:hover { background: #E8E2D9; opacity: 1; }

.prof-topic-pill {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: 'DM Mono', monospace; font-size: 10px; font-weight: 500;
  letter-spacing: 1px; text-transform: uppercase;
  color: #3A8A82; background: rgba(58,138,130,0.08);
  padding: 4px 10px; border-radius: 3px; margin-bottom: 10px;
}
.prof-read-time {
  font-size: 11px; color: #1A1612; opacity: 0.4;
  margin-left: 10px; font-family: 'DM Mono', monospace;
}
.prof-feed-title-link { text-decoration: none; display: block; }
.prof-feed-title {
  font-family: 'Playfair Display', serif;
  font-size: clamp(16px, 2.5vw, 19px); font-weight: 700; line-height: 1.3;
  color: #2C1F14; margin-bottom: 8px; cursor: pointer;
  transition: color 0.2s;
}
.prof-feed-title-link:hover .prof-feed-title { color: #C4622D; }
.prof-feed-excerpt {
  font-size: 14px; line-height: 1.65; color: #1A1612; opacity: 0.55;
  margin-bottom: 14px;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}

.prof-reactions {
  display: flex; align-items: center; gap: 4px;
  padding-top: 14px; border-top: 1px solid #E8E2D9;
}
.prof-rxn-btn {
  display: flex; align-items: center; gap: 5px;
  padding: 6px 10px; border-radius: 6px; border: none;
  background: transparent; cursor: pointer;
  font-size: 12px; color: #1A1612; opacity: 0.7;
  font-family: 'DM Sans', sans-serif; transition: all 0.2s;
}
.prof-rxn-btn:hover { background: #E8E2D9; opacity: 1; }
.prof-rxn-btn.liked,
.prof-rxn-btn.active { color: #C4622D; opacity: 1; }
.prof-rxn-btn.reposted { opacity: 1; }
.prof-rxn-btn svg { width: 16px; height: 16px; flex-shrink: 0; }
.prof-rxn-spacer { flex: 1; }
.prof-read-link {
  font-size: 12px; font-weight: 600; color: #C4622D;
  text-decoration: none; padding: 6px 10px; border-radius: 6px;
  transition: all 0.2s;
}
.prof-read-link:hover { background: rgba(196,98,45,0.08); }

/* ── Compact Activity Card ──────────────────────────────────────────── */
.prof-act-compact {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid #E8E2D9;
}
.prof-act-compact:last-child { border-bottom: none; }
.prof-act-compact__icon {
  width: 32px; height: 32px; border-radius: 50%;
  background: #F7F3ED; border: 1px solid #E8E2D9;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; flex-shrink: 0;
}
.prof-act-compact__body { flex: 1; }
.prof-act-compact__text { font-size: 13px; color: #1A1612; line-height: 1.5; }
.prof-act-compact__text a { color: #C4622D; text-decoration: none; }
.prof-act-compact__text a:hover { text-decoration: underline; }
.prof-act-compact__time { display: block; font-size: 11px; color: rgba(26,22,18,0.4); margin-top: 3px; font-family: 'DM Mono', monospace; }

/* ── Section headings ───────────────────────────────────────────────── */
.prof-section-fade { animation: profFadeUp 0.4s ease both; }
.prof-section-title-row {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 18px; margin-top: 8px;
}
.prof-section-title {
  font-family: 'Playfair Display', serif;
  font-size: 18px; font-weight: 700; color: #2C1F14;
  display: flex; align-items: center; gap: 8px;
}
.prof-section-link {
  font-size: 12px; font-weight: 600; color: #C4622D;
  text-decoration: none; display: flex; align-items: center; gap: 4px; transition: gap 0.2s;
}
.prof-section-link:hover { gap: 8px; }

/* ── Popular WriteUps cards ─────────────────────────────────────────── */
.prof-popular-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 12px; margin-bottom: 24px;
}
.prof-popular-card {
  background: #FDFAF6; border: 1.5px solid #E8E2D9;
  border-radius: 10px; overflow: hidden; text-decoration: none;
  display: flex; flex-direction: column; transition: all 0.25s;
}
.prof-popular-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(26,22,18,0.1);
  border-color: rgba(196,98,45,0.25);
}
.prof-popular-card__img {
  width: 100%; height: 110px; object-fit: cover;
  background: linear-gradient(135deg, #2C1F14, #C4622D);
  display: flex; align-items: center; justify-content: center;
  font-size: 28px; flex-shrink: 0; overflow: hidden;
}
.prof-popular-card__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.prof-popular-card__body { padding: 12px; flex: 1; display: flex; flex-direction: column; gap: 6px; }
.prof-popular-card__title {
  font-family: 'Playfair Display', serif;
  font-size: 13px; font-weight: 700; line-height: 1.4; color: #2C1F14;
}
.prof-popular-card__excerpt {
  font-size: 11px; color: rgba(26,22,18,0.5); line-height: 1.5;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  flex: 1;
}
.prof-popular-card__reactions {
  display: flex; gap: 10px; padding-top: 8px;
  border-top: 1px solid #E8E2D9; margin-top: auto;
  font-size: 11px; color: rgba(26,22,18,0.4);
  font-family: 'DM Mono', monospace;
}
.prof-popular-card__reactions span { display: flex; align-items: center; gap: 3px; }

/* ── Activity load more ─────────────────────────────────────────────── */
.prof-load-more-wrap {
  text-align: center; padding: 8px 0 24px;
}
.prof-load-more-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 10px 28px; border-radius: 8px; border: 1.5px solid #E8E2D9;
  background: #FDFAF6; cursor: pointer; font-size: 13px; font-weight: 600;
  color: #C4622D; font-family: 'DM Sans', sans-serif; transition: all 0.2s;
}
.prof-load-more-btn:hover { background: #C4622D; color: #fff; border-color: #C4622D; }
.prof-load-more-btn:disabled { opacity: 0.5; cursor: not-allowed; }
@keyframes prof-card-in {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
.prof-card-entering { animation: prof-card-in 0.3s ease both; }

/* ── Empty states ───────────────────────────────────────────────────── */
.prof-empty {
  text-align: center; padding: 60px 20px;
  color: rgba(26,22,18,0.4);
}
.prof-empty__icon { font-size: 40px; margin-bottom: 12px; display: flex; justify-content: center; }
.prof-empty__title { font-size: 18px; font-weight: 600; color: #2C1F14; margin-bottom: 4px; }
.prof-empty__sub { font-size: 14px; margin-top: 6px; }

/* ── Blogs grid ─────────────────────────────────────────────────────── */
.prof-blogs-header { margin-bottom: 16px; display: flex; justify-content: flex-end; }
.prof-blogs-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.prof-blog-card {
  background: #FDFAF6; border: 1.5px solid #E8E2D9;
  border-radius: 10px; overflow: hidden; text-decoration: none; display: block;
  transition: all 0.25s;
}
.prof-blog-card:hover { box-shadow: 0 8px 24px rgba(26,22,18,0.1); border-color: rgba(196,98,45,0.2); }
.prof-blog-card__cover {
  height: 80px; background: linear-gradient(135deg, #C4622D, #2C1F14);
  background-size: cover; background-position: center;
}
.prof-blog-card__cover--default { background: linear-gradient(135deg, #3A8A82 0%, #2C1F14 100%); }
.prof-blog-card__body { display: flex; align-items: center; gap: 10px; padding: 12px; }
.prof-blog-card__avatar {
  width: 36px; height: 36px; border-radius: 8px;
  object-fit: cover; flex-shrink: 0;
}
.prof-blog-card__avatar--init {
  width: 36px; height: 36px; border-radius: 8px;
  background: linear-gradient(135deg, #C4622D, #E8A042);
  color: white; font-weight: 700; font-size: 14px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.prof-blog-card__name { font-size: 14px; font-weight: 600; color: #2C1F14; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.prof-blog-card__desc { font-size: 12px; color: rgba(26,22,18,0.55); margin-top: 2px; }
.prof-blog-card__meta { font-size: 11px; color: rgba(26,22,18,0.4); margin-top: 3px; }
.prof-blog-pending-badge {
  font-size: 10px; font-weight: 600; letter-spacing: .3px;
  background: #fff8e6; color: #b45309; border: 1px solid #fde68a;
  border-radius: 4px; padding: 1px 6px; white-space: nowrap;
}

/* ── User list (followers/following) ────────────────────────────────── */
.prof-user-list { display: flex; flex-direction: column; gap: 1px; width: 100%; }
.prof-user-card {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 0; border-bottom: 1px solid #E8E2D9;
}
.prof-user-card:last-child { border-bottom: none; }
.prof-user-card__av { flex-shrink: 0; }
.prof-user-card__img {
  width: 46px; height: 46px; border-radius: 12px; object-fit: cover;
}
.prof-user-card__init {
  width: 46px; height: 46px; border-radius: 12px;
  background: linear-gradient(135deg, #C4622D, #E8A042);
  color: white; font-weight: 700; font-size: 18px;
  display: flex; align-items: center; justify-content: center;
}
.prof-user-card__info { flex: 1; }
.prof-user-card__name {
  font-size: 14px; font-weight: 600; color: #2C1F14;
  text-decoration: none; transition: color 0.2s;
}
.prof-user-card__name:hover { color: #C4622D; }
.prof-user-card__username { font-size: 12px; color: rgba(26,22,18,0.4); font-family: 'DM Mono', monospace; }
.prof-user-card__bio { font-size: 13px; color: rgba(26,22,18,0.55); margin-top: 3px; }
.prof-user-card__follow {
  padding: 7px 16px; border-radius: 6px; font-size: 13px; font-weight: 600;
  border: 1.5px solid #C4622D; color: #C4622D; background: transparent;
  cursor: pointer; transition: all 0.2s; white-space: nowrap;
  font-family: 'DM Sans', sans-serif;
}
.prof-user-card__follow:hover { background: #C4622D; color: white; }
.prof-user-card__follow.following {
  border-color: #E8E2D9; color: rgba(26,22,18,0.5); background: #F7F3ED;
}

/* ── Right Sidebar ──────────────────────────────────────────────────── */
.prof-sidebar {
  display: flex; flex-direction: column; gap: 18px;
  position: sticky; top: 114px; height: fit-content; min-width: 0; width: 340px;
}

/* ── Profile sidebar cards (ps-*) ── */
.ps-card {
  background: #FDFAF6;
  border: 1.5px solid #E8E2D9;
  border-radius: 14px;
  overflow: hidden;
  transition: box-shadow .2s;
}
.ps-card:hover { box-shadow: 0 4px 20px rgba(30,15,5,.06); }

.ps-card--compact { padding: 16px 20px; }

.ps-card__head {
  display: flex; align-items: center; gap: 12px;
  padding: 16px 20px 14px;
  border-bottom: 1px solid #EDE4D6;
}
.ps-card__icon {
  width: 36px; height: 36px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.ps-card__title {
  font-family: 'Playfair Display', serif;
  font-size: 15px; font-weight: 700; color: #2C1F14;
  line-height: 1.2;
}
.ps-card__sub {
  font-size: 11px; color: rgba(26,22,18,.4);
  margin-top: 2px; font-family: 'DM Mono', monospace;
  letter-spacing: .5px; text-transform: uppercase;
}

/* Analytics stats grid */
.ps-analytics-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
  padding: 16px 18px 12px;
}
.ps-stat {
  background: #F7F3ED;
  border: 1px solid #EDE4D6;
  border-radius: 10px;
  padding: 14px 12px 12px;
  text-align: center;
  position: relative;
  transition: border-color .2s, transform .15s;
}
.ps-stat:hover {
  border-color: var(--stat-color, #C4622D);
  transform: translateY(-1px);
}
.ps-stat__icon {
  color: var(--stat-color, #C4622D);
  opacity: .5;
  margin-bottom: 6px;
  display: flex; justify-content: center;
}
.ps-stat:hover .ps-stat__icon { opacity: .8; }
.ps-stat__num {
  font-family: 'Playfair Display', serif;
  font-size: clamp(18px, 2.8vw, 22px); font-weight: 800;
  color: #2C1F14; line-height: 1;
}
.ps-stat__label {
  font-size: 10px; color: rgba(26,22,18,.4);
  margin-top: 4px; text-transform: uppercase;
  letter-spacing: .5px; font-weight: 500;
}
.ps-change {
  display: inline-flex; align-items: center; gap: 2px;
  font-size: 11px; font-weight: 600;
  margin-top: 6px; color: rgba(26,22,18,.3);
}
.ps-up   { color: #3A8A82; }
.ps-down { color: #C4622D; }

/* Chart */
.ps-chart-wrap { padding: 0 18px 16px; }
.ps-chart-head {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 10px;
}
.ps-chart-label {
  font-size: 12px; font-weight: 600; color: #2C1F14;
}
.ps-chart-period {
  font-size: 10px; color: rgba(26,22,18,.35);
  font-family: 'DM Mono', monospace; letter-spacing: .5px;
  text-transform: uppercase;
}
.ps-mini-chart {
  width: 100%; height: 64px;
  background: linear-gradient(180deg, #F7F3ED 0%, #FDFAF6 100%);
  border-radius: 10px; border: 1px solid #EDE4D6;
  display: flex; align-items: flex-end; padding: 8px 10px; gap: 3px;
}
.ps-bar {
  flex: 1; border-radius: 3px 3px 0 0; min-height: 3px;
  background-color: #C8C0B4;
  transition: height .4s ease, opacity .2s;
}
.ps-bar--high { background-color: #3A8A82; }
.ps-bar--now  { background-color: #C4622D; border-radius: 3px; }
.ps-mini-chart:hover .ps-bar { opacity: .45; }
.ps-mini-chart:hover .ps-bar:hover { opacity: 1; }
.ps-chart-axis {
  display: flex; justify-content: space-between;
  font-size: 10px; color: rgba(26,22,18,.3); margin-top: 6px;
}

/* Pro badge */
.ps-pro-badge {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  margin: 0 18px 16px;
  font-family: 'Playfair Display', serif;
  font-size: 14px; font-weight: 700;
  color: #FDFAF6;
  background: linear-gradient(135deg, #2C1F14 0%, #4A3520 50%, #2C1F14 100%);
  border: 1.5px solid rgba(212,168,83,.3);
  border-radius: 10px; padding: 14px 18px;
  position: relative;
  overflow: hidden;
}
.ps-pro-badge::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(212,168,83,.15) 0%, transparent 50%, rgba(212,168,83,.1) 100%);
  pointer-events: none;
}
.ps-pro-badge svg {
  position: relative;
  filter: drop-shadow(0 0 4px rgba(212,168,83,.5));
}

/* Topics */
.ps-topics { padding: 14px 18px; display: flex; flex-wrap: wrap; gap: 8px; }
.ps-topic {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px;
  border-radius: 20px;
  text-decoration: none; color: #2C1F14;
  background: #F7F3ED;
  border: 1.5px solid #EDE4D6;
  transition: all .2s;
  font-size: 13px; font-weight: 500;
}
.ps-topic:hover {
  border-color: var(--tc, #C4622D);
  color: var(--tc, #C4622D);
  background: rgba(196,98,45,.04);
}
.ps-topic__dot {
  width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0;
}
.ps-topic__name { white-space: nowrap; }
.ps-topic__count {
  font-size: 10px; font-weight: 600;
  color: rgba(26,22,18,.3);
  font-family: 'DM Mono', monospace;
}

/* Member info */
.ps-member-info {
  display: flex; align-items: center; gap: 10px;
  font-size: 12.5px; color: rgba(26,22,18,.5);
  padding: 3px 0;
}
.ps-member-info + .ps-member-info { margin-top: 6px; }

/* Responsive */
@media (max-width: 1100px) {
  .prof-sidebar { width: 100%; position: static; }
  .ps-analytics-grid { grid-template-columns: repeat(4, 1fr); }
}


/* ── Pin context menu ───────────────────────────────────────────────── */
.prof-pin-menu {
  position: fixed; z-index: 200;
  background: #FDFAF6; border: 1.5px solid #E8E2D9;
  border-radius: 8px; padding: 6px 0;
  box-shadow: 0 8px 32px rgba(26,22,18,0.15);
  min-width: 160px;
}
.prof-pin-menu.hidden { display: none; }
.prof-pin-menu__item {
  display: block; width: 100%; text-align: left;
  padding: 9px 16px; background: none; border: none;
  font-family: 'DM Sans', sans-serif; font-size: 13px; font-weight: 500;
  color: #2C1F14; cursor: pointer; transition: background 0.15s;
}
.prof-pin-menu__item:hover { background: #F7F3ED; }

/* ── Body background override for profile page ──────────────────────── */
.prof-page-layout { background: transparent; }
body:has(.profile-cover) { background: #F7F3ED; }

/* ── Animations ─────────────────────────────────────────────────────── */
@keyframes profFadeUp {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Responsive ─────────────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .prof-page-layout { grid-template-columns: 1fr; }
  .prof-sidebar { position: static; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
}
@media (max-width: 900px) {
  .profile-hero-grid { grid-template-columns: auto 1fr; }
  .profile-right {
    grid-column: 1 / -1; flex-direction: row; align-items: center;
    padding-top: 14px; border-top: 1px solid rgba(255,255,255,0.07);
    justify-content: space-between;
  }
  .profile-tabs { padding: 0 20px; }
  .cover-glow { width: 300px; height: 250px; left: -40px; }
  .cover-glow-2 { width: 200px; height: 180px; }
  .prof-page-layout { padding: 28px 24px 60px; }
}
@media (max-width: 640px) {
  .profile-hero { padding: 28px 20px 0; }
  .profile-hero-grid { grid-template-columns: 1fr; text-align: center; gap: 20px; }
  .profile-avatar-col { display: flex; justify-content: center; }
  .profile-avatar { width: 88px; height: 88px; font-size: 30px; border-radius: 16px; }
  .profile-name-row { justify-content: center; }
  .profile-handle { text-align: center; }
  .profile-bio { text-align: center; }
  .profile-meta-row { justify-content: center; flex-wrap: wrap; }
  .social-links { justify-content: center; }
  .profile-right { grid-column: auto; justify-content: center; flex-direction: column; align-items: center; }
  .profile-stats-row { justify-content: center; }
  .profile-action-row { justify-content: center; }
  .prof-sidebar { grid-template-columns: 1fr; }
  .prof-page-layout { padding: 24px 16px 60px; }
  .profile-tabs { padding: 0 12px; }
  .profile-tab { padding: 12px 14px; font-size: 12px; }
  .prof-blogs-grid { grid-template-columns: 1fr; }
  .cover-glow { width: 200px; height: 180px; top: -40px; left: -30px; }
  .cover-glow-2 { width: 150px; height: 130px; bottom: -20px; right: -10px; }
  .prof-feed-card { flex-direction: column-reverse; }
  .prof-feed-card__thumb { width: 100%; height: 180px; margin: 0 0 14px 0; align-self: stretch; }
  .prof-popular-grid { grid-template-columns: 1fr; }
}


/* =========================================================
   §49 — Settings Page  (st-*)
   ========================================================= */

.st-wrap {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 40px;
  max-width: 900px;
  margin: 48px auto;
  padding: 0 24px 80px;
  align-items: start;
}

/* ── Sidebar nav ── */
.st-sidebar {
  position: sticky;
  top: 80px;
}
.st-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.st-nav-item {
  display: block;
  padding: 9px 14px;
  border-radius: var(--radius-sm);
  font-size: .9375rem;
  color: var(--ink-muted);
  text-decoration: none;
  font-weight: 500;
  transition: background var(--transition), color var(--transition);
}
.st-nav-item:hover       { background: var(--surface-2); color: var(--ink); }
.st-nav-item--active     { background: var(--surface-2); color: var(--accent); font-weight: 600; }

/* ── Main content ── */
.st-page-title {
  font-family: var(--font-serif);
  font-size: 1.625rem;
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 24px;
}

/* ── Status banners ── */
.st-banner {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  border-radius: var(--radius);
  font-size: .9rem;
  font-weight: 500;
  margin-bottom: 20px;
}
.st-banner--ok  { background: #edfaf5; color: #1a6647; border: 1px solid #a8e6c9; }
.st-banner--err { background: #fff3f2; color: #8b1a1a; border: 1px solid #f5b8b5; flex-direction: column; align-items: flex-start; gap: 4px; }
.st-banner--err p { margin: 0; }

/* ── Section ── */
.st-section {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px;
  margin-bottom: 20px;
}
.st-section-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 20px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}

/* ── Fields ── */
.st-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 18px;
}
.st-field:last-child { margin-bottom: 0; }

.st-label {
  font-size: .875rem;
  font-weight: 600;
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: 6px;
}
.st-req { color: var(--accent); font-size: .8125rem; }
.st-hint      { font-size: .8rem; color: var(--ink-muted); }
.st-error-msg { font-size: .8rem; color: var(--accent); min-height: 1rem; display: block; }

.st-input, .st-textarea {
  width: 100%;
  padding: 9px 12px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  font-family: var(--font-sans);
  font-size: .9375rem;
  color: var(--ink);
  background: var(--bg);
  transition: border-color var(--transition), box-shadow var(--transition);
  box-sizing: border-box;
}
.st-input:focus, .st-textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(232,85,61,.1);
}
.st-textarea { resize: vertical; min-height: 100px; }

/* ── Social icons in labels ── */
.st-social-icon {
  width: 22px; height: 22px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 5px;
  color: #fff;
  flex-shrink: 0;
}
.st-social-icon--x   { background: #000; }
.st-social-icon--fb  { background: #1877f2; }
.st-social-icon--li  { background: #0a66c2; }
.st-social-icon--ig  { background: linear-gradient(135deg,#f58529,#dd2a7b,#8134af); }
.st-social-icon--web { background: var(--teal); }

/* ── Actions row ── */
.st-actions {
  display: flex;
  gap: 12px;
  align-items: center;
}

/* ── City autocomplete ── */
.city-ac-wrap {
  position: relative;
}
.city-ac-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  left: 0; right: 0;
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
  z-index: 200;
  max-height: 240px;
  overflow-y: auto;
}
.city-ac-item {
  padding: 10px 14px;
  font-size: .9rem;
  color: var(--ink);
  cursor: pointer;
  transition: background var(--transition);
}
.city-ac-item:hover,
.city-ac-item--active { background: var(--surface-2); }

/* ── Responsive ── */
@media (max-width: 720px) {
  .st-wrap {
    grid-template-columns: 1fr;
    gap: 24px;
    margin: 24px auto;
  }
  .st-sidebar { position: static; }
  .st-nav     { flex-direction: row; flex-wrap: wrap; }
}


/* §50 — Writer Analytics Card: see prof-s-card / prof-analytics-* above (§45) */


/* =========================================================
   §51 — Blog Directory: submit (bds-*), verify (bdv-*),
          directory profile additions (bdd-*)
   ========================================================= */

/* ── Submit form layout (bds-*) ─────────────────────────────────────── */

.bds-page {
  max-width: 720px;
  margin: 48px auto;
  padding: 0 24px 80px;
}
.bds-header { margin-bottom: 32px; }
.bds-step-badge {
  display: inline-block;
  font-family: var(--font-mono); font-size: 10px; font-weight: 600;
  letter-spacing: 2px; text-transform: uppercase;
  color: var(--accent); background: rgba(232,85,61,.08);
  padding: 4px 10px; border-radius: 3px; margin-bottom: 10px;
}
.bds-title {
  font-family: var(--font-serif); font-size: 2rem; font-weight: 700;
  color: var(--ink); margin: 0 0 8px;
}
.bds-sub { font-size: .9375rem; color: var(--ink-muted); line-height: 1.6; }

.bds-limit-info {
  font-size: .825rem; color: var(--ink-muted);
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 8px 12px;
  margin-bottom: 20px; display: inline-block;
}

/* Form card */
.bds-card {
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  padding: 32px;
  margin-bottom: 20px;
}
.bds-card-title {
  font-family: var(--font-serif); font-size: 1.125rem; font-weight: 700;
  color: var(--ink); margin: 0 0 20px;
  padding-bottom: 14px; border-bottom: 1px solid var(--border);
}

/* Field */
.bds-field { margin-bottom: 20px; }
.bds-field:last-child { margin-bottom: 0; }
.bds-label {
  display: block; font-size: .875rem; font-weight: 600;
  color: var(--ink); margin-bottom: 6px;
}
.bds-label-note {
  font-size: .775rem; font-weight: 400; color: var(--ink-muted); margin-left: 4px;
}
.bds-hint { font-size: .8rem; color: var(--ink-muted); margin-top: 5px; }
.bds-error { font-size: .8rem; color: var(--accent); margin-top: 5px; display: block; }
.bds-input, .bds-textarea, .bds-select {
  width: 100%; padding: 10px 13px;
  border: 1.5px solid var(--border); border-radius: var(--radius-sm);
  font-family: var(--font-sans); font-size: .9375rem;
  color: var(--ink); background: var(--bg);
  transition: border-color var(--transition), box-shadow var(--transition);
  box-sizing: border-box;
}
.bds-input:focus, .bds-textarea:focus, .bds-select:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(232,85,61,.1);
}
.bds-input--error { border-color: var(--accent); }
.bds-textarea { resize: vertical; min-height: 90px; }
.bds-select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 36px; }

/* URL indicator */
.bds-url-wrap { position: relative; }
.bds-url-indicator {
  margin-top: 6px; font-size: .825rem; display: flex;
  align-items: center; gap: 6px; min-height: 20px;
}
.bds-url-indicator--checking { color: var(--ink-muted); }
.bds-url-indicator--ok       { color: #1a6647; }
.bds-url-indicator--error    { color: var(--accent); }
.bds-url-indicator__dot {
  width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0;
  background: currentColor;
}

/* Textarea counter */
.bds-counter-row { display: flex; justify-content: flex-end; margin-top: 4px; }
.bds-counter {
  font-size: .775rem; font-family: var(--font-mono);
  color: var(--ink-muted); transition: color .2s;
}
.bds-counter--over { color: var(--accent); }

/* Topics chip UI */
.bds-topic-wrap { position: relative; }
.bds-topic-chips {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-bottom: 8px; min-height: 8px;
}
.bds-topic-chip {
  display: inline-flex; align-items: center; gap: 5px;
  background: rgba(232,85,61,.08); border: 1px solid rgba(232,85,61,.2);
  border-radius: 4px; padding: 4px 10px;
  font-size: .8125rem; color: var(--accent); font-weight: 500;
}
.bds-topic-chip__remove {
  background: none; border: none; cursor: pointer;
  color: var(--accent); font-size: 14px; line-height: 1;
  padding: 0 0 1px; display: flex; align-items: center;
}
.bds-topic-chip__remove:hover { color: #b33; }
.bds-topic-search {
  width: 100%; padding: 9px 12px;
  border: 1.5px solid var(--border); border-radius: var(--radius-sm);
  font-family: var(--font-sans); font-size: .9375rem;
  color: var(--ink); background: var(--bg);
  box-sizing: border-box;
  transition: border-color var(--transition);
}
.bds-topic-search:focus { outline: none; border-color: var(--accent); }
.bds-topic-dropdown {
  position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 100;
  background: var(--surface); border: 1.5px solid var(--border);
  border-radius: var(--radius-sm); box-shadow: var(--shadow-md);
  max-height: 200px; overflow-y: auto;
}
.bds-topic-dropdown.hidden { display: none; }
.bds-topic-option {
  padding: 9px 14px; font-size: .9rem; color: var(--ink);
  cursor: pointer; transition: background .15s;
}
.bds-topic-option:hover { background: var(--surface-2); }
.bds-topic-empty {
  padding: 10px 14px; font-size: .875rem; color: var(--ink-muted);
}

/* Checkboxes grid */
.bds-checkbox-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 10px;
}
.bds-checkbox-label {
  display: flex; align-items: center; gap: 9px;
  font-size: .9rem; color: var(--ink); cursor: pointer;
  padding: 10px 12px; border: 1.5px solid var(--border);
  border-radius: var(--radius-sm); transition: all .15s;
  background: var(--bg);
}
.bds-checkbox-label:hover { border-color: var(--accent); background: rgba(232,85,61,.03); }
.bds-checkbox-label input[type="checkbox"] { accent-color: var(--accent); width: 15px; height: 15px; }

/* Social links collapsible */
.bds-social-toggle {
  display: flex; align-items: center; gap: 8px;
  background: none; border: none; cursor: pointer;
  font-family: var(--font-sans); font-size: .875rem;
  font-weight: 600; color: var(--ink-muted); padding: 0;
  transition: color .2s;
}
.bds-social-toggle:hover { color: var(--ink); }
.bds-social-toggle__arrow { font-size: .75rem; transition: transform .2s; }
.bds-social-toggle__arrow.open { transform: rotate(180deg); }
.bds-social-fields { margin-top: 16px; display: flex; flex-direction: column; gap: 12px; }
.bds-social-fields.hidden { display: none; }
.bds-social-row { display: flex; align-items: center; gap: 10px; }
.bds-social-icon {
  width: 32px; height: 32px; border-radius: 7px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; color: white; font-size: 14px;
}

/* Form actions */
.bds-actions { display: flex; align-items: center; justify-content: space-between; margin-top: 28px; }
.bds-back-link {
  font-size: .9rem; color: var(--ink-muted); text-decoration: none;
  display: flex; align-items: center; gap: 5px; transition: color .2s;
}
.bds-back-link:hover { color: var(--ink); }

/* City display */
.bds-city-display {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 13px; border: 1.5px solid var(--border);
  border-radius: var(--radius-sm); background: var(--surface-2);
  font-size: .9rem; color: var(--ink-muted);
}


/* ── Verify page (bdv-*) ─────────────────────────────────────────────── */

.bdv-page {
  max-width: 680px;
  margin: 48px auto;
  padding: 0 24px 80px;
}
.bdv-header { margin-bottom: 28px; }
.bdv-step-badge {
  display: inline-block;
  font-family: var(--font-mono); font-size: 10px; font-weight: 600;
  letter-spacing: 2px; text-transform: uppercase;
  color: var(--teal); background: rgba(42,176,158,.08);
  padding: 4px 10px; border-radius: 3px; margin-bottom: 10px;
}
.bdv-title {
  font-family: var(--font-serif); font-size: 1.875rem; font-weight: 700;
  color: var(--ink); margin: 0 0 8px;
}
.bdv-sub { font-size: .9375rem; color: var(--ink-muted); line-height: 1.6; }
.bdv-sub code {
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 3px; padding: 1px 5px; font-size: .85em;
}
.bdv-ext-link { color: var(--teal); text-decoration: none; font-size: .85em; }
.bdv-ext-link:hover { text-decoration: underline; }

/* Flash */
.bdv-flash {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 14px 16px; border-radius: var(--radius);
  font-size: .9rem; line-height: 1.5; margin-bottom: 20px;
}
.bdv-flash--success { background: #edfaf5; color: #1a6647; border: 1px solid #a8e6c9; }
.bdv-flash--error   { background: #fff3f2; color: #8b1a1a; border: 1px solid #f5b8b5; }
.bdv-flash--info    { background: #eff8ff; color: #1a4a8b; border: 1px solid #b8d5f5; }
.bdv-flash__icon {
  width: 22px; height: 22px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: .75rem; font-weight: 700; flex-shrink: 0;
  background: currentColor; color: white;
}
.bdv-flash--success .bdv-flash__icon { background: #1a6647; }
.bdv-flash--error   .bdv-flash__icon { background: #8b1a1a; }
.bdv-flash--info    .bdv-flash__icon { background: #1a4a8b; }

/* Verified banner */
.bdv-verified-banner {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 18px; border-radius: var(--radius);
  background: rgba(42,176,158,.06); border: 1.5px solid rgba(42,176,158,.3);
  font-size: .9rem; color: #1a5f5a; margin-bottom: 20px;
}
.bdv-verified-banner a { color: var(--teal); text-decoration: none; }
.bdv-verified-banner a:hover { text-decoration: underline; }

/* Steps card */
.bdv-card {
  background: var(--surface); border: 1.5px solid var(--border);
  border-radius: var(--radius); padding: 32px; margin-bottom: 24px;
}
.bdv-steps { display: flex; flex-direction: column; gap: 28px; margin-bottom: 28px; }
.bdv-step { display: flex; gap: 16px; }
.bdv-step__num {
  width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0;
  background: var(--accent); color: white;
  font-size: .8125rem; font-weight: 700; font-family: var(--font-mono);
  display: flex; align-items: center; justify-content: center;
  margin-top: 2px;
}
.bdv-step__body { flex: 1; }
.bdv-step__heading {
  font-size: .9375rem; font-weight: 700; color: var(--ink); margin-bottom: 6px;
}
.bdv-step__desc { font-size: .9rem; color: var(--ink-muted); line-height: 1.6; margin-bottom: 12px; }
.bdv-step__desc code {
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 3px; padding: 1px 5px; font-size: .85em;
}
.bdv-step__note {
  font-size: .8125rem; color: var(--ink-muted); font-style: italic;
  margin-top: 8px; line-height: 1.5;
}

/* Code block */
.bdv-code-wrap {
  position: relative;
  background: #1a1a2e; border-radius: var(--radius-sm);
  overflow: hidden;
}
.bdv-code {
  display: block; margin: 0; padding: 16px 48px 16px 16px;
  font-family: var(--font-mono); font-size: .8125rem; line-height: 1.6;
  color: #e8d5b0; white-space: pre-wrap; word-break: break-all;
  overflow-x: auto;
}
.bdv-copy-btn {
  position: absolute; top: 8px; right: 8px;
  display: flex; align-items: center; gap: 5px;
  padding: 5px 10px; border-radius: 5px;
  background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.15);
  color: rgba(255,255,255,.7); font-size: .75rem; font-family: var(--font-sans);
  cursor: pointer; transition: all .2s;
}
.bdv-copy-btn:hover { background: rgba(255,255,255,.18); color: white; }
.bdv-copy-btn--copied { background: rgba(42,176,158,.25); border-color: rgba(42,176,158,.4); color: #7fded5; }

/* Cache note */
.bdv-cache-note {
  display: flex; align-items: flex-start; gap: 7px;
  font-size: .825rem; color: #7a5c1a;
  background: rgba(212,168,83,.08); border: 1px solid rgba(212,168,83,.25);
  border-radius: var(--radius-sm); padding: 10px 13px; line-height: 1.5;
}

/* Action buttons */
.bdv-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.bdv-form-inline { display: inline; }
.bdv-btn-verify {
  display: inline-flex; align-items: center; gap: 8px;
}
.bdv-btn-later {
  padding: 10px 20px; border-radius: var(--radius-sm);
  border: 1.5px solid var(--border); background: transparent;
  font-family: var(--font-sans); font-size: .9375rem; font-weight: 600;
  color: var(--ink-muted); cursor: pointer; transition: all .2s;
}
.bdv-btn-later:hover { border-color: var(--ink); color: var(--ink); }

/* Explainer */
.bdv-explainer { }
.bdv-explainer__title {
  font-family: var(--font-serif); font-size: 1rem; font-weight: 700;
  color: var(--ink); margin: 0 0 14px;
}
.bdv-explainer__grid { display: flex; flex-direction: column; gap: 12px; }
.bdv-explainer__item {
  display: flex; align-items: flex-start; gap: 12px;
  font-size: .875rem; color: var(--ink-muted); line-height: 1.6;
}
.bdv-explainer__item strong { color: var(--ink); }
.bdv-explainer__icon {
  width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: .7rem; font-weight: 700;
}
.bdv-explainer__icon--green { background: rgba(26,102,71,.1); color: #1a6647; }
.bdv-explainer__icon--amber { background: rgba(212,168,83,.12); color: #7a5c1a; }
.bdv-explainer__icon--teal  { background: rgba(42,176,158,.1); color: #1a5f5a; }

/* Spin animation for verify loading */
@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }


/* ── Blog directory profile additions (bdd-*) ───────────────────────── */

/* Flash on blog profile */
.bdd-flash {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 20px; font-size: .9rem; line-height: 1.5;
  margin-bottom: 0;
}
.bdd-flash--success { background: #edfaf5; color: #1a6647; border-bottom: 1px solid #a8e6c9; }
.bdd-flash--error   { background: #fff3f2; color: #8b1a1a; border-bottom: 1px solid #f5b8b5; }
.bdd-flash--info    { background: #eff8ff; color: #1a4a8b; border-bottom: 1px solid #b8d5f5; }
.bdd-flash__icon {
  width: 20px; height: 20px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: .7rem; font-weight: 700; color: white;
}
.bdd-flash--success .bdd-flash__icon { background: #1a6647; }
.bdd-flash--error   .bdd-flash__icon { background: #8b1a1a; }
.bdd-flash--info    .bdd-flash__icon { background: #1a4a8b; }

/* Name row with verified badge */
.bp-name-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.bdd-verified-badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: .75rem; font-weight: 600; color: #1a5f5a;
  background: rgba(42,176,158,.08); border: 1px solid rgba(42,176,158,.25);
  padding: 3px 9px; border-radius: 20px;
}

/* External URL link */
.bdd-ext-url {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: .8rem; color: var(--teal); text-decoration: none;
  margin-bottom: 6px; transition: opacity .2s;
}
.bdd-ext-url:hover { opacity: .75; }

/* Meta row (language, city) */
.bdd-meta-row {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  font-size: .825rem; color: var(--ink-muted); margin-bottom: 8px;
}
.bdd-meta-item { }
.bdd-meta-sep { opacity: .4; }

/* Social links */
.bdd-socials {
  display: flex; align-items: center; gap: 7px; margin-top: 10px; flex-wrap: wrap;
}
.bdd-social-link {
  width: 30px; height: 30px; border-radius: 7px; border: 1.5px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  color: var(--ink-muted); text-decoration: none;
  transition: all .2s;
}
.bdd-social-link:hover {
  background: var(--sl-color, var(--accent));
  border-color: var(--sl-color, var(--accent));
  color: white;
}

/* Verify CTA button (for owner) */
.bdd-verify-cta {
  display: inline-flex; align-items: center;
  padding: 8px 16px; border-radius: var(--radius-sm);
  border: 1.5px solid var(--teal); color: var(--teal);
  font-size: .875rem; font-weight: 600; text-decoration: none;
  transition: all .2s;
}
.bdd-verify-cta:hover { background: var(--teal); color: white; }

/* Metrics bar */
.bdd-metrics-bar {
  background: var(--surface); border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.bdd-metrics-bar__inner {
  max-width: 1100px; margin: 0 auto; padding: 10px 24px;
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.bdd-metric-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 10px; border-radius: 4px;
  background: var(--surface-2); border: 1px solid var(--border);
  font-size: .775rem; color: var(--ink-muted);
}
.bdd-metric-chip__label {
  font-family: var(--font-mono); font-size: .7rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .5px;
}
.bdd-metric-chip__val { font-weight: 700; color: var(--ink); }
.bdd-metric-chip--warn { border-color: rgba(212,168,83,.3); background: rgba(212,168,83,.06); }
.bdd-metric-chip--warn .bdd-metric-chip__val { color: #7a5c1a; }
.bdd-metric-chip--green { border-color: rgba(26,102,71,.2); background: rgba(26,102,71,.05); }
.bdd-metric-chip--green .bdd-metric-chip__val { color: #1a6647; }
.bdd-metric-chip--teal { border-color: rgba(42,176,158,.25); background: rgba(42,176,158,.06); }
.bdd-metric-chip--teal .bdd-metric-chip__val { color: #1a5f5a; }

/* Accepts bar */
.bdd-accepts-bar {
  background: var(--surface-2); border-bottom: 1px solid var(--border);
  padding: 8px 24px;
}
.bdd-accepts-bar__inner {
  max-width: 1100px; margin: 0 auto;
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.bdd-accepts-label {
  font-size: .75rem; font-weight: 600; color: var(--ink-muted);
  text-transform: uppercase; letter-spacing: .5px; font-family: var(--font-mono);
}
.bdd-accept-badge {
  display: inline-flex; align-items: center;
  padding: 3px 9px; border-radius: 3px;
  background: rgba(42,176,158,.08); border: 1px solid rgba(42,176,158,.2);
  font-size: .75rem; font-weight: 500; color: #1a5f5a;
}

/* About tab: metrics section */
.bdd-about-metrics { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--border); }
.bdd-about-metrics__title {
  font-size: .9375rem; font-weight: 700; color: var(--ink); margin: 0 0 16px;
}
.bdd-metrics-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
  margin-bottom: 10px;
}
.bdd-m-card {
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 14px;
  text-align: center;
}
.bdd-m-card__val {
  font-family: var(--font-serif); font-size: 1.375rem; font-weight: 800;
  color: var(--ink); line-height: 1;
}
.bdd-m-card__label {
  font-size: .725rem; color: var(--ink-muted); margin-top: 5px;
  text-transform: uppercase; letter-spacing: .5px;
}
.bdd-metrics-updated {
  font-size: .775rem; color: var(--ink-muted); text-align: right; margin: 0;
}

/* About tab: link style */
.bdd-link { color: var(--teal); }
.bdd-link:hover { text-decoration: underline; }

/* ── §51 additions: aliases + missing classes for directory_submit.php ──── */

/* Page wrapper alias */
.bds-wrap { max-width: 720px; margin: 48px auto; padding: 0 24px 80px; }

/* Subtitle / limit note */
.bds-subtitle { font-size: .9375rem; color: var(--ink-muted); line-height: 1.6; margin: 0 0 8px; }
.bds-limit-note {
  display: inline-block;
  font-size: .825rem; color: var(--ink-muted);
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 8px 12px; margin-top: 12px;
}

/* Section title inside a card */
.bds-section-title {
  font-family: var(--font-serif); font-size: 1.0625rem; font-weight: 700;
  color: var(--ink); margin: 0 0 20px;
  padding-bottom: 12px; border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: 8px;
}
.bds-section-sub { font-family: var(--font-sans); font-size: .775rem; font-weight: 400; color: var(--ink-muted); }

/* Avatar / cover image upload */
.bds-input--file { padding: 6px 10px; cursor: pointer; }
.bds-avatar-preview { margin-bottom: 10px; }
.bds-avatar-preview__img {
  display: block; max-width: 100%; max-height: 200px;
  border-radius: 8px; border: 1px solid var(--border);
  object-fit: cover;
}

/* Topic chips (view uses bds-chip / bds-chip-remove) */
.bds-chips { display: flex; flex-wrap: wrap; gap: 6px; min-height: 8px; margin-bottom: 8px; }
.bds-chip {
  display: inline-flex; align-items: center; gap: 5px;
  background: rgba(232,85,61,.08); border: 1px solid rgba(232,85,61,.2);
  border-radius: 4px; padding: 4px 10px;
  font-size: .8125rem; color: var(--accent); font-weight: 500;
}
.bds-chip-remove {
  background: none; border: none; cursor: pointer;
  color: var(--accent); font-size: 14px; line-height: 1;
  padding: 0 0 1px; display: flex; align-items: center;
}
.bds-chip-remove:hover { color: #b33; }

/* Topic search wrapper + dropdown */
.bds-topic-search-wrap { position: relative; }
.bds-topic-dropdown[hidden] { display: none; }
.bds-topic-hint { font-size: .8rem; color: var(--ink-muted); margin-top: 6px; }
.bds-topic-item { padding: 9px 14px; font-size: .9rem; color: var(--ink); cursor: pointer; transition: background .15s; }
.bds-topic-item:hover { background: var(--surface-2); }

/* Word counter */
.bds-word-counter { font-size: .775rem; font-family: var(--font-mono); color: var(--ink-muted); transition: color .2s; float: right; }
.bds-word-counter--over { color: var(--accent); }

/* Submit row / button */
.bds-submit-row { margin-top: 28px; }
.bds-submit-btn {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--accent); color: white; border: none;
  padding: 13px 28px; border-radius: var(--radius-sm);
  font-family: var(--font-sans); font-size: 1rem; font-weight: 600;
  cursor: pointer; transition: all .2s; text-decoration: none;
}
.bds-submit-btn:hover { background: #d43d25; transform: translateY(-1px); }
.bds-submit-btn:active { transform: translateY(0); }
.bds-submit-btn:disabled { opacity: .6; cursor: not-allowed; transform: none; }
.bds-submit-icon { flex-shrink: 0; }
.bds-submit-text { }
.bds-submit-note { margin-top: 10px; font-size: .8rem; color: var(--ink-muted); }

/* Required asterisk */
.bds-required { color: var(--accent); margin-left: 2px; }

/* Flash messages (bds- prefix) */
.bds-flash {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 12px 16px; border-radius: var(--radius);
  font-size: .9rem; line-height: 1.5; margin-bottom: 20px;
  border: 1px solid;
}
.bds-flash--error   { background: #fff3f2; color: #8b1a1a; border-color: #f5b8b5; }
.bds-flash--success { background: #edfaf5; color: #1a6647; border-color: #a8e6c9; }
.bds-flash--info    { background: #eff8ff; color: #1a4a8b; border-color: #b8d5f5; }

/* Hint link */
.bds-link { color: var(--teal); text-decoration: none; }
.bds-link:hover { text-decoration: underline; }

/* Checkboxes (view uses bds-checks-grid / bds-check-label / bds-check-text / bds-checkbox) */
.bds-checks-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px,1fr)); gap: 10px; }
.bds-check-label {
  display: flex; align-items: center; gap: 9px;
  font-size: .9rem; color: var(--ink); cursor: pointer;
  padding: 10px 12px; border: 1.5px solid var(--border);
  border-radius: var(--radius-sm); transition: all .15s; background: var(--bg);
}
.bds-check-label:hover { border-color: var(--accent); background: rgba(232,85,61,.03); }
.bds-checkbox { accent-color: var(--accent); width: 15px; height: 15px; }
.bds-check-text { }

/* City country sub-label */
.bds-city-country { color: var(--ink-muted); font-size: .875rem; }

/* Socials grid (column layout) */
.bds-socials-grid { display: flex; flex-direction: column; gap: 12px; }

/* Collapse toggle (social links) */
.bds-collapse-toggle {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; background: none; border: none; border-bottom: 1px solid var(--border);
  cursor: pointer; font-family: var(--font-serif); font-size: 1.0625rem; font-weight: 700;
  color: var(--ink); padding: 0 0 12px; margin-bottom: 0; text-align: left;
}
.bds-collapse-body { margin-top: 20px; }
.bds-collapse-icon { width: 18px; height: 18px; flex-shrink: 0; transition: transform .2s; }
.bds-collapse-toggle[aria-expanded="true"] .bds-collapse-icon { transform: rotate(180deg); }

/* URL hint examples */
.bds-hint-example { display: block; margin-top: 5px; font-family: var(--font-mono); font-size: .75rem; color: var(--ink-muted); }
.bds-hint-ok  { color: #1a6647; }
.bds-hint-bad { color: var(--accent); }

/* Field error border */
.bds-field--error .bds-input,
.bds-field--error .bds-textarea,
.bds-field--error .bds-select { border-color: var(--accent); }


/* ── §52 — Blog Directory Profile Page (bdp-*) ──────────────────────────── */

/* Layout wrapper — appears inside .layout-app below nav */
.bdp-page { }

/* ── Hero ── */
.bdp-hero {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}
.bdp-hero__inner {
  max-width: 1200px; margin: 0 auto;
  padding: 40px 32px 32px;
  display: grid;
  grid-template-columns: 280px 1fr auto;
  gap: 36px;
  align-items: start;
}

/* Screenshot card */
.bdp-screenshot {
  width: 280px;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1.5px solid var(--border);
  background: var(--surface-2);
  aspect-ratio: 16/10;
  flex-shrink: 0;
  position: relative;
}
.bdp-screenshot__img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}
.bdp-screenshot__placeholder {
  width: 100%; height: 100%; min-height: 175px;
  display: flex; align-items: center; justify-content: center;
  flex-direction: column; gap: 10px;
  color: var(--ink-muted); font-size: 2.5rem;
}
.bdp-screenshot__placeholder-text {
  font-family: var(--font-sans); font-size: .75rem;
  color: var(--ink-muted); text-transform: uppercase;
  letter-spacing: 1px; font-weight: 500;
}
.bdp-screenshot__badge {
  position: absolute; bottom: 8px; right: 8px;
  background: rgba(0,0,0,.55); backdrop-filter: blur(4px);
  border-radius: 4px; padding: 3px 8px;
  font-size: .7rem; color: white; font-family: var(--font-mono);
  letter-spacing: .5px;
}

/* Blog info column */
.bdp-info { flex: 1; min-width: 0; }

.bdp-name-row {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-bottom: 6px;
}
.bdp-name {
  font-family: var(--font-serif); font-size: 1.75rem; font-weight: 800;
  color: var(--ink); margin: 0; line-height: 1.2;
}
.bdp-verified-badge {
  display: inline-flex; align-items: center; gap: 5px;
  background: rgba(42,176,158,.08); border: 1px solid rgba(42,176,158,.25);
  color: #1a5f5a; border-radius: 20px; padding: 3px 10px;
  font-size: .75rem; font-weight: 600; white-space: nowrap; flex-shrink: 0;
}
.bdp-featured-badge {
  display: inline-flex; align-items: center; gap: 4px;
  background: rgba(212,168,83,.1); border: 1px solid rgba(212,168,83,.3);
  color: #7a5c1a; border-radius: 20px; padding: 3px 10px;
  font-size: .75rem; font-weight: 600; white-space: nowrap; flex-shrink: 0;
}
.bdp-good-badge {
  display: inline-flex; align-items: center; gap: 4px;
  background: rgba(26,102,71,.07); border: 1px solid rgba(26,102,71,.2);
  color: #1a6647; border-radius: 20px; padding: 3px 10px;
  font-size: .75rem; font-weight: 600; white-space: nowrap; flex-shrink: 0;
}

.bdp-ext-link {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: .825rem; color: var(--teal); text-decoration: none;
  margin-bottom: 10px; transition: opacity .2s; font-family: var(--font-mono);
}
.bdp-ext-link:hover { opacity: .7; }
.bdp-ext-link svg { opacity: .7; }

.bdp-description {
  font-size: .9375rem; color: var(--ink); line-height: 1.65;
  margin: 0 0 14px; max-width: 600px;
}

.bdp-owner {
  font-size: .8375rem; color: var(--ink-muted); margin-bottom: 10px;
}
.bdp-owner a { color: var(--ink-muted); text-decoration: none; font-weight: 500; }
.bdp-owner a:hover { color: var(--accent); }

.bdp-meta-row {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  font-size: .8125rem; color: var(--ink-muted); margin-bottom: 12px;
}
.bdp-meta-item { }
.bdp-meta-dot { opacity: .4; }

.bdp-topics {
  display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px;
}
.bdp-topic-pill {
  display: inline-flex; align-items: center;
  padding: 4px 12px; border-radius: 20px;
  background: var(--surface-2); border: 1px solid var(--border);
  font-size: .8rem; color: var(--ink-muted); text-decoration: none;
  transition: all .15s;
}
.bdp-topic-pill:hover { border-color: var(--accent); color: var(--accent); background: rgba(232,85,61,.04); }

.bdp-socials {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 4px;
}
.bdp-social-link {
  width: 32px; height: 32px; border-radius: 8px;
  border: 1.5px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  color: var(--ink-muted); text-decoration: none; transition: all .2s;
}
.bdp-social-link:hover {
  background: var(--sl-color, var(--accent));
  border-color: var(--sl-color, var(--accent));
  color: white;
}

/* Actions column */
.bdp-actions {
  display: flex; flex-direction: column; gap: 10px;
  min-width: 160px; padding-top: 4px;
}
.bdp-action-stats {
  display: grid; grid-template-columns: 1fr 1fr; gap: 6px;
  margin-bottom: 4px;
}
.bdp-action-stat {
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 10px 14px; text-align: center;
}
.bdp-action-stat__val {
  font-family: var(--font-serif); font-size: 1.25rem; font-weight: 800;
  color: var(--ink); line-height: 1;
}
.bdp-action-stat__label {
  font-size: .7rem; color: var(--ink-muted); margin-top: 3px;
  text-transform: uppercase; letter-spacing: .5px;
}

.bdp-btn-follow {
  display: flex; align-items: center; justify-content: center;
  width: 100%; padding: 10px 16px;
  border-radius: var(--radius-sm); font-family: var(--font-sans);
  font-size: .9rem; font-weight: 600; cursor: pointer; transition: all .2s;
  border: 1.5px solid var(--accent); background: var(--accent); color: white;
  text-decoration: none;
}
.bdp-btn-follow:hover { background: #d43d25; border-color: #d43d25; }
.bdp-btn-follow.is-following {
  background: transparent; border-color: var(--border); color: var(--ink-muted);
}
.bdp-btn-follow.is-following:hover { border-color: var(--accent); color: var(--accent); }

.bdp-btn-submit {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  width: 100%; padding: 9px 16px;
  border-radius: var(--radius-sm); font-family: var(--font-sans);
  font-size: .875rem; font-weight: 600; cursor: pointer; transition: all .2s;
  border: 1.5px solid var(--border); background: var(--surface); color: var(--ink);
  text-decoration: none;
}
.bdp-btn-submit:hover { border-color: var(--accent); color: var(--accent); background: rgba(232,85,61,.04); }

.bdp-btn-edit {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  width: 100%; padding: 9px 16px;
  border-radius: var(--radius-sm); font-family: var(--font-sans);
  font-size: .875rem; font-weight: 600; cursor: pointer; transition: all .2s;
  border: 1.5px solid var(--border); background: transparent; color: var(--ink-muted);
  text-decoration: none;
}
.bdp-btn-edit:hover { border-color: var(--ink); color: var(--ink); }

.bdp-btn-verify {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  width: 100%; padding: 9px 16px;
  border-radius: var(--radius-sm); font-family: var(--font-sans);
  font-size: .875rem; font-weight: 600; cursor: pointer; transition: all .2s;
  border: 1.5px solid var(--teal); background: transparent; color: var(--teal);
  text-decoration: none;
}
.bdp-btn-verify:hover { background: var(--teal); color: white; }

/* Pending verification notice (for owner) */
.bdp-pending-notice {
  background: rgba(212,168,83,.08); border: 1px solid rgba(212,168,83,.25);
  border-radius: var(--radius-sm); padding: 10px 14px;
  font-size: .8rem; color: #7a5c1a; line-height: 1.5;
  margin-top: 4px;
}
.bdp-pending-notice a { color: #6a4e12; font-weight: 600; }
.bdp-pending-notice a:hover { text-decoration: underline; }

/* ── Metrics strip ── */
.bdp-metrics-strip {
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}
.bdp-metrics-strip__inner {
  max-width: 1200px; margin: 0 auto; padding: 12px 32px;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.bdp-metric-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 12px; border-radius: 6px;
  background: var(--surface-2); border: 1px solid var(--border);
  font-size: .8rem; color: var(--ink-muted);
}
.bdp-metric-chip__label {
  font-family: var(--font-mono); font-size: .7rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .5px; color: var(--ink-muted);
}
.bdp-metric-chip__val { font-weight: 700; color: var(--ink); }
.bdp-metric-chip--da  .bdp-metric-chip__val { color: var(--accent); }
.bdp-metric-chip--warn .bdp-metric-chip__val { color: #b87a12; }
.bdp-metric-chip--green { border-color: rgba(26,102,71,.2); background: rgba(26,102,71,.05); }
.bdp-metric-chip--green .bdp-metric-chip__val { color: #1a6647; }
.bdp-metric-chip--teal  { border-color: rgba(42,176,158,.25); background: rgba(42,176,158,.06); }
.bdp-metric-chip--teal  .bdp-metric-chip__val { color: #1a5f5a; }
.bdp-metrics-synced {
  margin-left: auto; font-size: .72rem; color: var(--ink-muted);
  font-family: var(--font-mono); white-space: nowrap;
}

/* ── Acceptance strip ── */
.bdp-accepts-strip {
  border-bottom: 1px solid var(--border);
  background: var(--surface-2); padding: 8px 32px;
}
.bdp-accepts-strip__inner {
  max-width: 1200px; margin: 0 auto;
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.bdp-accepts-label {
  font-size: .72rem; font-weight: 700; color: var(--ink-muted);
  text-transform: uppercase; letter-spacing: .7px;
  font-family: var(--font-mono); flex-shrink: 0;
}
.bdp-accept-badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 10px; border-radius: 3px;
  background: rgba(42,176,158,.08); border: 1px solid rgba(42,176,158,.2);
  font-size: .775rem; font-weight: 500; color: #1a5f5a;
}

/* ── Tabs ── */
.bdp-tabs-wrap {
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  position: sticky; top: 60px; z-index: 40;
}
.bdp-tabs {
  max-width: 1200px; margin: 0 auto; padding: 0 32px;
  display: flex; align-items: center; gap: 0;
}
.bdp-tab {
  display: flex; align-items: center; padding: 14px 20px;
  font-size: .9rem; font-weight: 600; color: var(--ink-muted);
  text-decoration: none; border-bottom: 2px solid transparent;
  transition: all .15s; white-space: nowrap;
}
.bdp-tab:hover { color: var(--ink); }
.bdp-tab.is-active { color: var(--accent); border-bottom-color: var(--accent); }

/* ── Content area ── */
.bdp-body {
  max-width: 1200px; margin: 0 auto; padding: 40px 32px 80px;
}

/* ── Posts grid ── */
.bdp-posts { display: flex; flex-direction: column; gap: 20px; }
.bdp-post-card {
  display: grid; grid-template-columns: 1fr auto;
  gap: 20px; align-items: start;
  background: var(--surface); border: 1.5px solid var(--border);
  border-radius: var(--radius); padding: 24px;
  transition: border-color .15s, box-shadow .15s;
}
.bdp-post-card:hover {
  border-color: rgba(232,85,61,.25);
  box-shadow: 0 3px 16px rgba(0,0,0,.06);
}
.bdp-post-card__body { min-width: 0; }
.bdp-post-card__author {
  display: flex; align-items: center; gap: 8px; margin-bottom: 10px;
}
.bdp-post-card__av {
  width: 28px; height: 28px; border-radius: 50%; overflow: hidden; flex-shrink: 0;
}
.bdp-post-card__av img { width: 100%; height: 100%; object-fit: cover; }
.bdp-post-card__av-init {
  width: 100%; height: 100%; border-radius: 50%;
  background: var(--surface-2); border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  font-size: .7rem; font-weight: 700; color: var(--ink-muted);
}
.bdp-post-card__author-name { font-size: .8rem; font-weight: 600; color: var(--ink-muted); text-decoration: none; }
.bdp-post-card__author-name:hover { color: var(--accent); }
.bdp-post-card__time { font-size: .775rem; color: var(--ink-muted); }
.bdp-post-card__topic {
  display: inline-block; padding: 2px 8px; border-radius: 3px;
  font-size: .72rem; font-weight: 600; letter-spacing: .3px;
  text-transform: uppercase; background: rgba(232,85,61,.07);
  color: var(--accent); margin-left: auto;
}
.bdp-post-card__title {
  font-family: var(--font-serif); font-size: 1.1875rem; font-weight: 700;
  color: var(--ink); margin: 0 0 8px; line-height: 1.35;
}
.bdp-post-card__title a { color: inherit; text-decoration: none; }
.bdp-post-card__title a:hover { color: var(--accent); }
.bdp-post-card__excerpt {
  font-size: .9rem; color: var(--ink-muted); line-height: 1.6; margin: 0 0 14px;
}
.bdp-post-card__footer {
  display: flex; align-items: center; gap: 14px;
  font-size: .8rem; color: var(--ink-muted);
}
.bdp-post-card__stat { display: flex; align-items: center; gap: 4px; }
.bdp-post-card__read { margin-left: auto; font-family: var(--font-mono); font-size: .75rem; }
.bdp-post-card__image {
  width: 120px; height: 80px; border-radius: var(--radius-sm);
  object-fit: cover; flex-shrink: 0;
}

/* ── No-posts empty state ── */
.bdp-empty {
  text-align: center; padding: 80px 24px;
  max-width: 480px; margin: 0 auto;
}
.bdp-empty__icon { font-size: 3rem; margin-bottom: 16px; }
.bdp-empty__title {
  font-family: var(--font-serif); font-size: 1.375rem; font-weight: 700;
  color: var(--ink); margin: 0 0 10px;
}
.bdp-empty__sub { font-size: .9375rem; color: var(--ink-muted); line-height: 1.6; margin: 0 0 24px; }
.bdp-empty__actions { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; }

/* ── About tab ── */
.bdp-about { max-width: 680px; }
.bdp-about__section { margin-bottom: 32px; }
.bdp-about__heading {
  font-family: var(--font-serif); font-size: 1.0625rem; font-weight: 700;
  color: var(--ink); margin: 0 0 16px; padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
}
.bdp-about__row {
  display: flex; gap: 16px; padding: 10px 0;
  border-bottom: 1px solid var(--border); font-size: .9rem;
}
.bdp-about__row:last-child { border-bottom: none; }
.bdp-about__label { width: 140px; flex-shrink: 0; font-weight: 600; color: var(--ink-muted); }
.bdp-about__val { flex: 1; color: var(--ink); word-break: break-word; }
.bdp-about__val a { color: var(--teal); text-decoration: none; }
.bdp-about__val a:hover { text-decoration: underline; }

/* Metrics cards in about */
.bdp-about-metrics-grid {
  display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; margin-top: 16px;
}
.bdp-m-card {
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 16px; text-align: center;
}
.bdp-m-card__val {
  font-family: var(--font-serif); font-size: 1.5rem; font-weight: 800;
  color: var(--ink); line-height: 1;
}
.bdp-m-card__label {
  font-size: .7rem; color: var(--ink-muted); margin-top: 5px;
  text-transform: uppercase; letter-spacing: .5px;
}
.bdp-metrics-ts { font-size: .775rem; color: var(--ink-muted); text-align: right; margin-top: 8px; }

/* ── Followers / contributors ── */
.bdp-user-list { display: flex; flex-direction: column; gap: 12px; }
.bdp-user-card {
  display: flex; align-items: center; gap: 14px;
  background: var(--surface); border: 1.5px solid var(--border);
  border-radius: var(--radius); padding: 14px 18px;
}
.bdp-user-card__av {
  width: 44px; height: 44px; border-radius: 50%; overflow: hidden; flex-shrink: 0; text-decoration: none;
}
.bdp-user-card__av img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bdp-user-card__av-init {
  width: 100%; height: 100%; border-radius: 50%;
  background: var(--surface-2); border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  font-size: .875rem; font-weight: 700; color: var(--ink-muted);
}
.bdp-user-card__info { flex: 1; min-width: 0; }
.bdp-user-card__name { font-weight: 600; font-size: .9375rem; color: var(--ink); text-decoration: none; display: block; }
.bdp-user-card__name:hover { color: var(--accent); }
.bdp-user-card__username { font-size: .8rem; color: var(--ink-muted); }
.bdp-user-card__bio { font-size: .8375rem; color: var(--ink-muted); margin-top: 2px; }

/* ── Flash banner on blog profile ── */
.bdp-flash-banner {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 32px; font-size: .9rem; line-height: 1.5;
  border-bottom: 1px solid;
}
.bdp-flash-banner--success { background: #edfaf5; color: #1a6647; border-color: #a8e6c9; }
.bdp-flash-banner--error   { background: #fff3f2; color: #8b1a1a; border-color: #f5b8b5; }
.bdp-flash-banner--info    { background: #eff8ff; color: #1a4a8b; border-color: #b8d5f5; }
.bdp-flash-banner__icon { font-size: 1.1rem; flex-shrink: 0; }

/* ── Submitted banner ── */
.bdp-submitted-banner {
  background: #edfaf5; border-bottom: 1px solid #a8e6c9;
  padding: 12px 32px; font-size: .9rem; color: #1a6647;
  display: flex; align-items: center; gap: 8px;
}

/* ── Responsive ── */
@media (max-width: 1024px) {
  .bdp-hero__inner { grid-template-columns: 220px 1fr; gap: 24px; }
  .bdp-screenshot { width: 220px; }
  .bdp-actions { display: none; }
  .bdp-hero__inner { padding: 28px 24px; }
}
@media (max-width: 768px) {
  .bdp-hero__inner { grid-template-columns: 1fr; gap: 20px; padding: 24px 16px; }
  .bdp-screenshot { width: 100%; aspect-ratio: 16/9; }
  .bdp-actions { display: flex; flex-direction: row; flex-wrap: wrap; margin-top: 0; }
  .bdp-tabs { padding: 0 16px; }
  .bdp-body { padding: 24px 16px 60px; }
  .bdp-metrics-strip__inner,
  .bdp-accepts-strip { padding: 8px 16px; }
  .bdp-post-card { grid-template-columns: 1fr; }
  .bdp-post-card__image { width: 100%; height: 160px; order: -1; }
  .bdp-about-metrics-grid { grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 480px) {
  .bdp-about-metrics-grid { grid-template-columns: repeat(2,1fr); }
  .bdp-tab { padding: 12px 14px; font-size: .85rem; }
  .bdp-empty { padding: 60px 16px; }
}

/* ── Responsive ── */
@media (max-width: 768px) {
  .bds-page { margin: 32px auto; padding: 0 20px 60px; }
  .bds-card { padding: 24px; }
  .bdv-page { padding: 0 20px 60px; }
  .bdv-card { padding: 24px; }
}
@media (max-width: 640px) {
  .bds-page { padding: 0 16px 60px; }
  .bds-card { padding: 20px; }
  .bds-checkbox-grid { grid-template-columns: 1fr 1fr; }
  .bdv-page { padding: 0 16px 60px; }
  .bdv-card { padding: 20px; }
  .bdd-metrics-bar__inner { padding: 8px 16px; }
  .bdd-accepts-bar { padding: 8px 16px; }
  .bdd-metrics-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ═══════════════════════════════════════════════════════════════════════════
   §53 — Blog Directory Listing Page (new template: dir-hero, filter-bar,
          page-shell, filter-sidebar, featured-card, blog-card, bc-*, bli-*)
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Design tokens (dir-* namespace) ── */
:root {
  --dir-cream:      #F6F1E9;
  --dir-parchment:  #EDE7DA;
  --dir-warm-white: #FDFAF5;
  --dir-ink:        #1C1814;
  --dir-espresso:   #2B1D11;
  --dir-copper:     #C4622D;
  --dir-teal:       #2E8B7A;
  --dir-amber:      #E09B38;
  --dir-mist:       #E6DDD0;
  --dir-border:     #DDD5C8;
  --dir-muted:      rgba(28,24,20,0.45);
  --dir-muted2:     rgba(28,24,20,0.28);
  /* Legacy bdd tokens kept for backwards compat */
  --bdd-cream:      #F6F1E9;
  --bdd-parchment:  #EDE7DA;
  --bdd-warm-white: #FDFAF5;
  --bdd-ink:        #1C1814;
  --bdd-espresso:   #2B1D11;
  --bdd-copper:     #C4622D;
  --bdd-teal:       #2E8B7A;
  --bdd-amber:      #E09B38;
  --bdd-mist:       #E6DDD0;
  --bdd-border:     #DDD5C8;
  --bdd-muted:      rgba(28,24,20,0.45);
  --bdd-muted2:     rgba(28,24,20,0.28);
}

/* ── HERO ── */
.bdd-hero {
  position: relative;
  overflow: hidden;
  background: var(--bdd-espresso);
  min-height: 220px;
}
.bdd-hero-cover {
  position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(196,98,45,0.2) 0%, rgba(46,139,122,0.14) 60%, rgba(28,24,20,0.75) 100%);
}
.bdd-hero-pattern {
  position: absolute; inset: 0; opacity: 0.05;
  background-image:
    repeating-linear-gradient(0deg,  rgba(255,255,255,0.4) 0, rgba(255,255,255,0.4) 1px, transparent 0, transparent 40px),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.4) 0, rgba(255,255,255,0.4) 1px, transparent 0, transparent 40px);
}
.bdd-hero-content {
  position: relative; z-index: 2;
  max-width: 1360px; margin: 0 auto;
  padding: 40px 28px 36px;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  flex-wrap: wrap;
}
.bdd-hero-left { flex: 1; min-width: 260px; }
.bdd-hero-eyebrow {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: 'DM Mono', var(--font-mono, monospace); font-size: 10px; letter-spacing: 1px;
  text-transform: uppercase; color: rgba(255,255,255,0.38); margin-bottom: 14px;
}
.bdd-hero-eyebrow svg { opacity: 0.5; }
.bdd-hero-eyebrow-sep { opacity: 0.4; }
.bdd-hero-title {
  font-family: var(--font-serif, 'Playfair Display', serif);
  font-size: clamp(28px, 4vw, 42px); font-weight: 900;
  color: #fff; letter-spacing: -1px; line-height: 1.05; margin: 0 0 10px;
}
.bdd-hero-sub {
  font-size: 14px; line-height: 1.65; color: rgba(255,255,255,0.58); margin: 0 0 22px;
  max-width: 440px;
}
.bdd-hero-stats {
  display: flex; align-items: center; gap: 0;
}
.bdd-hero-stat { display: flex; flex-direction: column; gap: 2px; padding-right: 20px; }
.bdd-hero-stat-n {
  font-family: var(--font-serif, 'Playfair Display', serif);
  font-size: clamp(18px, 2.8vw, 22px); font-weight: 800; color: #fff; line-height: 1;
}
.bdd-hero-stat-l { font-size: 10px; color: rgba(255,255,255,0.38); text-transform: uppercase; letter-spacing: 0.7px; }
.bdd-hero-stat-divider {
  width: 1px; height: 30px; background: rgba(255,255,255,0.12); margin: 0 20px 0 0;
}
.bdd-hero-right { flex-shrink: 0; }
.bdd-hero-cta {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--bdd-copper); color: #fff;
  padding: 11px 22px; border-radius: 8px; font-size: 13px; font-weight: 700;
  text-decoration: none; transition: background .2s, transform .15s;
  white-space: nowrap;
}
.bdd-hero-cta:hover { background: #ad541f; transform: translateY(-1px); }

/* ── FILTER STRIP ── */
.bdd-filter-strip {
  background: var(--bdd-warm-white);
  border-bottom: 1.5px solid var(--bdd-border);
  position: sticky; top: 60px; z-index: 100;
}
.bdd-filter-strip-inner {
  max-width: 1360px; margin: 0 auto;
  padding: 0 28px;
  display: flex; align-items: stretch; gap: 0;
  overflow-x: auto; scrollbar-width: none;
}
.bdd-filter-strip-inner::-webkit-scrollbar { display: none; }

/* Sort tabs */
.bdd-sort-tabs { display: flex; align-items: stretch; gap: 0; }
.bdd-sort-tab {
  display: inline-flex; align-items: center;
  padding: 0 16px; height: 48px;
  font-size: 13px; font-weight: 500; color: var(--bdd-muted);
  text-decoration: none; white-space: nowrap;
  border-bottom: 2px solid transparent;
  transition: color .17s, border-color .17s;
}
.bdd-sort-tab:hover { color: var(--bdd-ink); }
.bdd-sort-tab.on { color: var(--bdd-copper); border-bottom-color: var(--bdd-copper); font-weight: 600; }

.bdd-filter-divider { width: 1px; background: var(--bdd-mist); margin: 10px 16px; flex-shrink: 0; }

/* Dropdown group */
.bdd-filter-dropdowns { display: flex; align-items: center; gap: 10px; flex: 1; padding: 8px 0; }
.bdd-filter-select {
  font-size: 12px; color: var(--bdd-ink);
  background: var(--bdd-cream);
  border: 1.5px solid var(--bdd-border); border-radius: 6px;
  padding: 6px 28px 6px 10px; cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23888' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 8px center;
  transition: border-color .17s;
  white-space: nowrap;
}
.bdd-filter-select:focus { outline: none; border-color: var(--bdd-copper); }
.bdd-clear-btn {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12px; font-weight: 600; color: var(--bdd-muted);
  border: 1.5px solid var(--bdd-border); border-radius: 6px;
  padding: 6px 12px; text-decoration: none; white-space: nowrap;
  transition: color .17s, border-color .17s; flex-shrink: 0;
}
.bdd-clear-btn:hover { color: var(--bdd-copper); border-color: var(--bdd-copper); }

/* ── PAGE BODY ── */
.bdd-page-body {
  max-width: 1360px; margin: 0 auto;
  padding: 28px 28px 80px;
  display: grid; grid-template-columns: 1fr 300px;
  gap: 28px; align-items: start;
}

/* ── MAIN ── */
.bdd-main {}

.bdd-results-bar {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; margin-bottom: 18px; flex-wrap: wrap;
}
.bdd-results-count { font-size: 13px; color: var(--bdd-muted); }
.bdd-results-count strong { color: var(--bdd-ink); font-weight: 600; }
.bdd-results-page { font-size: 12px; color: var(--bdd-muted2); }

/* Blog grid */
.bdd-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 18px;
  margin-bottom: 10px;
}

/* ── BLOG CARD ── */
.bdd-card {
  background: var(--bdd-warm-white);
  border: 1.5px solid var(--bdd-border);
  border-radius: 13px; overflow: hidden;
  display: flex; flex-direction: column;
  transition: all .2s;
  animation: bddFadeUp .5s ease both;
}
.bdd-card:hover { border-color: rgba(196,98,45,0.25); box-shadow: 0 8px 30px rgba(28,24,20,0.08); transform: translateY(-2px); }
@keyframes bddFadeUp { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:translateY(0); } }
.bdd-card.d1 { animation-delay: .04s; }
.bdd-card.d2 { animation-delay: .08s; }
.bdd-card.d3 { animation-delay: .12s; }
.bdd-card.d4 { animation-delay: .16s; }
.bdd-card.d5 { animation-delay: .20s; }
.bdd-card.d6 { animation-delay: .24s; }

/* Thumbnail */
.bdd-card-thumb {
  display: block; aspect-ratio: 16/9;
  overflow: hidden; flex-shrink: 0; position: relative;
  background: var(--bdd-mist);
}
.bdd-card-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s; }
.bdd-card:hover .bdd-card-thumb img { transform: scale(1.04); }
.bdd-card-thumb-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(28,24,20,0.32) 0%, transparent 55%);
}
.bdd-card-thumb-grad {
  width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
}
.bdd-card-thumb-initials {
  font-family: var(--font-serif, 'Playfair Display', serif);
  font-size: 2rem; font-weight: 800; color: rgba(255,255,255,0.8); letter-spacing: 2px;
}
.bdd-card-thumb-topic {
  position: absolute; bottom: 10px; left: 12px;
  font-family: 'DM Mono', var(--font-mono, monospace);
  font-size: 9px; letter-spacing: 1px; text-transform: uppercase;
  color: #fff; background: rgba(28,24,20,0.6);
  backdrop-filter: blur(6px); padding: 3px 9px; border-radius: 3px;
}

/* Card body */
.bdd-card-body {
  padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 6px; flex: 1;
}
.bdd-card-name-row { display: flex; align-items: center; gap: 5px; }
.bdd-card-name {
  font-family: var(--font-serif, 'Playfair Display', serif);
  font-size: 15px; font-weight: 700; color: var(--bdd-espresso);
  text-decoration: none; line-height: 1.3;
  flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  transition: color .17s;
}
.bdd-card-name:hover { color: var(--bdd-copper); }
.bdd-card-verified { width: 14px; height: 14px; flex-shrink: 0; color: var(--bdd-teal); }
.bdd-card-host {
  display: inline-flex; align-items: center; gap: 4px;
  font-family: 'DM Mono', var(--font-mono, monospace);
  font-size: 11px; color: var(--bdd-muted); text-decoration: none;
  transition: color .17s;
}
.bdd-card-host:hover { color: var(--bdd-teal); }
.bdd-card-desc {
  font-size: 12.5px; color: var(--bdd-ink); opacity: 0.54; line-height: 1.6;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.bdd-card-topics { display: flex; flex-wrap: wrap; gap: 5px; }
.bdd-card-topic {
  font-family: 'DM Mono', var(--font-mono, monospace);
  font-size: 9px; letter-spacing: 0.5px; text-transform: uppercase;
  color: var(--bdd-espresso); background: var(--bdd-cream);
  border: 1.5px solid var(--bdd-mist); padding: 3px 9px; border-radius: 4px;
  text-decoration: none; transition: all .17s; white-space: nowrap;
}
.bdd-card-topic:hover { border-color: var(--bdd-copper); color: var(--bdd-copper); }
.bdd-card-accepts { display: flex; flex-wrap: wrap; gap: 4px; }
.bdd-card-accept {
  font-size: 10px; font-weight: 600; color: var(--bdd-teal);
  background: rgba(46,139,122,0.09); border-radius: 4px;
  padding: 2px 8px; white-space: nowrap;
}
.bdd-card-footer {
  display: flex; align-items: center; gap: 10px;
  margin-top: auto; padding-top: 10px;
  border-top: 1px solid var(--bdd-mist);
}
.bdd-card-stats { display: flex; align-items: center; gap: 10px; flex: 1; flex-wrap: wrap; }
.bdd-card-stat {
  display: flex; align-items: center; gap: 4px;
  font-size: 11px; color: var(--bdd-muted); white-space: nowrap;
}
.bdd-card-stat svg { opacity: 0.65; flex-shrink: 0; }
.bdd-card-follow-btn {
  flex-shrink: 0; font-size: 11px; font-weight: 700;
  padding: 5px 14px; border-radius: 6px;
  background: var(--bdd-copper); color: #fff;
  border: none; cursor: pointer; transition: all .2s; white-space: nowrap;
}
.bdd-card-follow-btn:hover { background: #ad541f; transform: translateY(-1px); }
.bdd-card-follow-btn.on {
  background: transparent; border: 1.5px solid rgba(255,255,255,0.25);
  color: var(--bdd-muted); border-color: var(--bdd-border);
}
.bdd-card-follow-btn.on:hover { color: var(--bdd-copper); border-color: var(--bdd-copper); }

/* ── EMPTY STATE ── */
.bdd-empty {
  text-align: center; padding: 80px 24px;
  color: var(--bdd-muted);
}
.bdd-empty svg { width: 52px; height: 52px; color: var(--bdd-border); margin-bottom: 16px; display: block; margin-inline: auto; }
.bdd-empty h2 {
  font-family: var(--font-serif, 'Playfair Display', serif);
  font-size: 20px; font-weight: 700; color: var(--bdd-espresso); margin: 0 0 8px;
}
.bdd-empty p { font-size: 14px; margin: 0; }
.bdd-empty a { color: var(--bdd-copper); }

/* ── PAGINATION ── */
.bdd-pagination {
  display: flex; justify-content: center; align-items: center;
  gap: 6px; flex-wrap: wrap; margin-top: 20px;
}
.bdd-page-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 38px; height: 38px; padding: 0 10px;
  border-radius: 8px; font-size: 13px; font-weight: 500;
  color: var(--bdd-ink); text-decoration: none;
  border: 1.5px solid var(--bdd-border);
  background: var(--bdd-warm-white);
  transition: all .15s;
}
.bdd-page-btn:hover { border-color: var(--bdd-copper); color: var(--bdd-copper); }
.bdd-page-btn.on {
  background: var(--bdd-espresso); border-color: var(--bdd-espresso); color: var(--bdd-cream);
  cursor: default;
}
.bdd-page-ellipsis { color: var(--bdd-muted); padding: 0 4px; font-size: 14px; }

/* ── SIDEBAR ── */
.bdd-sidebar {
  display: flex; flex-direction: column; gap: 18px;
  position: sticky; top: 116px; /* nav + filter strip */
}

/* Sidebar panel */
.bdd-spanel {
  background: var(--bdd-warm-white); border: 1.5px solid var(--bdd-border);
  border-radius: 13px; overflow: hidden;
  animation: bddFadeUp .5s ease both;
}
.bdd-spanel-head {
  padding: 13px 18px 11px; border-bottom: 1px solid var(--bdd-mist);
  display: flex; align-items: center; justify-content: space-between;
}
.bdd-spanel-title {
  font-family: var(--font-serif, 'Playfair Display', serif);
  font-size: 14px; font-weight: 800; color: var(--bdd-espresso);
}
.bdd-spanel-link { font-size: 11px; font-weight: 600; color: var(--bdd-copper); text-decoration: none; }
.bdd-spanel-link:hover { opacity: 0.75; }

/* Featured blog items */
.bdd-feat-item {
  display: flex; align-items: center; gap: 11px;
  padding: 10px 18px; border-bottom: 1px solid var(--bdd-mist);
  text-decoration: none; transition: background .17s;
}
.bdd-feat-item:last-child { border-bottom: none; }
.bdd-feat-item:hover { background: var(--bdd-cream); }
.bdd-feat-thumb {
  width: 44px; height: 44px; border-radius: 8px; overflow: hidden; flex-shrink: 0;
  background: var(--bdd-mist);
  display: flex; align-items: center; justify-content: center;
}
.bdd-feat-thumb img { width: 100%; height: 100%; object-fit: cover; }
.bdd-feat-thumb span {
  font-family: var(--font-serif, 'Playfair Display', serif);
  font-size: 14px; font-weight: 700; color: rgba(255,255,255,0.75);
}
.bdd-feat-info { flex: 1; min-width: 0; }
.bdd-feat-name {
  font-size: 13px; font-weight: 600; color: var(--bdd-espresso);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  margin-bottom: 2px;
}
.bdd-feat-meta { font-size: 11px; color: var(--bdd-muted); }

/* Topic cloud */
.bdd-topic-cloud { display: flex; flex-wrap: wrap; gap: 7px; padding: 14px 18px; }
.bdd-topic-chip {
  font-family: 'DM Mono', var(--font-mono, monospace);
  font-size: 10px; letter-spacing: 0.5px; text-transform: uppercase;
  color: var(--bdd-espresso); background: var(--bdd-cream);
  border: 1.5px solid var(--bdd-mist); padding: 5px 11px; border-radius: 4px;
  text-decoration: none; transition: all .17s; white-space: nowrap;
  display: inline-flex; align-items: center; gap: 5px;
}
.bdd-topic-chip:hover,
.bdd-topic-chip.on { border-color: var(--bdd-copper); color: var(--bdd-copper); }
.bdd-topic-chip.on { background: rgba(196,98,45,0.07); }
.bdd-topic-cnt {
  font-size: 9px; color: var(--bdd-muted);
  background: var(--bdd-mist); padding: 1px 5px; border-radius: 3px;
}

/* CTA panel */
.bdd-spanel-cta {
  border-color: rgba(196,98,45,0.22);
  background: linear-gradient(135deg, var(--bdd-warm-white), rgba(196,98,45,0.03));
  text-align: center; padding: 22px 18px;
}
.bdd-cta-icon { font-size: 30px; margin-bottom: 10px; }
.bdd-cta-title {
  font-family: var(--font-serif, 'Playfair Display', serif);
  font-size: 15px; font-weight: 800; color: var(--bdd-espresso); margin-bottom: 7px;
}
.bdd-cta-sub { font-size: 12px; color: var(--bdd-muted); line-height: 1.65; margin-bottom: 16px; }
.bdd-cta-btn {
  display: inline-flex; align-items: center; gap: 6px; justify-content: center;
  width: 100%; padding: 11px;
  background: var(--bdd-espresso); color: var(--bdd-cream);
  border-radius: 8px; font-size: 13px; font-weight: 700;
  text-decoration: none; transition: all .2s;
}
.bdd-cta-btn:hover { background: var(--bdd-copper); }

/* ── RESPONSIVE ── */
@media (max-width: 1100px) {
  .bdd-page-body { grid-template-columns: 1fr; }
  .bdd-sidebar { position: static; }
}
@media (max-width: 860px) {
  .bdd-grid { grid-template-columns: 1fr 1fr; }
  .bdd-hero-content { padding: 28px 20px 24px; }
  .bdd-hero-stat-n { font-size: 18px; }
}
@media (max-width: 640px) {
  .bdd-grid { grid-template-columns: 1fr; }
  .bdd-hero-content { flex-direction: column; align-items: flex-start; }
  .bdd-page-body { padding: 20px 16px 60px; }
  .bdd-filter-strip-inner { padding: 0 16px; }
  .bdd-sort-tab { padding: 0 12px; font-size: 12px; }
}

/* ── dir-cream-body (below hero) ── */
.dir-cream-body {
  background: var(--dir-cream);
}

/* ── dir-hero ── */
.dir-hero {
  position: relative;
  overflow: hidden;
  background: var(--dir-espresso);
  min-height: 230px;
}
.dir-hero-bg {
  position: absolute; inset: 0;
  background: linear-gradient(135deg,
    rgba(196,98,45,0.22) 0%,
    rgba(46,139,122,0.14) 55%,
    rgba(28,24,20,0.72) 100%);
}
.dir-hero-grid {
  position: absolute; inset: 0; opacity: 0.04;
  background-image:
    repeating-linear-gradient(0deg,   rgba(255,255,255,0.5) 0, rgba(255,255,255,0.5) 1px, transparent 0, transparent 44px),
    repeating-linear-gradient(90deg,  rgba(255,255,255,0.5) 0, rgba(255,255,255,0.5) 1px, transparent 0, transparent 44px);
}
.dir-hero-inner {
  position: relative; z-index: 2;
  max-width: 1380px; margin: 0 auto;
  padding: 44px 32px 38px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 28px; flex-wrap: wrap;
}
.dir-hero-left { flex: 1; min-width: 260px; }
.dir-hero-eyebrow {
  font-family: 'DM Mono', var(--font-mono, monospace);
  font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--dir-amber); margin-bottom: 16px;
  display: inline-flex; align-items: center; gap: 6px;
}
.dir-hero-eyebrow::before {
    content: '';
    width: 20px;
    height: 1px;
    background: var(--dir-amber);
}
.dir-hero-title {
  font-family: var(--font-serif, 'Playfair Display', serif);
  font-size: clamp(28px, 4.5vw, 46px); font-weight: 900;
  color: #fff; letter-spacing: -1.5px; line-height: 1.05;
  margin: 0 0 12px;
}
.dir-hero-title em { font-style: italic; color: var(--dir-copper); }
.dir-hero-sub {
  font-size: 15px; line-height: 1.65; color: rgba(255,255,255,0.55);
  margin: 0 0 22px; max-width: 540px;
}
.dir-hero-meta {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.dir-hero-meta-item {
  font-size: 13px; color: rgba(255,255,255,0.65);
}
.dir-hero-meta-item strong { color: #fff; font-weight: 700; }
.dir-hero-meta-sep { color: rgba(255,255,255,0.25); }
.dir-hero-right {
  flex-shrink: 0;
  display: flex; flex-direction: column; gap: 10px;
}
.dir-hero-btn-primary,
.dir-hero-btn-secondary {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 22px; border-radius: 8px; font-size: 13px; font-weight: 700;
  text-decoration: none; white-space: nowrap; transition: all .2s;
}
.dir-hero-btn-primary {
  background: var(--dir-copper); color: #fff;
}
.dir-hero-btn-primary:hover { background: #ad541f; transform: translateY(-1px); }
.dir-hero-btn-secondary {
  background: rgba(255,255,255,0.1); color: rgba(255,255,255,0.8);
  border: 1.5px solid rgba(255,255,255,0.18);
}
.dir-hero-btn-secondary:hover { background: rgba(255,255,255,0.16); color: #fff; }

/* ── filter-bar (sticky) ── */
.filter-bar {
  background: var(--dir-warm-white);
  border-bottom: 1.5px solid var(--dir-border);
  position: sticky; top: 60px; z-index: 100;
}
.filter-bar-inner {
  max-width: 1380px; margin: 0 auto;
  padding: 0 32px;
  display: flex; align-items: stretch; gap: 0;
  overflow-x: auto; scrollbar-width: none;
}
.filter-bar-inner::-webkit-scrollbar { display: none; }

.ftab-b {
  display: inline-flex; align-items: center;
  padding: 0 16px; height: 48px;
  font-size: 13px; font-weight: 500; color: var(--dir-muted);
  background: none; border: none; cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: color .17s, border-color .17s;
  white-space: nowrap; flex-shrink: 0;
}

.ftab-b:hover { color: var(--dir-ink); }

.ftab.on { color: var(--dir-copper); border-bottom-color: var(--dir-copper); font-weight: 600; }
.ftab-divider {
  width: 1px; background: var(--dir-mist);
  margin: 10px 12px; flex-shrink: 0;
}
.filter-right {
  margin-left: auto; display: flex; align-items: center;
  padding: 0 0 0 12px; flex-shrink: 0;
}
.view-toggle { display: flex; gap: 2px; }
.view-btn {
  width: 34px; height: 34px; border-radius: 6px;
  display: inline-flex; align-items: center; justify-content: center;
  background: none; border: 1.5px solid var(--dir-border);
  color: var(--dir-muted); cursor: pointer; transition: all .17s;
}
.view-btn:hover { border-color: var(--dir-copper); color: var(--dir-copper); }
.view-btn.on { background: var(--dir-espresso); border-color: var(--dir-espresso); color: #fff; }

/* ── page-shell ── */
.page-shell {
  max-width: 1380px; margin: 0 auto;
  padding: 28px 32px 80px;
  display: grid;
  grid-template-columns: 268px 1fr;
  gap: 28px; align-items: start;
  background: var(--dir-cream);
}

/* ── filter-sidebar ── */
.fs-mobile-toggle {
  display: none; align-items: center; gap: 6px;
  padding: 8px 16px; border-radius: 8px; border: 1.5px solid var(--dir-border);
  background: var(--dir-warm-white); color: var(--dir-espresso);
  font-size: 13px; font-weight: 600; cursor: pointer; margin-bottom: 12px;
  font-family: var(--font-sans);
}
.fs-mobile-toggle svg { width: 16px; height: 16px; }
.filter-sidebar {
  position: sticky; top: 116px;
  display: flex; flex-direction: column; gap: 14px;
  border: none;
  background: none;
  overflow: visible;
}
.fs-section {
  border: 1.5px solid var(--dir-border);
  border-radius: 13px;
  background: var(--dir-warm-white);
  overflow: hidden;
  padding: 12px 16px 14px;
}
.fs-section-head {
  display: flex; align-items: center; justify-content: space-between;
  margin: -12px -16px 12px;
  padding: 11px 16px;
  border-bottom: 1px solid var(--dir-mist);
}
.fs-section-title {
  font-family: var(--font-serif, 'Playfair Display', serif);
  font-size: 12px; font-weight: 800; color: var(--dir-espresso);
  text-transform: uppercase; letter-spacing: 0.5px;
}
.fs-section-reset {
  font-size: 11px; color: var(--dir-copper); text-decoration: none; font-weight: 600;
}
.fs-section-reset:hover { opacity: 0.75; }
.fs-clear-all {
  font-size: 11px; color: var(--dir-muted); text-decoration: none;
  border: 1px solid var(--dir-border); border-radius: 4px; padding: 2px 8px;
}
.fs-clear-all:hover { color: var(--dir-copper); border-color: var(--dir-copper); }

/* Active filter chips */
.fs-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.fs-chip {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px; font-weight: 600; color: var(--dir-espresso);
  background: rgba(196,98,45,0.08); border: 1px solid rgba(196,98,45,0.25);
  border-radius: 4px; padding: 3px 8px; white-space: nowrap;
}
.fs-chip-remove {
  color: var(--dir-copper); text-decoration: none; font-size: 13px; line-height: 1;
  margin-left: 2px;
}
.fs-chip-remove:hover { opacity: 0.7; }

/* Search */
.fs-search-wrap {
  position: relative;
}
.fs-search-icon {
  position: absolute; left: 9px; top: 50%; transform: translateY(-50%);
  color: var(--dir-muted); pointer-events: none;
}
.fs-search-input {
  width: 100%; padding: 8px 10px 8px 30px; box-sizing: border-box;
  font-size: 12.5px; color: var(--dir-ink);
  background: var(--dir-cream); border: 1.5px solid var(--dir-border);
  border-radius: 7px; outline: none; transition: border-color .17s;
}
.fs-search-input:focus { border-color: var(--dir-copper); }

/* Toggle rows */
.fs-toggles { display: flex; flex-direction: column; gap: 8px; }
.fs-toggle-row {
  display: flex; align-items: center; justify-content: space-between;
  cursor: pointer;
}
.fs-toggle-label { font-size: 12.5px; color: var(--dir-ink); }
.fs-toggle-btn {
  width: 34px; height: 18px; border-radius: 9px;
  background: var(--dir-border); border: none; cursor: pointer;
  position: relative; transition: background .2s; flex-shrink: 0;
}
.fs-toggle-btn::after {
  content: ''; position: absolute;
  width: 14px; height: 14px; border-radius: 50%;
  background: #fff; top: 2px; left: 2px;
  transition: transform .2s; box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.fs-toggle-btn.on { background: var(--dir-copper); }
.fs-toggle-btn.on::after { transform: translateX(16px); }

/* DA bar chart */
.fs-da-bars { display: flex; flex-direction: column; gap: 4px; }
.fs-da-bar-row {
  display: flex; align-items: center; gap: 7px;
  background: none; border: none; cursor: pointer; padding: 4px 4px;
  border-radius: 5px; transition: background .15s;
  width: 100%; text-align: left;
}
.fs-da-bar-row:hover { background: var(--dir-cream); }
.fs-da-bar-row.on { background: rgba(196,98,45,0.07); }
.fs-da-bar-label { font-size: 11px; color: var(--dir-ink); width: 52px; flex-shrink: 0; }
.fs-da-bar-track {
  flex: 1; height: 5px; background: var(--dir-mist);
  border-radius: 3px; overflow: hidden;
}
.fs-da-bar-fill {
  display: block; height: 100%;
  background: var(--dir-copper); border-radius: 3px;
  transition: width .3s;
}
.fs-da-bar-row.on .fs-da-bar-fill { background: var(--dir-espresso); }
.fs-da-bar-count { font-size: 10px; color: var(--dir-muted); width: 34px; text-align: right; flex-shrink: 0; }

/* Domain Age — multi-select checkboxes */
.fs-checkboxes { display: flex; flex-direction: column; gap: 5px; }
.fs-checkbox-row {
  display: flex; align-items: center; gap: 9px; cursor: pointer;
  padding: 6px 10px; border-radius: 7px; border: 1.5px solid transparent;
  transition: background .15s, border-color .15s;
}
.fs-checkbox-row:hover { background: rgba(196,98,45,0.05); border-color: var(--dir-border); }
.fs-checkbox-row.checked { background: rgba(196,98,45,0.08); border-color: rgba(196,98,45,0.3); }
.fs-cb-box {
  width: 16px; height: 16px; border-radius: 4px; border: 1.5px solid var(--dir-border);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  background: #fff; transition: background .15s, border-color .15s;
}
.fs-cb-box.on {
  background: var(--dir-copper); border-color: var(--dir-copper); color: #fff;
}
.fs-checkbox-label { font-size: 12.5px; color: var(--dir-ink); flex: 1; }
.fs-checkbox-cnt {
  font-size: 10.5px; color: var(--dir-muted2);
  background: var(--dir-mist); padding: 1px 6px; border-radius: 10px;
  font-family: var(--font-mono, monospace); flex-shrink: 0;
}

/* ── fs-section-hint (inline sub-label, e.g. "Lower = More Traffic") ── */
.fs-section-hint { font-size: 10px; color: var(--dir-muted2); margin-left: auto; }
.fs-section-hint-right { font-size: 10.5px; color: var(--dir-copper); font-weight: 600; margin-left: auto; cursor: default; }

/* Traffic Rank Slider */
.fs-rank-wrap { padding: 4px 0 2px; }
.fs-rank-labels-top {
  display: flex; justify-content: space-between;
  font-size: 10.5px; color: var(--dir-muted); margin-bottom: 6px;
}
.fs-rank-slider-wrap { position: relative; height: 20px; display: flex; align-items: center; }
.fs-rank-slider {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 4px; border-radius: 2px;
  background: var(--dir-mist); outline: none; cursor: pointer; position: relative; z-index: 2;
}
.fs-rank-track-fill {
  position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  height: 4px; background: var(--dir-copper); border-radius: 2px; pointer-events: none; z-index: 1;
  transition: width .1s;
}
.fs-rank-slider::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 18px; height: 18px; border-radius: 50%; cursor: pointer;
  background: var(--dir-copper); border: 2px solid #fff;
  box-shadow: 0 1px 4px rgba(0,0,0,0.2); transition: transform .15s;
}
.fs-rank-slider::-moz-range-thumb {
  width: 18px; height: 18px; border-radius: 50%; cursor: pointer;
  background: var(--dir-copper); border: 2px solid #fff;
  box-shadow: 0 1px 4px rgba(0,0,0,0.2);
}
.fs-rank-slider:hover::-webkit-slider-thumb { transform: scale(1.15); }
.fs-rank-ticks {
  display: flex; justify-content: space-between;
  font-size: 9.5px; color: var(--dir-muted2); margin-top: 4px;
  font-family: var(--font-mono, monospace);
}

/* Country multi-select */
.fs-country-search-wrap {
  position: relative; margin-bottom: 8px;
}
.fs-country-search-wrap .fs-search-icon {
  position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
  color: var(--dir-muted); pointer-events: none;
}
.fs-country-search {
  width: 100%; padding: 7px 10px 7px 30px; font-size: 12px;
  border: 1.5px solid var(--dir-border); border-radius: 7px;
  background: #fff; color: var(--dir-ink); outline: none;
  transition: border-color .15s; box-sizing: border-box;
}
.fs-country-search:focus { border-color: var(--dir-copper); }
.fs-country-list { display: flex; flex-direction: column; gap: 2px; max-height: 220px; overflow-y: auto; scrollbar-width: thin; }
.fs-country-row {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 10px; border-radius: 7px; text-decoration: none;
  border: 1.5px solid transparent; transition: background .14s, border-color .14s;
}
.fs-country-row:hover { background: rgba(196,98,45,0.05); border-color: var(--dir-border); }
.fs-country-row.on { background: rgba(196,98,45,0.09); border-color: rgba(196,98,45,0.3); }
.fs-country-code {
  font-size: 9.5px; font-weight: 700; letter-spacing: 0.5px;
  font-family: var(--font-mono, monospace); color: var(--dir-copper);
  background: rgba(196,98,45,0.1); padding: 2px 5px; border-radius: 3px;
  min-width: 24px; text-align: center; flex-shrink: 0;
}
.fs-country-name { font-size: 12.5px; color: var(--dir-ink); flex: 1; }
.fs-country-cnt {
  font-size: 10.5px; color: var(--dir-muted2); margin-left: auto; flex-shrink: 0;
  font-family: var(--font-mono, monospace);
}

/* Topics search + pill cloud */
.fs-topics-search-wrap {
  position: relative; margin-bottom: 10px;
}
.fs-topics-search-wrap .fs-search-icon {
  position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
  color: var(--dir-muted); pointer-events: none;
}
.fs-topics-input {
  width: 100%; padding: 7px 10px 7px 30px; font-size: 12px;
  border: 1.5px solid var(--dir-border); border-radius: 7px;
  background: #fff; color: var(--dir-ink); outline: none;
  transition: border-color .15s; box-sizing: border-box;
}
.fs-topics-input:focus { border-color: var(--dir-copper); }
.fs-topic-pills { display: flex; flex-wrap: wrap; gap: 6px; }
.fs-topic-pill {
  display: inline-flex; align-items: center;
  font-size: 12px; color: var(--dir-espresso);
  background: var(--dir-cream); border: 1.5px solid var(--dir-border);
  padding: 5px 11px; border-radius: 20px;
  text-decoration: none; transition: all .15s; white-space: nowrap; cursor: pointer;
}
.fs-topic-pill:hover { border-color: var(--dir-copper); color: var(--dir-copper); background: rgba(196,98,45,0.04); }
.fs-topic-pill.on {
  border-color: var(--dir-copper); color: var(--dir-copper);
  background: rgba(196,98,45,0.10); font-weight: 600;
}
.fs-topic-no-results { font-size: 12px; color: var(--dir-muted); padding: 6px 2px; }

/* ── dir-main ── */
.dir-main { min-width: 0; }

/* Results bar */
.dir-results-bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 18px; flex-wrap: wrap;
}
.dir-results-count { font-size: 13px; color: var(--dir-muted); }
.dir-results-filter-note { font-size: 11px; color: var(--dir-muted2); margin-left: 4px; }
.dir-results-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.dir-sort-label { font-size: 12px; color: var(--dir-muted); white-space: nowrap; }
.dir-sort-select {
  font-size: 12px; color: var(--dir-ink); background: var(--dir-cream);
  border: 1.5px solid var(--dir-border); border-radius: 6px;
  padding: 6px 24px 6px 10px; cursor: pointer; appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23888' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 7px center;
}
.dir-sort-select:focus { outline: none; border-color: var(--dir-copper); }
.dir-page-info { font-size: 12px; color: var(--dir-muted2); white-space: nowrap; }

/* Empty state */
.dir-empty {
  text-align: center; padding: 80px 24px; color: var(--dir-muted);
}
.dir-empty svg { width: 52px; height: 52px; color: var(--dir-border); margin-bottom: 16px; display: block; margin-inline: auto; }
.dir-empty h2 {
  font-family: var(--font-serif, 'Playfair Display', serif);
  font-size: 20px; font-weight: 700; color: var(--dir-espresso); margin: 0 0 8px;
}
.dir-empty p { font-size: 14px; margin: 0; }
.dir-empty a { color: var(--dir-copper); }

/* ── featured section ── */
.featured-row { margin-bottom: 24px; }
.section-label {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 12px;
}
.sl-text {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--font-serif, 'Playfair Display', serif);
  font-size: 16px; font-weight: 800; color: var(--dir-espresso);
}
.sl-dot {
  width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0;
}
.sl-see-all {
  font-size: 12px; font-weight: 600; color: var(--dir-copper); text-decoration: none; margin-left: 14px;
}
.sl-see-all:hover { opacity: 0.75; }
.carousel-controls {
  display: flex; align-items: center; gap: 8px;
}
.carousel-btn {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--dir-warm-white); border: 1.5px solid var(--dir-border);
  color: var(--dir-espresso); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all .17s; flex-shrink: 0;
}
.carousel-btn:hover { border-color: var(--dir-copper); color: var(--dir-copper); background: rgba(196,98,45,0.06); }
.carousel-btn:disabled { opacity: 0.35; cursor: default; }
.carousel-dots { display: flex; align-items: center; gap: 5px; }
.carousel-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--dir-mist); border: none; cursor: pointer; padding: 0;
  transition: background .2s, width .2s;
}
.carousel-dot.on { background: var(--dir-amber); width: 18px; border-radius: 4px; }

.carousel-wrap { overflow: hidden; }
.featured-track-outer { overflow: hidden; }
.featured-track {
  display: flex; gap: 16px;
  transition: transform .45s cubic-bezier(.4,0,.2,1);
  will-change: transform;
}
.featured-card {
  /* JS sets width for 3-per-view sliding; fallback 100% for ≤3 cards */
  flex: 1 0 auto; height: 220px;
  position: relative;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 20px; box-sizing: border-box; overflow: hidden;
  border-radius: 12px;
}
.fc-bg-img {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  opacity: 0.25;
}
.fc-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(28,24,20,0.92) 0%, rgba(28,24,20,0.3) 60%, transparent 100%);
}
.fc-content { position: relative; z-index: 2; }
.fc-eyebrow {
  font-family: 'DM Mono', var(--font-mono, monospace);
  font-size: 9px; letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--dir-amber); margin-bottom: 5px;
}
.fc-name {
  font-family: var(--font-serif, 'Playfair Display', serif);
  font-size: 16px; font-weight: 800; color: #fff;
  text-decoration: none; display: block; margin-bottom: 3px; line-height: 1.2;
}
.fc-name:hover { color: var(--dir-amber); }
.fc-url {
  font-family: 'DM Mono', var(--font-mono, monospace);
  font-size: 10px; color: rgba(255,255,255,0.4); margin-bottom: 8px;
}
.fc-stats { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.fc-stat {
  display: flex; align-items: center; gap: 4px;
  font-size: 10px; color: rgba(255,255,255,0.65); white-space: nowrap;
}
.fc-follow-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 14px; border-radius: 20px;
  font-size: 11px; font-weight: 700;
  background: var(--dir-copper); color: #fff;
  border: none; cursor: pointer; transition: all .2s;
}
.fc-follow-btn:hover { background: #ad541f; }
.fc-follow-btn.on {
  background: transparent; border: 1.5px solid rgba(255,255,255,0.3); color: rgba(255,255,255,0.7);
}
.fc-follow-btn.on:hover { border-color: rgba(255,255,255,0.6); color: #fff; }

/* Legacy: hide old fc-nav/fc-dots if still in DOM */
.fc-nav { display: none; }
.fc-dots { display: none; }

/* ── blog grid ── */
.blog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(272px, 1fr));
  gap: 18px;
  margin-bottom: 10px;
}
.blog-grid.list-mode { display: none; }

/* ── blog card ── */
.blog-card {
  background: var(--dir-warm-white);
  border: 1.5px solid var(--dir-border);
  border-radius: 14px; overflow: hidden;
  display: flex; flex-direction: column;
  transition: all .2s;
}
.blog-card:hover {
  border-color: rgba(196,98,45,0.3);
  box-shadow: 0 8px 32px rgba(28,24,20,0.09);
  transform: translateY(-2px);
}

/* Screenshot mockup */
.bc-screenshot {
  position: relative; background: #1a1a2a;
  border-bottom: 1px solid var(--dir-border);
  overflow: hidden;
}
.bc-screenshot-bar {
  display: flex; align-items: center; gap: 5px;
  padding: 6px 10px; background: #2a2a3a;
}
.bc-dot {
  width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
}
.bc-dot-red    { background: #ff5f57; }
.bc-dot-yellow { background: #febc2e; }
.bc-dot-green  { background: #28c840; }
.bc-url-bar {
  flex: 1; background: rgba(255,255,255,0.08); border-radius: 4px;
  padding: 2px 8px; font-size: 9px; color: rgba(255,255,255,0.3);
  font-family: 'DM Mono', var(--font-mono, monospace);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bc-screenshot-body { position: relative; height: 128px; overflow: hidden; }
.bc-ss-hero {
  width: 100%; height: 100%; background-size: cover; background-position: center;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  position: relative;
}
.bc-ss-initials {
  font-family: var(--font-serif, 'Playfair Display', serif);
  font-size: 2rem; font-weight: 800; color: rgba(255,255,255,0.6);
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
}
.bc-ss-header {
  position: absolute; top: 8px; left: 0; right: 0;
  display: flex; align-items: center; gap: 6px; padding: 0 10px;
}
.bc-ss-logo {
  width: 20px; height: 8px; background: rgba(255,255,255,0.15); border-radius: 2px;
}
.bc-ss-nav-dot { width: 20px; height: 5px; background: rgba(255,255,255,0.08); border-radius: 2px; }
.bc-ss-content {
  position: absolute; bottom: 12px; left: 10px; right: 10px;
  display: flex; flex-direction: column; gap: 4px;
}
.bc-ss-line {
  height: 5px; background: rgba(255,255,255,0.12); border-radius: 2px; display: block;
}
.bc-ss-line-full  { width: 100%; }
.bc-ss-line-3q    { width: 75%; }
.bc-ss-line-half  { width: 50%; }

/* Hover overlay */
.bc-hover-overlay {
  position: absolute; inset: 0;
  background: rgba(28,24,20,0.7);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity .2s;
}
.blog-card:hover .bc-hover-overlay { opacity: 1; }
.bc-visit-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 20px; border-radius: 8px;
  background: var(--dir-copper); color: #fff;
  font-size: 13px; font-weight: 700; text-decoration: none;
  transition: background .2s;
}
.bc-visit-btn:hover { background: #ad541f; }

/* Badges */
.bc-badges {
  position: absolute; top: 34px; left: 8px;
  display: flex; gap: 4px; flex-wrap: wrap; pointer-events: none;
}
.bc-badge {
  font-size: 9px; font-weight: 700; letter-spacing: 0.5px;
  padding: 3px 8px; border-radius: 3px;
  display: inline-flex; align-items: center; gap: 3px;
}
.bc-badge-featured    { background: var(--dir-amber); color: #1C1814; }
.bc-badge-recommended { background: var(--dir-copper); color: #fff; }
.bc-badge-verified    { background: var(--dir-teal);   color: #fff; }
.bc-badge-pending     { background: #f59e0b; color: #1C1814; }

/* Profile blogs tab — override grid to fit 2 cols in main column */
.prof-blog-grid { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); width: 100%; }
.prof-blogs-header { display: flex; justify-content: flex-end; margin-bottom: 16px; }
.bc-badge-https       { background: #1C2E1C; color: rgba(255,255,255,0.8); }

/* Card body */
.bc-body {
  padding: 14px 15px 15px;
  display: flex; flex-direction: column; gap: 8px; flex: 1;
}
.bc-identity { display: flex; align-items: center; gap: 10px; }
.bc-avatar {
  width: 38px; height: 38px; border-radius: 8px;
  object-fit: cover; flex-shrink: 0; border: 1.5px solid var(--dir-mist);
}
.bc-avatar-initials {
  width: 38px; height: 38px; border-radius: 8px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--dir-mist);
  font-family: var(--font-serif, 'Playfair Display', serif);
  font-size: 15px; font-weight: 800; color: var(--dir-espresso);
}
.bc-identity-text { flex: 1; min-width: 0; }
.bc-name {
  display: block; font-family: var(--font-serif, 'Playfair Display', serif);
  font-size: 14.5px; font-weight: 700; color: var(--dir-espresso);
  text-decoration: none; line-height: 1.25;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: color .17s;
}
.bc-name:hover { color: var(--dir-copper); }
.bc-url {
  display: block; font-family: 'DM Mono', var(--font-mono, monospace);
  font-size: 10.5px; color: var(--dir-muted); text-decoration: none;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: color .17s;
}
.bc-url:hover { color: var(--dir-teal); }
.bc-follow-btn {
  flex-shrink: 0; font-size: 11px; font-weight: 700;
  padding: 5px 13px; border-radius: 6px;
  background: var(--dir-copper); color: #fff;
  border: none; cursor: pointer; transition: all .2s; white-space: nowrap;
}
.bc-follow-btn:hover { background: #ad541f; }
.bc-follow-btn.on {
  background: transparent;
  border: 1.5px solid var(--dir-border);
  color: var(--dir-muted);
}
.bc-follow-btn.on:hover { color: var(--dir-copper); border-color: var(--dir-copper); }

/* Topics */
.bc-topics { display: flex; flex-wrap: wrap; gap: 5px; }
.bc-topic {
  font-family: 'DM Mono', var(--font-mono, monospace);
  font-size: 9px; letter-spacing: 0.5px; text-transform: uppercase;
  color: var(--dir-espresso); background: var(--dir-cream);
  border: 1.5px solid var(--dir-mist); padding: 3px 8px; border-radius: 3px;
  text-decoration: none; transition: all .17s; white-space: nowrap;
}
.bc-topic:hover { border-color: var(--dir-copper); color: var(--dir-copper); }

/* Description */
.bc-desc {
  font-size: 12px; color: var(--dir-ink); opacity: 0.55; line-height: 1.6;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  margin: 0;
}

/* Metrics grid */
.bc-metrics {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 6px; background: var(--dir-cream);
  border: 1px solid var(--dir-mist); border-radius: 8px; padding: 8px;
}
.bc-metric { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.bc-metric-val {
  font-size: 13px; font-weight: 700; color: var(--dir-espresso); line-height: 1;
}
.bc-metric-val.da-high { color: #2E8B7A; }
.bc-metric-val.da-mid  { color: #E09B38; }
.bc-metric-val.da-low  { color: var(--dir-muted); }
.bc-metric-lbl { font-size: 9px; color: var(--dir-muted); text-transform: uppercase; letter-spacing: 0.4px; }

/* Accepts tags */
.bc-accepts { display: flex; flex-wrap: wrap; gap: 4px; }
.bc-accept-tag {
  font-size: 10px; font-weight: 600; border-radius: 4px;
  padding: 2px 7px; white-space: nowrap;
}
.bc-accept-tag.yes { color: var(--dir-teal); background: rgba(46,139,122,0.09); }
.bc-accept-tag.no  { color: var(--dir-muted); background: var(--dir-cream); opacity: 0.6; }

/* Footer */
.bc-footer {
  display: flex; align-items: center; gap: 8px;
  margin-top: auto; padding-top: 8px;
  border-top: 1px solid var(--dir-mist);
}
.bc-author { display: flex; align-items: center; gap: 6px; flex: 1; min-width: 0; }
.bc-author-avatar {
  width: 22px; height: 22px; border-radius: 50%; object-fit: cover; flex-shrink: 0;
}
.bc-author-avatar-init {
  width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0;
  background: var(--dir-mist); display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 700; color: var(--dir-espresso);
}
.bc-author-name {
  font-size: 11px; color: var(--dir-muted); text-decoration: none;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: color .17s;
}
.bc-author-name:hover { color: var(--dir-copper); }
.bc-da-pill {
  flex-shrink: 0; font-size: 10px; font-weight: 700;
  padding: 2px 8px; border-radius: 20px;
}
.bc-da-pill.da-high { background: rgba(46,139,122,0.1);  color: #2E8B7A; }
.bc-da-pill.da-mid  { background: rgba(224,155,56,0.1);  color: #b07020; }
.bc-da-pill.da-low  { background: var(--dir-cream);      color: var(--dir-muted); }

/* ── blog list view ── */
.blog-list { display: flex; flex-direction: column; gap: 10px; }
.bli-item {
  display: flex; align-items: center; gap: 12px;
  background: var(--dir-warm-white); border: 1.5px solid var(--dir-border);
  border-radius: 10px; padding: 12px 14px;
  transition: all .2s;
}
.bli-item:hover { border-color: rgba(196,98,45,0.3); box-shadow: 0 4px 16px rgba(28,24,20,0.07); }
.bli-thumb {
  width: 64px; height: 48px; border-radius: 7px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.bli-thumb-init {
  font-family: var(--font-serif, 'Playfair Display', serif);
  font-size: 18px; font-weight: 800; color: rgba(255,255,255,0.65);
}
.bli-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.bli-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.bli-name {
  font-family: var(--font-serif, 'Playfair Display', serif);
  font-size: 14px; font-weight: 700; color: var(--dir-espresso);
  text-decoration: none; transition: color .17s;
}
.bli-name:hover { color: var(--dir-copper); }
.bli-url {
  font-family: 'DM Mono', var(--font-mono, monospace);
  font-size: 10.5px; color: var(--dir-muted); text-decoration: none;
}
.bli-url:hover { color: var(--dir-teal); }
.bli-topics { display: flex; flex-wrap: wrap; gap: 4px; }
.bli-topic {
  font-family: 'DM Mono', var(--font-mono, monospace);
  font-size: 9px; letter-spacing: 0.5px; text-transform: uppercase;
  background: var(--dir-cream); border: 1px solid var(--dir-mist);
  color: var(--dir-espresso); padding: 2px 7px; border-radius: 3px;
}
.bli-metrics { display: flex; gap: 14px; flex-wrap: wrap; }
.bli-metric { font-size: 11px; color: var(--dir-muted); }
.bli-follow-btn {
  flex-shrink: 0; font-size: 11px; font-weight: 700;
  padding: 6px 14px; border-radius: 6px;
  background: var(--dir-copper); color: #fff;
  border: none; cursor: pointer; transition: all .2s; white-space: nowrap;
}
.bli-follow-btn:hover { background: #ad541f; }
.bli-follow-btn.on {
  background: transparent;
  border: 1.5px solid var(--dir-border);
  color: var(--dir-muted);
}
.bli-follow-btn.on:hover { color: var(--dir-copper); border-color: var(--dir-copper); }

/* ── Load more / pagination ── */
.dir-load-more {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  margin-top: 32px;
}
.dir-load-more-btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 12px 36px; border-radius: 8px;
  background: var(--dir-espresso); color: var(--dir-cream);
  font-size: 13px; font-weight: 700; border: none; cursor: pointer;
  transition: background .2s, transform .15s, opacity .15s;
  position: relative;
}
.dir-load-more-btn:hover:not(:disabled) { background: var(--dir-copper); transform: translateY(-1px); }
.dir-load-more-btn:disabled { opacity: 0.72; cursor: default; transform: none; }
.dir-load-more-spinner {
  display: none;
  width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.3);
  border-top-color: #fff;
  animation: dir-spin .7s linear infinite;
  flex-shrink: 0;
}
.dir-load-more-btn.loading .dir-load-more-label { opacity: 0.6; }
.dir-load-more-btn.loading .dir-load-more-spinner { display: inline-block; }
@keyframes dir-spin { to { transform: rotate(360deg); } }
.dir-load-more-meta { font-size: 12px; color: var(--dir-muted); }

/* Card fade-in when appended via load more */
@keyframes dir-card-in {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
.blog-card.dir-new {
  animation: dir-card-in .35s ease both;
}

.dir-pagination-nav {
  display: flex; justify-content: center; align-items: center;
  gap: 12px; margin-top: 24px;
}
.dir-page-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 18px; border-radius: 7px;
  border: 1.5px solid var(--dir-border);
  background: var(--dir-warm-white); color: var(--dir-ink);
  font-size: 13px; font-weight: 600; text-decoration: none;
  transition: all .15s;
}
.dir-page-btn:hover { border-color: var(--dir-copper); color: var(--dir-copper); }
.dir-page-info-center { font-size: 13px; color: var(--dir-muted); }

/* ── Responsive ── */
@media (max-width: 1140px) {
  .page-shell { grid-template-columns: 240px 1fr; padding: 24px 24px 60px; }
}
@media (max-width: 960px) {
  .page-shell { grid-template-columns: 1fr; }
  .filter-sidebar { position: static; display: none; }
  .filter-sidebar.fs-open { display: flex; }
  .fs-mobile-toggle { display: inline-flex; }
  .dir-hero-inner { padding: 32px 24px 28px; }
}
@media (max-width: 768px) {
  .blog-grid { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
  .filter-bar-inner { padding: 0 20px; }
  .ftab { padding: 0 12px; font-size: 12px; }
  .bc-metrics { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .blog-grid { grid-template-columns: 1fr; }
  .page-shell { padding: 16px 16px 60px; }
  .dir-hero-inner { padding: 24px 16px 20px; flex-direction: column; align-items: flex-start; }
  .dir-hero-right { flex-direction: row; }
}

/* ═══════════════════════════════════════════════════════
   §54 — Blog Profile V2  (bp2-*)
   ═══════════════════════════════════════════════════════ */

:root {
  --bp2-cream:       #F6F1E9;
  --bp2-parchment:   #EDE7DA;
  --bp2-warm-white:  #FDFAF5;
  --bp2-ink:         #1C1814;
  --bp2-espresso:    #2B1D11;
  --bp2-copper:      #C4622D;
  --bp2-copper-glow: rgba(196,98,45,0.12);
  --bp2-amber:       #E09B38;
  --bp2-teal:        #2E8B7A;
  --bp2-mist:        #E6DDD0;
  --bp2-border:      #DDD5C8;
  --bp2-muted:       rgba(28,24,20,0.42);
}

/* ── Hero ── */
.bp2-hero {
  position: relative; overflow: hidden;
  background: #2B1D11; min-height: 280px;
}
.bp2-hero-cover {
  position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(196,98,45,0.22) 0%, rgba(46,139,122,0.15) 60%, rgba(28,24,20,0.8) 100%);
}
.bp2-hero-pattern {
  position: absolute; inset: 0; opacity: 0.06;
  background-image:
    repeating-linear-gradient(0deg, rgba(255,255,255,0.4) 0, rgba(255,255,255,0.4) 1px, transparent 0, transparent 40px),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.4) 0, rgba(255,255,255,0.4) 1px, transparent 0, transparent 40px);
}
.bp2-hero-content {
  position: relative; z-index: 2;
  max-width: 1360px; margin: 0 auto; padding: 36px 24px 32px;
  display: grid; grid-template-columns: auto 1fr auto;
  gap: 32px; align-items: flex-start;
}

/* ── Screenshot widget ── */
.bp2-shot-wrap { flex-shrink: 0; position: relative; }
.bp2-shot {
  width: 200px; height: 140px; border-radius: 12px 12px 0 0;
  overflow: hidden; border: 3px solid rgba(255,255,255,0.18);
  border-bottom: none; box-shadow: 0 16px 50px rgba(0,0,0,0.4);
  display: flex; flex-direction: column;
}
.bp2-sbar {
  height: 22px; background: #1e1e1e;
  display: flex; align-items: center; padding: 0 8px; gap: 5px; flex-shrink: 0;
}
.bp2-dot { width: 7px; height: 7px; border-radius: 50%; }
.bp2-shot-addr {
  flex: 1; height: 12px; background: #2a2a2a; border-radius: 4px;
  margin-left: 6px; display: flex; align-items: center; padding: 0 6px;
  font-family: 'DM Mono', monospace; font-size: 6px; color: #888;
  overflow: hidden; white-space: nowrap;
}
.bp2-sbody { flex: 1; overflow: hidden; position: relative; background: #fff; }
.bp2-sbody img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.bp2-sbody-skeleton { width: 100%; height: 100%; }
.bp2-sk-header { height: 28px; background: #f5f5f5; border-bottom: 1px solid #e0e0e0; display: flex; align-items: center; padding: 0 10px; gap: 8px; }
.bp2-sk-logo { width: 60px; height: 10px; background: #ccc; border-radius: 2px; }
.bp2-sk-dots { display: flex; gap: 6px; margin-left: auto; }
.bp2-sk-dot { width: 20px; height: 6px; background: #ddd; border-radius: 2px; }
.bp2-sk-content { padding: 8px 10px; }
.bp2-sk-img { width: 100%; height: 50px; background: linear-gradient(135deg, #c7d8e8, #a0bfd4); border-radius: 4px; margin-bottom: 6px; }
.bp2-sk-line { height: 6px; background: #e0e0e0; border-radius: 2px; margin-bottom: 4px; }
.bp2-sk-line.short { width: 60%; }
.bp2-live-badge {
  position: absolute; top: -8px; right: -8px; background: #22c55e;
  color: #fff; font-size: 8px; font-weight: 700; padding: 2px 7px; border-radius: 10px;
  font-family: 'DM Mono', monospace; letter-spacing: 0.5px; text-transform: uppercase;
  display: flex; align-items: center; gap: 4px; box-shadow: 0 2px 8px rgba(34,197,94,0.4);
}
.bp2-live-badge::before {
  content: ''; width: 5px; height: 5px; background: #fff; border-radius: 50%;
  animation: bp2blink 1.5s infinite;
}
@keyframes bp2blink { 0%,100%{opacity:1} 50%{opacity:0.3} }

/* ── Hero info ── */
.bp2-hero-info { flex: 1; padding-bottom: 28px; }
.bp2-breadcrumb {
  display: flex; align-items: center; gap: 6px;
  font-family: 'DM Mono', monospace; font-size: 10px; letter-spacing: 1px;
  color: rgba(255,255,255,0.38); margin-bottom: 14px;
}
.bp2-breadcrumb a { color: rgba(255,255,255,0.38); transition: color .17s; }
.bp2-breadcrumb a:hover { color: rgba(255,255,255,0.7); }
.bp2-hero-name {
  font-family: 'Playfair Display', serif;
  font-size: clamp(26px, 3.5vw, 40px);
  font-weight: 900; color: #fff; letter-spacing: -1px; line-height: 1.05; margin-bottom: 10px;
}
.bp2-hero-meta { display: flex; align-items: center; gap: 16px; margin-bottom: 16px; flex-wrap: wrap; }
.bp2-meta-item { display: flex; align-items: center; gap: 6px; font-size: 13px; color: rgba(255,255,255,0.55); }
.bp2-meta-item svg { width: 13px; height: 13px; opacity: 0.6; flex-shrink: 0; }
.bp2-meta-item a { color: rgba(255,255,255,0.7); transition: color .17s; }
.bp2-meta-item a:hover { color: var(--bp2-copper); }
.bp2-lang-badge {
  font-family: 'DM Mono', monospace; font-size: 9px; letter-spacing: 1px; text-transform: uppercase;
  color: rgba(255,255,255,0.5); border: 1px solid rgba(255,255,255,0.18); padding: 3px 8px; border-radius: 4px;
}
.bp2-hero-topics { display: flex; gap: 7px; flex-wrap: wrap; margin-bottom: 22px; }
.bp2-topic-chip {
  font-family: 'DM Mono', monospace; font-size: 9px; letter-spacing: 1px; text-transform: uppercase;
  color: rgba(255,255,255,0.65); background: rgba(255,255,255,0.09);
  border: 1px solid rgba(255,255,255,0.14); padding: 4px 10px; border-radius: 4px; transition: all .17s;
}
.bp2-topic-chip:hover { background: rgba(255,255,255,0.15); color: #fff; }

/* Domain stats */
.bp2-hds-grid { display: grid; gap: 8px; margin-top: 14px; }
.bp2-hds-item {
  background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.1);
  border-radius: 8px; padding: 10px 14px;
}
.bp2-hds-val { font-family: 'Playfair Display', serif; font-size: 16px; font-weight: 800; color: #fff; line-height: 1; }
.bp2-hds-label { font-family: 'DM Mono', monospace; font-size: 9px; letter-spacing: 0.8px; text-transform: uppercase; color: rgba(255,255,255,0.38); margin-top: 3px; }

/* ── Hero mini-stats ── */
.bp2-hero-mini-stats {
  display: flex; align-items: center; gap: 0; justify-content: flex-end;
/*  background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.12); */
  border-radius: 12px; overflow: hidden;
}
.bp2-hms-item {
  display: flex; flex-direction: column; align-items: center;
  padding: 10px 18px; gap: 2px;
}
.bp2-hms-item + .bp2-hms-item { border-left: 1px solid rgba(255,255,255,0.1); }
.bp2-hms-num {
  font-family: 'DM Sans', sans-serif; font-size: 18px; font-weight: 700;
  color: #fff; line-height: 1;
}
.bp2-hms-label {
  font-family: 'DM Mono', monospace; font-size: 9px; letter-spacing: 0.7px;
  text-transform: uppercase; color: rgba(255,255,255,0.45); white-space: nowrap;
}

/* ── Action buttons ── */
.bp2-hero-actions-panel { display: flex; flex-direction: column; align-items: center; gap: 14px; flex-shrink: 0; }
.bp2-hero-btns { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.bp2-btn-follow {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--bp2-copper); color: #fff; border: none;
  padding: 10px 22px; border-radius: 8px; font-size: 13px; font-weight: 700;
  font-family: 'DM Sans', sans-serif; cursor: pointer; transition: all .2s; text-decoration: none;
}
.bp2-btn-follow:hover { background: #ad541f; transform: translateY(-1px); box-shadow: 0 6px 20px rgba(196,98,45,0.35); }
.bp2-btn-follow.is-following { background: transparent; border: 1.5px solid rgba(255,255,255,0.25); color: rgba(255,255,255,0.8); }
.bp2-btn-follow.is-following:hover { border-color: rgba(255,255,255,0.5); color: #fff; }
.bp2-btn-submit {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--bp2-copper); color: #fff;
  border: 1.5px solid var(--bp2-copper); padding: 10px 22px;
  border-radius: 8px; font-size: 13px; font-weight: 600;
  font-family: 'DM Sans', sans-serif; cursor: pointer; transition: all .2s; text-decoration: none;
}
.bp2-btn-submit:hover { background: #c9422a; border-color: #c9422a; }
.bp2-btn-edit {
  display: inline-flex; align-items: center; gap: 7px;
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.8);
  border: 1.5px solid rgba(255, 255, 255, 0.18);
  border-radius: 8px; font-size: 13px; font-weight: 600;
  padding: 10px 22px;
  font-family: 'DM Sans', sans-serif; cursor: pointer; transition: all .2s; text-decoration: none;
}
.bp2-btn-edit:hover { background: rgba(255,255,255,0.2); color: #fff; }

/* More actions dropdown (blog hero) */
.bp2-more-btn { padding:10px 12px !important; }
.bp2-more-menu {
  display:none; position:absolute; top:calc(100% + 6px); right:0; z-index:20;
  background:#fff; border-radius:10px; box-shadow:0 8px 28px rgba(0,0,0,.15);
  min-width:180px; overflow:hidden;
}
.bp2-more-menu.open { display:block; }
.bp2-more-item {
  display:flex; align-items:center; gap:8px; padding:10px 16px;
  font-size:.82rem; font-weight:500; color:#2C1F14; cursor:pointer;
  text-decoration:none; border:none; background:none; width:100%;
  font-family:'DM Sans',sans-serif; transition:background .1s;
}
.bp2-more-item:hover { background:rgba(0,0,0,.04); }
.bp2-more-item svg { opacity:.5; flex-shrink:0; }

.bp2-btn-icon {
  width: 40px; height: 40px; border-radius: 8px;
  background: rgba(255,255,255,0.1); border: 1.5px solid rgba(255,255,255,0.18);
  display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,0.7);
  transition: all .2s; cursor: pointer;
}
.bp2-btn-icon:hover { background: rgba(255,255,255,0.2); color: #fff; }
.bp2-btn-icon svg { width: 16px; height: 16px; }
.bp2-mobile-more { display: none; }
.bp2-mobile-only { display: none; }

/* ── Stats strip ── */
.bp2-stats-strip {
  background: var(--bp2-warm-white); border-bottom: 1.5px solid var(--bp2-border);
  position: sticky; top: 60px; /* z-index: 100; */
}
.bp2-stats-inner {
  max-width: 1360px; margin: 0 auto; padding: 0 24px;
  display: flex; align-items: stretch;
}
.bp2-stat-block {
  padding: 14px 28px 14px 0; display: flex; align-items: center; gap: 14px;
  border-right: 1px solid var(--bp2-mist);
}
.bp2-stat-block:first-child { padding-left: 0; }
.bp2-stat-num { font-family: 'Playfair Display', serif; font-size: clamp(18px, 2.8vw, 22px); font-weight: 800; color: var(--bp2-espresso); line-height: 1; }
.bp2-stat-label { font-size: 11px; color: var(--bp2-muted); margin-top: 2px; }
.bp2-stat-icon { font-size: 20px; flex-shrink: 0; }
.bp2-tab-nav { margin-left: auto; display: flex; align-items: center; }
.bp2-tab {
  padding: 0 18px; height: 100%; display: flex; align-items: center;
  font-size: 13px; font-weight: 500; color: var(--bp2-muted);
  border-bottom: 2px solid transparent; cursor: pointer; border: none; background: none;
  font-family: 'DM Sans', sans-serif; transition: all .17s; white-space: nowrap;
}
.bp2-tab:hover { color: var(--bp2-ink); }
.bp2-tab.on { color: var(--bp2-copper); border-bottom: 2px solid var(--bp2-copper); font-weight: 600; }

/* ── Page body ── */
.bp2-page-body {
  max-width: 1360px; margin: 0 auto; padding: 32px 24px 80px;
  display: grid; grid-template-columns: 1fr 320px; gap: 28px; align-items: start;
}
.bp2-section { margin-bottom: 36px; }
.bp2-sec-hdr { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.bp2-sec-title {
  font-family: 'Playfair Display', serif; font-size: 20px; font-weight: 800;
  color: var(--bp2-espresso); display: flex; align-items: center; gap: 10px; letter-spacing: -0.3px;
}
.bp2-sec-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.bp2-sec-count { font-family: 'DM Mono', monospace; font-size: 11px; color: var(--bp2-muted); background: var(--bp2-mist); padding: 3px 10px; border-radius: 4px; font-weight: 400; }
.bp2-sec-link { font-size: 12px; font-weight: 600; color: var(--bp2-copper); }
.bp2-sec-link:hover { opacity: 0.7; }

/* Sort row */
.bp2-sort-row { display: flex; align-items: center; gap: 8px; margin-bottom: 18px; flex-wrap: wrap; }
.bp2-sort-btn {
  padding: 6px 14px; border-radius: 5px; border: 1.5px solid var(--bp2-border);
  background: var(--bp2-warm-white); font-size: 12px; font-weight: 500; color: var(--bp2-muted);
  font-family: 'DM Sans', sans-serif; cursor: pointer; transition: all .17s;
}
.bp2-sort-btn:hover { color: var(--bp2-ink); border-color: var(--bp2-ink); }
.bp2-sort-btn.on { background: var(--bp2-espresso); color: var(--bp2-cream); border-color: var(--bp2-espresso); }

/* ── Post grid ── */
.bp2-post-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-bottom: 10px; }
.bp2-post-card {
  background: var(--bp2-warm-white); border: 1.5px solid var(--bp2-border);
  border-radius: 13px; overflow: hidden; transition: all .2s;
  animation: bp2fadeUp .5s ease both;
}
.bp2-post-card:hover { border-color: rgba(196,98,45,0.25); box-shadow: 0 8px 30px rgba(28,24,20,0.08); transform: translateY(-2px); }
.bp2-post-thumb {
  width: 100%; aspect-ratio: 16/9;
  display: flex; align-items: center; justify-content: center; font-size: 36px;
  position: relative; overflow: hidden;
  background: linear-gradient(135deg, var(--bp2-mist), var(--bp2-parchment));
}
.bp2-post-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.bp2-post-thumb-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(28,24,20,0.35) 0%, transparent 60%);
}
.bp2-post-topic-badge {
  position: absolute; bottom: 10px; left: 12px;
  font-family: 'DM Mono', monospace; font-size: 8px; letter-spacing: 1px; text-transform: uppercase;
  color: #fff; background: rgba(28,24,20,0.6); backdrop-filter: blur(6px);
  padding: 3px 9px; border-radius: 3px;
}
.bp2-post-body { padding: 16px; }
.bp2-post-title {
  display: block; font-family: 'Playfair Display', serif; font-size: 16px; font-weight: 700;
  color: var(--bp2-espresso); line-height: 1.35; margin-bottom: 8px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  transition: color .17s;
}
.bp2-post-title:hover { color: var(--bp2-copper); }
.bp2-post-excerpt {
  font-size: 13px; line-height: 1.65; color: var(--bp2-ink); opacity: 0.56;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  margin-bottom: 12px;
}
.bp2-post-footer {
  display: flex; align-items: center; gap: 4px;
  padding-top: 12px; margin-top: auto;
  border-top: 1px solid var(--bp2-mist);
}
.bp2-post-stat {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 12px; color: var(--bp2-muted);
  padding: 4px 7px; border-radius: 6px; transition: background .15s, color .15s;
}
.bp2-post-stat svg { width: 13px; height: 13px; flex-shrink: 0; }
.bp2-post-read-link {
  margin-left: auto; flex-shrink: 0;
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11.5px; font-weight: 700; letter-spacing: .3px;
  color: #fff; background: var(--bp2-copper);
  padding: 5px 13px; border-radius: 20px;
  transition: background .17s, transform .15s;
  white-space: nowrap;
}
.bp2-post-read-link:hover { background: #ad541f; transform: translateX(2px); }
.bp2-load-more {
  width: 100%; padding: 13px; border-radius: 10px; border: 1.5px solid var(--bp2-border);
  background: var(--bp2-warm-white); font-size: 13px; font-weight: 600; color: var(--bp2-espresso);
  font-family: 'DM Sans', sans-serif; cursor: pointer; transition: all .2s; margin-top: 10px;
}
.bp2-load-more:hover { background: var(--bp2-espresso); color: var(--bp2-cream); border-color: var(--bp2-espresso); }

/* ── Collaborate ── */
.bp2-collab-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; }
.bp2-collab-card {
  background: var(--bp2-warm-white); border: 1.5px solid var(--bp2-border);
  border-radius: 12px; padding: 18px 16px; transition: all .2s;
  animation: bp2fadeUp .5s ease both; position: relative; overflow: hidden;
}
.bp2-collab-card:hover { border-color: rgba(196,98,45,0.3); transform: translateY(-2px); box-shadow: 0 6px 24px rgba(28,24,20,0.08); }
.bp2-collab-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; border-radius: 2px 2px 0 0; }
.bp2-collab-card.c1::before { background: var(--bp2-copper); }
.bp2-collab-card.c2::before { background: var(--bp2-teal); }
.bp2-collab-card.c3::before { background: var(--bp2-amber); }
.bp2-collab-icon { font-size: 26px; margin-bottom: 12px; }
.bp2-collab-title { font-family: 'Playfair Display', serif; font-size: 14px; font-weight: 700; color: var(--bp2-espresso); margin-bottom: 6px; }
.bp2-collab-desc { font-size: 12px; color: var(--bp2-muted); line-height: 1.6; margin-bottom: 14px; }
.bp2-collab-btn {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12px; font-weight: 600; color: var(--bp2-copper);
  border: 1.5px solid rgba(196,98,45,0.3); background: var(--bp2-copper-glow);
  padding: 6px 14px; border-radius: 5px; font-family: 'DM Sans', sans-serif;
  cursor: pointer; transition: all .17s; text-decoration: none;
}
.bp2-collab-btn:hover { background: var(--bp2-copper); color: #fff; border-color: var(--bp2-copper); }

/* ── Followers ── */
.bp2-follower-list { background: var(--bp2-warm-white); 
/* border: 1.5px solid var(--bp2-border); border-radius: 13px; */
overflow: hidden; }
.bp2-follower-item {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 18px; border-bottom: 1px solid var(--bp2-mist); transition: background .17s;
}
.bp2-follower-item:last-child { border-bottom: none; }
.bp2-follower-item:hover { background: var(--bp2-cream); }
.bp2-fa {
  width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; color: #fff;
  background: linear-gradient(135deg, var(--bp2-copper), var(--bp2-amber));
  text-decoration: none;
}
.bp2-fa img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.bp2-f-name { display: block; font-size: 13px; font-weight: 600; color: var(--bp2-espresso); text-decoration: none; }
.bp2-f-name:hover { color: var(--bp2-copper); }
.bp2-f-sub { font-size: 11px; color: var(--bp2-muted); margin-top: 1px; }

/* ── Sidebar ── */
.bp2-sidebar { display: flex; flex-direction: column; gap: 18px; position: sticky; top: 120px; }
.bp2-panel {
  background: var(--bp2-warm-white); border: 1.5px solid var(--bp2-border);
  border-radius: 13px; overflow: hidden; animation: bp2fadeUp .5s ease both;
}
.bp2-panel-head {
  padding: 14px 18px 12px; border-bottom: 1px solid var(--bp2-mist);
  display: flex; align-items: center; justify-content: space-between;
}
.bp2-panel-title { font-family: 'Playfair Display', serif; font-size: 14px; font-weight: 800; color: var(--bp2-espresso); }
.bp2-panel-link { font-size: 11px; font-weight: 600; color: var(--bp2-copper); }
.bp2-panel-body { padding: 16px 18px; }
.bp2-about-row { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 12px; font-size: 13px; }
.bp2-about-row svg { width: 14px; height: 14px; color: var(--bp2-muted); flex-shrink: 0; margin-top: 1px; }
.bp2-about-label { font-weight: 600; color: var(--bp2-espresso); min-width: 60px; flex-shrink: 0; }
.bp2-about-val { color: var(--bp2-muted); line-height: 1.5; }
.bp2-about-val a { color: var(--bp2-copper); }
.bp2-s-topics { display: flex; flex-wrap: wrap; gap: 7px; padding: 14px 18px; }
.bp2-s-topic {
  font-family: 'DM Mono', monospace; font-size: 10px; letter-spacing: 0.5px;
  padding: 5px 11px; border-radius: 4px; border: 1.5px solid var(--bp2-mist);
  color: var(--bp2-espresso); background: var(--bp2-cream); transition: all .17s; text-decoration: none;
}
.bp2-s-topic:hover { border-color: var(--bp2-copper); color: var(--bp2-copper); }
.bp2-stats-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 14px 18px; }
.bp2-s-stat { background: var(--bp2-cream); border-radius: 9px; padding: 12px 10px; border: 1.5px solid var(--bp2-mist); text-align: center; }
.bp2-s-stat-n { font-family: 'Playfair Display', serif; font-size: 20px; font-weight: 800; color: var(--bp2-espresso); line-height: 1; }
.bp2-s-stat-l { font-size: 10px; color: var(--bp2-muted); margin-top: 3px; }

/* ── Flash ── */
.bp2-flash { padding: 12px 24px; display: flex; align-items: center; gap: 10px; font-size: 14px; }
.bp2-flash--success { background: #d1fae5; color: #065f46; }
.bp2-flash--error   { background: #fee2e2; color: #991b1b; }
.bp2-flash--info    { background: #dbeafe; color: #1e40af; }

/* ── Empty state ── */
.bp2-empty { text-align: center; padding: 48px 24px; }
.bp2-empty-icon { font-size: 48px; margin-bottom: 16px; }
.bp2-empty-title { font-family: 'Playfair Display', serif; font-size: 20px; font-weight: 800; color: var(--bp2-espresso); margin-bottom: 8px; }
.bp2-empty-sub { font-size: 14px; color: var(--bp2-muted); }

/* ── Submit Post Popup ── */
.bp2-overlay {
  position: fixed; inset: 0; background: rgba(28,24,20,0.65);
  backdrop-filter: blur(8px); z-index: 1000;
  display: flex; align-items: center; justify-content: center; padding: 20px;
  opacity: 0; pointer-events: none; transition: opacity .25s;
}
.bp2-overlay.open { opacity: 1; pointer-events: all; }
.bp2-popup {
  background: var(--bp2-warm-white); border-radius: 18px; width: 100%;
  max-width: 560px; max-height: 90vh; overflow-y: auto; scrollbar-width: none;
  box-shadow: 0 30px 80px rgba(28,24,20,0.3);
  transform: translateY(20px) scale(0.97);
  transition: transform .3s cubic-bezier(0.34,1.56,0.64,1); position: relative;
}
.bp2-popup::-webkit-scrollbar { display: none; }
.bp2-overlay.open .bp2-popup { transform: translateY(0) scale(1); }
.bp2-popup-header {
  padding: 22px 24px 16px; border-bottom: 1px solid var(--bp2-mist);
  display: flex; align-items: center; gap: 14px; position: sticky; top: 0;
  background: var(--bp2-warm-white); z-index: 10; border-radius: 18px 18px 0 0;
}
.bp2-popup-icon { width: 40px; height: 40px; border-radius: 10px; background: var(--bp2-copper-glow); border: 1.5px solid rgba(196,98,45,0.2); display: flex; align-items: center; justify-content: center; font-size: 18px; flex-shrink: 0; }
.bp2-popup-title { font-family: 'Playfair Display', serif; font-size: 18px; font-weight: 800; color: var(--bp2-espresso); }
.bp2-popup-subtitle { font-size: 12px; color: var(--bp2-muted); margin-top: 2px; }
.bp2-popup-close { margin-left: auto; width: 32px; height: 32px; border-radius: 8px; border: 1.5px solid var(--bp2-mist); background: none; display: flex; align-items: center; justify-content: center; color: var(--bp2-muted); cursor: pointer; transition: all .17s; flex-shrink: 0; }
.bp2-popup-close:hover { background: var(--bp2-cream); color: var(--bp2-ink); }
.bp2-popup-close svg { width: 14px; height: 14px; }
.bp2-popup-body { padding: 22px 24px; }
.bp2-url-input-wrap { display: flex; gap: 10px; margin-bottom: 8px; }
.bp2-url-input {
  flex: 1; padding: 11px 14px; border-radius: 9px; border: 1.5px solid var(--bp2-border);
  background: var(--bp2-cream); font-size: 14px; font-family: 'DM Sans', sans-serif;
  color: var(--bp2-ink); outline: none; transition: all .2s;
}
.bp2-url-input:focus { border-color: var(--bp2-copper); box-shadow: 0 0 0 3px rgba(196,98,45,0.1); background: var(--bp2-warm-white); }
.bp2-url-input::placeholder { color: var(--bp2-muted); }
.bp2-fetch-btn {
  padding: 11px 20px; border-radius: 9px; background: var(--bp2-copper); color: #fff;
  border: none; font-size: 13px; font-weight: 700; font-family: 'DM Sans', sans-serif;
  cursor: pointer; transition: all .2s; white-space: nowrap; flex-shrink: 0;
}
.bp2-fetch-btn:hover { background: #ad541f; }
.bp2-fetch-btn.loading { opacity: 0.7; cursor: not-allowed; }
.bp2-url-hint { font-size: 12px; color: var(--bp2-muted); }
.bp2-fetch-loader { display: none; align-items: center; gap: 12px; padding: 16px; background: var(--bp2-cream); border-radius: 9px; border: 1.5px solid var(--bp2-mist); margin-bottom: 16px; }
.bp2-fetch-loader.show { display: flex; }
.bp2-fetch-spinner { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--bp2-mist); border-top-color: var(--bp2-copper); animation: bp2spin .7s linear infinite; flex-shrink: 0; }
@keyframes bp2spin { to { transform: rotate(360deg); } }
.bp2-fetch-loader-text { font-size: 13px; color: var(--bp2-muted); }
.bp2-preview-card { display: none; border: 1.5px solid var(--bp2-border); border-radius: 11px; overflow: hidden; margin-bottom: 20px; animation: bp2fadeUp .35s ease both; }
.bp2-preview-card.show { display: block; }
.bp2-preview-img { width: 100%; height: 160px; background: linear-gradient(135deg, #1a2e3d, #0d1f2e); display: flex; align-items: center; justify-content: center; font-size: 40px; position: relative; }
.bp2-preview-badge { position: absolute; top: 10px; right: 10px; background: rgba(28,24,20,0.65); backdrop-filter: blur(6px); color: #fff; font-size: 10px; font-weight: 600; padding: 3px 10px; border-radius: 4px; font-family: 'DM Mono', monospace; }
.bp2-preview-content { padding: 16px; }
.bp2-preview-title-input { font-family: 'Playfair Display', serif; font-size: 16px; font-weight: 700; color: var(--bp2-espresso); border: none; outline: none; background: none; width: 100%; margin-bottom: 8px; border-bottom: 1.5px dashed var(--bp2-mist); padding-bottom: 6px; }
.bp2-preview-title-input:focus { border-bottom-color: var(--bp2-copper); }
.bp2-preview-excerpt-input { font-size: 13px; color: var(--bp2-ink); opacity: 0.65; line-height: 1.65; border: none; outline: none; background: none; width: 100%; resize: none; font-family: 'DM Sans', sans-serif; min-height: 60px; }
.bp2-topic-selector-label { font-size: 12px; font-weight: 600; color: var(--bp2-espresso); margin-bottom: 8px; display: flex; align-items: center; gap: 6px; }
.bp2-req { font-family: 'DM Mono', monospace; font-size: 9px; color: var(--bp2-copper); background: var(--bp2-copper-glow); padding: 2px 6px; border-radius: 3px; }
.bp2-topic-selector { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 20px; }
.bp2-ts-chip { padding: 6px 13px; border-radius: 5px; border: 1.5px solid var(--bp2-border); background: var(--bp2-warm-white); font-size: 12px; font-weight: 500; color: var(--bp2-muted); transition: all .17s; font-family: 'DM Sans', sans-serif; cursor: pointer; }
.bp2-ts-chip:hover { border-color: var(--bp2-copper); color: var(--bp2-copper); }
.bp2-ts-chip.sel { background: var(--bp2-copper-glow); border-color: rgba(196,98,45,0.35); color: var(--bp2-copper); font-weight: 600; }
.bp2-popup-submit { width: 100%; padding: 13px; border-radius: 9px; background: var(--bp2-copper); color: #fff; border: none; font-size: 14px; font-weight: 700; font-family: 'DM Sans', sans-serif; cursor: pointer; transition: all .2s; display: flex; align-items: center; justify-content: center; gap: 8px; }
.bp2-popup-submit:hover { background: #ad541f; transform: translateY(-1px); box-shadow: 0 6px 22px rgba(196,98,45,0.3); }
.bp2-popup-submit:disabled { opacity: 0.5; cursor: not-allowed; transform: none; box-shadow: none; }
.bp2-success-state { display: none; text-align: center; padding: 10px 0 20px; animation: bp2fadeUp .4s ease both; }
.bp2-success-state.show { display: block; }
.bp2-success-icon { font-size: 52px; margin-bottom: 16px; }
.bp2-success-title { font-family: 'Playfair Display', serif; font-size: 22px; font-weight: 800; color: var(--bp2-espresso); margin-bottom: 8px; }
.bp2-success-sub { font-size: 14px; color: var(--bp2-muted); line-height: 1.6; margin-bottom: 22px; }
.bp2-success-close { padding: 11px 28px; border-radius: 8px; background: var(--bp2-espresso); color: var(--bp2-cream); border: none; font-size: 13px; font-weight: 700; font-family: 'DM Sans', sans-serif; cursor: pointer; transition: all .2s; }
.bp2-success-close:hover { background: var(--bp2-copper); }

/* ── Animations ── */
@keyframes bp2fadeUp { from { opacity:0; transform: translateY(12px); } to { opacity:1; transform:translateY(0); } }
.bp2-d1{animation-delay:.04s} .bp2-d2{animation-delay:.09s} .bp2-d3{animation-delay:.14s}
.bp2-d4{animation-delay:.19s} .bp2-d5{animation-delay:.24s}

/* ── Responsive ── */
@media (max-width: 1050px) {
  .bp2-page-body { grid-template-columns: 1fr; }
  .bp2-sidebar { position: static; }
}
@media (max-width: 860px) {
  .bp2-post-grid { grid-template-columns: 1fr; }
  .bp2-collab-grid { grid-template-columns: 1fr; }
  .bp2-hero-content { grid-template-columns: auto 1fr; gap: 20px; padding: 28px 20px 24px; }
  .bp2-hero-actions-panel { grid-column: 1 / -1; flex-direction: row; justify-content: flex-start; }
  .bp2-hero-mini-stats { display: none; }
  .bp2-shot { width: 160px; height: 112px; }
  .bp2-hds-grid { grid-template-columns: repeat(3, 1fr) !important; }
  .bp2-stats-inner { overflow-x: auto; gap: 20px; padding: 0 16px; }
  .bp2-stat-block { flex-shrink: 0; }
}
@media (max-width: 640px) {
  .bp2-hero-content { grid-template-columns: 1fr; text-align: center; gap: 16px; padding: 24px 16px 20px; }
  .bp2-shot-wrap { margin: 0 auto; }
  .bp2-shot { width: 140px; height: 98px; }
  .bp2-hero-info { padding-bottom: 12px; }
  .bp2-hero-meta { justify-content: center; }
  .bp2-hero-actions-panel { justify-content: center; }
  .bp2-hero-btns { justify-content: center; }
  .bp2-breadcrumb { justify-content: center; }
  .bp2-hero-topics { justify-content: center; }
  /* Compact domain stats: horizontal scroll strip */
  .bp2-hds-grid {
    display: flex !important; gap: 8px; overflow-x: auto; scrollbar-width: none;
    justify-content: center; flex-wrap: wrap;
  }
  .bp2-hds-grid::-webkit-scrollbar { display: none; }
  .bp2-hds-item { padding: 6px 10px; min-width: auto; text-align: center; }
  .bp2-hds-val { font-size: 13px; }
  .bp2-hds-label { font-size: 7px; }
  /* Hide icon-only buttons (bookmark, share); show mobile ellipsis instead */
  .bp2-btn-icon { display: none; }
  .bp2-mobile-more { display: block; }
  .bp2-mobile-only { display: flex; }
  /* Ellipsis dropdown opens upward so it doesn't go under stats strip */
  .bp2-more-menu { top: auto; bottom: calc(100% + 6px); }
  .bp2-page-body { padding: 20px 16px 60px; }
}

/* ── §55 Topic AJAX dropdown (blog submit popup) ── */
.bp2-topic-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  left: 0; right: 0;
  background: var(--bp2-warm-white);
  border: 1.5px solid var(--bp2-mist);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(44,31,20,.10);
  z-index: 200;
  max-height: 200px;
  overflow-y: auto;
}
.bp2-topic-dropdown.open { display: block; }
.bp2-tdd-item {
  padding: 9px 14px;
  font-size: 13px;
  color: var(--bp2-espresso);
  cursor: pointer;
  transition: background .12s;
}
.bp2-tdd-item:hover { background: var(--bp2-cream); }
.bp2-topic-chips { display: flex; flex-wrap: wrap; gap: 6px; min-height: 0; }

/* ── §56 Blog post interactions ── */
.bp2-like-btn {
  display: inline-flex; align-items: center; gap: 4px;
  background: none; border: none; cursor: pointer; padding: 4px 7px;
  border-radius: 6px; color: var(--bp2-muted); font-size: 12px;
  transition: color .15s, background .15s;
}
.bp2-like-btn svg { width: 13px; height: 13px; flex-shrink: 0; }
.bp2-like-btn:hover { color: var(--bp2-copper); background: rgba(196,98,45,.07); }
.bp2-like-btn.liked { color: var(--bp2-copper); }
.bp2-like-btn:disabled { opacity: .6; cursor: default; }
.bp2-comment-toggle {
  display: inline-flex; align-items: center; gap: 4px;
  background: none; border: none; cursor: pointer; padding: 4px 7px;
  border-radius: 6px; color: var(--bp2-muted); font-size: 12px;
  transition: color .15s, background .15s;
}
.bp2-comment-toggle svg { width: 14px; height: 14px; }
.bp2-comment-toggle:hover { color: var(--bp2-teal); background: rgba(58,138,130,.07); }
/* Comments panel */
.bp2-comments-panel {
  margin-top: 20px; border: 1.5px solid var(--bp2-mist);
  border-radius: 14px; background: var(--bp2-warm-white);
  overflow: hidden;
}
.bp2-comments-panel-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 18px; background: var(--bp2-cream);
  border-bottom: 1px solid var(--bp2-mist);
  font-size: 13px; font-weight: 700; color: var(--bp2-espresso);
}
.bp2-comments-close {
  background: none; border: none; cursor: pointer; font-size: 18px;
  color: var(--bp2-muted); line-height: 1; padding: 0 4px;
}
.bp2-comments-body { max-height: 420px; overflow-y: auto; padding: 8px 0; }
.bp2-comment {
  padding: 10px 18px; border-bottom: 1px solid var(--bp2-cream);
}
.bp2-comment:last-child { border-bottom: none; }
.bp2-comment-meta { font-size: 12px; margin-bottom: 4px; color: var(--bp2-espresso); }
.bp2-comment-body { font-size: 13px; color: var(--bp2-espresso); line-height: 1.6; }
.bp2-comment-form {
  padding: 12px 16px; border-top: 1px solid var(--bp2-mist); display: flex; gap: 8px;
}
.bp2-comment-textarea {
  flex: 1; padding: 8px 12px; border: 1.5px solid var(--bp2-mist);
  border-radius: 8px; font-size: 13px; font-family: inherit;
  background: var(--bp2-warm-white); color: var(--bp2-espresso);
  resize: none; outline: none;
}
.bp2-comment-textarea:focus { border-color: var(--bp2-copper); }
.bp2-comment-submit {
  padding: 8px 16px; background: var(--bp2-espresso); color: var(--bp2-warm-white);
  border: none; border-radius: 8px; font-size: 13px; font-weight: 600;
  cursor: pointer; white-space: nowrap; transition: background .15s;
}
.bp2-comment-submit:hover { background: var(--bp2-copper); }
.bp2-comment-submit:disabled { opacity: .6; cursor: default; }

/* ── §57 Blog post comments modal ── */
.bp2-cmt-overlay {
  position: fixed; inset: 0; z-index: 1100;
  background: rgba(44,31,20,.55); backdrop-filter: blur(3px);
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
  opacity: 0; pointer-events: none;
  transition: opacity .25s;
}
.bp2-cmt-overlay.open {
  opacity: 1; pointer-events: auto;
}
.bp2-cmt-modal {
  background: var(--bp2-warm-white); border-radius: 18px;
  width: 100%; max-width: 680px; max-height: 88vh;
  display: flex; flex-direction: column;
  box-shadow: 0 24px 80px rgba(44,31,20,.28);
  transform: translateY(24px) scale(.97);
  transition: transform .25s;
  overflow: hidden;
}
.bp2-cmt-overlay.open .bp2-cmt-modal {
  transform: translateY(0) scale(1);
}
.bp2-cmt-modal-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 22px 16px;
  border-bottom: 1.5px solid var(--bp2-mist);
  background: var(--bp2-cream); flex-shrink: 0;
}
.bp2-cmt-modal-title {
  font-family: 'Playfair Display', serif; font-size: 16px; font-weight: 800;
  color: var(--bp2-espresso); line-height: 1.3;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  flex: 1; margin-right: 12px;
}
.bp2-cmt-modal-body {
  flex: 1; overflow-y: auto; padding: 0;
}
.bp2-cmt-loading {
  padding: 32px 24px; text-align: center;
  color: var(--bp2-muted); font-size: 13px;
}
/* Adapt shared comment CSS to fit inside modal */
.bp2-cmt-modal-body .bp2-cmt-header {
  padding: 14px 22px 10px;
  border-bottom: 1px solid var(--bp2-mist);
}
.bp2-cmt-modal-body .bp2-cmt-count {
  font-family: 'DM Sans', sans-serif; font-size: 13px; font-weight: 700;
  color: var(--bp2-espresso); margin: 0;
}
.bp2-cmt-modal-body .bp2-cmt-composer {
  padding: 14px 22px; border-bottom: 1.5px solid var(--bp2-mist);
}
.bp2-cmt-modal-body .bp2-cmt-thread {
  padding: 12px 22px 20px;
}
/* Comment login prompt */
.bp2-cmt-modal-body .comment-login-prompt {
  font-size: 13px; color: var(--bp2-muted); margin: 0;
}
.bp2-cmt-modal-body .comment-login-prompt a {
  color: var(--bp2-copper); font-weight: 600;
}
/* Ensure composer row wraps nicely in modal */
.bp2-cmt-modal-body .comment-composer__row {
  display: flex; gap: 10px; align-items: flex-start;
}
.bp2-cmt-modal-body .comment-textarea {
  width: 100%; box-sizing: border-box;
}
@media (max-width: 600px) {
  .bp2-cmt-modal { max-height: 92vh; border-radius: 14px; }
  .bp2-cmt-modal-header { padding: 14px 16px 12px; }
  .bp2-cmt-modal-body .bp2-cmt-composer,
  .bp2-cmt-modal-body .bp2-cmt-thread,
  .bp2-cmt-modal-body .bp2-cmt-header { padding-left: 14px; padding-right: 14px; }
}


/* ── §53: Blog Directory feed card (hf-bdcard-*) ─────────── */
.hf-card.type-blog-dir {}

.hf-bdcard-hero {
  width: 100%;
  aspect-ratio: 16/9;
  overflow: hidden;
  border-radius: 8px;
  margin: 0 0 12px;
  background: var(--hf-dark-2, #1a1a2e);
}
.hf-bdcard-hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.3s ease;
}
.hf-bdcard-hero:hover img { transform: scale(1.02); }
.hf-bdcard-hero-grad {
  display: flex;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}
.hf-bdcard-hero-initials {
  font-size: 2.5rem;
  font-weight: 700;
  color: rgba(255,255,255,0.6);
  font-family: var(--font-serif, serif);
}
.hf-bdcard-meta { padding: 0 16px 4px; }
.hf-bdcard-name-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
}
.hf-bdcard-name {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--ink, #1a1a2e);
  text-decoration: none;
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hf-bdcard-name:hover { color: var(--accent, #e8553d); }
.hf-bdcard-follow-btn {
  flex-shrink: 0;
  padding: 4px 14px;
  font-size: 0.78rem;
  font-weight: 600;
  border-radius: 20px;
  border: 1.5px solid var(--accent, #e8553d);
  background: transparent;
  color: var(--accent, #e8553d);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.hf-bdcard-follow-btn:hover,
.hf-bdcard-follow-btn.active {
  background: var(--accent, #e8553d);
  color: #fff;
}
.hf-bdcard-follow-btn.active:hover {
  background: #c0392b;
  border-color: #c0392b;
}
.hf-bdcard-desc {
  font-size: 0.875rem;
  color: var(--ink-muted, #555);
  line-height: 1.5;
  margin: 0 0 8px;
}
.hf-bdcard-stats {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}
.hf-bdcard-stat {
  font-size: 0.78rem;
  color: var(--ink-muted, #666);
}
.hf-bdcard-stat strong { color: var(--ink, #1a1a2e); }


/* ═══════════════════════════════════════════════════════════════════════════
   §53 · ANALYTICS DASHBOARD  (an-* namespace)
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Design tokens ── */
.an-page, .an-page * {
  --copper:     #C4622D;
  --espresso:   #2C1F14;
  --amber:      #E8A042;
  --sage:       #5C7A5C;
  --rose:       #C45A6A;
  --mist:       #E8E2D9;
  --warm-white: #FDFAF6;
  --cream:      #F7F3ED;
  --text-muted: rgba(44,31,20,0.45);
  --border:     rgba(44,31,20,.12);
  --ink:        #1A1612;
  --teal:       #3A8A82;
  --violet:     #7C5CBF;
}

/* ── Page layout ── */
.an-page {
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 32px 80px;
  width:100%;
}

/* ── Page hero banner ── */
.an-page-hero {
  position: relative;
  padding: 44px 0 36px;
  margin-bottom: 36px;
}
.an-page-hero::before {
  content: '';
  position: absolute;
  inset: -1px -32px 0;
  background:
    radial-gradient(ellipse 60% 120% at 10% 60%, rgba(196,98,45,.07) 0%, transparent 65%),
    radial-gradient(ellipse 40% 80%  at 90% 20%, rgba(58,138,130,.05) 0%, transparent 65%);
  pointer-events: none;
}
.an-page-hero::after {
  content: '';
  position: absolute;
  bottom: 0; left: -32px; right: -32px;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(44,31,20,.12) 30%, rgba(44,31,20,.12) 70%, transparent 100%);
}

/* ── Page header ── */
.an-page-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  position: relative;
  z-index: 1;
}
.an-page-eyebrow {
  font-family: 'DM Mono', monospace;
  font-size: 10px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--copper);
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}
.an-page-eyebrow::before {
  content: '';
  width: 24px;
  height: 1.5px;
  background: linear-gradient(90deg, var(--copper), transparent);
}
.an-page-title {
  font-family: 'Playfair Display', serif;
  font-size: clamp(28px, 3.5vw, 42px);
  font-weight: 900;
  color: var(--espresso);
  letter-spacing: -2px;
  line-height: 1;
}
.an-page-title em {
  font-style: italic;
  background: linear-gradient(135deg, var(--copper) 20%, #E8855A 80%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.an-page-subtitle {
  font-size: 13px;
  color: var(--text-muted);
  margin-top: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.an-live-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #16a34a;
  box-shadow: 0 0 0 3px rgba(22,163,74,.2);
  animation: anLivePulse 2s ease-in-out infinite;
  flex-shrink: 0;
}

/* ── Header controls ── */
.an-header-controls {
  display: flex;
  align-items: center;
  gap: 10px;
}
.an-range-tabs {
  display: flex;
  background: rgba(255,255,255,.75);
  border: 1.5px solid rgba(44,31,20,.12);
  border-radius: 10px;
  padding: 3px;
}
.an-range-tab {
  padding: 8px 18px;
  border-radius: 7px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  color: var(--text-muted);
  font-family: 'DM Sans', sans-serif;
  border: none;
  background: none;
  transition: all .2s;
  letter-spacing: .3px;
}
.an-range-tab.active {
  background: linear-gradient(135deg, #C4622D, #E8855A);
  color: #fff;
  box-shadow: 0 2px 10px rgba(196,98,45,.4);
}
.an-export-btn {
  padding: 9px 18px;
  border-radius: 9px;
  font-size: 13px;
  font-weight: 600;
  background: rgba(255,255,255,.75);
  color: var(--ink);
  border: 1.5px solid rgba(44,31,20,.12);
  cursor: pointer;
  font-family: 'DM Sans', sans-serif;
  transition: all .2s;
  display: flex;
  align-items: center;
  gap: 7px;
}
.an-export-btn:hover {
  border-color: var(--copper);
  color: var(--copper);
  box-shadow: 0 4px 14px rgba(196,98,45,.15);
}

/* ── Section gap + headers ── */
.an-section-gap { margin-bottom: 32px; }
.an-section-hdr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(44,31,20,.09);
}
.an-section-hdr-title {
  font-family: 'Playfair Display', serif;
  font-size: 19px;
  font-weight: 700;
  color: var(--espresso);
  display: flex;
  align-items: center;
  gap: 10px;
}
.an-section-hdr-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
  animation: anDotPulse 2.4s ease-in-out infinite;
}
.an-section-see-all {
  font-size: 12px;
  font-weight: 600;
  color: var(--copper);
  text-decoration: none;
  transition: opacity .2s;
}
.an-section-see-all:hover { opacity: .7; }

/* ── Overview strip ── */
.an-overview-strip {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 14px;
  margin-bottom: 32px;
}
.an-ov-card {
  border-radius: 16px;
  padding: 20px 18px 16px;
  position: relative;
  overflow: hidden;
  transition: transform .25s cubic-bezier(.34,1.56,.64,1), box-shadow .25s;
  animation: anCardIn .5s ease both;
  border: 1px solid transparent;
}
.an-ov-card:hover { transform: translateY(-4px) scale(1.01); }
/* top accent bar */
.an-ov-card::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  border-radius: 16px 16px 0 0;
}
/* inner shine */
.an-ov-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 50%;
  background: linear-gradient(180deg, rgba(255,255,255,.28) 0%, transparent 100%);
  pointer-events: none;
  border-radius: 16px 16px 0 0;
}
/* per-card backgrounds + shadows */
.an-ov-card.c1 { background: linear-gradient(145deg, rgba(196,98,45,.11) 0%, rgba(196,98,45,.04) 45%, var(--warm-white) 70%);  border-color: rgba(196,98,45,.22);  box-shadow: 0 2px 8px rgba(196,98,45,.09), 0 8px 24px rgba(196,98,45,.06), inset 0 1px 0 rgba(255,255,255,.7); }
.an-ov-card.c2 { background: linear-gradient(145deg, rgba(58,138,130,.11) 0%, rgba(58,138,130,.04) 45%, var(--warm-white) 70%); border-color: rgba(58,138,130,.22); box-shadow: 0 2px 8px rgba(58,138,130,.09), 0 8px 24px rgba(58,138,130,.06), inset 0 1px 0 rgba(255,255,255,.7); }
.an-ov-card.c3 { background: linear-gradient(145deg, rgba(232,160,66,.11) 0%, rgba(232,160,66,.04) 45%, var(--warm-white) 70%); border-color: rgba(232,160,66,.22); box-shadow: 0 2px 8px rgba(232,160,66,.09), 0 8px 24px rgba(232,160,66,.06), inset 0 1px 0 rgba(255,255,255,.7); }
.an-ov-card.c4 { background: linear-gradient(145deg, rgba(92,122,92,.11) 0%, rgba(92,122,92,.04) 45%, var(--warm-white) 70%);   border-color: rgba(92,122,92,.22);  box-shadow: 0 2px 8px rgba(92,122,92,.09),  0 8px 24px rgba(92,122,92,.06),  inset 0 1px 0 rgba(255,255,255,.7); }
.an-ov-card.c5 { background: linear-gradient(145deg, rgba(124,92,191,.11) 0%, rgba(124,92,191,.04) 45%, var(--warm-white) 70%); border-color: rgba(124,92,191,.22); box-shadow: 0 2px 8px rgba(124,92,191,.09), 0 8px 24px rgba(124,92,191,.06), inset 0 1px 0 rgba(255,255,255,.7); }
.an-ov-card.c6 { background: linear-gradient(145deg, rgba(196,90,106,.11) 0%, rgba(196,90,106,.04) 45%, var(--warm-white) 70%); border-color: rgba(196,90,106,.22); box-shadow: 0 2px 8px rgba(196,90,106,.09), 0 8px 24px rgba(196,90,106,.06), inset 0 1px 0 rgba(255,255,255,.7); }
.an-ov-card.c1::after { background: linear-gradient(90deg, #C4622D, #E8855A); }
.an-ov-card.c2::after { background: linear-gradient(90deg, #3A8A82, #5AB8B0); }
.an-ov-card.c3::after { background: linear-gradient(90deg, #E8A042, #F5C97A); }
.an-ov-card.c4::after { background: linear-gradient(90deg, #5C7A5C, #8AAE8A); }
.an-ov-card.c5::after { background: linear-gradient(90deg, #7C5CBF, #A689D8); }
.an-ov-card.c6::after { background: linear-gradient(90deg, #C45A6A, #E08090); }
/* hover glow */
.an-ov-card.c1:hover { box-shadow: 0 8px 24px rgba(196,98,45,.22),  0 20px 48px rgba(196,98,45,.12),  inset 0 1px 0 rgba(255,255,255,.85); border-color: rgba(196,98,45,.35); }
.an-ov-card.c2:hover { box-shadow: 0 8px 24px rgba(58,138,130,.22),  0 20px 48px rgba(58,138,130,.12),  inset 0 1px 0 rgba(255,255,255,.85); border-color: rgba(58,138,130,.35); }
.an-ov-card.c3:hover { box-shadow: 0 8px 24px rgba(232,160,66,.22),  0 20px 48px rgba(232,160,66,.12),  inset 0 1px 0 rgba(255,255,255,.85); border-color: rgba(232,160,66,.35); }
.an-ov-card.c4:hover { box-shadow: 0 8px 24px rgba(92,122,92,.22),   0 20px 48px rgba(92,122,92,.12),   inset 0 1px 0 rgba(255,255,255,.85); border-color: rgba(92,122,92,.35); }
.an-ov-card.c5:hover { box-shadow: 0 8px 24px rgba(124,92,191,.22),  0 20px 48px rgba(124,92,191,.12),  inset 0 1px 0 rgba(255,255,255,.85); border-color: rgba(124,92,191,.35); }
.an-ov-card.c6:hover { box-shadow: 0 8px 24px rgba(196,90,106,.22),  0 20px 48px rgba(196,90,106,.12),  inset 0 1px 0 rgba(255,255,255,.85); border-color: rgba(196,90,106,.35); }
/* icons */
.an-ov-icon { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 12px; margin-bottom: 14px; }
.an-ov-card.c1 .an-ov-icon { background: rgba(196,98,45,.16);  color: #C4622D; box-shadow: 0 4px 14px rgba(196,98,45,.25); }
.an-ov-card.c2 .an-ov-icon { background: rgba(58,138,130,.16); color: #3A8A82; box-shadow: 0 4px 14px rgba(58,138,130,.25); }
.an-ov-card.c3 .an-ov-icon { background: rgba(232,160,66,.16); color: #C8841A; box-shadow: 0 4px 14px rgba(232,160,66,.25); }
.an-ov-card.c4 .an-ov-icon { background: rgba(92,122,92,.16);  color: #4A6B4A; box-shadow: 0 4px 14px rgba(92,122,92,.25); }
.an-ov-card.c5 .an-ov-icon { background: rgba(124,92,191,.16); color: #7C5CBF; box-shadow: 0 4px 14px rgba(124,92,191,.25); }
.an-ov-card.c6 .an-ov-icon { background: rgba(196,90,106,.16); color: #C45A6A; box-shadow: 0 4px 14px rgba(196,90,106,.25); }
/* numbers */
.an-ov-num { font-family: 'Playfair Display', serif; font-size: clamp(24px, 3.5vw, 32px); font-weight: 900; letter-spacing: -1px; line-height: 1; }
.an-ov-card.c1 .an-ov-num { color: #C4622D; }
.an-ov-card.c2 .an-ov-num { color: #3A8A82; }
.an-ov-card.c3 .an-ov-num { color: #C8841A; }
.an-ov-card.c4 .an-ov-num { color: #4A6B4A; }
.an-ov-card.c5 .an-ov-num { color: #7C5CBF; }
.an-ov-card.c6 .an-ov-num { color: #C45A6A; }
.an-ov-label { font-size: 11px; font-weight: 500; color: var(--text-muted); margin-top: 5px; margin-bottom: 10px; letter-spacing: .2px; }
.an-ov-trend { font-family: 'DM Mono', monospace; font-size: 10px; font-weight: 600; display: inline-flex; align-items: center; gap: 3px; padding: 3px 9px; border-radius: 20px; }
.an-ov-trend.up   { color: #16a34a; background: rgba(22,163,74,.12); }
.an-ov-trend.down { color: #dc2626; background: rgba(220,38,38,.1); }
.an-ov-trend.same { color: #92400e; background: rgba(232,160,66,.15); }

/* ── Main 2-col grid ── */
.an-main-grid {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 20px;
  align-items: start;
}

/* ── Panel ── */
.an-panel {
  background: var(--warm-white);
  border: 1px solid rgba(44,31,20,.1);
  border-radius: 16px;
  overflow: hidden;
  animation: anCardIn .5s ease both;
  box-shadow: 0 1px 3px rgba(44,31,20,.05), 0 6px 20px rgba(44,31,20,.05), inset 0 1px 0 rgba(255,255,255,.9);
  transition: box-shadow .25s, transform .25s;
}
.an-panel:hover {
  box-shadow: 0 4px 10px rgba(44,31,20,.07), 0 16px 40px rgba(44,31,20,.08), inset 0 1px 0 rgba(255,255,255,.95);
  transform: translateY(-2px);
}
.an-panel-head {
  padding: 18px 24px 15px;
  border-bottom: 1px solid rgba(44,31,20,.07);
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: linear-gradient(180deg, rgba(255,255,255,.6) 0%, transparent 100%);
}
.an-panel-title {
  font-family: 'Playfair Display', serif;
  font-size: 15px;
  font-weight: 700;
  color: var(--espresso);
  display: flex;
  align-items: center;
  gap: 9px;
}
.an-panel-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  display: inline-block;
  animation: anDotPulse 2.4s ease-in-out infinite;
}
.an-panel-sub {
  font-family: 'DM Mono', monospace;
  font-size: 10px;
  color: var(--text-muted);
}
.an-panel-actions {
  display: flex;
  gap: 3px;
  align-items: center;
  flex-wrap: wrap;
  background: rgba(44,31,20,.05);
  padding: 3px;
  border-radius: 8px;
}
.an-panel-tab {
  font-size: 11px;
  font-weight: 600;
  padding: 5px 12px;
  border-radius: 5px;
  border: none;
  background: none;
  cursor: pointer;
  color: var(--text-muted);
  font-family: 'DM Sans', sans-serif;
  transition: all .18s;
}
.an-panel-tab.on { background: linear-gradient(135deg, #C4622D, #E8855A); color: #fff; box-shadow: 0 2px 8px rgba(196,98,45,.35); }
.an-panel-tab:hover:not(.on) { background: rgba(255,255,255,.8); color: var(--ink); }
.an-panel-body { padding: 20px 24px; }

/* ── Traffic chart ── */
.an-chart-legend { display: flex; gap: 18px; margin-bottom: 14px; }
.an-cleg { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-muted); }
.an-cleg-dot { width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; }
.an-traffic-chart {
  height: 220px;
  display: flex;
  align-items: flex-end;
  gap: 4px;
  padding-top: 20px;
  box-sizing: border-box;
  position: relative;
}
.an-traffic-chart::before {
  content: '';
  position: absolute;
  inset: 20px 0 14px;
  background: repeating-linear-gradient(180deg, rgba(44,31,20,.04) 0px, rgba(44,31,20,.04) 1px, transparent 1px, transparent 25%);
  pointer-events: none;
}
.an-tc-col     { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 0; position: relative; z-index: 1; }
.an-tc-bars    { display: flex; align-items: flex-end; gap: 2px; width: 100%; flex-shrink: 0; }
.an-tc-bar-wrap { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; position: relative; }
.an-tc-bar     { width: 100%; border-radius: 3px 3px 0 0; cursor: pointer; transition: opacity .15s, transform .15s; opacity: .82; }
.an-tc-bar:hover { opacity: 1; transform: scaleY(1.04); transform-origin: bottom; }
.an-tc-val     { position: absolute; top: -13px; left: 50%; transform: translateX(-50%); font-family: 'DM Mono', monospace; font-size: 7.5px; color: var(--text-muted); white-space: nowrap; pointer-events: none; line-height: 1; }
.an-tc-lbl     { font-family: 'DM Mono', monospace; font-size: 9px; color: var(--text-muted); height: 14px; display: flex; align-items: center; justify-content: center; overflow: hidden; flex-shrink: 0; width: 100%; margin-top: 3px; }

/* ── Audience panel ── */
.an-audience-body { padding: 16px 24px; }
.an-aud-big {
  text-align: center;
  padding: 12px 0 20px;
  border-bottom: 1px solid rgba(44,31,20,.07);
  margin-bottom: 20px;
}
.an-aud-ring { position: relative; display: inline-block; width: 110px; height: 110px; margin-bottom: 10px; }
.an-aud-ring-inner {
  position: absolute;
  inset: 16px;
  background: var(--warm-white);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  box-shadow: inset 0 2px 8px rgba(44,31,20,.06);
}
.an-aud-ring-num { font-family: 'Playfair Display', serif; font-size: 22px; font-weight: 800; color: var(--espresso); line-height: 1; }
.an-aud-ring-lbl { font-size: 9px; color: var(--text-muted); font-family: 'DM Mono', monospace; letter-spacing: 1px; text-transform: uppercase; margin-top: 2px; }
.an-aud-stats { display: flex; justify-content: center; gap: 28px; }
.an-aud-stat      { text-align: center; }
.an-aud-stat-num  { font-family: 'Playfair Display', serif; font-size: 22px; font-weight: 700; color: var(--espresso); }
.an-aud-stat-lbl  { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
.an-aud-stat-change { font-size: 10px; font-family: 'DM Mono', monospace; margin-top: 2px; }
.an-aud-stat-change.up   { color: #16a34a; }
.an-aud-stat-change.down { color: #dc2626; }
.an-aud-breakdown-label { font-family: 'DM Mono', monospace; font-size: 9px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--text-muted); margin-bottom: 12px; }
.an-aud-breakdown { display: flex; flex-direction: column; gap: 10px; }
.an-aud-row       { display: flex; align-items: center; gap: 10px; }
.an-aud-row-label { font-size: 12px; color: var(--ink); min-width: 80px; }
.an-aud-row-bar-wrap { flex: 1; height: 6px; background: rgba(44,31,20,.08); border-radius: 3px; overflow: hidden; }
.an-aud-row-bar   { height: 100%; border-radius: 3px; transition: width .6s ease; }
.an-aud-row-val   { font-family: 'DM Mono', monospace; font-size: 11px; color: var(--text-muted); min-width: 36px; text-align: right; }

/* ── Engagement grid ── */
.an-eng-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
.an-eng-card {
  border-radius: 16px;
  padding: 20px 18px 16px;
  animation: anCardIn .5s ease both;
  transition: transform .25s cubic-bezier(.34,1.56,.64,1), box-shadow .25s;
  border: 1px solid transparent;
  border-left-width: 3px;
  position: relative;
  overflow: hidden;
}
.an-eng-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 40%;
  background: linear-gradient(180deg, rgba(255,255,255,.28) 0%, transparent 100%);
  pointer-events: none;
}
.an-eng-card:hover { transform: translateY(-4px) scale(1.01); }
.an-eng-card.d1 { background: linear-gradient(145deg, rgba(196,98,45,.1) 0%, var(--warm-white) 60%);  border-color: rgba(196,98,45,.2);  border-left-color: #C4622D; box-shadow: 0 2px 8px rgba(196,98,45,.09), 0 8px 24px rgba(196,98,45,.06), inset 0 1px 0 rgba(255,255,255,.7); }
.an-eng-card.d2 { background: linear-gradient(145deg, rgba(124,92,191,.1) 0%, var(--warm-white) 60%); border-color: rgba(124,92,191,.2); border-left-color: #7C5CBF; box-shadow: 0 2px 8px rgba(124,92,191,.09), 0 8px 24px rgba(124,92,191,.06), inset 0 1px 0 rgba(255,255,255,.7); }
.an-eng-card.d3 { background: linear-gradient(145deg, rgba(58,138,130,.1) 0%, var(--warm-white) 60%);  border-color: rgba(58,138,130,.2);  border-left-color: #3A8A82; box-shadow: 0 2px 8px rgba(58,138,130,.09), 0 8px 24px rgba(58,138,130,.06), inset 0 1px 0 rgba(255,255,255,.7); }
.an-eng-card.d4 { background: linear-gradient(145deg, rgba(196,90,106,.1) 0%, var(--warm-white) 60%); border-color: rgba(196,90,106,.2); border-left-color: #C45A6A; box-shadow: 0 2px 8px rgba(196,90,106,.09), 0 8px 24px rgba(196,90,106,.06), inset 0 1px 0 rgba(255,255,255,.7); }
.an-eng-card.d1:hover { box-shadow: 0 8px 24px rgba(196,98,45,.2),  0 20px 48px rgba(196,98,45,.1);  border-color: rgba(196,98,45,.35); }
.an-eng-card.d2:hover { box-shadow: 0 8px 24px rgba(124,92,191,.2), 0 20px 48px rgba(124,92,191,.1); border-color: rgba(124,92,191,.35); }
.an-eng-card.d3:hover { box-shadow: 0 8px 24px rgba(58,138,130,.2), 0 20px 48px rgba(58,138,130,.1); border-color: rgba(58,138,130,.35); }
.an-eng-card.d4:hover { box-shadow: 0 8px 24px rgba(196,90,106,.2), 0 20px 48px rgba(196,90,106,.1); border-color: rgba(196,90,106,.35); }
.an-eng-icon { display: flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 14px; margin-bottom: 14px; }
.an-eng-card.d1 .an-eng-icon { background: rgba(196,98,45,.15);  color: #C4622D; box-shadow: 0 4px 14px rgba(196,98,45,.2); }
.an-eng-card.d2 .an-eng-icon { background: rgba(124,92,191,.15); color: #7C5CBF; box-shadow: 0 4px 14px rgba(124,92,191,.2); }
.an-eng-card.d3 .an-eng-icon { background: rgba(58,138,130,.15); color: #3A8A82; box-shadow: 0 4px 14px rgba(58,138,130,.2); }
.an-eng-card.d4 .an-eng-icon { background: rgba(196,90,106,.15); color: #C45A6A; box-shadow: 0 4px 14px rgba(196,90,106,.2); }
.an-eng-num { font-family: 'Playfair Display', serif; font-size: clamp(22px, 3.2vw, 30px); font-weight: 900; letter-spacing: -1px; line-height: 1; }
.an-eng-card.d1 .an-eng-num { color: #C4622D; }
.an-eng-card.d2 .an-eng-num { color: #7C5CBF; }
.an-eng-card.d3 .an-eng-num { color: #3A8A82; }
.an-eng-card.d4 .an-eng-num { color: #C45A6A; }
.an-eng-label { font-size: 11.5px; color: var(--text-muted); margin-top: 5px; font-weight: 500; }
.an-eng-trend { margin-top: 12px; display: flex; align-items: center; justify-content: space-between; padding-top: 10px; border-top: 1px solid rgba(44,31,20,.06); }
.an-eng-change { font-family: 'DM Mono', monospace; font-size: 10px; font-weight: 600; padding: 3px 8px; border-radius: 20px; }
.an-eng-change.up   { color: #16a34a; background: rgba(22,163,74,.12); }
.an-eng-change.down { color: #dc2626; background: rgba(220,38,38,.08); }
.an-eng-mini { display: flex; align-items: flex-end; gap: 2px; height: 22px; }

/* ── Writeups table ── */
.an-wu-table { width: 100%; border-collapse: collapse; }
.an-wu-table th { font-family: 'DM Mono', monospace; font-size: 9px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--text-muted); padding: 12px 14px 12px; text-align: left; font-weight: 500; border-bottom: 2px solid rgba(44,31,20,.08); }
.an-wu-table th:first-child { padding-left: 0; }
.an-wu-table td { padding: 13px 12px; border-top: 1px solid rgba(44,31,20,.06); font-size: 13px; color: var(--text-muted); vertical-align: middle; }
.an-wu-table td:first-child { padding-left: 0; }
.an-wu-table tr:hover td { background: rgba(196,98,45,.025); }
.an-wu-title { font-size: 13px; font-weight: 600; color: var(--espresso); line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; max-width: 280px; text-decoration: none; transition: color .15s; }
.an-wu-title:hover { color: var(--copper); }
.an-wu-topic { font-family: 'DM Mono', monospace; font-size: 9px; letter-spacing: .5px; text-transform: uppercase; color: var(--teal); background: rgba(58,138,130,.1); padding: 2px 7px; border-radius: 20px; margin-top: 4px; display: inline-block; }
.an-wu-num { font-family: 'Playfair Display', serif; font-size: 17px; font-weight: 700; color: var(--espresso); }
.an-wu-sub { font-size: 10px; color: var(--text-muted); }
.an-wu-sparkline { display: flex; align-items: flex-end; gap: 1px; height: 28px; }
.an-empty-cell { text-align: center; padding: 2rem !important; color: var(--text-muted); }

/* ── Blogs grid ── */
.an-blogs-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.an-blog-card {
  background: var(--warm-white);
  border: 1px solid rgba(44,31,20,.1);
  border-radius: 16px;
  overflow: hidden;
  animation: anCardIn .5s ease both;
  transition: transform .25s, box-shadow .25s;
  box-shadow: 0 1px 3px rgba(44,31,20,.05), 0 4px 16px rgba(44,31,20,.04);
}
.an-blog-card:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(44,31,20,.1), 0 20px 48px rgba(44,31,20,.07); }
.an-blog-card-header { padding: 18px 18px 14px; border-bottom: 1px solid rgba(44,31,20,.07); }
.an-blog-card-top { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 14px; }
.an-blog-thumb { width: 46px; height: 46px; border-radius: 10px; background: var(--cream); flex-shrink: 0; display: flex; align-items: center; justify-content: center; overflow: hidden; color: var(--espresso); opacity: .6; border: 1px solid rgba(44,31,20,.1); }
.an-blog-thumb img { width: 46px; height: 46px; object-fit: cover; border-radius: 10px; }
.an-blog-name { font-family: 'Playfair Display', serif; font-size: 14px; font-weight: 700; color: var(--espresso); line-height: 1.2; text-decoration: none; display: block; }
.an-blog-name:hover { color: var(--copper); }
.an-blog-posts-count { font-size: 11px; color: var(--text-muted); margin-top: 3px; }
.an-blog-followers-badge { margin-left: auto; display: flex; align-items: center; gap: 4px; font-family: 'DM Mono', monospace; font-size: 10px; color: var(--copper); background: rgba(196,98,45,.1); border: 1px solid rgba(196,98,45,.2); padding: 4px 9px; border-radius: 20px; white-space: nowrap; }
.an-blog-stats { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
.an-blog-stat { text-align: center; background: rgba(44,31,20,.03); border-radius: 8px; padding: 9px 6px; border: 1px solid rgba(44,31,20,.06); }
.an-blog-stat-num { font-family: 'Playfair Display', serif; font-size: 17px; font-weight: 700; color: var(--espresso); line-height: 1; }
.an-blog-stat-lbl { font-size: 9px; color: var(--text-muted); margin-top: 2px; text-transform: uppercase; letter-spacing: .5px; font-family: 'DM Mono', monospace; }
.an-blog-card-posts { padding: 12px 18px; }
.an-blog-posts-subheader { font-family: 'DM Mono', monospace; font-size: 9px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--text-muted); margin-bottom: 8px; }
.an-blog-post-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid rgba(44,31,20,.06); }
.an-blog-post-row:last-child { border-bottom: none; }
.an-blog-post-title  { font-size: 12px; font-weight: 500; color: var(--ink); flex: 1; line-height: 1.4; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.an-blog-post-clicks { font-family: 'DM Mono', monospace; font-size: 10px; color: var(--text-muted); flex-shrink: 0; }
.an-blog-post-likes  { font-family: 'DM Mono', monospace; font-size: 10px; color: var(--copper); flex-shrink: 0; }

/* ── Top content grid ── */
.an-top-content-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.an-top-sub-label { font-family: 'DM Mono', monospace; font-size: 9px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--text-muted); margin-bottom: 14px; padding-bottom: 8px; border-bottom: 1px solid rgba(44,31,20,.08); }
.an-top-list { display: flex; flex-direction: column; }
.an-top-item { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid rgba(44,31,20,.06); }
.an-top-item:last-child { border-bottom: none; }
.an-top-rank { font-family: 'Playfair Display', serif; font-size: 20px; font-weight: 800; color: rgba(44,31,20,.12); width: 28px; flex-shrink: 0; text-align: center; line-height: 1; }
.an-top-rank.medal-1 { color: var(--amber); }
.an-top-rank.medal-2 { color: #94a3b8; }
.an-top-rank.medal-3 { color: #b87333; }
.an-top-item-body   { flex: 1; min-width: 0; }
.an-top-item-title  { font-size: 13px; font-weight: 600; color: var(--espresso); line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-decoration: none; transition: color .15s; }
.an-top-item-title:hover { color: var(--copper); }
.an-top-item-meta { font-size: 11px; color: var(--text-muted); margin-top: 3px; }
.an-top-item-val  { text-align: right; flex-shrink: 0; }
.an-top-val-num   { font-family: 'Playfair Display', serif; font-size: 16px; font-weight: 700; color: var(--espresso, #2C1F14); }
.an-top-val-lbl   { font-size: 10px; color: var(--text-muted, rgba(26,22,18,.42)); }
.an-empty-inline  { font-size: 13px; color: var(--text-muted, rgba(26,22,18,.42)); padding: 1rem 0; }

/* ── Reader feedback ── */
.an-feedback-empty { text-align: center; padding: 2rem; color: var(--text-muted); font-size: 13px; }
.an-review-list { display: flex; flex-direction: column; gap: 12px; }
.an-review-item { padding: 14px 16px; background: rgba(44,31,20,.02); border-radius: 12px; border: 1px solid rgba(44,31,20,.07); transition: border-color .2s, box-shadow .2s; }
.an-review-item:hover { border-color: rgba(196,98,45,.2); box-shadow: 0 4px 16px rgba(196,98,45,.06); }
.an-review-item-top { display: flex; align-items: center; gap: 10px; margin-bottom: 9px; }
.an-reviewer-avatar { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; color: white; flex-shrink: 0; box-shadow: 0 2px 8px rgba(0,0,0,.15); }
.an-reviewer-name { font-size: 13px; font-weight: 600; color: var(--espresso); }
.an-review-date   { font-family: 'DM Mono', monospace; font-size: 10px; color: var(--text-muted); }
.an-review-text   { font-size: 13px; color: var(--ink); line-height: 1.65; opacity: .8; }

/* ── Activity heatmap ── */
.an-heatmap-wrap    { padding: 4px 0; }
.an-heatmap-grid    { display: flex; align-items: flex-start; gap: 6px; width: 100%; }
.an-hm-day-labels   { display: flex; flex-direction: column; gap: 3px; padding-top: 18px; flex-shrink: 0; width: 14px; }
.an-hm-day-lbl      { font-family: 'DM Mono', monospace; font-size: 9px; color: var(--text-muted); display: flex; align-items: center; justify-content: flex-end; height: 11px; }
.an-hm-right        { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 0; }
.an-heatmap-months  { display: flex; justify-content: space-between; }
.an-hm-month        { font-family: 'DM Mono', monospace; font-size: 9px; color: var(--text-muted); width: 11px; overflow: visible; white-space: nowrap; flex-shrink: 0; }
.an-hm-weeks        { display: flex; justify-content: space-between; }
.an-hm-week         { display: flex; flex-direction: column; gap: 3px; width: 11px; flex-shrink: 0; }
.an-hm-cell         { width: 11px; height: 11px; border-radius: 2px; cursor: pointer; transition: transform .1s; flex-shrink: 0; }
.an-hm-cell:hover   { transform: scale(1.25); }
.an-hm-cell.l0      { background: rgba(44,31,20,.06); }
.an-hm-cell.l1      { background: rgba(196,98,45,.22); }
.an-hm-cell.l2      { background: rgba(196,98,45,.48); }
.an-hm-cell.l3      { background: rgba(196,98,45,.72); }
.an-hm-cell.l4      { background: var(--copper); box-shadow: 0 2px 6px rgba(196,98,45,.4); }
.an-hm-cell.future  { background: transparent; border: 1px dashed rgba(44,31,20,.08); cursor: default; }
.an-hm-cell.future:hover { transform: none; }
.an-hm-legend { display: flex; align-items: center; gap: 4px; padding: 8px 0 0; font-family: 'DM Mono', monospace; font-size: 9px; color: var(--text-muted); justify-content: flex-end; flex-wrap: wrap; }
.an-hm-legend span  { line-height: 1; }
.an-hm-legend-cell  { width: 10px; height: 10px; border-radius: 2px; flex-shrink: 0; }

/* ── Milestones ── */
.an-milestones-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 20px;
}
.an-milestone-card {
  border-radius: 16px;
  padding: 20px 18px;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  animation: anCardIn .5s ease both;
  transition: transform .25s cubic-bezier(.34,1.56,.64,1), box-shadow .25s;
  border: 1px solid transparent;
  position: relative;
  overflow: hidden;
}
.an-milestone-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 40%;
  background: linear-gradient(180deg, rgba(255,255,255,.28) 0%, transparent 100%);
  pointer-events: none;
}
.an-milestone-card:hover { transform: translateY(-4px) scale(1.01); }
.an-milestone-card.achieved { border-color: rgba(22,163,74,.3) !important; background: linear-gradient(145deg, rgba(22,163,74,.09) 0%, var(--warm-white) 60%) !important; box-shadow: 0 4px 16px rgba(22,163,74,.14), 0 12px 32px rgba(22,163,74,.08), inset 0 1px 0 rgba(255,255,255,.8) !important; }
.an-milestone-card.d1 { background: linear-gradient(145deg, rgba(196,98,45,.1) 0%, var(--warm-white) 60%);  border-color: rgba(196,98,45,.22);  box-shadow: 0 2px 8px rgba(196,98,45,.09), 0 8px 24px rgba(196,98,45,.06), inset 0 1px 0 rgba(255,255,255,.7); }
.an-milestone-card.d2 { background: linear-gradient(145deg, rgba(58,138,130,.1) 0%, var(--warm-white) 60%); border-color: rgba(58,138,130,.22); box-shadow: 0 2px 8px rgba(58,138,130,.09), 0 8px 24px rgba(58,138,130,.06), inset 0 1px 0 rgba(255,255,255,.7); }
.an-milestone-card.d3 { background: linear-gradient(145deg, rgba(232,160,66,.1) 0%, var(--warm-white) 60%); border-color: rgba(232,160,66,.22); box-shadow: 0 2px 8px rgba(232,160,66,.09), 0 8px 24px rgba(232,160,66,.06), inset 0 1px 0 rgba(255,255,255,.7); }
.an-milestone-card.d4 { background: linear-gradient(145deg, rgba(196,90,106,.1) 0%, var(--warm-white) 60%); border-color: rgba(196,90,106,.22); box-shadow: 0 2px 8px rgba(196,90,106,.09), 0 8px 24px rgba(196,90,106,.06), inset 0 1px 0 rgba(255,255,255,.7); }
.an-milestone-card.d1:hover { box-shadow: 0 8px 24px rgba(196,98,45,.2),  0 20px 48px rgba(196,98,45,.1);  border-color: rgba(196,98,45,.4); }
.an-milestone-card.d2:hover { box-shadow: 0 8px 24px rgba(58,138,130,.2),  0 20px 48px rgba(58,138,130,.1); border-color: rgba(58,138,130,.4); }
.an-milestone-card.d3:hover { box-shadow: 0 8px 24px rgba(232,160,66,.2),  0 20px 48px rgba(232,160,66,.1); border-color: rgba(232,160,66,.4); }
.an-milestone-card.d4:hover { box-shadow: 0 8px 24px rgba(196,90,106,.2),  0 20px 48px rgba(196,90,106,.1); border-color: rgba(196,90,106,.4); }
.an-milestone-icon { flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 16px; }
.an-milestone-body { flex: 1; min-width: 0; }
.an-milestone-title { font-size: 13px; font-weight: 600; color: var(--espresso); margin-bottom: 3px; line-height: 1.4; }
.an-milestone-desc  { font-size: 11px; color: var(--text-muted); margin-bottom: 8px; }
.achieved-text      { color: #16a34a !important; font-weight: 600; }
.an-milestone-progress-wrap { height: 5px; background: rgba(44,31,20,.1); border-radius: 3px; overflow: hidden; position: relative; }
.an-milestone-progress { height: 100%; border-radius: 3px; transition: width .8s cubic-bezier(.34,1.56,.64,1); position: relative; overflow: hidden; }
.an-milestone-progress::after {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 60%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent);
  animation: anProgressShimmer 2.5s ease-in-out infinite 1s;
}
.an-milestone-pct { font-family: 'DM Mono', monospace; font-size: 10px; color: var(--text-muted); margin-top: 5px; }

/* ── Animations ── */
@keyframes anCardIn {
  from { opacity: 0; transform: translateY(16px) scale(.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes anFadeUp {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes anDotPulse {
  0%, 100% { transform: scale(1);   opacity: 1; }
  50%       { transform: scale(1.7); opacity: .45; }
}
@keyframes anProgressShimmer {
  0%        { left: -100%; }
  60%, 100% { left: 150%; }
}
@keyframes anLivePulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(22,163,74,.2); }
  50%       { box-shadow: 0 0 0 6px rgba(22,163,74,.05); }
}
.an-page .d1 { animation-delay: .05s; }
.an-page .d2 { animation-delay: .10s; }
.an-page .d3 { animation-delay: .15s; }
.an-page .d4 { animation-delay: .20s; }
.an-page .d5 { animation-delay: .25s; }
.an-page .d6 { animation-delay: .30s; }

/* ── Responsive ── */
@media (max-width: 1100px) {
  .an-overview-strip { grid-template-columns: repeat(3, 1fr); }
  .an-main-grid { grid-template-columns: 1fr; }
  .an-blogs-grid { grid-template-columns: 1fr 1fr; }
  .an-eng-grid { grid-template-columns: repeat(2, 1fr); }
  .an-milestones-strip { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .an-page { padding: 0 16px 60px; }
  .an-overview-strip { grid-template-columns: repeat(2, 1fr); }
  .an-blogs-grid { grid-template-columns: 1fr; }
  .an-top-content-grid { grid-template-columns: 1fr; }
  .an-page-header { flex-direction: column; align-items: flex-start; gap: 14px; }
  .an-page-hero::before, .an-page-hero::after { left: -16px; right: -16px; }
  .an-traffic-chart { height: 160px; overflow: hidden; }
  .an-traffic-chart::before { inset: 16px 0 10px; }
  .an-tc-lbl { font-size: 7px; }
  .an-aud-stats { gap: 16px; flex-wrap: wrap; }
  .an-range-tabs { flex-wrap: wrap; gap: 4px; }
}
@media (max-width: 480px) {
  .an-overview-strip { grid-template-columns: 1fr 1fr; }
  .an-eng-grid { grid-template-columns: 1fr; }
  .an-milestones-strip { grid-template-columns: 1fr; }
  .an-traffic-chart { height: 140px; }
  .an-eng-card { padding: 16px 14px 12px; }
}

/* ═══════════════════════════════════════════════════════════════
/* ═══════════════════════════════════════════════════════════════
   §53 — Bookmarks page  (bm-*)
   ═══════════════════════════════════════════════════════════════ */

/* ── Stagger animation ── */
@keyframes bmFadeUp {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}
.bm-card { animation: bmFadeUp .42s ease both; }
.bm-card.d1 { animation-delay: .04s; }
.bm-card.d2 { animation-delay: .09s; }
.bm-card.d3 { animation-delay: .14s; }
.bm-card.d4 { animation-delay: .19s; }
.bm-card.d5 { animation-delay: .24s; }
.bm-card.d6 { animation-delay: .29s; }
.bm-card.d7 { animation-delay: .34s; }
.bm-card.d8 { animation-delay: .39s; }

/* ── Page wrapper ── */
.bm-page { min-height: 80vh; background: var(--parchment); }

/* ── Hero ── */
.bm-hero {
  position: relative;
  overflow: hidden;
  background: #2B1D11;
  min-height: 210px;
}
.bm-hero-bg {
  position: absolute; inset: 0;
  background: linear-gradient(135deg,
    rgba(196,98,45,0.22) 0%,
    rgba(46,139,122,0.14) 55%,
    rgba(28,24,20,0.72) 100%);
}
.bm-hero-grid {
  position: absolute; inset: 0; opacity: 0.04;
  background-image:
    repeating-linear-gradient(0deg,  rgba(255,255,255,0.5) 0, rgba(255,255,255,0.5) 1px, transparent 0, transparent 44px),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.5) 0, rgba(255,255,255,0.5) 1px, transparent 0, transparent 44px);
}
.bm-hero-inner {
  position: relative; z-index: 2;
  max-width: 1240px; margin: 0 auto;
  padding: 44px 32px 32px;
}
.bm-hero-left { flex: 1; min-width: 260px; }
.bm-hero-eyebrow {
  font-family: 'DM Mono', monospace;
  font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase;
  color: #E09B38; margin-bottom: 14px;
  display: inline-flex; align-items: center; gap: 6px;
}
.bm-hero-eyebrow::before {
  content: ''; width: 20px; height: 1px; background: #E09B38;
}
.bm-hero-title {
  font-family: 'Playfair Display', serif;
  font-size: clamp(26px, 4vw, 42px); font-weight: 900;
  color: #fff; letter-spacing: -1px; line-height: 1.08;
  margin: 0 0 12px;
}
.bm-hero-title em { font-style: italic; color: #C4622D; }
.bm-hero-sub {
  font-size: 14px; line-height: 1.65; color: rgba(255,255,255,0.55);
  margin: 0 0 20px; max-width: 480px;
}
.bm-hero-meta {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.bm-hero-meta-item {
  font-size: 13px; color: rgba(255,255,255,0.65);
  font-family: 'DM Sans', sans-serif;
}
.bm-hero-meta-item strong { color: #fff; font-weight: 700; }
.bm-hero-meta-sep { color: rgba(255,255,255,0.25); }

/* ── Tabs + sort bar ── */
.bm-hero-tabs-wrap {
  position: relative; z-index: 2;
  max-width: 1240px; margin: 0 auto;
  padding: 0 32px;
  display: flex; align-items: center;
  justify-content: space-between; gap: 12px; flex-wrap: wrap;
  border-top: 1px solid rgba(255,255,255,0.07);
}
.bm-tabs { display: flex; gap: 0; }
.bm-tab {
  font-size: 12.5px; font-weight: 600;
  font-family: 'DM Sans', sans-serif;
  color: rgba(255,255,255,0.45);
  text-decoration: none;
  padding: 11px 16px 13px;
  display: flex; align-items: center; gap: 6px;
  transition: color .15s;
  border-bottom: 2px solid transparent;
}
.bm-tab:hover { color: rgba(255,255,255,.8); }
.bm-tab--on { color: #fff; border-bottom-color: #C4622D; }
.bm-tab-pill {
  font-size: 10px; font-weight: 700;
  background: rgba(255,255,255,.12);
  color: rgba(255,255,255,.7);
  padding: 1px 6px; border-radius: 10px; line-height: 1.5;
}
.bm-tab--on .bm-tab-pill { background: rgba(196,98,45,.5); color: #fff; }

.bm-sort { display: flex; align-items: center; gap: 4px; }
.bm-sort-btn {
  display: flex; align-items: center; gap: 4px;
  font-size: 11px; font-weight: 500;
  font-family: 'DM Sans', sans-serif;
  color: rgba(255,255,255,.38);
  text-decoration: none;
  padding: 5px 10px; border-radius: 6px;
  transition: all .15s;
}
.bm-sort-btn:hover { background: rgba(255,255,255,.07); color: rgba(255,255,255,.75); }
.bm-sort-btn.on { background: rgba(255,255,255,.1); color: #fff; font-weight: 600; }

/* ── Body ── */
.bm-body {
  max-width: 1240px;
  margin: 0 auto;
  padding: 32px 24px 80px;
}

/* ── Feed grid ── */
.bm-feed {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(288px, 1fr));
  gap: 22px;
}

/* ── Card base ── */
.bm-card {
  background: #FDFAF6;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(44,31,20,.09);
  display: flex; flex-direction: column;
  transition: box-shadow .22s, transform .22s;
}
.bm-card:hover {
  box-shadow: 0 8px 32px rgba(44,31,20,.12);
  transform: translateY(-3px);
}

/* ── Thumbnail wrap ── */
.bm-card-thumb-wrap {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  flex-shrink: 0;
}
.bm-card-thumb {
  display: block;
  width: 100%; height: 100%;
}
.bm-card-thumb img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .35s ease;
}
.bm-card:hover .bm-card-thumb img { transform: scale(1.04); }

.bm-card-thumb-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to bottom,
    rgba(28,18,10,.55) 0%,
    transparent 38%,
    transparent 62%,
    rgba(28,18,10,.45) 100%);
  pointer-events: none;
}

/* ── Gradient placeholder ── */
.bm-card-thumb-grad {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
}
.bm-card-thumb-grad--writeup {
  background: linear-gradient(135deg, #C4622D 0%, #E8A042 100%);
}
.bm-card-thumb-grad--short-post {
  background: linear-gradient(135deg, #7C5CBF 0%, #A98FD8 100%);
}
.bm-card-thumb-grad--blog-post {
  background: linear-gradient(135deg, #6A4AB5 0%, #A07FD8 100%);
}
.bm-card-thumb-grad--blog {
  background: linear-gradient(135deg, #2A7A72 0%, #5AB8B0 100%);
}
.bm-card-thumb-initials {
  font-family: 'Playfair Display', serif;
  font-size: 32px; font-weight: 900;
  color: rgba(255,255,255,.85);
  letter-spacing: -1px;
}

/* ── Thumb topbar (absolute overlay) ── */
.bm-card-thumb-topbar {
  position: absolute; top: 0; left: 0; right: 0;
  display: flex; align-items: center;
  justify-content: space-between;
  padding: 10px 10px 10px 10px;
  background: linear-gradient(to bottom, rgba(20,12,6,.62) 0%, transparent 100%);
}
.bm-card-type {
  font-size: 9px; font-weight: 800;
  font-family: 'DM Sans', sans-serif;
  letter-spacing: .08em; text-transform: uppercase;
  padding: 3px 9px; border-radius: 4px;
  backdrop-filter: blur(4px);
}
.bm-card-type--writeup    { background: rgba(196,98,45,.75);  color: #fff; }
.bm-card-type--short-post { background: rgba(124,92,191,.75); color: #fff; }
.bm-card-type--blog-post  { background: rgba(106,74,181,.75); color: #fff; }
.bm-card-type--blog       { background: rgba(42,122,114,.75); color: #fff; }

.bm-unsave {
  display: flex; align-items: center; justify-content: center;
  width: 26px; height: 26px;
  background: rgba(255,255,255,.15);
  backdrop-filter: blur(4px);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 6px; cursor: pointer;
  color: rgba(255,255,255,.85);
  transition: background .15s, color .15s;
  flex-shrink: 0;
}
.bm-unsave svg { width: 13px; height: 13px; }
.bm-unsave:hover { background: rgba(220,38,38,.7); color: #fff; border-color: transparent; }

/* ── Thumb label pill (bottom of image) ── */
.bm-card-thumb-label {
  position: absolute; bottom: 10px; left: 10px;
  font-size: 10px; font-weight: 700;
  font-family: 'DM Sans', sans-serif;
  color: #fff; text-decoration: none;
  background: rgba(20,12,6,.55);
  backdrop-filter: blur(6px);
  padding: 3px 9px; border-radius: 20px;
  border: 1px solid rgba(255,255,255,.15);
  max-width: calc(100% - 20px);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  transition: background .15s;
}
.bm-card-thumb-label:hover { background: rgba(20,12,6,.75); }

/* ── Card body (vertical, below thumb) ── */
.bm-card-body {
  display: flex; flex-direction: column;
  gap: 7px;
  padding: 14px 16px 16px;
  flex: 1;
}

.bm-card-saved {
  font-size: 10.5px;
  font-family: 'DM Mono', monospace;
  color: var(--text-muted);
  letter-spacing: .02em;
}

.bm-card-title {
  display: block;
  font-family: 'Playfair Display', serif;
  font-size: 15.5px; font-weight: 700;
  color: #2C1F14;
  text-decoration: none;
  line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color .15s;
}
.bm-card--writeup   .bm-card-title:hover { color: #C4622D; }
.bm-card--blog-post .bm-card-title:hover { color: #6A4AB5; }
.bm-card--blog      .bm-card-title:hover { color: #2A7A72; }

.bm-card-excerpt {
  font-size: 12.5px; line-height: 1.6;
  color: #6B5744;
  font-family: 'DM Sans', sans-serif;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}

.bm-card-short-body {
  font-size: 13.5px; line-height: 1.65;
  color: var(--ink, #1A1612);
  font-family: 'DM Sans', sans-serif;
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 6px;
}

/* ── Blog metrics chips ── */
.bm-card-blog-metrics {
  display: flex; flex-wrap: wrap; gap: 5px;
  margin-top: 2px;
}
.bm-metric {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 10.5px; font-family: 'DM Sans', sans-serif;
  color: #6B5744;
  background: rgba(44,31,20,.06);
  padding: 3px 8px; border-radius: 20px;
}
.bm-metric--link {
  text-decoration: none;
  color: #2A7A72; background: rgba(42,122,114,.09);
  transition: background .15s;
}
.bm-metric--link:hover { background: rgba(42,122,114,.18); }

/* ── Card footer ── */
.bm-card-footer {
  display: flex; align-items: center;
  justify-content: space-between; gap: 8px;
  margin-top: auto; padding-top: 10px;
  border-top: 1px solid rgba(44,31,20,.08);
}

.bm-card-author {
  display: flex; align-items: center; gap: 7px;
  font-size: 11.5px; color: #6B5744;
  font-family: 'DM Sans', sans-serif;
  text-decoration: none; min-width: 0;
}
.bm-card-author:hover { color: #2C1F14; }
.bm-card-author-avatar {
  width: 22px; height: 22px; border-radius: 50%;
  overflow: hidden; flex-shrink: 0;
  background: linear-gradient(135deg, #C4622D, #E8A042);
  display: flex; align-items: center; justify-content: center;
  font-size: 8px; font-weight: 700; color: #fff;
}
.bm-card-author-avatar img { width: 100%; height: 100%; object-fit: cover; }
.bm-card-author > span:first-of-type {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.bm-pro-badge {
  font-size: 8px; font-weight: 800; letter-spacing: .06em;
  background: linear-gradient(135deg, #C4622D, #E8A042);
  color: #fff; padding: 1px 5px; border-radius: 3px; flex-shrink: 0;
}

.bm-card-stats {
  display: flex; gap: 9px; align-items: center; flex-shrink: 0;
}
.bm-card-stats span {
  display: flex; align-items: center; gap: 3px;
  font-size: 11px; color: #9A8070;
  font-family: 'DM Mono', monospace;
}

.bm-card-view-link {
  font-size: 11.5px; font-family: 'DM Sans', sans-serif;
  font-weight: 600; text-decoration: none; flex-shrink: 0;
  transition: opacity .15s;
}
.bm-card-view-link:hover { opacity: .75; }
.bm-card--writeup   .bm-card-view-link { color: #C4622D; }
.bm-card--blog-post .bm-card-view-link { color: #6A4AB5; }
.bm-card--blog      .bm-card-view-link { color: #2A7A72; }

/* ── bp2 bookmark button (blog profile post cards) ── */
.bp2-bookmark-btn {
  background: none; border: none; cursor: pointer;
  padding: 4px; border-radius: 5px;
  color: var(--text-muted);
  transition: color .15s, background .15s;
  display: flex; align-items: center;
  margin-left: auto;
}
.bp2-bookmark-btn svg { width: 16px; height: 16px; }
.bp2-bookmark-btn:hover { color: var(--bp2-copper, #C4622D); }
.bp2-bookmark-btn.saved { color: var(--bp2-copper, #C4622D); }

/* ── Empty states ── */
.bm-empty {
  text-align: center; padding: 72px 24px;
  display: flex; flex-direction: column;
  align-items: center; gap: 14px;
  grid-column: 1 / -1;
}
.bm-empty-icon {
  width: 80px; height: 80px; border-radius: 50%;
  background: rgba(196,98,45,.1);
  display: flex; align-items: center; justify-content: center;
  color: #C4622D; margin-bottom: 6px;
}
.bm-empty-icon--violet {
  background: rgba(124,92,191,.1); color: var(--violet);
}
.bm-empty-title {
  font-family: 'Playfair Display', serif;
  font-size: 21px; font-weight: 800;
  color: var(--ink); margin: 0;
}
.bm-empty-text {
  font-size: 14px; color: var(--text-muted);
  font-family: 'DM Sans', sans-serif;
  max-width: 380px; line-height: 1.65; margin: 0;
}
.bm-empty-actions {
  display: flex; gap: 10px; margin-top: 10px;
  flex-wrap: wrap; justify-content: center;
}

/* ── Toast ── */
.bm-toast {
  position: fixed; bottom: 28px; left: 50%;
  transform: translateX(-50%) translateY(14px);
  background: #2C1F14; color: #fff;
  font-size: 13px; font-family: 'DM Sans', sans-serif; font-weight: 500;
  padding: 10px 22px; border-radius: 10px;
  box-shadow: 0 6px 24px rgba(0,0,0,.22);
  opacity: 0; pointer-events: none;
  transition: opacity .22s, transform .22s;
  z-index: 9999; white-space: nowrap;
}
.bm-toast--show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ── Responsive ── */
@media (max-width: 900px) {
  .bm-feed { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
}
@media (max-width: 640px) {
  .bm-hero-inner     { padding: 24px 16px 14px; }
  .bm-hero-title     { font-size: 22px; }
  .bm-hero-tabs-wrap { padding: 0 8px; flex-direction: column; align-items: flex-start; }
  .bm-tab            { padding: 8px 12px 10px; font-size: 12px; }
  .bm-body           { padding: 16px 12px 60px; }
  .bm-feed           { grid-template-columns: 1fr; gap: 14px; }
}

/* ==========================================================================
   §53 — Settings pages (.stp-*)
   Shared layout for /settings, /settings/account, /settings/notifications,
   /settings/privacy. Page-specific rules (.prv-*, .stn-*) live in their
   respective view files.
   ========================================================================== */

/* ── Outer grid ── */
.stp-wrap {
  max-width: 1060px; margin: 0 auto;
  padding: 40px 28px 120px;
  display: grid; grid-template-columns: 210px 1fr;
  gap: 40px; align-items: start; width: 100%;
}

/* ── Sidebar nav ── */
.stp-nav { position: sticky; top: 80px; }
.stp-nav-label {
  font-family: var(--font-mono); font-size: 9px; letter-spacing: 2.5px;
  text-transform: uppercase; color: var(--ink-light,#999); margin-bottom: 10px; padding-left: 4px;
}
.stp-nav-list { display: flex; flex-direction: column; gap: 2px; }
.stp-nav-item {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: 8px;
  font-size: 13px; font-weight: 500; color: rgba(26,22,18,0.5);
  text-decoration: none; transition: all 0.18s;
}
.stp-nav-item:hover { background: #EDE8E2; color: #1A1612; }
.stp-nav-item.active {
  background: rgba(196,98,45,0.1); color: var(--accent);
  border: 1px solid rgba(196,98,45,0.18); font-weight: 600;
}
.stp-nav-item svg { width: 15px; height: 15px; flex-shrink: 0; opacity: 0.7; }
.stp-nav-item.active svg { opacity: 1; }
.stp-nav-divider { height: 1px; background: #EDE8E2; margin: 10px 0; }

/* ── Main area ── */
.stp-main {}
.stp-page-head { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 28px; }
.stp-page-title { font-family: var(--font-serif); font-size: 28px; font-weight: 900; color: #2C1F14; letter-spacing: -0.8px; line-height: 1.1; }
.stp-page-title em { color: var(--accent); font-style: italic; }
.stp-page-sub { font-size: 13px; color: rgba(26,22,18,0.45); margin-top: 4px; }
.stp-view-link {
  font-size: 13px; font-weight: 600; color: var(--accent);
  text-decoration: none; display: flex; align-items: center; gap: 5px;
  white-space: nowrap; transition: gap 0.2s;
}
.stp-view-link:hover { gap: 9px; }

/* ── Flash banner ── */
.stp-flash { display: flex; align-items: center; gap: 8px; padding: 11px 16px; border-radius: 9px; margin-bottom: 20px; font-size: 13px; font-weight: 500; }
.stp-flash-ok  { background: rgba(74,222,128,0.08); border: 1px solid rgba(74,222,128,0.25); color: #16a34a; }
.stp-flash-err { background: rgba(239,68,68,0.06);  border: 1px solid rgba(239,68,68,0.2);  color: #dc2626; }

/* ── Card ── */
.stp-card { background: #FDFAF6; border: 1.5px solid #E4DDD5; border-radius: 14px; overflow: hidden; margin-bottom: 18px; }
.stp-card-head { padding: 18px 26px 14px; border-bottom: 1px solid #EDE8E2; display: flex; align-items: center; gap: 12px; }
.stp-card-icon { width: 34px; height: 34px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 16px; flex-shrink: 0; }
.stp-card-title { font-family: var(--font-serif); font-size: 15px; font-weight: 700; color: #2C1F14; }
.stp-card-desc  { font-size: 12px; color: rgba(26,22,18,0.45); margin-top: 1px; }
.stp-card-body  { padding: 22px 26px; }
.stp-card-footer { padding: 14px 26px; border-top: 1px solid #EDE8E2; display: flex; justify-content: flex-end; }

/* ── Form elements ── */
.stp-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-bottom: 18px; }
.stp-form-row.full { grid-template-columns: 1fr; }
.stp-form-group { display: flex; flex-direction: column; gap: 6px; }
.stp-label { font-size: 12px; font-weight: 600; color: #2C1F14; display: flex; align-items: center; gap: 5px; letter-spacing: 0.2px; }
.stp-label .req { color: var(--accent); font-size: 10px; background: rgba(196,98,45,0.1); padding: 1px 5px; border-radius: 3px; font-family: var(--font-mono); letter-spacing: 0; }
.stp-label .opt { color: rgba(26,22,18,0.4); font-size: 10px; font-weight: 400; font-family: var(--font-mono); }
.stp-input, .stp-textarea, .stp-select {
  font-family: var(--font-sans); font-size: 14px; color: #1A1612;
  background: #F7F3ED; border: 1.5px solid #E4DDD5;
  border-radius: 8px; padding: 10px 14px; outline: none;
  transition: all 0.2s; width: 100%;
}
.stp-input:focus, .stp-textarea:focus, .stp-select:focus {
  border-color: var(--accent); background: #FDFAF6;
  box-shadow: 0 0 0 3px rgba(196,98,45,0.18);
}
.stp-input::placeholder, .stp-textarea::placeholder { color: rgba(26,22,18,0.35); }
.stp-input[readonly] { opacity: 0.55; cursor: not-allowed; }
.stp-textarea { resize: vertical; min-height: 100px; line-height: 1.65; }
.stp-char { font-family: var(--font-mono); font-size: 11px; color: rgba(26,22,18,0.4); text-align: right; margin-top: -2px; }
.stp-char.warn { color: #E8A042; }
.stp-char.over { color: var(--accent); }
.stp-hint { font-size: 12px; color: rgba(26,22,18,0.45); line-height: 1.5; margin-top: -2px; }
.stp-prefix-wrap { position: relative; }
.stp-prefix {
  position: absolute; left: 0; top: 0; bottom: 0;
  display: flex; align-items: center; padding: 0 12px;
  font-family: var(--font-mono); font-size: 13px; color: rgba(26,22,18,0.45);
  background: #EDE8E2; border-right: 1.5px solid #E4DDD5; border-radius: 8px 0 0 8px;
  pointer-events: none;
}
.stp-prefix-wrap .stp-input { padding-left: 42px; }

/* ── Avatar section (profile page) ── */
.stp-avatar-section {
  background: #FDFAF6; border: 1.5px solid #E4DDD5;
  border-radius: 14px; padding: 26px 28px;
  margin-bottom: 18px; display: flex; align-items: center; gap: 26px;
  position: relative; overflow: hidden;
}
.stp-avatar-section::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, var(--accent), #E8A042, transparent);
}
.stp-av-wrap { position: relative; flex-shrink: 0; cursor: pointer; }
.stp-av-img {
  width: 88px; height: 88px; border-radius: 16px; object-fit: cover;
  border: 3px solid #FDFAF6; box-shadow: 0 6px 24px rgba(196,98,45,0.18); display: block;
}
.stp-av-initials {
  width: 88px; height: 88px; border-radius: 16px;
  background: linear-gradient(135deg, var(--accent), #E8A042);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-serif); font-size: 30px; font-weight: 900; color: white;
  border: 3px solid #FDFAF6; box-shadow: 0 6px 24px rgba(196,98,45,0.18);
}
.stp-av-overlay {
  position: absolute; inset: 0; border-radius: 16px;
  background: rgba(26,22,18,0.55);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity 0.2s;
  font-size: 11px; font-weight: 600; color: white; gap: 5px;
  pointer-events: none;
}
.stp-av-wrap:hover .stp-av-overlay { opacity: 1; }
.stp-av-text h3 { font-family: var(--font-serif); font-size: 16px; font-weight: 700; color: #2C1F14; margin-bottom: 4px; }
.stp-av-text p { font-size: 12px; color: rgba(26,22,18,0.45); line-height: 1.6; max-width: 320px; }
.stp-av-actions { display: flex; gap: 10px; margin-top: 14px; flex-wrap: wrap; }
.stp-btn-upload {
  padding: 8px 18px; border-radius: 6px; font-size: 13px; font-weight: 600;
  background: var(--accent); color: white; border: none; cursor: pointer;
  font-family: var(--font-sans); transition: all 0.2s;
  display: flex; align-items: center; gap: 6px;
}
.stp-btn-upload:hover { background: #b0561f; transform: translateY(-1px); }
.stp-btn-remove {
  padding: 8px 18px; border-radius: 6px; font-size: 13px; font-weight: 600;
  background: transparent; color: rgba(26,22,18,0.5); border: 1.5px solid #E4DDD5;
  cursor: pointer; font-family: var(--font-sans); transition: all 0.2s;
}
.stp-btn-remove:hover { border-color: #1A1612; color: #1A1612; }

/* ── Social link rows ── */
.stp-social-row { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.stp-social-row:last-child { margin-bottom: 0; }
.stp-social-icon {
  width: 38px; height: 38px; border-radius: 9px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; border: 1.5px solid #E4DDD5; background: #F7F3ED;
}
.stp-social-label { width: 110px; font-size: 12px; font-weight: 600; color: #2C1F14; flex-shrink: 0; }
.stp-social-row .stp-input { flex: 1; }
.stp-social-clear {
  width: 32px; height: 32px; border-radius: 6px; flex-shrink: 0;
  background: none; border: 1.5px solid #E4DDD5;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; color: rgba(26,22,18,0.4); transition: all 0.2s;
}
.stp-social-clear:hover { border-color: var(--accent); color: var(--accent); background: rgba(196,98,45,0.08); }

/* ── Toggle rows (profile page) ── */
.stp-toggle-row {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 24px; padding: 14px 0; border-bottom: 1px solid #EDE8E2;
}
.stp-toggle-row:last-child { border-bottom: none; padding-bottom: 0; }
.stp-toggle-row:first-child { padding-top: 0; }
.stp-toggle-title { font-size: 13.5px; font-weight: 600; color: #2C1F14; margin-bottom: 2px; }
.stp-toggle-desc  { font-size: 12px; color: rgba(26,22,18,0.45); line-height: 1.55; max-width: 380px; }
.stp-toggle { position: relative; width: 44px; height: 24px; flex-shrink: 0; margin-top: 2px; }
.stp-toggle input { opacity: 0; width: 0; height: 0; }
.stp-toggle-slider {
  position: absolute; inset: 0; background: #E8E2D9;
  border-radius: 24px; cursor: pointer; transition: background 0.25s;
  border: 1.5px solid #E4DDD5;
}
.stp-toggle-slider::before {
  content: ''; position: absolute; top: 3px; left: 3px;
  width: 16px; height: 16px; border-radius: 50%;
  background: white; transition: transform 0.25s;
  box-shadow: 0 1px 4px rgba(0,0,0,0.15);
}
.stp-toggle input:checked + .stp-toggle-slider { background: var(--accent); border-color: var(--accent); }
.stp-toggle input:checked + .stp-toggle-slider::before { transform: translateX(20px); }

/* ── Buttons ── */
.stp-btn-save {
  padding: 9px 26px; border-radius: 7px; font-size: 13px; font-weight: 600;
  background: var(--accent); color: white; border: none;
  cursor: pointer; font-family: var(--font-sans); transition: all 0.25s;
  display: flex; align-items: center; gap: 7px;
}
.stp-btn-save:hover { background: #b0561f; transform: translateY(-1px); box-shadow: 0 4px 16px rgba(196,98,45,0.3); }
.stp-btn-save:active { transform: translateY(0); }
.stp-btn-cancel {
  padding: 9px 22px; border-radius: 7px; font-size: 13px; font-weight: 600;
  background: transparent; color: rgba(26,22,18,0.5); border: 1.5px solid #E4DDD5;
  cursor: pointer; font-family: var(--font-sans); transition: all 0.2s;
}
.stp-btn-cancel:hover { border-color: #1A1612; color: #1A1612; }

/* ── Danger zone ── */
.stp-danger { border: 1.5px solid rgba(239,68,68,0.25); border-radius: 14px; overflow: hidden; margin-bottom: 18px; }
.stp-danger-head {
  padding: 14px 22px; background: rgba(239,68,68,0.05); border-bottom: 1px solid rgba(239,68,68,0.15);
  display: flex; align-items: center; gap: 9px;
  font-family: var(--font-serif); font-size: 15px; font-weight: 700; color: #dc2626;
}
.stp-danger-body { padding: 18px 22px; display: flex; flex-direction: column; gap: 14px; }
.stp-danger-item { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.stp-danger-title { font-size: 13px; font-weight: 600; color: #2C1F14; margin-bottom: 2px; }
.stp-danger-desc  { font-size: 12px; color: rgba(26,22,18,0.45); }
.stp-btn-danger {
  padding: 8px 18px; border-radius: 6px; font-size: 12px; font-weight: 600;
  background: transparent; color: #dc2626; border: 1.5px solid rgba(239,68,68,0.35);
  cursor: pointer; font-family: var(--font-sans); transition: all 0.2s; white-space: nowrap; flex-shrink: 0;
}
.stp-btn-danger:hover { background: rgba(239,68,68,0.08); border-color: #dc2626; }

/* ── Sticky save footer (profile page) ── */
.stp-footer {
  position: fixed; bottom: 0; left: 0; right: 0;
  background: rgba(253,250,246,0.94); backdrop-filter: blur(12px);
  border-top: 1px solid #E8E2D9;
  padding: 13px 32px; z-index: 60;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.stp-footer-info {
  font-size: 12px; color: rgba(26,22,18,0.45);
  display: flex; align-items: center; gap: 6px;
}
.stp-footer-info::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: var(--teal, #3A8A82); flex-shrink: 0;
  animation: stpPulse 2s infinite;
}
.stp-footer-actions { display: flex; gap: 12px; }
@keyframes stpPulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:0.5;transform:scale(0.7)} }

/* ── Delete confirm modal ── */
.stp-modal-backdrop {
  position: fixed; inset: 0; background: rgba(26,22,18,0.55);
  z-index: 200; display: none; align-items: center; justify-content: center;
}
.stp-modal-backdrop.open { display: flex; }
.stp-modal {
  background: #FDFAF6; border-radius: 14px; padding: 28px;
  max-width: 420px; width: 90%; box-shadow: 0 20px 60px rgba(0,0,0,0.25);
}
.stp-modal h3 { font-family: var(--font-serif); font-size: 20px; font-weight: 800; color: #dc2626; margin-bottom: 8px; }
.stp-modal p  { font-size: 13px; color: rgba(26,22,18,0.6); line-height: 1.6; margin-bottom: 16px; }
.stp-modal .stp-input { margin-bottom: 14px; }
.stp-modal-actions { display: flex; gap: 10px; justify-content: flex-end; }

/* ── Entrance animations ── */
@keyframes stpFadeUp { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:translateY(0); } }
.stp-d1 { animation: stpFadeUp 0.4s ease both 0.05s; }
.stp-d2 { animation: stpFadeUp 0.4s ease both 0.10s; }
.stp-d3 { animation: stpFadeUp 0.4s ease both 0.15s; }
.stp-d4 { animation: stpFadeUp 0.4s ease both 0.20s; }
.stp-d5 { animation: stpFadeUp 0.4s ease both 0.25s; }
.stp-d6 { animation: stpFadeUp 0.4s ease both 0.30s; }
.stp-d7 { animation: stpFadeUp 0.4s ease both 0.35s; }

/* ── Responsive ── */
@media (max-width: 860px) {
  .stp-wrap { grid-template-columns: 1fr; padding: 24px 16px 80px; gap: 20px; }
  .stp-nav { position: static; display: flex; flex-wrap: wrap; gap: 4px; }
  .stp-nav-label { display: none; }
  .stp-nav-item { padding: 7px 14px; }
}
@media (max-width: 600px) {
  .stp-form-row { grid-template-columns: 1fr; }
  .stp-card-body { padding: 18px; }
  .stp-card-head { padding: 14px 18px; }
  .stp-avatar-section { flex-direction: column; gap: 18px; }
  .stp-social-label { display: none; }
}
.ck.ck-editor__top .ck-sticky-panel .ck-sticky-panel__content{
   border: 0 !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   §53: Post Stats Page (ps-*)
   ══════════════════════════════════════════════════════════════════════════ */
.ps-page, .ps-page * {
  --copper:     #C4622D;
  --espresso:   #2C1F14;
  --amber:      #E8A042;
  --sage:       #5C7A5C;
  --rose:       #C45A6A;
  --mist:       #E8E2D9;
  --warm-white: #FDFAF6;
  --cream:      #F7F3ED;
  --text-muted: rgba(44,31,20,0.45);
  --border:     rgba(44,31,20,.12);
  --ink:        #1A1612;
  --teal:       #3A8A82;
  --violet:     #7C5CBF;
}
.ps-page {
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 32px 80px;
  width:100%;
}

/* ── Entrance animations ── */
@keyframes psCardIn {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes psDotPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: .55; transform: scale(.85); }
}
@keyframes psLivePulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(22,163,74,.2); }
  50%      { box-shadow: 0 0 0 6px rgba(22,163,74,.08); }
}
.ps-page .d1 { animation-delay: .05s; }
.ps-page .d2 { animation-delay: .12s; }
.ps-page .d3 { animation-delay: .19s; }
.ps-page .d4 { animation-delay: .26s; }
.ps-page .d5 { animation-delay: .33s; }
.ps-page .d6 { animation-delay: .40s; }

/* ── Hero banner ── */
.ps-hero {
  position: relative;
  padding: 44px 0 36px;
  margin-bottom: 36px;
}
.ps-hero::before {
  content: '';
  position: absolute;
  inset: -1px -32px 0;
  background:
    radial-gradient(ellipse 60% 120% at 10% 60%, rgba(196,98,45,.07) 0%, transparent 65%),
    radial-gradient(ellipse 40% 80%  at 90% 20%, rgba(58,138,130,.05) 0%, transparent 65%);
  pointer-events: none;
}
.ps-hero::after {
  content: '';
  position: absolute;
  bottom: 0; left: -32px; right: -32px;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(44,31,20,.12) 30%, rgba(44,31,20,.12) 70%, transparent 100%);
}
.ps-hero-header {
  position: relative;
  z-index: 1;
}
.ps-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  color: var(--text-muted);
  text-decoration: none;
  margin-bottom: 16px;
  transition: color .2s;
}
.ps-back:hover { color: var(--copper); }
.ps-back svg { width: 14px; height: 14px; }
.ps-eyebrow {
  font-family: 'DM Mono', monospace;
  font-size: 10px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--copper);
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}
.ps-eyebrow::before {
  content: '';
  width: 24px;
  height: 1.5px;
  background: linear-gradient(90deg, var(--copper), transparent);
}
.ps-title {
  font-family: 'Playfair Display', serif;
  font-size: clamp(24px, 3vw, 36px);
  font-weight: 900;
  color: var(--espresso);
  letter-spacing: -1.5px;
  line-height: 1.15;
  margin: 0 0 8px;
}
.ps-title em {
  font-style: italic;
  background: linear-gradient(135deg, var(--copper) 20%, #E8855A 80%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.ps-subtitle {
  font-size: 13px;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.ps-live-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #16a34a;
  box-shadow: 0 0 0 3px rgba(22,163,74,.2);
  animation: psLivePulse 2s ease-in-out infinite;
  flex-shrink: 0;
}
.ps-meta-pills {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 12px;
}
.ps-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  border-radius: 20px;
  font-family: 'DM Mono', monospace;
  font-size: 10px;
  font-weight: 500;
  background: rgba(255,255,255,.75);
  color: var(--text-muted);
  border: 1px solid var(--border);
}
.ps-pill svg { width: 12px; height: 12px; }
.ps-topics { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 12px; }
.ps-topic {
  font-family: 'DM Sans', sans-serif;
  font-size: 11px;
  font-weight: 600;
  padding: 4px 12px;
  border-radius: 20px;
  background: rgba(196,98,45,.08);
  color: var(--copper);
  text-decoration: none;
  transition: all .2s;
  border: 1px solid rgba(196,98,45,.15);
}
.ps-topic:hover { background: rgba(196,98,45,.16); border-color: rgba(196,98,45,.3); }

/* ── Overview KPI strip ── */
.ps-overview-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 32px;
}
.ps-ov-card {
  border-radius: 16px;
  padding: 20px 18px 16px;
  position: relative;
  overflow: hidden;
  transition: transform .25s cubic-bezier(.34,1.56,.64,1), box-shadow .25s;
  animation: psCardIn .5s ease both;
  border: 1px solid transparent;
}
.ps-ov-card:hover { transform: translateY(-4px) scale(1.01); }
.ps-ov-card::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  border-radius: 16px 16px 0 0;
}
.ps-ov-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 50%;
  background: linear-gradient(180deg, rgba(255,255,255,.28) 0%, transparent 100%);
  pointer-events: none;
  border-radius: 16px 16px 0 0;
}
/* per-card color themes */
.ps-ov-card.c1 { background: linear-gradient(145deg, rgba(196,98,45,.11) 0%, rgba(196,98,45,.04) 45%, var(--warm-white) 70%);  border-color: rgba(196,98,45,.22);  box-shadow: 0 2px 8px rgba(196,98,45,.09), 0 8px 24px rgba(196,98,45,.06), inset 0 1px 0 rgba(255,255,255,.7); }
.ps-ov-card.c2 { background: linear-gradient(145deg, rgba(58,138,130,.11) 0%, rgba(58,138,130,.04) 45%, var(--warm-white) 70%); border-color: rgba(58,138,130,.22); box-shadow: 0 2px 8px rgba(58,138,130,.09), 0 8px 24px rgba(58,138,130,.06), inset 0 1px 0 rgba(255,255,255,.7); }
.ps-ov-card.c3 { background: linear-gradient(145deg, rgba(232,160,66,.11) 0%, rgba(232,160,66,.04) 45%, var(--warm-white) 70%); border-color: rgba(232,160,66,.22); box-shadow: 0 2px 8px rgba(232,160,66,.09), 0 8px 24px rgba(232,160,66,.06), inset 0 1px 0 rgba(255,255,255,.7); }
.ps-ov-card.c4 { background: linear-gradient(145deg, rgba(124,92,191,.11) 0%, rgba(124,92,191,.04) 45%, var(--warm-white) 70%); border-color: rgba(124,92,191,.22); box-shadow: 0 2px 8px rgba(124,92,191,.09), 0 8px 24px rgba(124,92,191,.06), inset 0 1px 0 rgba(255,255,255,.7); }
.ps-ov-card.c1::after { background: linear-gradient(90deg, #C4622D, #E8855A); }
.ps-ov-card.c2::after { background: linear-gradient(90deg, #3A8A82, #5AB8B0); }
.ps-ov-card.c3::after { background: linear-gradient(90deg, #E8A042, #F5C97A); }
.ps-ov-card.c4::after { background: linear-gradient(90deg, #7C5CBF, #A689D8); }
.ps-ov-card.c1:hover { box-shadow: 0 8px 24px rgba(196,98,45,.22), 0 20px 48px rgba(196,98,45,.12), inset 0 1px 0 rgba(255,255,255,.85); border-color: rgba(196,98,45,.35); }
.ps-ov-card.c2:hover { box-shadow: 0 8px 24px rgba(58,138,130,.22), 0 20px 48px rgba(58,138,130,.12), inset 0 1px 0 rgba(255,255,255,.85); border-color: rgba(58,138,130,.35); }
.ps-ov-card.c3:hover { box-shadow: 0 8px 24px rgba(232,160,66,.22), 0 20px 48px rgba(232,160,66,.12), inset 0 1px 0 rgba(255,255,255,.85); border-color: rgba(232,160,66,.35); }
.ps-ov-card.c4:hover { box-shadow: 0 8px 24px rgba(124,92,191,.22), 0 20px 48px rgba(124,92,191,.12), inset 0 1px 0 rgba(255,255,255,.85); border-color: rgba(124,92,191,.35); }
/* icons */
.ps-ov-icon { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 12px; margin-bottom: 14px; }
.ps-ov-card.c1 .ps-ov-icon { background: rgba(196,98,45,.16);  color: #C4622D; box-shadow: 0 4px 14px rgba(196,98,45,.25); }
.ps-ov-card.c2 .ps-ov-icon { background: rgba(58,138,130,.16); color: #3A8A82; box-shadow: 0 4px 14px rgba(58,138,130,.25); }
.ps-ov-card.c3 .ps-ov-icon { background: rgba(232,160,66,.16); color: #C8841A; box-shadow: 0 4px 14px rgba(232,160,66,.25); }
.ps-ov-card.c4 .ps-ov-icon { background: rgba(124,92,191,.16); color: #7C5CBF; box-shadow: 0 4px 14px rgba(124,92,191,.25); }
/* numbers */
.ps-ov-num { font-family: 'Playfair Display', serif; font-size: 32px; font-weight: 900; letter-spacing: -1px; line-height: 1; }
.ps-ov-card.c1 .ps-ov-num { color: #C4622D; }
.ps-ov-card.c2 .ps-ov-num { color: #3A8A82; }
.ps-ov-card.c3 .ps-ov-num { color: #C8841A; }
.ps-ov-card.c4 .ps-ov-num { color: #7C5CBF; }
.ps-ov-label { font-size: 11px; font-weight: 500; color: var(--text-muted); margin-top: 5px; margin-bottom: 10px; letter-spacing: .2px; font-family: 'DM Sans', sans-serif; }
.ps-ov-trend { font-family: 'DM Mono', monospace; font-size: 10px; font-weight: 600; display: inline-flex; align-items: center; gap: 3px; padding: 3px 9px; border-radius: 20px; }
.ps-ov-trend.up   { color: #16a34a; background: rgba(22,163,74,.12); }
.ps-ov-trend.down { color: #dc2626; background: rgba(220,38,38,.1); }
.ps-ov-trend.same { color: #92400e; background: rgba(232,160,66,.15); }

/* ── Engagement mini cards ── */
.ps-eng-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 32px;
}
.ps-eng-card {
  background: var(--warm-white);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 18px 16px;
  animation: psCardIn .5s ease both;
  transition: transform .25s cubic-bezier(.34,1.56,.64,1), box-shadow .25s;
  box-shadow: 0 1px 3px rgba(44,31,20,.05), 0 6px 20px rgba(44,31,20,.05), inset 0 1px 0 rgba(255,255,255,.9);
}
.ps-eng-card:hover { transform: translateY(-3px); box-shadow: 0 4px 10px rgba(44,31,20,.07), 0 16px 40px rgba(44,31,20,.08); }
.ps-eng-icon { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 10px; margin-bottom: 10px; }
.ps-eng-card:nth-child(1) .ps-eng-icon { background: rgba(196,98,45,.12); color: var(--copper); }
.ps-eng-card:nth-child(2) .ps-eng-icon { background: rgba(58,138,130,.12); color: var(--teal); }
.ps-eng-card:nth-child(3) .ps-eng-icon { background: rgba(196,90,106,.12); color: var(--rose); }
.ps-eng-card:nth-child(4) .ps-eng-icon { background: rgba(124,92,191,.12); color: var(--violet); }
.ps-eng-num { font-family: 'Playfair Display', serif; font-size: 26px; font-weight: 900; letter-spacing: -1px; line-height: 1; color: var(--espresso); }
.ps-eng-label { font-size: 11px; font-weight: 500; color: var(--text-muted); margin-top: 4px; font-family: 'DM Sans', sans-serif; }

/* ── Section gap + headers ── */
.ps-section-gap { margin-bottom: 32px; }
.ps-section-hdr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(44,31,20,.09);
}
.ps-section-hdr-title {
  font-family: 'Playfair Display', serif;
  font-size: 19px;
  font-weight: 700;
  color: var(--espresso);
  display: flex;
  align-items: center;
  gap: 10px;
}
.ps-section-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
  animation: psDotPulse 2.4s ease-in-out infinite;
}
.ps-section-extra {
  font-family: 'DM Mono', monospace;
  font-size: 10px;
  color: var(--text-muted);
}

/* ── Panels (chart containers) ── */
.ps-panel {
  background: var(--warm-white);
  border: 1px solid rgba(44,31,20,.1);
  border-radius: 16px;
  overflow: hidden;
  animation: psCardIn .5s ease both;
  box-shadow: 0 1px 3px rgba(44,31,20,.05), 0 6px 20px rgba(44,31,20,.05), inset 0 1px 0 rgba(255,255,255,.9);
  transition: box-shadow .25s, transform .25s;
  display: flex;
  flex-direction: column;
}
.ps-panel:hover {
  box-shadow: 0 4px 10px rgba(44,31,20,.07), 0 16px 40px rgba(44,31,20,.08), inset 0 1px 0 rgba(255,255,255,.95);
  transform: translateY(-2px);
}
.ps-panel-head {
  padding: 18px 24px 15px;
  border-bottom: 1px solid rgba(44,31,20,.07);
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: linear-gradient(180deg, rgba(255,255,255,.6) 0%, transparent 100%);
}
.ps-panel-title {
  font-family: 'Playfair Display', serif;
  font-size: 15px;
  font-weight: 700;
  color: var(--espresso);
  display: flex;
  align-items: center;
  gap: 9px;
}
.ps-panel-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  display: inline-block;
  animation: psDotPulse 2.4s ease-in-out infinite;
}
.ps-panel-sub {
  font-family: 'DM Mono', monospace;
  font-size: 10px;
  color: var(--text-muted);
}
.ps-panel-body { padding: 20px 24px; flex: 1; }

/* ── Chart wrapper ── */
.ps-chart-wrap { position: relative; width: 100%; /*height: 220px;*/ }
.ps-chart-wrap canvas { width: 100% !important; height: 100% !important; }
.ps-chart-legend { display: flex; gap: 18px; margin-bottom: 14px; }
.ps-cleg { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-muted); font-family: 'DM Sans', sans-serif; }
.ps-cleg-dot { width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; }

/* ── 2-col grid ── */
.ps-main-grid {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 20px;
  align-items: stretch;
}

/* ── Tables ── */
.ps-table { width: 100%; border-collapse: collapse; }
.ps-table th,
.ps-table td {
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  padding: 10px 12px;
  text-align: left;
  border-bottom: 1px solid rgba(44,31,20,.06);
}
.ps-table th {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--text-muted);
  font-family: 'DM Mono', monospace;
}
.ps-table tr:last-child td { border-bottom: none; }
.ps-table td:last-child { text-align: right; }
.ps-bar-wrap { display: flex; align-items: center; gap: 8px; justify-content: flex-end; }
.ps-bar { height: 6px; border-radius: 3px; /*background: var(--mist);*/ flex: 1; /*min-width: 40px;*/ max-width: 100px; }
.ps-bar-inner { height: 100%; border-radius: 3px; transition: width .4s ease; }
.ps-bar-inner.copper { background: linear-gradient(90deg, #C4622D, #E8855A); }
.ps-bar-inner.teal   { background: linear-gradient(90deg, #3A8A82, #5AB8B0); }
.ps-count { font-family: 'DM Mono', monospace; font-weight: 600; font-size: 12px; min-width: 32px; text-align: right; color: var(--espresso); }

/* ── User rows ── */
.ps-user-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
}
.ps-user-row + .ps-user-row { border-top: 1px solid rgba(44,31,20,.06); }
.ps-avatar {
  width: 32px; height: 32px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--cream);
  flex-shrink: 0;
}
.ps-avatar-init {
  width: 32px; height: 32px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700;
  flex-shrink: 0;
  font-family: 'DM Sans', sans-serif;
}
.ps-user-row:nth-child(3n+1) .ps-avatar-init { background: rgba(196,98,45,.14); color: #C4622D; }
.ps-user-row:nth-child(3n+2) .ps-avatar-init { background: rgba(58,138,130,.14); color: #3A8A82; }
.ps-user-row:nth-child(3n)   .ps-avatar-init { background: rgba(124,92,191,.14); color: #7C5CBF; }
.ps-user-name {
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: var(--espresso);
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ps-user-name a { color: inherit; text-decoration: none; transition: color .2s; }
.ps-user-name a:hover { color: var(--copper); }
.ps-user-meta {
  font-family: 'DM Mono', monospace;
  font-size: 10px;
  color: var(--text-muted);
  white-space: nowrap;
}

/* ── Reading info grid ── */
.ps-info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.ps-info-item {
  background: var(--cream);
  border-radius: 12px;
  padding: 14px;
  border: 1px solid rgba(44,31,20,.05);
}
.ps-info-label {
  font-family: 'DM Mono', monospace;
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--text-muted);
  margin-bottom: 6px;
}
.ps-info-value {
  font-family: 'Playfair Display', serif;
  font-size: 22px;
  font-weight: 900;
  color: var(--espresso);
  letter-spacing: -0.5px;
}

/* ── Empty state ── */
.ps-empty {
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  color: var(--text-muted);
  text-align: center;
  padding: 28px 0;
  opacity: .6;
}

/* ── Responsive ── */
@media (max-width: 900px) {
  .ps-main-grid { grid-template-columns: 1fr; }
  .ps-overview-strip { grid-template-columns: repeat(2, 1fr); }
  .ps-eng-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .ps-page { padding: 0 16px 60px; }
  .ps-overview-strip { grid-template-columns: 1fr 1fr; }
  .ps-eng-grid { grid-template-columns: 1fr 1fr; }
  .ps-info-grid { grid-template-columns: 1fr; }
  .ps-hero { padding: 28px 0 24px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   §A2 — Analytics V2 page (/analytics1)
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 4-category overview strip ── */
.a2-overview-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 32px;
}
.a2-cat-card {
  border-radius: 16px;
  padding: 22px 20px 18px;
  position: relative;
  overflow: hidden;
  border: 1px solid transparent;
  transition: transform .25s cubic-bezier(.34,1.56,.64,1), box-shadow .25s;
  animation: anCardIn .5s ease both;
}
.a2-cat-card:hover { transform: translateY(-4px) scale(1.01); }
/* top accent bar */
.a2-cat-card::after {
  content: ''; position: absolute; top: 0; left: 0; right: 0;
  height: 3px; border-radius: 16px 16px 0 0;
}
/* inner shine */
.a2-cat-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0;
  height: 50%; background: linear-gradient(180deg, rgba(255,255,255,.28) 0%, transparent 100%);
  pointer-events: none; border-radius: 16px 16px 0 0;
}
/* per-card color gradients + shadows */
.a2-cc-profile  { background: linear-gradient(145deg, rgba(196,98,45,.11) 0%, rgba(196,98,45,.04) 45%, var(--warm-white) 70%);  border-color: rgba(196,98,45,.22);  box-shadow: 0 2px 8px rgba(196,98,45,.09), 0 8px 24px rgba(196,98,45,.06), inset 0 1px 0 rgba(255,255,255,.7); }
.a2-cc-writeups { background: linear-gradient(145deg, rgba(232,160,66,.11) 0%, rgba(232,160,66,.04) 45%, var(--warm-white) 70%); border-color: rgba(232,160,66,.22); box-shadow: 0 2px 8px rgba(232,160,66,.09), 0 8px 24px rgba(232,160,66,.06), inset 0 1px 0 rgba(255,255,255,.7); }
.a2-cc-blogs    { background: linear-gradient(145deg, rgba(58,138,130,.11) 0%, rgba(58,138,130,.04) 45%, var(--warm-white) 70%); border-color: rgba(58,138,130,.22); box-shadow: 0 2px 8px rgba(58,138,130,.09), 0 8px 24px rgba(58,138,130,.06), inset 0 1px 0 rgba(255,255,255,.7); }
.a2-cc-blogposts{ background: linear-gradient(145deg, rgba(124,92,191,.11) 0%, rgba(124,92,191,.04) 45%, var(--warm-white) 70%); border-color: rgba(124,92,191,.22); box-shadow: 0 2px 8px rgba(124,92,191,.09), 0 8px 24px rgba(124,92,191,.06), inset 0 1px 0 rgba(255,255,255,.7); }
/* accent bars */
.a2-cc-profile::after  { background: linear-gradient(90deg, #C4622D, #E8855A); }
.a2-cc-writeups::after { background: linear-gradient(90deg, #E8A042, #F5C97A); }
.a2-cc-blogs::after    { background: linear-gradient(90deg, #3A8A82, #5AB8B0); }
.a2-cc-blogposts::after{ background: linear-gradient(90deg, #7C5CBF, #A689D8); }
/* hover glow */
.a2-cc-profile:hover  { box-shadow: 0 8px 24px rgba(196,98,45,.22), 0 20px 48px rgba(196,98,45,.12), inset 0 1px 0 rgba(255,255,255,.85);  border-color: rgba(196,98,45,.35); }
.a2-cc-writeups:hover { box-shadow: 0 8px 24px rgba(232,160,66,.22), 0 20px 48px rgba(232,160,66,.12), inset 0 1px 0 rgba(255,255,255,.85); border-color: rgba(232,160,66,.35); }
.a2-cc-blogs:hover    { box-shadow: 0 8px 24px rgba(58,138,130,.22), 0 20px 48px rgba(58,138,130,.12), inset 0 1px 0 rgba(255,255,255,.85); border-color: rgba(58,138,130,.35); }
.a2-cc-blogposts:hover{ box-shadow: 0 8px 24px rgba(124,92,191,.22), 0 20px 48px rgba(124,92,191,.12), inset 0 1px 0 rgba(255,255,255,.85); border-color: rgba(124,92,191,.35); }

.a2-cc-icon {
  width: 44px; height: 44px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 14px;
}
.a2-cc-profile  .a2-cc-icon { background: rgba(196,98,45,.16);  color: #C4622D; box-shadow: 0 4px 14px rgba(196,98,45,.25); }
.a2-cc-writeups .a2-cc-icon { background: rgba(232,160,66,.16); color: #C8841A; box-shadow: 0 4px 14px rgba(232,160,66,.25); }
.a2-cc-blogs    .a2-cc-icon { background: rgba(58,138,130,.16); color: #3A8A82; box-shadow: 0 4px 14px rgba(58,138,130,.25); }
.a2-cc-blogposts .a2-cc-icon{ background: rgba(124,92,191,.16); color: #7C5CBF; box-shadow: 0 4px 14px rgba(124,92,191,.25); }

.a2-cc-title {
  font-family: 'Playfair Display', serif;
  font-size: 15px; font-weight: 700;
  color: var(--espresso, #2C1F14);
  margin-bottom: 12px;
}
.a2-cc-metrics {
  display: flex; gap: 16px; flex-wrap: wrap;
}
.a2-cc-metric { min-width: 0; }
.a2-cc-num {
  font-family: 'Playfair Display', serif;
  font-size: 24px; font-weight: 900;
  letter-spacing: -.5px;
  line-height: 1.1;
}
.a2-cc-profile  .a2-cc-num { color: #C4622D; }
.a2-cc-writeups .a2-cc-num { color: #C8841A; }
.a2-cc-blogs    .a2-cc-num { color: #3A8A82; }
.a2-cc-blogposts .a2-cc-num{ color: #7C5CBF; }

.a2-cc-label {
  font-family: 'DM Sans', sans-serif;
  font-size: 10.5px; font-weight: 500; color: var(--text-muted, #8b7e74);
  margin-top: 3px; letter-spacing: .2px;
}
.a2-cc-badge {
  margin-top: 12px;
  font-family: 'DM Mono', monospace;
  font-size: 10px; font-weight: 600;
  padding: 3px 9px; border-radius: 20px;
  display: inline-flex; align-items: center; gap: 3px;
}
.a2-cc-badge.up { color: #16a34a; background: rgba(22,163,74,.12); }
.a2-cc-badge.same { color: #92400e; background: rgba(232,160,66,.15); }

/* ── Engagement grid ── */
.a2-eng-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.a2-eng-panel { min-width: 0; }
.a2-eng-total-badge {
  font-family: 'DM Mono', monospace;
  font-size: 11px; font-weight: 600;
  padding: 4px 10px; border-radius: 8px;
  background: rgba(232,160,66,.12);
  color: var(--amber);
}
.a2-eng-row-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.a2-eng-item {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px;
  border-radius: 8px;
  background: var(--parchment, #faf9f7);
  border: 1px solid var(--mist, #E8E2D9);
}
.a2-eng-item-icon {
  width: 28px; height: 28px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  background: rgba(255,255,255,.8);
}
.a2-eng-item-body { flex: 1; min-width: 0; }
.a2-eng-item-num {
  font-family: 'DM Mono', monospace;
  font-size: 15px; font-weight: 700;
  color: var(--ink);
  line-height: 1.1;
}
.a2-eng-item-label {
  font-family: 'DM Sans', sans-serif;
  font-size: 10px; color: var(--text-muted);
  margin-top: 1px;
}
.a2-eng-item-period {
  font-family: 'DM Mono', monospace;
  font-size: 10px; font-weight: 600;
  color: var(--teal);
  white-space: nowrap;
}

/* ── Top this month grid ── */
.a2-top-month-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

/* ── Engagement line chart ── */
.a2-linechart-wrap {
  width: 100%;
  aspect-ratio: 700 / 200;
  position: relative;
}
.a2-linechart-svg {
  display: block;
  width: 100%;
  height: 100%;
  cursor: crosshair;
}
.a2-lc-tooltip {
  position: absolute; z-index: 300;
  background: var(--warm-white, #FDFAF6);
  border: 1.5px solid var(--mist, #E8E2D9);
  border-radius: 8px;
  padding: 8px 12px;
  font-family: 'DM Sans', sans-serif;
  font-size: 12px; color: var(--ink);
  line-height: 1.5;
  box-shadow: 0 6px 24px rgba(44,31,20,.12);
  pointer-events: none;
  white-space: nowrap;
}

/* ── Heatmap tooltip ── */
.a2-hm-tooltip {
  position: absolute; z-index: 300;
  background: var(--warm-white, #FDFAF6);
  border: 1.5px solid var(--mist, #E8E2D9);
  border-radius: 8px;
  padding: 10px 14px;
  font-family: 'DM Sans', sans-serif;
  font-size: 12px; color: var(--ink);
  line-height: 1.6;
  box-shadow: 0 8px 28px rgba(44,31,20,.14);
  pointer-events: none;
  max-width: 260px;
  white-space: nowrap;
}
.a2-hm-dot {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 2px;
  margin-right: 4px;
  vertical-align: middle;
}

/* Heatmap legend extras */
.a2-hm-legend-sep {
  color: var(--mist); margin: 0 4px;
  font-size: 11px;
}
.a2-hm-legend-key {
  display: inline-flex; align-items: center; gap: 3px;
  font-family: 'DM Sans', sans-serif;
  font-size: 10.5px; color: var(--text-muted);
  margin-left: 4px;
}

/* ── Responsive ── */
@media (max-width: 1100px) {
  .a2-overview-strip { grid-template-columns: repeat(2, 1fr); }
  .a2-eng-grid { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .a2-overview-strip { grid-template-columns: 1fr; }
  .a2-top-month-grid { grid-template-columns: 1fr; }
  .a2-eng-row-grid { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════════════════
   §53  MESSAGING (msg-*)
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Page layout ── */
.msg-page { display:flex; height:calc(100vh - 60px); background:var(--parchment); overflow:hidden; }

/* ── Sidebar ── */
.msg-sidebar {
  width:340px; flex-shrink:0; display:flex; flex-direction:column;
  background:var(--card-bg, #fff); border-right:1px solid var(--border, #e4ddd5);
}
.msg-sidebar__header {
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 20px 12px; border-bottom:1px solid var(--border, #e4ddd5);
}
.msg-sidebar__title { font-family:var(--font-serif); font-size:1.2rem; font-weight:700; color:var(--ink); margin:0; }
.msg-sidebar__compose {
  width:34px; height:34px; border-radius:50%; border:none; cursor:pointer;
  background:var(--accent); color:white; display:flex; align-items:center; justify-content:center;
  transition:transform .15s, box-shadow .15s;
}
.msg-sidebar__compose:hover { transform:scale(1.08); box-shadow:0 2px 8px rgba(232,85,61,.3); }
.msg-sidebar__search {
  padding:10px 16px; border-bottom:1px solid var(--border, #e4ddd5);
}
.msg-sidebar__search input {
  width:100%; padding:8px 12px 8px 34px; border:1px solid var(--border, #e4ddd5);
  border-radius:8px; font-family:var(--font-sans); font-size:.82rem; color:var(--ink);
  background:var(--parchment) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='none' stroke='%239a8c7c' stroke-width='2' viewBox='0 0 24 24'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E") 11px center no-repeat;
  outline:none; transition:border-color .2s;
}
.msg-sidebar__search input:focus { border-color:var(--accent); }
.msg-sidebar__search input::placeholder { color:rgba(26,22,18,.35); }

/* ── Thread list (styles in view inline CSS, only modifier overrides here) ── */

/* ── Conversation area + messages + date separators (styles in view inline CSS) ── */

/* ── Bubble modifiers (temp/error states for JS-rendered messages) ── */
.msg-bubble--temp .msg-bubble--own { opacity:.7; }
.msg-bubble--error .msg-bubble--own { border:1px solid rgba(220,38,38,.4); border-radius:16px; }

/* ── Compose bar + empty states (styles in view inline CSS) ── */

/* ── Upgrade prompt overlay ── */
.msg-upgrade-overlay {
  display:none; position:fixed; inset:0; z-index:1000;
  background:rgba(26,16,8,.55); backdrop-filter:blur(3px);
  align-items:center; justify-content:center;
}
.msg-upgrade-overlay.active { display:flex; }
.msg-upgrade-card {
  background:white; border-radius:16px; max-width:420px; width:90%;
  padding:32px; text-align:center;
  animation:msgFadeIn .25s ease;
}
@keyframes msgFadeIn { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:translateY(0); } }
.msg-upgrade-card__title { font-family:var(--font-serif); font-size:1.3rem; font-weight:700; color:var(--ink); margin-bottom:8px; }
.msg-upgrade-card__body { font-size:.875rem; color:rgba(26,22,18,.55); line-height:1.6; margin-bottom:24px; }
.msg-upgrade-card__actions { display:flex; flex-direction:column; gap:10px; }
.msg-upgrade-card__close {
  position:absolute; top:12px; right:12px; width:28px; height:28px;
  border:none; background:rgba(0,0,0,.05); border-radius:50%;
  cursor:pointer; display:flex; align-items:center; justify-content:center; color:rgba(26,22,18,.4);
}
.msg-upgrade-card__close:hover { background:rgba(0,0,0,.1); }

/* ── Nav message badge ── */
.msg-nav-badge {
  position:absolute; top:-2px; right:-2px; min-width:16px; height:16px;
  border-radius:8px; padding:0 4px; background:var(--accent); color:white;
  font-size:.6rem; font-weight:700; font-family:var(--font-mono);
  display:flex; align-items:center; justify-content:center;
  pointer-events:none;
}

/* ── Compose search (inline username input) ── */
.msg-compose-search {
  display:none; padding:10px 16px; border-bottom:1px solid var(--border, #e4ddd5);
  background:var(--parchment);
}
.msg-compose-search.active { display:block; }
.msg-compose-search input {
  width:100%; padding:8px 12px; border:1.5px solid var(--accent); border-radius:8px;
  font-family:var(--font-sans); font-size:.85rem; color:var(--ink);
  background:var(--card-bg, #fff); outline:none;
}
.msg-compose-search input::placeholder { color:rgba(26,22,18,.35); }

/* ── Responsive ── */
@media (max-width:768px) {
  .msg-sidebar { width:100%; min-width:0; border-right:none; }
  .msg-conversation { display:none; }
  .msg-conv--active { display:flex !important; }
  .msg-sidebar--hidden { display:none !important; }
  .msg-conv-header__back { display:flex; }
  .msg-page { height:calc(100vh - 60px); }
}

/* ═══════════════════════════════════════════════════════════════════════
   §54  SEARCH DROPDOWN (srch-*)
   ═══════════════════════════════════════════════════════════════════════ */

.srch-dropdown {
  display:none; position:absolute; top:calc(100% + 6px); left:0; right:0;
  background:var(--card-bg, #fff); border:1px solid var(--border, #e4ddd5);
  border-radius:12px; box-shadow:0 12px 40px rgba(0,0,0,.12);
  max-height:460px; overflow-y:auto; z-index:500;
  scrollbar-width:thin;
}
.srch-dropdown.active { display:block; }

.srch-section { padding:6px 0; }
.srch-section + .srch-section { border-top:1px solid rgba(0,0,0,.05); }
.srch-section-title {
  padding:8px 16px 4px; font-size:.6rem; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase; color:rgba(26,22,18,.35);
  font-family:var(--font-mono);
}
.srch-item {
  display:flex; align-items:center; gap:10px; padding:8px 16px;
  cursor:pointer; transition:background .1s; text-decoration:none; color:inherit;
}
.srch-item:hover, .srch-item.srch-item--active { background:rgba(0,0,0,.03); }
.srch-item--active { background:rgba(196,98,45,.06) !important; }

.srch-avatar {
  width:34px; height:34px; border-radius:50%; flex-shrink:0;
  background:var(--accent); color:#fff; display:flex; align-items:center; justify-content:center;
  font-family:var(--font-serif); font-weight:700; font-size:.75rem; overflow:hidden;
}
.srch-avatar img { width:100%; height:100%; object-fit:cover; }
.srch-avatar--sq { border-radius:6px; }

.srch-icon {
  width:34px; height:34px; border-radius:8px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
}
.srch-icon--writeup { background:rgba(196,98,45,.08); color:#C4622D; }
.srch-icon--blog    { background:rgba(58,138,130,.08); color:#3A8A82; }
.srch-icon--topic   { background:rgba(124,92,191,.08); color:#7C5CBF; }

.srch-text { flex:1; min-width:0; }
.srch-title {
  font-size:.82rem; font-weight:500; color:var(--ink);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.srch-title mark { background:rgba(196,98,45,.15); color:inherit; border-radius:2px; padding:0 1px; }
.srch-sub {
  font-size:.7rem; color:rgba(26,22,18,.4); white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis; margin-top:1px;
}

.srch-empty {
  padding:24px 16px; text-align:center; color:rgba(26,22,18,.35); font-size:.82rem;
}
.srch-loading {
  padding:20px 16px; text-align:center; color:rgba(26,22,18,.35); font-size:.78rem;
  display:flex; align-items:center; justify-content:center; gap:8px;
}
.srch-spinner {
  width:14px; height:14px; border:2px solid rgba(196,98,45,.2);
  border-top-color:#C4622D; border-radius:50%;
  animation:srchSpin .6s linear infinite;
}
@keyframes srchSpin { to { transform:rotate(360deg); } }

.srch-footer {
  display:block; text-align:center; padding:10px 16px; border-top:1px solid rgba(0,0,0,.05);
  font-size:.75rem; font-weight:600; color:var(--accent); text-decoration:none;
}
.srch-footer:hover { background:rgba(0,0,0,.02); }

/* ═══════════════════════════════════════════════════════════════
   Mobile touch-target overrides (44px minimum)
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* Nav icon buttons */
  .nav-icon-btn,
  .nav-app button.notif-bell { width: 44px; height: 44px; }
  .nav-profile-btn { width: 40px; height: 40px; }
  /* Engagement bar buttons */
  .engage-btn { min-height: 44px; padding: 10px 14px; }
  .engage-btn--aux { min-height: 44px; padding: 10px 14px; }

  /* Follow buttons */
  .btn-follow { min-height: 44px; padding: 10px 16px; font-size: 13px; }
  .btn-follow--sm { min-height: 44px; }

  /* Small buttons */
  .btn-sm { min-height: 44px; padding: 10px 16px; }

  /* Topic tags */
  .topic-tag { min-height: 44px; padding: 10px 14px; }

  /* Feed card kebab menu */
  .feed-card__kebab { width: 44px; height: 44px; }

  /* Comment action buttons */
  .comment-action-btn { min-height: 44px; padding: 8px 10px; }

  /* Feed tabs */
  .feed-tab { min-height: 44px; }

  /* Sidebar nav items */
  .sidebar-nav__item { min-height: 44px; padding: 12px 14px; }

  /* Settings nav items (stp) */
  .stp-nav-item { min-height: 44px; padding: 10px 16px; }

  /* File upload button */
  .file-upload-btn { min-height: 44px; }
}