@media (min-width: 981px) {
  html body[data-current-view] {
    background: #f7f9f8 !important;
    overflow-x: hidden !important;
  }

  html body[data-current-view] .mobile-status-bar,
  html body[data-current-view] .mobile-app-header,
  html body[data-current-view] .mobile-bottom-nav,
  html body[data-current-view="home"] #homeView > .desktop-dashboard,
  html body[data-current-view="home"] #homeView > .ref-home,
  html body[data-current-view="home"] #homeView > .generated-desktop-workbench,
  html body[data-current-view="home"] #homeView [data-retired-layout] {
    display: none !important;
    height: 0 !important;
    min-height: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
    visibility: hidden !important;
  }

  html body[data-current-view] .app-shell {
    background: #f7f9f8 !important;
    display: block !important;
    min-height: 100vh !important;
  }


  html body[data-current-view] .app-shell > main.main {
    background: #f7f9f8 !important;
    display: block !important;
    margin-left: 260px !important;
    min-height: 100vh !important;
    padding: 0 !important;
    width: calc(100vw - 260px) !important;
  }

  html body[data-current-view] .app-shell > main.main > header.topbar {
    align-items: center !important;
    background: rgba(255, 255, 255, 0.96) !important;
    border-bottom: 1px solid #e1e6e4 !important;
    display: flex !important;
    height: 70px !important;
    justify-content: space-between !important;
    left: 260px !important;
    margin: 0 !important;
    padding: 0 18px 0 24px !important;
    position: fixed !important;
    right: auto !important;
    top: 0 !important;
    transform: none !important;
    width: calc(100vw - 260px) !important;
    z-index: 20 !important;
  }

  html body[data-current-view] .view.active {
    background: #f7f9f8 !important;
    display: block !important;
    min-height: 100vh !important;
    overflow-x: hidden !important;
    padding: 90px 22px 28px !important;
    width: 100% !important;
  }

  html body[data-current-view="home"] #homeView > .generated-home {
    display: grid !important;
    gap: 16px !important;
    margin: 0 !important;
    max-width: none !important;
    padding: 0 !important;
    visibility: visible !important;
    width: 100% !important;
  }

  html body[data-current-view="home"] #homeView .generated-module-grid {
    display: grid !important;
    gap: 14px !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }

  html body[data-current-view="home"] #homeView .generated-dashboard-grid {
    display: grid !important;
    gap: 16px !important;
    grid-template-columns: minmax(0, 1.2fr) minmax(320px, 0.8fr) !important;
  }

  html body[data-current-view="create"] #createView .section-close-bar,
  html body[data-current-view="assets"] #assetsView .section-close-bar,
  html body[data-current-view="works"] #worksView .section-close-bar {
    display: none !important;
  }

  html body[data-current-view="create"][data-create-category] #createView .workspace-grid {
    align-items: start !important;
    display: grid !important;
    gap: 16px !important;
    grid-template-columns: minmax(420px, 0.9fr) minmax(560px, 1.1fr) !important;
    margin: 0 auto !important;
    max-width: 1380px !important;
    overflow: visible !important;
    width: 100% !important;
  }

  html body[data-current-view="create"][data-create-category] #createView .panel.form-panel {
    border: 1px solid #dbe5e2 !important;
    border-radius: 8px !important;
    display: grid !important;
    grid-column: 1 !important;
    grid-row: 1 !important;
    grid-template-rows: auto minmax(0, 1fr) !important;
    height: calc(100vh - 118px) !important;
    max-height: calc(100vh - 118px) !important;
    min-height: 0 !important;
    overflow: hidden !important;
    width: 100% !important;
  }

  html body[data-current-view="create"][data-create-category] #createView #createForm {
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
    min-height: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    padding: 16px 18px 92px !important;
  }

  html body[data-current-view="create"][data-create-category] #createView .desktop-create-section,
  html body[data-current-view="create"][data-create-category] #createView .field-group,
  html body[data-current-view="create"][data-create-category] #createView label,
  html body[data-current-view="create"][data-create-category] #createView .advanced-create-grid {
    max-width: none !important;
    min-width: 0 !important;
    width: 100% !important;
  }

  html body[data-current-view="create"][data-create-category] #createView .field-group,
  html body[data-current-view="create"][data-create-category] #createView .advanced-create-grid {
    display: grid !important;
    gap: 12px !important;
    grid-template-columns: 1fr !important;
  }

  html body[data-current-view="create"][data-create-category] #createView .desktop-create-type .category-tabs {
    display: grid !important;
    gap: 10px !important;
    grid-template-columns: 1fr !important;
    width: 100% !important;
  }

  html body[data-current-view="create"][data-create-category] #createView .desktop-create-type .category-card {
    align-items: center !important;
    display: grid !important;
    gap: 4px 12px !important;
    grid-template-columns: 58px minmax(0, 1fr) !important;
    grid-template-rows: auto auto !important;
    height: 74px !important;
    min-height: 74px !important;
    overflow: hidden !important;
    padding: 10px 14px !important;
    text-align: left !important;
    width: 100% !important;
    writing-mode: horizontal-tb !important;
  }

  html body[data-current-view="create"][data-create-category] #createView .desktop-create-type .category-card .module-icon,
  html body[data-current-view="create"][data-create-category] #createView .desktop-create-type .category-card i {
    align-items: center !important;
    display: inline-flex !important;
    grid-column: 1 !important;
    grid-row: 1 / 3 !important;
    height: 44px !important;
    justify-content: center !important;
    margin: 0 !important;
    width: 44px !important;
    writing-mode: horizontal-tb !important;
  }

  html body[data-current-view="create"][data-create-category] #createView .desktop-create-type .category-card strong,
  html body[data-current-view="create"][data-create-category] #createView .desktop-create-type .category-card span {
    display: block !important;
    grid-column: 2 !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    transform: none !important;
    white-space: nowrap !important;
    writing-mode: horizontal-tb !important;
  }

  html body[data-current-view="create"][data-create-category] #createView .result-panel,
  html body[data-current-view="create"][data-create-category] #createView .admin-preview-panel,
  html body[data-current-view="create"][data-create-category] #createView #taskBox,
  html body[data-current-view="create"][data-create-category] #createView #previewBackendBtn {
    display: none !important;
    height: 0 !important;
    overflow: hidden !important;
    visibility: hidden !important;
  }

  html body[data-current-view="create"][data-create-category] #createView .generated-create-side-preview {
    align-content: start !important;
    background: #fff !important;
    border: 1px solid #dbe5e2 !important;
    border-radius: 8px !important;
    display: grid !important;
    gap: 18px !important;
    grid-column: 2 !important;
    grid-row: 1 !important;
    height: calc(100vh - 118px) !important;
    justify-items: center !important;
    overflow: auto !important;
    padding: 28px !important;
    position: sticky !important;
    top: 90px !important;
    visibility: visible !important;
    width: 100% !important;
  }

  html body[data-current-view="create"][data-create-category] #createView .generated-create-side-preview .generated-phone {
    display: block !important;
    height: min(650px, calc(100vh - 238px)) !important;
    max-width: 430px !important;
    min-height: 520px !important;
    visibility: visible !important;
    width: min(430px, 78%) !important;
  }

  html body[data-current-view="create"][data-create-category] #createView .form-actions {
    background: rgba(255, 255, 255, 0.96) !important;
    border-top: 1px solid #e2ebe8 !important;
    bottom: 0 !important;
    display: grid !important;
    gap: 10px !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    margin: 0 !important;
    padding: 12px 18px !important;
    position: sticky !important;
    width: 100% !important;
    z-index: 3 !important;
  }

  html body[data-current-view="assets"] #assetsView > .workspace-grid.slim:first-of-type {
    align-items: start !important;
    display: grid !important;
    gap: 16px !important;
    grid-template-columns: minmax(420px, 0.44fr) minmax(620px, 1fr) !important;
    margin: 0 auto 18px !important;
    max-width: 1380px !important;
    width: 100% !important;
  }

  html body[data-current-view="assets"] #assetsView > .workspace-grid.slim:nth-of-type(2) {
    display: grid !important;
    gap: 16px !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    margin: 0 auto !important;
    max-width: 1380px !important;
    width: 100% !important;
  }

  html body[data-current-view="assets"] #assetsView .mobile-assets-empty,
  html body[data-current-view="assets"] #assetsView .mobile-assets-manage {
    display: none !important;
  }

  html body[data-current-view="assets"] #assetsView #assetGrid.asset-grid {
    display: grid !important;
    gap: 20px !important;
    grid-template-columns: 1fr !important;
    overflow: visible !important;
  }

  html body[data-current-view="assets"] #assetsView .asset-subgrid {
    display: grid !important;
    gap: 14px !important;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)) !important;
  }

  html body[data-current-view="assets"] #assetsView .asset-card {
    align-items: start !important;
    background: #fff !important;
    border: 1px solid #dbe5e2 !important;
    border-radius: 8px !important;
    display: grid !important;
    gap: 12px !important;
    grid-template-columns: 92px minmax(0, 1fr) !important;
    min-height: 158px !important;
    min-width: 0 !important;
    overflow: hidden !important;
    padding: 12px !important;
  }

  html body[data-current-view="assets"] #assetsView .asset-mobile-check,
  html body[data-current-view="assets"] #assetsView .asset-mobile-menu {
    display: none !important;
  }

  html body[data-current-view="assets"] #assetsView .asset-card > img {
    aspect-ratio: 1 / 1 !important;
    border-radius: 6px !important;
    height: 86px !important;
    object-fit: contain !important;
    width: 86px !important;
  }

  html body[data-current-view="assets"] #assetsView .asset-card .card-body,
  html body[data-current-view="works"] #worksView .work-card .card-body {
    display: grid !important;
    gap: 8px !important;
    min-width: 0 !important;
  }

  html body[data-current-view="works"] #worksView .work-management-panel {
    border: 1px solid #dbe5e2 !important;
    border-radius: 8px !important;
    margin: 0 auto !important;
    max-width: 1380px !important;
    min-height: calc(100vh - 332px) !important;
    overflow: hidden !important;
  }

  html body[data-current-view="works"] #worksView #worksGrid.works-grid {
    display: grid !important;
    gap: 16px !important;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)) !important;
    min-height: 220px !important;
    padding-top: 8px !important;
  }

  html body[data-current-view="works"] #worksView .work-card {
    background: #fff !important;
    border: 1px solid #dbe5e2 !important;
    border-radius: 8px !important;
    display: grid !important;
    min-width: 0 !important;
    overflow: hidden !important;
  }

  html body[data-current-view="works"] #worksView .work-cover-button {
    aspect-ratio: 4 / 3 !important;
    background: #f2f7f5 !important;
    border: 0 !important;
    display: block !important;
    overflow: hidden !important;
    width: 100% !important;
  }

  html body[data-current-view="works"] #worksView .work-cover-button img {
    height: 100% !important;
    object-fit: cover !important;
    width: 100% !important;
  }
}

