:root {
  --bg: #f5f7fb;
  --sidebar: #ffffff;
  --panel: #ffffff;
  --panel-strong: #eef2f7;
  --panel-hover: #f0f3f8;
  --ink: #1f2937;
  --muted: #6b7280;
  --muted-strong: #4b5563;
  --line: #dfe4ec;
  --line-soft: #e8ebf1;
  --accent: #5d88ff;
  --accent-strong: #4775f2;
  --accent-soft: rgba(93, 136, 255, .11);
  --success: #48c58b;
  --warning: #f2b75d;
  --danger: #ff707d;
  --shadow: 0 18px 55px rgba(43, 55, 82, .1);
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  color: var(--ink);
  background: var(--bg);
  color-scheme: light;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: var(--bg); }
body { min-height: 100vh; }
button, input, textarea, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.hidden { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.muted-text { color: var(--muted); }

/* Shared workbench shell */
.ai-workspace-shell { display: grid; grid-template-columns: 252px minmax(0, 1fr); min-height: 100vh; }
.workspace-sidebar { position: sticky; top: 0; z-index: 30; display: flex; flex-direction: column; min-height: 100vh; height: 100vh; padding: 22px 16px 16px; border-right: 1px solid var(--line-soft); background: var(--sidebar); }
.workspace-brand { display: flex; align-items: center; gap: 11px; padding: 0 8px 25px; color: var(--ink); text-decoration: none; }
.workspace-brand-mark { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 11px; background: linear-gradient(145deg, #73a1ff, #506be9); color: white; font-size: 13px; font-weight: 850; box-shadow: 0 8px 20px rgba(80, 107, 233, .25); }
.workspace-brand-copy { display: grid; gap: 2px; }
.workspace-brand-copy strong { font-size: 15px; letter-spacing: .02em; }
.workspace-brand-copy small { color: #9aa2b1; font-size: 8px; letter-spacing: .16em; }
.workspace-nav-label { margin: 0 10px 8px; color: #a0a7b4; font-size: 10px; letter-spacing: .14em; }
.workspace-side-nav { display: grid; gap: 5px; }
.workspace-side-nav a { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 0 12px; border-radius: 10px; color: var(--muted-strong); text-decoration: none; font-size: 13px; transition: background .18s ease, color .18s ease; }
.workspace-side-nav a:hover { background: #f2f5f9; color: var(--ink); }
.workspace-side-nav a.active { background: #edf2ff; color: #315fc8; font-weight: 650; }
.workspace-nav-icon { display: grid; place-items: center; width: 22px; height: 22px; color: #8992a2; font-size: 14px; }
.workspace-side-nav a.active .workspace-nav-icon { color: #5d88ff; }
.workspace-sidebar-spacer { flex: 1; min-height: 30px; }
.workspace-footer-links { display: grid; gap: 3px; margin-bottom: 12px; }
.workspace-footer-links a { padding: 8px 12px; color: #7d8695; text-decoration: none; font-size: 12px; }
.workspace-footer-links a:hover { color: var(--ink); }
.workspace-user { display: flex; align-items: center; gap: 10px; padding: 12px 10px 4px; border-top: 1px solid var(--line-soft); }
.workspace-user-avatar { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: #e8eefc; color: #4967a8; font-size: 12px; font-weight: 750; }
.workspace-user-copy { display: grid; gap: 2px; min-width: 0; }
.workspace-user-copy strong, .workspace-user-copy small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.workspace-user-copy strong { font-size: 12px; }
.workspace-user-copy small { color: #87909e; font-size: 10px; }
.workspace-main { min-width: 0; min-height: 100vh; background: var(--bg); }
.workspace-header { display: flex; align-items: center; gap: 16px; min-height: 82px; padding: 16px 28px; border-bottom: 1px solid var(--line-soft); background: rgba(255, 255, 255, .92); backdrop-filter: blur(18px); }
.workspace-heading { flex: 1; min-width: 0; }
.workspace-heading h1 { margin: 2px 0 0; font-size: 21px; line-height: 1.25; letter-spacing: -.01em; }
.workspace-subtitle { margin: 4px 0 0; color: var(--muted); font-size: 12px; line-height: 1.45; }
.eyebrow { margin: 0; color: #939baa; font-size: 9px; font-weight: 700; letter-spacing: .17em; }
.workspace-content { padding: 24px 28px 40px; }
.mobile-menu-button { display: none; width: 38px; height: 38px; padding: 0; border: 1px solid var(--line); border-radius: 9px; background: var(--panel); color: var(--ink); cursor: pointer; }
.sidebar-overlay { display: none; }

/* Controls */
select, input, textarea { border: 1px solid var(--line); border-radius: 9px; background: #ffffff; color: var(--ink); }
select, input { min-height: 40px; padding: 0 11px; }
textarea { padding: 12px; }
select:focus, input:focus, textarea:focus { border-color: #536da9; outline: none; box-shadow: 0 0 0 3px rgba(93, 136, 255, .1); }
input::placeholder, textarea::placeholder { color: #a4abb7; }
.ai-primary, .ai-ghost { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 42px; border-radius: 9px; padding: 0 16px; cursor: pointer; transition: transform .16s ease, background .16s ease, border-color .16s ease; }
.ai-primary { border: 1px solid var(--accent); background: var(--accent); color: white; }
.ai-primary:hover { border-color: #4775f2; background: #4775f2; transform: translateY(-1px); }
.ai-primary:disabled { opacity: .45; cursor: not-allowed; transform: none; }
.ai-ghost { border: 1px solid var(--line); background: var(--panel); color: var(--muted-strong); }
.ai-ghost:hover { border-color: #cbd2dd; background: var(--panel-hover); color: var(--ink); }
.compact { min-height: 35px; padding: 0 12px; font-size: 12px; }
.link-button { width: max-content; text-decoration: none; }
.icon-button, .new-chat-button { display: grid; place-items: center; padding: 0; border: 1px solid var(--line); background: transparent; color: var(--muted-strong); cursor: pointer; }
.icon-button { width: 32px; height: 32px; border-radius: 8px; }
.new-chat-button { width: 34px; height: 34px; border-radius: 9px; font-size: 17px; }
.icon-button:hover, .new-chat-button:hover { border-color: #4b5060; background: var(--panel-hover); color: white; }
.chat-status { color: var(--muted); font-size: 11px; line-height: 1.45; }
.model-price-line { display: block; color: #8e96a4; font-size: 9px; line-height: 1.4; }
.panel-heading-row { display: flex; align-items: center; justify-content: space-between; gap: 15px; }
.panel-heading-row h2 { margin: 3px 0 0; font-size: 15px; }
.panel-empty { margin: 20px 0; color: var(--muted); text-align: center; font-size: 12px; }
.status-pill { display: inline-flex; align-items: center; justify-content: center; width: max-content; min-height: 25px; padding: 0 9px; border-radius: 999px; font-size: 10px; }
.status-pill.neutral { background: #eef1f5; color: #697281; }
.status-pill.success { background: rgba(72, 197, 139, .12); color: #72d9aa; }
.status-pill.danger { background: rgba(255, 112, 125, .12); color: #ff8a95; }
.status-pill.running { background: var(--accent-soft); color: #8dacff; }

/* Chat */
.chat-workspace-main { height: 100vh; overflow: hidden; }
.chat-workspace-main .workspace-header { min-height: 74px; height: 74px; }
.chat-layout { display: grid; grid-template-columns: minmax(0, 1fr) 286px; height: calc(100vh - 74px); }
.chat-stage { display: grid; grid-template-rows: minmax(0, 1fr) auto; min-width: 0; min-height: 0; background: radial-gradient(circle at 50% 28%, rgba(93, 136, 255, .08), transparent 38%); }
.chat-scroll { min-height: 0; overflow-y: auto; scrollbar-color: #373a45 transparent; }
.empty-chat { display: grid; place-items: center; align-content: center; min-height: 100%; max-width: 650px; margin: 0 auto; padding: 50px 24px 150px; text-align: center; }
.empty-orb { display: grid; place-items: center; width: 60px; height: 60px; margin-bottom: 22px; border: 1px solid #d9e2f7; border-radius: 19px; background: linear-gradient(145deg, #ffffff, #edf3ff); color: #547bdc; font-size: 13px; font-weight: 850; box-shadow: 0 18px 45px rgba(71, 91, 134, .12); }
.empty-chat h2 { margin: 0 0 9px; font-size: 28px; font-weight: 650; letter-spacing: -.03em; }
.empty-chat > p { margin: 0; color: var(--muted); font-size: 13px; }
.prompt-suggestions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 26px; }
.prompt-suggestions button { min-height: 36px; padding: 0 12px; border: 1px solid var(--line); border-radius: 999px; background: rgba(255, 255, 255, .9); color: #687282; font-size: 11px; cursor: pointer; }
.prompt-suggestions button:hover { border-color: #b9c7e8; color: #315fc8; background: #f7f9ff; }
.message-list { display: flex; flex-direction: column; gap: 22px; width: min(820px, 100%); min-height: 100%; margin: 0 auto; padding: 30px 24px 45px; }
.message { position: relative; display: grid; gap: 7px; max-width: 84%; }
.message.user { align-self: flex-end; }
.message.assistant { align-self: flex-start; }
.message-meta { color: #8b94a2; font-size: 10px; }
.message-body { padding: 13px 15px; border: 1px solid var(--line); border-radius: 5px 15px 15px 15px; background: #ffffff; white-space: pre-wrap; overflow-wrap: anywhere; color: #273142; font-size: 13px; line-height: 1.72; box-shadow: 0 5px 18px rgba(48, 61, 88, .05); }
.message.user .message-body { border-color: #426bd2; border-radius: 15px 5px 15px 15px; background: #416dd6; color: white; }
.message.failed .message-body { border-color: rgba(218, 69, 85, .3); background: #fff5f6; color: #c94b58; }
.message-attachments { display: flex; flex-wrap: wrap; gap: 8px; }
.message-attachments img { width: 92px; height: 92px; object-fit: cover; border: 1px solid var(--line); border-radius: 10px; }
.retry-button, .message-copy { width: max-content; padding: 2px 0; border: 0; background: transparent; color: var(--muted); font-size: 10px; cursor: pointer; }
.retry-button { color: var(--danger); }
.message-copy:hover { color: white; }
.composer { width: min(820px, calc(100% - 40px)); margin: 0 auto 18px; padding: 9px 11px 8px; border: 1px solid #d9dee8; border-radius: 15px; background: rgba(255, 255, 255, .97); box-shadow: 0 15px 45px rgba(48, 61, 88, .13); }
.composer.is-dragover, .reference-upload.is-dragover { border-color: var(--accent); background: var(--accent-soft); box-shadow: 0 0 0 3px rgba(65,109,214,.12); }
.composer textarea { display: block; width: 100%; min-height: 54px; max-height: 180px; padding: 9px 8px; resize: none; border: 0; background: transparent; box-shadow: none; color: var(--ink); line-height: 1.55; }
.composer-actions { display: flex; align-items: center; gap: 8px; min-height: 35px; }
.composer-tools { display: flex; align-items: center; gap: 6px; }
.image-upload-label { display: inline-flex; align-items: center; min-height: 31px; padding: 0 9px; border: 1px solid var(--line); border-radius: 8px; color: #697383; font-size: 10px; cursor: pointer; }
.image-upload-label:hover { background: var(--panel-hover); color: #315fc8; }
.image-upload-label input { display: none; }
.composer-model select { min-height: 31px; max-width: 190px; padding: 0 27px 0 9px; border-radius: 8px; color: #5b6575; font-size: 10px; }
.composer-actions .chat-status { flex: 1; text-align: right; }
.message-count { color: #5f6572; font-size: 9px; white-space: nowrap; }
.send-button { display: grid; place-items: center; flex: 0 0 auto; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 9px; background: var(--accent); color: white; font-size: 17px; cursor: pointer; }
.send-button:disabled { opacity: .45; cursor: wait; }
.composer > .model-price-line { margin: 4px 7px 0; }
.attachment-row { display: flex; gap: 8px; padding: 5px 7px 8px; overflow-x: auto; }
.attachment-chip { position: relative; flex: 0 0 auto; }
.attachment-chip img { width: 58px; height: 58px; object-fit: cover; border: 1px solid var(--line); border-radius: 9px; }
.attachment-chip button { position: absolute; top: -5px; right: -5px; display: grid; place-items: center; width: 19px; height: 19px; padding: 0; border: 1px solid #cbd2dc; border-radius: 50%; background: #ffffff; color: #596272; cursor: pointer; }
.chat-history-panel { min-width: 0; padding: 20px 14px; border-left: 1px solid var(--line-soft); background: #fbfcfe; overflow-y: auto; }
.chat-history-panel .panel-heading-row { padding: 0 5px 15px; }
.conversation-list { display: grid; gap: 5px; }
.conversation-item { display: grid; gap: 4px; width: 100%; padding: 10px 11px; border: 1px solid transparent; border-radius: 9px; background: transparent; color: #596373; text-align: left; cursor: pointer; }
.conversation-item:hover { background: #f1f4f8; }
.conversation-item.active { border-color: #d5def2; background: #edf2ff; color: #315fc8; }
.conversation-item span, .conversation-item small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.conversation-item span { font-size: 11px; }
.conversation-item small { color: #686e7b; font-size: 9px; }

/* Media creation */
.media-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 20px; align-items: start; }
.media-builder-card, .media-task-panel, .workflow-config-card, .workflow-result-card, .workflow-runs-card, .task-table-card { border: 1px solid var(--line-soft); border-radius: 14px; background: var(--panel); box-shadow: 0 10px 35px rgba(45, 59, 88, .06); }
.media-builder-card { min-height: calc(100vh - 150px); overflow: hidden; }
.media-form { display: grid; min-height: inherit; grid-template-rows: auto minmax(390px, 1fr) auto; }
.media-parameter-bar { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 10px; padding: 15px 18px; border-bottom: 1px solid var(--line-soft); background: #f9fafc; }
.media-parameter-bar label, .dynamic-fields label { display: grid; gap: 5px; color: var(--muted); font-size: 10px; }
.media-parameter-bar select, .media-parameter-bar input, .dynamic-fields select, .dynamic-fields input { min-width: 140px; min-height: 35px; font-size: 11px; }
.dynamic-fields { display: contents; }
.media-prompt-surface { padding: 24px; }
.prompt-heading-row { display: flex; align-items: center; justify-content: space-between; gap: 15px; color: #c7cad2; font-size: 12px; }
.prompt-heading-row span { color: #626875; font-size: 9px; }
.media-prompt-surface > textarea { width: 100%; min-height: 210px; margin-top: 9px; resize: vertical; border-color: var(--line); background: #ffffff; font-size: 13px; line-height: 1.65; }
.reference-section { display: flex; align-items: flex-start; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.reference-grid { display: flex; flex-wrap: wrap; gap: 10px; }
.reference-grid .attachment-chip img { width: 96px; height: 96px; }
.reference-upload { display: grid; place-items: center; align-content: center; width: 150px; height: 96px; border: 1px dashed #cbd2dd; border-radius: 10px; color: #778190; text-align: center; cursor: pointer; }
.reference-upload:hover { border-color: #5d70a8; background: var(--accent-soft); }
.reference-upload > span { font-size: 18px; line-height: 1; }
.reference-upload strong { margin-top: 5px; font-size: 10px; font-weight: 600; }
.reference-upload small { margin-top: 3px; color: #9ba3af; font-size: 8px; }
.reference-upload input { display: none; }
.generation-footer { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 72px; padding: 13px 18px; border-top: 1px solid var(--line-soft); background: #f9fafc; }
.generation-footer > div { display: grid; gap: 3px; }
.generate-button { min-width: 132px; }
.media-task-panel { max-height: calc(100vh - 150px); padding: 17px; overflow-y: auto; }
.media-task-panel > .panel-heading-row { margin-bottom: 14px; }
.task-list { display: grid; gap: 10px; }
.task-empty { display: grid; place-items: center; align-content: center; min-height: 300px; padding: 25px; color: var(--muted); text-align: center; }
.task-empty > span { display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: 14px; border: 1px solid var(--line); border-radius: 14px; background: #f4f7fd; color: #6f87c1; }
.task-empty strong { color: #4f5968; font-size: 12px; }
.task-empty p { max-width: 210px; margin: 6px 0; font-size: 10px; line-height: 1.6; }
.task-card { padding: 12px; border: 1px solid var(--line-soft); border-radius: 10px; background: #fbfcfe; }
.task-head { display: flex; justify-content: space-between; gap: 10px; }
.task-head strong { max-width: 190px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; }
.task-status { flex: 0 0 auto; color: #8fa9eb; font-size: 9px; }
.task-meta { margin: 5px 0 8px; color: #626875; font-size: 9px; }
.task-error { color: var(--danger) !important; font-size: 10px; line-height: 1.5; }
.task-progress { height: 3px; margin: 8px 0; overflow: hidden; border-radius: 999px; background: #e7eaf0; }
.task-progress span { display: block; height: 100%; border-radius: inherit; background: var(--accent); transition: width .3s ease; }
.task-result { margin-top: 10px; }
.task-result img, .task-result video { display: block; width: 100%; max-height: 250px; object-fit: cover; border-radius: 8px; background: #eef1f5; }

/* Workflows */
.section-intro-row { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 18px; }
.section-intro-row h2 { margin: 0 0 4px; font-size: 17px; }
.section-badge { padding: 6px 10px; border: 1px solid var(--line); border-radius: 999px; background: white; color: var(--muted); font-size: 9px; }
.workflow-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(235px, 1fr)); gap: 14px; }
.workflow-card { display: grid; grid-template-rows: auto auto minmax(46px, 1fr) auto; gap: 12px; min-height: 210px; padding: 18px; border: 1px solid var(--line-soft); border-radius: 13px; background: var(--panel); color: var(--ink); text-decoration: none; transition: border-color .18s ease, transform .18s ease, background .18s ease; }
.workflow-card:hover { border-color: #bfcbea; background: #fbfcff; transform: translateY(-2px); box-shadow: 0 10px 28px rgba(64, 82, 125, .08); }
.workflow-card-top { display: flex; align-items: center; justify-content: space-between; }
.workflow-icon { display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid rgba(116, 151, 255, .25); border-radius: 11px; background: var(--accent-soft); color: #91afff; font-size: 13px; font-weight: 800; }
.workflow-category { padding: 4px 8px; border-radius: 999px; background: #f0f2f6; color: #6f7887; font-size: 9px; }
.workflow-card > strong { font-size: 14px; }
.workflow-card > p { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.65; }
.workflow-card-action { color: #7f9ff3; font-size: 10px; }
.workflow-detail-layout { display: grid; grid-template-columns: minmax(340px, .9fr) minmax(420px, 1.1fr); gap: 18px; align-items: start; }
.workflow-config-card { padding: 20px; }
.workflow-detail-head { display: flex; align-items: flex-start; gap: 13px; padding-bottom: 18px; border-bottom: 1px solid var(--line-soft); }
.workflow-detail-head h2 { margin: 2px 0 5px; font-size: 16px; }
.workflow-detail-head p { margin: 0; color: var(--muted); font-size: 10px; line-height: 1.55; }
.workflow-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; padding-top: 18px; }
.workflow-field { display: grid; align-content: start; gap: 6px; }
.workflow-field:has(textarea), .workflow-field:has(input[type="file"]) { grid-column: 1 / -1; }
.field-label { color: #4f5968; font-size: 11px; }
.field-hint { color: #8e96a4; font-size: 9px; }
.workflow-field textarea { width: 100%; min-height: 80px; resize: vertical; line-height: 1.5; }
.workflow-field input[type="file"] { min-height: 72px; padding: 20px 12px; border-style: dashed; color: var(--muted); font-size: 10px; }
.workflow-field.is-dragover input[type="file"] { border-color: var(--accent); background: var(--accent-soft); box-shadow: 0 0 0 3px rgba(65,109,214,.12); }
.workflow-form-footer { display: flex; align-items: center; justify-content: space-between; gap: 15px; grid-column: 1 / -1; padding-top: 5px; }
.workflow-form-footer .chat-status { flex: 1; }
.workflow-output-column { display: grid; gap: 14px; }
.workflow-result-card, .workflow-runs-card { padding: 18px; }
.workflow-output-empty { display: grid; place-items: center; min-height: 250px; color: #8e96a4; text-align: center; font-size: 11px; }
.workflow-result { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 16px; }
.result-item { min-width: 0; padding: 12px; border: 1px solid var(--line-soft); border-radius: 9px; background: #fbfcfe; }
.result-item.wide { grid-column: 1 / -1; }
.result-label { display: block; margin-bottom: 7px; color: #7c8594; font-size: 9px; }
.result-value { white-space: pre-wrap; overflow-wrap: anywhere; color: #364152; font-size: 11px; line-height: 1.65; }
.result-value ul { display: grid; gap: 5px; margin: 0; padding-left: 16px; }
.result-score { display: block; margin-bottom: 7px; font-size: 14px; }
.result-score-bar { display: block; height: 4px; overflow: hidden; border-radius: 999px; background: #e5e8ef; }
.result-score-bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #5d88ff, #7e9fff); }
.submitted-result { margin: 15px 0; color: var(--muted); font-size: 11px; }
.workflow-runs-list { display: grid; margin-top: 12px; }
.workflow-run-item { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 10px 4px; border: 0; border-bottom: 1px solid var(--line-soft); background: transparent; color: #4f5968; text-align: left; cursor: pointer; }
.workflow-run-item:hover { color: #315fc8; }
.workflow-run-item > span:first-child { display: grid; gap: 3px; font-size: 10px; }
.workflow-run-item small { color: #646a77; font-size: 8px; }
.status-dot { font-size: 9px; }
.status-dot.completed { color: var(--success); }
.status-dot.failed { color: var(--danger); }
.status-dot.running, .status-dot.submitted { color: #8eabf7; }
.required-mark { color: var(--danger); }

/* Task center */
.task-filter-card { display: grid; grid-template-columns: repeat(3, minmax(130px, .7fr)) minmax(220px, 1.5fr) auto; gap: 10px; align-items: end; padding: 14px; border: 1px solid var(--line-soft); border-radius: 12px; background: var(--panel); }
.task-filter-card label { display: grid; gap: 5px; color: var(--muted); font-size: 9px; }
.task-filter-card input, .task-filter-card select { min-height: 36px; font-size: 10px; }
.task-summary-row { display: flex; align-items: center; justify-content: space-between; gap: 15px; min-height: 45px; }
.live-hint { display: inline-flex; align-items: center; gap: 6px; color: #778cbf; font-size: 9px; }
.live-hint i { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px rgba(93, 136, 255, .12); animation: pulse 1.5s infinite; }
@keyframes pulse { 50% { opacity: .45; } }
.task-table-card { overflow: hidden; }
.task-table-head, .history-task-row { display: grid; grid-template-columns: minmax(220px, 2fr) minmax(130px, 1fr) 100px 145px 140px; gap: 14px; align-items: center; }
.task-table-head { min-height: 40px; padding: 0 15px; border-bottom: 1px solid var(--line-soft); background: #f8f9fc; color: #7d8593; font-size: 9px; }
.history-task-row { position: relative; min-height: 82px; padding: 12px 15px; border-bottom: 1px solid var(--line-soft); }
.history-task-row:last-child { border-bottom: 0; }
.history-task-main, .history-task-model, .history-task-state, .history-task-time { display: grid; gap: 4px; min-width: 0; }
.history-task-main strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; font-weight: 550; }
.history-task-main small, .history-task-model small, .history-task-state small, .history-task-time small { color: #8c95a3; font-size: 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.history-task-model > span, .history-task-time { color: #4f5968; font-size: 10px; }
.history-result { display: flex; align-items: center; gap: 8px; font-size: 9px; }
.history-result img, .history-result video { width: 48px; height: 48px; object-fit: cover; border-radius: 7px; background: #eef1f5; }
.history-result a { color: #86a4f5; text-decoration: none; }
.history-task-error { grid-column: 1 / -1; margin: -5px 0 0; padding-top: 8px; border-top: 1px dashed rgba(255, 112, 125, .18); color: #d97b83; font-size: 9px; }

/* Assets */
.asset-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.asset-toolbar-actions { display: flex; align-items: center; justify-content: flex-end; gap: 10px; }
.asset-select-all { display: inline-flex; align-items: center; gap: 6px; color: var(--muted-strong); font-size: 9px; white-space: nowrap; cursor: pointer; }
.asset-select-all input, .asset-selector input { accent-color: var(--accent); }
.asset-toolbar-actions .ai-ghost:disabled { opacity: .45; cursor: not-allowed; }
.filter-tabs { display: inline-flex; gap: 4px; padding: 4px; border: 1px solid var(--line-soft); border-radius: 10px; background: var(--panel); }
.filter-tabs button { min-height: 31px; padding: 0 13px; border: 0; border-radius: 7px; background: transparent; color: var(--muted); font-size: 10px; cursor: pointer; }
.filter-tabs button.active { background: #edf2ff; color: #315fc8; }
.asset-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px; }
.asset-card { position: relative; display: grid; gap: 10px; padding: 9px; overflow: hidden; border: 1px solid var(--line-soft); border-radius: 12px; background: var(--panel); }
.asset-card.selected { border-color: #9bb5f6; box-shadow: 0 0 0 2px rgba(93, 136, 255, .12); }
.asset-selector { position: absolute; z-index: 2; top: 16px; left: 16px; display: inline-flex; align-items: center; gap: 4px; min-height: 25px; padding: 0 7px; border: 1px solid rgba(255,255,255,.82); border-radius: 7px; background: rgba(255,255,255,.9); color: #4f5968; font-size: 8px; box-shadow: 0 2px 8px rgba(34,45,67,.1); cursor: pointer; backdrop-filter: blur(5px); }
.asset-card > img, .asset-card > video { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 8px; background: #eef1f5; }
.asset-meta { display: grid; gap: 4px; min-width: 0; padding: 0 2px; }
.asset-meta strong, .asset-meta small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.asset-meta strong { color: #465160; font-size: 10px; }
.asset-meta small { color: #8a93a1; font-size: 8px; }
.asset-actions { display: flex; gap: 6px; }
.asset-actions button { flex: 1; min-height: 31px; border: 1px solid var(--line); border-radius: 7px; background: #ffffff; color: var(--muted-strong); font-size: 9px; cursor: pointer; }
.asset-actions button:hover { background: #f1f4f8; color: #315fc8; }
.asset-empty { display: grid; place-items: center; align-content: center; min-height: 380px; color: var(--muted); text-align: center; }
.asset-empty > span { display: grid; place-items: center; width: 54px; height: 54px; border: 1px solid var(--line); border-radius: 16px; background: var(--panel); color: #7892d2; font-size: 20px; }
.asset-empty h2 { margin: 15px 0 3px; color: #4d5766; font-size: 15px; }
.asset-empty p { margin: 0 0 16px; font-size: 10px; }

/* Login state */
.login-required { display: grid; place-items: center; align-content: center; gap: 11px; min-height: 100vh; padding: 30px; text-align: center; }
.login-required h1, .login-required p { margin: 0; }
.login-required h1 { font-size: 22px; }
.login-required p { color: var(--muted); font-size: 12px; }

/* Existing admin console */
.workspace-page { min-height: 100vh; padding: 24px; }
.workspace-wrap { width: min(1120px, 100%); margin: 0 auto; }
.workspace-top { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 22px; }
.workspace-top h1 { margin: 4px 0; }
.workspace-nav { display: flex; flex-wrap: wrap; gap: 8px; }
.workspace-nav a { padding: 9px 12px; border-radius: 9px; color: var(--muted); text-decoration: none; }
.workspace-nav a:hover, .workspace-nav a.active { background: var(--panel-strong); color: #315fc8; }
.workspace-grid { display: grid; grid-template-columns: minmax(300px, 420px) minmax(0, 1fr); gap: 18px; align-items: start; }
.workspace-card { padding: 20px; border: 1px solid var(--line); border-radius: 14px; background: var(--panel); }
.workspace-card h1, .workspace-card h2 { margin: 0 0 14px; }
.generation-form { display: grid; gap: 14px; }
.generation-form label { display: grid; gap: 7px; color: var(--muted); font-size: 11px; }
.generation-form textarea { min-height: 130px; padding: 12px; resize: vertical; }
.admin-wrap { width: min(1380px, 100%); }
.admin-nav { display: flex; gap: 7px; overflow-x: auto; margin-bottom: 16px; padding-bottom: 4px; }
.admin-nav button { flex: 0 0 auto; min-height: 38px; padding: 0 13px; border: 1px solid var(--line); border-radius: 9px; background: var(--panel); color: var(--muted); cursor: pointer; }
.admin-nav button.active { border-color: var(--accent); background: var(--accent); color: white; }
.admin-content { min-height: 520px; overflow: hidden; }
.admin-content h2 { margin-bottom: 18px; }
.admin-content details { margin: 12px 0; padding: 13px; border: 1px solid var(--line); border-radius: 10px; }
.admin-content summary { cursor: pointer; font-weight: 700; }
.admin-form { display: grid; grid-template-columns: repeat(3, minmax(160px, 1fr)); gap: 12px; align-items: end; margin-top: 14px; }
.admin-form label { display: grid; gap: 6px; color: var(--muted); font-size: 10px; }
.admin-form textarea { width: 100%; min-height: 110px; padding: 10px; resize: vertical; }
.admin-form small { color: var(--muted); line-height: 1.5; }
.admin-wide { grid-column: 1 / -1; }
.admin-metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(155px, 1fr)); gap: 12px; }
.admin-metrics article { display: grid; gap: 7px; padding: 17px; border: 1px solid var(--line); border-radius: 11px; background: #fbfcfe; }
.admin-metrics span, .admin-note, .admin-table small, .workflow-admin-card small, .admin-user-role small { display: block; color: var(--muted); font-size: 10px; }
.admin-metrics strong { font-size: 25px; }
.admin-note { margin: 16px 0; }
.admin-table { width: 100%; margin-top: 15px; overflow-x: auto; }
.admin-table-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 12px; min-width: 760px; padding: 11px; border-bottom: 1px solid var(--line); align-items: center; font-size: 11px; }
.admin-table-head { color: var(--muted); font-size: 9px; font-weight: 700; }
.admin-table-row button { width: max-content; padding: 6px 9px; border: 1px solid var(--line); border-radius: 7px; background: #ffffff; color: var(--ink); cursor: pointer; }
.admin-empty { padding: 24px; color: var(--muted); text-align: center; }
.admin-stack { display: grid; gap: 10px; }
.workflow-admin-card { display: grid; grid-template-columns: minmax(170px, 1.3fr) repeat(2, minmax(150px, 1fr)) auto auto; gap: 12px; align-items: end; padding: 14px; border: 1px solid var(--line); border-radius: 11px; }
.workflow-admin-card label { display: grid; gap: 5px; color: var(--muted); font-size: 10px; }
.admin-filter { display: flex; flex-wrap: wrap; gap: 8px; }
.admin-filter button { padding: 0 14px; border: 1px solid var(--accent); border-radius: 9px; background: var(--accent); color: white; }
.admin-report-grid, .admin-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.admin-user-role { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--line); }

@media (max-width: 1100px) {
  .media-layout { grid-template-columns: minmax(0, 1fr) 300px; }
  .task-filter-card { grid-template-columns: repeat(3, 1fr); }
  .task-search-field { grid-column: span 2; }
  .task-table-head, .history-task-row { grid-template-columns: minmax(180px, 2fr) minmax(120px, 1fr) 90px 120px 110px; }
}

@media (max-width: 900px) {
  .ai-workspace-shell { grid-template-columns: minmax(0, 1fr); }
  .workspace-sidebar { position: fixed; left: 0; top: 0; width: 252px; transform: translateX(-100%); transition: transform .2s ease; }
  .sidebar-open .workspace-sidebar { transform: translateX(0); }
  .sidebar-overlay { position: fixed; inset: 0; z-index: 25; border: 0; background: rgba(0, 0, 0, .55); }
  .sidebar-open .sidebar-overlay { display: block; }
  .mobile-menu-button { display: grid; place-items: center; flex: 0 0 auto; }
  .workspace-header { padding-inline: 16px; }
  .workspace-content { padding: 18px 16px 32px; }
  .chat-layout { grid-template-columns: minmax(0, 1fr); }
  .chat-history-panel { display: none; }
  .media-layout, .workflow-detail-layout { grid-template-columns: 1fr; }
  .media-builder-card { min-height: auto; }
  .media-task-panel { max-height: none; }
  .task-filter-card { grid-template-columns: repeat(2, 1fr); }
  .task-search-field { grid-column: span 1; }
  .task-table-head { display: none; }
  .history-task-list { display: grid; gap: 10px; padding: 10px; }
  .history-task-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; border: 1px solid var(--line-soft); border-radius: 10px; }
  .history-task-main { grid-column: 1 / -1; }
  .history-result { justify-content: flex-end; }
  .history-task-error { margin: 0; }
  .admin-form, .admin-report-grid, .admin-columns, .workflow-admin-card { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
  .workspace-header { min-height: 70px; padding-block: 12px; }
  .workspace-heading h1 { font-size: 18px; }
  .workspace-subtitle { display: none; }
  .chat-workspace-main .workspace-header { height: 66px; min-height: 66px; }
  .chat-layout { height: calc(100vh - 66px); }
  .empty-chat { padding-bottom: 120px; }
  .empty-chat h2 { font-size: 23px; }
  .prompt-suggestions { display: grid; }
  .message-list { padding: 20px 14px 35px; }
  .message { max-width: 92%; }
  .composer { width: calc(100% - 20px); margin-bottom: 10px; }
  .composer-model select { max-width: 135px; }
  .message-count, .composer > .model-price-line { display: none; }
  .media-form { grid-template-rows: auto auto auto; }
  .media-parameter-bar { display: grid; grid-template-columns: 1fr 1fr; }
  .media-parameter-bar label, .dynamic-fields label { min-width: 0; }
  .media-parameter-bar select, .media-parameter-bar input, .dynamic-fields select, .dynamic-fields input { min-width: 0; width: 100%; }
  .media-prompt-surface { padding: 17px; }
  .generation-footer { align-items: flex-end; }
  .workflow-form, .workflow-result { grid-template-columns: 1fr; }
  .workflow-field:has(textarea), .workflow-field:has(input[type="file"]), .result-item.wide { grid-column: auto; }
  .task-filter-card { grid-template-columns: 1fr; }
  .history-task-row { grid-template-columns: 1fr; }
  .history-task-main, .history-task-error { grid-column: auto; }
  .history-result { justify-content: flex-start; }
  .asset-toolbar { align-items: flex-start; flex-direction: column; }
  .asset-toolbar-actions { width: 100%; justify-content: flex-start; flex-wrap: wrap; }
  .asset-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
  .workspace-page { padding: 12px; }
  .workspace-top, .workspace-grid { display: grid; grid-template-columns: 1fr; }
}