@media (max-width: 720px) {
  html body[data-current-view="create"] {
    --create-ref-green: #006f5f;
    --create-ref-border: #e5e9ed;
    --create-ref-input: #fbfcfd;
    --create-ref-muted: #a7b0b8;
  }

  html body[data-current-view="create"] .mobile-status-bar {
    display: flex !important;
    visibility: hidden !important;
    height: 44px !important;
    min-height: 44px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  html body[data-current-view="create"] .main {
    padding: 0 24px 96px !important;
    background: #ffffff !important;
  }

  html body[data-current-view="create"] > .app-shell > main.main {
    padding: 0 24px 96px !important;
    background: #ffffff !important;
  }

  html body[data-current-view="create"] .mobile-app-header {
    height: 54px !important;
    background: #ffffff !important;
  }

  html body[data-current-view="create"] .mobile-page-title {
    color: #111827 !important;
    font-size: 18px !important;
    font-weight: 950 !important;
  }

  html body[data-current-view="create"] #createView {
    padding: 10px 0 0 !important;
    background: #ffffff !important;
  }

  html body[data-current-view="create"] #createForm {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    width: calc(100vw - 48px) !important;
    max-width: 327px !important;
    margin: 0 auto !important;
  }

  html body[data-current-view="create"] #createView .panel-heading,
  html body[data-current-view="create"] #createView .desktop-create-section-title,
  html body[data-current-view="create"] #createView .category-card .module-icon,
  html body[data-current-view="create"] #createView .category-card .category-intro,
  html body[data-current-view="create"] #createView .choice-picker,
  html body[data-current-view="create"] #advancedCreateFields .advanced-create-title,
  html body[data-current-view="create"] #createView .form-actions .secondary-button {
    display: none !important;
  }

  html body[data-current-view="create"] #createView .workspace-grid,
  html body[data-current-view="create"] #createView .form-panel {
    display: block !important;
    width: calc(100vw - 48px) !important;
    max-width: 327px !important;
    margin: 0 auto !important;
    padding: 0 !important;
    border: 0 !important;
    background: #ffffff !important;
    box-shadow: none !important;
  }

  html body[data-current-view="create"] #createView .desktop-create-type {
    order: 1 !important;
    margin: 0 0 22px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  html body[data-current-view="create"] #createView .desktop-create-type .category-tabs {
    height: 40px !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 10px !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
  }

  html body[data-current-view="create"] #createView .desktop-create-type .category-card {
    height: 40px !important;
    min-height: 40px !important;
    display: grid !important;
    place-items: center !important;
    padding: 0 8px !important;
    border: 1px solid var(--create-ref-border) !important;
    border-radius: 8px !important;
    background: #ffffff !important;
    color: #111827 !important;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.03) !important;
  }

  html body[data-current-view="create"] #createView .desktop-create-type .category-card.active {
    border-color: var(--create-ref-green) !important;
    background: var(--create-ref-green) !important;
    color: #ffffff !important;
  }

  html body[data-current-view="create"] #createView .desktop-create-type .category-card strong {
    font-size: 0 !important;
  }

  html body[data-current-view="create"] #createView .desktop-create-type .category-card[data-category="project_ad"] strong::before {
    content: "项目广告" !important;
  }

  html body[data-current-view="create"] #createView .desktop-create-type .category-card[data-category="real_comparison"] strong::before {
    content: "真人效果" !important;
  }

  html body[data-current-view="create"] #createView .desktop-create-type .category-card[data-category="chat_feedback"] strong::before {
    content: "聊天记录" !important;
  }

  html body[data-current-view="create"] #createView .desktop-create-type .category-card strong::before {
    font-size: 14px !important;
    font-weight: 900 !important;
  }

  html body[data-current-view="create"] #createView .desktop-create-basic {
    order: 2 !important;
  }

  html body[data-current-view="create"] #createView #advancedCreateFields {
    order: 3 !important;
  }

  html body[data-current-view="create"] #createView .desktop-create-note {
    order: 4 !important;
  }

  html body[data-current-view="create"] #createView .form-actions {
    order: 5 !important;
  }

  html body[data-current-view="create"] #createView .desktop-create-basic,
  html body[data-current-view="create"] #createView #advancedCreateFields,
  html body[data-current-view="create"] #createView .desktop-create-note {
    min-height: 0 !important;
    height: auto !important;
    margin: 0 0 16px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
  }

  html body[data-current-view="create"] #createView .desktop-create-basic::before,
  html body[data-current-view="create"] #createView #advancedCreateFields::before,
  html body[data-current-view="create"] #createView .desktop-create-note::before {
    display: block !important;
    margin: 0 0 12px !important;
    color: #111827 !important;
    font-size: 16px !important;
    font-weight: 950 !important;
    line-height: 1.2 !important;
  }

  html body[data-current-view="create"] #createView .desktop-create-basic::before {
    content: "项目基础设置" !important;
  }

  html body[data-current-view="create"] #createView #advancedCreateFields::before {
    content: "高级设置" !important;
  }

  html body[data-current-view="create"] #createView .desktop-create-note::before {
    content: "备注（选填）" !important;
  }

  html body[data-current-view="create"] #createView .desktop-create-basic label,
  html body[data-current-view="create"] #createView #advancedCreateFields .advanced-create-grid > .field-group label,
  html body[data-current-view="create"] #createView #advancedCreateFields .advanced-create-grid > label {
    min-height: 36px !important;
    height: 36px !important;
    display: grid !important;
    grid-template-columns: 76px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 10px !important;
    position: relative !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-bottom: 1px solid #eef1f4 !important;
    border-radius: 0 !important;
    background: transparent !important;
  }

  html body[data-current-view="create"] #createView label > span {
    color: #111827 !important;
    font-size: 13px !important;
    font-weight: 850 !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
  }

  html body[data-current-view="create"] #createView label.project-name-field > span,
  html body[data-current-view="create"] #createView label:has(#adStyle) > span {
    font-size: 0 !important;
  }

  html body[data-current-view="create"] #createView label.project-name-field > span::before {
    content: "项目主体" !important;
    font-size: 13px !important;
  }

  html body[data-current-view="create"] #createView label:has(#adStyle) > span::before {
    content: "风格选择" !important;
    font-size: 13px !important;
  }

  html body[data-current-view="create"] #createView input,
  html body[data-current-view="create"] #createView select,
  html body[data-current-view="create"] #createView #advancedCreateFields .advanced-create-grid label select {
    width: 100% !important;
    min-height: 32px !important;
    height: 32px !important;
    margin: 0 !important;
    padding: 0 14px !important;
    border: 1px solid var(--create-ref-border) !important;
    border-radius: 7px !important;
    background: var(--create-ref-input) !important;
    color: #111827 !important;
    font-size: 13px !important;
    font-weight: 650 !important;
    box-shadow: none !important;
  }

  html body[data-current-view="create"] #createView input::placeholder,
  html body[data-current-view="create"] #createView textarea::placeholder {
    color: var(--create-ref-muted) !important;
  }

  html body[data-current-view="create"] #createView #adStyle,
  html body[data-current-view="create"] #createView #count {
    color: var(--create-ref-muted) !important;
  }

  html body[data-current-view="create"] #createView #advancedCreateFields .advanced-create-grid,
  html body[data-current-view="create"] #createView #advancedCreateFields .advanced-create-grid > .field-group,
  html body[data-current-view="create"] #createView #advancedCreateFields .advanced-create-grid > label {
    min-height: 0 !important;
    height: auto !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    overflow: visible !important;
  }

  html body[data-current-view="create"] #createView #advancedCreateFields .advanced-create-grid label select {
    position: static !important;
    inset: auto !important;
    opacity: 1 !important;
    z-index: auto !important;
    padding-right: 28px !important;
    color: var(--create-ref-muted) !important;
    appearance: none !important;
  }

  html body[data-current-view="create"] #createView .hidden-field,
  html body[data-current-view="create"] #createView #createForm > .hidden-field,
  html body[data-current-view="create"] #createView #advancedCreateFields .advanced-create-grid > .field-group.hidden-field,
  html body[data-current-view="create"] #createView #advancedCreateFields .advanced-create-grid > label.hidden-field,
  html body[data-current-view="create"]:not([data-create-category="project_ad"]) #createForm .project-field,
  html body[data-current-view="create"]:not([data-create-category="project_ad"]) #advancedCreateFields .project-field,
  html body[data-current-view="create"][data-create-category="project_ad"] #advancedCreateFields .comparison-field,
  html body[data-current-view="create"][data-create-category="chat_feedback"] #advancedCreateFields .comparison-field {
    display: none !important;
  }

  html body[data-current-view="create"] #createView #advancedCreateFields .advanced-create-grid label::after {
    content: ">" !important;
    position: absolute !important;
    right: 11px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    color: var(--create-ref-muted) !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    pointer-events: none !important;
    z-index: 3 !important;
  }

  html body[data-current-view="create"] #createView .desktop-create-note label {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
  }

  html body[data-current-view="create"] #createView .desktop-create-note label > span {
    display: block !important;
    margin: 0 0 10px !important;
  }

  html body[data-current-view="create"] #createView textarea,
  html body[data-current-view="create"] #createView #extraText,
  html body[data-current-view="create"] #createView .desktop-create-note label.extra-text-field textarea#extraText {
    width: 100% !important;
    min-height: 58px !important;
    height: 58px !important;
    max-height: 58px !important;
    margin: 0 !important;
    padding: 12px 14px !important;
    border: 1px solid var(--create-ref-border) !important;
    border-radius: 8px !important;
    background: var(--create-ref-input) !important;
    color: #111827 !important;
    font-size: 13px !important;
    resize: none !important;
    box-shadow: none !important;
  }

  html body[data-current-view="create"] #createView .form-actions {
    position: static !important;
    display: block !important;
    width: calc(100vw - 48px) !important;
    max-width: 327px !important;
    margin: 8px auto 104px !important;
    padding: 0 !important;
    background: transparent !important;
  }

  html body[data-current-view="create"] #generateBtn,
  html body[data-current-view="create"] #createView .form-actions #generateBtn.primary-button,
  html body[data-current-view="create"] #createView .form-actions button#generateBtn {
    width: 100% !important;
    height: 44px !important;
    display: block !important;
    border: 0 !important;
    border-radius: 7px !important;
    background: var(--create-ref-green) !important;
    background-image: none !important;
    color: #ffffff !important;
    font-size: 15px !important;
    font-weight: 950 !important;
    box-shadow: none !important;
  }

  html body[data-current-view="create"] #createView #advancedCreateFields .advanced-create-grid > label,
  html body[data-current-view="create"] #createView #advancedCreateFields .advanced-create-grid > .field-group label {
    min-height: 36px !important;
    height: 36px !important;
    display: grid !important;
    grid-template-columns: 76px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 10px !important;
    position: relative !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-bottom: 1px solid #edf1f3 !important;
    border-radius: 0 !important;
    background: transparent !important;
  }

  html body[data-current-view="create"] #createView #advancedCreateFields .advanced-create-grid > label select,
  html body[data-current-view="create"] #createView #advancedCreateFields .advanced-create-grid > .field-group label select {
    min-width: 0 !important;
    width: 100% !important;
  }

  html body[data-current-view="create"] #createView .desktop-create-basic > label:has(#count) {
    min-height: 36px !important;
    height: 36px !important;
    display: grid !important;
    grid-template-columns: 76px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 10px !important;
    position: relative !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-bottom: 1px solid #eef1f4 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  html body[data-current-view="create"] #createView .desktop-create-basic > label:has(#count) #count {
    width: 100% !important;
    min-width: 0 !important;
    height: 32px !important;
    min-height: 32px !important;
    margin: 0 !important;
    padding: 0 14px !important;
    border: 1px solid #e5e9ed !important;
    border-radius: 7px !important;
    background: #fbfcfd !important;
    color: #a7b0b8 !important;
  }

  html body[data-current-view="create"] #createForm > .comparison-field:not(.hidden-field),
  html body[data-current-view="create"] #createForm > .effect-field:not(.hidden-field),
  html body[data-current-view="create"] #createForm > .chat-field:not(.hidden-field) {
    order: 3 !important;
    display: block !important;
    width: calc(100vw - 48px) !important;
    max-width: 327px !important;
    margin: 0 auto 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  html body[data-current-view="create"] #createView #createForm > div.field-group.comparison-field:not(.hidden-field),
  html body[data-current-view="create"] #createView #createForm > div.field-group.effect-field:not(.hidden-field),
  html body[data-current-view="create"] #createView #createForm > label.chat-field:not(.hidden-field),
  html body[data-current-view="create"] #createView #createForm > div.field-group.chat-field:not(.hidden-field) {
    width: calc(100vw - 48px) !important;
    max-width: 327px !important;
    min-width: 0 !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  html body[data-current-view="create"][data-create-category="real_comparison"] #createForm > .comparison-field:not(.hidden-field)::before,
  html body[data-current-view="create"][data-create-category="chat_feedback"] #createForm > .chat-field:not(.hidden-field)::before {
    content: "高级设置" !important;
    display: block !important;
    margin: 0 0 12px !important;
    color: #111827 !important;
    font-size: 16px !important;
    font-weight: 950 !important;
    line-height: 1.2 !important;
  }

  html body[data-current-view="create"][data-create-category="real_comparison"] #createView #advancedCreateFields,
  html body[data-current-view="create"][data-create-category="chat_feedback"] #createView #advancedCreateFields {
    order: 4 !important;
    margin-top: 0 !important;
  }

  html body[data-current-view="create"][data-create-category="real_comparison"] #createView #advancedCreateFields::before,
  html body[data-current-view="create"][data-create-category="chat_feedback"] #createView #advancedCreateFields::before {
    display: none !important;
    content: none !important;
  }

  html body[data-current-view="create"][data-create-category="real_comparison"] #createView .desktop-create-note,
  html body[data-current-view="create"][data-create-category="chat_feedback"] #createView .desktop-create-note {
    order: 5 !important;
  }

  html body[data-current-view="create"] #createForm > .comparison-field:not(.hidden-field) label,
  html body[data-current-view="create"] #createForm > .effect-field:not(.hidden-field) label,
  html body[data-current-view="create"] #createForm > label.chat-field:not(.hidden-field),
  html body[data-current-view="create"] #createForm > div.chat-field:not(.hidden-field) label {
    min-height: 36px !important;
    height: 36px !important;
    display: grid !important;
    grid-template-columns: 76px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 10px !important;
    position: relative !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-bottom: 1px solid #eef1f4 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  html body[data-current-view="create"] #createView #createForm > div.field-group.comparison-field:not(.hidden-field) label,
  html body[data-current-view="create"] #createView #createForm > div.field-group.effect-field:not(.hidden-field) label,
  html body[data-current-view="create"] #createView #createForm > label.chat-field:not(.hidden-field),
  html body[data-current-view="create"] #createView #createForm > div.field-group.chat-field:not(.hidden-field) label {
    width: 100% !important;
    grid-template-columns: 76px minmax(0, 1fr) !important;
  }

  html body[data-current-view="create"] #createForm > .comparison-field:not(.hidden-field) label:has(textarea) {
    min-height: 78px !important;
    height: 78px !important;
    align-items: start !important;
    padding-top: 0 !important;
  }

  html body[data-current-view="create"] #createForm > .comparison-field:not(.hidden-field) label:has(textarea) > span {
    padding-top: 10px !important;
  }

  html body[data-current-view="create"] #createForm > .comparison-field:not(.hidden-field) select,
  html body[data-current-view="create"] #createForm > .comparison-field:not(.hidden-field) textarea,
  html body[data-current-view="create"] #createForm > .effect-field:not(.hidden-field) input,
  html body[data-current-view="create"] #createForm > .chat-field:not(.hidden-field) select,
  html body[data-current-view="create"] #createForm > .chat-field:not(.hidden-field) input {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 32px !important;
    height: 32px !important;
    margin: 0 !important;
    padding: 0 14px !important;
    border: 1px solid #e5e9ed !important;
    border-radius: 7px !important;
    background: #fbfcfd !important;
    color: #111827 !important;
    font-size: 13px !important;
    box-shadow: none !important;
  }

  html body[data-current-view="create"] #createForm > .comparison-field:not(.hidden-field) textarea {
    height: 58px !important;
    min-height: 58px !important;
    max-height: 58px !important;
    padding: 10px 14px !important;
    resize: none !important;
  }

  html body[data-current-view="create"][data-create-category="chat_feedback"] #createView #createForm > label.chat-field:not(.hidden-field) {
    min-height: 84px !important;
    height: 84px !important;
    display: grid !important;
    grid-template-columns: 76px minmax(0, 1fr) !important;
    grid-template-rows: auto 36px !important;
    align-items: center !important;
    gap: 0 10px !important;
    border-bottom: 1px solid #eef1f4 !important;
  }

  html body[data-current-view="create"][data-create-category="chat_feedback"] #createView #createForm > label.chat-field:not(.hidden-field)::before {
    content: "高级设置" !important;
    grid-column: 1 / -1 !important;
    grid-row: 1 !important;
    display: block !important;
    margin: 0 0 12px !important;
    color: #111827 !important;
    font-size: 16px !important;
    font-weight: 950 !important;
    line-height: 1.2 !important;
  }

  html body[data-current-view="create"][data-create-category="chat_feedback"] #createView #createForm > label.chat-field:not(.hidden-field) > span {
    grid-column: 1 !important;
    grid-row: 2 !important;
  }

  html body[data-current-view="create"][data-create-category="chat_feedback"] #createView #createForm > label.chat-field:not(.hidden-field) > select {
    grid-column: 2 !important;
    grid-row: 2 !important;
  }

  html body[data-current-view="create"][data-create-category="chat_feedback"] #createView #createForm > div.field-group.chat-field:not(.hidden-field) {
    min-height: 0 !important;
    height: auto !important;
  }

  html body[data-current-view="create"][data-create-category="chat_feedback"] #createView #createForm > div.field-group.chat-field:not(.hidden-field) label {
    min-height: 36px !important;
    height: 36px !important;
  }

  html body[data-current-view="create"] #createView .desktop-create-type .category-card.active,
  html body[data-current-view="create"] #createView .desktop-create-type .category-card.active:hover {
    border-color: #006f5f !important;
    background: #006f5f !important;
    background-color: #006f5f !important;
    background-image: none !important;
    color: #ffffff !important;
  }

  html body[data-current-view="create"] #createView .desktop-create-type .category-tabs .category-card.active,
  html body[data-current-view="create"] #createView .desktop-create-type .category-tabs button.category-card.active {
    border-color: #006f5f !important;
    background: #006f5f !important;
    background-color: #006f5f !important;
    background-image: none !important;
    color: #ffffff !important;
  }

  html body[data-current-view="create"] #createView #adStyle,
  html body[data-current-view="create"] #createView #count,
  html body[data-current-view="create"] #createView #projectNameInput,
  html body[data-current-view="create"] #createView #extraText,
  html body[data-current-view="create"] #createView #advancedCreateFields select {
    border-color: var(--create-ref-border) !important;
    background-color: var(--create-ref-input) !important;
    background-image: none !important;
  }
}