/* Flynery โ€” notebook cover designer (demo) */

/* โ€”โ€” Page shell: warm minimal (MUJI / premium stationery) โ€”โ€” */
.nb-designer-demo-page {
  /* Half-step darker stone โ€” white frames separate clearly from page */
  --nb-page-bg: #e8e4de;
  --nb-page-bg-alt: #e2ddd6;
  /* 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;
  /* เผื่อ navbar พับสองแถว (~110px) — เคยใช้ margin-top: 72px แล้ว "by Flynery" ถูกบัง */
  --nb-hero-nav-offset: 120px;
  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;
  white-space: nowrap;
}

@media (min-width: 992px) {
  .nb-designer-demo-page .navbar-collapse,
  .nb-designer-demo-page .navbar-nav {
    flex-wrap: nowrap;
  }

  .nb-designer-demo-page .navbar .nav-link {
    padding: 0.35rem 0.5rem !important;
    font-size: 0.8125rem;
  }
}

@media (min-width: 1400px) {
  .nb-designer-demo-page .navbar .nav-link {
    padding: 0.45rem 0.85rem !important;
    font-size: 0.9375rem;
  }
}

.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: 0;
  padding-top: var(--nb-hero-nav-offset);
  min-height: calc(var(--nb-hero-min-h) + var(--nb-hero-nav-offset)) !important;
  overflow: hidden;
  background-size: cover !important;
  background-position: center 40% !important;
}

/* เน„เธฅเนˆเธชเธตเธ™เธธเนˆเธกเธ—เธฑเน‰เธ‡เธˆเธญ โ€” เธ—เน‰เธฒเธข hero เธˆเธฒเธ‡เน€เธ‚เน‰เธฒ --nb-page-bg เนƒเธซเน‰เธ•เนˆเธญเธเธฑเธšเธžเธทเน‰เธ™เธฅเนˆเธฒเธ‡ */
.nb-studio-hero__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(
      105deg,
      rgba(232, 228, 222, 0.16) 0%,
      transparent 22%,
      transparent 78%,
      rgba(232, 228, 222, 0.14) 100%
    ),
    linear-gradient(
      180deg,
      rgba(232, 228, 222, 0.08) 0%,
      transparent 40%,
      rgba(232, 228, 222, 0.55) 78%,
      var(--nb-page-bg) 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__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);
}

.nb-studio-hero__wave path {
  fill: var(--nb-page-bg);
}

@media (max-width: 991.98px) {
  .nb-designer-demo-page {
    --nb-hero-nav-offset: 88px;
  }
}

@media (max-width: 768px) {
  .nb-designer-demo-page {
    --nb-hero-nav-offset: 128px;
  }

  .nb-designer-demo-page header.jarallax.nb-studio-hero {
    min-height: calc(var(--nb-hero-min-h-mobile) + var(--nb-hero-nav-offset)) !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__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);
}

/* เน‚เธ—เน€เธ„เธ™เธชเธต/เน„เธ—เธ›เนŒ โ€” เนƒเธชเนˆเธ—เธฑเน‰เธ‡ wrap เนเธฅเธฐ panel (panel เธ–เธนเธเธขเน‰เธฒเธขเน„เธ› body เธšเธ™เธกเธทเธญเธ–เธทเธญ) */
.nb-designer-wrap,
.nb-acc__panel,
.nb-colors-stack {
  --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 3px rgba(28, 25, 23, 0.05), 0 6px 20px rgba(28, 25, 23, 0.08);
  --nb-shadow-card: 0 1px 2px rgba(28, 25, 23, 0.05);
  --nb-shadow-elevated: 0 4px 28px rgba(28, 25, 23, 0.1);
  --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: #fafaf9;
  --nb-layout-gap: 1.4rem;
  --nb-sep-scale: 1.12;
  --nb-studio-gap: 1.35rem;
  --nb-preview-notebook-max: 300px;
}

.nb-designer-wrap {
  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);
}

/* เธ›เธธเนˆเธกเน€เธฅเธทเธญเธเธ—เธฑเนˆเธงเน„เธ›เธขเธฑเธ‡ semi-bold เน„เธ”เน‰ โ€” เธขเธเน€เธงเน‰เธ™เธŠเธดเธ›เธชเธต (เน„เธ—เธขเธ•เธฑเธงเธซเธ™เธฒเธ”เธนเธšเธงเธก) */
.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-swatch-block.is-active {
  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 {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--nb-layout-gap);
  align-items: stretch;
}

/* Mobile / tablet: studio เธเนˆเธญเธ™ specs โ€” เนเธšเธšเธ—เธตเนˆเธšเธฑเธ™เธ—เธถเธเธ•เธฒเธกเธซเธฅเธฑเธ‡ studio */
.nb-column--studio {
  order: 1;
}

.nb-layout > .nb-frame--saved {
  order: 2;
}

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

@media (min-width: 992px) {
  .nb-layout {
    display: grid;
    grid-template-columns: minmax(248px, 268px) minmax(0, 1fr);
    grid-template-areas:
      'specs studio'
      'saved saved';
    gap: 1.5rem;
    align-items: start;
  }

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

  .nb-column--specs {
    grid-area: 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--specs .nb-acc__head {
    gap: 0.5rem;
    padding: 0.62rem 0.62rem 0.62rem 0.7rem;
  }

  .nb-column--studio {
    grid-area: studio;
    min-height: 0;
    align-self: start;
  }

  /* เธšเธ™เนเธ—เน‡เธšเน€เธฅเน‡เธ•/iPad เธญเธขเนˆเธฒเธขเธทเธ” studio เนƒเธซเน‰เธชเธนเธ‡เน€เธ—เนˆเธฒ specs โ€” เธˆเธฐเธกเธตเธŠเนˆเธญเธ‡เธงเนˆเธฒเธ‡เนเธฅเธฐเธšเธฑเธ‡ upload */
  .nb-studio-grid {
    flex: 0 0 auto;
    min-height: 0;
    align-self: stretch;
  }

  .nb-layout > .nb-frame--saved {
    grid-area: saved;
    grid-column: 1 / -1;
    width: 100%;
    max-width: none;
    margin-top: 0;
    margin-inline: 0;
    justify-self: stretch;
  }
}

/* Desktop เธเธงเน‰เธฒเธ‡เธˆเธฃเธดเธ‡เน€เธ—เนˆเธฒเธ™เธฑเน‰เธ™ โ€” iPad / iPad Pro (เธ–เธถเธ‡ ~1366) เธญเธขเนˆเธฒเธขเธทเธ” เธˆเธฐเน€เธเธดเธ”เธŠเนˆเธญเธ‡เธงเนˆเธฒเธ‡เนเธฅเธฐเธšเธฑเธ‡ upload */
@media (min-width: 1400px) {
  .nb-layout {
    align-items: stretch;
  }

  .nb-column--studio {
    align-self: stretch;
  }

  .nb-studio-grid {
    flex: 1 1 auto;
    min-height: 0;
  }
}

@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(256px, 280px) 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 on mobile; tablet+ stacks preview beside colors */
.nb-studio-stack {
  display: contents;
}

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

.nb-colors-stack-home {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  min-width: 0;
  order: 0;
}

.nb-colors-stack {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  min-width: 0;
}

.nb-colors-sheet-bar,
.nb-colors-sheet-footer {
  display: none;
}

.nb-colors-sheet-body {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  min-width: 0;
}

.nb-colors-sheet-backdrop {
  display: none;
}

.nb-colors-fab-row {
  display: none;
}

.nb-colors-fab {
  display: none;
}

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

.nb-layout > .nb-frame--saved,
.nb-studio-grid .nb-frame--saved {
  order: 1;
}

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

  .nb-studio-stack {
    grid-area: preview;
    display: flex;
    flex-direction: column;
    min-width: 0;
  }

  .nb-colors-stack-home {
    grid-area: colors;
    order: unset;
    align-self: start;
    gap: 1.15rem;
  }

  .nb-studio-grid .nb-frame--colors,
  .nb-studio-grid .nb-frame--color-parts,
  .nb-studio-grid .nb-frame--color-current {
    order: unset;
    width: 100%;
  }

  .nb-studio-grid .nb-frame--preview {
    order: unset;
    width: 100%;
  }

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

  .nb-frame--colors,
  .nb-frame--color-parts,
  .nb-frame--color-current {
    display: flex;
    flex-direction: column;
    width: 100%;
    min-height: 0;
    height: auto;
    overflow: hidden;
  }

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

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

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

  .nb-frame--preview .nb-preview-stage {
    flex: 0 0 auto;
    min-height: 440px;
  }
}

/* เธ„เธญเธฅเธฑเธกเธ™เนŒ Material เธเธงเน‰เธฒเธ‡เธ‚เธถเน‰เธ™เธšเธ™เธˆเธญเนƒเธซเธเนˆ โ€” เธขเธฑเธ‡เน„เธกเนˆเธขเธทเธ”เธ„เธงเธฒเธกเธชเธนเธ‡ (เธเธฑเธ™ iPad) */
@media (min-width: 1280px) {
  .nb-studio-grid {
    grid-template-columns: minmax(320px, 360px) minmax(0, 1fr);
    gap: 1.5rem;
  }
}

/* Desktop เธเธงเน‰เธฒเธ‡: เธขเธทเธ”เธเธฃเธญเธš Cover Preview เนƒเธซเน‰เธเน‰เธ™เน€เธชเธกเธญเธเธฑเธšเธ„เธญเธฅเธฑเธกเธ™เนŒเธชเธต */
@media (min-width: 1200px) {
  .nb-studio-grid {
    align-items: stretch;
  }

  .nb-colors-stack-home {
    align-self: start;
  }

  .nb-studio-stack {
    align-self: stretch;
    height: auto;
    min-height: 100%;
  }

  .nb-frame.nb-frame--colors,
  .nb-frame.nb-frame--color-parts,
  .nb-frame.nb-frame--color-current {
    min-height: 0;
    height: auto;
  }

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

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

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

  .nb-frame--preview .nb-preview-footer {
    margin-top: auto;
    padding-top: 1.25rem;
  }

  .nb-frame--preview:has(#nb-notebook-main.nb-no-ribbon) .nb-preview-footer {
    margin-top: auto;
  }
}

@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-border-strong);
  border-radius: var(--nb-radius-frame);
  background-color: #ffffff;
  box-shadow: var(--nb-shadow-frame);
  overflow: hidden;
}

/*
 * overflow:hidden เนƒเธซเน‰เธกเธธเธกเธกเธ™เธ‚เธญเธ‡ border-radius เธ•เธฑเธ”เธžเธทเน‰เธ™เธซเธฅเธฑเธ‡เน„เธ”เน‰
 * (เน€เธฅเธดเธเนƒเธŠเน‰ visible เธซเธฅเธฑเธ‡เนเธเน‰เน„เธกเนˆเธขเธทเธ”เธ„เธงเธฒเธกเธชเธนเธ‡เธšเธ™ iPad เนเธฅเน‰เธง โ€” เน„เธกเนˆเธ•เธฑเธ”เธŠเนˆเธญเธ‡เธญเธฑเธ›เน‚เธซเธฅเธ”)
 */
.nb-frame.nb-frame--colors {
  overflow: hidden;
}

@media (min-width: 768px) and (max-width: 1399.98px) {
  .nb-frame.nb-frame--colors {
    height: auto;
    min-height: 0;
    overflow: hidden;
  }
}

@media (min-width: 1400px) {
  .nb-frame.nb-frame--colors {
    min-height: 0;
    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: 500;
  letter-spacing: 0;
  line-height: 1.35;
  color: var(--nb-frame-head-title);
  text-shadow: none;
  margin: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.nb-frame__head:not(.nb-frame__head--sub) .nb-frame__head-title {
  font-size: 1.03125rem;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.32;
}

.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-frame-head-title);
}

/* ปุ่มคู่มือ — อยู่มุมขวาของหัวกรอบตัวอย่างปก ให้อยู่ติดเครื่องมือที่ใช้จริง */
.nb-frame__head-guide {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-left: auto;
  flex: 0 0 auto;
  padding: 0.3rem 0.7rem 0.3rem 0.42rem;
  border: 1px solid rgba(92, 83, 76, 0.3);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.86);
  color: #3d3835;
  font-family: 'Kanit', sans-serif;
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  line-height: 1.2;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.nb-frame__head-guide:hover {
  background: #ffffff;
  border-color: rgba(92, 83, 76, 0.45);
  color: #1c1917;
}

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

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

.nb-frame__head-guide-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.3rem;
  height: 1.3rem;
  border-radius: 50%;
  background: #5c554e;
  color: #faf8f5;
  font-size: 0.65rem;
}

.nb-frame__head-guide-text {
  white-space: nowrap;
}

@media (max-width: 420px) {
  .nb-frame--preview > .nb-frame__head .nb-frame__head-title {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .nb-frame__head-guide {
    padding: 0.24rem 0.52rem 0.24rem 0.3rem;
    font-size: 0.7rem;
    gap: 0.32rem;
  }
}

.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.72rem 0.72rem 0.78rem;
  display: flex;
  flex-direction: column;
  gap: 0;
  background: #ffffff;
}

.nb-frame--color-parts .nb-frame__body,
.nb-frame--color-current .nb-frame__body {
  padding: 0.72rem 0.72rem 0.78rem;
}

.nb-acc__panel[id="nb-acc-panel-upload"] .nb-acc__panel-body {
  padding-bottom: 0.35rem;
}

/* Material Colors stack โ€” เนเธ•เนˆเธฅเธฐเธšเธฅเน‡เธญเธเน€เธ›เน‡เธ™เธเธฃเธญเธšเนเธขเธ */
.nb-color-block {
  flex: 0 0 auto;
  min-width: 0;
}

.nb-color-block--picker {
  padding: 0;
  background: transparent;
}

