.xhs-note-studio {
  min-height: 100%;
  padding: 20px;
  color: rgba(var(--ui-source-1be27b3f5c173a-rgb, 31, 41, 51), var(--ui-source-1be27b3f5c173a-alpha, 1));
}

.xhs-studio-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 24px 28px;
  border: 1px solid rgba(var(--ui-source-1ea3b25c1ec036-rgb, 133, 158, 196), var(--ui-source-1ea3b25c1ec036-alpha, 0.25));
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(var(--ui-source-0f4badda57a669-rgb, 31, 55, 88), var(--ui-source-0f4badda57a669-alpha, 0.94)), rgba(var(--ui-source-bdd11fbf13eb4d-rgb, 25, 91, 91), var(--ui-source-bdd11fbf13eb4d-alpha, 0.88)));
  color: rgba(var(--ui-source-ee13f688c7d66c-rgb, 255, 255, 255), var(--ui-source-ee13f688c7d66c-alpha, 1));
  box-shadow: 0 18px 44px rgba(var(--ui-source-45bb2320d32ff3-rgb, 4, 15, 34), var(--ui-source-45bb2320d32ff3-alpha, 0.16));
}

.xhs-studio-hero span {
  font-size: 11px;
  letter-spacing: 0.16em;
  opacity: 0.72;
}

.xhs-studio-hero h1 {
  margin: 6px 0 8px;
  font-size: 28px;
}

.xhs-studio-hero p {
  margin: 0;
  color: rgba(var(--ui-source-c7db0038e5de2a-rgb, 255, 255, 255), var(--ui-source-c7db0038e5de2a-alpha, 0.76));
}

.xhs-fixed-size {
  display: grid;
  min-width: 168px;
  padding: 14px 18px;
  border: 1px solid rgba(var(--ui-source-33aee4f2470879-rgb, 255, 255, 255), var(--ui-source-33aee4f2470879-alpha, 0.25));
  border-radius: 14px;
  text-align: center;
  background: rgba(var(--ui-source-6c2c07b679e791-rgb, 255, 255, 255), var(--ui-source-6c2c07b679e791-alpha, 0.09));
}

.xhs-fixed-size strong {
  font-size: 22px;
}

.xhs-fixed-size span {
  margin-top: 4px;
  letter-spacing: 0;
}

.xhs-mode-tabs,
.xhs-page-kind-tabs,
.xhs-note-page-rail,
.xhs-note-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.xhs-mode-tabs {
  align-items: stretch;
  justify-content: flex-start;
  margin: 16px 0 10px;
}

.xhs-mode-tab {
  display: grid;
  flex: 0 1 280px;
  gap: 3px;
  min-width: 220px;
  min-height: 78px;
  padding: 13px 16px;
  border-color: rgba(var(--ui-source-3bfaacb1a71125-rgb, 185, 199, 216), var(--ui-source-3bfaacb1a71125-alpha, 1));
  text-align: left;
  background: rgba(var(--ui-source-d89cb5294cfef4-rgb, 255, 255, 255), var(--ui-source-d89cb5294cfef4-alpha, 1));
  color: rgba(var(--ui-source-17378ca48cd81c-rgb, 38, 54, 75), var(--ui-source-17378ca48cd81c-alpha, 1));
}

.xhs-mode-tab strong {
  font-size: 16px;
}

.xhs-mode-tab span {
  color: rgba(var(--ui-source-42021b6dc85d4c-rgb, 100, 114, 134), var(--ui-source-42021b6dc85d4c-alpha, 1));
  font-size: 12px;
  font-weight: 500;
}

.xhs-mode-tab.active {
  border-color: rgba(var(--ui-source-4572c87e4a1c68-rgb, 40, 110, 102), var(--ui-source-4572c87e4a1c68-alpha, 1));
  background: rgba(var(--ui-source-468a6f399b64e2-rgb, 40, 110, 102), var(--ui-source-468a6f399b64e2-alpha, 1));
  color: rgba(var(--ui-source-05208d6a33511d-rgb, 255, 255, 255), var(--ui-source-05208d6a33511d-alpha, 1));
  box-shadow: 0 8px 18px rgba(var(--ui-source-66b1d0a66c6b5c-rgb, 40, 110, 102), var(--ui-source-66b1d0a66c6b5c-alpha, 0.18));
}

.xhs-mode-tab.active span {
  color: rgba(var(--ui-source-b13b993dd4d735-rgb, 255, 255, 255), var(--ui-source-b13b993dd4d735-alpha, 0.78));
}

.xhs-current-context {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  margin-bottom: 12px;
  padding: 8px 12px;
  border: 1px solid rgba(var(--ui-source-22a5540ce02649-rgb, 203, 214, 227), var(--ui-source-22a5540ce02649-alpha, 1));
  border-radius: 11px;
  background: rgba(var(--ui-source-5eb673dc2d5ec8-rgb, 247, 249, 252), var(--ui-source-5eb673dc2d5ec8-alpha, 1));
  color: rgba(var(--ui-source-e5d465bb5c7f65-rgb, 76, 90, 109), var(--ui-source-e5d465bb5c7f65-alpha, 1));
  font-size: 13px;
}

.xhs-current-context > span,
.xhs-section-kicker {
  color: rgba(var(--ui-source-a750a5462068ca-rgb, 40, 110, 102), var(--ui-source-a750a5462068ca-alpha, 1));
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
}

.xhs-current-context strong,
.xhs-current-context b {
  color: rgba(var(--ui-source-b0ca4235ed6980-rgb, 31, 46, 66), var(--ui-source-b0ca4235ed6980-alpha, 1));
}

.xhs-current-context i {
  color: rgba(var(--ui-source-8568b60bd2eaf8-rgb, 154, 167, 183), var(--ui-source-8568b60bd2eaf8-alpha, 1));
  font-style: normal;
}

.xhs-current-context em {
  margin-left: auto;
  color: rgba(var(--ui-source-115aee30474c4d-rgb, 105, 119, 138), var(--ui-source-115aee30474c4d-alpha, 1));
  font-style: normal;
}

.xhs-studio-body {
  display: grid;
  grid-template-columns: 230px minmax(0, 1fr);
  gap: 14px;
  min-height: 720px;
}

.xhs-notes-layout {
  display: grid;
  grid-template-columns: 230px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}

.xhs-notes-layout .xhs-note-create-list {
  grid-template-columns: 1fr;
}

.xhs-studio-sidebar,
.xhs-studio-workspace,
.xhs-studio-welcome,
.xhs-note-create-top {
  border: 1px solid rgba(var(--ui-source-d44154c36a2755-rgb, 133, 158, 196), var(--ui-source-d44154c36a2755-alpha, 0.22));
  border-radius: 16px;
  background: rgba(var(--ui-source-f5e6c9ad94c7c3-rgb, 255, 255, 255), var(--ui-source-f5e6c9ad94c7c3-alpha, 0.94));
  box-shadow: 0 12px 32px rgba(var(--ui-source-55a51ff67cbd0d-rgb, 5, 20, 46), var(--ui-source-55a51ff67cbd0d-alpha, 0.08));
}

.xhs-studio-sidebar {
  padding: 14px;
  overflow: hidden;
}

.xhs-note-create-top {
  padding: 14px;
}

.xhs-note-create-top > header h3,
.xhs-note-create-top > header p {
  margin: 0;
}

.xhs-note-create-top > header p {
  margin-top: 4px;
  color: rgba(var(--ui-source-26f46063105f05-rgb, 107, 114, 128), var(--ui-source-26f46063105f05-alpha, 1));
  font-size: 12px;
}

.xhs-note-create-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 10px;
  margin-top: 12px;
}

.xhs-side-head,
.xhs-property-section > header,
.xhs-canvas-heading,
.xhs-template-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.xhs-side-head h3,
.xhs-property-section h4,
.xhs-note-tools h3 {
  margin: 0;
}

.xhs-section-kicker {
  display: block;
  margin-bottom: 3px;
}

.xhs-side-head p,
.xhs-property-section header span,
.xhs-canvas-heading span,
.xhs-canvas-panel > p,
.xhs-note-tools header p,
.xhs-locked-template-list p {
  margin: 4px 0 0;
  color: rgba(var(--ui-source-26f46063105f05-rgb, 107, 114, 128), var(--ui-source-26f46063105f05-alpha, 1));
  font-size: 12px;
}

.xhs-side-head button {
  flex: none;
  white-space: nowrap;
}

.xhs-private-notice {
  margin: 12px 0;
  padding: 9px 10px;
  border-radius: 10px;
  background: rgba(var(--ui-source-2d5ae30ea29f3e-rgb, 44, 122, 94), var(--ui-source-2d5ae30ea29f3e-alpha, 0.1));
  color: rgba(var(--ui-source-9c138631e284fa-rgb, 44, 115, 91), var(--ui-source-9c138631e284fa-alpha, 1));
  font-size: 12px;
}

.xhs-item-list,
.xhs-layer-list,
.xhs-locked-template-list {
  display: grid;
  gap: 7px;
}

.xhs-item-list {
  max-height: 520px;
  overflow-y: auto;
}

.xhs-list-item,
.xhs-layer-select {
  display: grid;
  gap: 3px;
  width: 100%;
  padding: 10px 11px;
  border: 1px solid rgba(var(--ui-source-c9176fb1b48003-rgb, 188, 201, 217), var(--ui-source-c9176fb1b48003-alpha, 1));
  border-radius: 10px;
  text-align: left;
  background: rgba(var(--ui-source-d89cb5294cfef4-rgb, 255, 255, 255), var(--ui-source-d89cb5294cfef4-alpha, 1));
  color: rgba(var(--ui-source-bede80b98fddb5-rgb, 28, 41, 59), var(--ui-source-bede80b98fddb5-alpha, 1));
}

.xhs-list-item.active,
.xhs-layer-row.active .xhs-layer-select {
  border-color: rgba(var(--ui-source-8b9d60b208f5f0-rgb, 47, 124, 255), var(--ui-source-8b9d60b208f5f0-alpha, 1));
  background: rgba(var(--ui-source-1316a032683d02-rgb, 223, 234, 255), var(--ui-source-1316a032683d02-alpha, 1));
  color: rgba(var(--ui-source-fc6372e144551f-rgb, 23, 55, 95), var(--ui-source-fc6372e144551f-alpha, 1));
  box-shadow: inset 0 0 0 1px rgba(var(--ui-source-888ab2d2db4110-rgb, 47, 124, 255), var(--ui-source-888ab2d2db4110-alpha, 0.16));
}

.xhs-template-list-item.draft {
  border-color: rgba(var(--ui-source-7f2d6d2e4a8a7e-rgb, 212, 164, 93), var(--ui-source-7f2d6d2e4a8a7e-alpha, 1));
  background: rgba(var(--ui-source-67104876cce735-rgb, 255, 246, 232), var(--ui-source-67104876cce735-alpha, 1));
  color: rgba(var(--ui-source-e8989c9ff6960b-rgb, 111, 72, 20), var(--ui-source-e8989c9ff6960b-alpha, 1));
}

.xhs-template-list-item.locked {
  border-color: rgba(var(--ui-source-38c1719d337632-rgb, 126, 179, 157), var(--ui-source-38c1719d337632-alpha, 1));
  background: rgba(var(--ui-source-dabf7da14794df-rgb, 234, 245, 240), var(--ui-source-dabf7da14794df-alpha, 1));
  color: rgba(var(--ui-source-783d83280c7de4-rgb, 36, 95, 77), var(--ui-source-783d83280c7de4-alpha, 1));
}

.xhs-template-list-item.draft.active {
  border-color: rgba(var(--ui-source-4e19b2ab6ac859-rgb, 188, 120, 34), var(--ui-source-4e19b2ab6ac859-alpha, 1));
  background: rgba(var(--ui-source-53fa59a5bb3b98-rgb, 248, 229, 197), var(--ui-source-53fa59a5bb3b98-alpha, 1));
  color: rgba(var(--ui-source-639f5047d90037-rgb, 96, 59, 14), var(--ui-source-639f5047d90037-alpha, 1));
  box-shadow: inset 0 0 0 1px rgba(var(--ui-source-0047c040f39f4c-rgb, 188, 120, 34), var(--ui-source-0047c040f39f4c-alpha, 0.2));
}

.xhs-template-list-item.locked.active {
  border-color: rgba(var(--ui-source-75491cc3454916-rgb, 43, 122, 93), var(--ui-source-75491cc3454916-alpha, 1));
  background: rgba(var(--ui-source-c86341fc49ee6e-rgb, 214, 236, 226), var(--ui-source-c86341fc49ee6e-alpha, 1));
  color: rgba(var(--ui-source-0fff7336852e33-rgb, 23, 76, 57), var(--ui-source-0fff7336852e33-alpha, 1));
  box-shadow: inset 0 0 0 1px rgba(var(--ui-source-70c855bbe73352-rgb, 43, 122, 93), var(--ui-source-70c855bbe73352-alpha, 0.2));
}

.xhs-template-list-item {
  cursor: pointer;
}

.xhs-template-list-line {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
}

.xhs-template-card-title {
  min-width: 0;
  flex: 1;
  overflow: hidden;
  border: 1px solid transparent;
  border-radius: 6px;
  outline: none;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 700;
}

.xhs-template-card-title.editable {
  cursor: text;
}

.xhs-template-card-title.editable:hover,
.xhs-template-card-title.editable:focus {
  padding: 2px 4px;
  border-color: currentColor;
  background: rgba(var(--ui-source-37409e163af5f8-rgb, 255, 255, 255), var(--ui-source-37409e163af5f8-alpha, 0.76));
}

.xhs-template-list-line small {
  flex: none;
  white-space: nowrap;
  font-size: 10px;
}

.xhs-template-list-item.draft small,
.xhs-template-list-item.draft.active small {
  color: rgba(var(--ui-source-9c6525080d33dd-rgb, 132, 89, 30), var(--ui-source-9c6525080d33dd-alpha, 1));
}

.xhs-template-list-item.locked small,
.xhs-template-list-item.locked.active small {
  color: rgba(var(--ui-source-c3c836e49e7102-rgb, 52, 112, 91), var(--ui-source-c3c836e49e7102-alpha, 1));
}

.xhs-list-item span,
.xhs-layer-select span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 700;
}

.xhs-list-item small,
.xhs-layer-select small {
  color: rgba(var(--ui-source-d1b44bf1cc08bc-rgb, 93, 105, 123), var(--ui-source-d1b44bf1cc08bc-alpha, 1));
}

.xhs-list-item.active span,
.xhs-list-item.active small,
.xhs-layer-row.active .xhs-layer-select span,
.xhs-layer-row.active .xhs-layer-select small {
  color: rgba(var(--ui-source-fc6372e144551f-rgb, 23, 55, 95), var(--ui-source-fc6372e144551f-alpha, 1));
}

.xhs-template-list-item.draft.active span,
.xhs-template-list-item.draft.active small {
  color: rgba(var(--ui-source-6f2ac497d6416f-rgb, 106, 66, 16), var(--ui-source-6f2ac497d6416f-alpha, 1));
}

.xhs-template-list-item.locked.active span,
.xhs-template-list-item.locked.active small {
  color: rgba(var(--ui-source-0fff7336852e33-rgb, 23, 76, 57), var(--ui-source-0fff7336852e33-alpha, 1));
}

.xhs-locked-template-list {
  margin-top: 20px;
  padding-top: 14px;
  border-top: 1px solid rgba(var(--ui-source-54b3112fa50072-rgb, 133, 158, 196), var(--ui-source-54b3112fa50072-alpha, 0.2));
}

.xhs-locked-template-list h4 {
  margin: 0 0 4px;
}

.xhs-ai-template-card {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
  padding: 10px;
  border: 1px solid rgba(var(--ui-source-3f65e7a3bacd15-rgb, 133, 158, 196), var(--ui-source-3f65e7a3bacd15-alpha, 0.28));
  border-radius: 11px;
  background: rgba(var(--ui-source-faeab3ae54d061-rgb, 248, 250, 253), var(--ui-source-faeab3ae54d061-alpha, 0.8));
}

.xhs-ai-template-card strong,
.xhs-ai-template-card input,
.xhs-ai-template-card small {
  grid-column: 1 / -1;
}

.xhs-ai-template-card input {
  width: 100%;
  min-width: 0;
  min-height: 36px;
  padding: 7px 9px;
  border: 1px solid rgba(var(--ui-source-dc2faca64f3db6-rgb, 133, 158, 196), var(--ui-source-dc2faca64f3db6-alpha, 0.34));
  border-radius: 8px;
  background: rgba(var(--ui-source-5511d9a3cfe2b1-rgb, 231, 237, 245), var(--ui-source-5511d9a3cfe2b1-alpha, 1));
  color: rgba(var(--ui-source-e221fb75d1e5c5-rgb, 23, 35, 58), var(--ui-source-e221fb75d1e5c5-alpha, 1));
}

.xhs-ai-template-card button {
  min-width: 0;
  padding-inline: 8px;
}

.xhs-ai-template-card small {
  color: rgba(var(--ui-source-6d1e3c44b7bd3e-rgb, 155, 94, 23), var(--ui-source-6d1e3c44b7bd3e-alpha, 1));
}

.xhs-studio-workspace {
  min-width: 0;
  padding: 14px;
}

.xhs-template-toolbar {
  min-height: 48px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(var(--ui-source-fe1a85ad9e2f0b-rgb, 133, 158, 196), var(--ui-source-fe1a85ad9e2f0b-alpha, 0.2));
  flex-wrap: wrap;
}

.xhs-template-ai-settings {
  display: grid;
  grid-template-columns: minmax(210px, 1fr) minmax(320px, 2fr) 150px;
  gap: 12px;
  align-items: end;
  margin: 12px 0;
  padding: 12px;
  border: 1px solid rgba(var(--ui-source-2e05dbc5bf1802-rgb, 44, 122, 94), var(--ui-source-2e05dbc5bf1802-alpha, 0.24));
  border-radius: 12px;
  background: rgba(var(--ui-source-611a8295db31fd-rgb, 44, 122, 94), var(--ui-source-611a8295db31fd-alpha, 0.07));
}

.xhs-template-ai-settings > div,
.xhs-template-ai-settings label {
  display: grid;
  gap: 4px;
}

.xhs-template-ai-settings > div span,
.xhs-template-ai-settings label > span {
  color: rgba(var(--ui-source-26f46063105f05-rgb, 107, 114, 128), var(--ui-source-26f46063105f05-alpha, 1));
  font-size: 11px;
}

.xhs-template-ai-settings textarea,
.xhs-template-ai-settings input {
  width: 100%;
  min-height: 38px;
  padding: 7px 9px;
  border: 1px solid rgba(var(--ui-source-dc2faca64f3db6-rgb, 133, 158, 196), var(--ui-source-dc2faca64f3db6-alpha, 0.34));
  border-radius: 8px;
  background: rgba(var(--ui-source-5511d9a3cfe2b1-rgb, 231, 237, 245), var(--ui-source-5511d9a3cfe2b1-alpha, 1));
  color: rgba(var(--ui-source-e221fb75d1e5c5-rgb, 23, 35, 58), var(--ui-source-e221fb75d1e5c5-alpha, 1));
  font-weight: 600;
}

.xhs-template-ai-settings textarea {
  height: 60px;
  resize: vertical;
}

.xhs-template-ai-settings .xhs-ai-page-count {
  grid-template-columns: 1fr auto;
  align-items: center;
}

.xhs-template-ai-settings .xhs-ai-page-count span {
  grid-column: 1 / -1;
}

.xhs-toolbar-title {
  display: grid;
  min-width: 150px;
}

.xhs-toolbar-title strong {
  overflow: hidden;
  color: rgba(var(--ui-source-b0ca4235ed6980-rgb, 31, 46, 66), var(--ui-source-b0ca4235ed6980-alpha, 1));
  text-overflow: ellipsis;
  white-space: nowrap;
}

.xhs-template-title-editable {
  min-width: 180px;
  padding: 4px 7px;
  border: 1px dashed transparent;
  border-radius: 7px;
  cursor: text;
}

.xhs-template-title-editable:hover,
.xhs-template-title-editable:focus {
  border-color: rgba(var(--ui-source-00186f58aef198-rgb, 106, 164, 154), var(--ui-source-00186f58aef198-alpha, 1));
  background: rgba(var(--ui-source-9c13a8136ca008-rgb, 238, 246, 243), var(--ui-source-9c13a8136ca008-alpha, 1));
  outline: none;
}

.xhs-toolbar-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.xhs-template-toolbar > label {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 260px;
  margin-right: auto;
}

.xhs-template-toolbar > label span {
  flex: none;
  font-size: 12px;
  color: rgba(var(--ui-source-26f46063105f05-rgb, 107, 114, 128), var(--ui-source-26f46063105f05-alpha, 1));
}

.xhs-template-toolbar > label input {
  min-width: 180px;
}

.xhs-template-status {
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
  white-space: nowrap;
}

.xhs-template-status.locked {
  background: rgba(var(--ui-source-822509ea0d58be-rgb, 44, 122, 94), var(--ui-source-822509ea0d58be-alpha, 0.12));
  color: rgba(var(--ui-source-15d3fb831eb039-rgb, 43, 116, 88), var(--ui-source-15d3fb831eb039-alpha, 1));
}

.xhs-template-status.draft {
  background: rgba(var(--ui-source-3196814513af55-rgb, 187, 119, 23), var(--ui-source-3196814513af55-alpha, 0.14));
  color: rgba(var(--ui-source-abc18a80e962b2-rgb, 150, 97, 20), var(--ui-source-abc18a80e962b2-alpha, 1));
}

.xhs-page-management {
  margin: 12px 0;
  padding: 10px 12px;
  border: 1px solid rgba(var(--ui-source-dee42dbe18b581-rgb, 212, 222, 234), var(--ui-source-dee42dbe18b581-alpha, 1));
  border-radius: 12px;
  background: rgba(var(--ui-source-04cdbafcf5f95f-rgb, 247, 249, 252), var(--ui-source-04cdbafcf5f95f-alpha, 1));
}

.xhs-note-actions > span {
  margin-right: 4px;
  color: rgba(var(--ui-source-42021b6dc85d4c-rgb, 100, 114, 134), var(--ui-source-42021b6dc85d4c-alpha, 1));
  font-size: 12px;
  font-weight: 700;
}

.xhs-editor-grid {
  display: grid;
  grid-template-columns: 230px minmax(360px, 1fr) 330px;
  gap: 14px;
  align-items: start;
}

.xhs-reference-panel,
.xhs-canvas-panel,
.xhs-properties-panel,
.xhs-note-tools {
  min-width: 0;
  padding: 12px;
  border: 1px solid rgba(var(--ui-source-df33ffd6c5dd41-rgb, 133, 158, 196), var(--ui-source-df33ffd6c5dd41-alpha, 0.2));
  border-radius: 13px;
  background: rgba(var(--ui-source-a98125fc65ceb9-rgb, 248, 250, 253), var(--ui-source-a98125fc65ceb9-alpha, 0.7));
}

.xhs-reference-panel header h3 {
  margin: 0;
}

.xhs-reference-panel header p {
  margin: 4px 0 0;
  color: rgba(var(--ui-source-26f46063105f05-rgb, 107, 114, 128), var(--ui-source-26f46063105f05-alpha, 1));
  font-size: 12px;
}

.xhs-reference-frame {
  display: grid;
  place-items: center;
  aspect-ratio: 3 / 4;
  margin: 12px 0;
  overflow: hidden;
  border: 1px dashed rgba(133, 158, 196, 0.45);
  border-radius: 10px;
  background: #eceff3;
}

.xhs-reference-frame img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.xhs-reference-frame div {
  display: grid;
  gap: 6px;
  padding: 16px;
  text-align: center;
  color: #697384;
}

.xhs-reference-panel > select,
.xhs-reference-panel > label {
  width: 100%;
  margin-top: 8px;
}

.xhs-reference-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  margin-top: 8px;
}

.xhs-reference-actions > label,
.xhs-reference-actions > button {
  width: 100%;
  min-width: 0;
}

.xhs-reference-layout-button {
  white-space: nowrap;
}

.xhs-reference-strategy {
  display: grid;
  grid-template-columns: 1fr 54px 54px;
  align-items: center;
  gap: 6px;
  margin-top: 7px;
}

.xhs-reference-strategy > span {
  color: rgba(var(--ui-source-3d292dc579b586-rgb, 100, 116, 139), var(--ui-source-3d292dc579b586-alpha, 1));
  font-size: 12px;
}

.xhs-reference-strategy > strong {
  color: rgba(var(--ui-source-f555b4d304c41f-rgb, 31, 111, 99), var(--ui-source-f555b4d304c41f-alpha, 1));
  font-size: 13px;
  font-weight: 700;
}

.xhs-reference-strategy > button {
  min-height: 30px;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(var(--ui-source-14c1a89af6fff7-rgb, 255, 255, 255), var(--ui-source-14c1a89af6fff7-alpha, 1));
  color: rgba(var(--ui-source-154d88aa72c4a3-rgb, 35, 109, 99), var(--ui-source-154d88aa72c4a3-alpha, 1));
  font-size: 12px;
}

.xhs-reference-strategy > button.active {
  background: rgba(var(--ui-source-ad2d88de7e53de-rgb, 35, 109, 99), var(--ui-source-ad2d88de7e53de-alpha, 1));
  color: rgba(var(--ui-source-5db510f491f945-rgb, 255, 255, 255), var(--ui-source-5db510f491f945-alpha, 1));
}

.xhs-canvas-heading {
  margin-bottom: 10px;
}

.xhs-canvas-shell {
  position: relative;
  width: min(100%, 450px);
  margin: 0 auto;
  overflow: hidden;
  border-radius: 4px;
  background: rgba(var(--ui-source-d89cb5294cfef4-rgb, 255, 255, 255), var(--ui-source-d89cb5294cfef4-alpha, 1));
  box-shadow: 0 12px 34px rgba(var(--ui-source-8329d752c86f5d-rgb, 7, 18, 38), var(--ui-source-8329d752c86f5d-alpha, 0.2));
}

.xhs-canvas-with-pages {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 12px;
}

.xhs-canvas-with-pages .xhs-canvas-shell {
  flex: 1 1 450px;
  max-width: 450px;
  margin: 0;
}

.xhs-canvas-with-pages > .xhs-page-kind-tabs,
.xhs-canvas-with-pages > .xhs-note-page-rail {
  display: flex;
  flex: 0 0 88px;
  flex-direction: column;
  align-items: stretch;
  max-height: 420px;
  margin: 0 0 36px;
  padding: 0;
  overflow-y: auto;
  background: transparent;
}

.xhs-canvas-with-pages > .xhs-page-kind-tabs button,
.xhs-canvas-with-pages > .xhs-note-page-rail button {
  width: 100%;
  white-space: nowrap;
}

.xhs-canvas-with-pages > .xhs-page-kind-tabs {
  flex: 0 0 34px;
  align-items: center;
  gap: 10px;
  overflow: visible;
}

.xhs-canvas-with-pages > .xhs-page-kind-tabs .xhs-page-number {
  width: 32px;
  min-width: 32px;
  height: 32px;
  min-height: 32px;
  padding: 0;
  border-radius: 50%;
  line-height: 30px;
  text-align: center;
}

.xhs-canvas-shell canvas {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 4;
  touch-action: none;
}

.xhs-layer-overlay {
  position: absolute;
  z-index: 3;
  box-sizing: border-box;
  border: 1px dashed rgba(var(--ui-source-518de32ec535d7-rgb, 47, 124, 255), var(--ui-source-518de32ec535d7-alpha, 0.72));
  transform-origin: center;
  pointer-events: none;
}

.xhs-text-merge-selected {
  position: absolute;
  z-index: 2;
  box-sizing: border-box;
  border: 2px solid rgba(var(--ui-source-1d93a2483ceda6-rgb, 36, 167, 125), var(--ui-source-1d93a2483ceda6-alpha, 0.92));
  background: rgba(var(--ui-source-eb7af2147f8688-rgb, 36, 167, 125), var(--ui-source-eb7af2147f8688-alpha, 0.12));
  transform-origin: center;
  pointer-events: none;
}

.xhs-text-merge-marquee {
  position: absolute;
  z-index: 6;
  box-sizing: border-box;
  border: 2px solid rgba(var(--ui-source-62a1e86c80c3c4-rgb, 47, 124, 255), var(--ui-source-62a1e86c80c3c4-alpha, 1));
  background: rgba(var(--ui-source-791319eeda2e61-rgb, 47, 124, 255), var(--ui-source-791319eeda2e61-alpha, 0.12));
  pointer-events: none;
}

.xhs-text-merge-marquee[hidden] {
  display: none;
}

.xhs-layer-overlay.editing {
  border-style: solid;
  background: rgba(var(--ui-source-ea0a00bc631762-rgb, 255, 255, 255), var(--ui-source-ea0a00bc631762-alpha, 0.08));
  box-shadow: 0 0 0 1px rgba(var(--ui-source-1e863464a98044-rgb, 255, 255, 255), var(--ui-source-1e863464a98044-alpha, 0.58));
}

.xhs-inline-text-editor {
  position: absolute;
  inset: 0;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 0;
  outline: none;
  background: transparent;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  cursor: text;
  pointer-events: none;
}

.xhs-layer-overlay.editing .xhs-inline-text-editor {
  pointer-events: auto;
  user-select: text;
  visibility: hidden;
  overflow: visible;
}

.xhs-resize-handle {
  position: absolute;
  z-index: 4;
  display: block;
  width: 8px;
  height: 8px;
  border: 2px solid rgba(var(--ui-source-85f3e74940cc20-rgb, 47, 124, 255), var(--ui-source-85f3e74940cc20-alpha, 0.92));
  border-radius: 50%;
  background: rgba(var(--ui-source-d89cb5294cfef4-rgb, 255, 255, 255), var(--ui-source-d89cb5294cfef4-alpha, 1));
  box-shadow: 0 1px 3px rgba(var(--ui-source-f8560d0105ac00-rgb, 11, 40, 82), var(--ui-source-f8560d0105ac00-alpha, 0.2));
  pointer-events: auto;
  touch-action: none;
  user-select: none;
}

.xhs-resize-handle.corner {
  z-index: 5;
  width: 10px;
  height: 10px;
  border-color: rgba(var(--ui-source-626201d2753169-rgb, 223, 131, 34), var(--ui-source-626201d2753169-alpha, 1));
  background: rgba(var(--ui-source-5b2561012d9c98-rgb, 255, 244, 223), var(--ui-source-5b2561012d9c98-alpha, 1));
  box-shadow: 0 1px 4px rgba(var(--ui-source-39122209afa204-rgb, 170, 91, 12), var(--ui-source-39122209afa204-alpha, 0.28));
}

