#native-book {
  --bg-dark: #07070a;
  --bg-soft: #0e0e14;
  --panel-bg: rgba(255, 255, 255, 0.03);
  --panel-hover: rgba(255, 255, 255, 0.06);
  --accent: #8b5cf6;
  --accent-glow: rgba(139, 92, 246, 0.3);
  --accent-light: #a78bfa;
  --text-primary: #ffffff;
  --text-secondary: #94a3b8;
  --text-muted: #64748b;
  --border: rgba(255, 255, 255, 0.08);
  --border-bright: rgba(255, 255, 255, 0.15);
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --shadow-lg: 0 10px 40px -10px rgba(0, 0, 0, 0.5);
  --glass: blur(16px);
  --accent-secondary: #ff3e8e;
}

#native-book .heading-font {
  font-family: 'Outfit', sans-serif;
}

#native-book .field-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

#native-book .field-label {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 700;
  color: var(--text-muted);
}

#native-book .input-glass {
  background: var(--panel-bg);
  border: 1px solid var(--border);
  color: var(--text-primary);
  border-radius: var(--radius-md);
  padding: 14px;
  font-size: 0.95rem;
  transition: all 0.2s ease;
  width: 100%;
}

#native-book .input-glass:focus {
  outline: none;
  border-color: var(--accent);
  background: var(--panel-hover);
  box-shadow: 0 0 0 1px var(--accent-glow);
}

#native-book .input-glass option {
  background-color: var(--bg-soft);
  color: var(--text-primary);
}

#native-book textarea.input-glass {
  resize: none;
  line-height: 1.6;
}
#native-book .btn-primary {
  background: var(--accent);
  color: white;
  font-weight: 700;
  padding: 16px;
  border-radius: var(--radius-md);
  font-size: 1rem;
  box-shadow: 0 10px 25px -5px var(--accent-glow);
  text-transform: uppercase;
  letter-spacing: 1px;
}

#native-book .btn-primary:hover {
  filter: brightness(1.1);
  transform: translateY(-2px);
}

#native-book .btn-primary:active {
  transform: translateY(0);
}

#native-book .btn-primary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

#native-book .project-info {
  display: flex;
  flex-direction: column;
}

#native-book .page-indicator {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-top: 4px;
}

#native-book .nav-arrow {
  padding: 12px 30px;
  background: var(--panel-bg);
  border: 1px solid var(--border);
  border-radius: 30px;
  color: white;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
}

#native-book .nav-arrow:hover:not(:disabled) {
  background: var(--accent);
  border-color: var(--accent-light);
  transform: translateY(-2px);
}

#native-book .nav-arrow:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

#native-book .progress-dots {
  display: flex;
  gap: 10px;
}

#native-book .dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--border-bright);
  cursor: pointer;
  transition: all 0.2s ease;
}

#native-book .field-group.compact {
  gap: 6px;
}

#native-book .field-group.compact .field-label {
  font-size: 0.65rem;
}

#native-book .field-group.compact .input-glass {
  padding: 10px 12px;
  font-size: 0.85rem;
}
#native-book .btn-secondary {
  background: var(--panel-hover);
  color: var(--text-secondary);
  font-weight: 600;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  font-size: 0.8rem;
  border: 1px solid var(--border);
  transition: all 0.2s ease;
}

#native-book .btn-secondary:hover {
  background: var(--panel-bg);
  color: var(--text-primary);
  border-color: var(--accent);
}
#native-book .assembler-overlay .assembler-card {
  width: 98vw;
  height: 95vh;
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.05);
}

#native-book .assembler-header {
  padding: 20px 30px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: rgba(255, 255, 255, 0.02);
}

#native-book .assembler-body {
  flex: 1;
  display: flex;
  overflow: hidden;
  min-height: 0;
}

#native-book .assembler-preview-side {
  flex: 1;
  padding: 30px;
  background: #0a0a0a;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 20px;
  overflow-y: auto;
  min-height: 0;
}

#native-book .preview-nav {
  display: flex;
  align-items: center;
  gap: 20px;
  background: rgba(0, 0, 0, 0.5);
  padding: 10px 20px;
  border-radius: 50px;
}

