/* Flynery — notebook cover designer (demo) */

/* —— Page shell: warm minimal (MUJI / premium stationery) —— */
.nb-designer-demo-page {
  --nb-page-bg: #f6f5f2;
  --nb-page-bg-alt: #efeeea;
  /* Panel headers — warm taupe (ตาม mockup หัวตาราง 3 คอลัมน์) */
  --nb-frame-head-bg: #d2cbc3;
  --nb-frame-head-divider: #c4bdb4;
  --nb-frame-head-icon: #5c554e;
  --nb-frame-head-title: #2a2623;
  --nb-shell-ink: #1c1917;
  --nb-shell-muted: #78716c;
  --nb-shell-line: rgba(28, 25, 23, 0.08);
  --nb-nav-bg: #44403c;
  --nb-nav-bg-scrolled: #3d3835;
  --nb-nav-text: rgba(255, 255, 255, 0.9);
  --nb-nav-text-hover: #ffffff;
  --nb-font-display: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --nb-hero-min-h: 320px;
  --nb-hero-min-h-mobile: 260px;
  background-color: var(--nb-page-bg);
  color: var(--nb-shell-ink);
  -webkit-font-smoothing: antialiased;
}

.nb-designer-demo-page #nb-main-section {
  background: transparent;
  padding-top: 1.75rem !important;
  padding-bottom: 3.15rem !important;
}

/* Premium centered workspace — wider than Bootstrap default, not edge-to-edge */
.nb-designer-demo-page #nb-main-section.container {
  padding-inline: clamp(16px, 4vw, 32px);
}

@media (min-width: 992px) {
  .nb-designer-demo-page #nb-main-section.container {
    max-width: 1200px;
  }
}

@media (min-width: 1280px) {
  .nb-designer-demo-page #nb-main-section.container {
    max-width: 1520px;
    padding-inline: 32px;
  }
}

/* —— Navbar —— */
.nb-designer-demo-page .navbar,
.nb-designer-demo-page .navbar.bg-navb {
  padding: 0.65rem 0;
  background: var(--nb-nav-bg) !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.06),
    0 4px 20px rgba(28, 25, 23, 0.1);
  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
}

.nb-designer-demo-page .navbar-brand img {
  height: 52px !important;
  width: auto;
  opacity: 0.98;
}

.nb-designer-demo-page .navbar .nav-link {
  padding: 0.45rem 0.85rem !important;
  font-size: 0.9375rem;
  font-weight: 400;
  letter-spacing: 0.01em;
  color: var(--nb-nav-text) !important;
  transition: color 0.18s ease, background 0.18s ease;
  border-radius: 6px;
}

.nb-designer-demo-page .navbar .nav-link:hover,
.nb-designer-demo-page .navbar .nav-link:focus {
  color: var(--nb-nav-text-hover) !important;
  background: rgba(255, 255, 255, 0.08);
}

.nb-designer-demo-page .navbar .nav-item.active > .nav-link {
  color: #fff !important;
  font-weight: 500;
  background: rgba(255, 255, 255, 0.1);
}

.nb-designer-demo-page .navbar .dropdown-menu {
  border: 1px solid var(--nb-shell-line);
  border-radius: 10px;
  box-shadow: 0 8px 28px rgba(28, 25, 23, 0.12);
  padding: 0.35rem 0;
  margin-top: 0.35rem;
}

.nb-designer-demo-page .navbar .dropdown-item {
  font-size: 0.875rem;
  padding: 0.45rem 1rem;
  color: var(--nb-shell-ink);
}

.nb-designer-demo-page .navbar .dropdown-item:hover {
  background: var(--nb-page-bg-alt);
  color: var(--nb-shell-ink);
}

.nb-designer-demo-page .navbar-nav .p-0 a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.35rem 0.5rem !important;
  border-radius: 8px;
  transition: background 0.18s ease, opacity 0.18s ease;
}

.nb-designer-demo-page .navbar-nav .p-0 a:hover {
  background: rgba(255, 255, 255, 0.1);
}

.nb-designer-demo-page .navbar-nav .p-0 .fab {
  color: rgba(255, 255, 255, 0.88);
  transition: color 0.18s ease;
}

.nb-designer-demo-page .navbar-nav .p-0 a:hover .fab {
  color: #fff;
}

.nb-designer-demo-page .navbar-toggler {
  border-color: rgba(255, 255, 255, 0.25);
  padding: 0.35rem 0.55rem;
}

@media (max-width: 991px) {
  .nb-designer-demo-page .navbar-collapse {
    margin-top: 0.65rem;
    padding: 0.5rem 0.25rem 0.85rem;
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.12);
  }

  .nb-designer-demo-page .navbar .nav-link {
    border-radius: 8px;
  }
}

/* —— Hero: premium stationery studio (editorial, minimal) —— */
.nb-designer-demo-page header.jarallax.nb-studio-hero {
  margin-top: 72px;
  min-height: var(--nb-hero-min-h) !important;
  overflow: hidden;
  background-size: cover !important;
  background-position: center 40% !important;
}

/* ไล่สีนุ่มทั้งจอ — ไม่มีกล่องขาวกลาง (editorial float) */
.nb-studio-hero__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(
      105deg,
      rgba(252, 250, 247, 0.14) 0%,
      transparent 22%,
      transparent 78%,
      rgba(252, 250, 247, 0.12) 100%
    ),
    linear-gradient(
      180deg,
      rgba(252, 250, 247, 0.06) 0%,
      transparent 42%,
      rgba(246, 245, 242, 0.28) 100%
    );
}

.nb-designer-demo-page .nb-studio-hero .nb-studio-hero__content.page-image {
  position: relative;
  z-index: 2;
  min-height: var(--nb-hero-min-h) !important;
  padding: 2rem 1.75rem 2.5rem;
  gap: 0;
  background: transparent !important;
  justify-content: center;
}

.nb-designer-demo-page .nb-studio-hero .page-image h1,
.nb-designer-demo-page .nb-studio-hero .page-image p {
  color: var(--nb-shell-ink) !important;
}

/* ข้อความลอยบนภาพ — ไม่มีกรอบ/การ์ด */
.nb-studio-hero__copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 36rem;
  padding: 0;
  margin: 0;
  background: none;
  border: none;
  box-shadow: none;
}

/* by + โลโก้ script (logoFLYbrown.png) */
.nb-studio-hero__brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.2rem 0.4rem;
  margin: 0 0 0.85rem;
  line-height: 1;
}

.nb-studio-hero__by {
  font-family: var(--nb-font-display);
  font-size: clamp(0.95rem, 2.4vw, 1.125rem);
  font-weight: 400;
  font-style: italic;
  line-height: 1;
  letter-spacing: 0.05em;
  color: #5c534c !important;
  transform: translateY(0.18em);
  text-shadow: 0 1px 14px rgba(252, 250, 247, 0.35);
}

.nb-studio-hero__flynery-mark {
  display: block;
  width: clamp(4.5rem, 16vw, 7.25rem);
  height: auto;
  flex-shrink: 0;
  filter: drop-shadow(0 1px 12px rgba(252, 250, 247, 0.25));
}

.nb-studio-hero__title {
  margin: 0 0 0.65rem;
  padding: 0;
  border: none;
  line-height: 1;
  background: none;
}

.nb-studio-hero__title-studio {
  display: block;
  font-family: var(--nb-font-display);
  font-size: clamp(2.05rem, 6.5vw, 3.15rem);
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: 0.065em;
  color: var(--nb-shell-ink) !important;
  text-shadow:
    0 1px 18px rgba(252, 250, 247, 0.5),
    0 0 1px rgba(252, 250, 247, 0.65);
}

.nb-studio-hero__tagline {
  margin: 0 0 0.45rem;
  max-width: 28rem;
  font-family: 'Kanit', sans-serif;
  font-size: clamp(0.9375rem, 2.2vw, 1.125rem);
  font-weight: 400;
  line-height: 1.55;
  letter-spacing: 0.015em;
  color: #3d3835 !important;
  text-shadow: 0 1px 14px rgba(252, 250, 247, 0.4);
}

.nb-studio-hero__lead {
  margin: 0;
  max-width: 32rem;
  font-family: 'Kanit', sans-serif;
  font-size: clamp(0.75rem, 1.85vw, 0.9375rem);
  font-weight: 300;
  line-height: 1.6;
  letter-spacing: 0.012em;
  color: var(--nb-shell-muted) !important;
  text-shadow: 0 1px 12px rgba(252, 250, 247, 0.35);
}

.nb-studio-hero__guide-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 1.15rem;
  padding: 0.55rem 1.15rem 0.55rem 0.95rem;
  border: 1px solid rgba(92, 83, 76, 0.28);
  border-radius: 999px;
  background: rgba(252, 250, 247, 0.82);
  color: #3d3835;
  font-family: 'Kanit', sans-serif;
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  line-height: 1.2;
  cursor: pointer;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.7) inset,
    0 4px 18px rgba(28, 25, 23, 0.08);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition:
    background 0.18s ease,
    border-color 0.18s ease,
    color 0.18s ease,
    box-shadow 0.18s ease,
    transform 0.15s ease;
}

.nb-studio-hero__guide-btn:hover {
  background: rgba(252, 250, 247, 0.96);
  border-color: rgba(92, 83, 76, 0.42);
  color: #1c1917;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.85) inset,
    0 6px 22px rgba(28, 25, 23, 0.12);
}

.nb-studio-hero__guide-btn:focus {
  outline: none;
}

.nb-studio-hero__guide-btn:focus-visible {
  outline: none;
  border-color: rgba(92, 83, 76, 0.55);
  box-shadow: 0 0 0 3px rgba(92, 83, 76, 0.22);
}

.nb-studio-hero__guide-btn:active {
  transform: scale(0.98);
}

.nb-studio-hero__guide-btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.45rem;
  height: 1.45rem;
  border-radius: 50%;
  background: #5c554e;
  color: #faf8f5;
  font-size: 0.7rem;
}

.nb-studio-hero__guide-btn-text {
  transform: translateY(0.01em);
}

.nb-studio-hero__wave {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  z-index: 3;
  line-height: 0;
  pointer-events: none;
}

.nb-studio-hero__wave svg {
  display: block;
  width: 100%;
  height: clamp(28px, 5vw, 56px);
}

@media (max-width: 768px) {
  .nb-designer-demo-page header.jarallax.nb-studio-hero {
    margin-top: 68px;
    min-height: var(--nb-hero-min-h-mobile) !important;
    background-position: center 38% !important;
  }

  .nb-designer-demo-page .nb-studio-hero .nb-studio-hero__content.page-image {
    min-height: var(--nb-hero-min-h-mobile) !important;
    padding: 1.75rem 1.25rem 2.25rem;
  }

  .nb-studio-hero__brand {
    margin-bottom: 0.65rem;
  }

  .nb-studio-hero__title {
    margin-bottom: 0.55rem;
  }

  .nb-studio-hero__guide-btn {
    margin-top: 0.95rem;
    padding: 0.5rem 1rem 0.5rem 0.85rem;
    font-size: 0.8125rem;
  }

  .nb-studio-hero__tagline {
    margin-bottom: 0.4rem;
  }
}

/* —— Pre-footer brand strip (footer.php jarallax) —— */
.nb-designer-demo-page > section.jarallax:not(.nb-demo-hero) {
  margin-top: 0 !important;
  min-height: 0 !important;
  padding: 2.5rem 0 !important;
  background-size: cover !important;
  background-position: center !important;
}

.nb-designer-demo-page > section.jarallax:not(.nb-demo-hero)::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(28, 25, 23, 0.28);
  pointer-events: none;
  z-index: 0;
}

.nb-designer-demo-page > section.jarallax:not(.nb-demo-hero) .container {
  position: relative;
  z-index: 1;
}

.nb-designer-demo-page > section.jarallax:not(.nb-demo-hero) h2.display-6 {
  font-size: 1.125rem;
  font-weight: 400;
  letter-spacing: 0.02em;
  opacity: 0.95;
}

.nb-designer-demo-page > section.jarallax:not(.nb-demo-hero) img {
  opacity: 0.96;
}

/* —— Footer —— */
.nb-designer-demo-page .semi-footer {
  background: #fafaf9 !important;
  color: var(--nb-shell-ink) !important;
  border-top: 1px solid var(--nb-shell-line);
  padding: 2.5rem 1rem !important;
  text-align: left;
}

.nb-designer-demo-page .semi-footer h4 {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--nb-shell-muted) !important;
  border-bottom: none !important;
  padding: 0 0 0.65rem !important;
  margin-bottom: 0.85rem;
}

.nb-designer-demo-page .semi-footer p {
  font-size: 0.875rem;
  line-height: 1.65;
  color: var(--nb-shell-muted);
  margin-bottom: 0;
}

.nb-designer-demo-page .semi-footer .fa,
.nb-designer-demo-page .semi-footer .fab {
  color: var(--nb-shell-muted);
}

.nb-designer-demo-page .semi-footer a {
  color: var(--nb-shell-ink) !important;
  transition: color 0.15s ease, opacity 0.15s ease;
}

.nb-designer-demo-page .semi-footer a:hover {
  color: var(--nb-nav-bg) !important;
  opacity: 0.9;
}

.nb-designer-demo-page .semi-footer a:hover .fab {
  color: var(--nb-nav-bg);
}

.nb-designer-demo-page .semi-footer .nav-link {
  padding: 0.25rem 0 !important;
  font-size: 0.875rem;
  color: var(--nb-shell-muted) !important;
}

.nb-designer-demo-page .semi-footer .nav-item.active > .nav-link,
.nb-designer-demo-page .semi-footer .nav-link:hover {
  color: var(--nb-shell-ink) !important;
  background: transparent !important;
}

.nb-designer-demo-page .semi-footer #map {
  border: 1px solid var(--nb-shell-line);
  border-radius: 12px;
  box-shadow: none;
}

.nb-designer-demo-page .footer {
  background: var(--nb-page-bg-alt) !important;
  color: var(--nb-shell-muted) !important;
  font-size: 0.8125rem;
  line-height: 1.5;
  padding: 1rem 1.25rem !important;
  height: auto !important;
  border-top: 1px solid var(--nb-shell-line);
}

.nb-designer-demo-page .footer a {
  color: var(--nb-shell-ink);
  text-decoration: none;
  font-weight: 500;
}

.nb-designer-demo-page .footer a:hover {
  color: var(--nb-nav-bg);
  text-decoration: underline;
}

.nb-designer-demo-page .to-top {
  background: var(--nb-nav-bg);
  color: #fff;
  border-radius: 10px;
  box-shadow: 0 4px 16px rgba(28, 25, 23, 0.15);
}

.nb-designer-wrap {
  --nb-cover: #3d4a3f;
  --nb-cover-2: #526358;
  --nb-elastic: #b9a68c;
  --nb-belt: #dccfaf;
  /* มุมโค้งปก: ใช้ 5.5cqw บน .nb-notebook + px จาก JS (ไม่ใช้ % เพราะทำให้มุมเป็นวงรี) */
  --nb-ribbon: #6e6458;
  --nb-pen-loop: #4a5f4e;
  /* Neutral premium palette (MUJI / Notion-like) */
  --nb-ink: #1c1917;
  --nb-ink-soft: #44403c;
  --nb-ink-muted: #78716c;
  --nb-brand: #44403c;
  --nb-brand-dark: #292524;
  --nb-brand-light: #57534e;
  --nb-cream: #fafaf9;
  --nb-cream-deep: #f5f5f4;
  --nb-line: rgba(28, 25, 23, 0.08);
  --nb-line-input: rgba(28, 25, 23, 0.14);
  --nb-btn-surface: #ffffff;
  --nb-btn-surface-hover: #f5f5f4;
  --nb-accent: #292524;
  --nb-select-frame: #292524;
  --nb-select-frame-width: 1px;
  --nb-select-fill: #f5f5f4;
  --nb-select-fill-strong: #e7e5e4;
  --nb-select-ring: rgba(28, 25, 23, 0.12);
  --nb-select-preview: rgba(255, 255, 255, 0.2);
  /* Canvas handles — unchanged hue, calmer saturation */
  --nb-ps-select: #2563eb;
  --nb-border: var(--nb-line);
  --nb-border-strong: rgba(28, 25, 23, 0.12);
  --nb-radius-frame: 14px;
  --nb-radius-inner: 10px;
  --nb-radius-control: 8px;
  --nb-shadow-frame: 0 1px 2px rgba(28, 25, 23, 0.04), 0 4px 16px rgba(28, 25, 23, 0.06);
  --nb-shadow-card: 0 1px 2px rgba(28, 25, 23, 0.05);
  --nb-shadow-elevated: 0 4px 24px rgba(28, 25, 23, 0.08);
  --nb-stage-bg: #ececea;
  --nb-action-outline-bg: #ffffff;
  --nb-action-outline-hover: #f5f5f4;
  --nb-action-outline-border: rgba(28, 25, 23, 0.16);
  --nb-action-outline-text: var(--nb-ink-soft);
  --nb-action-primary-bg: #292524;
  --nb-action-primary-hover: #1c1917;
  --nb-action-primary-border: #292524;
  --nb-action-primary-text: #fafaf9;
  --nb-action-filled-bg: #44403c;
  --nb-action-filled-hover: #292524;
  --nb-action-filled-text: #fafaf9;
  --nb-action-shadow: 0 1px 2px rgba(28, 25, 23, 0.08);
  /* Typography — calm premium hierarchy */
  --nb-type-col-head: 1.25rem;
  --nb-type-col-sub: 0.9375rem;
  --nb-type-section: 0.875rem;
  --nb-type-head-ink: #2f2a27;
  --nb-type-section-ink: #5f5a54;
  --nb-type-group: 0.75rem;
  --nb-type-body: 0.8125rem;
  --nb-type-caption: 0.75rem;
  --nb-type-control: 0.875rem;
  --nb-type-action: 0.875rem;
  --nb-space-field: 1.35rem;
  --nb-space-frame: 1.3rem;
  --nb-space-flow: 0.75rem;
  --nb-color-column-bg: #ece9e4;
  --nb-layout-gap: 1.4rem;
  --nb-sep-scale: 1.12;
  --nb-studio-gap: 1.35rem;
  --nb-preview-notebook-max: 300px;
  max-width: 100%;
  margin: 0 auto;
  color: var(--nb-ink-soft);
  font-size: var(--nb-type-body);
  line-height: 1.5;
}

/* ฟอร์มในตัวออกแบบ — ไม่ให้ Bootstrap ใหญ่กว่าหัว section */
.nb-designer-wrap .form-control,
.nb-designer-wrap .form-control-sm,
.nb-designer-wrap select.form-control {
  font-size: var(--nb-type-control);
  border-color: var(--nb-line-input);
  border-radius: var(--nb-radius-control);
  color: var(--nb-ink-soft);
  background: #ffffff;
}

.nb-designer-wrap .form-control:focus,
.nb-designer-wrap select.form-control:focus {
  border-color: var(--nb-brand-light);
  box-shadow: 0 0 0 3px var(--nb-select-ring);
}

/* กรอบ select ค้างชัด — ใช้ร่วมทุกปุ่ม/ชิป/แบบปก */
.nb-cover-style-pick.is-active,
.nb-size-btns button.is-active,
.nb-btn-binding.is-active,
.nb-btn-inner-content.is-active,
.nb-btn-ribbon.is-active,
.nb-btn-decoration.is-active,
.nb-btn-pen-loop.is-active,
.nb-color-chip.is-active,
.nb-swatch-block.is-active {
  border-color: var(--nb-select-frame) !important;
  border-width: var(--nb-select-frame-width) !important;
  background: var(--nb-select-fill) !important;
  box-shadow: 0 0 0 3px var(--nb-select-ring);
  color: var(--nb-ink);
  font-weight: 600;
}

.nb-size-btns button,
.nb-btn-binding,
.nb-btn-inner-content,
.nb-btn-decoration,
.nb-btn-ribbon,
.nb-btn-decoration,
.nb-btn-pen-loop,
.nb-cover-style-pick,
.nb-color-chip {
  background: var(--nb-btn-surface);
  box-shadow: none;
}

.nb-size-btns button:hover,
.nb-btn-binding:hover,
.nb-btn-inner-content:hover,
.nb-btn-ribbon:hover,
.nb-btn-decoration:hover,
.nb-btn-pen-loop:hover,
.nb-cover-style-pick:hover,
.nb-color-chip:hover {
  background: var(--nb-btn-surface-hover);
}