.xhs-resize-handle.edge {
  z-index: auto;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  pointer-events: none;
}

.xhs-resize-handle.edge::before {
  content: "";
  position: absolute;
  z-index: 4;
  inset: 0;
  pointer-events: auto;
}

.xhs-resize-handle.edge::after {
  content: "";
  position: absolute;
  z-index: 6;
  left: 50%;
  top: 50%;
  width: 8px;
  height: 8px;
  border: 2px solid rgba(var(--ui-source-62a1e86c80c3c4-rgb, 47, 124, 255), var(--ui-source-62a1e86c80c3c4-alpha, 1));
  border-radius: 50%;
  background: rgba(var(--ui-source-d89cb5294cfef4-rgb, 255, 255, 255), var(--ui-source-d89cb5294cfef4-alpha, 1));
  box-shadow: 0 1px 3px rgba(var(--ui-source-f8560d0105ac00-rgb, 11, 40, 82), var(--ui-source-f8560d0105ac00-alpha, 0.2));
  transform: translate(-50%, -50%);
  pointer-events: auto;
}

.xhs-resize-handle.nw { left: -5px; top: -5px; cursor: nwse-resize; }
.xhs-resize-handle.ne { right: -5px; top: -5px; cursor: nesw-resize; }
.xhs-resize-handle.se { right: -5px; bottom: -5px; cursor: nwse-resize; }
.xhs-resize-handle.sw { left: -5px; bottom: -5px; cursor: nesw-resize; }
.xhs-resize-handle.n,
.xhs-resize-handle.s {
  left: 0;
  width: 100%;
  height: 14px;
  cursor: ns-resize;
}
.xhs-resize-handle.n { top: -7px; }
.xhs-resize-handle.s { bottom: -7px; }
.xhs-resize-handle.e,
.xhs-resize-handle.w {
  top: 0;
  width: 14px;
  height: 100%;
  cursor: ew-resize;
}
.xhs-resize-handle.e { right: -7px; }
.xhs-resize-handle.w { left: -7px; }

.xhs-properties-panel {
  position: sticky;
  top: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  height: calc(100vh - 300px);
  min-height: 420px;
  max-height: 780px;
  overflow: hidden;
}

.xhs-property-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  flex: none;
}

.xhs-property-tabs button {
  min-width: 0;
  padding-inline: 6px;
}

.xhs-property-tabs button.secondary {
  border-color: rgba(var(--ui-source-e091dd54c39993-rgb, 43, 110, 102), var(--ui-source-e091dd54c39993-alpha, 1));
  background: rgba(var(--ui-source-4b349bb967c4d7-rgb, 255, 255, 255), var(--ui-source-4b349bb967c4d7-alpha, 1));
  color: rgba(var(--ui-source-bab8b5c56423ca-rgb, 36, 95, 88), var(--ui-source-bab8b5c56423ca-alpha, 1));
}

.xhs-property-tabs button:not(.secondary) {
  border-color: rgba(var(--ui-source-929f056fc12620-rgb, 40, 110, 102), var(--ui-source-929f056fc12620-alpha, 1));
  background: rgba(var(--ui-source-fc3c5c37a49851-rgb, 40, 110, 102), var(--ui-source-fc3c5c37a49851-alpha, 1));
  color: rgba(var(--ui-source-66a600141affae-rgb, 255, 255, 255), var(--ui-source-66a600141affae-alpha, 1));
}

.xhs-property-content {
  min-height: 0;
  overflow-y: auto;
  scrollbar-gutter: stable;
}

.xhs-property-content-combined {
  display: grid;
  gap: 8px;
}

.xhs-generate-workspace {
  min-width: 0;
}

.xhs-property-section {
  padding: 11px;
  border: 1px solid rgba(var(--ui-source-df33ffd6c5dd41-rgb, 133, 158, 196), var(--ui-source-df33ffd6c5dd41-alpha, 0.2));
  border-radius: 11px;
  background: rgba(var(--ui-source-e921407e0b2f3a-rgb, 255, 255, 255), var(--ui-source-e921407e0b2f3a-alpha, 0.74));
}

.xhs-property-section > header {
  margin-bottom: 10px;
}

.xhs-property-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.xhs-property-grid label {
  display: grid;
  gap: 4px;
}

.xhs-property-grid label > span {
  font-size: 11px;
  color: rgba(var(--ui-source-26f46063105f05-rgb, 107, 114, 128), var(--ui-source-26f46063105f05-alpha, 1));
}

.xhs-property-grid .span-2 {
  grid-column: span 2;
}

.xhs-property-grid input,
.xhs-property-grid select,
.xhs-property-grid textarea,
.xhs-reference-panel select,
.xhs-template-toolbar input,
.xhs-decoration-add select {
  width: 100%;
  min-height: 34px;
  padding: 6px 8px;
  border: 1px solid rgba(var(--ui-source-dc2faca64f3db6-rgb, 133, 158, 196), var(--ui-source-dc2faca64f3db6-alpha, 0.34));
  border-radius: 8px;
  background: rgba(var(--ui-source-5511d9a3cfe2b1-rgb, 231, 237, 245), var(--ui-source-5511d9a3cfe2b1-alpha, 1));
  color: rgba(var(--ui-source-e221fb75d1e5c5-rgb, 23, 35, 58), var(--ui-source-e221fb75d1e5c5-alpha, 1));
  caret-color: rgba(var(--ui-source-87ad46bf33bb7c-rgb, 23, 35, 58), var(--ui-source-87ad46bf33bb7c-alpha, 1));
  font-weight: 600;
}

.xhs-property-grid input[type="color"] {
  padding: 3px;
}

.xhs-layer-actions,
.xhs-upload-row,
.xhs-layer-order,
.xhs-decoration-add {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
}

.xhs-upload-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 12px;
}

.xhs-upload-row .xhs-file-button,
.xhs-upload-row .xhs-ai-background-button {
  min-width: 0;
  min-height: 40px;
  padding: 6px 4px;
  border: 1px solid rgba(var(--ui-source-a7fb9f5db7c0f0-rgb, 40, 110, 102), var(--ui-source-a7fb9f5db7c0f0-alpha, 1));
  border-radius: 9px;
  background: rgba(var(--ui-source-fb44dc8f49a29f-rgb, 40, 110, 102), var(--ui-source-fb44dc8f49a29f-alpha, 1));
  color: rgba(var(--ui-source-ee13f688c7d66c-rgb, 255, 255, 255), var(--ui-source-ee13f688c7d66c-alpha, 1));
  font-weight: 700;
  font-size: 11px;
}

.xhs-upload-row .xhs-ai-background-button {
  border-color: rgba(var(--ui-source-39c2c24883101e-rgb, 181, 107, 36), var(--ui-source-39c2c24883101e-alpha, 1));
  background: linear-gradient(135deg, rgba(var(--ui-source-c9d8a57046a855-rgb, 255, 247, 234), var(--ui-source-c9d8a57046a855-alpha, 1)), rgba(var(--ui-source-30dad04c6e6c5b-rgb, 248, 227, 193), var(--ui-source-30dad04c6e6c5b-alpha, 1)));
  color: rgba(var(--ui-source-9ef18b829eec39-rgb, 117, 67, 21), var(--ui-source-9ef18b829eec39-alpha, 1));
}

.xhs-upload-row .xhs-ai-background-button:hover:not(:disabled) {
  border-color: rgba(var(--ui-source-96ad8c992f9e8f-rgb, 142, 78, 23), var(--ui-source-96ad8c992f9e8f-alpha, 1));
  background: linear-gradient(135deg, rgba(var(--ui-source-a995ec4f37d15d-rgb, 255, 243, 221), var(--ui-source-a995ec4f37d15d-alpha, 1)), rgba(var(--ui-source-44679e0092818c-rgb, 242, 210, 157), var(--ui-source-44679e0092818c-alpha, 1)));
}

.xhs-page-background-grid {
  grid-template-columns: minmax(62px, 0.65fr) minmax(0, 1.35fr);
}

.xhs-layer-actions button,
.xhs-decoration-add button {
  border-color: rgba(var(--ui-source-350abddff77b15-rgb, 40, 110, 102), var(--ui-source-350abddff77b15-alpha, 1));
  background: rgba(var(--ui-source-dca0fcd1cd19f1-rgb, 40, 110, 102), var(--ui-source-dca0fcd1cd19f1-alpha, 1));
  color: rgba(var(--ui-source-5db510f491f945-rgb, 255, 255, 255), var(--ui-source-5db510f491f945-alpha, 1));
}

.xhs-decoration-add {
  margin: 8px 0;
}

.xhs-decoration-add select {
  flex: 1;
  min-width: 130px;
}

.xhs-layer-list {
  max-height: 190px;
  margin-top: 8px;
  overflow-y: auto;
}

.xhs-layer-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px;
  align-items: stretch;
  padding: 6px;
  border: 1px solid rgba(var(--ui-source-839e65e0ba0832-rgb, 188, 201, 217), var(--ui-source-839e65e0ba0832-alpha, 1));
  border-radius: 10px;
  background: rgba(var(--ui-source-d89cb5294cfef4-rgb, 255, 255, 255), var(--ui-source-d89cb5294cfef4-alpha, 1));
}

.xhs-layer-row.active {
  border-color: rgba(var(--ui-source-8b9d60b208f5f0-rgb, 47, 124, 255), var(--ui-source-8b9d60b208f5f0-alpha, 1));
  background: rgba(var(--ui-source-1316a032683d02-rgb, 223, 234, 255), var(--ui-source-1316a032683d02-alpha, 1));
  box-shadow: inset 0 0 0 1px rgba(var(--ui-source-888ab2d2db4110-rgb, 47, 124, 255), var(--ui-source-888ab2d2db4110-alpha, 0.16));
}

.xhs-layer-main {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.xhs-layer-name-line {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 3px;
  align-items: center;
  min-width: 0;
}

.xhs-layer-index {
  min-width: 0;
  min-height: 28px;
  padding: 3px 2px;
  border: 0;
  background: transparent;
  color: inherit;
  font-weight: 800;
}

.xhs-layer-inline-name {
  min-width: 0;
  min-height: 28px;
  padding: 4px 5px;
  overflow: hidden;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: rgba(var(--ui-source-bede80b98fddb5-rgb, 28, 41, 59), var(--ui-source-bede80b98fddb5-alpha, 1));
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 700;
}

.xhs-layer-inline-name.editable:hover,
.xhs-layer-inline-name.editable:focus {
  border-color: rgba(var(--ui-source-af6fc376558b31-rgb, 47, 124, 255), var(--ui-source-af6fc376558b31-alpha, 1));
  outline: none;
  background: rgba(var(--ui-source-d89cb5294cfef4-rgb, 255, 255, 255), var(--ui-source-d89cb5294cfef4-alpha, 1));
}

.xhs-layer-ai-mode {
  width: 100%;
  min-height: 28px;
  padding: 3px 5px;
  border: 1px solid rgba(var(--ui-source-2fd300a2193fdf-rgb, 133, 158, 196), var(--ui-source-2fd300a2193fdf-alpha, 0.42));
  border-radius: 7px;
  background: rgba(var(--ui-source-9bd83a2ea41901-rgb, 237, 242, 248), var(--ui-source-9bd83a2ea41901-alpha, 1));
  color: rgba(var(--ui-source-0b0c54174da1bf-rgb, 52, 66, 88), var(--ui-source-0b0c54174da1bf-alpha, 1));
  font-size: 11px;
  font-weight: 700;
}

.xhs-layer-kind {
  padding-left: 5px;
  color: rgba(var(--ui-source-a452b573f99cc8-rgb, 93, 105, 123), var(--ui-source-a452b573f99cc8-alpha, 1));
  font-size: 11px;
}

.xhs-layer-delete {
  align-self: end;
  min-width: 52px;
  height: 28px;
  min-height: 28px;
  padding: 3px 8px;
  font-size: 11px;
  border-color: rgba(var(--ui-source-7a38da78ecdd11-rgb, 168, 75, 67), var(--ui-source-7a38da78ecdd11-alpha, 1));
  background: rgba(var(--ui-source-dacc26febf9572-rgb, 168, 75, 67), var(--ui-source-dacc26febf9572-alpha, 1));
  color: rgba(var(--ui-source-ee13f688c7d66c-rgb, 255, 255, 255), var(--ui-source-ee13f688c7d66c-alpha, 1));
}

.xhs-layer-order {
  margin-top: 10px;
}

.xhs-file-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 6px 10px;
  cursor: pointer;
}

.xhs-file-button input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.xhs-studio-welcome,
.xhs-studio-loading {
  display: grid;
  place-content: center;
  min-height: 620px;
  padding: 40px;
  text-align: center;
}

.xhs-studio-welcome h2 {
  margin-bottom: 8px;
}

.xhs-studio-welcome p {
  max-width: 520px;
  color: rgba(var(--ui-source-26f46063105f05-rgb, 107, 114, 128), var(--ui-source-26f46063105f05-alpha, 1));
}

.xhs-studio-welcome button {
  justify-self: center;
  margin-top: 12px;
}

.xhs-template-chooser {
  box-sizing: border-box;
  width: min(100%, 720px);
  min-height: 100%;
  margin: 0 auto;
  padding: 72px 24px 32px;
  overflow-y: auto;
}

.xhs-template-chooser > h2,
.xhs-template-chooser > p {
  margin-inline: auto;
  text-align: center;
}

.xhs-template-chooser > p {
  margin-top: 8px;
  color: rgba(var(--ui-source-26f46063105f05-rgb, 107, 114, 128), var(--ui-source-26f46063105f05-alpha, 1));
}

.xhs-template-chooser .xhs-settings-template-section {
  margin-top: 20px;
  text-align: left;
}

.xhs-empty-small {
  padding: 18px 10px;
  color: rgba(var(--ui-source-40fdfeec578750-rgb, 107, 114, 128), var(--ui-source-40fdfeec578750-alpha, 1));
  text-align: center;
  font-size: 12px;
}

.xhs-note-actions {
  margin-bottom: 12px;
}

.xhs-note-editor-grid {
  display: grid;
  grid-template-columns: minmax(380px, 1fr) 280px;
  gap: 14px;
  align-items: start;
}

.xhs-note-tools {
  display: grid;
  align-content: start;
  gap: 14px;
}

.xhs-note-tools h3,
.xhs-note-tools p {
  margin: 0;
}

.xhs-recent-notes {
  padding-top: 14px;
  border-top: 1px solid rgba(var(--ui-source-e300b48d999cc2-rgb, 133, 158, 196), var(--ui-source-e300b48d999cc2-alpha, 0.24));
}

.xhs-recent-notes > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}

.xhs-recent-notes h4 {
  margin: 0;
}

.xhs-recent-notes header span {
  color: rgba(var(--ui-source-26f46063105f05-rgb, 107, 114, 128), var(--ui-source-26f46063105f05-alpha, 1));
  font-size: 11px;
}

.xhs-recent-note-list {
  display: grid;
  gap: 7px;
}

.xhs-note-tools p {
  margin-top: 6px;
  color: rgba(var(--ui-source-817df50a728552-rgb, 86, 100, 119), var(--ui-source-817df50a728552-alpha, 1));
  line-height: 1.55;
}

.xhs-note-export-bar {
  position: sticky;
  top: 0;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr;
  gap: 7px;
  padding: 8px 0;
  background: rgba(var(--ui-source-1bbbc3e6209b6c-rgb, 248, 250, 253), var(--ui-source-1bbbc3e6209b6c-alpha, 0.96));
  backdrop-filter: blur(8px);
}

.xhs-inline-help {
  display: grid;
  gap: 7px;
  padding: 12px;
  border: 1px solid rgba(var(--ui-source-bb1c603b89c502-rgb, 198, 211, 226), var(--ui-source-bb1c603b89c502-alpha, 1));
  border-radius: 10px;
  background: rgba(var(--ui-source-61ed0fea4d99c3-rgb, 243, 246, 250), var(--ui-source-61ed0fea4d99c3-alpha, 1));
  color: rgba(var(--ui-source-2bb70fa40a553d-rgb, 81, 96, 117), var(--ui-source-2bb70fa40a553d-alpha, 1));
  font-size: 12px;
  line-height: 1.5;
}

.xhs-inline-help strong {
  color: rgba(var(--ui-source-854429c3665155-rgb, 31, 48, 71), var(--ui-source-854429c3665155-alpha, 1));
  font-size: 13px;
}

.xhs-dialog-backdrop {
  position: fixed;
  z-index: 10100;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(var(--ui-source-35cf5dac2a94f2-rgb, 12, 21, 35), var(--ui-source-35cf5dac2a94f2-alpha, 0.52));
  backdrop-filter: blur(5px);
  animation: xhs-dialog-fade 140ms ease-out;
}

.xhs-dialog {
  box-sizing: border-box;
  width: min(460px, calc(100vw - 32px));
  padding: 22px;
  border: 1px solid rgba(var(--ui-source-6a58b3133050b7-rgb, 215, 224, 234), var(--ui-source-6a58b3133050b7-alpha, 1));
  border-radius: 18px;
  background: rgba(var(--ui-source-80e11aad25b8ac-rgb, 255, 255, 255), var(--ui-source-80e11aad25b8ac-alpha, 1));
  color: rgba(var(--ui-source-ada15946742d92-rgb, 30, 44, 63), var(--ui-source-ada15946742d92-alpha, 1));
  box-shadow: 0 26px 70px rgba(var(--ui-source-ebf52c6e11148c-rgb, 7, 18, 38), var(--ui-source-ebf52c6e11148c-alpha, 0.28));
  animation: xhs-dialog-enter 160ms ease-out;
}

.xhs-dialog-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.xhs-dialog-header span {
  color: rgba(var(--ui-source-7dd8906d3b03d2-rgb, 40, 110, 102), var(--ui-source-7dd8906d3b03d2-alpha, 1));
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.xhs-dialog-header h2 {
  margin: 4px 0 0;
  color: rgba(var(--ui-source-2a4ba5a05cd0c3-rgb, 28, 43, 62), var(--ui-source-2a4ba5a05cd0c3-alpha, 1));
  font-size: 21px;
}

.xhs-dialog-close {
  display: grid;
  place-items: center;
  width: 32px;
  min-width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 9px;
  background: rgba(var(--ui-source-a18950fcff116d-rgb, 238, 242, 246), var(--ui-source-a18950fcff116d-alpha, 1));
  color: rgba(var(--ui-source-b96a713d395bf9-rgb, 99, 113, 133), var(--ui-source-b96a713d395bf9-alpha, 1));
  font-size: 22px;
  line-height: 1;
}

.xhs-dialog-message {
  margin: 18px 0 9px;
  color: rgba(var(--ui-source-a40c652d18c3ae-rgb, 82, 96, 116), var(--ui-source-a40c652d18c3ae-alpha, 1));
  font-size: 14px;
  line-height: 1.65;
}

.xhs-dialog-input {
  width: 100%;
  min-height: 46px;
  padding: 10px 12px;
  border: 1px solid rgba(var(--ui-source-5592d0083ee745-rgb, 174, 189, 206), var(--ui-source-5592d0083ee745-alpha, 1));
  border-radius: 10px;
  outline: none;
  background: rgba(var(--ui-source-947ce52a506292-rgb, 248, 250, 252), var(--ui-source-947ce52a506292-alpha, 1));
  color: rgba(var(--ui-source-2005b3f806e840-rgb, 28, 43, 62), var(--ui-source-2005b3f806e840-alpha, 1));
  font-size: 15px;
}

.xhs-dialog-input:focus {
  border-color: rgba(var(--ui-source-f2928238cd1d4b-rgb, 47, 124, 255), var(--ui-source-f2928238cd1d4b-alpha, 1));
  box-shadow: 0 0 0 3px rgba(var(--ui-source-bb42dc772b1c14-rgb, 47, 124, 255), var(--ui-source-bb42dc772b1c14-alpha, 0.15));
}

.xhs-dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: 9px;
  margin-top: 20px;
}

.xhs-dialog-actions button {
  min-width: 92px;
}

.xhs-dialog.xhs-ai-background-dialog {
  width: min(760px, calc(100vw - 32px));
  max-height: calc(100dvh - 32px);
  overflow: auto;
}

.xhs-ai-background-content {
  display: grid;
  gap: 14px;
  margin-top: 18px;
}

.xhs-ai-background-loading,
.xhs-ai-background-failure {
  display: grid;
  place-items: center;
  min-height: min(520px, 62dvh);
  padding: 28px;
  border: 1px solid rgba(var(--ui-source-e07df901d8b78d-rgb, 216, 226, 236), var(--ui-source-e07df901d8b78d-alpha, 1));
  border-radius: 14px;
  background: rgba(var(--ui-source-3484f674e38db1-rgb, 246, 248, 251), var(--ui-source-3484f674e38db1-alpha, 1));
  text-align: center;
}

.xhs-ai-background-loading i {
  width: 44px;
  height: 44px;
  margin-bottom: 10px;
  border: 4px solid rgba(var(--ui-source-2a39b2fbcc9677-rgb, 217, 228, 226), var(--ui-source-2a39b2fbcc9677-alpha, 1));
  border-top-color: rgba(var(--ui-source-57c56afaa40f59-rgb, 40, 110, 102), var(--ui-source-57c56afaa40f59-alpha, 1));
  border-radius: 50%;
  animation: xhs-ai-background-spin 850ms linear infinite;
}

.xhs-ai-background-loading strong,
.xhs-ai-background-failure strong {
  color: rgba(var(--ui-source-2d5b840a12239a-rgb, 33, 51, 73), var(--ui-source-2d5b840a12239a-alpha, 1));
  font-size: 17px;
}

.xhs-ai-background-loading span,
.xhs-ai-background-failure span {
  max-width: 460px;
  margin-top: 8px;
  color: rgba(var(--ui-source-b60d51dc889d64-rgb, 104, 119, 138), var(--ui-source-b60d51dc889d64-alpha, 1));
  font-size: 13px;
  line-height: 1.65;
}

.xhs-ai-background-preview-frame {
  display: grid;
  place-items: center;
  min-height: 360px;
  padding: 12px;
  overflow: hidden;
  border: 1px solid rgba(var(--ui-source-619d4c2427878e-rgb, 213, 222, 232), var(--ui-source-619d4c2427878e-alpha, 1));
  border-radius: 14px;
  background: rgba(var(--ui-source-420539acbc36cf-rgb, 238, 242, 245), var(--ui-source-420539acbc36cf-alpha, 1));
}

.xhs-ai-background-preview-frame img {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 62dvh;
  border-radius: 8px;
  background: rgba(var(--ui-source-d89cb5294cfef4-rgb, 255, 255, 255), var(--ui-source-d89cb5294cfef4-alpha, 1));
  box-shadow: 0 14px 34px rgba(var(--ui-source-02d930fb66fc7d-rgb, 8, 21, 39), var(--ui-source-02d930fb66fc7d-alpha, 0.18));
}

.xhs-ai-background-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: rgba(var(--ui-source-4ec1490e19548c-rgb, 102, 117, 138), var(--ui-source-4ec1490e19548c-alpha, 1));
  font-size: 12px;
}

.xhs-ai-background-meta strong {
  min-width: 0;
  overflow: hidden;
  color: rgba(var(--ui-source-b320ad1b1ddddc-rgb, 38, 55, 77), var(--ui-source-b320ad1b1ddddc-alpha, 1));
  text-overflow: ellipsis;
  white-space: nowrap;
}

.xhs-ai-background-error {
  padding: 10px 12px;
  border: 1px solid rgba(var(--ui-source-ae27fa3a93efaf-rgb, 232, 185, 174), var(--ui-source-ae27fa3a93efaf-alpha, 1));
  border-radius: 10px;
  background: rgba(var(--ui-source-8f02b65d659185-rgb, 255, 243, 240), var(--ui-source-8f02b65d659185-alpha, 1));
  color: rgba(var(--ui-source-85eae2783e84df-rgb, 154, 62, 44), var(--ui-source-85eae2783e84df-alpha, 1));
  font-size: 13px;
  line-height: 1.55;
}

.xhs-ai-background-failure {
  min-height: 260px;
  border-color: rgba(var(--ui-source-ef6ca6d3ce35b2-rgb, 232, 200, 193), var(--ui-source-ef6ca6d3ce35b2-alpha, 1));
  background: rgba(var(--ui-source-10781356b8af10-rgb, 255, 248, 246), var(--ui-source-10781356b8af10-alpha, 1));
}

.xhs-ai-background-actions {
  margin-top: 0;
}

.xhs-ai-background-actions button {
  min-width: 128px;
}

@keyframes xhs-ai-background-spin {
  to { transform: rotate(360deg); }
}

