/* ── 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; }

.landing-lang-toggle {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 2px;
  border: 1px solid #e0dcd3; border-radius: 999px; padding: 2px;
}
.landing-lang-btn {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  min-width: 26px; height: 22px; padding: 0 8px; border-radius: 999px;
  font-size: 11px; font-weight: 600; letter-spacing: .02em; color: #888;
  text-decoration: none; font-family: var(--font-ui); transition: color .15s, background-color .15s;
}
.landing-lang-btn:hover { color: #1a1a1a; }
.landing-lang-btn--active { color: #fff; background: var(--accent); }
.landing-lang-btn--active:hover { color: #fff; }

.landing-es-notice {
  margin: 0 0 20px; padding: 10px 14px; border-radius: var(--radius);
  background: color-mix(in srgb, var(--accent) 8%, var(--bg-card));
  border: 1px solid color-mix(in srgb, var(--accent) 20%, transparent);
  font-size: 13px; color: var(--text); line-height: 1.5;
}

/* 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: flex; flex-direction: column;
  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; margin-bottom: auto; }
.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%; margin-top: 10px;
  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;
}
/* Extra headroom when the CTA follows the feature list directly (no compare-note), since the tallest card's own auto margin is ~0. */
.landing-plan-features + .landing-plan-cta { margin-top: 20px; }
.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-stats--kpi { display: grid; gap: 8px; }
.admin-stats--kpi .admin-stat-card { min-width: 0; padding: 10px 8px; text-align: center; }
.admin-stats--kpi .admin-stat-value { font-size: 20px; }
.admin-stats--kpi .admin-stat-label { font-size: 10.5px; line-height: 1.25; }
.admin-stats--kpi-5 { grid-template-columns: repeat(5, 1fr); }
.admin-stats--kpi-6 { grid-template-columns: repeat(6, 1fr); }
.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-stat-card[data-tip] { position: relative; cursor: help; }
.admin-stat-card[data-tip]::before,
.admin-stat-card[data-tip]::after { opacity: 0; pointer-events: none; transition: opacity .12s; position: absolute; left: 50%; z-index: 20; }
.admin-stat-card[data-tip]::after {
  content: attr(data-tip); top: calc(100% + 9px); transform: translateX(-50%);
  width: max-content; max-width: 220px; background: var(--text); color: var(--bg-card);
  font-size: 11.5px; font-weight: 400; line-height: 1.4; text-align: left;
  padding: 7px 10px; border-radius: 7px; box-shadow: 0 4px 12px rgba(0,0,0,.18);
}
.admin-stat-card[data-tip]::before {
  content: ''; top: calc(100% + 4px); transform: translateX(-50%);
  border: 5px solid transparent; border-bottom-color: var(--text);
}
.admin-stat-card[data-tip]:hover::before,
.admin-stat-card[data-tip]:hover::after { opacity: 1; }

.admin-bi-charts { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 28px; }
.admin-bi-chart-card {
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 16px 18px; min-width: 0;
}
/* Foldable cohort rows in the retention tables */
.admin-cohort-row { cursor: pointer; }
.admin-cohort-row:hover { background: color-mix(in srgb, var(--accent) 7%, transparent); }
.admin-fold-caret { display: inline-block; width: 9px; font-size: 9px; color: var(--text-muted); }
.admin-cohort-member > td { background: color-mix(in srgb, var(--text-muted) 5%, transparent); }
.admin-cohort-email { padding-left: 22px !important; white-space: nowrap; }
/* Diagonal (still-on-tier) cell of the tier-transition matrix */
.admin-mx-diag { font-weight: 600; color: var(--text) !important; background: color-mix(in srgb, var(--accent) 9%, transparent); }
.admin-bi-chart-title { font-size: 12px; font-weight: 600; color: var(--text-muted); margin-bottom: 10px; }
.admin-bi-chart-wrap { position: relative; height: 220px; }
.admin-detail-tables { margin-top: 4px; }
.admin-detail-tables > summary {
  cursor: pointer; font-size: 12px; font-weight: 600; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: .05em; padding: 6px 0; list-style: none;
}
.admin-detail-tables > summary::-webkit-details-marker { display: none; }
.admin-detail-tables > summary::before { content: '+ '; }
.admin-detail-tables[open] > summary::before { content: '\2212 '; }
.admin-detail-tables > .admin-row-timeseries { margin-top: 14px; }

@media (max-width: 900px) {
  .admin-bi-charts { grid-template-columns: 1fr; }
}
.admin-table-wrap {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius); overflow: hidden;
}
/* Capped-height, vertically scrolling table (retention cohorts): shows ~6 rows,
   scroll for older history. Header sticks so it stays readable while scrolling. */
/* Analytics tab layout.
   Row A: Feature adoption plus the three "fixed card height, top 10 rows,
   scroll for more" cards (Top writers, Country, Writing languages), as flex
   siblings with an explicit max-width each, not fr grid tracks, which
   distribute all leftover viewport width into the columns regardless of
   whether the content inside needs it (the recurring cause of unwanted empty
   space in earlier versions of this layout). Each card sizes to its own
   content; a narrow window scrolls the row horizontally instead of reflowing
   it, so the shape never changes with window width. */
.admin-an-rowa { display: flex; flex-wrap: nowrap; align-items: flex-start; gap: 16px; margin-bottom: 8px; overflow-x: auto; }
.admin-an-rowa > * { flex: 0 0 auto; }
.admin-an-card { min-width: 0; border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 14px; background: var(--bg-card); }
.admin-an-card--adoption { max-width: 580px; }
.admin-an-card--genres { max-width: 320px; }
/* Stacked column beside Feature adoption: Top writers on its own row, then
   Country and Writing languages side by side below it. max-width matches Top
   writers' own natural width; the pair below stretches to fill it evenly. */
.admin-an-stacka { display: flex; flex-direction: column; gap: 16px; flex: 0 0 auto; max-width: 460px; min-width: 0; }
.admin-an-stacka-pair { display: flex; gap: 16px; }
.admin-an-stacka-pair > .admin-an-card { flex: 1 1 0; min-width: 0; }
/* World map: real, simplified country outlines (see world-map-paths.svg),
   inlined so the page's own CSS can theme them, with a dot at each represented
   country's real coordinates, area scaled by user count. Fills the stack's
   remaining height down toward Feature adoption's own height. */
.admin-an-card--map { flex: 1 1 auto; min-height: 200px; display: flex; flex-direction: column; }
.admin-an-map { width: 100%; flex: 1 1 auto; min-height: 0; }
.admin-an-map .country { fill: var(--border); stroke: var(--bg-card); stroke-width: .3; }
.admin-an-map-dot { fill: var(--accent); fill-opacity: .8; stroke: var(--bg-card); stroke-width: .5; }
.admin-an-map-dot:hover { fill-opacity: 1; }
/* .admin-table-wrap has its own border/background; inside the card that would
   double up, so flatten it to a plain content box here. */
