/* ─── KOOTTAR · LANDING PAGE CSS ─────────────────────────────────────── */

/* ── Google Material Symbols base settings ── */
.mi {
  font-family: 'Material Symbols Rounded';
  font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 20;
  font-size: 18px; line-height: 1; vertical-align: middle;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0; user-select: none; pointer-events: none;
  font-style: normal; font-weight: normal;
}
/* Filled variant */
.mi--filled { font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 20; }
/* Size helpers */
.mi--sm { font-size: 16px; }
.mi--md { font-size: 20px; }
.mi--lg { font-size: 24px; }



/* TOKENS */
:root {
  --ink:       #2D3142;
  --ink2:      #4a5068;
  --ink3:      #7a7868;
  --cream:     #FBF8F0;
  --cream2:    #F5F0E4;
  --cream3:    #ece8de;
  --turmeric:  #F5C842;
  --turmeric2: #F8D96E;
  --turmeric3: #FDF3C3;
  --forest:    #1A936F;
  --chilli:    #F64740;
  --white:     #ffffff;

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;

  --shadow: 0 4px 32px rgba(45,49,66,.07);
}

/* RESET */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
img, svg { display: block; max-width: 100%; }
ul, ol { list-style: none; }
a { text-decoration: none; color: inherit; }
button { cursor: pointer; font-family: inherit; }

/* BASE */
html {
  max-width: 100%;
  overflow-x: hidden;
}
body {
  font-family: 'Inter', sans-serif;
  background: #ffffff;
  color: var(--ink);
  line-height: 1.5;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}

/* ─── REGISTER BUTTONS ───────────────────────────────────────────────── */

/* Nav right group */
.nav-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

.nav-register-btn {
  display: inline-block;
  background: #2D3142;
  color: #fff;
  font-size: 13px;
  font-weight: 500;
  padding: 8px 16px;
  border-radius: 20px;
  white-space: nowrap;
  transition: background .15s;
}
.nav-register-btn:hover { background: #333; }

.nav-login-link {
  font-size: 13px;
  color: var(--ink2);
  font-weight: 500;
  transition: color .15s;
}
.nav-login-link:hover { color: var(--ink); }

/* How it works register row */
.how-register {
  margin-top: 40px;
  display: flex;
  justify-content: center;
}

.how-register-btn {
  display: inline-block;
  background: #2D3142;
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  padding: 12px 28px;
  border-radius: var(--radius-md);
  transition: background .15s;
}
.how-register-btn:hover { background: #333; }

/* Bookstores mockup footer register */
.bs-mockup-footer {
  padding: 14px 20px;
  background: #fffbee;
  border-top: 0.5px solid var(--turmeric3);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 12px;
  color: #7a6200;
  line-height: 1.5;
}

.bs-register-btn {
  display: inline-block;
  background: var(--ink);
  color: var(--turmeric);
  font-size: 12px;
  font-weight: 500;
  padding: 7px 16px;
  border-radius: var(--radius-sm);
  white-space: nowrap;
  transition: opacity .15s;
  flex-shrink: 0;
}
.bs-register-btn:hover { opacity: 0.85; }

/* Footer CTA button */
.footer-cta-btn {
  display: inline-block;
  background: var(--ink);
  color: var(--turmeric);
  font-size: 15px;
  font-weight: 500;
  padding: 13px 28px;
  border-radius: var(--radius-md);
  margin-bottom: 20px;
  transition: opacity .15s;
}
.footer-cta-btn:hover { opacity: 0.85; }

/* ─── TOP NAV (desktop icon+label LinkedIn-style) ───────────────────────── */
nav, .top-nav {
  display: flex;
  align-items: stretch;
  padding: 0 16px;
  height: 56px;
  background: var(--cream);
  border-bottom: 0.5px solid var(--cream3);
  position: sticky;
  top: 0;
  z-index: 200;
}

/* Left group: logo + search bar */
.top-nav-left {
  display: flex;
  align-items: center;
  flex: 1;
  gap: 10px;
  min-width: 0;
}

.top-nav-logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

/* Centre items row — auto width, truly centred */
.top-nav-items {
  display: flex;
  align-items: stretch;
  gap: 0;
  flex: 0 0 auto;
  justify-content: center;
}

/* Each nav item: icon above, label below */
.top-nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-width: 80px;
  padding: 0 4px;
  color: var(--ink3);
  text-decoration: none;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  font-family: inherit;
  font-size: 11px;
  font-weight: 500;
  transition: color .15s, border-color .15s;
  white-space: nowrap;
  position: relative;
  -webkit-tap-highlight-color: transparent;
}
.top-nav-item:hover { color: var(--ink); border-bottom-color: var(--ink3); }
.top-nav-item--active { color: var(--ink); border-bottom-color: var(--ink); }

.top-nav-icon {
  font-size: 22px;
  transition: color .15s;
}
.top-nav-item--active .top-nav-icon { color: var(--ink); }

.top-nav-label {
  font-size: 11px;
  line-height: 1;
  display: flex;
  align-items: center;
  gap: 1px;
}

/* Post button accent */
.top-nav-item--post { color: var(--ink2); }
.top-nav-item--post .top-nav-icon { font-size: 24px; }

/* Business dropdown wrapper */
.top-nav-biz-wrap { position: relative; display: flex; align-items: stretch; }
.top-nav-biz-btn  { /* inherits top-nav-item */ }

/* Right cluster — flex: 1 so it matches left, items pushed to the edge */
.top-nav-right {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  justify-content: flex-end;
}

/* Me dropdown wrapper */
.top-nav-me-wrap { position: relative; display: flex; align-items: stretch; }
.top-nav-me-btn  { min-width: 72px; }

/* Avatar circle inside nav */
.top-nav-me-avatar {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: #2D3142;
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700;
  flex-shrink: 0;
}
.top-nav-me-avatar--lg {
  width: 40px; height: 40px;
  font-size: 16px;
}

/* Me dropdown panel */
.top-nav-me-menu {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  background: var(--cream);
  border: 1px solid var(--cream3);
  border-radius: var(--radius-md);
  box-shadow: 0 8px 32px rgba(45,49,66,.13);
  padding: 6px;
  min-width: 220px;
  z-index: 300;
}
.top-nav-me-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 10px 12px;
}
.top-nav-me-name  { font-size: 14px; font-weight: 700; color: var(--ink); margin: 0; }
.top-nav-me-email { font-size: 12px; color: var(--ink3); margin: 2px 0 0;
                     white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 150px; }

/* Shared divider for dropdowns */
.nav-biz-item-divider { height: 0.5px; background: var(--cream3); margin: 4px 0; }

/* Danger item */
.nav-biz-item--danger { color: #F64740 !important; }
.nav-biz-item--danger:hover { background: #fff2f2 !important; color: #991b1b !important; }

.nav-logo { display: flex; align-items: center; }

.nav-badge {
  font-size: 11px;
  font-weight: 500;
  background: var(--turmeric);
  color: var(--ink);
  padding: 4px 10px;
  border-radius: 20px;
  white-space: nowrap;
}

/* ─── HERO ───────────────────────────────────────────────────────────── */
.hero {
  display: grid;
  grid-template-columns: 1fr 400px;
  gap: 56px;
  align-items: start;
  max-width: 1100px;
  margin: 0 auto;
  padding: 60px 24px 64px;
}
/* Prevent either column from overflowing its allocated track */
.hero > * { min-width: 0; }

/* Eyebrow */
.eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink3);
  margin-bottom: 20px;
}
.eyebrow-line {
  width: 20px;
  height: 1.5px;
  background: var(--turmeric);
  flex-shrink: 0;
}

/* Heading */
.hero h1 {
  font-family: 'Inter', sans-serif;
  font-size: 48px;
  line-height: 1.12;
  letter-spacing: -0.5px;
  color: var(--ink);
  margin-bottom: 16px;
}
.hero h1 em { font-style: italic; }

.hero-sub {
  font-size: 16px;
  color: var(--ink3);
  line-height: 1.75;
  margin-bottom: 28px;
  max-width: 420px;
}

/* Features */
.features { display: flex; flex-direction: column; gap: 10px; margin-bottom: 32px; }

.feat {
  display: flex;
  align-items: center;
  gap: 10px;
}

.feat-dot {
  width: 26px;
  height: 26px;
  min-width: 26px;
  background: var(--turmeric);
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.feat span { font-size: 14px; color: var(--ink2); line-height: 1.4; }

/* Stats */
.hero-stats {
  display: flex;
  gap: 24px;
  padding-top: 24px;
  border-top: 0.5px solid var(--cream3);
  flex-wrap: wrap;
}

.stat-val {
  font-family: 'Inter', sans-serif;
  font-size: 22px;
  font-weight: 600;
  color: var(--ink);
}
.stat-lbl { font-size: 11px; color: var(--ink3); margin-top: 2px; }

/* ─── FORM CARD ──────────────────────────────────────────────────────── */
.form-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  border: 0.5px solid var(--cream3);
  padding: 28px 24px;
  box-shadow: var(--shadow);
  position: sticky;
  top: 76px;
}

.form-pill {
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink3);
  margin-bottom: 5px;
}

.form-card h2 {
  font-family: 'Inter', sans-serif;
  font-size: 20px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 18px;
  line-height: 1.3;
}

.tribe-count {
  font-size: 12px;
  color: var(--forest);
  background: #e8f5ee;
  padding: 7px 12px;
  border-radius: var(--radius-sm);
  margin-bottom: 16px;
}

/* Form fields */
.fg { margin-bottom: 13px; }

.fg label {
  display: block;
  font-size: 12px;
  font-weight: 500;
  color: var(--ink2);
  margin-bottom: 5px;
}

.fg input,
.fg select {
  width: 100%;
  height: 42px;
  border: 1px solid var(--cream3);
  border-radius: var(--radius-sm);
  padding: 0 12px;
  font-size: 14px;
  font-family: 'Inter', sans-serif;
  color: var(--ink);
  background: var(--cream);
  outline: none;
  transition: border-color .15s, background .15s;
}
.fg input:focus,
.fg select:focus {
  border-color: var(--turmeric);
  background: var(--white);
}
.fg input::placeholder { color: #ccc; }
.fg select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink3) 50%), linear-gradient(135deg, var(--ink3) 50%, transparent 50%);
  background-position: calc(100% - 18px) 18px, calc(100% - 13px) 18px;
  background-repeat: no-repeat;
  background-size: 5px 5px, 5px 5px;
  padding-right: 34px;
}

/* Location row */
.loc-row { display: flex; gap: 7px; }
.loc-row input { flex: 1; min-width: 0; }

.loc-btn {
  height: 42px;
  padding: 0 12px;
  background: #2D3142;
  border: 1px solid #2D3142;
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-weight: 500;
  color: #fff;
  display: flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background .15s;
}
.loc-btn:hover { background: #333; border-color: #333; }

.loc-status {
  display: none;
  font-size: 11px;
  color: var(--forest);
  margin-top: 4px;
}
.loc-status.show { display: block; }

.loc-err-msg {
  display: none;
  font-size: 11px;
  color: var(--chilli);
  margin-top: 4px;
}
.loc-err-msg.show { display: block; }

.field-err {
  display: block;
  font-size: 11px;
  color: var(--chilli);
  margin-top: 3px;
  min-height: 16px;
}

.form-err {
  display: none;
  font-size: 12px;
  color: var(--chilli);
  background: #fff0ef;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  margin-top: 8px;
}
.form-err.show { display: block; }

/* Submit */
.submit-btn {
  width: 100%;
  height: 46px;
  background: #2D3142;
  border: none;
  border-radius: var(--radius-md);
  font-size: 15px;
  font-weight: 500;
  color: #fff;
  margin-top: 14px;
  transition: background .15s, transform .1s;
  letter-spacing: 0.01em;
}
.submit-btn:hover { background: #333; }
.submit-btn:active { transform: scale(.98); }
.submit-btn:disabled { opacity: .55; cursor: not-allowed; }

.form-note {
  font-size: 11px;
  color: var(--ink3);
  text-align: center;
  margin-top: 10px;
  line-height: 1.5;
}

/* Success */
.success { display: none; text-align: center; padding: 12px 0; }
.success.show { display: block; }

.success-icon {
  width: 48px;
  height: 48px;
  background: var(--turmeric);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 12px;
  font-size: 20px;
}

.success h3 {
  font-family: 'Inter', sans-serif;
  font-size: 20px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 7px;
}

.success p { font-size: 13px; color: var(--ink3); line-height: 1.65; }

.success-box {
  margin-top: 14px;
  padding: 12px;
  background: var(--cream);
  border-radius: var(--radius-sm);
  font-size: 12px;
  color: var(--ink3);
  line-height: 1.65;
  text-align: left;
}

/* ─── BOOK CAROUSEL ─────────────────────────────────────────────────── */
/* ─── HERO CAROUSEL (inline, fills empty left-column space) ─────────── */
.hero-carousel {
  margin-top: 32px;
  padding-top: 28px;
  border-top: 0.5px solid var(--cream3);
}
.hero-carousel--col {
  margin-top: 0;
  padding: 20px 20px 16px;
  border-top: none;
  background: var(--white);
  border-radius: var(--radius-lg);
  border: 0.5px solid var(--cream3);
  box-shadow: var(--shadow);
  position: sticky;
  top: 76px;
}
.hero-carousel-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}
.hero-carousel-label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink3);
}
.hero-carousel-browse {
  display: inline-block;
  margin-top: 12px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink2);
  text-decoration: none;
}
.hero-carousel-browse:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.book-carousel-controls { display: flex; gap: 8px; flex-shrink: 0; }
.book-carousel-controls button {
  width: 40px;
  height: 40px;
  border: 0.5px solid var(--cream3);
  border-radius: 50%;
  background: var(--white);
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.15s, opacity 0.15s;
}
.book-carousel-controls button:not(:disabled):hover { background: var(--turmeric3); }
.book-carousel-controls button:disabled { opacity: 0.3; cursor: not-allowed; }
.book-carousel-viewport {
  overflow: hidden;
  position: relative;
}
.book-carousel-viewport::before,
.book-carousel-viewport::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  width: 28px;
  z-index: 2;
  pointer-events: none;
}
.book-carousel-viewport::before {
  left: 0;
  background: linear-gradient(to right, var(--cream2), transparent);
}
.book-carousel-viewport::after {
  right: 0;
  background: linear-gradient(to left, var(--cream2), transparent);
}
.book-carousel-track {
  display: flex;
  gap: 14px;
  padding: 4px 4px;
  transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
}
.book-carousel-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 20px;
}
.bc-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: none;
  background: var(--cream3);
  cursor: pointer;
  padding: 0;
  transition: background 0.2s, transform 0.2s;
}
.bc-dot.active {
  background: var(--turmeric);
  transform: scale(1.4);
}
.book-carousel-card {
  flex: 0 0 220px;
  background: var(--white);
  border: 0.5px solid var(--cream3);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow);
}
.book-carousel-card a {
  color: inherit;
  display: block;
  text-decoration: none;
}
.book-carousel-card a:hover h3 { text-decoration: underline; text-underline-offset: 3px; }
.book-carousel-cover {
  aspect-ratio: 2 / 3;
  background: #fff;
  overflow: hidden;
}
.book-carousel-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}
.book-carousel-placeholder {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  background: #f5f2ec;
  color: var(--ink);
  font-family: 'Inter', sans-serif;
  font-size: 40px;
  font-weight: 700;
  text-transform: uppercase;
  border-radius: 4px;
}
.book-carousel-info { padding: 14px 14px 16px; }
.book-carousel-info h3 {
  font-size: 15px;
  line-height: 1.3;
  color: var(--ink);
  margin-bottom: 5px;
}
.book-carousel-info p {
  font-size: 12px;
  color: var(--ink3);
  line-height: 1.5;
  margin-bottom: 8px;
}
.book-carousel-info > span {
  display: inline-block;
  background: var(--turmeric3);
  color: var(--ink2);
  font-size: 11px;
  font-weight: 600;
  padding: 4px 8px;
  border-radius: 14px;
}

/* ─── TAG LINKS (shared: books grid + book detail) ─────────────────── */
.books-tag-link {
  background: var(--cream);
  border: 0.5px solid var(--cream3);
  border-radius: 999px;
  color: var(--ink2);
  font-size: 11px;
  font-weight: 600;
  padding: 5px 10px;
  text-decoration: none;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  white-space: nowrap;
}
.books-tag-link:hover,
.books-tag-link.active {
  background: var(--turmeric3);
  border-color: var(--turmeric);
  color: var(--ink);
}
/* Filter bar */
.books-filter-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
  font-size: 13px;
  color: var(--ink3);
}
.books-filter-active-tag {
  background: var(--turmeric3);
  border: 0.5px solid var(--turmeric);
  border-radius: 999px;
  color: var(--ink);
  font-size: 12px;
  font-weight: 600;
  padding: 4px 10px;
}
.books-filter-clear {
  color: var(--ink3);
  font-size: 12px;
  text-decoration: none;
}
.books-filter-clear:hover { color: var(--ink); text-decoration: underline; }
.books-no-match {
  padding: 28px 0;
  font-size: 15px;
  color: var(--ink3);
}
/* Detail page tag row */
.book-detail-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 24px;
}
.book-detail-topics-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}
/* Similar books section */
.book-similar-sec {
  padding: 56px 24px 72px;
  background: var(--cream2);
  border-top: 0.5px solid var(--cream3);
}
.book-similar-inner {
  max-width: 1100px;
  margin: 0 auto;
}
.book-similar-inner h2 {
  font-family: 'Inter', sans-serif;
  font-size: 26px;
  color: var(--ink);
  margin: 8px 0 24px;
}

/* ─── PAGE CAROUSEL (full-width, used on location / area pages) ─────── */
.page-carousel-sec {
  background: var(--cream2);
  border-top: 0.5px solid var(--cream3);
  border-bottom: 0.5px solid var(--cream3);
  padding: 56px 24px 60px;
}
.page-carousel-inner {
  max-width: 1100px;
  margin: 0 auto;
}
.page-carousel-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
  margin-bottom: 24px;
}
.page-carousel-head h2 {
  font-family: 'Inter', sans-serif;
  font-size: 28px;
  color: var(--ink);
  margin: 8px 0 0;
}
.page-carousel-head p {
  font-size: 14px;
  color: var(--ink3);
  margin-top: 6px;
  line-height: 1.6;
}
.page-carousel-cta {
  margin-top: 20px;
  text-align: center;
}
.page-carousel-browse {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink2);
  text-decoration: none;
}
.page-carousel-browse:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 600px) {
  .page-carousel-sec { padding: 40px 16px 48px; }
  .page-carousel-head { flex-direction: column; align-items: flex-start; gap: 12px; }
}