@media (min-width: 981px) {
  html body[data-current-view="works"] #worksView.view.active {
    background: #f6f8fb !important;
    padding: 92px 18px 26px !important;
  }

  html body[data-current-view="works"] #worksView .works-mobile-fallback {
    display: none !important;
  }

  html body[data-current-view="works"] #worksView .works-hero {
    align-items: center !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    display: flex !important;
    justify-content: space-between !important;
    margin: 0 auto 16px !important;
    max-width: 1440px !important;
    min-height: 48px !important;
    padding: 0 8px !important;
  }

  html body[data-current-view="works"] #worksView .works-hero span,
  html body[data-current-view="works"] #worksView .works-hero p {
    display: none !important;
  }

  html body[data-current-view="works"] #worksView .works-hero h2 {
    color: #111827 !important;
    display: inline-flex !important;
    font-size: 26px !important;
    font-weight: 900 !important;
    letter-spacing: 0 !important;
    line-height: 1.2 !important;
    margin: 0 !important;
  }

  html body[data-current-view="works"] #worksView .works-hero h2::after {
    align-self: center !important;
    color: #68737d !important;
    content: "管理已生成的医美内容素材" !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    margin-left: 14px !important;
  }

  html body[data-current-view="works"] #worksView .works-hero button {
    align-items: center !important;
    background: #006b57 !important;
    border: 0 !important;
    border-radius: 8px !important;
    color: #fff !important;
    display: inline-flex !important;
    font-size: 15px !important;
    font-weight: 900 !important;
    gap: 8px !important;
    height: 42px !important;
    justify-content: center !important;
    padding: 0 18px !important;
  }

  html body[data-current-view="works"] #worksView .works-hero button::before {
    border: 1.5px solid currentColor !important;
    border-radius: 999px !important;
    content: "+" !important;
    display: inline-grid !important;
    font-size: 14px !important;
    height: 18px !important;
    line-height: 16px !important;
    place-items: center !important;
    width: 18px !important;
  }

  html body[data-current-view="works"] #worksView .works-desktop-layout {
    align-items: start !important;
    display: grid !important;
    gap: 16px !important;
    grid-template-columns: minmax(690px, 1fr) minmax(420px, 0.75fr) !important;
    margin: 0 auto !important;
    max-width: 1440px !important;
    width: 100% !important;
  }

  html body[data-current-view="works"] #worksView .work-management-panel,
  html body[data-current-view="works"] #worksView .work-detail-inline {
    background: #fff !important;
    border: 1px solid #dde5ec !important;
    border-radius: 8px !important;
    box-shadow: 0 12px 28px rgba(16, 24, 40, 0.05) !important;
    overflow: hidden !important;
  }

  html body[data-current-view="works"] #worksView .work-management-panel {
    display: grid !important;
    gap: 0 !important;
    margin: 0 !important;
    max-width: none !important;
    min-height: calc(100vh - 178px) !important;
    padding: 0 !important;
    width: 100% !important;
  }

  html body[data-current-view="works"] #worksView .work-management-panel > .panel-heading {
    align-items: center !important;
    border-bottom: 0 !important;
    display: grid !important;
    gap: 14px !important;
    grid-template-columns: minmax(0, 1fr) 280px !important;
    padding: 18px 18px 10px !important;
  }

  html body[data-current-view="works"] #worksView .works-heading-title {
    align-items: baseline !important;
    display: flex !important;
    gap: 12px !important;
    min-width: 0 !important;
  }

  html body[data-current-view="works"] #worksView .works-heading-title h2 {
    color: #111827 !important;
    font-size: 20px !important;
    font-weight: 900 !important;
    letter-spacing: 0 !important;
    margin: 0 !important;
  }

  html body[data-current-view="works"] #worksView .works-heading-title #workCount {
    color: #64748b !important;
    font-size: 14px !important;
    font-weight: 700 !important;
  }

  html body[data-current-view="works"] #worksView .works-search-field {
    align-items: center !important;
    background: #fff !important;
    border: 1px solid #dbe4eb !important;
    border-radius: 7px !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 26px !important;
    height: 36px !important;
    padding: 0 9px 0 12px !important;
  }

  html body[data-current-view="works"] #worksView .works-search-field input {
    background: transparent !important;
    border: 0 !important;
    color: #111827 !important;
    font-size: 13px !important;
    height: 100% !important;
    outline: 0 !important;
    padding: 0 !important;
    width: 100% !important;
  }

  html body[data-current-view="works"] #worksView .works-search-field span {
    color: #475569 !important;
    font-size: 18px !important;
    text-align: center !important;
  }

  html body[data-current-view="works"] #worksView .list-toolbar {
    align-items: center !important;
    border-bottom: 1px solid #e5edf3 !important;
    display: grid !important;
    gap: 12px !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    margin: 0 !important;
    padding: 8px 18px 12px !important;
  }

  html body[data-current-view="works"] #worksView .filter-tabs {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    min-width: 0 !important;
  }

  html body[data-current-view="works"] #worksView .filter-chip {
    align-items: center !important;
    background: #fff !important;
    border: 1px solid #d8e2ea !important;
    border-radius: 7px !important;
    color: #334155 !important;
    display: inline-flex !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    gap: 6px !important;
    height: 32px !important;
    padding: 0 12px !important;
    white-space: nowrap !important;
  }

  html body[data-current-view="works"] #worksView .filter-chip span {
    color: inherit !important;
    font-size: 12px !important;
    font-weight: 900 !important;
  }

  html body[data-current-view="works"] #worksView .filter-chip.active {
    background: #00715d !important;
    border-color: #00715d !important;
    color: #fff !important;
  }

  html body[data-current-view="works"] #worksView .works-bulk-actions {
    display: flex !important;
    gap: 8px !important;
  }

  html body[data-current-view="works"] #worksView .works-bulk-actions button {
    border-radius: 7px !important;
    font-size: 13px !important;
    font-weight: 900 !important;
    height: 34px !important;
    padding: 0 12px !important;
    white-space: nowrap !important;
  }

  html body[data-current-view="works"] #worksView #worksGrid.works-grid {
    align-items: start !important;
    display: grid !important;
    gap: 12px !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    min-height: 420px !important;
    padding: 14px 14px 8px !important;
  }

  html body[data-current-view="works"] #worksView .work-card {
    background: #fff !important;
    border: 1px solid #dce6ed !important;
    border-radius: 8px !important;
    box-shadow: none !important;
    display: grid !important;
    gap: 10px !important;
    align-items: start !important;
    grid-template-columns: 132px minmax(0, 1fr) !important;
    height: 188px !important;
    max-height: 188px !important;
    min-height: 188px !important;
    overflow: hidden !important;
    padding: 10px !important;
    position: relative !important;
  }

  html body[data-current-view="works"] #worksView .work-card.is-active {
    border-color: #00715d !important;
    box-shadow: 0 0 0 1px #00715d inset !important;
  }

  html body[data-current-view="works"] #worksView .select-check {
    height: 18px !important;
    left: 10px !important;
    position: absolute !important;
    top: 10px !important;
    width: 18px !important;
    z-index: 2 !important;
  }

  html body[data-current-view="works"] #worksView .select-check input {
    accent-color: #00715d !important;
    height: 18px !important;
    margin: 0 !important;
    width: 18px !important;
  }

  html body[data-current-view="works"] #worksView .work-cover-button {
    align-self: stretch !important;
    aspect-ratio: auto !important;
    background: #f3f7f5 !important;
    border: 0 !important;
    border-radius: 6px !important;
    display: block !important;
    grid-column: 1 !important;
    grid-row: 1 !important;
    height: 168px !important;
    margin: 0 !important;
    overflow: hidden !important;
    padding: 0 !important;
    width: 132px !important;
  }

  html body[data-current-view="works"] #worksView .work-cover-button img {
    height: 100% !important;
    object-fit: cover !important;
    width: 100% !important;
  }

  html body[data-current-view="works"] #worksView .work-card .card-body {
    align-content: start !important;
    align-self: start !important;
    display: grid !important;
    gap: 6px !important;
    grid-column: 2 !important;
    grid-row: 1 !important;
    min-width: 0 !important;
    max-height: 168px !important;
    overflow: hidden !important;
    padding: 2px 0 0 !important;
  }

  html body[data-current-view="works"] #worksView .work-type-badge,
  html body[data-current-view="works"] #worksView .status-pill {
    border-radius: 999px !important;
    display: inline-flex !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    height: 22px !important;
    justify-content: center !important;
    line-height: 22px !important;
    padding: 0 9px !important;
    width: fit-content !important;
  }

  html body[data-current-view="works"] #worksView .work-type-badge {
    background: #d9f4ea !important;
    color: #00715d !important;
  }

  html body[data-current-view="works"] #worksView .work-title-button {
    background: transparent !important;
    border: 0 !important;
    color: #111827 !important;
    display: block !important;
    font-size: 15px !important;
    font-weight: 900 !important;
    letter-spacing: 0 !important;
    line-height: 1.25 !important;
    max-width: 100% !important;
    overflow: hidden !important;
    padding: 0 !important;
    text-align: left !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  html body[data-current-view="works"] #worksView .card-meta,
  html body[data-current-view="works"] #worksView .work-card-detail {
    color: #64748b !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 1.35 !important;
  }

  html body[data-current-view="works"] #worksView .card-meta {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  html body[data-current-view="works"] #worksView .work-card-detail {
    display: grid !important;
    gap: 4px !important;
    grid-template-columns: auto minmax(0, 1fr) !important;
  }

  html body[data-current-view="works"] #worksView .work-card-detail strong {
    color: #334155 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  html body[data-current-view="works"] #worksView .work-progress-line {
    background: #e6eef3 !important;
    border-radius: 999px !important;
    height: 5px !important;
    overflow: hidden !important;
    width: 88px !important;
  }

  html body[data-current-view="works"] #worksView .work-progress-line i {
    background: #00715d !important;
    display: block !important;
    height: 100% !important;
    width: var(--work-progress, 0%) !important;
  }

  html body[data-current-view="works"] #worksView .status-pill {
    background: #dff7ed !important;
    color: #00715d !important;
  }

  html body[data-current-view="works"] #worksView .work-card .card-actions {
    display: grid !important;
    gap: 8px !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    margin-top: 2px !important;
  }

  html body[data-current-view="works"] #worksView .work-card .card-actions button,
  html body[data-current-view="works"] #worksView .work-card .card-actions a {
    align-items: center !important;
    border-radius: 6px !important;
    display: inline-flex !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    height: 30px !important;
    justify-content: center !important;
    min-width: 0 !important;
    padding: 0 6px !important;
    text-decoration: none !important;
  }

  html body[data-current-view="works"] #worksView .work-card .danger-button {
    background: #fff1f3 !important;
    border-color: #ffc9d2 !important;
    color: #e11d48 !important;
  }

  html body[data-current-view="works"] #worksView .works-load-more {
    align-items: center !important;
    display: flex !important;
    gap: 12px !important;
    grid-column: 1 / -1 !important;
    justify-content: flex-end !important;
    padding: 4px 0 !important;
  }

  html body[data-current-view="works"] #worksView .works-pagination {
    align-items: center !important;
    border-top: 1px solid #e5edf3 !important;
    display: flex !important;
    gap: 8px !important;
    justify-content: flex-end !important;
    min-height: 52px !important;
    padding: 10px 16px !important;
  }

  html body[data-current-view="works"] #worksView .works-pagination span {
    color: #475569 !important;
    font-size: 13px !important;
    font-weight: 700 !important;
  }

  html body[data-current-view="works"] #worksView .works-pagination button {
    background: #fff !important;
    border: 1px solid #d8e2ea !important;
    border-radius: 6px !important;
    color: #334155 !important;
    font-weight: 800 !important;
    height: 32px !important;
    min-width: 32px !important;
  }

  html body[data-current-view="works"] #worksView .works-pagination button.is-active {
    background: #00715d !important;
    border-color: #00715d !important;
    color: #fff !important;
  }

  html body[data-current-view="works"] #worksView .work-detail-inline {
    display: block !important;
    max-height: calc(100vh - 118px) !important;
    min-height: calc(100vh - 178px) !important;
    overflow: auto !important;
    padding: 0 !important;
    position: sticky !important;
    top: 92px !important;
  }

  html body[data-current-view="works"] #worksView .work-detail-head {
    align-items: center !important;
    border-bottom: 1px solid #e1e8ee !important;
    display: flex !important;
    justify-content: space-between !important;
    min-height: 64px !important;
    padding: 0 18px !important;
  }

  html body[data-current-view="works"] #worksView .work-detail-head h2 {
    color: #111827 !important;
    font-size: 20px !important;
    font-weight: 900 !important;
    letter-spacing: 0 !important;
    line-height: 1.2 !important;
    margin: 0 !important;
    max-width: calc(100% - 40px) !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  html body[data-current-view="works"] #worksView .work-detail-close {
    background: transparent !important;
    border: 0 !important;
    color: #334155 !important;
    font-size: 22px !important;
    height: 34px !important;
    width: 34px !important;
  }

  html body[data-current-view="works"] #worksView .work-detail-section {
    border-bottom: 1px solid #edf2f6 !important;
    display: grid !important;
    gap: 12px !important;
    padding: 16px 18px !important;
  }

  html body[data-current-view="works"] #worksView .work-detail-section-title {
    align-items: center !important;
    color: #111827 !important;
    display: flex !important;
    font-size: 15px !important;
    font-weight: 900 !important;
    justify-content: space-between !important;
    line-height: 1.2 !important;
    margin: 0 !important;
  }

  html body[data-current-view="works"] #worksView .work-detail-section-title button {
    background: #fff !important;
    border: 1px solid #dbe4eb !important;
    border-radius: 6px !important;
    color: #00715d !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    height: 28px !important;
    padding: 0 10px !important;
  }

  html body[data-current-view="works"] #worksView .work-detail-images {
    display: grid !important;
    gap: 8px !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }

  html body[data-current-view="works"] #worksView .work-detail-image {
    aspect-ratio: 0.76 / 1 !important;
    background: #f4f7f6 !important;
    border: 1px solid transparent !important;
    border-radius: 8px !important;
    display: block !important;
    overflow: hidden !important;
    padding: 0 !important;
  }

  html body[data-current-view="works"] #worksView .work-detail-image.is-active {
    border-color: #00715d !important;
    box-shadow: 0 0 0 1px #00715d inset !important;
  }

  html body[data-current-view="works"] #worksView .work-detail-image img {
    height: 100% !important;
    object-fit: cover !important;
    width: 100% !important;
  }

  html body[data-current-view="works"] #worksView .work-detail-video-section .work-detail-section-title > span:last-child {
    color: #64748b !important;
    font-size: 12px !important;
    font-weight: 800 !important;
  }

  html body[data-current-view="works"] #worksView .work-detail-videos {
    display: grid !important;
    gap: 10px !important;
  }

  html body[data-current-view="works"] #worksView .work-detail-video-card {
    background: #f8fbfa !important;
    border: 1px solid #dfe7e5 !important;
    border-radius: 8px !important;
    display: grid !important;
    gap: 12px !important;
    grid-template-columns: minmax(160px, 220px) minmax(0, 1fr) !important;
    overflow: hidden !important;
    padding: 10px !important;
  }

  html body[data-current-view="works"] #worksView .work-detail-video-card video {
    aspect-ratio: 9 / 16 !important;
    background: #0f172a !important;
    border-radius: 7px !important;
    display: block !important;
    max-height: 320px !important;
    object-fit: contain !important;
    width: 100% !important;
  }

  html body[data-current-view="works"] #worksView .work-detail-video-meta {
    align-content: center !important;
    display: grid !important;
    gap: 8px !important;
    min-width: 0 !important;
  }

  html body[data-current-view="works"] #worksView .work-detail-video-meta strong {
    color: #111827 !important;
    font-size: 14px !important;
    font-weight: 900 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  html body[data-current-view="works"] #worksView .work-detail-video-meta span {
    color: #64748b !important;
    font-size: 12px !important;
    font-weight: 800 !important;
  }

  html body[data-current-view="works"] #worksView .work-detail-video-meta div {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
  }

  html body[data-current-view="works"] #worksView .work-detail-video-meta .download-link {
    align-items: center !important;
    background: #00664f !important;
    border-radius: 6px !important;
    color: #fff !important;
    display: inline-flex !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    height: 32px !important;
    padding: 0 12px !important;
    text-decoration: none !important;
  }

  html body[data-current-view="works"] #worksView .work-detail-video-meta .download-link.secondary {
    background: #fff !important;
    border: 1px solid #dce4e2 !important;
    color: #334155 !important;
  }

  html body[data-current-view="works"] #worksView .work-detail-param-grid,
  html body[data-current-view="works"] #worksView .work-detail-info-grid {
    border: 1px solid #e0e7ee !important;
    border-radius: 8px !important;
    display: grid !important;
    gap: 0 !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    overflow: hidden !important;
  }

  html body[data-current-view="works"] #worksView .work-detail-param-grid div,
  html body[data-current-view="works"] #worksView .work-detail-info-grid div {
    display: grid !important;
    gap: 5px !important;
    grid-template-columns: 84px minmax(0, 1fr) !important;
    padding: 12px !important;
  }

  html body[data-current-view="works"] #worksView .work-detail-param-grid span,
  html body[data-current-view="works"] #worksView .work-detail-info-grid span {
    color: #64748b !important;
    font-size: 12px !important;
    font-weight: 700 !important;
  }

  html body[data-current-view="works"] #worksView .work-detail-param-grid strong,
  html body[data-current-view="works"] #worksView .work-detail-info-grid strong {
    color: #1f2937 !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  html body[data-current-view="works"] #worksView .work-copy-box {
    border: 1px solid #e0e7ee !important;
    border-radius: 8px !important;
    color: #1f2937 !important;
    font-size: 14px !important;
    line-height: 1.75 !important;
    min-height: 118px !important;
    padding: 14px !important;
    white-space: pre-wrap !important;
  }

  html body[data-current-view="works"] #worksView .work-detail-actions {
    display: grid !important;
    gap: 10px !important;
    grid-template-columns: repeat(auto-fit, minmax(116px, 1fr)) !important;
    padding: 16px 18px 20px !important;
  }

  html body[data-current-view="works"] #worksView .work-detail-actions button,
  html body[data-current-view="works"] #worksView .work-detail-actions a {
    align-items: center !important;
    border-radius: 8px !important;
    display: inline-flex !important;
    font-size: 14px !important;
    font-weight: 900 !important;
    height: 42px !important;
    justify-content: center !important;
    min-width: 0 !important;
    padding: 0 12px !important;
    text-decoration: none !important;
    white-space: nowrap !important;
  }

  html body[data-current-view="works"] #worksView .work-detail-empty,
  html body[data-current-view="works"] #worksView .work-detail-loading {
    align-content: center !important;
    color: #64748b !important;
    display: grid !important;
    gap: 10px !important;
    min-height: 360px !important;
    padding: 24px !important;
    text-align: center !important;
  }

  html body[data-current-view="works"] #worksView .work-detail-empty strong,
  html body[data-current-view="works"] #worksView .work-detail-loading strong {
    color: #111827 !important;
    font-size: 18px !important;
    font-weight: 900 !important;
  }
}