@keyframes xhs-dialog-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes xhs-dialog-enter {
  from { opacity: 0; transform: translateY(8px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

body[data-theme="tech"] .xhs-studio-sidebar,
body[data-theme="tech"] .xhs-studio-workspace,
body[data-theme="tech"] .xhs-studio-welcome,
body[data-theme="tech"] .xhs-note-create-top,
body[data-theme="tech"] .xhs-reference-panel,
body[data-theme="tech"] .xhs-canvas-panel,
body[data-theme="tech"] .xhs-properties-panel,
body[data-theme="tech"] .xhs-note-tools,
body[data-theme="tech"] .xhs-property-section {
  background: rgba(8, 20, 39, 0.86);
  border-color: rgba(85, 147, 224, 0.24);
  color: #e8f0fc;
}

body[data-theme="tech"] .xhs-property-grid input,
body[data-theme="tech"] .xhs-property-grid select,
body[data-theme="tech"] .xhs-property-grid textarea,
body[data-theme="tech"] .xhs-reference-panel select,
body[data-theme="tech"] .xhs-template-toolbar input,
body[data-theme="tech"] .xhs-decoration-add select {
  background: rgba(9, 25, 48, 0.95);
  color: #e8f0fc;
  border-color: rgba(85, 147, 224, 0.34);
}

body[data-theme="tech"] .xhs-template-ai-settings,
body[data-theme="tech"] .xhs-ai-template-card {
  background: rgba(8, 28, 39, 0.88);
  border-color: rgba(73, 174, 146, 0.3);
}

body[data-theme="tech"] .xhs-template-ai-settings textarea,
body[data-theme="tech"] .xhs-template-ai-settings input,
body[data-theme="tech"] .xhs-ai-template-card input {
  background: rgba(9, 25, 48, 0.95);
  color: #e8f0fc;
  border-color: rgba(85, 147, 224, 0.34);
}

body[data-theme="tech"] .xhs-list-item.active,
body[data-theme="tech"] .xhs-layer-row.active {
  background: rgba(47, 124, 255, 0.22);
}

body[data-theme="tech"] .xhs-list-item,
body[data-theme="tech"] .xhs-layer-row {
  border-color: rgba(112, 157, 213, 0.46);
  background: rgba(13, 31, 55, 0.92);
  color: #e8f0fc;
}

body[data-theme="tech"] .xhs-list-item small,
body[data-theme="tech"] .xhs-layer-kind,
body[data-theme="tech"] .xhs-list-item.active span,
body[data-theme="tech"] .xhs-list-item.active small,
body[data-theme="tech"] .xhs-layer-row.active .xhs-layer-inline-name,
body[data-theme="tech"] .xhs-layer-row.active .xhs-layer-kind {
  color: #d5e3f6;
}

body[data-theme="tech"] .xhs-layer-inline-name,
body[data-theme="tech"] .xhs-layer-index {
  color: #e8f0fc;
}

body[data-theme="tech"] .xhs-layer-inline-name.editable:hover,
body[data-theme="tech"] .xhs-layer-inline-name.editable:focus,
body[data-theme="tech"] .xhs-layer-ai-mode {
  border-color: rgba(85, 147, 224, 0.48);
  background: rgba(9, 25, 48, 0.95);
  color: #e8f0fc;
}

body[data-theme="tech"] .xhs-note-tools p {
  color: #c6d4e8;
}

body[data-theme="tech"] .xhs-inline-help {
  border-color: rgba(85, 147, 224, 0.34);
  background: rgba(9, 25, 48, 0.95);
  color: #c6d4e8;
}

body[data-theme="tech"] .xhs-inline-help strong {
  color: #e8f0fc;
}

body[data-theme="tech"] .xhs-note-export-bar {
  background: rgba(8, 20, 39, 0.96);
}

body[data-theme="tech"] .xhs-current-context,
body[data-theme="tech"] .xhs-page-management {
  border-color: rgba(85, 147, 224, 0.3);
  background: rgba(8, 20, 39, 0.72);
  color: #c6d4e8;
}

body[data-theme="tech"] .xhs-current-context strong,
body[data-theme="tech"] .xhs-current-context b,
body[data-theme="tech"] .xhs-toolbar-title strong {
  color: #e8f0fc;
}

body[data-theme="tech"] .xhs-mode-tab.secondary {
  border-color: rgba(85, 147, 224, 0.34);
  background: rgba(8, 20, 39, 0.82);
  color: #e8f0fc;
}

body[data-theme="tech"] .xhs-mode-tab.secondary span,
body[data-theme="tech"] .xhs-current-context em {
  color: #b9c9de;
}

body[data-theme="tech"] .xhs-dialog {
  border-color: rgba(85, 147, 224, 0.35);
  background: #0d2038;
  color: #e8f0fc;
}

body[data-theme="tech"] .xhs-dialog-header h2 {
  color: #f1f6ff;
}

body[data-theme="tech"] .xhs-dialog-message {
  color: #c6d4e8;
}

body[data-theme="tech"] .xhs-dialog-close,
body[data-theme="tech"] .xhs-dialog-input {
  border-color: rgba(85, 147, 224, 0.38);
  background: #102b4a;
  color: #f1f6ff;
}

@media (max-width: 1420px) {
  .xhs-editor-grid {
    grid-template-columns: 200px minmax(330px, 1fr) 290px;
  }
}

@media (max-width: 1120px) {
  .xhs-studio-body {
    grid-template-columns: 1fr;
  }
  .xhs-studio-sidebar {
    max-height: none;
  }
  .xhs-item-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    max-height: 220px;
  }
  .xhs-editor-grid {
    grid-template-columns: 210px minmax(360px, 1fr);
  }
  .xhs-properties-panel {
    grid-column: 1 / -1;
    position: static;
    height: auto;
    min-height: 0;
    max-height: none;
  }
  .xhs-property-content {
    overflow: visible;
  }
  .xhs-template-ai-settings {
    grid-template-columns: 1fr 2fr 130px;
  }
  .xhs-note-create-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .xhs-note-studio {
    padding: 10px;
  }
  .xhs-studio-hero,
  .xhs-template-toolbar {
    align-items: stretch;
    flex-direction: column;
  }
  .xhs-fixed-size {
    min-width: 0;
  }
  .xhs-mode-tab {
    flex: 1 1 220px;
  }
  .xhs-current-context {
    align-items: flex-start;
    flex-wrap: wrap;
  }
  .xhs-current-context em {
    flex-basis: 100%;
    margin-left: 0;
  }
  .xhs-toolbar-actions {
    align-items: stretch;
    flex-direction: column;
  }
  .xhs-dialog {
    padding: 18px;
  }
  .xhs-dialog-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .xhs-dialog-actions button:only-child {
    grid-column: 1 / -1;
  }
  .xhs-dialog.xhs-ai-background-dialog {
    width: calc(100vw - 20px);
    max-height: calc(100dvh - 20px);
    padding: 14px;
  }
  .xhs-ai-background-preview-frame {
    min-height: 280px;
    padding: 8px;
  }
  .xhs-ai-background-preview-frame img {
    max-height: 54dvh;
  }
  .xhs-ai-background-meta {
    align-items: flex-start;
    flex-direction: column;
    gap: 3px;
  }
  .xhs-item-list,
  .xhs-editor-grid,
  .xhs-properties-panel,
  .xhs-note-editor-grid {
    grid-template-columns: 1fr;
  }
  .xhs-reference-panel {
    order: 2;
  }
  .xhs-canvas-panel {
    order: 1;
  }
  .xhs-properties-panel {
    order: 3;
  }
  .xhs-template-toolbar > label {
    min-width: 0;
  }
  .xhs-template-ai-settings {
    grid-template-columns: 1fr;
  }
  .xhs-note-create-list {
    grid-template-columns: 1fr;
  }
  .xhs-canvas-with-pages {
    align-items: stretch;
    flex-direction: column;
  }
  .xhs-canvas-with-pages .xhs-canvas-shell {
    width: 100%;
    margin: 0 auto;
  }
  .xhs-canvas-with-pages > .xhs-page-kind-tabs,
  .xhs-canvas-with-pages > .xhs-note-page-rail {
    flex: none;
    flex-direction: row;
    max-height: none;
    margin: 0;
    overflow-x: auto;
  }
  .xhs-canvas-with-pages > .xhs-page-kind-tabs button,
  .xhs-canvas-with-pages > .xhs-note-page-rail button {
    width: auto;
  }
}

/* V1.74 · 极简一屏图文制作工作台 */
.xhs-note-studio {
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  padding: 0;
  overflow: hidden;
}

.xhs-feature-home {
  display: grid;
  min-height: 100%;
  place-content: center;
  gap: 24px;
  text-align: center;
}

.xhs-feature-home header h1,
.xhs-feature-home header p {
  margin: 0;
}

.xhs-feature-home header p {
  margin-top: 6px;
  color: rgba(var(--ui-source-26f46063105f05-rgb, 107, 114, 128), var(--ui-source-26f46063105f05-alpha, 1));
}

.xhs-home-shortcuts {
  display: flex;
  justify-content: center;
  gap: 26px;
}

.xhs-home-shortcuts button {
  display: grid;
  place-items: center;
  gap: 7px;
  width: 92px;
  min-height: 92px;
  padding: 10px;
  border: 0;
  border-radius: 18px;
  background: transparent;
  color: rgba(var(--ui-source-031bbed89d6d18-rgb, 36, 95, 88), var(--ui-source-031bbed89d6d18-alpha, 1));
  box-shadow: none;
}

.xhs-home-shortcuts button:hover,
.xhs-home-shortcuts button:focus-visible {
  background: rgba(var(--ui-source-bb686d6cb255d2-rgb, 40, 110, 102), var(--ui-source-bb686d6cb255d2-alpha, 0.08));
  outline: none;
}

.xhs-home-shortcuts button > span {
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  border: 1px solid rgba(var(--ui-source-6617408a37b3f5-rgb, 40, 110, 102), var(--ui-source-6617408a37b3f5-alpha, 0.36));
  border-radius: 15px;
  background: rgba(var(--ui-source-d89cb5294cfef4-rgb, 255, 255, 255), var(--ui-source-d89cb5294cfef4-alpha, 1));
  font-size: 20px;
  font-weight: 800;
  box-shadow: 0 8px 20px rgba(var(--ui-source-a9ef70eaf5e40f-rgb, 21, 56, 61), var(--ui-source-a9ef70eaf5e40f-alpha, 0.08));
}

.xhs-home-shortcuts button strong {
  font-size: 13px;
}

.xhs-minimal-editor {
  position: relative;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  border: 1px solid rgba(var(--ui-source-d44154c36a2755-rgb, 133, 158, 196), var(--ui-source-d44154c36a2755-alpha, 0.22));
  border-radius: 16px;
  background: rgba(var(--ui-source-f5e6c9ad94c7c3-rgb, 255, 255, 255), var(--ui-source-f5e6c9ad94c7c3-alpha, 0.94));
  box-shadow: 0 12px 32px rgba(var(--ui-source-55a51ff67cbd0d-rgb, 5, 20, 46), var(--ui-source-55a51ff67cbd0d-alpha, 0.08));
}

.xhs-workspace-switch {
  position: absolute;
  z-index: 30;
  top: 17px;
  right: 18px;
  display: flex;
  gap: 6px;
}

.xhs-workspace-switch button {
  min-width: 0;
  min-height: 28px;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(var(--ui-source-14c1a89af6fff7-rgb, 255, 255, 255), var(--ui-source-14c1a89af6fff7-alpha, 1));
  font-size: 11px;
  line-height: 1;
  white-space: nowrap;
  box-shadow: 0 4px 12px rgba(var(--ui-source-a9ef70eaf5e40f-rgb, 21, 56, 61), var(--ui-source-a9ef70eaf5e40f-alpha, 0.08));
}

.xhs-workspace-switch button.active {
  background: rgba(var(--ui-source-24e91c46503143-rgb, 39, 107, 94), var(--ui-source-24e91c46503143-alpha, 1));
  border-color: rgba(var(--ui-source-033fa0ae2e9629-rgb, 39, 107, 94), var(--ui-source-033fa0ae2e9629-alpha, 1));
  color: rgba(var(--ui-source-5db510f491f945-rgb, 255, 255, 255), var(--ui-source-5db510f491f945-alpha, 1));
}

.xhs-right-workbench > .xhs-workbench-heading {
  padding-right: 150px;
}

.xhs-one-screen-grid {
  display: grid;
  grid-template-columns: clamp(220px, 17vw, 282px) minmax(420px, 1fr) clamp(240px, 20vw, 320px);
  gap: 10px;
  height: 100%;
  padding: 10px;
}

.xhs-workbench {
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  border: 1px solid rgba(var(--ui-source-d44154c36a2755-rgb, 133, 158, 196), var(--ui-source-d44154c36a2755-alpha, 0.22));
  border-radius: 13px;
  background: rgba(var(--ui-source-095b34604fc5e2-rgb, 247, 249, 252), var(--ui-source-095b34604fc5e2-alpha, 0.9));
}

.xhs-right-workbench {
  display: grid;
  grid-template-rows: 40px minmax(90px, 14%) minmax(0, 1fr);
}

.xhs-right-settings-scroll {
  min-height: 0;
  display: grid;
  grid-template-rows: max-content max-content;
  align-content: start;
  overflow: hidden;
}

.xhs-template-page-settings {
  display: grid;
  gap: 8px;
  margin: 8px 0;
}

.xhs-template-page-settings select {
  width: 100%;
  min-width: 0;
}

.xhs-template-page-settings small {
  color: rgba(var(--ui-source-2d29cf428c7b03-rgb, 99, 122, 120), var(--ui-source-2d29cf428c7b03-alpha, 1));
  font-size: 11px;
  line-height: 1.5;
}

.xhs-workbench-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 44px;
  padding: 10px 12px;
  border-bottom: 1px solid rgba(var(--ui-source-508263164c9ed6-rgb, 133, 158, 196), var(--ui-source-508263164c9ed6-alpha, 0.18));
}

.xhs-workbench-heading strong {
  color: rgba(var(--ui-source-0f44c68a9d4288-rgb, 33, 48, 68), var(--ui-source-0f44c68a9d4288-alpha, 1));
  font-size: 14px;
}

.xhs-workbench-close {
  display: none;
  width: 30px;
  height: 30px;
  min-width: 30px;
  padding: 0;
  border-radius: 50%;
}

.xhs-workbench-scroll {
  display: grid;
  gap: 8px;
  height: calc(100% - 44px);
  padding: 8px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

.xhs-right-template-top,
.xhs-right-layer-middle,
.xhs-right-template-bottom {
  min-height: 0;
  padding: 8px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

.xhs-right-layer-middle,
.xhs-right-template-bottom {
  overflow: visible;
  scrollbar-gutter: auto;
}

.xhs-right-template-top,
.xhs-right-layer-middle {
  border-bottom: 1px solid rgba(var(--ui-source-508263164c9ed6-rgb, 133, 158, 196), var(--ui-source-508263164c9ed6-alpha, 0.18));
}

.xhs-right-template-top {
  overflow: hidden;
}

.xhs-right-template-top .xhs-settings-template-section {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  height: 100%;
  margin: 0;
  padding: 8px;
}

.xhs-right-template-top .xhs-private-notice {
  margin: 7px 0;
  padding: 6px 8px;
}

.xhs-right-template-top .xhs-settings-template-section .xhs-item-list {
  max-height: none;
  min-height: 0;
}

.xhs-right-layer-middle .xhs-property-section {
  margin: 0;
  padding: 7px;
}

.xhs-right-layer-middle .xhs-property-section > header {
  position: static;
  margin: 0 0 6px;
  padding: 0;
  background: transparent;
}

.xhs-right-layer-middle .xhs-property-grid {
  gap: 5px;
}

.xhs-right-layer-middle .xhs-property-grid label {
  gap: 2px;
}

.xhs-right-layer-middle .xhs-property-grid label > span {
  font-size: 10px;
}

.xhs-right-layer-middle .xhs-property-grid input,
.xhs-right-layer-middle .xhs-property-grid select {
  min-height: 28px;
  padding: 4px 6px;
  font-size: 12px;
}

.xhs-right-layer-middle .xhs-layer-copy-actions {
  margin-top: 6px;
}

.xhs-right-layer-middle .xhs-layer-copy-actions button {
  min-height: 30px;
  padding-block: 4px;
}

.xhs-right-template-bottom .xhs-template-management-panel {
  min-height: 0;
}

.xhs-template-left-workbench {
  display: grid;
  grid-template-rows: 44px auto minmax(0, 1fr);
}

.xhs-template-left-workbench .xhs-workbench-scroll {
  height: auto;
  min-height: 0;
  grid-auto-rows: max-content;
  align-content: start;
}

.xhs-template-reference-slot {
  padding: 8px 8px 0;
  border-bottom: 1px solid rgba(var(--ui-source-508263164c9ed6-rgb, 133, 158, 196), var(--ui-source-508263164c9ed6-alpha, 0.18));
}

.xhs-reference-panel-inline {
  padding: 8px;
  border: 1px solid rgba(var(--ui-source-d44154c36a2755-rgb, 133, 158, 196), var(--ui-source-d44154c36a2755-alpha, 0.22));
  border-radius: 10px;
  background: rgba(var(--ui-source-3c64949a269978-rgb, 255, 255, 255), var(--ui-source-3c64949a269978-alpha, 0.84));
}

.xhs-reference-panel-inline header h3 {
  font-size: 13px;
}

.xhs-reference-panel-inline header p {
  display: none;
}

.xhs-reference-panel-inline .xhs-reference-frame {
  width: auto;
  max-width: 100%;
  height: clamp(140px, 22dvh, 200px);
  aspect-ratio: 3 / 4;
  margin: 7px auto;
  border-radius: 7px;
}

.xhs-reference-panel-inline > select,
.xhs-reference-panel-inline .xhs-reference-actions > label,
.xhs-reference-panel-inline .xhs-reference-actions > button {
  min-height: 30px;
  margin-top: 5px;
  font-size: 11px;
}

.xhs-reference-panel-inline .xhs-reference-actions {
  gap: 5px;
  margin-top: 0;
}

.xhs-workbench .xhs-property-section {
  background: rgba(var(--ui-source-3c64949a269978-rgb, 255, 255, 255), var(--ui-source-3c64949a269978-alpha, 0.84));
}

.xhs-workbench .xhs-layer-list {
  max-height: none;
}

.xhs-layer-list-actions {
  display: grid;
  grid-template-columns: 1fr;
}

.xhs-layer-list-actions .danger {
  width: 100%;
}

.xhs-layer-copy-actions {
  margin-top: 10px;
}

.xhs-layer-copy-actions button {
  width: 100%;
}

.xhs-ai-debug textarea,
.xhs-external-ai-prompt textarea {
  display: block; box-sizing: border-box; width: 100%; min-width: 0;
  padding: 9px; border: 1px solid rgba(var(--ui-source-ff9f4900f303eb-rgb, 184, 210, 206), var(--ui-source-ff9f4900f303eb-alpha, 1)); border-radius: 8px;
  background: rgba(var(--ui-source-f8f7c0b315bb50-rgb, 255, 255, 255), var(--ui-source-f8f7c0b315bb50-alpha, 1)); color: rgba(var(--ui-source-ea227830732bf3-rgb, 36, 51, 59), var(--ui-source-ea227830732bf3-alpha, 1)); font: inherit; font-size: 12px;
  line-height: 1.55; resize: vertical; white-space: pre-wrap; overflow-wrap: anywhere;
}
.xhs-complete-ai-hint, .xhs-ai-debug small, .xhs-external-ai-prompt small {
  color: rgba(var(--ui-source-99f087b05cd719-rgb, 107, 119, 129), var(--ui-source-99f087b05cd719-alpha, 1)); font-size: 11px; line-height: 1.5;
}
.xhs-ai-debug { min-width: 0; border: 1px solid rgba(var(--ui-source-230c5417d42fcf-rgb, 200, 221, 215), var(--ui-source-230c5417d42fcf-alpha, 1)); border-radius: 9px; background: rgba(var(--ui-source-2d6bc01b213664-rgb, 247, 251, 249), var(--ui-source-2d6bc01b213664-alpha, 1)); }
.xhs-ai-debug > summary { padding: 10px; cursor: pointer; color: rgba(var(--ui-source-a9dfc8b7494484-rgb, 36, 95, 89), var(--ui-source-a9dfc8b7494484-alpha, 1)); font-weight: 700; font-size: 13px; }
.xhs-ai-debug > summary small { margin-left: 6px; font-weight: 400; }
.xhs-ai-debug-body { display: grid; gap: 8px; padding: 0 10px 10px; min-width: 0; }
.xhs-ai-debug-body p { margin: 0; font-size: 12px; line-height: 1.55; }
.xhs-ai-debug-body label { display: grid; gap: 4px; font-size: 12px; }
.xhs-ai-debug-tabs { display: flex; gap: 6px; }
.xhs-ai-debug-tabs button { flex: 1; min-width: 0; padding: 6px; font-size: 12px; }
.xhs-ai-debug textarea { min-height: 170px; max-height: 380px; font-family: ui-monospace, monospace; }
.xhs-ai-debug-warning { color: rgba(var(--ui-source-04195933c766b7-rgb, 154, 75, 39), var(--ui-source-04195933c766b7-alpha, 1)); background: rgba(var(--ui-source-68e00e237d9b18-rgb, 255, 244, 232), var(--ui-source-68e00e237d9b18-alpha, 1)); border-radius: 6px; padding: 7px; overflow-wrap: anywhere; }
.xhs-external-ai-prompt summary { cursor: pointer; font-size: 12px; }
.xhs-template-management-panel .xhs-external-ai-prompt textarea { min-height: 170px; margin-top: 7px; }
.xhs-copy-ai-prompt { width: fit-content; font-size: 12px; padding: 7px 10px; }

.xhs-ai-preview-card > small { display: block; font-size: 11px; color: rgba(var(--ui-source-2d29cf428c7b03-rgb, 99, 122, 120), var(--ui-source-2d29cf428c7b03-alpha, 1)); margin-bottom: 3px; }
body[data-theme="tech"] .xhs-ai-debug { background: #172534; border-color: #365065; }
body[data-theme="tech"] .xhs-ai-debug > summary { color: #98d5c9; }

.xhs-canvas-stage {
  position: relative;
  display: grid;
  min-width: 0;
  min-height: 0;
  place-items: center;
  overflow: hidden;
  padding: 14px 28px 30px;
  border-radius: 13px;
  background: rgba(245, 248, 251, 0.72);
}

.xhs-template-canvas-layout {
  display: grid;
  min-width: 0;
  min-height: 0;
  height: 100%;
  place-items: center;
}

.xhs-canvas-frame {
  position: relative;
  width: auto;
  max-width: 100%;
  height: min(92%, 1100px, 82dvh);
  max-height: min(1100px, 82dvh);
  aspect-ratio: 3 / 4;
}

.xhs-canvas-frame .xhs-canvas-shell {
  width: 100%;
  max-width: none;
  height: 100%;
  margin: 0;
}

.xhs-canvas-frame .xhs-canvas-shell canvas {
  width: 100%;
  height: 100%;
}

.xhs-canvas-frame > .xhs-page-kind-tabs {
  position: absolute;
  right: 0;
  bottom: -20px;
  display: flex;
  gap: 7px;
  padding: 0;
  background: transparent;
}

.xhs-ai-preview-results {
  position: absolute;
  z-index: 2;
  top: 9%;
  left: clamp(18px, 3.8%, 54px);
  display: grid;
  width: clamp(150px, 17.5%, 230px);
  min-width: 0;
  grid-template-rows: repeat(2, auto);
  gap: clamp(20px, 5dvh, 58px);
  pointer-events: none;
}

.xhs-ai-preview-count-0 {
  display: none;
}

.xhs-ai-preview-card {
  display: block;
  min-height: 0;
}

.xhs-ai-preview-card canvas {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  max-height: 100%;
  min-height: 0;
  margin: 0;
  aspect-ratio: 3 / 4;
  border-radius: 6px;
  background: rgba(var(--ui-source-d89cb5294cfef4-rgb, 255, 255, 255), var(--ui-source-d89cb5294cfef4-alpha, 1));
  box-shadow: 0 3px 10px rgba(var(--ui-source-d4b920e0d572f1-rgb, 18, 34, 59), var(--ui-source-d4b920e0d572f1-alpha, 0.12));
}

.xhs-ai-preview-count-1 .xhs-ai-preview-card:first-child {
  grid-row: 1;
}

.xhs-page-dot {
  width: 9px;
  min-width: 9px;
  height: 9px;
  min-height: 9px;
  padding: 0;
  border: 1px solid rgba(var(--ui-source-a7fb9f5db7c0f0-rgb, 40, 110, 102), var(--ui-source-a7fb9f5db7c0f0-alpha, 1));
  border-radius: 50%;
  background: rgba(var(--ui-source-d89cb5294cfef4-rgb, 255, 255, 255), var(--ui-source-d89cb5294cfef4-alpha, 1));
  box-shadow: none;
}

.xhs-page-dot.active {
  background: rgba(var(--ui-source-468a6f399b64e2-rgb, 40, 110, 102), var(--ui-source-468a6f399b64e2-alpha, 1));
  box-shadow: 0 0 0 2px rgba(var(--ui-source-5926020dd83f11-rgb, 40, 110, 102), var(--ui-source-5926020dd83f11-alpha, 0.12));
}

.xhs-settings-button {
  position: absolute;
  z-index: 12;
  top: 18px;
  right: 18px;
  display: grid;
  width: 38px;
  min-width: 38px;
  height: 38px;
  min-height: 38px;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(var(--ui-source-81c431cf7026ea-rgb, 40, 110, 102), var(--ui-source-81c431cf7026ea-alpha, 0.3));
  border-radius: 50%;
  background: rgba(var(--ui-source-d89cb5294cfef4-rgb, 255, 255, 255), var(--ui-source-d89cb5294cfef4-alpha, 1));
  color: rgba(var(--ui-source-a750a5462068ca-rgb, 40, 110, 102), var(--ui-source-a750a5462068ca-alpha, 1));
  box-shadow: 0 8px 20px rgba(var(--ui-source-8ce7f1ccc6add1-rgb, 21, 56, 61), var(--ui-source-8ce7f1ccc6add1-alpha, 0.12));
}

.xhs-settings-button span {
  font-size: 20px;
  line-height: 1;
}

.xhs-settings-button i {
  display: none;
}

.xhs-settings-button.dirty i {
  position: absolute;
  top: -1px;
  right: -1px;
  display: block;
  width: 9px;
  height: 9px;
  border: 2px solid rgba(var(--ui-source-1df624950511c7-rgb, 255, 255, 255), var(--ui-source-1df624950511c7-alpha, 1));
  border-radius: 50%;
  background: rgba(var(--ui-source-02b307454181fe-rgb, 211, 138, 34), var(--ui-source-02b307454181fe-alpha, 1));
}

.xhs-settings-button.locked::after {
  position: absolute;
  right: -3px;
  bottom: -3px;
  display: grid;
  width: 15px;
  height: 15px;
  place-items: center;
  border: 2px solid rgba(var(--ui-source-94b8542c33b798-rgb, 255, 255, 255), var(--ui-source-94b8542c33b798-alpha, 1));
  border-radius: 50%;
  background: rgba(var(--ui-source-9a18a8deb41bea-rgb, 43, 122, 93), var(--ui-source-9a18a8deb41bea-alpha, 1));
  color: rgba(var(--ui-source-c31264def7017a-rgb, 255, 255, 255), var(--ui-source-c31264def7017a-alpha, 1));
  content: "\1f512";
  font-size: 7px;
}

.xhs-settings-backdrop {
  position: absolute;
  z-index: 30;
  inset: 0;
  background: rgba(var(--ui-source-cac4d10cb02458-rgb, 19, 31, 45), var(--ui-source-cac4d10cb02458-alpha, 0.24));
  backdrop-filter: blur(2px);
}

.xhs-settings-drawer {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(430px, 92%);
  padding: 16px;
  overflow-y: auto;
  background: rgba(var(--ui-source-947ce52a506292-rgb, 248, 250, 252), var(--ui-source-947ce52a506292-alpha, 1));
  box-shadow: -18px 0 42px rgba(var(--ui-source-9e51139480f758-rgb, 10, 24, 44), var(--ui-source-9e51139480f758-alpha, 0.2));
  overscroll-behavior: contain;
}

.xhs-settings-head,
.xhs-settings-current > header,
.xhs-settings-ai > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.xhs-settings-head span,
.xhs-settings-current header div > span,
.xhs-settings-ai header span {
  display: block;
  color: rgba(var(--ui-source-26f46063105f05-rgb, 107, 114, 128), var(--ui-source-26f46063105f05-alpha, 1));
  font-size: 11px;
}

.xhs-settings-head h2 {
  margin: 3px 0 0;
  font-size: 20px;
}

.xhs-settings-close {
  width: 34px;
  min-width: 34px;
  height: 34px;
  padding: 0;
  border-radius: 50%;
  font-size: 20px;
}

.xhs-back-home {
  width: 100%;
  margin: 14px 0 10px;
}

.xhs-settings-template-section,
.xhs-settings-current,
.xhs-settings-ai,
.xhs-settings-drawer .xhs-reference-panel {
  margin-top: 10px;
  padding: 12px;
  border: 1px solid rgba(var(--ui-source-e300b48d999cc2-rgb, 133, 158, 196), var(--ui-source-e300b48d999cc2-alpha, 0.24));
  border-radius: 12px;
  background: rgba(var(--ui-source-d89cb5294cfef4-rgb, 255, 255, 255), var(--ui-source-d89cb5294cfef4-alpha, 1));
}

.xhs-settings-template-section .xhs-item-list {
  max-height: 280px;
}

.xhs-settings-current > header {
  align-items: flex-start;
}

.xhs-settings-current > header > div {
  display: grid;
  min-width: 0;
  flex: 1;
}

.xhs-settings-current .xhs-toolbar-actions {
  margin-top: 12px;
}

.xhs-settings-ai,
.xhs-settings-ai label {
  display: grid;
  gap: 8px;
}

.xhs-settings-ai > header {
  align-items: flex-start;
  flex-direction: column;
  gap: 2px;
}

.xhs-settings-ai label > span {
  color: rgba(var(--ui-source-26f46063105f05-rgb, 107, 114, 128), var(--ui-source-26f46063105f05-alpha, 1));
  font-size: 11px;
}

.xhs-settings-ai textarea,
.xhs-settings-ai input {
  width: 100%;
  padding: 8px 9px;
  border: 1px solid rgba(var(--ui-source-dc2faca64f3db6-rgb, 133, 158, 196), var(--ui-source-dc2faca64f3db6-alpha, 0.34));
  border-radius: 8px;
  background: rgba(var(--ui-source-5511d9a3cfe2b1-rgb, 231, 237, 245), var(--ui-source-5511d9a3cfe2b1-alpha, 1));
  color: rgba(var(--ui-source-e221fb75d1e5c5-rgb, 23, 35, 58), var(--ui-source-e221fb75d1e5c5-alpha, 1));
  font-weight: 600;
}

.xhs-settings-ai textarea {
  min-height: 92px;
  resize: vertical;
}

.xhs-settings-ai .xhs-ai-page-count > div {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 8px;
}

.xhs-template-management-panel {
  display: grid;
  min-width: 0;
  gap: 8px;
  align-content: start;
}

.xhs-template-management-panel > section,
.xhs-template-management-panel .xhs-settings-current header > div { min-width: 0; }

.xhs-template-management-panel .xhs-back-home {
  margin: 0;
}

.xhs-template-management-panel .xhs-settings-template-section,
.xhs-template-management-panel .xhs-settings-current,
.xhs-template-management-panel .xhs-settings-ai {
  margin-top: 0;
  padding: 10px;
}

.xhs-template-management-panel .xhs-settings-template-section .xhs-item-list {
  max-height: 220px;
}

.xhs-template-management-panel .xhs-private-notice {
  margin: 8px 0;
  padding: 7px 8px;
}

.xhs-template-management-panel .xhs-side-head h3 {
  font-size: 14px;
}

.xhs-template-management-panel .xhs-side-head p {
  display: none;
}

.xhs-template-management-panel .xhs-list-item {
  padding: 8px 9px;
}

.xhs-template-management-panel .xhs-settings-ai textarea {
  min-height: 132px;
}

.xhs-template-management-panel .xhs-settings-current .xhs-toolbar-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 10px;
}

.xhs-template-management-panel .xhs-settings-current .xhs-toolbar-actions button {
  min-width: 0;
  padding-inline: 7px;
  white-space: nowrap;
}

.xhs-empty-editor .xhs-studio-welcome {
  min-height: 100%;
  border: 0;
  box-shadow: none;
}

.xhs-mobile-workbench-buttons {
  display: none;
}

.xhs-notes-hub {
  position: relative;
  display: grid;
  gap: 12px;
}

.xhs-notes-home-button {
  justify-self: end;
  min-height: 34px;
}

.xhs-notes-welcome {
  min-height: 360px;
}

body[data-theme="tech"] .xhs-minimal-editor,
body[data-theme="tech"] .xhs-workbench,
body[data-theme="tech"] .xhs-canvas-stage,
body[data-theme="tech"] .xhs-settings-drawer,
body[data-theme="tech"] .xhs-settings-template-section,
body[data-theme="tech"] .xhs-settings-current,
body[data-theme="tech"] .xhs-settings-ai,
body[data-theme="tech"] .xhs-settings-drawer .xhs-reference-panel {
  border-color: rgba(85, 147, 224, 0.28);
  background: rgba(8, 20, 39, 0.94);
}

.xhs-reference-warning {
  padding: 8px 10px;
  border: 1px solid rgba(var(--ui-source-d34412c6dcdbf0-rgb, 231, 182, 91), var(--ui-source-d34412c6dcdbf0-alpha, 1));
  border-radius: 8px;
  background: rgba(var(--ui-source-51e1bf35b01975-rgb, 255, 248, 232), var(--ui-source-51e1bf35b01975-alpha, 1));
  color: rgba(var(--ui-source-b02becce9a1aa8-rgb, 128, 87, 19), var(--ui-source-b02becce9a1aa8-alpha, 1));
  font-size: 12px;
  line-height: 1.5;
}

.xhs-reference-review-backdrop {
  position: fixed;
  inset: 0;
  z-index: 10050;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(var(--ui-source-5e79b3332c0058-rgb, 15, 23, 42), var(--ui-source-5e79b3332c0058-alpha, 0.72));
}

.xhs-reference-review {
  width: min(1540px, 98vw);
  height: min(940px, 96vh);
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  overflow: hidden;
  border-radius: 16px;
  background: rgba(var(--ui-source-04cdbafcf5f95f-rgb, 247, 249, 252), var(--ui-source-04cdbafcf5f95f-alpha, 1));
  box-shadow: 0 28px 80px rgba(var(--ui-source-cae276c9c40ce5-rgb, 0, 0, 0), var(--ui-source-cae276c9c40ce5-alpha, 0.32));
}

.xhs-reference-review-head,
.xhs-reference-review-summary,
.xhs-reference-review-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid rgba(var(--ui-source-a0b96fae17d9f3-rgb, 217, 225, 236), var(--ui-source-a0b96fae17d9f3-alpha, 1));
  background: rgba(var(--ui-source-d89cb5294cfef4-rgb, 255, 255, 255), var(--ui-source-d89cb5294cfef4-alpha, 1));
}

.xhs-reference-review-head {
  justify-content: space-between;
}

.xhs-reference-review-head h2,
.xhs-reference-review-head p {
  margin: 2px 0 0;
}

.xhs-reference-review-head p {
  color: rgba(var(--ui-source-72ffe61a2bde0e-rgb, 96, 112, 134), var(--ui-source-72ffe61a2bde0e-alpha, 1));
  font-size: 13px;
}

.xhs-reference-review-head span {
  color: rgba(var(--ui-source-fb43404bf37580-rgb, 35, 117, 103), var(--ui-source-fb43404bf37580-alpha, 1));
  font-size: 12px;
  font-weight: 700;
}

.xhs-reference-review-close {
  width: 38px;
  height: 38px;
  padding: 0;
  border-radius: 50%;
  font-size: 24px;
}

.xhs-reference-review-summary {
  flex-wrap: wrap;
}

.xhs-reference-review-summary span {
  color: rgba(var(--ui-source-72ffe61a2bde0e-rgb, 96, 112, 134), var(--ui-source-72ffe61a2bde0e-alpha, 1));
  font-size: 13px;
}

.xhs-reference-review-body {
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(560px, 1.25fr) minmax(420px, 0.75fr);
  gap: 14px;
  padding: 14px;
}

.xhs-reference-review-visuals,
.xhs-reference-review-list {
  min-height: 0;
  overflow: auto;
}

.xhs-reference-review-visuals {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.xhs-reference-review-visuals > div {
  padding: 10px;
  border: 1px solid rgba(var(--ui-source-5df255af3b07a9-rgb, 217, 225, 236), var(--ui-source-5df255af3b07a9-alpha, 1));
  border-radius: 12px;
  background: rgba(var(--ui-source-d89cb5294cfef4-rgb, 255, 255, 255), var(--ui-source-d89cb5294cfef4-alpha, 1));
}

.xhs-reference-review-visuals h3 {
  margin: 0 0 8px;
  font-size: 13px;
}

.xhs-reference-review-visuals img,
.xhs-reference-review-visuals canvas {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: contain;
  background: rgba(var(--ui-source-d89cb5294cfef4-rgb, 255, 255, 255), var(--ui-source-d89cb5294cfef4-alpha, 1));
}

.xhs-reference-overlay-stage {
  grid-column: auto;
}

.xhs-reference-overlay-stage > div {
  position: relative;
  width: min(100%, 430px);
  margin: 0 auto;
  aspect-ratio: 3 / 4;
}

.xhs-reference-overlay-stage > div img,
.xhs-reference-overlay-stage > div canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.xhs-reference-overlay-stage label {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
  font-size: 12px;
}

.xhs-reference-review-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-right: 4px;
}

.xhs-reference-review-item {
  padding: 10px;
  border: 1px solid rgba(var(--ui-source-5df255af3b07a9-rgb, 217, 225, 236), var(--ui-source-5df255af3b07a9-alpha, 1));
  border-radius: 12px;
  background: rgba(var(--ui-source-d89cb5294cfef4-rgb, 255, 255, 255), var(--ui-source-d89cb5294cfef4-alpha, 1));
}

.xhs-reference-review-item.warning {
  border-color: rgba(var(--ui-source-82727368e7cda1-rgb, 220, 107, 95), var(--ui-source-82727368e7cda1-alpha, 1));
  box-shadow: inset 4px 0 rgba(var(--ui-source-44122d8a04b978-rgb, 220, 107, 95), var(--ui-source-44122d8a04b978-alpha, 1));
}

.xhs-reference-review-item.confirmed {
  border-color: rgba(var(--ui-source-a2d40afc102434-rgb, 58, 155, 130), var(--ui-source-a2d40afc102434-alpha, 1));
  box-shadow: inset 4px 0 rgba(var(--ui-source-d3a708e84571e2-rgb, 58, 155, 130), var(--ui-source-d3a708e84571e2-alpha, 1));
}

.xhs-reference-review-item > header,
.xhs-reference-review-item > footer,
.xhs-reference-review-metrics {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.xhs-reference-review-item > header {
  justify-content: space-between;
  font-size: 12px;
}

.xhs-reference-review-crop {
  width: 100%;
  height: 80px;
  margin: 8px 0;
  border: 1px solid rgba(var(--ui-source-899efc496ea615-rgb, 226, 232, 240), var(--ui-source-899efc496ea615-alpha, 1));
  border-radius: 8px;
}

.xhs-reference-review-item textarea {
  width: 100%;
  min-height: 58px;
  resize: vertical;
}

.xhs-reference-review-geometry {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
}

.xhs-reference-review-geometry label {
  display: grid;
  gap: 3px;
  color: rgba(var(--ui-source-be3a28d7341a3c-rgb, 100, 116, 139), var(--ui-source-be3a28d7341a3c-alpha, 1));
  font-size: 11px;
}

.xhs-reference-review-geometry input,
.xhs-reference-review-geometry select {
  width: 100%;
  min-width: 0;
  padding: 5px 6px;
}

.xhs-reference-review-item p,
.xhs-reference-review-metrics {
  margin: 6px 0;
  color: rgba(var(--ui-source-72ffe61a2bde0e-rgb, 96, 112, 134), var(--ui-source-72ffe61a2bde0e-alpha, 1));
  font-size: 12px;
}

.xhs-reference-review-status,
.xhs-reference-review-alternatives {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin: 7px 0;
  color: rgba(var(--ui-source-72ffe61a2bde0e-rgb, 96, 112, 134), var(--ui-source-72ffe61a2bde0e-alpha, 1));
  font-size: 12px;
}

.xhs-reference-review-status span {
  padding: 3px 7px;
  border-radius: 999px;
  background: rgba(var(--ui-source-e71871910e15e7-rgb, 238, 244, 246), var(--ui-source-e71871910e15e7-alpha, 1));
}

.xhs-reference-review-alternatives button {
  min-height: 30px;
  padding: 4px 9px;
}

.xhs-reference-review-actions {
  justify-content: flex-end;
  border-top: 1px solid rgba(var(--ui-source-5df255af3b07a9-rgb, 217, 225, 236), var(--ui-source-5df255af3b07a9-alpha, 1));
  border-bottom: 0;
}

@media (max-width: 980px) {
  .xhs-reference-review-body {
    grid-template-columns: 1fr;
    overflow: auto;
  }

  .xhs-reference-review-visuals,
  .xhs-reference-review-list {
    overflow: visible;
  }
}

body[data-theme="tech"] .xhs-workbench-heading strong,
body[data-theme="tech"] .xhs-settings-head h2,
body[data-theme="tech"] .xhs-settings-current strong,
body[data-theme="tech"] .xhs-settings-ai strong {
  color: #e8f0fc;
}

body[data-theme="tech"] .xhs-settings-button,
body[data-theme="tech"] .xhs-home-shortcuts button > span {
  border-color: rgba(85, 147, 224, 0.4);
  background: #102b4a;
  color: #dceaff;
}

@media (max-width: 1100px) {
  .xhs-one-screen-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .xhs-workbench {
    position: absolute;
    z-index: 20;
    top: 0;
    bottom: 0;
    width: min(330px, calc(100% - 60px));
    border-radius: 0 14px 14px 0;
    box-shadow: 18px 0 38px rgba(var(--ui-source-c8638dbf4bb8d1-rgb, 8, 22, 42), var(--ui-source-c8638dbf4bb8d1-alpha, 0.2));
    transition: transform 160ms ease;
  }

  .xhs-left-workbench {
    left: 0;
    transform: translateX(-105%);
  }

  .xhs-right-workbench {
    right: 0;
    border-radius: 14px 0 0 14px;
    box-shadow: -18px 0 38px rgba(var(--ui-source-c8638dbf4bb8d1-rgb, 8, 22, 42), var(--ui-source-c8638dbf4bb8d1-alpha, 0.2));
    transform: translateX(105%);
  }

  .xhs-workbench.open {
    transform: translateX(0);
  }

  .xhs-workbench-close {
    display: grid;
    place-items: center;
  }

  .xhs-mobile-workbench-buttons {
    position: absolute;
    z-index: 12;
    top: 18px;
    left: 18px;
    display: flex;
    gap: 7px;
  }

  .xhs-mobile-workbench-buttons button {
    min-height: 34px;
    padding: 6px 12px;
    border-radius: 999px;
  }

  .xhs-canvas-stage {
    padding-inline: 48px;
  }
}

@media (max-width: 760px) {
  .xhs-note-studio {
    padding: 4px;
  }

  .xhs-minimal-editor {
    height: 100%;
    min-height: 0;
    border-radius: 10px;
  }

  .xhs-one-screen-grid {
    padding: 4px;
  }

  .xhs-canvas-stage {
    padding: 54px 24px 34px;
  }

  .xhs-settings-button {
    top: 12px;
    right: 12px;
  }

  .xhs-mobile-workbench-buttons {
    top: 12px;
    left: 12px;
  }

  .xhs-home-shortcuts {
    gap: 14px;
  }
}

/* 极简一屏“我的笔记”工作台 */
.xhs-note-minimal-editor {
  border-radius: 12px;
  background: rgba(var(--ui-source-e2973ac2474b52-rgb, 246, 248, 250), var(--ui-source-e2973ac2474b52-alpha, 1));
  box-shadow: none;
}

.xhs-note-one-screen-grid {
  display: grid;
  grid-template-columns: 216px minmax(480px, 1fr);
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

.xhs-note-workbench {
  display: grid;
  grid-template-rows: 44px minmax(0, 1fr);
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  background: rgba(var(--ui-source-f5e6c9ad94c7c3-rgb, 255, 255, 255), var(--ui-source-f5e6c9ad94c7c3-alpha, 0.94));
}

.xhs-note-left-workbench {
  border-right: 1px solid rgba(var(--ui-source-df33ffd6c5dd41-rgb, 133, 158, 196), var(--ui-source-df33ffd6c5dd41-alpha, 0.2));
}

.xhs-note-side-heading {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  padding: 6px 8px;
  border-bottom: 1px solid rgba(var(--ui-source-508263164c9ed6-rgb, 133, 158, 196), var(--ui-source-508263164c9ed6-alpha, 0.18));
}

.xhs-note-side-heading > strong {
  min-width: 0;
  overflow: hidden;
  color: rgba(var(--ui-source-b0ca4235ed6980-rgb, 31, 46, 66), var(--ui-source-b0ca4235ed6980-alpha, 1));
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.xhs-note-title-editable {
  flex: 1;
  padding: 4px 5px;
  border: 1px solid transparent;
  border-radius: 6px;
  outline: none;
  cursor: text;
}

.xhs-note-title-editable:hover,
.xhs-note-title-editable:focus {
  border-color: rgba(var(--ui-source-81c431cf7026ea-rgb, 40, 110, 102), var(--ui-source-81c431cf7026ea-alpha, 0.3));
  background: rgba(var(--ui-source-d89cb5294cfef4-rgb, 255, 255, 255), var(--ui-source-d89cb5294cfef4-alpha, 1));
}

.xhs-note-return-template {
  flex: none;
  min-height: 28px;
  padding: 4px 7px;
  border-radius: 7px;
  font-size: 10px;
  line-height: 1;
  white-space: nowrap;
}

.xhs-compact-icon-button {
  display: inline-grid;
  width: 32px;
  min-width: 32px;
  height: 32px;
  min-height: 32px;
  place-items: center;
  padding: 0;
  border-radius: 8px;
  font-size: 14px;
  line-height: 1;
}

.xhs-note-side-scroll {
  display: grid;
  align-content: start;
  gap: 0;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.xhs-note-compact-section,
.xhs-recent-notes {
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 0;
  border-bottom: 1px solid rgba(var(--ui-source-508263164c9ed6-rgb, 133, 158, 196), var(--ui-source-508263164c9ed6-alpha, 0.18));
  background: transparent;
}

.xhs-note-compact-section label {
  display: grid;
  gap: 4px;
}

.xhs-note-compact-section label > span {
  color: rgba(var(--ui-source-115aee30474c4d-rgb, 105, 119, 138), var(--ui-source-115aee30474c4d-alpha, 1));
  font-size: 10px;
  font-weight: 700;
}

.xhs-note-compact-section input,
.xhs-note-compact-section select {
  width: 100%;
  min-width: 0;
  min-height: 34px;
  padding: 6px 8px;
  border: 1px solid rgba(var(--ui-source-8ee71b19e7774f-rgb, 133, 158, 196), var(--ui-source-8ee71b19e7774f-alpha, 0.3));
  border-radius: 7px;
  background: rgba(var(--ui-source-0d8d7d82928492-rgb, 242, 245, 248), var(--ui-source-0d8d7d82928492-alpha, 1));
  color: rgba(var(--ui-source-01e1abb5b0f287-rgb, 31, 46, 66), var(--ui-source-01e1abb5b0f287-alpha, 1));
  font-size: 12px;
  font-weight: 600;
}

.xhs-note-generate-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.xhs-note-generate-button {
  min-width: 0;
  min-height: 34px;
  padding: 6px 10px;
  border-radius: 7px;
  font-size: 12px;
}

.xhs-note-inline-warning {
  display: flex;
  align-items: center;
  width: fit-content;
  min-height: 0;
  gap: 5px;
  padding: 0;
  border: 0;
  background: transparent;
  color: rgba(var(--ui-source-527f18c219db06-rgb, 155, 98, 26), var(--ui-source-527f18c219db06-alpha, 1));
  font-size: 10px;
  text-align: left;
  box-shadow: none;
  cursor: pointer;
}

.xhs-note-inline-warning:hover,
.xhs-note-inline-warning:focus-visible {
  color: rgba(var(--ui-source-1111c97dd5e03d-rgb, 117, 67, 12), var(--ui-source-1111c97dd5e03d-alpha, 1));
  text-decoration: underline;
  outline: none;
}

.xhs-note-inline-warning i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(var(--ui-source-6abceabc311909-rgb, 209, 138, 39), var(--ui-source-6abceabc311909-alpha, 1));
}

.xhs-note-page-actions > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: rgba(var(--ui-source-a199718a4e4f94-rgb, 37, 54, 75), var(--ui-source-a199718a4e4f94-alpha, 1));
  font-size: 12px;
}

.xhs-note-page-actions > header span {
  color: rgba(var(--ui-source-115aee30474c4d-rgb, 105, 119, 138), var(--ui-source-115aee30474c4d-alpha, 1));
  font-size: 10px;
}

.xhs-note-page-actions > div {
  display: flex;
  gap: 6px;
}

.xhs-note-left-actions {
  display: grid;
  gap: 7px;
}

.xhs-note-left-actions .xhs-note-finish-actions {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  width: 100%;
}

.xhs-settings-ai.attention {
  outline: 2px solid rgba(var(--ui-source-fa68b34336b211-rgb, 209, 138, 39), var(--ui-source-fa68b34336b211-alpha, 0.55));
  outline-offset: -2px;
}

.xhs-note-canvas-stage {
  position: relative;
  display: grid;
  min-width: 0;
  min-height: 0;
  place-items: center;
  overflow: hidden;
  padding: 12px 40px 24px 24px;
  background: #f6f8fa;
}

.xhs-note-canvas-frame {
  position: relative;
  width: auto;
  max-width: 100%;
  height: min(92%, 1100px, 82dvh);
  max-height: min(1100px, 82dvh);
  aspect-ratio: 3 / 4;
}

.xhs-note-canvas-frame .xhs-canvas-shell {
  width: 100%;
  max-width: none;
  height: 100%;
  margin: 0;
  border-radius: 3px;
  box-shadow: 0 10px 26px rgba(var(--ui-source-2152321969d382-rgb, 16, 28, 44), var(--ui-source-2152321969d382-alpha, 0.16));
}

.xhs-note-canvas-frame .xhs-canvas-shell canvas {
  width: 100%;
  height: 100%;
}

.xhs-note-page-dots {
  position: absolute;
  right: -31px;
  bottom: 0;
  display: grid;
  max-height: min(240px, 70%);
  gap: 5px;
  padding: 1px;
  overflow-y: auto;
  scrollbar-width: none;
}

.xhs-note-page-dots::-webkit-scrollbar {
  display: none;
}

.xhs-note-page-dots button {
  width: 22px;
  min-width: 22px;
  height: 22px;
  min-height: 22px;
  padding: 0;
  border: 1px solid rgba(var(--ui-source-350abddff77b15-rgb, 40, 110, 102), var(--ui-source-350abddff77b15-alpha, 1));
  border-radius: 50%;
  background: rgba(var(--ui-source-14c1a89af6fff7-rgb, 255, 255, 255), var(--ui-source-14c1a89af6fff7-alpha, 1));
  color: rgba(var(--ui-source-6ba776d5d5d2e4-rgb, 40, 110, 102), var(--ui-source-6ba776d5d5d2e4-alpha, 1));
  font-size: 9px;
  line-height: 20px;
  box-shadow: none;
}

.xhs-note-page-dots button.active {
  background: rgba(var(--ui-source-dca0fcd1cd19f1-rgb, 40, 110, 102), var(--ui-source-dca0fcd1cd19f1-alpha, 1));
  color: rgba(var(--ui-source-5db510f491f945-rgb, 255, 255, 255), var(--ui-source-5db510f491f945-alpha, 1));
}

.xhs-note-empty-stage > div {
  display: grid;
  place-items: center;
  gap: 7px;
  color: rgba(var(--ui-source-0b9de726a8eef4-rgb, 122, 135, 151), var(--ui-source-0b9de726a8eef4-alpha, 1));
  font-size: 12px;
}

.xhs-note-empty-stage i {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border: 1px solid rgba(var(--ui-source-822e3252d4a2f5-rgb, 184, 196, 210), var(--ui-source-822e3252d4a2f5-alpha, 1));
  border-radius: 50%;
  font-style: normal;
}

.xhs-note-generating {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  gap: 8px;
  background: rgba(var(--ui-source-dbc18d9adede46-rgb, 246, 248, 250), var(--ui-source-dbc18d9adede46-alpha, 0.72));
  color: rgba(var(--ui-source-a750a5462068ca-rgb, 40, 110, 102), var(--ui-source-a750a5462068ca-alpha, 1));
  font-size: 12px;
  font-weight: 700;
  backdrop-filter: blur(2px);
}

.xhs-note-generating i {
  width: 22px;
  height: 22px;
  margin: 0 auto;
  border: 2px solid rgba(var(--ui-source-32e0aeb57ae91b-rgb, 40, 110, 102), var(--ui-source-32e0aeb57ae91b-alpha, 0.2));
  border-top-color: rgba(var(--ui-source-a7fb9f5db7c0f0-rgb, 40, 110, 102), var(--ui-source-a7fb9f5db7c0f0-alpha, 1));
  border-radius: 50%;
  animation: xhs-note-spin 0.8s linear infinite;
}

@keyframes xhs-note-spin {
  to { transform: rotate(360deg); }
}

.xhs-note-finish-heading {
  justify-content: space-between;
}

.xhs-note-finish-actions {
  display: flex;
  gap: 4px;
}

.xhs-note-finish-actions .xhs-compact-icon-button {
  width: 100%;
  min-width: 0;
  height: 28px;
  min-height: 28px;
  border-radius: 7px;
  font-size: 12px;
}

.xhs-note-save-state {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: rgba(var(--ui-source-115aee30474c4d-rgb, 105, 119, 138), var(--ui-source-115aee30474c4d-alpha, 1));
  font-size: 10px;
  white-space: nowrap;
}

.xhs-note-save-state i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(var(--ui-source-1d9696f4129d6a-rgb, 138, 151, 167), var(--ui-source-1d9696f4129d6a-alpha, 1));
}

.xhs-note-save-state.saved i {
  background: rgba(var(--ui-source-84efca37fa4d67-rgb, 43, 122, 93), var(--ui-source-84efca37fa4d67-alpha, 1));
}

.xhs-note-save-state.dirty i {
  background: rgba(var(--ui-source-898a390007d0cc-rgb, 209, 138, 39), var(--ui-source-898a390007d0cc-alpha, 1));
}

.xhs-note-save-state.saving i {
  background: rgba(var(--ui-source-5f4220426fc57c-rgb, 67, 130, 196), var(--ui-source-5f4220426fc57c-alpha, 1));
}

.xhs-note-save-state.error {
  color: rgba(var(--ui-source-8631d729a4ba1a-rgb, 163, 58, 52), var(--ui-source-8631d729a4ba1a-alpha, 1));
}

.xhs-note-save-state.error i {
  background: rgba(var(--ui-source-196eefea617c20-rgb, 189, 67, 58), var(--ui-source-196eefea617c20-alpha, 1));
}

.xhs-recent-notes > header {
  margin: 0;
}

.xhs-recent-notes h4 {
  color: rgba(var(--ui-source-f439ea4bebb9ac-rgb, 37, 54, 75), var(--ui-source-f439ea4bebb9ac-alpha, 1));
  font-size: 12px;
}

.xhs-recent-notes > header button {
  min-height: 0;
  padding: 2px 0;
  border: 0;
  background: transparent;
  color: rgba(var(--ui-source-6ba776d5d5d2e4-rgb, 40, 110, 102), var(--ui-source-6ba776d5d5d2e4-alpha, 1));
  font-size: 10px;
  box-shadow: none;
}

.xhs-recent-note-list {
  gap: 0;
}

.xhs-note-history-row {
  display: grid;
  grid-template-columns: 7px minmax(0, 1fr) auto;
  align-items: center;
  gap: 7px;
  width: 100%;
  min-height: 38px;
  padding: 6px 2px;
  border: 0;
  border-bottom: 1px solid rgba(var(--ui-source-7a44b0408f563b-rgb, 133, 158, 196), var(--ui-source-7a44b0408f563b-alpha, 0.14));
  border-radius: 0;
  background: transparent;
  color: rgba(var(--ui-source-a199718a4e4f94-rgb, 37, 54, 75), var(--ui-source-a199718a4e4f94-alpha, 1));
  text-align: left;
  box-shadow: none;
}

.xhs-note-history-row:last-child {
  border-bottom: 0;
}

.xhs-note-history-row i {
  width: 6px;
  height: 6px;
  border: 1px solid rgba(var(--ui-source-3455fbb430aa40-rgb, 145, 160, 178), var(--ui-source-3455fbb430aa40-alpha, 1));
  border-radius: 50%;
}

.xhs-note-history-row.active i {
  border-color: rgba(var(--ui-source-4572c87e4a1c68-rgb, 40, 110, 102), var(--ui-source-4572c87e4a1c68-alpha, 1));
  background: rgba(var(--ui-source-468a6f399b64e2-rgb, 40, 110, 102), var(--ui-source-468a6f399b64e2-alpha, 1));
}

.xhs-note-history-row span {
  min-width: 0;
  overflow: hidden;
  font-size: 11px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.xhs-note-history-row small {
  color: rgba(var(--ui-source-105a8c4ea96ee3-rgb, 122, 135, 151), var(--ui-source-105a8c4ea96ee3-alpha, 1));
  font-size: 9px;
}

.xhs-note-history-row:hover,
.xhs-note-history-row:focus-visible,
.xhs-note-history-row.active {
  background: rgba(var(--ui-source-d8871924224768-rgb, 40, 110, 102), var(--ui-source-d8871924224768-alpha, 0.06));
  outline: none;
}

.xhs-note-settings-drawer {
  width: min(360px, 92%);
}

.xhs-note-settings-drawer .xhs-recent-notes {
  margin-top: 10px;
  padding: 0;
  border: 0;
}

.xhs-note-settings-drawer .xhs-recent-note-list {
  max-height: calc(100dvh - 190px);
  overflow-y: auto;
}

body[data-theme="tech"] .xhs-note-minimal-editor,
body[data-theme="tech"] .xhs-note-workbench,
body[data-theme="tech"] .xhs-note-canvas-stage {
  border-color: rgba(85, 147, 224, 0.24);
  background: rgba(8, 20, 39, 0.94);
}

body[data-theme="tech"] .xhs-note-side-heading > strong,
body[data-theme="tech"] .xhs-recent-notes h4,
body[data-theme="tech"] .xhs-note-history-row {
  color: #e8f0fc;
}

body[data-theme="tech"] .xhs-note-compact-section input,
body[data-theme="tech"] .xhs-note-compact-section select {
  border-color: rgba(85, 147, 224, 0.34);
  background: #10233b;
  color: #e8f0fc;
}

.xhs-layer-actions .xhs-copy-library-entry {
  border-color: rgba(var(--ui-source-a7fb9f5db7c0f0-rgb, 40, 110, 102), var(--ui-source-a7fb9f5db7c0f0-alpha, 1));
  background: rgba(var(--ui-source-d89cb5294cfef4-rgb, 255, 255, 255), var(--ui-source-d89cb5294cfef4-alpha, 1));
  color: rgba(var(--ui-source-a750a5462068ca-rgb, 40, 110, 102), var(--ui-source-a750a5462068ca-alpha, 1));
}

.xhs-copy-library-workspace {
  box-sizing: border-box;
  height: 100%;
  padding: 28px clamp(16px, 4vw, 54px);
  overflow-y: auto;
}

.xhs-copy-library-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  width: min(100%, 980px);
  margin: 0 auto;
}

.xhs-copy-library-head > div {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

.xhs-copy-library-head span {
  display: block;
  color: rgba(var(--ui-source-26f46063105f05-rgb, 107, 114, 128), var(--ui-source-26f46063105f05-alpha, 1));
  font-size: 11px;
}

.xhs-copy-library-head h2 {
  margin: 2px 0 0;
  overflow: hidden;
  color: rgba(var(--ui-source-f5eed5e3cb59fe-rgb, 31, 46, 66), var(--ui-source-f5eed5e3cb59fe-alpha, 1));
  font-size: 20px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.xhs-copy-library-help {
  width: min(100%, 980px);
  margin: 14px auto 18px;
  padding: 11px 14px;
  border-radius: 10px;
  background: rgba(var(--ui-source-f0f8a559189295-rgb, 40, 110, 102), var(--ui-source-f0f8a559189295-alpha, 0.07));
  color: rgba(var(--ui-source-2a4cd1f1888c9e-rgb, 82, 97, 116), var(--ui-source-2a4cd1f1888c9e-alpha, 1));
  font-size: 12px;
  line-height: 1.7;
}

.xhs-copy-library-workspace > .error-box,
.xhs-copy-library-list {
  width: min(100%, 980px);
  margin-inline: auto;
}

.xhs-copy-library-list {
  display: grid;
  gap: 12px;
}

.xhs-copy-library-entry {
  overflow: hidden;
  border: 1px solid rgba(var(--ui-source-742324de311e7a-rgb, 154, 189, 169), var(--ui-source-742324de311e7a-alpha, 1));
  border-radius: 13px;
  background: rgba(var(--ui-source-d89cb5294cfef4-rgb, 255, 255, 255), var(--ui-source-d89cb5294cfef4-alpha, 1));
  box-shadow: 0 5px 18px rgba(var(--ui-source-af5cef863ed75a-rgb, 15, 44, 53), var(--ui-source-af5cef863ed75a-alpha, 0.05));
}

.xhs-copy-library-entry.used {
  border-color: rgba(var(--ui-source-5e294c5b4a66ad-rgb, 213, 155, 151), var(--ui-source-5e294c5b4a66ad-alpha, 1));
}

.xhs-copy-library-entry > summary {
  display: grid;
  grid-template-columns: auto auto auto minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  min-height: 50px;
  padding: 9px 14px;
  background: rgba(var(--ui-source-adb38f96aa66fe-rgb, 237, 248, 240), var(--ui-source-adb38f96aa66fe-alpha, 1));
  color: rgba(var(--ui-source-786a2c6d12d8d2-rgb, 36, 106, 67), var(--ui-source-786a2c6d12d8d2-alpha, 1));
  cursor: pointer;
  list-style: none;
}

.xhs-copy-library-entry.used > summary {
  background: rgba(var(--ui-source-9d3d9a43fdfa2c-rgb, 255, 240, 239), var(--ui-source-9d3d9a43fdfa2c-alpha, 1));
  color: rgba(var(--ui-source-93e8267ac32275-rgb, 163, 60, 53), var(--ui-source-93e8267ac32275-alpha, 1));
}

.xhs-copy-library-entry > summary::-webkit-details-marker {
  display: none;
}

.xhs-copy-library-number {
  display: inline-grid;
  min-width: 45px;
  min-height: 28px;
  place-items: center;
  border-radius: 999px;
  background: rgba(var(--ui-source-122257742fc18a-rgb, 47, 121, 80), var(--ui-source-122257742fc18a-alpha, 1));
  color: rgba(var(--ui-source-ee13f688c7d66c-rgb, 255, 255, 255), var(--ui-source-ee13f688c7d66c-alpha, 1));
  font-weight: 800;
  letter-spacing: 0.06em;
}

.xhs-copy-library-entry.used .xhs-copy-library-number {
  background: rgba(var(--ui-source-3daf497a2804f8-rgb, 185, 76, 68), var(--ui-source-3daf497a2804f8-alpha, 1));
}

.xhs-copy-library-entry > summary em {
  padding: 3px 7px;
  border-radius: 999px;
  background: rgba(var(--ui-source-c01612096bb48c-rgb, 255, 241, 203), var(--ui-source-c01612096bb48c-alpha, 1));
  color: rgba(var(--ui-source-b6b4642c6c7dba-rgb, 139, 96, 21), var(--ui-source-b6b4642c6c7dba-alpha, 1));
  font-size: 10px;
  font-style: normal;
}

.xhs-copy-library-entry > summary small {
  justify-self: end;
  color: rgba(var(--ui-source-3cceaed77a6198-rgb, 108, 121, 138), var(--ui-source-3cceaed77a6198-alpha, 1));
}

.xhs-copy-library-invalid {
  margin: 12px 14px 0;
  padding: 8px 10px;
  border-radius: 8px;
  background: rgba(var(--ui-source-5adcd708728a6b-rgb, 255, 247, 223), var(--ui-source-5adcd708728a6b-alpha, 1));
  color: rgba(var(--ui-source-047bdacc4b31ef-rgb, 128, 90, 23), var(--ui-source-047bdacc4b31ef-alpha, 1));
  font-size: 11px;
}

.xhs-copy-library-editor {
  display: grid;
  gap: 10px;
  padding: 14px;
}

.xhs-copy-library-raw-text {
  box-sizing: border-box;
  width: 100%;
  min-height: 420px;
  padding: 14px 16px;
  resize: vertical;
  border: 1px solid rgba(var(--ui-source-425676a894b872-rgb, 184, 199, 214), var(--ui-source-425676a894b872-alpha, 1));
  border-radius: 10px;
  background: rgba(var(--ui-source-d89cb5294cfef4-rgb, 255, 255, 255), var(--ui-source-d89cb5294cfef4-alpha, 1));
  color: rgba(var(--ui-source-b0ca4235ed6980-rgb, 31, 46, 66), var(--ui-source-b0ca4235ed6980-alpha, 1));
  font: 14px/1.8 "PingFang SC", "Microsoft YaHei", sans-serif;
  tab-size: 2;
}

.xhs-copy-library-raw-text:focus {
  border-color: rgba(var(--ui-source-f8d0db7b23e2b9-rgb, 47, 121, 80), var(--ui-source-f8d0db7b23e2b9-alpha, 1));
  outline: 3px solid rgba(var(--ui-source-350610fe2237d2-rgb, 47, 121, 80), var(--ui-source-350610fe2237d2-alpha, 0.12));
}

.xhs-copy-library-raw-text:disabled {
  background: rgba(var(--ui-source-bf0061ff3104d2-rgb, 242, 244, 246), var(--ui-source-bf0061ff3104d2-alpha, 1));
  color: rgba(var(--ui-source-18e9278a3f95b8-rgb, 104, 116, 131), var(--ui-source-18e9278a3f95b8-alpha, 1));
}

.xhs-copy-library-usage {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.xhs-copy-library-usage > span,
.xhs-copy-library-format-error {
  margin: 0;
  padding: 7px 9px;
  border-radius: 7px;
  background: rgba(var(--ui-source-dc4e9401ba6260-rgb, 237, 248, 240), var(--ui-source-dc4e9401ba6260-alpha, 1));
  color: rgba(var(--ui-source-bd407812df6cc4-rgb, 47, 104, 71), var(--ui-source-bd407812df6cc4-alpha, 1));
  font-size: 11px;
  line-height: 1.5;
}

.xhs-copy-library-usage > span.missing {
  background: rgba(var(--ui-source-b4626acc72a2f4-rgb, 255, 247, 223), var(--ui-source-b4626acc72a2f4-alpha, 1));
  color: rgba(var(--ui-source-ec662292987315-rgb, 128, 90, 23), var(--ui-source-ec662292987315-alpha, 1));
}

.xhs-copy-library-usage > span.over-limit,
.xhs-copy-library-format-error {
  grid-column: 1 / -1;
  background: rgba(var(--ui-source-996abdd3eb67a7-rgb, 255, 240, 239), var(--ui-source-996abdd3eb67a7-alpha, 1));
  color: rgba(var(--ui-source-93e8267ac32275-rgb, 163, 60, 53), var(--ui-source-93e8267ac32275-alpha, 1));
  font-weight: 700;
}

.xhs-copy-library-pages {
  display: grid;
  gap: 10px;
  padding: 14px;
}

.xhs-copy-library-page {
  padding: 12px;
  border: 1px solid rgba(var(--ui-source-e300b48d999cc2-rgb, 133, 158, 196), var(--ui-source-e300b48d999cc2-alpha, 0.24));
  border-radius: 10px;
  background: rgba(var(--ui-source-ddaa45bdded86f-rgb, 248, 250, 252), var(--ui-source-ddaa45bdded86f-alpha, 1));
}

.xhs-copy-library-page > header,
.xhs-copy-library-entry-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.xhs-copy-library-page > header strong {
  color: rgba(var(--ui-source-a199718a4e4f94-rgb, 37, 54, 75), var(--ui-source-a199718a4e4f94-alpha, 1));
  font-size: 13px;
}

.xhs-copy-library-page > header button,
.xhs-copy-library-entry-actions button {
  min-height: 30px;
  padding: 5px 10px;
  font-size: 11px;
}

.xhs-copy-library-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 10px;
}

.xhs-copy-library-fields label {
  display: grid;
  gap: 5px;
}

.xhs-copy-library-fields label > span {
  color: rgba(var(--ui-source-f0734c66511589-rgb, 94, 108, 125), var(--ui-source-f0734c66511589-alpha, 1));
  font-size: 11px;
  font-weight: 700;
}

.xhs-copy-library-fields textarea {
  box-sizing: border-box;
  width: 100%;
  min-height: 88px;
  padding: 9px 10px;
  resize: vertical;
  border: 1px solid rgba(var(--ui-source-af9e0c6d43354a-rgb, 198, 209, 222), var(--ui-source-af9e0c6d43354a-alpha, 1));
  border-radius: 8px;
  background: rgba(var(--ui-source-f8f7c0b315bb50-rgb, 255, 255, 255), var(--ui-source-f8f7c0b315bb50-alpha, 1));
  color: rgba(var(--ui-source-01e1abb5b0f287-rgb, 31, 46, 66), var(--ui-source-01e1abb5b0f287-alpha, 1));
  font: inherit;
  line-height: 1.6;
}

.xhs-copy-library-fields textarea:disabled {
  background: rgba(var(--ui-source-45f19e87d34b90-rgb, 241, 243, 245), var(--ui-source-45f19e87d34b90-alpha, 1));
  color: rgba(var(--ui-source-732c519976dbae-rgb, 104, 116, 131), var(--ui-source-732c519976dbae-alpha, 1));
}

.xhs-copy-library-no-fields {
  grid-column: 1 / -1;
  padding: 10px;
  color: rgba(var(--ui-source-0b9de726a8eef4-rgb, 122, 135, 151), var(--ui-source-0b9de726a8eef4-alpha, 1));
  font-size: 11px;
  text-align: center;
}

.xhs-copy-library-entry-actions {
  justify-content: flex-start;
  padding: 0 14px 14px;
}

.xhs-copy-library-entry-actions .danger {
  margin-left: auto;
}

.xhs-copy-library-empty {
  display: grid;
  gap: 7px;
  min-height: 180px;
  place-content: center;
  border: 1px dashed rgba(var(--ui-source-425676a894b872-rgb, 184, 199, 214), var(--ui-source-425676a894b872-alpha, 1));
  border-radius: 13px;
  color: rgba(var(--ui-source-e669e810793260-rgb, 116, 129, 148), var(--ui-source-e669e810793260-alpha, 1));
  text-align: center;
}

.xhs-copy-library-empty strong {
  color: rgba(var(--ui-source-bcf73198ad498c-rgb, 48, 65, 88), var(--ui-source-bcf73198ad498c-alpha, 1));
}

body[data-theme="tech"] .xhs-copy-library-workspace,
body[data-theme="tech"] .xhs-copy-library-entry,
body[data-theme="tech"] .xhs-copy-library-page {
  border-color: rgba(85, 147, 224, 0.26);
  background: #10233b;
  color: #e8f0fc;
}

body[data-theme="tech"] .xhs-copy-library-head h2,
body[data-theme="tech"] .xhs-copy-library-page > header strong,
body[data-theme="tech"] .xhs-copy-library-empty strong {
  color: #e8f0fc;
}

body[data-theme="tech"] .xhs-copy-library-fields textarea {
  border-color: rgba(85, 147, 224, 0.34);
  background: #0b1c31;
  color: #e8f0fc;
}

body[data-theme="tech"] .xhs-copy-library-raw-text {
  border-color: rgba(85, 147, 224, 0.34);
  background: #0b1c31;
  color: #e8f0fc;
}

@media (max-width: 760px) {
  .xhs-copy-library-workspace {
    padding: 16px 10px;
  }

  .xhs-copy-library-head,
  .xhs-copy-library-head > div {
    align-items: stretch;
    flex-direction: column;
  }

  .xhs-copy-library-fields {
    grid-template-columns: minmax(0, 1fr);
  }

  .xhs-copy-library-usage {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 1100px) {
  .xhs-note-one-screen-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .xhs-note-workbench {
    position: absolute;
    z-index: 20;
    top: 0;
    bottom: 0;
    width: min(280px, calc(100% - 54px));
    transition: transform 160ms ease;
    box-shadow: 14px 0 30px rgba(var(--ui-source-92ae99ef1c26cd-rgb, 8, 22, 42), var(--ui-source-92ae99ef1c26cd-alpha, 0.16));
  }

  .xhs-note-left-workbench {
    left: 0;
    transform: translateX(-105%);
  }

  .xhs-note-workbench.open {
    transform: translateX(0);
  }

  .xhs-note-workbench .xhs-workbench-close {
    display: grid;
    place-items: center;
  }

  .xhs-note-mobile-workbench-buttons {
    display: flex;
  }
}

@media (max-width: 760px) {
  .xhs-note-canvas-stage {
    padding: 54px 34px 28px 16px;
  }

  .xhs-note-page-dots {
    right: -29px;
  }
}

/* Compact template controls; long AI text is edited in the modal only. */
.xhs-right-workbench > .xhs-workbench-heading { min-height: 40px; padding-block: 7px; }
.xhs-right-template-top, .xhs-right-layer-middle, .xhs-right-template-bottom { padding: 5px; }
.xhs-right-template-top .xhs-settings-template-section { grid-template-rows: auto minmax(0, 1fr); padding: 6px; gap: 5px; }
.xhs-right-template-top .xhs-private-notice, .xhs-right-template-top .xhs-side-head p { display: none; }
.xhs-right-template-top .xhs-side-head h3 { font-size: 13px; margin: 0; }
.xhs-right-template-top .xhs-side-head button { min-height: 28px; padding: 4px 8px; font-size: 11px; }
.xhs-right-template-top .xhs-list-item { padding: 6px 8px; }
.xhs-right-layer-middle .xhs-property-grid { gap: 5px; }
.xhs-right-layer-middle .xhs-property-section { padding: 5px; }
.xhs-right-layer-middle .xhs-property-section > header { margin-bottom: 4px; }
.xhs-right-layer-middle .xhs-property-grid label { grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 4px; }
.xhs-right-layer-middle .xhs-property-grid label > span { font-size: 10px; white-space: nowrap; }
.xhs-right-layer-middle .xhs-property-grid input,
.xhs-right-layer-middle .xhs-property-grid select { min-width: 0; width: 100%; height: 28px; padding: 3px 4px; }
.xhs-right-layer-middle .xhs-layer-copy-actions { margin-top: 5px; }
.xhs-right-template-bottom .xhs-template-management-panel { gap: 6px; }
.xhs-right-template-bottom .xhs-template-management-panel > section { padding: 7px; }
.xhs-right-template-bottom .xhs-settings-current header { gap: 5px; }
.xhs-right-template-bottom .xhs-settings-current header strong { font-size: 13px; }
.xhs-right-template-bottom .xhs-settings-current header > div > span { display: none; }
.xhs-right-template-bottom .xhs-settings-current header strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.xhs-right-template-bottom .xhs-template-status { padding: 4px 6px; font-size: 10px; white-space: nowrap; }
.xhs-right-template-bottom .xhs-settings-current .xhs-toolbar-actions { margin-top: 4px; gap: 4px; }
.xhs-right-template-bottom .xhs-settings-current .xhs-toolbar-actions button { min-height: 30px; padding: 4px; font-size: 11px; }
.xhs-right-template-bottom .xhs-settings-ai { gap: 3px; }
.xhs-right-template-bottom .xhs-settings-ai > header strong { font-size: 13px; }
.xhs-right-template-bottom .xhs-template-page-settings { grid-template-columns: minmax(0, 1fr) 72px; gap: 4px 7px; margin: 2px 0; }
.xhs-right-template-bottom .xhs-template-page-settings > label:first-child { grid-column: 1 / -1; }
.xhs-right-template-bottom .xhs-template-page-settings:has(.xhs-ai-page-count) > label:first-child { grid-column: auto; }
.xhs-right-template-bottom .xhs-template-page-settings > small { grid-column: 1 / -1; font-size: 10px; }
.xhs-right-template-bottom .xhs-template-page-settings label { gap: 3px; }
.xhs-right-template-bottom .xhs-template-page-settings select,
.xhs-right-template-bottom .xhs-template-page-settings input { min-height: 28px; height: 28px; padding: 3px 5px; font-size: 12px; }
.xhs-page-summary-note { display: block; }
.xhs-right-template-bottom .xhs-page-summary-note { display: none; }
.xhs-prompt-entry-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.xhs-prompt-entry-actions > .xhs-open-prompt:only-child { grid-column: 1 / -1; }
.xhs-prompt-entry-actions button { min-height: 32px; min-width: 0; padding: 5px; font-size: 12px; white-space: nowrap; }
[data-xhs-prompt-status] { font-size: 11px; }

.xhs-prompt-backdrop { position: fixed; z-index: 10090; inset: 0; display: grid; place-items: center; padding: 20px; background: rgba(var(--ui-source-9da6e4080deef4-rgb, 12, 21, 35), var(--ui-source-9da6e4080deef4-alpha, 0.48)); backdrop-filter: blur(4px); }
body[data-theme="tech"] .main:has(.xhs-prompt-backdrop) { z-index: 1004; }
.xhs-dialog.xhs-prompt-dialog { display: grid; grid-template-rows: auto auto minmax(0,1fr) auto; gap: 12px; width: min(900px,calc(100vw - 32px)); height: min(780px,calc(100dvh - 40px)); padding: 20px; overflow: hidden; outline: none; }
.xhs-dialog.xhs-prompt-dialog:not(:has(.xhs-prompt-back)) { grid-template-rows: auto minmax(0,1fr) auto; }
.xhs-prompt-back button { min-height: 32px; padding: 6px 12px; font-size: 13px; }
.xhs-prompt-dialog .xhs-prompt-main-actions { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.xhs-prompt-dialog .xhs-prompt-main-actions [data-xhs-prompt-controls] { flex: 1; min-width: 0; grid-template-columns: 1fr; justify-items: start; }
.xhs-prompt-dialog .xhs-prompt-main-actions [data-xhs-prompt-controls] > button { min-height: 36px; padding: 7px 16px; font-size: 13px; }
.xhs-prompt-dialog .xhs-prompt-more { position: relative; flex: 0 0 auto; }
.xhs-prompt-dialog .xhs-prompt-more > summary { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 36px; padding: 7px 12px; border: 1px solid rgba(var(--ui-source-d644dc4891b80d-rgb, 220, 229, 233), var(--ui-source-d644dc4891b80d-alpha, 1)); border-radius: 8px; color: rgba(var(--ui-source-0877369e4e3ffb-rgb, 82, 102, 107), var(--ui-source-0877369e4e3ffb-alpha, 1)); font-size: 13px; list-style: none; cursor: pointer; }
.xhs-prompt-dialog .xhs-prompt-more > summary::-webkit-details-marker { display: none; }
.xhs-prompt-dialog .xhs-prompt-more > summary:focus-visible { outline: 2px solid rgba(var(--ui-source-6651d2b3f8c3aa-rgb, 39, 107, 94), var(--ui-source-6651d2b3f8c3aa-alpha, 1)); outline-offset: 2px; }
.xhs-prompt-dialog .xhs-prompt-more-menu { position: absolute; z-index: 2; top: calc(100% + 6px); right: 0; display: grid; gap: 5px; width: 192px; padding: 8px; border: 1px solid rgba(var(--ui-source-d644dc4891b80d-rgb, 220, 229, 233), var(--ui-source-d644dc4891b80d-alpha, 1)); border-radius: 10px; background: rgba(var(--ui-source-d89cb5294cfef4-rgb, 255, 255, 255), var(--ui-source-d89cb5294cfef4-alpha, 1)); box-shadow: 0 8px 24px rgba(var(--ui-source-6bebd860049f8a-rgb, 20, 41, 49), var(--ui-source-6bebd860049f8a-alpha, 0.14)); }
.xhs-prompt-dialog .xhs-prompt-more-menu button { min-height: 34px; width: 100%; padding: 6px 10px; text-align: left; font-size: 13px; }
body[data-theme="tech"] .xhs-prompt-dialog .xhs-prompt-more > summary { color: #cbd8e4; border-color: #34516b; background: #15283a; }
body[data-theme="tech"] .xhs-prompt-dialog .xhs-prompt-more-menu { border-color: #34516b; background: #162636; }
.xhs-prompt-tabs { display: flex; gap: 8px; }
.xhs-prompt-tabs button { min-height: 32px; padding: 6px 14px; font-size: 13px; }
.xhs-prompt-tabs .active { background: rgba(var(--ui-source-837a843cd85249-rgb, 39, 107, 94), var(--ui-source-837a843cd85249-alpha, 1)); color: rgba(var(--ui-source-facac2de3f91e9-rgb, 255, 255, 255), var(--ui-source-facac2de3f91e9-alpha, 1)); border-color: rgba(var(--ui-source-39e30b0baf0828-rgb, 39, 107, 94), var(--ui-source-39e30b0baf0828-alpha, 1)); }
.xhs-prompt-dialog-content { min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.xhs-prompt-dialog .xhs-prompt-editor { margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; gap: 8px; }
.xhs-prompt-editor [data-xhs-prompt-controls] { display: grid; grid-template-columns: auto minmax(0,1fr); align-items: center; gap: 8px 12px; }
.xhs-prompt-editor [data-xhs-prompt-controls] > small { color: rgba(var(--ui-source-c6ba8d0f4e4ee4-rgb, 102, 120, 124), var(--ui-source-c6ba8d0f4e4ee4-alpha, 1)); font-size: 12px; line-height: 1.5; }
.xhs-prompt-editor [data-xhs-prompt-controls] > p { grid-column: 1 / -1; margin: 0; }
.xhs-prompt-dialog textarea[data-xhs-complete-ai-prompt] { height: clamp(160px,40dvh,400px); min-height: 160px; resize: none; background: rgba(var(--ui-source-067b02c9b0f04c-rgb, 246, 248, 251), var(--ui-source-067b02c9b0f04c-alpha, 1)); font-size: 15px; font-weight: 400; line-height: 1.7; }
.xhs-prompt-dialog .xhs-prompt-editor { min-height: 100%; grid-template-rows: auto minmax(160px,1fr) auto; align-content: start; }
.xhs-prompt-dialog .xhs-prompt-editor > label { min-height: 0; grid-template-rows: auto minmax(0,1fr); }
.xhs-prompt-dialog textarea[data-xhs-complete-ai-prompt] { height: 100%; }
body[data-theme="tech"] .xhs-prompt-dialog textarea[data-xhs-complete-ai-prompt] { background: #101c2d; color: #e7eef5; border-color: #34516b; }
.xhs-prompt-footer { display: flex; align-items: center; justify-content: flex-end; gap: 8px; border-top: 1px solid rgba(var(--ui-source-60320ceef81bd3-rgb, 220, 229, 233), var(--ui-source-60320ceef81bd3-alpha, 1)); padding-top: 12px; }
.xhs-prompt-footer > small { flex: 1; min-width: 0; font-size: 12px; color: rgba(var(--ui-source-441ad6e26b8737-rgb, 101, 119, 128), var(--ui-source-441ad6e26b8737-alpha, 1)); }
.xhs-prompt-footer button { min-height: 34px; padding: 6px 14px; white-space: nowrap; }
.xhs-prompt-dialog .xhs-ai-debug { border: 0; background: transparent; }
.xhs-prompt-dialog .xhs-ai-debug > summary { display: none; }
.xhs-prompt-dialog .xhs-ai-debug-body { padding: 0; }
.xhs-prompt-dialog .xhs-ai-debug textarea { height: clamp(160px,44dvh,400px); max-height: none; resize: none; font-size: 14px; }
@media (max-height: 720px) {
  .xhs-right-workbench { grid-template-rows: 36px 96px minmax(0,1fr); }
  .xhs-right-workbench > .xhs-workbench-heading { min-height: 36px; padding-block: 5px; }
  .xhs-right-layer-middle .xhs-property-grid { gap: 3px; }
  .xhs-right-layer-middle .xhs-property-grid input, .xhs-right-layer-middle .xhs-property-grid select { min-height: 25px; height: 25px; }
  .xhs-right-template-bottom .xhs-template-management-panel > section { padding: 5px; }
}
@media (max-width: 600px) {
  .xhs-prompt-backdrop { padding: 8px; }
  .xhs-dialog.xhs-prompt-dialog { padding: 12px; height: calc(100dvh - 16px); width: calc(100vw - 16px); gap: 8px; }
  .xhs-prompt-editor [data-xhs-prompt-controls] { grid-template-columns: 1fr; }
  .xhs-prompt-footer { flex-wrap: wrap; }
  .xhs-prompt-footer > small { flex-basis: 100%; }
}

/* Independent editable pages and whole-page copy. */
.xhs-page-manager { width:100%; max-width:640px; margin:12px auto 0; }
.xhs-page-manager-actions { display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:8px; margin:0 0 10px; }
.xhs-page-manager-actions strong { font-size:13px; margin-right:8px; }
.xhs-page-manager-actions button { padding:7px 12px; font-size:13px; }
.xhs-page-thumbnails { display:flex; gap:8px; overflow-x:auto; padding:4px 4px 10px; max-width:100%; }
.xhs-page-thumbnails .xhs-page-thumbnail { flex:0 0 70px; display:flex; flex-direction:column; align-items:center; padding:5px; border:2px solid transparent; border-radius:9px; background:rgba(var(--ui-source-2c7abe4b4f71b6-rgb, 241, 244, 242), var(--ui-source-2c7abe4b4f71b6-alpha, 1)); color:rgba(var(--ui-source-c220fb4871e73c-rgb, 52, 75, 68), var(--ui-source-c220fb4871e73c-alpha, 1)); box-shadow:none; }
.xhs-page-thumbnails .xhs-page-thumbnail.active { border-color:rgba(var(--ui-source-eb3fcaab138f9b-rgb, 39, 100, 89), var(--ui-source-eb3fcaab138f9b-alpha, 1)); background:rgba(var(--ui-source-5f773402df23ac-rgb, 233, 243, 239), var(--ui-source-5f773402df23ac-alpha, 1)); }
.xhs-page-thumbnail canvas { display:block; width:48px; height:64px; background:rgba(var(--ui-source-d89cb5294cfef4-rgb, 255, 255, 255), var(--ui-source-d89cb5294cfef4-alpha, 1)); border:1px solid rgba(var(--ui-source-239887879a5142-rgb, 220, 228, 222), var(--ui-source-239887879a5142-alpha, 1)); }
.xhs-page-thumbnail span { font-size:11px; line-height:1.5; margin-top:5px; white-space:nowrap; }
.xhs-page-copy-dialog { max-width:580px; width:min(580px,calc(100vw - 32px)); }
.xhs-copy-choice { display:grid; grid-template-columns:100px 1fr; gap:12px; align-items:center; margin:18px 0; }
.xhs-copy-choice select { width:100%; min-width:0; padding:10px; }
.xhs-copy-target-preview { display:flex; align-items:center; gap:18px; padding:16px; background:rgba(var(--ui-source-6c6e220fe7ef23-rgb, 244, 247, 244), var(--ui-source-6c6e220fe7ef23-alpha, 1)); border-radius:10px; color:rgba(var(--ui-source-ec34d0a75a6a93-rgb, 80, 101, 90), var(--ui-source-ec34d0a75a6a93-alpha, 1)); }
.xhs-copy-target-preview canvas { width:81px; height:108px; flex:none; background:rgba(var(--ui-source-d89cb5294cfef4-rgb, 255, 255, 255), var(--ui-source-d89cb5294cfef4-alpha, 1)); border:1px solid rgba(var(--ui-source-239887879a5142-rgb, 220, 228, 222), var(--ui-source-239887879a5142-alpha, 1)); }
.xhs-page-settings-help { font-size:12px; color:rgba(var(--ui-source-6edbbe2084d610-rgb, 101, 118, 106), var(--ui-source-6edbbe2084d610-alpha, 1)); line-height:1.6; }
.xhs-template-canvas-layout { min-width:0; }
.xhs-page-manager + .xhs-page-kind-tabs { display:none; }
.xhs-template-canvas-layout { width:100%; grid-template-rows:minmax(0,1fr) auto; gap:8px; }
.xhs-template-canvas-layout > .xhs-canvas-frame { height:min(100%,1100px); max-height:100%; min-height:0; }
.xhs-template-canvas-layout > .xhs-page-manager { margin-top:0; min-width:0; }
.xhs-last-page-role { display:flex !important; align-items:center; gap:6px; font-size:12px; }
.xhs-last-page-role input { width:auto; }

/* V2.88 · 仅模板设计工作台；画布绘制、覆盖层与其他模式沿用既有规则。 */
.main:has(> .xhs-note-studio > .xhs-template-studio-workbench) > .floating-message {
  position: fixed;
  z-index: 110;
  top: 12px;
  left: 24px;
  right: 24px;
  max-width: min(680px, calc(100vw - 48px));
  margin: 0 auto;
}

.xhs-minimal-editor.xhs-template-studio-workbench {
  --xts-ink: #26323c;
  --xts-muted: #7c8994;
  --xts-bg: #f5f6f8;
  --xts-panel: #fff;
  --xts-line: #e8ebef;
  --xts-soft: #f7f8fa;
  --xts-red: #ed3f59;
  --xts-red-soft: #fff1f3;
  --xts-green: #327866;
  --xts-green-soft: #eaf6f0;
  --xts-stage: #eef0f4;
  --xts-stage-dot: #d9dee5;
  --xts-purple-soft: #f6f3fc;
  --xts-page-rail-height: 176px;
  position: relative;
  display: grid;
  grid-template-rows: 68px auto minmax(0, 1fr);
  place-items: stretch;
  gap: 14px;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  padding: 18px 20px 20px;
  overflow: hidden;
  border: 0;
  border-radius: 14px;
  background: radial-gradient(ellipse at 85% -10%, rgba(var(--ui-source-5cdb304ecf8b0b-rgb, 255, 241, 243), var(--ui-source-5cdb304ecf8b0b-alpha, 1)), transparent 42%), rgba(var(--ui-source-82191b6faa38ea-rgb, 245, 246, 248), var(--ui-source-82191b6faa38ea-alpha, 1));
  color: rgba(var(--ui-source-802f84a3d366ee-rgb, 38, 50, 60), var(--ui-source-802f84a3d366ee-alpha, 1));
  box-shadow: none;
  font-family: "PingFang SC", "Microsoft YaHei", -apple-system, BlinkMacSystemFont, Arial, sans-serif;
  font-size: 14px;
  line-height: 1.4;
  letter-spacing: normal;
  container: xts-workbench / inline-size;
}

.xhs-template-studio-workbench [hidden] { display: none !important; }
.xhs-template-studio-workbench .xhs-mobile-workbench-buttons { display: none; }
.xhs-template-studio-workbench :is(button, .xhs-file-button) {
  min-width: 0;
  min-height: 32px;
  padding: 7px 11px;
  border: 1px solid rgba(var(--ui-source-fe2314f4f9e277-rgb, 232, 235, 239), var(--ui-source-fe2314f4f9e277-alpha, 1));
  border-radius: 8px;
  background: rgba(var(--ui-source-9e0a6a32fe966e-rgb, 255, 255, 255), var(--ui-source-9e0a6a32fe966e-alpha, 1));
  color: rgba(var(--ui-source-58c0af45971572-rgb, 38, 50, 60), var(--ui-source-58c0af45971572-alpha, 1));
  box-shadow: none;
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: normal;
  cursor: pointer;
  filter: none;
  transition: transform .18s ease, box-shadow .18s ease;
}
.xhs-template-studio-workbench button:hover:not(:disabled) { background: rgba(var(--ui-source-75f876af0b44f4-rgb, 247, 248, 250), var(--ui-source-75f876af0b44f4-alpha, 1)); color: rgba(var(--ui-source-c7d84d4795a355-rgb, 38, 50, 60), var(--ui-source-c7d84d4795a355-alpha, 1)); box-shadow: none; filter: none; transform: translateY(-1px); }
.xhs-template-studio-workbench button:disabled { opacity: .5; cursor: not-allowed; }
.xhs-template-studio-workbench button:focus-visible { outline: 3px solid rgba(var(--ui-source-30fcf1b00588aa-rgb, 237, 63, 89), var(--ui-source-30fcf1b00588aa-alpha, 1)); outline-offset: 3px; }
.xhs-template-studio-workbench :is(h1, h2, h3, h4) { color: rgba(var(--ui-source-802e76a1ce77de-rgb, 38, 50, 60), var(--ui-source-802e76a1ce77de-alpha, 1)); }
.xhs-template-studio-workbench :is(input, select, textarea) { color: rgba(var(--ui-source-7e4d973f4c7323-rgb, 38, 50, 60), var(--ui-source-7e4d973f4c7323-alpha, 1)); caret-color: rgba(var(--ui-source-f7d219d2397cc1-rgb, 38, 50, 60), var(--ui-source-f7d219d2397cc1-alpha, 1)); }
.xhs-template-studio-workbench svg { flex: none; width: 17px; height: 17px; }

.xhs-template-studio-workbench .xhs-studio-heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-width: 0; }
.xhs-template-studio-workbench .xhs-studio-heading-title { display: flex; align-items: center; gap: 18px; min-width: 0; }
.xhs-template-studio-workbench .xhs-studio-redbook { display: grid; flex: none; place-items: center; width: 54px; height: 54px; border-radius: 17px; background: rgba(var(--ui-source-402fcad36aa277-rgb, 237, 63, 89), var(--ui-source-402fcad36aa277-alpha, 1)); color: rgba(var(--ui-source-ee13f688c7d66c-rgb, 255, 255, 255), var(--ui-source-ee13f688c7d66c-alpha, 1)); box-shadow: 0 9px 22px rgba(var(--ui-source-330fb58952f05c-rgb, 237, 63, 89), var(--ui-source-330fb58952f05c-alpha, 0.16)); font-size: 14px; font-weight: 700; transform: rotate(-5deg); }
.xhs-template-studio-workbench .xhs-studio-breadcrumb { margin-bottom: 5px; color: rgba(var(--ui-source-d06c7a96a6af4f-rgb, 124, 137, 148), var(--ui-source-d06c7a96a6af4f-alpha, 1)); font-size: 12px; }
.xhs-template-studio-workbench .xhs-studio-breadcrumb > span { margin: 0 10px; color: rgba(var(--ui-source-d06c7a96a6af4f-rgb, 124, 137, 148), var(--ui-source-d06c7a96a6af4f-alpha, 1)); opacity: .5; }
.xhs-template-studio-workbench .xhs-studio-heading h1 { margin: 0; color: rgba(var(--ui-source-802e76a1ce77de-rgb, 38, 50, 60), var(--ui-source-802e76a1ce77de-alpha, 1)); font-size: 27px; font-weight: 600; line-height: 1.3; letter-spacing: -.035em; }
.xhs-template-studio-workbench .xhs-studio-title-dot { color: rgba(var(--ui-source-ce0c44a590ab7c-rgb, 237, 63, 89), var(--ui-source-ce0c44a590ab7c-alpha, 1)); }
.xhs-template-studio-workbench .xhs-studio-heading-right { display: flex; align-items: center; gap: 14px; }
.xhs-template-studio-workbench .xhs-studio-intelligence { display: inline-flex; align-items: center; gap: 7px; color: rgba(var(--ui-source-d06c7a96a6af4f-rgb, 124, 137, 148), var(--ui-source-d06c7a96a6af4f-alpha, 1)); font-size: 13px; white-space: nowrap; }
.xhs-template-studio-workbench .xhs-studio-intelligence svg { color: rgba(var(--ui-source-7931735fe43963-rgb, 237, 63, 89), var(--ui-source-7931735fe43963-alpha, 1)); }
.xhs-template-studio-workbench .xhs-studio-heading-right button { display: inline-flex; align-items: center; gap: 8px; height: 38px; white-space: nowrap; }

.xhs-template-studio-workbench .xhs-studio-actionbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-width: 0; min-height: 62px; padding: 10px 12px 10px 16px; border: 1px solid rgba(var(--ui-source-6b0211cf37d8c6-rgb, 232, 235, 239), var(--ui-source-6b0211cf37d8c6-alpha, 1)); border-radius: 14px; background: rgba(var(--ui-source-9b98ec71e6bc53-rgb, 255, 255, 255), var(--ui-source-9b98ec71e6bc53-alpha, 1)); }
.xhs-template-studio-workbench .xhs-studio-current { display: flex; align-items: center; gap: 8px; min-width: 0; }
.xhs-template-studio-workbench .xhs-studio-current-title { min-width: 0; max-width: 340px; overflow: hidden; color: rgba(var(--ui-source-b0fc2012f0c551-rgb, 38, 50, 60), var(--ui-source-b0fc2012f0c551-alpha, 1)); font-size: 15px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.xhs-template-studio-workbench .xhs-studio-current-title[contenteditable] { border: 1px solid transparent; border-radius: 5px; padding: 3px 4px; }
.xhs-template-studio-workbench .xhs-studio-current-title[contenteditable]:focus { border-color: rgba(var(--ui-source-de60d7b199a2e7-rgb, 237, 63, 89), var(--ui-source-de60d7b199a2e7-alpha, 1)); background: rgba(var(--ui-source-0654041fa4c785-rgb, 255, 241, 243), var(--ui-source-0654041fa4c785-alpha, 1)); outline: none; }
.xhs-template-studio-workbench .xhs-studio-version { flex: none; color: rgba(var(--ui-source-c2bcdea819706d-rgb, 124, 137, 148), var(--ui-source-c2bcdea819706d-alpha, 1)); font-size: 12px; }
.xhs-template-studio-workbench .xhs-template-status { flex: none; padding: 4px 7px; border: 0; border-radius: 6px; background: rgba(var(--ui-source-560c9c001210de-rgb, 234, 246, 240), var(--ui-source-560c9c001210de-alpha, 1)); color: rgba(var(--ui-source-bb47554064978d-rgb, 50, 120, 102), var(--ui-source-bb47554064978d-alpha, 1)); font-size: 11px; font-weight: 500; line-height: 1.3; white-space: nowrap; }
.xhs-template-studio-workbench .xhs-template-status.locked { background: rgba(var(--ui-source-d6b545e4dfa5d3-rgb, 247, 248, 250), var(--ui-source-d6b545e4dfa5d3-alpha, 1)); color: rgba(var(--ui-source-7bba1a1bc5fc7c-rgb, 124, 137, 148), var(--ui-source-7bba1a1bc5fc7c-alpha, 1)); }
.xhs-template-studio-workbench .xhs-studio-save-state { display: inline-flex; align-items: center; gap: 5px; flex: none; color: rgba(var(--ui-source-c2bcdea819706d-rgb, 124, 137, 148), var(--ui-source-c2bcdea819706d-alpha, 1)); font-size: 11px; white-space: nowrap; }
.xhs-template-studio-workbench .xhs-studio-save-state > span { width: 5px; height: 5px; border-radius: 50%; background: rgba(var(--ui-source-86b60fcc6b0d7c-rgb, 50, 120, 102), var(--ui-source-86b60fcc6b0d7c-alpha, 1)); }
.xhs-template-studio-workbench .xhs-studio-actions { display: flex; flex: none; align-items: center; gap: 8px; }
.xhs-template-studio-workbench .xhs-studio-actions button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 38px; padding: 8px 12px; font-size: 13px; white-space: nowrap; }
.xhs-template-studio-workbench .xhs-studio-actions :is(.xhs-studio-primary, [data-ai-preview-button]) { border-color: rgba(var(--ui-source-9e3ccd9de4c245-rgb, 237, 63, 89), var(--ui-source-9e3ccd9de4c245-alpha, 1)); background: rgba(var(--ui-source-f681efe83172ac-rgb, 237, 63, 89), var(--ui-source-f681efe83172ac-alpha, 1)); color: rgba(var(--ui-source-5db510f491f945-rgb, 255, 255, 255), var(--ui-source-5db510f491f945-alpha, 1)); }
.xhs-template-studio-workbench .xhs-studio-actions :is(.xhs-studio-primary, [data-ai-preview-button]):hover:not(:disabled) { border-color: rgba(var(--ui-source-7e1b52ee487353-rgb, 237, 63, 89), var(--ui-source-7e1b52ee487353-alpha, 1)); background: rgba(var(--ui-source-384cd5c748330e-rgb, 237, 63, 89), var(--ui-source-384cd5c748330e-alpha, 1)); color: rgba(var(--ui-source-baa7f089dace4d-rgb, 255, 255, 255), var(--ui-source-baa7f089dace4d-alpha, 1)); box-shadow: 0 5px 14px rgba(var(--ui-source-330fb58952f05c-rgb, 237, 63, 89), var(--ui-source-330fb58952f05c-alpha, 0.16)); }

.xhs-template-studio-workbench .xhs-one-screen-grid.xhs-studio-workspace { display: grid; grid-template-columns: 252px minmax(0, 1fr) 310px; grid-template-rows: minmax(0, 1fr); gap: 14px; min-width: 0; min-height: 0; height: 100%; padding: 0; overflow: hidden; }
.xhs-template-studio-workbench .xhs-workbench,
.xhs-template-studio-workbench .xhs-studio-editor { position: relative; inset: auto; z-index: auto; width: auto; min-width: 0; min-height: 0; height: 100%; border: 1px solid rgba(var(--ui-source-584d45c3829a95-rgb, 232, 235, 239), var(--ui-source-584d45c3829a95-alpha, 1)); border-radius: 18px; background: rgba(var(--ui-source-d89cb5294cfef4-rgb, 255, 255, 255), var(--ui-source-d89cb5294cfef4-alpha, 1)); color: rgba(var(--ui-source-802f84a3d366ee-rgb, 38, 50, 60), var(--ui-source-802f84a3d366ee-alpha, 1)); box-shadow: none; transform: none; overflow: hidden; }
.xhs-template-studio-workbench .xhs-workbench-close { display: none; }
.xhs-template-studio-workbench .xhs-template-library { display: flex; flex-direction: column; }
.xhs-template-studio-workbench .xhs-template-library > .xhs-settings-template-section { display: flex; flex: 1; flex-direction: column; min-width: 0; min-height: 0; margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; overflow: hidden; }
.xhs-template-studio-workbench .xhs-template-library .xhs-side-head { flex: none; align-items: center; gap: 8px; padding: 17px 16px 13px; }
.xhs-template-studio-workbench .xhs-template-library .xhs-side-head h3 { margin: 0; color: rgba(var(--ui-source-802e76a1ce77de-rgb, 38, 50, 60), var(--ui-source-802e76a1ce77de-alpha, 1)); font-size: 16px; font-weight: 600; }
.xhs-template-studio-workbench .xhs-template-library .xhs-side-head h3 > span { margin-left: 8px; color: rgba(var(--ui-source-d06c7a96a6af4f-rgb, 124, 137, 148), var(--ui-source-d06c7a96a6af4f-alpha, 1)); font-size: 11px; font-weight: 400; }
.xhs-template-studio-workbench .xhs-template-library .xhs-side-head p { display: block; margin: 6px 0 0; color: rgba(var(--ui-source-d06c7a96a6af4f-rgb, 124, 137, 148), var(--ui-source-d06c7a96a6af4f-alpha, 1)); font-size: 11px; }
.xhs-template-studio-workbench .xhs-template-library .xhs-side-head button { min-height: 30px; padding: 6px 9px; font-size: 11px; }
.xhs-template-studio-workbench .xhs-template-filter-tabs { display: flex; flex: none; gap: 3px; margin: 0 14px 13px; padding: 4px; border-radius: 9px; background: rgba(var(--ui-source-eadc6d4f0649b0-rgb, 247, 248, 250), var(--ui-source-eadc6d4f0649b0-alpha, 1)); }
.xhs-template-studio-workbench .xhs-template-filter-tabs button { flex: 1; min-height: 32px; padding: 6px 2px; border: 0; border-radius: 6px; background: transparent; color: rgba(var(--ui-source-84194db2fa3bd6-rgb, 124, 137, 148), var(--ui-source-84194db2fa3bd6-alpha, 1)); font-size: 11px; white-space: nowrap; }
.xhs-template-studio-workbench .xhs-template-filter-tabs button.active { background: rgba(var(--ui-source-064e6aa3878e3d-rgb, 255, 255, 255), var(--ui-source-064e6aa3878e3d-alpha, 1)); color: rgba(var(--ui-source-74b2a16f6a7f7e-rgb, 38, 50, 60), var(--ui-source-74b2a16f6a7f7e-alpha, 1)); box-shadow: 0 2px 5px rgba(var(--ui-source-c19eb504a3049e-rgb, 0, 0, 0), var(--ui-source-c19eb504a3049e-alpha, 0.03)); }
.xhs-template-studio-workbench .xhs-template-library-grid { display: grid; flex: 1; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: max-content; align-content: start; gap: 13px 12px; min-width: 0; min-height: 0; max-height: none; height: auto; padding: 0 14px 14px; overflow: auto; overflow-x: hidden; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-gutter: stable; }
.xhs-template-studio-workbench .xhs-template-library-card,
.xhs-template-studio-workbench .xhs-template-library-card.draft,
.xhs-template-studio-workbench .xhs-template-library-card.locked { display: block; align-self: start; width: 100%; min-width: 0; min-height: 0; height: max-content; padding: 0; border: 1px solid rgba(var(--ui-source-584d45c3829a95-rgb, 232, 235, 239), var(--ui-source-584d45c3829a95-alpha, 1)); border-radius: 12px; background: rgba(var(--ui-source-d89cb5294cfef4-rgb, 255, 255, 255), var(--ui-source-d89cb5294cfef4-alpha, 1)); color: rgba(var(--ui-source-802f84a3d366ee-rgb, 38, 50, 60), var(--ui-source-802f84a3d366ee-alpha, 1)); box-shadow: none; text-align: left; overflow: hidden; }
.xhs-template-studio-workbench .xhs-template-library-card.active { border-color: rgba(var(--ui-source-218192867eec4d-rgb, 237, 63, 89), var(--ui-source-218192867eec4d-alpha, 1)); background: rgba(var(--ui-source-2bbd9a5403f6ed-rgb, 255, 255, 255), var(--ui-source-2bbd9a5403f6ed-alpha, 1)); color: rgba(var(--ui-source-3bba5431dc83f8-rgb, 38, 50, 60), var(--ui-source-3bba5431dc83f8-alpha, 1)); box-shadow: 0 0 0 2px rgba(var(--ui-source-dbfc61de50adaf-rgb, 237, 63, 89), var(--ui-source-dbfc61de50adaf-alpha, 0.12)); }
.xhs-template-studio-workbench .xhs-template-cover { position: relative; display: block; width: 100%; aspect-ratio: 3 / 4; margin: 0; padding: 0; overflow: hidden; border: 0; border-radius: 0; background: rgba(var(--ui-source-21bcd7e70a4b9c-rgb, 251, 247, 239), var(--ui-source-21bcd7e70a4b9c-alpha, 1)); }
.xhs-template-studio-workbench .xhs-template-cover canvas { display: block; width: 100%; height: 100%; aspect-ratio: 3 / 4; }
.xhs-template-studio-workbench .xhs-template-card-meta { display: block; min-width: 0; padding: 9px 8px 8px; border-top: 1px solid rgba(var(--ui-source-584d45c3829a95-rgb, 232, 235, 239), var(--ui-source-584d45c3829a95-alpha, 1)); }
.xhs-template-studio-workbench .xhs-template-card-title { display: block; min-width: 0; margin: 0 0 6px; padding: 0; border: 0; border-radius: 0; overflow: hidden; color: rgba(var(--ui-source-802e76a1ce77de-rgb, 38, 50, 60), var(--ui-source-802e76a1ce77de-alpha, 1)); font-size: 12px; font-weight: 500; line-height: 1.4; text-overflow: ellipsis; white-space: nowrap; }
.xhs-template-studio-workbench .xhs-template-library-card .xhs-template-card-meta .xhs-template-card-title { color: rgba(var(--ui-source-802e76a1ce77de-rgb, 38, 50, 60), var(--ui-source-802e76a1ce77de-alpha, 1)); }
.xhs-template-studio-workbench .xhs-template-card-bottom { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 5px 4px; min-width: 0; }
.xhs-template-studio-workbench .xhs-template-card-bottom > small { color: rgba(var(--ui-source-1af8b287ff1203-rgb, 124, 137, 148), var(--ui-source-1af8b287ff1203-alpha, 1)); font-size: 10px; line-height: 1.4; white-space: nowrap; }
.xhs-template-studio-workbench .xhs-template-library-card .xhs-template-card-bottom > small { color: rgba(var(--ui-source-1af8b287ff1203-rgb, 124, 137, 148), var(--ui-source-1af8b287ff1203-alpha, 1)); }
.xhs-template-studio-workbench .xhs-template-card-status { padding: 3px 4px; border-radius: 4px; background: rgba(var(--ui-source-560c9c001210de-rgb, 234, 246, 240), var(--ui-source-560c9c001210de-alpha, 1)); color: rgba(var(--ui-source-bb47554064978d-rgb, 50, 120, 102), var(--ui-source-bb47554064978d-alpha, 1)); font-size: 10px; font-weight: 500; line-height: 1.2; white-space: nowrap; }
.xhs-template-studio-workbench .xhs-template-library-card .xhs-template-card-meta .xhs-template-card-status { color: rgba(var(--ui-source-bb47554064978d-rgb, 50, 120, 102), var(--ui-source-bb47554064978d-alpha, 1)); }
.xhs-template-studio-workbench .xhs-template-library-card.locked .xhs-template-card-status { background: rgba(var(--ui-source-d6b545e4dfa5d3-rgb, 247, 248, 250), var(--ui-source-d6b545e4dfa5d3-alpha, 1)); color: rgba(var(--ui-source-7bba1a1bc5fc7c-rgb, 124, 137, 148), var(--ui-source-7bba1a1bc5fc7c-alpha, 1)); }
.xhs-template-studio-workbench .xhs-template-library-card.locked .xhs-template-card-meta .xhs-template-card-status { color: rgba(var(--ui-source-7bba1a1bc5fc7c-rgb, 124, 137, 148), var(--ui-source-7bba1a1bc5fc7c-alpha, 1)); }
.xhs-template-studio-workbench .xhs-template-library-footer { display: flex; flex: none; align-items: center; gap: 6px; min-height: 36px; padding: 9px 13px; border-top: 1px solid rgba(var(--ui-source-63c218a43ac716-rgb, 232, 235, 239), var(--ui-source-63c218a43ac716-alpha, 1)); color: rgba(var(--ui-source-d06c7a96a6af4f-rgb, 124, 137, 148), var(--ui-source-d06c7a96a6af4f-alpha, 1)); font-size: 10px; line-height: 1.5; }

.xhs-template-studio-workbench .xhs-canvas-stage.xhs-studio-editor { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; place-items: stretch; gap: 0; padding: 0; }
.xhs-template-studio-workbench .xhs-studio-editor-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 66px; padding: 15px 18px; background: rgba(var(--ui-source-d89cb5294cfef4-rgb, 255, 255, 255), var(--ui-source-d89cb5294cfef4-alpha, 1)); }
.xhs-template-studio-workbench .xhs-studio-editor-heading h2 { margin: 0; color: rgba(var(--ui-source-802e76a1ce77de-rgb, 38, 50, 60), var(--ui-source-802e76a1ce77de-alpha, 1)); font-size: 16px; font-weight: 600; }
.xhs-template-studio-workbench .xhs-studio-editor-heading h2 > span { margin-left: 9px; padding: 3px 6px; border-radius: 5px; background: rgba(var(--ui-source-e182ba9c21ce7f-rgb, 247, 248, 250), var(--ui-source-e182ba9c21ce7f-alpha, 1)); color: rgba(var(--ui-source-d06c7a96a6af4f-rgb, 124, 137, 148), var(--ui-source-d06c7a96a6af4f-alpha, 1)); font-size: 11px; font-weight: 400; }
.xhs-template-studio-workbench .xhs-studio-editor-heading p { margin: 5px 0 0; color: rgba(var(--ui-source-d06c7a96a6af4f-rgb, 124, 137, 148), var(--ui-source-d06c7a96a6af4f-alpha, 1)); font-size: 11px; }
.xhs-template-studio-workbench .xhs-studio-editor-heading > span { flex: none; color: rgba(var(--ui-source-d06c7a96a6af4f-rgb, 124, 137, 148), var(--ui-source-d06c7a96a6af4f-alpha, 1)); font-size: 12px; white-space: nowrap; }
.xhs-template-studio-workbench .xhs-ai-preview-results {
  top: 86px;
  bottom: calc(var(--xts-page-rail-height) + 46px);
  left: clamp(18px, 3.8%, 54px);
  width: clamp(100px, 17.5%, 230px);
  min-width: 0;
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.xhs-template-studio-workbench .xhs-ai-preview-count-0 { display: none; }
.xhs-template-studio-workbench .xhs-ai-preview-count-1 { grid-template-rows: minmax(0, 1fr); }
.xhs-template-studio-workbench .xhs-ai-preview-card { min-height: 0; container: xts-preview / size; }
.xhs-template-studio-workbench .xhs-ai-preview-card > small { color: rgba(var(--ui-source-1af8b287ff1203-rgb, 124, 137, 148), var(--ui-source-1af8b287ff1203-alpha, 1)); }
.xhs-template-studio-workbench .xhs-ai-preview-card canvas { width: min(100cqw, calc((100cqh - 22px) * .75)); height: auto; max-height: none; aspect-ratio: 3 / 4; }
.xhs-template-studio-workbench .xhs-template-canvas-layout { display: grid; grid-template-rows: minmax(0, 1fr) var(--xts-page-rail-height); align-items: center; justify-items: stretch; gap: 0; width: 100%; height: 100%; min-width: 0; min-height: 0; background: radial-gradient(rgba(var(--ui-source-c636ced6ed0d19-rgb, 217, 222, 229), var(--ui-source-c636ced6ed0d19-alpha, 1)) .8px, transparent .8px), rgba(var(--ui-source-ba0ad1e4e76fff-rgb, 238, 240, 244), var(--ui-source-ba0ad1e4e76fff-alpha, 1)); background-size: 15px 15px; container: xts-canvas / size; }
.xhs-template-studio-workbench .xhs-template-canvas-layout > .xhs-canvas-frame { grid-row: 1; align-self: center; justify-self: center; width: min(calc(100cqw - 80px), calc((100cqh - var(--xts-page-rail-height) - 40px) * .75), 558px); max-width: none; height: auto; min-height: 0; max-height: none; aspect-ratio: 3 / 4; padding: 0; border: 0; }
.xhs-template-studio-workbench .xhs-canvas-frame .xhs-canvas-shell { width: 100%; height: 100%; max-width: none; margin: 0; border-radius: 0; box-shadow: 0 16px 36px rgba(30, 44, 66, .14); }
.xhs-template-studio-workbench .xhs-template-canvas-layout > .xhs-page-manager { align-self: stretch; grid-row: 2; width: 100%; max-width: none; min-width: 0; height: var(--xts-page-rail-height); margin: 0; padding: 12px 17px 8px; border-top: 1px solid rgba(var(--ui-source-584d45c3829a95-rgb, 232, 235, 239), var(--ui-source-584d45c3829a95-alpha, 1)); background: rgba(var(--ui-source-d89cb5294cfef4-rgb, 255, 255, 255), var(--ui-source-d89cb5294cfef4-alpha, 1)); overflow: hidden; }
.xhs-template-studio-workbench .xhs-page-manager-actions { display: flex; align-items: center; justify-content: flex-start; flex-wrap: nowrap; gap: 7px; min-width: 0; margin: 0 0 9px; padding-bottom: 3px; overflow-x: auto; scrollbar-width: thin; }
.xhs-template-studio-workbench .xhs-page-manager-actions strong { margin: 0 4px 0 0; color: rgba(var(--ui-source-802f84a3d366ee-rgb, 38, 50, 60), var(--ui-source-802f84a3d366ee-alpha, 1)); font-size: 12px; font-weight: 500; white-space: nowrap; }
.xhs-template-studio-workbench .xhs-page-manager-actions button { min-height: 28px; padding: 5px 9px; font-size: 11px; white-space: nowrap; }
.xhs-template-studio-workbench .xhs-page-thumbnails { display: flex; gap: 10px; width: 100%; min-width: 0; max-width: 100%; margin: 0; padding: 3px 2px 7px; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scrollbar-width: thin; }
.xhs-template-studio-workbench .xhs-page-thumbnails .xhs-page-thumbnail { display: flex; flex: 0 0 59px; flex-direction: column; align-items: center; gap: 0; min-height: 0; padding: 0; border: 0; border-radius: 0; background: transparent; color: rgba(var(--ui-source-d06c7a96a6af4f-rgb, 124, 137, 148), var(--ui-source-d06c7a96a6af4f-alpha, 1)); box-shadow: none; }
.xhs-template-studio-workbench .xhs-page-thumbnail canvas { width: 59px; height: auto; aspect-ratio: 3 / 4; border: 1px solid rgba(var(--ui-source-584d45c3829a95-rgb, 232, 235, 239), var(--ui-source-584d45c3829a95-alpha, 1)); border-radius: 5px; background: rgba(var(--ui-source-d89cb5294cfef4-rgb, 255, 255, 255), var(--ui-source-d89cb5294cfef4-alpha, 1)); }
.xhs-template-studio-workbench .xhs-page-thumbnail > span { margin-top: 5px; color: inherit; font-size: 10px; line-height: 1.4; white-space: nowrap; }
.xhs-template-studio-workbench .xhs-page-thumbnails .xhs-page-thumbnail.active { background: transparent; color: rgba(var(--ui-source-771569268ec73e-rgb, 237, 63, 89), var(--ui-source-771569268ec73e-alpha, 1)); }
.xhs-template-studio-workbench .xhs-page-thumbnail.active canvas { border-color: rgba(var(--ui-source-218192867eec4d-rgb, 237, 63, 89), var(--ui-source-218192867eec4d-alpha, 1)); box-shadow: 0 0 0 2px rgba(var(--ui-source-dbfc61de50adaf-rgb, 237, 63, 89), var(--ui-source-dbfc61de50adaf-alpha, 0.12)); }
.xhs-template-studio-workbench .xhs-studio-editor-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 32px; padding: 8px 17px; border-top: 1px solid rgba(var(--ui-source-63c218a43ac716-rgb, 232, 235, 239), var(--ui-source-63c218a43ac716-alpha, 1)); background: rgba(var(--ui-source-d89cb5294cfef4-rgb, 255, 255, 255), var(--ui-source-d89cb5294cfef4-alpha, 1)); color: rgba(var(--ui-source-d06c7a96a6af4f-rgb, 124, 137, 148), var(--ui-source-d06c7a96a6af4f-alpha, 1)); font-size: 10px; line-height: 1.5; }
.xhs-template-studio-workbench .xhs-studio-editor-empty { display: grid; min-height: 0; place-content: center; gap: 12px; padding: 30px; color: rgba(var(--ui-source-d06c7a96a6af4f-rgb, 124, 137, 148), var(--ui-source-d06c7a96a6af4f-alpha, 1)); text-align: center; }
.xhs-template-studio-workbench .xhs-canvas-stage.xhs-studio-empty-stage { grid-template-rows: minmax(0, 1fr); place-items: center; padding: 30px; }
.xhs-template-studio-workbench .xhs-studio-empty-stage > .xhs-studio-welcome { max-width: 440px; padding: 20px; border: 0; background: transparent; box-shadow: none; color: rgba(var(--ui-source-d06c7a96a6af4f-rgb, 124, 137, 148), var(--ui-source-d06c7a96a6af4f-alpha, 1)); text-align: center; }

.xhs-template-studio-workbench .xhs-studio-tools { display: flex; flex-direction: column; }
.xhs-template-studio-workbench .xhs-studio-tools > .xhs-workbench-heading { display: none; }
.xhs-template-studio-workbench .xhs-studio-tool-tabs { display: flex; flex: none; gap: 5px; min-height: 54px; padding: 10px; border-bottom: 1px solid rgba(var(--ui-source-55725d92592f7c-rgb, 232, 235, 239), var(--ui-source-55725d92592f7c-alpha, 1)); }
.xhs-template-studio-workbench .xhs-studio-tool-tabs button { display: inline-flex; flex: 1; align-items: center; justify-content: center; gap: 7px; min-height: 34px; padding: 8px 4px; border: 0; border-radius: 9px; background: transparent; color: rgba(var(--ui-source-84194db2fa3bd6-rgb, 124, 137, 148), var(--ui-source-84194db2fa3bd6-alpha, 1)); font-size: 12px; white-space: nowrap; }
.xhs-template-studio-workbench .xhs-studio-tool-tabs button.active { background: rgba(var(--ui-source-e203c6ed384156-rgb, 255, 241, 243), var(--ui-source-e203c6ed384156-alpha, 1)); color: rgba(var(--ui-source-4c07cedde58777-rgb, 237, 63, 89), var(--ui-source-4c07cedde58777-alpha, 1)); }
.xhs-template-studio-workbench .xhs-right-settings-scroll { display: block; flex: 1; min-width: 0; min-height: 0; height: auto; padding: 15px; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-gutter: stable; }
.xhs-template-studio-workbench :is(.xhs-studio-design-tools, .xhs-studio-ai-tools) { display: grid; align-content: start; gap: 16px; min-width: 0; min-height: 0; }
.xhs-template-studio-workbench :is(.xhs-property-section, .xhs-settings-ai, .xhs-reference-panel-inline) { min-width: 0; min-height: 0; margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; }
.xhs-template-studio-workbench .xhs-studio-design-tools > section + section { padding-top: 15px; border-top: 1px solid rgba(var(--ui-source-584d45c3829a95-rgb, 232, 235, 239), var(--ui-source-584d45c3829a95-alpha, 1)); }
.xhs-template-studio-workbench .xhs-studio-design-tools > div + div { padding-top: 15px; border-top: 1px solid rgba(var(--ui-source-584d45c3829a95-rgb, 232, 235, 239), var(--ui-source-584d45c3829a95-alpha, 1)); }
.xhs-template-studio-workbench .xhs-studio-design-tools .xhs-right-layer-middle { padding-inline: 0; border-bottom: 0; overflow: visible; }
.xhs-template-studio-workbench .xhs-studio-design-tools .xhs-template-reference-slot { padding-inline: 0; border-bottom: 0; }
.xhs-template-studio-workbench .xhs-property-section > header { position: static; display: flex; align-items: center; justify-content: space-between; gap: 9px; margin: 0 0 10px; padding: 0; border: 0; background: transparent; }
.xhs-template-studio-workbench .xhs-property-section h4 { margin: 0; color: rgba(var(--ui-source-802e76a1ce77de-rgb, 38, 50, 60), var(--ui-source-802e76a1ce77de-alpha, 1)); font-size: 13px; font-weight: 600; }
.xhs-template-studio-workbench .xhs-property-section header > span { margin: 0; color: rgba(var(--ui-source-d06c7a96a6af4f-rgb, 124, 137, 148), var(--ui-source-d06c7a96a6af4f-alpha, 1)); font-size: 11px; }
.xhs-template-studio-workbench .xhs-property-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px 8px; }
.xhs-template-studio-workbench .xhs-property-grid + .xhs-property-grid { margin-top: 9px; }
.xhs-template-studio-workbench .xhs-property-grid label { display: grid; grid-template-columns: minmax(0, 1fr); align-items: start; gap: 5px; min-width: 0; }
.xhs-template-studio-workbench .xhs-property-grid label > span { color: rgba(var(--ui-source-d06c7a96a6af4f-rgb, 124, 137, 148), var(--ui-source-d06c7a96a6af4f-alpha, 1)); font-size: 11px; }
.xhs-template-studio-workbench :is(.xhs-property-grid, .xhs-template-page-settings) :is(input, select, textarea),
.xhs-template-studio-workbench .xhs-reference-panel-inline > select { width: 100%; min-width: 0; min-height: 31px; padding: 6px 8px; border: 1px solid rgba(var(--ui-source-c5cfe854f04b9d-rgb, 232, 235, 239), var(--ui-source-c5cfe854f04b9d-alpha, 1)); border-radius: 7px; background: rgba(var(--ui-source-f8f7c0b315bb50-rgb, 255, 255, 255), var(--ui-source-f8f7c0b315bb50-alpha, 1)); color: rgba(var(--ui-source-7e4d973f4c7323-rgb, 38, 50, 60), var(--ui-source-7e4d973f4c7323-alpha, 1)); caret-color: rgba(var(--ui-source-f7d219d2397cc1-rgb, 38, 50, 60), var(--ui-source-f7d219d2397cc1-alpha, 1)); font-family: inherit; font-size: 12px; font-weight: 400; line-height: 1.4; }
.xhs-template-studio-workbench .xhs-property-grid input[type="color"] { padding: 3px; }
.xhs-template-studio-workbench .xhs-property-grid textarea { min-height: 70px; resize: vertical; }
.xhs-template-studio-workbench .xhs-upload-row { gap: 7px; margin-top: 9px; }
.xhs-template-studio-workbench .xhs-upload-row > :is(button, label) { min-height: 31px; font-size: 11px; }
.xhs-template-studio-workbench .xhs-layer-list { max-height: none; margin-top: 9px; overflow: visible; }
.xhs-template-studio-workbench .xhs-layer-row { padding: 7px 8px; border: 1px solid rgba(var(--ui-source-d27e3ff8c84352-rgb, 232, 235, 239), var(--ui-source-d27e3ff8c84352-alpha, 1)); border-radius: 9px; background: rgba(var(--ui-source-d89cb5294cfef4-rgb, 255, 255, 255), var(--ui-source-d89cb5294cfef4-alpha, 1)); color: rgba(var(--ui-source-802f84a3d366ee-rgb, 38, 50, 60), var(--ui-source-802f84a3d366ee-alpha, 1)); }
.xhs-template-studio-workbench .xhs-layer-row.active { border-color: rgba(var(--ui-source-218192867eec4d-rgb, 237, 63, 89), var(--ui-source-218192867eec4d-alpha, 1)); background: rgba(var(--ui-source-13a88724238d5f-rgb, 255, 241, 243), var(--ui-source-13a88724238d5f-alpha, 1)); box-shadow: none; }
.xhs-template-studio-workbench .xhs-layer-index { min-height: 28px; padding: 3px 2px; border: 0; background: transparent; color: rgba(var(--ui-source-d06c7a96a6af4f-rgb, 124, 137, 148), var(--ui-source-d06c7a96a6af4f-alpha, 1)); }
.xhs-template-studio-workbench .xhs-layer-inline-name { color: rgba(var(--ui-source-802f84a3d366ee-rgb, 38, 50, 60), var(--ui-source-802f84a3d366ee-alpha, 1)); font-size: 12px; font-weight: 500; }
.xhs-template-studio-workbench .xhs-layer-ai-mode { min-height: 28px; border-color: rgba(var(--ui-source-d27e3ff8c84352-rgb, 232, 235, 239), var(--ui-source-d27e3ff8c84352-alpha, 1)); background: rgba(var(--ui-source-e182ba9c21ce7f-rgb, 247, 248, 250), var(--ui-source-e182ba9c21ce7f-alpha, 1)); color: rgba(var(--ui-source-d06c7a96a6af4f-rgb, 124, 137, 148), var(--ui-source-d06c7a96a6af4f-alpha, 1)); font-size: 11px; font-weight: 400; }
.xhs-template-studio-workbench .xhs-layer-delete { align-self: center; min-height: 28px; padding: 5px 7px; border: 0; background: rgba(var(--ui-source-e182ba9c21ce7f-rgb, 247, 248, 250), var(--ui-source-e182ba9c21ce7f-alpha, 1)); color: rgba(var(--ui-source-d06c7a96a6af4f-rgb, 124, 137, 148), var(--ui-source-d06c7a96a6af4f-alpha, 1)); font-size: 11px; }
.xhs-template-studio-workbench .xhs-layer-kind { color: rgba(var(--ui-source-d06c7a96a6af4f-rgb, 124, 137, 148), var(--ui-source-d06c7a96a6af4f-alpha, 1)); }
.xhs-template-studio-workbench .xhs-reference-panel-inline header h3 { margin: 0; color: rgba(var(--ui-source-802e76a1ce77de-rgb, 38, 50, 60), var(--ui-source-802e76a1ce77de-alpha, 1)); font-size: 13px; }
.xhs-template-studio-workbench .xhs-reference-panel-inline .xhs-reference-frame { height: 130px; margin: 10px auto; border-color: var(--xts-line); background: var(--xts-soft); }
.xhs-template-studio-workbench .xhs-template-page-settings { margin: 0; gap: 10px; }
.xhs-template-studio-workbench .xhs-template-page-settings :is(p, small) { margin: 0; color: rgba(var(--ui-source-d06c7a96a6af4f-rgb, 124, 137, 148), var(--ui-source-d06c7a96a6af4f-alpha, 1)); font-size: 11px; line-height: 1.6; }
.xhs-template-studio-workbench .xhs-prompt-entry-actions { gap: 8px; margin-top: 12px; }
.xhs-template-studio-workbench .xhs-prompt-entry-actions button { min-height: 36px; white-space: normal; }
.xhs-template-studio-workbench .xhs-studio-ai-tools { padding: 16px; border: 1px solid rgba(var(--ui-source-584d45c3829a95-rgb, 232, 235, 239), var(--ui-source-584d45c3829a95-alpha, 1)); border-radius: 12px; background: linear-gradient(135deg, rgba(var(--ui-source-b0098a0e077332-rgb, 246, 243, 252), var(--ui-source-b0098a0e077332-alpha, 1)), rgba(var(--ui-source-5cdb304ecf8b0b-rgb, 255, 241, 243), var(--ui-source-5cdb304ecf8b0b-alpha, 1))); }
.xhs-template-studio-workbench .xhs-studio-tool-footer { display: flex; flex: none; align-items: center; gap: 6px; min-height: 36px; padding: 9px 14px; border-top: 1px solid rgba(var(--ui-source-63c218a43ac716-rgb, 232, 235, 239), var(--ui-source-63c218a43ac716-alpha, 1)); color: rgba(var(--ui-source-d06c7a96a6af4f-rgb, 124, 137, 148), var(--ui-source-d06c7a96a6af4f-alpha, 1)); font-size: 10px; line-height: 1.5; }

[data-theme="tech"] .xhs-minimal-editor.xhs-template-studio-workbench { --xts-ink: #e3eaf0; --xts-muted: #a3b2c0; --xts-bg: #111d29; --xts-panel: #172635; --xts-line: #2d3d4c; --xts-soft: #213140; --xts-red: #fa7287; --xts-red-soft: #382b3b; --xts-green: #89c9b5; --xts-green-soft: #263c37; --xts-stage: #101e2a; --xts-stage-dot: #263a4c; --xts-purple-soft: #29283d; color-scheme: dark; }
[data-theme="tech"] .xhs-template-studio-workbench .xhs-template-library-card :is(.xhs-template-card-title, small) { color: var(--xts-ink); }
[data-theme="tech"] .xhs-template-studio-workbench .xhs-studio-actions :is(.xhs-studio-primary, [data-ai-preview-button]) { color: #fff; }

@media (min-width: 2200px) {
  .xhs-minimal-editor.xhs-template-studio-workbench { --xts-page-rail-height: 204px; grid-template-rows: 80px auto minmax(0, 1fr); gap: 18px; padding: 26px 28px 28px; }
  .xhs-template-studio-workbench .xhs-one-screen-grid.xhs-studio-workspace { grid-template-columns: 352px minmax(0, 1fr) 380px; gap: 18px; }
  .xhs-template-studio-workbench .xhs-studio-redbook { width: 66px; height: 66px; border-radius: 21px; font-size: 17px; }
  .xhs-template-studio-workbench .xhs-studio-heading h1 { font-size: 33px; }
  .xhs-template-studio-workbench .xhs-studio-actionbar { min-height: 70px; padding: 12px 16px 12px 20px; }
  .xhs-template-studio-workbench .xhs-studio-actions button { min-height: 44px; padding: 10px 17px; font-size: 15px; }
  .xhs-template-studio-workbench .xhs-template-library .xhs-side-head { padding: 23px 20px 18px; }
  .xhs-template-studio-workbench .xhs-template-library .xhs-side-head h3 { font-size: 19px; }
  .xhs-template-studio-workbench .xhs-template-library-grid { gap: 15px 14px; padding: 0 18px 18px; }
  .xhs-template-studio-workbench .xhs-template-filter-tabs { margin: 0 18px 16px; }
  .xhs-template-studio-workbench .xhs-template-card-title { font-size: 14px; }
  .xhs-template-studio-workbench .xhs-template-card-bottom > small,
  .xhs-template-studio-workbench .xhs-template-card-status { font-size: 11px; }
  .xhs-template-studio-workbench .xhs-studio-editor-heading { min-height: 80px; padding: 20px 24px; }
  .xhs-template-studio-workbench .xhs-ai-preview-results { top: 100px; }
  .xhs-template-studio-workbench .xhs-page-thumbnails .xhs-page-thumbnail { flex-basis: 74px; }
  .xhs-template-studio-workbench .xhs-page-thumbnail canvas { width: 74px; }
  .xhs-template-studio-workbench .xhs-template-canvas-layout > .xhs-page-manager { padding: 16px 22px 10px; }
  .xhs-template-studio-workbench .xhs-right-settings-scroll { padding: 20px; }
  .xhs-template-studio-workbench .xhs-studio-tool-tabs { min-height: 64px; padding: 14px; }
}

@media (max-width: 1500px) {
  .xhs-minimal-editor.xhs-template-studio-workbench { --xts-page-rail-height: 148px; grid-template-rows: 56px auto minmax(0, 1fr); gap: 10px; padding: 12px; }
  .xhs-template-studio-workbench .xhs-one-screen-grid.xhs-studio-workspace { grid-template-columns: 220px minmax(0, 1fr) 270px; gap: 10px; }
  .xhs-template-studio-workbench .xhs-studio-heading-title { gap: 12px; }
  .xhs-template-studio-workbench .xhs-studio-redbook { width: 44px; height: 44px; border-radius: 14px; font-size: 12px; }
  .xhs-template-studio-workbench .xhs-studio-heading h1 { font-size: 23px; }
  .xhs-template-studio-workbench .xhs-studio-intelligence { display: none; }
  .xhs-template-studio-workbench .xhs-studio-actionbar { min-height: 54px; padding: 8px 10px; gap: 10px; }
  .xhs-template-studio-workbench .xhs-studio-current-title { max-width: 210px; font-size: 13px; }
  .xhs-template-studio-workbench .xhs-studio-save-state { display: none; }
  .xhs-template-studio-workbench .xhs-studio-actions { gap: 5px; }
  .xhs-template-studio-workbench .xhs-studio-actions button { min-height: 34px; padding: 7px 9px; font-size: 11px; }
  .xhs-template-studio-workbench .xhs-template-library .xhs-side-head { padding: 14px 12px 12px; }
  .xhs-template-studio-workbench .xhs-template-library .xhs-side-head h3 { font-size: 14px; }
  .xhs-template-studio-workbench .xhs-template-filter-tabs { margin: 0 10px 12px; }
  .xhs-template-studio-workbench .xhs-template-filter-tabs button { font-size: 10px; }
  .xhs-template-studio-workbench .xhs-template-library-grid { gap: 10px; padding: 0 10px 12px; }
  .xhs-template-studio-workbench .xhs-template-card-meta { padding: 8px 6px; }
  .xhs-template-studio-workbench .xhs-template-card-title { font-size: 11px; }
  .xhs-template-studio-workbench .xhs-studio-editor-heading { min-height: 54px; padding: 12px 14px; }
  .xhs-template-studio-workbench .xhs-studio-editor-heading > span { display: none; }
  .xhs-template-studio-workbench .xhs-ai-preview-results { top: 78px; bottom: calc(var(--xts-page-rail-height) + 40px); left: 12px; width: min(88px, 14%); }
  .xhs-template-studio-workbench .xhs-template-canvas-layout > .xhs-canvas-frame { width: min(calc(100cqw - 44px), calc((100cqh - var(--xts-page-rail-height) - 28px) * .75), 558px); }
  .xhs-template-studio-workbench .xhs-template-canvas-layout > .xhs-page-manager { padding: 9px 12px 7px; }
  .xhs-template-studio-workbench .xhs-page-manager-actions { gap: 5px; margin-bottom: 6px; }
  .xhs-template-studio-workbench .xhs-page-manager-actions button { min-height: 25px; padding: 4px 6px; font-size: 10px; }
  .xhs-template-studio-workbench .xhs-page-thumbnails { gap: 8px; }
  .xhs-template-studio-workbench .xhs-page-thumbnails .xhs-page-thumbnail { flex-basis: 44px; }
  .xhs-template-studio-workbench .xhs-page-thumbnail canvas { width: 44px; }
  .xhs-template-studio-workbench .xhs-studio-editor-footer { min-height: 28px; padding: 6px 12px; font-size: 9px; }
  .xhs-template-studio-workbench .xhs-right-settings-scroll { padding: 13px; }
  .xhs-template-studio-workbench .xhs-studio-tool-tabs { min-height: 48px; padding: 8px; }
}

@container xts-workbench (max-width: 950px) {
  .xhs-template-studio-workbench .xhs-one-screen-grid.xhs-studio-workspace { grid-template-columns: 220px minmax(0, 1fr); grid-template-rows: minmax(430px, 1fr) 360px; align-content: start; overflow-y: auto; }
  .xhs-template-studio-workbench .xhs-studio-tools { grid-column: 1 / -1; height: 360px; }
  .xhs-template-studio-workbench .xhs-studio-actionbar { flex-wrap: wrap; }
  .xhs-template-studio-workbench .xhs-studio-actions { flex-wrap: wrap; }
  .xhs-template-studio-workbench .xhs-studio-intelligence { display: none; }
}

@container xts-workbench (max-width: 620px) {
  .xhs-template-studio-workbench .xhs-studio-heading-right { flex: none; }
  .xhs-template-studio-workbench .xhs-studio-heading h1 { font-size: 20px; }
  .xhs-template-studio-workbench .xhs-studio-breadcrumb { font-size: 10px; }
  .xhs-template-studio-workbench .xhs-studio-redbook { width: 40px; height: 40px; border-radius: 12px; font-size: 11px; }
  .xhs-template-studio-workbench .xhs-studio-heading-title { gap: 9px; }
  .xhs-template-studio-workbench .xhs-studio-heading-right button { padding: 6px 8px; font-size: 11px; }
  .xhs-template-studio-workbench .xhs-one-screen-grid.xhs-studio-workspace { display: flex; flex-direction: column; gap: 12px; overflow-y: auto; }
  .xhs-template-studio-workbench .xhs-template-library { flex: none; height: 390px; }
  .xhs-template-studio-workbench .xhs-studio-editor { flex: none; height: 610px; }
  .xhs-template-studio-workbench .xhs-studio-tools { flex: none; height: 430px; }
  .xhs-template-studio-workbench .xhs-studio-current { flex-wrap: wrap; }
  .xhs-template-studio-workbench .xhs-studio-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; }
  .xhs-template-studio-workbench .xhs-studio-current-title { max-width: 240px; }
  .xhs-template-studio-workbench .xhs-studio-editor-footer > span:nth-child(2) { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .main:has(> .xhs-note-studio > .xhs-template-studio-workbench) > .floating-message { animation: none !important; }
  .xhs-template-studio-workbench *,
  .xhs-template-studio-workbench *::before,
  .xhs-template-studio-workbench *::after { animation: none !important; transition: none !important; }
  .xhs-template-studio-workbench button:hover:not(:disabled) { transform: none; }
}

/* Template design: reference at the upper left, styles above AI field settings. */
.xhs-template-studio-workbench .xhs-template-canvas-layout {
  --xts-reference-width: clamp(130px, 12vw, 190px);
  grid-template-columns: calc(var(--xts-reference-width) + 24px) minmax(0, 1fr);
}
.xhs-template-studio-workbench .xhs-template-canvas-layout > .xhs-studio-canvas-reference {
  grid-column: 1;
  grid-row: 1;
  align-self: start;
  width: 100%;
  min-width: 0;
  min-height: 0;
  max-height: calc(100cqh - var(--xts-page-rail-height) - 24px);
  margin-top: 12px;
  padding: 0 0 12px 12px;
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}
.xhs-template-studio-workbench .xhs-studio-canvas-reference .xhs-reference-panel-inline {
  padding: 10px;
  border: 1px solid rgba(var(--ui-source-584d45c3829a95-rgb, 232, 235, 239), var(--ui-source-584d45c3829a95-alpha, 1));
  border-radius: 10px;
  background: rgba(var(--ui-source-d89cb5294cfef4-rgb, 255, 255, 255), var(--ui-source-d89cb5294cfef4-alpha, 1));
}
.xhs-template-studio-workbench .xhs-studio-canvas-reference .xhs-reference-frame {
  height: 150px;
  margin: 9px 0;
}
.xhs-template-studio-workbench .xhs-studio-canvas-reference .xhs-reference-actions {
  grid-template-columns: minmax(0, 1fr);
}
.xhs-template-studio-workbench .xhs-studio-canvas-reference .xhs-reference-strategy {
  display: none;
}
.xhs-template-studio-workbench .xhs-studio-canvas-reference .xhs-ai-preview-results {
  position: static;
  width: 100%;
  max-height: none;
  margin-top: 12px;
  grid-template-rows: none;
  grid-auto-rows: max-content;
  gap: 10px;
}
.xhs-template-studio-workbench .xhs-studio-canvas-reference .xhs-ai-preview-card {
  container-type: normal;
}
.xhs-template-studio-workbench .xhs-studio-canvas-reference .xhs-ai-preview-card canvas {
  width: 100%;
}
.xhs-template-studio-workbench .xhs-template-canvas-layout > .xhs-canvas-frame {
  grid-column: 2;
  width: min(calc(100cqw - var(--xts-reference-width) - 64px), calc((100cqh - var(--xts-page-rail-height) - 40px) * .75), 558px);
}
.xhs-template-studio-workbench .xhs-template-canvas-layout > .xhs-page-manager {
  grid-column: 1 / -1;
}
.xhs-template-studio-workbench[data-tool-tab="design"] .xhs-right-settings-scroll {
  padding: 0;
  overflow: hidden;
}
.xhs-template-studio-workbench .xhs-studio-design-tools {
  height: 100%;
  grid-template-rows: minmax(170px, 57fr) minmax(110px, 43fr);
  gap: 0;
  overflow: hidden;
}
.xhs-template-studio-workbench .xhs-studio-design-tools > .xhs-right-layer-middle,
.xhs-template-studio-workbench .xhs-studio-design-tools > .xhs-studio-secondary-tools {
  min-height: 0;
  padding: 14px;
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-gutter: stable;
}
.xhs-template-studio-workbench .xhs-studio-secondary-tools > div + div {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid rgba(var(--ui-source-584d45c3829a95-rgb, 232, 235, 239), var(--ui-source-584d45c3829a95-alpha, 1));
}
@media (max-width: 767px) {
  .xhs-template-studio-workbench .xhs-template-canvas-layout { --xts-reference-width: 120px; }
  .xhs-template-studio-workbench .xhs-studio-canvas-reference .xhs-reference-frame { height: 120px; }
}

/* Reference and editable artwork share balanced comparison slots. */
.xhs-template-studio-workbench .xhs-template-canvas-layout {
  --xts-comparison-size: min(calc((100cqw - 64px) / 2), calc((100cqh - var(--xts-page-rail-height) - 88px) * .75), 558px);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.xhs-template-studio-workbench .xhs-template-canvas-layout > .xhs-canvas-frame {
  width: var(--xts-comparison-size);
}
.xhs-template-studio-workbench .xhs-template-canvas-layout > .xhs-studio-canvas-reference {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  align-self: stretch;
  max-height: none;
  margin: 0;
  padding: 44px 12px;
}
.xhs-template-studio-workbench .xhs-studio-canvas-reference .xhs-reference-panel-compare {
  position: relative;
  flex: none;
  width: calc(var(--xts-comparison-size) * .95);
  max-width: 100%;
  margin-top: max(0px, calc((100cqh - var(--xts-page-rail-height) - 88px - var(--xts-comparison-size) * .95 * 4 / 3) / 2));
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}
.xhs-template-studio-workbench .xhs-reference-panel-compare > header {
  position: absolute;
  inset: auto 0 calc(100% + 8px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  min-height: 28px;
  margin: 0;
}
.xhs-template-studio-workbench .xhs-reference-panel-compare > header h3 {
  font-size: 12px;
  white-space: nowrap;
}
.xhs-template-studio-workbench .xhs-reference-panel-compare > header p {
  display: none;
}
.xhs-template-studio-workbench .xhs-reference-panel-compare .xhs-reference-compact-actions {
  display: flex;
  flex: none;
  align-items: center;
  gap: 5px;
  margin: 0;
}
.xhs-template-studio-workbench .xhs-reference-compact-actions > :is(label, button) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  min-width: 28px;
  min-height: 28px;
  padding: 0;
  border: 1px solid rgba(var(--ui-source-584d45c3829a95-rgb, 232, 235, 239), var(--ui-source-584d45c3829a95-alpha, 1));
  border-radius: 7px;
  background: rgba(var(--ui-source-d89cb5294cfef4-rgb, 255, 255, 255), var(--ui-source-d89cb5294cfef4-alpha, 1));
  color: rgba(var(--ui-source-c94d2ab109e676-rgb, 38, 50, 60), var(--ui-source-c94d2ab109e676-alpha, 1));
  font-size: 16px;
  line-height: 1;
}
.xhs-template-studio-workbench .xhs-reference-compact-actions > label {
  font-size: 23px;
}
.xhs-template-studio-workbench .xhs-reference-compact-actions > button[onclick*="undoReferenceLayout"] {
  position: absolute;
  top: calc(100% + 12px + var(--xts-comparison-size) * .95 * 4 / 3);
  right: 0;
  width: auto;
  min-height: 24px;
  padding: 0 6px;
  font-size: 10px;
}
.xhs-template-studio-workbench .xhs-studio-canvas-reference .xhs-reference-panel-compare .xhs-reference-frame {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 4;
  margin: 0;
  border: 1px solid var(--xts-line);
  border-radius: 0;
  background: var(--xts-soft);
  box-shadow: 0 12px 28px rgba(30, 44, 66, .09);
}
.xhs-template-studio-workbench .xhs-reference-panel-compare .xhs-reference-warning {
  margin: 8px 0 0;
}
.xhs-template-studio-workbench .xhs-studio-canvas-reference .xhs-ai-preview-results {
  flex: none;
  width: calc(var(--xts-comparison-size) * .95);
  max-width: 100%;
}
.xhs-template-studio-workbench .xhs-studio-canvas-reference:has(button[onclick*="undoReferenceLayout"]) .xhs-ai-preview-results {
  margin-top: 40px;
}
@media (max-width: 767px) {
  .xhs-template-studio-workbench .xhs-template-canvas-layout {
    --xts-comparison-size: min(calc((100cqw - 28px) / 2), calc((100cqh - var(--xts-page-rail-height) - 88px) * .75), 558px);
  }
  .xhs-template-studio-workbench .xhs-template-canvas-layout > .xhs-studio-canvas-reference { padding: 44px 4px; }
  .xhs-template-studio-workbench .xhs-reference-panel-compare > header h3 { font-size: 10px; }
  .xhs-template-studio-workbench .xhs-reference-compact-actions { gap: 3px; }
  .xhs-template-studio-workbench .xhs-reference-compact-actions > :is(label, button) { width: 24px; min-width: 24px; min-height: 24px; }
}

/* A closer, balanced pair and compact reference controls. */
.xhs-minimal-editor.xhs-template-studio-workbench {
  --xts-image-size-rail: 176px;
  --xts-page-rail-height: 140px;
}
.xhs-template-studio-workbench .xhs-template-canvas-layout {
  --xts-comparison-inset: clamp(4px, 1.4cqw, 18px);
  --xts-comparison-size: min(calc((100cqw - 64px) / 2), calc((100cqh - var(--xts-image-size-rail) - 88px) * .75), 558px);
}
.xhs-template-studio-workbench .xhs-template-canvas-layout > .xhs-studio-canvas-reference {
  position: relative;
  left: var(--xts-comparison-inset);
}
.xhs-template-studio-workbench .xhs-template-canvas-layout > .xhs-canvas-frame {
  position: relative;
  left: calc(var(--xts-comparison-inset) * -1);
}
.xhs-template-studio-workbench .xhs-reference-panel-compare > header {
  min-height: 32px;
}
.xhs-template-studio-workbench .xhs-reference-panel-compare > header h3 {
  color: rgba(var(--ui-source-244a90284e5994-rgb, 124, 137, 148), var(--ui-source-244a90284e5994-alpha, 1));
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .04em;
}
.xhs-template-studio-workbench .xhs-reference-panel-compare .xhs-reference-compact-actions {
  gap: 8px;
}
.xhs-template-studio-workbench .xhs-reference-compact-actions > :is(label, .xhs-reference-layout-button) {
  width: 30px;
  height: 30px;
  min-width: 30px;
  min-height: 30px;
  border-radius: 50%;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.xhs-template-studio-workbench .xhs-reference-compact-actions > label {
  border-color: rgba(var(--ui-source-584d45c3829a95-rgb, 232, 235, 239), var(--ui-source-584d45c3829a95-alpha, 1));
  background: rgba(var(--ui-source-d89cb5294cfef4-rgb, 255, 255, 255), var(--ui-source-d89cb5294cfef4-alpha, 1));
  color: rgba(var(--ui-source-c94d2ab109e676-rgb, 38, 50, 60), var(--ui-source-c94d2ab109e676-alpha, 1));
  box-shadow: 0 2px 7px rgba(var(--ui-source-7b6b5249e9e8fc-rgb, 30, 44, 66), var(--ui-source-7b6b5249e9e8fc-alpha, 0.08));
}
.xhs-template-studio-workbench .xhs-reference-plus-mark {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
}
.xhs-template-studio-workbench .xhs-reference-compact-actions > .xhs-reference-layout-button {
  border-color: rgba(var(--ui-source-dc9265e24649f8-rgb, 224, 69, 103), var(--ui-source-dc9265e24649f8-alpha, 0.2));
  background: linear-gradient(145deg, rgba(var(--ui-source-30fae6580d5bd0-rgb, 253, 130, 152), var(--ui-source-30fae6580d5bd0-alpha, 1)), rgba(var(--ui-source-6133e6e3b776d5-rgb, 233, 70, 107), var(--ui-source-6133e6e3b776d5-alpha, 1)));
  color: rgba(var(--ui-source-ee13f688c7d66c-rgb, 255, 255, 255), var(--ui-source-ee13f688c7d66c-alpha, 1));
  box-shadow: 0 3px 9px rgba(var(--ui-source-5e2ed86d2a7ed8-rgb, 230, 67, 105), var(--ui-source-5e2ed86d2a7ed8-alpha, 0.2)), inset 0 1px rgba(var(--ui-source-1d5f7a15dc67db-rgb, 255, 255, 255), var(--ui-source-1d5f7a15dc67db-alpha, 0.28));
}
.xhs-template-studio-workbench .xhs-reference-g-mark {
  font-family: Arial, sans-serif;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
}
.xhs-template-studio-workbench .xhs-reference-compact-actions > label:not(:has(input:disabled)):hover,
.xhs-template-studio-workbench .xhs-reference-compact-actions > .xhs-reference-layout-button:not(:disabled):hover {
  transform: translateY(-1px);
  border-color: rgba(var(--ui-source-aae686cc918339-rgb, 233, 70, 107), var(--ui-source-aae686cc918339-alpha, 0.4));
  box-shadow: 0 4px 11px rgba(var(--ui-source-1e51cddacefa78-rgb, 230, 67, 105), var(--ui-source-1e51cddacefa78-alpha, 0.18));
}
.xhs-template-studio-workbench .xhs-reference-compact-actions > label:focus-within,
.xhs-template-studio-workbench .xhs-reference-compact-actions > .xhs-reference-layout-button:focus-visible {
  outline: 2px solid rgba(var(--ui-source-547f0e5046af01-rgb, 237, 63, 89), var(--ui-source-547f0e5046af01-alpha, 1));
  outline-offset: 3px;
}
.xhs-template-studio-workbench .xhs-reference-compact-actions > label:has(input:disabled),
.xhs-template-studio-workbench .xhs-reference-compact-actions > .xhs-reference-layout-button:disabled {
  opacity: .45;
  cursor: not-allowed;
  box-shadow: none;
}
.xhs-template-studio-workbench .xhs-template-canvas-layout > .xhs-page-manager {
  display: flex;
  align-items: center;
}
.xhs-template-studio-workbench .xhs-template-canvas-layout > .xhs-page-manager .xhs-page-thumbnails {
  margin: 0;
}
.xhs-template-page-context-menu {
  position: fixed;
  z-index: 10020;
  display: grid;
  gap: 3px;
  min-width: 154px;
  padding: 6px;
  border: 1px solid rgba(var(--ui-source-a4141e4b4623a3-rgb, 227, 231, 236), var(--ui-source-a4141e4b4623a3-alpha, 1));
  border-radius: 12px;
  background: rgba(var(--ui-source-ec09ff6aeb5aca-rgb, 255, 255, 255), var(--ui-source-ec09ff6aeb5aca-alpha, 1));
  color: rgba(var(--ui-source-f71b62e04bc703-rgb, 39, 49, 61), var(--ui-source-f71b62e04bc703-alpha, 1));
  box-shadow: 0 10px 30px rgba(var(--ui-source-85ba7c0938c142-rgb, 24, 37, 55), var(--ui-source-85ba7c0938c142-alpha, 0.16));
  font: 13px/1.4 "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
}
.xhs-template-page-context-menu > button {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  min-height: 34px;
  padding: 7px 10px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.xhs-template-page-context-menu > button:not(:disabled):hover,
.xhs-template-page-context-menu > button:focus-visible { outline: none; background: rgba(var(--ui-source-c0e318b7ece876-rgb, 243, 245, 248), var(--ui-source-c0e318b7ece876-alpha, 1)); }
.xhs-template-page-context-menu > button.danger { color: rgba(var(--ui-source-41810b44f26123-rgb, 220, 75, 98), var(--ui-source-41810b44f26123-alpha, 1)); }
.xhs-template-page-context-menu > button:disabled { color: rgba(var(--ui-source-79a88c7dbf4828-rgb, 161, 168, 178), var(--ui-source-79a88c7dbf4828-alpha, 1)); cursor: not-allowed; }
.xhs-template-page-context-title { padding: 5px 10px 6px; color: rgba(var(--ui-source-99a8a0f41f808b-rgb, 139, 148, 160), var(--ui-source-99a8a0f41f808b-alpha, 1)); font-size: 11px; }
.xhs-template-page-context-note { max-width: 180px; padding: 6px 10px; border-top: 1px solid rgba(var(--ui-source-9624da0f81acb0-rgb, 237, 240, 243), var(--ui-source-9624da0f81acb0-alpha, 1)); color: rgba(var(--ui-source-5679c48ca5cad3-rgb, 139, 148, 160), var(--ui-source-5679c48ca5cad3-alpha, 1)); font-size: 11px; }
body[data-theme="tech"] .xhs-template-page-context-menu { border-color: #30445b; background: #162636; color: #e7eef5; }
body[data-theme="tech"] .xhs-template-page-context-menu > button:not(:disabled):hover,
body[data-theme="tech"] .xhs-template-page-context-menu > button:focus-visible { background: #25384a; }
@media (min-width: 2200px) {
  .xhs-minimal-editor.xhs-template-studio-workbench { --xts-image-size-rail: 204px; --xts-page-rail-height: 168px; }
}
@media (max-width: 1500px) {
  .xhs-minimal-editor.xhs-template-studio-workbench { --xts-image-size-rail: 148px; --xts-page-rail-height: 112px; }
}
@media (max-width: 767px) {
  .xhs-template-studio-workbench .xhs-template-canvas-layout {
    --xts-comparison-size: min(calc((100cqw - 28px) / 2), calc((100cqh - var(--xts-image-size-rail) - 88px) * .75), 558px);
  }
  .xhs-template-studio-workbench .xhs-reference-panel-compare .xhs-reference-compact-actions { gap: 6px; }
  .xhs-template-studio-workbench .xhs-reference-compact-actions > :is(label, .xhs-reference-layout-button) { width: 28px; min-width: 28px; min-height: 28px; height: 28px; }
}
@media (prefers-reduced-motion: reduce) {
  .xhs-template-studio-workbench .xhs-reference-compact-actions > :is(label, .xhs-reference-layout-button) { transition: none; }
  .xhs-template-studio-workbench .xhs-reference-compact-actions > label:not(:has(input:disabled)):hover,
  .xhs-template-studio-workbench .xhs-reference-compact-actions > .xhs-reference-layout-button:not(:disabled):hover { transform: none; }
}

/* Three distinct editing areas: layer properties, canvas background, layer list. */
.xhs-template-studio-workbench .xhs-studio-design-tools {
  grid-template-rows: minmax(0, 60fr) auto minmax(0, 40fr);
}
.xhs-template-studio-workbench .xhs-studio-design-tools > .xhs-right-layer-middle {
  background: rgba(var(--ui-source-d89cb5294cfef4-rgb, 255, 255, 255), var(--ui-source-d89cb5294cfef4-alpha, 1));
}
.xhs-template-studio-workbench .xhs-studio-design-tools > .xhs-studio-assets-section {
  min-width: 0;
  min-height: 0;
  max-height: 180px;
  padding: 12px 14px;
  border-top: 2px solid rgba(var(--ui-source-bb84aacdb1f8f8-rgb, 217, 226, 236), var(--ui-source-bb84aacdb1f8f8-alpha, 1));
  background: rgba(var(--ui-source-66ad835c32672f-rgb, 243, 247, 251), var(--ui-source-66ad835c32672f-alpha, 1));
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-gutter: stable;
}
.xhs-template-studio-workbench .xhs-studio-background-heading {
  margin: 0 0 10px;
  color: rgba(var(--ui-source-802e76a1ce77de-rgb, 38, 50, 60), var(--ui-source-802e76a1ce77de-alpha, 1));
  font-size: 13px;
  font-weight: 600;
}
.xhs-template-studio-workbench .xhs-studio-assets-section .xhs-upload-row > :is(button, label) {
  padding: 6px 4px;
  white-space: nowrap;
}
.xhs-template-studio-workbench .xhs-studio-design-tools > .xhs-studio-secondary-tools {
  padding-top: 14px;
  border-top: 2px solid rgba(var(--ui-source-abfb59eaad5c6b-rgb, 231, 220, 225), var(--ui-source-abfb59eaad5c6b-alpha, 1));
  background: rgba(var(--ui-source-d6e45692167952-rgb, 255, 249, 251), var(--ui-source-d6e45692167952-alpha, 1));
}
body[data-theme="tech"] .xhs-template-studio-workbench .xhs-studio-design-tools > .xhs-studio-assets-section {
  border-top-color: #395469;
  background: #1d3040;
}
body[data-theme="tech"] .xhs-template-studio-workbench .xhs-studio-design-tools > .xhs-studio-secondary-tools {
  border-top-color: #4c4057;
  background: #242c3a;
}

/* V2.97 · Independent background image library; inherits workbench theme and height. */
.xhs-minimal-editor.xhs-template-studio-workbench.xhs-background-library-workspace {
  grid-template-rows: 68px minmax(0, 1fr);
}
.xhs-background-library-workspace .xhs-background-library-panel {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  min-width: 0;
  min-height: 0;
  border: 1px solid rgba(var(--ui-source-584d45c3829a95-rgb, 232, 235, 239), var(--ui-source-584d45c3829a95-alpha, 1));
  border-radius: 15px;
  background: rgba(var(--ui-source-d89cb5294cfef4-rgb, 255, 255, 255), var(--ui-source-d89cb5294cfef4-alpha, 1));
  box-shadow: 0 2px 12px rgba(var(--ui-source-1d7971db083bf1-rgb, 31, 52, 73), var(--ui-source-1d7971db083bf1-alpha, 0.02));
  overflow: hidden;
}
.xhs-background-library-workspace .xhs-background-library-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-width: 0;
  min-height: 69px;
  padding: 15px 20px;
  border-bottom: 1px solid rgba(var(--ui-source-63c218a43ac716-rgb, 232, 235, 239), var(--ui-source-63c218a43ac716-alpha, 1));
}
.xhs-background-library-workspace .xhs-background-library-toolbar > div {
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: 0;
}
.xhs-background-library-workspace .xhs-background-library-toolbar > div:last-child { flex: none; }
.xhs-background-library-workspace .xhs-background-library-toolbar :is(button, .xhs-file-button) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 36px;
  padding: 7px 13px;
  font-size: 13px;
  white-space: nowrap;
}
.xhs-background-library-workspace .xhs-background-current-template {
  min-width: 0;
  overflow: hidden;
  color: rgba(var(--ui-source-d06c7a96a6af4f-rgb, 124, 137, 148), var(--ui-source-d06c7a96a6af4f-alpha, 1));
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.xhs-background-library-workspace .xhs-background-library-toolbar .xhs-background-none {
  padding: 7px 8px;
  border-color: transparent;
  background: transparent;
  color: rgba(var(--ui-source-d06c7a96a6af4f-rgb, 124, 137, 148), var(--ui-source-d06c7a96a6af4f-alpha, 1));
  font-size: 12px;
}
.xhs-background-library-workspace .xhs-background-library-toolbar .xhs-background-none:hover:not(:disabled) {
  border-color: transparent;
  background: rgba(var(--ui-source-e182ba9c21ce7f-rgb, 247, 248, 250), var(--ui-source-e182ba9c21ce7f-alpha, 1));
}
.xhs-background-library-workspace .xhs-background-upload.xhs-file-button,
.xhs-background-preview-dialog > footer > button:not(.secondary) {
  border-color: rgba(var(--ui-source-f4a1df66fbe666-rgb, 237, 63, 89), var(--ui-source-f4a1df66fbe666-alpha, 1));
  background: rgba(var(--ui-source-402fcad36aa277-rgb, 237, 63, 89), var(--ui-source-402fcad36aa277-alpha, 1));
  color: rgba(var(--ui-source-ee13f688c7d66c-rgb, 255, 255, 255), var(--ui-source-ee13f688c7d66c-alpha, 1));
}
.xhs-background-library-workspace .xhs-background-upload.xhs-file-button:hover:not(:has(input:disabled)),
.xhs-background-preview-dialog > footer > button:not(.secondary):hover:not(:disabled) {
  border-color: rgba(var(--ui-source-f4a1df66fbe666-rgb, 237, 63, 89), var(--ui-source-f4a1df66fbe666-alpha, 1));
  background: rgba(var(--ui-source-402fcad36aa277-rgb, 237, 63, 89), var(--ui-source-402fcad36aa277-alpha, 1));
  color: rgba(var(--ui-source-ee13f688c7d66c-rgb, 255, 255, 255), var(--ui-source-ee13f688c7d66c-alpha, 1));
  filter: brightness(.96);
  transform: none;
}
.xhs-background-library-workspace .xhs-background-upload:focus-within {
  outline: 3px solid rgba(var(--ui-source-547f0e5046af01-rgb, 237, 63, 89), var(--ui-source-547f0e5046af01-alpha, 1));
  outline-offset: 3px;
}
.xhs-background-library-workspace .xhs-background-upload:has(input:disabled) {
  opacity: .5;
  cursor: not-allowed;
}
.xhs-background-library-workspace .xhs-background-library-content {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 16px;
  min-width: 0;
  min-height: 0;
  padding: 17px 20px 20px;
  overflow: hidden;
}
.xhs-background-library-workspace .xhs-background-library-content:has(> .error-box) {
  grid-template-rows: auto auto minmax(0, 1fr);
}
.xhs-background-library-workspace .xhs-background-library-caption {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-width: 0;
  color: rgba(var(--ui-source-1af8b287ff1203-rgb, 124, 137, 148), var(--ui-source-1af8b287ff1203-alpha, 1));
  font-size: 12px;
  line-height: 1.5;
}
.xhs-background-library-workspace .xhs-background-library-caption > :last-child { flex: none; }
.xhs-background-library-workspace .xhs-background-gallery {
  display: grid;
  grid-template-columns: repeat(var(--xhs-background-cols, 6), minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: 18px;
  min-width: 0;
  min-height: 0;
}
.xhs-background-library-workspace .xhs-background-card {
  position: relative;
  min-width: 0;
  min-height: 0;
  border: 1px solid rgba(var(--ui-source-584d45c3829a95-rgb, 232, 235, 239), var(--ui-source-584d45c3829a95-alpha, 1));
  border-radius: 11px;
  background: rgba(var(--ui-source-d89cb5294cfef4-rgb, 255, 255, 255), var(--ui-source-d89cb5294cfef4-alpha, 1));
  overflow: hidden;
  transition: border-color .16s ease, box-shadow .16s ease;
}
.xhs-background-library-workspace .xhs-background-card:has(.xhs-background-choose:not(:disabled)):hover {
  border-color: rgba(var(--ui-source-207fc682509082-rgb, 124, 137, 148), var(--ui-source-207fc682509082-alpha, 1));
  box-shadow: 0 5px 16px rgba(var(--ui-source-9b0f2138ebb1b2-rgb, 34, 49, 64), var(--ui-source-9b0f2138ebb1b2-alpha, 0.07));
}
.xhs-background-library-workspace .xhs-background-card.is-current,
.xhs-background-library-workspace .xhs-background-card.is-current:hover {
  border-color: rgba(var(--ui-source-218192867eec4d-rgb, 237, 63, 89), var(--ui-source-218192867eec4d-alpha, 1));
  box-shadow: 0 0 0 2px rgba(var(--ui-source-0acffa0fff61dd-rgb, 255, 241, 243), var(--ui-source-0acffa0fff61dd-alpha, 1));
}
.xhs-background-library-workspace button.xhs-background-choose {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: rgba(var(--ui-source-14c1a89af6fff7-rgb, 255, 255, 255), var(--ui-source-14c1a89af6fff7-alpha, 1));
  color: rgba(var(--ui-source-58c0af45971572-rgb, 38, 50, 60), var(--ui-source-58c0af45971572-alpha, 1));
  box-shadow: none;
  text-align: left;
  transform: none;
}
.xhs-background-library-workspace button.xhs-background-choose:hover:not(:disabled) {
  background: rgba(var(--ui-source-7ae32e83efa0e5-rgb, 255, 255, 255), var(--ui-source-7ae32e83efa0e5-alpha, 1));
  color: rgba(var(--ui-source-c7d84d4795a355-rgb, 38, 50, 60), var(--ui-source-c7d84d4795a355-alpha, 1));
  box-shadow: none;
  transform: none;
}
.xhs-background-library-workspace button.xhs-background-choose:focus-visible { outline-offset: -3px; }
.xhs-background-library-workspace button.xhs-background-choose:disabled { opacity: 1; cursor: default; }
.xhs-background-library-workspace .xhs-background-image-wrap {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  padding: 11px;
  border-bottom: 1px solid rgba(var(--ui-source-63c218a43ac716-rgb, 232, 235, 239), var(--ui-source-63c218a43ac716-alpha, 1));
  background: rgba(var(--ui-source-e182ba9c21ce7f-rgb, 247, 248, 250), var(--ui-source-e182ba9c21ce7f-alpha, 1));
  overflow: hidden;
}
.xhs-background-library-workspace .xhs-background-image,
.xhs-background-preview-stage > img {
  display: block;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  object-fit: contain;
}
.xhs-background-library-workspace .xhs-background-image-state {
  position: absolute;
  inset: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  background: rgba(var(--ui-source-e182ba9c21ce7f-rgb, 247, 248, 250), var(--ui-source-e182ba9c21ce7f-alpha, 1));
  color: rgba(var(--ui-source-d06c7a96a6af4f-rgb, 124, 137, 148), var(--ui-source-d06c7a96a6af4f-alpha, 1));
  font-size: 12px;
  text-align: center;
  pointer-events: none;
}
.xhs-background-library-workspace .xhs-background-card-name {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
  min-height: 43px;
  padding: 9px 12px;
  overflow: hidden;
  color: rgba(var(--ui-source-802f84a3d366ee-rgb, 38, 50, 60), var(--ui-source-802f84a3d366ee-alpha, 1));
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
}
.xhs-background-library-workspace .xhs-background-name-text {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.xhs-background-library-workspace .xhs-background-current-tag {
  flex: none;
  color: rgba(var(--ui-source-7931735fe43963-rgb, 237, 63, 89), var(--ui-source-7931735fe43963-alpha, 1));
  font-size: 11px;
  font-weight: 400;
}
.xhs-background-library-workspace .xhs-background-current-pin {
  position: absolute;
  z-index: 1;
  top: 12px;
  left: 12px;
  padding: 3px 7px;
  border-radius: 5px;
  background: rgba(var(--ui-source-402fcad36aa277-rgb, 237, 63, 89), var(--ui-source-402fcad36aa277-alpha, 1));
  color: rgba(var(--ui-source-ee13f688c7d66c-rgb, 255, 255, 255), var(--ui-source-ee13f688c7d66c-alpha, 1));
  font-size: 10px;
  line-height: 1.5;
  pointer-events: none;
}
.xhs-background-library-workspace button.xhs-background-preview-button {
  position: absolute;
  z-index: 2;
  top: 10px;
  right: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 30px;
  padding: 5px 8px;
  border: 1px solid rgba(var(--ui-source-daccf4aa9f8f54-rgb, 232, 235, 239), var(--ui-source-daccf4aa9f8f54-alpha, 1));
  border-radius: 7px;
  background: rgba(var(--ui-source-14c1a89af6fff7-rgb, 255, 255, 255), var(--ui-source-14c1a89af6fff7-alpha, 1));
  color: rgba(var(--ui-source-706274822d1bfb-rgb, 124, 137, 148), var(--ui-source-706274822d1bfb-alpha, 1));
  box-shadow: 0 2px 7px rgba(var(--ui-source-dc27e9b1254e4c-rgb, 21, 37, 55), var(--ui-source-dc27e9b1254e4c-alpha, 0.06));
  font-size: 11px;
  line-height: 1.4;
  transform: none;
}
.xhs-background-library-workspace button.xhs-background-preview-button:hover:not(:disabled) {
  background: rgba(var(--ui-source-7ae32e83efa0e5-rgb, 255, 255, 255), var(--ui-source-7ae32e83efa0e5-alpha, 1));
  color: rgba(var(--ui-source-54cd8763b0991b-rgb, 237, 63, 89), var(--ui-source-54cd8763b0991b-alpha, 1));
  box-shadow: 0 2px 7px rgba(var(--ui-source-dc27e9b1254e4c-rgb, 21, 37, 55), var(--ui-source-dc27e9b1254e4c-alpha, 0.06));
  transform: none;
}
.xhs-background-library-workspace .xhs-background-preview-button svg { width: 13px; height: 13px; }
.xhs-background-library-workspace .xhs-background-library-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-width: 0;
  min-height: 52px;
  padding: 12px 20px;
  border-top: 1px solid rgba(var(--ui-source-63c218a43ac716-rgb, 232, 235, 239), var(--ui-source-63c218a43ac716-alpha, 1));
  color: rgba(var(--ui-source-d06c7a96a6af4f-rgb, 124, 137, 148), var(--ui-source-d06c7a96a6af4f-alpha, 1));
  font-size: 12px;
}
.xhs-background-library-workspace .xhs-background-current-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.xhs-background-library-workspace .xhs-background-pagination {
  display: flex;
  flex: none;
  align-items: center;
  gap: 12px;
}
.xhs-background-library-workspace .xhs-background-pagination > span { white-space: nowrap; }
.xhs-background-library-workspace .xhs-background-pagination > button {
  min-height: 30px;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 12px;
  white-space: nowrap;
}
.xhs-background-library-workspace .xhs-background-empty {
  display: flex;
  grid-column: 1 / -1;
  grid-row: 1 / -1;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-width: 0;
  min-height: 0;
  padding: 24px;
  color: rgba(var(--ui-source-d06c7a96a6af4f-rgb, 124, 137, 148), var(--ui-source-d06c7a96a6af4f-alpha, 1));
  font-size: 13px;
  text-align: center;
}
.xhs-template-studio-workbench button.xhs-background-library-entry {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  max-width: 100%;
  min-height: 36px;
  margin: 0;
  padding: 7px 10px;
  overflow: hidden;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.xhs-template-studio-workbench .xhs-background-library-entry > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.xhs-template-studio-workbench .xhs-background-library-entry > svg { width: 15px; height: 15px; color: rgba(var(--ui-source-d06c7a96a6af4f-rgb, 124, 137, 148), var(--ui-source-d06c7a96a6af4f-alpha, 1)); }
.xhs-background-preview-backdrop {
  --xts-ink: #26323c;
  --xts-muted: #7c8994;
  --xts-panel: #fff;
  --xts-line: #e8ebef;
  --xts-soft: #f7f8fa;
  --xts-red: #ed3f59;
  --xts-red-soft: #fff1f3;
  position: fixed;
  z-index: 10090;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(var(--ui-source-9da6e4080deef4-rgb, 12, 21, 35), var(--ui-source-9da6e4080deef4-alpha, 0.48));
  backdrop-filter: blur(4px);
  color: rgba(var(--ui-source-802f84a3d366ee-rgb, 38, 50, 60), var(--ui-source-802f84a3d366ee-alpha, 1));
  font-family: "PingFang SC", "Microsoft YaHei", -apple-system, BlinkMacSystemFont, Arial, sans-serif;
  font-size: 14px;
  line-height: 1.4;
  letter-spacing: normal;
}
body[data-theme="tech"] .main:has(.xhs-background-preview-backdrop) { z-index: 1004; }
body[data-theme="tech"] .xhs-background-preview-backdrop {
  --xts-ink: #e3eaf0;
  --xts-muted: #a3b2c0;
  --xts-panel: #172635;
  --xts-line: #2d3d4c;
  --xts-soft: #213140;
  --xts-red: #fa7287;
  --xts-red-soft: #382b3b;
  color-scheme: dark;
}
.xhs-background-preview-backdrop[hidden],
.xhs-background-preview-backdrop [hidden] { display: none !important; }
.xhs-background-preview-backdrop :is(button, button.secondary) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-width: 0;
  min-height: 36px;
  padding: 7px 13px;
  border: 1px solid rgba(var(--ui-source-daccf4aa9f8f54-rgb, 232, 235, 239), var(--ui-source-daccf4aa9f8f54-alpha, 1));
  border-radius: 8px;
  background: rgba(var(--ui-source-14c1a89af6fff7-rgb, 255, 255, 255), var(--ui-source-14c1a89af6fff7-alpha, 1));
  color: rgba(var(--ui-source-58c0af45971572-rgb, 38, 50, 60), var(--ui-source-58c0af45971572-alpha, 1));
  box-shadow: none;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: normal;
  cursor: pointer;
  filter: none;
  transform: none;
}
.xhs-background-preview-backdrop button:hover:not(:disabled) {
  background: rgba(var(--ui-source-a09d4f2d340fb6-rgb, 247, 248, 250), var(--ui-source-a09d4f2d340fb6-alpha, 1));
  color: rgba(var(--ui-source-c7d84d4795a355-rgb, 38, 50, 60), var(--ui-source-c7d84d4795a355-alpha, 1));
  box-shadow: none;
  filter: none;
  transform: none;
}
.xhs-background-preview-backdrop button:focus-visible { outline: 3px solid rgba(var(--ui-source-9e3ccd9de4c245-rgb, 237, 63, 89), var(--ui-source-9e3ccd9de4c245-alpha, 1)); outline-offset: 3px; }
.xhs-background-preview-backdrop button:disabled { opacity: .5; cursor: not-allowed; }
.xhs-background-preview-dialog {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 16px;
  width: min(650px, calc(100vw - 40px));
  height: min(780px, calc(100dvh - 40px));
  min-width: 0;
  min-height: 0;
  margin: 0;
  padding: 20px;
  border: 1px solid rgba(var(--ui-source-d27e3ff8c84352-rgb, 232, 235, 239), var(--ui-source-d27e3ff8c84352-alpha, 1));
  border-radius: 15px;
  background: rgba(var(--ui-source-80e11aad25b8ac-rgb, 255, 255, 255), var(--ui-source-80e11aad25b8ac-alpha, 1));
  color: rgba(var(--ui-source-802f84a3d366ee-rgb, 38, 50, 60), var(--ui-source-802f84a3d366ee-alpha, 1));
  box-shadow: 0 20px 70px rgba(var(--ui-source-98523ed3b7b5c6-rgb, 17, 29, 58), var(--ui-source-98523ed3b7b5c6-alpha, 0.28));
  overflow: hidden;
  outline: none;
}
.xhs-background-preview-dialog > header,
.xhs-background-preview-dialog > footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  min-width: 0;
}
.xhs-background-preview-dialog > header > h2 {
  margin: 0;
  color: rgba(var(--ui-source-802e76a1ce77de-rgb, 38, 50, 60), var(--ui-source-802e76a1ce77de-alpha, 1));
  font-size: 18px;
  font-weight: 500;
}
.xhs-background-preview-dialog :is(header, footer) > button {
  flex: none;
  min-height: 36px;
  padding: 7px 13px;
  white-space: nowrap;
}
.xhs-background-preview-backdrop .xhs-background-preview-dialog > footer > button:not(.secondary),
.xhs-background-preview-backdrop .xhs-background-preview-dialog > footer > button:not(.secondary):hover:not(:disabled) {
  border-color: rgba(var(--ui-source-9e3ccd9de4c245-rgb, 237, 63, 89), var(--ui-source-9e3ccd9de4c245-alpha, 1));
  background: rgba(var(--ui-source-f681efe83172ac-rgb, 237, 63, 89), var(--ui-source-f681efe83172ac-alpha, 1));
  color: rgba(var(--ui-source-5db510f491f945-rgb, 255, 255, 255), var(--ui-source-5db510f491f945-alpha, 1));
}
.xhs-background-preview-dialog > footer > span {
  min-width: 0;
  overflow: hidden;
  color: rgba(var(--ui-source-d06c7a96a6af4f-rgb, 124, 137, 148), var(--ui-source-d06c7a96a6af4f-alpha, 1));
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.xhs-background-preview-stage {
  position: relative;
  min-width: 0;
  min-height: 0;
  padding: 12px;
  border-radius: 10px;
  background: rgba(var(--ui-source-8d901a05ab37c4-rgb, 247, 248, 250), var(--ui-source-8d901a05ab37c4-alpha, 1));
  overflow: hidden;
}
.xhs-background-preview-stage > .xhs-background-image-state { inset: 12px; }
.xhs-background-preview-backdrop .xhs-background-image-state {
  position: absolute;
  inset: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  background: rgba(var(--ui-source-e182ba9c21ce7f-rgb, 247, 248, 250), var(--ui-source-e182ba9c21ce7f-alpha, 1));
  color: rgba(var(--ui-source-d06c7a96a6af4f-rgb, 124, 137, 148), var(--ui-source-d06c7a96a6af4f-alpha, 1));
  font-size: 12px;
  text-align: center;
  pointer-events: none;
}
@media (min-width: 2200px) {
  .xhs-minimal-editor.xhs-template-studio-workbench.xhs-background-library-workspace { grid-template-rows: 80px minmax(0, 1fr); }
}
@media (max-width: 1500px) {
  .xhs-minimal-editor.xhs-template-studio-workbench.xhs-background-library-workspace { grid-template-rows: 56px minmax(0, 1fr); }
  .xhs-background-library-workspace .xhs-background-library-toolbar { min-height: 58px; padding: 11px 16px; }
  .xhs-background-library-workspace .xhs-background-library-content { gap: 12px; padding: 13px 16px 16px; }
  .xhs-background-library-workspace .xhs-background-gallery { gap: 14px; }
  .xhs-background-library-workspace .xhs-background-image-wrap { padding: 9px; }
  .xhs-background-library-workspace .xhs-background-image-state { inset: 9px; }
  .xhs-background-library-workspace .xhs-background-card-name { min-height: 37px; padding: 7px 10px; font-size: 12px; }
  .xhs-background-library-workspace .xhs-background-library-footer { min-height: 46px; padding: 9px 16px; }
}
@container xts-workbench (max-width: 950px) {
  .xhs-background-library-workspace .xhs-background-current-template { max-width: 200px; font-size: 11px; }
  .xhs-background-library-workspace .xhs-background-library-toolbar,
  .xhs-background-library-workspace .xhs-background-library-toolbar > div { gap: 10px; }
  .xhs-background-library-workspace .xhs-background-gallery { gap: 11px; }
  .xhs-background-library-workspace .xhs-background-library-caption { font-size: 11px; }
}
@container xts-workbench (max-width: 620px) {
  .xhs-background-library-workspace .xhs-background-library-toolbar { flex-wrap: wrap; gap: 10px; padding: 10px; }
  .xhs-background-library-workspace .xhs-background-library-toolbar > div { gap: 8px; }
  .xhs-background-library-workspace .xhs-background-current-template { max-width: 150px; }
  .xhs-background-library-workspace .xhs-background-library-toolbar :is(button, .xhs-file-button) { min-height: 39px; padding: 7px 9px; font-size: 12px; }
  .xhs-background-library-workspace .xhs-background-library-content { gap: 10px; padding: 12px 10px; }
  .xhs-background-library-workspace .xhs-background-library-caption { align-items: flex-start; flex-direction: column; gap: 5px; font-size: 10px; }
  .xhs-background-library-workspace .xhs-background-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .xhs-background-library-workspace .xhs-background-image-wrap { padding: 6px; }
  .xhs-background-library-workspace .xhs-background-image-state { inset: 6px; font-size: 11px; }
  .xhs-background-library-workspace .xhs-background-card-name { min-height: 37px; padding: 7px 8px; font-size: 11px; }
  .xhs-background-library-workspace .xhs-background-current-tag { display: none; }
  .xhs-background-library-workspace .xhs-background-current-pin { top: 8px; left: 7px; padding: 3px 5px; }
  .xhs-background-library-workspace button.xhs-background-preview-button { top: 6px; right: 6px; min-height: 35px; padding: 4px 6px; font-size: 10px; }
  .xhs-background-library-workspace .xhs-background-preview-button > svg { display: none; }
  .xhs-background-library-workspace .xhs-background-library-footer { align-items: flex-start; flex-direction: column; gap: 8px; padding: 10px; font-size: 11px; }
  .xhs-background-library-workspace .xhs-background-pagination { align-self: flex-end; gap: 8px; }
  .xhs-background-library-workspace .xhs-background-pagination > button { min-height: 36px; padding: 5px 9px; }
}
@media (max-width: 600px) {
  .xhs-background-preview-backdrop { padding: 8px; }
  .xhs-background-preview-dialog { gap: 12px; width: calc(100vw - 16px); height: min(700px, calc(100dvh - 16px)); padding: 13px; }
  .xhs-background-preview-stage { padding: 8px; }
  .xhs-background-preview-stage > .xhs-background-image-state { inset: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .xhs-background-library-workspace .xhs-background-card { transition: none; }
}

/* V298: background modes stay inside the existing AI background dialog. */
.xhs-ai-background-style-choices {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 18px;
}
.xhs-ai-background-style-choices > button {
  display: grid;
  gap: 4px;
  min-width: 0;
  min-height: 62px;
  padding: 10px 14px;
  border: 1px solid rgba(var(--ui-source-e55e37d1737b7e-rgb, 216, 226, 231), var(--ui-source-e55e37d1737b7e-alpha, 1));
  border-radius: 12px;
  background: rgba(var(--ui-source-484d256db23baa-rgb, 248, 250, 251), var(--ui-source-484d256db23baa-alpha, 1));
  color: rgba(var(--ui-source-e3d47ecb2e0c96-rgb, 38, 55, 77), var(--ui-source-e3d47ecb2e0c96-alpha, 1));
  text-align: left;
}
.xhs-ai-background-style-choices > button strong { font-size: 14px; }
.xhs-ai-background-style-choices > button span { color: rgba(var(--ui-source-9c73afbdeb3793-rgb, 104, 119, 138), var(--ui-source-9c73afbdeb3793-alpha, 1)); font-size: 12px; font-weight: 400; }
.xhs-ai-background-style-choices > button.is-active {
  border-color: rgba(var(--ui-source-aea0fa02366d8f-rgb, 52, 134, 120), var(--ui-source-aea0fa02366d8f-alpha, 1));
  background: rgba(var(--ui-source-4ddb17d28598a6-rgb, 237, 247, 243), var(--ui-source-4ddb17d28598a6-alpha, 1));
  color: rgba(var(--ui-source-951d38f5bf1c2f-rgb, 35, 98, 87), var(--ui-source-951d38f5bf1c2f-alpha, 1));
  box-shadow: inset 0 0 0 1px rgba(var(--ui-source-7e02e51fbbbcfb-rgb, 52, 134, 120), var(--ui-source-7e02e51fbbbcfb-alpha, 1));
}
.xhs-ai-background-style-choices > button:disabled { cursor: wait; opacity: .65; }
.xhs-ai-background-start {
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  gap: 18px;
  min-height: 150px;
  padding: 20px;
  border: 1px solid rgba(var(--ui-source-fd48bf1a3265fa-rgb, 227, 233, 238), var(--ui-source-fd48bf1a3265fa-alpha, 1));
  border-radius: 12px;
  background: rgba(var(--ui-source-908cc653a517d8-rgb, 248, 250, 251), var(--ui-source-908cc653a517d8-alpha, 1));
}
.xhs-ai-background-start > p { margin: 0; color: rgba(var(--ui-source-9c73afbdeb3793-rgb, 104, 119, 138), var(--ui-source-9c73afbdeb3793-alpha, 1)); font-size: 13px; line-height: 1.6; text-align: center; }
.xhs-ai-background-start > button { min-width: 150px; }
.xhs-ai-background-dialog .xhs-ai-background-preview-frame {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
  height: min(48dvh, 480px);
}
.xhs-ai-background-dialog .xhs-ai-background-preview-frame img { max-height: 100%; }
body[data-theme="tech"] .xhs-ai-background-style-choices > button,
body[data-theme="tech"] .xhs-ai-background-start {
  border-color: #30445e;
  background: #142237;
  color: #e5eef9;
}
body[data-theme="tech"] .xhs-ai-background-style-choices > button.is-active {
  border-color: #62c7b7;
  background: #193a3c;
  color: #bcf1e6;
  box-shadow: inset 0 0 0 1px #62c7b7;
}
body[data-theme="tech"] .xhs-ai-background-style-choices > button span,
body[data-theme="tech"] .xhs-ai-background-start > p { color: #a5b6cd; }
@media (max-width: 600px) {
  .xhs-ai-background-style-choices { gap: 8px; margin-top: 14px; }
  .xhs-ai-background-style-choices > button { padding: 9px 10px; }
  .xhs-ai-background-style-choices > button span { font-size: 11px; }
  .xhs-ai-background-start { padding: 16px; }
}

/* V299: three compact choices; keep mode controls inside the AI dialog. */
.xhs-ai-background-style-choices { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.xhs-ai-background-style-choices > button span { line-height: 1.45; }
@media (max-width: 600px) {
  .xhs-ai-background-style-choices { gap: 6px; }
  .xhs-ai-background-style-choices > button { min-height: 74px; padding: 9px 7px; }
  .xhs-ai-background-style-choices > button span { font-size: 10px; }
}