.nb-frame--color-current .nb-frame__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__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--color-parts .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 โ€” เธšเธฒเธ™เธžเธฑเธšเธ•เธดเธ”เธเธฑเธ™ เน‚เธ—เธ™เธญเนˆเธญเธ™เน€เธ‚เน‰เธฒเธเธฑเธšเธซเธ™เน‰เธฒ + เน„เธฎเน„เธฅเธ—เนŒเธ™เน‰เธณเธ•เธฒเธฅ + เธ‚เธฑเน‰เธ™เน€เธชเน‰เธ™เน€เธ‚เน‰เธก */
.nb-acc-list {
  --nb-acc-bar: #ebe4db;
  --nb-acc-bar-soft: #f3ede6;
  --nb-acc-bar-selected: #ddd2c4;
  --nb-acc-bar-selected-soft: #e8dccf;
  --nb-acc-divider: #3d322a;
  --nb-acc-ink: #2a2420;
  --nb-acc-ink-muted: #6b625a;
  --nb-acc-hi: #8a6a4a;
  --nb-acc-hi-brown: #a67c52;
  display: flex;
  flex-direction: column;
  gap: 0;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(61, 50, 42, 0.28);
  box-shadow: 0 1px 4px rgba(28, 25, 23, 0.06);
}

.nb-column--specs .nb-field.nb-acc {
  margin: 0;
  border: none;
  padding: 0;
}

.nb-acc__head {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.7rem;
  width: 100%;
  margin: 0;
  padding: 0.7rem 0.78rem 0.7rem 0.85rem;
  border: none;
  border-radius: 0;
  border-bottom: 1px solid var(--nb-acc-divider);
  background: linear-gradient(180deg, var(--nb-acc-bar-soft) 0%, var(--nb-acc-bar) 100%);
  color: var(--nb-acc-ink);
  text-align: left;
  cursor: pointer;
  overflow: hidden;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55);
  transition:
    background 0.16s ease,
    box-shadow 0.16s ease,
    color 0.16s ease;
}

.nb-acc:last-child .nb-acc__head {
  border-bottom: none;
}

.nb-acc__head::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: transparent;
  transition: background 0.16s ease;
}

.nb-acc__head:hover,
.nb-acc__head:focus-visible {
  outline: none;
  background: linear-gradient(180deg, #f6f0e9 0%, #e4d9cc 100%);
}

.nb-acc__head:hover::before,
.nb-acc__head:focus-visible::before {
  background: var(--nb-acc-hi-brown);
}

/* เนเธ–เธšเธ—เธตเนˆเน€เธฅเธทเธญเธ โ€” เน„เธฎเน„เธฅเธ—เนŒเธ™เน‰เธณเธ•เธฒเธฅเธšเธ™เธžเธทเน‰เธ™เธญเนˆเธญเธ™ */
.nb-acc.is-open .nb-acc__head {
  background: linear-gradient(
    180deg,
    var(--nb-acc-bar-selected-soft) 0%,
    var(--nb-acc-bar-selected) 100%
  );
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.4),
    inset 0 0 0 999px rgba(166, 124, 82, 0.08);
}

.nb-acc.is-open .nb-acc__head::before {
  background: linear-gradient(180deg, #c9a07a 0%, var(--nb-acc-hi-brown) 55%, #7a5636 100%);
}

.nb-acc__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 7px;
  background: #d2c4b4;
  color: #5c4636;
  font-size: 0.95rem;
  flex-shrink: 0;
  transition: background 0.16s ease, color 0.16s ease, box-shadow 0.16s ease;
}

.nb-acc__icon .nb-icon-closure {
  display: block;
  width: 1.22em;
  height: 1.22em;
}

.nb-icon-texture {
  display: block;
  width: 1.15rem;
  height: 1.15rem;
  flex-shrink: 0;
  background-color: currentColor;
  -webkit-mask-image: url('../images/notebook-designer/icon-texture-diagonal.png');
  mask-image: url('../images/notebook-designer/icon-texture-diagonal.png');
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-mode: alpha;
  mask-mode: alpha;
}


.nb-icon-page-pattern {
  display: block;
  width: 1.15rem;
  height: 1.15rem;
  flex-shrink: 0;
  background-color: currentColor;
  -webkit-mask-image: url('../images/notebook-designer/icon-page-pattern-lines.png');
  mask-image: url('../images/notebook-designer/icon-page-pattern-lines.png');
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-mode: alpha;
  mask-mode: alpha;
}


.nb-icon-inner {
  display: block;
  width: 1.15rem;
  height: 1.15rem;
  flex-shrink: 0;
  background-color: currentColor;
  -webkit-mask-image: url('../images/notebook-designer/icon-inner-spread.png');
  mask-image: url('../images/notebook-designer/icon-inner-spread.png');
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-mode: alpha;
  mask-mode: alpha;
}


.nb-icon-cover {
  display: block;
  width: 1.35rem;
  height: 1.35rem;
  flex-shrink: 0;
  background-color: currentColor;
  -webkit-mask-image: url('../images/notebook-designer/icon-cover-style.png');
  mask-image: url('../images/notebook-designer/icon-cover-style.png');
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-mode: alpha;
  mask-mode: alpha;
}



.nb-acc.is-open .nb-acc__icon {
  background: #b8956e;
  color: #fff8f0;
  box-shadow: 0 0 0 1px rgba(122, 86, 54, 0.25);
}


.nb-acc__text {
  display: flex;
  flex-direction: column;
  gap: 0.12rem;
  min-width: 0;
}

.nb-acc__title {
  font-size: var(--nb-type-section);
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.3;
  color: var(--nb-acc-ink);
}

.nb-acc.is-open .nb-acc__title {
  color: #2a2018;
}

.nb-acc__summary {
  min-width: 0;
  font-size: var(--nb-type-caption);
  font-weight: 400;
  line-height: 1.35;
  color: var(--nb-acc-ink-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.nb-acc.is-open .nb-acc__summary {
  color: #6a5440;
}

.nb-acc__trail {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.1rem;
  flex-shrink: 0;
}

.nb-acc__dot {
  display: none;
  width: 0.48rem;
  height: 0.48rem;
  border-radius: 50%;
  background: var(--nb-acc-hi-brown);
  box-shadow: 0 0 0 3px rgba(166, 124, 82, 0.2);
}

.nb-acc__chev {
  display: block;
  width: 0.42rem;
  height: 0.42rem;
  border-right: 2px solid rgba(61, 50, 42, 0.45);
  border-bottom: 2px solid rgba(61, 50, 42, 0.45);
  transform: rotate(-45deg);
  margin-right: 0.15rem;
  transition: opacity 0.12s ease, border-color 0.16s ease;
}

.nb-acc.is-open .nb-acc__chev {
  display: none;
}

.nb-acc.is-open .nb-acc__dot {
  display: block;
}

.nb-acc-backdrop {
  position: fixed;
  inset: 0;
  z-index: 10040;
  background: rgba(28, 25, 23, 0.38);
}

.nb-acc__panel {
  position: fixed;
  z-index: 10050;
  display: flex;
  flex-direction: column;
  width: min(22rem, calc(100vw - 1.5rem));
  max-height: min(78vh, 36rem);
  border-radius: 14px;
  background: #fff;
  border: 1px solid rgba(28, 25, 23, 0.1);
  box-shadow: 0 18px 48px rgba(28, 25, 23, 0.22);
  overflow: hidden;
}

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

.nb-acc__panel-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex: 0 0 auto;
  padding: 0.7rem 0.85rem;
  background: var(--nb-frame-head-bg);
  border-bottom: 1px solid var(--nb-frame-head-divider);
}

.nb-acc__panel-title {
  font-size: var(--nb-type-section);
  font-weight: 600;
  color: var(--nb-type-section-ink);
}

.nb-acc__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--nb-ink-muted);
  font-size: 1.35rem;
  line-height: 1;
  cursor: pointer;
}

.nb-acc__close:hover,
.nb-acc__close:focus-visible {
  background: rgba(28, 25, 23, 0.06);
  color: var(--nb-ink);
  outline: none;
}

.nb-acc__panel-body {
  padding: 0.9rem 0.95rem 0.85rem;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  flex: 1 1 auto;
  min-height: 0;
  scrollbar-width: thin;
  scrollbar-color: rgba(28, 25, 23, 0.35) transparent;
}

.nb-acc__panel-body::-webkit-scrollbar {
  width: 7px;
}

.nb-acc__panel-body::-webkit-scrollbar-thumb {
  background: rgba(28, 25, 23, 0.32);
  border-radius: 6px;
}

.nb-acc__panel-body .nb-inline-label {
  display: block;
  margin-top: 0.85rem;
  margin-bottom: 0.45rem;
}

.nb-acc__panel-body .nb-cover-texture-label {
  margin-top: 1rem;
}

.nb-acc__footer {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 0.5rem;
  flex: 0 0 auto;
  padding: 0.65rem 0.95rem 0.8rem;
  border-top: 1px solid rgba(28, 25, 23, 0.08);
  background: #faf9f7;
}

.nb-acc__ok {
  min-width: 5.5rem;
  min-height: 2.35rem;
  margin: 0;
  padding: 0.45rem 1.15rem;
  border: 1px solid rgba(28, 25, 23, 0.16);
  border-radius: 8px;
  background: #2c241e;
  color: #f7f3ec;
  font-size: var(--nb-type-control);
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(28, 25, 23, 0.12);
  transition: background 0.15s ease, border-color 0.15s ease;
}

.nb-acc__ok:hover,
.nb-acc__ok:focus-visible {
  background: #3d322a;
  border-color: rgba(28, 25, 23, 0.28);
  outline: none;
}

/* เธกเธทเธญเธ–เธทเธญ: Setup เน€เธ›เน‡เธ™เน„เธญเธ„เธญเธ™เธ‚เน‰เธฒเธ‡เธžเธฃเธตเธงเธดเธง + popup เธฅเนˆเธฒเธ‡เนƒเธ™เธˆเธญ */
.nb-setup-rail {
  display: none;
}

/* tip เธฅเธญเธขเธšเธ™ body เธชเธณเธซเธฃเธฑเธšเธกเธทเธญเธ–เธทเธญ โ€” เธญเธขเธนเนˆเน€เธซเธ™เธทเธญ backdrop */
.nb-setup-rail-float-tip {
  position: fixed;
  z-index: 10060;
  margin: 0;
  padding: 0.28rem 0.55rem;
  border-radius: 6px;
  background: #292524;
  color: #fafaf9;
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.25;
  white-space: nowrap;
  box-shadow: 0 4px 14px rgba(28, 25, 23, 0.22);
  pointer-events: none;
  transform: translateY(-50%) translateX(-2px);
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.14s ease,
    visibility 0.14s ease,
    transform 0.14s ease;
}

.nb-setup-rail-float-tip.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(-50%) translateX(0);
}

.nb-setup-rail-float-tip.is-flip {
  transform: translateY(-50%) translateX(2px);
}

.nb-setup-rail-float-tip.is-flip.is-visible {
  transform: translateY(-50%) translateX(0);
}

.nb-setup-rail-float-tip::before {
  content: '';
  position: absolute;
  right: 100%;
  top: 50%;
  transform: translateY(-50%);
  border: 5px solid transparent;
  border-right-color: #292524;
}

.nb-setup-rail-float-tip.is-flip::before {
  right: auto;
  left: 100%;
  border-right-color: transparent;
  border-left-color: #292524;
}

.nb-setup-rail-float-tip.is-placement-top {
  transform: translate(-50%, calc(-100% - 2px));
}

.nb-setup-rail-float-tip.is-placement-top.is-visible {
  transform: translate(-50%, -100%);
}

.nb-setup-rail-float-tip.is-placement-top::before {
  right: auto;
  left: 50%;
  top: 100%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: #292524;
  border-right-color: transparent;
}

.nb-setup-rail-float-tip.is-placement-top.is-placement-top-below {
  transform: translate(-50%, 2px);
}

.nb-setup-rail-float-tip.is-placement-top.is-placement-top-below.is-visible {
  transform: translate(-50%, 0);
}

.nb-setup-rail-float-tip.is-placement-top.is-placement-top-below::before {
  top: auto;
  bottom: 100%;
  border-top-color: transparent;
  border-bottom-color: #292524;
}

.nb-preview-stage-row {
  display: block;
  width: 100%;
}

