/* The work page follows the sketch: a quiet tool column and a borderless canvas. */
.page-work { --work-scale: .9; max-width: 1760px; margin: auto; padding: 48px clamp(28px, calc(3.4vw / var(--work-scale)), 48px) 40px; overflow: hidden; zoom: var(--work-scale); }
.page-work .work-layout { display: grid; grid-template-columns: clamp(280px, calc(25vw / var(--work-scale)), 380px) minmax(0, 1fr); gap: clamp(40px, calc(4vw / var(--work-scale)), 80px); height: 100%; min-height: 0; }
.page-work .work-controls { display: flex; flex-direction: column; align-items: stretch; gap: 24px; min-height: 0; min-width: 0; padding: 58px 4px 4px 0; overflow-y: auto; scrollbar-width: thin; }
.page-work .work-identity { flex-shrink: 0; }
.page-work .work-platform-mark { width: 80px; height: 80px; display: grid; place-items: center; border-radius: 24px; background: #b35f42; color: #fff; }
.page-work .work-platform-mark[data-platform="xiaohongshu"] { background: #ff2442; }
.page-work .work-platform-mark[data-platform="wechat_article"], .page-work .work-platform-mark[data-platform="moments"] { background: #2e9a67; }
.page-work .work-xhs-wordmark { font: 800 24px/1 var(--font-sans); letter-spacing: -.08em; padding-right: 2px; }
.page-work .work-platform-mark > svg { width: 57px; height: 57px; }
.page-work .work-platform-mark > .icon { width: 40px; height: 40px; }
.page-work .work-platform-name { margin-top: 12px; font-size: 14px; font-weight: 500; color: var(--text-muted); }
.page-work .work-product-name { margin-top: 8px; font: 500 clamp(24px, calc(2vw / var(--work-scale)), 28px)/1.4 var(--font-serif); overflow-wrap: anywhere; }
.page-work .work-refine { flex-shrink: 0; }
.page-work .work-refine h3 { font: 500 28px/1.4 var(--font-serif); }
.page-work .work-refine-hint { margin-top: 8px; font-size: 14px; line-height: 1.7; color: var(--text-muted); }
.page-work .work-refine-options { display: grid; gap: 10px; margin-top: 20px; }
.page-work .work-refine-options button:not(.work-refine-custom) { display: grid; grid-template-columns: 34px minmax(0, 1fr) 18px; align-items: center; gap: 12px; padding: 10px 14px; text-align: left; background: #eeece5; border: 1.5px solid transparent; border-radius: 12px; }
.page-work .work-refine-options button:not(.work-refine-custom):hover { background: #e8e4da; }
.page-work .work-refine-options button[aria-pressed="true"]:not(.work-refine-custom) { background: var(--accent-tint); border-color: var(--accent-terracotta); }
.page-work .refine-number { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; font: 500 17px/1 var(--font-serif); background: var(--bg-surface); }
.page-work .work-refine-options button[aria-pressed="true"] .refine-number { background: var(--text-main); color: var(--bg-surface); }
.page-work .work-refine-options b { display: block; font-size: 15px; font-weight: 600; line-height: 1.6; }
.page-work .work-refine-options small { display: block; font-size: 12px; line-height: 1.7; color: var(--text-muted); }
.page-work .work-refine-options .icon { width: 16px; height: 16px; color: var(--text-muted); }
.page-work .work-refine-custom { justify-self: start; display: inline-flex; align-items: center; gap: 10px; padding: 6px 2px 10px; font-size: 14px; color: var(--text-muted); text-decoration: underline; text-underline-offset: 5px; }
.page-work .work-refine-custom[aria-pressed="true"] { color: var(--accent-terracotta-dark); }
.page-work #instr { display: block; width: 100%; height: 84px; min-height: 70px; max-height: 200px; padding: 11px 13px; border: 1.5px solid var(--border-line); border-radius: 12px; font-size: 14px; line-height: 1.7; background: var(--bg-surface); resize: vertical; }
.page-work .work-refine-submit { width: 100%; justify-content: space-between; min-height: 46px; margin-top: 12px; font-size: 14px; }
.page-work .work-utilities { flex-shrink: 0; padding-top: 2px; }
.page-work .work-delivery { display: flex; align-items: center; gap: 24px; }
.page-work .work-review { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 10px; }
.page-work .work-utilities .text-button { font-size: 13px; font-weight: 500; }
.page-work #work-review-status { font-size: 12px; color: var(--state-ok); white-space: nowrap; }
.page-work #work-review-status[data-state="warn"] { color: var(--state-warn); }
.page-work #work-review-status::before { content: ""; display: inline-block; width: 4px; height: 4px; border-radius: 50%; margin-right: 6px; vertical-align: middle; background: currentColor; }
.page-work .notice-strip { max-height: 110px; margin: 0; }
.page-work .warnbar { margin: 0 0 8px; padding: 10px 12px; border-radius: 8px; background: var(--state-warn-bg); font-size: 12px; }

.page-work .work-preview { min-width: 0; min-height: 0; display: flex; flex-direction: column; }
.page-work .work-preview:not([data-device="poster"]) { border: 0; border-radius: 0; box-shadow: none; background: transparent; }
.page-work .work-preview .preview-toolbar { display: flex; justify-content: flex-end; min-height: 48px; padding: 0 2px 14px; border: 0; background: transparent; }
.page-work .work-preview .preview-label, .page-work .work-preview .preview-device-caption { display: none; }
.page-work .work-preview .preview-devices { border: 0; background: #eae7de; }
.page-work .work-preview .preview-devices button { padding: 7px 14px; }
.page-work .work-preview .preview-backdrop { flex: 1; min-height: 0; padding: 20px; border: 0; border-radius: 24px; background: #e8e6df; }
.page-work .work-preview .pv-desktop { border: 0; border-radius: 18px; box-shadow: none; }
.page-work .work-preview .pv-phone { border: 0; border-radius: 22px; }

/* Desktop breakpoints follow the same 90% scale as the work-page content. */
@media (max-height: 765px) and (min-width: 1117px) {
  .page-work { padding-top: 24px; padding-bottom: 24px; }
  .page-work .work-controls { padding-top: 48px; gap: 20px; }
  .page-work .work-identity { display: grid; grid-template-columns: 64px minmax(0, 1fr); align-items: center; gap: 4px 16px; }
  .page-work .work-platform-mark { width: 64px; height: 64px; border-radius: 20px; grid-row: 1 / 3; }
  .page-work .work-xhs-wordmark { font-size: 18px; }
  .page-work .work-platform-mark > svg { width: 44px; height: 44px; }
  .page-work .work-platform-name { margin: 0; font-size: 13px; }
  .page-work .work-product-name { margin: 0; font-size: 22px; line-height: 1.4; }
  .page-work .work-refine h3 { font-size: 24px; }
  .page-work .work-refine-hint { display: none; }
  .page-work .work-refine-options { margin-top: 14px; gap: 8px; }
  .page-work .work-refine-options button:not(.work-refine-custom) { padding-top: 9px; padding-bottom: 9px; grid-template-columns: 28px minmax(0, 1fr) 18px; }
  .page-work .refine-number { width: 26px; height: 26px; font-size: 15px; }
  .page-work .work-refine-options small { display: none; }
  .page-work .work-refine-options b { font-size: 14px; }
  .page-work .work-refine-custom { padding-bottom: 6px; font-size: 13px; }
  .page-work #instr { min-height: 70px; height: 70px; font-size: 13px; }
  .page-work .work-refine-submit { margin-top: 10px; min-height: 42px; }
}

@media (max-width: 1116px) {
  .page-work { overflow-y: auto; padding: 24px 28px 32px; }
  .page-work .work-layout { display: flex; flex-direction: column; height: auto; min-height: 100%; gap: 32px; }
  .page-work .work-preview { order: 0; flex: none; height: clamp(440px, calc(65dvh / var(--work-scale)), 650px); }
  .page-work .work-controls { order: 1; flex: none; display: grid; grid-template-columns: minmax(180px, .7fr) minmax(0, 1fr); align-items: start; gap: 24px 36px; overflow: visible; padding: 0 4px; }
  .page-work .work-refine { grid-column: 2; grid-row: 1 / 4; }
  .page-work .work-product-name { max-width: 340px; font-size: 27px; }
  .page-work .work-utilities, .page-work .notice-strip { grid-column: 1; }
}
@media (max-width: 600px) {
  .page-work { --work-scale: 1; padding: 14px 16px 28px; }
  .page-work .work-layout { gap: 28px; }
  .page-work .work-preview { height: 540px; max-height: 72dvh; min-height: 400px; }
  .page-work .work-preview .preview-toolbar { min-height: 44px; padding-bottom: 10px; }
  .page-work .work-preview .preview-backdrop { padding: 10px; border-radius: 20px; }
  .page-work .work-controls { display: flex; flex-direction: column; gap: 24px; padding: 0 2px; }
  .page-work .work-identity { width: 100%; display: grid; grid-template-columns: 60px minmax(0, 1fr); align-items: center; gap: 4px 14px; }
  .page-work .work-platform-mark { grid-row: 1 / 3; width: 60px; height: 60px; border-radius: 18px; }
  .page-work .work-platform-mark > svg { width: 42px; height: 42px; }
  .page-work .work-xhs-wordmark { font-size: 17px; }
  .page-work .work-platform-name { margin: 0; font-size: 13px; }
  .page-work .work-product-name { margin: 0; font-size: 23px; line-height: 1.5; }
  .page-work .work-refine { width: 100%; }
  .page-work .work-refine h3 { font-size: 26px; }
  .page-work .work-utilities { width: 100%; }
  .page-work .notice-strip { max-height: 160px; }
}