/* ==========================================================================
   NovelCraft Studio: UI/UX Pro Max Multi-Theme & Design System
   3 Aesthetic Modes:
     1. Modern Minimalist Slate (Light - Apple / Stripe / Linear style)
     2. Obsidian Luxury Dark (Dark - Deep charcoal, indigo & emerald)
     3. Editorial Warm Paper (Classic manuscript bookplate)
   ========================================================================== */

/* --------------------------------------------------------------------------
   THEME 1: Modern Minimalist Slate (Default Clean White)
   -------------------------------------------------------------------------- */
:root,
html[data-theme="light"] {
  --nf-bg: #f8fafc !important;
  --nf-surface: #ffffff !important;
  --nf-surface-2: #f1f5f9 !important;
  --nf-surface-3: #e2e8f0 !important;
  
  --nf-ink: #0f172a !important;       /* Crisp Slate Black */
  --nf-ink-ms: #1e293b !important;
  --nf-text: #334155 !important;
  --nf-muted: #64748b !important;
  --nf-muted-2: #94a3b8 !important;
  --nf-ghost: #cbd5e1 !important;

  --nf-primary: #2563eb !important;          /* Royal Sapphire Blue */
  --nf-primary-2: #1d4ed8 !important;        /* Deep Blue on Hover */
  --nf-primary-on-ink: #dbeafe !important;
  --nf-green: #059669 !important;            /* Emerald */
  --nf-green-line: rgba(5, 150, 105, 0.25) !important;
  --nf-green-soft: #ecfdf5 !important;

  --nf-line: #e2e8f0 !important;
  --nf-line-strong: #cbd5e1 !important;
  --nf-line-on-ink: rgba(255, 255, 255, 0.15) !important;

  --nf-hover-soft: rgba(37, 99, 235, 0.06) !important;
  --nf-active-soft: rgba(37, 99, 235, 0.1) !important;
  --nf-highlight: rgba(37, 99, 235, 0.14) !important;
  --nf-selection: rgba(37, 99, 235, 0.18) !important;

  --radius-control: 8px !important;
  --radius-card: 14px !important;
  --radius-panel: 12px !important;
  --nf-radius: 12px !important;
  --nf-radius-sm: 8px !important;

  --nf-shadow-card: 0 4px 20px rgba(15, 23, 42, 0.05), 0 1px 3px rgba(15, 23, 42, 0.03) !important;
  --nf-shadow-mock: 0 20px 45px rgba(15, 23, 42, 0.08) !important;
}

/* --------------------------------------------------------------------------
   THEME 2: Obsidian Luxury Dark (Chế độ Đêm sang trọng)
   -------------------------------------------------------------------------- */
html[data-theme="dark"] {
  --nf-bg: #09090b !important;               /* Deep Obsidian */
  --nf-surface: #18181b !important;          /* Charcoal Card */
  --nf-surface-2: #27272a !important;        /* Sub-surface */
  --nf-surface-3: #3f3f46 !important;
  
  --nf-ink: #f8fafc !important;              /* Pure Crisp White */
  --nf-ink-ms: #f1f5f9 !important;
  --nf-text: #cbd5e1 !important;             /* Light Slate */
  --nf-muted: #94a3b8 !important;
  --nf-muted-2: #64748b !important;
  --nf-ghost: #475569 !important;

  --nf-primary: #6366f1 !important;          /* Electric Indigo */
  --nf-primary-2: #4f46e5 !important;
  --nf-primary-on-ink: #e0e7ff !important;
  --nf-green: #10b981 !important;            /* Neon Emerald */
  --nf-green-line: rgba(16, 185, 129, 0.3) !important;
  --nf-green-soft: rgba(16, 185, 129, 0.12) !important;

  --nf-line: #27272a !important;             /* Slate Border */
  --nf-line-strong: #3f3f46 !important;
  --nf-line-on-ink: rgba(255, 255, 255, 0.12) !important;

  --nf-hover-soft: rgba(99, 102, 241, 0.1) !important;
  --nf-active-soft: rgba(99, 102, 241, 0.16) !important;
  --nf-highlight: rgba(99, 102, 241, 0.22) !important;
  --nf-selection: rgba(99, 102, 241, 0.3) !important;

  --radius-control: 8px !important;
  --radius-card: 14px !important;
  --radius-panel: 12px !important;
  --nf-radius: 12px !important;
  --nf-radius-sm: 8px !important;

  --nf-shadow-card: 0 4px 24px rgba(0, 0, 0, 0.4), 0 1px 2px rgba(0, 0, 0, 0.3) !important;
  --nf-shadow-mock: 0 24px 60px rgba(0, 0, 0, 0.55) !important;
}

/* --------------------------------------------------------------------------
   THEME 3: Editorial Warm Paper (Bản thảo cổ điển)
   -------------------------------------------------------------------------- */
html[data-theme="paper"] {
  --nf-bg: #faf7f2 !important;
  --nf-surface: #ffffff !important;
  --nf-surface-2: #f5f0e8 !important;
  --nf-surface-3: #eee8dc !important;
  
  --nf-ink: #1c1917 !important;
  --nf-ink-ms: #292524 !important;
  --nf-text: #44403c !important;
  --nf-muted: #78716c !important;
  --nf-muted-2: #a8a29e !important;
  --nf-ghost: #d6d3d1 !important;

  --nf-primary: #b45309 !important;
  --nf-primary-2: #92400e !important;
  --nf-primary-on-ink: #fef3c7 !important;
  --nf-green: #047857 !important;
  --nf-green-line: rgba(4, 120, 87, 0.3) !important;
  --nf-green-soft: #ecfdf5 !important;

  --nf-line: #e7e0d6 !important;
  --nf-line-strong: #d3c7b8 !important;
  --nf-line-on-ink: rgba(254, 243, 199, 0.2) !important;

  --nf-hover-soft: rgba(180, 83, 9, 0.05) !important;
  --nf-active-soft: rgba(180, 83, 9, 0.09) !important;
  --nf-highlight: rgba(180, 83, 9, 0.14) !important;
  --nf-selection: rgba(180, 83, 9, 0.2) !important;

  --radius-control: 8px !important;
  --radius-card: 14px !important;
  --radius-panel: 12px !important;
  --nf-radius: 12px !important;
  --nf-radius-sm: 8px !important;

  --nf-shadow-card: 0 4px 20px rgba(28, 25, 23, 0.06), 0 1px 3px rgba(28, 25, 23, 0.04) !important;
  --nf-shadow-mock: 0 20px 50px rgba(28, 25, 23, 0.12) !important;
}

/* ==========================================================================
   MẶC CẢNH STUDIO: ATMOSPHERIC INK BACKDROPS & AMBIENT WATERMARKS
   ========================================================================== */
html,
body {
  min-height: 100vh !important;
}

body {
  background-color: var(--nf-bg) !important;
  background-image: linear-gradient(rgba(248, 250, 252, 0.74), rgba(248, 250, 252, 0.74)), url('/assets/images/maccanh-ink-backdrop.jpg') !important;
  background-attachment: fixed !important;
  background-position: center center !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
  color: var(--nf-ink) !important;
  transition: background-color 0.25s ease, color 0.25s ease !important;
}

html[data-theme="dark"] body {
  background-image: linear-gradient(rgba(9, 9, 11, 0.70), rgba(9, 9, 11, 0.70)), url('/assets/images/maccanh-dark-backdrop.jpg') !important;
}

html[data-theme="paper"] body {
  background-image: linear-gradient(rgba(250, 247, 242, 0.64), rgba(250, 247, 242, 0.64)), url('/assets/images/maccanh-paper-backdrop.jpg') !important;
}

/* Make all container wrappers completely transparent so the artwork flows through */
#root,
.app-core-page,
.app-core-dashboard,
.qc-app-shell,
.qc-editor-shell,
.writer-shell,
.nf-writing-workbench,
.qc-editor-main,
.nf-manuscript-panel,
.nf-manuscript-canvas,
.nf-public,
.nf-landing-page {
  background: transparent !important;
  background-color: transparent !important;
}

/* Semi-transparent Glassmorphism for Sidebars & Toolbars */
.qc-editor-toolbar {
  background: var(--nf-surface) !important;
  border-bottom: 1px solid var(--nf-line-strong) !important;
}

.nf-editor-left-panel,
.nf-editor-left-rail,
.qc-assistant-panel {
  background: var(--nf-surface-2) !important;
  border-color: var(--nf-line-strong) !important;
}

/* Floating Manuscript Sheet: Crisp, Perfectly Legible Paper Surface */
.manuscript-surface {
  position: relative !important;
  background-color: var(--nf-surface) !important;
  border: 1px solid var(--nf-line-strong) !important;
  border-radius: 8px !important;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.04) !important;
  margin-top: 14px !important;
  margin-bottom: 24px !important;
}

html[data-theme="dark"] .manuscript-surface {
  background-color: #18181b !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5) !important;
}

html[data-theme="paper"] .manuscript-surface {
  background-color: #fbf8f2 !important;
  border-color: #ded6c9 !important;
  box-shadow: 0 14px 38px rgba(44, 37, 35, 0.08) !important;
}

/* Subtle Cinnabar/Gold Seal Watermark on Manuscript Bottom-Right */
.manuscript-surface::after {
  content: "";
  position: absolute;
  bottom: 24px;
  right: 28px;
  width: 92px;
  height: 92px;
  background-image: url('/brand/novelcraft-mark.png?v=3.5');
  background-size: contain;
  background-repeat: no-repeat;
  opacity: 0.08;
  pointer-events: none;
  z-index: 1;
}

