/* Den · 便签盒 */

#page-den .den-notebox {
  min-height: 100%;
  padding: max(22px, env(safe-area-inset-top)) 14px 130px;
  max-width: 420px;
  margin: 0 auto;
}

#page-den .nb-sec-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin: 4px 4px 12px;
  color: #5a4a55;
}
#page-den .nb-sec-head b {
  font: 600 15px/1 -apple-system, BlinkMacSystemFont, "PingFang SC", sans-serif;
}
#page-den .nb-sec-head small {
  font: italic 10px/1 Georgia, serif;
  color: #b39aab;
  letter-spacing: .1em;
}

#page-den .nb-door {
  margin-bottom: 18px;
}

#page-den .nb-door-stage {
  min-height: 220px;
}

#page-den .nb-door-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: min(58vw, 210px);
  aspect-ratio: 1;
  margin: 8px auto;
  border: 1.5px dashed rgba(170, 140, 155, .45);
  border-radius: 14px;
  background: rgba(255, 255, 255, .55);
  color: #8a7484;
  cursor: pointer;
}
#page-den .nb-door-empty span { font: 600 14px/1 "PingFang SC", sans-serif; }
#page-den .nb-door-empty small { font-size: 11px; opacity: .75; }

#page-den .nb-stack {
  position: relative;
  width: min(58vw, 210px);
  aspect-ratio: 1;
  margin: 0 auto 12px;
}

#page-den .nb-card {
  position: absolute;
  inset: 0;
  padding: 18% 14% 20%;
  border-radius: 12px;
  background: #fff var(--bg) center / 100% 100% no-repeat;
  box-shadow: 0 10px 22px rgba(90, 60, 80, .14);
  overflow: hidden;
  transition: transform .35s cubic-bezier(.22, .9, .28, 1), opacity .3s;
}
#page-den .nb-card[data-depth="0"] {
  z-index: 5;
  transform: translate(0, 0) rotate(-1deg) scale(1);
}
#page-den .nb-card[data-depth="1"] {
  z-index: 4;
  transform: translate(10px, 12px) rotate(2.2deg) scale(.96);
}
#page-den .nb-card[data-depth="2"] {
  z-index: 3;
  transform: translate(-8px, 20px) rotate(-3deg) scale(.92);
}

#page-den .nb-card-body {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 7;
  overflow: hidden;
  font-family: "Ma Shan Zheng", "Long Cang", "Segoe Print", cursive;
  font-size: 14px;
  line-height: 1.4;
  color: #4a3a44;
  white-space: pre-wrap;
  word-break: break-word;
  text-shadow: 0 0 2px rgba(255,255,255,.9);
}

#page-den .nb-door-actions {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
}
#page-den .nb-nav {
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 50%;
  background: rgba(255,255,255,.85);
  color: #5a4a55;
  font-size: 22px;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(90,60,80,.1);
}
#page-den .nb-take {
  min-width: 96px;
  padding: 10px 16px;
  border: 0;
  border-radius: 999px;
  background: #4f3f4a;
  color: #fff;
  font: 600 13px/1 "PingFang SC", sans-serif;
  cursor: pointer;
  box-shadow: 0 6px 14px rgba(80,50,70,.16);
}
#page-den .nb-door-hint {
  margin: 10px 0 0;
  text-align: center;
  color: #b39aab;
  font: 11px/1.2 ui-monospace, monospace;
}

#page-den .nb-lead {
  margin: 4px 6px 18px;
  color: #9a8796;
  font: italic 12px/1.5 Georgia, "PingFang SC", serif;
}
#page-den .nb-spacer {
  visibility: hidden;
  pointer-events: none;
}
#page-den .nb-drawer-solo .nb-drawer-panel {
  margin-top: 4px;
}
#page-den .nb-sec-head i {
  font-style: normal;
}