@media (min-width: 981px) {
  html body[data-current-view="create"] #createView.view.active {
    background: #f6f8fb !important;
    padding: 82px 16px 26px !important;
  }

  html body[data-current-view="create"] #createView .section-close-bar {
    align-items: center !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    height: auto !important;
    margin: 0 auto 12px !important;
    max-width: 1440px !important;
    min-height: 42px !important;
    overflow: visible !important;
    padding: 0 !important;
    position: static !important;
    visibility: visible !important;
    width: 100% !important;
  }

  html body[data-current-view="create"] #createView .section-exit-title {
    align-items: center !important;
    background: transparent !important;
    border: 0 !important;
    color: #111827 !important;
    display: inline-flex !important;
    font-size: 22px !important;
    font-weight: 900 !important;
    gap: 14px !important;
    height: 42px !important;
    justify-content: flex-start !important;
    letter-spacing: 0 !important;
    line-height: 1.2 !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: left !important;
    width: fit-content !important;
  }

  html body[data-current-view="create"] #createView .section-exit-title::before {
    align-items: center !important;
    background: #fff !important;
    border: 1px solid #d9e3ea !important;
    border-radius: 7px !important;
    color: #64748b !important;
    content: "‹" !important;
    display: inline-grid !important;
    font-size: 30px !important;
    font-weight: 400 !important;
    height: 40px !important;
    line-height: 1 !important;
    place-items: center !important;
    width: 40px !important;
  }

  html body[data-current-view="create"] #createView .create-close-button {
    align-items: center !important;
    background: #fff !important;
    border: 1px solid #dbe4eb !important;
    border-radius: 7px !important;
    color: #334155 !important;
    display: inline-flex !important;
    visibility: visible !important;
    font-size: 14px !important;
    font-weight: 900 !important;
    gap: 6px !important;
    height: 40px !important;
    justify-content: center !important;
    padding: 0 16px !important;
  }

  html body[data-current-view="create"] #createView .create-close-button::before {
    content: "×" !important;
    font-size: 20px !important;
    font-weight: 400 !important;
    line-height: 1 !important;
  }

  html body[data-current-view="create"][data-create-category] #createView .workspace-grid {
    align-items: start !important;
    display: grid !important;
    gap: 16px !important;
    grid-template-columns: minmax(520px, 0.86fr) minmax(620px, 1.14fr) !important;
    margin: 0 auto !important;
    max-width: 1440px !important;
    min-height: 0 !important;
    overflow: visible !important;
    width: 100% !important;
  }

  html body[data-current-view="create"][data-create-category] #createView .panel.form-panel,
  html body[data-current-view="create"][data-create-category] #createView .generated-create-side-preview {
    background: #fff !important;
    border: 1px solid #dde6ed !important;
    border-radius: 8px !important;
    box-shadow: 0 12px 28px rgba(16, 24, 40, 0.05) !important;
    overflow: hidden !important;
  }

  html body[data-current-view="create"][data-create-category] #createView .panel.form-panel {
    display: grid !important;
    grid-template-rows: auto minmax(0, 1fr) !important;
    height: auto !important;
    max-height: none !important;
    min-height: calc(100vh - 152px) !important;
  }

  html body[data-current-view="create"][data-create-category] #createView .form-panel > .panel-heading {
    align-items: center !important;
    border-bottom: 0 !important;
    display: flex !important;
    justify-content: flex-start !important;
    gap: 10px !important;
    min-height: 58px !important;
    padding: 20px 22px 6px !important;
  }

  html body[data-current-view="create"][data-create-category] #createView .form-panel > .panel-heading h2 {
    color: #111827 !important;
    font-size: 22px !important;
    font-weight: 900 !important;
    letter-spacing: 0 !important;
    margin: 0 !important;
  }

  html body[data-current-view="create"][data-create-category] #createView #categoryBadge {
    background: #dff5ec !important;
    border: 0 !important;
    border-radius: 999px !important;
    color: #00715d !important;
    font-size: 13px !important;
    font-weight: 900 !important;
    padding: 5px 10px !important;
  }

  html body[data-current-view="create"][data-create-category] #createView #createForm {
    display: grid !important;
    gap: 18px !important;
    overflow: visible !important;
    padding: 16px 22px 22px !important;
  }

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

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

  html body[data-current-view="create"][data-create-category] #createView #createForm > .field-group.comparison-field {
    order: 3 !important;
  }

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

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

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

  html body[data-current-view="create"][data-create-category] #createView .desktop-create-section-title,
  html body[data-current-view="create"][data-create-category] #createView .advanced-create-title {
    color: #111827 !important;
    font-size: 16px !important;
    font-weight: 900 !important;
    letter-spacing: 0 !important;
    margin: 0 0 12px !important;
  }

  html body[data-current-view="create"][data-create-category] #createView .desktop-create-type .category-tabs {
    display: grid !important;
    gap: 12px !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    width: 100% !important;
  }

  html body[data-current-view="create"][data-create-category] #createView .desktop-create-type .category-card {
    align-items: center !important;
    background: #fff !important;
    border: 1px solid #dfe7ee !important;
    border-radius: 7px !important;
    color: #334155 !important;
    display: grid !important;
    gap: 4px 10px !important;
    grid-template-columns: 44px minmax(0, 1fr) !important;
    grid-template-rows: auto auto !important;
    height: 82px !important;
    min-height: 82px !important;
    overflow: hidden !important;
    padding: 12px !important;
  }

  html body[data-current-view="create"][data-create-category] #createView .desktop-create-type .category-card.active {
    border-color: #00715d !important;
    box-shadow: 0 0 0 1px #00715d inset !important;
  }

  html body[data-current-view="create"][data-create-category] #createView .desktop-create-type .category-card.active::after {
    align-items: center !important;
    background: #00715d !important;
    border-radius: 999px !important;
    color: #fff !important;
    content: "✓" !important;
    display: inline-grid !important;
    font-size: 11px !important;
    height: 18px !important;
    place-items: center !important;
    position: absolute !important;
    right: 8px !important;
    top: 8px !important;
    width: 18px !important;
  }

  html body[data-current-view="create"][data-create-category] #createView .desktop-create-type .category-card i {
    align-items: center !important;
    background: #eef3f7 !important;
    border: 0 !important;
    border-radius: 8px !important;
    color: #94a3b8 !important;
    display: inline-flex !important;
    grid-column: 1 !important;
    grid-row: 1 / 3 !important;
    height: 38px !important;
    justify-content: center !important;
    width: 38px !important;
  }

  html body[data-current-view="create"][data-create-category] #createView .desktop-create-type .category-card.active i {
    background: #e3f5ee !important;
    color: #00715d !important;
  }

  html body[data-current-view="create"][data-create-category] #createView .desktop-create-type .category-card strong,
  html body[data-current-view="create"][data-create-category] #createView .desktop-create-type .category-card span {
    grid-column: 2 !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

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

  html body[data-current-view="create"][data-create-category] #createView .desktop-create-type .category-card span {
    color: #64748b !important;
    font-size: 12px !important;
    font-weight: 700 !important;
  }

  html body[data-current-view="create"][data-create-category] #createView .desktop-create-basic,
  html body[data-current-view="create"][data-create-category] #createView .field-group,
  html body[data-current-view="create"][data-create-category] #createView .advanced-create-fields,
  html body[data-current-view="create"][data-create-category] #createView .desktop-create-note {
    background: transparent !important;
    border: 0 !important;
    display: grid !important;
    gap: 12px !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  html body[data-current-view="create"][data-create-category] #createView .desktop-create-basic {
    gap: 14px !important;
  }

  html body[data-current-view="create"][data-create-category] #createView label {
    align-items: start !important;
    display: grid !important;
    gap: 10px !important;
    grid-template-columns: 128px minmax(0, 1fr) !important;
    margin: 0 !important;
    min-width: 0 !important;
    width: 100% !important;
  }

  html body[data-current-view="create"][data-create-category] #createView .hidden-field,
  html body[data-current-view="create"][data-create-category] #createView label.hidden-field,
  html body[data-current-view="create"][data-create-category] #createView .field-group.hidden-field,
  html body[data-current-view="create"][data-create-category] #createView .project-field.hidden-field,
  html body[data-current-view="create"][data-create-category] #createView .comparison-field.hidden-field,
  html body[data-current-view="create"][data-create-category] #createView .chat-field.hidden-field,
  html body[data-current-view="create"][data-create-category] #createView .effect-field.hidden-field {
    display: none !important;
    height: 0 !important;
    margin: 0 !important;
    min-height: 0 !important;
    overflow: hidden !important;
    padding: 0 !important;
    visibility: hidden !important;
  }

  html body[data-current-view="create"][data-create-category] #createView label > span:first-child {
    color: #64748b !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    line-height: 36px !important;
  }

  html body[data-current-view="create"][data-create-category] #createView input,
  html body[data-current-view="create"][data-create-category] #createView select,
  html body[data-current-view="create"][data-create-category] #createView textarea {
    background: #fff !important;
    border: 1px solid #dce5ec !important;
    border-radius: 6px !important;
    color: #1f2937 !important;
    font-size: 14px !important;
    min-height: 36px !important;
    padding: 0 12px !important;
    width: 100% !important;
  }

  html body[data-current-view="create"][data-create-category] #createView textarea {
    line-height: 1.55 !important;
    min-height: 72px !important;
    padding: 10px 12px !important;
    resize: vertical !important;
  }

  html body[data-current-view="create"][data-create-category] #createView label:has(.choice-picker:not(:empty)) > select {
    display: none !important;
  }

  html body[data-current-view="create"][data-create-category] #createView .choice-picker {
    align-items: center !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 8px !important;
    min-width: 0 !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    padding-bottom: 2px !important;
  }

  html body[data-current-view="create"][data-create-category] #createView .choice-picker button {
    background: #fff !important;
    border: 1px solid #dce5ec !important;
    border-radius: 6px !important;
    color: #334155 !important;
    flex: 0 0 auto !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    height: 34px !important;
    max-width: none !important;
    min-width: 0 !important;
    padding: 0 18px !important;
    width: auto !important;
    white-space: nowrap !important;
  }

  html body[data-current-view="create"][data-create-category] #createView .choice-picker:not(.choice-picker-compact) button {
    inline-size: max-content !important;
    max-width: none !important;
    min-inline-size: 72px !important;
    min-width: 72px !important;
    width: max-content !important;
  }

  html body[data-current-view="create"][data-create-category] #createView .choice-picker-compact {
    display: grid !important;
    gap: 8px !important;
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  }

  html body[data-current-view="create"][data-create-category] #createView .choice-picker-compact button {
    padding: 0 8px !important;
    width: 100% !important;
  }

  html body[data-current-view="create"][data-create-category] #createView .choice-picker[data-choice-for="count"] button:first-child {
    display: none !important;
  }

  html body[data-current-view="create"][data-create-category] #createView .choice-picker button.active,
  html body[data-current-view="create"][data-create-category] #createView .choice-picker button.is-active,
  html body[data-current-view="create"][data-create-category] #createView .choice-picker button[aria-pressed="true"] {
    background: #f2fbf7 !important;
    border-color: #00715d !important;
    box-shadow: 0 0 0 1px #00715d inset !important;
    color: #00715d !important;
  }

  html body[data-current-view="create"][data-create-category] #createView .advanced-create-fields {
    border-top: 1px solid #edf2f6 !important;
    padding-top: 8px !important;
  }

  html body[data-current-view="create"][data-create-category] #createView .form-actions {
    background: transparent !important;
    border: 0 !important;
    bottom: auto !important;
    display: grid !important;
    gap: 12px !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    padding: 0 !important;
    position: static !important;
    width: 100% !important;
  }

  html body[data-current-view="create"][data-create-category] #createView .form-actions #generateBtn {
    grid-column: 1 / -1 !important;
  }

  html body[data-current-view="create"][data-create-category] #createView .form-actions button {
    border-radius: 7px !important;
    font-size: 15px !important;
    font-weight: 900 !important;
    height: 42px !important;
  }

  html body[data-current-view="create"][data-create-category] #createView .generated-create-side-preview {
    align-content: start !important;
    display: grid !important;
    gap: 18px !important;
    height: auto !important;
    max-height: none !important;
    min-height: calc(100vh - 152px) !important;
    overflow: visible !important;
    padding: 20px !important;
    position: relative !important;
    position: static !important;
    width: 100% !important;
  }

  html body[data-current-view="create"][data-create-category] #createView .generated-preview-tabs {
    align-items: center !important;
    display: flex !important;
    gap: 28px !important;
    margin: 0 !important;
  }

  html body[data-current-view="create"][data-create-category] #createView .generated-preview-tabs strong,
  html body[data-current-view="create"][data-create-category] #createView .generated-preview-tabs span {
    color: #111827 !important;
    font-size: 20px !important;
    font-weight: 900 !important;
    padding: 0 0 10px !important;
  }

  html body[data-current-view="create"][data-create-category] #createView .generated-preview-tabs strong {
    border-bottom: 2px solid #00715d !important;
  }

  html body[data-current-view="create"][data-create-category] #createView .generated-preview-tabs span {
    color: #64748b !important;
    font-size: 14px !important;
    font-weight: 800 !important;
  }

  html body[data-current-view="create"][data-create-category] #createView .generated-device-switch {
    display: flex !important;
    gap: 8px !important;
    justify-content: flex-end !important;
    margin: 0 !important;
    position: absolute !important;
    right: 20px !important;
    top: 20px !important;
    z-index: 3 !important;
  }

  html body[data-current-view="create"][data-create-category] #createView .generated-device-switch button {
    background: #fff !important;
    border: 1px solid #dce5ec !important;
    border-radius: 6px !important;
    color: #475569 !important;
    font-size: 13px !important;
    font-weight: 900 !important;
    height: 34px !important;
    padding: 0 14px !important;
  }

  html body[data-current-view="create"][data-create-category] #createView .generated-device-switch button.active {
    background: #f2fbf7 !important;
    border-color: #00715d !important;
    color: #00715d !important;
  }

  html body[data-current-view="create"][data-create-category] #createView .create-comparison-preview {
    display: grid !important;
    gap: 14px !important;
  }

  html body[data-current-view="create"][data-create-category] #createView .create-preview-stage {
    background: #eef2f5 !important;
    border-radius: 8px !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    height: clamp(390px, 48vw, 560px) !important;
    overflow: hidden !important;
    position: relative !important;
  }

  html body[data-current-view="create"][data-create-category] #createView .create-preview-pane {
    background:
      radial-gradient(circle at 50% 34%, rgba(226, 232, 240, 0.9), transparent 120px),
      linear-gradient(135deg, #edf2f6, #f8fafc) !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
    min-width: 0 !important;
    position: relative !important;
  }

  html body[data-current-view="create"][data-create-category] #createView .create-preview-pane.has-real-image {
    background-size: cover !important;
  }

  html body[data-current-view="create"][data-create-category] #createView .create-preview-pane span {
    background: rgba(255, 255, 255, 0.86) !important;
    border-radius: 999px !important;
    color: #334155 !important;
    font-size: 13px !important;
    font-weight: 900 !important;
    left: 26px !important;
    padding: 8px 18px !important;
    position: absolute !important;
    top: 20px !important;
  }

  html body[data-current-view="create"][data-create-category] #createView .create-preview-divider {
    background: rgba(255, 255, 255, 0.9) !important;
    height: 100% !important;
    left: 50% !important;
    position: absolute !important;
    top: 0 !important;
    transform: translateX(-50%) !important;
    width: 2px !important;
    z-index: 2 !important;
  }

  html body[data-current-view="create"][data-create-category] #createView .create-preview-divider b {
    align-items: center !important;
    background: #fff !important;
    border-radius: 999px !important;
    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.16) !important;
    color: #0f172a !important;
    display: inline-flex !important;
    font-size: 18px !important;
    height: 42px !important;
    justify-content: center !important;
    left: 50% !important;
    position: absolute !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 42px !important;
  }

  html body[data-current-view="create"][data-create-category] #createView .create-preview-tags {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
  }

  html body[data-current-view="create"][data-create-category] #createView .create-preview-tags span {
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 6px !important;
    color: #64748b !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    padding: 7px 10px !important;
  }

  html body[data-current-view="create"][data-create-category] #createView .create-preview-tags b {
    color: #334155 !important;
  }

  html body[data-current-view="create"][data-create-category] #createView .generated-preview-note {
    color: #475569 !important;
    font-size: 14px !important;
    line-height: 1.65 !important;
    margin: 0 !important;
  }

  html body[data-current-view="create"][data-create-category] #createView .create-task-panel {
    border-top: 1px solid #edf2f6 !important;
    display: grid !important;
    gap: 12px !important;
    padding-top: 14px !important;
  }

  html body[data-current-view="create"][data-create-category] #createView .create-task-panel h3 {
    color: #111827 !important;
    font-size: 16px !important;
    font-weight: 900 !important;
    margin: 0 !important;
  }

  html body[data-current-view="create"][data-create-category] #createView .generated-create-side-preview #taskBox {
    background: #fff !important;
    border: 1px solid #dfe7ee !important;
    border-radius: 8px !important;
    display: block !important;
    height: auto !important;
    min-height: 104px !important;
    overflow: visible !important;
    padding: 0 !important;
    visibility: visible !important;
  }

  html body[data-current-view="create"][data-create-category] #createView .create-task-empty {
    align-items: center !important;
    display: grid !important;
    gap: 14px !important;
    grid-template-columns: 52px minmax(0, 1fr) !important;
    padding: 18px !important;
  }

  html body[data-current-view="create"][data-create-category] #createView .create-task-empty i {
    background: #dff5ec !important;
    border-radius: 999px !important;
    height: 46px !important;
    width: 46px !important;
  }

  html body[data-current-view="create"][data-create-category] #createView .create-task-empty strong {
    color: #111827 !important;
    display: block !important;
    font-size: 16px !important;
    font-weight: 900 !important;
    margin-bottom: 6px !important;
  }

  html body[data-current-view="create"][data-create-category] #createView .create-task-empty span {
    color: #64748b !important;
    font-size: 14px !important;
    font-weight: 700 !important;
  }

  html body[data-current-view="create"][data-create-category] #createView #createForm .choice-picker:not(.choice-picker-compact) {
    align-items: center !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 8px !important;
    max-height: 42px !important;
    min-height: 36px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    white-space: nowrap !important;
  }

  html body[data-current-view="create"][data-create-category] #createView #createForm .choice-picker:not(.choice-picker-compact) > button {
    align-items: center !important;
    display: inline-flex !important;
    flex: 0 0 auto !important;
    height: 34px !important;
    justify-content: center !important;
    max-width: none !important;
    min-width: 72px !important;
    width: max-content !important;
    white-space: nowrap !important;
  }

  html body[data-current-view="create"][data-create-category] #createView > .workspace-grid {
    align-items: start !important;
    display: flex !important;
    gap: 16px !important;
    grid-template-columns: none !important;
    height: calc(100vh - 118px) !important;
    max-width: 1380px !important;
    min-width: 0 !important;
    width: 100% !important;
  }

  html body[data-current-view="create"][data-create-category] #createView > .workspace-grid > .panel.form-panel {
    flex: 0 0 480px !important;
    grid-column: 1 !important;
    height: calc(100vh - 118px) !important;
    max-height: calc(100vh - 118px) !important;
    min-width: 0 !important;
    overflow: hidden !important;
    width: 480px !important;
  }

  html body[data-current-view="create"][data-create-category] #createView > .workspace-grid > .generated-create-side-preview {
    flex: 1 1 auto !important;
    grid-column: 2 !important;
    height: calc(100vh - 118px) !important;
    justify-items: stretch !important;
    max-height: calc(100vh - 118px) !important;
    min-width: 0 !important;
    overflow-y: auto !important;
    width: auto !important;
  }

  html body[data-current-view="create"][data-create-category] #createView > .workspace-grid > .panel.form-panel > #createForm {
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
    min-height: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }

  html body[data-current-view="create"][data-create-category] #createView > .workspace-grid > .panel.form-panel > #createForm > * {
    flex: 0 0 auto !important;
    min-width: 0 !important;
  }

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

  html body[data-current-view="create"][data-create-category] #createView .desktop-create-type .category-card {
    display: grid !important;
    grid-template-columns: 32px minmax(0, 1fr) !important;
    grid-template-rows: auto auto !important;
    height: 62px !important;
    min-height: 62px !important;
    padding: 8px 10px !important;
  }

  html body[data-current-view="create"][data-create-category] #createView .desktop-create-type .category-card i {
    grid-column: 1 !important;
    grid-row: 1 / 3 !important;
    height: 28px !important;
    width: 28px !important;
  }

  html body[data-current-view="create"][data-create-category] #createView .desktop-create-type .category-card strong,
  html body[data-current-view="create"][data-create-category] #createView .desktop-create-type .category-card span {
    grid-column: 2 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
}