html[data-theme="dark"] .manuscript-surface::after {
  opacity: 0.14;
  filter: brightness(1.2);
}

.nc-brand-emblem-img {
  width: 32px !important;
  height: 32px !important;
  border-radius: 8px !important;
  box-shadow: 0 2px 8px rgba(217, 119, 6, 0.35) !important;
  object-fit: cover !important;
  border: 1px solid rgba(217, 119, 6, 0.4) !important;
  display: block !important;
}

/* ==========================================================================
   EXECUTIVE STUDIO TOPBAR (Mặc Cảnh Studio - InkRealm)
   ========================================================================== */
/* Suppress legacy marketing/sales header when the executive Studio Header is mounted */
.paper-header {
  display: none !important;
}

.nc-top-control-bar {
  position: sticky;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100000;
  background: var(--nf-surface);
  border-bottom: 1px solid var(--nf-line);
  padding: 6px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.04);
  font-family: 'Be Vietnam Pro', system-ui, sans-serif;
  font-size: 13px;
  min-height: 52px;
  box-sizing: border-box;
}

.nc-top-left {
  display: flex;
  align-items: center;
  gap: 14px;
}

/* Brand Lockup */
.nc-brand-lockup {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: inherit;
  padding: 4px 8px;
  border-radius: 8px;
  transition: all 0.15s ease;
}

.nc-brand-lockup:hover {
  background: var(--nf-hover-soft);
}

.nc-brand-emblem {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--nf-primary), var(--nf-primary-2));
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.25);
  flex-shrink: 0;
}

.nc-brand-emblem svg {
  width: 17px !important;
  height: 17px !important;
}

.nc-brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}

.nc-brand-title {
  font-family: var(--nc-font-display, 'Literata', serif);
  font-size: 15px;
  font-weight: 700;
  color: var(--nf-ink);
  letter-spacing: -0.2px;
}

.nc-brand-sub {
  font-size: 10px;
  font-weight: 600;
  color: var(--nf-muted);
  text-transform: uppercase;
  letter-spacing: 0.8px;
}

.nc-novel-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--nf-surface-2);
  border: 1px solid var(--nf-line);
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--nf-text);
}

.nc-novel-icon svg {
  width: 13px !important;
  height: 13px !important;
  color: var(--nf-primary);
}

.nc-novel-chap {
  background: var(--nf-surface);
  border: 1px solid var(--nf-line);
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 10px;
  color: var(--nf-muted);
}

.nc-btn-studio-entry {
  background: var(--nf-surface-2) !important;
  border: 1px solid var(--nf-line) !important;
  color: var(--nf-primary) !important;
  font-weight: 700 !important;
}

.nc-btn-studio-entry:hover {
  background: var(--nf-hover-soft) !important;
  border-color: var(--nf-primary) !important;
}

.nc-top-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.nc-btn-action {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 13px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  border: 1px solid var(--nf-line);
  background: var(--nf-surface);
  color: var(--nf-ink);
  text-decoration: none;
}

.nc-btn-action:hover {
  background: var(--nf-surface-2);
  border-color: var(--nf-primary);
  color: var(--nf-primary);
  transform: translateY(-1px);
}

.nc-btn-primary-action {
  background: var(--nf-primary) !important;
  color: #ffffff !important;
  border-color: var(--nf-primary) !important;
  font-weight: 700 !important;
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.25);
}

.nc-btn-primary-action:hover {
  background: var(--nf-primary-2) !important;
  color: #ffffff !important;
}

.nc-top-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9999px;
  background: var(--nf-primary);
  color: #ffffff;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
}

.nc-live-indicator {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
  background: #94a3b8;
  transition: all 0.2s ease;
}

.nc-live-indicator.connected {
  background: #10b981;
  box-shadow: 0 0 6px rgba(16, 185, 129, 0.6);
}

.nc-live-indicator.disconnected {
  background: #f59e0b;
}

.nc-ai-model-label {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--nf-text);
}

/* Theme Switcher Segmented Control */
.nc-theme-switch-group {
  display: inline-flex;
  align-items: center;
  background: var(--nf-surface-2);
  border: 1px solid var(--nf-line);
  border-radius: 8px;
  padding: 2px;
  gap: 2px;
}

.nc-theme-btn {
  border: none;
  background: transparent;
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  color: var(--nf-muted);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: all 0.15s ease;
}

.nc-theme-btn:hover {
  color: var(--nf-ink);
}

.nc-theme-btn.active {
  background: var(--nf-surface);
  color: var(--nf-primary);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  font-weight: 700;
}

/* Executive Luxury Owner Badge */
.nc-owner-luxury-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.12), rgba(217, 119, 6, 0.18));
  border: 1px solid rgba(217, 119, 6, 0.35);
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 11px;
  color: #b45309;
}

html[data-theme="dark"] .nc-owner-luxury-badge {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.15), rgba(217, 119, 6, 0.25));
  border-color: rgba(245, 158, 11, 0.4);
  color: #fbbf24;
}

.nc-owner-crown svg {
  width: 13px !important;
  height: 13px !important;
  color: #d97706;
}

.nc-owner-text {
  font-weight: 700;
  text-transform: uppercase;
  font-size: 9.5px;
  letter-spacing: 0.5px;
}

.nc-author-name {
  font-weight: 600;
  color: var(--nf-ink);
  padding-left: 4px;
  border-left: 1px solid rgba(217, 119, 6, 0.3);
}

/* Universal SVG constraint */
.nc-top-control-bar svg,
.nc-btn-action svg,
.nc-theme-btn svg,
.nc-api-modal svg {
  width: 15px !important;
  height: 15px !important;
  max-width: 15px !important;
  max-height: 15px !important;
  display: inline-block !important;
  vertical-align: middle !important;
  flex-shrink: 0 !important;
}

/* ==========================================================================
   MODAL CÀI ĐẶT API TRẢ PHÍ (API SETTINGS MODAL)
   ========================================================================== */
.nc-api-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(8px);
  z-index: 1000000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.nc-api-modal-overlay.is-open {
  display: flex;
}

.nc-api-modal {
  width: 100%;
  max-width: 620px;
  background: var(--nf-surface);
  border: 1px solid var(--nf-line-strong);
  border-radius: 14px;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.35);
  overflow: hidden;
  font-family: 'Be Vietnam Pro', system-ui, sans-serif;
  color: var(--nf-ink);
  animation: ncApiPop 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes ncApiPop {
  from { opacity: 0; transform: scale(0.96) translateY(10px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}

.nc-api-header {
  padding: 18px 24px;
  background: var(--nf-surface-2);
  border-bottom: 1px solid var(--nf-line);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.nc-api-title {
  font-size: 16.5px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--nf-ink);
}

.nc-api-body {
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.nc-form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.nc-form-label {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--nf-text);
  display: flex;
  justify-content: space-between;
}

.nc-form-input,
.nc-form-select {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid var(--nf-line);
  border-radius: 8px;
  background: var(--nf-surface);
  color: var(--nf-ink);
  font-family: inherit;
  font-size: 13.5px;
  box-sizing: border-box;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.nc-form-input:focus,
.nc-form-select:focus {
  outline: none;
  border-color: var(--nf-primary);
  box-shadow: 0 0 0 3px var(--nf-hover-soft);
}

.nc-password-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.nc-btn-toggle-key {
  position: absolute;
  right: 10px;
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--nf-muted);
  font-size: 12px;
  font-weight: 600;
  padding: 4px;
}

.nc-api-status-banner {
  padding: 12px 16px;
  border-radius: 8px;
  font-size: 12.5px;
  line-height: 1.5;
  display: none;
}

.nc-api-status-banner.success {
  display: block;
  background: var(--nf-green-soft);
  color: var(--nf-green);
  border: 1px solid var(--nf-green-line);
}

.nc-api-status-banner.error {
  display: block;
  background: #fef2f2;
  color: #dc2626;
  border: 1px solid #fecaca;
}

.nc-api-footer {
  padding: 16px 24px;
  background: var(--nf-surface-2);
  border-top: 1px solid var(--nf-line);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.nc-btn-group-right {
  display: flex;
  gap: 10px;
}

/* ==========================================================================
   OVERRIDE NOVELCRAFT CORE ELEMENTS (Buttons, Cards, Radii)
   ========================================================================== */
.paper-btn,
.app-core-button,
.nf-ui-button {
  border-radius: var(--radius-control) !important;
  font-family: 'Be Vietnam Pro', system-ui, sans-serif !important;
  font-weight: 600 !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  cursor: pointer !important;
}

.paper-btn:hover,
.app-core-button:hover,
.nf-ui-button:hover {
  transform: translateY(-1.5px) !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15) !important;
}

.paper-btn-primary,
.app-core-button--primary {
  background: var(--nf-primary) !important;
  color: #ffffff !important;
  border: 1px solid var(--nf-primary) !important;
}

.paper-btn-primary:hover,
.app-core-button--primary:hover {
  background: var(--nf-primary-2) !important;
  border-color: var(--nf-primary-2) !important;
}

.paper-editor-shell,
.app-core-next-task,
.app-core-project,
.app-core-empty-dashboard,
.paper-memory-card,
.paper-tool-card,
.paper-pricing-card,
.paper-chart,
.paper-workflow-panel {
  border-radius: var(--radius-card) !important;
  border: 1px solid var(--nf-line) !important;
  background: var(--nf-surface) !important;
  box-shadow: var(--nf-shadow-card) !important;
  transition: all 0.25s ease !important;
}

.app-core-project:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1) !important;
}