/* เธกเธทเธญเธ–เธทเธญ + iPad: เนเธ–เธš Setup เธ‹เน‰เธฒเธขเธ‚เน‰เธฒเธ‡เธžเธฃเธตเธงเธดเธง โ€” เธ‹เนˆเธญเธ™เธ„เธญเธฅเธฑเธกเธ™เนŒ specs */
@media (max-width: 1199.98px) {
  /* เธ”เธถเธ‡ Setup เธญเธญเธเธˆเธฒเธ flow โ€” เน€เธซเธฅเธทเธญเนเธ„เนˆ panel/backdrop
     z-index เธชเธนเธ‡เน€เธžเธทเนˆเธญเนƒเธซเน‰ fixed panel เน„เธกเนˆเธ–เธนเธ preview เธšเธฑเธ‡ (stacking context) */
  .nb-column--specs {
    position: absolute;
    left: 0;
    top: 0;
    width: 0;
    height: 0;
    margin: 0;
    padding: 0;
    overflow: visible;
    pointer-events: none;
    z-index: 1100;
  }

  .nb-frame--specs {
    border: none;
    box-shadow: none;
    background: transparent;
    overflow: visible;
  }

  .nb-frame--specs > .nb-frame__head,
  .nb-frame--specs .nb-acc__head,
  .nb-frame--specs .nb-production-disclaimer,
  .nb-frame--specs .nb-acc-list {
    border: none;
    box-shadow: none;
  }

  .nb-frame--specs > .nb-frame__head,
  .nb-frame--specs .nb-acc__head,
  .nb-frame--specs .nb-production-disclaimer {
    display: none !important;
  }

  .nb-frame--specs .nb-frame__body {
    padding: 0;
    background: transparent;
  }

  .nb-acc-list {
    overflow: visible;
    margin: 0;
    padding: 0;
  }

  .nb-frame--specs .nb-acc {
    margin: 0;
    padding: 0;
    border: none;
    background: transparent;
    box-shadow: none;
  }

  .nb-acc-backdrop,
  .nb-acc__panel {
    pointer-events: auto;
  }

  .nb-preview-stage-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 0.45rem;
    width: 100%;
  }

  .nb-setup-rail {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.22rem;
    padding: 0.05rem 0;
    z-index: 2;
  }

  .nb-setup-rail__btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    margin: 0;
    padding: 0;
    border: 1px solid rgba(61, 50, 42, 0.22);
    border-radius: 10px;
    background: linear-gradient(180deg, #f6f0e9 0%, #ebe4db 100%);
    color: #5c4636;
    box-shadow: 0 1px 3px rgba(28, 25, 23, 0.08);
    cursor: pointer;
    transition:
      background 0.15s ease,
      border-color 0.15s ease,
      color 0.15s ease,
      box-shadow 0.15s ease;
  }

  .nb-setup-rail__btn i,
  .nb-setup-rail__btn .nb-icon-closure {
    font-size: 0.95rem;
  }

  .nb-setup-rail__btn .nb-icon-closure,
  .nb-setup-rail__btn .nb-icon-texture,
  .nb-setup-rail__btn .nb-icon-page-pattern,
  .nb-setup-rail__btn .nb-icon-inner {
    display: block;
    width: 1.22em;
    height: 1.22em;
    flex-shrink: 0;
  }

  .nb-setup-rail__btn .nb-icon-cover {
    display: block;
    width: 1.4em;
    height: 1.4em;
    flex-shrink: 0;
  }

  .nb-setup-rail__btn:hover,
  .nb-setup-rail__btn:focus-visible {
    outline: none;
    background: linear-gradient(180deg, #fff8f0 0%, #e4d9cc 100%);
    border-color: rgba(166, 124, 82, 0.55);
    color: #3d322a;
  }

  .nb-setup-rail__btn.is-active {
    background: linear-gradient(180deg, #c9a07a 0%, #a67c52 100%);
    border-color: #7a5636;
    color: #fff8f0;
    box-shadow: 0 2px 8px rgba(122, 86, 54, 0.28);
  }

  .nb-setup-rail__tip {
    position: absolute;
    left: calc(100% + 8px);
    top: 50%;
    transform: translateY(-50%) translateX(-2px);
    padding: 0.28rem 0.55rem;
    border-radius: 6px;
    background: #292524;
    color: #fafaf9;
    font-size: 0.72rem;
    font-weight: 500;
    line-height: 1.25;
    white-space: nowrap;
    box-shadow: 0 4px 14px rgba(28, 25, 23, 0.18);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    z-index: 8;
    transition:
      opacity 0.15s ease,
      visibility 0.15s ease,
      transform 0.15s ease;
  }

  .nb-setup-rail__tip::before {
    content: '';
    position: absolute;
    right: 100%;
    top: 50%;
    transform: translateY(-50%);
    border: 5px solid transparent;
    border-right-color: #292524;
  }

  /* popup เน€เธฅเน‡เธเธฅเธเธงเนˆเธฒเธˆเธญ โ€” header + body เน€เธฅเธทเนˆเธญเธ™เน„เธ”เน‰ + footer OK เธ•เธดเธ”เธฅเนˆเธฒเธ‡เน€เธชเธกเธญ */
  .nb-acc__panel {
    left: 0.7rem !important;
    right: 0.7rem !important;
    bottom: calc(0.7rem + env(safe-area-inset-bottom, 0px)) !important;
    top: auto !important;
    width: auto !important;
    max-width: none;
    height: auto;
    /* กันที่ว่างเหนือแผงไว้ให้เห็นสมุดทั้งเล่มเหมือนชีทจานสี */
    --nb-sheet-preview-reserve: 250px;
    max-height: min(
      62vh,
      calc(100vh - var(--nb-sheet-preview-reserve) - 1.4rem - env(safe-area-inset-bottom, 0px))
    );
    border-radius: 16px;
    /* พื้นหลังไม่หรี่แล้ว ขอบบางจึงกลืนกับพื้นครีมของหน้า — ต้องหนาและเงาแรงขึ้น */
    border: 1.5px solid rgba(28, 25, 23, 0.42);
    padding-bottom: 0;
    box-shadow: 0 18px 38px rgba(28, 25, 23, 0.32);
    display: flex !important;
    flex-direction: column;
    pointer-events: auto;
  }

  @supports (height: 100dvh) {
    .nb-acc__panel {
      max-height: min(
        62dvh,
        calc(100dvh - var(--nb-sheet-preview-reserve) - 1.4rem - env(safe-area-inset-bottom, 0px))
      );
    }
  }

  .nb-acc-backdrop {
    pointer-events: auto;
  }

  .nb-acc__panel-body {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
    overflow-y: auto;
    touch-action: pan-y;
  }

  .nb-acc__footer {
    flex: 0 0 auto;
    position: relative;
    z-index: 2;
    box-shadow: 0 -4px 12px rgba(28, 25, 23, 0.06);
  }

  /* เธขเนˆเธญ thumbnail เนƒเธ™ popup เธฅเธ”เธ„เธงเธฒเธกเธชเธนเธ‡เน€เธ™เธทเน‰เธญเธซเธฒ */
  .nb-acc__panel .nb-pattern-pick__thumb {
    aspect-ratio: 5 / 4;
    max-height: 4.75rem;
  }

  .nb-acc__panel .nb-pattern-pick,
  .nb-acc__panel .nb-size-btns button,
  .nb-acc__panel .nb-btn-group button,
  .nb-acc__panel [data-cover-style],
  .nb-acc__panel [data-closure],
  .nb-acc__panel [data-ribbon],
  .nb-acc__panel [data-pen-loop],
  .nb-acc__panel [data-inner] {
    position: relative;
    z-index: 1;
    pointer-events: auto;
    touch-action: manipulation;
  }

  html.nb-acc-open .to-top {
    visibility: hidden !important;
    pointer-events: none !important;
  }
}

/* iPad: เธ›เธธเนˆเธก rail เนƒเธซเธเนˆเธ‚เธถเน‰เธ™เน€เธฅเน‡เธเธ™เน‰เธญเธข + เธˆเธฑเธ”เธšเธ™เนƒเธซเธเนˆเนเธ–เธšเน„เธกเนˆเธเธดเธ™เธ„เธงเธฒเธกเธชเธนเธ‡เน€เธเธดเธ™ */
@media (min-width: 768px) and (max-width: 1199.98px) {
  .nb-preview-stage-row {
    align-items: start;
    gap: 0.55rem;
  }

  .nb-setup-rail {
    gap: 0.28rem;
    padding-top: 0.15rem;
  }

  .nb-setup-rail__btn {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 11px;
  }

  .nb-setup-rail__btn i,
  .nb-setup-rail__btn .nb-icon-closure {
    font-size: 1rem;
  }

  .nb-acc__panel {
    left: 50% !important;
    right: auto !important;
    width: min(26rem, calc(100vw - 1.4rem)) !important;
    max-width: calc(100vw - 1.4rem);
    transform: translateX(-50%);
  }
}

/* เนเธ—เน‡เธšเน€เธฅเน‡เธ•เธเธงเน‰เธฒเธ‡ 992โ€“1199: เธญเธขเนˆเธฒเนƒเธŠเน‰ grid specs|studio โ€” rail เธญเธขเธนเนˆเนƒเธ™เธžเธฃเธตเธงเธดเธงเนเธฅเน‰เธง */
@media (min-width: 992px) and (max-width: 1199.98px) {
  .nb-layout {
    display: flex;
    flex-direction: column;
    gap: var(--nb-layout-gap);
    align-items: stretch;
  }

  .nb-column--studio,
  .nb-column--specs,
  .nb-layout > .nb-frame--saved {
    grid-area: unset;
  }

  .nb-column--studio {
    order: 1;
    width: 100%;
  }

  .nb-layout > .nb-frame--saved {
    order: 2;
    grid-column: unset;
    width: 100%;
  }
}

@media (max-width: 1199.98px) and (hover: hover) {
  .nb-setup-rail__btn:hover .nb-setup-rail__tip {
    opacity: 1;
    visibility: visible;
    transform: translateY(-50%) translateX(0);
  }
}

@media (max-width: 1199.98px) {
  .nb-setup-rail__btn:focus-visible .nb-setup-rail__tip,
  /* เธกเธทเธญเธ–เธทเธญ/เธ—เธฑเธŠ: เน„เธกเนˆเธกเธต hover โ€” เน‚เธŠเธงเนŒเธ•เธญเธ™เธเธ”เธ„เน‰เธฒเธ‡ + เธ•เธญเธ™เน€เธ›เธดเธ”เนเธœเธ‡ */
  .nb-setup-rail__btn:active .nb-setup-rail__tip,
  .nb-setup-rail__btn.is-active .nb-setup-rail__tip {
    opacity: 1;
    visibility: visible;
    transform: translateY(-50%) translateX(0);
  }
}

/* เธกเธทเธญเธ–เธทเธญ + iPad: เธ›เธธเนˆเธกเธˆเธฒเธ™เธชเธตเธกเธธเธกเธžเธฃเธตเธงเธดเธง โ†’ bottom sheet */
@media (max-width: 1199.98px) {
  .nb-studio-grid {
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
  }

  .nb-studio-stack {
    display: block;
    width: 100%;
    order: -1;
  }

  .nb-colors-stack-home {
    order: 0;
    width: 100%;
  }

  .nb-colors-fab-row {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    width: 100%;
    margin: 0.2rem 0 0;
    padding: 0 0.05rem;
    overflow: visible;
  }

  /* เธกเธทเธญเธ–เธทเธญ/iPad: เธ•เธฑเธ”เธŠเนˆเธญเธ‡เธงเนˆเธฒเธ‡เนƒเธซเธเนˆเธฃเธฐเธซเธงเนˆเธฒเธ‡เธžเธฃเธตเธงเธดเธงเธเธฑเธšเธ‚เน‰เธญเธ„เธงเธฒเธกเธ‚เธ™เธฒเธ”เน€เธฅเนˆเธก */
  .nb-frame--preview .nb-preview-footer,
  .nb-frame--preview:has(#nb-notebook-main.nb-no-ribbon) .nb-preview-footer {
    margin-top: 0.45rem;
    padding-top: 0;
  }

  .nb-frame--preview .nb-paper-hint {
    margin-top: 0;
  }

  .nb-frame--preview .nb-preview-footer .nb-preview-actions--bottom {
    margin-top: 0.55rem;
    padding-top: 0.45rem;
  }

  .nb-colors-fab {
    position: relative;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.15rem;
    height: 2.15rem;
    min-width: 2.15rem;
    margin: 0;
    padding: 0;
    overflow: visible;
    border: none;
    border-radius: 50%;
    background: transparent;
    box-shadow: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }

  .nb-colors-fab__disk {
    display: block;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: 50%;
    box-shadow: 0 2px 6px rgba(28, 25, 23, 0.22), 0 1px 2px rgba(28, 25, 23, 0.12);
    transition: box-shadow 0.15s ease;
  }

  .nb-colors-fab__icon {
    display: block;
    width: 112%;
    height: 112%;
    margin: -6%;
    object-fit: cover;
    border-radius: 50%;
    pointer-events: none;
    user-select: none;
  }

  /* tip เธญเธขเธนเนˆเธ‹เน‰เธฒเธขเธˆเธฒเธ™เธชเธต (rail tip เธญเธขเธนเนˆเธ‚เธงเธฒเน„เธญเธ„เธญเธ™) */
  .nb-colors-fab__tip {
    position: absolute;
    right: calc(100% + 8px);
    left: auto;
    top: 50%;
    transform: translateY(-50%) translateX(2px);
    padding: 0.28rem 0.55rem;
    border-radius: 6px;
    background: #292524;
    color: #fafaf9;
    font-size: 0.72rem;
    font-weight: 500;
    line-height: 1.25;
    white-space: nowrap;
    box-shadow: 0 4px 14px rgba(28, 25, 23, 0.18);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    z-index: 8;
    transition:
      opacity 0.15s ease,
      visibility 0.15s ease,
      transform 0.15s ease;
  }

  .nb-colors-fab__tip::before {
    content: '';
    position: absolute;
    left: 100%;
    top: 50%;
    transform: translateY(-50%);
    border: 5px solid transparent;
    border-left-color: #292524;
  }

  .nb-colors-fab:hover .nb-colors-fab__disk,
  .nb-colors-fab:focus-visible .nb-colors-fab__disk {
    box-shadow: 0 3px 10px rgba(28, 25, 23, 0.28), 0 1px 3px rgba(28, 25, 23, 0.14);
  }

  .nb-colors-fab:hover,
  .nb-colors-fab:focus-visible {
    outline: none;
  }

  .nb-colors-fab:hover .nb-colors-fab__tip,
  .nb-colors-fab:focus-visible .nb-colors-fab__tip {
    opacity: 1;
    visibility: visible;
    transform: translateY(-50%) translateX(0);
  }

  .nb-colors-fab.is-active .nb-colors-fab__disk,
  html.nb-colors-sheet-open .nb-colors-fab .nb-colors-fab__disk {
    box-shadow: 0 0 0 2px rgba(61, 50, 42, 0.28), 0 3px 10px rgba(28, 25, 23, 0.24);
  }

  .nb-colors-sheet-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 10040;
    background: rgba(28, 25, 23, 0.38);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.2s ease, visibility 0.2s ease;
  }

  html.nb-colors-sheet-open .nb-colors-sheet-backdrop {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  .nb-colors-stack.nb-colors-stack--sheet {
    --nb-colors-sheet-inset-x: max(0.7rem, env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px));
    --nb-colors-sheet-inset-b: max(0.7rem, env(safe-area-inset-bottom, 0px));
    /* กันที่ว่างเหนือชีทไว้ให้เห็นสมุดทั้งเล่ม — วัดจริงบนมือถือได้สูง ~217px */
    --nb-sheet-preview-reserve: 250px;
    position: fixed;
    left: 50%;
    right: auto;
    bottom: var(--nb-colors-sheet-inset-b);
    z-index: 10050;
    display: flex;
    flex-direction: column;
    gap: 0;
    box-sizing: border-box;
    width: min(24.5rem, calc(100vw - (2 * var(--nb-colors-sheet-inset-x))));
    max-width: calc(100vw - (2 * var(--nb-colors-sheet-inset-x)));
    max-height: min(
      70vh,
      calc(100vh - var(--nb-sheet-preview-reserve) - var(--nb-colors-sheet-inset-b))
    );
    margin: 0;
    padding: 0;
    /* พื้นหลังไม่หรี่แล้ว ขอบบางจึงกลืนกับพื้นครีมของหน้า — ต้องหนาและเงาแรงขึ้น */
    border: 1.5px solid rgba(28, 25, 23, 0.42);
    border-radius: 16px;
    background: #f7f3ee;
    box-shadow: 0 18px 38px rgba(28, 25, 23, 0.32);
    transform: translate3d(-50%, calc(100% + 1.5rem), 0);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition:
      transform 0.22s ease,
      opacity 0.2s ease,
      visibility 0.2s ease;
    overflow: hidden;
  }

  @supports (height: 100dvh) {
    .nb-colors-stack.nb-colors-stack--sheet {
      max-height: min(
        70dvh,
        calc(100dvh - var(--nb-sheet-preview-reserve) - var(--nb-colors-sheet-inset-b))
      );
    }
  }

  html.nb-colors-sheet-open .nb-colors-stack.nb-colors-stack--sheet {
    transform: translate3d(-50%, 0, 0);
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  .nb-colors-stack--sheet .nb-colors-sheet-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex: 0 0 auto;
    padding: 0.72rem 0.85rem;
    border-bottom: 1px solid rgba(28, 25, 23, 0.08);
    background: #efe8df;
  }

  .nb-colors-sheet-bar__title {
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--nb-ink, #1c1917);
    letter-spacing: 0;
  }

  .nb-colors-sheet-bar__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    margin: 0;
    padding: 0;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: var(--nb-ink-soft, #44403c);
    font-size: 1.35rem;
    line-height: 1;
    cursor: pointer;
  }

  .nb-colors-sheet-bar__close:hover,
  .nb-colors-sheet-bar__close:focus-visible {
    background: rgba(28, 25, 23, 0.06);
    outline: none;
  }

  .nb-colors-stack--sheet .nb-colors-sheet-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding: 0.65rem 0.7rem 0.35rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
  }

  /*
   * .nb-frame ตั้ง overflow: hidden ไว้เพื่อคุมมุมโค้ง
   * ถ้าปล่อยให้มันย่อได้ตามค่า flex เริ่มต้น พอชีทเตี้ยกว่าเนื้อหา
   * กล่องจะถูกบีบแล้ว "กิน" ส่วนที่เกินหายไปเงียบ ๆ — เคยทำแถวชิ้นส่วน
   * (ริบบิ้น / หูปากกา) หายทั้งแถว และเลื่อนหาไม่ได้ เพราะการตัดเกิดในลูก
   * ตัวชีทจึงไม่รู้ว่ามีของล้น (scrollHeight เท่ากับ clientHeight)
   * ห้ามย่อ แล้วให้ .nb-colors-sheet-body เป็นตัวเลื่อนแทน
   */
  .nb-colors-stack--sheet .nb-colors-sheet-body > * {
    flex: 0 0 auto;
  }

  /*
   * จอเตี้ยยังต้องเลื่อนในชีทอยู่ดี เลยจัดให้ของสำคัญอยู่บนสุด
   * ต้องรู้ก่อนว่ากำลังทาสีชิ้นไหน ไม่งั้นชาร์ตสีก็ไม่มีความหมาย
   * ที่ยอมให้ต้องเลื่อนหาได้คือแถวหลอดดูดสี / ค่าฮ็กซ์ ซึ่งไม่ใช่ทางหลัก
   */
  .nb-colors-stack--sheet .nb-colors-sheet-body > .nb-frame--color-parts {
    order: -1;
  }

  /*
   * หัวกล่องซ้ำกับที่มีอยู่แล้วในชีท: แถบบนบอก "เลือกสีวัสดุ"
   * และป้ายเหนือแถวชิ้นส่วนบอกชิ้นที่กำลังเลือกอยู่
   * ตัดออกได้ 41px ซึ่งพอให้แถวชิ้นส่วนครบสองแถวโชว์ได้ในจอมือถือ
   */
  .nb-colors-stack--sheet .nb-frame--colors > .nb-frame__head,
  .nb-colors-stack--sheet .nb-frame--color-parts > .nb-frame__head {
    display: none;
  }

  .nb-colors-stack--sheet .nb-frame--colors,
  .nb-colors-stack--sheet .nb-frame--color-parts {
    border-radius: 12px;
    overflow: hidden;
    max-width: 100%;
  }

  .nb-colors-stack--sheet .nb-color-tool-section__spectrum,
  .nb-colors-stack--sheet .nb-spectrum-img-scroll {
    max-width: 100%;
  }

  .nb-colors-stack--sheet .nb-spectrum-img,
  .nb-colors-stack--sheet .nb-color-tool-section .nb-spectrum-img {
    height: 92px;
    max-width: none;
  }

  .nb-colors-stack--sheet .nb-color-chips-grid {
    max-width: 100%;
  }

  .nb-colors-stack--sheet .nb-colors-sheet-footer {
    display: flex;
    justify-content: flex-end;
    flex: 0 0 auto;
    padding: 0.55rem 0.75rem;
    border-top: 1px solid rgba(28, 25, 23, 0.08);
    background: #f7f3ee;
    box-shadow: 0 -4px 12px rgba(28, 25, 23, 0.06);
  }

  /* เธฅเน‡เธญเธเธชเธเธญเธฅเธฅเนŒเธ”เน‰เธงเธข position:fixed เนƒเธ™ JS โ€” เธเธฑเธ™ iOS เธเธฃเธฐเน‚เธ”เธ”เธ•เธณเนเธซเธ™เนˆเธ‡เน€เธกเธทเนˆเธญเธ›เธดเธ”เนเธœเธ‡ */
  html.nb-colors-sheet-open {
    overflow: hidden;
  }

  html.nb-colors-sheet-open body {
    overflow: hidden;
    overscroll-behavior: none;
    touch-action: none;
  }

  html.nb-colors-sheet-open .nb-colors-stack--sheet,
  html.nb-colors-sheet-open .nb-colors-stack--sheet * {
    touch-action: manipulation;
  }

  html.nb-colors-sheet-open .nb-colors-sheet-body {
    touch-action: pan-y;
  }

  /*
   * ชาร์ตสีต้องกินท่าลากไว้เอง (เลื่อนนิ้วเพื่อเลือกสี)
   * ต้องยกเว้นจากกฎ * ด้านบน ไม่งั้นได้ manipulation แล้วนิ้วไปเลื่อนชีทแทน
   */
  html.nb-colors-sheet-open .nb-colors-stack--sheet .nb-spectrum-img {
    touch-action: none;
  }

  html.nb-colors-sheet-open .to-top {
    visibility: hidden !important;
    pointer-events: none !important;
  }

  /*
   * ซ่อน navbar ตอนออกแบบ: เปิดแผง/จานสี หรือกรอบสมุดเต็มจอ
   * เลื่อนสุดบนหรือสุดล่างค่อยโชว์กลับ — JS ใส่ .nb-nav-studio-hide
   */
  .navbar.fixed-top {
    transition: opacity 0.18s ease, visibility 0.18s ease;
  }

  html.nb-acc-open .navbar.fixed-top,
  html.nb-colors-sheet-open .navbar.fixed-top,
  html.nb-nav-studio-hide .navbar.fixed-top {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }

  /*
   * ไม่หรี่พื้นหลังแล้ว — ต้องเห็นสีจริงบนสมุดตอนเลือก
   * แต่ยังต้องคงตัว backdrop ไว้ เพราะโค้ดผูก click ปิดแผงไว้ที่มัน
   */
  .nb-acc-backdrop,
  .nb-colors-sheet-backdrop {
    background: transparent;
  }

  /*
   * ย่อสมุดเฉพาะตอนแถบว่างเหนือแผงเตี้ยกว่าตัวเล่ม — JS ใส่คลาสและค่าให้
   * ต้องย่อรอบจุดกลาง เพราะ JS เลื่อนจุดกลางของเล่มไปไว้กลางแถบว่างไว้แล้ว
   */
  html.nb-preview-fit .nb-preview-stage .nb-notebook-wrap {
    transform: scale(var(--nb-preview-fit-scale, 1));
    transform-origin: center center;
  }

  .nb-preview-stage .nb-notebook-wrap {
    transition: transform 0.2s ease;
  }
}

