/* ══ Studio shell ══ */
.studio-toolbar { display: flex; flex-wrap: wrap; gap: .6rem; }
.studio-meta {
  display: grid; grid-template-columns: 2fr 1.4fr 1fr 1fr; gap: 1rem;
  padding: 1.1rem; margin-bottom: 1.35rem;
}
.studio-meta:hover { transform: none; box-shadow: var(--shadow-sm); }
.studio-grid { display: grid; grid-template-columns: 265px minmax(0, 1.6fr) 300px; gap: 1.35rem; align-items: start; }
.panel { padding: 1rem; }
.panel:hover { transform: none; }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: .6rem; padding-bottom: .7rem; margin-bottom: .9rem; border-bottom: 2px dashed var(--border); }
.panel-head h3 { display: flex; align-items: center; gap: .45rem; font-size: .98rem; }
.panel-head i { width: 18px; height: 18px; }
.panel-foot { display: flex; flex-direction: column; gap: .5rem; margin-top: .9rem; padding-top: .9rem; border-top: 2px dashed var(--border); }

/* ══ Page list ══ */
.page-list { display: flex; flex-direction: column; gap: .55rem; max-height: 460px; overflow-y: auto; padding-inline-end: .2rem; }
.page-item {
  display: flex; align-items: center; gap: .6rem; padding: .5rem; cursor: pointer;
  background: var(--surface-2); border: 2px solid var(--border); border-radius: var(--radius-sm);
  transition: transform .14s var(--ease), background .16s var(--ease);
}
.page-item:hover { transform: translateY(-2px); background: var(--bg-soft); }
.page-item.active { background: var(--bg-soft); box-shadow: var(--shadow-sm); transform: translate(-1px, -1px); }
.page-thumb {
  width: 40px; height: 52px; flex-shrink: 0; border: 2px solid var(--border);
  border-radius: 6px; background: #FFF; overflow: hidden; display: grid; place-items: center;
}
.page-thumb svg { width: 100%; height: 100%; }
.page-item .page-info { flex: 1; min-width: 0; }
.page-item .page-info b { display: block; font-size: .82rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.page-item .page-info span { font-size: .68rem; color: var(--muted); }
.page-actions { display: flex; flex-direction: column; gap: .15rem; }
.mini-btn {
  width: 24px; height: 22px; display: grid; place-items: center; cursor: pointer;
  background: transparent; color: inherit; border: none; border-radius: 4px;
}
.mini-btn:hover { background: var(--surface); }
.mini-btn i { width: 14px; height: 14px; }
.mini-btn.danger:hover { background: var(--danger); color: #FFF; }

/* ══ Palette ══ */
.palette-block { margin-bottom: 1rem; }
.palette-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem; margin-bottom: .6rem; }
.palette-head .label { display: flex; align-items: center; gap: .4rem; font-size: .8rem; font-weight: 600; color: var(--muted); }
.palette-head .label i { width: 16px; height: 16px; }
.palette-tools { display: flex; gap: .45rem; }
.palette { display: flex; flex-wrap: wrap; gap: .45rem; }
.swatch {
  width: 36px; height: 36px; border-radius: 50%; cursor: pointer;
  border: var(--border-w) solid var(--border); box-shadow: var(--shadow-sm);
  transition: transform .14s var(--ease), box-shadow .14s var(--ease);
  position: relative;
}
.swatch:hover { transform: translateY(-3px) scale(1.06); }
.swatch.active { transform: scale(1.14); box-shadow: 0 0 0 3px var(--bg), 0 0 0 6px var(--ink); }
.swatch.eraser { background: repeating-linear-gradient(45deg, #FFF 0 6px, #EEE 6px 12px); display: grid; place-items: center; }
.swatch.eraser i { width: 16px; height: 16px; color: #111827; }

/* ══ Editor ══ */
.editor-tools { display: flex; gap: .4rem; }
.editor-body { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 1.2rem; }
.canvas-wrap { display: flex; flex-direction: column; gap: .6rem; align-items: center; }
.page-canvas {
  width: 100%; aspect-ratio: 1 / 1.414; background: #FFFFFF; color: #111827;
  border: var(--border-w) solid var(--border); border-radius: 10px;
  box-shadow: var(--shadow-sm); overflow: hidden; position: relative;
  display: flex; flex-direction: column;
}
.page-canvas[data-size="square"] { aspect-ratio: 1 / 1; }
.page-canvas[data-size="a5"] { aspect-ratio: 1 / 1.414; max-width: 78%; }
.pc-head { padding: 6% 8% 0; text-align: center; }
.pc-head h4 { font-family: var(--font-display); font-size: clamp(.95rem, 2.1vw, 1.5rem); line-height: 1.3; }
.pc-head span { font-size: .72rem; color: #6B7280; }
.pc-art { flex: 1; display: grid; place-items: center; padding: 2% 8%; min-height: 0; }
.pc-art svg { width: 100%; height: 100%; max-height: 100%; }
.pc-text { padding: 0 9% 6%; font-size: clamp(.68rem, 1.5vw, .95rem); line-height: 1.85; text-align: center; color: #1F2937; }
.pc-foot { position: absolute; bottom: 3%; inset-inline-start: 0; width: 100%; text-align: center; font-size: .6rem; color: #9CA3AF; }
.page-canvas .seg { cursor: crosshair; transition: fill .16s var(--ease), opacity .16s var(--ease); }
.page-canvas .seg:hover { opacity: .78; }
.hint { display: flex; align-items: center; gap: .4rem; font-size: .75rem; color: var(--muted); }
.hint i { width: 15px; height: 15px; }
.editor-side { display: flex; flex-direction: column; gap: .85rem; }

/* ══ Art picker ══ */
.art-picker { display: grid; grid-template-columns: repeat(auto-fill, minmax(46px, 1fr)); gap: .4rem; max-height: 168px; overflow-y: auto; padding: .3rem; background: var(--surface-2); border: 2px solid var(--border); border-radius: var(--radius-sm); }
.art-opt {
  aspect-ratio: 1 / 1; display: grid; place-items: center; cursor: pointer;
  background: var(--surface); border: 2px solid var(--border); border-radius: 8px;
  transition: transform .14s var(--ease), box-shadow .14s var(--ease);
}
.art-opt svg { width: 82%; height: 82%; }
.art-opt:hover { transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.art-opt.active { background: var(--bg-soft); box-shadow: 0 0 0 3px var(--ink); }

/* ══ Preview spread ══ */
.preview-panel { display: flex; flex-direction: column; gap: .85rem; }
.spread { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.spread-pane {
  aspect-ratio: 1 / 1.414; background: #FFFFFF; color: #111827; overflow: hidden;
  border: 2px solid var(--border); border-radius: 6px; display: flex; flex-direction: column;
  box-shadow: var(--shadow-sm);
}
.spread-pane.blank { background: repeating-linear-gradient(45deg, var(--surface-2) 0 8px, var(--surface) 8px 16px); }
.spread-pane .sp-head { padding: 8% 9% 0; text-align: center; font-family: var(--font-display); font-size: .62rem; line-height: 1.35; }
.spread-pane .sp-art { flex: 1; display: grid; place-items: center; padding: 3% 9%; min-height: 0; }
.spread-pane .sp-art svg { width: 100%; height: 100%; }
.spread-pane .sp-text { padding: 0 10% 9%; font-size: .5rem; line-height: 1.8; text-align: center; color: #374151; }
.spread-pane .sp-num { text-align: center; font-size: .5rem; color: #9CA3AF; padding-bottom: 3%; }
.preview-controls { display: flex; align-items: center; gap: .6rem; }
.progress { flex: 1; height: 10px; background: var(--surface-2); border: 2px solid var(--border); border-radius: 999px; overflow: hidden; }
.progress span { display: block; height: 100%; width: 0; background: var(--accent); transition: width .25s var(--ease); }
.preview-panel .icon-btn { width: 38px; height: 38px; }
.skeleton-note { font-size: .78rem; color: var(--muted); text-align: center; }
.skeleton-note.show { display: block; }

/* ══ Saved library ══ */
.lib-list { display: flex; flex-direction: column; gap: .6rem; }
.lib-item {
  display: flex; align-items: center; gap: .7rem; padding: .6rem .7rem;
  background: var(--surface-2); border: 2px solid var(--border); border-radius: var(--radius-sm);
}
.lib-item .lib-info { flex: 1; min-width: 0; }
.lib-item b { display: block; font-size: .88rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lib-item span { font-size: .72rem; color: var(--muted); }
.lib-empty { text-align: center; padding: 1.6rem .8rem; font-size: .86rem; color: var(--muted); border: 2px dashed var(--border); border-radius: var(--radius-sm); }

.skeleton-note:empty { display: none; }

/* ══ Studio responsive ══ */
@media (max-width: 1150px) {
  .studio-grid { grid-template-columns: 240px minmax(0, 1fr); }
  .preview-panel { grid-column: 1 / -1; }
  .spread { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
}
@media (max-width: 820px) {
  .studio-grid { grid-template-columns: 1fr; }
  .studio-meta { grid-template-columns: 1fr 1fr; }
  .editor-body { grid-template-columns: 1fr; }
  .page-canvas { max-width: 460px; }
  .page-list { max-height: 300px; }
}
@media (max-width: 520px) {
  .studio-meta { grid-template-columns: 1fr; }
  .section-head { flex-direction: column; align-items: stretch; }
  .studio-toolbar .btn { flex: 1; }
}

/* ══ أثر «نمط الغلاف» على الصفحة ══ */
body[data-book-style="bold"] .page-canvas { box-shadow: 8px 8px 0 var(--ink); }
body[data-book-style="bold"] .page-canvas .pc-head h4 { font-weight: 800; letter-spacing: -.02em; }
body[data-book-style="calm"] .page-canvas { background: #FDFCF8; }
body[data-book-style="calm"] .page-canvas .pc-head h4 { font-weight: 500; letter-spacing: 0; }
body[data-book-style="calm"] .page-canvas .pc-text { color: #4B5563; }
body[data-book-style="playful"] .page-canvas .pc-head h4 { transform: rotate(-.6deg); }
body[data-book-style="playful"] .page-canvas { border-color: var(--accent-2); }