.admin-an-card .admin-table-wrap { border: none; background: none; border-radius: 0; }
/* Top writers: a fixed (not max-) height sized to ~10 real table rows (header
   ~34px, from .admin-table th's 10px padding + 11px font, plus 10 x ~38px data
   rows, from .admin-table td's 10px padding + 13px font). Fixed rather than a
   ceiling so the card always shows its true full size, even with under 10
   writers today, rather than shrinking to fit whatever data currently exists. */
.admin-table-scroll--10 { height: 420px; overflow-y: auto; }
.admin-table-scroll--10 thead th { position: sticky; top: 0; z-index: 2; }

.admin-an-card-title { font-size: 11px; font-weight: 700; color: var(--text-muted); margin-bottom: 8px; text-transform: uppercase; letter-spacing: .04em; }
/* Cap sized to ~10 .admin-an-row rows, scroll past that: used by Country and
   Writing languages only. Genres and the four short fixed-option cards (Email
   preferences, Age, Experience, Writing for) get no cap, sized to their own
   full content instead, none of them are long enough to need a scrollbar. */
.admin-an-rows--top10 { max-height: 220px; overflow-y: auto; }

/* Row B: Genres (full height, no scroll, the longest list, sets the row's
   height) beside a 2x2 grid of the four short cards, so the space next to
   Genres gets used instead of sitting empty. */
.admin-an-rowb { display: flex; flex-wrap: nowrap; align-items: flex-start; gap: 16px; margin-bottom: 8px; overflow-x: auto; }
.admin-an-rowb > * { flex: 0 0 auto; }
/* align-items:start so a short card does not stretch to match a taller
   neighbor sharing its grid row; each card sizes to its own content height.
   Signup sources spans the full width, its own table row above the 2x2. */
.admin-an-grid2x2 { display: grid; grid-template-columns: repeat(2, minmax(200px, 1fr)); align-items: start; gap: 14px; }
.admin-an-grid2x2-full { grid-column: 1 / -1; }
.admin-an-card-title { font-size: 11px; font-weight: 700; color: var(--text-muted); margin-bottom: 8px; text-transform: uppercase; letter-spacing: .04em; }
.admin-an-row { display: flex; align-items: center; gap: 8px; margin: 5px 0; font-size: 12px; }
.admin-an-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); }
/* Fixed-width value column so the bars line up on the same left/right edges across rows */
.admin-an-val { flex: none; width: 74px; text-align: right; white-space: nowrap; color: var(--text); }
.admin-an-bar { display: inline-block; flex: none; width: 64px; height: 6px; vertical-align: middle; background: color-mix(in srgb, var(--text-muted) 18%, transparent); border-radius: 3px; overflow: hidden; }
.admin-an-bar > span { display: block; height: 100%; background: var(--accent); border-radius: 3px; }
/* "Unknown" residual row: muted, so real values read first */
.admin-an-row--unknown .admin-an-label { color: var(--text-muted); font-style: italic; }
.admin-an-row--unknown .admin-an-bar > span { background: var(--text-muted); opacity: .55; }
.admin-an-grouprow td { background: color-mix(in srgb, var(--accent) 8%, transparent); font-weight: 700; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); }
.admin-table-scroll { max-height: 280px; overflow-y: auto; }
.admin-table-scroll thead th { position: sticky; top: 0; z-index: 2; }
.admin-table-scroll tfoot td { position: sticky; bottom: 0; z-index: 2; }
/* All-cohort retention total, pinned to the bottom of the scroll area */
.admin-cohort-total td { background: var(--bg); border-top: 2px solid var(--border); font-weight: 600; }
.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-user-search-wrap { position: relative; display: inline-flex; align-items: center; }
.admin-user-search-input {
  padding: 4px 26px 4px 8px; border: 1px solid var(--border); border-radius: 6px;
  background: var(--bg-card); color: var(--text); font-size: 13px; width: 220px;
}
.admin-user-search-clear {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  border: none; background: none; color: var(--text-muted); font-size: 15px; line-height: 1;
  cursor: pointer; padding: 2px 4px;
}
.admin-user-search-clear:hover { color: var(--text); }
.admin-user-search-results {
  position: absolute; top: 100%; left: 0; margin-top: 2px;
  background: var(--bg-card); border: 1px solid var(--border); border-radius: 6px;
  box-shadow: 0 4px 14px rgba(0,0,0,.12);
  max-height: 240px; overflow-y: auto; min-width: 220px; z-index: 50;
}
.admin-user-search-result { padding: 6px 10px; font-size: 13px; cursor: pointer; white-space: nowrap; }
.admin-user-search-result:hover, .admin-user-search-result.is-active { background: color-mix(in srgb, var(--accent) 12%, var(--bg-card)); }
.admin-user-search-empty { padding: 6px 10px; font-size: 12px; color: var(--text-muted); }
.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; }
  .admin-stats--kpi { grid-template-columns: repeat(2, 1fr); }
  .admin-stats--kpi .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; }

  /* Analytics tab: the fixed-width flex rows (Feature adoption + Top writers/
     Country/Languages; Genres + the 2x2 grid) were built to hug their content
     on a wide desktop, with horizontal scroll as the overflow behavior. On a
     phone that means scrolling sideways through a whole row of cards, so stack
     everything into a single column instead and let each card use the full
     width, same as the "stack, don't scroll" treatment already used above. */
  .admin-an-rowa, .admin-an-rowb { flex-direction: column; overflow-x: visible; }
  .admin-an-rowa > *, .admin-an-rowb > * { width: 100%; }
  .admin-an-card--adoption, .admin-an-card--genres, .admin-an-stacka { max-width: 100%; }
  .admin-an-stacka-pair { flex-direction: column; }
  .admin-an-grid2x2 { grid-template-columns: 1fr; }
  .admin-table-scroll--10 { max-height: 320px; }
}

/* 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-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-email { font-size: 12px; font-weight: 600; color: var(--text); }
.admin-feedback-text {
  font-size: 13px; color: var(--text); white-space: pre-wrap; word-break: break-word;
  padding: 12px 14px; line-height: 1.6; border-top: 1px solid var(--border);
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
}
.admin-feedback-item--open .admin-feedback-text { -webkit-line-clamp: unset; overflow: visible; }
.admin-feedback-body { display: none; padding: 0 14px 14px; }
.admin-feedback-item--open .admin-feedback-body { display: block; }
.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 */
  /* Chart-only tier colours: same family as the badges above (grey/green/
     terracotta/gold), but brighter and more mutually separated. The badge
     tones are muted on purpose for text-on-chip contexts; in a stacked bar or
     area chart that same low saturation makes adjacent tiers hard to tell
     apart at a glance, so these are tuned for legibility, not chip contrast. */
  --chart-muse: #8b97a3;
  --chart-basic: #4f9d5c;
  --chart-premium: #d9683f;
  --chart-plus: #d1a23e;
  --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 */
  --chart-muse: #9aa7b3;
  --chart-basic: #5fb56b;
  --chart-premium: #e2825a;
  --chart-plus: #dbb256;
}

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

:root[data-theme="sky"] {
  --bg: #e8f2fb;
  --bg-card: #f6fbfe;
  --text: #1e2d3d;
  --text-muted: #5f7891;
  --border: #c7ddef;
}

*, *::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); 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; }