/* 2026-06-06 admin create prompt preview restore. */
html body[data-current-view="create"][data-create-category] #createView #previewBackendBtn:not(.hidden-field) {
  align-items: center !important;
  display: inline-flex !important;
  height: auto !important;
  justify-content: center !important;
  min-height: 44px !important;
  overflow: visible !important;
  visibility: visible !important;
}

html body[data-current-view="create"][data-create-category] #createView .result-panel.admin-preview-panel:not(.hidden-field) {
  background: #ffffff !important;
  border: 1px solid rgba(20, 28, 28, 0.10) !important;
  border-radius: 8px !important;
  box-shadow: 0 16px 42px rgba(15, 23, 42, 0.08) !important;
  display: grid !important;
  gap: 12px !important;
  grid-column: 1 / -1 !important;
  height: auto !important;
  margin: 0 !important;
  max-width: none !important;
  min-height: 0 !important;
  overflow: visible !important;
  padding: 16px !important;
  visibility: visible !important;
  width: 100% !important;
}

html body[data-current-view="create"][data-create-category] #createView .result-panel.admin-preview-panel:not(.hidden-field) #taskBox {
  background: rgba(248, 250, 252, 0.88) !important;
  border: 1px solid rgba(20, 28, 28, 0.08) !important;
  border-radius: 8px !important;
  display: grid !important;
  gap: 12px !important;
  height: auto !important;
  max-height: 620px !important;
  min-height: 120px !important;
  overflow: auto !important;
  padding: 12px !important;
  visibility: visible !important;
}