/* ─── BOOK SEO PAGES ───────────────────────────────────────────────── */
.books-page,
.book-detail-page { background: var(--white); }
.books-hero,
.book-detail-hero {
  background: var(--cream2);
  border-bottom: 0.5px solid var(--cream3);
  padding: 62px 24px 54px;
}
.books-hero-inner,
.books-list-inner,
.book-detail-inner,
.book-detail-body-inner,
.book-detail-topics > div {
  max-width: 1100px;
  margin: 0 auto;
}
.books-hero h1,
.book-detail-copy h1 {
  color: var(--ink);
  font-family: 'Inter', sans-serif;
  font-size: 48px;
  font-weight: 600;
  line-height: 1.05;
  margin: 8px 0 16px;
}
.books-hero p:not(.sec-ey),
.book-detail-seo {
  color: var(--ink2);
  font-size: 17px;
  line-height: 1.8;
  max-width: 720px;
}
.books-list-sec,
.book-detail-body,
.book-detail-topics { padding: 54px 24px 72px; }
.books-list-head {
  align-items: center;
  display: flex;
  gap: 18px;
  justify-content: space-between;
  margin-bottom: 24px;
}
.books-list-head h2,
.book-detail-description h2,
.book-detail-topics h2 {
  color: var(--ink);
  font-family: 'Inter', sans-serif;
  font-size: 28px;
  font-weight: 600;
}
.books-list-head a,
.book-detail-actions a:first-child {
  background: var(--turmeric);
  border-radius: var(--radius-sm);
  color: var(--ink);
  font-size: 14px;
  font-weight: 700;
  padding: 11px 18px;
  text-decoration: none;
}
.books-list-head a:hover,
.book-detail-actions a:first-child:hover { background: var(--turmeric2); }
.books-grid {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: start;
}
.books-card {
  background: var(--white);
  border: 0.5px solid var(--cream3);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow);
}
.books-card a {
  color: inherit;
  display: flex;
  flex-direction: column;
  text-decoration: none;
}
.books-card a:hover h3 { text-decoration: underline; text-underline-offset: 3px; }
.books-card-cover {
  aspect-ratio: 2 / 3;
  background: #fff;
  overflow: hidden;
  display: block;
}
.books-card-cover img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}
.books-card-placeholder,
.book-detail-placeholder {
  align-items: center;
  background: #f5f2ec;
  color: var(--ink);
  display: flex;
  font-family: 'Inter', sans-serif;
  font-size: 42px;
  font-weight: 700;
  height: 100%;
  justify-content: center;
  text-transform: uppercase;
  border-radius: 4px;
}
.book-detail-placeholder {
  aspect-ratio: 2 / 3;
  height: auto;
  width: 100%;
}
.books-card-body { padding: 15px 15px 17px; display: flex; flex-direction: column; }
.books-card-body h3 {
  color: var(--ink);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.3;
  margin-bottom: 6px;
}
.books-card-body p {
  color: var(--ink3);
  font-size: 13px;
  line-height: 1.5;
  margin-bottom: 12px;
}
.books-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}
.books-card-meta span {
  background: var(--ink);
  border-radius: 999px;
  color: var(--white);
  font-size: 10px;
  font-weight: 600;
  padding: 4px 9px;
  letter-spacing: 0.03em;
}
.books-seo-copy {
  background: var(--cream2);
  border: 0.5px solid var(--cream3);
  border-radius: var(--radius-md);
  margin-bottom: 28px;
  padding: 22px 24px;
}
.books-seo-copy p {
  color: var(--ink2);
  font-size: 16px;
  line-height: 1.75;
}
.books-empty {
  background: var(--cream);
  border: 0.5px solid var(--cream3);
  border-radius: var(--radius-md);
  padding: 32px;
}
.books-empty h2 {
  color: var(--ink);
  font-size: 24px;
  margin-bottom: 8px;
}
.books-empty p {
  color: var(--ink2);
  line-height: 1.7;
}
.books-pagination {
  align-items: center;
  display: flex;
  gap: 14px;
  justify-content: center;
  margin-top: 28px;
}
.books-pagination a {
  background: var(--white);
  border: 0.5px solid var(--cream3);
  border-radius: var(--radius-sm);
  color: var(--ink);
  font-size: 13px;
  font-weight: 700;
  padding: 9px 14px;
  text-decoration: none;
}
.books-pagination a:hover {
  border-color: var(--turmeric);
}
.books-pagination span {
  color: var(--ink3);
  font-size: 13px;
}
.book-detail-inner {
  align-items: center;
  display: grid;
  gap: 48px;
  grid-template-columns: 360px minmax(0, 1fr);
}
.book-detail-media {
  background: #fff;
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: 0 8px 28px rgba(0,0,0,0.13), 0 2px 6px rgba(0,0,0,0.07);
}
.book-detail-media img {
  display: block;
  width: 100%;
  object-fit: cover;
  object-position: center top;
}
.book-detail-author {
  color: var(--ink2);
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 18px;
}
.book-detail-author a,
.book-detail-facts strong a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--turmeric);
  text-underline-offset: 4px;
}
.book-detail-author a:hover,
.book-detail-facts strong a:hover {
  color: var(--ink);
}
.book-detail-ai-summary {
  background: var(--cream2);
  border: 0.5px solid var(--cream3);
  border-radius: var(--radius-md);
  color: var(--ink2);
  font-size: 15px;
  line-height: 1.7;
  margin: 0 0 22px;
  padding: 16px 18px;
}
.book-detail-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 26px;
}
.book-detail-actions a:last-child {
  border: 0.5px solid var(--cream3);
  border-radius: var(--radius-sm);
  color: var(--ink2);
  font-size: 14px;
  font-weight: 700;
  padding: 11px 18px;
  text-decoration: none;
}
.book-detail-actions a:last-child:hover {
  border-color: var(--turmeric);
  color: var(--ink);
}
.book-detail-body-inner {
  align-items: start;
  display: grid;
  gap: 42px;
  grid-template-columns: minmax(0, 1fr) 340px;
}
.book-detail-description p:not(.sec-ey) {
  color: var(--ink2);
  font-size: 16px;
  line-height: 1.85;
  margin-top: 16px;
}
.book-detail-facts { border-top: 0.5px solid var(--cream3); }
.book-detail-facts div {
  border-bottom: 0.5px solid var(--cream3);
  display: grid;
  gap: 6px;
  padding: 14px 0;
}
.book-detail-facts span {
  color: var(--ink3);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.book-detail-facts strong {
  color: var(--ink);
  font-size: 15px;
  line-height: 1.45;
}
.book-detail-topics {
  background: var(--cream2);
  border-top: 0.5px solid var(--cream3);
}

/* ─── BOOK DETAIL — unified sidebar layout ──────────────────────────────── */
.bdl-wrap {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  gap: 0 56px;
  align-items: start;
  max-width: 1140px;
  margin: 0 auto;
  padding: 52px 32px 80px;
}
.bdl-sidebar {
  position: sticky;
  top: 80px;
}
.book-detail-media {
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: 0 8px 28px rgba(0,0,0,0.13), 0 2px 6px rgba(0,0,0,0.07);
  margin-bottom: 20px;
}
.book-detail-media img {
  display: block;
  width: 100%;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  object-position: center top;
}
.bdl-sidebar-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 28px;
}
.bdl-btn-primary {
  background: #2D3142;
  border-radius: var(--radius-sm);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  padding: 12px 18px;
  text-align: center;
  text-decoration: none;
  transition: background 0.15s;
}
.bdl-btn-primary:hover { background: #333; }
.bdl-btn-primary--muted {
  background: var(--cream2);
  color: var(--ink3);
  cursor: default;
  pointer-events: none;
}
.bdl-btn-secondary {
  border: 0.5px solid var(--cream3);
  border-radius: var(--radius-sm);
  color: var(--ink2);
  font-size: 13px;
  font-weight: 600;
  padding: 10px 18px;
  text-align: center;
  text-decoration: none;
  transition: border-color 0.15s, color 0.15s;
}
.bdl-btn-secondary:hover { border-color: var(--turmeric); color: var(--ink); }
.bdl-main { min-width: 0; }
.bdl-title {
  color: var(--ink);
  font-family: 'Inter', sans-serif;
  font-size: 40px;
  font-weight: 700;
  line-height: 1.1;
  margin: 6px 0 14px;
}
.bdl-description {
  margin-top: 36px;
  padding-top: 32px;
  border-top: 0.5px solid var(--cream3);
}
.bdl-description h2 {
  color: var(--ink);
  font-family: 'Inter', sans-serif;
  font-size: 22px;
  font-weight: 600;
  margin: 8px 0 0;
}
.bdl-description p:not(.sec-ey) {
  color: var(--ink2);
  font-size: 16px;
  line-height: 1.85;
  margin-top: 14px;
}
.bdl-topics {
  margin-top: 36px;
  padding-top: 28px;
  border-top: 0.5px solid var(--cream3);
}
.bdl-similar {
  margin-top: 48px;
  padding-top: 36px;
  border-top: 0.5px solid var(--cream3);
}
.bdl-similar h2 {
  color: var(--ink);
  font-family: 'Inter', sans-serif;
  font-size: 22px;
  font-weight: 600;
  margin: 8px 0 24px;
}
.bdl-similar-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 900px) {
  .books-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .book-detail-inner,
  .book-detail-body-inner {
    grid-template-columns: 1fr;
  }
  .bdl-wrap {
    grid-template-columns: 1fr;
    padding: 36px 20px 60px;
  }
  .bdl-sidebar {
    position: static;
    display: grid;
    grid-template-columns: 180px 1fr;
    gap: 0 24px;
    align-items: start;
  }
  .book-detail-media { margin-bottom: 0; }
  .bdl-sidebar-actions { margin-top: 0; }
  .book-detail-facts { grid-column: 1 / -1; }
  .bdl-title { font-size: 30px; }
  .bdl-similar-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .bdl-wrap { padding: 28px 16px 48px; }
  .bdl-sidebar { grid-template-columns: 1fr; }
  .bdl-title { font-size: 26px; }
  .bdl-similar-grid { grid-template-columns: 1fr; }
}
@media (max-width: 580px) {
  .books-hero,
  .book-detail-hero {
    padding: 42px 16px 36px;
  }
  .books-list-sec,
  .book-detail-body,
  .book-detail-topics {
    padding: 38px 16px 54px;
  }
  .books-hero h1,
  .book-detail-copy h1 {
    font-size: 34px;
  }
  .books-hero p:not(.sec-ey),
  .book-detail-seo {
    font-size: 15px;
  }
  .books-list-head {
    align-items: flex-start;
    flex-direction: column;
  }
  .books-grid { grid-template-columns: 1fr; }
  .book-detail-actions {
    flex-direction: column;
  }
  .book-detail-actions a {
    text-align: center;
  }
}

/* ─── HOW IT WORKS ───────────────────────────────────────────────────── */
.how {
  background: var(--ink);
  padding: 72px 24px;
}
.how-inner { max-width: 1100px; margin: 0 auto; }

.sec-ey {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--turmeric);
  margin-bottom: 8px;
}

.how h2 {
  font-family: 'Inter', sans-serif;
  font-size: 36px;
  color: var(--white);
  margin-bottom: 44px;
  letter-spacing: -0.3px;
  line-height: 1.2;
}

.steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
}

.step-n {
  font-family: 'Inter', sans-serif;
  font-size: 28px;
  font-weight: 600;
  color: var(--turmeric);
  opacity: 0.65;
  margin-bottom: 10px;
}

.step h3 {
  font-size: 14px;
  font-weight: 500;
  color: var(--white);
  margin-bottom: 6px;
}

.step p { font-size: 13px; color: #a8a090; line-height: 1.65; }

/* ─── SPACES ─────────────────────────────────────────────────────────── */
.spaces-sec {
  padding: 72px 24px;
  max-width: 1100px;
  margin: 0 auto;
}

.sec-ey-dk {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink3);
  margin-bottom: 8px;
}

.spaces-sec h2 {
  font-family: 'Inter', sans-serif;
  font-size: 34px;
  color: var(--ink);
  margin-bottom: 32px;
  letter-spacing: -0.3px;
  line-height: 1.2;
}

.spaces-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.space-card {
  background: var(--white);
  border: 0.5px solid var(--cream3);
  border-radius: 13px;
  padding: 18px;
}

.space-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 7px;
}

.space-name { font-size: 13px; font-weight: 500; color: var(--ink); line-height: 1.3; }

.space-deal {
  font-size: 10px;
  font-weight: 500;
  background: var(--turmeric3);
  color: #7a6200;
  padding: 3px 8px;
  border-radius: 6px;
  white-space: nowrap;
  flex-shrink: 0;
}

.space-desc { font-size: 12px; color: var(--ink3); margin-bottom: 8px; line-height: 1.5; }
.space-meta { font-size: 11px; color: #ccc; }

.space-ghost {
  background: var(--cream);
  border: 1.5px dashed var(--cream3);
  border-radius: 13px;
  padding: 18px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  min-height: 120px;
}

.space-ghost-title { font-size: 13px; font-weight: 500; color: var(--ink); margin-bottom: 6px; }
.space-ghost-sub   { font-size: 12px; color: var(--ink3); line-height: 1.5; margin-bottom: 12px; }
.space-ghost-cta   {
  font-size: 11px;
  color: var(--white);
  font-weight: 500;
  background: var(--ink);
  padding: 5px 14px;
  border-radius: 20px;
}

/* ─── SPACES — PRE-LAUNCH STATE ─────────────────────────────────────── */
.spaces-intro {
  font-size: 15px;
  color: var(--ink3);
  line-height: 1.75;
  max-width: 560px;
  margin-bottom: 32px;
}

.spaces-cta-row { display: flex; }

.spaces-cta-card {
  background: var(--white);
  border: 0.5px solid var(--cream3);
  border-radius: var(--radius-lg);
  padding: 28px 32px;
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  width: 100%;
}

.spaces-cta-icon { font-size: 28px; flex-shrink: 0; }

.spaces-cta-card h3 {
  font-size: 16px;
  font-weight: 500;
  color: var(--ink);
  margin-bottom: 5px;
}

.spaces-cta-card p {
  font-size: 13px;
  color: var(--ink3);
  line-height: 1.6;
  max-width: 480px;
}

.spaces-link-btn {
  display: inline-block;
  background: #2D3142;
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  padding: 10px 20px;
  border-radius: var(--radius-md);
  white-space: nowrap;
  flex-shrink: 0;
  margin-left: auto;
  transition: background .15s;
}
.spaces-link-btn:hover { background: #333; }

.perk-dot {
  width: 7px;
  height: 7px;
  min-width: 7px;
  border-radius: 50%;
  background: var(--turmeric);
  display: inline-block;
  flex-shrink: 0;
}

/* ─── FOOTER CTA ─────────────────────────────────────────────────────── */
.footer-cta {
  background: var(--turmeric);
  padding: 72px 24px;
  text-align: center;
}

.footer-cta h2 {
  font-family: 'Inter', sans-serif;
  font-size: 38px;
  color: var(--ink);
  margin-bottom: 10px;
  letter-spacing: -0.3px;
  line-height: 1.2;
}

.footer-cta p { font-size: 15px; color: var(--ink2); margin-bottom: 6px; }
.footer-cta .mal { font-family: 'Inter', sans-serif; font-size: 16px; font-style: italic; color: #7a6200; }

/* ─── FOOTER ─────────────────────────────────────────────────────────── */
footer {
  background: var(--ink);
  padding: 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}

.ft-sub  { font-size: 11px; color: #a8a090; margin-top: 3px; }
.ft-right{ font-size: 11px; color: #a8a090; }

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

.spinner {
  display: inline-block;
  width: 13px;
  height: 13px;
  border: 2px solid var(--ink);
  border-top-color: transparent;
  border-radius: 50%;
  animation: spin .6s linear infinite;
  vertical-align: middle;
  margin-right: 4px;
}

/* ─── WHY KOOTTAR ────────────────────────────────────────────────────── */
.why-sec {
  background: var(--cream);
  padding: 80px 24px;
  border-top: 0.5px solid var(--cream3);
}

.why-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 48px;
}

.why-header h2 {
  font-family: 'Inter', sans-serif;
  font-size: 38px;
  color: var(--ink);
  margin-top: 8px;
  letter-spacing: -0.3px;
  line-height: 1.2;
}

.why-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  align-items: stretch;
}

/* Base card */
.why-card {
  background: var(--white);
  border: 0.5px solid var(--cream3);
  border-radius: 20px;
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* Dark variant */
.why-card-dark {
  background: var(--ink);
  border-color: var(--ink);
}

/* Yellow variant */
.why-card-yellow {
  background: var(--turmeric);
  border-color: var(--turmeric);
}

.why-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
}

.why-num {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--ink3);
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid var(--cream3);
  display: flex;
  align-items: center;
  justify-content: center;
}

.why-num-light {
  color: #a8a090;
  border-color: #f8d96e;
}

.why-num-ink {
  color: var(--ink);
  border-color: rgba(45,49,66,0.25);
}

.why-icon { font-size: 26px; }

/* Card headings */
.why-card h3 {
  font-family: 'Inter', sans-serif;
  font-size: 20px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.3;
}

.why-card-dark h3 { color: var(--white); }
.why-card-yellow h3 { color: var(--ink); }

/* Card body */
.why-card p {
  font-size: 14px;
  color: var(--ink3);
  line-height: 1.75;
  flex: 1;
}

.why-card-dark p { color: #a8a090; }
.why-card-yellow p { color: var(--ink2); }

/* Pull quote */
.why-pull {
  font-family: 'Inter', sans-serif;
  font-style: normal;
  font-size: 15px;
  color: var(--ink);
  border-top: 0.5px solid var(--cream3);
  padding-top: 14px;
  line-height: 1.6;
}

.why-pull-light {
  color: #f8d96e;
  border-color: #2D3142;
}

.why-pull-ink {
  color: var(--ink);
  border-color: rgba(45,49,66,0.2);
}

/* Bottom CTA */
.why-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--cream2);
  border: 0.5px solid var(--cream3);
  border-radius: var(--radius-lg);
  padding: 24px 32px;
  flex-wrap: wrap;
  gap: 16px;
}

.why-cta p {
  font-family: 'Inter', sans-serif;
  font-size: 18px;
  font-style: italic;
  color: var(--ink);
}

.why-cta-btn {
  display: inline-block;
  background: #2D3142;
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  padding: 11px 22px;
  border-radius: var(--radius-md);
  white-space: nowrap;
  transition: background .15s;
}
.why-cta-btn:hover { background: #333; }

/* ─── BOOKSTORES ─────────────────────────────────────────────────────── */
.bookstores-sec {
  background: var(--ink);
  padding: 72px 24px;
}

.bookstores-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.bookstores-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
}

.bookstores-header h2 {
  font-family: 'Inter', sans-serif;
  font-size: 36px;
  color: var(--white);
  margin-bottom: 14px;
  letter-spacing: -0.3px;
  line-height: 1.2;
}

.bookstores-intro {
  font-size: 15px;
  color: #a8a090;
  line-height: 1.75;
  max-width: 560px;
}

.bookstores-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #2D3142;
  border: 0.5px solid #2D3142;
  border-radius: var(--radius-lg);
  padding: 20px 24px;
  text-align: center;
  flex-shrink: 0;
  min-width: 140px;
}

.bs-badge-icon { font-size: 28px; margin-bottom: 8px; }
.bs-badge-text { font-size: 12px; color: var(--turmeric); font-weight: 500; line-height: 1.4; }

/* Mockup */
.bs-mockup {
  background: var(--white);
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 0.5px solid var(--cream3);
}

.bs-mockup-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  background: var(--cream);
  border-bottom: 0.5px solid var(--cream3);
  flex-wrap: wrap;
  gap: 10px;
}

.bs-mockup-label {
  display: block;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink3);
  margin-bottom: 3px;
}

.bs-mockup-book {
  display: block;
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
}

.bs-mockup-tag {
  font-size: 11px;
  font-weight: 500;
  background: var(--turmeric3);
  color: #7a6200;
  padding: 4px 10px;
  border-radius: 20px;
  white-space: nowrap;
}

/* Store list */
.bs-store-list {
  display: flex;
  flex-direction: column;
}

.bs-store-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 0.5px solid var(--cream3);
  gap: 16px;
  transition: background .15s;
}
.bs-store-card:hover { background: var(--cream); }
.bs-store-card:last-child { border-bottom: none; }

.bs-store-card-muted { opacity: 0.65; }

.bs-store-left {
  display: flex;
  align-items: center;
  gap: 14px;
  flex: 1;
  min-width: 0;
}

.bs-store-icon {
  font-size: 22px;
  flex-shrink: 0;
}

.bs-store-name {
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  margin-bottom: 3px;
}

.bs-store-meta {
  font-size: 12px;
  color: var(--ink3);
}