.nb-designer-hero {
  background: linear-gradient(135deg, #3d2914 0%, #5c4033 45%, #2a1f18 100%);
  color: #f5efe6;
  padding: 2rem 1rem;
  border-radius: 4px;
  margin-bottom: 1.5rem;
}

.nb-designer-hero h1 {
  font-size: 1.65rem;
  font-weight: 300;
  letter-spacing: 0.02em;
}

.nb-designer-hero p {
  opacity: 0.92;
  margin-bottom: 0;
  font-size: 0.95rem;
}

.nb-layout {
  display: flex;
  flex-direction: column;
  gap: var(--nb-layout-gap);
  align-items: stretch;
}

/* Mobile / tablet: product studio before long spec form */
.nb-column--studio {
  order: 1;
}

.nb-column--specs {
  order: 2;
}

@media (min-width: 992px) {
  .nb-layout {
    display: grid;
    grid-template-columns: minmax(300px, 340px) minmax(0, 1fr);
    gap: 1.5rem;
    align-items: stretch;
  }

  .nb-column--studio,
  .nb-column--specs {
    order: unset;
  }

  .nb-column--specs {
    display: flex;
    flex-direction: column;
    min-height: 0;
  }

  .nb-column--specs > .nb-frame--specs {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
  }

  .nb-column--specs > .nb-frame--specs > .nb-frame__body {
    flex: 1 1 auto;
  }

  .nb-column--studio {
    min-height: 0;
  }

  /* ยื่นกรอบ Material + Preview ให้ก้นเสมอกับคอลัมน์ซ้าย (saved อยู่ล่างกรอบ) */
  .nb-studio-grid {
    flex: 1 1 auto;
    min-height: 0;
    align-self: stretch;
  }

  .nb-frame--saved {
    flex: 0 0 auto;
  }
}

@media (min-width: 992px) {
  .nb-designer-wrap {
    --nb-preview-notebook-max: 440px;
  }
}

@media (min-width: 1280px) {
  .nb-designer-wrap {
    --nb-layout-gap: 1.65rem;
    --nb-studio-gap: 1.45rem;
    --nb-preview-notebook-max: 520px;
  }

  .nb-layout {
    grid-template-columns: minmax(320px, 360px) minmax(0, 1fr);
    gap: var(--nb-layout-gap);
  }
}

@media (min-width: 1400px) {
  .nb-designer-wrap {
    --nb-preview-notebook-max: 560px;
  }
}

.nb-column--studio {
  display: flex;
  flex-direction: column;
  gap: var(--nb-studio-gap);
  min-width: 0;
}

.nb-studio-grid {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}

/* Preview-first: product card before color tools */
.nb-studio-grid .nb-frame--preview {
  order: -1;
}

.nb-studio-grid .nb-frame--colors {
  order: 0;
}

@media (min-width: 768px) {
  .nb-studio-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.28fr);
    align-items: stretch;
    gap: 1.25rem;
  }

  .nb-studio-grid .nb-frame--preview {
    order: 2;
  }

  .nb-studio-grid .nb-frame--colors {
    order: 1;
  }

  .nb-frame--preview {
    height: 100%;
    display: flex;
    flex-direction: column;
  }

  .nb-studio-grid .nb-frame--colors {
    align-self: stretch;
  }

  .nb-frame--colors {
    display: flex;
    flex-direction: column;
    width: 100%;
    min-height: 100%;
  }

  .nb-frame--preview .nb-frame__body {
    flex: 1;
    display: flex;
    flex-direction: column;
  }

  .nb-frame--colors .nb-frame__body {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
  }

  .nb-color-block--picker {
    flex: 0 0 auto;
  }

  .nb-frame--preview .nb-preview-stage {
    flex: 1;
    min-height: 280px;
  }
}

@media (min-width: 1280px) {
  .nb-studio-grid {
    grid-template-columns: minmax(320px, 360px) minmax(0, 1fr);
    gap: 1.5rem;
  }
}

@media (min-width: 390px) and (max-width: 767px) {
  .nb-notebook {
    width: min(78vw, 240px);
  }
}

/* —— Framed sections — flat premium cards —— */
.nb-frame {
  position: relative;
  border: 1px solid var(--nb-line);
  border-radius: var(--nb-radius-frame);
  background-color: #ffffff;
  box-shadow:
    0 1px 2px rgba(28, 25, 23, 0.03),
    0 3px 14px rgba(28, 25, 23, 0.05);
  overflow: hidden;
}

.nb-frame--preview {
  box-shadow: var(--nb-shadow-elevated);
  overflow: hidden;
}

.nb-frame--preview:has(.nb-cover-art-active) {
  overflow: visible;
}

.nb-frame--preview:has(.nb-cover-art-active) > .nb-frame__body--preview {
  overflow: visible;
}

.nb-frame--preview > .nb-frame__head {
  border-radius: var(--nb-radius-frame) var(--nb-radius-frame) 0 0;
}

.nb-frame--preview .nb-frame__body--preview {
  overflow: visible;
}

.nb-frame__head {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.5rem;
  padding: 12px 18px;
  background: var(--nb-frame-head-bg);
  border-bottom: 1px solid var(--nb-frame-head-divider);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

/* 3 panel หลัก — section anchor ชัดขึ้น ไม่หนักแบบ dashboard */
.nb-frame__head:not(.nb-frame__head--sub) {
  padding: 17px 18px 16px;
  gap: 0.5625rem;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.38);
}

.nb-frame__head--sub {
  padding: 12px 18px;
}

.nb-frame__head-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 1.1875rem;
  height: 1.1875rem;
  font-size: 1.0625rem;
  line-height: 1;
  color: var(--nb-frame-head-icon);
  opacity: 0.9;
}

.nb-frame__head:not(.nb-frame__head--sub) .nb-frame__head-icon {
  margin-top: 0.02em;
}

.nb-frame__head-icon .fa {
  font-size: inherit;
  line-height: 1;
  color: inherit;
}

.nb-frame__head-title {
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.3;
  color: var(--nb-frame-head-title);
  text-shadow: none;
  margin: 0;
}

.nb-frame__head:not(.nb-frame__head--sub) .nb-frame__head-title {
  font-size: 1.03125rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.28;
}

.nb-frame__head--sub .nb-frame__head-title {
  font-size: var(--nb-type-col-sub);
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--nb-type-section-ink);
}

.nb-frame__body {
  padding: 1.2rem 1.28rem 1.32rem;
  background: #ffffff;
}

.nb-frame--specs .nb-frame__body {
  padding-bottom: 1.25rem;
}

.nb-frame__body--preview {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1.1rem 1.22rem 1.35rem;
  background: var(--nb-cream);
}

.nb-frame--colors .nb-frame__body,
.nb-frame__body--colors {
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
  background: var(--nb-color-column-bg);
}

/* Material Colors — สเปกตรัม → ชิ้นส่วน → แบบที่กำลังเลือก */
.nb-color-column-flow {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.nb-color-block {
  flex: 0 0 auto;
  min-width: 0;
}

.nb-color-block__head {
  padding: 0.6rem 0.72rem;
  background: var(--nb-frame-head-bg);
  border-bottom: 1px solid var(--nb-frame-head-divider);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

.nb-color-block__title {
  margin: 0;
  font-size: var(--nb-type-caption);
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.35;
  color: var(--nb-type-section-ink);
}

.nb-color-block__body {
  padding: 0.72rem 0.72rem 0.78rem;
  background: #fff;
}

.nb-color-block--picker {
  padding: 0.72rem 0.72rem 0.65rem;
  background: var(--nb-color-column-bg);
}

.nb-color-block--parts,
.nb-color-block--current {
  border-top: 1px solid rgba(28, 25, 23, 0.07);
}

.nb-color-block--current .nb-color-block__body {
  padding-bottom: 0.72rem;
}

.nb-current-design-meta {
  margin: 0;
}

.nb-current-design-meta .nb-saved-meta__list {
  margin: 0;
}

.nb-current-design-actions {
  margin-top: 0.55rem;
}

.nb-color-tool-section,
.nb-color-spectrum-block {
  display: flex;
  flex-direction: column;
  flex: 0 1 auto;
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  min-height: 0;
  padding: 0;
  border: 1px solid rgba(28, 25, 23, 0.06);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 1px 6px rgba(28, 25, 23, 0.05);
  overflow: hidden;
}

.nb-color-tool-section__core {
  flex: 0 0 auto;
  padding: 0.58rem 0.58rem 0;
  background: #fff;
}

.nb-color-tool-section__spectrum {
  flex: 0 0 auto;
}

.nb-color-tool-section__spectrum .nb-swatches,
.nb-color-tool-section__spectrum #nb-swatches-single {
  flex: 0 0 auto;
}

.nb-color-tool-section .nb-spectrum-hint {
  margin: 0.35rem 0 0;
  padding: 0 0.15rem 0.45rem;
  text-align: left;
  line-height: 1.45;
}

.nb-color-tool-section__controls,
.nb-color-picker-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.42rem 0.52rem;
  flex: 0 0 auto;
  margin: 0;
  padding: 0.52rem 0.58rem 0.58rem;
  border: none;
  border-top: 1px solid rgba(28, 25, 23, 0.06);
  border-radius: 0 0 14px 14px;
  background: #fafaf9;
}

.nb-color-tool-section__controls .nb-spectrum-panel__tab,
.nb-color-picker-row .nb-spectrum-panel__tab {
  margin: 0;
  flex-shrink: 0;
}

.nb-spectrum-panel__tab--idle {
  font-weight: 500;
  color: var(--nb-ink-muted);
  background: var(--nb-cream-deep);
  border-color: var(--nb-line);
}

.nb-color-tools--inline {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  flex: 1 1 auto;
  min-width: 0;
  justify-content: flex-end;
}

.nb-color-tools--inline .nb-input-color {
  width: 30px;
  height: 26px;
  border-radius: 8px;
}

.nb-color-tools--inline .nb-eyedropper-btn {
  min-width: 26px;
  height: 26px;
  padding: 0 0.35rem;
  border-radius: 8px;
}

.nb-color-tools--inline .nb-hex-label {
  font-size: var(--nb-type-caption);
}

.nb-frame--colors .nb-color-chips-grid {
  margin-top: 0;
  margin-bottom: 0;
}

.nb-panel {
  background: var(--nb-cream);
  border: 1px solid var(--nb-border);
  border-radius: var(--nb-radius-inner);
  padding: 1.25rem 1.25rem 1.5rem;
}

.nb-panel h2 {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--nb-ink);
  margin-bottom: 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--nb-border);
}

.nb-field {
  margin-bottom: var(--nb-space-field);
}

.nb-field__label,
.nb-field label {
  display: block;
  font-size: var(--nb-type-section);
  color: var(--nb-type-section-ink);
  margin-bottom: 0.45rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.4;
}

/* Notebook Setup — subsection labels (quieter than column headers) */
.nb-column--specs .nb-field:first-child {
  margin-top: 0.05rem;
}

.nb-column--specs .nb-field__label,
.nb-column--specs label.nb-field__label,
.nb-column--specs .nb-inline-label {
  font-size: var(--nb-type-section);
  font-weight: 600;
  color: var(--nb-type-section-ink);
  margin-bottom: 0.55rem;
  line-height: 1.45;
  letter-spacing: 0.01em;
}

/* Nested field labels (dimensions, page count) */
.nb-column--specs .nb-custom-size .nb-inline-label,
.nb-column--specs #nb-page-count-wrap .nb-inline-label {
  font-size: var(--nb-type-body);
  font-weight: 500;
  color: var(--nb-ink-muted);
  margin-bottom: 0.35rem;
  letter-spacing: 0.01em;
}

.nb-column--specs .nb-size-btns button {
  font-size: var(--nb-type-control);
  font-weight: 500;
}

.nb-size-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
}

.nb-size-btns button,
.nb-btn-binding,
.nb-btn-inner-content,
.nb-btn-ribbon,
.nb-btn-decoration,
.nb-btn-pen-loop {
  box-sizing: border-box;
}

.nb-size-btns button {
  flex: 1 1 auto;
  min-width: 4.5rem;
  min-height: 0;
  padding: 0.32rem 0.58rem;
  font-size: var(--nb-type-control);
  font-weight: 500;
  line-height: 1.2;
  border: 1px solid var(--nb-line-input);
  color: var(--nb-ink-soft);
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
}

.nb-size-btns button:hover {
  border-color: #b5b0ad;
}

.nb-size-dim {
  font-size: var(--nb-type-caption);
  color: var(--nb-ink-muted);
  margin-top: 0.35rem;
  line-height: 1.35;
}

.nb-binding-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.nb-closure-btns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.45rem;
}

.nb-btn-closure {
  display: block;
  width: 100%;
  min-height: 0;
  padding: 0.3rem 0.5rem;
  font-size: var(--nb-type-control);
  font-weight: 500;
  line-height: 1.2;
  text-align: center;
  border: 1px solid var(--nb-border);
  border-radius: 6px;
  background: var(--nb-btn-surface);
  color: var(--nb-ink-soft);
  cursor: pointer;
  transition:
    border-color 0.15s ease,
    background 0.15s ease,
    color 0.15s ease;
}

.nb-btn-closure:hover {
  border-color: var(--nb-brand-light);
  background: var(--nb-btn-surface-hover);
}

.nb-btn-closure.is-active {
  border-color: var(--nb-accent);
  background: var(--nb-select-fill);
  box-shadow: 0 0 0 3px var(--nb-select-ring);
  color: var(--nb-ink);
  font-weight: 600;
}

.nb-belt-controls {
  margin-top: 0.55rem;
}

.nb-belt-controls--hidden {
  display: none;
}

.nb-belt-edge-btns {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.4rem;
}

.nb-btn-belt-edge {
  display: block;
  width: 100%;
  padding: 0.28rem 0.35rem;
  font-size: var(--nb-type-caption);
  font-weight: 500;
  line-height: 1.25;
  text-align: center;
  border: 1px solid var(--nb-border);
  border-radius: 6px;
  background: var(--nb-btn-surface);
  color: var(--nb-ink-soft);
  cursor: pointer;
  transition:
    border-color 0.15s ease,
    background 0.15s ease,
    color 0.15s ease;
}

.nb-btn-belt-edge:hover {
  border-color: var(--nb-brand-light);
  background: var(--nb-btn-surface-hover);
}

.nb-btn-belt-edge.is-active {
  border-color: var(--nb-accent);
  background: var(--nb-select-fill);
  box-shadow: 0 0 0 2px var(--nb-select-ring);
  color: var(--nb-ink);
  font-weight: 600;
}

.nb-belt-controls__hint {
  margin: 0.35rem 0 0;
  font-size: var(--nb-type-caption);
  color: var(--nb-ink-muted);
  line-height: 1.45;
}

/* เลือกแบบปก — สีตัวอย่างคงที่ (layout เท่านั้น ไม่ตามสีที่ user เปลี่ยน) */
/* โทน neutral อุ่น — ไม่ผูกกับสีปกจริงใน engine (DEFAULT_HEX ใน JS) */
.nb-cover-style-picker {
  --nb-thumb-a: #a29b8b;
  --nb-thumb-b: #d9d4cb;
  --nb-thumb-bg: #f1efeb;
  --nb-thumb-spine: rgba(28, 25, 23, 0.1);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.4rem;
  background: var(--nb-thumb-bg);
  border: 1px solid var(--nb-line);
  border-radius: var(--nb-radius-inner);
  padding: 0.55rem 0.5rem 0.5rem;
}

.nb-cover-style-picker__heading {
  font-size: var(--nb-type-group);
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--nb-ink-muted);
  margin: 0 0 0.4rem;
  line-height: 1.3;
}

.nb-cover-style-picker__heading:not(:first-child) {
  margin-top: 0.65rem;
}

.nb-cover-style-picker__hint {
  font-size: var(--nb-type-caption);
  font-weight: 400;
  color: var(--nb-ink-muted);
  margin: 0 0 0.35rem;
  line-height: 1.4;
}

/* ปุ่มทุกแถวอยู่กริดเดียวกัน — คอลัมน์ตรงแนว */
.nb-cover-style-row--solo,
.nb-cover-style-row--grid {
  display: contents;
}

/* ขนาดเท่าแถวกริด — คอลัมน์แรกตรงกับด้านล่าง */
.nb-cover-style-row--solo .nb-cover-style-thumb--lg {
  width: 34px;
  height: 46px;
  border-radius: 0 5px 5px 0;
}

/* ปุ่มเลือกแบบ — โปร่งบนพื้น picker (ไม่ซ้อนกล่องขาว) */
.nb-cover-style-picker .nb-cover-style-pick {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-width: 0;
  padding: 0.28rem;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  cursor: pointer;
  box-sizing: border-box;
  transition:
    border-color 0.18s ease,
    background 0.18s ease,
    box-shadow 0.18s ease;
  min-height: 0;
  box-shadow: none;
  font-weight: inherit;
  color: inherit;
}

.nb-cover-style-picker .nb-cover-style-pick:hover {
  border-color: rgba(28, 25, 23, 0.1);
  background: rgba(255, 255, 255, 0.5);
  box-shadow: 0 1px 3px rgba(28, 25, 23, 0.05);
}

.nb-cover-style-picker .nb-cover-style-pick.is-active {
  border-color: rgba(28, 25, 23, 0.14) !important;
  border-width: 1px !important;
  background: rgba(255, 255, 255, 0.72) !important;
  box-shadow:
    0 0 0 2px var(--nb-select-ring),
    0 1px 3px rgba(28, 25, 23, 0.06) !important;
  font-weight: inherit !important;
}

.nb-cover-style-picker .nb-cover-style-thumb {
  position: relative;
  display: block;
  width: 34px;
  height: 46px;
  border-radius: 0 5px 5px 0;
  border: 1px solid var(--nb-thumb-spine);
  box-shadow:
    inset -1px 0 2px rgba(0, 0, 0, 0.06),
    0 1px 3px rgba(0, 0, 0, 0.08);
  background: var(--nb-thumb-a);
  overflow: hidden;
}

.nb-cover-style-picker .nb-cover-style-pick:hover .nb-cover-style-thumb,
.nb-cover-style-picker .nb-cover-style-pick.is-active .nb-cover-style-thumb {
  box-shadow:
    inset -1px 0 2px rgba(0, 0, 0, 0.05),
    0 2px 5px rgba(28, 25, 23, 0.09);
}

/* แบบ 9–10: JS ใส่ fill น้ำตาล inline — บังคับโทน thumb ด้วย CSS เท่านั้น */
.nb-cover-style-picker .nb-cover-style-thumb--from-svg,
.nb-cover-style-picker .nb-cover-style-thumb--edge {
  color: var(--nb-thumb-b);
  background: var(--nb-thumb-a) !important;
}

.nb-cover-style-picker .nb-cover-style-thumb--from-svg svg > rect:first-of-type {
  fill: var(--nb-thumb-a) !important;
}

.nb-cover-style-picker .nb-cover-style-thumb--from-svg .nb-cover-style-thumb__shape,
.nb-cover-style-picker .nb-cover-style-thumb--from-svg svg path,
.nb-cover-style-picker .nb-cover-style-thumb--from-svg svg circle,
.nb-cover-style-picker .nb-cover-style-thumb--from-svg svg ellipse,
.nb-cover-style-picker .nb-cover-style-thumb--from-svg svg polygon {
  fill: var(--nb-thumb-b) !important;
}

.nb-cover-style-picker .nb-cover-style-thumb--from-svg svg [class*='st'] {
  fill: var(--nb-thumb-b) !important;
}

.nb-cover-style-thumb--lg {
  width: 48px;
  height: 64px;
  border-radius: 0 6px 6px 0;
}

.nb-cover-style-thumb[data-thumb-style='solid'] {
  background: var(--nb-thumb-a);
}

.nb-cover-style-thumb[data-thumb-style='split-h'] {
  background: linear-gradient(180deg, var(--nb-thumb-a) 50%, var(--nb-thumb-b) 50%);
}

.nb-cover-style-thumb[data-thumb-style='split-v'] {
  background: linear-gradient(90deg, var(--nb-thumb-a) 50%, var(--nb-thumb-b) 50%);
}

/* แบบ 3 — แถบตั้งบนพื้นสี */
.nb-cover-style-thumb[data-thumb-style='split-v-narrow'] {
  background: linear-gradient(
    90deg,
    var(--nb-thumb-a) 0%,
    var(--nb-thumb-a) 34%,
    var(--nb-thumb-b) 34%,
    var(--nb-thumb-b) 58%,
    var(--nb-thumb-a) 58%,
    var(--nb-thumb-a) 100%
  );
}

/* แบบ 4 — แถบนอนบนพื้นสี */
.nb-cover-style-thumb[data-thumb-style='split-h-narrow'] {
  background: linear-gradient(
    180deg,
    var(--nb-thumb-a) 0%,
    var(--nb-thumb-a) 32%,
    var(--nb-thumb-b) 32%,
    var(--nb-thumb-b) 52%,
    var(--nb-thumb-a) 52%,
    var(--nb-thumb-a) 100%
  );
}

.nb-cover-style-thumb[data-thumb-style='diagonal-tl'] {
  background: linear-gradient(135deg, var(--nb-thumb-a) 50%, var(--nb-thumb-b) 50%);
}

.nb-cover-style-thumb[data-thumb-style='diagonal-tr'] {
  background: linear-gradient(225deg, var(--nb-thumb-a) 50%, var(--nb-thumb-b) 50%);
}

/* แบบ 7 — แถบทแยง TL→BR */
.nb-cover-style-thumb[data-thumb-style='band-h']::after,
.nb-cover-style-thumb[data-thumb-style='corner-tr']::after {
  content: '';
  position: absolute;
  left: -40%;
  width: 180%;
  height: 22%;
  background: var(--nb-thumb-b);
  pointer-events: none;
}

.nb-cover-style-thumb[data-thumb-style='band-h']::after {
  top: 34%;
  transform: rotate(45deg);
}

/* แบบ 8 — แถบทแยง BL→TR */
.nb-cover-style-thumb[data-thumb-style='corner-tr']::after {
  top: 40%;
  transform: rotate(-45deg);
}

/* แบบ 9–10: thumbnail จากรูปแบบที่ออกแบบ (edge-style-thumbs.png) */
.nb-cover-style-picker .nb-cover-style-thumb--png {
  background-color: var(--nb-thumb-bg) !important;
  background-image: url('../images/notebook-designer/edge-style-thumbs.png');
  background-repeat: no-repeat;
  background-size: 200% 100%;
  /* รูป PNG เดิมโทนน้ำตาล — ดึงให้ใกล้ neutral */
  filter: saturate(0.42) sepia(0.12) brightness(1.06) contrast(0.92);
}

