/* ==================== COVERFORGE — CSS PRINCIPAL ==================== */
:root {
  --ink: #1a1410;
  --parchment: #f7f3ec;
  --gold: #c8922a;
  --gold-light: #f0d080;
  --gold-dim: rgba(200,146,42,0.15);
  --cream: #fdf8f0;
  --muted: #8a7d6b;
  --sidebar-bg: #16120e;
  --sidebar-w: 230px;
  --border-clr: rgba(200,146,42,0.2);
  --border-light: rgba(200,146,42,0.12);
  --accent: #2d5a3d;
  --topbar-h: 56px;
  --radius: 8px;
  --radius-lg: 12px;
  --shadow-sm: 0 1px 4px rgba(26,20,16,0.08);
  --shadow-md: 0 4px 16px rgba(26,20,16,0.12);
  --shadow-lg: 0 8px 32px rgba(26,20,16,0.18);
}

*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html,body { height:100%; overflow:hidden; }
body { font-family:'DM Sans',sans-serif; background:var(--parchment); color:var(--ink); font-size:14px; }
a { color:var(--gold); text-decoration:none; }
a:hover { text-decoration:underline; }
input,select,textarea,button { font-family:inherit; }

/* ====== SPLASH SCREEN ====== */
#splash-screen {
  position:fixed; inset:0;
  display:flex; align-items:center; justify-content:center;
  background:var(--sidebar-bg); z-index:1000;
}
.splash-bg {
  position:absolute; inset:0;
  background:radial-gradient(ellipse at 30% 50%, rgba(200,146,42,0.08) 0%, transparent 60%),
             radial-gradient(ellipse at 70% 20%, rgba(45,90,61,0.12) 0%, transparent 50%);
}
.splash-content { position:relative; z-index:1; text-align:center; width:100%; max-width:440px; padding:20px; }
.splash-logo { margin-bottom:32px; }
.splash-mark { font-family:'Playfair Display',serif; font-size:36px; color:var(--gold-light); letter-spacing:0.02em; }
.splash-tagline { font-size:12px; color:rgba(200,146,42,0.5); letter-spacing:0.18em; text-transform:uppercase; margin-top:4px; }
.splash-card {
  background:rgba(255,255,255,0.04); border:0.5px solid rgba(200,146,42,0.25);
  border-radius:var(--radius-lg); padding:28px 32px; backdrop-filter:blur(10px);
}
.splash-title { font-family:'Playfair Display',serif; font-size:20px; color:var(--gold-light); margin-bottom:20px; font-weight:600; }
.form-group { margin-bottom:14px; text-align:left; }
.form-group label { display:block; font-size:11px; color:rgba(255,255,255,0.45); letter-spacing:0.08em; text-transform:uppercase; margin-bottom:5px; }
.splash-input {
  width:100%; padding:10px 12px;
  background:rgba(255,255,255,0.06); border:0.5px solid rgba(200,146,42,0.3);
  border-radius:6px; color:rgba(255,255,255,0.85); font-size:14px; outline:none;
  transition:border-color 0.18s;
}
.splash-input:focus { border-color:var(--gold); }
.splash-btn {
  width:100%; padding:12px; background:var(--gold); border:none;
  border-radius:6px; color:var(--ink); font-size:14px; font-weight:500;
  cursor:pointer; margin-top:6px; transition:background 0.18s; letter-spacing:0.03em;
}
.splash-btn:hover { background:#b8821f; }
.splash-link { font-size:12px; color:rgba(255,255,255,0.35); margin-top:14px; }
.splash-link a,.splash-demo a { color:rgba(200,146,42,0.7); }
.splash-demo { margin-top:8px; }
.splash-plans { display:flex; gap:10px; margin-top:20px; flex-wrap:wrap; justify-content:center; }
.plan-chip {
  padding:6px 14px; border:0.5px solid rgba(200,146,42,0.2); border-radius:20px;
  font-size:11px; color:rgba(255,255,255,0.45);
}
.plan-chip.pro { border-color:var(--gold); color:var(--gold); }
.plan-chip.agency { border-color:rgba(200,146,42,0.4); color:rgba(200,146,42,0.6); }

/* ====== APP LAYOUT ====== */
#app { height:100%; }
.app-layout { display:flex; height:100%; }

/* ====== SIDEBAR ====== */
.sidebar {
  width:var(--sidebar-w); background:var(--sidebar-bg);
  display:flex; flex-direction:column;
  border-right:0.5px solid rgba(200,146,42,0.12);
  overflow:hidden; flex-shrink:0;
  position:relative;
}
.sidebar::after {
  content:''; position:absolute; top:-80px; right:-80px;
  width:200px; height:200px;
  background:radial-gradient(circle, rgba(200,146,42,0.08) 0%, transparent 70%);
  pointer-events:none;
}
.logo {
  padding:20px 20px 18px; border-bottom:0.5px solid rgba(200,146,42,0.18);
  cursor:pointer; flex-shrink:0;
}
.logo-mark { font-family:'Playfair Display',serif; font-size:19px; color:var(--gold-light); letter-spacing:0.03em; }
.logo-sub { font-size:9px; color:rgba(200,146,42,0.4); letter-spacing:0.18em; text-transform:uppercase; margin-top:3px; }
.nav { padding:12px 0; overflow-y:auto; flex:1; }
.nav-section { padding:8px 20px 4px; font-size:9px; letter-spacing:0.18em; text-transform:uppercase; color:rgba(255,255,255,0.2); }
.nav-item {
  display:flex; align-items:center; gap:10px;
  padding:9px 20px; font-size:13px; color:rgba(255,255,255,0.5);
  cursor:pointer; transition:all 0.15s; border-left:2px solid transparent;
}
.nav-item:hover { color:rgba(255,255,255,0.85); background:rgba(255,255,255,0.03); }
.nav-item.active { color:var(--gold-light); border-left-color:var(--gold); background:rgba(200,146,42,0.08); }
.nav-icon { font-size:13px; width:16px; text-align:center; }
.nav-badge {
  margin-left:auto; background:var(--gold); color:var(--ink);
  font-size:8px; font-weight:500; padding:2px 6px; border-radius:8px;
}
.sidebar-recent { padding:10px 20px; border-top:0.5px solid rgba(200,146,42,0.1); flex-shrink:0; }
.recent-label { font-size:9px; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,0.2); margin-bottom:6px; }
.recent-item { display:flex; align-items:center; gap:9px; padding:6px 0; border-bottom:0.5px solid rgba(200,146,42,0.06); cursor:pointer; }
.recent-item:hover .ri-title { color:rgba(255,255,255,0.9); }
.recent-item:last-child { border-bottom:none; }
.ri-thumb { width:22px; height:30px; border-radius:2px; flex-shrink:0; }
.ri-title { font-size:11px; color:rgba(255,255,255,0.6); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ri-date { font-size:9px; color:rgba(255,255,255,0.22); margin-top:1px; }
.sidebar-stats { padding:12px 20px; border-top:0.5px solid rgba(200,146,42,0.1); flex-shrink:0; }
.stat-row { display:flex; justify-content:space-between; align-items:center; margin-bottom:5px; }
.stat-label { font-size:10px; color:rgba(255,255,255,0.3); }
.stat-val { font-size:11px; color:rgba(200,146,42,0.75); font-weight:500; }
.stat-val.gold { color:var(--gold); }
.sidebar-footer { padding:14px 20px; border-top:0.5px solid rgba(200,146,42,0.15); flex-shrink:0; }
.user-chip { display:flex; align-items:center; gap:9px; }
.avatar { width:30px; height:30px; border-radius:50%; background:linear-gradient(135deg,var(--gold) 0%,#e8a840 100%); display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:500; color:var(--ink); flex-shrink:0; }
.user-name { font-size:12px; color:rgba(255,255,255,0.75); }
.user-plan { font-size:10px; color:var(--gold); }
.btn-icon { background:transparent; border:none; color:rgba(255,255,255,0.3); cursor:pointer; font-size:14px; padding:4px; transition:color 0.15s; margin-left:auto; }
.btn-icon:hover { color:rgba(255,255,255,0.7); }

/* ====== MAIN CONTENT ====== */
.main-content { flex:1; display:flex; flex-direction:column; min-width:0; overflow:hidden; }
.app-section { display:none; flex-direction:column; height:100%; }
.app-section.active { display:flex; }

/* ====== TOPBAR ====== */
.topbar {
  height:var(--topbar-h); background:var(--cream);
  border-bottom:0.5px solid var(--border-clr);
  display:flex; align-items:center; justify-content:space-between;
  padding:0 24px; gap:12px; flex-shrink:0;
}
.topbar-left { display:flex; align-items:center; gap:12px; min-width:0; }
.topbar-right { display:flex; align-items:center; gap:8px; flex-shrink:0; }
.book-title-input {
  font-family:'Playfair Display',serif; font-size:18px; font-weight:600;
  border:none; background:transparent; color:var(--ink); outline:none;
  min-width:200px; max-width:340px;
}
.book-title-input:hover { background:rgba(200,146,42,0.05); border-radius:4px; padding:2px 4px; margin:-2px -4px; }
.topbar-meta { font-size:12px; color:var(--muted); white-space:nowrap; }
.topbar-title-static { font-family:'Playfair Display',serif; font-size:17px; font-weight:600; color:var(--ink); }

/* ====== BUTTONS ====== */
.btn { padding:8px 16px; font-size:12px; font-weight:500; border:none; cursor:pointer; border-radius:6px; transition:all 0.15s; letter-spacing:0.02em; white-space:nowrap; }
.btn-ghost { background:transparent; color:var(--ink); border:0.5px solid rgba(26,20,16,0.22); }
.btn-ghost:hover { background:rgba(26,20,16,0.06); }
.btn-gold { background:var(--gold); color:var(--ink); }
.btn-gold:hover { background:#b8821f; }
.btn-primary { background:var(--ink); color:var(--gold-light); }
.btn-primary:hover { background:#2e2620; }
.btn-ai { width:100%; margin-top:8px; padding:10px; background:rgba(200,146,42,0.1); border:0.5px solid var(--border-clr); border-radius:6px; color:var(--ink); font-size:12px; font-weight:500; cursor:pointer; transition:all 0.18s; }
.btn-ai:hover { background:rgba(200,146,42,0.18); border-color:var(--gold); }

/* ====== EDITOR LAYOUT ====== */
.editor-body { flex:1; display:flex; overflow:hidden; }
.editor-controls { width:300px; padding:16px; overflow-y:auto; border-right:0.5px solid var(--border-light); background:var(--parchment); flex-shrink:0; }
.ctrl-section { margin-bottom:20px; }
.ctrl-heading { font-size:10px; letter-spacing:0.14em; text-transform:uppercase; color:var(--muted); margin-bottom:12px; padding-bottom:6px; border-bottom:0.5px solid var(--border-light); }
.ctrl-grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.field-group { margin-bottom:10px; }
.field-label { display:block; font-size:10px; color:var(--muted); letter-spacing:0.06em; margin-bottom:4px; }
.field-input {
  width:100%; padding:8px 10px; border:0.5px solid rgba(200,146,42,0.25);
  border-radius:6px; background:var(--cream); font-size:12px; color:var(--ink);
  outline:none; transition:border-color 0.15s;
}
.field-input:focus { border-color:var(--gold); }
textarea.field-input { resize:vertical; line-height:1.5; }
.slider-row { display:flex; align-items:center; gap:8px; }
.slider-row input[type=range] { flex:1; accent-color:var(--gold); cursor:pointer; }
.slider-val { font-size:11px; color:var(--gold); font-weight:500; min-width:32px; text-align:right; }
.spine-info { display:flex; align-items:center; gap:6px; padding:8px 12px; background:rgba(200,146,42,0.08); border-radius:6px; font-size:11px; color:var(--muted); margin-top:8px; }
.spine-icon { color:var(--gold); }
.spine-hint { font-size:10px; color:rgba(138,125,107,0.6); margin-left:4px; }

/* ====== PALETTE ====== */
.palette-label { font-size:10px; color:var(--muted); margin-bottom:6px; }
.theme-swatches { display:flex; gap:7px; flex-wrap:wrap; margin-bottom:12px; }
.theme-swatch { width:28px; height:28px; border-radius:50%; cursor:pointer; border:2px solid transparent; transition:all 0.15s; overflow:hidden; flex-shrink:0; }
.theme-swatch:hover { transform:scale(1.12); }
.theme-swatch.active { border-color:var(--ink); box-shadow:0 0 0 3px rgba(200,146,42,0.35); }
.color-pickers-row { display:flex; gap:12px; flex-wrap:wrap; }
.picker-group { flex:1; min-width:100px; }
.color-pick-wrap { display:flex; align-items:center; gap:6px; }
.color-pick-wrap input[type=color] { width:30px; height:30px; border:0.5px solid var(--border-clr); border-radius:6px; cursor:pointer; padding:2px; background:var(--cream); }
.picker-label { font-size:10px; color:var(--muted); }

/* ====== LAYOUT OPTIONS ====== */
.layout-options { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; }
.layout-opt { border:0.5px solid var(--border-clr); border-radius:7px; padding:8px 6px 6px; cursor:pointer; transition:all 0.15s; background:var(--cream); text-align:center; }
.layout-opt.active { border-color:var(--gold); background:rgba(200,146,42,0.06); }
.layout-opt:hover:not(.active) { border-color:rgba(200,146,42,0.4); }
.lo-preview { height:64px; display:flex; flex-direction:column; margin-bottom:6px; }
.layout-opt span { font-size:9px; color:var(--muted); }
.layout-opt.active span { color:var(--gold); }

/* ====== EFFECTS ====== */
.effects-list { display:flex; flex-direction:column; gap:8px; }
.effect-row { display:flex; align-items:center; justify-content:space-between; padding:7px 0; border-bottom:0.5px solid var(--border-light); }
.effect-row:last-child { border-bottom:none; }
.effect-name { font-size:12px; color:var(--ink); display:block; }
.effect-desc { font-size:10px; color:var(--muted); }
.toggle-btn {
  padding:4px 10px; border:0.5px solid; border-radius:12px;
  font-size:10px; font-weight:500; cursor:pointer; transition:all 0.18s; min-width:36px;
}
.toggle-btn.on { background:var(--gold); border-color:var(--gold); color:var(--ink); }
.toggle-btn.off { background:transparent; border-color:rgba(138,125,107,0.3); color:var(--muted); }

/* ====== UPLOAD ZONE ====== */
.upload-zone {
  border:0.5px dashed rgba(200,146,42,0.4); border-radius:8px;
  padding:16px 12px; text-align:center; cursor:pointer;
  transition:all 0.18s; background:rgba(200,146,42,0.02);
}
.upload-zone:hover { border-color:var(--gold); background:rgba(200,146,42,0.06); }
.upload-zone.small { padding:12px 8px; }
.upload-icon { font-size:20px; opacity:0.45; margin-bottom:5px; color:var(--gold); }
.upload-text { font-size:11px; color:var(--muted); line-height:1.5; }
.upload-text span { color:var(--gold); font-size:10px; }
.illus-options { display:flex; gap:10px; margin-bottom:12px; }
.illus-tools { flex:1; }
.ai-generate-box { background:rgba(200,146,42,0.05); border:0.5px solid var(--border-clr); border-radius:8px; padding:12px; }
.ai-note { font-size:11px; font-weight:500; color:var(--gold); margin-bottom:4px; }
.ai-note-sub { font-size:10px; color:var(--muted); line-height:1.5; }

/* ====== PREVIEW CENTER ====== */
.preview-center { flex:1; display:flex; flex-direction:column; overflow:hidden; background:var(--parchment); min-width:0; }
.preview-controls { display:flex; gap:1px; padding:12px 16px 0; flex-shrink:0; }
.prev-tab { padding:8px 16px; font-size:12px; background:transparent; border:0.5px solid var(--border-clr); border-bottom:none; border-radius:6px 6px 0 0; cursor:pointer; color:var(--muted); transition:all 0.15s; }
.prev-tab.active { background:var(--cream); color:var(--ink); border-color:var(--border-clr); }
.preview-view { display:none; flex:1; flex-direction:column; overflow:auto; padding:16px; background:var(--cream); border:0.5px solid var(--border-clr); border-radius:0 8px 8px 8px; margin:0 16px 16px; }
.preview-view.active { display:flex; }
.cover-wrap { display:flex; justify-content:center; align-items:flex-start; padding:20px; flex:1; }
.preview-actions { display:flex; justify-content:center; gap:10px; padding:10px 0 0; flex-shrink:0; }
.prev-action-btn { padding:7px 16px; background:transparent; border:0.5px solid var(--border-clr); border-radius:6px; font-size:12px; cursor:pointer; color:var(--muted); transition:all 0.15s; }
.prev-action-btn:hover { border-color:var(--gold); color:var(--ink); }

/* ====== COVER FRONT ====== */
.cover-front {
  width:200px; height:285px; position:relative; overflow:hidden;
  border-radius:2px 6px 6px 2px; cursor:pointer;
  box-shadow:-4px 0 0 rgba(0,0,0,0.35), 6px 8px 24px rgba(0,0,0,0.35), 16px 10px 40px rgba(0,0,0,0.18);
  transition:transform 0.3s;
  flex-shrink:0;
}
.cover-front:hover { transform:translateY(-4px) rotate(1deg); }
.cover-front::before { content:''; position:absolute; top:0; left:0; bottom:0; width:6px; background:linear-gradient(to right, rgba(0,0,0,0.5), rgba(0,0,0,0.12) 60%, transparent); z-index:10; pointer-events:none; }
.cover-bg-layer { position:absolute; inset:0; background:linear-gradient(160deg, #1a3328 0%, #0d1f18 50%, #2d5a3d 100%); transition:background 0.4s; }
.cover-illus-layer { position:absolute; inset:0; }
.cover-illus-inner { position:absolute; inset:0; overflow:hidden; }
.cover-vignette { position:absolute; inset:0; background:radial-gradient(ellipse at 50% 50%, transparent 30%, rgba(0,0,0,0.55) 100%); pointer-events:none; }
.cover-grain-layer { position:absolute; inset:0; opacity:0.08; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='1'/%3E%3C/svg%3E"); pointer-events:none; }
.cover-text-layer { position:absolute; inset:0; display:flex; flex-direction:column; padding:12px 10px 10px; pointer-events:none; z-index:5; }
.cover-collection { font-size:7px; letter-spacing:0.16em; text-transform:uppercase; color:rgba(240,208,128,0.5); margin-bottom:4px; min-height:10px; }
.cover-title { font-family:'Playfair Display',serif; font-size:15px; font-weight:700; color:#f0d080; line-height:1.15; flex:1; display:flex; align-items:flex-end; padding-bottom:6px; text-shadow:0 2px 8px rgba(0,0,0,0.5); }
.cover-subtitle { font-size:7px; letter-spacing:0.06em; color:rgba(240,208,128,0.6); margin-bottom:6px; font-style:italic; }
.cover-divider { height:0.5px; background:rgba(200,146,42,0.45); margin-bottom:7px; }
.cover-author-block { display:flex; align-items:center; gap:5px; margin-bottom:6px; }
.cover-author-photo-wrap { flex-shrink:0; }
.cover-author-photo { width:22px; height:22px; border-radius:50%; background:rgba(200,146,42,0.25); border:0.5px solid rgba(200,146,42,0.5); overflow:hidden; position:relative; flex-shrink:0; }
.cover-author-name { font-size:7px; color:rgba(240,208,128,0.75); letter-spacing:0.04em; }
.cover-publisher-row { display:flex; align-items:center; justify-content:space-between; }
.cover-publisher { font-size:6.5px; color:rgba(240,208,128,0.4); letter-spacing:0.12em; text-transform:uppercase; }
.cover-isbn { font-size:6px; color:rgba(240,208,128,0.3); }

/* ====== BACK COVER ====== */
.back-cover-preview { background:var(--cream); border:0.5px solid var(--border-clr); border-radius:6px; overflow:hidden; position:relative; }
.back-cover-inner { position:relative; overflow:hidden; min-height:285px; }
.back-bg-layer { position:absolute; inset:0; background:linear-gradient(160deg, #1a3328 0%, #0d1f18 60%, #2d5a3d 100%); }
.back-content { position:relative; z-index:2; padding:14px 14px 12px; display:flex; flex-direction:column; min-height:285px; }
.back-collection-tag { font-size:8px; letter-spacing:0.14em; text-transform:uppercase; color:rgba(240,208,128,0.45); margin-bottom:10px; min-height:12px; }
.back-blurb { font-size:10px; line-height:1.65; color:rgba(240,208,128,0.85); margin-bottom:12px; flex:1; }
.back-quote { padding:10px 12px; border-left:2px solid rgba(200,146,42,0.5); margin-bottom:12px; background:rgba(200,146,42,0.06); border-radius:0 4px 4px 0; }
.bq-mark { font-size:20px; color:rgba(200,146,42,0.4); font-family:'Playfair Display',serif; line-height:1; }
#bk-quote-text { font-size:9px; color:rgba(240,208,128,0.75); font-style:italic; display:block; margin-top:2px; }
.bq-source { font-size:8px; color:rgba(240,208,128,0.45); display:block; margin-top:4px; }
.back-author-section { display:flex; align-items:flex-start; gap:10px; margin-bottom:12px; padding:10px; background:rgba(255,255,255,0.04); border-radius:6px; }
.back-author-photo-wrap { flex-shrink:0; }
.back-author-photo { width:44px; height:44px; border-radius:50%; background:rgba(200,146,42,0.25); border:0.5px solid rgba(200,146,42,0.45); overflow:hidden; position:relative; }
.back-author-name { font-size:9px; font-weight:500; color:rgba(240,208,128,0.9); margin-bottom:3px; }
.back-author-bio-text { font-size:7.5px; color:rgba(240,208,128,0.55); line-height:1.5; }
.back-footer { display:flex; align-items:flex-end; justify-content:space-between; margin-top:auto; padding-top:10px; border-top:0.5px solid rgba(200,146,42,0.2); }
.back-publisher-logo { font-family:'Playfair Display',serif; font-size:9px; color:rgba(240,208,128,0.5); letter-spacing:0.08em; }
.back-barcode-zone { text-align:right; }
.barcode-placeholder { display:inline-block; background:white; padding:4px 6px; border-radius:2px; }
.barcode-lines { width:48px; height:22px; background:repeating-linear-gradient(90deg, #000 0px, #000 1.5px, #fff 1.5px, #fff 3px, #000 3px, #000 5px, #fff 5px, #fff 6.5px, #000 6.5px, #000 8px, #fff 8px, #fff 10px, #000 10px, #000 11.5px, #fff 11.5px, #fff 13px, #000 13px, #000 15px, #fff 15px, #fff 16.5px, #000 16.5px, #000 18px, #fff 18px, #fff 20px, #000 20px, #000 21.5px, #fff 21.5px, #fff 23px); }
.barcode-num { font-size:5px; color:#000; font-family:monospace; text-align:center; margin-top:2px; }
.back-price { font-size:8px; color:rgba(240,208,128,0.55); margin-top:4px; }

/* ====== FULL COVER VIEW ====== */
.full-cover-wrap { display:flex; align-items:flex-start; justify-content:center; padding:20px; }
.full-back,.full-front { width:200px; height:285px; position:relative; overflow:hidden; border-radius:2px; background:linear-gradient(160deg,#1a3328,#0d1f18); }
.full-spine {
  height:285px; display:flex; flex-direction:column;
  align-items:center; justify-content:space-between;
  padding:12px 4px; background:linear-gradient(#1a3328,#0d1f18);
  overflow:hidden; position:relative; flex-shrink:0; transition:width 0.4s;
  box-shadow:inset -2px 0 4px rgba(0,0,0,0.3), inset 2px 0 4px rgba(0,0,0,0.3);
}
.spine-title,.spine-author,.spine-publisher { white-space:nowrap; }
.spine-title { font-family:'Playfair Display',serif; font-size:9px; color:rgba(240,208,128,0.85); writing-mode:vertical-rl; transform:rotate(180deg); font-weight:600; }
.spine-author { font-size:7.5px; color:rgba(240,208,128,0.55); writing-mode:vertical-rl; transform:rotate(180deg); }
.spine-publisher { font-size:7px; color:rgba(240,208,128,0.35); writing-mode:vertical-rl; transform:rotate(180deg); letter-spacing:0.08em; }
.spine-width-indicator { text-align:center; font-size:11px; color:var(--muted); padding:8px 0; }

/* ====== DETAILS PANEL ====== */
.details-panel { width:260px; background:var(--cream); border-left:0.5px solid var(--border-light); overflow-y:auto; flex-shrink:0; }
.panel-section { padding:16px 18px; border-bottom:0.5px solid var(--border-light); }
.panel-heading { font-size:10px; letter-spacing:0.12em; text-transform:uppercase; color:var(--muted); margin-bottom:12px; }
.author-photo-toggle-row { display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; gap:8px; }
.toggle-label { font-size:12px; color:var(--ink); }

/* ====== SPINE SECTION ====== */
.spine-calc-card { background:var(--cream); border:0.5px solid var(--border-clr); border-radius:10px; padding:14px; margin-bottom:14px; }
.spine-result-card { text-align:center; padding:16px; background:rgba(200,146,42,0.08); border-radius:8px; margin-top:12px; }
.spine-result-value { font-family:'Playfair Display',serif; font-size:36px; font-weight:600; color:var(--gold); line-height:1; }
.spine-result-unit { font-size:12px; color:var(--muted); margin-top:4px; }
.spine-result-hint { font-size:10px; color:var(--muted); margin-top:6px; font-style:italic; }
.spine-preview-wrap { display:flex; flex-direction:column; align-items:center; justify-content:center; padding:20px; flex:1; }
.spine-preview-label { font-size:11px; color:var(--muted); margin-bottom:12px; letter-spacing:0.08em; text-transform:uppercase; }
.spine-preview-visual { height:285px; background:linear-gradient(#1a3328,#0d1f18); display:flex; align-items:center; justify-content:center; border-radius:3px; box-shadow:var(--shadow-md); transition:width 0.4s; }
.spine-visual-inner { display:flex; flex-direction:column; align-items:center; justify-content:space-between; height:260px; padding:10px 3px; }
.spine-v-title { font-family:'Playfair Display',serif; font-size:9px; color:rgba(240,208,128,0.9); writing-mode:vertical-rl; transform:rotate(180deg); font-weight:600; white-space:nowrap; overflow:hidden; }
.spine-v-author { font-size:7.5px; color:rgba(240,208,128,0.6); writing-mode:vertical-rl; transform:rotate(180deg); white-space:nowrap; }
.spine-v-publisher { font-size:7px; color:rgba(240,208,128,0.35); writing-mode:vertical-rl; transform:rotate(180deg); white-space:nowrap; }
.spine-mm-label { font-size:12px; color:var(--muted); margin-top:10px; font-weight:500; }

/* ====== MOCKUP SECTION ====== */
.mockup-section-body { flex:1; display:flex; gap:0; overflow:hidden; }
.mockup-types-grid { width:280px; padding:16px; display:flex; flex-direction:column; gap:10px; overflow-y:auto; border-right:0.5px solid var(--border-light); flex-shrink:0; }
.mockup-card { border:0.5px solid var(--border-clr); border-radius:10px; overflow:hidden; cursor:pointer; transition:all 0.18s; background:var(--cream); }
.mockup-card:hover { border-color:rgba(200,146,42,0.5); }
.mockup-card.active { border-color:var(--gold); box-shadow:0 0 0 2px rgba(200,146,42,0.15); }
.mockup-preview { height:120px; background:var(--parchment); display:flex; align-items:center; justify-content:center; overflow:hidden; }
.mockup-label { padding:8px 12px; font-size:12px; color:var(--muted); font-weight:500; }
.mockup-card.active .mockup-label { color:var(--gold); }
.mockup-main-preview { flex:1; background:var(--parchment); position:relative; display:flex; align-items:center; justify-content:center; overflow:hidden; }
.mockup-bg-grid { position:absolute; inset:0; background-image:linear-gradient(var(--border-light) 1px, transparent 1px), linear-gradient(90deg, var(--border-light) 1px, transparent 1px); background-size:30px 30px; opacity:0.5; }

/* Flat mock */
.flat-mock { width:100%; display:flex; align-items:center; justify-content:center; }
.mock-flat-book { width:70px; height:100px; border-radius:1px 4px 4px 1px; background:linear-gradient(160deg,#1a3328,#0d1f18); box-shadow:-2px 0 0 rgba(0,0,0,0.4),4px 5px 14px rgba(0,0,0,0.3); }

/* 3D mock */
.angle-mock { display:flex; align-items:center; justify-content:center; }
.mock-angle-scene { perspective:400px; }
.mock-3d-book { position:relative; width:80px; height:110px; transform-style:preserve-3d; transform:rotateY(-25deg) rotateX(5deg); }
.book-face { position:absolute; backface-visibility:hidden; }
.book-face.front { width:80px; height:110px; background:linear-gradient(160deg,#1a3328,#0d1f18); transform:translateZ(10px); border-radius:0 3px 3px 0; }
.book-face.spine { width:20px; height:110px; background:linear-gradient(#16302a,#0a1a12); transform:rotateY(90deg) translateZ(80px); left:-10px; display:flex; align-items:center; justify-content:center; overflow:hidden; }
.book-face.spine span { font-size:6px; color:rgba(240,208,128,0.7); writing-mode:vertical-rl; transform:rotate(180deg); font-family:'Playfair Display',serif; white-space:nowrap; overflow:hidden; max-height:100%; }
.book-face.top { width:80px; height:20px; background:linear-gradient(#e8e0d0,#d5cfc0); transform:rotateX(90deg) translateZ(110px); top:0; }
.book-shadow { position:absolute; bottom:-15px; left:5px; right:-5px; height:20px; background:radial-gradient(ellipse at 50% 50%, rgba(0,0,0,0.4) 0%, transparent 70%); transform:rotateX(90deg) translateZ(-5px); }

/* Stack mock */
.stack-mock { display:flex; align-items:flex-end; justify-content:center; padding-bottom:10px; }
.mock-stack-scene { position:relative; width:80px; height:100px; }
.mock-stack-book { position:absolute; width:80px; height:55px; border-radius:1px 3px 3px 1px; background:linear-gradient(160deg,#1a3328,#0d1f18); }
.b1 { bottom:0; transform:rotate(-2deg); box-shadow:2px 4px 10px rgba(0,0,0,0.3); }
.b2 { bottom:14px; transform:rotate(1deg); box-shadow:2px 3px 8px rgba(0,0,0,0.25); }
.b3 { bottom:26px; transform:rotate(3deg); box-shadow:1px 2px 6px rgba(0,0,0,0.2); opacity:0.8; }

/* Open mock */
.open-mock { display:flex; align-items:center; justify-content:center; }
.mock-open-scene { display:flex; box-shadow:var(--shadow-md); }
.mock-open-left { width:56px; height:75px; background:linear-gradient(160deg,#1a3328,#0d1f18); border-radius:3px 0 0 3px; }
.mock-open-spine { width:6px; height:75px; background:#0d1410; box-shadow:inset 2px 0 4px rgba(0,0,0,0.4); }
.mock-open-right { width:56px; height:75px; background:#fff; border-radius:0 3px 3px 0; padding:8px 6px; display:flex; flex-direction:column; gap:4px; }
.mock-line { height:2px; background:#e8e0d0; border-radius:1px; }

/* ====== EXPORT SECTION ====== */
.export-body { flex:1; display:flex; overflow:hidden; }
.export-options-panel { width:380px; padding:16px; overflow-y:auto; border-right:0.5px solid var(--border-light); flex-shrink:0; }
.export-format-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:12px; }
.export-fmt-card { border:0.5px solid var(--border-clr); border-radius:8px; padding:12px 10px; cursor:pointer; transition:all 0.15s; background:var(--cream); text-align:center; }
.export-fmt-card.active { border-color:var(--gold); background:rgba(200,146,42,0.06); }
.export-fmt-card:hover:not(.active) { border-color:rgba(200,146,42,0.4); }
.fmt-icon { font-size:18px; color:var(--muted); margin-bottom:4px; }
.fmt-name { font-size:13px; font-weight:500; color:var(--ink); }
.fmt-desc { font-size:10px; color:var(--muted); }
.export-format-chips { display:flex; gap:8px; margin-top:10px; }
.fmt-chip { flex:1; padding:8px 0; text-align:center; border:0.5px solid var(--border-clr); border-radius:6px; font-size:12px; font-weight:500; color:var(--muted); cursor:pointer; transition:all 0.15s; background:var(--cream); }
.fmt-chip:hover { border-color:var(--gold); color:var(--ink); }
.fmt-chip.selected { background:var(--ink); color:var(--gold-light); border-color:var(--ink); }
.export-elements { display:flex; flex-direction:column; gap:8px; }
.export-check-row { display:flex; align-items:center; gap:9px; font-size:13px; cursor:pointer; padding:4px 0; }
.export-check-row input[type=checkbox] { accent-color:var(--gold); width:15px; height:15px; }
.export-btn-wrap { margin-top:20px; }
.export-big-btn { width:100%; padding:16px 20px; background:var(--ink); color:var(--gold-light); border:none; border-radius:10px; cursor:pointer; display:flex; align-items:center; gap:16px; transition:all 0.18s; font-family:inherit; }
.export-big-btn:hover { background:#2a2218; }
.export-btn-icon { font-size:24px; }
.export-btn-main { font-size:15px; font-weight:500; text-align:left; }
.export-btn-sub { font-size:11px; color:rgba(240,208,128,0.5); margin-top:2px; }
.export-preview-panel { flex:1; padding:20px; overflow-y:auto; }
.export-preview-title { font-size:11px; letter-spacing:0.12em; text-transform:uppercase; color:var(--muted); margin-bottom:16px; }
.export-preview-grid { display:flex; gap:16px; flex-wrap:wrap; }
.exp-prev-item { text-align:center; }
.exp-prev-label { font-size:11px; color:var(--muted); margin-bottom:8px; }
.exp-prev-thumb { width:130px; height:185px; border-radius:3px; border:0.5px solid var(--border-clr); overflow:hidden; }

/* ====== LIBRARY ====== */
.library-body { flex:1; overflow-y:auto; padding:20px; }
.library-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(180px,1fr)); gap:16px; }
.library-card { background:var(--cream); border:0.5px solid var(--border-clr); border-radius:10px; overflow:hidden; cursor:pointer; transition:all 0.18s; }
.library-card:hover { transform:translateY(-2px); box-shadow:var(--shadow-md); border-color:rgba(200,146,42,0.4); }
.library-card-thumb { height:160px; background:linear-gradient(160deg,#1a3328,#0d1f18); display:flex; align-items:center; justify-content:center; }
.library-card-info { padding:12px; }
.library-card-title { font-family:'Playfair Display',serif; font-size:14px; font-weight:600; color:var(--ink); margin-bottom:3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.library-card-meta { font-size:11px; color:var(--muted); }
.library-card-actions { display:flex; gap:6px; margin-top:8px; }
.library-card-actions button { flex:1; padding:5px; font-size:10px; }
.library-empty { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; height:60vh; }
.empty-icon { font-size:48px; opacity:0.2; }
.empty-text { font-size:14px; color:var(--muted); }

/* ====== TEMPLATES ====== */
.templates-body { flex:1; overflow-y:auto; padding:20px; }
.templates-filter { display:flex; gap:8px; margin-bottom:16px; flex-wrap:wrap; }
.tmpl-filter { padding:6px 14px; background:transparent; border:0.5px solid var(--border-clr); border-radius:16px; font-size:12px; color:var(--muted); cursor:pointer; transition:all 0.15s; }
.tmpl-filter.active { background:var(--ink); color:var(--gold-light); border-color:var(--ink); }
.templates-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(160px,1fr)); gap:14px; }
.tmpl-card { border:0.5px solid var(--border-clr); border-radius:10px; overflow:hidden; cursor:pointer; transition:all 0.18s; background:var(--cream); }
.tmpl-card:hover { border-color:rgba(200,146,42,0.5); transform:translateY(-2px); box-shadow:var(--shadow-md); }
.tmpl-thumb { height:140px; display:flex; align-items:center; justify-content:center; }
.tmpl-name { padding:10px 12px; font-size:13px; font-weight:500; color:var(--ink); }
.tmpl-genre { padding:0 12px 10px; font-size:10px; color:var(--muted); }

/* ====== SETTINGS ====== */
.settings-body { flex:1; overflow-y:auto; padding:20px; display:flex; flex-direction:column; gap:16px; max-width:900px; }
.settings-card { background:var(--cream); border:0.5px solid var(--border-clr); border-radius:12px; padding:20px; }
.settings-heading { font-family:'Playfair Display',serif; font-size:16px; font-weight:600; color:var(--ink); margin-bottom:16px; padding-bottom:10px; border-bottom:0.5px solid var(--border-light); }
.plan-cards-row { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.plan-card { border:0.5px solid var(--border-clr); border-radius:10px; padding:18px; position:relative; }
.plan-card.featured { border-color:var(--gold); box-shadow:0 0 0 2px rgba(200,146,42,0.1); }
.plan-badge { position:absolute; top:-10px; left:50%; transform:translateX(-50%); background:var(--gold); color:var(--ink); font-size:9px; font-weight:500; padding:3px 10px; border-radius:8px; white-space:nowrap; }
.plan-name { font-family:'Playfair Display',serif; font-size:18px; font-weight:600; color:var(--ink); margin-bottom:4px; }
.plan-price { font-size:22px; font-weight:500; color:var(--gold); margin-bottom:12px; }
.plan-features { list-style:none; margin-bottom:14px; }
.plan-features li { font-size:12px; color:var(--muted); padding:4px 0; border-bottom:0.5px solid var(--border-light); }
.plan-features li::before { content:'✓ '; color:var(--gold); }
.plan-btn { width:100%; text-align:center; }
.integrations-list { display:flex; flex-direction:column; gap:12px; }
.integration-row { display:flex; align-items:center; justify-content:space-between; padding:10px 0; border-bottom:0.5px solid var(--border-light); gap:12px; }
.integration-row:last-child { border-bottom:none; }
.int-name { font-size:13px; font-weight:500; color:var(--ink); margin-bottom:2px; }
.int-desc { font-size:11px; color:var(--muted); }
.int-status { padding:4px 10px; border-radius:12px; font-size:10px; font-weight:500; white-space:nowrap; flex-shrink:0; }
.int-status.free { background:rgba(45,90,61,0.12); color:#2d5a3d; }
.int-status.paid { background:rgba(200,146,42,0.12); color:var(--gold); }

/* ====== TOAST ====== */
.toast { position:fixed; bottom:24px; left:50%; transform:translateX(-50%) translateY(80px); background:var(--ink); color:var(--gold-light); padding:12px 24px; border-radius:8px; font-size:13px; opacity:0; transition:all 0.3s; z-index:9999; pointer-events:none; }
.toast.show { opacity:1; transform:translateX(-50%) translateY(0); }

/* ====== PROGRESS ====== */
.progress-overlay { position:fixed; inset:0; background:rgba(0,0,0,0.5); display:flex; align-items:center; justify-content:center; z-index:9000; }
.progress-card { background:var(--cream); border-radius:14px; padding:28px 36px; text-align:center; min-width:280px; }
.progress-spinner { width:36px; height:36px; border:3px solid var(--border-clr); border-top-color:var(--gold); border-radius:50%; animation:spin 0.8s linear infinite; margin:0 auto 14px; }
@keyframes spin { to { transform:rotate(360deg); } }
.progress-label { font-size:14px; color:var(--ink); margin-bottom:14px; }
.progress-bar-wrap { height:4px; background:var(--border-clr); border-radius:2px; overflow:hidden; }
.progress-bar { height:100%; background:var(--gold); border-radius:2px; width:0%; transition:width 0.3s; }

/* ====== SCROLLBAR ====== */
::-webkit-scrollbar { width:4px; height:4px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:rgba(200,146,42,0.25); border-radius:2px; }
::-webkit-scrollbar-thumb:hover { background:rgba(200,146,42,0.45); }

/* ====== RESPONSIVE ====== */
@media (max-width:1100px) {
  .details-panel { width:220px; }
  .editor-controls { width:260px; }
}
@media (max-width:900px) {
  :root { --sidebar-w:60px; }
  .logo-mark,.logo-sub,.nav-section,.nav-item span:not(.nav-icon),.nav-badge,.sidebar-recent,.sidebar-stats,.user-name,.user-plan { display:none; }
  .nav-item { justify-content:center; padding:12px; }
  .sidebar-footer { padding:10px; }
  .user-chip { justify-content:center; }
  .details-panel { display:none; }
}

/* ==================== APP V2 ADDITIONS ==================== */

/* KEY ACTIVATION POPUP */
.key-popup-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.7);backdrop-filter:blur(8px);z-index:800;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .3s}
.key-popup-overlay.active{opacity:1;pointer-events:all}
.key-popup{background:var(--dark2,#1e1a14);border:1px solid rgba(200,146,42,0.35);border-radius:16px;padding:36px;max-width:460px;width:90%;animation:popIn .3s ease}
@keyframes popIn{from{transform:scale(.95) translateY(10px);opacity:0}to{transform:scale(1) translateY(0);opacity:1}}
.key-popup-icon{font-size:36px;text-align:center;margin-bottom:16px}
.key-popup-title{font-family:'Playfair Display',serif;font-size:22px;color:var(--gold-light,#f0d080);text-align:center;margin-bottom:8px}
.key-popup-sub{font-size:13px;color:rgba(255,255,255,0.45);text-align:center;margin-bottom:24px;line-height:1.6}
.key-input-wrap{position:relative;margin-bottom:16px}
.key-input{width:100%;padding:14px 48px 14px 16px;background:rgba(255,255,255,0.05);border:1px solid rgba(200,146,42,0.3);border-radius:8px;color:var(--gold-light,#f0d080);font-size:15px;font-family:monospace;letter-spacing:.06em;outline:none;text-transform:uppercase;transition:border-color .2s}
.key-input::placeholder{color:rgba(255,255,255,0.2);text-transform:none;font-family:inherit;letter-spacing:0;font-size:13px}
.key-input:focus{border-color:var(--gold,#c8922a)}
.key-input.valid{border-color:#4caf50;background:rgba(76,175,80,0.06)}
.key-input.invalid{border-color:#e53935;background:rgba(229,57,53,0.06)}
.key-validate-icon{position:absolute;right:14px;top:50%;transform:translateY(-50%);font-size:16px}
.key-popup-plans{display:flex;flex-direction:column;gap:8px;margin-bottom:20px}
.key-plan-row{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;background:rgba(255,255,255,0.03);border:0.5px solid rgba(200,146,42,0.12);border-radius:8px}
.key-plan-name{font-size:13px;color:rgba(255,255,255,0.65)}
.key-plan-price{font-size:12px;color:var(--gold,#c8922a)}
.key-wa-link{display:flex;align-items:center;justify-content:center;gap:8px;padding:11px;background:#25D366;border-radius:8px;color:#fff;font-size:13px;font-weight:600;text-decoration:none;transition:all .2s;margin-bottom:8px}
.key-wa-link:hover{background:#20bd5a;transform:translateY(-1px)}
.key-divider{display:flex;align-items:center;gap:10px;margin:14px 0;color:rgba(255,255,255,0.2);font-size:11px}
.key-divider::before,.key-divider::after{content:'';flex:1;height:1px;background:rgba(255,255,255,0.08)}

/* PLAN LOCK OVERLAY */
.plan-lock{position:relative}
.plan-lock-overlay{position:absolute;inset:0;background:rgba(14,11,8,0.75);border-radius:inherit;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;z-index:10;backdrop-filter:blur(2px)}
.plan-lock-icon{font-size:24px}
.plan-lock-text{font-size:12px;color:rgba(255,255,255,0.6);text-align:center}
.plan-lock-btn{padding:8px 18px;background:var(--gold,#c8922a);color:var(--ink,#1a1410);border:none;border-radius:6px;font-size:12px;font-weight:600;cursor:pointer;font-family:inherit}

/* WATERMARK on export */
.export-watermark{position:absolute;bottom:6px;right:8px;font-size:7px;color:rgba(255,255,255,0.3);letter-spacing:.08em;z-index:20;pointer-events:none}

/* BARCODE */
.barcode-canvas-wrap{display:flex;flex-direction:column;align-items:center;background:white;padding:4px 6px;border-radius:2px}
.barcode-canvas-wrap canvas{display:block}
.barcode-canvas-wrap .barcode-num{font-size:6px;color:#000;font-family:monospace;text-align:center;margin-top:1px}

/* QR CODE */
.qr-code-wrap{display:flex;flex-direction:column;align-items:center;gap:4px}
.qr-code-wrap canvas{border-radius:4px}
.qr-label{font-size:7px;color:rgba(240,208,128,0.5);text-align:center;letter-spacing:.06em}

/* MOCKUP UPLOAD ZONE */
.mockup-upload-zone{border:1.5px dashed rgba(200,146,42,0.35);border-radius:12px;padding:32px;text-align:center;cursor:pointer;transition:all .2s;background:rgba(200,146,42,0.02)}
.mockup-upload-zone:hover{border-color:var(--gold,#c8922a);background:rgba(200,146,42,0.06)}
.mockup-types-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
.mockup-type-chip{padding:6px 14px;border:0.5px solid var(--border-clr,rgba(200,146,42,0.2));border-radius:16px;font-size:11px;color:var(--muted,#8a7d6b);cursor:pointer;transition:all .15s}
.mockup-type-chip.active{background:var(--ink,#1a1410);color:var(--gold-light,#f0d080);border-color:var(--ink,#1a1410)}

/* AI GENERATION PROGRESS */
.ai-progress-bar{height:3px;background:rgba(200,146,42,0.15);border-radius:2px;overflow:hidden;margin-top:8px;display:none}
.ai-progress-bar.active{display:block}
.ai-progress-fill{height:100%;background:linear-gradient(90deg,var(--gold,#c8922a),var(--gold-light,#f0d080));border-radius:2px;width:0%;transition:width .4s ease}

/* EXPORT HD indicator */
.export-hd-badge{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;background:rgba(200,146,42,0.12);border:0.5px solid rgba(200,146,42,0.3);border-radius:12px;font-size:10px;color:var(--gold,#c8922a);margin-left:8px}
.export-hd-badge::before{content:'';width:5px;height:5px;background:var(--gold,#c8922a);border-radius:50%;animation:pulse 2s infinite}

/* PLAN INDICATOR in topbar */
.plan-indicator{padding:4px 10px;border-radius:12px;font-size:10px;font-weight:500;letter-spacing:.06em}
.plan-indicator.free{background:rgba(138,125,107,0.15);color:var(--muted,#8a7d6b)}
.plan-indicator.pro{background:rgba(200,146,42,0.15);color:var(--gold,#c8922a)}
.plan-indicator.agency{background:rgba(100,150,200,0.15);color:#90b4e0}

/* MOCKUP PROFESSIONAL STYLES */
.mock-scene-wrapper{position:relative;width:100%;height:100%}
.mock-scene-bg{position:absolute;inset:0;border-radius:inherit}
.mock-hd-label{position:absolute;top:8px;right:8px;font-size:8px;background:rgba(200,146,42,0.2);color:var(--gold,#c8922a);padding:2px 6px;border-radius:4px;letter-spacing:.08em}

/* 4e de couverture controls */
.back-author-controls{background:rgba(200,146,42,0.04);border:0.5px solid rgba(200,146,42,0.15);border-radius:8px;padding:12px;margin-bottom:12px}
.back-author-control-row{display:flex;align-items:center;justify-content:space-between;padding:6px 0;border-bottom:0.5px solid rgba(200,146,42,0.08)}
.back-author-control-row:last-child{border-bottom:none}
.bac-label{font-size:12px;color:var(--ink,#1a1410)}
.bac-hint{font-size:10px;color:var(--muted,#8a7d6b);margin-top:1px}

/* ISBN + QR inputs */
.isbn-qr-grid{display:grid;grid-template-columns:1fr;gap:10px}
.isbn-preview{margin-top:8px;display:flex;gap:12px;align-items:flex-start}