/* ==========================================================================
   OWNER / UNRESTRICTED MODE: HIDE ALL UPGRADE PROMPTS & COMMERCIAL PAYWALLS
   ========================================================================== */
.paper-pricing-grid,
.paper-pricing-card,
.paper-billing-toggle,
.paper-quota,
.paper-popular-tag,
.paper-price,
.paper-yearly,
.app-core-limit-note,
.app-core-gifts,
.app-core-referral,
.app-core-redeem,
.nps-limit-screen,
.pricing-header-panel,
.pricing-account-panel,
.pricing-toolbar,
.pricing-cycle-control,
.pricing-trust-row,
.pricing-plan-card,
.pricing-summary,
.pricing-topup-section,
.commerce-pricing,
.nc-upgrade-card,
.nc-limit-note,
.pricing-redesign,
.pricing-plan-pro,
.pricing-plan-studio,
.pricing-plan-free,
.nf-pricing-preview,
.nf-pricing-copy,
.nf-pricing-kicker,
.nf-pricing-grid,
.nf-pricing-card,
.nf-plan-quota,
.qc-analysis-upgrade,
.nf-gift-redeem-card,
.nf-gift-code-input,
.app-core-account-stats,
.app-core-referral__panel,
.app-core-story-row__pending,
a[href*="/bang-gia"],
a[href*="pricing"],
a[href*="upgrade"],
button[data-action="upgrade"] {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  height: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}

/* Hide Pricing Section entirely on landing page */
#pricing,
section[data-section="pricing"],
.paper-section:has(.paper-pricing-grid) {
  display: none !important;
}

/* Force unlock all features that were marked as locked */
.is-locked,
[data-locked="true"] {
  opacity: 1 !important;
  pointer-events: auto !important;
  cursor: pointer !important;
}

.is-locked svg,
[data-locked="true"] svg {
  display: none !important; /* Hide lock padlocks */
}

/* Owner Status Badge in User UI */
.nc-owner-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: #ffffff;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 9999px;
  letter-spacing: 0.3px;
  box-shadow: 0 2px 6px rgba(217, 119, 6, 0.3);
}


/* ==========================================================================
   Project Selector, Dropdown & Create Novel Modal (Mặc Cảnh Studio)
   ========================================================================== */

.nc-project-selector-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: 8px;
}

