:root,
html,
body.erp-app,
body.source-inbox-app,
body.copywriting-app,
body.infringement-app,
body.api-app,
body.templates-app,
body.watermark-app {
color-scheme: light;
--wb-page: #f1f4ef;
--wb-page-soft: #f7f9f5;
--wb-surface: #ffffff;
--wb-surface-soft: #f6f8f4;
--wb-surface-hover: #eef2eb;
--wb-text: #222b26;
--wb-muted: #66726b;
--wb-subtle: #8d9991;
--wb-line: #e3e8e0;
--wb-line-strong: #cbd4c9;
--wb-accent: #2f6b4f;
--wb-accent-hover: #275a42;
--wb-accent-active: #204d38;
--wb-accent-soft: #eaf3ed;
--wb-accent-softer: #f5faf7;
--wb-danger: #a6514c;
--wb-danger-hover: #91433f;
--wb-danger-soft: #fbf0ee;
--wb-success: #397a56;
--wb-success-soft: #eaf5ee;
--wb-warning: #9a7537;
--wb-warning-soft: #fbf4e8;
--wb-focus: rgba(47, 107, 79, .16);
--wb-shadow-pop: 0 18px 46px rgba(34, 43, 38, .10);
--wb-shadow-modal: 0 30px 80px rgba(34, 43, 38, .16);
--wb-r-control: 8px;
--wb-r-card: 10px;
--wb-r-panel: 14px;
--wb-r-modal: 14px;
--wb-control: 34px;
--wb-control-small: 28px;
--wb-font: "SF Pro Text", "PingFang SC", "苹方-简", "Microsoft YaHei", system-ui, -apple-system, BlinkMacSystemFont, Arial, sans-serif;
--wb-mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
}
html,
body.erp-app,
body.source-inbox-app,
body.copywriting-app,
body.infringement-app,
body.api-app,
body.templates-app,
body.watermark-app {
background: var(--wb-page) !important;
color: var(--wb-text) !important;
font-family: var(--wb-font) !important;
font-size: 13px !important;
text-rendering: optimizeLegibility !important;
-webkit-font-smoothing: antialiased !important;
}
html {
height: 100% !important;
}
body.source-inbox-app,
body.copywriting-app,
body.infringement-app,
body.api-app,
body.templates-app,
body.watermark-app {
width: 100% !important;
height: 100vh !important;
min-height: 100% !important;
max-height: 100vh !important;
overflow: hidden !important;
}
body.erp-app *,
body.source-inbox-app *,
body.copywriting-app *,
body.infringement-app *,
body.api-app *,
body.templates-app *,
body.watermark-app * {
box-sizing: border-box !important;
letter-spacing: 0 !important;
}
body.erp-app button,
body.erp-app input,
body.erp-app select,
body.erp-app textarea,
body.source-inbox-app button,
body.source-inbox-app input,
body.source-inbox-app select,
body.source-inbox-app textarea,
body.copywriting-app button,
body.copywriting-app input,
body.copywriting-app select,
body.copywriting-app textarea,
body.infringement-app button,
body.infringement-app input,
body.infringement-app select,
body.infringement-app textarea,
body.api-app button,
body.api-app input,
body.api-app select,
body.api-app textarea,
body.templates-app button,
body.templates-app input,
body.templates-app select,
body.templates-app textarea,
body.watermark-app button,
body.watermark-app input,
body.watermark-app select,
body.watermark-app textarea {
font-family: inherit !important;
letter-spacing: 0 !important;
}
body.erp-app :is(button, input, select, textarea):focus-visible,
body.source-inbox-app :is(button, input, select, textarea):focus-visible,
body.copywriting-app :is(button, input, select, textarea):focus-visible,
body.infringement-app :is(button, input, select, textarea):focus-visible,
body.api-app :is(button, input, select, textarea):focus-visible,
body.templates-app :is(button, input, select, textarea):focus-visible,
body.watermark-app :is(button, input, select, textarea):focus-visible {
outline: 2px solid var(--wb-focus) !important;
outline-offset: 2px !important;
box-shadow: none !important;
}
body.erp-app ::-webkit-scrollbar,
body.source-inbox-app ::-webkit-scrollbar,
body.copywriting-app ::-webkit-scrollbar,
body.infringement-app ::-webkit-scrollbar,
body.api-app ::-webkit-scrollbar,
body.templates-app ::-webkit-scrollbar,
body.watermark-app ::-webkit-scrollbar {
width: 10px !important;
height: 10px !important;
}
body.erp-app ::-webkit-scrollbar-thumb,
body.source-inbox-app ::-webkit-scrollbar-thumb,
body.copywriting-app ::-webkit-scrollbar-thumb,
body.infringement-app ::-webkit-scrollbar-thumb,
body.api-app ::-webkit-scrollbar-thumb,
body.templates-app ::-webkit-scrollbar-thumb,
body.watermark-app ::-webkit-scrollbar-thumb {
border: 3px solid transparent !important;
border-radius: 999px !important;
background: rgba(43, 58, 49, .20) !important;
background-clip: padding-box !important;
}
body.erp-app ::-webkit-scrollbar-thumb:hover,
body.source-inbox-app ::-webkit-scrollbar-thumb:hover,
body.copywriting-app ::-webkit-scrollbar-thumb:hover,
body.infringement-app ::-webkit-scrollbar-thumb:hover,
body.api-app ::-webkit-scrollbar-thumb:hover,
body.templates-app ::-webkit-scrollbar-thumb:hover,
body.watermark-app ::-webkit-scrollbar-thumb:hover {
background: rgba(43, 58, 49, .34) !important;
background-clip: padding-box !important;
}
body.erp-app ::selection,
body.source-inbox-app ::selection,
body.copywriting-app ::selection,
body.infringement-app ::selection,
body.api-app ::selection,
body.templates-app ::selection,
body.watermark-app ::selection {
background: rgba(47, 107, 79, .15) !important;
}
/* Login: keep it quiet, centered and compact. */
body.erp-app #loginView {
background:
radial-gradient(circle at 50% 0%, rgba(255, 255, 255, .86), transparent 42%),
linear-gradient(160deg, #eef2ec 0%, #f6f7f3 46%, #edf1eb 100%) !important;
padding: 18px !important;
}
body.erp-app .login-card {
}
body.erp-app .login-logo-frame {
}
body.erp-app .login-logo {
object-fit: contain !important;
}
body.erp-app .login-card form {
}
body.erp-app .login-field {
display: block !important;
}
body.erp-app .login-card input {
}
body.erp-app .login-card input::placeholder {
color: var(--wb-subtle) !important;
opacity: 1 !important;
}
body.erp-app .login-card input:focus {
border-color: rgba(47, 107, 79, .55) !important;
box-shadow: 0 0 0 4px var(--wb-focus) !important;
}
body.erp-app #password {
margin-top: 0 !important;
}
body.erp-app .login-card #loginSubmitBtn {
border: 1px solid var(--wb-accent) !important;
font-size: 13px !important;
letter-spacing: .04em !important;
}
body.erp-app .login-card #loginSubmitBtn:hover:not(:disabled) {
border-color: var(--wb-accent-hover) !important;
background: var(--wb-accent-hover) !important;
}
body.erp-app .login-card #loginSubmitBtn:disabled {
cursor: not-allowed !important;
border-color: var(--wb-line) !important;
background: var(--wb-surface-soft) !important;
color: var(--wb-subtle) !important;
opacity: 1 !important;
}
body.erp-app .login-error {
min-height: 18px !important;
margin: 0 !important;
color: var(--wb-danger) !important;
}
/* Single calm main frame. */
body.erp-app #appView {
grid-template-columns: 116px minmax(0, 1fr) !important;
gap: 0 !important;
padding: 10px !important;
background: transparent !important;
}
body.erp-app .sidebar {
}
body.erp-app .workspace {
}
body.erp-app .workspace .content,
body.erp-app .workspace .view,
body.erp-app .workspace .view.active {
}
body.erp-app .sidebar .brand {
}
body.erp-app .brand:hover {
background: transparent !important;
}
body.erp-app .brand img {
}
body.erp-app .nav {
}
body.erp-app .nav button {
}
body.erp-app .nav button:hover,
body.erp-app .nav button:focus-visible {
background: var(--wb-surface-soft) !important;
color: var(--wb-text) !important;
outline: none !important;
}
body.erp-app .nav button.active {
}
body.erp-app .nav button.active::before {
content: "" !important;
position: absolute !important;
left: -8px !important;
top: 9px !important;
bottom: 9px !important;
width: 3px !important;
border-radius: 999px !important;
background: var(--wb-accent) !important;
}
body.erp-app .nav button.active span,
body.erp-app .nav button.active svg {
color: var(--wb-accent) !important;
}
body.erp-app .sidebar-user {
}
body.erp-app .user-menu {
}
body.erp-app .user-name {
}
body.erp-app .user-name:hover,
body.erp-app .user-name:focus-visible {
border-color: var(--wb-line-strong) !important;
background: var(--wb-surface-soft) !important;
color: var(--wb-text) !important;
}
body.erp-app .user-popover {
}
body.erp-app .user-menu-action {
}
body.erp-app .user-menu-action:hover,
body.erp-app .user-menu-action:focus-visible {
background: var(--wb-accent-soft) !important;
color: var(--wb-accent) !important;
}
body.erp-app .logout-action {
}
body.erp-app .logout-action:hover {
background: var(--wb-danger-soft) !important;
color: var(--wb-danger) !important;
}
/* All workbench pages share one direct content frame. */
body.source-inbox-app .inbox-shell,
body.copywriting-app .workspaceShell,
body.erp-app .image-opt-shell,
body.erp-app .export-listing-shell {
height: 100% !important;
min-height: 0 !important;
background: transparent !important;
}
body.copywriting-app .workspaceShell {
}
body.source-inbox-app .inbox-toolbar,
body.copywriting-app .commandBar,
body.erp-app .image-opt-command-bar,
body.erp-app .export-listing-header {
min-height: 56px !important;
height: 56px !important;
max-height: 56px !important;
padding: 0 16px !important;
border: 0 !important;
border-bottom: 1px solid var(--wb-line) !important;
border-radius: 0 !important;
background: #fff !important;
box-shadow: none !important;
}
body.copywriting-app .commandBar {
}
/* Button language: neutral outline, quiet danger, single primary. */
body.source-inbox-app .inbox-action,
body.copywriting-app .pageClearButton,
body.copywriting-app .selectionDeleteButton,
body.copywriting-app .workflowButton,
body.copywriting-app .embeddedRemovalButton,
body.erp-app .page-clear-button,
body.erp-app .image-tool-button,
body.erp-app .image-open-doubao,
body.erp-app .image-inline-delete,
body.erp-app .image-transfer-export,
body.erp-app .export-mapping-button,
body.erp-app .export-complete-button,
body.erp-app .export-quiet-delete,
body.erp-app .system-check-button,
body.erp-app .account-add-button,
body.erp-app .account-editor-primary,
body.erp-app .account-editor-secondary,
body.erp-app .modal-btn,
body.infringement-app .button,
body.api-app .action-button,
body.api-app .quick-button,
body.api-app .icon-button,
body.templates-app .primary,
body.templates-app .secondary,
body.watermark-app .primary,
body.watermark-app .secondary,
body.watermark-app .white {
min-height: 32px !important;
height: 32px !important;
padding: 0 13px !important;
border: 1px solid var(--wb-line-strong) !important;
border-radius: 9px !important;
background: #fff !important;
color: var(--wb-muted) !important;
font-size: 12px !important;
font-weight: 600 !important;
line-height: 30px !important;
white-space: nowrap !important;
box-shadow: none !important;
text-shadow: none !important;
}
body.source-inbox-app .inbox-action:hover:not(:disabled),
body.copywriting-app .pageClearButton:hover:not(:disabled),
body.copywriting-app .selectionDeleteButton:hover:not(:disabled),
body.copywriting-app .workflowButton:hover:not(:disabled),
body.copywriting-app .embeddedRemovalButton:hover:not(:disabled),
body.erp-app .page-clear-button:hover:not(:disabled),
body.erp-app .image-tool-button:hover:not(:disabled),
body.erp-app .image-open-doubao:hover:not(:disabled),
body.erp-app .image-inline-delete:hover:not(:disabled),
body.erp-app .image-transfer-export:hover:not(:disabled),
body.erp-app .export-mapping-button:hover:not(:disabled),
body.erp-app .export-complete-button:hover:not(:disabled),
body.erp-app .export-quiet-delete:hover:not(:disabled),
body.erp-app .system-check-button:hover:not(:disabled),
body.erp-app .account-editor-primary:hover:not(:disabled),
body.erp-app .account-editor-secondary:hover:not(:disabled),
body.erp-app .modal-btn:hover:not(:disabled),
body.infringement-app .button:hover:not(:disabled),
body.api-app .action-button:hover:not(:disabled),
body.api-app .quick-button:hover:not(:disabled),
body.api-app .icon-button:hover:not(:disabled),
body.templates-app .primary:hover:not(:disabled),
body.templates-app .secondary:hover:not(:disabled),
body.watermark-app .primary:hover:not(:disabled),
body.watermark-app .secondary:hover:not(:disabled),
body.watermark-app .white:hover:not(:disabled) {
border-color: var(--wb-line-strong) !important;
background: var(--wb-surface-hover) !important;
color: var(--wb-text) !important;
box-shadow: none !important;
}
body.source-inbox-app .inbox-action.primary,
body.copywriting-app .selectionPromptButton,
body.copywriting-app .embeddedRemovalButton.primary,
body.erp-app .image-open-doubao,
body.erp-app .image-transfer-export,
body.erp-app .export-mapping-button:not(.secondary),
body.erp-app .export-complete-button,
body.erp-app .system-check-button.primary,
body.erp-app .account-add-button,
body.erp-app .account-editor-primary,
body.erp-app .modal-btn.confirm:not(.danger),
body.infringement-app .button.primary,
body.api-app .action-button.primary,
body.templates-app .primary,
body.watermark-app .primary,
body.watermark-app .sync {
border-color: var(--wb-accent) !important;
background: var(--wb-accent) !important;
color: #fff !important;
}
body.source-inbox-app .inbox-action.primary:hover:not(:disabled),
body.copywriting-app .selectionPromptButton:hover:not(:disabled),
body.copywriting-app .embeddedRemovalButton.primary:hover:not(:disabled),
body.erp-app .image-open-doubao:hover:not(:disabled),
body.erp-app .image-transfer-export:hover:not(:disabled),
body.erp-app .export-mapping-button:not(.secondary):hover:not(:disabled),
body.erp-app .export-complete-button:hover:not(:disabled),
body.erp-app .system-check-button.primary:hover:not(:disabled),
body.erp-app .account-add-button:hover:not(:disabled),
body.erp-app .account-editor-primary:hover:not(:disabled),
body.erp-app .modal-btn.confirm:not(.danger):hover:not(:disabled),
body.infringement-app .button.primary:hover:not(:disabled),
body.api-app .action-button.primary:hover:not(:disabled),
body.templates-app .primary:hover:not(:disabled),
body.watermark-app .primary:hover:not(:disabled),
body.watermark-app .sync:hover:not(:disabled) {
border-color: var(--wb-accent-hover) !important;
background: var(--wb-accent-hover) !important;
color: #fff !important;
}
body.source-inbox-app .inbox-action.danger,
body.copywriting-app .selectionDeleteButton,
body.copywriting-app .embeddedRemovalButton.danger,
body.erp-app .image-inline-delete,
body.erp-app .export-quiet-delete,
body.erp-app .page-clear-button.danger,
body.copywriting-app .pageClearButton.danger,
body.erp-app .modal-btn.confirm.danger,
body.infringement-app .button.danger {
border-color: rgba(166, 81, 76, .18) !important;
background: var(--wb-danger-soft) !important;
color: var(--wb-danger) !important;
}
body.source-inbox-app .inbox-action.danger:hover:not(:disabled),
body.copywriting-app .selectionDeleteButton:hover:not(:disabled),
body.copywriting-app .embeddedRemovalButton.danger:hover:not(:disabled),
body.erp-app .image-inline-delete:hover:not(:disabled),
body.erp-app .export-quiet-delete:hover:not(:disabled),
body.erp-app .page-clear-button.danger:hover:not(:disabled),
body.copywriting-app .pageClearButton.danger:hover:not(:disabled),
body.erp-app .modal-btn.confirm.danger:hover:not(:disabled),
body.infringement-app .button.danger:hover:not(:disabled) {
border-color: rgba(166, 81, 76, .28) !important;
background: #f7e7e5 !important;
color: var(--wb-danger-hover) !important;
}
body.source-inbox-app button:disabled,
body.copywriting-app button:disabled,
body.erp-app button:disabled,
body.infringement-app button:disabled,
body.api-app button:disabled,
body.templates-app button:disabled,
body.watermark-app button:disabled {
cursor: not-allowed !important;
border-color: var(--wb-line) !important;
background: var(--wb-surface-soft) !important;
color: var(--wb-subtle) !important;
opacity: 1 !important;
box-shadow: none !important;
}
body.erp-app .page-clear-button,
body.copywriting-app .pageClearButton {
min-width: 104px !important;
}
body.source-inbox-app .inbox-pagination,
body.erp-app .workflow-pagination,
body.copywriting-app .copywritingPager,
body.infringement-app .pagination {
}
body.source-inbox-app #pageSizeSelect,
body.source-inbox-app .inbox-pagination button,
body.erp-app .workflow-pagination button,
body.copywriting-app .copywritingPager button,
body.infringement-app .pagination button,
body.infringement-app .page-jump button {
}
/* Consistent table foundation. */
body.source-inbox-app .inbox-list,
body.copywriting-app .previewTableWrap,
body.copywriting-app .outputTableWrap,
body.copywriting-app .embeddedRemovalTableWrap,
body.erp-app .image-opt-table-wrap,
body.erp-app .export-listing-table-wrap {
border: 0 !important;
border-radius: 0 !important;
background: #fff !important;
}
body.source-inbox-app .inbox-list,
body.copywriting-app .tableWrap,
body.erp-app .image-opt-table-card,
body.erp-app .export-listing-table-wrap {
box-shadow: none !important;
}
body.source-inbox-app .inbox-table,
body.copywriting-app #dataTable,
body.copywriting-app #outputTable,
body.copywriting-app #embeddedRemovalTable,
body.erp-app #imageOptimizationTable,
body.erp-app #exportListingTable {
font-size: 13px !important;
color: var(--wb-text) !important;
border-collapse: separate !important;
border-spacing: 0 !important;
}
body.source-inbox-app .inbox-table thead th,
body.copywriting-app #dataTable th,
body.copywriting-app #outputTable th,
body.copywriting-app #embeddedRemovalTable th,
body.erp-app #imageOptimizationTable th,
body.erp-app #exportListingTable th,
body.erp-app .account-table-header {
}
body.source-inbox-app .inbox-table tbody td,
body.copywriting-app #dataTable td,
body.copywriting-app #outputTable td,
body.copywriting-app #embeddedRemovalTable td,
body.erp-app #imageOptimizationTable td,
body.erp-app #exportListingTable td {
height: 58px !important;
min-height: 58px !important;
padding: 7px 10px !important;
border: 0 !important;
border-bottom: 1px solid var(--wb-line) !important;
background: #fff !important;
color: var(--wb-text) !important;
font-size: 13px !important;
line-height: 19px !important;
vertical-align: middle !important;
}
body.source-inbox-app .inbox-table tbody tr:last-child td,
body.copywriting-app #dataTable tbody tr:last-child td,
body.copywriting-app #outputTable tbody tr:last-child td,
body.copywriting-app #embeddedRemovalTable tbody tr:last-child td,
body.erp-app #imageOptimizationTable tbody tr:last-child td,
body.erp-app #exportListingTable tbody tr:last-child td {
border-bottom: 0 !important;
}
body.source-inbox-app .inbox-table tbody tr:hover td,
body.copywriting-app #dataTable tbody tr:hover td,
body.copywriting-app #outputTable tbody tr:hover td,
body.copywriting-app #embeddedRemovalTable tbody tr:hover td,
body.erp-app #imageOptimizationTable tbody tr:hover td,
body.erp-app #exportListingTable tbody tr:hover td {
background: #f8faf6 !important;
}
body.source-inbox-app .inbox-row.selected td,
body.source-inbox-app .inbox-row.selected:hover td,
body.copywriting-app #dataTable tbody tr.selected td,
body.copywriting-app #embeddedRemovalTable tbody tr.selected td,
body.erp-app #imageOptimizationTable tbody tr.selected td,
body.erp-app #exportListingTable tbody tr.selected td {
background: var(--wb-accent-softer) !important;
box-shadow: inset 3px 0 0 var(--wb-accent) !important;
}
body.source-inbox-app .inbox-table input[type="checkbox"],
body.source-inbox-app input[type="checkbox"],
body.copywriting-app input[type="checkbox"],
body.erp-app input[type="checkbox"] {
width: 16px !important;
height: 16px !important;
min-width: 16px !important;
min-height: 16px !important;
margin: 0 !important;
accent-color: var(--wb-accent) !important;
cursor: pointer !important;
}
body.copywriting-app .emptyCell,
body.copywriting-app .embeddedRemovalEmpty,
body.infringement-app .empty-state,
body.templates-app .empty {
min-height: 260px !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
gap: 10px !important;
color: var(--wb-subtle) !important;
background: transparent !important;
font-size: 12px !important;
}
body.copywriting-app .emptyCell::before,
body.copywriting-app .embeddedRemovalEmpty::before,
body.infringement-app .empty-state::before,
body.templates-app .empty::before {
content: "" !important;
width: 38px !important;
height: 38px !important;
display: block !important;
border: 1px solid var(--wb-line) !important;
border-radius: 12px !important;
background: var(--wb-accent-soft) !important;
}
/* Copywriting segmented controls. */
body.copywriting-app .workflowActions {
display: inline-flex !important;
align-items: center !important;
gap: 2px !important;
height: 34px !important;
padding: 3px !important;
border: 1px solid var(--wb-line) !important;
border-radius: 10px !important;
background: var(--wb-surface-soft) !important;
}
body.copywriting-app .workflowButton {
}
body.copywriting-app .workflowButton:hover {
color: var(--wb-text) !important;
background: rgba(255, 255, 255, .72) !important;
}
body.copywriting-app .workflowButton[aria-pressed="true"],
body.copywriting-app .workflowButton.active {
}
body.copywriting-app .contentCard {
}
body.copywriting-app .workspacePanel {
padding: 0 !important;
border: 0 !important;
border-radius: 0 !important;
background: transparent !important;
}
body.copywriting-app .previewTableWrap {
}
body.copywriting-app .tableFootnote {
color: var(--wb-subtle) !important;
font-size: 12px !important;
}
body.copywriting-app .parseWorkspace {
}
body.copywriting-app .parseInputPane,
body.copywriting-app .embeddedRemovalPane {
}
body.copywriting-app .parseInputPane {
}
body.copywriting-app .editor {
color: var(--wb-text) !important;
font-family: var(--wb-font) !important;
font-size: 13px !important;
line-height: 22px !important;
}
body.copywriting-app .editor:focus {
border-color: rgba(47, 107, 79, .42) !important;
box-shadow: 0 0 0 3px var(--wb-focus) !important;
}
body.copywriting-app .cellCopyButton {
}
body.copywriting-app .cellCopyButton:hover {
background: var(--wb-surface-soft) !important;
color: var(--wb-text) !important;
}
body.erp-app .image-opt-table-card,
body.erp-app .export-listing-table-wrap {
border: 0 !important;
border-radius: 0 !important;
background: #fff !important;
}
body.erp-app .image-opt-table-wrap,
body.erp-app .export-listing-table-wrap {
}
body.erp-app .image-opt-thumbnail,
body.erp-app .export-optimized-thumb,
body.erp-app .image-placeholder,
body.erp-app .optimized-placeholder {
background: var(--wb-surface-soft) !important;
}
body.erp-app .workflow-pagination {
}
/* Detail drawer. */
body.source-inbox-app .inbox-detail-panel,
body.erp-app .product-detail-drawer {
width: min(680px, 100vw) !important;
max-width: 680px !important;
border: 0 !important;
border-left: 1px solid var(--wb-line) !important;
background: #fff !important;
box-shadow: -28px 0 70px rgba(43, 58, 49, .12) !important;
}
body.source-inbox-app .inbox-detail-content,
body.erp-app .product-detail-body {
padding: 20px !important;
}
body.source-inbox-app .icon-button,
body.erp-app .product-detail-close {
width: 32px !important;
height: 32px !important;
min-width: 32px !important;
border: 1px solid var(--wb-line) !important;
border-radius: 9px !important;
background: #fff !important;
color: var(--wb-subtle) !important;
box-shadow: 0 6px 16px rgba(43, 58, 49, .08) !important;
}
body.source-inbox-app .icon-button:hover,
body.erp-app .product-detail-close:hover {
border-color: var(--wb-line-strong) !important;
background: var(--wb-surface-soft) !important;
color: var(--wb-text) !important;
}
body.source-inbox-app .detail-section,
body.erp-app .product-detail-body section,
body.erp-app .product-detail-body .detail-section {
border: 1px solid var(--wb-line) !important;
border-radius: 10px !important;
background: #fff !important;
box-shadow: none !important;
}
body.source-inbox-app .detail-section h3,
body.erp-app .product-detail-body h3 {
color: var(--wb-text) !important;
font-size: 12px !important;
font-weight: 650 !important;
}
body.source-inbox-app .detail-grid dt,
body.erp-app .product-detail-body dt {
color: var(--wb-subtle) !important;
font-size: 12px !important;
}
body.source-inbox-app .detail-grid dd,
body.erp-app .product-detail-body dd {
color: var(--wb-text) !important;
font-size: 13px !important;
}
/* Status pills. */
body.erp-app .image-status-badge,
body.erp-app .quality-badge,
body.erp-app .account-status-badge,
body.erp-app .mapping-status-badge,
body.erp-app .system-check-badge,
body.infringement-app .status-pill,
body.api-app .status-pill,
body.copywriting-app .copy-status,
body.copywriting-app .embeddedActionStatus {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
min-height: 22px !important;
height: 22px !important;
padding: 0 8px !important;
border: 1px solid var(--wb-line) !important;
border-radius: 999px !important;
background: var(--wb-surface-soft) !important;
color: var(--wb-muted) !important;
font-size: 12px !important;
font-weight: 650 !important;
line-height: 1 !important;
white-space: nowrap !important;
}
body.erp-app .image-status-badge.ok,
body.erp-app .quality-badge.ok,
body.erp-app .account-status-badge.active,
body.erp-app .mapping-status-badge.ok,
body.erp-app .system-check-badge.pass,
body.infringement-app .status-pill.green,
body.api-app .status-pill.green,
body.copywriting-app .copy-status.done {
border-color: rgba(57, 122, 86, .16) !important;
background: var(--wb-success-soft) !important;
color: var(--wb-success) !important;
}
body.erp-app .image-status-badge.warning,
body.erp-app .quality-badge.warning,
body.erp-app .mapping-status-badge.warning,
body.erp-app .system-check-badge.warn,
body.infringement-app .status-pill.orange,
body.api-app .status-pill.orange,
body.copywriting-app .copy-status.working,
body.copywriting-app .embeddedActionStatus.warning {
border-color: rgba(154, 117, 55, .16) !important;
background: var(--wb-warning-soft) !important;
color: var(--wb-warning) !important;
}
body.erp-app .image-status-badge.error,
body.erp-app .quality-badge.error,
body.erp-app .account-status-badge.disabled,
body.erp-app .mapping-status-badge.error,
body.erp-app .system-check-badge.fail,
body.infringement-app .status-pill.red,
body.api-app .status-pill.red,
body.copywriting-app .copy-status.error,
body.copywriting-app .embeddedActionStatus.error {
border-color: rgba(166, 81, 76, .16) !important;
background: var(--wb-danger-soft) !important;
color: var(--wb-danger) !important;
}
/* Settings/library pages become quieter centered surfaces. */
body.infringement-app .library-page,
body.templates-app .template-page,
body.api-app .api-page {
background: var(--wb-page) !important;
}
body.infringement-app .library-card,
body.templates-app .template-card {
}
body.infringement-app .library-toolbar,
body.templates-app .toolbar {
}
body.infringement-app .library-toolbar,
body.templates-app .toolbar {
}
body.infringement-app .count-dashboard,
body.templates-app .count-dashboard {
}
body.infringement-app .metric-card,
body.templates-app .metric-card {
}
body.infringement-app .metric-card .metric-value,
body.templates-app .metric-card .metric-value {
}
body.infringement-app .metric-card .metric-eyebrow,
body.templates-app .metric-card .metric-eyebrow {
color: var(--wb-subtle) !important;
font-size: 12px !important;
}
body.infringement-app .metric-card .metric-foot,
body.templates-app .metric-card .metric-foot {
color: var(--wb-subtle) !important;
}
body.api-app .api-page {
}
body.api-app .api-sidebar {
}
body.api-app .sidebar-head,
body.api-app .editor-bar {
height: 56px !important;
min-height: 56px !important;
border-color: var(--wb-line) !important;
background: #fff !important;
}
body.api-app .connection-card {
}
body.api-app .connection-card:hover {
border-color: var(--wb-line) !important;
background: var(--wb-surface-soft) !important;
box-shadow: none !important;
}
body.api-app .connection-card.active {
}
body.api-app .panel-card,
body.api-app .result-card,
body.api-app .empty-panel {
width: min(920px, 100%) !important;
}
body.api-app .editor-body {
}
body.api-app .field-grid.two {
gap: 12px !important;
}
body.api-app .field span,
body.api-app .provider-select span {
}
body.api-app .field input,
body.api-app .field select,
body.api-app .field textarea,
body.api-app .provider-select select {
color: var(--wb-text) !important;
}
body.api-app .field textarea {
}
body.api-app .field input:focus,
body.api-app .field select:focus,
body.api-app .field textarea:focus,
body.api-app .provider-select select:focus {
border-color: rgba(47, 107, 79, .46) !important;
box-shadow: 0 0 0 3px var(--wb-focus) !important;
}
body.api-app .advanced-card {
}
body.api-app .advanced-card summary {
color: var(--wb-muted) !important;
font-weight: 650 !important;
}
body.api-app .editor-actions {
}
/* Accounts and system check. */
body.erp-app .view-accounts,
body.erp-app .view-system-check {
padding: 18px !important;
overflow: auto !important;
background: var(--wb-page) !important;
}
body.erp-app .accounts-page-minimal,
body.erp-app .system-check-page {
}
body.erp-app .accounts-shell-minimal {
}
body.erp-app .accounts-primary-action {
}
body.erp-app .account-add-button {
}
body.erp-app .accounts-list-panel {
}
body.erp-app .account-table-header,
body.erp-app .account-table-row {
}
body.erp-app .account-table-header {
}
body.erp-app .account-table-row {
}
body.erp-app .account-table-row:hover {
background: #f8faf6 !important;
}
body.erp-app .account-table-cell-name > span {
}
body.erp-app .account-table-cell-account {
}
body.erp-app .account-more-button {
}
body.erp-app .system-check-page {
}
body.erp-app .system-check-header {
}
body.erp-app .system-check-list {
border: 1px solid var(--wb-line) !important;
background: #fff !important;
}
body.erp-app .system-check-row {
}
body.erp-app .system-check-row:last-child {
border-bottom: 0 !important;
}
/* Shared overlays and feedback. */
body.erp-app .modal-backdrop,
body.erp-app .account-editor-backdrop,
body.erp-app .product-detail-backdrop,
body.erp-app .erp-image-zoom-backdrop,
body.infringement-app .dialog-backdrop {
background: rgba(34, 43, 38, .30) !important;
backdrop-filter: blur(3px) !important;
-webkit-backdrop-filter: blur(3px) !important;
}
body.erp-app .system-modal,
body.erp-app .account-editor-modal,
body.erp-app .export-file-modal,
body.erp-app .watermark-tool-modal,
body.erp-app .erp-image-zoom-dialog,
body.infringement-app .dialog-card {
}
body.erp-app .system-modal {
}
body.erp-app .system-modal-copy {
}
body.erp-app .system-modal-copy h2 {
}
body.erp-app .system-modal-copy p {
}
body.erp-app #systemModal .system-modal-actions,
body.erp-app #exportFileModal .export-file-modal-actions,
body.erp-app .account-editor-actions,
body.infringement-app .dialog-footer {
}
body.erp-app #systemModal .modal-btn,
body.erp-app #exportFileModal .modal-btn,
body.erp-app .account-editor-actions button,
body.infringement-app .dialog-footer .button {
}
body.erp-app .account-editor-modal {
}
body.erp-app .account-editor-body {
padding: 16px 18px 12px !important;
}
body.erp-app .account-editor-field {
display: grid !important;
gap: 6px !important;
}
body.erp-app .account-editor-field > span {
color: var(--wb-muted) !important;
font-size: 12px !important;
font-weight: 650 !important;
}
body.erp-app .account-editor-field input {
width: 100% !important;
height: 36px !important;
padding: 0 11px !important;
border: 1px solid var(--wb-line-strong) !important;
border-radius: 8px !important;
background: #fff !important;
color: var(--wb-text) !important;
font-size: 13px !important;
}
body.erp-app .account-editor-field input:focus {
border-color: rgba(47, 107, 79, .46) !important;
box-shadow: 0 0 0 3px var(--wb-focus) !important;
}
body.erp-app .export-file-modal {
}
body.erp-app .export-file-modal label {
color: var(--wb-muted) !important;
font-size: 12px !important;
font-weight: 650 !important;
}
body.erp-app .export-file-modal select,
body.erp-app .export-file-modal input {
width: 100% !important;
height: 36px !important;
padding: 0 11px !important;
border: 1px solid var(--wb-line-strong) !important;
border-radius: 8px !important;
background: #fff !important;
}
body.erp-app .erp-toast,
body.source-inbox-app .inbox-toast,
body.copywriting-app .moduleToast,
body.infringement-app .module-toast,
body.api-app .module-toast,
body.templates-app .toast,
body.watermark-app .watermark-toast {
max-width: min(480px, calc(100vw - 32px)) !important;
min-height: 36px !important;
padding: 9px 14px !important;
border: 0 !important;
border-radius: 10px !important;
background: rgba(35, 44, 38, .94) !important;
color: #fff !important;
box-shadow: 0 18px 44px rgba(34, 43, 38, .18) !important;
font-size: 12px !important;
line-height: 18px !important;
text-align: center !important;
}
body.source-inbox-app .inbox-toast.error,
body.copywriting-app .moduleToast.error,
body.infringement-app .module-toast.error,
body.api-app .module-toast.error,
body.templates-app .toast.error,
body.watermark-app .watermark-toast.error {
background: rgba(136, 68, 62, .96) !important;
}
body.source-inbox-app .inbox-toast.warning,
body.copywriting-app .moduleToast.warning,
body.infringement-app .module-toast.warning,
body.api-app .module-toast.warning,
body.templates-app .toast.warning,
body.watermark-app .watermark-toast.warning {
background: rgba(126, 95, 45, .96) !important;
}
body.source-inbox-app .inbox-toast.success,
body.copywriting-app .moduleToast.success,
body.infringement-app .module-toast.success,
body.api-app .module-toast.success,
body.templates-app .toast.success,
body.watermark-app .watermark-toast.success {
background: rgba(45, 103, 71, .96) !important;
}
body.erp-app .export-listing-header {
justify-content: space-between !important;
}
body.erp-app .export-mapping-center,
body.erp-app .export-listing-actions {
display: flex !important;
align-items: center !important;
gap: 8px !important;
}
body.erp-app .export-last-meta,
body.erp-app .image-cloudflare-status {
color: var(--wb-subtle) !important;
font-size: 12px !important;
}
body.erp-app .permission-empty-view {
}
body.erp-app .permission-empty-card {
}
body.erp-app .permission-empty-card p {
color: var(--wb-subtle) !important;
font-size: 13px !important;
}
@media (prefers-reduced-motion: reduce) {
body.erp-app *,
body.source-inbox-app *,
body.copywriting-app *,
body.infringement-app *,
body.api-app *,
body.templates-app *,
body.watermark-app * {
animation-duration: .01ms !important;
animation-iteration-count: 1 !important;
transition-duration: .01ms !important;
scroll-behavior: auto !important;
}
}
@media (max-width: 760px) {
body.erp-app #appView {
grid-template-columns: 1fr !important;
grid-template-rows: auto minmax(0, 1fr) !important;
gap: 0 !important;
padding: 6px !important;
}
body.erp-app .sidebar {
width: 100% !important;
min-width: 100% !important;
height: auto !important;
min-height: 0 !important;
flex-direction: row !important;
align-items: center !important;
padding: 6px 8px !important;
border: 1px solid var(--wb-line) !important;
border-bottom: 0 !important;
border-radius: 14px 14px 0 0 !important;
}
body.erp-app .workspace {
border-radius: 0 0 14px 14px !important;
}
body.erp-app .nav {
flex: 1 1 auto !important;
flex-direction: row !important;
justify-content: flex-end !important;
gap: 2px !important;
}
body.erp-app .nav button {
width: auto !important;
min-width: 0 !important;
flex: 0 1 auto !important;
height: 34px !important;
min-height: 34px !important;
padding: 0 9px !important;
}
body.erp-app .nav button.active::before {
display: none !important;
}
body.erp-app .sidebar-user {
display: none !important;
}
body.source-inbox-app .inbox-toolbar,
body.copywriting-app .commandBar,
body.erp-app .image-opt-command-bar,
body.erp-app .export-listing-header {
height: auto !important;
min-height: 56px !important;
max-height: none !important;
flex-wrap: wrap !important;
padding: 8px 12px !important;
gap: 6px !important;
}
body.erp-app .image-opt-selection-tools,
body.erp-app .export-mapping-center,
body.erp-app .export-listing-actions {
flex-wrap: wrap !important;
justify-content: flex-start !important;
}
}
/* Final exact overrides: intentionally repeat high-specificity rules that
module-tail and page-specific CSS may otherwise win by specificity. */
body.erp-app .nav button .nav-icon {
display: none !important;
}
body.erp-app .nav button span {
max-width: 100% !important;
}
body.erp-app .nav {
}
body.erp-app .sidebar-user {
}
/* Keep module headers on one quiet line until the shell really goes compact. */
body.source-inbox-app .inbox-toolbar,
body.copywriting-app .commandBar,
body.erp-app .image-opt-command-bar,
body.erp-app .export-listing-header {
flex-direction: row !important;
flex-wrap: nowrap !important;
align-items: center !important;
}
body.source-inbox-app .inbox-toolbar-primary,
body.source-inbox-app .inbox-selection-actions,
body.erp-app .image-opt-selection-tools,
body.erp-app .image-action-group,
body.erp-app .export-listing-actions,
body.erp-app .export-mapping-center {
flex-wrap: nowrap !important;
}
body.copywriting-app .commandBar {
justify-items: stretch !important;
}
/* Consistent compact action buttons across every module. */
body.source-inbox-app .inbox-toolbar .inbox-action,
body.copywriting-app .commandSide button,
body.copywriting-app .selectionPromptButton,
body.copywriting-app .embeddedRemovalButton,
body.copywriting-app #parseResultBtn,
body.erp-app .image-opt-command-bar button,
body.erp-app .export-listing-header button,
body.infringement-app .library-toolbar .button,
body.infringement-app .dialog-footer .button,
body.templates-app .toolbar-actions .primary,
body.templates-app .upload-failure-actions .primary,
body.templates-app .upload-failure-actions .secondary,
body.watermark-app #processBtn,
body.watermark-app #syncBtn,
body.watermark-app #addManual,
body.watermark-app #clearRegions,
body.watermark-app #prevImg,
body.watermark-app #nextImg {
height: 32px !important;
min-height: 32px !important;
padding: 0 13px !important;
border-radius: 9px !important;
line-height: 30px !important;
font-size: 12px !important;
font-weight: 600 !important;
white-space: nowrap !important;
}
body.source-inbox-app .inbox-toolbar .inbox-action.danger:not(:disabled),
body.copywriting-app .selectionDeleteButton:not(:disabled),
body.copywriting-app .embeddedRemovalButton.danger:not(:disabled),
body.erp-app .image-inline-delete:not(:disabled),
body.erp-app .export-quiet-delete:not(:disabled),
body.erp-app .page-clear-button.danger:not(:disabled),
body.copywriting-app .pageClearButton.danger:not(:disabled),
body.infringement-app .button.danger:not(:disabled) {
border-color: rgba(166, 81, 76, .18) !important;
background: var(--wb-danger-soft) !important;
color: var(--wb-danger) !important;
}
body.source-inbox-app .inbox-toolbar .inbox-action.primary:not(:disabled),
body.copywriting-app .selectionPromptButton:not(:disabled),
body.copywriting-app .embeddedRemovalButton.primary:not(:disabled),
body.copywriting-app #parseResultBtn:not(:disabled),
body.erp-app .image-open-doubao:not(:disabled),
body.erp-app .image-transfer-export:not(:disabled),
body.erp-app .export-mapping-button:not(.secondary):not(:disabled),
body.erp-app .export-complete-button:not(:disabled),
body.infringement-app .button.primary:not(:disabled),
body.templates-app .primary:not(:disabled),
body.watermark-app #processBtn:not(:disabled),
body.watermark-app .sync:not(:disabled) {
border-color: var(--wb-accent) !important;
background: var(--wb-accent) !important;
color: #fff !important;
}
body.source-inbox-app .inbox-toolbar .inbox-action.primary:hover:not(:disabled),
body.copywriting-app .selectionPromptButton:hover:not(:disabled),
body.copywriting-app .embeddedRemovalButton.primary:hover:not(:disabled),
body.copywriting-app #parseResultBtn:hover:not(:disabled),
body.erp-app .image-open-doubao:hover:not(:disabled),
body.erp-app .image-transfer-export:hover:not(:disabled),
body.erp-app .export-mapping-button:not(.secondary):hover:not(:disabled),
body.erp-app .export-complete-button:hover:not(:disabled),
body.infringement-app .button.primary:hover:not(:disabled),
body.templates-app .primary:hover:not(:disabled),
body.watermark-app #processBtn:hover:not(:disabled),
body.watermark-app .sync:hover:not(:disabled) {
border-color: var(--wb-accent-hover) !important;
background: var(--wb-accent-hover) !important;
color: #fff !important;
}
body.source-inbox-app .inbox-toolbar .inbox-action:disabled,
body.copywriting-app .commandSide button:disabled,
body.copywriting-app .selectionPromptButton:disabled,
body.copywriting-app .embeddedRemovalButton:disabled,
body.copywriting-app #parseResultBtn:disabled,
body.erp-app .image-opt-command-bar button:disabled,
body.erp-app .export-listing-header button:disabled,
body.infringement-app .library-toolbar .button:disabled,
body.infringement-app .dialog-footer .button:disabled,
body.templates-app .toolbar-actions .primary:disabled,
body.templates-app .upload-failure-actions .primary:disabled,
body.templates-app .upload-failure-actions .secondary:disabled,
body.watermark-app #processBtn:disabled,
body.watermark-app #syncBtn:disabled {
border-color: var(--wb-line) !important;
background: var(--wb-surface-soft) !important;
color: var(--wb-subtle) !important;
opacity: 1 !important;
}
/* Quiet segmented control. */
body.copywriting-app .workflowActions {
height: 32px !important;
min-height: 32px !important;
padding: 2px !important;
gap: 2px !important;
border: 1px solid var(--wb-line) !important;
background: var(--wb-surface-soft) !important;
}
body.copywriting-app .workflowButton {
}
body.copywriting-app .workflowButton:hover,
body.copywriting-app .workflowButton:focus-visible {
background: rgba(255, 255, 255, .78) !important;
color: var(--wb-text) !important;
box-shadow: none !important;
}
body.copywriting-app .workflowActions .workflowButton.active,
body.copywriting-app .workflowActions .workflowButton[aria-pressed="true"] {
border: 0 !important;
background: #fff !important;
color: var(--wb-accent) !important;
box-shadow: 0 1px 5px rgba(43, 58, 49, .10) !important;
}
/* Settings pages: remove oversized old primary accents and keep cards quiet. */
body.infringement-app .library-card,
body.templates-app .template-card {
width: min(1320px, 100%) !important;
margin: 0 auto !important;
background: #fff !important;
}
body.infringement-app .metric-card,
body.templates-app .metric-card {
}
body.infringement-app .metric-card .metric-value,
body.templates-app .metric-card .metric-value {
}
body.infringement-app .button.secondary:not(:disabled),
body.templates-app .secondary:not(:disabled),
body.api-app .action-button.secondary:not(:disabled),
body.api-app .action-button.ghost:not(:disabled) {
border-color: var(--wb-line-strong) !important;
background: #fff !important;
color: var(--wb-muted) !important;
}
body.infringement-app .button.secondary:hover:not(:disabled),
body.templates-app .secondary:hover:not(:disabled),
body.api-app .action-button.secondary:hover:not(:disabled),
body.api-app .action-button.ghost:hover:not(:disabled) {
border-color: var(--wb-line-strong) !important;
background: var(--wb-surface-hover) !important;
color: var(--wb-text) !important;
}
@media (max-width: 700px) {
body.source-inbox-app .inbox-toolbar,
body.copywriting-app .commandBar,
body.erp-app .image-opt-command-bar,
body.erp-app .export-listing-header {
flex-direction: row !important;
flex-wrap: wrap !important;
height: auto !important;
min-height: 56px !important;
max-height: none !important;
align-content: center !important;
gap: 6px !important;
}
body.source-inbox-app .inbox-toolbar-primary,
body.source-inbox-app .inbox-selection-actions,
body.erp-app .image-opt-selection-tools,
body.erp-app .image-action-group,
body.erp-app .export-listing-actions,
body.erp-app .export-mapping-center {
flex-wrap: wrap !important;
}
}
/* Exact clear-button overrides used by module-tail with very high specificity. */
body.copywriting-app .commandBar[data-panel="preview"] #clearCopywritingPage,
body.copywriting-app .commandBar[data-panel="parse"] #clearParsePage,
body.erp-app .image-opt-command-spacer #clearImagePage,
body.erp-app .export-clear-toolbar #clearExportPage {
width: auto !important;
min-width: 128px !important;
max-width: none !important;
height: 32px !important;
min-height: 32px !important;
max-height: 32px !important;
padding: 0 16px !important;
border-radius: 9px !important;
line-height: 30px !important;
}
body.source-inbox-app #clearAllBtn,
body.source-inbox-app #deleteSelectedBtn,
body.source-inbox-app #transferCopyBtn,
body.erp-app #startExportMapping,
body.erp-app #exportCompleteTable,
body.erp-app #exportMissingTemplatePlan,
body.copywriting-app #generatePrompt,
body.copywriting-app #parseResultBtn,
body.copywriting-app #embeddedTransferExport,
body.copywriting-app #embeddedDeleteRemovalSelected,
body.copywriting-app #embeddedStripBrandTerms {
width: auto !important;
max-width: none !important;
height: 32px !important;
min-height: 32px !important;
max-height: 32px !important;
}
/* API provider actions should stay quiet instead of carrying old brand colors. */
body.api-app .action-button.deepseek:not(:disabled),
body.api-app .action-button.r2:not(:disabled),
body.api-app .quick-button.deepseek:not(:disabled),
body.api-app .quick-button.r2:not(:disabled) {
border-color: var(--wb-line-strong) !important;
background: #fff !important;
color: var(--wb-muted) !important;
}
body.api-app .action-button.deepseek:hover:not(:disabled),
body.api-app .action-button.r2:hover:not(:disabled),
body.api-app .quick-button.deepseek:hover:not(:disabled),
body.api-app .quick-button.r2:hover:not(:disabled) {
border-color: var(--wb-line-strong) !important;
background: var(--wb-surface-hover) !important;
color: var(--wb-text) !important;
}
body.api-app .action-button.deepseek:disabled,
body.api-app .action-button.r2:disabled,
body.api-app .quick-button.deepseek:disabled,
body.api-app .quick-button.r2:disabled {
border-color: var(--wb-line) !important;
background: var(--wb-surface-soft) !important;
color: var(--wb-subtle) !important;
opacity: 1 !important;
}
/* Final visual layer for the YFTX workbench.
This file only changes presentation. Business behavior stays untouched. */
:root,
body.erp-app,
body.source-inbox-app,
body.copywriting-app,
body.infringement-app,
body.api-app,
body.templates-app,
body.watermark-app {
color-scheme: light;
--wb-page: #eef2f0;
--wb-page-soft: #f6f8f7;
--wb-surface: #ffffff;
--wb-surface-soft: #f4f7f5;
--wb-surface-hover: #eaf0ec;
--wb-text: #202824;
--wb-muted: #66746c;
--wb-subtle: #94a19a;
--wb-line: #e4eae6;
--wb-line-strong: #ccd7d0;
--wb-accent: #3f7a63;
--wb-accent-hover: #346955;
--wb-accent-active: #2c5948;
--wb-accent-soft: #edf5f1;
--wb-accent-softer: #f7fbf9;
--wb-danger: #a45d57;
--wb-danger-hover: #8e4c47;
--wb-danger-soft: #faf1ef;
--wb-success: #4f8767;
--wb-success-soft: #eef7f1;
--wb-warning: #8f713d;
--wb-warning-soft: #faf5ea;
--wb-focus: rgba(63, 122, 99, .16);
--wb-shadow-pop: 0 14px 36px rgba(32, 40, 36, .08);
--wb-shadow-modal: 0 28px 80px rgba(24, 34, 29, .18);
--wb-r-control: 8px;
--wb-r-card: 10px;
--wb-r-panel: 14px;
--wb-r-modal: 14px;
--wb-control: 32px;
--wb-control-small: 28px;
--wb-font: "SF Pro Text", "PingFang SC", "Microsoft YaHei", system-ui, -apple-system, BlinkMacSystemFont, Arial, sans-serif;
}
body.erp-app,
body.source-inbox-app,
body.copywriting-app,
body.infringement-app,
body.api-app,
body.templates-app,
body.watermark-app {
}
body.erp-app :is(button, input, select, textarea),
body.source-inbox-app :is(button, input, select, textarea),
body.copywriting-app :is(button, input, select, textarea),
body.infringement-app :is(button, input, select, textarea),
body.api-app :is(button, input, select, textarea),
body.templates-app :is(button, input, select, textarea),
body.watermark-app :is(button, input, select, textarea) {
transition: color .14s ease, background-color .14s ease, border-color .14s ease, box-shadow .14s ease;
}
/* Remove the remaining decorative gradients and make the shell a clean frame. */
body.erp-app #loginView {
background: #eef2f0 !important;
padding: 18px !important;
}
body.erp-app .login-card {
max-width: 336px !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
}
body.erp-app .login-logo-frame {
margin: 0 0 8px !important;
}
body.erp-app .login-logo {
width: 84px !important;
max-width: 84px !important;
height: auto !important;
max-height: 68px !important;
filter: none !important;
}
body.erp-app .login-card form {
display: grid !important;
gap: 9px !important;
}
body.erp-app .login-card input {
padding: 0 14px !important;
border: 1px solid var(--wb-line-strong) !important;
background: #fff !important;
color: var(--wb-text) !important;
text-align: center !important;
box-shadow: none !important;
}
body.erp-app .login-card input:focus {
border-color: rgba(63, 122, 99, .48) !important;
box-shadow: 0 0 0 4px var(--wb-focus) !important;
}
body.erp-app .login-card #loginSubmitBtn {
margin-top: 2px !important;
border-color: var(--wb-accent) !important;
background: var(--wb-accent) !important;
color: #fff !important;
font-weight: 600 !important;
}
body.erp-app .login-card #loginSubmitBtn:hover:not(:disabled) {
background: var(--wb-accent-hover) !important;
border-color: var(--wb-accent-hover) !important;
}
body.erp-app #appView {
}
body.erp-app .sidebar {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
}
body.erp-app .workspace {
}
body.erp-app .workspace .content,
body.erp-app .workspace .view,
body.erp-app .workspace .view.active {
height: 100% !important;
min-height: 0 !important;
overflow: hidden !important;
}
body.erp-app .sidebar .brand {
justify-content: center !important;
border: 0 !important;
background: transparent !important;
}
body.erp-app .brand:hover {
background: transparent !important;
}
body.erp-app .brand img {
object-fit: contain !important;
filter: none !important;
}
body.erp-app .nav {
width: 100% !important;
flex: 1 1 auto !important;
flex-direction: column !important;
align-items: center !important;
}
body.erp-app .nav button {
position: relative !important;
width: 100% !important;
min-width: 0 !important;
border: 0 !important;
}
body.erp-app .nav button .nav-icon {
display: none !important;
}
body.erp-app .nav button span {
display: block !important;
width: 100% !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
white-space: nowrap !important;
}
body.erp-app .nav button:hover,
body.erp-app .nav button:focus-visible {
background: var(--wb-surface-soft) !important;
color: var(--wb-text) !important;
outline: none !important;
}
body.erp-app .nav button.active {
}
body.erp-app .nav button.active::before {
display: none !important;
}
body.erp-app .sidebar-user {
}
body.erp-app .user-menu {
width: 100% !important;
}
body.erp-app .user-name {
}
body.erp-app .user-name:hover,
body.erp-app .user-name:focus-visible {
border-color: var(--wb-line-strong) !important;
background: var(--wb-surface-soft) !important;
color: var(--wb-text) !important;
}
body.erp-app .user-popover {
position: absolute !important;
z-index: 120 !important;
}
body.erp-app .user-menu-action {
width: 100% !important;
}
body.erp-app .user-menu-action:hover,
body.erp-app .user-menu-action:focus-visible {
background: var(--wb-accent-soft) !important;
color: var(--wb-accent) !important;
}
body.erp-app .logout-action {
}
/* Shared quiet frame for every main work area. */
body.source-inbox-app .inbox-shell,
body.copywriting-app .workspaceShell,
body.erp-app .image-opt-shell,
body.erp-app .export-listing-shell {
height: 100% !important;
min-height: 0 !important;
background: var(--wb-surface) !important;
}
body.copywriting-app .workspaceShell {
}
body.source-inbox-app .inbox-toolbar,
body.copywriting-app .commandBar,
body.erp-app .image-opt-command-bar,
body.erp-app .export-listing-header,
body.infringement-app .library-toolbar,
body.templates-app .toolbar,
body.api-app .sidebar-head {
min-height: 56px !important;
height: 56px !important;
max-height: 56px !important;
padding: 0 18px !important;
border: 0 !important;
border-bottom: 1px solid var(--wb-line) !important;
border-radius: 0 !important;
background: var(--wb-surface) !important;
box-shadow: none !important;
}
body.copywriting-app .commandBar {
display: grid !important;
align-items: center !important;
}
body.copywriting-app .commandSideLeft {
justify-self: start !important;
display: flex !important;
align-items: center !important;
gap: 8px !important;
}
body.copywriting-app .commandMeta {
}
body.copywriting-app .commandSide[data-command-panel] {
display: none !important;
}
body.copywriting-app .commandBar[data-panel="preview"] .previewDangerZone,
body.copywriting-app .commandBar[data-panel="parse"] .parseDangerZone {
display: flex !important;
}
/* Buttons become small, calm and consistently rounded. */
body.source-inbox-app .inbox-action,
body.copywriting-app .commandSide button,
body.copywriting-app .workflowButton,
body.copywriting-app .selectionPromptButton,
body.copywriting-app .embeddedRemovalButton,
body.copywriting-app #parseResultBtn,
body.erp-app .page-clear-button,
body.erp-app .image-tool-button,
body.erp-app .image-open-doubao,
body.erp-app .image-inline-delete,
body.erp-app .image-transfer-export,
body.erp-app .export-mapping-button,
body.erp-app .export-complete-button,
body.erp-app .export-quiet-delete,
body.erp-app .system-check-button,
body.erp-app .account-add-button,
body.erp-app .account-editor-primary,
body.erp-app .account-editor-secondary,
body.erp-app .modal-btn,
body.infringement-app .button,
body.api-app .action-button,
body.api-app .quick-button,
body.api-app .icon-button,
body.templates-app .primary,
body.templates-app .secondary,
body.watermark-app .primary,
body.watermark-app .secondary,
body.watermark-app .white {
min-height: 32px !important;
height: 32px !important;
max-height: 32px !important;
padding: 0 14px !important;
border: 1px solid var(--wb-line-strong) !important;
border-radius: 9px !important;
background: #fff !important;
color: var(--wb-muted) !important;
font-size: 12px !important;
font-weight: 600 !important;
line-height: 30px !important;
white-space: nowrap !important;
box-shadow: none !important;
text-shadow: none !important;
}
body.source-inbox-app .inbox-action:hover:not(:disabled),
body.copywriting-app .commandSide button:hover:not(:disabled),
body.copywriting-app .workflowButton:hover:not(:disabled),
body.copywriting-app .selectionPromptButton:hover:not(:disabled),
body.copywriting-app .embeddedRemovalButton:hover:not(:disabled),
body.erp-app .page-clear-button:hover:not(:disabled),
body.erp-app .image-tool-button:hover:not(:disabled),
body.erp-app .image-open-doubao:hover:not(:disabled),
body.erp-app .image-transfer-export:hover:not(:disabled),
body.erp-app .export-mapping-button:hover:not(:disabled),
body.erp-app .export-complete-button:hover:not(:disabled),
body.erp-app .system-check-button:hover:not(:disabled),
body.erp-app .account-editor-secondary:hover:not(:disabled),
body.erp-app .modal-btn:hover:not(:disabled),
body.infringement-app .button:hover:not(:disabled),
body.api-app .action-button:hover:not(:disabled),
body.api-app .quick-button:hover:not(:disabled),
body.api-app .icon-button:hover:not(:disabled),
body.templates-app .primary:hover:not(:disabled),
body.templates-app .secondary:hover:not(:disabled),
body.watermark-app .primary:hover:not(:disabled),
body.watermark-app .secondary:hover:not(:disabled),
body.watermark-app .white:hover:not(:disabled) {
border-color: var(--wb-line-strong) !important;
background: var(--wb-surface-soft) !important;
color: var(--wb-text) !important;
box-shadow: none !important;
}
body.source-inbox-app .inbox-action.primary,
body.copywriting-app .selectionPromptButton,
body.copywriting-app .embeddedRemovalButton.primary,
body.erp-app .image-open-doubao,
body.erp-app .image-transfer-export,
body.erp-app .export-mapping-button:not(.secondary),
body.erp-app .export-complete-button,
body.erp-app .system-check-button.primary,
body.erp-app .account-add-button,
body.erp-app .account-editor-primary,
body.erp-app .modal-btn.confirm:not(.danger),
body.infringement-app .button.primary,
body.api-app .action-button.primary,
body.templates-app .primary,
body.watermark-app .primary,
body.watermark-app .sync {
border-color: var(--wb-accent) !important;
background: var(--wb-accent) !important;
color: #fff !important;
}
body.source-inbox-app .inbox-action.primary:hover:not(:disabled),
body.copywriting-app .selectionPromptButton:hover:not(:disabled),
body.copywriting-app .embeddedRemovalButton.primary:hover:not(:disabled),
body.erp-app .image-open-doubao:hover:not(:disabled),
body.erp-app .image-transfer-export:hover:not(:disabled),
body.erp-app .export-mapping-button:not(.secondary):hover:not(:disabled),
body.erp-app .export-complete-button:hover:not(:disabled),
body.erp-app .system-check-button.primary:hover:not(:disabled),
body.erp-app .account-add-button:hover:not(:disabled),
body.erp-app .account-editor-primary:hover:not(:disabled),
body.erp-app .modal-btn.confirm:not(.danger):hover:not(:disabled),
body.infringement-app .button.primary:hover:not(:disabled),
body.api-app .action-button.primary:hover:not(:disabled),
body.templates-app .primary:hover:not(:disabled),
body.watermark-app .primary:hover:not(:disabled),
body.watermark-app .sync:hover:not(:disabled) {
border-color: var(--wb-accent-hover) !important;
background: var(--wb-accent-hover) !important;
color: #fff !important;
}
body.source-inbox-app .inbox-action.danger,
body.copywriting-app .selectionDeleteButton,
body.copywriting-app .embeddedRemovalButton.danger,
body.erp-app .image-inline-delete,
body.erp-app .export-quiet-delete,
body.infringement-app .button.danger {
border-color: rgba(164, 93, 87, .18) !important;
background: var(--wb-danger-soft) !important;
color: var(--wb-danger) !important;
}
body.source-inbox-app .inbox-action.danger:hover:not(:disabled),
body.copywriting-app .selectionDeleteButton:hover:not(:disabled),
body.copywriting-app .embeddedRemovalButton.danger:hover:not(:disabled),
body.erp-app .image-inline-delete:hover:not(:disabled),
body.erp-app .export-quiet-delete:hover:not(:disabled),
body.infringement-app .button.danger:hover:not(:disabled) {
background: #f5e7e5 !important;
color: var(--wb-danger-hover) !important;
}
body.source-inbox-app button:disabled,
body.copywriting-app button:disabled,
body.erp-app button:disabled,
body.infringement-app button:disabled,
body.api-app button:disabled,
body.templates-app button:disabled,
body.watermark-app button:disabled {
cursor: not-allowed !important;
border-color: var(--wb-line) !important;
background: var(--wb-surface-soft) !important;
color: #a4afa8 !important;
opacity: 1 !important;
box-shadow: none !important;
text-shadow: none !important;
}
body.erp-app .page-clear-button,
body.copywriting-app .pageClearButton,
body.source-inbox-app #clearAllBtn {
min-width: 104px !important;
}
body.copywriting-app .workflowActions {
display: inline-flex !important;
}
body.copywriting-app .workflowButton {
line-height: 24px !important;
}
body.copywriting-app .workflowButton[aria-pressed="true"],
body.copywriting-app .workflowButton.active {
border: 0 !important;
background: #fff !important;
color: var(--wb-accent) !important;
box-shadow: 0 1px 4px rgba(32, 40, 36, .07) !important;
}
/* Unified table base. */
body.source-inbox-app .inbox-table,
body.copywriting-app #dataTable,
body.copywriting-app #outputTable,
body.copywriting-app #embeddedRemovalTable,
body.erp-app #imageOptimizationTable,
body.erp-app #exportListingTable,
body.erp-app .account-table {
font-size: 13px !important;
color: var(--wb-text) !important;
border-collapse: separate !important;
border-spacing: 0 !important;
}
body.source-inbox-app .inbox-table thead th,
body.copywriting-app #dataTable th,
body.copywriting-app #outputTable th,
body.copywriting-app #embeddedRemovalTable th,
body.erp-app #imageOptimizationTable th,
body.erp-app #exportListingTable th,
body.erp-app .account-table-header {
height: 40px !important;
min-height: 40px !important;
padding: 7px 10px !important;
border: 0 !important;
border-bottom: 1px solid var(--wb-line) !important;
background: #fafcfb !important;
color: #6d7b73 !important;
font-size: 12px !important;
font-weight: 650 !important;
line-height: 18px !important;
vertical-align: middle !important;
white-space: nowrap !important;
}
body.source-inbox-app .inbox-table tbody td,
body.copywriting-app #dataTable td,
body.copywriting-app #outputTable td,
body.copywriting-app #embeddedRemovalTable td,
body.erp-app #exportListingTable td,
body.erp-app .account-table-row {
height: 58px !important;
min-height: 58px !important;
padding: 7px 10px !important;
border: 0 !important;
border-bottom: 1px solid var(--wb-line) !important;
background: #fff !important;
color: var(--wb-text) !important;
line-height: 19px !important;
vertical-align: middle !important;
}
body.source-inbox-app .inbox-table tbody tr:last-child td,
body.copywriting-app #dataTable tbody tr:last-child td,
body.copywriting-app #outputTable tbody tr:last-child td,
body.copywriting-app #embeddedRemovalTable tbody tr:last-child td,
body.erp-app #exportListingTable tbody tr:last-child td,
body.erp-app .account-table-row:last-child {
border-bottom: 0 !important;
}
body.source-inbox-app .inbox-table tbody tr:hover td,
body.copywriting-app #dataTable tbody tr:hover td,
body.copywriting-app #outputTable tbody tr:hover td,
body.copywriting-app #embeddedRemovalTable tbody tr:hover td,
body.erp-app #imageOptimizationTable tbody tr:hover td,
body.erp-app #exportListingTable tbody tr:hover td,
body.erp-app .account-table-row:hover {
background: #f8faf8 !important;
}
body.source-inbox-app .inbox-row.selected td,
body.source-inbox-app .inbox-row.selected:hover td,
body.copywriting-app #dataTable tbody tr.selected td,
body.copywriting-app #embeddedRemovalTable tbody tr.selected td,
body.erp-app #imageOptimizationTable tbody tr.selected td,
body.erp-app #exportListingTable tbody tr.selected td {
background: var(--wb-accent-softer) !important;
box-shadow: none !important;
}
body.source-inbox-app input[type="checkbox"],
body.copywriting-app input[type="checkbox"],
body.erp-app input[type="checkbox"] {
width: 16px !important;
height: 16px !important;
min-width: 16px !important;
min-height: 16px !important;
margin: 0 !important;
accent-color: var(--wb-accent) !important;
border-radius: 5px !important;
}
body.source-inbox-app .inbox-pagination,
body.erp-app .workflow-pagination,
body.copywriting-app .copywritingPager,
body.infringement-app .pagination {
min-height: 44px !important;
height: 44px !important;
max-height: 44px !important;
padding: 0 18px !important;
border: 0 !important;
border-top: 1px solid var(--wb-line) !important;
background: #fff !important;
}
body.source-inbox-app #pageSizeSelect,
body.source-inbox-app .inbox-pagination button,
body.erp-app .workflow-pagination button,
body.copywriting-app .copywritingPager button,
body.infringement-app .pagination button,
body.infringement-app .page-jump button {
height: 28px !important;
min-height: 28px !important;
max-height: 28px !important;
padding: 0 10px !important;
border: 1px solid var(--wb-line) !important;
border-radius: 8px !important;
background: #fff !important;
color: var(--wb-muted) !important;
font-size: 12px !important;
font-weight: 600 !important;
line-height: 26px !important;
white-space: nowrap !important;
}
body.source-inbox-app .inbox-empty,
body.source-inbox-app .inbox-error-state,
body.copywriting-app .emptyCell,
body.copywriting-app .embeddedRemovalEmpty,
body.infringement-app .empty-state,
body.templates-app .empty {
min-height: 240px !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
gap: 8px !important;
color: #97a49c !important;
background: transparent !important;
font-size: 12px !important;
text-align: center !important;
}
body.source-inbox-app .inbox-empty::before,
body.source-inbox-app .inbox-error-state::before,
body.copywriting-app .emptyCell::before,
body.copywriting-app .embeddedRemovalEmpty::before,
body.infringement-app .empty-state::before,
body.templates-app .empty::before {
content: "" !important;
width: 38px !important;
height: 38px !important;
display: block !important;
border: 1px solid var(--wb-line) !important;
border-radius: 12px !important;
background:
linear-gradient(135deg, var(--wb-accent-soft), #fff) !important;
box-shadow: none !important;
}
/* Copywriting table: readable cells with quiet actions. */
body.copywriting-app .contentCard {
border: 0 !important;
border-radius: 0 !important;
background: #fff !important;
}
body.copywriting-app .previewTableWrap,
body.copywriting-app .embeddedRemovalTableWrap,
body.copywriting-app .outputTableWrap {
border: 0 !important;
border-radius: 0 !important;
background: #fff !important;
}
body.copywriting-app #dataTable,
body.copywriting-app #embeddedRemovalTable,
body.copywriting-app #outputTable {
width: 100% !important;
min-width: 1180px !important;
max-width: none !important;
table-layout: fixed !important;
}
body.copywriting-app #dataTable td,
body.copywriting-app #embeddedRemovalTable td,
body.copywriting-app #outputTable td {
height: 58px !important;
max-height: 58px !important;
padding: 6px 8px !important;
overflow: hidden !important;
}
body.copywriting-app .copyableCell {
position: relative !important;
display: grid !important;
grid-template-columns: minmax(0, 1fr) 24px !important;
gap: 4px !important;
align-items: center !important;
padding: 0 !important;
}
body.copywriting-app .cellClamp {
display: -webkit-box !important;
max-height: 38px !important;
overflow: hidden !important;
-webkit-box-orient: vertical !important;
-webkit-line-clamp: 2 !important;
line-clamp: 2 !important;
line-height: 17px !important;
text-align: left !important;
overflow-wrap: anywhere !important;
}
body.copywriting-app td.col-name .cellClamp,
body.copywriting-app td.col-long .cellClamp {
text-align: left !important;
}
body.copywriting-app .cellCopyButton {
position: static !important;
width: 22px !important;
height: 22px !important;
min-width: 22px !important;
border-radius: 7px !important;
background: transparent !important;
color: #a2aea7 !important;
opacity: 0 !important;
transform: none !important;
}
body.copywriting-app .cellCopyButton:hover {
background: var(--wb-surface-soft) !important;
color: var(--wb-accent) !important;
}
body.copywriting-app td:hover .cellCopyButton {
opacity: 1 !important;
transform: none !important;
}
body.copywriting-app .tableFootnote {
min-height: 44px !important;
padding: 0 18px !important;
border-top: 1px solid var(--wb-line) !important;
background: #fff !important;
}
body.copywriting-app .copywritingPager {
}
body.copywriting-app .parseWorkspace {
}
body.copywriting-app .parseInputPane,
body.copywriting-app .embeddedRemovalPane {
}
body.copywriting-app .editor {
border: 1px solid var(--wb-line) !important;
border-radius: 10px !important;
background: #fff !important;
}
/* Image optimization and export direct workbenches. */
body.erp-app .image-opt-command-bar,
body.erp-app .export-listing-header {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
gap: 12px !important;
}
body.erp-app .image-opt-selection-tools,
body.erp-app .export-listing-actions,
body.erp-app .export-mapping-center {
display: flex !important;
align-items: center !important;
justify-content: center !important;
gap: 7px !important;
}
body.erp-app .image-opt-table-wrap,
body.erp-app .export-listing-table-wrap {
border: 0 !important;
border-radius: 0 !important;
background: #fff !important;
box-shadow: none !important;
overflow: auto !important;
}
body.erp-app .image-opt-table-wrap table,
body.erp-app .export-listing-table-wrap table {
width: max(100%, 1180px) !important;
min-width: max(100%, 1180px) !important;
table-layout: auto !important;
}
body.erp-app .image-opt-table-wrap th,
body.erp-app .export-listing-table-wrap th {
position: sticky !important;
top: 0 !important;
z-index: 4 !important;
height: 40px !important;
min-height: 40px !important;
padding: 7px 9px !important;
border-right: 0 !important;
border-bottom: 1px solid var(--wb-line) !important;
background: #fafcfb !important;
color: #6d7b73 !important;
font-size: 12px !important;
font-weight: 650 !important;
text-align: center !important;
}
body.erp-app .image-opt-table-wrap td,
body.erp-app .export-listing-table-wrap td {
min-height: 56px !important;
padding: 7px 9px !important;
border-right: 0 !important;
border-bottom: 1px solid var(--wb-line) !important;
background: #fff !important;
color: var(--wb-text) !important;
font-size: 12px !important;
vertical-align: middle !important;
}
body.erp-app .image-opt-thumbnail,
body.erp-app .export-optimized-thumb,
body.erp-app .image-placeholder,
body.erp-app .optimized-placeholder {
width: 54px !important;
height: 54px !important;
min-width: 54px !important;
border: 1px solid var(--wb-line) !important;
border-radius: 10px !important;
object-fit: contain !important;
}
body.erp-app .workflow-pagination {
display: flex !important;
align-items: center !important;
justify-content: flex-end !important;
gap: 8px !important;
}
/* Accounts, system check and other shell-owned pages. */
body.erp-app .view-accounts,
body.erp-app .view-system-check {
padding: 16px !important;
overflow: auto !important;
background: var(--wb-page-soft) !important;
}
body.erp-app .accounts-page-minimal,
body.erp-app .system-check-page {
}
body.erp-app .accounts-shell-minimal {
}
body.erp-app .accounts-primary-action {
}
body.erp-app .accounts-list-panel,
body.erp-app .system-check-list {
}
body.erp-app .account-table {
}
body.erp-app .account-table-header,
body.erp-app .account-table-row {
}
body.erp-app .account-table-header {
}
body.erp-app .account-table-row {
}
body.erp-app .account-more-button {
box-shadow: none !important;
}
body.erp-app .account-more-button:hover {
border-color: var(--wb-line-strong) !important;
background: var(--wb-surface-soft) !important;
color: var(--wb-text) !important;
}
body.erp-app .system-check-page {
}
body.erp-app .system-check-header {
}
body.erp-app .system-check-row {
}
/* Infringement and template pages share one centered library surface. */
body.infringement-app .library-page,
body.templates-app .template-page {
background: var(--wb-page-soft) !important;
}
body.infringement-app .library-card,
body.templates-app .template-card {
grid-template-rows: 56px auto minmax(0, 1fr) auto !important;
}
body.infringement-app .library-toolbar,
body.templates-app .toolbar {
grid-row: 1 !important;
}
body.infringement-app .count-dashboard,
body.templates-app .count-dashboard {
grid-row: 2 !important;
align-items: center !important;
}
body.infringement-app .metric-card,
body.templates-app .metric-card {
grid-template-columns: auto auto 1fr !important;
}
body.infringement-app .metric-card .metric-value,
body.templates-app .metric-card .metric-value {
}
body.infringement-app .metric-card .metric-value strong,
body.templates-app .metric-card .metric-value strong {
}
body.infringement-app .metric-card .metric-foot,
body.templates-app .metric-card .metric-foot {
justify-self: end !important;
}
/* API settings as a quieter two-pane editor. */
body.api-app .api-page {
width: 100% !important;
max-width: 100% !important;
grid-template-columns: 240px minmax(0, 1fr) !important;
background: var(--wb-page-soft) !important;
}
body.api-app .api-sidebar {
}
body.api-app .sidebar-head {
}
body.api-app .connection-list {
}
body.api-app .connection-card {
}
body.api-app .connection-card.active {
}
body.api-app .connection-card:hover {
border-color: var(--wb-line-strong) !important;
background: var(--wb-surface-soft) !important;
}
body.api-app .panel-card,
body.api-app .result-card,
body.api-app .empty-panel {
border: 1px solid var(--wb-line) !important;
border-radius: 14px !important;
background: #fff !important;
box-shadow: none !important;
}
body.api-app .editor-body {
}
body.api-app .field input,
body.api-app .field select,
body.api-app .field textarea,
body.api-app .provider-select select {
min-height: 36px !important;
border-color: var(--wb-line-strong) !important;
border-radius: 9px !important;
background: #fff !important;
}
body.api-app .editor-actions {
}
/* Shared overlays: tighter, centered, quiet. */
body.erp-app .modal-backdrop,
body.erp-app .account-editor-backdrop,
body.erp-app .product-detail-backdrop,
body.erp-app .erp-image-zoom-backdrop,
body.infringement-app .dialog-backdrop {
background: rgba(25, 33, 29, .24) !important;
backdrop-filter: blur(3px) !important;
-webkit-backdrop-filter: blur(3px) !important;
}
body.erp-app .system-modal,
body.erp-app .account-editor-modal,
body.erp-app .export-file-modal,
body.erp-app .watermark-tool-modal,
body.erp-app .erp-image-zoom-dialog,
body.infringement-app .dialog-card {
border: 1px solid var(--wb-line) !important;
border-radius: 16px !important;
background: #fff !important;
box-shadow: var(--wb-shadow-modal) !important;
}
body.erp-app .system-modal {
}
body.erp-app .system-modal-copy {
}
body.erp-app .system-modal-copy h2 {
margin: 0 0 6px !important;
font-weight: 650 !important;
}
body.erp-app .system-modal-copy p {
margin: 0 !important;
}
body.erp-app #systemModal .system-modal-actions,
body.erp-app #exportFileModal .export-file-modal-actions,
body.erp-app .account-editor-actions,
body.infringement-app .dialog-footer {
display: flex !important;
align-items: center !important;
justify-content: center !important;
gap: 14px !important;
padding: 12px 16px !important;
border-top: 1px solid var(--wb-line) !important;
background: #fff !important;
}
body.erp-app #systemModal .modal-btn,
body.erp-app #exportFileModal .modal-btn,
body.erp-app .account-editor-actions button,
body.infringement-app .dialog-footer .button {
min-width: 104px !important;
}
body.erp-app .account-editor-modal {
}
body.erp-app .export-file-modal {
}
body.erp-app .account-editor-header,
body.erp-app .product-detail-header {
border-bottom: 1px solid var(--wb-line) !important;
background: #fff !important;
}
body.erp-app .account-editor-header h2,
body.erp-app .product-detail-header h2 {
font-weight: 650 !important;
}
body.erp-app .account-editor-close,
body.erp-app .product-detail-close {
border: 1px solid var(--wb-line) !important;
background: #fff !important;
color: var(--wb-muted) !important;
box-shadow: none !important;
}
body.erp-app .product-detail-backdrop {
display: grid !important;
justify-items: end !important;
padding: 10px !important;
}
body.erp-app .product-detail-drawer {
max-width: 680px !important;
background: #fff !important;
overflow: hidden !important;
}
body.erp-app .product-detail-body {
overflow: auto !important;
}
body.erp-app .product-detail-body section,
body.erp-app .product-detail-body .detail-section {
border: 0 !important;
border-radius: 0 !important;
background: transparent !important;
}
body.erp-app .product-detail-body .detail-section + .detail-section,
body.erp-app .product-detail-body section + section {
border-top: 1px solid var(--wb-line) !important;
}
/* Toasts and floating feedback stay clean. */
body.erp-app .erp-toast,
body.source-inbox-app .inbox-toast,
body.copywriting-app .moduleToast,
body.infringement-app .module-toast,
body.api-app .module-toast,
body.templates-app .toast,
body.watermark-app .watermark-toast {
border-radius: 12px !important;
box-shadow: 0 18px 46px rgba(25, 33, 29, .16) !important;
background: rgba(32, 40, 36, .96) !important;
color: #fff !important;
font-size: 12px !important;
}
/* Subtle, stable scrollbars across all frames. */
body.erp-app ::-webkit-scrollbar,
body.source-inbox-app ::-webkit-scrollbar,
body.copywriting-app ::-webkit-scrollbar,
body.infringement-app ::-webkit-scrollbar,
body.api-app ::-webkit-scrollbar,
body.templates-app ::-webkit-scrollbar,
body.watermark-app ::-webkit-scrollbar {
width: 8px !important;
height: 8px !important;
}
body.erp-app ::-webkit-scrollbar-thumb,
body.source-inbox-app ::-webkit-scrollbar-thumb,
body.copywriting-app ::-webkit-scrollbar-thumb,
body.infringement-app ::-webkit-scrollbar-thumb,
body.api-app ::-webkit-scrollbar-thumb,
body.templates-app ::-webkit-scrollbar-thumb,
body.watermark-app ::-webkit-scrollbar-thumb {
border: 2px solid transparent !important;
border-radius: 999px !important;
background: rgba(43, 55, 48, .18) !important;
background-clip: padding-box !important;
}
@media (prefers-reduced-motion: reduce) {
body.erp-app *,
body.source-inbox-app *,
body.copywriting-app *,
body.infringement-app *,
body.api-app *,
body.templates-app *,
body.watermark-app * {
animation-duration: .01ms !important;
animation-iteration-count: 1 !important;
transition-duration: .01ms !important;
scroll-behavior: auto !important;
}
}
/* ============================================================
Final deterministic layer
These rules exist only to settle historical overrides that were
introduced by earlier visual layers with !important. Keeping them
at the end of the final CSS file prevents those older declarations
from creating a mixed, left/right or inset layout.
============================================================ */
/* Full-frame shell for every main standalone work area. */
body.source-inbox-app .inbox-shell,
body.copywriting-app .workspaceShell,
body.erp-app .image-opt-shell,
body.erp-app .export-listing-shell,
body.infringement-app .library-page,
body.templates-app .template-page,
body.api-app .api-page {
position: relative !important;
width: 100% !important;
min-width: 0 !important;
max-width: none !important;
height: 100% !important;
min-height: 0 !important;
max-height: 100vh !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
border-radius: 0 !important;
overflow: hidden !important;
box-shadow: none !important;
}
body.source-inbox-app .inbox-shell,
body.copywriting-app .workspaceShell,
body.erp-app .image-opt-shell,
body.erp-app .export-listing-shell {
display: grid !important;
}
body.copywriting-app .workspaceShell,
body.erp-app .image-opt-shell,
body.erp-app .export-listing-shell {
grid-template-columns: minmax(0, 1fr) !important;
grid-template-rows: 56px minmax(0, 1fr) !important;
background: var(--wb-surface) !important;
}
body.infringement-app .library-page,
body.templates-app .template-page {
background: var(--wb-surface) !important;
}
body.infringement-app .library-card,
body.templates-app .template-card {
position: relative !important;
inset: auto !important;
max-height: none !important;
}
body.infringement-app .library-toolbar,
body.templates-app .toolbar {
position: relative !important;
flex: 0 0 56px !important;
width: 100% !important;
max-width: none !important;
margin: 0 !important;
display: flex !important;
align-items: center !important;
box-shadow: none !important;
}
body.infringement-app .count-dashboard,
body.templates-app .count-dashboard {
flex: 0 0 auto !important;
width: 100% !important;
margin: 0 !important;
display: block !important;
box-shadow: none !important;
}
body.infringement-app .metric-card,
body.templates-app .metric-card {
display: flex !important;
align-items: center !important;
border: 0 !important;
border-radius: 0 !important;
background: transparent !important;
box-shadow: none !important;
}
body.infringement-app .metric-card .metric-value,
body.templates-app .metric-card .metric-value {
display: inline-flex !important;
align-items: baseline !important;
gap: 4px !important;
color: var(--wb-muted) !important;
}
body.infringement-app .metric-card .metric-value strong,
body.templates-app .metric-card .metric-value strong {
color: var(--wb-text) !important;
font-variant-numeric: tabular-nums !important;
}
/* API settings: one full-frame surface, no old two-pane shell. */
body.api-app .api-page {
display: flex !important;
flex-direction: column !important;
align-items: stretch !important;
justify-content: flex-start !important;
background: var(--wb-surface) !important;
}
body.api-app .api-sidebar {
position: relative !important;
top: auto !important;
right: auto !important;
bottom: auto !important;
left: auto !important;
flex: 1 1 auto !important;
flex-direction: column !important;
max-width: none !important;
margin: 0 !important;
}
body.api-app .sidebar-head {
position: relative !important;
top: auto !important;
right: auto !important;
left: auto !important;
border-radius: 0 !important;
box-shadow: none !important;
}
body.api-app .sidebar-head > div:first-child,
body.api-app .sidebar-head h1 {
display: none !important;
}
body.api-app .sidebar-head .sidebar-tools {
margin-left: auto !important;
}
body.api-app .connection-list {
margin: 0 !important;
grid-auto-rows: max-content !important;
background: var(--wb-surface) !important;
}
body.api-app .connection-empty {
grid-column: 1 / -1 !important;
box-shadow: none !important;
}
body.api-app .connection-card {
grid-template-columns: auto minmax(0, 1fr) auto !important;
grid-template-rows: auto auto !important;
align-content: center !important;
text-align: left !important;
color: var(--wb-text) !important;
transform: none !important;
}
body.api-app .connection-card:hover {
border-color: rgba(63, 122, 99, .28) !important;
background: var(--wb-accent-softer) !important;
box-shadow: none !important;
transform: none !important;
}
body.api-app .connection-card.active {
box-shadow: none !important;
}
body.api-app .provider-dot,
body.api-app .provider-dot.deepseek,
body.api-app .provider-dot.r2,
body.api-app .editor-badge,
body.api-app .editor-badge.deepseek,
body.api-app .editor-badge.r2 {
width: 46px !important;
min-width: 46px !important;
height: 30px !important;
min-height: 30px !important;
grid-row: 1 / 3 !important;
margin: 0 !important;
padding: 0 8px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
border-radius: 9px !important;
background: var(--wb-accent-soft) !important;
color: var(--wb-accent) !important;
font-size: 12px !important;
font-weight: 760 !important;
line-height: 1 !important;
}
body.api-app .connection-card .connection-meta {
grid-column: 2 / 4 !important;
grid-row: 1 !important;
justify-content: space-between !important;
}
body.api-app .connection-card strong {
min-width: 0 !important;
}
body.api-app .connection-card small,
body.api-app .connection-card .connection-state {
min-width: 0 !important;
color: var(--wb-muted) !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
white-space: nowrap !important;
}
body.api-app .connection-card small {
grid-column: 2 !important;
grid-row: 2 !important;
align-self: center !important;
}
body.api-app .connection-card .connection-state {
flex: 0 0 auto !important;
}
body.api-app .api-workspace,
body.api-app .api-workspace:has(.empty-editor:not(.hidden)) {
display: none !important;
width: auto !important;
max-width: none !important;
height: auto !important;
min-height: 0 !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
border-radius: 0 !important;
background: var(--wb-surface) !important;
box-shadow: none !important;
overflow: hidden !important;
}
body.api-app .api-page:has(.connection-form:not(.hidden)) {
display: flex !important;
flex-direction: column !important;
align-items: stretch !important;
justify-content: flex-start !important;
width: 100% !important;
min-width: 0 !important;
max-width: none !important;
height: 100% !important;
min-height: 0 !important;
max-height: 100vh !important;
margin: 0 !important;
padding: 0 !important;
overflow: hidden !important;
}
body.api-app .api-page:has(.connection-form:not(.hidden)) .api-sidebar {
flex: 0 0 214px !important;
width: 100% !important;
min-width: 0 !important;
max-width: none !important;
margin: 0 !important;
padding: 0 !important;
border-right: 0 !important;
border-bottom: 1px solid var(--wb-line) !important;
}
body.api-app .api-page:has(.connection-form:not(.hidden)) .connection-list {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
padding: 12px 18px !important;
}
body.api-app .api-page:has(.connection-form:not(.hidden)) .api-workspace {
display: block !important;
flex: 1 1 auto !important;
width: 100% !important;
min-width: 0 !important;
max-width: none !important;
height: auto !important;
min-height: 0 !important;
margin: 0 !important;
padding: 0 !important;
overflow: auto !important;
border: 0 !important;
border-top: 1px solid var(--wb-line) !important;
background: var(--wb-page-soft) !important;
}
body.api-app .connection-form {
border: 0 !important;
border-radius: 0 !important;
background: var(--wb-surface) !important;
box-shadow: none !important;
}
body.api-app .editor-bar {
flex: 0 0 56px !important;
width: 100% !important;
margin: 0 !important;
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
gap: 12px !important;
border: 0 !important;
}
body.api-app .editor-body {
min-height: 0 !important;
}
body.api-app .panel-card,
body.api-app .result-card {
}
body.api-app .editor-actions {
margin: 0 !important;
border: 0 !important;
border-radius: 0 !important;
}
body.api-app .quick-actions {
position: absolute !important;
left: auto !important;
width: 208px !important;
margin: 0 !important;
padding: 6px !important;
border: 1px solid var(--wb-line) !important;
border-radius: 12px !important;
background: rgba(255, 255, 255, .98) !important;
box-shadow: var(--wb-shadow-pop) !important;
}
/* Neutralize old hard-coded provider and warning palettes. */
body.api-app .quick-button.deepseek,
body.api-app .quick-button.r2,
body.api-app .action-button.deepseek,
body.api-app .action-button.r2 {
border-color: var(--wb-line-strong) !important;
background: var(--wb-accent-soft) !important;
color: var(--wb-accent) !important;
}
body.api-app .status-pill,
body.api-app .status-pill.green,
body.api-app .status-pill.orange,
body.infringement-app .status-pill,
body.templates-app .status-pill {
border-color: rgba(63, 122, 99, .18) !important;
background: var(--wb-accent-soft) !important;
color: var(--wb-accent) !important;
box-shadow: none !important;
}
body.api-app .result-card.warning,
body.copywriting-app .copy-status.working,
body.erp-app .mapping-status-badge.warning,
body.erp-app .system-check-badge.warn {
border-color: rgba(143, 113, 61, .24) !important;
background: var(--wb-warning-soft) !important;
color: var(--wb-warning) !important;
}
/* Accounts and system check share the same quiet centered treatment. */
body.erp-app .view-accounts,
body.erp-app .view-system-check {
padding: 0 !important;
overflow: hidden !important;
background: var(--wb-surface) !important;
}
body.erp-app .accounts-page-minimal,
body.erp-app .system-check-page {
width: 100% !important;
max-width: none !important;
min-height: 100% !important;
height: 100% !important;
margin: 0 auto !important;
padding: 0 !important;
overflow: hidden !important;
background: var(--wb-page-soft) !important;
}
body.erp-app .accounts-shell-minimal,
body.erp-app .system-check-page {
margin: 0 auto !important;
padding: 22px 20px !important;
display: flex !important;
flex-direction: column !important;
justify-content: flex-start !important;
background: transparent !important;
}
body.erp-app .accounts-list-panel,
body.erp-app .system-check-list {
width: 100% !important;
margin: 0 !important;
border: 1px solid var(--wb-line) !important;
background: var(--wb-surface) !important;
box-shadow: none !important;
}
body.erp-app .accounts-primary-action {
}
body.erp-app .system-check-page {
}
/* Guard against old centered/content-card rules leaking in at narrow widths. */
@media (max-width: 1100px) {
body.api-app .connection-list {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
}
@media (max-width: 760px) {
body.api-app .connection-list,
body.infringement-app .term-grid,
body.templates-app .template-grid {
grid-template-columns: 1fr !important;
}
body.api-app .connection-card {
min-height: 76px !important;
}
body.erp-app .image-opt-command-bar,
body.erp-app .export-listing-header {
height: auto !important;
min-height: 56px !important;
max-height: none !important;
flex-wrap: wrap !important;
padding-top: 8px !important;
padding-bottom: 8px !important;
row-gap: 6px !important;
}
}
/* Shell separation and reliable account menu layering.
These final rules keep the sidebar and workspace as distinct rounded
surfaces, and let the account popover sit above embedded iframe content. */
body.erp-app #appView {
gap: 10px !important;
}
body.erp-app .sidebar {
position: relative !important;
z-index: 20 !important;
isolation: isolate !important;
border-right: 1px solid var(--wb-line) !important;
}
body.erp-app .workspace {
border-left: 1px solid var(--wb-line) !important;
}
body.erp-app .sidebar-user {
position: relative !important;
margin-top: auto !important;
padding: 10px 0 0 !important;
border: 0 !important;
background: transparent !important;
}
body.erp-app .user-menu {
position: relative !important;
z-index: 30 !important;
}
body.erp-app .user-popover {
opacity: 0 !important;
visibility: hidden !important;
pointer-events: none !important;
transition: opacity .14s ease, transform .14s ease, visibility 0s linear .14s !important;
}
body.erp-app .user-menu.open .user-popover {
opacity: 1 !important;
visibility: visible !important;
pointer-events: auto !important;
transform: none !important;
transition-delay: 0s !important;
}
body.erp-app .user-name {
position: relative !important;
z-index: 2 !important;
cursor: pointer !important;
}
/* 统一四个工作页的“暂无数据”空状态。
空数据时隐藏无意义的表头/说明条，使文案居中显示在可用内容区。 */
body.erp-app .image-opt-table-wrap:has(.centered-empty-state),
body.erp-app .export-listing-table-wrap:has(.centered-empty-state),
body.copywriting-app .previewTableWrap:has(.centeredEmptyState),
body.copywriting-app .embeddedRemovalTableWrap:has(.embeddedRemovalEmptyState) {
display: grid !important;
place-items: stretch !important;
width: 100% !important;
height: 100% !important;
min-height: 0 !important;
max-height: none !important;
padding: 0 !important;
overflow: hidden !important;
}
body.erp-app .image-opt-table-wrap:has(.centered-empty-state) table,
body.erp-app .export-listing-table-wrap:has(.centered-empty-state) table,
body.copywriting-app .previewTableWrap:has(.centeredEmptyState) table,
body.copywriting-app .embeddedRemovalTableWrap:has(.embeddedRemovalEmptyState) table {
display: flex !important;
flex-direction: column !important;
width: 100% !important;
min-width: 100% !important;
max-width: 100% !important;
height: 100% !important;
min-height: 0 !important;
margin: 0 !important;
overflow: hidden !important;
}
body.erp-app .image-opt-table-wrap tbody:has(.centered-empty-state),
body.erp-app .export-listing-table-wrap tbody:has(.centered-empty-state),
body.copywriting-app .previewTableWrap tbody:has(.centeredEmptyState),
body.copywriting-app .embeddedRemovalTableWrap tbody:has(.embeddedRemovalEmptyState) {
display: flex !important;
flex-direction: column !important;
flex: 1 1 auto !important;
width: 100% !important;
height: 100% !important;
min-height: 0 !important;
}
body.erp-app .image-opt-table-wrap tr:has(.centered-empty-state),
body.erp-app .export-listing-table-wrap tr:has(.centered-empty-state),
body.copywriting-app .previewTableWrap tr:has(.centeredEmptyState),
body.copywriting-app .embeddedRemovalTableWrap tr:has(.embeddedRemovalEmptyState) {
display: flex !important;
flex: 1 1 100% !important;
width: 100% !important;
height: 100% !important;
min-height: 0 !important;
}
body.erp-app .image-opt-table-wrap td:has(.image-empty-cell),
body.erp-app .export-listing-table-wrap td:has(.export-listing-empty),
body.copywriting-app .previewTableWrap td:has(.emptyCell),
body.copywriting-app .embeddedRemovalTableWrap td:has(.embeddedRemovalEmpty) {
display: flex !important;
align-items: center !important;
justify-content: center !important;
flex: 1 1 100% !important;
width: 100% !important;
height: 100% !important;
min-height: 0 !important;
max-height: none !important;
padding: 0 !important;
border: 0 !important;
background: transparent !important;
}
body.erp-app .image-empty-cell,
body.erp-app .export-listing-empty,
body.copywriting-app .emptyCell,
body.copywriting-app .embeddedRemovalEmpty {
display: flex !important;
align-items: center !important;
justify-content: center !important;
flex: 1 1 100% !important;
width: 100% !important;
height: 100% !important;
min-height: 0 !important;
max-height: none !important;
padding: 0 !important;
border: 0 !important;
background: transparent !important;
color: #8b9992 !important;
font-size: 13px !important;
font-weight: 500 !important;
line-height: 1.6 !important;
text-align: center !important;
white-space: normal !important;
}
body.copywriting-app .workspacePanel:has(.centeredEmptyState) .tableFootnote {
display: none !important;
}
body.erp-app .image-opt-table-wrap tbody.centered-empty-state,
body.erp-app .export-listing-table-wrap tbody.centered-empty-state,
body.copywriting-app .previewTableWrap tbody.centeredEmptyState,
body.copywriting-app .embeddedRemovalTableWrap tbody.embeddedRemovalEmptyState {
display: flex !important;
flex-direction: column !important;
flex: 1 1 auto !important;
width: 100% !important;
height: auto !important;
min-height: 0 !important;
}
body.erp-app .image-opt-table-wrap tbody.centered-empty-state tr,
body.erp-app .export-listing-table-wrap tbody.centered-empty-state tr,
body.copywriting-app .previewTableWrap tbody.centeredEmptyState tr,
body.copywriting-app .embeddedRemovalTableWrap tbody.embeddedRemovalEmptyState tr {
display: flex !important;
flex: 1 1 100% !important;
width: 100% !important;
height: auto !important;
min-height: 0 !important;
}
body.erp-app .image-opt-table-wrap td.image-empty-cell,
body.erp-app .export-listing-table-wrap td.export-listing-empty,
body.copywriting-app .previewTableWrap td.emptyCell,
body.copywriting-app .embeddedRemovalTableWrap td.embeddedRemovalEmpty {
display: flex !important;
align-items: center !important;
justify-content: center !important;
flex: 1 1 100% !important;
width: 100% !important;
height: auto !important;
min-height: 0 !important;
max-height: none !important;
padding: 0 !important;
border: 0 !important;
background: transparent !important;
color: #8b9992 !important;
font-size: 13px !important;
font-weight: 500 !important;
line-height: 1.6 !important;
text-align: center !important;
white-space: normal !important;
}
body.erp-app .image-opt-table-wrap table tbody.centered-empty-state tr td.image-empty-cell,
body.erp-app .export-listing-table-wrap table tbody.centered-empty-state tr td.export-listing-empty,
body.copywriting-app .previewTableWrap table tbody.centeredEmptyState tr td.emptyCell,
body.copywriting-app .embeddedRemovalTableWrap table tbody.embeddedRemovalEmptyState tr td.embeddedRemovalEmpty {
display: flex !important;
align-items: center !important;
justify-content: center !important;
flex: 1 1 100% !important;
width: 100% !important;
height: auto !important;
min-height: 0 !important;
max-height: none !important;
padding: 0 !important;
border: 0 !important;
background: transparent !important;
color: #8b9992 !important;
font-size: 13px !important;
font-weight: 500 !important;
line-height: 1.6 !important;
text-align: center !important;
white-space: normal !important;
}
body.erp-app .image-opt-shell:has(.centered-empty-state) #imageOptimizationTable tbody.centered-empty-state tr td.image-empty-cell,
body.erp-app .export-listing-shell:has(.centered-empty-state) #exportListingTable tbody.centered-empty-state tr td.export-listing-empty,
body.copywriting-app .previewTableWrap:has(.centeredEmptyState) #dataTable tbody.centeredEmptyState tr td.emptyCell,
body.copywriting-app .embeddedRemovalTableWrap:has(.embeddedRemovalEmptyState) #embeddedRemovalTable tbody.embeddedRemovalEmptyState tr td.embeddedRemovalEmpty {
display: flex !important;
align-items: center !important;
justify-content: center !important;
flex: 1 1 100% !important;
width: 100% !important;
height: 190px !important;
min-height: 190px !important;
max-height: 190px !important;
padding: 0 !important;
border: 0 !important;
background: transparent !important;
color: #8b9992 !important;
font-size: 13px !important;
font-weight: 500 !important;
line-height: 1.6 !important;
text-align: center !important;
white-space: normal !important;
}
/* 2026-09-07 精致化收口：账号菜单留在左侧栏内，悬停自动弹出。 */
body.erp-app .user-popover {
left: 0 !important;
right: 0 !important;
bottom: calc(100% + 8px) !important;
width: 100% !important;
min-width: 100% !important;
padding: 5px !important;
border: 1px solid var(--wb-line) !important;
border-radius: 12px !important;
background: rgba(255, 255, 255, .98) !important;
box-shadow: 0 14px 34px rgba(32, 40, 36, .12) !important;
backdrop-filter: blur(14px) !important;
-webkit-backdrop-filter: blur(14px) !important;
}
body.erp-app .user-menu:hover .user-popover,
body.erp-app .user-menu:focus-within .user-popover,
body.erp-app .user-menu.open .user-popover {
opacity: 1 !important;
visibility: visible !important;
pointer-events: auto !important;
transform: none !important;
transition-delay: 0s !important;
}
body.erp-app .user-menu-action {
}
body.erp-app .logout-action {
border-radius: 0 0 8px 8px !important;
}
body.erp-app .sidebar-user {
}
/* 管理类页面统一为居中小巧的卡片感布局，不再铺满整个工作区。 */
body.erp-app .view-accounts.active,
body.erp-app .view-system-check.active {
display: flex !important;
align-items: flex-start !important;
justify-content: center !important;
padding: clamp(24px, 5vh, 48px) 20px 18px !important;
overflow: auto !important;
background: var(--wb-page-soft) !important;
}
body.erp-app .view-accounts:not(.active),
body.erp-app .view-system-check:not(.active) {
display: none !important;
}
body.erp-app .view-accounts .accounts-page-minimal,
body.erp-app .view-system-check .system-check-page {
width: min(860px, 100%) !important;
max-width: 860px !important;
height: auto !important;
min-height: 0 !important;
max-height: calc(100vh - 72px) !important;
margin: 0 auto !important;
padding: 0 !important;
overflow: visible !important;
background: transparent !important;
}
body.erp-app .view-accounts .accounts-page-minimal {
display: block !important;
}
body.erp-app .management-page-heading h1,
body.erp-app .system-check-header h2 {
margin: 0 !important;
color: var(--wb-text) !important;
font-size: 18px !important;
font-weight: 680 !important;
line-height: 1.25 !important;
}
body.erp-app .accounts-shell-minimal,
body.erp-app .system-check-page {
width: 100% !important;
height: auto !important;
min-height: 0 !important;
max-height: calc(100vh - 130px) !important;
gap: 10px !important;
overflow: auto !important;
}
body.erp-app .accounts-list-panel,
body.erp-app .system-check-list {
flex: 0 1 auto !important;
min-height: 240px !important;
max-height: calc(100vh - 190px) !important;
border-radius: 14px !important;
overflow: auto !important;
}
body.erp-app .accounts-primary-action {
}
body.erp-app .system-check-header {
}
body.erp-app .system-check-header h2 {
margin-bottom: 4px !important;
}
body.erp-app .system-check-header p {
}
body.erp-app .system-check-actions {
}
/* API、侵权词库、类目模版改为页面内居中的浅色工作台。 */
body.api-app,
body.infringement-app,
body.templates-app {
padding: 10px 0 !important;
background: var(--wb-page-soft) !important;
}
body.api-app .api-page,
body.infringement-app .library-page,
body.templates-app .template-page {
}
body.infringement-app .library-page,
body.templates-app .template-page {
}
body.infringement-app .library-card,
body.templates-app .template-card {
}
body.infringement-app .library-toolbar,
body.templates-app .toolbar {
}
body.infringement-app .toolbar-actions,
body.templates-app .toolbar-actions {
justify-content: center !important;
}
body.infringement-app .count-dashboard,
body.templates-app .count-dashboard {
}
body.infringement-app .metric-card,
body.templates-app .metric-card {
}
body.api-app .api-page {
}
body.api-app .sidebar-head {
}
body.api-app .api-workspace .panel-card,
body.api-app .api-workspace .result-card {
}
body.api-app .empty-editor {
}
body.api-app .empty-panel {
}
/* 统一字重、字号和间距，减少不同模块间的视觉落差。 */
body.erp-app,
body.source-inbox-app,
body.copywriting-app,
body.infringement-app,
body.api-app,
body.templates-app,
body.watermark-app {
font-size: 13px !important;
line-height: 1.5 !important;
letter-spacing: 0 !important;
text-rendering: optimizeLegibility !important;
-webkit-font-smoothing: antialiased !important;
}
body.erp-app h1,
body.erp-app h2,
body.erp-app h3,
body.copywriting-app h1,
body.copywriting-app h2,
body.copywriting-app h3,
body.infringement-app h1,
body.infringement-app h2,
body.infringement-app h3,
body.api-app h1,
body.api-app h2,
body.api-app h3,
body.templates-app h1,
body.templates-app h2,
body.templates-app h3 {
letter-spacing: 0 !important;
}
body.erp-app button,
body.copywriting-app button,
body.infringement-app button,
body.api-app button,
body.templates-app button,
body.watermark-app button {
letter-spacing: 0 !important;
}
/* 文案优化：空数据不再套一个方框；AI 回填输入框与右侧清理区等高。 */
body.copywriting-app .contentCard:has(.previewTableWrap .centeredEmptyState) {
border: 0 !important;
background: transparent !important;
box-shadow: none !important;
}
body.copywriting-app .workspacePanel.active:has(.previewTableWrap .centeredEmptyState) {
padding: 0 !important;
}
body.copywriting-app .previewTableWrap:has(.centeredEmptyState) {
border: 0 !important;
border-radius: 0 !important;
background: transparent !important;
box-shadow: none !important;
}
body.copywriting-app .parseInputPane {
position: relative !important;
justify-content: stretch !important;
overflow: hidden !important;
}
body.copywriting-app .parseInputPane #aiResult {
flex: 1 1 auto !important;
width: 100% !important;
height: 100% !important;
min-height: 0 !important;
max-height: none !important;
margin: 0 !important;
padding: 16px 15px !important;
border: 0 !important;
border-radius: 0 !important;
}
body.copywriting-app .parseInputPane .message {
position: absolute !important;
right: 10px !important;
bottom: 8px !important;
z-index: 2 !important;
max-width: calc(100% - 20px) !important;
margin: 0 !important;
border-radius: 7px !important;
box-shadow: 0 6px 16px rgba(32, 40, 36, .06) !important;
}
/* 20260907 owner pages final polish: compact centered sheets. */
body.erp-app .view-accounts .accounts-page-minimal {
width: min(900px, 100%) !important;
max-width: 900px !important;
margin: 0 auto !important;
padding: 0 !important;
display: block !important;
}
body.erp-app .accounts-shell-minimal {
max-width: 100% !important;
min-width: 0 !important;
}
body.erp-app .accounts-list-panel {
}
body.erp-app .system-check-page {
display: flex !important;
flex-direction: column !important;
align-items: stretch !important;
justify-content: flex-start !important;
margin: 0 auto !important;
}
body.erp-app .view-system-check .system-check-page {
}
body.erp-app .system-check-header {
}
body.erp-app .system-check-header > div:first-child {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
gap: 3px !important;
}
body.erp-app .system-check-actions {
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
body.api-app,
body.infringement-app,
body.templates-app {
padding: clamp(48px, 6vh, 72px) 22px 18px !important;
background: var(--wb-page-soft) !important;
}
body.api-app .api-page,
body.infringement-app .library-page,
body.templates-app .template-page {
width: min(1180px, 100%) !important;
max-width: 1180px !important;
height: calc(100vh - clamp(72px, 9vh, 96px)) !important;
min-height: 0 !important;
max-height: calc(100vh - 68px) !important;
margin: 0 auto !important;
padding: 0 !important;
border: 1px solid rgba(222, 230, 225, .96) !important;
border-radius: 18px !important;
background: #fff !important;
box-shadow: 0 12px 30px rgba(32, 40, 36, .06) !important;
overflow: hidden !important;
}
body.infringement-app .library-page,
body.templates-app .template-page {
display: flex !important;
}
body.infringement-app .library-card,
body.templates-app .template-card {
}
body.infringement-app .library-toolbar,
body.templates-app .toolbar {
}
body.infringement-app .library-meta h1,
body.templates-app .toolbar-meta h1,
body.api-app .sidebar-head h1 {
font-size: 15px !important;
font-weight: 680 !important;
color: var(--wb-text) !important;
}
body.infringement-app .count-dashboard,
body.templates-app .count-dashboard {
justify-content: center !important;
}
body.infringement-app .metric-card,
body.templates-app .metric-card {
justify-content: center !important;
}
/* API settings: keep a stable left list and centered editor/empty state. */
body.api-app .api-page,
body.api-app .api-page:has(.connection-form:not(.hidden)) {
display: grid !important;
grid-template-columns: 228px minmax(0, 1fr) !important;
grid-template-rows: minmax(0, 1fr) !important;
flex-direction: row !important;
align-items: stretch !important;
justify-content: stretch !important;
width: min(1180px, 100%) !important;
max-width: 1180px !important;
height: calc(100vh - clamp(72px, 9vh, 96px)) !important;
max-height: calc(100vh - 68px) !important;
margin: 0 auto !important;
}
body.api-app .api-sidebar,
body.api-app .api-page:has(.connection-form:not(.hidden)) .api-sidebar {
display: grid !important;
grid-template-rows: auto minmax(0, 1fr) !important;
width: 228px !important;
min-width: 0 !important;
max-width: none !important;
height: 100% !important;
flex: 0 0 auto !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
border-right: 1px solid var(--wb-line) !important;
border-bottom: 0 !important;
background: #fff !important;
}
body.api-app .sidebar-head {
gap: 8px !important;
text-align: left !important;
}
body.api-app .sidebar-head > div:first-child {
display: flex !important;
flex-direction: column !important;
align-items: flex-start !important;
gap: 3px !important;
min-width: 0 !important;
}
body.api-app .api-workspace,
body.api-app .api-workspace:has(.empty-editor:not(.hidden)),
body.api-app .api-page:has(.connection-form:not(.hidden)) .api-workspace {
display: block !important;
width: auto !important;
min-width: 0 !important;
max-width: none !important;
height: 100% !important;
min-height: 0 !important;
flex: 1 1 auto !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
border-top: 0 !important;
border-radius: 0 !important;
background: var(--wb-page-soft) !important;
box-shadow: none !important;
overflow: auto !important;
}
body.api-app .empty-editor {
width: 100% !important;
}
body.api-app .empty-panel {
}
body.api-app .empty-actions {
display: flex !important;
align-items: center !important;
justify-content: center !important;
flex-wrap: wrap !important;
}
body.api-app .connection-list {
}
body.api-app .connection-card {
}
body.api-app .connection-empty {
border: 1px dashed var(--wb-line-strong) !important;
background: transparent !important;
}
body.api-app .connection-form {
width: 100% !important;
max-width: none !important;
height: 100% !important;
min-height: 0 !important;
margin: 0 !important;
padding: 0 !important;
display: grid !important;
grid-template-rows: auto minmax(0, 1fr) auto !important;
}
body.api-app .editor-body {
}
body.api-app .api-workspace .panel-card,
body.api-app .api-workspace .result-card {
margin: 0 auto 10px !important;
}
body.api-app .editor-bar,
body.api-app .editor-actions {
background: #fff !important;
}
body.api-app .editor-actions {
display: flex !important;
align-items: center !important;
justify-content: flex-end !important;
gap: 8px !important;
}
body.copywriting-app .parseWorkspace {
align-items: stretch !important;
}
body.copywriting-app .parseInputPane,
body.copywriting-app .embeddedRemovalPane {
height: 100% !important;
}
body.copywriting-app .embeddedRemovalPane {
overflow: hidden !important;
border-radius: 12px !important;
}
@media (max-width: 900px) {
body.api-app .api-page,
body.api-app .api-page:has(.connection-form:not(.hidden)) {
grid-template-columns: 1fr !important;
grid-template-rows: auto minmax(0, 1fr) !important;
}
body.api-app .api-sidebar,
body.api-app .api-page:has(.connection-form:not(.hidden)) .api-sidebar {
width: 100% !important;
height: auto !important;
max-height: 42vh !important;
border-right: 0 !important;
border-bottom: 1px solid var(--wb-line) !important;
}
body.infringement-app .library-toolbar,
body.templates-app .toolbar {
flex-wrap: wrap !important;
min-height: auto !important;
padding-top: 10px !important;
padding-bottom: 10px !important;
}
}
/* 2026-09-07 第二轮精细收口：删除重复页标题，统一空状态高度，
把管理页、侵权词库、API 设置、类目模版和系统检测做成紧凑居中的模块。 */
body.erp-app .management-page-heading,
body.erp-app .system-check-header h2,
body.infringement-app .library-meta,
body.templates-app .toolbar-meta,
body.api-app .sidebar-head > div:first-child,
body.api-app .sidebar-head h1,
body.api-app .sidebar-head .library-kicker {
display: none !important;
}
body.erp-app .view-accounts.active,
body.erp-app .view-system-check.active {
}
body.erp-app .view-accounts .accounts-page-minimal {
width: min(880px, 100%) !important;
max-width: 880px !important;
}
body.erp-app .accounts-shell-minimal {
}
body.erp-app .accounts-primary-action {
}
body.erp-app .accounts-list-panel {
}
body.erp-app .system-check-page {
width: min(820px, 100%) !important;
max-width: 820px !important;
gap: 10px !important;
}
body.erp-app .view-system-check .system-check-page {
width: min(820px, 100%) !important;
max-width: 820px !important;
}
body.erp-app .system-check-header {
display: flex !important;
}
body.erp-app .system-check-header > div:first-child {
display: none !important;
}
body.erp-app .system-check-header p {
}
body.erp-app .system-check-actions {
flex: 0 0 auto !important;
}
body.erp-app .system-check-list {
width: 100% !important;
}
body.erp-app .system-check-row {
overflow: visible !important;
}
body.erp-app .system-check-row-main {
overflow: visible !important;
}
body.erp-app .system-check-row-main strong {
display: flex !important;
align-items: center !important;
gap: 0 !important;
min-width: 0 !important;
overflow: visible !important;
color: var(--wb-text) !important;
}
body.erp-app .system-check-row-main strong::before {
content: none !important;
width: 0 !important;
height: 0 !important;
margin: 0 !important;
}
body.erp-app .system-check-row-main span,
body.erp-app .system-check-row-main small {
overflow: visible !important;
white-space: normal !important;
text-overflow: clip !important;
color: var(--wb-muted) !important;
font-size: 12px !important;
line-height: 1.45 !important;
}
body.infringement-app,
body.templates-app,
body.api-app {
padding: clamp(16px, 3vh, 38px) 18px 14px !important;
}
body.infringement-app .library-page,
body.templates-app .template-page {
}
body.infringement-app .library-card,
body.templates-app .template-card {
}
body.infringement-app .library-toolbar,
body.templates-app .toolbar {
justify-content: flex-end !important;
gap: 8px !important;
}
body.infringement-app .toolbar-actions,
body.templates-app .toolbar-actions {
margin-left: auto !important;
}
body.infringement-app .count-dashboard,
body.templates-app .count-dashboard {
}
body.infringement-app .metric-card,
body.templates-app .metric-card {
gap: 8px !important;
}
body.infringement-app .metric-eyebrow,
body.templates-app .metric-eyebrow {
font-size: 12px !important;
color: var(--wb-muted) !important;
}
body.infringement-app .metric-card .metric-value,
body.templates-app .metric-card .metric-value {
}
body.infringement-app .metric-card .metric-value strong,
body.templates-app .metric-card .metric-value strong {
}
body.api-app .api-page,
body.api-app .api-page:has(.connection-form:not(.hidden)) {
width: min(1120px, 100%) !important;
max-width: 1120px !important;
height: calc(100vh - clamp(42px, 6vh, 60px)) !important;
max-height: calc(100vh - 36px) !important;
border-radius: 16px !important;
grid-template-columns: 212px minmax(0, 1fr) !important;
}
body.api-app .api-sidebar,
body.api-app .api-page:has(.connection-form:not(.hidden)) .api-sidebar {
width: 212px !important;
min-width: 0 !important;
}
body.api-app .sidebar-head {
}
body.api-app .sidebar-tools {
margin-left: auto !important;
}
body.api-app .connection-list {
grid-template-columns: 1fr !important;
}
body.api-app .connection-card {
}
body.api-app .editor-bar,
body.api-app .editor-actions {
min-height: 50px !important;
height: auto !important;
padding: 0 14px !important;
}
body.api-app .editor-body {
}
body.api-app .api-workspace .panel-card,
body.api-app .api-workspace .result-card {
}
body.copywriting-app .workspaceShell {
}
body.copywriting-app .commandBar {
}
body.copywriting-app .contentCard:has(.previewTableWrap .centeredEmptyState),
body.copywriting-app .previewTableWrap:has(.centeredEmptyState) {
border: 0 !important;
background: transparent !important;
box-shadow: none !important;
}
body.copywriting-app .previewTableWrap:has(.centeredEmptyState) {
height: 100% !important;
}
body.copywriting-app .previewTableWrap .centeredEmptyState td.emptyCell,
body.copywriting-app .embeddedRemovalTableWrap .embeddedRemovalEmptyState td.embeddedRemovalEmpty {
}
/* 2026-09-07 第三轮精细收口：老板/管理页改成居中靠上、更小的精修卡片；
文案优化空态不再占满整屏，避免“暂无数据”沉到很低位置。 */
body.erp-app .view-accounts.active,
body.erp-app .view-system-check.active {
display: flex !important;
flex-direction: row !important;
align-items: flex-start !important;
justify-content: center !important;
padding: clamp(64px, 10vh, 104px) 24px 44px !important;
overflow: auto !important;
}
body.erp-app .view-accounts .accounts-page-minimal,
body.erp-app .view-accounts.active .accounts-page-minimal {
}
body.erp-app .accounts-shell-minimal {
}
body.erp-app .accounts-primary-action {
}
body.erp-app .account-add-button {
width: auto !important;
max-height: 34px !important;
}
body.erp-app .accounts-list-panel {
}
body.erp-app .account-table {
}
body.erp-app .account-table-header {
}
body.erp-app .account-table-row {
}
body.erp-app .account-table-cell {
}
body.erp-app .view-system-check .system-check-page,
body.erp-app .system-check-page {
width: min(760px, 100%) !important;
max-width: 760px !important;
height: auto !important;
min-height: 0 !important;
max-height: calc(100vh - 170px) !important;
margin: 0 !important;
padding: 18px !important;
gap: 10px !important;
border: 1px solid rgba(218, 226, 221, .96) !important;
border-radius: 18px !important;
background: rgba(255, 255, 255, .96) !important;
box-shadow: 0 1px 2px rgba(32, 40, 36, .03), 0 20px 48px rgba(32, 40, 36, .06) !important;
}
body.erp-app .system-check-header {
flex: 0 0 auto !important;
flex-direction: row !important;
align-items: center !important;
justify-content: space-between !important;
gap: 12px !important;
text-align: left !important;
}
body.erp-app .system-check-header > div:first-child {
display: none !important;
}
body.erp-app .system-check-header p {
text-align: left !important;
}
body.erp-app .system-check-actions {
margin: 0 !important;
}
body.erp-app .system-check-list {
flex: 0 1 auto !important;
margin: 0 !important;
padding: 0 !important;
display: grid !important;
grid-template-columns: 1fr !important;
gap: 7px !important;
}
body.erp-app .system-check-row {
}
body.infringement-app,
body.templates-app {
padding: clamp(58px, 9vh, 92px) 20px 22px !important;
}
body.infringement-app .library-page,
body.templates-app .template-page {
margin: 0 auto !important;
border-radius: 18px !important;
box-shadow: 0 1px 2px rgba(32, 40, 36, .03), 0 22px 54px rgba(32, 40, 36, .07) !important;
}
body.infringement-app .library-card,
body.templates-app .template-card {
}
body.infringement-app .library-toolbar,
body.templates-app .toolbar {
}
body.infringement-app .count-dashboard,
body.templates-app .count-dashboard {
}
body.infringement-app .metric-card,
body.templates-app .metric-card {
}
body.infringement-app .empty-state,
body.templates-app .empty {
}
body.api-app {
}
body.api-app .api-page,
body.api-app .api-page:has(.connection-form:not(.hidden)) {
width: min(980px, 100%) !important;
max-width: 980px !important;
height: min(760px, calc(100vh - clamp(126px, 17vh, 164px))) !important;
max-height: 760px !important;
margin: 0 auto !important;
border-radius: 18px !important;
box-shadow: 0 1px 2px rgba(32, 40, 36, .03), 0 22px 54px rgba(32, 40, 36, .07) !important;
grid-template-columns: 196px minmax(0, 1fr) !important;
}
body.api-app .api-sidebar,
body.api-app .api-page:has(.connection-form:not(.hidden)) .api-sidebar {
width: 196px !important;
min-width: 0 !important;
border-radius: 18px 0 0 18px !important;
background: #fbfcfc !important;
}
body.api-app .sidebar-head {
}
body.api-app .connection-list {
}
body.api-app .connection-card {
}
body.api-app .connection-empty {
border-radius: 11px !important;
}
body.api-app .empty-editor {
height: 100% !important;
display: grid !important;
place-items: center !important;
}
body.api-app .empty-panel {
}
body.api-app .empty-actions {
gap: 7px !important;
}
body.api-app .api-workspace .panel-card,
body.api-app .api-workspace .result-card {
}
body.copywriting-app .contentCard:has(.previewTableWrap .centeredEmptyState),
body.copywriting-app .previewTableWrap:has(.centeredEmptyState) {
border: 0 !important;
background: transparent !important;
box-shadow: none !important;
}
body.copywriting-app .workspacePanel.active:has(.previewTableWrap .centeredEmptyState) {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: flex-start !important;
}
body.copywriting-app .previewTableWrap:has(.centeredEmptyState) {
width: min(760px, calc(100% - 40px)) !important;
height: 280px !important;
min-height: 0 !important;
max-height: 280px !important;
margin: clamp(56px, 9vh, 88px) 0 0 !important;
border: 0 !important;
background: transparent !important;
box-shadow: none !important;
overflow: hidden !important;
}
body.copywriting-app .previewTableWrap:has(.centeredEmptyState) #dataTable {
width: 100% !important;
height: 100% !important;
}
body.copywriting-app .previewTableWrap .centeredEmptyState td.emptyCell,
body.copywriting-app .embeddedRemovalTableWrap .embeddedRemovalEmptyState td.embeddedRemovalEmpty {
display: flex !important;
align-items: center !important;
justify-content: center !important;
border: 0 !important;
background: transparent !important;
box-shadow: none !important;
color: #89958f !important;
font-size: 13px !important;
font-weight: 550 !important;
letter-spacing: .04em !important;
}
body.copywriting-app .embeddedRemovalPane:has(.embeddedRemovalTableWrap .embeddedRemovalEmptyState) {
border: 0 !important;
border-radius: 0 !important;
background: transparent !important;
box-shadow: none !important;
}
body.copywriting-app .embeddedRemovalPane .embeddedRemovalTableWrap:has(.embeddedRemovalEmptyState) {
width: 100% !important;
height: 100% !important;
border: 0 !important;
background: transparent !important;
box-shadow: none !important;
}
/* 2026-09-07 第四轮：空状态统一放到可用区上方居中，避免所有工作页的
“暂无数据”沉到屏幕下半部。只保留纯文本，不再出现额外方框。 */
body.copywriting-app .workspacePanel.active:has(.previewTableWrap .centeredEmptyState) {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: flex-start !important;
padding: 0 !important;
}
body.copywriting-app .previewTableWrap:has(.centeredEmptyState) {
width: min(720px, calc(100% - 36px)) !important;
height: 190px !important;
min-height: 0 !important;
max-height: 190px !important;
margin: clamp(36px, 6vh, 64px) auto 0 !important;
border: 0 !important;
background: transparent !important;
box-shadow: none !important;
overflow: hidden !important;
}
body.copywriting-app .previewTableWrap:has(.centeredEmptyState) #dataTable,
body.copywriting-app .previewTableWrap:has(.centeredEmptyState) tbody.centeredEmptyState,
body.copywriting-app .previewTableWrap:has(.centeredEmptyState) tbody.centeredEmptyState tr,
body.copywriting-app .previewTableWrap:has(.centeredEmptyState) #dataTable tbody.centeredEmptyState tr td.emptyCell {
width: 100% !important;
min-width: 100% !important;
height: 100% !important;
min-height: 0 !important;
max-height: none !important;
}
body.copywriting-app .previewTableWrap .centeredEmptyState td.emptyCell {
display: flex !important;
align-items: center !important;
justify-content: center !important;
border: 0 !important;
background: transparent !important;
box-shadow: none !important;
color: #7b8a86 !important;
font-size: 13px !important;
font-weight: 540 !important;
letter-spacing: .08em !important;
}
body.copywriting-app .embeddedRemovalPane:has(.embeddedRemovalTableWrap .embeddedRemovalEmptyState) {
display: flex !important;
align-items: flex-start !important;
justify-content: center !important;
border: 0 !important;
border-radius: 0 !important;
background: transparent !important;
box-shadow: none !important;
}
body.copywriting-app .embeddedRemovalPane .embeddedRemovalTableWrap:has(.embeddedRemovalEmptyState) {
width: min(720px, calc(100% - 36px)) !important;
height: 190px !important;
min-height: 0 !important;
margin: clamp(36px, 6vh, 64px) 0 0 !important;
}
body.erp-app .image-opt-table-wrap tbody.centered-empty-state tr td.image-empty-cell,
body.erp-app .export-listing-table-wrap tbody.centered-empty-state tr td.export-listing-empty {
display: flex !important;
align-items: flex-start !important;
justify-content: center !important;
width: 100% !important;
height: 100% !important;
padding: clamp(76px, 13vh, 132px) 0 0 !important;
border: 0 !important;
background: transparent !important;
box-shadow: none !important;
color: #7b8a86 !important;
font-size: 13px !important;
font-weight: 540 !important;
letter-spacing: .08em !important;
}
@media (max-width: 900px) {
body.infringement-app,
body.templates-app,
body.api-app {
padding: 42px 12px 16px !important;
}
body.api-app .api-page,
body.api-app .api-page:has(.connection-form:not(.hidden)) {
grid-template-columns: 1fr !important;
grid-template-rows: auto minmax(0, 1fr) !important;
}
body.api-app .api-sidebar,
body.api-app .api-page:has(.connection-form:not(.hidden)) .api-sidebar {
width: 100% !important;
height: auto !important;
max-height: 220px !important;
border-radius: 14px 14px 0 0 !important;
}
}
/* YFTX visual design layer v178
Presentation only. Business behavior and button actions stay untouched. */
:root,
body.erp-app,
body.source-inbox-app,
body.copywriting-app,
body.infringement-app,
body.api-app,
body.templates-app,
body.watermark-app {
color-scheme: light;
--wb-page: #f6f7f6;
--wb-page-soft: #f7f8f8;
--wb-surface: #ffffff;
--wb-surface-soft: #f7f8f8;
--wb-surface-hover: #fafbfa;
--wb-text: #1a211e;
--wb-muted: #6e7672;
--wb-subtle: #98a09c;
--wb-line: #e5e9e7;
--wb-line-strong: #d4dad7;
--wb-accent: #0f6f5c;
--wb-accent-hover: #0b5c4c;
--wb-accent-active: #084b3f;
--wb-accent-soft: #edf5f1;
--wb-accent-softer: #f6faf8;
--wb-danger: #b34a42;
--wb-danger-hover: #933830;
--wb-danger-soft: #fbf2f1;
--wb-success: #3f7a56;
--wb-success-soft: #eff6f1;
--wb-warning: #8c6a2f;
--wb-warning-soft: #f8f4ea;
--wb-focus: rgba(15, 111, 92, .14);
--wb-shadow-pop: 0 10px 28px rgba(22, 32, 27, .08);
--wb-shadow-modal: 0 24px 70px rgba(18, 28, 23, .16);
--wb-r-control: 6px;
--wb-r-card: 10px;
--wb-r-panel: 14px;
--wb-r-modal: 14px;
--wb-control: 34px;
--wb-control-small: 28px;
--wb-font: "Inter", "SF Pro Text", "PingFang SC", "Microsoft YaHei UI", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
--amz-bg: #f6f7f6;
--amz-panel: #ffffff;
--amz-border: #e5e9e7;
--amz-border-strong: #d4dad7;
--amz-ink: #1a211e;
--amz-muted: #6e7672;
--amz-accent: #0f6f5c;
--amz-accent-dark: #0b5c4c;
--amz-accent-soft: #edf5f1;
--amz-danger: #b34a42;
--amz-danger-soft: #fbf2f1;
--amz-shadow: 0 10px 28px rgba(18, 28, 23, .06);
}
body.erp-app,
body.source-inbox-app,
body.copywriting-app,
body.infringement-app,
body.api-app,
body.templates-app,
body.watermark-app {
background: var(--wb-page) !important;
color: var(--wb-text) !important;
font-family: var(--wb-font) !important;
font-size: 13px !important;
font-weight: 400 !important;
line-height: 1.5 !important;
text-rendering: optimizeLegibility !important;
-webkit-font-smoothing: antialiased !important;
}
body.erp-app :is(h1, h2, h3, h4, p, span, small, strong, label, td, th),
body.source-inbox-app :is(h1, h2, h3, h4, p, span, small, strong, label, td, th),
body.copywriting-app :is(h1, h2, h3, h4, p, span, small, strong, label, td, th),
body.infringement-app :is(h1, h2, h3, h4, p, span, small, strong, label, td, th),
body.api-app :is(h1, h2, h3, h4, p, span, small, strong, label, td, th),
body.templates-app :is(h1, h2, h3, h4, p, span, small, strong, label, td, th),
body.watermark-app :is(h1, h2, h3, h4, p, span, small, strong, label, td, th) {
font-variant-numeric: tabular-nums;
}
body.erp-app h1,
body.copywriting-app h1,
body.infringement-app h1,
body.api-app h1,
body.templates-app h1,
body.watermark-app h1 {
font-size: 18px !important;
font-weight: 650 !important;
letter-spacing: 0 !important;
}
body.erp-app h2,
body.copywriting-app h2,
body.infringement-app h2,
body.api-app h2,
body.templates-app h2,
body.watermark-app h2 {
font-size: 15px !important;
font-weight: 650 !important;
letter-spacing: 0 !important;
}
body.erp-app h3,
body.copywriting-app h3,
body.infringement-app h3,
body.api-app h3,
body.templates-app h3,
body.watermark-app h3 {
font-size: 13px !important;
font-weight: 650 !important;
letter-spacing: 0 !important;
}
body.erp-app :is(button, input, select, textarea),
body.source-inbox-app :is(button, input, select, textarea),
body.copywriting-app :is(button, input, select, textarea),
body.infringement-app :is(button, input, select, textarea),
body.api-app :is(button, input, select, textarea),
body.templates-app :is(button, input, select, textarea),
body.watermark-app :is(button, input, select, textarea) {
font-family: var(--wb-font) !important;
transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease, box-shadow 120ms ease, transform 80ms ease !important;
}
body.erp-app button:active:not(:disabled),
body.source-inbox-app button:active:not(:disabled),
body.copywriting-app button:active:not(:disabled),
body.infringement-app button:active:not(:disabled),
body.api-app button:active:not(:disabled),
body.templates-app button:active:not(:disabled),
body.watermark-app button:active:not(:disabled) {
transform: translateY(1px) !important;
}
body.erp-app button:disabled,
body.source-inbox-app button:disabled,
body.copywriting-app button:disabled,
body.infringement-app button:disabled,
body.api-app button:disabled,
body.templates-app button:disabled,
body.watermark-app button:disabled {
opacity: 1 !important;
color: #a6ada9 !important;
background: #f1f3f2 !important;
border-color: #e5e9e7 !important;
box-shadow: none !important;
cursor: not-allowed !important;
text-shadow: none !important;
}
:focus-visible {
outline: 2px solid rgba(15, 111, 92, .42) !important;
outline-offset: 2px !important;
}
::-webkit-scrollbar {
width: 6px !important;
height: 6px !important;
}
::-webkit-scrollbar-track {
background: transparent !important;
}
::-webkit-scrollbar-thumb {
border-radius: 999px !important;
background: #d6dbd8 !important;
}
::-webkit-scrollbar-thumb:hover {
background: #bcc3bf !important;
}
body.erp-app,
body.source-inbox-app,
body.copywriting-app,
body.infringement-app,
body.api-app,
body.templates-app,
body.watermark-app {
scrollbar-width: thin;
scrollbar-color: #d6dbd8 transparent;
}
/* Shell */
body.erp-app #appView {
grid-template-columns: 96px minmax(0, 1fr) !important;
gap: 10px !important;
padding: 10px !important;
background: transparent !important;
}
body.erp-app .sidebar {
}
body.erp-app .workspace {
}
body.erp-app .sidebar .brand {
flex: 0 0 50px !important;
margin-bottom: 2px !important;
}
body.erp-app .brand img {
max-width: 38px !important;
}
body.erp-app .nav {
}
body.erp-app .nav button {
flex: 0 0 40px !important;
background: transparent !important;
color: #68706c !important;
box-shadow: none !important;
}
body.erp-app .nav button:hover {
background: #f7f8f8 !important;
color: #1a211e !important;
}
body.erp-app .nav button.active {
}
body.erp-app .nav button.active::before {
display: block !important;
content: "" !important;
position: absolute !important;
left: 2px !important;
top: 9px !important;
bottom: 9px !important;
width: 2px !important;
border-radius: 2px !important;
background: #0f6f5c !important;
}
body.erp-app .sidebar-user {
}
body.erp-app .user-name {
border: 0 !important;
background: transparent !important;
}
body.erp-app .user-name:hover {
background: #f7f8f8 !important;
color: #1a211e !important;
}
body.erp-app .user-popover {
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
}
body.erp-app .user-menu-action {
border: 0 !important;
border-bottom: 1px solid #f1f3f2 !important;
background: transparent !important;
}
body.erp-app .user-menu-action:last-child {
border-bottom: 0 !important;
}
body.erp-app .user-menu-action:hover {
background: #f7f8f8 !important;
color: #0f6f5c !important;
}
body.erp-app .logout-action {
margin-top: 2px !important;
border-top: 1px solid #edf0ee !important;
color: #b34a42 !important;
}
/* Primary/secondary/quiet button hierarchy */
body.erp-app .image-tool-button,
body.erp-app .image-open-doubao,
body.erp-app .image-inline-delete,
body.erp-app .image-transfer-export,
body.erp-app .export-mapping-button,
body.erp-app .export-complete-button,
body.erp-app .export-quiet-delete,
body.erp-app .page-clear-button,
body.erp-app .system-check-button,
body.erp-app .account-add-button,
body.erp-app .account-editor-primary,
body.erp-app .account-editor-secondary,
body.erp-app .modal-btn,
body.copywriting-app .pageClearButton,
body.copywriting-app .selectionDeleteButton,
body.copywriting-app .selectionPromptButton,
body.copywriting-app .embeddedRemovalButton,
body.copywriting-app #parseResultBtn,
body.infringement-app .button,
body.api-app .action-button,
body.api-app .quick-button,
body.api-app .icon-button,
body.templates-app .primary,
body.templates-app .secondary,
body.watermark-app .primary,
body.watermark-app .secondary,
body.watermark-app .white,
body.watermark-app .sync {
height: 34px !important;
min-height: 34px !important;
max-height: 34px !important;
padding: 0 13px !important;
border: 1px solid #d4dad7 !important;
border-radius: var(--wb-r-control) !important;
background: #ffffff !important;
color: #59615d !important;
font-size: 12px !important;
font-weight: 600 !important;
line-height: 32px !important;
box-shadow: none !important;
}
body.erp-app .image-tool-button:hover:not(:disabled),
body.erp-app .image-open-doubao:hover:not(:disabled),
body.erp-app .export-mapping-button:hover:not(:disabled),
body.erp-app .export-complete-button:hover:not(:disabled),
body.erp-app .page-clear-button:hover:not(:disabled),
body.erp-app .account-editor-secondary:hover:not(:disabled),
body.erp-app .modal-btn:hover:not(:disabled),
body.copywriting-app .pageClearButton:hover:not(:disabled),
body.copywriting-app .selectionPromptButton:hover:not(:disabled),
body.copywriting-app .embeddedRemovalButton:hover:not(:disabled),
body.infringement-app .button:hover:not(:disabled),
body.api-app .action-button:hover:not(:disabled),
body.api-app .quick-button:hover:not(:disabled),
body.api-app .icon-button:hover:not(:disabled),
body.templates-app .primary:hover:not(:disabled),
body.templates-app .secondary:hover:not(:disabled),
body.watermark-app .primary:hover:not(:disabled),
body.watermark-app .secondary:hover:not(:disabled),
body.watermark-app .white:hover:not(:disabled),
body.watermark-app .sync:hover:not(:disabled) {
border-color: #c8ceca !important;
background: #f7f8f8 !important;
color: #1a211e !important;
}
body.erp-app .image-open-doubao:not(:disabled),
body.erp-app .image-transfer-export:not(:disabled),
body.erp-app .export-mapping-button:not(.secondary):not(:disabled),
body.erp-app .export-complete-button:not(:disabled),
body.erp-app .system-check-button.primary:not(:disabled),
body.erp-app .account-add-button:not(:disabled),
body.erp-app .account-editor-primary:not(:disabled),
body.erp-app .modal-btn.confirm:not(.danger):not(:disabled),
body.copywriting-app .embeddedRemovalButton.primary:not(:disabled),
body.infringement-app .button.primary:not(:disabled),
body.api-app .action-button.primary:not(:disabled),
body.templates-app .primary:not(:disabled),
body.watermark-app .primary:not(:disabled),
body.watermark-app .sync:not(:disabled) {
border-color: #0f6f5c !important;
background: #0f6f5c !important;
color: #ffffff !important;
}
body.erp-app .image-open-doubao:not(:disabled):hover,
body.erp-app .image-transfer-export:not(:disabled):hover,
body.erp-app .export-mapping-button:not(.secondary):not(:disabled):hover,
body.erp-app .export-complete-button:not(:disabled):hover,
body.erp-app .system-check-button.primary:not(:disabled):hover,
body.erp-app .account-add-button:not(:disabled):hover,
body.erp-app .account-editor-primary:not(:disabled):hover,
body.erp-app .modal-btn.confirm:not(.danger):not(:disabled):hover,
body.copywriting-app .embeddedRemovalButton.primary:not(:disabled):hover,
body.infringement-app .button.primary:not(:disabled):hover,
body.api-app .action-button.primary:not(:disabled):hover,
body.templates-app .primary:not(:disabled):hover,
body.watermark-app .primary:not(:disabled):hover,
body.watermark-app .sync:not(:disabled):hover {
border-color: #0b5c4c !important;
background: #0b5c4c !important;
color: #ffffff !important;
}
body.erp-app .image-inline-delete:not(:disabled),
body.erp-app .export-quiet-delete:not(:disabled),
body.copywriting-app .selectionDeleteButton:not(:disabled),
body.copywriting-app .embeddedRemovalButton.danger:not(:disabled),
body.infringement-app .button.danger:not(:disabled) {
border-color: transparent !important;
background: transparent !important;
color: #b34a42 !important;
}
body.erp-app .image-inline-delete:not(:disabled):hover,
body.erp-app .export-quiet-delete:not(:disabled):hover,
body.copywriting-app .selectionDeleteButton:not(:disabled):hover,
body.copywriting-app .embeddedRemovalButton.danger:not(:disabled):hover,
body.infringement-app .button.danger:not(:disabled):hover {
border-color: transparent !important;
background: #fbf2f1 !important;
color: #933830 !important;
}
/* Workflow command bars */
body.copywriting-app .workspaceShell {
grid-template-rows: 56px minmax(0, 1fr) !important;
background: #f6f7f6 !important;
}
body.copywriting-app .commandBar,
body.erp-app .image-opt-command-bar,
body.erp-app .export-listing-header,
body.infringement-app .library-toolbar,
body.templates-app .toolbar {
min-height: 56px !important;
height: 56px !important;
max-height: 56px !important;
padding: 0 18px !important;
border: 0 !important;
border-bottom: 1px solid var(--wb-line) !important;
border-radius: 0 !important;
background: #ffffff !important;
box-shadow: none !important;
}
body.copywriting-app .contentCard {
}
body.copywriting-app .workflowActions {
height: 32px !important;
min-height: 32px !important;
box-shadow: none !important;
}
body.copywriting-app .workflowButton {
width: 92px !important;
}
body.copywriting-app .workflowButton[aria-pressed="true"] {
background: #ffffff !important;
color: #0f6f5c !important;
box-shadow: 0 1px 4px rgba(20, 30, 25, .06) !important;
}
body.copywriting-app .parseWorkspace {
background: #f6f7f6 !important;
}
body.copywriting-app .parseInputPane,
body.copywriting-app .embeddedRemovalPane {
}
body.copywriting-app #aiResult,
body.copywriting-app .resultEditor {
border: 1px solid var(--wb-line) !important;
border-radius: 8px !important;
background: #ffffff !important;
}
/* Tables */
body.source-inbox-app .amz-table thead th,
body.copywriting-app #dataTable th,
body.copywriting-app #outputTable th,
body.copywriting-app #embeddedRemovalTable th,
body.erp-app #imageOptimizationTable th,
body.erp-app #exportListingTable th,
body.erp-app .account-table-header {
height: 42px !important;
min-height: 42px !important;
max-height: 42px !important;
padding: 0 12px !important;
border: 0 !important;
border-bottom: 1px solid var(--wb-line) !important;
background: #f7f8f8 !important;
color: #68706c !important;
font-size: 12px !important;
font-weight: 650 !important;
line-height: 20px !important;
vertical-align: middle !important;
white-space: nowrap !important;
}
body.source-inbox-app .amz-table tbody td,
body.copywriting-app #dataTable td,
body.copywriting-app #outputTable td,
body.copywriting-app #embeddedRemovalTable td,
body.erp-app #imageOptimizationTable td,
body.erp-app #exportListingTable td {
padding: 8px 12px !important;
border: 0 !important;
border-bottom: 1px solid #edf0ee !important;
background: #ffffff !important;
color: #1a211e !important;
font-size: 13px !important;
line-height: 20px !important;
vertical-align: middle !important;
}
body.source-inbox-app .amz-table tbody tr:last-child td,
body.copywriting-app #dataTable tbody tr:last-child td,
body.copywriting-app #embeddedRemovalTable tbody tr:last-child td,
body.erp-app #imageOptimizationTable tbody tr:last-child td,
body.erp-app #exportListingTable tbody tr:last-child td {
border-bottom: 0 !important;
}
body.source-inbox-app .amz-table tbody tr:hover td,
body.copywriting-app #dataTable tbody tr:hover td,
body.copywriting-app #embeddedRemovalTable tbody tr:hover td,
body.erp-app #imageOptimizationTable tbody tr:hover td,
body.erp-app #exportListingTable tbody tr:hover td {
background: #fafbfa !important;
}
body.source-inbox-app .amz-table tbody tr.selected td,
body.source-inbox-app .amz-table tbody tr.selected:hover td,
body.copywriting-app #dataTable tbody tr.selected td,
body.copywriting-app #embeddedRemovalTable tbody tr.selected td,
body.erp-app #imageOptimizationTable tbody tr.selected td,
body.erp-app #exportListingTable tbody tr.selected td {
background: #f2f8f5 !important;
}
body.source-inbox-app .amz-table th.amz-col-title,
body.source-inbox-app .amz-table td.amz-col-title,
body.source-inbox-app .amz-table th.amz-col-asin,
body.source-inbox-app .amz-table td.amz-col-asin,
body.source-inbox-app .amz-table th.amz-col-seller,
body.source-inbox-app .amz-table td.amz-col-seller,
body.copywriting-app #dataTable th:nth-child(2),
body.copywriting-app #dataTable td:nth-child(2),
body.copywriting-app #embeddedRemovalTable th:nth-child(2),
body.copywriting-app #embeddedRemovalTable td:nth-child(2),
body.erp-app #imageOptimizationTable th:nth-child(4),
body.erp-app #imageOptimizationTable td:nth-child(4),
body.erp-app #imageOptimizationTable th:nth-child(5),
body.erp-app #imageOptimizationTable td:nth-child(5) {
text-align: left !important;
}
body.erp-app .image-opt-thumbnail,
body.erp-app .export-listing-table-wrap img,
body.copywriting-app #dataTable img,
body.copywriting-app #embeddedRemovalTable img {
border-radius: 6px !important;
}
/* Empty states */
body.source-inbox-app .amz-table-scroll:has(.amz-empty-row) .amz-empty,
body.copywriting-app .previewTableWrap:has(.centeredEmptyState) .emptyCell,
body.copywriting-app .embeddedRemovalPane:has(.embeddedRemovalEmptyState) .embeddedRemovalEmpty,
body.erp-app .image-opt-table-wrap td.image-empty-cell,
body.erp-app .export-listing-table-wrap td.export-listing-empty {
color: #7c8580 !important;
font-size: 13px !important;
font-weight: 500 !important;
letter-spacing: .04em !important;
}
body.source-inbox-app .amz-table-scroll:has(.amz-empty-row) .amz-empty::before,
body.copywriting-app .emptyCell::before,
body.copywriting-app .embeddedRemovalEmpty::before,
body.erp-app .image-empty-cell::before,
body.erp-app .export-listing-empty::before {
content: "" !important;
display: block !important;
width: 20px !important;
height: 2px !important;
margin: 0 auto 10px !important;
border-radius: 2px !important;
background: #0f6f5c !important;
opacity: .55 !important;
}
/* Account and system check */
body.erp-app .view-accounts.active,
body.erp-app .view-system-check.active {
padding: clamp(52px, 8vh, 88px) 22px 28px !important;
background: #f6f7f6 !important;
}
body.erp-app .view-accounts .accounts-page-minimal,
body.erp-app .view-accounts.active .accounts-page-minimal,
body.erp-app .view-system-check .system-check-page {
width: min(820px, 100%) !important;
max-width: 820px !important;
}
body.erp-app .view-accounts.active .accounts-shell-minimal {
width: 100% !important;
max-width: 100% !important;
padding: 0 !important;
border: 0 !important;
border-radius: 0 !important;
background: transparent !important;
box-shadow: none !important;
}
body.erp-app .accounts-shell-minimal {
}
body.erp-app .accounts-primary-action {
}
body.erp-app .account-table {
}
body.erp-app .account-table-header,
body.erp-app .account-table-row {
}
body.erp-app .account-table-header {
}
body.erp-app .account-table-row {
}
body.erp-app .account-table-cell {
}
body.erp-app .system-check-page {
padding: 0 !important;
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
}
body.erp-app .system-check-header {
}
body.erp-app .system-check-header p {
}
body.erp-app .system-check-list {
padding-top: 10px !important;
}
body.erp-app .system-check-row {
border: 1px solid #e9ecea !important;
box-shadow: none !important;
}
/* Module management pages */
body.infringement-app,
body.templates-app,
body.api-app {
padding: 36px 18px 18px !important;
background: #f6f7f6 !important;
}
body.infringement-app .library-page,
body.templates-app .template-page,
body.api-app .api-page {
border: 1px solid var(--wb-line) !important;
border-radius: 12px !important;
background: #ffffff !important;
box-shadow: none !important;
}
body.infringement-app .library-page,
body.templates-app .template-page {
width: min(920px, 100%) !important;
max-width: 920px !important;
height: auto !important;
min-height: 220px !important;
max-height: calc(100vh - 92px) !important;
justify-content: flex-start !important;
align-items: stretch !important;
}
body.infringement-app .library-card,
body.templates-app .template-card {
}
body.infringement-app .library-toolbar,
body.templates-app .toolbar,
body.infringement-app .count-dashboard,
body.templates-app .count-dashboard {
border-radius: 0 !important;
background: #ffffff !important;
}
body.infringement-app .count-dashboard,
body.templates-app .count-dashboard {
}
body.infringement-app .metric-card,
body.templates-app .metric-card {
min-height: 0 !important;
height: auto !important;
width: min(520px, 100%) !important;
max-width: none !important;
margin: 0 auto !important;
padding: 0 12px !important;
}
body.infringement-app .metric-card .metric-value,
body.templates-app .metric-card .metric-value {
font-size: 12px !important;
}
body.infringement-app .metric-card .metric-value strong,
body.templates-app .metric-card .metric-value strong {
font-size: 18px !important;
font-weight: 650 !important;
}
body.infringement-app .empty-state,
body.templates-app .empty {
}
/* API settings */
body.api-app .api-page {
width: min(1000px, 100%) !important;
max-width: 1000px !important;
height: calc(100vh - 88px) !important;
min-height: 0 !important;
max-height: 800px !important;
grid-template-columns: 204px minmax(0, 1fr) !important;
}
body.api-app .api-sidebar {
}
body.api-app .sidebar-head {
}
body.api-app .connection-list {
}
body.api-app .connection-card {
}
body.api-app .connection-card:hover {
border-color: #c8ceca !important;
background: #fafbfa !important;
}
body.api-app .connection-card.active {
border-color: rgba(15, 111, 92, .4) !important;
background: #f2f8f5 !important;
}
body.api-app .empty-editor {
}
body.api-app .empty-panel {
}
body.api-app .editor-body {
}
body.api-app .panel-card,
body.api-app .result-card {
}
body.api-app .field input,
body.api-app .field select,
body.api-app .field textarea,
body.api-app .provider-select select,
body.api-app input[type="text"],
body.api-app input[type="url"],
body.api-app input[type="password"] {
}
/* Overlays */
body.erp-app .modal-backdrop,
body.erp-app .account-editor-backdrop,
body.erp-app .product-detail-backdrop,
body.erp-app .erp-image-zoom-backdrop,
body.infringement-app .dialog-backdrop {
background: rgba(23, 30, 26, .18) !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
}
body.erp-app .system-modal,
body.erp-app .account-editor-modal,
body.erp-app .export-file-modal,
body.erp-app .watermark-tool-modal,
body.infringement-app .dialog-card {
border: 1px solid var(--wb-line) !important;
border-radius: 14px !important;
background: #ffffff !important;
box-shadow: var(--wb-shadow-modal) !important;
}
body.erp-app .account-editor-modal {
}
body.erp-app .system-modal {
}
body.erp-app .export-file-modal {
}
body.erp-app .watermark-tool-modal {
width: min(1180px, 94vw) !important;
}
body.erp-app .account-editor-header,
body.erp-app .system-modal-copy,
body.erp-app .export-file-modal-copy,
body.infringement-app .dialog-header {
padding: 16px 18px 0 !important;
}
body.erp-app .account-editor-actions,
body.erp-app .system-modal-actions,
body.erp-app .export-file-modal-actions,
body.infringement-app .dialog-footer {
padding: 0 18px 16px !important;
}
body.erp-app .modal-btn,
body.erp-app .account-editor-primary,
body.erp-app .account-editor-secondary,
body.infringement-app .button {
height: 34px !important;
min-height: 34px !important;
max-height: 34px !important;
border-radius: var(--wb-r-control) !important;
}
body.erp-app .erp-toast,
body.source-inbox-app .amz-toast,
body.copywriting-app .moduleToast,
body.infringement-app .module-toast,
body.api-app .module-toast,
body.templates-app .toast,
body.watermark-app .toast {
border-radius: 8px !important;
background: #262c28 !important;
color: #ffffff !important;
box-shadow: 0 10px 30px rgba(0, 0, 0, .16) !important;
}
body.source-inbox-app .amz-pagination button,
body.source-inbox-app .amz-page-size-label select,
body.erp-app .workflow-pagination button,
body.copywriting-app .copywritingPager button,
body.infringement-app .pagination button,
body.templates-app .pagination button {
height: 28px !important;
min-height: 28px !important;
max-height: 28px !important;
border: 1px solid #d4dad7 !important;
border-radius: 6px !important;
background: #ffffff !important;
color: #68706c !important;
font-size: 12px !important;
font-weight: 600 !important;
box-shadow: none !important;
}
body.source-inbox-app .amz-page-size-label select,
body.erp-app .workflow-pagination select {
background-color: #ffffff !important;
}
@media (max-width: 900px) {
body.erp-app #appView {
grid-template-columns: 84px minmax(0, 1fr) !important;
padding: 8px !important;
}
body.erp-app .sidebar {
width: 84px !important;
min-width: 84px !important;
padding-left: 4px !important;
padding-right: 4px !important;
}
body.infringement-app,
body.templates-app,
body.api-app {
padding: 22px 10px 10px !important;
}
body.api-app .api-page {
grid-template-columns: 1fr !important;
grid-template-rows: auto minmax(0, 1fr) !important;
}
body.api-app .api-sidebar {
width: 100% !important;
max-height: 230px !important;
border-right: 0 !important;
border-bottom: 1px solid var(--wb-line) !important;
border-radius: 12px 12px 0 0 !important;
}
}
/* v178 final visual polish pass */
/* System check: same centered compact sheet as account management. */
body.erp-app .view-system-check.active > .system-check-page,
body.erp-app .view-system-check.active > .system-check-page.active {
display: grid !important;
grid-template-columns: minmax(0, 1fr) !important;
grid-template-rows: auto auto !important;
align-content: start !important;
justify-content: stretch !important;
width: min(820px, 100%) !important;
max-width: 820px !important;
height: auto !important;
min-height: 0 !important;
max-height: none !important;
margin: 0 auto !important;
padding: 0 !important;
gap: 10px !important;
border: 0 !important;
border-radius: 0 !important;
background: transparent !important;
box-shadow: none !important;
overflow: visible !important;
}
body.erp-app #systemCheckFixBtn {
height: 34px !important;
min-height: 34px !important;
max-height: 34px !important;
padding: 0 14px !important;
border-radius: var(--wb-r-control) !important;
font-size: 12px !important;
line-height: 32px !important;
}
body.erp-app .view-system-check.active .system-check-header {
flex-direction: row !important;
}
body.erp-app .view-system-check.active .system-check-header > div:first-child {
display: none !important;
}
body.erp-app .view-system-check.active .system-check-header p {
margin: 0 !important;
text-align: left !important;
}
body.erp-app .view-system-check.active .system-check-actions {
}
body.erp-app .view-system-check.active .system-check-list {
}
body.erp-app .view-system-check.active .system-check-row {
}
body.erp-app .view-system-check.active .system-check-row:last-child {
border-bottom: 0 !important;
}
body.erp-app .view-system-check.active .system-check-row-main {
}
body.erp-app .view-system-check.active .system-check-row-main strong {
}
body.erp-app .view-system-check.active .system-check-row-main span {
display: none !important;
}
body.erp-app .view-system-check.active .system-check-row-main small {
display: none !important;
}
/* Module management pages: one quiet sheet, no double card. */
body.infringement-app > main.library-page,
body.templates-app > main.template-page {
width: min(920px, 100%) !important;
max-width: 920px !important;
height: auto !important;
min-height: 0 !important;
max-height: calc(100vh - 92px) !important;
margin: 0 auto !important;
padding: 0 !important;
display: flex !important;
align-items: stretch !important;
justify-content: center !important;
border: 1px solid var(--wb-line) !important;
border-radius: 12px !important;
background: #ffffff !important;
box-shadow: none !important;
overflow: hidden !important;
}
body.infringement-app .library-card,
body.templates-app .template-card {
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
height: auto !important;
min-height: 0 !important;
margin: 0 !important;
padding: 0 !important;
display: flex !important;
flex-direction: column !important;
align-items: stretch !important;
justify-content: flex-start !important;
border: 0 !important;
border-radius: 0 !important;
background: transparent !important;
box-shadow: none !important;
overflow: hidden !important;
}
body.infringement-app .library-toolbar,
body.templates-app .toolbar {
min-height: 56px !important;
height: 56px !important;
max-height: 56px !important;
padding: 0 16px !important;
border: 0 !important;
border-bottom: 1px solid var(--wb-line) !important;
border-radius: 0 !important;
background: #ffffff !important;
}
body.infringement-app .count-dashboard,
body.templates-app .count-dashboard {
min-height: 54px !important;
height: 54px !important;
max-height: 54px !important;
padding: 0 16px !important;
border: 0 !important;
border-bottom: 1px solid var(--wb-line) !important;
border-radius: 0 !important;
background: #ffffff !important;
}
body.infringement-app #addOneButton,
body.infringement-app #addBatchButton,
body.infringement-app #importFileButton,
body.templates-app #importButton {
height: 34px !important;
min-height: 34px !important;
max-height: 34px !important;
padding: 0 13px !important;
border-radius: var(--wb-r-control) !important;
font-size: 12px !important;
line-height: 32px !important;
}
body.infringement-app .empty-state,
body.templates-app .empty {
min-height: 120px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
padding: 20px !important;
border: 0 !important;
color: var(--wb-muted) !important;
font-size: 12px !important;
font-weight: 500 !important;
text-align: center !important;
}
body.infringement-app .empty-state::before,
body.templates-app .empty::before {
content: none !important;
display: none !important;
}
/* API empty state: move the compact choose buttons toward the upper center. */
body.api-app .api-page:has(#emptyEditor:not(.hidden)) {
height: min(540px, calc(100vh - 150px)) !important;
min-height: 0 !important;
max-height: 540px !important;
}
body.api-app .api-workspace:has(#emptyEditor:not(.hidden)) {
display: grid !important;
grid-template-columns: minmax(0, 1fr) !important;
grid-template-rows: minmax(0, 1fr) !important;
align-items: stretch !important;
}
body.api-app #emptyEditor:not(.hidden) {
display: grid !important;
grid-template-columns: minmax(0, 1fr) !important;
grid-template-rows: auto !important;
align-content: start !important;
justify-items: center !important;
min-height: 0 !important;
height: 100% !important;
padding: 74px 24px !important;
overflow: hidden !important;
}
body.api-app #emptyEditor .empty-panel {
width: auto !important;
max-width: none !important;
min-width: 0 !important;
padding: 0 !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
border: 0 !important;
background: transparent !important;
box-shadow: none !important;
}
body.api-app #emptyEditor .empty-actions {
display: flex !important;
align-items: center !important;
justify-content: center !important;
gap: 8px !important;
padding: 0 !important;
border: 0 !important;
background: transparent !important;
}
body.api-app #emptyDeepSeekBtn,
body.api-app #emptyR2Btn,
body.api-app #emptyNewBtn,
body.api-app .quick-button {
height: 34px !important;
min-height: 34px !important;
max-height: 34px !important;
padding: 0 14px !important;
border-radius: var(--wb-r-control) !important;
font-size: 12px !important;
line-height: 32px !important;
}
/* Quiet empty states for the main workflow pages. */
body.erp-app .image-empty-cell::before,
body.erp-app .export-listing-empty::before,
body.source-inbox-app .amz-empty::before {
content: none !important;
display: none !important;
margin: 0 !important;
}
/* Last control sizing pass for old id-specific styles. */
body.copywriting-app #parseResultBtn,
body.copywriting-app #copyPromptButton,
body.copywriting-app #selectionPromptButton,
body.copywriting-app #embeddedRemovalButton,
body.copywriting-app .selectionPromptButton,
body.copywriting-app .selectionDeleteButton,
body.copywriting-app .embeddedRemovalButton,
body.copywriting-app .pageClearButton,
body.copywriting-app .workflowButton {
height: 34px !important;
min-height: 34px !important;
max-height: 34px !important;
border-radius: var(--wb-r-control) !important;
font-size: 12px !important;
}
body.erp-app .modal-btn,
body.erp-app .account-editor-primary,
body.erp-app .account-editor-secondary,
body.erp-app .system-check-button,
body.erp-app .account-add-button,
body.erp-app .page-clear-button,
body.erp-app .image-tool-button,
body.erp-app .image-open-doubao,
body.erp-app .image-inline-delete,
body.erp-app .image-transfer-export,
body.erp-app .export-mapping-button,
body.erp-app .export-complete-button,
body.erp-app .export-quiet-delete {
height: 34px !important;
min-height: 34px !important;
max-height: 34px !important;
padding: 0 13px !important;
border-radius: var(--wb-r-control) !important;
font-size: 12px !important;
line-height: 32px !important;
}
@media (max-width: 1100px) {
}
/* 老板账号菜单：悬停即可展开，并让弹层与按钮之间保持连续可点击区域。 */
body.erp-app .user-menu {
position: relative !important;
}
body.erp-app .user-menu .user-name {
cursor: pointer !important;
}
body.erp-app .user-menu .user-popover {
bottom: calc(100% + 8px) !important;
z-index: 80 !important;
pointer-events: auto !important;
}
body.erp-app .user-menu .user-popover::before {
content: "" !important;
position: absolute !important;
left: 0 !important;
right: 0 !important;
bottom: -8px !important;
height: 8px !important;
display: block !important;
pointer-events: auto !important;
}
body.erp-app .user-menu:hover .user-popover,
body.erp-app .user-menu.open .user-popover,
body.erp-app .user-menu:focus-within .user-popover {
opacity: 1 !important;
visibility: visible !important;
pointer-events: auto !important;
transform: none !important;
transition-delay: 0s !important;
}
/* YFTX visual design layer v179
UI-only refinements. Business behavior and button actions remain untouched. */
:root,
body.erp-app,
body.source-inbox-app,
body.copywriting-app,
body.api-app,
body.templates-app,
body.watermark-app {
--wb-page: #f2f4f3;
--wb-page-soft: #f6f7f6;
--wb-surface: #ffffff;
--wb-surface-soft: #f6f7f6;
--wb-text: #18201c;
--wb-muted: #69716d;
--wb-subtle: #9aa29e;
--wb-line: #e3e7e5;
--wb-line-strong: #cfd6d2;
--wb-accent: #0e6b58;
--wb-accent-hover: #0a5949;
--wb-accent-soft: #edf5f1;
--wb-danger: #ad453c;
--wb-success: #3f7a56;
--wb-warning: #87682f;
--wb-shadow-pop: 0 8px 22px rgba(20, 30, 25, .08);
--wb-shadow-modal: 0 22px 56px rgba(16, 26, 21, .16);
--wb-r-control: 6px;
--wb-r-card: 8px;
--wb-r-panel: 10px;
--wb-r-modal: 12px;
--wb-control: 34px;
--wb-control-small: 28px;
--wb-font: "Inter", "SF Pro Text", "PingFang SC", "Microsoft YaHei UI", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
body.erp-app,
body.source-inbox-app,
body.copywriting-app,
body.api-app,
body.templates-app,
body.watermark-app {
background: var(--wb-page) !important;
color: var(--wb-text) !important;
font-size: 13px !important;
line-height: 1.5 !important;
letter-spacing: 0 !important;
}
body.erp-app button,
body.source-inbox-app button,
body.copywriting-app button,
body.api-app button,
body.templates-app button,
body.watermark-app button {
min-width: 0 !important;
white-space: nowrap !important;
box-shadow: none !important;
}
body.erp-app button,
body.source-inbox-app button,
body.copywriting-app button,
body.api-app button,
body.templates-app button,
body.watermark-app button,
body.erp-app input,
body.erp-app select,
body.erp-app textarea,
body.source-inbox-app input,
body.source-inbox-app select,
body.source-inbox-app textarea,
body.copywriting-app input,
body.copywriting-app select,
body.copywriting-app textarea,
body.api-app input,
body.api-app select,
body.api-app textarea,
body.templates-app input,
body.templates-app select,
body.templates-app textarea {
outline-color: rgba(14, 107, 88, .32) !important;
}
body.erp-app ::selection,
body.source-inbox-app ::selection,
body.copywriting-app ::selection,
body.api-app ::selection,
body.templates-app ::selection {
background: rgba(14, 107, 88, .16) !important;
}
/* Typography scale */
body.erp-app h1,
body.copywriting-app h1,
body.api-app h1,
body.templates-app h1 {
font-size: 18px !important;
font-weight: 650 !important;
letter-spacing: 0 !important;
}
body.erp-app h2,
body.copywriting-app h2,
body.api-app h2,
body.templates-app h2 {
font-size: 15px !important;
font-weight: 650 !important;
letter-spacing: 0 !important;
}
body.erp-app h3,
body.copywriting-app h3,
body.api-app h3,
body.templates-app h3 {
font-size: 13px !important;
font-weight: 650 !important;
letter-spacing: 0 !important;
}
body.erp-app td,
body.source-inbox-app td,
body.copywriting-app td,
body.api-app td,
body.templates-app td {
font-variant-numeric: tabular-nums !important;
}
/* Shell rhythm */
body.erp-app #appView {
grid-template-columns: 92px minmax(0, 1fr) !important;
gap: 10px !important;
padding: 10px !important;
}
body.erp-app .sidebar {
border-color: #e3e7e5 !important;
}
body.erp-app .workspace {
border-color: #e3e7e5 !important;
}
body.erp-app .brand {
flex-basis: 46px !important;
margin-bottom: 2px !important;
}
body.erp-app .brand img {
}
body.erp-app .nav {
}
body.erp-app .nav button {
flex-basis: 42px !important;
gap: 3px !important;
}
body.erp-app .nav button.active {
position: relative !important;
color: #0e6b58 !important;
background: #f1f6f3 !important;
font-weight: 650 !important;
}
body.erp-app .nav button.active::before {
left: -7px !important;
top: 11px !important;
bottom: 11px !important;
width: 2px !important;
}
body.erp-app .sidebar-user {
border-color: #edf0ee !important;
}
body.erp-app .user-name {
}
body.erp-app .user-popover {
border-color: #e3e7e5 !important;
}
body.erp-app .user-menu-action {
border-bottom-color: #f0f2f1 !important;
text-align: center !important;
}
body.erp-app .user-menu-action:last-child {
border-bottom: 0 !important;
}
body.erp-app .user-popover::before {
bottom: -6px !important;
height: 6px !important;
}
/* Standard buttons */
body.erp-app .image-tool-button,
body.erp-app .image-open-doubao,
body.erp-app .image-inline-delete,
body.erp-app .image-transfer-export,
body.erp-app .export-mapping-button,
body.erp-app .export-complete-button,
body.erp-app .export-quiet-delete,
body.erp-app .page-clear-button,
body.erp-app .system-check-button,
body.erp-app .account-add-button,
body.erp-app .account-editor-primary,
body.erp-app .account-editor-secondary,
body.erp-app .modal-btn,
body.copywriting-app .pageClearButton,
body.copywriting-app .selectionDeleteButton,
body.copywriting-app .selectionPromptButton,
body.copywriting-app .embeddedRemovalButton,
body.api-app .action-button,
body.api-app .quick-button,
body.templates-app .primary,
body.templates-app .secondary,
body.templates-app .retry,
body.source-inbox-app .amz-action,
body.source-inbox-app .amz-new-batch-button {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
height: 34px !important;
min-height: 34px !important;
max-height: 34px !important;
padding: 0 13px !important;
border-radius: 6px !important;
font-size: 12px !important;
font-weight: 600 !important;
line-height: 1 !important;
letter-spacing: 0 !important;
}
body.copywriting-app .workflowButton {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
max-height: 28px !important;
}
body.source-inbox-app .amz-engine-action,
body.source-inbox-app .amz-pagination button,
body.erp-app .workflow-pagination button,
body.copywriting-app .copywritingPager button,
body.templates-app .pagination button {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
height: 30px !important;
min-height: 30px !important;
padding: 0 11px !important;
border-radius: 6px !important;
font-size: 12px !important;
font-weight: 600 !important;
}
/* Command bar consistency */
body.source-inbox-app .amz-topbar,
body.copywriting-app .commandBar,
body.erp-app .image-opt-command-bar,
body.erp-app .export-listing-header,
body.api-app .sidebar-head,
body.templates-app .toolbar {
height: 60px !important;
min-height: 60px !important;
max-height: 60px !important;
padding: 0 16px !important;
border-bottom-color: #e3e7e5 !important;
}
body.copywriting-app .workspaceShell {
}
body.copywriting-app .commandBar {
}
body.copywriting-app .contentCard {
padding: 0 !important;
}
body.source-inbox-app .amz-result-pane,
body.copywriting-app .tableWrap,
body.erp-app .export-listing-table-wrap,
body.api-app .connection-form,
body.templates-app .template-card {
border-color: #e3e7e5 !important;
border-radius: 8px !important;
background: #ffffff !important;
}
body.source-inbox-app .amz-table thead th,
body.copywriting-app #dataTable th,
body.copywriting-app #embeddedRemovalTable th,
body.erp-app #exportListingTable th,
body.erp-app .account-table-header {
height: 40px !important;
min-height: 40px !important;
max-height: 40px !important;
padding: 0 12px !important;
background: #f6f7f6 !important;
color: #66706b !important;
font-size: 12px !important;
font-weight: 650 !important;
line-height: 20px !important;
}
body.source-inbox-app .amz-table tbody td,
body.copywriting-app #dataTable td,
body.copywriting-app #embeddedRemovalTable td,
body.erp-app #exportListingTable td {
padding: 8px 12px !important;
font-size: 13px !important;
line-height: 20px !important;
}
body.source-inbox-app .amz-table tbody tr:hover td,
body.copywriting-app #dataTable tbody tr:hover td,
body.copywriting-app #embeddedRemovalTable tbody tr:hover td,
body.erp-app #exportListingTable tbody tr:hover td {
background: #fafbfa !important;
}
body.source-inbox-app .amz-table tbody tr.selected td,
body.copywriting-app #dataTable tbody tr.selected td,
body.copywriting-app #embeddedRemovalTable tbody tr.selected td,
body.erp-app #exportListingTable tbody tr.selected td {
background: #eff7f3 !important;
}
body.source-inbox-app .amz-thumb,
body.copywriting-app #dataTable img,
body.copywriting-app #embeddedRemovalTable img,
body.erp-app #exportListingTable img {
border-radius: 6px !important;
}
/* Unified empty states */
body.source-inbox-app .amz-table-scroll:has(.amz-empty-row) .amz-empty,
body.source-inbox-app .amz-table-scroll:has(.amz-empty-row) .amz-empty-row,
body.source-inbox-app .amz-table-scroll:has(.amz-empty-row) .amz-empty-row td,
body.copywriting-app .emptyCell,
body.copywriting-app .embeddedRemovalEmpty,
body.erp-app .export-listing-empty,
body.api-app .connection-empty,
body.templates-app .empty {
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 100% !important;
min-height: 260px !important;
padding: 24px !important;
border: 0 !important;
background: transparent !important;
color: var(--wb-muted) !important;
font-size: 13px !important;
font-weight: 500 !important;
letter-spacing: 0 !important;
text-align: center !important;
}
body.erp-app #accountList:empty {
display: grid !important;
place-items: center !important;
width: 100% !important;
min-height: 160px !important;
color: var(--wb-muted) !important;
font-size: 13px !important;
font-weight: 500 !important;
}
body.erp-app #accountList:empty::after {
content: "暂无数据" !important;
}
/* Accounts, system check, templates and API compact centered sheets */
body.erp-app .view-accounts.active,
body.erp-app .view-system-check.active {
padding: 56px 20px 28px !important;
}
body.erp-app .view-accounts .accounts-page-minimal,
body.erp-app .view-accounts.active .accounts-page-minimal,
body.erp-app .view-system-check.active > .system-check-page,
body.erp-app .view-system-check.active > .system-check-page.active {
width: min(780px, 100%) !important;
min-width: 0 !important;
max-width: 780px !important;
}
body.erp-app .account-table {
}
body.erp-app .account-table-header {
}
body.erp-app .account-table-row {
}
body.erp-app .account-table-cell {
}
body.erp-app .system-check-page {
}
body.erp-app .view-system-check.active .system-check-header {
}
body.erp-app .view-system-check.active .system-check-header p {
}
body.erp-app .view-system-check.active .system-check-list {
border-color: #e3e7e5 !important;
}
body.erp-app .view-system-check.active .system-check-row {
}
body.api-app {
}
body.api-app .api-page {
border-color: #e3e7e5 !important;
}
body.api-app .api-sidebar {
border-color: #e3e7e5 !important;
}
body.api-app .connection-card {
border-color: #e3e7e5 !important;
}
body.api-app .editor-body {
}
body.api-app .panel-card,
body.api-app .result-card {
border-color: #e3e7e5 !important;
}
body.api-app .field input,
body.api-app .field select,
body.api-app .field textarea,
body.api-app .provider-select select,
body.api-app input[type="text"],
body.api-app input[type="url"],
body.api-app input[type="password"] {
border-color: #d7ddd9 !important;
color: var(--wb-text) !important;
}
body.templates-app {
padding: 34px 18px 18px !important;
}
body.templates-app > main.template-page {
border-color: #e3e7e5 !important;
align-items: stretch !important;
justify-content: flex-start !important;
}
body.templates-app .template-card {
}
body.templates-app .metric-card {
}
body.templates-app .metric-card .metric-value strong {
}
body.erp-app .export-listing-table-wrap {
}
body.erp-app .export-listing-header .export-clear-toolbar,
body.erp-app .export-listing-header .export-listing-actions {
gap: 8px !important;
}
/* Loading and busy buttons */
button[aria-busy="true"],
button[data-busy="true"] {
position: relative !important;
pointer-events: none !important;
padding-left: 24px !important;
}
button[aria-busy="true"]::before,
button[data-busy="true"]::before {
content: "" !important;
position: absolute !important;
left: 8px !important;
top: 50% !important;
width: 12px !important;
height: 12px !important;
margin-top: -6px !important;
border: 1.5px solid currentColor !important;
border-right-color: transparent !important;
border-radius: 50% !important;
opacity: .9 !important;
animation: yftx-button-spin .72s linear infinite !important;
}
@keyframes yftx-button-spin {
to { transform: rotate(360deg); }
}
/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: .01ms !important;
animation-iteration-count: 1 !important;
transition-duration: .01ms !important;
}
}
/* Modals */
body.erp-app .modal-backdrop,
body.erp-app .account-editor-backdrop,
body.erp-app .product-detail-backdrop {
background: rgba(18, 26, 22, .22) !important;
}
body.erp-app .system-modal,
body.erp-app .account-editor-modal,
body.erp-app .export-file-modal {
border-color: #e3e7e5 !important;
}
body.erp-app .account-editor-header h2,
body.erp-app .system-modal-copy h2,
body.erp-app .export-file-modal-copy h2 {
font-size: 15px !important;
}
body.erp-app .account-editor-field > span,
body.erp-app .export-file-modal-copy > label {
font-size: 12px !important;
font-weight: 600 !important;
}
/* Toasts */
body.erp-app .erp-toast,
body.source-inbox-app .amz-toast,
body.copywriting-app .moduleToast,
body.api-app .module-toast,
body.templates-app .toast {
left: 50% !important;
right: auto !important;
transform: translateX(-50%) !important;
bottom: 18px !important;
min-height: 34px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
padding: 8px 14px !important;
border: 1px solid rgba(255, 255, 255, .08) !important;
border-radius: 8px !important;
background: #242a27 !important;
box-shadow: 0 10px 26px rgba(12, 19, 15, .2) !important;
color: #ffffff !important;
font-size: 12px !important;
font-weight: 550 !important;
}
/* Scrollbars */
body.erp-app ::-webkit-scrollbar,
body.source-inbox-app ::-webkit-scrollbar,
body.copywriting-app ::-webkit-scrollbar,
body.api-app ::-webkit-scrollbar,
body.templates-app ::-webkit-scrollbar {
width: 6px !important;
height: 6px !important;
}
body.erp-app ::-webkit-scrollbar-thumb,
body.source-inbox-app ::-webkit-scrollbar-thumb,
body.copywriting-app ::-webkit-scrollbar-thumb,
body.api-app ::-webkit-scrollbar-thumb,
body.templates-app ::-webkit-scrollbar-thumb {
border-radius: 999px !important;
background: #d5dbd8 !important;
}
/* Responsive command bars */
@media (max-width: 1280px) {
body.source-inbox-app .amz-topbar {
padding: 0 12px !important;
}
body.source-inbox-app .amz-compact-fields {
gap: 8px !important;
}
body.copywriting-app .commandBar {
padding: 0 12px !important;
}
}
@media (max-width: 1050px) {
body.copywriting-app .commandBar {
grid-template-columns: 1fr auto !important;
grid-template-rows: auto auto !important;
height: auto !important;
min-height: 94px !important;
gap: 6px !important;
padding: 8px 12px !important;
}
body.copywriting-app .workspaceShell {
grid-template-rows: auto minmax(0, 1fr) !important;
}
}
/* v179 final refinements: restore API toolbar, standardize empty text height,
keep zero letter spacing and make focus/feedback states deterministic. */
body.api-app .sidebar-head > div.sidebar-tools {
display: inline-flex !important;
flex-direction: row !important;
align-items: center !important;
justify-content: flex-end !important;
gap: 8px !important;
width: auto !important;
min-width: 0 !important;
min-height: 34px !important;
height: 34px !important;
margin: 0 !important;
}
body.api-app .sidebar-head .sidebar-tools .icon-button {
display: inline-flex !important;
visibility: visible !important;
opacity: 1 !important;
}
body.erp-app :is(p, span, small, strong, label, td, th, div, section, button, input, select, textarea),
body.source-inbox-app :is(p, span, small, strong, label, td, th, div, section, button, input, select, textarea),
body.copywriting-app :is(p, span, small, strong, label, td, th, div, section, button, input, select, textarea),
body.api-app :is(p, span, small, strong, label, td, th, div, section, button, input, select, textarea),
body.templates-app :is(p, span, small, strong, label, td, th, div, section, button, input, select, textarea) {
letter-spacing: 0 !important;
}
body.copywriting-app .previewTableWrap:has(.centeredEmptyState) {
margin-top: clamp(24px, 4vh, 38px) !important;
}
body.copywriting-app .embeddedRemovalPane .embeddedRemovalTableWrap:has(.embeddedRemovalEmptyState) {
margin-top: clamp(24px, 4vh, 38px) !important;
}
body.erp-app .view.active {
animation: yftx-view-in .12s ease both !important;
}
@keyframes yftx-view-in {
from { opacity: 0; }
to { opacity: 1; }
}
body.erp-app :is(button, input, select, textarea, [tabindex]):focus-visible,
body.source-inbox-app :is(button, input, select, textarea, [tabindex]):focus-visible,
body.copywriting-app :is(button, input, select, textarea, [tabindex]):focus-visible,
body.api-app :is(button, input, select, textarea, [tabindex]):focus-visible,
body.templates-app :is(button, input, select, textarea, [tabindex]):focus-visible {
outline: 2px solid rgba(14, 107, 88, .38) !important;
outline-offset: 2px !important;
}
body.erp-app :is(button, input, select, textarea, [tabindex]),
body.source-inbox-app :is(button, input, select, textarea, [tabindex]),
body.copywriting-app :is(button, input, select, textarea, [tabindex]),
body.api-app :is(button, input, select, textarea, [tabindex]),
body.templates-app :is(button, input, select, textarea, [tabindex]) {
transition-duration: 100ms !important;
}
body.copywriting-app .commandBar .pageClearButton,
body.copywriting-app .commandBar .selectionDeleteButton,
body.copywriting-app .commandBar .selectionPromptButton,
body.copywriting-app .commandBar .embeddedRemovalButton {
height: 34px !important;
min-height: 34px !important;
max-height: 34px !important;
padding: 0 12px !important;
border-radius: 6px !important;
font-size: 12px !important;
font-weight: 600 !important;
}
body.erp-app .export-listing-header button,
body.erp-app .export-listing-header .export-mapping-button,
body.erp-app .export-listing-header .export-complete-button,
body.erp-app .export-listing-header .page-clear-button,
body.erp-app .export-listing-header .export-quiet-delete {
height: 34px !important;
min-height: 34px !important;
max-height: 34px !important;
padding: 0 12px !important;
border-radius: 6px !important;
font-size: 12px !important;
font-weight: 600 !important;
}
body.erp-app button[disabled]:not([aria-busy="true"]),
body.source-inbox-app button[disabled]:not([aria-busy="true"]),
body.copywriting-app button[disabled]:not([aria-busy="true"]),
body.api-app button[disabled]:not([aria-busy="true"]),
body.templates-app button[disabled]:not([aria-busy="true"]) {
color: #a3aba7 !important;
background: #f1f3f2 !important;
border-color: #e6eae7 !important;
cursor: not-allowed !important;
}
body.copywriting-app .commandBar[data-panel="preview"] #clearCopywritingPage,
body.copywriting-app .commandBar[data-panel="parse"] #clearParsePage,
body.copywriting-app .previewCommandGroup #generatePrompt,
body.copywriting-app .parseWorkflowActions #embeddedDeleteRemovalSelected,
body.copywriting-app .parseWorkflowActions #embeddedStripBrandTerms,
body.copywriting-app .parseWorkflowActions #embeddedTransferExport {
width: auto !important;
min-width: 0 !important;
max-width: none !important;
height: 34px !important;
min-height: 34px !important;
max-height: 34px !important;
padding: 0 12px !important;
border-radius: 6px !important;
line-height: 1 !important;
}
body.erp-app .export-listing-header #clearExportPage,
body.erp-app .export-listing-header #startExportMapping,
body.erp-app .export-listing-header #exportMissingTemplatePlan,
body.erp-app .export-listing-header #exportCompleteTable,
body.erp-app .export-listing-header #deleteExportSelected {
width: auto !important;
min-width: 0 !important;
max-width: none !important;
height: 34px !important;
min-height: 34px !important;
max-height: 34px !important;
padding: 0 12px !important;
border-radius: 6px !important;
line-height: 1 !important;
}
/* v179 final details: readable API toolbar, same-row template summary and
visually grouped collector counters. */
body.api-app .sidebar-head .sidebar-tools .icon-button.has-label {
width: auto !important;
min-width: 0 !important;
height: 34px !important;
min-height: 34px !important;
max-height: 34px !important;
padding: 0 10px !important;
gap: 6px !important;
border-color: #d7ddd9 !important;
background: #ffffff !important;
}
body.api-app .sidebar-head .sidebar-tools .icon-button.has-label svg {
width: 15px !important;
height: 15px !important;
flex: 0 0 15px !important;
}
body.api-app .sidebar-head .sidebar-tools .icon-button.has-label span {
display: inline-flex !important;
min-width: 0 !important;
font-size: 12px !important;
font-weight: 600 !important;
line-height: 1 !important;
white-space: nowrap !important;
}
body.api-app .sidebar-head .sidebar-tools .icon-button.has-label:hover:not(:disabled),
body.api-app .sidebar-head .sidebar-tools .icon-button.has-label[aria-expanded="true"] {
border-color: rgba(14, 107, 88, .26) !important;
background: #edf5f1 !important;
color: #0a5949 !important;
}
body.templates-app .template-card {
}
body.templates-app .toolbar.count-toolbar {
}
body.templates-app .count-dashboard {
}
body.templates-app .metric-card {
}
body.templates-app .metric-card .metric-eyebrow {
white-space: nowrap !important;
}
body.templates-app .metric-card .metric-value {
white-space: nowrap !important;
}
body.templates-app .metric-card .metric-value strong {
}
body.templates-app .metric-card .metric-value span {
}
body.templates-app .metric-card .metric-foot {
flex-wrap: nowrap !important;
}
body.templates-app .metric-card .status-pill {
}
body.templates-app .upload-status,
body.templates-app .upload-failure {
}
@media (max-width: 720px) {
body.templates-app .template-card {
grid-template-columns: 1fr !important;
grid-template-rows: 60px auto !important;
}
body.templates-app .toolbar.count-toolbar,
body.templates-app .count-dashboard {
grid-column: 1 !important;
}
body.templates-app .count-dashboard {
grid-row: 2 !important;
}
}
/* v179 management workbench: system check, category templates and API settings.
Wider centered sheets, generous whitespace and a calm professional hierarchy.
No business controls or event bindings are changed. */
body.erp-app .view-system-check.active {
display: grid !important;
grid-template-columns: minmax(0, 1160px) !important;
align-items: start !important;
justify-items: stretch !important;
align-content: start !important;
justify-content: center !important;
padding: clamp(44px, 7vh, 78px) 20px 28px !important;
overflow: auto !important;
background: var(--wb-page) !important;
}
body.erp-app .view-system-check.active > .system-check-page,
body.erp-app .view-system-check.active > .system-check-page.active {
grid-template-columns: minmax(0, 1fr) !important;
grid-template-rows: auto auto !important;
align-content: start !important;
min-width: 0 !important;
}
body.erp-app .view-system-check.active .system-check-header {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
gap: 18px !important;
}
body.erp-app .view-system-check.active .system-check-header p {
min-width: 0 !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
white-space: nowrap !important;
}
body.erp-app .view-system-check.active .system-check-actions {
flex: 0 0 auto !important;
margin: 0 !important;
}
body.erp-app .view-system-check.active .system-check-list {
grid-template-columns: minmax(0, 1fr) !important;
grid-template-rows: repeat(5, minmax(58px, auto)) !important;
align-content: start !important;
max-height: none !important;
margin: 0 !important;
}
body.erp-app .view-system-check.active .system-check-row {
display: grid !important;
grid-template-columns: minmax(0, 1fr) auto !important;
align-items: center !important;
gap: 20px !important;
box-shadow: none !important;
}
body.erp-app .view-system-check.active .system-check-row:last-child {
border-bottom: 1px solid #e8ece9 !important;
}
body.erp-app .view-system-check.active .system-check-row-main {
display: grid !important;
grid-template-columns: minmax(0, 1fr) !important;
min-width: 0 !important;
align-content: center !important;
}
body.erp-app .view-system-check.active .system-check-row-main strong {
display: flex !important;
align-items: center !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
white-space: nowrap !important;
}
body.erp-app .view-system-check.active .system-check-row-main span,
body.erp-app .view-system-check.active .system-check-row-main small {
overflow: hidden !important;
text-overflow: ellipsis !important;
white-space: nowrap !important;
}
body.erp-app .view-system-check.active .system-check-row-main span {
color: var(--wb-muted) !important;
font-size: 13px !important;
line-height: 19px !important;
}
body.erp-app .view-system-check.active .system-check-row-main small {
color: var(--wb-subtle) !important;
font-size: 12px !important;
line-height: 18px !important;
}
body.erp-app .view-system-check.active .system-check-badge {
}
/* Category templates: a centered, quiet management dashboard. */
body.templates-app {
padding: clamp(38px, 7vh, 70px) clamp(20px, 4vw, 46px) 26px !important;
}
body.templates-app > main.template-page {
padding: 0 !important;
display: block !important;
}
body.templates-app .template-card {
display: grid !important;
grid-template-columns: minmax(0, 1fr) !important;
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
overflow: hidden !important;
}
body.templates-app .toolbar.count-toolbar {
grid-column: 1 !important;
grid-row: 1 !important;
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
border-bottom: 1px solid var(--wb-line) !important;
border-radius: 0 !important;
background: #ffffff !important;
}
body.templates-app .toolbar.count-toolbar .toolbar-actions {
margin-left: auto !important;
}
body.templates-app .upload-status,
body.templates-app .upload-failure {
grid-column: 1 !important;
grid-row: 2 !important;
width: auto !important;
min-width: 0 !important;
margin: 16px 24px 0 !important;
border: 1px solid var(--wb-line) !important;
border-radius: 10px !important;
background: #fbfcfb !important;
}
body.templates-app .count-dashboard {
grid-column: 1 !important;
grid-row: 3 !important;
width: 100% !important;
min-width: 0 !important;
max-height: none !important;
border: 0 !important;
overflow: hidden !important;
}
body.templates-app .metric-card {
grid-template-columns: minmax(0, 1fr) auto !important;
grid-template-rows: auto auto !important;
}
body.templates-app .metric-card .metric-eyebrow {
grid-column: 1 !important;
grid-row: 1 !important;
}
body.templates-app .metric-card .metric-value {
grid-column: 1 !important;
grid-row: 2 !important;
}
body.templates-app .metric-card .metric-value strong {
color: var(--wb-text) !important;
}
body.templates-app .metric-card .metric-value span {
color: var(--wb-muted) !important;
}
body.templates-app .metric-card .metric-foot {
grid-column: 2 !important;
grid-row: 1 / 3 !important;
display: flex !important;
align-items: center !important;
justify-content: flex-end !important;
}
body.templates-app .metric-card .status-pill {
min-height: 30px !important;
height: 30px !important;
padding: 0 12px !important;
font-size: 12px !important;
border-radius: 999px !important;
}
/* API settings: a spacious two-column configuration workbench. */
body.api-app {
padding: clamp(34px, 6vh, 58px) clamp(18px, 3vw, 36px) 22px !important;
}
body.api-app .api-page {
border: 1px solid var(--wb-line) !important;
background: #ffffff !important;
overflow: hidden !important;
}
body.api-app .api-sidebar {
justify-self: stretch !important;
}
body.api-app .sidebar-head {
}
body.api-app .connection-list {
align-content: start !important;
}
body.api-app .connection-card {
}
body.api-app .connection-card:hover,
body.api-app .connection-card.active {
border-color: rgba(14, 107, 88, .28) !important;
background: #f5faf8 !important;
}
body.api-app .connection-card strong {
}
body.api-app .connection-card small {
line-height: 17px !important;
}
body.api-app .api-workspace {
}
body.api-app .empty-editor {
}
body.api-app #emptyEditor .empty-panel {
gap: 18px !important;
}
body.api-app #emptyEditor .empty-panel::before {
content: "" !important;
display: block !important;
width: 54px !important;
height: 3px !important;
border-radius: 999px !important;
background: var(--wb-accent) !important;
opacity: .72 !important;
}
body.api-app #emptyEditor .empty-actions .action-button {
min-width: 142px !important;
}
body.api-app .editor-bar {
max-height: 74px !important;
background: #ffffff !important;
}
body.api-app .editor-title-group h2 {
}
body.api-app .editor-body {
background: #f6f8f7 !important;
}
body.api-app .panel-card,
body.api-app .result-card {
}
body.api-app .card-head {
margin-bottom: 16px !important;
}
body.api-app .card-head h3 {
font-weight: 650 !important;
}
body.api-app .field-grid {
gap: 14px !important;
}
body.api-app .field.full {
margin-top: 14px !important;
}
body.api-app .field span,
body.api-app .provider-select span {
margin-bottom: 7px !important;
color: var(--wb-muted) !important;
font-size: 12px !important;
font-weight: 600 !important;
}
body.api-app .field input,
body.api-app .field select,
body.api-app .field textarea,
body.api-app .provider-select select,
body.api-app input[type="text"],
body.api-app input[type="url"],
body.api-app input[type="password"] {
min-height: 38px !important;
height: 38px !important;
border: 1px solid #d7ddd9 !important;
border-radius: 8px !important;
background: #ffffff !important;
font-size: 13px !important;
}
body.api-app .field textarea {
height: auto !important;
min-height: 88px !important;
}
body.api-app .editor-actions {
max-height: 70px !important;
}
body.api-app .advanced-card {
padding: 0 !important;
}
body.api-app .advanced-card summary {
height: 50px !important;
padding: 0 22px !important;
font-size: 13px !important;
}
body.api-app .advanced-grid {
padding: 0 22px 22px !important;
}
body.api-app .result-card pre {
max-height: 220px !important;
padding: 14px !important;
border-radius: 8px !important;
}
@media (max-width: 1180px) {
body.templates-app .metric-card {
grid-template-columns: minmax(0, 1fr) !important;
grid-template-rows: auto auto auto !important;
gap: 12px !important;
}
body.templates-app .metric-card .metric-foot {
grid-column: 1 !important;
grid-row: 3 !important;
justify-content: flex-start !important;
}
}
@media (max-width: 980px) {
body.api-app .api-page {
grid-template-columns: minmax(0, 1fr) !important;
grid-template-rows: auto minmax(0, 1fr) !important;
}
body.api-app .api-sidebar {
max-height: 238px !important;
border-right: 0 !important;
border-bottom: 1px solid var(--wb-line) !important;
border-radius: 14px 14px 0 0 !important;
}
}
/* v180 module refinement: every management page is one centered module.
Keep wording lean, increase visual weight and avoid nested card layers. */
body.erp-app .view-system-check.active {
grid-template-columns: minmax(0, 960px) !important;
padding: clamp(52px, 8vh, 84px) 20px 30px !important;
}
body.erp-app .view-system-check.active > .system-check-page,
body.erp-app .view-system-check.active > .system-check-page.active {
display: flex !important;
flex-direction: column !important;
align-items: stretch !important;
gap: 0 !important;
padding: 0 !important;
}
body.erp-app .view-system-check.active .system-check-header {
}
body.erp-app .view-system-check.active .system-check-list {
display: flex !important;
flex-direction: column !important;
justify-content: center !important;
gap: 0 !important;
}
body.erp-app .view-system-check.active .system-check-row {
}
body.erp-app .view-system-check.active .system-check-row:last-child {
border-bottom: 0 !important;
}
body.erp-app .view-system-check.active .system-check-row-main {
}
body.erp-app .view-system-check.active .system-check-row-main strong {
gap: 10px !important;
}
body.erp-app .view-system-check.active .system-check-row-main span,
body.erp-app .view-system-check.active .system-check-row-main small {
display: none !important;
}
body.erp-app .view-system-check.active .system-check-badge {
}
/* Category template module: one surface, one big number, no nested card. */
body.templates-app > main.template-page {
width: min(920px, 100%) !important;
max-width: 920px !important;
height: min(560px, calc(100vh - 116px)) !important;
min-height: 520px !important;
border-radius: 16px !important;
box-shadow: 0 14px 34px rgba(20, 30, 25, .06) !important;
}
body.templates-app .template-card {
grid-template-rows: 78px auto minmax(0, 1fr) !important;
}
body.templates-app .toolbar.count-toolbar {
min-height: 78px !important;
height: 78px !important;
max-height: 78px !important;
padding: 0 24px !important;
}
body.templates-app .count-dashboard {
}
body.templates-app .metric-card {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
min-width: 0 !important;
gap: 12px !important;
}
body.templates-app .metric-card .metric-eyebrow {
color: var(--wb-muted) !important;
font-size: 13px !important;
font-weight: 600 !important;
}
body.templates-app .metric-card .metric-value {
display: flex !important;
align-items: baseline !important;
gap: 8px !important;
margin: 0 !important;
}
body.templates-app .metric-card .metric-value strong {
}
body.templates-app .metric-card .metric-value span {
}
body.templates-app .metric-card .metric-foot {
margin: 0 !important;
}
/* API module: same centered card language, sized for real configuration work. */
body.api-app .api-page {
width: min(1100px, 100%) !important;
max-width: 1100px !important;
height: min(780px, calc(100vh - 92px)) !important;
border-radius: 16px !important;
box-shadow: 0 14px 34px rgba(20, 30, 25, .06) !important;
}
body.api-app .api-sidebar {
}
body.api-app .panel-card,
body.api-app .result-card {
}
/* Keep the API module dimensions stable when the editor or empty state opens. */
body.api-app .api-page:has(.connection-form:not(.hidden)),
body.api-app .api-page:has(.connection-form:not(.hidden)).provider-deepseek,
body.api-app .api-page:has(.connection-form:not(.hidden)).provider-r2 {
width: min(1100px, 100%) !important;
max-width: 1100px !important;
height: min(780px, calc(100vh - 92px)) !important;
max-height: none !important;
grid-template-columns: 248px minmax(0, 1fr) !important;
border-radius: 16px !important;
box-shadow: 0 14px 34px rgba(20, 30, 25, .06) !important;
}
body.api-app .api-page:has(.connection-form:not(.hidden)) .api-sidebar {
width: 100% !important;
min-width: 0 !important;
justify-self: stretch !important;
border-radius: 16px 0 0 16px !important;
background: #ffffff !important;
}
body.api-app .api-page:has(.connection-form:not(.hidden)) .api-workspace {
min-width: 0 !important;
}
body.api-app .api-workspace .panel-card,
body.api-app .api-workspace .result-card {
width: min(840px, 100%) !important;
max-width: 840px !important;
padding: 20px 22px !important;
border-radius: 12px !important;
}
body.api-app .api-page:has(#emptyEditor:not(.hidden)) {
width: min(980px, 100%) !important;
max-width: 980px !important;
height: min(560px, calc(100vh - 110px)) !important;
max-height: 560px !important;
grid-template-columns: 220px minmax(0, 1fr) !important;
border-radius: 16px !important;
box-shadow: 0 14px 34px rgba(20, 30, 25, .06) !important;
}
body.api-app .api-page:has(#emptyEditor:not(.hidden)) .api-sidebar {
width: 100% !important;
min-width: 0 !important;
border-radius: 16px 0 0 16px !important;
background: #ffffff !important;
}
/* v181 management module refinement
System check, account management and API use the same centered one-module language. */
body.erp-app .view-system-check.active {
display: grid !important;
grid-template-columns: minmax(0, 1fr) !important;
align-items: start !important;
justify-items: center !important;
align-content: start !important;
padding: clamp(58px, 7.5vh, 78px) 20px 32px !important;
}
body.erp-app .view-system-check.active > .system-check-page,
body.erp-app .view-system-check.active > .system-check-page.active {
}
body.erp-app .view-system-check.active .system-check-header {
}
body.erp-app .view-system-check.active .system-check-list {
}
body.erp-app .view-system-check.active .system-check-row {
}
body.erp-app .view-accounts.active {
display: flex !important;
flex-direction: row !important;
align-items: flex-start !important;
justify-content: center !important;
padding: clamp(54px, 7vh, 76px) 22px 32px !important;
overflow: auto !important;
}
body.erp-app .view-accounts .accounts-page-minimal,
body.erp-app .view-accounts.active .accounts-page-minimal {
}
body.erp-app .accounts-shell-minimal {
}
body.erp-app .accounts-primary-action {
}
body.erp-app .accounts-primary-action .account-add-button {
}
body.erp-app .accounts-feedback {
}
body.erp-app .accounts-list-panel {
}
body.erp-app .account-table {
grid-template-rows: 44px minmax(0, 1fr) !important;
border-color: var(--wb-line) !important;
}
body.erp-app .account-table-header {
}
body.erp-app .account-list {
}
body.erp-app .account-list:has(.account-list-empty) {
display: grid !important;
place-items: center !important;
}
body.erp-app .account-list-empty {
}
body.api-app {
}
body.api-app .api-page {
width: min(900px, 100%) !important;
max-width: 900px !important;
min-height: 540px !important;
margin: 0 auto !important;
grid-template-columns: minmax(0, 1fr) !important;
grid-template-rows: auto minmax(0, 1fr) !important;
border-radius: 16px !important;
box-shadow: 0 14px 34px rgba(20, 30, 25, .06) !important;
}
body.api-app .api-page:has(.connection-form:not(.hidden)),
body.api-app .api-page:has(.connection-form:not(.hidden)).provider-deepseek,
body.api-app .api-page:has(.connection-form:not(.hidden)).provider-r2,
body.api-app .api-page:has(#emptyEditor:not(.hidden)) {
width: min(900px, 100%) !important;
max-width: 900px !important;
height: min(660px, calc(100vh - 116px)) !important;
min-height: 540px !important;
max-height: none !important;
margin: 0 auto !important;
grid-template-columns: minmax(0, 1fr) !important;
grid-template-rows: auto minmax(0, 1fr) !important;
border-radius: 16px !important;
box-shadow: 0 14px 34px rgba(20, 30, 25, .06) !important;
}
body.api-app .api-sidebar {
border-right: 0 !important;
}
body.api-app .sidebar-head {
}
body.api-app .connection-list {
overflow-x: auto !important;
overflow-y: hidden !important;
}
body.api-app .connection-card {
}
body.api-app .connection-empty {
width: auto !important;
min-height: 44px !important;
margin: 0 !important;
padding: 10px 18px !important;
}
body.api-app .api-workspace {
max-width: none !important;
}
body.api-app .connection-form,
body.api-app .connection-form.provider-deepseek {
}
body.api-app .connection-form.provider-deepseek .editor-title-group {
display: flex !important;
}
body.api-app .connection-form.provider-deepseek .editor-bar {
min-height: 70px !important;
height: 70px !important;
max-height: 70px !important;
padding: 0 24px !important;
border-bottom: 1px solid var(--wb-line) !important;
justify-content: space-between !important;
}
body.api-app .connection-form.provider-deepseek .editor-title-group h2 {
}
body.api-app .connection-form.provider-deepseek .editor-body {
}
body.api-app .connection-form.provider-deepseek .provider-card {
}
body.api-app .connection-form.provider-deepseek .provider-card .card-head {
display: none !important;
}
body.api-app .connection-form.provider-deepseek .field span {
}
body.api-app .connection-form.provider-deepseek .field input {
}
/* v182 centered management modules
Account, system check and API use one quiet centered module with fewer nested boxes. */
body.erp-app .view-accounts.active {
align-items: flex-start !important;
justify-content: center !important;
padding: clamp(36px, 6vh, 62px) 18px 28px !important;
overflow: auto !important;
}
body.erp-app .view-accounts .accounts-page-minimal,
body.erp-app .view-accounts.active .accounts-page-minimal {
}
body.erp-app .accounts-shell-minimal {
grid-template-rows: 64px auto minmax(0, 1fr) !important;
}
body.erp-app .accounts-primary-action {
}
body.erp-app .accounts-primary-action .account-add-button {
}
body.erp-app .accounts-feedback {
}
body.erp-app .accounts-list-panel {
}
body.erp-app .account-table {
}
body.erp-app .account-table-header {
}
body.erp-app .account-list {
}
body.erp-app .account-list:has(.account-list-empty) {
display: grid !important;
place-items: center !important;
min-height: 240px !important;
}
body.erp-app .account-table-row {
grid-template-areas: "name account status edit" !important;
border-top: 1px solid #edf0ef !important;
}
body.erp-app .account-table-row:last-child {
border-bottom: 0 !important;
}
body.erp-app .account-table-row:hover {
background: #fafcfb !important;
}
body.erp-app .account-table-cell {
}
body.erp-app .account-table-cell-name {
}
body.erp-app .account-table-cell-account {
}
body.erp-app .account-table-cell-status {
}
body.erp-app .account-table-cell-edit {
}
body.erp-app .account-table-cell-name > span {
display: block !important;
min-width: 0 !important;
max-width: 100% !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
white-space: nowrap !important;
}
body.erp-app .account-table-cell-account {
min-width: 0 !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
white-space: nowrap !important;
font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace !important;
line-height: 20px !important;
}
body.erp-app .account-more-button {
max-width: 28px !important;
max-height: 28px !important;
background: transparent !important;
color: #818986 !important;
}
body.erp-app .account-more-button:hover {
background: #f2f5f4 !important;
color: #39413e !important;
}
body.erp-app .account-list-empty {
grid-template-areas: "empty" !important;
}
body.erp-app .account-list-empty .account-table-cell {
grid-area: empty !important;
}
/* System check: smaller module, quieter list. */
body.erp-app .view-system-check.active {
align-content: start !important;
align-items: start !important;
justify-items: center !important;
padding: clamp(38px, 6vh, 60px) 20px 28px !important;
overflow: auto !important;
}
body.erp-app .view-system-check.active > .system-check-page,
body.erp-app .view-system-check.active > .system-check-page.active {
width: min(720px, 100%) !important;
max-width: 720px !important;
height: auto !important;
min-height: 0 !important;
max-height: none !important;
margin: 0 !important;
justify-self: center !important;
border: 1px solid rgba(29, 29, 31, .08) !important;
border-radius: 14px !important;
background: #ffffff !important;
box-shadow: 0 14px 34px rgba(20, 30, 25, .06) !important;
overflow: hidden !important;
}
body.erp-app .view-system-check.active .system-check-header {
min-height: 64px !important;
height: 64px !important;
max-height: 64px !important;
padding: 0 22px !important;
border: 0 !important;
border-bottom: 1px solid #edf0ef !important;
border-radius: 0 !important;
background: #ffffff !important;
box-shadow: none !important;
}
body.erp-app .view-system-check.active .system-check-header p {
color: #3f4744 !important;
font-size: 13px !important;
font-weight: 600 !important;
line-height: 20px !important;
}
body.erp-app .view-system-check.active .system-check-list {
box-shadow: none !important;
overflow: hidden !important;
}
body.erp-app .view-system-check.active .system-check-row {
border-radius: 0 !important;
}
body.erp-app .view-system-check.active .system-check-row:last-child {
border-bottom: 0 !important;
}
body.erp-app .view-system-check.active .system-check-row-main {
gap: 0 !important;
}
body.erp-app .view-system-check.active .system-check-row-main strong {
color: #252a28 !important;
font-size: 13px !important;
font-weight: 600 !important;
line-height: 20px !important;
}
body.erp-app .view-system-check.active .system-check-badge {
min-width: 62px !important;
height: 26px !important;
min-height: 26px !important;
padding: 0 11px !important;
font-size: 12px !important;
border-radius: 999px !important;
}
/* API settings: compact top summary, centered DeepSeek editor. */
body.api-app {
padding: clamp(34px, 5.5vh, 54px) 18px 22px !important;
}
body.api-app .api-page,
body.api-app .api-page:has(.connection-form:not(.hidden)),
body.api-app .api-page:has(.connection-form:not(.hidden)).provider-deepseek,
body.api-app .api-page:has(.connection-form:not(.hidden)).provider-r2,
body.api-app .api-page:has(#emptyEditor:not(.hidden)) {
width: min(860px, 100%) !important;
max-width: 860px !important;
height: min(540px, calc(100vh - 116px)) !important;
min-height: 500px !important;
max-height: none !important;
margin: 0 auto !important;
grid-template-columns: minmax(0, 1fr) !important;
grid-template-rows: 52px minmax(0, 1fr) !important;
border: 1px solid rgba(29, 29, 31, .08) !important;
border-radius: 14px !important;
background: #ffffff !important;
box-shadow: 0 14px 34px rgba(20, 30, 25, .06) !important;
overflow: hidden !important;
}
body.api-app .api-sidebar {
}
body.api-app .sidebar-head {
border-right: 1px solid #edf0ef !important;
}
body.api-app .sidebar-tools {
}
body.api-app .sidebar-tools .icon-button {
}
body.api-app .sidebar-tools .icon-button:hover:not(:disabled) {
border-color: #c8d0cc !important;
background: #f5f7f6 !important;
color: #2f3834 !important;
}
body.api-app .connection-list {
}
body.api-app .connection-card {
}
body.api-app .connection-card:hover,
body.api-app .connection-card.active {
border: 0 !important;
background: #f3f6f5 !important;
}
body.api-app .connection-card .provider-dot,
body.api-app .connection-card > small:not(.connection-state):not(.last-saved) {
display: none !important;
}
body.api-app .connection-card .connection-meta {
}
body.api-app .connection-card strong {
}
body.api-app .connection-card .connection-state {
}
body.api-app .connection-empty {
}
body.api-app .api-workspace {
}
body.api-app .empty-editor {
}
body.api-app .empty-panel {
}
body.api-app .connection-form,
body.api-app .connection-form.provider-deepseek {
}
body.api-app .connection-form.provider-deepseek {
}
body.api-app .connection-form.provider-deepseek .editor-bar {
}
body.api-app .connection-form.provider-deepseek .editor-body {
}
body.api-app .connection-form.provider-deepseek .provider-card {
}
body.api-app .connection-form.provider-deepseek .provider-card .card-head,
body.api-app .connection-form.provider-deepseek .core-card,
body.api-app .connection-form.provider-deepseek .auth-card,
body.api-app .connection-form.provider-deepseek .advanced-card {
}
body.api-app .connection-form.provider-deepseek .field-grid,
body.api-app .connection-form.provider-deepseek .field-grid.two {
}
body.api-app .connection-form.provider-deepseek .field {
}
body.api-app .connection-form.provider-deepseek .field span {
}
body.api-app .connection-form.provider-deepseek .field input {
}
body.api-app .connection-form.provider-deepseek .field input:focus {
border-color: rgba(47, 107, 87, .42) !important;
box-shadow: 0 0 0 3px rgba(47, 107, 87, .08) !important;
}
body.api-app .connection-form.provider-deepseek .editor-actions {
}
body.api-app .connection-form.provider-deepseek .result-card {
}
body.api-app .connection-form:not(.provider-deepseek) .editor-body {
overflow: auto !important;
background: #ffffff !important;
}
body.api-app .connection-form:not(.provider-deepseek) .editor-bar {
min-height: 58px !important;
height: 58px !important;
max-height: 58px !important;
}
/* v183 account/API quiet refinements: one centered sheet, readable account
columns, fewer nested borders, and a narrower API workspace. */
body.erp-app .view-accounts.active {
align-items: flex-start !important;
justify-content: center !important;
padding: clamp(34px, 6vh, 62px) 18px 26px !important;
}
body.erp-app .view-accounts .accounts-page-minimal,
body.erp-app .view-accounts.active .accounts-page-minimal {
width: min(720px, 100%) !important;
max-width: 720px !important;
height: auto !important;
min-height: 0 !important;
max-height: none !important;
margin: 0 !important;
padding: 0 !important;
border: 1px solid rgba(29, 29, 31, .08) !important;
border-radius: 14px !important;
background: #ffffff !important;
box-shadow: 0 14px 34px rgba(20, 30, 25, .06) !important;
overflow: hidden !important;
}
body.erp-app .accounts-shell-minimal {
width: 100% !important;
height: auto !important;
min-height: 0 !important;
max-height: none !important;
margin: 0 !important;
padding: 0 !important;
display: flex !important;
flex-direction: column !important;
align-items: stretch !important;
justify-content: flex-start !important;
border: 0 !important;
border-radius: 0 !important;
background: #ffffff !important;
box-shadow: none !important;
overflow: hidden !important;
}
body.erp-app .accounts-primary-action {
flex: 0 0 58px !important;
grid-row: auto !important;
min-height: 58px !important;
height: 58px !important;
max-height: 58px !important;
margin: 0 !important;
padding: 0 !important;
display: flex !important;
align-items: center !important;
border: 0 !important;
border-bottom: 1px solid #edf0ef !important;
background: transparent !important;
}
body.erp-app .accounts-primary-action .account-add-button {
width: 104px !important;
min-width: 104px !important;
max-width: 104px !important;
height: 32px !important;
min-height: 32px !important;
max-height: 32px !important;
padding: 0 14px !important;
border-radius: 8px !important;
font-size: 12px !important;
}
body.erp-app .accounts-feedback {
grid-row: auto !important;
flex: 0 0 auto !important;
align-self: center !important;
justify-self: center !important;
min-height: 0 !important;
height: auto !important;
margin: 0 !important;
padding: 0 !important;
text-align: center !important;
}
body.erp-app .accounts-feedback:not(:empty) {
padding: 8px 24px 0 !important;
}
body.erp-app .accounts-list-panel {
flex: 0 0 auto !important;
grid-row: auto !important;
height: auto !important;
min-height: 0 !important;
max-height: none !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
border-radius: 0 !important;
background: transparent !important;
box-shadow: none !important;
overflow: visible !important;
}
body.erp-app .account-table {
width: 100% !important;
height: auto !important;
min-height: 0 !important;
max-height: none !important;
display: block !important;
background: transparent !important;
box-shadow: none !important;
overflow: visible !important;
}
body.erp-app .account-table-header {
display: grid !important;
grid-template-columns: minmax(0, 1.2fr) minmax(150px, 1fr) 86px 44px !important;
align-items: center !important;
gap: 0 !important;
max-height: 38px !important;
margin: 0 !important;
padding: 0 24px !important;
border: 0 !important;
line-height: 20px !important;
}
body.erp-app .account-table-header > span {
height: 100% !important;
}
body.erp-app .account-table-header > span:nth-child(-n + 2) {
justify-content: flex-start !important;
}
body.erp-app .account-table-header > span:nth-child(n + 3) {
justify-content: center !important;
}
body.erp-app .account-list {
display: block !important;
min-height: 0 !important;
max-height: none !important;
overflow: visible !important;
padding: 0 !important;
}
body.erp-app .account-list:has(.account-list-empty) {
display: grid !important;
place-items: center !important;
min-height: 170px !important;
}
body.erp-app .account-table-row {
display: grid !important;
grid-template-columns: minmax(0, 1.2fr) minmax(150px, 1fr) 86px 44px !important;
align-items: center !important;
align-content: center !important;
column-gap: 10px !important;
min-height: 48px !important;
height: 48px !important;
max-height: 48px !important;
margin: 0 !important;
padding: 0 24px !important;
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
}
body.erp-app .account-table-row:last-child {
border-bottom: 0 !important;
}
body.erp-app .account-table-row:hover {
background: #fafcfb !important;
}
body.erp-app .account-table-cell {
align-content: center !important;
min-height: 0 !important;
height: auto !important;
max-height: none !important;
text-align: left !important;
}
body.erp-app .account-table-cell-name {
grid-area: auto !important;
}
body.erp-app .account-table-cell-account {
grid-area: auto !important;
}
body.erp-app .account-table-cell-status {
grid-area: auto !important;
justify-content: center !important;
}
body.erp-app .account-table-cell-edit {
grid-area: auto !important;
justify-content: center !important;
overflow: visible !important;
}
body.erp-app .account-list-empty {
height: auto !important;
max-height: none !important;
border: 0 !important;
background: transparent !important;
}
body.erp-app .account-list-empty .account-table-cell {
justify-content: center !important;
}
body.api-app .api-page,
body.api-app .api-page:has(.connection-form:not(.hidden)),
body.api-app .api-page:has(.connection-form:not(.hidden)).provider-deepseek,
body.api-app .api-page:has(.connection-form:not(.hidden)).provider-r2,
body.api-app .api-page:has(#emptyEditor:not(.hidden)) {
width: min(760px, 100%) !important;
max-width: 760px !important;
height: min(500px, calc(100vh - 116px)) !important;
min-height: 470px !important;
max-height: none !important;
}
/* v184 system check: smaller header and single-line list, matching account. */
body.erp-app .view-system-check.active .system-check-header {
min-height: 58px !important;
height: 58px !important;
max-height: 58px !important;
padding: 0 22px !important;
}
body.erp-app .view-system-check.active .system-check-list {
min-height: 0 !important;
padding: 0 22px 8px !important;
border: 0 !important;
border-radius: 0 !important;
background: #ffffff !important;
}
body.erp-app .view-system-check.active .system-check-row {
min-height: 44px !important;
height: 44px !important;
max-height: 44px !important;
padding: 0 10px !important;
border: 0 !important;
border-top: 0 !important;
border-bottom: 1px solid #eef1ef !important;
background: transparent !important;
}
body.erp-app .view-system-check.active .system-check-row:last-child {
border-bottom: 0 !important;
}
/* v185 API micro card: one compact centered card, no saved timestamp. */
body.api-app {
padding: clamp(38px, 6vh, 62px) 18px 24px !important;
}
body.api-app .api-page,
body.api-app .api-page:has(.connection-form:not(.hidden)),
body.api-app .api-page:has(.connection-form:not(.hidden)).provider-deepseek,
body.api-app .api-page:has(.connection-form:not(.hidden)).provider-r2,
body.api-app .api-page:has(#emptyEditor:not(.hidden)) {
width: min(600px, 100%) !important;
max-width: 600px !important;
height: min(360px, calc(100vh - 116px)) !important;
min-height: 340px !important;
max-height: none !important;
margin: 0 auto !important;
grid-template-columns: minmax(0, 1fr) !important;
grid-template-rows: 44px minmax(0, 1fr) !important;
border: 1px solid rgba(29, 29, 31, .08) !important;
border-radius: 14px !important;
background: #ffffff !important;
box-shadow: 0 14px 34px rgba(20, 30, 25, .06) !important;
overflow: hidden !important;
}
body.api-app .api-sidebar {
grid-row: 1 !important;
grid-column: 1 !important;
width: 100% !important;
min-width: 0 !important;
align-items: center !important;
justify-content: center !important;
gap: 8px !important;
padding: 0 12px !important;
border-radius: 14px 14px 0 0 !important;
box-shadow: none !important;
}
body.api-app .sidebar-head {
flex: 0 0 auto !important;
max-width: none !important;
}
body.api-app .sidebar-tools {
}
body.api-app .sidebar-tools .icon-button {
width: 30px !important;
height: 30px !important;
min-width: 30px !important;
max-width: 30px !important;
border: 1px solid #e3e7e5 !important;
border-radius: 8px !important;
background: #ffffff !important;
color: #5f6763 !important;
box-shadow: none !important;
}
body.api-app .connection-list {
flex: 0 1 auto !important;
max-width: none !important;
}
body.api-app .connection-card {
}
body.api-app .connection-card:hover,
body.api-app .connection-card.active {
border: 0 !important;
background: #f3f6f5 !important;
}
body.api-app .connection-card .provider-dot,
body.api-app .connection-card > small,
body.api-app .connection-card .last-saved {
}
body.api-app .connection-card .connection-meta {
}
body.api-app .connection-card strong {
}
body.api-app .connection-card .connection-state {
}
body.api-app .connection-empty {
}
body.api-app .api-workspace {
box-shadow: none !important;
}
body.api-app .empty-editor {
padding: 26px 24px !important;
background: #ffffff !important;
}
body.api-app .empty-panel {
width: min(420px, 100%) !important;
padding: 20px !important;
border-radius: 12px !important;
}
body.api-app .connection-form,
body.api-app .connection-form.provider-deepseek {
height: 100% !important;
}
body.api-app .connection-form.provider-deepseek {
}
body.api-app .connection-form.provider-deepseek .editor-bar {
display: none !important;
}
body.api-app .connection-form.provider-deepseek .editor-body {
}
body.api-app .connection-form.provider-deepseek .provider-card {
}
body.api-app .connection-form.provider-deepseek .provider-card .card-head,
body.api-app .connection-form.provider-deepseek .core-card,
body.api-app .connection-form.provider-deepseek .auth-card,
body.api-app .connection-form.provider-deepseek .advanced-card {
display: none !important;
}
body.api-app .connection-form.provider-deepseek .field-grid,
body.api-app .connection-form.provider-deepseek .field-grid.two {
}
body.api-app .connection-form.provider-deepseek .field {
}
body.api-app .connection-form.provider-deepseek .field span {
}
body.api-app .connection-form.provider-deepseek .field input {
}
body.api-app .connection-form.provider-deepseek .field input:focus {
border-color: rgba(47, 107, 87, .42) !important;
box-shadow: 0 0 0 3px rgba(47, 107, 87, .08) !important;
}
body.api-app .connection-form.provider-deepseek .editor-actions {
}
body.api-app .connection-form.provider-deepseek .result-card {
width: min(420px, 100%) !important;
max-width: 420px !important;
margin: 16px auto 0 !important;
}
body.api-app .connection-form:not(.provider-deepseek) .editor-body {
overflow: auto !important;
background: #ffffff !important;
}
body.api-app .connection-form:not(.provider-deepseek) .editor-bar {
min-height: 52px !important;
height: 52px !important;
max-height: 52px !important;
}
/* v186 account modal buttons stay inside the footer, and the API page uses
a compact toolbar/provider/content stack instead of mixing controls. */
body.erp-app .account-editor-modal {
display: flex !important;
flex-direction: column !important;
width: min(430px, calc(100vw - 28px)) !important;
max-width: none !important;
max-height: min(620px, calc(100vh - 24px)) !important;
overflow: hidden !important;
}
body.erp-app .account-editor-header,
body.erp-app .account-editor-body,
body.erp-app .account-editor-actions {
flex: 0 0 auto !important;
}
body.erp-app .account-editor-body {
flex: 0 1 auto !important;
min-height: 0 !important;
overflow: auto !important;
}
body.erp-app .account-editor-actions {
flex: 0 0 54px !important;
display: flex !important;
align-items: center !important;
justify-content: flex-end !important;
gap: 10px !important;
padding: 0 18px !important;
border: 0 !important;
border-top: 1px solid #edf0ef !important;
background: #ffffff !important;
overflow: hidden !important;
}
body.erp-app #accountEditorCancel,
body.erp-app #accountEditorSubmit {
width: auto !important;
min-width: 88px !important;
height: 34px !important;
min-height: 34px !important;
max-height: 34px !important;
flex: 0 0 auto !important;
padding: 0 14px !important;
white-space: nowrap !important;
}
body.api-app {
padding: clamp(34px, 5.5vh, 56px) 16px 18px !important;
}
body.api-app .api-page,
body.api-app .api-page:has(.connection-form:not(.hidden)),
body.api-app .api-page:has(.connection-form:not(.hidden)).provider-deepseek,
body.api-app .api-page:has(.connection-form:not(.hidden)).provider-r2,
body.api-app .api-page:has(#emptyEditor:not(.hidden)) {
width: min(540px, 100%) !important;
max-width: 540px !important;
height: min(322px, calc(100vh - 88px)) !important;
min-height: 300px !important;
max-height: none !important;
margin: 0 auto !important;
grid-template-columns: minmax(0, 1fr) !important;
grid-template-rows: 102px minmax(0, 1fr) !important;
border: 1px solid rgba(29, 29, 31, .08) !important;
border-radius: 12px !important;
background: #ffffff !important;
box-shadow: 0 14px 34px rgba(20, 30, 25, .06) !important;
overflow: hidden !important;
}
body.api-app .api-sidebar,
body.api-app .api-page:has(.connection-form:not(.hidden)) .api-sidebar,
body.api-app .api-page:has(#emptyEditor:not(.hidden)) .api-sidebar {
grid-row: 1 !important;
grid-column: 1 !important;
width: 100% !important;
min-width: 0 !important;
min-height: 102px !important;
height: 102px !important;
max-height: 102px !important;
display: grid !important;
grid-template-columns: minmax(0, 1fr) !important;
grid-template-rows: 44px 58px !important;
padding: 0 !important;
border: 0 !important;
border-bottom: 1px solid #edf0ef !important;
border-radius: 12px 12px 0 0 !important;
background: #ffffff !important;
box-shadow: none !important;
overflow: hidden !important;
}
body.api-app .sidebar-head {
grid-row: 1 !important;
grid-column: 1 !important;
width: 100% !important;
min-width: 0 !important;
max-height: 44px !important;
margin: 0 !important;
display: flex !important;
align-items: center !important;
justify-content: flex-start !important;
}
body.api-app .sidebar-tools {
display: inline-flex !important;
align-items: center !important;
justify-content: flex-end !important;
gap: 8px !important;
min-width: 0 !important;
margin: 0 0 0 auto !important;
padding: 0 !important;
}
body.api-app .sidebar-tools .icon-button,
body.api-app .sidebar-tools .icon-button.has-label {
width: auto !important;
min-width: 68px !important;
max-width: none !important;
height: 30px !important;
min-height: 30px !important;
max-height: 30px !important;
margin: 0 !important;
padding: 0 10px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
gap: 5px !important;
border: 1px solid #e3e7e5 !important;
border-radius: 7px !important;
background: #ffffff !important;
color: #5f6763 !important;
box-shadow: none !important;
overflow: hidden !important;
}
body.api-app .sidebar-tools .icon-button span {
display: inline !important;
width: auto !important;
min-width: 0 !important;
max-width: none !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
white-space: nowrap !important;
font-size: 12px !important;
font-weight: 600 !important;
}
body.api-app .connection-list {
grid-row: 2 !important;
grid-column: 1 !important;
display: flex !important;
flex-direction: row !important;
align-items: center !important;
justify-content: flex-start !important;
gap: 8px !important;
width: 100% !important;
min-width: 0 !important;
height: 58px !important;
padding: 0 14px !important;
}
body.api-app .connection-card {
flex: 0 0 auto !important;
width: auto !important;
min-width: 0 !important;
max-width: 100% !important;
max-height: 32px !important;
margin: 0 !important;
display: inline-flex !important;
align-items: center !important;
justify-content: flex-start !important;
gap: 6px !important;
border: 1px solid #edf0ef !important;
border-radius: 7px !important;
background: #f6f8f7 !important;
box-shadow: none !important;
}
body.api-app .connection-card .connection-meta {
min-width: 0 !important;
display: inline-flex !important;
align-items: baseline !important;
gap: 6px !important;
}
body.api-app .connection-card strong {
overflow: hidden !important;
text-overflow: ellipsis !important;
white-space: nowrap !important;
color: #252a28 !important;
}
body.api-app .connection-card .connection-state {
color: #79827e !important;
font-size: 12px !important;
font-weight: 600 !important;
line-height: 20px !important;
}
body.api-app .connection-card .provider-dot,
body.api-app .connection-card > small,
body.api-app .connection-card .last-saved {
display: none !important;
}
body.api-app .connection-empty {
display: flex !important;
align-items: center !important;
color: #9aa29e !important;
font-size: 12px !important;
}
body.api-app .api-workspace {
grid-row: 2 !important;
grid-column: 1 !important;
width: 100% !important;
min-width: 0 !important;
border: 0 !important;
border-radius: 0 0 12px 12px !important;
}
body.api-app .connection-form.provider-deepseek {
display: grid !important;
grid-template-rows: minmax(0, 1fr) 48px !important;
overflow: hidden !important;
}
body.api-app .connection-form.provider-deepseek .editor-body {
grid-row: 1 !important;
min-height: 0 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
padding: 12px 22px !important;
background: #ffffff !important;
overflow: auto !important;
}
body.api-app .connection-form.provider-deepseek .provider-card {
width: min(340px, 100%) !important;
max-width: 340px !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
border-radius: 0 !important;
background: transparent !important;
box-shadow: none !important;
}
body.api-app .connection-form.provider-deepseek .field-grid,
body.api-app .connection-form.provider-deepseek .field-grid.two {
grid-template-columns: minmax(0, 1fr) !important;
gap: 0 !important;
margin: 0 !important;
}
body.api-app .connection-form.provider-deepseek .field {
width: 100% !important;
min-width: 0 !important;
margin: 0 !important;
padding: 0 !important;
}
body.api-app .connection-form.provider-deepseek .field span {
margin: 0 0 5px !important;
color: #66706c !important;
font-size: 12px !important;
font-weight: 600 !important;
}
body.api-app .connection-form.provider-deepseek .field input {
width: 100% !important;
min-height: 38px !important;
height: 38px !important;
max-height: 38px !important;
padding: 0 12px !important;
border: 1px solid #dde2df !important;
border-radius: 7px !important;
background: #ffffff !important;
box-shadow: none !important;
color: #252a28 !important;
font-size: 13px !important;
}
body.api-app .connection-form.provider-deepseek .editor-actions {
grid-row: 2 !important;
height: 48px !important;
min-height: 48px !important;
max-height: 48px !important;
padding: 0 14px !important;
border: 0 !important;
border-top: 1px solid #edf0ef !important;
background: #ffffff !important;
}
body.api-app .api-sidebar,
body.api-app .api-page:has(.connection-form:not(.hidden)) .api-sidebar,
body.api-app .api-page:has(#emptyEditor:not(.hidden)) .api-sidebar {
align-items: stretch !important;
justify-content: stretch !important;
}
body.api-app .sidebar-head,
body.api-app .api-page:has(.connection-form:not(.hidden)) .sidebar-head,
body.api-app .api-page:has(#emptyEditor:not(.hidden)) .sidebar-head {
align-self: stretch !important;
justify-self: stretch !important;
justify-content: flex-start !important;
margin: 0 !important;
padding: 0 14px !important;
}
body.api-app .sidebar-tools,
body.api-app .sidebar-head > div.sidebar-tools,
body.api-app .api-page:has(.connection-form:not(.hidden)) .sidebar-tools,
body.api-app .api-page:has(#emptyEditor:not(.hidden)) .sidebar-tools {
align-self: center !important;
justify-self: end !important;
margin: 0 !important;
padding: 0 !important;
}
body.api-app .sidebar-tools .icon-button.has-label,
body.api-app .sidebar-head .sidebar-tools .icon-button.has-label,
body.api-app .api-page:has(.connection-form:not(.hidden)) .sidebar-head .sidebar-tools .icon-button.has-label {
width: auto !important;
min-width: 68px !important;
max-width: none !important;
height: 30px !important;
min-height: 30px !important;
max-height: 30px !important;
padding: 0 10px !important;
line-height: 1 !important;
}
body.api-app .connection-list,
body.api-app .api-page:has(.connection-form:not(.hidden)) .connection-list,
body.api-app .api-page:has(#emptyEditor:not(.hidden)) .connection-list {
align-self: stretch !important;
justify-self: stretch !important;
display: flex !important;
flex-direction: row !important;
align-items: center !important;
justify-content: flex-start !important;
gap: 8px !important;
width: 100% !important;
min-width: 0 !important;
height: 58px !important;
max-height: 58px !important;
padding: 0 14px !important;
overflow: auto !important;
}
body.api-app .quick-actions {
z-index: 30 !important;
}
body.api-app .api-sidebar:has(.quick-actions:not(.hidden)),
body.api-app .api-page:has(.connection-form:not(.hidden)) .api-sidebar:has(.quick-actions:not(.hidden)),
body.api-app .api-page:has(#emptyEditor:not(.hidden)) .api-sidebar:has(.quick-actions:not(.hidden)) {
overflow: visible !important;
z-index: 30 !important;
}
/* 2026-09-08: “暂无数据”统一落在各工作页可用区域的正中位置。 */
body.copywriting-app .workspacePanel.active:has(.previewTableWrap .centeredEmptyState) {
display: flex !important;
flex-direction: column !important;
align-items: stretch !important;
justify-content: stretch !important;
width: 100% !important;
height: 100% !important;
min-height: 0 !important;
padding: 0 !important;
}
body.copywriting-app .previewTableWrap:has(.centeredEmptyState) {
flex: 1 1 100% !important;
align-self: stretch !important;
justify-self: stretch !important;
width: 100% !important;
max-width: 100% !important;
height: 100% !important;
min-height: 0 !important;
max-height: none !important;
margin: 0 !important;
}
body.copywriting-app .previewTableWrap:has(.centeredEmptyState) #dataTable,
body.copywriting-app .previewTableWrap:has(.centeredEmptyState) #dataTable tbody.centeredEmptyState,
body.copywriting-app .previewTableWrap:has(.centeredEmptyState) #dataTable tbody.centeredEmptyState tr {
width: 100% !important;
min-width: 100% !important;
height: 100% !important;
min-height: 0 !important;
max-height: none !important;
}
body.copywriting-app .previewTableWrap:has(.centeredEmptyState) #dataTable tbody.centeredEmptyState tr td.emptyCell {
display: grid !important;
place-items: center !important;
width: 100% !important;
height: 100% !important;
min-height: 0 !important;
max-height: none !important;
padding: 0 !important;
border: 0 !important;
background: transparent !important;
}
body.copywriting-app .previewTableWrap:has(.centeredEmptyState) .emptyCell::before,
body.erp-app .export-listing-shell:has(#exportListingTable .centered-empty-state) .export-listing-empty::before {
content: none !important;
display: none !important;
}
/* 2026-09-08: copywriting headers and cell text stay centered. */
body.copywriting-app #dataTable th,
body.copywriting-app #dataTable td,
body.copywriting-app #embeddedRemovalTable th,
body.copywriting-app #embeddedRemovalTable td {
text-align: center !important;
}
body.copywriting-app .copyableCell,
body.copywriting-app td.col-name .copyableCell,
body.copywriting-app td.col-long .copyableCell {
justify-content: center !important;
}
body.copywriting-app .cellClamp,
body.copywriting-app td.col-name .cellClamp,
body.copywriting-app td.col-long .cellClamp {
justify-content: center !important;
text-align: center !important;
}
/* 2026-09-08: copywriting rows stay compact and aligned instead of growing into a vertical wall. */
body.copywriting-app #dataTable tbody:not(.centeredEmptyState) td,
body.copywriting-app #outputTable td,
body.copywriting-app #embeddedRemovalTable tbody:not(.embeddedRemovalEmptyState) td {
height: 64px !important;
min-height: 64px !important;
max-height: 64px !important;
padding: 5px 8px !important;
overflow: hidden !important;
line-height: 15px !important;
vertical-align: middle !important;
}
body.copywriting-app #dataTable tbody:not(.centeredEmptyState) tr,
body.copywriting-app #outputTable tbody tr,
body.copywriting-app #embeddedRemovalTable tbody:not(.embeddedRemovalEmptyState) tr {
height: 64px !important;
min-height: 64px !important;
max-height: 64px !important;
}
body.copywriting-app #dataTable .cellClamp,
body.copywriting-app #outputTable .cellClamp,
body.copywriting-app #embeddedRemovalTable .cellClamp {
display: -webkit-box !important;
max-height: 30px !important;
overflow: hidden !important;
-webkit-box-orient: vertical !important;
-webkit-line-clamp: 2 !important;
line-clamp: 2 !important;
white-space: normal !important;
word-break: break-word !important;
text-overflow: ellipsis !important;
}
body.copywriting-app #dataTable td.col-sku .cellClamp,
body.copywriting-app #outputTable td.col-sku .cellClamp,
body.copywriting-app #embeddedRemovalTable td.col-sku .cellClamp {
}
body.copywriting-app .embeddedRemovalTableWrap {
overflow-y: auto !important;
overflow-x: auto !important;
}
/* 2026-09-08: force the copywriting text back into the content column. */
body.copywriting-app #dataTable .copyableCell,
body.copywriting-app #outputTable .copyableCell,
body.copywriting-app #embeddedRemovalTable .copyableCell {
display: grid !important;
grid-template-columns: minmax(0, 1fr) 24px !important;
grid-template-rows: minmax(0, 1fr) !important;
align-items: center !important;
justify-items: center !important;
gap: 4px !important;
width: 100% !important;
height: 100% !important;
min-height: 0 !important;
padding: 0 !important;
}
body.copywriting-app #dataTable .copyableCell::before,
body.copywriting-app #outputTable .copyableCell::before,
body.copywriting-app #embeddedRemovalTable .copyableCell::before {
display: none !important;
content: none !important;
}
body.copywriting-app #dataTable .copyableCell > .cellClamp,
body.copywriting-app #outputTable .copyableCell > .cellClamp,
body.copywriting-app #embeddedRemovalTable .copyableCell > .cellClamp {
grid-column: 1 !important;
grid-row: 1 !important;
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
height: 100% !important;
max-height: 30px !important;
margin: 0 !important;
text-align: center !important;
text-align-last: center !important;
-webkit-line-clamp: 2 !important;
line-clamp: 2 !important;
}
body.copywriting-app #dataTable td.col-sku .cellClamp,
body.copywriting-app #outputTable td.col-sku .cellClamp,
body.copywriting-app #embeddedRemovalTable td.col-sku .cellClamp {
display: block !important;
width: 100% !important;
max-width: 100% !important;
height: auto !important;
max-height: 18px !important;
overflow: hidden !important;
white-space: nowrap !important;
text-overflow: ellipsis !important;
text-align: center !important;
text-align-last: center !important;
-webkit-line-clamp: unset !important;
line-clamp: unset !important;
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace !important;
font-size: 12px !important;
}
body.copywriting-app #dataTable .copyableCell .cellCopyButton,
body.copywriting-app #outputTable .copyableCell .cellCopyButton,
body.copywriting-app #embeddedRemovalTable .copyableCell .cellCopyButton {
grid-column: 2 !important;
grid-row: 1 !important;
position: static !important;
width: 22px !important;
height: 22px !important;
min-width: 22px !important;
max-width: 22px !important;
transform: none !important;
}
body.copywriting-app #dataTable th:nth-child(2),
body.copywriting-app #dataTable td:nth-child(2),
body.copywriting-app #outputTable th:first-child,
body.copywriting-app #outputTable td:first-child,
body.copywriting-app #embeddedRemovalTable th:nth-child(2),
body.copywriting-app #embeddedRemovalTable td:nth-child(2) {
text-align: center !important;
text-align-last: center !important;
}
/* 2026-09-08: keep the export listing header/table/pagination in explicit rows.
Older shell CSS forced the table into grid row 3, so non-empty export pages
placed the table at the bottom of the work area. */
body.erp-app .export-listing-shell:not(:has(#exportListingTable .centered-empty-state)) {
display: grid !important;
grid-template-columns: minmax(0, 1fr) !important;
grid-template-rows: 60px minmax(0, 1fr) auto !important;
align-content: stretch !important;
}
/* 2026-09-09: export listing final compact layout.
Data rows match the collector/copywriting row height, copy buttons sit at
the right edge on hover, and text-heavy columns get predictable widths. */
body.erp-app .export-listing-header {
overflow: visible !important;
}
body.erp-app .export-listing-header .export-clear-toolbar,
body.erp-app .export-listing-header .export-mapping-center,
body.erp-app .export-listing-header .export-listing-actions {
flex: 0 1 auto !important;
min-width: 0 !important;
overflow: visible !important;
}
body.erp-app .export-mapping-center {
justify-content: center !important;
}
body.erp-app .export-listing-header #startExportMapping,
body.erp-app .export-listing-header #exportMissingTemplatePlan {
width: auto !important;
min-width: max-content !important;
max-width: none !important;
flex: 0 0 auto !important;
overflow: visible !important;
white-space: nowrap !important;
text-overflow: clip !important;
}
body.erp-app #exportListingTable:not(:has(.centered-empty-state)) {
width: max(100%, 2360px) !important;
min-width: max(100%, 2360px) !important;
table-layout: fixed !important;
}
body.erp-app #exportListingTable:not(:has(.centered-empty-state)) > colgroup > col:nth-child(1),
body.erp-app #exportListingTable:not(:has(.centered-empty-state)) > thead > tr > th:nth-child(1),
body.erp-app #exportListingTable:not(:has(.centered-empty-state)) > tbody:not(.centered-empty-state) > tr > td:nth-child(1) {
width: 42px !important;
min-width: 42px !important;
max-width: 42px !important;
}
body.erp-app #exportListingTable:not(:has(.centered-empty-state)) > colgroup > col:nth-child(2),
body.erp-app #exportListingTable:not(:has(.centered-empty-state)) > thead > tr > th:nth-child(2),
body.erp-app #exportListingTable:not(:has(.centered-empty-state)) > tbody:not(.centered-empty-state) > tr > td:nth-child(2) {
width: 150px !important;
min-width: 150px !important;
max-width: 150px !important;
}
body.erp-app #exportListingTable:not(:has(.centered-empty-state)) > colgroup > col:nth-child(3),
body.erp-app #exportListingTable:not(:has(.centered-empty-state)) > thead > tr > th:nth-child(3),
body.erp-app #exportListingTable:not(:has(.centered-empty-state)) > tbody:not(.centered-empty-state) > tr > td:nth-child(3) {
width: 96px !important;
min-width: 96px !important;
max-width: 96px !important;
}
body.erp-app #exportListingTable:not(:has(.centered-empty-state)) > colgroup > col:nth-child(4),
body.erp-app #exportListingTable:not(:has(.centered-empty-state)) > thead > tr > th:nth-child(4),
body.erp-app #exportListingTable:not(:has(.centered-empty-state)) > tbody:not(.centered-empty-state) > tr > td:nth-child(4) {
width: 124px !important;
min-width: 124px !important;
max-width: 124px !important;
}
body.erp-app #exportListingTable:not(:has(.centered-empty-state)) > colgroup > col:nth-child(5),
body.erp-app #exportListingTable:not(:has(.centered-empty-state)) > thead > tr > th:nth-child(5),
body.erp-app #exportListingTable:not(:has(.centered-empty-state)) > tbody:not(.centered-empty-state) > tr > td:nth-child(5) {
width: 96px !important;
min-width: 96px !important;
max-width: 96px !important;
}
body.erp-app #exportListingTable:not(:has(.centered-empty-state)) > colgroup > col:nth-child(6),
body.erp-app #exportListingTable:not(:has(.centered-empty-state)) > thead > tr > th:nth-child(6),
body.erp-app #exportListingTable:not(:has(.centered-empty-state)) > tbody:not(.centered-empty-state) > tr > td:nth-child(6) {
width: 270px !important;
min-width: 270px !important;
max-width: 270px !important;
}
body.erp-app #exportListingTable:not(:has(.centered-empty-state)) > colgroup > col:nth-child(7),
body.erp-app #exportListingTable:not(:has(.centered-empty-state)) > thead > tr > th:nth-child(7),
body.erp-app #exportListingTable:not(:has(.centered-empty-state)) > tbody:not(.centered-empty-state) > tr > td:nth-child(7),
body.erp-app #exportListingTable:not(:has(.centered-empty-state)) > colgroup > col:nth-child(8),
body.erp-app #exportListingTable:not(:has(.centered-empty-state)) > thead > tr > th:nth-child(8),
body.erp-app #exportListingTable:not(:has(.centered-empty-state)) > tbody:not(.centered-empty-state) > tr > td:nth-child(8),
body.erp-app #exportListingTable:not(:has(.centered-empty-state)) > colgroup > col:nth-child(9),
body.erp-app #exportListingTable:not(:has(.centered-empty-state)) > thead > tr > th:nth-child(9),
body.erp-app #exportListingTable:not(:has(.centered-empty-state)) > tbody:not(.centered-empty-state) > tr > td:nth-child(9),
body.erp-app #exportListingTable:not(:has(.centered-empty-state)) > colgroup > col:nth-child(10),
body.erp-app #exportListingTable:not(:has(.centered-empty-state)) > thead > tr > th:nth-child(10),
body.erp-app #exportListingTable:not(:has(.centered-empty-state)) > tbody:not(.centered-empty-state) > tr > td:nth-child(10),
body.erp-app #exportListingTable:not(:has(.centered-empty-state)) > colgroup > col:nth-child(11),
body.erp-app #exportListingTable:not(:has(.centered-empty-state)) > thead > tr > th:nth-child(11),
body.erp-app #exportListingTable:not(:has(.centered-empty-state)) > tbody:not(.centered-empty-state) > tr > td:nth-child(11) {
width: 158px !important;
min-width: 158px !important;
max-width: 158px !important;
}
body.erp-app #exportListingTable:not(:has(.centered-empty-state)) > colgroup > col:nth-child(12),
body.erp-app #exportListingTable:not(:has(.centered-empty-state)) > thead > tr > th:nth-child(12),
body.erp-app #exportListingTable:not(:has(.centered-empty-state)) > tbody:not(.centered-empty-state) > tr > td:nth-child(12) {
width: 260px !important;
min-width: 260px !important;
max-width: 260px !important;
}
body.erp-app #exportListingTable:not(:has(.centered-empty-state)) > colgroup > col:nth-child(13),
body.erp-app #exportListingTable:not(:has(.centered-empty-state)) > thead > tr > th:nth-child(13),
body.erp-app #exportListingTable:not(:has(.centered-empty-state)) > tbody:not(.centered-empty-state) > tr > td:nth-child(13) {
width: 112px !important;
min-width: 112px !important;
max-width: 112px !important;
}
body.erp-app #exportListingTable:not(:has(.centered-empty-state)) > colgroup > col:nth-child(14),
body.erp-app #exportListingTable:not(:has(.centered-empty-state)) > thead > tr > th:nth-child(14),
body.erp-app #exportListingTable:not(:has(.centered-empty-state)) > tbody:not(.centered-empty-state) > tr > td:nth-child(14) {
width: 178px !important;
min-width: 178px !important;
max-width: 178px !important;
}
body.erp-app #exportListingTable:not(:has(.centered-empty-state)) > colgroup > col:nth-child(15),
body.erp-app #exportListingTable:not(:has(.centered-empty-state)) > thead > tr > th:nth-child(15),
body.erp-app #exportListingTable:not(:has(.centered-empty-state)) > tbody:not(.centered-empty-state) > tr > td:nth-child(15) {
width: 160px !important;
min-width: 160px !important;
max-width: 160px !important;
}
body.erp-app #exportListingTable:not(:has(.centered-empty-state)) > colgroup > col:nth-child(16),
body.erp-app #exportListingTable:not(:has(.centered-empty-state)) > thead > tr > th:nth-child(16),
body.erp-app #exportListingTable:not(:has(.centered-empty-state)) > tbody:not(.centered-empty-state) > tr > td:nth-child(16) {
width: 226px !important;
min-width: 226px !important;
max-width: 226px !important;
}
body.erp-app #exportListingTable tbody:not(.centered-empty-state) tr {
height: 64px !important;
min-height: 64px !important;
max-height: 64px !important;
}
body.erp-app #exportListingTable tbody:not(.centered-empty-state) td {
height: 64px !important;
min-height: 64px !important;
max-height: 64px !important;
padding: 4px 6px !important;
overflow: hidden !important;
line-height: 16px !important;
}
body.erp-app #exportListingTable thead tr th {
height: 42px !important;
min-height: 42px !important;
max-height: 42px !important;
}
body.erp-app #exportListingTable td:not(.image-col-image):not(.image-col-mapping-status) > .erp-copyable-cell {
position: static !important;
display: grid !important;
grid-template-columns: minmax(0, 1fr) 24px !important;
grid-template-rows: minmax(0, 1fr) !important;
align-items: center !important;
justify-content: center !important;
justify-items: center !important;
gap: 4px !important;
width: 100% !important;
height: 100% !important;
min-height: 0 !important;
padding: 0 !important;
}
body.erp-app #exportListingTable .erp-copyable-cell::before {
display: none !important;
content: none !important;
}
body.erp-app #exportListingTable td:not(.image-col-image):not(.image-col-mapping-status) > .erp-copyable-cell > .image-cell-clamp {
grid-column: 1 !important;
grid-row: 1 !important;
display: -webkit-box !important;
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
height: auto !important;
max-height: 32px !important;
margin: 0 !important;
overflow: hidden !important;
-webkit-box-orient: vertical !important;
-webkit-line-clamp: 2 !important;
line-clamp: 2 !important;
line-height: 16px !important;
white-space: normal !important;
text-align: center !important;
text-align-last: center !important;
overflow-wrap: anywhere !important;
word-break: break-word !important;
}
body.erp-app #exportListingTable tbody:not(.centered-empty-state) tr td.image-col-name > .erp-copyable-cell > .image-cell-clamp {
text-align: left !important;
text-align-last: left !important;
}
body.erp-app #exportListingTable td:not(.image-col-image):not(.image-col-mapping-status) > .erp-copyable-cell .erp-cell-copy-button {
position: static !important;
grid-column: 2 !important;
grid-row: 1 !important;
width: 22px !important;
min-width: 22px !important;
max-width: 22px !important;
height: 22px !important;
min-height: 22px !important;
max-height: 22px !important;
opacity: 0 !important;
transform: none !important;
}
body.erp-app #exportListingTable td:not(.image-col-image):not(.image-col-mapping-status) .erp-copyable-cell:hover .erp-cell-copy-button,
body.erp-app #exportListingTable td.image-col-image .image-thumb-actions:hover .erp-cell-copy-button,
body.erp-app #exportListingTable td.image-col-image .image-thumb-wrap:hover .erp-cell-copy-button {
opacity: 1 !important;
transform: none !important;
}
body.erp-app #exportListingTable td.image-col-image .image-thumb-wrap {
position: relative !important;
}
body.erp-app #exportListingTable td.image-col-image .image-opt-thumbnail,
body.erp-app #exportListingTable td.image-col-image .image-opt-placeholder {
width: 50px !important;
min-width: 50px !important;
max-width: 50px !important;
height: 50px !important;
min-height: 50px !important;
max-height: 50px !important;
}
body.erp-app #exportListingTable td.image-col-image .image-thumb-actions {
gap: 2px !important;
min-height: 0 !important;
}
body.erp-app #exportListingTable td.image-col-image .image-thumb-actions .image-original-link {
}
body.erp-app #exportListingTable td.image-col-image .image-thumb-actions .erp-cell-copy-button {
width: 20px !important;
min-width: 20px !important;
max-width: 20px !important;
height: 20px !important;
min-height: 20px !important;
max-height: 20px !important;
opacity: 0 !important;
}