/* 历史页视觉系统：只影响历史页与其提示，不改变任务或请求逻辑。 */
#mywork-page, .history-toast {
    --history-accent: #b92d65;
    --history-accent-hover: #a32156;
    --history-accent-soft: #fff0f6;
    --history-on-accent: #fff;
    --history-surface: #fff;
    --history-surface-muted: #f5f6f8;
    --history-surface-hover: #eef1f5;
    --history-text: #303542;
    --history-muted: #606a78;
    --history-border: #d9dfe7;
    --history-disabled-bg: #eef0f3;
    --history-disabled-text: #687180;
    --history-disabled-border: #d8dde4;
    --history-shadow: 0 2px 8px #17203308;
    --history-toast-shadow: 0 8px 28px #17203326;
    --history-info-text: #0e6478;
    --history-info-bg: #edfafd;
    --history-info-border: #98d5e2;
    --history-warning-text: #8a4b09;
    --history-warning-bg: #fff7e6;
    --history-warning-border: #e7bf79;
    --history-success-text: #17663e;
    --history-success-bg: #eaf8f0;
    --history-success-border: #a0d0b4;
    --history-danger-text: #a62b32;
    --history-danger-bg: #fff0f1;
    --history-danger-border: #e7a3a8;
    --history-neutral-text: #475569;
    --history-neutral-bg: #f1f5f9;
    --history-neutral-border: #cbd5e1;
    --history-on-status: #fff;
    --history-radius: 12px;
    --history-motion: 160ms ease;
    --history-font: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
}
/* 品牌只负责主操作；状态语义在两个站点保持一致。 */
#mywork-page.nude2-app {
    --history-accent: #6d44ba;
    --history-accent-hover: #59379d;
    --history-accent-soft: #f5f0ff;
}
/* 使用 Zibll 已有的主题 class，切换即时生效，不增加主题状态或存储。 */
body.dark-theme #mywork-page, body.dark-theme .history-toast {
    color-scheme: dark;
    --history-accent: #f29fc0;
    --history-accent-hover: #ffbbd5;
    --history-accent-soft: #432737;
    --history-on-accent: #351426;
    --history-surface: #323335;
    --history-surface-muted: #292b30;
    --history-surface-hover: #3c3f46;
    --history-text: #eef2f7;
    --history-muted: #b7c0cd;
    --history-border: #535963;
    --history-disabled-bg: #393d44;
    --history-disabled-text: #a8b1bf;
    --history-disabled-border: #535963;
    --history-shadow: none;
    --history-toast-shadow: 0 8px 28px #0006;
    --history-info-text: #8bdfef;
    --history-info-bg: #183c47;
    --history-info-border: #326977;
    --history-warning-text: #f5ce87;
    --history-warning-bg: #45341e;
    --history-warning-border: #816032;
    --history-success-text: #8ed9b0;
    --history-success-bg: #1c3d2f;
    --history-success-border: #397758;
    --history-danger-text: #ffb4b9;
    --history-danger-bg: #482b30;
    --history-danger-border: #88545b;
    --history-neutral-text: #cbd5e1;
    --history-neutral-bg: #343d4a;
    --history-neutral-border: #536072;
    --history-on-status: #101820;
}
body.dark-theme #mywork-page.nude2-app {
    --history-accent: #c4adf4;
    --history-accent-hover: #d7c6fa;
    --history-accent-soft: #352b48;
    --history-on-accent: #271b3e;
}
#mywork-page {
    min-width: 0;
    color: var(--history-text);
    font-family: var(--history-font);
    overflow-wrap: anywhere;
}
#mywork-page [hidden] { display: none !important; }
#mywork-page *, .history-toast { box-sizing: border-box; }
#mywork-page .page-header, #mywork-page .n2m-header {
    padding: 8px 0 18px;
    margin: 0 0 20px;
    border-bottom: 1px solid var(--history-border);
}
#mywork-page .n2m-header { display: flex; align-items: center; gap: 12px; }
#mywork-page .page-header h2, #mywork-page .n2m-header h2 {
    margin: 0;
    color: var(--history-text);
    font-size: 26px;
    font-weight: 700;
    line-height: 1.4;
}
#mywork-page .n2m-header-icon {
    display: grid; place-items: center; flex: 0 0 44px; height: 44px;
    border-radius: var(--history-radius); background: var(--history-accent-soft); font-size: 22px;
}
#mywork-page .n2m-sub { margin-top: 4px; color: var(--history-muted); font-size: 14px; }
#mywork-page .status-container { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
/* 相同的 token 同时应用于筛选按钮与记录状态标签。 */
#mywork-page [data-history-status], #mywork-page .task-status {
    --status-text: var(--history-neutral-text);
    --status-bg: var(--history-neutral-bg);
    --status-border: var(--history-neutral-border);
}
#mywork-page [data-history-status="new"], #mywork-page .st-new {
    --status-text: var(--history-info-text); --status-bg: var(--history-info-bg); --status-border: var(--history-info-border);
}
#mywork-page [data-history-status="pending"], #mywork-page .st-pending {
    --status-text: var(--history-warning-text); --status-bg: var(--history-warning-bg); --status-border: var(--history-warning-border);
}
#mywork-page [data-history-status="processed"], #mywork-page .st-processed {
    --status-text: var(--history-success-text); --status-bg: var(--history-success-bg); --status-border: var(--history-success-border);
}
#mywork-page [data-history-status="failed"], #mywork-page .st-failed {
    --status-text: var(--history-danger-text); --status-bg: var(--history-danger-bg); --status-border: var(--history-danger-border);
}
#mywork-page button.status {
    flex: 1 1 100px; min-width: 0; min-height: 44px; margin: 0; padding: 10px 14px;
    border: 1px solid var(--status-border); border-radius: 10px;
    color: var(--status-text); background: var(--status-bg);
    font: 600 14px/1.5 var(--history-font); white-space: normal; cursor: pointer;
}
#mywork-page button.status.active-filter {
    color: var(--history-on-status); background: var(--status-text); border-color: var(--status-text);
    box-shadow: inset 0 0 0 1px var(--status-text);
}
#mywork-page button.status:hover:not(.active-filter) { box-shadow: inset 0 0 0 1px var(--status-text); }
#mywork-page .task-status {
    max-width: 100%; padding: 4px 12px; white-space: normal;
    border: 1px solid var(--status-border); border-radius: 100px;
    color: var(--status-text); background: var(--status-bg); font-size: 13px; font-weight: 600; line-height: 1.5;
}
#mywork-page .notice {
    margin: 12px 0; padding: 12px 14px; border: 1px solid var(--history-border);
    border-radius: var(--history-radius); background: var(--history-surface-muted);
}
#mywork-page .notice p { margin: 0; color: var(--history-muted); font-size: 14px; line-height: 1.6; }
#mywork-page .history-toolbar {
    display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap;
    gap: 8px 16px; margin: 12px 0; color: var(--history-muted); font-size: 14px;
}
#mywork-page :is(.history-filters, .history-toolbar, .history-empty, .history-load-error, #pagination-container) button,
#mywork-page .history-load-error a,
#mywork-page .task .btn, #mywork-page .copy-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 4px;
    min-height: 44px; min-width: 44px; margin: 0; padding: 8px 14px;
    border: 1px solid var(--history-border); border-radius: 10px;
    color: var(--history-text); background: var(--history-surface);
    font: 600 14px/1.5 var(--history-font); white-space: normal; text-decoration: none;
    box-shadow: none; cursor: pointer;
}
#mywork-page :is(.history-filters, .history-toolbar, .history-empty, .history-load-error, #pagination-container) button:hover:not(:disabled),
#mywork-page .history-load-error a:hover,
#mywork-page .task .btn:hover:not(:disabled), #mywork-page .copy-btn:hover {
    background: var(--history-surface-hover); border-color: var(--history-muted);
}
#mywork-page .task .btn.jb-purple {
    color: var(--history-on-accent); background: var(--history-accent); border-color: var(--history-accent);
}
#mywork-page .task .btn.jb-purple:hover:not(:disabled) {
    background: var(--history-accent-hover); border-color: var(--history-accent-hover);
}
#mywork-page .task .btn:is(.jb-danger, .jb-cancel) {
    color: var(--history-danger-text); border-color: var(--history-danger-border); background: var(--history-surface);
}
#mywork-page .task .btn:is(.jb-danger, .jb-cancel):hover:not(:disabled) { background: var(--history-danger-bg); }
#mywork-page :is(button, a, input, select):focus-visible, .history-toast :is(button, a):focus-visible {
    outline: 3px solid var(--history-accent); outline-offset: 3px;
}
/* 有限、即时的交互反馈：不使用呼吸、闪烁或扫光。 */
#mywork-page :is(button, .btn, .task-status), .history-toast button {
    transition: color var(--history-motion), background-color var(--history-motion), border-color var(--history-motion), box-shadow var(--history-motion), transform var(--history-motion);
}
#mywork-page :is(button, .btn):active:not(:disabled) { transform: translateY(1px); }
#mywork-page :is(button, .btn)::before, #mywork-page :is(button, .btn)::after { content: none; }
#mywork-page :is(button, .btn, .task, .task-status, #loading-indicator) { animation: none; }
#mywork-page button:disabled:not([aria-current]),
#mywork-page #history-filters button:disabled,
#mywork-page #pagination-container button:disabled:not([aria-current]),
#mywork-page .task .btn:disabled {
    color: var(--history-disabled-text); background: var(--history-disabled-bg); border-color: var(--history-disabled-border);
    cursor: not-allowed; opacity: 1; transform: none; box-shadow: none;
}
#mywork-page #loading-indicator {
    margin: 8px 0; padding: 10px 12px; border: 1px solid var(--history-info-border); border-radius: 10px;
    color: var(--history-info-text); background: var(--history-info-bg); font-size: 14px; line-height: 1.6;
}
#mywork-page .history-load-error {
    display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 12px 0; padding: 14px;
    border: 1px solid var(--history-danger-border); border-radius: var(--history-radius);
    color: var(--history-danger-text); background: var(--history-danger-bg); line-height: 1.6;
}
#mywork-page .history-load-error span { flex: 1 1 240px; }
#mywork-page .history-empty {
    display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 36px 16px;
    color: var(--history-muted); background: var(--history-surface-muted); border: 1px dashed var(--history-border); border-radius: var(--history-radius);
}
#mywork-page .history-filters {
    display: grid; grid-template-columns: minmax(130px, 1fr) repeat(2, minmax(130px, .85fr)) auto;
    align-items: end; gap: 12px; margin: 18px 0; padding: 16px;
    background: var(--history-surface-muted); border: 1px solid var(--history-border); border-radius: var(--history-radius);
}
#mywork-page .history-filters label { display: grid; gap: 6px; min-width: 0; margin: 0; color: var(--history-text); font: 500 14px/1.5 var(--history-font); }
#mywork-page .history-filters :is(input, select) {
    display: block; width: 100%; min-width: 0; min-height: 44px; padding: 8px 10px; margin: 0;
    border: 1px solid var(--history-border); border-radius: 8px; box-shadow: none;
    color: var(--history-text); background: var(--history-surface); font: 400 16px/1.5 var(--history-font);
    color-scheme: light;
}
body.dark-theme #mywork-page .history-filters :is(input, select) { color-scheme: dark; }
#mywork-page .history-filters :is(input, select):disabled {
    color: var(--history-disabled-text); background: var(--history-disabled-bg); border-color: var(--history-disabled-border);
}
#mywork-page .history-filter-actions { display: flex; flex-wrap: wrap; gap: 8px; }
#mywork-page #history-filters button.history-filter-apply:not(:disabled) { color: var(--history-on-accent); background: var(--history-accent); border-color: var(--history-accent); }
#mywork-page #history-filters button.history-filter-apply:hover:not(:disabled) { background: var(--history-accent-hover); }
/* 善解人衣站（粉色主题）"应用筛选"按钮用品牌粉 #F04494；nude2 站保持紫色 */
#mywork-page:not(.nude2-app) #history-filters button.history-filter-apply:not(:disabled) { background: #f04494; border-color: #f04494; color: #fff; }
#mywork-page:not(.nude2-app) #history-filters button.history-filter-apply:hover:not(:disabled) { background: #e0357f; border-color: #e0357f; }
#mywork-page .history-filters p { grid-column: 1 / -1; margin: 0; color: var(--history-muted); font-size: 13px; line-height: 1.5; }
#mywork-page .history-filters #history-filter-error { color: var(--history-danger-text); }
.history-toast a { color: inherit; text-decoration: underline; font-weight: 600; padding: 10px 4px; }
@media (max-width: 1000px) {
    #mywork-page .history-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    #mywork-page .history-filter-type, #mywork-page .history-filter-actions { grid-column: 1 / -1; }
}
@media (max-width: 400px) {
    #mywork-page .history-filters { grid-template-columns: minmax(0, 1fr); padding: 12px; }
    #mywork-page .history-filter-actions button { flex: 1; }
}
#mywork-page #pagination-container {
    display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px;
    padding: 12px 0; color: var(--history-muted);
}
#mywork-page #pagination-container button[aria-current] {
    color: var(--history-accent); background: var(--history-accent-soft); border-color: var(--history-accent); opacity: 1;
}
#mywork-page .task {
    display: flex; flex-direction: column; align-items: stretch; gap: 12px;
    margin: 12px 0; padding: 16px 20px; background: var(--history-surface); border: 1px solid var(--history-border);
    border-radius: var(--history-radius); box-shadow: var(--history-shadow);
}
#mywork-page .task-head {
    display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px;
    padding-bottom: 10px; border-bottom: 1px solid var(--history-border);
}
#mywork-page .task-type { color: var(--history-text); font-size: 16px; font-weight: 700; }
#mywork-page .task-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 24px; }
#mywork-page .task-meta-item { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; min-width: 0; color: var(--history-text); font-size: 14px; }
#mywork-page .meta-label { flex-shrink: 0; color: var(--history-muted); }
#mywork-page .code-container { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; min-width: 0; }
#mywork-page .code-container code {
    min-width: 0; padding: 3px 8px; border: 1px solid var(--history-border); border-radius: 6px;
    color: var(--history-text); background: var(--history-surface-muted); font: 13px/1.6 ui-monospace, monospace; overflow-wrap: anywhere;
}
#mywork-page .copy-btn { flex-shrink: 0; }
#mywork-page .task-actions, #mywork-page .btn-extra-row { display: flex; flex-wrap: wrap; gap: 8px; }
#mywork-page .btn-extra-row { padding-top: 10px; border-top: 1px solid var(--history-border); }
#mywork-page .task-error {
    padding: 10px 12px; border: 1px solid var(--history-danger-border); border-radius: 10px;
    color: var(--history-danger-text); background: var(--history-danger-bg); font-size: 14px; line-height: 1.6;
}
#mywork-page .warning-text {
    padding: 10px 12px; border: 1px solid var(--history-warning-border); border-radius: 10px;
    color: var(--history-warning-text); background: var(--history-warning-bg); font-size: 14px; line-height: 1.6;
}
#mywork-page .task-admin-json {
    width: 100%; margin: 8px 0; padding: 10px 12px; border: 1px solid var(--history-border); border-radius: 8px;
    background: var(--history-surface-muted); color: var(--history-text); font: 13px/1.6 ui-monospace, monospace;
    white-space: pre-wrap; overflow-wrap: anywhere;
}
#mywork-page .task-admin-links a { display: inline-block; margin-right: 14px; color: var(--history-accent); text-decoration: underline; }
/* 管理员专区：原图/模板缩略图 + 中文提示词（字段仅管理员响应中存在） */
#mywork-page .task-admin-panel {
    display: flex; flex-direction: column; gap: 10px; width: 100%; padding: 12px; border: 1px dashed var(--history-border);
    border-radius: 10px; background: var(--history-surface-muted);
}
#mywork-page .task-admin-media { display: flex; flex-wrap: wrap; gap: 12px; }
#mywork-page .task-admin-media-item { margin: 0; max-width: 200px; }
#mywork-page .task-admin-media-item > a {
    display: flex; align-items: center; justify-content: center; width: 160px; height: 160px; overflow: hidden;
    border: 1px solid var(--history-border); border-radius: 8px; background: var(--history-surface);
}
#mywork-page .task-admin-media-item :is(img, video) { display: block; max-width: 100%; max-height: 100%; object-fit: contain; }
#mywork-page .task-admin-media-fallback { padding: 8px; color: var(--history-muted); font-size: 12px; text-align: center; }
#mywork-page .task-admin-media-item figcaption { margin-top: 4px; color: var(--history-muted); font-size: 12px; }
#mywork-page .task-admin-media-item figcaption a { color: var(--history-accent); text-decoration: underline; }
#mywork-page .task-admin-prompt { margin: 0; }
#mywork-page .task-admin-prompt-head { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
#mywork-page .task-admin-prompt summary { cursor: pointer; }
#mywork-page .task-admin-prompt-text {
    padding: 8px 10px; border: 1px solid var(--history-border); border-radius: 8px; background: var(--history-surface);
    color: var(--history-text); font-size: 14px; line-height: 1.7; white-space: pre-wrap; overflow-wrap: anywhere;
}
#mywork-page .task-admin-prompt-negative .task-admin-prompt-text { margin-top: 4px; color: var(--history-muted); font-size: 13px; }
#mywork-page .mywork-admin-balance-records {
    margin: 16px 0 22px; padding: 18px 20px; border: 1px solid var(--history-border); border-radius: var(--history-radius);
    background: var(--history-surface); color: var(--history-text);
}
#mywork-page .mywork-admin-balance-records h3 { margin: 0 0 6px; color: var(--history-text); font-size: 18px; }
#mywork-page .mywork-admin-balance-records__meta { margin: 0 0 14px; color: var(--history-muted); font-size: 14px; }
#mywork-page .mywork-admin-balance-table-wrap { max-width: 100%; overflow-x: auto; }
#mywork-page .mywork-admin-balance-records table { width: 100%; min-width: 780px; border-collapse: collapse; font-size: 13px; }
#mywork-page .mywork-admin-balance-records :is(th, td) { padding: 9px 10px; border-bottom: 1px solid var(--history-border); text-align: left; vertical-align: top; }
#mywork-page .mywork-admin-balance-records th { background: var(--history-surface-muted); color: var(--history-text); white-space: nowrap; }
#mywork-page .mywork-admin-balance-records__num { text-align: right !important; white-space: nowrap; }
#mywork-page .mywork-admin-balance-records__add { color: var(--history-success-text); font-weight: 700; }
#mywork-page .mywork-admin-balance-records__sub { color: var(--history-danger-text); font-weight: 700; }
#mywork-page .mywork-admin-balance-records__empty { padding: 14px; border-radius: 10px; color: var(--history-muted); background: var(--history-surface-muted); }
.history-toast {
    position: fixed; z-index: 100000; left: 50%; bottom: max(20px, env(safe-area-inset-bottom)); transform: translateX(-50%);
    display: flex; align-items: flex-start; gap: 8px; width: max-content; max-width: min(520px, calc(100vw - 24px));
    max-height: 45vh; overflow: auto; padding: 12px 12px 12px 16px; border: 1px solid var(--history-info-border); border-left-width: 4px;
    border-radius: var(--history-radius); background: var(--history-surface); color: var(--history-text);
    box-shadow: var(--history-toast-shadow); font: 14px/1.6 var(--history-font);
}
.history-toast-error { border-color: var(--history-danger-border); }
.history-toast-success { border-color: var(--history-success-border); }
.history-toast-warning { border-color: var(--history-warning-border); }
.history-toast span { min-width: 0; padding-top: 10px; overflow-wrap: anywhere; }
.history-toast button {
    flex: 0 0 44px; width: 44px; height: 44px; padding: 0; border: none; border-radius: 8px;
    color: var(--history-text); background: var(--history-surface); font-size: 24px; cursor: pointer;
}
.history-toast button:hover { background: var(--history-surface-hover); }
@media (max-width: 600px) {
    #mywork-page .status-container { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
    #mywork-page button.status { padding: 10px 6px; }
    #mywork-page .task { padding: 14px 12px; }
    #mywork-page .task-meta { flex-direction: column; align-items: stretch; }
    #mywork-page .task-meta-item { align-items: flex-start; }
    #mywork-page .task-actions, #mywork-page .btn-extra-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    #mywork-page .task-actions .btn, #mywork-page .btn-extra-row .btn { min-width: 0; padding: 10px 8px; }
    #mywork-page .task-actions .btn:first-child { grid-column: 1 / -1; }
    #mywork-page #pagination-container .history-page-number { display: none; }
    #mywork-page .mywork-admin-balance-records { padding: 12px; }
    #mywork-page .page-header h2, #mywork-page .n2m-header h2 { font-size: 22px; }
}
@media (max-width: 360px) {
    #mywork-page .status-container { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) {
    #mywork-page *, .history-toast, .history-toast * { animation: none !important; transition: none !important; }
    #mywork-page :is(button, .btn):active:not(:disabled) { transform: none; }
}
