.inspiration-studio-open { overflow: hidden; }
.inspiration-card-backdrop {
  z-index: 1400;
  padding: 18px;
  background: rgba(35, 30, 25, .58);
  backdrop-filter: blur(8px);
}
.inspiration-studio {
  width: min(1480px, 97vw);
  height: min(900px, 95vh);
  min-height: 620px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid #d7cbbd;
  border-radius: 18px;
  background: #f8f5ee;
  box-shadow: 0 30px 90px rgba(34, 27, 20, .28);
  color: #2c2925;
  outline: none;
}
.inspiration-studio-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  padding: 20px 24px 18px;
  border-bottom: 1px solid #ddd3c6;
  background: rgba(255, 253, 248, .86);
}
.inspiration-studio-head h2 {
  margin: 3px 0 0;
  font-family: "Songti SC", "STSong", serif;
  font-size: 23px;
  font-weight: 650;
  letter-spacing: .02em;
}
.inspiration-studio-head p {
  margin: 5px 0 0;
  color: #7c7268;
  font-size: 12px;
}
.inspiration-studio-eyebrow {
  color: #8b3e32;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.inspiration-studio-close { margin-top: 2px; }
.inspiration-studio-body {
  min-height: 0;
  flex: 1;
  display: grid;
  grid-template-columns: 230px minmax(420px, 1fr) 310px;
}
.inspiration-template-panel,
.inspiration-editor-panel {
  min-height: 0;
  overflow: auto;
  padding: 20px;
  background: #fcfaf5;
  scrollbar-width: thin;
}
.inspiration-template-panel { border-right: 1px solid #ded5c9; }
.inspiration-editor-panel { border-left: 1px solid #ded5c9; }
.inspiration-panel-title {
  margin-bottom: 16px;
  color: #6d635a;
  font-size: 12px;
  font-weight: 750;
  letter-spacing: .08em;
}
.inspiration-template-list { display: flex; flex-direction: column; gap: 18px; }
.inspiration-template-group h3 {
  margin: 0 0 8px;
  color: #95897c;
  font-size: 10px;
  font-weight: 750;
  letter-spacing: .12em;
}
.inspiration-template-option {
  position: relative;
  width: 100%;
  display: block;
  margin: 0 0 7px;
  padding: 12px 30px 12px 14px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  color: #39342f;
  text-align: left;
  cursor: pointer;
  transition: border-color .18s ease, background .18s ease, transform .18s ease;
}
.inspiration-template-option::after {
  content: "";
  position: absolute;
  right: 12px;
  top: 14px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 1px solid rgba(99, 80, 64, .28);
  background: #e7ddd0;
  box-shadow: 0 0 0 4px rgba(231, 221, 208, .4);
}
.inspiration-template-option[data-inspiration-template="scholar-manuscript"]::after { background: #8a4f35; }
.inspiration-template-option[data-inspiration-template="teacher-classroom-note"]::after { background: #d5a72e; }
.inspiration-template-option[data-inspiration-template="business-decision-note"]::after { background: #214b40; }
.inspiration-template-option[data-inspiration-template="business-mac-gallery"]::after { background: #aeb0ae; }
.inspiration-template-option[data-inspiration-template="business-huawei-margin"]::after { background: #596061; }
.inspiration-template-option[data-inspiration-template="scholar-archive-folio"]::after { background: #7b3030; }
.inspiration-template-option[data-inspiration-template="teacher-window-slip"]::after { background: #7398ae; }
.inspiration-template-option[data-inspiration-template="teacher-secondary-board"]::after { background: #3d6054; }
.inspiration-template-option:hover { background: #f3eee5; transform: translateX(2px); }
.inspiration-template-option.active {
  border-color: #b7987c;
  background: #eee6da;
  box-shadow: inset 3px 0 0 #883b31;
}
.inspiration-template-option:focus-visible {
  outline: 3px solid rgba(136, 59, 49, .2);
  outline-offset: 2px;
}
.inspiration-template-option strong { display: block; font-size: 13px; }
.inspiration-template-option span {
  display: block;
  margin-top: 4px;
  color: #81776d;
  font-size: 10px;
  line-height: 1.5;
}
.inspiration-preview-column {
  position: relative;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: 18px 22px 14px;
  background:
    radial-gradient(circle at 16% 6%, rgba(255, 255, 255, .9), transparent 32%),
    linear-gradient(135deg, #eee8de, #d8cdbf);
}
.inspiration-preview-column::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    repeating-linear-gradient(90deg, rgba(110, 91, 72, .018) 0 1px, transparent 1px 5px),
    repeating-linear-gradient(0deg, rgba(110, 91, 72, .014) 0 1px, transparent 1px 7px);
}
.inspiration-preview-toolbar {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 12px;
}
.inspiration-preview-toolbar strong { display: block; font-size: 13px; }
.inspiration-preview-toolbar span { display: block; margin-top: 2px; color: #887e74; font-size: 10px; }
.inspiration-preview-paging { display: flex; gap: 6px; }
.inspiration-preview-paging button {
  width: 34px;
  height: 32px;
  border: 1px solid #c7b9aa;
  border-radius: 999px;
  background: rgba(255, 253, 248, .74);
  color: #4c443d;
  cursor: pointer;
}
.inspiration-preview-paging button:hover { background: #fffdf8; }
.inspiration-preview-paging button:focus-visible { outline: 3px solid rgba(136, 59, 49, .2); outline-offset: 2px; }
.inspiration-preview-frame {
  --inspiration-ratio: 3 / 4;
  position: relative;
  z-index: 1;
  min-height: 0;
  flex: 1;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid rgba(112, 96, 80, .2);
  border-radius: 14px;
  background:
    radial-gradient(ellipse at 50% 88%, rgba(80, 59, 40, .12), transparent 58%),
    rgba(219, 210, 198, .7);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .62), 0 18px 50px rgba(61, 46, 32, .08);
  outline: none;
}
.inspiration-preview-frame:focus-visible { box-shadow: 0 0 0 3px rgba(136, 59, 49, .2), inset 0 1px 0 rgba(255, 255, 255, .55); }
.inspiration-preview-frame[data-template="teacher-classroom-note"] {
  background:
    radial-gradient(ellipse at 50% 88%, rgba(76, 65, 50, .13), transparent 58%),
    #d4cdc1;
}
.inspiration-preview-frame[data-template="teacher-window-slip"] {
  background:
    radial-gradient(circle at 15% 7%, rgba(255, 255, 255, .72), transparent 34%),
    #d5cec2;
}
.inspiration-preview-frame[data-template="teacher-secondary-board"] {
  background:
    radial-gradient(ellipse at 50% 88%, rgba(31, 55, 47, .2), transparent 62%),
    #45665b;
}
.inspiration-preview-frame[data-template="scholar-archive-folio"] {
  background:
    radial-gradient(circle at 15% 7%, rgba(255, 245, 221, .22), transparent 34%),
    linear-gradient(145deg, #77543d, #3f281b);
}
.inspiration-preview-frame[data-template="business-decision-note"] {
  background:
    radial-gradient(ellipse at 50% 88%, rgba(30, 57, 49, .15), transparent 58%),
    #d8d2c8;
}
.inspiration-preview-frame[data-template="business-mac-gallery"],
.inspiration-preview-frame[data-template="business-huawei-margin"] {
  background:
    linear-gradient(180deg, #e8e2d9 0 69%, #71513a 69% 100%);
}
.inspiration-card-preview {
  width: 100%;
  height: 100%;
  min-height: 280px;
  display: grid;
  place-items: center;
  padding: 14px;
  color: #756b61;
}
.inspiration-card-preview svg {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 18px 26px rgba(60, 45, 31, .14));
  animation: inspiration-card-arrive .48s cubic-bezier(.2, .78, .2, 1) both;
}
.inspiration-preview-loading {
  padding: 10px 16px;
  border-radius: 999px;
  background: rgba(255, 252, 246, .68);
  box-shadow: 0 8px 24px rgba(75, 56, 38, .07);
  font-size: 12px;
}
.inspiration-preview-retry {
  border: 1px solid #bfae9c;
  border-radius: 999px;
  background: #fffaf2;
  padding: 10px 16px;
  color: #6b4b3d;
  cursor: pointer;
}
.inspiration-preview-caption { margin-top: 9px; color: #82776d; font-size: 10px; text-align: center; }
.inspiration-editor-panel { display: flex; flex-direction: column; gap: 14px; }
.inspiration-field { position: relative; display: block; }
.inspiration-field > span {
  display: block;
  margin-bottom: 7px;
  color: #4a433d;
  font-size: 12px;
  font-weight: 700;
}
.inspiration-field textarea,
.inspiration-field input {
  width: 100%;
  border: 1px solid #d3c7b9;
  border-radius: 10px;
  background: #fffdf8;
  color: #332f2b;
  font: inherit;
  font-size: 13px;
  line-height: 1.7;
  outline: none;
}
.inspiration-field textarea { resize: vertical; min-height: 86px; padding: 10px 11px 24px; }
.inspiration-field input { min-height: 42px; padding: 8px 11px; }
.inspiration-field textarea:focus,
.inspiration-field input:focus { border-color: #9a6a56; box-shadow: 0 0 0 3px rgba(143, 74, 55, .11); }
.inspiration-field small {
  position: absolute;
  right: 9px;
  bottom: 7px;
  color: #9b9187;
  font-size: 9px;
}
.inspiration-more-toggle {
  align-self: flex-start;
  border: 0;
  background: transparent;
  color: #76594a;
  padding: 0;
  font-size: 11px;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.inspiration-more-panel {
  padding: 12px;
  border: 1px solid #ded4c7;
  border-radius: 10px;
  background: #f5f0e8;
}
.inspiration-full-button { width: 100%; margin-top: 10px; }
.inspiration-field-note { margin: 0; color: #80766d; font-size: 11px; line-height: 1.6; }
.inspiration-primary-actions { display: grid; grid-template-columns: .8fr 1.2fr; gap: 8px; margin-top: auto; }
.inspiration-primary-actions button { min-height: 42px; }
.inspiration-primary-actions button:focus-visible,
.inspiration-share-result button:focus-visible,
.inspiration-share-result a:focus-visible { outline: 3px solid rgba(136, 59, 49, .2); outline-offset: 2px; }
.inspiration-share-result {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 11px;
  border: 1px solid #c9d9cc;
  border-radius: 9px;
  background: #f1f7f2;
  font-size: 11px;
}
.inspiration-share-result a { color: #315f4c; font-weight: 700; }
.inspiration-share-result button { border: 0; background: transparent; color: #9b4437; cursor: pointer; font-size: 11px; }
.inspiration-card-hint {
  min-height: 18px;
  color: #6e665e;
  font-size: 11px;
  line-height: 1.55;
}
.inspiration-card-hint.error { color: #a43d32; }
.inspiration-copy-helper { position: fixed; left: -9999px; top: 0; }
.inspiration-card-backdrop[data-status="rendering"] .inspiration-card-preview { opacity: .68; }

@keyframes inspiration-card-arrive {
  from { opacity: 0; transform: translateY(8px) scale(.992); }
  to { opacity: 1; transform: none; }
}

@media (max-width: 1120px) {
  .inspiration-studio-body { grid-template-columns: 190px minmax(360px, 1fr) 280px; }
  .inspiration-template-panel, .inspiration-editor-panel { padding: 16px; }
  .inspiration-preview-column { padding-inline: 16px; }
}

@media (max-width: 900px) {
  .inspiration-card-backdrop { padding: 0; }
  .inspiration-studio { width: 100vw; height: 100dvh; min-height: 0; border: 0; border-radius: 0; }
  .inspiration-studio-head { padding: 15px 16px 13px; }
  .inspiration-studio-head h2 { font-size: 19px; }
  .inspiration-studio-body { display: block; overflow: auto; }
  .inspiration-template-panel, .inspiration-editor-panel { overflow: visible; border: 0; }
  .inspiration-template-panel { border-bottom: 1px solid #ded5c9; }
  .inspiration-panel-title { margin-bottom: 10px; }
  .inspiration-template-list { flex-direction: row; gap: 10px; overflow-x: auto; padding-bottom: 4px; scroll-snap-type: x proximity; }
  .inspiration-template-group { display: flex; gap: 7px; flex: 0 0 auto; }
  .inspiration-template-group h3 { writing-mode: vertical-rl; margin: 8px 2px 0 0; }
  .inspiration-template-option { width: 170px; margin: 0; scroll-snap-align: start; }
  .inspiration-preview-column { min-height: 520px; }
  .inspiration-preview-frame { min-height: 430px; }
  .inspiration-editor-panel { border-top: 1px solid #ded5c9; }
  .inspiration-primary-actions { margin-top: 4px; }
}

@media (max-width: 560px) {
  .inspiration-studio-head p { display: none; }
  .inspiration-studio-head h2 { font-size: 17px; }
  .inspiration-preview-column { min-height: 440px; padding: 14px 10px 12px; }
  .inspiration-preview-frame { min-height: 350px; }
  .inspiration-card-preview { padding: 7px; }
  .inspiration-editor-panel { padding: 15px; }
  .inspiration-primary-actions { grid-template-columns: 1fr; }
  .inspiration-primary-actions button { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .inspiration-template-option,
  .inspiration-card-preview,
  .inspiration-preview-paging button { transition: none !important; }
  .inspiration-card-preview svg { animation: none !important; }
}