:root { --auto-purple:#8062f3; --auto-ink:#20223c; --auto-muted:#85869c; --auto-line:rgba(132,118,190,.14); }
#automation-workspace[hidden] { display:none !important; }
#automation-workspace { position:fixed; inset:0; z-index:25; overflow:auto; color:var(--auto-ink); background:radial-gradient(ellipse at 85% 0%,#ece7ff 0,transparent 43%),radial-gradient(ellipse at 0 100%,#f0edff 0,transparent 40%),#f7f8fc; font-family:Inter,"Microsoft YaHei",sans-serif; }
#automation-workspace *,#automation-workspace *::before,#automation-workspace *::after { box-sizing:border-box; }
#automation-workspace button,#automation-workspace input,#automation-workspace select,#automation-workspace textarea { font:inherit; }
#automation-workspace button { cursor:pointer; }
#automation-workspace button:disabled { cursor:wait; opacity:.5; }
#automation-workspace button:focus-visible,#automation-workspace a:focus-visible,#automation-workspace input:focus-visible,#automation-workspace select:focus-visible,#automation-workspace textarea:focus-visible { outline:3px solid #b5a6ff; outline-offset:3px; }
body > #workspace-mode-switch.global-workspace-mode-switch { display:flex !important; position:fixed !important; top:22px !important; bottom:auto !important; left:50% !important; transform:translateX(-50%) !important; right:auto !important; z-index:180 !important; gap:5px !important; width:auto; border:1px solid rgba(255,255,255,.8) !important; border-radius:40px !important; padding:5px !important; background:rgba(255,255,255,.72) !important; backdrop-filter:blur(18px); box-shadow:0 5px 22px #3b27530a !important; }
body > #workspace-mode-switch .workspace-mode-button { display:flex; align-items:center; justify-content:center; gap:8px; min-width:155px; height:42px; padding:0 23px; border:0; border-radius:30px; font-size:14px; color:#88879f; background:transparent; }
body > #workspace-mode-switch .workspace-mode-button.is-active { background:linear-gradient(120deg,#b6a7ff,#7d5bff); color:white; box-shadow:0 5px 16px #8062f32b; }
body > #workspace-mode-switch .workspace-mode-label { display:inline !important; }
.auto-topbar { height:91px; display:flex; align-items:center; justify-content:space-between; padding:0 3.3%; }
.auto-brand { display:flex; align-items:center; gap:13px; color:inherit; text-decoration:none; font-size:19px; letter-spacing:-.6px; }
.auto-brand img { width:43px; height:43px; border-radius:13px; box-shadow:0 5px 15px #3332; }
.auto-icon { width:43px; height:43px; border:1px solid var(--auto-line); background:#ffffffb8; border-radius:50%; color:#48445e; display:inline-grid; place-items:center; }
.auto-main { max-width:1800px; margin:auto; padding:26px 3.3% 140px; }
.auto-title { display:flex; align-items:center; justify-content:space-between; gap:20px; margin:0 0 26px; }
.auto-title h1 { font-size:29px; font-weight:750; letter-spacing:-1px; margin:0 0 8px; }
.auto-title p,.auto-subtle { color:var(--auto-muted); font-size:13px; line-height:1.7; margin:0; }
.auto-spark { color:#9778fa; margin-right:10px; }
.auto-panel { border:1px solid #ffffffbd; border-radius:22px; padding:24px; background:rgba(255,255,255,.77); box-shadow:0 13px 45px #59507d05; min-width:0; }
.auto-panel h2 { font-size:16px; font-weight:650; margin:0 0 22px; display:flex; align-items:center; gap:9px; }
.auto-panel h3 { font-size:14px; margin:14px 0; }
.auto-button { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:42px; border:1px solid var(--auto-line); padding:10px 19px; border-radius:25px; background:#ffffffd9; color:#65568e; font-size:13px; font-weight:550; text-decoration:none; white-space:nowrap; }
.auto-button.primary { color:white; border-color:transparent; background:linear-gradient(120deg,#a58dff,#7950fa); box-shadow:0 7px 17px #8062f323; }
.auto-button.danger { color:#bf5169; }
.auto-actions { display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.auto-dock { position:fixed; bottom:22px; left:50%; transform:translateX(-50%); z-index:35; display:flex; gap:12px; padding:8px 18px; border-radius:34px; border:1px solid white; background:#ffffffdb; backdrop-filter:blur(20px); box-shadow:0 12px 50px #5e4b8610; }
.auto-dock button { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:7px; min-width:90px; height:66px; border:0; border-radius:22px; color:#7d7d92; background:transparent; font-size:12px; }
.auto-dock button[aria-current="page"] { color:#8b66f4; background:#f0ebff; }
.auto-dock .material-symbols-outlined { font-size:24px; }
.auto-hero { padding:35px 42px; max-width:1300px; margin:0 auto 28px; text-align:center; border-radius:30px; background:#ffffff75; border:1px solid white; }
.auto-hero h1 { font-size:33px; margin:0 0 11px; letter-spacing:-1px; }
.auto-hero p { color:var(--auto-muted); font-size:14px; margin:0 0 25px; }
.auto-composer { display:flex; gap:14px; align-items:center; border:1px solid white; background:#fff; border-radius:19px; padding:15px; text-align:left; }
.auto-composer textarea { resize:none; min-height:48px; border:0; flex:1; background:transparent; padding:12px 8px; min-width:0; outline:none; }
.auto-composer .auto-upload-square { width:66px; height:66px; flex-shrink:0; border:1px dashed #cdbff4; border-radius:14px; display:grid; place-items:center; background:#f9f7ff; color:#a18ae9; }
.auto-chips { display:flex; align-items:center; flex-wrap:wrap; gap:10px; margin-top:14px; }
.auto-chip { display:inline-flex; align-items:center; gap:5px; padding:6px 12px; border-radius:18px; background:#f3efff; color:#8a70bd; font-size:11px; }
.auto-grid { display:grid; gap:22px; }
.auto-console-grid { grid-template-columns:250px minmax(0,1fr) 300px; }
.auto-split { grid-template-columns:minmax(0,1fr) 340px; }
.auto-three { grid-template-columns:220px minmax(0,1fr) 380px; }
.auto-empty { min-height:230px; display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; color:#9691ac; gap:13px; border:1px dashed #ded8ee; border-radius:16px; padding:24px; }
.auto-empty > .material-symbols-outlined { font-size:38px; color:#b6a1ed; }
.auto-empty strong { color:#77718c; font-size:15px; }
.auto-empty p { font-size:12px; line-height:1.8; max-width:350px; margin:0; }
.auto-thumb-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.auto-thumb { border:1px solid var(--auto-line); border-radius:13px; overflow:hidden; position:relative; background:#f7f5fc; }
.auto-thumb img { width:100%; aspect-ratio:1; object-fit:cover; display:block; }
.auto-thumb span { display:block; padding:8px; font-size:11px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.auto-stage { display:flex; gap:10px; align-items:flex-start; justify-content:space-between; margin:30px 0 4px; }
.auto-stage-item { text-align:center; flex:1; min-width:0; font-size:11px; color:#aaa4bd; position:relative; }
.auto-stage-item:not(:last-child)::after { content:"→"; position:absolute; right:-10px; top:17px; color:#cfc1fa; font-size:20px; }
.auto-stage-item > i { display:grid; place-items:center; margin:0 auto 10px; width:44px; height:44px; background:#f2edff; color:#b7a0ed; border-radius:50%; font-style:normal; }
.auto-stage-item.active { color:#8463dd; }
.auto-stage-item.active > i { background:#eae0ff; color:#8662ed; }
.auto-filmstrip { display:flex; gap:10px; overflow-x:auto; padding-bottom:10px; }
.auto-shot-tile { background:#faf8ff; border:2px solid transparent; border-radius:13px; padding:0; min-width:115px; flex:1; overflow:hidden; text-align:left; color:#5c5473; }
.auto-shot-tile.selected { border-color:#a68aff; }
.auto-shot-tile img { width:100%; aspect-ratio:1.3; object-fit:cover; }
.auto-shot-tile .auto-shot-placeholder { width:100%; aspect-ratio:1.3; display:grid; place-items:center; background:linear-gradient(135deg,#f0eaff,#f8f6fd); color:#bbabd9; }
.auto-shot-tile span { display:block; padding:8px; font-size:11px; }
.auto-preview { width:100%; max-height:530px; aspect-ratio:9/16; object-fit:contain; background:#f5f2fb; border-radius:15px; display:block; margin:auto; }
.auto-toolbar { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:22px; }
.auto-toolbar input { flex:1; min-width:160px; }
.auto-field { display:flex; flex-direction:column; gap:9px; margin-bottom:18px; font-size:12px; color:#625d76; }
.auto-field input,.auto-field textarea,.auto-field select,.auto-input { width:100%; padding:12px 14px; border:1px solid var(--auto-line); background:#ffffffba; color:var(--auto-ink); border-radius:12px; min-width:0; font-size:13px; }
.auto-field textarea { min-height:92px; resize:vertical; line-height:1.65; }
.auto-field.compact textarea { min-height:60px; }
.auto-form-grid { display:grid; grid-template-columns:minmax(0,1.4fr) minmax(230px,1fr); gap:28px; }
.auto-upload-drop { padding:20px; border:1px dashed #cdbff0; border-radius:15px; display:flex; gap:12px; align-items:center; background:#faf8ff; margin-bottom:20px; }
.auto-upload-drop.is-over { background:#eee6ff; border-color:#8b64f4; }
.auto-gallery { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; }
.auto-work-card { background:#ffffffc4; border:1px solid white; border-radius:19px; overflow:hidden; }
.auto-work-card > img { width:100%; aspect-ratio:16/9; object-fit:cover; background:#eee8f8; }
.auto-work-body { padding:17px; }
.auto-work-body h3 { font-size:15px; margin:0 0 10px; }
.auto-work-body .auto-actions { margin-top:17px; }
.auto-back { border:0; padding:0; background:none; color:#9788b7; font-size:12px; margin-bottom:14px; }
.auto-project-select { max-width:260px; }
.auto-shot-list { display:flex; flex-direction:column; gap:10px; }
.auto-shot-row { display:flex; gap:10px; align-items:center; width:100%; border:1px solid transparent; border-radius:14px; background:#ffffff75; padding:10px; text-align:left; color:var(--auto-ink); }
.auto-shot-row.selected { background:#f0eaff; border-color:#dfd2ff; }
.auto-shot-row img { width:67px; height:65px; object-fit:cover; border-radius:9px; }
.auto-shot-row .auto-shot-placeholder { width:58px; height:58px; border-radius:10px; background:#eee7fa; display:grid; place-items:center; color:#a58cca; flex-shrink:0; }
.auto-shot-row strong { font-size:12px; display:block; margin:5px 0; }
.auto-shot-row small { color:#a194b8; font-size:10px; }
.auto-inspector { max-height:640px; overflow:auto; }
.auto-shot-stage { width:100%; max-height:470px; object-fit:contain; border-radius:14px; background:#f3eff8; }
.auto-timeline { display:flex; gap:5px; margin-top:20px; }
.auto-timeline button { min-width:0; height:45px; border:0; background:#ede6ff; border-radius:10px; color:#8c70c4; font-size:11px; overflow:hidden; }
.auto-timeline button.selected { color:white; background:#a58aee; }
.auto-task-row { display:grid; grid-template-columns:65px minmax(100px,1fr) 100px auto; gap:15px; align-items:center; padding:18px 0; border-bottom:1px solid var(--auto-line); }
.auto-task-row img { width:60px; height:60px; object-fit:cover; border-radius:12px; }
.auto-task-row strong { font-size:13px; }
.auto-task-row p { font-size:11px; color:#9387aa; margin:6px 0; }
.auto-progress { width:100%; height:6px; background:#ece8f6; border-radius:5px; overflow:hidden; margin:10px 0; }
.auto-progress span { display:block; background:linear-gradient(90deg,#bfaaff,#8b63f5); height:100%; border-radius:5px; }
.auto-status { font-size:11px; color:#8b6bcc; background:#eee8fb; padding:5px 10px; border-radius:15px; display:inline-block; }
.auto-status.failed { color:#bb5c70; background:#fdeaf0; }
.auto-status.succeeded { color:#44a68a; background:#e5f8f0; }
.auto-error { color:#b0586b; background:#fff1f5; padding:13px 17px; border-radius:12px; font-size:12px; line-height:1.7; margin-bottom:18px; overflow-wrap:anywhere; }
.auto-notice { position:fixed; z-index:100; bottom:122px; left:50%; transform:translateX(-50%); padding:13px 22px; max-width:90vw; border-radius:14px; background:#363047; color:white; box-shadow:0 8px 35px #0002; font-size:13px; }
.auto-audio { width:100%; height:36px; margin:10px 0; }
.auto-version { display:flex; gap:8px; flex-wrap:wrap; margin-top:18px; }
.auto-help { border-top:1px solid var(--auto-line); padding-top:18px; margin-top:18px; font-size:12px; color:#9388aa; line-height:1.8; }
.auto-settings-grid { display:grid; grid-template-columns:190px minmax(0,1fr) 300px; gap:24px; }
.auto-settings-menu button { display:block; text-align:left; width:100%; padding:14px; border:0; border-radius:12px; background:transparent; color:#81758f; margin-bottom:5px; }
.auto-settings-menu button.active { background:#eee7ff; color:#8660db; }
html[data-jwj-workspace-mode="canvas"] .canvas-library-topbar { padding:20px 3.3%; background:transparent; border:0; height:91px; }
html[data-jwj-workspace-mode="canvas"] .canvas-project-library { background:radial-gradient(ellipse at 95% 0%,#ece7ff,transparent 45%),#f7f8fc; }
html[data-jwj-workspace-mode="canvas"] .canvas-project-library-main { max-width:1550px; padding-top:35px; }
html[data-jwj-workspace-mode="canvas"] .canvas-primary-button { background:linear-gradient(120deg,#b19bff,#7e57f3); box-shadow:0 7px 20px #8062f324; border-color:transparent; }
html[data-jwj-workspace-mode="canvas"] .canvas-project-empty,html[data-jwj-workspace-mode="canvas"] .canvas-project-card { background:#ffffffab; border-color:#e5dff1; border-radius:20px; }
html[data-jwj-workspace-mode="canvas"] .canvas-topbar { padding-top:85px; }
#settings-modal .settings-dialog { border-radius:23px; background:#faf8ff; }
#settings-modal .settings-api-tab.is-active { background:#eee6ff; color:#845bd6; }
#settings-modal .settings-save,#settings-modal .settings-primary-button { background:#8c6bf1; }
@media(min-width:1500px) { .auto-main { padding-top:30px; } .auto-hero { margin-bottom:35px; } }
@media(max-width:1150px) { .auto-console-grid { grid-template-columns:210px minmax(0,1fr); } .auto-console-grid > :last-child { grid-column:1/-1; } .auto-console-grid > :last-child .auto-preview { max-height:320px; } .auto-three { grid-template-columns:180px minmax(0,1fr); } .auto-three > :last-child { grid-column:1/-1; max-height:none; } .auto-settings-grid { grid-template-columns:160px minmax(0,1fr); } .auto-settings-grid > :last-child { grid-column:1/-1; } }
@media(max-width:760px) { .auto-topbar { height:145px; align-items:flex-start; padding-top:17px; } body > #workspace-mode-switch.global-workspace-mode-switch { top:80px; } body > #workspace-mode-switch .workspace-mode-button { min-width:130px; height:37px; font-size:12px; padding:0 14px; } .auto-brand { font-size:16px; } .auto-brand img { width:35px; height:35px; } .auto-main { padding:12px 16px 125px; } .auto-hero { padding:23px 16px; } .auto-hero h1 { font-size:25px; } .auto-composer { flex-wrap:wrap; } .auto-composer .auto-button { width:100%; } .auto-console-grid,.auto-three,.auto-split,.auto-form-grid,.auto-settings-grid { grid-template-columns:1fr; } .auto-three > :last-child,.auto-console-grid > :last-child { grid-column:auto; } .auto-gallery { grid-template-columns:repeat(2,minmax(0,1fr)); } .auto-panel { padding:18px; border-radius:17px; } .auto-title { align-items:flex-start; } .auto-title h1 { font-size:25px; } .auto-dock { gap:2px; padding:6px 9px; bottom:12px; border-radius:28px; } .auto-dock button { min-width:70px; height:57px; font-size:11px; } .auto-task-row { grid-template-columns:45px 1fr; gap:12px; } .auto-task-row img { width:44px; height:44px; } .auto-task-row > :nth-child(n+3) { grid-column:2; } .auto-shot-list { flex-direction:row; overflow:auto; } .auto-shot-row { min-width:170px; } .auto-settings-menu { display:flex; overflow:auto; } .auto-settings-menu button { white-space:nowrap; } .auto-preview { max-height:400px; } html[data-jwj-workspace-mode="canvas"] .canvas-library-topbar { height:145px; align-items:flex-start; } }
@media(prefers-reduced-motion:reduce) { #automation-workspace * { scroll-behavior:auto; transition:none; animation:none; } }
html[data-jwj-workspace-mode="canvas"] .canvas-primary-button { background:linear-gradient(120deg,#b19bff,#7e57f3) !important; border-color:transparent !important; box-shadow:0 7px 20px #8062f324 !important; }
.auto-work-card > .auto-shot-placeholder { aspect-ratio:16/9; display:grid; place-items:center; background:#efeafa; color:#b29ccf; }
.auto-task-row > .auto-shot-placeholder { width:60px; height:60px; display:grid; place-items:center; background:#efeafa; border-radius:12px; color:#b29ccf; }
#auto-brief-form fieldset { border:0; padding:0; margin:0; min-width:0; }
@media(max-width:760px) { body > #workspace-mode-switch.global-workspace-mode-switch { top:80px !important; } .auto-title { flex-wrap:wrap; } .auto-upload-drop { flex-wrap:wrap; } }