.nb-cover-style-thumb--png[data-thumb-style='edge-tab'] {
  background-position: 0% center;
}

/* แบบ 10: สามเหลี่ยมขอบขวา */
.nb-cover-style-thumb--tri {
  background: var(--nb-thumb-a) !important;
  background-image: none !important;
}

.nb-cover-style-thumb--tri::after {
  content: '';
  position: absolute;
  right: 6%;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 11px 0 11px 17px;
  border-color: transparent transparent transparent var(--nb-thumb-b);
  background: none;
  clip-path: none;
}

.nb-cover-style-thumb--png::after {
  display: none !important;
}

/* แบบ 9–10: thumbnail จาก decoration-*.svg (JS ใส่ <svg>) — saved cards */
.nb-cover-style-thumb--from-svg {
  background: var(--nb-thumb-a) !important;
}

.nb-cover-style-thumb--from-svg::after {
  display: none !important;
}

.nb-cover-style-thumb--from-svg svg {
  display: block;
  width: 100%;
  height: 100%;
}

.nb-cover-style-thumb--edge {
  background: var(--nb-thumb-a) !important;
  background-image: none !important;
}

.nb-cover-style-thumb--edge::after {
  display: none !important;
}

.nb-cover-style-thumb--from-svg .nb-cover-style-thumb__shape {
  fill: var(--nb-thumb-b);
}

/* สำรองก่อนโหลด SVG */
.nb-cover-style-thumb[data-thumb-style='edge-tab']:not(.nb-cover-style-thumb--from-svg) {
  background: linear-gradient(90deg, var(--nb-thumb-a) 58%, var(--nb-thumb-b) 58%);
}

.nb-cover-style-thumb[data-thumb-style='edge-tab']:not(.nb-cover-style-thumb--from-svg)::after {
  content: '';
  position: absolute;
  right: -6%;
  top: 50%;
  width: 52%;
  height: 52%;
  transform: translateY(-50%);
  border-radius: 50%;
  background: var(--nb-thumb-b);
}

.nb-cover-style-thumb[data-thumb-style='edge-wave']:not(.nb-cover-style-thumb--from-svg) {
  background: linear-gradient(90deg, var(--nb-thumb-a) 52%, var(--nb-thumb-b) 52%);
}

.nb-cover-style-thumb[data-thumb-style='edge-wave']:not(.nb-cover-style-thumb--from-svg)::after {
  content: '';
  position: absolute;
  right: 0;
  top: 0;
  width: 48%;
  height: 100%;
  background: var(--nb-thumb-b);
  clip-path: polygon(0 0, 100% 12%, 88% 50%, 100% 88%, 0 100%);
}

@media (max-width: 991px) {
  .nb-cover-style-picker {
    gap: 0.35rem;
  }

  .nb-cover-style-picker .nb-cover-style-thumb {
    width: 28px;
    height: 38px;
  }

  .nb-cover-style-row--solo .nb-cover-style-thumb--lg {
    width: 28px;
    height: 38px;
  }
}

.nb-cover-style-edit-ui {
  grid-column: 1 / -1;
  margin-top: 0.05rem;
  padding-top: 0.45rem;
  border-top: 1px solid rgba(28, 25, 23, 0.06);
}

.nb-cover-style-edit-ui[hidden] {
  display: none !important;
}

.nb-cover-style-hint,
.nb-cover-split-hint {
  font-size: var(--nb-type-caption);
  font-weight: 400;
  color: var(--nb-ink-muted);
  line-height: 1.5;
  margin: 0;
  text-align: center;
  white-space: pre-line;
}

.nb-btn-binding,
.nb-btn-inner-content,
.nb-btn-ribbon,
.nb-btn-decoration,
.nb-btn-pen-loop {
  flex: 1 1 auto;
  min-width: 6.5rem;
  min-height: 0;
  padding: 0.32rem 0.58rem;
  font-size: var(--nb-type-control);
  font-weight: 500;
  line-height: 1.2;
  border: 1px solid var(--nb-line-input);
  color: var(--nb-ink-soft);
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
}

.nb-btn-binding:hover,
.nb-btn-inner-content:hover,
.nb-btn-ribbon:hover,
.nb-btn-decoration:hover,
.nb-btn-pen-loop:hover {
  border-color: #b5b0ad;
}

.nb-inline-label {
  font-size: var(--nb-type-caption);
  color: var(--nb-ink-muted);
  margin-bottom: 0.25rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  line-height: 1.4;
}

.nb-cover-style-picker .nb-inline-label {
  font-weight: 400;
}

.nb-color-target-pill {
  display: inline-block;
  font-size: var(--nb-type-caption);
  font-weight: 600;
  color: var(--nb-ink);
  background: var(--nb-select-fill);
  border: 1px solid var(--nb-line-input);
  border-radius: 999px;
  padding: 0.3rem 0.8rem;
  margin-bottom: 0.5rem;
}

.nb-color-target-pill.nb-color-target-pill--idle {
  font-weight: 500;
  color: var(--nb-ink-muted);
  background: var(--nb-cream-deep);
  border-color: var(--nb-line);
}

.nb-swatch-hint {
  font-size: var(--nb-type-caption);
  color: var(--nb-ink-muted);
  margin: -0.15rem 0 0.45rem;
  line-height: 1.4;
}

.nb-swatches {
  display: block;
}

.nb-swatch-chart {
  max-height: 280px;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 0.65rem 0.6rem;
  border: 1px solid var(--nb-line);
  border-radius: var(--nb-radius-inner);
  background: var(--nb-cream-deep);
  box-shadow: none;
}

.nb-swatch-chart::-webkit-scrollbar {
  width: 8px;
}

.nb-swatch-chart::-webkit-scrollbar-thumb {
  background: #d6d3d1;
  border-radius: 4px;
}

.nb-swatch-block {
  margin-bottom: 0.85rem;
  border: 1px solid var(--nb-line);
  border-radius: var(--nb-radius-inner);
  background: #ffffff;
  overflow: hidden;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.nb-swatch-block:last-child {
  margin-bottom: 0;
}

.nb-swatch-block-head {
  display: block;
  width: 100%;
  text-align: left;
  font-size: var(--nb-type-caption);
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--nb-ink-soft);
  background: var(--nb-cream-deep);
  border: none;
  border-bottom: 1px solid var(--nb-line);
  padding: 0.45rem 0.7rem;
  cursor: pointer;
  transition: background 0.15s;
}

.nb-swatch-block-head:hover {
  background: var(--nb-select-fill);
}

.nb-swatch-block.is-active .nb-swatch-block-head {
  background: var(--nb-select-fill);
  color: var(--nb-ink);
  font-weight: 700;
}

.nb-swatch-block-body {
  padding: 0.35rem 0.25rem 0.45rem;
}

.nb-swatch-block-body .nb-swatch-chart {
  max-height: 200px;
  border: none;
  box-shadow: none;
  background: transparent;
  padding: 0.35rem 0.4rem;
}

.nb-swatch-block-body .nb-accent-slider-wrap {
  border: none;
  box-shadow: none;
  background: transparent;
  padding: 0.2rem 0.15rem;
}

/* ยาง / ริบบิ้น: สไลด์แนวนอน 5 เฉดต่อกลุ่ม */
.nb-accent-slider-wrap {
  display: flex;
  align-items: stretch;
  gap: 0.35rem;
  border: 1px solid var(--nb-line);
  border-radius: var(--nb-radius-inner);
  background: var(--nb-cream-deep);
  box-shadow: none;
  padding: 0.45rem 0.3rem;
}

.nb-accent-scroll-btn {
  flex: 0 0 28px;
  align-self: center;
  width: 28px;
  height: 52px;
  padding: 0;
  border: 1px solid var(--nb-line-input);
  border-radius: var(--nb-radius-control);
  background: #fff;
  color: var(--nb-ink-soft);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}

.nb-accent-scroll-btn:hover {
  background: var(--nb-btn-surface-hover);
  border-color: var(--nb-brand-light);
}

.nb-accent-scroll-btn:focus {
  outline: none;
  background: var(--nb-select-fill);
}

.nb-accent-slider {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  gap: 0.55rem;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  padding: 0.15rem 0.35rem 0.35rem;
  scrollbar-width: thin;
  scrollbar-color: #c4b8a8 transparent;
}

.nb-accent-slider::-webkit-scrollbar {
  height: 6px;
}

.nb-accent-slider::-webkit-scrollbar-thumb {
  background: #c4b8a8;
  border-radius: 4px;
}

.nb-accent-group.nb-accent-group--five {
  min-width: 118px;
  max-width: 140px;
}

.nb-accent-group {
  flex: 0 0 auto;
  scroll-snap-align: start;
  min-width: 88px;
  max-width: 120px;
  padding: 0.35rem 0.4rem 0.25rem;
  border: 1px solid var(--nb-line);
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.55);
}

.nb-accent-group-title {
  font-size: 0.58rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #7a6b5c;
  margin-bottom: 0.35rem;
  line-height: 1.25;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.nb-accent-tones {
  display: flex;
  gap: 5px;
  justify-content: center;
}

.nb-accent-tones .nb-swatch.nb-swatch--chart {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}

@media (max-width: 767px) {
  .nb-accent-scroll-btn {
    flex: 0 0 24px;
    width: 24px;
    height: 42px;
  }

  .nb-accent-group {
    min-width: 76px;
  }

  .nb-accent-tones .nb-swatch.nb-swatch--chart {
    width: 24px;
    height: 24px;
  }
}

.nb-swatch-section {
  margin-bottom: 0.65rem;
}

.nb-swatch-section:last-child {
  margin-bottom: 0;
}

.nb-swatch-row-title {
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #7a6b5c;
  margin-bottom: 0.35rem;
  padding-left: 2px;
}

.nb-swatch-grid {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 4px;
}

.nb-swatch-grid--five {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 5px;
}

@media (min-width: 400px) {
  .nb-swatch-grid:not(.nb-swatch-grid--five) {
    grid-template-columns: repeat(10, 1fr);
  }
}

.nb-swatch {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.85);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2), inset 0 0 0 1px rgba(0, 0, 0, 0.08);
  cursor: pointer;
  padding: 0;
  transition: transform 0.12s, box-shadow 0.12s;
}

.nb-swatch.nb-swatch--chart {
  width: 22px;
  height: 22px;
  border-radius: 3px;
  border: 1px solid rgba(0, 0, 0, 0.18);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.25), 0 1px 2px rgba(0, 0, 0, 0.12);
}

.nb-swatch.nb-swatch--chart.nb-swatch--light {
  border-color: rgba(0, 0, 0, 0.28);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.08);
}

.nb-swatch.nb-swatch--chart.nb-swatch--tone-main {
  box-shadow:
    inset 0 0 0 1.5px rgba(92, 64, 51, 0.65),
    inset 0 0 0 1px rgba(255, 255, 255, 0.2),
    0 1px 2px rgba(0, 0, 0, 0.12);
}

.nb-swatch.nb-swatch--chart.nb-swatch--tone-main.is-active {
  box-shadow:
    0 0 0 2px #fff,
    0 0 0 4px var(--nb-select-frame);
  transform: scale(1.12);
  z-index: 2;
}

.nb-swatch.nb-swatch--chart.nb-swatch--light.nb-swatch--tone-main {
  box-shadow:
    inset 0 0 0 1.5px rgba(92, 64, 51, 0.5),
    inset 0 0 0 1px rgba(0, 0, 0, 0.08),
    0 1px 2px rgba(0, 0, 0, 0.1);
}

.nb-swatch:hover {
  transform: scale(1.08);
  z-index: 1;
}

.nb-swatch.nb-swatch--chart:hover {
  transform: scale(1.15);
}

.nb-swatch.is-active,
.nb-swatch.nb-swatch--chart.is-active {
  box-shadow:
    0 0 0 2px #fff,
    0 0 0 4px var(--nb-select-frame);
  transform: scale(1.1);
  z-index: 2;
}

/* legacy 767 hooks — detailed rules in mobile polish block below */

.nb-swatch-placeholder {
  line-height: 1.5;
  max-width: 100%;
}

.nb-color-tools {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0.5rem 0 0.65rem;
}

.nb-color-tools--sticky {
  padding: 0.45rem 0.5rem;
  border: 1px solid var(--nb-line);
  border-radius: 6px;
  background: #faf8f5;
}

.nb-input-color {
  width: 42px;
  height: 34px;
  padding: 2px;
  border: 1px solid var(--nb-line-input);
  border-radius: 6px;
  background: #fff;
  cursor: pointer;
}

.nb-input-color::-webkit-color-swatch-wrapper {
  padding: 2px;
}

.nb-input-color::-webkit-color-swatch {
  border: none;
  border-radius: 4px;
}

.nb-eyedropper-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  min-width: 34px;
  height: 34px;
  padding: 0 0.55rem;
  border: 1px solid var(--nb-line-input);
  border-radius: 6px;
  background: #fff;
  color: #5c4033;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  flex-shrink: 0;
}

.nb-eyedropper-label {
  font-size: var(--nb-type-caption);
  font-weight: 600;
  line-height: 1;
}

.nb-eyedropper-btn--no-api .nb-eyedropper-label {
  display: none;
}

.nb-eyedropper-btn:hover:not(:disabled) {
  background: #efe8df;
  border-color: #8b7355;
}

.nb-btn-save-design:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  box-shadow: none;
}

.nb-btn-save-design--saved {
  letter-spacing: 0.01em;
  transition:
    background 0.35s ease,
    color 0.35s ease,
    box-shadow 0.35s ease;
}

.nb-eyedropper-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* ชาร์ตสเปกตรัม — แถบเครื่องมือ ไม่ยืดเป็นทาวเวอร์ */
.nb-spectrum-picker {
  width: 100%;
  display: flex;
  flex-direction: column;
  flex: 0 0 auto;
}

.nb-spectrum-hint {
  font-size: var(--nb-type-caption);
  font-weight: 400;
  color: var(--nb-ink-muted);
  margin: 0;
  line-height: 1.45;
}

.nb-spectrum-img-scroll {
  position: relative;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  flex: 0 0 auto;
  height: auto;
  border: 1px solid rgba(28, 25, 23, 0.1);
  border-radius: 10px;
  background: #fff;
  cursor: none;
  box-shadow: inset 0 1px 2px rgba(28, 25, 23, 0.04);
}

.nb-spectrum-loupe {
  position: absolute;
  z-index: 3;
  width: 28px;
  height: 28px;
  margin: 0;
  padding: 0;
  border-radius: 50%;
  border: 2px solid #ffffff;
  box-shadow:
    0 0 0 1px rgba(28, 25, 23, 0.28),
    0 3px 10px rgba(28, 25, 23, 0.2);
  pointer-events: none;
  transform: translate(-50%, -50%);
  box-sizing: border-box;
}

.nb-spectrum-loupe[hidden] {
  display: none !important;
}

.nb-spectrum-loupe.is-light {
  border-color: rgba(255, 255, 255, 0.92);
  box-shadow:
    0 0 0 1px rgba(28, 25, 23, 0.4),
    0 4px 14px rgba(28, 25, 23, 0.18);
}

.nb-spectrum-img {
  display: block;
  height: 96px;
  width: auto;
  min-width: 100%;
  max-width: none;
  user-select: none;
  -webkit-user-drag: none;
  cursor: none;
}

.nb-color-tool-section .nb-spectrum-img {
  height: 100px;
}

.nb-color-tool-section .nb-spectrum-img-scroll {
  border-radius: 10px;
  overflow: hidden;
}

.nb-color-tool-section .nb-spectrum-img {
  border-radius: 10px;
}

.nb-frame--colors #nb-swatches-single {
  flex: 0 0 auto;
}

.nb-swatch-block--pick-hint {
  animation: nb-pick-hint-pulse 0.6s ease-in-out 3;
  box-shadow: 0 0 0 2px rgba(196, 165, 116, 0.85);
}

@keyframes nb-pick-hint-pulse {
  0%,
  100% {
    box-shadow: 0 0 0 2px rgba(196, 165, 116, 0.5);
  }
  50% {
    box-shadow: 0 0 0 4px rgba(196, 165, 116, 0.95);
  }
}

.nb-hex-label {
  font-size: var(--nb-type-body);
  font-family: Consolas, "Courier New", monospace;
  color: var(--nb-ink-soft);
  user-select: all;
}

.nb-preview-stage.nb-preview-stage--edge-ui {
  overflow: visible;
}

.nb-preview-stage {
  width: 100%;
  background: linear-gradient(
    180deg,
    #adadad 0%,
    #bcbcbc 18%,
    #d0d0d0 38%,
    #e4e4e4 58%,
    #f2f2f2 78%,
    #fafafa 92%,
    #ffffff 100%
  );
  border: none;
  border-radius: var(--nb-radius-inner);
  padding: 1.75rem 2.25rem 2rem;
  min-height: 300px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: visible;
}

@media (min-width: 992px) {
  .nb-preview-stage {
    padding: 1.15rem 1.35rem 1.35rem;
    min-height: 360px;
  }

  .nb-frame--preview .nb-preview-stage {
    min-height: 380px;
  }
}

.nb-preview-case-meta {
  font-size: var(--nb-type-caption);
  font-weight: 500;
  color: var(--nb-ink-muted);
  margin: 0 0 0.2rem;
  text-align: center;
  line-height: 1.35;
  letter-spacing: 0.02em;
}

.nb-preview-label {
  font-size: var(--nb-type-body);
  font-weight: 400;
  color: var(--nb-ink-muted);
  margin: 0 auto 0.85rem;
  text-align: center;
  line-height: 1.5;
  max-width: 26rem;
  letter-spacing: 0.01em;
}

.nb-preview-hint-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.55rem;
  margin: 0 auto 0.95rem;
  max-width: 32rem;
}

.nb-preview-hint-row .nb-preview-label {
  margin-bottom: 0;
}