/* drawer */
#page-den .nb-drawer-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 14px 14px;
  border: 0;
  border-radius: 16px;
  background: rgba(255,255,255,.72);
  color: #5a4a55;
  text-align: left;
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(90,60,80,.06);
}
#page-den .nb-drawer-toggle b {
  display: block;
  font: 600 15px/1.2 "PingFang SC", sans-serif;
}
#page-den .nb-drawer-toggle small {
  display: block;
  margin-top: 4px;
  font: italic 10px Georgia, serif;
  color: #b39aab;
}
#page-den .nb-drawer-toggle i {
  font-style: normal;
  min-width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: rgba(79,63,74,.08);
  font: 600 12px/1 ui-monospace, monospace;
  color: #6a5a68;
}
#page-den .nb-drawer-toggle.open {
  border-radius: 16px 16px 8px 8px;
}

#page-den .nb-drawer-panel {
  margin-top: 8px;
  padding: 8px 2px 4px;
  display: grid;
  gap: 10px;
}
#page-den .nb-drawer-empty {
  margin: 8px 4px;
  padding: 18px 12px;
  text-align: center;
  color: #a08e9c;
  font: italic 12px/1.6 Georgia, "PingFang SC", serif;
  background: rgba(255,255,255,.45);
  border-radius: 14px;
}

#page-den .nb-drawer-item {
  position: relative;
  min-height: 88px;
  padding: 14px 14px 28px;
  border-radius: 12px;
  background: #fff var(--bg) center / cover no-repeat;
  box-shadow: 0 6px 14px rgba(90,60,80,.1);
  transform: rotate(-0.6deg);
  filter: contrast(.98) saturate(.95);
}
#page-den .nb-drawer-item:nth-child(2n) { transform: rotate(0.8deg); }
#page-den .nb-drawer-item:nth-child(3n) { transform: rotate(-1.2deg); }
#page-den .nb-drawer-item-body {
  font-family: "Ma Shan Zheng", "Long Cang", cursive;
  font-size: 14px;
  line-height: 1.45;
  color: #4a3a44;
  white-space: pre-wrap;
  word-break: break-word;
  text-shadow: 0 0 2px rgba(255,255,255,.85);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 5;
  overflow: hidden;
}
#page-den .nb-drawer-item footer {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 8px;
  display: flex;
  justify-content: space-between;
  color: #9a8796;
  font: 10px/1 ui-monospace, monospace;
}

/* editor — same square paper treatment */
.nb-editor {
  position: fixed;
  inset: 0;
  z-index: 12000;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(40,28,45,.32);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding: 12px 14px calc(14px + env(safe-area-inset-bottom));
}
.nb-editor.open { display: flex; }
.nb-editor-wrap {
  position: relative;
  width: min(92vw, calc(100dvh - 140px), 440px);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.nb-editor-close {
  position: absolute;
  top: -6px;
  right: -6px;
  z-index: 3;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 50%;
  background: rgba(255,255,255,.92);
  font-size: 20px;
  cursor: pointer;
}
.nb-editor-card {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 18px 40px rgba(50,30,50,.22);
}
.nb-editor-paper {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
}
.nb-editor-text {
  position: absolute;
  left: 16%;
  right: 16%;
  top: 16%;
  bottom: 20%;
  border: 0;
  resize: none;
  background: transparent;
  font-family: "Ma Shan Zheng", "Long Cang", cursive;
  font-size: clamp(16px, 4.6vw, 20px);
  line-height: 1.55;
  color: #4f3f4a;
  outline: none;
}
.nb-editor-actions { display: flex; gap: 8px; }
.nb-editor-actions button {
  flex: 1;
  border: 0;
  border-radius: 12px;
  padding: 11px;
  font: 600 14px/1 "PingFang SC", sans-serif;
  cursor: pointer;
}
.nb-reroll, .nb-cancel { background: rgba(255,255,255,.9); color: #6a5a68; }
.nb-ok { background: #4f3f4a; color: #fff; }