#native-book .assembler-controls {
  width: 380px;
  background: var(--bg-sidebar);
  padding: 30px;
  border-left: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  flex-direction: column;
  gap: 25px;
  overflow-y: auto;
}

#native-book .preset-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

#native-book .preset-btn {
  padding: 12px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  font-size: 0.8rem;
  cursor: pointer;
  transition: all 0.2s;
}

#native-book .preset-btn:hover {
  background: rgba(255, 255, 255, 0.1);
}

#native-book .preset-btn.active {
  background: var(--accent);
  color: white;
  border-color: var(--accent);
}

#native-book .color-row {
  display: flex;
  gap: 15px;
}

#native-book .color-row .field-group {
  flex: 1;
}

#native-book .assembler-controls input[type='color'] {
  width: 100%;
  height: 40px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-sm);
  cursor: pointer;
  padding: 2px;
}

#native-book .assembler-controls input[type='range'] {
  width: 100%;
  accent-color: var(--accent);
}

#native-book .btn-secondary {
  background: rgba(255, 255, 255, 0.1);
  color: white;
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 12px 20px;
  border-radius: var(--radius-md);
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}

#native-book .btn-secondary:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.2);
}

#native-book .assembler-upload-btn {
  position: absolute;
  bottom: 15px;
  right: 15px;
  background: rgba(0, 0, 0, 0.7);
  color: white;
  border: 1px solid rgba(255, 255, 255, 0.2);
  padding: 8px 16px;
  border-radius: 20px;
  font-size: 0.8rem;
  cursor: pointer;
  z-index: 100;
  transition: all 0.2s ease;
  backdrop-filter: blur(4px);
}

#native-book .assembler-upload-btn:hover {
  background: linear-gradient(135deg, #3b82f6, #06b6d4);
  border-color: transparent;
}

#native-book .booklet-cover-composer {
  background: var(--bg-color);
  width: 600px;
  height: 800px;
  position: relative;
  overflow: hidden;
}

#native-book .booklet-cover-image-area {
  position: absolute;
  inset: 0;
  background: #222;
  overflow: hidden;
}

#native-book .booklet-cover-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

#native-book .booklet-cover-text-area {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  max-height: 55%;
  background: var(--overlay-bg);
  color: var(--text-color);
  padding: var(--padding);
  z-index: 10;
  overflow: auto;
}

#native-book .booklet-status-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.04);
}

#native-book .booklet-status-ok {
  color: #bbf7d0;
  font-size: 0.85rem;
  font-weight: 700;
}

#native-book .booklet-status-error {
  color: #fecaca;
  font-size: 0.85rem;
  font-weight: 700;
}

#native-book .booklet-status-detail {
  color: var(--text-muted);
  font-size: 0.8rem;
}

@media (max-width: 1200px) {
  #native-book .assembler-body {
    flex-direction: column;
  }

  #native-book .assembler-controls {
    width: 100%;
    height: auto;
    border-left: none;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
  }
}
#native-book .storybook-rt-toolbar {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  background: var(--bg-sidebar);
  padding: 8px 15px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  margin-bottom: 20px;
  align-items: center;
}

#native-book .storybook-rt-toolbar button {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--text-secondary);
  min-height: 30px;
  padding: 0 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.85rem;
  font-weight: 600;
  transition: all 0.15s;
  user-select: none;
}

#native-book .storybook-rt-toolbar button:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.12);
  color: white;
}

#native-book .storybook-rt-toolbar button.active {
  background: var(--accent);
  border-color: var(--accent);
  color: white;
}

#native-book .storybook-rt-toolbar button:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

#native-book .storybook-rt-toolbar .separator {
  color: var(--border);
  margin: 0 5px;
}

#native-book .storybook-rt-content {
  width: 100%;
  height: 100%;
  min-height: 0;
}

#native-book .storybook-rt-content .tiptap {
  width: 100%;
  height: 100%;
  min-height: 100%;
  outline: none;
  font-family: var(--rt-font-family, 'Plus Jakarta Sans');
  font-size: var(--rt-font-size, 24px);
  line-height: var(--rt-line-height, 1.6);
  letter-spacing: var(--rt-letter-spacing, 0px);
  color: var(--text-color);
}