.nb-preview-history-btns {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.nb-history-btn {
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.2;
  min-width: 4.4rem;
  padding: 0.32rem 0.7rem;
  border-radius: 6px;
  border: 1px solid var(--nb-action-outline-border);
  background: var(--nb-action-outline-bg);
  color: var(--nb-action-outline-text);
  cursor: pointer;
  box-shadow: var(--nb-shadow-card);
  transition: background 0.15s, border-color 0.15s, opacity 0.15s;
}

.nb-history-btn .fa {
  font-size: 0.85em;
}

.nb-history-btn:hover:not(:disabled) {
  background: var(--nb-action-outline-hover);
  border-color: var(--nb-brand-light);
}

.nb-history-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* ตัวคั่นข้อความ (|) — ชัดกว่าจุดกลาง ใช้ nb-text-sep / nbSepHtml() ใน JS */
.nb-designer-wrap .nb-text-sep,
.nb-designer-demo-page .nb-text-sep {
  display: inline-block;
  font-size: calc(1em * var(--nb-sep-scale, 1.12));
  font-weight: 500;
  line-height: 1;
  color: var(--nb-ink-muted);
  opacity: 0.88;
  margin: 0 0.32em;
  vertical-align: baseline;
  user-select: none;
}

/* พาดหัว helper — Cover Preview · แบบที่บันทึก · เปรียบเทียบ (อ่านชัด สอดคล้องกัน) */
.nb-frame--preview .nb-preview-label,
.nb-saved-intro:not(.nb-saved-intro--full),
.nb-compare-intro {
  font-size: var(--nb-type-col-sub);
  font-weight: 500;
  color: var(--nb-ink-soft);
  line-height: 1.55;
  letter-spacing: 0.01em;
}

/* Cover Preview — กรอบหลักออกแบบ: ตัวอักษรชัดขึ้น + ลำดับปุ่ม (บันทึก > ดูใหญ่ > ดาวน์โหลด) */
.nb-frame--preview .nb-preview-label {
  text-align: center;
  max-width: 28rem;
  margin-bottom: 0;
}

.nb-frame--preview .nb-preview-hint-row {
  margin-bottom: 0.95rem;
}

.nb-frame--preview .nb-preview-footer {
  width: 100%;
  max-width: 22rem;
  margin: clamp(3.5rem, 9vw, 5rem) auto 0;
  padding-top: 0.15rem;
}

.nb-frame--preview .nb-preview-footer .nb-paper-hint {
  margin-top: 0;
  margin-left: auto;
  margin-right: auto;
}

.nb-frame--preview .nb-preview-footer .nb-preview-actions--bottom {
  margin-left: auto;
  margin-right: auto;
}

.nb-frame--preview .nb-preview-footer .nb-production-disclaimer {
  margin-top: 0.65rem;
}

.nb-frame--preview:has(#nb-notebook-main.nb-no-ribbon) .nb-preview-footer {
  margin-top: clamp(2rem, 5vw, 2.75rem);
}

.nb-frame--preview .nb-paper-hint {
  margin-top: 2.25rem;
  font-size: var(--nb-type-body);
  font-weight: 500;
  color: var(--nb-ink-soft);
  text-align: center;
  max-width: 24rem;
  line-height: 1.45;
}

.nb-frame--preview .nb-production-disclaimer {
  font-size: var(--nb-type-body);
  font-weight: 400;
  color: var(--nb-ink-muted);
  line-height: 1.42;
  margin-top: 0.5rem;
  text-align: center;
  max-width: 26rem;
  margin-left: auto;
  margin-right: auto;
}

/* คอลัมน์กลาง = ตัวสมุดเท่านั้น · หูปากกายื่นเข้า 1fr ขวา ไม่ดึงจุดกลาง */
.nb-preview-visual {
  display: grid;
  grid-template-columns: 1fr minmax(0, max-content) 1fr;
  align-items: center;
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  overflow: visible;
}

/* ชุดสี — จำนวนคอลัมน์ตามจำนวนปุ่มที่โชว์ (1/2/3 = แถวเดียวเต็มช่อง) */
.nb-color-chips-grid {
  display: grid;
  gap: 0.55rem;
  margin-bottom: 0;
  list-style: none;
  padding: 0;
  width: 100%;
}

.nb-color-chips-grid[data-chip-count='1'] {
  grid-template-columns: minmax(0, 1fr);
}

.nb-color-chips-grid[data-chip-count='2'] {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.nb-color-chips-grid[data-chip-count='3'] {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.nb-color-chips-grid[data-chip-count='4'],
.nb-color-chips-grid[data-chip-count='5'] {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* ซ่อนแล้วไม่กินช่องกริด */
.nb-color-chip--slot-hidden {
  display: none !important;
}

.nb-color-chip {
  display: flex;
  align-items: center;
  gap: 0.44rem;
  width: 100%;
  min-width: 0;
  min-height: 0;
  padding: 0.34rem 0.52rem;
  border: 1px solid var(--nb-line);
  border-radius: 6px;
  cursor: pointer;
  box-sizing: border-box;
  transition: border-color 0.15s, box-shadow 0.15s, background 0.15s, transform 0.12s;
}

.nb-color-chip:hover {
  border-color: var(--nb-brand-light);
  background: var(--nb-btn-surface-hover);
}

.nb-color-chip-swatch {
  width: 26px;
  height: 26px;
  border-radius: 5px;
  border: 1px solid rgba(0, 0, 0, 0.12);
  flex-shrink: 0;
  box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.35);
}

.nb-color-chip-label {
  font-size: var(--nb-type-control);
  font-weight: 600 !important;
  color: var(--nb-ink-soft);
  text-align: left;
  line-height: 1.2;
}

.nb-color-chip.is-active .nb-color-chip-label {
  font-weight: 600 !important;
  color: var(--nb-ink);
}

.nb-color-tools--bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 0.6rem 0.65rem;
  margin-bottom: 0.85rem;
  border: 1px solid var(--nb-line);
  border-radius: var(--nb-radius-inner);
  background: var(--nb-cream-deep);
}

.nb-spectrum-panel {
  position: relative;
  border: 1px solid var(--nb-line);
  border-radius: var(--nb-radius-inner);
  background: #fff;
  padding: 0.65rem 0.55rem 0.55rem;
  overflow: hidden;
}

.nb-spectrum-panel__tab {
  display: inline-block;
  position: relative;
  z-index: 2;
  margin: 0 0 0.5rem 0;
  padding: 0.35rem 0.75rem;
  font-size: var(--nb-type-caption);
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--nb-ink);
  background: var(--nb-select-fill);
  border: 1px solid var(--nb-line-input);
  border-radius: 999px;
  box-shadow: none;
}

.nb-frame--saved {
  margin-top: 0.15rem;
}

.nb-frame--saved .nb-frame__body {
  padding: 1.15rem 1.28rem 1.38rem;
}

@media (min-width: 1280px) {
  .nb-frame--saved,
  .nb-frame--compare {
    max-width: 1280px;
    margin-inline: auto;
    width: 100%;
  }
}

.nb-saved-intro {
  line-height: 1.55;
  margin-bottom: 0.15rem !important;
}

.nb-saved-intro--full {
  color: #8b3a2a;
  font-weight: 500;
  padding: 0.5rem 0.65rem;
  border-radius: var(--nb-radius-control);
  background: rgba(180, 72, 48, 0.08);
  border: 1px solid rgba(180, 72, 48, 0.22);
}

.nb-saved-count {
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  color: var(--nb-ink-soft);
  transition:
    color 0.45s ease,
    opacity 0.45s ease;
}

.nb-saved-count--pulse {
  animation: nb-saved-count-pulse 0.9s ease-out 1;
}

@keyframes nb-saved-count-pulse {
  0% {
    opacity: 0.55;
    color: var(--nb-ink-muted);
  }
  40% {
    opacity: 1;
    color: var(--nb-ink);
  }
  100% {
    opacity: 1;
    color: var(--nb-ink-soft);
  }
}

.nb-save-toast-host {
  position: fixed;
  left: 50%;
  bottom: 1.35rem;
  transform: translateX(-50%);
  z-index: 1080;
  pointer-events: none;
  display: flex;
  justify-content: center;
  width: min(92vw, 22rem);
}

.nb-save-toast {
  padding: 0.62rem 1rem;
  border-radius: 999px;
  font-size: var(--nb-type-caption);
  font-weight: 400;
  letter-spacing: 0.01em;
  line-height: 1.45;
  text-align: center;
  color: #f8f5f0;
  background: rgba(47, 42, 39, 0.94);
  box-shadow:
    0 10px 28px rgba(28, 25, 23, 0.14),
    0 2px 8px rgba(28, 25, 23, 0.08);
  opacity: 0;
  transform: translateY(10px);
  transition:
    opacity 0.38s ease,
    transform 0.38s ease;
}

.nb-save-toast--info {
  background: rgba(62, 56, 52, 0.92);
  color: #f3efe8;
}

.nb-save-toast--visible {
  opacity: 1;
  transform: translateY(0);
}

.nb-frame--compare {
  margin-top: 0.15rem;
}

.nb-frame--compare .nb-frame__head {
  padding: 12px 18px;
}

.nb-frame--compare .nb-frame__head-title {
  font-size: var(--nb-type-col-sub);
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--nb-type-section-ink);
  text-transform: none;
}

.nb-frame__body--compare {
  padding: 1.15rem 1.25rem 1.35rem;
  background: var(--nb-cream);
}

.nb-compare-intro {
  line-height: 1.55;
  margin: 0;
}

.nb-spectrum-img-scroll--hint {
  box-shadow: 0 0 0 2px rgba(196, 165, 116, 0.9);
  animation: nb-pick-hint-pulse 0.6s ease-in-out 3;
}

/* กล่องจัดกึ่งกลางเฉพาะตัวสมุด — หูปากกา absolute ยื่นขวา ไม่รวมในน้ำหนักกลาง */
.nb-notebook-wrap {
  position: relative;
  grid-column: 2;
  justify-self: center;
  display: block;
  width: fit-content;
  max-width: 100%;
  margin: 0;
  --nb-ribbon-pad: 22%;
  padding-bottom: 0;
  overflow: visible;
}

/* เงาวงรีใต้สมุด (ลอย) — ระดับปลายริบบิ้น (--nb-ribbon-pad จาก JS) */
.nb-notebook-wrap::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 100%;
  bottom: auto;
  margin-top: calc(var(--nb-ribbon-pad, 22%) - 5px);
  transform: translateX(-50%) translateY(-50%);
  width: 72%;
  max-width: 200px;
  height: 11px;
  background: radial-gradient(
    ellipse at 50% center,
    rgba(28, 25, 23, 0.12) 0%,
    rgba(28, 25, 23, 0.045) 48%,
    transparent 72%
  );
  filter: blur(5px);
  pointer-events: none;
  z-index: 1;
}

.nb-preview-stage .nb-notebook-wrap {
  padding-bottom: 0;
}

/* พรีวิวหลัก — ขนาดจาก JS เท่านั้น (กันบีบกว้างแต่สูงค้างจาก max-width:100%) */
.nb-preview-stage #nb-notebook-main {
  max-width: none;
}

.nb-preview-stage .nb-notebook-wrap::after {
  margin-top: calc(var(--nb-ribbon-pad, 22%) - 6px);
  width: 74%;
  height: 12px;
  filter: blur(5px);
}

.nb-wrap--no-ribbon::after {
  margin-top: calc(var(--nb-ribbon-pad, 5%) - 5px);
}

.nb-notebook {
  position: relative;
  z-index: 2;
  width: min(82vw, 300px);
  max-width: 100%;
  max-height: 66vh;
  box-sizing: border-box;
  touch-action: manipulation;
  container-type: inline-size;
  border-radius: 0 var(--nb-cover-corner-px, 5.5cqw) var(--nb-cover-corner-px, 5.5cqw) 0;
  background: var(--nb-cover);
  box-shadow:
    inset 2px 0 0 rgba(255, 255, 255, 0.2),
    inset -1px 0 4px rgba(0, 0, 0, 0.035),
    inset 0 1px 0 rgba(0, 0, 0, 0.035),
    inset 0 -1px 0 rgba(0, 0, 0, 0.045),
    0 4px 14px rgba(28, 25, 23, 0.07),
    0 1px 3px rgba(28, 25, 23, 0.04);
  outline: 1px solid rgba(0, 0, 0, 0.12);
  outline-offset: -1px;
  /* ไม่ transition border-radius — ตอนโหลดครั้งแรกมุมจะค่อยขยายดูไม่เรียบ */
  transition: box-shadow 0.15s;
  overflow: visible;
  cursor: pointer;
}

.nb-notebook.nb-notebook--size-ready {
  transition: width 0.35s ease, height 0.35s ease, box-shadow 0.15s;
}

.nb-notebook.nb-cover-print-2.nb-cover-split-axis-horizontal {
  background: linear-gradient(
    180deg,
    var(--nb-cover) 0%,
    var(--nb-cover) calc(var(--nb-cover-split, 0.5) * 100%),
    var(--nb-cover-2) calc(var(--nb-cover-split, 0.5) * 100%),
    var(--nb-cover-2) 100%
  );
}

.nb-notebook.nb-cover-print-2.nb-cover-split-axis-vertical {
  background: linear-gradient(
    90deg,
    var(--nb-cover) 0%,
    var(--nb-cover) calc(var(--nb-cover-split, 0.5) * 100%),
    var(--nb-cover-2) calc(var(--nb-cover-split, 0.5) * 100%),
    var(--nb-cover-2) 100%
  );
}

.nb-notebook.nb-cover-print-2.nb-cover-style-diagonal-tl,
.nb-notebook.nb-cover-print-2.nb-cover-style-diagonal-tr,
.nb-notebook.nb-cover-print-2.nb-cover-style-split-v-narrow,
.nb-notebook.nb-cover-print-2.nb-cover-style-split-h-narrow,
.nb-notebook.nb-cover-print-2.nb-cover-style-band-h,
.nb-notebook.nb-cover-print-2.nb-cover-style-corner-tr,
.nb-notebook.nb-cover-print-2.nb-cover-style-edge-tab,
.nb-notebook.nb-cover-print-2.nb-cover-style-edge-wave {
  background: var(--nb-cover) !important;
}

/* Cover shading — สอดคล้อง drawNotebookOnCanvas (มุม ~145°, spine, ขอบขวา/ซ้าย) */
.nb-cover-shading,
.nb-notebook:not(:has(.nb-cover-shading))::before {
  position: absolute;
  inset: 0;
  z-index: 4;
  border-radius: inherit;
  pointer-events: none;
  background:
    linear-gradient(
      180deg,
      rgba(0, 0, 0, 0.03) 0%,
      rgba(0, 0, 0, 0.01) 1.2%,
      transparent 3.5%
    ),
    linear-gradient(
      0deg,
      rgba(0, 0, 0, 0.035) 0%,
      rgba(0, 0, 0, 0.01) 1.5%,
      transparent 4%
    ),
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.22) 0%,
      rgba(255, 255, 255, 0) 42%,
      rgba(0, 0, 0, 0.09) 100%
    ),
    linear-gradient(
      270deg,
      rgba(255, 255, 255, 0.09) 0%,
      rgba(255, 255, 255, 0) 2.5%
    ),
    linear-gradient(90deg, rgba(0, 0, 0, 0.11) 0%, rgba(0, 0, 0, 0) 11%);
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.nb-cover-diagonal-layer {
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
  overflow: hidden;
  pointer-events: none;
}

.nb-cover-diagonal-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
}

.nb-cover-diagonal-poly {
  fill: var(--nb-cover-2);
  pointer-events: auto;
  cursor: grab;
  touch-action: none;
}

.nb-cover-edge-layer {
  position: absolute;
  inset: 0;
  z-index: 3;
  border-radius: inherit;
  overflow: hidden;
  pointer-events: none;
}

.nb-cover-edge-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
}

.nb-cover-edge-g {
  pointer-events: none;
}

.nb-cover-edge-shape {
  pointer-events: auto;
  cursor: grab;
  touch-action: none;
}

.nb-notebook.nb-edge-transform-active .nb-cover-edge-layer {
  pointer-events: auto;
}

.nb-cover-edge-transform-g .nb-cover-edge-shape:active {
  cursor: grabbing;
}

.nb-cover-edge-ui {
  position: absolute;
  inset: 0;
  z-index: 30;
  pointer-events: none;
}

.nb-cover-edge-ui .nb-deco-handle {
  z-index: 3;
}

.nb-cover-edge-ui .nb-deco-handle::before {
  content: '';
  position: absolute;
  inset: -10px;
}

.nb-edge-handle--move {
  cursor: move;
}

.nb-edge-handle--rotate {
  cursor: grab;
}

.nb-edge-handle--scale {
  cursor: nwse-resize;
  width: 18px;
  height: 18px;
  margin: -9px 0 0 -9px;
}

.nb-edge-handle--scale-x {
  cursor: ew-resize;
  width: 16px;
  height: 16px;
  margin: -8px 0 0 -8px;
}

.nb-edge-handle--scale-y {
  cursor: ns-resize;
  width: 16px;
  height: 16px;
  margin: -8px 0 0 -8px;
}

.nb-cover-edge-shape.is-color-target {
  filter: drop-shadow(0 0 0 2px var(--nb-ps-select));
}

.nb-cover-diagonal-poly.is-color-target {
  filter: drop-shadow(0 0 0 2px var(--nb-ps-select));
}

.nb-cover-diagonal-poly:active {
  cursor: grabbing;
}

.nb-cover-stripe-layer {
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
  overflow: hidden;
  pointer-events: none;
}

.nb-cover-stripe-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
}

.nb-cover-stripe-poly {
  fill: var(--nb-cover-2);
  pointer-events: auto;
  cursor: grab;
  touch-action: none;
}

.nb-cover-stripe-poly.is-color-target {
  filter: drop-shadow(0 0 0 2px var(--nb-ps-select));
}

.nb-cover-stripe-poly:active {
  cursor: grabbing;
}

.nb-cover-stripe-layer--diag .nb-cover-stripe-bar {
  display: none !important;
}

.nb-cover-stripe-bar {
  position: absolute;
  background: var(--nb-cover-2);
  pointer-events: auto;
  cursor: grab;
  touch-action: none;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06);
}

.nb-cover-stripe-bar.is-color-target {
  box-shadow: inset 0 0 0 2px var(--nb-ps-select);
}

.nb-cover-stripe-bar:active {
  cursor: grabbing;
}

.nb-cover-stripe-layer--v .nb-cover-stripe-bar {
  top: 0;
  bottom: 0;
  left: calc(var(--nb-stripe-start, 0.34) * 100%);
  width: calc((var(--nb-stripe-end, 0.58) - var(--nb-stripe-start, 0.34)) * 100%);
}

.nb-cover-stripe-layer--h .nb-cover-stripe-bar {
  left: 0;
  right: 0;
  top: calc(var(--nb-stripe-start, 0.32) * 100%);
  height: calc((var(--nb-stripe-end, 0.52) - var(--nb-stripe-start, 0.32)) * 100%);
  cursor: default;
}

.nb-cover-stripe-transform {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.nb-cover-stripe-transform .nb-cover-stripe-bar {
  pointer-events: auto;
}

.nb-cover-stripe-transform--bl {
  transform-origin: 0% 100%;
  transform: rotate(var(--nb-cover-angle, 45deg))
    translateX(calc(var(--nb-stripe-slide, 0.22) * 115%));
}

.nb-cover-stripe-transform--tl {
  transform-origin: 0% 0%;
  transform: rotate(var(--nb-cover-angle, -45deg))
    translateX(calc(var(--nb-stripe-slide, 0.2) * 115%));
}

.nb-cover-stripe-layer--diag .nb-cover-stripe-bar {
  position: absolute;
  left: 0;
  top: 0;
  width: 200%;
  height: calc((var(--nb-stripe-end, 0.56) - var(--nb-stripe-start, 0.38)) * 100%);
  transform: translateY(-50%);
  cursor: grab;
}

.nb-cover-stripe-layer--diag.nb-cover-stripe-layer--corner-tr .nb-cover-stripe-bar,
.nb-notebook.nb-cover-style-corner-tr .nb-cover-stripe-layer--diag .nb-cover-stripe-bar {
  top: 0;
}

.nb-cover-zones {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  border-radius: inherit;
  overflow: hidden;
  pointer-events: none;
}

.nb-cover-zones.nb-cover-split-axis-horizontal {
  flex-direction: column;
}

.nb-cover-zones.nb-cover-split-axis-vertical {
  flex-direction: row;
}

.nb-cover-zone {
  position: relative;
  border: none;
  padding: 0;
  margin: 0;
  background: transparent;
  cursor: pointer;
  pointer-events: auto;
  min-width: 0;
  min-height: 0;
}

.nb-cover-zone--first {
  flex: 0 0 calc(var(--nb-cover-split, 0.5) * 100%);
}

.nb-cover-zone--second {
  flex: 1 1 auto;
}

.nb-cover-split-handle {
  position: absolute;
  z-index: 5;
  pointer-events: auto;
  touch-action: none;
  background: transparent;
  border: none;
  padding: 0;
  margin: 0;
}

/* ไม่แสดงขีดคั่น — ลากได้ที่ขอบแบ่งสี (พื้นที่โปร่งใส) */
.nb-cover-split-axis-horizontal .nb-cover-split-handle {
  left: 0;
  right: 0;
  top: calc(var(--nb-cover-split, 0.5) * 100%);
  height: 16px;
  margin-top: -8px;
  cursor: ns-resize;
}

.nb-cover-split-axis-vertical .nb-cover-split-handle {
  top: 0;
  bottom: 0;
  left: calc(var(--nb-cover-split, 0.5) * 100%);
  width: 16px;
  margin-left: -8px;
  cursor: ew-resize;
}

/* แบบ 5–6: แถบลากหมุนตามเส้นแบ่ง (ตั้งฉาก = เลื่อนเส้นได้หลังหมุน) */
.nb-cover-zones--diagonal .nb-cover-zone {
  pointer-events: none;
}

.nb-cover-zones--diagonal .nb-cover-split-handle {
  z-index: 6;
  cursor: grab;
}

.nb-cover-zones--diagonal .nb-cover-split-handle.is-dragging {
  cursor: grabbing;
}

.nb-cover-zones.nb-cover-zones--diagonal.nb-cover-split-axis-horizontal
  .nb-cover-split-handle {
  left: 50%;
  right: auto;
  top: 50%;
  width: 56px;
  height: 18px;
  margin-top: 0;
}

.nb-cover-split-handle:focus-visible {
  outline: none;
}

.nb-cover-zones--stripe-mode {
  pointer-events: none;
}

.nb-cover-zones--stripe-mode .nb-cover-split-handle {
  pointer-events: auto;
}

.nb-cover-stripe-handle {
  position: absolute;
  z-index: 7;
  width: 18px;
  height: 18px;
  margin: -9px 0 0 -9px;
  touch-action: none;
  pointer-events: auto;
  cursor: grab;
}

.nb-cover-stripe-handle.is-dragging {
  cursor: grabbing;
}

.nb-cover-stripe-handle--axis-x {
  cursor: ew-resize;
}

.nb-cover-stripe-handle--axis-y {
  cursor: ns-resize;
}

.nb-cover-stripe-handle--axis-diag {
  cursor: nwse-resize;
}

/* จุดจับยืดหด/เลื่อน — ไอคอน 18px กลาง แต่ ::before ขยายพื้นที่คลิกตลอดแนวแถบ */
.nb-cover-stripe-handle--start,
.nb-cover-stripe-handle--end,
.nb-cover-stripe-handle--slide {
  overflow: visible;
  background: transparent;
  box-shadow: none;
}

.nb-cover-stripe-handle--start::before,
.nb-cover-stripe-handle--end::before,
.nb-cover-stripe-handle--slide::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 0;
  transform: translate(-50%, -50%);
  pointer-events: auto;
  background: transparent;
}

/* แถบตั้ง (แบบ 3) — แนวยาวแนวตั้ง */
.nb-cover-stripe-handle--axis-x.nb-cover-stripe-handle--start::before,
.nb-cover-stripe-handle--axis-x.nb-cover-stripe-handle--end::before {
  width: 36px;
  height: min(78%, 360px);
  cursor: ew-resize;
}

/* แถบนอน (แบบ 4) — แนวยาวแนวนอน */
.nb-cover-stripe-handle--axis-y.nb-cover-stripe-handle--start::before,
.nb-cover-stripe-handle--axis-y.nb-cover-stripe-handle--end::before {
  width: min(78%, 360px);
  height: 36px;
  cursor: ns-resize;
}