html body[data-current-view="create"][data-create-category] #createView .backend-preview-item {
  background: #ffffff !important;
  border: 1px solid rgba(20, 28, 28, 0.08) !important;
  border-radius: 8px !important;
  display: grid !important;
  gap: 8px !important;
  overflow: hidden !important;
  padding: 12px !important;
}

html body[data-current-view="create"][data-create-category] #createView .backend-preview-title {
  color: #111827 !important;
  font-size: 13px !important;
  font-weight: 850 !important;
}

html body[data-current-view="create"][data-create-category] #createView .backend-prompt-text {
  color: #1f2937 !important;
  font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace !important;
  font-size: 12px !important;
  line-height: 1.55 !important;
  margin: 0 !important;
  max-height: 360px !important;
  overflow: auto !important;
  white-space: pre-wrap !important;
  word-break: break-word !important;
}

html body[data-current-view="create"][data-create-category] #createView .create-admin-preview-top.hidden-field {
  display: none !important;
}

html body[data-current-view="create"][data-create-category] #createView .create-admin-preview-top:not(.hidden-field) {
  background: #ffffff !important;
  border: 1px solid rgba(20, 28, 28, 0.10) !important;
  border-radius: 8px !important;
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.07) !important;
  display: grid !important;
  gap: 10px !important;
  margin: 12px 0 0 !important;
  overflow: visible !important;
  padding: 12px !important;
  visibility: visible !important;
}