#native-book .storybook-rt-content .tiptap p {
  margin: 0 0 0.6em 0;
}

#native-book .storybook-rt-content .tiptap ul,
#native-book .storybook-rt-content .tiptap ol {
  padding-left: 1.3em;
  margin: 0.4em 0;
}

#native-book .storybook-rt-content .tiptap li {
  margin: 0.2em 0;
}

#native-book .canvas-wrapper-dom {
  /* Scale wrapper to fit preview */
  transform-origin: center top;
  border-radius: var(--radius-lg);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
  overflow: hidden;
  border: 1px solid var(--border);
}

#native-book .page-composer {
  background-color: var(--bg-color);
  width: 1200px;
  height: 800px;
  display: flex;
  position: relative;
  overflow: hidden;
}

#native-book .composer-image-area {
  flex: 1;
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

#native-book .composer-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 1;
}

#native-book .composer-text-area {
  position: relative;
  color: var(--text-color);
  padding: var(--padding);
  outline: none;
  /* remove focus outline for clean look */
  z-index: 10;
  /* Allow text selection */
  user-select: text;
  min-height: 0;
}
#native-book .layout-overlay-bottom .composer-image-area,
#native-book .layout-overlay-top .composer-image-area {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

#native-book .layout-overlay-bottom .composer-text-area {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  max-height: 40%;
  /* customizable? */
  background: var(--overlay-bg);
  overflow: auto;
}

#native-book .layout-overlay-top .composer-text-area {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  max-height: 40%;
  background: var(--overlay-bg);
  overflow: auto;
}

#native-book .layout-side-left .composer-image-area {
  width: 50%;
  flex: none;
  /* Don't grow */
}

#native-book .layout-side-left .composer-text-area {
  width: 50%;
  background: var(--bg-color);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  overflow: auto;
}

#native-book .layout-side-right {
  flex-direction: row-reverse;
}

#native-book .layout-side-right .composer-image-area {
  width: 50%;
  flex: none;
}

#native-book .layout-side-right .composer-text-area {
  width: 50%;
  background: var(--bg-color);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  overflow: auto;
}

#native-book .layout-below {
  flex-direction: column;
}

#native-book .layout-below .composer-image-area {
  height: 70%;
  flex: none;
}

#native-book .layout-below .composer-text-area {
  height: 30%;
  background: var(--bg-color);
  overflow: auto;
}

#native-book .placeholder-msg {
  color: white;
  font-size: 2rem;
  opacity: 0.3;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

#native-book .layout-preview-actions .btn-primary,
#native-book .layout-preview-actions .btn-secondary {
  padding: 10px 25px;
}
/* MangaGen's dark/violet source rules are copied and namespaced by the build.
   This sheet changes only embedding, readable Chinese sizing and lifecycle UI. */