/* แถบทแยง (แบบ 7–8) — แนวยาวตามมุมแถบ */
.nb-cover-stripe-handle--axis-diag.nb-cover-stripe-handle--start::before,
.nb-cover-stripe-handle--axis-diag.nb-cover-stripe-handle--end::before {
  width: min(62%, 380px);
  height: 36px;
  transform: translate(-50%, -50%)
    rotate(calc(var(--nb-cover-angle-num, 45) * 1deg));
  cursor: nwse-resize;
}

.nb-cover-stripe-handle--axis-x.nb-cover-stripe-handle--slide::before {
  width: 36px;
  height: min(62%, 300px);
  cursor: move;
}

.nb-cover-stripe-handle--axis-y.nb-cover-stripe-handle--slide::before {
  width: min(62%, 300px);
  height: 36px;
  cursor: move;
}

.nb-cover-stripe-handle--axis-diag.nb-cover-stripe-handle--slide::before {
  width: min(58%, 340px);
  height: 36px;
  transform: translate(-50%, -50%)
    rotate(calc(var(--nb-cover-angle-num, 45) * 1deg));
  cursor: move;
}

.nb-cover-stripe-handle--slide {
  cursor: move;
}

.nb-cover-stripe-handle--start::after,
.nb-cover-stripe-handle--end::after,
.nb-cover-stripe-handle--slide::after {
  z-index: 1;
}

.nb-cover-stripe-handle--slide::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 10px;
  height: 10px;
  margin: 0;
  transform: translate(-50%, -50%);
  background: url('../images/notebook-designer/handle-move.svg') center / contain
    no-repeat;
  filter: brightness(0) invert(1);
  pointer-events: none;
}

.nb-cover-zones--stripe-mode .nb-cover-stripe-handle {
  pointer-events: auto;
}

.nb-cover-zones--stripe-mode .nb-cover-stripe-handle--slide {
  pointer-events: auto;
}

.nb-cover-angle-handle {
  position: absolute;
  z-index: 12;
  width: 18px;
  height: 18px;
  margin: -9px 0 0 -9px;
  cursor: grab;
  touch-action: none;
  pointer-events: auto;
  left: 78%;
  top: 18%;
}

#nb-selection-ui .nb-cover-angle-handle {
  z-index: 12;
}

.nb-cover-angle-handle::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 10px;
  height: 10px;
  margin: -5px 0 0 -5px;
  border: 2px solid #fff;
  border-top-color: transparent;
  border-radius: 50%;
  pointer-events: none;
}

.nb-cover-angle-handle.is-dragging {
  cursor: grabbing;
}

.nb-cover-zones--stripe-mode .nb-cover-angle-handle {
  pointer-events: auto;
}

.nb-cover-zone:focus-visible {
  outline: none;
}

/* ปุ่มจับสีฟ้า (แบบ 1–10) — สอดคล้อง .nb-deco-handle / แบบ 9–10 */
.nb-ps-handle {
  box-sizing: border-box;
  padding: 0;
  border: 2px solid #fff;
  border-radius: 50%;
  background: var(--nb-ps-select);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
  touch-action: none;
}

.nb-ps-handle.is-dragging {
  cursor: grabbing;
  transform: scale(1.12);
}

/* กรอบเลือกบนพรีวิว — เส้นฟ้า Photoshop, ปุ่มดึงเฉพาะเส้นแบ่งสี */
.nb-selection-ui {
  position: absolute;
  inset: 0;
  z-index: 8;
  pointer-events: none;
}

.nb-selection-box {
  position: absolute;
  box-sizing: border-box;
  border: 1px solid var(--nb-ps-select);
  pointer-events: none;
}

/* แบบ 1–2, 5–6: จุดฟ้าบนเส้นแบ่ง (ลากได้) */
.nb-selection-knob--split {
  position: absolute;
  z-index: 9;
  width: 18px;
  height: 18px;
  margin: 0;
  transform: translate(-50%, -50%);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  cursor: grab;
  transition:
    opacity 0.16s ease,
    visibility 0.16s ease,
    transform 0.12s ease;
}

.nb-selection-knob--split::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 10px;
  height: 10px;
  background: url('../images/notebook-designer/handle-arrow.svg') center / contain
    no-repeat;
  transform: translate(-50%, -50%);
  filter: brightness(0) invert(1);
  pointer-events: none;
}

.nb-notebook.nb-cover-print-2.nb-notebook--split-ui-visible
  .nb-selection-knob--split.is-visible {
  opacity: 0.58;
  visibility: visible;
  pointer-events: auto;
}

.nb-notebook.nb-cover-print-2.nb-notebook--split-ui-visible.nb-notebook--split-ui-strong
  .nb-selection-knob--split.is-visible {
  opacity: 1;
}

/* แบบ 1: แบ่งบนล่าง — ลากขึ้นลง */
.nb-selection-ui--axis-h .nb-selection-knob--split::after {
  transform: translate(-50%, -50%) rotate(0deg);
}

.nb-selection-ui--axis-h .nb-selection-knob--split {
  cursor: ns-resize;
}

/* แบบ 2: แบ่งซ้ายขวา — ลูกศรชี้ขวา */
.nb-selection-ui--axis-v .nb-selection-knob--split::after {
  transform: translate(-50%, -50%) rotate(90deg);
}

.nb-selection-ui--axis-v .nb-selection-knob--split {
  cursor: ew-resize;
}

/* แบบ 5–6: ทแยง — ลูกศรแนวตั้ง (ไม่เอียงตามมุมเส้น) */
.nb-notebook.nb-cover-style-diagonal-tl .nb-selection-knob--split::after,
.nb-notebook.nb-cover-style-diagonal-tr .nb-selection-knob--split::after {
  transform: translate(-50%, -50%) rotate(0deg);
}

.nb-notebook.nb-cover-style-diagonal-tl .nb-selection-knob--split,
.nb-notebook.nb-cover-style-diagonal-tr .nb-selection-knob--split {
  cursor: grab;
}

.nb-notebook.nb-no-elastic .nb-elastic {
  display: none;
}

/* ร่องปกเข้ม + เส้นพาดจากปกหลัง (ใต้แถบเข็มขัด) */
.nb-belt-slot,
.nb-belt-wrap {
  position: absolute;
  pointer-events: none;
  display: none;
}

.nb-belt-slot {
  z-index: 5;
  background: var(--nb-belt-slot, #3a5a56);
  box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.12);
}

.nb-belt-wrap {
  z-index: 7;
  width: 2px;
  min-width: 2px;
  background: var(--nb-belt-wrap, #6b4428);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08);
}

.nb-notebook.nb-belt-edge-right .nb-belt-slot {
  right: 0;
  left: auto;
  top: calc(var(--nb-belt-slide, 0.5) * 100%);
  bottom: auto;
  width: var(--nb-belt-len);
  max-width: 62%;
  height: var(--nb-belt-thick);
  max-height: 22%;
  transform: translateY(-50%);
  border-radius: 999px 0 0 999px;
}

.nb-notebook.nb-belt-edge-right .nb-belt-wrap {
  right: 0;
  left: auto;
  top: calc(var(--nb-belt-slide, 0.5) * 100%);
  bottom: auto;
  height: calc(var(--nb-belt-thick) + 4px);
  max-height: calc(22% + 4px);
  transform: translateY(-50%);
}

.nb-closure-belt {
  position: absolute;
  z-index: 6;
  right: auto;
  left: auto;
  top: auto;
  bottom: auto;
  width: auto;
  height: auto;
  max-width: none;
  max-height: none;
  transform: none;
  --nb-belt-len: calc(var(--nb-belt-length, 0.4) * 100%);
  --nb-belt-thick: calc(var(--nb-belt-thickness, 0.12) * 100%);
  min-width: 28px;
  min-height: 14px;
  background: var(--nb-belt, var(--nb-elastic));
  touch-action: none;
  box-shadow:
    -3px 0 7px rgba(0, 0, 0, 0.2),
    inset 1px 0 0 rgba(255, 255, 255, 0.16),
    inset -2px 0 4px rgba(0, 0, 0, 0.22);
}

.nb-notebook.nb-belt-edge-right .nb-closure-belt {
  --nb-belt-overhang: 3px;
  right: calc(-1 * var(--nb-belt-overhang));
  left: auto;
  top: calc(var(--nb-belt-slide, 0.5) * 100%);
  bottom: auto;
  width: calc(var(--nb-belt-len) + var(--nb-belt-overhang));
  max-width: calc(62% + var(--nb-belt-overhang));
  height: var(--nb-belt-thick);
  max-height: 22%;
  transform: translateY(-50%);
  cursor: ns-resize;
  box-shadow:
    -3px 0 7px rgba(0, 0, 0, 0.2),
    inset 1px 0 0 rgba(255, 255, 255, 0.16),
    inset -2px 0 4px rgba(0, 0, 0, 0.22);
}

.nb-notebook.nb-belt-edge-top .nb-closure-belt {
  top: 0;
  bottom: auto;
  right: auto;
  left: calc(var(--nb-belt-slide, 0.5) * 100%);
  width: var(--nb-belt-thick);
  height: var(--nb-belt-len);
  max-width: 22%;
  max-height: 62%;
  transform: translateX(-50%);
  cursor: ew-resize;
  z-index: 8;
  box-shadow:
    0 3px 7px rgba(0, 0, 0, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    inset 0 -2px 4px rgba(0, 0, 0, 0.22);
}

.nb-notebook.nb-belt-edge-bottom .nb-closure-belt {
  bottom: 0;
  top: auto;
  right: auto;
  left: calc(var(--nb-belt-slide, 0.5) * 100%);
  width: var(--nb-belt-thick);
  height: var(--nb-belt-len);
  max-width: 22%;
  max-height: 62%;
  transform: translateX(-50%);
  cursor: ew-resize;
  z-index: 8;
  box-shadow:
    0 -3px 7px rgba(0, 0, 0, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    inset 0 2px 4px rgba(0, 0, 0, 0.22);
}

.nb-closure-belt::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.2) 0%,
    rgba(255, 255, 255, 0) 50%,
    rgba(0, 0, 0, 0.22) 100%
  );
  pointer-events: none;
}

.nb-closure-belt.is-dragging-position {
  cursor: grabbing;
}

.nb-belt-position-handle {
  z-index: 13;
}

.nb-notebook.nb-notebook--belt-ui-visible .nb-belt-position-handle {
  opacity: 0.72;
  visibility: visible;
  pointer-events: auto;
}

.nb-notebook.nb-notebook--belt-ui-visible.nb-notebook--belt-ui-strong
  .nb-belt-position-handle {
  opacity: 1;
}

.nb-belt-position-handle.nb-cover-stripe-handle--axis-y.nb-cover-stripe-handle--slide::before {
  width: 36px;
  height: min(72%, 280px);
  cursor: ns-resize;
}

.nb-belt-position-handle.nb-cover-stripe-handle--axis-x.nb-cover-stripe-handle--slide::before {
  width: min(72%, 280px);
  height: 36px;
  cursor: ew-resize;
}

.nb-belt-position-handle.nb-cover-stripe-handle--axis-y.nb-cover-stripe-handle--ghost::after {
  background-image: url('../images/notebook-designer/handle-resize-ns.svg');
  filter: brightness(0) invert(1);
}

.nb-belt-position-handle.nb-cover-stripe-handle--axis-x.nb-cover-stripe-handle--ghost::after {
  background-image: url('../images/notebook-designer/handle-resize-ew.svg');
  filter: brightness(0) invert(1);
}

.nb-belt-length-handle,
.nb-belt-thickness-handle {
  z-index: 13;
}

.nb-notebook.nb-notebook--belt-ui-visible .nb-belt-length-handle,
.nb-notebook.nb-notebook--belt-ui-visible .nb-belt-thickness-handle {
  opacity: 0.72;
  visibility: visible;
  pointer-events: auto;
}

.nb-notebook.nb-notebook--belt-ui-visible.nb-notebook--belt-ui-strong .nb-belt-length-handle,
.nb-notebook.nb-notebook--belt-ui-visible.nb-notebook--belt-ui-strong .nb-belt-thickness-handle {
  opacity: 1;
}

.nb-belt-length-handle.nb-cover-stripe-handle--axis-x.nb-cover-stripe-handle--ghost::after,
.nb-belt-thickness-handle.nb-cover-stripe-handle--axis-x.nb-cover-stripe-handle--ghost::after {
  background-image: url('../images/notebook-designer/handle-resize-ew.svg');
  filter: brightness(0) invert(1);
}

.nb-belt-length-handle.nb-cover-stripe-handle--axis-y.nb-cover-stripe-handle--ghost::after,
.nb-belt-thickness-handle.nb-cover-stripe-handle--axis-y.nb-cover-stripe-handle--ghost::after {
  background-image: url('../images/notebook-designer/handle-resize-ns.svg');
  filter: brightness(0) invert(1);
}

/* ปลายมนซ้าย (ในเล่ม) | ปลายเหลี่ยมขวา (ชิดขอบปก / ยื่นเล็กน้อย) */
.nb-closure-belt--round.nb-closure-belt--edge-right {
  border-radius: 999px 2px 2px 999px;
}

.nb-closure-belt--round.nb-closure-belt--edge-top {
  border-radius: 2px 2px 999px 999px;
}

.nb-closure-belt--round.nb-closure-belt--edge-bottom {
  border-radius: 999px 999px 2px 2px;
}

.nb-closure-belt--square {
  border-radius: 2px;
}

.nb-notebook:not(.nb-closure-magnetic-round):not(.nb-closure-magnetic-square) .nb-closure-belt,
.nb-notebook:not(.nb-closure-magnetic-round):not(.nb-closure-magnetic-square) .nb-belt-slot,
.nb-notebook:not(.nb-closure-magnetic-round):not(.nb-closure-magnetic-square) .nb-belt-wrap {
  display: none !important;
  pointer-events: none;
}

.nb-closure-belt.is-color-target {
  outline: 2px solid var(--nb-ps-select);
  outline-offset: 1px;
}

/* Main preview: pseudo ปิดเมื่อมี .nb-cover-shading — ใช้เลเยอร์แยกแทน */
.nb-notebook:has(.nb-cover-shading)::before,
.nb-notebook:has(.nb-cover-shading)::after {
  display: none;
}

/* Thumbnails / mini — shine ผ่าน ::before */
.nb-notebook:not(:has(.nb-cover-shading))::before {
  content: '';
}

.nb-notebook:not(:has(.nb-cover-shading))::after {
  display: none;
}

.nb-spine-shadow {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  z-index: 5;
  width: 7%;
  background: linear-gradient(
    90deg,
    rgba(0, 0, 0, 0.14) 0%,
    rgba(0, 0, 0, 0.04) 55%,
    transparent 100%
  );
  border-radius: 0;
  pointer-events: none;
}

/* แถบเย็บ — ตรง canvas binding strip */
.nb-spine-shadow::after {
  content: '';
  position: absolute;
  left: 0;
  top: 8%;
  bottom: 8%;
  width: 2.3%;
  min-width: 2px;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.175), transparent);
  opacity: 0.5;
  pointer-events: none;
}

.nb-elastic {
  position: absolute;
  z-index: 6;
  touch-action: manipulation;
  /* เลื่อนเข้ามาจากขอบขวา (ตำแหน่งเครื่องหมายถูกในแบบ) */
  right: 11%;
  /* ปลายยางยื่นเลยขอบปกบน–ล่างเล็กน้อย (ประมาณ ⅓ ของเดิม) */
  top: calc(-1mm / 3);
  bottom: calc(-1mm / 3);
  width: 4.5%;
  min-width: 5px;
  background: var(--nb-elastic);
  border-radius: 2px;
  cursor: pointer;
  box-shadow:
    -3px 0 2px rgba(0, 0, 0, 0.2),
    -1px 0 0 rgba(0, 0, 0, 0.1),
    inset 1px 0 0 rgba(255, 255, 255, 0.18),
    inset -2px 0 4px rgba(0, 0, 0, 0.14);
}

/* เงาด้านซ้าย + ไล่แสงแนวตั้ง (ตรง canvas elastic) */
.nb-elastic::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 42%;
  border-radius: inherit;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.09), transparent);
  pointer-events: none;
  z-index: 1;
}

.nb-elastic::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.32) 0%,
    rgba(255, 255, 255, 0.18) 6%,
    rgba(255, 255, 255, 0) 42%,
    rgba(255, 255, 255, 0) 58%,
    rgba(0, 0, 0, 0) 94%,
    rgba(0, 0, 0, 0.32) 100%
  );
  pointer-events: none;
  z-index: 2;
}

.nb-notebook.nb-no-ribbon .nb-ribbon {
  display: none;
}

.nb-notebook.nb-no-pen-loop .nb-pen-loop {
  display: none;
}

.nb-pen-loop {
  position: absolute;
  /* หลัง shading ปก — ชนขอบขวา ไม่ทับหน้าปก */
  z-index: 6;
  left: 100%;
  right: auto;
  top: 27%;
  width: 11%;
  min-width: 12px;
  height: 9%;
  min-height: 12px;
  background-color: var(--nb-pen-loop, var(--nb-cover));
  background-image: none;
  /* มุมขวาบน–ขวาล่าง มนนิดเดียว */
  border-radius: 0 2px 2px 0;
  transform: none;
  box-shadow: none;
  pointer-events: auto;
  cursor: pointer;
  touch-action: manipulation;
}

.nb-notebook.nb-no-pen-loop .nb-pen-loop {
  pointer-events: none;
}

.nb-pen-loop.is-color-target {
  outline: 2px solid var(--nb-ps-select);
  outline-offset: 1px;
}

/* รอยชนขอบปก — ไม่ลากเงาซ้ายทับหน้าปก */
.nb-pen-loop::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 1px;
  background: rgba(0, 0, 0, 0.14);
  pointer-events: none;
}

/* ลายตกแต่งขอบปก (SVG) — crop ในปก (เหนือยาง/ริบบิ้น) */
.nb-decoration-clip {
  position: absolute;
  inset: 0;
  z-index: 9;
  border-radius: inherit;
  overflow: hidden;
  pointer-events: none;
  display: none;
}

.nb-decoration-clip.nb-decoration-clip--on {
  display: block;
}

.nb-decoration-clip[hidden] {
  display: none !important;
}

.nb-decoration {
  position: absolute;
  z-index: 1;
  pointer-events: auto;
  cursor: grab;
  touch-action: none;
  transform-origin: center center;
}

.nb-decoration.is-selected {
  outline: 2px solid var(--nb-ps-select);
  outline-offset: 1px;
}

.nb-decoration__svg {
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
  user-select: none;
}

.nb-decoration-ui {
  position: absolute;
  inset: 0;
  z-index: 25;
  pointer-events: none;
}

.nb-decoration-box {
  position: absolute;
  border: 2px solid var(--nb-ps-select);
  box-sizing: border-box;
  pointer-events: none;
  transform-origin: center center;
}

.nb-deco-handle {
  position: absolute;
  width: 14px;
  height: 14px;
  margin: -7px 0 0 -7px;
  padding: 0;
  border: 2px solid #fff;
  border-radius: 50%;
  background: var(--nb-ps-select);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
  cursor: pointer;
  pointer-events: auto;
  touch-action: none;
  z-index: 2;
}

.nb-deco-handle--rotate {
  width: 18px;
  height: 18px;
  margin: -9px 0 0 -9px;
  border-radius: 4px;
  cursor: grab;
}

.nb-deco-handle--rotate::after {
  content: '';
  display: block;
  width: 10px;
  height: 10px;
  margin: 2px auto;
  border: 2px solid #fff;
  border-top-color: transparent;
  border-radius: 50%;
}

.nb-deco-handle.is-dragging {
  cursor: grabbing;
  transform: scale(1.12);
}

.nb-btn-decoration {
  flex: 1 1 auto;
  min-width: 4.5rem;
}

/* แบบแถบ 3–4, 7–8: ghost handle สีฟ้า (มือ / ลูกศร / หมุน) */
.nb-cover-stripe-handle--ghost,
.nb-cover-angle-handle--ghost {
  visibility: hidden;
  pointer-events: none;
  transition:
    visibility 0.16s ease,
    transform 0.12s ease;
}

.nb-cover-stripe-handle--ghost.nb-cover-stripe-handle--start,
.nb-cover-stripe-handle--ghost.nb-cover-stripe-handle--end,
.nb-cover-stripe-handle--ghost.nb-cover-stripe-handle--slide {
  border: none;
  border-radius: 4px;
  background: var(--nb-ps-select);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
}

.nb-cover-angle-handle--ghost {
  width: 18px;
  height: 18px;
  margin: -9px 0 0 -9px;
}

.nb-cover-stripe-handle--ghost::after,
.nb-cover-angle-handle--ghost::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 14px;
  height: 14px;
  margin: 0;
  border-radius: 0;
  transform: translate(-50%, -50%);
  opacity: 0;
  visibility: hidden;
  background-color: transparent;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  pointer-events: none;
  transition:
    opacity 0.16s ease,
    visibility 0.16s ease;
}

/* ขอบแถบ = ลูกศรยืด — ปุ่มสีฟ้า + ไอคอนขาวบน ::after (ห้าม filter ทับพื้นหลังฟ้า) */
.nb-cover-stripe-handle--ghost.nb-cover-stripe-handle--start::after,
.nb-cover-stripe-handle--ghost.nb-cover-stripe-handle--end::after,
.nb-cover-stripe-handle--ghost.nb-cover-stripe-handle--slide::after {
  width: 12px;
  height: 12px;
  background-color: transparent;
  border-radius: 0;
}

