/* 提示词沿用纸面面板；预览与编辑并列，窄屏保持自然阅读顺序。 */
.prompt-workspace { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 28px; align-items: start; }
.prompt-source { margin-bottom: 24px; }
.prompt-workspace .prompt-input { min-height: 150px; font-size: 14px; }
.prompt-workspace .prompt-common { min-height: 320px; }
.prompt-stage, .prompt-policy { border-top: 1px solid var(--line); padding-top: 16px; }
.prompt-stage summary, .prompt-policy summary { cursor: pointer; font-size: 14px; padding: 8px 0; }
.prompt-stage summary small { display: block; margin-left: 18px; }
.prompt-stage .field { margin-top: 12px; }
.prompt-policy { margin-top: 24px; }
.prompt-preview { display: grid; gap: 16px; }
.prompt-preview pre, .prompt-policy pre { white-space: pre-wrap; overflow-wrap: anywhere; font: inherit; font-size: 13px; line-height: 1.85; margin: 0; }
.prompt-preview pre { max-height: 780px; overflow: auto; background: var(--surface); border-radius: 9px; padding: 20px; }
.prompt-policy pre { margin-top: 16px; }
@media (max-width: 1000px) { .prompt-workspace { grid-template-columns: minmax(0, 1fr); } }

/* 成品舞台的漫反射底色、厚度与投影承担立体感，不把 CSS 效果写入交付图片。 */
.delivery-workspace { grid-template-columns: minmax(0, 1fr) 330px; gap: 32px; }
.preview-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
.preview-toolbar > .button { min-height: 37px; font-size: 12px; padding: 8px 14px; }
.view-switch { display: inline-flex; padding: 4px; background: var(--surface); border-radius: 999px; }
.view-switch .button { border: 0; color: var(--muted); min-height: 32px; padding: 7px 14px; font-size: 12px; background: transparent; box-shadow: none; }
.view-switch .button[aria-pressed="true"] { background: var(--paper); color: var(--ink); box-shadow: 0 1px 4px rgb(48 48 52 / 9%); }
.view-switch .button:hover { transform: none; }
.canvas { padding: 58px 40px 70px; min-height: 420px; display: grid; place-items: center; border-radius: 20px; background: radial-gradient(ellipse at 45% 32%, #fefefe 0, #f5f5f7 65%, #ededf0 100%); perspective: 1800px; overflow: hidden; }
.book { width: 100%; position: relative; margin: 0; transform: rotateX(18deg) rotateY(-13deg) rotateZ(-2deg); transform-origin: center 72%; transition: transform 420ms var(--ease); background: var(--paper); border-bottom: 7px solid #d9d9de; border-radius: 2px; box-shadow: 0 4px 0 #f4f4f6, 0 9px 0 -2px #ceced3, 0 14px 0 -4px #e7e7eb, 0 19px 20px -12px rgb(48 48 52 / 25%), 0 40px 45px -22px rgb(48 48 52 / 30%); }
.book::after { content: ""; position: absolute; inset: 0; border: 1px solid rgb(48 48 52 / 7%); pointer-events: none; }
.book canvas { display: block; width: 100%; height: auto; }
.book.flat { transform: none; border-bottom-color: transparent; box-shadow: 0 4px 18px rgb(48 48 52 / 9%); }
.preview-caption { display: flex; gap: 16px; justify-content: space-between; color: var(--muted); font-size: 11px; margin-top: 18px; font-variant-numeric: tabular-nums; }
.preview-caption > :last-child { white-space: nowrap; }
.editor-panel { position: sticky; top: 104px; padding: 23px; }
.editor-panel h3 { font-size: 17px; margin-bottom: 21px; }
.editor-panel .fields { gap: 16px; }
.editor-panel .inline-fields { gap: 11px; }
.editor-panel .field input, .editor-panel .field select { font-size: 12px; }
.editor-group { border-top: 1px solid var(--line); padding-top: 15px; }
.editor-group summary { cursor: pointer; font-size: 12px; font-weight: 470; padding: 1px 0; }
.editor-group summary small { float: right; font-size: 10px; font-weight: 380; }
.editor-group > .fields, .editor-group > .inline-fields { margin-top: 16px; }
.editor-actions { display: grid; gap: 10px; padding-top: 2px; }
.editor-actions .button { width: 100%; min-height: 41px; font-size: 12px; }
.editor-actions .primary { margin-top: 0; }
.saved-title { margin-top: 44px; }

/* 账号与用量保留真实表格语义，明暗与行距沿用制作界面。 */
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); }
table { width: 100%; border-collapse: collapse; font-size: 13px; }
th, td { text-align: left; padding: 18px; border-bottom: 1px solid var(--line); overflow-wrap: anywhere; }
th { color: var(--muted); font-weight: 420; font-size: 12px; background: var(--surface); }
tbody tr:last-child td { border-bottom: 0; }
td.numeric { font-variant-numeric: tabular-nums; white-space: nowrap; }
.task-message { max-width: 350px; font-size: 12px; }
.footer { width: min(100%, 1408px); margin: auto auto 0; padding: 24px 64px; border-top: 1px solid var(--line); color: var(--muted); font-size: 11px; display: flex; gap: 16px; justify-content: space-between; }
.loading { padding: 100px 24px; text-align: center; color: var(--muted); }
dialog { width: min(540px, calc(100% - 32px)); max-height: 90dvh; padding: 30px; background: var(--paper); border: 1px solid var(--line); border-radius: 20px; box-shadow: 0 25px 90px rgb(48 48 52 / 22%); color: var(--ink); overflow: auto; overscroll-behavior: contain; }
dialog::backdrop { background: rgb(36 36 38 / 30%); }
dialog .fields { margin-top: 24px; }
.dialog-title { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.dialog-title h2 { font-size: 24px; }
dialog .primary { width: 100%; }
dialog .dialog-title .button { font-size: 12px; min-height: 34px; padding: 6px 14px; }
#notice:not(:empty) { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); z-index: var(--layer-notice); max-width: min(500px, calc(100% - 32px)); background: var(--accent); color: var(--paper); padding: 13px 22px; font-size: 13px; border-radius: 999px; box-shadow: 0 10px 35px rgb(48 48 52 / 18%); }
.skip-link { position: fixed; top: -100px; left: 20px; z-index: var(--layer-skip); background: var(--paper); padding: 12px; }
.skip-link:focus { top: 12px; }

/* 登录中的实体相册是通用产品示意，不使用陌生人的照片或虚构客户成果。 */
.login-shell { min-height: 100dvh; background: var(--surface); }
.login-brand { display: flex; align-items: center; gap: 12px; width: min(100%, 1320px); margin: 0 auto; padding: 34px 64px; }
.login-brand h1 { font-size: 17px; font-weight: 510; }
.login-layout { width: min(100%, 1240px); padding: 22px 64px 64px; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(320px, .9fr); gap: 100px; align-items: center; }
.login-story { position: relative; padding: 20px 0; }
.login-story h2 { font-size: 46px; font-weight: 560; letter-spacing: -.045em; line-height: 1.35; }
.login-story > p { font-size: 14px; color: var(--muted); line-height: 1.9; margin-top: 18px; }
.album-object { position: relative; width: 280px; height: 170px; margin: 56px 0 20px 30px; transform: perspective(900px) rotateX(25deg) rotateY(-15deg) rotateZ(-7deg); }
.album-object-cover { position: absolute; inset: 0; z-index: 1; display: grid; place-items: center; border: 1px solid #e0e0e5; border-radius: 3px; background: linear-gradient(135deg, #fcfcfd, #e9e9ed); box-shadow: inset 0 1px 0 #fefefe, 0 4px 8px rgb(48 48 52 / 4%); }
.album-object-cover span { color: #707075; font-size: 15px; letter-spacing: .24em; text-shadow: 0 1px 0 #fefefe; }
.album-object-pages { position: absolute; inset: 0; background: #ebebef; transform: translate(3px, 9px); border-radius: 3px; box-shadow: 0 2px 0 #d5d5db, 0 5px 0 #f7f7f9, 0 8px 0 #d9d9df, 0 35px 40px -20px rgb(48 48 52 / 28%); }
.login { background: var(--paper); border: 1px solid var(--line); border-radius: 24px; padding: 38px; box-shadow: var(--panel-shadow); }
.login h2 { font-size: 27px; font-weight: 510; }
.login .sub { font-size: 13px; }
.login form { margin-top: 29px; gap: 20px; }
.login .primary { width: 100%; margin-top: 4px; }
.login-footnote { font-size: 11px; color: var(--muted); text-align: center; margin-top: 25px; }

/* 切换制作步骤的短淡入用于交代上下文变化；不编排逐项入场或滚动劫持。 */
@media (prefers-reduced-motion: no-preference) {
  .page-content { animation: page-enter 180ms var(--ease); }
  dialog[open] { animation: dialog-enter 180ms var(--ease); }
  #notice:not(:empty) { animation: notice-enter 180ms var(--ease); }
}
@keyframes page-enter { from { opacity: .55; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@keyframes dialog-enter { from { opacity: 0; transform: translateY(8px) scale(.99); } to { opacity: 1; transform: none; } }
@keyframes notice-enter { from { opacity: 0; } to { opacity: 1; } }

/* 窄屏优先保证操作可达，折叠两栏，不压缩文字与触摸目标。 */
@media (min-width: 1500px) { main { padding-top: 66px; } .canvas { padding: 70px 50px 85px; } }
@media (max-width: 1100px) {
  .header-inner { padding: 0 32px; gap: 30px; }
  main { padding: 42px 32px 56px; }
  .footer { padding: 24px 32px; }
  .workspace { grid-template-columns: minmax(0, 1fr) 290px; gap: 24px; }
  .overview { grid-template-columns: minmax(0, 1fr) minmax(280px, 1fr); }
  .editor-panel { padding: 20px; }
  .canvas { padding: 48px 28px 60px; min-height: 370px; }
  .login-layout { gap: 54px; }
}
@media (max-width: 850px) {
  .header-inner { padding: 14px 24px; gap: 20px; flex-wrap: wrap; }
  .brand { order: 0; }
  .account-menu { order: 1; }
  .nav { order: 2; width: 100%; gap: 4px; }
  .nav a { padding: 7px 14px; }
  .workspace, .overview { grid-template-columns: minmax(0, 1fr); }
  .editor-panel { position: static; }
  .delivery-workspace { gap: 28px; }
  .canvas { min-height: 350px; }
  .login-layout { grid-template-columns: minmax(0, 1fr) minmax(280px, 1fr); gap: 30px; padding: 20px 32px 48px; }
  .login-brand { padding: 26px 32px; }
  .login-story h2 { font-size: 35px; }
  .album-object { width: 210px; height: 140px; margin-left: 10px; }
  .login { padding: 28px; }
}
@media (max-width: 600px) {
  main { padding: 32px 20px 44px; }
  .header-inner { padding: 12px 20px; gap: 14px; }
  .brand h1 { font-size: 15px; }
  .brand { gap: 9px; }
  .account-menu { gap: 13px; }
  .user { max-width: 110px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  .title { align-items: flex-start; gap: 16px; flex-wrap: wrap; margin-bottom: 24px; }
  .gallery-title { margin-top: 0; }
  .gallery-title h2 { font-size: 34px; }
  h2 { font-size: 30px; }
  .sub { font-size: 13px; }
  .gallery-toolbar { align-items: stretch; flex-direction: column; gap: 18px; margin-bottom: 24px; }
  .search-field input { width: 100%; }
  .filter-group button { padding: 8px 14px; }
  .gallery-caption { font-size: 11px; }
  .grid { grid-template-columns: minmax(0, 1fr); gap: 34px; }
  .order-title h2 { font-size: 26px; }
  .order-status { padding: 5px 10px; }
  .tabs { gap: 22px; margin-bottom: 22px; }
  .tabs button { padding-bottom: 12px; }
  .panel { padding: 22px; }
  .photo-stage { padding: 26px; min-height: 300px; }
  .cover img { max-height: 360px; }
  .photos { grid-template-columns: minmax(0, 1fr); }
  .print img { height: 280px; }
  .preview-toolbar { gap: 8px; flex-wrap: wrap; }
  .preview-toolbar > .button { font-size: 11px; padding: 8px 11px; }
  .view-switch .button { font-size: 11px; padding: 7px 11px; }
  .canvas { padding: 36px 22px 48px; min-height: 250px; border-radius: 16px; }
  .book { transform: rotateX(12deg) rotateY(-8deg) rotateZ(-1deg); }
  .preview-caption { font-size: 10px; gap: 8px; flex-wrap: wrap; }
  .preview-caption .meta-separator { margin: 0 7px; }
  .footer { padding: 22px 20px; flex-direction: column; gap: 5px; }
  .dl { grid-template-columns: 85px minmax(0, 1fr); }
  th, td { padding: 13px 10px; font-size: 12px; }
  .login-brand { padding: 22px 24px; }
  .login-layout { grid-template-columns: minmax(0, 1fr); gap: 30px; padding: 14px 24px 42px; }
  .login-story { padding: 10px 0; }
  .login-story h2 { font-size: 35px; }
  .album-object { display: none; }
  .login { padding: 27px; border-radius: 20px; }
  dialog { padding: 24px; }
  #notice:not(:empty) { border-radius: 14px; }
}
@media (max-width: 380px) { .inline-fields { grid-template-columns: minmax(0, 1fr); } .brand-mark { display: none; } .account-menu { gap: 8px; } .nav a { padding: 7px 10px; } }
@media (pointer: coarse) { button, .button, summary { min-height: 44px; } .field input, .field textarea, .field select, .search-field input { font-size: 16px; } .check { min-height: 44px; align-items: center; } .check input { margin-top: 0; } }
@media (prefers-reduced-transparency: reduce) { .header { background: var(--paper); backdrop-filter: none; -webkit-backdrop-filter: none; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } .book, .cover { transform: none; } .button:hover, .order-card:hover .order-cover img, .order-card:hover .card-arrow { transform: none; } }