/* 全站共享外观。节点操作面板与主页面使用同一套主题。 */
/* 复刻弹窗：沿用全站主题，模型、说明、操作分区。 */
body .replicate-mode-dialog { background: var(--surface); border-color: var(--line-strong); color: var(--text); }
body .replicate-mode-dialog.rm-layout { width: min(520px, 100%); padding: 28px; border-radius: 18px; box-sizing: border-box; max-height: calc(100dvh - 40px); overflow-y: auto; }
.rm-layout .rm-header { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.rm-layout .rm-header h3 { margin: 0; font-size: 21px; font-weight: 650; letter-spacing: -.3px; }
.rm-layout .rm-close { display: grid; place-items: center; flex: 0 0 32px; width: 32px; height: 32px; padding: 0; color: var(--muted); background: transparent; border: 0; border-radius: 8px; font-size: 24px; cursor: pointer; }
.rm-layout .rm-close:hover { background: var(--surface-2); color: var(--text); }
.rm-layout .rm-file { margin: 10px 0 26px; color: var(--muted); font-size: 13px; line-height: 1.6; white-space: normal; overflow-wrap: anywhere; }
.rm-layout .rm-model-field { display: grid; gap: 10px; min-width: 0; margin: 0 0 20px; font-size: 13px; font-weight: 500; color: var(--text); }
.rm-layout .rm-model-field select { box-sizing: border-box; display: block; width: 100%; min-width: 0; height: 46px; padding: 0 36px 0 14px; border: 1px solid var(--line-strong); border-radius: 10px; background-color: var(--surface-2); color: var(--text); font: inherit; font-weight: 400; text-overflow: ellipsis; cursor: pointer; color-scheme: dark; }
html[data-theme='light'] .rm-layout .rm-model-field select { color-scheme: light; }
.rm-layout .rm-model-field select:focus-visible { outline: 2px solid var(--muted); outline-offset: 3px; }
.rm-layout .rm-info { display: grid; gap: 8px; padding: 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-2); }
.rm-layout .rm-info strong { font-size: 13px; font-weight: 500; }
.rm-layout .rm-info .rm-desc { color: var(--muted); font-size: 13px; line-height: 1.7; }
.rm-layout .rm-info small { color: var(--faint); font-size: 12px; line-height: 1.6; }
.rm-layout .rm-actions { display: flex; justify-content: flex-end; gap: 12px; margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--line); }
body .rm-layout .rm-actions > button { display: inline-flex; align-items: center; justify-content: center; width: auto; min-height: 42px; margin: 0; padding: 10px 20px; border-radius: 10px; font: inherit; font-size: 13px; transition: background .15s ease; }
body .rm-layout .rm-actions .rm-cancel { background: transparent; border: 1px solid var(--line-strong); color: var(--muted); }
body .rm-layout .rm-actions .rm-cancel:hover { background: var(--surface-2); color: var(--text); }
body .rm-layout .rm-actions .rm-primary { background: var(--accent); border: 1px solid var(--accent); color: var(--on-accent); }
body .rm-layout .rm-actions .rm-primary .rm-title { font-size: 13px; font-weight: 600; color: inherit; }
body .rm-layout .rm-actions .rm-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); transform: none; }
body .rm-layout .rm-actions .rm-primary:disabled { opacity: .45; cursor: wait; }
@media (max-width: 560px) { body .replicate-mode-dialog.rm-layout { padding: 22px; } .rm-layout .rm-actions > button { flex: 1; } }
:root, html[data-theme="dark"] {
  --bg: #080808;
  --nav-bg: #171717;
  --composer-bg: #212121;
  --surface: #181818;
  --surface-2: #242424;
  --surface-3: #303030;
  --line: rgba(255, 255, 255, .09);
  --line-strong: rgba(255, 255, 255, .18);
  --text: #f5f5f5;
  --muted: #b0b0b0;
  --faint: #858585;
  --accent: #ededed;
  --on-accent: #161616;
  --accent-hover: #fff;
  --send-bg: linear-gradient(145deg, #f0f0f0, #c8c8c8);
  --yellow: var(--accent);
  --violet: #bdbdbd;
  --blue: #b8b8b8;
  --orange: #c0c0c0;
  --accent-gradient: linear-gradient(120deg, #ededed, #d5d5d5);
}
html[data-theme="light"] {
  --bg: #f7f7f7;
  --nav-bg: #f0f0f0;
  --composer-bg: #fff;
  --surface: #fff;
  --surface-2: #efefef;
  --surface-3: #e5e5e5;
  --line: rgba(0, 0, 0, .08);
  --line-strong: rgba(0, 0, 0, .16);
  --text: #222;
  --muted: #626262;
  --faint: #808080;
  --accent: #292929;
  --on-accent: #fff;
  --accent-hover: #111;
  --send-bg: linear-gradient(145deg, #454545, #222);
  --violet: #747474;
  --blue: #666;
  --orange: #6b6b6b;
  --accent-gradient: linear-gradient(120deg, #333, #222);
}
body, body.home-page, body.agent-workspace { color: var(--text); background: var(--bg); --yellow: var(--accent); }
body .app-shell, body.home-page .app-shell, body.inspiration-body .app-shell { background: var(--bg); }
body .side-rail, body.home-member .side-rail { background: var(--nav-bg); border-color: var(--line); }
.brand-name, body.home-member .brand-name, .brand-name span, body.home-member .brand-name span, .guest-brand { color: var(--text); }
.guest-nav { background: var(--nav-bg); border-color: var(--line); }
.guest-signup:hover { background: #fff; }
.brand-symbol i, body.home-member .brand-symbol i { background: var(--text); }
.brand-symbol i:nth-child(2), body.home-member .brand-symbol i:nth-child(2) { background: var(--muted); }
.brand-symbol i:nth-child(3), body.home-member .brand-symbol i:nth-child(3) { background: var(--faint); }
.rail-item, body.home-member .rail-item { color: var(--muted); }
.rail-item.active, .rail-item:hover, body.home-member .rail-item.active, body.home-member .rail-item:hover {
  color: var(--text); background: var(--surface-2); box-shadow: none;
}
.side-rail .rail-footer, body.home-member .rail-footer { border-color: var(--line); }
.avatar-button, .avatar-small, body.home-page .avatar-button, body.home-page .avatar-small {
  color: var(--text); background: var(--surface-3); border: 1px solid var(--line-strong);
}
.credit-pill, .account-pill { color: var(--muted); background: var(--surface); border-color: var(--line); }
.credit-dot, body.home-page .credit-dot { background: var(--muted); }
.topbar, .inspiration-main .topbar, .inspiration-header { background: var(--bg); border-color: var(--line); }
.breadcrumbs, body.home-member .breadcrumbs { color: var(--faint); }
.eyebrow, .section-kicker, .modal-kicker, .new-badge,
body.home-member .eyebrow, body.home-member .section-kicker { color: var(--muted); }
.new-badge { color: var(--muted) !important; }
.primary-button, body.home-page .primary-button,
.agent-workspace .primary-button, .agent-workspace .canvas-shot-actions button {
  color: var(--on-accent); background: var(--accent); border: 1px solid var(--line-strong); box-shadow: none;
}
.primary-button:hover, body.home-page .primary-button:hover, .agent-workspace .primary-button:hover {
  color: var(--on-accent); background: var(--accent-hover); box-shadow: 0 6px 20px rgba(0,0,0,.15);
}
.secondary-button:hover, .text-button:hover { color: var(--text); background: var(--surface-2); border-color: var(--line-strong); }
:focus-visible, body.home-page :focus-visible { outline-color: var(--muted); }

/* 面板、输入与选择状态共享灰阶，避免各页面重新引入色偏。 */
:is(.skill-card, .project-card, .usage-card, .studio-workspace, .aside-card, .aside-tip,
  .account-panel, .account-state-card, .account-login-card, .summary-stat, .skill-library-summary > div,
  .library-preset-section, .asset-card, .modal, .skill-drawer, .skill-detail-panel),
body.home-page :is(.scenario-card, .project-card, .usage-card) {
  color: var(--text); background: var(--surface); border-color: var(--line);
}
.field input, .field textarea, .field select, .account-form input, .account-form textarea, .account-form select,
.search-box, .upload-form-row input, .upload-form-row select, .admin-user-row select {
  color: var(--text); background: var(--surface-2); border-color: var(--line-strong);
}
.modal::backdrop { background: rgba(0,0,0,.65); }
.model-connection-status, .prompt-skill-chip { color: var(--muted); background: var(--surface-2); border-color: var(--line); }
.model-type-tab.active, .model-type-tab:hover, .model-option.selected, .model-option:hover,
.choice-card.selected, .choice-card:hover, .library-tab.active, .library-tab:hover {
  color: var(--text); background: var(--surface-3); border-color: var(--line-strong);
}
.model-mark, .choice-card-icon, .empty-library-icon, .drop-zone-icon, .stat-icon,
body.home-page .scenario-icon { color: var(--muted); background: var(--surface-3); border-color: var(--line); }
.prompt-skill-menu, .toast { color: var(--text); background: var(--surface-2); border-color: var(--line-strong); }
.prompt-skill-menu button:hover, .prompt-skill-menu button.active { background: var(--surface-3); }
.library-tip { color: var(--muted); background: var(--surface); border-color: var(--line); }
.library-tip > span { color: var(--muted); }
.yellow-stat, .blue-stat { color: var(--muted); background: var(--surface-3); }
.usage-ledger, .output-notice { color: var(--text); background: var(--surface); border-color: var(--line); }
.output-notice > span { color: var(--muted); }
.skill-library-card:hover { border-color: var(--line-strong); }
.detail-tags span { color: var(--muted); background: var(--surface-3); }
.library-empty, .upload-dropzone { background: var(--surface); border-color: var(--line-strong); }
.upload-dropzone:hover { background: var(--surface-2); }
body.home-page :is(.new-badge, .summary-icon, .empty-icon, .strip-icon) { color: var(--muted) !important; }
body.home-page .empty-icon { background: var(--surface-2); border-color: var(--line-strong); }
body.home-page .bottom-strip { background: var(--surface); border-color: var(--line); }
body.home-page .guest-gallery-heading > span { color: var(--text); }
body.home-page .guest-gallery-heading p, body.home-page .guest-gallery-card { color: var(--muted); }
body.home-page .guest-gallery-card:hover .guest-gallery-art { border-color: var(--line-strong); }
body.home-member .member-hero-copy p { color: var(--muted); }
body.home-member .scenario-strip::before { color: var(--text); }

/* 首页与画布对话框采用相同面板颜色，焦点仅增强外层细边框。 */
body.home-page .creator-card, body.home-guest .creator-card, .agent-workspace .agent-composer {
  color: var(--text); background: var(--composer-bg); border: 1px solid var(--line-strong);
  box-shadow: 0 16px 48px rgba(0,0,0,.12);
}
body.home-page .creator-card:focus-within, .agent-workspace .agent-composer:focus-within {
  background: var(--composer-bg); border-color: var(--faint);
}
body.home-page .creator-card textarea, .agent-workspace .agent-composer textarea {
  color: var(--text); resize: none;
}
body.home-page .creator-card textarea:focus-visible, .agent-workspace .agent-composer textarea:focus-visible {
  outline: none !important; box-shadow: none !important;
}
body.home-page .creator-card textarea::placeholder, .agent-workspace .agent-composer textarea::placeholder { color: var(--faint); }
body.home-page .creator-label, body.home-page .prompt-label { color: var(--text); }
body.home-page .prompt-footer { border-color: var(--line); }
body.home-page .tool-button { color: var(--muted); background: var(--surface-3); border-color: var(--line); }
body.home-page .tool-button:hover, body.home-page .tool-button.selected { color: var(--text); background: var(--surface-3); border-color: var(--line-strong); }
body.home-page .voice-button, .agent-workspace #agentVoice {
  display: grid; place-items: center; flex: 0 0 auto; width: 42px; height: 42px; padding: 0;
  color: var(--muted); background: transparent; border: 1px solid var(--line-strong); border-radius: 50%; box-shadow: none;
}
body.home-page .voice-button svg, .agent-workspace #agentVoice svg { display: block; width: 19px; height: 19px; }
body.home-page .voice-button:hover, body.home-page .voice-button.recording,
.agent-workspace #agentVoice:hover, .agent-workspace #agentVoice.recording { color: var(--text); background: var(--surface-3); border-color: var(--faint); }
body.home-page #startButton, .agent-workspace .agent-tools #agentSend {
  display: grid; place-items: center; flex: 0 0 auto; width: 43px; min-width: 43px; height: 43px; padding: 0; margin-left: 0;
  color: var(--on-accent); background: var(--send-bg); border: 1px solid var(--line-strong); border-radius: 50%;
  box-shadow: 0 4px 12px rgba(0,0,0,.15);
}
body.home-page #startButton:hover, .agent-workspace .agent-tools #agentSend:hover { color: var(--on-accent); background: var(--accent-hover); transform: translateY(-1px); }
body.home-page #startButton svg, .agent-workspace #agentSend svg { display: block; width: 21px; height: 21px; }
body.home-page .prompt-actions { align-items: center; gap: 10px; }
body.home-page #homeModelLabel { max-width: 145px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* 画布、Agent 和浮动工具。 */
.canvas-stage { background-color: var(--bg); background-image: radial-gradient(var(--line) .7px, transparent .7px); }
.canvas-empty-hint, .canvas-empty-hint > span, .canvas-empty-hint > p { color: var(--faint); }
.canvas-footer, .canvas-timeline { color: var(--faint); background: var(--bg); }
.canvas-node, .canvas-timeline-shot { color: var(--text); background: var(--surface); border-color: var(--line-strong); }
.canvas-node p, .canvas-node-media small { color: var(--muted); }
.canvas-node-media { color: var(--muted); background: var(--surface-2); }
.agent-workspace .canvas-agent { color: var(--text); background: var(--nav-bg); border-color: var(--line); }
.agent-workspace .agent-head { border-color: var(--line); }
.agent-workspace .agent-head strong, .agent-workspace .agent-empty b, .agent-workspace .agent-launcher > summary { color: var(--text); }
.agent-workspace .agent-head small, .agent-workspace .agent-empty p, .agent-empty > small { color: var(--muted); }
.agent-workspace .agent-logo, .agent-workspace .agent-orbit { color: var(--muted); background: var(--surface-2); border-color: var(--line-strong); }
.agent-workspace .agent-methods button, .agent-workspace .agent-methods button:nth-child(2) { color: var(--text); background: var(--surface-2); border-color: var(--line); }
.agent-workspace .agent-methods button:hover, .agent-workspace .agent-methods button[aria-pressed="true"] { background: var(--surface-3); border-color: var(--line-strong); }
.agent-workspace .agent-composer { border-radius: 18px; }
.agent-workspace .agent-tools { gap: 6px; }
.agent-workspace .agent-tools button { color: var(--muted); }
.agent-workspace .agent-tools button:hover, .agent-workspace .agent-tools button.recording { color: var(--text); background: var(--surface-3); border-color: var(--line-strong); }
.agent-workspace .agent-tools #agentModel { display: inline-flex; align-items: center; gap: 5px; max-width: 154px; padding: 0 9px; color: var(--muted); background: var(--surface-3); border: 1px solid var(--line); border-radius: 999px; }
.agent-workspace .agent-tools #agentModel span { display: block; min-width: 0; max-width: 112px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin: 0; font-size: 10px; }
.agent-workspace #agentVoice, .agent-workspace .agent-tools #agentSend { width: 34px; min-width: 34px; height: 34px; }
.agent-workspace #agentVoice svg, .agent-workspace #agentSend svg { width: 17px; height: 17px; }
.agent-workspace #agentVoice { margin-left: auto; }
.agent-workspace .agent-to-output { color: var(--text); background: var(--surface-3); border-color: var(--line-strong); }
.agent-workspace .agent-to-output > span { color: var(--muted); }
.agent-workspace .agent-to-output:hover { background: var(--surface-2); border-color: var(--faint); }
.agent-workspace :is(.agent-popover, .agent-slash-menu, .agent-reopen, .production-plan-modal),
:is(.dock, .canvas-zoom, .dock-menu, .dock-pop, .dock-shortcuts, .canvas-context, .canvas-context-menu, .node-tool-pop, .gen-composer, .gen-pop, .canvas-quick-workspace) {
  color: var(--text); background: var(--surface-2); border-color: var(--line-strong);
}
.agent-workspace .agent-popover button, .agent-workspace .agent-slash-menu button { color: var(--text); }
.agent-workspace .agent-popover button:hover, .agent-workspace .agent-popover button.active,
.agent-workspace .agent-slash-menu button.active, .agent-workspace .agent-slash-menu button:hover { color: var(--text); background: var(--surface-3); }
.agent-workspace .agent-model-tabs button { color: var(--muted); background: var(--surface); }
.agent-workspace .agent-model-tabs button.active { color: var(--text); background: var(--surface-3); }
.agent-workspace .agent-model-option-copy { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; gap: 3px; }
.agent-workspace .agent-model-option-copy strong { color: var(--text); overflow: hidden; max-width: 100%; text-overflow: ellipsis; white-space: nowrap; }
.agent-workspace .agent-model-option-copy small { color: var(--faint); overflow: hidden; max-width: 100%; text-overflow: ellipsis; white-space: nowrap; font-size: 9px; }
.agent-workspace .agent-message { color: var(--text); background: var(--surface); border-color: var(--line); }
.agent-workspace .agent-message.from-user, .agent-workspace .agent-task-chip { color: var(--text); background: var(--surface-3); border-color: var(--line-strong); }
.agent-workspace .agent-message-label { color: var(--muted); }
.agent-workspace .canvas-node.selected, .agent-workspace .canvas-node:hover { border-color: var(--faint); box-shadow: 0 0 0 2px var(--line), 0 12px 30px rgba(0,0,0,.2); }
#canvasLayout.agent-dock-layout[data-agent-dock] .agent-dock-context { background: var(--nav-bg); border-color: var(--line); }
#canvasLayout.agent-dock-layout[data-agent-dock] #agentDockSelection { color: var(--text); }
#canvasLayout.agent-dock-layout[data-agent-dock] #agentDockSharedNote { color: var(--muted); }
#canvasLayout.agent-dock-layout[data-agent-dock] :is(.agent-dock-controls, .agent-dock-context) button { color: var(--muted); background: var(--surface-2); border-color: var(--line); }
#canvasLayout.agent-dock-layout[data-agent-dock] :is(.agent-dock-controls, .agent-dock-context) button:not(:disabled):hover,
#canvasLayout.agent-dock-layout[data-agent-dock] .agent-dock-controls button[aria-pressed='true'] { color: var(--text); background: var(--surface-3); border-color: var(--line-strong); }
.canvas-bottom-controls .canvas-toolbar { background: transparent; }
.canvas-bottom-controls :is(.dock, .canvas-zoom) { background: var(--surface-2); border-color: var(--line-strong); box-shadow: 0 8px 28px rgba(0,0,0,.15); }
.dock-btn, .canvas-toolbar .canvas-zoom button, .canvas-toolbar .canvas-zoom #zoomLabel { color: var(--muted); }
.dock-btn:hover, .dock-btn.is-active, .canvas-toolbar .canvas-zoom button:hover { color: var(--text); background: var(--surface-3); }
.dock-add { color: var(--on-accent); background: var(--accent); }
.canvas-toolbar .canvas-zoom .canvas-toolbar-divider { background: var(--line-strong); }
:is(.dock-menu, .dock-pop, .dock-shortcuts, .canvas-context, .canvas-context-menu, .node-tool-pop, .gen-composer, .gen-pop) button { color: var(--text); }
:is(.dock-menu, .dock-pop, .dock-shortcuts, .gen-pop) small, .gen-pop-title, .gen-cost, .gen-status { color: var(--muted); }
.gen-composer textarea, .gen-pill, .gen-select { color: var(--text); background: var(--surface-3); border-color: var(--line-strong); }
.gen-send { color: var(--on-accent); background: var(--accent); }

/* 外观卡片跟随同一色板；公开展示页保留黑底粒子舞台。 */
.appearance-panel { margin-top: 14px; scroll-margin-top: 90px; }
.appearance-hint { color: var(--faint); font-size: 11px; }
.appearance-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.appearance-option { display: grid; grid-template-columns: 110px 1fr; grid-template-rows: auto auto; gap: 4px 16px; align-items: center; padding: 12px; color: var(--text); background: var(--surface-2); border: 1px solid var(--line-strong); border-radius: 14px; text-align: left; }
.appearance-option:hover, .appearance-option[aria-pressed="true"] { border-color: var(--faint); box-shadow: 0 0 0 2px var(--line); }
.appearance-option strong { align-self: end; font-size: 13px; }
.appearance-option small { grid-column: 2; align-self: start; color: var(--muted); font-size: 10px; }
.appearance-preview { position: relative; display: block; grid-row: 1 / 3; width: 110px; height: 67px; border-radius: 9px; overflow: hidden; border: 1px solid rgba(128,128,128,.22); }
.appearance-preview i { position: absolute; inset: 0 auto 0 0; width: 24%; }
.appearance-preview b { position: absolute; left: 32%; top: 22%; width: 55%; height: 14%; border-radius: 9px; }
.appearance-preview em { position: absolute; left: 32%; bottom: 18%; width: 55%; height: 31%; border-radius: 7px; }
.dark-preview { background: #080808; }.dark-preview i { background: #171717; }.dark-preview b { background: #d5d5d5; }.dark-preview em { background: #303030; }
.light-preview { background: #f7f7f7; }.light-preview i { background: #e8e8e8; }.light-preview b { background: #555; }.light-preview em { background: #dedede; }
html[data-theme="light"] body.home-guest {
  --bg: #080808; --composer-bg: #212121; --surface: #181818; --surface-2: #242424; --surface-3: #303030;
  --text: #f5f5f5; --muted: #b0b0b0; --faint: #858585; --accent: #ededed; --on-accent: #161616;
  --line: rgba(255,255,255,.09); --line-strong: rgba(255,255,255,.18); --accent-hover: #fff; --send-bg: linear-gradient(145deg,#f0f0f0,#c8c8c8);
}
html[data-theme="light"] .canvas-node { box-shadow: 0 8px 24px rgba(0,0,0,.1); }
html[data-theme="light"] .agent-workspace .agent-head > button { color: var(--muted); background: var(--surface-2); }
@media (max-width: 680px) {
  .appearance-options { grid-template-columns: 1fr; }
  .appearance-hint { display: none; }
  .agent-workspace .agent-tools { flex-wrap: wrap; }
  .agent-workspace #agentVoice { margin-left: auto; }
}

/* lingji AI: blue-grey to warm taupe cards, with small coloured accents. */
:root, html[data-theme="dark"] {
  --card-gradient: linear-gradient(135deg, #35414a 0%, #505153 48%, #715c50 100%);
  --card-panel-gradient: linear-gradient(135deg, #242d34 0%, #303235 48%, #463a33 100%);
  --card-border: rgba(204, 193, 182, .2);
  --card-copy: #d3ccc7;
}
html[data-theme="light"] {
  --card-gradient: linear-gradient(135deg, #d6dfe5 0%, #e2dedb 48%, #e8d6c6 100%);
  --card-panel-gradient: linear-gradient(135deg, #edf1f4 0%, #f3efeb 48%, #f2e7de 100%);
  --card-border: rgba(98, 83, 72, .18);
  --card-copy: #695f57;
}
body :is(.skill-card, .skill-library-card, .project-card, .asset-card, .product-card,
  .product-library-item, .library-preset-card, .output-card, .usage-card, .aside-card,
  .aside-tip, .account-panel, .account-state-card, .account-login-card, .summary-stat,
  .output-stat, .library-tip, .output-notice, .usage-ledger, .bottom-strip)[class],
body .skill-library-summary > div {
  background: var(--card-panel-gradient);
  border-color: var(--card-border);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.035);
}
body.home-page .scenario-card {
  background: var(--card-gradient);
  border-color: var(--card-border);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}
body :is(.skill-library-art, .skill-art, .drawer-skill-art, .project-preview,
  .output-thumb, .asset-preview, .product-card-image)[class] {
  background: var(--card-gradient);
  color: var(--text);
}
body :is(.skill-library-card, .project-card, .asset-card, .product-card,
  .library-preset-card, .output-card):hover,
body.home-page .scenario-card:hover {
  border-color: var(--line-strong);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 8px 24px rgba(0,0,0,.12);
}
body .skill-library-card-body { background: transparent; }
body .skill-library-art :is(span, b), body .output-thumb > span { color: var(--text); }
body .preview-user-project .preview-product { color: var(--text); }
body .preview-user-project .preview-slice {
  opacity: .18; background: linear-gradient(150deg, #c0ced8, #bf9b82);
}
/* Gallery photography keeps its own image and crop in every appearance theme. */
body.home-page .guest-gallery-art {
  background-color: var(--surface);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.04);
}
body.home-page .scenario-text small { color: var(--card-copy); }
body.home-page .scenario-icon.tone-orange { color: #ffb18e; background: rgba(255,153,102,.17); }
body.home-page .scenario-icon.tone-blue { color: #a6caff; background: rgba(112,163,246,.2); }
body.home-page .scenario-icon.tone-violet { color: #d1b5ff; background: rgba(178,139,255,.2); }
body.home-page .scenario-icon.tone-yellow { color: #f2d28b; background: rgba(242,201,104,.17); }
html[data-theme="light"] body.home-member .scenario-icon.tone-orange { color: #99451c; background: #f7c4a7; }
html[data-theme="light"] body.home-member .scenario-icon.tone-blue { color: #2d5799; background: #bed4f3; }
html[data-theme="light"] body.home-member .scenario-icon.tone-violet { color: #6b449e; background: #ddc9f4; }
html[data-theme="light"] body.home-member .scenario-icon.tone-yellow { color: #7b5c15; background: #f0dfb1; }
body .brand-name { letter-spacing: .015em; }
body .brand-name span { margin-left: 3px; }
html[data-theme="light"] body.home-guest {
  --card-gradient: linear-gradient(135deg, #35414a 0%, #505153 48%, #715c50 100%);
  --card-panel-gradient: linear-gradient(135deg, #242d34 0%, #303235 48%, #463a33 100%);
  --card-border: rgba(204,193,182,.2);
  --card-copy: #d3ccc7;
}

/* Plain gradient covers follow the reference, without the old category artwork. */
body :is(.skill-library-art, .skill-art)::before,
body :is(.skill-library-art, .skill-art)::after { content: none; display: none; }

/* Approved workspace appearance, shared across every product page. */
/* Reference sampled from the user's screenshot: neutral charcoal, restrained green accents. */
body{
  --bg:#191b1a;--nav-bg:#232624;--composer-bg:#222523;
  --surface:#1e211f;--surface-2:#262a27;--surface-3:#343a36;
  --line:rgba(167,176,169,.12);--line-strong:rgba(167,176,169,.24);
  --text:#dadcd9;--muted:#949d97;--faint:#778079;
  --accent:#4d9c62;--on-accent:#132019;--accent-hover:#56a66b;
  --accent-gradient:linear-gradient(#4d9c62,#4d9c62);
  --send-bg:var(--accent-gradient);--yellow:var(--accent);
  --card-panel-gradient:linear-gradient(135deg,#222523 0%,#272b28 100%);
  --card-gradient:linear-gradient(135deg,#252a26 0%,#2b302c 100%);
  --card-border:rgba(167,176,169,.17);--card-copy:#bbc1bc;
}
html[data-theme="light"] body{
  --bg:#f3f6f2;--nav-bg:#eaf0e8;--composer-bg:#fff;
  --surface:#fff;--surface-2:#edf3ed;--surface-3:#dce8de;
  --line:rgba(43,78,54,.1);--line-strong:rgba(43,78,54,.22);
  --text:#243127;--muted:#566b5c;--faint:#6e8174;
  --accent:#397a52;--on-accent:#fff;--accent-hover:#2c6743;
  --accent-gradient:linear-gradient(145deg,#41855b,#326f49);
  --card-panel-gradient:linear-gradient(135deg,#edf3ed 0%,#e3ede4 100%);
  --card-gradient:linear-gradient(135deg,#e2ece3 0%,#d6e4d9 100%);
  --card-border:rgba(43,78,54,.16);--card-copy:#536b59;
}
body.home-page .home-start-actions button>span{color:var(--muted)}
body.home-page .side-rail .rail-item.active,body.library-page .side-rail .rail-item.active{background:var(--surface-3);color:var(--text)}
body.home-page .pulse-dot{background:var(--accent);box-shadow:0 0 0 5px rgba(77,156,98,.09)}
body.library-page .library-tab.active,.library-page .collection-tabs button[aria-selected="true"]{background:var(--surface-3);color:var(--text);border-color:var(--line-strong)}
body :is(button,a):focus-visible{outline:2px solid var(--accent);outline-offset:3px}

html:not([data-theme="light"]) body .side-rail .rail-item.active{background:#464c48}

/* Neutral translucent controls: restrained highlights, readable labels, no green fill. */
body{
  --button-glass:linear-gradient(180deg,rgba(60,65,61,.8),rgba(39,43,40,.9));
  --button-glass-hover:linear-gradient(180deg,rgba(69,74,70,.88),rgba(46,50,47,.94));
  --button-glass-border:rgba(204,213,206,.2);
  --button-glass-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 3px 10px rgba(0,0,0,.18);
}
html[data-theme="light"] body{
  --button-glass:linear-gradient(180deg,rgba(255,255,255,.88),rgba(230,236,230,.88));
  --button-glass-hover:linear-gradient(180deg,rgba(255,255,255,.96),rgba(224,232,225,.96));
  --button-glass-border:rgba(45,60,49,.2);
  --button-glass-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 3px 10px rgba(25,40,29,.08);
}
body :is(#resourceAdd,.primary-button,.secondary-button,.export-btn,.btn-primary,.btn-ghost,.gen-send,.dock-add,[data-shot-generate]){
  background:var(--button-glass);color:var(--text);border:1px solid var(--button-glass-border);
  box-shadow:var(--button-glass-shadow);backdrop-filter:blur(12px) saturate(105%);-webkit-backdrop-filter:blur(12px) saturate(105%);
  font-weight:550;transition:background .15s,border-color .15s,box-shadow .15s;
}
body :is(#resourceAdd,.primary-button,.secondary-button,.export-btn,.btn-primary,.btn-ghost,.gen-send,.dock-add,[data-shot-generate]):hover{
  background:var(--button-glass-hover);color:var(--text);border-color:var(--line-strong);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 4px 12px rgba(0,0,0,.2);
}
body :is(#resourceAdd,.primary-button,.secondary-button,.export-btn,.btn-primary,.btn-ghost,.gen-send,.dock-add,[data-shot-generate]):active{
  box-shadow:inset 0 1px 3px rgba(0,0,0,.18);background:var(--surface-2);
}
body :is(#resourceAdd,.primary-button,.secondary-button,.export-btn,.btn-primary,.btn-ghost,.gen-send,.dock-add,[data-shot-generate]):disabled{
  opacity:.45;box-shadow:none;cursor:not-allowed;
}
@media(prefers-reduced-transparency:reduce){body :is(#resourceAdd,.primary-button,.secondary-button,.export-btn,.btn-primary,.btn-ghost,.gen-send,.dock-add,[data-shot-generate]){backdrop-filter:none;-webkit-backdrop-filter:none;background:var(--surface-3)}}

/* The rounded wrapper owns search focus; inner text inputs have no separate ring. */
body .search-box{transition:border-color .15s,box-shadow .15s,background .15s;box-sizing:border-box}
body .search-box:focus-within{
  border-color:var(--button-glass-border);background:var(--surface-2);
  box-shadow:inset 0 0 0 1px var(--line-strong),inset 0 1px 0 rgba(255,255,255,.04);
}
body .search-box input,
body .search-box input:focus,
body .search-box input:focus-visible{
  outline:none;border:0;box-shadow:none;background:transparent;border-radius:0;
  min-width:0;width:100%;height:100%;padding:0;margin:0;box-sizing:border-box;
}
body :is(input:where(:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"])),textarea,select):focus-visible{
  outline:none;border-color:var(--line-strong);box-shadow:inset 0 0 0 1px var(--line-strong);
}
body .search-box input:focus-visible{border:0;box-shadow:none}
/* Header actions share the same hover, press and keyboard feedback as upload. */
body :is(.account-pill,.credit-pill,.avatar-button){
  background:var(--button-glass);color:var(--text);border:1px solid var(--button-glass-border);
  box-shadow:var(--button-glass-shadow);transition:background .15s,border-color .15s,box-shadow .15s;
}
body :is(.account-pill,.credit-pill,.avatar-button):hover{
  background:var(--button-glass-hover);color:var(--text);border-color:var(--line-strong);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 4px 12px rgba(0,0,0,.2);
}
body :is(.account-pill,.credit-pill,.avatar-button):active{
  background:var(--surface-2);box-shadow:inset 0 1px 3px rgba(0,0,0,.18);
}
body :is(button,a):focus-visible{outline:2px solid var(--muted);outline-offset:2px}

/* Shared rounding and neutral surfaces, without changing component dimensions. */
body .search-box { border-radius: 12px; }
body :is(.field,.account-form,.upload-form-row,.model-connection-form,.prop-body,.search) :is(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]),textarea,select) {
  background:var(--composer-bg);color:var(--text);border-color:var(--line-strong);border-radius:10px;
}
body input::placeholder,body textarea::placeholder { color:var(--faint); }
body .side-rail .rail-item:hover { color:var(--text);background:var(--surface-3); }
body :is(.model-connections-panel,.model-connection-card,.model-connection-editor,.model-picker,.model-picker-dialog,.director-dialog,.panorama-dialog,.panorama-viewer,.gen-composer,.gen-pop) {
  color:var(--text);background:var(--surface-2);border-color:var(--line-strong);
}
body :is(.director-properties,.director-object-strip,.director-playback,.director-tools,.director-path-options) {
  background:var(--nav-bg);color:var(--text);border-color:var(--line-strong);
}
body :is(.director-dialog,.panorama-dialog,.panorama-viewer) :is(input:not([type=range]):not([type=checkbox]):not([type=color]),textarea,select) {
  background:var(--composer-bg);color:var(--text);border-color:var(--line-strong);border-radius:8px;
}
body :is(.director-dialog,.panorama-dialog,.panorama-viewer) button:not([data-color]):not([style*="background"]):not(.director-diamond):not(.director-playhead-handle) {
  background:var(--button-glass);color:var(--text);border-color:var(--button-glass-border);
}
body :is(.director-dialog,.panorama-dialog,.panorama-viewer) button:not([data-color]):not([style*="background"]):hover { background:var(--button-glass-hover); }
/* Director actions use the homepage glass tokens, including selected controls. */
body .director-dialog #directorApply {
  background:var(--button-glass);color:var(--text);border:1px solid var(--button-glass-border);
  box-shadow:var(--button-glass-shadow);border-radius:10px;
}
body .director-dialog #directorApply:hover { background:var(--button-glass-hover);color:var(--text);border-color:var(--line-strong); }
body .director-dialog :is(.director-view-switch,.director-tools,.director-add-tools,.director-walk-keys) button:is([aria-pressed="true"],.is-selected) {
  background:var(--button-glass-hover)!important;color:var(--text)!important;border-color:var(--line-strong)!important;
  box-shadow:inset 0 0 0 1px var(--line-strong),var(--button-glass-shadow);font-weight:650;
}

body.agent-workspace .agent-tools #agentSend,body.agent-workspace .agent-tools #agentSend:hover {
  color:var(--text);background:var(--button-glass);border-color:var(--button-glass-border);box-shadow:var(--button-glass-shadow);
}
body.agent-workspace .agent-tools #agentSend:hover { background:var(--button-glass-hover); }
body .dark-preview { background:#191b1a; }body .dark-preview i { background:#232624; }
body .dark-preview b { background:#949d97; }body .dark-preview em { background:#343a36; }

/* The embedded editor shares the same theme; media and track colours remain meaningful. */
body.timeline-page {
  --panel:var(--nav-bg);--panel2:var(--surface-2);--dim:var(--muted);
  background:var(--bg);color:var(--text);
}
body.timeline-page :is(.preview,.asset-item .thumb) { background-color:var(--bg); }
body.timeline-page :is(.track-label button,.left>.tb,.asset-item [data-add-asset],.tl-toolbar .tb,.ratio-btn,.export-actions a,.export-actions button) {
  background:var(--button-glass);color:var(--text);border-color:var(--button-glass-border);border-radius:8px;
}
body.timeline-page :is(.track-label button,.left>.tb,.asset-item [data-add-asset],.tl-toolbar .tb,.ratio-btn,.export-actions a,.export-actions button):hover {
  background:var(--button-glass-hover);border-color:var(--line-strong);
}
body.timeline-page .export-actions .primary { background:var(--button-glass);color:var(--text);border-color:var(--button-glass-border); }
body.timeline-page .tl-toolbar .tb.hl { color:var(--text);border-color:var(--line-strong);background:var(--surface-3); }
body.timeline-page .prop-body :is(input,textarea,select):focus-visible { outline:none;box-shadow:inset 0 0 0 1px var(--line-strong); }
body :is(.connection-card,.connection-model-group,.connection-advanced-fields) { background:var(--surface);color:var(--text);border-color:var(--line-strong); }
body .connection-model-row { border-color:var(--line); }
body .connection-help { color:var(--muted); }
body :is(.connection-actions,.director-tools,.director-playback) button:disabled { opacity:.45; }
body :is(.director-stage-library,.director-catalog-filters button[aria-pressed=true],.director-pose-grid button[aria-pressed=true]) {
  background:var(--surface-3) !important;color:var(--text) !important;border-color:var(--line-strong) !important;
}
body .director-stage-library:hover { background:var(--button-glass-hover) !important; }

/* Node controls belong to the page theme, including light appearance. */
body .gen-panel,body .canvas-context.is-capsule,body .gen-pop{background:var(--composer-bg);color:var(--text);border-color:var(--line-strong);box-shadow:0 12px 32px #0002;backdrop-filter:none;-webkit-backdrop-filter:none}
body .gen-panel.is-node-anchored::before{background:var(--composer-bg);border-color:var(--line-strong)}
body .gen-panel .gen-editor,body .gen-panel .gen-pill,body .gen-panel .gen-tool,body .gen-panel .gen-icon-button{color:var(--text)}
body .gen-panel .gen-editor.is-empty::before,body .gen-panel .gen-target,body .gen-panel .gen-status,body .gen-panel .gen-cost{color:var(--muted)}
body .gen-panel .gen-ref{background:var(--surface-2);border-color:var(--line-strong)}
body .gen-panel .gen-tool:hover,body .gen-panel .gen-pill:hover,body .gen-panel .gen-icon-button:hover{background:var(--surface-3)}
body .canvas-context.is-capsule button{color:var(--text)}
body .canvas-context.is-capsule button:disabled{color:var(--faint)}
body .gen-panel.is-shot-dialog .gen-bar-left{gap:7px}
body .gen-panel.is-shot-dialog .gen-setting-pill{max-width:86px}
body .gen-panel.is-shot-dialog .gen-bar-left [data-gen-open="style"]{max-width:90px}
.voice-session-bar{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin:8px 0;color:var(--muted);font-size:12px}
.voice-session-bar[hidden]{display:none}.voice-session-bar>span{flex:1;min-width:140px}
.voice-session-bar button{border:1px solid var(--line-strong);border-radius:8px;padding:6px 8px;color:var(--text);background:var(--surface-2);cursor:pointer}
body #agentVoice,body #voiceButton{display:inline-flex;align-items:center;justify-content:center;flex:none;width:36px;height:36px;background:transparent;color:var(--text);border:1px solid var(--line);border-radius:50%}
body #agentVoice.recording,body #voiceButton.recording{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
body #agentVoice svg,body #voiceButton svg{width:19px;height:19px}
@media(max-width:700px){
  body .gen-panel.is-shot-dialog .gen-bar{flex-wrap:wrap}
  body .gen-panel.is-shot-dialog .gen-bar-left{flex-basis:100%;flex-wrap:wrap;overflow:visible}
  body .gen-panel.is-shot-dialog .gen-bar-right{margin-left:auto}
}
body .canvas-context.is-capsule .context-dynamic button{color:var(--text)}
body .canvas-context.is-capsule .context-dynamic button[aria-disabled="true"],body .canvas-context.is-capsule .context-dynamic button:disabled{color:var(--faint)}
body .gen-panel .shot-node-editor .is-dirty{color:var(--accent);background:color-mix(in srgb,var(--accent) 15%,transparent)}

/* Shared action controls use the same glass tokens as the other pages. */
body.home-page #startButton,.agent-workspace .agent-tools #agentSend,
body #voiceButton,body #agentVoice{background:var(--button-glass);color:var(--text);border:1px solid var(--button-glass-border);box-shadow:var(--button-glass-shadow)}
body.home-page #startButton:hover,.agent-workspace .agent-tools #agentSend:hover{background:var(--button-glass-hover);color:var(--text)}
body #voiceButton.recording,body #agentVoice.recording{background:var(--surface-3);color:var(--text);border-color:var(--muted)}

/* One input surface and one control language on home and canvas. */
body.home-page .home-agent-composer,.agent-workspace .agent-composer{border:1px solid var(--line-strong);border-radius:18px;background:var(--composer-bg);color:var(--text);box-shadow:none}
body.home-page .home-agent-composer{padding:14px 16px 12px;margin-top:20px}
body.home-page .home-agent-composer:focus-within,.agent-workspace .agent-composer:focus-within{border-color:var(--faint)}
body.home-page .home-agent-composer #promptInput{display:block;resize:none;min-height:108px;margin:0;padding:4px 0 12px;background:transparent;border:0;border-radius:0;outline:none;box-shadow:none}
body.home-page .home-agent-composer #promptInput:focus-visible{outline:none!important;box-shadow:none!important}
body.home-page .home-agent-tools{padding-top:8px;gap:8px}
body.home-page .home-agent-tools :is(#uploadButton,#assetButton,#modelButton,#skillButton),.agent-workspace .agent-tools :is(#agentUpload,#agentAssets,#agentChatModel,#agentSkill){border:1px solid transparent;background:transparent;box-shadow:none;color:var(--muted);border-radius:9px}
body.home-page .home-agent-tools :is(#uploadButton,#assetButton,#modelButton,#skillButton):hover,.agent-workspace .agent-tools :is(#agentUpload,#agentAssets,#agentChatModel,#agentSkill):hover{background:var(--surface-3);color:var(--text)}
body.home-page .home-agent-tools #voiceButton,.agent-workspace .agent-tools #agentVoice{margin-left:auto}
body.home-page .home-agent-tools :is(#voiceButton,#startButton),.agent-workspace .agent-tools :is(#agentVoice,#agentSend){box-sizing:border-box;width:38px;min-width:38px;height:38px;padding:0;flex:0 0 38px;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;background:var(--button-glass);color:var(--text);border:1px solid var(--button-glass-border);box-shadow:var(--button-glass-shadow)}
body.home-page .home-agent-tools #startButton,.agent-workspace .agent-tools #agentSend{margin-left:0;margin-right:8px}
body.home-page .home-recent-conversations button{background:var(--surface-2);color:var(--text);border:1px solid var(--line-strong);box-shadow:none}
body.home-page .home-recent-conversations button small{color:var(--muted)}
body.home-page .home-recent-conversations button:hover{background:var(--surface-3)}

body.home-page .home-conversation-toolbar{justify-content:flex-end}

/* Message details stay quiet until hover, keyboard focus or touch selection. */
.message-tools{display:flex;align-items:center;gap:10px;min-height:30px;margin-top:10px;opacity:0;pointer-events:none;transition:opacity .12s;color:var(--muted);font-size:11px}
:is(.home-message,.agent-message):is(:hover,:focus-within,.show-message-tools)>.message-tools{opacity:1;pointer-events:auto}
.message-tools button{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;padding:4px;border:0;border-radius:7px;background:transparent;color:var(--muted);cursor:pointer}
.message-tools button:hover,.message-tools button[aria-pressed="true"]{color:var(--text);background:var(--surface-3)}
.message-tools button svg{width:18px;height:18px}.from-user>.message-tools{justify-content:flex-end}.message-tools time,.message-elapsed{white-space:nowrap}
@media(hover:none){.message-tools{opacity:1;pointer-events:auto}}
@media(prefers-reduced-motion:reduce){.message-tools{transition:none}}
.account-workspace-badge{font-size:11px;line-height:1.6;color:var(--muted);text-decoration:none;border:1px solid var(--line);border-radius:8px;padding:6px 10px;max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex-shrink:0}@media(max-width:700px){.account-workspace-badge{max-width:140px;font-size:10px;padding:4px 7px}}

/* One surface for every node composer control, including disabled send. */
#canvasStage .gen-panel :is(.gen-pill,.gen-tool,.gen-send){background:var(--surface-3);border:1px solid var(--line-strong);box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;opacity:1;color:var(--text)}
#canvasStage .gen-panel :is(.gen-pill,.gen-tool,.gen-send):hover:not(:disabled){background:var(--surface-2);border-color:var(--muted);box-shadow:none}
#canvasStage .gen-panel :is(.gen-pill,.gen-tool,.gen-send):disabled,#canvasStage .gen-panel .gen-pill[aria-disabled="true"]{background:var(--surface-3);border-color:var(--line-strong);box-shadow:none;opacity:1;color:var(--faint);cursor:not-allowed}

/* Shared registration footer follows the homepage theme. */
.site-registration { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px 24px; padding: 20px 12px; color: var(--muted); font-size: 12px; line-height: 1.6; }
.site-registration a { display: inline-flex; align-items: center; gap: 6px; color: inherit; text-decoration: none; }
.site-registration a:hover { color: var(--text); text-decoration: underline; }
.site-registration a:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }
.site-registration img { display: block; flex: none; object-fit: contain; }