.nb-cover-stripe-handle--ghost.nb-cover-stripe-handle--axis-x.nb-cover-stripe-handle--start::after,
.nb-cover-stripe-handle--ghost.nb-cover-stripe-handle--axis-x.nb-cover-stripe-handle--end::after {
  background-image: url('../images/notebook-designer/handle-resize-ew.svg');
  filter: brightness(0) invert(1);
}

.nb-cover-stripe-handle--ghost.nb-cover-stripe-handle--axis-y.nb-cover-stripe-handle--start::after,
.nb-cover-stripe-handle--ghost.nb-cover-stripe-handle--axis-y.nb-cover-stripe-handle--end::after {
  background-image: url('../images/notebook-designer/handle-resize-ns.svg');
  filter: brightness(0) invert(1);
}

.nb-cover-stripe-handle--ghost.nb-cover-stripe-handle--axis-diag.nb-cover-stripe-handle--start::after,
.nb-cover-stripe-handle--ghost.nb-cover-stripe-handle--axis-diag.nb-cover-stripe-handle--end::after {
  background-image: url('../images/notebook-designer/handle-resize-diag.svg');
  filter: brightness(0) invert(1);
  transform: translate(-50%, -50%)
    rotate(calc((var(--nb-cover-angle-num, 45) + 90) * 1deg));
}

/* กลางแถบ = มือเลื่อน (แบบ 3–4, 7–8) */
.nb-cover-stripe-handle--ghost.nb-cover-stripe-handle--slide::after {
  background-image: url('../images/notebook-designer/handle-move.svg');
  filter: brightness(0) invert(1);
}

/* แบบ 3–4: กลาง = มือเท่านั้น ไม่มีจุดหมุน */
.nb-notebook.nb-cover-style-split-v-narrow .nb-cover-angle-handle,
.nb-notebook.nb-cover-style-split-h-narrow .nb-cover-angle-handle {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

.nb-notebook.nb-cover-style-split-v-narrow
  .nb-cover-stripe-handle--ghost.nb-cover-stripe-handle--slide::after,
.nb-notebook.nb-cover-style-split-h-narrow
  .nb-cover-stripe-handle--ghost.nb-cover-stripe-handle--slide::after {
  background-image: url('../images/notebook-designer/handle-move.svg') !important;
}

/* แบบ 5–6: จุดหมุนมุมนอก — โชว์เมื่อชี้/เลือกปก (split-ui-visible) */
.nb-notebook.nb-cover-print-2.nb-notebook--split-ui-visible
  #nb-cover-angle-handle.nb-cover-angle-handle--diag {
  opacity: 0.58;
  visibility: visible;
  pointer-events: auto;
  border-radius: 4px;
}

.nb-notebook.nb-cover-print-2.nb-notebook--split-ui-visible.nb-notebook--split-ui-strong
  #nb-cover-angle-handle.nb-cover-angle-handle--diag {
  opacity: 1;
}

/* หมุน (แบบ 5–6, 7–8) */
.nb-cover-angle-handle--ghost {
  background: var(--nb-ps-select);
  border-radius: 4px;
}

.nb-cover-angle-handle--ghost::after {
  background-image: none;
  width: 10px;
  height: 10px;
  margin: -5px 0 0 -5px;
  border: 2px solid #fff;
  border-top-color: transparent;
  border-radius: 50%;
  transform: none;
}

.nb-notebook.nb-cover-print-2.nb-notebook--stripe-ui-visible .nb-cover-stripe-handle--ghost,
.nb-notebook.nb-cover-print-2.nb-notebook--stripe-ui-visible .nb-cover-angle-handle--ghost,
.nb-notebook.nb-cover-print-2.nb-notebook--split-ui-visible .nb-cover-angle-handle--ghost,
.nb-notebook.nb-notebook--belt-ui-visible .nb-belt-position-handle.nb-cover-stripe-handle--ghost {
  visibility: visible;
  pointer-events: auto;
  opacity: 1;
}

.nb-notebook.nb-cover-print-2.nb-notebook--stripe-ui-visible .nb-cover-stripe-handle--ghost::after,
.nb-notebook.nb-cover-print-2.nb-notebook--stripe-ui-visible .nb-cover-angle-handle--ghost::after,
.nb-notebook.nb-cover-print-2.nb-notebook--split-ui-visible .nb-cover-angle-handle--ghost::after {
  opacity: 1;
  visibility: visible;
}

.nb-notebook.nb-cover-print-2.nb-notebook--stripe-ui-visible .nb-cover-stripe-handle--ghost:hover,
.nb-notebook.nb-cover-print-2.nb-notebook--stripe-ui-visible .nb-cover-angle-handle--ghost:hover,
.nb-notebook.nb-cover-print-2.nb-notebook--split-ui-visible .nb-cover-angle-handle--ghost:hover,
.nb-notebook.nb-cover-print-2.nb-notebook--stripe-ui-visible .nb-cover-stripe-handle--ghost.is-dragging,
.nb-notebook.nb-cover-print-2.nb-notebook--stripe-ui-visible .nb-cover-angle-handle--ghost.is-dragging,
.nb-notebook.nb-cover-print-2.nb-notebook--split-ui-visible .nb-cover-angle-handle--ghost.is-dragging,
.nb-selection-knob--split.is-visible:hover,
.nb-selection-knob--split.is-visible.is-dragging {
  transform: scale(1.12);
}

.nb-notebook.nb-cover-print-2.nb-notebook--stripe-ui-visible
  .nb-cover-stripe-handle--ghost:hover::after,
.nb-notebook.nb-cover-print-2.nb-notebook--stripe-ui-visible
  .nb-cover-stripe-handle--ghost.is-dragging::after,
.nb-notebook.nb-cover-print-2.nb-notebook--stripe-ui-visible
  .nb-cover-angle-handle--ghost:hover::after,
.nb-notebook.nb-cover-print-2.nb-notebook--stripe-ui-visible
  .nb-cover-angle-handle--ghost.is-dragging::after,
.nb-notebook.nb-cover-print-2.nb-notebook--split-ui-visible
  .nb-cover-angle-handle--ghost:hover::after,
.nb-notebook.nb-cover-print-2.nb-notebook--split-ui-visible
  .nb-cover-angle-handle--ghost.is-dragging::after {
  opacity: 1;
}

.nb-selection-knob--split.is-visible.is-dragging {
  cursor: grabbing;
}

/* แบบ 3–4, 7–8: ให้จุดจับยื่นออกจากกรอบได้ + อยู่เหนือแถบสี */
.nb-cover-zones--direct-stripe.nb-cover-zones--stripe-mode {
  overflow: visible;
}

.nb-cover-zones--direct-stripe.nb-cover-zones--stripe-mode .nb-cover-stripe-handle {
  z-index: 12;
}

/* ไม่ให้พื้นที่ปกทับ ghost handle */
.nb-cover-zones--direct-stripe.nb-cover-zones--stripe-mode .nb-cover-zone {
  pointer-events: none !important;
}

.nb-ribbon {
  position: absolute;
  z-index: 6;
  touch-action: manipulation;
  left: 5.5%;
  top: 100%;
  bottom: auto;
  width: 5.5%;
  min-width: 5px;
  height: 16%;
  background: var(--nb-ribbon);
  border-radius: 0 0 3px 3px;
  transform: translateX(-50%);
  box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.12);
  cursor: pointer;
}

.nb-ribbon::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.18) 0%,
    rgba(255, 255, 255, 0) 40%,
    rgba(0, 0, 0, 0.2) 100%
  );
  pointer-events: none;
}

.nb-paper-hint {
  margin-top: 0.95rem;
  font-size: var(--nb-type-caption);
  color: var(--nb-ink-muted);
  text-align: center;
  max-width: 20rem;
}

.nb-preview-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  width: 100%;
  max-width: 22rem;
  margin: 0 auto 0.75rem;
  justify-content: center;
}

/* Cover preview toolbar */
.nb-preview-actions--bottom {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem 0.65rem;
  width: 100%;
  max-width: 22rem;
  margin: 1rem auto 0.35rem;
  padding-top: 0.9rem;
  border-top: 1px solid rgba(28, 25, 23, 0.08);
}

.nb-preview-actions--bottom .btn-nb-primary,
.nb-preview-actions--bottom .btn-nb-ghost,
.nb-preview-actions--bottom .btn-nb-download {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.28rem;
  min-width: 0;
  max-width: none;
  width: 100%;
  white-space: nowrap;
  border-radius: var(--nb-radius-control);
  cursor: pointer;
  line-height: 1.2;
  transition:
    color 0.18s ease,
    background 0.18s ease,
    border-color 0.18s ease,
    box-shadow 0.18s ease;
}

/* 1 — บันทึก (หลัก) */
.nb-frame--preview .nb-preview-actions--bottom .btn-nb-primary.nb-btn-save-design {
  grid-column: 1 / -1;
  min-height: 2.375rem;
  padding: 0.44rem 0.9rem;
  font-size: var(--nb-type-action);
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--nb-action-primary-text);
  background: var(--nb-action-primary-bg);
  border: 1px solid var(--nb-action-primary-border);
  box-shadow: 0 1px 2px rgba(28, 25, 23, 0.06);
}

.nb-frame--preview .nb-preview-actions--bottom .btn-nb-primary.nb-btn-save-design:hover {
  background: var(--nb-action-primary-hover);
  border-color: var(--nb-action-primary-hover);
  color: var(--nb-action-primary-text);
  transform: none;
}

.nb-frame--preview .nb-preview-actions--bottom .btn-nb-primary.nb-btn-save-design i {
  opacity: 0.92;
  font-size: 0.95em;
}

/* 2 — ดูขนาดใหญ่ */
.nb-frame--preview .nb-preview-actions--bottom .btn-nb-ghost {
  grid-column: 1;
  min-height: 2.125rem;
  padding: 0.36rem 0.55rem;
  font-size: var(--nb-type-control);
  font-weight: 600;
  color: var(--nb-ink);
  background: #ffffff;
  border: 1px solid rgba(28, 25, 23, 0.2);
  box-shadow: 0 1px 2px rgba(28, 25, 23, 0.07);
}

.nb-frame--preview .nb-preview-actions--bottom .btn-nb-ghost:hover {
  background: var(--nb-btn-surface-hover);
  border-color: var(--nb-brand-light);
  color: var(--nb-ink);
  transform: none;
  box-shadow: 0 1px 3px rgba(28, 25, 23, 0.1);
}

.nb-frame--preview .nb-preview-actions--bottom .btn-nb-ghost i {
  opacity: 0.88;
  font-size: 0.94em;
}

/* 3 — ดาวน์โหลด */
.nb-frame--preview .nb-preview-actions--bottom .btn-nb-download {
  grid-column: 2;
  margin-top: 0;
  min-height: 2.125rem;
  padding: 0.34rem 0.5rem;
  font-size: var(--nb-type-body);
  font-weight: 600;
  color: var(--nb-ink);
  background: #ffffff;
  border: 1px solid rgba(28, 25, 23, 0.2);
  box-shadow: 0 1px 2px rgba(28, 25, 23, 0.07);
}

.nb-frame--preview .nb-preview-actions--bottom .btn-nb-download:hover {
  color: var(--nb-ink);
  background: var(--nb-btn-surface-hover);
  border-color: var(--nb-brand-light);
  transform: none;
  box-shadow: 0 1px 3px rgba(28, 25, 23, 0.1);
}

.nb-frame--preview .nb-preview-actions--bottom .btn-nb-download i {
  opacity: 0.88;
  font-size: 0.92em;
}

/* Generic download (outside preview toolbar) */
.btn-nb-download {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 20rem;
  min-height: 0;
  background: var(--nb-action-filled-bg);
  color: var(--nb-action-filled-text);
  border: 1px solid var(--nb-action-filled-hover);
  padding: 0.36rem 0.9rem;
  border-radius: 6px;
  font-size: var(--nb-type-action);
  font-weight: 500;
  line-height: 1.2;
  cursor: pointer;
  box-shadow: none;
  transition: background 0.15s, border-color 0.15s;
}

.btn-nb-download:hover {
  background: var(--nb-action-filled-hover);
}

.nb-production-disclaimer {
  font-size: var(--nb-type-caption);
  font-weight: 400;
  color: var(--nb-ink-muted);
  line-height: 1.45;
  margin-top: 0.55rem;
}

.nb-frame--specs .nb-production-disclaimer {
  text-align: left;
  max-width: none;
}

.nb-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1rem;
}

.nb-actions .btn-nb-primary {
  background: var(--nb-action-primary-bg);
  color: var(--nb-action-primary-text);
  border: 1px solid var(--nb-action-primary-border);
  min-height: 0;
  padding: 0.36rem 0.95rem;
  border-radius: 6px;
  font-size: var(--nb-type-action);
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  box-shadow: none;
  transition: background 0.15s, border-color 0.15s;
}

.nb-actions .btn-nb-primary:hover {
  background: var(--nb-action-primary-hover);
  border-color: var(--nb-action-primary-hover);
}

#nb-page-count-wrap.is-hidden {
  display: none;
}

.nb-actions .btn-nb-ghost {
  background: var(--nb-btn-surface);
  color: var(--nb-ink-muted);
  border: 1px solid var(--nb-line-input);
  min-height: 0;
  padding: 0.34rem 0.9rem;
  border-radius: 6px;
  font-size: var(--nb-type-control);
  font-weight: 500;
  line-height: 1.2;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}

.nb-actions .btn-nb-ghost:hover {
  background: var(--nb-btn-surface-hover);
  border-color: var(--nb-action-outline-border);
  color: var(--nb-ink-soft);
}

.nb-saved-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.nb-saved-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1rem;
  margin-top: 0.8rem;
  align-items: stretch;
}

@media (min-width: 576px) {
  .nb-saved-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 992px) {
  .nb-saved-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.nb-saved-pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.65rem 1rem;
  margin-top: 1rem;
  padding-top: 0.85rem;
  border-top: 1px solid var(--nb-line);
}

.nb-saved-pagination[hidden] {
  display: none !important;
}

.nb-saved-page-btn {
  font-size: var(--nb-type-caption);
  font-weight: 500;
  line-height: 1.2;
  min-height: 0;
  padding: 0.28rem 0.62rem;
  border-radius: 6px;
  border: 1px solid var(--nb-line-input);
  background: var(--nb-btn-surface);
  color: var(--nb-ink-soft);
  cursor: pointer;
  transition:
    background 0.15s ease,
    border-color 0.15s ease,
    color 0.15s ease;
}

.nb-saved-page-btn:hover:not(:disabled) {
  background: var(--nb-btn-surface-hover);
  border-color: var(--nb-action-outline-border);
  color: var(--nb-ink);
}

.nb-saved-page-btn:disabled {
  opacity: 0.42;
  cursor: not-allowed;
}

.nb-saved-page-status {
  font-size: var(--nb-type-caption);
  color: var(--nb-ink-muted);
  text-align: center;
  line-height: 1.4;
  min-width: 10rem;
}

.nb-saved-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--nb-line);
  border-radius: 12px;
  padding: 1rem 1.05rem 0.95rem;
  font-size: var(--nb-type-body);
  cursor: default;
  min-width: 0;
  box-shadow: var(--nb-shadow-card);
}

.nb-saved-card.is-compare {
  border-color: var(--nb-select-frame);
  border-width: var(--nb-select-frame-width);
  background: var(--nb-select-fill);
  box-shadow: 0 0 0 1px rgba(74, 53, 40, 0.14);
}

.nb-saved-card--just-saved {
  border-color: rgba(74, 53, 40, 0.38);
  box-shadow:
    var(--nb-shadow-card),
    0 0 0 1px rgba(74, 53, 40, 0.12),
    0 6px 18px rgba(47, 42, 39, 0.06);
  transition:
    border-color 0.6s ease,
    box-shadow 0.6s ease;
}

.nb-saved-thumb {
  flex: 0 0 auto;
  min-height: 240px;
  height: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 0 0.65rem;
  padding: 0.75rem 0.55rem 1.05rem;
  background: #ebe6df;
  border-radius: 8px;
  overflow: visible;
  box-sizing: border-box;
}

.nb-saved-thumb__scaler {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  overflow: visible;
}

.nb-saved-thumb__scaler .nb-notebook-wrap--saved-thumb-scale {
  position: relative;
  flex: 0 0 auto;
  overflow: visible;
  pointer-events: none;
}

.nb-saved-thumb__scaler .nb-notebook-wrap--saved-thumb-scale .nb-notebook {
  overflow: visible;
}

/* ภาพย่อแบบที่บันทึก — สัดส่วนมุมโค้ง / ยาง / เข็มขัด ให้ใกล้พรีวิวหลัก (5.5cqw + JS px) */
.nb-saved-thumb .nb-notebook,
.nb-compare-thumb .nb-notebook,
.nb-notebook.nb-notebook--mini {
  box-shadow:
    inset 1px 0 0 rgba(255, 255, 255, 0.2),
    inset -1px 0 4px rgba(0, 0, 0, 0.05),
    inset 0 1px 0 rgba(0, 0, 0, 0.03),
    inset 0 -1px 0 rgba(0, 0, 0, 0.035),
    0 1px 5px rgba(28, 25, 23, 0.06),
    0 1px 2px rgba(28, 25, 23, 0.04);
}

/* ยางยืด — ความยาวเท่าขอบปก (ห้ามใช้ -1mm ของพรีวิวใหญ่ บนเล่ม ~50–70px จะล้นมาก) */
.nb-saved-thumb .nb-notebook.nb-notebook--mini .nb-elastic,
.nb-compare-thumb .nb-notebook.nb-notebook--mini .nb-elastic {
  min-width: 0;
  width: 4.5%;
  top: 0;
  bottom: 0;
  height: auto;
  border-radius: 1px;
  box-shadow:
    -1px 0 1px rgba(0, 0, 0, 0.1),
    inset 0.5px 0 0 rgba(255, 255, 255, 0.14),
    inset -1px 0 2px rgba(0, 0, 0, 0.07);
}

.nb-saved-thumb .nb-notebook.nb-notebook--mini .nb-elastic::after,
.nb-compare-thumb .nb-notebook.nb-notebook--mini .nb-elastic::after {
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.154) 0%,
    rgba(255, 255, 255, 0.12) 8%,
    rgba(255, 255, 255, 0) 45%,
    rgba(255, 255, 255, 0) 55%,
    rgba(0, 0, 0, 0.126) 100%
  );
}

/* เงาสันขอบ — ภาพย่อ / เปรียบเทียบ (~70% ของพรีวิวหลัก) */
.nb-saved-thumb .nb-spine-shadow,
.nb-compare-thumb .nb-spine-shadow,
.nb-notebook.nb-notebook--mini .nb-spine-shadow {
  background: linear-gradient(
    90deg,
    rgba(0, 0, 0, 0.098) 0%,
    rgba(0, 0, 0, 0.028) 55%,
    transparent 100%
  );
}

.nb-saved-thumb .nb-spine-shadow::after,
.nb-compare-thumb .nb-spine-shadow::after,
.nb-notebook.nb-notebook--mini .nb-spine-shadow::after {
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.122), transparent);
  opacity: 0.35;
}

.nb-notebook--mini .nb-belt-slot {
  max-width: 62%;
  max-height: 22%;
}

.nb-saved-thumb .nb-belt-slot,
.nb-compare-thumb .nb-belt-slot,
.nb-saved-thumb .nb-belt-wrap,
.nb-compare-thumb .nb-belt-wrap {
  display: none !important;
}

.nb-saved-thumb .nb-closure-belt,
.nb-compare-thumb .nb-closure-belt {
  min-width: 0;
  min-height: 0;
  max-width: 62%;
  max-height: 22%;
  box-shadow:
    -1px 0 2px rgba(0, 0, 0, 0.112),
    inset 1px 0 0 rgba(255, 255, 255, 0.14);
}

.nb-notebook--mini .nb-closure-belt {
  min-width: 0;
  min-height: 0;
  max-width: 62%;
  max-height: 22%;
  box-shadow:
    -1px 0 2px rgba(0, 0, 0, 0.112),
    inset 0.5px 0 0 rgba(255, 255, 255, 0.14),
    inset -1px 0 2px rgba(0, 0, 0, 0.098);
}

.nb-saved-thumb.nb-belt-edge-top .nb-closure-belt,
.nb-compare-thumb.nb-belt-edge-top .nb-closure-belt,
.nb-notebook--mini.nb-belt-edge-top .nb-closure-belt,
.nb-saved-thumb.nb-belt-edge-bottom .nb-closure-belt,
.nb-compare-thumb.nb-belt-edge-bottom .nb-closure-belt,
.nb-notebook--mini.nb-belt-edge-bottom .nb-closure-belt {
  max-width: 22%;
  max-height: 62%;
}

.nb-saved-thumb .nb-closure-belt--round.nb-closure-belt--edge-right,
.nb-compare-thumb .nb-closure-belt--round.nb-closure-belt--edge-right,
.nb-notebook--mini .nb-closure-belt--round.nb-closure-belt--edge-right {
  border-radius: 999px 1px 1px 999px;
}

.nb-saved-thumb .nb-closure-belt--round.nb-closure-belt--edge-top,
.nb-compare-thumb .nb-closure-belt--round.nb-closure-belt--edge-top,
.nb-notebook--mini .nb-closure-belt--round.nb-closure-belt--edge-top {
  border-radius: 1px 1px 999px 999px;
}

.nb-saved-thumb .nb-closure-belt--round.nb-closure-belt--edge-bottom,
.nb-compare-thumb .nb-closure-belt--round.nb-closure-belt--edge-bottom,
.nb-notebook--mini .nb-closure-belt--round.nb-closure-belt--edge-bottom {
  border-radius: 999px 999px 1px 1px;
}