@media (max-width: 1199.98px) {
  /* เน€เธงเน‰เธ™เธ—เธตเนˆเน€เธ—เนˆเธฒเธ„เธงเธฒเธกเธเธงเน‰เธฒเธ‡ rail เธ‹เน‰เธฒเธข เนƒเธซเน‰เธ›เธธเนˆเธกเธชเธตเธŠเธดเธ”เธ‚เธญเธšเธžเธฃเธตเธงเธดเธง */
  .nb-colors-fab-row {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-top: 0.2rem;
    padding-left: calc(2rem + 0.45rem);
  }
}

@media (min-width: 768px) and (max-width: 1199.98px) {
  .nb-colors-fab-row {
    padding-left: calc(2.25rem + 0.55rem);
  }

  /*
   * แท็บเล็ตมีที่เหลือด้านข้างเยอะ ไม่ต้องซ้อนกล่องเป็นตั้งกลางจอทับสมุด
   * กระจายสองกล่องไปชิดขอบซ้าย–ขวา แล้วเปิดกลางจอทิ้งไว้ให้เห็นเล่ม
   * ตัวชีทจึงต้องใส เหลือกรอบขาวแค่ที่ .nb-frame ของแต่ละกล่องเอง
   */
  .nb-colors-stack.nb-colors-stack--sheet {
    width: calc(100vw - (2 * var(--nb-colors-sheet-inset-x)));
    max-width: none;
    background: transparent;
    border: 0;
    box-shadow: none;
    overflow: visible;
  }

  /* ชื่อแถบลอยบนพื้นใสอ่านไม่ออก และปิดชีทได้ที่ OK หรือแตะนอกกรอบอยู่แล้ว */
  .nb-colors-stack--sheet .nb-colors-sheet-bar {
    display: none;
  }

  /*
   * สองกล่องลอยแยกคนละมุมจออ่านไม่ออกว่าเป็นเครื่องมือชุดเดียวกัน
   * จึงครอบด้วยกรอบเดียวเต็มความกว้าง ให้กล่องซ้าย–ขวาเป็นของข้างในกรอบนี้
   * ตัวสมุดถูก JS ดันไปอยู่เหนือแถบนี้อยู่แล้ว กรอบทึบจึงไม่บังเล่ม
   */
  .nb-colors-stack--sheet .nb-colors-sheet-body {
    flex-direction: row;
    /* กล่องซ้ายเตี้ยกว่า ถ้า stretch จะได้พื้นขาวโหว่ก้อนใหญ่ — จัดกลางแทน */
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.75rem;
    border: 1.5px solid rgba(28, 25, 23, 0.42);
    border-radius: 16px;
    background: var(--nb-frame-head-bg);
    box-shadow: 0 18px 38px rgba(28, 25, 23, 0.32);
  }

  .nb-colors-stack--sheet .nb-colors-sheet-body > .nb-frame--color-parts {
    width: min(22rem, 38%);
  }

  .nb-colors-stack--sheet .nb-colors-sheet-body > .nb-frame--colors {
    width: min(26rem, 52%);
  }

  /* กล่องข้างในเป็นแผ่นขาวเรียบ ๆ ปล่อยให้กรอบครอบเป็นตัวคุมสายตาแทน */
  .nb-colors-stack--sheet .nb-colors-sheet-body > .nb-frame {
    border: 1px solid rgba(28, 25, 23, 0.22);
    background-color: #fff;
    box-shadow: 0 2px 8px rgba(28, 25, 23, 0.1);
  }

  .nb-colors-stack--sheet .nb-colors-sheet-body > .nb-frame > .nb-frame__body {
    padding: 0.55rem;
  }

  /* กรอบทึบอยู่เหนือปุ่มแล้ว ปุ่มจึงไม่ต้องมีแคปซูลรองอีก */
  .nb-colors-stack--sheet .nb-colors-sheet-footer {
    align-self: center;
    justify-content: center;
    margin-top: 0.55rem;
    padding: 0;
    border-top: 0;
    background: transparent;
    box-shadow: none;
  }
}

/*
 * จอกว้างพอ (iPad แนวนอน / แท็บเล็ตใหญ่) ยกปุ่มเข้าไปไว้กลางกรอบ
 * ได้อ่านเป็นแถวเดียว: เลือกชิ้นส่วน | ตกลง | ชาร์ตสี และไม่เหลือช่องโหว่กลางกรอบ
 * absolute อ้างตัว stack ที่ fixed อยู่แล้ว กรอบจึงไม่ต้องเผื่อที่ให้ปุ่ม
 * ต่ำกว่า 992px ช่องกลางแคบกว่าตัวปุ่ม ปล่อยให้อยู่ใต้กรอบตามเดิม
 */
@media (min-width: 992px) and (max-width: 1199.98px) {
  .nb-colors-stack--sheet .nb-colors-sheet-footer {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    align-self: auto;
    margin: 0;
  }
}

@media (max-width: 767.98px) {
  .nb-frame--preview .nb-preview-footer,
  .nb-frame--preview:has(#nb-notebook-main.nb-no-ribbon) .nb-preview-footer {
    margin-top: 0.35rem;
  }
}

@media (min-width: 1200px) {
  .nb-colors-fab-row {
    display: none !important;
  }

  .nb-colors-fab {
    display: none !important;
  }

  .nb-colors-sheet-bar,
  .nb-colors-sheet-footer {
    display: none !important;
  }

  .nb-colors-sheet-backdrop {
    display: none !important;
  }
}