#native-book {
  --bg-dark:#0a0a0f; --bg-soft:#13131a; --bg-card:#13131a; --bg-sidebar:#13131a;
  --accent:#6366f1; --accent-light:#818cf8; --accent-glow:rgba(99,102,241,.3);
  --border:#1e1e2e; --border-bright:#313145; --text-primary:#e4e4e7;
  width:100%; height:100%; min-width:0; min-height:0; overflow:hidden;
  background:var(--bg-dark); color:var(--text-primary);
  font:14px/1.5 'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,'PingFang SC','Microsoft YaHei',sans-serif;
}
#native-book *,#native-book *::before,#native-book *::after { box-sizing:border-box; }
#native-book button,#native-book input,#native-book select { font-family:inherit; }
#native-book button,#native-book select { font-size:14px; }
#native-book button { cursor:pointer; }
#native-book button:disabled { cursor:not-allowed; }
#native-book button:focus-visible,#native-book input:focus-visible,#native-book select:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
#native-book .native-book-shell { height:100%; min-height:0; display:flex; flex-direction:column; overflow:hidden; }
#native-book .native-book-notice { flex:none; margin:0; padding:10px 20px; background:rgba(99,102,241,.15); border-bottom:1px solid var(--border); color:var(--text-primary); font-size:14px; }
#native-book .native-book-notice[data-type='error'] { background:rgba(239,68,68,.15); color:#fecaca; }
#native-book .native-book-notice[hidden] { display:none; }
#native-book .native-book-assembler { flex:1; min-height:0; min-width:0; display:flex; overflow:hidden; }
#native-book .assembler-overlay .assembler-card { width:100%; height:100%; min-height:0; border-radius:var(--radius-lg); }
#native-book .assembler-header { flex:none; gap:16px; }
#native-book .project-info { min-width:0; }
#native-book .heading-font { margin:0 0 3px; font:600 18px/1.4 'Outfit',-apple-system,BlinkMacSystemFont,'PingFang SC',sans-serif; }
#native-book .page-indicator { font-size:13px; color:var(--text-muted); }
#native-book .close-btn { background:transparent; border:1px solid var(--border); border-radius:var(--radius-sm); color:var(--text-secondary); padding:8px 12px; font-size:13px; white-space:nowrap; }
#native-book .close-btn:hover { color:var(--text-primary); border-color:var(--accent); }
#native-book .assembler-preview-side { min-width:0; overflow:auto; overscroll-behavior:contain; }
#native-book .assembler-preview-side { background:var(--bg-dark); }
#native-book .assembler-upload-btn:hover { background:var(--accent); }
#native-book .storybook-rt-toolbar { flex-shrink:0; position:sticky; top:0; z-index:25; background:var(--bg-soft); max-width:100%; margin-bottom:0; }
#native-book .storybook-rt-toolbar button { min-height:34px; font-size:14px; }
#native-book .native-book-stage { position:relative; flex:none; margin:0 auto; }
#native-book .canvas-wrapper-dom { transform-origin:left top; }
#native-book .composer-text-area,#native-book .booklet-cover-text-area { overscroll-behavior:contain; }
#native-book .storybook-rt-content .tiptap { font-family:var(--rt-font-family,'PingFang SC'),'Microsoft YaHei',sans-serif; }
#native-book .storybook-rt-content .tiptap[contenteditable='true']:focus { outline:2px solid rgba(99,102,241,.65); outline-offset:4px; }
#native-book .preview-nav { flex:none; max-width:100%; margin-top:4px; }
#native-book .progress-dots { flex-wrap:wrap; justify-content:center; min-width:0; }
#native-book .dot { min-width:10px; padding:0; border:0; }
#native-book .assembler-controls { min-height:0; flex-shrink:0; overflow-x:hidden; overscroll-behavior:contain; }
#native-book .field-group { min-width:0; }
#native-book .field-label { font-size:12px; line-height:1.6; }
#native-book .assembler-controls [style*='0.7'] { font-size:12px !important; line-height:1.65; }
#native-book .preset-btn,#native-book .assembler-upload-btn { font-size:13px; }
#native-book .btn-primary,#native-book .btn-secondary { font-size:14px; line-height:1.5; }
#native-book .input-glass { font-size:14px; max-width:100%; }
#native-book .booklet-status-ok,#native-book .booklet-status-error { font-size:14px; }
#native-book .booklet-status-detail { font-size:12px; }
#native-book .native-book-error { padding:36px; max-width:640px; margin:auto; font-size:14px; }
#native-book .native-book-error h3 { font-size:20px; }
#native-book .native-book-error button { padding:10px 14px; background:var(--accent); color:#fff; border:0; border-radius:var(--radius-sm); }
@media (max-width:1200px) {
  #native-book .assembler-body { overflow-y:auto; }
  #native-book .assembler-preview-side { flex:none; min-height:440px; }
  #native-book .assembler-controls { flex:none; overflow:visible; }
}
@media (max-width:600px) {
  #native-book .assembler-header { padding:16px; align-items:center; }
  #native-book .assembler-preview-side { padding:16px; }
  #native-book .assembler-controls { padding:20px; }
  #native-book .storybook-rt-toolbar { gap:6px; padding:8px; }
  #native-book .storybook-rt-toolbar button { padding:0 8px; font-size:13px; }
  #native-book .heading-font { font-size:16px; }
}