:root {
  --bg: #f4f5f7;
  --panel: rgba(255, 255, 255, 0.95);
  --text: #171a22;
  --muted: #7b8190;
  --line: #e7e9ee;
  --accent: #101521;
  --accent-soft: #eef0f5;
  --danger: #d9485f;
  --success: #24a269;
  --warning: #e6a222;
  --running: #4678ee;
  --canvas-handle-size: 26px;
  --canvas-handle-offset: -13px;
  --shadow: 0 12px 36px rgba(27, 31, 43, 0.10), 0 2px 7px rgba(27, 31, 43, 0.05);
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft YaHei", sans-serif;
}

* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; background: var(--bg); color: var(--text); }
button, input, textarea, select { font: inherit; }
button { color: inherit; }

.app-shell { width: 100vw; height: 100vh; display: grid; grid-template-rows: 64px minmax(0, 1fr) 28px; }
.topbar {
  z-index: 30; display: flex; align-items: center; justify-content: space-between;
  padding: 0 18px; border-bottom: 1px solid var(--line); background: rgba(255,255,255,.92);
  backdrop-filter: blur(18px);
}
.brand-block { display: flex; align-items: center; gap: 11px; min-width: 260px; }
.brand-icon { background: var(--accent) !important; color: white !important; }
.project-name { width: 250px; border: 0; outline: 0; font-size: 15px; font-weight: 680; padding: 2px 4px; background: transparent; border-radius: 6px; }
.project-name:focus { background: #f2f3f6; }
.save-status { font-size: 11px; color: var(--muted); padding-left: 4px; margin-top: 2px; }
.top-actions { display: flex; align-items: center; gap: 6px; }
.toolbar-btn, .icon-button, .button {
  border: 1px solid transparent; background: transparent; border-radius: 10px; cursor: pointer; transition: .16s ease;
}
.toolbar-btn { height: 36px; padding: 0 12px; display: inline-flex; align-items: center; gap: 6px; font-size: 13px; }
.toolbar-btn:hover, .icon-button:hover { background: #f0f1f4; }
.toolbar-btn:disabled { opacity: .35; cursor: default; }
.toolbar-btn.primary, .button.primary { color: white; background: var(--accent); box-shadow: 0 4px 12px rgba(16,21,33,.18); }
.toolbar-btn.primary:hover, .button.primary:hover { background: #242b3a; transform: translateY(-1px); }
.icon-button { width: 34px; height: 34px; display: grid; place-items: center; font-size: 18px; }

.workspace { min-height: 0; display: grid; grid-template-columns: 76px minmax(0, 1fr) 296px; }
.node-library { z-index: 20; padding: 12px 9px; background: rgba(255,255,255,.96); border-right: 1px solid var(--line); display: flex; flex-direction: column; align-items: stretch; gap: 6px; }
.library-title { font-size: 11px; text-align: center; color: var(--muted); margin: 2px 0 5px; letter-spacing: .12em; }
.node-tool { border: 0; background: transparent; border-radius: 12px; padding: 8px 3px; cursor: grab; display: flex; flex-direction: column; align-items: center; gap: 5px; font-size: 11px; color: #575e6d; transition: .15s ease; }
.node-tool:hover { color: var(--text); background: #f1f2f5; }
.node-tool:active { cursor: grabbing; transform: scale(.97); }
.node-tool.subtle { margin-top: auto; }
.tool-icon { width: 32px; height: 32px; border: 1px solid #e1e4ea; background: white; display: grid; place-items: center; border-radius: 9px; font-weight: 760; font-size: 15px; box-shadow: 0 3px 9px rgba(30,35,48,.05); }
.library-divider { height: 1px; background: var(--line); margin: 6px 5px; }

.canvas-viewport { position: relative; min-width: 0; min-height: 0; overflow: hidden; outline: none; cursor: default; background-color: #f8f9fb; background-image: radial-gradient(#dfe2e9 1px, transparent 1px); background-size: 22px 22px; }
.canvas-viewport.is-panning { cursor: grabbing; }
.canvas-viewport.connecting { cursor: crosshair; }
.canvas-scene { position: absolute; left: 0; top: 0; width: 1px; height: 1px; transform-origin: 0 0; will-change: transform; }
.node-layer, .edge-layer, .interaction-layer { position: absolute; left: 0; top: 0; overflow: visible; }
.edge-layer, .interaction-layer { width: 1px; height: 1px; }
.edge-layer { pointer-events: auto; }
.interaction-layer { pointer-events: none; }
.node-layer { width: 1px; height: 1px; }
.edge-path { fill: none; stroke: #aab0bd; stroke-width: 2.2; vector-effect: non-scaling-stroke; }
.edge-path.selected { stroke: #171a22; stroke-width: 2.8; }
.edge-hit { fill: none; stroke: transparent; stroke-width: 22; pointer-events: stroke; cursor: pointer; vector-effect: non-scaling-stroke; }
.edge-dot { fill: white; stroke: #777e8d; stroke-width: 2; vector-effect: non-scaling-stroke; }
.temp-edge { fill: none; stroke: #171a22; stroke-width: 2; stroke-dasharray: 6 5; vector-effect: non-scaling-stroke; }

.canvas-node { position: absolute; border: 1px solid #dfe2e8; background: rgba(255,255,255,.97); border-radius: 14px; box-shadow: var(--shadow); min-width: 180px; user-select: none; transition: box-shadow .12s ease, border-color .12s ease; }
.canvas-node.selected { border-color: #161b27; box-shadow: 0 0 0 2px rgba(22,27,39,.12), var(--shadow); }
.canvas-node.running { border-color: var(--running); box-shadow: 0 0 0 2px rgba(70,120,238,.15), var(--shadow); }
.canvas-node.failed { border-color: var(--danger); }
.canvas-node.success { border-color: rgba(36,162,105,.65); }
.canvas-node.group-node { background: rgba(255,255,255,.42); border: 1px dashed #c8ccd6; box-shadow: none; backdrop-filter: blur(2px); }
.canvas-node.group-node.selected { border-color: #737988; box-shadow: 0 0 0 2px rgba(80,86,100,.08); }
.node-header { height: 40px; display: flex; align-items: center; gap: 8px; padding: 0 12px; border-bottom: 1px solid #eef0f3; cursor: grab; border-radius: 14px 14px 0 0; touch-action: none; }
.node-header:active { cursor: grabbing; }
.node-drag-grip { width: 18px; height: 28px; flex: 0 0 18px; display: grid; place-items: center; color: #8fa5ba; font-size: 15px; line-height: 1; cursor: grab; opacity: .82; }
.node-drag-grip:hover { color: #33dff5; opacity: 1; }
.node-drag-grip:active { cursor: grabbing; }
.contrast-template-node { min-width: 520px; min-height: 520px; border-color: rgba(255, 204, 61, .62); }
.contrast-template-node .node-header { background: linear-gradient(180deg, rgba(74, 54, 14, .72), rgba(20, 29, 44, 0)); }
.contrast-template-node .node-badge { color: #ffd54a; background: rgba(255, 202, 45, .12); }
.contrast-template-body { display: grid; gap: 10px; max-height: 466px; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; touch-action: pan-y; padding: 12px; }
.contrast-fixed-copy { display: grid; gap: 5px; }
.contrast-fixed-copy > span, .contrast-language > span, .contrast-case-heading span, .contrast-script-heading > span { color: #879db2; font-size: 10px; }
.contrast-language { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.contrast-language select { min-width: 150px; height: 31px; border: 1px solid rgba(255, 204, 61, .34); border-radius: 8px; background: #091524; color: #ffd54a; padding: 0 8px; }
.contrast-fixed-copy textarea { width: 100%; min-height: 48px; resize: vertical; border: 1px solid rgba(80, 112, 141, .28); border-radius: 9px; background: rgba(8, 13, 24, .72); color: #eef6ff; padding: 8px; font: inherit; }
.contrast-case-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.contrast-case-heading strong { color: #ffd54a; font-size: 12px; }
.contrast-case-list { display: grid; gap: 7px; }
.contrast-case-row { display: grid; grid-template-columns: 24px repeat(3, minmax(0, 1fr)) 24px; gap: 6px; align-items: end; padding: 8px; border: 1px solid rgba(255, 204, 61, .18); border-radius: 10px; background: rgba(255, 204, 61, .04); }
.contrast-case-number { align-self: center; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: rgba(255, 204, 61, .14); color: #ffd54a; font-size: 10px; font-weight: 800; }
.contrast-case-row label { display: grid; gap: 3px; min-width: 0; }
.contrast-case-row label span { color: #8499ae; font-size: 9px; }
.contrast-case-row input { min-width: 0; width: 100%; height: 30px; border: 1px solid rgba(80, 112, 141, .28); border-radius: 7px; background: rgba(8, 13, 24, .78); color: #f5f9ff; padding: 0 7px; }
.contrast-case-row .contrast-case-question { grid-column: 2 / 5; }
.contrast-case-row button, .contrast-add-case, .contrast-create-flow { border: 1px solid rgba(80, 112, 141, .3); border-radius: 7px; background: rgba(12, 25, 40, .9); color: #b9cadd; cursor: pointer; }
.contrast-case-row button { width: 24px; height: 30px; }
.contrast-case-row button:hover { color: #ff7b8c; border-color: rgba(255, 93, 115, .5); }
.contrast-add-case { height: 31px; color: #ffd54a; }
.contrast-add-case:hover { border-color: rgba(255, 204, 61, .55); }
.contrast-create-flow { min-height: 34px; border-color: rgba(42, 224, 192, .48); color: #59f0c9; font-weight: 750; }
.contrast-create-flow:hover { background: rgba(24, 108, 92, .24); }
.contrast-script-preview { display: grid; gap: 4px; padding: 9px; border-radius: 9px; background: rgba(6, 12, 21, .58); }
.contrast-script-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.contrast-script-heading button { height: 25px; padding: 0 9px; border: 1px solid rgba(42, 224, 192, .38); border-radius: 7px; background: rgba(12, 39, 48, .84); color: #59f0c9; font-size: 10px; cursor: pointer; }
.contrast-script-heading button:hover { background: rgba(24, 108, 92, .28); }
.contrast-script-preview textarea { width: 100%; min-height: 112px; resize: vertical; border: 1px solid rgba(80, 112, 141, .22); border-radius: 7px; background: rgba(5, 10, 18, .62); color: #d9e7f4; padding: 7px; font: inherit; font-size: 10px; line-height: 1.55; white-space: pre-wrap; user-select: text; cursor: text; }
.contrast-script-preview small { color: #71879b; font-size: 9px; line-height: 1.45; }
.group-node .node-header { border-bottom: 0; background: rgba(255,255,255,.65); }
.node-badge { width: 21px; height: 21px; border-radius: 7px; display: grid; place-items: center; background: #f0f1f5; font-size: 11px; font-weight: 800; }
.node-title { flex: 1; font-size: 12px; font-weight: 760; letter-spacing: .02em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.node-status { width: 8px; height: 8px; border-radius: 50%; background: #b8beca; }
.node-status.queued { background: var(--warning); }
.node-status.running { background: var(--running); box-shadow: 0 0 0 5px rgba(70,120,238,.12); animation: pulse 1.15s infinite; }
.node-status.success { background: var(--success); }
.node-status.failed { background: var(--danger); }
.node-status.cancelled { background: #f2a33c; }
.node-status.skipped { background: #718095; }
@keyframes pulse { 50% { box-shadow: 0 0 0 8px rgba(70,120,238,0); } }
.node-menu-btn { width: 24px; height: 24px; border: 0; border-radius: 7px; background: transparent; cursor: pointer; color: var(--muted); }
.node-menu-btn:hover { background: #f0f1f4; color: var(--text); }
.node-reset-btn { width: 24px; height: 24px; flex: 0 0 auto; padding: 0; border: 0; border-radius: 7px; background: transparent; color: var(--muted); font-size: 14px; line-height: 1; cursor: pointer; }
.node-reset-btn:hover:not(:disabled) { background: #f0f1f4; color: var(--text); }
.node-reset-btn:disabled { opacity: .35; cursor: not-allowed; }
.node-download-btn {
  flex: 0 0 auto;
  height: 22px;
  padding: 0 7px;
  border: 1px solid rgba(38, 203, 237, .35);
  border-radius: 7px;
  background: rgba(11, 42, 59, .88);
  color: #74e9ff;
  font-size: 9px;
  font-weight: 700;
  cursor: pointer;
}
.node-download-btn:hover { border-color: rgba(70, 226, 255, .8); background: rgba(13, 58, 78, .96); color: #fff; }
.node-download-panel {
  position: fixed;
  z-index: 10000;
  width: min(340px, calc(100vw - 20px));
  max-height: min(520px, calc(100vh - 20px));
  overflow: hidden;
  border: 1px solid rgba(64, 191, 221, .28);
  border-radius: 14px;
  background: rgba(8, 17, 27, .98);
  box-shadow: 0 22px 60px rgba(0, 0, 0, .48), 0 0 0 1px rgba(255,255,255,.03) inset;
  color: #e9f5fb;
}
.node-download-panel > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 15px; border-bottom: 1px solid rgba(255,255,255,.07); }
.node-download-panel > header div { display: grid; gap: 3px; min-width: 0; }
.node-download-panel > header strong { font-size: 13px; }
.node-download-panel > header span { overflow: hidden; color: #7890a1; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.node-download-panel > header button { width: 26px; height: 26px; border: 0; border-radius: 8px; background: rgba(255,255,255,.06); color: #9db0bd; cursor: pointer; }
.node-download-list { display: grid; gap: 6px; max-height: 350px; overflow: auto; padding: 10px; }
.node-download-list > button { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 2px 10px; align-items: center; padding: 10px 11px; border: 1px solid rgba(255,255,255,.07); border-radius: 10px; background: rgba(255,255,255,.035); color: #e3eff5; text-align: left; cursor: pointer; }
.node-download-list > button:hover { border-color: rgba(58, 216, 245, .4); background: rgba(31, 126, 151, .11); }
.node-download-list > button:disabled { opacity: .55; cursor: wait; }
.node-download-list span { font-size: 11px; font-weight: 700; }
.node-download-list small { grid-column: 1; overflow: hidden; color: #657b8a; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.node-download-list b { grid-column: 2; grid-row: 1 / 3; color: #58ddf6; font-size: 10px; }
.node-download-panel > footer { padding: 10px; border-top: 1px solid rgba(255,255,255,.07); }
.node-download-panel > footer button { width: 100%; height: 34px; border: 1px solid rgba(45, 211, 241, .42); border-radius: 9px; background: rgba(17, 117, 143, .22); color: #aaf2ff; font-size: 11px; font-weight: 750; cursor: pointer; }
.node-download-panel > footer button:disabled { opacity: .55; cursor: wait; }
.node-body { padding: 12px; min-height: 70px; }
.node-label { display: block; font-size: 10px; font-weight: 750; color: #8a909d; margin-bottom: 6px; letter-spacing: .08em; }
.node-textarea, .node-input, .node-select { width: 100%; border: 1px solid #e4e6eb; border-radius: 9px; background: #fafbfc; outline: none; color: var(--text); }
.node-textarea { min-height: 96px; resize: none; padding: 10px; line-height: 1.55; font-size: 12px; user-select: text; }
.node-textarea:focus, .node-input:focus, .node-select:focus { border-color: #aab0bd; background: white; box-shadow: 0 0 0 3px rgba(30,35,48,.06); }
.node-input, .node-select { height: 33px; padding: 0 8px; font-size: 11px; }
.node-meta { display: flex; justify-content: space-between; align-items: center; margin-top: 7px; font-size: 10px; color: var(--muted); }
.image-drop { min-height: 118px; border: 1px dashed #d3d7df; border-radius: 10px; background: #fafbfc; display: grid; place-items: center; overflow: hidden; cursor: pointer; position: relative; }
.image-drop:hover { border-color: #9097a6; }
.image-drop img { width: 100%; height: 150px; object-fit: cover; display: block; }
.image-placeholder { text-align: center; color: #8c92a0; font-size: 11px; line-height: 1.5; padding: 18px; }
.image-placeholder strong { display: block; color: #515866; font-size: 22px; margin-bottom: 4px; }
.file-caption { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 200px; }
.generator-summary { display: flex; gap: 7px; margin-bottom: 10px; }
.summary-chip { padding: 5px 7px; border-radius: 7px; background: #f2f3f6; color: #656c7a; font-size: 10px; }
.generator-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.generator-grid .wide { grid-column: 1 / -1; }
.run-node-btn { width: 100%; height: 36px; border: 0; border-radius: 10px; margin-top: 10px; background: var(--accent); color: white; cursor: pointer; font-size: 12px; font-weight: 680; }
.run-node-btn:hover { background: #252c3a; }
.run-node-btn:disabled { opacity: .55; cursor: wait; }
.run-node-btn.cancel, .utility-open-btn.cancel { border-color: rgba(255, 105, 119, .52); background: rgba(91, 27, 39, .9); color: #ffd9dd; }
.rh-history-card.run-failed { border-color: rgba(255, 91, 111, .34); }
.rh-history-card.run-cancelled { border-color: rgba(242, 163, 60, .32); }
.rh-history-card.run-skipped { opacity: .72; }
.output-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; }
.output-image { aspect-ratio: 16/10; border-radius: 9px; overflow: hidden; background: #f1f2f5; position: relative; cursor: pointer; }
.output-image img { width: 100%; height: 100%; object-fit: cover; }
.output-image:first-child:nth-last-child(1) { grid-column: 1/-1; aspect-ratio: 16/9; }
.output-empty { min-height: 125px; border-radius: 10px; background: #f6f7f9; display: grid; place-items: center; text-align: center; color: #9aa0ac; font-size: 11px; padding: 20px; }
.output-actions { display: flex; gap: 6px; margin-top: 8px; }
.mini-button { flex: 1; border: 1px solid #e2e5ea; background: white; border-radius: 8px; height: 29px; font-size: 10px; cursor: pointer; }
.mini-button:hover { background: #f4f5f7; }
.handle { position: absolute; width: var(--canvas-handle-size); height: var(--canvas-handle-size); border-radius: 50%; background: #131824; border: 2px solid white; box-shadow: 0 0 0 9px rgba(9,210,255,.15), 0 0 18px rgba(9,210,255,.28); cursor: crosshair; z-index: 6; touch-action: none; transform: translateY(-50%); transition: opacity .12s ease, box-shadow .12s ease, transform .12s ease; }
.handle::before { content: ''; position: absolute; inset: -9px; border-radius: 50%; }
.handle::after { content: ''; position: absolute; inset: 1px; background: url('/static/assets/canvas-icons/add.svg') center / 22px 22px no-repeat; pointer-events: none; }
.handle.input { left: var(--canvas-handle-offset); }
.handle.output { right: var(--canvas-handle-offset); }
.handle[data-kind="text"] { background: #5865dc; }
.handle[data-kind="image"] { background: #171a22; }
.handle.invalid { background: var(--danger); }
.canvas-viewport.connecting .handle.connection-compatible { opacity: 1; box-shadow: 0 0 0 11px rgba(9,210,255,.25), 0 0 25px rgba(9,210,255,.58); transform: translateY(-50%) scale(1.08); }
.canvas-viewport.connecting .handle.connection-incompatible { opacity: .28; }
.handle-label { position: absolute; font-size: 9px; color: #959ba7; pointer-events: none; }
.handle-label.left { left: 18px; }
.handle-label.right { right: 18px; }
.resize-handle { position: absolute; right: -4px; bottom: -4px; width: 12px; height: 12px; border: 2px solid white; background: #737989; border-radius: 3px; cursor: nwse-resize; z-index: 7; }

.inspector { z-index: 20; background: rgba(255,255,255,.97); border-left: 1px solid var(--line); overflow: auto; padding: 18px; }
.inspector-empty { min-height: 100%; display: grid; place-content: center; text-align: center; color: var(--muted); }
.inspector-symbol { font-size: 30px; color: #b3b8c2; }
.inspector-empty h3 { color: #4b5260; font-size: 14px; margin: 10px 0 4px; }
.inspector-empty p { max-width: 210px; font-size: 12px; line-height: 1.6; }
.inspector-head { display: flex; align-items: center; justify-content: space-between; padding-bottom: 14px; border-bottom: 1px solid var(--line); margin-bottom: 16px; }
.inspector-head h3 { margin: 0; font-size: 14px; }
.inspector-head small { color: var(--muted); font-size: 10px; }
.field { display: block; margin-bottom: 13px; }
.field > span { display: block; margin-bottom: 6px; color: #747b88; font-size: 11px; font-weight: 650; }
.field input, .field textarea, .field select { width: 100%; border: 1px solid #e0e3e8; background: #fafbfc; border-radius: 9px; outline: none; padding: 9px; font-size: 12px; }
.field textarea { min-height: 100px; resize: vertical; line-height: 1.5; }
.field input:focus, .field textarea:focus, .field select:focus { background: white; border-color: #aeb4c0; }
.inspector-actions { display: flex; gap: 8px; margin-top: 20px; }
.button { min-height: 36px; padding: 0 14px; border-color: #e0e3e8; background: white; font-size: 12px; }
.button:hover { background: #f3f4f6; }
.button.danger { color: var(--danger); }
.inspector-actions .button { flex: 1; }
.run-history { margin-top: 18px; border-top: 1px solid var(--line); padding-top: 14px; }
.run-history h4 { font-size: 11px; margin: 0 0 10px; color: #656c79; }
.run-item { border: 1px solid #eaecf0; border-radius: 9px; padding: 9px; margin-bottom: 7px; font-size: 10px; color: #6f7683; }
.run-item strong { color: #313743; }

.selection-box { position: absolute; z-index: 15; border: 1px solid #576070; background: rgba(91,99,114,.08); pointer-events: none; }
.hidden { display: none !important; }
.canvas-empty { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; pointer-events: none; color: #9298a5; }
.empty-mark { font-size: 38px; }
.canvas-empty h2 { margin: 10px 0 6px; font-size: 17px; color: #5c6370; }
.canvas-empty p { margin: 0; font-size: 12px; }
.canvas-hint { position: absolute; left: 16px; bottom: 16px; background: rgba(255,255,255,.85); border: 1px solid #e8eaee; border-radius: 9px; padding: 7px 10px; font-size: 10px; color: #8a909c; backdrop-filter: blur(9px); }
.zoom-controls { position: absolute; right: 16px; bottom: 16px; display: flex; border: 1px solid #e1e4e9; border-radius: 10px; background: rgba(255,255,255,.92); overflow: hidden; box-shadow: 0 5px 16px rgba(20,25,36,.08); }
.zoom-controls button { height: 30px; min-width: 30px; border: 0; border-right: 1px solid #ebedf1; background: transparent; cursor: pointer; font-size: 12px; }
.zoom-controls button:last-child { border-right: 0; }
.zoom-controls button:hover { background: #f2f3f6; }
#zoom-label { min-width: 50px; }
.minimap { position: absolute; right: 16px; bottom: 58px; width: 148px; height: 92px; background: rgba(255,255,255,.88); border: 1px solid #e0e3e9; border-radius: 10px; overflow: hidden; box-shadow: 0 6px 20px rgba(20,25,36,.08); }
#minimap-nodes { position: absolute; inset: 0; }
.minimap-node { position: absolute; min-width: 3px; min-height: 3px; border-radius: 1px; background: #9da3af; }
.minimap-node.generator { background: #2f3542; }
.minimap-node.output { background: #6d7584; }
.minimap-viewport { position: absolute; border: 1px solid #161b27; background: rgba(22,27,39,.05); }
.statusbar { display: flex; align-items: center; justify-content: space-between; padding: 0 14px 0 88px; border-top: 1px solid var(--line); background: #fff; color: #8a909c; font-size: 10px; }

.toast-container { position: fixed; z-index: 100; right: 18px; top: 76px; display: flex; flex-direction: column; gap: 8px; pointer-events: none; }
.toast { min-width: 240px; max-width: 360px; border: 1px solid #e0e3e9; background: rgba(255,255,255,.97); box-shadow: var(--shadow); border-radius: 11px; padding: 11px 13px; font-size: 12px; animation: toast-in .22s ease; }
.toast.error { border-color: rgba(217,72,95,.35); }
.toast.success { border-color: rgba(36,162,105,.35); }
@keyframes toast-in { from { opacity: 0; transform: translateY(-7px); } }

.modal { border: 0; padding: 0; background: transparent; }
.modal::backdrop { background: rgba(18,22,31,.33); backdrop-filter: blur(4px); }
.modal-card { width: min(560px, calc(100vw - 34px)); max-height: 80vh; overflow: auto; border-radius: 16px; background: white; box-shadow: 0 24px 80px rgba(15,20,30,.26); padding: 20px; }
.project-modal-card { width: min(650px, calc(100vw - 34px)); }
.modal-head { display: flex; align-items: flex-start; justify-content: space-between; border-bottom: 1px solid var(--line); padding-bottom: 14px; margin-bottom: 14px; }
.modal-head h2 { margin: 0 0 4px; font-size: 17px; }
.modal-head p { margin: 0; color: var(--muted); font-size: 11px; }
.modal-actions { display: flex; justify-content: flex-end; gap: 8px; padding-top: 14px; }
.projects-list { display: flex; flex-direction: column; gap: 8px; max-height: 400px; overflow: auto; }
.project-row { display: grid; grid-template-columns: minmax(0,1fr) auto auto; gap: 8px; align-items: center; border: 1px solid #e7e9ee; border-radius: 11px; padding: 10px 12px; }
.project-row.active { border-color: #9ca3b1; background: #f8f9fb; }
.project-row h3 { margin: 0; font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.project-row p { margin: 3px 0 0; color: var(--muted); font-size: 10px; }
.project-row button { border: 1px solid #e1e4e9; background: white; border-radius: 8px; height: 30px; padding: 0 10px; cursor: pointer; font-size: 10px; }
.project-row button:hover { background: #f1f2f5; }
.settings-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.settings-grid label { display: block; }
.settings-grid label.wide { grid-column: 1/-1; }
.settings-grid span { display: block; font-size: 11px; color: #707784; margin-bottom: 6px; }
.settings-grid input, .settings-grid textarea { width: 100%; border: 1px solid #e2e5ea; border-radius: 9px; padding: 9px; color: #707784; background: #f7f8fa; }
.settings-grid textarea { height: 80px; resize: none; }
.callout { margin-top: 14px; padding: 12px; border-radius: 10px; background: #f3f4f7; color: #676e7c; font-size: 11px; line-height: 1.6; }

@media (max-width: 1050px) {
  .workspace { grid-template-columns: 68px minmax(0,1fr); }
  .inspector { position: absolute; right: 0; top: 64px; bottom: 28px; width: 288px; transform: translateX(100%); transition: transform .2s; }
  .inspector.has-selection { transform: translateX(0); box-shadow: -10px 0 30px rgba(20,25,35,.08); }
  .toolbar-btn span { display: none; }
  .toolbar-btn { width: 36px; padding: 0; justify-content: center; }
}
.edge-layer { pointer-events: auto; }
.interaction-layer { pointer-events: none; }


/* ===== V1.0.2 森哥风格暗色界面 ===== */
:root {
  --bg: #070b14;
  --panel: rgba(16, 23, 38, 0.92);
  --text: #eaf4ff;
  --muted: #8da4bd;
  --line: rgba(79, 116, 153, 0.24);
  --accent: #09d2ff;
  --accent-soft: rgba(9, 210, 255, 0.12);
  --shadow: 0 16px 36px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(31, 57, 88, 0.35);
}
html, body { background: #04070d; color: var(--text); }
.app-shell { grid-template-rows: 0 minmax(0, 1fr) 0; background: #04070d; }
.topbar { position: fixed; inset: 0 0 auto 0; height: 0; padding: 0; border: 0; background: transparent; pointer-events: none; z-index: 60; }
.brand-block, .top-actions { pointer-events: auto; }
.brand-block {
  position: fixed; left: 14px; top: 14px; min-width: 0; gap: 10px;
}
.brand-icon {
  width: 38px; height: 38px; border-radius: 12px; background: rgba(11, 19, 32, 0.94) !important;
  border: 1px solid rgba(78, 112, 145, 0.32) !important; color: #f4fbff !important;
  box-shadow: 0 8px 18px rgba(0,0,0,.25);
}
.project-name {
  width: 150px; color: #f2f8ff; background: rgba(11, 19, 32, 0.94); border: 1px solid rgba(78, 112, 145, 0.32);
  border-radius: 12px; padding: 8px 12px; font-size: 14px; font-weight: 700; box-shadow: 0 8px 18px rgba(0,0,0,.25);
}
.project-name:focus { background: rgba(15, 26, 42, 0.98); }
.save-status { position: absolute; left: 52px; top: 43px; color: #88a2ba; font-size: 10px; }
.top-actions {
  position: fixed; right: 16px; top: 14px; gap: 8px;
}
#undo-btn, #redo-btn, #fit-btn, #settings-btn { display: none; }
.toolbar-btn {
  height: 36px; border-radius: 12px; padding: 0 14px; border: 1px solid rgba(78, 112, 145, 0.30);
  background: rgba(11, 19, 32, 0.94); color: #dce9f7; box-shadow: 0 10px 22px rgba(0,0,0,.24);
}
.toolbar-btn:hover, .icon-button:hover { background: rgba(18, 30, 49, 0.98); }
.toolbar-btn.primary, .button.primary {
  background: linear-gradient(180deg, #12243d 0%, #0c1830 100%); color: #f4fbff;
  border: 1px solid rgba(9, 210, 255, 0.32); box-shadow: 0 0 0 1px rgba(9,210,255,.10), 0 10px 22px rgba(0,0,0,.28);
}
.workspace { grid-template-columns: 76px minmax(0, 1fr) 0; }
.node-library {
  position: relative; z-index: 35; margin: 56px 0 14px 8px; width: 56px; padding: 8px 6px; gap: 4px;
  background: rgba(11, 19, 32, 0.90); border: 1px solid rgba(78, 112, 145, 0.28); border-radius: 18px;
  box-shadow: 0 16px 32px rgba(0,0,0,.28);
}
.library-title { display: none; }
.library-divider { background: rgba(95, 126, 156, 0.18); margin: 8px 4px; }
.node-tool {
  border-radius: 14px; padding: 8px 2px; color: #87a1bb; gap: 4px;
}
.node-tool:hover { background: rgba(23, 37, 58, 0.98); color: #f0f8ff; }
.node-tool.subtle { margin-top: 8px; }
.tool-icon {
  width: 34px; height: 34px; border-radius: 12px; border: 1px solid rgba(92, 124, 153, 0.22);
  background: rgba(14, 24, 39, 0.92); color: #f4fbff; box-shadow: none;
}
.canvas-viewport {
  background: #060b13;
  background-image: radial-gradient(rgba(31, 95, 145, 0.35) 1px, transparent 1px);
  background-size: 24px 24px;
}
.canvas-empty {
  color: #9eb6ce;
}
.canvas-empty h2 { color: #f4fbff; }
.canvas-hint {
  left: 18px; bottom: 18px; background: rgba(11, 19, 32, 0.90); color: #81a0bc;
  border: 1px solid rgba(78, 112, 145, 0.24); border-radius: 12px;
}
.zoom-controls {
  right: 18px; bottom: 18px; border-radius: 14px; border: 1px solid rgba(78, 112, 145, 0.24);
  background: rgba(11, 19, 32, 0.92); box-shadow: 0 10px 24px rgba(0,0,0,.24);
}
.zoom-controls button { color: #dce9f7; border-right: 1px solid rgba(78, 112, 145, 0.2); }
.zoom-controls button:hover { background: rgba(20, 34, 55, 0.96); }
.minimap {
  right: 18px; bottom: 58px; background: rgba(11, 19, 32, 0.90); border: 1px solid rgba(78, 112, 145, 0.24);
  box-shadow: 0 10px 24px rgba(0,0,0,.24); border-radius: 14px;
}
.minimap-node { background: rgba(143, 167, 192, .55); }
.minimap-node.generator, .minimap-node.output { background: rgba(9, 210, 255, .60); }
.minimap-viewport { border-color: rgba(9, 210, 255, .95); background: rgba(9,210,255,.09); }
.canvas-node {
  border: 1px solid rgba(57, 118, 172, 0.48); background: rgba(20, 29, 44, 0.90); color: #eff7ff;
  border-radius: 20px; box-shadow: 0 0 0 1px rgba(4, 29, 44, 0.35), 0 14px 28px rgba(0,0,0,.28), 0 0 24px rgba(9,210,255,.06);
}
.canvas-node.selected, .canvas-node.running {
  border-color: rgba(0, 226, 255, 0.82);
  box-shadow: 0 0 0 2px rgba(0, 226, 255, 0.14), 0 0 28px rgba(0, 226, 255, 0.16), 0 16px 28px rgba(0,0,0,.32);
}
.canvas-node.failed { border-color: rgba(255, 84, 84, .70); }
.canvas-node.success { border-color: rgba(58, 214, 161, .70); }
.canvas-node.group-node {
  background: rgba(12, 19, 31, 0.42); border: 1px dashed rgba(9, 210, 255, 0.45); box-shadow: 0 0 0 1px rgba(9,210,255,.05);
}
.node-header {
  height: 42px; border-bottom: 1px solid rgba(78, 112, 145, 0.18); border-radius: 20px 20px 0 0;
  background: linear-gradient(180deg, rgba(31, 43, 65, .62), rgba(20, 29, 44, 0)); color: #f2f8ff;
}
.group-node .node-header { background: rgba(14, 21, 35, 0.68); }
.node-badge {
  background: rgba(9, 210, 255, 0.12); color: #79e7ff; border-color: rgba(9,210,255,.26);
}
.node-title { color: #eff7ff; }
.node-menu-btn { color: #b9c8d7; }
.node-menu-btn:hover { background: rgba(255,255,255,.06); }
.node-body { color: #dce8f5; }
.node-label, .node-meta, .char-count, .handle-label { color: #8ea5bd; }
.node-textarea, .generator-form select, .generator-form input, .field input, .field textarea, .field select, .settings-grid input, .settings-grid textarea {
  background: rgba(8, 13, 24, 0.72); color: #eef6ff; border: 1px solid rgba(80, 112, 141, 0.25);
}
.image-drop {
  background: rgba(8, 13, 24, 0.52); border: 1px dashed rgba(84, 128, 168, 0.34); color: #cfe4f7;
}
.image-drop.has-image { border-style: solid; }
.image-drop img { border-radius: 16px; }
.output-image { background: rgba(8, 13, 24, 0.68); }
.mini-button, .run-node-btn, .button {
  background: rgba(10, 18, 30, 0.94); color: #eff8ff; border: 1px solid rgba(83, 121, 156, 0.26);
}
.mini-button:hover, .run-node-btn:hover, .button:hover { background: rgba(17, 31, 50, 0.96); }
.handle {
  width: var(--canvas-handle-size); height: var(--canvas-handle-size); background: #07131f; border: 2px solid rgba(37, 227, 255, 0.92); box-shadow: 0 0 0 9px rgba(9,210,255,.16), 0 0 18px rgba(9,210,255,.30);
}
.handle[data-kind="text"] { background: #10213a; }
.handle[data-kind="image"] { background: #10213a; }
.edge-path { stroke: rgba(159, 223, 255, 0.72); stroke-width: 2.6; }
.edge-path.selected { stroke: rgba(42, 239, 255, 0.98); stroke-width: 4; filter: drop-shadow(0 0 6px rgba(42,239,255,.72)); }
.edge-dot { fill: #0a1622; stroke: rgba(42,239,255,.92); }
.temp-edge { stroke: rgba(42,239,255,.95); stroke-width: 2.6; fill: none; stroke-dasharray: 7 7; }
.temp-edge.retracting { opacity: .82; stroke-dasharray: 5 5; }
.selection-box { border: 1px solid rgba(42,239,255,.95); background: rgba(42,239,255,.10); }
.inspector, .statusbar { display: none !important; }
.modal-card {
  background: rgba(11, 19, 32, 0.98); color: #eff8ff; border: 1px solid rgba(78, 112, 145, 0.26); box-shadow: 0 18px 40px rgba(0,0,0,.45);
}
.prompt-dock {
  position: absolute; left: 84px; bottom: 16px; width: min(690px, calc(100% - 220px)); min-height: 128px;
  background: rgba(12, 18, 30, 0.92); border: 1px solid rgba(78, 112, 145, 0.24); border-radius: 18px;
  box-shadow: 0 14px 30px rgba(0,0,0,.34); padding: 12px 14px; z-index: 12;
}
.prompt-dock-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.prompt-add-btn {
  display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 12px; border: 1px solid rgba(9,210,255,.28);
  background: rgba(8, 24, 40, 0.95); color: #eaf7ff; cursor: pointer;
}
.prompt-dock-body { color: #8ea5bd; font-size: 13px; line-height: 1.7; }
.prompt-dock-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.prompt-action-chip {
  display: inline-flex; align-items: center; padding: 5px 10px; border-radius: 999px; background: rgba(255,255,255,.04);
  border: 1px solid rgba(78, 112, 145, 0.20); color: #cfe1f3; font-size: 12px;
}
@media (max-width: 1100px) {
  .prompt-dock { width: calc(100% - 120px); left: 76px; }
}


/* ===== V1.0.3 左侧复刻布局 ===== */
.left-floating-brand { left: 14px; top: 10px; display:flex; align-items:center; gap:12px; }
.back-floating-btn { width: 32px; height: 32px; border-radius: 10px; background: transparent; color:#eaf4ff; border: none; box-shadow:none; font-size:22px; }
.back-floating-btn:hover { background: rgba(255,255,255,.05); }
.project-id-pill { min-width: 96px; height: 34px; padding: 0 14px; border-radius: 12px; background: rgba(13, 20, 34, 0.96); border: 1px solid rgba(94, 125, 154, 0.18); color:#f5fbff; display:flex; align-items:center; justify-content:center; font-weight:700; letter-spacing:.04em; box-shadow: 0 8px 18px rgba(0,0,0,.22); }
.project-name, .save-status, #project-menu-btn { display:none !important; }
.top-actions { top: 10px; right: 14px; }
#run-all-btn, #export-btn, #settings-btn { display: none; }
.node-library.seng-sidebar {
  position: absolute; left: 10px; top: 86px; margin: 0; width: 46px; padding: 8px 0; gap: 0;
  background: rgba(12, 18, 31, 0.95); border: 1px solid rgba(79, 111, 139, 0.25); border-radius: 18px; overflow: visible;
}
.sidebar-top-lock { display:flex; justify-content:center; margin-bottom: 8px; }
.sidebar-main-btn, .sidebar-nav-btn {
  border: 0; background: transparent; color:#91acc7; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
  width: 100%; padding: 7px 0; cursor: pointer;
}
.sidebar-main-btn .tool-icon, .sidebar-nav-btn .tool-icon {
  width: 32px; height: 32px; border-radius: 12px; background: transparent; border: none; color: #eaf4ff; display:grid; place-items:center; font-size:18px;
}
.sidebar-nav-btn span:last-child { font-size: 11px; line-height: 1; }
.sidebar-nav-btn:hover, .sidebar-main-btn:hover { color:#f4fbff; }
.sidebar-nav-btn.active .tool-icon, .sidebar-main-btn.active .tool-icon {
  background: rgba(20, 43, 61, 0.98); box-shadow: inset 0 0 0 1px rgba(17, 225, 255, 0.26), 0 0 0 1px rgba(17, 225, 255, 0.10), 0 0 18px rgba(17,225,255,.16);
}
.sidebar-nav-btn.active { color:#39dcff; }
.add-menu-panel {
  position: absolute; left: 52px; top: 114px; width: 188px; padding: 14px 0 12px;
  background: linear-gradient(180deg, rgba(20, 27, 42, 0.98), rgba(16, 22, 35, 0.98));
  border: 1px solid rgba(80, 112, 141, 0.20); border-radius: 16px; box-shadow: 0 22px 48px rgba(0,0,0,.36);
}
.add-menu-panel.hidden { display:none; }
.add-menu-section-title { color: #8ea6c0; font-size: 12px; padding: 0 16px 10px; }
.add-menu-item {
  width: calc(100% - 16px); margin: 0 8px 2px; height: 38px; border: 0; background: transparent; color:#eff8ff;
  display:flex; align-items:center; gap:12px; border-radius: 10px; padding: 0 12px; cursor:pointer; text-align:left;
}
.add-menu-item:hover { background: rgba(255,255,255,.05); }
.add-menu-ico { width: 18px; display:inline-flex; align-items:center; justify-content:center; opacity:.9; font-size: 15px; }
.add-menu-ico img { width: 17px; height: 17px; display: block; }
.library-divider { margin: 10px 12px; background: rgba(92, 122, 151, .18); }
.canvas-hint { display:none; }
.zoom-controls, .minimap { display:none; }
.canvas-empty { left: 120px; top: 120px; right: auto; bottom: auto; width: 320px; place-content:start; text-align:left; }
.canvas-empty .empty-mark { display:none; }
.canvas-empty p { max-width: 280px; }
@media (max-width: 800px) {
  .add-menu-panel { left: 50px; width: 184px; }
}


/* ===== V1.0.4 文本工作台 ===== */
.prompt-toolbar {
  position: absolute; z-index: 15; display:flex; align-items:center; gap:0; padding: 3px;
  background: rgba(13, 20, 34, 0.96); border:1px solid rgba(82, 116, 148, .22); border-radius: 14px;
  box-shadow: 0 12px 28px rgba(0,0,0,.30);
}
.prompt-toolbar.hidden { display:none; }
.prompt-toolbar-count {
  padding: 0 12px; font-size: 13px; color:#8099b3; line-height: 34px; border-right:1px solid rgba(82,116,148,.14);
}
.prompt-toolbar-btn {
  height: 34px; padding: 0 16px; border:0; background: transparent; color:#7f95ab; cursor:pointer; border-radius: 11px; font-size: 14px;
}
.prompt-toolbar-btn:hover { background: rgba(255,255,255,.04); color:#ecf7ff; }
.prompt-toolbar-btn.active { color:#f6fbff; background: rgba(255,255,255,.04); }
.canvas-node.prompt-node { border-radius: 20px; }
.prompt-node .node-header { border-bottom: 0; background: transparent; height: 38px; }
.prompt-node .node-badge { background: transparent; border: 0; color:#29f0c2; font-size: 24px; width:auto; height:auto; padding: 0 0 0 2px; }
.prompt-node .node-title { color:#2df0c7; font-size: 17px; }
.prompt-node .node-body { padding: 4px 16px 14px; }
.prompt-node .node-label, .prompt-node .node-meta { display:none; }
.prompt-node .node-textarea {
  min-height: 118px; background: transparent; border:0; padding: 0; font-size: 18px; color:#7b8c9c; resize:none; line-height:1.55;
}
.prompt-node .node-textarea::placeholder { color:#5f7081; }
.prompt-node .node-textarea:focus { outline:none; }
.prompt-node .resize-handle { right: 10px; bottom: 10px; width: 16px; height: 16px; border:0; background: transparent; box-shadow:none; }
.prompt-node .resize-handle::before, .prompt-node .resize-handle::after {
  content:''; position:absolute; right:0; bottom:0; border-bottom:2px solid #8794a4; border-right:2px solid #8794a4;
}
.prompt-node .resize-handle::before { width:16px; height:16px; }
.prompt-node .resize-handle::after { width:10px; height:10px; right:4px; bottom:4px; }
.prompt-dock {
  position:absolute; left: 50%; transform: none; bottom: 22px; width: min(720px, calc(100% - 230px));
  background: linear-gradient(180deg, rgba(20, 27, 42, 0.98), rgba(16, 22, 35, 0.98)); border:1px solid rgba(82,116,148,.18);
  border-radius: 18px; box-shadow: 0 22px 56px rgba(0,0,0,.36); padding: 14px 14px 12px; z-index: 16;
}
.prompt-dock.hidden { display:none; }
.prompt-composer-surface {
  position: relative; min-height: 126px; background: rgba(255,255,255,.01); border-radius: 14px; padding: 0; display:flex;
}
.composer-input {
  flex:1; background: transparent; border:0; resize:none; outline:none; color:#dce8f5; font-size: 16px; line-height:1.75; min-height: 126px; padding: 14px 16px;
}
.composer-input::placeholder { color:#778ca2; }
.composer-send:disabled { cursor: wait; opacity: 1; }
.composer-send.is-loading { animation: none; }
.composer-side-icons { display:flex; flex-direction:column; gap:10px; padding: 14px 10px 10px 0; }
.composer-side-btn {
  width: 24px; height: 24px; border:0; background: transparent; color:#8da2b8; cursor:pointer; border-radius:8px;
}
.composer-side-btn:hover { background: rgba(255,255,255,.04); color:#eaf6ff; }
.composer-footer { margin-top: 8px; display:flex; align-items:center; justify-content:space-between; gap: 10px; }
.composer-left, .composer-right { display:flex; align-items:center; gap: 8px; }
.model-select { position: relative; }
.model-select-btn, .composer-chip {
  height: 30px; border-radius: 10px; border:1px solid rgba(82,116,148,.22); background: rgba(10, 18, 30, 0.96); color:#ddebfb; cursor:pointer; padding: 0 11px; font-size: 13px;
}
.model-select-btn { display:inline-flex; align-items:center; gap:8px; }
.model-select-btn .caret { color:#90a4ba; }
.model-dropdown {
  position:absolute; left:0; bottom: calc(100% + 10px); width: 215px; padding: 10px; background: rgba(19, 26, 40, 0.98); border:1px solid rgba(82,116,148,.24); border-radius: 14px;
  box-shadow: 0 20px 40px rgba(0,0,0,.38);
}
.model-dropdown.hidden { display:none; }
.model-dropdown-title { color:#9bb0c6; font-size: 12px; padding: 0 4px 8px; }
.model-option {
  width:100%; height: 34px; border-radius: 10px; border:1px solid rgba(82,116,148,.16); background: transparent; color:#edf8ff; text-align:left; padding: 0 12px; cursor:pointer; margin-bottom: 4px;
  display:flex; align-items:center; justify-content:space-between;
}
.model-option:hover { background: rgba(255,255,255,.04); }
.model-option.active { border-color: rgba(15, 222, 255, .68); box-shadow: inset 0 0 0 1px rgba(15,222,255,.24); color:#67e8ff; }
.model-option b { margin-left:auto; color:#58e6ff; font-size:12px; }
.model-catalog-section { display:grid; gap:12px; margin-top:16px; padding:14px; border:1px solid rgba(110,137,155,.24); border-radius:12px; background:rgba(8,18,28,.34); }
.model-catalog-section > div:first-child { display:grid; gap:3px; }
.model-catalog-section > div:first-child strong { color:#dcebf2; font-size:13px; }
.model-catalog-section > div:first-child span { color:#718796; font-size:11px; }
.model-catalog-list { display:grid; gap:10px; }
.model-catalog-group { display:grid; gap:7px; }
.model-catalog-group > strong { color:#74dded; font-size:11px; }
.model-catalog-group > div { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px; }
.model-catalog-item { display:flex; align-items:center; justify-content:space-between; gap:8px; min-width:0; padding:8px 10px; border:1px solid rgba(113,139,158,.18); border-radius:9px; background:rgba(13,25,36,.68); }
.model-catalog-item b { overflow:hidden; color:#d5e1e8; font-size:11px; font-weight:600; text-overflow:ellipsis; white-space:nowrap; }
.model-catalog-item small { color:#708696; font-size:9px; white-space:nowrap; }
.composer-chip.ghost { color:#c9d8e8; }
.composer-chip.accent { color:#ffd75c; }
.composer-estimate { color:#ff505f; font-size: 13px; }
.composer-send {
  width: 34px; height: 34px; border-radius: 50%; border:0; cursor:pointer; background: #1687ff; color:#ffffff; font-size: 19px; font-weight: 800;
  box-shadow: 0 0 0 1px rgba(22,135,255,.38), 0 0 16px rgba(22,135,255,.32), 0 6px 16px rgba(0,0,0,.12);
}
.composer-send:hover:not(:disabled) { transform: translateY(-1px); color:#ffffff; background:#0878ef; }
.composer-send.is-loading,
.composer-send:disabled {
  color:#1687ff !important;
  background:#f5f9ff !important;
  box-shadow:0 0 0 1px rgba(255,255,255,.52), 0 0 16px rgba(255,255,255,.26) !important;
  transform:none !important;
  pointer-events:none;
}
.image-dock-content { display:flex; flex-direction:column; min-height: 184px; }
.image-composer-surface {
  display:grid; grid-template-columns: 72px minmax(0, 1fr) 30px; gap: 12px; align-items:start; min-height: 136px;
}
.image-dock-add {
  width: 50px; height: 50px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap: 3px;
  border:1px solid rgba(22, 222, 255, .78); border-radius: 9px; background: rgba(7, 19, 31, .72); color:#4fe7ff;
  font-size: 12px; cursor:pointer;
}
.image-dock-add:hover { background: rgba(14, 43, 58, .76); box-shadow: 0 0 18px rgba(22,222,255,.14); }
.image-dock-add-mark { font-size: 24px; line-height: 18px; font-weight: 300; }
.image-composer-input {
  width:100%; min-height: 112px; padding: 14px 0 8px; border:0; outline:0; resize:none; background:transparent;
  color:#d9e7f4; font-size:15px; line-height:1.7;
}
.image-composer-input::placeholder { color:#70869c; opacity:1; }
.image-composer-side-icons { display:flex; flex-direction:column; align-items:center; gap:8px; padding-top:2px; }
.image-dock-divider { height:1px; margin: 2px 0 10px; background: rgba(217, 230, 241, .64); }
.image-dock-footer { display:flex; align-items:center; justify-content:space-between; gap: 12px; }
.image-dock-controls { display:flex; align-items:center; gap:8px; min-width:0; }
.image-dock-select { position:relative; display:inline-flex; min-width:0; }
.image-dock-select select {
  max-width: 188px; height:32px; padding: 0 30px 0 11px; border:1px solid rgba(91, 121, 150, .34); border-radius:9px;
  background:#111a29; color:#dce9f6; outline:0; cursor:pointer; font-size:13px;
}
.image-dock-select select:hover, .image-dock-select select:focus { border-color: rgba(33, 214, 247, .58); }
.image-count-select select { min-width:72px; }
.image-composer-estimate { color:#ff4e60; font-size:13px; white-space:nowrap; }
@media (max-width: 1000px) {
  .prompt-dock { width: calc(100% - 110px); left: 76px; transform:none; }
  .image-dock-footer { align-items:flex-end; }
  .image-dock-controls { flex-wrap:wrap; }
}


/* ===== V1.0.4.2 文本节点重做修复 ===== */
.canvas-node.prompt-node {
  min-width: 340px !important;
  min-height: 198px !important;
  background: linear-gradient(180deg, rgba(18, 26, 40, 0.98) 0%, rgba(13, 20, 31, 0.98) 100%) !important;
  border: 2px solid rgba(23, 220, 255, 0.88) !important;
  border-radius: 22px !important;
  box-shadow: 0 0 0 1px rgba(10, 42, 58, 0.55), 0 0 32px rgba(11, 214, 255, 0.18), 0 18px 38px rgba(0,0,0,0.32) !important;
  overflow: visible !important;
}
.canvas-node.prompt-node.selected {
  box-shadow: 0 0 0 2px rgba(27, 223, 255, 0.18), 0 0 42px rgba(11,214,255,.24), 0 20px 42px rgba(0,0,0,.34) !important;
}
.prompt-node .node-header {
  height: 48px !important;
  padding: 0 18px !important;
  border: 0 !important;
  background: transparent !important;
  align-items: flex-end !important;
}
.prompt-node .node-badge {
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #29f0c2 !important;
  font-size: 28px !important;
  line-height: 1 !important;
}
.prompt-node .node-title {
  color: #29f0c2 !important;
  font-size: 15px !important;
  font-weight: 700 !important;
}
.prompt-node .node-menu-btn { color: #8ea3b9 !important; }
.prompt-node .node-body {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  padding: 2px 18px 16px !important;
  min-height: 128px !important;
  background: transparent !important;
}
.prompt-node .node-label,
.prompt-node .node-meta { display: none !important; }
.prompt-node .node-textarea {
  display: block !important;
  width: 100% !important;
  flex: 1 1 auto !important;
  min-height: 118px !important;
  margin: 0 !important;
  padding: 4px 0 0 !important;
  resize: none !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  background: transparent !important;
  background-color: transparent !important;
  border: 0 !important;
  outline: none !important;
  box-shadow: none !important;
  color: #c6d7ea !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  line-height: 1.72 !important;
  letter-spacing: 0.01em !important;
  border-radius: 0 !important;
}
.prompt-node .node-textarea::placeholder {
  color: #8ea4bb !important;
  opacity: 1 !important;
}
.prompt-node .node-textarea:focus {
  outline: none !important;
  box-shadow: none !important;
  background: transparent !important;
}
.prompt-node .handle.input { left: var(--canvas-handle-offset) !important; }
.prompt-node .handle.output { right: var(--canvas-handle-offset) !important; }
.prompt-node .handle-label { display: none !important; }
.prompt-node .resize-handle {
  right: 12px !important;
  bottom: 12px !important;
  width: 18px !important;
  height: 18px !important;
  background: transparent !important;
  border: 0 !important;
}
.prompt-node .resize-handle::before,
.prompt-node .resize-handle::after {
  content: '';
  position: absolute;
  right: 0;
  bottom: 0;
  border-right: 2px solid #7f8d9d;
  border-bottom: 2px solid #7f8d9d;
}
.prompt-node .resize-handle::before {
  width: 18px;
  height: 18px;
}
.prompt-node .resize-handle::after {
  width: 11px;
  height: 11px;
  right: 4px;
  bottom: 4px;
}
.prompt-toolbar { min-width: 420px; }
.prompt-dock { width: min(760px, calc(100% - 250px)); }
.composer-input { color: #d9e7f4 !important; }
.composer-input::placeholder { color: #7d91a5 !important; }


/* ===== V1.0.4.3 可视创建 + Toast 修复 ===== */
.toast-container { top: 18px !important; right: 18px !important; }
.toast {
  color: #dcecff !important;
  background: rgba(13, 20, 34, 0.97) !important;
  border: 1px solid rgba(74, 112, 146, 0.32) !important;
  box-shadow: 0 14px 34px rgba(0,0,0,.38) !important;
  border-radius: 12px !important;
}
.toast.success { border-color: rgba(36, 216, 187, .42) !important; }
.toast.error { border-color: rgba(255, 80, 100, .48) !important; }
.canvas-node.prompt-node {
  width: 340px;
  height: 198px;
}


/* ===== V1.0.4.5 关键布局修复：让画布真正占满窗口 ===== */
.app-shell {
  display: block !important;
  position: relative !important;
  width: 100vw !important;
  height: 100vh !important;
  overflow: hidden !important;
}
.workspace {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 100% !important;
  display: grid !important;
  grid-template-columns: 76px minmax(0, 1fr) 0 !important;
}
.canvas-viewport {
  width: 100% !important;
  height: 100% !important;
  min-height: 100% !important;
}


/* ===== V1.0.4.5b: sidebar floats above a full-screen canvas ===== */
.workspace {
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
}
.canvas-viewport {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 100% !important;
  min-height: 100% !important;
}


/* ===== V1.6.3 图片节点引用与尺寸面板 ===== */
.canvas-node.image-node {
  min-width: 220px;
  min-height: 220px;
  overflow: visible;
  border-radius: 14px;
  background: #182230;
}
.canvas-node.image-node.success:not(.selected) {
  border-color: rgba(16, 211, 240, .62);
  border-style: dashed;
}
.image-node .node-header {
  height: 30px;
  padding: 0 10px;
  gap: 6px;
  border-radius: 13px 13px 0 0;
  background: rgba(7, 16, 28, .88);
  border-bottom: 1px solid rgba(75, 116, 151, .22);
}
.image-node .node-badge {
  width: 15px;
  height: 15px;
  border-radius: 3px;
  font-size: 10px;
  color: #48a9ff;
  background: transparent;
  border: 1px solid #388fd0;
}
.image-node .node-title {
  color: #5bb8ff;
  font-size: 13px;
  font-weight: 650;
}
.image-node-dimensions {
  margin-left: auto;
  color: #a7b6c6;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
.image-node .node-menu-btn { display: none; }
.image-node .node-body {
  height: calc(100% - 30px);
  min-height: 0;
  padding: 0;
}
.image-node .image-drop {
  width: 100%;
  height: 100%;
  min-height: 0;
  border: 0;
  border-radius: 0 0 13px 13px;
  background: #1b2533;
  overflow: hidden;
  cursor: default;
}
.image-node .image-drop img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0 0 13px 13px;
}
.image-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: #688098;
  font-size: 12px;
}
.image-placeholder-mark {
  color: #56a7ff;
  font-size: 38px;
  line-height: 1;
}
.image-replace-btn {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  height: 34px;
  padding: 0 13px;
  border: 1px solid rgba(92, 112, 137, .30);
  border-radius: 10px;
  background: rgba(13, 19, 29, .90);
  color: #eef5fc;
  font-size: 13px;
  cursor: pointer;
}
.image-drop.has-image .image-replace-btn { opacity: 0; transform: translateY(-3px); pointer-events: none; transition: opacity .14s ease, transform .14s ease; }
.image-node.selected .image-drop.has-image .image-replace-btn,
.image-node:hover .image-drop.has-image .image-replace-btn { opacity: 1; transform: none; pointer-events: auto; }
.image-node-meta { display: none; }
.image-node .handle {
  width: var(--canvas-handle-size);
  height: var(--canvas-handle-size);
  transform: translateY(-50%);
  border: 2px solid #16dafa;
  background: #061522;
  box-shadow: 0 0 0 9px rgba(8, 197, 226, .16), 0 0 18px rgba(13, 221, 250, .30);
}
.image-node .handle.input { left: var(--canvas-handle-offset); }
.image-node .handle.output { right: var(--canvas-handle-offset); }
.image-node.selected .handle {
  width: var(--canvas-handle-size);
  height: var(--canvas-handle-size);
  transform: translateY(-50%);
  box-shadow: 0 0 0 9px rgba(8, 197, 226, .19), 0 0 20px rgba(13, 221, 250, .34);
}
.image-node.selected .handle.input { left: var(--canvas-handle-offset); }
.image-node.selected .handle.output { right: var(--canvas-handle-offset); }
.image-node.selected .handle::after {
  inset: 1px;
}
.image-node .handle-label { display: none; }
.edge-path.edge-image { stroke: #18d9fb; stroke-width: 3; filter: drop-shadow(0 0 4px rgba(24, 217, 251, .55)); }
.edge-dot.edge-image { fill: #18d9fb; stroke: #c4f8ff; }
.edge-path.selected { stroke: #18d9fb; stroke-width: 4; stroke-dasharray: 12 10; filter: drop-shadow(0 0 7px rgba(24,217,251,.76)); animation: selected-edge-flow .7s linear infinite; }
.edge-path.retracting { stroke-dasharray: 9 8; animation: none; }
@keyframes selected-edge-flow { to { stroke-dashoffset: -22; } }

.image-composer-surface {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 136px;
  padding-right: 34px;
}
.image-dock-assets, .media-dock-assets {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 52px;
}
.image-reference-list { display: flex; align-items: center; gap: 8px; }
.image-reference-card {
  position: relative;
  width: 50px;
  height: 50px;
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(93, 130, 161, .42);
  border-radius: 8px;
  background: #0c1522;
  cursor: pointer;
}
.image-reference-card img { width: 100%; height: 100%; object-fit: cover; display: block; }
.image-reference-card .image-reference-fallback {
  display: grid;
  width: 100%;
  height: 100%;
  place-items: center;
  color: #8eeafa;
  font-size: 19px;
  font-weight: 800;
  background: linear-gradient(145deg, rgba(27, 65, 86, .82), rgba(12, 21, 34, .96));
}
.media-dock-assets.hidden { display: none; }
.image-reference-card .image-reference-label {
  position: absolute;
  left: 3px;
  right: 3px;
  bottom: 3px;
  padding: 1px 3px;
  border-radius: 3px;
  background: rgba(5, 10, 17, .72);
  color: #f3f8fd;
  font-size: 10px;
  text-align: center;
}
.image-composer-input {
  min-height: 62px;
  padding: 4px 10px 6px;
}
.image-composer-side-icons {
  position: absolute;
  top: 0;
  right: 0;
  padding-top: 0;
}
.image-size-control { position: relative; }
.image-size-btn {
  height: 32px;
  min-width: 108px;
  padding: 0 10px;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border: 1px solid rgba(91, 121, 150, .34);
  border-radius: 9px;
  background: #111a29;
  color: #dce9f6;
  font-size: 13px;
  cursor: pointer;
}
.image-size-btn:hover,
.image-size-btn[aria-expanded="true"] { border-color: #18d7f5; color: #effcff; }
.image-size-caret { color: #93a7bb; }
.image-size-menu {
  position: absolute;
  left: 0;
  bottom: calc(100% + 10px);
  width: 300px;
  padding: 12px;
  z-index: 40;
  border: 1px solid rgba(85, 111, 139, .32);
  border-radius: 10px;
  background: #10151e;
  box-shadow: 0 18px 44px rgba(0, 0, 0, .48);
}
.image-size-section-title {
  margin-bottom: 7px;
  color: #b7c4d1;
  font-size: 12px;
  font-weight: 650;
}
.image-aspect-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.image-size-option,
.image-resolution-option {
  position: relative;
  height: 36px;
  border: 1px solid rgba(83, 106, 133, .34);
  border-radius: 10px;
  background: #1d2532;
  color: #e0e8f1;
  font-size: 13px;
  cursor: pointer;
  outline: 0;
}
.image-size-option:hover,
.image-resolution-option:hover { background: #242e3d; border-color: rgba(88, 143, 180, .55); }
.image-size-option.active,
.image-resolution-option.active {
  border-color: #12d5f1;
  background: #162c37;
  box-shadow: inset 0 0 0 1px rgba(18, 213, 241, .18);
}
.image-size-option.active::after,
.image-resolution-option.active::after {
  content: '✓';
  position: absolute;
  top: -5px;
  right: -4px;
  width: 14px;
  height: 14px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #12d5f1;
  color: white;
  font-size: 9px;
}
.image-size-separator { height: 1px; margin: 14px 0 10px; background: rgba(88, 112, 138, .20); }
.image-resolution-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
/* ===== V1.7.0 账号登录与注册 ===== */
[hidden] { display: none !important; }

.auth-gate {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  overflow: auto;
  padding: 38px;
  color: #eef8ff;
  background:
    radial-gradient(circle at 16% 12%, rgba(31, 213, 255, .12), transparent 34%),
    radial-gradient(circle at 84% 86%, rgba(95, 81, 255, .14), transparent 34%),
    #050912;
}
.auth-gate::before {
  content: '';
  position: absolute;
  inset: 0;
  opacity: .36;
  background-image: radial-gradient(rgba(86, 153, 204, .42) 1px, transparent 1px);
  background-size: 28px 28px;
  mask-image: linear-gradient(to bottom, black, transparent 84%);
}
.auth-ambient {
  position: absolute;
  width: 360px;
  height: 360px;
  border-radius: 50%;
  filter: blur(100px);
  opacity: .12;
  pointer-events: none;
}
.auth-ambient-one { left: -120px; top: 20%; background: #08d9ff; }
.auth-ambient-two { right: -120px; bottom: 8%; background: #735cff; }
.auth-layout {
  position: relative;
  z-index: 1;
  width: min(1080px, 100%);
  min-height: 610px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 440px;
  align-items: center;
  gap: 86px;
}

/* ===== V1.8.0 RunningHub canvas interaction parity ===== */
.seng-sidebar {
  top: 50% !important;
  transform: translateY(-50%);
  width: 48px !important;
  max-height: none;
  padding: 6px 0 !important;
  border-radius: 22px !important;
  overflow: visible !important;
}
.seng-sidebar::-webkit-scrollbar { display: none; }
.left-floating-brand .project-name { display: block !important; width: 170px; height: 34px; padding: 0 10px; border: 0; background: rgba(20,20,20,.9); font-size: 14px; box-shadow: none; }
.top-actions { display: flex !important; align-items: center; }
.canvas-top-chip,
.canvas-wallet-chip,
.user-menu-btn { height: 34px; display: inline-flex; align-items: center; border: 1px solid rgba(255,255,255,.08); border-radius: 10px; background: rgba(20,20,20,.92); color: #cfcfcf; padding: 0 12px; }
.canvas-top-chip { cursor: pointer; }
.canvas-top-chip:hover { background: #2d2d2d; color: white; }
.run-sequence-button { border-color: rgba(42, 221, 244, .45); color: #dffbff; background: rgba(10, 68, 82, .92); font-weight: 750; }
.run-sequence-button:hover { border-color: rgba(65, 234, 255, .72); background: rgba(12, 91, 108, .96); }
.run-sequence-button.is-running { border-color: rgba(255, 105, 119, .56); background: rgba(91, 27, 39, .92); color: #ffd9dd; }
.execution-order-summary {
  cursor: default;
  border-color: rgba(79, 180, 255, .26);
  background: rgba(13, 32, 48, .9);
  color: #91d9ff;
  font-size: 10px;
  white-space: nowrap;
}
.execution-order-summary:hover { background: rgba(13, 32, 48, .9); color: #91d9ff; }
.execution-order-summary.cyclic { border-color: rgba(255, 103, 119, .48); color: #ff9ca7; }
.save-project-button { border-color: rgba(91, 224, 171, .32); color: #b8f7d8; }
.save-project-button:hover { border-color: rgba(91, 224, 171, .62); background: rgba(18, 72, 52, .96); color: #effff7; }
.save-project-button.has-changes {
  border-color: rgba(255, 181, 71, .62);
  background: rgba(74, 49, 16, .88);
  color: #ffe0aa;
  box-shadow: 0 0 0 2px rgba(255, 181, 71, .08);
}
.save-project-button.is-saving { cursor: wait; opacity: .72; }
.save-project-button.save-failed { border-color: rgba(255, 103, 119, .58); color: #ffb0b9; }
.reset-all-nodes-button { border-color: rgba(255, 181, 71, .34); color: #ffd99b; }
.reset-all-nodes-button:hover { border-color: rgba(255, 181, 71, .62); background: rgba(74, 49, 16, .96); color: #fff0d2; }
.canvas-wallet-chip { color: #c9ff00; }
.sidebar-top-lock,
#sidebar-select-btn,
#sidebar-move-btn,
#sidebar-note-btn,
#sidebar-help-btn { display: none !important; }
.sidebar-nav-btn { padding: 5px 0 !important; min-height: 44px; }
.sidebar-nav-btn .tool-icon { width: 30px !important; height: 30px !important; }
.sidebar-nav-btn .tool-icon img { width: 19px; height: 19px; display: block; opacity: .74; }
.sidebar-nav-btn:hover .tool-icon img,
.sidebar-nav-btn.active .tool-icon img { opacity: 1; }
.sidebar-nav-btn span:last-child { display: none; }
#sidebar-add-btn { order: -10; }
#sidebar-search-btn { order: -9; }
#sidebar-assets-btn { order: -8; }
#sidebar-workflow-btn { order: -7; }
#sidebar-history-btn { order: -6; }
#sidebar-board-btn { order: -5; }
#sidebar-editor-btn { order: -4; }
.seng-sidebar { display: flex !important; flex-direction: column; }
#sidebar-add-btn .tool-icon {
  background: #f2f2f2 !important;
  border-radius: 50% !important;
  box-shadow: 0 6px 18px rgba(0,0,0,.34) !important;
  color: transparent !important;
  background-image: url('/static/assets/canvas-icons/add.svg') !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 21px 21px !important;
}
.add-menu-panel {
  left: 58px !important;
  top: -86px !important;
  width: 214px !important;
  max-height: min(640px, calc(100vh - 96px));
  overflow: auto;
  padding: 14px 0 !important;
  border-radius: 14px !important;
  background: rgba(25,25,25,.985) !important;
  border-color: rgba(255,255,255,.08) !important;
}
.add-menu-item { height: 36px !important; color: #d9d9d9 !important; }
.add-menu-item:hover { background: #272727 !important; }
#add-menu-panel > [data-node-type="generator"]:not(.rh-ai-app-item) { display: none; }
.add-menu-section-title { color: #747474 !important; }
.new-badge { margin-left: 5px; padding: 1px 5px; border: 1px solid #8b79c9; border-radius: 4px; color: #ad9be9; font-size: 9px; font-weight: 600; }

.rh-floating-panel {
  position: absolute;
  z-index: 48;
  left: 76px;
  top: 84px;
  width: min(470px, calc(100vw - 98px));
  max-height: calc(100vh - 126px);
  overflow: auto;
  padding: 14px;
  color: #dedede;
  background: rgba(28,28,28,.985);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 16px;
  box-shadow: 0 28px 70px rgba(0,0,0,.56);
}
.rh-floating-panel.hidden { display: none; }
.rh-panel-head,
.rh-panel-search-row { display: flex; align-items: center; gap: 10px; }
.rh-panel-head { justify-content: space-between; margin-bottom: 12px; }
.rh-panel-close {
  flex: 0 0 30px; width: 30px; height: 30px; border: 0; border-radius: 8px;
  background: transparent; color: #a9a9a9; font-size: 22px; cursor: pointer;
}
.rh-panel-close:hover { background: #303030; color: white; }
.rh-panel-search-row { margin: -14px -14px 0; padding: 14px; border-bottom: 1px solid rgba(255,255,255,.08); }
.rh-panel-search-row img { width: 20px; height: 20px; opacity: .72; }
.rh-panel-search-row input,
.rh-panel-search {
  flex: 1; width: 100%; height: 34px; border: 0; outline: 0; border-radius: 8px;
  background: #232323; color: #ededed; padding: 0 12px; font-size: 13px;
}
.rh-panel-search-row input { background: transparent; font-size: 14px; }
.rh-panel-tabs { display: flex; align-items: center; gap: 5px; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.rh-panel-tabs button,
.rh-chip-row button,
.rh-panel-actions button,
.rh-batch-btn {
  flex: 0 0 auto; height: 32px; padding: 0 12px; border: 0; border-radius: 8px;
  background: transparent; color: #999; cursor: pointer; white-space: nowrap;
}
.rh-panel-tabs button.active,
.rh-panel-tabs button:hover { background: #303030; color: #f4f4f4; }
.rh-search-panel .rh-panel-tabs { margin: 0 -14px; padding: 12px 14px; border-bottom: 1px solid rgba(255,255,255,.08); }
.rh-search-results { display: grid; gap: 6px; padding-top: 12px; }
.rh-search-result {
  display: grid; grid-template-columns: 38px minmax(0,1fr) auto; align-items: center; gap: 10px;
  min-height: 50px; padding: 7px 10px; border: 0; border-radius: 10px; background: transparent; color: #e8e8e8; text-align: left; cursor: pointer;
}
.rh-search-result:hover { background: #303030; }
.rh-search-result > span:nth-child(2) { min-width: 0; display: grid; gap: 3px; }
.rh-search-result strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rh-search-result small { display: block; }
.rh-search-result-mark { width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid #494949; border-radius: 9px; color: #b8b8b8; font-weight: 700; }
.rh-search-result small { color: #777; }
.rh-library-panel,
.rh-workflow-panel,
.rh-history-panel { width: min(480px, calc(100vw - 98px)); }
.rh-panel-search { margin-bottom: 12px; }
.rh-chip-row { display: flex; gap: 5px; overflow-x: auto; margin-bottom: 10px; scrollbar-width: none; }
.rh-chip-row button { background: #242424; }
.rh-chip-row button.active { color: #caff00; border: 1px solid rgba(202,255,0,.34); }
.rh-panel-actions { display: flex; gap: 8px; margin-bottom: 12px; }
.rh-panel-actions button,
.rh-batch-btn { background: #343434; color: #d5d5d5; }
.rh-empty-state {
  min-height: 430px; display: grid; place-content: center; justify-items: center; gap: 10px;
  border: 1px dashed #444; border-radius: 14px; color: #848484; text-align: center;
}
.rh-empty-state strong { color: #f1f1f1; font-size: 20px; }
.rh-empty-state button { margin-top: 10px; height: 40px; padding: 0 24px; border: 0; border-radius: 9px; background: #c7ff00; color: #141414; font-weight: 700; cursor: pointer; }
.rh-workflow-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
.rh-workflow-card { min-height: 64px; padding: 10px; border: 1px solid #3c3c3c; border-radius: 10px; background: #252525; color: #cfcfcf; text-align: left; cursor: pointer; }
.rh-workflow-card:hover { border-color: #5e5e5e; background: #2d2d2d; }
.rh-workflow-card small { display: block; margin-top: 6px; color: #7f7f7f; }
.rh-history-results { min-height: 360px; display: grid; place-items: center; color: #818181; }
.rh-history-item { width: 100%; padding: 10px; border-bottom: 1px solid #383838; color: #d0d0d0; }
.rh-editor-panel { width: min(620px, calc(100vw - 98px)); }
.rh-preview-stage { aspect-ratio: 16/9; display: grid; place-items: center; border-radius: 12px; background: #111; color: #666; }
.rh-timeline { margin-top: 12px; padding: 10px; border-radius: 12px; background: #151515; }
.rh-timeline-ruler { height: 18px; margin-bottom: 8px; border-bottom: 1px solid #484848; }
.rh-timeline-track { height: 36px; margin: 6px 0; padding: 8px 12px; border-radius: 6px; background: #263146; color: #aac8ef; font-size: 12px; }
.rh-timeline-track.audio { background: #25392f; color: #a7d7bd; }

.rh-canvas-controls {
  position: absolute; z-index: 17; left: 16px; bottom: 14px;
  display: flex; align-items: center; gap: 5px; height: 38px; padding: 0 8px;
  border: 1px solid rgba(255,255,255,.06); border-radius: 12px; background: rgba(25,25,25,.96); box-shadow: 0 12px 28px rgba(0,0,0,.34);
}
.rh-canvas-controls button { height: 30px; min-width: 30px; display: grid; place-items: center; border: 0; border-radius: 8px; background: transparent; color: #c9cdd2; cursor: pointer; }
.rh-canvas-controls button:hover,
.rh-canvas-controls button.active { background: #333; color: white; }
.rh-canvas-controls img { width: 17px; height: 17px; opacity: .78; }
.rh-canvas-controls input[type="range"] { width: 76px; accent-color: #bfc2c5; }
.rh-canvas-controls .watermark-control { width: auto; padding: 0 10px; font-size: 12px; }
.minimap.rh-visible { display: block !important; right: auto !important; left: 18px !important; bottom: 60px !important; background: rgba(25,25,25,.96) !important; border-color: rgba(255,255,255,.08) !important; }
.canvas-viewport.edges-hidden .edge-layer { opacity: 0; }
.canvas-viewport.grid-hidden { background-image: none !important; }

.assistant-fab {
  position: absolute;
  z-index: 18;
  right: 24px;
  bottom: 66px;
  width: 66px;
  min-height: 76px;
  display: grid;
  justify-items: center;
  gap: 5px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #dce8ef;
  font-size: 11px;
  cursor: pointer;
}
.assistant-fab img {
  width: 56px;
  height: 56px;
  display: block;
  border-radius: 50%;
  filter: drop-shadow(0 0 14px rgba(177,255,83,.36));
}
.assistant-fab:hover img { transform: translateY(-2px); filter: drop-shadow(0 0 20px rgba(177,255,83,.56)); }
.assistant-fab[aria-expanded="true"] { display: none; }
.assistant-panel {
  position: absolute;
  z-index: 60;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(430px, calc(100vw - 76px));
  display: grid;
  grid-template-rows: 62px minmax(0, 1fr) auto;
  background: rgba(16,16,18,.985);
  border-left: 1px solid rgba(255,255,255,.08);
  box-shadow: -28px 0 70px rgba(0,0,0,.46);
  color: #ececef;
}
.assistant-panel.hidden { display: none; }
.assistant-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 16px;
  border-bottom: 1px solid rgba(255,255,255,.07);
}
.assistant-panel-title { display: flex; align-items: center; gap: 9px; min-width: 0; }
.assistant-panel-title img { width: 28px; height: 28px; border-radius: 50%; }
.assistant-panel-title strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; }
.assistant-panel-actions { display: flex; align-items: center; gap: 4px; }
.assistant-panel-actions button {
  width: 32px;
  height: 32px;
  overflow: hidden;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: transparent;
  cursor: pointer;
  position: relative;
}
.assistant-panel-actions button::after { position: absolute; inset: 0; display: grid; place-items: center; color: #b7b9bf; font-size: 12px; }
#assistant-history-btn::after { content: '历史'; }
#assistant-new-btn::after { content: '新建'; }
#assistant-close-btn::after { content: '关闭'; }
.assistant-panel-actions button:hover { background: #29292c; }
.assistant-conversation { min-height: 0; overflow: auto; padding: 70px 26px 30px; scrollbar-width: thin; }
.assistant-welcome { max-width: 360px; margin: 0 auto; }
.assistant-greeting { display: flex; align-items: center; gap: 14px; margin: 12px 0 26px; }
.assistant-greeting img { width: 48px; height: 48px; border-radius: 50%; filter: drop-shadow(0 0 13px rgba(177,255,83,.3)); }
.assistant-greeting span { display: block; margin-bottom: 3px; color: #b8bac0; font-size: 13px; }
.assistant-greeting h2 { margin: 0; font-size: 30px; line-height: 1.15; }
.assistant-welcome > p { margin: 0 0 12px; color: #777a82; font-size: 12px; }
.assistant-skill-list { display: grid; gap: 4px; }
.assistant-skill-list button {
  display: grid;
  grid-template-columns: 22px 94px minmax(0,1fr);
  align-items: center;
  gap: 8px;
  min-height: 46px;
  padding: 7px 10px;
  border: 1px solid transparent;
  border-radius: 9px;
  background: transparent;
  color: #dedee2;
  text-align: left;
  cursor: pointer;
}
.assistant-skill-list img { width: 18px; height: 18px; opacity: .7; }
.assistant-skill-list button:hover,
.assistant-skill-list button.active { border-color: rgba(194,255,82,.28); background: rgba(194,255,82,.06); }
.assistant-skill-list strong { font-size: 14px; }
.assistant-skill-list span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #7e8087; font-size: 12px; }
.assistant-message-list { display: grid; gap: 16px; }
.assistant-message { max-width: 88%; padding: 11px 13px; border-radius: 12px; line-height: 1.65; font-size: 13px; white-space: pre-wrap; }
.assistant-message.user { justify-self: end; background: #303136; color: #f1f1f3; }
.assistant-message.agent { justify-self: start; background: rgba(194,255,82,.08); border: 1px solid rgba(194,255,82,.16); color: #dfe7d1; }
.assistant-composer { margin: 12px 14px 14px; padding: 10px 12px 9px; border: 1px solid #343438; border-radius: 15px; background: #222225; }
.assistant-composer textarea { width: 100%; min-height: 62px; resize: none; border: 0; outline: 0; background: transparent; color: #ededf0; font: inherit; line-height: 1.6; }
.assistant-composer textarea::placeholder { color: #696b72; }
.assistant-composer-footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.assistant-mode-switch { display: flex; gap: 4px; }
.assistant-mode-switch button,
#assistant-send-btn { height: 30px; padding: 0 12px; border: 0; border-radius: 8px; background: transparent; color: #92949a; cursor: pointer; }
.assistant-mode-switch button.active { background: #333338; color: #eef0f2; }
#assistant-send-btn { background: #d8ff5e; color: #171817; font-weight: 750; }
#assistant-send-btn:disabled { background: #333438; color: #676970; cursor: default; }

.customer-service-dialog { border: 0; padding: 0; overflow: visible; background: transparent; }
.customer-service-dialog::backdrop { background: rgba(0, 0, 0, .62); backdrop-filter: blur(3px); }
.customer-service-card {
  position: relative;
  width: 214px;
  display: grid;
  gap: 8px;
  padding: 13px 14px;
  border: 1px solid rgba(105, 76, 139, .72);
  border-radius: 14px;
  background: #171026;
  box-shadow: 0 22px 70px rgba(0, 0, 0, .58), inset 0 0 20px rgba(92, 38, 139, .08);
  color: #f8f4ff;
}
#customer-service-close {
  position: absolute;
  z-index: 2;
  top: -8px;
  right: -9px;
  width: 25px;
  height: 25px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
}
#customer-service-close img { width: 25px; height: 25px; display: block; }
.customer-service-qr-frame {
  position: relative;
  width: 186px;
  height: 188px;
  overflow: hidden;
  border-radius: 10px;
  background: #fff;
}
.customer-service-qr-frame > img { width: 100%; height: 100%; display: block; object-fit: contain; }
.customer-service-qr-frame > span {
  position: absolute;
  inset: auto 8px 8px;
  color: #5c486d;
  font-size: 10px;
  line-height: 1.4;
  text-align: center;
}
.customer-service-card > strong {
  min-height: 31px;
  display: grid;
  place-items: center;
  padding: 5px 8px;
  border: 1px solid rgba(137, 76, 186, .72);
  border-radius: 8px;
  background: #3b1c5c;
  color: #dfff70;
  font-size: 13px;
  font-weight: 800;
  text-align: center;
}
.customer-service-card > p { margin: 0; color: #d6bbfb; font-size: 11px; font-weight: 750; text-align: center; }

.utility-node { min-width: 290px; min-height: 176px; }
.utility-node-body { min-height: 126px; display: grid; grid-template-columns: 54px minmax(0,1fr); grid-template-rows: 1fr auto; gap: 8px 12px; align-items: center; }
.utility-node-mark { grid-row: 1 / 3; width: 54px; height: 54px; display: grid; place-items: center; border-radius: 12px; border: 1px solid rgba(72,194,220,.34); background: rgba(16,45,59,.64); color: #56dff9; font-weight: 750; }
.utility-node-body p { margin: 0; color: #8fa4b7; line-height: 1.6; font-size: 13px; }
.utility-open-btn { justify-self: start; height: 30px; padding: 0 14px; border: 1px solid rgba(80,118,148,.32); border-radius: 8px; background: #111a29; color: #dbe9f6; cursor: pointer; }

/* V1.15.6 canvas completion: media nodes, grouping and multi-selection tools. */
.canvas-node { contain: layout style; }
.canvas-node.locked { border-style: dashed; box-shadow: 0 0 0 1px rgba(255, 206, 83, .14), 0 16px 40px rgba(0,0,0,.28); }
.canvas-node.locked::after { content: 'LOCKED'; position: absolute; right: 10px; bottom: 8px; color: rgba(255, 210, 83, .62); font-size: 8px; font-weight: 800; letter-spacing: .12em; pointer-events: none; }
.canvas-node.locked .handle, .canvas-node.locked .resize-handle { pointer-events: none; opacity: .32; }
.canvas-node.locked .node-menu-btn { color: #ffd25a; }
.video-node, .audio-node { min-width: 280px; }
.video-node { border-color: rgba(95, 132, 255, .48); }
.audio-node { border-color: rgba(190, 102, 255, .46); }
.media-node-body { display: grid; gap: 9px; min-height: 130px; }
.media-node-placeholder { min-height: 92px; display: grid; place-items: center; gap: 8px; border: 1px dashed rgba(104, 137, 169, .28); border-radius: 12px; background: rgba(6, 13, 24, .48); color: #8197ab; font-size: 12px; }
.media-node-placeholder img { width: 28px; height: 28px; opacity: .84; }
.media-node-preview { width: 100%; min-height: 100px; max-height: 126px; object-fit: contain; border-radius: 11px; background: #07101c; }
.video-node .media-node-preview { min-height: 130px; max-height: 164px; }
.media-node-playback-error { padding: 5px 7px; border: 1px solid rgba(255, 103, 119, .28); border-radius: 7px; background: rgba(99, 28, 40, .25); color: #ff9ca7; font-size: 9px; }
.media-node-audio { width: 100%; height: 38px; }
.media-node-meta { display: flex; justify-content: space-between; gap: 12px; color: #879db2; font-size: 11px; }
.media-node-meta span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.media-node-timeline-hint { flex: 0 0 auto; align-self: center; color: #49d9c4; font-size: 9px; font-weight: 650; white-space: nowrap; }
.media-node-error { color: #ff7d8f; margin-top: 7px; line-height: 1.35; }
.media-node-error span { white-space: normal; overflow-wrap: anywhere; }
.media-node-actions, .group-node-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.media-node-actions button, .group-node-actions button, .rh-editor-actions button { height: 28px; padding: 0 9px; border: 1px solid rgba(77, 116, 148, .32); border-radius: 8px; background: rgba(12, 25, 40, .9); color: #cfe2f1; cursor: pointer; font-size: 10px; }
.media-node-actions button:hover, .group-node-actions button:hover, .rh-editor-actions button:hover { border-color: rgba(36, 217, 245, .62); color: #fff; }
.media-node-task-status { margin-right: 6px; color: #20d9f3; font-size: 9px; text-transform: uppercase; }
.canvas-node.queued { border-color: rgba(242, 163, 60, .72); box-shadow: 0 0 0 2px rgba(242, 163, 60, .1), var(--shadow); }
.group-node { border-style: dashed; background: rgba(9, 210, 255, .035); box-shadow: inset 0 0 0 1px rgba(9,210,255,.04); }
.group-node.selected { background: rgba(9, 210, 255, .065); }
.group-node-body { min-height: 44px; padding-top: 4px; }
.group-node .group-node-actions { margin-top: 10px; }
.group-node:has(.group-node-body) { transition: width .18s ease, height .18s ease; }

/* V1.17–V1.21 dedicated creative nodes and execution states. */
.world-3d-node, .director-node, .script-node, .storyboard-node, .video-composer-node { min-width: 280px; }
.creative-node-body { min-height: 154px; display: grid; grid-template-rows: 1fr auto auto auto; gap: 10px; }
.creative-node-summary { display: grid; grid-template-columns: 42px minmax(0, 1fr); align-items: center; gap: 11px; }
.creative-node-summary img { width: 42px; height: 42px; padding: 9px; border: 1px solid rgba(46, 210, 239, .30); border-radius: 11px; background: rgba(7, 26, 39, .82); }
.creative-node-summary div { min-width: 0; display: grid; gap: 3px; }
.creative-node-summary strong { color: #e8f7ff; font-size: 12px; }
.creative-node-summary span { color: #8299ac; font-size: 11px; line-height: 1.45; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.creative-node-chips { display: flex; justify-content: space-between; gap: 8px; }
.creative-node-chips span { max-width: 65%; padding: 4px 7px; border: 1px solid rgba(81, 119, 151, .24); border-radius: 999px; color: #8fa8bc; font-size: 9px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.creative-progress { height: 4px; overflow: hidden; border-radius: 999px; background: rgba(81, 119, 151, .18); }
.creative-progress i { display: block; height: 100%; border-radius: inherit; background: #20d9f3; box-shadow: 0 0 12px rgba(32, 217, 243, .58); transition: width .16s ease; }
.creative-node-body .utility-open-btn { width: 100%; justify-self: stretch; }
.director-node { border-color: rgba(255, 193, 88, .45); }
.script-node { border-color: rgba(38, 220, 246, .48); }
.storyboard-node { border-color: rgba(88, 153, 255, .48); }
.video-composer-node { min-width:460px; border-color: rgba(255, 111, 151, .48); }
.video-composer-body { display:flex; flex-direction:column; gap:8px; height:calc(100% - 24px); padding:12px 16px; }
.video-composer-inputs { display:grid; gap:4px; }
.video-composer-input { display:grid; grid-template-columns:28px minmax(0,1fr) auto 70px; align-items:center; gap:9px; min-height:38px; padding:0 10px; border:1px solid rgba(91,119,145,.24); border-radius:9px; background:rgba(11,22,35,.72); }
.video-composer-input.ready { border-color:rgba(52,218,146,.28); background:rgba(19,58,48,.28); }
.video-composer-input.missing { border-color:rgba(255,92,112,.24); }
.video-composer-input-icon { display:grid; place-items:center; width:25px; height:25px; border-radius:7px; background:#122235; color:#bcd0e2; font-size:12px; font-style:normal; font-weight:800; }
.video-composer-input > div { min-width:0; display:grid; gap:1px; }
.video-composer-input strong { color:#e7f2fb; font-size:12px; }
.video-composer-input small { overflow:hidden; color:#7e95aa; font-size:9px; white-space:nowrap; text-overflow:ellipsis; }
.video-composer-input button { min-width:48px; min-height:25px; border:1px solid rgba(70,176,208,.42); border-radius:7px; background:#102638; color:#bfefff; font-size:10px; }
.video-composer-input em { display:flex; align-items:center; justify-content:flex-end; gap:6px; color:#ff8293; font-size:10px; font-style:normal; white-space:nowrap; }
.video-composer-input em i { position:relative; display:inline-grid; place-items:center; width:13px; height:13px; font-style:normal; }
.video-composer-input.missing em i::before { content:'×'; color:#ff536d; font-size:17px; font-weight:900; line-height:1; }
.video-composer-input.ready em { color:#4ce3a2; }
.video-composer-input.ready em i { width:10px; height:10px; border-radius:50%; background:#2ee58f; box-shadow:0 0 0 3px rgba(46,229,143,.14),0 0 10px rgba(46,229,143,.75); }
.video-composer-summary { display:flex; align-items:center; gap:8px; min-height:42px; padding:7px 10px; border:1px dashed rgba(91,119,145,.26); border-radius:9px; color:#8ea4b8; font-size:10px; }
.video-composer-summary img { width:26px; height:26px; padding:5px; border-radius:7px; background:#102436; }
.video-composer-preview { display:block; width:100%; min-height:74px; max-height:104px; border-radius:10px; background:#050a12; object-fit:contain; }
.video-composer-template { display:grid; grid-template-columns:auto 1fr; gap:3px 10px; align-items:center; padding:8px 10px; border:1px solid rgba(132,151,177,.2); border-radius:9px; color:#8396aa; font-size:11px; }
.video-composer-template span { grid-row:1 / span 2; }
.video-composer-template strong { overflow:hidden; color:#c7d5e3; font-size:12px; white-space:nowrap; text-overflow:ellipsis; }
.video-composer-template.ready { border-color:rgba(34,216,244,.38); }
.video-composer-template.ready span { color:#25d9f4; }
.video-composer-actions { display:grid; grid-template-columns:1fr; gap:8px; margin-top:auto; }
.video-composer-actions > button { min-height:34px; border:1px solid rgba(80,117,149,.45); border-radius:9px; background:#111c2a; color:#c8d8e8; padding:0 11px; }
.video-composer-actions .utility-open-btn { width:100%; margin:0; }
.animation-controller-node { min-width:390px; border-color:rgba(32,217,243,.52); }
.remotion-node-body { display:flex; flex-direction:column; gap:10px; height:calc(100% - 24px); padding:12px 15px; }
.remotion-node-status { display:grid; grid-template-columns:10px minmax(0,1fr) auto; align-items:center; gap:8px; min-height:30px; padding:0 9px; border:1px solid rgba(255,92,112,.24); border-radius:8px; background:rgba(50,18,28,.2); color:#ff8190; font-size:10px; }
.remotion-node-status.ready { border-color:rgba(52,218,146,.3); background:rgba(19,58,48,.28); color:#4ce3a2; }
.remotion-node-status i { width:8px; height:8px; border-radius:50%; background:#ff536d; box-shadow:0 0 8px rgba(255,83,109,.65); }
.remotion-node-status.ready i { background:#2ee58f; box-shadow:0 0 10px rgba(46,229,143,.75); }
.remotion-node-status b { color:#8da5b9; font-size:9px; font-weight:550; }
.remotion-effect-summary { display:grid; gap:5px; min-height:104px; align-content:start; }
.remotion-effect-summary > span { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:7px 9px; border:1px solid rgba(70,118,153,.24); border-radius:8px; background:rgba(10,24,38,.72); }
.remotion-effect-summary b { color:#dff6ff; font-size:10px; }
.remotion-effect-summary small { color:#7291a8; font-size:9px; }
.remotion-node-preview { display:block; width:100%; min-height:104px; max-height:132px; border-radius:9px; background:#03070c; object-fit:contain; }
.remotion-node-actions { display:grid; grid-template-columns:1fr 1.25fr; gap:7px; margin-top:auto; }
.remotion-node-actions button { min-height:34px; border:1px solid rgba(67,123,157,.42); border-radius:9px; background:#102033; color:#cbe6f5; cursor:pointer; }
.remotion-node-actions button.primary { border-color:rgba(32,217,243,.54); background:#0a3947; color:#5ceaff; font-weight:700; }
.lip-sync-node-body { display:flex; flex-direction:column; gap:9px; height:calc(100% - 24px); padding:12px 15px; }
.lip-sync-input { min-height:46px; display:grid; grid-template-columns:26px minmax(0,1fr) auto; align-items:center; gap:8px; padding:0 9px; border:1px solid rgba(255,96,113,.25); border-radius:9px; background:rgba(55,18,29,.2); }
.lip-sync-input > span { width:25px; height:25px; display:grid; place-items:center; border-radius:7px; background:#111f2d; color:#7f9caf; font-size:12px; }
.lip-sync-input > div { min-width:0; display:grid; gap:2px; }
.lip-sync-input strong { color:#cbdbe4; font-size:10px; }
.lip-sync-input small { overflow:hidden; color:#72899a; font-size:8px; text-overflow:ellipsis; white-space:nowrap; }
.lip-sync-input em { display:flex; align-items:center; gap:5px; color:#ff7e8f; font-size:8px; font-style:normal; }
.lip-sync-input em i { width:7px; height:7px; border-radius:50%; background:#ff5670; box-shadow:0 0 8px rgba(255,86,112,.65); }
.lip-sync-input.ready { border-color:rgba(55,226,164,.3); background:rgba(20,67,54,.28); }
.lip-sync-input.ready em { color:#4de3a5; }
.lip-sync-input.ready em i { background:#38e49e; box-shadow:0 0 9px rgba(56,228,158,.72); }
.lip-sync-preview { width:100%; min-height:82px; max-height:108px; object-fit:contain; border-radius:9px; background:#03070b; }
.lip-sync-node-summary { min-height:48px; display:grid; align-content:center; gap:3px; padding:0 11px; border:1px dashed rgba(87,125,151,.24); border-radius:9px; background:#0b1622; }
.lip-sync-node-summary b { color:#7be7dd; font-size:9px; }
.lip-sync-node-summary span { overflow:hidden; color:#728a9b; font-size:8px; text-overflow:ellipsis; white-space:nowrap; }
.lip-sync-node-actions { display:grid; grid-template-columns:92px 1fr; gap:8px; margin-top:auto; }
.lip-sync-node-actions button { min-height:34px; border:1px solid rgba(75,118,149,.42); border-radius:9px; background:#102032; color:#bcd3df; font-size:9px; cursor:pointer; }
.lip-sync-node-actions .primary { border-color:#3fe0d1; background:#0b665f; color:#edfffc; font-weight:750; }
.composer-template-field { display:grid; gap:7px; padding:10px; border:1px solid rgba(74,110,142,.35); border-radius:10px; }
.composer-template-field > span { color:#8ca4b8; font-size:12px; }
.composer-template-field > strong { color:#e4edf6; }
.composer-template-field > small { color:#7890a5; line-height:1.45; }
.world-3d-node { border-color: rgba(171, 112, 255, .48); }

.animation-controller-dialog { width:min(1220px, calc(100vw - 28px)); max-width:none; height:min(790px, calc(100vh - 28px)); max-height:none; padding:0; overflow:hidden; border:1px solid rgba(80,125,158,.48); border-radius:16px; background:#08111d; color:#e4f2fb; box-shadow:0 34px 100px rgba(0,0,0,.72); }
.animation-controller-dialog::backdrop { background:rgba(0,5,12,.74); backdrop-filter:blur(6px); }
.animation-controller-shell { height:100%; display:grid; grid-template-rows:66px minmax(0,1fr) 160px 62px; }
.animation-controller-header { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:0 20px; border-bottom:1px solid rgba(77,111,140,.24); background:#0b1624; }
.animation-controller-header > div { display:flex; align-items:center; gap:11px; }
.animation-controller-header > div > div { display:grid; gap:3px; }
.animation-controller-header strong { font-size:16px; }
.animation-controller-header small { color:#718ca2; font-size:10px; }
.animation-controller-mark { width:36px; height:36px; display:grid; place-items:center; border:1px solid rgba(38,219,246,.52); border-radius:10px; background:rgba(18,92,108,.3); color:#35e1f6; font-size:11px; font-weight:850; }
#animation-controller-close { width:34px; height:34px; border:0; border-radius:9px; background:transparent; color:#90a5b6; font-size:22px; cursor:pointer; }
#animation-controller-close:hover { background:#142437; color:#fff; }
.animation-controller-main { min-height:0; display:grid; grid-template-columns:230px minmax(340px,1fr) 300px; }
.animation-layer-panel,.animation-properties-panel { min-height:0; overflow:auto; padding:15px; background:#0a1421; scrollbar-width:thin; }
.animation-layer-panel { border-right:1px solid rgba(77,111,140,.2); }
.animation-properties-panel { border-left:1px solid rgba(77,111,140,.2); }
.animation-panel-title { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:12px; }
.animation-panel-title strong { font-size:12px; }
.animation-panel-title button { height:28px; padding:0 9px; border:1px solid rgba(59,140,174,.38); border-radius:7px; background:#102337; color:#8fdbef; font-size:10px; cursor:pointer; }
#animation-effect-delete { color:#ff7c8c; border-color:rgba(255,83,109,.3); }
.animation-effect-list { display:grid; gap:7px; }
.animation-effect-card { width:100%; display:grid; grid-template-columns:28px minmax(0,1fr) auto; align-items:center; gap:8px; padding:8px; border:1px solid rgba(72,108,138,.25); border-radius:9px; background:#0d1a29; color:#cfe1ee; text-align:left; cursor:pointer; }
.animation-effect-card.active { border-color:rgba(38,218,245,.64); background:#0d2c39; box-shadow:inset 3px 0 #25dff6; }
.animation-effect-card > i { width:28px; height:28px; display:grid; place-items:center; border-radius:7px; background:#13283b; color:#39dff4; font-size:9px; font-style:normal; font-weight:800; }
.animation-effect-card > span { min-width:0; display:grid; gap:2px; }
.animation-effect-card strong,.animation-effect-card small { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.animation-effect-card strong { font-size:10px; }
.animation-effect-card small,.animation-effect-card > b { color:#6f8ba1; font-size:8px; font-weight:500; }
.animation-stage-panel { min-width:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; padding:14px; background:radial-gradient(circle at 50% 42%,#14283b,#07101b 72%); }
.animation-stage-toolbar { width:min(100%, 440px); display:flex; justify-content:space-between; color:#7894a9; font:10px/1.2 ui-monospace,SFMono-Regular,Consolas,monospace; }
.animation-stage { position:relative; height:min(390px, calc(100% - 60px)); max-width:100%; overflow:hidden; border:1px solid rgba(100,143,174,.35); border-radius:8px; background:linear-gradient(150deg,#182535,#07111e 66%); box-shadow:0 20px 55px rgba(0,0,0,.42); }
.animation-stage[data-aspect="9:16"] { aspect-ratio:9/16; }
.animation-stage[data-aspect="16:9"] { width:min(100%, 580px); height:auto; aspect-ratio:16/9; }
.animation-stage[data-aspect="1:1"] { aspect-ratio:1/1; }
.animation-stage::before { content:'视频预览区'; position:absolute; inset:0; display:grid; place-items:center; color:rgba(117,146,168,.18); font-size:18px; font-weight:800; letter-spacing:.16em; }
.animation-stage-safe { position:absolute; inset:7%; border:1px dashed rgba(74,221,242,.2); pointer-events:none; }
.animation-stage-object { position:absolute; z-index:2; max-width:82%; padding:8px 12px; border-radius:8px; background:rgba(8,16,27,.78); color:#fff; font-size:18px; font-weight:800; line-height:1.25; text-align:center; text-shadow:0 2px 6px rgba(0,0,0,.78); transform:translate(-50%,-50%); }
.animation-stage-object.is-fullscreen { inset:0!important; max-width:none; display:grid; place-items:center; border-radius:0; background:rgba(255,255,255,.22); transform:none!important; }
.animation-playhead { width:min(100%, 440px); accent-color:#29ddf4; }
.animation-properties-panel { display:grid; align-content:start; gap:10px; }
.animation-properties-panel label { display:grid; gap:5px; color:#7f9aaf; font-size:9px; }
.animation-properties-panel input,.animation-properties-panel select,.animation-properties-panel textarea { width:100%; border:1px solid rgba(75,113,145,.34); border-radius:7px; outline:0; background:#0d1b2b; color:#e1eff8; font:11px/1.4 inherit; }
.animation-properties-panel input,.animation-properties-panel select { height:32px; padding:0 8px; }
.animation-properties-panel input[type="range"] { height:auto; padding:0; accent-color:#25ddf4; }
.animation-properties-panel input[type="color"] { width:54px; padding:3px; }
.animation-properties-panel textarea { min-height:56px; padding:7px 8px; resize:vertical; }
.animation-properties-panel label span { display:flex; justify-content:space-between; }
.animation-properties-panel label b { color:#34dff4; font-size:9px; }
.animation-time-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.animation-control-label { display:block; margin-bottom:5px; color:#7f9aaf; font-size:9px; }
.animation-anchor-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:5px; }
.animation-anchor-grid button { height:28px; border:1px solid rgba(75,113,145,.3); border-radius:6px; background:#0d1b2b; color:#7993a8; font-size:9px; cursor:pointer; }
.animation-anchor-grid button.active { border-color:#26dff5; background:#0d3542; color:#55e8f8; box-shadow:0 0 8px rgba(38,223,245,.24); }
.animation-timeline-panel { min-height:0; padding:12px 20px; border-top:1px solid rgba(77,111,140,.22); background:#07101b; }
.animation-timeline-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:7px; }
.animation-timeline-head strong { font-size:11px; }
.animation-timeline-head span { color:#668398; font-size:9px; }
.animation-timeline-ruler { position:relative; height:20px; display:flex; align-items:flex-end; border-bottom:1px solid rgba(81,119,149,.3); color:#668297; font:8px/1 ui-monospace,SFMono-Regular,Consolas,monospace; }
.animation-timeline-ruler span { position:absolute; transform:translateX(-50%); }
.animation-timeline-track { position:relative; height:78px; overflow:hidden; margin-top:5px; border-radius:8px; background:repeating-linear-gradient(90deg,transparent 0,transparent calc(10% - 1px),rgba(68,102,130,.12) calc(10% - 1px),rgba(68,102,130,.12) 10%),#0b1725; }
.animation-timeline-block { position:absolute; height:28px; overflow:hidden; padding:0 9px; border:1px solid rgba(36,218,244,.5); border-radius:6px; background:rgba(11,88,108,.78); color:#c9f7ff; font-size:9px; line-height:26px; text-overflow:ellipsis; white-space:nowrap; cursor:grab; user-select:none; }
.animation-timeline-block.active { border-color:#69efff; background:#11748a; box-shadow:0 0 12px rgba(36,218,244,.3); }
.animation-controller-footer { display:flex; align-items:center; justify-content:space-between; gap:14px; padding:0 20px; border-top:1px solid rgba(77,111,140,.22); background:#0b1624; }
.animation-controller-footer > span { color:#708ba0; font-size:10px; }
.animation-controller-footer > div { display:flex; gap:8px; }
.animation-controller-footer button { min-width:100px; height:34px; border:1px solid rgba(69,117,151,.42); border-radius:8px; background:#102136; color:#cbe3f0; cursor:pointer; }
#animation-controller-render { border-color:#2fdcf2; background:#0b6072; color:#e8fcff; font-weight:750; }
@media (max-width:900px) {
  .animation-controller-main { grid-template-columns:170px minmax(280px,1fr); }
  .animation-properties-panel { position:absolute; z-index:3; right:0; width:280px; height:calc(100% - 128px); box-shadow:-18px 0 38px rgba(0,0,0,.5); }
}
.edge-label { fill: #b9cedd; font-size: 10px; paint-order: stroke; stroke: #07101b; stroke-width: 4px; stroke-linejoin: round; pointer-events: none; }
.edge-path.route-straight { stroke-dasharray: none; }
#run-all-btn.is-running { border-color: rgba(255, 105, 119, .56); background: rgba(91, 27, 39, .92); color: #ffd9dd; }

.rh-editor-panel { width: min(720px, calc(100vw - 100px)); }
.rh-preview-stage video { width: 100%; max-height: 280px; border-radius: 10px; background: #050a12; }
.rh-preview-stage audio { width: 100%; }
.rh-timeline-ruler { position: relative; }
.rh-timeline-ruler i { position: absolute; top: 0; bottom: 0; left: 0; width: 2px; background: #24dff6; box-shadow: 0 0 9px rgba(36,223,246,.7); }
.rh-timeline-clip { display: block; width: min(80%, 520px); padding: 7px 10px; border: 1px solid rgba(42, 214, 243, .42); border-radius: 7px; background: rgba(15, 62, 78, .56); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rh-editor-actions { display: flex; gap: 8px; padding-top: 12px; }

/* V2 history, snapshots and large-canvas feedback. */
.rh-history-card { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px; border: 1px solid rgba(78, 113, 145, .24); border-radius: 10px; background: rgba(8, 17, 29, .72); }
.rh-history-card > div { min-width: 0; display: grid; gap: 4px; }
.rh-history-card strong { color: #e2f0fb; font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rh-history-card small { color: #7e95aa; font-size: 10px; }
.rh-history-card > span { display: flex; gap: 5px; flex: none; }
.rh-history-card button { height: 27px; padding: 0 8px; border: 1px solid rgba(73, 112, 143, .3); border-radius: 7px; background: #111b2a; color: #cfe0ee; cursor: pointer; font-size: 10px; }
.rh-history-card button:hover { border-color: rgba(39, 219, 247, .58); color: #fff; }
.rh-history-results { display: grid; gap: 7px; }
.plugin-manifest-section { display: grid; gap: 10px; margin-top: 14px; padding-top: 14px; border-top: 1px solid rgba(90, 119, 146, .22); }
.plugin-manifest-section > div:first-child { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.plugin-manifest-section > div:first-child span { color: #8298aa; font-size: 11px; }
.plugin-manifest-list { display: grid; gap: 6px; max-height: 170px; overflow: auto; }
.plugin-manifest-list > div { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 10px; border: 1px solid rgba(79, 112, 140, .2); border-radius: 8px; background: rgba(8, 17, 29, .58); }
.plugin-manifest-list span { display: flex; align-items: baseline; gap: 7px; }
.plugin-manifest-list strong { color: #dcebf6; font-size: 11px; }
.plugin-manifest-list small, .plugin-manifest-list em { color: #7790a4; font-size: 9px; font-style: normal; }
.shortcut-card { width: min(620px, calc(100vw - 32px)); }
.shortcut-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 7px 14px; }
.shortcut-grid span { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 10px; border: 1px solid rgba(80, 113, 141, .2); border-radius: 8px; }
.shortcut-grid kbd { min-width: 74px; color: #72e9fb; font: 10px/1.2 ui-monospace, SFMono-Regular, Consolas, monospace; }
.shortcut-grid b { color: #b9cad7; font-size: 11px; font-weight: 550; }
@media (max-width: 620px) { .shortcut-grid { grid-template-columns: 1fr; } }

.multi-selection-toolbar { position: absolute; z-index: 26; display: flex; align-items: center; gap: 5px; max-width: calc(100% - 110px); padding: 6px; border: 1px solid rgba(84, 116, 145, .32); border-radius: 12px; background: rgba(10, 17, 28, .96); box-shadow: 0 14px 32px rgba(0,0,0,.36); overflow-x: auto; }
.multi-selection-toolbar span { padding: 0 7px; color: #8fa6ba; font-size: 12px; white-space: nowrap; }
.multi-selection-toolbar button { height: 30px; padding: 0 10px; border: 1px solid rgba(78, 112, 145, .26); border-radius: 8px; background: #111b2a; color: #d8e7f5; cursor: pointer; white-space: nowrap; }
.multi-selection-toolbar button:hover { border-color: rgba(40, 220, 248, .54); color: #f3fbff; }
.multi-selection-toolbar button.danger { color: #ff7380; }

.node-context-menu { position: absolute; z-index: 80; width: 224px; padding: 7px; border: 1px solid rgba(86, 116, 145, .36); border-radius: 12px; background: rgba(9, 16, 27, .98); box-shadow: 0 20px 52px rgba(0,0,0,.48); }
.node-context-menu button { width: 100%; min-height: 34px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 10px; border: 0; border-radius: 8px; background: transparent; color: #d9e7f4; cursor: pointer; text-align: left; }
.node-context-menu button:hover { background: rgba(58, 91, 120, .22); color: #f4fbff; }
.node-context-menu button:disabled { opacity: .42; cursor: not-allowed; }
.node-context-menu button.danger { color: #ff7683; }
.node-context-menu kbd { color: #71869a; font: 9px/1.2 ui-monospace, SFMono-Regular, Consolas, monospace; }
.node-context-divider { display: block; height: 1px; margin: 5px 4px; background: rgba(91, 121, 150, .22); }
.canvas-viewport.snap-enabled { background-image: radial-gradient(circle, rgba(35, 207, 235, .48) 1px, transparent 1.4px); }

.media-dock-content { display: grid; gap: 10px; min-height: 190px; }
.media-dock-heading { display: flex; align-items: center; gap: 10px; }
.media-dock-heading img { width: 30px; height: 30px; padding: 6px; border: 1px solid rgba(45, 214, 243, .32); border-radius: 9px; background: rgba(8, 28, 42, .82); }
.media-dock-heading div { display: grid; gap: 2px; }
.media-dock-heading strong { color: #edf8ff; font-size: 14px; }
.media-dock-heading span { color: #7e95aa; font-size: 11px; }
.media-composer-input { width: 100%; min-height: 78px; padding: 12px; resize: none; border: 1px solid rgba(78, 112, 145, .24); border-radius: 11px; outline: 0; background: rgba(6, 13, 24, .58); color: #dceaf7; font: inherit; line-height: 1.6; }
.media-composer-input:focus { border-color: rgba(40, 220, 248, .56); }
.media-dock-content #media-composer-input {
  min-height: 156px;
  padding: 10px 12px;
  line-height: 1.25;
}
.media-dialogue-editor { display: grid; gap: 8px; max-height: 310px; padding: 10px; overflow: auto; border: 1px solid rgba(51, 207, 232, .22); border-radius: 11px; background: rgba(5, 13, 23, .54); }
.media-dialogue-editor > header { position: sticky; z-index: 2; top: -10px; display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: -10px -10px 2px; padding: 10px; background: rgba(8, 18, 30, .96); border-bottom: 1px solid rgba(67, 116, 148, .2); }
.media-dialogue-editor > header div { display: grid; gap: 2px; }
.media-dialogue-editor > header strong { color: #e8f7ff; font-size: 12px; }
.media-dialogue-editor > header span { color: #7790a5; font-size: 9px; }
.media-dialogue-editor > header button { height: 28px; padding: 0 10px; border: 1px solid rgba(41, 218, 241, .42); border-radius: 7px; background: rgba(32, 199, 221, .08); color: #43def1; font-size: 10px; cursor: pointer; }
.media-dialogue-lines { display: grid; gap: 8px; }
.media-dialogue-role { display: grid; grid-template-columns: minmax(90px, .7fr) auto minmax(170px, 1.3fr); align-items: center; gap: 9px; padding: 9px 10px; border: 1px solid rgba(74, 107, 137, .22); border-radius: 9px; background: rgba(12, 24, 39, .72); }
.media-dialogue-role strong { overflow: hidden; color: #40e2f5; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.media-dialogue-role span { color: #71899d; font-size: 9px; }
.media-dialogue-role select { width: 100%; height: 32px; padding: 0 28px 0 8px; border: 1px solid rgba(83, 119, 151, .3); border-radius: 7px; outline: 0; background: #0e1827; color: #dceaf7; font: inherit; }
.media-dialogue-empty { padding: 14px; color: #8298aa; font-size: 11px; text-align: center; }
.media-dock-footer { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.media-dock-submit { display: flex; align-items: center; gap: 9px; white-space: nowrap; }
.media-composer-estimate { color: #ff6676; font-size: 12px; }
.media-dock-controls { display: flex; align-items: flex-end; gap: 8px; min-width: 0; flex-wrap: wrap; }
.media-dock-controls label { display: grid; gap: 4px; color: #7e95aa; font-size: 10px; }
.media-dock-controls select, .media-dock-controls input { height: 31px; min-width: 86px; padding: 0 9px; border: 1px solid rgba(91, 121, 150, .34); border-radius: 8px; background: #111a29; color: #dce9f6; }
.media-dock-controls select { padding-right: 28px; }
#subtitle-font-select, #subtitle-font-custom { width: 168px; }
.media-manage-voices {
  height: 31px;
  align-self: end;
  padding: 0 11px;
  border: 1px solid rgba(46, 216, 238, .38);
  border-radius: 8px;
  background: rgba(31, 193, 216, .08);
  color: #3cdaee;
  font-size: 10px;
  cursor: pointer;
}
.media-manage-voices:hover { background: rgba(31, 193, 216, .16); }
.voice-favorite-guidance {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: -5px 0 13px;
  padding: 9px 10px;
  border: 1px solid rgba(47, 218, 239, .18);
  border-radius: 9px;
  background: rgba(32, 197, 219, .045);
  color: #7e95aa;
  font-size: 10px;
}
.voice-favorite-guidance .button { min-height: 30px; white-space: nowrap; }
.prompt-dock.media-mode { width: min(780px, calc(100% - 160px)); }
.prompt-dock.subtitle-mode { width: min(780px, calc(100% - 160px)); }
.subtitle-dock-icon { display:grid; place-items:center; width:30px; height:30px; border:1px solid rgba(30,218,244,.58); border-radius:9px; color:#27e8ff; font-weight:800; }
.subtitle-source-status { align-self:end; padding:8px 10px; color:#8fa8bd; font-size:12px; }
.subtitle-node-body { display:flex; flex-direction:column; gap:9px; height:100%; }
.subtitle-node-preview { min-height:58px; overflow:hidden; color:#d8e7f4; line-height:1.55; white-space:pre-wrap; }
.subtitle-node-style { overflow:hidden; color:#7f96aa; font-size:12px; white-space:nowrap; text-overflow:ellipsis; }
.subtitle-node-result { margin-top:auto; padding-top:8px; border-top:1px dashed rgba(98,130,158,.24); color:#8094a8; font-size:12px; }
.subtitle-node-result.ready { color:#21d8f4; }

@media (max-width: 760px) {
  .account-membership-card, .account-data-security { grid-template-columns: 1fr 1fr; }
  .account-membership-card i { justify-self: start; }
  .multi-selection-toolbar { left: 72px !important; right: 12px; max-width: none; }
  .media-dock-footer { align-items: stretch; }
  .media-dock-controls { flex: 1; }
  .media-dialogue-role { grid-template-columns: 1fr; }
}

.canvas-board-overlay { position: fixed; inset: 0; z-index: 120; overflow: hidden; background: #f7f7f5; color: #1b1b1b; }
.canvas-board-overlay.hidden { display: none; }
.canvas-board-overlay::before { content: ''; position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(#e6e6e3 1px, transparent 1px), linear-gradient(90deg,#e6e6e3 1px,transparent 1px); background-size: 24px 24px; }
.canvas-board-overlay canvas { position: absolute; inset: 0; width: 100%; height: 100%; cursor: crosshair; }
.board-header { position: absolute; z-index: 3; left: 16px; right: 16px; top: 10px; display: flex; align-items: center; gap: 10px; pointer-events: none; }
.board-header strong,
.board-header button,
.board-projects,
.board-zoom,
.board-tools { pointer-events: auto; border: 1px solid #dedede; border-radius: 10px; background: rgba(250,250,248,.96); box-shadow: 0 6px 18px rgba(0,0,0,.08); }
.board-header strong { padding: 8px 12px; }
.board-header strong span { color: #787878; font-weight: 500; }
.board-header button { height: 34px; padding: 0 12px; cursor: pointer; }
#board-close-btn { margin-left: auto; width: 34px; padding: 0; font-size: 20px; }
.board-projects { position: absolute; z-index: 3; top: 56px; left: 16px; padding: 10px 14px; font-weight: 700; }
.board-zoom { position: absolute; z-index: 3; left: 16px; bottom: 72px; display: flex; align-items: center; overflow: hidden; }
.board-zoom button,
.board-zoom span { min-width: 42px; height: 34px; display: grid; place-items: center; border: 0; background: transparent; }
.board-tools { position: absolute; z-index: 3; left: 50%; bottom: 16px; transform: translateX(-50%); display: flex; align-items: center; gap: 4px; padding: 7px; max-width: calc(100vw - 32px); overflow-x: auto; }
.board-tools button { height: 34px; padding: 0 10px; border: 0; border-radius: 7px; background: transparent; cursor: pointer; white-space: nowrap; }
.board-tools button.active,
.board-tools button:hover { background: #e1e1df; }
.board-tools input { width: 34px; height: 30px; padding: 1px; border: 0; background: transparent; }

@media (max-width: 700px) {
  .left-floating-brand .project-name,
  .canvas-top-chip,
  .canvas-wallet-chip { display: none !important; }
  .rh-floating-panel { left: 66px; top: 70px; width: calc(100vw - 78px); max-height: calc(100vh - 90px); }
  .rh-workflow-grid { grid-template-columns: 1fr; }
  .rh-canvas-controls { max-width: calc(100vw - 32px); overflow-x: auto; }
  .rh-canvas-controls input[type="range"] { width: 54px; }
  .rh-canvas-controls .watermark-control { display: grid; }
  .assistant-fab { right: 16px; bottom: 68px; }
  .assistant-panel { width: calc(100vw - 64px); }
  .assistant-conversation { padding: 22px 14px; }
  .assistant-skill-list button { grid-template-columns: 20px 82px minmax(0,1fr); }
}

/* Kling AI lip sync */
.kling-lip-sync-ready { min-width: 130px; padding: 15px 18px; border: 1px solid rgba(255,255,255,.09); border-radius: 13px; background: #091116; color: #77868e; font-size: 11px; text-align: center; }
.kling-lip-sync-ready.ready { border-color: rgba(65,224,198,.28); background: rgba(18,71,67,.22); color: #58e1c5; }
.kling-lip-sync-layout { display: grid; grid-template-columns: minmax(0,1.15fr) minmax(360px,.85fr); gap: 16px; padding-bottom: 70px; }
.kling-lip-sync-stack { min-width: 0; display: grid; align-content: start; gap: 16px; }
.kling-lip-sync-card { min-width: 0; overflow: hidden; border: 1px solid rgba(255,255,255,.08); border-radius: 15px; background: #091116; }
.kling-lip-sync-card > header { min-height: 66px; display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 15px 18px; border-bottom: 1px solid rgba(255,255,255,.07); }
.kling-lip-sync-card > header > div { min-width: 0; display: flex; align-items: flex-start; gap: 11px; }
.kling-lip-sync-card > header > div > span { color: #42deee; font: 700 10px/1.5 ui-monospace,monospace; }
.kling-lip-sync-card > header strong, .kling-lip-sync-card > header small { display: block; }
.kling-lip-sync-card > header strong { color: #e3edef; font-size: 12px; }
.kling-lip-sync-card > header small { margin-top: 4px; color: #65747c; font-size: 9px; font-weight: 400; }
.kling-lip-sync-card > header i { color: #5adbc6; font-size: 9px; font-style: normal; }
.kling-lip-sync-card > label, .kling-lip-sync-card fieldset, .kling-lip-sync-card > section { margin: 16px 18px 0; }
.kling-lip-sync-card label { min-width: 0; display: grid; gap: 7px; color: #7d8d95; font-size: 10px; }
.kling-lip-sync-card input, .kling-lip-sync-card select, .kling-lip-sync-card textarea { width: 100%; box-sizing: border-box; border: 1px solid rgba(255,255,255,.1); border-radius: 9px; outline: none; background: #050b0f; color: #dce8ea; font: inherit; }
.kling-lip-sync-card input, .kling-lip-sync-card select { height: 42px; padding: 0 12px; }
.kling-lip-sync-card textarea { min-height: 110px; resize: vertical; padding: 12px; line-height: 1.65; }
.kling-lip-sync-card input:focus, .kling-lip-sync-card select:focus, .kling-lip-sync-card textarea:focus { border-color: rgba(63,220,236,.52); box-shadow: 0 0 0 3px rgba(63,220,236,.06); }
.kling-lip-sync-card label > small { color: #53636b; font-size: 8px; text-align: right; }
.kling-lip-sync-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 13px; padding: 16px 18px 0; }
.kling-lip-sync-grid.compact { padding: 0; }
.kling-lip-sync-card fieldset { padding: 0 0 16px; border: 1px solid rgba(255,255,255,.07); border-radius: 11px; }
.kling-lip-sync-card fieldset legend { margin-left: 12px; padding: 0 6px; color: #66767e; font-size: 9px; }
.kling-lip-sync-card fieldset .kling-lip-sync-grid { padding-top: 8px; }
.kling-lip-sync-card > footer { min-height: 65px; display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 18px; padding: 13px 18px; border-top: 1px solid rgba(255,255,255,.07); }
.kling-lip-sync-card > footer small { color: #62727a; font-size: 9px; }
.kling-lip-sync-card > footer > div { display: flex; gap: 8px; }
.kling-lip-sync-card button, .kling-lip-sync-task-body a { border: 0; border-radius: 9px; padding: 10px 15px; background: #45d8eb; color: #031014; font-family: inherit; font-size: 10px; font-weight: 700; line-height: 1; text-decoration: none; cursor: pointer; }
.kling-lip-sync-card button:disabled { opacity: .45; cursor: not-allowed; }
.kling-lip-sync-card button.kling-secondary { border: 1px solid rgba(75,217,230,.24); background: #08151a; color: #74dce6; }
.kling-upload-field { position: relative; min-height: 76px; align-content: center; padding: 12px 15px; border: 1px dashed rgba(66,220,234,.3); border-radius: 10px; background: rgba(20,61,66,.14); cursor: pointer; }
.kling-upload-field input { position: absolute; inset: 0; height: 100%; opacity: 0; cursor: pointer; }
.kling-upload-field strong { overflow: hidden; color: #63dce5; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.kling-lip-sync-results { align-self: start; }
.kling-lip-sync-task-list { min-height: 520px; display: grid; align-content: start; gap: 11px; padding: 14px; }
.kling-lip-sync-task { overflow: hidden; border: 1px solid rgba(255,255,255,.075); border-radius: 11px; background: #050b0e; }
.kling-lip-sync-task > header { display: flex; justify-content: space-between; gap: 10px; padding: 12px; border-bottom: 1px solid rgba(255,255,255,.06); }
.kling-lip-sync-task > header > div { min-width: 0; display: grid; gap: 4px; }
.kling-lip-sync-task > header strong { color: #cbd8db; font-size: 10px; }
.kling-lip-sync-task > header small { overflow: hidden; color: #53636a; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.kling-lip-sync-task video { width: 100%; max-height: 360px; display: block; background: #000; }
.kling-lip-sync-task-body { display: grid; gap: 10px; padding: 12px; }
.kling-lip-sync-task-body p { margin: 0; color: #7e8c93; font-size: 9px; line-height: 1.6; overflow-wrap: anywhere; }
.kling-lip-sync-task-body a { justify-self: end; display: inline-block; }
@media (max-width: 1050px) {
  .kling-lip-sync-layout { grid-template-columns: 1fr; }
  .kling-lip-sync-task-list { min-height: 260px; }
}
@media (max-width: 700px) {
  .kling-lip-sync-grid { grid-template-columns: 1fr; }
  .kling-lip-sync-card > footer { align-items: stretch; flex-direction: column; }
  .kling-lip-sync-card > footer > div, .kling-lip-sync-card > footer button { width: 100%; }
}
@media (max-width: 480px) {
  .assistant-panel { width: 100vw; }
  .assistant-panel-head { padding: 0 12px; }
  .assistant-panel-actions { gap: 0; }
  .assistant-conversation { padding: 38px 16px 18px; }
  .assistant-greeting { margin-top: 6px; }
  .assistant-greeting h2 { font-size: 30px; line-height: 1.12; }
  .assistant-composer { margin: 8px 10px 10px; }
}
.auth-intro { padding: 36px 0; }
.auth-logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 19px;
  font-weight: 760;
  letter-spacing: .04em;
}
.auth-logo span { color: #30e6ff; text-shadow: 0 0 20px rgba(48, 230, 255, .7); }
.auth-kicker {
  margin: 68px 0 18px;
  color: #53dbff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .3em;
}
.auth-intro h1 {
  margin: 0;
  font-size: clamp(38px, 4.5vw, 62px);
  line-height: 1.14;
  letter-spacing: -.045em;
  font-weight: 760;
}
.auth-description {
  max-width: 520px;
  margin: 28px 0 0;
  color: #8ca4bb;
  font-size: 15px;
  line-height: 1.9;
}
.auth-feature-list { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 38px; }
.auth-feature-list span {
  padding: 8px 13px;
  border: 1px solid rgba(85, 133, 170, .22);
  border-radius: 999px;
  background: rgba(10, 21, 35, .68);
  color: #a9bed0;
  font-size: 12px;
}
.auth-card {
  padding: 34px;
  border: 1px solid rgba(91, 137, 176, .25);
  border-radius: 26px;
  background: linear-gradient(160deg, rgba(18, 29, 47, .96), rgba(9, 15, 27, .96));
  box-shadow: 0 32px 90px rgba(0, 0, 0, .48), inset 0 1px rgba(255,255,255,.03);
  backdrop-filter: blur(24px);
}
.auth-card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 18px; }
.auth-card-eyebrow { margin: 0 0 7px; color: #8199b0; font-size: 12px; }
.auth-card h2 { margin: 0; color: #f3f9ff; font-size: 24px; }
.auth-tabs { display: flex; padding: 3px; border-radius: 11px; background: rgba(4, 10, 20, .65); }
.auth-tab {
  height: 31px;
  padding: 0 13px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #7890a6;
  cursor: pointer;
}
.auth-tab.active { background: rgba(33, 58, 81, .84); color: #eaf8ff; box-shadow: inset 0 0 0 1px rgba(62, 213, 255, .16); }
.auth-form { display: grid; gap: 17px; margin-top: 30px; }
.auth-field { display: grid; gap: 8px; }
.auth-field span { color: #9bb0c3; font-size: 13px; }
.auth-field input {
  width: 100%;
  height: 47px;
  padding: 0 14px;
  border: 1px solid rgba(91, 127, 158, .28);
  border-radius: 12px;
  outline: 0;
  background: rgba(5, 11, 21, .68);
  color: #edf8ff;
  font-size: 14px;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.auth-field input::placeholder { color: #536a80; }
.auth-field input:focus { border-color: rgba(42, 222, 255, .72); box-shadow: 0 0 0 3px rgba(42, 222, 255, .09); }
.auth-challenge-field { display: grid; gap: 9px; }
.auth-challenge-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.auth-challenge-head > span { color: #9bb0c3; font-size: 13px; }
.auth-challenge-head button {
  border: 0; padding: 2px 0; background: transparent; color: #45dff8; font-size: 11px; cursor: pointer;
}
.auth-challenge-head button:hover { color: #a5f3ff; }
.auth-challenge-head button:disabled { color: #526a7d; cursor: wait; }
.auth-challenge-input {
  min-height: 50px; display: grid; grid-template-columns: minmax(0, 1fr) 92px; align-items: center; gap: 12px;
  padding: 7px 8px 7px 16px; border: 1px solid rgba(124, 172, 210, .2); border-radius: 12px; background: rgba(2, 8, 18, .72);
}
.auth-challenge-input:focus-within { border-color: rgba(42, 222, 255, .72); box-shadow: 0 0 0 3px rgba(42, 222, 255, .09); }
.auth-challenge-input strong { color: #effaff; font-size: 18px; letter-spacing: .08em; }
.auth-challenge-input input {
  width: 100%; height: 36px; border: 1px solid rgba(124, 172, 210, .18); border-radius: 8px; outline: 0;
  padding: 0 10px; background: rgba(11, 24, 39, .82); color: #f3fbff; font: inherit; text-align: center;
}
.auth-challenge-input input::placeholder { color: #536a80; }
.auth-challenge-input input[type="number"] { appearance: textfield; -moz-appearance: textfield; }
.auth-challenge-input input[type="number"]::-webkit-inner-spin-button,
.auth-challenge-input input[type="number"]::-webkit-outer-spin-button { margin: 0; -webkit-appearance: none; appearance: none; }
.auth-feedback { min-height: 19px; color: #ff8c9a; font-size: 13px; line-height: 1.45; }
.auth-feedback.success { color: #48dfbc; }
.auth-submit {
  height: 49px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 18px;
  border: 1px solid rgba(71, 226, 255, .44);
  border-radius: 13px;
  background: linear-gradient(100deg, #0eb6d1, #2382d8);
  color: white;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 12px 30px rgba(0, 165, 220, .2);
}
.auth-submit:hover { filter: brightness(1.08); transform: translateY(-1px); }
.auth-submit:disabled { cursor: wait; opacity: .65; transform: none; }
.auth-submit b { font-size: 19px; }
.auth-local-note { margin: 22px 0 0; color: #647d93; font-size: 12px; text-align: center; }

.user-menu-btn {
  height: 36px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 11px 0 5px;
  border: 1px solid rgba(81, 124, 158, .24);
  border-radius: 12px;
  background: rgba(9, 17, 29, .92);
  color: #dceaf8;
  cursor: pointer;
}
.user-menu-btn:hover { border-color: rgba(44, 218, 255, .46); }
.user-avatar {
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: linear-gradient(145deg, #1ed8ed, #397cdd);
  color: white;
  font-size: 12px;
  font-weight: 800;
}
.account-modal-card { width: min(560px, calc(100vw - 32px)); max-height: min(820px, calc(100vh - 32px)); overflow-x: hidden; overflow-y: auto; }
.account-profile {
  display: flex;
  align-items: center;
  gap: 15px;
  margin: 8px 0 28px;
  padding: 18px;
  border: 1px solid rgba(82, 119, 151, .2);
  border-radius: 16px;
  background: rgba(5, 12, 22, .45);
}
.account-avatar {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 15px;
  background: linear-gradient(145deg, #1ed8ed, #397cdd);
  color: white;
  font-weight: 800;
}
.account-profile div { display: grid; gap: 5px; }
.account-profile strong { color: #f1f8ff; font-size: 16px; }
.account-profile span { color: #8199af; font-size: 13px; }
.account-membership-card {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
  align-items: center;
  gap: 14px;
  margin: -14px 0 14px;
  padding: 14px 16px;
  border: 1px solid rgba(72,221,241,.18);
  border-radius: 13px;
  background: #07151b;
}
.account-membership-card > div { display: grid; gap: 5px; }
.account-membership-card span { color: #60727c; font-size: 9px; }
.account-membership-card strong { color: #cfe0e5; font-size: 11px; }
.account-membership-card i { padding: 6px 9px; border-radius: 999px; background: #17313a; color: #55e1f2; font-size: 9px; font-style: normal; font-weight: 800; }
.account-membership-action { grid-column: 1 / -1; width: 100%; }
.account-data-security {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 9px;
  padding: 17px 0;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.account-data-security .account-settings-heading { grid-column: 1 / -1; }
.account-data-security > div:not(.account-settings-heading) { display: grid; gap: 5px; padding: 11px; border: 1px solid rgba(255,255,255,.07); border-radius: 10px; background: #080d11; }
.account-data-security > div > span { color: #60717a; font-size: 9px; }
.account-data-security > div > strong { color: #b8c6cc; font-size: 10px; line-height: 1.45; }
.account-settings-section {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 12px 14px;
  padding: 18px 0; border-bottom: 1px solid rgba(255,255,255,.08);
}
.account-settings-heading { grid-column: 1 / -1; display: grid; gap: 4px; }
.account-settings-heading strong { color: #eaf5f8; font-size: 13px; }
.account-settings-heading span { color: #5e7180; font-size: 10px; }
.account-settings-field { display: grid; gap: 7px; }
.account-settings-field > span { color: #8195a4; font-size: 10px; }
.account-settings-field input {
  width: 100%; height: 42px; border: 1px solid rgba(255,255,255,.11); border-radius: 9px; outline: 0;
  padding: 0 12px; background: #070d12; color: #ecf5f8; font-size: 12px;
}
.account-settings-field input:focus { border-color: rgba(83,225,246,.54); box-shadow: 0 0 0 3px rgba(83,225,246,.08); }
.account-settings-feedback { grid-column: 1 / -1; min-height: 15px; margin: -2px 0 -4px; color: #ff8d98; font-size: 10px; }
.account-settings-feedback.success { color: #51ddb9; }
.account-password-grid { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 9px; }
.account-session-section { gap: 12px; }
.account-session-section .account-settings-heading { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
.account-session-section .account-settings-heading > div { display: grid; gap: 5px; }
.account-session-section .account-settings-heading > button { min-width: max-content; }
.account-session-list { grid-column: 1 / -1; display: grid; gap: 8px; }
.account-session-list > span { padding: 14px; border: 1px dashed #25323b; border-radius: 10px; color: #667984; font-size: 10px; text-align: center; }
.account-session-item { min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 12px; border: 1px solid #202d35; border-radius: 10px; background: #091015; }
.account-session-item.current { border-color: rgba(75,225,247,.28); background: #0a151b; }
.account-session-item > div { min-width: 0; display: grid; gap: 4px; }
.account-session-item strong { color: #cbd9de; font-size: 10px; }
.account-session-item span { overflow: hidden; color: #657883; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.account-session-item i { color: #55e1f2; font-size: 9px; font-style: normal; }
.account-session-item button { padding: 6px 10px; border: 1px solid rgba(255,105,119,.32); border-radius: 8px; background: transparent; color: #ff8d9a; font-size: 9px; cursor: pointer; }
.account-settings-section > .button { justify-self: end; min-width: 108px; }
.button.danger { border-color: rgba(255, 92, 112, .34); color: #ff9aa6; }
.button.danger:hover { background: rgba(75, 20, 31, .65); }

.payment-modal-card { width: min(680px, calc(100vw - 32px)); max-height: min(820px, calc(100vh - 32px)); overflow-y: auto; }
.payment-mode-notice { margin-bottom: 16px; padding: 11px 13px; border: 1px solid rgba(80,225,246,.22); border-radius: 10px; background: rgba(15,55,65,.34); color: #9eeaf3; font-size: 11px; line-height: 1.55; }
.payment-mode-notice.disabled { border-color: rgba(255,151,91,.24); background: rgba(67,37,20,.34); color: #ffbd8f; }
.payment-plan-list { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; margin-top: 12px; }
.payment-plan-card { display: grid; gap: 10px; padding: 15px; border: 1px solid rgba(255,255,255,.09); border-radius: 13px; background: #080f14; }
.payment-plan-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.payment-plan-card strong { color: #eaf8fb; font-size: 13px; }
.payment-plan-card em { color: #55e1f2; font-size: 16px; font-style: normal; font-weight: 800; }
.payment-plan-card p { min-height: 32px; margin: 0; color: #718590; font-size: 10px; line-height: 1.6; }
.payment-plan-card small { color: #ffbd71; font-size: 9px; }
.payment-orders-section { margin-top: 22px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.08); }
.payment-order-list { display: grid; gap: 8px; margin-top: 12px; }
.payment-order-item { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 8px 14px; padding: 12px 13px; border: 1px solid rgba(255,255,255,.08); border-radius: 11px; background: #080f14; }
.payment-order-copy { min-width: 0; display: grid; gap: 4px; }
.payment-order-copy strong { color: #d9e9ed; font-size: 11px; }
.payment-order-copy span { overflow: hidden; color: #667b86; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.payment-order-status { align-self: start; padding: 5px 8px; border-radius: 999px; background: #15262d; color: #8fddea; font-size: 9px; font-style: normal; }
.payment-order-status.paid { background: #113328; color: #70e7bd; }
.payment-order-status.cancelled, .payment-order-status.expired { background: #2b2528; color: #b7a8ae; }
.payment-order-actions { grid-column: 1 / -1; display: flex; justify-content: flex-end; gap: 7px; }
.payment-order-actions .button { padding: 7px 10px; font-size: 9px; }
.payment-empty { grid-column: 1 / -1; padding: 22px; border: 1px dashed #26343c; border-radius: 11px; color: #667984; font-size: 10px; text-align: center; }

@media (max-width: 880px) {
  .auth-gate { padding: 22px; }
  .auth-layout { width: min(460px, 100%); min-height: 0; grid-template-columns: 1fr; gap: 24px; }
  .auth-intro { padding: 0 8px; }
  .auth-kicker, .auth-description, .auth-feature-list { display: none; }
  .auth-intro h1 { margin-top: 22px; font-size: 34px; }
  .auth-card { padding: 26px; }
}

@media (max-width: 560px) {
  .payment-plan-list { grid-template-columns: 1fr; }
  .auth-gate { padding: 14px; place-items: start center; }
  .auth-layout { padding: 18px 0; }
  .auth-intro h1 { font-size: 29px; }
  .auth-card { padding: 22px 18px; border-radius: 20px; }
  .auth-card-head { display: grid; }
  .auth-tabs { width: 100%; }
  .auth-tab { flex: 1; }
  #user-display-name { display: none; }
}

/* ===== V1.8.0 首页 ===== */
.home-page {
  position: fixed;
  inset: 0;
  z-index: 900;
  overflow-x: hidden;
  overflow-y: auto;
  background: #05070a;
  color: #f5f7f9;
  font-family: Inter, "SF Pro Display", "PingFang SC", "Microsoft YaHei", sans-serif;
  scroll-behavior: smooth;
}
.home-page button { font: inherit; }
.home-page button:focus-visible { outline: 2px solid #63e8fb; outline-offset: 3px; }
.home-portal-content { min-height: 100%; margin-left: 68px; }
.portal-rail {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 50;
  width: 68px;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow-x: hidden;
  overflow-y: auto;
  border-right: 1px solid rgba(255,255,255,.11);
  background: #030405;
  scrollbar-width: none;
}
.portal-rail::-webkit-scrollbar { display: none; }
.portal-rail-avatar-button {
  width: 100%;
  min-height: 72px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  padding: 0;
  border: 0;
  border-bottom: 1px solid rgba(255,255,255,.06);
  background: transparent;
  cursor: pointer;
}
.portal-rail-avatar {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(91,229,248,.34);
  border-radius: 50%;
  background: #17313c;
  color: #75edfb;
  font-size: 14px;
  font-weight: 800;
  box-shadow: 0 0 16px rgba(48,216,242,.14);
}
.portal-rail-nav { width: 100%; display: grid; gap: 3px; padding: 11px 6px 18px; }
.home-page .portal-rail-item {
  min-height: 58px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 5px 2px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: #b7bdc3;
  font: 650 10px/1 Inter, "PingFang SC", "Microsoft YaHei", sans-serif;
  cursor: pointer;
}
.portal-rail-icon { width: 24px; height: 24px; display: grid; place-items: center; }
.portal-rail-icon img { width: 21px; height: 21px; display: block; opacity: .82; filter: brightness(0) saturate(100%) invert(82%) sepia(5%) saturate(299%) hue-rotate(169deg) brightness(91%) contrast(88%); }
.portal-rail-item:hover { background: rgba(255,255,255,.045); color: #f6f8f9; }
.portal-rail-item.active { background: #062129; color: #21def7; box-shadow: 0 0 20px rgba(26,218,245,.08); }
.portal-rail-item.active .portal-rail-icon img { opacity: 1; filter: brightness(0) saturate(100%) invert(78%) sepia(87%) saturate(2852%) hue-rotate(142deg) brightness(100%) contrast(101%); }
.portal-feature-panel {
  position: fixed;
  top: 82px;
  left: 80px;
  z-index: 70;
  width: min(470px, calc(100vw - 100px));
  max-height: calc(100vh - 104px);
  overflow: auto;
  padding: 14px;
  border: 1px solid rgba(95,225,244,.2);
  border-radius: 18px;
  background: rgba(7,12,16,.98);
  box-shadow: 0 24px 80px rgba(0,0,0,.58), 0 0 0 1px rgba(255,255,255,.025) inset;
  backdrop-filter: blur(18px);
}
.portal-feature-panel[hidden] { display: none; }
.portal-feature-panel > header { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 2px 3px 13px; }
.portal-feature-panel > header > div { display: grid; gap: 4px; }
.portal-feature-panel > header strong { color: #edf9fb; font-size: 15px; }
.portal-feature-panel > header span { color: #667b87; font-size: 10px; }
.portal-feature-panel > header button { width: 30px; height: 30px; padding: 0; border: 1px solid rgba(255,255,255,.08); border-radius: 9px; background: #0d151a; color: #8ca0aa; font-size: 20px; cursor: pointer; }
.portal-feature-panel > header button:hover { border-color: rgba(82,225,244,.35); color: #e9f9fb; }
.portal-feature-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 8px; }
.portal-feature-entry {
  min-width: 0;
  min-height: 68px;
  display: grid;
  grid-template-columns: 38px minmax(0,1fr);
  align-items: center;
  gap: 10px;
  padding: 10px;
  border: 1px solid rgba(255,255,255,.065);
  border-radius: 12px;
  background: #0a1014;
  color: #c7d2d7;
  text-align: left;
  cursor: pointer;
}
.portal-feature-entry:hover { border-color: rgba(83,224,244,.27); background: #0b171c; transform: translateY(-1px); }
.portal-feature-entry.active { border-color: rgba(61,222,244,.4); background: #092129; box-shadow: 0 0 18px rgba(33,218,243,.06); }
.portal-feature-entry-icon { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 10px; background: rgba(74,218,239,.08); color: #5ee5f7; font-size: 12px; font-weight: 800; }
.portal-feature-entry-icon img { width: 21px; height: 21px; opacity: .9; filter: brightness(0) saturate(100%) invert(82%) sepia(67%) saturate(1415%) hue-rotate(144deg) brightness(99%) contrast(94%); }
.portal-feature-entry > span:last-child { min-width: 0; display: grid; gap: 5px; }
.portal-feature-entry strong { overflow: hidden; color: #dce9ed; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.portal-feature-entry small { overflow: hidden; color: #60737e; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.toast-container { z-index: 1200; }

/* ===== V4.1.0 OpenReel 视频剪辑 ===== */
.video-editor-page { width: calc(100% - 32px); max-width: none; min-height: calc(100vh - 84px); padding: 20px 0 28px; }
.video-editor-heading { min-height: 108px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.video-editor-heading h1 { margin: 5px 0 6px; font-size: 30px; letter-spacing: -.035em; }
.video-editor-heading p { max-width: 720px; margin: 0; color: #71808a; font-size: 11px; line-height: 1.7; }
.video-editor-heading-actions { display: flex; gap: 10px; }
.video-editor-heading-actions button { min-height: 40px; }
.video-editor-workspace { height: calc(100vh - 212px); min-height: 590px; display: grid; grid-template-columns: 224px minmax(0, 1fr); position: relative; overflow: hidden; border: 1px solid rgba(255,255,255,.1); border-radius: 16px; background: #070a0e; box-shadow: 0 24px 80px rgba(0,0,0,.3); }
.video-editor-sidebar { min-width: 0; display: grid; grid-template-rows: 54px minmax(0,1fr); border-right: 1px solid rgba(255,255,255,.08); background: #090d12; }
.video-editor-sidebar > header { display: flex; align-items: center; justify-content: space-between; padding: 0 14px; border-bottom: 1px solid rgba(255,255,255,.07); }
.video-editor-sidebar > header strong { font-size: 12px; }
.video-editor-sidebar > header span { color: #596872; font-size: 9px; }
.video-editor-project-list { min-height: 0; overflow: auto; padding: 9px; }
.video-editor-project { display: grid; grid-template-columns: minmax(0,1fr) 25px; align-items: center; gap: 3px; margin-bottom: 6px; border: 1px solid transparent; border-radius: 10px; }
.video-editor-project:hover { background: rgba(255,255,255,.035); }
.video-editor-project.active { border-color: rgba(47,219,242,.34); background: rgba(30,205,232,.08); }
.video-editor-project > button { min-width: 0; border: 0; background: transparent; color: #87959d; cursor: pointer; }
.video-editor-project > button:first-child { display: grid; gap: 5px; padding: 11px 7px 11px 10px; text-align: left; }
.video-editor-project strong { overflow: hidden; color: #dbe7ea; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.video-editor-project span { overflow: hidden; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.video-editor-project > button:last-child { width: 25px; height: 25px; padding: 0; border-radius: 7px; font-size: 16px; }
.video-editor-project > button:last-child:hover { background: rgba(255,79,99,.12); color: #ff8090; }
.video-editor-project-empty { padding: 34px 14px; color: #55636c; font-size: 10px; line-height: 1.8; text-align: center; }
.video-editor-stage { min-width: 0; display: grid; grid-template-rows: 54px minmax(0,1fr); }
.video-editor-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 0 14px 0 18px; border-bottom: 1px solid rgba(255,255,255,.08); background: #0a0e13; }
.video-editor-toolbar > div { min-width: 0; display: flex; align-items: center; gap: 9px; }
.video-editor-toolbar > div:first-child { display: grid; gap: 3px; }
.video-editor-toolbar strong { overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.video-editor-toolbar span { color: #5f6d75; font-size: 8px; }
.video-editor-toolbar span[data-tone="success"] { color: #5edfc1; }
.video-editor-toolbar span[data-tone="error"] { color: #ff7a8b; }
.video-editor-toolbar button, .video-editor-template-panel button { min-height: 32px; padding: 0 12px; border: 1px solid rgba(255,255,255,.11); border-radius: 8px; background: #11171d; color: #a8b4ba; font-size: 9px; cursor: pointer; }
.video-editor-toolbar button.primary, .video-editor-template-panel button.primary { border-color: #44dbef; background: #44dbef; color: #041014; font-weight: 800; }
.video-editor-toolbar button:disabled { opacity: .35; cursor: default; }
.video-editor-frame-wrap { min-height: 0; position: relative; background: #030405; }
.video-editor-frame-wrap iframe { width: 100%; height: 100%; display: block; border: 0; background: #050505; }
.video-editor-empty { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 9px; color: #65737c; text-align: center; }
.video-editor-empty[hidden] { display: none; }
.video-editor-empty span { color: #2cd9ef; font-size: 42px; }
.video-editor-empty strong { color: #cbd7db; font-size: 15px; }
.video-editor-empty p { margin: 0; font-size: 10px; }
.video-editor-template-panel { position: absolute; inset: 0 0 0 auto; z-index: 5; width: min(470px, 94%); display: grid; grid-template-rows: auto auto minmax(0,1fr) auto auto; gap: 12px; padding: 18px; border-left: 1px solid rgba(75,224,245,.22); background: rgba(7,11,15,.98); box-shadow: -20px 0 60px rgba(0,0,0,.5); }
.video-editor-template-panel[hidden] { display: none; }
.video-editor-template-panel > header { display: flex; align-items: center; justify-content: space-between; }
.video-editor-template-panel > header > div { display: grid; gap: 4px; }
.video-editor-template-panel > header strong { font-size: 15px; }
.video-editor-template-panel > header span { color: #39d9ee; font-size: 8px; }
.video-editor-template-panel > header button { width: 32px; padding: 0; font-size: 18px; }
.video-editor-template-panel > p { margin: 0; color: #65747c; font-size: 9px; line-height: 1.6; }
.video-editor-template-panel textarea { min-height: 0; resize: none; padding: 14px; border: 1px solid rgba(255,255,255,.1); border-radius: 10px; outline: 0; background: #020406; color: #a8e6ee; font: 10px/1.65 "Cascadia Code", Consolas, monospace; tab-size: 2; }
.video-editor-template-panel textarea:focus { border-color: rgba(66,221,241,.45); }
#video-editor-template-feedback { min-height: 17px; color: #7a8991; font-size: 9px; }
#video-editor-template-feedback[data-tone="success"] { color: #5edfc1; }
#video-editor-template-feedback[data-tone="error"] { color: #ff7a8b; }
.video-editor-template-panel > footer { display: flex; justify-content: flex-end; gap: 8px; }
.video-editor-create-card { width: min(440px, calc(100vw - 32px)); padding: 28px; }
.video-editor-create-card h2 { margin: 7px 0 9px; font-size: 22px; }
.video-editor-create-card > p:not(.home-section-kicker) { margin: 0 0 20px; color: #71808a; font-size: 11px; line-height: 1.7; }
.video-editor-create-card label { display: grid; gap: 8px; color: #85939b; font-size: 10px; text-align: left; }
.video-editor-create-card input { width: 100%; height: 44px; padding: 0 13px; border: 1px solid rgba(255,255,255,.13); border-radius: 9px; outline: 0; background: #090d11; color: #e6f0f2; }
.video-editor-create-card input:focus { border-color: rgba(67,221,241,.55); box-shadow: 0 0 0 3px rgba(67,221,241,.07); }
.home-page.video-editor-focus { overflow: hidden; }
.home-page.video-editor-focus .portal-rail,
.home-page.video-editor-focus .home-header,
.home-page.video-editor-focus .home-footer { display: none; }
.home-page.video-editor-focus .home-portal-content { min-height: 100vh; margin-left: 0; }
.home-page.video-editor-focus .video-editor-page { width: 100%; height: 100vh; min-height: 0; padding: 0; }
.home-page.video-editor-focus .video-editor-heading { min-height: 70px; padding: 0 18px; border-bottom: 1px solid rgba(255,255,255,.08); background: #080b0f; }
.home-page.video-editor-focus .video-editor-heading h1 { display: inline; margin-right: 12px; font-size: 18px; }
.home-page.video-editor-focus .video-editor-heading > div:first-child > p:last-child { display: inline; }
.home-page.video-editor-focus .video-editor-workspace { height: calc(100vh - 70px); min-height: 0; border: 0; border-radius: 0; box-shadow: none; }

/* ===== V4.3.0 Volcengine MediaKit full editing panel ===== */
.mediakit-page { width: calc(100% - 36px); max-width: none; min-height: calc(100vh - 84px); padding: 18px 0 28px; }
.mediakit-heading { min-height: 112px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.mediakit-heading h1 { margin: 5px 0 6px; font-size: 30px; letter-spacing: -.04em; }
.mediakit-heading p { max-width: 720px; margin: 0; color: #71808a; font-size: 11px; line-height: 1.7; }
.mediakit-heading-actions { display: flex; align-items: center; gap: 12px; }
.mediakit-heading-actions span { color: #819199; font-size: 10px; }
.mediakit-heading-actions span.ready { color: #4edfc1; }
.mediakit-heading-actions span.error { color: #ff7688; }
.mediakit-workspace { height: calc(100vh - 202px); min-height: 590px; display: grid; grid-template-columns: 230px minmax(390px, 1fr) 310px; overflow: hidden; border: 1px solid rgba(255,255,255,.1); border-radius: 17px; background: #070a0d; box-shadow: 0 24px 80px rgba(0,0,0,.34); }
.mediakit-workspace > * { min-width: 0; }
.mediakit-capability-panel, .mediakit-task-panel { display: grid; grid-template-rows: 58px minmax(0,1fr) auto; background: #090d11; }
.mediakit-capability-panel { border-right: 1px solid rgba(255,255,255,.08); }
.mediakit-task-panel { grid-template-rows: 58px minmax(0,1fr); border-left: 1px solid rgba(255,255,255,.08); }
.mediakit-capability-panel > header, .mediakit-task-panel > header { display: flex; align-items: center; justify-content: space-between; padding: 0 15px; border-bottom: 1px solid rgba(255,255,255,.07); }
.mediakit-capability-panel > header strong, .mediakit-task-panel > header strong { font-size: 12px; }
.mediakit-capability-panel > header span, .mediakit-task-panel > header span { color: #5f6e77; font-size: 8px; }
.mediakit-capability-panel > a { padding: 15px; border-top: 1px solid rgba(255,255,255,.07); color: #42dcef; font-size: 9px; text-decoration: none; }
.mediakit-capabilities { overflow: auto; padding: 10px; }
.mediakit-capability { width: 100%; display: grid; gap: 5px; margin-bottom: 7px; padding: 13px; border: 1px solid transparent; border-radius: 11px; background: transparent; color: #809099; text-align: left; cursor: pointer; }
.mediakit-capability:hover { background: rgba(255,255,255,.035); }
.mediakit-capability.active { border-color: rgba(55,219,241,.32); background: rgba(33,211,235,.08); }
.mediakit-capability strong { color: #dbe7ea; font-size: 11px; }
.mediakit-capability span { font-size: 9px; line-height: 1.55; }
.mediakit-run-panel { display: grid; grid-template-rows: 68px minmax(0,1fr); background: radial-gradient(circle at 48% 0, rgba(30,208,236,.055), transparent 38%), #06090c; }
.mediakit-run-panel > header { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 0 20px; border-bottom: 1px solid rgba(255,255,255,.08); }
.mediakit-run-panel > header > div:first-child { min-width: 0; display: grid; gap: 4px; }
.mediakit-run-panel > header strong { font-size: 13px; }
.mediakit-run-panel > header span { color: #697881; font-size: 9px; }
.mediakit-mode-switch { display: flex; padding: 3px; border: 1px solid rgba(255,255,255,.09); border-radius: 9px; background: #0c1116; }
.mediakit-mode-switch button { min-height: 29px; padding: 0 12px; border: 0; border-radius: 6px; background: transparent; color: #687881; font-size: 9px; cursor: pointer; }
.mediakit-mode-switch button.active { background: #22d9ef; color: #031014; font-weight: 800; }
#mediakit-form { width: min(620px, calc(100% - 40px)); align-self: start; justify-self: center; display: grid; gap: 16px; padding: 30px 0; overflow: auto; }
.mediakit-upload { min-height: 124px; display: grid; place-content: center; justify-items: center; gap: 8px; padding: 18px; border: 1px dashed rgba(55,219,241,.3); border-radius: 14px; background: rgba(25,184,207,.035); cursor: pointer; text-align: center; }
.mediakit-upload input { position: absolute; opacity: 0; pointer-events: none; }
.mediakit-upload span { color: #31dcef; font-size: 12px; font-weight: 800; }
.mediakit-upload strong { max-width: 100%; overflow: hidden; color: #c5d1d5; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.mediakit-upload small { color: #53616a; font-size: 8px; }
.mediakit-parameter-fields { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; }
.mediakit-parameter-fields label, .mediakit-cloud-settings label { display: grid; gap: 7px; color: #788891; font-size: 9px; }
.mediakit-parameter-fields input, .mediakit-parameter-fields select, .mediakit-parameter-fields textarea, .mediakit-cloud-settings input[type="text"] { width: 100%; height: 42px; padding: 0 12px; border: 1px solid rgba(255,255,255,.1); border-radius: 9px; outline: 0; background: #0b1015; color: #dbe5e8; font-size: 10px; }
.mediakit-parameter-fields textarea { height: 76px; padding: 11px 12px; resize: vertical; line-height: 1.55; }
.mediakit-parameter-fields input:focus, .mediakit-parameter-fields textarea:focus, .mediakit-cloud-settings input[type="text"]:focus { border-color: rgba(54,219,240,.5); }
.mediakit-parameter-fields label.wide { grid-column: 1 / -1; }
.mediakit-parameter-fields label.check { display: flex; grid-template-columns: auto 1fr; align-items: center; min-height: 42px; padding: 0 12px; border: 1px solid rgba(255,255,255,.08); border-radius: 9px; background: #0b1015; }
.mediakit-parameter-fields label.check input { width: 15px; height: 15px; padding: 0; accent-color: #25dcef; }
.mediakit-cloud-settings { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 12px; padding: 15px; border: 1px solid rgba(255,192,70,.18); border-radius: 12px; background: rgba(255,177,44,.035); }
.mediakit-cloud-settings[hidden] { display: none; }
.mediakit-cloud-settings > div { grid-column: 1 / -1; display: flex; justify-content: space-between; }
.mediakit-cloud-settings > div strong { font-size: 10px; }
.mediakit-cloud-settings > div span { color: #9b8050; font-size: 9px; }
.mediakit-cloud-settings button, .mediakit-task-panel button { min-height: 34px; padding: 0 12px; border: 1px solid rgba(255,255,255,.1); border-radius: 8px; background: #11171c; color: #a9b5ba; font-size: 9px; cursor: pointer; }
.mediakit-charge-confirm { grid-column: 1 / -1; display: flex !important; grid-template-columns: auto 1fr; align-items: center; }
.mediakit-charge-confirm input { accent-color: #2edcf0; }
.mediakit-feedback { min-height: 18px; color: #718089; font-size: 9px; }
.mediakit-feedback.success { color: #50dfbf; }
.mediakit-feedback.error { color: #ff7889; }
#mediakit-run { width: 100%; min-height: 44px; }
.mediakit-task-list { overflow: auto; padding: 10px; }
.mediakit-task-list > p { padding: 25px 10px; color: #596770; font-size: 9px; text-align: center; }
.mediakit-task { display: grid; gap: 7px; margin-bottom: 8px; padding: 12px; border: 1px solid rgba(255,255,255,.07); border-radius: 10px; background: #0b1014; }
.mediakit-task > header { display: flex; justify-content: space-between; gap: 8px; }
.mediakit-task strong { font-size: 10px; }
.mediakit-task em { color: #94a2a9; font-size: 8px; font-style: normal; }
.mediakit-task em.success { color: #4edfc0; }
.mediakit-task em.failed { color: #ff7587; }
.mediakit-task span, .mediakit-task p { margin: 0; color: #607079; font-size: 8px; line-height: 1.55; }
.mediakit-task a { color: #36dcef; font-size: 9px; text-decoration: none; }
.mediakit-task button { justify-self: start; }
.home-page.mediakit-focus { overflow: hidden; }
.home-page.mediakit-focus .portal-rail, .home-page.mediakit-focus .home-header, .home-page.mediakit-focus .home-footer { display: none; }
.home-page.mediakit-focus .home-portal-content { min-height: 100vh; margin-left: 0; }
.home-page.mediakit-focus .mediakit-page { width: 100%; height: 100vh; min-height: 0; padding: 0; }
.home-page.mediakit-focus .mediakit-heading { min-height: 70px; padding: 0 20px; border-bottom: 1px solid rgba(255,255,255,.08); background: #080b0f; }
.home-page.mediakit-focus .mediakit-heading h1 { display: inline; margin-right: 12px; font-size: 18px; }
.home-page.mediakit-focus .mediakit-heading > div:first-child > p:last-child { display: inline; }
.home-page.mediakit-focus .mediakit-workspace { height: calc(100vh - 70px); min-height: 0; border: 0; border-radius: 0; box-shadow: none; }
@media (max-width: 1100px) {
  .mediakit-workspace { grid-template-columns: 190px minmax(380px,1fr) 260px; }
}

/* ===== V2.6.0 图片制作 ===== */
.image-creation-page { padding-bottom: 80px; }
.image-creation-hero { align-items: end; }
.image-creation-layout {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: 18px;
  padding-bottom: 32px;
}
.image-creation-model-panel,
.image-creation-form,
.image-creation-result-panel {
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 15px;
  background: #090d11;
}
.image-creation-model-panel {
  align-self: start;
  display: grid;
  gap: 8px;
  padding: 15px 12px;
}
.image-creation-panel-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 3px 5px 10px;
  color: #7c8991;
  font-size: 10px;
}
.image-creation-panel-heading strong { color: #4fdced; font-size: 9px; font-weight: 700; }
.image-creation-model {
  width: 100%;
  min-height: 68px;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border: 1px solid transparent;
  border-radius: 11px;
  background: #0d1216;
  color: #c8d2d6;
  text-align: left;
  cursor: pointer;
}
.image-creation-model:hover { border-color: rgba(83,224,244,.2); background: #10191e; }
.image-creation-model.active { border-color: rgba(73,222,243,.45); background: #0b2027; box-shadow: inset 3px 0 0 #4ce0f3; }
.image-creation-model-mark {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(81,222,242,.2);
  border-radius: 10px;
  background: #102027;
  color: #55e2f4;
  font-size: 11px;
  font-weight: 800;
}
.image-creation-model > span:nth-child(2) { min-width: 0; display: grid; gap: 5px; }
.image-creation-model strong { font-size: 11px; }
.image-creation-model small { overflow: hidden; color: #64737c; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.image-creation-model i { color: #56636a; font-size: 8px; font-style: normal; white-space: nowrap; }
.image-creation-model.configured i { color: #4bd2b3; }
.image-creation-model-note {
  display: grid;
  gap: 6px;
  margin-top: 7px;
  padding: 13px 11px;
  border-top: 1px solid rgba(255,255,255,.07);
  color: #5d6b73;
  font-size: 9px;
  line-height: 1.6;
}
.image-creation-model-note strong { color: #87959d; }
.image-creation-workspace { min-width: 0; display: grid; grid-template-columns: minmax(340px, .78fr) minmax(400px, 1.22fr); gap: 18px; }
.image-creation-form { align-self: start; overflow: hidden; }
.image-creation-form > header,
.image-creation-result-panel > header {
  min-height: 65px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 18px;
  border-bottom: 1px solid rgba(255,255,255,.07);
}
.image-creation-form > header > div,
.image-creation-result-panel > header > div { display: grid; gap: 4px; }
.image-creation-form > header span,
.image-creation-result-panel > header span { color: #63727a; font-size: 9px; }
.image-creation-form > header strong,
.image-creation-result-panel > header strong { color: #dce6e9; font-size: 13px; }
.image-creation-ready-state {
  padding: 5px 8px;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 999px;
  color: #6e7b82 !important;
  font-size: 9px !important;
}
.image-creation-ready-state.ready { border-color: rgba(74,210,179,.28); color: #4bd2b3 !important; }
.image-creation-prompt { position: relative; display: grid; gap: 8px; padding: 18px; }
.image-creation-prompt > span,
.image-creation-options label > span { color: #85939a; font-size: 10px; font-weight: 650; }
.image-creation-prompt textarea {
  width: 100%;
  min-height: 220px;
  padding: 13px 14px 30px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 11px;
  outline: 0;
  resize: vertical;
  background: #05080b;
  color: #dce5e8;
  font: 11px/1.7 Inter, "PingFang SC", "Microsoft YaHei", sans-serif;
}
.image-creation-prompt textarea:focus { border-color: rgba(74,220,241,.5); box-shadow: 0 0 0 3px rgba(74,220,241,.07); }
.image-creation-prompt textarea::placeholder { color: #3e4a51; }
.image-creation-prompt small { position: absolute; right: 30px; bottom: 28px; color: #4f5d65; font-size: 9px; }
.image-creation-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; padding: 0 18px 18px; }
.image-creation-options label { min-width: 0; display: grid; gap: 7px; }
.image-creation-options select {
  width: 100%;
  height: 38px;
  padding: 0 10px;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 9px;
  outline: 0;
  background: #080c0f;
  color: #b9c4c9;
  font-size: 10px;
}
.image-creation-form > footer { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 14px; padding: 16px 18px 18px; border-top: 1px solid rgba(255,255,255,.06); }
.image-creation-form > footer span { color: #5e6b73; font-size: 9px; line-height: 1.5; }
.image-creation-form > footer button {
  min-width: 112px;
  height: 40px;
  border: 0;
  border-radius: 9px;
  background: #48deef;
  color: #031014;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
}
.image-creation-form > footer button:disabled { opacity: .5; cursor: wait; }
.image-creation-result-panel { min-width: 0; overflow: hidden; }
.image-creation-result-panel > header small { color: #63727a; font-size: 9px; }
.image-creation-results { min-height: 500px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding: 14px; }
.image-creation-empty { grid-column: 1 / -1; display: grid; place-items: center; align-content: center; gap: 8px; color: #536169; text-align: center; }
.image-creation-empty > span { width: 48px; height: 48px; display: grid; place-items: center; border: 1px solid rgba(73,222,241,.16); border-radius: 50%; background: #0b171c; color: #4edff1; font-size: 18px; }
.image-creation-empty strong { color: #aab6bb; font-size: 12px; }
.image-creation-empty p { margin: 0; font-size: 9px; }
.image-creation-output { position: relative; min-height: 230px; overflow: hidden; border: 1px solid rgba(255,255,255,.08); border-radius: 11px; background: #05080a; }
.image-creation-output img { width: 100%; height: 100%; min-height: 230px; display: block; object-fit: cover; }
.image-creation-output a { position: absolute; right: 9px; bottom: 9px; padding: 7px 10px; border-radius: 7px; background: rgba(3,8,10,.82); color: #dce8eb; font-size: 9px; text-decoration: none; backdrop-filter: blur(10px); }
.video-reference-field { display: grid; gap: 7px; padding: 0 18px 18px; }
.video-reference-field span { color: #85939a; font-size: 10px; font-weight: 650; }
.video-reference-field input {
  width: 100%;
  height: 40px;
  padding: 0 11px;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 9px;
  outline: 0;
  background: #05080b;
  color: #dce7ea;
  font-size: 10px;
}
.video-reference-field input:focus { border-color: rgba(77,221,241,.55); box-shadow: 0 0 0 3px rgba(77,221,241,.07); }
.video-task-list { min-height: 500px; display: grid; align-content: start; gap: 10px; padding: 14px; }
.video-task-card { overflow: hidden; border: 1px solid rgba(255,255,255,.08); border-radius: 11px; background: #070b0e; }
.video-task-card > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 13px; border-bottom: 1px solid rgba(255,255,255,.06); }
.video-task-card > header > div { min-width: 0; display: grid; gap: 4px; }
.video-task-card > header strong { overflow: hidden; color: #cbd7db; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.video-task-card > header small { color: #56646c; font-size: 8px; }
.video-task-status { padding: 5px 8px; border-radius: 999px; background: #131b20; color: #819098; font-size: 8px; white-space: nowrap; }
.video-task-status.running, .video-task-status.queued { background: rgba(60,184,220,.1); color: #5bcce8; }
.video-task-status.success { background: rgba(72,215,183,.1); color: #55d9bc; }
.video-task-status.failed { background: rgba(235,82,103,.1); color: #eb8291; }
.video-task-body { display: grid; gap: 9px; padding: 12px 13px; }
.video-task-body p { display: -webkit-box; overflow: hidden; margin: 0; color: #829098; font-size: 9px; line-height: 1.6; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.video-task-meta { display: flex; flex-wrap: wrap; gap: 6px; }
.video-task-meta span { padding: 4px 6px; border-radius: 5px; background: #10161a; color: #617078; font-size: 8px; }
.video-task-actions { display: flex; justify-content: flex-end; gap: 7px; }
.video-task-actions button { border: 1px solid rgba(46,205,255,.25); border-radius: 7px; padding: 6px 10px; background: rgba(11,26,34,.92); color: #93dff2; font: inherit; cursor: pointer; }
.video-task-actions button:disabled { opacity: .5; cursor: wait; }
.video-task-card video { width: 100%; max-height: 330px; display: block; background: #000; }
.video-task-error { color: #e17888 !important; }
.video-task-loading { min-height: 200px; display: grid; place-items: center; color: #63727a; font-size: 10px; }

/* ===== V2.2.0 模型配置 ===== */
.model-config-page { padding-bottom: 80px; }
.model-config-hero { align-items: end; }
.model-config-security {
  max-width: 360px;
  display: grid;
  gap: 5px;
  padding: 14px 16px;
  border: 1px solid rgba(62, 221, 244, .18);
  border-radius: 12px;
  background: #091116;
}
.model-config-security strong { color: #6be8f8; font-size: 12px; }
.model-config-security span { color: #71828d; font-size: 11px; line-height: 1.55; }
.model-config-content { min-width: 0; width: 100%; display: grid; gap: 22px; }
.model-config-toolbar { min-width: 0; max-width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.model-config-filters {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 4px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 11px;
  background: #090d11;
}
.model-config-filters button {
  min-width: 60px;
  height: 34px;
  padding: 0 14px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #77848d;
  font-size: 11px;
  cursor: pointer;
}
.model-config-filters button:hover { color: #dce5e9; }
.model-config-filters button.active { background: #112128; color: #55e3f7; }
.model-config-add-button {
  height: 42px;
  padding: 0 18px;
  border: 1px solid rgba(70, 222, 244, .5);
  border-radius: 10px;
  background: #07161c;
  color: #63e6f7;
  font-size: 12px;
  font-weight: 720;
  cursor: pointer;
}
.model-config-add-button:hover { border-color: #64e7f7; background: #0a2028; }
.model-config-grid { min-width: 0; max-width: 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.model-config-card {
  min-width: 0;
  width: 100%;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 15px;
  background: #090d11;
}
.model-config-card.configured { border-color: rgba(72, 217, 192, .26); }
.model-config-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding: 18px 18px 14px;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.model-config-card-title { min-width: 0; display: flex; align-items: center; gap: 11px; }
.model-config-provider-mark {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border: 1px solid rgba(80,224,245,.22);
  border-radius: 10px;
  background: #0d1c22;
  color: #5ce5f6;
  font-size: 12px;
  font-weight: 820;
  letter-spacing: .04em;
}
.model-config-card-title > div { min-width: 0; display: grid; gap: 5px; }
.model-config-card-title strong { overflow: hidden; color: #edf4f6; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.model-config-card-title span { color: #63737e; font-size: 10px; }
.model-config-status { display: flex; align-items: center; gap: 7px; color: #65747d; font-size: 10px; white-space: nowrap; }
.model-config-status::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: #475158; }
.model-config-card.configured .model-config-status { color: #57d7bc; }
.model-config-card.configured .model-config-status::before { background: #48d7b7; box-shadow: 0 0 9px rgba(72,215,183,.35); }
.model-config-form { display: grid; grid-template-columns: 1fr 1fr; gap: 13px 11px; padding: 17px 18px 18px; }
.model-config-field { min-width: 0; display: grid; gap: 7px; }
.model-config-field.wide { grid-column: 1 / -1; }
.model-config-field > span { color: #7a8992; font-size: 10px; font-weight: 650; }
.model-config-field input,
.model-config-field textarea {
  width: 100%;
  min-width: 0;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 9px;
  outline: 0;
  background: #05080b;
  color: #dce7ea;
  font: 11px/1.45 Inter, "PingFang SC", "Microsoft YaHei", sans-serif;
}
.model-config-field input { height: 38px; padding: 0 11px; }
.model-config-field textarea { min-height: 72px; padding: 10px 11px; resize: vertical; }
.model-config-field input::placeholder,
.model-config-field textarea::placeholder { color: #3f4b52; }
.model-config-field input:focus,
.model-config-field textarea:focus { border-color: rgba(77,221,241,.55); box-shadow: 0 0 0 3px rgba(77,221,241,.07); }
.model-config-key-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 7px; }
.model-config-key-row button {
  min-width: 58px;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 9px;
  background: #10161a;
  color: #9eabb2;
  font-size: 10px;
  cursor: pointer;
}
.model-config-key-note { min-height: 14px; color: #526169; font-size: 9px; }
.model-config-key-note.saved { color: #4fcdb2; }
.model-config-form-footer { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 3px; }
.model-config-enabled { display: flex; align-items: center; gap: 7px; color: #829098; font-size: 10px; cursor: pointer; }
.model-config-enabled input { width: 14px; height: 14px; accent-color: #36d8ef; }
.model-config-actions { display: flex; align-items: center; gap: 8px; }
.model-config-actions button {
  height: 34px;
  padding: 0 14px;
  border: 1px solid rgba(255,255,255,.11);
  border-radius: 8px;
  background: #11171b;
  color: #aab5bb;
  font-size: 10px;
  cursor: pointer;
}
.model-config-actions button[type="submit"] { border-color: #47dced; background: #47dced; color: #041014; font-weight: 780; }
.model-config-actions button.success { border-color: rgba(72,215,183,.45); background: rgba(72,215,183,.1); color: #55d9bc; }
.model-config-actions button.failed { border-color: rgba(235,82,103,.4); background: rgba(235,82,103,.08); color: #ed8191; }
.model-config-actions button.danger { border-color: rgba(235,82,103,.28); background: rgba(235,82,103,.06); color: #e97889; }
.model-config-actions button:disabled { opacity: .55; cursor: wait; }
.model-config-empty {
  grid-column: 1 / -1;
  min-height: 220px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 8px;
  border: 1px dashed rgba(255,255,255,.1);
  border-radius: 15px;
  color: #61717a;
  text-align: center;
}
.model-config-empty strong { color: #b7c2c7; font-size: 13px; }
.model-config-empty span { font-size: 10px; }

/* ===== V3.1.0 角色档案 ===== */
.role-profile-page { color: #edf3f5; }
.role-profile-hero { align-items: end; }
.role-profile-summary {
  width: min(310px, 100%);
  display: grid;
  gap: 7px;
  padding: 18px;
  border: 1px solid rgba(76,224,244,.18);
  border-radius: 15px;
  background: linear-gradient(145deg, rgba(10,26,32,.94), rgba(7,12,16,.94));
}
.role-profile-summary > span { color: #58717c; font-size: 9px; font-weight: 800; letter-spacing: .12em; }
.role-profile-summary > strong { color: #e7f4f7; font-size: 17px; line-height: 1.35; }
.role-profile-summary > small { color: #72848c; font-size: 10px; }
.role-profile-summary > div { height: 5px; overflow: hidden; margin-top: 5px; border-radius: 999px; background: #172127; }
.role-profile-summary > div i { width: 0; height: 100%; display: block; border-radius: inherit; background: linear-gradient(90deg, #2ed7ed, #72efc3); transition: width .3s ease; }
.role-profile-summary > em { color: #59dcec; font-size: 9px; font-style: normal; text-align: right; }
.role-profile-content { display: grid; gap: 18px; }
.role-profile-manager, .role-profile-form, .role-photo-section {
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 17px;
  background: #080d11;
}
.role-profile-manager > header { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 18px 22px; border-bottom: 1px solid rgba(255,255,255,.07); }
.role-profile-manager > header > div { display: flex; align-items: center; gap: 12px; }
.role-profile-manager > header > div:first-child > span { color: #45dff3; font-size: 10px; font-weight: 900; }
.role-profile-manager h2 { margin: 0; color: #e8f1f4; font-size: 16px; }
.role-profile-manager p { margin: 4px 0 0; color: #687983; font-size: 10px; }
#role-profile-quota { color: #68e6c9; font-size: 11px; }
#role-profile-add { height: 36px; padding: 0 14px; border: 1px solid rgba(69,223,243,.34); border-radius: 9px; background: rgba(35,143,160,.12); color: #62e5f5; font-size: 10px; cursor: pointer; }
#role-profile-add:disabled { cursor: not-allowed; opacity: .45; }
.role-profile-list { display: grid; grid-template-columns: repeat(auto-fill,minmax(220px,1fr)); gap: 10px; padding: 14px; }
.role-profile-list > p { grid-column: 1 / -1; margin: 4px; color: #64757e; font-size: 10px; }
.role-profile-card { min-width: 0; display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 8px; padding: 13px; border: 1px solid rgba(255,255,255,.07); border-radius: 11px; background: #060b0f; cursor: pointer; }
.role-profile-card:hover { border-color: rgba(69,223,243,.25); }
.role-profile-card.active { border-color: rgba(76,226,196,.5); background: linear-gradient(120deg,rgba(26,91,78,.28),rgba(6,11,15,.96)); box-shadow: inset 3px 0 #4ce2c4; }
.role-profile-card > div { min-width: 0; display: grid; gap: 4px; }
.role-profile-card strong { overflow: hidden; color: #dfecee; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.role-profile-card span { overflow: hidden; color: #60717a; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.role-profile-card button { align-self: center; width: 28px; height: 28px; border: 1px solid rgba(255,91,115,.2); border-radius: 7px; background: rgba(255,70,95,.06); color: #d87889; cursor: pointer; }
.role-profile-form > header, .role-photo-section > header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding: 21px 23px;
  border-bottom: 1px solid rgba(255,255,255,.07);
}
.role-profile-form > header > div, .role-photo-section > header > div { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; }
.role-profile-form > header span, .role-photo-section > header span { grid-row: 1 / span 2; color: #45dff3; font-size: 10px; font-weight: 900; }
.role-profile-form h2, .role-photo-section h2 { margin: 0; color: #e8f1f4; font-size: 18px; }
.role-profile-form header p, .role-photo-section header p { grid-column: 2; margin: 0; color: #687983; font-size: 10px; line-height: 1.55; }
.role-profile-form > header > small, .role-photo-section > header > small { color: #5e7078; font-size: 9px; white-space: nowrap; }
.role-profile-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; padding: 24px; }
.role-profile-field { min-width: 0; display: grid; align-content: start; gap: 8px; }
.role-profile-field.wide { grid-column: 1 / -1; }
.role-profile-field > span { color: #84949b; font-size: 10px; font-weight: 700; }
.role-profile-field > span b { color: #50dff3; }
.role-profile-field input, .role-profile-field textarea {
  width: 100%;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 10px;
  outline: 0;
  padding: 11px 12px;
  background: #05090c;
  color: #e8f0f2;
  font: inherit;
  font-size: 11px;
  line-height: 1.6;
  resize: vertical;
}
.role-profile-field input { height: 43px; }
.role-profile-field input:focus, .role-profile-field textarea:focus { border-color: rgba(70,221,241,.48); box-shadow: 0 0 0 3px rgba(70,221,241,.07); }
.role-profile-field > small { color: #4f6068; font-size: 8px; }
.role-profile-form > footer { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 23px; border-top: 1px solid rgba(255,255,255,.07); }
.role-profile-form > footer p { min-height: 18px; margin: 0; color: #61d9c2; font-size: 10px; }
.role-profile-form > footer button { min-width: 142px; height: 42px; border: 1px solid #49dff3; border-radius: 9px; background: #49dff3; color: #041013; font-size: 11px; font-weight: 800; cursor: pointer; }
.role-profile-form > footer button:disabled { opacity: .55; cursor: wait; }
.role-photo-groups { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 16px; }
.role-photo-group { min-width: 0; overflow: hidden; border: 1px solid rgba(255,255,255,.07); border-radius: 13px; background: #060a0d; }
.role-photo-group > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px; border-bottom: 1px solid rgba(255,255,255,.06); }
.role-photo-group > header > div { min-width: 0; display: grid; gap: 4px; }
.role-photo-group > header strong { color: #cfdadd; font-size: 11px; }
.role-photo-group > header span { overflow: hidden; color: #56676f; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.role-photo-group > header button { min-width: 66px; height: 30px; border: 1px solid rgba(75,223,244,.28); border-radius: 8px; background: rgba(35,143,160,.1); color: #53dff2; font-size: 9px; cursor: pointer; }
.role-photo-group > header button:disabled { opacity: .5; cursor: wait; }
.role-photo-grid { min-height: 128px; display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); align-content: start; gap: 7px; padding: 9px; }
.role-photo-card { min-width: 0; overflow: hidden; margin: 0; border: 1px solid rgba(255,255,255,.06); border-radius: 9px; background: #0b1115; }
.role-photo-card img { width: 100%; aspect-ratio: 4/3; display: block; object-fit: cover; }
.role-photo-card figcaption { display: flex; align-items: center; justify-content: space-between; gap: 4px; padding: 6px 7px; }
.role-photo-card figcaption span { overflow: hidden; color: #66777e; font-size: 7px; text-overflow: ellipsis; white-space: nowrap; }
.role-photo-card figcaption button { width: 19px; height: 19px; flex: 0 0 19px; border: 0; border-radius: 5px; background: rgba(255,91,107,.1); color: #d86d79; cursor: pointer; }
.role-photo-empty { grid-column: 1 / -1; min-height: 108px; display: grid; place-content: center; justify-items: center; gap: 7px; color: #33464f; }
.role-photo-empty span { font-size: 22px; }
.role-photo-empty small { font-size: 8px; }
.home-header {
  position: sticky;
  top: 0;
  z-index: 30;
  height: 70px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  background: rgba(5,7,10,.9);
  backdrop-filter: blur(22px);
}
.home-header-inner {
  width: min(1600px, calc(100% - 64px));
  height: 100%;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 230px 1fr auto;
  align-items: center;
  gap: 30px;
}
.home-wordmark {
  width: max-content;
  display: grid;
  gap: 1px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #f8fbfd;
  text-align: left;
  cursor: pointer;
}
.home-wordmark strong { font-size: 18px; letter-spacing: -.02em; }
.home-wordmark span { color: #4f6676; font-size: 8px; font-weight: 760; letter-spacing: .19em; }
.home-nav { height: 100%; display: flex; justify-content: center; gap: 34px; }
.home-nav-item {
  position: relative;
  padding: 0 2px;
  border: 0;
  background: transparent;
  color: #818b94;
  font-size: 13px;
  cursor: pointer;
}
.home-nav-item::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: transparent;
}
.home-nav-item:hover, .home-nav-item.active { color: #f4f7f9; }
.home-nav-item.active::after { background: #36d9f5; }
.home-header-actions { display: flex; align-items: center; gap: 10px; }
.home-header-cta {
  height: 36px;
  padding: 0 18px;
  border: 1px solid #44ddf4;
  border-radius: 9px;
  background: #44ddf4;
  color: #031014;
  font-size: 12px;
  font-weight: 760;
  cursor: pointer;
}
.home-user-button {
  height: 38px;
  max-width: 160px;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 0 11px 0 5px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 10px;
  background: #0c1117;
  color: #c9d0d7;
  font-size: 12px;
  cursor: pointer;
}
.home-user-button:hover { border-color: rgba(68,221,244,.48); }
.home-user-avatar {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: #193340;
  color: #6fe9fb;
  font-weight: 800;
}
.home-user-button > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.home-main { width: min(1600px, calc(100% - 64px)); margin: 0 auto; padding: 24px 0 88px; }
.home-hero {
  position: relative;
  min-height: 500px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 22px;
  background: #030609;
  box-shadow: 0 34px 90px rgba(0,0,0,.35);
}
.home-hero > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: .96;
  transition: opacity .28s ease, transform .55s ease;
}
.home-hero.is-changing > img { opacity: .72; transform: scale(1.012); }
.home-hero-content {
  position: relative;
  z-index: 1;
  width: min(630px, 56%);
  padding: 88px 0 76px 64px;
}
.home-eyebrow, .home-section-kicker {
  margin: 0;
  color: #54dff6;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .22em;
}
.home-hero h1 {
  margin: 17px 0 22px;
  color: #f7fafc;
  font-size: clamp(42px, 5vw, 72px);
  line-height: 1.05;
  letter-spacing: -.055em;
  font-weight: 760;
}
.home-hero-content > p:not(.home-eyebrow) {
  width: min(520px, 100%);
  margin: 0;
  color: #91a0ac;
  font-size: 15px;
  line-height: 1.85;
}
.home-hero-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 32px; }
.home-primary-action, .home-secondary-action {
  height: 48px;
  padding: 0 24px;
  border-radius: 11px;
  font-size: 14px;
  font-weight: 750;
  cursor: pointer;
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
}
.home-primary-action { border: 1px solid #4be1f7; background: #4be1f7; color: #031014; }
.home-secondary-action { border: 1px solid rgba(255,255,255,.17); background: rgba(8,13,18,.74); color: #e8eef2; }
.home-primary-action:hover, .home-secondary-action:hover { transform: translateY(-2px); }
.home-secondary-action:hover { border-color: rgba(75,225,247,.48); }
.home-hero-meta { display: flex; flex-wrap: wrap; gap: 24px; margin-top: 54px; color: #526471; font-size: 11px; }
.home-hero-meta span { position: relative; }
.home-hero-meta span + span::before { content: '/'; position: absolute; left: -15px; color: #26343f; }
.home-carousel-controls {
  position: absolute;
  z-index: 3;
  right: 24px;
  bottom: 22px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 999px;
  background: rgba(3,7,10,.72);
  backdrop-filter: blur(14px);
}
.home-carousel-controls > button {
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 50%;
  background: rgba(255,255,255,.08);
  color: #dce8ed;
  cursor: pointer;
}
.home-carousel-controls > button:hover { background: #54dff6; color: #031014; }
.home-carousel-controls > span { min-width: 36px; color: #7f909b; font-size: 10px; text-align: center; }
.home-carousel-dots { display: flex; align-items: center; gap: 6px; }
.home-carousel-dots button { width: 7px; height: 7px; padding: 0; border: 0; border-radius: 999px; background: #43515a; cursor: pointer; transition: width .2s ease, background .2s ease; }
.home-carousel-dots button[aria-selected="true"] { width: 22px; background: #54dff6; }
.home-section { padding-top: 86px; scroll-margin-top: 84px; }
.home-section-heading { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 26px; }
.home-section-heading h2 { margin: 10px 0 0; font-size: clamp(26px, 3vw, 40px); line-height: 1.08; letter-spacing: -.04em; }
.home-text-action {
  padding: 8px 0;
  border: 0;
  border-bottom: 1px solid #46515b;
  background: transparent;
  color: #bdc7cf;
  font-size: 12px;
  cursor: pointer;
}
.home-text-action:hover { color: #5ce5f8; border-color: #5ce5f8; }
.home-project-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.home-project-loading, .home-project-empty {
  grid-column: 1 / -1;
  min-height: 156px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 16px;
  color: #697782;
  background: #090d12;
}
.home-project-card {
  min-height: 170px;
  display: grid;
  align-content: space-between;
  padding: 22px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 16px;
  background: #0a0e13;
  color: #eef3f6;
  text-align: left;
  cursor: pointer;
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
}
.home-project-card:hover { transform: translateY(-3px); border-color: rgba(70,219,242,.4); background: #0d141b; }
.home-project-card-index { color: #3b5361; font-size: 11px; font-weight: 800; letter-spacing: .16em; }
.home-project-card h3 { margin: 28px 0 7px; font-size: 18px; letter-spacing: -.02em; }
.home-project-card p { margin: 0; color: #62717d; font-size: 11px; }
.home-template-filters { display: flex; gap: 7px; }
.home-template-filters { scrollbar-width: none; }
.home-template-filters::-webkit-scrollbar { display: none; }
.home-template-filters button {
  height: 34px;
  padding: 0 14px;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 999px;
  background: transparent;
  color: #78838d;
  font-size: 11px;
  cursor: pointer;
}
.home-template-filters button:hover, .home-template-filters button.active { border-color: #47dff6; color: #081216; background: #47dff6; }
.home-template-grid { display: grid; grid-template-columns: 1.25fr 1fr 1fr; gap: 14px; }
.home-template-card {
  position: relative;
  min-height: 420px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 18px;
  background: #0a0e13;
  transition: transform .2s ease, border-color .2s ease;
}
.home-template-card:hover { transform: translateY(-4px); border-color: rgba(78,222,244,.34); }
.home-template-card[hidden] { display: none; }
.home-template-card > img { width: 100%; height: 250px; display: block; object-fit: cover; }
.home-template-card-featured > img { height: 270px; }
.home-template-card-copy { padding: 22px; }
.home-template-card-copy > span { color: #4eddf4; font-size: 10px; font-weight: 800; letter-spacing: .12em; }
.home-template-card-copy h3 { margin: 9px 0 8px; font-size: 20px; letter-spacing: -.025em; }
.home-template-card-copy p { min-height: 42px; margin: 0; color: #727f89; font-size: 12px; line-height: 1.7; }
.home-template-card-copy button {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  margin-top: 10px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #cfd8de;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}
.home-template-card-copy button:hover { color: #55e2f7; }
.home-capability-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid rgba(255,255,255,.1); }
.home-capability-grid article { padding: 30px 34px 36px 0; border-right: 1px solid rgba(255,255,255,.08); }
.home-capability-grid article + article { padding-left: 34px; }
.home-capability-grid article:last-child { border-right: 0; }
.home-capability-grid span { color: #3f5664; font-size: 10px; font-weight: 800; }
.home-capability-grid h3 { margin: 24px 0 9px; font-size: 18px; }
.home-capability-grid p { margin: 0; color: #697680; font-size: 12px; line-height: 1.8; }
.home-footer {
  width: min(1600px, calc(100% - 64px));
  min-height: 118px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  border-top: 1px solid rgba(255,255,255,.09);
}
.home-footer div { display: grid; gap: 7px; }
.home-footer strong { font-size: 16px; }
.home-footer span { color: #52616c; font-size: 11px; }
.home-footer button { border: 0; background: transparent; color: #53e1f6; font-size: 12px; cursor: pointer; }
.home-directory-page { min-height: calc(100vh - 188px); }
.home-directory-hero {
  min-height: 260px;
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 42px;
  padding: 62px 0 46px;
  border-bottom: 1px solid rgba(255,255,255,.1);
}
.home-directory-hero > div { max-width: 760px; }
.home-directory-hero h1 {
  margin: 13px 0 18px;
  font-size: clamp(48px, 6vw, 82px);
  line-height: .98;
  letter-spacing: -.055em;
}
.home-directory-hero p:not(.home-section-kicker) { margin: 0; color: #7d8a94; font-size: 14px; line-height: 1.8; }
.home-directory-content { padding: 34px 0 80px; }
.home-directory-toolbar, .home-library-toolbar {
  min-height: 54px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  margin-bottom: 24px;
}
.home-library-toolbar { align-items: flex-start; }
.home-template-search-field { flex: 0 1 390px; }
.home-library-toolbar-meta { min-width: 0; display: flex; align-items: center; justify-content: flex-end; gap: 14px; }
.home-search-field {
  width: min(420px, 100%);
  height: 46px;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 15px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 11px;
  background: #090d12;
}
.home-search-field span { flex: 0 0 auto; color: #4fdff5; font-size: 10px; font-weight: 800; letter-spacing: .12em; }
.home-search-field input { width: 100%; border: 0; outline: 0; background: transparent; color: #e8edf1; font-size: 13px; }
.home-search-field input::placeholder { color: #47535d; }
.home-result-count { color: #596671; font-size: 11px; white-space: nowrap; }
.home-project-quota { display:inline-flex; align-items:center; min-height:32px; padding:0 11px; border:1px solid rgba(75,225,247,.28); border-radius:999px; color:#b9f5ff; background:rgba(75,225,247,.07); font-size:12px; font-weight:700; white-space:nowrap; }
.home-project-quota.limit-reached { color:#ffc3a8; border-color:rgba(255,120,75,.34); background:rgba(255,120,75,.08); }
.home-primary-action:disabled { cursor:not-allowed; opacity:.45; transform:none; }
.home-project-toolbar-actions { display: flex; align-items: center; gap: 10px; }
.home-project-sort-field {
  height: 40px; display: flex; align-items: center; gap: 9px; padding: 0 10px 0 13px;
  border: 1px solid rgba(255,255,255,.1); border-radius: 9px; background: #090d12;
}
.home-project-sort-field span { color: #56636d; font-size: 9px; font-weight: 800; letter-spacing: .1em; }
.home-project-sort-field select { border: 0; outline: 0; background: #090d12; color: #a8b4bc; font-size: 11px; cursor: pointer; }
.home-trash-button {
  height: 40px; display: inline-flex; align-items: center; gap: 8px; padding: 0 12px;
  border: 1px solid rgba(255,255,255,.1); border-radius: 9px; background: transparent; color: #8b99a3; font-size: 11px; cursor: pointer;
}
.home-trash-button:hover { border-color: rgba(83,225,246,.3); color: #d8e5e9; }
.home-trash-button span { min-width: 19px; height: 19px; display: grid; place-items: center; border-radius: 999px; background: rgba(255,255,255,.06); color: #5be2f6; font-size: 9px; }
.home-all-project-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.home-directory-project-card {
  min-height: 270px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 17px;
  background: #090d12;
}
.home-directory-project-cover {
  min-height: 180px;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: 1fr auto;
  align-items: end;
  gap: 4px 12px;
  padding: 20px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  background: #0b131a;
}
.home-directory-project-cover span { align-self: start; color: #48606f; font-size: 10px; font-weight: 800; letter-spacing: .16em; }
.home-directory-project-cover strong { grid-row: 1 / 3; align-self: center; color: #294551; font-size: 72px; line-height: 1; letter-spacing: -.08em; }
.home-directory-project-cover small { color: #66747e; font-size: 11px; }
.home-directory-project-copy { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; padding: 18px 20px; }
.home-directory-project-copy h2 { margin: 0 0 6px; font-size: 16px; }
.home-directory-project-copy p { margin: 0; color: #55626c; font-size: 10px; }
.home-project-card-actions { display: grid; grid-template-columns: 1fr auto auto auto auto; gap: 7px; }
.home-directory-project-copy button, .home-library-card button {
  min-height: 38px;
  flex: 0 0 auto;
  padding: 0 15px;
  border: 1px solid rgba(73,221,243,.36);
  border-radius: 9px;
  background: transparent;
  color: #5be2f6;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}
.home-directory-project-copy button:hover, .home-library-card button:hover { background: #4be1f7; color: #071115; }
.home-project-card-actions .home-project-secondary-action { border-color: rgba(255,255,255,.1); color: #84939d; }
.home-project-card-actions .home-project-secondary-action:hover { border-color: rgba(255,255,255,.24); background: rgba(255,255,255,.06); color: #e5eef1; }
.home-project-card-actions .home-project-publish-action { border-color: rgba(84,225,246,.25); color: #80ddec; }
.home-project-card-actions .home-project-publish-action:hover { border-color: #4be1f7; background: rgba(75,225,247,.1); color: #b9f5fd; }
.home-project-card-actions .home-project-publish-action.published { border-color: rgba(178,255,83,.28); color: #b2ff53; }
.home-project-card-actions .home-project-trash-action { border-color: rgba(255,110,121,.18); color: #a66f76; }
.home-project-card-actions .home-project-trash-action:hover { border-color: rgba(255,110,121,.42); background: rgba(255,78,95,.1); color: #ff9ca5; }
.home-library-card-published { border-color: rgba(178,255,83,.2); }
.home-library-card-published > div > span { color: #b2ff53; }
.home-project-action-dialog { width: min(470px, calc(100vw - 32px)); }
.home-project-name-field { display: grid; gap: 8px; }
.home-project-name-field span { color: #6f7f8a; font-size: 10px; font-weight: 800; letter-spacing: .1em; }
.home-project-name-field input {
  width: 100%; height: 46px; border: 1px solid rgba(255,255,255,.13); border-radius: 10px;
  outline: 0; padding: 0 13px; background: #070c11; color: #edf5f8; font-size: 13px;
}
.home-project-name-field input:focus { border-color: rgba(83,225,246,.56); box-shadow: 0 0 0 3px rgba(83,225,246,.08); }
.home-project-dialog-feedback { min-height: 18px; margin: 7px 0 0; color: #ff8792; font-size: 10px; }
.home-trash-modal-card { width: min(760px, calc(100vw - 32px)); }
.home-trash-list { display: grid; gap: 9px; max-height: 52vh; overflow: auto; }
.home-trash-row {
  display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 16px;
  padding: 14px 15px; border: 1px solid rgba(255,255,255,.09); border-radius: 11px; background: #080e14;
}
.home-trash-row h3 { margin: 0 0 5px; color: #dce7eb; font-size: 13px; }
.home-trash-row p { margin: 0; color: #596873; font-size: 10px; }
.home-trash-row-actions { display: flex; gap: 7px; }
.home-trash-row-actions button { min-height: 34px; border: 1px solid rgba(83,225,246,.28); border-radius: 8px; padding: 0 11px; background: transparent; color: #55dff3; font-size: 10px; cursor: pointer; }
.home-trash-row-actions button:hover { background: rgba(83,225,246,.1); }
.home-trash-row-actions .danger { border-color: rgba(255,99,111,.25); color: #d67981; }
.home-trash-row-actions .danger:hover { background: rgba(255,78,95,.1); color: #ff9ba4; }
.home-trash-empty { padding: 56px 20px; border: 1px dashed rgba(255,255,255,.1); border-radius: 13px; color: #5b6872; text-align: center; font-size: 11px; }
.home-project-confirm-card { width: min(430px, calc(100vw - 32px)); text-align: center; padding: 30px; }
.home-project-confirm-mark { width: 48px; height: 48px; display: grid; place-items: center; margin: 0 auto 18px; border: 1px solid rgba(255,105,117,.32); border-radius: 50%; background: rgba(255,77,92,.08); color: #ff8d97; font-size: 20px; font-weight: 800; }
.home-project-confirm-card h2 { margin: 0; font-size: 21px; }
.home-project-confirm-card > p { margin: 12px 0 6px; color: #788791; font-size: 12px; line-height: 1.7; }
.home-project-confirm-card .modal-actions { justify-content: center; }
.home-library-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.home-library-card {
  min-height: 420px;
  overflow: hidden;
  display: grid;
  grid-template-rows: 246px 1fr;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 17px;
  background: #090d12;
}
.home-library-card-wide { grid-column: span 2; }
.home-library-card img { width: 100%; height: 100%; display: block; object-fit: cover; }
.home-library-card > div { display: grid; grid-template-columns: 1fr auto; align-content: start; gap: 6px 20px; padding: 20px; }
.home-library-card > div > span { color: #4bdff5; font-size: 10px; font-weight: 800; letter-spacing: .1em; }
.home-library-card h2 { grid-column: 1; margin: 2px 0 0; font-size: 19px; }
.home-library-card p { grid-column: 1; margin: 0; color: #687680; font-size: 11px; line-height: 1.6; }
.home-library-actions { grid-column: 2; grid-row: 1 / 4; align-self: center; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.home-library-card .home-template-favorite-button { border-color: rgba(255,255,255,.1); color: #71808a; }
.home-library-card .home-template-favorite-button:hover { border-color: rgba(255,109,146,.28); background: rgba(255,79,128,.08); color: #ff91af; }
.home-library-card .home-template-favorite-button.active { border-color: rgba(255,103,145,.34); background: rgba(255,78,127,.1); color: #ff94b2; }
.home-template-favorite-button span { font-size: 14px; line-height: 1; }
.home-library-card .home-library-preview-button { border-color: rgba(255,255,255,.13); color: #9ba9b3; }
.home-library-card .home-library-preview-button:hover { border-color: rgba(255,255,255,.3); background: rgba(255,255,255,.07); color: #eef7fa; }
.home-library-empty {
  min-height: 240px; display: grid; place-content: center; justify-items: center; gap: 9px;
  border: 1px dashed rgba(255,255,255,.1); border-radius: 17px; color: #53616b; text-align: center;
}
.home-library-empty strong { color: #8b99a2; font-size: 16px; }
.home-library-empty span { font-size: 11px; }
.home-template-grid > .home-library-empty { grid-column: 1 / -1; }
.asset-library-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 14px; }
.asset-library-card {
  overflow: hidden; border: 1px solid rgba(255,255,255,.09); border-radius: 16px; background: #090d12;
}
.asset-library-visual { position: relative; aspect-ratio: 4/3; overflow: hidden; background: #101820; }
.asset-library-visual img { width: 100%; height: 100%; display: block; object-fit: cover; }
.asset-library-visual span { position: absolute; top: 12px; left: 12px; padding: 6px 8px; border-radius: 999px; background: rgba(3,8,12,.72); color: #8cebf8; font-size: 9px; backdrop-filter: blur(8px); }
.asset-library-copy { display: grid; gap: 8px; padding: 16px; }
.asset-library-copy h2 { margin: 0; overflow: hidden; color: #e7f0f3; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.asset-library-copy > p { margin: 0; overflow: hidden; color: #586873; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.asset-library-tags { min-height: 22px; display: flex; flex-wrap: wrap; gap: 5px; }
.asset-library-tags span { padding: 4px 7px; border-radius: 999px; background: rgba(83,225,246,.07); color: #669aa4; font-size: 8px; }
.asset-library-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin-top: 4px; }
.asset-library-actions button { min-height: 34px; border: 1px solid rgba(255,255,255,.1); border-radius: 8px; background: transparent; color: #87969f; font-size: 10px; cursor: pointer; }
.asset-library-actions button:hover { border-color: rgba(83,225,246,.3); color: #5ee5f7; }
.asset-library-actions .danger:hover { border-color: rgba(255,102,117,.3); color: #ff929c; }
.asset-library-empty { grid-column: 1 / -1; min-height: 260px; display: grid; place-content: center; gap: 8px; border: 1px dashed rgba(255,255,255,.1); border-radius: 16px; color: #5a6872; text-align: center; }
.asset-library-empty strong { color: #87959e; font-size: 16px; }
.asset-edit-card { width: min(500px, calc(100vw - 32px)); }
.marketplace-toolbar { min-height: 50px; display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 24px; }
.marketplace-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 14px; }
.marketplace-card {
  min-height: 310px; display: grid; grid-template-rows: 158px 1fr; overflow: hidden;
  border: 1px solid rgba(255,255,255,.09); border-radius: 17px; background: #090d12;
}
.marketplace-card-visual { position: relative; display: grid; place-items: center; overflow: hidden; background: radial-gradient(circle at 70% 20%, rgba(83,225,246,.24), transparent 42%), #10181f; }
.marketplace-card-visual::before { content: ''; width: 96px; height: 96px; border: 1px solid rgba(255,255,255,.16); border-radius: 26px; transform: rotate(18deg); box-shadow: 0 0 55px rgba(63,220,245,.16); }
.marketplace-card-visual[data-color="violet"] { background: radial-gradient(circle at 70% 20%, rgba(142,102,255,.3), transparent 44%), #15111f; }
.marketplace-card-visual[data-color="coral"] { background: radial-gradient(circle at 70% 20%, rgba(255,105,118,.28), transparent 44%), #1c1115; }
.marketplace-card-visual[data-color="lime"] { background: radial-gradient(circle at 70% 20%, rgba(173,255,47,.22), transparent 44%), #11180e; }
.marketplace-card-visual[data-color="amber"] { background: radial-gradient(circle at 70% 20%, rgba(255,184,76,.26), transparent 44%), #1b1510; }
.marketplace-card-badge { position: absolute; top: 13px; left: 13px; padding: 6px 8px; border-radius: 999px; background: rgba(3,8,12,.7); color: #d9edf2; font-size: 8px; letter-spacing: .08em; }
.marketplace-card-copy { display: grid; align-content: start; gap: 7px; padding: 17px; }
.marketplace-card-copy > span { color: #50dff5; font-size: 9px; font-weight: 800; letter-spacing: .1em; }
.marketplace-card-copy h2 { margin: 0; color: #e8f0f3; font-size: 16px; }
.marketplace-card-copy p { min-height: 34px; margin: 0; color: #63717b; font-size: 10px; line-height: 1.7; }
.marketplace-card-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin-top: 6px; }
.marketplace-card-actions button { min-height: 36px; border: 1px solid rgba(255,255,255,.11); border-radius: 8px; background: transparent; color: #84939c; font-size: 10px; cursor: pointer; }
.marketplace-card-actions button:hover { border-color: rgba(83,225,246,.32); color: #5de4f7; }
.marketplace-card-actions .installed { border-color: rgba(83,225,246,.32); background: rgba(83,225,246,.08); color: #62e3f5; }
.marketplace-detail-card { width: min(760px, calc(100vw - 32px)); display: grid; grid-template-columns: 270px 1fr; padding: 0; overflow: hidden; }
.marketplace-detail-visual { min-height: 360px; display: grid; place-items: center; background: radial-gradient(circle, rgba(83,225,246,.24), transparent 56%), #111a21; }
.marketplace-detail-visual::before { content: ''; width: 120px; height: 120px; border: 1px solid rgba(255,255,255,.18); border-radius: 32px; transform: rotate(18deg); }
.marketplace-detail-visual span { position: absolute; margin-top: 220px; padding: 7px 10px; border-radius: 999px; background: rgba(3,8,12,.72); color: #8eeaf7; font-size: 9px; }
.marketplace-detail-copy { display: flex; flex-direction: column; padding: 28px; }
.marketplace-detail-copy > p { color: #7b8992; font-size: 12px; line-height: 1.8; }
.marketplace-safety-note { margin-top: 18px; padding: 13px; border: 1px solid rgba(83,225,246,.12); border-radius: 10px; background: rgba(83,225,246,.05); color: #67858d; font-size: 10px; line-height: 1.7; }
.marketplace-detail-copy .modal-actions { margin-top: auto; }
.home-template-preview-dialog { max-width: none; max-height: none; }
.home-template-preview-dialog::backdrop { background: rgba(0,4,8,.82); backdrop-filter: blur(12px); }
.template-preview-card {
  position: relative;
  width: min(1040px, calc(100vw - 36px));
  max-height: min(760px, calc(100vh - 36px));
  overflow: auto;
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(360px, .92fr);
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 22px;
  background: #080d12;
  color: #edf5f8;
  box-shadow: 0 34px 100px rgba(0,0,0,.62);
}
.template-preview-close {
  position: absolute; z-index: 2; top: 16px; right: 16px;
  width: 38px; height: 38px; border: 1px solid rgba(255,255,255,.12); border-radius: 50%;
  background: rgba(5,10,15,.72); color: #dfe9ed; font-size: 22px; cursor: pointer; backdrop-filter: blur(8px);
}
.template-preview-close:hover { border-color: rgba(83,225,246,.46); color: #53e1f6; }
.template-preview-visual { position: relative; min-height: 600px; overflow: hidden; border-radius: 21px 0 0 21px; background: #111b22; }
.template-preview-visual::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(3,7,10,.78)); pointer-events: none; }
.template-preview-visual img { width: 100%; height: 100%; display: block; object-fit: cover; }
.template-preview-badges { position: absolute; z-index: 1; left: 24px; bottom: 22px; display: flex; gap: 8px; }
.template-preview-badges span { padding: 8px 11px; border: 1px solid rgba(255,255,255,.15); border-radius: 999px; background: rgba(5,11,16,.72); color: #dce9ee; font-size: 10px; backdrop-filter: blur(9px); }
.template-preview-copy { display: flex; flex-direction: column; padding: 58px 42px 36px; }
.template-preview-category { margin: 0 0 15px; color: #4fe1f6; font-size: 10px; font-weight: 800; letter-spacing: .16em; }
.template-preview-copy h2 { margin: 0; max-width: 370px; font-size: clamp(32px, 4vw, 52px); line-height: 1.02; letter-spacing: -.045em; }
.template-preview-description { margin: 20px 0 0; color: #87959f; font-size: 13px; line-height: 1.8; }
.template-preview-outcome { display: grid; gap: 7px; margin-top: 28px; padding: 16px 0; border-top: 1px solid rgba(255,255,255,.1); border-bottom: 1px solid rgba(255,255,255,.1); }
.template-preview-outcome span { color: #53626c; font-size: 9px; font-weight: 800; letter-spacing: .14em; }
.template-preview-outcome strong { color: #c8d5da; font-size: 11px; line-height: 1.6; }
.template-preview-steps { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 18px; margin: 24px 0 30px; padding: 0; list-style: none; }
.template-preview-steps li { display: flex; align-items: center; gap: 10px; min-width: 0; }
.template-preview-steps span { color: #31515c; font-size: 9px; font-weight: 800; }
.template-preview-steps strong { color: #9dabb4; font-size: 11px; font-weight: 600; }
.template-preview-actions { display: grid; grid-template-columns: 1fr 1.25fr; gap: 10px; margin-top: auto; }
.template-preview-actions .home-primary-action, .template-preview-actions .home-secondary-action { width: 100%; min-height: 46px; }

@media (max-width: 1100px) {
  .home-header-inner { grid-template-columns: 180px 1fr auto; }
  .home-nav { gap: 20px; }
  .home-hero { min-height: 470px; }
  .home-hero-content { width: 62%; padding-left: 42px; }
  .home-template-grid { grid-template-columns: 1fr 1fr; }
  .home-template-card-featured { grid-column: span 2; }
  .home-template-card-featured > img { height: 330px; }
  .home-all-project-grid, .home-library-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .asset-library-grid, .marketplace-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .image-creation-layout { grid-template-columns: 210px minmax(0, 1fr); }
  .image-creation-workspace { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .home-portal-content { margin-left: 0; padding-bottom: 66px; }
  .portal-rail {
    inset: auto 0 0;
    width: auto;
    height: 66px;
    flex-direction: row;
    align-items: stretch;
    overflow-x: auto;
    overflow-y: hidden;
    border-top: 1px solid rgba(255,255,255,.11);
    border-right: 0;
  }
  .portal-rail-avatar-button { width: 62px; min-height: 66px; border-right: 1px solid rgba(255,255,255,.07); border-bottom: 0; }
  .portal-rail-avatar { width: 34px; height: 34px; }
  .portal-rail-nav { width: max-content; display: flex; gap: 2px; padding: 4px 6px; }
  .portal-rail-item { width: 58px; min-height: 58px; flex: 0 0 58px; }
  .portal-feature-panel { top: auto; right: 12px; bottom: 78px; left: 12px; width: auto; max-height: min(68vh, 570px); }
  .portal-feature-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .model-config-hero { align-items: stretch; }
  .model-config-security { max-width: none; }
  .model-config-toolbar { align-items: stretch; flex-direction: column; }
  .model-config-filters { width: 100%; min-width: 0; max-width: 100%; overflow-x: auto; }
  .model-config-filters button { flex: 0 0 auto; }
  .model-config-add-button { width: 100%; }
  .model-config-grid { grid-template-columns: 1fr; }
  .model-config-form { grid-template-columns: 1fr; }
  .model-config-field.wide, .model-config-form-footer { grid-column: 1; }
  .model-config-form-footer { align-items: stretch; flex-direction: column; }
  .model-config-actions { width: 100%; flex-wrap: wrap; justify-content: flex-end; }
  .model-config-actions button[type="submit"] { flex: 1 1 110px; }
  .image-creation-layout { grid-template-columns: 1fr; }
  .image-creation-model-panel { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .image-creation-panel-heading, .image-creation-model-note { grid-column: 1 / -1; }
  .image-creation-model { min-height: 88px; grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .image-creation-model > span:nth-child(2) { justify-items: center; }
  .image-creation-model i { display: none; }
  .image-creation-workspace { grid-template-columns: 1fr; }
  .role-profile-hero { align-items: stretch; }
  .role-profile-manager > header { align-items: stretch; flex-direction: column; }
  .role-profile-manager > header > div:last-child { justify-content: space-between; }
  .role-profile-summary { width: 100%; }
  .role-photo-groups { grid-template-columns: 1fr; }
  .image-creation-options { grid-template-columns: 1fr; }
  .image-creation-form > footer { grid-template-columns: 1fr; }
  .image-creation-form > footer button { width: 100%; }
  .image-creation-results { min-height: 360px; grid-template-columns: 1fr; }
  .home-header { height: 104px; }
  .home-header-inner, .home-main, .home-footer { width: min(100% - 28px, 680px); }
  .home-header-inner { grid-template-columns: 1fr auto; grid-template-rows: 60px 44px; gap: 0 14px; }
  .home-nav { grid-column: 1 / -1; grid-row: 2; height: 44px; justify-content: flex-start; gap: 26px; overflow-x: auto; scrollbar-width: none; }
  .home-nav::-webkit-scrollbar { display: none; }
  .home-nav-item { flex: 0 0 auto; }
  .home-header-cta, #home-user-display-name { display: none; }
  .home-user-button { width: 38px; padding: 4px; border-radius: 9px; }
  .home-main { padding-top: 14px; padding-bottom: 56px; }
  .home-hero { min-height: 620px; border-radius: 17px; }
  .home-hero > img { height: 52%; top: auto; object-position: 63% center; }
  .home-hero-content { width: auto; padding: 42px 24px 300px; }
  .home-hero h1 { font-size: clamp(38px, 12vw, 54px); }
  .home-hero-meta { gap: 18px; margin-top: 32px; }
  .home-section { padding-top: 62px; }
  .home-section-heading { align-items: flex-start; }
  .home-section-heading h2 { font-size: 29px; }
  .home-project-list, .home-template-grid, .home-capability-grid { grid-template-columns: 1fr; }
  .home-template-card-featured { grid-column: auto; }
  .home-template-card, .home-template-card-featured { min-height: 0; }
  .home-template-card > img, .home-template-card-featured > img { height: auto; aspect-ratio: 16/10; }
  .home-template-filters { width: 100%; flex-wrap: wrap; overflow: visible; padding-bottom: 4px; }
  .home-template-filters button { flex: 0 0 auto; }
  #home-templates .home-section-heading { display: grid; }
  .home-capability-grid { border-top: 0; }
  .home-capability-grid article, .home-capability-grid article + article { padding: 26px 0; border-top: 1px solid rgba(255,255,255,.09); border-right: 0; }
  .home-footer { min-height: 108px; }
  .home-directory-hero { min-height: 0; display: grid; padding: 42px 0 34px; }
  .home-directory-hero h1 { font-size: 48px; }
  .home-directory-hero .home-primary-action, .home-directory-hero .home-secondary-action { width: max-content; }
  .home-directory-toolbar, .home-library-toolbar { align-items: flex-start; display: grid; }
  .home-template-search-field { width: 100%; }
  .home-library-toolbar-meta { display: grid; justify-content: stretch; gap: 10px; }
  .home-library-toolbar-meta .home-result-count { padding-left: 2px; }
  .home-project-toolbar-actions { flex-wrap: wrap; }
  .home-project-card-actions { grid-template-columns: 1fr 1fr; }
  .home-project-card-actions button { width: 100%; }
  .home-trash-row { grid-template-columns: 1fr; }
  .home-trash-row-actions { justify-content: flex-start; }
  .home-all-project-grid, .home-library-grid { grid-template-columns: 1fr; }
  .asset-library-grid, .marketplace-grid { grid-template-columns: 1fr; }
  .marketplace-toolbar { align-items: flex-start; display: grid; }
  .marketplace-detail-card { grid-template-columns: 1fr; max-height: calc(100vh - 24px); overflow: auto; }
  .marketplace-detail-visual { min-height: 230px; }
  .home-library-card-wide { grid-column: auto; }
  .home-library-card { min-height: 0; grid-template-rows: auto 1fr; }
  .home-library-card img { aspect-ratio: 16/10; }
  .home-library-card > div { grid-template-columns: 1fr; }
  .home-library-actions { grid-column: 1; grid-row: auto; justify-content: flex-start; margin-top: 10px; }
  .template-preview-card { grid-template-columns: 1fr; max-height: calc(100vh - 24px); }
  .template-preview-visual { min-height: 290px; max-height: 42vh; border-radius: 21px 21px 0 0; }
  .template-preview-copy { padding: 30px 24px 24px; }
  .template-preview-copy h2 { font-size: 36px; }
}

@media (max-width: 430px) {
  .home-hero-content { padding: 36px 20px 292px; }
  .home-hero h1 { font-size: 40px; line-height: 1.08; }
  .home-hero-content > p:not(.home-eyebrow) { font-size: 13px; }
  .home-primary-action, .home-secondary-action { width: 100%; }
  .home-hero-meta { display: none; }
  .home-section-heading { display: grid; }
  .home-text-action { width: max-content; }
  .template-preview-steps { grid-template-columns: 1fr; }
  .template-preview-actions { grid-template-columns: 1fr; }
  .account-password-grid { grid-template-columns: 1fr; }
  .account-settings-section { grid-template-columns: 1fr; }
  .account-settings-section > .button { justify-self: stretch; }
  .account-membership-card, .account-data-security { grid-template-columns: 1fr; }
  .account-data-security .account-settings-heading { grid-column: 1; }
  .account-session-section .account-settings-heading { grid-template-columns: 1fr; }
  .account-session-section .account-settings-heading > button { width: 100%; }
  .role-profile-fields { grid-template-columns: 1fr; padding: 18px; }
  .role-profile-field.wide { grid-column: 1; }
  .role-profile-form > header, .role-photo-section > header { display: grid; }
  .role-profile-form > header > small, .role-photo-section > header > small { white-space: normal; }
  .role-profile-form > footer { align-items: stretch; flex-direction: column; }
  .role-profile-form > footer button { width: 100%; }
  .role-photo-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
}

@media (prefers-reduced-motion: reduce) {
  .home-page { scroll-behavior: auto; }
  .home-page *, .home-page *::before, .home-page *::after {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
  }
}

@media (max-width: 1100px) {
  .video-editor-workspace { grid-template-columns: 184px minmax(0,1fr); }
}

@media (max-width: 760px) {
  .video-editor-page { width: min(100% - 28px, 680px); }
  .video-editor-heading { align-items: stretch; flex-direction: column; padding: 24px 0; }
  .video-editor-heading-actions button { flex: 1; }
  .video-editor-workspace { height: calc(100vh - 280px); min-height: 560px; grid-template-columns: 1fr; grid-template-rows: 120px minmax(0,1fr); }
  .video-editor-sidebar { grid-template-rows: 38px minmax(0,1fr); border-right: 0; border-bottom: 1px solid rgba(255,255,255,.08); }
  .video-editor-project-list { display: flex; overflow-x: auto; overflow-y: hidden; padding: 6px; }
  .video-editor-project { min-width: 190px; margin: 0 5px 0 0; }
  .video-editor-toolbar { align-items: stretch; height: auto; padding: 7px 9px; flex-direction: column; }
  .video-editor-toolbar > div:last-child { overflow-x: auto; }
}


/* ===== V4.0.8 compact node chrome + readable narrow scrollbars ===== */
.canvas-node .node-header {
  height: 24px !important;
  min-height: 24px !important;
  gap: 4px !important;
  padding: 0 7px !important;
}
.canvas-node .node-badge {
  width: 13px !important;
  height: 13px !important;
  min-width: 13px !important;
  border-radius: 4px !important;
  font-size: 7px !important;
  line-height: 1 !important;
}
.canvas-node .node-title {
  font-size: 8px !important;
  line-height: 1.1 !important;
  letter-spacing: .01em !important;
}
.canvas-node .node-execution-order {
  min-width: 28px;
  height: 14px;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  border: 1px solid rgba(42, 211, 244, .34);
  border-radius: 999px;
  background: rgba(21, 87, 104, .34);
  color: #9feeff;
  font-size: 7px;
  font-weight: 800;
  line-height: 1;
}
.canvas-node .node-execution-order.cyclic {
  border-color: rgba(255, 103, 119, .5);
  background: rgba(99, 28, 40, .38);
  color: #ff9ca7;
}
.canvas-node .node-status {
  width: 5px !important;
  height: 5px !important;
}
.canvas-node .node-status.running {
  box-shadow: 0 0 0 3px rgba(70,120,238,.12) !important;
}

/* ===== V4.0.14 request feedback: ready blue, running white, success blue ===== */
.canvas-node.idle {
  border-color: rgba(0, 198, 255, .70) !important;
}
.canvas-node.running {
  border-color: rgba(244, 250, 255, .96) !important;
  box-shadow: 0 0 0 2px rgba(244,250,255,.16), 0 0 30px rgba(244,250,255,.16), 0 16px 28px rgba(0,0,0,.32) !important;
}
.canvas-node.success {
  border-color: rgba(0, 198, 255, .90) !important;
  box-shadow: 0 0 0 2px rgba(0,198,255,.14), 0 0 28px rgba(0,198,255,.18), 0 16px 28px rgba(0,0,0,.32) !important;
}
.canvas-node .node-status.idle,
.canvas-node .node-status.success {
  background: #16c9ff !important;
  box-shadow: 0 0 8px rgba(22,201,255,.68) !important;
}
.canvas-node .node-status.running {
  background: #f4faff !important;
  box-shadow: 0 0 0 4px rgba(244,250,255,.18), 0 0 10px rgba(244,250,255,.82) !important;
}
.canvas-node .node-menu-btn {
  width: 15px !important;
  height: 15px !important;
  min-width: 15px !important;
  padding: 0 !important;
  border-radius: 4px !important;
  font-size: 8px !important;
  line-height: 1 !important;
}
.canvas-node .node-reset-btn {
  width: 15px !important;
  height: 15px !important;
  min-width: 15px !important;
  padding: 0 !important;
  border-radius: 4px !important;
  color: #8ea3b9;
  font-size: 10px !important;
  line-height: 1 !important;
}
.canvas-node .node-reset-btn:hover:not(:disabled) { background: rgba(255,255,255,.06); color: #ffd38a; }
.canvas-node .node-body {
  padding: 8px !important;
}

/* Text node keeps its neon identity, but spends much less height on chrome. */
.canvas-node.prompt-node .node-header {
  height: 26px !important;
  min-height: 26px !important;
  padding: 0 10px !important;
  align-items: center !important;
}
.canvas-node.prompt-node .node-badge {
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  font-size: 16px !important;
  border-radius: 0 !important;
}
.canvas-node.prompt-node .node-title {
  font-size: 9px !important;
  line-height: 1 !important;
}
.canvas-node.prompt-node .node-body {
  padding: 0 10px 8px !important;
  min-height: 150px !important;
}
.canvas-node.prompt-node .node-textarea {
  min-height: 145px !important;
  font-size: 12px !important;
  line-height: 1.65 !important;
  scrollbar-width: thin !important;
  scrollbar-color: rgba(156, 177, 199, .56) transparent !important;
}
.canvas-node.prompt-node .node-textarea::-webkit-scrollbar,
.canvas-node textarea::-webkit-scrollbar {
  width: 6px !important;
  height: 6px !important;
}
.canvas-node.prompt-node .node-textarea::-webkit-scrollbar-track,
.canvas-node textarea::-webkit-scrollbar-track {
  background: transparent !important;
}
.canvas-node.prompt-node .node-textarea::-webkit-scrollbar-thumb,
.canvas-node textarea::-webkit-scrollbar-thumb {
  background: rgba(156, 177, 199, .50) !important;
  border-radius: 999px !important;
  border: 1px solid transparent !important;
  background-clip: padding-box !important;
}

/* Make streaming visually unmistakable even when the upstream network batches chunks. */
.canvas-node.prompt-node.streaming-text .node-textarea {
  caret-color: #29f0c2 !important;
}
.canvas-node.prompt-node.streaming-text::after {
  content: '生成中';
  position: absolute;
  right: 34px;
  top: 7px;
  color: #7fead5;
  font-size: 7px;
  letter-spacing: .08em;
  pointer-events: none;
  opacity: .82;
  animation: gqai-stream-pulse .9s ease-in-out infinite alternate;
}
@keyframes gqai-stream-pulse {
  from { opacity: .35; }
  to { opacity: 1; }
}


/* ===== V4.0.11 text-node content fills the available card area ===== */
.canvas-node.prompt-node {
  display: flex !important;
  flex-direction: column !important;
}
.canvas-node.prompt-node .node-header {
  flex: 0 0 22px !important;
  height: 22px !important;
  min-height: 22px !important;
  padding: 0 8px !important;
}
.canvas-node.prompt-node .node-body {
  display: flex !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  height: auto !important;
  padding: 0 8px 8px !important;
  overflow: hidden !important;
}
.canvas-node.prompt-node .node-textarea {
  flex: 1 1 auto !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  max-height: none !important;
  padding: 2px 2px 2px 0 !important;
  box-sizing: border-box !important;
}
.canvas-node.prompt-node .text-translation-bar {
  flex: 0 0 30px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding-top: 5px;
  border-top: 1px solid rgba(80, 112, 141, .16);
}
.canvas-node.prompt-node .text-translation-bar input,
.canvas-node.prompt-node .text-translation-bar button {
  height: 25px;
  border: 1px solid rgba(80, 112, 141, .28);
  border-radius: 7px;
  background: rgba(8, 18, 30, .9);
  color: #9eb2c6;
  font-size: 9px;
}
.canvas-node.prompt-node .text-translation-bar input { flex: 1 1 auto; min-width: 0; padding: 0 7px; outline: none; }
.canvas-node.prompt-node .text-translation-bar input:focus { border-color: rgba(42, 224, 192, .55); }
.canvas-node.prompt-node .text-translation-bar button { flex: 0 0 auto; padding: 0 10px; border-color: rgba(42, 224, 192, .4); color: #59f0c9; cursor: pointer; }
.canvas-node.prompt-node .text-translation-bar button:hover:not(:disabled) { background: rgba(24, 108, 92, .25); }
.canvas-node.prompt-node .text-translation-bar button:disabled { opacity: .55; cursor: wait; }
.canvas-node.prompt-node .text-node-header-guide {
  flex: 0 0 auto;
  height: 18px;
  padding: 0 6px;
  border: 1px solid rgba(42, 224, 192, .32);
  border-radius: 6px;
  background: rgba(12, 39, 48, .78);
  color: #70e8ca;
  font-size: 8px;
  line-height: 16px;
  cursor: pointer;
}
.canvas-node.prompt-node .text-node-header-guide:hover { background: rgba(24, 108, 92, .3); }
.text-node-guide-card { width: min(680px, calc(100vw - 36px)); }
.text-node-guide-content { display: grid; gap: 15px; padding: 4px 2px 8px; }
.text-node-guide-content > p { margin: 0; color: #8fa3b6; font-size: 12px; line-height: 1.65; }
.text-node-guide-flow { padding: 11px 13px; border: 1px solid rgba(42, 224, 192, .2); border-radius: 10px; background: rgba(19, 74, 65, .13); color: #62e9c7; font-size: 12px; text-align: center; }
.text-node-guide-table { width: 100%; border-collapse: collapse; color: #cbd9e6; font-size: 11px; }
.text-node-guide-table th, .text-node-guide-table td { padding: 9px 10px; border-bottom: 1px solid rgba(101, 128, 153, .15); text-align: left; vertical-align: top; }
.text-node-guide-table th { color: #879cb0; font-weight: 650; }
.text-node-guide-table code { color: #ffd85b; }
.text-node-guide-example { margin: 0; padding: 12px; overflow: auto; border: 1px solid rgba(101, 128, 153, .16); border-radius: 10px; background: #07111d; color: #d9e6f2; font: 11px/1.65 Consolas, monospace; white-space: pre-wrap; }
.text-node-guide-note { color: #ffcf66 !important; }

/* ===== V4.4.0 automatic publishing configuration ===== */
.auto-publish-page { padding-bottom: 76px; }
.auto-publish-hero { align-items: end; }
.auto-publish-status { min-width: 220px; display: grid; gap: 6px; padding: 17px 19px; border: 1px solid rgba(84,226,244,.18); border-radius: 14px; background: rgba(8,18,24,.72); }
.auto-publish-status span { color: #5e707b; font-size: 10px; text-transform: uppercase; letter-spacing: .12em; }
.auto-publish-status strong { color: #eef8fa; font-size: 16px; }
.auto-publish-status strong.enabled { color: #64e9c3; }
.auto-publish-status small { color: #60717b; font-size: 10px; }
.auto-publish-status button { margin-top: 5px; height: 32px; border: 1px solid rgba(67,223,242,.34); border-radius: 8px; background: rgba(22,72,80,.28); color: #6feafa; font-size: 10px; cursor: pointer; }
.auto-publish-status button:disabled { opacity: .55; cursor: wait; }
.auto-publish-content { width: 100%; }
.auto-publish-form { display: grid; gap: 16px; }
.auto-publish-card { overflow: hidden; border: 1px solid rgba(255,255,255,.09); border-radius: 16px; background: linear-gradient(145deg, rgba(13,21,27,.96), rgba(7,12,16,.98)); }
.auto-publish-card > header { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 18px 20px; border-bottom: 1px solid rgba(255,255,255,.07); }
.auto-publish-card > header > div { display: grid; grid-template-columns: 30px auto; align-items: center; column-gap: 10px; }
.auto-publish-card > header > div > span { grid-row: 1 / 3; color: #43dff2; font-size: 11px; font-weight: 800; }
.auto-publish-card > header h2 { margin: 0; color: #edf4f6; font-size: 15px; }
.auto-publish-card > header p { margin: 4px 0 0; color: #65747d; font-size: 10px; }
.auto-publish-card > header > small { color: #63727b; font-size: 10px; }
.auto-publish-switch { display: flex; align-items: center; gap: 9px; color: #85959e; font-size: 11px; cursor: pointer; }
.auto-publish-switch input { position: absolute; opacity: 0; pointer-events: none; }
.auto-publish-switch i { position: relative; width: 38px; height: 21px; border-radius: 999px; background: #263139; transition: .2s; }
.auto-publish-switch i::after { content: ''; position: absolute; top: 3px; left: 3px; width: 15px; height: 15px; border-radius: 50%; background: #84929a; transition: .2s; }
.auto-publish-switch input:checked + i { background: rgba(45,224,192,.24); box-shadow: inset 0 0 0 1px rgba(73,236,205,.35); }
.auto-publish-switch input:checked + i::after { left: 20px; background: #52e8c7; box-shadow: 0 0 8px rgba(82,232,199,.45); }
.auto-publish-fields { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; padding: 20px; }
.auto-publish-fields > label { min-width: 0; display: grid; gap: 7px; }
.auto-publish-fields > label.wide { grid-column: 1 / -1; }
.auto-publish-fields label > span { color: #7d8c94; font-size: 10px; font-weight: 650; }
.auto-publish-fields input:not([type='checkbox']), .auto-publish-fields select,
.auto-publish-platform-row input[type='text'], .auto-publish-platform-row input[type='password'] { width: 100%; height: 39px; padding: 0 11px; border: 1px solid rgba(255,255,255,.1); border-radius: 9px; outline: none; background: #080e13; color: #dce8eb; font: inherit; }
.auto-publish-fields input:focus, .auto-publish-fields select:focus, .auto-publish-platform-row input:focus { border-color: rgba(67,223,242,.5); box-shadow: 0 0 0 3px rgba(67,223,242,.06); }
.auto-publish-fields small { color: #4f5e67; font-size: 9px; }
.auto-publish-check { display: flex !important; grid-template-columns: auto 1fr; align-items: center; justify-content: start; }
.auto-publish-check input { accent-color: #4ce2c4; }
.auto-publish-platforms { display: grid; gap: 10px; padding: 16px 20px 20px; }
.auto-publish-platform-row { display: grid; grid-template-columns: 180px minmax(180px,1fr) auto; align-items: end; gap: 12px; padding: 14px; border: 1px solid rgba(255,255,255,.07); border-radius: 12px; background: rgba(4,9,13,.56); }
.auto-publish-platform-main { display: flex; align-items: center; gap: 10px; min-height: 39px; }
.auto-publish-platform-main input { accent-color: #4ce2c4; }
.auto-publish-platform-main strong { display: block; color: #dce8eb; font-size: 12px; }
.auto-publish-platform-main small { display: block; margin-top: 3px; color: #56656e; font-size: 9px; }
.auto-publish-platform-field { min-width: 0; display: grid; gap: 6px; }
.auto-publish-platform-field > span { color: #718089; font-size: 9px; }
.auto-publish-credential { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 7px; }
.auto-publish-credential button { min-width: 58px; border: 1px solid rgba(255,255,255,.1); border-radius: 8px; background: #111a20; color: #81919a; cursor: pointer; }
.auto-publish-account-actions { display: flex; align-items: center; gap: 7px; }
.auto-publish-account-actions button, .auto-publish-task-card > header button, .auto-publish-task-item button { height: 39px; padding: 0 13px; border: 1px solid rgba(67,223,242,.2); border-radius: 8px; background: #101a20; color: #8edce5; font-size: 10px; cursor: pointer; }
.auto-publish-account-actions button:first-child { border-color: rgba(76,226,196,.3); color: #68e8ca; }
.auto-publish-operation-grid { display: grid; grid-template-columns: minmax(0,1.1fr) minmax(340px,.9fr); gap: 16px; margin-top: 18px; align-items: start; }
.auto-publish-task-fields { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 13px; padding: 18px 20px; }
.auto-publish-task-fields label { min-width: 0; display: grid; gap: 7px; color: #7d8c94; font-size: 10px; }
.auto-publish-task-fields label.wide { grid-column: 1 / -1; }
.auto-publish-task-fields input, .auto-publish-task-fields select, .auto-publish-task-fields textarea { width: 100%; border: 1px solid rgba(255,255,255,.1); border-radius: 9px; outline: none; background: #080e13; color: #dce8eb; font: inherit; }
.auto-publish-task-fields input, .auto-publish-task-fields select { height: 39px; padding: 0 11px; }
.auto-publish-task-fields textarea { padding: 10px 11px; resize: vertical; }
.auto-publish-task-fields input:focus, .auto-publish-task-fields select:focus, .auto-publish-task-fields textarea:focus { border-color: rgba(67,223,242,.5); box-shadow: 0 0 0 3px rgba(67,223,242,.06); }
.auto-publish-file { padding: 13px; border: 1px dashed rgba(67,223,242,.24); border-radius: 10px; background: rgba(8,28,34,.24); }
.auto-publish-file input { height: auto; padding: 0; border: 0; background: transparent; }
.auto-publish-file small { color: #5f7079; }
.auto-publish-create-card > .home-primary-action { margin: 0 20px 18px auto; }
.auto-publish-inline-feedback { min-height: 15px; margin: 0 20px 8px; color: #64dfc2; font-size: 10px; }
.auto-publish-task-list { max-height: 620px; display: grid; gap: 9px; padding: 13px; overflow-y: auto; }
.auto-publish-task-item { display: grid; gap: 8px; padding: 12px; border: 1px solid rgba(255,255,255,.07); border-radius: 10px; background: #091116; }
.auto-publish-task-item > header, .auto-publish-task-item > footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.auto-publish-task-item > header div { display: grid; gap: 3px; }
.auto-publish-task-item strong { color: #dce8eb; font-size: 11px; }
.auto-publish-task-item small, .auto-publish-task-item p, .auto-publish-task-item time { margin: 0; color: #617079; font-size: 9px; }
.auto-publish-task-item > header > span { color: #e2bf68; font-size: 9px; }
.auto-publish-task-item.success > header > span { color: #62e7c1; }
.auto-publish-task-item.failed > header > span { color: #f08585; }
.auto-publish-task-item details { color: #c57d7d; font-size: 9px; }
.auto-publish-task-item pre { max-height: 120px; overflow: auto; white-space: pre-wrap; word-break: break-word; color: #9b7272; }
.auto-publish-task-item button { height: 28px; }
.auto-publish-task-empty { margin: 8px; color: #63727b; font-size: 10px; }
.auto-publish-qrcode { display: flex; align-items: center; gap: 10px; color: #6be5cc; font-size: 10px; text-decoration: none; }
.auto-publish-qrcode img { width: 74px; height: 74px; padding: 4px; border-radius: 8px; background: #fff; object-fit: contain; }
.auto-publish-footer { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 3px 2px 0; }
.auto-publish-footer > div { display: grid; gap: 4px; }
.auto-publish-footer strong { color: #75858e; font-size: 11px; }
.auto-publish-footer span { min-height: 14px; color: #57d9bc; font-size: 10px; }
@media (max-width: 900px) {
  .auto-publish-hero { align-items: stretch; }
  .auto-publish-status { min-width: 0; }
  .auto-publish-platform-row { grid-template-columns: 1fr; align-items: stretch; }
  .auto-publish-operation-grid { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .auto-publish-card > header, .auto-publish-footer { align-items: stretch; flex-direction: column; }
  .auto-publish-fields { grid-template-columns: 1fr; }
  .auto-publish-fields > label.wide { grid-column: auto; }
  .auto-publish-task-fields { grid-template-columns: 1fr; }
  .auto-publish-task-fields label.wide { grid-column: auto; }
}

/* ===== V4.5.0 MiniMax voice cloning ===== */
.voice-clone-page { padding-bottom: 76px; }
.voice-clone-hero { align-items: end; }
.voice-clone-status { min-width: 220px; display: grid; gap: 6px; padding: 17px 19px; border: 1px solid rgba(84,226,244,.18); border-radius: 14px; background: rgba(8,18,24,.72); }
.voice-clone-status span, .voice-clone-status small { color: #64747d; font-size: 10px; }
.voice-clone-status strong { color: #eef8fa; font-size: 15px; }
.voice-clone-status strong.ready { color: #5fe8c2; }
.voice-clone-content { width: 100%; display: grid; gap: 16px; }
.voice-clone-form { display: grid; gap: 16px; }
.voice-clone-card { overflow: hidden; border: 1px solid rgba(255,255,255,.09); border-radius: 16px; background: linear-gradient(145deg, rgba(13,21,27,.96), rgba(7,12,16,.98)); }
.voice-clone-card > header { display: flex; align-items: center; gap: 18px; padding: 18px 20px; border-bottom: 1px solid rgba(255,255,255,.07); }
.voice-clone-card > header > div { display: grid; grid-template-columns: 30px auto; align-items: center; column-gap: 10px; }
.voice-clone-card > header > div > span { grid-row: 1 / 3; color: #43dff2; font-size: 11px; font-weight: 800; }
.voice-clone-card > header h2 { margin: 0; color: #edf4f6; font-size: 15px; }
.voice-clone-card > header p { margin: 4px 0 0; color: #65747d; font-size: 10px; }
.voice-clone-fields { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; padding: 20px; }
.voice-clone-fields > label { min-width: 0; display: grid; gap: 7px; }
.voice-clone-fields > label.wide { grid-column: 1 / -1; }
.voice-clone-fields label > span { color: #7d8c94; font-size: 10px; font-weight: 650; }
.voice-clone-fields input:not([type='file']):not([type='checkbox']), .voice-clone-fields select, .voice-clone-fields textarea, .voice-clone-key-row input { width: 100%; border: 1px solid rgba(255,255,255,.1); border-radius: 9px; outline: none; background: #080e13; color: #dce8eb; font: inherit; }
.voice-clone-fields input:not([type='file']):not([type='checkbox']), .voice-clone-fields select, .voice-clone-key-row input { height: 39px; padding: 0 11px; }
.voice-clone-fields textarea { min-height: 74px; padding: 10px 11px; resize: vertical; }
.voice-clone-fields input:focus, .voice-clone-fields select:focus, .voice-clone-fields textarea:focus, .voice-clone-key-row input:focus { border-color: rgba(67,223,242,.5); box-shadow: 0 0 0 3px rgba(67,223,242,.06); }
.voice-clone-fields small, .voice-clone-footer small { color: #4f5e67; font-size: 9px; line-height: 1.5; }
.voice-clone-upload { padding: 15px; border: 1px dashed rgba(67,223,242,.28); border-radius: 11px; background: rgba(8,28,34,.28); cursor: pointer; }
.voice-clone-upload input[type='file'] { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.voice-clone-upload strong { color: #dce8eb; font-size: 12px; }
.voice-clone-upload small { color: #60717a; }
.voice-clone-check { display: flex !important; align-items: center; gap: 8px; }
.voice-clone-check input { accent-color: #4ce2c4; }
.voice-clone-key-card { padding-bottom: 20px; }
.voice-clone-key-row { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 8px; padding: 16px 20px 0; }
.voice-clone-key-row button { min-width: 92px; border: 1px solid rgba(67,223,242,.3); border-radius: 9px; background: rgba(11,38,47,.76); color: #62e7f7; cursor: pointer; }
.voice-clone-footer { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 3px 2px 0; }
.voice-clone-footer > div { display: grid; gap: 4px; }
.voice-clone-footer strong { min-height: 15px; color: #62e7c1; font-size: 11px; }
.voice-clone-records { overflow: hidden; border: 1px solid rgba(255,255,255,.08); border-radius: 14px; background: rgba(8,14,19,.75); }
.voice-clone-records > header { padding: 15px 18px; border-bottom: 1px solid rgba(255,255,255,.07); }
.voice-clone-records > header div { display: grid; gap: 3px; }
.voice-clone-records > header strong { color: #e6f0f2; font-size: 13px; }
.voice-clone-records > header span { color: #5f7079; font-size: 9px; }
#voice-clone-record-list { display: grid; gap: 8px; padding: 12px 14px 14px; }
.voice-clone-record { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 11px 12px; border: 1px solid rgba(255,255,255,.06); border-radius: 10px; background: #0b1319; }
.voice-clone-record > div { display: grid; gap: 4px; }
.voice-clone-record strong { color: #dce8eb; font-size: 11px; }
.voice-clone-record span, .voice-clone-record small { color: #667780; font-size: 9px; }
.voice-clone-record audio { width: 210px; height: 28px; }
.voice-clone-record-empty { margin: 0; color: #5c6b74; font-size: 10px; }
@media (max-width: 760px) { .voice-clone-hero { align-items: stretch; } .voice-clone-status { min-width: 0; } .voice-clone-footer { align-items: stretch; flex-direction: column; } }
@media (max-width: 620px) { .voice-clone-fields { grid-template-columns: 1fr; } .voice-clone-fields > label.wide { grid-column: auto; } .voice-clone-key-row { grid-template-columns: 1fr; } .voice-clone-record { align-items: stretch; flex-direction: column; } .voice-clone-record audio { width: 100%; } }

/* ===== V4.6.0 MiniMax dubbing studio ===== */
.dubbing-page { padding-bottom: 76px; }
.dubbing-hero { align-items: end; }
.dubbing-status { min-width: 228px; display: grid; gap: 6px; padding: 17px 19px; border: 1px solid rgba(87,232,202,.2); border-radius: 14px; background: linear-gradient(145deg,rgba(8,25,25,.9),rgba(7,14,18,.94)); }
.dubbing-status span,.dubbing-status small { color: #61757a; font-size: 10px; }
.dubbing-status strong { color: #67ebc4; font-size: 15px; }
.dubbing-content { width: 100%; display: grid; gap: 16px; }
.dubbing-workspace { display: grid; grid-template-columns: minmax(0,1fr) minmax(520px,1.08fr); gap: 16px; align-items: start; }
.dubbing-script-panel,.dubbing-voice-panel,.dubbing-results { overflow: hidden; border: 1px solid rgba(255,255,255,.09); border-radius: 16px; background: linear-gradient(145deg,rgba(13,21,27,.97),rgba(6,11,15,.98)); }
.dubbing-script-panel > header,.dubbing-voice-panel > header,.dubbing-results > header { min-height: 68px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 18px; border-bottom: 1px solid rgba(255,255,255,.07); }
.dubbing-script-panel > header > div,.dubbing-voice-panel > header > div { display: flex; align-items: center; gap: 10px; }
.dubbing-script-panel > header span,.dubbing-voice-panel > header span { color: #43dff2; font-size: 10px; font-weight: 800; }
.dubbing-script-panel h2,.dubbing-voice-panel h2 { margin: 0; color: #edf5f6; font-size: 15px; }
.dubbing-script-panel > header small,.dubbing-voice-panel > header small { color: #617079; font-size: 9px; }
.dubbing-script-panel > textarea { width: calc(100% - 36px); min-height: 260px; margin: 18px; padding: 16px; border: 1px solid rgba(255,255,255,.09); border-radius: 12px; outline: none; resize: vertical; background: #070d11; color: #dce8eb; font: 13px/1.8 inherit; }
.dubbing-script-panel > textarea:focus { border-color: rgba(67,223,242,.48); box-shadow: 0 0 0 3px rgba(67,223,242,.05); }
.dubbing-controls { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 11px; padding: 0 18px 18px; }
.dubbing-controls label { min-width: 0; display: grid; grid-template-columns: 1fr auto; gap: 7px; align-items: center; padding: 11px; border: 1px solid rgba(255,255,255,.06); border-radius: 10px; background: rgba(255,255,255,.018); }
.dubbing-controls label > span { color: #76878e; font-size: 9px; }
.dubbing-controls input[type='range'] { grid-column: 1 / -1; width: 100%; accent-color: #4ce2c4; }
.dubbing-controls output { color: #dce8eb; font-size: 10px; }
.dubbing-controls select { grid-column: 1 / -1; height: 32px; padding: 0 8px; border: 1px solid rgba(255,255,255,.08); border-radius: 7px; outline: none; background: #080e13; color: #dce8eb; font: inherit; }
.dubbing-script-panel > footer { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 17px 18px; border-top: 1px solid rgba(255,255,255,.07); background: rgba(0,0,0,.14); }
.dubbing-script-panel > footer > div { display: grid; grid-template-columns: auto auto; gap: 4px 8px; align-items: center; }
.dubbing-script-panel > footer span { color: #65757d; font-size: 9px; }
.dubbing-script-panel > footer strong { color: #62e7c1; font-size: 12px; }
#dubbing-feedback { grid-column: 1 / -1; min-height: 13px; color: #788a91; font-size: 9px; }
.dubbing-library-tabs { display: flex; gap: 22px; padding: 13px 16px 0; border-bottom: 1px solid rgba(255,255,255,.06); }
.dubbing-library-tabs button { position: relative; height: 34px; padding: 0; border: 0; background: transparent; color: #74838a; font: 600 10px/1 inherit; cursor: pointer; }
.dubbing-library-tabs button.active { color: #e8f2f4; }
.dubbing-library-tabs button.active::after { position: absolute; right: 0; bottom: -1px; left: 0; height: 2px; border-radius: 2px; background: #4ce2c4; content: ''; }
.dubbing-voice-toolbar { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 8px; padding: 13px 15px 9px; }
.dubbing-voice-search { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 8px; min-width: 0; padding: 0 11px; border: 1px solid rgba(255,255,255,.09); border-radius: 9px; background: #080e13; }
.dubbing-voice-search span { color: #4ddff0; font-size: 16px; }
.dubbing-voice-search input { min-width: 0; height: 38px; border: 0; outline: none; background: transparent; color: #dce8eb; font: inherit; }
.dubbing-filter-toggle { min-width: 72px; height: 40px; padding: 0 11px; border: 1px solid rgba(255,255,255,.1); border-radius: 9px; background: #0a1217; color: #a8b8bd; font-size: 10px; cursor: pointer; }
.dubbing-filter-toggle:hover,.dubbing-filter-toggle[aria-expanded='true'] { border-color: rgba(76,226,196,.38); color: #6debc9; }
.dubbing-filter-toggle b { min-width: 16px; height: 16px; display: inline-grid; place-items: center; margin-left: 4px; border-radius: 50%; background: #4ce2c4; color: #06110f; font-size: 8px; }
.dubbing-filter-panel { margin: 0 15px 10px; padding: 12px 13px; border: 1px solid rgba(255,255,255,.08); border-radius: 11px; background: #091116; }
.dubbing-filter-panel fieldset { display: grid; grid-template-columns: 52px minmax(0,1fr); align-items: start; gap: 7px; margin: 0; padding: 7px 0; border: 0; }
.dubbing-filter-panel legend { float: left; width: 52px; padding: 6px 0 0; color: #66767d; font-size: 9px; }
.dubbing-filter-panel fieldset > div { display: flex; flex-wrap: wrap; gap: 6px; }
.dubbing-filter-panel fieldset button { height: 26px; padding: 0 9px; border: 1px solid transparent; border-radius: 999px; background: transparent; color: #7a898f; font-size: 9px; cursor: pointer; }
.dubbing-filter-panel fieldset button:hover { color: #c8d6d9; }
.dubbing-filter-panel fieldset button.active { border-color: rgba(76,226,196,.3); background: rgba(76,226,196,.1); color: #69e8c7; }
.dubbing-filter-panel footer { display: flex; justify-content: flex-end; padding-top: 7px; border-top: 1px solid rgba(255,255,255,.06); }
#dubbing-filter-reset { border: 0; background: transparent; color: #788990; font-size: 9px; cursor: pointer; }
#dubbing-filter-reset:hover { color: #d6e3e6; }
.dubbing-active-filters { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 15px 10px; }
.dubbing-active-filters button { height: 25px; padding: 0 9px; border: 1px solid rgba(76,226,196,.25); border-radius: 999px; background: rgba(76,226,196,.07); color: #69e8c7; font-size: 8px; cursor: pointer; }
.dubbing-active-filters span { margin-left: 4px; color: #a3b4b8; }
.dubbing-voice-grid { max-height: 520px; display: grid; gap: 7px; padding: 0 12px 14px; overflow-y: auto; }
.dubbing-voice-grid > p { margin: 18px 4px; color: #5f6d74; font-size: 10px; }
.dubbing-voice-card { width: 100%; min-height: 68px; display: grid; grid-template-columns: 48px minmax(160px,1fr) minmax(150px,.62fr) auto; align-items: center; gap: 11px; padding: 9px; border: 1px solid rgba(255,255,255,.06); border-radius: 11px; background: #0a1217; color: inherit; text-align: left; }
.dubbing-voice-card:hover { border-color: rgba(67,223,242,.22); background: #0c171d; }
.dubbing-voice-card.selected { border-color: rgba(76,226,196,.68); background: rgba(24,74,66,.48); box-shadow: inset 4px 0 #4ce2c4,0 0 0 1px rgba(76,226,196,.08); }
.dubbing-voice-avatar { width: 48px; height: 48px; display: block; border-radius: 10px; object-fit: cover; }
.dubbing-voice-copy { min-width: 0; display: grid; gap: 4px; }
.dubbing-voice-copy > span { min-width: 0; display: flex; align-items: center; gap: 7px; }
.dubbing-voice-copy strong { color: #dfeaed; font-size: 11px; }
.dubbing-voice-number { flex: 0 0 auto; min-width: 27px; padding: 2px 5px; border: 1px solid rgba(67,223,242,.2); border-radius: 5px; background: rgba(67,223,242,.07); color: #66dce4; font: 700 8px/1.35 ui-monospace,monospace; text-align: center; letter-spacing: .08em; }
.dubbing-voice-copy small { display: -webkit-box; overflow: hidden; color: #65757d; font-size: 8px; line-height: 1.55; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.dubbing-voice-card i { flex: 0 0 auto; padding: 3px 5px; border-radius: 4px; background: rgba(76,226,196,.09); color: #597079; font-size: 7px; font-style: normal; }
.dubbing-voice-card.selected i { color: #62e7c1; }
.dubbing-voice-tags { display: flex; flex-wrap: wrap; gap: 4px; }
.dubbing-voice-tags em { padding: 4px 6px; border-radius: 5px; background: rgba(255,255,255,.045); color: #76868c; font-size: 7px; font-style: normal; white-space: nowrap; }
.dubbing-voice-card-actions { display: flex; align-items: center; gap: 6px; }
.dubbing-card-favorite,.dubbing-card-select { height: 30px; border-radius: 8px; font-size: 9px; cursor: pointer; }
.dubbing-card-favorite { width: 32px; border: 1px solid rgba(242,199,92,.18); background: transparent; color: #78878c; font-size: 15px; }
.dubbing-card-favorite:hover,.dubbing-card-favorite[aria-pressed='true'] { border-color: rgba(242,199,92,.45); color: #f2c75c; }
.dubbing-card-select { min-width: 58px; padding: 0 12px; border: 1px solid rgba(76,226,196,.3); background: rgba(76,226,196,.08); color: #69e8c7; }
.dubbing-card-select:hover,.dubbing-voice-card.selected .dubbing-card-select { border-color: #4ce2c4; background: #4ce2c4; color: #06110f; }
.dubbing-footer-actions { display: flex; align-items: center; gap: 8px; }
#dubbing-preview-selected,#dubbing-favorite-selected,#dubbing-set-default { height: 38px; padding: 0 14px; border-radius: 9px; font-size: 10px; cursor: pointer; transition: border-color .18s ease,background .18s ease,color .18s ease; }
#dubbing-preview-selected { border: 1px solid rgba(69,175,255,.4); background: rgba(41,137,218,.14); color: #7bc8ff; }
#dubbing-favorite-selected { border: 1px solid rgba(242,199,92,.38); background: rgba(242,199,92,.1); color: #f2c75c; }
#dubbing-set-default { border: 1px solid rgba(175,122,255,.4); background: rgba(138,78,224,.13); color: #c6a1ff; }
#dubbing-preview-selected:hover { border-color: rgba(69,175,255,.72); background: rgba(41,137,218,.22); }
#dubbing-favorite-selected:hover,#dubbing-favorite-selected[aria-pressed='true'] { border-color: rgba(242,199,92,.7); background: rgba(242,199,92,.18); color: #ffe08a; }
#dubbing-set-default:hover { border-color: rgba(175,122,255,.72); background: rgba(138,78,224,.22); }
#dubbing-preview-selected:disabled,#dubbing-favorite-selected:disabled,#dubbing-set-default:disabled { cursor: wait; opacity: .55; }
.dubbing-results > header div { display: grid; gap: 3px; }
.dubbing-results > header strong { color: #e6f0f2; font-size: 13px; }
.dubbing-results > header span { color: #5f7079; font-size: 9px; }
#dubbing-result-list { display: grid; gap: 8px; padding: 12px 14px 14px; }
#dubbing-result-list > p { margin: 5px; color: #5c6b74; font-size: 10px; }
.dubbing-result-card { display: grid; grid-template-columns: minmax(150px,.6fr) minmax(220px,1fr) auto; align-items: center; gap: 14px; padding: 11px 12px; border: 1px solid rgba(255,255,255,.06); border-radius: 10px; background: #0b1319; }
.dubbing-result-card > div { min-width: 0; display: grid; gap: 4px; }
.dubbing-result-card strong { color: #dce8eb; font-size: 11px; }
.dubbing-result-card span { color: #667780; font-size: 9px; }
.dubbing-result-card audio { width: 100%; height: 30px; }
.dubbing-result-card a { padding: 7px 12px; border: 1px solid rgba(76,226,196,.25); border-radius: 7px; color: #62e7c1; font-size: 9px; text-decoration: none; }
@media (max-width: 1180px) { .dubbing-workspace { grid-template-columns: 1fr; } .dubbing-voice-grid { max-height: 480px; } }
@media (max-width: 680px) { .dubbing-hero { align-items: stretch; } .dubbing-status { min-width: 0; } .dubbing-controls { grid-template-columns: 1fr 1fr; } .dubbing-script-panel > footer { align-items: stretch; flex-direction: column; } .dubbing-result-card { grid-template-columns: 1fr; } .dubbing-voice-card { grid-template-columns: 42px minmax(0,1fr) auto; } .dubbing-voice-avatar { width: 42px; height: 42px; } .dubbing-voice-tags { display: none; } }
@media (max-width: 520px) { .dubbing-voice-toolbar { grid-template-columns: 1fr; } .dubbing-filter-toggle { width: 100%; } .dubbing-filter-panel fieldset { grid-template-columns: 1fr; } .dubbing-filter-panel legend { float: none; width: auto; padding: 0; } }
@media (max-width: 440px) { .dubbing-controls { grid-template-columns: 1fr; } }

.dubbing-clone-section { overflow: hidden; border: 1px solid rgba(255,255,255,.09); border-radius: 16px; background: linear-gradient(145deg,rgba(13,21,27,.97),rgba(6,11,15,.98)); }
.dubbing-clone-section > header { min-height: 78px; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 17px 20px; border-bottom: 1px solid rgba(255,255,255,.07); }
.dubbing-clone-section > header > div { display: flex; align-items: flex-start; gap: 12px; }
.dubbing-clone-section > header > div > span { color: #43dff2; font-size: 10px; font-weight: 800; }
.dubbing-clone-section h2 { margin: 0; color: #edf5f6; font-size: 15px; }
.dubbing-clone-section header p { margin: 5px 0 0; color: #65747d; font-size: 10px; }
.dubbing-clone-section > header > strong { color: #62e7c1; font-size: 10px; }
.dubbing-clone-section .voice-clone-form { padding: 2px 0 18px; border-bottom: 1px solid rgba(255,255,255,.07); }
.dubbing-clone-section .voice-clone-form > footer { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 0 20px; }
.dubbing-clone-section .voice-clone-form > footer > div { display: grid; gap: 4px; }
.dubbing-clone-section .voice-clone-form > footer strong { color: #62e7c1; font-size: 10px; }
.dubbing-clone-section .voice-clone-form > footer small { color: #53636b; font-size: 9px; }
.dubbing-clone-section .voice-clone-records { margin: 16px; }
@media (max-width: 680px) { .dubbing-footer-actions,.dubbing-clone-section .voice-clone-form > footer { align-items: stretch; flex-direction: column; } .dubbing-footer-actions > button { width: 100%; } }

/* ===== V4.10.1 subtitle node layout isolation ===== */
.canvas-node.subtitle-node {
  min-width: 360px !important;
  min-height: 216px !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: visible !important;
  border: 2px solid rgba(20, 207, 239, .86) !important;
  border-radius: 18px !important;
  background: linear-gradient(180deg, rgba(18, 27, 42, .98), rgba(13, 21, 33, .98)) !important;
  box-shadow: 0 0 0 1px rgba(9, 53, 69, .45), 0 0 30px rgba(14, 204, 239, .14), 0 18px 38px rgba(0, 0, 0, .32) !important;
}
.canvas-node.subtitle-node .node-header {
  flex: 0 0 38px !important;
  height: 38px !important;
  min-height: 38px !important;
  gap: 8px !important;
  padding: 0 14px !important;
  border: 0 !important;
  background: transparent !important;
}
.canvas-node.subtitle-node .node-badge {
  width: 22px !important;
  height: 22px !important;
  min-width: 22px !important;
  display: grid !important;
  place-items: center !important;
  border: 1px solid rgba(45, 231, 211, .38) !important;
  border-radius: 7px !important;
  background: rgba(20, 87, 84, .22) !important;
  color: #37edcf !important;
  font-size: 12px !important;
  font-weight: 800 !important;
}
.canvas-node.subtitle-node .node-title {
  color: #36edcf !important;
  font-size: 13px !important;
  font-weight: 750 !important;
  line-height: 1 !important;
}
.canvas-node.subtitle-node .node-menu-btn {
  width: 22px !important;
  height: 22px !important;
  min-width: 22px !important;
  font-size: 10px !important;
}
.canvas-node.subtitle-node .node-reset-btn {
  width: 22px !important;
  height: 22px !important;
  min-width: 22px !important;
  font-size: 14px !important;
}
.canvas-node.subtitle-node .node-body.subtitle-node-body {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  display: grid !important;
  grid-template-rows: minmax(58px, 1fr) auto auto !important;
  gap: 10px !important;
  padding: 8px 18px 14px !important;
  overflow: hidden !important;
}
.subtitle-node-section {
  min-width: 0;
  display: grid;
  align-content: start;
  gap: 4px;
}
.subtitle-node-section > span {
  color: #60798e;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .08em;
}
.subtitle-node-section > strong {
  overflow: hidden;
  color: #dceaf4;
  font-size: 13px;
  font-weight: 550;
  line-height: 1.5;
  text-overflow: ellipsis;
}
.subtitle-node-copy > strong {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  white-space: normal;
}
.subtitle-node-style {
  padding: 8px 10px;
  border: 1px solid rgba(87, 117, 143, .16);
  border-radius: 9px;
  background: rgba(4, 12, 22, .30);
}
.subtitle-node-style > strong {
  white-space: nowrap;
  text-overflow: ellipsis;
}
.subtitle-node-result {
  min-height: 20px;
  margin: 0 !important;
  padding: 8px 0 0 !important;
  border-top: 1px dashed rgba(98, 130, 158, .24);
  color: #788da1;
  font-size: 10px;
  line-height: 1.2;
}
.subtitle-node-result.ready { color: #25d9f4; }
.canvas-node.subtitle-node .handle-label { display: none !important; }
.canvas-node.subtitle-node .resize-handle { right: 10px !important; bottom: 10px !important; }

.prompt-dock.subtitle-mode {
  min-height: 0 !important;
  padding: 14px 16px 12px !important;
  box-sizing: border-box !important;
}
.subtitle-dock-content { display: grid; gap: 10px; }
.subtitle-dock-content.hidden { display: none; }
.subtitle-dock-content .media-dock-heading { padding: 0 2px; }
.subtitle-dock-content .media-composer-input {
  width: 100% !important;
  min-height: 78px !important;
  box-sizing: border-box !important;
}
.subtitle-dock-content .media-dock-footer {
  min-width: 0;
  align-items: end;
}
.subtitle-dock-content .media-dock-controls {
  min-width: 0;
  align-items: end;
  flex-wrap: wrap;
}
.subtitle-source-status { padding: 0 4px 8px !important; }

/* My fonts */
.portal-font-icon { color: currentColor; font-size: 12px; font-weight: 800; letter-spacing: -1px; }
.fonts-hero { align-items: center; }
.fonts-summary { min-width: 220px; display: grid; gap: 5px; padding: 17px 20px; border: 1px solid rgba(64,222,234,.22); border-radius: 14px; background: rgba(7,22,27,.72); }
.fonts-summary span { color: #6d7d86; font-size: 9px; text-transform: uppercase; letter-spacing: .12em; }
.fonts-summary strong { color: #59e7d0; font-size: 15px; }
.fonts-summary small { color: #52636c; font-size: 9px; }
.fonts-content { display: grid; gap: 18px; }
.font-upload-card, .font-library-card { overflow: hidden; border: 1px solid rgba(255,255,255,.08); border-radius: 15px; background: #091116; }
.font-upload-card > header, .font-library-card > header { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 18px 20px; border-bottom: 1px solid rgba(255,255,255,.07); }
.font-upload-card > header > div, .font-library-card > header > div { display: flex; align-items: flex-start; gap: 12px; }
.font-upload-card > header > div > span, .font-library-card > header > div > span { color: #36deee; font: 700 10px/1.4 ui-monospace, monospace; }
.font-upload-card h2, .font-library-card h2 { margin: 0; color: #e5eef0; font-size: 13px; }
.font-upload-card header p, .font-library-card header p { margin: 4px 0 0; color: #65747c; font-size: 10px; }
.font-upload-card header small { color: #5d6c74; font-size: 9px; }
.font-upload-fields { display: grid; grid-template-columns: minmax(200px,.7fr) minmax(300px,1fr) auto; align-items: end; gap: 14px; padding: 20px; }
.font-upload-fields > label { min-width: 0; display: grid; gap: 7px; color: #798991; font-size: 10px; }
.font-upload-fields input[type='text'] { width: 100%; height: 42px; padding: 0 12px; border: 1px solid rgba(255,255,255,.1); border-radius: 10px; outline: none; background: #060c10; color: #dce8eb; font: inherit; }
.font-upload-fields input[type='text']:focus, .font-preview-input input:focus { border-color: rgba(67,223,242,.55); box-shadow: 0 0 0 3px rgba(67,223,242,.06); }
.font-file-picker { position: relative; height: 64px; align-content: center; padding: 10px 14px; border: 1px dashed rgba(67,223,242,.28); border-radius: 10px; background: rgba(20,60,66,.16); cursor: pointer; }
.font-file-picker input { position: absolute; inset: 0; width: 100%; opacity: 0; cursor: pointer; }
.font-file-picker strong { color: #70e6eb; font-size: 11px; }
.font-file-picker small { overflow: hidden; color: #607078; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.font-upload-fields .home-primary-action { height: 42px; white-space: nowrap; }
.font-upload-feedback { min-height: 18px; margin: -6px 20px 13px; color: #5de1c5; font-size: 10px; }
.font-preview-input { display: grid; grid-template-columns: auto minmax(0,1fr); align-items: center; gap: 14px; margin: 18px 20px; color: #72828a; font-size: 10px; }
.font-preview-input input { width: 100%; height: 44px; padding: 0 13px; border: 1px solid rgba(255,255,255,.1); border-radius: 10px; outline: none; background: #060c10; color: #dce8eb; font: inherit; }
.font-library-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; padding: 0 20px 20px; }
.font-library-item { min-width: 0; display: grid; gap: 18px; padding: 16px; border: 1px solid rgba(255,255,255,.07); border-radius: 12px; background: #060d11; }
.font-library-item > header, .font-library-item > footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.font-library-item > header div { min-width: 0; display: grid; gap: 4px; }
.font-library-item > header strong { overflow: hidden; color: #dbe7ea; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.font-library-item > header small { overflow: hidden; color: #596971; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.font-library-item > header button { padding: 6px 10px; border: 1px solid rgba(229,94,105,.22); border-radius: 8px; background: rgba(85,24,31,.14); color: #d77c83; font-size: 9px; cursor: pointer; }
.font-preview-sample { min-height: 58px; margin: 0; overflow-wrap: anywhere; color: #eef6f7; font-size: clamp(22px,2.2vw,36px); line-height: 1.5; }
.font-library-item > footer { color: #53636b; font-size: 8px; }
.font-library-item > footer span { padding: 3px 7px; border-radius: 999px; background: rgba(64,222,234,.08); color: #6fcbd0; }
.font-library-empty { grid-column: 1 / -1; padding: 50px 20px; text-align: center; color: #65757d; }
.font-library-empty strong { display: block; margin-bottom: 7px; color: #9aa8ad; font-size: 13px; }
.font-library-empty p { margin: 0; font-size: 10px; }
@media (max-width: 980px) {
  .font-upload-fields { grid-template-columns: 1fr; align-items: stretch; }
  .font-library-grid { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .fonts-hero { align-items: stretch; }
  .fonts-summary { min-width: 0; }
  .font-upload-card > header, .font-library-card > header { align-items: flex-start; flex-direction: column; }
  .font-preview-input { grid-template-columns: 1fr; }
}
 .archive-save-panel { position:fixed; right:20px; bottom:24px; z-index:10000; max-width:min(460px,90vw); max-height:50vh; overflow:auto; }
 .archive-save-status { margin-top:8px; padding:14px; background:#163444; color:#e3f5ff; border:1px solid #43849b; border-radius:8px; font-size:13px; }
 .archive-save-status button { margin-left:10px; padding:6px; cursor:pointer; }