/* Focus mode (fullscreen): the app-header used to float as its own compact
   pill, separate from the main editor toolbar below it. #btn-exit-focus now
   moves into that toolbar (see manuscript.html) and stays right where the
   toolbar always sat, not floating; app-header has nothing left to show
   once exit-focus moves out, so it's hidden outright. One stationary bar
   instead of two. */
body.ws-focus-mode .app-header {
  display: none;
}
/* Chapter nav keeps the same width as regular mode: no focus-specific
   .ws-carousel override, so it inherits the base flex: 1 1 auto / max-width. */
/* 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,
body.ws-focus-mode #app .ws-toolbar-tools > button { flex-shrink: 0; }
/* Exit-focus and the theme picker are folded into the toolbar in focus mode.
   Pin them to the right corner with one gap before them, instead of leaving
   them left-packed with empty space trailing off to the right. */
body.ws-focus-mode #app .ws-right-header #btn-exit-focus { margin-left: auto; }
body.ws-focus-mode #app .ws-export-menu { display: none; }
body.ws-focus-mode #app .ws-right-header {
  min-height: 40px;
  padding: 6px 10px;
}

/* Focus mode is for writing, not toolbars: keep chapter nav, scene break,
   the editor toggle, and save; everything else (still reachable via keyboard
   shortcuts, or by exiting focus mode) is hidden so the compact bar never
   wraps to 2 lines. */
body.ws-focus-mode #app .ws-right-header #btn-add-chapter,
body.ws-focus-mode #app .ws-right-header #btn-format-undo,
body.ws-focus-mode #app .ws-right-header #btn-format-redo,
body.ws-focus-mode #app .ws-right-header #btn-search-open,
body.ws-focus-mode #app .ws-right-header #btn-sprint,
body.ws-focus-mode #app .ws-right-header #btn-readaloud,
body.ws-focus-mode #app .ws-right-header #btn-insights-open,
body.ws-focus-mode #app .ws-right-header #btn-settings-open,
body.ws-focus-mode #app .ws-right-header #btn-snapshots-open,
body.ws-focus-mode #app .ws-right-header #btn-export,
body.ws-focus-mode #app .ws-right-header #ws-ms-stats,
body.ws-focus-mode #app .ws-right-header .ws-toolbar-div {
  display: none !important;
}
/* The text-selection formatting popup is its own kind of distraction. */
body.ws-focus-mode .ws-sel-bar { display: none !important; }

/* 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; }
/* Jump-to-highlight target: an outline pulse, since a background flash (used
   elsewhere for this purpose) would be invisible against the highlight's own
   yellow background. */
@keyframes ws-hl-jump-pulse {
  0%, 35% { box-shadow: 0 0 0 3px var(--accent); }
  100%    { box-shadow: 0 0 0 3px transparent; }
}
.ws-hl-jump-flash { animation: ws-hl-jump-pulse 2s ease-out; border-radius: 3px; }

/* Highlights & comments pane */
.ws-hl-ch-heading {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  color: var(--text-muted); margin: 18px 0 6px; padding: 0 2px;
}
.ws-hl-ch-heading:first-child { margin-top: 0; }
.ws-hl-card {
  border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-card);
  padding: 10px 12px; margin-bottom: 8px; cursor: pointer; transition: border-color .15s;
}
.ws-hl-card:hover { border-color: var(--accent); }
.ws-hl-card-top { display: flex; align-items: flex-start; gap: 8px; }
.ws-hl-text {
  flex: 1; min-width: 0;
  font-size: 12px; line-height: 1.5; color: var(--text); white-space: pre-wrap;
  background: color-mix(in srgb, #fff176 35%, transparent); border-radius: 3px; padding: 1px 3px;
  box-decoration-break: clone; -webkit-box-decoration-break: clone;
}
.ws-hl-note {
  font-size: 11px; line-height: 1.5; color: var(--text-muted); margin-top: 6px;
  padding-top: 6px; border-top: 1px dashed var(--border); white-space: pre-wrap;
}
/* 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; max-height: calc(100vh - 16px); overflow-y: auto; box-sizing: border-box; }
.ws-annot-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.ws-annot-label { font-size: 11px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em; }
.ws-annot-ta { width: 100%; box-sizing: border-box; resize: vertical; min-height: 64px; max-height: 300px; 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; }
.ws-annot-remove-hl, .ws-hl-remove {
  background: none; border: none; padding: 0 2px; font-size: 16px; line-height: 1;
  color: var(--text-muted); cursor: pointer; flex-shrink: 0;
}
.ws-annot-remove-hl:hover, .ws-hl-remove:hover { color: #dc2626; }

/* ── 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: auto; }
#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[data-theme="sky"]     { background: #e8f2fb; color: #1e2d3d; }
.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-optin { align-items: flex-start; }
.checkbox-row-optin 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; }

/* Folded by default: same +/- disclosure pattern as .ws-tp-frontback */
.ws-series-shared-details { margin: 20px 0 8px; }
.ws-series-shared-details summary {
  cursor: pointer; list-style: none; display: flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em;
  color: var(--text-muted); user-select: none;
}
.ws-series-shared-details summary::-webkit-details-marker { display: none; }
.ws-series-shared-details summary::before { content: '+'; font-size: 13px; font-weight: 400; }
.ws-series-shared-details[open] summary::before { content: '−'; }
.ws-series-shared-details[open] summary { color: var(--text); }
.ws-series-shared-count { font-weight: 400; text-transform: none; letter-spacing: normal; color: var(--text-muted); }
.ws-series-shared-details .ws-shared-chars { margin-top: 8px; }
.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: not-allowed; }
.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: clamp(320px, 18vw, 420px); 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 */
/* #pane-series is explicitly excluded: it never legitimately enters either
   mode (no config in _SINGLE_CARD_CFG, no group concept at all), but if the
   class ever ends up on it anyway (a real, reproduced bug, see loadSeries'
   own _clearSingleCard call), this guarantees its AI tab can never be hidden
   by it regardless, a JS-level class bug should not be able to permanently
   blank out a whole tab with no visible error. */