.nb-saved-thumb .nb-pen-loop,
.nb-compare-thumb .nb-pen-loop,
.nb-notebook--mini .nb-pen-loop {
  min-width: 0;
  min-height: 0;
}

.nb-saved-thumb .nb-ribbon,
.nb-compare-thumb .nb-ribbon,
.nb-notebook--mini .nb-ribbon {
  min-width: 0;
  box-shadow: inset 0.5px 0 0 rgba(255, 255, 255, 0.1);
}

/* ภาพย่อ / เทียบ — เงาที่ปลายริบบิ้น ไม่ทับขอบกรอบเบจ */
.nb-saved-thumb .nb-notebook-wrap,
.nb-compare-thumb .nb-notebook-wrap {
  padding-bottom: 8px;
}

.nb-saved-thumb .nb-notebook-wrap::after,
.nb-compare-thumb .nb-notebook-wrap::after {
  margin-top: calc(var(--nb-ribbon-pad, 22%) - 5px);
  height: 5px;
  max-width: none;
  width: 78%;
  filter: blur(2px);
}

.nb-saved-meta {
  flex: 1 1 auto;
  color: var(--nb-ink-soft);
  line-height: 1.5;
  word-break: keep-all;
  line-break: strict;
}

.nb-saved-meta__title {
  display: block;
  margin-bottom: 0.4rem;
  line-height: 1.45;
}

.nb-saved-meta__list {
  margin: 0;
  padding-left: 1.15rem;
  list-style: disc;
}

.nb-saved-meta__list li {
  margin-bottom: 0.4rem;
  padding-left: 0.1rem;
  word-break: keep-all;
  line-break: strict;
}

.nb-saved-meta__list li:last-child {
  margin-bottom: 0;
}

.nb-saved-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.55rem;
}

.nb-saved-actions button,
.nb-current-design-actions button {
  font-size: 0.72rem;
  font-weight: 500;
  line-height: 1.2;
  min-height: 0;
  padding: 0.22rem 0.46rem;
  border-radius: 5px;
  border: 1px solid var(--nb-action-outline-border);
  background: var(--nb-action-outline-bg);
  color: var(--nb-action-outline-text);
  cursor: pointer;
  box-shadow: var(--nb-shadow-card);
  transition: background 0.15s, border-color 0.15s, transform 0.12s;
}

.nb-saved-actions button:hover {
  background: var(--nb-action-outline-hover);
  border-color: var(--nb-brand-light);
}

.nb-saved-actions button:disabled,
.nb-current-design-actions button:disabled,
.nb-actions .btn-nb-ghost:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
}

.nb-compare-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  align-items: stretch;
}

.nb-compare-item {
  display: flex;
  flex-direction: column;
  min-width: 0;
  text-align: left;
  background: #fff;
  border: 1px solid var(--nb-line);
  border-radius: var(--nb-radius-inner);
  padding: 0.85rem 0.9rem 0.95rem;
  box-shadow: var(--nb-shadow-card);
  transition:
    border-color 0.18s ease,
    box-shadow 0.18s ease;
}

.nb-compare-thumb {
  flex: 0 0 auto;
  min-height: 360px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.65rem;
  background: #ebe6df;
  border-radius: 4px;
  padding: 1rem 0.65rem 1.1rem;
  overflow: visible;
}

.nb-compare-thumb .nb-notebook-wrap {
  width: fit-content;
  max-width: 100%;
  margin: 0 auto;
}

.nb-compare-item .nb-notebook:not(.nb-notebook--mini) {
  box-shadow: 2px 8px 18px rgba(40, 28, 18, 0.32);
}

.nb-compare-meta {
  flex: 1 1 auto;
  min-width: 0;
  text-align: left;
  font-size: 0.8rem;
  color: #5c4a3a;
  line-height: 1.55;
}

.nb-compare-meta .nb-saved-meta__title {
  display: block;
  font-size: var(--nb-type-col-sub);
  font-weight: 600;
  color: var(--nb-ink);
  margin-bottom: 0.45rem;
  line-height: 1.4;
}

.nb-compare-meta .nb-saved-meta__list {
  margin: 0;
  padding-left: 1.15rem;
}

.nb-compare-thumb--clickable {
  cursor: pointer;
  transition: background 0.18s ease;
}

.nb-compare-thumb--clickable:hover {
  background: #e4dfd8;
}

.nb-compare-thumb--clickable:focus-visible {
  outline: 2px solid var(--nb-ps-select);
  outline-offset: 2px;
}

.nb-compare-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: auto;
  padding-top: 0.65rem;
  border-top: 1px solid var(--nb-line);
}

.nb-gallery-btn {
  flex: 1 1 auto;
  min-width: 4.5rem;
  min-height: 0;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  line-height: 1.2;
  padding: 0.28rem 0.5rem;
  border-radius: 6px;
  border: 1px solid var(--nb-line-input);
  background: var(--nb-btn-surface);
  color: var(--nb-ink-soft);
  cursor: pointer;
  box-shadow: none;
  transition:
    background 0.15s ease,
    border-color 0.15s ease,
    color 0.15s ease,
    transform 0.12s ease;
}

.nb-gallery-btn:hover {
  background: var(--nb-btn-surface-hover);
  border-color: var(--nb-action-outline-border);
  color: var(--nb-ink);
}

.nb-gallery-btn:active {
  transform: scale(0.98);
}

.nb-gallery-btn:focus {
  outline: none;
}

.nb-gallery-btn:focus-visible {
  outline: none;
  border-color: var(--nb-brand-light);
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.28);
}

.nb-gallery-btn--primary {
  font-weight: 600;
  background: var(--nb-cream-deep);
  border-color: rgba(28, 25, 23, 0.12);
  color: var(--nb-type-head-ink);
}

.nb-gallery-btn--primary:hover {
  background: var(--nb-select-fill);
  border-color: var(--nb-brand-light);
}

.nb-compare-item:hover {
  border-color: rgba(28, 25, 23, 0.14);
  box-shadow: var(--nb-shadow-frame);
}

@media (max-width: 720px) {
  .nb-compare-row {
    grid-template-columns: 1fr;
  }

  .nb-gallery-btn {
    min-width: 5rem;
  }
}

/* Large preview modal */
body.nb-modal-open {
  overflow: hidden;
}

.nb-preview-modal[hidden] {
  display: none !important;
}

.nb-preview-modal {
  position: fixed;
  inset: 0;
  z-index: 1060;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  box-sizing: border-box;
}

.nb-preview-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(28, 25, 23, 0.45);
  animation: nb-modal-fade-in 0.22s ease;
}

.nb-preview-modal__dialog {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  width: min(94vw, 720px);
  height: min(94dvh, 94vh, 900px);
  max-height: min(94dvh, 94vh, 900px);
  background: #ffffff;
  border: 1px solid var(--nb-frame-head-divider);
  border-radius: 12px;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.5),
    var(--nb-shadow-elevated);
  overflow: hidden;
  animation: nb-modal-rise-in 0.28s ease;
}

.nb-preview-modal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.55rem 1.15rem 0.22rem;
  background: var(--nb-cream-deep);
  border-bottom: 1px solid var(--nb-frame-head-divider);
}

.nb-preview-modal__title {
  margin: 0;
  font-size: var(--nb-type-col-sub);
  font-weight: 600;
  color: var(--nb-ink);
  text-shadow: none;
  letter-spacing: -0.01em;
}

.nb-preview-modal__close {
  flex: 0 0 auto;
  width: 2rem;
  height: 2rem;
  border: 1px solid var(--nb-line-input);
  border-radius: var(--nb-radius-control);
  background: #ffffff;
  color: var(--nb-ink-muted);
  font-size: 1.35rem;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}

.nb-preview-modal__close:hover {
  background: var(--nb-btn-surface-hover);
  border-color: var(--nb-brand-light);
  color: var(--nb-ink);
}

.nb-preview-modal__close:focus {
  outline: none;
}

.nb-preview-modal__close:focus-visible {
  outline: none;
  border-color: var(--nb-brand-light);
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.32);
}

.nb-preview-modal__close:active {
  transform: scale(0.96);
}

.nb-preview-modal__body {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 0.45rem 0.85rem 0.65rem;
}

.nb-preview-modal__hint {
  flex: 0 0 auto;
  font-size: var(--nb-type-caption);
  color: var(--nb-ink-muted);
  text-align: center;
  margin: 0.85rem 0 0.35rem;
  padding-bottom: 0;
  line-height: 1.35;
  border-bottom: none;
}

.nb-preview-modal__stage {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.35rem;
  border: none;
  border-radius: var(--nb-radius-inner);
  background: var(--nb-stage-bg);
  overflow: hidden;
}

/* พรีวิวใหญ่ = โคลน DOM จาก Cover Preview แล้ว scale (ไม่ใช้ canvas แยก) */
.nb-preview-modal__dom {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.nb-preview-modal__dom[hidden] {
  display: none !important;
}

.nb-preview-modal__dom-scaler {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  overflow: visible;
}

.nb-preview-modal__dom-scaler .nb-notebook-wrap--large-preview {
  position: relative;
  left: auto;
  flex: 0 0 auto;
  grid-column: auto;
  justify-self: auto;
  margin: 0;
  overflow: visible;
  transform-origin: top center;
  pointer-events: none;
  user-select: none;
}

.nb-preview-modal__dom-scaler .nb-notebook-wrap--large-preview .nb-notebook {
  overflow: visible;
}

.nb-preview-modal__dom-scaler .nb-notebook-wrap--large-preview .nb-notebook {
  max-width: none;
}

.nb-preview-modal__dom-scaler .nb-notebook-wrap--large-preview::after {
  margin-top: calc(var(--nb-ribbon-pad, 22%) - 6px);
  width: 74%;
  height: 12px;
}

.nb-preview-modal__img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: none;
}

.nb-preview-modal__loading,
.nb-preview-modal__error {
  font-size: var(--nb-type-body);
  color: var(--nb-ink-muted);
  text-align: center;
  margin: 0;
  padding: 1rem;
}

.nb-preview-modal__error {
  color: #8b4a3a;
}

@keyframes nb-modal-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes nb-modal-rise-in {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@media (max-width: 576px) {
  .nb-preview-modal {
    padding: 0.5rem;
  }

  .nb-preview-modal__dialog {
    width: 100%;
    height: min(96dvh, 96vh);
    max-height: min(96dvh, 96vh);
    border-radius: 10px;
  }

  .nb-preview-modal__stage {
    padding: 0.25rem;
  }
}

.nb-saved-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.65rem 1rem;
  margin-bottom: 0.85rem;
}

.nb-saved-toolbar .nb-saved-intro {
  flex: 1 1 14rem;
  min-width: 0;
}

.nb-btn-open-compare {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  min-height: 2rem;
  padding: 0.38rem 0.85rem;
  border-radius: var(--nb-radius-control);
  border: 1px solid var(--nb-action-outline-border);
  background: var(--nb-action-outline-bg);
  color: var(--nb-action-outline-text);
  font-size: var(--nb-type-caption);
  font-weight: 600;
  cursor: pointer;
  box-shadow: var(--nb-shadow-card);
  transition:
    background 0.15s ease,
    border-color 0.15s ease,
    transform 0.12s ease;
}

.nb-btn-open-compare:hover:not(:disabled) {
  background: var(--nb-action-outline-hover);
  border-color: var(--nb-brand-light);
}

.nb-btn-open-compare:active:not(:disabled) {
  transform: scale(0.98);
}

.nb-btn-open-compare:focus {
  outline: none;
}

.nb-btn-open-compare:focus-visible {
  outline: none;
  border-color: var(--nb-brand-light);
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.28);
}

.nb-btn-open-compare:disabled,
.nb-btn-open-compare[hidden] {
  display: none;
}

.nb-compare-modal[hidden] {
  display: none !important;
}

.nb-compare-modal {
  position: fixed;
  inset: 0;
  z-index: 1060;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  box-sizing: border-box;
}

.nb-compare-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(28, 25, 23, 0.45);
  animation: nb-modal-fade-in 0.22s ease;
}

.nb-compare-modal__dialog {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  width: min(96vw, 1100px);
  max-height: min(92vh, 900px);
  background: #ffffff;
  border: 1px solid var(--nb-line);
  border-radius: var(--nb-radius-frame);
  box-shadow: var(--nb-shadow-elevated);
  overflow: hidden;
  animation: nb-modal-rise-in 0.28s ease;
}

.nb-compare-modal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.85rem 1.15rem;
  background: var(--nb-cream-deep);
  border-bottom: 1px solid var(--nb-line);
}

.nb-compare-modal__title {
  margin: 0;
  font-size: var(--nb-type-col-sub);
  font-weight: 600;
  color: var(--nb-ink);
  letter-spacing: -0.01em;
}

.nb-compare-modal__close {
  flex: 0 0 auto;
  width: 2rem;
  height: 2rem;
  border: 1px solid var(--nb-line-input);
  border-radius: var(--nb-radius-control);
  background: #ffffff;
  color: var(--nb-ink-muted);
  font-size: 1.35rem;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}

.nb-compare-modal__close:hover {
  background: var(--nb-btn-surface-hover);
  border-color: var(--nb-brand-light);
  color: var(--nb-ink);
}

.nb-compare-modal__close:focus {
  outline: none;
}

.nb-compare-modal__close:focus-visible {
  outline: none;
  border-color: var(--nb-brand-light);
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.32);
}

.nb-compare-modal__close:active {
  transform: scale(0.96);
}

.nb-compare-modal__body {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  padding: 0.85rem 1rem 1.1rem;
}

.nb-compare-modal__hint {
  font-size: var(--nb-type-caption);
  color: var(--nb-ink-muted);
  line-height: 1.45;
}

.nb-compare-modal__body .nb-compare-row {
  min-width: 0;
}

@media (max-width: 720px) {
  .nb-compare-modal {
    padding: 0.5rem;
  }

  .nb-compare-modal__dialog {
    width: 100%;
    max-height: 96vh;
  }

  .nb-compare-modal__body .nb-compare-row {
    grid-template-columns: 1fr;
  }
}

/* Guide modal — beginner design walkthrough */
.nb-guide-modal[hidden] {
  display: none !important;
}

.nb-guide-modal {
  position: fixed;
  inset: 0;
  z-index: 1065;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  box-sizing: border-box;
}

.nb-guide-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(28, 25, 23, 0.48);
  animation: nb-modal-fade-in 0.22s ease;
}

.nb-guide-modal__dialog {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  width: min(94vw, 560px);
  max-height: min(92dvh, 92vh, 820px);
  background:
    linear-gradient(180deg, #faf8f5 0%, #ffffff 42%, #ffffff 100%);
  border: 1px solid var(--nb-frame-head-divider);
  border-radius: 16px;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.55),
    0 18px 48px rgba(28, 25, 23, 0.18);
  overflow: hidden;
  animation: nb-modal-rise-in 0.28s ease;
}

.nb-guide-modal__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.85rem;
  padding: 1.15rem 1.25rem 0.95rem;
  background:
    linear-gradient(180deg, #ebe4dc 0%, #e4ddd5 100%);
  border-bottom: 1px solid var(--nb-frame-head-divider);
}

.nb-guide-modal__head-copy {
  min-width: 0;
}

.nb-guide-modal__eyebrow {
  margin: 0 0 0.2rem;
  font-family: var(--nb-font-display);
  font-size: 0.8125rem;
  font-weight: 500;
  font-style: italic;
  letter-spacing: 0.08em;
  color: #6b635c;
}

.nb-guide-modal__title {
  margin: 0;
  font-family: 'Kanit', sans-serif;
  font-size: clamp(1.05rem, 2.8vw, 1.25rem);
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: var(--nb-shell-ink);
}

.nb-guide-modal__close {
  flex: 0 0 auto;
  width: 2rem;
  height: 2rem;
  margin-top: 0.1rem;
  border: 1px solid rgba(92, 85, 78, 0.28);
  border-radius: var(--nb-radius-control);
  background: rgba(255, 255, 255, 0.85);
  color: var(--nb-ink-muted);
  font-size: 1.35rem;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.nb-guide-modal__close:hover {
  background: #ffffff;
  border-color: rgba(92, 85, 78, 0.45);
  color: var(--nb-ink);
}

.nb-guide-modal__close:focus {
  outline: none;
}

.nb-guide-modal__close:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(92, 83, 76, 0.22);
}

.nb-guide-modal__body {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  padding: 1.1rem 1.25rem 0.35rem;
}

.nb-guide-modal__intro {
  margin: 0 0 1rem;
  font-family: 'Kanit', sans-serif;
  font-size: 0.875rem;
  font-weight: 300;
  line-height: 1.6;
  color: var(--nb-shell-muted);
}

.nb-guide-steps {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.nb-guide-step {
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr);
  gap: 0.75rem;
  align-items: start;
  padding: 0.7rem 0.8rem;
  border: 1px solid rgba(196, 189, 180, 0.55);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.72);
}

.nb-guide-step__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: #5c554e;
  color: #faf8f5;
  font-family: var(--nb-font-display);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.02em;
}

.nb-guide-step__title {
  margin: 0 0 0.18rem;
  font-family: 'Kanit', sans-serif;
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.35;
  color: var(--nb-shell-ink);
}

.nb-guide-step__text {
  margin: 0;
  font-family: 'Kanit', sans-serif;
  font-size: 0.8125rem;
  font-weight: 300;
  line-height: 1.55;
  color: #5c554e;
}

.nb-guide-tips {
  margin: 1rem 0 0.85rem;
  padding: 0.85rem 0.95rem;
  border-radius: 12px;
  background: #f0ebe4;
  border: 1px solid rgba(196, 189, 180, 0.65);
}

.nb-guide-tips__title {
  margin: 0 0 0.4rem;
  font-family: 'Kanit', sans-serif;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #3d3835;
}

.nb-guide-tips__list {
  margin: 0;
  padding-left: 1.1rem;
  font-family: 'Kanit', sans-serif;
  font-size: 0.8125rem;
  font-weight: 300;
  line-height: 1.55;
  color: #5c554e;
}

.nb-guide-tips__list li + li {
  margin-top: 0.2rem;
}

.nb-guide-modal__foot {
  flex: 0 0 auto;
  display: flex;
  justify-content: center;
  padding: 0.85rem 1.25rem 1.15rem;
  background: #faf8f5;
  border-top: 1px solid rgba(196, 189, 180, 0.55);
}

.nb-guide-modal__done {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 9.5rem;
  padding: 0.6rem 1.35rem;
  border: 1px solid #4a4540;
  border-radius: 999px;
  background: #4a4540;
  color: #faf8f5;
  font-family: 'Kanit', sans-serif;
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, transform 0.12s;
}

.nb-guide-modal__done:hover {
  background: #2f2b28;
  border-color: #2f2b28;
}

.nb-guide-modal__done:focus {
  outline: none;
}

.nb-guide-modal__done:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(92, 83, 76, 0.28);
}

.nb-guide-modal__done:active {
  transform: scale(0.98);
}