.nc-btn-project-dropdown {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 12px;
  background: var(--nf-surface-2, #f5f0e9);
  border: 1px solid var(--nf-line-strong, #d4c5b9);
  border-radius: 8px;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--nf-text, #271c19);
  cursor: pointer;
  transition: all 0.2s ease;
  max-width: 220px;
}

.nc-btn-project-dropdown:hover {
  background: var(--nf-hover-soft, #ece5dc);
  border-color: var(--nf-primary, #b45309);
  color: var(--nf-primary, #b45309);
}

.nc-active-project-title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.nc-dropdown-arrow {
  font-size: 11px;
  color: var(--nf-muted, #78716c);
}

.nc-btn-quick-new-novel {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 12px;
  background: linear-gradient(135deg, var(--nf-primary, #b45309), var(--nf-primary-2, #d97706));
  color: #ffffff;
  border: none;
  border-radius: 8px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 2px 6px rgba(180, 83, 9, 0.25);
  white-space: nowrap;
}

.nc-btn-quick-new-novel:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(180, 83, 9, 0.35);
  filter: brightness(1.05);
}

/* Project Dropdown Menu */
.nc-project-dropdown-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  width: 320px;
  background: var(--nf-surface, #ffffff);
  border: 1px solid var(--nf-line-strong, #d4c5b9);
  border-radius: 12px;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.16);
  z-index: 100010;
  display: none;
  flex-direction: column;
  overflow: hidden;
  animation: ncSlideDown 0.18s ease-out;
}

.nc-project-dropdown-menu.is-open {
  display: flex;
}

@keyframes ncSlideDown {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}

.nc-pdm-header {
  padding: 10px 14px;
  background: var(--nf-surface-2, #f5f0e9);
  border-bottom: 1px solid var(--nf-line, #e5dbd2);
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--nf-muted, #78716c);
}

.nc-pdm-add-btn {
  background: transparent;
  border: none;
  color: var(--nf-primary, #b45309);
  font-size: 11.5px;
  font-weight: 700;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 4px;
}

.nc-pdm-add-btn:hover {
  background: var(--nf-surface, #ffffff);
}

.nc-pdm-list {
  max-height: 260px;
  overflow-y: auto;
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.nc-pdm-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 10px;
  border-radius: 8px;
  text-decoration: none;
  color: var(--nf-text, #271c19);
  transition: all 0.15s ease;
  cursor: pointer;
}

.nc-pdm-item:hover {
  background: var(--nf-hover-soft, #f5f0e9);
}

.nc-pdm-item.is-current {
  background: rgba(180, 83, 9, 0.08);
  border-left: 3px solid var(--nf-primary, #b45309);
}

.nc-pdm-item-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.nc-pdm-item-title {
  font-weight: 700;
  font-size: 13px;
  color: var(--nf-ink, #1e293b);
}

.nc-pdm-item-meta {
  font-size: 11px;
  color: var(--nf-muted, #78716c);
}

.nc-pdm-footer {
  padding: 10px 14px;
  border-top: 1px solid var(--nf-line, #e5dbd2);
  background: var(--nf-surface-2, #f5f0e9);
  text-align: center;
}

.nc-pdm-footer-link {
  font-size: 12px;
  font-weight: 600;
  color: var(--nf-primary, #b45309);
  text-decoration: none;
}

.nc-pdm-footer-link:hover {
  text-decoration: underline;
}

/* Modal Khai Mở Đại Tác Phẩm Mới */
.nc-create-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 100020;
  background: rgba(15, 10, 8, 0.7);
  backdrop-filter: blur(4px);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.nc-create-modal-overlay.is-open {
  display: flex;
}

.nc-create-modal {
  width: 540px;
  max-width: 95vw;
  background: var(--nf-surface, #ffffff);
  border: 1px solid var(--nf-line-strong, #d4c5b9);
  border-radius: 16px;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.28);
  overflow: hidden;
  animation: ncModalScale 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  flex-direction: column;
}

@keyframes ncModalScale {
  from { opacity: 0; transform: scale(0.96) translateY(10px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}

.nc-create-header {
  padding: 16px 20px;
  background: var(--nf-surface-2, #f5f0e9);
  border-bottom: 1px solid var(--nf-line, #e5dbd2);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.nc-create-title {
  font-family: var(--nc-font-display, serif);
  font-size: 17px;
  font-weight: 700;
  color: var(--nf-primary, #b45309);
  display: flex;
  align-items: center;
  gap: 8px;
}

.nc-create-form {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.nc-create-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 8px;
}


/* ==========================================================================
   MẶC CẢNH STUDIO: TOOLBAR ACTIONS, AUDIT MODAL & CHARACTER/FACT MANAGEMENT
   ========================================================================== */

.nc-toolbar-audit-btn {
  border-color: rgba(217, 119, 6, 0.4) !important;
  color: #d97706 !important;
  font-weight: 600 !important;
}

.nc-toolbar-audit-btn:hover {
  background: rgba(217, 119, 6, 0.1) !important;
  border-color: #d97706 !important;
}

.nc-toolbar-export-btn {
  border-color: rgba(5, 150, 105, 0.4) !important;
  color: #059669 !important;
  font-weight: 600 !important;
}

.nc-toolbar-export-btn:hover {
  background: rgba(5, 150, 105, 0.1) !important;
  border-color: #059669 !important;
}

.nc-char-del-btn,
.nc-fact-del-btn {
  opacity: 0.6;
  transition: all 0.18s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
}

.nc-char-del-btn:hover,
.nc-fact-del-btn:hover {
  opacity: 1;
  color: #ef4444 !important;
  background: rgba(239, 68, 68, 0.1) !important;
}

.nc-char-del-btn svg,
.nc-fact-del-btn svg {
  width: 14px;
  height: 14px;
}

.nc-dock-action-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  padding: 4px 2px;
}

.nc-dock-facts-view {
  padding-bottom: 20px;
}

.nc-audit-modal {
  box-shadow: 0 25px 70px rgba(0, 0, 0, 0.35) !important;
  animation: ncModalScale 0.22s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* ==========================================================================
   10/10 PERFECTION UPGRADES: FONT SIZE CONTROLS, ZEN MODE & WORD GOAL PROGRESS
   ========================================================================== */

/* 1. Quick Font Size Controller (A- / A+) */
.nc-font-size-group {
  display: inline-flex;
  align-items: center;
  background: var(--nf-surface-2);
  border: 1px solid var(--nf-line);
  border-radius: 8px;
  padding: 2px 4px;
  gap: 2px;
}

.nc-btn-font-size {
  border: none;
  background: transparent;
  padding: 3px 6px;
  border-radius: 5px;
  font-family: inherit;
  font-size: 11px;
  font-weight: 700;
  color: var(--nf-text);
  cursor: pointer;
  transition: all 0.15s ease;
  line-height: 1.2;
}

.nc-btn-font-size:hover {
  background: var(--nf-surface);
  color: var(--nf-primary);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.nc-font-size-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--nf-muted);
  min-width: 32px;
  text-align: center;
  user-select: none;
}

/* Direct Typography Dynamic Sizing on Manuscript */
.nf-rich-editor,
.manuscript-surface [contenteditable],
.manuscript-surface textarea,
.manuscript-surface p,
.paper-editor-main,
.qc-editor-main textarea {
  font-size: var(--nc-editor-font-size, 18px) !important;
  line-height: calc(var(--nc-editor-font-size, 18px) * 1.78) !important;
}

/* 2. Zen / Focus Mode (Chế độ tập trung chuyên sâu) */
.nc-btn-zen-mode {
  border-color: rgba(16, 185, 129, 0.35) !important;
  color: var(--nf-ink) !important;
}

.nc-btn-zen-mode:hover {
  border-color: #10b981 !important;
  color: #10b981 !important;
  background: rgba(16, 185, 129, 0.08) !important;
}

.nc-zen-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.nc-zen-icon svg {
  width: 14px !important;
  height: 14px !important;
  color: #10b981;
}

/* Zen Mode Active State */
body.nc-zen-mode #nc-control-bar {
  opacity: 0 !important;
  pointer-events: none !important;
  transform: translateY(-100%) !important;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

body.nc-zen-mode .nf-editor-left-rail,
body.nc-zen-mode .nf-editor-left-panel,
body.nc-zen-mode .nf-editor-panel,
body.nc-zen-mode .qc-assistant-panel,
body.nc-zen-mode .qc-editor-toolbar {
  opacity: 0 !important;
  pointer-events: none !important;
  width: 0 !important;
  min-width: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  overflow: hidden !important;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

body.nc-zen-mode .qc-editor-shell,
body.nc-zen-mode .writer-shell,
body.nc-zen-mode .nf-writing-workbench {
  height: 100vh !important;
  min-height: 100vh !important;
  padding: 20px 0 !important;
  margin: 0 auto !important;
}

body.nc-zen-mode .manuscript-surface {
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.16) !important;
  margin-top: 36px !important;
  margin-bottom: 80px !important;
}

/* Floating Exit Pill in Zen Mode */
.nc-zen-exit-pill {
  position: fixed;
  top: 18px;
  right: 24px;
  z-index: 1000000;
  display: none;
  align-items: center;
  gap: 8px;
  background: var(--nf-surface);
  border: 1px solid var(--nf-line-strong);
  color: var(--nf-ink);
  padding: 6px 14px;
  border-radius: 30px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.18);
  opacity: 0.35;
  transition: all 0.25s ease;
  backdrop-filter: blur(10px);
}

.nc-zen-exit-pill:hover {
  opacity: 1;
  transform: translateY(-1px);
  border-color: #10b981;
  color: #10b981;
  box-shadow: 0 6px 24px rgba(16, 185, 129, 0.3);
}

body.nc-zen-mode .nc-zen-exit-pill {
  display: inline-flex;
}

/* 3. Word Count Goal Progress Bar (Thanh tiến độ chỉ tiêu từ) */
.nc-word-goal-container {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 99998;
  pointer-events: none;
}

.nc-word-goal-track {
  width: 100%;
  height: 4px;
  background: rgba(100, 116, 139, 0.14);
  position: relative;
  overflow: hidden;
}

.nc-word-goal-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--nf-primary), #6366f1);
  transition: width 0.4s ease, background 0.4s ease;
  box-shadow: 0 0 8px rgba(37, 99, 235, 0.5);
}

.nc-word-goal-fill.completed {
  background: linear-gradient(90deg, #10b981, #059669) !important;
  box-shadow: 0 0 12px rgba(16, 185, 129, 0.7) !important;
}

/* Goal Badge in Bottom-Right Corner */
.nc-word-goal-badge {
  position: fixed;
  bottom: 12px;
  right: 20px;
  pointer-events: auto;
  z-index: 99999;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--nf-surface);
  border: 1px solid var(--nf-line-strong);
  border-radius: 20px;
  padding: 4px 12px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--nf-text);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
  cursor: pointer;
  transition: all 0.2s ease;
  backdrop-filter: blur(8px);
  user-select: none;
}

.nc-word-goal-badge:hover {
  transform: translateY(-1.5px);
  border-color: var(--nf-primary);
  color: var(--nf-primary);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.14);
}

.nc-word-goal-badge.is-goal-achieved {
  border-color: #10b981;
  background: var(--nf-green-soft);
  color: var(--nf-green);
}

.nc-word-goal-tag {
  background: var(--nf-surface-2);
  border: 1px solid var(--nf-line);
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 9.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  color: var(--nf-muted);
}

.nc-word-goal-badge.is-goal-achieved .nc-word-goal-tag {
  background: #10b981;
  border-color: #10b981;
  color: #ffffff;
}

/* Khi bảng Phả Hệ mở bên phải, tự động dịch huy hiệu chỉ tiêu sang trái để không đè lên danh sách nhân vật */
body.nc-dock-open .nc-word-goal-badge {
  right: 452px;
}

/* ==========================================================================
   LAYOUT POLISH: SINGLE-LINE TOPBAR, FULL-WIDTH MANUSCRIPT & 3x2 DOCK TABS
   ========================================================================== */

/* 1. TÁI CẤU TRÚC TOPBAR THEO PHÂN CẤP THỊ GIÁC CHÍNH - PHỤ (PRIMARY vs SECONDARY HIERARCHY) */
.nc-top-control-bar {
  padding: 7px 20px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 24px !important;
  flex-wrap: nowrap !important;
}

/* VÙNG TRÁI (CHÍNH): Thương hiệu Studio & Tác phẩm đang sáng tác */
.nc-top-left {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  flex-wrap: nowrap !important;
  flex-shrink: 0 !important;
  min-width: 0 !important;
}

.nc-brand-lockup {
  flex-shrink: 0 !important;
  padding: 2px 6px !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

.nc-top-breadcrumb-sep {
  color: var(--nf-ghost, #cbd5e1);
  font-size: 16px;
  font-weight: 300;
  user-select: none;
  margin: 0 2px;
}

/* Nút chọn Tác Phẩm Đang Viết: Tâm điểm chính (Primary Context) */
.nc-btn-project-dropdown {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 6px 14px !important;
  background: var(--nf-surface) !important;
  border: 1.5px solid var(--nf-line-strong) !important;
  border-radius: 9px !important;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: var(--nf-ink) !important;
  max-width: 280px !important;
}

.nc-btn-project-dropdown:hover {
  border-color: var(--nf-primary) !important;
  color: var(--nf-primary) !important;
}

.nc-project-badge-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--nf-primary, #b45309);
  flex-shrink: 0;
}

/* Nút "+ Truyện mới": Hạ xuống cấp Phụ (Ghost/Outline tinh tế, không tô màu xanh đậm chói mắt) */
.nc-btn-quick-new-novel {
  background: transparent !important;
  color: var(--nf-muted) !important;
  border: 1px dashed var(--nf-line-strong) !important;
  box-shadow: none !important;
  padding: 5px 10px !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  border-radius: 8px !important;
}

.nc-btn-quick-new-novel:hover {
  background: var(--nf-hover-soft) !important;
  color: var(--nf-primary) !important;
  border-style: solid !important;
  border-color: var(--nf-primary) !important;
  transform: none !important;
  box-shadow: none !important;
}

/* VÙNG PHẢI (PHỤ): Các cụm công cụ đọc/viết & hệ thống được gom nhóm trầm tĩnh */
.nc-top-actions {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  flex-wrap: nowrap !important;
  flex-shrink: 0 !important;
}

.nc-utility-cluster {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.nc-top-divider {
  width: 1px;
  height: 18px;
  background: var(--nf-line-strong, #cbd5e1);
  opacity: 0.65;
  margin: 0 2px;
}

.nc-brand-lockup,
.nc-brand-title,
.nc-brand-sub,
.nc-btn-action,
.nc-theme-btn,
.nc-ai-model-label {
  white-space: nowrap !important;
}

.nc-btn-action {
  padding: 5px 10px !important;
  font-size: 11.5px !important;
  background: transparent !important;
  border: 1px solid var(--nf-line) !important;
  color: var(--nf-text) !important;
}

.nc-btn-action:hover {
  background: var(--nf-surface-2) !important;
  border-color: var(--nf-line-strong) !important;
  color: var(--nf-ink) !important;
  transform: none !important;
}

/* Nút Tập trung giữ viền trung tính, chỉ nổi màu xanh ngọc khi đang bật Zen Mode */
.nc-btn-zen-mode {
  border-color: var(--nf-line) !important;
  color: var(--nf-text) !important;
}

.nc-font-size-label {
  min-width: 22px !important;
}

/* 2. Giữ trang bản thảo trung tâm luôn rộng rãi, cân đối, không bị bóp hẹp */
.wb-editor .manuscript-surface {
  width: 100% !important;
  max-width: 780px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.wb-editor.is-wide-measure .manuscript-surface {
  max-width: 980px !important;
}

/* 3. Bố trí 6 Tab trong Bảng Phả Hệ thành lưới 3x2 để nhìn thấy toàn bộ 6 Tab ngay lập tức */
.nc-dock-nav {
  padding: 8px 10px !important;
}

.nc-dock-tabs {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 5px !important;
  overflow: visible !important;
}

.nc-dock-tab {
  text-align: center !important;
  justify-content: center !important;
  padding: 6px 4px !important;
  font-size: 11px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* 4. TÍCH HỢP PHẢ HỆ THÀNH TAB NỘI TẠI (NATIVE TAB) TRONG BÀN VIẾT (.wb-ai) VÀ TRANG TRUYỆN (#story-frame) */

/* 4.1. Cột phải Bàn Viết (aside.wb-ai): Chia đều 3 Tab: Trợ lý | Giọng văn | Phả Hệ */
aside.wb-ai > .wb-ai-tabs {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

aside.wb-ai > .wb-ai-tabs > #nc-wb-tab-tree {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
  white-space: nowrap !important;
}

aside.wb-ai > .wb-ai-tabs > #nc-wb-tab-tree svg {
  width: 13px !important;
  height: 13px !important;
  flex-shrink: 0 !important;
}

/* Khi Tab Phả Hệ đang được chọn trong cột phải (.wb-ai): */
aside.wb-ai.is-tree-tab-active > .wb-ai-tabs > button:not(#nc-wb-tab-tree) {
  border-bottom-color: transparent !important;
  background: transparent !important;
  color: var(--nf-muted) !important;
}

aside.wb-ai.is-tree-tab-active > .wb-ai-tabs > #nc-wb-tab-tree {
  border-bottom: 2px solid var(--nf-primary) !important;
  background: var(--nf-active-soft) !important;
  color: var(--nf-ink) !important;
  font-weight: 700 !important;
}

/* Ẩn nội dung Trợ lý AI / Giọng văn khi đang ở Tab Phả Hệ */
aside.wb-ai.is-tree-tab-active > :not(.wb-ai-tabs):not(#nc-workbench-dock) {
  display: none !important;
}

/* Biến #nc-workbench-dock từ ngăn kéo nổi thành phần tử nội tại của cột .wb-ai */
#nc-workbench-dock.is-embedded-wb {
  display: none !important;
  position: static !important;
  transform: none !important;
  transition: none !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  border: none !important;
  box-shadow: none !important;
  z-index: 1 !important;
  background: transparent !important;
}

aside.wb-ai.is-tree-tab-active > #nc-workbench-dock.is-embedded-wb {
  display: flex !important;
  flex-direction: column !important;
}

/* Ẩn nút đóng (×) khi đã là Tab nội tại trong cột .wb-ai hoặc #story-frame */
#nc-workbench-dock.is-embedded-native #nc-dock-close-btn {
  display: none !important;
}

/* 4.2. Trang Tổng Quan Truyện (/projects/:id): Thanh 2 Tab chính thức trên #story-frame */
.nc-project-page-tabs {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px;
  margin-bottom: 14px;
  background: var(--nf-panel-alt, #f1ebe0);
  border: 1px solid var(--nf-border, #dfd6c7);
  border-radius: 12px;
}

.nc-proj-tab-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 18px;
  border: 1px solid transparent;
  border-radius: 9px;
  background: transparent;
  color: var(--nf-muted, #64748b);
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.16s ease;
}

.nc-proj-tab-btn:hover {
  color: var(--nf-ink, #1e293b);
  background: rgba(180, 83, 9, 0.06);
}

.nc-proj-tab-btn.is-active {
  background: var(--nf-paper, #fffcf7);
  color: var(--nf-primary, #9a3412);
  border-color: rgba(180, 83, 9, 0.25);
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.06);
  font-weight: 700;
}

#nc-workbench-dock.is-embedded-project {
  display: none !important;
  position: static !important;
  transform: none !important;
  transition: none !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  min-height: 620px !important;
  border: 1px solid var(--nf-border, #dfd6c7) !important;
  border-radius: 14px !important;
  box-shadow: var(--nf-shadow-sm) !important;
  z-index: 1 !important;
  overflow: hidden !important;
}

#story-frame.is-pedigree-tab-active > :not(#nc-workbench-dock) {
  display: none !important;
}

#story-frame.is-pedigree-tab-active > #nc-workbench-dock.is-embedded-project {
  display: flex !important;
  flex-direction: column !important;
}

#story-frame.is-export-tab-active > :not(#nc-project-export-panel) {
  display: none !important;
}

#story-frame.is-export-tab-active > #nc-project-export-panel {
  display: block !important;
}

.nc-project-page-tabs {
  display: flex !important;
  flex-wrap: wrap !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* Khi ở Trang Tổng Quan Truyện rộng rãi, cho phép 6 sub-tab của Phả Hệ nằm trên 1 hàng ngang 6 cột */
#nc-workbench-dock.is-embedded-project .nc-dock-tabs {
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
}

/* 5. TRIỆT TIÊU DOUBLE HEADER, DOUBLE LOGO & MENU THƯƠNG MẠI TRÙNG LẶP TRONG .nc-app-shell */

/* Ẩn hoàn toàn thanh .nc-topbar cũ của React và Logo .nc-brand thứ 2 bên trong Sidebar trái */
.nc-topbar,
.nf-topbar,
.nc-sidebar > .nc-brand,
.nf-sidebar > .nf-brand {
  display: none !important;
}

/* Căn chỉnh Sidebar trái bắt đầu ngay bên dưới #nc-control-bar (52px), không bao giờ bị đè lấp */
.nc-sidebar,
.nf-sidebar {
  top: 52px !important;
  height: calc(100vh - 52px) !important;
  height: calc(100dvh - 52px) !important;
  padding-top: 16px !important;
}

/* Ẩn các mục thương mại thừa và ẩn "Thư viện" / "Tải truyện về" ở Sidebar ngoài cùng (vì đã đưa vào trong từng bộ truyện) */
.nc-sidebar-nav a[href*="/billing"],
.nc-sidebar-nav a[href*="/pricing"],
.nc-sidebar-nav a[href*="/gifts"],
.nc-sidebar-nav a[href*="/referrals"],
.nc-sidebar-nav a[href="/projects/new"],
.nc-sidebar-nav a[href*="/library"],
.nc-sidebar-nav a[href*="/export"],
.app-core-library__project-control {
  display: none !important;
}

/* Đảm bảo khung Bàn Viết (.wb-shell / .qc-editor-shell) khớp chiều cao dưới #nc-control-bar */
.wb-shell,
.qc-editor-shell {
  height: calc(100vh - 52px) !important;
  height: calc(100dvh - 52px) !important;
}

/* 6. NÚT ĐỌC THỬ & NGHE AUDIOBOOK TRÊN TOPBAR & BÀN VIẾT */
.nc-btn-quick-reader {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  height: 32px !important;
  padding: 0 11px !important;
  border-radius: 7px !important;
  border: 1px solid rgba(180, 83, 9, 0.32) !important;
  background: rgba(180, 83, 9, 0.08) !important;
  color: var(--nf-primary) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  transition: all 0.16s ease !important;
  white-space: nowrap !important;
}

.nc-btn-quick-reader:hover {
  background: var(--nf-primary) !important;
  color: #ffffff !important;
  box-shadow: 0 2px 8px rgba(180, 83, 9, 0.25) !important;
}

.nc-rs-para:hover {
  background: rgba(180, 83, 9, 0.05) !important;
}

/* 7. ĐẢM BẢO THANH LA BÀN CHƯƠNG (#nc-chapter-compass-bar) NẰM GỌN TRÊN TRANG GIẤY BẢN THẢO & ICON TOOLBAR KHÔNG BỊ PHÓNG TO */
section.wb-editor > #nc-chapter-compass-bar {
  width: 100% !important;
  max-width: 780px !important;
  margin: 12px auto 0 !important;
  box-sizing: border-box !important;
  flex-shrink: 0 !important;
}

section.wb-editor.is-wide-measure > #nc-chapter-compass-bar {
  max-width: 980px !important;
}

.wb-actions svg,
.qc-toolbar-button svg,
.nc-tree-btn svg {
  width: 15px !important;
  height: 15px !important;
  flex-shrink: 0 !important;
}

/* ========================================================
   PHASE 3b: SPA CHAPTER EDITOR MOBILE (<=720px)
   These override the Vite-built CSS for the writing workbench
   ======================================================== */
@media (max-width: 720px) {
  /* 1. Editor toolbar: more compact on mobile */
  .qc-editor-toolbar {
    min-height: 0 !important;
    padding: 6px 8px !important;
    gap: 6px !important;
    flex-wrap: wrap !important;
  }
  .qc-editor-toolbar > div:first-child {
    min-width: 0 !important;
    width: 100% !important;
  }
  /* Chapter title input: smaller on mobile */
  .qc-editor-toolbar input[type=text],
  .qc-editor-toolbar input:not([type]) {
    font-size: 15px !important;
  }
  /* Toolbar action row: scroll horizontally */
  .qc-editor-toolbar-actions {
    width: 100% !important;
    min-width: 0 !important;
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    gap: 4px !important;
  }
  .qc-editor-toolbar-actions::-webkit-scrollbar {
    display: none !important;
  }
  /* Toolbar button groups: shrink */
  .qc-toolbar-group {
    flex: 0 0 auto !important;
  }
  .qc-toolbar-button,
  .qc-toolbar-select {
    min-height: 34px !important;
    font-size: 11px !important;
    padding: 0 8px !important;
  }
  /* Word count: smaller */
  .qc-toolbar-word-count {
    font-size: 10px !important;
    white-space: nowrap !important;
  }
  /* Save state: compact */
  .wb-save-state {
    font-size: 11px !important;
    white-space: nowrap !important;
  }
  .wb-word-count {
    font-size: 10.5px !important;
    white-space: nowrap !important;
  }

  /* 2. Hide outline/chart/split-view toggle icons on mobile 
        These are the .qc-toolbar-button with specific SVG icons
        that represent outline, chart, split view — rarely used on phone */
  .wb-actions .qc-toolbar-group:first-child {
    display: none !important;
  }

  /* 3. Sub-tabs (Dàn Ý / Viết / Kho / AI) — compact */
  .wb-mobile-tabs {
    min-height: 0 !important;
  }
  .wb-mobile-tabs button {
    font-size: 12px !important;
    padding: 8px 6px !important;
    min-height: 36px !important;
  }

  /* 4. Editor padding: reduce horizontal waste */
  .wb-editor {
    padding: 4px !important;
  }
  .wb-editor .manuscript-surface {
    max-width: 100% !important;
    border-radius: 6px !important;
  }

  /* 5. Editor shell height fix */
  .qc-editor-shell {
    height: calc(100dvh - 52px) !important;
  }
  .wb-shell {
    height: calc(100dvh - 52px) !important;
  }

  /* 6. Breadcrumb row — compact */
  .wb-toolbar {
    padding: 6px 8px !important;
    min-height: 0 !important;
    gap: 4px !important;
  }
  .wb-title {
    min-width: 0 !important;
  }
  .wb-title input {
    font-size: 14px !important;
  }
  .wb-actions {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    scrollbar-width: none !important;
    gap: 2px !important;
  }
  .wb-actions::-webkit-scrollbar {
    display: none !important;
  }

  /* 7. Line numbers gutter: tighter */
  .wb-editor .nf-rich-editor {
    --nf-line-number-gutter: 20px !important;
    padding-right: 12px !important;
    padding-left: calc(var(--nf-line-number-gutter) + 16px) !important;
    font-size: 14.5px !important;
  }

  /* 8. Bottom status bar: compact */
  .wb-editor-status {
    padding: 4px 8px !important;
    font-size: 11px !important;
    gap: 6px !important;
  }

  /* 9. Assistant panel: full width overlay on mobile */
  .qc-assistant-layer > * {
    width: 100% !important;
    max-width: 100% !important;
  }
  .qc-assistant-closebar {
    min-height: 44px !important;
    padding: 6px 10px !important;
  }

  /* 10. Outline layer: full width on mobile */
  .nf-outline-layer-content {
    width: 85vw !important;
    max-width: 340px !important;
  }
}

/* Additional tweaks for very small phones */
@media (max-width: 400px) {
  #nc-chapter-compass-bar > div > div:first-child > div:first-child > strong {
    max-width: 140px !important;
    font-size: 11px !important;
  }
  #nc-compass-toggle-btn,
  #nc-compass-write-all {
    font-size: 9.5px !important;
    padding: 0 5px !important;
  }
  .qc-toolbar-button,
  .qc-toolbar-select {
    min-height: 30px !important;
    padding: 0 6px !important;
    font-size: 10px !important;
  }
}



/* ========================================================
   SYSTEMIC MOBILE IA: FOCUS WRITING VIEW (<=820px)
   Activated automatically when editing a chapter
   ======================================================== */
@media (max-width: 820px) {
  /* 1. When in Chapter Editor, hide the redundant global Top Bar */
  body.nc-is-editor-mode #nc-control-bar {
    display: none !important;
  }

  /* 2. Editor shell takes the full 100dvh viewport from top: 0 */
  body.nc-is-editor-mode .wb-shell,
  body.nc-is-editor-mode .qc-editor-shell {
    height: 100vh !important;
    height: 100dvh !important;
    top: 0 !important;
    padding-top: 0 !important;
  }

  /* 3. Hide redundant desktop sub-tabs (Dàn ý, Viết, Kho, AI) */
  body.nc-is-editor-mode .wb-mobile-tabs {
    display: none !important;
  }

  /* 4. Streamline Workbench Top Header into a single sleek 44px bar */
  body.nc-is-editor-mode .wb-toolbar {
    min-height: 48px !important;
    height: auto !important;
    padding: 6px 12px !important;
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    background: var(--nf-surface) !important;
    border-bottom: 1px solid var(--nf-line-strong) !important;
    gap: 8px !important;
  }

  body.nc-is-editor-mode .wb-title {
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }

  body.nc-is-editor-mode .wb-title input {
    font-size: 14px !important;
    font-weight: 700 !important;
    height: 32px !important;
  }

  /* Hide outline/graph/split-view icons that waste space on mobile */
  body.nc-is-editor-mode .wb-actions > div:not(.wb-save-state):not(.wb-word-count):not(#nc-editor-audit-btn) {
    display: none !important;
  }

  body.nc-is-editor-mode #nc-editor-audit-btn {
    display: none !important;
  }

  /* Keep save state & word count compact */
  body.nc-is-editor-mode .wb-save-state {
    font-size: 11px !important;
  }

  body.nc-is-editor-mode .wb-word-count {
    font-size: 11px !important;
  }

  /* 5. Pure Manuscript Surface: Start immediately at the top */
  body.nc-is-editor-mode .wb-editor {
    padding: 6px 8px 60px 8px !important;
    height: calc(100dvh - 44px) !important;
    overflow-y: auto !important;
  }

  body.nc-is-editor-mode .wb-editor .manuscript-surface {
    margin-top: 0 !important;
    padding: 16px 12px !important;
    border-radius: 8px !important;
  }
}



/* ========================================================
   PREMIUM MOBILE READING TYPOGRAPHY (KINDLE / APPLE BOOKS STANDARD)
   ======================================================== */
@media (max-width: 820px) {
  /* 1. MANUSCRIPT & PROSE TEXT: BÀN ĐỌC & VIẾT TRÊN MOBILE */
  .wb-editor .nf-rich-editor,
  .manuscript-surface,
  .manuscript-surface [contenteditable],
  .manuscript-surface textarea,
  .manuscript-surface p,
  .paper-editor-main,
  #nc-rs-chapter-content,
  .nc-rs-para {
    font-size: 19px !important;
    line-height: 1.82 !important;
    font-family: 'Literata', 'Noto Serif', Georgia, serif !important;
    letter-spacing: 0.012em !important;
    color: var(--nf-ink) !important;
    text-rendering: optimizeLegibility !important;
    -webkit-font-smoothing: antialiased !important;
  }

  /* 2. HIDE LINE NUMBERS GUTTER ON MOBILE TO RECLAIM FULL SCREEN WIDTH */
  .wb-editor .nf-rich-editor {
    --nf-line-number-gutter: 0px !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* Hide code line numbers on mobile novel reading */
  .nf-line-number,
  .cm-gutter-lint,
  .cm-lineNumbers,
  [class*="line-number"] {
    display: none !important;
  }

  /* 3. PARAGRAPH BREATHING & SPACING */
  .manuscript-surface p,
  .nf-rich-editor p,
  .nc-rs-para {
    margin-bottom: 1.25em !important;
    margin-top: 0 !important;
  }

  /* 4. CHAPTER HEADING STYLING */
  .manuscript-surface h1,
  .manuscript-surface h2,
  .wb-editor h1,
  .wb-editor h2,
  #nc-rs-chapter-title {
    font-size: 23px !important;
    font-weight: 800 !important;
    font-family: 'Literata', 'Noto Serif', serif !important;
    line-height: 1.4 !important;
    text-align: center !important;
    margin: 20px 0 16px !important;
    color: var(--nf-ink) !important;
  }

  /* 5. NOVEL READER STUDIO (PHÒNG ĐỌC & AUDIOBOOK) */
  #nc-rs-overlay .nc-rs-page {
    padding: 24px 18px 60px !important;
    max-width: 100% !important;
    box-shadow: none !important;
    border: none !important;
  }

  #nc-rs-chapter-content {
    font-size: 19.5px !important;
    line-height: 1.88 !important;
  }

  .nc-rs-para {
    padding: 10px 12px !important;
    margin-bottom: 14px !important;
    border-radius: 8px !important;
    transition: background 0.2s ease !important;
  }

  .nc-rs-para.is-playing {
    background: rgba(180, 83, 9, 0.12) !important;
    border-left: 3px solid #b45309 !important;
  }

  /* 6. WORD COUNT BADGE: SUBTLE & CLEAN */
  .manuscript-surface .qc-chapter-badge,
  .manuscript-surface [class*="target-badge"],
  .manuscript-surface [class*="word-count-badge"] {
    font-size: 12px !important;
    padding: 3px 10px !important;
    margin: 8px auto 18px !important;
    display: inline-block !important;
  }
}



/* ========================================================
   CRITICAL FIX: READER STUDIO & DASHBOARD FOR MOBILE (<=900px)
   ======================================================== */

/* Desktop Base for Reader Split */
.nc-reader-studio-modal {
  width: 94vw;
  max-width: 1180px;
  height: 90vh;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 12px;
}

.nc-rs-body-split {
  display: grid;
  grid-template-columns: 280px 1fr;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  position: relative;
}

#nc-rs-toc-aside {
  border-right: 1px solid var(--nf-line);
  background: var(--nf-surface-2);
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* ========================================================
   MOBILE OVERRIDES (<=900px)
   ======================================================== */
@media (max-width: 900px) {
  /* 1. NOVEL READER STUDIO MODAL: 100% FULLSCREEN */
  #nc-reader-studio-overlay {
    padding: 0 !important;
  }

  .nc-tree-modal.nc-reader-studio-modal {
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    border-radius: 0 !important;
    border: none !important;
    margin: 0 !important;
  }

  /* 2. READER BODY SPLIT: 100% FULL WIDTH FOR READING (NO 2-COLUMN CRAMMING!) */
  .nc-rs-body-split {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    flex: 1 !important;
    min-height: 0 !important;
    position: relative !important;
  }

  /* Book scroll & page: full width edge-to-edge reading */
  #nc-rs-book-scroll {
    width: 100% !important;
    max-width: 100% !important;
    flex: 1 !important;
    padding: 14px 12px 70px !important;
    box-sizing: border-box !important;
  }

  #nc-rs-book-page {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 16px 10px 40px !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
    box-sizing: border-box !important;
  }

  #nc-rs-chapter-content {
    font-size: 20px !important;
    line-height: 1.88 !important;
    font-family: 'Literata', 'Noto Serif', serif !important;
    width: 100% !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
  }

  .nc-rs-para {
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 10px 12px !important;
    margin-bottom: 16px !important;
    font-size: 20px !important;
    line-height: 1.88 !important;
  }

  /* TOC ASIDE: OFF-CANVAS DRAWER (SLIDES IN ON DEMAND) */
  #nc-rs-toc-aside {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    bottom: 0 !important;
    width: 84% !important;
    max-width: 320px !important;
    z-index: 9999 !important;
    background: var(--nf-surface) !important;
    box-shadow: 12px 0 40px rgba(0, 0, 0, 0.45) !important;
    transform: translateX(-105%) !important;
    transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1) !important;
    display: flex !important;
    flex-direction: column !important;
  }

  #nc-rs-toc-aside.is-open {
    transform: translateX(0) !important;
  }

  #nc-rs-toc-backdrop {
    display: none;
    position: absolute !important;
    inset: 0 !important;
    background: rgba(0, 0, 0, 0.55) !important;
    backdrop-filter: blur(3px) !important;
    z-index: 9990 !important;
  }

  #nc-rs-toc-backdrop.is-open {
    display: block !important;
  }

  /* 3. READER AUDIO CONTROL BAR ON MOBILE */
  .nc-rs-audio-bar {
    padding: 8px 10px !important;
    gap: 8px !important;
    flex-direction: column !important;
    align-items: stretch !important;
  }

  .nc-rs-audio-bar > div:first-child {
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 6px !important;
  }

  #nc-rs-audio-play {
    flex: 1 !important;
    height: 40px !important;
    font-size: 13.5px !important;
    justify-content: center !important;
  }

  #nc-rs-audio-prev-para,
  #nc-rs-audio-next-para,
  #nc-rs-audio-stop {
    height: 38px !important;
    padding: 0 10px !important;
    flex-shrink: 0 !important;
  }

  #nc-rs-audio-preload,
  #nc-rs-bulk-studio-btn,
  #nc-rs-audio-status {
    display: none !important;
  }

  .nc-rs-audio-bar > div:last-child {
    width: 100% !important;
    display: flex !important;
    justify-content: space-between !important;
    gap: 8px !important;
  }

  .nc-rs-audio-bar > div:last-child label {
    flex: 1 !important;
  }

  .nc-rs-audio-bar > div:last-child select {
    width: 100% !important;
    height: 34px !important;
    font-size: 11.5px !important;
  }

  /* 4. READER HEADER ON MOBILE */
  .nc-tree-header {
    padding: 8px 12px !important;
  }

  #nc-rs-novel-meta,
  #nc-rs-btn-toggle-complete,
  #nc-rs-btn-export {
    display: none !important;
  }

  #nc-rs-btn-toc-toggle {
    display: inline-flex !important;
    height: 32px !important;
    padding: 0 10px !important;
    font-size: 11.5px !important;
    font-weight: 700 !important;
  }

  /* 5. DASHBOARD PROJECT CARDS ON MOBILE */
  .app-core-dashboard {
    padding: 10px 10px 80px !important;
    max-width: 100vw !important;
    box-sizing: border-box !important;
  }

  .app-core-story-row {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
    padding: 16px 14px !important;
    border-radius: 12px !important;
    margin-bottom: 12px !important;
    background: var(--nf-surface) !important;
    border: 1px solid var(--nf-line) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
  }

  .app-core-story-row__main {
    width: 100% !important;
  }

  .app-core-story-row__title {
    font-size: 17px !important;
    margin-bottom: 4px !important;
  }

  .app-core-story-row__title > span {
    white-space: normal !important;
    word-break: break-word !important;
  }

  .app-core-story-row__tasks {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
  }

  .app-core-story-row__action {
    width: 100% !important;
    margin-top: 6px !important;
  }

  .app-core-story-row__action button,
  .app-core-story-row__action a {
    width: 100% !important;
    height: 40px !important;
    justify-content: center !important;
    font-size: 13.5px !important;
    font-weight: 700 !important;
    border-radius: 8px !important;
  }
}