/* 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;
}

/* เธฅเธฒเธขเธงเธฑเธชเธ”เธธ / เธซเธ™เธฑเธ‡ โ€” panel เนเธขเธเธˆเธฒเธเนเธšเธšเธ›เธ */
.nb-cover-texture-label {
  margin-top: 0.85rem;
}

.nb-cover-texture-picker {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem;
  margin-top: 0;
}

@media (min-width: 768px) {
  .nb-cover-texture-picker {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.4rem;
  }
}

.nb-cover-texture-pick {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  padding: 0.45rem 0.35rem 0.5rem;
  border: 1px solid rgba(28, 25, 23, 0.28);
  border-radius: 8px;
  background: #fff;
  color: #44403c;
  box-shadow: 0 1px 2px rgba(28, 25, 23, 0.06);
  cursor: pointer;
  transition:
    border-color 0.15s ease,
    background 0.15s ease,
    box-shadow 0.15s ease;
}

.nb-cover-texture-pick:hover {
  border-color: rgba(28, 25, 23, 0.45);
  background: #f5f5f4;
}

.nb-cover-texture-pick.is-active {
  border-color: #292524;
  background: #f5f5f4;
  box-shadow: 0 0 0 2px rgba(28, 25, 23, 0.1);
  color: #1c1917;
  font-weight: 600;
}

.nb-cover-texture-swatch {
  display: block;
  width: 100%;
  aspect-ratio: 5 / 4;
  max-height: 6.5rem;
  border-radius: 5px;
  border: 1px solid rgba(28, 25, 23, 0.1);
  background-color: #8a908a;
  background-size: 360px 360px;
  background-repeat: repeat;
  background-position: 28% 36%;
}

.nb-cover-texture-swatch--none {
  background-color: #c4c4c4;
  background-image: none;
  background-size: auto;
  filter: none;
}

.nb-cover-texture-swatch--fine-grain,
.nb-cover-texture-swatch--saffiano,
.nb-cover-texture-swatch--smooth {
  filter: contrast(1.28) brightness(1.04) saturate(0.9);
}

.nb-cover-texture-swatch--fine-grain {
  background-image: url('../images/notebook-designer/tex-fine-grain.png?v=313');
  background-size: 420px 420px;
  background-position: 18% 28%;
}

.nb-cover-texture-swatch--saffiano {
  background-image: url('../images/notebook-designer/tex-saffiano.png?v=313');
  background-size: 480px 480px;
  background-position: 42% 34%;
}

.nb-cover-texture-swatch--smooth {
  background-image: url('../images/notebook-designer/tex-smooth.png?v=313');
  background-size: 400px 400px;
  background-position: 50% 50%;
}

@media (max-width: 767.98px) {
  .nb-cover-texture-swatch {
    max-height: 7rem;
  }

  .nb-cover-texture-swatch--fine-grain {
    background-size: 480px 480px;
  }

  .nb-cover-texture-swatch--saffiano {
    background-size: 540px 540px;
  }

  .nb-cover-texture-swatch--smooth {
    background-size: 450px 450px;
  }
}

.nb-cover-texture-name {
  font-size: 0.68rem;
  font-weight: 500;
  line-height: 1.2;
  text-align: center;
}

.nb-cover-texture {
  position: absolute;
  inset: 0;
  z-index: 3;
  border-radius: inherit;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  background-repeat: repeat;
  background-position: center;
  background-size: 520px 520px;
  /*
   * soft-light + เนเธœเธ™เธ—เธตเนˆเน€เธ—เธฒ mid-gray: เธ„เธ‡เธชเธตเธ›เธ
   * (multiply เธ‚เธญเธ‡เน€เธ—เธฒ 128 เธˆเธฐเธ—เธณเนƒเธซเน‰เธชเธตเน€เธ‚เน‰เธกเธ„เธฃเธถเนˆเธ‡ โ€” เน€เธžเธตเน‰เธขเธ™)
   */
  mix-blend-mode: soft-light;
}

.nb-cover-texture[hidden] {
  display: none !important;
}

.nb-notebook[data-cover-texture='fine-grain'] .nb-cover-texture {
  opacity: 0.7; /* ~20% lighter than 0.88 */
  background-size: 520px 520px;
  background-image: url('../images/notebook-designer/tex-fine-grain.png?v=309');
}

.nb-notebook[data-cover-texture='saffiano'] .nb-cover-texture {
  opacity: 0.74; /* ~20% lighter than 0.92 */
  background-size: 640px 640px;
  background-image: url('../images/notebook-designer/tex-saffiano.png?v=309');
}

.nb-notebook[data-cover-texture='smooth'] .nb-cover-texture {
  opacity: 0.86;
  background-size: 560px 560px;
  background-image: url('../images/notebook-designer/tex-smooth.png?v=309');
}

.nb-notebook--mini[data-cover-texture='fine-grain'] .nb-cover-texture {
  background-size: 220px 220px;
}

.nb-notebook--mini[data-cover-texture='saffiano'] .nb-cover-texture {
  background-size: 280px 280px;
}

.nb-notebook--mini[data-cover-texture='smooth'] .nb-cover-texture {
  background-size: 250px 250px;
}

.nb-pattern-picks {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.45rem;
  margin-top: 0.2rem;
}

.nb-pattern-pick {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.4rem;
  width: 100%;
  min-height: 0;
  padding: 0.4rem 0.4rem 0.45rem;
  border: 1px solid var(--nb-border);
  border-radius: 8px;
  background: var(--nb-btn-surface);
  color: var(--nb-ink-soft);
  text-align: left;
  cursor: pointer;
  transition:
    border-color 0.15s ease,
    background 0.15s ease,
    color 0.15s ease,
    box-shadow 0.15s ease;
}

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

.nb-pattern-pick.is-active {
  border-color: var(--nb-select-frame);
  background: var(--nb-select-fill);
  color: var(--nb-ink);
  box-shadow: 0 0 0 1px rgba(74, 53, 40, 0.12);
}

.nb-pattern-pick__thumb {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
  border-radius: 5px;
  border: 1px solid rgba(28, 25, 23, 0.1);
  background-color: #f7f4ef;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35);
}

.nb-pattern-pick__thumb--lined {
  background-image: repeating-linear-gradient(
    180deg,
    transparent 0 9px,
    rgba(120, 150, 190, 0.55) 9px 10px
  );
  background-position: 0 6px;
}

.nb-pattern-pick__thumb--dot {
  background-image: radial-gradient(
    rgba(90, 90, 95, 0.45) 1px,
    transparent 1.2px
  );
  background-size: 7px 7px;
  background-position: 3px 3px;
}

.nb-pattern-pick__thumb--grid {
  background-image:
    repeating-linear-gradient(
      90deg,
      transparent 0 8px,
      rgba(90, 90, 95, 0.28) 8px 9px
    ),
    repeating-linear-gradient(
      180deg,
      transparent 0 8px,
      rgba(90, 90, 95, 0.28) 8px 9px
    );
}

.nb-pattern-pick__thumb--blank {
  background-color: #faf8f4;
  background-image: linear-gradient(
    145deg,
    rgba(255, 255, 255, 0.55) 0%,
    transparent 48%
  );
}

.nb-pattern-pick__meta {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  min-width: 0;
}

.nb-pattern-pick__dot {
  flex: 0 0 auto;
  width: 0.85rem;
  height: 0.85rem;
  border-radius: 50%;
  border: 1.5px solid rgba(28, 25, 23, 0.28);
  background: #fff;
  box-shadow: inset 0 0 0 0 transparent;
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease,
    background 0.15s ease;
}

.nb-pattern-pick.is-active .nb-pattern-pick__dot {
  border-color: var(--nb-ink);
  background: var(--nb-ink);
  box-shadow: inset 0 0 0 2px #fff;
}

.nb-pattern-pick__label {
  font-size: var(--nb-type-caption);
  font-weight: 500;
  line-height: 1.25;
  min-width: 0;
}

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

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

.nb-binding-btns > button {
  flex: 1 1 calc(50% - 0.3rem);
  min-width: 7rem;
}

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

.nb-btn-closure {
  display: block;
  width: 100%;
  min-height: 2.35rem;
  padding: 0.45rem 0.55rem;
  font-size: var(--nb-type-control);
  font-weight: 500;
  line-height: 1.25;
  text-align: center;
  border: 1px solid rgba(28, 25, 23, 0.28);
  border-radius: 8px;
  background: #fff;
  color: #44403c;
  box-shadow: 0 1px 2px rgba(28, 25, 23, 0.06);
  cursor: pointer;
  transition:
    border-color 0.15s ease,
    background 0.15s ease,
    color 0.15s ease,
    box-shadow 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%;
  min-height: 2.1rem;
  padding: 0.35rem 0.4rem;
  font-size: var(--nb-type-caption);
  font-weight: 500;
  line-height: 1.25;
  text-align: center;
  border: 1px solid rgba(28, 25, 23, 0.28);
  border-radius: 8px;
  background: #fff;
  color: #44403c;
  box-shadow: 0 1px 2px rgba(28, 25, 23, 0.06);
  cursor: pointer;
  transition:
    border-color 0.15s ease,
    background 0.15s ease,
    color 0.15s ease,
    box-shadow 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: 2.35rem;
  padding: 0.45rem 0.85rem;
  font-size: var(--nb-type-control);
  font-weight: 500;
  line-height: 1.25;
  border: 1px solid rgba(28, 25, 23, 0.28);
  background: #fff;
  color: #44403c;
  border-radius: 8px;
  box-shadow: 0 1px 2px rgba(28, 25, 23, 0.06);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, box-shadow 0.15s, color 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: rgba(28, 25, 23, 0.45);
  background: #f5f5f4;
}

.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 {
  border-color: #292524;
  background: #f5f5f4;
  color: #1c1917;
  font-weight: 600;
  box-shadow: 0 0 0 2px rgba(28, 25, 23, 0.1);
}

.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-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);
}

/* มือถือ/iPad: วงสีลอยหนีนิ้ว (fixed บน body — ไม่ถูก overflow ของชีทตัด) */
.nb-spectrum-loupe.is-elevated,
.nb-spectrum-loupe.is-elevated-below {
  z-index: 10070;
  width: 52px;
  height: 52px;
  border-width: 3px;
  box-shadow:
    0 0 0 1px rgba(28, 25, 23, 0.35),
    0 8px 22px rgba(28, 25, 23, 0.28);
}

.nb-spectrum-loupe.is-elevated {
  transform: translate(-50%, calc(-100% - 2px));
}

.nb-spectrum-loupe.is-elevated-below {
  transform: translate(-50%, 2px);
}

.nb-spectrum-loupe.is-elevated::after,
.nb-spectrum-loupe.is-elevated-below::after {
  content: '';
  position: absolute;
  left: 50%;
  width: 0;
  height: 0;
  border: 7px solid transparent;
  pointer-events: none;
}

.nb-spectrum-loupe.is-elevated::after {
  top: 100%;
  transform: translateX(-50%);
  border-top-color: #fff;
  margin-top: -1px;
}

.nb-spectrum-loupe.is-elevated-below::after {
  bottom: 100%;
  transform: translateX(-50%);
  border-bottom-color: #fff;
  margin-bottom: -1px;
}

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

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

.nb-spectrum-img-scroll.is-picking,
.nb-spectrum-img-scroll.is-picking .nb-spectrum-img {
  touch-action: none;
}

.nb-spectrum-img {
  display: block;
  height: 96px;
  width: auto;
  min-width: 100%;
  max-width: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;
  /* กันเมนูกดค้าง (เซฟ/คัดลอกรูป) บน iOS Safari */
  -webkit-touch-callout: none;
  /*
   * ต้องกำหนดไว้ตั้งแต่ต้น ไม่ใช่ตอน pointerdown
   * เบราว์เซอร์อ่านค่า touch-action ตอนเริ่มแตะ ถ้าใส่ทีหลังจะไม่มีผลกับท่านั้น
   * ผลคือลากนิ้วแล้วหน้าเลื่อนแทนที่จะเลือกสี
   */
  touch-action: 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 {
  position: relative;
  width: 100%;
  /* เธžเธทเน‰เธ™เน€เธฃเธตเธขเธš โ€” เธ–เน‰เธฒเน„เธฅเนˆเน€เธ—เธฒเธšเธ™โ€“เธฅเนˆเธฒเธ‡ เธชเธฑเธ™เน„เธฎเน„เธฅเธ—เนŒเธˆเธฐเธ”เธนเน„เธกเนˆเน€เธ—เนˆเธฒเธ•เธฅเธญเธ”เน€เธชเน‰เธ™ */
  background-color: #e0e0e0;
  background-image: none;
  border: none;
  border-radius: var(--nb-radius-inner);
  padding: 1.75rem 2.25rem 2.75rem;
  min-height: 420px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: visible;
}

@media (min-width: 992px) {
  .nb-preview-stage {
    /* เธŠเนˆเธญเธ‡เน„เธŸเธšเธ™โ€“เธฅเนˆเธฒเธ‡เน€เธ—เนˆเธฒเธเธฑเธ™ โ€” เธˆเธฑเธ”เธเธถเนˆเธ‡เธเธฅเธฒเธ‡เธ—เธฑเน‰เธ‡เธเน‰เธญเธ™เธชเธกเธธเธ”+เธฃเธดเธšเธšเธดเน‰เธ™ */
    padding: 1.5rem 1.35rem;
    min-height: 500px;
  }

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

  /* เธˆเธญเธ‡เธ„เธงเธฒเธกเธชเธนเธ‡เธฃเธดเธšเธšเธดเน‰เธ™ (px เธˆเธฒเธ JS) เนƒเธซเน‰เธเธฃเธญเธšเธ„เธฅเธธเธกเนเธฅเธฐเธŠเนˆเธญเธ‡เน„เธŸเธชเธกเธ”เธธเธฅ */
  /* จองช่องริบบิ้นใต้เล่มเสมอ (แม้ลบริบบิ้น) — ขนาดเล่มไม่กระโดด */
  .nb-preview-stage .nb-notebook-wrap {
    padding-bottom: var(--nb-ribbon-reserve, var(--nb-ribbon-pad, 22%));
  }

  .nb-preview-stage .nb-notebook-wrap::after {
    margin-top: -6px;
  }
}

.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-history-btn--delete:hover:not(:disabled) {
  border-color: rgba(185, 28, 28, 0.45);
  background: #fef2f2;
  color: #991b1b;
}

.nb-cover-replace-input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* เธ•เธฑเธงเธ„เธฑเนˆเธ™เธ‚เน‰เธญเธ„เธงเธฒเธก (|) โ€” เธŠเธฑเธ”เธเธงเนˆเธฒเธˆเธธเธ”เธเธฅเธฒเธ‡ เนƒเธŠเน‰ 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: 28rem;
  margin: 0.4rem auto 0;
  padding-top: 0;
}

