/* Keep the preview scroll rail within its own track beside the paper. */
body:has(#page-resume.active) #page-resume .editor-workspace .preview-area {
  box-sizing: border-box;
  width: 100% !important;
  max-width: 100%;
  margin-right: 0 !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  scrollbar-gutter: stable;
}
body:has(#page-resume.active) #page-resume .editor-workspace .resume-canvas-wrap {
  overflow: visible !important;
}
.mobile-editor-head { display: none; }
#mobile-editor-scrim[hidden] { display: none !important; }
@media (max-width: 1280px) {
  body:has(#page-resume.active) .topbar .login-btn {
    width: auto; min-width: 78px; padding: 6px 10px; white-space: nowrap;
  }
  body:has(#page-resume.active) #page-resume .editor-workspace .preview-area {
    padding-right: 15px;
  }
  body.mobile-resume-edit-open #mobile-editor-scrim {
    display: block; position: fixed; z-index: 58; inset: 0;
    width: 100%; border: 0; background: rgb(0 0 0 / 45%);
  }
  body:has(#page-resume.active).mobile-resume-edit-open #resume-form-panel {
    display: block !important; position: fixed !important; z-index: 59;
    top: 0; right: 0; bottom: 0; left: auto;
    width: min(378px, calc(100vw - 42px)); height: auto;
    padding: 0 18px 24px; transform: translateX(100%);
    transition: transform .3s cubic-bezier(.2,.75,.25,1);
    overflow-y: auto; background: #fff; box-shadow: -8px 0 24px #0002;
  }
  body:has(#page-resume.active).mobile-resume-edit-open #resume-form-panel.mobile-editor-visible {
    transform: translateX(0);
  }
  body:has(#page-resume.active).mobile-resume-edit-open #resume-form-panel .mobile-editor-head {
    display: flex; align-items: center; height: 56px;
    margin: 0 -18px 16px; padding: 0 18px;
    border-bottom: 1px solid #f0f0f0;
  }
  #mobile-editor-close {
    width: 32px; height: 32px; border: 0; background: transparent;
    color: #8c8c8c; font-size: 26px; line-height: 1; cursor: pointer;
  }
  body:has(#page-resume.active).mobile-resume-edit-open #resume-form-panel .module-edit-head {
    margin-top: 0;
  }
  body:has(#page-resume.active).mobile-resume-edit-open #resume-form-panel .module-table {
    width: 100%; margin-left: 0; margin-right: 0;
  }
  body:has(#page-resume.active).mobile-resume-edit-open #resume-form-panel > .form-head { display: none !important; }
  body:has(#page-resume.active).mobile-resume-edit-open #resume-form-panel:not(.editing) #section-list { padding-top: 9px; }
  body:has(#page-resume.active).mobile-resume-edit-open #resume-form-panel .module-table-head,
  body:has(#page-resume.active).mobile-resume-edit-open #resume-form-panel .module-row {
    grid-template-columns: 30px minmax(0,1fr) 54px 54px;
  }
  body:has(#page-resume.active).mobile-resume-edit-open #resume-form-panel .module-row .module-name {
    box-sizing: border-box; width: calc(100% - 8px) !important; min-width: 0;
  }
  body:has(#page-resume.active).mobile-resume-edit-open #resume-form-panel .module-row .drag-handle {
    justify-self: center; margin-left: 0;
  }
  body:has(#page-resume.active).mobile-resume-edit-open #resume-form-panel .fill-section {
    display: inline-block !important; visibility: visible !important; padding: 8px 2px;
  }
  body:has(#page-resume.active).mobile-resume-edit-open #resume-form-panel > .form-foot { display: none !important; }
  body:has(#page-resume.active).mobile-resume-edit-open #resume-form-panel.editing .basic-field-card > label,
  body:has(#page-resume.active).mobile-resume-edit-open #resume-form-panel.editing .basic-field-card > label.basic-width-field {
    display: block; margin: 0 0 15px; white-space: normal; color: #303030;
  }
  body:has(#page-resume.active).mobile-resume-edit-open #resume-form-panel.editing .basic-field-card > label > span { font-size: 0; }
  body:has(#page-resume.active).mobile-resume-edit-open #resume-form-panel.editing .basic-field-card > label > span::before { font-size: 14px; }
  body:has(#page-resume.active).mobile-resume-edit-open #resume-form-panel.editing .basic-field-card > label:nth-child(1) > span::before { content: "字段名称"; }
  body:has(#page-resume.active).mobile-resume-edit-open #resume-form-panel.editing .basic-field-card > label:nth-child(2) > span::before { content: "填写内容"; }
  body:has(#page-resume.active).mobile-resume-edit-open #resume-form-panel.editing .basic-field-card > label:nth-child(3) > span::before { content: "宽度占比"; }
  body:has(#page-resume.active).mobile-resume-edit-open #resume-form-panel.editing .basic-field-card > label input,
  body:has(#page-resume.active).mobile-resume-edit-open #resume-form-panel.editing .basic-width-field select {
    display: block; width: 100%; height: 40px; margin-top: 8px; font-size: 15px;
  }
  body:has(#page-resume.active).mobile-resume-edit-open #resume-form-panel.editing .basic-photo-card {
    grid-template-columns: 88px minmax(0,1fr); gap: 0 12px;
  }
  body:has(#page-resume.active).mobile-resume-edit-open #resume-form-panel.editing .basic-photo-preview {
    width: 88px; height: 124px;
  }
  body:has(#page-resume.active).mobile-resume-edit-open #resume-form-panel.editing .basic-field-controls { gap: 8px; margin-top: 16px; }
  body:has(#page-resume.active).mobile-resume-edit-open #resume-form-panel.editing .basic-field-controls button {
    display: inline-flex; align-items: center; justify-content: center;
    flex: 0 0 45px; width: 45px; min-width: 45px; height: 32px;
    font-size: 0; padding: 0; color: #555;
  }
  body:has(#page-resume.active).mobile-resume-edit-open #resume-form-panel.editing .basic-field-controls button::before {
    font-size: 19px; line-height: 1; font-weight: 400;
  }
  body:has(#page-resume.active).mobile-resume-edit-open #resume-form-panel.editing .basic-field-controls button[data-action^="add-"]::before { content: "+"; color: #1677ff; }
  body:has(#page-resume.active).mobile-resume-edit-open #resume-form-panel.editing .basic-field-controls button[data-action*="up"]::before { content: "↑"; }
  body:has(#page-resume.active).mobile-resume-edit-open #resume-form-panel.editing .basic-field-controls button[data-action*="down"]::before { content: "↓"; }
  body:has(#page-resume.active).mobile-resume-edit-open #resume-form-panel.editing .basic-field-controls button.danger { font-size: 0; }
  body:has(#page-resume.active).mobile-resume-edit-open #resume-form-panel.editing .basic-field-controls button.danger .editor-trash-icon { display: none !important; }
  body:has(#page-resume.active).mobile-resume-edit-open #resume-form-panel.editing .basic-field-controls button.danger::before {
    content: ""; display: block; flex: none; width: 16px; height: 16px;
    background: url('./assets/trash-outline.svg') center / 16px 16px no-repeat;
  }
  .style-popover.resume-style-popover {
    left: 50% !important; top: 72px !important;
    transform: translateX(-50%); max-height: calc(100dvh - 84px);
  }
}