@media (max-width: 576px) {
  .nb-guide-modal {
    padding: 0.55rem;
    align-items: flex-end;
  }

  .nb-guide-modal__dialog {
    width: 100%;
    max-height: min(94dvh, 94vh);
    border-radius: 16px 16px 12px 12px;
  }

  .nb-guide-modal__head,
  .nb-guide-modal__body,
  .nb-guide-modal__foot {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .nb-guide-step {
    grid-template-columns: 1.75rem minmax(0, 1fr);
    gap: 0.65rem;
    padding: 0.6rem 0.7rem;
  }

  .nb-guide-step__num {
    width: 1.75rem;
    height: 1.75rem;
    font-size: 0.85rem;
  }
}

@media (max-width: 576px) {
  .nb-saved-toolbar {
    flex-direction: column;
    align-items: stretch;
  }

  .nb-btn-open-compare {
    width: 100%;
  }
}

/* —— Mobile polish: compact premium (≤767px) — visual only —— */
@media (max-width: 767px) {
  .nb-designer-demo-page #nb-main-section {
    padding-top: 1.65rem !important;
    padding-bottom: 2.35rem !important;
  }

  .nb-designer-wrap {
    --nb-type-col-head: 1.125rem;
    --nb-type-col-sub: 0.875rem;
    --nb-type-section: 0.8125rem;
    --nb-type-body: 0.78125rem;
    --nb-type-caption: 0.6875rem;
    --nb-type-control: 0.8125rem;
    --nb-type-action: 0.8125rem;
    --nb-space-field: 1.05rem;
    --nb-space-frame: 1.05rem;
    --nb-space-flow: 0.58rem;
    --nb-radius-frame: 12px;
    --nb-radius-inner: 9px;
    --nb-radius-control: 7px;
  }

  .nb-layout {
    gap: 1rem;
  }

  .nb-column--studio {
    gap: 1rem;
  }

  .nb-studio-grid {
    gap: 0.85rem;
  }

  .nb-frame__head:not(.nb-frame__head--sub) {
    padding: 13px 14px 12px;
    gap: 0.45rem;
  }

  .nb-frame__head--sub {
    padding: 10px 14px;
  }

  .nb-frame__head-icon {
    width: 1rem;
    height: 1rem;
    font-size: 0.9375rem;
    opacity: 0.88;
  }

  .nb-frame__head:not(.nb-frame__head--sub) .nb-frame__head-title {
    font-size: 0.9375rem;
    line-height: 1.28;
  }

  .nb-frame__body {
    padding: 0.95rem 1rem 1.05rem;
  }

  .nb-frame__body--preview {
    padding: 0.85rem 0.95rem 1rem;
  }

  .nb-frame--colors .nb-frame__body,
  .nb-frame__body--colors {
    padding: 0;
  }

  .nb-frame--saved .nb-frame__body {
    padding: 0.95rem 1rem 1.1rem;
  }

  .nb-field {
    margin-bottom: var(--nb-space-field);
  }

  .nb-column--specs .nb-field__label,
  .nb-column--specs label.nb-field__label,
  .nb-column--specs .nb-inline-label {
    margin-bottom: 0.42rem;
    line-height: 1.38;
  }

  .nb-cover-style-picker {
    gap: 0.28rem;
    padding: 0.42rem 0.38rem 0.38rem;
  }

  .nb-cover-style-picker .nb-cover-style-pick {
    padding: 0.2rem;
    border-radius: 7px;
  }

  .nb-cover-style-picker .nb-cover-style-thumb,
  .nb-cover-style-row--solo .nb-cover-style-thumb--lg {
    width: 26px;
    height: 34px;
    border-radius: 0 4px 4px 0;
  }

  .nb-cover-style-thumb--lg {
    width: 30px;
    height: 40px;
  }

  .nb-cover-style-picker__heading {
    margin-bottom: 0.32rem;
  }

  .nb-cover-style-picker__heading:not(:first-child) {
    margin-top: 0.5rem;
  }

  .nb-size-btns {
    gap: 0.38rem;
  }

  .nb-size-btns button,
  .nb-btn-binding,
  .nb-btn-inner-content,
  .nb-btn-ribbon,
  .nb-btn-decoration,
  .nb-btn-pen-loop,
  .nb-btn-closure {
    min-height: 2.125rem;
    padding: 0.3rem 0.48rem;
    line-height: 1.2;
  }

  .nb-closure-btns,
  .nb-binding-btns {
    gap: 0.35rem;
  }

  .nb-color-chips-grid {
    gap: 0.42rem;
  }

  .nb-color-chip {
    gap: 0.38rem;
    padding: 0.3rem 0.44rem;
    min-height: 2.125rem;
  }

  .nb-color-chip-swatch {
    width: 24px;
    height: 24px;
    border-radius: 5px;
  }

  .nb-color-chip-label {
    font-size: var(--nb-type-control);
    font-weight: 600 !important;
    line-height: 1.2;
  }

  .nb-color-tool-section__core {
    padding: 0.48rem 0.48rem 0;
  }

  .nb-color-tool-section__controls,
  .nb-color-picker-row {
    gap: 0.35rem 0.42rem;
    padding: 0.44rem 0.48rem 0.48rem;
  }

  .nb-color-tools--inline {
    gap: 0.28rem;
  }

  .nb-color-tools--inline .nb-input-color {
    width: 28px;
    height: 28px;
    border-radius: 7px;
  }

  .nb-color-tools--inline .nb-eyedropper-btn {
    min-width: 28px;
    height: 28px;
    padding: 0 0.3rem;
    border-radius: 7px;
  }

  .nb-color-tools--inline .nb-eyedropper-btn .fa {
    font-size: 0.8125rem;
  }

  .nb-spectrum-panel__tab,
  .nb-color-tool-section__controls .nb-spectrum-panel__tab,
  .nb-color-picker-row .nb-spectrum-panel__tab {
    padding: 0.28rem 0.62rem;
    font-size: var(--nb-type-caption);
  }

  .nb-spectrum-img {
    height: 88px;
  }

  .nb-color-tool-section .nb-spectrum-img {
    height: 92px;
  }

  .nb-color-tool-section .nb-spectrum-hint {
    margin-top: 0.28rem;
    padding-bottom: 0.38rem;
    line-height: 1.4;
  }

  .nb-frame--preview .nb-preview-label,
  .nb-saved-intro:not(.nb-saved-intro--full),
  .nb-compare-intro {
    font-size: var(--nb-type-control);
    line-height: 1.5;
  }

  .nb-preview-label {
    margin-bottom: 0.65rem;
    max-width: 100%;
  }

  .nb-preview-stage {
    padding: 1rem 1.15rem 1.35rem;
    min-height: 228px;
    border-radius: var(--nb-radius-inner);
  }

  .nb-preview-case-meta {
    margin-bottom: 0.15rem;
    font-size: var(--nb-type-caption);
  }

  .nb-frame--preview .nb-preview-label {
    margin-bottom: 0.75rem;
  }

  .nb-frame--preview .nb-paper-hint,
  .nb-frame--preview .nb-production-disclaimer {
    font-size: var(--nb-type-body);
  }

  .nb-preview-actions--bottom {
    gap: 0.42rem 0.5rem;
    margin-top: 0.85rem;
    padding-top: 0.75rem;
    max-width: 100%;
  }

  .nb-frame--preview .nb-preview-actions--bottom .btn-nb-primary.nb-btn-save-design {
    min-height: 2.125rem;
    padding: 0.36rem 0.75rem;
    font-size: var(--nb-type-control);
  }

  .nb-frame--preview .nb-preview-actions--bottom .btn-nb-ghost,
  .nb-frame--preview .nb-preview-actions--bottom .btn-nb-download {
    min-height: 2rem;
    padding: 0.32rem 0.45rem;
    font-size: var(--nb-type-body);
  }

  .nb-actions {
    gap: 0.42rem;
    margin-top: 0.85rem;
  }

  .nb-actions .btn-nb-primary,
  .nb-actions .btn-nb-ghost {
    min-height: 2.125rem;
    padding: 0.32rem 0.75rem;
  }

  .btn-nb-download {
    min-height: 2.125rem;
    padding: 0.32rem 0.72rem;
  }

  .nb-saved-list {
    grid-template-columns: 1fr;
    gap: 0.75rem;
    margin-top: 0.65rem;
  }

  .nb-saved-card {
    padding: 0.78rem 0.85rem 0.72rem;
    border-radius: 10px;
  }

  .nb-saved-thumb {
    min-height: 200px;
    margin-bottom: 0.52rem;
    padding: 0.55rem 0.42rem 0.9rem;
  }

  .nb-saved-meta__title {
    margin-bottom: 0.32rem;
    font-size: var(--nb-type-body);
  }

  .nb-saved-meta__list li {
    margin-bottom: 0.28rem;
    font-size: var(--nb-type-caption);
  }

  .nb-gallery-btn {
    min-width: 0;
    padding: 0.32rem 0.48rem;
    font-size: var(--nb-type-caption);
  }

  .nb-saved-actions button {
    padding: 0.22rem 0.42rem;
    font-size: var(--nb-type-caption);
  }

  .nb-saved-pagination {
    gap: 0.5rem 0.75rem;
    margin-top: 0.75rem;
    padding-top: 0.7rem;
  }

  .nb-saved-page-btn {
    padding: 0.34rem 0.62rem;
  }

  .nb-swatch.nb-swatch--chart {
    width: 24px;
    height: 24px;
  }

  .nb-swatch-grid--five {
    gap: 5px;
  }

  .nb-elastic {
    min-width: 11px;
    width: 5.5%;
  }

  .nb-ribbon {
    min-width: 13px;
    width: 6.5%;
  }

  .nb-panel {
    padding: 0.85rem 0.9rem 1rem;
  }

  .nb-color-block--picker {
    padding: 0.58rem 0.58rem 0.52rem;
  }

  .nb-color-block__body {
    padding: 0.58rem 0.58rem 0.65rem;
  }

  .nb-color-block--current .nb-color-block__body {
    padding-bottom: 0.58rem;
  }

  .nb-color-block__head {
    padding: 0.52rem 0.58rem 0.48rem;
  }
}

/* —— Cover image upload (Phase A) —— */
.nb-color-block--artwork .nb-color-block__body {
  padding-top: 0.5rem;
}

.nb-cover-upload-drop {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  min-height: 108px;
  padding: 0.85rem 0.75rem;
  border: 1.5px dashed rgba(61, 41, 20, 0.28);
  border-radius: 10px;
  background: linear-gradient(165deg, rgba(255, 255, 255, 0.72) 0%, rgba(248, 244, 238, 0.95) 100%);
  cursor: pointer;
  transition:
    border-color 0.2s ease,
    background 0.2s ease,
    box-shadow 0.2s ease;
  text-align: center;
}

.nb-cover-upload-drop:hover,
.nb-cover-upload-drop:focus-visible {
  border-color: rgba(92, 74, 58, 0.45);
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 4px 14px rgba(28, 25, 23, 0.08);
  outline: none;
}

.nb-cover-upload-drop.is-dragover {
  border-color: var(--nb-accent, #5c4a3a);
  border-style: solid;
  background: rgba(255, 252, 248, 0.98);
  box-shadow: 0 0 0 3px rgba(92, 74, 58, 0.12);
}

.nb-cover-upload-drop__icon {
  font-size: 1.45rem;
  color: rgba(61, 41, 20, 0.55);
}

.nb-cover-upload-drop__title {
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--nb-ink, #3d2914);
  line-height: 1.35;
}

.nb-cover-upload-drop__hint {
  font-size: 0.72rem;
  color: rgba(92, 74, 58, 0.72);
  line-height: 1.35;
  max-width: 16rem;
}

.nb-cover-upload-status {
  font-size: 0.75rem;
  min-height: 1.1em;
}

.nb-cover-upload-section {
  margin-top: 0.65rem;
}

.nb-cover-upload-section__title {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(92, 74, 58, 0.75);
  margin: 0 0 0.4rem;
}

.nb-cover-upload-card {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 0.55rem 0.65rem;
  align-items: center;
  padding: 0.5rem 0.55rem;
  margin-bottom: 0.45rem;
  border-radius: 8px;
  border: 1px solid rgba(61, 41, 20, 0.12);
  background: rgba(255, 255, 255, 0.65);
}

.nb-cover-upload-card__thumb {
  width: 52px;
  height: 52px;
  border-radius: 6px;
  object-fit: contain;
  background: repeating-conic-gradient(#e8e4de 0% 25%, #f5f2ec 0% 50%) 50% / 10px 10px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  grid-row: 1 / span 2;
}

.nb-cover-upload-card__name {
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--nb-ink, #3d2914);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nb-cover-upload-card__meta {
  font-size: 0.68rem;
  color: rgba(92, 74, 58, 0.7);
}

.nb-cover-upload-card__actions {
  grid-column: 2;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.nb-cover-upload-card__btn {
  font-size: 0.7rem;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  border: 1px solid rgba(61, 41, 20, 0.2);
  background: #fff;
  color: var(--nb-ink, #3d2914);
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.nb-cover-upload-card__btn:hover {
  background: rgba(248, 244, 238, 1);
  border-color: rgba(61, 41, 20, 0.35);
}

.nb-cover-upload-card__btn--primary {
  background: var(--nb-ink, #3d2914);
  border-color: var(--nb-ink, #3d2914);
  color: #fff;
}

.nb-cover-upload-card__btn--primary:hover {
  background: #2a1c0f;
  border-color: #2a1c0f;
  color: #fff;
}

.nb-cover-upload-empty {
  font-size: 0.75rem;
  color: rgba(92, 74, 58, 0.65);
  margin: 0.25rem 0 0;
}

/* Placed artwork on cover preview */
.nb-cover-art-clip {
  position: absolute;
  inset: 0;
  z-index: 5;
  border-radius: inherit;
  overflow: hidden;
  /* ไม่ดักคลิกทั้งปก — ให้โซนสีปก/ยางฯ รับคลิกได้; เฉพาะชิ้นรูปที่ is-interactive */
  pointer-events: none;
}

.nb-cover-art-clip[hidden] {
  display: none !important;
}

.nb-cover-art-layer {
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  pointer-events: none;
  overflow: hidden;
}

.nb-notebook.nb-cover-art-active {
  overflow: visible;
}

.nb-preview-stage.nb-preview-stage--art-ui {
  overflow: visible;
}

.nb-preview-stage.nb-preview-stage--art-ui .nb-preview-visual {
  overflow: visible;
}

.nb-cover-art-item {
  position: absolute;
  box-sizing: border-box;
  transform-origin: center center;
  pointer-events: none;
}

.nb-cover-art-item img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}

.nb-cover-art-item--tinted .nb-cover-art-item__tint {
  display: block;
  width: 100%;
  height: 100%;
  background-color: var(--nb-art-tint, #000);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
  pointer-events: none;
}

.nb-cover-art-tint-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem 0.65rem;
  margin: 0.55rem 0 0.75rem;
  padding: 0.55rem 0.65rem;
  border: 1px solid var(--nb-line);
  border-radius: 10px;
  background: rgba(28, 25, 23, 0.03);
}

.nb-cover-art-tint-fields {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem 0.65rem;
}

.nb-cover-art-tint-row__label {
  margin: 0;
  font-size: 0.78rem;
  color: var(--nb-ink-muted);
  white-space: nowrap;
}

.nb-cover-art-tint-row__color {
  width: 2rem;
  height: 1.65rem;
  padding: 0;
  border: 1px solid var(--nb-line);
  border-radius: 6px;
  background: #fff;
  cursor: pointer;
}

.nb-cover-art-tint-row__opacity {
  flex: 1 1 7rem;
  min-width: 6rem;
  max-width: 11rem;
  margin: 0;
  accent-color: var(--nb-brand, #5c4033);
}

.nb-cover-art-tint-row__val {
  min-width: 2.4rem;
  font-size: 0.78rem;
  color: var(--nb-ink-muted);
  font-variant-numeric: tabular-nums;
}

.nb-cover-art-tint-row__btn {
  margin: 0;
  padding: 0.28rem 0.7rem;
  border: 1px solid var(--nb-line);
  border-radius: 999px;
  background: #fff;
  color: var(--nb-ink, #292524);
  font-size: 0.78rem;
  line-height: 1.2;
  cursor: pointer;
}

.nb-cover-art-tint-row__btn:hover:not(:disabled) {
  border-color: var(--nb-brand, #5c4033);
  color: var(--nb-brand, #5c4033);
}

.nb-cover-art-tint-row__btn:disabled {
  opacity: 0.55;
  cursor: default;
}

.nb-cover-art-item.is-active {
  outline: none;
}

.nb-cover-art-item.is-interactive {
  pointer-events: auto;
  cursor: grab;
  touch-action: none;
}

.nb-cover-art-item.is-interactive.is-dragging {
  cursor: grabbing;
}

/* ขอบปกอ้างอิง (ไม่บังคับตำแหน่งรูป) */
.nb-cover-art-layer.is-editing::before {
  content: '';
  position: absolute;
  inset: 0;
  border: 1px dashed rgba(61, 41, 20, 0.14);
  border-radius: inherit;
  pointer-events: none;
  z-index: 0;
}

/* กรอบจับ + ปุ่มสีฟ้า — แบบ nb-decoration-ui / edge */
.nb-cover-art-ui {
  position: absolute;
  inset: 0;
  z-index: 26;
  pointer-events: none;
  border-radius: inherit;
  overflow: visible;
}

.nb-cover-art-ui__sel {
  position: absolute;
  box-sizing: border-box;
  pointer-events: none;
  transform-origin: center center;
}

.nb-cover-art-ui__sel .nb-decoration-box {
  position: absolute;
  inset: 0;
  border: 1px solid var(--nb-ps-select);
  box-sizing: border-box;
  pointer-events: auto;
  cursor: grab;
  touch-action: none;
  transform-origin: center center;
  box-shadow: none;
}

.nb-cover-art-ui__sel.is-dragging .nb-decoration-box {
  cursor: grabbing;
}

.nb-cover-art-ui__sel::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 100%;
  width: 1px;
  height: 14px;
  margin-left: -0.5px;
  background: var(--nb-ps-select);
  pointer-events: none;
  opacity: 0.85;
}

.nb-cover-art-ui__sel.is-snap-x .nb-decoration-box {
  box-shadow:
    -40vw 0 0 0 rgba(56, 132, 255, 0.1),
    40vw 0 0 0 rgba(56, 132, 255, 0.1);
}

.nb-cover-art-ui__sel.is-snap-y .nb-decoration-box {
  box-shadow:
    0 -40vh 0 0 rgba(56, 132, 255, 0.1),
    0 40vh 0 0 rgba(56, 132, 255, 0.1);
}

.nb-cover-art-ui .nb-deco-handle {
  z-index: 3;
  width: 10px;
  height: 10px;
  margin: -5px 0 0 -5px;
  padding: 0;
  border: 1.5px solid var(--nb-ps-select);
  border-radius: 50%;
  background: #ffffff;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.9),
    0 1px 4px rgba(37, 99, 235, 0.22);
  transition: transform 0.1s ease, box-shadow 0.12s ease;
}

.nb-cover-art-ui .nb-deco-handle:focus {
  outline: none;
}

.nb-cover-art-ui .nb-deco-handle:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 2px rgba(37, 99, 235, 0.35),
    0 1px 4px rgba(37, 99, 235, 0.25);
}

.nb-cover-art-ui .nb-deco-handle.is-dragging {
  transform: scale(1.08);
}

.nb-cover-art-ui .nb-deco-handle--edge-h {
  width: 22px;
  height: 6px;
  margin: -3px 0 0 -11px;
  border-radius: 999px;
}

.nb-cover-art-ui .nb-deco-handle--edge-v {
  width: 6px;
  height: 22px;
  margin: -11px 0 0 -3px;
  border-radius: 999px;
}

.nb-cover-art-ui .nb-deco-handle::before {
  content: '';
  position: absolute;
  inset: -10px;
}

.nb-cover-art-ui__sel .nb-deco-handle--nw {
  left: 0;
  top: 0;
  cursor: nwse-resize;
}

.nb-cover-art-ui__sel .nb-deco-handle--ne {
  left: 100%;
  top: 0;
  cursor: nesw-resize;
}

.nb-cover-art-ui__sel .nb-deco-handle--sw {
  left: 0;
  top: 100%;
  cursor: nesw-resize;
}

.nb-cover-art-ui__sel .nb-deco-handle--se {
  left: 100%;
  top: 100%;
  cursor: nwse-resize;
}

.nb-cover-art-ui__sel .nb-deco-handle--n {
  left: 50%;
  top: 0;
  cursor: ns-resize;
}

.nb-cover-art-ui__sel .nb-deco-handle--s {
  left: 50%;
  top: 100%;
  cursor: ns-resize;
}

.nb-cover-art-ui__sel .nb-deco-handle--e {
  left: 100%;
  top: 50%;
  cursor: ew-resize;
}

.nb-cover-art-ui__sel .nb-deco-handle--w {
  left: 0;
  top: 50%;
  cursor: ew-resize;
}

.nb-cover-art-ui__sel .nb-deco-handle--rotate {
  left: 50%;
  top: 100%;
  width: 20px;
  height: 20px;
  margin-left: -10px;
  margin-top: 22px;
  border-radius: 50%;
  cursor: grab;
}

.nb-cover-art-ui__sel .nb-deco-handle--rotate::after {
  content: '';
  display: block;
  width: 10px;
  height: 10px;
  margin: 3px auto 0;
  border: 1.5px solid var(--nb-ps-select);
  border-top-color: transparent;
  border-radius: 50%;
  box-sizing: border-box;
}

@media (pointer: coarse) {
  .nb-cover-art-ui__sel .nb-deco-handle--rotate {
    margin-top: 28px;
  }

  .nb-cover-art-ui .nb-deco-handle--corner {
    width: 14px;
    height: 14px;
    margin: -7px 0 0 -7px;
  }

  .nb-cover-art-ui .nb-deco-handle--edge-h {
    width: 28px;
    height: 8px;
    margin: -4px 0 0 -14px;
  }

  .nb-cover-art-ui .nb-deco-handle--edge-v {
    width: 8px;
    height: 28px;
    margin: -14px 0 0 -4px;
  }

  .nb-cover-art-ui__sel .nb-deco-handle--rotate {
    width: 26px;
    height: 26px;
    margin-left: -13px;
  }
}

.nb-cover-art-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  margin-bottom: 0.5rem;
  padding: 0.45rem 0.5rem;
  border-radius: 8px;
  background: rgba(248, 244, 238, 0.95);
  border: 1px solid rgba(61, 41, 20, 0.12);
}

.nb-cover-art-toolbar__label {
  font-size: 0.68rem;
  font-weight: 600;
  color: rgba(92, 74, 58, 0.8);
  margin-right: 0.15rem;
}

.nb-cover-art-toolbar__btn {
  font-size: 0.68rem;
  padding: 0.22rem 0.5rem;
  border-radius: 999px;
  border: 1px solid rgba(61, 41, 20, 0.2);
  background: #fff;
  color: var(--nb-ink, #3d2914);
  cursor: pointer;
}

.nb-cover-art-toolbar__btn:hover {
  background: rgba(255, 255, 255, 0.95);
  border-color: rgba(61, 41, 20, 0.35);
}

.nb-cover-art-toolbar__btn--danger {
  color: #8b2e2e;
  border-color: rgba(139, 46, 46, 0.25);
}

.nb-cover-upload-card.is-selected {
  border-color: rgba(61, 41, 20, 0.35);
  box-shadow: 0 0 0 2px rgba(92, 74, 58, 0.12);
}

.nb-cover-upload-card__tools {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.55rem;
  margin-top: 0.15rem;
  padding-top: 0.55rem;
  border-top: 1px solid var(--nb-line);
}