/* ==========================================================================
   COMPREHENSIVE MOBILE TOUCH & ACCESSIBILITY SCALE (<=900px)
   Eliminates all microscopic 9px-11px text and cramped touch targets.
   Standards: Apple Human Interface Guidelines & Google Material Design 3.
   ========================================================================== */

@media (max-width: 1024px) {
  /* 1. ROOT & BODY BASE SCALING (NO HORIZONTAL OVERFLOW, NO IOS AUTO-ZOOM) */
  html {
    -webkit-text-size-adjust: 100% !important;
    text-size-adjust: 100% !important;
    overflow-x: hidden !important;
    max-width: 100vw !important;
  }

  body {
    font-size: 16px !important;
    line-height: 1.55 !important;
    overflow-x: hidden !important;
    max-width: 100vw !important;
  }

  input,
  textarea,
  select {
    font-size: 16px !important;
  }

  /* 2. UNIVERSAL TOUCH TARGETS */
  button,
  .nc-tree-btn,
  .qc-toolbar-button,
  .nc-proj-tab-btn,
  select,
  input[type="text"],
  input[type="button"],
  input[type="submit"] {
    min-height: 44px !important;
    touch-action: manipulation;
  }

  /* 3. TOP CONTROL BAR (HEADER) ON MOBILE - CLEAN & NO HORIZONTAL OVERFLOW */
  .nc-top-control-bar {
    height: 52px !important;
    padding: 6px 12px !important;
    max-width: 100vw !important;
    overflow: hidden !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    box-sizing: border-box !important;
  }

  .nc-top-left {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    min-width: 0 !important;
    flex: 1 1 auto !important;
    overflow: hidden !important;
  }

  .nc-brand-lockup {
    flex-shrink: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
  }

  .nc-brand-emblem-img {
    width: 24px !important;
    height: 24px !important;
  }

  .nc-brand-title {
    font-size: 14.5px !important;
    font-weight: 800 !important;
    white-space: nowrap !important;
  }

  .nc-brand-sub {
    display: none !important;
  }

  .nc-top-breadcrumb-sep {
    margin: 0 2px !important;
    font-size: 12px !important;
    color: var(--nf-muted) !important;
  }

  .nc-btn-project-dropdown {
    height: 36px !important;
    padding: 4px 8px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    max-width: 125px !important;
    flex-shrink: 1 !important;
    border-radius: 8px !important;
  }

  .nc-active-project-title {
    font-size: 13px !important;
    max-width: 85px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  .nc-btn-quick-reader,
  .nc-btn-quick-new-novel {
    display: none !important; /* Hide secondary top buttons on mobile to avoid overcrowding */
  }

  .nc-top-actions {
    flex-shrink: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
  }

  .nc-theme-switch-group {
    display: inline-flex !important;
    gap: 2px !important;
    padding: 2px !important;
  }

  .nc-theme-btn {
    width: 32px !important;
    height: 32px !important;
    min-height: 32px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 6px !important;
  }

  .nc-theme-btn svg {
    width: 14px !important;
    height: 14px !important;
  }

  .nc-btn-ai-status {
    height: 32px !important;
    min-height: 32px !important;
    padding: 0 8px !important;
    font-size: 12px !important;
    border-radius: 6px !important;
  }

  /* 4. DASHBOARD / TỦ SÁCH ON MOBILE */
  .app-core-dashboard {
    padding: 12px 14px 100px !important;
    max-width: 100vw !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
  }

  .app-core-section-heading h2 {
    font-size: 20px !important;
    font-weight: 800 !important;
    margin-bottom: 12px !important;
  }

  /* HERO NEXT-TASK CARD ON MOBILE */
  .app-core-next-task {
    padding: 18px 16px !important;
    border-radius: 16px !important;
    margin-bottom: 18px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
    background: var(--nf-surface) !important;
    border: 1.5px solid var(--nf-line-strong) !important;
    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.05) !important;
  }

  .app-core-next-task__primary h1,
  .app-core-next-task__primary h1 a {
    font-size: 21px !important;
    font-weight: 800 !important;
    line-height: 1.35 !important;
  }

  .app-core-next-task__stage {
    font-size: 14.5px !important;
    margin-top: 4px !important;
  }

  .app-core-next-task__actions {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    width: 100% !important;
    margin-top: 14px !important;
  }

  .app-core-next-task__actions .app-core-button--primary {
    width: 100% !important;
    min-height: 48px !important;
    justify-content: center !important;
    font-size: 15.5px !important;
    font-weight: 700 !important;
    border-radius: 10px !important;
  }

  .app-core-next-task__actions .app-core-text-link {
    width: 100% !important;
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    border-radius: 10px !important;
    background: var(--nf-surface-2) !important;
    border: 1px solid var(--nf-line) !important;
    color: var(--nf-ink) !important;
    text-decoration: none !important;
  }

  .app-core-next-task__note {
    padding: 14px 16px !important;
    border-radius: 12px !important;
    background: var(--nf-surface-2) !important;
    border: 1px solid var(--nf-line) !important;
  }

  .app-core-next-task__excerpt {
    font-size: 14.5px !important;
    line-height: 1.6 !important;
    color: var(--nf-text) !important;
  }


  .app-core-story-row {
    padding: 18px 16px !important;
    border-radius: 16px !important;
    gap: 12px !important;
    background: var(--nf-surface) !important;
    border: 1.5px solid var(--nf-line-strong) !important;
    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.05) !important;
    margin-bottom: 16px !important;
    display: flex !important;
    flex-direction: column !important;
  }

  .app-core-story-row__title {
    font-size: 20px !important;
    font-weight: 800 !important;
    line-height: 1.4 !important;
  }

  .app-core-story-row__meta {
    font-size: 13.5px !important;
    line-height: 1.6 !important;
    margin-top: 4px !important;
  }

  .app-core-story-row__tasks {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    margin-top: 6px !important;
  }

  .app-core-story-row__tasks a,
  .app-core-story-row__tasks button {
    min-height: 38px !important;
    padding: 6px 14px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    border-radius: 8px !important;
  }

  .app-core-story-row__action {
    display: flex !important;
    gap: 8px !important;
    width: 100% !important;
    margin-top: 8px !important;
  }

  .app-core-story-row__action a,
  .app-core-story-row__action button {
    flex: 1 !important;
    min-height: 44px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    border-radius: 10px !important;
    text-align: center !important;
    justify-content: center !important;
    display: inline-flex !important;
    align-items: center !important;
  }

  /* 5. CHAPTER EDITOR: TOP TOOLBAR & TITLE */
  .wb-toolbar {
    min-height: 52px !important;
    padding: 6px 10px !important;
    gap: 8px !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    background: var(--nf-surface) !important;
    border-bottom: 1px solid var(--nf-line-strong) !important;
    box-sizing: border-box !important;
  }

  .wb-title {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    min-width: 0 !important;
    flex: 1 1 auto !important;
    overflow: hidden !important;
  }

  .wb-title a,
  .wb-title .wb-icon-button {
    flex-shrink: 0 !important;
    width: 38px !important;
    height: 38px !important;
    min-height: 38px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 8px !important;
  }

  .wb-title input {
    font-size: 16px !important;
    font-weight: 800 !important;
    min-height: 38px !important;
    height: 38px !important;
    padding: 0 8px !important;
    border-radius: 8px !important;
    width: 100% !important;
    min-width: 0 !important;
    border: 1px solid transparent !important;
    background: transparent !important;
    text-overflow: ellipsis !important;
  }

  .wb-title input:focus {
    background: var(--nf-surface-2) !important;
    border-color: var(--nf-line-strong) !important;
  }

  /* HIDE DESKTOP-ONLY ACTION BUTTONS & STICKY BARS ON MOBILE */
  .wb-actions .wb-icon-button,
  .wb-actions select,
  .wb-actions button,
  .wb-editor-status {
    display: none !important;
  }

  .wb-actions {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    flex: 0 0 auto !important;
    flex-wrap: nowrap !important;
    min-width: 0 !important;
  }

  .wb-save-state {
    white-space: nowrap !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    padding: 4px 10px !important;
    height: 32px !important;
    min-height: 32px !important;
    border-radius: 999px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    background: var(--nf-surface-2) !important;
    border: 1px solid var(--nf-line) !important;
    color: var(--nf-muted) !important;
  }

  .wb-word-count {
    white-space: nowrap !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    padding: 4px 10px !important;
    height: 32px !important;
    min-height: 32px !important;
    border-radius: 999px !important;
    display: inline-flex !important;
    align-items: center !important;
    background: var(--nf-surface-2) !important;
    border: 1px solid var(--nf-line) !important;
    color: var(--nf-muted) !important;
  }

  /* Formatting Toolbar (B, I, H2, quotes) */
  .nf-manuscript-format-toolbar {
    padding: 6px 10px !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    flex-wrap: nowrap !important;
    gap: 4px !important;
    background: var(--nf-surface-2) !important;
    border-bottom: 1px solid var(--nf-line) !important;
  }

  .nf-manuscript-format-toolbar button {
    min-height: 36px !important;
    min-width: 36px !important;
    padding: 0 8px !important;
    font-size: 14px !important;
    border-radius: 6px !important;
    flex-shrink: 0 !important;
  }

  /* 6. MANUSCRIPT PROSE SURFACE - EDGE-TO-EDGE & NO LINE NUMBERS */
  .wb-editor {
    padding: 0 !important;
  }

  .wb-editor .manuscript-surface {
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
    padding: 16px 16px 140px !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .nf-rich-editor {
    --nf-line-number-gutter: 0px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    max-width: 100% !important;
  }

  .nf-rich-editor [data-line-number] {
    padding-left: 0 !important;
  }

  .nf-rich-editor [data-line-number]:before {
    display: none !important;
    content: none !important;
    width: 0 !important;
  }

  .wb-editor .nf-rich-editor,
  .manuscript-surface p,
  .paper-editor-main p {
    font-size: 20px !important;
    line-height: 1.9 !important;
    font-family: 'Literata', 'Noto Serif', Georgia, serif !important;
    margin-bottom: 20px !important;
  }

  /* 7. BOTTOM NAVIGATION & SUBTABS */
  .wb-mobile-tabs {
    height: 54px !important;
    background: var(--nf-surface) !important;
    border-top: 1px solid var(--nf-line-strong) !important;
    z-index: 1000 !important;
  }

  .wb-mobile-tabs button {
    min-height: 50px !important;
    font-size: 12.5px !important;
    font-weight: 700 !important;
  }

  #nc-project-page-tabs {
    height: 60px !important;
    padding: 4px 6px calc(4px + env(safe-area-inset-bottom, 0px)) !important;
    z-index: 1000 !important;
  }

  .nc-proj-tab-btn {
    height: 52px !important;
    font-size: 12.5px !important;
    font-weight: 700 !important;
    gap: 3px !important;
  }

  .nc-proj-tab-btn svg {
    width: 20px !important;
    height: 20px !important;
  }

  /* 8. CHAPTER COMPASS FAB & NATIVE BOTTOM SHEET */
  .nc-compass-fab {
    position: fixed !important;
    bottom: 72px !important;
    right: 16px !important;
    z-index: 9999 !important;
    min-height: 44px !important;
    padding: 0 16px !important;
    font-size: 13.5px !important;
    font-weight: 800 !important;
    border-radius: 999px !important;
    background: linear-gradient(135deg, #b45309, #d97706) !important;
    color: #fff !important;
    border: none !important;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25) !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    white-space: nowrap !important;
  }

  #nc-chapter-compass-bar {
    padding: 20px 18px calc(20px + env(safe-area-inset-bottom, 0px)) !important;
  }

  #nc-compass-beats-drawer,
  .nc-compass-beats-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  .nc-compass-beat-card {
    padding: 14px 16px !important;
  }

  .nc-compass-beat-title {
    font-size: 15px !important;
  }

  .nc-compass-beat-desc {
    font-size: 14.5px !important;
    line-height: 1.6 !important;
    margin: 6px 0 10px !important;
  }

  .nc-compass-beat-btn {
    width: 100% !important;
    min-height: 44px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    border-radius: 8px !important;
  }

  /* 9. NOVEL READER STUDIO FULLSCREEN */
  #nc-rs-chapter-title {
    font-size: 24px !important;
    font-weight: 800 !important;
    line-height: 1.4 !important;
    margin: 20px 0 16px !important;
  }

  #nc-rs-chapter-content,
  .nc-rs-para {
    font-size: 21px !important;
    line-height: 1.95 !important;
    font-family: 'Literata', 'Noto Serif', Georgia, serif !important;
    margin-bottom: 20px !important;
  }

  #nc-rs-audio-play {
    min-height: 50px !important;
    font-size: 16px !important;
    font-weight: 800 !important;
    padding: 0 22px !important;
  }

  #nc-rs-audio-prev-para,
  #nc-rs-audio-next-para,
  #nc-rs-audio-stop {
    min-height: 44px !important;
    font-size: 13.5px !important;
    padding: 0 12px !important;
  }

  .nc-rs-audio-bar select {
    min-height: 42px !important;
    font-size: 13.5px !important;
    padding: 4px 10px !important;
  }

  /* 10. PEDIGREE & CHARACTER DOCK (THƯ VIỆN PHẢ HỆ TRÊN MOBILE) */
  #nc-workbench-dock {
    width: 100vw !important;
    max-width: 100vw !important;
    left: 0 !important;
    right: 0 !important;
    font-size: 15px !important;
  }

  #nc-workbench-dock button,
  #nc-workbench-dock .nc-btn-action,
  #nc-workbench-dock .nc-tree-btn {
    min-height: 44px !important;
    font-size: 14px !important;
    padding: 8px 14px !important;
  }

  .nc-dock-card,
  .nc-char-card,
  .nc-fact-item,
  .nc-clan-card {
    padding: 14px 16px !important;
    font-size: 14.5px !important;
    line-height: 1.55 !important;
  }

  /* 11. HIDE FLOATING WORD GOAL ON MOBILE (Already shown in topbar .wb-word-count) */
  .nc-word-goal-container,
  .nc-word-goal-badge {
    display: none !important;
  }
}