.template-gallery-shell {
  position: fixed;
  inset: 0 0 0 var(--sidebar-w);
  z-index: 39;
  overflow: auto;
  color: #171513;
  background:
    radial-gradient(circle at 83% 7%, rgba(255, 88, 64, .09), transparent 24rem),
    linear-gradient(180deg, #fff 0, #fffdfb 26rem, #f7f3ee 100%);
  font-family: "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif;
}
.template-gallery-shell[hidden] { display: none; }
body[data-workspace-mode="gallery"] .topbar,
body[data-workspace-mode="gallery"] .mobile-workspace-tabs,
body[data-workspace-mode="gallery"] .template-dock,
body[data-workspace-mode="gallery"] .template-peek,
body[data-workspace-mode="gallery"] .workspace-main,
body[data-workspace-mode="gallery"] .matrix-shell,
body[data-workspace-mode="gallery"] .toolbox-shell,
body[data-workspace-mode="gallery"] .release-shell,
body[data-workspace-mode="gallery"] .hot-topic-shell,
body[data-workspace-mode="gallery"] .api-docs-shell { display: none; }
body[data-workspace-mode="gallery"] .template-gallery-shell { display: block; }

.template-gallery-main {
  width: min(1220px, calc(100% - 72px));
  margin: 0 auto;
  padding: 22px 0 86px;
}
.template-gallery-hero {
  position: relative;
  min-height: 294px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 35px 24px 18px;
  text-align: center;
}
.template-gallery-hero::before {
  content: "";
  position: absolute;
  top: 61px;
  left: calc(50% - 285px);
  width: 44px;
  height: 13px;
  border-top: 4px solid #ffe000;
  border-bottom: 4px solid #ffe000;
  transform: rotate(-10deg);
}
.gallery-hero-actions {
  position: absolute;
  inset: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.gallery-hero-actions > span {
  color: #a49c94;
  font: 800 9px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .16em;
}
.gallery-hero-actions button {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 10px 0 12px;
  color: #4b4743;
  background: rgba(255,255,255,.7);
  border: 1px solid rgba(121,111,101,.2);
  border-radius: 10px;
  cursor: pointer;
  font: 720 10px/1 inherit;
  box-shadow: 0 1px 2px rgba(35,29,25,.04), 0 6px 18px rgba(54,41,31,.05);
  backdrop-filter: blur(16px) saturate(1.2);
  transition: transform .18s ease, color .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.gallery-hero-actions button b {
  width: 17px;
  height: 17px;
  display: grid;
  place-items: center;
  color: #777069;
  background: rgba(84,76,69,.07);
  border-radius: 5px;
  font: 500 16px/1 -apple-system, BlinkMacSystemFont, sans-serif;
}
.gallery-hero-actions button:hover,
.gallery-hero-actions button:focus-visible {
  color: #191614;
  border-color: rgba(74,66,59,.28);
  outline: 0;
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(35,29,25,.06), 0 9px 24px rgba(54,41,31,.08);
}
.template-gallery-hero > p {
  margin: 0 0 8px;
  color: #ff4c39;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .12em;
}
.template-gallery-hero h1 {
  margin: 0;
  font-family: "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif;
  font-size: clamp(39px, 4vw, 57px);
  font-weight: 900;
  line-height: 1.04;
  letter-spacing: -.075em;
}
.template-gallery-hero h1 em {
  position: relative;
  color: inherit;
  font-style: normal;
  z-index: 0;
}
.template-gallery-hero h1 em::after {
  content: "";
  position: absolute;
  right: -5px;
  bottom: 4px;
  left: -3px;
  z-index: -1;
  height: 17px;
  background: #ffe400;
  transform: rotate(-1.4deg) skewX(-7deg);
}
.gallery-hero-note { margin-top: 10px; color: #777069; font-size: 12px; font-weight: 570; }
.gallery-search {
  width: min(590px, 90%);
  min-height: 44px;
  display: grid;
  grid-template-columns: 22px minmax(0,1fr) auto;
  align-items: center;
  gap: 10px;
  margin-top: 17px;
  padding: 0 13px 0 17px;
  color: #8c847c;
  background: rgba(255,255,255,.92);
  border: 1px solid #ded7d0;
  border-radius: 13px;
  box-shadow: 0 17px 42px rgba(64,47,34,.075);
  transition: border-color .18s ease, box-shadow .18s ease;
}
.gallery-search:focus-within { border-color: #ff8b7b; box-shadow: 0 0 0 4px rgba(255,80,59,.1), 0 18px 45px rgba(64,47,34,.1); }
.gallery-search svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.gallery-search input {
  width: 100%;
  height: 42px;
  padding: 0;
  color: #1e1a17;
  background: transparent;
  border: 0;
  outline: 0;
  font: 650 12px/1 inherit;
}
.gallery-search input::placeholder { color: #aaa29b; }
.gallery-search-submit {
  min-width: 47px;
  height: 30px;
  padding: 0 11px;
  color: #514b46;
  background: #f3f0ec;
  border: 0;
  border-radius: 8px;
  cursor: pointer;
  font: 750 10px/1 inherit;
  transition: color .16s ease, background .16s ease, box-shadow .16s ease;
}
.gallery-search-submit:hover,
.gallery-search-submit:focus-visible {
  color: #fff;
  background: #2c2926;
  box-shadow: 0 3px 9px rgba(31,27,24,.13);
  outline: 0;
}
.gallery-filters {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 9px;
}
.gallery-filters button {
  min-height: 30px;
  padding: 0 12px;
  color: #6e6760;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 999px;
  cursor: pointer;
  font: 720 10px/1 inherit;
}
.gallery-filters button:hover,
.gallery-filters button:focus-visible { color: #1c1917; background: #fff; border-color: #e8e0d8; outline: 0; }
.gallery-filters button.active { color: #fff; background: #ff4f3b; border-color: #ff4f3b; box-shadow: 0 7px 14px rgba(239,66,45,.2); }

.gallery-collection { padding-top: 18px; }
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 28px 18px;
  padding-top: 0;
}
.gallery-template-card {
  min-width: 0;
  animation: gallery-card-enter .44s both cubic-bezier(.2,.75,.2,1);
  animation-delay: calc(var(--card-order) * 45ms);
}
.gallery-card-visual {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 4;
  display: block;
  overflow: hidden;
  color: inherit;
  background: #fff;
  border: 1px solid #e4ddd6;
  border-radius: 15px;
  box-shadow: 0 10px 24px rgba(43,32,24,.055);
  transition: transform .22s cubic-bezier(.2,.75,.2,1), border-color .2s ease, box-shadow .22s ease;
}
.gallery-card-preview {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  padding: 0;
  overflow: hidden;
  background: #fff;
  border: 0;
  cursor: pointer;
}
.gallery-card-preview > img { width: 100%; height: 100%; display: block; object-fit: cover; }
.gallery-template-card:hover .gallery-card-visual {
  transform: translateY(-3px);
  border-color: #d9d2cb;
  box-shadow: 0 20px 42px rgba(50,34,25,.11);
}
.gallery-template-card.is-featured .gallery-card-visual { border-color: #ff5a46; box-shadow: 0 14px 30px rgba(240,67,44,.13); }
.gallery-card-hover {
  position: absolute;
  right: auto;
  bottom: 14px;
  left: 50%;
  z-index: 5;
  width: max-content;
  max-width: calc(100% - 24px);
  min-height: 38px;
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  color: #24211f;
  background: rgba(252,251,249,.91);
  border: 1px solid rgba(42,36,31,.12);
  border-radius: 9px;
  box-shadow: 0 8px 24px rgba(34,28,23,.16),0 1px 2px rgba(34,28,23,.08);
  opacity: 0;
  transform: translate(-50%,5px) scale(.98);
  transform-origin: center bottom;
  visibility: hidden;
  pointer-events: none;
  backdrop-filter: blur(18px) saturate(1.35);
  transition: opacity .16s ease, transform .16s cubic-bezier(.2,.8,.2,1), visibility .16s ease;
}
.gallery-card-hover button {
  min-width: 0;
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 10px;
  border-radius: 6px;
  cursor: pointer;
  font: 700 9.5px/1 inherit;
  letter-spacing: -.01em;
  white-space: nowrap;
  transition: color .14s ease,background .14s ease,box-shadow .14s ease;
}
.gallery-card-use {
  flex: 0 0 auto;
  color: #fff;
  background: rgba(28,27,26,.95);
  border: 1px solid rgba(28,27,26,.95);
  box-shadow:0 1px 2px rgba(0,0,0,.12);
}
.gallery-card-case {
  color: #5f5953;
  background: transparent;
  border: 1px solid transparent;
}
.gallery-card-use:hover { background:#000; }
.gallery-card-case:hover { color:#24211f; background:rgba(58,51,45,.07); }
.gallery-card-hover button:focus-visible { outline:2px solid rgba(255,75,54,.32); outline-offset:1px; }
.gallery-card-visual:hover .gallery-card-hover,
.gallery-card-visual:focus-within .gallery-card-hover {
  opacity: 1;
  transform: translate(-50%,0) scale(1);
  visibility: visible;
  pointer-events: auto;
}
.gallery-card-preview:focus-visible { outline: 3px solid rgba(255,75,54,.24); outline-offset: -3px; }
.gallery-template-card.is-featured .gallery-card-hover { color:#24211f; background:rgba(252,251,249,.91); }
.gallery-card-copy {
  min-height: 42px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 7px 1px 0;
}
.gallery-card-copy strong { min-width: 0; overflow: hidden; color: #27221e; font-size: 13px; font-weight: 900; letter-spacing: -.02em; text-overflow: ellipsis; white-space: nowrap; }
.gallery-card-proof { min-width: 0; display: flex; align-items: center; min-height: 22px; color: #777069; font-size: 9px; font-weight: 800; }
.gallery-avatar-stack { display: inline-flex; align-items: center; margin-right: 7px; padding-left: 2px; }
.gallery-avatar {
  width: 19px;
  height: 19px;
  display: grid;
  place-items: center;
  margin-left: -4px;
  color: #fff;
  border: 2px solid #fff;
  border-radius: 50%;
  box-shadow: 0 2px 4px rgba(31,25,21,.12);
  font-style: normal;
  font-size: 7px;
  font-weight: 900;
}
.gallery-avatar:first-child { margin-left: 0; }
.gallery-avatar:nth-child(1) { z-index: 3; }
.gallery-avatar:nth-child(2) { z-index: 2; opacity: .76; transform: scale(.94); }
.gallery-avatar:nth-child(3) { z-index: 1; opacity: .44; transform: scale(.88); }
.gallery-avatar--coral { background: linear-gradient(145deg,#ff7c67,#e83e2e); }
.gallery-avatar--mint { background: linear-gradient(145deg,#75c9a3,#277f65); }
.gallery-avatar--gold { background: linear-gradient(145deg,#e9bb64,#a56b19); }
.gallery-avatar--ink { background: linear-gradient(145deg,#5f6672,#17191d); }
.gallery-avatar--blue { background: linear-gradient(145deg,#72a9e9,#355b9d); }
.gallery-empty { min-height: 260px; display: grid; place-content: center; justify-items: center; gap: 7px; color: #8b837c; }
.gallery-empty[hidden] { display: none; }
.gallery-empty strong { color: #39342f; font-size: 17px; }
.gallery-empty span { font-size: 11px; }

.xhs-cover {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  color: #0d0d0d;
  background:
    repeating-linear-gradient(174deg, transparent 0 31px, rgba(19,19,19,.055) 32px 33px),
    #fffdf7;
  font-family: "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif;
  text-align: left;
}
.xhs-cover::after {
  content: "";
  position: absolute;
  right: -12%;
  bottom: -5%;
  width: 78%;
  height: 31%;
  background: #0c0c0c;
  transform: rotate(-8deg);
}
.xhs-cover h3 {
  position: absolute;
  top: 19%;
  left: 9%;
  z-index: 2;
  margin: 0;
  font-size: clamp(22px, 2.25vw, 39px);
  font-weight: 950;
  line-height: 1.06;
  letter-spacing: -.09em;
}
.xhs-cover h3 em { color: #ff2442; font-style: normal; }
.xhs-kicker {
  position: absolute;
  top: 9%;
  left: 7%;
  z-index: 3;
  padding: 6px 10px;
  color: #fff;
  background: #ff2442;
  font-size: clamp(7px,.65vw,10px);
  font-weight: 900;
  letter-spacing: .06em;
  transform: rotate(-1.7deg);
}
.xhs-page-no { position: absolute; top: 4%; right: 5%; z-index: 2; font: 900 8px/1 ui-monospace,monospace; }
.xhs-highlight {
  position: absolute;
  top: 57%;
  left: 9%;
  z-index: 4;
  padding: 4px 8px 5px;
  background: #ffe100;
  font-size: clamp(8px,.8vw,13px);
  font-weight: 950;
  transform: rotate(-7deg);
}
.xhs-highlight::after {
  content: "";
  position: absolute;
  inset: -3px -7px;
  border: 2px solid #111;
  border-radius: 50%;
  transform: rotate(5deg);
}
.xhs-zero {
  position: absolute;
  bottom: 15%;
  left: 6%;
  z-index: 5;
  padding: 5px 9px;
  color: #fff;
  background: #ff2442;
  font-size: clamp(10px,1vw,16px);
  font-weight: 950;
  letter-spacing: -.04em;
  transform: rotate(-5deg);
}
.xhs-phone {
  position: absolute;
  right: 7%;
  bottom: 9%;
  z-index: 6;
  width: 31%;
  height: 37%;
  padding: 11% 7% 4%;
  background: #fff;
  border: 4px solid #111;
  border-radius: 13px;
  box-shadow: 7px 8px 0 #ffe100;
  transform: rotate(6deg);
}
.xhs-phone::before { content: ""; position: absolute; top: 4%; left: 38%; width: 24%; height: 4%; background: #111; border-radius: 99px; }
.xhs-phone i { display: block; height: 13%; margin: 9% 0; background: #eee9e3; border-radius: 2px; }
.xhs-phone i:nth-child(2) { width: 78%; background: #ffc7cf; }
.xhs-phone i:nth-child(3) { width: 60%; }
.xhs-phone b { position: absolute; left: 9%; bottom: 8%; font-size: 6px; }
.xhs-tape { position: absolute; right: 19%; top: 12%; width: 25%; height: 8%; background: rgba(255,224,0,.64); transform: rotate(11deg); mix-blend-mode: multiply; }
.xhs-cover footer { position: absolute; right: 5%; bottom: 3%; z-index: 8; color: #fff; font-size: clamp(6px,.55vw,9px); font-weight: 800; }
.xhs-cover.is-compact h3 { font-size: clamp(18px,1.55vw,27px); }
.xhs-cover.is-compact .xhs-phone { border-width: 3px; border-radius: 9px; }
.xhs-cover.is-compact .xhs-kicker { padding: 4px 6px; }
.xhs-cover.is-compact .xhs-highlight { padding: 3px 5px; }
.xhs-cover--system,
.xhs-cover--steps { padding: 11% 8%; background: #fffdf7; }
.xhs-cover--system::after { right: -30%; bottom: -18%; width: 90%; height: 38%; background: #ff2442; }
.xhs-cover--system h3,
.xhs-cover--steps h3 { position: relative; top: auto; left: auto; margin-top: 25%; font-size: clamp(22px,2.1vw,36px); }
.xhs-cover--system .xhs-kicker,
.xhs-cover--steps .xhs-kicker { top: 8%; left: 8%; }
.xhs-cover--system ol {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
  margin: 9% 0 0;
  padding: 0;
  list-style: none;
}
.xhs-cover--system li { display: flex; align-items: center; gap: 6px; padding: 7px; background: #f2eee8; border: 1px solid #ded6ce; font-size: clamp(7px,.7vw,11px); font-weight: 850; }
.xhs-cover--system li b { color: #ff2442; font: 900 .85em/1 ui-monospace,monospace; }
.xhs-scribble { position: absolute; right: 8%; bottom: 6%; z-index: 4; color: #fff; font-size: clamp(9px,.85vw,14px); font-weight: 950; transform: rotate(-5deg); }
.xhs-cover--steps { color: #fff; background: #111; }
.xhs-cover--steps::after { right: -10%; bottom: -8%; width: 85%; height: 27%; background: #ffe100; }
.xhs-cover--steps h3 { color: #fff; }
.xhs-cover--steps .xhs-kicker { color: #111; background: #ffe100; }
.xhs-checklist { position: relative; z-index: 4; display: grid; gap: 7px; margin-top: 8%; }
.xhs-checklist span { padding: 7px 9px 7px 25px; color: #111; background: #fffdf7; font-size: clamp(7px,.65vw,10px); font-weight: 850; }
.xhs-checklist span::before { content: "✓"; margin-left: -17px; margin-right: 7px; color: #ff2442; }
.xhs-cover--steps > strong { position: absolute; right: 6%; bottom: 4%; z-index: 5; color: #111; font-size: clamp(8px,.8vw,13px); }

.highlight-note-page {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  color: #252422;
  background:
    linear-gradient(90deg,rgba(252,245,128,.14),transparent 28%),
    #fff;
  font-family: "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif;
  text-align: left;
}
.highlight-note-page--cover img { width: 100%; height: 100%; display: block; object-fit: cover; }
.highlight-note-page header {
  display: grid;
  grid-template-columns: 34px minmax(0,1fr) auto;
  align-items: center;
  gap: 9px;
  padding: 7% 7% 0;
}
.highlight-note-page header > i {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  color: #fff;
  background: #ff4b31;
  border-radius: 50%;
  font-style: normal;
  font-size: 11px;
  font-weight: 900;
}
.highlight-note-page header > span { display: grid; gap: 2px; }
.highlight-note-page header b { color: #ff4b31; font-size: 11px; font-weight: 900; }
.highlight-note-page header small { color: #aaa29b; font-size: 7px; }
.highlight-note-page header em { align-self: start; color: #aaa29b; font: 800 8px/1 ui-monospace,monospace; }
.highlight-note-page h3 {
  margin: 10% 7% 0;
  font-size: clamp(21px,2.3vw,36px);
  font-weight: 950;
  line-height: 1.16;
  letter-spacing: -.05em;
}
.highlight-note-page mark {
  color: inherit;
  background: linear-gradient(transparent 48%,#fff27a 48% 92%,transparent 92%);
}
.highlight-note-page > p {
  margin: 6% 7% 0;
  color: #5e5953;
  font-size: clamp(8px,.78vw,12px);
  font-weight: 600;
  line-height: 1.8;
}
.highlight-note-board {
  min-height: 27%;
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 4%;
  align-items: end;
  margin: 8% 7% 0;
  padding: 8% 6%;
  background:
    radial-gradient(circle at 15% 28%,#ffe044 0 5%,transparent 5.5%),
    radial-gradient(circle at 84% 68%,#ff4b31 0 5%,transparent 5.5%),
    linear-gradient(145deg,#f4efe5,#fff);
  border: 1px solid #e4d9cc;
  border-radius: 4%;
}
.highlight-note-board > span {
  min-height: 78px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 10px 8px;
  background: #fff;
  border: 1px solid #e7ded4;
  box-shadow: 0 8px 18px rgba(46,37,29,.09);
  font: 900 10px/1 ui-monospace,monospace;
  transform: rotate(-3deg);
}
.highlight-note-board > span:nth-child(2) { transform: translateY(-11%) rotate(2deg); }
.highlight-note-board > span:nth-child(3) { transform: rotate(4deg); }
.highlight-note-board small { color: #48433e; font: 850 8px/1.3 "PingFang SC","Microsoft YaHei","Noto Sans CJK SC",sans-serif; }
.highlight-note-page blockquote {
  margin: 7% 7% 0;
  padding-left: 4%;
  color: #36322e;
  border-left: 4px solid #fff05b;
  font-size: clamp(10px,1vw,15px);
  font-weight: 700;
  line-height: 1.65;
}
.highlight-note-page blockquote strong { font-weight: 950; }
.highlight-note-page > footer { position: absolute; right: 6%; bottom: 3%; color: #b0aaa3; font: 700 6px/1 ui-monospace,monospace; }
.highlight-note-page--quote { background: linear-gradient(150deg,#fff 0 58%,#fff27a 58% 100%); }
.highlight-note-sticker {
  position: absolute;
  top: 24%;
  right: 7%;
  padding: 5px 8px;
  color: #fff;
  background: #ff4b31;
  font-size: 8px;
  font-weight: 900;
  transform: rotate(4deg);
}
.highlight-note-page--quote h3 { margin-top: 16%; font-size: clamp(30px,3.5vw,54px); }
.highlight-note-lines { display: grid; gap: 13px; margin: 9% 7% 0; }
.highlight-note-lines span { height: 1px; background: #d8d0c8; }
.highlight-note-page.is-compact header,
.highlight-note-page.is-compact > p,
.highlight-note-page.is-compact blockquote,
.highlight-note-page.is-compact > footer { opacity: .75; }

.gallery-detail-dialog {
  width: min(980px, calc(100vw - 80px));
  max-height: calc(100vh - 72px);
  padding: 0;
  color: #1b1816;
  background: transparent;
  border: 0;
  overflow: visible;
}
.gallery-detail-dialog::backdrop { background: rgba(24,20,18,.7); backdrop-filter: blur(9px); }
.gallery-detail-card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(440px,1.08fr) minmax(360px,.92fr);
  height: min(640px, calc(100vh - 72px));
  min-height: 620px;
  overflow: hidden;
  background:
    radial-gradient(circle at 84% 12%, rgba(255,244,132,.1), transparent 18rem),
    #fffdfa;
  border: 1px solid rgba(255,255,255,.55);
  border-radius: 22px;
  box-shadow: 0 40px 110px rgba(16,12,10,.36);
}
.gallery-detail-close {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 10;
  width: 36px;
  height: 36px;
  padding: 0 0 2px;
  color: #514a44;
  background: rgba(255,253,249,.92);
  border: 1px solid #dfd5ca;
  border-radius: 50%;
  cursor: pointer;
  font-size: 23px;
  line-height: 1;
}
.gallery-detail-close:hover,.gallery-detail-close:focus-visible { color: #fff; background: #211d1a; outline: 0; }
.gallery-detail-preview {
  min-width: 0;
  display: block;
  padding: 12px 14px;
  background:
    radial-gradient(circle at 22% 14%, rgba(255,255,255,.94), transparent 18rem),
    repeating-linear-gradient(0deg, rgba(79,61,45,.018) 0 1px, transparent 1px 5px),
    #f3efe9;
  border-right: 1px solid #e9e0d7;
}
.gallery-preview-layout {
  height: 100%;
  display: grid;
  grid-template-columns: minmax(0,1fr) 76px;
  align-items: center;
  gap: 8px;
}
.gallery-detail-preview:not(.has-thumbs) .gallery-preview-layout { grid-template-columns: 1fr; }
.gallery-preview-stage { min-height: 0; display: grid; place-items: center; }
.gallery-preview-stage > .xhs-cover,
.gallery-preview-stage > .highlight-note-page,
.gallery-preview-stage > img {
  width: auto;
  height: min(500px, 70vh);
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 8px;
  box-shadow: 0 24px 56px rgba(40,30,22,.16);
}
.gallery-page-rail {
  min-width: 0;
  display: grid;
  grid-template-rows: 28px 18px minmax(0,1fr) 28px;
  align-items: center;
  justify-items: center;
  gap: 7px;
}
.gallery-detail-preview:not(.has-thumbs) .gallery-page-rail { display: none; }
.gallery-page-rail > strong {
  color: #6c625a;
  font: 800 9px/1 ui-monospace,monospace;
  letter-spacing: .06em;
}
.gallery-rail-arrow {
  width: 28px;
  height: 28px;
  padding: 0 0 2px;
  color: #504943;
  background: rgba(255,255,255,.82);
  border: 1px solid #d8d0c8;
  border-radius: 50%;
  cursor: pointer;
  font-size: 17px;
  line-height: 1;
}
.gallery-rail-arrow:hover:not(:disabled),.gallery-rail-arrow:focus-visible { color: #fff; background: #ff4e3a; border-color: #ff4e3a; outline: 0; }
.gallery-rail-arrow:disabled { opacity: .28; cursor: default; }
.gallery-page-thumbs {
  min-height: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 9px;
}
.gallery-page-thumbs[hidden] { display: none; }
.gallery-page-thumbs button {
  width: 64px;
  height: 86px;
  aspect-ratio: 3 / 4;
  padding: 0;
  overflow: hidden;
  background: #fff;
  border: 2px solid rgba(125,109,94,.14);
  border-radius: 8px;
  cursor: pointer;
  opacity: .66;
  transition: opacity .18s ease, transform .18s ease, border-color .18s ease;
}
.gallery-page-thumbs button:hover { opacity: .9; transform: translateX(-2px); }
.gallery-page-thumbs button.active { border-color: #ff4e3a; opacity: 1; box-shadow: 0 6px 16px rgba(56,38,27,.13); }
.gallery-page-thumbs button .xhs-cover { pointer-events: none; }
.gallery-page-thumbs button .highlight-note-page { pointer-events: none; }
.gallery-page-thumbs button .highlight-note-page--cover img { object-fit: cover; }
.gallery-page-thumbs button .highlight-note-page:not(.highlight-note-page--cover) {
  width: 300%;
  height: 400%;
  transform: scale(.333);
  transform-origin: left top;
}
.gallery-page-thumbs .xhs-cover h3 { font-size: 8px; }
.gallery-page-thumbs .xhs-kicker { padding: 2px 3px; font-size: 3px; }
.gallery-page-thumbs .xhs-highlight,.gallery-page-thumbs .xhs-zero { font-size: 4px; }
.gallery-page-thumbs .xhs-cover--system li,.gallery-page-thumbs .xhs-checklist span { padding: 2px; font-size: 3px; }
.gallery-detail-copy {
  --gallery-detail-xs: 8px;
  --gallery-detail-sm: 9px;
  --gallery-detail-md: 10px;
  --gallery-detail-lg: 11px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding: 28px 28px 18px;
}
.gallery-detail-heading > span { color: #ff4d36; font: 900 var(--gallery-detail-sm)/1 ui-monospace,monospace; letter-spacing: .12em; }
.gallery-detail-heading h2 { margin: 12px 0 10px; padding-right: 38px; font-size: 38px; font-weight: 950; line-height: 1.04; letter-spacing: -.055em; }
.gallery-detail-heading > div { display: flex; gap: 7px; }
.gallery-detail-heading > div span { padding: 6px 10px; color: #44735c; background: #e9f4ed; border-radius: 999px; font-size: var(--gallery-detail-sm); font-weight: 850; }
.gallery-detail-heading > div span + span { color: #ef5a30; background: #fff1e5; }
.gallery-detail-heading p { margin: 11px 0 0; color: #6f6760; font-size: var(--gallery-detail-md); line-height: 1.6; }
.gallery-detail-guide {
  display: grid;
  gap: 10px;
  margin-top: 14px;
  padding: 15px 16px 13px;
  color: #403a34;
  background:
    linear-gradient(135deg,rgba(255,250,198,.94),rgba(255,246,159,.82)),
    #fff8ac;
  border: 1px solid #eadb59;
  border-radius: 10px;
}
.gallery-detail-guide-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.gallery-detail-guide-heading span { color: #ae8e00; font: 850 11px/1 ui-monospace,monospace; letter-spacing: .13em; }
.gallery-detail-guide-heading strong { font-size: 15px; font-weight: 900; }
.gallery-detail-guide ol { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.gallery-detail-guide li { display: grid; grid-template-columns: 27px 1fr; gap: 9px; align-items: start; font-size: 13px; line-height: 1.55; }
.gallery-detail-guide li b {
  width: 27px;
  height: 21px;
  display: grid;
  place-items: center;
  color: #fff;
  background: #28231f;
  border-radius: 99px;
  font: 800 10px/1 ui-monospace,monospace;
}
.gallery-detail-guide > p {
  display: flex;
  gap: 9px;
  margin: 1px 0 0;
  padding-top: 9px;
  color: #756b31;
  border-top: 1px solid rgba(154,131,18,.18);
  font-size: 11px;
  line-height: 1.55;
}
.gallery-detail-guide > p i { font-style: normal; }
.gallery-detail-guide > p b { font-weight: 800; }
.gallery-detail-spec { display: grid; gap: 8px; padding: 10px 0 8px; }
.gallery-detail-spec > span,.gallery-detail-palette > span { color: #948b83; font-size: var(--gallery-detail-sm); font-weight: 800; }
.gallery-detail-use-cases { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 7px; }
.gallery-detail-use-cases > span {
  min-width: 0;
  min-height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 7px;
  color: #423c36;
  background: #fffdf9;
  border: 1px solid #e4d9ce;
  border-radius: 8px;
  font-size: var(--gallery-detail-sm);
  font-weight: 820;
  white-space: nowrap;
}
.gallery-detail-use-cases i { color: #f0a800; font-style: normal; }
.gallery-detail-palette { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 4px; }
.gallery-swatches { display: flex; gap: 7px; }
.gallery-swatches i { width: 20px; height: 20px; background: var(--swatch); border: 1px solid rgba(0,0,0,.09); border-radius: 50%; }
.gallery-detail-actions {
  display: grid;
  grid-template-columns: minmax(0,1fr) 58px;
  align-items: stretch;
  gap: 9px;
  margin-top: auto;
}
.gallery-icon-action {
  min-width: 0;
  min-height: 52px;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 0 4px;
  color: #6f6760;
  background: #fffdf9;
  border: 1px solid #e1d8cf;
  border-radius: 12px;
  cursor: pointer;
  font-size: 7px;
}
.gallery-icon-action b { font-size: 19px; font-weight: 550; line-height: 1; }
.gallery-favorite-action b { color: #eeb000; }
.gallery-icon-action.is-favorite b { color: #ffb600; }
.gallery-icon-action:hover,.gallery-icon-action:focus-visible,.gallery-icon-action.is-favorite { color: #ff4d3a; background: #fff0ec; border-color: #f2bbb2; outline: 0; }
.gallery-use-button {
  width: auto;
  min-height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 21px;
  color: #fff;
  background: linear-gradient(135deg,#ff5d48,#ef3829);
  border: 0;
  border-radius: 12px;
  box-shadow: 0 15px 30px rgba(230,54,36,.24);
  cursor: pointer;
  font: 900 14px/1 inherit;
  transition: transform .18s ease, box-shadow .18s ease;
}
.gallery-use-button:hover,.gallery-use-button:focus-visible { outline: 3px solid rgba(255,75,54,.17); transform: translateY(-2px); box-shadow: 0 17px 32px rgba(230,54,36,.28); }
.gallery-use-button:disabled { cursor: wait; opacity: .78; }

@keyframes gallery-card-enter { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }

@media (max-width: 1120px) {
  .template-gallery-main { width: min(940px, calc(100% - 48px)); }
  .gallery-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .gallery-detail-card { grid-template-columns: minmax(350px,.9fr) minmax(360px,1.1fr); }
}
@media (max-width: 820px) {
  .gallery-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .gallery-detail-dialog { width: min(720px,calc(100vw - 30px)); }
  .gallery-detail-card { grid-template-columns: 1fr; max-height: calc(100vh - 30px); overflow: auto; }
  .gallery-detail-preview { min-height: 590px; }
  .gallery-preview-layout { grid-template-columns: minmax(0,1fr) 76px; }
  .gallery-detail-copy { min-height: 540px; }
}
@media (max-width: 760px) {
  body[data-workspace-mode="gallery"] .topbar { display: flex; left: 0; }
  body[data-workspace-mode="gallery"] .mobile-template-toggle { visibility: hidden; }
  .template-gallery-shell { inset: var(--topbar-h) 0 0 0; }
  .template-gallery-main { width: calc(100% - 28px); padding-top: 15px; }
  .gallery-hero-actions { position: static; width: 100%; margin-bottom: 12px; }
  .gallery-hero-actions > span { display: none; }
  .gallery-hero-actions button { margin-left: auto; }
  .template-gallery-hero { min-height: 316px; padding: 8px 2px 12px; }
  .template-gallery-hero::before { display: none; }
  .template-gallery-hero h1 { font-size: clamp(34px,10.5vw,48px); }
  .gallery-search { width: 100%; }
  .gallery-grid { gap: 23px 11px; }
  .gallery-card-copy { align-items: flex-start; flex-direction: column; gap: 3px; padding-bottom: 4px; }
  .gallery-card-copy strong { font-size: 11px; }
  .gallery-card-proof span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}
@media (max-width: 480px) {
  .gallery-grid { grid-template-columns: 1fr 1fr; }
  .gallery-card-hover { display: none; }
  .gallery-detail-preview { min-height: 520px; padding-inline: 10px; }
  .gallery-preview-layout { grid-template-columns: minmax(0,1fr) 64px; gap: 5px; }
  .gallery-page-thumbs button { width: 54px; height: 72px; }
  .gallery-detail-copy { min-height: 520px; padding: 35px 24px 25px; }
}