html body[data-current-view="create"][data-create-category] #createView .create-admin-preview-top-head {
  align-items: center !important;
  display: flex !important;
  gap: 12px !important;
  justify-content: space-between !important;
}

html body[data-current-view="create"][data-create-category] #createView .create-admin-preview-top-head strong,
html body[data-current-view="create"][data-create-category] #createView .create-admin-preview-top-head span {
  display: block !important;
}

html body[data-current-view="create"][data-create-category] #createView .create-admin-preview-top-head strong {
  color: #111827 !important;
  font-size: 14px !important;
  font-weight: 850 !important;
}

html body[data-current-view="create"][data-create-category] #createView .create-admin-preview-top-head span {
  color: #667085 !important;
  font-size: 12px !important;
  line-height: 1.45 !important;
  margin-top: 3px !important;
}

html body[data-current-view="create"][data-create-category] #createView .create-admin-preview-top-head button {
  align-items: center !important;
  background: #111827 !important;
  border: 0 !important;
  border-radius: 999px !important;
  color: #ffffff !important;
  cursor: pointer !important;
  display: inline-flex !important;
  flex: 0 0 auto !important;
  font-size: 13px !important;
  font-weight: 850 !important;
  justify-content: center !important;
  min-height: 38px !important;
  padding: 0 14px !important;
}

html body[data-current-view="create"][data-create-category] #createView .create-admin-preview-top-body {
  background: rgba(248, 250, 252, 0.88) !important;
  border: 1px solid rgba(20, 28, 28, 0.08) !important;
  border-radius: 8px !important;
  color: #475467 !important;
  display: grid !important;
  gap: 10px !important;
  line-height: 1.55 !important;
  max-height: 420px !important;
  min-height: 52px !important;
  overflow: auto !important;
  padding: 10px !important;
}

@media (max-width: 980px) {
  html body[data-current-view="create"][data-create-category] #createView .create-admin-preview-top-head {
    align-items: stretch !important;
    display: grid !important;
  }

  html body[data-current-view="create"][data-create-category] #createView .create-admin-preview-top-head button {
    width: 100% !important;
  }
}