/* ── Draftory Studio SaaS — base styles ────────────────────────────────────── */
/* ── Landing / login page ─────────────────────────────────────────── */
.landing-wrap {
  width: 100%;
  max-width: none;
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  background: #f2ebdd;
}
.landing-left {
  background: none;
  padding: 28px 30px 30px;
  border-radius: 0;
  box-shadow: none;
  display: flex;
  justify-content: flex-start;
  width: 100%;
}
.landing-left-nav {
  position: sticky;
  top: 0;
  z-index: 30;
  width: 100%;
  margin: 0;
  background: rgba(255,255,255,0.97);
  border-bottom: 1px solid #e5e5e5;
}
.landing-nav-inner {
  width: min(100% - 48px, 960px);
  margin: 0 auto;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 14px 0;
}
.landing-left-nav-btn,
.landing-nav-signup-btn,
.landing-auth-open-btn {
  height: 32px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
  box-sizing: border-box;
}
.landing-left-nav-btn {
  flex: 0 0 auto;
  width: auto;
  min-width: auto;
  display: inline-flex; align-items: center;
  text-align: center; white-space: nowrap;
  background: none; border: none;
  padding: 6px 4px; font-size: 13px; color: #555;
  cursor: pointer; font-family: var(--font-ui);
  transition: color .15s;
}
.landing-left-nav-btn:hover { color: #1a1a1a; }
.landing-left-nav-btn.active { color: #1a1a1a; font-weight: 600; }
.landing-nav-home {
  flex: 0 0 auto;
  width: auto;
  min-width: auto;
  margin-right: auto;
  border: none;
  background: none;
  color: #1a1a1a;
  padding: 4px 2px;
  font-size: 44px;
  font-weight: 700;
  letter-spacing: -0.01em;
  cursor: pointer;
  font-family: 'Lora', Georgia, serif;
  transition: opacity .15s;
  display: flex;
  align-items: center;
  text-decoration: none;
}
.landing-left-nav .landing-nav-home { font-size: 26px; }
.landing-nav-logo {
  height: 28px;
  width: auto;
  display: block;
}
.landing-nav-home:hover { opacity: .75; }
.landing-auth-open-btn {
  flex: 0 0 auto;
  width: auto;
  min-width: auto;
  display: inline-flex; align-items: center;
  white-space: nowrap;
  background: none; border: none; border-radius: 0; padding: 6px 4px;
  font-size: 13px; font-weight: 400; color: #555; text-align: center;
  cursor: pointer; font-family: var(--font-ui);
  transition: color .15s;
}
.landing-auth-open-btn:hover { color: #1a1a1a; opacity: 1; }

/* Auth side panel */
.landing-auth-overlay {
  display: none; position: fixed; inset: 0; background: rgba(0,0,0,.35); z-index: 200;
}
.landing-auth-overlay.open { display: block; }
.landing-auth-panel {
  position: fixed; top: 0; right: -440px; width: 400px; height: 100vh;
  background: var(--bg); box-shadow: -4px 0 24px rgba(0,0,0,.15);
  z-index: 201; transition: right .25s ease;
  display: flex; flex-direction: column;
  overflow-y: auto;
}
.landing-auth-panel.open { right: 0; }
.landing-auth-close {
  position: absolute; top: 12px; right: 16px;
  background: none; border: none; font-size: 22px; color: var(--text-muted);
  cursor: pointer; line-height: 1; padding: 4px;
}
.landing-auth-close:hover { color: var(--text); }
.landing-auth-panel-inner {
  flex: 1; display: flex; align-items: flex-start; justify-content: center;
  padding: 48px 28px 28px;
}
.landing-auth-panel-inner .auth-form { width: 100%; max-width: 320px; }
.landing-hero-row {
  width: min(100% - 16px, 960px);
  margin: 16px auto 0;
}
.landing-left-section {
  width: min(100% - 16px, 960px);
  background: none;
  padding: 64px 40px;
  border: none;
  border-radius: 0;
  margin: 0 auto;
  box-shadow: none;
}
.landing-how-panel {
  margin-top: 14px;
  height: 100%;
}
.landing-info-title {
  font-size: clamp(22px, 2.4vw, 34px); font-weight: 700; color: #1a1a1a;
  font-family: 'Lora', Georgia, serif;
  max-width: 620px; margin-left: auto; margin-right: auto;
  margin-bottom: 32px; letter-spacing: -.02em; text-align: center;
  padding-bottom: 20px; border-bottom: 1px solid #e0dbd4;
}
.landing-left-inner {
  max-width: none;
  width: 100%;
  margin: 0;
  position: relative;
  z-index: 2;
  text-align: center;
}
.landing-title {
  font-size: clamp(40px, 4.4vw, 52px); font-weight: 700; color: var(--accent);
  margin: 0 0 10px 0; letter-spacing: -.02em;
  display: flex; align-items: center; justify-content: flex-start; gap: 0; flex-wrap: nowrap;
}
.landing-title-mark { display: inline-flex; flex-shrink: 0; line-height: 0; margin: 0 0 0 -10px; }
.landing-title-mark svg { display: block; transform: translateY(2px); width: 68px; height: 68px; }
.landing-title-text { display: inline-block; white-space: nowrap; }
.landing-hero-logo { height: auto; width: clamp(200px, 20vw, 300px); display: block; margin: 0 0 20px 0; }
.landing-tagline-sub {
  font-size: clamp(16px, 1.6vw, 20px); color: var(--accent);
  font-family: 'Lora', Georgia, serif;
  font-weight: 700; letter-spacing: -0.01em; margin: 12px 0 0;
}
.landing-tagline {
  font-size: clamp(38px, 5vw, 64px); color: #1a1a1a;
  font-family: 'Lora', Georgia, serif;
  font-weight: 700; letter-spacing: -0.02em; line-height: 1.12;
  margin: 8px 0 22px;
}
.landing-intro-grid {
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  gap: 24px;
  width: 100%;
  text-align: center;
}
.landing-intro-copy {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.landing-desc {
  font-size: clamp(15px, 1.45vw, 17px); line-height: 1.8; font-weight: 400; color: #555;
  max-width: 52ch;
  margin: 0;
}
.landing-features { list-style: none; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 12px; margin: 0; margin-top: clamp(56px, 5.4vw, 72px); padding-left: 0; }
.landing-features li { display: flex; gap: 10px; align-items: flex-start; justify-content: flex-start; max-width: 520px; font-size: clamp(15px, 1.35vw, 17px); line-height: 1.6; font-weight: 600; color: color-mix(in srgb, var(--accent) 25%, #888); }
.landing-right { display: none; }

.landing-page-footer {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 32px 0 0;
  padding: 14px 16px;
  background: none;
  border-top: 1px solid #ddd8d0;
  color: color-mix(in srgb, var(--accent) 50%, #666);
  font-size: 12px;
}

.landing-footer-link {
  background: none;
  border: none;
  padding: 0;
  color: color-mix(in srgb, var(--accent) 60%, #666);
  font-size: 12px;
  cursor: pointer;
  text-decoration: none;
}

.landing-footer-link:hover {
  color: var(--accent);
  text-decoration: underline;
}

.landing-footer-sep {
  opacity: 0.6;
}
.landing-footer-copy { font-size: 12px; color: #999; }

@media (max-width: 1100px) {
  .landing-left-inner { max-width: 100%; }
  .landing-intro-grid { grid-template-columns: 1fr; gap: 20px; }
  .landing-features { margin-top: 0; }
}


@media (max-width: 760px) {
  .landing-nav-inner {
    justify-content: space-between;
    gap: 8px;
    padding: 10px 0;
    flex-wrap: nowrap;
    width: min(100% - 24px, 960px);
  }
  .landing-left-nav-btn { display: none; }
  .landing-nav-home {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    padding: 6px 0;
    text-align: left;
  }
  .landing-left-nav .landing-nav-home { font-size: 18px; }
  .landing-nav-signup-btn {
    flex: 0 0 auto;
    width: auto;
    min-width: 0;
    padding: 6px 4px;
  }
  .landing-auth-open-btn {
    flex: 0 0 auto;
    width: auto;
    min-width: 0;
    padding: 6px 4px;
  }
  .landing-left,
  .landing-left-section { padding: 18px 16px; }
  .landing-auth-panel { width: 100%; right: -100%; }
  .landing-beta-strip { flex-wrap: wrap; text-align: center; gap: 8px; }
}

@media (max-width: 480px) {
  .landing-hero-cta { flex-direction: column; align-items: stretch; gap: 10px; }
  .landing-hero-btn,
  .landing-demo-link--btn { justify-content: center; text-align: center; }
  .landing-hero-reassurance { font-size: 11px; }
}

/* ── Landing info content ───────────────────────────────────────────── */
.landing-section-sub { font-size: 15px; color: #666; margin-bottom: 32px; text-align: center; line-height: 1.7; }

.landing-sticky-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px 32px;
  max-width: 700px;
  margin: 0 auto;
  align-items: start;
}
.landing-sticky-note {
  background: #fffbee;
  border-radius: 4px;
  padding: 28px 24px 24px;
  box-shadow: 0 4px 18px rgba(0,0,0,0.10), 0 1px 4px rgba(0,0,0,0.06);
  position: relative;
  transition: transform .2s ease, box-shadow .2s ease;
}
.landing-sticky-note::before {
  content: '';
  display: block;
  height: 10px;
  background: rgba(0,0,0,0.06);
  position: absolute;
  top: 0; left: 0; right: 0;
  border-radius: 4px 4px 0 0;
}
.landing-sticky-note:nth-child(1) { transform: rotate(-2.2deg) translateY(4px); }
.landing-sticky-note:nth-child(2) { transform: rotate(1.8deg) translateY(-6px); }
.landing-sticky-note:nth-child(3) { transform: rotate(0.8deg) translateY(8px); }
.landing-sticky-note:nth-child(4) { transform: rotate(-1.6deg) translateY(-3px); }
.landing-sticky-note:hover { transform: rotate(0deg) translateY(0) scale(1.02); box-shadow: 0 8px 28px rgba(0,0,0,0.14); }
.landing-sticky-num { display: none; }
.landing-sticky-note h3 { font-size: 16px; font-weight: 700; color: #1a1a1a; margin-bottom: 10px; line-height: 1.3; font-family: 'Courier Prime', 'Courier New', Courier, monospace; }
.landing-sticky-note p { font-size: 13px; color: #555; line-height: 1.7; margin: 0; font-family: 'Courier Prime', 'Courier New', Courier, monospace; }
@media (max-width: 600px) {
  .landing-sticky-grid { grid-template-columns: 1fr; }
  .landing-sticky-note:nth-child(n) { transform: none; }
}

.landing-plan-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 920px) { .landing-plan-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) { .landing-plan-cards { grid-template-columns: 1fr; } }
.landing-plan-card {
  background: #fffdfa; border: 1px solid #ece6dc; border-radius: 14px;
  padding: 22px 18px 18px; display: grid; grid-template-rows: subgrid; grid-row: span 8;
  position: relative;
  box-shadow: 0 6px 20px rgba(60,50,38,0.06);
}
/* All tiers share one warm card surface; only the recommended card carries an
   accent border (see the highlight rule below). No per-tier tints or borders. */
.landing-plan-card--popular { border-color: var(--accent); }
.landing-plan-badge {
  display: inline-block; font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; padding: 2px 7px; border-radius: 10px;
  background: color-mix(in srgb, var(--premium) 26%, #fff); color: var(--premium); width: fit-content; margin-bottom: 2px;
}
.landing-plan-badge--free    { background: #e9ebed; color: var(--tier-muse); }
.landing-plan-badge--popular { background: color-mix(in srgb, var(--accent) 24%, #fff); color: var(--accent); }
.landing-plan-badge--plus    { background: color-mix(in srgb, var(--plus) 30%, #fff); color: var(--plus); }
.landing-plan-period { font-size: 13px; font-weight: 400; color: #888; }
.landing-plan-upgrade-hint {
  padding-top: 10px; font-size: 11px; color: #888; line-height: 1.5; border-top: 1px solid #eee;
}
.landing-plan-name  { font-size: 20px; font-weight: 700; color: #1a1a1a; font-family: 'Lora', Georgia, serif; letter-spacing: -0.01em; }
.landing-plan-persona { font-size: 13px; color: #666; font-style: italic; font-family: 'Lora', Georgia, serif; margin: 0 0 10px; line-height: 1.5; }
.landing-plan-price { font-size: 20px; font-weight: 700; color: var(--accent); margin: 2px 0 2px; }
.landing-plan-card--free    .landing-plan-price { color: var(--tier-muse); }
.landing-plan-card--premium .landing-plan-price { color: var(--premium); }
.landing-plan-card--plus    .landing-plan-price { color: var(--plus); }
.landing-plan-price-alt { font-size: 12px; color: #888; margin-bottom: 8px; }
.landing-plan-saving { background: color-mix(in srgb, var(--accent) 12%, #fff); color: var(--accent); font-size: 10px; font-weight: 700; padding: 1px 5px; border-radius: 8px; margin-left: 4px; letter-spacing: .03em; text-transform: uppercase; }
.landing-plan-saving--basic { background: color-mix(in srgb, var(--accent) 18%, #fff); color: var(--accent); }
.landing-plan-saving--premium { background: color-mix(in srgb, var(--premium) 16%, #fff); color: var(--premium); }
.landing-plan-saving--plus { background: color-mix(in srgb, var(--plus) 16%, #fff); color: var(--plus); }
.landing-plan-desc  { font-size: 12px; color: #666; margin-bottom: 10px; line-height: 1.5; }
.landing-plan-features { list-style: none; display: flex; flex-direction: column; gap: 7px; }
.landing-plan-features li { font-size: 12px; color: #1a1a1a; display: flex; align-items: baseline; gap: 7px; }
.landing-plan-features li::before { content: '✓'; color: var(--accent); font-weight: 700; flex-shrink: 0; }
/* Each tier tints its own checkmarks to match its accent colour. */
.landing-plan-card--free    .landing-plan-features li::before { color: var(--tier-muse); }
.landing-plan-card--premium .landing-plan-features li::before { color: var(--premium); }
.landing-plan-card--plus    .landing-plan-features li::before { color: var(--plus); }
/* "Everything in [plan]" is a roll-up reference, not a feature: no tick, shown
   as a subtle lead-in. The added features below it keep their checkmark. */
.landing-plan-features li.lf-rollup::before { content: ''; }
.landing-plan-features li.lf-rollup { color: var(--text-muted); font-weight: 600; }
.lf-sub { display: block; font-size: 11px; color: #888; margin-top: 3px; font-weight: 400; line-height: 1.5; }
.lf-coach-item { flex-direction: column !important; align-items: flex-start !important; gap: 4px !important; }
.lf-coach-header { display: flex; align-items: baseline; gap: 7px; }
.lf-coach-tools { list-style: none; padding: 2px 0 0 16px; margin: 0; display: flex; flex-direction: column; gap: 3px; }
.lf-coach-tools li { font-size: 11px; color: #888; line-height: 1.4; }
.lf-coach-tools li::before { content: '·'; color: var(--plus); font-weight: 700; margin-right: 5px; }

.landing-faq-list { display: flex; flex-direction: column; }
.landing-faq-item { border-bottom: 1px solid #eee; }
.landing-faq-item:first-child { border-top: 1px solid #eee; }
.landing-faq-item summary {
  font-size: 13px; font-weight: 600; color: #1a1a1a;
  padding: 12px 0; cursor: pointer; list-style: none;
  display: flex; align-items: center; justify-content: space-between;
}
.landing-faq-item summary::-webkit-details-marker { display: none; }
.landing-faq-item summary::after { content: '+'; font-size: 16px; font-weight: 300; color: #999; flex-shrink: 0; }
.landing-faq-item[open] summary { color: var(--accent); }
.landing-faq-item[open] summary::after { content: '−'; color: var(--accent); }
.landing-faq-item p { font-size: 13px; color: #666; line-height: 1.65; padding-bottom: 12px; }
.landing-faq-toggle-row { text-align: center; margin-top: 22px; }
.landing-faq-toggle {
  background: none; border: none; padding: 6px 2px;
  font-size: 13px; font-weight: 600; color: var(--accent);
  cursor: pointer; transition: opacity .15s;
}
.landing-faq-toggle:hover { opacity: .7; }

/* Founder's note */
.landing-founder-section { padding-top: 40px; padding-bottom: 40px; }
.landing-founder-note {
  max-width: 640px; margin: 0 auto; text-align: center;
  padding: 36px 40px;
  background: var(--warm-soft);
  border-radius: 16px;
  position: relative;
}
.landing-founder-note blockquote {
  font-family: 'Lora', Georgia, serif;
  font-size: clamp(17px, 1.9vw, 21px); line-height: 1.6;
  color: #4a3f33; font-style: italic; margin: 0;
}
.landing-founder-note figcaption {
  margin-top: 18px; font-size: 13px; font-weight: 600;
  letter-spacing: .04em; text-transform: uppercase; color: var(--warm);
}
@media (max-width: 600px) {
  .landing-founder-note { padding: 28px 22px; }
}

.landing-testimonial-section { padding-top: 40px; padding-bottom: 40px; }
.landing-testimonial {
  max-width: 680px; margin: 0 auto; text-align: center;
  padding: 42px 44px 34px;
  background: var(--bg-card, #fff);
  border: 1px solid #e0dbd4;
  border-radius: 16px;
  position: relative;
}
.landing-testimonial::before {
  content: '\201C';
  font-family: 'Lora', Georgia, serif;
  font-size: 76px; line-height: 1; color: var(--accent); opacity: .26;
  position: absolute; top: 16px; left: 26px;
}
.landing-testimonial blockquote {
  font-family: 'Lora', Georgia, serif;
  font-size: clamp(18px, 2vw, 23px); line-height: 1.55;
  color: #3a3228; margin: 0; position: relative;
}
.landing-testimonial blockquote strong { color: var(--accent); font-weight: 700; }
.landing-testimonial-kicker {
  margin: 20px auto 0; max-width: 560px;
  font-size: 15px; line-height: 1.7; color: #6a5f52; font-style: italic;
}
.landing-testimonial-by {
  margin-top: 24px; display: flex; flex-direction: column; gap: 3px; align-items: center;
}
.landing-testimonial-name { font-size: 15px; font-weight: 700; color: #1a1a1a; }
.landing-testimonial-role { font-size: 13px; color: #857a6c; }
.landing-testimonial-link {
  margin-top: 8px; font-size: 13px; font-weight: 600; color: var(--accent); text-decoration: none;
}
.landing-testimonial-link:hover { text-decoration: underline; }
@media (max-width: 600px) {
  .landing-testimonial { padding: 30px 22px 26px; }
  .landing-testimonial::before { font-size: 54px; top: 8px; left: 16px; }
}

.landing-hero-ai-note { font-size: 15px; color: #6a5f52; line-height: 1.6; margin: 10px 0 0; }
.landing-hero-ai-note strong { color: var(--accent); font-weight: 700; }

.landing-ai-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; max-width: 780px; margin: 0 auto; }
.landing-ai-col {
  background: var(--bg-card, #fff); border: 1px solid #e0dbd4; border-radius: 14px;
  padding: 24px 26px; text-align: left;
}
.landing-ai-col-head { font-family: 'Lora', Georgia, serif; font-size: 17px; font-weight: 700; margin-bottom: 12px; }
.landing-ai-col--yes .landing-ai-col-head { color: var(--accent); }
.landing-ai-col--no .landing-ai-col-head { color: #9a8f80; }
.landing-ai-col ul { margin: 0; padding: 0; list-style: none; }
.landing-ai-col li { font-size: 14px; line-height: 1.5; color: #4a4038; padding: 7px 0 7px 26px; position: relative; }
.landing-ai-col--yes li::before { content: '\2713'; position: absolute; left: 0; color: var(--accent); font-weight: 700; }
.landing-ai-col--no li::before { content: '\2715'; position: absolute; left: 0; color: #c0b6a8; font-weight: 700; }
@media (max-width: 640px) { .landing-ai-cols { grid-template-columns: 1fr; } }

.landing-details-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 24px 44px; max-width: 620px; margin: 8px auto 0; text-align: left; }
.landing-detail h4 { font-size: 16px; font-weight: 700; color: #1a1a1a; margin: 0 0 4px; }
.landing-detail p { font-size: 14px; color: #666; line-height: 1.55; margin: 0; }

.landing-cta-band { text-align: center; padding: 36px 20px; }
.landing-cta-band-text {
  font-family: 'Lora', Georgia, serif; font-size: clamp(20px, 2.4vw, 28px);
  font-weight: 700; color: #1a1a1a; margin: 0 0 18px;
}
.landing-cta-band-note { font-size: 13px; color: #857a6c; margin: 14px 0 0; }

/* ── Landing page enhancements ──────────────────────────────────────── */

/* Hero CTA */
.landing-hero-cta { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 30px; flex-wrap: wrap; }
.landing-hero-btn {
  display: inline-flex; align-items: center;
  background: none; border: none; padding: 0;
  color: var(--accent); font-size: 15px; font-weight: 700;
  cursor: pointer; transition: opacity 0.15s; white-space: nowrap;
}
.landing-hero-btn:hover { opacity: .75; }
.landing-hero-btn--primary {
  padding: 13px 30px; border-radius: 999px;
  background: var(--accent); color: #fff; font-size: 16px;
  box-shadow: 0 6px 18px rgba(92,122,90,0.28);
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.landing-hero-btn--primary:hover {
  opacity: 1; transform: translateY(-1px);
  background: var(--accent-hover);
  box-shadow: 0 8px 22px rgba(92,122,90,0.34);
}
.landing-hero-btn--secondary {
  padding: 13px 28px; border-radius: 999px;
  background: #fff; color: var(--accent); font-size: 16px;
  border: 1.5px solid color-mix(in srgb, var(--accent) 40%, #d8cfc0);
  text-decoration: none;
  transition: transform .15s ease, border-color .15s ease, background .15s ease;
}
.landing-hero-btn--secondary:hover {
  opacity: 1; transform: translateY(-1px);
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 6%, #fff);
}
.landing-hero-demo-note { font-size: 14px; color: #8a8378; }
.landing-hero-demo {
  display: inline-block; margin-top: 16px;
  font-size: 14px; color: #8a8378; text-decoration: none;
  border-bottom: 1px solid transparent; transition: color .15s, border-color .15s;
}
.landing-hero-demo:hover { color: var(--accent); border-bottom-color: color-mix(in srgb, var(--accent) 45%, transparent); }
.landing-hero-secondary { margin-top: 16px; display: flex; gap: 12px; align-items: center; justify-content: center; flex-wrap: wrap; }
.landing-hero-secondary .landing-hero-demo { margin-top: 0; }
.landing-hero-secondary-dot { color: #c7bfae; }
.landing-demo-link { font-size: 14px; color: var(--accent); text-decoration: none; font-weight: 500; }
.landing-demo-link:hover { text-decoration: underline; }
.landing-demo-link--btn {
  display: inline-flex; align-items: center;
  background: none; border: none; padding: 0;
  color: var(--accent); font-size: 15px; font-weight: 600; text-decoration: none; white-space: nowrap;
  transition: opacity 0.15s;
}
.landing-demo-link--btn:hover { opacity: .7; text-decoration: none; }
.landing-hero-reassurance {
  font-size: 12px; color: #999; margin-top: 14px; letter-spacing: 0.01em;
}
.landing-hero-social-proof {
  font-size: 12px; color: #888; margin-top: 8px; letter-spacing: 0.01em;
}
.landing-hero-screenshot {
  padding: 0 8px;
  max-width: min(100% - 16px, 960px);
  margin: 12px auto 40px;
}
.landing-hero-screenshot img {
  width: 100%;
  display: block;
  border-radius: 12px;
  border: 1px solid #e0d8d0;
  box-shadow: 0 4px 24px rgba(0,0,0,0.09);
}

/* Nav sign-up button */
.landing-nav-signup-btn {
  flex: 0 0 auto; width: auto; min-width: auto; padding: 6px 4px;
  display: inline-flex; align-items: center;
  background: none; color: var(--accent); border: none; border-radius: 0;
  font-family: var(--font-ui); font-size: 13px; font-weight: 700; cursor: pointer; transition: opacity 0.15s;
}
.landing-nav-signup-btn:hover { opacity: .75; }

/* Referral banner */
.landing-referral-banner {
  width: 100%; margin: 0;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 11px 24px;
  background: #3d5c3a; color: #e8f0e7;
  font-size: 13px; font-weight: 500; line-height: 1.4; text-align: center;
}

/* Founding member callout */
.landing-founding-callout {
  width: 100%; padding: 10px 24px;
  background: #fdf6e3; border-top: 1px solid #e8d5a0; border-bottom: 1px solid #e8d5a0;
  text-align: center; font-size: 12px; font-weight: 500; color: #7a5c00; letter-spacing: 0.02em;
}
.landing-founding-badge {
  display: inline-block; background: #c9a227; color: #fff;
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  padding: 2px 8px; border-radius: 99px; margin-right: 6px; vertical-align: middle;
}
.landing-founding-cta {
  display: inline-block; margin-left: 10px; vertical-align: middle;
  background: #c9a227; color: #fff; border: none; cursor: pointer;
  padding: 4px 12px; border-radius: 99px; font-size: 12px; font-weight: 700;
  transition: background 0.15s;
}
.landing-founding-cta:hover { background: #a07a14; }

/* Beta strip */
.landing-beta-strip {
  width: 100%; margin: 0;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 9px 24px;
  background: var(--accent);
  border-radius: 0;
  font-size: 12px; font-weight: 500; letter-spacing: 0.03em; color: #fff;
}
.landing-beta-badge {
  display: inline-block; background: var(--accent); color: #fff;
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  padding: 2px 8px; border-radius: 99px; flex-shrink: 0;
}

/* Demo "See it in action" section */
.landing-demo-section { text-align: center; padding-top: 28px; padding-bottom: 28px; }
.landing-demo-section .landing-section-sub { margin-bottom: 16px; }
.landing-demo-cta-btn {
  display: inline-flex; align-items: center;
  padding: 10px 22px;
  background: color-mix(in srgb, var(--accent) 10%, #fff);
  color: var(--accent);
  border: 1.5px solid var(--accent); border-radius: 999px;
  font-size: 14px; font-weight: 600; text-decoration: none;
  transition: background 0.15s;
}
.landing-demo-cta-btn:hover { background: color-mix(in srgb, var(--accent) 18%, #fff); }

/* Plan card CTAs */
.landing-plan-cta {
  display: block; width: 100%; align-self: end; margin-top: 8px;
  padding: 9px; border: 1.5px solid #c8bfb0; border-radius: 7px;
  font-size: 12px; font-weight: 600; color: #6b5f50;
  background: #f5f0ea; cursor: pointer; text-align: center;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.landing-plan-cta:hover { background: #ece5dc; border-color: #b0a090; }
/* Brief highlight when the founding-member CTA jumps to the Muse card */
.landing-plan-card--flash { animation: landing-plan-flash 1.8s ease-out; }
@keyframes landing-plan-flash {
  0%, 30%, 60%, 100% { outline: 3px solid transparent; outline-offset: 4px; }
  15%, 45%           { outline: 3px solid var(--accent); outline-offset: 4px; }
}
.landing-plan-card--popular .landing-plan-cta,
.landing-plan-card--popular .landing-plan-cta.landing-plan-cta--filled { background: var(--accent); border-color: var(--accent); color: #fff; }
.landing-plan-card--popular .landing-plan-cta:hover { background: color-mix(in srgb, var(--accent) 80%, #000); border-color: color-mix(in srgb, var(--accent) 80%, #000); }
/* Recommended (Muse+): a 1.5px accent border and a soft neutral lift, no glow,
   no scale, no thicker top edge. Understated, editorial. */
.landing-plan-card--popular {
  border-width: 1.5px;
  box-shadow: 0 14px 34px rgba(60, 50, 38, 0.14);
  z-index: 1;
}
/* Bard & Oracle: outline button tinted to the tier colour, fills on hover.
   Muse+ stays filled; Muse (free) keeps the neutral beige outline. */
.landing-plan-card--premium .landing-plan-cta {
  color: var(--premium);
  border-color: color-mix(in srgb, var(--premium) 45%, #d8cfc0);
  background: color-mix(in srgb, var(--premium) 5%, #fbf7f2);
}
.landing-plan-card--premium .landing-plan-cta:hover {
  background: var(--premium); border-color: var(--premium); color: #fff;
}
.landing-plan-card--plus .landing-plan-cta {
  color: var(--plus);
  border-color: color-mix(in srgb, var(--plus) 45%, #d8cfc0);
  background: color-mix(in srgb, var(--plus) 5%, #fbf7f2);
}
.landing-plan-card--plus .landing-plan-cta:hover {
  background: var(--plus); border-color: var(--plus); color: #fff;
}
.landing-plan-no-card { font-size: 11px; color: var(--accent); font-weight: 600; text-align: center; position: absolute; bottom: 10px; left: 0; right: 0; }
.landing-plan-compare-note { font-size: 11px; color: var(--text-muted); margin: 4px 0 0; }

/* Feature comparison table */
.landing-compare-wrap { margin-top: 32px; }
.landing-compare-title { font-size: 15px; font-weight: 700; color: #1a1a1a; margin-bottom: 4px; }
.landing-compare-note { font-size: 12px; color: #888; margin-bottom: 12px; }
.landing-compare-toggle { background: none; border: none; padding: 0; font-size: 13px; font-weight: 600; color: var(--text-muted, #666); cursor: pointer; margin-bottom: 12px; transition: color .15s; }
.landing-compare-toggle:hover { color: var(--accent, #5c7a5a); }
.landing-compare-wrap { max-width: 860px; margin: 20px auto 0; }
.landing-compare-table-wrap { overflow-x: auto; border-radius: 10px; border: 1px solid #e0e0e0; }
.landing-compare-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.landing-compare-table th {
  padding: 10px 12px; text-align: left; font-weight: 700; color: #1a1a1a;
  background: #f5f5f5; border-bottom: 2px solid #e0e0e0; white-space: nowrap;
}
.landing-compare-table th:not(:first-child) { text-align: center; width: 16%; }
.landing-compare-table th.ct-col-popular { background: color-mix(in srgb, var(--accent) 10%, #f5f5f5); color: var(--accent); }
.landing-compare-table th:nth-child(4) { background: color-mix(in srgb, var(--premium) 8%, #f5f5f5); color: var(--premium); }
.landing-compare-table th:nth-child(5) { background: color-mix(in srgb, var(--plus) 8%, #f5f5f5); color: var(--plus); }
.landing-compare-table td { padding: 8px 12px; border-bottom: 1px solid #f0f0f0; border-right: 1px solid #f0f0f0; color: #333; vertical-align: middle; }
.landing-compare-table td:last-child { border-right: none; }
.landing-compare-table th { border-right: 1px solid #e0e0e0; }
.landing-compare-table th:last-child { border-right: none; }
.landing-compare-table td:not(:first-child) { text-align: center; }
/* Column tints: Muse+ (col 3, sage via class), Bard (col 4, terracotta),
   Oracle (col 5, gold). Muse (col 2) stays neutral. */
.landing-compare-table td.ct-col-popular { background: color-mix(in srgb, var(--accent) 4%, #fff); }
.landing-compare-table tbody tr td:nth-child(4) { background: color-mix(in srgb, var(--premium) 4%, #fff); }
.landing-compare-table tbody tr td:nth-child(5) { background: color-mix(in srgb, var(--plus) 4%, #fff); }
.landing-compare-table tr:last-child td { border-bottom: none; }
.landing-compare-table .ct-check { color: var(--accent); font-weight: 700; font-size: 13px; }
.landing-compare-table td:nth-child(2) .ct-check,
.landing-compare-table td:nth-child(2).ct-check { color: var(--tier-muse); }
.landing-compare-table td:nth-child(4) .ct-check,
.landing-compare-table td:nth-child(4).ct-check { color: var(--premium); }
.landing-compare-table td:nth-child(5) .ct-check,
.landing-compare-table td:nth-child(5).ct-check { color: var(--plus); }
.landing-compare-table .ct-no { color: #ccc; }
.landing-compare-table .ct-note { font-size: 11px; color: #666; }
.landing-compare-table .ct-section td { background: #fafafa !important; font-weight: 700; font-size: 10px; color: var(--accent); text-transform: uppercase; letter-spacing: .05em; padding: 6px 12px; }
.landing-compare-table .ct-section td.ct-col-popular { background: color-mix(in srgb, var(--accent) 6%, #fafafa) !important; }

/* Feature grid (legacy) */
.landing-features-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 24px; }
.landing-feature-card { text-align: left; background: #fafafa; border: 1px solid #e8e8e8; border-radius: 12px; padding: 22px 20px; }
.landing-feature-icon { font-size: 22px; display: block; margin-bottom: 14px; color: #1a1a1a; line-height: 1; }
.landing-feature-card h3 { font-size: 15px; font-weight: 700; color: var(--accent); margin-bottom: 6px; }
.landing-feature-card p { font-size: 13px; color: #666; line-height: 1.65; margin: 0; }
@media (max-width: 760px) { .landing-features-grid { grid-template-columns: 1fr; gap: 12px; } }

/* Feature rows with screenshots */
.landing-feature-row { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: flex-start; margin-top: 56px; }
.landing-feature-row--flip { direction: rtl; }
.landing-feature-row--flip > * { direction: ltr; }
.landing-feature-copy { display: flex; flex-direction: column; gap: 12px; }
.landing-feature-copy h3 { font-size: 22px; font-weight: 700; color: #1a1a1a; line-height: 1.2; margin: 0; }
.landing-feature-copy p { font-size: 14px; color: #555; line-height: 1.75; margin: 0; }
.landing-feature-tier { display: inline-block; font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; padding: 3px 10px; border-radius: 999px; align-self: flex-start; background: transparent; }
.landing-feature-tier--free    { color: #888; border: 1px solid #bbb; }
.landing-feature-tier--basic   { color: var(--accent); border: 1px solid var(--accent); }
.landing-feature-tier--premium { color: var(--premium); border: 1px solid var(--premium); }
.landing-feature-tier--plus    { color: var(--plus); border: 1px solid var(--plus); }
.landing-feature-img img { width: 100%; border-radius: 10px; border: 1px solid #e0d8d0; box-shadow: 0 4px 20px rgba(0,0,0,.08); display: block; }
.landing-feature-copy .landing-feature-sub { font-size: 14px; color: #999; font-style: italic; margin: 0; }
.landing-how-midraft { text-align: center; font-size: 14px; color: #888; margin-top: 52px; line-height: 1.6; }

/* Share feature preview illustration */
.landing-feature-img--placeholder { display: flex; align-items: flex-start; }
.landing-share-preview {
  width: 100%; border-radius: 10px; border: 1px solid #e0d8d0;
  box-shadow: 0 4px 20px rgba(0,0,0,.08);
  background: #fafaf8; overflow: hidden; font-family: system-ui, sans-serif;
}
.landing-share-preview-bar {
  background: #f0ede8; border-bottom: 1px solid #e0d8d0;
  padding: 10px 14px; display: flex; gap: 6px; align-items: center;
}
.landing-share-preview-dot {
  width: 10px; height: 10px; border-radius: 50%; background: #d6d0c8; display: inline-block;
}
.landing-share-preview-title {
  padding: 22px 24px 10px;
  font-family: 'Lora', Georgia, serif; font-size: 16px; font-weight: 700;
  color: #1a1a18; border-bottom: 1px solid #e5e4e0;
}
.landing-share-preview-lines {
  padding: 18px 24px; display: flex; flex-direction: column; gap: 8px;
}
.landing-share-preview-lines span {
  display: block; height: 10px; border-radius: 4px;
  background: #e5e4e0; width: 100%;
}
.landing-share-preview-note {
  margin: 0 16px 16px; background: #f0ede8; border-radius: 8px;
  padding: 12px 14px; font-size: 13px; color: #374151; line-height: 1.5;
}
@media (max-width: 700px) {
  .landing-feature-row { grid-template-columns: 1fr; gap: 24px; }
  .landing-feature-row--flip { direction: ltr; }
}

/* Visual feature cards */
.landing-visuals-section { padding-top: 28px; padding-bottom: 28px; }
.landing-visual-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 20px; }
@media (max-width: 760px) { .landing-visual-cards { grid-template-columns: 1fr; gap: 16px; } }
.landing-visual-card {
  background: #fafafa; border: 1px solid #e8e8e8; border-radius: 14px;
  padding: 22px 20px 14px; overflow: hidden;
  display: flex; flex-direction: column;
}
.landing-visual-card--highlight {
  background: color-mix(in srgb, var(--accent) 4%, #fff);
  border-color: color-mix(in srgb, var(--accent) 25%, #fff);
}
.landing-visual-card--full { grid-column: 1 / -1; }
.landing-visual-card-header { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.landing-visual-badge {
  display: inline-block; font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; padding: 2px 8px; border-radius: 99px;
}
.landing-visual-badge--free  { background: color-mix(in srgb, var(--accent) 12%, #fff); color: var(--accent); }
.landing-visual-badge--basic { background: color-mix(in srgb, var(--accent) 18%, #fff); color: var(--accent); }
.landing-visual-card h3 { font-size: 15px; font-weight: 700; color: #1a1a1a; margin: 0 0 8px; }
.landing-visual-card p  { font-size: 13px; color: #555; line-height: 1.65; margin: 0 0 16px; }
.landing-visual-screenshot { display: block; width: 100%; border-radius: 0; border: none; }
.landing-visual-screenshot--bordered { border: 4px solid #fff; border-radius: 6px; }

/* ── Legal text (ToS & Privacy) ────────────────────────────────────── */
.landing-legal { font-size: 13px; color: #555; }
.landing-legal h3 { font-size: 13px; font-weight: 600; color: #1a3a2a; margin: 1.1rem 0 .25rem; }
.landing-legal p { margin: 0 0 .6rem; line-height: 1.6; }
.landing-legal ul { margin: 0 0 .6rem; padding-left: 1.2rem; }
.landing-legal ul li { margin-bottom: .3rem; line-height: 1.55; }
.landing-legal-divider { border: none; border-top: 1px solid #e8e8e8; margin: 1.8rem 0; }

/* ── Admin panel ───────────────────────────────────────────────────── */
.admin-wrap { padding: 24px 40px; }
.admin-stats {
  display: flex; gap: 16px; margin-bottom: 28px; flex-wrap: wrap;
}
.admin-stat-card {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 16px 24px; min-width: 120px;
}
.admin-stat-value { font-size: 28px; font-weight: 700; color: var(--text); }
.admin-stat-label { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.admin-table-wrap {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius); overflow: hidden;
}
.admin-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.admin-table th {
  text-align: left; padding: 10px 14px;
  font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em;
  color: var(--text-muted); background: var(--bg); border-bottom: 1px solid var(--border);
}
.admin-table td { padding: 10px 14px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.admin-table tr:last-child td { border-bottom: none; }
.admin-table tr.row-inactive td { opacity: .5; }
.admin-user-cell { display: flex; flex-direction: column; gap: 2px; }
.admin-user-name { font-weight: 500; }
.admin-user-email { font-size: 12px; color: var(--text-muted); }
.admin-user-meta { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 2px; }
.admin-meta-tag { font-size: 11px; color: var(--text-muted); background: var(--bg); border: 1px solid var(--border); border-radius: 3px; padding: 1px 5px; }
.admin-meta-tag--nl { font-size: 11px; color: var(--accent); border: 1px solid var(--accent); background: color-mix(in srgb, var(--accent) 8%, var(--bg)); border-radius: 3px; padding: 1px 5px; }
.admin-meta-empty { font-size: 11px; color: var(--text-muted); opacity: .45; font-style: italic; }
.admin-user-profile { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 3px; }
.admin-pf-item { font-size: 11px; color: var(--text-muted); }
.admin-pf-key { font-weight: 600; margin-right: 2px; }
.admin-meta { color: var(--text-muted); font-size: 12px; }
.admin-section-title { font-size: 14px; font-weight: 700; color: var(--text); margin: 24px 0 8px; }
.admin-period-form { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; font-size: 13px; }
.admin-period-form input[type="date"] { padding: 4px 8px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-card); color: var(--text); font-size: 13px; }
.admin-tabs { display: flex; gap: 4px; margin: 20px 0 16px; border-bottom: 1px solid var(--border); }
.admin-totals-row td { background: var(--bg-card); border-bottom: 2px solid var(--border); }
.admin-section-title { font-size: 13px; font-weight: 600; color: var(--text-muted); margin: 24px 0 8px; text-transform: uppercase; letter-spacing: .04em; }
.admin-col-sep { border-left: 1px solid var(--border); }
.admin-table-wrap--compact { display: inline-block; min-width: 0; }
.admin-table--compact { width: auto; }
.admin-table--compact th, .admin-table--compact td { white-space: nowrap; }
.admin-tab { background: none; border: none; padding: 8px 16px; font-size: 14px; font-weight: 600; color: var(--text-muted); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color .15s, border-color .15s; }
.admin-tab:hover { color: var(--text); }
.admin-tab--active { color: var(--accent); border-bottom-color: var(--accent); }
.admin-badge {
  display: inline-block; font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; padding: 1px 5px; border-radius: 4px;
  background: #d4ece2; color: var(--premium); width: fit-content;
}
.admin-actions { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.admin-actions form { margin: 0; }
.admin-tier-select {
  font-size: 12px; font-family: var(--font-ui);
  padding: 3px 22px 3px 10px; border-radius: 8px;
  border: 1.5px solid var(--border); background: var(--bg); color: var(--text);
  cursor: pointer;
}
.btn-danger {
  background: var(--danger); color: #fff; border: none;
  padding: 3px 9px; border-radius: var(--radius); font-size: 12px;
  cursor: pointer; font-family: var(--font-ui);
}
.btn-danger:hover { background: #a93226; }

/* ── Admin panel: mobile ──────────────────────────────────────────── */
@media (max-width: 760px) {
  .admin-wrap { padding: 16px 12px; }

  /* Stat cards: two per row, fill available width */
  .admin-stats { gap: 10px; margin-bottom: 20px; }
  .admin-stat-card { flex: 1 1 calc(50% - 5px); min-width: 0; padding: 12px 14px; }
  .admin-stat-value { font-size: 22px; }

  /* Tabs: scroll horizontally instead of wrapping into a tall block */
  .admin-tabs {
    flex-wrap: nowrap; gap: 0; overflow-x: auto;
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
  }
  .admin-tabs::-webkit-scrollbar { display: none; }
  .admin-tab { flex: 0 0 auto; padding: 8px 12px; font-size: 13px; white-space: nowrap; }

  /* Tables: scroll inside their card rather than widening the page */
  .admin-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .admin-table-wrap--compact { display: block; max-width: 100%; }

  /* Date-range filter wraps cleanly */
  .admin-period-form { flex-wrap: wrap; }
  .admin-period-form input[type="date"] { flex: 1 1 auto; min-width: 0; }

  /* Side-by-side flex sections (AI usage, call types, newsletter) stack */
  #admin-pane-ai [style*="min-width"],
  #admin-pane-aitypes [style*="min-width"],
  #admin-pane-newsletter [style*="min-width"] { min-width: 0 !important; }
  #nl-form { flex-basis: 100% !important; max-width: 100%; }
  #ai-chart-wrap { max-width: 100% !important; }

  /* User row actions stay tappable when they wrap */
  .admin-actions { gap: 8px; }
  .admin-actions .btn-sm,
  .admin-actions .admin-tier-select { min-height: 32px; }
}

/* Feedback foldable cards */
.admin-feedback-list { display: flex; flex-direction: column; gap: 6px; max-width: 860px; }
.admin-feedback-item { border: 1px solid var(--border); border-radius: 8px; overflow: hidden; background: var(--bg-card); }
.admin-feedback-item--new { border-left: 3px solid var(--accent); background: color-mix(in srgb, var(--accent) 4%, var(--bg-card)); }
.admin-feedback-item--done { opacity: .55; }
.admin-feedback-header { display: flex; flex-direction: column; gap: 6px; padding: 10px 14px; cursor: pointer; user-select: none; }
.admin-feedback-header:hover { background: var(--bg-hover, #fafafa); }
.admin-feedback-header-left { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.admin-feedback-arrow { font-size: 14px; color: var(--text-muted); transition: transform .15s; display: inline-block; width: 12px; }
.admin-feedback-item--open .admin-feedback-arrow { transform: rotate(90deg); }
.admin-feedback-preview { font-size: 12px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-left: 20px; }
.admin-feedback-email { font-size: 12px; font-weight: 600; color: var(--text); }
.admin-feedback-body { display: none; padding: 0 14px 14px; border-top: 1px solid var(--border); }
.admin-feedback-item--open .admin-feedback-body { display: block; }
.admin-feedback-text { font-size: 13px; color: var(--text); white-space: pre-wrap; word-break: break-word; padding: 12px 0; line-height: 1.6; }
.admin-feedback-reply { background: color-mix(in srgb, #78350f 6%, var(--bg-card)); border-left: 3px solid #78350f; border-radius: 0 4px 4px 0; padding: 10px 12px; margin-bottom: 12px; }
.admin-feedback-reply-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: #78350f; margin-bottom: 6px; }
.admin-feedback-reply-text { font-size: 13px; color: var(--text); white-space: pre-wrap; word-break: break-word; line-height: 1.6; }
/* Dark theme: the box now tints the dark card, so brighten the amber accents
   (the #78350f label/border are near-invisible on a dark background). */
:root[data-theme="dark"] .admin-feedback-reply { border-left-color: #f59e0b; }
:root[data-theme="dark"] .admin-feedback-reply-label { color: #f59e0b; }
.admin-feedback-actions { display: flex; gap: 8px; align-items: flex-start; flex-wrap: wrap; }
.admin-reply-form { display: flex; flex-direction: column; gap: 6px; width: 100%; margin-top: 4px; }
.admin-reply-form textarea { width: 100%; font-size: 12px; padding: 6px 8px; border: 1px solid var(--border); border-radius: 4px; background: var(--bg-card); color: var(--text); resize: vertical; font-family: var(--font-ui); }
.admin-reply-form.hidden { display: none; }

:root {
  --bg: #faf8f4;
  --bg-card: #fff;
  --text: #1a1a1a;
  --text-muted: #666;
  --border: #d8d8d4;
  --accent: #5c7a5a;
  --accent-hover: #48624a;
  --warm: #c08552;        /* soft terracotta, warm secondary accent */
  --warm-soft: #f3e7da;   /* pale warm wash for backgrounds */
  --purple: #7c3aed;
  --danger: #c0392b;
  /* Per-tier accent colours — four distinct, on-brand earthy tones */
  --tier-muse: #6b7075;   /* Muse (free) — cool slate grey (kept cool so it
                             never reads as a warm/tan sibling of terracotta) */
  --premium: #bd5c37;     /* Bard — terracotta clay */
  --plus: #8a6d2f;        /* Oracle — bronze-gold */
  --radius: 6px;
  --font-ui: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

:root[data-theme="dark"] {
  --bg: #1c1c1e;
  --bg-card: #2c2c2e;
  --text: #e5e5ea;
  --text-muted: #8e8e93;
  --border: #3a3a3c;
  --accent: #7a9e78;
  --accent-hover: #5c7a5a;
  --premium: #cf7a52;     /* Bard — terracotta clay, lifted for dark bg */
  --plus: #c2a44e;        /* Oracle — bronze-gold, lifted for dark bg */
}

:root[data-theme="sepia"] {
  --bg: #f4ead8;
  --bg-card: #faf4e6;
  --text: #3b2e1a;
  --text-muted: #7a6045;
  --border: #d4b896;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: var(--font-ui);
  font-size: 14px;
  color: var(--text);
  background: var(--bg);
  min-height: 100vh;
}

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

/* ── Flash messages ───────────────────────────────────────────────── */
/* Modals */
.modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.35); z-index: 9998; display: flex; align-items: center; justify-content: center; padding: 20px; }
.modal-dialog { background: var(--bg-card); border: 1px solid var(--border); border-radius: calc(var(--radius) * 1.5); padding: 28px; max-width: 480px; width: 100%; box-shadow: 0 8px 40px rgba(0,0,0,.25); }
.modal-title { font-size: 18px; font-weight: 700; color: var(--text); margin: 0 0 14px; }
.modal-text { font-size: 13px; line-height: 1.6; color: var(--text); margin: 0 0 12px; }
.modal-text:last-of-type { margin-bottom: 20px; }
.modal-actions { display: flex; gap: 8px; justify-content: flex-end; }
.modal-actions .btn { min-width: 120px; }

#flash-messages { position: fixed; top: 56px; left: 50%; transform: translateX(-50%); z-index: 9999; display: flex; flex-direction: column; gap: 8px; max-width: 500px; width: calc(100% - 24px); }
.flash { padding: 12px 16px; border-radius: var(--radius); font-size: 13px; box-shadow: 0 2px 8px rgba(0,0,0,.12); word-wrap: break-word; line-height: 1.45; }
.flash-error   { background: #fde8e8; color: #7f1d1d; border: 1px solid #f5c6c6; }
.flash-success { background: #e8f5e9; color: #1b5e20; border: 1px solid #c8e6c9; }

/* ── App header ───────────────────────────────────────────────────── */
.app-header {
  display: flex; align-items: center; gap: 12px;
  padding: 0 24px; height: 48px;
  background: var(--bg-card); border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 100;
}
.app-header-logo { display: flex; align-items: center; gap: 8px; text-decoration: none; color: inherit; }
.app-header-logo--text { font-size: 21px; letter-spacing: -.02em; font-family: 'Lora', Georgia, serif; gap: 0; }
.app-header-logo--text .wm-d { font-weight: 700; color: var(--accent); }
.app-header-logo--text .wm-s { font-weight: 400; color: var(--text); }
.app-header-logo img { height: auto; width: auto; max-width: 240px; display: block; }
.app-header-logo-full { max-width: 240px; height: auto; }
.app-header-logo-icon-link { display: flex; align-items: center; padding: 4px; }
.app-header-logo-icon { width: 32px; height: 32px; display: block; }
.ws-mobile-panel-btn { display: none !important; }
.app-header-back {
  font-size: 13px; color: var(--text-muted); white-space: nowrap;
  display: flex; align-items: center; gap: 4px;
}
.app-header-back:hover { color: var(--accent); text-decoration: none; }
.ms-header-title { flex: 1; min-width: 0; font-size: 13px; font-weight: 700; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ms-language-select {
  flex: 0 0 auto; font-size: 12px; font-family: var(--font-ui);
  padding: 4px 26px 4px 12px; border: 1.5px solid var(--border); border-radius: 20px;
  background-color: var(--bg-card); color: var(--text-muted); cursor: pointer;
  appearance: none; -webkit-appearance: none; transition: border-color .15s;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0,0,10,6'%3E%3Cpath%20fill='%23999'%20d='M0,0h10L5,6z'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center; background-size: 8px 5px;
}
.ms-language-select:hover { border-color: var(--accent); }
.app-header-nav { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.ws-account-menu { position: relative; }
.ws-account-dropdown { display: none; position: absolute; right: 0; top: calc(100% + 4px); background: var(--bg-card); border: 1.5px solid var(--border); border-radius: 12px; box-shadow: 0 4px 18px rgba(0,0,0,.13); min-width: 130px; z-index: 200; overflow: hidden; font-family: var(--font-ui); }
.ws-account-dropdown.open { display: block; }
.ws-account-item { display: block; width: 100%; padding: 8px 16px; font-size: 13px; font-weight: normal; color: var(--text); text-decoration: none; white-space: nowrap; text-align: left; background: none; border: none; cursor: pointer; font-family: var(--font-ui); box-sizing: border-box; }
.ws-account-item:hover { background: var(--bg); }
.user-pill { font-size: 13px; color: var(--text-muted); }
.app-header-streak { flex-shrink: 0; }

/* Compact header in manuscript focus mode (fullscreen). */
body.ws-focus-mode .app-header {
  position: fixed;
  top: 6px;
  right: 10px;
  left: auto;
  width: auto;
  height: auto;
  padding: 6px 8px;
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
  gap: 6px;
}
body.ws-focus-mode #app .ws-carousel { flex: 0 1 34%; max-width: 34%; min-width: 0; }
/* Keep the editor action buttons from being squashed by the chapter title bar. */
body.ws-focus-mode #app .ws-right-header > button,
body.ws-focus-mode #app .ws-right-header > .ws-scene-style-select { flex-shrink: 0; }
body.ws-focus-mode .app-header #ai-allowance-badges { display: none; }
body.ws-focus-mode #app .ws-export-menu { display: none; }
body.ws-focus-mode .ms-header-title,
body.ws-focus-mode .ms-language-select,
body.ws-focus-mode .app-header .app-header-streak,
body.ws-focus-mode .app-header a[title="My dashboard"] {
  display: none;
}
body.ws-focus-mode .app-header #btn-focus-mode {
  display: none;
}
body.ws-focus-mode .app-header .app-header-nav {
  gap: 6px;
}
body.ws-focus-mode .app-header .btn-ghost,
body.ws-focus-mode .app-header .btn-primary {
  padding: 3px 10px;
}
body.ws-focus-mode #app .ws-right-header {
  min-height: 40px;
  padding: 6px 10px;
}
/* The floating focus-mode header can be dragged out of the way. */
body.ws-focus-mode .app-header { cursor: move; user-select: none; }
body.ws-focus-mode .app-header button,
body.ws-focus-mode .app-header a,
body.ws-focus-mode .app-header select { cursor: pointer; }

/* Header pills use the same visual language as left panel tabs */
.app-header .btn-ghost,
.app-header .btn-primary,
.app-header .tier-badge,
.app-header .user-pill,
.app-header .streak-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 4px 12px;
  border-radius: 20px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1.2;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
}
.app-header .btn-ghost:hover,
.app-header .btn-primary:hover,
.app-header .tier-badge:hover,
.app-header .streak-chip:hover {
  border-color: var(--accent);
  color: var(--text);
  background: var(--bg);
}

/* ── Font and size pickers ───────────────────────────────────────── */
/* ── Editor toolbar ───────────────────────────────────────────────── */
.ws-editor-toolbar { max-height: 0; overflow: hidden; transition: max-height 0.2s ease, border-color 0.2s; border-bottom: 1px solid transparent; background: var(--bg-card); }
.ws-editor-toolbar--open { max-height: 200px; overflow: visible; border-bottom-color: var(--border); }
.ws-editor-toolbar-inner { display: flex; align-items: center; gap: 20px; padding: 8px 16px; flex-wrap: wrap; }
.ws-editor-toolbar-group { display: flex; align-items: center; gap: 6px; }
.ws-editor-toolbar-label { font-size: 11px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; white-space: nowrap; }
.ws-align-picker { display: flex; gap: 3px; }
.ws-align-btn { width: 26px; height: 26px; border-radius: 4px; border: 1px solid var(--border); background: var(--bg); color: var(--text-muted); cursor: pointer; font-size: 14px; display: flex; align-items: center; justify-content: center; transition: border-color .15s; }
.ws-align-btn:hover { border-color: var(--accent); color: var(--text); }
.ws-align-btn--active { border-color: var(--accent); color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, var(--bg)); }
.ws-width-picker { display: flex; gap: 3px; }
.ws-width-btn { padding: 3px 8px; border-radius: 4px; border: 1px solid var(--border); background: var(--bg); color: var(--text-muted); cursor: pointer; font-size: 11px; font-weight: 600; transition: border-color .15s; }
.ws-width-btn:hover { border-color: var(--accent); color: var(--text); }
.ws-width-btn--active { border-color: var(--accent); color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, var(--bg)); }
.ws-paper-picker { display: flex; gap: 3px; }
.ws-paper-btn { padding: 3px 8px; border-radius: 4px; border: 1px solid var(--border); background: var(--bg); color: var(--text-muted); cursor: pointer; font-size: 11px; font-weight: 600; transition: border-color .15s; }
.ws-paper-btn:hover { border-color: var(--accent); color: var(--text); }
.ws-paper-btn--active { border-color: var(--accent); color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, var(--bg)); }
:root[data-theme="dark"] .ws-paper-btn--active { background: color-mix(in srgb, var(--accent) 22%, var(--bg-card)); border-color: color-mix(in srgb, var(--accent) 60%, var(--border)); }
.ws-format-picker { display: flex; gap: 4px; }
.ws-format-btn { padding: 3px 9px; border-radius: 4px; border: 1px solid var(--border); background: var(--bg); color: var(--text-muted); cursor: pointer; font-size: 13px; transition: border-color .15s; }
.ws-format-btn:hover { border-color: var(--accent); color: var(--text); }
.ws-format-btn--active { border-color: var(--accent); color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, var(--bg)); }
.ws-format-btn--hl { text-decoration: underline; text-decoration-color: #f5d400; text-decoration-thickness: 3px; }
.ws-format-btn--hl.ws-format-btn--active { background: #fff176; border-color: #d4b800; color: #333; }
/* Annotated highlight indicator */
#ms-content span[data-annotation] { border-bottom: 2px dotted var(--accent); cursor: pointer; }
/* Annotation popover */
.ws-annot-pop { position: fixed; z-index: 1200; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: 0 4px 20px rgba(0,0,0,.14); padding: 12px; width: 260px; }
.ws-annot-label { font-size: 11px; font-weight: 600; color: var(--text-muted); margin-bottom: 6px; text-transform: uppercase; letter-spacing: .04em; }
.ws-annot-ta { width: 100%; box-sizing: border-box; resize: vertical; min-height: 64px; font-size: 13px; line-height: 1.5; border: 1px solid var(--border); border-radius: calc(var(--radius) - 2px); background: var(--bg); color: var(--text); padding: 6px 8px; outline: none; font-family: inherit; }
.ws-annot-ta:focus { border-color: var(--accent); }
.ws-annot-row { display: flex; gap: 6px; margin-top: 8px; }

/* ── Font custom dropdown ─────────────────────────────────────────── */
.ws-font-dropdown { position: relative; }
.ws-font-dropdown-btn { padding: 4px 10px; font-size: 13px; border: 1.5px solid var(--border); border-radius: 20px; background: var(--bg); color: var(--text); cursor: pointer; min-width: 120px; text-align: left; transition: border-color .15s; font-family: var(--font-ui); }
.ws-font-dropdown-btn:hover { border-color: var(--accent); }
.ws-font-dropdown-menu { display: none; position: fixed; background: var(--bg-card); border: 1.5px solid var(--border); border-radius: 12px; box-shadow: 0 4px 18px rgba(0,0,0,.13); z-index: 9999; min-width: 160px; overflow: hidden; font-family: var(--font-ui); white-space: nowrap; }
.ws-font-dropdown-menu.open { display: block; }
.ws-font-option { padding: 8px 16px; font-size: 13px; cursor: pointer; color: var(--text); transition: background .1s; }
.ws-font-option:hover { background: color-mix(in srgb, var(--accent) 8%, var(--bg)); }
.ws-font-option--active { background: color-mix(in srgb, var(--accent) 12%, var(--bg)); color: var(--accent); font-weight: 600; }

/* ── Spacing picker ───────────────────────────────────────────────── */
.ws-spacing-picker { display: flex; gap: 3px; }
.ws-spacing-btn { padding: 3px 8px; border-radius: 4px; border: 1px solid var(--border); background: var(--bg); color: var(--text-muted); cursor: pointer; font-size: 11px; font-weight: 600; transition: border-color .15s; }
.ws-spacing-btn:hover { border-color: var(--accent); color: var(--text); }
.ws-spacing-btn--active { border-color: var(--accent); color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, var(--bg)); }

/* ── Manuscript header stats ──────────────────────────────────────── */
#ws-ms-stats { display: flex; gap: 10px; align-items: center; font-size: 11px; color: var(--text-muted); white-space: nowrap; margin-left: 4px; }
#ws-ms-stats span { white-space: nowrap; }

.ws-font-picker { display: flex; align-items: center; gap: 5px; }
.ws-font-label { font-size: 14px; color: var(--text-muted); font-weight: 700; }
.ws-font-select {
  padding: 4px 22px 4px 10px; font-size: 12px; border: 1px solid var(--border);
  border-radius: 6px; background: var(--bg); color: var(--text);
  cursor: pointer; font-family: var(--font-ui);
  transition: border-color .15s;
}
.ws-font-select:hover { border-color: var(--accent); }

.ws-size-picker { display: flex; gap: 3px; align-items: center; }
.ws-size-btn {
  width: 24px; height: 24px; border-radius: 4px; border: 1px solid var(--border);
  background: var(--bg); color: var(--text-muted); cursor: pointer;
  font-weight: 700; display: flex; align-items: center; justify-content: center;
  transition: border-color .15s;
}
.ws-size-btn--small { font-size: 9px; }
.ws-size-btn--medium { font-size: 12px; }
.ws-size-btn--large { font-size: 14px; }
.ws-size-btn:hover { border-color: var(--accent); color: var(--text); }
.ws-size-btn--active { border-color: var(--accent); color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, var(--bg)); }

/* ── Theme picker ─────────────────────────────────────────────────── */
.ws-theme-picker { display: flex; gap: 4px; align-items: center; }
.ws-theme-btn {
  width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--border);
  cursor: pointer; font-size: 9px; font-weight: 700; font-family: var(--font-ui);
  display: flex; align-items: center; justify-content: center;
  transition: border-color .15s;
}
.ws-theme-btn[data-theme="classic"] { background: #f5f4f2; color: #1a1a1a; }
.ws-theme-btn[data-theme="dark"]    { background: #1c1c1e; color: #e5e5ea; }
.ws-theme-btn[data-theme="sepia"]   { background: #faf4e6; color: #3b2e1a; }
.ws-theme-btn.ws-theme-active { border-color: var(--accent); border-width: 2px; }
.ws-theme-btn:hover { border-color: var(--accent); }



/* ── Tier badges ──────────────────────────────────────────────────── */
.tier-badge { font-size: 11px; font-weight: 600; padding: 2px 7px; border-radius: 10px; text-transform: uppercase; letter-spacing: .04em; }
.tier-free         { background: var(--bg); border: 1px solid var(--border); color: var(--text-muted); }
.tier-basic        { background: color-mix(in srgb, var(--accent) 12%, var(--bg)); color: var(--accent); }
.tier-premium      { background: color-mix(in srgb, var(--premium) 12%, var(--bg)); color: var(--premium); }
.tier-premium-plus { background: color-mix(in srgb, var(--plus) 12%, var(--bg)); color: var(--plus); }

/* ── Buttons ──────────────────────────────────────────────────────── */
.btn-primary {
  background: var(--accent); color: #fff; border: none;
  padding: 7px 14px; border-radius: var(--radius); font-size: 13px;
  cursor: pointer; font-family: var(--font-ui); text-align: center;
}
.btn-primary:hover { background: var(--accent-hover); }
.btn-ghost {
  background: transparent; color: var(--text-muted); border: 1px solid var(--border);
  padding: 5px 10px; border-radius: var(--radius); font-size: 13px;
  cursor: pointer; font-family: var(--font-ui); text-align: center;
}
.btn-ghost:hover { border-color: #aaa; color: var(--text); }
.btn-ghost.btn-active { border-color: var(--accent); color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, var(--bg)); }
.btn-sm { padding: 2px 7px; font-size: 12px; }

/* ── Auth ─────────────────────────────────────────────────────────── */
.auth-wrap { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 100vh; padding: 24px; }
.auth-logo { font-size: 22px; font-weight: 700; margin-bottom: 32px; color: var(--text); font-family: 'Lora', Georgia, serif; letter-spacing: -0.01em; }
.auth-form { background: var(--bg-card); padding: 32px; border-radius: var(--radius); border: 1px solid var(--border); width: 100%; max-width: 380px; display: flex; flex-direction: column; gap: 16px; }
.auth-form h2 { font-size: 17px; font-weight: 600; }
.auth-form label { display: flex; flex-direction: column; gap: 5px; font-size: 13px; color: var(--text-muted); }
.auth-form .dob-label-text { display: block; font-size: 13px; color: var(--text-muted); margin-bottom: 5px; }
.auth-form input[type=email],
.auth-form input[type=password],
.auth-form input[type=text],
.auth-form input[type=date] { padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--radius); font-size: 14px; color: var(--text); width: 100%; }
.auth-form select { padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--radius); font-size: 14px; color: var(--text); width: 100%; background: var(--bg-card); }
.auth-form select,
.auth-form select option { font-family: var(--font-ui); }
.auth-form input:focus { outline: 2px solid var(--accent); border-color: transparent; }
.auth-form select:focus { outline: 2px solid var(--accent); border-color: transparent; }
.dob-row { display: flex; gap: 8px; flex-wrap: nowrap; align-items: center; }
.dob-row select { display: none; }
.dob-year-input { height: 38px; border: 1px solid var(--border); border-radius: 6px; padding: 0 10px; font-size: 13px; font-family: var(--font-ui); color: var(--text); background: var(--bg-input, #fff); width: 90px; -moz-appearance: textfield; }
.dob-year-input::-webkit-outer-spin-button, .dob-year-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.dob-year-input:focus { outline: 2px solid var(--accent); border-color: transparent; }

/* ── Custom select component (mirrors demo-selector style) ──────────────── */
.ws-csel { position: relative; display: inline-block; }
.ws-csel-trigger {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  border: 1.5px solid var(--border); border-radius: 20px;
  padding: 6px 12px 6px 14px; background: var(--bg-card);
  font-family: var(--font-ui); transition: border-color .15s;
  box-sizing: border-box; user-select: none; white-space: nowrap;
}
.ws-csel-trigger:hover { border-color: var(--accent); }
.ws-csel-label {
  flex: 1; font-size: 13px; font-weight: 500; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ws-csel-label--placeholder { color: var(--text-muted); font-weight: 400; }
.ws-csel-arrow { font-size: 10px; color: var(--text-muted); line-height: 1; flex-shrink: 0; }
.ws-csel-menu {
  display: none; position: fixed;
  background: var(--bg-card);
  border: 1.5px solid var(--border); border-radius: 12px;
  box-shadow: 0 4px 18px rgba(0,0,0,.13); z-index: 9500; overflow: hidden;
  font-family: var(--font-ui); max-height: 220px; overflow-y: auto;
}
.ws-csel-menu.open { display: block; }
.ws-csel-option { padding: 8px 16px; font-size: 13px; color: var(--text); cursor: pointer; white-space: nowrap; }
.ws-csel-option:hover { background: var(--bg); }
.ws-csel-option--active { font-weight: 700; }
.signup-plan-block {
  border: 1px solid color-mix(in srgb, var(--accent) 24%, #fff);
  background: color-mix(in srgb, var(--accent) 6%, #fff);
  border-radius: var(--radius);
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.signup-plan-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.signup-plan-block select {
  font-size: 12px;
  font-weight: 500;
  color: var(--text);
}
.signup-plan-inline {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  align-items: center;
}
.signup-billing-inline {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.signup-plan-inline #signup-billing-mode-select {
  width: 100%;
  max-width: 140px;
  min-width: 92px;
}
.signup-plan-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.signup-plan-pill {
  border: 1px solid transparent;
  border-radius: 10px;
  padding: 8px 10px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  text-align: center;
}
.signup-plan-pill--free {
  background: #f0f0f0;
  color: #666;
  border-color: #dddddd;
}
.signup-plan-pill--basic {
  background: color-mix(in srgb, var(--accent) 12%, #fff);
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 35%, #fff);
}
.signup-plan-pill--premium {
  background: color-mix(in srgb, var(--premium) 12%, #fff);
  color: var(--premium);
  border-color: color-mix(in srgb, var(--premium) 35%, #fff);
}
.signup-plan-pill--plus {
  background: color-mix(in srgb, var(--plus) 12%, #fff);
  color: var(--plus);
  border-color: color-mix(in srgb, var(--plus) 35%, #fff);
}
.signup-plan-pill.is-active {
  box-shadow: inset 0 0 0 2px currentColor;
}
.signup-plan-price {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.15;
  margin: 0;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  justify-self: start;
}
.signup-plan-price--free { color: #888; }
.signup-plan-price--basic { color: var(--accent); }
.signup-plan-price--premium { color: var(--premium); }
.signup-plan-price--plus { color: var(--plus); }
.signup-plan-price:empty { display: none; }
.checkbox-row { flex-direction: row !important; align-items: center; gap: 8px !important; }
.checkbox-row-legal { align-items: flex-start; }
.checkbox-row-legal span { font-size: 12px; color: var(--text-muted); line-height: 1.4; }
.checkbox-row-legal a { color: var(--accent); text-decoration: none; }
.checkbox-row-legal a:hover { text-decoration: underline; }
.auth-link { font-size: 13px; color: var(--text-muted); text-align: center; }
.auth-trial-note { font-size: 13px; font-weight: 400; color: var(--accent); margin: -8px 0 4px; }
.auth-arc-note { color: var(--text-muted); margin-top: -4px; }
.signup-role-toggle { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 2px 0 10px; }
.signup-role-opt { margin: 0; cursor: pointer; }
.signup-role-opt input { position: absolute; opacity: 0; pointer-events: none; }
.signup-role-card {
  display: flex; flex-direction: column; gap: 2px;
  padding: 10px 12px; border: 1px solid var(--border, #d8d2c4); border-radius: 10px;
  background: var(--surface, #fff); transition: border-color .15s, box-shadow .15s, background .15s;
}
.signup-role-card strong { font-size: 13px; color: var(--text, #2b2b2b); }
.signup-role-card small { font-size: 11px; color: var(--text-muted); line-height: 1.3; }
.signup-role-opt input:checked + .signup-role-card {
  border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset;
  background: color-mix(in srgb, var(--accent) 6%, transparent);
}
.signup-role-opt input:focus-visible + .signup-role-card { outline: 2px solid var(--accent); outline-offset: 2px; }
.hint { font-size: 11px; color: #999; font-weight: 400; }

/* ── Password field with eye toggle ──────────────────────────────── */
.pw-wrap { position: relative; display: flex; align-items: center; }
.pw-wrap input[type=password],
.pw-wrap input[type=text] { padding-right: 36px !important; width: 100%; }
.pw-toggle { position: absolute; right: 8px; background: none; border: none; cursor: pointer; color: var(--text-muted); padding: 0; line-height: 0; display: flex; align-items: center; }
.pw-toggle:hover { color: var(--text); }

/* ── Password rules checklist ────────────────────────────────────── */
.pw-rules { list-style: none; padding: 6px 0 2px; margin: 0; display: flex; flex-direction: column; gap: 3px; }
.pw-rule { font-size: 12px; color: var(--text-muted); padding-left: 18px; position: relative; transition: color .15s; }
.pw-rule::before { content: '○'; position: absolute; left: 0; font-size: 10px; }
.pw-rule.ok { color: #15803d; }
.pw-rule.ok::before { content: '✓'; }

/* ── Inline auth error ───────────────────────────────────────────── */
.auth-error { background: #fef2f2; border: 1px solid #fecaca; border-radius: var(--radius); padding: 8px 12px; font-size: 13px; color: #991b1b; font-weight: 500; }
.auth-error-muted { font-style: italic; color: #b91c1c; }

/* ── Dashboard ────────────────────────────────────────────────────── */
.dash-main { max-width: 680px; margin: 40px 0 40px 48px; padding: 0 24px; }

/* Empty state (no manuscripts yet) */
.dash-empty-main { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: calc(100vh - 48px); padding: 40px 24px; text-align: center; }
.dash-empty-title { font-size: 22px; font-weight: 600; margin-bottom: 8px; }
.dash-empty-sub   { color: var(--text-muted); margin-bottom: 28px; }
.dash-create--center { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.dash-center-main { flex: 1; overflow-y: auto; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 40px 24px; text-align: center; }

/* ── Onboarding tour ────────────────────────────────────────────────────── */
.tour-pulse { position: relative; z-index: 10; border-radius: 6px; animation: tour-pulse 1.8s ease-in-out infinite; }
@keyframes tour-pulse {
  0%, 100% { box-shadow: 0 0 0 3px var(--accent), 0 0 0 7px color-mix(in srgb, var(--accent) 25%, transparent); }
  50%       { box-shadow: 0 0 0 3px var(--accent), 0 0 0 12px color-mix(in srgb, var(--accent) 10%, transparent); }
}
.tour-tooltip { position: fixed; z-index: 9999; background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; max-width: 230px; box-shadow: 0 4px 20px rgba(0,0,0,.13); opacity: 0; transform: translateY(6px); transition: opacity .2s, transform .2s; pointer-events: none; }
.tour-tooltip--visible { opacity: 1; transform: translateY(0); pointer-events: auto; }
.tour-tooltip-msg { font-size: 13px; color: var(--text); line-height: 1.5; margin: 0 0 10px; }
.tour-tooltip-dismiss { font-size: 12px; font-weight: 600; color: var(--accent); background: none; border: none; cursor: pointer; padding: 0; font-family: var(--font-ui); }
.tour-tooltip-dismiss:hover { text-decoration: underline; }

/* ── Onboarding ─────────────────────────────────────────────────────────── */
.onboarding-wrap { min-height: 100vh; background: var(--bg); display: flex; flex-direction: column; align-items: center; padding: 40px 16px 64px; }
.onboarding-header { width: 100%; max-width: 640px; display: flex; justify-content: space-between; align-items: center; margin-bottom: 28px; }
.onboarding-wordmark { font-family: Georgia, serif; font-size: 18px; letter-spacing: -.02em; margin: 0; }
.onboarding-step-label { font-size: 12px; color: var(--text-muted); margin: 0; }
.onboarding-card { width: 100%; max-width: 640px; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 36px; }
.onboarding-card--workflow { max-width: 620px; }
.onboarding-title { font-size: 22px; font-weight: 700; margin: 0 0 8px; color: var(--text); }
.onboarding-subtitle { font-size: 14px; color: var(--text-muted); margin: 0 0 28px; line-height: 1.5; }
.onboarding-section { margin-bottom: 28px; }
.onboarding-section-title { font-size: 16px; font-weight: 600; margin: 0 0 6px; }
.onboarding-fields-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 20px; }
@media (max-width: 560px) { .onboarding-fields-row { grid-template-columns: 1fr; } }
.onboarding-field { display: flex; flex-direction: column; gap: 6px; }
.onboarding-field--full { width: 100%; }
.onboarding-label { font-size: 13px; color: var(--text-muted); }
.onboarding-hint { font-size: 11px; color: #999; margin-left: 4px; }
.onboarding-select {
  width: 100%; box-sizing: border-box;
  appearance: none; -webkit-appearance: none;
  background: var(--bg-card);
  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 d='M1 1l5 5 5-5' stroke='%23999' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 9px 36px 9px 14px;
  font-size: 13px;
  font-family: var(--font-ui);
  color: var(--text);
  cursor: pointer;
  transition: border-color .15s;
}
.onboarding-select:hover { border-color: var(--accent); }
.onboarding-select:focus { outline: 2px solid var(--accent); border-color: transparent; }
.onboarding-checkboxes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.onboarding-checkbox-wrap { display: flex; align-items: center; gap: 6px; font-size: 13px; background: var(--bg); border: 1px solid var(--border); border-radius: 20px; padding: 4px 12px; cursor: pointer; transition: border-color .15s; }
.onboarding-checkbox-wrap:hover { border-color: var(--accent); }
.onboarding-checkbox-wrap input { display: none; }
.onboarding-checkbox-wrap:has(input:checked) { background: color-mix(in srgb, var(--accent) 12%, #fff); border-color: var(--accent); color: var(--accent); font-weight: 600; }
.onboarding-divider { border: 0; border-top: 1px solid var(--border); margin: 0 0 28px; }
.onboarding-workflow-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-top: 16px; }
@media (max-width: 500px) { .onboarding-workflow-grid { grid-template-columns: 1fr; } }
.onboarding-workflow-card { cursor: pointer; }
.onboarding-workflow-card input { display: none; }
.onboarding-workflow-inner { border: 2px solid var(--border); border-radius: var(--radius); padding: 16px; transition: border-color .15s, background .15s; height: 100%; }
.onboarding-workflow-card:hover .onboarding-workflow-inner { border-color: var(--accent); }
.onboarding-workflow-card.is-selected .onboarding-workflow-inner,
.onboarding-workflow-card:has(input:checked) .onboarding-workflow-inner { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, #fff); }
.onboarding-workflow-name { font-size: 15px; font-weight: 600; margin-bottom: 6px; color: var(--text); }
.onboarding-workflow-desc { font-size: 13px; color: var(--text-muted); line-height: 1.5; }
.onboarding-actions { margin-top: 32px; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.onboarding-cta { font-size: 15px; padding: 12px 28px; }
.onboarding-skip { font-size: 13px; color: var(--text-muted); text-decoration: none; }
.onboarding-skip:hover { color: var(--text); }
.onboarding-workflow-badge { display: inline-block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, #fff); border-radius: 20px; padding: 3px 10px; margin-bottom: 14px; }
.onboarding-steps { margin: 24px 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 20px; counter-reset: steps; }
.onboarding-step-item { display: flex; gap: 16px; counter-increment: steps; }
.onboarding-step-item::before { content: counter(steps); min-width: 28px; height: 28px; border-radius: 50%; background: var(--accent); color: #fff; font-size: 13px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 2px; }
.onboarding-step-content { display: flex; flex-direction: column; gap: 4px; }
.onboarding-step-title { font-size: 14px; font-weight: 600; }
.onboarding-step-body { font-size: 13px; color: var(--text-muted); line-height: 1.6; }
.onboarding-workflow-tip { font-size: 13px; color: var(--text-muted); background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 16px; margin-top: 8px; line-height: 1.6; }

/* Sidebar layout */
.dash-layout { display: flex; height: calc(100vh - 48px); overflow: hidden; }
.dash-sidebar {
  flex: 1; min-width: 320px;
  background: var(--bg-card); border-right: 1px solid var(--border);
  display: flex; flex-direction: column; overflow-y: auto;
  padding-bottom: 16px;
}
.dash-sidebar-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 14px; height: 56px; position: sticky; top: 0;
  background: var(--bg-card); border-bottom: 1px solid var(--border); z-index: 1;
}
.dash-sidebar-title { font-size: 16px; font-weight: 700; }
.dash-content { flex: 1; overflow-y: auto; display: flex; align-items: center; justify-content: center; }
.dash-content-inner { max-width: 480px; padding: 40px 24px; }
.dash-content-heading { font-size: 16px; font-weight: 400; color: var(--text-muted); margin-bottom: 24px; line-height: 1.5; }
.sb-create-bottom { border-top: 1px solid var(--border); padding: 20px 14px 8px; margin-top: auto; }
.sb-create-bottom-heading { font-size: 13px; font-weight: 400; color: var(--text-muted); margin: 0 0 16px; line-height: 1.5; }

/* Sidebar sections */
.sb-section { border-bottom: 1px solid var(--border); padding: 8px 0; }
.sb-col-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 6px 14px 4px; gap: 6px;
}
.sb-col-name { flex: 1; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); }
.sb-col-standalone { color: #bbb; }
.sb-col-actions { display: flex; gap: 2px; align-items: center; }
.sb-icon-btn { background: none; border: none; cursor: pointer; color: var(--text-muted); font-size: 12px; padding: 2px 4px; border-radius: 3px; }
.sb-icon-btn:hover { background: var(--bg); color: var(--text); }
.sb-rename-form { display: flex; gap: 4px; align-items: center; flex: 1; }
.sb-rename-input { flex: 1; font-size: 12px; padding: 3px 6px; border: 1px solid var(--border); border-radius: var(--radius); }
.sb-ms-item {
  display: flex; align-items: center; gap: 6px;
  padding: 5px 14px; cursor: default;
}
.sb-ms-item:hover { background: var(--bg); }
.sb-ms-seq { font-size: 11px; color: #bbb; min-width: 14px; text-align: center; flex-shrink: 0; }
.sb-ms-title { flex: 1; font-size: 13px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-ms-title:hover { color: var(--accent); }
.sb-ms-last-opened { font-size: 11px; color: var(--text-muted); white-space: nowrap; flex-shrink: 0; }
.sb-ms-rename-inline { flex: 1; min-width: 0; }
.sb-export-link { font-size: 11px; color: var(--text-muted); text-decoration: none; flex-shrink: 0; padding: 2px 3px; border-radius: 3px; background: none; border: none; cursor: pointer; font-family: var(--font-ui); }
.sb-export-link:hover { color: var(--accent); background: var(--bg); }

/* Assign form (inline) */
.sb-assign-form { padding: 6px 14px 8px; background: var(--bg); border-top: 1px solid var(--border); }
.sb-assign-form form { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.sb-assign-no-series { font-size: 12px; color: var(--text-muted); padding: 2px 0; }
.sb-select { font-size: 12px; padding: 3px 22px 3px 10px; border: 1.5px solid var(--border); border-radius: 8px; flex: 1; min-width: 0; font-family: var(--font-ui); }
.sb-seq-input { width: 44px; font-size: 12px; padding: 3px 6px; border: 1px solid var(--border); border-radius: var(--radius); text-align: center; }
.sb-empty { font-size: 12px; color: #bbb; padding: 4px 14px 6px; font-style: italic; }

/* Sidebar create form */
.sb-create-area { padding: 8px 14px; border-bottom: 1px solid var(--border); background: var(--bg); }
.sb-create-form { display: flex; flex-direction: column; gap: 6px; }
.sb-input { width: 100%; font-size: 13px; padding: 5px 8px; border: 1px solid var(--border); border-radius: var(--radius); }
.sb-create-actions { display: flex; gap: 6px; }
.sb-upload-label { font-size: 12px; }
.sb-inline-save-form {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 6px;
}
.sb-inline-save-form .sb-input {
  flex: 1;
  min-width: 0;
}
.sb-inline-save-form .btn-ghost.btn-sm {
  margin-left: auto;
  flex-shrink: 0;
}

/* New series button */
.sb-new-col-area { padding: 10px 14px; }
.sb-new-col-btn { background: none; border: none; cursor: pointer; font-size: 12px; color: var(--accent); padding: 0; }
.sb-new-col-btn:hover { text-decoration: underline; }

.sb-demo-section {
  margin: 0 14px 14px;
  padding: 10px 12px;
  border: 1px dashed var(--border);
  border-radius: 6px;
  background: color-mix(in srgb, var(--accent) 4%, transparent);
}
.sb-demo-label { font-size: 11px; color: var(--text-muted); margin-bottom: 6px; }
.sb-demo-btn {
  display: inline-block;
  font-size: 12px;
  color: var(--accent);
  font-weight: 500;
  text-decoration: none;
}
.sb-demo-btn:hover { text-decoration: underline; }

/* Demo mode banner at top of editor */
.ws-demo-banner {
  background: color-mix(in srgb, var(--accent) 8%, var(--bg-card));
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 25%, transparent);
  padding: 8px 18px;
  font-size: 12px;
  color: var(--text-muted);
}
.ws-demo-banner strong { color: var(--text); }
.ws-demo-banner a { color: var(--accent); text-decoration: none; }
.ws-demo-banner a:hover { text-decoration: underline; }
.ws-demo-banner-close {
  float: right;
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  padding: 0 2px;
}
.ws-demo-banner-close:hover { color: var(--text); }

.access-revoked-banner {
  background: #fdf3e7;
  border-bottom: 1px solid #e8c99a;
  padding: 10px 20px;
  font-size: 13px;
  color: #5a3e1b;
}
.access-revoked-banner a { color: var(--accent); font-weight: 600; text-decoration: none; }
.access-revoked-banner a:hover { text-decoration: underline; }

/* Free tier banner on dashboard */
.free-tier-banner {
  background: #f5f0ea;
  border-bottom: 1px solid #c8bfb0;
  padding: 9px 20px;
  font-size: 12px;
  color: #666;
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}
.free-tier-banner strong { color: #333; }
.free-tier-banner-features { flex: 1; min-width: 0; }
.free-tier-banner-link { color: var(--accent); text-decoration: none; white-space: nowrap; font-weight: 600; }
.free-tier-banner-link:hover { text-decoration: underline; }
.tier-upgrade-banner--basic { background: color-mix(in srgb, var(--accent) 10%, #fff); border-bottom-color: color-mix(in srgb, var(--accent) 30%, #fff); }
.tier-upgrade-banner--basic strong { color: var(--accent); }
.tier-upgrade-link--premium { color: var(--premium); }
.tier-upgrade-banner--premium { background: color-mix(in srgb, var(--premium) 10%, #fff); border-bottom-color: color-mix(in srgb, var(--premium) 30%, #fff); }
.tier-upgrade-banner--premium strong { color: var(--premium); }
.tier-upgrade-link--plus { color: var(--plus); }
.tier-banner-dismiss { margin-left: 12px; background: none; border: none; cursor: pointer; font-size: 16px; line-height: 1; color: #999; padding: 0 2px; flex-shrink: 0; }
.tier-banner-dismiss:hover { color: #333; }

/* Dashboard create area (right panel + empty state) */
.dash-header { display: flex; align-items: center; margin-bottom: 20px; }
.dash-header h2 { font-size: 18px; font-weight: 600; }
.dash-create { margin-bottom: 12px; }
.dash-create-triggers { display: flex; gap: 10px; }
.dash-create-form { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.dash-create-input { padding: 7px 10px; border: 1px solid var(--border); border-radius: var(--radius); font-size: 13px; width: 260px; }
.dash-create-input:focus { outline: 2px solid var(--accent); border-color: transparent; }
.dash-upload-label input[type=file] { display: none; }
.dash-upload-helper {
  flex-basis: 100%;
  margin: 0;
  font-size: 11px;
  line-height: 1.45;
  color: var(--text-muted);
}
.dash-upload-helper--always {
  margin-top: 8px;
  width: auto;
  max-width: 560px;
  text-align: left;
}
#form-upload {
  align-items: flex-start;
}

.inline-form { display: flex; gap: 8px; }
.inline-form input { padding: 7px 10px; border: 1px solid var(--border); border-radius: var(--radius); font-size: 13px; width: 240px; }

.ms-list { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.ms-card {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 14px 16px;
  display: flex; align-items: baseline; gap: 10px;
}
.ms-card-title { font-weight: 600; font-size: 15px; flex: 1; }
.ms-card-sub { font-size: 13px; color: var(--text-muted); }
.ms-card-meta { font-size: 12px; color: #aaa; margin-left: auto; white-space: nowrap; }
.ms-card-del { margin-left: 8px; }
.empty-state { color: var(--text-muted); font-size: 14px; padding: 40px 0; text-align: center; }

/* ── Series panel ─────────────────────────────────────────────────── */
.ws-series-header { margin-bottom: 12px; }
.ws-series-title  { font-size: 16px; font-weight: 600; }
.ws-series-desc   { font-size: 13px; color: var(--text-muted); margin-top: 4px; }
.ws-series-books  { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.ws-series-book   {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 8px 10px; background: var(--bg-card);
  border: 1px solid var(--border); border-radius: var(--radius);
}
.ws-series-book--current { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, var(--bg-card)); }
.ws-series-seq    { font-size: 12px; color: var(--text-muted); min-width: 18px; padding-top: 2px; text-align: center; }
.ws-series-book-info  { flex: 1; display: flex; flex-direction: column; gap: 3px; }
.ws-series-book-title { font-size: 13px; font-weight: 500; color: var(--accent); }
.ws-series-book-title--current { color: var(--text); }
.ws-series-book-meta  { font-size: 12px; color: var(--text-muted); }
.ws-appears-in-row    { align-items: flex-start; }
.ws-appears-in-checks { display: flex; flex-wrap: wrap; gap: 6px 14px; padding-top: 2px; }
.ws-appears-in-label  { display: flex; align-items: center; gap: 5px; font-size: 12px; color: var(--text); cursor: pointer; }
.ws-series-copy-sel   {
  flex: 0 0 auto; font-size: 12px; font-family: var(--font-ui);
  padding: 4px 26px 4px 12px; border: 1.5px solid var(--border); border-radius: 20px;
  background-color: var(--bg-card); color: var(--text); cursor: pointer;
  appearance: none; -webkit-appearance: none; transition: border-color .15s;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0,0,10,6'%3E%3Cpath%20fill='%23999'%20d='M0,0h10L5,6z'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center; background-size: 8px 5px;
}
.ws-series-copy-sel:hover { border-color: var(--accent); }
.ws-shared-chars  { display: flex; flex-direction: column; gap: 10px; }
.ws-shared-char   { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 10px 12px; }
.ws-shared-char-name { font-size: 13px; }
.ws-shared-char-list { margin: 4px 0 0 14px; font-size: 12px; color: var(--text-muted); line-height: 1.6; }
.ws-series-premium-cta { margin-top: 16px; padding: 12px 36px 12px 14px; background: #f5f0ff; border: 1px solid #d8c8ff; border-radius: var(--radius); font-size: 13px; color: #5b3fa0; line-height: 1.5; position: relative; }
.ws-ai-toolbar { margin-top: 14px; padding: 10px 14px; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); display: flex; flex-direction: column; align-items: flex-start; gap: 10px; font-size: 13px; }
.ws-ai-toolbar--style { flex-direction: row; align-items: center; flex-wrap: wrap; gap: 8px; }
.ws-ai-toolbar--style .ws-ai-scope { flex-basis: 100%; margin-bottom: 4px; }
.ws-ai-toolbar .btn-ghost.btn-sm {
  background: var(--bg);
  border-color: var(--border);
  color: var(--text);
}
.ws-ai-toolbar .btn-ghost.btn-sm:hover {
  background: color-mix(in srgb, var(--accent) 10%, var(--bg));
  border-color: var(--accent);
}
.ws-ai-toolbar--coach { margin-top: 0; }
.ws-full-text-note { font-size: 11px; color: var(--text-muted); font-style: italic; }
.ws-ai-toolbar-row { display: flex; flex-direction: row; align-items: center; gap: 8px; flex-wrap: wrap; }
.ws-ai-scope { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; }
.ws-ai-scope label { font-weight: 600; font-size: 10px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; }
.ws-scope-btns { display: flex; gap: 0; background: var(--bg); border: 1px solid var(--border); border-radius: 5px; padding: 2px; }
.ws-scope-btn { padding: 2px 8px; font-size: 11px; font-weight: 500; background: transparent; border: none; border-radius: 3px; color: var(--text-muted); cursor: pointer; transition: all 150ms; white-space: nowrap; }
.ws-scope-btn:hover:not(.ws-scope-btn--active) { background: color-mix(in srgb, var(--accent) 8%, transparent); color: var(--text); }
.ws-scope-btn--active { background: var(--accent); color: white; font-weight: 600; }
/* Mobile: the side panel is narrow (drawer with a 150px strip), so make the
   scope selector a full-width, equal-thirds segmented control with tappable
   buttons whose labels wrap instead of overflowing. */
@media (max-width: 700px) {
  .ws-ai-scope { width: 100%; }
  .ws-scope-btns { width: 100%; box-sizing: border-box; }
  .ws-scope-btn {
    flex: 1 1 0; min-width: 0;
    display: flex; align-items: center; justify-content: center; text-align: center;
    white-space: normal; line-height: 1.15;
    padding: 7px 4px; min-height: 34px; font-size: 11px;
  }
}
.ws-spell-jump { padding: 2px 6px; margin-right: 4px; font-size: 11px; font-weight: 600; background: var(--accent); color: white; border: none; border-radius: 3px; cursor: pointer; transition: all 150ms; }
.ws-spell-jump:hover { opacity: 0.8; transform: scale(1.05); }
.ws-allowance-badges { display: flex; gap: 8px; align-items: center; }
.ws-allowance-badges:empty { display: none; }
.ws-allowance-dropdown { position: relative; display: inline-block; }
.ws-allowance-toggle { padding: 4px 12px; font-size: 12px; font-weight: 600; }
.ws-allowance-menu { display: none; position: absolute; top: 100%; right: 0; background: var(--bg-card); border: 1px solid var(--border); border-radius: 6px; padding: 8px; gap: 8px; flex-direction: column; min-width: 220px; z-index: 1000; box-shadow: 0 4px 6px rgba(0,0,0,0.1); }
.ws-allowance-menu.open { display: flex; }
.ws-allowance-badge { padding: 4px 10px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; font-size: 11px; font-weight: 600; color: var(--text); }
.ws-allowance-badge.ws-allowance-badge--premium-plus { background: #e8edf3; border-color: #e8ddf0; }
.ws-allowance-badge.ws-allowance-badge--low { background: #fef3f0; border-color: #f5d5cc; color: #c92a2a; }
.ws-allowance-badge.ws-allowance-badge--empty { opacity: 0.5; }
.ws-search-count { font-size: 12px; color: var(--text-muted); min-width: 46px; text-align: center; }
.ws-search-nav { padding: 2px 7px; border: 1px solid var(--border); background: transparent; border-radius: 3px; cursor: pointer; font-size: 14px; font-weight: 600; color: var(--text-muted); transition: all 150ms; }
.ws-search-nav:hover { background: var(--accent); color: white; border-color: var(--accent); }
.ws-search-overlay { position: absolute; top: 12px; right: 16px; z-index: 500; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: 0 4px 20px rgba(0,0,0,.12); padding: 8px; width: 360px; display: flex; flex-direction: column; gap: 6px; }
.ws-search-overlay-row { display: flex; align-items: center; gap: 5px; }
.ws-search-overlay-input { flex: 1; min-width: 0; padding: 5px 10px; border: 1px solid var(--border); border-radius: 999px; font-size: 12px; font-family: var(--font-ui); background: var(--bg); color: var(--text); outline: none; }
.ws-search-overlay-input:focus { border-color: var(--accent); }
.ws-search-overlay-icon { background: transparent; border: none; cursor: pointer; color: var(--text-muted); font-size: 13px; padding: 2px 5px; border-radius: 3px; line-height: 1; }
.ws-search-overlay-icon:hover { color: var(--text); background: var(--bg); }
.ws-replace-toggle--active { color: var(--accent) !important; }
.ws-search-overlay-btn { padding: 3px 10px; font-size: 12px; border: 1px solid var(--border); border-radius: 3px; background: transparent; color: var(--text-muted); cursor: pointer; white-space: nowrap; }
.ws-search-overlay-btn:hover { border-color: var(--accent); color: var(--accent); }
body.ws-focus-mode .ws-search-overlay { display: none !important; }
.ws-search-highlight { background: #fef08a; padding: 2px 0; border-radius: 2px; }
.ws-survey-banner { position: fixed; bottom: 0; left: 0; right: 0; z-index: 1100; background: var(--bg-card); border-top: 1px solid var(--border); box-shadow: 0 -4px 20px rgba(0,0,0,0.1); padding: 14px 20px 16px; display: flex; flex-direction: column; gap: 10px; transform: translateY(100%); animation: ws-survey-slide-up 0.3s ease forwards; }
@keyframes ws-survey-slide-up { to { transform: translateY(0); } }
.ws-survey-head { display: flex; align-items: center; gap: 8px; }
.ws-survey-title { flex: 1; font-size: 14px; font-weight: 600; color: var(--text); }
.ws-survey-stars { display: flex; gap: 4px; }
.ws-star-btn { background: none; border: none; cursor: pointer; font-size: 26px; color: var(--border); line-height: 1; padding: 0 2px; transition: color .1s, transform .1s; }
.ws-star-btn:hover, .ws-star-btn.ws-star-active { color: #f59e0b; }
.ws-star-btn:hover { transform: scale(1.15); }
.ws-survey-expand { display: none; flex-direction: column; gap: 8px; }
.ws-survey-expand.open { display: flex; }
.ws-survey-text { width: 100%; box-sizing: border-box; font-size: 13px; padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg); color: var(--text); resize: none; font-family: var(--font-ui); line-height: 1.5; }
.ws-survey-text:focus { outline: none; border-color: var(--accent); }
.ws-survey-actions { display: flex; justify-content: flex-end; gap: 8px; }
.ws-source-opts { display: flex; flex-wrap: wrap; gap: 8px; }
.ws-source-other { display: flex; gap: 8px; align-items: center; }
.ws-source-other input { flex: 1; min-width: 0; font-size: 13px; padding: 7px 10px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg); color: var(--text); font-family: var(--font-ui); }
.ws-source-other input:focus { outline: none; border-color: var(--accent); }
.ws-snap-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.45); z-index: 1200; display: flex; align-items: center; justify-content: center; }
.ws-snap-modal { background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; width: 440px; max-width: 95vw; max-height: 80vh; display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 8px 32px rgba(0,0,0,0.18); }
.ws-snap-modal-head { display: flex; align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--border); flex-shrink: 0; }
.ws-snap-modal-title { flex: 1; font-size: 14px; font-weight: 600; color: var(--text); }
.ws-snap-save-row { display: flex; align-items: center; gap: 8px; padding: 12px 16px; border-bottom: 1px solid var(--border); flex-shrink: 0; }
.ws-snap-list { flex: 1; overflow-y: auto; padding: 8px 0; }
.ws-snap-empty { font-size: 12px; color: var(--text-muted); text-align: center; padding: 20px 0; margin: 0; }
.ws-snap-row { display: flex; align-items: center; gap: 8px; padding: 8px 16px; border-bottom: 1px solid var(--border); }
.ws-snap-row:last-child { border-bottom: none; }
.ws-snap-row-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ws-snap-row-label { font-size: 12px; font-weight: 500; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ws-snap-row-meta { font-size: 11px; color: var(--text-muted); }
.ws-snap-row-actions { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
.btn-xs { padding: 2px 8px; font-size: 11px; }
.ws-search-highlight--active { background: #fbbf24; color: #000; font-weight: 600; }
.ws-coach-scope-bar { display: flex; align-items: center; justify-content: space-between; padding: 0 0 12px 0; margin-bottom: 12px; border-bottom: 1px solid #e0e8e0; grid-column: 1 / -1; }
.ws-coach-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 0; }
.ws-coach-actions .btn-ghost.btn-sm { font-weight: 600; background: #deebde; border-color: #abc8ab; }
.ws-coach-actions .btn-ghost.btn-sm:hover { background: #d3e4d3; }
.ws-coach-actions .btn-ghost.btn-sm.is-selected { background: #7c3aed; color: white; border-color: #7c3aed; }
.ws-series-empty  { padding: 8px 0; }
.ws-analyze-result { font-size: 12px; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); padding: 10px; overflow-x: auto; margin-top: 8px; }
.ws-layout {
  display: flex; flex-direction: column; height: calc(100vh - 48px);
  overflow: hidden;
}
.ws-top-bar { display: flex; flex-direction: row; flex-shrink: 0; border-bottom: 1px solid var(--border); background: var(--bg-card); }
.ws-top-right { flex: 1; min-width: 0; overflow: hidden; display: flex; flex-direction: column; }
.ws-body-row { display: flex; flex: 1; overflow: hidden; }
.ws-panel { display: flex; flex-direction: column; min-width: 0; overflow: hidden; }
/* Left area: strip + side panel */
.ws-left-area { display: flex; flex-direction: row; flex-shrink: 0; overflow: hidden; }
.ws-strip {
  width: 148px; flex-shrink: 0;
  display: flex; flex-direction: column;
  border-right: 1px solid var(--border);
  overflow-y: auto; overflow-x: hidden;
  background: var(--bg-card);
}
.ws-strip-resizer { width: 4px; flex-shrink: 0; cursor: col-resize; background: transparent; transition: background 0.15s; }
.ws-strip-resizer:hover { background: color-mix(in srgb, var(--accent) 25%, transparent); }
.ws-strip-item { border-bottom: 1px solid var(--border); }
.ws-strip-head { display: flex; align-items: center; gap: 1px; padding: 5px 6px; }
.ws-strip-tab-btn {
  flex: 1; text-align: left; background: none; border: none; cursor: pointer;
  font-size: 12px; padding: 2px 0; color: var(--text-muted);
  font-family: var(--font-ui); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  transition: color .12s;
}
.ws-strip-tab-btn:hover { color: var(--text); }
.ws-strip-item--active .ws-strip-tab-btn { color: var(--accent); font-weight: 500; }
.ws-strip-item--locked .ws-strip-tab-btn { opacity: 0.45; cursor: pointer; }
.ws-strip-add-btn, .ws-strip-section-btn, .ws-strip-expand-btn {
  flex-shrink: 0; background: none; border: none; cursor: pointer;
  color: var(--text-muted); font-size: 11px; padding: 2px 3px; border-radius: 3px;
  line-height: 1; font-family: var(--font-ui); transition: color .12s, background .12s;
}
.ws-strip-add-btn:hover, .ws-strip-section-btn:hover, .ws-strip-expand-btn:hover {
  color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, var(--bg-card));
}
.ws-strip-collapse-btn {
  flex-shrink: 0; background: none; border: none; cursor: pointer;
  color: var(--text-muted); font-size: 9px; padding: 2px 2px; line-height: 1;
  font-family: var(--font-ui); opacity: 0.6;
}
.ws-strip-collapse-btn:hover { opacity: 1; color: var(--text); }
.ws-strip-item--collapsed .ws-strip-cards { display: none; }
.ws-strip-cards { padding: 2px 0 5px 0; }
.ws-strip-card {
  display: flex; align-items: baseline; gap: 4px;
  padding: 3px 8px 3px 10px; font-size: 12px; cursor: pointer;
  color: var(--text-muted); font-family: var(--font-ui); overflow: hidden;
}
.ws-strip-card:hover { color: var(--text); background: color-mix(in srgb, var(--accent) 6%, var(--bg-card)); }
.ws-strip-card-num { flex-shrink: 0; min-width: 14px; font-size: 11px; }
.ws-strip-card-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ws-strip-empty { padding: 3px 10px; font-size: 12px; color: var(--text-muted); font-style: italic; }
.ws-strip-bible { flex-shrink: 0; padding: 8px; margin-top: auto; border-top: 1px solid var(--border); }
/* Side panel: hidden until a tab is active */
.ws-panel.ws-left { flex-shrink: 0; width: 0; transition: width .18s ease; border-right: 1px solid var(--border); }
.ws-panel.ws-left.ws-side-open { width: 320px; font-size: 12px; }
.ws-panel.ws-left input,
.ws-panel.ws-left textarea,
.ws-panel.ws-left select,
.ws-panel.ws-left button { font-size: 12px !important; }
.ws-panel.ws-left .ws-note-title,
.ws-panel.ws-left .ws-char-name-input,
.ws-panel.ws-left .ws-tl-title-inp { font-weight: 600 !important; color: var(--accent) !important; }

/* Active strip card highlight */
.ws-strip-card--group { cursor: default; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); padding-top: 8px; padding-left: 8px; display: flex; align-items: center; }
.ws-strip-card--group:hover { background: transparent; color: var(--text-muted); }
.ws-strip-group-input { background: transparent; border: none; outline: none; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); padding: 0; width: 100%; cursor: text; font-family: inherit; min-width: 0; }
.ws-strip-group-input:focus { color: var(--text); }
.ws-strip-group-input::placeholder { color: var(--text-muted); opacity: 0.5; text-transform: uppercase; }
.ws-strip-card--active { background: color-mix(in srgb, var(--accent) 12%, var(--bg-card)); color: var(--accent) !important; }
.ws-strip-card--active .ws-strip-card-num,
.ws-strip-card--active .ws-strip-card-name { color: var(--accent); }

/* Strip drag grip */
.ws-strip-grip { flex-shrink: 0; cursor: grab; color: var(--text-muted); opacity: 0; font-size: 10px; line-height: 1; }
.ws-strip-card--sortable:hover .ws-strip-grip { opacity: 0.5; }
.ws-strip-card--sortable.ws-tl-dragging { opacity: 0.4; }
.ws-strip-card--sortable.ws-tl-drop-above { border-top: 2px solid var(--accent); }
.ws-strip-card--sortable.ws-tl-drop-below { border-bottom: 2px solid var(--accent); }

/* Single-card mode: .ws-pane.active is (0,2,0); must beat it with (0,3,0) to switch to flex */
.ws-pane.active.ws-pane--single-card { display: flex; flex-direction: column; overflow: hidden; }
/* Flex chain: toolbar stays fixed-height; everything else fills down */
/* Only show the manual tab in single-card mode — hide AI/style-check tabs regardless of their inline display state */
.ws-pane--single-card #ptab-ai,
.ws-pane--single-card #ptab-stylecheck { display: none !important; }
/* Group view: hide AI/style-check tab button and body */
.ws-pane--group-view .ws-pane-tab[data-tab="ai"],
.ws-pane--group-view .ws-pane-tab[data-tab="stylecheck"] { display: none !important; }
.ws-pane--group-view #ptab-ai,
.ws-pane--group-view #ptab-stylecheck { display: none !important; }
.ws-group-header { display: flex; align-items: center; gap: 6px; padding: 6px 12px 4px; }
.ws-group-header-name { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ws-group-header-del { margin-left: auto; }
.ws-pane--single-card .ws-pane-tab-body { flex: 1; display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.ws-pane--single-card .ws-pane-tab-body > .ws-toolbar { flex-shrink: 0; }
.ws-pane--single-card .ws-summary-form,
.ws-pane--single-card .ws-char-list,
.ws-pane--single-card .ws-chapter-list,
.ws-pane--single-card #location-list,
.ws-pane--single-card #tl-list,
.ws-pane--single-card #thread-list,
.ws-pane--single-card #storyline-list { flex: 1; display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.ws-pane--single-card .ws-card--active,
.ws-pane--single-card .ws-field-group.ws-card--active { flex: 1; display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.ws-pane--single-card .ws-card--active .ws-note-head { flex-shrink: 0; }
/* Chapters: fix header rows so only desc-row grows */
.ws-pane--single-card .ws-card--active .ws-chapter-head,
.ws-pane--single-card .ws-card--active .ws-ch-sidebar-actions { flex-shrink: 0; }
/* Title page has no textarea — don't stretch it */
.ws-pane--single-card .ws-chapter-link[data-idx="-1"].ws-card--active { flex: 0 0 auto; }
.ws-pane--single-card .ws-card--active .ws-ch-desc-row { flex: 1; display: flex !important; flex-direction: column; min-height: 0; }
/* Single-field note body: last row fills remaining space */
.ws-pane--single-card .ws-card--active .ws-note-body { flex: 1; display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.ws-pane--single-card .ws-card--active .ws-note-body .ws-note-row:last-child { flex: 1; display: flex; flex-direction: column; min-height: 0; }
/* Multi-field bodies (char, loc): body scrolls; each textarea is fixed height */
.ws-pane--single-card .ws-card--active .ws-char-body,
.ws-pane--single-card .ws-card--active .ws-loc-body { flex: 1; display: flex; flex-direction: column; min-height: 0; overflow-y: auto; }
.ws-pane--single-card .ws-card--active .ws-char-body .ws-note-row:last-child,
.ws-pane--single-card .ws-card--active .ws-loc-body .ws-note-row:last-child { flex: 0 0 auto; }
.ws-pane--single-card .ws-card--active .ws-char-body textarea,
.ws-pane--single-card .ws-card--active .ws-loc-body textarea { flex: none !important; height: 86px !important; max-height: 86px !important; }
/* Bypass click-to-edit preview in single-card mode: hide preview, force textarea visible */
.ws-pane--single-card .ws-card--active .ws-note-preview-outer,
.ws-pane--single-card .ws-field-group.ws-card--active .ws-note-preview-outer { display: none !important; }
.ws-pane--single-card .ws-card--active textarea,
.ws-pane--single-card .ws-field-group.ws-card--active textarea { display: block !important; flex: 1; min-height: 60px; resize: none; height: auto !important; max-height: none !important; overflow-y: auto; }
/* ws-ta-wrap breaks the flex chain — restore it in single-card mode */
.ws-pane--single-card .ws-field-group.ws-card--active .ws-ta-wrap { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.ws-pane--single-card .ws-field-group.ws-card--active .ws-ta-wrap textarea { flex: 1; height: 0 !important; min-height: 60px; }

/* Single-card mode: hide everything except the selected card */
.ws-pane.ws-pane--single .ws-char-card:not(.ws-card--active),
.ws-pane.ws-pane--single .ws-char-section-card,
.ws-pane.ws-pane--single .ws-chapter-link:not(.ws-card--active),
.ws-pane.ws-pane--single .ws-ch-section-card,
.ws-pane.ws-pane--single .ws-location-card:not(.ws-card--active),
.ws-pane.ws-pane--single .ws-loc-section-card,
.ws-pane.ws-pane--single .ws-tl-event-card:not(.ws-card--active),
.ws-pane.ws-pane--single .ws-tl-section-card,
.ws-pane.ws-pane--single .ws-thread-card:not(.ws-card--active),
.ws-pane.ws-pane--single .ws-storyline-card:not(.ws-card--active) { display: none !important; }
.ws-pane.ws-pane--single .ws-stats-row,
.ws-pane.ws-pane--single .ws-list-add-bottom { display: none; }
.ws-right { flex: 1; }
.ws-divider { width: 1px; background: var(--border); flex-shrink: 0; position: relative; }
.ws-collapse-btn {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 18px; height: 48px;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 0 6px 6px 0;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  font-size: 14px; color: var(--text-muted); z-index: 10; padding: 0; line-height: 1;
  box-shadow: 2px 0 6px rgba(0,0,0,.08);
  transition: background .15s, color .15s, box-shadow .15s;
}
.ws-collapse-btn:hover { color: var(--accent); background: color-mix(in srgb, var(--accent) 6%, var(--bg-card)); box-shadow: 2px 0 10px rgba(0,0,0,.13); }
.ws-layout.ws-left-collapsed .ws-left-area { flex: 0 0 0; width: 0; overflow: hidden; }
.ws-layout.ws-left-collapsed .ws-collapse-btn { border-radius: 4px; }

/* Story Bible sticky button bar */
.ws-bible-bar {
  flex-shrink: 0;
  padding: 8px 10px;
  border-top: 1px solid var(--border);
  background: var(--bg-card);
}
.ws-bible-btn {
  width: 100%;
  font-size: 12px;
  font-weight: 700;
  justify-content: center;
  background: color-mix(in srgb, var(--accent) 12%, var(--bg-card));
  border-color: color-mix(in srgb, var(--accent) 30%, var(--border));
  color: var(--accent);
}
.ws-bible-btn--locked { opacity: 0.4; }
.ws-bible-btn--locked:hover { opacity: 0.55; }
.ws-bible-btn:hover {
  background: color-mix(in srgb, var(--accent) 20%, var(--bg-card));
  border-color: var(--accent);
  color: var(--accent);
}

/* Story Bible overlay/modal */
.sb-overlay {
  position: fixed; inset: 0;
  z-index: 1400;
  pointer-events: none;
}
.sb-modal {
  pointer-events: all;
  position: fixed;
  width: min(1100px, 96vw);
  max-height: calc(100vh - 40px);
  min-width: 380px;
  min-height: 280px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0,0,0,.22);
  display: flex; flex-direction: column;
  overflow: hidden;
}
.sb-modal--max {
  inset: 0 !important; width: 100vw !important; max-height: 100vh !important;
  border-radius: 0;
}
/* Resize handles */
.sb-resize-handle { position: absolute; z-index: 10; }
.sb-resize-n  { top: 0;    left: 8px;  right: 8px; height: 5px; cursor: n-resize; }
.sb-resize-s  { bottom: 0; left: 8px;  right: 8px; height: 5px; cursor: s-resize; }
.sb-resize-e  { right: 0;  top: 8px;   bottom: 8px; width: 5px; cursor: e-resize; }
.sb-resize-w  { left: 0;   top: 8px;   bottom: 8px; width: 5px; cursor: w-resize; }
.sb-resize-ne { top: 0; right: 0;   width: 10px; height: 10px; cursor: ne-resize; }
.sb-resize-nw { top: 0; left: 0;    width: 10px; height: 10px; cursor: nw-resize; }
.sb-resize-se { bottom: 0; right: 0; width: 10px; height: 10px; cursor: se-resize; }
.sb-resize-sw { bottom: 0; left: 0;  width: 10px; height: 10px; cursor: sw-resize; }
.sb-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 18px;
  border-bottom: 1px solid var(--border);
  background: var(--bg); border-radius: 12px 12px 0 0;
  cursor: grab; user-select: none;
}
.sb-header:active { cursor: grabbing; }
.sb-title { font-size: 16px; font-weight: 600; color: var(--text); }
.sb-search-input {
  width: 160px; font-size: 12px; padding: 5px 12px;
  border: 1px solid var(--border); border-radius: 999px;
  background: var(--bg); color: var(--text); font-family: var(--font-ui);
}
.sb-search-input:focus { outline: none; border-color: var(--accent); width: 200px; transition: width .2s; }
.sb-body {
  display: grid; grid-template-columns: 240px 1fr;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}
.sb-body--list-collapsed { grid-template-columns: 24px 1fr; }
.sb-list {
  border-right: 1px solid var(--border);
  display: flex; flex-direction: column;
  overflow: hidden; position: relative;
}
.sb-list-content { flex: 1; overflow-y: auto; padding: 8px 0; }
.sb-body--list-collapsed .sb-list-content { display: none; }
.sb-list-fold-btn {
  position: absolute; top: 50%; right: -10px; transform: translateY(-50%);
  background: var(--bg-card); border: 1px solid var(--border); border-radius: 50%;
  color: var(--text-muted); font-size: 11px; cursor: pointer;
  width: 20px; height: 20px; display: flex; align-items: center; justify-content: center;
  line-height: 1; z-index: 2; padding: 0;
}
.sb-list-fold-btn:hover { color: var(--accent); border-color: var(--accent); }
.sb-body--list-collapsed .sb-list-fold-btn { right: -10px; }
.sb-list-section { }
.sb-list-section-head {
  padding: 10px 14px 4px;
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .07em; color: var(--accent);
}
.sb-list-section-head--toggle {
  display: flex; justify-content: space-between; align-items: center;
  cursor: pointer; padding-right: 10px;
}
.sb-list-section-head--toggle:hover { opacity: .75; }
.sb-sec-arrow { font-size: 9px; }
.sb-list-section-body--collapsed { display: none; }
.sb-list-subsection { padding: 6px 16px 2px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); margin-top: 4px; display: flex; align-items: center; gap: 5px; }
.sb-list-subsection--toggle { cursor: pointer; }
.sb-list-subsection--toggle:hover { opacity: .75; }
.sb-sub-arrow { font-size: 9px; flex-shrink: 0; }
.sb-list-sub-body--collapsed { display: none; }
.sb-list-item {
  display: block; width: 100%;
  text-align: left; padding: 6px 16px;
  font-size: 12px; color: var(--text);
  background: none; border: none; cursor: pointer;
  border-left: 2px solid transparent;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sb-list-item:hover { background: var(--bg); border-left-color: var(--accent); }
.sb-list-item--active { background: var(--bg); border-left-color: var(--accent); font-weight: 600; color: var(--accent); }
.sb-list-item--chtl {
  font-size: 12px; font-weight: 700; color: var(--accent);
  padding: 10px 16px; border-left: 3px solid var(--accent);
  background: var(--bg); border-bottom: 1px solid var(--border);
  margin-bottom: 4px;
}
.sb-list-item--chtl:hover { opacity: .85; }
.sb-list-item--chtl.sb-list-item--active { background: color-mix(in srgb, var(--accent) 10%, var(--bg)); }
.sb-detail {
  padding: 20px 24px;
  overflow-y: auto;
}
.sb-hint { color: var(--text-muted); font-size: 13px; margin: 0; }
.sb-detail-type {
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .07em; color: var(--accent); margin-bottom: 4px;
}
.sb-detail-name { margin: 0 0 16px; font-size: 22px; color: var(--text); }
.sb-field {
  display: grid;
  grid-template-columns: 110px 1fr;
  align-items: baseline;
  gap: 0 12px;
  margin-bottom: 10px; font-size: 13px; line-height: 1.6;
  color: var(--text); white-space: pre-wrap; word-break: break-word;
}
.sb-label {
  grid-column: 1;
  font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em;
  color: var(--text-muted); text-align: right;
}
.sb-section-head {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .07em; color: var(--text-muted);
  margin: 20px 0 8px; border-top: 1px solid var(--border); padding-top: 14px;
}
.sb-links-group { margin-bottom: 10px; font-size: 12px; }
.sb-links-group strong { color: var(--text-muted); font-size: 11px; text-transform: uppercase; letter-spacing: .05em; }
.sb-links { margin: 4px 0 0; padding-left: 16px; list-style: disc; }
.sb-links li { margin-bottom: 3px; }
.sb-link {
  background: none; border: none; padding: 0; cursor: pointer;
  color: var(--accent); font-size: 13px; text-decoration: underline;
  text-align: left;
}
.sb-link:hover { opacity: .75; }
.sb-goto-btn {
  display: inline-block; margin: 2px 0 14px;
  background: none; border: 1px solid var(--border); border-radius: 6px;
  padding: 4px 10px; font-size: 12px; color: var(--accent); cursor: pointer;
  font-family: var(--font-ui);
}
.sb-goto-btn:hover { background: var(--bg); }

.cookie-banner {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 1800;
  background: var(--bg-card); border-top: 1px solid var(--border);
  box-shadow: 0 -2px 12px rgba(0,0,0,.08);
  padding: 12px 24px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
}
.cookie-banner p { flex: 1; margin: 0; font-size: 13px; color: var(--text); min-width: 180px; }
.cookie-banner-link { color: var(--accent); }
.cookie-banner-btns { display: flex; gap: 8px; flex-shrink: 0; }
.cookie-btn {
  padding: 6px 14px; font-size: 12px; font-family: var(--font-ui);
  border-radius: var(--radius); cursor: pointer; border: 1.5px solid var(--text);
  font-weight: 600; white-space: nowrap; background: transparent; color: var(--text);
}
.cookie-btn:hover { background: var(--bg); }
@media (max-width: 600px) {
  .cookie-banner { padding: 12px 16px; }
  .cookie-banner p { font-size: 12px; }
}

.sb-restore-pill {
  position: fixed; bottom: 20px; right: 24px; z-index: 1500;
  background: var(--accent); color: #fff;
  border: none; border-radius: 20px; padding: 8px 18px;
  font-size: 13px; font-weight: 600; cursor: pointer;
  box-shadow: 0 4px 16px rgba(0,0,0,.25);
  font-family: var(--font-ui);
}
.sb-restore-pill:hover { opacity: .9; }

.sb-status { font-size: 11px; font-weight: 600; padding: 1px 6px; border-radius: 8px; }
.sb-status--open     { background: #dcfce7; color: #166534; }
.sb-status--resolved { background: #dbeafe; color: #1e40af; }
.sb-status--dropped  { background: #f3f4f6; color: #6b7280; }

/* Story Bible: mobile layout */
@media (max-width: 700px) {
  .sb-overlay { padding: 0; align-items: stretch; }
  .sb-modal { width: 100%; max-height: 100%; border-radius: 0; height: 100%; }

  /* Header: tighten up, remove desktop-only drag cursor */
  .sb-header { padding: 10px 14px; cursor: default; }
  .sb-title { font-size: 14px; }
  .sb-header .btn-ghost { padding: 2px 6px; font-size: 11px; }
  .sb-search-input { width: 80px; }
  .sb-search-input:focus { width: 80px; transition: none; }

  /* Hide desktop-only controls */
  #btn-maximise-bible,
  .sb-resize-handle,
  .sb-list-fold-btn { display: none; }

  /* Body: single column, rows fill available height so list can scroll */
  .sb-body { grid-template-columns: 1fr; grid-template-rows: 1fr; }
  .sb-list { border-right: none; border-bottom: 1px solid var(--border); }

  /* List/detail drill-down: show one at a time */
  .sb-body--detail .sb-list { display: none; }
  .sb-body--detail .sb-detail { display: block; }
  .sb-body:not(.sb-body--detail) .sb-detail { display: none; }

  /* Detail: tighter padding, narrower label column */
  .sb-detail { padding: 14px 16px; }
  .sb-field { grid-template-columns: 80px 1fr; }

  .sb-back-btn {
    display: inline-flex; align-items: center; gap: 6px;
    margin-bottom: 14px; background: none; border: none;
    color: var(--accent); font-size: 13px; font-weight: 600;
    cursor: pointer; padding: 0;
  }
}
@media (min-width: 701px) {
  .sb-back-btn { display: none; }
}

/* ── Story Bible: Chapter Timeline ───────────────────────────────────── */
.sb-chtl-back { display: none; padding: 10px 14px 0; }
@media (max-width: 700px) { .sb-chtl-back { display: block; } }
.sb-chtl { padding: 16px 0 16px 16px; }
.sb-chtl-scroll { overflow-x: auto; overflow-y: visible; }
.sb-chtl-grid { display: grid; gap: 0; }

.sb-chtl-ch-head {
  padding: 8px 10px 10px;
  font-size: 12px; font-weight: 700; color: var(--text);
  border-bottom: 2px solid var(--accent);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  position: sticky; top: 0; background: var(--bg-card); z-index: 1;
}

.sb-chtl-section-band {
  padding: 6px 10px;
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  color: var(--text-muted); background: var(--bg);
  border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
  margin-top: 4px;
}

.sb-chtl-cell {
  padding: 8px 6px; border-right: 1px solid var(--border);
  display: flex; flex-direction: column; gap: 6px; vertical-align: top;
  min-height: 48px;
}
.sb-chtl-cell:last-child { border-right: none; }
.sb-chtl-cell--empty { background: none; }

.sb-chtl-event {
  background: var(--bg); border: 1px solid var(--border); border-radius: 6px;
  padding: 6px 8px; cursor: pointer; transition: border-color .15s;
}
.sb-chtl-event:hover { border-color: var(--accent); }

.sb-chtl-event-date {
  font-size: 10px; color: var(--text-muted); margin-bottom: 2px;
}
.sb-chtl-event-title { font-size: 12px; color: var(--text); line-height: 1.4; }

.sb-chtl-dots { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 5px; }
.sb-chtl-dot {
  width: 10px; height: 10px; border-radius: 50%;
  display: inline-block; flex-shrink: 0;
}

/* ── Character name autocomplete dropdown ─────────────────────────────── */
.ws-char-ac-dropdown {
  position: absolute;
  top: 100%; left: 0; right: 0;
  z-index: 500;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0,0,0,.15);
  list-style: none;
  margin: 2px 0 0;
  padding: 4px 0;
  max-height: 200px;
  overflow-y: auto;
}
.ws-char-ac-item {
  padding: 5px 12px;
  font-size: 12px;
  color: var(--text);
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ws-char-ac-item:hover,
.ws-char-ac-item--active {
  background: var(--bg);
  color: var(--accent);
}

/* ── Ambiguous character name flags ──────────────────────────────────── */
.ws-char-flag {
  display: flex; flex-wrap: wrap; gap: 4px;
  margin-top: 4px;
}
.ws-char-flag-chip {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px; padding: 2px 6px;
  background: #fef9c3; border: 1px solid #fde047;
  border-radius: 10px; color: #713f12;
}
.ws-char-flag-warn { font-size: 11px; }
.ws-char-flag-use {
  background: none; border: 1px solid #a16207;
  border-radius: 4px; padding: 0 4px; font-size: 10px;
  color: #713f12; cursor: pointer; font-weight: 600;
}
.ws-char-flag-use:hover { background: #fef08a; }
.ws-char-flag-keep {
  background: none; border: none; padding: 0 2px;
  font-size: 11px; color: #a16207; cursor: pointer; line-height: 1;
}
.ws-char-flag-keep:hover { color: #713f12; }

/* Tabs — 2 rows of 5; drop to 4 or 3 cols when the left panel is narrow */
.ws-tabs {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  column-gap: 4px;
  row-gap: 8px;
  padding: 8px;
  background: var(--bg-card);
  flex-shrink: 0;
}
@container (max-width: 380px) {
  .ws-tabs { grid-template-columns: repeat(4, 1fr); }
}
@container (max-width: 300px) {
  .ws-tabs { grid-template-columns: repeat(3, 1fr); }
}
.ws-tab {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  padding: 5px 6px; font-size: clamp(10px, 2.4cqi, 12px); font-family: var(--font-ui);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  background: var(--bg); border: 1px solid var(--border); border-radius: 20px;
  color: var(--text-muted); cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.ws-tab-tier {
  font-size: 9px; font-weight: 600; letter-spacing: .04em; line-height: 1; text-transform: uppercase; opacity: .85;
}
.ws-tab-tier--free    { color: #bbb; }
.ws-tab-tier--basic   { color: var(--accent); }
.ws-tab-tier--premium { color: var(--premium); }
.ws-tab-tier--plus    { color: var(--plus); }
.ws-tab:hover { color: var(--text); border-color: var(--accent); }
.ws-tab:hover .ws-tab-tier { opacity: 1; }
.ws-tab.active { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 500; }
.ws-tab.active .ws-tab-tier { color: rgba(255,255,255,.75); }
.ws-tab--locked { opacity: 0.4; cursor: pointer; }
.ws-tab--locked:hover { opacity: 0.55; background: none; border-color: var(--border); }

/* Free plan upgrade CTA inside locked panel */
.ws-free-upgrade-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 32px 34px 32px 20px;
  gap: 10px;
  color: var(--text-muted);
  position: relative;
}
.ws-free-upgrade-icon { font-size: 28px; }
.ws-free-upgrade-cta h3 { margin: 0; font-size: 15px; color: var(--text); font-weight: 600; }
.ws-free-upgrade-cta p { margin: 0; font-size: 12px; max-width: 240px; }
.ws-free-upgrade-cta ul { text-align: left; font-size: 12px; margin: 4px 0 0; padding-left: 18px; line-height: 1.7; }

/* Panel body */
.ws-panel-body {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
  container-type: inline-size;
}
/* Left panel responsive scaling — scoped so header buttons are unaffected */
.ws-panel-body .btn-sm { font-size: clamp(10px, 2.4cqi, 12px); }
.ws-panel-body .ws-note-title { font-size: clamp(12px, 3cqi, 14px); }
.ws-panel-body .ws-note-card,
.ws-panel-body .ws-char-card { padding: clamp(8px, 2.5cqi, 12px); }
.ws-panel-body .ws-toolbar { gap: clamp(4px, 1.5cqi, 8px); }
.ws-pane {
  display: none;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 16px;
}
.ws-pane.active { display: block; }
#pane-coach { padding: 12px; }
#pane-coach.active {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-sizing: border-box;
}
.ws-coach-layout {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}
.ws-coach-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  flex-shrink: 0;
}
.ws-coach-select {
  flex: 1 1 auto;
  min-width: 140px;
  font-size: 11px;
  font-family: inherit;
  padding: 3px 22px 3px 10px;
  border: 1.5px solid var(--border);
  border-radius: 20px;
  background-color: var(--bg-card);
  color: var(--text);
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  transition: border-color .15s;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0,0,10,6'%3E%3Cpath%20fill='%23999'%20d='M0,0h10L5,6z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  background-size: 8px 5px;
}
.ws-coach-select:hover { border-color: var(--accent); }
.ws-coach-disclaimer { font-size: 11px; color: var(--text-muted); margin: 2px 0 0; flex-shrink: 0; }
.ws-coach-output {
  flex: 1 1 0;
  min-height: 0;
  height: 100%;
  overflow-y: auto;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 14px;
  white-space: pre-wrap;
  font-size: 12px;
  line-height: 1.5;
  color: var(--text);
}
.ws-coach-output strong { font-weight: 600; }
.ws-coach-output em { font-style: italic; }
.ws-coach-history {
  flex: 1 1 0;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px;
}
.ws-coach-history-group {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-card);
  padding: 10px 12px;
}
.ws-coach-history-title {
  margin: 0 0 8px;
  font-size: 12px;
  font-weight: 700;
  color: var(--text);
}
.ws-coach-history-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ws-coach-history-entry {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg);
  padding: 8px 10px;
}
.ws-coach-history-entry-time {
  font-size: 11px;
  font-weight: 600;
  color: var(--accent);
  margin-bottom: 4px;
}
.ws-coach-history-entry-meta {
  font-size: 11px;
  color: var(--text-muted);
  margin-bottom: 6px;
}
.ws-coach-history-entry-text {
  font-size: 12px;
  line-height: 1.5;
  color: var(--text);
  white-space: pre-wrap;
}
.ws-coach-history-empty {
  margin: 0;
  font-size: 12px;
  color: var(--text-muted);
}
.ws-field-group--coach-indicator { flex-shrink: 0; }
@media (max-width: 760px) {
  .ws-coach-actions {
    grid-template-columns: 1fr;
  }
}

/* Shared helpers */
.ws-loading { color: var(--text-muted); font-size: 13px; padding: 20px 0; }
.ws-empty   { color: var(--text-muted); font-size: 13px; padding: 20px 0; }
.ws-error   { color: var(--danger); font-size: 13px; padding: 20px 0; }
.ws-toolbar { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; }
.ws-list-add-bottom { padding: 8px 0 4px; display: flex; gap: 8px; }
.ws-pane-search { flex-shrink: 0; width: 110px; padding: 3px 10px; font-size: 12px; font-family: var(--font-ui); border: 1px solid var(--border); border-radius: 999px; background: var(--bg); color: var(--text); outline: none; transition: border-color .15s, width .2s; align-self: center; }
.ws-pane-search:focus { border-color: var(--accent); width: 140px; }
.ws-pane-search::placeholder { color: var(--text-muted); }
.ws-search-excerpt { font-size: 11px; color: var(--text-muted); padding: 3px 8px 4px; margin: 2px 0 4px; background: color-mix(in srgb, var(--accent) 5%, var(--bg-card)); border-left: 2px solid var(--accent); border-radius: 0 4px 4px 0; }
.ws-search-excerpt mark { background: color-mix(in srgb, var(--accent) 25%, #fff); color: var(--text); border-radius: 2px; padding: 0 1px; font-style: normal; }
.ws-save-indicator { font-size: 12px; color: var(--text-muted); transition: color .2s; display: flex; align-items: center; gap: 5px; }
.ws-save-indicator--autosaved { color: var(--accent); }
.autosave-time { font-weight: 500; }

/* Loading spinner */
.ws-spinner {
  display: inline-block; width: 12px; height: 12px; vertical-align: middle; margin-right: 4px;
  border: 2px solid var(--text-muted); border-radius: 50%;
  border-top-color: var(--accent); animation: ws-spin .8s linear infinite;
}
@keyframes ws-spin { to { transform: rotate(360deg); } }

.ws-section-head { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); margin: 20px 0 8px; }

/* Stats row */
.ws-stats-row { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; padding: 10px 12px; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); }
.ws-stat { font-size: 13px; color: var(--text-muted); }
.ws-stat strong { color: var(--text); }

/* Chapter list */
.ws-chapter-list { display: flex; flex-direction: column; gap: 4px; margin-bottom: 16px; }
.ws-chapter-item { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 8px 12px; }
.ws-chapter-link { cursor: pointer; transition: background 0.1s; }
.ws-chapter-link:hover { background: var(--bg); border-color: var(--accent); }
.ws-chapter-head { display: flex; align-items: baseline; gap: 6px; min-width: 0; }
.ws-chapter-num  { font-size: 11px; color: var(--text-muted); min-width: 18px; }
.ws-chapter-title {
  flex: 1 1 auto;
  min-width: 0;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  font-weight: 600;
  color: var(--accent);
}
.ws-chapter-meta  { font-size: 11px; color: #aaa; white-space: nowrap; text-align: right; line-height: 1.25; }
.ws-chapter-active { background: var(--bg) !important; border-color: var(--accent) !important; }

/* Title page stats panel */
.ws-tp-stats { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 1px; margin-top: 8px; background: var(--border); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.ws-tp-stat { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 2px; padding: 14px 8px; background: var(--bg-card); }
.ws-tp-stat-num { font-size: 22px; font-weight: 700; color: var(--accent); line-height: 1; }
.ws-tp-stat-label { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .05em; text-align: center; }
@media (max-width: 760px) { .ws-tp-stats { grid-template-columns: 1fr 1fr; } }

/* Group filter bar */
.ws-group-filter-bar { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 0 4px; }
.ws-group-filter-btn { font-size: 11px; font-weight: 500; padding: 3px 12px; border-radius: 20px; border: 1.5px solid var(--border); background: none; color: var(--text-muted); cursor: pointer; font-family: var(--font-ui); transition: all .12s; }
.ws-group-filter-btn:hover { border-color: var(--accent); color: var(--accent); }
.ws-group-filter-btn--active { border-color: var(--accent); background: var(--accent); color: #fff; }

/* Group picker badge + dropdown */
.ws-char-head-meta { display: flex; align-items: center; gap: 6px; margin-top: 3px; }
.ws-card-group-row { flex-basis: 100%; display: flex; align-items: center; gap: 6px; padding-top: 4px; }
.ws-card-group-row .ws-group-btn { width: 100%; text-align: left; overflow: hidden; text-overflow: ellipsis; }
.ws-group-btn { font-size: 10px; font-weight: 500; padding: 1px 8px; border-radius: 20px; border: 1px solid var(--border); color: var(--text-muted); white-space: nowrap; line-height: 1.6; }
.ws-group-btn:hover { border-color: var(--accent); color: var(--accent); }
.ws-group-drop { position: fixed; z-index: 600; background: var(--bg-card); border: 1.5px solid var(--border); border-radius: 12px; box-shadow: 0 4px 18px rgba(0,0,0,.13); min-width: 140px; overflow: hidden; display: flex; flex-direction: column; }
.ws-group-drop-opt { padding: 7px 14px; font-size: 12px; font-weight: 500; text-align: left; background: none; border: none; color: var(--text); cursor: pointer; white-space: nowrap; }
.ws-group-drop-opt:hover { background: var(--bg); }
.ws-group-drop-opt--active { color: var(--accent); font-weight: 700; }

/* Chapter status badge */
.ws-ch-status { padding: 1px 6px; font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; border-radius: 10px; border: 1px solid transparent; background: transparent; cursor: pointer; white-space: nowrap; line-height: 1.5; }
.ws-ch-status--none   { color: var(--text-muted); border-color: transparent; background: transparent; }
.ws-ch-status--none:hover { border-color: var(--border); }
.ws-ch-status--draft   { color: #92400e; border-color: #fcd34d; background: #fefce8; }
.ws-ch-status--revised { color: #1e40af; border-color: #93c5fd; background: #eff6ff; }
.ws-ch-status--final   { color: #166534; border-color: #86efac; background: #f0fdf4; }
.ws-ch-status--open     { color: #166534; border-color: #86efac; background: #dcfce7; }
.ws-ch-status--resolved { color: #1e40af; border-color: #93c5fd; background: #dbeafe; }
.ws-ch-status--dropped  { color: #6b7280; border-color: #d1d5db; background: #f3f4f6; }

.ws-ch-sidebar-actions { display: flex; gap: 2px; margin-top: 4px; }
.ws-ch-rename-input { font-size: 13px; padding: 2px 6px; border: 1px solid var(--accent); border-radius: 3px; width: 100%; box-sizing: border-box; background: var(--bg-card); color: var(--text); }
.btn-xs { padding: 2px 6px; font-size: 11px; }

/* Chapter description toggle */
.ws-ch-desc-btn.ws-ch-desc-active { color: var(--accent) !important; }
.ws-ch-desc-row { display: none; margin-top: 6px; }
.ws-ch-desc-row.open { display: block; }

/* ── Scene-break divider inside the editor ──────────────────────────────── */
.ws-scene-break-line {
  text-align: center;
  color: var(--text-muted);
  letter-spacing: 0.4em;
  margin: 0.6em 0;
  user-select: none;
  cursor: default;
  font-weight: 600;
}

/* ── Scene-break style selector in the top bar ──────────────────────────── */
.ws-scene-style-select {
  font: 12px/1 var(--font-ui);
  color: var(--text);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 3px 6px;
  cursor: pointer;
}

/* ── Scenes nested under a chapter in the left panel ─────────────────────── */
.ws-scene-block { margin-top: 6px; }
.ws-scene-fold {
  background: none; border: none; cursor: pointer;
  font: 11px/1.2 var(--font-ui); color: var(--text-muted);
  padding: 2px 4px;
}
.ws-scene-fold:hover { color: var(--accent); }
.ws-scene-list { margin-top: 4px; display: flex; flex-direction: column; gap: 3px; }
.ws-scene-row { display: flex; align-items: center; gap: 6px; }
.ws-scene-jump {
  flex: 0 0 auto; width: 20px; height: 20px; line-height: 18px; text-align: center;
  border: 1px solid var(--border); border-radius: 50%; background: var(--bg-card);
  color: var(--text-muted); font: 11px/1 var(--font-ui); cursor: pointer;
}
.ws-scene-jump:hover { border-color: var(--accent); color: var(--accent); }
.ws-scene-desc-inp {
  flex: 1; min-width: 0; box-sizing: border-box;
  padding: 4px 7px; font: 12px/1.4 var(--font-ui); color: var(--text);
  background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius);
}
.ws-scene-desc-inp:focus { outline: none; border-color: var(--accent); }
.ws-scene-del { flex: 0 0 auto; color: var(--text-muted); line-height: 1; }
.ws-scene-del:hover { color: var(--danger, #b91c1c); border-color: var(--danger, #b91c1c); }
.ws-scene-del-confirm { gap: 6px; flex-wrap: wrap; font-size: 12px; }
.ws-scene-del-q { color: var(--text-muted); }
.ws-sd-text { color: var(--danger, #b91c1c); }
.ws-ch-ai-btn { color: var(--accent); }
.ws-ch-desc-ta {
  width: 100%; box-sizing: border-box;
  height: 72px; overflow-y: auto; resize: none;
  padding: 6px 8px; font: 12px/1.45 var(--font-ui); color: var(--text);
  background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius);
}
.ws-ch-desc-ta:focus { outline: 2px solid var(--accent); border-color: transparent; }
.ws-ch-desc-cta {
  margin: 10px 0 4px; padding: 8px 30px 8px 10px;
  border: 1px dashed var(--border); border-radius: var(--radius);
  background: color-mix(in srgb, var(--accent) 4%, transparent);
  font-size: 11px; color: var(--text-muted);
  position: relative;
}
.ws-ch-desc-cta-link { color: var(--accent); background: none; border: none; font: inherit; cursor: pointer; text-decoration: underline; padding: 0; }

.ws-upsell-close {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 18px;
  height: 18px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg-card);
  color: var(--text-muted);
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.ws-upsell-close:hover {
  color: var(--text);
  border-color: var(--accent);
}

/* Export dropdown */
.ws-export-menu { position: relative; }
.ws-export-dropdown {
  display: none; position: absolute; top: calc(100% + 4px); right: 0;
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: 0 4px 12px rgba(0,0,0,.1); min-width: 140px; z-index: 50;
}
.ws-export-dropdown.open { display: block; }
.ws-export-item {
  display: block; padding: 8px 14px; font-size: 13px; color: var(--text);
  text-decoration: none; white-space: nowrap;
}
.ws-export-item:hover { background: var(--bg); }

/* Right panel structure */
.ws-right-header {
  display: flex; align-items: center; gap: 8px; padding: 8px 12px;
  background: var(--bg-card); border-bottom: 1px solid var(--border);
  flex-shrink: 0; min-width: 0; min-height: 44px; height: auto; grid-column: 1 / -1;
}
.ws-right-body { flex: 1; overflow: hidden; display: flex; padding: 12px; }

/* Match chapter controls to left-panel pill style */
.ws-right-header .ws-carousel-label {
  display: block;
  padding: 4px 12px;
  border-radius: 20px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 500;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ws-right-header .btn-ghost.btn-sm {
  padding: 4px 12px;
  border-radius: 20px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 500;
}
.ws-right-header .btn-ghost.btn-sm:hover {
  border-color: var(--accent);
  color: var(--text);
}
/* Keep the top-bar controls on one line: every child except the chapter
   carousel holds its size and never wraps its label, so when the "Autosaved
   HH:MM" text appears the carousel truncates instead of the buttons wrapping
   onto a second row. (The mobile breakpoint still wraps intentionally.) */
.ws-right-header > button,
.ws-right-header > select,
.ws-right-header > .ws-save-indicator,
.ws-right-header > .ws-ms-stats { flex-shrink: 0; white-space: nowrap; }
.ws-right-header > .ws-ms-stats { margin-left: auto; }
.ws-right-header > .ws-toolbar-div { flex-shrink: 0; align-self: center; width: 1px; height: 20px; margin: 0 2px; background: var(--border); }

/* Chapter carousel */
.ws-carousel { display: flex; align-items: center; gap: 6px; flex: 1 1 auto; min-width: 0; max-width: 380px; }
.ws-carousel-label {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 100%;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ws-carousel-arrow {
  flex-shrink: 0; width: 26px; height: 26px; border: 1px solid var(--border);
  background: none; cursor: pointer; border-radius: 4px; font-size: 18px; line-height: 1;
  color: var(--text-muted); display: flex; align-items: center; justify-content: center; padding: 0;
}
.ws-carousel-arrow:hover:not(:disabled) { background: var(--bg); color: var(--text); }
.ws-carousel-arrow:disabled { opacity: 0.3; cursor: default; }
.ws-ctab {
  padding: 4px 12px; font-size: 12px; border-radius: 20px;
  border: 1px solid var(--border); background: none; cursor: pointer;
  white-space: nowrap; color: var(--text-muted); transition: all 0.1s; flex-shrink: 0;
}
.ws-ctab:hover { background: var(--bg); color: var(--text); }
.ws-ctab.active { background: var(--accent); color: white; border-color: var(--accent); }

/* Chapter editor (right panel) */
.ws-chapter-box { display: flex; flex-direction: column; flex: 1; min-height: 0; gap: 0; max-width: 760px; margin-left: auto; margin-right: auto; width: 100%; container-type: inline-size; }

/* ── Floating page ───────────────────────────────────────────────────────────
   The writing sheet lifts off the chrome with a soft shadow so the manuscript
   reads as a distinct surface — more focus, same calm palette. The shadow is
   tuned per theme: light themes get a faint warm shadow, dark a deeper near-
   black one (a black shadow looks dirty on light; a grey one vanishes on dark).
   Pairs with Paper: White for a "dark chrome, white page" look. */
.ws-chapter-box {
  border-radius: var(--radius);
  box-shadow: 0 6px 22px rgba(60, 50, 38, 0.10), 0 1px 3px rgba(60, 50, 38, 0.07);
}
:root[data-theme="sepia"] .ws-chapter-box {
  box-shadow: 0 6px 22px rgba(92, 68, 38, 0.14), 0 1px 3px rgba(92, 68, 38, 0.10);
}
:root[data-theme="dark"] .ws-chapter-box {
  box-shadow: 0 10px 34px rgba(0, 0, 0, 0.45), 0 2px 6px rgba(0, 0, 0, 0.32);
}

/* Title page editor */
.ws-title-page-editor {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 12px; padding: 60px 40px; text-align: center;
  border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-card);
}
.ws-tp-title {
  width: 100%; max-width: 560px; text-align: center; font-size: 36px; font-weight: 800;
  border: none; border-bottom: 2px solid var(--border); background: transparent;
  padding: 8px 0; color: var(--text); outline: none; letter-spacing: -0.01em;
}
.ws-tp-title:focus { border-bottom-color: var(--accent); }
.ws-tp-title::placeholder { color: var(--text-muted); font-weight: 400; font-size: 30px; }
.ws-tp-subtitle {
  width: 100%; max-width: 420px; text-align: center; font-size: 16px;
  border: none; border-bottom: 1px solid var(--border); background: transparent;
  padding: 6px 0; color: var(--text-muted); outline: none;
}
.ws-tp-subtitle:focus { border-bottom-color: var(--accent); }
.ws-tp-subtitle::placeholder { color: var(--text-muted); opacity: 0.6; }
.ws-tp-by { font-size: 13px; color: var(--text-muted); margin-top: 24px; }
.ws-tp-author {
  width: 100%; max-width: 300px; text-align: center; font-size: 15px;
  border: none; border-bottom: 1px solid var(--border); background: transparent;
  padding: 6px 0; color: var(--text-muted); outline: none;
}
.ws-tp-author:focus { border-bottom-color: var(--accent); }
.ws-tp-author::placeholder { color: var(--text-muted); opacity: 0.6; }
/* White paper: the title page swaps to a light background, so force readable dark
   text (otherwise dark-theme light text is near-invisible on white paper). */
.ws-title-page-editor.ws-tp-paper-white .ws-tp-title { color: #1a1a1a; }
.ws-title-page-editor.ws-tp-paper-white .ws-tp-subtitle,
.ws-title-page-editor.ws-tp-paper-white .ws-tp-author { color: #333; }
.ws-title-page-editor.ws-tp-paper-white .ws-tp-by { color: #555; }
.ws-title-page-editor.ws-tp-paper-white .ws-tp-title::placeholder,
.ws-title-page-editor.ws-tp-paper-white .ws-tp-subtitle::placeholder,
.ws-title-page-editor.ws-tp-paper-white .ws-tp-author::placeholder { color: #9a9a9a; opacity: 1; }
.ws-ch-title-row {
  display: flex; align-items: center; gap: 0; flex-shrink: 0;
}
.ws-ch-title-input {
  width: 100%; flex: 1; padding: 8px 12px; font-size: clamp(14px, 2.4cqi, 17px); font-weight: 600;
  font-family: var(--font-ui); border: 1px solid var(--border);
  border-radius: var(--radius) var(--radius) 0 0;
  background: var(--bg-card); color: var(--text); outline: none; flex-shrink: 0; box-sizing: border-box;
}
/* Match the body: no accent recolour on focus, for a uniform, calm surface. */
.ws-ch-title-input:focus { border-color: var(--border); }
.ws-ch-title-input::placeholder { color: var(--text-muted); font-weight: 400; }
.ws-ch-body {
  --para-indent: 0; --para-gap: 0.75em;
  flex: 1; width: 100%; overflow-y: auto;
  padding: 16px 20px; font-family: var(--ws-editor-font, 'Georgia', serif); font-size: clamp(13px, 2cqi, 15px);
  line-height: 1.8; color: var(--text); background: var(--bg-card);
  border: 1px solid var(--border); border-top: none;
  border-radius: 0 0 var(--radius) var(--radius);
  outline: none; box-sizing: border-box; white-space: pre-wrap; word-wrap: break-word;
  position: relative;
}
/* No focus recolour on the writing surface: the caret shows focus, and the body
   has no top border so an accent border only lit 3 sides and looked half-drawn. */
.ws-ch-body:focus { border-color: var(--border); }
#ws-pg-layer { position: absolute; top: 0; left: 0; right: 0; pointer-events: none; user-select: none; }
.ws-page-break-line { position: absolute; left: 0; right: 0; height: 0; border-top: 1px dashed var(--border); }
.ws-page-break-label { position: absolute; right: 0; top: -9px; font-size: 10px; font-family: system-ui, sans-serif; color: var(--text-muted); background: var(--bg-card); padding: 0 6px; }
.ws-ch-body p, .ws-ch-body > div { text-indent: var(--para-indent); margin-bottom: var(--para-gap); margin-top: 0; }
.ws-ch-body p:first-child, .ws-ch-body > div:first-child { text-indent: 0; }
.ws-ch-body .ws-para-blank { line-height: 0.75; margin-bottom: 0; }
.ws-ch-body h1, .ws-ch-body h2 { text-indent: 0; font-weight: 700; color: var(--text); margin: 0.9em 0 0.3em; line-height: 1.3; }
.ws-ch-body h1 { font-size: 1.5em; }
.ws-ch-body h2 { font-size: 1.22em; }
.ws-ch-body .ws-scene-break-line { cursor: pointer; }
.ws-ch-body .ws-scene-break-line:hover { color: var(--danger); }
.ws-ch-body .ws-verse-line {
  text-align: center; max-width: 22em; margin-left: auto; margin-right: auto;
  text-indent: 0;
}
.ws-sel-bar { position: fixed; z-index: 1000; display: flex; align-items: center; gap: 2px; padding: 4px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 4px 16px rgba(0,0,0,.18); }
.ws-sel-btn { font-size: 12px; padding: 4px 9px; border: none; background: none; color: var(--text); border-radius: 5px; cursor: pointer; white-space: nowrap; font-family: var(--font-ui); }
.ws-sel-btn:hover { background: color-mix(in srgb, var(--accent) 15%, transparent); color: var(--accent); }
.ws-sel-hl { background: #fff176; color: #000; padding: 0 3px; border-radius: 2px; font-weight: 700; }
.ws-sel-sep { width: 1px; height: 18px; background: var(--border); margin: 0 3px; }
.ws-sb-split { position: relative; display: inline-flex; align-items: stretch; }
.ws-sb-caret { padding: 3px 7px; margin-left: -1px; }
.ws-sb-menu { position: fixed; z-index: 1000; display: flex; flex-direction: column; min-width: 120px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 6px 20px rgba(0,0,0,.18); padding: 4px; }
.ws-sb-menu[hidden] { display: none; }
.ws-sb-opt { text-align: left; padding: 6px 10px; border: none; background: none; color: var(--text); border-radius: 5px; cursor: pointer; font-size: 13px; font-family: var(--font-ui); }
.ws-sb-opt:hover { background: color-mix(in srgb, var(--accent) 15%, transparent); }
.ws-sb-opt.is-active { color: var(--accent); font-weight: 700; }

.ws-indent-picker { display: flex; gap: 3px; }
.ws-indent-btn {
  padding: 3px 8px; font-size: 11px; font-weight: 500; border-radius: 4px;
  border: 1px solid var(--border); background: var(--bg); color: var(--text-muted); cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.ws-indent-btn:hover { background: var(--bg-hover); color: var(--text); }
.ws-indent-btn--active { background: var(--accent); border-color: var(--accent); color: #fff; }

/* Fold toggle button — shared across all card types */
/* Unified small action buttons: fold toggle, expand, delete — all card types */
.ws-fold-btn,
.ws-note-actions .btn-ghost,
.ws-tl-section-card .btn-ghost {
  background: transparent !important;
  border: 1px solid transparent !important;
  border-radius: 3px !important;
  padding: 0 3px !important;
  font-size: 10px !important;
  color: var(--text-muted) !important;
  cursor: pointer;
  line-height: 1.4;
  flex-shrink: 0;
}
.ws-fold-btn:hover,
.ws-note-actions .btn-ghost:hover,
.ws-tl-section-card .btn-ghost:hover {
  border-color: var(--border) !important;
  color: var(--text) !important;
}
/* Reorder and group-level add controls removed */
.ws-note-move-up, .ws-note-move-dn,
.ws-tl-move,
.ws-thread-move-up, .ws-thread-move-dn,
.ws-char-sec-add, .ws-loc-sec-add { display: none !important; }
/* Folded card: hide body, collapse spacing */
.ws-card-folded .ws-char-body,
.ws-card-folded .ws-loc-body,
.ws-card-folded .ws-note-body,
.ws-card-folded .ws-thread-body,
.ws-card-folded .ws-sl-body { display: none !important; }
.ws-field-group.ws-card-folded > *:not(.ws-field-label-row) { display: none !important; }
.ws-card-folded .ws-char-top,
.ws-card-folded .ws-thread-top,
.ws-card-folded .ws-storyline-top { margin-bottom: 0; }
.ws-card-folded .ws-note-head { margin-bottom: 0; }
.ws-field-label-row { display: flex; align-items: center; gap: 4px; }
.ws-sl-body { display: flex; flex-direction: column; gap: 6px; }

/* ── Unified note cards & full-view modals ─────────────────────────────────── */
.ws-note-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px; transition: border-color .15s; }
.ws-note-card:hover { border-color: color-mix(in srgb, var(--accent) 40%, var(--border)); }
.ws-note-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; }
.ws-card-folded .ws-note-head { margin-bottom: 0; }
.ws-note-title { flex: 1; font-size: 14px; font-weight: 600; border: none; background: transparent; color: var(--accent); padding: 0; outline: none; min-width: 0; }
.ws-note-title::placeholder { color: var(--text-muted); font-weight: 400; }
.ws-note-actions { margin-left: auto; display: flex; align-items: center; gap: 2px; flex-shrink: 0; position: relative; z-index: 2; }
.ws-note-body { display: flex; flex-direction: column; gap: 8px; }
.ws-note-row { display: flex; flex-direction: column; gap: 3px; }
.ws-note-label { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); }
.ws-note-field { width: 100%; box-sizing: border-box; font-size: 12px; padding: 6px 8px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg); color: var(--text); resize: none; line-height: 1.5; font-family: var(--font-ui); }
.ws-note-field::placeholder { color: var(--text-muted); }
/* Note text boxes: auto-grow up to ~4 lines (JS), no manual resize; scroll while editing */
textarea.ws-note-field, textarea.ws-summary-ta, textarea.ws-style-ta { max-height: 86px; resize: none; overflow-y: auto; }
.ws-note-field { resize: none; }
textarea.ws-note-modal-field, .ws-char-modal-field, .ws-char-modal-arc { resize: none; overflow-y: auto; }
/* Read-only preview: outer box handles visuals + hard overflow clip;
   inner div handles line-clamp — separating them stops padding from letting line 5 peek */
.ws-note-preview-outer {
  padding: 6px 8px; border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--bg); cursor: text; overflow: hidden;
}
.ws-note-preview-outer--card { background: var(--bg-card); }
.ws-note-preview-outer--empty .ws-note-preview { color: var(--text-muted); }
.ws-note-preview {
  font-size: 12px; line-height: 1.5; color: var(--text);
  white-space: normal; word-break: break-word;
  display: -webkit-box; -webkit-line-clamp: 4; line-clamp: 4; -webkit-box-orient: vertical;
  overflow: hidden;
}
/* Chapter descriptions: 4-line cap, scrollbar only while editing, no resize */
.ws-ch-desc-ta { max-height: 86px; resize: none; overflow-y: hidden; }
.ws-ch-desc-ta:focus { overflow-y: auto; }

.ws-note-modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.45); z-index: 1200; display: flex; align-items: center; justify-content: center; }
.ws-note-modal { background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; width: 580px; max-width: 95vw; max-height: 88vh; display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 8px 32px rgba(0,0,0,0.18); }
.ws-note-modal-head { display: flex; align-items: center; gap: 8px; padding: 14px 16px; border-bottom: 1px solid var(--border); flex-shrink: 0; }
.ws-note-modal-title { flex: 1; font-size: 15px; font-weight: 600; border: none; background: transparent; color: var(--text); outline: none; min-width: 0; }
.ws-note-modal-body { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 4px; }
.ws-note-modal-label { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); margin-top: 8px; }
.ws-note-modal-body > .ws-note-modal-label:first-child { margin-top: 0; }
.ws-note-modal-field { width: 100%; box-sizing: border-box; font-size: 12px; padding: 7px 9px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg); color: var(--text); resize: none; line-height: 1.5; font-family: var(--font-ui); }
.ws-note-modal-field::placeholder { color: var(--text-muted); }
select.ws-note-field, select.ws-note-modal-field {
  appearance: none; -webkit-appearance: none; cursor: pointer; border-radius: 20px; resize: none;
  padding-right: 26px; background-color: var(--bg);
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0,0,10,6'%3E%3Cpath%20fill='%23999'%20d='M0,0h10L5,6z'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center; background-size: 8px 5px;
}
.ws-note-expand { flex-shrink: 0; }

/* Characters */
.ws-char-list { display: flex; flex-direction: column; gap: 8px; }
#location-list { display: flex; flex-direction: column; gap: 8px; }
#thread-list { display: flex; flex-direction: column; gap: 8px; }
#storyline-list { display: flex; flex-direction: column; gap: 8px; }
.ws-char-modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.45); z-index: 1200; display: flex; align-items: center; justify-content: center; }
.ws-char-modal { background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; width: 580px; max-width: 95vw; height: 88vh; display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 8px 32px rgba(0,0,0,0.18); }
.ws-char-modal-head { display: flex; align-items: center; gap: 8px; padding: 14px 16px; border-bottom: 1px solid var(--border); flex-shrink: 0; }
.ws-char-modal-name { flex: 1; font-size: 15px; font-weight: 600; border: none; background: transparent; color: var(--text); outline: none; min-width: 0; }
.ws-char-modal-body { flex: 1 1 0; min-height: 0; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 6px; }
.ws-char-modal-label { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); flex-shrink: 0; }
.ws-char-modal-arc, .ws-char-modal-notes { width: 100%; box-sizing: border-box; font-size: 12px; padding: 6px 8px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg); color: var(--text); resize: none; line-height: 1.5; font-family: inherit; }
.ws-char-modal-rels { margin-top: 6px; }
.ws-char-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px; container-type: inline-size; }
.ws-location-card { container-type: inline-size; }
.ws-char-card .ws-note-head,
.ws-thread-card .ws-note-head { align-items: flex-start; }
.ws-char-head-main { flex: 1; min-width: 0; }
@container (max-width: 360px) {
  .ws-note-title { font-size: 12px; }
  .ws-char-role-sel { font-size: 10px; padding: 1px 16px 1px 6px; max-width: 90px; }
  .ws-note-actions { gap: 1px; }
}
.ws-char-top  { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.ws-char-name-input { font-size: 14px; font-weight: 600; width: 100%; box-sizing: border-box; border: none; background: transparent; color: var(--accent); padding: 0; outline: none; min-width: 0; }
.ws-char-name-input::placeholder { color: var(--text-muted); font-weight: 400; }
.ws-char-role { font-size: 12px; color: var(--text-muted); }
.ws-char-age  { font-size: 12px; color: #aaa; }
.ws-char-role-sel { font-size: 11px; font-family: var(--font-ui); padding: 2px 20px 2px 10px; border: 1.5px solid var(--border); border-radius: 20px; background-color: var(--bg-card); background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0,0,10,6'%3E%3Cpath%20fill='%23999'%20d='M0,0h10L5,6z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 8px center; background-size: 8px 5px; color: var(--text-muted); max-width: min(130px, 100%); appearance: none; -webkit-appearance: none; cursor: pointer; transition: border-color .15s; }
.ws-char-role-sel:hover { border-color: var(--accent); }
.ws-char-modal-role { font-size: 12px; font-family: var(--font-ui); padding: 4px 26px 4px 12px; border: 1.5px solid var(--border); border-radius: 20px; background-color: var(--bg-card); background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0,0,10,6'%3E%3Cpath%20fill='%23999'%20d='M0,0h10L5,6z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; background-size: 8px 5px; color: var(--text); width: 100%; box-sizing: border-box; margin-bottom: 2px; appearance: none; -webkit-appearance: none; cursor: pointer; transition: border-color .15s; }
.ws-char-modal-role:hover { border-color: var(--accent); }
@keyframes ws-ai-glow {
  0%, 25% { background-color: color-mix(in srgb, var(--accent) 12%, var(--bg)); border-color: color-mix(in srgb, var(--accent) 60%, var(--border)); }
  100%    { background-color: var(--bg); border-color: var(--border); }
}
.ws-ai-highlight { animation: ws-ai-glow 5s ease-out forwards; }
/* Character inline fields now unified via .ws-note-row / .ws-note-label / .ws-note-field */
.ws-char-modal-field { width: 100%; box-sizing: border-box; font-size: 12px; padding: 6px 8px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg); color: var(--text); resize: none; line-height: 1.5; font-family: inherit; height: 86px; overflow-y: auto; flex-shrink: 0; }
textarea.ws-char-modal-arc { height: 86px; overflow-y: auto; flex-shrink: 0; }
.ws-char-rels { margin-top: 8px; display: flex; flex-direction: column; gap: 5px; }
.ws-char-rels-label { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); }
.ws-char-rel-row { display: flex; align-items: center; gap: 5px; }
.ws-char-rel-target { flex: 0 0 auto; width: 145px; font-size: 11px; font-family: inherit; padding: 3px 22px 3px 10px; border: 1.5px solid var(--border); border-radius: 20px; background-color: var(--bg-card); background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0,0,10,6'%3E%3Cpath%20fill='%23999'%20d='M0,0h10L5,6z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 8px center; background-size: 8px 5px; color: var(--text); appearance: none; -webkit-appearance: none; cursor: pointer; transition: border-color .15s; }
.ws-char-rel-target:hover { border-color: var(--accent); }
.ws-char-rel-desc { flex: 1; font-size: 11px; font-family: inherit; padding: 3px 10px; border: 1px solid var(--border); border-radius: 20px; background: var(--bg); color: var(--text); min-width: 0; }
.ws-char-rel-desc::placeholder { color: var(--text-muted); }
.ws-char-rel-add { font-size: 11px; color: var(--text-muted); align-self: flex-start; margin-top: 2px; }

/* On narrow screens the select + description + delete row is too cramped to use.
   Put the character select on its own full-width line, let the description take
   the next line with the delete button, and grow all three into comfortable
   tap targets. */
@media (max-width: 700px) {
  .ws-char-rel-row { flex-wrap: wrap; gap: 6px; }
  .ws-char-rel-target { flex: 1 1 100%; width: 100%; font-size: 13px; padding: 8px 26px 8px 12px; background-position: right 12px center; }
  .ws-char-rel-desc { flex: 1 1 auto; font-size: 13px; padding: 8px 12px; }
  .ws-char-rel-del { flex: 0 0 auto; min-width: 38px; min-height: 38px; font-size: 15px; }
  .ws-char-rel-add { font-size: 13px; padding: 6px 4px; }
}

/* Summary/style textareas: auto-grow up to ~4 lines (height set by JS) */
.ws-char-notes,
.ws-summary-ta, .ws-style-ta {
  width: 100%; box-sizing: border-box;
  overflow-y: auto;
  resize: none;
  padding: 6px 8px; font-size: 12px; line-height: 1.5;
  font-family: var(--font-ui); color: var(--text);
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius);
}
.ws-char-notes { background: var(--bg); }
.ws-char-notes:focus,
.ws-summary-ta:focus, .ws-style-ta:focus,
.ws-note-field:focus, .ws-note-modal-field:focus { outline: 2px solid var(--accent); border-color: transparent; }

/* Expand-button wrapper */
.ws-ta-wrap { position: relative; display: block; }
.ws-ta-expand {
  position: absolute; top: 4px; right: 4px;
  width: 18px; height: 18px; padding: 0;
  background: var(--bg-card); border: 1px solid var(--border); border-radius: 3px;
  font-size: 11px; line-height: 1; cursor: pointer;
  color: var(--text-muted); display: flex; align-items: center; justify-content: center;
  opacity: 0.4; transition: opacity .15s;
}
.ws-ta-wrap:hover .ws-ta-expand,
.ws-ta-expand:focus { opacity: 1; }
.ws-ta-expand:hover { color: var(--accent); }

/* Expanded textarea modal */
.ws-ta-modal-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 500;
  display: flex; align-items: center; justify-content: center;
}
.ws-ta-modal {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: calc(var(--radius) * 1.5);
  padding: 18px; width: min(600px,90vw); display: flex; flex-direction: column; gap: 10px;
  box-shadow: 0 8px 40px rgba(0,0,0,.25);
}
.ws-ta-modal-label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); }
.ws-ta-modal-body {
  width: 100%; height: 280px; resize: none; box-sizing: border-box;
  padding: 10px; font: 13px/1.6 var(--font-ui); color: var(--text);
  background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius);
}
.ws-ta-modal-body:focus { outline: 2px solid var(--accent); border-color: transparent; }
.ws-ta-modal-actions { display: flex; justify-content: flex-end; gap: 8px; }

/* AI Log tabs */
.ws-pane-tabs { display: flex; gap: 2px; padding: 8px 8px 0; border-bottom: 1px solid var(--border); margin-bottom: 8px; }
.ws-pane-tab {
  background: none; border: none; cursor: pointer;
  padding: 5px 12px; font-size: 12px; font-weight: 600;
  color: var(--text-muted); border-radius: 6px 6px 0 0;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.ws-pane-tab:hover { color: var(--text); }
.ws-pane-tab--active { color: var(--accent); border-bottom-color: var(--accent); }
.ws-pane-tab--locked { color: var(--text-muted); opacity: 0.7; }
.ws-pane-tab-body { padding: 0; }
.ws-ai-locked-msg { padding: 20px 16px; font-size: 13px; color: var(--text-muted); }
.ws-ai-locked-msg a { color: var(--accent); }
.ws-demo-credit-note { font-size: 11px; color: var(--text-muted); font-style: italic; padding: 6px 0 2px; }

/* AI Log entries */
.ws-ai-log-entry { border: 1px solid var(--border); border-radius: var(--radius); padding: 10px 12px; margin-bottom: 8px; background: var(--bg-card); }
.ws-ai-log-meta { display: flex; align-items: center; gap: 6px; justify-content: space-between; margin-bottom: 6px; flex-wrap: wrap; }
.ws-ai-log-date { font-size: 11px; color: var(--text-muted); font-weight: 500; }
.ws-ai-log-scope { font-size: 10px; color: var(--text-muted); background: var(--bg); border: 1px solid var(--border); border-radius: 999px; padding: 1px 7px; white-space: nowrap; }
.ws-ai-log-del { color: var(--text-muted); font-size: 11px; }
.ws-ai-log-text { font-size: 11px; line-height: 1.45; white-space: pre-wrap; word-break: break-word; color: var(--text); margin: 0; font-family: inherit; }
.ws-ai-log-text strong { font-weight: 600; }
.ws-ai-autofill-btn { display: block; width: 100%; margin-bottom: 10px; text-align: center; font-size: 12px; }
.ws-ai-log-text em { font-style: italic; }
.ws-ai-log-text code { background: var(--bg-secondary); padding: 2px 4px; border-radius: 2px; font-family: monospace; font-size: 10px; }

/* Style issue highlighting */
.style-issue-highlight { background: #fef08a; padding: 1px 3px; border-radius: 2px; color: #000; cursor: pointer; }
.style-issue-highlight:hover { background: #fcd34d; }

/* Summary / Style form */
.ws-summary-form  { display: flex; flex-direction: column; gap: 12px; }
.ws-field-group   { display: flex; flex-direction: column; gap: 4px; }
.ws-field-label   { font-size: 12px; font-weight: 600; color: var(--accent); }
/* .ws-summary-ta and .ws-style-ta are covered by the shared rule above */

/* Timeline card layout */
.ws-tl-list { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }

.ws-tl-section-card {
  display: flex; align-items: center; gap: 6px;
  padding: 5px 8px; background: var(--bg);
  border-bottom: 2px solid var(--accent); border-top: 4px solid transparent;
  margin-top: 4px;
}
.ws-tl-section-inp { flex: 1; font-size: 12px; font-weight: 700; color: var(--accent); background: transparent; border: none; outline: none; cursor: text; }

/* Timeline event cards now use the shared .ws-note-card chrome */
.ws-tl-event-card { }

.ws-tl-card-head { display: flex; align-items: center; gap: 6px; }
.ws-tl-date-preview {
  flex: 1; font-size: 11px; font-weight: 700; color: var(--accent);
  cursor: text; line-height: 1.4;
}
.ws-tl-date-preview.ws-tl-cell-empty { color: var(--text-muted); font-weight: 400; font-style: italic; }

.ws-tl-card-event { font-size: 11px; color: var(--text); }
.ws-tl-card-meta { display: flex; gap: 8px; align-items: flex-start; }
.ws-tl-card-chars { flex: 1; font-size: 10px; color: var(--text-muted); }
.ws-tl-card-ch    { font-size: 10px; color: var(--text-muted); white-space: nowrap; }

/* Click-to-edit cells */
.ws-tl-cell-preview {
  cursor: text; line-height: 1.45; white-space: pre-wrap; word-break: break-word; font-size: 11px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; white-space: normal;
}
.ws-tl-card-chars .ws-tl-cell-preview,
.ws-tl-card-ch .ws-tl-cell-preview { -webkit-line-clamp: 1; font-size: 10px; }
.ws-tl-cell-empty { color: var(--text-muted); font-style: italic; }
.ws-tl-cell-inp {
  display: none; width: 100%; box-sizing: border-box; padding: 2px 0;
  font-size: 11px; font-family: var(--font-ui); line-height: 1.45;
  border: none; border-bottom: 1px solid var(--accent); outline: none;
  background: transparent; resize: none; overflow: hidden;
}
.ws-tl-date-inp { font-size: 11px; font-weight: 700; color: var(--accent); background: transparent; border: none; border-bottom: 1px solid var(--accent); outline: none; flex: 1; }
.ws-tl-grip { cursor: grab; color: var(--text-muted); opacity: 0; font-size: 10px; flex-shrink: 0; user-select: none; line-height: 1; padding: 0 2px; }
.ws-tl-section-card:hover .ws-tl-grip, .ws-tl-event-card:hover .ws-tl-grip { opacity: 0.5; }
.ws-tl-grip:hover { opacity: 1 !important; }
.ws-tl-grip:active { cursor: grabbing; }
.ws-note-grip { cursor: grab; color: var(--text-muted); opacity: 0; font-size: 10px; flex-shrink: 0; user-select: none; line-height: 1; padding: 0 2px; }
.ws-note-card:hover .ws-note-grip, .ws-tl-section-card:hover .ws-note-grip, .ws-chapter-item:hover .ws-note-grip { opacity: 0.5; }
.ws-note-grip:hover { opacity: 1 !important; }
.ws-note-grip:active { cursor: grabbing; }
.ws-note-move-up, .ws-note-move-dn { padding: 1px 4px; font-size: 10px; opacity: 0.4; }
.ws-note-card:hover .ws-note-move-up, .ws-note-card:hover .ws-note-move-dn { opacity: 0.8; }
.ws-note-move-up:disabled, .ws-note-move-dn:disabled { opacity: 0.15 !important; cursor: default; }
.ws-tl-dragging { opacity: 0.35; }
.ws-tl-drop-above { box-shadow: 0 -2px 0 0 var(--accent) !important; }
.ws-tl-drop-below { box-shadow: 0 2px 0 0 var(--accent) !important; }
.ws-tl-move { display: inline-flex; flex-direction: column; gap: 1px; flex-shrink: 0; margin-left: auto; }
.ws-tl-section-card .ws-tl-move { margin-left: 0; }
.ws-tl-move-btn { opacity: 0.3; font-size: 8px; line-height: 1; padding: 1px 3px; }
.ws-tl-event-card:hover .ws-tl-move-btn, .ws-tl-section-card:hover .ws-tl-move-btn { opacity: 0.55; }
.ws-tl-move-btn:hover:not(:disabled) { opacity: 1; }
.ws-tl-move-btn:disabled { opacity: 0.12; cursor: default; }

/* Visual timeline modal */
.ws-tl-visual-modal {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: calc(var(--radius) * 1.5);
  padding: 20px; width: min(95vw, 1100px); height: min(85vh, 700px);
  display: flex; flex-direction: column; gap: 12px;
  box-shadow: 0 8px 40px rgba(0,0,0,.25);
  resize: both; overflow: hidden; min-width: 340px; min-height: 240px; box-sizing: border-box;
}
.ws-tl-visual-header { display: flex; justify-content: space-between; align-items: center; }
.ws-tl-visual-title { font-weight: 600; font-size: 14px; color: var(--text); }
.ws-tl-visual-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; padding: 8px 10px; background: var(--bg); border-radius: var(--radius); border: 1px solid var(--border); }
.ws-tl-legend-item { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--text); }
.ws-tl-legend-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.ws-tl-visual-canvas { overflow-x: auto; overflow-y: hidden; flex: 1; min-height: 0; background: var(--bg); border-radius: var(--radius); border: 1px solid var(--border); padding: 8px; display: flex; align-items: center; justify-content: center; }
.ws-tl-visual-canvas--charmap { justify-content: flex-start; align-items: flex-start; overflow: auto; }
.ws-tl-visual-canvas--charmap svg { display: block; flex-shrink: 0; }
.ws-tl-visual-canvas--timeline { justify-content: flex-start; align-items: flex-start; overflow-y: auto; }
.ws-tl-visual-canvas--timeline svg { display: block; flex-shrink: 0; }
.ws-tl-visual-canvas--locmap { overflow-x: auto; overflow-y: auto; justify-content: flex-start; align-items: flex-start; }
.ws-tl-visual-canvas--locmap svg { display: block; flex-shrink: 0; }
.ws-tl-visual-note { font-size: 11px; color: var(--text-muted); margin: 0; }
.ws-tl-visual-maximize { padding: 4px 6px; line-height: 1; }
.ws-ta-modal-overlay.is-fullscreen { background: rgba(0,0,0,.85); }
.ws-ta-modal-overlay.is-fullscreen .ws-tl-visual-modal {
  width: 100vw !important; height: 100dvh !important;
  max-width: none !important; max-height: none !important;
  border-radius: 0 !important; resize: none !important;
}
.ws-ta-modal-overlay.is-fullscreen .ws-tl-visual-canvas { flex: 1; min-height: 0; }

/* Plot threads (look unified via .ws-note-* classes) */
.ws-thread-card { container-type: inline-size; }
.ws-thread-card .ws-note-head { align-items: flex-start; }
/* Title input must fill its wrapper; without this the input keeps its intrinsic
   width and overflows under the status badge/actions on narrow or open cards. */
.ws-thread-title { width: 100%; box-sizing: border-box; }
.ws-thread-status { font-size: 11px; font-family: var(--font-ui); padding: 2px 20px 2px 10px; border: 1.5px solid var(--border); border-radius: 20px; background-color: var(--bg-card); background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0,0,10,6'%3E%3Cpath%20fill='%23999'%20d='M0,0h10L5,6z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 8px center; background-size: 8px 5px; color: var(--text-muted); max-width: 120px; flex-shrink: 0; cursor: pointer; transition: border-color .15s; }

/* Storylines (look unified via .ws-note-* classes) */
.ws-storyline-card { }
/* .ws-sl-notes covered by shared rule above */

/* ── Streak chip (header/profile) ───────────────────────────────── */
.streak-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 7px;
  border-radius: 10px;
  text-decoration: none;
  background: var(--bg);
  border: 1px solid var(--border);
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.25;
}
a.streak-chip {
  transition: background .15s, border-color .15s, color .15s;
}
a.streak-chip:hover {
  background: var(--bg-card);
  border-color: var(--accent);
  color: var(--text);
}
.streak-chip--active { background: #fff7ed !important; border-color: #f97316 !important; color: #9a3412 !important; }
.streak-flame  { font-size: 12px; line-height: 1; }

/* Daily word-goal celebration: chip pulse, toast, and a gentle confetti burst */
.streak-chip--celebrate { animation: streak-pop 1.6s ease; }
@keyframes streak-pop {
  0% { transform: scale(1); } 20% { transform: scale(1.18); }
  40% { transform: scale(1); } 60% { transform: scale(1.1); } 100% { transform: scale(1); }
}
.ws-goal-toast {
  position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%) translateY(20px);
  background: var(--accent); color: #fff; padding: 12px 22px; border-radius: 999px;
  font-family: var(--font-ui); font-size: 14px; font-weight: 600;
  box-shadow: 0 8px 28px rgba(60, 50, 38, 0.28);
  opacity: 0; pointer-events: none; z-index: 9999;
  transition: opacity .3s ease, transform .3s ease;
}
.ws-goal-toast--show { opacity: 1; transform: translateX(-50%) translateY(0); }
.ws-confetti { position: fixed; inset: 0; pointer-events: none; z-index: 9998; overflow: hidden; }
.ws-confetti-piece {
  position: absolute; top: -12px; width: 9px; height: 9px; border-radius: 2px; opacity: .9;
  animation: ws-confetti-fall 2.2s cubic-bezier(.3, .6, .5, 1) forwards;
}
@keyframes ws-confetti-fall {
  0%   { transform: translateY(-10px) translateX(0) rotate(0); opacity: 1; }
  100% { transform: translateY(102vh) translateX(var(--x-drift, 0)) rotate(540deg); opacity: .9; }
}
@media (prefers-reduced-motion: reduce) {
  .ws-confetti { display: none; }
  .streak-chip--celebrate { animation: none; }
}

/* ── Writing sprints ─────────────────────────────────────────────────────────── */
.ws-sprint-pop {
  position: fixed; z-index: 9600; width: 232px;
  background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px;
  box-shadow: 0 8px 30px rgba(0,0,0,.22); padding: 14px; font-family: var(--font-ui);
}
.ws-sprint-pop-h { font-size: 13px; font-weight: 700; color: var(--text); margin-bottom: 8px; }
.ws-sprint-lbl { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); margin: 8px 0 6px; }
.ws-sprint-opt { text-transform: none; letter-spacing: 0; font-weight: 400; opacity: .75; }
.ws-sprint-durs { display: flex; gap: 5px; flex-wrap: wrap; align-items: center; }
.ws-sprint-dur {
  min-width: 34px; padding: 5px 8px; border-radius: 6px; border: 1px solid var(--border);
  background: var(--bg); color: var(--text-muted); cursor: pointer; font-size: 12px; font-weight: 600;
  font-family: inherit; transition: border-color .15s, color .15s;
}
.ws-sprint-dur:hover { border-color: var(--accent); color: var(--text); }
.ws-sprint-dur--on { border-color: var(--accent); color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, var(--bg)); }
.ws-sprint-custom {
  width: 92px; padding: 5px 6px; border: 1px solid var(--border); border-radius: 6px;
  background: var(--bg); color: var(--text); font-size: 12px; font-family: inherit;
}
.ws-sprint-unit { font-size: 11px; color: var(--text-muted); }
.ws-sprint-target {
  width: 100%; box-sizing: border-box; padding: 6px 8px; border: 1px solid var(--border); border-radius: 6px;
  background: var(--bg); color: var(--text); font-size: 12px; font-family: inherit; margin-bottom: 12px;
}
.ws-sprint-go { width: 100%; }

.ws-sprint-bar {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%);
  display: flex; align-items: center; gap: 12px; z-index: 9600;
  background: var(--bg-card); border: 1px solid var(--border); border-radius: 999px;
  box-shadow: 0 8px 28px rgba(0,0,0,.24); padding: 8px 10px 8px 18px; font-family: var(--font-ui);
}
.ws-sprint-clock { font-size: 15px; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; min-width: 46px; }
.ws-sprint-count { font-size: 13px; color: var(--text-muted); }
.ws-sprint-bar--hit .ws-sprint-count { color: var(--accent); font-weight: 600; }
.ws-sprint-bar--paused .ws-sprint-clock { color: var(--text-muted); }
.ws-sprint-ctl {
  width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--border);
  background: var(--bg); color: var(--text-muted); cursor: pointer; font-size: 12px; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center; transition: border-color .15s, color .15s;
}
.ws-sprint-ctl:hover { border-color: var(--accent); color: var(--accent); }

.ws-sprint-overlay {
  position: fixed; inset: 0; z-index: 9997; background: rgba(0,0,0,.4);
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
.ws-sprint-card {
  background: var(--bg-card); border: 1px solid var(--border); border-radius: 16px;
  padding: 28px 32px; text-align: center; max-width: 320px; width: 100%;
  box-shadow: 0 12px 40px rgba(0,0,0,.28); font-family: var(--font-ui);
}
.ws-sprint-card-emoji { font-size: 40px; line-height: 1; margin-bottom: 8px; }
.ws-sprint-card-h { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); }
.ws-sprint-card-big { font-size: 32px; font-weight: 800; color: var(--accent); margin: 6px 0 4px; }
.ws-sprint-card-sub { font-size: 13px; color: var(--text-muted); margin-bottom: 14px; }
.ws-sprint-card-badge {
  display: inline-block; font-size: 11px; font-weight: 700; color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, var(--bg-card)); border-radius: 999px;
  padding: 3px 12px; margin-bottom: 14px;
}
.ws-sprint-card-close { width: 100%; }
#btn-sprint.ws-sprint-on { color: var(--accent); }

/* ── Read aloud ──────────────────────────────────────────────────────────────── */
.ws-read-bar {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%);
  display: flex; align-items: center; gap: 8px; z-index: 9600; flex-wrap: wrap; justify-content: center;
  max-width: calc(100vw - 24px);
  background: var(--bg-card); border: 1px solid var(--border); border-radius: 999px;
  box-shadow: 0 8px 28px rgba(0,0,0,.24); padding: 7px 14px 7px 16px; font-family: var(--font-ui);
}
.ws-read-label { font-size: 13px; font-weight: 600; color: var(--text); }
.ws-read-ctl {
  width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--border);
  background: var(--bg); color: var(--text-muted); cursor: pointer; font-size: 12px; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center; transition: border-color .15s, color .15s;
}
.ws-read-ctl:hover { border-color: var(--accent); color: var(--accent); }
.ws-read-sel {
  font-size: 12px; font-family: inherit; padding: 4px 6px; border: 1px solid var(--border);
  border-radius: 6px; background: var(--bg); color: var(--text); cursor: pointer; max-width: 96px;
}
.ws-read-voice { max-width: 220px; }
.ws-read-prog { font-size: 12px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
#btn-readaloud.ws-read-on { color: var(--accent); }

/* ── Writing stats page ──────────────────────────────────────────────────────── */
.stats-page { max-width: 900px; margin: 0 auto; padding: 28px 20px 64px; }
.stats-head { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; }
.stats-title { font-size: 22px; font-weight: 700; color: var(--text); margin: 0; }
.stats-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); gap: 12px; margin-bottom: 26px; }
.stat-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px; padding: 16px 12px; text-align: center; }
.stat-num { font-size: 26px; font-weight: 800; color: var(--accent); line-height: 1.1; font-variant-numeric: tabular-nums; }
.stat-lbl { font-size: 12px; color: var(--text-muted); margin-top: 5px; line-height: 1.3; }
.stats-heatmap-sec { background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px; padding: 18px 18px 16px; }
.stats-sec-h { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); margin-bottom: 12px; }
.hm-scroll { overflow-x: auto; padding-bottom: 4px; }
.hm-inner { display: inline-block; min-width: min-content; }
.hm-months { display: flex; gap: 3px; margin-bottom: 4px; }
.hm-month { flex: 0 0 12px; width: 12px; font-size: 10px; color: var(--text-muted); white-space: nowrap; overflow: visible; }
.hm-grid { display: flex; gap: 3px; }
.hm-col { display: flex; flex-direction: column; gap: 3px; flex: 0 0 12px; }
.hm-cell { width: 12px; height: 12px; border-radius: 2px; }
.hm-l0 { background: color-mix(in srgb, var(--border) 45%, var(--bg-card)); }
.hm-l1 { background: color-mix(in srgb, var(--accent) 28%, var(--bg-card)); }
.hm-l2 { background: color-mix(in srgb, var(--accent) 52%, var(--bg-card)); }
.hm-l3 { background: color-mix(in srgb, var(--accent) 76%, var(--bg-card)); }
.hm-l4 { background: var(--accent); }
.hm-future { background: transparent !important; }
.hm-legend { display: flex; align-items: center; gap: 4px; margin-top: 12px; font-size: 11px; color: var(--text-muted); }
.stats-note { font-size: 12px; color: var(--text-muted); margin-top: 16px; line-height: 1.7; }

.dash-net-leave-btn { background: none; border: none; padding: 0; font: inherit; color: var(--text-muted); text-decoration: underline; cursor: pointer; }
.dash-net-leave-btn:hover { color: var(--danger); }
.streak-count  { font-weight: 700; }
.streak-label  { font-weight: 400; }
.streak-divider { color: inherit; opacity: .5; }
.streak-today-words { font-variant-numeric: tabular-nums; }

/* ── Profile panel (permanent right column in dashboard index) ─────── */
.profile-panel {
  width: 0;
  flex-shrink: 0;
  background: var(--bg);
  border-left: 0 solid var(--border);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: width .25s ease, border-left-width .25s ease;
}
.dash-profile-open .profile-panel,
.dash-profile-pinned .profile-panel {
  width: 680px;
  border-left-width: 1px;
}
.dash-profile-toggle--active { font-weight: 600; }
.profile-panel-hd {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 20px;
  height: 56px; flex-shrink: 0;
  border-bottom: 1px solid var(--border);
}
.profile-panel-title {
  font-size: 16px; font-weight: 700; color: var(--text); margin: 0;
}
.profile-panel-close {
  font-size: 17px; line-height: 1; color: var(--text-muted);
  text-decoration: none; padding: 6px 8px; border-radius: 6px;
  transition: background .15s, color .15s;
}
.profile-panel-close:hover { background: var(--bg-hover, #f0f0f0); color: var(--text); }
.profile-panel-body {
  flex: 1; min-height: 0;
  display: block;
  padding: 16px 20px;
  overflow-y: auto;
}
.profile-panel-body--tabs {
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow-y: auto;
  min-height: 0;
}
.profile-tab-nav {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}
.profile-tab-btn {
  border: 1px solid var(--border);
  background: var(--bg-card);
  color: var(--text-muted);
  border-radius: var(--radius);
  padding: 8px 10px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.profile-tab-btn:hover { border-color: var(--accent); color: var(--text); }
.profile-tab-btn.is-active {
  background: color-mix(in srgb, var(--accent) 12%, #fff);
  border-color: color-mix(in srgb, var(--accent) 50%, #ccc);
  color: var(--text);
}
:root[data-theme="dark"] .profile-tab-btn.is-active {
  background: color-mix(in srgb, var(--accent) 22%, var(--bg-card));
  border-color: color-mix(in srgb, var(--accent) 60%, var(--border));
}
.profile-tab-pane {
  flex: 1;
  min-height: 0;
  overflow: auto;
}
/* Progress card spans both columns and fills remaining vertical space */
.profile-card--progress {
  display: flex; flex-direction: column;
}
.profile-card--progress .profile-section--progress {
  display: flex; flex-direction: column;
}
.profile-card--progress .progress-chart-wrap {
  height: 200px;
}
.profile-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  height: auto;
  box-sizing: border-box;
}
.status-pill {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  border: 1px solid transparent;
}
.status-pill--active,
.status-pill--paid {
  background: color-mix(in srgb, #22c55e 12%, #fff);
  color: #166534;
  border-color: color-mix(in srgb, #22c55e 35%, #fff);
}
.status-pill--payment-failed,
.status-pill--past-due {
  background: color-mix(in srgb, #ef4444 12%, #fff);
  color: #991b1b;
  border-color: color-mix(in srgb, #ef4444 35%, #fff);
}
.status-pill--canceled,
.status-pill--void,
.status-pill--not-started {
  background: #f3f4f6;
  color: #6b7280;
  border-color: #e5e7eb;
}
.status-pill--open {
  background: color-mix(in srgb, #f59e0b 12%, #fff);
  color: #92400e;
  border-color: color-mix(in srgb, #f59e0b 35%, #fff);
}
.profile-card--locked { opacity: .75; }
.profile-section {
  margin-bottom: 0;
}
.profile-section--locked { opacity: .75; }
.profile-section-header {
  display: flex; align-items: center; justify-content: space-between;
  padding-bottom: 12px;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--border);
}
.profile-section-header .profile-section-title { margin: 0; }
.profile-plan-header-meta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.profile-plan-current-price {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  white-space: nowrap;
}
.profile-view-field {
  display: flex; gap: 12px; align-items: baseline;
  padding: 4px 0;
}
.profile-view-field .profile-label {
  min-width: 110px; flex-shrink: 0; margin: 0;
}
.profile-plan-summary .profile-view-field {
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr);
  column-gap: 14px;
  align-items: baseline;
}
.profile-plan-summary .profile-view-field .profile-label {
  min-width: 0;
}
.profile-value {
  font-size: 14px; color: var(--text);
}
.profile-section-title {
  font-size: 14px; font-weight: 600; margin: 0 0 4px;
  color: var(--text);
}
.profile-section-desc {
  font-size: 13px; color: var(--text-muted); margin: 0 0 16px;
}

/* Achievement messages */
.achievement-message {
  padding: 10px 12px; border-radius: var(--radius); margin-bottom: 14px;
  font-size: 12px; line-height: 1.5;
}
.achievement-message--streak {
  background: #fff8e1; border: 1px solid #ffd699; color: #9a5c00;
}
.achievement-message--achieved {
  background: #e8f5e9; border: 1px solid #c8e6c9; color: #1b5e20;
}
.achievement-message--exceeded {
  background: #f3e5f5; border: 1px solid #e1bee7; color: #6a1b9a;
}

.profile-field {
  margin-bottom: 14px;
}
.profile-field:last-child { margin-bottom: 0; }
.profile-label {
  display: block; font-size: 12px; font-weight: 600;
  color: var(--text-muted); margin-bottom: 5px; text-transform: uppercase; letter-spacing: .04em;
}
.profile-input {
  width: 100%; box-sizing: border-box;
  padding: 8px 10px; font-size: 14px;
  border: 1.5px solid var(--border); border-radius: 8px;
  background: var(--bg); color: var(--text);
  font-family: var(--font-ui);
  transition: border-color .15s;
}
.profile-input:focus { outline: none; border-color: var(--accent); }
.profile-input--goal { width: 140px; }
.profile-email-row {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.profile-email-value {
  font-size: 14px; color: var(--text);
}
.profile-email-note {
  font-size: 12px; color: var(--text-muted); font-style: italic;
}
.profile-goal-row {
  display: flex; align-items: center; gap: 10px;
}
.profile-goal-hint {
  font-size: 12px; color: var(--text-muted);
}
.profile-goals-list { display: flex; flex-direction: column; gap: 8px; margin: 8px 0; }
.profile-goal-item { display: flex; flex-direction: column; gap: 2px; }
.profile-goal-display-badge { display: inline-block; padding: 4px 10px; background: #dbeafe; color: #0369a1; border-radius: 4px; font-size: 12px; font-weight: 600; }
.profile-streak-preview {
  margin-top: 4px; padding-top: 0;
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
}
.profile-streak-preview .streak-chip {
  font-size: 13px; padding: 5px 12px;
}
.streak-today {
  font-size: 13px; color: var(--text-muted);
}
.streak-done {
  color: #16a34a; font-weight: 600; margin-left: 6px;
}
.goal-progress { display: flex; align-items: center; gap: 12px; padding: 8px 16px; background: var(--bg-card); border-radius: 8px; }
.goal-label { font-size: 12px; color: var(--text-muted); min-width: 120px; }
.goal-progress-bar { flex: 1; height: 6px; background: var(--border); border-radius: 3px; overflow: hidden; min-width: 100px; }
.goal-progress-fill { height: 100%; background: var(--accent); transition: width 300ms ease; }
.goal-progress-text { font-size: 12px; font-weight: 600; color: var(--text); min-width: 70px; text-align: right; }

/* Goal progress cards (daily/weekly/monthly in Progress tab) */
.goal-progress-card { padding: 10px 0; border-bottom: 1px solid var(--border); }
.goal-progress-card:last-child { border-bottom: none; padding-bottom: 0; }
.goal-progress-card-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; }
.goal-progress-card-label { font-size: 12px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em; }
.goal-progress-card-target { font-size: 12px; color: var(--text-muted); }
.goal-progress-bar-track { width: 100%; height: 6px; background: var(--border); border-radius: 3px; overflow: hidden; }
.goal-progress-bar-fill { height: 100%; background: var(--accent); border-radius: 3px; transition: width .3s; }
.goal-progress-card-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 5px; font-size: 12px; color: var(--text-muted); }
.goal-status { font-size: 12px; font-weight: 600; }
.goal-status--hit { color: #16a34a; }
.goal-status--track { color: var(--accent); }
.profile-actions {
  display: flex; gap: 10px; align-items: center; margin-top: 8px;
}
.flash {
  padding: 10px 14px; border-radius: var(--radius);
  font-size: 13px; margin-bottom: 16px;
}
.flash-success { background: #dcfce7; color: #15803d; border: 1px solid #bbf7d0; }
.flash-error   { background: #fee2e2; color: #b91c1c; border: 1px solid #fecaca; }

/* Toggle switch */
.ws-toggle { position: relative; display: inline-block; width: 34px; height: 20px; flex-shrink: 0; }
.ws-toggle input { opacity: 0; width: 0; height: 0; }
.ws-toggle-slider { position: absolute; inset: 0; background: #ccc; border-radius: 20px; transition: background .2s; cursor: pointer; }
.ws-toggle-slider::before { content: ''; position: absolute; width: 14px; height: 14px; left: 3px; top: 3px; background: #fff; border-radius: 50%; transition: transform .2s; }
.ws-toggle input:checked + .ws-toggle-slider { background: var(--accent); }
.ws-toggle input:checked + .ws-toggle-slider::before { transform: translateX(14px); }

/* Goal edit form */
.about-checkboxes { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 6px; }
.about-checkbox-wrap { display: flex; align-items: center; gap: 6px; font-size: 13px; cursor: pointer; white-space: nowrap; }
.about-checkbox-wrap input[type=checkbox] { width: 14px; height: 14px; cursor: pointer; accent-color: var(--accent); }
.goal-inputs-grid { display: flex; flex-direction: column; gap: 10px; }
.goal-input-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.goal-input-label { width: 56px; flex-shrink: 0; margin: 0; }
.goal-auto-toggle { margin-left: 4px; }
.goal-input--auto { background: var(--bg); color: var(--text-muted); cursor: default; }
.goal-header-toggles { display: flex; gap: 20px; flex-wrap: wrap; margin-top: 4px; }
.goal-toggle-wrap { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.goal-toggle-label { font-size: 13px; color: var(--text); }
.goal-header-radio { display: flex; gap: 6px; margin-top: 4px; }
.goal-radio-btn { display: flex; align-items: center; gap: 0; padding: 4px 12px; font-size: 12px; font-weight: 500; border: 1px solid var(--border); border-radius: var(--radius); cursor: pointer; color: var(--text-muted); transition: all .15s; }
.goal-radio-btn input[type=radio] { display: none; }
.goal-radio-btn.is-active,
.goal-radio-btn:has(input:checked) { background: var(--accent); color: #fff; border-color: var(--accent); }
.goal-radio-btn:not(.is-active):hover { border-color: var(--accent); color: var(--text); }

/* Progress chart */
.profile-section--progress { display: flex; flex-direction: column; }
.progress-filter { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.progress-filter-label { font-size: 13px; font-weight: 500; color: var(--text-muted); white-space: nowrap; }
.progress-filter-select {
  font-size: 13px; font-family: var(--font-ui); padding: 6px 26px 6px 12px;
  border: 1.5px solid var(--border); border-radius: 8px;
  background: var(--bg); color: var(--text); cursor: pointer;
  transition: border-color .15s;
}
.progress-filter-select:focus { outline: none; border-color: var(--accent); }
.progress-chart-wrap { position: relative; min-height: 60px; }
.progress-chart-wrap canvas { display: block; width: 100%; border-radius: var(--radius); }
.progress-empty {
  font-size: 13px; color: var(--text-muted); text-align: center;
  padding: 28px 0; display: none;
}
/* Project targets */
.ms-targets-list { display: flex; flex-direction: column; gap: 14px; }
.ms-target-row { display: flex; align-items: center; gap: 10px; }
.ms-target-title { font-size: 13px; font-weight: 500; color: var(--text); width: 130px; flex-shrink: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ms-target-body { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ms-target-bar-wrap { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; }
.ms-target-bar-track { flex: 1; height: 6px; background: var(--border); border-radius: 3px; overflow: hidden; }
.ms-target-bar-fill { height: 100%; background: var(--accent); border-radius: 3px; transition: width .3s; }
.ms-target-count { font-size: 12px; color: var(--text-muted); white-space: nowrap; }
.ms-target-none { font-size: 12px; color: var(--text-muted); }
.ms-target-wordcount { font-size: 12px; color: var(--text-muted); }
.ms-target-edit { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.ms-target-edit-btn { flex-shrink: 0; }

.progress-tooltip {
  position: fixed; z-index: 9999; pointer-events: none;
  background: var(--bg, #fff); border: 1px solid var(--border, #ddd);
  border-radius: 6px; padding: 8px 12px;
  font-size: 12px; line-height: 1.5; color: var(--text, #222);
  box-shadow: 0 2px 8px rgba(0,0,0,.12);
}

.profile-plan-summary { margin-bottom: 10px; }
.profile-plan-action { margin: 10px 0; }
.profile-plan-return-notice {
  margin: 0 0 12px;
  padding: 8px 10px;
  border-radius: var(--radius);
  border: 1px solid color-mix(in srgb, var(--accent) 30%, #d1d5db);
  background: color-mix(in srgb, var(--accent) 10%, #f8fafc);
  color: var(--text);
  font-size: 12px;
  line-height: 1.4;
}
.profile-plan-note {
  margin: 10px 0 16px;
  font-size: 12px;
  color: var(--text-muted);
}
.profile-payment-history-section {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}
.profile-plan-layout {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.profile-plan-switcher {
  padding: 0;
}
.profile-plan-section {
  width: 100%;
}
.profile-plan-divider {
  border: 0;
  border-top: 1px solid var(--border);
  margin: 2px 0;
}
.profile-plan-benefits-section { margin-top: 0; }
.profile-plan-benefits-list { list-style: none; padding: 0; margin: 8px 0; }
.profile-plan-benefits-list li { padding: 4px 0 4px 20px; position: relative; font-size: 13px; line-height: 1.5; }
.profile-plan-benefits-list li:before { content: '✓'; position: absolute; left: 0; color: var(--accent); font-weight: 600; }
.profile-plan-benefits-note { margin: 8px 0 0; font-size: 12px; color: var(--text-muted); }
.profile-subsection-title {
  margin: 16px 0 8px;
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
}
.profile-subsection-title--switch { margin-top: 0; }
.profile-subsection-title--payments { margin-top: 0; margin-bottom: 10px; }
.profile-payment-history-details summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 6px; }
.profile-payment-history-details summary::after { content: '▸'; font-size: 11px; color: var(--text-muted); transition: transform 0.15s; }
.profile-payment-history-details[open] summary::after { transform: rotate(90deg); }
.profile-payment-history-details summary::-webkit-details-marker { display: none; }
.profile-payment-history-details .profile-payments-wrap,
.profile-payment-history-details .profile-section-desc { margin-top: 10px; }
.profile-plan-upgrade-options {
  margin-top: 8px;
}
.profile-plan-upgrade-options .profile-plan-switch-row {
  grid-template-columns: minmax(130px, 1fr) auto auto;
}

/* ── Plan cards (free user upgrade flow) ─────────────────────────────────── */
.ppo-global-toggle {
  display: flex; gap: 6px; margin-top: 16px; margin-bottom: 16px;
}
.ppo-global-pill {
  padding: 5px 14px; font-size: 12px; font-weight: 500;
  border: 1px solid var(--border); border-radius: 999px;
  background: transparent; color: var(--text-muted);
  cursor: pointer; white-space: nowrap; line-height: 1.4;
  display: flex; align-items: center; gap: 6px;
  transition: border-color .12s, background .12s, color .12s;
}
.ppo-global-pill.is-active {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, var(--bg-card));
  color: var(--text); font-weight: 600;
}
.ppo-global-pill:hover:not(.is-active) {
  border-color: color-mix(in srgb, var(--accent) 40%, var(--border));
  color: var(--text);
}
.ppo-save-badge {
  font-size: 10px; font-weight: 700; letter-spacing: .03em;
  background: color-mix(in srgb, var(--accent) 12%, var(--bg-card));
  color: var(--accent); border-radius: 999px;
  padding: 1px 6px;
}
.ppo-cards {
  display: flex; flex-direction: column; gap: 10px;
}
.ppo-card {
  border: 1px solid var(--border); border-radius: calc(var(--radius) * 1.5);
  padding: 11px 13px;
  background: var(--bg-card);
}
.ppo-card--basic {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
  background: color-mix(in srgb, var(--accent) 10%, #fff);
}
.ppo-card--premium {
  border-color: color-mix(in srgb, var(--premium) 50%, var(--border));
  background: color-mix(in srgb, var(--premium) 10%, #fff);
}
.ppo-card--recommended {
  position: relative; border-width: 2px;
  border-color: var(--premium);
  box-shadow: 0 3px 14px color-mix(in srgb, var(--premium) 22%, transparent);
}
.ppo-card-badge {
  position: absolute; top: -9px; left: 12px;
  background: var(--premium); color: #fff;
  font-size: 10px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
  padding: 2px 8px; border-radius: 999px;
}
.ppo-card--plus {
  border-color: color-mix(in srgb, var(--plus) 40%, var(--border));
  background: color-mix(in srgb, var(--plus) 10%, #fff);
}
.ppo-card-head {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 10px;
}
.ppo-card-name {
  font-size: 14px; font-weight: 700; color: var(--text);
}
.ppo-card-price {
  font-size: 13px; font-weight: 600; color: var(--text-muted);
}
.ppo-card-features {
  list-style: none; padding: 0; margin: 0 0 12px;
  display: flex; flex-direction: column; gap: 4px;
}
.ppo-card-features li {
  font-size: 12px; color: var(--text); line-height: 1.45;
  padding-left: 14px; position: relative;
}
.ppo-card-features li::before {
  content: '✓'; position: absolute; left: 0;
  font-size: 11px; font-weight: 700; color: var(--text-muted);
}
.ppo-card--basic   .ppo-card-features li::before { color: var(--accent); }
.ppo-card--premium .ppo-card-features li::before { color: var(--premium); }
.ppo-card--plus    .ppo-card-features li::before { color: var(--plus); }
.ppo-card-cta {
  width: 100%; padding: 6px 12px;
  border: 1.5px solid var(--accent);
  background: transparent; color: var(--accent); border-radius: 999px;
  font-size: 12px; font-weight: 600; cursor: pointer; text-align: center;
  transition: background .15s, color .15s, border-color .15s;
}
.ppo-card-cta--basic {
  background: color-mix(in srgb, var(--accent) 12%, #fff); border-color: var(--accent); color: var(--accent);
}
.ppo-card-cta--basic:hover { background: var(--accent); color: #fff; }
.ppo-card-cta--premium {
  background: color-mix(in srgb, var(--premium) 10%, #fff); border-color: var(--premium); color: var(--premium);
}
.ppo-card-cta--premium:hover { background: var(--premium); color: #fff; }
.ppo-card-cta--plus {
  background: color-mix(in srgb, var(--plus) 10%, #fff); border-color: var(--plus); color: var(--plus);
}
.ppo-card-cta--plus:hover { background: var(--plus); color: #fff; }
.ppo-mode-pills {
  display: flex;
  gap: 4px;
}
.ppo-mode-pill {
  padding: 5px 11px;
  font-size: 12px;
  font-weight: 500;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  white-space: nowrap;
  line-height: 1.4;
}
.ppo-mode-pill.is-active {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, #fff);
  color: var(--text);
  font-weight: 600;
}
.ppo-mode-pill:hover:not(.is-active) {
  border-color: color-mix(in srgb, var(--accent) 40%, var(--border));
  color: var(--text);
}
.profile-plan-option {
  margin: 0 0 10px;
}
.profile-plan-option:last-of-type { margin-bottom: 0; }
.profile-plan-option-label {
  line-height: 1.35;
  font-size: 13px;
  font-weight: 600;
}
.profile-plan-option-price {
  font-size: 11px;
  font-weight: 400;
  color: var(--text-muted);
}
.profile-plan-pill {
  border: 1px solid color-mix(in srgb, var(--accent) 45%, #cbd5e1);
  background: color-mix(in srgb, var(--accent) 8%, #fff);
  color: var(--text);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  padding: 7px 14px;
  white-space: nowrap;
  cursor: pointer;
}
.profile-plan-pill:hover {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 14%, #fff);
}
.profile-deletion-section {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}
.profile-delete-link {
  background: none; border: none; padding: 0; cursor: pointer;
  font-size: 12px; color: var(--text-muted); font-family: var(--font-ui);
  text-decoration: none; transition: color .15s;
}
.profile-delete-link:hover { color: var(--danger); }
.profile-deletion-confirm {
  margin-top: 8px;
}
.profile-deletion-confirm-text {
  font-size: 12px;
  color: var(--text-muted);
  margin: 0 0 10px;
  line-height: 1.5;
}
.profile-deletion-confirm-form {
  display: flex;
  gap: 8px;
  align-items: center;
}
.profile-deletion-notice {
  margin-top: 16px;
  padding: 12px 14px;
  border-radius: var(--radius);
  font-size: 13px;
}
.profile-deletion-notice--scheduled {
  background: color-mix(in srgb, #ef4444 8%, #fff);
  border: 1px solid color-mix(in srgb, #ef4444 30%, #fff);
}
.profile-deletion-notice--pending {
  background: color-mix(in srgb, #f59e0b 8%, #fff);
  border: 1px solid color-mix(in srgb, #f59e0b 30%, #fff);
}
.profile-deletion-notice-text {
  margin: 0 0 10px;
  line-height: 1.5;
}
.profile-deletion-cancel-form { margin: 0; }
.profile-plan-pill--cancel {
  border-color: #fca5a5;
  background: #fff5f5;
  color: #7f1d1d;
}
.profile-plan-pill--cancel:hover {
  border-color: #ef4444;
  background: #fee2e2;
}
.profile-plan-option-note {
  margin: 6px 0 0;
  font-size: 12px;
  line-height: 1.45;
  color: var(--text-muted);
}
.profile-plan-switch-form { margin-bottom: 8px; }
.profile-plan-switch-form--inline { margin-bottom: 0; }
.profile-plan-summary .profile-view-field--action {
  align-items: center;
}
.profile-plan-switch-row {
  display: grid;
  grid-template-columns: minmax(130px, 1fr) minmax(130px, 1fr) auto;
  gap: 6px;
  align-items: center;
}
.profile-plan-select {
  width: 100%;
  min-width: 0;
  font-size: 13px;
  padding: 7px 28px 7px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg);
  color: var(--text);
}
@media (max-width: 640px) {
  .profile-plan-switch-row {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 900px) {
  .profile-plan-layout { gap: 10px; }
}
.profile-payments-wrap {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.profile-payments-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.profile-payments-table th,
.profile-payments-table td {
  text-align: left;
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
}
.profile-payments-table thead th {
  color: var(--text-muted);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .03em;
  background: color-mix(in srgb, var(--bg-card) 85%, #f5f5f5);
}
.profile-payments-table tbody tr:last-child td { border-bottom: none; }

@media (max-width: 980px) {
  .profile-plan-layout {
    grid-template-columns: 1fr;
  }
}


/* Demo manuscript selector — styled to look like the bold title */
/* Demo manuscript selector — wrapper gives the pill shape; native select is invisible overlay */
.demo-selector-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1.5px solid var(--border);
  border-radius: 20px;
  padding: 4px 12px 4px 14px;
  background: var(--bg-card);
  cursor: pointer;
  flex: 0 0 auto;
  transition: border-color .15s;
}
.demo-selector-wrap:hover { border-color: var(--accent); }
.demo-selector-label {
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
  pointer-events: none;
}
.demo-selector-arrow {
  font-size: 10px;
  color: var(--text-muted);
  pointer-events: none;
  line-height: 1;
}
.demo-selector-menu {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 100%;
  background: var(--bg-card);
  border: 1.5px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 4px 18px rgba(0,0,0,.13);
  z-index: 200;
  overflow: hidden;
  font-family: var(--font-ui);
  white-space: nowrap;
}
.demo-selector-menu.open { display: block; }
.demo-selector-option {
  padding: 8px 16px;
  font-size: 13px;
  color: var(--text);
  cursor: pointer;
}
.demo-selector-option:hover { background: var(--bg); }
.demo-selector-option--active { font-weight: 700; }
.demo-chapters-note { font-size: 11px; color: var(--text-muted); white-space: nowrap; }


/* ── Mobile: dashboard + manuscript views ────────────────────────────────── */
@media (max-width: 700px) {
  /* Header: compact, elevated z-index so dropdown appears above panel overlays */
  .app-header { padding: 0 12px; gap: 8px; z-index: 300; }
  #btn-focus-mode,
  #btn-exit-focus,
  #btn-editor-toolbar-toggle,
  .ws-theme-picker,
  .ws-allowance-badges { display: none !important; }

  /* Show mobile drawer toggle */
  .ws-mobile-panel-btn { display: inline-flex !important; }

  /* In the narrow mobile notes drawer the plot-thread status badge overlaps the
     title and action buttons, so hide it by default here. Status stays editable
     on desktop and in the full-card view. */
  .ws-thread-status-btn { display: none !important; }

  /* Streak chips overflow on small screens; goals visible in profile panel */
  .app-header-streak { display: none !important; }

  /* Language select is a secondary setting; hides to save header space */
  .ms-language-select,
  #ms-language-indicator { display: none !important; }

  /* Compact account button to avoid overflow */
  .ws-account-btn { max-width: 90px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  /* Hide the wordmark in manuscript / sample view to save header space
     (only those headers carry the mobile story-panel button) */
  .app-header:has(.ws-mobile-panel-btn) .app-header-logo--text { display: none; }

  /* Sample-manuscript picker: allow it to shrink and truncate instead of
     pushing the header buttons off-screen */
  .demo-selector-wrap { flex: 0 1 auto; min-width: 0; }
  .demo-selector-label { max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  /* Editor toolbar hidden on mobile */
  #ws-editor-toolbar { display: none !important; }

  /* Upgrade banners wrap cleanly */
  .free-tier-banner { flex-wrap: wrap; font-size: 11px; padding: 6px 12px; }

  /* ── Dashboard ── */
  .dash-layout { height: calc(100dvh - 48px); }
  .dash-sidebar { min-width: 0; }

  /* Profile panel: full-screen overlay instead of pushing the sidebar */
  .dash-profile-open .profile-panel,
  .dash-profile-pinned .profile-panel {
    position: fixed;
    inset: 48px 0 0;
    width: 100% !important;
    max-width: 100%;
    z-index: 200;
    overflow-y: auto;
    border-left: none;
    border-top: 1px solid var(--border);
  }

  /* ── Manuscript layout ── */
  .ws-layout { height: calc(100dvh - 48px); position: relative; }

  /* Hide the desktop collapse button and divider */
  .ws-divider,
  .ws-collapse-btn { display: none !important; }

  /* Left area: slide-in drawer from the left */
  .ws-left-area {
    display: flex !important;
    position: fixed;
    top: 48px; left: 0; bottom: 0;
    width: 100vw;
    z-index: 200;
    background: var(--bg-card);
    transform: translateX(-100%);
    transition: transform .25s ease;
    overflow: hidden;
    flex-direction: row;
  }
  .ws-mobile-panel-open .ws-left-area { transform: translateX(0); }

  /* Strip fills left column of drawer */
  .ws-left-area .ws-strip { width: 150px; height: 100%; overflow-y: auto; border-right: 1px solid var(--border); }

  /* Side panel fills remaining drawer width */
  .ws-left-area .ws-panel.ws-left { flex: 1; min-width: 0; width: auto !important; }
  .ws-left-area .ws-panel.ws-left.ws-side-open { width: auto; }

  /* Backdrop when drawer is open — starts below header so header stays tappable */
  .ws-mobile-backdrop {
    display: none;
    position: fixed;
    inset: 48px 0 0;
    background: rgba(0,0,0,.3);
    z-index: 199;
  }
  .ws-mobile-panel-open .ws-mobile-backdrop { display: block; }

  /* Right panel always fills full width */
  .ws-top-right { flex: 1; }
  .ws-right { flex: 1; }

  /* Right-side header: stats and export menu hidden to save space; search full-width */
  #ws-ms-stats,
  .ws-export-menu { display: none !important; }

  /* Autosave indicator drops to its own line so it doesn't squish buttons */
  .ws-right-header { flex-wrap: wrap; }
  .ws-right-header #save-indicator { flex-basis: 100%; order: 99; font-size: 11px; padding-bottom: 2px; }

  /* Carousel (chapter tabs) fills first row; action buttons wrap to second row */
  .ws-right-header .ws-carousel { flex: 0 0 100%; max-width: 100%; }

  /* Bigger tap targets for the editor top-bar controls on touch screens */
  .ws-right-header > button,
  .ws-right-header > select { min-height: 36px; padding-top: 6px; padding-bottom: 6px; }

  /* Find & Replace overlay: span the editor width instead of a fixed 360px
     that overflows off the screen edge on a phone */
  .ws-search-overlay { left: 10px; right: 10px; width: auto; }

  /* Chapter list: hide per-chapter word count so title + status badge have room */
  .ws-chapter-meta { display: none !important; }

  /* Editor fills the screen */
  .ws-right-body { padding: 10px 12px; }
  .ws-chapter-box {
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* Panel body scroll inside drawer */
  .ws-left .ws-panel-body { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; }

  /* Project targets: title wraps to its own line so body + button have room */
  .ms-target-row { flex-wrap: wrap; gap: 6px 10px; }
  .ms-target-title { width: 100%; }
}

/* ── Community section (landing page) ──────────────────────────────────────── */
.community-genre-filter {
  display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px;
}
.community-genre-btn {
  background: none; border: 1.5px solid var(--border); border-radius: 20px;
  padding: 5px 14px; font-size: 13px; font-weight: 500; color: var(--text-muted);
  cursor: pointer; font-family: var(--font-ui); transition: all .15s;
}
.community-genre-btn:hover { border-color: var(--accent); color: var(--text); }
.community-genre-btn--active { background: var(--accent); border-color: var(--accent); color: #fff; }
.landing-arc-reader-note {
  font-size: 13px; color: var(--text-muted); margin: 16px 0 0; text-align: center;
}
.landing-arc-reader-note-btn {
  background: none; border: none; padding: 0; font-size: inherit;
  color: var(--accent); cursor: pointer; font-family: inherit; font-weight: 600;
  text-decoration: underline; text-underline-offset: 2px;
}
.arc-reader-cta-row {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 20px;
}
.arc-reader-cta-note { font-size: 13px; color: var(--text-muted); }
.arc-reader-total { font-size: 15px; color: var(--text-muted); margin: 0 0 16px; }
.arc-genre-count-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px;
}
.arc-genre-count-card {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 12px 16px;
  display: flex; flex-direction: column; gap: 2px;
}
.arc-genre-count-num { font-size: 22px; font-weight: 700; color: var(--text); line-height: 1; }
.arc-genre-count-label { font-size: 12px; color: var(--text-muted); }
.community-empty { font-size: 14px; color: var(--text-muted); text-align: center; padding: 32px 0; }
.community-avatar-picker {
  display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px;
}
.community-avatar-opt {
  font-size: 22px; width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg); border: 2px solid var(--border);
  border-radius: 8px; cursor: pointer; transition: border-color .15s, background .15s;
  padding: 0; line-height: 1;
}
.community-avatar-opt:hover { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, var(--bg)); }
.community-avatar-opt.is-selected { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, var(--bg)); }

/* ── Select polish ──────────────────────────────────────────────────────────── */
.ws-char-role-sel, .ws-char-modal-role, .ws-char-rel-target, .ws-modal-rel-target,
.ws-thread-status, .ws-font-select, .sb-select, .progress-filter-select,
.profile-plan-select, .admin-tier-select {
  appearance: none; -webkit-appearance: none;
  border-width: 1.5px; border-radius: 20px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23999'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center; background-size: 8px 5px;
}
.ws-char-role-sel:hover, .ws-char-modal-role:hover, .ws-char-rel-target:hover, .ws-modal-rel-target:hover,
.ws-thread-status:hover, .ws-font-select:hover, .sb-select:hover, .progress-filter-select:hover,
.profile-plan-select:hover, .admin-tier-select:hover { border-color: var(--accent); }
.ws-char-role-sel:focus, .ws-char-modal-role:focus, .ws-char-rel-target:focus, .ws-modal-rel-target:focus,
.ws-thread-status:focus, .ws-font-select:focus, .sb-select:focus, .progress-filter-select:focus,
.profile-plan-select:focus, .admin-tier-select:focus { outline: none; border-color: var(--accent); }
.ws-modal-rel-target { font-size: 11px; font-family: inherit; padding: 3px 22px 3px 10px; border: 1.5px solid var(--border); border-radius: 20px; background-color: var(--bg-card); background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0,0,10,6'%3E%3Cpath%20fill='%23999'%20d='M0,0h10L5,6z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 8px center; background-size: 8px 5px; color: var(--text); appearance: none; -webkit-appearance: none; cursor: pointer; transition: border-color .15s; }
.ws-modal-rel-target:hover { border-color: var(--accent); }
.ws-modal-rel-desc { flex: 1; font-size: 11px; font-family: inherit; padding: 3px 10px; border: 1px solid var(--border); border-radius: 20px; background: var(--bg); color: var(--text); min-width: 0; }
.ws-modal-rel-desc::placeholder { color: var(--text-muted); }

/* ── Export dialog ──────────────────────────────────────────────────────────── */
.ws-export-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.45);
  z-index: 1400; display: flex; align-items: center; justify-content: center;
}
.ws-export-dialog {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 14px; width: 480px; max-width: 95vw; max-height: 90vh;
  display: flex; flex-direction: column; overflow: hidden;
  box-shadow: 0 8px 32px rgba(0,0,0,.18);
}
.ws-export-dialog--wide { width: 820px; }
.ws-export-dialog-hd {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px; border-bottom: 1px solid var(--border); flex-shrink: 0;
}
.ws-export-dialog-title { font-size: 15px; font-weight: 700; color: var(--text); }
.ws-export-dialog-close {
  background: none; border: none; font-size: 20px; cursor: pointer;
  color: var(--text-muted); padding: 0 4px; line-height: 1;
}
.ws-export-dialog-close:hover { color: var(--text); }
.ws-export-dialog-cols { flex: 1; min-height: 0; display: flex; overflow: hidden; }
.ws-export-dialog-body { flex: 0 0 320px; overflow-y: auto; padding: 16px 20px; display: flex; flex-direction: column; gap: 14px; border-right: 1px solid var(--border); }
.ws-export-dialog-ft {
  padding: 14px 20px; border-top: 1px solid var(--border);
  display: flex; justify-content: flex-end; flex-shrink: 0;
}
.ws-export-section { display: flex; flex-direction: column; gap: 6px; }
.ws-export-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); }
.ws-export-hint { font-weight: 400; text-transform: none; letter-spacing: 0; font-size: 10px; }
.ws-export-pills { display: flex; flex-wrap: wrap; gap: 6px; }
.ws-export-pill {
  background: var(--bg); border: 1.5px solid var(--border);
  border-radius: 20px; padding: 5px 12px; font-size: 12px; font-weight: 500;
  color: var(--text-muted); cursor: pointer; font-family: var(--font-ui);
  transition: all .12s;
}
.ws-export-pill:hover { border-color: var(--accent); color: var(--text); }
.ws-export-pill--active { background: var(--accent); border-color: var(--accent); color: #fff; }

/* Export preview panel */
.ws-export-preview-col {
  flex: 1; min-width: 0; display: flex; flex-direction: column;
  align-items: center;
  padding: 16px 16px 10px; gap: 8px; background: var(--bg); overflow: hidden;
}
.ws-export-preview-col .ws-export-preview-label { align-self: flex-start; }
.ws-export-preview-label {
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; color: var(--text-muted); flex-shrink: 0;
}
.ws-export-preview-scroll {
  flex: 1; overflow-y: auto; width: 100%; min-height: 0;
}
.ws-export-preview-pages {
  display: flex; flex-direction: column; align-items: center;
  gap: 12px; padding: 4px 0 16px;
}
.ws-ep-page-wrap {
  flex-shrink: 0; overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, black 80%, transparent 100%);
  mask-image: linear-gradient(to bottom, black 80%, transparent 100%);
}
.ws-export-preview-page {
  background: #fff; color: #1a1a1a;
  box-shadow: 0 2px 12px rgba(0,0,0,.14);
  font-family: Georgia, serif; font-size: 12pt;
  line-height: 1.6; position: relative;
}
.ws-export-preview-dim {
  font-size: 11px; font-weight: 600; color: var(--text-muted);
  text-align: center; padding-top: 2px; flex-shrink: 0;
}
.ws-export-trim-desc {
  font-size: 10px; color: var(--text-muted); margin-top: 3px;
}
.ws-ep-heading {
  font-size: 1.2em; font-weight: 700; text-align: center;
  margin-bottom: 1.2em; line-height: 1.3;
}
.ws-ep-body { margin: 0 0 0.1em; }
.ws-ep-scene { text-align: center; margin: 1em 0; }

@media (max-width: 700px) {
  .ws-export-dialog--wide { width: 95vw; }
  .ws-export-dialog-cols { flex-direction: column; }
  .ws-export-dialog-body { flex: none; border-right: none; border-bottom: 1px solid var(--border); max-height: 50vh; }
  .ws-export-preview-col { min-height: 180px; }
}

/* ── Landing page additions ─────────────────────────────────────────────────── */
.landing-for-novelists { padding-top: 0; }
.landing-for-novelists-text { line-height: 1.7; color: var(--text-muted); max-width: 720px; margin-left: auto; margin-right: auto; }
.landing-pain-point { font-size: clamp(16px, 1.4vw, 19px); font-weight: 600; line-height: 1.6; color: var(--text); max-width: 700px; margin-bottom: 10px; }
.landing-comparison { font-size: clamp(13px, 1.1vw, 15px); color: var(--text-muted); font-style: italic; margin-bottom: 0; }
.landing-trust-signal { font-size: 12px; color: var(--text-muted); line-height: 1.6; max-width: 640px; margin-top: 12px; text-align: center; margin-left: auto; margin-right: auto; }

/* ── Newsletter editor ──────────────────────────────────────────────────────── */
.nl-toolbar {
  display: flex; gap: 4px; padding: 6px 8px;
  background: var(--bg); border: 1px solid var(--border);
  border-bottom: none; border-radius: 6px 6px 0 0;
}
.nl-tb-btn {
  background: none; border: 1px solid transparent; border-radius: 4px;
  padding: 3px 9px; font-size: 14px; cursor: pointer; color: var(--text);
  transition: background .12s, border-color .12s;
}
.nl-tb-btn:hover { background: var(--bg-card); border-color: var(--border); }
.nl-tb-color { color: var(--accent); font-weight: 700; }
.nl-tb-clear { color: var(--text-muted); text-decoration: line-through; font-size: 13px; }
.nl-editor {
  min-height: 200px; padding: 10px 12px;
  border: 1px solid var(--border); border-radius: 0 0 6px 6px;
  font-size: 14px; line-height: 1.6; color: var(--text); background: var(--bg-card);
  outline: none;
}
.nl-editor:focus { border-color: var(--accent); }
.nl-preview-backdrop {
  position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 400;
}
.nl-preview-dialog {
  position: fixed; top: 50%; left: 50%; transform: translate(-50%,-50%);
  z-index: 401; width: min(580px, 94vw); max-height: 86vh;
  background: var(--bg-card); border-radius: 12px;
  box-shadow: 0 8px 40px rgba(0,0,0,.2); display: flex; flex-direction: column;
}
.nl-preview-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px; border-bottom: 1px solid var(--border);
  font-size: 14px; flex-shrink: 0;
}
.nl-preview-close {
  background: none; border: none; font-size: 22px; color: var(--text-muted);
  cursor: pointer; line-height: 1; padding: 0 2px;
}
.nl-preview-close:hover { color: var(--text); }
.nl-preview-body { overflow-y: auto; padding: 24px; }
.nl-preview-frame {
  background: #fff; border-radius: 8px; border: 1px solid #e8e8e8;
  padding: 0; overflow: hidden;
}
.nl-body-preview {
  padding: 12px 16px; font-size: 13px; line-height: 1.6; color: var(--text-muted);
  border-top: 1px solid var(--border);
}

/* ── Feedback widget ────────────────────────────────────────────────────────── */
#fb-widget { position: fixed; bottom: 20px; right: 20px; z-index: 300; font-family: var(--font-ui); }
.fb-widget-row { display: flex; align-items: center; gap: 8px; justify-content: flex-end; }
.fb-inbox-btn {
  position: relative; display: flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 50%; border: none;
  background: var(--bg-card); color: var(--text-muted);
  box-shadow: 0 2px 10px rgba(0,0,0,.15); cursor: pointer; transition: color .15s, background .15s;
}
.fb-inbox-btn:hover { color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, var(--bg-card)); }
.fb-inbox-badge {
  position: absolute; top: -4px; right: -4px;
  background: #dc2626; color: #fff; font-size: 10px; font-weight: 700;
  min-width: 16px; height: 16px; border-radius: 8px; padding: 0 3px;
  display: flex; align-items: center; justify-content: center; line-height: 1;
}
.fb-inbox-badge[hidden] { display: none; }
.fb-inbox-panel { width: 340px; }
.fb-inbox-body { max-height: 420px; overflow-y: auto; gap: 0; padding: 0; }
.fb-inbox-empty { color: var(--text-muted); font-size: 13px; margin: 0; padding: 16px; }
.fb-inbox-section-heading { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); padding: 10px 16px 4px; }
.fb-notif { padding: 10px 16px; border-bottom: 1px solid var(--border); }
.fb-notif:last-of-type { border-bottom: none; }
.fb-notif--read { opacity: .7; }
.fb-notif-msg { font-size: 13px; margin: 0 0 4px; color: var(--text); }
.fb-notif-link { font-size: 12px; color: var(--accent); text-decoration: none; margin-left: 6px; }
.fb-notif-link:hover { text-decoration: underline; }
.fb-thread { padding: 12px 16px; border-bottom: 1px solid var(--border); }
.fb-thread:last-child { border-bottom: none; }
.fb-thread--unread { background: color-mix(in srgb, var(--accent) 5%, var(--bg-card)); }
.fb-thread-meta { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.fb-thread-cat { font-size: 11px; font-weight: 600; color: var(--accent); text-transform: uppercase; letter-spacing: .04em; }
.fb-thread-date { font-size: 11px; color: var(--text-muted); }
.fb-thread-msg { font-size: 13px; line-height: 1.5; white-space: pre-wrap; padding: 6px 10px; border-radius: 8px; margin-bottom: 4px; }
.fb-thread-msg:last-child { margin-bottom: 0; }
.fb-thread-msg--you { background: color-mix(in srgb, var(--accent) 8%, var(--bg)); color: var(--text); border-bottom-right-radius: 2px; }
.fb-thread-msg--ds { background: var(--bg); color: var(--text); border: 1px solid var(--border); border-bottom-left-radius: 2px; }
.fb-toggle-btn {
  background: var(--accent); color: #fff; border: none; border-radius: 20px;
  padding: 9px 18px; font-size: 13px; font-weight: 600; cursor: pointer;
  box-shadow: 0 2px 10px rgba(0,0,0,.18); transition: background .15s;
}
.fb-toggle-btn:hover { background: var(--accent-hover); }
.fb-panel {
  position: absolute; bottom: 48px; right: 0;
  width: 320px; background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 12px; box-shadow: 0 6px 32px rgba(0,0,0,.15);
  overflow: hidden;
}
.fb-panel-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px; border-bottom: 1px solid var(--border);
  font-size: 14px; font-weight: 600; color: var(--text);
}
.fb-close-btn {
  background: none; border: none; font-size: 20px; color: var(--text-muted);
  cursor: pointer; padding: 0 2px; line-height: 1;
}
.fb-close-btn:hover { color: var(--text); }
.fb-panel-body { padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; }
.fb-label { font-size: 12px; font-weight: 600; color: var(--text-muted); }
.fb-select, .fb-textarea {
  width: 100%; box-sizing: border-box; font-family: var(--font-ui); font-size: 13px;
  color: var(--text); background: var(--bg); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 7px 10px; transition: border-color .15s;
}
.fb-select:focus, .fb-textarea:focus { outline: none; border-color: var(--accent); }
.fb-textarea { resize: vertical; min-height: 90px; }
.fb-error { font-size: 12px; color: var(--danger); }
.fb-success { font-size: 13px; color: #16a34a; font-weight: 500; }
.fb-send-btn { margin-top: 4px; width: 100%; }

/* ── Planning panel ─────────────────────────────────────────────────────────── */
.ws-panel.ws-right { display: flex; flex-direction: row; overflow: hidden; }
.ws-right-body { position: relative; flex: 1; min-width: 0; display: flex; flex-direction: column; overflow: hidden; padding: 12px; }

.ws-plan-strip {
  flex: 0 0 32px; width: 32px; display: flex; flex-direction: column; align-items: center;
  gap: 0; padding: 6px 0; border-left: 1px solid var(--border); background: var(--bg-card);
  overflow: hidden; z-index: 5;
}
.ws-plan-tab {
  font-size: 15px; line-height: 1;
  padding: 10px 0; color: var(--text-muted); background: none; border: none;
  border-radius: 4px; cursor: pointer; transition: background .15s, color .15s;
  width: 100%; text-align: center;
}
.ws-plan-tab:hover { background: var(--bg-hover); color: var(--text); }
.ws-plan-tab--active { color: var(--accent); }
.ws-plan-tab--disabled { opacity: 0.35; cursor: not-allowed; pointer-events: none; }
.ws-plan-tab--locked { opacity: 0.4; cursor: pointer; }

.ws-plan-overlay {
  display: none; position: absolute; inset: 0; background: var(--bg);
  z-index: 20; flex-direction: column; overflow: hidden;
}
.ws-plan-overlay--open { display: flex; }

.ws-plan-overlay-hdr {
  display: flex; align-items: center; justify-content: space-between;
  padding: 7px 10px; border-bottom: 1px solid var(--border); flex: 0 0 auto;
}
.ws-plan-overlay-title { font-size: 12px; font-weight: 600; color: var(--text); text-transform: uppercase; letter-spacing: 0.05em; }
.ws-plan-count { font-size: 11px; font-weight: 500; color: var(--text-muted); background: var(--bg); border: 1px solid var(--border); border-radius: 999px; padding: 1px 7px; margin-left: 6px; letter-spacing: 0; text-transform: none; vertical-align: middle; }

.ws-plan-grid {
  flex: 1; overflow-y: auto; padding: 8px;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 6px; align-content: start;
}
.ws-plan-card-ghost {
  border: 1.5px dashed color-mix(in srgb, var(--accent) 35%, var(--border)); border-radius: 6px; min-height: 140px; opacity: 0.55;
}
.ws-plan-empty { grid-column: 1 / -1; font-size: 12px; color: var(--text-muted); text-align: center; padding: 20px 0; }

.ws-plan-card {
  background: var(--bg-card); border: 1px solid var(--border); border-radius: 6px;
  padding: 6px 7px; display: flex; flex-direction: column; gap: 3px;
  cursor: grab; min-height: 140px; position: relative; overflow: hidden;
  transition: border-color .1s, box-shadow .1s;
}
.ws-plan-card:hover { border-color: var(--accent); box-shadow: 0 1px 4px rgba(0,0,0,.08); }
.ws-plan-color-popover { position: absolute; top: 28px; right: 6px; z-index: 200; background: var(--bg-card); border: 1px solid var(--border); border-radius: 8px; padding: 6px; display: flex; flex-wrap: wrap; gap: 5px; width: 160px; box-shadow: 0 4px 12px rgba(0,0,0,.15); }
.ws-plan-color-swatch { width: 22px; height: 22px; border-radius: 50%; cursor: pointer; border: 2px solid transparent; transition: transform .1s, border-color .1s; flex-shrink: 0; }
.ws-plan-color-swatch:hover { transform: scale(1.18); }
.ws-plan-color-swatch--active { border-color: rgba(0,0,0,.4); }
.ws-plan-color-clear { background: var(--bg) !important; border: 2px solid var(--border) !important; font-size: 11px; display: flex; align-items: center; justify-content: center; color: var(--text-muted); }
.ws-plan-card--dragging { opacity: 0.35; cursor: grabbing; pointer-events: none; }
@keyframes ws-card-new { 0% { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, var(--bg-card)); } 100% { border-color: var(--border); background: var(--bg-card); } }
.ws-plan-card--new { animation: ws-card-new 1.8s ease-out forwards; }
@keyframes ws-note-new { 0% { border-color: var(--accent); background-color: color-mix(in srgb, var(--accent) 10%, var(--bg)); } 100% { border-color: var(--border); background-color: var(--bg); } }
.ws-note-card--new { animation: ws-note-new 1.8s ease-out forwards; }
.ws-plan-card--drag-over { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 6%, var(--bg-card)); }

.ws-plan-card--colored .ws-plan-card-title-input,
.ws-plan-card--colored .ws-plan-card-notes-input,
.ws-plan-card--colored .ws-plan-card-type-label,
.ws-plan-card--colored .ws-plan-card-btn,
.ws-plan-card--colored .ws-plan-card-grip { color: #374151; opacity: 1; }
.ws-plan-card--colored .ws-plan-card-title-input::placeholder,
.ws-plan-card--colored .ws-plan-card-notes-input::placeholder { color: #6b7280; }
.ws-plan-card-title-input {
  font-size: 11px; font-weight: 600; color: var(--text); background: none; border: none;
  outline: none; width: 100%; padding: 0; font-family: inherit; cursor: text;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ws-plan-card-title-input::placeholder { color: var(--text-muted); opacity: 0.5; font-weight: 400; }
.ws-plan-card-notes-input {
  font-size: 10px; color: var(--text-muted); line-height: 1.4; flex: 1;
  background: none; border: none; outline: none; width: 100%; padding: 0;
  font-family: inherit; resize: none; min-height: 40px; overflow: auto; cursor: text;
}
.ws-plan-card-notes-input::placeholder { opacity: 0.4; }
.ws-plan-card-promote-btn {
  display: block; width: 100%; margin-top: 6px; padding: 4px 0;
  font-size: 10px; font-weight: 500; color: var(--accent); background: none;
  border: 1px solid var(--accent); border-radius: 4px; cursor: pointer;
  font-family: var(--font-ui); transition: background .12s, color .12s;
  text-align: center; opacity: 0.8;
}
.ws-plan-card-promote-btn:hover { background: var(--accent); color: #fff; opacity: 1; }
.ws-plan-card-promote-btn:disabled { opacity: 0.5; cursor: default; }
.ws-plan-card-toprow { display: flex; align-items: center; gap: 4px; margin-bottom: 2px; }
.ws-plan-card-type-label { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); opacity: 0.6; flex: 1; }
.ws-plan-card-grip { font-size: 13px; color: var(--text-muted); opacity: 0.4; cursor: grab; padding: 0 2px; line-height: 1; user-select: none; touch-action: none; }
.ws-plan-card-grip:hover { opacity: 0.8; }
.ws-plan-card-actions { display: flex; gap: 2px; }
.ws-plan-card-btn {
  font-size: 11px; padding: 1px 4px; border: none; background: none;
  color: var(--text-muted); cursor: pointer; border-radius: 3px; line-height: 1.4;
}
.ws-plan-card-btn:hover { background: var(--bg-hover); color: var(--text); }

/* Planning modal */
.ws-plan-modal-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 1200;
  display: flex; align-items: center; justify-content: center;
}
.ws-plan-modal {
  background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px;
  width: 440px; max-width: 95vw; max-height: 80vh; display: flex; flex-direction: column;
  padding: 18px; gap: 8px; box-shadow: 0 8px 32px rgba(0,0,0,.22); overflow: hidden;
}
.ws-plan-modal-hdr { display: flex; align-items: center; justify-content: space-between; }
.ws-plan-modal-type { font-size: 11px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; }
.ws-plan-modal-label { font-size: 11px; font-weight: 600; color: var(--text-muted); }
.ws-plan-modal-input {
  width: 100%; background: var(--bg); border: 1px solid var(--border); border-radius: 5px;
  padding: 6px 8px; font-size: 13px; color: var(--text); font-family: inherit;
}
.ws-plan-modal-input:focus { outline: none; border-color: var(--accent); }
.ws-plan-modal-select {
  width: 100%; background-color: var(--bg-card); border: 1.5px solid var(--border); border-radius: 20px;
  padding: 5px 28px 5px 12px; font-size: 12px; color: var(--text); font-family: var(--font-ui);
  appearance: none; -webkit-appearance: none; cursor: pointer; transition: border-color .15s;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0,0,10,6'%3E%3Cpath%20fill='%23999'%20d='M0,0h10L5,6z'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center; background-size: 8px 5px;
}
.ws-plan-modal-select:focus { outline: none; border-color: var(--accent); }
.ws-plan-modal-select:hover { border-color: var(--accent); }
.ws-plan-modal-textarea {
  width: 100%; background: var(--bg); border: 1px solid var(--border); border-radius: 5px;
  padding: 6px 8px; font-size: 13px; color: var(--text); font-family: inherit;
  resize: none; min-height: 140px; flex: 1;
}
.ws-plan-modal-textarea:focus { outline: none; border-color: var(--accent); }
.ws-plan-modal-actions { display: flex; gap: 8px; justify-content: flex-end; align-items: center; margin-top: 4px; }
.ws-plan-modal-tl-prompt { font-size: 12px; color: var(--text-muted); flex: 1; }

.ws-plan-char-wrap { position: relative; }
.ws-plan-char-suggestions {
  display: none; position: absolute; top: calc(100% + 3px); left: 0; right: 0;
  background: var(--bg-card); border: 1.5px solid var(--border); border-radius: 10px;
  box-shadow: 0 4px 16px rgba(0,0,0,.15); z-index: 100; list-style: none;
  margin: 0; padding: 4px; max-height: 200px; overflow-y: auto;
}
.ws-plan-char-suggestions--open { display: block; }
.ws-plan-char-option {
  padding: 7px 10px; font-size: 13px; color: var(--text); border-radius: 6px;
  cursor: pointer; transition: background .1s;
}
.ws-plan-char-option:hover { background: var(--bg-hover); }
.ws-plan-char-option--new {
  color: var(--accent); border-top: 1px solid var(--border); margin-top: 3px; padding-top: 9px;
}

@media (max-width: 700px) {
  .ws-plan-strip { flex: 0 0 26px; width: 26px; }
  .ws-plan-tab { font-size: 13px; padding: 8px 0; }
}

/* ── Map view ───────────────────────────────────────────────────────────────── */
#ws-plan-grid-section { display: flex; flex-direction: column; flex: 1; overflow: hidden; }
#ws-plan-map-section  { display: none; flex-direction: column; flex: 1; overflow: hidden; }

.ws-map-hdr {
  display: flex; align-items: center; gap: 8px; padding: 7px 10px;
  border-bottom: 1px solid var(--border); flex: 0 0 auto; flex-wrap: wrap;
}
.ws-map-filters { display: flex; gap: 5px; flex: 1; flex-wrap: wrap; }
.ws-map-filter-btn {
  font-size: 11px; font-weight: 600; padding: 3px 10px; border-radius: 20px;
  border: 2px solid var(--mc, #888); background: none; color: var(--mc, #888);
  cursor: pointer; transition: background .15s, color .15s; opacity: 0.45;
}
.ws-map-filter-btn--on { background: var(--mc, #888); color: #fff; opacity: 1; }
.ws-map-filter-initial { font-weight: 800; opacity: 0.75; margin-right: 3px; }

.ws-map-connect-btn {
  font-size: 11px; font-weight: 600; padding: 4px 12px; border-radius: 20px;
  border: 1.5px solid var(--border); background: none; color: var(--text-muted);
  cursor: pointer; transition: background .15s, color .15s, border-color .15s;
}
.ws-map-connect-btn--on { background: var(--accent); border-color: var(--accent); color: #fff; }

.ws-map-wrap {
  flex: 1; overflow: auto; position: relative;
  background: var(--bg);
  background-image: radial-gradient(circle, rgba(128,128,128,0.15) 1px, transparent 1px);
  background-size: 24px 24px;
}
.ws-map-svg {
  position: absolute; top: 0; left: 0; z-index: 1;
  width: 3000px; height: 2400px; pointer-events: none;
}
.ws-map-svg line, .ws-map-svg text { pointer-events: all; cursor: pointer; }
.ws-map-canvas {
  position: absolute; top: 0; left: 0; z-index: 2;
  width: 3000px; height: 2400px; pointer-events: none;
}
.ws-map-canvas--connect { cursor: crosshair; }
.ws-map-chip { z-index: 3; pointer-events: all; }

/* ── The connected board (whole-manuscript tabular view) ── */
.ws-map-svg { display: none; }                              /* old freeform overlay, unused */
.ws-map-canvas { position: static; width: auto; height: auto; pointer-events: auto; }
.ws-map-wrap { background-image: none; }
.ws-map-hdr .ws-board-hint { font-size: 12px; color: var(--text-muted); }
.ws-board { position: relative; display: flex; min-width: 720px; background: var(--bg-card); }
.ws-board-links { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 4; }
.ws-board-cline { fill: none; stroke: var(--accent); stroke-width: 2; opacity: .9; stroke-linecap: round; }
.ws-board-grid { flex: 1 1 auto; display: grid; grid-template-columns: 118px 1fr 1fr 1fr; }
.ws-board-colhead { font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--text-muted); padding: 10px 10px 7px; border-bottom: 2px solid var(--border);
  position: sticky; top: 0; background: var(--bg-card); z-index: 3; }
.ws-board-colhead.ws-board-ch { border-right: 2px solid var(--border); }
.ws-board-cell { padding: 8px 10px; border-bottom: 1px dotted var(--border); min-height: 46px; box-sizing: border-box; transition: background .12s; }
.ws-board-cell.ws-board-ch { border-right: 2px solid var(--border); display: flex; flex-direction: column; justify-content: center; gap: 2px; }
.ws-board-chnum { font-size: 9.5px; color: var(--text-muted); font-weight: 700; letter-spacing: .08em; }
.ws-board-chttl { font-size: 13px; line-height: 1.2; color: var(--text); }
.ws-board-cell.ws-board-lit { background: color-mix(in srgb, var(--accent) 10%, transparent); }
.ws-board-cell.ws-board-unplaced { background: color-mix(in srgb, var(--text-muted) 7%, transparent); }
.ws-board-empty { color: var(--text-muted); opacity: .5; font-size: 12px; }
.ws-board-entry { position: relative; z-index: 5; display: inline-flex; align-items: center; gap: 6px;
  padding: 2px 6px; margin: 1px 0; border-radius: 6px; font-size: 12.5px; color: var(--text); transition: opacity .12s, background .12s; }
.ws-board-linkable { cursor: pointer; }
.ws-board-dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; }
.ws-board-dot--scene { background: #5b7aa8; }
.ws-board-dot--character { background: #4f7a6a; }
.ws-board-dot--location { background: #a9713f; }
.ws-board--focus .ws-board-entry { opacity: .28; }
.ws-board--focus .ws-board-entry.ws-board-hot { opacity: 1; background: color-mix(in srgb, var(--accent) 12%, transparent); }
.ws-board-entry.ws-board-selected { outline: 2px solid var(--accent); }
.ws-board-wrap--connect .ws-board-linkable { cursor: crosshair; }
.ws-board-rail { flex: 0 0 200px; position: relative; border-left: 2px solid var(--border); }
.ws-board-railbody { position: relative; }
.ws-board-span { position: absolute; box-sizing: border-box; width: 88px; border-radius: 10px; padding: 7px 8px;
  overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,.08);
  background: color-mix(in srgb, var(--sc) 13%, var(--bg-card));
  border: 1px solid color-mix(in srgb, var(--sc) 40%, var(--border)); border-top: 3px solid var(--sc); }
.ws-board-span--plot_thread { --sc: #8a5a86; }
.ws-board-span--storyline { --sc: #3f8a86; }
.ws-board-span-tag { font-size: 8px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--sc); }
.ws-board-span-nm { font-size: 12px; font-weight: 600; color: var(--text); line-height: 1.2; margin-top: 2px; }

.ws-map-chip {
  position: absolute; width: 140px; height: 36px;
  border-radius: 18px; padding: 0 12px;
  display: flex; align-items: center;
  cursor: move; user-select: none; touch-action: none;
  border: 1px solid var(--border);
  box-shadow: 0 2px 6px rgba(0,0,0,.2);
  transition: box-shadow .1s, transform .1s;
}
.ws-map-chip:hover { box-shadow: 0 4px 12px rgba(0,0,0,.28); transform: translateY(-1px); }
.ws-map-chip--dragging { box-shadow: 0 6px 18px rgba(0,0,0,.3); transform: scale(1.04); z-index: 10; }
.ws-map-chip--selected { outline: 3px solid #fff; outline-offset: 2px; z-index: 5; }
.ws-map-chip-initial {
  font-size: 10px; font-weight: 800; color: rgba(255,255,255,0.75);
  flex-shrink: 0; margin-right: 5px; letter-spacing: 0.02em;
  background: rgba(0,0,0,0.15); border-radius: 4px; padding: 0 4px; line-height: 1.6;
}
.ws-map-chip-label {
  font-size: 11px; font-weight: 600; color: #fff;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0;
}
.ws-map-chip--light .ws-map-chip-label { color: #1f2937; }
.ws-map-chip--light .ws-map-chip-initial { color: rgba(0,0,0,0.55); background: rgba(0,0,0,0.08); }

/* Map tooltip */
.ws-map-tooltip {
  position: fixed; z-index: 9999;
  background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px;
  padding: 12px 14px; width: 220px; max-width: calc(100vw - 16px); box-shadow: 0 6px 24px rgba(0,0,0,.2);
  display: flex; flex-direction: column; gap: 6px; pointer-events: all;
}
.ws-map-tooltip-type { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; }
.ws-map-tooltip-title { font-size: 13px; font-weight: 600; color: var(--text); }
.ws-map-tooltip-notes { font-size: 12px; color: var(--text-muted); line-height: 1.5; max-height: 120px; overflow-y: auto; }
.ws-map-tooltip-nav {
  margin-top: 4px; font-size: 11px; font-weight: 600; color: var(--accent);
  background: none; border: none; padding: 0; cursor: pointer; text-align: left;
}
.ws-map-tooltip-nav:hover { text-decoration: underline; }
.ws-map-tooltip--pinned { border-color: var(--accent); }

.ws-card-nav-highlight {
  animation: ws-nav-pulse 2.5s ease-out forwards !important;
}
@keyframes ws-nav-pulse {
  0%   { box-shadow: 0 0 0 3px var(--accent) !important; }
  60%  { box-shadow: 0 0 0 3px var(--accent) !important; }
  100% { box-shadow: none !important; }
}

/* Planning badge on left panel entries */
.ws-plan-badge {
  font-size: 10px; color: var(--accent); opacity: 0.8;
  flex-shrink: 0; line-height: 1; margin-left: 2px;
}

/* ── Help Centre ──────────────────────────────────────────────────────────── */

/* Tier badges */
.help-tier {
  display: inline-block;
  font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  padding: 1px 6px; border-radius: 10px; vertical-align: middle;
  white-space: nowrap; line-height: 1.6;
}
.help-tier--basic {
  background: color-mix(in srgb, var(--accent) 10%, var(--bg-card));
  color: var(--accent);
  border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent);
}
.help-tier--premium {
  background: color-mix(in srgb, var(--premium) 10%, var(--bg-card));
  color: var(--premium);
  border: 1px solid color-mix(in srgb, var(--premium) 25%, transparent);
}
.help-tier--plus {
  background: color-mix(in srgb, var(--plus) 10%, var(--bg-card));
  color: var(--plus);
  border: 1px solid color-mix(in srgb, var(--plus) 25%, transparent);
}

/* ── Search ──────────────────────────────────────────────────────────────── */
.help-search-wrap {
  display: flex; align-items: center; gap: 8px;
  margin-left: auto;
}
.help-search-wrap--drawer {
  flex: 1; margin-left: 0;
}
.help-search-input {
  padding: 4px 10px; font-size: 13px;
  border: 1px solid var(--border); border-radius: 999px;
  background: var(--bg); color: var(--text);
  width: 200px; outline: none;
  font-family: var(--font-ui);
  transition: border-color .15s, width .2s;
}
.help-search-input:focus { border-color: var(--accent); width: 260px; }
.help-search-wrap--drawer .help-search-input { width: 100%; }
.help-search-wrap--drawer .help-search-input:focus { width: 100%; }
.help-search-count {
  font-size: 11px; color: var(--text-muted); white-space: nowrap; flex-shrink: 0;
}
.help-section--hidden { display: none; }
.help-nav-link--dimmed { opacity: .35; }
.help-search-mark {
  background: color-mix(in srgb, #f59e0b 35%, transparent);
  border-radius: 2px; padding: 0 1px;
}

/* ── Full page layout ────────────────────────────────────────────────────── */

.help-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
}

.help-page-header {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; gap: 16px;
  padding: 0 24px;
  height: 48px;
  background: var(--bg-card);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.help-page-back {
  font-size: 13px; color: var(--text-muted); text-decoration: none; flex-shrink: 0;
  transition: color .15s;
}
.help-page-back:hover { color: var(--text); text-decoration: none; }
.help-page-wordmark {
  font-family: 'Lora', Georgia, serif;
  font-size: 17px; letter-spacing: -.02em; line-height: 1;
  flex-shrink: 0;
}
.help-page-wordmark .wm-d { font-weight: 700; color: var(--accent); }
.help-page-wordmark .wm-s { font-weight: 400; color: var(--text); }
.help-page-title-label {
  font-size: 13px; color: var(--text-muted);
}

.help-layout {
  display: flex;
  flex: 1;
  min-height: 0;
  max-width: 1140px;
  margin: 0 auto;
  width: 100%;
  padding: 0 24px;
  gap: 48px;
}

/* Sidebar */
.help-sidebar {
  width: 210px;
  flex-shrink: 0;
  padding: 28px 0;
  position: sticky;
  top: 48px;
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  align-self: flex-start;
}
.help-sidebar::-webkit-scrollbar { width: 4px; }
.help-sidebar::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }

.help-nav-list {
  list-style: none;
  padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 2px;
}
.help-nav-list > li { margin: 0; }
.help-nav-group { margin-top: 10px; }
.help-nav-group-label {
  display: block;
  font-size: 10px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: var(--text-muted);
  padding: 4px 10px 2px;
}
.help-nav-sublist {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 1px;
}
.help-nav-link {
  display: block;
  padding: 5px 10px;
  font-size: 13px;
  color: var(--text-muted);
  text-decoration: none;
  border-radius: var(--radius);
  transition: color .12s, background .12s;
  line-height: 1.35;
}
.help-nav-link:hover { color: var(--text); background: color-mix(in srgb, var(--text) 5%, var(--bg)); text-decoration: none; }
.help-nav-link--active { color: var(--accent) !important; background: color-mix(in srgb, var(--accent) 8%, var(--bg)) !important; font-weight: 600; }

/* Main content */
.help-main {
  flex: 1;
  min-width: 0;
  padding: 28px 0 64px;
  max-width: 720px;
}

/* Sections */
.help-section {
  padding-top: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 12px;
  scroll-margin-top: 64px;
}
.help-section:last-child { border-bottom: none; }
.help-section h2 {
  font-size: 20px; font-weight: 700; color: var(--text);
  margin-bottom: 12px; line-height: 1.25;
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.help-section h3 {
  font-size: 14px; font-weight: 700; color: var(--text);
  margin: 20px 0 6px;
}
.help-section h4 {
  font-size: 13px; font-weight: 700; color: var(--text);
  margin: 0 0 4px;
}
.help-section p {
  font-size: 14px; line-height: 1.65; color: var(--text);
  margin-bottom: 8px;
}
.help-section p:last-child { margin-bottom: 0; }
.help-lead {
  font-size: 15px !important; color: var(--text-muted) !important;
  margin-bottom: 20px !important;
}
.help-note {
  font-size: 13px !important; color: var(--text-muted) !important;
  font-style: italic;
}

/* Lists */
.help-list {
  margin: 8px 0 10px 20px;
  padding: 0;
  display: flex; flex-direction: column; gap: 6px;
}
.help-list--ol { list-style: decimal; }
.help-list li { font-size: 14px; line-height: 1.6; color: var(--text); }

/* Quick start steps */
.help-steps {
  display: flex; flex-direction: column; gap: 14px;
  margin-top: 4px;
}
.help-step {
  display: flex; gap: 14px; align-items: flex-start;
}
.help-step-num {
  flex-shrink: 0;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--accent) 12%, var(--bg-card));
  border: 1.5px solid color-mix(in srgb, var(--accent) 30%, transparent);
  color: var(--accent);
  font-size: 12px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.help-step-body strong { display: block; font-size: 14px; margin-bottom: 3px; }
.help-step-body p { margin: 0; font-size: 13px; color: var(--text-muted); line-height: 1.55; }

/* AI feature grid */
.help-ai-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 10px;
  margin: 12px 0;
}
.help-ai-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 14px;
}
.help-ai-card h4 { font-size: 13px; font-weight: 700; margin-bottom: 5px; }
.help-ai-card p  { font-size: 12px; color: var(--text-muted); line-height: 1.55; margin: 0; }

/* Coach list */
.help-coach-list {
  display: flex; flex-direction: column; gap: 0;
  border: 1px solid var(--border); border-radius: var(--radius);
  overflow: hidden;
  margin: 12px 0;
}
.help-coach-item {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
}
.help-coach-item:last-child { border-bottom: none; }
.help-coach-name {
  flex-shrink: 0; width: 180px;
  font-size: 13px; font-weight: 600; color: var(--text);
}
.help-coach-desc {
  font-size: 13px; color: var(--text-muted); line-height: 1.5;
}

/* Keyboard shortcuts */
kbd {
  display: inline-block;
  font-family: var(--font-ui);
  font-size: 11px; font-weight: 600;
  padding: 1px 5px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-bottom-width: 2px;
  border-radius: 3px;
  color: var(--text);
  line-height: 1.5;
}
.help-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  margin: 12px 0;
}
.help-table th, .help-table td {
  padding: 9px 12px;
  text-align: left;
  border-bottom: 1px solid var(--border);
}
.help-table th {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  color: var(--text-muted);
  background: var(--bg);
}
.help-table td { color: var(--text); }
.help-table-muted { color: var(--text-muted); font-size: 11px; margin-left: 4px; }

/* FAQ */
.help-faq-item {
  border-bottom: 1px solid var(--border);
  padding: 2px 0;
}
.help-faq-item:last-child { border-bottom: none; }
.help-faq-item summary {
  cursor: pointer;
  list-style: none;
  display: flex; align-items: center; justify-content: space-between;
  padding: 13px 4px;
  font-size: 14px; font-weight: 600; color: var(--text);
  user-select: none;
  gap: 8px;
}
.help-faq-item summary::-webkit-details-marker { display: none; }
.help-faq-item summary::after {
  content: '+'; flex-shrink: 0;
  font-size: 18px; font-weight: 400; color: var(--text-muted);
  transition: transform .15s;
}
.help-faq-item[open] summary::after { content: '−'; }
.help-faq-item[open] summary { color: var(--accent); }
.help-faq-item > p {
  font-size: 14px; line-height: 1.65; color: var(--text);
  padding: 0 4px 14px;
  margin: 0;
}
.help-faq-item > p + p { padding-top: 0; margin-top: -6px; }

/* ── Manuscript drawer ────────────────────────────────────────────────────── */

/* ── Mobile nav toggle (full help page) ─────────────────────────────────── */
.help-mobile-nav-btn {
  display: none;
  background: none; border: 1px solid var(--border); border-radius: 999px;
  font-size: 12px; font-weight: 600; color: var(--text-muted);
  padding: 3px 10px; cursor: pointer; flex-shrink: 0;
  transition: border-color .15s, color .15s;
}
.help-mobile-nav-btn:hover { border-color: var(--accent); color: var(--accent); }
.help-mobile-nav { display: none; }

@media (max-width: 680px) {
  .help-mobile-nav-btn { display: block; }
  .help-page-wordmark, .help-page-title-label { display: none; }
  .help-page-header { gap: 10px; padding: 0 16px; }
  .help-search-input { width: 140px; }
  .help-search-input:focus { width: 140px; }

  .help-sidebar { display: none; }
  .help-layout { padding: 0 16px; gap: 0; }
  .help-main { padding: 20px 0 48px; }

  .help-mobile-nav {
    background: var(--bg-card);
    border-bottom: 1px solid var(--border);
    padding: 12px 16px 16px;
  }
  .help-mobile-nav:not([hidden]) { display: block; }
}

.help-drawer-overlay {
  display: none;
  position: fixed; inset: 0;
  background: rgba(0,0,0,.3);
  z-index: 1200;
}
.help-drawer-overlay--open { display: block; }

.help-drawer {
  position: fixed; top: 0; right: -580px; bottom: 0;
  width: 560px;
  background: var(--bg-card);
  border-left: 1px solid var(--border);
  box-shadow: -4px 0 24px rgba(0,0,0,.12);
  z-index: 1201;
  display: flex; flex-direction: column;
  transition: right .25s ease;
}
.help-drawer--open { right: 0; }

.help-drawer-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 16px;
  height: 48px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.help-drawer-header-title {
  font-size: 14px; font-weight: 700; color: var(--text);
  width: 154px; flex-shrink: 0;
}
.help-drawer-close {
  background: none; border: none; font-size: 20px; color: var(--text-muted);
  cursor: pointer; padding: 4px; line-height: 1;
  transition: color .12s;
}
.help-drawer-close:hover { color: var(--text); }

.help-drawer-body {
  flex: 1; min-height: 0;
  display: flex;
  overflow: hidden;
}

.help-drawer-nav {
  width: 170px; flex-shrink: 0;
  border-right: 1px solid var(--border);
  overflow-y: auto;
  padding: 12px 0;
  background: var(--bg);
}
.help-drawer-nav::-webkit-scrollbar { width: 3px; }
.help-drawer-nav::-webkit-scrollbar-thumb { background: var(--border); }

.help-drawer-nav .help-nav-link {
  font-size: 12px;
  padding: 4px 10px;
}
.help-drawer-nav .help-nav-group-label {
  font-size: 9px;
  padding: 6px 10px 1px;
}

.help-drawer-content {
  flex: 1; min-width: 0;
  overflow-y: auto;
  padding: 20px 20px 48px;
}
.help-drawer-content::-webkit-scrollbar { width: 4px; }
.help-drawer-content::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }

/* Compact content sizing inside drawer */
.help-drawer-content .help-section { scroll-margin-top: 20px; }
.help-drawer-content .help-section h2 { font-size: 16px; }
.help-drawer-content .help-section h3 { font-size: 13px; margin-top: 14px; }
.help-drawer-content .help-steps { gap: 10px; }
.help-drawer-content .help-ai-grid { grid-template-columns: 1fr; }
.help-drawer-content .help-coach-name { width: 148px; }
.help-drawer-content .help-coach-item { padding: 8px 12px; }

/* ── Responsive ──────────────────────────────────────────────────────────── */

@media (max-width: 860px) {
  .help-layout { flex-direction: column; padding: 0 16px; gap: 0; }
  .help-sidebar {
    position: static; max-height: none; width: 100%;
    padding: 16px 0 0; border-bottom: 1px solid var(--border);
    margin-bottom: 8px;
  }
  .help-nav-list { flex-direction: row; flex-wrap: wrap; gap: 4px; }
  .help-nav-group { width: 100%; }
  .help-nav-sublist { flex-direction: row; flex-wrap: wrap; }
  .help-nav-group-label { display: none; }
  /* Drawer nav stays vertical regardless of screen size */
  .help-drawer-nav .help-nav-list,
  .help-drawer-nav .help-nav-sublist { flex-direction: column; flex-wrap: nowrap; }
  .help-drawer-nav .help-nav-group-label { display: block; }
  /* On mobile, drawer hides its side nav and uses the Contents toggle instead */
  .help-drawer-nav { display: none; }
  .help-drawer-header .help-mobile-nav-btn { display: block; }
  .help-search-wrap--drawer { flex: unset; }
  .help-drawer-mobile-nav { border-bottom: 1px solid var(--border); padding: 12px 16px 16px; }
  .help-drawer-mobile-nav:not([hidden]) { display: block; }
  .help-drawer-content { padding: 16px 16px 48px; }
  .help-drawer { width: 100%; right: -100%; }
  .help-drawer--open { right: 0; }
}

/* ── Dashboard v2 ─────────────────────────────────────────────────────────── */

/* Left nav panel */
.dash-nav {
  width: 220px;
  flex-shrink: 0;
  background: var(--bg-card);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overflow-x: hidden;
}
.dash-nav-identity {
  padding: 16px 16px 14px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.dash-nav-user-name {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dash-nav-plan-badge {
  font-size: 11px;
  color: var(--text-muted);
}
.dash-nav-role-badges { display: flex; flex-wrap: wrap; gap: 4px; margin: 0 0 5px; }
.dash-nav-role-badge {
  display: inline-flex; align-items: center;
  font-size: 10px; font-weight: 700; letter-spacing: .02em;
  padding: 1px 7px; border-radius: 99px;
}
.dash-nav-role-badge--founding {
  background: color-mix(in srgb, var(--plus) 15%, var(--bg-card));
  color: color-mix(in srgb, var(--plus) 80%, #000);
  border: 1px solid color-mix(in srgb, var(--plus) 35%, var(--border));
}
.dash-nav-role-badge--admin {
  background: color-mix(in srgb, var(--accent) 15%, var(--bg-card));
  color: color-mix(in srgb, var(--accent) 82%, #000);
  border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--border));
}
.dash-nav-section {
  flex: 1;
  padding: 10px 8px 8px;
}
.dash-nav-label {
  display: block;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--text-muted);
  padding: 2px 8px 6px;
}
.dash-nav-sublabel {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--text-muted);
  padding: 10px 8px 4px;
  opacity: .6;
}
.dash-nav-filter--series { padding-left: 12px; }
.dash-nav-filter {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  padding: 6px 8px;
  font-size: 13px;
  font-family: var(--font-ui);
  color: var(--text);
  border-radius: var(--radius);
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dash-nav-filter:hover { background: var(--bg); }
.dash-nav-filter.is-active {
  background: color-mix(in srgb, var(--accent) 10%, var(--bg));
  color: var(--accent);
  font-weight: 600;
}
.dash-nav-series-row {
  display: flex;
  align-items: center;
  gap: 2px;
  border-radius: var(--radius);
}
.dash-nav-series-row:hover { background: var(--bg); }
.dash-nav-series-row .dash-nav-filter {
  flex: 1;
  padding-right: 4px;
}
.dash-nav-series-row:hover .dash-nav-filter { background: none; }
.dash-nav-series-row.is-active { background: color-mix(in srgb, var(--accent) 10%, var(--bg)); }
.dash-nav-series-row.is-active .dash-nav-filter { color: var(--accent); font-weight: 600; }
.dash-nav-series-edit {
  flex-shrink: 0;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-muted);
  font-size: 11px;
  padding: 4px 6px;
  border-radius: 3px;
  opacity: 0;
  transition: opacity .1s;
}
.dash-nav-series-row:hover .dash-nav-series-edit { opacity: 1; }
.dash-nav-series-edit:hover { color: var(--text); background: var(--border); }
.dash-nav-new-col-btn {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  padding: 5px 8px;
  font-size: 12px;
  font-family: var(--font-ui);
  color: var(--accent);
  cursor: pointer;
  margin-top: 2px;
  border-radius: var(--radius);
}
.dash-nav-new-col-btn:hover { background: var(--bg); }
.dash-nav-new-col-form {
  display: none;
  flex-direction: column;
  gap: 6px;
  padding: 6px 8px;
}
.dash-nav-col-input {
  width: 100%;
  font-size: 12px;
  padding: 5px 8px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-card);
  color: var(--text);
  font-family: var(--font-ui);
}
.dash-nav-col-input:focus { outline: none; border-color: var(--accent); }
.dash-nav-rename-form {
  display: none;
  flex-direction: column;
  gap: 4px;
  padding: 4px 8px 6px;
}
.dash-nav-bottom {
  border-top: 1px solid var(--border);
  padding: 10px 8px 12px;
  flex-shrink: 0;
}
.dash-nav-link {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  padding: 7px 8px;
  font-size: 13px;
  font-family: var(--font-ui);
  color: var(--text-muted);
  border-radius: var(--radius);
  cursor: pointer;
  text-decoration: none;
}
.dash-nav-link:hover { background: var(--bg); color: var(--text); }

/* Main area */
.dash-main {
  flex: 1;
  min-width: 0;
  max-width: none;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  background: var(--bg);
}

/* Settings inline in dash-main */
.dash-settings-wrap { padding: 36px 48px 48px; max-width: 600px; }
.dash-settings-wrap--progress { max-width: none; padding-right: 40px; }
.dash-settings-heading { font-size: 20px; font-weight: 700; color: var(--text); margin: 0 0 4px; font-family: var(--font-ui); }

/* Progress two-column layout */
.progress-top-grid { display: grid; grid-template-columns: 300px 1fr; gap: 16px; margin-bottom: 16px; align-items: stretch; }
.progress-top-grid .profile-card { display: flex; flex-direction: column; }
.progress-top-grid .profile-card .profile-section { display: flex; flex-direction: column; }
.progress-top-grid .profile-card--progress .profile-section--progress { flex: 1; min-height: 0; }
/* The activity graph fills its card but does not add to the card's intrinsic
   height (the canvas is absolutely positioned), so the Writing goals card on
   the left always sets the row height with no empty space, and the graph just
   stretches to match it. */
.progress-top-grid .profile-card--progress .progress-chart-wrap { flex: 1 1 0; min-height: 0; height: auto; }
.progress-top-grid .profile-card--progress .progress-chart-wrap canvas { position: absolute; top: 0; left: 0; }
@media (max-width: 820px) {
  .progress-top-grid { grid-template-columns: 1fr; }
  .progress-top-grid .profile-card--progress .progress-chart-wrap { min-height: 240px; }
}

/* Manuscripts section */
.dash-ms-section {
  padding: 28px 32px 32px;
  border-bottom: 1px solid var(--border);
}
.dash-ms-top {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 22px;
  flex-wrap: wrap;
}
.dash-ms-heading {
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
  margin: 0;
  flex: 1;
}
.dash-ms-actions {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;
}
.dash-create-form {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}
.dash-create-input {
  font-size: 13px;
  padding: 6px 10px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  font-family: var(--font-ui);
  background: var(--bg-card);
  color: var(--text);
  width: 200px;
}
.dash-create-input:focus { outline: none; border-color: var(--accent); }
.dash-upload-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-muted);
  cursor: pointer;
  padding: 2px 7px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-card);
  font-family: var(--font-ui);
}
.dash-upload-label:hover { border-color: var(--accent); color: var(--text); }
.dash-upload-label input[type="file"] { display: none; }

/* Manuscript card grid */
.ms-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 14px;
}
.ws-continue-banner {
  display: flex; align-items: center; gap: 8px;
  margin: 0 0 16px; padding: 11px 16px;
  background: var(--bg); border: 1px solid var(--border);
  border-radius: 12px; color: var(--text); text-decoration: none;
  font-family: var(--font-ui); font-size: 14px; font-weight: 500;
  transition: background .15s, border-color .15s;
}
.ws-continue-banner:hover { background: var(--bg-card); border-color: var(--accent); }
.ws-continue-banner strong { color: var(--accent); font-weight: 700; }
/* Dark theme: the cream warm-soft wash leaves light body text unreadable, so
   swap to a subtle accent-tinted dark card that matches the manuscript cards. */
:root[data-theme="dark"] .ws-continue-banner {
  background: color-mix(in srgb, var(--accent) 14%, var(--bg-card));
  border-color: color-mix(in srgb, var(--accent) 30%, var(--border));
}
:root[data-theme="dark"] .ws-continue-banner:hover {
  background: color-mix(in srgb, var(--accent) 22%, var(--bg-card));
  border-color: var(--accent);
}
.ms-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 16px 16px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  position: relative;
  transition: box-shadow .15s, border-color .15s;
}
.ms-card:hover {
  box-shadow: 0 2px 14px rgba(0,0,0,.06);
  border-color: color-mix(in srgb, var(--accent) 35%, var(--border));
}
.ms-card-top {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  min-height: 20px;
}
.ms-card-title-link {
  flex: 1;
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  text-decoration: none;
  line-height: 1.3;
  display: block;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.ms-card-title-link:hover { color: var(--accent); }
.ms-card-rename-form {
  display: none;
  flex-direction: column;
  gap: 6px;
}
.ms-card-rename-actions { display: flex; gap: 6px; }
.ms-card-series {
  font-size: 11px;
  color: var(--accent);
  font-weight: 600;
  opacity: .85;
}
.ms-card-meta {
  font-size: 11px;
  color: var(--text-muted);
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  padding-top: 2px;
}
.ms-card-goal-btn {
  align-self: flex-start;
  background: none;
  border: none;
  padding: 0;
  margin-top: 2px;
  font-size: 11px;
  font-weight: 600;
  color: var(--accent);
  cursor: pointer;
}
.ms-card-goal-btn:hover { text-decoration: underline; }
.ms-card-goal-edit {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  flex-wrap: wrap;
}
.ms-card-goal-input {
  width: 104px;
  font-size: 12px;
  padding: 3px 6px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg);
  color: var(--text);
}
.ms-card-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-top: 6px;
  padding-top: 10px;
}
.ms-card-open {
  font-size: 12px;
  font-weight: 600;
  color: var(--accent);
  text-decoration: none;
  opacity: 0;
  transition: opacity .15s;
}
.ms-card:hover .ms-card-open { opacity: 1; }
.ms-card-menu-btn {
  flex-shrink: 0;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-muted);
  font-size: 16px;
  padding: 0 2px;
  line-height: 1;
  opacity: 0;
  transition: opacity .15s;
  position: relative;
}
.ms-card:hover .ms-card-menu-btn,
.ms-card-menu-btn:focus { opacity: 1; }
.ms-card-menu-btn:hover { color: var(--text); }
.ms-card-dropdown {
  position: absolute;
  top: 36px;
  right: 10px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 4px 16px rgba(0,0,0,.1);
  z-index: 50;
  min-width: 148px;
  display: none;
  overflow: hidden;
}
.ms-card-dropdown.open { display: block; }
.ms-card-dd-item {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  padding: 9px 14px;
  font-size: 13px;
  font-family: var(--font-ui);
  color: var(--text);
  cursor: pointer;
}
.ms-card-dd-item:hover { background: var(--bg); }
.ms-card-dd-item--danger { color: var(--danger, #c0392b); }
.ms-card-dd-item--danger:hover { background: #fef2f2; }
.ms-card-assign-wrap {
  display: none;
  flex-direction: column;
  gap: 6px;
  margin-top: 4px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
}
.ms-card-assign-wrap form { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.ms-card-assign-wrap .sb-assign-no-series { font-size: 12px; color: var(--text-muted); }

/* Card language picker */
.ms-card-language-wrap {
  display: none;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
}
.ms-card-lang-indicator { font-size: 11px; color: var(--text-muted); }

/* Card colour picker */
.ms-card-cover-wrap { padding: 8px 0 4px; }
.ms-card-cover-swatches { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
.ms-cover-swatch { width: 22px; height: 22px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; transition: border-color .15s, transform .1s; flex-shrink: 0; }
.ms-cover-swatch:hover { transform: scale(1.15); }
.ms-cover-swatch.is-active { border-color: var(--accent); }
.ms-cover-swatch--none { background: var(--bg); border-color: var(--border); font-size: 9px; color: var(--text-muted); display: flex; align-items: center; justify-content: center; }
.ms-cover-swatch--sage       { background: #c8dfc0; }
.ms-cover-swatch--dusk       { background: #d4c0e8; }
.ms-cover-swatch--amber      { background: #f0d8a0; }
.ms-cover-swatch--ocean      { background: #a8d0e8; }
.ms-cover-swatch--rose       { background: #e8b8c4; }
.ms-cover-swatch--slate      { background: #b8c8e0; }
.ms-cover-swatch--terracotta { background: #e0b8a8; }
.ms-cover-swatch--forest     { background: #a8c8b0; }
.ms-cover-swatch--ink        { background: #2a3040; }

/* Card cover backgrounds */
.ms-card[data-cover="sage"]       { background: linear-gradient(145deg, #e8f0e4, #d4e6cc); border-color: #c4dab8; }
.ms-card[data-cover="dusk"]       { background: linear-gradient(145deg, #f0e8f8, #e0d0f0); border-color: #d0b8e8; }
.ms-card[data-cover="amber"]      { background: linear-gradient(145deg, #faf0d8, #f4e4b4); border-color: #e8d098; }
.ms-card[data-cover="ocean"]      { background: linear-gradient(145deg, #e0f0fa, #c4e0f4); border-color: #a8ccec; }
.ms-card[data-cover="rose"]       { background: linear-gradient(145deg, #fae8ec, #f4d0d8); border-color: #e8b8c4; }
.ms-card[data-cover="slate"]      { background: linear-gradient(145deg, #e4ecf8, #ccd8f0); border-color: #b4c8e4; }
.ms-card[data-cover="terracotta"] { background: linear-gradient(145deg, #fae4dc, #f0cfc4); border-color: #e0b8a8; }
.ms-card[data-cover="forest"]     { background: linear-gradient(145deg, #dceee0, #c4dcc8); border-color: #a8ccb0; }
.ms-card[data-cover="ink"]        { background: linear-gradient(145deg, #2e3548, #1e2435); border-color: #3a4258; }
.ms-card[data-cover="ink"] .ms-card-title-link,
.ms-card[data-cover="ink"] .ms-card-meta,
.ms-card[data-cover="ink"] .ms-card-series,
.ms-card[data-cover="ink"] .ms-card-open,
.ms-card[data-cover="ink"] .ms-card-menu-btn { color: rgba(255,255,255,0.85); }
.ms-card[data-cover="ink"] .ms-card-open:hover { color: #fff; }

/* Dark-mode cover overrides */
:root[data-theme="dark"] .ms-card[data-cover="sage"]       { background: linear-gradient(145deg, #2a3d2e, #213328); border-color: #334a38; }
:root[data-theme="dark"] .ms-card[data-cover="dusk"]       { background: linear-gradient(145deg, #332840, #2a2038); border-color: #40304e; }
:root[data-theme="dark"] .ms-card[data-cover="amber"]      { background: linear-gradient(145deg, #3d3220, #332818); border-color: #4a3c28; }
:root[data-theme="dark"] .ms-card[data-cover="ocean"]      { background: linear-gradient(145deg, #1e3348, #182840); border-color: #284060; }
:root[data-theme="dark"] .ms-card[data-cover="rose"]       { background: linear-gradient(145deg, #3d2028, #331820); border-color: #4a2830; }
:root[data-theme="dark"] .ms-card[data-cover="slate"]      { background: linear-gradient(145deg, #22304a, #1c2840); border-color: #2c3c58; }
:root[data-theme="dark"] .ms-card[data-cover="terracotta"] { background: linear-gradient(145deg, #3d2820, #332018); border-color: #4a3028; }
:root[data-theme="dark"] .ms-card[data-cover="forest"]     { background: linear-gradient(145deg, #1e3828, #182e22); border-color: #284838; }
:root[data-theme="dark"] .ms-card[data-cover="ink"]        { background: linear-gradient(145deg, #1e2435, #161c2e); border-color: #2a3250; }
:root[data-theme="dark"] .ms-card[data-cover]:not([data-cover="ink"]) .ms-card-title-link,
:root[data-theme="dark"] .ms-card[data-cover]:not([data-cover="ink"]) .ms-card-series,
:root[data-theme="dark"] .ms-card[data-cover]:not([data-cover="ink"]) .ms-card-open { color: rgba(255,255,255,0.88); }
:root[data-theme="dark"] .ms-card[data-cover]:not([data-cover="ink"]) .ms-card-meta,
:root[data-theme="dark"] .ms-card[data-cover]:not([data-cover="ink"]) .ms-card-menu-btn { color: rgba(255,255,255,0.55); }

/* Empty / demo states */
.dash-ms-empty {
  padding: 40px 0;
  text-align: center;
  color: var(--text-muted);
  font-size: 14px;
  line-height: 1.6;
}
.ms-card--dragging {
  opacity: 0.4;
  cursor: grabbing;
}
.ms-card--drag-over {
  outline: 2px dashed var(--accent);
  outline-offset: 3px;
}
.ms-card:not(.ms-card--demo) {
  cursor: grab;
}
.ms-card--demo {
  border-style: dashed;
  background: none;
  min-height: 110px;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 4px;
}
.ms-card--demo a {
  font-size: 13px;
  color: var(--text-muted);
  text-decoration: none;
  display: block;
}
.ms-card--demo a:hover { color: var(--accent); }
.ms-card--demo .ms-card-demo-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-muted);
  opacity: .6;
}

/* Goals section */
.dash-goals-section {
  padding: 28px 32px 36px;
}
.dash-goals-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}
.dash-goals-heading {
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
  margin: 0;
}
.dash-streak-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 99px;
  padding: 4px 12px;
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: 14px;
}
.dash-streak-chip--active {
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 35%, var(--border));
  background: color-mix(in srgb, var(--accent) 5%, var(--bg-card));
}
.dash-goals-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px;
}
.dash-goal-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 16px;
}
.dash-goal-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-muted);
  margin-bottom: 10px;
}
.dash-goal-bar-track {
  height: 4px;
  background: var(--border);
  border-radius: 2px;
  overflow: hidden;
  margin-bottom: 8px;
}
.dash-goal-bar-fill {
  height: 100%;
  background: var(--accent);
  border-radius: 2px;
  transition: width .4s ease;
}
.dash-goal-counts {
  font-size: 12px;
  color: var(--text-muted);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.dash-goal-status {
  font-size: 11px;
  font-weight: 700;
  color: var(--accent);
}
.dash-goals-empty {
  font-size: 13px;
  color: var(--text-muted);
  margin: 0;
}
.dash-goals-set-link {
  background: none;
  border: none;
  color: var(--accent);
  cursor: pointer;
  font-size: 13px;
  font-family: var(--font-ui);
  padding: 0;
  text-decoration: underline;
}
.dash-goals-upsell {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 20px;
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.6;
}
.dash-goals-upsell a { color: var(--accent); }

/* Inline goal edit form (in dashboard) */
.dash-goals-edit-form { display: none; margin-top: 16px; }
.dash-goals-edit-form.open { display: block; }
.dash-goals-edit-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px;
  margin-bottom: 14px;
}
.dash-goal-edit-field { display: flex; flex-direction: column; gap: 6px; }
.dash-goal-edit-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); }
.dash-goal-edit-row { display: flex; align-items: center; gap: 6px; }
.dash-goal-edit-input {
  width: 90px;
  font-size: 13px;
  padding: 6px 8px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-card);
  color: var(--text);
  font-family: var(--font-ui);
}
.dash-goal-edit-input:focus { outline: none; border-color: var(--accent); }
.dash-goal-edit-hint { font-size: 11px; color: var(--text-muted); }
.dash-goal-edit-auto { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--text-muted); cursor: pointer; }
.dash-goals-edit-actions { display: flex; gap: 8px; align-items: center; }

/* ── Settings page ────────────────────────────────────────────────────────── */
.settings-page {
  min-height: calc(100vh - 48px);
  background: var(--bg);
}
.settings-layout {
  display: flex;
  max-width: 960px;
  margin: 0 auto;
  padding: 40px 24px 80px;
  gap: 48px;
  align-items: flex-start;
}
.settings-nav {
  width: 160px;
  flex-shrink: 0;
  position: sticky;
  top: 24px;
}
.settings-nav-heading {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--text-muted);
  padding: 0 8px 10px;
}
.settings-nav-link {
  display: block;
  padding: 7px 8px;
  font-size: 13px;
  color: var(--text-muted);
  text-decoration: none;
  border-radius: var(--radius);
  font-family: var(--font-ui);
  transition: color .1s, background .1s;
}
.settings-nav-link:hover { color: var(--text); background: color-mix(in srgb, var(--accent) 6%, var(--bg)); }
.settings-nav-link.is-active { color: var(--accent); font-weight: 600; background: color-mix(in srgb, var(--accent) 10%, var(--bg)); }
.settings-content {
  flex: 1;
  min-width: 0;
}
.settings-section {
  padding-bottom: 48px;
  margin-bottom: 40px;
  border-bottom: 1px solid var(--border);
}
.settings-section:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.settings-section-heading {
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
  margin: 0 0 6px;
}
.settings-section-desc {
  font-size: 13px;
  color: var(--text-muted);
  margin: 0 0 24px;
  line-height: 1.6;
}
.settings-form {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.settings-field { display: flex; flex-direction: column; gap: 5px; }
.settings-field-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
}
.settings-field-hint { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
.settings-field-note { font-size: 12px; color: var(--text-muted); margin-top: 3px; }
.settings-field-note a { color: var(--accent); }
/* ARC network settings block: consistent spacing */
.settings-arc-intro { display: flex; flex-direction: column; gap: 8px; }
.settings-arc-intro .settings-subsection-heading { margin: 0; }
.settings-arc-intro .settings-field-note { margin: 0; line-height: 1.6; }
#arc-network-profile-fields { display: flex; flex-direction: column; gap: 18px; }
#arc-network-profile-fields .settings-field-note { margin: 0; }
.settings-input {
  font-size: 13px;
  padding: 8px 10px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-card);
  color: var(--text);
  font-family: var(--font-ui);
  width: 100%;
  max-width: 360px;
}
.settings-input:focus { outline: none; border-color: var(--accent); }
.settings-select {
  font-size: 13px;
  padding: 8px 10px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-card);
  color: var(--text);
  font-family: var(--font-ui);
  max-width: 360px;
  width: 100%;
}
.settings-form-actions { display: flex; gap: 10px; align-items: center; padding-top: 4px; }
.settings-checkboxes {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  max-width: 480px;
}
.settings-checkbox-wrap {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  cursor: pointer;
  padding: 5px 10px;
  border: 1.5px solid var(--border);
  border-radius: 99px;
}
.settings-checkbox-wrap:has(input:checked) {
  border-color: var(--accent);
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, var(--bg-card));
}
.settings-checkbox-wrap input { display: none; }
.settings-dob-row { display: flex; gap: 8px; flex-wrap: wrap; max-width: 360px; }
.settings-dob-row .settings-select { max-width: none; flex: 1; min-width: 80px; }
.settings-dob-year { width: 90px !important; min-width: 90px; flex: 0 0 90px; }
.settings-plan-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border-radius: 99px;
  font-size: 12px;
  font-weight: 700;
  background: color-mix(in srgb, var(--accent) 12%, var(--bg-card));
  color: var(--accent);
  border: 1px solid color-mix(in srgb, var(--accent) 25%, var(--border));
}
.settings-plan-badge--premium { background: color-mix(in srgb, var(--premium) 12%, #fff); color: var(--premium); border-color: color-mix(in srgb, var(--premium) 30%, #fff); }
.settings-plan-badge--free { background: var(--bg); color: var(--text-muted); border-color: var(--border); }
.settings-plan-badge--founding { background: color-mix(in srgb, var(--plus) 15%, #fff); color: color-mix(in srgb, var(--plus) 78%, #000); border-color: color-mix(in srgb, var(--plus) 38%, #fff); }
.settings-subsection-heading {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  margin: 0 0 12px;
}
.settings-meta-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 9px 0;
  border-bottom: 1px solid var(--border);
  gap: 16px;
  font-size: 13px;
}
.settings-meta-row:first-child { border-top: 1px solid var(--border); }
.settings-meta-label { color: var(--text-muted); flex-shrink: 0; }
.settings-meta-value { color: var(--text); text-align: right; }
.settings-referral { margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--border); }
.settings-section + .settings-referral,
.settings-section + .settings-danger { border-top: none; margin-top: 20px; }
.settings-referral-link-row { display: flex; gap: 8px; align-items: center; max-width: 520px; }
.settings-referral-input { flex: 1; font-size: 13px; color: var(--text-muted); }
.settings-danger { margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--border); }
.settings-danger-heading { font-size: 13px; font-weight: 600; color: var(--text-muted); margin: 0 0 8px; }
.settings-danger-link { background: none; border: none; color: var(--text-muted); font-size: 13px; cursor: pointer; font-family: var(--font-ui); padding: 0; text-decoration: underline; }
.settings-danger-link:hover { color: var(--text); }
.settings-deletion-confirm { display: none; margin-top: 12px; padding: 14px; background: #fef2f2; border: 1px solid #fecaca; border-radius: var(--radius); font-size: 13px; line-height: 1.6; color: #7f1d1d; }
.settings-deletion-confirm p { margin: 0 0 10px; }
.settings-avatar-picker { display: flex; flex-wrap: wrap; gap: 6px; max-width: 400px; }
.settings-avatar-opt {
  font-size: 20px;
  padding: 6px;
  border: 2px solid transparent;
  border-radius: 8px;
  cursor: pointer;
  background: none;
  line-height: 1;
  transition: border-color .1s;
}
.settings-avatar-opt:hover { border-color: var(--border); }
.settings-avatar-opt.is-selected { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, var(--bg-card)); }
.settings-toggle-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  font-size: 13px;
}
.settings-textarea {
  font-size: 13px;
  padding: 8px 10px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-card);
  color: var(--text);
  font-family: var(--font-ui);
  width: 100%;
  max-width: 480px;
  resize: vertical;
}
.settings-textarea:focus { outline: none; border-color: var(--accent); }

/* ── Dashboard hamburger & mobile nav ──────────────────────────────────────── */
.dash-nav-hamburger {
  display: none;
  background: none;
  border: none;
  font-size: 20px;
  color: var(--text);
  cursor: pointer;
  padding: 4px 8px;
  line-height: 1;
}
.dash-nav-close {
  display: none;
  background: none;
  border: none;
  font-size: 18px;
  color: var(--text-muted);
  cursor: pointer;
  padding: 12px 16px 4px;
  line-height: 1;
  text-align: right;
  width: 100%;
}
.dash-nav-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.35);
  z-index: 199;
}
.app-header-left {
  display: contents;
}

@media (max-width: 640px) {
  .app-header-left { display: flex; align-items: center; gap: 4px; }
  .dash-nav-hamburger { display: block; }
  .dash-nav-close { display: block; }

  /* Nav becomes a fixed drawer */
  .dash-nav {
    position: fixed;
    top: 0;
    left: 0;
    height: 100dvh;
    width: 260px;
    z-index: 200;
    transform: translateX(-100%);
    transition: transform .24s ease;
    box-shadow: 4px 0 20px rgba(0,0,0,.15);
  }
  .dash-nav.is-open { transform: translateX(0); }
  .dash-nav-overlay.is-visible { display: block; }

  /* Main fills full width */
  .dash-layout { display: block; height: auto; overflow: visible; }
  .dash-main { overflow-y: visible; }

  /* Section padding */
  .dash-ms-section { padding: 20px 16px 24px; }
  .dash-settings-wrap { padding: 20px 16px 32px; }
  .dash-settings-wrap--progress { padding-right: 16px; }

  /* Single-column card grid */
  .ms-card-grid { grid-template-columns: 1fr; }

  /* Tighter top bar */
  .dash-ms-top { gap: 8px; }
  .dash-ms-actions { gap: 6px; }

  /* Progress grid already stacks via 820px rule */
}


/* ── Share modal ─────────────────────────────────────────────────────────────── */
.ws-share-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.45);
  z-index: 1400; display: flex; align-items: center; justify-content: center;
}
.ws-share-overlay[hidden] { display: none; }
.ws-share-dialog {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 14px; width: 760px; max-width: 96vw; max-height: 90vh;
  display: flex; flex-direction: column; overflow: hidden;
  box-shadow: 0 8px 32px rgba(0,0,0,.18);
}
.ws-share-dialog-hd {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px; border-bottom: 1px solid var(--border); flex-shrink: 0;
}
.ws-share-dialog-title { font-size: 15px; font-weight: 700; color: var(--text); }
.ws-share-close {
  background: none; border: none; font-size: 20px; cursor: pointer;
  color: var(--text-muted); padding: 0 4px; line-height: 1;
}
.ws-share-close:hover { color: var(--text); }
.ws-share-dialog-body {
  flex: 1; min-height: 0; display: flex; overflow: hidden;
}
.ws-share-form-col {
  flex: 0 0 320px; overflow-y: auto; padding: 18px 20px;
  display: flex; flex-direction: column; gap: 14px;
  border-right: 1px solid var(--border);
}
.ws-share-links-col {
  flex: 1; overflow-y: auto; padding: 18px 20px;
  display: flex; flex-direction: column; gap: 10px;
}
.ws-share-label { font-size: 12px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em; display: block; margin-bottom: 6px; }
.ws-share-optional { font-weight: 400; text-transform: none; letter-spacing: 0; }
.ws-share-form-section { display: flex; flex-direction: column; }
.ws-share-input {
  width: 100%; padding: 7px 10px; border: 1px solid var(--border);
  border-radius: 8px; background: var(--bg); color: var(--text);
  font-size: 13px; box-sizing: border-box;
}
.ws-share-input:focus { outline: none; border-color: var(--accent); }
.ws-share-select {
  width: 100%; padding: 7px 10px; border: 1px solid var(--border);
  border-radius: 8px; background: var(--bg); color: var(--text);
  font-size: 13px;
}
.ws-share-pills { display: flex; flex-wrap: wrap; gap: 6px; }
.ws-share-pill {
  padding: 5px 12px; border: 1px solid var(--border); border-radius: 20px;
  background: var(--bg); color: var(--text-muted); font-size: 12px;
  cursor: pointer; transition: background .15s, color .15s, border-color .15s;
}
.ws-share-pill:hover { border-color: var(--accent); color: var(--text); }
.ws-share-pill--active {
  background: var(--accent); border-color: var(--accent);
  color: #fff; font-weight: 600;
}
.ws-share-form-actions { display: flex; align-items: center; gap: 12px; margin-top: 4px; }
.ws-share-msg { font-size: 12px; color: var(--text-muted); }
.ws-share-msg--error { color: var(--danger); }
.ws-share-msg[hidden] { display: none; }
.ws-share-version-pills { flex-wrap: wrap; max-height: 120px; overflow-y: auto; }
.ws-share-chapters-list {
  display: flex; flex-direction: column; gap: 2px;
  max-height: 160px; overflow-y: auto;
  border: 1px solid var(--border); border-radius: 8px; padding: 6px 4px;
}
.ws-share-chapter-check {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 8px; border-radius: 6px; cursor: pointer;
  font-size: 13px; color: var(--text);
}
.ws-share-chapter-check:hover { background: var(--bg-hover, rgba(0,0,0,.04)); }
.ws-share-chapter-check input[type=checkbox] { flex-shrink: 0; cursor: pointer; accent-color: var(--accent); }
.ws-share-chapters-loading { font-size: 12px; color: var(--text-muted); padding: 6px 8px; }
.ws-share-links-hd { font-size: 13px; font-weight: 700; color: var(--text); margin-bottom: 4px; }
.ws-share-links-empty { font-size: 13px; color: var(--text-muted); }
.ws-share-link-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px;
  background: var(--bg);
}
.ws-share-link-info { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ws-share-link-label { font-size: 13px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ws-share-link-meta { font-size: 11px; color: var(--text-muted); }
.ws-share-link-btns { display: flex; gap: 6px; flex-shrink: 0; }
.ws-share-copy-btn {
  padding: 4px 10px; border: 1px solid var(--border); border-radius: 6px;
  background: var(--bg); color: var(--text); font-size: 12px; cursor: pointer;
}
.ws-share-copy-btn:hover { border-color: var(--accent); color: var(--accent); }
.ws-share-revoke-btn {
  padding: 4px 10px; border: 1px solid transparent; border-radius: 6px;
  background: none; color: var(--text-muted); font-size: 12px; cursor: pointer;
}
.ws-share-revoke-btn:hover { color: var(--danger); }

@media (max-width: 640px) {
  .ws-share-dialog-body { flex-direction: column; }
  .ws-share-form-col { flex: none; border-right: none; border-bottom: 1px solid var(--border); max-height: 55vh; }
  .ws-share-links-col { max-height: 40vh; }
}


/* ── Dashboard Readers section ────────────────────────────────────────────────── */
.dash-share-empty { color: var(--text-muted); font-size: 14px; margin: 24px 0; }
.dash-settings-wrap--readers { padding-top: 0; max-width: none; }
.dash-share-heading-row { padding: 24px 0 0; }
.dash-share-tabs {
  display: flex;
  gap: 2px;
  overflow-x: auto;
  border-bottom: 2px solid var(--border);
  margin-bottom: 20px;
  scrollbar-width: none;
}
.dash-share-tabs::-webkit-scrollbar { display: none; }
.dash-share-tab {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  padding: 10px 16px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-muted);
  cursor: pointer;
  white-space: nowrap;
  transition: color .15s, border-color .15s;
}
.dash-share-tab:hover { color: var(--text); }
.dash-share-tab.is-active { color: var(--accent); border-bottom-color: var(--accent); }
.dash-share-ms-panel[hidden] { display: none; }
.dash-share-ms-stats-row { margin-bottom: 12px; }
.dash-share-ms-stats { font-size: 12px; color: var(--text-muted); }
.dash-share-create-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 12px 0; border-bottom: 1px solid var(--border); }
.dash-share-label-input { flex: 1; min-width: 160px; padding: 5px 10px; border: 1px solid var(--border); border-radius: 6px; font-size: 13px; background: var(--surface); color: var(--text); }
.dash-share-create-msg { font-size: 12px; }
.dash-share-links-list { display: flex; flex-direction: column; }
.dash-links-show-more { background: none; border: none; padding: 10px 0 4px; font-size: 13px; color: var(--text-muted); cursor: pointer; font-family: inherit; text-align: left; }
.dash-links-show-more:hover { color: var(--text); }
.dash-share-chapters-wrap { padding: 4px 0 8px; }
.dash-share-chapters-toggle-btn { background: none; border: none; font-size: 12px; color: var(--accent); cursor: pointer; padding: 0; }
.dash-share-chapters-toggle-btn:hover { text-decoration: underline; }
.dash-share-chapters-list { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; padding: 10px 12px; background: var(--surface); border-radius: 7px; }
.dash-share-chapters-list[hidden] { display: none; }
.dash-share-ch-check { display: flex; align-items: center; gap: 6px; font-size: 13px; cursor: pointer; }
.dash-share-ch-loading { font-size: 12px; color: var(--text-muted); }
.dash-share-link-block {
  border-top: 1px solid var(--border);
  padding-top: 12px;
  margin-top: 12px;
}
.dash-share-link-block--inactive { opacity: .55; }
.dash-share-link-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.dash-share-link-label { font-size: 13px; font-weight: 500; white-space: nowrap; }
.dash-share-link-stat { font-size: 12px; color: var(--text-muted); }
.dash-share-link-badge {
  font-size: 10px;
  background: var(--border);
  color: var(--text-muted);
  border-radius: 4px;
  padding: 2px 6px;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.dash-share-notes-list { display: flex; flex-direction: column; gap: 10px; }
.dash-share-note {
  background: var(--surface);
  border-radius: 7px;
  padding: 10px 14px;
}
.dash-share-note-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
  flex-wrap: wrap;
}
.dash-share-note-author { font-size: 13px; }
.dash-share-note-ch { font-size: 11px; color: var(--accent); background: var(--accent-soft,rgba(99,102,241,.1)); border-radius: 4px; padding: 1px 6px; }
.dash-share-note-time { font-size: 11px; color: var(--text-muted); margin-left: auto; }
.dash-share-note-text { font-size: 13px; line-height: 1.55; margin: 0; color: var(--text); white-space: pre-wrap; }
.fb-note-del {
  background: none; border: none; cursor: pointer; font-size: 16px; line-height: 1;
  color: var(--text-muted); padding: 0 2px; opacity: .5; transition: opacity .15s, color .15s;
}
.fb-note-del:hover { opacity: 1; color: #b91c1c; }
.dash-share-final-comment-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.fb-comment-del { margin-left: auto; }

/* ── ARC reader network ────────────────────────────────────────────────────────── */
.dash-arc-subtabs {
  display: flex;
  gap: 4px;
  padding: 16px 0 8px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 16px;
}
.dash-arc-subtab {
  padding: 6px 16px;
  border-radius: 20px;
  border: 1px solid var(--border);
  background: none;
  font-size: 13px;
  color: var(--text-muted);
  cursor: pointer;
  transition: background .15s, color .15s;
}
.dash-arc-subtab.is-active {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
.dash-arc-subpanel[hidden] { display: none; }

.dash-arc-ms-settings {
  background: var(--surface-raised, var(--bg-card));
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 14px;
  margin-bottom: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.dash-arc-settings-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.dash-arc-settings-row--toggle { align-items: flex-start; }
.dash-arc-settings-row--genres { align-items: flex-start; }
.dash-arc-settings-row--genres .dash-arc-settings-label { margin-top: 6px; }
.settings-checkbox-wrap:has(input:disabled) { opacity: .4; cursor: not-allowed; }
.dash-arc-settings-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  min-width: 56px;
  flex-shrink: 0;
}
.dash-arc-open-hint {
  font-size: 12px;
  color: var(--text-muted);
  flex: 1;
}
.dash-arc-blurb-row { display: flex; flex-direction: column; gap: 6px; }
.dash-arc-blurb-row[hidden] { display: none; }
.dash-arc-blurb-input {
  font-size: 13px;
  font-family: var(--font-ui);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 7px 10px;
  background: var(--bg);
  color: var(--text);
  resize: vertical;
  width: 100%;
  box-sizing: border-box;
}
.dash-share-link-badge--internal {
  background: var(--accent-soft, rgba(99,102,241,.12));
  color: var(--accent);
  border-radius: 4px;
  padding: 2px 7px;
  font-size: 11px;
  font-weight: 600;
}

/* Read for others */
.arc-signup-prompt {
  padding: 24px 0;
}
.arc-signup-prompt-text { font-size: 14px; color: var(--text-muted); line-height: 1.6; }
.arc-status-sect-heading {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-muted);
  margin-bottom: 10px;
}
.arc-discover-card {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
  margin-bottom: 10px;
  background: var(--bg-card);
}
.arc-invitation-card {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
  margin-bottom: 10px;
  background: var(--bg-card);
}
.arc-invitation-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.arc-invitation-from { font-size: 13px; font-weight: 600; color: var(--text); }
.arc-invitation-date { font-size: 12px; color: var(--text-muted); }
.arc-invitation-title { font-size: 15px; font-weight: 600; margin-bottom: 6px; }
.arc-invitation-actions { display: flex; gap: 8px; margin-top: 10px; }
.arc-inv-reason-input { width: 100%; box-sizing: border-box; border: 1px solid var(--border); border-radius: var(--radius); padding: 7px 10px; font-size: 13px; background: var(--bg); color: var(--text); resize: vertical; margin-top: 8px; }
.arc-inv-msg { font-size: 12px; display: block; margin-top: 4px; }
.dash-invite-tabs { display: flex; gap: 2px; margin: 16px 0 12px; border-bottom: 1px solid var(--border); }
.dash-invite-tab { background: none; border: none; border-bottom: 2px solid transparent; padding: 6px 12px; font-size: 13px; font-weight: 500; color: var(--text-muted); cursor: pointer; margin-bottom: -1px; border-radius: 0; transition: color .15s, border-color .15s; font-family: inherit; }
.dash-invite-tab:hover { color: var(--text); }
.dash-invite-tab.is-active { color: var(--accent); border-bottom-color: var(--accent); }
.dash-invite-panel { padding-top: 4px; }
.dash-arc-reader-results { margin-bottom: 6px; }
.dash-arc-reader-result { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: 6px; background: var(--bg-card); }
.dash-arc-reader-result-info { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.dash-arc-reader-name { font-size: 13px; font-weight: 600; }
.dash-arc-reader-stats { font-size: 11px; color: var(--text-muted); }
.arc-reading-self-stat { font-size: 13px; color: var(--text-muted); margin: 0 0 12px; padding: 8px 12px; background: var(--surface); border-radius: var(--radius); }
.arc-reading-self-stat strong { color: var(--text); }
.dash-share-note-ch--overall { color: var(--text-muted); background: var(--border); }
.dash-arc-ms-title { font-size: 16px; font-weight: 700; color: var(--text); margin: 0 0 16px; }
.dash-arc-invite-heading { font-size: 12px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em; margin: 0 0 8px; }
.dash-arc-reader-name-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.dash-arc-reader-bio { font-size: 12px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 380px; }
.dash-arc-sent-inv-row { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--border); font-size: 13px; }
.dash-arc-sent-inv-row:last-child { border-bottom: none; }
.dash-arc-inv-name { font-weight: 600; }
.dash-arc-inv-date { color: var(--text-muted); font-size: 12px; margin-left: auto; }
.dash-arc-inv-reason { font-size: 12px; color: var(--text-muted); font-style: italic; width: 100%; margin: 2px 0 0; }
.arc-inv-status { font-size: 11px; padding: 1px 7px; border-radius: 4px; font-weight: 600; text-transform: capitalize; }
.inv-status--pending  { background: var(--bg-muted, #f3f4f6); color: var(--text-muted); }
.inv-status--accepted { background: #dcfce7; color: #166534; }
.inv-status--declined { background: #fee2e2; color: #991b1b; }
.arc-discover-card-title { font-size: 15px; font-weight: 600; margin-bottom: 4px; }
.arc-discover-card-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; color: var(--text-muted); margin-bottom: 4px; }
.arc-genre-badge {
  background: var(--accent-soft, rgba(99,102,241,.1));
  color: var(--accent);
  border-radius: 4px;
  padding: 1px 7px;
  font-size: 11px;
  font-weight: 600;
}
.arc-word-count { font-size: 12px; color: var(--text-muted); }
.arc-notes-count { font-size: 12px; color: var(--text-muted); display: block; }
.arc-discover-blurb { font-size: 13px; color: var(--text-muted); line-height: 1.5; margin: 6px 0 0; }
.arc-discover-card--muted { opacity: .55; }

/* Reader status badges */
.arc-reader-status-badge { display: inline-flex; align-items: center; font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 20px; white-space: nowrap; }
.rs-reading  { background: #dbeafe; color: #1e40af; }
.rs-finished { background: #dcfce7; color: #166534; }
.rs-dnf      { background: #f3f4f6; color: #6b7280; }

/* Status buttons (reader history + read page) */
.arc-status-btn { background: var(--bg); border: 1px solid var(--border); border-radius: 20px; padding: 3px 10px; font-size: 12px; font-weight: 500; color: var(--text-muted); cursor: pointer; font-family: inherit; transition: border-color .15s, color .15s; }
.arc-status-btn:hover { border-color: var(--accent); color: var(--text); }
.arc-status-btn.is-active { border-color: var(--accent); color: var(--accent); font-weight: 600; }

/* ── Writer flow: numbered steps ─────────────────────────────────────────── */
.dash-arc-step-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.dash-arc-step-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--accent); color: #fff; font-size: 13px; font-weight: 700; flex-shrink: 0;
}
.dash-arc-step-title { font-size: 15px; font-weight: 700; margin: 0; color: var(--text); }
.dash-arc-step-body { padding-left: 34px; }
.dash-arc-step-note { font-size: 12px; color: var(--text-muted); margin: 8px 0 0; line-height: 1.5; }

/* Tab-based feedback / setup split */
.dash-arc-feedback-view { display: flex; flex-direction: column; gap: 12px; }
.dash-arc-setup-view { display: flex; flex-direction: column; gap: 22px; }
#arc-subpanel-share-work[data-mode="setup"] .dash-arc-feedback-view { display: none; }
#arc-subpanel-share-work[data-mode="feedback"] .dash-arc-setup-view { display: none; }

/* At-a-glance summary strip */
.dash-arc-summary { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 20px; }
.dash-arc-summary[hidden] { display: none; }
.dash-arc-summary-stat {
  display: flex; flex-direction: column; align-items: center;
  min-width: 64px; padding: 8px 14px; border: 1px solid var(--border);
  border-radius: var(--radius); background: var(--bg-card);
}
.dash-arc-summary-num { font-size: 18px; font-weight: 700; color: var(--text); line-height: 1.1; }
.dash-arc-summary-label { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em; margin-top: 2px; }

/* Get-readers: two-modality grid */
.dash-arc-modality-intro { font-size: 13px; color: var(--text-muted); margin: 0 0 14px; line-height: 1.5; }
.dash-arc-getreaders { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; }
.dash-arc-option-card { border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; background: var(--bg-card); min-width: 0; }
.dash-arc-option-card--network { background: var(--surface, var(--bg-card)); }
.dash-arc-option-head { display: flex; flex-direction: column; gap: 5px; margin-bottom: 12px; }
.dash-arc-option-tag { align-self: flex-start; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; padding: 3px 9px; border-radius: 5px; }
.dash-arc-option-tag--public { background: var(--accent-soft, rgba(99,102,241,.12)); color: var(--accent); }
.dash-arc-option-tag--network { background: #dcfce7; color: #166534; }
.dash-arc-option-sub { font-size: 12px; color: var(--text-muted); line-height: 1.5; }
.dash-arc-suboption { padding-top: 14px; margin-top: 14px; border-top: 1px dashed var(--border); }
.dash-arc-suboption:first-of-type { border-top: none; padding-top: 0; margin-top: 0; }
.dash-arc-suboption-label { font-size: 12px; font-weight: 600; color: var(--text-muted); margin: 0 0 8px; }
.dash-arc-col-hint { font-size: 12px; color: var(--text-muted); margin: 0 0 10px; line-height: 1.4; }
.dash-arc-blurb-actions { display: flex; align-items: center; gap: 10px; }
.dash-arc-settings-label--wide { min-width: 0; flex: 1; }

/* Public-link badge in unified feedback */
.dash-share-link-badge--public { background: var(--accent-soft, rgba(99,102,241,.12)); color: var(--accent); border-radius: 4px; padding: 2px 7px; font-size: 11px; font-weight: 600; }

/* Skeleton loading rows */
.dash-arc-skeleton-row {
  height: 46px; border-radius: var(--radius); margin-bottom: 6px; opacity: .5;
  background: linear-gradient(90deg, var(--border) 25%, var(--surface) 37%, var(--border) 63%);
  background-size: 400% 100%; animation: dash-arc-shimmer 1.4s ease infinite;
}
@keyframes dash-arc-shimmer { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }

/* Discover filters */
.arc-discover-filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 14px; }
.arc-discover-filters[hidden] { display: none; }
.arc-discover-search { flex: 1; min-width: 160px; padding: 6px 10px; border: 1px solid var(--border); border-radius: 6px; font-size: 13px; background: var(--surface); color: var(--text); font-family: inherit; }
.arc-discover-length { flex: 0 0 auto; }
.arc-discover-hidenew { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-muted); white-space: nowrap; cursor: pointer; }

/* ── Responsive: ARC Readers section ─────────────────────────────────────── */
/* Wide monitors: cap width so forms and feedback stay readable */
.dash-settings-wrap--readers { max-width: 1180px; margin-left: 0; margin-right: 0; }

/* Tablet / small laptop: modalities stack into one column */
@media (max-width: 900px) {
  .dash-arc-getreaders { grid-template-columns: 1fr; gap: 14px; }
}

/* Mobile phones */
@media (max-width: 600px) {
  .dash-arc-step-body { padding-left: 0; }
  .dash-arc-step-head { margin-bottom: 10px; }
  .dash-arc-summary { gap: 8px; }
  .dash-arc-summary-stat { flex: 1 1 0; min-width: 56px; padding: 8px 4px; }
  .dash-arc-summary-num { font-size: 16px; }
  .dash-arc-option-card { padding: 12px; }
  .dash-share-create-row { gap: 6px; }
  .dash-share-label-input { flex: 1 1 100%; min-width: 0; }
  .dash-share-create-btn { flex: 0 0 auto; }
  .arc-discover-search { flex: 1 1 100%; }
  .arc-discover-length { flex: 1 1 100%; }
}

/* ── Network directory ───────────────────────────────────────────────────── */
.dash-network-join-prompt {
  max-width: 560px; margin: 8px 0; padding: 24px; text-align: center;
  border: 1px dashed var(--border); border-radius: var(--radius); background: var(--surface);
}
.dash-network-join-title { font-size: 16px; font-weight: 700; margin: 0 0 8px; color: var(--text); }
.dash-network-join-text { font-size: 13px; color: var(--text-muted); line-height: 1.6; margin: 0 0 16px; }
.dash-network-join-inline {
  display: flex; flex-direction: column; gap: 10px; align-items: flex-start;
  padding: 12px 0 4px; font-size: 13px; color: var(--text-muted);
}
.dash-network-join-inline p { margin: 0; line-height: 1.5; }

.dash-network-filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 16px; }
.dash-network-filters > * { flex: 1 1 0; min-width: 0; max-width: none; width: auto; }

.dash-network-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; align-items: start;
}
.dash-network-card {
  border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px;
  background: var(--bg-card); display: flex; flex-direction: column; gap: 10px; min-width: 0;
}
.dash-network-card-head { display: flex; align-items: center; gap: 10px; }
.dash-network-avatar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0;
  background: var(--accent-soft, rgba(99,102,241,.12)); color: var(--accent);
  font-size: 18px; font-weight: 700;
}
.dash-network-card-id { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.dash-network-name { font-size: 14px; font-weight: 700; color: var(--text); }
.dash-network-flag { font-size: 13px; }
.dash-network-role { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em; }
.dash-network-founding {
  align-self: flex-start; margin-top: 2px;
  display: inline-flex; align-items: center;
  font-size: 10px; font-weight: 700; letter-spacing: .02em;
  padding: 1px 7px; border-radius: 99px;
  background: color-mix(in srgb, var(--plus) 15%, var(--bg-card));
  color: color-mix(in srgb, var(--plus) 80%, #000);
  border: 1px solid color-mix(in srgb, var(--plus) 35%, var(--border));
}
.dash-network-pitch { font-size: 13px; color: var(--text); line-height: 1.5; margin: 0; }
.dash-network-section { display: flex; flex-direction: column; gap: 5px; }
.dash-network-section-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); }
.dash-network-badges { display: flex; flex-wrap: wrap; gap: 5px; }
.dash-network-meta { font-size: 12px; color: var(--text-muted); }
.dash-network-ig { font-size: 12px; color: var(--accent); text-decoration: none; align-self: flex-start; }
.dash-network-ig:hover { text-decoration: underline; }
.dash-network-actions { position: relative; margin-top: auto; padding-top: 4px; }
.dash-network-invite-menu {
  position: absolute; left: 0; bottom: calc(100% + 4px); z-index: 20;
  min-width: 200px; max-height: 240px; overflow-y: auto;
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: 0 6px 20px rgba(0,0,0,.12); padding: 4px;
}
.dash-network-invite-menu[hidden] { display: none; }
.dash-network-invite-item {
  display: block; width: 100%; text-align: left; background: none; border: none;
  padding: 8px 10px; font-size: 13px; color: var(--text); cursor: pointer;
  border-radius: 6px; font-family: inherit;
}
.dash-network-invite-item:hover { background: var(--surface); }
.dash-network-loadmore-wrap { text-align: center; margin-top: 8px; }

/* Settings: Instagram input */
.settings-ig-row { display: flex; align-items: center; gap: 0; }
.settings-ig-at { padding: 0 8px; color: var(--text-muted); font-size: 14px; }
.settings-ig-row .settings-input { flex: 1; }

/* Network responsive */
@media (max-width: 1100px) { .dash-network-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) {
  .dash-network-grid { grid-template-columns: 1fr; }
  .dash-network-filters > * { flex: 1 1 100%; }
}

/* What to share scope box */
.dash-arc-scope-box { border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 14px; margin-bottom: 14px; }
.dash-arc-scope-label { font-size: 12px; font-weight: 600; color: var(--text-muted); margin: 0 0 8px; }
.dash-arc-scope-row { display: flex; gap: 16px; flex-wrap: wrap; }
.dash-arc-scope-option { display: flex; align-items: center; gap: 6px; font-size: 13px; cursor: pointer; }
.dash-arc-scope-confirm { font-size: 12px; color: var(--accent); margin: 8px 0 0; }
.dash-arc-scope-confirm--warn { color: #b91c1c; }
.dash-arc-version-box { border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 14px; margin-bottom: 14px; }
.dash-arc-version-heading { font-size: 12px; font-weight: 600; color: var(--text-muted); margin: 0 0 8px; }
.dash-arc-version-picker { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; }
.dash-arc-version-select { font-size: 13px; padding: 5px 8px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg); color: var(--text); max-width: 100%; }
.dash-arc-version-hint { font-size: 12px; color: var(--text-muted); margin: 8px 0 0; line-height: 1.5; }
.dash-arc-version-confirm { font-size: 12px; color: var(--accent); margin: 0; flex-basis: 100%; }
.dash-arc-version-confirm--warn { color: #b91c1c; }
.dash-share-link-stat--version { color: var(--accent); }

/* Share link section */
.dash-arc-sharelink-section { margin-top: 4px; }

/* Reading history card layout */
.arc-history-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.arc-history-status-row { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.arc-history-comment-wrap { margin-top: 10px; }
.arc-history-comment-input { width: 100%; box-sizing: border-box; border: 1px solid var(--border); border-radius: var(--radius); padding: 7px 10px; font-size: 13px; background: var(--bg); color: var(--text); resize: vertical; font-family: inherit; }
.arc-history-comment-row { display: flex; align-items: center; gap: 10px; margin-top: 6px; }
.arc-history-comment-msg { font-size: 12px; color: var(--text-muted); }

/* Reader notes history */
.arc-history-notes-wrap { margin-top: 10px; }
.arc-history-notes-toggle { background: none; border: none; padding: 0; font-size: 12px; font-weight: 600; color: var(--text-muted); cursor: pointer; font-family: inherit; }
.arc-history-notes-toggle:hover { color: var(--text); }
.arc-history-notes-list { margin-top: 8px; display: flex; flex-direction: column; gap: 8px; }
.arc-history-note { border-left: 2px solid var(--border); padding-left: 10px; }
.arc-history-note-meta { display: flex; gap: 8px; align-items: baseline; margin-bottom: 3px; }
.arc-history-note-date { font-size: 11px; color: var(--text-muted); }

/* Writer side: final comment from reader */
.dash-share-final-comment { background: var(--bg-muted, #f9fafb); border-left: 3px solid var(--accent); border-radius: 0 4px 4px 0; padding: 8px 12px; margin: 10px 0 6px; }
.dash-share-final-comment-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--accent); display: block; margin-bottom: 4px; }

/* Final comment section on read page */
.read-final-comment-section { max-width: 680px; margin: 40px auto 0; padding: 24px; background: var(--bg-card, #fff); border: 1px solid var(--border, #e5e7eb); border-radius: 8px; }
.read-final-comment-heading { font-size: 16px; font-weight: 700; margin: 0 0 4px; color: var(--text, #111); }
.read-final-comment-sub { font-size: 13px; color: var(--text-muted, #6b7280); margin: 0 0 12px; }
.read-final-comment-input { width: 100%; box-sizing: border-box; border: 1px solid var(--border, #e5e7eb); border-radius: 6px; padding: 10px 12px; font-size: 14px; font-family: inherit; resize: vertical; background: var(--bg, #fff); color: var(--text, #111); }
.read-final-comment-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-top: 12px; }
.read-final-comment-status-group { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.read-final-comment-status-label { font-size: 12px; color: var(--text-muted, #6b7280); font-weight: 500; }

/* Language picker (searchable single-select) */
.lang-picker { position: relative; }
.lang-picker-input {
  width: 100%; padding: 5px 8px;
  border: 1px solid var(--border); border-radius: 4px;
  font-size: 13px; background: var(--bg); color: var(--text);
  cursor: pointer; box-sizing: border-box;
}
.lang-picker-input:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
.lang-picker-drop {
  position: absolute; top: calc(100% + 2px); left: 0; right: 0;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 4px; max-height: 180px; overflow-y: auto;
  z-index: 200; box-shadow: 0 4px 14px rgba(0,0,0,.15);
}
.lang-picker-opt {
  display: block; width: 100%; padding: 6px 10px;
  text-align: left; font-size: 13px;
  background: none; border: none; cursor: pointer; color: var(--text);
}
.lang-picker-opt:hover { background: color-mix(in srgb, var(--accent) 10%, transparent); outline: none; }
.lang-picker-opt--sel { font-weight: 600; }
.ms-card-lang-ai-note { font-size: 12px; color: var(--text-muted); margin: 5px 0 3px; line-height: 1.4; }
.ms-card-lang-ai-note a { color: var(--accent); }

/* ARC reader language multi-select dropdown */
.arc-lang-dropdown { position: relative; max-width: 360px; }
.arc-lang-trigger {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  width: 100%; padding: 8px 14px; box-sizing: border-box;
  background: var(--bg); border: 1px solid var(--border); border-radius: 20px;
  font-size: 13px; color: var(--text); cursor: pointer; text-align: left;
  font-family: var(--font-ui);
}
.arc-lang-trigger:hover { border-color: var(--accent); }
.arc-lang-panel {
  position: absolute; top: calc(100% + 4px); left: 0; right: 0;
  background: var(--bg); border: 1px solid var(--border); border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,.1); z-index: 200; overflow: hidden;
}
.arc-lang-search {
  display: block; width: 100%; padding: 7px 12px; box-sizing: border-box;
  border: none; border-bottom: 1px solid var(--border);
  font-size: 13px; background: transparent; color: var(--text); outline: none;
}
.arc-lang-list { max-height: 200px; overflow-y: auto; }
.arc-lang-item {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 12px; cursor: pointer; font-size: 13px; color: var(--text);
}
.arc-lang-item:hover { background: color-mix(in srgb, var(--accent) 8%, transparent); }
.arc-lang-item input[type="checkbox"] { accent-color: var(--accent); flex-shrink: 0; cursor: pointer; }

/* Account ARC reader section */
.settings-section {
  border-top: 1px solid var(--border);
  padding-top: 20px;
  margin-top: 20px;
}

/* ARC reader profile block (inside Read for others subpanel) */
.arc-reader-profile-block { padding-bottom: 20px; border-bottom: 1px solid var(--border); margin-bottom: 4px; }

/* ── Reading view ─────────────────────────────────────────────────────────────── */
.read-bookmark-banner {
  position: fixed; top: 0; left: 0; right: 0; z-index: 300;
  background: var(--accent); color: #fff;
  display: flex; align-items: center; justify-content: center; gap: 12px;
  padding: 10px 16px; font-size: 13px;
}
/* The banner is shown/hidden via the `hidden` attribute; the display:flex above
   would otherwise override it, so let the attribute win when set. */
.read-bookmark-banner[hidden] { display: none; }
.read-bookmark-btn {
  background: rgba(255,255,255,0.2); border: 1px solid rgba(255,255,255,0.5);
  color: #fff; padding: 4px 14px; border-radius: 4px;
  cursor: pointer; font-size: 13px; font-family: inherit;
}
.read-bookmark-btn:hover { background: rgba(255,255,255,0.35); }
.read-bookmark-dismiss {
  background: none; border: none; color: rgba(255,255,255,0.75);
  cursor: pointer; font-size: 20px; line-height: 1; padding: 0 4px; margin-left: 4px;
}
.read-bookmark-dismiss:hover { color: #fff; }
.read-body {
  margin: 0; padding: 0;
  background: var(--bg); color: var(--text);
  font-family: 'Lora', Georgia, 'Times New Roman', serif;
  font-size: 17px; line-height: 1.8;
}
.read-layout {
  display: flex; min-height: 100vh;
}
.read-nav {
  width: 220px; flex-shrink: 0; position: sticky; top: 0;
  height: 100vh; overflow-y: auto;
  padding: 24px 16px; border-right: 1px solid var(--border);
  display: flex; flex-direction: column; gap: 4px;
  background: var(--bg-card);
}
.read-nav-brand { margin-bottom: 8px; }
.read-nav-brand-link {
  font-size: 12px; font-weight: 700; color: var(--text-muted);
  text-decoration: none; letter-spacing: .04em; text-transform: uppercase;
}
.read-nav-brand-link:hover { color: var(--text); }
.read-nav-title {
  font-size: 13px; font-weight: 700; color: var(--text);
  margin-bottom: 12px; line-height: 1.4;
}
.read-nav-item {
  font-size: 13px; color: var(--text-muted); text-decoration: none;
  padding: 4px 8px; border-radius: 6px; display: block;
  font-family: system-ui, sans-serif;
}
.read-nav-item:hover { background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--text); }
.read-nav-print-btn {
  margin-top: auto; padding: 7px 12px; border: 1px solid var(--border);
  border-radius: 8px; background: var(--bg-card); color: var(--text);
  font-size: 12px; cursor: pointer; font-family: system-ui, sans-serif;
}
.read-nav-print-btn:hover { border-color: var(--accent); }
.read-main {
  flex: 1; min-width: 0; max-width: 760px;
  margin: 0 auto; padding: 0 40px 80px;
}
.read-controls {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 0 0;
}
.read-controls-logo {
  font-size: 12px; font-weight: 700; text-decoration: none;
  color: var(--text-muted); letter-spacing: .04em; text-transform: uppercase;
}
.read-controls-logo:hover { color: var(--text); }
.read-controls-print-btn {
  padding: 7px 14px; border: 1px solid var(--border);
  border-radius: 8px; background: var(--bg-card); color: var(--text);
  font-size: 13px; cursor: pointer; font-family: system-ui, sans-serif;
}
.read-controls-print-btn:hover { border-color: var(--accent); }
.read-title-page {
  padding: 60px 0 48px; border-bottom: 1px solid var(--border); margin-bottom: 48px;
}
.read-title {
  font-size: 2.4em; font-weight: 700; color: var(--text);
  margin: 0 0 12px; line-height: 1.2;
}
.read-author {
  font-size: 1.1em; color: var(--text-muted); margin: 0 0 6px; font-style: italic;
}
.read-link-label {
  font-size: 13px; color: var(--text-muted); margin: 16px 0 0;
  font-family: system-ui, sans-serif;
}
.read-version-note {
  font-size: 12px; color: var(--text-muted); margin: 4px 0 0;
  font-family: system-ui, sans-serif;
}
.read-chapter { margin-bottom: 64px; }
.read-chapter-body { user-select: none; -webkit-user-select: none; }
.read-chapter-title {
  font-size: 1.5em; font-weight: 700; color: var(--text);
  margin: 0 0 28px; line-height: 1.3;
  padding-bottom: 16px; border-bottom: 1px solid var(--border);
}
.read-para {
  margin: 0 0 1.2em; text-indent: 1.8em;
}
.read-para:first-child { text-indent: 0; }
.read-para-heading {
  text-indent: 0; font-weight: 700; color: var(--text); line-height: 1.3;
  margin: 1.5em 0 .5em;
}
.read-para-heading--1 { font-size: 1.25em; }
.read-para-heading--2 { font-size: 1.08em; }
.read-scene-break {
  text-align: center; text-indent: 0; margin: 1.8em 0;
  letter-spacing: .4em; color: var(--text-muted); user-select: none;
}
.read-verse {
  margin: 1.6em auto; max-width: 24em; padding: 0; border: none;
  text-align: center; text-indent: 0; font-style: normal;
  line-height: 1.7; color: var(--text);
}
.read-notes-section {
  margin-top: 40px; padding-top: 28px; border-top: 1px solid var(--border);
}
.read-notes-title {
  font-size: 13px; font-weight: 700; color: var(--text-muted); text-transform: uppercase;
  letter-spacing: .06em; margin-bottom: 14px;
  font-family: system-ui, sans-serif;
}
.read-notes-list { display: flex; flex-direction: column; gap: 14px; margin-bottom: 20px; }
.read-notes-title[hidden] { display: none; }
.read-notes-list[hidden] { display: none; }
.read-note {
  background: var(--bg-card); border-radius: 10px; padding: 14px 16px;
}
.read-note-header {
  display: flex; align-items: baseline; gap: 10px; margin-bottom: 6px;
}
.read-note-author { font-size: 13px; color: var(--text); font-family: system-ui, sans-serif; }
.read-note-date { font-size: 11px; color: var(--text-muted); font-family: system-ui, sans-serif; }
.read-note-text { margin: 0; font-size: 14px; line-height: 1.6; color: var(--text); font-family: system-ui, sans-serif; }
.read-note-form { display: flex; flex-direction: column; gap: 8px; }
.read-note-name {
  padding: 8px 12px; border: 1px solid var(--border); border-radius: 8px;
  font-size: 13px; font-family: system-ui, sans-serif;
  background: var(--bg-card); color: var(--text); width: 100%; box-sizing: border-box;
}
.read-note-name:focus { outline: none; border-color: var(--accent); }
.read-note-textarea {
  width: 100%; padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px;
  font-size: 14px; font-family: system-ui, sans-serif;
  background: var(--bg-card); color: var(--text); resize: vertical; box-sizing: border-box;
  line-height: 1.5;
}
.read-note-textarea:focus { outline: none; border-color: var(--accent); }
.read-note-form-row { display: flex; align-items: center; gap: 12px; }
.read-note-submit {
  padding: 8px 18px; border: none; border-radius: 8px;
  background: var(--accent); color: #fff; font-size: 13px;
  font-family: system-ui, sans-serif; cursor: pointer;
}
.read-note-submit:hover { background: var(--accent-hover); }
.read-note-submit:disabled { opacity: .5; cursor: default; }
.read-note-msg { font-size: 12px; font-family: system-ui, sans-serif; }
.read-note-msg[hidden] { display: none; }
.read-footer {
  border-top: 1px solid var(--border); padding: 44px 0 36px;
  font-size: 13px; color: var(--text-muted); font-family: system-ui, sans-serif;
  text-align: center;
}
.read-footer-link { color: var(--text-muted); text-decoration: none; }
.read-footer-link:hover { text-decoration: underline; }
.read-cta { max-width: 460px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; }
.read-cta-kicker { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); margin: 0 0 2px; }
.read-cta-brand { font-family: 'Lora', Georgia, serif; font-size: 22px; font-weight: 700; color: var(--text); letter-spacing: -.01em; margin: 0 0 8px; }
.read-cta-text { font-size: 14px; color: var(--text-muted); line-height: 1.6; margin: 0 0 18px; font-family: system-ui, sans-serif; }
.read-cta-btn {
  display: inline-block; padding: 11px 26px; border-radius: 999px;
  background: var(--accent); color: #fff; text-decoration: none;
  font-size: 14px; font-weight: 600; font-family: system-ui, sans-serif;
  box-shadow: 0 4px 14px rgba(92,122,90,0.26); transition: background .15s, transform .15s;
}
.read-cta-btn:hover { background: var(--accent-hover); transform: translateY(-1px); }

/* Floating note button */
.read-float-btn {
  position: fixed;
  bottom: 28px;
  right: 28px;
  z-index: 200;
  padding: 10px 18px;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 24px;
  font-family: inherit;
  font-size: 14px;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(0,0,0,.22);
  transition: background .15s, transform .1s;
}
.read-float-btn:hover { background: var(--accent-hover); transform: translateY(-1px); }

.read-float-panel {
  position: fixed;
  bottom: 80px;
  right: 28px;
  z-index: 200;
  width: 320px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0,0,0,.18);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.read-float-panel[hidden] { display: none; }
.read-float-panel-hd {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.read-float-panel-chapter { font-size: 13px; font-weight: 600; color: var(--text); }
.read-float-panel-close {
  background: none;
  border: none;
  font-size: 18px;
  cursor: pointer;
  color: var(--text-muted);
  line-height: 1;
  padding: 0 2px;
}
.read-float-panel-close:hover { color: var(--text); }
.read-float-panel-row { display: flex; align-items: center; gap: 10px; }

@media (max-width: 480px) {
  .read-float-btn { bottom: 16px; right: 16px; font-size: 13px; padding: 9px 14px; }
  .read-float-panel { right: 16px; left: 16px; width: auto; bottom: 70px; }
}

@media (max-width: 720px) {
  .read-nav { display: none; }
  .read-main { padding: 0 20px 60px; }
  .read-title { font-size: 1.8em; }
}

/* The reader reuses .ws-theme-picker, which the editor header hides at <=700px;
   keep the reader's theme toggle visible on mobile. */
@media (max-width: 700px) {
  .read-controls .read-theme-picker { display: flex !important; }
}

@media print {
  .read-controls, .read-nav, .read-note-form, .read-footer, .read-float-btn, .read-float-panel { display: none !important; }
  .read-body { background: #fff; }
  .read-main { max-width: 100%; padding: 0; }
  .read-title-page { padding: 40px 0 32px; }
  .read-notes-section { break-inside: avoid; }
}

/* ── "Start from nothing" guided path (beginner craft flow) ─────────────────── */
.start-input, .start-textarea {
  width: 100%; box-sizing: border-box;
  padding: 10px 12px; font-size: 15px;
  border: 1.5px solid var(--border); border-radius: 8px;
  background: var(--bg); color: var(--text);
  font-family: var(--font-ui);
  transition: border-color .15s;
}
.start-input:focus, .start-textarea:focus { outline: none; border-color: var(--accent); }
.start-textarea { resize: vertical; min-height: 90px; line-height: 1.5; }
.start-textarea--opening { min-height: 220px; font-family: var(--font-reading, Georgia, serif); font-size: 16px; }
.start-field { margin-bottom: 18px; text-align: left; }
.start-field:last-child { margin-bottom: 0; }
.start-field-hint { font-size: 13px; color: var(--text-muted, #777); margin: 2px 0 8px; }
.start-sparks { display: flex; flex-direction: column; gap: 8px; margin: 4px 0 18px; text-align: left; }
.start-spark {
  text-align: left; cursor: pointer;
  padding: 11px 14px; font-size: 14px; line-height: 1.4;
  border: 1.5px solid var(--border); border-radius: 10px;
  background: var(--bg); color: var(--text);
  font-family: var(--font-ui); transition: border-color .15s, background .15s;
}
.start-spark:hover { border-color: var(--accent); }
.start-beats { list-style: none; padding: 0; margin: 8px 0 20px; counter-reset: beat; text-align: left; }
.start-beat {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px; margin-bottom: 8px;
  border: 1.5px solid var(--border); border-radius: 10px; background: var(--bg);
}
.start-beat::before {
  counter-increment: beat; content: counter(beat);
  flex: 0 0 26px; height: 26px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--accent); color: #fff; font-size: 13px; font-weight: 600;
}
.start-beat-name { font-size: 15px; font-weight: 500; }

/* ── Command palette (Ctrl/Cmd-K) ──────────────────────────────────────────── */
.ws-cp-overlay {
  position: fixed; inset: 0; z-index: 10000;
  background: rgba(20, 16, 12, 0.35);
  display: flex; align-items: flex-start; justify-content: center;
  padding-top: 12vh;
}
.ws-cp-overlay[hidden] { display: none; }
.ws-cp-modal {
  width: min(560px, 92vw); max-height: 70vh;
  background: var(--bg-card, #fff); color: var(--text, #1a1a1a);
  border: 1px solid var(--border, #e8e4dc); border-radius: 14px;
  box-shadow: 0 20px 60px rgba(30, 24, 18, 0.35);
  display: flex; flex-direction: column; overflow: hidden;
}
.ws-cp-input {
  border: none; outline: none; background: transparent;
  padding: 16px 18px; font-size: 16px; font-family: var(--font-ui);
  color: var(--text, #1a1a1a); border-bottom: 1px solid var(--border, #eee);
}
.ws-cp-list { overflow-y: auto; padding: 6px; }
.ws-cp-item {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 9px 12px; border-radius: 8px; cursor: pointer;
  font-size: 14px; font-family: var(--font-ui); color: var(--text, #1a1a1a);
}
.ws-cp-item--active, .ws-cp-item:hover { background: color-mix(in srgb, var(--accent) 14%, transparent); }
.ws-cp-kbd {
  font-size: 11px; color: var(--text-muted, #888); font-family: var(--font-ui);
  border: 1px solid var(--border, #ddd); border-radius: 5px; padding: 1px 6px; flex-shrink: 0;
}
.ws-cp-empty { padding: 16px 12px; text-align: center; font-size: 14px; color: var(--text-muted, #888); }
.ws-cp-hint {
  padding: 8px 14px; border-top: 1px solid var(--border, #eee);
  font-size: 11px; color: var(--text-muted, #888); font-family: var(--font-ui);
}

/* ── Insights popup ────────────────────────────────────────────────────────── */
.ws-insights-overlay {
  position: fixed; inset: 0; z-index: 9000;
  background: rgba(20, 16, 12, 0.35);
  display: flex; align-items: flex-start; justify-content: center; padding-top: 8vh;
}
.ws-insights-modal {
  width: min(560px, 94vw); max-height: 82vh;
  background: var(--bg-card, #fff); color: var(--text, #1a1a1a);
  border: 1px solid var(--border, #e8e4dc); border-radius: 14px;
  box-shadow: 0 20px 60px rgba(30, 24, 18, 0.35);
  display: flex; flex-direction: column; overflow: hidden;
}
.ws-insights-body { overflow-y: auto; padding: 16px 18px; }
.ws-ins-summary { display: flex; gap: 10px; margin-bottom: 18px; }
.ws-ins-summary > div {
  flex: 1; text-align: center; padding: 10px 6px; border-radius: 10px;
  background: color-mix(in srgb, var(--accent) 9%, transparent);
}
.ws-ins-summary strong { display: block; font-size: 19px; color: var(--text, #1a1a1a); }
.ws-ins-summary span { font-size: 11px; color: var(--text-muted, #888); }
.ws-ins-sec { margin: 0 0 18px; }
.ws-ins-h { font-size: 13px; font-weight: 700; margin: 0 0 4px; color: var(--accent); }
.ws-ins-note { font-size: 12px; color: var(--text-muted, #888); margin: 0 0 8px; line-height: 1.5; }
.ws-ins-row { display: flex; align-items: center; gap: 10px; margin: 5px 0; }
.ws-ins-label { width: 32%; font-size: 13px; color: var(--text, #1a1a1a); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ws-ins-bar { flex: 1; height: 12px; border-radius: 6px; overflow: hidden; background: color-mix(in srgb, var(--text-muted) 20%, transparent); }
.ws-ins-fill { display: block; height: 100%; border-radius: 6px; background: var(--accent); }
.ws-ins-fill--word { background: var(--accent); }
.ws-ins-fill--warn { background: var(--premium); }
.ws-ins-fill--alt { background: var(--plus); }
.ws-ins-count { width: 46px; text-align: right; font-size: 12px; color: var(--text-muted, #888); font-variant-numeric: tabular-nums; }

/* Manuscript settings popover (reuses .ws-insights-overlay / -modal / -body) */
.ws-set-field { margin: 0 0 18px; }
.ws-set-field:last-child { margin-bottom: 0; }
.ws-set-label { display: block; font-size: 13px; font-weight: 700; color: var(--accent); margin: 0 0 6px; }
.ws-set-select { width: 100%; padding: 8px 10px; border: 1px solid var(--border, #ddd); border-radius: 8px; font-family: var(--font-ui); font-size: 14px; background: var(--bg-card, #fff); color: var(--text, #1a1a1a); }
.ws-set-note { font-size: 12px; color: var(--text-muted, #888); margin: 6px 0 0; line-height: 1.5; }
.ws-set-note a { color: var(--accent); font-weight: 600; }
.ws-set-goal { display: flex; align-items: center; gap: 8px; margin: 8px 0 0; }
.ws-set-goal input { width: 110px; padding: 7px 9px; border: 1px solid var(--border, #ddd); border-radius: 8px; font-family: var(--font-ui); font-size: 14px; background: var(--bg-card, #fff); color: var(--text, #1a1a1a); }
.ws-set-goal span { font-size: 13px; color: var(--text-muted, #888); }
.ws-set-actions { display: flex; align-items: center; gap: 12px; margin-top: 18px; }
.ws-set-msg { font-size: 13px; color: var(--text-muted, #888); }
.ws-set-progress { margin-top: 10px; }
.ws-set-progress .ms-target-bar-track { width: 100%; height: 8px; }
.ws-set-progress-text { font-size: 12px; color: var(--text-muted, #888); margin: 6px 0 0; }