.ws-pane--single-card:not(#pane-series) #ptab-ai,
.ws-pane--single-card:not(#pane-series) #ptab-stylecheck { display: none !important; }
/* Group view: hide AI/style-check tab button and body */
.ws-pane--group-view:not(#pane-series) .ws-pane-tab[data-tab="ai"],
.ws-pane--group-view:not(#pane-series) .ws-pane-tab[data-tab="stylecheck"] { display: none !important; }
.ws-pane--group-view:not(#pane-series) #ptab-ai,
.ws-pane--group-view:not(#pane-series) #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 card itself has no textarea, so it stays a fixed height; its
   front & back matter card is the sibling detail region that grows and
   scrolls, same as .ws-char-body / .ws-loc-body do for other card types. */
.ws-pane--single-card .ws-chapter-link[data-idx="-1"].ws-card--active { flex: 0 0 auto; }
.ws-pane--single-card .ws-chapter-list .ws-tp-fb-card { flex: 1; min-height: 0; overflow-y: auto; }
.ws-pane--single-card .ws-card--active .ws-ch-desc-row { flex: 1; display: flex !important; flex-direction: column; min-height: 0; }
/* The Manual/AI tab wrapper sits between .ws-ch-desc-row and its textarea now,
   so the flex-to-fill-height chain has to pass through the active tab body too. */
.ws-pane--single-card .ws-card--active .ws-ch-desc-tabs { flex-shrink: 0; }
.ws-pane--single-card .ws-card--active .ws-ch-desc-tabbody--active { 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.45; cursor: not-allowed; }
.ws-bible-btn--locked:hover { opacity: 0.45; }
.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-fb-card {
  margin-top: 8px; border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--bg-card); padding: 2px 10px;
}
.ws-tp-fb-card .ws-tp-frontback { max-width: none; margin: 0; border-top: none; padding-top: 0; }

/* 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; max-height: min(320px, calc(100vh - 80px)); overflow-x: hidden; overflow-y: auto; 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; }
/* Per-card Manual/AI toggle, a smaller echo of .ws-pane-tab so each chapter
   card can generate its own description without leaving the card. */
.ws-ch-desc-tabs { display: flex; gap: 2px; margin-bottom: 4px; }
.ws-ch-desc-tab {
  background: none; border: none; cursor: pointer;
  padding: 2px 8px; font-size: 10.5px; font-weight: 600;
  color: var(--text-muted); border-radius: 5px 5px 0 0;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.ws-ch-desc-tab:hover { color: var(--text); }
.ws-ch-desc-tab--active { color: var(--accent); border-bottom-color: var(--accent); }
.ws-ch-desc-tab--locked { color: var(--text-muted); opacity: 0.45; cursor: not-allowed; }
.ws-ch-desc-tabbody { display: none; }
.ws-ch-desc-tabbody--active { display: block; }
.ws-ch-desc-ai-btn { font-size: 11px; }
.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,
.ws-toolbar-tools > button,
.ws-toolbar-tools > select,
.ws-toolbar-tools > .ws-save-indicator,
.ws-toolbar-tools > .ws-ms-stats { flex-shrink: 0; white-space: nowrap; }
.ws-right-header > .ws-ms-stats,
.ws-toolbar-tools > .ws-ms-stats { margin-left: auto; }
/* Top-bar save status shown as a small state dot (scoped by id) so its width
   never changes and never reflows the toolbar; the detail is in the title
   tooltip. The shared .ws-save-indicator used in the side panes keeps its text.
   Word count reserves width and uses tabular figures so digits do not nudge it. */
#save-indicator {
  width: 9px; height: 9px; min-width: 9px; padding: 0; border-radius: 50%;
  flex: 0 0 auto; align-self: center; background: transparent; transition: background-color .15s;
}
#save-indicator[data-state="unsaved"] { background: var(--text-muted); }
#save-indicator[data-state="saving"]  { background: #d99a2b; }
#save-indicator[data-state="saved"]   { background: var(--accent); }
#save-indicator[data-state="failed"]  { background: #dc2626; }
#ws-ms-stats { font-variant-numeric: tabular-nums; }
.ws-right-header > .ws-toolbar-div,
.ws-toolbar-tools > .ws-toolbar-div { flex-shrink: 0; align-self: center; width: 1px; height: 20px; margin: 0 2px; background: var(--border); }

/* Groups the buttons below the chapter carousel into one unit so the mobile
   breakpoint can fold them behind a toggle; invisible to layout everywhere
   else, so on desktop it changes nothing (its children lay out directly in
   .ws-right-header's own flex row). */
.ws-toolbar-tools { display: contents; }
.ws-toolbar-fold-btn { display: none; }

/* 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). max-width scales gently with viewport width
   instead of a flat px cap, so wide monitors get a wider page instead of
   just wider empty gutters; the clamp floor matches the old fixed value
   exactly, so nothing changes below a normal desktop width. */
.ws-chapter-box { display: flex; flex-direction: column; flex: 1; min-height: 0; gap: 0; max-width: clamp(760px, 46vw, 920px); margin-left: auto; margin-right: auto; width: 100%; container-type: inline-size; }
/* Opt-in wide paper: still a page with visible background gutters on the
   sides, not a true full-bleed edit surface. Only takes effect together with
   .ws-left-collapsed (panel hidden or focus mode, which sets the same class)
   so the preference sticks but the width only expands when there's actually
   room for it and the panel isn't there to make use of otherwise. */
.ws-layout.ws-left-collapsed .ws-chapter-box.ws-paper-wide { max-width: clamp(920px, 82vw, 1400px); }
/* Toggle button only makes sense in that same state. */
#btn-wide-paper { display: none; }
.ws-layout.ws-left-collapsed #btn-wide-paper { display: inline-block; }
#btn-wide-paper.ws-toggle-active { color: var(--accent); border-color: var(--accent); }

/* ── 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);
}
:root[data-theme="sky"] .ws-chapter-box {
  box-shadow: 0 6px 22px rgba(30, 60, 90, 0.12), 0 1px 3px rgba(30, 60, 90, 0.08);
}

/* Title page editor */
.ws-tp-scroll { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; }
.ws-title-page-editor {
  flex: 0 0 auto; min-height: 320px; 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; }
/* top is set inline per break, computed from the real line-wrap geometry so
   the line lands in the actual gap between two lines, not on top of either. */
.ws-page-break-line { position: absolute; left: 0; right: 0; height: 0; border-top: 1px dashed var(--border); }
/* Must stay within the padding box (right >= 0): .ws-ch-body only sets
   overflow-y, and per spec that implicitly makes overflow-x auto too, so
   anything positioned past its own right edge produces a real horizontal
   scrollbar, not just a visual spill. Just the number, not "Page N", so it's
   narrow enough to sit in the margin without needing to push past it. */
.ws-page-break-label { position: absolute; right: 2px; top: -8px; font-size: 10px; font-family: system-ui, sans-serif; color: var(--text-muted); background: var(--bg-card); padding: 1px 5px; border-radius: 3px; white-space: nowrap; }
.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.45; cursor: not-allowed; }
.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-upgrade-toast { pointer-events: auto; cursor: pointer; }

/* Generic tier lock: any control not included in the current plan. Greyed,
   cursor communicates it will not act, but stays clickable so the delegated
   handler in app.js can explain what unlocks it. Never pair with
   pointer-events:none or the disabled attribute, both swallow the click. */
.ws-locked { opacity: 0.45; cursor: not-allowed; }
.ws-locked:hover { opacity: 0.45; }
a.ws-locked, button.ws-locked { pointer-events: auto; }
.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 (in-panel, dash-settings-wrap) ────────────────────────────── */
.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);
    -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }

  /* Side panel fills remaining drawer width. The width transition is a
     desktop-only affordance (resizing the panel open/closed); left active on
     mobile it's an extra, pointless repaint during the drawer's own slide-in
     transform and a plausible contributor to the "scroll gets stuck" glitch. */
  .ws-left-area .ws-panel.ws-left { flex: 1; min-width: 0; width: auto !important; transition: none; }
  .ws-left-area .ws-panel.ws-left.ws-side-open { width: auto; }
  .ws-left-area .ws-panel-body, .ws-left-area .ws-pane {
    -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
  }

  /* 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; }

  /* Save-state dot sits inline with the buttons */
  .ws-right-header { flex-wrap: wrap; }
  .ws-right-header #save-indicator { flex: 0 0 auto; align-self: center; }

  /* Carousel (chapter tabs) shares the first row with the fold toggle; the
     tool buttons below start folded away and only take their own row(s) once
     unfolded, so the editor opens uncluttered instead of with three rows of
     buttons under the chapter bar. */
  .ws-right-header .ws-carousel { flex: 1 1 auto; max-width: none; min-width: 0; }
  .ws-toolbar-fold-btn {
    display: inline-flex !important; align-items: center; justify-content: center;
    flex: 0 0 auto; width: 34px; min-height: 34px; padding: 0; font-size: 16px;
  }
  .ws-right-header--tools-open .ws-toolbar-fold-btn {
    background: var(--accent); border-color: var(--accent); color: #fff;
  }
  .ws-toolbar-tools { display: none; flex-basis: 100%; }
  .ws-right-header--tools-open .ws-toolbar-tools {
    display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-top: 6px;
  }

  /* Trimmed to fit two rows instead of three: the writing timer, manuscript
     settings, and version history are still one tap away on desktop, they
     just do not compete for space in this fold on a phone screen. */
  #btn-sprint, #btn-settings-open, #btn-snapshots-open { display: none !important; }
  /* Editor toggle is already hidden on mobile (its flyout panel doesn't fit);
     with Settings also gone, the whole group between it and Save is empty, so
     its own divider is dropped too, otherwise it left two dividers in a row
     between Read and Save with nothing between them. */
  #ws-toolbar-div-editor { display: none !important; }

  /* Bigger tap targets for the editor top-bar controls on touch screens */
  .ws-right-header > button,
  .ws-right-header > select,
  .ws-toolbar-tools > button,
  .ws-toolbar-tools > 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; }
.ws-ep-page-wrap--excerpt {
  -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; }
.ws-ep-titlepage { text-align: center; display: flex; flex-direction: column; justify-content: center; height: 100%; }
.ws-ep-tp-title { font-size: 1.8em; font-weight: 700; margin-bottom: .3em; }
.ws-ep-tp-subtitle { font-size: 1.15em; margin-bottom: 1.6em; color: #555; }
.ws-ep-tp-byline { font-size: 1em; }
.ws-ep-copyright p { font-size: 0.78em; text-align: left; margin: 0 0 0.8em; }
.ws-ep-dedication { text-align: center; display: flex; flex-direction: column; justify-content: center; height: 100%; }
.ws-ep-dedication p { font-style: italic; font-size: 1.05em; margin: 0 0 0.5em; }
.ws-ep-also-by-line { text-align: center; font-style: italic; margin: 0 0 0.5em; }
.ws-export-toggle-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ws-export-toggle-label { font-size: 12px; color: var(--text); }

@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: min(420px, calc(100vw - 32px)); }
.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-thread-expand { background: none; border: none; padding: 0; margin-top: 2px; font-size: 12px; color: var(--accent); cursor: pointer; }
.fb-thread-expand:hover { text-decoration: underline; }
#fb-thread-modal-body { max-height: 65vh; overflow-y: auto; }
#fb-thread-modal-body .fb-thread-meta { margin-bottom: 10px; }
#fb-thread-modal-body .fb-thread-msg { font-size: 14px; padding: 10px 14px; }
.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--locked { opacity: 0.45; cursor: not-allowed; }

.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; }

