/* ===== Canvas Builder Layout ===== */
.canvas-shell {
  height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background-color: #f5f0ea;
  background-image:
    radial-gradient(ellipse at 20% 20%, rgba(242,101,67,0.06) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 80%, rgba(12,191,207,0.05) 0%, transparent 50%);
}

/* ===== Canvas Topbar ===== */
.canvas-topbar {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 0 12px 0 0;
  height: 50px;
  min-height: 50px;
  background: #ffffff;
  border-bottom: 1px solid rgba(0,0,0,0.1);
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  position: relative;
  z-index: 510;
}
.canvas-topbar-left {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex: 1;
}
.brand-sm { font-family: 'Dancing Script', cursive; font-weight: 700; font-size: 18px; padding: 0 10px; white-space: nowrap; flex-shrink: 0; color: #f26543; text-decoration: none; }
.brand-sm-teal { color: #0cbfcf; }
.cb-sidebar-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 6px;
  border: 1px solid rgba(242,101,67,0.25);
  background: #fff5f0;
  color: #f26543;
  font-size: 16px;
  cursor: pointer;
  transition: background 120ms, color 120ms, border-color 120ms;
  flex-shrink: 0;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}
.cb-sidebar-toggle:hover { background: #ffe8e0; color: #d94e2e; border-color: rgba(242,101,67,0.4); }
.sidebar-toggle-icon { line-height: 1; }
.topbar-title {
  font-size: 15px;
  color: #1a0e05;
  letter-spacing: 0.05em;
  font-family: 'Dancing Script', cursive;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.canvas-topbar-right {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.canvas-form-inline { display: inline; }
.btn-finalize {
  background: #1f4f20;
  color: #90d890;
  border-color: rgba(80,160,80,0.4);
  font-size: 11px;
}
.btn-finalize:hover { background: #2a6a2a; }
.canvas-action-btn { font-size: 11px; }

/* More menu */
.canvas-more-menu { position: relative; }
.canvas-more-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 180px;
  background: #ffffff;
  border: 1px solid rgba(0,0,0,0.1);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
  z-index: 2000;
  overflow: hidden;
}
.canvas-more-dropdown.is-open { display: block; }
.canvas-more-item {
  display: block;
  width: 100%;
  padding: 10px 16px;
  text-align: left;
  background: none;
  border: none;
  color: #5c4535;
  font-size: 13px;
  cursor: pointer;
  transition: background 120ms;
}
.canvas-more-item:hover { background: rgba(242,101,67,0.06); }
.canvas-more-danger { color: #d06060; }
.canvas-more-danger:hover { background: rgba(180,60,60,0.08); }
.canvas-more-divider { height: 1px; background: rgba(0,0,0,0.1); margin: 4px 0; }
.canvas-mobile-only { display: none; }
.canvas-more-finalize { color: #6ab06a; }

/* ===== Canvas App ===== */
.canvas-app {
  flex: 1;
  display: flex;
  overflow: hidden;
  min-height: 0;
  position: relative;
}

/* ===== Sidebar ===== */
.sidebar-drag-handle {
  display: none;
  justify-content: center;
  align-items: center;
  padding: 8px 0 4px;
  cursor: pointer;
  flex-shrink: 0;
}
.drag-pip {
  width: 40px;
  height: 4px;
  border-radius: 2px;
  background: rgba(120,90,40,0.35);
}
.sidebar-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  z-index: 498;
}
.sidebar-backdrop.is-visible { display: block; }

/* Desktop sidebar */
.cb-sidebar {
  width: 268px;
  flex-shrink: 0;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='4' seed='9' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.6 0 0 0 0 0.52 0 0 0 0 0.36 0 0 0 0.035 0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23p)'/%3E%3C/svg%3E"),
    linear-gradient(180deg, #faf3e0 0%, #f4e8cc 100%);
  border-right: 2px solid #b89040;
  box-shadow: inset -1px 0 0 rgba(255,255,255,0.6), 2px 0 14px rgba(0,0,0,0.18);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: width 220ms ease;
  position: relative;
  z-index: 10;
}
.cb-sidebar.is-collapsed {
  width: 4px;
  border-right: none;
  overflow: hidden;
  cursor: ew-resize;
}
.cb-sidebar.is-collapsed.is-hover-open {
  width: 268px;
  overflow-y: auto;
  cursor: default;
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  z-index: 300;
  box-shadow: 6px 0 28px rgba(0,0,0,0.5);
  border-right: 2px solid #b89040;
}

.cb-tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-bottom: 2px solid #b89040;
  background: linear-gradient(180deg, #e8d8b0 0%, #dcc898 100%);
  flex-shrink: 0;
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}
.cb-tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 9px 4px;
  border: none;
  background: transparent;
  color: #6a5230;
  font-size: 10px;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: background 140ms ease, color 140ms ease;
  border-right: 1px solid rgba(160,120,40,0.3);
  border-bottom: 1px solid rgba(160,120,40,0.2);
  line-height: 1.2;
}
.cb-tab:nth-child(3n) { border-right: none; }
.cb-tab:nth-child(n+7) { border-bottom: none; }
.cb-tab-icon { font-size: 16px; line-height: 1; }
.cb-tab:hover { background: rgba(200,160,60,0.15); color: #2a1f15; }
.cb-tab.active { background: linear-gradient(180deg, #faf3e0 0%, #f4e8cc 100%); color: #3a1f0a; font-weight: 600; box-shadow: inset 0 -3px 0 #8a2020; }
.cb-tab:focus, .cb-tab:focus-visible, .cb-tab:focus-within { outline: none !important; box-shadow: inset 0 -3px 0 #8a2020; }
.cb-tab:not(.active):focus, .cb-tab:not(.active):focus-visible { box-shadow: none !important; outline: none !important; }
.cb-sidebar button:focus, .cb-sidebar button:focus-visible { outline: none !important; }
.cb-panels:focus, .cb-panel:focus, .cb-tabs:focus { outline: none !important; }

.cb-panels { flex: 1; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #d8c89a transparent; }
.cb-panel { display: none; padding: 12px; }
.cb-panel.active { display: block; }
.cb-panel-hint { font-size: 11px; color: #786348; letter-spacing: 0.04em; margin: 0 0 10px; font-style: italic; }
.cb-empty-state { text-align: center; padding: 24px 12px; color: #786348; font-size: 13px; }
.cb-empty-state p { margin: 0 0 10px; }

/* Mobile tools FAB — right side, shown only on mobile */
.mobile-tools-fab {
  display: none;
  position: fixed;
  bottom: 100px;
  right: 16px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #f26543;
  border: none;
  color: #fff;
  font-size: 21px;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(242,101,67,0.4);
  z-index: 490;
  backdrop-filter: blur(8px);
  align-items: center;
  justify-content: center;
  transition: transform 140ms;
}
.mobile-tools-fab:hover { transform: scale(1.08); }

/* Mobile print FAB — left side, same row as tools FAB */
.mobile-print-fab {
  display: none;
  position: fixed;
  bottom: 100px;
  left: 16px;
  z-index: 490;
  height: 48px;
  background: rgba(30,20,10,0.82);
  color: #f0d890;
  padding: 0 16px;
  border-radius: 50px;
  font-weight: 700;
  font-size: 12px;
  text-decoration: none;
  box-shadow: 0 4px 16px rgba(0,0,0,0.35);
  white-space: nowrap;
  transition: transform 140ms;
  align-items: center;
  justify-content: center;
  gap: 6px;
  backdrop-filter: blur(8px);
}
.mobile-print-fab:hover { transform: scale(1.05); color: #f0d890; }

/* ===== Mobile Layout ===== */
@media (max-width: 767px) {
  .canvas-topbar {
    padding: 0 6px;
    height: 44px;
    min-height: 44px;
  }
  .brand-sm { display: block; }
  .canvas-action-btn { display: none; }
  .btn-finalize { display: none; }
  .canvas-mobile-only { display: block; }
  .topbar-title { display: none; }
  .undo-label { display: none; }
  .mobile-print-fab { display: flex; }
  #undo-btn { padding: 0 6px; min-width: 28px; }
  #share-btn { display: none; }

  .cb-sidebar-toggle {
    width: 44px;
    height: 44px;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }

  /* Sidebar becomes bottom drawer */
  .cb-sidebar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100% !important;
    height: 72vh;
    max-height: 600px;
    border-right: none;
    border-top: 2px solid #d8c89a;
    border-radius: 16px 16px 0 0;
    box-shadow: 0 -8px 40px rgba(0,0,0,0.45);
    transform: translateY(110%);
    transition: transform 300ms cubic-bezier(0.32,0.72,0,1);
    z-index: 499;
    pointer-events: none;
  }
  .cb-sidebar.is-open {
    transform: translateY(0);
    pointer-events: all;
  }
  .sidebar-drag-handle { display: flex; }

  .mobile-tools-fab { display: flex; }

  /* Element toolbar: fixed strip at top so it's never clipped off-screen */
  .el-toolbar {
    position: fixed;
    top: 44px;
    left: 0;
    right: 0;
    width: 100%;
    transform: none;
    border-radius: 0;
    border-left: none;
    border-right: none;
    padding: 6px 10px;
    overflow-x: auto;
    justify-content: flex-start;
    z-index: 500;
  }

  /* Photo tray: always pinned to bottom so it's accessible even after collapsing */
  .photo-upload-area {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 200;
    max-height: 120px;
  }
  /* Push stage content above the fixed photo tray */
  .cb-stage { padding-bottom: 52px; }

  .zoom-hint { display: none; }
  .cb-zoom-bar { gap: 6px; padding: 6px 10px; }

  /* Anchor canvas to top so FABs never overlap it at fit zoom */
  .cb-viewport {
    align-items: flex-start;
    padding: 56px 12px 12px;
  }
}

/* ===== Background Palette ===== */
.bg-palette {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.bg-swatch {
  display: flex;
  flex-direction: column;
  gap: 5px;
  align-items: center;
  background: none;
  border: 1.5px solid #d8c89a;
  border-radius: 6px;
  padding: 6px;
  cursor: pointer;
  transition: border-color 140ms, transform 140ms, box-shadow 140ms;
  font-size: 10px;
  color: #2a1f15;
  letter-spacing: 0.04em;
}
.bg-swatch:hover { border-color: #7a1f2b; transform: translateY(-1px); box-shadow: 0 3px 8px rgba(0,0,0,0.12); }
.bg-swatch.is-active { border-color: #7a1f2b; box-shadow: 0 0 0 2px rgba(122,31,43,0.2); }
.bg-preview {
  width: 100%;
  height: 38px;
  border-radius: 3px;
  display: block;
}

/* ===== Border Palette ===== */
.border-palette {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.border-picker-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  border: 1.5px solid #d8c89a;
  border-radius: 6px;
  background: #fffdf5;
  padding: 6px;
  cursor: pointer;
  font-size: 10px;
  color: #2a1f15;
  transition: border-color 140ms, transform 140ms;
  letter-spacing: 0.04em;
}
.border-picker-item:hover { border-color: #7a1f2b; transform: translateY(-1px); }
.border-picker-item.is-active { border-color: #7a1f2b; box-shadow: 0 0 0 2px rgba(122,31,43,0.2); background: rgba(122,31,43,0.04); }
.border-preview {
  width: 100%;
  height: 38px;
  border-radius: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f8f4e8;
  position: relative;
  overflow: hidden;
}
/* Border preview thumbnails — show the SVG corner at small scale */
.bp-none { background: rgba(200,190,170,0.15); }
.bp-ornate-scroll      { background-image: url('/static/img/borders/ornate-scroll.svg');      background-size: 100% 100%; }
.bp-victorian-flourish { background-image: url('/static/img/borders/victorian-flourish.svg'); background-size: 100% 100%; }
.bp-art-deco           { background-image: url('/static/img/borders/art-deco.svg');           background-size: 100% 100%; }
.bp-botanical-vine     { background-image: url('/static/img/borders/botanical-vine.svg');     background-size: 100% 100%; }
.bp-ink-flourish       { background-image: url('/static/img/borders/ink-flourish.svg');       background-size: 100% 100%; }
.bp-double-diamond     { background-image: url('/static/img/borders/double-diamond.svg');     background-size: 100% 100%; }
.bp-feather-quill      { background-image: url('/static/img/borders/feather-quill.svg');      background-size: 100% 100%; }
.bp-floral-rose        { background-image: url('/static/img/borders/floral-rose.svg');        background-size: 100% 100%; }
.bp-royal-arch         { background-image: url('/static/img/borders/royal-arch.svg');         background-size: 100% 100%; }
.bp-greek-key          { background-image: url('/static/img/borders/greek-key.svg');          background-size: 100% 100%; }

/* ===== Photo Upload Area (below canvas stage) ===== */
.photo-upload-area {
  flex-shrink: 0;
  min-height: 48px;
  max-height: 140px;
  background: linear-gradient(180deg, #1a0f06 0%, #110905 100%);
  border-top: 1px solid rgba(160,110,30,0.35);
  box-shadow: inset 0 2px 8px rgba(0,0,0,0.3);
  display: flex;
  flex-direction: column;
  transition: max-height 220ms ease;
}
.photo-upload-area.tray-collapsed {
  max-height: 48px;
  overflow: hidden;
}
.photo-upload-area.tray-collapsed .photo-tray-strip { display: none; }
.photo-tray-toggle {
  background: none;
  border: none;
  color: #c8b898;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
}
.photo-tray-toggle:hover { color: #f0d888; }
.tray-toggle-arrow { font-size: 10px; }
.photo-upload-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 14px 4px;
  flex-shrink: 0;
  flex-wrap: wrap;
}
.photo-upload-title {
  font-size: 11px;
  font-weight: 700;
  color: #c8b898;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  flex-shrink: 0;
}
.photo-frame-label {
  font-size: 11px;
  color: #2a1808;
  letter-spacing: 0.06em;
  font-weight: 700;
  text-transform: uppercase;
}
.photo-frame-options {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
}
.photo-frame-btn {
  font-size: 11px;
  padding: 4px 10px;
  border-radius: 12px;
  border: 1.5px solid #8a6030;
  background: #fff8ee;
  color: #2a1808;
  cursor: pointer;
  transition: background 120ms, color 120ms, border-color 120ms;
  letter-spacing: 0.02em;
  font-weight: 600;
}
.photo-frame-btn:hover { background: #ffe8b8; border-color: #7a4820; color: #1a1208; }
.photo-frame-btn.is-active {
  background: #7a3818;
  border-color: #5a2808;
  color: #fff8ee;
  font-weight: 700;
}
.photo-upload-btn {
  margin-left: auto;
  flex-shrink: 0;
  padding: 4px 12px;
  background: rgba(120,30,45,0.6);
  border: 1px solid rgba(180,60,70,0.5);
  border-radius: 4px;
  color: #f0d0d0;
  font-size: 11px;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: background 120ms;
}
.photo-upload-btn:hover { background: rgba(150,40,55,0.8); }
.photo-tray-strip {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 4px 14px 8px;
  flex: 1;
  scrollbar-width: thin;
  scrollbar-color: rgba(120,90,40,0.4) transparent;
}
.photo-strip-item {
  flex-shrink: 0;
  width: 80px;
  border: 1.5px solid rgba(200,170,100,0.3);
  border-radius: 4px;
  background: rgba(255,253,240,0.06);
  padding: 3px;
  cursor: pointer;
  transition: border-color 140ms, transform 140ms;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.photo-strip-item:hover { border-color: #c8a040; transform: translateY(-2px); }
.photo-strip-item img { width: 100%; height: 64px; object-fit: cover; border-radius: 2px; display: block; }
.photo-strip-caption {
  font-size: 9px;
  color: #9a8870;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-family: var(--font-hand);
}
.photo-tray-empty {
  font-size: 11px;
  color: #6a5840;
  font-style: italic;
  padding: 8px 0;
  letter-spacing: 0.04em;
}

/* ===== Photo sidebar (in-panel) ===== */
.photo-sb-upload-row { margin-bottom: 8px; }
.photo-sb-upload-btn {
  display: inline-block;
  padding: 6px 14px;
  background: rgba(122,31,43,0.28);
  border: 1px solid rgba(180,60,70,0.5);
  border-radius: 6px;
  color: #f0d0d0;
  font-size: 11px;
  letter-spacing: 0.05em;
  cursor: pointer;
  transition: background 120ms;
}
.photo-sb-upload-btn:hover { background: rgba(150,40,55,0.55); }
.photo-sb-frames { margin-bottom: 10px; flex-wrap: wrap; }
.photo-sb-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin-bottom: 6px;
  min-height: 40px;
}
.photo-sb-grid .photo-strip-item {
  width: auto;
  aspect-ratio: 1;
  padding: 0;
  border-radius: 5px;
  overflow: hidden;
  flex-direction: column;
  flex-shrink: unset;
  position: relative;
  cursor: pointer;
}
.photo-sb-grid .photo-strip-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
}
.photo-sb-delete {
  position: absolute;
  top: 3px;
  right: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(10,5,2,0.72);
  border: 1px solid rgba(200,70,70,0.55);
  color: #d06060;
  font-size: 9px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 140ms, background 140ms;
  z-index: 5;
  padding: 0;
  line-height: 1;
}
.photo-sb-grid .photo-strip-item:hover .photo-sb-delete { opacity: 1; }
.photo-sb-delete:hover { background: rgba(160,40,40,0.85); color: #f08080; }
@media (hover: none) { .photo-sb-delete { opacity: 1; } }
.photo-sb-grid .photo-tray-empty {
  grid-column: 1 / -1;
}

/* ===== Paper/Notes Palette ===== */
.paper-palette {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.paper-picker-item {
  border: 1.5px solid #d8c89a;
  border-radius: 6px;
  background: #fff;
  padding: 6px;
  cursor: pointer;
  transition: border-color 140ms, transform 140ms;
  text-align: center;
  font-size: 10px;
  color: #2a1f15;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
}
.paper-picker-item:hover { border-color: #7a1f2b; transform: translateY(-1px); }
.paper-preview {
  width: 100%;
  height: 44px;
  border-radius: 2px;
}
.paper-lined-preview {
  background: #fffdf8;
  background-image: repeating-linear-gradient(transparent 0px, transparent 13px, rgba(100,140,210,0.3) 13px, rgba(100,140,210,0.3) 14px);
  border-left: 2px solid rgba(200,80,80,0.35);
}
.paper-grid-preview {
  background: #fffdf8;
  background-image: linear-gradient(rgba(100,140,200,0.2) 1px, transparent 1px), linear-gradient(90deg, rgba(100,140,200,0.2) 1px, transparent 1px);
  background-size: 10px 10px;
}
.paper-kraft-preview {
  background-color: #b89060;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' seed='7'/><feColorMatrix values='0 0 0 0 0.2  0 0 0 0 0.1  0 0 0 0 0  0 0 0 0.1 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}
.paper-tea-preview {
  background: #e0c890;
  background-image: radial-gradient(ellipse at top left, rgba(160,100,40,0.4), transparent 60%), radial-gradient(ellipse at bottom right, rgba(140,90,30,0.35), transparent 60%);
}
.paper-vellum-preview {
  background: rgba(255,255,255,0.7);
  border: 1px solid rgba(200,190,170,0.7);
}
.paper-dotted-preview {
  background: #fffdf8;
  background-image: radial-gradient(circle, rgba(100,140,200,0.35) 1.2px, transparent 1.2px);
  background-size: 14px 14px;
}
.paper-dark-preview {
  background: #1e1a14;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' seed='11'/><feColorMatrix values='0 0 0 0 0.04  0 0 0 0 0.03  0 0 0 0 0.01  0 0 0 0.12 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}
.paper-postit-preview {
  background: #f7e84a;
  background-image: linear-gradient(180deg, rgba(220,200,0,0.12) 0%, transparent 20%);
}
.paper-recipe-preview {
  background: #fffdf0;
  border-top: 4px solid #e8c060;
  background-image: repeating-linear-gradient(transparent 0px, transparent 13px, rgba(180,140,40,0.2) 13px, rgba(180,140,40,0.2) 14px);
}
.paper-envelope-preview {
  background: #f8f4e0;
  border: 1px solid #d4c898;
  position: relative;
  overflow: hidden;
}
.paper-envelope-preview::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 22px;
  background: linear-gradient(135deg, #e8d8a0 50%, transparent 50%), linear-gradient(225deg, #e8d8a0 50%, transparent 50%);
  background-size: 50% 22px;
  background-repeat: no-repeat;
  background-position: 0 0, 100% 0;
}
.paper-music-preview {
  background: #fffdf8;
  background-image: repeating-linear-gradient(transparent 0px, transparent 8px, rgba(0,0,0,0.25) 8px, rgba(0,0,0,0.25) 9px, transparent 9px, transparent 12px, rgba(0,0,0,0.12) 12px, rgba(0,0,0,0.12) 13px);
  background-size: 100% 20px;
}
.paper-torn-preview { background: #fffbf0; clip-path: polygon(0% 0%, 100% 0%, 100% 80%, 97% 84%, 93% 80%, 89% 85%, 84% 80%, 80% 84%, 75% 80%, 70% 85%, 65% 80%, 60% 84%, 55% 80%, 50% 85%, 45% 80%, 40% 84%, 35% 80%, 30% 84%, 25% 80%, 20% 85%, 15% 80%, 10% 84%, 5% 80%, 0% 84%); }
.paper-torn-ruled-preview { background: #fffdf8; background-image: repeating-linear-gradient(transparent 0px, transparent 9px, rgba(100,140,210,0.35) 9px, rgba(100,140,210,0.35) 10px); background-size: 100% 10px; border-left: 2px solid rgba(200,80,80,0.35); clip-path: polygon(0% 0%, 100% 0%, 100% 80%, 97% 84%, 93% 80%, 89% 85%, 84% 80%, 80% 84%, 75% 80%, 70% 85%, 65% 80%, 60% 84%, 55% 80%, 50% 85%, 45% 80%, 40% 84%, 35% 80%, 30% 84%, 25% 80%, 20% 85%, 15% 80%, 10% 84%, 5% 80%, 0% 84%); }
.paper-torn-kraft-preview { background: #c09060; clip-path: polygon(0% 4%, 3% 0%, 7% 3%, 11% 0%, 15% 3%, 19% 0%, 23% 2%, 28% 0%, 32% 3%, 37% 0%, 41% 2%, 46% 0%, 50% 3%, 55% 0%, 59% 2%, 64% 0%, 68% 3%, 73% 0%, 77% 2%, 82% 0%, 86% 3%, 91% 0%, 95% 2%, 100% 0%, 100% 80%, 97% 84%, 93% 80%, 89% 85%, 84% 80%, 80% 84%, 75% 80%, 70% 85%, 65% 80%, 60% 84%, 55% 80%, 50% 85%, 45% 80%, 40% 84%, 35% 80%, 30% 84%, 25% 80%, 20% 85%, 15% 80%, 10% 84%, 5% 80%, 0% 84%); }
.paper-torn-flag-preview { background: #fffbf0; clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 50% 80%, 0% 100%); }

/* ===== Sticker Grid ===== */
.sticker-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
}
.sticker-picker-item {
  border: none;
  border-radius: 8px;
  background: transparent;
  padding: 5px 4px;
  cursor: pointer;
  font-size: 22px;
  line-height: 1;
  text-align: center;
  transition: background 120ms, transform 120ms;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sticker-picker-item:hover { background: rgba(122,31,43,0.07); transform: scale(1.18); }

/* ===== Washi Palette ===== */
.washi-palette {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.washi-picker-item {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1.5px solid #d8c89a;
  border-radius: 6px;
  background: #fffdf5;
  padding: 6px 10px;
  cursor: pointer;
  font-size: 11px;
  color: #2a1f15;
  transition: border-color 140ms, transform 140ms;
}
.washi-picker-item:hover { border-color: #7a1f2b; transform: translateX(2px); }
.washi-preview {
  width: 100px;
  height: 18px;
  border-radius: 2px;
  flex-shrink: 0;
}

/* ===== Vintage Palette ===== */
.vintage-palette {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.vintage-picker-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  border: 1.5px solid #d8c89a;
  border-radius: 6px;
  background: #fffdf5;
  padding: 8px 6px;
  cursor: pointer;
  font-size: 10px;
  color: #2a1f15;
  transition: border-color 140ms, transform 140ms;
}
.vintage-picker-item:hover { border-color: #7a1f2b; transform: translateY(-1px); }
.vintage-preview-stamp { border: 2px solid #8a2020; border-radius: 50%; width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; font-size: 7px; letter-spacing: 0.08em; color: #8a2020; font-family: 'Special Elite', monospace; }
.vintage-preview-postmark { background: #f0e8d0; border: 1px solid #c4a860; width: 52px; height: 32px; }
.vintage-preview-boarding { background: linear-gradient(135deg, #fffdf0, #e8e0c8); border: 1px solid #c4a860; width: 52px; height: 32px; }
.vintage-preview-postcard { background: #fffdf5; border: 1px solid #d4c8a0; width: 52px; height: 32px; }
.vintage-preview-hotel { background: #fffdf0; border: 1px solid #d4b890; border-radius: 0 0 16px 16px; width: 28px; height: 36px; }
.vintage-preview-ticket { background: #e8e0d0; border: 1px solid #c4b090; width: 52px; height: 28px; }
.vintage-preview-telegram { background: #f5f0e0; border: 2px solid #2a2018; width: 52px; height: 28px; font-size: 7px; color: #2a2018; font-family: 'Special Elite', monospace; display: flex; align-items: center; justify-content: center; letter-spacing: 0.2em; }
.vintage-preview-library { background: #f0e8d0; border: 1px solid #c4a860; width: 36px; height: 44px; border-radius: 1px; }
.vintage-preview-coords { background: transparent; border: 1px dashed #786348; width: 52px; height: 24px; font-size: 7px; color: #786348; display: flex; align-items: center; justify-content: center; font-family: 'Special Elite', monospace; letter-spacing: 0.05em; }
.vintage-preview-airmail { background: #f8f4e0; border: 1px solid #d4c898; width: 52px; height: 32px; position: relative; overflow: hidden; }
.vintage-preview-airmail::before { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 10px; background: repeating-linear-gradient(90deg, #c00 0, #c00 8px, #fff 8px, #fff 12px, #003399 12px, #003399 20px, #fff 20px, #fff 24px); }
.vintage-preview-newspaper { background: #f5f0e8; border: 1px solid #c8b898; width: 52px; height: 28px; }
.vintage-preview-menu { background: #f8f4ec; border: 2px solid #8a6030; border-radius: 1px; width: 32px; height: 44px; }
.vintage-preview-visa { background: #e8f0e0; border: 2px solid #2a6020; width: 52px; height: 36px; border-radius: 2px; }
.vintage-preview-baggage { background: #f0e8d0; border: 2px solid #6a4820; width: 32px; height: 48px; border-radius: 3px 3px 0 0; }
.vintage-preview-journal { background: #2a1f15; color: #e8c880; font-size: 6px; font-family: 'Special Elite', monospace; letter-spacing: 0.12em; display: flex; align-items: center; justify-content: center; width: 36px; height: 48px; border-radius: 2px; }
.vintage-preview-currency { background: #d8f0d0; border: 1px solid #4a8040; width: 52px; height: 28px; border-radius: 1px; }
.vintage-preview-souvenir { background: #fff0e0; border: 1px solid #c4a060; width: 32px; height: 40px; border-radius: 3px 3px 16px 16px; }
.vintage-preview-stub { background: #e8d8c0; border: 1px solid #a08060; width: 52px; height: 24px; }

/* ===== Deco Palette ===== */
.deco-palette {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.deco-picker-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  border: 1.5px solid #d8c89a;
  border-radius: 6px;
  background: #fffdf5;
  padding: 8px 6px;
  cursor: pointer;
  font-size: 10px;
  color: #2a1f15;
  transition: border-color 140ms, transform 140ms;
}
.deco-picker-item:hover { border-color: #7a1f2b; transform: translateY(-1px); }
.deco-preview { width: 38px; height: 38px; }
.deco-preview-corner-gold { border-top: 3px solid #c8a020; border-left: 3px solid #c8a020; width: 22px; height: 22px; }
.deco-preview-corner-black { border-top: 3px solid #2a1f15; border-left: 3px solid #2a1f15; width: 22px; height: 22px; }
.deco-preview-film { width: 52px; height: 14px; background: #1a1410; border-radius: 1px; position: relative; overflow: hidden; }
.deco-preview-film::before { content: ''; position: absolute; top: 2px; bottom: 2px; width: 100%; background: repeating-linear-gradient(90deg, transparent 0, transparent 4px, rgba(248,241,222,0.4) 4px, rgba(248,241,222,0.4) 7px, transparent 7px, transparent 10px); }
.deco-preview-coffee { width: 34px; height: 34px; border: 2px solid rgba(120,80,30,0.5); border-radius: 50%; box-shadow: inset 0 0 0 4px rgba(180,130,60,0.1); background: rgba(180,130,60,0.04); }
.deco-preview-wax-red { width: 32px; height: 32px; background: radial-gradient(circle at 35% 30%, #e05050, #8a1010); border-radius: 50%; box-shadow: 0 2px 5px rgba(0,0,0,0.3); }
.deco-preview-wax-navy { width: 32px; height: 32px; background: radial-gradient(circle at 35% 30%, #4070c0, #0a1f6a); border-radius: 50%; box-shadow: 0 2px 5px rgba(0,0,0,0.3); }
.deco-preview-splatter { width: 36px; height: 32px; background: #1a1a1a; clip-path: polygon(20% 0%, 80% 10%, 100% 40%, 85% 100%, 50% 85%, 15% 100%, 0% 60%, 10% 20%); opacity: 0.7; }
.deco-preview-paint { width: 52px; height: 12px; background: linear-gradient(90deg, transparent, #c8a020 15%, #e8c030 40%, #c8a020 80%, transparent); border-radius: 999px; opacity: 0.8; }
.deco-preview-paperclip { width: 14px; height: 36px; border: 2px solid #888; border-radius: 6px 6px 0 0; border-bottom: none; position: relative; }
.deco-preview-paperclip::before { content: ''; position: absolute; top: 4px; left: -4px; right: -4px; bottom: -6px; border: 2px solid #888; border-radius: 4px 4px 0 0; border-bottom: none; }
.deco-preview-polaroid { width: 36px; height: 40px; background: #fffdf5; padding: 3px 3px 10px; box-shadow: 1px 2px 5px rgba(0,0,0,0.2); border-radius: 1px; }
.deco-preview-polaroid::after { content: ''; display: block; width: 100%; height: 100%; background: rgba(100,130,160,0.15); border: 1px dashed rgba(100,130,160,0.3); }
.deco-preview-watercolor-pink { width: 36px; height: 28px; background: radial-gradient(ellipse at center, rgba(240,150,180,0.6), rgba(240,150,180,0.1) 70%); border-radius: 50% 40% 55% 45% / 45% 55% 45% 55%; }
.deco-preview-watercolor-blue { width: 36px; height: 28px; background: radial-gradient(ellipse at center, rgba(100,160,230,0.6), rgba(100,160,230,0.1) 70%); border-radius: 40% 55% 45% 60% / 55% 40% 60% 45%; }
.deco-preview-star-cluster { font-size: 20px; display: flex; align-items: center; justify-content: center; }
.deco-preview-ornate-frame { width: 36px; height: 36px; border: 2px solid #c8a020; border-radius: 2px; position: relative; }
.deco-preview-ornate-frame::before { content: ''; position: absolute; inset: 3px; border: 1px solid rgba(200,160,32,0.5); border-radius: 1px; }
.deco-preview-stamp-frame { width: 38px; height: 44px; background: #fffdf5; border: 2px solid #2a1f15; box-shadow: inset 0 0 0 4px rgba(42,31,21,0.06); position: relative; }
.deco-preview-stamp-frame::before { content: ''; position: absolute; inset: -5px; border: 3px solid transparent; background: radial-gradient(circle at 50% -1px, transparent 3px, #2a1f15 3px, #2a1f15 5px, transparent 5px) top / 12px 5px repeat-x, radial-gradient(circle at 50% 101%, transparent 3px, #2a1f15 3px, #2a1f15 5px, transparent 5px) bottom / 12px 5px repeat-x, radial-gradient(circle at -1px 50%, transparent 3px, #2a1f15 3px, #2a1f15 5px, transparent 5px) left / 5px 12px repeat-y, radial-gradient(circle at 101% 50%, transparent 3px, #2a1f15 3px, #2a1f15 5px, transparent 5px) right / 5px 12px repeat-y; }
.deco-preview-ribbon { width: 52px; height: 16px; background: linear-gradient(180deg, #e8c830, #c8a010); position: relative; clip-path: polygon(0% 0%, 100% 0%, 92% 50%, 100% 100%, 0% 100%, 8% 50%); }
.deco-preview-lights { width: 52px; height: 24px; position: relative; overflow: hidden; }
.deco-preview-lights::before { content: ''; position: absolute; top: 10px; left: 0; right: 0; height: 1px; background: #888; }
.deco-preview-lights::after { content: ''; position: absolute; top: 8px; left: 2px; right: 2px; height: 8px; background: repeating-linear-gradient(90deg, #e05050 0,#e05050 5px,transparent 5px,transparent 8px,#f0a030 8px,#f0a030 13px,transparent 13px,transparent 16px,#50b850 16px,#50b850 21px,transparent 21px,transparent 24px,#4080d0 24px,#4080d0 29px,transparent 29px,transparent 32px,#9050d0 32px,#9050d0 37px,transparent 37px,transparent 40px); border-radius: 2px; }
.deco-preview-bunting { width: 52px; height: 24px; display: flex; align-items: flex-start; gap: 3px; padding-top: 2px; justify-content: center; }
.deco-preview-corner-white { border-top: 3px solid #f0ece4; border-left: 3px solid #f0ece4; width: 22px; height: 22px; box-shadow: 0 0 0 1px rgba(180,160,120,0.3); }
.deco-preview-dried-flower { width: 26px; height: 38px; background: radial-gradient(circle at 50% 35%, rgba(210,130,150,0.8) 10px, transparent 10px), linear-gradient(180deg, transparent 40%, rgba(100,140,60,0.6) 40%); }
.deco-preview-lace { width: 52px; height: 14px; background: repeating-linear-gradient(90deg, rgba(255,255,255,0.9) 0, rgba(255,255,255,0.9) 6px, transparent 6px, transparent 10px), repeating-linear-gradient(180deg, rgba(255,255,255,0.7) 0, rgba(255,255,255,0.7) 3px, transparent 3px, transparent 6px); border-top: 1px solid rgba(200,180,150,0.5); border-bottom: 1px solid rgba(200,180,150,0.5); background-color: rgba(248,240,225,0.5); }
.deco-preview-wax-forest { width: 32px; height: 32px; background: radial-gradient(circle at 35% 30%, #60b860, #1a6020); border-radius: 50%; box-shadow: 0 2px 5px rgba(0,0,0,0.3); }
.deco-preview-paint-red { width: 52px; height: 12px; background: linear-gradient(90deg, transparent, #c83020 15%, #e84030 40%, #c83020 80%, transparent); border-radius: 999px; opacity: 0.8; }
.deco-preview-torn-strip { width: 52px; height: 14px; background: #fffbf0; clip-path: polygon(0% 0%, 100% 0%, 100% 60%, 96% 80%, 92% 60%, 88% 80%, 84% 60%, 80% 80%, 76% 60%, 72% 80%, 68% 60%, 64% 80%, 60% 60%, 56% 80%, 52% 60%, 48% 80%, 44% 60%, 40% 80%, 36% 60%, 32% 80%, 28% 60%, 24% 80%, 20% 60%, 16% 80%, 12% 60%, 8% 80%, 4% 60%, 0% 80%); }

/* ===== Text Palette ===== */
.text-palette { display: flex; flex-direction: column; gap: 6px; }
.text-picker-item {
  border: 1.5px solid #d8c89a;
  border-radius: 6px;
  background: #fffdf5;
  padding: 10px 14px;
  cursor: pointer;
  text-align: left;
  transition: border-color 140ms, transform 140ms;
  display: flex;
  align-items: center;
}
.text-picker-item:hover { border-color: #7a1f2b; transform: translateX(2px); }
.text-preview-hand { font-family: 'Caveat', cursive; font-size: 20px; color: #2a1f15; }
.text-preview-cursive { font-family: 'Dancing Script', cursive; font-size: 20px; color: #3a1f4a; }
.text-preview-typewriter { font-family: 'Special Elite', monospace; font-size: 14px; color: #1a1a1a; letter-spacing: 0.08em; }
.text-preview-serif { font-family: 'Cormorant Garamond', serif; font-size: 18px; font-style: italic; color: #2a1f15; }
.text-preview-marker { font-family: 'Permanent Marker', cursive; font-size: 18px; color: #1a1a1a; }
.text-preview-caption { font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: #786348; font-weight: 600; }
.text-preview-title { font-family: 'Playfair Display', serif; font-size: 22px; font-weight: 600; color: #2a1f15; letter-spacing: -0.01em; }
.text-preview-annotation { font-family: 'Caveat', cursive; font-size: 15px; color: #7a1f2b; border-bottom: 1px dashed #7a1f2b; }

/* ===== Stage & Viewport ===== */
.cb-stage { flex: 1; display: flex; flex-direction: column; overflow: hidden; position: relative; min-width: 0; }
.cb-viewport {
  flex: 1;
  overflow: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px;
  background-color: #2a1a0a;
  background-image:
    radial-gradient(ellipse 70% 50% at 20% 25%, rgba(90,55,15,0.18), transparent),
    radial-gradient(ellipse 60% 70% at 80% 75%, rgba(50,30,5,0.18), transparent),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.015 0.88' numOctaves='4' seed='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.24 0 0 0 0 0.12 0 0 0 0 0.02 0 0 0 0.09 0'/></filter><rect width='200' height='200' filter='url(%23n)'/></svg>"),
    repeating-linear-gradient(92deg, transparent 0px, transparent 9px, rgba(255,200,70,0.01) 9px, rgba(255,200,70,0.01) 10px);
  scrollbar-width: thin;
  scrollbar-color: #5a3a18 transparent;
}
.canvas-board-container { flex-shrink: 0; position: relative; transform-origin: top left; }
.book-board-left { transform-origin: top left; }

/* ===== Canvas Board ===== */
.canvas-board {
  width: 800px;
  height: 800px;
  position: relative;
  overflow: hidden;
  background-color: #f8f6f0;
  box-shadow:
    0 2px 4px rgba(0,0,0,0.1),
    0 6px 18px rgba(0,0,0,0.22),
    0 16px 48px rgba(0,0,0,0.35),
    0 36px 100px rgba(0,0,0,0.42),
    0 56px 140px rgba(0,0,0,0.22),
    3px 4px 0 rgba(0,0,0,0.07),
    -1px 0 0 rgba(255,255,255,0.05) inset;
  transform-origin: top left;
  user-select: none;
}

/* Global matte paper grain overlay — sits above elements, below border frame */
.canvas-board::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 9997;
  background-image:
    url(“data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='400' height='400'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='0.68 0.52' numOctaves='4' seed='17' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.5 0 0 0 0 0.42 0 0 0 0 0.3 0 0 0 0.06 0'/></filter><rect width='400' height='400' filter='url(%23g)'/></svg>”),
    url(“data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='400' height='400'><filter id='f'><feTurbulence type='fractalNoise' baseFrequency='0.018 0.22' numOctaves='2' seed='7' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.5 0 0 0 0 0.4 0 0 0 0 0.25 0 0 0 0.04 0'/></filter><rect width='400' height='400' filter='url(%23f)'/></svg>”);
  mix-blend-mode: multiply;
  opacity: 0.5;
}

/* ===== Border Frame — SVG ornate corner overlays ===== */
#canvas-border-frame {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 9998;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
#canvas-border-frame::before,
#canvas-border-frame::after {
  content: '';
  position: absolute;
  pointer-events: none;
}

.border-ornate-scroll      #canvas-border-frame { background-image: url('/static/img/borders/ornate-scroll.svg'); }
.border-victorian-flourish #canvas-border-frame { background-image: url('/static/img/borders/victorian-flourish.svg'); }
.border-art-deco           #canvas-border-frame { background-image: url('/static/img/borders/art-deco.svg'); }
.border-botanical-vine     #canvas-border-frame { background-image: url('/static/img/borders/botanical-vine.svg'); }
.border-ink-flourish       #canvas-border-frame { background-image: url('/static/img/borders/ink-flourish.svg'); }
.border-double-diamond     #canvas-border-frame { background-image: url('/static/img/borders/double-diamond.svg'); }
.border-feather-quill      #canvas-border-frame { background-image: url('/static/img/borders/feather-quill.svg'); }
.border-floral-rose        #canvas-border-frame { background-image: url('/static/img/borders/floral-rose.svg'); }
.border-royal-arch         #canvas-border-frame { background-image: url('/static/img/borders/royal-arch.svg'); }
.border-greek-key          #canvas-border-frame { background-image: url('/static/img/borders/greek-key.svg'); }

/* ===== Canvas Empty State ===== */
.canvas-empty {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  pointer-events: none;
  z-index: 0;
  opacity: 0.3;
  transition: opacity 0.4s ease;
}
.canvas-empty-icon { font-size: 40px; letter-spacing: -0.02em; }
.canvas-empty-title { font-family: 'Dancing Script', cursive; font-size: 28px; color: inherit; }
.canvas-empty-hint { font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; font-family: var(--font-sans); font-weight: 600; margin-top: 4px; }
.canvas-board.has-elements .canvas-empty { opacity: 0; }

/* ===== Zoom Bar ===== */
.cb-zoom-bar {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  background: linear-gradient(180deg, #1c1007 0%, #120b04 100%);
  border-top: 1px solid rgba(160,110,30,0.3);
  box-shadow: 0 -2px 14px rgba(0,0,0,0.35), inset 0 1px 0 rgba(200,160,60,0.08);
  color: #c8b898;
  font-size: 12px;
  letter-spacing: 0.08em;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
}
.cb-zoom-bar::-webkit-scrollbar { display: none; }
.zoom-btn {
  width: 28px; height: 28px;
  border-radius: 5px;
  border: 1px solid rgba(160,120,40,0.35);
  background: linear-gradient(180deg, rgba(255,250,235,0.07) 0%, rgba(255,250,235,0.03) 100%);
  color: #c4b090;
  font-size: 16px;
  cursor: pointer;
  transition: background 120ms, color 120ms, border-color 120ms;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 0 rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.04);
}
.zoom-btn:hover { background: linear-gradient(180deg, rgba(255,250,235,0.15) 0%, rgba(255,250,235,0.08) 100%); color: #f0dca0; border-color: rgba(200,160,60,0.5); }
.zoom-btn:disabled { opacity: 0.35; cursor: not-allowed; }
.zoom-fit { font-size: 11px; width: auto; padding: 0 8px; letter-spacing: 0.04em; margin-left: 4px; }
.zoom-hint { margin-left: auto; font-size: 11px; color: #6a5840; letter-spacing: 0.06em; }

/* ===== Element Toolbar ===== */
.el-toolbar {
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1000;
  display: flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(180deg, rgba(24,15,4,0.97) 0%, rgba(16,10,3,0.97) 100%);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(160,120,40,0.4);
  border-top-color: rgba(200,160,60,0.3);
  border-radius: 999px;
  padding: 7px 16px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.55), 0 1px 0 rgba(200,160,60,0.12) inset;
  white-space: nowrap;
}
.el-toolbar[hidden] { display: none; }
.el-toolbar-group { display: flex; align-items: center; gap: 5px; }
.el-toolbar-group + .el-toolbar-group { border-left: 1px solid rgba(120,90,40,0.35); padding-left: 8px; }
.el-tb-btn {
  width: 28px; height: 28px;
  border-radius: 50%;
  border: 1px solid rgba(120,90,40,0.45);
  background: rgba(255,250,235,0.05);
  color: #c8b898;
  font-size: 14px;
  cursor: pointer;
  transition: background 120ms, color 120ms;
  display: flex;
  align-items: center;
  justify-content: center;
}
.el-tb-btn:hover { background: rgba(255,250,235,0.14); color: #f8f1de; }
.el-tb-delete { color: #d06060; border-color: rgba(180,80,80,0.35); }
.el-tb-delete:hover { background: rgba(180,80,80,0.18); color: #e08080; }
.el-tb-label { color: #c8b898; font-size: 14px; }
.el-toolbar input[type="range"] {
  -webkit-appearance: none;
  width: 80px; height: 4px;
  border-radius: 2px;
  background: rgba(120,90,40,0.35);
  outline: none;
  border: none;
}
.el-toolbar input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: #c8a060;
  cursor: pointer;
  box-shadow: 0 1px 4px rgba(0,0,0,0.4);
}
.el-toolbar input[type="range"]:hover::-webkit-slider-thumb { background: #e8c080; }
.el-toolbar span { font-size: 11px; color: #a89070; min-width: 28px; }
.el-color-swatches { display: flex; gap: 4px; }
.el-color-swatch {
  width: 18px; height: 18px;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform 120ms, border-color 120ms;
}
.el-color-swatch:hover { transform: scale(1.2); }
.el-color-swatch.is-active { border-color: #f8f1de; }

/* Save status */
.save-status { font-size: 12px; color: #9a8070; letter-spacing: 0.06em; min-width: 60px; text-align: right; transition: color 0.3s; }
.save-status.saved { color: #1db87e; }
.save-status.error { color: #c05050; }

/* ===== Canvas Elements (base) ===== */
.canvas-el {
  position: absolute;
  cursor: grab;
  touch-action: none;
  user-select: none;
}
.canvas-el:active { cursor: grabbing; }
.canvas-el.is-selected { outline: 2px solid rgba(200,160,80,0.85); outline-offset: 3px; }
.canvas-el:hover:not(.is-selected) { outline: 1px dashed rgba(200,160,80,0.4); outline-offset: 3px; }

/* Rotation handle — appears above selected element */
.rotate-handle {
  position: absolute;
  top: -34px;
  left: 50%;
  margin-left: -10px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff8e8;
  border: 2px solid #9a6030;
  cursor: grab;
  z-index: 10001;
  box-shadow: 0 2px 8px rgba(0,0,0,0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  color: #7a4020;
  line-height: 1;
  user-select: none;
}
.rotate-handle::before {
  content: '';
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: 1px;
  height: 14px;
  background: rgba(154,96,48,0.55);
}
.rotate-handle:active { cursor: grabbing; }

/* ===== Resize Handles ===== */
.resize-handle {
  position: absolute;
  width: 9px;
  height: 9px;
  background: #fff;
  border: 2px solid rgba(200,160,80,0.9);
  border-radius: 2px;
  z-index: 1000;
  touch-action: none;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.resize-nw { top: 0; left: 0; transform: translate(-50%, -50%); cursor: nw-resize; }
.resize-ne { top: 0; right: 0; transform: translate(50%, -50%); cursor: ne-resize; }
.resize-se { bottom: 0; right: 0; transform: translate(50%, 50%); cursor: se-resize; }
.resize-sw { bottom: 0; left: 0; transform: translate(-50%, 50%); cursor: sw-resize; }
.resize-n { top: 0; left: 50%; transform: translate(-50%, -50%); cursor: n-resize; }
.resize-e { top: 50%; right: 0; transform: translate(50%, -50%); cursor: e-resize; }
.resize-s { bottom: 0; left: 50%; transform: translate(-50%, 50%); cursor: s-resize; }
.resize-w { top: 50%; left: 0; transform: translate(-50%, -50%); cursor: w-resize; }
.resize-handle:hover { background: rgba(200,160,80,0.15); border-color: #c8802a; }

/* ===== Photo Element ===== */
/* Polaroid frame style */
.canvas-el-photo .polaroid {
  background: #fffdf5;
  padding: 10px 10px 40px;
  box-shadow: 2px 5px 18px rgba(40,25,10,0.22), 0 1px 0 rgba(255,255,255,0.6) inset;
  display: inline-block;
  position: relative;
  border-radius: 1px;
  width: 200px;
}
.canvas-el-photo .polaroid-img-wrap { width: 180px; height: 180px; background: #1a1410; overflow: hidden; }
.canvas-el-photo .polaroid-img-wrap img { width: 100%; height: 100%; object-fit: cover; filter: saturate(0.93) contrast(1.04); display: block; }
.canvas-el-photo .polaroid-caption { font-family: 'Caveat', cursive; font-size: 20px; color: #2a1f15; text-align: center; margin-top: 8px; line-height: 1.1; padding: 0 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.canvas-el-photo .polaroid-sub { font-family: 'Caveat', cursive; font-size: 14px; color: #7a5b36; text-align: center; margin-top: 1px; }
/* Thin white border frame style */
.canvas-el-photo .photo-thin-border {
  background: #fff;
  padding: 6px;
  box-shadow: 1px 3px 12px rgba(40,25,10,0.18);
  display: inline-block;
  border-radius: 1px;
}
.canvas-el-photo .photo-thin-border img {
  width: 200px; height: 200px;
  object-fit: cover;
  display: block;
  filter: saturate(0.95) contrast(1.03);
}
/* No border / original style */
.canvas-el-photo .photo-no-border {
  display: inline-block;
  line-height: 0;
  box-shadow: 1px 3px 12px rgba(40,25,10,0.15);
}
.canvas-el-photo .photo-no-border img {
  width: 200px; height: 200px;
  object-fit: cover;
  display: block;
}

/* ===== Paper Note Elements ===== */
.canvas-el-paper .paper-note {
  min-width: 200px; max-width: 280px; min-height: 160px;
  padding: 16px 18px;
  position: relative;
  box-shadow: 1px 3px 12px rgba(40,25,10,0.18), 0 1px 0 rgba(255,255,255,0.6) inset;
  border-radius: 1px;
}
.canvas-el-paper .paper-text {
  width: 100%; height: auto; min-height: 120px; border: none; background: transparent;
  font-family: 'Caveat', cursive; font-size: 20px; color: inherit;
  resize: none; outline: none; line-height: 1.5; cursor: text; display: block;
  overflow: visible;
  box-sizing: border-box;
}
/* Reset browser default margins on elements created inside contenteditable */
.paper-text p, .paper-text div,
.canvas-text-content p, .canvas-text-content div { margin: 0; padding: 0; }
.note-resize-br {
  position: absolute;
  bottom: 2px;
  right: 2px;
  width: 14px;
  height: 14px;
  cursor: se-resize;
  opacity: 0;
  transition: opacity 140ms;
  background:
    linear-gradient(135deg, transparent 50%, rgba(122,31,43,0.7) 50%) bottom right / 8px 8px no-repeat,
    linear-gradient(135deg, transparent 50%, rgba(122,31,43,0.45) 50%) bottom right / 12px 12px no-repeat;
}
.canvas-el.is-selected .note-resize-br { opacity: 1; }
.paper-lined { background-color: #fffdf8; background-image: repeating-linear-gradient(transparent 0px, transparent 27px, rgba(100,140,210,0.3) 27px, rgba(100,140,210,0.3) 28px); background-size: 100% 28px; border-left: 3px solid rgba(200,80,80,0.35); padding-left: 20px !important; color: #2a1f15; }
.paper-grid { background-color: #fffdf8; background-image: linear-gradient(rgba(100,140,200,0.2) 1px, transparent 1px), linear-gradient(90deg, rgba(100,140,200,0.2) 1px, transparent 1px); background-size: 20px 20px; color: #2a1f15; }
.paper-kraft { background-color: #c09060; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='150' height='150'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' seed='7'/><feColorMatrix values='0 0 0 0 0.15  0 0 0 0 0.08  0 0 0 0 0  0 0 0 0.12 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>"); color: #3a2010; }
.paper-kraft .paper-text { color: #3a2010; }
.paper-tea { background-color: #e0c890; background-image: radial-gradient(ellipse at top left, rgba(160,100,40,0.45), transparent 55%), radial-gradient(ellipse at bottom right, rgba(140,90,30,0.4), transparent 55%); color: #2a1f15; }
.paper-vellum { background: rgba(255,253,248,0.82); border: 1px solid rgba(200,190,160,0.7); color: #2a1f15; backdrop-filter: blur(3px); }
.paper-dotted { background-color: #fffdf8; background-image: radial-gradient(circle, rgba(100,140,200,0.4) 1.5px, transparent 1.5px); background-size: 18px 18px; color: #2a1f15; }
.paper-dark { background-color: #1c1810; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='150' height='150'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' seed='11'/><feColorMatrix values='0 0 0 0 0.05  0 0 0 0 0.04  0 0 0 0 0.02  0 0 0 0.12 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>"); color: #e8d8a0; }
.paper-dark .paper-text { color: #d8c890; }
.paper-postit { background: #f7e84a; background-image: linear-gradient(180deg, rgba(180,160,0,0.14) 0%, transparent 25%); color: #3a3010; box-shadow: 2px 4px 14px rgba(80,70,0,0.25), 0 1px 0 rgba(255,255,255,0.5) inset; }
.paper-postit .paper-text { color: #3a3010; }
.paper-recipe { background: #fffdf0; border-top: 4px solid #e8c060; background-image: repeating-linear-gradient(transparent 0px, transparent 27px, rgba(180,140,40,0.22) 27px, rgba(180,140,40,0.22) 28px); background-size: 100% 28px; color: #3a2808; }
.paper-recipe .paper-text { color: #3a2808; }
.paper-envelope { background: #f8f4e0; border: 1px solid #d4c898; color: #2a2010; padding-top: 28px !important; }
.paper-envelope::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 26px; background: linear-gradient(135deg, #e8d8a0 50%, transparent 50%), linear-gradient(225deg, #e8d8a0 50%, transparent 50%); background-size: 50% 26px; background-repeat: no-repeat; background-position: 0 0, 100% 0; }
.paper-music { background-color: #fffdf8; background-image: repeating-linear-gradient(transparent 0px, transparent 8px, rgba(0,0,0,0.28) 8px, rgba(0,0,0,0.28) 9px, transparent 9px, transparent 11px, rgba(0,0,0,0.14) 11px, rgba(0,0,0,0.14) 12px); background-size: 100% 20px; color: #2a1f15; }

/* ===== Torn Paper Notes ===== */
.paper-torn { background: #fffbf0; color: #2a1f15; clip-path: polygon(0% 0%, 100% 0%, 100% 88%, 97% 91%, 93% 87%, 89% 91%, 85% 88%, 81% 91%, 77% 87%, 73% 91%, 69% 88%, 65% 91%, 61% 87%, 57% 91%, 53% 88%, 49% 91%, 45% 87%, 41% 91%, 37% 88%, 33% 91%, 29% 87%, 25% 91%, 21% 88%, 17% 91%, 13% 88%, 9% 91%, 5% 88%, 1% 91%, 0% 88%); }
.paper-torn-ruled {
  background-color: #fffdf8;
  background-image: repeating-linear-gradient(transparent 0px, transparent 27px, rgba(100,140,210,0.3) 27px, rgba(100,140,210,0.3) 28px);
  background-size: 100% 28px;
  border-left: 3px solid rgba(200,80,80,0.35);
  padding-left: 20px !important;
  color: #2a1f15;
  clip-path: polygon(0% 0%, 100% 0%, 100% 88%, 97% 91%, 93% 87%, 89% 91%, 85% 88%, 81% 91%, 77% 87%, 73% 91%, 69% 88%, 65% 91%, 61% 87%, 57% 91%, 53% 88%, 49% 91%, 45% 87%, 41% 91%, 37% 88%, 33% 91%, 29% 87%, 25% 91%, 21% 88%, 17% 91%, 13% 88%, 9% 91%, 5% 88%, 1% 91%, 0% 88%);
}
.paper-torn-kraft {
  background-color: #c09060;
  color: #2a1008;
  clip-path: polygon(0% 4%, 4% 0%, 8% 3%, 12% 0%, 16% 3%, 21% 0%, 25% 3%, 30% 0%, 34% 3%, 39% 0%, 43% 2%, 48% 0%, 52% 3%, 57% 0%, 61% 2%, 66% 0%, 70% 3%, 75% 0%, 79% 2%, 84% 0%, 88% 3%, 93% 0%, 97% 2%, 100% 0%, 100% 88%, 97% 91%, 93% 87%, 89% 91%, 85% 88%, 81% 91%, 77% 87%, 73% 91%, 69% 88%, 65% 91%, 61% 87%, 57% 91%, 53% 88%, 49% 91%, 45% 87%, 41% 91%, 37% 88%, 33% 91%, 29% 87%, 25% 91%, 21% 88%, 17% 91%, 13% 88%, 9% 91%, 5% 88%, 1% 91%, 0% 88%);
}
.paper-torn-kraft .paper-text { color: #2a1008; }
.paper-torn-flag { background: #fffbf0; color: #2a1f15; clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 50% 85%, 0% 100%); }
.paper-torn-flag .paper-note { padding-bottom: 36px !important; }

/* ===== Sticker Element ===== */
.canvas-el-sticker .sticker-body { display: flex; align-items: center; justify-content: center; width: 64px; height: 64px; background: none; cursor: grab; }
.canvas-el-sticker .sticker-emoji { font-size: 40px; line-height: 1; display: block; filter: drop-shadow(0 1px 2px rgba(0,0,0,0.15)); }

/* ===== Image Sticker Sheet Element ===== */
.canvas-el-img-sticker { background: none; cursor: grab; }
.canvas-el-img-sticker .sticker-sheet-img { display: block; height: auto; user-select: none; pointer-events: none; }

/* ===== Image Sticker Picker ===== */
.sticker-section-label {
  font-family: 'Special Elite', serif;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(200,160,60,0.7);
  margin: 8px 0 4px;
}
/* ===== Ribbon / Washi Tape Picker ===== */
.ribbon-grid {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 8px;
}
.ribbon-item {
  border: 1.5px solid rgba(180,130,40,0.2);
  border-radius: 6px;
  background: #fffdf5;
  padding: 4px;
  cursor: pointer;
  overflow: hidden;
  transition: border-color 0.12s, transform 0.12s;
  width: 100%;
}
.ribbon-item:hover { border-color: #7a1f2b; transform: translateY(-2px); box-shadow: 0 3px 8px rgba(0,0,0,0.12); }
.ribbon-item img { width: 100%; height: auto; display: block; border-radius: 3px; }

.img-sticker-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
  margin-bottom: 4px;
}
.img-sticker-picker-item {
  border: 1px solid rgba(180,130,40,0.15);
  border-radius: 6px;
  background: rgba(255,255,255,0.03);
  padding: 3px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1;
  overflow: hidden;
  transition: background 0.12s, border-color 0.12s, transform 0.12s;
}
.img-sticker-picker-item:hover {
  background: rgba(180,130,40,0.14);
  border-color: rgba(200,160,60,0.55);
  transform: scale(1.08);
}
.img-sticker-picker-item img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* ===== Emoji Element ===== */
.canvas-el-emoji .emoji-element { display: flex; align-items: center; justify-content: center; }
.canvas-el-emoji .emoji-el-icon { font-size: 56px; line-height: 1; display: block; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2)); }

/* ===== Emoji Panel ===== */
.emoji-section-label { font-size: 10px; font-weight: 700; color: #786348; letter-spacing: 0.1em; text-transform: uppercase; margin: 10px 0 4px; }
.emoji-section-label:first-of-type { margin-top: 2px; }
.emoji-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; margin-bottom: 2px; }
.emoji-picker-item {
  border: none;
  border-radius: 6px;
  background: transparent;
  padding: 4px 2px;
  cursor: pointer;
  font-size: 20px;
  line-height: 1;
  text-align: center;
  transition: background 120ms, transform 120ms;
  display: flex;
  align-items: center;
  justify-content: center;
}
.emoji-picker-item:hover { background: rgba(122,31,43,0.07); transform: scale(1.2); }

/* ===== New Deco Canvas Elements ===== */
.canvas-el-ribbon .ribbon-banner {
  min-width: 200px; height: 44px;
  background: linear-gradient(180deg, #e8c830 0%, #c8a010 100%);
  clip-path: polygon(0% 0%, 100% 0%, 94% 50%, 100% 100%, 0% 100%, 6% 50%);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}
.canvas-el-ribbon.style-red .ribbon-banner { background: linear-gradient(180deg, #e85050 0%, #a01020 100%); }
.canvas-el-ribbon.style-blue .ribbon-banner { background: linear-gradient(180deg, #5070e0 0%, #1030a0 100%); }
.ribbon-text { font-family: 'Dancing Script', cursive; font-size: 18px; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,0.3); letter-spacing: 0.05em; }

.canvas-el-string-lights .string-lights {
  display: flex; align-items: flex-end; gap: 16px;
  padding: 10px 8px 4px;
  position: relative;
  min-width: 220px;
}
.canvas-el-string-lights .string-lights::before {
  content: '';
  position: absolute;
  top: 6px; left: 8px; right: 8px; height: 2px;
  background: repeating-linear-gradient(90deg, #555 0, #555 8px, transparent 8px, transparent 16px);
}
.light-bulb { width: 10px; height: 16px; border-radius: 50% 50% 40% 40%; box-shadow: 0 0 6px currentColor; position: relative; }

.canvas-el-bunting .bunting-flags {
  display: flex; gap: 0; align-items: flex-start;
  padding-top: 8px; position: relative; min-width: 180px;
}
.canvas-el-bunting .bunting-flags::before {
  content: ''; position: absolute; top: 2px; left: 0; right: 0; height: 2px;
  background: #888;
}
.bunting-flag {
  width: 22px; height: 28px;
  clip-path: polygon(0% 0%, 100% 0%, 50% 100%);
  opacity: 0.9;
}

.canvas-el-dried-flower .dried-flower { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.dried-flower-head { width: 40px; height: 40px; background: radial-gradient(circle at 40% 35%, #e8b0c0, #c07090); border-radius: 50% 45% 55% 40%; box-shadow: 0 2px 6px rgba(0,0,0,0.2); }
.dried-flower-stem { width: 3px; height: 50px; background: linear-gradient(180deg, #7a9040, #4a6020); border-radius: 2px; }

.canvas-el-lace .lace-strip {
  width: 240px; height: 30px;
  background: repeating-linear-gradient(90deg, rgba(255,255,255,0.95) 0, rgba(255,255,255,0.95) 8px, transparent 8px, transparent 14px),
              repeating-linear-gradient(180deg, rgba(255,255,255,0.8) 0, rgba(255,255,255,0.8) 5px, transparent 5px, transparent 10px);
  background-color: rgba(248,240,220,0.6);
  border-top: 1.5px solid rgba(220,200,160,0.7);
  border-bottom: 1.5px solid rgba(220,200,160,0.7);
  box-shadow: 0 1px 4px rgba(0,0,0,0.08);
}

.canvas-el-torn-strip .torn-paper-strip {
  width: 240px; height: 24px;
  background: #fffbf0;
  clip-path: polygon(0% 0%, 100% 0%, 100% 50%, 97% 80%, 93% 50%, 89% 85%, 85% 50%, 81% 80%, 77% 50%, 73% 85%, 69% 50%, 65% 80%, 61% 50%, 57% 85%, 53% 50%, 49% 80%, 45% 50%, 41% 85%, 37% 50%, 33% 80%, 29% 50%, 25% 85%, 21% 50%, 17% 80%, 13% 50%, 9% 85%, 5% 50%, 1% 80%, 0% 50%);
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}
.canvas-el-torn-strip.style-kraft .torn-paper-strip { background: #c09060; }
.canvas-el-torn-strip.style-dark .torn-paper-strip { background: #1c1810; }

/* ===== New Vintage Canvas Elements ===== */
.canvas-el-entry-visa .entry-visa {
  width: 200px; padding: 14px 18px;
  background: #e8f0e0; border: 3px solid #2a6020;
  border-radius: 4px; font-family: 'Special Elite', monospace;
  color: #2a4020; position: relative; overflow: hidden;
}
.visa-header { font-size: 8px; letter-spacing: 0.2em; text-transform: uppercase; opacity: 0.7; margin-bottom: 4px; }
.visa-country { font-size: 22px; letter-spacing: 0.14em; font-weight: bold; text-transform: uppercase; }
.visa-type { font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; margin-top: 2px; opacity: 0.8; }
.visa-date { font-size: 10px; margin-top: 6px; opacity: 0.7; }
.visa-watermark { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); font-size: 44px; opacity: 0.08; }

.canvas-el-baggage-tag .baggage-tag {
  width: 100px; padding: 14px 12px 10px;
  background: #f0e8d0; border: 2px solid #6a4820;
  border-radius: 8px 8px 4px 4px; font-family: 'Special Elite', monospace;
  color: #4a2808; text-align: center; position: relative;
}
.bt-hole { width: 14px; height: 14px; border-radius: 50%; border: 2px solid #6a4820; background: white; margin: 0 auto 8px; }
.bt-airline { font-size: 8px; letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.7; }
.bt-dest { font-size: 36px; letter-spacing: 0.06em; font-weight: bold; line-height: 1; margin: 4px 0; }
.bt-flight { font-size: 10px; opacity: 0.7; }
.bt-name { font-size: 8px; margin-top: 4px; letter-spacing: 0.04em; opacity: 0.8; }

.canvas-el-travel-journal .travel-journal {
  width: 140px; padding: 24px 16px 20px;
  background: #2a1f15; border: 3px solid #8a6820;
  border-radius: 4px; text-align: center;
  box-shadow: inset 0 0 20px rgba(0,0,0,0.3), 2px 4px 12px rgba(0,0,0,0.3);
}
.tj-stripe { height: 4px; background: linear-gradient(90deg, #c8a020, #e8c040, #c8a020); margin: 0 -16px 14px; }
.tj-title { font-family: 'Dancing Script', cursive; font-size: 22px; color: #e8c880; letter-spacing: 0.04em; }
.tj-date { font-family: 'Special Elite', monospace; font-size: 10px; color: rgba(232,200,128,0.6); margin-top: 4px; letter-spacing: 0.14em; text-transform: uppercase; }
.tj-deco { color: #c8a020; font-size: 12px; margin-top: 8px; letter-spacing: 0.2em; }

.canvas-el-currency .currency-note {
  width: 200px; padding: 14px 16px;
  background: linear-gradient(135deg, #e0f0d0 0%, #d0eac0 100%);
  border: 2px solid #4a8040; border-radius: 3px;
  font-family: 'Special Elite', monospace; color: #2a4020;
  box-shadow: inset 0 0 30px rgba(70,130,50,0.08);
  position: relative; overflow: hidden;
}
.cn-header { display: flex; justify-content: space-between; align-items: baseline; }
.cn-amount { font-size: 36px; font-weight: bold; }
.cn-unit { font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.7; margin-top: 2px; }
.cn-deco { position: absolute; right: 16px; bottom: 10px; font-size: 48px; opacity: 0.06; }

.canvas-el-souvenir .souvenir-tag {
  width: 90px; padding: 10px 10px 14px;
  background: #fff0e0; border: 1.5px solid #c4a060;
  border-radius: 8px 8px 50% 50%; font-family: 'Dancing Script', cursive;
  text-align: center; color: #4a2808; position: relative;
  box-shadow: 1px 2px 8px rgba(0,0,0,0.12);
}
.st-hole { width: 12px; height: 12px; border-radius: 50%; border: 1.5px solid #c4a060; background: white; margin: 0 auto 6px; }
.st-place { font-size: 18px; font-weight: bold; line-height: 1.1; }
.st-label { font-size: 11px; color: #786348; margin-top: 2px; }
.st-deco { font-size: 16px; color: #c88080; margin-top: 4px; }

.canvas-el-ticket-stub .ticket-stub {
  width: 200px; height: 70px; display: flex;
  background: #e8d8c0; border: 1.5px solid #a08060;
  font-family: 'Special Elite', monospace; color: #4a2808;
  box-shadow: 1px 2px 8px rgba(0,0,0,0.18);
  border-radius: 2px; overflow: hidden;
}
.ts-left { flex: 1; padding: 10px 12px; display: flex; flex-direction: column; justify-content: center; }
.ts-venue { font-size: 11px; font-weight: bold; letter-spacing: 0.08em; text-transform: uppercase; }
.ts-seat { font-size: 10px; opacity: 0.7; margin-top: 3px; }
.ts-divider { width: 1px; background: repeating-linear-gradient(180deg, #a08060 0, #a08060 5px, transparent 5px, transparent 9px); flex-shrink: 0; }
.ts-right { width: 50px; padding: 10px 6px; display: flex; align-items: center; justify-content: center; flex-direction: column; }
.ts-price { font-size: 18px; font-weight: bold; }

/* ===== Washi Elements ===== */
.canvas-el-washi .washi-strip { width: 220px; height: 28px; border-radius: 1px; box-shadow: 0 1px 4px rgba(0,0,0,0.12); opacity: 0.9; }
.washi-yellow-stripe { background: repeating-linear-gradient(45deg, #f5e090, #f5e090 8px, #e8c840 8px, #e8c840 16px); border-top: 1px solid rgba(200,160,20,0.4); border-bottom: 1px solid rgba(200,160,20,0.4); }
.washi-pink-floral { background: #f8d8e8; background-image: radial-gradient(circle at 10px 14px, #e890b8 3px, transparent 3px), radial-gradient(circle at 30px 8px, rgba(232,144,184,0.6) 2px, transparent 2px), radial-gradient(circle at 22px 20px, rgba(248,176,210,0.4) 4px, transparent 4px); background-size: 40px 28px; }
.washi-blue-dots { background: #d8eeff; background-image: radial-gradient(circle, #8ab8e8 3px, transparent 3px); background-size: 16px 16px; }
.washi-green-botanical { background: #d4eed0; background-image: radial-gradient(ellipse at 8px 14px, rgba(70,130,70,0.5) 5px 3px, transparent 6px), radial-gradient(ellipse at 26px 8px, rgba(70,130,70,0.4) 4px 2px, transparent 5px); background-size: 36px 28px; }
.washi-kraft-metallic { background: linear-gradient(180deg, #e0c070 0%, #c8a038 40%, #e8d080 60%, #b89030 100%); border-top: 1px solid rgba(255,220,120,0.6); border-bottom: 1px solid rgba(160,120,20,0.6); }
.washi-red-gingham { background-color: #fff8f8; background-image: linear-gradient(0deg, transparent 50%, rgba(200,60,60,0.3) 50%), linear-gradient(90deg, transparent 50%, rgba(200,60,60,0.3) 50%); background-size: 12px 12px; }
.washi-rainbow { background: linear-gradient(90deg, #ff6b6b, #ffd93d, #6bcb77, #4d96ff, #c77dff, #ff6b6b); }
.washi-black-dots { background: #f0f0f0; background-image: radial-gradient(circle, #2a2a2a 2.5px, transparent 2.5px); background-size: 14px 14px; }
.washi-orange-chevron { background: #f8a050; background-image: linear-gradient(135deg, rgba(255,255,255,0.3) 25%, transparent 25%), linear-gradient(225deg, rgba(255,255,255,0.3) 25%, transparent 25%); background-size: 14px 14px; }
.washi-mint-stars { background: #b8f0e0; background-image: radial-gradient(circle at 10px 10px, rgba(40,150,120,0.5) 1.5px, transparent 1.5px), radial-gradient(circle at 20px 20px, rgba(40,150,120,0.3) 2px, transparent 2px); background-size: 24px 24px; }
.washi-lavender { background: #e8d8f8; background-image: radial-gradient(ellipse at 12px 14px, rgba(130,80,180,0.4) 4px 3px, transparent 5px), radial-gradient(ellipse at 28px 8px, rgba(180,120,220,0.35) 3px 2px, transparent 4px); background-size: 40px 28px; }
.washi-coral-stripe { background: repeating-linear-gradient(90deg, #f0806a, #f0806a 10px, #f8c8b8 10px, #f8c8b8 20px); }
.washi-watercolor { background: linear-gradient(90deg, rgba(100,180,230,0.5), rgba(180,220,250,0.7), rgba(220,240,200,0.6), rgba(250,200,200,0.5)); border-top: 1px solid rgba(100,160,210,0.25); }
.washi-vintage-roses { background: #f0e0d0; background-image: radial-gradient(circle at 10px 14px, rgba(180,80,80,0.5) 4px, transparent 4px), radial-gradient(circle at 30px 7px, rgba(220,120,100,0.45) 3px, transparent 3px); background-size: 40px 28px; }

/* ===== Vintage: Passport Stamp ===== */
.canvas-el-stamp .vintage-stamp { width: 130px; height: 130px; border: 3.5px solid #8a2020; border-radius: 50%; display: flex; align-items: center; justify-content: center; position: relative; background: transparent; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.18)); cursor: grab; }
.canvas-el-stamp .vintage-stamp::before { content: ''; position: absolute; inset: 7px; border: 1px solid #8a2020; border-radius: 50%; }
.canvas-el-stamp .vintage-stamp::after { content: ''; position: absolute; inset: 20px; border: 1px dashed rgba(138,32,32,0.35); border-radius: 50%; }
.canvas-el-stamp .stamp-inner { text-align: center; font-family: 'Special Elite', monospace; color: #8a2020; z-index: 1; }
.canvas-el-stamp .stamp-city { font-size: 18px; letter-spacing: 0.14em; text-transform: uppercase; display: block; }
.canvas-el-stamp .stamp-date { font-size: 10px; letter-spacing: 0.2em; display: block; margin-top: 2px; opacity: 0.8; }

/* Postmark */
.canvas-el-postmark .postmark { width: 160px; padding: 10px 14px; border: 2px solid #6a4820; position: relative; font-family: 'Special Elite', monospace; color: #6a4820; background: transparent; }
.canvas-el-postmark .postmark::before { content: ''; position: absolute; right: -1px; top: -1px; bottom: -1px; width: 28px; border-left: 2px solid #6a4820; background: repeating-linear-gradient(0deg, transparent 0, transparent 3px, rgba(100,70,30,0.25) 3px, rgba(100,70,30,0.25) 4px); }
.canvas-el-postmark .postmark-city { font-size: 17px; letter-spacing: 0.1em; text-transform: uppercase; display: block; }
.canvas-el-postmark .postmark-date { font-size: 11px; letter-spacing: 0.12em; display: block; margin-top: 2px; opacity: 0.75; }

/* Boarding Pass */
.canvas-el-boarding .boarding-pass { width: 280px; background: #fffdf0; border: 1px solid #d4b890; padding: 14px 16px 10px; position: relative; font-family: 'Special Elite', monospace; border-radius: 3px; box-shadow: 1px 2px 8px rgba(0,0,0,0.12); cursor: grab; }
.canvas-el-boarding .bp-header { font-size: 9px; letter-spacing: 0.28em; text-transform: uppercase; color: #8a7060; margin-bottom: 6px; display: flex; justify-content: space-between; align-items: center; }
.canvas-el-boarding .bp-airline { font-size: 16px; font-style: italic; color: #7a1f2b; }
.canvas-el-boarding .bp-route { display: flex; align-items: center; justify-content: space-between; padding: 6px 0; }
.canvas-el-boarding .bp-city { font-size: 30px; letter-spacing: 0.04em; color: #1a1008; }
.canvas-el-boarding .bp-arrow { color: #8a7060; font-size: 22px; }
.canvas-el-boarding .bp-sep { margin: 8px -16px; border: none; border-top: 1.5px dashed #d4b890; position: relative; }
.canvas-el-boarding .bp-sep::before, .canvas-el-boarding .bp-sep::after { content: ''; position: absolute; top: -8px; width: 12px; height: 12px; border-radius: 50%; background: #221a0e; }
.canvas-el-boarding .bp-sep::before { left: -8px; }
.canvas-el-boarding .bp-sep::after { right: -8px; }
.canvas-el-boarding .bp-footer { display: flex; gap: 12px; margin-top: 8px; }
.canvas-el-boarding .bp-field { display: flex; flex-direction: column; gap: 1px; }
.canvas-el-boarding .bp-field-label { font-size: 7px; letter-spacing: 0.24em; text-transform: uppercase; color: #a09080; }
.canvas-el-boarding .bp-field-val { font-size: 13px; color: #2a1810; }
.canvas-el-boarding .bp-barcode { height: 22px; background: repeating-linear-gradient(90deg, #2a1810 0, #2a1810 2px, transparent 2px, transparent 4px); margin-top: 10px; opacity: 0.35; }

/* Postcard */
.canvas-el-postcard .vintage-postcard { width: 280px; height: 180px; background: #fffdf5; border: 1px solid #d4c8a0; padding: 12px 14px; display: grid; grid-template-columns: 1fr 72px; grid-template-rows: auto 1fr; gap: 8px 12px; position: relative; box-shadow: 1px 2px 8px rgba(0,0,0,0.1); cursor: grab; }
.canvas-el-postcard .pc-header { grid-column: 1 / -1; font-size: 9px; letter-spacing: 0.28em; text-transform: uppercase; color: #8a7060; border-bottom: 1px solid #d4c8a0; padding-bottom: 5px; font-family: 'Special Elite', monospace; display: flex; justify-content: space-between; }
.canvas-el-postcard .pc-lines { display: flex; flex-direction: column; justify-content: space-around; padding: 4px 0; }
.canvas-el-postcard .pc-line { height: 1px; background: #d4c8a0; }
.canvas-el-postcard .pc-stamp-box { border: 1px solid #d4c8a0; display: flex; align-items: center; justify-content: center; font-family: 'Special Elite', monospace; font-size: 10px; letter-spacing: 0.08em; color: #c4b890; flex-direction: column; gap: 4px; }

/* Hotel Tag */
.canvas-el-hotel .hotel-tag { width: 100px; min-height: 160px; background: #fffdf0; border: 1px solid #d4b890; border-radius: 4px 4px 50% 50% / 4px 4px 30px 30px; padding: 18px 10px 24px; text-align: center; font-family: 'Cormorant Garamond', serif; position: relative; box-shadow: 1px 2px 8px rgba(0,0,0,0.1); cursor: grab; }
.canvas-el-hotel .hotel-tag::before { content: ''; position: absolute; top: -10px; left: 50%; transform: translateX(-50%); width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid #d4b890; background: #faf6ea; }
.canvas-el-hotel .hotel-tag::after { content: ''; position: absolute; top: -18px; left: 50%; transform: translateX(-50%); width: 1px; height: 12px; background: #c4a070; }
.canvas-el-hotel .ht-name { font-size: 13px; font-style: italic; color: #2a1810; display: block; margin-bottom: 6px; line-height: 1.3; }
.canvas-el-hotel .ht-label { font-size: 8px; letter-spacing: 0.22em; text-transform: uppercase; color: #8a7060; display: block; }
.canvas-el-hotel .ht-room { font-size: 22px; font-weight: 600; color: #2a1810; display: block; margin-top: 8px; }
.canvas-el-hotel .ht-deco { display: block; font-size: 14px; color: #c8a060; margin-top: 8px; }

/* Museum Ticket */
.canvas-el-ticket .museum-ticket { width: 220px; background: #f0e8d0; border: 1px solid #c4b090; padding: 10px 14px; position: relative; font-family: 'Special Elite', monospace; cursor: grab; box-shadow: 1px 2px 8px rgba(0,0,0,0.1); }
.canvas-el-ticket .museum-ticket::before { content: ''; position: absolute; left: -1px; right: -1px; top: 36px; border-top: 1px dashed #c4b090; }
.canvas-el-ticket .mt-header { font-size: 8px; letter-spacing: 0.22em; text-transform: uppercase; color: #7a6040; margin-bottom: 4px; display: block; }
.canvas-el-ticket .mt-event { font-size: 15px; color: #2a1810; display: block; margin-bottom: 6px; text-transform: uppercase; letter-spacing: 0.06em; }
.canvas-el-ticket .mt-footer { display: flex; justify-content: space-between; margin-top: 16px; font-size: 10px; color: #7a6040; }
.canvas-el-ticket .mt-barcode { height: 16px; background: repeating-linear-gradient(90deg, #7a6040 0, #7a6040 1.5px, transparent 1.5px, transparent 3.5px); opacity: 0.4; margin-top: 6px; }

/* Telegram */
.canvas-el-telegram .telegram-card { width: 260px; background: #f5f0e0; border: 2px solid #2a2018; padding: 10px 14px; font-family: 'Special Elite', monospace; cursor: grab; box-shadow: 1px 2px 8px rgba(0,0,0,0.1); }
.canvas-el-telegram .tg-header { font-size: 9px; letter-spacing: 0.3em; text-transform: uppercase; color: #2a2018; border-bottom: 2px solid #2a2018; padding-bottom: 4px; margin-bottom: 6px; display: flex; justify-content: space-between; align-items: center; }
.canvas-el-telegram .tg-word { font-size: 8px; letter-spacing: 0.18em; border: 1px solid #2a2018; padding: 1px 4px; color: #2a2018; }
.canvas-el-telegram .tg-body { font-size: 12px; color: #2a2018; line-height: 1.7; letter-spacing: 0.06em; }
.canvas-el-telegram .tg-footer { font-size: 8px; letter-spacing: 0.15em; color: #8a7a60; margin-top: 6px; display: flex; justify-content: space-between; }

/* Library Card */
.canvas-el-library .library-card { width: 220px; background: #f0e8d0; border: 1px solid #c4a860; padding: 10px 14px 14px; font-family: 'Special Elite', monospace; cursor: grab; box-shadow: 1px 2px 8px rgba(0,0,0,0.1); }
.canvas-el-library .lc-header { font-size: 9px; letter-spacing: 0.22em; text-transform: uppercase; color: #7a6040; border-bottom: 1px solid #c4a860; padding-bottom: 4px; margin-bottom: 8px; }
.canvas-el-library .lc-title { font-size: 14px; color: #2a1810; font-style: italic; margin-bottom: 6px; }
.canvas-el-library .lc-rows { display: flex; flex-direction: column; gap: 6px; }
.canvas-el-library .lc-row { display: flex; gap: 8px; font-size: 10px; align-items: center; }
.canvas-el-library .lc-label { font-size: 8px; letter-spacing: 0.15em; text-transform: uppercase; color: #7a6040; flex-shrink: 0; }
.canvas-el-library .lc-line { flex: 1; height: 1px; background: #c4a860; }

/* Coordinate Tag */
.canvas-el-coords .coords-tag { min-width: 160px; padding: 10px 14px; border: 1px dashed #786348; font-family: 'Special Elite', monospace; cursor: grab; }
.canvas-el-coords .coords-label { font-size: 8px; letter-spacing: 0.22em; text-transform: uppercase; color: #786348; display: block; margin-bottom: 4px; }
.canvas-el-coords .coords-value { font-size: 16px; color: #2a1f15; display: block; letter-spacing: 0.04em; }
.canvas-el-coords .coords-sep { text-align: center; color: #786348; font-size: 10px; margin: 2px 0; }

/* Airmail Corner */
.canvas-el-airmail .airmail-envelope { width: 200px; background: #f8f4e0; border: 1px solid #d4c898; padding: 12px 14px 8px; position: relative; overflow: hidden; cursor: grab; box-shadow: 1px 2px 8px rgba(0,0,0,0.1); }
.canvas-el-airmail .airmail-envelope::before { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 14px; background: repeating-linear-gradient(90deg, #cc0000 0, #cc0000 8px, #fff 8px, #fff 12px, #003399 12px, #003399 20px, #fff 20px, #fff 24px); }
.canvas-el-airmail .ae-header { font-size: 9px; letter-spacing: 0.24em; text-transform: uppercase; color: #8a7060; display: block; margin-bottom: 6px; }
.canvas-el-airmail .ae-to { font-family: 'Caveat', cursive; font-size: 18px; color: #2a1810; display: block; margin-bottom: 14px; }
.canvas-el-airmail .ae-stamp { width: 38px; height: 46px; border: 1px solid #c4b090; margin-left: auto; position: relative; }
.canvas-el-airmail .ae-stamp::before { content: '✈'; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 18px; color: #786348; display: block; text-align: center; line-height: 46px; }

/* Newspaper Clipping */
.canvas-el-newspaper .newspaper-clip { width: 260px; background: #f5f0e8; border: 1px solid #c8b898; padding: 10px 14px; font-family: 'Special Elite', monospace; cursor: grab; box-shadow: 1px 2px 8px rgba(0,0,0,0.08); position: relative; }
.canvas-el-newspaper .newspaper-clip::before { content: ''; position: absolute; inset: 0; background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' seed='44'/><feColorMatrix values='0 0 0 0 0.1  0 0 0 0 0.08  0 0 0 0 0.05  0 0 0 0.03 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>"); pointer-events: none; }
.canvas-el-newspaper .np-date { font-size: 8px; letter-spacing: 0.2em; color: #7a6a50; display: block; margin-bottom: 4px; }
.canvas-el-newspaper .np-headline { font-size: 18px; color: #1a1408; line-height: 1.2; margin-bottom: 6px; text-transform: uppercase; letter-spacing: 0.04em; border-bottom: 1.5px solid #2a2018; padding-bottom: 5px; }
.canvas-el-newspaper .np-body { font-size: 10px; color: #3a3020; line-height: 1.6; columns: 2; column-gap: 10px; }

/* Vintage Menu/Receipt */
.canvas-el-menu .vintage-menu { width: 160px; min-height: 220px; background: #f8f4ec; border: 2px solid #8a6030; border-radius: 2px; padding: 14px 12px 18px; font-family: 'Cormorant Garamond', serif; cursor: grab; box-shadow: 2px 4px 12px rgba(0,0,0,0.15); }
.canvas-el-menu .vm-header { text-align: center; border-bottom: 1px solid #c4a060; padding-bottom: 8px; margin-bottom: 10px; }
.canvas-el-menu .vm-name { font-size: 15px; font-style: italic; color: #3a2010; display: block; }
.canvas-el-menu .vm-sub { font-size: 9px; letter-spacing: 0.2em; text-transform: uppercase; color: #8a6030; display: block; margin-top: 2px; }
.canvas-el-menu .vm-item { display: flex; justify-content: space-between; gap: 8px; font-size: 11px; color: #3a2010; padding: 3px 0; border-bottom: 1px dotted rgba(138,96,48,0.3); }
.canvas-el-menu .vm-price { flex-shrink: 0; color: #8a6030; }

/* ===== Decorative: Photo Corner ===== */
.canvas-el-photo-corner .photo-corner-inner { width: 28px; height: 28px; }
.canvas-el-photo-corner.style-gold .photo-corner-inner { border-top: 3px solid #c8a020; border-left: 3px solid #c8a020; }
.canvas-el-photo-corner.style-black .photo-corner-inner { border-top: 3px solid #1a1a1a; border-left: 3px solid #1a1a1a; }

/* Film Strip */
.canvas-el-filmstrip .film-strip { width: 280px; height: 50px; background: #0e0e0e; border-radius: 2px; display: flex; align-items: center; padding: 0 8px; position: relative; box-shadow: 0 2px 8px rgba(0,0,0,0.3); cursor: grab; }
.canvas-el-filmstrip .film-strip::before, .canvas-el-filmstrip .film-strip::after { content: ''; position: absolute; left: 0; right: 0; height: 10px; background: repeating-linear-gradient(90deg, transparent 0, transparent 6px, #0e0e0e 6px, #0e0e0e 8px, rgba(255,255,255,0.08) 8px, rgba(255,255,255,0.08) 14px, #0e0e0e 14px, #0e0e0e 16px); pointer-events: none; }
.canvas-el-filmstrip .film-strip::before { top: 0; }
.canvas-el-filmstrip .film-strip::after { bottom: 0; }
.canvas-el-filmstrip .film-frame { width: 30px; height: 30px; border: 1px solid rgba(255,255,255,0.1); margin: 0 2px; background: rgba(255,255,255,0.03); flex-shrink: 0; }

/* Coffee Ring */
.canvas-el-coffee-ring .coffee-ring { width: 90px; height: 90px; border-radius: 50%; border: 3px solid rgba(110,65,20,0.45); box-shadow: inset 0 0 0 5px rgba(160,100,40,0.08), 0 0 0 1.5px rgba(90,50,10,0.2); background: radial-gradient(ellipse at center, rgba(160,100,40,0.04), transparent 70%); cursor: grab; }

/* Wax Seal */
.canvas-el-wax-seal .wax-seal { width: 72px; height: 72px; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: grab; box-shadow: 0 3px 10px rgba(0,0,0,0.3), inset 0 1px 2px rgba(255,255,255,0.2); position: relative; }
.canvas-el-wax-seal .wax-seal::before { content: ''; position: absolute; inset: 6px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,0.25); }
.canvas-el-wax-seal.style-red .wax-seal { background: radial-gradient(circle at 35% 30%, #e05555, #8a0f0f); }
.canvas-el-wax-seal.style-navy .wax-seal { background: radial-gradient(circle at 35% 30%, #4070cc, #081840); }
.canvas-el-wax-seal .wax-letter { font-size: 22px; color: rgba(255,255,255,0.85); text-shadow: 0 1px 2px rgba(0,0,0,0.3); z-index: 1; font-family: 'Cormorant Garamond', serif; }

/* Ink Splatter */
.canvas-el-ink-splatter .ink-splatter { width: 70px; height: 60px; clip-path: polygon(22% 0%, 78% 8%, 100% 35%, 90% 72%, 72% 100%, 35% 95%, 8% 82%, 0% 48%, 12% 18%); cursor: grab; }
.canvas-el-ink-splatter.style-black .ink-splatter { background: #1a1a1a; }
.canvas-el-ink-splatter.style-ink-blue .ink-splatter { background: #1a2a4a; }

/* Paint Stroke */
.canvas-el-paint-stroke .paint-stroke { width: 200px; height: 22px; border-radius: 60% 40% 50% 50% / 40% 60% 40% 60%; cursor: grab; }
.canvas-el-paint-stroke.style-gold .paint-stroke { background: linear-gradient(90deg, transparent 0%, #c8a020 12%, #e8c840 40%, #d0a820 70%, transparent 100%); opacity: 0.75; }

/* Paper Clip */
.canvas-el-paperclip .paperclip { width: 18px; height: 50px; cursor: grab; position: relative; }
.canvas-el-paperclip .paperclip::before { content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 14px; height: 46px; border: 2.5px solid #8a8a8a; border-radius: 8px 8px 0 0; border-bottom: none; }
.canvas-el-paperclip .paperclip::after { content: ''; position: absolute; top: 8px; left: 50%; transform: translateX(-50%); width: 22px; height: 36px; border: 2.5px solid #8a8a8a; border-radius: 6px 6px 0 0; border-bottom: none; }
.canvas-el-paperclip.style-gold .paperclip::before, .canvas-el-paperclip.style-gold .paperclip::after { border-color: #c8a020; }

/* Empty Polaroid Frame */
.canvas-el-polaroid-frame .polaroid-frame { background: #fffdf5; padding: 10px 10px 40px; box-shadow: 2px 5px 18px rgba(40,25,10,0.22), 0 1px 0 rgba(255,255,255,0.6) inset; border-radius: 1px; width: 200px; }
.canvas-el-polaroid-frame .pf-inner { width: 180px; height: 180px; background: rgba(150,150,140,0.08); border: 1px dashed rgba(100,90,70,0.25); display: flex; align-items: center; justify-content: center; font-family: var(--font-serif); font-style: italic; color: rgba(100,90,70,0.3); font-size: 14px; }
.canvas-el-polaroid-frame .pf-caption { font-family: 'Caveat', cursive; font-size: 18px; color: rgba(42,31,21,0.3); text-align: center; margin-top: 8px; }

/* Watercolor Splash */
.canvas-el-watercolor .watercolor-splash { width: 120px; height: 100px; border-radius: 40% 60% 55% 45% / 45% 55% 65% 35%; cursor: grab; }
.canvas-el-watercolor.style-pink .watercolor-splash { background: radial-gradient(ellipse at center, rgba(240,150,180,0.55), rgba(240,150,180,0.1) 70%); }
.canvas-el-watercolor.style-blue .watercolor-splash { background: radial-gradient(ellipse at center, rgba(100,160,230,0.55), rgba(100,160,230,0.1) 70%); }
.canvas-el-watercolor.style-yellow .watercolor-splash { background: radial-gradient(ellipse at center, rgba(240,200,80,0.55), rgba(240,200,80,0.1) 70%); }

/* Star Cluster */
.canvas-el-star-cluster .star-cluster { font-size: 32px; line-height: 1; cursor: grab; text-shadow: 0 2px 6px rgba(0,0,0,0.12); }

/* Ornate Frame */
.canvas-el-ornate-frame .ornate-frame { width: 200px; height: 260px; border: 2.5px solid #c8a020; position: relative; cursor: grab; }
.canvas-el-ornate-frame .ornate-frame::before { content: ''; position: absolute; inset: 5px; border: 1px solid rgba(200,160,32,0.4); }
.canvas-el-ornate-frame .ornate-frame::after { content: '✦'; position: absolute; top: -10px; left: 50%; transform: translateX(-50%); font-size: 16px; color: #c8a020; background: white; padding: 0 4px; }
.canvas-el-ornate-frame .of-inner { position: absolute; inset: 12px; background: rgba(200,160,32,0.04); display: flex; align-items: center; justify-content: center; font-family: var(--font-serif); font-style: italic; color: rgba(200,160,32,0.3); font-size: 13px; }

/* Postage Stamp Frame */
.canvas-el-stamp-frame .postage-frame { width: 120px; height: 150px; background: rgba(255,253,240,0.8); border: 2px solid #2a1f15; position: relative; cursor: grab; box-shadow: 1px 2px 8px rgba(0,0,0,0.15); }
.canvas-el-stamp-frame .postage-frame::before { content: ''; position: absolute; inset: -8px; background:
  radial-gradient(circle at 50% -1px, transparent 5px, #f8f4e0 5px, #f8f4e0 7px, transparent 7px) top / 14px 8px repeat-x,
  radial-gradient(circle at 50% 101%, transparent 5px, #f8f4e0 5px, #f8f4e0 7px, transparent 7px) bottom / 14px 8px repeat-x,
  radial-gradient(circle at -1px 50%, transparent 5px, #f8f4e0 5px, #f8f4e0 7px, transparent 7px) left / 8px 14px repeat-y,
  radial-gradient(circle at 101% 50%, transparent 5px, #f8f4e0 5px, #f8f4e0 7px, transparent 7px) right / 8px 14px repeat-y;
  border: 2px solid #2a1f15; }
.canvas-el-stamp-frame .sf-inner { position: absolute; inset: 6px; border: 1px dashed rgba(42,31,21,0.2); }

/* ===== Text Elements ===== */
.canvas-el-text .canvas-text { cursor: grab; }
.canvas-el-text .canvas-text-content { outline: none; min-width: 80px; white-space: pre-wrap; word-break: break-word; padding: 2px 4px; border-radius: 2px; transition: background 120ms; }
.canvas-el-text .canvas-text-content[contenteditable="true"] { cursor: text; background: rgba(255,250,235,0.25); outline: 1px dashed rgba(200,160,80,0.6); }
.canvas-text.font-hand .canvas-text-content { font-family: 'Caveat', cursive; }
.canvas-text.font-cursive .canvas-text-content { font-family: 'Dancing Script', cursive; }
.canvas-text.font-typewriter .canvas-text-content { font-family: 'Special Elite', monospace; letter-spacing: 0.05em; }
.canvas-text.font-serif .canvas-text-content { font-family: 'Cormorant Garamond', serif; font-style: italic; }
.canvas-text.font-marker .canvas-text-content { font-family: 'Permanent Marker', cursive; }
.canvas-text.font-caption .canvas-text-content { font-family: 'Inter', sans-serif; letter-spacing: 0.22em; text-transform: uppercase; font-weight: 600; }
.canvas-text.font-title .canvas-text-content { font-family: 'Playfair Display', serif; font-weight: 600; letter-spacing: -0.01em; }
.canvas-text.font-annotation .canvas-text-content { font-family: 'Caveat', cursive; border-bottom: 1px dashed currentColor; }

/* White matte — used for blank pages */
.bg-blank-white {
  background-color: #f8f8f6;
}

/* ===== Background Themes — Matte Paper ===== */
/* Each uses: flat matte base + fine grain + paper fiber + subtle edge vignette */

.bg-vintage-explorer {
  background-color: #c0986a;
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='400' height='400'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='0.68 0.52' numOctaves='4' seed='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0'/></filter><rect width='100%25' height='100%25' filter='url(%23g)'/></svg>"),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='400' height='400'><filter id='f'><feTurbulence type='fractalNoise' baseFrequency='0.018 0.22' numOctaves='2' seed='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.04 0'/></filter><rect width='100%25' height='100%25' filter='url(%23f)'/></svg>"),
    radial-gradient(ellipse at center, transparent 50%, rgba(70,40,5,0.12) 100%),
    radial-gradient(ellipse at top left, rgba(145,95,35,0.35) 0%, transparent 45%),
    radial-gradient(ellipse at bottom right, rgba(125,80,25,0.3) 0%, transparent 45%);
  color: #2a1f10;
}
.bg-coastal {
  background-color: #a8c8d8;
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='400' height='400'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='0.68 0.52' numOctaves='4' seed='5' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.08 0'/></filter><rect width='100%25' height='100%25' filter='url(%23g)'/></svg>"),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='400' height='400'><filter id='f'><feTurbulence type='fractalNoise' baseFrequency='0.018 0.22' numOctaves='2' seed='5' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.035 0'/></filter><rect width='100%25' height='100%25' filter='url(%23f)'/></svg>"),
    radial-gradient(ellipse at center, transparent 55%, rgba(30,60,80,0.1) 100%),
    linear-gradient(160deg, rgba(180,215,230,0.5) 0%, rgba(150,195,215,0.3) 40%, rgba(200,225,210,0.4) 75%, rgba(210,200,175,0.35) 100%);
  color: #1a2830;
}
.bg-mountain {
  background-color: #b08858;
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='400' height='400'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='0.6 0.48' numOctaves='4' seed='13' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.12 0'/></filter><rect width='100%25' height='100%25' filter='url(%23g)'/></svg>"),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='400' height='400'><filter id='f'><feTurbulence type='fractalNoise' baseFrequency='0.015 0.18' numOctaves='2' seed='13' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.05 0'/></filter><rect width='100%25' height='100%25' filter='url(%23f)'/></svg>"),
    radial-gradient(ellipse at center, transparent 45%, rgba(60,35,8,0.15) 100%),
    linear-gradient(180deg, rgba(180,145,90,0.3) 0%, transparent 35%),
    linear-gradient(0deg, rgba(80,50,15,0.2) 0%, transparent 30%);
  color: #2a1808;
}
.bg-forest {
  background-color: #8aa880;
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='400' height='400'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='0.68 0.52' numOctaves='4' seed='21' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.09 0'/></filter><rect width='100%25' height='100%25' filter='url(%23g)'/></svg>"),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='400' height='400'><filter id='f'><feTurbulence type='fractalNoise' baseFrequency='0.018 0.22' numOctaves='2' seed='21' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.04 0'/></filter><rect width='100%25' height='100%25' filter='url(%23f)'/></svg>"),
    radial-gradient(ellipse at center, transparent 50%, rgba(30,55,20,0.12) 100%),
    radial-gradient(ellipse at top left, rgba(130,170,120,0.4) 0%, transparent 50%),
    radial-gradient(ellipse at bottom right, rgba(50,85,40,0.3) 0%, transparent 50%);
  color: #1a2c10;
}
.bg-snow {
  background-color: #dae8f0;
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='400' height='400'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='0.68 0.52' numOctaves='4' seed='9' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.06 0'/></filter><rect width='100%25' height='100%25' filter='url(%23g)'/></svg>"),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='400' height='400'><filter id='f'><feTurbulence type='fractalNoise' baseFrequency='0.018 0.22' numOctaves='2' seed='9' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.03 0'/></filter><rect width='100%25' height='100%25' filter='url(%23f)'/></svg>"),
    radial-gradient(ellipse at center, transparent 55%, rgba(40,70,100,0.08) 100%),
    linear-gradient(180deg, rgba(245,252,255,0.5) 0%, transparent 30%);
  color: #1a2838;
}
.bg-desert {
  background-color: #c07848;
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='400' height='400'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='0.72 0.55' numOctaves='4' seed='8' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.11 0'/></filter><rect width='100%25' height='100%25' filter='url(%23g)'/></svg>"),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='400' height='400'><filter id='f'><feTurbulence type='fractalNoise' baseFrequency='0.018 0.22' numOctaves='2' seed='8' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.045 0'/></filter><rect width='100%25' height='100%25' filter='url(%23f)'/></svg>"),
    radial-gradient(ellipse at center, transparent 48%, rgba(80,30,5,0.14) 100%),
    linear-gradient(180deg, rgba(220,175,120,0.25) 0%, transparent 25%),
    linear-gradient(0deg, rgba(100,45,10,0.18) 0%, transparent 28%);
  color: #2c1406;
}
.bg-city {
  background-color: #ededea;
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='400' height='400'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='0.68 0.52' numOctaves='4' seed='19' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.05 0'/></filter><rect width='100%25' height='100%25' filter='url(%23g)'/></svg>"),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='400' height='400'><filter id='f'><feTurbulence type='fractalNoise' baseFrequency='0.018 0.22' numOctaves='2' seed='19' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.025 0'/></filter><rect width='100%25' height='100%25' filter='url(%23f)'/></svg>"),
    radial-gradient(ellipse at center, transparent 55%, rgba(40,40,40,0.07) 100%),
    linear-gradient(rgba(155,155,148,0.18) 1px, transparent 1px),
    linear-gradient(90deg, rgba(155,155,148,0.18) 1px, transparent 1px);
  background-size: auto, auto, auto, 28px 28px, 28px 28px;
  color: #1a1a1a;
}
.bg-historical {
  background-color: #a08050;
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='400' height='400'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='0.55 0.45' numOctaves='4' seed='15' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.11 0'/></filter><rect width='100%25' height='100%25' filter='url(%23g)'/></svg>"),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='400' height='400'><filter id='f'><feTurbulence type='fractalNoise' baseFrequency='0.015 0.18' numOctaves='2' seed='15' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.05 0'/></filter><rect width='100%25' height='100%25' filter='url(%23f)'/></svg>"),
    radial-gradient(ellipse at center, transparent 45%, rgba(50,25,5,0.18) 100%),
    radial-gradient(ellipse at top left, rgba(165,130,75,0.4) 0%, transparent 50%),
    radial-gradient(ellipse at bottom, rgba(65,38,8,0.35) 0%, transparent 50%);
  color: #1a0f05;
}
.bg-cottagecore {
  background-color: #e8c8d8;
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='400' height='400'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='0.68 0.52' numOctaves='4' seed='6' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.07 0'/></filter><rect width='100%25' height='100%25' filter='url(%23g)'/></svg>"),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='400' height='400'><filter id='f'><feTurbulence type='fractalNoise' baseFrequency='0.018 0.22' numOctaves='2' seed='6' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.03 0'/></filter><rect width='100%25' height='100%25' filter='url(%23f)'/></svg>"),
    radial-gradient(ellipse at center, transparent 52%, rgba(100,40,70,0.1) 100%),
    radial-gradient(ellipse at top, rgba(255,230,240,0.55) 0%, transparent 50%),
    radial-gradient(ellipse at bottom left, rgba(200,170,210,0.4) 0%, transparent 50%);
  color: #2a1028;
}
.bg-dark-academia {
  background-color: #251a0c;
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='400' height='400'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='0.65 0.5' numOctaves='4' seed='22' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.08  0 0 0 0 0.06  0 0 0 0 0.02  0 0 0 0.14 0'/></filter><rect width='100%25' height='100%25' filter='url(%23g)'/></svg>"),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='400' height='400'><filter id='f'><feTurbulence type='fractalNoise' baseFrequency='0.018 0.22' numOctaves='2' seed='22' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.04  0 0 0 0 0.03  0 0 0 0 0.01  0 0 0 0.06 0'/></filter><rect width='100%25' height='100%25' filter='url(%23f)'/></svg>"),
    radial-gradient(ellipse at top left, rgba(65,42,12,0.7) 0%, transparent 50%),
    radial-gradient(ellipse at bottom right, rgba(45,28,6,0.6) 0%, transparent 50%),
    radial-gradient(ellipse at center, rgba(80,55,18,0.2) 0%, transparent 55%);
  color: #e8d8b8;
}
.bg-dark-academia .canvas-empty { color: #c8a870; }
.bg-cinematic {
  background-color: #080807;
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='400' height='400'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='0.85 0.7' numOctaves='3' seed='31' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.06  0 0 0 0 0.06  0 0 0 0 0.06  0 0 0 0.18 0'/></filter><rect width='100%25' height='100%25' filter='url(%23g)'/></svg>"),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='400' height='400'><filter id='f'><feTurbulence type='fractalNoise' baseFrequency='0.018 0.22' numOctaves='2' seed='31' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.02  0 0 0 0 0.02  0 0 0 0 0.02  0 0 0 0.06 0'/></filter><rect width='100%25' height='100%25' filter='url(%23f)'/></svg>"),
    radial-gradient(ellipse at center, rgba(25,22,16,0.3) 0%, rgba(4,4,2,0.0) 55%),
    radial-gradient(ellipse at top left, rgba(20,18,10,0.5), transparent 50%);
  color: #d8d8d0;
}
.bg-cinematic .canvas-empty { color: #706860; }
.bg-boho {
  background-color: #d89858;
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='400' height='400'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='0.55 0.45' numOctaves='4' seed='44' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0'/></filter><rect width='100%25' height='100%25' filter='url(%23g)'/></svg>"),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='400' height='400'><filter id='f'><feTurbulence type='fractalNoise' baseFrequency='0.018 0.22' numOctaves='2' seed='44' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.04 0'/></filter><rect width='100%25' height='100%25' filter='url(%23f)'/></svg>"),
    radial-gradient(ellipse at center, transparent 45%, rgba(80,40,8,0.12) 100%),
    linear-gradient(145deg, rgba(230,165,100,0.45) 0%, rgba(185,140,80,0.25) 30%, rgba(145,175,110,0.3) 55%, rgba(175,145,195,0.3) 75%, rgba(215,145,100,0.35) 100%);
  color: #2a1808;
}
.bg-minimal {
  background-color: #f8f7f4;
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='400' height='400'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='0.68 0.52' numOctaves='4' seed='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.045 0'/></filter><rect width='100%25' height='100%25' filter='url(%23g)'/></svg>"),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='400' height='400'><filter id='f'><feTurbulence type='fractalNoise' baseFrequency='0.018 0.22' numOctaves='2' seed='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.02 0'/></filter><rect width='100%25' height='100%25' filter='url(%23f)'/></svg>"),
    radial-gradient(ellipse at center, transparent 60%, rgba(60,55,50,0.06) 100%),
    radial-gradient(ellipse at top left, rgba(230,225,240,0.5), transparent 55%);
  color: #1a1a1a;
}

/* ===== Themes Panel Section Labels ===== */
.bg-section-label {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: #7a6030;
  font-weight: 700;
  margin: 14px 0 6px;
  padding-bottom: 4px;
  border-bottom: 1px solid rgba(160,120,40,0.25);
}
.bg-section-label:first-child { margin-top: 0; }

/* ===== Premade Template Backgrounds (image-based) ===== */
.bg-tpl-world-landmarks,
.bg-tpl-tropical-explorer,
.bg-tpl-passport-stamps,
.bg-tpl-vintage-postcards,
.bg-tpl-travel-icons,
.bg-tpl-paris-floral,
.bg-tpl-summer-beach,
.bg-tpl-sky-journey,
.bg-tpl-beach-travel,
.bg-tpl-vintage-map,
.bg-tpl-vacation-time,
.bg-tpl-starry-city {
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
}
.bg-tpl-world-landmarks    { background-image: url('/static/img/templates/tpl-world-landmarks.jpg');    color: #2a1f15; }
.bg-tpl-tropical-explorer  { background-image: url('/static/img/templates/tpl-tropical-explorer.jpg');  color: #1a2c10; }
.bg-tpl-passport-stamps    { background-image: url('/static/img/templates/tpl-passport-stamps.jpg');    color: #1a1a3a; }
.bg-tpl-vintage-postcards  { background-image: url('/static/img/templates/tpl-vintage-postcards.jpg');  color: #2a1f15; }
.bg-tpl-travel-icons       { background-image: url('/static/img/templates/tpl-travel-icons.jpg');       color: #2a1808; }
.bg-tpl-paris-floral       { background-image: url('/static/img/templates/tpl-paris-floral.jpg');       color: #3a1428; }
.bg-tpl-summer-beach       { background-image: url('/static/img/templates/tpl-summer-beach.jpg');       color: #2a1808; }
.bg-tpl-sky-journey        { background-image: url('/static/img/templates/tpl-sky-journey.jpg');        color: #2a1808; }
.bg-tpl-beach-travel       { background-image: url('/static/img/templates/tpl-beach-travel.jpg');       color: #2a1808; }
.bg-tpl-vintage-map        { background-image: url('/static/img/templates/tpl-vintage-map.jpg');        color: #2a1808; }
.bg-tpl-vacation-time      { background-image: url('/static/img/templates/tpl-vacation-time.jpg');      color: #2a1808; }
.bg-tpl-starry-city        { background-image: url('/static/img/templates/tpl-starry-city.jpg');        color: #e0e8ff; }
.bg-tpl-starry-city .canvas-empty { color: rgba(200,220,255,0.6); }

/* ===== Basic Page Styles (texture backgrounds) ===== */
.bg-basic-lavender-mist,  .bg-basic-purple-grunge,  .bg-basic-magenta-floral,
.bg-basic-purple-splash,  .bg-basic-dark-wood,       .bg-basic-purple-script,
.bg-basic-olive-fiber,    .bg-basic-teal-floral,     .bg-basic-dark-scratch,
.bg-basic-cream-teal,     .bg-basic-mint-peel,       .bg-basic-cream-flourish,
.bg-basic-blue-stamp,     .bg-basic-sage-green,      .bg-basic-teal-blossom,
.bg-basic-warm-parchment, .bg-basic-blue-lace,       .bg-basic-aged-parchment,
.bg-basic-coffee-stained, .bg-basic-crumpled-cream,  .bg-basic-ink-spotted,
.bg-basic-grunge-white {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.bg-basic-lavender-mist  { background-image: url('/static/img/templates/basic-lavender-mist.jpg');  color: #1a0828; }
.bg-basic-purple-grunge  { background-image: url('/static/img/templates/basic-purple-grunge.jpg');  color: #f0e8f8; }
.bg-basic-magenta-floral { background-image: url('/static/img/templates/basic-magenta-floral.jpg'); color: #f0e8f8; }
.bg-basic-purple-splash  { background-image: url('/static/img/templates/basic-purple-splash.jpg');  color: #1a0828; }
.bg-basic-dark-wood      { background-image: url('/static/img/templates/basic-dark-wood.jpg');      color: #e8d8c8; }
.bg-basic-purple-script  { background-image: url('/static/img/templates/basic-purple-script.jpg');  color: #f0e8f8; }
.bg-basic-olive-fiber    { background-image: url('/static/img/templates/basic-olive-fiber.jpg');    color: #e0dcc0; }
.bg-basic-teal-floral    { background-image: url('/static/img/templates/basic-teal-floral.jpg');    color: #0a1a18; }
.bg-basic-dark-scratch   { background-image: url('/static/img/templates/basic-dark-scratch.jpg');   color: #d8d8d8; }
.bg-basic-cream-teal     { background-image: url('/static/img/templates/basic-cream-teal.jpg');     color: #0a1818; }
.bg-basic-mint-peel      { background-image: url('/static/img/templates/basic-mint-peel.jpg');      color: #0a1a18; }
.bg-basic-cream-flourish { background-image: url('/static/img/templates/basic-cream-flourish.jpg'); color: #1a2028; }
.bg-basic-blue-stamp     { background-image: url('/static/img/templates/basic-blue-stamp.jpg');     color: #1a1a2a; }
.bg-basic-sage-green     { background-image: url('/static/img/templates/basic-sage-green.jpg');     color: #0a1a0a; }
.bg-basic-teal-blossom   { background-image: url('/static/img/templates/basic-teal-blossom.jpg');   color: #0a1818; }
.bg-basic-warm-parchment { background-image: url('/static/img/templates/basic-warm-parchment.jpg'); color: #2a1808; }
.bg-basic-blue-lace      { background-image: url('/static/img/templates/basic-blue-lace.jpg');      color: #0a1828; }
.bg-basic-aged-parchment { background-image: url('/static/img/templates/basic-aged-parchment.jpg'); color: #2a1808; }
.bg-basic-coffee-stained { background-image: url('/static/img/templates/basic-coffee-stained.jpg'); color: #2a1808; }
.bg-basic-crumpled-cream { background-image: url('/static/img/templates/basic-crumpled-cream.jpg'); color: #2a1808; }
.bg-basic-ink-spotted    { background-image: url('/static/img/templates/basic-ink-spotted.jpg');    color: #1a1a1a; }
.bg-basic-grunge-white   { background-image: url('/static/img/templates/basic-grunge-white.jpg');   color: #1a1a1a; }
/* dark backgrounds need light empty-state text */
.bg-basic-purple-grunge .canvas-empty, .bg-basic-magenta-floral .canvas-empty,
.bg-basic-dark-wood .canvas-empty,     .bg-basic-purple-script .canvas-empty,
.bg-basic-olive-fiber .canvas-empty,   .bg-basic-dark-scratch .canvas-empty { color: rgba(220,210,200,0.55); }

/* ===== Country Landmark Pages (SVG border-frame illustrated scenes) ===== */
.bg-country-france,
.bg-country-japan,
.bg-country-india,
.bg-country-italy,
.bg-country-greece {
  background-size: 100% 100%;
  background-position: center center;
  background-repeat: no-repeat;
}
.bg-country-france { background-image: url('/static/img/templates/country-france.svg?v=2'); color: #2a1a2a; }
.bg-country-japan  { background-image: url('/static/img/templates/country-japan.svg?v=2');  color: #2a0f14; }
.bg-country-india  { background-image: url('/static/img/templates/country-india.svg?v=2');  color: #2a1808; }
.bg-country-italy  { background-image: url('/static/img/templates/country-italy.svg?v=2');  color: #2a1808; }
.bg-country-greece { background-image: url('/static/img/templates/country-greece.svg?v=2'); color: #0a1a2a; }

/* ===== Page Nav Controls (in zoom bar) ===== */
.zoom-bar-sep {
  width: 1px;
  height: 20px;
  background: rgba(120,90,40,0.4);
  flex-shrink: 0;
  margin: 0 2px;
}
.page-nav-btn {
  width: auto !important;
  padding: 0 8px !important;
  font-size: 12px !important;
}
.page-nav-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
.page-nav-indicator {
  font-size: 11px;
  color: #c8b898;
  letter-spacing: 0.04em;
  white-space: nowrap;
  min-width: 60px;
  text-align: center;
}
.page-total { color: #786348; }
.page-add-btn {
  width: auto !important;
  padding: 0 8px !important;
  font-size: 10px !important;
  letter-spacing: 0.04em;
}
.page-del-btn {
  width: 26px !important;
  font-size: 14px !important;
  color: #b06060 !important;
  border-color: rgba(160,60,60,0.3) !important;
}
.page-del-btn:hover { background: rgba(180,60,60,0.15) !important; color: #e07070 !important; }
.book-view-btn {
  width: auto !important;
  padding: 0 8px !important;
  font-size: 11px !important;
}
.book-view-btn.is-active {
  background: rgba(120,30,45,0.5) !important;
  border-color: rgba(180,60,60,0.5) !important;
  color: #f8d8d8 !important;
}
.cover-nav-btn {
  width: auto !important;
  padding: 0 8px !important;
  font-size: 11px !important;
  color: #9060a0 !important;
  border-color: rgba(144,96,160,0.3) !important;
}
.cover-nav-btn:hover { background: rgba(144,96,160,0.12) !important; }
.cover-nav-btn.is-active {
  background: rgba(144,96,160,0.2) !important;
  border-color: rgba(144,96,160,0.6) !important;
  font-weight: 600 !important;
}

/* ===== Book View Layout ===== */
.book-spread-wrapper {
  display: flex;
  align-items: flex-start;
  gap: 0;
}
.book-spread-wrapper.book-active { position: relative; }
.book-board-left {
  display: none;
}
.book-spread-wrapper.book-active .book-board-left {
  display: block;
}
.book-spine {
  display: none;
  width: 40px;
  flex-shrink: 0;
  align-self: stretch;
  background:
    repeating-linear-gradient(0deg, transparent 0px, transparent 28px, rgba(255,255,255,0.04) 28px, rgba(255,255,255,0.04) 29px),
    repeating-linear-gradient(90deg, transparent 0px, transparent 10px, rgba(0,0,0,0.1) 10px, rgba(0,0,0,0.1) 11px, transparent 11px, transparent 22px, rgba(0,0,0,0.06) 22px, rgba(0,0,0,0.06) 23px),
    linear-gradient(to right, #1e0e04 0%, #5a3010 20%, #3e2008 50%, #5a3010 80%, #1e0e04 100%);
  box-shadow:
    -8px 0 24px rgba(0,0,0,0.65),
    8px 0 24px rgba(0,0,0,0.65),
    inset 4px 0 10px rgba(0,0,0,0.45),
    inset -4px 0 10px rgba(0,0,0,0.45),
    inset 0 0 0 1px rgba(120,70,20,0.3);
  z-index: 10;
}
.book-spread-wrapper.book-active .book-spine {
  display: block;
}

/* When the primary board is editing the LEFT page, move it to the left column */
.book-spread-wrapper.active-left #canvas-board-container { order: 1; }
.book-spread-wrapper.active-left .book-spine          { order: 2; }
.book-spread-wrapper.active-left .book-board-left     { order: 3; }

/* Diary-style page number inside each canvas board */
.board-page-num {
  position: absolute;
  bottom: 22px;
  left: 0;
  right: 0;
  text-align: center;
  font-family: 'Special Elite', serif;
  font-size: 22px;
  color: rgba(90, 68, 35, 0.38);
  pointer-events: none;
  user-select: none;
  letter-spacing: 0.12em;
  z-index: 1;
}

/* Selection ring on the active board in book view */
.canvas-board-container.book-selected .canvas-board {
  outline: 2px solid rgba(200, 164, 74, 0.55);
  outline-offset: 0px;
}

/* Passive board in book view */
#canvas-board-2 {
  cursor: pointer;
  position: relative;
  pointer-events: auto;
  min-height: 100px; /* always clickable even when empty */
}
#canvas-board-2:hover::after {
  content: 'Click to select';
  position: absolute;
  bottom: 60px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(42,31,21,0.7);
  color: rgba(240,220,180,0.9);
  font-size: 13px;
  font-family: 'Dancing Script', cursive;
  padding: 4px 12px;
  border-radius: 4px;
  pointer-events: none;
  white-space: nowrap;
  z-index: 10;
}
/* Suppress hover hint on the cover and on empty-slot boards */
#canvas-board-2.canvas-book-cover:hover::after,
#canvas-board-2.canvas-board-empty-slot:hover::after { content: none; }

/* Book cover visual inside board2El */
.canvas-book-cover {
  display: block !important;
  position: relative !important;
  cursor: default !important;
}
#canvas-board.canvas-book-cover { cursor: crosshair !important; }
.canvas-cover-content {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 24px;
  pointer-events: none;
  user-select: none;
  z-index: 0;
}
.canvas-cover-title {
  font-family: 'Dancing Script', cursive;
  font-size: 32px;
  color: rgba(255,245,220,0.9);
  text-shadow: 0 1px 4px rgba(0,0,0,0.4);
  line-height: 1.2;
  margin-bottom: 8px;
}
.canvas-cover-dest {
  font-family: 'Special Elite', serif;
  font-size: 14px;
  letter-spacing: 0.15em;
  color: rgba(240,215,160,0.7);
  text-transform: uppercase;
}
/* Editable cover text (owner on front cover) */
.canvas-cover-title[contenteditable],
.canvas-cover-dest[contenteditable] {
  pointer-events: auto;
  cursor: text;
  outline: none;
  border-bottom: 1px dashed rgba(255,245,220,0.4);
  min-width: 80px;
  transition: border-color 0.2s;
}
.canvas-cover-title[contenteditable]:hover,
.canvas-cover-dest[contenteditable]:hover {
  border-bottom-color: rgba(255,245,220,0.7);
}
.canvas-cover-title[contenteditable]:focus,
.canvas-cover-dest[contenteditable]:focus {
  border-bottom-color: rgba(255,245,220,0.9);
  background: rgba(0,0,0,0.12);
  border-radius: 4px;
  padding: 2px 6px;
}
.canvas-cover-dest[contenteditable]:empty::before {
  content: 'Add destination…';
  opacity: 0.4;
  font-style: italic;
}
.canvas-back-cover-deco {
  font-size: 40px;
  color: rgba(255,245,220,0.5);
  margin-bottom: 12px;
}
.canvas-back-cover-brand {
  font-family: 'Dancing Script', cursive;
  font-size: 22px;
  color: rgba(255,245,220,0.6);
  letter-spacing: 0.05em;
}

/* ===== Cover Title Styling Toolbar ===== */
.cover-title-toolbar {
  display: none;
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 500;
  background: rgba(28,16,6,0.97);
  border: 1px solid rgba(210,170,100,0.35);
  border-radius: 10px;
  padding: 8px 14px;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;
  box-shadow: 0 8px 32px rgba(0,0,0,0.65);
  max-width: 90vw;
}
.cover-title-toolbar.visible { display: flex; }
.ctt-label {
  font-size: 10px;
  color: #8a6a40;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
}
.ctt-sep {
  width: 1px;
  height: 20px;
  background: rgba(210,170,100,0.2);
  flex-shrink: 0;
}
.ctt-fonts { display: flex; gap: 4px; flex-wrap: wrap; }
.ctt-font-btn {
  padding: 4px 8px;
  background: rgba(255,250,235,0.06);
  border: 1px solid rgba(210,170,100,0.2);
  border-radius: 5px;
  color: #c0a060;
  font-size: 11px;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
  white-space: nowrap;
}
.ctt-font-btn:hover { background: rgba(210,170,100,0.15); color: #e8d5b0; }
.ctt-font-btn.active { background: rgba(210,170,100,0.22); border-color: rgba(210,170,100,0.5); color: #f0e0b0; }
.ctt-sizes { display: flex; gap: 3px; }
.ctt-size-btn {
  width: 30px;
  height: 26px;
  background: rgba(255,250,235,0.06);
  border: 1px solid rgba(210,170,100,0.2);
  border-radius: 4px;
  color: #c0a060;
  font-size: 11px;
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
}
.ctt-size-btn:hover { background: rgba(210,170,100,0.15); color: #e8d5b0; }
.ctt-size-btn.active { background: rgba(210,170,100,0.22); border-color: rgba(210,170,100,0.5); color: #f0e0b0; }
.ctt-colors { display: flex; gap: 5px; align-items: center; }
.ctt-color-btn {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid rgba(210,170,100,0.2);
  cursor: pointer;
  transition: transform 0.12s, border-color 0.12s;
}
.ctt-color-btn:hover { transform: scale(1.2); border-color: rgba(210,170,100,0.6); }
.ctt-color-btn.active { border-color: #d2aa64; transform: scale(1.15); }

/* Empty page slot — click to add */
.canvas-board-empty-slot {
  display: flex !important;
  align-items: center;
  justify-content: center;
  background: repeating-linear-gradient(
    45deg,
    rgba(180,130,40,0.04) 0px,
    rgba(180,130,40,0.04) 8px,
    transparent 8px,
    transparent 16px
  ) !important;
  border: 2px dashed rgba(180,130,40,0.25) !important;
  cursor: pointer;
}
.board-add-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  pointer-events: none;
  user-select: none;
}
.board-add-icon {
  font-size: 48px;
  color: rgba(180,130,40,0.4);
  line-height: 1;
}
.board-add-label {
  font-family: 'Special Elite', serif;
  font-size: 14px;
  color: rgba(200,160,60,0.5);
  letter-spacing: 0.08em;
}

/* Page label below boards in book view */
.book-page-label-strip {
  display: none;
  justify-content: space-around;
  padding: 4px 0;
  font-size: 11px;
  color: #786348;
  letter-spacing: 0.06em;
}
.book-spread-wrapper.book-active ~ .book-page-label-strip {
  display: flex;
}

/* ===== Page Hover Actions (click/hover to show delete) ===== */
.page-hover-actions {
  position: absolute;
  top: 10px;
  right: 10px;
  display: flex;
  gap: 6px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 160ms ease;
  z-index: 200;
}
.canvas-board-container:hover .page-hover-actions,
.canvas-board-container:focus-within .page-hover-actions {
  opacity: 1;
  pointer-events: all;
}
.pha-delete-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 5px 14px;
  background: rgba(100,25,25,0.9);
  border: 1px solid rgba(200,80,80,0.45);
  border-radius: 5px;
  color: #f5d0d0;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  cursor: pointer;
  backdrop-filter: blur(10px);
  box-shadow: 0 2px 12px rgba(0,0,0,0.35);
  transition: background 120ms, transform 120ms, box-shadow 120ms;
  white-space: nowrap;
  font-family: var(--font-sans, sans-serif);
}
.pha-delete-btn:hover {
  background: rgba(160,40,40,0.95);
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(0,0,0,0.45);
}

/* ===== Blank White Page ===== */
.bg-blank-white { background-color: #f8f6f0 !important; }

/* ===== Matte Color Pages ===== */
.bg-matte-white    { background-color: #f9f9f8; color: #1a1a1a; }
.bg-matte-ivory    { background-color: #f8f5ec; color: #2a1f10; }
.bg-matte-dove     { background-color: #e8e6e2; color: #2a2a2a; }
.bg-matte-ash      { background-color: #c8c4bc; color: #1a1a1a; }
.bg-matte-slate    { background-color: #7a8090; color: #f0f0ee; }
.bg-matte-charcoal { background-color: #3a3830; color: #e8e4d8; }
.bg-matte-midnight { background-color: #18161a; color: #e0d8c8; }
.bg-matte-navy     { background-color: #1a2540; color: #e8e4d4; }
.bg-matte-steel    { background-color: #3a5070; color: #e8eef4; }
.bg-matte-sage     { background-color: #7a9080; color: #f0f4f0; }
.bg-matte-forest   { background-color: #2a4030; color: #d8e8d4; }
.bg-matte-rose     { background-color: #c89898; color: #2a1818; }
.bg-matte-blush    { background-color: #f0d8d4; color: #2a1818; }
.bg-matte-sand     { background-color: #d8c8a0; color: #2a1e10; }
.bg-matte-terra    { background-color: #c07050; color: #fff0e8; }

/* ===== Country Pages — SVG template backgrounds ===== */
.bg-country-spain,
.bg-country-thailand,
.bg-country-turkey,
.bg-country-mexico,
.bg-country-uk,
.bg-country-germany,
.bg-country-usa,
.bg-country-australia,
.bg-country-morocco,
.bg-country-bali,
.bg-country-portugal,
.bg-country-peru,
.bg-country-egypt,
.bg-country-newzealand,
.bg-country-norway { background-size: 100% 100%; }

.bg-country-spain      { background-image: url('/static/img/templates/country-spain.svg?v=2'); color: #3a1808; }
.bg-country-thailand   { background-image: url('/static/img/templates/country-thailand.svg?v=2'); color: #2a1808; }
.bg-country-turkey     { background-image: url('/static/img/templates/country-turkey.svg?v=2'); color: #2a1008; }
.bg-country-mexico     { background-image: url('/static/img/templates/country-mexico.svg?v=2'); color: #2a0a10; }
.bg-country-uk         { background-image: url('/static/img/templates/country-uk.svg?v=2'); color: #0a1838; }
.bg-country-germany    { background-image: url('/static/img/templates/country-germany.svg?v=2'); color: #1a1a1a; }
.bg-country-usa        { background-image: url('/static/img/templates/country-usa.svg?v=2'); color: #0a1838; }
.bg-country-australia  { background-image: url('/static/img/templates/country-australia.svg?v=2'); color: #2a1a08; }
.bg-country-morocco    { background-image: url('/static/img/templates/country-morocco.svg?v=2'); color: #2a1008; }
.bg-country-bali       { background-image: url('/static/img/templates/country-bali.svg?v=2'); color: #1a1028; }
.bg-country-portugal   { background-image: url('/static/img/templates/country-portugal.svg?v=2'); color: #0a1a38; }
.bg-country-peru       { background-image: url('/static/img/templates/country-peru.svg?v=2'); color: #2a1408; }
.bg-country-egypt      { background-image: url('/static/img/templates/country-egypt.svg?v=2'); color: #2a1a08; }
.bg-country-newzealand { background-image: url('/static/img/templates/country-newzealand.svg?v=2'); color: #0a2018; }
.bg-country-norway     { background-image: url('/static/img/templates/country-norway.svg?v=2'); color: #0a1428; }


/* ===== New Text Element Font Classes ===== */
.canvas-text.font-block .canvas-text-content     { font-family: 'Bebas Neue', cursive; letter-spacing: 0.08em; }
.canvas-text.font-elegant .canvas-text-content   { font-family: 'Great Vibes', cursive; }
.canvas-text.font-casual .canvas-text-content    { font-family: 'Patrick Hand', cursive; }
.canvas-text.font-condensed .canvas-text-content { font-family: 'Oswald', sans-serif; letter-spacing: 0.04em; font-weight: 600; }
.canvas-text.font-book .canvas-text-content      { font-family: 'Libre Baskerville', serif; }
.canvas-text.font-whimsy .canvas-text-content    { font-family: 'Shadows Into Light', cursive; }

/* Text picker preview styles for new fonts */
.text-preview-block     { font-family: 'Bebas Neue', cursive; font-size: 22px; letter-spacing: 0.08em; color: #1a1a1a; }
.text-preview-elegant   { font-family: 'Great Vibes', cursive; font-size: 22px; color: #4a1f3a; }
.text-preview-casual    { font-family: 'Patrick Hand', cursive; font-size: 15px; color: #2a3040; }
.text-preview-condensed { font-family: 'Oswald', sans-serif; font-size: 17px; font-weight: 600; letter-spacing: 0.04em; color: #1a2a3a; }
.text-preview-book      { font-family: 'Libre Baskerville', serif; font-size: 14px; color: #2a1f15; }
.text-preview-whimsy    { font-family: 'Shadows Into Light', cursive; font-size: 16px; color: #3a2a50; }

/* ===== Paper note — contenteditable ===== */
.paper-text[contenteditable] { cursor: text; }
.paper-text[contenteditable="true"],
.canvas-text-content[contenteditable="true"] {
  user-select: text;
  -webkit-user-select: text;
  cursor: text;
}
.paper-text:empty::before {
  content: attr(data-placeholder);
  color: rgba(100,80,50,0.45);
  pointer-events: none;
  font-style: italic;
}
.paper-text:focus { outline: none; }

/* ===== Floating text format toolbar ===== */
.text-format-bar {
  position: fixed;
  background: #1e1610;
  border: 1px solid rgba(200,160,80,0.4);
  border-radius: 8px;
  padding: 5px 8px;
  display: flex;
  gap: 3px;
  align-items: center;
  z-index: 10200;
  box-shadow: 0 6px 24px rgba(0,0,0,0.55), 0 1px 0 rgba(255,255,255,0.06) inset;
  pointer-events: all;
  white-space: nowrap;
}
.text-format-bar.hidden { display: none; }
.fmt-btn {
  background: transparent;
  border: 1px solid rgba(255,255,255,0.18);
  color: #f0e8d0;
  border-radius: 4px;
  width: 28px;
  height: 28px;
  cursor: pointer;
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 100ms;
  flex-shrink: 0;
}
.fmt-btn:hover { background: rgba(255,255,255,0.14); }
.fmt-btn.is-on  { background: rgba(220,170,50,0.35); border-color: rgba(220,170,50,0.7); }
.fmt-sep { width: 1px; height: 22px; background: rgba(255,255,255,0.18); margin: 0 2px; flex-shrink: 0; }
.fmt-color {
  width: 28px;
  height: 28px;
  padding: 2px;
  border-radius: 4px;
  border: 1px solid rgba(255,255,255,0.25);
  cursor: pointer;
  background: transparent;
  flex-shrink: 0;
}
.fmt-font-select, .fmt-size-select {
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.2);
  color: #f0e8d0;
  border-radius: 4px;
  font-size: 10px;
  padding: 3px 4px;
  cursor: pointer;
  max-width: 90px;
}
.fmt-size-select { max-width: 54px; }




/* ===== Collaboration styles ===== */

/* Collaboration banner */
.collab-banner {
  padding: 8px 20px;
  font-size: 13px;
  font-family: var(--font-sans);
  text-align: center;
}
.collab-banner-editor { background: #fff3cd; color: #856404; }
.collab-banner-viewer { background: #d1ecf1; color: #0c5460; }

/* Page lock banner */
.page-lock-banner {
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0,0,0,0.75);
  color: #fff;
  padding: 6px 16px;
  border-radius: 20px;
  font-size: 12px;
  z-index: 100;
  pointer-events: none;
  white-space: nowrap;
}

/* Share modal */
.share-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
}
.share-modal-overlay[hidden] { display: none; }
.share-modal {
  background: #fff;
  border-radius: 16px;
  width: min(600px, 95vw);
  max-height: 85vh;
  overflow-y: auto;
  box-shadow: 0 20px 60px rgba(0,0,0,0.3);
}
.share-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px 16px;
  border-bottom: 1px solid #eee;
}
.share-modal-header h3 {
  margin: 0;
  font-size: 18px;
  font-family: var(--font-serif);
  color: #2a1f15;
}
.share-modal-close {
  background: none;
  border: none;
  font-size: 18px;
  cursor: pointer;
  color: #888;
  padding: 4px 8px;
  border-radius: 6px;
}
.share-modal-close:hover { background: #f5f5f5; }
.share-modal-body { padding: 20px 24px; }
.share-link-row {
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid #f0f0f0;
}
.share-link-label { margin-bottom: 10px; }
.share-link-label strong { display: block; font-size: 14px; color: #2a1f15; }
.share-role-desc { font-size: 12px; color: #888; }
.share-link-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.share-link-input {
  flex: 1;
  min-width: 0;
  padding: 7px 10px;
  border: 1px solid #ddd;
  border-radius: 8px;
  font-size: 12px;
  font-family: monospace;
  background: #f9f9f9;
  color: #555;
}
.share-revoke-btn { color: #dc3545 !important; }
.share-collaborators { margin-top: 4px; }
.share-collaborators h4 { font-size: 14px; color: #2a1f15; margin: 0 0 12px; }
.collab-list { list-style: none; padding: 0; margin: 0; }
.collab-list-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid #f5f5f5;
}
.collab-list-item:last-child { border-bottom: none; }
.collab-name { font-size: 13px; font-weight: 500; color: #2a1f15; flex-shrink: 0; }
.collab-email { font-size: 12px; color: #888; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.collab-role-badge {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 10px;
  font-weight: 600;
  flex-shrink: 0;
}
.collab-role-editor { background: #fff3cd; color: #856404; }
.collab-role-viewer { background: #d1ecf1; color: #0c5460; }
.collab-remove-btn {
  background: none;
  border: 1px solid #ddd;
  border-radius: 6px;
  padding: 3px 8px;
  font-size: 11px;
  cursor: pointer;
  color: #dc3545;
  flex-shrink: 0;
}
.collab-remove-btn:hover { background: #fff5f5; }
.collab-list-loading, .collab-list-empty { font-size: 13px; color: #888; padding: 8px 0; }