.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-top: 0.55rem;
  margin-left: auto;
  margin-right: auto;
  padding-top: 0.4rem;
}

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

.nb-frame--preview:has(#nb-notebook-main.nb-no-ribbon) .nb-preview-footer {
  margin-top: 0.35rem;
}

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

/* เน€เธ”เธชเธเนŒเธ—เน‡เธญเธ›เธเธงเน‰เธฒเธ‡: เน€เธงเน‰เธ™เธฃเธฐเธขเธฐ footer เนƒเธ•เน‰เธžเธฃเธตเธงเธดเธงเน„เธ”เน‰เธกเธฒเธเธ‚เธถเน‰เธ™ */
@media (min-width: 1200px) {
  .nb-frame--preview .nb-preview-footer {
    margin-top: clamp(2.25rem, 6vw, 4rem);
    padding-top: 0.15rem;
  }

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

/* เธกเธทเธญเธ–เธทเธญ/iPad โ€” เธ•เน‰เธญเธ‡เธญเธขเธนเนˆเธซเธฅเธฑเธ‡เธเธŽ footer เธ—เธฑเนˆเธงเน„เธ› เธเธฑเธ™เธ–เธนเธ clamp เน€เธเนˆเธฒเธ—เธฑเธš */
@media (max-width: 1199.98px) {
  .nb-frame--preview .nb-preview-footer,
  .nb-frame--preview:has(#nb-notebook-main.nb-no-ribbon) .nb-preview-footer {
    margin: 0.2rem auto 0 !important;
    padding-top: 0 !important;
  }

  .nb-frame--preview .nb-preview-footer .nb-paper-hint,
  .nb-frame--preview .nb-paper-hint {
    margin-top: 0 !important;
  }

  .nb-colors-fab-row {
    margin-bottom: 0;
  }
}

.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;
}

/* เริ่มต้น: สมุดอยู่กลางกรอบ  คอลัมน์ขวาโผล่เมื่อเลือกแบบหน้า / ใบแทรก */
.nb-preview-visual {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, max-content) minmax(0, 1fr);
  column-gap: 0;
  align-items: stretch;
  align-self: stretch;
  width: 100%;
  max-width: 100%;
  margin: 0;
  overflow: visible;
  transition: column-gap 0.28s ease;
}

.nb-preview-visual:not(.is-offset) .nb-page-side {
  display: none;
}

.nb-preview-visual.is-offset {
  grid-template-columns: minmax(0, 0.55fr) minmax(0, max-content) minmax(6.25rem, 20%);
  /* ช่องนี้ต้องกว้างกว่าหูปากกาที่ยื่นพ้นปก (~11% ของเล่ม) */
  column-gap: 2.75rem;
}

/* คอลัมน์ขวา: ตัวอย่างหน้าที่เลือก + ลิงก์เนื้อในโรงพิมพ์ */
.nb-page-side {
  grid-column: 3;
  justify-self: end;
  align-self: center;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.55rem;
  box-sizing: border-box;
  width: 100%;
  max-width: 8.75rem;
  min-width: 0;
}

/* หน้ากระดาษที่เลือก — ชิดขวากรอบพรีวิว ขนาดตามกรอบ */
.nb-page-previews {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  gap: 0.55rem;
  min-width: 0;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.nb-print-samples {
  position: absolute;
  right: 0.85rem;
  bottom: 0.7rem;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.32rem;
  max-width: min(16rem, calc(100% - 1.4rem));
  text-align: right;
  pointer-events: none;
}

.nb-print-samples a {
  pointer-events: auto;
}

.nb-print-samples__title {
  margin: 0;
  font-family: 'Kanit', sans-serif;
  font-size: 0.68rem;
  font-weight: 400;
  line-height: 1.35;
  color: #5c554e;
}

.nb-print-samples__links {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.3rem;
}

.nb-print-samples__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 1.55rem;
  padding: 0.18rem 0.5rem;
  border: 1px solid rgba(28, 25, 23, 0.18);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.88);
  color: #3d3835;
  font-family: 'Kanit', sans-serif;
  font-size: 0.68rem;
  font-weight: 500;
  line-height: 1.2;
  text-decoration: none;
  box-shadow: 0 1px 3px rgba(28, 25, 23, 0.08);
}

.nb-print-samples__link:hover,
.nb-print-samples__link:focus-visible {
  background: #fff;
  border-color: rgba(28, 25, 23, 0.34);
  color: #1c1917;
  outline: none;
}

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

.nb-print-sample-modal {
  position: fixed;
  inset: 0;
  z-index: 1075;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem;
  box-sizing: border-box;
}

.nb-print-sample-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(28, 25, 23, 0.55);
  animation: nb-modal-fade-in 0.2s ease;
}

.nb-print-sample-modal__dialog {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  width: min(96vw, 72rem);
  height: min(92dvh, 92vh);
  background: #faf8f5;
  border: 1px solid var(--nb-frame-head-divider);
  border-radius: 14px;
  box-shadow: 0 18px 48px rgba(28, 25, 23, 0.28);
  overflow: hidden;
  animation: nb-modal-rise-in 0.24s ease;
}

.nb-print-sample-modal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex: 0 0 auto;
  padding: 0.7rem 0.85rem;
  background: var(--nb-frame-head-bg);
  border-bottom: 1px solid var(--nb-frame-head-divider);
}

.nb-print-sample-modal__title {
  margin: 0;
  min-width: 0;
  font-family: 'Kanit', sans-serif;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--nb-shell-ink);
}

.nb-print-sample-modal__actions {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex: 0 0 auto;
}

.nb-print-sample-modal__ext {
  color: #5c554e;
  font-family: 'Kanit', sans-serif;
  font-size: 0.75rem;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.nb-print-sample-modal__back {
  padding: 0.35rem 0.75rem;
  border: 1px solid #4a4540;
  border-radius: 999px;
  background: #4a4540;
  color: #faf8f5;
  font-family: 'Kanit', sans-serif;
  font-size: 0.78rem;
  font-weight: 500;
  cursor: pointer;
}

.nb-print-sample-modal__close {
  width: 2rem;
  height: 2rem;
  border: 1px solid rgba(92, 85, 78, 0.24);
  border-radius: 8px;
  background: #fff;
  color: #5c554e;
  font-size: 1.35rem;
  line-height: 1;
  cursor: pointer;
}

.nb-print-sample-modal__body {
  flex: 1 1 auto;
  min-height: 0;
  background: #d7d2cb;
}

.nb-print-sample-modal__frame {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  background: #fff;
}

@media (max-width: 576px) {
  .nb-print-sample-modal {
    padding: 0.4rem;
  }

  .nb-print-sample-modal__head {
    flex-wrap: wrap;
  }

  .nb-print-sample-modal__title {
    width: 100%;
    font-size: 0.85rem;
  }
}

.nb-page-preview {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.22rem;
  min-width: 0;
}

.nb-page-preview__sheet {
  display: block;
  width: 100%;
  max-width: none;
  aspect-ratio: 148 / 210;
  border-radius: 3px 8px 8px 3px;
  border: 1px solid rgba(28, 25, 23, 0.16);
  background-color: #f7f4ef;
  box-shadow:
    1px 2px 0 rgba(255, 255, 255, 0.65) inset,
    2px 3px 10px rgba(28, 25, 23, 0.14);
}

.nb-page-preview__label {
  max-width: 100%;
  font-family: 'Kanit', sans-serif;
  font-size: 0.7rem;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 0;
  color: #5c554e;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (min-width: 992px) {
  .nb-preview-visual.is-offset {
    column-gap: 3.15rem;
  }
}

@media (max-width: 1199.98px) {
  .nb-preview-stage .nb-preview-visual {
    width: 100%;
  }

  .nb-preview-visual.is-offset {
    column-gap: 2.15rem;
  }

  .nb-page-side {
    max-width: 7.5rem;
  }

  .nb-page-previews {
    gap: 0.45rem;
  }
}

@media (max-width: 575.98px) {
  .nb-preview-visual.is-offset {
    grid-template-columns: minmax(0, 0.45fr) minmax(0, max-content) minmax(4.6rem, 26%);
    column-gap: 1.35rem;
  }

  .nb-page-side {
    max-width: 5.65rem;
  }

  .nb-page-previews {
    gap: 0.32rem;
  }

  .nb-print-samples__title {
    font-size: 0.58rem;
  }

  .nb-print-samples__link {
    font-size: 0.58rem;
    min-height: 1.4rem;
    padding: 0.14rem 0.4rem;
  }

  .nb-page-preview__label {
    font-size: 0.58rem;
  }
}

/* เธŠเธธเธ”เธชเธต โ€” เธˆเธณเธ™เธงเธ™เธ„เธญเธฅเธฑเธกเธ™เนŒเธ•เธฒเธกเธˆเธณเธ™เธงเธ™เธ›เธธเนˆเธกเธ—เธตเนˆเน‚เธŠเธงเนŒ (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: 400;
  color: var(--nb-ink-soft);
  text-align: left;
  line-height: 1.3;
  letter-spacing: 0.01em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.nb-color-chip.is-active .nb-color-chip-label {
  font-weight: 500;
  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--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);
}

/* เนเธœเนˆเธ™เธšเธฑเธ™เธ—เธถเธ PNG โ€” เธเธ”เธ„เน‰เธฒเธ‡เธ เธฒเธž (iOS / LINE / in-app browser) */
.nb-png-save-sheet {
  position: fixed;
  inset: 0;
  z-index: 1100;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}

.nb-png-save-sheet--visible {
  opacity: 1;
  pointer-events: auto;
}

.nb-png-save-sheet__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(28, 25, 23, 0.48);
}

.nb-png-save-sheet__dialog {
  position: relative;
  z-index: 1;
  width: min(100%, 28rem);
  max-height: min(88vh, 40rem);
  margin: 0;
  padding: 0 0 1rem;
  border-radius: 16px 16px 0 0;
  background: #f7f5f2;
  box-shadow: 0 -8px 32px rgba(28, 25, 23, 0.18);
  display: flex;
  flex-direction: column;
  transform: translateY(12px);
  transition: transform 0.28s ease;
}

.nb-png-save-sheet--visible .nb-png-save-sheet__dialog {
  transform: translateY(0);
}

.nb-png-save-sheet__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.95rem 1rem 0.55rem;
}

.nb-png-save-sheet__title {
  margin: 0;
  font-family: 'Kanit', sans-serif;
  font-size: 1.05rem;
  font-weight: 600;
  color: #2a2623;
}

.nb-png-save-sheet__close {
  width: 2rem;
  height: 2rem;
  border: 1px solid rgba(92, 85, 78, 0.28);
  border-radius: 50%;
  background: #fff;
  color: #5c554e;
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
}

.nb-png-save-sheet__hint {
  margin: 0;
  padding: 0 1rem 0.75rem;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: #6b635c;
}

.nb-png-save-sheet__stage {
  margin: 0 1rem;
  padding: 0.65rem;
  border-radius: 12px;
  background: #fff;
  border: 1px solid rgba(28, 25, 23, 0.08);
  overflow: auto;
  max-height: min(58vh, 28rem);
  -webkit-overflow-scrolling: touch;
}

.nb-png-save-sheet__img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 8px;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: default;
}

@media (min-width: 640px) {
  .nb-png-save-sheet {
    align-items: center;
    padding: 1.25rem;
  }

  .nb-png-save-sheet__dialog {
    border-radius: 16px;
    max-height: min(90vh, 42rem);
  }
}

.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%;
  --nb-tex-scale: 1;
  padding-bottom: 0;
  overflow: visible;
  /* เน€เธ‡เธฒเธ•เธฒเธกเธฃเธนเธ›เธ—เธฃเธ‡เธกเธธเธกเธกเธ™ โ€” เน€เธšเธฅเธญเธ™เน‰เธญเธขเธฅเธ‡เน€เธžเธทเนˆเธญเน„เธกเนˆเนƒเธซเน‰เธฅเธฒเธขเธขเธฒเธ‡/เธฃเธดเธšเธšเธดเน‰เธ™เธ”เธนเธŸเธธเน‰เธ‡ */
  filter: drop-shadow(0 2px 5px rgba(28, 25, 23, 0.1));
}

/* เน€เธ‡เธฒเธงเธ‡เธฃเธตเนƒเธ•เน‰เธชเธกเธธเธ” (เธฅเธญเธข) โ€” เธ™เธธเนˆเธก เน„เธกเนˆเธ•เธฑเธ”เน€เธ›เน‡เธ™เน€เธชเน‰เธ™เธ•เธฃเธ‡เธเธฑเธšเธžเธทเน‰เธ™เน€เธŸเธ” */
.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: 14px;
  background: radial-gradient(
    ellipse at 50% center,
    rgba(28, 25, 23, 0.1) 0%,
    rgba(28, 25, 23, 0.04) 42%,
    rgba(28, 25, 23, 0.012) 62%,
    transparent 78%
  );
  filter: blur(7px);
  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: var(--nb-cover-corner-left-px, 2.4cqw) var(--nb-cover-corner-px, 5.5cqw)
    var(--nb-cover-corner-px, 5.5cqw) var(--nb-cover-corner-left-px, 2.4cqw);
  background: var(--nb-cover);
  /* stroke เน€เธ‡เธฒเธ‚เธญเธš โ€” เธญเนˆเธญเธ™ เนเธ•เนˆเน€เธ‚เน‰เธกเธเธงเนˆเธฒเธชเธตเธ›เธเธˆเธฃเธดเธ‡เน€เธฅเน‡เธเธ™เน‰เธญเธข */
  --nb-cover-stroke: color-mix(in srgb, var(--nb-cover) 90%, #000);
  box-shadow:
    inset 0 0 0 1px var(--nb-cover-stroke),
    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);
  outline: none;
  /* เน„เธกเนˆ 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;
  overflow: hidden;
  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.16) 0%,
      rgba(255, 255, 255, 0) 38%,
      rgba(0, 0, 0, 0.06) 100%
    ),
    linear-gradient(
      270deg,
      rgba(255, 255, 255, 0.09) 0%,
      rgba(255, 255, 255, 0) 2.5%
    );
  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;
}

/* เนƒเธŠเน‰ outline เธšเธ™เธŠเธดเน‰เธ™ (เนเธšเธšเธซเธนเธ›เธฒเธเธเธฒ) โ€” เธ‹เนˆเธญเธ™เธเธฃเธญเธš selection เธเธฑเธ™เธ‹เน‰เธญเธ™เน€เธชเน‰เธ™ */
.nb-selection-box--cover1,
.nb-selection-box--cover2,
.nb-selection-box--elastic,
.nb-selection-box--ribbon,
.nb-selection-box--penLoop,
.nb-selection-box--belt {
  border-color: transparent;
}

/* เนเธšเธš 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.nb-closure-belt--edge-right {
  border-radius: 6px 1.5px 1.5px 6px;
}

.nb-closure-belt--square.nb-closure-belt--edge-top {
  border-radius: 1.5px 1.5px 6px 6px;
}

.nb-closure-belt--square.nb-closure-belt--edge-bottom {
  border-radius: 6px 6px 1.5px 1.5px;
}

.nb-closure-belt--square:not(.nb-closure-belt--edge-right):not(.nb-closure-belt--edge-top):not(.nb-closure-belt--edge-bottom) {
  border-radius: 6px 1.5px 1.5px 6px;
}

.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;
}

/* เธชเธฑเธ™เธ‹เน‰เธฒเธขโ†’เธ‚เธงเธฒ: 1เน€เธ‚เน‰เธก 2เนเธชเธ‡เน€เธŸเธ” 3เน€เธ‚เน‰เธก(เธฃเนˆเธญเธ‡) 4เธชเธตเธ›เธเธˆเธฃเธดเธ‡ */
.nb-spine-shadow {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  z-index: 5;
  width: 10%;
  /* เธกเธธเธกเธ‹เน‰เธฒเธขเธกเธ™เธ•เธฒเธกเธ›เธ โ€” เธเธฑเธ™เธกเธธเธกเธชเธตเนˆเน€เธซเธฅเธตเนˆเธขเธกเธ‚เธญเธ‡เน€เธฅเน€เธขเธญเธฃเนŒเน‚เธœเธฅเนˆเน€เธ›เน‡เธ™เนเธซเธฅเธก */
  border-radius: var(--nb-cover-corner-left-px, 2.4cqw) 0 0
    var(--nb-cover-corner-left-px, 2.4cqw);
  overflow: hidden;
  background: linear-gradient(
    90deg,
    rgba(0, 0, 0, 0.4) 0%,
    rgba(0, 0, 0, 0.28) 4%,
    rgba(0, 0, 0, 0.14) 10%,
    rgba(255, 255, 255, 0.22) 22%,
    rgba(255, 255, 255, 0.1) 34%,
    rgba(255, 255, 255, 0.02) 42%,
    rgba(0, 0, 0, 0.2) 50%,
    rgba(0, 0, 0, 0.08) 58%,
    transparent 72%
  );
  pointer-events: none;
}

.nb-spine-shadow::before,
.nb-spine-shadow::after {
  content: none;
  display: 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;
  /* เธชเธตเธเธฒเธ™ + เธฅเธฒเธขเธ—เธญเธขเธฒเธ‡ โ€” เธ‚เธฑเน‰เธ™เธ›เธฃเธฑเธšเธ”เน‰เธงเธข --nb-tex-scale (เธžเธฃเธตเธงเธดเธงเนƒเธซเธเนˆ scale เนเธฅเน‰เธงเธฅเธฒเธขเธขเธฑเธ‡เธ–เธตเนˆเน€เธ—เนˆเธฒเธˆเธญเน€เธฅเน‡เธ) */
  background-color: var(--nb-elastic);
  --nb-elastic-rib: calc(2px / var(--nb-tex-scale, 1));
  background-image:
    repeating-linear-gradient(
      180deg,
      transparent 0,
      transparent 50%,
      rgba(0, 0, 0, 0.09) 50%,
      rgba(0, 0, 0, 0.09) 100%
    ),
    repeating-linear-gradient(
      90deg,
      rgba(0, 0, 0, 0.035) 0,
      rgba(0, 0, 0, 0.035) 50%,
      transparent 50%,
      transparent 100%
    );
  background-size:
    100% var(--nb-elastic-rib),
    var(--nb-elastic-rib) 100%;
  background-repeat: repeat;
  border-radius: 2px;
  cursor: pointer;
  box-shadow:
    -2px 0 2px rgba(0, 0, 0, 0.14),
    -1px 0 0 rgba(0, 0, 0, 0.08),
    inset 1px 0 0 rgba(255, 255, 255, 0.1),
    inset -1px 0 2px rgba(0, 0, 0, 0.08);
}

/* เน€เธ‡เธฒเธ”เน‰เธฒเธ™เธ‹เน‰เธฒเธข + เน„เธฅเนˆเนเธชเธ‡เนเธ™เธงเธ•เธฑเน‰เธ‡ (เธ•เธฃเธ‡ canvas elastic) */
.nb-elastic::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 28%;
  border-radius: inherit;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.05), 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.12) 0%,
    rgba(0, 0, 0, 0.03) 2.5%,
    transparent 6%,
    transparent 94%,
    rgba(0, 0, 0, 0.03) 97.5%,
    rgba(0, 0, 0, 0.12) 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));
  /* เธฅเธฒเธขเธฃเนˆเธญเธ‡เธˆเธฒเธ‡ เน† โ€” เธ›เธฃเธฑเธšเธ•เธฒเธก --nb-tex-scale */
  --nb-pen-loop-rib: calc(6px / var(--nb-tex-scale, 1));
  background-image: repeating-linear-gradient(
    90deg,
    rgba(0, 0, 0, 0.05) 0 25%,
    rgba(255, 255, 255, 0.03) 25% 50%,
    transparent 50% 100%
  );
  background-size: var(--nb-pen-loop-rib) 100%;
  background-repeat: repeat;
  /* เธกเธธเธกเธ‚เธงเธฒเธšเธ™โ€“เธ‚เธงเธฒเธฅเนˆเธฒเธ‡ เธกเธ™เธ™เธดเธ”เน€เธ”เธตเธขเธง */
  border-radius: 0 2px 2px 0;
  transform: none;
  box-shadow:
    /* เธฃเธญเธขเธŠเธ™เธ‚เธญเธšเธ›เธ */
    inset 2px 0 3px rgba(0, 0, 0, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    inset 0 -1px 0 rgba(0, 0, 0, 0.1),
    /* เน€เธ‡เธฒเธขเธทเนˆเธ™เธ™เธญเธเธ›เธ */
    1px 1px 2px rgba(0, 0, 0, 0.12),
    2px 0 4px rgba(0, 0, 0, 0.06);
  pointer-events: auto;
  cursor: pointer;
  touch-action: manipulation;
}

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

/* select ring โ€” เธชเธกเธธเธ” / เธฃเธดเธšเธšเธดเน‰เธ™ / เธขเธฒเธ‡เธขเธทเธ” / เธซเธนเธ›เธฒเธเธเธฒ เนเธšเธšเน€เธ”เธตเธขเธงเธเธฑเธ™ */
.nb-notebook.nb-target-cover1,
.nb-notebook.nb-target-cover2,
.nb-ribbon.is-color-target,
.nb-elastic.is-color-target,
.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: 62%;
  border-radius: inherit;
  background: linear-gradient(
    90deg,
    rgba(0, 0, 0, 0.42) 0%,
    rgba(0, 0, 0, 0.28) 12%,
    rgba(0, 0, 0, 0.14) 32%,
    rgba(0, 0, 0, 0.05) 55%,
    rgba(0, 0, 0, 0) 100%
  );
  pointer-events: none;
  z-index: 1;
}

/* เธ›เธฃเธดเธกเธฒเธ•เธฃเธขเธฒเธ‡ โ€” เน„เธฎเน„เธฅเธ•เนŒเธšเธ™ / เน€เธ‡เธฒเธฅเนˆเธฒเธ‡ + เธ›เธฅเธฒเธขเธ‚เธงเธฒเธชเธงเนˆเธฒเธ‡เธ‚เธถเน‰เธ™เน€เธฅเน‡เธเธ™เน‰เธญเธข */
.nb-pen-loop::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.16) 0%,
      rgba(255, 255, 255, 0.04) 28%,
      rgba(0, 0, 0, 0) 48%,
      rgba(0, 0, 0, 0.06) 72%,
      rgba(0, 0, 0, 0.14) 100%
    ),
    linear-gradient(
      90deg,
      transparent 40%,
      rgba(255, 255, 255, 0.06) 100%
    );
  pointer-events: none;
  z-index: 2;
}

/* เธฅเธฒเธขเธ•เธเนเธ•เนˆเธ‡เธ‚เธญเธšเธ›เธ (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%;
  /* เธชเธตเธเธฒเธ™ + เธฅเธฒเธขเธœเน‰เธฒเธ‹เธฒเธ•เธดเธ™ โ€” เธ›เธฃเธฑเธšเธ•เธฒเธก --nb-tex-scale */
  background-color: var(--nb-ribbon);
  --nb-ribbon-rib: calc(2px / var(--nb-tex-scale, 1));
  --nb-ribbon-sheen: calc(6px / var(--nb-tex-scale, 1));
  background-image:
    repeating-linear-gradient(
      90deg,
      transparent 0,
      transparent 75%,
      rgba(0, 0, 0, 0.07) 75%,
      rgba(0, 0, 0, 0.07) 100%
    ),
    repeating-linear-gradient(
      125deg,
      transparent 0,
      transparent 83%,
      rgba(255, 255, 255, 0.05) 83%,
      rgba(255, 255, 255, 0.05) 100%
    );
  background-size:
    var(--nb-ribbon-rib) 100%,
    var(--nb-ribbon-sheen) var(--nb-ribbon-sheen);
  background-repeat: repeat;
  border-radius: 0 0 3px 3px;
  transform: translateX(-50%);
  box-shadow:
    inset 1px 0 0 rgba(255, 255, 255, 0.1),
    inset -1px 0 0 rgba(0, 0, 0, 0.06),
    0 1px 2px rgba(0, 0, 0, 0.08);
  cursor: pointer;
}

.nb-ribbon::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.1) 0%,
    rgba(255, 255, 255, 0) 16%,
    rgba(0, 0, 0, 0) 72%,
    rgba(0, 0, 0, 0.14) 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: minmax(0, 1fr) minmax(0, 1.15fr) minmax(0, 1.2fr);
  gap: 0.5rem 0.55rem;
  width: 100%;
  max-width: 28rem;
  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-ghost,
.nb-preview-actions--bottom .btn-nb-download,
.nb-preview-actions--bottom .nb-btn-save-design {
  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;
}