.bs-store-right {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

.bs-store-price {
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
}

.bs-price-na {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 400;
  color: var(--ink3);
}

.bs-directions-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 500;
  color: #fff;
  background: #2D3142;
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  white-space: nowrap;
  transition: background .15s;
}
.bs-directions-btn:hover { background: #333; }

/* Feature pills */
.bs-features {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.bs-feat {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  background: #2D3142;
  border: 0.5px solid #2D3142;
  border-radius: var(--radius-md);
  padding: 18px;
}

.bs-feat-icon { font-size: 20px; flex-shrink: 0; margin-top: 2px; }

.bs-feat h4 {
  font-size: 14px;
  font-weight: 500;
  color: var(--white);
  margin-bottom: 5px;
}

.bs-feat p {
  font-size: 12px;
  color: #a8a090;
  line-height: 1.6;
}

/* ─── RESPONSIVE ─────────────────────────────────────────────────────── */
@media (max-width: 860px) {
  .hero {
    grid-template-columns: 1fr;
    gap: 32px;
    padding: 40px 20px 48px;
  }
  .form-card { position: static; }
  .hero h1  { font-size: 38px; }
  .steps    { grid-template-columns: 1fr 1fr; gap: 24px; }
  .spaces-grid { grid-template-columns: 1fr 1fr; }
  .how h2, .spaces-sec h2, .footer-cta h2 { font-size: 30px; }
  .spaces-become {
    grid-template-columns: 1fr;
    padding: 28px 24px;
    gap: 28px;
  }
  .spaces-become-right { display: none; }
  .bookstores-header { flex-direction: column; }
  .bookstores-badge { flex-direction: row; gap: 12px; align-self: flex-start; min-width: unset; padding: 12px 16px; }
  .bs-features { grid-template-columns: 1fr 1fr; }
  .bookstores-header h2 { font-size: 28px; }
  .why-grid { grid-template-columns: 1fr; }
  .why-header h2 { font-size: 30px; }
  .why-cta { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 580px) {
  .hero h1   { font-size: 32px; }
  .hero-sub  { font-size: 15px; }
  .steps     { grid-template-columns: 1fr; }
  .spaces-grid { grid-template-columns: 1fr; }
  .form-card { padding: 22px 16px; }
  .footer-cta h2 { font-size: 26px; }
  .how h2    { font-size: 26px; }
  .how, .spaces-sec, .footer-cta { padding: 52px 16px; }
  footer     { flex-direction: column; align-items: flex-start; }
  nav        { padding: 0 16px; }
  .hero      { padding: 32px 16px 40px; }
  .hero-stats { gap: 16px; }
  .nav-badge { display: none; }
  .nav-register-btn { font-size: 12px; padding: 7px 12px; }
  .spaces-become { padding: 22px 18px; }
  .spaces-become-left h3 { font-size: 19px; }
  .bookstores-sec { padding: 52px 16px; }
  .book-carousel-card { flex: 0 0 160px; }
  .bs-features { grid-template-columns: 1fr; }
  .bs-store-card { flex-wrap: wrap; gap: 10px; }
  .bs-store-right { width: 100%; justify-content: space-between; }
  .bookstores-header h2 { font-size: 24px; }
  .why-sec { padding: 52px 16px; }
  .why-header h2 { font-size: 26px; }
  .why-card { padding: 24px 20px; }
  .why-cta { padding: 20px; }
  .why-cta p { font-size: 16px; }
  .bs-mockup-footer { flex-direction: column; align-items: flex-start; }
}

/* ─── SHARED PAGE STYLES ─────────────────────────────────────────────── */

.nav-links { display: flex; gap: 24px; align-items: center; }
.nav-link { font-size: 14px; color: var(--ink2); transition: color .15s; }
.nav-link:hover { color: var(--ink); }
.nav-link-active { color: var(--ink); font-weight: 500; border-bottom: 2px solid var(--turmeric); padding-bottom: 2px; }

/* Hamburger button */
.nav-hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 36px;
  height: 36px;
  padding: 4px;
  background: none;
  border: none;
  cursor: pointer;
  border-radius: 6px;
}
.nav-hamburger span {
  display: block;
  height: 2px;
  background: var(--ink);
  border-radius: 2px;
  transition: transform .2s, opacity .2s;
}
.nav-hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-hamburger.open span:nth-child(2) { opacity: 0; }
.nav-hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobile dropdown menu */
.nav-mobile-menu {
  display: none;
  flex-direction: column;
  background: var(--cream);
  border-bottom: 1px solid var(--cream3);
  padding: 12px 16px 16px;
  gap: 4px;
}
.nav-mobile-menu.open { display: flex; }
.nav-mobile-link {
  font-size: 15px;
  color: var(--ink2);
  padding: 10px 4px;
  border-bottom: 0.5px solid var(--cream3);
  text-decoration: none;
}
.nav-mobile-link:last-of-type { border-bottom: none; }
.nav-mobile-link:hover { color: var(--ink); }
.nav-mobile-register {
  display: inline-block;
  margin-top: 10px;
  background: var(--turmeric);
  color: var(--ink);
  font-size: 14px;
  font-weight: 600;
  padding: 10px 18px;
  border-radius: 6px;
  text-decoration: none;
  text-align: center;
}
.nav-mobile-register:hover { background: var(--turmeric2); }

.page-hero { padding: 72px 24px; }
.page-hero-ink { background: var(--ink); }
.page-hero-cream { background: var(--cream2); border-bottom: 0.5px solid var(--cream3); }

.page-hero-inner {
  max-width: 1100px; margin: 0 auto;
  display: grid; grid-template-columns: 1fr 420px; gap: 64px; align-items: start;
}
.page-hero-inner-centered { grid-template-columns: 1fr; text-align: center; max-width: 680px; }
.page-hero-left, .page-hero-right { min-width: 0; }

.page-hero h1 {
  font-family: 'Inter', sans-serif; font-size: 48px; line-height: 1.12;
  letter-spacing: -0.5px; margin-bottom: 16px;
}
.page-hero-sub { font-size: 16px; line-height: 1.75; margin-bottom: 32px; max-width: 420px; }
.page-hero-sub-centered { font-size: 16px; color: var(--ink3); line-height: 1.75; margin-bottom: 28px; }

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 24px 0 32px;
}
.hero-cta-btn {
  display: inline-block; background: #2D3142; color: #fff;
  font-size: 15px; font-weight: 500; padding: 13px 28px;
  border-radius: var(--radius-md); transition: background .15s;
  text-decoration: none;
}
.hero-cta-btn:hover { background: #333; }
.hero-cta-btn--ghost {
  background: transparent;
  border: 1.5px solid var(--cream3);
  color: var(--ink2);
}
.hero-cta-btn--ghost:hover { background: var(--cream2); border-color: var(--ink3); color: var(--ink); }

.page-section { padding: 72px 24px; background: var(--cream); }
.page-section:nth-child(even) { background: var(--white); }
.page-section-inner { max-width: 1100px; margin: 0 auto; }

.section-h2 {
  font-family: 'Inter', sans-serif; font-size: 36px; color: var(--ink);
  margin-top: 8px; margin-bottom: 40px; letter-spacing: -0.3px; line-height: 1.2;
}

.ft-links { display: flex; gap: 20px; flex-wrap: wrap; }
.ft-links a { font-size: 12px; color: #a8a090; transition: color .15s; }
.ft-links a:hover { color: var(--turmeric); }

.ft-social { display: flex; gap: 16px; align-items: center; }
.ft-social a { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: #a8a090; transition: color .15s; text-decoration: none; }
.ft-social a:hover { color: var(--turmeric); }
.ft-social svg { flex-shrink: 0; }

/* ─── SPACES PAGE ────────────────────────────────────────────────────── */

.spaces-hero-stats { display: flex; gap: 28px; margin-top: 36px; padding-top: 28px; border-top: 0.5px solid #2D3142; flex-wrap: wrap; }
.shs-val { font-family: 'Inter', sans-serif; font-size: 24px; font-weight: 600; color: var(--turmeric); }
.shs-lbl { font-size: 11px; color: #a8a090; margin-top: 2px; }

.fg-select {
  width: 100%; height: 42px; border: 1px solid var(--cream3); border-radius: var(--radius-sm);
  padding: 0 12px; font-size: 14px; font-family: 'Inter', sans-serif;
  color: var(--ink); background: var(--cream); outline: none;
  transition: border-color .15s; 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='%237a7868' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center;
}
.fg-select:focus { border-color: var(--turmeric); background-color: var(--white); }

.fg-textarea {
  width: 100%; border: 1px solid var(--cream3); border-radius: var(--radius-sm);
  padding: 10px 12px; font-size: 14px; font-family: 'Inter', sans-serif;
  color: var(--ink); background: var(--cream); outline: none; resize: vertical;
  min-height: 80px; transition: border-color .15s;
}
.fg-textarea:focus { border-color: var(--turmeric); background: var(--white); }
.fg-textarea::placeholder { color: #ccc; }

.fg-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

.sp-how-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 24px; }
.sp-how-card { background: var(--white); border: 0.5px solid var(--cream3); border-radius: 14px; padding: 24px 20px; }
.sp-how-num { font-family: 'Inter', sans-serif; font-size: 26px; font-weight: 600; color: var(--turmeric); opacity: 0.65; margin-bottom: 10px; }
.sp-how-card h3 { font-size: 14px; font-weight: 500; color: var(--ink); margin-bottom: 7px; }
.sp-how-card p  { font-size: 13px; color: var(--ink3); line-height: 1.65; }

.sp-perks-sec { background: var(--ink); padding: 72px 24px; }
.sp-perks-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; }
.sp-perk { background: #2D3142; border: 0.5px solid #2D3142; border-radius: 14px; padding: 22px 20px; }
.sp-perk-icon { font-size: 24px; margin-bottom: 10px; }
.sp-perk h4   { font-size: 14px; font-weight: 500; color: var(--white); margin-bottom: 6px; }
.sp-perk p    { font-size: 13px; color: #a8a090; line-height: 1.6; }

.sp-fit-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.sp-fit-card { border-radius: 16px; padding: 28px 24px; }
.sp-fit-yes  { background: #e5f6ee; border: 0.5px solid #b8e3d0; }
.sp-fit-no   { background: var(--cream2); border: 0.5px solid var(--cream3); }
.sp-fit-label { font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 16px; }
.sp-fit-yes .sp-fit-label { color: var(--forest); }
.sp-fit-no  .sp-fit-label { color: var(--ink3); }
.sp-fit-list { list-style: none; display: flex; flex-direction: column; gap: 9px; }
.sp-fit-list li { font-size: 14px; color: var(--ink2); padding-left: 16px; position: relative; line-height: 1.4; }
.sp-fit-list li::before { content: ''; position: absolute; left: 0; top: 7px; width: 6px; height: 6px; border-radius: 50%; }
.sp-fit-yes .sp-fit-list li::before { background: var(--forest); }
.sp-fit-no  .sp-fit-list li::before { background: var(--ink3); }
.sp-fit-note { font-size: 13px; color: var(--ink3); margin-top: 16px; font-style: italic; }

/* ─── LIBRARY PAGE ───────────────────────────────────────────────────── */

.lib-tabs-mock { background: var(--white); border: 0.5px solid var(--cream3); border-radius: 16px; overflow: hidden; }

.lib-tab-bar { display: flex; border-bottom: 0.5px solid var(--cream3); background: var(--cream); }
.lib-tab { flex: 1; padding: 13px 16px; font-size: 13px; font-weight: 500; color: var(--ink3); background: none; border: none; cursor: pointer; border-bottom: 2px solid transparent; transition: color .15s, border-color .15s; }
.lib-tab:hover { color: var(--ink); }
.lib-tab-active { color: var(--ink); border-bottom-color: var(--turmeric); }

.lib-panel { padding: 20px; }
.lib-panel-hidden { display: none; }

.lib-panel-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.lib-panel-count { font-size: 12px; color: var(--ink3); }
.lib-add-btn { font-size: 12px; font-weight: 500; color: #fff; background: #2D3142; padding: 6px 14px; border-radius: var(--radius-sm); border: none; cursor: pointer; transition: background .15s; }

.lib-book-list { display: flex; flex-direction: column; gap: 0; }
.lib-book-card { display: flex; align-items: center; gap: 14px; padding: 13px 0; border-bottom: 0.5px solid var(--cream3); }
.lib-book-card:last-child { border-bottom: none; }

.lib-book-cover { width: 38px; height: 52px; border-radius: 4px; display: flex; align-items: center; justify-content: center; font-family: 'Inter', sans-serif; font-size: 12px; font-weight: 600; color: #fff; flex-shrink: 0; }
.lib-book-info { flex: 1; min-width: 0; }
.lib-book-title  { font-size: 14px; font-weight: 500; color: var(--ink); margin-bottom: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lib-book-author { font-size: 12px; color: var(--ink3); margin-bottom: 2px; }
.lib-book-meta   { font-size: 11px; color: #ccc; }

.lib-book-status { font-size: 10px; font-weight: 500; padding: 3px 9px; border-radius: 10px; white-space: nowrap; flex-shrink: 0; }
.lib-status-available { background: #e5f6ee; color: var(--forest); }
.lib-status-rented    { background: var(--turmeric3); color: #7a6200; }
.lib-status-free      { background: #e8f0fe; color: #3050c0; }
.lib-status-swap      { background: #f3eefe; color: #6C5FE6; }
.lib-status-due       { background: #fff0ef; color: var(--chilli); }
.lib-status-watching  { background: var(--cream2); color: var(--ink3); border: 0.5px solid var(--cream3); }

.lib-empty-hint { font-size: 13px; color: var(--ink3); text-align: center; padding: 20px 0 8px; font-style: italic; }

.lib-disc-list { display: flex; flex-direction: column; gap: 0; }
.lib-disc-card { display: flex; align-items: center; gap: 14px; padding: 13px 0; border-bottom: 0.5px solid var(--cream3); }
.lib-disc-card:last-child { border-bottom: none; }
.lib-disc-cover { width: 38px; height: 52px; border-radius: 4px; display: flex; align-items: center; justify-content: center; font-family: 'Inter', sans-serif; font-size: 12px; font-weight: 600; color: #fff; flex-shrink: 0; }
.lib-disc-info { flex: 1; min-width: 0; }
.lib-disc-title { font-size: 14px; font-weight: 500; color: var(--ink); margin-bottom: 3px; }
.lib-disc-last  { font-size: 13px; color: var(--ink2); margin-bottom: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lib-disc-meta  { font-size: 11px; color: #ccc; }
.lib-disc-new   { font-size: 10px; font-weight: 600; background: var(--turmeric); color: var(--ink); padding: 3px 8px; border-radius: 10px; flex-shrink: 0; }

/* ISBN demo */
.lib-isbn-sec { background: var(--ink); padding: 72px 24px; }
.lib-isbn-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; max-width: 1100px; margin: 0 auto; }
.lib-isbn-steps { display: flex; flex-direction: column; gap: 10px; }
.lib-isbn-step { display: flex; align-items: center; gap: 12px; font-size: 14px; color: #a8a090; }
.lib-isbn-num { width: 24px; height: 24px; border-radius: 50%; background: var(--turmeric); color: var(--ink); font-size: 11px; font-weight: 600; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }

.lib-isbn-demo { background: var(--white); border-radius: 16px; padding: 24px; }
.lib-isbn-demo-label { font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--forest); margin-bottom: 14px; }
.lib-isbn-barcode { background: var(--ink); border-radius: 8px; padding: 16px; margin-bottom: 16px; text-align: center; }
.lib-isbn-bars { display: flex; align-items: flex-end; justify-content: center; gap: 2px; margin-bottom: 8px; height: 48px; }
.lib-isbn-bar { width: 2.5px; background: #fff; border-radius: 1px; }
.lib-isbn-number { font-size: 10px; color: #a8a090; letter-spacing: 0.08em; }

.lib-isbn-result { display: flex; flex-direction: column; gap: 1px; }
.lib-isbn-result-row { display: flex; align-items: center; gap: 8px; padding: 8px 10px; background: var(--cream); border-radius: 6px; margin-bottom: 4px; }
.lib-isbn-result-row-highlight { background: var(--turmeric3); }
.lib-isbn-lbl { font-size: 11px; color: var(--ink3); width: 52px; flex-shrink: 0; }
.lib-isbn-val { font-size: 13px; color: var(--ink); font-weight: 500; flex: 1; }
.lib-isbn-auto { font-size: 10px; color: var(--forest); font-weight: 500; }
.lib-isbn-you  { font-size: 10px; color: var(--ink3); }

/* Discussion features */
.lib-disc-features { display: grid; grid-template-columns: repeat(4,1fr); gap: 16px; }
.lib-disc-feat { background: var(--white); border: 0.5px solid var(--cream3); border-radius: 13px; padding: 20px; }
.lib-disc-feat-icon { font-size: 22px; margin-bottom: 10px; }
.lib-disc-feat h4 { font-size: 14px; font-weight: 500; color: var(--ink); margin-bottom: 6px; }
.lib-disc-feat p  { font-size: 13px; color: var(--ink3); line-height: 1.6; }

/* ─── RESPONSIVE ADDITIONS ───────────────────────────────────────────── */
@media (max-width: 860px) {
  html,
  body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }
  .page-hero-inner { grid-template-columns: 1fr; gap: 36px; }
  .page-hero h1 { font-size: 36px; }
  .sp-how-grid  { grid-template-columns: 1fr 1fr; }
  .sp-perks-grid{ grid-template-columns: 1fr 1fr; }
  .sp-fit-grid  { grid-template-columns: 1fr; }
  .lib-isbn-grid{ grid-template-columns: 1fr; gap: 32px; }
  .lib-disc-features { grid-template-columns: 1fr 1fr; }
  /* On ≤860px switch fully to bottom-nav UX: hide top nav, show mob-nav */
  .top-nav { display: none !important; }
  .nav-hamburger { display: none !important; }
  .nav-mobile-menu { display: none !important; }
  .nav-badge { display: none; }
  /* Show mobile bottom nav */
  .mob-nav {
    display: flex !important;
    position: fixed;
    bottom: 0; left: 0; right: 0;
    width: 100%;
    max-width: 100vw;
    height: 60px;
    background: var(--cream);
    border-top: 0.5px solid var(--cream3);
    z-index: 300;
    align-items: stretch;
    padding: 0;
    box-shadow: 0 -2px 16px rgba(45,49,66,.06);
  }
  /* Mobile search stays fixed at the top */
  .mob-search-bar {
    display: block !important;
    position: fixed;
    top: 0; left: 0; right: 0; bottom: auto;
    width: 100%;
    max-width: 100vw;
    z-index: 290;
    background: var(--cream);
    border-bottom: 0.5px solid var(--cream3);
    padding: 8px 12px;
    box-shadow: 0 2px 8px rgba(45,49,66,.06);
  }
  .mob-search-bar .srch-input { font-size: 14px; background: var(--cream2); }
  .mob-search-bar .srch-dropdown {
    min-width: 0;
    left: 12px;
    right: 12px;
    top: calc(100% + 6px);
    bottom: auto;
  }
  /* Body: clear fixed search at the top and nav at the bottom */
  body {
    padding-top: 52px;
    padding-bottom: calc(60px + env(safe-area-inset-bottom, 0px));
  }
  /* Desktop search hidden */
  .top-nav-search-wrap { display: none; }
}

/* Show full top-nav on wider screens only */
@media (min-width: 861px) {
  .nav-hamburger { display: none !important; }
  .nav-mobile-menu { display: none !important; }
  .mob-nav { display: none !important; }
  .mob-search-bar { display: none !important; }
}

@media (max-width: 580px) {
  .page-hero { padding: 48px 16px; }
  .page-section { padding: 48px 16px; }
  .sp-perks-sec { padding: 48px 16px; }
  .lib-isbn-sec { padding: 48px 16px; }
  .page-hero h1 { font-size: 30px; }
  .section-h2   { font-size: 26px; }
  .sp-how-grid  { grid-template-columns: 1fr; }
  .sp-perks-grid{ grid-template-columns: 1fr; }
  .lib-disc-features { grid-template-columns: 1fr; }
  .fg-row { grid-template-columns: 1fr; }
  .lib-tab { font-size: 12px; padding: 11px 8px; }
}

/* ─── LAUNCH BANNER ──────────────────────────────────────────────────── */
.launch-banner {
  background: var(--turmeric);
  padding: 10px 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: 13px;
  color: var(--ink);
  flex-wrap: wrap;
  text-align: center;
}
.launch-banner-icon { font-size: 15px; }
.launch-banner a {
  font-weight: 600;
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
  white-space: nowrap;
}

/* ─── BOOKS QUESTION ─────────────────────────────────────────────────── */
.books-options {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 4px;
}
.books-option { cursor: pointer; }
.books-option input[type="radio"] { display: none; }
.books-option-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 10px 6px;
  border: 1.5px solid var(--cream3);
  border-radius: var(--radius-sm);
  background: var(--cream);
  transition: border-color .15s, background .15s;
  text-align: center;
}
.books-option input:checked + .books-option-inner {
  border-color: var(--turmeric);
  background: var(--turmeric3);
}
.books-option-icon { font-size: 18px; }
.books-option-text { font-size: 12px; font-weight: 500; color: var(--ink2); line-height: 1.3; }

/* ─── FOOTER CTA COUNTDOWN ───────────────────────────────────────────── */
.footer-cta-countdown {
  display: inline-block;
  background: var(--ink);
  color: var(--turmeric);
  font-size: 12px;
  font-weight: 500;
  padding: 6px 16px;
  border-radius: 20px;
  margin-bottom: 20px;
  letter-spacing: 0.03em;
}

/* ─── SPACES SECTION UPDATED ─────────────────────────────────────────── */
.spaces-sec-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: start;
}
.spaces-text { max-width: 480px; }
.spaces-page-link {
  display: inline-block;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 4px;
  margin-top: 16px;
  transition: opacity .15s;
}
.spaces-page-link:hover { opacity: 0.7; }
.spaces-cards { display: flex; flex-direction: column; gap: 12px; }
.space-interest-card {
  background: var(--white);
  border: 0.5px solid var(--cream3);
  border-radius: 14px;
  padding: 20px;
}
.space-interest-card-ghost {
  background: var(--cream);
  border-style: dashed;
}
.space-interest-icon { font-size: 22px; margin-bottom: 8px; }
.space-interest-card h4 { font-size: 14px; font-weight: 500; color: var(--ink); margin-bottom: 6px; }
.space-interest-card p  { font-size: 13px; color: var(--ink3); line-height: 1.55; margin-bottom: 12px; }
.space-interest-btn {
  display: inline-block;
  background: #2D3142;
  color: #fff;
  font-size: 12px;
  font-weight: 500;
  padding: 7px 16px;
  border-radius: var(--radius-sm);
  transition: background .15s;
}
.space-interest-btn:hover { background: #333; }
.space-interest-btn-ghost {
  display: inline-block;
  color: var(--ink2);
  font-size: 12px;
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ─── LIBRARY CTA SECTION ────────────────────────────────────────────── */
.lib-cta-sec {
  background: var(--ink);
  padding: 72px 24px;
}
.lib-cta-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
}
.lib-cta-text .sec-ey { color: var(--turmeric); }
.lib-cta-text h2 {
  font-family: 'Inter', sans-serif;
  font-size: 34px;
  color: var(--white);
  margin: 8px 0 14px;
  letter-spacing: -0.3px;
  line-height: 1.2;
}
.lib-cta-text p { font-size: 14px; color: #a8a090; line-height: 1.75; margin-bottom: 20px; }
.lib-cta-link {
  display: inline-block;
  background: var(--turmeric);
  color: var(--ink);
  font-size: 14px;
  font-weight: 500;
  padding: 11px 22px;
  border-radius: var(--radius-md);
  transition: background .15s;
}
.lib-cta-link:hover { background: var(--turmeric2); }

.lib-cta-preview {
  background: var(--white);
  border-radius: 16px;
  overflow: hidden;
}
.lib-preview-tab-bar {
  display: flex;
  background: var(--cream);
  border-bottom: 0.5px solid var(--cream3);
}
.lib-preview-tab {
  flex: 1;
  padding: 10px 8px;
  font-size: 12px;
  color: var(--ink3);
  text-align: center;
  border-bottom: 2px solid transparent;
}
.lib-preview-tab-active {
  color: var(--ink);
  font-weight: 500;
  border-bottom-color: var(--turmeric);
}
.lib-preview-book {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 0.5px solid var(--cream3);
}
.lib-preview-book:last-child { border-bottom: none; }
.lib-preview-cover {
  width: 32px;
  height: 44px;
  border-radius: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Inter', sans-serif;
  font-size: 10px;
  font-weight: 600;
  color: #fff;
  flex-shrink: 0;
}
.lib-preview-info { flex: 1; min-width: 0; }
.lib-preview-title { font-size: 13px; font-weight: 500; color: var(--ink); margin-bottom: 2px; }
.lib-preview-meta  { font-size: 11px; color: var(--ink3); }
.lib-preview-status { font-size: 10px; font-weight: 500; background: #e5f6ee; color: var(--forest); padding: 3px 8px; border-radius: 10px; white-space: nowrap; flex-shrink: 0; }
.lib-preview-rented { background: var(--turmeric3); color: #7a6200; }
.lib-preview-free   { background: #e8f0fe; color: #3050c0; }

/* ─── RESPONSIVE ADDITIONS ───────────────────────────────────────────── */
@media (max-width: 860px) {
  .spaces-sec-inner { grid-template-columns: 1fr; gap: 28px; }
  .lib-cta-inner    { grid-template-columns: 1fr; gap: 32px; }
  .lib-cta-preview  { display: none; }
}
@media (max-width: 580px) {
  .launch-banner { font-size: 12px; padding: 8px 16px; gap: 6px; }
  .books-options { grid-template-columns: 1fr 1fr 1fr; }
  .books-option-text { font-size: 11px; }
  .lib-cta-sec { padding: 48px 16px; }
  .spaces-sec  { padding: 48px 16px; }
}

/* ─── BOOKSTORE PAGE ─────────────────────────────────────────────────── */

/* Integration options in form */
.bs-integ-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 6px;
}
.bs-integ-option { cursor: pointer; }
.bs-integ-option input[type="radio"] { display: none; }
.bs-integ-inner {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 10px 12px;
  border: 1.5px solid var(--cream3);
  border-radius: var(--radius-sm);
  background: var(--cream);
  transition: border-color .15s, background .15s;
}
.bs-integ-option input:checked + .bs-integ-inner {
  border-color: var(--turmeric);
  background: var(--turmeric3);
}
.bs-integ-icon  { font-size: 16px; }
.bs-integ-title { font-size: 13px; font-weight: 500; color: var(--ink); }
.bs-integ-sub   { font-size: 11px; color: var(--ink3); line-height: 1.4; }

/* Genre grid */
.bs-genre-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 8px;
}
.bs-genre-chip { cursor: pointer; }
.bs-genre-chip input[type="checkbox"] { display: none; }
.bs-genre-chip span {
  display: inline-block;
  font-size: 12px;
  font-weight: 500;
  padding: 5px 12px;
  border: 1.5px solid var(--cream3);
  border-radius: 20px;
  background: var(--cream);
  color: var(--ink2);
  transition: border-color .15s, background .15s, color .15s;
}
.bs-genre-chip input:checked + span {
  border-color: var(--turmeric);
  background: var(--turmeric);
  color: var(--ink);
}

/* Integration cards (how it works section) */
.bs-integ-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.bs-integ-card {
  background: #2D3142;
  border: 0.5px solid #2D3142;
  border-radius: 16px;
  padding: 28px 24px;
}
.bs-integ-card-icon { font-size: 28px; margin-bottom: 12px; }
.bs-integ-card h3 {
  font-family: 'Inter', sans-serif;
  font-size: 20px;
  font-weight: 600;
  color: var(--white);
  margin-bottom: 10px;
  line-height: 1.3;
}
.bs-integ-card p { font-size: 14px; color: #a8a090; line-height: 1.75; margin-bottom: 18px; }
.bs-integ-supports { margin-bottom: 16px; }
.bs-support-label { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: #5a5040; margin-bottom: 8px; display: block; }
.bs-support-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.bs-chip {
  font-size: 11px;
  font-weight: 500;
  padding: 4px 10px;
  border-radius: 20px;
  background: #2D3142;
  color: #a8a090;
  border: 0.5px solid #2D3142;
}
.bs-integ-best {
  font-size: 12px;
  color: var(--turmeric);
  font-weight: 500;
  padding-top: 14px;
  border-top: 0.5px solid #2D3142;
}

/* Targeting grid */
.bs-target-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
.bs-target-card {
  background: var(--white);
  border: 0.5px solid var(--cream3);
  border-radius: 13px;
  padding: 20px 16px;
}
.bs-target-icon { font-size: 22px; margin-bottom: 10px; }
.bs-target-card h4 { font-size: 14px; font-weight: 500; color: var(--ink); margin-bottom: 6px; }
.bs-target-card p  { font-size: 13px; color: var(--ink3); line-height: 1.6; }

/* Responsive */
@media (max-width: 860px) {
  .bs-integ-cards { grid-template-columns: 1fr; }
  .bs-target-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 580px) {
  .bs-integ-options { grid-template-columns: 1fr; }
  .bs-target-grid   { grid-template-columns: 1fr; }
  .bs-integ-cards   { grid-template-columns: 1fr; }
}

/* ─── LEGAL PAGES ────────────────────────────────────────────────────── */
.legal-hero {
  background: var(--cream2);
  border-bottom: 0.5px solid var(--cream3);
  padding: 56px 24px 40px;
}
.legal-hero-inner {
  max-width: 760px;
  margin: 0 auto;
}
.legal-hero h1 {
  font-family: 'Inter', sans-serif;
  font-size: 42px;
  font-weight: 600;
  color: var(--ink);
  margin: 8px 0 10px;
  letter-spacing: -0.5px;
}
.legal-meta {
  font-size: 13px;
  color: var(--ink3);
}

.legal-body {
  padding: 48px 24px 80px;
  background: var(--white);
}
.legal-inner {
  max-width: 760px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.legal-intro p {
  font-size: 15px;
  color: var(--ink2);
  line-height: 1.8;
  margin-bottom: 12px;
}
.legal-intro p:last-child { margin-bottom: 0; }

.legal-section { display: flex; flex-direction: column; gap: 14px; }

.legal-section h2 {
  font-family: 'Inter', sans-serif;
  font-size: 22px;
  font-weight: 600;
  color: var(--ink);
  padding-bottom: 10px;
  border-bottom: 0.5px solid var(--cream3);
}

.legal-section h3 {
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  margin-top: 4px;
}

.legal-section p {
  font-size: 14px;
  color: var(--ink2);
  line-height: 1.8;
}

.legal-section ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-left: 4px;
}
.legal-section ul li {
  font-size: 14px;
  color: var(--ink2);
  line-height: 1.7;
  padding-left: 18px;
  position: relative;
}
.legal-section ul li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 9px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--turmeric);
}

.legal-section a {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.legal-section a:hover { color: var(--ink3); }

/* Highlighted blocks */
.legal-highlight {
  background: var(--cream);
  border: 0.5px solid var(--cream3);
  border-left: 3px solid var(--ink3);
  border-radius: var(--radius-sm);
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.legal-highlight-turmeric {
  border-left-color: var(--turmeric);
  background: var(--turmeric3);
}
.legal-highlight h3 {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  margin: 0;
}
.legal-highlight p {
  font-size: 13px;
  color: var(--ink2);
  line-height: 1.75;
  margin: 0;
}
.legal-highlight ul {
  padding-left: 4px;
  gap: 6px;
}
.legal-highlight ul li { font-size: 13px; }

.legal-contact {
  background: var(--cream);
  border: 0.5px solid var(--cream3);
  border-radius: var(--radius-sm);
  padding: 16px 20px;
  font-size: 14px;
  color: var(--ink2);
  line-height: 1.9;
}
.legal-contact a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 580px) {
  .legal-hero { padding: 40px 16px 28px; }
  .legal-hero h1 { font-size: 32px; }
  .legal-body { padding: 36px 16px 60px; }
  .legal-section h2 { font-size: 19px; }
}

/* ─── CONSENT CHECKBOX ───────────────────────────────────────────────── */
.consent-fg { margin-top: 4px; }

.consent-label {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  cursor: pointer;
}

.consent-label input[type="checkbox"] {
  width: 13px;
  height: 13px;
  min-width: 13px;
  margin-top: 2px;
  accent-color: var(--ink);
  cursor: pointer;
  flex-shrink: 0;
}

.consent-text {
  font-size: 11px;
  color: var(--ink3);
  line-height: 1.55;
}

.consent-text a {
  color: var(--ink3);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.consent-text a:hover { color: var(--ink); }


/* ══════════════════════════════════════════════════════════════════════════
   BOOK CARD ACTIONS — save (♥) + share buttons on cards
   ══════════════════════════════════════════════════════════════════════════ */
.books-card-actions {
  display: flex;
  gap: 8px;
  margin-top: auto;
  padding-top: 10px;
  border-top: 0.5px solid var(--cream3);
}

.bca-fav,
.bca-share,
.bca-borrow {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: none;
  border: 0.5px solid var(--cream3);
  border-radius: 20px;
  color: var(--ink2);
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  padding: 5px 10px;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  white-space: nowrap;
}
.bca-fav svg, .bca-share svg { display: inline; flex-shrink: 0; width: 14px; height: 14px; }

.bca-fav:hover {
  background: #fff0f3;
  border-color: #e8a0b0;
  color: #F64740;
}
.bca-fav:hover svg { stroke: #F64740; }

.bca-fav--saved,
.bca-fav--saved:hover {
  background: #fff0f3;
  border-color: #e8a0b0;
  color: #F64740;
}
.bca-fav--saved svg,
.bca-fav--saved:hover svg { stroke: #F64740; fill: #F64740; }

.bca-share:hover {
  background: #f0f6ff;
  border-color: #a0b8e8;
  color: #2a5fd4;
}
.bca-share:hover svg { stroke: #2a5fd4; }

.bca-borrow {
  background: var(--turmeric);
  border-color: var(--turmeric2);
  color: var(--ink);
  font-weight: 600;
}
.bca-borrow:hover {
  background: var(--turmeric2);
  border-color: var(--turmeric3);
  color: var(--ink);
}

/* Larger variants for the book detail page sidebar */
.bca-fav--lg,
.bca-share--lg {
  font-size: 13px;
  padding: 8px 14px;
  width: 100%;
  justify-content: center;
  border-radius: var(--radius-sm);
}

.bdl-icon-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 12px;
}


/* ══════════════════════════════════════════════════════════════════════════
   KOOTTAR MODALS
   ══════════════════════════════════════════════════════════════════════════ */
.kmodal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(28, 26, 20, 0.55);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  overflow-y: auto;
}
.kmodal-overlay[hidden] { display: none; }

.kmodal {
  background: var(--white);
  border-radius: var(--radius-md);
  box-shadow: 0 24px 64px rgba(0,0,0,0.18);
  max-width: 440px;
  width: 100%;
  padding: 32px 28px 28px;
  position: relative;
  animation: kmodal-in 0.22s ease;
}
.kmodal--wide { max-width: 680px; }

@keyframes kmodal-in {
  from { opacity: 0; transform: translateY(14px) scale(0.97); }
  to   { opacity: 1; transform: none; }
}

.kmodal-close {
  position: absolute;
  top: 14px;
  right: 14px;
  background: none;
  border: none;
  color: var(--ink3);
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  padding: 4px 6px;
  border-radius: 6px;
  transition: background 0.12s, color 0.12s;
}
.kmodal-close:hover { background: var(--cream2); color: var(--ink); }

.kmodal-eyebrow {
  color: var(--turmeric);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin: 0 0 6px;
}

.kmodal-title {
  font-family: var(--font-head);
  font-size: 20px;
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 4px;
  line-height: 1.25;
}

.kmodal-book-name {
  font-size: 13px;
  color: var(--ink2);
  margin: 0 0 20px;
  font-style: italic;
}

.kmodal-body .fg { margin-bottom: 14px; }
.kmodal-body .fg label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 5px;
}
.kmodal-body .fg input {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--cream3);
  border-radius: var(--radius-sm);
  padding: 9px 12px;
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--ink);
  background: var(--white);
  transition: border-color 0.15s;
  outline: none;
}
.kmodal-body .fg input:focus { border-color: var(--turmeric); }

.kmodal-btn {
  width: 100%;
  background: var(--turmeric);
  border: none;
  border-radius: var(--radius-sm);
  color: var(--ink);
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 700;
  padding: 13px 20px;
  margin-top: 6px;
  transition: opacity 0.15s;
}
.kmodal-btn:hover:not(:disabled) { opacity: 0.88; }
.kmodal-btn:disabled { opacity: 0.55; cursor: default; }

/* Two-column layout for share modal */
.kmodal-two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 24px;
}
@media (max-width: 540px) {
  .kmodal-two-col { grid-template-columns: 1fr; }
}

.kmodal-col-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink3);
  margin: 0 0 12px;
}

/* Success state */
.kmodal-success {
  text-align: center;
  padding: 24px 0 8px;
}
.kmodal-success[hidden] { display: none; }

.kmodal-success-icon {
  font-size: 40px;
  margin-bottom: 14px;
}

.kmodal-success h3 {
  font-family: var(--font-head);
  font-size: 22px;
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 8px;
}
.kmodal-success p {
  font-size: 14px;
  color: var(--ink2);
  margin: 0;
}



/* ══════════════════════════════════════════════════════════════════════════
   AUTH PAGE  (/login/  /signup/)
   ══════════════════════════════════════════════════════════════════════════ */
.auth-page {
  min-height: calc(100vh - 64px);
  display: flex;
  align-items: stretch;
}

.auth-wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  padding: 40px 32px 80px;
  gap: 0 64px;
  align-items: center;
}

/* Brand side */
.auth-brand {
  display: flex;
  align-items: center;
}
.auth-brand-inner { max-width: 420px; }

.auth-brand-ey {
  color: var(--turmeric);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  margin-bottom: 16px;
}

.auth-brand-h {
  font-family: 'Inter', sans-serif;
  font-size: clamp(38px, 5vw, 58px);
  font-weight: 700;
  line-height: 1.1;
  color: var(--ink);
  margin-bottom: 18px;
}

.auth-brand-sub {
  font-size: 16px;
  color: var(--ink2);
  line-height: 1.65;
  margin-bottom: 32px;
}

.auth-brand-stats {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.auth-brand-stats > div {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: var(--ink2);
}
.auth-brand-stats strong { font-size: 20px; }

/* Card side */
.auth-card-col {
  display: flex;
  justify-content: center;
}

.auth-card {
  background: var(--white);
  border: 0.5px solid var(--cream3);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: 36px 32px 32px;
  width: 100%;
  max-width: 420px;
}

/* Tab switcher */
.auth-tabs {
  display: flex;
  gap: 0;
  border-bottom: 1.5px solid var(--cream3);
  margin-bottom: 28px;
}

.auth-tab {
  background: none;
  border: none;
  border-bottom: 2.5px solid transparent;
  color: var(--ink3);
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 600;
  padding: 0 0 14px;
  margin-bottom: -1.5px;
  margin-right: 24px;
  transition: color 0.15s, border-color 0.15s;
}
.auth-tab.active {
  color: var(--ink);
  border-bottom-color: var(--turmeric);
}
.auth-tab:hover:not(.active) { color: var(--ink); }

/* Panel */
.auth-panel[hidden] { display: none; }

.auth-panel-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 20px;
  font-family: 'Inter', sans-serif;
}

/* Social buttons */
.auth-socials {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 20px;
}

.auth-social-btn {
  display: flex;
  align-items: center;
  gap: 12px;
  border: 1px solid var(--cream3);
  border-radius: var(--radius-sm);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  padding: 11px 16px;
  text-decoration: none;
  transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
  background: var(--white);
}
.auth-social-btn:hover {
  background: var(--cream);
  border-color: var(--cream3);
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.auth-social-btn--apple { color: var(--ink); }
.auth-social-btn svg { flex-shrink: 0; }

/* Divider */
.auth-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 18px 0;
  color: var(--ink3);
  font-size: 12px;
}
.auth-divider::before,
.auth-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--cream3);
}

/* Form fields */
.auth-form .fg { margin-bottom: 16px; }
.auth-form .fg label {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 6px;
}

.auth-forgot {
  font-size: 12px;
  font-weight: 400;
  color: var(--ink3);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.auth-forgot:hover { color: var(--ink); }

.auth-form input[type="email"],
.auth-form input[type="password"],
.auth-form input[type="text"] {
  width: 100%;
  border: 1px solid var(--cream3);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--ink);
  background: var(--white);
  outline: none;
  transition: border-color 0.15s;
}
.auth-form input:focus { border-color: var(--turmeric); }

/* Password toggle */
.auth-pw-wrap {
  position: relative;
}
.auth-pw-wrap input { padding-right: 42px; }
.auth-pw-toggle {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: var(--ink3);
  cursor: pointer;
  padding: 4px;
  display: flex;
  align-items: center;
}
.auth-pw-toggle:hover { color: var(--ink); }

/* Submit button */
.auth-submit-btn {
  width: 100%;
  background: #2D3142;
  border: none;
  border-radius: var(--radius-sm);
  color: #fff;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 700;
  padding: 13px 20px;
  margin-top: 4px;
  transition: opacity 0.15s;
}
.auth-submit-btn:hover:not(:disabled) { opacity: 0.88; }
.auth-submit-btn:disabled { opacity: 0.55; cursor: default; }

/* Error messages */
.auth-form-err {
  background: #fff2f2;
  border: 1px solid #fdd5d4;
  border-radius: var(--radius-sm);
  color: #F64740;
  font-size: 13px;
  margin-bottom: 14px;
  padding: 10px 12px;
}

/* Footer links */
.auth-terms-note {
  font-size: 12px;
  color: var(--ink3);
  line-height: 1.6;
  margin-top: 14px;
  text-align: center;
}
.auth-terms-note a {
  color: var(--ink3);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.auth-terms-note a:hover { color: var(--ink); }

.auth-switch-text {
  font-size: 13px;
  color: var(--ink3);
  text-align: center;
  margin-top: 20px;
}
.auth-switch-link {
  background: none;
  border: none;
  color: var(--ink);
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  padding: 0;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.auth-switch-link:hover { color: var(--ink2); }

/* Responsive */
@media (max-width: 820px) {
  .auth-wrap {
    grid-template-columns: 1fr;
    padding: 32px 20px 60px;
    gap: 40px 0;
  }
  .auth-brand { justify-content: center; }
  .auth-brand-inner { text-align: center; max-width: 100%; }
  .auth-brand-stats { align-items: center; }
  .auth-card { max-width: 100%; }
}


/* Auth page centered variant (used by allauth confirmation pages) */
.auth-wrap--centered {
  grid-template-columns: 1fr;
  max-width: 480px;
  padding: 60px 20px 80px;
}

/* ══════════════════════════════════════════════════════════════════════════
   PROFILE PAGE (social style)
   ══════════════════════════════════════════════════════════════════════════ */
.pf-page { min-height: 70vh; padding: 0 0 100px; }
.pf-wrap { max-width: 860px; margin: 0 auto; display: flex; flex-direction: column; gap: 24px; }

/* ── Cover photo (LinkedIn ratio ~4:1) ── */
.pf-cover-wrap {
  position: relative; width: 100%; height: 160px;
  background: linear-gradient(135deg, var(--forest) 0%, #1A936F 50%, var(--turmeric) 100%);
  overflow: hidden; flex-shrink: 0;
}
.pf-cover-img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.pf-cover-placeholder {
  width: 100%; height: 100%;
  background: linear-gradient(135deg, var(--forest) 0%, #1A936F 60%, var(--turmeric) 100%);
}
.pf-cover-edit-btn {
  position: absolute; bottom: 12px; right: 14px;
  display: inline-flex; align-items: center; gap: 5px;
  background: rgba(0,0,0,.45); color: #fff;
  border: 1px solid rgba(255,255,255,.25); border-radius: 20px;
  padding: 6px 12px; font-size: 12px; font-weight: 600;
  cursor: pointer; backdrop-filter: blur(4px);
  transition: background .15s;
}
.pf-cover-edit-btn:hover { background: rgba(0,0,0,.65); }

/* ── Hero (avatar overlaps cover) ── */
.pf-hero {
  display: flex; align-items: flex-start; gap: 14px;
  background: #fff; border: 1px solid var(--cream3);
  border-top: none;
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  padding: 0 20px 16px; margin-top: -2px;
  position: relative;
}
.pf-avatar-wrap { position: relative; flex-shrink: 0; margin-top: -40px; }
.pf-avatar {
  width: 88px; height: 88px; border-radius: 50%;
  background: var(--cream2); border: 3px solid #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 38px; line-height: 1; user-select: none;
  box-shadow: 0 2px 8px rgba(0,0,0,.12);
}
.pf-avatar--photo { object-fit: cover; }
.pf-avatar-edit {
  position: absolute; bottom: 4px; right: 4px;
  width: 24px; height: 24px; border-radius: 50%;
  background: #fff; border: 1px solid var(--cream3);
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; cursor: pointer; line-height: 1;
  box-shadow: 0 1px 4px rgba(0,0,0,.15);
}
.pf-avatar-edit:hover { background: var(--cream2); }
.pf-hero-info { flex: 1; min-width: 0; padding-top: 50px; }
.pf-hero-name-row { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; margin-bottom: 3px; }
.pf-name { font-size: 20px; font-weight: 700; margin: 0; }
.pf-slug-pill {
  font-size: 11px; color: var(--ink3); background: var(--cream2);
  border: 1px solid var(--cream3); border-radius: 10px;
  padding: 2px 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 220px;
}
.pf-location { font-size: 13px; color: var(--ink2); margin: 0 0 5px; display: flex; align-items: center; gap: 3px; }
.pf-bio { font-size: 13px; color: var(--ink2); margin: 0; line-height: 1.55; }
.pf-bio--empty { color: var(--ink3); font-style: italic; }

/* ── Compact stats bar ── */
.pf-stats {
  display: grid; grid-template-columns: repeat(4, 1fr);
  background: #fff; border: 1px solid var(--cream3);
  border-radius: var(--radius-md); overflow: hidden;
}
.pf-stat {
  display: flex; flex-direction: column; align-items: center;
  padding: 12px 8px; border-right: 1px solid var(--cream3);
}
.pf-stat:last-child { border-right: none; }
.pf-stat-num { font-size: 18px; font-weight: 700; color: var(--ink); line-height: 1; }
.pf-stat-label { font-size: 10px; color: var(--ink3); margin-top: 3px; text-align: center; text-transform: uppercase; letter-spacing: .03em; }

/* About form helpers */
.pf-help-inline { font-size: 11px; font-weight: 400; color: var(--ink3); }

/* Badge block on profile */
.pf-badges-block {
  background: #fff; border: 1px solid var(--cream3);
  border-radius: var(--radius-md); padding: 18px 20px;
}
.pf-badges-heading {
  font-size: 13px; font-weight: 700; color: var(--ink2); margin: 0 0 10px;
}

/* Sections */
/* ── Profile tab nav ── */
.pf-tabs {
  display: flex; gap: 4px;
  background: #fff; border: 1px solid var(--cream3);
  border-radius: var(--radius-md); padding: 6px;
  position: sticky; top: 58px; z-index: 100;
  overflow-x: auto; scrollbar-width: none;
}
.pf-tabs::-webkit-scrollbar { display: none; }
.pf-tab {
  flex-shrink: 0; border: none; background: none; cursor: pointer;
  font-family: inherit; font-size: 13px; font-weight: 600; color: var(--ink3);
  padding: 8px 18px; border-radius: 8px; transition: all .15s;
  display: flex; align-items: center; gap: 6px;
}
.pf-tab:hover { background: var(--cream2); color: var(--ink); }
.pf-tab--active { background: #111; color: #fff !important; }
.pf-tab--active:hover { background: #333; }

/* ── Note cards ── */
.pf-notes-book {
  margin-bottom: 24px;
}
.pf-notes-book-header {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 12px;
}
.pf-notes-book-title {
  font-size: 15px; font-weight: 700; color: var(--ink); margin: 0;
}
.pf-notes-book-count {
  font-size: 11px; color: var(--ink3); font-weight: 500;
}
.pf-note-card {
  background: var(--cream2); border: 1px solid var(--cream3);
  border-radius: 10px; padding: 14px 16px; margin-bottom: 8px;
}
.pf-note-card-meta {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 8px; gap: 10px;
}
.pf-note-card-date {
  font-size: 12px; font-weight: 600; color: var(--ink3);
}
.pf-note-card-page {
  font-size: 12px; color: var(--ink3);
  background: #fff; border: 1px solid var(--cream3);
  padding: 2px 8px; border-radius: 20px;
}
.pf-note-card-actions { display: flex; gap: 4px; }
.pf-note-action-btn {
  background: none; border: none; cursor: pointer; color: var(--ink3);
  padding: 4px 8px; border-radius: 6px; font-size: 12px; font-weight: 600;
  transition: background .12s, color .12s; display: flex; align-items: center; gap: 4px;
}
.pf-note-action-btn:hover { background: var(--cream3); color: var(--ink); }
.pf-note-action-btn--danger:hover { background: #fee6e5; color: #991b1b; }
.pf-note-card-text {
  font-size: 14px; color: var(--ink2); line-height: 1.6;
  white-space: pre-wrap; word-break: break-word;
}

.share-menu {
  position: fixed; z-index: 999;
  background: #fff; border: 1px solid var(--cream2);
  border-radius: 10px; box-shadow: 0 6px 20px rgba(0,0,0,.13);
  padding: 5px;
}
.share-menu-item {
  display: flex; align-items: center; gap: 10px; width: 100%;
  background: none; border: none; border-radius: 7px;
  padding: 9px 12px; font-size: 14px; color: var(--ink);
  cursor: pointer; text-align: left;
}
.share-menu-item:hover { background: var(--cream2); }
.share-menu-icon { font-size: 16px; width: 20px; text-align: center; flex-shrink: 0; }

.pf-section {
  background: #fff; border: 1px solid var(--cream3);
  border-radius: var(--radius-md); padding: 24px;
}
.pf-section-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 16px;
}
.pf-section-title {
  font-size: 16px; font-weight: 700; margin: 0;
  display: flex; align-items: center; gap: 8px;
}
.pf-badge {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--cream2); color: var(--ink2);
  font-size: 11px; font-weight: 600; padding: 2px 7px;
  border-radius: 20px; min-width: 22px;
}
.pf-edit-toggle {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 13px; color: var(--ink2); background: none; border: 1px solid var(--cream3);
  border-radius: var(--radius-sm); padding: 5px 12px; cursor: pointer;
  font-family: inherit; transition: background .15s, color .15s, border-color .15s;
}
.pf-edit-toggle:hover { background: var(--cream2); color: var(--ink); border-color: var(--cream4); }
.pf-edit-toggle svg { flex-shrink: 0; }

/* About display */
.pf-about-grid { display: flex; flex-direction: column; gap: 10px; }
.pf-about-row { display: flex; gap: 12px; font-size: 14px; align-items: flex-start; }
.pf-about-label { color: var(--ink3); min-width: 90px; flex-shrink: 0; padding-top: 2px; }
.pf-about-val { color: var(--ink); display: flex; flex-wrap: wrap; gap: 6px; }

/* Genre chips */
.pf-genre-chip {
  display: inline-block; font-size: 12px; padding: 4px 10px;
  border-radius: 20px; background: var(--cream2); color: var(--ink2);
  border: 1px solid var(--cream3); cursor: pointer; transition: background .15s, color .15s;
}
.pf-genre-chip:hover { background: var(--cream3); }
.pf-genre-chip--on, .pf-genre-chip--set {
  background: var(--turmeric3); color: var(--ink); border-color: var(--turmeric2);
}
.pf-genre-picker { display: flex; flex-wrap: wrap; gap: 8px; }

/* Edit form */
.pf-form-group { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.pf-form-label { font-size: 12px; font-weight: 600; color: var(--ink2); display: flex; align-items: center; gap: 6px; }
.pf-char-count { font-weight: 400; color: var(--ink3); margin-left: auto; }
.pf-form-input {
  padding: 10px 12px; border: 1px solid var(--cream3);
  border-radius: var(--radius-sm); font-size: 14px; color: var(--ink);
  background: var(--cream); width: 100%; box-sizing: border-box;
  transition: border-color .15s;
}
.pf-form-input:focus { outline: none; border-color: var(--turmeric); background: #fff; }
.pf-form-textarea { resize: vertical; min-height: 80px; font-family: inherit; }
.pf-form-select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23888' d='M6 8L0 0h12z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 30px; cursor: pointer; }
.pf-form-two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 480px) { .pf-form-two-col { grid-template-columns: 1fr; } }
.pf-form-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 4px; }
.pf-form-err { font-size: 13px; color: var(--accent); margin-top: 8px; }
.pf-save-btn {
  background: #2D3142; color: #fff; border: none;
  padding: 9px 20px; border-radius: var(--radius-sm); font-size: 14px;
  font-weight: 600; cursor: pointer; transition: background .15s;
}
.pf-save-btn:hover { background: #333; }
.pf-cancel-btn {
  background: #fff; color: var(--ink2); border: 1px solid var(--cream3);
  padding: 9px 16px; border-radius: var(--radius-sm); font-size: 14px;
  cursor: pointer; transition: background .15s;
}
.pf-cancel-btn:hover { background: var(--cream2); }
.pf-required { color: var(--accent); }
.pf-optional { color: var(--ink3); }

/* Avatar modal */
.pf-modal-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.45);
  display: flex; align-items: center; justify-content: center;
  z-index: 1000; padding: 20px;
}
.pf-modal {
  background: #fff; border-radius: var(--radius-md);
  padding: 28px; max-width: 380px; width: 100%;
  box-shadow: 0 12px 40px rgba(0,0,0,.18);
  display: flex; flex-direction: column; align-items: center;
}
.pf-modal-title { font-size: 16px; font-weight: 700; margin: 0 0 18px; }
.pf-avatar-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; width: 100%;
}
.pf-av-opt {
  font-size: 28px; background: var(--cream2); border: 2px solid transparent;
  border-radius: var(--radius-sm); padding: 10px; cursor: pointer;
  transition: border-color .15s, background .15s; line-height: 1;
}
.pf-av-opt:hover { background: var(--cream3); }
.pf-av-opt--active { border-color: var(--turmeric); background: var(--turmeric3); }

/* Location */
.pf-location-name { font-size: 15px; font-weight: 500; color: var(--ink); margin: 0 0 4px; }
.pf-help-text { font-size: 13px; color: var(--ink3); margin: 4px 0 0; line-height: 1.5; }
.pf-empty-text { font-size: 14px; color: var(--ink3); margin: 0; }
.pf-location-form { margin-top: 12px; display: flex; flex-direction: column; gap: 4px; }
.pf-detect-btn {
  background: #2D3142; color: #fff; border: 1px solid #2D3142;
  padding: 8px 14px; border-radius: var(--radius-sm); font-size: 13px; cursor: pointer;
  transition: background .15s;
}
.pf-detect-btn:hover { background: #333; border-color: #333; }

/* Books grid */
.pf-books-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 14px;
}
.pf-book-card {
  background: var(--cream); border: 1px solid var(--cream3);
  border-radius: var(--radius-sm); overflow: hidden;
  display: flex; flex-direction: column;
  transition: box-shadow .15s;
}
.pf-book-card--link { text-decoration: none; color: inherit; cursor: pointer; }
.pf-book-card--link:hover { box-shadow: 0 4px 16px rgba(0,0,0,.08); }
.pf-book-cover { width: 100%; aspect-ratio: 2/3; object-fit: cover; display: block; }
.pf-book-cover--placeholder {
  width: 100%; aspect-ratio: 2/3; display: flex;
  align-items: center; justify-content: center; font-size: 36px; background: var(--cream2);
}
.pf-book-info { padding: 10px 10px 12px; }
.pf-book-title { font-size: 12px; font-weight: 600; margin: 0 0 2px; line-height: 1.3; color: var(--ink); }
.pf-book-author { font-size: 11px; color: var(--ink2); margin: 0 0 4px; }
.pf-book-date { font-size: 11px; color: var(--ink3); margin: 0 0 4px; }
.pf-book-status {
  display: inline-block; font-size: 10px; padding: 2px 7px;
  background: var(--cream2); color: var(--ink2); border-radius: 20px;
}
.pf-book-status--blocked { background: #fff3e0; color: #F64740; }
.pf-book-status--published { background: #e5f6ee; color: #0d6e52; }

/* Upload form */
.pf-upload-form {
  background: var(--cream); border: 1px solid var(--cream3);
  border-radius: var(--radius-sm); padding: 18px; margin-bottom: 18px;
}
.pf-upload-images {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 14px;
}
@media (max-width: 480px) { .pf-upload-images { grid-template-columns: 1fr; } }
.pf-upload-label {
  display: flex; flex-direction: column; gap: 4px;
  font-size: 12px; font-weight: 600; color: var(--ink2);
}
.pf-upload-label input[type=file] { font-size: 12px; color: var(--ink2); margin-top: 4px; }
.pf-upload-status { font-size: 13px; margin: 10px 0 0; line-height: 1.5; }

/* Borrow list */
.pf-borrow-list { display: flex; flex-direction: column; gap: 10px; }
.pf-borrow-row {
  display: flex; justify-content: space-between; align-items: flex-start;
  padding: 14px 16px; background: var(--cream); border: 1px solid var(--cream3);
  border-radius: var(--radius-sm); gap: 12px;
}
.pf-borrow-main { display: flex; flex-direction: column; gap: 3px; flex: 1; }
.pf-borrow-book { font-size: 14px; font-weight: 600; color: var(--ink); }
.pf-borrow-who { font-size: 13px; color: var(--ink2); }
.pf-borrow-msg { font-size: 13px; color: var(--ink3); font-style: italic; }
.pf-borrow-meeting { font-size: 13px; color: var(--ink2); }
.pf-return-rating { font-size: 12px; color: var(--ink2); }
.pf-borrow-side { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex-shrink: 0; }
.pf-borrow-badge {
  font-size: 11px; padding: 3px 9px; border-radius: 20px; font-weight: 600;
}
.pf-borrow-badge--pending   { background: var(--turmeric3); color: var(--ink2); }
.pf-borrow-badge--accepted  { background: #d4edda; color: #0d6e52; }
.pf-borrow-badge--rejected  { background: #fce4ec; color: #c0312c; }
.pf-borrow-badge--completed { background: var(--cream2); color: var(--ink2); }
.pf-borrow-badge--cancelled { background: var(--cream2); color: var(--ink3); }
.pf-borrow-date { font-size: 11px; color: var(--ink3); }
.pf-accept-btn { font-size: 13px; color: var(--turmeric-dark, #b45309); font-weight: 600; text-decoration: none; }
.pf-accept-btn:hover { text-decoration: underline; }

/* Empty / shares */
.pf-empty-block { text-align: center; padding: 24px 0; color: var(--ink3); }
.pf-browse-btn {
  display: inline-block; margin-top: 12px; background: #2D3142; color: #fff;
  padding: 10px 22px; border-radius: var(--radius-sm); font-size: 14px;
  font-weight: 600; text-decoration: none; transition: background .15s;
}
.pf-browse-btn:hover { background: #333; }
.pf-shares-list { display: flex; flex-direction: column; gap: 8px; }
.pf-share-row {
  display: flex; align-items: center; gap: 10px; font-size: 14px;
  padding: 10px 14px; background: var(--cream); border: 1px solid var(--cream3);
  border-radius: var(--radius-sm);
}
.pf-share-title { font-weight: 600; color: var(--ink); text-decoration: none; flex: 1; }
.pf-share-title:hover { text-decoration: underline; }
.pf-share-arrow { color: var(--ink3); }
.pf-share-friend { color: var(--ink2); flex: 1; }
.pf-share-date { font-size: 12px; color: var(--ink3); }

/* Photo avatar */
.pf-avatar--photo { object-fit: cover; }
.pf-avatar-emoji-btn {
  position: absolute; bottom: 4px; left: 4px;
  width: 24px; height: 24px; border-radius: 50%;
  background: #fff; border: 1px solid var(--cream3);
  font-size: 11px; cursor: pointer; display: flex;
  align-items: center; justify-content: center;
  box-shadow: 0 1px 4px rgba(0,0,0,.15);
}
.pf-avatar-emoji-btn:hover { background: var(--cream2); }

/* Hero actions (share + logout stacked) */
.pf-hero-actions {
  display: flex; flex-direction: row; align-items: flex-end;
  gap: 8px; flex-shrink: 0;
  padding-top: 50px; /* match pf-hero-info to clear avatar overlap */
  align-self: flex-end; /* stick to bottom of hero card */
  padding-bottom: 4px;
}
.pf-share-profile-btn {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 13px; color: #fff; background: #2D3142;
  border: 1px solid #2D3142; border-radius: var(--radius-sm);
  padding: 7px 14px; text-decoration: none; white-space: nowrap;
  transition: background .15s;
}
.pf-share-profile-btn:hover { background: #333; border-color: #333; }
.pf-private-tag {
  font-size: 10px; background: var(--cream2); color: var(--ink3);
  padding: 1px 6px; border-radius: 20px; vertical-align: middle;
}

/* Hero genres row */
.pf-hero-genres { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }

/* Posts */
.pf-post-form { margin-bottom: 16px; display: flex; flex-direction: column; gap: 8px; }
.pf-post-form-footer { display: flex; align-items: center; justify-content: space-between; }
.pf-post-card {
  background: var(--cream); border: 1px solid var(--cream3);
  border-radius: var(--radius-sm); padding: 14px 16px;
  margin-bottom: 10px;
}
.pf-post-card--nearby { background: #fff; }
.pf-post-author { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.pf-post-avatar { font-size: 22px; line-height: 1; }
.pf-post-author-name { font-size: 13px; font-weight: 600; color: var(--ink); text-decoration: none; }
.pf-post-author-name:hover { text-decoration: underline; }
.pf-post-content { font-size: 14px; color: var(--ink); margin: 0 0 10px; line-height: 1.6; }
.pf-post-meta { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.pf-post-book { font-size: 12px; color: var(--ink2); }
.pf-post-loc { font-size: 12px; color: var(--ink3); }
.pf-post-date { font-size: 11px; color: var(--ink3); margin-left: auto; }

@media (max-width: 560px) {
  .pf-cover-wrap { height: 130px; }
  .pf-hero { padding: 0 16px 16px; gap: 12px; flex-wrap: wrap; }
  .pf-hero-actions {
    flex-direction: row; padding-top: 0; align-self: auto;
    width: 100%; justify-content: flex-start; margin-top: 4px;
  }
  .pf-stats { grid-template-columns: repeat(2, 1fr); }
  .pf-stat:nth-child(2) { border-right: none; }
  .pf-stat:nth-child(3) { border-top: 1px solid var(--cream3); }
  .pf-stat:nth-child(4) { border-top: 1px solid var(--cream3); }
  .pf-borrow-row { flex-direction: column; }
  .pf-borrow-side { flex-direction: row; align-items: center; }
  .pf-share-row { flex-wrap: wrap; }
}

/* ── Legacy .profile-* aliases (kept for any other templates) ── */
.profile-page { min-height: 70vh; padding: 48px 20px 80px; }
.profile-wrap { max-width: 860px; margin: 0 auto; }

.profile-header {
  display: flex;
  align-items: center;
  gap: 20px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px 32px;
  margin-bottom: 36px;
}
.profile-avatar {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--yellow);
  color: var(--ink);
  font-size: 22px;
  font-weight: 600;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.profile-info { flex: 1; }
.profile-name { font-size: 20px; font-weight: 600; margin: 0 0 2px; }
.profile-email { font-size: 14px; color: var(--ink2); margin: 0; }
.profile-logout-btn {
  font-size: 13px;
  color: var(--ink3);
  text-decoration: underline;
  text-underline-offset: 2px;
  background: none; border: none; cursor: pointer; padding: 0;
}

.profile-section { margin-bottom: 48px; }
.profile-section-title {
  font-size: 18px; font-weight: 600;
  margin: 0 0 20px;
  display: flex; align-items: center; gap: 10px;
}
.profile-count {
  font-size: 13px; font-weight: 500;
  background: var(--yellow);
  color: var(--ink);
  border-radius: 20px;
  padding: 2px 10px;
}

.profile-books-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 16px;
}
.profile-book-card {
  display: flex; flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  text-decoration: none;
  color: var(--ink);
  transition: box-shadow .15s;
}
.profile-book-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,.08); }
.profile-book-cover {
  width: 100%; aspect-ratio: 2/3;
  object-fit: cover;
  background: #f5f0e8;
}
.profile-book-cover--placeholder {
  display: flex; align-items: center; justify-content: center;
  font-size: 36px;
}
.profile-book-info { padding: 10px 12px; }
.profile-book-title { font-size: 13px; font-weight: 600; margin: 0 0 2px; line-height: 1.3; }
.profile-book-author { font-size: 12px; color: var(--ink2); margin: 0 0 6px; }
.profile-book-status {
  font-size: 11px;
  background: #f5f0e8;
  color: var(--ink2);
  border-radius: 4px;
  padding: 2px 6px;
}

.profile-empty { color: var(--ink2); font-size: 15px; }

.profile-shares-list { display: flex; flex-direction: column; gap: 10px; }
.profile-share-row {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 14px;
}
.profile-share-title { font-weight: 500; color: var(--ink); text-decoration: none; }
.profile-share-title:hover { text-decoration: underline; }
.profile-share-arrow { color: var(--ink3); }
.profile-share-friend { color: var(--ink2); flex: 1; }
.profile-share-date { font-size: 12px; color: var(--ink3); }

/* ══════════════════════════════════════════════════════════════════════════
   TOAST NOTIFICATION
   ══════════════════════════════════════════════════════════════════════════ */
.kt-toast {
  position: fixed;
  top: 20px; right: 20px;
  background: var(--ink);
  color: #fff;
  border-radius: var(--radius-md);
  padding: 13px 16px;
  display: flex; align-items: center; gap: 10px;
  font-size: 14px;
  box-shadow: 0 8px 24px rgba(0,0,0,.18);
  z-index: 99999;
  max-width: 360px;
  opacity: 0; transform: translateY(-12px);
  transition: opacity .25s, transform .25s;
  pointer-events: none;
}
.kt-toast--show { opacity: 1; transform: translateY(0); pointer-events: auto; }
.kt-toast-msg { flex: 1; line-height: 1.4; }
.kt-toast-link {
  color: var(--yellow); font-weight: 600; font-size: 13px;
  text-decoration: none; white-space: nowrap;
}
.kt-toast-link:hover { text-decoration: underline; }
.kt-toast-close {
  background: none; border: none; color: #a8a090;
  cursor: pointer; font-size: 13px; padding: 0; line-height: 1; flex-shrink: 0;
}
.kt-toast-close:hover { color: #fff; }
@media (max-width: 600px) {
  .kt-toast { top: 12px; left: 12px; right: 12px; max-width: none; }
}

/* ══════════════════════════════════════════════════════════════════════════
   PROFILE — LOCATION
   ══════════════════════════════════════════════════════════════════════════ */
.profile-location-box {
  display: flex; flex-direction: column; gap: 10px;
  background: var(--cream2);
  border: 1px solid var(--cream3);
  border-radius: var(--radius-md);
  padding: 16px 18px;
}
.profile-location-name { font-size: 15px; font-weight: 500; color: var(--ink); margin: 0; }
.profile-location-empty { font-size: 14px; color: var(--ink3); margin: 0; }
.profile-location-help {
  color: var(--ink3);
  font-size: 12px;
  line-height: 1.5;
  margin: 4px 0 0;
}
.profile-location-input {
  width: 100%; padding: 10px 12px;
  border: 1px solid var(--cream3); border-radius: var(--radius-sm);
  font-size: 14px; color: var(--ink); background: #fff;
  box-sizing: border-box; transition: border-color .15s;
}
.profile-location-input:focus { outline: none; border-color: var(--turmeric); }
.profile-location-actions { display: flex; gap: 8px; margin-top: 4px; }
.profile-edit-btn {
  background: none; border: 1px solid var(--cream3);
  border-radius: var(--radius-sm); padding: 6px 14px;
  font-size: 13px; color: var(--ink2); cursor: pointer;
  align-self: flex-start; transition: background .15s, border-color .15s;
}
.profile-edit-btn:hover { background: var(--cream3); color: var(--ink); border-color: var(--cream3); }
.profile-loc-btn {
  padding: 8px 18px; border-radius: var(--radius-sm);
  font-size: 13px; font-weight: 600; cursor: pointer; border: none;
  transition: background .15s;
}
.profile-loc-btn--save { background: #2D3142; color: #fff; }
.profile-loc-btn--save:hover { background: #333; }
.profile-loc-btn--detect {
  background: var(--turmeric);
  color: var(--ink);
}
.profile-loc-btn--detect:hover { background: var(--turmeric2); }
.profile-loc-btn--cancel {
  background: none; border: 1px solid var(--cream3); color: var(--ink2);
}
.profile-loc-btn--cancel:hover { background: var(--cream3); }

/* ══════════════════════════════════════════════════════════════════════════
   PROFILE — BOOK UPLOAD
   ══════════════════════════════════════════════════════════════════════════ */
.profile-upload-toggle {
  background: none; border: 1.5px dashed var(--cream3);
  border-radius: var(--radius-md); padding: 12px 20px;
  font-size: 14px; font-weight: 600; color: var(--ink2);
  cursor: pointer; width: 100%; text-align: center;
  transition: border-color .2s, color .2s;
}
.profile-upload-toggle:hover { border-color: var(--ink2); color: var(--ink); }
.profile-upload-form {
  border: 1px solid var(--cream3); border-radius: var(--radius-md);
  padding: 20px; margin-bottom: 20px; background: var(--cream2);
}
.profile-upload-hint { font-size: 13px; color: var(--ink3); margin: 0 0 16px; line-height: 1.5; }
.profile-upload-images {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px;
}
@media (max-width: 500px) { .profile-upload-images { grid-template-columns: 1fr; } }
.profile-upload-label {
  display: flex; flex-direction: column; gap: 6px;
  font-size: 13px; font-weight: 600; color: var(--ink2);
}
.profile-upload-label input[type=file] { font-size: 13px; color: var(--ink2); }
.profile-upload-fields { margin-bottom: 16px; }
.profile-upload-field-label {
  display: flex; flex-direction: column; gap: 6px;
  font-size: 13px; font-weight: 600; color: var(--ink2);
}
.profile-upload-select {
  padding: 8px 10px; border: 1px solid var(--cream3);
  border-radius: var(--radius-sm); font-size: 14px;
  background: #fff; color: var(--ink);
}
.profile-upload-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.profile-upload-submit {
  padding: 10px 22px; background: var(--ink); color: #fff;
  border: none; border-radius: var(--radius-sm);
  font-size: 14px; font-weight: 700; cursor: pointer; transition: background .15s;
}
.profile-upload-submit:hover { background: var(--forest); }
.profile-upload-submit:disabled { opacity: .6; cursor: not-allowed; }
.profile-upload-status { font-size: 13px; margin: 10px 0 0; line-height: 1.5; }
.profile-empty-small { font-size: 14px; color: var(--ink3); margin: 8px 0 0; }

/* Owned-book card — no link cursor, no lift on hover */
.profile-book-card--owned { cursor: default; }
.profile-book-card--owned:hover { box-shadow: none; }
.profile-book-status--blocked {
  background: #fff3cd; color: #7d5a00; border: 1px solid #f0d060;
}
.profile-book-status--published { background: #e5f6ee; color: #0d6e52; }

/* ══════════════════════════════════════════════════════════════════════════
   PROFILE — BORROW REQUESTS
   ══════════════════════════════════════════════════════════════════════════ */
.profile-borrow-list { display: flex; flex-direction: column; gap: 10px; }
.profile-borrow-row {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
  background: var(--cream2);
  border: 1px solid var(--cream3); border-radius: var(--radius-md);
  padding: 14px 16px;
}
.profile-borrow-info {
  display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 0;
}
.profile-borrow-book { font-weight: 600; font-size: 14px; color: var(--ink); }
.profile-borrow-who { font-size: 13px; color: var(--ink2); }
.profile-borrow-msg { font-size: 13px; color: var(--ink3); font-style: italic; }
.profile-borrow-meeting { font-size: 13px; color: var(--ink2); }
.profile-borrow-date { font-size: 12px; color: var(--ink3); }
.profile-borrow-actions { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; flex-shrink: 0; }
.profile-borrow-badge {
  font-size: 11px; font-weight: 700; padding: 3px 10px;
  border-radius: 999px; white-space: nowrap; letter-spacing: .01em;
}
.profile-borrow-badge--pending   { background: var(--turmeric3); color: var(--ink2); }
.profile-borrow-badge--accepted  { background: #d4edda; color: #0d6e52; }
.profile-borrow-badge--rejected  { background: #fce4ec; color: #c0312c; }
.profile-borrow-badge--completed { background: var(--cream2); color: var(--ink2); }
.profile-borrow-badge--cancelled { background: var(--cream2); color: var(--ink3); }
.profile-borrow-accept-btn {
  font-size: 13px; font-weight: 700; color: var(--forest);
  text-decoration: none; white-space: nowrap;
}
.profile-borrow-accept-btn:hover { text-decoration: underline; }

@media (max-width: 560px) {
  .profile-borrow-row { flex-direction: column; }
  .profile-borrow-actions { flex-direction: row; align-items: center; }
}

/* ══════════════════════════════════════════════════════════════════════════
   HOME FEED (logged-in users) — Social-media style
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Page & layout ── */
.fd-page { min-height: 80vh; }
.fd-layout {
  max-width: 940px; margin: 0 auto;
  display: grid; grid-template-columns: 290px 1fr; gap: 20px;
  padding: 24px 16px 80px; align-items: start;
}
@media (max-width: 800px) { .fd-layout { grid-template-columns: 1fr; padding: 12px 12px 60px; } }

/* ── Sidebar ── */
.fd-sidebar { display: flex; flex-direction: column; gap: 12px; position: sticky; top: 76px; }
@media (max-width: 800px) { .fd-sidebar { position: static; } }

/* ── Base card ── */
.fd-card {
  background: #fff;
  border-radius: 12px;
  border: 0.5px solid #ece8de;
  box-shadow: 0 2px 8px rgba(45,49,66,.06), 0 6px 24px rgba(45,49,66,.07);
  overflow: hidden;
}

/* ── Profile mini card ── */
.fd-profile-card { padding: 20px; display: flex; flex-direction: column; gap: 10px; }
.fd-profile-avatar-wrap { display: inline-block; text-decoration: none; }
.fd-avatar {
  width: 62px; height: 62px; border-radius: 50%;
  background: var(--cream2); border: 2px solid var(--cream3);
  display: flex; align-items: center; justify-content: center; font-size: 26px;
}
.fd-avatar--photo { object-fit: cover; }
.fd-profile-meta { display: flex; flex-direction: column; gap: 3px; }
.fd-profile-name { font-size: 15px; font-weight: 700; color: var(--ink); text-decoration: none; }
.fd-profile-name:hover { text-decoration: underline; }
.fd-profile-loc { font-size: 12px; color: var(--ink3); }
.fd-profile-counts {
  display: flex; align-items: stretch;
  border: 1px solid var(--cream3); border-radius: 10px; overflow: hidden;
}
.fd-count-item { flex: 1; padding: 10px 4px; text-align: center; }
.fd-count-item strong { display: block; font-size: 17px; font-weight: 700; color: var(--ink); line-height: 1; }
.fd-count-item span { font-size: 11px; color: var(--ink3); margin-top: 2px; display: block; }
.fd-count-divider { width: 1px; background: var(--cream3); flex-shrink: 0; }
.fd-edit-profile-link {
  font-size: 13px; color: var(--ink2); text-decoration: none; text-align: center;
  padding: 8px; border: 1px solid var(--cream3); border-radius: 8px;
  transition: background .15s;
}
.fd-edit-profile-link:hover { background: var(--cream); color: var(--ink); }

/* ── Card labels ── */
.fd-card-label {
  font-size: 12px; font-weight: 700; color: var(--ink2);
  text-transform: uppercase; letter-spacing: .05em; margin: 0 0 6px;
}
.fd-card-label--pad { padding: 14px 16px 0; }
.fd-card-label-sub { font-size: 11px; color: var(--ink3); font-weight: 400; text-transform: none; letter-spacing: 0; }

/* ── Quick post ── */
.fd-quick-post { padding: 14px; }
.fd-textarea {
  width: 100%; min-height: 76px; resize: none;
  border: 1px solid var(--cream3); border-radius: 8px;
  padding: 10px 12px; font-size: 14px; font-family: inherit;
  color: var(--ink); background: #f9f7f2;
  transition: border-color .15s; box-sizing: border-box;
}
.fd-textarea:focus { outline: none; border-color: var(--turmeric); background: #fff; }
.fd-quick-footer { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; }
.fd-charcount { font-size: 11px; color: var(--ink3); }
.fd-btn-post {
  background: #2D3142; color: #fff; border: none;
  padding: 8px 20px; border-radius: 20px; font-size: 13px;
  font-weight: 600; cursor: pointer; transition: background .15s; font-family: inherit;
}
.fd-btn-post:hover { background: #333; }
.fd-note { font-size: 11px; color: var(--ink3); margin: 6px 0 0; }
.fd-err { font-size: 12px; color: var(--chilli); margin: 6px 0 0; }

/* ── People rows (suggestions / locality) ── */
.fd-person-row {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px; border-bottom: 1px solid #f5f2ec;
}
.fd-person-row:last-child { border-bottom: none; }
.fd-person-avatar-link { flex-shrink: 0; text-decoration: none; }
.fd-person-avatar {
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--cream2); display: flex; align-items: center;
  justify-content: center; font-size: 20px;
}
.fd-person-avatar--photo { object-fit: cover; }
.fd-person-info { flex: 1; min-width: 0; }
.fd-person-name {
  font-size: 13px; font-weight: 600; color: var(--ink); text-decoration: none;
  display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.fd-person-name:hover { text-decoration: underline; }
.fd-person-sub { font-size: 11px; color: var(--ink3); display: block; margin-top: 1px; }

/* ── Follow button ── */
.fd-follow-btn {
  font-size: 12px; font-weight: 600; padding: 5px 14px;
  border-radius: 20px; border: 1.5px solid var(--ink);
  background: #fff; color: var(--ink); cursor: pointer;
  flex-shrink: 0; transition: background .15s, color .15s;
  font-family: inherit; white-space: nowrap;
}
.fd-follow-btn:hover { background: #2D3142; color: #fff; }
.fd-follow-btn--on { background: var(--cream2); color: var(--ink2); border-color: var(--cream3); }
.fd-follow-btn--on:hover { background: #fce4ec; color: #c0312c; border-color: #f8bbd0; }

/* ── Feed column ── */
.fd-feed { display: flex; flex-direction: column; gap: 12px; }

/* ── Post card (Facebook style) ── */
.fd-post-card { }

.fd-post-head {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 14px 14px 0;
}
.fd-post-avatar-link { flex-shrink: 0; text-decoration: none; }
.fd-post-ava {
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--cream2); display: flex; align-items: center;
  justify-content: center; font-size: 22px; flex-shrink: 0;
}
.fd-post-ava--photo { object-fit: cover; }
.fd-post-author-col { flex: 1; min-width: 0; }
.fd-post-author-name {
  font-size: 14px; font-weight: 700; color: var(--ink); text-decoration: none; display: block;
}
.fd-post-author-name:hover { text-decoration: underline; }
.fd-post-badges { display: flex; gap: 4px; flex-wrap: wrap; margin: 3px 0 2px; }
.fd-badge-chip {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 10px; font-weight: 600; padding: 2px 8px; border-radius: 20px;
  white-space: nowrap; line-height: 1.4;
}
.fd-badge-chip--badge-shelf    { background: #fffbea; color: #92400e; }
.fd-badge-chip--badge-page     { background: #e5f7ef; color: #0d6e52; }
.fd-badge-chip--badge-literary { background: #f5f3ff; color: #4c1d95; }
.fd-badge-chip--badge-first    { background: #fff7ed; color: #c0312c; }
.fd-badge-chip--badge-exchange { background: #edf8f3; color: #0d6e52; }
.fd-badge-chip--badge-streak   { background: #fff7ed; color: #c0312c; }
.fd-post-meta {
  display: flex; gap: 4px; font-size: 12px; color: var(--ink3);
  align-items: center; flex-wrap: wrap;
}
.fd-post-meta-item { }
.fd-meta-dot { color: var(--cream3); }

.fd-post-body {
  padding: 10px 14px 12px; font-size: 15px; color: var(--ink);
  line-height: 1.65; margin: 0; white-space: pre-wrap; word-break: break-word;
}

/* Book attachment inside post */
.fd-post-book {
  margin: 0 14px 12px;
  display: flex; align-items: center; gap: 12px;
  background: #f9f7f2; border: 1px solid #eae7df;
  border-radius: 10px; padding: 10px 12px; text-decoration: none;
  transition: background .15s;
}
.fd-post-book:hover { background: var(--cream2); }
.fd-post-book-img { width: 44px; height: 62px; object-fit: cover; border-radius: 6px; flex-shrink: 0; }
.fd-post-book-emoji { font-size: 28px; flex-shrink: 0; }
.fd-post-book-info { display: flex; flex-direction: column; gap: 2px; }
.fd-post-book-title { font-size: 13px; font-weight: 600; color: var(--ink); }
.fd-post-book-author { font-size: 12px; color: var(--ink2); }

/* Action bar */
.fd-post-actions {
  display: flex; border-top: 1px solid #f0ede6; margin: 0 6px; padding: 3px 0;
}
.fd-action-btn {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 5px;
  padding: 8px 4px; border-radius: 8px; font-size: 13px; font-weight: 500;
  color: var(--ink2); background: none; border: none; cursor: pointer;
  transition: background .15s, color .15s; font-family: inherit;
}
.fd-action-btn:hover { background: #f5f2ec; color: var(--ink); }

/* ── Book card in feed ── */
.fd-book-card {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 14px; text-decoration: none; color: inherit;
  transition: box-shadow .15s;
}
.fd-book-card:hover { box-shadow: 0 4px 20px rgba(0,0,0,.1); }
.fd-book-cover {
  width: 72px; height: 108px; object-fit: cover; object-position: center top;
  border-radius: 8px; flex-shrink: 0; display: block; background: #f0ede6;
}
.fd-book-cover--empty {
  width: 72px; height: 108px; border-radius: 8px; background: var(--cream2);
  display: flex; align-items: center; justify-content: center;
  font-size: 30px; flex-shrink: 0;
}
.fd-book-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; padding-top: 2px; }
.fd-new-pill {
  display: inline-block; font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; color: #b45309; background: var(--turmeric3);
  padding: 2px 8px; border-radius: 20px; align-self: flex-start; margin-bottom: 2px;
}
.fd-book-title { font-size: 15px; font-weight: 700; color: var(--ink); line-height: 1.3; }
.fd-book-author { font-size: 13px; color: var(--ink2); }
.fd-book-avail { font-size: 12px; color: var(--ink3); margin-top: 2px; }

/* ── Book post card (social feed style) ── */
.fd-book-post-card { padding: 0; overflow: hidden; }

/* Cover image – full-width, portrait proportion */
.fd-book-post-cover-link { display: block; background: var(--cream2); }
.fd-book-post-cover {
  width: 100%; max-height: 380px; object-fit: cover; object-position: center top;
  display: block;
}
.fd-book-post-cover--empty {
  width: 100%; height: 200px;
  display: flex; align-items: center; justify-content: center;
  font-size: 48px; background: var(--cream2);
}

/* Book details block */
.fd-book-post-body {
  padding: 12px 14px 10px;
  display: flex; flex-direction: column; gap: 4px;
}
.fd-book-post-title {
  font-size: 16px; font-weight: 700; color: var(--ink); line-height: 1.3;
  display: block;
}
.fd-book-post-title:hover { color: var(--forest); }
.fd-book-post-author { font-size: 13px; color: var(--ink2); margin: 0; }
.fd-book-post-desc { font-size: 13px; color: var(--ink3); line-height: 1.5; margin: 0; }
.fd-book-post-avail {
  font-size: 12px; color: var(--ink3); margin-top: 2px;
  display: inline-flex; align-items: center; gap: 3px;
}

/* Action bar */
.fd-book-post-actions {
  border-top: 1px solid var(--cream2); padding: 4px 8px;
  display: flex; align-items: center; gap: 4px;
}

/* Borrow primary button */
.fd-borrow-btn {
  display: inline-flex; align-items: center; gap: 5px;
  background: #2D3142; color: #fff;
  padding: 7px 14px; border-radius: 8px;
  font-size: 13px; font-weight: 600; letter-spacing: .01em;
  transition: background .13s, transform .1s;
}
.fd-borrow-btn:hover { background: #333; color: #fff; }
.fd-borrow-btn:active { transform: scale(.97); }
.fd-borrow-btn .mi { color: #fff; }

/* Ad card ── */
.fd-ad-card { padding: 14px; border: 1.5px solid var(--turmeric2); }
.fd-ad-pill {
  display: inline-block; font-size: 10px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .06em; color: #7a6200; background: var(--turmeric3);
  padding: 2px 8px; border-radius: 20px; margin-bottom: 10px;
}
.fd-ad-img { width: 100%; border-radius: 8px; margin-bottom: 10px; max-height: 200px; object-fit: cover; }
.fd-ad-title { font-size: 16px; font-weight: 700; margin: 0 0 6px; color: var(--ink); }
.fd-ad-body { font-size: 14px; color: var(--ink2); margin: 0 0 12px; line-height: 1.5; }
.fd-ad-cta {
  display: inline-block; background: #2D3142; color: #fff;
  font-size: 13px; font-weight: 700; padding: 9px 20px; border-radius: 8px;
  text-decoration: none; transition: background .15s;
}
.fd-ad-cta:hover { background: #333; }

/* ── Empty feed ── */
.fd-empty-card { padding: 48px 20px; text-align: center; }
.fd-empty-icon { font-size: 48px; margin-bottom: 12px; }
.fd-empty-title { font-size: 18px; font-weight: 700; color: var(--ink); margin-bottom: 6px; }
.fd-empty-sub { font-size: 14px; color: var(--ink3); margin-bottom: 20px; }
.fd-btn-browse {
  display: inline-block; background: #2D3142; color: #fff;
  font-size: 14px; font-weight: 600; padding: 11px 24px; border-radius: 8px;
  text-decoration: none; transition: background .15s;
}
.fd-btn-browse:hover { background: #333; }

/* ══════════════════════════════════════════════════════════════════════════
   BADGE EARNED POPUP — playful celebration style
   ══════════════════════════════════════════════════════════════════════════ */
.bdg-overlay {
  position: fixed; inset: 0; background: rgba(10,8,5,.55);
  display: flex; align-items: flex-end; justify-content: center;
  z-index: 2000; padding: 16px;
  animation: bdgFadeIn .2s ease;
}
@keyframes bdgFadeIn { from { opacity: 0; } to { opacity: 1; } }
@media (min-width: 560px) { .bdg-overlay { align-items: center; } }

.bdg-popup {
  --badge-color: #F5C842;
  background: #fff; border-radius: 24px;
  max-width: 400px; width: 100%;
  box-shadow: 0 32px 80px rgba(0,0,0,.3), 0 0 0 1px rgba(0,0,0,.06);
  overflow: hidden; position: relative;
  animation: bdgBounceIn .45s cubic-bezier(.34,1.56,.64,1);
}
@keyframes bdgBounceIn {
  from { transform: scale(.7) translateY(30px); opacity: 0; }
  to   { transform: scale(1) translateY(0);     opacity: 1; }
}

/* Confetti canvas — absolutely positioned inside popup */
.bdg-confetti {
  position: absolute; inset: 0; width: 100%; height: 100%;
  pointer-events: none; z-index: 0;
}

.bdg-slide { display: flex; flex-direction: column; align-items: center; position: relative; z-index: 1; }
.bdg-slide--hidden { display: none; }

/* ── Hero icon with pulsing glow rings ── */
.bdg-hero {
  --badge-color: inherit;
  padding: 36px 0 20px;
  display: flex; align-items: center; justify-content: center;
  position: relative;
}
.bdg-ring {
  position: absolute; border-radius: 50%;
  border: 2px solid var(--badge-color);
  opacity: .2;
}
.bdg-ring--outer {
  width: 110px; height: 110px;
  animation: bdgPulse 2s ease-in-out infinite;
}
.bdg-ring--inner {
  width: 86px; height: 86px;
  animation: bdgPulse 2s ease-in-out .4s infinite;
}
@keyframes bdgPulse {
  0%, 100% { transform: scale(1);   opacity: .2; }
  50%       { transform: scale(1.08); opacity: .35; }
}
.bdg-icon-circle {
  width: 72px; height: 72px; border-radius: 50%;
  background: color-mix(in srgb, var(--badge-color) 18%, #fff);
  border: 3px solid var(--badge-color);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 28px color-mix(in srgb, var(--badge-color) 35%, transparent);
  animation: bdgIconPop .5s cubic-bezier(.34,1.56,.64,1) .15s both;
}
@keyframes bdgIconPop {
  from { transform: scale(0); }
  to   { transform: scale(1); }
}
.bdg-emoji { font-size: 36px; line-height: 1; }

/* ── Text block ── */
.bdg-body {
  padding: 0 28px 20px; text-align: center;
  display: flex; flex-direction: column; gap: 6px;
}
.bdg-eyebrow {
  font-size: 12px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink3); margin: 0;
}
.bdg-name {
  font-family: 'Inter', sans-serif;
  font-size: 26px; font-weight: 700; color: var(--ink);
  margin: 2px 0 0; line-height: 1.15;
}
.bdg-what {
  display: inline-block; font-size: 12px; font-weight: 600;
  color: #fff; background: var(--badge-color);
  padding: 3px 12px; border-radius: 20px; margin: 4px auto 0;
}
.bdg-tagline {
  font-size: 14px; color: var(--ink2); line-height: 1.65;
  margin: 6px 0 0;
}

/* ── Share strip ── */
.bdg-share-strip {
  width: 100%; display: flex; align-items: center; justify-content: center;
  gap: 8px; padding: 12px 20px;
  border-top: 1px solid #f0ede6; background: #faf9f6;
}
.bdg-share-label { font-size: 12px; color: var(--ink3); font-weight: 500; margin-right: 2px; }
.bdg-share-btn {
  width: 30px; height: 30px; border-radius: 50%;
  border: 1px solid var(--cream3); background: #fff; color: var(--ink2);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; text-decoration: none;
  transition: background .15s, transform .15s; flex-shrink: 0;
}
.bdg-share-btn:hover { background: var(--cream2); transform: scale(1.12); color: var(--ink); }

/* ── Footer nav ── */
.bdg-footer {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 20px; border-top: 1px solid #f0ede6;
  background: #faf9f6; position: relative; z-index: 1;
}
.bdg-dots { display: flex; gap: 6px; align-items: center; }
.bdg-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--cream3); transition: background .2s, transform .2s;
}
.bdg-dot--active { background: var(--badge-color); transform: scale(1.4); }
.bdg-btn-cta {
  background: #2D3142; color: #fff; border: none;
  padding: 10px 22px; border-radius: 20px; font-size: 14px;
  font-weight: 700; cursor: pointer; font-family: inherit;
  transition: background .15s, transform .1s;
}
.bdg-btn-cta:hover { background: #333; }
.bdg-btn-cta:active { transform: scale(.97); }

/* ── Profile/public badge display ── */
.profile-badges-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
.profile-badge-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 14px; border-radius: 20px; font-size: 13px; font-weight: 600;
  border: 1.5px solid transparent;
}
.profile-badge-chip--badge-shelf    { background: #fffbea; color: #92400e; border-color: #fde68a; }
.profile-badge-chip--badge-page     { background: #e5f7ef; color: #0d6e52; border-color: #7fcbb5; }
.profile-badge-chip--badge-literary { background: #f5f3ff; color: #4c1d95; border-color: #c4b5fd; }
.profile-badge-chip--badge-first    { background: #fff7ed; color: #c0312c; border-color: #fed7aa; }
.profile-badge-chip--badge-exchange { background: #edf8f3; color: #0d6e52; border-color: #7fcbb5; }
.profile-badge-chip--badge-streak   { background: #fff7ed; color: #c0312c; border-color: #fdba74; }
.profile-badge-chip-emoji { font-size: 16px; }
.profile-badge-chip-desc { font-size: 11px; color: inherit; opacity: .7; font-weight: 400; }

/* ── Badge animations on bdg-hero ── */
@keyframes bdgFlame {
  0%,100% { transform: scale(1) rotate(-2deg); }
  50%      { transform: scale(1.08) rotate(2deg); }
}
@keyframes bdgShimmer {
  0%   { filter: brightness(1); }
  50%  { filter: brightness(1.25) drop-shadow(0 0 8px currentColor); }
  100% { filter: brightness(1); }
}
@keyframes bdgCrown {
  0%,100% { transform: translateY(0) scale(1); }
  50%     { transform: translateY(-4px) scale(1.07); }
}
@keyframes bdgGlow {
  0%,100% { box-shadow: 0 0 0 0 var(--badge-color,#F5C842); }
  50%     { box-shadow: 0 0 18px 6px var(--badge-color,#F5C842); }
}
@keyframes bdgBounce2 {
  0%,100% { transform: translateY(0); }
  40%     { transform: translateY(-8px); }
  60%     { transform: translateY(-4px); }
}
.bdg-anim-flame  .bdg-icon-circle { animation: bdgFlame  1.8s ease-in-out infinite; }
.bdg-anim-shimmer .bdg-icon-circle { animation: bdgShimmer 2s ease-in-out infinite; }
.bdg-anim-crown  .bdg-icon-circle { animation: bdgCrown  2.2s ease-in-out infinite; }
.bdg-anim-glow   .bdg-icon-circle { animation: bdgGlow   2s ease-in-out infinite; }
.bdg-anim-bounce .bdg-icon-circle { animation: bdgBounce2 1.6s ease-in-out infinite; }
.bdg-anim-pulse  .bdg-icon-circle { animation: bdgPulse   2s ease-in-out infinite; }

/* ── Avatar badge pip overlay ── */
.fd-ava-wrap { position: relative; display: inline-block; flex-shrink: 0; }
.fd-ava-badge-pip {
  position: absolute; bottom: -2px; right: -2px;
  width: 18px; height: 18px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; line-height: 1;
  border: 2px solid var(--paper); box-shadow: 0 1px 4px rgba(0,0,0,.18);
  pointer-events: none;
}
.fd-post-avatar-link.fd-ava-wrap { display: inline-flex; }
.fd-profile-avatar-wrap.fd-ava-wrap { display: block; }

/* ── Futuristic action buttons ── */
.fd-action-btn {
  display: inline-flex; align-items: center; gap: 5px;
  background: none; border: none; padding: 7px 12px;
  border-radius: 8px; font-size: 13px; font-weight: 500;
  color: var(--ink2); cursor: pointer; font-family: inherit;
  transition: background .13s, color .13s, transform .1s;
  letter-spacing: .01em;
}
.fd-action-btn:hover { background: var(--cream2); color: var(--ink); }
.fd-action-btn:active { transform: scale(.96); }
.fd-action-btn .mi { transition: color .13s, font-variation-settings .15s; }

.fd-action-btn--like:hover .mi { color: #F64740; }
.fd-action-btn--liked { color: #F64740 !important; }
.fd-action-btn--liked .mi { color: #F64740; font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 20; }

.fd-action-btn--comment:hover .mi { color: var(--forest); }
.fd-action-btn--share:hover .mi { color: #7c3aed; }
.fd-action-btn--copied { color: var(--forest) !important; }
.fd-action-btn--copied .mi { color: var(--forest); }

/* ── Next badge progress card ── */
.fd-next-badge-card { padding: 14px 16px 16px; }
.fd-next-badge-card .fd-card-label { margin-bottom: 10px; }
.fd-nbadge-row { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.fd-nbadge-emoji {
  width: 40px; height: 40px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; flex-shrink: 0;
}
.fd-nbadge-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.fd-nbadge-name { font-size: 13px; font-weight: 700; color: var(--ink); }
.fd-nbadge-sub  { font-size: 11px; color: var(--ink3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fd-nbadge-bar-wrap {
  height: 6px; background: var(--cream2); border-radius: 3px; overflow: hidden; margin-bottom: 4px;
}
.fd-nbadge-bar { height: 100%; border-radius: 3px; transition: width .4s ease; min-width: 4px; }
.fd-nbadge-prog { font-size: 11px; color: var(--ink3); text-align: right; margin: 0; }

/* ══════════════════════════════════════════════════════════════════════════
   BORROW ACCEPT PAGE
   ══════════════════════════════════════════════════════════════════════════ */
.borrow-accept-form { display: flex; flex-direction: column; gap: 16px; }
.borrow-accept-label {
  display: flex; flex-direction: column; gap: 6px;
  font-size: 13px; font-weight: 600; color: var(--ink2);
}
.borrow-accept-input {
  padding: 10px 12px; border: 1px solid var(--cream3);
  border-radius: var(--radius-sm); font-size: 14px;
  color: var(--ink); background: #fff; width: 100%; box-sizing: border-box;
  transition: border-color .15s;
}
.borrow-accept-input:focus { outline: none; border-color: var(--turmeric); }
.borrow-accept-details {
  background: var(--cream2); border: 1px solid var(--cream3);
  border-radius: var(--radius-md); padding: 14px 16px;
  font-size: 15px; color: var(--ink); line-height: 1.7;
}

/* ── Fix avatar photo sizing in feed posts ── */
.fd-post-ava--photo { width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0; }

/* ── Post photo attachment ── */
.fd-photo-attach-btn {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 13px; color: var(--ink3); cursor: pointer;
  padding: 4px 8px; border-radius: 6px; border: 1px solid var(--cream3);
  transition: background .13s, color .13s;
}
.fd-photo-attach-btn:hover { background: var(--cream2); color: var(--ink2); }
.fd-post-photo-row {
  display: flex; align-items: flex-start; gap: 8px;
  margin: 6px 0; position: relative;
}
.fd-post-photo-preview {
  max-width: 100%; border-radius: 8px; max-height: 200px; object-fit: cover;
}
.fd-photo-remove-btn {
  background: #fff; border: 1px solid var(--cream3); border-radius: 50%;
  width: 24px; height: 24px; cursor: pointer;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}

/* Post photo in feed */
.fd-post-photo-wrap { padding: 0 14px 10px; }
.fd-post-photo { width: 100%; border-radius: 8px; max-height: 400px; object-fit: cover; display: block; }

/* ── @ mention dropdown ── */
.fd-mention-dropdown {
  position: absolute; top: 100%; left: 0; right: 0; z-index: 200;
  background: #fff; border: 1px solid var(--cream3); border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0,0,0,.1); max-height: 180px; overflow-y: auto;
}
.fd-mention-item {
  padding: 9px 12px; cursor: pointer; transition: background .1s;
  border-bottom: 1px solid var(--cream2);
}
.fd-mention-item:last-child { border-bottom: none; }
.fd-mention-item:hover { background: var(--cream2); }
.fd-mention-name { font-size: 13px; font-weight: 600; color: var(--ink); }

/* ── Profile highlight section (borrow notifications) ── */
.pf-section--highlight { border-left: 3px solid #F64740; }
.pf-badge--alert { background: #F64740; color: #fff; }

/* ── Readers nearby grid (profile + public profile) ── */
.pf-readers-grid {
  display: flex; flex-wrap: wrap; gap: 12px; padding: 4px 0;
}
.pf-reader-card {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  text-decoration: none; color: var(--ink);
  width: 72px;
}
.pf-reader-card:hover .pf-reader-name { text-decoration: underline; }
.pf-reader-ava {
  width: 52px; height: 52px; border-radius: 50%;
  background: var(--cream2); display: flex; align-items: center;
  justify-content: center; font-size: 24px; flex-shrink: 0;
}
.pf-reader-ava--photo { object-fit: cover; }
.pf-reader-name {
  font-size: 11px; text-align: center; color: var(--ink2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  width: 100%;
}

/* ── Public profile follow button ── */
.pf-follow-btn-hero {
  display: inline-flex; align-items: center; gap: 5px;
  background: #2D3142; color: #fff;
  border: none; border-radius: 8px; padding: 8px 16px;
  font-size: 13px; font-weight: 600; cursor: pointer;
  font-family: inherit; transition: background .13s;
}
.pf-follow-btn-hero:hover { background: #333; }
.pf-follow-btn-hero--on { background: var(--cream3); color: var(--ink); }
.pf-follow-btn-hero--on:hover { background: var(--cream2); }

/* ══════════════════════════════════════════════════════════════════════════
   READING CALENDAR
   ══════════════════════════════════════════════════════════════════════════ */
.cal-page { padding: 20px 16px 60px; }
.cal-wrap { max-width: 680px; margin: 0 auto; display: flex; flex-direction: column; gap: 14px; }

.cal-header { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 4px; }
.cal-title {
  font-size: 22px; font-weight: 800; color: var(--ink);
  display: flex; align-items: center; gap: 8px; margin-bottom: 4px;
}
.cal-subtitle { font-size: 13px; color: var(--ink3); display: flex; align-items: center; gap: 4px; }
.cal-nav-link {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 13px; font-weight: 600; color: var(--ink2);
  padding: 6px 12px; border-radius: 8px; background: var(--cream3);
  transition: background .13s;
}
.cal-nav-link:hover { background: var(--cream2); }

/* Month nav */
.cal-nav {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 14px;
}
.cal-month-label { font-size: 17px; font-weight: 700; color: var(--ink); }
.cal-nav-btn {
  width: 36px; height: 36px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--cream2); color: var(--ink); transition: background .13s;
}
.cal-nav-btn:hover { background: var(--cream3); }

/* Legend */
.cal-legend { display: flex; gap: 16px; font-size: 12px; color: var(--ink3); align-items: center; }
.cal-legend-item { display: flex; align-items: center; gap: 5px; }
.cal-dot {
  width: 10px; height: 10px; border-radius: 50%;
}
.cal-dot--read    { background: var(--forest); }
.cal-dot--borrow  { background: #7c3aed; }
.cal-dot--today   { background: var(--turmeric); border: 1px solid #b45309; }

/* Grid */
.cal-grid-card { padding: 16px; overflow: hidden; }
.cal-week-header {
  display: grid; grid-template-columns: repeat(7, 1fr);
  margin-bottom: 6px;
}
.cal-weekday { text-align: center; font-size: 11px; font-weight: 700; color: var(--ink3); padding: 4px 0; }
.cal-week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; margin-bottom: 2px; }

.cal-day {
  position: relative;
  border-radius: 8px;
  cursor: pointer; transition: background .13s, transform .1s;
  user-select: none;
}
.cal-day:hover { background: var(--cream2); }
.cal-day:active { transform: scale(.94); }
.cal-day--empty { cursor: default; }
.cal-day--empty:hover { background: none; }
.cal-day--today { background: var(--turmeric3); font-weight: 700; }
.cal-day--today:hover { background: var(--turmeric2); }
.cal-day--read { background: none; }
.cal-day--read:hover { background: var(--cream2); }
.cal-day--read.cal-day--today { background: var(--turmeric3); }
.cal-day--read.cal-day--today:hover { background: var(--turmeric2); }

.cal-day-num { font-size: 13px; color: var(--ink); line-height: 1; z-index: 1; position: relative; }
.cal-day--today .cal-day-num { color: #7a5800; }
.cal-day--read .cal-day-num { color: #1A936F; font-weight: 700; }
.cal-day--today.cal-day--read .cal-day-num { color: #1A936F; }

.cal-day-read-pip { display: none; }
.cal-day-event-pip { display: none; } /* replaced by .cal-borrow-pip in new layout */

/* Events list */
.cal-events-card { padding: 14px 16px; }
.cal-event-row {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 0; border-bottom: 1px solid var(--cream2);
  font-size: 13px;
}
.cal-event-row:last-child { border-bottom: none; }
.cal-event-date { font-size: 11px; font-weight: 600; color: var(--ink3); min-width: 38px; }
.cal-event-icon { flex-shrink: 0; }
.cal-event-text { flex: 1; color: var(--ink2); }
.cal-event-status {
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .05em; padding: 2px 8px; border-radius: 20px;
  background: var(--cream2); color: var(--ink3); white-space: nowrap;
}
.cal-event-status--pending  { background: #fef3c7; color: #92400e; }
.cal-event-status--accepted { background: #cceedf; color: #0d6e52; }
.cal-event-status--completed { background: #ede9fe; color: #5b21b6; }

@media (max-width: 500px) {
  .cal-page { padding: 12px 10px 60px; }
  .cal-day-num { font-size: 11px; }
}

/* ── Share menu dropdown ───────────────────────────────────────── */
.fd-share-menu {
  position: absolute; bottom: calc(100% + 6px); right: 0;
  background: #fff; border: 1px solid #ece8de; border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0,0,0,.12);
  display: flex; flex-direction: column; min-width: 160px;
  z-index: 100; overflow: hidden;
  animation: shareMenuIn .12s ease;
}
@keyframes shareMenuIn {
  from { opacity: 0; transform: translateY(6px) scale(.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.fd-share-item {
  display: flex; align-items: center; gap: 9px;
  padding: 10px 14px; font-size: 13px; font-weight: 600;
  text-decoration: none; color: #2D3142;
  border: none; background: none; cursor: pointer;
  font-family: inherit; text-align: left;
  transition: background .1s;
}
.fd-share-item:hover { background: #f7f4ed; }
.fd-share-item + .fd-share-item { border-top: 1px solid #f0ede6; }
.fd-share-item--wa  { color: #2D3142; }
.fd-share-item--li  { color: #2D3142; }
.fd-share-item--x   { color: #2D3142; }
.fd-share-item--copy { color: #2D3142; }

/* ── Calendar streak card ─────────────────────────────────────────────────── */
.cal-streak-card {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px; gap: 12px;
}
.cal-streak-left { display: flex; align-items: center; gap: 10px; }
.cal-streak-flame { font-size: 28px; line-height: 1; }
.cal-streak-num { font-size: 20px; font-weight: 800; color: var(--ink); margin: 0; line-height: 1.1; }
.cal-streak-label { font-size: 12px; color: var(--ink3); margin: 2px 0 0; }
.cal-log-today-btn {
  display: inline-flex; align-items: center; gap: 6px;
  background: #2D3142; color: #fff; border: none;
  padding: 9px 16px; border-radius: 20px; font-size: 13px;
  font-weight: 600; cursor: pointer; font-family: inherit;
  transition: background .15s; white-space: nowrap; flex-shrink: 0;
}
.cal-log-today-btn:hover { background: #333; }
.cal-log-today-btn--done { background: #1A936F; }
.cal-log-today-btn--done:hover { background: #1A936F; }

/* ── Calendar chat link ───────────────────────────────────────────────────── */
/* ── Reading-day log modal ── */
.rdlog-overlay {
  position: fixed; inset: 0; background: rgba(45,49,66,.45);
  display: flex; align-items: center; justify-content: center;
  z-index: 600; padding: 16px;
  animation: rdFadeIn .15s ease;
}
.rdlog-overlay[hidden] { display: none !important; }
@keyframes rdFadeIn { from { opacity: 0; } to { opacity: 1; } }
.rdlog-modal {
  background: #fff; border-radius: 18px;
  padding: 28px 26px; width: 100%; max-width: 420px;
  box-shadow: 0 12px 48px rgba(45,49,66,.18);
  position: relative;
  max-height: calc(100dvh - 40px); overflow-y: auto;
}
.rdlog-close {
  position: absolute; top: 14px; right: 16px;
  background: none; border: none; font-size: 20px; cursor: pointer;
  color: var(--ink3); line-height: 1; padding: 4px;
}
.rdlog-eyebrow {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .1em; color: var(--ink3); margin: 0 0 6px;
}
.rdlog-title {
  font-size: 18px; font-weight: 700; color: var(--ink); margin: 0 0 18px;
}
.rdlog-field { margin-bottom: 13px; }
.rdlog-field label {
  display: block; font-size: 12px; font-weight: 700; color: var(--ink3); margin-bottom: 5px;
}
.rdlog-field input, .rdlog-field textarea {
  width: 100%; padding: 10px 12px; border: 1px solid var(--cream3);
  border-radius: 9px; font-size: 14px; font-family: inherit;
  color: var(--ink); background: var(--cream2); outline: none;
  transition: border-color .15s, background .15s; box-sizing: border-box;
}
.rdlog-field input:focus, .rdlog-field textarea:focus {
  border-color: #111; background: #fff;
}
.rdlog-field textarea { resize: vertical; line-height: 1.5; max-height: 180px; }
.rdlog-row { display: flex; gap: 10px; }
.rdlog-row .rdlog-field { flex: 1; }
.rdlog-btn {
  width: 100%; background: #111; color: #fff; border: none;
  padding: 13px; border-radius: 10px; font-size: 15px; font-weight: 700;
  cursor: pointer; font-family: inherit; margin-top: 6px;
  transition: background .15s;
}
.rdlog-btn:hover { background: #333; }
.rdlog-btn:disabled { opacity: .55; cursor: not-allowed; }

/* View popup (past dates) */
.rdview-nav {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 16px;
}
.rdview-arrow {
  background: none; border: 1px solid var(--cream3); border-radius: 8px;
  width: 32px; height: 32px; display: flex; align-items: center;
  justify-content: center; cursor: pointer; color: var(--ink2);
  transition: background .13s;
}
.rdview-arrow:hover { background: var(--cream2); }
.rdview-arrow:disabled { opacity: .3; cursor: default; }
.rdview-date { font-size: 14px; font-weight: 700; color: var(--ink); }
.rdview-field { margin-bottom: 12px; }
.rdview-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--ink3); margin-bottom: 4px; }
.rdview-val { font-size: 15px; color: var(--ink2); }
.rdview-empty { font-size: 13px; color: var(--ink3); font-style: italic; }
.rdview-entry { border: 1px solid var(--cream2); border-radius: 10px; padding: 12px 14px; margin-bottom: 10px; background: var(--cream); }
.rdview-entry:last-child { margin-bottom: 0; }
.rdview-entry-num { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--ink3); margin-bottom: 6px; }
.rdview-entry-meta { font-size: 14px; color: var(--ink2); margin-bottom: 6px; }
.rdview-entry-notes { font-size: 14px; color: var(--ink); line-height: 1.55; margin: 0; white-space: pre-wrap; }

/* Confetti canvas */
#confettiCanvas {
  position: fixed; inset: 0; pointer-events: none; z-index: 700;
}

.cal-chat-link {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 12px; font-weight: 600; color: #2D3142;
  text-decoration: none; padding: 3px 8px; border-radius: 6px;
  border: 1px solid #e0ddd5; background: #f7f4ed;
  transition: background .13s; flex-shrink: 0;
}
.cal-chat-link:hover { background: #ece8de; }

/* ── Profile chat link ────────────────────────────────────────────────────── */
.pf-chat-link {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 12px; font-weight: 600; color: #2D3142;
  text-decoration: none; padding: 4px 10px; border-radius: 6px;
  border: 1px solid #e0ddd5; background: #f7f4ed;
  margin-top: 4px; transition: background .13s; white-space: nowrap;
}
.pf-chat-link:hover { background: #ece8de; }

/* ── Alignment fixes ──────────────────────────────────────────────────────── */
/* Profile cover: add top border-radius to match hero card */
.pf-cover-wrap {
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  border: 1px solid var(--cream3); border-bottom: none;
}
/* Profile page: add horizontal padding so wrap never touches screen edges */
.pf-page { padding: 16px 12px 100px; }
/* Profile wrap: remove side gap on desktop (padding is on pf-page now) */
@media (min-width: 861px) { .pf-page { padding: 24px 24px 100px; } }

/* Feed page: ensure top breathing room */
.fd-layout { padding-top: 24px; }
@media (max-width: 800px) { .fd-layout { padding: 16px 12px 60px; } }

/* Mobile: hide sidebar (profile card + post box) — show feed only */
@media (max-width: 768px) {
  .fd-sidebar { display: none !important; }
  .fd-feed { width: 100% !important; max-width: 100% !important; min-width: 0 !important; }
  .fd-layout { grid-template-columns: 1fr !important; gap: 0 !important; }
}

/* (top-nav, mob-nav, mob-search-bar rules moved to the ≤860px block above) */

/* Calendar page: ensure consistent side padding on small screens */
@media (max-width: 480px) {
  .cal-streak-card { flex-direction: column; align-items: flex-start; }
  .cal-log-today-btn { width: 100%; justify-content: center; }
}

/* ─── DESKTOP "FOR BUSINESS" DROPDOWN ───────────────────────────────────── */
.nav-biz-wrap {
  position: relative;
}
.nav-biz-btn {
  background: none;
  border: none;
  font-size: 14px;
  color: var(--ink2);
  font-weight: 400;
  padding: 0;
  cursor: pointer;
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  transition: color .15s;
}
.nav-biz-btn:hover { color: var(--ink); }
.nav-biz-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--cream);
  border: 1px solid var(--cream3);
  border-radius: var(--radius-md);
  box-shadow: 0 8px 32px rgba(45,49,66,.12);
  padding: 6px;
  min-width: 200px;
  z-index: 200;
}
.nav-biz-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  color: var(--ink2);
  text-decoration: none;
  transition: background .12s, color .12s;
  white-space: nowrap;
}
.nav-biz-item:hover { background: var(--cream2); color: var(--ink); }

/* Mobile hamburger menu sub-items */
.nav-mobile-biz-toggle { cursor: pointer; user-select: none; }
.nav-mobile-biz-section { padding-left: 12px; border-left: 2px solid var(--cream3); margin-left: 8px; }
.nav-mobile-link--sub {
  font-size: 14px !important;
  color: var(--ink3) !important;
  padding: 8px 4px !important;
}
.nav-mobile-link--sub:hover { color: var(--ink) !important; }

/* ─── MOBILE BOTTOM NAV ──────────────────────────────────────────────────── */

/* Hidden on desktop — only shown on phones */
.mob-nav { display: none; }

/* mob-nav item styles (used inside the ≤860px block, defined here globally so they apply) */
.mob-nav-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  text-decoration: none;
  color: var(--ink3);
  font-size: 10px;
  font-weight: 500;
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  padding: 8px 4px 10px;
  transition: color .15s;
  -webkit-tap-highlight-color: transparent;
}
.mob-nav-item:hover,
.mob-nav-item--active { color: var(--ink); }
.mob-nav-icon { font-size: 22px; transition: color .15s; }
.mob-nav-item--active .mob-nav-icon { color: var(--ink); }
.mob-nav-label { font-size: 10px; line-height: 1; }
.mob-nav-item--post { color: var(--ink); }
.mob-nav-item--post .mob-nav-icon { font-size: 26px; color: #2D3142; }
.mob-nav-avatar-wrap { width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center; overflow: hidden; }

/* ─── SLIDE-UP PANEL & OVERLAY ───────────────────────────────────────────── */

/* Dim overlay behind panel */
.mob-overlay {
  display: none;
  position: fixed;
  inset: 0;
  width: 100%;
  max-width: 100vw;
  background: rgba(45,49,66,.4);
  z-index: 310;
  opacity: 0;
  transition: opacity .25s;
}
.mob-overlay--show {
  display: block;
  opacity: 1;
}

/* Slide-up sheet */
.mob-me-panel {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  max-width: 100vw;
  background: var(--cream);
  border-radius: 18px 18px 0 0;
  box-shadow: 0 -4px 32px rgba(45,49,66,.14);
  z-index: 320;
  padding: 0 0 env(safe-area-inset-bottom, 8px);
  /* Belt + suspenders: invisible AND off-screen until opened */
  transform: translateY(100%);
  visibility: hidden;
  pointer-events: none;
  transition: transform .3s cubic-bezier(.32,.72,0,1), visibility 0s linear .3s;
  will-change: transform;
  max-height: 80vh;
  overflow-y: auto;
}
.mob-me-panel--open {
  transform: translateY(0);
  visibility: visible;
  pointer-events: auto;
  transition: transform .3s cubic-bezier(.32,.72,0,1), visibility 0s linear 0s;
}

/* Drag handle */
.mob-me-handle {
  width: 36px; height: 4px;
  background: var(--cream3);
  border-radius: 2px;
  margin: 10px auto 8px;
  flex-shrink: 0;
}

/* User header inside Me panel */
.mob-me-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 20px 14px;
  border-bottom: 0.5px solid var(--cream3);
  margin-bottom: 6px;
}
.mob-me-initial {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: #2D3142;
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; font-weight: 700;
  flex-shrink: 0;
}
.mob-me-name {
  font-size: 14px; font-weight: 700; color: var(--ink);
  margin: 0; line-height: 1.3;
}
.mob-me-email {
  font-size: 12px; color: var(--ink3);
  margin: 2px 0 0; line-height: 1.3;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Links inside Me panel */
.mob-me-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 20px;
  font-size: 15px;
  color: var(--ink2);
  text-decoration: none;
  transition: background .12s, color .12s;
}
.mob-me-link:hover { background: var(--cream2); color: var(--ink); }
.mob-me-link--danger { color: #F64740; }
.mob-me-link--danger:hover { background: #fff2f2; color: #991b1b; }

/* Divider inside panel */
.mob-me-divider {
  height: 0.5px;
  background: var(--cream3);
  margin: 4px 0;
}

/* Section label (Business panel) */
.mob-me-section-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--ink3);
  padding: 10px 20px 4px;
}

/* ─── CALENDAR: future day styling ──────────────────────────────────────── */
.cal-day--future {
  opacity: 0.35;
  cursor: default !important;
  pointer-events: none;
}

/* ─── SEARCH BAR ─────────────────────────────────────────────────────────── */

/* Shared search box (used in both desktop nav + mobile bar) */
.srch-box {
  position: relative;
  display: flex;
  align-items: center;
}
.srch-icon {
  position: absolute;
  left: 10px;
  font-size: 18px;
  color: var(--ink3);
  pointer-events: none;
  z-index: 1;
}
.srch-input {
  width: 100%;
  padding: 8px 36px 8px 34px;
  border: 1px solid var(--cream3);
  border-radius: 24px;
  font-size: 14px;
  font-family: inherit;
  background: var(--cream2);
  color: var(--ink);
  outline: none;
  transition: border-color .15s, background .15s;
  min-width: 0;
}
.srch-input:focus {
  border-color: #111;
  background: #fff;
}
.srch-clear {
  position: absolute;
  right: 8px;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--ink3);
  display: flex;
  align-items: center;
  padding: 2px;
  border-radius: 50%;
  transition: color .13s;
}
.srch-clear:hover { color: var(--ink); }

/* Dropdown */
.srch-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  background: #fff;
  border: 1px solid var(--cream3);
  border-radius: var(--radius-md);
  box-shadow: 0 8px 32px rgba(45,49,66,.13);
  z-index: 500;
  overflow: hidden;
  min-width: 300px;
}
.srch-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  text-decoration: none;
  color: var(--ink);
  transition: background .1s;
  border-bottom: 0.5px solid var(--cream2);
}
.srch-item:last-child { border-bottom: none; }
.srch-item:hover, .srch-item--active { background: var(--cream2); }
.srch-item-cover {
  width: 32px; height: 44px;
  object-fit: cover;
  border-radius: 3px;
  flex-shrink: 0;
}
.srch-item-icon {
  width: 32px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; color: var(--ink3); flex-shrink: 0;
}
.srch-item-text {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; gap: 2px;
}
.srch-item-title {
  font-size: 13px; font-weight: 600; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.srch-item-title mark {
  background: var(--turmeric3); color: var(--ink);
  border-radius: 2px; padding: 0 1px;
}
.srch-item-sub {
  font-size: 11px; color: var(--ink3);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.srch-item-type {
  font-size: 10px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .06em; color: var(--ink3); flex-shrink: 0;
}
.srch-no-result {
  padding: 14px 14px;
  font-size: 13px;
  color: var(--ink3);
  text-align: center;
}

/* Desktop search wrapper inside top-nav-left */
.top-nav-search-wrap {
  position: relative;
  flex: 1;
  max-width: 300px;
}
.top-nav-search-wrap .srch-input { font-size: 13px; padding: 7px 32px 7px 34px; }
.top-nav-search-wrap .srch-dropdown { min-width: 300px; }

/* Mobile search bar — hidden by default; shown via ≤860px block in responsive section */
.mob-search-bar { display: none; }