/* Per-chapter sections (characters/locations/scenes) and the spanning section
   (plot threads/storylines), replacing the single current-chapter-only grid. */
.ws-plan-grid--sectioned { display: flex; flex-direction: column; gap: 4px; }
.ws-plan-section { border-bottom: 1px dashed var(--border); padding-bottom: 12px; }
.ws-plan-section--unplaced .ws-plan-section-hdr { color: var(--text-muted); font-style: italic; }
.ws-plan-section-hdr { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--text-muted); padding: 10px 2px 7px; }
.ws-plan-section-items { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 6px; }
.ws-plan-section-add { align-self: flex-start; margin-top: 8px; font: inherit; font-size: 12px; font-weight: 600;
  color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); border: 1px dashed var(--accent);
  border-radius: 14px; padding: 4px 12px; cursor: pointer; }
.ws-plan-section-add:hover { background: color-mix(in srgb, var(--accent) 18%, transparent); }
.ws-plan-span-range { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--text-muted); margin-bottom: 2px; }
.ws-plan-span-range select { font: inherit; font-size: 11.5px; padding: 1px 4px; border-radius: 4px;
  border: 1px solid var(--border); background: var(--bg-card); color: var(--text); }

.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: fixed; z-index: 400; background: var(--bg-card); border: 1px solid var(--border); border-radius: 8px; padding: 6px; display: flex; flex-wrap: wrap; align-content: flex-start; gap: 6px; width: 180px; height: 120px; overflow-y: auto; overflow-x: hidden; box-sizing: border-box; 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-color-clear.ws-plan-color-swatch--active { border-color: var(--accent) !important; }
.ws-plan-card-color-btn { box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.9), 0 0 0 1.5px rgba(0,0,0,.3); }
.ws-plan-card-color-btn:hover { box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.9), 0 0 0 1.5px var(--accent); }
.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; }
/* All 20 built-in presets are light pastels, so the fixed dark-gray text above
   always worked. A custom color can be genuinely dark, so this overrides it
   with light text when that specific pick is dark enough (JS-computed). */
.ws-plan-card--colored.ws-plan-card--dark-colored .ws-plan-card-title-input,
.ws-plan-card--colored.ws-plan-card--dark-colored .ws-plan-card-notes-input,
.ws-plan-card--colored.ws-plan-card--dark-colored .ws-plan-card-type-label,
.ws-plan-card--colored.ws-plan-card--dark-colored .ws-plan-card-btn,
.ws-plan-card--colored.ws-plan-card--dark-colored .ws-plan-card-grip { color: rgba(255,255,255,0.9); }
.ws-plan-card--colored.ws-plan-card--dark-colored .ws-plan-card-title-input::placeholder,
.ws-plan-card--colored.ws-plan-card--dark-colored .ws-plan-card-notes-input::placeholder { color: rgba(255,255,255,0.55); }
.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; }

  /* Grid: a fixed 172px row header next to fixed 150px scene cards needs
     ~350px minimum just for one card, which breaks on most phones. Stack
     the header above the scenes instead, and let cards flex two-per-row. */
  .ws-gv-row { flex-direction: column; }
  .ws-gv-rowhdr { width: 100%; border-right: none; border-bottom: 1px solid var(--border); }
  .ws-gv-scene { width: calc(50% - 4px); }

  /* Touch has no hover state, so delete/goto controls hidden behind :hover
     would otherwise be permanently invisible. The drag grip stays hidden on
     purpose: reordering by drag does not work via touch, so showing a handle
     that does nothing on tap would be misleading. */
  .ws-board-delbtn, .ws-board-gotobtn { opacity: 1; }

  /* Enlarge the smallest tap targets. .ws-board-chpick-btn has zero padding
     on desktop and is the only way to reach the Threads/Cast/Move pickers
     from every card, so it is the highest-impact one to fix. */
  .ws-board-chpick-btn { padding: 7px 2px; font-size: 12px; }
  .ws-board-addnew, .ws-gv-addnew, .ws-board-addnew--sm { padding: 6px 10px; font-size: 12px; }
  .ws-board-delbtn, .ws-board-gotobtn { width: 20px; height: 20px; }
}

