/* Скетчбук. Тёмная тема по умолчанию; светлая — [data-theme="light"] на <html>.
   Раскладка: галерея-полка с книгами в реальных пропорциях → разворот блокнота на всю сцену. */
:root {
  --bg: #1E1F1C;
  --bg-2: #262724;
  --surface: #2C2D2A;
  --fg: #ECE8DF;
  --muted: #9C988D;
  --line: rgba(236, 232, 223, .10);
  --accent: #A9B79B;
  --accent-fg: #1E1F1C;
  --shadow: rgba(0, 0, 0, .55);
  --vignette: radial-gradient(120% 90% at 50% 30%, #2A2B27 0%, #1E1F1C 60%, #171815 100%);
  --gutter: .42;

  --ui: "Onest", "Segoe UI Variable", "Segoe UI", Roboto, system-ui, sans-serif;
  --hand: "Caveat", "Segoe Print", cursive;

  --r: 12px;
  --ease: cubic-bezier(.2, .7, .2, 1);

  color-scheme: dark;
}
:root[data-theme="light"] {
  --bg: #ECE8E0;
  --bg-2: #E3DED4;
  --surface: #F6F3ED;
  --fg: #2A2925;
  --muted: #7B776D;
  --line: rgba(42, 41, 37, .12);
  --accent: #6E7E5E;
  --accent-fg: #F6F3ED;
  --shadow: rgba(60, 50, 35, .35);
  --vignette: radial-gradient(120% 90% at 50% 30%, #F3F0EA 0%, #ECE8E0 60%, #E2DDD2 100%);
  --gutter: .22;
  color-scheme: light;
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  background: var(--bg); background-image: var(--vignette); color: var(--fg);
  font: 15px/1.45 var(--ui); -webkit-font-smoothing: antialiased;
  overflow: hidden; overscroll-behavior: none;
  -webkit-tap-highlight-color: transparent;
}
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
[hidden] { display: none !important; }

.view { position: fixed; inset: 0; display: grid; grid-template-rows: auto 1fr auto;
  padding: env(safe-area-inset-top, 0) max(20px, env(safe-area-inset-right, 0)) env(safe-area-inset-bottom, 0) max(20px, env(safe-area-inset-left, 0)); }

/* ---------- верхняя панель ---------- */
.bar { display: flex; align-items: center; gap: 10px; min-height: 64px; }
.bar .spacer { flex: 1; }
.bar h1 { margin: 0; font-weight: 400; font-size: clamp(26px, 3.4vw, 36px); letter-spacing: -.01em; }
.bar .title { position: absolute; left: 50%; transform: translateX(-50%); font-weight: 500; font-size: 15px;
  max-width: 40vw; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.icon-btn { width: 40px; height: 40px; border-radius: 50%; border: 0; background: transparent; display: grid; place-items: center; color: var(--fg); }
.icon-btn:hover { background: var(--line); }
.icon-btn svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.icon-btn.accent { background: var(--accent); color: var(--accent-fg); width: 44px; height: 44px; }
.back { display: inline-flex; align-items: center; gap: 6px; border: 0; background: none; padding: 8px 10px 8px 2px; color: var(--fg); font-size: 14.5px; border-radius: 10px; }
.back:hover { background: var(--line); }
.back svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.8; }

.chip-toggle { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--line); background: transparent;
  border-radius: 999px; padding: 7px 14px 7px 10px; font-size: 13.5px; color: var(--fg); transition: background .2s, border-color .2s; }
.chip-toggle .dot { width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid var(--muted); transition: all .2s; }
.chip-toggle[aria-pressed="true"] { background: var(--accent); color: var(--accent-fg); border-color: transparent; }
.chip-toggle[aria-pressed="true"] .dot { border-color: var(--accent-fg); background: var(--accent-fg); box-shadow: inset 0 0 0 3px var(--accent); }

/* ---------- галерея ---------- */
.shelf { display: flex; align-items: flex-end; gap: clamp(32px, 5vw, 72px); overflow-x: auto; overflow-y: hidden;
  padding: 24px 6vw 28px; scroll-snap-type: x proximity; scrollbar-width: none; align-self: center; min-height: 0; }
.shelf::-webkit-scrollbar { display: none; }
.shelf-item { flex: none; display: grid; justify-items: center; gap: 18px; scroll-snap-align: center; border: 0; background: none; padding: 0; color: var(--fg); }
.shelf-item .book { transition: transform .45s var(--ease); }
.shelf-item:hover .book, .shelf-item:focus-visible .book { transform: translateY(-8px) rotate(-.6deg); }
.shelf-item:focus-visible { outline: none; }
.caption { display: grid; justify-items: center; gap: 2px; }
.caption b { font-weight: 500; font-size: 15px; }
.caption small { color: var(--muted); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.shelf-new { align-self: center; flex: none; width: 150px; height: 210px; border: 1.5px dashed var(--line); border-radius: 6px 12px 12px 6px;
  display: grid; place-items: center; color: var(--muted); background: transparent; font-size: 14px; }
.shelf-new:hover { color: var(--fg); border-color: var(--muted); }
.gallery-foot { text-align: center; color: var(--muted); font-size: 12.5px; padding-bottom: 14px; }

/* ---------- книга (обложка) ---------- */
/* Форма, фактура и свет — из белой фото-обложки (--mock): она же маска силуэта и слой multiply над цветом. */
.book { --c: #5E6B4E; --w: 160px; --h: 228px; --r: calc(var(--w) * .07); position: relative; width: var(--w); height: var(--h); flex: none; }
.book-shadow { position: absolute; inset: 1.5% 1% 0 2%; border-radius: var(--r); pointer-events: none;
  box-shadow: 0 calc(var(--h) * .10) calc(var(--h) * .12) calc(var(--h) * -.06) var(--shadow), 0 3px 8px -3px rgba(0,0,0,.45); }
.book-board { position: absolute; inset: 0; overflow: hidden; isolation: isolate; border-radius: calc(var(--w) * .012) calc(var(--w) * .07) calc(var(--w) * .07) calc(var(--w) * .012);
  -webkit-mask: var(--mock) center / 100% 100% no-repeat; mask: var(--mock) center / 100% 100% no-repeat; }
.book-fill { position: absolute; inset: 0; background: var(--c); }
.book-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.book-mock { position: absolute; inset: 0; background: var(--mock) center / 100% 100% no-repeat; mix-blend-mode: multiply; pointer-events: none; }
.book-light { position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(125deg, rgba(255,255,255,.12) 0%, rgba(255,255,255,0) 40%, rgba(0,0,0,0) 65%, rgba(0,0,0,.12) 100%); }
.book-label { position: absolute; left: 54%; top: 17%; width: 46%; aspect-ratio: 4 / 3; transform: translateX(-50%);
  background: #F4EFE4; padding: 3.5%; border-radius: 1px; box-shadow: 0 1px 2px rgba(0,0,0,.35), inset 0 0 0 1px rgba(0,0,0,.05); }
.shape-land .book-label, .shape-square .book-label { width: 38%; }
.book-label img { width: 100%; height: 100%; object-fit: cover; display: block; }
.book-emblem { position: absolute; left: 54%; top: 46%; transform: translate(-50%, -50%); font-size: calc(min(var(--w), var(--h)) * .26); line-height: 1;
  color: color-mix(in srgb, var(--c), #000 24%);
  text-shadow: 0 1px 0 color-mix(in srgb, var(--c), #fff 22%), 0 -1px 0 color-mix(in srgb, var(--c), #000 40%);
  font-family: "Segoe UI Symbol", "Noto Sans Symbols 2", Georgia, serif; }
.book-title { position: absolute; left: 14%; right: 8%; bottom: 9%; font-size: calc(var(--w) * .075); letter-spacing: .14em; text-transform: uppercase;
  color: color-mix(in srgb, var(--c), #000 35%); text-shadow: 0 1px 0 color-mix(in srgb, var(--c), #fff 18%); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.book-band { position: absolute; top: 0; bottom: 0; right: 9%; width: max(4px, 3%);
  background: linear-gradient(90deg, #121212, #3a3a3a 45%, #161616); box-shadow: -1px 0 2px rgba(0,0,0,.35), 1px 0 2px rgba(0,0,0,.25); }
.side-back .book-band { right: auto; left: 9%; }
.side-back .book-board { border-radius: calc(var(--w) * .07) calc(var(--w) * .012) calc(var(--w) * .012) calc(var(--w) * .07); }
.book-ribbon { position: absolute; left: 30%; top: calc(100% - 4px); width: max(5px, 3%); height: calc(var(--h) * .11);
  background: linear-gradient(90deg, color-mix(in srgb, var(--rib), #000 25%), var(--rib) 50%, color-mix(in srgb, var(--rib), #000 25%));
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 86%, 0 100%); z-index: -1; }

/* форзац (внутренняя сторона обложки) */
.side-inside-left .book-board { border-radius: var(--r) 0 0 var(--r); -webkit-mask: none; mask: none; }
.side-inside-right .book-board { border-radius: 0 var(--r) var(--r) 0; -webkit-mask: none; mask: none; }
.book-endpaper { position: absolute; inset: 2.4%; background-color: #EEE7D7; background-image: var(--grain);
  box-shadow: 0 0 0 .5px rgba(0,0,0,.18), inset 0 0 24px rgba(120,100,70,.10); }
.side-inside-left .book-endpaper { right: 0; border-radius: calc(var(--r) * .6) 0 0 calc(var(--r) * .6); }
.side-inside-right .book-endpaper { left: 0; border-radius: 0 calc(var(--r) * .6) calc(var(--r) * .6) 0; }

/* ---------- разворот (3D) ---------- */
.stage { position: relative; min-height: 0; }
.flip-host { position: absolute; inset: 0; touch-action: none; user-select: none; -webkit-user-select: none; }
.book3d { display: block; width: 100%; height: 100%; touch-action: none; outline: none; }

/* ---------- низ разворота ---------- */
.book-foot { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; min-height: 84px; padding-bottom: 10px; }
.thumbs { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 6px 4px; max-width: min(70vw, 760px);
  touch-action: pan-x; overscroll-behavior-x: contain; cursor: grab;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 24px, #000 calc(100% - 24px), transparent);
  mask-image: linear-gradient(90deg, transparent, #000 24px, #000 calc(100% - 24px), transparent); }
.thumbs.dragging { cursor: grabbing; }
.thumbs.dragging .thumb { pointer-events: none; }
.thumbs::-webkit-scrollbar { display: none; }
.thumb { flex: none; display: flex; height: 52px; border: 0; padding: 0; background: none; border-radius: 3px; opacity: .7; transition: opacity .2s, transform .2s; }
.thumb:hover { opacity: 1; }
.thumb[aria-current="true"] { opacity: 1; outline: 2px solid var(--accent); outline-offset: 3px; }
.thumb .tp { height: 100%; position: relative; overflow: hidden; background: var(--paper); box-shadow: 0 1px 3px rgba(0,0,0,.3); }
.thumb .tp img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.thumb .tp.cover { background: var(--c); }
.add-pages { flex: none; width: 52px; height: 52px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); color: var(--fg); display: grid; place-items: center; font-size: 22px; font-weight: 300; }
.counter { justify-self: end; color: var(--muted); font-size: 13px; font-variant-numeric: tabular-nums; }
.foot-left { justify-self: start; }

/* ---------- окна ---------- */
dialog { border: 0; padding: 0; background: var(--surface); color: var(--fg); border-radius: 18px; width: min(560px, calc(100vw - 32px));
  max-height: calc(100dvh - 40px); box-shadow: 0 40px 80px -20px rgba(0,0,0,.6); }
dialog::backdrop { background: rgba(10, 10, 9, .55); backdrop-filter: blur(3px); }
.dlg { display: grid; gap: 18px; padding: 22px 24px 20px; }
.dlg h2 { margin: 0; font-size: 19px; font-weight: 500; }
.dlg-cols { display: grid; grid-template-columns: auto 1fr; gap: 22px; align-items: start; }
.dlg-preview { display: grid; place-items: center; width: 170px; min-height: 230px; padding: 10px 0 24px; }
.field { display: grid; gap: 7px; }
.field > span { font-size: 12.5px; color: var(--muted); letter-spacing: .02em; }
.field input[type="text"], .field select { width: 100%; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--bg-2); }
.seg { display: flex; flex-wrap: wrap; gap: 6px; }
.seg button { border: 1px solid var(--line); background: transparent; border-radius: 9px; padding: 6px 11px; font-size: 13.5px; }
.seg button[aria-pressed="true"] { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.swatches { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.swatch { width: 28px; height: 28px; border-radius: 50%; border: 0; background: var(--sw); box-shadow: inset 0 0 0 1px rgba(0,0,0,.15); }
.swatch[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--fg); }
.swatch.none { background: transparent; box-shadow: inset 0 0 0 1.5px var(--muted); position: relative; }
.swatch.none::after { content: ""; position: absolute; left: 50%; top: 4px; bottom: 4px; width: 1.5px; background: var(--muted); transform: rotate(45deg); }
.swatch-pick { width: 28px; height: 28px; border-radius: 50%; overflow: hidden; border: 0; padding: 0; position: relative; background: conic-gradient(red, yellow, lime, cyan, blue, magenta, red); }
.swatch-pick input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.dlg-actions { display: flex; gap: 10px; justify-content: flex-end; align-items: center; }
.dlg-actions .danger { margin-right: auto; color: #D97B6C; }
.btn { border: 1px solid var(--line); background: transparent; border-radius: 11px; padding: 9px 16px; font-size: 14px; }
.btn.primary { background: var(--accent); color: var(--accent-fg); border-color: transparent; font-weight: 500; }
.btn.danger { border-color: transparent; }
.check { display: flex; align-items: center; gap: 10px; font-size: 14px; }
.file-btn { position: relative; overflow: hidden; }
.file-btn input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

.menu { position: fixed; z-index: 50; min-width: 220px; background: var(--surface); border-radius: 14px; padding: 6px; box-shadow: 0 20px 50px -10px rgba(0,0,0,.55); border: 1px solid var(--line); }
.menu button { display: flex; width: 100%; text-align: left; border: 0; background: none; padding: 10px 12px; border-radius: 9px; font-size: 14px; gap: 10px; align-items: center; }
.menu button:hover { background: var(--line); }
.menu label.menu-file { display: flex; padding: 10px 12px; border-radius: 9px; font-size: 14px; cursor: pointer; position: relative; }
.menu label.menu-file:hover { background: var(--line); }
.menu label.menu-file input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; }
.menu hr { border: 0; border-top: 1px solid var(--line); margin: 6px 4px; }
.menu .danger { color: #D97B6C; }

.toast { position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom, 0)); transform: translateX(-50%) translateY(20px); opacity: 0;
  background: var(--fg); color: var(--bg); padding: 10px 16px; border-radius: 12px; font-size: 14px; transition: all .3s var(--ease); pointer-events: none; z-index: 60; }
.toast.on { opacity: 1; transform: translateX(-50%); }

@media (max-width: 640px) {
  .dlg-cols { grid-template-columns: 1fr; }
  .dlg-preview { width: 100%; min-height: 200px; }
  .book-foot { grid-template-columns: 1fr; justify-items: center; }
  .counter, .foot-left { justify-self: center; }
  .bar .title { display: none; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }