:root {
  --chrome: #ffffff;
  --desk: #eeedea;
  --ink: #1f2328;
  --muted: #676c74;
  --line: #e2e1dd;
  --hover: #f3f2ef;
  --accent: #2f3e4e;
  --accent-ink: #ffffff;
  --sun: #ffc93c;
  --danger: #c62f3f;
  --cover: #2f3e4e;
  --shadow: 0 10px 30px -8px rgba(20, 24, 30, 0.25);
  --radius: 12px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --chrome: #1c1e22;
    --desk: #141518;
    --ink: #edeef0;
    --muted: #9aa0a8;
    --line: #2e3238;
    --hover: #25282d;
    --accent: #a9bccf;
    --accent-ink: #1c1e22;
    --danger: #ff7b87;
    --shadow: 0 10px 30px -8px rgba(0, 0, 0, 0.6);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --chrome: #1c1e22; --desk: #141518; --ink: #edeef0; --muted: #9aa0a8; --line: #2e3238;
  --hover: #25282d; --accent: #a9bccf; --accent-ink: #1c1e22; --danger: #ff7b87; color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; overflow: hidden; }
body {
  background: var(--desk);
  color: var(--ink);
  font: 14px/1.4 Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  overscroll-behavior: none;
  -webkit-tap-highlight-color: transparent;
}
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
i[data-icon] { display: inline-flex; width: 20px; height: 20px; flex: none; }
i[data-icon] svg { width: 100%; height: 100%; }

#app { display: grid; grid-template-rows: auto 1fr auto; height: 100dvh; height: 100vh; }
@supports (height: 100dvh) { #app { height: 100dvh; } }

/* ---------- Toolbar ---------- */
.toolbar {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px; padding-top: max(8px, env(safe-area-inset-top));
  background: var(--chrome); border-bottom: 1px solid var(--line);
  overflow-x: auto; scrollbar-width: none;
}
.toolbar::-webkit-scrollbar { display: none; }
.spacer { flex: 1; }
.binder-title {
  display: flex; align-items: center; gap: 8px; flex: none;
  border: 0; background: transparent; padding: 6px 10px 6px 8px; border-radius: 10px;
  font-family: Poppins, Inter, sans-serif; font-weight: 700; font-size: 15px; max-width: 220px;
}
.binder-title span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.binder-title i { width: 16px; height: 16px; color: var(--muted); }
.cover-btn { color: var(--cover); }
.binder-title:hover { background: var(--hover); }

.tool-group { display: flex; gap: 2px; padding: 3px; background: var(--hover); border-radius: 12px; flex: none; }
.tool, .icon-btn {
  display: inline-grid; place-items: center; width: 38px; height: 38px; flex: none;
  border: 0; border-radius: 10px; background: transparent; color: var(--ink);
}
.icon-btn.sm { width: 30px; height: 30px; }
.tool:hover, .icon-btn:hover { background: var(--line); }
.tool[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); }
.icon-btn:disabled { opacity: 0.35; cursor: default; background: transparent; }

.swatches { display: flex; gap: 6px; align-items: center; flex: none; }
.swatch {
  width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--chrome);
  box-shadow: 0 0 0 1px var(--line); padding: 0; flex: none;
}
.swatch[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--accent); }
.swatch.custom { position: relative; overflow: hidden; background: conic-gradient(#e0453a, #ffc93c, #2eb872, #2563eb, #5b2e90, #e0453a); }
.swatch.custom input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.size { display: flex; align-items: center; flex: none; }
.size input { width: 90px; accent-color: var(--accent); }

.btn {
  display: inline-flex; align-items: center; gap: 6px; flex: none;
  height: 38px; padding: 0 14px; border-radius: 10px; border: 1px solid transparent;
  font-weight: 600; white-space: nowrap;
}
.btn.sm { height: 32px; padding: 0 10px; font-size: 13px; }
.btn.sm i[data-icon] { width: 16px; height: 16px; }
.btn.primary { background: var(--accent); color: var(--accent-ink); }
.btn.primary:disabled { opacity: 0.45; cursor: default; }
.btn.ghost { background: transparent; border-color: var(--line); }
.btn.ghost:hover { background: var(--hover); }
.btn.danger { background: transparent; border-color: var(--danger); color: var(--danger); }

/* ---------- Workspace ---------- */
.workspace { display: grid; grid-template-columns: auto minmax(0, 1fr); min-height: 0; position: relative; }

.pages-panel {
  width: 170px; display: flex; flex-direction: column; min-height: 0;
  background: var(--chrome); border-right: 1px solid var(--line);
}
.pages-panel.hidden { display: none; }
.panel-head { display: flex; align-items: center; gap: 8px; padding: 10px 10px 6px 12px; }
.panel-head strong { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: Poppins, sans-serif; }
.panel-dot { width: 10px; height: 10px; border-radius: 3px; flex: none; }
#btnPanelClose { display: none; }
.page-list { list-style: none; margin: 0; padding: 6px 12px; overflow-y: auto; flex: 1; display: flex; flex-direction: column; gap: 12px; }
.page-thumb { display: flex; flex-direction: column; align-items: center; gap: 4px; border: 0; background: none; padding: 0; width: 100%; }
.page-thumb img {
  width: 100%; background: #fff; border-radius: 4px; border: 1px solid var(--line);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08); display: block; min-height: 40px;
}
.page-thumb span { font-size: 12px; color: var(--muted); }
.page-thumb[aria-current="true"] img { outline: 3px solid var(--accent); outline-offset: 1px; }
.page-thumb[aria-current="true"] span { color: var(--accent); font-weight: 600; }
.add-page-tile {
  margin: 8px 12px 12px; display: flex; align-items: center; justify-content: center; gap: 6px;
  height: 38px; border: 1.5px dashed var(--line); border-radius: 10px; background: none; color: var(--muted); font-weight: 600;
}
.add-page-tile:hover { border-color: var(--accent); color: var(--accent); }

.workspace { background: var(--desk); }
.stage { overflow: auto; min-width: 0; position: relative; touch-action: none; }
.stage.native-scroll { touch-action: pan-x pan-y; }
/* The open planner page: spiral binding on the left, tabs attached to the right edge */
.page-wrap {
  position: relative; left: -10px; margin: 32px auto 48px; background: #fff;
  border-radius: 4px 10px 10px 4px; transform-origin: 0 0; isolation: isolate;
}
.page-wrap canvas {
  display: block; width: 100%; height: 100%; border-radius: 4px 10px 10px 4px;
  box-shadow:
    0 0 0 1px rgba(60,40,30,0.06), 0 1px 1px rgba(60,40,30,0.08), 0 3px 6px rgba(60,40,30,0.08),
    0 14px 28px -8px rgba(60,40,30,0.22), 0 34px 60px -24px rgba(60,40,30,0.3);
}
.paper-grain {
  position: absolute; inset: 0; pointer-events: none; border-radius: 4px 10px 10px 4px;
  background: url(textures/paper.svg) 0 0 / 300px; mix-blend-mode: multiply; opacity: 0.35;
}
.page-sheen { /* soft window light across the sheet */
  position: absolute; inset: 0; pointer-events: none; border-radius: 4px 10px 10px 4px;
  background: linear-gradient(90deg, rgba(0,0,0,0.06), transparent 6%, transparent 85%, rgba(0,0,0,0.035)),
              radial-gradient(ellipse 90% 60% at 40% 10%, rgba(255,255,255,0.12), transparent 70%);
}
.page-coil {
  position: absolute; left: -14px; top: 10px; bottom: 10px; width: 44px; pointer-events: none;
  background: url(textures/coil-silver.svg) repeat-y 0 0 / 44px 24px;
}
:root[data-binding="gold"] .page-coil { background-image: url(textures/coil-gold.svg); }
:root[data-binding="rose"] .page-coil { background-image: url(textures/coil-rose.svg); }
:root[data-binding="black"] .page-coil { background-image: url(textures/coil-black.svg); }
.stage[data-tool="pen"] canvas, .stage[data-tool="highlighter"] canvas { cursor: crosshair; }
.stage[data-tool="eraser"] canvas { cursor: cell; }
.stage[data-tool="text"] canvas { cursor: text; }
.stage[data-tool="hand"] canvas { cursor: grab; }
.text-editor {
  position: absolute; margin: 0; padding: 0; border: 1.5px dashed var(--accent); outline: none;
  background: rgba(255, 255, 255, 0.6); resize: none; overflow: hidden; line-height: 1.3;
  font-family: Inter, system-ui, sans-serif; min-height: 1.3em; border-radius: 2px;
}

.text-grip {
  position: absolute; z-index: 2; width: 24px; height: 24px; border-radius: 7px; display: grid; place-items: center;
  background: var(--accent); color: var(--accent-ink); cursor: move; touch-action: none; box-shadow: 0 2px 6px rgba(0,0,0,0.25);
}
.text-grip svg { width: 15px; height: 15px; }
.text-resize { position: absolute; z-index: 2; width: 14px; display: flex; align-items: center; justify-content: center; cursor: ew-resize; touch-action: none; }
.text-resize::after { content: ""; width: 5px; height: 26px; max-height: 90%; min-height: 14px; border-radius: 3px; background: var(--accent); box-shadow: 0 1px 3px rgba(0,0,0,0.25); }
@media (pointer: coarse) {
  .text-grip { width: 32px; height: 32px; }
  .text-resize { width: 24px; }
}

/* Tabs: on wide screens they sit on the page's right edge like a printed planner */
.tabs { display: flex; gap: 3px; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tab {
  display: flex; align-items: center; justify-content: center; gap: 6px; border: 0; flex: none;
  font: 500 10.5px/1 Inter, system-ui, sans-serif; letter-spacing: 0.16em; text-transform: uppercase;
  overflow: hidden; white-space: nowrap;
  background-image: linear-gradient(90deg, rgba(0,0,0,0.1), transparent 30%, rgba(255,255,255,0.14) 75%, rgba(255,255,255,0.04));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.3), 1px 1px 2px rgba(60,40,30,0.18);
  transition: width 0.15s, filter 0.15s;
}
.tab .tab-label { overflow: hidden; text-overflow: ellipsis; }
.tab:hover { filter: brightness(1.04); }
.tab .tab-edit { opacity: 0.85; display: none; width: 22px; height: 22px; border-radius: 6px; place-items: center; }
.tab[aria-current="true"] .tab-edit { display: inline-grid; }
.tab .tab-edit:hover { background: rgba(0, 0, 0, 0.15); }
.tab .tab-edit i { width: 15px; height: 15px; }
.tab.add { background: #fbf9f6; color: #8a7f78; justify-content: center; }
.page-wrap > .tabs {
  position: absolute; left: 100%; top: 18px; bottom: 18px; width: 40px; margin-left: -6px; z-index: -1;
  flex-direction: column;
}
.page-wrap > .tabs .tab {
  writing-mode: vertical-rl; flex: 1 1 0; min-height: 58px; max-height: 150px; width: 34px; padding: 10px 0 10px 6px;
  border-radius: 0 8px 8px 0;
}
.page-wrap > .tabs .tab[aria-current="true"] { width: 40px; box-shadow: inset 0 1px 0 rgba(255,255,255,0.3), 2px 1px 5px rgba(60,40,30,0.28); }
.page-wrap > .tabs .tab.add { flex: 0 0 40px; min-height: 40px; }
.page-wrap > .tabs .tab.add i { writing-mode: horizontal-tb; width: 16px; height: 16px; }
.page-wrap > .tabs .tab .tab-edit { writing-mode: horizontal-tb; }

/* ---------- Pager ---------- */
.pager {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  padding: 6px 12px; padding-bottom: max(6px, env(safe-area-inset-bottom));
  background: var(--chrome); border-top: 1px solid var(--line);
}
#pageNum { min-width: 64px; text-align: center; font-variant-numeric: tabular-nums; color: var(--muted); font-weight: 500; }
.zoom-label { border: 0; background: none; min-width: 54px; color: var(--muted); font-variant-numeric: tabular-nums; border-radius: 8px; height: 32px; }
.zoom-label:hover { background: var(--hover); }
.divider { width: 1px; height: 22px; background: var(--line); margin: 0 4px; }

/* ---------- Dialogs ---------- */
dialog {
  border: 0; border-radius: 16px; padding: 0; width: min(440px, calc(100vw - 32px));
  background: var(--chrome); color: var(--ink); box-shadow: var(--shadow);
}
dialog::backdrop { background: rgba(18, 13, 25, 0.45); }
dialog form { padding: 20px; display: flex; flex-direction: column; gap: 14px; max-height: calc(100dvh - 48px); overflow: auto; }
dialog h2 { margin: 0; font: 700 18px/1.3 Poppins, Inter, sans-serif; }
.hint { margin: 0; color: var(--muted); font-size: 13px; }
.field { display: flex; flex-direction: column; gap: 6px; font-weight: 600; font-size: 13px; border: 0; padding: 0; margin: 0; }
.field legend { padding: 0; margin-bottom: 6px; }
.field input, .field select, .menu-select select {
  height: 40px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--chrome); font-weight: 400; font-size: 14px;
}
.field input:focus, .field select:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
.radio, .check { display: flex; align-items: center; gap: 8px; font-weight: 400; font-size: 14px; }
.radio input, .check input { accent-color: var(--accent); width: 18px; height: 18px; }
.color-pick { display: flex; flex-wrap: wrap; gap: 8px; }
.color-pick button { width: 32px; height: 32px; border-radius: 50%; border: 3px solid var(--chrome); box-shadow: 0 0 0 1px var(--line); padding: 0; }
.color-pick button[aria-pressed="true"], .color-pick .custom-color[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--accent); }
.custom-color, .tm-color {
  position: relative; width: 32px; height: 32px; border-radius: 50%; border: 3px solid var(--chrome);
  box-shadow: 0 0 0 1px var(--line); cursor: pointer; flex: none;
  background: conic-gradient(#e0453a, #ffc93c, #2eb872, #2563eb, #5b2e90, #e0453a);
}
.custom-color input, .tm-color input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; border: 0; padding: 0; }
.field .hint { font-weight: 400; display: inline; }

/* ---------- Welcome & tab manager ---------- */
.start-choices { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.choice {
  display: flex; flex-direction: column; align-items: flex-start; gap: 4px; text-align: left;
  padding: 14px; border-radius: 14px; border: 1px solid var(--line); background: var(--hover);
}
.choice:hover { border-color: var(--accent); }
.choice i[data-icon] { color: var(--accent); width: 24px; height: 24px; margin-bottom: 4px; }
.choice b { font-family: Poppins, Inter, sans-serif; font-size: 15px; }
.choice span { color: var(--muted); font-size: 12.5px; }
.start-h { margin: 4px 0 0; font: 600 13px/1.3 Inter, sans-serif; color: var(--muted); }
.start-tabs { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px; }
.start-tab {
  display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 10px; align-items: center;
  text-align: left; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--chrome);
}
.start-tab:hover { border-color: var(--accent); background: var(--hover); }
.start-tab .chip { grid-row: span 2; width: 12px; height: 34px; border-radius: 4px; }
.start-tab b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.start-tab small { color: var(--muted); }
.tab-manage { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.tab-manage li {
  display: flex; align-items: center; gap: 6px; padding: 6px; border-radius: 12px;
  border: 1px solid var(--line); background: var(--chrome);
}
.tab-manage li.dragging { box-shadow: var(--shadow); border-color: var(--accent); opacity: 0.95; }
.grip { display: grid; place-items: center; width: 26px; height: 32px; color: var(--muted); cursor: grab; touch-action: none; flex: none; }
.grip svg { width: 18px; height: 18px; }
.tm-color { width: 26px; height: 26px; border-width: 2px; }
.tm-name { flex: 1; min-width: 0; height: 34px; padding: 0 10px; border-radius: 8px; border: 1px solid transparent; background: var(--hover); font-weight: 600; }
.tm-name:focus { outline: 2px solid var(--accent); outline-offset: -1px; background: var(--chrome); }
.tm-count { color: var(--muted); font-size: 12px; white-space: nowrap; }
.tab-manage .icon-btn svg { width: 16px; height: 16px; }
#upTarget { height: 32px; border-radius: 8px; border: 1px solid var(--line); background: var(--chrome); padding: 0 8px; max-width: 180px; }

/* ---------- Binder cover ---------- */
.cover-screen {
  position: fixed; inset: 0; z-index: 40; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 30px; padding: 24px;
  background: radial-gradient(ellipse 70% 60% at 50% 35%, var(--chrome), var(--desk) 75%);
  transition: opacity 0.45s, visibility 0.45s;
}
.cover-screen.hide { opacity: 0; visibility: hidden; pointer-events: none; }
/* Front-facing planner: cover art, spiral binding, tabs on the right edge.
   Sizes come from --h so the whole thing scales with the screen. */
.cover-stage {
  --h: min(64vh, 560px, calc(76vw * 1.28));
  --w: calc(var(--h) * 0.78);
  position: relative; width: var(--w); height: var(--h); perspective: 2400px; margin-right: 34px;
}
.binder3d {
  --cover: #2f3e4e;
  position: absolute; inset: 0; transform-style: preserve-3d; cursor: pointer; outline: none;
  transition: transform 0.5s cubic-bezier(0.3, 0.7, 0.2, 1);
}
.binder3d:hover { transform: translateY(-3px); }
.b-face { position: absolute; backface-visibility: hidden; }
.vinyl { background-color: var(--cover); background-image: url(textures/vinyl.svg); background-size: 180px; background-blend-mode: soft-light; }
.binder3d[data-finish="linen"] .vinyl { background-image: url(textures/linen.svg); background-size: 130px; }
.binder3d[data-finish="leather"] .vinyl { background-image: url(textures/leather.svg); background-size: 200px; }
.binder3d[data-finish="dots"] .vinyl { background-image: radial-gradient(rgba(255,255,255,0.32) 2.5px, transparent 3px), url(textures/vinyl.svg); background-size: 22px 22px, 180px; background-blend-mode: normal, soft-light; }
.binder3d[data-finish="stripes"] .vinyl { background-image: repeating-linear-gradient(90deg, rgba(255,255,255,0.13) 0 2px, transparent 2px 18px), url(textures/vinyl.svg); background-size: auto, 180px; background-blend-mode: normal, soft-light; }

/* Pages under the cover, seen as a thin stack and when the cover swings open */
.cover-paper {
  position: absolute; inset: 1.2% 0.6% 1.2% 0; border-radius: 4px 12px 12px 4px; transform: translateZ(-2px);
  background-color: #fbf9f4;
  background-image: repeating-linear-gradient(transparent 0 23px, rgba(60,100,170,0.16) 23px 24px), url(textures/paper.svg);
  background-blend-mode: normal, multiply; background-size: auto, 220px; background-position: 0 44px, 0 0;
  box-shadow: 1px 1px 0 #e7e2d9, 2px 2px 0 #fbf9f4, 3px 3px 0 #ddd7cc, 4px 4px 0 #fbf9f4, 5px 5px 0 #d6d0c4,
              0 20px 40px -18px rgba(60,40,30,0.35);
}
.cover-tabs {
  position: absolute; left: 100%; top: 3%; bottom: 3%; width: 36px; margin-left: -6px;
  display: flex; flex-direction: column; gap: 2px; transform: translateZ(-1px);
}
.cover-tabs span {
  flex: 1 1 0; max-height: 24%; display: flex; align-items: center; justify-content: center; padding-left: 6px;
  writing-mode: vertical-rl; border-radius: 0 7px 7px 0; overflow: hidden; white-space: nowrap;
  font: 500 clamp(8px, 1.5vh, 11px)/1 Inter, system-ui, sans-serif; letter-spacing: 0.16em; text-transform: uppercase;
  background-image: linear-gradient(90deg, rgba(0,0,0,0.12), transparent 35%, rgba(255,255,255,0.14) 75%, rgba(255,255,255,0.04));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.3), 1px 1px 3px rgba(60,40,30,0.2);
}

/* Front cover swings open on the spiral */
.b-front {
  position: absolute; inset: 0; transform-style: preserve-3d; transform-origin: left center;
  transition: transform 0.9s cubic-bezier(0.6, 0.05, 0.3, 1);
}
.binder3d.open .b-front { transform: rotateY(-172deg); }
.b-out, .b-in { inset: 0; border-radius: 6px 14px 14px 6px; overflow: hidden; }
.b-out {
  box-shadow:
    0 0 0 1px rgba(60,40,30,0.06), 0 1px 1px rgba(60,40,30,0.1), 0 4px 8px rgba(60,40,30,0.1),
    0 18px 36px -10px rgba(60,40,30,0.3), 0 40px 70px -28px rgba(60,40,30,0.4);
}
.cover-art { position: absolute; inset: 0; background-size: cover; background-position: center; }
.b-out::after { /* lamination: soft light from the upper left, gentle falloff at the edges */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 90% 70% at 25% 10%, rgba(255,255,255,0.14), transparent 60%),
    linear-gradient(135deg, transparent 55%, rgba(0,0,0,0.08));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.18), inset 0 0 50px rgba(0,0,0,0.08);
}
.b-in { transform: rotateY(180deg); background: #f4f0ea url(textures/paper.svg) 0 0 / 220px; background-blend-mode: multiply; }
.sheen {
  position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background: linear-gradient(118deg, transparent 22%, rgba(255,255,255,0.12) 30%, rgba(255,255,255,0.03) 38%, transparent 44%);
}
.binder3d[data-finish="leather"] .sheen, .binder3d[data-finish="linen"] .sheen, .binder3d.has-photo .sheen { opacity: 0.5; }

/* Cover lettering, in the style of a printed planner */
.cover-text {
  position: absolute; left: 13%; right: 9%; top: 9%; z-index: 1;
  display: flex; flex-direction: column; align-items: center; text-align: center; color: #2b2522;
}
.binder3d[data-show-text="false"] .cover-text { display: none; }
.ct-rule {
  position: relative; width: 82%; height: 1px; margin: calc(var(--h) * 0.018) 0;
  background: linear-gradient(90deg, transparent, #c9a45c 12%, #c9a45c 42%, transparent 42% 58%, #c9a45c 58%, #c9a45c 88%, transparent);
}
.ct-rule::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 9px; height: 9px; transform: translate(-50%, -50%) rotate(45deg);
  background: linear-gradient(135deg, #f6dc9a, #c9963a 55%, #8c6420); border-radius: 1px;
}
.ct-script {
  font: 400 calc(var(--h) * 0.105)/1.15 "Great Vibes", "Brush Script MT", cursive; padding: 0 0.15em;
  background: linear-gradient(175deg, #f8e3a8 10%, #d4a24a 45%, #a57425 70%, #e9c77e 95%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 1px 0 rgba(255,255,255,0.35)) drop-shadow(0 1px 1px rgba(80,50,10,0.25));
}
.cover-text h1 {
  margin: 0; font: 600 calc(var(--h) * 0.072)/1.1 "Playfair Display", Georgia, serif; letter-spacing: 0.07em;
  text-transform: uppercase; overflow-wrap: anywhere;
}
.binder3d:not([data-lettering="elegant"]) .ct-script {
  font: 600 calc(var(--h) * 0.024)/1.6 Inter, system-ui, sans-serif; letter-spacing: 0.36em; text-transform: uppercase;
  background: none; color: #8f7a55; filter: none; padding: 0 0 0 0.36em; margin-bottom: calc(var(--h) * 0.008);
}
.binder3d[data-ink="light"]:not([data-lettering="elegant"]) .ct-script { color: #d6c39b; }
.binder3d[data-lettering="modern"] .cover-text h1 {
  font: 700 calc(var(--h) * 0.068)/1.12 Montserrat, Inter, system-ui, sans-serif; letter-spacing: 0.12em;
}
.binder3d:not([data-lettering="elegant"]) .ct-rule::after { width: 6px; height: 6px; background: #a08a62; }
.ct-sub { font: 500 calc(var(--h) * 0.023)/1.4 Inter, system-ui, sans-serif; letter-spacing: 0.26em; text-transform: uppercase; color: #4a403a; }
.binder3d[data-ink="light"] .cover-text h1 { color: #fff; text-shadow: 0 1px 10px rgba(0,0,0,0.3); }
.binder3d[data-ink="light"] .ct-sub { color: rgba(255,255,255,0.92); text-shadow: 0 1px 6px rgba(0,0,0,0.3); }

.cover-coil {
  position: absolute; left: -14px; top: 1.5%; bottom: 1.5%; width: 44px; pointer-events: none; transform: translateZ(3px);
  background: url(textures/coil-silver.svg) repeat-y 0 0 / 44px 24px;
}
.binder3d[data-binding="gold"] .cover-coil { background-image: url(textures/coil-gold.svg); }
.binder3d[data-binding="rose"] .cover-coil { background-image: url(textures/coil-rose.svg); }
.binder3d[data-binding="black"] .cover-coil { background-image: url(textures/coil-black.svg); }
.btn.big { height: 52px; padding: 0 30px; font-size: 16px; border-radius: 14px; box-shadow: inset 0 1px 0 rgba(255,255,255,0.25), 0 10px 24px -8px rgba(60, 40, 30, 0.45); }
.link-btn { margin-top: -14px; border: 0; background: none; color: var(--muted); text-decoration: underline; text-underline-offset: 3px; padding: 6px; }
.link-btn:hover { color: var(--accent); }
@media (prefers-reduced-motion: reduce) { .binder3d, .b-front { transition: none; } }
.row-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.dlg-foot { display: flex; justify-content: flex-end; gap: 8px; padding-top: 4px; }
.menu-list { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.menu-list > button, .menu-select {
  text-align: left; padding: 12px 14px; border: 0; background: none; border-bottom: 1px solid var(--line);
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.menu-list > :last-child { border-bottom: 0; }
.menu-list > button:hover { background: var(--hover); }
.menu-select select { height: 34px; max-width: 55%; }
.danger-text { color: var(--danger); }

.template-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 12px; }
.template-grid button {
  display: flex; flex-direction: column; gap: 6px; align-items: center; padding: 8px; border-radius: 12px;
  border: 1px solid var(--line); background: var(--chrome); font-size: 13px; font-weight: 600;
}
.template-grid button:hover { border-color: var(--accent); background: var(--hover); }
.template-grid canvas { width: 100%; border: 1px solid var(--line); border-radius: 4px; background: #fff; }

.drop {
  display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 22px; text-align: center;
  border: 2px dashed var(--line); border-radius: 14px; color: var(--muted); cursor: pointer; position: relative;
}
.drop:hover, .drop.over { border-color: var(--accent); color: var(--accent); }
.drop input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.drop i[data-icon] { width: 28px; height: 28px; }

.toast {
  position: fixed; left: 50%; bottom: 72px; transform: translateX(-50%) translateY(20px);
  background: var(--ink); color: var(--chrome); padding: 10px 16px; border-radius: 12px;
  font-weight: 500; opacity: 0; pointer-events: none; transition: 0.2s; z-index: 50; max-width: calc(100vw - 32px);
}
.toast.show { opacity: 1; transform: translateX(-50%); }
.scrim { display: none; }
#printArea { display: none; }

@media (max-width: 1000px) {
  .toolbar .btn span { display: none; }
  .toolbar .btn { padding: 0 10px; }
}

/* ---------- Phone & small tablets ---------- */
@media (max-width: 760px) {
  #app { grid-template-columns: minmax(0, 1fr); }
  .workspace { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
  .pager { gap: 2px; padding-left: 6px; padding-right: 6px; }
  .pager .icon-btn { width: 34px; }
  #pageNum { min-width: 52px; }
  .zoom-label { min-width: 46px; }
  .divider { margin: 0 2px; }
  .tabs { grid-row: 1; flex-direction: row; padding: 10px 10px 0; overflow-x: auto; align-items: flex-end; }
  .tab { height: 34px; max-width: 170px; padding: 0 12px; border-radius: 8px 8px 0 0; }
  .tab[aria-current="true"] { height: 40px; }
  .tab.add { padding: 0 10px; }
  .stage { grid-row: 2; }
  .page-wrap { margin: 16px auto 28px; left: 8px; }
  .pages-panel {
    position: fixed; z-index: 30; top: 0; bottom: 0; left: 0; width: min(78vw, 260px);
    box-shadow: var(--shadow); transform: translateX(-105%); transition: transform 0.2s; display: flex;
    padding-top: env(safe-area-inset-top);
  }
  .pages-panel.hidden { display: flex; }
  .pages-panel.open { transform: none; }
  #btnPanelClose { display: inline-grid; }
  .page-list { display: grid; grid-template-columns: 1fr 1fr; align-content: start; }
  .scrim.show { display: block; position: fixed; inset: 0; background: rgba(18, 13, 25, 0.4); z-index: 20; }
  .toolbar .btn span, #btnPageMenu span { display: none; }
  .toolbar .btn { padding: 0 10px; }
  .size input { width: 70px; }
  .binder-title { max-width: 130px; }
  .toast { bottom: 64px; }
}

@media print {
  @page { margin: 0; }
  body { background: #fff; }
  #app, dialog, .toast, .scrim { display: none !important; }
  #printArea { display: block; }
  #printArea img { display: block; width: 100%; break-after: page; }
}

.hint.version { font-size: 12px; opacity: 0.8; }