/* ── 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-plan-gv-section   { display: none; flex-direction: column; flex: 1; overflow: hidden; }

/* Grid view: chapters are rows; each chapter's scenes flow left to right as
   cards within the row, coloured by the thread they advance. Characters and
   locations stay in the chapter (row) margin. A legend at the top doubles as
   a filter to isolate one thread. */
.ws-gv-hdr { padding: 8px 12px; border-bottom: 1px solid var(--border); background: var(--bg-card); flex: 0 0 auto;
  display: flex; align-items: flex-start; gap: 10px; }
.ws-gv-legend { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.ws-gv-addchapter { flex: 0 0 auto; }
.ws-gv-hint { font-size: 11.5px; color: var(--text-muted); line-height: 1.4; }
.ws-gv-hint strong { color: var(--text); font-weight: 600; }
.ws-gv-legend-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.ws-gv-legend-chip { --tc: var(--text-muted); position: relative; display: inline-flex; align-items: center; gap: 6px;
  font: inherit; font-size: 11px; font-weight: 600; padding: 3px 10px; border-radius: 999px;
  border: 1px solid var(--border); background: var(--bg-card); color: var(--text); cursor: pointer; }
.ws-gv-legend-chip:hover { border-color: var(--tc); }
.ws-gv-legend-chip:hover .ws-board-gotobtn { opacity: 1; }
.ws-gv-legend-dot { width: 9px; height: 9px; border-radius: 999px; background: var(--tc); flex: 0 0 auto; }
/* The legend dot doubles as a "recolour this thread" button. */
.ws-gv-legend-colorbtn { cursor: pointer; padding: 0; border: none; }
.ws-gv-legend-colorbtn:hover { box-shadow: 0 0 0 3px color-mix(in srgb, var(--tc) 35%, transparent); }
.ws-gv-legend-chip--on { background: var(--tc); border-color: var(--tc); color: #fff; }
.ws-gv-legend-chip--on .ws-gv-legend-dot { background: #fff; }
.ws-gv-wrap { flex: 1; min-height: 0; overflow: auto; background: var(--bg-card); }
.ws-gv { display: flex; flex-direction: column; }
.ws-gv-row { display: flex; align-items: stretch; border-bottom: 1px dotted var(--border); }
.ws-gv-rowhdr { flex: 0 0 172px; box-sizing: border-box; padding: 9px 10px;
  border-right: 1px solid var(--border); background: color-mix(in srgb, var(--text-muted) 4%, var(--bg-card)); }
.ws-gv-rowhdr-ttl { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text); }
.ws-gv-row--unplaced .ws-gv-rowhdr-ttl { color: var(--text-muted); font-style: italic; text-transform: none; letter-spacing: 0; }
.ws-gv-rowhdr-sub { font-size: 11.5px; color: var(--text); margin-top: 1px; }
.ws-gv-margin { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.ws-gv-mchip { position: relative; font-size: 10.5px; padding: 1px 7px; border-radius: 4px; border: 1px solid var(--border);
  background: var(--bg-card); color: var(--text); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  display: inline-flex; align-items: center; gap: 4px; }
.ws-gv-mchip:hover .ws-board-gotobtn { opacity: 1; }
.ws-gv-mchip--character { border-color: color-mix(in srgb, var(--pc-character) 45%, var(--border));
  background: color-mix(in srgb, var(--pc-character) 8%, var(--bg-card)); }
.ws-gv-mchip--location { border-color: color-mix(in srgb, var(--pc-location) 45%, var(--border));
  background: color-mix(in srgb, var(--pc-location) 8%, var(--bg-card)); }
.ws-gv-mdot { width: 7px; height: 7px; border-radius: 999px; flex: 0 0 auto; }
.ws-gv-mdot--character { background: var(--pc-character); }
.ws-gv-mdot--location { background: var(--pc-location); }
.ws-gv-strip { flex: 1 1 auto; min-width: 0; display: flex; flex-wrap: wrap; align-content: flex-start;
  gap: 7px; padding: 9px 10px; }
.ws-gv-scene { --tc: var(--pc-scene); position: relative; box-sizing: border-box; flex: 0 0 auto;
  width: 150px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 7px;
  padding: 6px 8px; transition: opacity .12s, border-color .12s; }
.ws-gv-scene:hover { border-color: color-mix(in srgb, var(--tc) 55%, var(--border)); }
/* True colour-coding by the primary thread: the whole card carries the thread
   colour as a soft background wash plus a stronger border, so the grid reads
   as bands of colour at a glance. Unthreaded scenes stay on the neutral card
   background so "has a thread" is itself visible. Kept as a compound selector
   (not source order alone) so the hover override below always wins. */
.ws-gv-scene--threaded { background: color-mix(in srgb, var(--tc) 18%, var(--bg-card));
  border-color: color-mix(in srgb, var(--tc) 45%, var(--border)); }
.ws-gv-scene--threaded:hover { border-color: var(--tc); }
.ws-gv-scene.ws-gv-dim { opacity: .2; }
.ws-gv-scene-dragging { opacity: .4; }
.ws-gv-drop-left { box-shadow: -2px 0 0 0 var(--accent) !important; }
.ws-gv-drop-right { box-shadow: 2px 0 0 0 var(--accent) !important; }
/* Same reveal-on-hover pattern as .ws-tl-grip/.ws-note-grip elsewhere in the
   app: invisible until the card is hovered, so it does not clutter every
   scene at once, then fully visible on its own hover. */
.ws-gv-scene-grip { cursor: grab; color: var(--text-muted); opacity: 0; font-size: 10px; flex-shrink: 0;
  user-select: none; touch-action: none; line-height: 1.25; }
.ws-gv-scene:hover .ws-gv-scene-grip { opacity: 0.5; }
.ws-gv-scene-grip:hover { opacity: 1 !important; }
.ws-gv-scene-grip:active { cursor: grabbing; }
.ws-gv-scene-ttl { font-size: 12px; font-weight: 600; color: var(--text); display: flex; align-items: flex-start; gap: 5px; line-height: 1.25; }
.ws-gv-scene-ic { color: var(--tc); font-size: 9px; flex: 0 0 auto; margin-top: 3px; }
.ws-gv-threaddots { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 5px; }
.ws-gv-tdot { width: 9px; height: 9px; border-radius: 999px; flex: 0 0 auto; }
.ws-gv-cast { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 5px; }
.ws-gv-dot { width: 15px; height: 15px; border-radius: 999px; font-size: 8.5px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center; color: #fff; }
.ws-gv-dot--character { background: var(--pc-character); }
.ws-gv-dot--location { background: var(--pc-location); }
.ws-gv-threadpick-btn, .ws-gv-movepick-btn { display: block; margin-top: 4px; }
.ws-gv-scene:hover .ws-board-delbtn, .ws-gv-scene:hover .ws-board-gotobtn { opacity: 1; }
/* Row-margin add and per-row add-scene: same muted "+ add" language as the
   Map, small enough to sit inline with the chips without reading as
   permanent instructional copy. */
.ws-gv-addnew { padding: 2px 8px; font-size: 10px; white-space: nowrap; }
.ws-gv-addscene { align-self: flex-start; }

:root {
  --pc-scene: #5b7aa8; --pc-character: #4f7a6a; --pc-location: #a9713f;
  --pc-plot_thread: #8a5a86; --pc-storyline: #3f8a86;
}

.ws-board-connbadge { position: absolute; top: -6px; right: -6px; min-width: 15px; height: 15px; padding: 0 3px;
  border-radius: 999px; background: var(--accent); color: var(--bg-card); font-size: 9px; font-weight: 700;
  line-height: 15px; text-align: center; box-shadow: 0 1px 2px rgba(0,0,0,.18); pointer-events: none; }
.ws-board-delbtn { position: absolute; top: -6px; left: -6px; width: 15px; height: 15px; border-radius: 999px;
  background: var(--bg-card); border: 1px solid var(--border); color: var(--text-muted); font-size: 11px; line-height: 13px;
  text-align: center; cursor: pointer; opacity: 0; transition: opacity .12s, background .12s, color .12s, border-color .12s; z-index: 3; }
.ws-board-delbtn:hover { background: #d64545; border-color: #d64545; color: #fff; }
.ws-board-gotobtn { position: absolute; bottom: -6px; right: -6px; width: 15px; height: 15px; border-radius: 999px;
  background: var(--bg-card); border: 1px solid var(--border); color: var(--text-muted); font-size: 10px; line-height: 13px;
  text-align: center; cursor: pointer; opacity: 0; transition: opacity .12s, background .12s, color .12s, border-color .12s; z-index: 3; }
.ws-board-gotobtn:hover { background: var(--accent); border-color: var(--accent); color: var(--bg-card); }

.ws-board-addnew { --sc: var(--text-muted); cursor: pointer; background: transparent;
  border: 1px dashed color-mix(in srgb, var(--sc) 45%, var(--border)); border-radius: 7px;
  padding: 4px 9px; font-size: 11px; font-weight: 600; color: var(--text-muted); display: inline-flex; align-items: center; }
.ws-board-addnew:hover { --sc: var(--accent); color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.ws-board-addnew--sm { padding: 2px 8px; font-size: 10px; white-space: nowrap; }

.ws-board-add-pop { position: fixed; z-index: 9999; width: 220px; background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 9px; box-shadow: 0 8px 24px rgba(0,0,0,.22); padding: 8px; }
.ws-board-add-input { width: 100%; box-sizing: border-box; font: inherit; font-size: 12.5px; padding: 6px 8px;
  border: 1px solid var(--border); border-radius: 6px; background: var(--bg-card); color: var(--text); }
.ws-board-add-list { max-height: 180px; overflow-y: auto; margin-top: 4px; }
.ws-board-add-item { font-size: 12.5px; padding: 5px 8px; border-radius: 6px; cursor: pointer; color: var(--text); }
.ws-board-add-item:hover { background: color-mix(in srgb, var(--accent) 12%, transparent); }

.ws-board-chpick-btn { font-size: 10.5px; font-weight: 600; color: var(--accent); cursor: pointer;
  margin-top: 4px; display: block; }
.ws-board-chpick-btn:hover { text-decoration: underline; }
.ws-board-chpicker-hdr { font-size: 11px; font-weight: 700; color: var(--text); padding: 2px 4px 6px; }
.ws-board-chpicker-list { max-height: 220px; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; }
.ws-board-chpicker-opt { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--text);
  padding: 5px 6px; border-radius: 6px; cursor: pointer; }
.ws-board-chpicker-opt:hover { background: color-mix(in srgb, var(--accent) 12%, transparent); }
.ws-board-chpicker-go { margin-top: 6px; }
.ws-board-chpicker-newrow { display: flex; gap: 6px; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border); }

.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; min-width: 0;
}
.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; min-width: 0; 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-search-nav-btn {
  display: flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; flex-shrink: 0;
  background: none; border: 1px solid var(--border); border-radius: 50%;
  font-size: 11px; line-height: 1; color: var(--text-muted); cursor: pointer;
  transition: border-color .15s, color .15s;
}
.help-search-nav-btn:hover { border-color: var(--accent); color: var(--accent); }
.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;
}
.help-search-mark--current {
  background: #f59e0b;
  box-shadow: 0 0 0 1px #f59e0b;
}

/* ── 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;
}
/* Bilingual gloss beside a translated section heading, e.g. "Personajes (Characters)".
   Reads as a secondary label, not part of the title. */
.help-section h2 .help-en {
  font-size: 13px; font-weight: 400; color: var(--text-muted);
}
.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; }

.ws-tp-frontback { max-width: 760px; margin: 24px auto 0; border-top: 1px solid var(--border); padding-top: 4px; }
.ws-tp-frontback summary { cursor: pointer; list-style: none; display: flex; align-items: baseline; gap: 10px; padding: 13px 4px; font-size: 14px; font-weight: 600; color: var(--text); user-select: none; }
.ws-tp-frontback summary::-webkit-details-marker { display: none; }
.ws-tp-frontback summary::before { content: '+'; font-size: 18px; font-weight: 400; color: var(--text-muted); }
.ws-tp-frontback[open] summary::before { content: '−'; }
.ws-tp-frontback[open] summary { color: var(--accent); }
.ws-tp-frontback-hint { font-size: 12px; font-weight: 400; color: var(--text-muted); }
.ws-tp-frontback-fields { display: flex; flex-direction: column; gap: 16px; padding: 4px 4px 16px; text-align: left; }
.ws-tp-fb-field label { display: flex; align-items: center; justify-content: space-between; font-size: 12px; font-weight: 600; color: var(--text-muted); margin-bottom: 5px; }
.ws-tp-fb-hint { font-weight: 400; text-transform: none; }
.ws-tp-fb-insert { font-size: 11px; color: var(--accent); background: none; border: none; cursor: pointer; padding: 0; text-decoration: underline; }
.ws-tp-fb-textarea { width: 100%; box-sizing: border-box; min-height: 90px; font-size: 14px; padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg); color: var(--text); line-height: 1.5; resize: vertical; }
.ws-tp-fb-textarea::placeholder { color: var(--text-muted); }

/* ── 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; }
  /* Let the input flex down so the next/prev arrows stay inside the header
     instead of overflowing the right edge; the count is dropped for room.
     margin-left:0 replaces the base auto margin so flex:1 can actually fill. */
  .help-search-wrap { flex: 1 1 auto; margin-left: 0; }
  .help-search-count { display: none; }
  .help-search-input, .help-search-input:focus { width: auto; flex: 1 1 auto; }

  .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-card);
}

/* 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;
}
.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; }
/* Fixed width so this wraps into a real 4-row box regardless of how wide the
   card itself renders, not a bar that only wraps once it hits the card edge. */
.ms-card-cover-swatches {
  display: flex; flex-wrap: wrap; align-content: flex-start; gap: 6px;
  width: 180px; height: 120px; overflow-y: auto; overflow-x: hidden;
  border: 1px solid var(--border); border-radius: 8px; padding: 6px; margin-bottom: 8px; box-sizing: border-box;
}
/* Compound selectors (not just .ws-color-slot-empty) so this reliably wins
   over each base swatch class's own border shorthand regardless of source order. */
.ms-cover-swatch.ws-color-slot-empty,
.ws-plan-color-swatch.ws-color-slot-empty { border-style: dashed; background: none; cursor: default; }
.ms-cover-swatch.ws-color-slot-empty:hover,
.ws-plan-color-swatch.ws-color-slot-empty:hover { transform: none; }
.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; }