/* เธ—เธฑเน‰เธ‡ 3 เธ›เธธเนˆเธกเธ™เน‰เธณเธซเธ™เธฑเธเน€เธ—เนˆเธฒเธเธฑเธ™ โ€” เน„เธกเนˆเน„เธฎเน„เธฅเธ—เนŒเธ›เธธเนˆเธกเนƒเธ”เน€เธ›เน‡เธ™เธžเธดเน€เธจเธฉ */
.nb-frame--preview .nb-preview-actions--bottom .btn-nb-ghost,
.nb-frame--preview .nb-preview-actions--bottom .btn-nb-download,
.nb-frame--preview .nb-preview-actions--bottom .nb-btn-save-design {
  margin-top: 0;
  min-height: 2.125rem;
  padding: 0.36rem 0.45rem;
  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,
.nb-frame--preview .nb-preview-actions--bottom .btn-nb-download:hover,
.nb-frame--preview .nb-preview-actions--bottom .nb-btn-save-design:hover:not(:disabled) {
  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,
.nb-frame--preview .nb-preview-actions--bottom .btn-nb-download i,
.nb-frame--preview .nb-preview-actions--bottom .nb-btn-save-design i {
  opacity: 0.88;
  font-size: 0.94em;
}

.nb-frame--preview .nb-preview-actions--bottom .nb-btn-save-design.nb-btn-save-design--saved {
  color: var(--nb-ink);
  background: #f3f0eb;
  border-color: rgba(28, 25, 23, 0.22);
}

/* เธกเธทเธญเธ–เธทเธญ + iPad: เธ›เธธเนˆเธกเธฅเนˆเธฒเธ‡เน€เธซเธฅเธทเธญเน„เธญเธ„เธญเธ™ โ€” hover/focus เธ„เนˆเธญเธขเน‚เธŠเธงเนŒเธ‚เน‰เธญเธ„เธงเธฒเธก (เน€เธฅเธขเนŒเน€เธญเธฒเธ•เนŒเน„เธกเนˆเน€เธ›เธฅเธตเนˆเธขเธ™) */
@media (max-width: 1199.98px) {
  .nb-preview-actions--bottom {
    grid-template-columns: repeat(3, minmax(2.75rem, 1fr));
    max-width: 11.5rem;
    gap: 0.45rem;
  }

  .nb-frame--preview .nb-preview-actions--bottom .btn-nb-ghost,
  .nb-frame--preview .nb-preview-actions--bottom .btn-nb-download,
  .nb-frame--preview .nb-preview-actions--bottom .nb-btn-save-design {
    position: relative;
    min-height: 2.5rem;
    padding: 0.45rem;
    gap: 0;
  }

  .nb-preview-actions--bottom .nb-preview-action-label {
    position: absolute;
    left: 50%;
    bottom: calc(100% + 7px);
    transform: translateX(-50%) translateY(2px);
    padding: 0.28rem 0.55rem;
    border-radius: 6px;
    background: #292524;
    color: #fafaf9;
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1.25;
    white-space: nowrap;
    box-shadow: 0 4px 14px rgba(28, 25, 23, 0.18);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    z-index: 6;
    transition:
      opacity 0.15s ease,
      visibility 0.15s ease,
      transform 0.15s ease;
  }

  .nb-preview-actions--bottom .nb-preview-action-label::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 100%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: #292524;
  }

  .nb-preview-actions--bottom .btn-nb-ghost i,
  .nb-preview-actions--bottom .btn-nb-download i,
  .nb-preview-actions--bottom .nb-btn-save-design i {
    margin: 0;
    font-size: 1.05rem;
  }
}

@media (max-width: 1199.98px) and (hover: hover) {
  .nb-preview-actions--bottom .btn-nb-ghost:hover .nb-preview-action-label,
  .nb-preview-actions--bottom .btn-nb-download:hover .nb-preview-action-label,
  .nb-preview-actions--bottom .nb-btn-save-design:hover .nb-preview-action-label {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
  }
}

@media (max-width: 1199.98px) {
  .nb-preview-actions--bottom .btn-nb-ghost:focus-visible .nb-preview-action-label,
  .nb-preview-actions--bottom .btn-nb-download:focus-visible .nb-preview-action-label,
  .nb-preview-actions--bottom .nb-btn-save-design:focus-visible .nb-preview-action-label,
  .nb-preview-actions--bottom .btn-nb-ghost:active .nb-preview-action-label,
  .nb-preview-actions--bottom .btn-nb-download:active .nb-preview-action-label,
  .nb-preview-actions--bottom .nb-btn-save-design:active .nb-preview-action-label {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
  }
}

/* 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;
  /* auto-fill โ€” เธ„เธญเธฅเธฑเธกเธ™เนŒเธงเนˆเธฒเธ‡เน„เธกเนˆเธขเธธเธš เธเธฒเธฃเนŒเธ”เน€เธ”เธตเธขเธงเธˆเธถเธ‡เน„เธกเนˆเธขเธทเธ”เน€เธ•เน‡เธกเนเธ–เธง */
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1.15rem;
  margin-top: 0.8rem;
  align-items: stretch;
  width: 100%;
  justify-content: start;
}

@media (max-width: 575.98px) {
  .nb-saved-list {
    grid-template-columns: 1fr;
  }

  .nb-saved-card {
    max-width: none;
  }
}

.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;
  max-width: 360px;
  width: 100%;
  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: 300px;
  height: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 0 0.65rem;
  padding: 1rem 0.75rem 1.25rem;
  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 {
  --nb-cover-stroke: color-mix(in srgb, var(--nb-cover) 90%, #000);
  max-width: 100%;
  max-height: none;
  /* เธเธฑเธ™เธšเธตเธšเธเธงเน‰เธฒเธ‡เนเธ•เนˆเธชเธนเธ‡เธ„เน‰เธฒเธ‡เน€เธกเธทเนˆเธญเธเธฒเธฃเนŒเธ”เนเธ„เธš */
  height: auto !important;
  aspect-ratio: var(--nb-page-ratio, 0.7048);
  box-shadow:
    inset 0 0 0 1px var(--nb-cover-stroke),
    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);
  outline: none;
}

.nb-saved-thumb__scaler .nb-notebook-wrap--saved-thumb-scale,
.nb-compare-thumb .nb-notebook-wrap {
  max-width: 100%;
}

/* เธขเธฒเธ‡เธขเธทเธ” โ€” เธ„เธงเธฒเธกเธขเธฒเธงเน€เธ—เนˆเธฒเธ‚เธญเธšเธ›เธ (เธซเน‰เธฒเธกเนƒเธŠเน‰ -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.1) 0%,
    rgba(0, 0, 0, 0.02) 3%,
    transparent 8%,
    transparent 92%,
    rgba(0, 0, 0, 0.02) 97%,
    rgba(0, 0, 0, 0.1) 100%
  );
}

/* เธชเธฑเธ™ โ€” เธ เธฒเธžเธขเนˆเธญ / เน€เธ›เธฃเธตเธขเธšเน€เธ—เธตเธขเธš (1เน€เธ‚เน‰เธก 2เนเธชเธ‡ 3เน€เธ‚เน‰เธก 4เธ›เธ) */
.nb-saved-thumb .nb-spine-shadow,
.nb-compare-thumb .nb-spine-shadow,
.nb-notebook.nb-notebook--mini .nb-spine-shadow {
  width: 10%;
  background: linear-gradient(
    90deg,
    rgba(0, 0, 0, 0.22) 0%,
    rgba(255, 255, 255, 0.16) 24%,
    rgba(0, 0, 0, 0.16) 48%,
    transparent 70%
  );
}

.nb-saved-thumb .nb-spine-shadow::before,
.nb-compare-thumb .nb-spine-shadow::before,
.nb-notebook.nb-notebook--mini .nb-spine-shadow::before,
.nb-saved-thumb .nb-spine-shadow::after,
.nb-compare-thumb .nb-spine-shadow::after,
.nb-notebook.nb-notebook--mini .nb-spine-shadow::after {
  content: none;
  display: none;
}

.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),
    inset -0.5px 0 0 rgba(0, 0, 0, 0.05),
    0 0.5px 1px rgba(0, 0, 0, 0.06);
}

/* เธ เธฒเธžเธขเนˆเธญ / เน€เธ—เธตเธขเธš โ€” เน€เธ‡เธฒเธ—เธตเนˆเธ›เธฅเธฒเธขเธฃเธดเธšเธšเธดเน‰เธ™ เน„เธกเนˆเธ—เธฑเธšเธ‚เธญเธšเธเธฃเธญเธšเน€เธšเธˆ */
.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__main {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.65rem 0.85rem;
  flex: 1 1 16rem;
  min-width: 0;
}

.nb-saved-toolbar .nb-btn-save-design--saved-panel {
  flex: 0 0 auto;
  min-height: 2.55rem;
  padding: 0.55rem 1.15rem;
  font-size: var(--nb-type-control);
  font-weight: 600;
}

.nb-saved-toolbar .nb-saved-intro {
  flex: 1 1 12rem;
  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__ad {
  margin: 0 0 1.15rem;
  cursor: zoom-in;
  -webkit-user-select: none;
  user-select: none;
}

.nb-guide-modal__ad img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--nb-frame-head-divider);
  border-radius: 10px;
  background: #f4f1ec;
  pointer-events: none;
}

.nb-guide-ad-lightbox[hidden] {
  display: none !important;
}

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

.nb-guide-ad-lightbox__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(28, 25, 23, 0.72);
  animation: nb-modal-fade-in 0.2s ease;
}

.nb-guide-ad-lightbox__dialog {
  position: relative;
  z-index: 1;
  width: min(94vw, 900px);
  max-height: min(92dvh, 92vh);
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: 12px;
  box-shadow: 0 18px 48px rgba(28, 25, 23, 0.28);
  animation: nb-modal-rise-in 0.22s ease;
}

.nb-guide-ad-lightbox__img {
  display: block;
  width: 100%;
  height: auto;
  background: #f4f1ec;
}

.nb-guide-ad-lightbox__close {
  position: absolute;
  top: 0.55rem;
  right: 0.55rem;
  z-index: 2;
  width: 2rem;
  height: 2rem;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: var(--nb-radius-control);
  background: rgba(28, 25, 23, 0.72);
  color: #fff;
  font-size: 1.35rem;
  line-height: 1;
  cursor: pointer;
}

.nb-guide-ad-lightbox__close:hover,
.nb-guide-ad-lightbox__close:focus-visible {
  background: rgba(28, 25, 23, 0.9);
  outline: none;
}

.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;
  }
}

/* Intro popup — ทักทายตอนเข้าหน้า แล้วส่งต่อเข้าเครื่องมือย้อมสีทันที */
.nb-intro-modal[hidden] {
  display: none !important;
}

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

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

.nb-intro-modal__dialog {
  position: relative;
  z-index: 1;
  width: min(92vw, 25rem);
  max-height: min(92dvh, 92vh);
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  padding: 1.5rem 1.35rem 1.35rem;
  border: 1px solid var(--nb-frame-head-divider);
  border-radius: 18px;
  background: linear-gradient(180deg, #faf8f5 0%, #ffffff 46%, #ffffff 100%);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.55),
    0 18px 48px rgba(28, 25, 23, 0.22);
  text-align: center;
  animation: nb-modal-rise-in 0.28s ease;
}

.nb-intro-modal__close {
  position: absolute;
  top: 0.6rem;
  right: 0.6rem;
  width: 2rem;
  height: 2rem;
  border: 1px solid rgba(92, 85, 78, 0.24);
  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-intro-modal__close:hover {
  background: #ffffff;
  border-color: rgba(92, 85, 78, 0.45);
  color: var(--nb-ink);
}

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

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

.nb-intro-modal__art {
  display: block;
  width: 5rem;
  height: 5rem;
  margin: 0 auto 0.85rem;
  border-radius: 50%;
  box-shadow: 0 6px 18px rgba(28, 25, 23, 0.18);
}

.nb-intro-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-intro-modal__title {
  margin: 0 0 0.6rem;
  font-family: 'Kanit', sans-serif;
  font-size: clamp(1.05rem, 3vw, 1.25rem);
  font-weight: 600;
  line-height: 1.35;
  color: var(--nb-shell-ink);
}

.nb-intro-modal__text {
  margin: 0 0 0.6rem;
  font-family: 'Kanit', sans-serif;
  font-size: 0.8125rem;
  font-weight: 300;
  line-height: 1.6;
  color: #5c554e;
}

.nb-intro-modal__text--sub {
  margin-bottom: 1.15rem;
  color: var(--nb-shell-muted);
}

.nb-intro-modal__actions {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  align-items: stretch;
}

.nb-intro-modal__start {
  padding: 0.62rem 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-intro-modal__start:hover {
  background: #2f2b28;
  border-color: #2f2b28;
}

.nb-intro-modal__start:active {
  transform: scale(0.98);
}

.nb-intro-modal__more {
  padding: 0.5rem 1.1rem;
  border: 1px solid rgba(92, 83, 76, 0.3);
  border-radius: 999px;
  background: transparent;
  color: #5c554e;
  font-family: 'Kanit', sans-serif;
  font-size: 0.8125rem;
  font-weight: 400;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.nb-intro-modal__more:hover {
  background: rgba(255, 255, 255, 0.9);
  border-color: rgba(92, 83, 76, 0.45);
  color: #1c1917;
}

.nb-intro-modal__start:focus,
.nb-intro-modal__more:focus {
  outline: none;
}

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

@media (min-width: 480px) {
  .nb-intro-modal__actions {
    flex-direction: row;
    justify-content: center;
  }
}

@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__head-guide {
    padding: 0.26rem 0.58rem 0.26rem 0.34rem;
    font-size: 0.75rem;
  }

  .nb-frame__head-guide-icon {
    width: 1.15rem;
    height: 1.15rem;
    font-size: 0.6rem;
  }

  .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,
  .nb-frame--color-parts .nb-frame__body,
  .nb-frame--color-current .nb-frame__body {
    padding: 0.65rem 0.65rem 0.72rem;
  }

  .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: 400;
    line-height: 1.3;
  }

  .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-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: 1.15rem 1.15rem 1.85rem;
    min-height: 340px;
    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 {
    margin-top: 0.85rem;
    padding-top: 0.75rem;
  }

  .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% เธ—เธณเนƒเธซเน‰เธšเธงเธก โ€” เนƒเธŠเน‰ % + เน€เธžเธ”เธฒเธ™ px */
    width: 3.6%;
    min-width: 3px;
    max-width: 9px;
    border-radius: 1px;
    box-shadow:
      -1.5px 0 1px rgba(0, 0, 0, 0.14),
      -0.5px 0 0 rgba(0, 0, 0, 0.08),
      inset 0.5px 0 0 rgba(255, 255, 255, 0.14),
      inset -1px 0 2px rgba(0, 0, 0, 0.1);
  }

  .nb-ribbon {
    width: 4.4%;
    min-width: 3px;
    max-width: 11px;
    height: 14%;
    border-radius: 0 0 2px 2px;
  }

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

  .nb-colors-stack-home,
  .nb-colors-stack {
    gap: 0.9rem;
  }
}

/* โ€”โ€” Cover image upload (Phase A) โ€”โ€” */
.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;
}

/* เน€เธชเน‰เธ™เธเธฅเธฒเธ‡เธ•เธญเธ™ snap โ€” เธญเธขเธนเนˆเนƒเธ™เธ‚เธญเธšเธ›เธ เน„เธกเนˆเนƒเธŠเน‰ box-shadow เธฅเน‰เธ™เธˆเธญ */
.nb-cover-art-ui.is-snap-guide-x::before,
.nb-cover-art-ui.is-snap-guide-y::after {
  content: '';
  position: absolute;
  pointer-events: none;
  z-index: 2;
  background: rgba(37, 99, 235, 0.5);
}

.nb-cover-art-ui.is-snap-guide-x::before {
  left: 50%;
  top: 0;
  bottom: 0;
  width: 1px;
  margin-left: -0.5px;
}

.nb-cover-art-ui.is-snap-guide-y::after {
  top: 50%;
  left: 0;
  right: 0;
  height: 1px;
  margin-top: -0.5px;
}

.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);
}