/* Shared custom-color picker pieces: reused by the manuscript cover picker and
   the planning-card color picker, both structured as a row of round swatches. */
.ws-color-swatch--custom { position: relative; }
/* A small corner badge, not inset:0. That covered the whole swatch, so any
   click while hovering (i.e. any click at all) hit remove instead of apply. */
.ws-color-remove {
  display: none; position: absolute; top: -5px; right: -5px; width: 14px; height: 14px;
  align-items: center; justify-content: center; border-radius: 50%;
  background: #333; color: #fff; font-size: 9px; line-height: 1; border: 1.5px solid var(--bg-card);
}
.ws-color-swatch--custom:hover .ws-color-remove { display: flex; }
/* The native input always paints its current value as a solid filled circle,
   which would hide a dashed "add color" border. So the dashed "+" swatch is a
   separate visible wrapper, and the real <input type="color"> sits on top of
   it fully transparent (opacity:0, not display:none, so it still receives
   clicks and opens the OS picker) rather than being the visible element itself. */
.ws-color-wheel-wrap {
  position: relative; width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0;
  border: 2px dashed var(--border); display: flex; align-items: center; justify-content: center;
  color: var(--text-muted); font-size: 14px; line-height: 1;
  transition: border-color .15s, color .15s, transform .1s;
}
.ws-color-wheel-wrap:hover { border-color: var(--accent); color: var(--accent); transform: scale(1.15); }
.ws-color-wheel-input {
  position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0;
  border: none; opacity: 0; cursor: pointer; -webkit-appearance: none; appearance: none;
}
.ws-color-save-btn {
  width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--border); background: var(--bg-card);
  color: var(--accent); font-size: 12px; line-height: 1; cursor: pointer; flex-shrink: 0;
}
.ws-color-save-btn:hover { background: var(--accent); color: #fff; border-color: var(--accent); }

/* Card cover backgrounds */
.ms-card[data-cover^="#"] {
  background: linear-gradient(145deg, color-mix(in srgb, var(--ms-cover-hex) 45%, var(--bg-card)), color-mix(in srgb, var(--ms-cover-hex) 60%, var(--bg-card)));
  border-color: color-mix(in srgb, var(--ms-cover-hex) 65%, var(--border));
}
.ms-card--dark-cover .ms-card-title-link,
.ms-card--dark-cover .ms-card-meta,
.ms-card--dark-cover .ms-card-series,
.ms-card--dark-cover .ms-card-open,
.ms-card--dark-cover .ms-card-menu-btn { color: rgba(255,255,255,0.85); }
.ms-card--dark-cover .ms-card-open:hover { color: #fff; }
.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; }
#netprofile-fields { display: flex; flex-direction: column; gap: 18px; }
#netprofile-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-tier-block { margin-bottom: 14px; }
.settings-tier-block:last-of-type { margin-bottom: 0; }
.settings-tier-features { font-size: 13px; color: var(--text-muted); line-height: 1.8; margin: 8px 0 0; padding-left: 18px; }
.settings-tier-block--current {
  padding: 14px 16px;
  border: 1.5px solid var(--border);
  border-radius: calc(var(--radius) * 1.5);
  margin-bottom: 18px;
}
.settings-tier-block--current .settings-tier-features { color: var(--text); font-size: 13.5px; }
.settings-tier-block--current-basic {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
  background: color-mix(in srgb, var(--accent) 8%, var(--bg-card));
}
.settings-tier-block--current-premium {
  border-color: color-mix(in srgb, var(--premium) 45%, var(--border));
  background: color-mix(in srgb, var(--premium) 8%, var(--bg-card));
}
.settings-tier-block--current-plus {
  border-color: color-mix(in srgb, var(--plus) 40%, var(--border));
  background: color-mix(in srgb, var(--plus) 8%, var(--bg-card));
}
.settings-included-divider {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  color: var(--text-muted); margin: 4px 0 10px; padding-top: 14px; border-top: 1px solid var(--border);
}
.settings-tier-block--lower { opacity: .82; }
.settings-tier-block--lower .settings-tier-features { font-size: 12.5px; }
.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; }
/* Refer-a-friend: highlighted so it stands out from the plain settings rows. */
.settings-referral {
  margin-top: 28px; padding: 18px 20px;
  border: 1px solid color-mix(in srgb, var(--accent) 42%, var(--border));
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--accent) 9%, transparent);
}
.settings-referral .settings-subsection-heading { color: var(--accent); }
.settings-section + .settings-referral { margin-top: 22px; }
.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;
  flex-wrap: wrap;
  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; flex-wrap: wrap; 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%; }
  /* Tighter pills so the wrapped sub-tab rows fit more per line */
  .dash-arc-subtabs { padding-top: 12px; gap: 6px; }
  .dash-arc-subtab { padding: 5px 12px; font-size: 12px; }
  /* Invite-search result: stack the name/bio above the action instead of
     cramming them side by side, and let the bio use the full width */
  .dash-arc-reader-result { flex-direction: column; align-items: stretch; gap: 8px; }
  .dash-arc-reader-bio { max-width: 100%; white-space: normal; }
  /* Verify / join prompts: full width, no fixed cap on a narrow screen */
  .dash-network-verify-notice, .dash-network-join-prompt { max-width: none; }
}

/* ── 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-verify-notice {
  max-width: 560px; margin: 0 0 18px; padding: 14px 16px;
  border: 1px solid color-mix(in srgb, #b45309 40%, var(--border));
  border-left: 3px solid #b45309; border-radius: var(--radius);
  background: color-mix(in srgb, #b45309 8%, var(--bg-card));
}
.dash-network-verify-title { font-size: 14px; font-weight: 700; margin: 0 0 6px; color: var(--text); }
.dash-network-verify-text { font-size: 13px; color: var(--text-muted); line-height: 1.6; margin: 0 0 12px; }
.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--me { border-color: color-mix(in srgb, var(--accent) 40%, var(--border)); }
.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-me-badge {
  display: inline-flex; align-items: center; vertical-align: middle;
  font-size: 10px; font-weight: 700; letter-spacing: .02em;
  padding: 1px 7px; border-radius: 99px;
  background: color-mix(in srgb, var(--accent) 15%, var(--bg-card));
  color: color-mix(in srgb, var(--accent) 80%, #000);
  border: 1px solid color-mix(in srgb, var(--accent) 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; }